@charset "utf-8";
/*------------------------------------------------------------
	トップページ
------------------------------------------------------------*/
@font-face {
  font-family: 'futura-book';
  font-weight: 100;
  src: url('../css/Futura-Book.ttf') format("truetype");
  font-display: swap;
}

#gHeader {
    background-color: #fff;
    position: fixed;
    width: 100%;
    z-index: 100;
}

#pagePath {
    margin-bottom: 0;
    background: #000;
    padding-top: 81px;
}

@media screen and (min-width:768px) and (max-width:1100px) {
    #gHeader h1 {
        margin-left: 20px;
    }
}
@media screen and (max-width: 767px) {
    #pagePath {
        padding-top: 64px;
    }
}

.wrapBox {
    width: 80%;
    max-width: 1200px;
    position: relative;
    margin: 0 auto;
}

#main {
  margin-bottom: 20px;
  font-feature-settings: "palt";
}

#main .sec01 {
    padding-bottom: 5%;
    text-align: center;
    background: url("../img/index/sec01_bg.jpg") no-repeat top center/2000px 895px;
}
#main .sec01 .txt01 {
    padding-top: 160px;
}
#main .sec01 .txt02 {
  padding-top: 350px;
}
#main .sec01 .wrapBox .note {
  color: #808080;
  font-size: 1.3rem;
  padding: 17px 0 35px;
  text-align: center;
}
#main .sec01 .wrapBox .note .small {
  display: block;
  padding-top: 10px;
  font-size: 1.1rem;
}
#main .sec01 .wrapBox > img { position: absolute; right: 0; bottom: -20%; z-index: 5;}

@media all and (max-width: 767px) {
  #main{
    margin-bottom: 5%;
  }
  #main .sec01 {
    padding: 0;
  }
  #main .sec01 .wrapBox {
    width: 100%;
  }  
  #main .sec01 .txt01 {
    padding-top: 0;
  }
  #main .sec01 .txt02 {
    position: absolute;
    bottom: 15%;
    box-sizing: border-box;
    z-index: 1;
    width: 100%;
  }
  #main .sec01 .wrapBox > img {
    position: absolute;
    right: 50%;
    bottom: -8%;
    z-index: 5;
    transform: translate(calc(-50% + 16px) ,0);
  }
}


:root {
    --main: #525d61;
    --point: #67c3c5;
    --point2: #b2dcdd;
    --font: #b3e1e2;
    --ash: #8c9496;
    --bg: #f2f2f2;
}


/* BUTTONS */
.btns { display: flex; justify-content: center; margin-top: 8%;}
.btns a {
  display: inline-block;
  width: 80%;
  max-width: 300px;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  outline: none;
  color: #fff;
  background-color: var(--point);
  position: relative;
  transition: color .35s ease;
  font-size: calc(1em + 2px);
}
.btns a span { position: relative; z-index: 1; display: block;}
.btns a span::before {
  position: absolute;
  top: 50%;
  right: 0;
  content: "";
  display: block;
  width: 15px;
  height: 1px;
  background: #fff;
}
.btns a span::after {
  position: absolute;
  top: 50%;
  right: -15px;
  content: "";
  display: block;
  width: 15px;
  height: 1px;
  background: var(--point);
}
.btns a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.btns a::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--point2);
  transform: scaleX(0);
  transform-origin: right;
  transition: all .35s ease;
  transition-property: transform;
}

@media all and (max-width: 767px) {
  .btns { margin-top: 15%;}
  .btns a { width: 100%; font-size: 3.8vw;}
}

/* COMMON */
#main * { box-sizing: border-box;}
#main img { max-width: 100%;}
#main h3 { font-family: 'futura-book', sans-serif; font-weight: normal; color: var(--font); letter-spacing: 8px; font-size: 40px; line-height: 1;}
#main h5, #main p { letter-spacing: 1px; font-weight: normal;}
#main dl { display: flex; width: 100%;}
#main dt,
#main dd { position: relative; width: 50%;}
#main dl.rev { flex-direction: row-reverse;}

