@charset "utf-8";

/* common */
#choice_petfood { color: #45534E; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;; background: #fff;}
#choice_petfood h2,
#choice_petfood h3,
#choice_petfood h4 { padding: 0; margin: 0; border: none; font-weight: normal; background: none;}
html[data-browse-mode="P"] .for-sp { display: none !important;}
html[data-browse-mode="P"] #choice_petfood .choice_page_frame { width: 800px; margin: 0 auto; overflow: hidden; position: relative;}
html[data-browse-mode="S"] .for-pc { display: none !important;}
html[data-browse-mode="S"] #choice_petfood .choice_page_frame { margin: 0 3%; overflow: hidden; position: relative;}

/*---------------------------------
	▼ FRAME
---------------------------------*/
#choice_petfood.slide_page .choice_page_frame .step_block { width: 100%; background: #fff; transition: 0.5s; display: block;}
#choice_petfood.slide_page .choice_page_frame .step_block.blind { opacity: 0; z-index: -1; display: none;}

/*---------------------------------
	▼ DIAGNOSE
---------------------------------*/
/* Headline */
#choice_petfood .main_title { padding: 0; margin: 60px 0 40px 0; text-align: center; font-size: 24px; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;}
#choice_petfood .main_title span.sub { padding-bottom: 5px; font-size: 0.8em; color: #e87722; text-align: center; display: block;}
#choice_petfood .q_title { padding: 0; margin: 50px 0; border: none; font-size: 24px; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; text-align: center; background: none;}
#choice_petfood .q_title span.frame { font-size: 24px; display: inline-block; position: relative;}
#choice_petfood .q_title span.frame:before { content: ''; width: 50%; height: 1px; background: #ABBBB5; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%);}
html[data-browse-mode="S"] #choice_petfood .main_title { padding: 0; margin: 40px 0 20px 0; text-align: center; font-size: 18px;}#e87722
html[data-browse-mode="S"] #choice_petfood .q_title { margin: 20px 0 30px 0; font-size: 18px;}
html[data-browse-mode="S"] #choice_petfood .q_title span.frame { font-size: 18px;}

/* STEP */
#choice_petfood .step { padding: 60px 0 20px 0; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; text-align: center;}
#choice_petfood .step ul { width: 500px; margin: 0 auto; display: flex; justify-content: space-between; position: relative;}
#choice_petfood .step ul:before { content: ''; width: 100%; height: 1px; background: #e8772224; position: absolute; top: 50%; left: 0; z-index: 1;}
#choice_petfood .step li { width: 50px; height: 50px; border-radius: 50%; font-size: 24px; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; letter-spacing: 2px; line-height: 53px; background: #e8772224; z-index: 2;}
#choice_petfood .step li:last-child { margin-right: 0;}
#choice_petfood .step li.active { background: #e87722; color: #fff;}
#choice_petfood .step_notice { margin: 20px 0 0 0; text-align: center;}
html[data-browse-mode="S"] #choice_petfood .step { padding: 20px 0;}
html[data-browse-mode="S"] #choice_petfood .step ul { width: 76%;}
html[data-browse-mode="S"] #choice_petfood .step li { width: 40px; height: 40px; font-size: 20px; line-height: 41px;}

/* required */
#choice_petfood .req { width: 7px; height: 7px; border-radius: 50%; font-size: 0 !important; vertical-align: middle; display: inline-block; background: #e87722;}
#choice_petfood .q_title span.frame .req { position: absolute; top: calc(50% - 3px); right: -15px;}
#choice_petfood .step_notice .req { margin: 0 10px 0 0;}

/* checkbox */
#choice_petfood .check_area label:nth-child(2n) { margin-right: 0;}
#choice_petfood .checkbox input { display: none;}
#choice_petfood .checkbox { width: 100%; margin: 0 0 15px 0; transition: all 0.5s linear; display: inline-block; cursor: pointer;}
#choice_petfood .check_area label span { padding: 18px 0 18px 50px; border-radius: 3px; background: #e8772224; font-size: 1.1em; position: relative; display: block; transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000);}
#choice_petfood .check_area label:hover span { background: #e87723d9;}
#choice_petfood .check_area label span::before { content: ""; width: 25px; height: 25px; border-radius: 3px; display: block; position: absolute; top: calc(50% - 12.5px); left: 15px; background: #FFF;}
#choice_petfood .check_area label span::after  { content: ""; width: 10px; height: 14px; border-bottom: 3px solid #e87722; border-right: 3px solid #e87722; display: block; position: absolute; top: calc(50% - 9px); left: 23px; transform: rotate(40deg); opacity: 0;}
#choice_petfood .check_area input[type="checkbox"]:checked + span::after,
#choice_petfood .check_area input[type="radio"]:checked + span::after { opacity: 1;}
#choice_petfood .check_area input[type="checkbox"]:checked + span,
#choice_petfood .check_area input[type="radio"]:checked + span { background: #e87722; color: #fff;}
#choice_petfood .input_notice { font-size: 12px; text-align: center; transition: 0.3s;}
#choice_petfood .input_notice.active { color: #ff0000;}
html[data-browse-mode="P"] #choice_petfood .check_area { display: flex; flex-wrap: wrap; justify-content: space-between;}
html[data-browse-mode="P"] #choice_petfood .check_area label { width: 49%; margin: 0 0 20px 0;}
html[data-browse-mode="S"] #choice_petfood .check_area label span { padding: 15px 0 15px 50px;}

