@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Noto+Sans+JP:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

/* --------------------------------------------------
 terms
--------------------------------------------------- */
article{ position: relative; padding: 10.41666667vw; border-bottom: 0.069444444vw solid;}
article h1{ text-align: center; letter-spacing: .1em; font-weight: 700; font-size: 2.777777778vw;}

@media screen and (max-width: 768px){
    article{ padding: 12vw 8vw; border-bottom: 0.266666667vw solid;}
    article h1{ font-size: 4.266666667vw;}
}

.content{ padding: 3em 0 0; line-height: 1.75;}

.content nav{ margin: 0 0 6.944444444vw; padding: 1.5em .5em; border: 0.069444444vw solid;}
.content nav ul{ display: flex; line-height: 2.5; flex-wrap: wrap;}
.content nav ul > li{ padding: 0 1.5em;}
.content nav ul > li a{ position: relative; display: flex; padding: 0 0 0 1em; align-items: baseline;}
.content nav ul > li a:after{ position: absolute; top: 50%; left: 0; width: 0.555555556vw; height: 0.555555556vw; border: 0.138888889vw solid #c8c2af; border-bottom: none; border-left: none; content: ""; transform: translate(0,-50%) rotate(45deg);}

section{ padding: 0 0 6.944444444vw;}
section h2{ position: relative; padding: 0 0 0 1em; letter-spacing: .1em; font-weight: 500; font-size: 2.083333333vw; line-height: 1;}
section h2:before{ position: absolute; top: 50%; left: 0; width: 0.416666667vw; height: 100%; border-radius: 0.208333333vw; background: #c8c2af; content: ""; transform: translate(0,-50%);}
section dl{ padding: 0 0 1em; border-bottom: 0.069444444vw solid #8c887c;}
section dl > dt{ position: relative; margin: 1em 0 0; padding: 1em 0 0 1.5em; border-top: 0.069444444vw solid #8c887c; cursor: pointer;}
section dl > dt:before{ position: absolute; top: 1em; left: 0; content: "Q.";}
section dl > dt:first-child{ border: none;}
section dl > dd{ display: none; padding: 1em 1.5em 1.5em;}
section dl > dd a{ text-decoration: underline;}
section dl > dd a:hover{ text-decoration: none;}

@media screen and (max-width: 768px){
    .content{ padding: 1.5em 0 0; line-height: 1.75;}
    
    .content nav{ margin: 0 0 12vw; padding: 1em 0; border: 0.266666667vw solid;}
    .content nav ul{ display: flex; line-height: 2.5; flex-wrap: wrap;}
    .content nav ul > li{ padding: 0 1em;}
    .content nav ul > li a{ position: relative; display: flex; padding: 0 0 0 1em; align-items: baseline;}
    .content nav ul > li a:after{ position: absolute; top: 50%; left: 0; width: 1.066666667vw; height: 1.066666667vw; border: 0.266666667vw solid #c8c2af; border-bottom: none; border-left: none; content: ""; transform: translate(0,-50%) rotate(45deg);}
    
    section{ padding: 0 0 12vw;}
    section h2{ font-size: 4.266666667vw;}
    section h2:before{ width: 1.066666667vw; border-radius: 0.533333333vw;}
    
    section dl{ padding: 0 0 1em; border-bottom: 0.266666667vw solid #8c887c;}
    section dl > dt{ position: relative; margin: 1em 0 0; padding: 1em 0 0 1.5em; border-top: 0.266666667vw solid #8c887c; cursor: pointer;}
    section dl > dt:before{ position: absolute; top: 1em; left: 0; content: "Q.";}
    section dl > dt:first-child{ border: none;}
    section dl > dd{ display: none; padding: 1em 0;}
    section dl > dd a{ text-decoration: underline;}
    section dl > dd a:hover{ text-decoration: none;}
}