#main dt { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; padding: 2%;}
#main dt h4 img { position: absolute; display: block; margin: 0; z-index: 5;}

#main dd { padding: 6% 8%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
#main dl.rev dd { align-items: flex-end;}
#main dd h3 { position: relative; left: -6%;}
#main dd h2 { margin: 4em 0 2.2em;}
#main dd h2 img,
#main dd h3 img,
#main dd h4 img { display: block; margin: 0; width: 100%;}

#main p { color: var(--main); font-size: 16px; line-height: 1.8;}
#main p.caption { font-size: 13px; color: var(--ash); line-height: 1.6; margin-top: 2.6em;}
#main dd p.caption:nth-of-type(n+3) { margin-top: .8em;}
#main p .atrc { font-size: calc(1rem - 6px);}
#main dd > img { margin-bottom: 2em;}

@media all and (max-width: 767px) {
  #main h3 { letter-spacing: 6px; font-size: 8vw;}
  #main dl,
  #main dl.rev { flex-direction: column-reverse;}
  #main dt,
  #main dd { width: 100%;}
  #main dt { padding: 8% 5%; min-height: 100vw;}
  #main dd { padding: 25% 14% 12%;}
  #main dd h2 { margin: 2.3em 0 2em;}
  #main dl.rev dd { align-items: flex-start;}
  #main dl.rev dd div { width: 100%;}
  #main dt h4 img { max-width: 8vw;}
  #main dd h3 { position: relative; left: -3.7vw;}
  #main p { font-size: calc(1em + 1px);}

}


/* SENSATION */
#main .sensa { background: linear-gradient(to right, #59c3e1, #89c4a9); padding: 4% 5%;}
#main .sensa h3 { text-align: center;}
@media all and (max-width: 767px) {
  #main .sensa { padding: 12% 0 10%;}
  #main .sensa .wrapBox > img {
    position: absolute;
    right: 50%;
    bottom: -62%;
    z-index: 5;
    transform: translate(calc(-50% + 16px) ,0);
  }
}


/* CONTENTS02 */
#main .sec02 dt { background-image: url(../img/index/sec02_bg.jpg);}
#main .sec02 dt img { width: 70%;}
#main .sec02 dd h3 { max-width: calc(326px/2);}
#main .sec02 dd h2 { max-width: calc(452px/2);}
@media all and (max-width: 767px) {
  #main .sec02 dt img { width: 100%;}
}


/* CONTENTS03 */
#main .sec03 dt { background-image: url(../img/index/sec03_img01.jpg);}
#main .sec03 dt h4:nth-of-type(1) img { top: 0; left: 0;}
#main .sec03 dt h4:nth-of-type(2) img { right: 0; bottom: 0; mix-blend-mode: multiply;}
#main .sec03 dd h3 img { max-width: calc(410px/2);}
#main .sec03 dd h2 img { max-width: calc(688px/2);}
#main .sec03 dd div > img { max-width: 375px; padding: .8em 0 1.4em;}

@media all and (max-width: 767px) {
  #main .sec03 dd div > img { width: 100%; padding: 0 0 1.6em;}
}


/* CONTENTS04 */
#main .sec04 dt { background-image: url(../img/index/sec04_img01.jpg);}
#main .sec04 dt h4 img { top: 3px; right: 4px;}
#main .sec04 dd { padding-bottom: 2%;}
#main .sec04 dd h3 img { max-width: calc(578px/2);}
#main .sec04 dd h2 img { max-width: calc(566px/2);}
#main .sec04 dd p { margin-bottom: -5%;}
#main .sec04 dd div > img { position: relative; left: -52.5%;}

@media all and (max-width: 767px) {
  #main .sec04 dt h4 img { max-width: 20vw; top: 0; right: 0;}
  #main .sec04 dd p { margin-bottom: 0;}
  #main .sec04 dd div > img { left: inherit; margin: 14% 0 16%;}
}


