@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


/*common
===========================================================*/
body {
	font-family: sans-serif;
	margin:0;
	padding:0;
	line-height:1.7;
	background: url(../img/bk_gyoza.png) repeat center center;
}
div#container{
	position:relative;
	padding:0 0 0 50%;
}
div#container:before{
	width:50%;
	height:100vh;
	content:"";
	position:fixed;
	top:0;
	left:0;
	display:block;
	background:#fcee21 url(../img/ill6.webp) no-repeat center center / cover;
}
div#container.bg1:before{background-image:url(../img/ill1.webp);background-color:#784a9a;}
div#container.bg2:before{background-image:url(../img/ill2.webp);background-color:#f7931e;}
div#container.bg3:before{background-image:url(../img/ill3.webp);background-color:#00a7ea;}
div#container.bg4:before{background-image:url(../img/ill4.webp);background-color:#009245;}
div#container.bg5:before{background-image:url(../img/ill5.webp);background-color:#ff2e8c;}
div#container.bg6:before{background-image:url(../img/ill6.webp);background-color:#fcee21;}
div#container.bg7:before{background-image:url(../img/ill1.webp);background-color:#784a9a;}
div#container.bg8:before{background-image:url(../img/ill2.webp);background-color:#f7931e;}
div#container.bg9:before{background-image:url(../img/ill3.webp);background-color:#00a7ea;}
div#container.bg10:before{background-image:url(../img/ill4.webp);background-color:#009245;}

div#contents{
	margin-bottom:60px;
}
div#container div#sp{
	max-width:376px;
	margin:0 auto;
}
h1.site_ttl{
	width:100%;
	position:relative;
	z-index:99;
}
h1.site_ttl img{
	max-width:100%;
}
a.btn{
	max-width:270px;
	height:71px;
	display:block;
	margin:15px auto;
	border:none!important;
	border-radius:0;
}



/*header
===========================================================*/
div#header{
	margin-bottom:30px;
}


/*footer
===========================================================*/
div#footer div.date{
	padding:0 30px 15px;
	background-color:#000;
}
div#footer div.date h2{
	max-width:150px;
	position:relative;
	top:-15px;
	margin:0 auto;
}
div#footer a.bnr{
	display:block;
	margin:60px auto 15px;
	padding:10px;
}
div#footer small {
	display:block;
	margin:30px auto;
	text-align:center;
}
@media screen and (max-width:860px){
	div#container{
		max-width:calc(100% - 60px);
		margin:0 30px;
		padding:0;
	}
	div#container:before{
		display:none;
	}
}
@media screen and (max-width:540px){
	div#container{
		max-width:calc(100% - 30px);
		margin:0 15px;
	}
}




/*home
===========================================================*/
#home div#header{
	margin-bottom:0;
}
#home h1.ttl{
	position:relative;
	margin-top:-150px;
	padding-bottom:64px;
}
#home h1.ttl:after{
	width:24px;
	content:"";
	position:absolute;
	left:calc(50% - 12px);
	bottom:0;
	display:block;
	padding-top:54px;
	background:url(../img/arr_downward.png) no-repeat center center / 100% auto;
}
#home a.btn.diagnose{
	width:100%;
	max-width:none;
	margin:15px 0 30px ;
	padding:0;
	background:url(../img/btn_diagnose.png) no-repeat center center / 270px auto;
	transition:none;
}
#home a.btn.diagnose:hover{
	margin:20px -5px 25px 5px;
}
#home ul.info{
	padding:65px 25px 45px;
	background:url(../img/bk_dot.gif) repeat center center;
	overflow:hidden;
}
#home ul.info li{
	padding:20px;
	border:2px #000 solid;
	border-radius:20px;
	background-color:#fff;
	box-shadow: 5px 5px 0 #000;
}
#home ul.info li:first-child{
	margin-bottom:60px;
}
#home ul.info li h2{
	margin-top:-60px;
}


@media screen and (max-width:416px){
	#home h1.ttl{
		margin-top:-37vw;
	}
}


