@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic: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 Maru Gothic", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style:normal;
	overflow:hidden;
}

@font-face
{
font-family: mogihaPen;
src: url('mogihaPen.ttf')
     format("truetype");
}
.en-font {
	font-family:"mogihaPen", serif;
  font-weight:400;
  font-style: normal;
}



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;
}


.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:100; }









.kv-box {
	height:54rem;
	border-radius:0 0 10rem 10rem;
	overflow:hidden;
}
.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 {
	position:relative;
	z-index:1000;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:9.1rem;
	background:url(../img/head_bk.png) no-repeat;
	background-size:cover;
    background-position: center;
}
#header a:hover { opacity:.5; }
#header .head-in { height:100%; }
#header .site-logo {
	width:7.05rem;
	position:fixed;
	top:.5rem;
	left:0;
	right:0;
	margin:0 auto;
	/*padding-left:1.2rem;*/
  box-sizing:content-box;
}
#header .nav-wrap {
	align-items:center;
	justify-content:flex-end;
	height:5.5rem;
}
#header #main-nav .nav {
	justify-content:center;
	margin-right:1rem;
}
#header #main-nav .nav li { margin:0 1.5rem; }
#header #main-nav .nav li.menu3 {
	margin-right:14rem; }
#header #main-nav .nav li a {
	display:block;
	text-align:center;
}
#header #main-nav .nav li .en-font {
	font-size:max(20px, 1.75rem);
	color:#34675c;
	display:block;
}
#header #main-nav .nav li .jp {
	font-size:max(15px, 1rem);
}
#header .nav-wrap .yoyaku {
	width:14rem;
	margin-right:2rem;
}







/* =================== */
/*         footer      */
/* =================== */
#footer {
	padding:9rem 0 2rem;
	position:relative;
	background:#f3f3b4;
	border-radius:10rem 10rem 0 0;
	margin-top:-6.25rem;
}
#footer .in-w75 { min-width:850px; }
#footer .foot-logo {
	width:10rem;
	position:relative;
	margin:0 auto 3.5rem;
}
#footer .foot-logo::before {
	content:"";
	width:10rem;
	height:10rem;
	background:#fff;
	border-radius:100vmax;
	display:block;
	position:absolute;
	top:1rem;
	left:0;
}
#footer .foot-logo img {
	width:9.7rem;
	display:block;
	margin:0 auto;
	position:relative;
	z-index:1;
}
#footer .foot-nav { justify-content:center; }
#footer .foot-nav li {
	text-align:center;
	margin:0 1.25rem 4rem;
}
#footer .foot-nav li .en-font {
	font-size:max(25px, 2rem);
	color:#34675c;
	display:block;
}
#footer .foot-nav li .jp {
	font-size:max(15px, 1rem);
	margin-top:.5rem;
	display:block;
}
#footer .foot-nav li a:hover { opacity:.5; }
#footer .foot-main-box { align-items:flex-start; }
#footer address {
	line-height:1.5;
	font-size:max(15px, 1rem);
	text-align:center;
}
#footer .copy {
	font-size:max(13px, .7rem);
	align-items:center;
	justify-content:center;
	margin-top:2.5rem;
}
#footer .copy .btn { margin-left:1rem; width:2.2rem; min-width:30px; }
#footer #pagetop {
  width:4rem;
  position:fixed;
  top:auto;
  bottom:2rem;
  right:1rem;
  z-index:300;
  line-height:0;
}
#footer #pagetop a:hover { opacity:.5; }





/* =================== */
/*      body.index     */
/* =================== */
#plan-bnr {
	height:12.5rem;
	position:relative;
	z-index:1;
}
#plan-bnr .bk {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	border-radius:100vmax;
	overflow:hidden;
}
#plan-bnr .bk img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:0.5s ease all;
}
#plan-bnr .txt {
	width:28.15rem;
	position:absolute;
	left:4rem;
	top:-1.5rem;
}
#plan-bnr .arrow {
	width:1.15rem;
	height:1.65rem;
	position:absolute;
	right:7.5rem;
	top:0;
	bottom:0;
	margin:auto 0;
	transition:0.5s ease all;
}
#plan-bnr a:hover .bk img { transform:scale(1.05); }
#plan-bnr a:hover .arrow { right:7rem; }