/* CONTENTS05 */
#main .sec05 { padding: 8% 0;}
#main .sec05 h3 { text-align: center; margin-bottom: 4%;}
#main .sec05 h2 { text-align: center; margin-bottom: 8%;}
#main .sec05 h3 img { max-width: calc(866px/2);}
#main .sec05 h2 img { max-width: calc(1060px/2);}
#main .sec05 ul { display: flex; justify-content: space-between;}
#main .sec05 li { position: relative;}
#main .sec05 li:not(:last-of-type)::after {
  content: "";
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 100%;
  height: 100%;
  background: url(../img/index/arrow_slide.svg) 100% 40% no-repeat;
  z-index: 3;
}

@media all and (max-width: 767px) {
  #main .sec05 { padding: 25% 0 0;}
  #main .sec05 h3 { text-align: left; margin: 0; line-height: 1.2;}
  #main .sec05 h2 { text-align: center; margin: 10% 0 20%;}
  #main .sec05 h3 img { width: 65%;}
  #main .sec05 h2 img { width: 100%; margin: 0 auto;}
    
  #main .sec05 .splide__track { margin-right: calc(50% - 50vw);}
  #main .sec05 ul { justify-content: flex-start;}
  #main .sec05 li { padding: 0 10% 0 0;}
  #main .sec05 li:not(:last-of-type)::after {
    content: "";
    position: absolute;
    bottom: -12%;
    right: 3%;
    background-size: 8%;
  }
}


/* CONTENTS06 */
#main .sec06 dt { background-image: url(../img/index/sec06_img01.jpg);}
#main .sec06 dt h4 img { top: 0; right: 0;}
#main .sec06 dd h3 img { max-width: calc(444px/2);}
#main .sec06 dd h2 img { max-width: calc(524px/2);}
#main .sec06 dd div > img { max-width: 375px; margin-top: 3em;}

@media all and (max-width: 767px) {
  #main .sec06 dd div > img { width: 100%; margin-top: 3em;}
  #main .sec06 dt h4 img { max-width: 20vw;}
}


/* CONTENTS07 */
#main .sec07 { padding: 8% 0;}
#main .sec07 .wrapBox { background: url(../img/index/arrow_btm.svg) 0 0 no-repeat;}
#main .sec07 .wrapBox h3,
#main .sec08 .wrapBox h3,
#main .sec09 .wrapBox h3 { text-align: center;}
#main .sec07 .wrapBox h6,
#main .sec08 .wrapBox h6,
#main .sec09 .wrapBox h6 { text-align: center; color: var(--main); font-weight: normal; font-size: 16px; margin-top: .8em; letter-spacing: 3px;}
#main .sec07 .wrapBox h3 img { max-width: calc(366px/2);}
#main .sec07 .wrapBox ul { display: flex; align-items: flex-end; justify-content: center; margin-top: 4%;}
#main .sec07 .wrapBox li { width: 40%; margin: 0;}
#main .sec07 .wrapBox li p { text-align: center; margin-top: -3em;}
#main .sec07 .wrapBox li p.caption { margin-top: 1em;}
#main .sec07 .wrapBox li:nth-of-type(2) img { display: block; width: 55%; margin: 0 auto;}

@media all and (max-width: 767px) {
  #main .sec07 { padding: 20% 0;}
  #main .sec07 .wrapBox { background: none;}
  #main .sec07 .wrapBox h3,
  #main .sec08 .wrapBox h3,
  #main .sec09 .wrapBox h3 { text-align: left;}
  #main .sec07 .wrapBox h6,
  #main .sec08 .wrapBox h6,
  #main .sec09 .wrapBox h6 { text-align: left; font-size: calc(1em + 1px); margin-top: .8em; letter-spacing: 3px;}
  #main .sec07 .wrapBox ul { flex-direction: column; margin-top: 10%;}
  #main .sec07 .wrapBox li { width: 100%; margin: 0;}
  #main .sec07 .wrapBox li:nth-of-type(2) { margin-top: 16%;}
  #main .sec07 .wrapBox li p { margin-top: -1em;}
  #main .sec07 .wrapBox li:nth-of-type(2) p { margin-top: -2em;}
  #main .sec07 .wrapBox li p.caption { margin-top: 1em;}
  #main .sec07 .wrapBox li:nth-of-type(2) img { display: block; width: 55%; margin: 0 auto;}
}


