@charset "shift-jis";

/* ▼ぴったりチョコ診断▼ */
body {
	font-family: YuGothic, "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif !important;
	background-image: url(../../common_contents/choco_shindan/bg.jpg);
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: top;
}

#start,
.question,
.answer {
}
#start {
	/*background: #f9f7f7;*/
}
.question {
	/*background: #f9f7f7;*/
}
.answer {
	background: #f8cde347;
}
#shindan {
	background-color: #FFFFFF;
}
.shindan_block {
	max-width: 640px;
	/*width: 100%;*/
	margin: 20px auto;
	padding: 10px;
}
.shindan_block p,
.shindan_block h3 {
	text-align: center;
}
.shindan_block h3 {
	/*font-style: italic;*/
	color: #e43790;
	font-size: 140%;
	font-weight: bold;
	margin-top: 0;
}


/* btn */
a.st_btn,
a.q_btn,
span.a_btn,
span.a_link_retry {
	width: 90%;
	display: block;
	text-align: center;
	background: #e43790;
	margin: 20px auto;
	padding: 10px 0px;
	font-size: 140%;
	text-decoration: none;
	color: #fff;
	border-radius: 10px;
}
a:hover.st_btn,
a:hover.q_btn,
span:hover.a_link,
span:hover.a_link_retry{
	background: #EB69AC;
	color: #FFFFFF;
}

/* start */
a.st_btn {
	font-size: 200%;
	/*font-style: italic;*/
	font-weight: bold;
}


/* question */
a.q_btn {
	font-size: 100% !important;
	text-align: left;
	padding-left: 15px;
	padding-right: 15px;
}
.number {
	background-color: white;
	color: #e43790;
	padding: 3px 8px;
	border-radius: 50%;
	/*margin-left: 15px;*/
	margin-right: 8px;
	width: 1em;
	display: inline-block;
	text-align: center;
	font-weight: bold;
}

/* answer */
.strong {
	font-size: 120%;
}
.answer .strong {
	display: block;
}
.answer p {
	text-align: left !important;
}
.a_link,
.a_link_retry {
	text-decoration: none;
}
.a_img {
	max-width: 80%;
	width: 300px;
	margin: 20px auto;
	display: block;
	border: #FFFFFF 4px solid;
}
.a_btn{
}
.a_link_retry span {
    background: #AB296C !important;
}
.a_link_retry span:hover {
    background: #D087AD !important;
}

#debug {
	position: absolute;
	top: 10px;
	right: 10px;
	background: gray;
	padding: 10px;
	/*display: none;*/
}
#debug p {
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}

/* △ぴったりチョコ診断△ */




body {
	font-family: "Hiragino Kaku Gothic ProN", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#wrapper {
}


/* ヘッダー */
header {
	width: 100%;
}
#header__inner {
	max-width: 768px;
	margin: 0 auto;
	padding: 8px;
	overflow: hidden;
}
#header__logo {
	float: left;
	margin: 0;
	padding: 0 0 0 4px;
	box-sizing: border-box;
}
#header__deliver {
	float: right;
	margin: 0;
	padding: 0 0 0 0;
	box-sizing: border-box;
}

#header__second-nav {
	clear: both;
	margin: 0;
	padding: 12px 10px 12px 0;
	text-align: right;
}
#header__second-nav > li {
	display: inline-block;
	margin: 0 8px 0 0;
}
#header__second-nav > li:last-child {
	margin: 0;
}
#header__second-nav > li > a {
	display: block;
	font-size: 12px;
	text-decoration: none;
	color: #30241E;
	padding: 5px 0 5px 20px;
	background-position: left center;
	background-repeat: no-repeat;
}
#header__second-nav > li > a:hover {
	color: #C3491E;
}
#header__second-nav > li:nth-child(1) > a {
	background-image: url(header_icon_1.png);
}
#header__second-nav > li:nth-child(2) > a {
	background-image: url(header_icon_2.png);
}
#header__second-nav > li:nth-child(3) > a {
	background-image: url(header_icon_3.png);
}

/* メイン */
main {
	display: block;
	margin: 200px auto 0;
	width: 100%;
	line-height: 1.6 !important;
	padding-top: 5px;
	background-color: #FFFFFF;
}

/* フッター */
footer {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 0 10px 0;
	border-top: 1px solid #4E3A18;
	text-align: center;
}

/* パンくず */
.topic-path {
	margin: 0 10px 12px 10px;
	padding: 8px 10px;
	background: #EEEEEE;
	border-radius: 4px;
}
.topic-path > li {
	display: inline-block;
	font-size: 12px;
	color: #30241E;
}
.topic-path > li::after {
	content: ">";
	margin: 0 0 0 8px;
}
.topic-path > li:last-child::after {
	content: none;
}
.topic-path > li > a {
	color: #30241E;
}
.topic-path > li > a:hover {
	color: #C3491E;
}

