@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap');


/* =================== */
/*       pubulic       */
/* =================== */
html {
	font-size:clamp(10px, 1.04vw, 25px);
	overflow-x:hidden;
	scroll-padding-top:250px;
	scroll-behavior:smooth;
}
body {
	position:relative;
	-webkit-text-size-adjust:100%;
	font-family:"Zen Kaku Gothic Antique", sans-serif;
  font-weight:400;
  font-style:normal;
	overflow:hidden;
	background:url(../img/bg01.jpg) repeat-y;
	background-size:100% auto;
}


main { position:relative; }



img {
  width:100%;
  height:auto;
  max-width:100%;
}

a { transition:0.5s ease all; }


.sp-on { display:none; }

.flex-box {
	display:-webkit-box;
	display:flex;
	-webkit-box-pack:justify;
	justify-content:space-between;
	align-items:center;
}

.fadein {
	opacity:0;
	transform:translate(0, 15%);
	transition:.5s;
}
.fadein.is-show {
	transform:translate(0, 0);
	opacity:1;
}
.fadein-r {
	opacity:0;
	transform:translate(50%, 0);
	transition:1s;
}
.fadein-r.is-show {
	transform:translate(0, 0);
	opacity:1;
}

.fadein-lt {
	opacity:0;
	transform:translate(-5%, -5%);
	transition:1s;
}
.fadein-lt.is-show {
	transform:translate(0, 0);
	opacity:1;
}
.fadein-rt {
	opacity:0;
	transform:translate(5%, -5%);
	transition:1s;
}
.fadein-rt.is-show {
	transform:translate(0, 0);
	opacity:1;
}
.fadein-lb {
	opacity:0;
	transform:translate(-5%, 5%);
	transition:1s;
}
.fadein-lb.is-show {
	transform:translate(0, 0);
	opacity:1;
}
.fadein-rb {
	opacity:0;
	transform:translate(5%, 5%);
	transition:1s;
}
.fadein-rb.is-show {
	transform:translate(0, 0);
	opacity:1;
}


.center-fade {
	transform:scale(1.2);
	opacity:0;
	transition:.8s;
}
.center-fade.is-show {
	opacity:1;
	transform:scale(1);
}
.transscaleX { opacity:0; }
.transscaleX.is-show {
    animation:transscaleX .5s ease 0s forwards;
}
@keyframes transscaleX {
  0% {
    transform:scaleX(0);
    opacity:0;
  }
  100% {
    transform:scaleX(1);
    opacity:1;
  }
}

.blur {
	filter:blur(10px);
	transition:1.5s;
}
.blur.is-show {
	filter:blur(0);
	opacity:1;
}

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  transition: 1.5s ease-in-out;
}
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


.in-w85 {
	width:85rem;
	margin:0 auto;
	position:relative;
}
.in-w80 {
	width:80rem;
	margin:0 auto;
	position:relative;
}
.in-w75 {
	width:75rem;
	margin:0 auto;
	position:relative;
}
.in-w60 {
	width:60rem;
	margin:0 auto;
	position:relative;
}
.max-w-box {
	max-width:2500px;
	margin:0 auto;
	position:relative;
}


h2,h3,h4 { font-weight:300; }









.kv-box {
	width:70.5rem;
	height:51.5rem;
	overflow:hidden;
  border-radius:5rem;
  order:1;
}
.kv-box .kv-in {
	width:100%;
	height:100%;
}
.kv-box video {
	width:100%;
	height:100%;
	object-fit:cover;
}
.kv-box img {
	width:100%;
	height:100%;
	object-fit:cover;
}






