/* --------------------
   MV
-------------------- */
#mv {
    text-align: center;
    padding-top: 3.75em;
    background: url(../img/mv.jpg) no-repeat center top / 100%;
}
#mv .container {
    position: relative;
}
#mv .mv__copy {
    width: 14.6%;
    position: absolute;
    top: 2em;
    right: 0;
}
#mv .mv__ttl {
    padding: 26% 0 2em;
    text-align: center;
}
#mv .mv__ttl .mv_mint img {
    width: 47%;
}
#mv .mv__ttl .mv_ttl {
    margin-top: 3%;
}
#mv .mv__ttl .mv_en_ttl {
    margin-top: -11.5%;
}
#mv .mv__ttl .mv_en_ttl img {
    width: 71%;
    margin-left: 7%;
}

#mv .intro {
    position: relative;
}
#mv .intro::before {
    content: '';
    display: block;
    width: 7em;
    height: 7em;
    margin: 0 auto;
    background: url(../img/clip1.png) no-repeat 0% 0% / contain;
    position: absolute;
    top: -4.9em;
    left: 50%;
    z-index: 2;
    transform: translateX(-52%);
}
#mv .memo {
    margin: 6.5em 0 4em;
    padding: 3em 2.5em;
    background: #F8F9FD url(../img/memo_bg_m.png) repeat-y center center / 100%;
    box-shadow: -.2em .4em .6em rgba(0,0,0,0.25);
    position: relative;
}
#mv .memo::before,
#mv .memo::after {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
}
#mv .memo::before {
    padding-top: 30%;
    background: url(../img/memo_bg_t.png) no-repeat center top / 100%;
    top: 0;
}
#mv .memo::after {
    padding-top: 22%;
    background: url(../img/memo_bg_b.png) no-repeat center bottom / 100%;
    bottom: 0;
}
#mv .memo .memo-inner {
    position: relative;
    z-index: 5;
}
#mv .memo .ttl {
    font-size: 1.538em;
    padding: .35em 0 .5em;
    letter-spacing: .16em;
}
#mv .memo p {
    background-image: linear-gradient(180deg, #F4EBDE 1px, transparent 1px); /* 罫線の色と太さ */
    background-size: 100% 3.1em;
    font-size: 1.077em;
    line-height: 3.1em;
}

/* --------------------
   Check test
-------------------- */
#checkTest {
    margin: 4em 0 3em;
}
#checkTest .tabContent {
    background-color: #FFF;
}
#checkTest .tabs {
    display: flex;
    background-color: #FFF;
}
#checkTest .tabs .tab {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .933em;
    line-height: 1.35;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: center;
    padding: .75em 0 .8em .875em;
    cursor: pointer;
    position: relative;
}
#checkTest .tabs .tab svg {
    width: .875em;
    height: .875em;
    fill: currentColor;
    position: absolute;
    top: 50%;
    left: .75em;
    margin-top: -.5em;
    transition: transform .2s;
}
#checkTest .tabs .tab span {
    display: block;
    font-size: .875em;
    margin-top: .25em;
}

#checkTest .tabs .tab.current {
    background: currentColor;
}
#checkTest .tabs .tab.current::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .35em .35em 0 .35em;
    border-color: currentColor transparent transparent transparent;
    position: absolute;
    top: 99.9%;
    left: 50%;
    transform: translateX(-50%);
}
#checkTest .tabs .tab.current > div {
    color: #FFF;
}
#checkTest .tabs .tab:hover svg,
#checkTest .tabs .tab.current svg {
    transform: rotate(90deg);
}


#checkTest .tabpanel {
    padding: 1.25em 1.25em 0;
}
#checkTest .check__about {
    text-align: center;
    padding: 1.5em 0;
}
#checkTest .check__about p {
    margin-top: 1.5em;
    line-height: 2.2;
}
#checkTest .check__about p + p {
    margin-top: 1em;
}