/* input */
#choice_petfood .input_text,
#choice_petfood .input_select { text-align: center;}
#choice_petfood input[type="text"],
#choice_petfood select { width: 500px; margin: 10px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 15px; vertical-align: middle; outline: none; box-sizing: border-box; position: relative;}
html[data-browse-mode="S"] #choice_petfood input[type="text"] { width: 100%;}
html[data-browse-mode="S"] #choice_petfood #step02 input[type="text"] { width: 80%;}
html[data-browse-mode="S"] #choice_petfood .input_select { position: relative;}
html[data-browse-mode="S"] #choice_petfood .input_select::after { content: ''; width: 8px; height: 8px; border-top: 2px solid #cdcdcd; border-right: 2px solid #cdcdcd; -webkit-transform: rotate(135deg); transform: rotate(135deg); position: absolute; right: 15px; top: calc(50% - 4px);}
html[data-browse-mode="S"] #choice_petfood select { width: 100%; color: #45534E; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none;}

/* Next */
#choice_petfood .btn_bace { margin: 50px 0; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; text-align: center; display: block;}
#choice_petfood .btn_next { width: 500px; padding: 12px 0 12px 10px; border-radius: 100px; border: none; text-align: center; letter-spacing: 1px; position: relative; display: inline-block; overflow: hidden; transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); font-size: 1.5em; background: #e87722; color: #fff; cursor: none;}
#choice_petfood .btn_next span { position: relative; z-index: 1;}
#choice_petfood .btn_next:before { content: ''; width: 35px; height: 35px; background: #fff; border-radius: 50%; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 10px rgba(179, 145, 103, 0.5); transition: all 500ms linear;}
#choice_petfood .btn_next:after { content: ''; width: 9px; height: 9px; border: solid #e87722; border-width: 1px 1px 0 0; position: absolute; left: 18px; top: 48%; transform: rotate(45deg) translateY(-50%); transition: all 500ms linear;}
#choice_petfood .btn_next.active { background: #; color: #fff; cursor: pointer;}
#choice_petfood .btn_next.active:hover  { background: #D6B9AD;}
#choice_petfood .btn_next.active:before { background: #fff;}
#choice_petfood .btn_next.active:hover:before { background: #F6EFED;}
#choice_petfood .btn_next.active:after { border: solid #e87722; border-width: 1px 1px 0 0;}
html[data-browse-mode="S"] #choice_petfood .btn_next { width: 100%; font-size: 1.3em;}

/* Back */
#choice_petfood .btn_back { width: 200px; padding: 12px 0 12px 10px; margin: 50px 0 0 0; border: 1px solid #D2DCD9; border-radius: 100px; font-size: 1em; text-align: center; letter-spacing: 1px; position: relative; display: inline-block; overflow: hidden; transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); background: #fff; cursor: pointer;}
#choice_petfood .btn_back:before { content: ''; width: 35px; height: 35px; background: #fff; border-radius: 50%; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 10px rgba(179, 145, 103, 0.5); transition: all 500ms linear;}
#choice_petfood .btn_back:after  { content: ''; width: 9px; height: 9px; border: solid #e87722; border-width: 1px 1px 0 0; position: absolute; left: 18px; top: 48%; transform: rotate(45deg) translateY(-50%); transition: all 500ms linear;}
#choice_petfood .btn_back:after  { transform: rotate(-135deg); left: 25px; top: 42%;}
#choice_petfood .btn_back:hover  { background: #F2F5F5;}
html[data-browse-mode="S"] #choice_petfood .btn_back { width: 70%; margin: 20px 0 0 0; font-size: 1.3em;}

/* Retry */
#choice_petfood .btn_retry { width: 300px; padding: 12px 0 12px 10px; margin: 0; border: 1px solid #D2DCD9; border-radius: 100px; font-size: 1em; text-align: center; letter-spacing: 1px; position: relative; display: inline-block; overflow: hidden; transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); background: #fff; cursor: pointer;}
#choice_petfood .btn_retry:hover  { background: #F2F5F5;}
html[data-browse-mode="S"] #choice_petfood .btn_retry { width: 100%; font-size: 1.3em;}