/* =================== */
/*       main-nav      */
/* =================== */
#header a:hover { opacity:.5; }
#header {
	padding:2rem 2rem 0;
	align-items:flex-start;
}
#header .head-in {
	width:calc(100% - 2rem - 70.5rem);
	border-radius:5rem;
	background:#fff4be;
	order:2;
	padding:2.5rem 2rem 3rem;
	box-sizing:border-box;
	transition:0.5s ease all;
	right:-5rem;
}
#header .site-logo {
	width:9.15rem;
	margin:0 auto 2.5rem;
}
#header .sp-site-logo { display:none; }
#header #main-nav {
	display:flex;
	justify-content:center;
}
#header #main-nav .nav li {
	font-size:max(15px, 1rem);
	color:#5a5f48;
	font-weight:bold;
	margin-bottom:1.5rem;
	display:flex;
  align-items:baseline;
  line-height:1.1;
}
#header #main-nav .nav li::before {
	content:"●";
	font-size:75%;
	margin-right:.5em;
}
#header #main-nav .nav li.menu1::before { color:#ff6363; }
#header #main-nav .nav li.menu2::before { color:#ffef40; }
#header #main-nav .nav li.menu3::before { color:#96c17a; }
#header #main-nav .nav li.menu4::before { color:#7ac1a7; }
#header #main-nav .nav li.menu5::before { color:#525bb0; }
#header #main-nav .nav li.menu6::before { color:#9f52b0; }
#header #main-nav .nav li.menu7::before { color:#f471d1; }
#header #main-nav .nav li.menu8::before { color:#eb5a5a; }
#header .nav-wrap .yoyaku-btn a {
	width:100%;
	border-radius:100vmax;
	background:#ff720b;
	text-align:center;
	color:#fff;
	font-size:max(15px, 1.1rem);
	line-height:3.5rem;
	display:block;
	font-weight:bold;
}
#header .nav-wrap .yoyaku span::before { content:"●"; font-size:75%; margin-right:.5em; }
#header .nav-wrap .yoyaku span::after { content:"●"; font-size:75%; margin-left:.5em; }
#header .nav-wrap .yoyaku-btn .txt {
	width:8.75rem;
	margin-left:8.5rem;
	margin-bottom:-1rem;
}
#header.fixed .site-logo { top:.7rem; }
#header #hamburger {
	display:block;
	width:7rem;
	height:7rem;
	cursor:pointer;
	z-index:10000;
	position:fixed;
	right:2.5rem;
	top:2.5rem;
	background:#fff4be;
	border-radius:100vmax;
}
#header #hamburger .inner_line {
	display:block;
	margin:0 auto;
	width:4rem;
	height:.25rem;
	transition:1s;
	background:#000;
	position:absolute;
	left:1.5rem;
	border-radius:1.25rem;
}
#header #hamburger .inner_line span { transition:all .4s; }
#header #hamburger #line1 { top:2.25rem; background:#ff720b; }
#header #hamburger #line2 { top:3.25rem; }
#header #hamburger #line3 { top:4.25rem; background:#6e8bb4; }
#header #hamburger.open #line1 { transform:translateY(1.3rem) rotate(-30deg); }
#header #hamburger.open #line3 { transform:translateY(-.7rem) rotate(30deg); }
#header #hamburger.open #line2 { display:none; }
#header #hamburger { display:none; }
#header.fixed #hamburger { display:block; }
#header.open #hamburger { display:block; }
#header.open .head-in {
	position:fixed;
	top:2.5rem;
	right:5.5rem;
	z-index:1000;
	width:calc(100% - 2rem - 70.5rem - 4rem);
	min-width:250px;
}
#header .inst {
	width:2rem;
	margin:0 auto;
}






/* =================== */
/*         footer      */
/* =================== */
#footer {
	padding:8rem 0 2.5rem;
	position:relative;
	background:url(../img/footer_bk.jpg) no-repeat right bottom;
	background-size:cover;
}
#footer .in-w85 { min-width:850px; }
#footer .r-box { margin-right:8.5rem; }
#footer .logo-box {
	justify-content:flex-start;
	margin-bottom:2.5rem;
}
#footer .logo-box a:hover { opacity:.5; }
#footer .foot-logo { width:5.8rem; }
#footer .foot-logo2 {
	width:7.85rem;
	margin:0 1.5rem;
}
#footer .foot-logo3 { width:8.75rem; }
#footer .foot-nav {
	justify-content:flex-end;
	align-items:flex-start;
	flex-direction:row-reverse;
	color:#5a5f48;
	font-size:max(15px, 1rem);
	font-weight:bold;
}
#footer .foot-nav li {
	writing-mode:vertical-rl;
	margin:0 1rem;
}
#footer .foot-nav li::before {
	content:"●";
	font-size:75%;
	margin-bottom:.5em;
}
#footer .foot-nav li.menu1::before { color:#ff6363; }
#footer .foot-nav li.menu2::before { color:#ffef40; }
#footer .foot-nav li.menu3::before { color:#96c17a; }
#footer .foot-nav li.menu4::before { color:#7ac1a7; }
#footer .foot-nav li.menu5::before { color:#525bb0; }
#footer .foot-nav li.menu6::before { color:#9f52b0; }
#footer .foot-nav li.menu7::before { color:#f471d1; }
#footer .foot-nav li.menu8::before { color:#eb5a5a; }
#footer .foot-nav li a:hover { opacity:.5; }
#footer address {
	line-height:1.5;
	font-size:max(15px, 1rem);
	color:#5a5f48;
}
#footer address .name { font-weight:bold; }
#footer .copy {
	font-size:max(13px, .7rem);
	align-items:center;
	justify-content:flex-start;
	margin-top:2.5rem;
	color:#5a5f48;
}
#footer .copy .btn { margin-left:1rem; width:2.2rem; min-width:30px; }
#footer #pagetop {
  width:3rem;
  position:fixed;
  top:auto;
  bottom:1rem;
  right:1rem;
  z-index:300;
  line-height:0;
}
#footer #pagetop a:hover { opacity:.5; }






