@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: "Yusei Magic", serif;
font-size:20px;
font-weight: 400;
text-align:left;
color:#000;
min-width:750px;
font-size-adjust: none;
text-size--adjust: none;
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

/*txt*/
p{ line-height:1.75em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight: 400;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*メイン*/
#content{ width: 100%; min-height: 100dvh; display: flex; align-items: center; justify-content: center; position: relative; overflow:hidden; z-index: 1;}
#content:after{ content: ""; width: 100vw; min-height: 100dvh; background: url("../images/bg.jpg") center center no-repeat; background-size: cover; position: fixed; left: 0; top: 0; z-index: -1;}
/*#content:after{ background: #fff;}*/

section{ width: 720px; min-height: calc(100dvh - 30px); margin: auto; padding: 30px; border-radius: 0; background: rgba(255,255,255,0.9); box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
.maincontent{ padding:0; margin:0 auto; width: 100%; text-align: center;}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em;}

/*fix_btn*/
#fix_btn{ position: fixed; right: 30px; bottom: 30px; margin: 0; z-index: 99;}
#fix_btn a{ display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; font-size: 0.8rem; line-height: 1.25em; background: #000; color: #fff; border-radius: 50%; transition: 0.3s;}
#fix_btn a:hover{ opacity: 0.7;}

/*BGM_switch*/
#BGM_switch{ display: none; position: fixed; left: 30px; top: 30px;; margin: 0; z-index: 99;}
#BGM_switch span{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 80px; font-size: 0.8rem; line-height: 1.25em; background: #000; color: #fff; border-radius: 50%; transition: 0.3s; cursor: pointer;}
#BGM_switch span:hover{ opacity: 0.7;}


/*form-parts*/
::placeholder{ color: #ccc; line-height: 1.25em;}
::-ms-input-placeholder{ color: #ccc; line-height: 1.25em;}
input[type=submit], button{ -webkit-appearance: none;}
input, textarea, select, option, button{ text-align: center; width:100%; padding: 0.5em; font-size: 1.4rem; line-height: 1em; box-sizing: border-box; outline: none; border: none; background: #fff; color: #000; font-family: "Yusei Magic", serif;}
textarea{ text-align: left; height: 10em;}
input[type=radio],
input[type=checkbox]{ width: auto; padding: 0;}
optgroup{ background: #000; color: #fff; text-align: center; font-style: normal;}
@media screen and (max-width:768px){
input, textarea, select, button{ padding: 0.5em; letter-spacing: 0;}
textarea{ height: 7.5em;}
}


/*faq_box*/
.faq_box{ display: none; align-items: center; justify-content: center;}
.faq_box.faq_box.active{ display: flex;}
.faq_box h2{ background: #000; color: #fff; text-align: center; border: 6px double #fff; font-size: 1.6rem; padding: 0.5em; margin-bottom: 30px;}
.faq_box .txt{ padding: 10px 0; border-top: 1px solid #000; border-bottom: 1px solid #000;}
.faq_box .txt p{ font-size: 1.25rem;}
.faq_box .txt p span.att{ display: block; font-size: 75%; line-height: 1.75em;}

.faq_box .form{ margin: 30px auto;}
.faq_box .form input,
.faq_box .form select{ border: 1px solid #ccc;}
.faq_box .form table{ width: 100%; border-collapse: separate; border-spacing: 4px;}
.faq_box .form table th{ width: 33.33%; text-align: center; background: #dedede; font-size: 1.2rem; line-height: 1em; padding: 0.5em 1em;}
.faq_box .form table td{ width: 66.66%; font-size: 1.2rem;}
.faq_box .form table td .birth{ display: flex; align-items: center; justify-content: space-between;}
.faq_box .form table td .birth span{ padding: 0 0.75em 0 0.25em}
.faq_box .form table td .birth span:last-child{ padding-right: 0;}
.faq_box .form h4{ margin: 0.75em 0 0.25em; font-size: 1.4rem; text-decoration: underline;}

.faq_box .form .blood ul{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.faq_box .form .blood ul li{ width: calc(100% - 20px); margin: 10px; font-size: 1.6rem; letter-spacing: 0.1em;}
.faq_box .form .blood ul li:last-child{ width: calc(100% - 20px);}
.faq_box .form .blood ul li a{ display: flex; align-items: center; justify-content: center; background: #000; color: #fff; width: 100%; height: 60px; border-radius: 60px; position: relative; z-index: 1; transition: 0.3s; overflow: hidden;}
.faq_box .form .blood ul li a:hover{ opacity: 0.7;}

.faq_box .form .recom_tit ul{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
.faq_box .form .recom_tit ul li{ width: 100%; margin: 8px auto; font-size: 1.2rem; letter-spacing: 0.1em;}
.faq_box .form .recom_tit ul li strong{ display: inline-block; margin: 0 0.25em 0 0; text-decoration: underline; font-size: 120%;}
.faq_box .form .recom_tit ul li a{ display: flex; align-items: center; justify-content: center; background: #000; color: #fff; width: 100%; height: 50px; border-radius: 60px; position: relative; z-index: 1; transition: 0.3s; overflow: hidden;}
.faq_box .form .recom_tit ul li a:hover{ opacity: 0.7;}

.faq_box .faq_btn{ margin-top: 30px;}
.faq_box .faq_btn ul{ display: flex; align-items: center; justify-content: center;}
.faq_box .faq_btn ul li{ width: calc(50% - 20px); margin: 0 10px; font-size: 1.6rem; letter-spacing: 0.1em;}
.faq_box .faq_btn ul li a{ display: flex; align-items: center; justify-content: center; background: #000; color: #fff; width: 100%; height: 60px; border-radius: 60px; position: relative; z-index: 1; transition: 0.3s; overflow: hidden;}
.faq_box .faq_btn ul li:nth-child(1) a{ padding-left: 20px;}
.faq_box .faq_btn ul li:nth-child(2) a{ padding-right: 20px;}
.faq_box .faq_btn ul li:nth-child(1) a i{ font-size: 75%; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
.faq_box .faq_btn ul li:nth-child(2) a i{ font-size: 75%; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.faq_box .faq_btn ul li a:after{ content: ""; width: 100%; height: 50%; background: rgba(255,255,255,0.1); position: absolute; left: 0; top: 0; z-index: -1;}
.faq_box .faq_btn ul li a:hover{ opacity: 0.7;}



/*result_btn*/
#result_btn{ padding-bottom: 30px; position: relative;}
/*
#result_btn:after{ content: "※全ての質問に回答してね！"; text-decoration: underline; position: absolute; left: 0; right: 0; bottom: 0; font-size: 0.8rem; color: #000; transition: 0.3s;}
#result_btn.ok01.ok02.ok03:after{ opacity: 0;}
#result_btn a.faq008{ pointer-events: none; opacity: 0.3;}
#result_btn.ok01.ok02.ok03 a.faq008{ pointer-events: all; opacity: 1.0;}
#result_btn.ok01.ok02.ok03 a.faq008:hover{ opacity: 0.7;}
*/


/*start*/
#start figure.logo{ margin-bottom: 30px;}
#start figure.logo img{ height: 160px; position: relative;}
#start figure.thum img{ width: 220px; height: 220px; object-fit: cover;}
#start input[type=file]{ display: none; width: auto; margin: auto;}
#start .file_btn{ display: flex; align-items: center; justify-content: center; width: 280px; height: 48px; margin: 10px auto 0; background: #329632; color: #fff; border-radius: 40px; font-size: 1.2rem; cursor: pointer; transition: 0.3s;}
#start .file_btn:hover{ opacity: 0.7;}
#start .file_btn i{ font-size: 90%; margin-right: 0.5em;}
#start .file_name{ display: block; width: 100%; margin: 0 auto; border: none; font-size: 24px; overflow: hidden; color: #191919; text-decoration: underline;}

#start .start_btn{ margin-top: 30px;}
#start .start_btn ul li{ margin-top: 10px; font-size: 1.6rem; letter-spacing: 0.1em;}
#start .start_btn ul li a{ display: flex; align-items: center; justify-content: center; background: #000; color: #fff; width: 100%; height: 60px; border-radius: 60px; position: relative; z-index: 1; transition: 0.3s; overflow: hidden;}
#start .start_btn ul li a i{ font-size: 75%; margin-right: 0.5em;}
#start .start_btn ul li a:after{ content: ""; width: 100%; height: 50%; background: rgba(255,255,255,0.1); position: absolute; left: 0; top: 0; z-index: -1;}
#start .start_btn ul li a:hover{ opacity: 0.7;}



/*result_box*/
#result_box{ background: url("../images/food.png") #fac832; padding: 30px; position: relative;}
#result_box dl{ display: flex; align-items: center; justify-content: space-between;}
#result_box dl dt{ width: 300px; height: 300px; background: #fff; border: 6px solid #000; border-radius: 50%; position: relative; overflow: hidden;}
#result_box dl dt img{ /*min-width: 100%; min-height: 100%;*/ width: 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
#result_box dl dt img#prof_img.h100{ height: 100%; width: auto; max-width: inherit;}
#result_box dl dt img#prof_img.w100{ height: auto; max-height: inherit; width: 100%;}
/*
#result_box dl dt img{ width: 100%; height: 300px; object-fit: cover;}
*/
#result_box dl dt img.reload{ width: 100%; height: 300px; object-fit: cover;}
#result_box dl dd{ width: calc(100% - 320px);}
#result_box dl dd h4{ font-size: 1.2rem; margin: 0.5em 0 0.125em;}
#result_box dl dd ul li:first-child h4{ margin-top: 0;}
#result_box dl dd p{ background: rgba(255,255,255,0.5); font-size: 1.2rem; line-height: 1em; text-align: center; padding: 0.5em; margin: 0;}
#result_box dl dd p{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

#result_box .prof_txt{ border: 6px solid #000; background: #fff; margin: 30px auto; padding: 20px 10px; border-radius: 20px;}
#result_box .prof_txt p{ text-align: center; font-size: 1.2rem; letter-spacing: 0.05em;}
#result_box .prof_txt p span{ font-size: 125%; padding: 0 0.25em;}
#result_box .prof_txt p span#txt01_1{ padding-right: 0;}
#result_box .prof_txt p span#txt01_2{ padding: 0;}
#result_box .prof_txt p span.month{ padding-left: 0;}
#result_box .prof_txt p span.day{ padding-left: 0;}
#result_box .prof_txt p span{ background: linear-gradient(to bottom, rgba(250,200,50,0) 0%, rgba(250,200,50,0) 50%, rgba(250,200,50,0.5) 51%, rgba(250,200,50,0.5) 100%);}

#result_box .prof_recom h3{ text-align: center; font-size: 1.6rem;}
#result_box .prof_recom h3 span{ font-size: 125%; margin: 0 0.25em;}
#result_box .prof_recom ul{ margin-left: 60px;}
#result_box .prof_recom ul li{ background: rgba(255,255,255,0.5); margin-top: 10px; font-size: 1.2rem; letter-spacing: 0.1em; line-height: 1em; padding: 0.5em; position: relative;}
#result_box .prof_recom ul li span{ display: block; padding: 0 0 0.25em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#result_box .prof_recom ul li:before{ content: "１位"; background: #000; color: #fff; line-height: 1em; padding: 0.25em 0.25em; position: absolute; left: -60px; top: 50%; transform: translateY(-50%) rotate(-12.5deg);}
#result_box .prof_recom ul li:nth-child(2):before{ content: "２位";}
#result_box .prof_recom ul li:nth-child(3):before{ content: "３位";}

#result p.att{ font-size: 0.8rem; margin: 0.25em auto 0;}

#result button{ -webkit-appearance: none;}
#result button#download{ display: flex; align-items: center; justify-content: center; margin: 30px auto 0; border: none; background: #329632; color: #fff; font-size: 1.6rem; letter-spacing: 0.1em; line-height: 1em; font-family: "Yusei Magic", serif; padding: 0.5em 1.5em; cursor: pointer; position: relative; z-index: 1; transition: 0.3s; box-shadow:rgba(0, 0, 0, 0.25) 0 0 2px 1px; border-radius: 2em;}
#result button#download i{ line-height: 0; margin-right: 0.5em;}
#result button#download:after{ content: ""; width: 100%; height: 50%; background: rgba(255,255,255,0.1); position: absolute; left: 0; top: 0; z-index: -1;}
#result button#download:hover{ opacity: 0.7;}
#result #reborn a{ display: flex; align-items: center; justify-content: center; width: 240px; height: 40px; background: #000; color: #fff; margin: 20px auto 0; font-size: 0.8rem; line-height: 1em;}


/*capture*/
p#capture_btn{ text-decoration: underline; line-height: 1.5em; margin: 15px auto; cursor: pointer;}
p#capture_btn:hover{ text-decoration: none;}
#capture{ display: none; flex-direction: column; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; min-height: 100dvh; z-index: 9999;}
#capture.active{ display: flex;}
#capture_bg{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.9); position: absolute; left: 0; top: 0; z-index: -1;}
#capture_in img,
#capture_in canvas{ box-shadow:rgba(0, 0, 0, 0.5) 0 0 10px 5px;}
/*
#capture_in canvas:nth-child(n+2){ display: none;}
*/