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

body#lp { min-width: inherit;}

#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: 92%;
    max-width: 1000px;
    position: relative;
    margin: 0 auto;
}

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

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


/* BUTTONS */
.btns { position: relative; display: flex; justify-content: center;}
.btns a {
  display: inline-block;
  width: 80%;
  max-width: 300px;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  outline: none;
  color: #fff;
  background: linear-gradient(to right, #00678F, #2FB0A5);
  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: #2FB0A5;
}
.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: #2FB0A5;
  transform: scaleX(0);
  transform-origin: right;
  transition: all .35s ease;
  transition-property: transform;
}

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

/* COMMON */
#main * { box-sizing: border-box;}
#main img { display: block; margin: 0 auto;}
#main p { font-size: calc(1em + 3px); line-height: 1.8;}
#main p.caption { font-size: calc(1em - 2px); line-height: 1.6; margin-top: 2.6em;}

.txtimgSd { filter: drop-shadow(0 0 4px rgba(0,0,0,.9)) drop-shadow(0 0 7px rgba(0,0,0,.95));}

@media all and (max-width: 767px) {
  #main p { font-size: calc(1em + 1px);}

}



/*------------------------------------------------------------
	CONTENTS
------------------------------------------------------------ */
/* sec01 */
.sec01 { background: #000; position: relative;}
.sec01 .mv { position: relative;}
.sec01 .mv picture img { width: 100vw;}
.sec01 .mv h3 img,
.sec01 .mv h2 img { position: absolute;}
.sec01 .mv h3 img { top: 5%; left: 63vw; width: 9vw;}
.sec01 .mv h2 img { bottom: -2.5vw; left: 0; right: 0; width: 44vw; margin: 0 auto;}
.sec01 .mv p { position: absolute; bottom: 34.5%; left: 63vw; font-size: 12px!important; text-indent: -.9em; padding-left: .9em; line-height: 1.5!important;}
.sec01 .wrapBox div { width: 65%; margin: 0 auto; padding: 4% 0 7%; background: url(img/sc01_bg2.jpg) 50% 0 no-repeat; background-size: 100%;}
.sec01 .wrapBox div h4 img { max-width: 416px;}
.sec01 .wrapBox div p { color: #fff; text-align: center; margin-top: 1.5em;}
.sec01 > picture img { position: absolute; bottom: -1.5%; z-index: 2; left: 50vw; transform: translate(-50%,0%);}

@media all and (max-width: 1100px) {
  .sec01 .mv p { font-size: 1vw!important; bottom: 34%;}
}

@media all and (max-width: 767px) {
  .sec01 .mv h3 img { top: 5%; left: inherit; right: 7%; width: 22vw;}
  .sec01 .mv h2 img { width: 100%; bottom: 6vw;}
  .sec01 .mv p { position: relative; bottom: inherit; left: inherit; font-size: 2.7vw!important; text-align: center; color: #fff; padding-bottom: 3em;}
  .sec01 .wrapBox { width: 100%;}
  .sec01 .wrapBox div { width: 100%; margin-top: -2.5%; padding: 8% 0 4%;}
  .sec01 .wrapBox div h4 img { width: 80%;}
  .sec01 .wrapBox div p { margin-top: 1.5em;}
  .sec01 > picture img { width: 100%; bottom: -23vw; z-index: 2; left: 0; transform: translate(0%,0%);}
}


/* sec02 */
.sec02 .wrapBox { position: relative;}
.sec02 h3 img,
.sec02 h2 img { position: absolute; z-index: 2;}
.sec02 h3 img { top: 12%; right:15%; width: 11vw;}
.sec02 h2 img { bottom: 15%; left: 17%; max-width: 667px;}

@media all and (max-width: 767px) {
  .sec02 .wrapBox { width: 100%;}
  .sec02 h3 img { top: 3%; right: 8%; width: 32vw;}
  .sec02 h2 img { bottom: 16%; left: 4%; width: 90%;}
}


/* sec03 */
.sec03 { background: #000; position: relative;}
.sec03 .wrapBox { position: relative;}
.sec03 h3 img,
.sec03 h2 img { position: absolute; z-index: 4;}
.sec03 h3 img { bottom: 4%; right:15%; max-width: 626px;}
.sec03 h2 img { top: -14%; left: 50%; transform: translateX(-50%);}
.sec03 > picture img { position: absolute; bottom: -3.5%; z-index: 2; left: 50vw; transform: translate(-50%,0%);}

@media all and (max-width: 767px) {
  .sec03 .wrapBox { width: 100%;}
  .sec03 h2 img { top: -16%; width: 86%;}
  .sec03 h3 img { bottom: -2%; width: 72vw; right: 12%;}
  .sec03 > picture img { width: 100%; bottom: -23vw; z-index: 2; left: 0; transform: translate(0%,0%);}
}


/* sec04 */
.sec04 ul { display: flex;}
.sec04 li { position: relative; width: 33.3333333%; min-height: 50vw;}
.sec04 li:nth-child(1) { background: url(img/sc04_01_bg.jpg) 50% 50% no-repeat; background-size: cover;}
.sec04 li:nth-child(2) { background: url(img/sc04_02_bg.jpg) 50% 50% no-repeat; background-size: cover;}
.sec04 li:nth-child(3) { background: url(img/sc04_03_bg.jpg) 50% 50% no-repeat; background-size: cover;}
.sec04 h2 img { position: relative; max-width: 100%;}
.sec04 div, .sec04 div p { position: absolute;}
.sec04 div { width: 100%; bottom: -12%; z-index: 4;}
.sec04 div p { line-height: 1.6; top: 51%; width: 64%; margin: 0 auto; left: 50%; transform: translate(-50%,0); font-size: 1vw!important;}
.sec04 div h3 img { width: 80%;}
.sec04 h2 { padding-top: 15%;}
@media all and (max-width: 767px) {
  .sec04 ul { flex-direction: column;}
  .sec04 li { width: 100%; min-height: 151vw;}
  .sec04 li:nth-child(1) { background: url(img/sc04_01_bg_sp.png) 100% 50% no-repeat; background-size: cover;}
  .sec04 li:nth-child(2) { background: url(img/sc04_02_bg_sp.png) 0% 50% no-repeat; background-size: cover; z-index: 2;}
  .sec04 li:nth-child(3) { background: url(img/sc04_03_bg_sp.png) 100% 50% no-repeat; background-size: cover;}
  .sec04 li:nth-child(2) { margin: -30% 0;}
  .sec04 li:nth-child(2),
  .sec04 li:nth-child(3) { min-height: 188vw;}

  .sec04 h2 img { margin: 0!important; width: 88%;}
  .sec04 div { width: 100%; bottom: -10%;}
  .sec04 div p { top: 42%; width: 60%; left: 35%; transform: translate(0,0); font-size: 3.6vw!important; line-height: 1.7!important;}
  .sec04 div h3 img { width: 95%; margin: 0 0 0 5%!important;}
  .sec04 li:nth-child(2) div h3 img { margin: 0 5% 0 0!important;}
  .sec04 li:nth-child(1) h2 { padding-top: 18%;}
  .sec04 li:nth-child(2) h2 { padding-top: 48%;}
  .sec04 li:nth-child(3) h2 { padding-top: 48%;}
  .sec04 li:nth-child(2) h2 img { margin: 0 0 0 4%!important;}
  .sec04 li:nth-child(2) div p { top: 50%; width: 76%; left: 6%;}
  .sec04 li:nth-child(3) div p { top: 52%; width: 78%; left: 18%;}
  .sec04 div p span { font-size: calc(1em - 3px); display: inline-block; padding-left: .5em;}
}


/* sec05 */
.sec05 { padding-top: 15%; background: url(img/sc05_bg.png) 50% 6% no-repeat; background-size: 100%;}
.sec05 .wrapBox { margin-bottom: -7%;}
.sec05 h2 img { max-width: 790px;}
.sec05 > h3 img { width: 100%; position: relative; z-index: 1;}

@media all and (max-width: 767px) {
  .sec05 { background: url(img/sc05_bg_sp.jpg) 50% 6% no-repeat; background-size: 100%;}
  .sec05 > img { width: 10%; padding: 12% 0 10%;}
  .sec05 h2 img { max-width: 100%;}
  .sec05 .wrapBox { margin-bottom: 0;}
}


/* sec06 */
.sec06 { padding-bottom: 6%; background: url(img/sc06_bg.jpg) 50% 0 no-repeat; background-size: cover;}
.sec06 .wrapBox { padding-top: 2%;}
.sec06 h2 { position: relative; z-index: 2;}
.sec06 h2 img { margin-top: -5%!important; position: relative; z-index: 1; max-width: 766px;}
.sec06 h4 img { max-width: 720px;}
.sec06 h4:not(:last-of-type) { margin-bottom: -2%;}
.sec06 h3 { margin-top: 1%;}
.sec06 h3 img { position: relative; z-index: 1; max-width: 603px;}

@media all and (max-width: 767px) {
  .sec06 { padding-bottom: 6%; background: url(img/sc06_bg_sp.jpg) 50% 100% no-repeat; background-size: cover;}
  .sec06 .wrapBox { padding-top: 4%; width: 100%; }
  .sec06 h4:not(:last-of-type) { margin-bottom: -32%;}
  .sec06 h2 img { margin-top: -13%!important;}
  .sec06 h3 { margin-top: -20%;}
  .sec06 h2 img,
  .sec06 h4 img { max-width: 100%;}  
  .sec06 h3 img { width: 80%;}
}


/* sec07 */
.sec07 { position: relative;}
.sec07 > picture img { position: absolute; top: 8%; left: 50%; transform: translate(-50%,0%); z-index: 1; max-width: 115px;}
.sec07 .wrapBox { position: relative;}
.sec07 h2 img { position: absolute; z-index: 2; bottom: 5%; left: 10%; max-width: 818px;}

@media all and (max-width: 767px) {
  .sec07 > picture img { top: inherit; left: inherit; transform: translate(0%,0%); width: 100%; max-width: 100%;}
  .sec07 .wrapBox { width: 100%;}
  .sec07 h3 img { position: absolute; top: 20%; width: 100%;}
  .sec07 h2 img { bottom: 5%; left: 0; width: 100%;}
}


/* sec08 */
.sec08 { padding: 7% 5% 5%;}
.sec08 h2 img { max-width: 396px; margin-bottom: 5%!important;}
.sec08 h3 img { max-width: 313px; margin: 0 0 5%!important;}
.sec08 dl { display: flex; align-items: center; justify-content: center;}
.sec08 dt { width: 40%;}
.sec08 dd { width: 32%; margin-left: 5%;}
@media all and (max-width: 767px) {
  .sec08 { padding: 12% 6%;}
  .sec08 h2 img { width: 100%; margin-bottom: 10%!important;}
  .sec08 h3 img { width: 100%; margin: 0 0 8%!important;}
  .sec08 dl { flex-direction: column;}
  .sec08 dt,
  .sec08 dd { width: 100%;}
}


/* sec09 */
.sec01.btms { padding-bottom: 6%;}
.sec01.btms .mv h2 img { bottom: 0;}
.sec01.btms .mv p { bottom: 38%;}

@media all and (max-width: 1100px) {
  .sec01.btms .mv p { bottom: 40%;}
}

@media all and (max-width: 767px) {
  .sec01.btms { padding-bottom: 8%;}
  .sec01.btms .mv h2 img { bottom: 22vw;}
  .sec01.btms .mv p { padding-bottom: 0;}
}



/*------------------------------------------------------------
    others
------------------------------------------------------------ */
@media(min-width:768px) {
    .onlySp { display:none !important; }
}
@media(max-width:767px) {
    .onlyPc { display:none !important; }
}