@charset "UTF-8";

.top-qa { padding: 0 0 15vw; }
.top-qa-title { width: 90%; padding-left: 5vw; margin: 0 auto 12vw; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: baseline; align-items: baseline; }
.top-qa-title:before { content: ''; width: 2.8vw; height: 2.8vw; background: url(../images/deco01@2x.png) no-repeat center; background-size: 100%; position: absolute; top: -6vw; left: 0; }
.top-qa-title .en { margin-right: 2.5vw; font-size: 12vw; font-family: "Cormorant Garamond"; font-optical-sizing: auto; font-weight: 500; letter-spacing: 0.05rem; }
.top-qa-title .jp { color: #3a505c; font-size: 3.68vw; font-family: var(--mincho); }
.top-qa-items { width: 80vw; margin: 0 auto 10vw; counter-reset: number 0; }
.top-qa-items li { position: relative; }
.top-qa-items li:before {content: "Q";color: var(--red);font-size: 6vw;font-family: "Cormorant Garamond";font-optical-sizing: auto;font-weight: 500;letter-spacing: 0.05rem;position: absolute;top: 30%;left: 0;}
.top-qa-item-question {padding: 6vw 12vw 6vw 8vw;font-size: 3.95vw;font-family: var(--mincho);line-height: 1.4;border-bottom: 0.5px solid var(--red);cursor: pointer;position: relative;}
.top-qa-item-question.open:after { -moz-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); }
.top-qa-item-question:after { content: ''; width: 6vw; height: 6vw; background: url(../images/arrow01.png) no-repeat center; background-size: 1.5vw; border: 0.5px solid var(--red); -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; top: 50%; right: 2vw; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.top-qa-item-answer { padding: 4vw 2vw; font-size: 3.5vw; line-height: 1.6; text-align: justify; display: none; }
.top-qa-more { margin: 0 auto 10vw; }
.top-qa-item-answer a { width: fit-content; font-weight: bold; text-decoration: underline; position: relative; }
.top-qa-item-answer a::after { content: ''; width: 100%; height: 100%; background: url(../images/arrow04.png) no-repeat right; background-size: auto 52%; position: absolute; top: 0; right: -5vw; }

/* =============================================
    pc
================================================*/
@media screen and (min-width: 736px) {

.top-qa { width: 90%; max-width: 900px; margin: 0 auto; padding:0 0 100px; }
.top-qa-content { width: 90%; max-width: 940px; margin: auto; position: relative; }
.top-qa-title { padding-left: 30px; margin: 0 auto 40px; }
.top-qa-title:before { width: 14px; height: 14px; top: -30px; left: 0; }
.top-qa-title .en { margin-right: 30px; font-size: 60px; letter-spacing: 4px; }
.top-qa-title .jp { font-size: 16px; }
.top-qa-items { width: 100%; margin-bottom: 60px; }
.top-qa-items li:before { font-size: 30px; top: 37px; }
.top-qa-item-question { padding: 40px 65px 40px 40px; font-size: 20px; }
.top-qa-item-question:after { width: 40px; height: 40px; background-size: 8px; right: 25px; }
.top-qa-item-answer { padding: 30px 30px 30px 40px; font-size: 15px; line-height: 1.8; }
.top-qa-more.top-more { z-index: 1; position: absolute; top: 50px; right: 0; }
.top-qa-item-answer a::after { right: -25px; transition: all .6s; }
.top-qa-item-answer a:hover::after { right: -30px; }

}