@charset "UTF-8";

header { background-color:#fefefe; padding-top:60px; padding-bottom:40px; }

h1 { font-size:28px; font-weight: normal; text-indent: 0.5em; letter-spacing: 0.5em; margin:auto; text-align:center; padding-top:40px; position:relative; }
h1::before { content: ""; display: block; position: absolute; width:50px; height:37px; top:0; left:50%; transform: translateX(-50%); background:url("../img/icon_img01.png"); background-repeat: no-repeat; background-size: contain; }
h1::after { content: ""; display: none; }
@media (max-width:900px) {
    header { padding-top:50px; padding-bottom:30px; }
    h1 { font-size:21px; padding-top:26px; }
    h1::before { width:32px; }
}

div#main_img { position:relative; height:240px; z-index: -1; }
div#main_img::before { content: ''; position:fixed; width:100%; height:50vh; z-index: -1; top:0; background:url("../img/main_faq.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat;  }
div#main_img::after { content: ''; display: block; position:absolute; left:0; bottom:-10px; width:100%; height: 20px; background: linear-gradient(to right, #cdf4f4, #99c2c4); }

@media (max-width:900px) {
    div#main_img { height:150px; }
    div#main_img::after { height:10px; bottom:-5px; }
}


div#logo_icon { position:fixed; left:30px; top:30px; width:35%; max-width:250px; z-index: 10000; }
div#logo_icon img { width:100%; }
@media (max-width:900px) {
    div#logo_icon { top:15px; left:20px; }
}

div#faq_block { margin:auto; padding-top:80px; padding-bottom:100px; width:100%;  position: relative; background:linear-gradient(to bottom, #ffffff 0%, #f5fafa 22%, #cbe3e5 100%); }
@media (max-width:900px) {
    div#faq_block { padding-top:40px; padding-bottom:60px; }
}

div.qa_list { width:84%; max-width:900px; margin:auto; padding:10px 100px 20px; background-color:#fefefe; box-sizing: border-box; }
div.qa_list:last-child { padding-bottom:100px; }
div.qa_list > h2 { font-size:24px; font-weight: normal; letter-spacing: 0.2em; color:#020202; margin-top:40px; margin-bottom:20px; }
@media (max-width:900px) {
    div.qa_list { padding:3% 6%; }
    div.qa_list:last-child { padding-bottom:50px; }
    div.qa_list > h2 { font-size:16px; margin-top:20px; margin-bottom:20px; }
}

div.qa_list dl { position: relative; margin: 0; padding: 28px 80px 28px 30px; border-top: 1px solid #839194; }
div.qa_list dl:last-child { border-bottom: 1px solid #839194; }
div.qa_list dl::before { position: absolute; top: 40px; right: 35px; display: block; width: 16px; height: 1px; margin: auto; content: ''; background-color:#020202; transition: all 0.6s linear; }
div.qa_list dl::after { position: absolute; top: 32px; right: 43px; display: block; width: 1px; height: 16px; margin: auto; content: ''; background-color:#020202; transition: all 0.4s ease-in-out; }
div.qa_list dl.open::before { opacity: 0; }
div.qa_list dl.open::after { transform: rotateZ(90deg); }

div.qa_list dl dt { font-size: 16px; color:#006980; letter-spacing: 0.1em; position: relative; margin: 0; padding: 0 0 0 50px; cursor: pointer; }
div.qa_list dl dt::before { font-size: 40px; line-height: 1; position: absolute; top:50%; left:0; transform: translateY(-60%); display: block; content: 'Q'; color: #006980; line-height: 1; }

div.qa_list dl dd { position: relative; display: none; height: auto; margin: 30px 0 0; padding: 0 0 0 50px; }
div.qa_list dl dd::before { font-size: 40px; line-height: 1; position: absolute; top:50%; left:0; transform: translateY(-60%); display: block; content: 'A'; color: #50666B; }
div.qa_list dl.open dd { display:block; }

div.qa_list dl dd p { margin-top:10px; letter-spacing: 1px; }
div.qa_list dl dd p:first-child { margin-top: 0; }
@media screen and (max-width: 900px) {
    div.qa_list dl { padding: 15px 34px 15px 20px; }
    div.qa_list dl::before { width: 12px; top:24px; right: 10px; }
    div.qa_list dl::after { height: 12px; top:18px; right: 16px; }
    div.qa_list dl dt { font-size:13px; letter-spacing: 1px; line-height: 1.4; padding: 0 0 0 15px; }
    div.qa_list dl dt::before { font-size:21px; left:-12px; }
    div.qa_list dl dd { margin: 20px 0 0; padding: 0 0 0 15px; }
    div.qa_list dl dd::before { font-size:21px; left:-12px; }
    div.qa_list dl dd p { font-size:12px; line-height: 1.4; }
}