@charset "UTF-8";
body { -webkit-text-size-adjust: 100%; /* テキストサイズバグ回避 */ -webkit-tap-highlight-color: transparent; font-size: 87.5%; font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; color: #666666; letter-spacing: 0.1em; line-height: 1.75em; margin: 0 !important; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -.5em; }

sub { bottom: -.1em; }

.center { text-align: center; }

.bold { font-weight: 700; }

.caption { font-size: 0.8em; }

img { width: 100%; height: auto; }

.mt10 { margin-top: 10px; }

.mt20 { margin-top: 20px; }

.mt30 { margin-top: 30px; }

.mt40 { margin-top: 40px; }

.mt50 { margin-top: 50px; }

.mt60 { margin-top: 60px; }

.mt70 { margin-top: 70px; }

.mt80 { margin-top: 80px; }

.list h3 { margin: 0 auto; }

.qa_inner dl dt, #result section, #result section a, .detail .img_products, .detail .price, .detail .conditions { margin: 10px auto; }

.txtBox, .list ul, a.ext { margin: 20px auto; }

.list, #result { margin: 40px auto; }

.detail section { margin: 60px auto; }

#result section a:after { font-family: "Font Awesome 5 Free"; font-weight: 900; }

article { width: 100vw; }
article > section { width: 90%; margin: 60px auto; }
article > section:nth-of-type(1) { width: 90%; margin: 0 auto; }

p { margin: 10px auto; font-size: 1.0rem; line-height: 1.75em; }

.UL { border-bottom: 1px solid #f0b6d0; }

.txtBox { width: 100%; }

.fontP { color: #f0b6d0; }

h2 { font-family: "FOT-筑紫B丸ゴシック Std M"; text-align: center; font-size: 5vmin; line-height: 2.0em; }

h3 { font-family: "FOT-筑紫B丸ゴシック Std M"; }

.list { width: 100%; font-family: "FOT-筑紫B丸ゴシック Std M"; border: 2px solid #f0b6d0; border-radius: 20px; }
.list h3 { font-size: 4vmin; display: table; min-width: 50%; text-align: center; margin-top: -12px; background-color: #ffffff; }
.list ul { width: 90%; list-style-type: disc; list-style-position: inside; }
.list ul li { padding-left: 1em; text-indent: -1.4em; }

.quiz h3 { text-align: center; margin-top: 20px; font-size: 4.3vmin; }

.qa_inner dl, .st_inner dl { margin: 0; padding-top: 15px; }

.qa_inner dl dt { font-size: 1em; line-height: 20px; background-color: #f0b6d0; padding: 15px; width: 60%; border-radius: 4px; text-align: center; cursor: pointer; }

.qa_inner dl dd { font-size: 1em; line-height: 23px; padding: 15px; display: none; }

.shareList { list-style: none; display: flex; justify-content: center; flex-wrap: nowrap; padding: 0; }

.shareList__item { height: 30px; line-height: 30px; min-width: 80px; text-align: center; margin: 9px 0 0 5px; }

.shareList__link { display: block; color: #ffffff; text-decoration: none; transition: .2s; border: 2px solid; border-radius: 5px; }

.shareList__link.icon-twitter { background: #55acee; }

.shareList__link.icon-twitter:hover { color: #55acee; background: #ffffff; border-color: #55acee; }

.shareList__link.icon-facebook { background: #3B5998; }

.shareList__link.icon-facebook:hover { color: #3B5998; background: #ffffff; border-color: #3B5998; }

.shareList__link.icon-line { background: #1dcd00; }

.shareList__link.icon-line:hover { color: #1dcd00; background: #ffffff; border-color: #1dcd00; }

/* ---------- 必須CSS ここから ------------ */
#result [class*="hidden-"] { display: none; }

/* ---------- 必須CSS ここまで ------------ */
.selectBox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; padding: 40px 0; border-top: 4px solid rgba(240, 182, 208, 0.5); border-bottom: 4px solid rgba(240, 182, 208, 0.5); }
.selectBox :nth-of-type(-n+2) { /*@include flex-basis(100%);*/ width: 100%; }
.selectBox label:nth-of-type(2) { border: 4px solid #f0b6d0; }
.selectBox label { width: 48%; font-size: 3.0vmin; line-height: 1.75em; margin-top: 5px; display: table; vertical-align: middle; }
.selectBox label :nth-of-type(-n+2) { width: 100% !important; }

input[type=radio], input[type=checkbox] { display: none; }

.radio, .checkbox { box-sizing: border-box; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; position: relative; display: inline-block; padding: 10px 2px 10px 28px; border-radius: 8px; background-color: #F0F0F0; vertical-align: middle; cursor: pointer; }
.radio:after, .checkbox:after { -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; position: absolute; top: 50%; left: 5px; display: block; margin-top: -10px; width: 16px; height: 16px; border: 2px solid #f0b6d0; border-radius: 6px; content: ''; }

.radio:before { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; position: absolute; top: 50%; left: 10px; display: block; margin-top: -5px; width: 10px; height: 10px; border-radius: 50%; background-color: #f0b6d0; content: ''; opacity: 0; }
input[type=radio]:checked + .radio:before { opacity: 1; }

.checkbox:before { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; position: absolute; top: 50%; left: 11px; display: block; margin-top: -7px; width: 5px; height: 9px; border-right: 3px solid #f0b6d0; border-bottom: 3px solid #f0b6d0; content: ''; opacity: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
input[type=checkbox]:checked + .checkbox:before { opacity: 1; }

#result { padding: 40px 0; border-bottom: 4px solid rgba(240, 182, 208, 0.5); }
#result section { background-color: #f0b6d0; border-radius: 10px; width: 100%; }
#result section a { width: 90%; padding: 8px 14px 8px 5px; position: relative; display: table; text-decoration: none; color: #666666; cursor: pointer; font-size: 0.9em; }
#result section a:after { content: "\f054"; position: absolute; right: 5px; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#result section .company { margin-left: 5px; display: table-cell; font-size: 0.7em; width: 41%; }

.detail { width: 100%; }
.detail section { width: 100%; padding: 60px 0; border-bottom: 4px solid rgba(240, 182, 208, 0.5); }
.detail h3 { font-size: 1.2em; }
.detail h3 + p.company { font-size: 0.8em; margin-top: 0; }
.detail .img_products { width: 100%; }
.detail .img_products p.caption { font-size: 0.8em; text-align: right; margin: 0; }
.detail .ttl { text-align: center; }
.detail .ttl h4 { color: #fc2428; font-size: 1.2em; }
.detail .ttl p { margin-top: 0; font-size: 0.8em; }
.detail .price { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; justify-content: space-around; -ms-flex-pack: space-around; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; width: 95%; text-align: center; }
.detail .conditions { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: flex-start; }
.detail .conditions p { font-size: 2vmin; color: #ffffff; background-color: #f0b6d0; border-radius: 5px; width: 47%; text-align: center; padding: 5px 2px; margin: 2px 1px; display: inline-block; }

a.ext { width: 84%; display: block; color: #ffffff; background-color: #f0b6d0; border-radius: 10px; text-align: center; padding: 10px; /*box-shadow: 0 -3px 0 0 #c14e68 inset;*/ font-weight: 700; text-decoration: none; outline: none; cursor: pointer; }