/* インナー */
.faq__inner {
	padding: 0 10px;
}

/* タイトル */
.faq__title {
	position: relative;
	left: 0px;
	top: 0px;
	background: #fff8e4;
	margin: 0;
	padding: 10px 20px 10px 30px;
	border-bottom: 1px solid #DFD5D2;
	font-size: 18px;
	font-weight: bold;
	color: #4E3A18;
}
.faq__title::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 0;
	bottom: 0;
	margin: auto;
	display: block;
	width: 6px;
	height: 16px;
	overflow: hidden;
	background: #ff9f00;
}
.faq-block__title {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #4E3A18;
	margin: 20px 0;
	padding: 0;
}

/* 質問と回答 */
.faq-answer-list__title {
	position: relative;
	left: 0px;
	top: 0px;
	padding: 14px 40px 14px 46px;
	margin: 10px 0 0 0;
	font-size: 16px;
	color: #30241e;
	border-top: 1px solid #d9d4c6;
	background-color: #FFF8E4;
	background-position: right 9px center;
	background-repeat: no-repeat;
	background-image: url(answer_icon_open.png);
	cursor: pointer;
}
.faq-answer-list__title.faq-answer-list__title--open {
	background-image: url(answer_icon_close.png);
}
.faq-answer-list__title:hover {
	opacity: 0.8;
	color: #C3491E;
}
.faq-answer-list__title::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 32px;
	height: 32px;
}
#q01.faq-answer-list__title::before {
	content: url(genre_icon_q1.png);
}
#q02.faq-answer-list__title::before {
	content: url(genre_icon_q2.png);
}
#q03.faq-answer-list__title::before {
	content: url(genre_icon_q3.png);
}
#q04.faq-answer-list__title::before {
	content: url(genre_icon_q4.png);
}
#q05.faq-answer-list__title::before {
	content: url(genre_icon_q5.png);
}
#q06.faq-answer-list__title::before {
	content: url(genre_icon_q6.png);
}
#q07.faq-answer-list__title::before {
	content: url(genre_icon_q7.png);
}
#q08.faq-answer-list__title::before {
	content: url(genre_icon_q8.png);
}
#q09.faq-answer-list__title::before {
	content: url(genre_icon_q9.png);
}
.faq-answer-list__box {
	padding: 8px 0 0 0;
	display: none;
	overflow: hidden;
}
.faq-answer-list__box > .faq-answer-list__item:last-child {
	margin: 0;
}
.faq-answer-list__item {
	margin: 0 0 8px 0;
	padding: 0;
}
.faq-answer-list__item > dt {
	position: relative;
	left: 0px;
	top: 0px;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.4;
	color: #30241E;
	background-color: #f5f3f3;
	margin: 0;
	padding: 12px 40px 12px 38px;
	cursor: pointer;
	background-position: right 9px center;
	background-repeat: no-repeat;
	background-image: url(answer_icon_open.png);
}
.faq-answer-list__item > dt:hover {
	opacity: 0.8;
	color: #C3491E;
}
.faq-answer-list__item > dt.faq-answer-list__item-title--open {
	background-color: #fdc05a;
	background-image: url(answer_icon_close.png);
}
.faq-answer-list__item > dd {
	position: relative;
	left: 0px;
	top: 0px;
	display:none;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.6;
	color: #30241E;
	margin: 0;
	padding: 12px 10px 12px 38px;
	border-bottom: dashed 1px #E5E5E5;
}
.faq-answer-list__item > dd > a,
.faq-answer-list__item-box-pc > a,
.faq-answer-list__item-box-sp > a {
	color: #30241E;
}
.faq-answer-list__item > dd > a:hover,
.faq-answer-list__item-box-pc > a:hover,
.faq-answer-list__item-box-sp > a:hover {
	color: #C3491E;
}
.faq-answer-list__item > dd > img,
.faq-answer-list__item-box-pc > img,
.faq-answer-list__item-box-sp > img {
	border: 1px solid #E5E5E5;
	max-width: 100%;
}
.faq-answer-list__item-icon-question {
	position: absolute;
	left: 10px;
	top: 10px;
	display: block;
	font-size: 16px;
	font-weight: bold;
	line-height: 22px;
	text-align: center;
	color: #FFFFFF;
	background: #4E3A18;
	border-radius: 50%;
	width: 22px;
	height: 22px;
}
.faq-answer-list__item-icon-answer {
	position: absolute;
	left: 10px;
	top: 10px;
	display: block;
	font-size: 16px;
	font-weight: bold;
	line-height: 22px;
	text-align: center;
	color: #FFFFFF;
	background: #FF9F00;
	border-radius: 50%;
	width: 22px;
	height: 22px;
}

/* ページトップ */
.pagetop {
	text-align: right;
	margin: 20px 0 20px 0;
}
.pagetop > a > img {
	vertical-align: top;
}