body.index #contacts {
	position:relative;
	height:39rem;
	margin:3rem auto 9.5rem;
}
body.index #contacts .wht-box {
	position:absolute;
	width:45rem;
	min-width:550px;
	margin:0 auto;
	padding:3rem 0 3rem;
	border-radius:2.5rem;
	border:.25rem solid #34675c;
	text-align:center;
	left:0;
	right:0;
	top:5rem;
	background:#fff;
	z-index:1;
}
body.index #contacts .wht-box::before {
	content:"";
	width:38.85rem;
	height:3.4rem;
	background:url(../img/contacts_bk.png) no-repeat;
	background-size:contain;
	display:block;
	position:absolute;
	top:-1.7rem;
	left:2.5rem;
}
body.index #contacts h3 .en-font {
	display:block;
	font-size:5rem;
	color:#34675c;
}
body.index #contacts h3 .jp {
	display:block;
	font-size:2.5rem;
	margin-top:.5rem;
	font-weight:400;
}
body.index #contacts .txt {
	line-height:1.8;
	font-size:max(15px, 1.1rem);
	margin:1.5rem 0;
}
body.index #contacts .tel-btn a {
	background:#cb6318;
	border-radius:100vmax;
	display:block;
	width:30rem;
	margin:0 auto;
	font-size:1.25rem;
	color:#fff;
	line-height:4.5rem;
}
body.index #contacts .tel-btn a span {
	font-size:2.5rem;
	color:#f3f3b4;
	font-weight:bold;
	vertical-align:sub;
}
body.index #contacts .tel-btn a:hover { opacity:.5; }
body.index #contacts .att {
	font-size:max(15px, 1.1rem);
	margin-top:1.5rem;
}
body.index #contacts .att a {
	color:#cb6318;
	text-decoration:underline;
}
body.index #contacts .att a:hover { opacity:.5; }
body.index #contacts .contacts-slider img { margin:0 1rem; }
body.index #contacts .contacts-slider img:nth-child(even) { margin-top:3.5rem; }
body.index #contacts .illust1 {
	width:8.5rem;
	position:absolute;
	left:-1.5rem;
	top:5rem;
}
body.index #contacts .illust2 {
	width:8.55rem;
	position:absolute;
	top:9rem;
	right:-1.5rem;
}

body.index #concept {
	position:relative;
	padding-top:11rem;
}
body.index #concept .pic-box {
	width:57rem;
	margin-left:calc(100% - 57rem);
}
body.index #concept .pic-box .main-pic { width:32.5rem; }
body.index #concept .pic-box .sub-pic { width:23rem; }
body.index #concept .pic-box .sub-pic .sub { margin-bottom:1.5rem; }
body.index #concept .pic-box .sub-pic .sub3 { margin-bottom:0; }
body.index #concept .illust {
	width:30.5rem;
	position:absolute;
	top:1.5rem;
	left:-12rem;
}
body.index #concept .txt-box {
	position:absolute;
	left:18rem;
	top:17rem;
	width:26rem;
	min-width:300px;
}
body.index #concept .txt-box h2 {
	font-size:5rem;
	color:#34675c;
	margin-bottom:2rem;
}
body.index #concept .txt-box .txt {
	line-height:2;
	font-size:max(15px, 1.1rem);
	text-shadow:
            2px 2px 2px #fff, -2px -2px 2px #fff,
           -2px 2px 2px #fff,  2px -2px 2px #fff,
            2px 0px 2px #fff, -2px -0px 2px #fff,
            0px 2px 2px #fff,  0px -2px 2px #fff;
}