/* =================== */
/*      body.index     */
/* =================== */
aside.btn-box { align-items:flex-end; margin-top:8rem; }
aside.btn-box .btn { width:50%; }
aside.btn-box .btn a:hover { opacity:.5; }
aside.btn-box .btn2 { position:relative; }
aside.btn-box .btn2 a {
	width:100%;
	background:#ff720b;
	text-align:center;
	color:#fff;
	font-size:max(17px, 1.4rem);
	line-height:6.5rem;
	display:block;
	font-weight:bold;
	position:relative;
}
aside.btn-box .btn2 span::before { content:"●"; font-size:53%; margin-right:1em; }
aside.btn-box .btn2 span::after { content:"●"; font-size:53%; margin-left:1em; }
aside.btn-box .btn2 .txt {
	width:8.75rem;
	position:absolute;
	right:11.5rem;
	top:-3rem;
	z-index:1;
}
aside.btn-box .btn2 span { line-height:1; }
aside.btn-box .btn1 a {
	border:1px solid #ff720b;
	background:#fff;
	width:100%;
	line-height:calc(6.5rem - 2px);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:bold;
	font-size:max(17px, 1.25rem);
	color:#5a5f48;
	letter-spacing:.15em;
}
aside.btn-box .btn1 a img { width:3.5rem; margin-right:2rem; }

body.index #top-box {
	padding-top:5.5rem;
	position:relative;
}
body.index #top-box .txt-box {
	justify-content:center;
	align-items:flex-start;
	flex-direction:row-reverse;
	position:relative;
	z-index:1;
	margin-bottom:3rem;
}
body.index #top-box .txt-box h2 { width:16.85rem; }
body.index #top-box .txt-box .txt {
	font-size:max(15px, 1.1rem);
	line-height:2.2;
	color:#5a5f48;
	writing-mode:vertical-rl;
	height:21rem;
	min-height:350px;
	margin:3rem 2rem 0 0;
}
body.index #top-box .illust1 {
	width:38.9rem;
	position:absolute;
	right:-14.5rem;
	top:7rem;
	z-index:2;
}
body.index #top-box .illust2 {
	width:44rem;
	position:absolute;
	left:11rem;
	bottom:3.5rem;
	z-index:2;
}
body.index #top-box .pic-box {
	margin-top:-11.5rem;
}
body.index #top-box .pic-box .pic-in {
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
body.index #top-box .pic-box .pic { margin:0 1.5rem; }
body.index #top-box .pic-box .pic1 {
	width:26rem;
	margin-left:-9.5rem;
}
body.index #top-box .pic-box .pic2 {
	width:12rem;
	margin-top:15rem;
}
body.index #top-box .pic-box .pic3 {
	width:16.5rem;
	margin-top:19rem;
}
body.index #top-box .pic-box .pic4 {
	width:21.5rem;
	margin-top:9rem;
}
body.index #top-box .pic-box .pic5 {
	width:16rem;
	margin-top:4.5rem;
}
body.index .top-btm-pic {
	width:100%;
	margin-top:-46rem;
}