/*diagnose
===========================================================*/
#diagnose p.outline{
	margin-bottom:30px;
	text-align:center;
}
div#quiz-container {
  position: relative;
  max-width: 600px;
  margin: auto;
  min-height: 360px;
}
div.card {
	max-width:376px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding:1.5rem;
	border:2px #000 solid;
	border-radius: 30px;
	box-shadow: 5px 5px 0 #000;
	transition: transform 0.6s ease, opacity 0.6s ease;
}
div.card.gyouza1 {background-image:url(../img/gyoza1.jpg);}
div.card.gyouza2 {background-image:url(../img/gyoza2.jpg);}
div.card.gyouza3 {background-image:url(../img/gyoza3.jpg);}
div.card.gyouza4 {background-image:url(../img/gyoza4.jpg);}
div.card.gyouza5 {background-image:url(../img/gyoza5.jpg);}
div.card.gyouza6 {background-image:url(../img/gyoza6.jpg);}
div.card.gyouza7 {background-image:url(../img/gyoza7.jpg);}
div.card.gyouza8 {background-image:url(../img/gyoza8.jpg);}
div.card.gyouza9 {background-image:url(../img/gyoza9.jpg);}
div.card.gyouza10{background-image:url(../img/gyoza10.jpg);}

.card.inactive {
  opacity: 0.85;
  z-index: 1;
  box-shadow: 0 5px 12px rgba(0,0,0,0.15);
  pointer-events: none; /* ← inactiveカードはクリックできない */
}
div.card h2{
	width:100%;
	height:24px;
	margin:0 auto 0.4rem;
	padding:8px 10px 5px;
	text-indent: calc(100% + 20px);
    white-space: nowrap;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:auto 24px;
    overflow: hidden;
}
div.card.q1 h2{background-image:url(../img/ttl_q1.png);}
div.card.q2 h2{background-image:url(../img/ttl_q2.png);}
div.card.q3 h2{background-image:url(../img/ttl_q3.png);}
#diagnose button {
	width:100%;
	margin: 0 0 10px;
	padding: 0.7rem 1.2rem 0.5rem;
	color: #000;
	font-size:14px;
	border: 2px #000 solid;
	border-radius: calc(0.85em + 0.6rem);
	box-shadow:5px 5px 0 #000;
	cursor: pointer;
	background-color:#fff;
}
#diagnose button:hover {
	margin:5px 0 5px 5px;
	box-shadow:0 0 0 #000;
}
.nav-btn { background: #6c757d; }

.selected {
	color: #fff;
	background: orange !important;
}

#diagnose div.card.result button:not(.nav-btn){
	width:100%;
	padding-top:25%;
	text-indent: calc(100% + 20px);
    white-space: nowrap;
    border:none;
    border-radius:0;
    box-shadow:0 0 0 #000;
	background:url(../img/bnt_result.png) no-repeat center center / 100% auto;
    overflow: hidden;
}
div.card.result h2{
	display:none;
}

.card.active { z-index: 10; }




/*result
===========================================================*/
#result{
	background:fixed url(../img/bk.png) no-repeat center top / cover;
}
#result .course-section { 
	display: none; 
	padding: 0;
	background:#fff;
	border-radius:0;
}
#result div.course-section div.ttl_gyozatabi{
	position:relative;
	margin-bottom:50px;
	padding:15px;
}
#result div#course-0 div.ttl_gyozatabi{background-color:#f7931e;}
#result div#course-1 div.ttl_gyozatabi{background-color:#784a9a;}
#result div#course-2 div.ttl_gyozatabi{background-color:#00a7ea;}
#result div#course-3 div.ttl_gyozatabi{background-color:#ff2e8c;}
#result div#course-4 div.ttl_gyozatabi{background-color:#009245;}
#result div#course-5 div.ttl_gyozatabi{background-color:#fcee21;}