/* CONTENTS08 */
#main .sec08 { padding: 4% 0 5%;}
#main .sec08 .wrapBox h3 img { max-width: calc(644px/2);}
#main .sec08 .splide__track { margin-top: 5%; margin-right: calc(50% - 50vw);}
#main .sec08 .splide li { position: relative; padding-right: 30px; background: url(../img/index/arrow_slide.svg) 100% 40% no-repeat;}
#main .sec08 .splide li:nth-child(6n) { background: none;}
#main .sec08 .splide li p { margin-top: 1.5em; padding: 0 1em;}

.splide__arrows {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 0;
}
.splide__arrows button {
  margin-top: 5%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--point);
  cursor: pointer;
  transition: all .2s ease-in-out;
}
.splide__arrows button:hover { background: var(--point2);}
.splide__arrow--next { margin-left: 1.5em;}
.splide__arrows button img { position: relative; top: -3px;}

@media all and (max-width: 767px) {
  #main .sec08 { padding: 8% 0 14%;}
  #main .sec08 .wrapBox h3,
  #main .sec08 .wrapBox h6 { text-align: center;}
  #main .sec08 .splide__track { margin-top: 10%; margin-right: calc(50% - 50vw);}
  #main .sec08 .splide li { padding-right: 10%;}
}


/* CONTENTS09 */
#main .sec09 { padding: 8% 0; background: var(--bg); }
#main .sec09 .wrapBox h3 img { max-width: calc(208px/2);}

.acd { width: 100%; max-width: 650px; margin: 3em auto 0; padding-bottom: 1.5em; background: #fff;}
.acd input { display: none;}
.acd label { width: 100%; padding: 3em 6em 1.5em 3em; cursor: pointer; position: relative; display: block; transition: all 0.25s;}
.acd label:hover { color: var(--point);}
.acd label::after,
.acd label::before {
content: "";
position: absolute;
top: 50%;
right: 3em;
transform-origin :50% 50%;
width: 30px;
height: 3px;
background-color: var(--point);
transition: all 0.25s;
}
.acd label::after { transform: rotate(-90deg); }
.acd > div { height: 0; overflow: hidden; opacity: 0; transition: 0.25s;}
.acd input:checked ~ div { height: auto; opacity: 1; padding: 0 3em 1.5em 3em;}
.acd input:checked ~ label::before { transform: rotate(0deg);}
.acd input:checked ~ label::after { transform: rotate(180deg);}
.acd input:checked ~ label { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0;}
.acd label h5, .acd > div { color: var(--main); display: flex; align-items: center; margin: 0;}
.acd label h5,
.acd > div p { font-size: 16px; display: flex; align-items: center;}
.acd label h5 img ,
.acd > div p img  { display: block; margin-right: 1em;}
.acd > div p { border-top: 1px solid var(--ash); padding-top: 1.5em; width: 100%;}
.acd > div p a { text-decoration: underline;}
.acd > div p a:hover { text-decoration: none;}

@media(max-width:767px) {
  #main .sec09 { padding: 15% 0;}
  #main .sec09 .wrapBox h3,
  #main .sec09 .wrapBox h6 { text-align: center;}

  .acd { padding-bottom: 0; margin-top: 5%;}
  .acd:first-of-type { margin-top: 14%;}
  .acd label { padding: 1.5em 3.6em 1.5em 1.5em;}
  .acd label::after,
  .acd label::before { right: 1.4em; width: 22px; }
  .acd input:checked ~ div { padding: 0 1.5em 1.8em 1.3em;}
  .acd label h5,
  .acd > div p { font-size: calc(1em + 1px);}
  .acd > div p { align-items: flex-start;}
  .acd label h5 img ,
  .acd > div p img  { width: 9vw; margin-right: .8em;}
}