body.index #pickup {
	position:relative;
	margin-top:-25rem;
}
body.index #pickup h2 {
	text-align:center;
	margin-bottom:4rem;
}
body.index #pickup h2 .en {
	display:block;
	font-size:1.25rem;
	font-weight:bold;
	display:block;
	color:#5a5f48;
	margin-bottom:.5rem;
}
body.index #pickup h2 .jp {
	font-size:2.5rem;
	color:#6e8bb4;
	font-weight:bold;
	line-height:1.2;
}
body.index #pickup > .illust {
	width:50rem;
	position:absolute;
	right:-3.5rem;
	top:-3.5rem;
}
body.index #pickup section {
	position:relative;
	margin-bottom:4.5rem;
}
body.index #pickup section .pic {
	width:100%;
	aspect-ratio:15.6 / 6;
	border-radius:15rem 0 0 15rem;
	overflow:hidden;
}
body.index #pickup #pickup2 .pic { border-radius:0 15rem 15rem 0; }
body.index #pickup section .pic img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:0.5s ease all;
}
body.index #pickup section.on .pic img { transform:scale(1.05); }
body.index #pickup1,
body.index #pickup3 {
	display:flex;
	justify-content:flex-end;
}
body.index #pickup .pickup-layout { width:78rem; }
body.index #pickup1 .illust {
	width:50rem;
	position:absolute;
	left:-10rem;
	bottom:5rem;
	z-index:-1;
}
body.index #pickup2 .illust {
	width:23.85rem;
	position:absolute;
	right:-1rem;
	bottom:5rem;
	z-index:-1;
}
body.index #pickup3 .illust {
	width:50rem;
	position:absolute;
	left:-10rem;
	bottom:5rem;
	z-index:-1;
}
body.index #pickup .txt-box {
	padding:0 11rem 0 5rem;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
}
body.index #pickup2 .txt-box { padding:0 5rem 0 11rem; }
body.index #pickup .txt-box h3 {
	width:10.7rem;
	position:relative;
	margin-top:-10rem;
}
body.index #pickup .txt-box .txt {
	line-height:2;
	font-size:max(15px, 1rem);
	color:#5a5f48;
	width:37.5rem;
}
body.index #pickup .txt-box .btn {
	width:7.5rem;
	margin-bottom:1rem;
	font-size:3rem;
	font-weight:bold;
	color:#ff720b;
}
body.index #pickup .txt-box .btn a {
	width:7.5rem;
	background:#faf0bb;
	line-height:5rem;
	border-radius:2.5rem;
	display:block;
	text-align:center;
}
body.index #pickup .txt-box .btn a:hover { color:#faf0bb; background:#ff720b; }
body.index #pickup2 .txt-box h3 { order:3; }
body.index #pickup2 .txt-box .txt { order:1; }
body.index #pickup2 .txt-box .btn { order:2; }





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

}

@media screen and (max-width: 960px) {
	.sp-on { display:initial; }
	.pc-on { display:none; }

	.in-w80 { width:86.6%; }
	.in-w85 { width:93.3%; }
	.in-w75 { width:86.6%; }
	.in-w60 { width:86.6%; }

	html { scroll-padding-top:80px; }

	.fadein { transform:translate(0, 0); opacity:1; transition:none; }
	.center-fade img { transform:translate(0, 0); opacity:1; transition:none; }


	.kv-box { height:auto; width:100%; }
	#header { padding:0; display:block; }
	#header .nav-box { height:auto; }
	#header #hamburger { display:block; top:7px; right:15px; }
	#header .site-logo { transition:none; width:83px; margin:7px auto; display:block; text-align:center; position:absolute; left:0; right:0; }
	#header .site-logo { z-index:1; }
	#header.open .sp-site-logo { width:91px; margin:0 auto 20px; display:block; }
	#header .head-in { width:100%; background:none; padding:0; height:85px; }
	#header.open .head-in { width:100%; position:initial; min-width:initial; }
	#header .nav-wrap {
		/*display:none;*/
		transition:0.5s ease all;
		position:fixed;
    top:2.5rem;
    right:2.5rem;
    z-index:1000;
    background:#fff4be;
    padding:3rem 2rem;
    width:300px;
    height:auto;
    display:block;
    border-radius:5rem;
    right:-315px;
	}
	#header #main-nav {
		height:auto;
		width:100%;
		min-width:inherit;
		min-height:inherit;
		z-index:10;
	}
	#header.open .head-in .nav-wrap {
	  position:fixed;
    top:2.5rem;
    right:2.5rem;
    z-index:1000;
    background:#fff4be;
    padding:3rem 2rem;
    width:300px;
    right:15px;
    height:auto;
    display:block;
    border-radius:5rem;
  }
  #header .nav-wrap .yoyaku-btn a { line-height:65px; }
  #header .nav-wrap .yoyaku-btn .txt { width:105px; margin-left:calc(100% - 110px); }

	body.index #top-box { padding-top:30px; }
	body.index #top-box .txt-box { display:block; }
	body.index #top-box .txt-box h2 { margin:0 auto; }
	body.index #top-box .txt-box .txt { width:86.6%; height:auto; min-height:initial; writing-mode:initial; padding:0 20px; margin:20px auto 0; max-width:650px; }
	body.index #top-box .pic-box { margin-top:-50px; }

	body.index #pickup .pickup-layout { width:100%; }
	body.index #pickup .txt-box { display:block; padding:0 20px; width:86.6%; max-width:650px; margin:20px auto 0; }
	body.index #pickup .txt-box h3 { margin:0 auto 20px; }
	body.index #pickup section .pic { width:86.6%; margin-left:calc(100% - 86.6%); }
	body.index #pickup #pickup2 .pic { margin-left:0; }
	body.index #pickup .txt-box .txt { width:100%; }
	body.index #pickup1 .illust { bottom:25rem; }
	body.index #pickup2 .illust { bottom:25rem; }
	body.index #pickup3 .illust { bottom:25rem; }
	body.index #pickup .txt-box .btn { margin-bottom:0; margin-top:10px; margin-left:calc(100% - 75px); }

	#footer { padding-top:35px; padding-bottom:30px; }
	#footer .footer-in { display:block; width:325px; margin:0 auto; padding:0 15px; }
	#footer .in-w85 { width:86.6%; min-width:inherit; }
	#footer .r-box { margin-right:0; }
	#footer .foot-nav { justify-content:center; }
	#footer address.sp-on { text-align:center; margin-top:40px; display:block; }
	/*#footer .foot-logo { margin:0 auto 40px; }*/
	#footer .logo-box { justify-content:center; margin-bottom:35px; }
	#footer .copy { justify-content:center; margin-top:30px; }
	#footer #pagetop { right:7px; bottom:15px; }

	body.index #pickup { margin-top:-18rem; }
	body.index #pickup h2 .sp-on { display:none; }

}



