@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&family=Poppins&display=swap');
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

@media screen and (max-width: 1000px) {
  html {
    font-size: 50%;
  }
}

@media screen and (max-width: 580px) {
  html {
    font-size: 37.5%;
  }
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #333;
  letter-spacing: .03em;
  font-size: 1.6rem;
  line-height: 1.2;
  -webkit-text-size-adjust: 100%;
  font-family: "Noto Sans JP", sans-serif;
}

body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(252,226,228);
  background: linear-gradient(0deg, rgb(168 213 231) 30%, rgb(240 252 255) 100%);
  background-size: 50px;
  transition: opacity .5s ease-out;
}

img {
  display: block;
  max-width: 100%;
  margin: auto;
}

a {
  color: #000;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* intersection
====================================== */
*[data-intersection] {
  opacity: 0;
  transition: all .4s ease-out;
  transform: translateY(20px);
}

*[data-intersection][data-intersecting="true"] {
  opacity: 1;
  transition: all .4s ease-out .2s;
  transform: translateY(0);
}

*.js-itrsec-right[data-intersection]{
  opacity: 0;
  transition: all .4s ease-out;
  transform: translateX(-20px);
}

*.js-itrsec-right[data-intersection][data-intersecting="true"] {
  opacity: 1;
  transition: all .4s ease-out .2s;
  transform: translateX(0);
}

*.js-itrsec-left[data-intersection]{
  opacity: 0;
  transition: all .4s ease-out;
  transform: translateX(20px);
}

*.js-itrsec-left[data-intersection][data-intersecting="true"] {
  opacity: 1;
  transition: all .4s ease-out .2s;
  transform: translateX(0);
}

/* Pace
====================================== */

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

.pace .pace-progress {
  background: #A8D5E7;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

.pace.pace-inactive {
  opacity: 0;
  height: auto;
}

/* utility
====================================== */
.u-tablet-block {
  display: none !important;
}
.u-mobile-block {
  display: none !important;
}
.u-bg-beige {
  background: #F0E6DD;
}

@media screen and (max-width: 960px) {
  .u-tablet-block {
    display: block !important;
  }
  .u-tablet-none {
    display: none !important;
  }
}

@media screen and (max-width: 580px) {
  .u-mobile-block {
    display: block !important;
  }
  .u-mobile-none {
    display: none !important;
  }
}

/* main
====================================== */
.l-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  background: #fff;
}

.l-main {
  position: relative;
  width: 100%;
  max-height: 100%;
  background: #E6D9D0;
}

/* nav-sticky
====================================== */
.l-nav-sticky {
  background:#fef9e7;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all .4s ease-out;
  transition: all .4s ease-out;
}

.l-nav-sticky__list {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.l-nav-sticky__list li {
  display: block;
  margin: 1.2em;
}
.l-nav-sticky__list li a{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.l-nav-sticky__list li a:hover img {
  opacity: .8;
}
.l-nav-sticky__list li a img{
  transition: all .3s ease;
}
.l-nav-sticky-btn {
  display: block;
  position: fixed;
  z-index: 2;
  right: 5%;
  color: #fff;
  background: #000000;
  text-decoration: none;
  padding: .8em 1em;
  border-radius: 5px 5px 0 0;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

@media screen and (max-width: 580px) {
  .l-nav-sticky__list li{
    width: 80%;
  }
}

/* header
====================================== */
.l-header {
  height: 65px;
  background: #000;
  position: relative;
}
.l-header__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 2em;
}
.l-header__logo {
  width: 32.5%;
  max-width: 240px;
  margin: 0 auto;
}
@media screen and (max-width: 580px) {
  .l-header {
    height: 50px;
  }
  .l-header__logo {
    width: 100%;
    max-width: 210px;
    margin: auto 1.5em;
  }
}

/* footer
====================================== */
.l-footer {
  padding: 3em 0;
  background: #000;
  color: #fff;
  text-align: center;
  opacity: 1 !important;
  transform: none !important;
}

.l-footer > p {
  margin-top: -.375em;
  margin-bottom: -.375em;
}

/* sec
====================================== */
.c-sec {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 3.75em 0;
  z-index: 1;
  overflow: hidden;
}
.c-sec-inner {
  max-width: 900px;
  margin: auto;
  padding: 0 2em;
}
.c-sec-inner._not-bottom {
  padding: 0 2em 0;
}
.c-sec__fig:not(:last-of-type) {
  padding-bottom: .3em;
}
.c-sec-title{
  padding-bottom: 2.5em;
}
@media screen and (max-width: 580px) {
  .c-sec-title{
    width: 75%;
    margin: 0 auto;
  }
}
.c-sec-title._freed{
  padding: 2.5em 0;
}
@media screen and (max-width: 580px) {
  .c-sec-title._freed{
    width: 75%;
    margin: 0 auto;
  }
}

/* btn */
.c-sec-btn {
  display: flex;
  justify-content: space-around;
  padding: 0 3.75em;
}
.c-sec-btn li {
  width: 45%;
}
.c-btn {
  transition: 0.3s ease-in-out;
}
.c-btn:hover{
  opacity: .8;
}
@media screen and (max-width: 580px) {
  .c-sec-btn{
    padding: 0 1em;
  }
}

/* photo caution */
.c-photo_caution{
  line-height: 1.25;
  font-size: 0.625em;
  text-align: justify;
  margin-top: 3rem;
}

.c-photo_caution span{
  font-weight: bold;
}


.c-photo_caution._big{
  font-size: 1.8rem;
  font-weight: bolder;
}

/* mainvisual
====================================== */
.p-mainvisual {
  width: 100%;
  overflow: hidden;
  z-index: 1;
  position: relative;
}
.p-mainvisual__caution{
  padding: 0 1.5625em;
  position: absolute;
  bottom: 1.5em;
}

@media screen and (max-width: 580px) {
  .p-mainvisual__caution{
    bottom: 0.5em;
  }
}

/* type
====================================== */
.p-type{
  background: #fef9e7;
  padding-top: 0;
}
.p-type-tab{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25em;
  align-items: end;
}
.p-type-tab li{
  border-radius: 5px 5px 0 0;
}
.p-type-tab ._air_exterior{
  background: #b7ace0;
}
.p-type-tab ._crosstar_exterior{
  background: #a48e6a;
}
.p-type-tab ._air_interior{
  background: #b7ace0;
}
.p-type-tab ._crosstar_interior{
  background: #a48e6a;
}
.p-type-tab ._air_lineup{
  background: #b7ace0;
}
.p-type-tab ._crosstar_lineup{
  background: #a48e6a;
}
.p-type-tab__body {
  display: none;
  opacity: 0;
  background: #fff;
  padding: 2.5em;
  border-radius: 0 0 5px 5px;
}
.p-type-tab li a{
  display: block;
  padding: 1.125rem;
  text-decoration: none;
  color: #fff;
  text-align: center;
  font-size: 1.875em;
  font-weight: bold;
}
.p-type-tab li.active a{
  padding: 1.875rem;
}
.p-type-tab__body.is-active {
  display: block;
  animation-name: displayAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
.p-type-tab__body.airline{
  border: #b7ace0 4px solid;
}
.p-type-tab__body.crosstarline{
  border: #a48e6a 4px solid;
}

.p-type-tab span{
  font-size: 0.6em;
}

@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


@media screen and (max-width: 580px) {
  .p-type{
    padding-top: 2em;
  }
  .p-type-tab li.active a {
    padding: 1.5rem;
  }
  .p-type-tab__body{
    padding: 2em;
  }
}

/* sr
====================================== */
.p-sr{
  background: #f3fcff;
}
/*.p-sr-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}*/
.p-sr-item{
  color: #000;
  background: #fff;
  border-radius: 0.625em;
  box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 10%);
  width: 50%;
  margin: 0 auto;
}
.p-sr-item a{
  text-decoration: none;
  transition: 0.3s ease-in-out;
}
.p-sr-item a:hover{
  opacity: .8;
}
.p-sr-item__img img{
  border-radius: 0.625em 0.625em 0 0;
}
.p-sr-item__detail{
  padding: 0.9375em 0.625em 1.25em;
}
.p-sr-item__text{
  padding-bottom: 0.9375em;
}
.p-sr-item__name{
  font-size: 1.125em;
  padding-bottom: 0.625em;
  margin-bottom: 0.625em;
  font-weight: 600;
  text-align: center;
  border-bottom: solid 1px #c9c9c9;
}
.p-sr-item__add{
  font-size: 0.875em;
  padding-bottom: 0.625em;
}
.p-sr-item__tel{
  color: #21afcb;
  font-weight: bold;
}
.p-sr-item__btn{
  display: flex;
  flex-flow: column;
  gap: 0.9375em;
}
.p-sr-btn__cv{
  background: #21afcb;
  border-radius: 50px;
  color: #fff;
  font-size: 1.0625em;
  font-weight: 500;
  width: 100%;
  display: block;
  font-size: 1.0625em;
  padding: 0.5em;
  text-align: center;
  box-shadow: 0 5px 0 #0b91ab;
  transition: all 0.2s ease-out;
  position: relative;
}
.p-sr-btn__cv:hover{
  box-shadow: none;
  transform: translate3d(0, 5px, 0);
  opacity: 1;
}
.p-sr-btn__cv:after{
  font-family: 'Material Icons';
  content: '\e5cc';
  position: absolute;
  right: .1em;
  font-size: 2.5rem;
  line-height: 0;
  top: 50%;
  transform: translateY(-50%);
}
.p-sr-btn__detail{
  background: #333333;
  color: #fff;
  width: 100%;
  display: block;
  border-radius: 0 0 0.525em 0.525em;
  padding: .8em 1.25em;
  text-align: center;
  position: relative;
}
.p-sr-btn__detail:after{
  font-family: 'Material Icons';
  content: '\e5cc';
  position: absolute;
  right: .1em;
  font-size: 2.5rem;
  line-height: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 580px) {
  .p-sr-item{
    width: 75%;
  }
  .p-sr-list{
    grid-template-columns: repeat(2, 1fr);
  }
  .p-sr-item__add{
    font-size: 1em;
  }
  .p-sr-item__tel{
    font-size: 2.2rem;
  }
  .p-sr-item__tel a{
    color: #21afcb;
    text-decoration: underline;
  }
  .p-sr-item__text{
    padding-bottom: 1.5em;
  }
  .p-sr-item__btn{
    gap: 1.2em;
  }
  .p-sr-item__detail{
    padding-bottom: 1.5em;
  }
  .p-sr-btn__cv{
    box-shadow: 0 3px 0 #0b91ab;
  }
}


/* c-sec-container-btn
====================================== */
.c-sec-container-btn {
  max-width: 700px;
  margin: 2em auto;
}



/* credit
====================================== */
.p-credit .c-section-title{
  background-color: #fff;
}
.p-credit{
  background: #E2F6FB;
}
.p-credit .c-section-inner{
  padding: 1em 0 3.125em;
}
@media screen and (max-width: 580px){
  .p-credit .c-section-inner{
    padding: 1em 0 4em;
  }
}
.p-credit-accordion:not(:first-child){
  padding-top: 2em;
}
.p-credit-accordion__btn-close{
  display: none;
}
.p-credit-accordion__head{
  position: relative;
}
.p-credit-accordion__body{
  position: relative;
  overflow: hidden;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
}
.p-credit-accordion__body.is-show{
  
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
}
.p-credit-accordion__body._zankure{
  padding-top: 69.5%;
}
.p-credit-accordion__body.is-show._zankure{
  padding-bottom: 192.5%;
  padding-top: 92%;
}
.p-credit-accordion__fig{
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
}
.p-credit-accordion__btn{
  cursor: pointer;
  max-width: 700px;
  margin: 0 auto;
}
.p-credit-accordion__btn-open{
  /* margin-top: 14%; */
  z-index: 2;
  position: relative;
}
.p-credit > h3{
  width: 65%;
  margin: 0 auto;
  max-width: 469px;
}
@media screen and (max-width: 580px) {
  .p-credit-accordion__body._zankure{
    padding-top: 73%;
  }
  .p-credit-accordion__body.is-show._zankure{
    padding-bottom: 201.5%;
    padding-top: 97%;
  }
  .p-credit-accordion__btn-open{
    margin-top: 0%;
  }
}

.caution_space{
  padding-bottom:3em;
  background-color:#e7e7d9;
}

.p-mainvisual__text{
  background: linear-gradient(#e7e7d9 60%, #fef9e7);
  padding-bottom: 1em;
}
.p-mainvisual__text figcaption{
  padding: 0 1.5625em;
}
.p-mainvisual__text p{
  text-align: center;
  padding: 0 1.5625em;
  line-height: 1.8em;
  font-weight: 500;
}

.large{
  font-weight: bold;
  text-align: center;
  line-height: 1.5em;
  font-size: 1.4em;
  padding: 0.8em 0;
}