/* =================== base =================== */


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

:root {
  --min-font: "YuMincho +36p Kana", "游明朝体+36ポかな","游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  --en-font: "Times New Roman",serif;
  --main-color: #18273C;
  --text-color: #171717;
  --body-color: #F5F5F5;
}

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

html { margin: 0; overflow-x: hidden; font-size: 62.5%; box-sizing: border-box; }
body { background: var(--body-color); font-size: 1.6rem; letter-spacing: normal; font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif; color: var(--text-color); }
*{ box-sizing: border-box; color: var(--text-color); }
a{ text-decoration: none; color: var(--text-color); cursor: pointer; transition: 0.3s; }
img { vertical-align: bottom; width: 100%; height: auto; }
pre { width: 70%; margin: 1em auto; padding: 1em; border-radius: 5px; background: #25292f; color: #fff; overflow-x: auto; /* ⭐ */ -webkit-overflow-scrolling: touch; /* ⭐ */ }
button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
h1,h2,h3,h4,h5,h6{ font-weight: 700; line-height: 1.5em; }
li{ list-style: none; }
.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.clear{ clear: both; }
.pc { display: block; }
.sp { display: none; }
.ipad { display: none; }
.blue{ color: var(--main-color); }
.min{ font-family: var(--min-font); }
.en{ font-family: var(--en-font); }
p{ line-height: 1.5em; }
.btn-box{ text-align: right; }
.btn{ letter-spacing: 0.05em; font-family: var(--a1-font); overflow: hidden; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; transition: all .3s; padding: 15px 65px; border-radius: 100px; background: var(--red-color); color: #fff; font-weight: 700; text-align: center; }



.container { max-width: 1080px; margin: 0 auto; padding: 0 25px; }

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 767px) {
  .container { padding: 0 15px; }

}




.wrapper{ position: relative; overflow: hidden; }
.wrapper:before{ content: ""; position: absolute; background: url(../images/object01.svg) no-repeat; background-position: top; background-size: 100%; width: 100%; top: 0; height: 32px;  z-index: 100; }


/* =================== header =================== */


header{ transition: 0.3s; position: absolute; top: 0; left: 0; width: 100%; padding-top: 50px; z-index: 150; }
header .flex{ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
header .left h1{ font-weight: 400; font-size: 1.5rem; color: #fff; }
header .right li a{ font-size: 1.5rem; color: #fff; }
header .right li:not(:last-child){ margin-right: 45px; }
header:before{ content: ""; position: absolute; left: -12px; top: 15px; height: 7px; width: 50%; background: url(../images/head-object.svg) no-repeat; background-size: contain; background-position: left center; }
header:after{ content: ""; position: absolute; right: -12px; top: 15px; height: 7px; width: 50%; background: url(../images/head-object.svg) no-repeat; background-size: contain; background-position: right center; }
header.fixed{ animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; position: fixed; top: 0; left: 0; width: 100%; padding-top: 20px; }
header.fixed .left h1{ color: var(--main-color); }
header.fixed .right li a{ color: var(--main-color); }
header.fixed:before,
header.fixed:after{ content: none; }
@keyframes slideIn {
  0% {
    transform: translateY(-180px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}

/* =================== footer =================== */


footer{ text-align: center; padding: 130px 0 0; }
footer .img-box { text-align: center; margin-bottom: 55px; }
footer .img-box img{ max-width: 110px; }
footer nav{ margin-bottom: 45px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
footer nav a{ font-size: 1.5rem; font-weight: 700; }
footer nav a:not(:last-child){ margin-right: 45px; }
footer small{ font: 1.5rem Avenir, "Helvetica Neue", Verdana, Helvetica, Arial, Roboto, YuGothic,"Meiryo UI", メイリオ, Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
footer .bg-img{ position: relative; z-index: -1; margin-top: -55px; }

/* =================== content =================== */

.fv{ position: relative; background: url(../images/fv-bg.jpg) no-repeat; background-size: cover; background-position: center bottom; padding: 160px 0 55px; }
.fv:after{ content: ""; position: absolute; left: 0; right: 0; top: 20%;  max-width: 500px; width: 100%; max-height: 555px; height: 100%; margin: auto; background: url(../images/fv-bg.svg) no-repeat; background-size: contain; background-position: center; }
.fv:before{ content: ""; position: absolute; left: 0; right: 0; top: -87.5px; margin: auto; background: #FEEB58; width: 175px; height: 175px; border-radius: 175px; }
.fv .object-box{ position: relative; }
.fv .object-box:after{ content: ""; position: absolute; left: -125px; top: 17%; max-width: 300px; width: 100%; max-height: 95px; height: 100%; margin: auto; background: url(../images/fv-object01.svg) no-repeat; background-size: contain; background-position: left center; }
.fv .object-box:before{ content: ""; position: absolute; right: -105px; top: 0%; max-width: 300px; width: 100%; max-height: 95px; height: 100%; margin: auto; background: url(../images/fv-object02.svg) no-repeat; background-size: contain; background-position: right center; }
.fv .object-box2{ position: relative; }
.fv .object-box2:after{ content: ""; z-index: 0; position: absolute; left: -35px; bottom: -200px; max-width: 110px; width: 100%; max-height: 500px; height: 100%; margin: auto; background: url(../images/fv-object03.svg) no-repeat; background-size: contain; background-position: center bottom; }
.fv .object-box2:before{ content: ""; z-index: 0; position: absolute; right: -35px; bottom: -200px; max-width: 110px; width: 100%; max-height: 500px; height: 100%; margin: auto; transform: scale(-1, 1); background: url(../images/fv-object04.svg) no-repeat; background-size: contain; background-position: center bottom; }
.fv .img-box{ margin-bottom: 60px; text-align: center; }
.fv .img-box img{ max-width: 195px; }
.fv .text-box{ margin-bottom: 70px; text-align: center; }
.fv .text-box h2{ margin-bottom: 40px; letter-spacing: 6px; font-weight: 400; color: #fff; font-size: 4rem; }
.fv .text-box p{ letter-spacing: 3px; line-height: 2em; color: #fff; font-size: 2rem; }
.fv .movie-box{ position: relative; z-index: 1; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.fv .movie-box li{ width: 31%; border: 4px solid #fff; position: relative; }
.fv .movie-box li:before{ content: ""; position: absolute; left: 0; right: -1px; top: 0; bottom: -1px; margin: auto; width: 100%; height: 100%; background: url(../images/triangle.svg) no-repeat; background-size: 15px 15px; background-position: right bottom; z-index: 1; }
.fv .movie-box li .movie{ position: relative; width: 100%; padding-top: 56.25%; }
.fv .movie-box li .movie iframe { z-index: 9999999; position: absolute; top: 0; right: 0; width: 100%; height: 100%; }

main #sec01{ padding-bottom: 165px; position: relative; }
main #sec01:before{ content: ""; z-index: -2; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: url(../images/sec01-bg02.jpg) no-repeat; background-size: contain; background-position: center bottom; }
main #sec01 ul{ background:  url(../images/sec01-bg.jpg) no-repeat; background-size: cover; padding: 20px 0; }
main #sec01 ul li{ margin: 0 12.5px; }
main #sec01 .content-box{ position: relative; padding: 130px 0 0; }
main #sec01 .content-box:after{ content: ""; z-index: -2; position: absolute; right: -125px; top: 150px; width: 350px; height: 125px; background: url(../images/sec02-object02.svg) no-repeat; background-size: contain; background-position: left center; }
main #sec01 .content-box:before{ content: ""; z-index: -2; position: absolute; left: -125px; top: 80px; width: 350px; height: 125px; background: url(../images/sec02-object03.svg) no-repeat; background-size: contain; background-position: right center; }
main #sec01 .box{ position: relative; max-width: 915px; margin: auto; }
main #sec01 .box .bg{ position: relative; z-index: -1; }
main #sec01 .box .content{ position: absolute; left: 0; top: 0; width: 100%; padding-top: 75px; }
main #sec01 .box .content .img-box{ margin-bottom: 40px; text-align: center; }
main #sec01 .box .content .img-box img{ max-width: 140px; }
main #sec01 .box .content .object-box{ max-width: 230px; position: absolute; right: -75px; bottom: -110px; }
main #sec01 .box .content p{ text-align: center; letter-spacing: 1px; line-height: 2em; font-size: 2rem; }
main #sec01 .box .content h2{ position: absolute; left: 60px; top: -20px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 4.4rem; display: inline-block; border: 1px solid var(--main-color); background: #fff; padding: 15px 2px 10px; font-weight: 400; letter-spacing: 12px; word-break: keep-all; }
main #sec01 .box .content h2:before{ content: ""; z-index: -1; position: absolute; left: 7px; top: 8px; height: 100%; width: 100%; border: 1px solid var(--main-color); background-image:  url(../images/sec01-titlebg.png); background-color: #fff; background-size: cover; }

main #sec02{ position: relative; padding: 100px 0 110px; }
main #sec02:after{ content: ""; z-index: -2; position: absolute; right: -125px; top: 6%; max-width: 525px; width: 100%; max-height: 185px; height: 100%; margin: auto; background: url(../images/sec02-object02.svg) no-repeat; background-size: contain; background-position: left center; }
main #sec02:before{ content: ""; z-index: -2; position: absolute; left: -265px; top: 61%; max-width: 525px; width: 100%; max-height: 185px; height: 100%; margin: auto; background: url(../images/sec02-object03.svg) no-repeat; background-size: contain; background-position: right center; }
main #sec02 .container{ max-width: 1000px; }
main #sec02 h2{ margin-bottom: 50px; font-size: 7.9rem; font-style: italic; display: inline-block; position: relative; }
main #sec02 h2:before{ content: ""; position: absolute; right: -115px; top: 0; max-width: 80px; width: 100%; max-height: 100px; height: 100%; margin: auto; background: url(../images/sec02-object.svg) no-repeat; background-size: contain; background-position: right top; }
main #sec02 .box h3{ font-size: 3.2rem; font-weight: 400; margin-bottom: 35px; }
main #sec02 .box p{ font-size: 1.6rem; line-height: 2.2em; }
main #sec02 .box1{ margin-bottom: 95px; }
main #sec02 .box1 .left{ width: 70%; }
main #sec02 .box1 .right p.sp{ display: none; }
main #sec02 .box1 .right p{ position: relative; line-height: 1.5em; left: 100px; top: -130px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 4.4rem; display: inline-block; border: 1px solid var(--main-color); background: #fff; padding: 16px 4px 5px 1px; font-weight: 400; letter-spacing: 12px; word-break: keep-all; }
main #sec02 .box1 .right p:before{ content: ""; z-index: -1; position: absolute; left: 7px; top: 8px; height: 100%; width: 100%; border: 1px solid var(--main-color); background-image:  url(../images/sec01-titlebg.png); background-color: #fff; background-size: cover; }
main #sec02 .box1 .right p:nth-child(1){ margin-bottom: -65px; margin-right: 3px; }
main #sec02 .box2{ position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
main #sec02 .box2:before{ content: ""; position: absolute; right: -18%; top: -150px; max-width: 335px; width: 100%; height: 350px; margin: auto; background: url(../images/sec02-object01.svg) no-repeat; background-size: contain; background-position: right top; }
main #sec02 .box2 .left{ width: 46%; padding-right: 90px; }
main #sec02 .box2 .right{ width: 64%; }

main #sec03{ margin-bottom: 70px; }
main #sec03 .container{ max-width: 1000px; }
main #sec03 .box{ position: relative; }
main #sec03 .box:before{ content: ""; position: absolute; z-index: -1; width: 100%; height: 100%; left: 0; right: 0; top: 0; background: #fff; }
main #sec03 .box:after{ content: ""; position: absolute; z-index: -1; width: calc( 100% - 16px ); height: calc( 100% - 16px ); left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: none; border: 1px solid var(--main-color); }
main #sec03 .box .left{ width: 35%; }
main #sec03 .box .left img{ height: 100%; object-fit: cover; width: 100%; }
main #sec03 .box .right{ padding: 65px 60px; position: relative; width: 65%; z-index: 2; }
main #sec03 .box .right h2{ font-size: 2.6rem; font-weight: 400; margin-bottom: 30px; }
main #sec03 .box .right p{ font-size: 1.9rem; line-height: 2em; }
main #sec03 .box .right .rl-text{ position: absolute; line-height: 1.5em; right: -20px; top: -23px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-size: 2.7rem; display: inline-block; border: 1px solid var(--main-color); background: #fff; padding: 23px 9px 10px 6px; font-weight: 400; letter-spacing: 8px; word-break: keep-all; }
main #sec03 .box .right .rl-text:before{ content: ""; z-index: -1; position: absolute; left: 7px; top: 8px; height: 100%; width: 100%; border: 1px solid var(--main-color); background-image:  url(../images/sec01-titlebg.png); background-color: #fff; background-size: cover; }

main #sec04{ position: relative; margin-bottom: 135px; }
main #sec04:after{ content: ""; z-index: -2; position: absolute; right: -160px; top: 27%; max-width: 525px; width: 100%; max-height: 185px; height: 100%; margin: auto; background: url(../images/sec02-object02.svg) no-repeat; background-size: contain; background-position: left center; }
main #sec04:before{ content: ""; z-index: -2; position: absolute; left: -265px; top: 12%; max-width: 525px; width: 100%; max-height: 185px; height: 100%; margin: auto; background: url(../images/sec02-object03.svg) no-repeat; background-size: contain; background-position: right center; }
main #sec04 .box{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
main #sec04 .box h2{ font-size: 3rem; font-weight: 400; margin-bottom: 35px; }
main #sec04 .box p{ font-size: 1.6rem; line-height: 2.2em; }
main #sec04 .box1{ margin-bottom: 90px; }
main #sec04 .box1 .left{ width: 60%; padding-right: 70px; }
main #sec04 .box1 .right{ width: 40%; }
main #sec04 .box2 .left{ width: 40%; }
main #sec04 .box2 .right{ position: relative; padding-left: 70px; width: 60%; }
main #sec04 .box2 .right:before{ content: ""; position: absolute; z-index: -1; right: 0; left: 0; bottom: -40%; width: 120%; height: 100%; margin: auto; background: url(../images/sec04-object01.svg) no-repeat; background-size: contain; background-position: center bottom; }

main #sec05{ position: relative; padding-bottom: 185px; }
main #sec05:before{ content: ""; z-index: -2; position: absolute; left: -200px; bottom: 5%; max-width: 525px; width: 100%; max-height: 185px; height: 100%; margin: auto; background: url(../images/sec02-object03.svg) no-repeat; background-size: contain; background-position: right center; }
main #sec05 .container{ max-width: 1000px; }
main #sec05 .text-box{ padding-bottom: 125px; position: relative; }
main #sec05 .text-box:after{ content: ""; z-index: -2; position: absolute; right: -160px; bottom: 0; max-width: 525px; width: 100%; max-height: 185px; height: 100%; margin: auto; background: url(../images/sec02-object02.svg) no-repeat; background-size: contain; background-position: left center; }
main #sec05 .text-box:before{ content: ""; z-index: -2; position: absolute; left: -248px; top: 5%; max-width: 525px; width: 100%; max-height: 185px; height: 100%; margin: auto; background: url(../images/sec02-object03.svg) no-repeat; background-size: contain; background-position: right center; }
main #sec05 .text-box .top{ margin-bottom: 50px; }
main #sec05 .text-box .top h2{ font-weight: 400; padding: 30px 0; position: relative; text-align: center; font-size: 2.7rem; }
main #sec05 .text-box .top h2:before{ content: ""; position: absolute; left: 0; right: 0; top: 0; margin: auto; width: 115px; height: 10px; margin: auto; background: url(../images/title-object.svg) no-repeat; background-size: contain; background-position: center; }
main #sec05 .text-box .top h2:after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 115px; height: 10px; margin: auto; background: url(../images/title-object.svg) no-repeat; background-size: contain; background-position: center; }
main #sec05 .text-box .bottom{ text-align: center; }
main #sec05 .text-box .bottom h3{ font-weight: 400; font-size: 3.8rem; }
main #sec05 .text-box .bottom .message{ display: block; max-width: 525px; margin: 40px auto 30px; }
main #sec05 .text-box .bottom .flex{ display: inline-flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
main #sec05 .text-box .bottom .flex:before{ content: ""; position: absolute; right: -90px; bottom: 0; width: 66px; height: 81px; background: url(../images/sec02-object.svg) no-repeat; background-size: contain; background-position: right top; }

main #sec05 .text-box .bottom .flex p{ font-size: 2.7rem; }
main #sec05 .text-box .bottom .flex img{ margin: 0 25px; max-width: 31px; }
main #sec05 .box{ padding: 60px 95px; background: url(../images/sec05-bg.jpg) no-repeat; background-size: cover; background-position: center; }
main #sec05 .box h2{ font-weight: 400; letter-spacing: 6px; color: #fff; border-bottom: 1px solid #fff; padding-bottom: 25px; margin-bottom: 20px; font-size: 2.3rem; }
main #sec05 .box .table-box table{ width: 100%; }
main #sec05 .box .table-box table th{ font-weight: 400; color: #fff; font-size: 1.4rem; text-align: left; line-height: 1.5em; padding: 30px 30px 30px 50px; }
main #sec05 .box .table-box table td{ font-weight: 400; color: #fff; font-size: 1.4rem; text-align: left; line-height: 1.5em; padding: 30px 50px 30px 30px; }
main #sec05 .box .table-box table tr:nth-child(even){ background: rgb(255 255 255 / 5%); }
main #sec05 .map{ max-width: 950px; }
main #sec05 .map iframe{ width: 100%; }

main #sec06{ position: relative; }
main #sec06:after{ content: ""; z-index: -2; position: absolute; right: -160px; bottom: -130px; max-width: 525px; width: 100%; max-height: 185px; height: 100%; margin: auto; background: url(../images/sec02-object02.svg) no-repeat; background-size: contain; background-position: left center; }
main #sec06 .container{ max-width: 1000px; }
main #sec06 .box .title-box{ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 40px; }
main #sec06 .box .title-box h2{ font-size: 3.3rem; font-weight: 400; }
main #sec06 .box .title-box a{ font-weight: 700; padding: 10px 55px; background: #fff; border: 1px solid #707070; font-size: 1.7rem; }
main #sec06 .box .content{ color: var(--main-color); font-family: var(--min-font); text-align: center; font-size: 2rem; }