@charset "UTF-8";
/* CSS Document */

html{font-size: 6.25%; scroll-behavior: smooth;}
body{ font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif; background-color: #ffe227}
.show-pc {display: inline}
.show-sp {display: none}
img.show-pc {display: block}
img.show-sp {display: none}
@media screen and (max-width: 960px) {
	.show-pc {display: none}
	.show-sp {display: inline}
	img.show-pc {display: none}
	img.show-sp {display: block}
}

#container{ width: 100%; height: 100%; box-sizing: border-box; }
div,section{ box-sizing: border-box; }
p{ font-size: 15rem;}
#container a{text-decoration: none; transition: 0.3s;}
#container a:hover{opacity: 0.5;}
small {font-size: 12px; color: #333;}
hr { display: block; border: none; background-color: #333; height: 1px; margin: 10px auto;}
sup {font-size: 50%; vertical-align: text-top}
.text-en {font-family:"Charis SIL", serif;}

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

/* header */
#header{ width: 300px; margin:0 2vw; position: fixed; z-index: 999; top:0; left: 0; background-color: #ffe227; border-style: solid; border-color: #111; border-width: 0 4px 0 4px}

div.head-right{ display: flex; justify-content: center; flex-wrap: wrap; width: 100%; position: absolute; top: 1vw; left: 0;}
div.head-right a{ display: block; padding: 6px 2px; margin: 0 1%; width: 46%; border: 2px solid #111; box-sizing: border-box; text-align: center; color: #fff; font-size: 14rem;; font-weight: bold; line-height: 1.2; border-radius: 30px; background-color:#ec68a5; }
div.head-right a:nth-child(1){background-color:#19afdd; }
div.head-right a:hover{ color: #fff; background-color:#111; opacity: 1!important; }
div.head-right a.nolink{background-color:#aaa; color: #ddd; pointer-events: none }

h1.head-left{ display: block; width: 100%; padding-top: 60px; overflow: hidden;}
h1.head-left a img { display: block; width: 50%; margin: 0 auto 0.2vw auto;}
h1.head-left a span.logoanime { display: block; width: 100%; position: relative; background: url( "../img/logo_03.png") center center / auto 100% no-repeat;}
h1.head-left a span.logoanime img {position: relative;}
h1.head-left a span.logoanime::after { content: ''; display: block; width: 50%; height: 100%; position: absolute; top: 0; left: 25%; transition: 0.2s; background: url( "../img/logo_03_2.png") center center / contain no-repeat; animation: yosomi 5s ease-in-out infinite;}

@keyframes yosomi {
  0% { transform: translateX(0); }
  50% { transform: translateX(0); }
  94% { transform: translateX(-6px); }
  96% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
h1.head-left a:hover span.logoanime::after {animation: none; top: 3px; left: 24%;}

@media screen and (max-width: 960px) {
	#header{ width: 100%; height: 46px; margin: 0; border-width: 0 0 2px 0;}
	div.head-right{ width: 40%; position: absolute; top: 0; left: auto; right: 42px;}
	div.head-right a{ padding: 14px 1.5vw 10px 1.5vw; margin: 0 0 0 1%; width: auto; border-width: 0 1px 1px 1px; font-size: 3.2vw; font-weight: bold; border-radius: 0;}
	h1.head-left{ display: flex; width: 50%; height: 42px; justify-content: flex-start; align-items: center; padding-top: 2px; padding-left: 1%;}
	h1.head-left a{ display: inline-block;}
	h1.head-left a img { display: inline-block; width: 44%; height: auto; max-height: 50%; margin: 0 auto;}
	h1.head-left a span.logoanime { display: none; }
}

#info_sp{display: none}
#info_pc{}
.info01{ background-color: #fff; margin-top: 5px; border-top: 4px solid #111; border-bottom: 4px solid #111; padding: 10px 0; height: 19vh; }
.info01 img{ display: block; height: 100%; max-height: 168px; max-width: 96%; margin: 0 auto;}
.info02{ background-color: #fff; border-bottom: 4px solid #111; padding-bottom: 5px;}
.info02 h2{ display: inline-block; background-color: #111; color: #ffe227; font-size: 12rem; padding: 0 5px 1px 5px; text-align: center; min-width: 60px; margin-bottom: 3px;}
.info02 p{ display: block; padding: 0.2vh 1vh; font-size: 14px; line-height: 1.4;}
p.infotxt_big { font-size: 26rem; font-weight: bold;}
p.infotxt_small { font-size: 12rem;}
p.infotxt_bold {font-size: 2.4vh; line-height: 3.5vh; letter-spacing: -1px; }
a.link_map {display: block; color: #111; }
a.link_map::after {content: ''; display: inline-block; width: 22px; height: 22px; background: url( "../img/icon_map.png") center center / contain no-repeat;}

@media screen and (max-width: 960px) {
	#info_sp{display: block}
	#info_pc{ display: none}
	.info01{ padding: 20px 0; height: auto; width: 100% }
	.info01 img{ height: auto; max-width: 80%;}
	.info02 p{ font-size: 16rem; line-height: 1.4; padding: 0.2vh 10px;}
	p.infotxt_big { font-size: 26rem;}
	p.infotxt_small { font-size: 12rem;}
}

/* header */
#navi {display: block; position: fixed; z-index: 9999}
#navibtn {display: block; padding: 26px 3px 3px 3px; line-height: 1; font-size: 10rem; font-weight: bold; color: #666; text-align: center; position: fixed; top: 0.5%; right: 2%; z-index: 9999}
#navibtn::before { content: ''; display: block; width: 80%; height: 4px; position: absolute; top: 12%; left: 10%; background-color: #fff; border: 1px solid #111; border-radius: 10px; transition: 0.3s}
#navibtn::after { content: ''; display: block; width: 80%; height: 4px; position: absolute; top: 38%; left: 10%; background-color: #fff; border: 1px solid #111; border-radius: 10px; transition: 0.3s}

nav {display: block; position: fixed; top: 0; right: 0; z-index: 9998; width: 0; height: 100vh; background-color: rgba(31,29,0,0.9); overflow: hidden; transition: 0.3s}
nav ul {display: block; width: 45vw; margin: 44px auto 0 1vw; }
nav ul li {display: block; }
nav ul li a {display: block; color: #fff; font-size: 15rem; border: 1px solid #ccc; box-sizing: border-box; padding: 10px; margin-bottom: 8px;  }
nav ul li a:hover {background-color: #fff; color: #111; opacity: 1!important}

/* menu open */
nav.menuopen {width: 50%}
#navibtn.navibtn-open {color: #fff;}
#navibtn.navibtn-open::before { width: 80%; height: 4px; top: 0%; left: 25%; border: 1px solid #fff; transform-origin: top left; transform: rotate(45deg)}
#navibtn.navibtn-open::after { width: 80%; height: 4px; top: 50%; left: 25%; border: 1px solid #fff; transform-origin: bottom left; transform: rotate(-45deg)}

@media screen and (max-width: 960px) {
	nav.menuopen {width: 100%}
	nav ul {width: 90vw; margin: 44px auto 0 auto; }
}

/* contents */
#contents{width: calc(97% - 360px); margin: 0 3% 0 auto;}
.box-inner {width: 96%; max-width: 1260px; margin: 0 auto;}

/* Main */
#contents_main{ }

/* Slider */
.slider { position: relative; width: 100%; height: 80vh; max-height: 600px; overflow: hidden;}
.slider > div { position: absolute; inset: 0; opacity: 0; animation: crossfade 8s linear infinite;/* 2枚分の合計時間 */}
.slider img{ display: block; width: auto; max-width: 100%; max-height: 100%;  margin: 0 auto; object-fit: cover;}

/* ▼ ここを「枚数」に応じて編集 ▼ */
.slider > div:nth-child(1) { animation-delay: 0s; }
.slider > div:nth-child(2) { animation-delay: -4.5s; }
/* .slider > div:nth-child(3) { animation-delay: -9s; } */

/* フェードのキーframes */
@keyframes crossfade {
  0% { opacity: 0; } 5% { opacity: 1; } 45% { opacity: 1; } 48% { opacity: 0; }  100% { opacity: 0; } 
}

@media screen and (max-width: 960px) {
	#contents{ width: 92%; margin: 0 auto; padding-top: 46px;}
	.slider { height: 72vw;}
}

/* Contents1 */
#contents1{ padding: 0 0 40px 0;}
#contents1 article{ }
#contents1 article h3{ text-align: center; margin-bottom: 40px; font-size: 30rem}
#contents1 article p{ text-align: center; margin-bottom: 40px; line-height: 2}
#contents1 article .photo { display: flex; flex-wrap: wrap; justify-content: space-around;}
#contents1 article .photo img{ width: 46%}
img.illust{ display: block; width: 20%; margin: 0 auto}

@media screen and (max-width: 960px) {
	#contents1{ padding: 40px 0;}
	#contents1 article h3{ margin-bottom: 10px; font-size: 20rem}
	#contents1 article p{ margin-bottom: 20px; text-align: left; font-size: 14rem;}
	img.illust{ width: 50%;}
}

/* Contents2 */

#contents2{ padding: 0 0 40px 0;}
#contents2 h3{ text-align: center; margin-bottom: 20px; font-size: 40rem; letter-spacing: 0.5vw;}
#contents2 h4{ text-align: center; margin-bottom: 10px; margin-top: 80px; font-size: 26rem; letter-spacing: 0.5vw;}
#contents2 article{ }
#contents2 article p{ text-align: center; margin-bottom: 40px; line-height: 2}
.soon{ text-align: center; font-size: 20rem; color: #b9aa2d; font-family:"Charis SIL", serif;}

@media screen and (max-width: 960px) {
	#contents2{ padding: 40px 0;}
	#contents2 article p{ margin-bottom: 20px; line-height: 1.5; font-size: 14rem}
}

/* Contents3 */
#contents3{ padding: 0 0 80px 0;}
#contents3 h3{ text-align: center; margin-bottom: 20px; font-size: 40rem; letter-spacing: 0.5vw;}
.steps { display: flex; flex-wrap: wrap; justify-content: space-around}
.steps li{ display: block; width: 30% }
.steps li h5{ display: block; border: 2px solid #111; padding: 5px 0; line-height: 1; font-size: 20rem; text-align: center; background-color: #fff; border-radius: 30px; font-family:"Charis SIL", serif; margin-bottom: 5px; letter-spacing: 0.2vw;}
.steps li p{ display: block; border: 2px solid #111; padding: 5px; box-sizing: border-box;}
.steps li p img{ display: block; width: 100%; height: auto}

@media screen and (max-width: 960px) {
	#contents3{ padding: 40px 0;}
	.steps { display: block;}
	.steps li{ width: 100%; margin-bottom: 20px}
	.steps li h5{ font-size: 16rem; text-align: center; background-color: #fff; border-radius: 30px; font-family:"Charis SIL", serif; margin-bottom: 5px; letter-spacing: 0.2vw;}
	.steps li p img{ max-width: 90%; margin: 0 auto}
}


/* Footer */
#footer{padding: 60px 0 0 0; border-top: 1px solid #111}
#footer .box-inner{display: flex; flex-wrap: wrap; justify-content: space-between;}
.foot-left {width: 15%}
.foot-left h6 {width: 100%}
.foot-left h6 img {width: 100%; margin-bottom: 10px}
.foot-right {width: 80%}
.foot-right p{ display: block; width: 100%; font-size: 13rem; margin-bottom: 20px}
.foot-right p strong{ font-size: 14rem; }

ul.sns { width: 90%; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:0 auto 30px auto;}
ul.sns li {width: 36px; margin: 0 1% 5px 1%;}
ul.sns li a {display: block; width: 36px; height: 36px; }
ul.sns li a img {width: 100%;}

p#copy {display: block; background-color: #111; padding: 5px 0; color: #fff; font-size: 11rem; text-align: center}

@media screen and (max-width: 960px) {
	#footer .box-inner{display: block;}
	.foot-left {width: 100%}
	.foot-left h6 img { display: block; width: 60%; margin: 0 auto 20px auto}
	.foot-right {width: 100%}
}


/* 初回Load画面 */
#welcome_overlay { position: fixed; inset: 0; display: none; background: #ffe227; align-items: center; justify-content: center; height: 100%; width: 100%; z-index: 999999; }
#welcome_overlay.is-open { display: flex;}
.welcome_dialog { width: 30vw;}
.welcome_dialog span.logoanime { display: block; width: 80%; margin: 0 auto; position: relative; background: url( "../img/anime_01.png") center center / auto 100% no-repeat;}
.welcome_dialog span.logoanime img {position: relative; width: 100%; height: auto; margin: 0 auto}
.welcome_dialog span.logoanime::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url( "../img/anime_02.png") center center / contain no-repeat; animation: yosomi2 3.5s ease-in-out forwards;}
@keyframes yosomi2 {
  0% { transform: translateX(0); }
  15% { transform: translateX(0); }
  43% { transform: translateX(-4%); }
  45% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
.welcome_anim { display: inline-block; animation: welcomeIntro 3.5s ease-in-out forwards; will-change: opacity, transform; background: url( "../img/anime_04.png") center center / 0 0 no-repeat;}
@keyframes welcomeIntro {
  0%   { opacity: 0; transform: scale(0.98); }
  10%  { opacity: 1; transform: scale(1); }
  88%  { opacity: 1; transform: scale(1); }
  90%  { background-size: auto 100% }
  100% { opacity: 0; transform: scale(1.02); }
}

/* 視覚的に非表示（スクリーンリーダーには残す） */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
@media screen and (max-width: 960px) {
	.welcome_dialog { width: 70vw;}
}


/* スクロール時のアニメーション　*/
.fadein {opacity: 0; transition: 1s 0.25s;}
.fade_action {opacity: 1;}