body.index #pickup {
	background:url(../img/pickup_bk.png) no-repeat center bottom;
	background-size:194.85rem auto;
	padding:12rem 0 7rem;
	margin-top:-2rem;
}
body.index #pickup section { margin-bottom:7rem; }
body.index #pickup .main-pic {
	width:50rem;
	position:relative;
	z-index:1;
}
body.index #pickup .txt-box {
	width:calc(100% - 50rem - 2.5rem);
	box-sizing:border-box;
}
body.index #pickup2 .txt-box { padding-left:14rem; }
body.index #pickup .pic-l .main-pic { order:1; }
body.index #pickup .pic-l .txt-box { order:2; }
body.index #pickup .txt-box h2 {
	position:relative;
	z-index:3;
}
body.index #pickup .txt-box h2 .en-font {
	font-size:7.5rem;
	color:#34675c;
	display:block;
}
body.index #pickup .txt-box h2 .jp {
	font-size:3rem;
	display:block;
	margin-left:3.5rem;
	margin-top:2rem;
	font-weight:400;
}
body.index #pickup .txt-box .txt {
	font-size:max(15px, 1.25rem);
	line-height:1.6;
	margin-left:3.5rem;
	margin-top:1rem;
	position:relative;
	z-index:3;
}
body.index #pickup .txt-box .more-btn a {
	border:1px solid #000;
	background:#fefffa;
	border-radius:100vmax;
	font-size:max(15px, 1.1rem);
	line-height:5rem;
	width:15rem;
	min-width:180px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:0 2rem 0 2.5rem;
	box-sizing:border-box;
	letter-spacing:.2em;
	font-weight:500;
	margin:3.5rem auto 0;
	box-shadow:0px 0px 15px 0px rgba(225, 225, 225, 1);
	position:relative;
	z-index:3;
}
body.index #pickup2 .txt-box .more-btn a { margin:3.5rem 0 0 -2rem; }
body.index #pickup .txt-box .more-btn a img { width:.6rem; }
body.index #pickup .txt-box .more-btn a:hover { padding-right:1.7rem; opacity:.5; }
body.index #pickup .illust2 {
	width:30.75rem;
	height:21.6rem;
	position:absolute;
	bottom:-6rem;
}
body.index #pickup .pic-l .illust2 { left:31rem; }
body.index #pickup .pic-r .illust2 { right:31rem; }
body.index #pickup1 .illust1 {
	width:11.65rem;
	position:absolute;
	top:3rem;
	right:0;
}
body.index #pickup2 .illust1 {
	width:11.65rem;
	position:absolute;
	top:4rem;
	left:0;
}
body.index #pickup3 .illust1 {
	width:11.1rem;
	position:absolute;
	top:0;
	right:0;
}
body.index #pickup1 .illust2 .illust2-2 {
	width:13.65rem;
	position:absolute;
	left:10rem;
	bottom:2rem;
	z-index:2;
}
body.index #pickup2 .illust2 .illust2-2 {
	width:12rem;
	position:absolute;
	left:5rem;
	bottom:1rem;
	z-index:2;
}
body.index #pickup3 .illust2 .illust2-2 {
	width:16.2rem;
	position:absolute;
	left:9rem;
	bottom:4rem;
	z-index:2;
}








@media screen and (max-width: 1100px) {
	#header #main-nav .nav li { margin:0 1rem; }
	body.index #pickup2 .txt-box { padding-left:12rem; }
}
@media screen and (max-width: 1000px) {
	#header #main-nav .nav li.menu3 { margin-right:13rem; }
}

@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; border-radius:0 0 50px 50px; }
	.kv-box video { min-height:470px; }
	#header { height:50px; background:#fff; }
	#header::before { content:""; background:url(../img/nav_deco.png) no-repeat; background-size:cover; width:11.05rem; height:6rem; position:absolute; left:0; right:0; bottom:-3rem; margin:0 auto; }
	#header .nav-box { height:auto; }
	#header .site-logo { transition:none; width:56px; padding-left:2px; top:10px; }
	#header.open .site-logo { margin:10px auto 0; width:97px; position:relative; z-index:2; }
	#header.open .site-logo::before { content:""; width:10rem; height:10rem; background:#fff; border-radius:100vmax; display:block; position:absolute; bottom:-15px; }
	#header.open .site-logo img { position:relative; }
	#header #main-nav {
		height:auto;
		width:100%;
		min-width:inherit;
		min-height:inherit;
		z-index:10;
		display:none;
	}
	#header.open .nav-wrap { display:block; margin-top:0; background:url(../img/nav_bk.jpg) no-repeat left center; background-size:cover; width:100%; height:100vh; position:fixed; top:0; left:0; padding-top:160px; transition:none; }
	#header.open #main-nav { display:block; width:275px; margin:0 auto; }
	#header #hamburger {
		display:block;
		width:45px;
		height:40px;
		cursor:pointer;
		z-index:10000;
		position:fixed;
		right:10px;
		top:10px;
	}
	#header #hamburger .inner_line {
		display:block;
		margin:0 auto;
		width:35px;
		height:2.5px;
		transition:1s;
		background:#000;
		position:absolute;
		left:5px;
		border-radius:100vmax;
	}
	#header #hamburger .inner_line span { transition:all .4s; }
	#header #hamburger #line1 { top:2px; }
	#header #hamburger #line2 { top:10px; background:#cb6318; }
	#header #hamburger #line3 { background:none; width:100%; top:18px; left:0; text-align:center; }
	#header #hamburger #line3::before { content:"Menu"; font-family:'Zen Maru Gothic'; font-size:12.5px; }
	#header #hamburger.open #line1 { transform:translateY(5px) rotate(-30deg); }
	#header #hamburger.open #line2 { transform:translateY(-3px) rotate(30deg); }
	#header #hamburger.open #line3::before { content:"Close"; }
	#header #main-nav .nav { display:block; margin-right:0; text-align:center; padding-left:0; position:relative; }
	#header #main-nav .nav li { margin:0; text-align:center; display:block; margin-bottom:20px; }
	#header #main-nav .nav li .en-font { font-size:30px; }
	#header #main-nav .nav li .jp { font-size:15px; display:block; margin-top:10px; }
	#header #main-nav .nav li.menu3 { margin-right:auto; }
	#header.open.fixed #hamburger { animation:none; }
	#header.open.fixed .head-in,
	#header.fixed .head-in { animation:none; }
	#header .nav-wrap { transition: none; }
	#header .nav-wrap .yoyaku { position:fixed; bottom:20px; left:0; right:0; margin:0 auto; width:325px; }
	#header .nav-wrap .yoyaku a { display:block; }

	#footer { padding-bottom:11rem; }
  #footer .in-w75 { min-width:initial; }
  #footer .foot-nav { flex-wrap:wrap; margin:0 auto 40px; max-width:400px }
  #footer .foot-nav li { width:50%; margin:0 0 20px; }
  #footer .foot-nav li.menu1 { order:1; }
  #footer .foot-nav li.menu2 { order:3; }
  #footer .foot-nav li.menu3 { order:5; }
  #footer .foot-nav li.menu4 { order:2; }
  #footer .foot-nav li.menu5 { order:4; }
  #footer .foot-nav li.menu6 { order:6; }

  body.index #contacts { height:42rem; }
  body.index #contacts .txt .pc-on { display:initial; }
  body.index #contacts .att .sp-on { display:none; }
  body.index #concept .txt-box { left:10rem; }

  body.index #pickup {
  	background:url(../img/pickup_bk.png) no-repeat center bottom;
    background-size:cover;
  }
  body.index #pickup section { display:block; max-width:600px; width:86.6%; }
  body.index #pickup .txt-box { width:100%; max-width:400px; margin:0 auto 40px; }
  body.index #pickup .main-pic { width:100%; }
  body.index #pickup2 .txt-box { padding-left:0; }
  body.index #pickup2 .txt-box .more-btn a { margin:3.5rem auto 0; }
  body.index #pickup2 .illust1 { left:initial; right:0; }

}



