@charset "UTF-8";

/*===========================
  reset Css
===========================*/
html, body, 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; }
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { display:block; }
ul ,li{ list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; border:0; font-size:100%; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

/*===========================
  base.css
===========================*/
body{
    font:16px "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
    box-sizing:border-box;
    letter-spacing:0.03em;
    line-height:1.4;
}

a:link,
a:visited,
a:hover,
a:active{ text-decoration:none; }

img{ width:100%; height:auto; vertical-align:bottom; }
	
.clearfix::after{ content:""; display:block; clear:both; }

/*===========================
    色指定
===========================*/
body,
a{ background:#edebe6; color:#303030; }

/* normal (black) */
.pagenav_line ul li.on{ background-image:linear-gradient(-45deg,#8f8f8f 25%,#666666 25%,#666666 50%, #8f8f8f 50%,#8f8f8f 75%,#666666 75%,#666666); }
.pagenav_line ul li::after{ background-color:#303030; }
.faq_box .title{ color:#666666; }
.faq_box .title span::before{ background:#666666; }
ul.rclist_03 li.on{ border-color:#989898; }
.ico_request{ background:#c5bfaf; }

/*===========================
    common
===========================*/
/*  btn
===========================*/
.next_btn{ display:inline-block; margin:0 auto; padding:18px 0; background-repeat:no-repeat; background-position:right 28px center; background-size:12px auto; background-color:#ffffff; border:none; border-radius:50px; box-sizing:border-box; font-size:16px; position:relative; }

.next_btn span{ width:25px; height:25px; content:""; display:block; background:url("../img/arrow_circle.svg") no-repeat 0 0 / 100% auto; position:absolute; top:15px; right:10px; }
.next_btn span::before{ width:25px; height:8px; content:""; display:block; background:url("../img/arrow_black_right.svg") no-repeat 0 0 / 100% auto; position:absolute; top:9px; right:9px; }

@media screen and (min-width:769px){ /* hover PC */
    .next_btn:hover span{ animation:0.3s linear nbhover1; }
    .next_btn:hover span::before{ animation:0.5s ease-out nbhover2; transform-origin:left center; }
}
@keyframes nbhover1{
    0%{ opacity:0; }
    100%{ opacity:1; }
}
@keyframes nbhover2{
    0%{ transform:scaleX(0); }
    50%{ transform:scaleX(0); }
    100%{ transform:scaleX(1); }
}

/*  backlink
===========================*/
.backlink{ position:absolute; top:16px; left:0; }
.backlink a{ padding:0 0 0 44px; font-size:12px; font-weight:bold; color:#666666; position:relative; }

.backlink span{ width:25px; height:25px; content:""; display:block; background:url("../img/arrow_circle.svg") no-repeat 0 0 / 100% auto; position:absolute; top:-5px; left:0; }
.backlink span::before{ width:25px; height:8px; content:""; display:block; background:url("../img/arrow_black_left.svg") no-repeat 0 0 / 100% auto; position:absolute; top:9px; left:9px; }

@media screen and (min-width:769px){ /* hover PC */
    .backlink:hover span{ animation:0.3s linear blhover1; }
    .backlink:hover span::before{ animation:0.6s ease-out blhover2; transform-origin:right center; }
}
@keyframes blhover1{
    0%{ opacity:0; }
    100%{ opacity:1; }
}
@keyframes blhover2{
    0%{ transform:scaleX(0); }
    50%{ transform:scaleX(0); }
    100%{ transform:scaleX(1); }
}
	
/*  form
===================================*/
input,
textarea{ -webkit-appearance:none; -moz-appearance:none; appearance:none; border:none; border-radius:10px; box-sizing:border-box; font-size:16px; }
input{ line-height:1; }
textarea{ height:10em; line-height:1.6; }
input[type=checkbox],
input[type=radio]{ width:auto; min-width:auto; padding:0; margin:0 5px 0 0; vertical-align:1px; }
@media all and (-ms-high-contrast: none){ /* ieのみ*/
	input[type=checkbox],
	input[type=radio]{ vertical-align:middle; }
}
input[type=file]{ padding:0; border:none; font-size:14px; line-height:1; vertical-align:middle; }
input[type=button]{ width:auto; }
label{ -webkit-tap-highlight-color:transparent; }
select{ max-width:100%; -webkit-appearance:none; -moz-appearance:none; appearance:none; padding:13px 30px 15px 19px; background:url(../img/ico_arrow_selectbutton.svg) no-repeat right 8px center / 6px auto #ffffff; border:#bdbdbd 1px solid; border-radius:0; font-size:16px; }
select::-ms-expand{ display:none; }
.ico_request{ display:inline-block; margin:0 12px 0 0; padding:3px 10px; font-size:12px; font-weight:normal; color:#ffffff; line-height:1; vertical-align:middle; }
/* Placeholder */
input::placeholder{ color:#b7b7b7; }
input:-ms-input-placeholder{ color:#b7b7b7; } /* IE */
input::-ms-input-placeholder{ color:#b7b7b7; } /* Edge */
/* outline */
input:focus,
select:focus,
textarea:focus{ box-shadow:0 0 0 2px #efefef; outline:none; }
	
/*  loading
===================================*/
#loading{ width:100vw; height:100vh; background:rgba(255,255,255,0.8); position:fixed; top:0; left:0; }
body.loadingfix{ width:100%; position:fixed; top:0; left:0; }
/* アニメーション */
.loader,
.loader:before,
.loader:after{ border-radius:50%; width:2.5em; height:2.5em; -webkit-animation-fill-mode:both; animation-fill-mode: both; -webkit-animation:load7 1.8s infinite ease-in-out; animation:load7 1.8s infinite ease-in-out; }
.loader{ color:#8f8f8f; font-size:10px; margin:45vh auto; position:relative; text-indent:-9999em; -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); -webkit-animation-delay:-0.16s; animation-delay:-0.16s; }
.loader:before,
.loader:after{ content:''; position:absolute; top:0; }
.loader:before{ left:-3.5em; -webkit-animation-delay:-0.32s; animation-delay:-0.32s; }
.loader:after{ left:3.5em; }
@-webkit-keyframes load7 {
  0%,
  80%,
  100%{ box-shadow: 0 2.5em 0 -1.3em; }
  40% { box-shadow: 0 2.5em 0 0; }
}
@keyframes load7 {
  0%,
  80%,
  100%{ box-shadow: 0 2.5em 0 -1.3em; }
  40%{ box-shadow: 0 2.5em 0 0; }
}

/*===========================
    move
===========================*/
/*--- タイトル波線 ---*/
.scrollMoveTit span::after{ animation:1.8s linear titleline; transform:translateX(910px); }
@keyframes titleline{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(910px); }
}

/*--- 拡大アクション（rclist_01） ---*/
.scrollMove li{
	transition:transform 0.5s;
	transform:scale(0);
	transform-origin:center center;
}
.scrollMoveAction{
	transform:scale(1) !important;
}

/* 回転 */
.scrollMoveRotation::after{
    animation:15s linear infinite rotation;
    transform-style:preserve-3d;
}
@keyframes rotation{
  0%{ transform:rotate(0); }
  100%{ transform:rotate(360deg); }
}

/* hover */
@media screen and (min-width:769px){ /* hover PC */
    ul.rclist_01 li label .img{ transition:transform 0.5s; }
    ul.rclist_01 li:hover label .img{ transform:scale(1.1); }
}

/*--- 下から表示アクション（rclist_02） ---*/
.scrollMove2 li{
    opacity:0;
}
.scrollMove2 li.scrollMoveAction2{
    animation:0.7s linear lift;
    opacity:1;
}
@keyframes lift{
    0%{ transform:translateY(0px); opacity:0; }
    50%{ transform:translateY(-15px); }
    100%{ transform:translateY(0px); opacity:1; }
}
.scrollMove2 li.sc2stop{ animation:0s; }

/* hover */
@media screen and (min-width:769px){ /* hover PC */
    .rclist_02 li:hover{ animation:1s ease-out rotationx; transform-origin:center center; transform:perspective(300px) rotateX(0deg); }
}
@keyframes rotationx{
    0%{ transform:rotateX(0); transform:scale(1); }
    30%{ transform:perspective(300px) rotateX(-13deg); }
    50%{ transform:perspective(300px) rotateX(3deg); }
    100%{ transform:rotateX(0); }
}

/*--- 左からスライド（rclist_03） ---*/
.scrollMove3 li{
	transition:transform 0.5s;
	transform:scaleX(0);
}
.scrollMove3 .scrollMoveAction3{
    transform-origin:left center;
	transform:scaleX(1);
}
.scrollMove3 li.sc3stop{ transform-origin:center center; }

/*--- ふわっと表示 ---*/
.scrollMove4 > div{
    opacity:0;
}
.scrollMove4 .scrollMoveAction4{
	animation:1.8s linear fadein;
    opacity:1;
}
@keyframes fadein{
    0%{ transform:translateY(0px); opacity:0; }
	40%{ transform:translateY(0px); opacity:0; }
    70%{ transform:translateY(-15px); }
    100%{ transform:translateY(0px); opacity:1; }
}

/*  hover */
@media screen and (min-width:769px){ /* hover PC */
    ul.rclist_03 li{ transition:transform 0.5s; }
    ul.rclist_03 li:hover{ transform:scale(1.05); transform-origin:center center; }
}

/*--- デフォルト動きなし（rclist_04） ---*/
@media screen and (min-width:769px){ /* hover PC */
    ul.rclist_04 li{ transition:transform 0.5s; }
    ul.rclist_04 li:hover{ transform:scale(1.1); transform-origin:center center; }
}

/*---------- PC版 ----------------------------------------------------------*/
@media screen and (min-width:769px){

    /*===========================
      base
    ===========================*/
    /*  contents
    ===========================*/
    #contents{ max-width:910px; margin:0 auto; padding:40px 20px 80px; }
	#contents.wide{ max-width:990px; box-sizing:border-box; }
    
    /*  win_close
    ===========================*/
    #win_close{ position:absolute; top:23px; right:20px; z-index:10; }
    #win_close a{ width:40px; height:40px; display:block; background:url("../img/btn_close_pc.svg") no-repeat center center / 35px auto #ffffff; border-radius:50%; box-shadow:0 0 5px rgba(0,0,0,0.1); }
    
    /*===========================
      parts
    ===========================*/
    /*  btn
    ===========================*/
    .next_btn{ width:275px; }
    
    /*  hover
    ===========================*/
    a:hover{
        -webkit-transition:0.2s ease-in-out;
        -moz-transition:0.2s ease-in-out;
        -o-transition:0.2s ease-in-out;
        transition:0.2s ease-in-out;
    }
    
    /*  form
    ===========================*/
    input,
    textarea{ width:100%; max-width:544px; padding:21px 20px; }

    /*===========================
      module
    ===========================*/
    /*  toppage
    ===========================*/
    .toppage{ padding:70px 0; text-align:center; }
    .toppage .title{ margin:0 0 30px; font-size:32px; }
    .toppage .topimg{ margin:0 0 30px; }
    .toppage .topimg img{ width:auto; max-height:300px; border-radius:15px; }
    .toppage .btn_area{ margin:30px 0 0; }
    
    /*  btn_area
    ===========================*/
    .btn_area{ margin:25px 0 0; text-align:center; position:relative; }
    
    /*  pagenav_line
    ===========================*/
    .pagenav_line ul{ width:100%; display:table; table-layout:fixed; padding:26px 0 0; }
    .pagenav_line ul li{ height:5px; display:table-cell; background:#e2ded5; position:relative; }
    .pagenav_line ul li::after{ width:1px; height:9px; content:" "; display:block; position:absolute; right:0; bottom:7px; }
    .pagenav_line ul li.on{ background-size:4px 4px; }
    .pagenav_line ul li span{ display:block; font-size:12px; font-weight:bold; position:absolute; right:-32px; bottom:15px; }
    .pagenav_line ul li::after,
    .pagenav_line ul li span{ display:none; }
    .pagenav_line ul li.present::after,
    .pagenav_line ul li.present span{ display:block; }
    
    /*  faq_box
    ===========================*/
    .faq_box{ padding:72px 0; border-radius:30px; }
    .faq_box .title{ margin:0 0 34px; text-align:center; font-size:24px; }
    .faq_box .title span{ display:inline-block; padding:0 2px 13px 4px; overflow:hidden; position:relative; }
    .faq_box .title span::before{ width:910px; height:2px; content:""; display:block; position:absolute; bottom:0; left:0; }
    /*.faq_box .title span::before{ width:910px; height:15px; content:""; display:block; background:url("../img/line_wave.svg") repeat-y 0 0 / 970px auto; position:absolute; bottom:0; left:0; }*/
    .faq_box .title span::after{ width:910px; height:2px; content:""; display:block; background:#edebe6; position:absolute; bottom:0; left:0; }
    .faq_box .main_img{ height:240px; margin:0 0 37px; text-align:center; }
    .faq_box .main_img img{ width:auto; max-height:100%; }
    
    /*-----  rclist_01 -----*/
    ul.rclist_01{ display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; margin:0 -0.9%; }
    ul.rclist_01 li{ width:235px; margin:25px 3% 0; position:relative; }
    ul.rclist_01 li input{ display:none; }
    ul.rclist_01 li label{ display:block; text-align:center; position:relative; }
    ul.rclist_01 li label .img{ width:235px; height:235px; display:block; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:135px; position:relative; }
    ul.rclist_01 li label .img::after{ width:106%; height:106%; content:""; background:url("../img/bg_octagon.png") no-repeat 0 0 / 100% auto; border-radius:100px; position:absolute; top:-3%; left:-3%; }
    ul.rclist_01 li label .txt{ display:inline-block; padding:13px 0 0; position:relative; z-index:20; }
    /*  on */
    ul.rclist_01 li.on label .img::before{ width:100%; height:100%; content:""; background:url("../img/ico_check.svg") no-repeat center center / 30px auto rgba(0,0,0,0.3); border-radius:110px; position:absolute; top:0; left:0; }
    ul.rclist_01 li.on label .img::after{ animation-play-state:paused; }    

    /*-----  rclist_02 -----*/
    ul.rclist_02{ display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; margin:0 -1.1%; }
    ul.rclist_02 li{ width:22.8%; margin:0 1.1% 30px; background:#ffffff; border-radius:15px; box-shadow:0 0 10px rgba(0,0,0,0.1); overflow:hidden; position:relative; }
    ul.rclist_02 li input{ display:none; }
    ul.rclist_02 li label{ display:block; text-align:center; box-sizing:border-box; position:relative; }
    ul.rclist_02 li label .img{ width:100%; height:126px; display:block; background-repeat:no-repeat; background-position:center center; background-size:100% auto; border-radius:3px 3px 0 0; }
    ul.rclist_02 li label::after{ width:30px; height:30px; content:" "; background-repeat:no-repeat; background-position:0 center; background-size:100% auto; position:absolute; top:12px; right:10px; }
    ul.rclist_02 li input[type=checkbox] + label::after{ background-image:url("../img/checkbox_off.svg"); }
    ul.rclist_02 li input[type=radio] + label::after{ background-image:url("../img/radio_off.svg"); }
    ul.rclist_02 li label .txt{ display:inline-block; padding:14px 5px; }
    /* on */
    ul.rclist_02 li input[type=checkbox]:checked + label::after{ background-image:url("../img/checkbox_on.svg"); }
    ul.rclist_02 li input[type=radio]:checked + label::after{ background-image:url("../img/radio_on.svg"); }
    
    /*-----  rclist_03 -----*/
    ul.rclist_03{ display:flex; display:-webkit-flex; display:-ms-flexbox; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; }
    ul.rclist_03 li{ width:49%; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; margin:13px 2% 0 0; background:#ffffff; border-radius:15px; box-sizing:border-box; overflow:hidden; position:relative; }
    ul.rclist_03 li:nth-child(2n){ margin-right:0; }
    ul.rclist_03 li input[type=checkbox],
    ul.rclist_03 li input[type=radio]{ display:none; }
    ul.rclist_03 li label{ width:100%; padding:25px 55px; text-align:center; background-repeat:no-repeat; background-position:15px center; background-size:27px auto; }
    ul.rclist_03 li input[type=checkbox] + label{ background-image:url("../img/checkbox_off.svg"); }
    ul.rclist_03 li input[type=radio] + label{ background-image:url("../img/radio_off.svg"); }
    /* on */
    ul.rclist_03 li input[type=checkbox]:checked + label{ background-image:url("../img/checkbox_on.svg"); }
    ul.rclist_03 li input[type=radio]:checked + label{ background-image:url("../img/radio_on.svg"); }
    
    /*-----  rclist_04 -----*/
    ul.rclist_04::after{ content:""; display:block; clear:both; }
    ul.rclist_04 li{ float:left; margin:6px 15px 6px 0; padding:0 23px 0 15px; background:#ffffff; border-radius:10px; box-sizing:border-box; overflow:hidden; }
    ul.rclist_04 li input[type=radio],
    ul.rclist_04 li input[type=checkbox]{ display:none; }
    ul.rclist_04 li label{ display:inline-block; padding:10px 0 10px 35px; background-repeat:no-repeat; background-position:0 center; background-size:23px auto; }
    ul.rclist_04 li input[type=checkbox] + label{ background-image:url("../img/checkbox_off.svg"); }
    ul.rclist_04 li input[type=radio] + label{ background-image:url("../img/radio_off.svg"); }
    /* on */
    ul.rclist_04 li.on input[type=checkbox] + label{ background-image:url("../img/checkbox_on.svg"); }
    ul.rclist_04 li.on input[type=radio] + label{ background-image:url("../img/radio_on.svg"); }
    
    /*-----  inputarea_01 -----*/
    .inputarea_01{ text-align:center; }
    
    /*-----  inputarea_02 -----*/
    dl.inputarea_02{ width:100%; margin:0 0 12px; }
    dl.inputarea_02:last-child{ margin-bottom:0; }
    dl.inputarea_02 dt{ width:197px; float:left; padding:20px 0 0; font-size:14px; font-weight:bold; }
    dl.inputarea_02 dd{ padding:0 0 0 197px; }
    
    /*  result_box
    ===========================*/
    .result_box{ margin:50px 0 0; padding:50px 100px; background:#ffffff; outline:#ffffff 20px solid; outline-offset:-20px; border:#191919 21px solid; color:#3f2800; }
    .result_box .title{ margin:0 0 30px; padding:14px 0; text-align:center; font-size:28px; font-weight:bold; color:#3f2800; }
    .result_box .title span{ padding:0 25px 3px; position:relative; }
    .result_box .title span::before,
    .result_box .title span::after{ width:32px; height:30px; content:""; display:block; background:url("../img/ico_naname1.svg") no-repeat 0 0 / 100% auto; position:absolute; left:-32px; bottom:0; }
    .result_box .title span::after{ background-image:url("../img/ico_naname2.svg"); left:auto; right:-32px; }
    .result_box .btn_area{ margin:0 0 87px; }
    .result_box div.btn_area:last-child{ margin-bottom:20px; }
    .result_box .btn_area .next_btn{ width:372px; background:#3f2800; font-size:18px; color:#ffffff; }
    .result_box .btn_area .next_btn span{ background-image:url("../img/arrow_circle_white.svg"); top:18px; }
    .result_box .btn_area .next_btn span::before{ background-image:url("../img/arrow_black_right_white.svg"); }
    
    /*-----  type_list -----*/
    .result_box ul.type_list{ width:100%; display:flex; display:-webkit-flex; display:-ms-flexbox; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; margin:0 0 75px; }
    .result_box ul.type_list li{ width:23.5%; margin:0 2% 0 0; text-align:center; box-sizing:border-box; font-size:14px; }
    .result_box ul.type_list li:nth-child(4n){ margin-right:0; }
    .result_box ul.type_list li span{ width:calc(100% / 4); height:145px; display:table-cell; padding:0 10px; background:#f7f4ed; border-radius:20px; vertical-align:middle; }
    .result_box ul.type_list li.on span{ background:#d8a5ae; box-shadow:0 0 15px #ecebea; font-size:16px; color:#ffffff; }
    
    /*-----  chart_box -----*/
    .result_box .chart_box{ width:100%; display:flex; display:-webkit-flex; display:-ms-flexbox; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; margin:0 0 60px; }
    .result_box .chart_box .tit{ margin:0 0 30px; padding:14px 0; text-align:center; font-size:21px; color:#3f2800; }
    .result_box .chart_box .tit span{ padding:0 20px; position:relative; }
    .result_box .chart_box .tit span::before,
    .result_box .chart_box .tit span::after{ width:26px; height:26px; content:""; display:block; background:url("../img/ico_naname1.svg") no-repeat 0 0 / 100% auto; position:absolute; left:-26px; bottom:0; }
    .result_box .chart_box .tit span::after{ background-image:url("../img/ico_naname2.svg"); left:auto; right:-26px; }
    .result_box .chart_box .chart_area{ width:50%; padding:0 30px 0 0; text-align:center; box-sizing:border-box; }
    .result_box .chart_box .goods_area{ width:50%; padding:0 20px 0 50px; text-align:center; box-sizing:border-box; }
    .result_box .chart_box .goods_area figure{ margin:0 0 30px; padding:20px 0 0; }
    .result_box .chart_box .goods_area .img p{ font-weight:bold; }
    
    /*-----  txt_list -----*/
    .result_box ul.txt_list{ margin:0 0 55px; }
    .result_box ul.txt_list li{ margin:0 0 25px; overflow:hidden; }
    .result_box ul.txt_list li figure{ width:20%; float:left; text-align:center; }
    .result_box ul.txt_list li figure img{ width:70%; }
    .result_box ul.txt_list li .txt_area{ width:77%; min-height:100px; float:right; padding:30px; background:#f7f4ed; border-radius:20px; box-sizing:border-box; position:relative; }
    .result_box ul.txt_list li .txt_area::before{ width:0; height:0; content:" "; border-top:10px solid transparent; border-right:10px solid #f7f4ed; border-bottom:10px solid transparent; position:absolute; top:30px; left:-10px; }
    .result_box ul.txt_list li .txt_area p{ line-height:1.6; }
    .result_box ul.txt_list li .txt_area .tit{ margin:0 0 10px; font-size:18px; font-weight:bold; line-height:1.4; }
}

/*---------- SP版 ----------------------------------------------------------*/
@media screen and (max-width: 768px){
    
    body{ font-size:14px; }
        
    /*===========================
      base
    ===========================*/
    /*  contents
    ===========================*/
    #contents{ max-width:500px; margin:0 auto; padding:18px 10px 50px; }
    
    /*  win_close
    ===========================*/
    #win_close{ position:absolute; top:8px; right:8px; z-index:10; }
    #win_close a{ width:40px; height:40px; display:block; background:url("../img/btn_close_sp.svg") no-repeat center center / 100% auto; }
    
    /*===========================
      parts
    ===========================*/
    /*  btn
    ===========================*/
    .next_btn{ width:250px; text-align:center; font-size:12px; font-weight:bold; }
    
    /*  link
    ===========================*/
    .backlink{ top:48px; font-size:12px; }
    
    /*  form
    ===========================*/
    input,
    textarea{ width:100%; padding:18px 15px; }
    
    /*===========================
      module
    ===========================*/
    /*  toppage
    ===========================*/
    .toppage{ margin:30px 0 0; text-align:center; }
    .toppage .title{ margin:0 0 30px; font-size:22px; }
    .toppage .topimg img{ width:auto; max-width:100%; max-height:200px; margin:0 0 20px; border-radius:15px; }
    
    /*  btn_area
    ===========================*/
    .btn_area{ padding:30px 0 0; text-align:right; position:relative; }
    .btn_area.top{ text-align:center; }
    
    /*  pagenav_line
    ===========================*/
    .pagenav_line{ margin:0 0 20px; padding:0 62px 0 0; }
    .pagenav_line ul{ width:100%; display:table; table-layout:fixed; padding:26px 0 0; }
    .pagenav_line ul li{ height:5px; display:table-cell; background:#e2ded5; position:relative; }
    .pagenav_line ul li::after{ width:1px; height:9px; content:" "; display:block; position:absolute; right:0; bottom:7px; }
    .pagenav_line ul li.on{ background-size:4px 4px; }
    .pagenav_line ul li span{ display:block; font-size:12px; font-weight:bold; position:absolute; right:-32px; bottom:15px; }
    .pagenav_line ul li::after,
    .pagenav_line ul li span{ display:none; }
    .pagenav_line ul li.present::after,
    .pagenav_line ul li.present span{ display:block; }
    
    /*  faq_box
    ===========================*/
    .faq_box{ padding:27px 0; }
    .faq_box .title{ margin:0 0 25px; text-align:center; font-size:17px; font-weight:bold; }
    .faq_box .title span{ display:inline-block; padding:0 2px 13px; overflow:hidden; position:relative; }
    .faq_box .title span::before{ width:800px; height:2px; content:""; display:block; background:#666666; position:absolute; bottom:0; left:0; }
    /*.faq_box .title span::before{ width:800px; height:15px; content:""; display:block; background:url("../img/line_wave.svg") repeat-y 0 0 / 910px auto; position:absolute; bottom:0; left:0; }*/
    .faq_box .title span::after{ width:800px; height:2px; content:""; display:block; background:#edebe6; position:absolute; bottom:0; left:0; }
    .faq_box .main_img{ width:100%; margin:0 0 37px; text-align:center; }
    .faq_box .main_img img{ width:auto; max-width:100%; }
    
    /*-----  rclist_01 -----*/
    ul.rclist_01{ display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; margin:0 -5px; }
    ul.rclist_01 li{ width:165px; margin:10px 5px 0; overflow:hidden; position:relative; }
    ul.rclist_01 li input{ display:none; }
    ul.rclist_01 li label{ display:block; text-align:center; position:relative; }
    ul.rclist_01 li label .img{ width:165px; height:165px; display:block; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:135px; position:relative; }
    ul.rclist_01 li label .img::after{ width:106%; height:106%; content:""; background:url("../img/bg_octagon.png") no-repeat 0 0 / 100% auto; border-radius:100px; position:absolute; top:-3%; left:-3%; }
    ul.rclist_01 li label .txt{ display:inline-block; padding:5px 0 0; position:relative; z-index:20; }
    /*  on */
    ul.rclist_01 li.on label .img::before{ width:100%; height:100%; content:""; background:url("../img/ico_check.svg") no-repeat center center / 30px auto rgba(0,0,0,0.3); border-radius:110px; position:absolute; top:0; left:0; }
    ul.rclist_01 li.on label .img::after{ animation-play-state:paused; }    

    /*-----  rclist_02 -----*/
    ul.rclist_02{ display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; margin:0 -10px; }
    ul.rclist_02 li{ width:160px; margin:20px 10px 0; background:#ffffff; border-radius:13px; box-shadow:0 0 10px rgba(0,0,0,0.1); overflow:hidden; position:relative; }
    ul.rclist_02 li input{ display:none; }
    ul.rclist_02 li label{ display:block; text-align:center; box-sizing:border-box; position:relative; }
    ul.rclist_02 li label .img{ width:100%; height:126px; display:block; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:3px 3px 0 0; }
    ul.rclist_02 li label::after{ width:27px; height:27px; content:" "; background-repeat:no-repeat; background-position:0 center; background-size:100% auto; position:absolute; top:12px; right:10px; }
    ul.rclist_02 li input[type=checkbox] + label::after{ background-image:url("../img/checkbox_off.svg"); }
    ul.rclist_02 li input[type=radio] + label::after{ background-image:url("../img/radio_off.svg"); }
    ul.rclist_02 li label .txt{ display:inline-block; padding:14px 5px; }
    /* on */
    ul.rclist_02 li input[type=checkbox]:checked + label::after{ background-image:url("../img/checkbox_on.svg"); }
    ul.rclist_02 li input[type=radio]:checked + label::after{ background-image:url("../img/radio_on.svg"); }
    
    /*-----  rclist_03 -----*/
    ul.rclist_03 li{ margin:13px 0 0; background:#ffffff; border-radius:10px; box-sizing:border-box; overflow:hidden; position:relative; }
    ul.rclist_03 li input[type=checkbox],
    ul.rclist_03 li input[type=radio]{ display:none; }
    ul.rclist_03 li label{ width:100%; display:block; padding:15px 47px; text-align:center; background-repeat:no-repeat; background-position:15px center; background-size:24px auto; box-sizing:border-box; }
    ul.rclist_03 li input[type=checkbox] + label{ background-image:url("../img/checkbox_off.svg"); }
    ul.rclist_03 li input[type=radio] + label{ background-image:url("../img/radio_off.svg"); }
    /* on */
    ul.rclist_03 li input[type=checkbox]:checked + label{ background-image:url("../img/checkbox_on.svg"); }
    ul.rclist_03 li input[type=radio]:checked + label{ background-image:url("../img/radio_on.svg"); }
    
    /*-----  rclist_04 -----*/
    ul.rclist_04::after{ content:""; display:block; clear:both; }
    ul.rclist_04 li{ float:left; margin:6px 15px 6px 0; padding:0 23px 0 15px; background:#ffffff; border-radius:10px; box-sizing:border-box; overflow:hidden; }
    ul.rclist_04 li input[type=radio],
    ul.rclist_04 li input[type=checkbox]{ display:none; }
    ul.rclist_04 li label{ display:inline-block; padding:10px 0 10px 35px; background-repeat:no-repeat; background-position:0 center; background-size:21px auto; }
    ul.rclist_04 li input[type=checkbox] + label{ background-image:url("../img/checkbox_off.svg"); }
    ul.rclist_04 li input[type=radio] + label{ background-image:url("../img/radio_off.svg"); }
    /* on */
    ul.rclist_04 li.on input[type=checkbox] + label{ background-image:url("../img/checkbox_on.svg"); }
    ul.rclist_04 li.on input[type=radio] + label{ background-image:url("../img/radio_on.svg"); }
    
    /*-----  inputarea_01 -----*/
    .inputarea_01{ text-align:center; }
    
    /*-----  inputarea_02 -----*/
    dl.inputarea_02{ width:100%; margin:0 0 14px; }
    dl.inputarea_02:last-child{ margin-bottom:0; }
    dl.inputarea_02 dt{ margin:0 0 8px; font-size:14px; font-weight:bold; }
    
    /*  result_box
    ===========================*/
    .result_box{ margin:50px 0 0; padding:35px 15px; background:#ffffff; border:#191919 2px solid; color:#3f2800; }
    .result_box .title{ margin:0 0 15px; padding:14px 32px; text-align:center; font-size:18px; font-weight:bold; color:#3f2800; }
    .result_box .title span{ padding:0 5px 3px; position:relative; }
    .result_box .title span::before,
    .result_box .title span::after{ width:32px; height:30px; content:""; display:block; background:url("../img/ico_naname1.svg") no-repeat 0 0 / 100% auto; position:absolute; left:-32px; bottom:0; }
    .result_box .title span::after{ background-image:url("../img/ico_naname2.svg"); left:auto; right:-32px; }
    .result_box .btn_area{ margin:0 0 70px; padding:0; text-align:center; }
    .result_box div.btn_area:last-child{ margin-bottom:20px; }
    .result_box .btn_area .next_btn{ width:273px; background:#3f2800; font-size:16px; font-weight:normal; color:#ffffff; }
    .result_box .btn_area .next_btn span{ background-image:url("../img/arrow_circle_white.svg"); top:18px; }
    .result_box .btn_area .next_btn span::before{ background-image:url("../img/arrow_black_right_white.svg"); }
    
    /*-----  type_list -----*/
    .result_box ul.type_list{ width:100%; display:flex; display:-webkit-flex; display:-ms-flexbox; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; margin:0 0 40px; }
    .result_box ul.type_list li{ width:49%; margin:0 2% 7px 0; text-align:center; box-sizing:border-box; font-size:14px; }
    .result_box ul.type_list li:nth-child(2n){ margin-right:0; }
    .result_box ul.type_list li span{ width:calc(100% / 4); height:75px; display:table-cell; padding:0 10px; background:#f7f4ed; border-radius:20px; font-size:11px; vertical-align:middle; }
    .result_box ul.type_list li.on span{ background:#d8a5ae; box-shadow:0 0 10px #edeceb; font-size:16px; color:#ffffff; }
    
    /*-----  chart_box -----*/
    .result_box .chart_box{ width:100%; margin:0 0 40px; }
    .result_box .chart_box .tit{ margin:0 0 30px; text-align:center; font-size:16px; font-weight:bold; color:#3f2800; }
    .result_box .chart_box .chart_area{ margin:0 0 40px; text-align:center; }
    .result_box .chart_box .goods_area{ text-align:center; }
    .result_box .chart_box .goods_area figure{ margin:0 0 15px; }
    
    /*-----  txt_list -----*/
    .result_box ul.txt_list{ margin:0 0 35px; }
    .result_box ul.txt_list li{ margin:0 0 25px; }
    .result_box ul.txt_list li figure{ margin:0 0 20px; text-align:center; }
    .result_box ul.txt_list li figure img{ width:40%; }
    .result_box ul.txt_list li .txt_area p{ line-height:1.6; }
    .result_box ul.txt_list li .txt_area .tit{ margin:0 0 17px; text-align:center; font-size:14px; font-weight:bold; line-height:1.4; }
    .result_box ul.txt_list li .txt_area .txt{ padding:30px; background:#f7f4ed; border-radius:20px; box-sizing:border-box; position:relative; }
    .result_box ul.txt_list li .txt_area .txt::before{ width:0; height:0; content:" "; margin:0 auto; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #f7f4ed; position:absolute; top:-10px; left:0; right:0; }
}