@charset "UTF-8";
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-text-size-adjust:100%;}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

.cf:before,.cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{*zoom:1;}

html {font-size: 62.5%;}
body{position:relative; font-size:15px; font-size:1.5rem; font-family:'Noto Sans JP',system-ui, "Hiragino Sans", "YuGothic","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Gothic",sans-serif; letter-spacing:0.05em; line-height:1.6; text-align:center; background:#fff; -webkit-text-size-adjust:100%; color:#040000; max-height: 100%; box-sizing:content-box; margin:0;}

html,body{height:100%;}
body #wrapper{display:flex; flex-direction:column; min-height:100vh;}
main{margin-top:70px; flex:1;}

img {width:100%; max-width:100%; height:auto;}
img[src$=".svg"] {width: 100%;}

.box{max-width:1100px; margin:0 auto;}

a{display:block; color:#040000; text-decoration:none; opacity: 1; transition: 0.5s; -webkit-transition:0.5s; text-decoration:none;}
a:hover{transition: 0.5s; -webkit-transition:0.5s; opacity:.8;}
a.line{text-decoration:underline;}

br.pc{display:none;}
br.smp{display:block;}
@media only screen and (min-width:540px) {
br.smp{display:none;}
}
@media only screen and (min-width:740px) {
br.pc{display:block;}
}


h3{margin:16px 0 8px; font-style: normal; font-size: clamp(2.7rem, 3vw, 3.4rem); font-weight:700; color:#2e59a6;}
h3 span{display:block; margin:0 0 0 4px; font-family: "Ubuntu", sans-serif; font-weight:400; font-size:1.8rem; color:#333;}
.h3jp{font-size: clamp(1.3rem, 1vw + 1rem, 1.4rem); font-weight:500; margin-top:4px;}
@media only screen and (min-width:740px) {
h3{font-size:3.6rem;}
h3 span{display:block; font-family: "Ubuntu", sans-serif; font-weight:500; font-size:1.8rem; color:#333;}
}


.btn a{position:relative; display:block; width:50vw; max-width:200px; margin:20px auto;  padding-left:20px; height:40px; line-height:37px; font-weight:600; font-size:14px; font-size:1.4rem; border-radius:50px; text-decoration: none; color:#fff; text-align:left; background:url(../lib/btn01.webp) center center no-repeat; background-size:cover;}
.btn a:after{position:absolute; top:25%; right:10px; content:""; width:20px; height:20px; background:url(../lib/icon-arrow.svg) center center no-repeat; background-size:cover;}

.btn2 a{position:relative; display:block; width:60vw; max-width:280px; margin:20px auto;  padding-left:20px; height:40px; line-height:37px; font-weight:600; font-size:14px; font-size:1.4rem; border-radius:50px; text-decoration: none; color:#fff; text-align:left; background:url(../lib/btn02.webp) center center no-repeat; background-size:cover;}
.btn2 a:after{position:absolute; top:25%; right:10px; content:""; width:20px; height:20px; background:url(../lib/icon-arrow.svg) center center no-repeat; background-size:cover;}

.btn3 a{position:relative; display:block; width:30vw; max-width:200px; height:30px; line-height:27px; margin:30px auto 0; padding-left:10px; font-weight:400; border:1px solid #000; font-size:13px; font-size:1.3rem; border-radius:50px; text-decoration: none; color:#000; text-align:left;}
.btn3 a:after{position:absolute; top:20%; right:10px; content:""; width:15px; height:15px; background:url(../lib/icon-arrow2.webp) center center no-repeat; background-size:cover;}
.btn3 a:hover{background:rgba(239, 239, 239, 0.6);}

.btn4 a{position:relative; display:block; width:30vw; max-width:200px; height:30px; line-height:27px; margin:30px auto 0; padding-left:20px; font-weight:400; border:1px solid #000; font-size:13px; font-size:1.3rem; border-radius:50px; text-decoration: none; color:#000; text-align:left;}
.btn4 a:after{position:absolute; top:20%; right:10px; content:""; width:15px; height:15px; background:url(../lib/icon-arrow2.webp) center center no-repeat; background-size:cover; transform: translateY(0%) rotate(90deg);}
.btn4 a:hover{background:rgba(239, 239, 239, 0.6);}
.btn4 a.disabled {
  background: #ccc;
  pointer-events: none;
  cursor: default;
}


.moviebox{text-align:center; max-width:660px;}
.moviebox .movie{width: 100%; aspect-ratio: 16 / 9;}
.moviebox .movie iframe{width: 100%; height: 100%;}


.breadcrumbs{margin-bottom:8px; font-size:1.0rem; color:#666; padding:8px 20px; lettletter-spacing:0; line-height:1;}
.breadcrumbs a{color:#666;}
.breadcrumbs ul{display:flex; gap:8px; flex-wrap:wrap;}
.breadcrumbs ul li{display:flex; gap:0 8px;}
.breadcrumbs ul li:after{content:"›";}
.breadcrumbs ul li:last-child:after{content:"";}
@media only screen and (min-width:740px) {
.breadcrumbs{font-size:1.2rem;}
}

header #headerbox{position:fixed; top:0; left:0; right:0; width:100%; background:#2e59a6; height:70px; text-align:center; z-index:99; transition: height 0.4s ease; }
header #headerbox #hdlogo{width:100%; max-width:150px; height:70px; margin:0 auto; display:flex; justify-content:center; align-items:center; transition: height 0.4s ease;}
header #headerbox #hdlogo h1{display:inline-block; width:100%; max-width:150px; margin:0 auto; position:relative; z-index:999; transition: width 0.4s ease;}
header #headerbox.is-show {height:50px; animation: height 0.2s ease forwards;}
header #headerbox.is-show #hdlogo{height:50px; animation: height 0.2s ease forwards;}
header #headerbox.is-show #hdlogo h1{max-width:120px; width:95%; animation: width 0.2s ease forwards;}
header #headerbox .sns ul{display:flex; gap:8px; flex:1; justify-content:center;}
header #headerbox .sns li{width:30px;}
header{position:relative;}
header #navibox{position:fixed; z-index: 990;  top:0; right: -120%; width:100%; height: 100vh; background:rgba(46, 89, 166, 0.9); transition: all 0.6s;}
header #navibox.panelactive{right: 0;}
header #navibox.panelactive #navibox ul{position: fixed; z-index: 999;  width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch;}
header #navibox {display:flex; width:100%; height:100%; justify-content:center; align-items:center;}
header #navibox nav{width:100%;}
header #navibox nav .navlogo{width:90px; margin:10px 0 0 40px;}
header #navibox ul.nav{width:90%; margin:0 auto; z-index: 999; text-align:center; font-weight:400; font-size:1.7rem;}
header #navibox ul.nav li{margin-bottom:8px;}
header #navibox ul.nav li a{display:block; color:#fff; text-decoration:none; padding-bottom:8px; border-bottom:1px solid  #898989; margin-top:8px;}
header #headerbox .sns{margin-top:30px; display:flex; gap:16px; justify-content:center; align-items:center;}
header #headerbox .sns li{width:46px;}
header #headerbox .sns li a{display:block; width:46px;}
header #navibox .banner{max-width:70%; margin:30px auto 0;}
header #menubox{position:absolute; z-index: 997; top:14px; right:10px; cursor: pointer; width: 40px; height:38px; background:transparent; transition: top 0.4s ease;} 
header #headerbox.is-show{background:rgba(46, 89, 166, 0.9);}
header #headerbox.is-show #menubox{top:5px; transition: top 0.4s ease;}
header #menubox span{ display: inline-block; transition: all .4s; position: absolute; left:11px; height: 2px; border-radius: 2px; background-color: #fff; width: 65%;}
header #menubox span:nth-of-type(1){top:13px;}
header #menubox span:nth-of-type(2){top:18px;}
header #menubox span:nth-of-type(3){top:23px;}
header #menubox.active span:nth-of-type(1){top: 12px; left: 12px; transform: translateY(6px) rotate(-45deg); width: 65%;}
header #menubox.active span:nth-of-type(2){opacity: 0;}
header #menubox.active span:nth-of-type(3){ top: 24px; left: 12px; transform: translateY(-6px) rotate(45deg); width: 65%;}

@media only screen and (min-width:740px) {
header #headerbox .box{display:flex; justify-content:space-between;}
header #headerbox #hdlogo{margin:0 0 0 20px;}
header #headerbox #hdlogo h1{width:180px;}
header #navibox{position:relative; right:0; background:none; justify-content:end; padding-right:20px; width:auto;}
header #navibox nav{display:flex; gap:20px; height:70px; align-items:center; }
header #navibox nav ul{display:flex; gap:20px; align-items:center;}
header #navibox ul.nav{width:100%; font-size: clamp(1.5rem, calc(1.5rem + (1.7 - 1.5) * ((100vw - 740px) / (1200 - 740))), 1.7rem);}
header #navibox ul.nav li{margin:0;}
header #navibox ul.nav li a{border:none;}
header #navibox ul.nav li a:hover{}
header #menubox{display:none;}
header #navibox .banner{display:none;}
header #headerbox .sns{margin:0;}
header #headerbox .sns li{width:30px;}
header #headerbox .sns li a{display:block; width:30px;}

header #headerbox.is-show{}
header #headerbox.is-show #navibox nav{display:flex; gap:20px; height:50px; align-items:center; }
}

@media only screen and (min-width:1200px) {
header #headerbox #hdlogo{margin:0;}
header #navibox{padding-right:0;}
}

footer {margin:20px 0 0;}
footer .box{max-width:100%; padding:30px 0; background:#2e59a6; font-size:1.4rem; font-weight:400; text-align:center; color:#fff; font-family:'Noto Sans JP',sans-serif;}
footer .sns{display:flex; gap:16px; margin:20px auto 40px;  justify-content:center; align-items:center;}
footer .sns li{width:46px;}
footer .sns li a{display:block; width:46px;}
footer #ftlogo{max-width:160px; width:55%; margin:10px auto;}
footer .nav{margin-top:30px;}
footer .nav li{margin-bottom:15px;}
footer .nav li a{font-size:1.4rem; color:#fff;}
footer .copy{margin-top:30px; font-family: "Ubuntu", sans-serif; font-weight: 400; font-style: normal; font-size:12px; font-size:1.2rem; color:#fff;}
@media only screen and (min-width:740px) {
footer .nav{display:flex; gap:20px; justify-content:center;}
}


/*fadein*/
.fadeUpTrigger,.fadeTrigger,.fadeLeftTrigger,.fadeRightTrigger{opacity: 0;}
.fade{animation-name:fadeAnime; animation-duration:.8s; animation-fill-mode:forwards; opacity:0;}
.fadeUp{animation-name:fadeUpAnime; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeUpAnime{
from {opacity: 0; transform: translateY(15px);}
to {opacity: 1; transform: translateY(0);} 
}
@keyframes fadeAnime{
from {opacity: 0; transform: translateY(0);}
to {opacity: 1; transform: translateY(0);} 
}

.fadeDown{animation-name:fadeDownAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeDownAnime{
from {opacity: 0; transform: translateY(-100px);}
to {opacity: 1; transform: translateY(0);}
}

.fadeLeft{animation-name:fadeLeftAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeLeftAnime{
from {opacity: 0; transform: translateX(-100px);}
to {opacity: 1; transform: translateX(0);}
}

.fadeRight{animation-name:fadeRightAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeRightAnime{
from {opacity: 0; transform: translateX(100px);}
to {opacity: 1; transform: translateX(0);}
}

/*TOP PAGE*/
#pagetop {
	position:fixed;
	right:20px;
	width:40px;
	font-size:1.3rem;
	font-weight:700;
	z-index:999;
}
#pagetop a {
	text-decoration: none;
	text-align: center;
	display: block;
}
#pagetop a:hover {
	text-decoration: none;
}