@media screen and (max-width: 750px) {
	#footer #pagetop { bottom:90px; right:5px; }
	#plan-bnr .arrow { display:none; }
	#plan-bnr .txt { width:265px; left:20px; top:-8px; }

	body.index #contacts { height:auto; margin-bottom:60px; margin-top:20px; }
	body.index #contacts .wht-box { position:relative; width:86.6%; min-width:initial; top:initial; right:initial; left:initial; padding-top:20px; margin-bottom:-30px; }
	body.index #contacts .wht-box::before { width:283.5px; top:-12px; left:20px; }
	body.index #contacts .txt .pc-on { display:none; }
	body.index #contacts .txt { padding:0 20px; text-align:left; line-height:1.5; }
	body.index #contacts .att { padding:0 30px 0 calc(30px + 1em); text-align:left; line-height:1.5; text-indent:-1em; font-size:13px; }
	body.index #contacts .att .sp-on { display:initial; }
	body.index #contacts .illust1 { width:59px; top:30px; }
	body.index #contacts .illust2 { width:59.5px; top:initial; bottom:-20px; }

	body.index #concept { padding-top:30px; }
	body.index #concept .txt-box { position:initial; width:86.6%; padding:0 30px; margin:0 auto; }
	body.index #concept .txt-box .txt { line-height:1.66; }
	body.index #concept .illust { width:213px; left:-100px; top:-50px; }
	body.index #concept .txt-box h2 { text-align:center; }
	body.index #concept .pic-box { display:block; width:100%; margin-left:0; margin-top:30px; }
	body.index #concept .pic-box .main-pic { width:86.6%; margin:0 auto 5px; }
	body.index #concept .pic-box .sub-pic { width:100%; }
	body.index #concept .pic-box .sub-pic .sub { transform:translate(0, 0); opacity:1; margin:0 2.5px; }

  body.index #pickup {
    background:url(../img/pickup_bk_sp.png) no-repeat center top;
    background-size:1755.5px auto;
    padding-top:15.5rem;
    padding-bottom:20px;
  }
  body.index #pickup section { margin-bottom:50px; }
  body.index #pickup1 .illust1 { top:-30px; }
  body.index #pickup .pic-l .illust2,
  body.index #pickup .pic-r .illust2 { width:215px; left:-70px; bottom:initial; top:180px; }
  body.index #pickup1 .illust2 .illust2-2 { width:95.5px; left:50px; bottom:90px; }
  body.index #pickup2 .illust1 { top:-30px; }
  body.index #pickup2 .illust2 .illust2-2 { width:84px; bottom:70px; left:70px; }
  body.index #pickup3 .illust2 .illust2-2 { width:113px; left:60px; bottom:80px; }
  body.index #pickup .txt-box .more-btn a { margin-top:25px; }
}