#result div.course-section div.ttl_gyozatabi:after{
	width:100%;
	content:"";
	position:absolute;
	left:0;
	bottom:-18px;
	display:block;
	padding-top:5.32%;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100% auto;
}
#result div#course-0 div.ttl_gyozatabi:after{background-image:url(../img/ttl_below1.png);}
#result div#course-1 div.ttl_gyozatabi:after{background-image:url(../img/ttl_below2.png);}
#result div#course-2 div.ttl_gyozatabi:after{background-image:url(../img/ttl_below3.png);}
#result div#course-3 div.ttl_gyozatabi:after{background-image:url(../img/ttl_below4.png);}
#result div#course-4 div.ttl_gyozatabi:after{background-image:url(../img/ttl_below5.png);}
#result div#course-5 div.ttl_gyozatabi:after{background-image:url(../img/ttl_below6.png);}
#result div.ttl_gyozatabi h2{
	padding-top:132.63%;
	text-indent: calc(100% + 20px);
    white-space: nowrap;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100% auto;
    overflow: hidden;
}
#result div#course-0 div.ttl_gyozatabi h2{background-image:url(../img/result1.webp);}
#result div#course-1 div.ttl_gyozatabi h2{background-image:url(../img/result2.webp);}
#result div#course-2 div.ttl_gyozatabi h2{background-image:url(../img/result3.webp);}
#result div#course-3 div.ttl_gyozatabi h2{background-image:url(../img/result4.webp);}
#result div#course-4 div.ttl_gyozatabi h2{background-image:url(../img/result5.webp);}
#result div#course-5 div.ttl_gyozatabi h2{background-image:url(../img/result6.webp);}
#result div.ttl_gyozatabi p.outline{
	padding:0 15px;
	color:#fff;
	font-size:14px;
}
#result div#course-5 div.ttl_gyozatabi p.outline{color:#000;}
#result div.course-section ul:not(.sns_share){
	width:calc(100% - 60px);
	margin:0 auto 30px;
	padding:15px;
	border:2px #000 solid;
	border-radius:20px;
	box-shadow:5px 5px 0 #000;
	background-color:#fff;
}
#result li.spot {
	margin: 0 0 1rem;
	padding: 0 0.5rem 1rem;
	border-bottom:1px solid #ddd;
}
#result li.spot:last-child {
	margin-bottom:0;
	padding-bottom:0;
}
#result li.spot h3.name{
	position:relative;
	margin-bottom:5px;
	padding-left: 35px;
	font-size: 20px;
	font-weight: bold;
}
#result li.spot h3.name:before{
	width:75px;
	height:75px;
	content:"";
	position:absolute;
	top:-20px;
	left:-45px;
	display:block;
	background-repeat:no-repeat;
	background-size:450px auto;
}
#result li.spot:nth-child(1) h3.name:before{background-image:url(../img/icon_gyoza.png);}
#result li.spot:nth-child(2) h3.name:before{background-image:url(../img/icon_sweets.png);}
#result li.spot:nth-child(3) h3.name:before{background-image:url(../img/icon_omiyage.png);}
#result li.spot:nth-child(4) h3.name:before{background-image:url(../img/icon_alpha.png);}

#result div#course-0 li.spot h3.name:before{background-position:-75px center;}
#result div#course-2 li.spot h3.name:before{background-position:-150px center;}
#result div#course-3 li.spot h3.name:before{background-position:-300px center;}
#result div#course-4 li.spot h3.name:before{background-position:-225px center;}
#result div#course-5 li.spot h3.name:before{background-position:-375px center;}

#result li.spot img{
	margin-bottom:15px;
}
#result li.spot span.copy{
	position:relative;
	display:block;
	margin-bottom:5px;
	font-size:16px;
	font-weight:bold;
}
/*
#result li.spot:nth-child(2) span.copy:after{
	width:139px;
	height:70px;
	content:"";
	position:absolute;
	right:-30px;
	bottom:30px;
	display:block;
	background:url(../img/icon_limited.png) no-repeat center center / 100% auto;
}
*/
#result li.spot p.desc{
	font-size:14px;
}
/*
#result li.spot p.desc span.limited_menu{
	display:block;
	margin:5px auto;
	padding:5px 0 0;
	text-align:center;
	border-radius:25px;
	border:1px #000 solid;
	background-color:yellow;
}
*/
#result p.reference{
	width: calc(100% - 60px);
	margin:0 auto 30px;
	padding: 15px;
	font-size:14px;
	text-align:left; 
	border: 2px #000 solid;
	border-radius: 20px;
	box-shadow: 5px 5px 0 #000;
	background-color: #fff;
}
#result p.reference strong,
#result li.spot p.desc strong{
	width:calc(50% - 10px);
	display:inline-block;
	margin:10px 0 5px 0;
	padding:4px 0 2px;
	color:#fff;
	font-size:14px;
	text-align:center;
	border:2px #000 solid;
	background-color:#000;
}
#result p.reference strong  + a + br + strong,
#result li.spot p.desc strong + strong{
	margin-left:10px;
	color:#000;
	background-color:#d9e021;
}
#result p.reference strong{
	margin:0 auto 5px!important;
	display:block;
}
#result p.reference strong a{
	text-decoration:underline;
}
#result p.reference strong a:hover{
	text-decoration:none;
}
#result li.spot p.desc + a {
	width:200px;
	height:50px;
	display:block;
	margin:10px auto 0;
	background:url(../img/btn_detail.png) no-repeat -209px center / auto 100%;
}
#result div#course-1 p.desc + a {background-position:left center;}
#result div#course-2 p.desc + a {background-position:-417px center;}
#result div#course-3 p.desc + a {background-position:-835px center;}
#result div#course-4 p.desc + a {background-position:-626px center;}
#result div#course-5 p.desc + a {background-position:right center;}

