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

/* Reset */
html{font-size: 62.5%; overflow-x: hidden; scroll-behavior: smooth; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;}
body{background: #f9ebec; color: #151515; line-height: 1.8; word-spacing: 0; font-size: 1.8rem; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; font-family: "秀英角ゴシック金 B", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "MS Pゴシック", "MS PGothic", Meiryo, sans-serif;}

*{margin: 0; padding: 0; box-sizing: border-box; border: 0;}
h1, h2, h3, h4, h5, h6{font-size: 100%;}
ol, ul{list-style: none;}
table{border-collapse: collapse; border-spacing: 0;}
th{text-align: left;}
a{color: inherit; text-decoration: none;}
img{vertical-align: bottom; max-width: 100%;}

@media (min-width: 768px){
    a[href^="tel:"]{pointer-events: none;}
    .only-sp{display: none;}
}

@media (max-width: 767px){
    .only-pc{display: none;}
    html{font-size: 2vw;}
}

@media print {
    body{color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
}

/* Header */
header{padding: 1rem 3rem; display: flex; align-items: center; background: #fff; position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 1000; line-height: 1;}
header a:nth-of-type(1){width: 11rem; margin-right: 2.4rem;}
header a:nth-of-type(2){width: 6rem;}
header img{width: 100%;}

@media (max-width: 767px){
    header{padding: 1.5rem 5%;}
    header a:nth-of-type(1){margin-right: 7%;}
}


/* Main */
.main{padding: 14rem 0 10rem; max-width: 1000px; margin: 0 auto; width: 90%;}

.btn-wrap{display: flex; justify-content: center; margin: 6rem auto 0;}
.btn-wrap a{width: 28rem; font-weight: bold; text-align: center; border-radius: 0.8rem; border: 2px solid #151515; padding: 1rem 0; display: block; margin: 0 1rem;}
.btn-wrap a:hover{background: #151515; color: #fff;}

.cap {font-size:10px;}

@media (max-width: 767px){
    .btn-wrap{flex-wrap: wrap;}
    .btn-wrap a:not(:last-of-type){margin: 0 0 1.5rem;}
}

/* Top */
.top-tit{text-align: center; padding: 0 0 5rem;}
.top-frm{background: #fff; text-align: center; padding: 6rem 3rem 8rem; border-radius: 1rem; font-weight: bold;}
.top-txt{font-size: 2.4rem; margin: 0 0 5rem;}
.top-btn{font-size: 2.6rem; line-height: 1.3; color: #fff; background: #cd0010; border-radius: 0.8rem; width: 41.5rem; margin: 0 auto; padding: 3.1rem 0; display: block; box-shadow: 0 0.6rem 0 #7e000a; transition: .3s;}
.top-btn:after{content: ''; border: solid #fff; border-width: 0 0.2rem 0.2rem 0; display: inline-block; padding: 0.4rem; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); display: inline-block; margin: 0 0 0 1rem; position: relative; top: -0.5rem;}
.top-btn:hover{transform: translateY(0.6rem); box-shadow: 0 0 0 #7e000a;}

@media (max-width: 767px){
    .top-tit{padding: 0 3% 3rem;}
    .top-frm{padding: 5rem 0;}
    .top-txt{margin: 0 0 3.5rem; font-size: 2.1rem;}
    .top-btn{width: 88%;}
}

/* Question */
.question-frm{background: #fff; text-align: center; padding: 5%; border-radius: 1rem; font-weight: bold;}
.question-tit{font-size: 5rem; line-height: 1; color: #cd0010; font-weight: bold; font-family: 'Inter', sans-serif;}
.question-txt{font-size: 2.4rem; padding: 3.5rem 0 6rem;}
.question-btn{display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 0 5rem;}
.question-btn a{width: 48.8%; font-size: 1.7rem; line-height: 1.3; color: #fff; background: #cd0010; border-radius: 0.8rem; padding: 2rem 2rem 2.4rem; display: block; position: relative; box-shadow: 0 0.6rem 0 #7e000a; transition: .3s;}
.question-btn a:after{content: ''; border: solid #fff; border-width: 0 0.2rem 0.2rem 0; display: inline-block; padding: 0.3rem; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); display: inline-block; position: absolute; right: 3%; top: 50%; margin-top: -0.6rem;}
.question-btn a:hover{transform: translateY(0.6rem); box-shadow: 0 0 0 #7e000a;}

.progressbar{background: #eeeeee; position: relative; height: 1.3rem; width: 100%;}
.progressbar span {transition : 1s linear 0s; content: ''; width: 0px; height: 100%; background: #7d7d7d; position: absolute; top: 0; left: 0;}

#redirect_url { display: none; visibility: hidden; }
.btn-wrap a.backQuestionBtn { display: none;}
.btn-wrap a.backQuestionBtn.active { display: block;}

/* .question1 .progressbar:after{width: 11.111%;}
.question2 .progressbar:after{width: 22.222%;}
.question3 .progressbar:after{width: 33.333%;}
.question4 .progressbar:after{width: 44.444%;}
.question5 .progressbar:after{width: 55.555%;}
.question6 .progressbar:after{width: 66.666%;}
.question7 .progressbar:after{width: 77.777%;}
.question8 .progressbar:after{width: 88.888%;}
.question9 .progressbar:after{width: 100%;} */

@media (max-width: 767px){
    .question-frm{padding: 8% 6% 9%;}
    .question-txt{padding: 2rem 0 4rem;}
    .question-btn a{width: 100%;}
    .question-btn a:not(:last-of-type){margin: 0 0 1rem;}
}

/* Answer */
.answer-tit{text-align: center; padding: 0 0 5rem;}
.answer-frm{background: #fff; padding: 7% 7%; border-radius: 1rem;}
.answer-heading{display: flex; flex-wrap: wrap; text-align: center; align-items: center;}
.answer-img{width: 35%; text-align: right;}
.answer-txt{width: 65%; font-size: 2rem; line-height: 1.5; text-align: center; font-weight: bold;}
.answer-txt span{font-size: 3.8rem; line-height: 1.3; color: #cd0010; display: block; padding-top: 0.3em;}
.answer-desc{padding: 4rem 0; font-family: "秀英角ゴシック金 L", "Shuei KakuGo Kin L", "Noto Sans JP", "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "MS P Gothic", "MS PGothic", Meiryo , sans-serif;}

.answer-btn{width: 100%; max-width: 50rem; margin: 0 auto; font-size: 2rem; line-height: 1.3; text-align: center; background: #cd0010; color: #fff; padding: 2rem 0; display: block; border-radius: 0.6rem; font-weight: bold;}
.answer-btn:after{content: ''; border: solid #fff; border-width: 0 0.2rem 0.2rem 0; display: inline-block; padding: 0.3rem; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); display: inline-block; margin: 0 0 0 1.2rem; position: relative; top: -0.3rem;}
.answer-btn:hover{background: #b80412;}

.answer-sns{width: 100%; max-width: 50rem; margin: 0 auto; display: flex; justify-content: space-between; text-align: center; font-weight: bold;display:none!important;}
.answer-sns a{width: 48%; border-radius: 0.6rem; font-size: 1.6rem; line-height: 1.5; margin: 4% 0 0 0; padding: 0.6rem 0;}
.answer-sns a:before{content: ''; margin: 0 0.8rem 0 0; display: inline-block;}

.answer-sns a.twitter{color: #1da1f2; border: 0.2rem solid #1da1f2;}
.answer-sns a.twitter:before{width: 1.7rem; height: 1.4rem; background: url("../img/ic_twitter.svg") no-repeat top left/100% 100%;}
.answer-sns a.twitter:hover{background: #1da1f2; color: #fff;}
.answer-sns a.twitter:hover:before{background: url("../img/ic_twitter_white.svg") no-repeat top left/100% 100%;}

.answer-sns a.facebook{color: #1877f2; border: 0.2rem solid #1877f2;}
.answer-sns a.facebook:before{width: 0.9rem; height: 1.7rem; background: url("../img/ic_facebook.svg") no-repeat top left/100% 100%; position: relative; top: 0.1rem;}
.answer-sns a.facebook:hover{background: #1877f2; color: #fff;}
.answer-sns a.facebook:hover:before{background: url("../img/ic_facebook_white.svg") no-repeat top left/100% 100%;}

@media (max-width: 767px){
    .answer-frm{padding: 8% 6%;}
    .answer-tit{padding: 0 6% 3.5rem;}
    .answer-img{width: 82%; text-align: center; margin: 0 auto 3.5rem;}
    .answer-txt{width: 100%;font-size: 1.8rem;}
    .answer-txt span{font-size: 3.1rem;}
    .answer-desc{padding: 1.5rem 0 3.5rem; font-size: 3.4vw;}
    .answer-btn{font-size: 3.6vw;}
}