#checkTest .check__start {
    background-color: #787878;
    color: #FFF;
    text-align: center;
    padding: 1.25em 0 .75em;
    margin: 1em 0 3.5em;
    position: relative;
}
#checkTest .check__start::before {
    content: '';
    display: block;
    width: 100%;
    height: 1.8em;
    background-color: #787878;
    clip-path: polygon(0 0, 100% 0%, 100% 1px, 50% 100%, 0% 1px);
    position: absolute;
    top: calc(100% - 1px);
    right: 0;
    left: 0;
}
#checkTest .check__start .ttl {
    font-size: 1.25em;
}
.check__list {
    list-style-type: none;
    padding-bottom: 1em;
}
.check__list li {
    margin-top: 2.25em;
    position: relative;
}
.check__list li:not(:last-of-type)::after{
    content: '';
    display: block;
    width: 100%;
    height: 6px;
    background-color: #fff;
    background-image: radial-gradient(#787878 18%, transparent 18%);
    background-size: 6px 6px;
    margin-top: 1em;
}
.check__list li .q {
    display: flex;
    font-size: 1.385em;
    font-weight: 400;
    letter-spacing: .16em;
    line-height: 1.5;
    margin-bottom: .25em;
}
.check__list li .q .num {
    display: inline-block;
    font-family: 'Baskerville', 'Libre Baskerville', serif;
    font-size: 1.389em;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
    padding: .5em 0 0 .5em;
    margin-top: -.55em;
    margin-left: -.25em;
    margin-right: .75em;
    text-align: right;
    background: url(../img/q_c1.svg) no-repeat 0 0 / 1.5em;
}
.check__list li label {
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.check__list li label::after {
    content: '';
    display: block;
    height: 1px;
    background: #F0F0F0;
    position: absolute;
    top: 50%;
    right: 3.5em;
    left: 3.5em;
    z-index: -1;
}
.check__list li input {
    display: none;
}
.check__list li input + div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    padding: .5em 1em .5em 1.25em;
    line-height: 1.5;
    color: #646464;
    position: relative;
    transition: .2s;
}
.check__list li input + div::before {
    content: '';
    display: block;
    flex: 0 0 1.75em;
    width: 1.75em;
    height: 1.75em;
    border: 1px solid #BCBCBC;
    border-radius: 100%;
    background-color: #FFF;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.02%22%20height%3D%2217.77%22%20viewBox%3D%220%200%2020.02%2017.77%22%3E%3Cpath%20d%3D%22M7.76%2C17.77c-.29%2C0-.57-.13-.76-.35L.24%2C9.53c-.36-.42-.31-1.05%2C.11-1.41%2C.42-.36%2C1.05-.31%2C1.41%2C.11l5.93%2C6.92L18.21%2C.42c.32-.45%2C.95-.55%2C1.4-.23%2C.45%2C.32%2C.55%2C.95%2C.23%2C1.4l-11.26%2C15.77c-.18%2C.25-.46%2C.4-.77%2C.42-.01%2C0-.03%2C0-.04%2C0Z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fsvg%3E');
    background-position: 50% 52.5%;
    background-repeat: no-repeat;
    background-size: 46%;
    transition: .2s;
}

.check__list li label:hover div {
    color: #646464;
}
.check__list li label:hover div::before {
    background-color: #EEE;
}

.check__list li input:checked + div {
    color: #000;
}
.check__list li input:checked + div::before {
    border-color: transparent;
    background-color: #646464;
}
.check__list li label div span {
    display: inline-block;
    padding-right: .5em;
    background-color: #FFF;
}

.checktest .btnBox {
    margin: 0 -1.25em;
    padding-top: 5.5em;
    background-color: #DCF3E9;
    position: relative;
}
.checktest .btnBox::before {
    content: '';
    width: 100%;
    height: 3.125em;
    background: #FFF;
    clip-path: polygon(0 0, 100% 0%, 100% 1px, 50% 100%, 0% 1px);
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
}


#checkTest .not-result {
    margin-top: 1em;
    text-align: center;
}

/* c1 */
#checkTest .tabs .tab.tab__c1,
#checkTest .tab__c1 .check__about .ttl,
.tab__c1 .check__list li .q {
    color: #49B8B1;
}
#checkTest .tab__c1 .check__start,
#checkTest .tab__c1 .check__start::before,
.tab__c1 .check__list li input:checked + div::before {
    background-color: #49B8B1;
}
.tab__c1 .check__list li .q .num {
    background: url(../img/q_c1.svg) no-repeat 0 0 / 1.5em;
}
.tab__c1 .check__list li:not(:last-of-type)::after{
    background-image: radial-gradient(#49B8B1 18%, transparent 18%);
}
.tab__c1 .check__about hr {
    background-image: url(../img/hr_c1.svg);
}
/* c2 */
#checkTest .tabs .tab.tab__c2,
#checkTest .tab__c2 .check__about .ttl,
.tab__c2 .check__list li .q {
    color: #C79B59;
}
#checkTest .tab__c2 .check__start,
#checkTest .tab__c2 .check__start::before,
.tab__c2 .check__list li input:checked + div::before {
    background-color: #C79B59;
}
.tab__c2 .check__list li .q .num {
    background: url(../img/q_c2.svg) no-repeat 0 0 / 1.5em;
}
.tab__c2 .check__list li:not(:last-of-type)::after{
    background-image: radial-gradient(#C79B59 18%, transparent 18%);
}
.tab__c2 .check__about hr {
    background-image: url(../img/hr_c2.svg);
}
/* c3 */
#checkTest .tabs .tab.tab__c3 {
    color: #FFB9B4;
}
#checkTest .tab__c3 .check__about .ttl,
.tab__c3 .check__list li .q {
    color: #FFA0AF;
}
#checkTest .tab__c3 .check__start,
#checkTest .tab__c3 .check__start::before,
.tab__c3 .check__list li input:checked + div::before {
    background-color: #FFB9B4;
}
.tab__c3 .check__list li .q .num {
    background: url(../img/q_c3.svg) no-repeat 0 0 / 1.5em;
}
.tab__c3 .check__list li:not(:last-of-type)::after{
    background-image: radial-gradient(#FFA0AF 18%, transparent 18%);
}
.tab__c3 .check__about hr {
    background-image: url(../img/hr_c3.svg);
}



#double-type {
    text-align: center;
    margin-top: 1em;
    padding: .5em;
    background-color: rgba(0,0,0,0.05);
}
#double-type .ttl {
    margin-bottom: .25em;
}
#double-type .links {
    display: flex;
}
#double-type .links > div {
    flex: 0 0 50%;
    padding: .25em;
}
#double-type .links > div .btn {
    font-size: 1em;
}


/* --------------------
   Footer
-------------------- */
#siteFooter {
    padding-bottom: 35vw;
}
@media (min-width: 426px) {
    #siteFooter {
        padding-bottom: 150px;
    }
}