@media screen and (max-width: 750px) {
	.kv-box { border-radius:25px; min-height:280px; }
	.kv-box .kv-in { min-height:280px; }
	.kv-box video { min-height:280px; }

	body.index #top-box .illust1 { right:-215px; top:40px; }
	body.index #top-box .txt-box .txt {
		line-height:1.66;
		position:relative;
		z-index:1;
	}
	body.index #top-box .pic-box {
		width:100%;
		height:300px;
		margin-top:0;
		animation-name:moveToRight;
	  animation-duration:7s;
	  animation-iteration-count:infinite;
	  animation-timing-function:ease;
	  margin-left:-100px;
	  position:relative;
	}
	body.index #top-box .pic-box .pic-in {
		width:728px;
		justify-content:center;
		display:flex;
		align-items:flex-start;
		position:absolute;
		left:-50%;
		right:-50%;
		margin:0 auto;
	}
	@keyframes moveToRight {
	  50% {
	    margin-left: 100px;
	  }
	  100% {
	    margin-left: -100px;
	  }
	}
	body.index #top-box .pic-box .pic { margin:0 1rem; }
	body.index #top-box .pic-box .pic2 { margin-top:10rem; }
	body.index #top-box .pic-box .pic3 { margin-top:12rem; }
	body.index #top-box .illust2 { left:0; bottom:20px; }

	body.index .top-btm-pic { margin-top:-160px; }

	body.index #pickup { margin-top:-70px; }
	body.index #pickup h2 { margin-bottom:20px; }
	body.index #pickup h2 .sp-on { display:initial; }
	body.index #pickup > .illust { display:none; }
	body.index #pickup section .pic { aspect-ratio:7 / 5; width:93.3%; margin-left:calc(100% - 93.3%); }
	body.index #pickup .txt-box .txt { line-height:1.66; }
	body.index #pickup1 .illust { bottom:35rem; }
	body.index #pickup2 .illust { bottom:35rem; }
	body.index #pickup3 .illust { bottom:35rem; }

	aside.btn-box { width:86.6%; padding:0 20px; display:block; margin:0 auto; }
	aside.btn-box .btn { width:100%; margin-bottom:45px; }
	aside.btn-box .btn2 .txt { width:105px; right:5px; }

	#footer {
		background:url(../img/footer_bk_sp.jpg) no-repeat right center;
    background-size:cover;
	}

	#header .head-in .nav-wrap { width:93.3%; right:-93.3%; padding:50px 35px 35px; top:15px; }
	#header.open .head-in .nav-wrap { width:93.3%; left:0; right:0; margin:0 auto; top:15px; border-radius:25px; padding:50px 35px 35px; }
	#header.open #hamburger { background:none; }
	#header nav ul { display:flex; flex-direction:row-reverse; }
	#header #main-nav { margin-bottom:35px; margin-top:45px; }
	#header #main-nav .nav li { writing-mode:vertical-rl; margin:0 7px; }
	#header .inst { width:25px; margin:0 auto 20px; }
}