a.utsunomiya_navi{
	max-width:240px;
	display:block;
	margin:0 auto;
	padding-top:165px;
	background-repeat:no-repeat;
	background-image:url(../img/btn_spot.png);
	background-size:1500px auto;
}
#result div#course-0 a.utsunomiya_navi{background-position:-253px center;}
#result div#course-1 a.utsunomiya_navi{background-position:left center;}
#result div#course-2 a.utsunomiya_navi{background-position:-506px center;}
#result div#course-3 a.utsunomiya_navi{background-position:right center;}
#result div#course-4 a.utsunomiya_navi{background-position:-1012px center;}
#result div#course-5 a.utsunomiya_navi{background-position:-759px center;}

.sns_share,
a.retry{
	width: 100%;
	max-width: none;
	min-height:71px;
	margin: 15px 0 0;
	padding: 0;
	background: url(../img/btn_share.png) no-repeat center center / 270px auto;
	transition: none;
}
a.retry{
	background-image:url(../img/btn_retry.png);
}
.sns_share:hover ,
a.retry:hover {
	margin: 20px -5px -5px 5px;
	background-color:#fff;
}
#result h1 { text-align: center; margin-bottom: 2rem; }
#result .course-nav { position:relative;display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem;z-index:999; }
#result .course-nav li{width:calc(50% - 7.5px);margin-right:15px;}
#result .course-nav li:nth-child(2n){margin-right:0;}
#result .course-nav button {
	width:calc(100% - 0.6rem);
	position:relative;
	margin: 0.3rem;
	padding: 0.5rem 1rem;
	color:#fff;
	border: 2px #000 solid;
	border-radius: 20px;
	box-shadow:5px 5px 0 #000; 
	background:#fff;
	cursor:pointer;
}
#result .course-nav li:nth-child(1) button {background-color:#f7931e;}
#result .course-nav li:nth-child(2) button {background-color:#784a9a;}
#result .course-nav li:nth-child(3) button {background-color:#00a7ea;}
#result .course-nav li:nth-child(4) button {background-color:#ff2e8c;}
#result .course-nav li:nth-child(5) button {background-color:#009245;}
#result .course-nav li:nth-child(6) button {background-color:#fcee21;color:#000;}
#result .course-nav button:hover {
	bottom:-5px;
	right:-5px;
	opacity:0.85;
}
#result .course-section.active {
	display:block;
}
#result .spot:last-child {border-bottom:none; }
#result .spot img { width: 100%; max-width:400px; display:block;margin:0 auto;border-radius:8px; }
#result .spot-name { font-weight:bold; margin:0.5rem 0; }
#result .spot-desc {
	margin:0.3rem 0;
	color:#555;
}


.sns_share li{
	display:none;
}
.sns_share.active{
	min-height: 0;
	padding-top:80px;
	text-align:center;
	vertical-align:top;
	letter-spacing:-0.4em;
	background-position:center top;
}
.sns_share.active li{
	display:inline-block;
	margin:0 5px;
	text-align:center;
	letter-spacing:normal;
}
.sns_share.active li.url_copy{
	width: 40px;
	height: 40px;
	padding:0;
	position:relative;
	transition:all 0.3s linear;
	cursor:pointer;
	opacity:1;
}
.sns_share.active li.url_copy:hover{
	opacity:0.5;
}
.sns_share.active li.url_copy:before{
	width:6em;
	content:"CopyComplete!";
	font-family: "VT323", monospace;
	position:absolute;
	top:-2em;
	right:-3em;
	display:block;
	padding:2px 0 ;
	color:#fff;
	font-size:32px;
	text-align:center;
	border-radius:15px;
	background-color:#d9e021;
	opacity:0;
	transition:all 0.2s linear;
}
.sns_share.active li.url_copy.success:before{
	font-size:20px;
	background-color:#000;
	opacity:1;
}