@charset "utf-8";
/* contents */
.gf-maru{ font-family: 'Kosugi Maru', sans-serif; }
.box{ margin:2em; border:2px solid #edaeb1; }
main header{ position:relative; margin-bottom:3em; }
main header .logo{ width: 12em; margin:2em auto 0; text-align:center; }
.bg_pink{ background:#fcf1ef; }
.d_data > *{ padding:1em 0 0; border-top:1px solid #9e9e9e; }
.d_data > dt:first-child, .d_data > dt:first-child + dd{ border:0; }
.d_data dt{ width:20%;  }
.d_data dd{ flex:80%; }

/* intro */
.intro{ position:relative; z-index:1; padding-bottom:10em; }
.intro::before{ position:absolute; content:""; right:2em; top:0;
	width:20em; padding-top:100%;
	background:url(../img/konatsu/dot_yellow.png) no-repeat 0 0 / 100%; }
.intro .txt{ position: relative; width:45%; margin:0 auto; line-height:1.9; }
.intro .ttl{ font-size:1.25em; letter-spacing:0.08em; }
.intro .copy { display:block; margin:0.5em 0 0.8em; font-size:1.75em; font-weight:400; line-height:1.5; }
.set_lion{ position:absolute; top:-13em; right:-4em; }
.set_rabbit{ position:absolute; top:-8em; left:-4em; }

/* child */
.child{ position:relative; z-index:1; margin:-12em 0 5em; padding-top:9em;
	background:url(../img/konatsu/child.png) no-repeat top right; }
.child::before{ position:absolute; z-index:-1; content:""; left:11em; top:6em;
	width:20em; padding-top:100%;
	background:url(../img/konatsu/dot_yellow.png) no-repeat 0 0 / 100%; }
.child .txt{ width:40%; margin:0 auto; line-height:1.9; }
.child .copy{ margin-bottom:0.8em; font-size:1.5em; font-weight:400; letter-spacing:0.05em; }
.mug_car{ margin:-15em 0 0 -2em; }

/* bnr_search */
.bnr_search{ width:70%; margin:6em auto 0; }
.bnr_search li{ width:48%; background:url(../img/konatsu/search_china.webp) no-repeat 0 0 / cover;
	box-shadow:0 0 20px rgba(0,0,0,0.15); }
.bnr_search li.search_japan{ background-image:url(../img/konatsu/search_japan.webp); }
.bnr_search a{ display:block; padding:4.5em 0 1em;
	text-decoration:none; text-align:center; font-size:1.4em; color:#222; letter-spacing:0.08em; }
.bnr_search a span{ font-size:1.4em; }

/* concept */
.concept{ position:relative; z-index:1; padding:5em 0 2em; }
.concept .copy{ margin-bottom:0.8em; text-align:center;
	font-size:1.5em; font-weight:400; letter-spacing:0.08em; line-height: 1.8; }
.concept .copy span{ display:block; font-size:1.9em; }
.concept::before{ position:absolute; z-index:-1; content:""; right:-1em; top:-6em;
	width:20em; padding-top:100%;
	background:url(../img/konatsu/dot_pink.png) no-repeat 0 0 / 100%; }
.concept::after{ position:absolute; z-index:-1; content:""; left:3em; top:2em;
	width:24em; padding-top:100%;
	background:url(../img/konatsu/dot_pink.png) no-repeat 0 0 / 100%; }
.concept .txt{ width:90%; margin:2em auto;
	background:url(../img/konatsu/cup_cat.png) no-repeat right bottom; }
.concept .txt p{ width:40%; margin-left:10%; line-height:1.9; }
.spoon{ position:absolute; width: 250px; top:-1em; left:-6em; }

/* education */
.education{ position:relative; z-index:1; padding-bottom:5em; }
.education::before{ position:absolute; z-index:-1; content:""; top:0; left:30%;
	width:32em; padding-top:100%;
	background:url(../img/konatsu/icon_edu1.png) no-repeat 0 0 / 100%; }
.education .txt{ width:40%; margin:0 auto; padding-top: 5em; line-height:1.9; }
.education .ef{ margin:0 0 0.5em 2em; font-size:1.6em; color:#dbaea4; }
.education .copy{ margin-bottom:0.8em; line-height:1.7;
	font-size:1.3em; font-weight:400; letter-spacing:0.08em; }
.education .copy span{ display:block; font-size:1.8em; }
.dish_car{ position:absolute; z-index:-1; width: 530px; top:-2em; left:-12em; }
.mug_zou{ position:absolute; z-index:-1; width: 350px; bottom:5em; right:-2em; }

/* online */
.online{ position:relative; z-index:1; padding:3em 0 4em; }
.online .txt{ width:40%; margin:2em auto; text-align:center; line-height:1.9; }
.online .copy{ margin-bottom:0.2em; line-height:1.7;
	font-size:1.8em; font-weight:400; }
.bnr_online{ width:62%; margin:1em auto; border:3px solid #282828; }
.bnr_online ul{ position:relative; }
.bnr_online li{ width:50%; }
.bnr_online li a{ display:block; height:100%; }
.online .ef{ margin: 0; text-align:center; font-size:1.5em; font-weight:400; color:#d50000; }

/* shop */
.shop{ padding:5em 0; }
.shop .copy{ margin-bottom:0.4em; text-align:center; font-size:2.0em; font-weight:400; }
.shop .sub{ margin-bottom:3em; text-align:center; font-size:1.3em; }
.shop .txt{ width:70%; margin:0 auto; }
.shop .col2_pic{ margin-bottom:3em; }
.gmap{ border:0; width:100%; height:400px; }

/* footer */
.copyright{ text-align:center; font-size:0.85em; }

/*960px 以上*/
@media screen and (min-width: 960px) {
	main header .logo{ width:12em; margin-top:5.5em; }
	.set_rabbit{ width: 420px; top: -12em; left: -6em; }
	.set_lion{ width:420px; }
	.mug_car{ width: 250px; }
	.concept .txt{ background-size: 42%; }
}

/*760px 以上*/
@media screen and (min-width: 760px) {
	.box{ border-width:4px; }
	.col2_pic .pic{ width:45%; }
	.col2_pic .d_data{ width:50%; }

}

/*1190px 以下  960px-1190px */
@media screen and (max-width: 1190px) {
	/* intro */
	.set_lion{ width: 45%; right: -8em; }
	.set_rabbit{ width: 60%; left: -16em; top: -16em; }
	.intro .txt{ width:70%; }

	/*child*/
	.mug_car{ display:none; }
	.child .txt{ width:80%; }
	.bnr_search{ width: 90%; }
	.bnr_search a{ padding-top:3.5em; font-size: 1.2em; }

	/* concept */
	.concept .copy{ font-size: 1.3em; }
	.spoon{ width: 20%; left: -4.5em; }
	.concept .txt{ background-size: 32%; background-position:right top; }
	.concept .txt p{ width:65%; margin:0; }
	.dish_car{ display:none; }

	/* education */
	.education{ padding-bottom: 2em; }
	.education .txt{ width: 80%; }
	.education::before{ left: 10%; }
	.mug_zou{ width: 30%; top: -4em; }

	.online .txt{ width:90%; }
	.shop .txt{ width:90%; }

}

/*959px 以下  760px-959px */
@media screen and (max-width: 959px) {
	/* intro */
	.intro{ padding-bottom:0; }
	.intro .ttl{ font-size: 1.0em; }
	.intro::before{ width: 15em; }
	.child{ margin-top:0; padding-top: 4em; background-size:50%; }
	.child::before{ content:none; }

}

/*759px 以下  600px-759px */
@media screen and (max-width: 759px) {
	.box{ margin: 0.5em; }
	main header .logo{ width: 8em; margin:2em auto 0; }

	/* intro */
	.set_lion{ position:static; }
	.intro .copy{ font-size: 1.3em; }
	.set_lion{ width: 70%; margin:0 auto; }

	/* child */
	.child{ background-size: 80%; background-position:center 50%; }
	.child .txt{ width:90%; }
	.child .copy{ font-size: 1.3em; }
	.bnr_search li{ width:100%; margin-bottom:1em; }
	.bnr_search a{ padding-top: 3.5em; font-size: 1.0em; }

	/* concept */
	.concept::before{ width: 10em; top: -3em; }
	.concept .copy{ font-size:1em; }
	.concept::after{ width: 14em; left: 0em; top:5em; }
	.spoon{ left:-1.7em; }
	.concept .txt{ margin: 1em auto; padding-top:6em;
		background-size: 50%; background-position: center top; }
	.concept .txt p{ width:100%; }

	/* education */
	.education .txt{ width:90%; }
	.education .copy{ font-size: 1em; }
	.mug_zou{ width: 45%; top: -2em; }

	/* online */
	.online{ padding: 0 0 1em; }
	.online .copy{ font-size: 1.2em; }
	.bnr_online{ width: 90%; }

	/* shop */
	.shop{ padding: 2em 0; }
	.shop .copy{ font-size: 1.3em; }
	.shop .sub{ margin-bottom: 1em; font-size: 1.1em; }
}

/*599px 以下*/
@media screen and (max-width: 599px) {
	.intro .txt{ width: 90%; }
	.set_rabbit{ display:none; }
}