/*---------------------------------
　▼ RESULT
---------------------------------*/
#choice_petfood #result * { color: #484343;}
#choice_petfood #result .g,
#choice_petfood #result .kg,
#choice_petfood #result .kcal { margin-left: 5px; font-size: 0.8em;}
#choice_petfood .design-headline { margin: 0 0 50px; text-align: center;}
#choice_petfood .design-headline h2 { margin: 0 auto; padding: 30px 0 0 0; font-size: 34px;  display: inline-block;}
#choice_petfood #result #birthday { margin: 10px 0; font-size: 20px; text-align: center;}
#choice_petfood #result_details { width: 600px; margin: 0 auto 50px; display: flex; justify-content: space-between;}
#choice_petfood #result_details .left-frame  { width: 320px;}
#choice_petfood #result_details .right-frame { width: 220px;}
#choice_petfood #result_details #pet_type { padding: 5px; margin: 0 0 10px 0; border-bottom: solid 2px #d8dddf; font-size: 13px; text-align: center;}
#choice_petfood #result_details #pet_type p.move  { margin-bottom: 5px; font-size: 16px; font-weight: bold; text-align: center;}
#choice_petfood #result_details #pet_type p.shape { font-size: 14px; font-weight: bold; text-align: center;}
#choice_petfood #result_details #dog_icon { margin: 0 0 30px 0; text-align: center;}
#choice_petfood #result_details .comment { font-size: 13px;}
#choice_petfood #result_details .name    { padding: 10px; border-radius: 30px; text-align: center; background: #e87722;}
#choice_petfood #result_details .result  { padding: 10px; font-size: 20px; font-weight: bold; text-align: center;}
#choice_petfood #result_details #data_allergy .result,
#choice_petfood #result_details #data_worries .result { font-size: 18px;}
#choice_petfood #food_list { display: flex; flex-wrap: wrap; justify-content: space-between;}
#choice_petfood #food_list ul { padding: 30px 20px 20px; border-radius: 6px; background: #fff; display: flex; justify-content: space-between;}
#choice_petfood #food_list .food-item { padding: 20px; margin: 0 0 30px 0; box-sizing: border-box; }
#choice_petfood #food_list .food-item .top { width: 40%;}
#choice_petfood #food_list .food-item .bottom { width: 55%; text-align: center;}
#choice_petfood #food_list .food-item .image  { margin: 0 0 10px 0;}
#choice_petfood #food_list .food-item .link a { padding: 6px 0; margin: 0 auto;  font-size: 20px; text-align: center; text-decoration: none; display: block; background: #f8bd24; color: #4A2F1B; box-sizing: border-box;}
#choice_petfood #food_list .food-item h3 { padding: 0; margin: 0 0 10px 0; font-size: 30px; text-align: center;}
#choice_petfood #food_list .food-item h4 { padding: 5px; margin: 0 0 10px 0; border-bottom: solid 2px #d8dddf; font-size: 30px; text-align: center;}
#choice_petfood #food_list .food-item .qty { margin: 0 auto 20px; font-size: 37px; font-weight: bold; border-bottom: #4A2F1B 1px solid; text-align: center; display: inline-block;}
#choice_petfood #food_list .food-item .needs { font-size: 20px; text-align: left;}
#choice_petfood #food_list .food-item.disable { background: #f0f0f0; position: relative;}
#choice_petfood #food_list .food-item.disable::after { content:'※アレルギー食品が含まれています。'; width: 100%; font-size: 18px; text-align: center; display: block; position: absolute; top: 346px; left: -205px; color: #B30B00;}
#choice_petfood #food_list .food-item.disable .link { display: none !important;}

html[data-browse-mode="S"] #choice_petfood #result_details { width: 100%; display: block;}
html[data-browse-mode="S"] #choice_petfood #result_details .left-frame  { width: 100%; margin-bottom: 30px;}
html[data-browse-mode="S"] #choice_petfood #result_details .right-frame { width: 100%;}
html[data-browse-mode="S"] #choice_petfood .design-headline { margin: 0 0 30px;}
html[data-browse-mode="S"] #choice_petfood .design-headline h2 { padding: 20px 0 0 0; font-size: 24px;}
html[data-browse-mode="S"] #choice_petfood #food_list .food-item { width: 100%; padding: 15px; margin: 0 0 15px 0;}
html[data-browse-mode="S"] #choice_petfood #food_list .food-item.disable::after { font-size: 18px; top: 17px; left:0; font-weight:bold;}
html[data-browse-mode="S"] #choice_petfood #food_list ul { padding: 30px 20px 20px; border-radius: 6px; background: #fff;  justify-content: space-between;display:block;}
html[data-browse-mode="S"] #choice_petfood #food_list .food-item .top { width: 100%;}
html[data-browse-mode="S"] #choice_petfood #food_list .food-item h3 { padding: 0; margin: 15px 0 10px 0; font-size: 21px; text-align: center;}
html[data-browse-mode="S"] #choice_petfood #food_list .food-item .bottom { text-align: center; width:100%;}
html[data-browse-mode="S"] #choice_petfood #food_list .food-item h4 { padding: 5px; margin: 0 0 10px 0; border-bottom: solid 2px #d8dddf; font-size: 20px; text-align: center;font-weight: 600;}

html[data-browse-mode="S"]#choice_petfood #food_list .food-item .needs { font-size: 1em; text-align:left;}