@font-face {
    font-family: 'didot';
    src: url(../font/didot_bold.otf);
}
body .wrap{
    font-weight: 500;
    line-height: 1em;
    letter-spacing: .15em;
    font-family: 'Noto Sans JP', sans-serif;
    font-feature-settings: "palt";
}
body section img,body aside img{
    margin: 0;
}
.pc{
    display: block;
}
.sp{
    display: none;
}
.l-header{
    position: relative;
}

main{
    font-size: 10px;
}
main *{
    letter-spacing: .1em;
    line-height: 1em;
}

.fv{
    margin: 0 0 15em;
}
.about{
    width: 80em;
    margin: 0 auto 14em;
    text-align: center;
}
.about img{
    width: 31em;
    margin: 0 auto 5em;
}
.about p{
    font-size: 1.6em;
    line-height: 1.7em;
    text-align: left;
}
.teach{
    padding: 5em 0;
    background: #f2f2eb;
}
.teach ul{
    width: 80em;
    margin: auto;
}
.teach li + li{
    border-top: 1px solid #251714;
}
.teach li{
    padding: 5em 0;
    display: flex;
    align-items: center;
}
.teach li img{
    width: 25em;
    margin: 0 8em;
}
.teach li strong{
    margin: 0 0 1.5em;
    font-size: 2em;
    font-weight: 400;
    display: block;
}
.teach li em{
    margin: 0 0 .8333em;
    font-size: 1.8em;
    font-weight: 400;
    display: block;
}
.teach li span{
    margin: 0 0 2.5em;
    font-size: 1.6em;
    line-height: 1.7em;
    font-weight: 400;
    display: block;
}
.teach li p{
    font-size: 1.6em;
    line-height: 1.7em;
    font-weight: 400;
}

.common{
    width: 120em;
    margin: auto;
    padding: 10em 0;
}
.common + .common{
    border-top: 1px solid #000;
}
.common h4{
    width: 15em;
    font-size: 2em;
    margin: 0 auto 2.5em;
    aspect-ratio: 300/40;
    background: #402400;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.comment{
    width: 45em;
    margin: 0 auto;
    padding: 0 0 10em;
}
.comment li{
    padding: 0 0 2.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.comment li::after{
    content: '';
    width: 85%;
    aspect-ratio: 384/16;
    background: url(../images/fukidashi.png) no-repeat center/contain;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.comment li.reverse::after{
    transform: translateX(-50%) scale(-1, 1);
}
.comment.reverse::after{
    transform: scale(-1, 1);
}
.comment li img{
    width: 15em;
}
.comment li p{
    width: 14.222em;
    font-size: 1.8em;
    line-height: 1.7em;
    margin: 0 1.3em 0 0;
}
.comment li:nth-child(2n-1){
    flex-direction: row-reverse;
}
.comment li:nth-child(2n-1) p{
    margin: 0 0 0 2em;
    font-size: 1.8em;
}
.comment li + li{
    margin: 2.5em 0 0;
}

.common > p{
    margin: 0 0 3.125em;
    font-size: 1.6em;
    line-height: 1.7em;
    text-align: center;
}
.item{
    display: flex;
    gap: 5em 4%;
    flex-wrap: wrap;
    justify-content: center;
}
.item li{
    width: 48%;
}
.item img{
    margin: 0 0 2em;
}
.item h5{
    font-size: 1.8em;
    font-weight: bold;
    margin: 0 0 1em;
}
.item p{
    font-size: 1.6em;
    line-height: 1.7em;
}
.item .comment{
    width: 45em;
    padding: 0;
}
.item .comment li{
    width: 100%;
}
.item .comment li img{
    margin: 0;
}
.item .other{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gara{
    margin: 0 0 10em;
    display: flex;
    flex-wrap: wrap;
    gap: 9em 8%;
}
.gara li{
    width: 28%;
}
.gara li h5{
    margin: 0 0 1em;
    font-size: 1.8em;
    font-weight: bold;
}
.gara li img{
    margin: 0 0 4em;
    width: 100%;
}
.gara li p{
    font-size: 1.6em;
    line-height: 1.7em;
}
.item strong{
    margin: 0 0 1.666em;
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    display: block;
}
.gara + .item{
    margin: 0 0 10em;
}
.comment:last-child{
    padding: 0;
}

.info{
    width: 100em;
    margin: 0 auto 10em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.info img{
    width: 57.5em;
}
.info p{
    margin: 0 0 0 3.125em;
    font-size: 1.6em;
    line-height: 1.7em;
}

.season{
    width: 100em;
    margin: 0 auto 10em;
    display: flex;
    justify-content: space-between;
}
.season > li{
    width: 46.5%;
}
.season h5{
    text-align: center;
    margin: 0 0 8em;
}
.season strong{
    font-size: 1.8em;
    font-weight: bold;
    margin: 0 0 2em;
    display: block;
}
.season p{
    font-size: 1.6em;
    line-height: 1.7em;
}
.season ul li + li{
    margin: 10em 0 0;
}

.column{
    padding: 10em 0;
    background: #ececec;
}
.column h4{
    margin: 0 0 4em;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}
.column .main{
    width: 100em;
    margin: 0 auto 10em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.column .main .top{
    width: 57.5%;
}
.column .main .first{
    width: 39.5%;
}
.column .main .top h5{
    margin: 0 0 1.666em;
    font-size: 1.8em;
    font-weight: 500;
    line-height: 1.4em;
    text-align: center;
}
.column .first strong{
    margin: 0 0 1.5em;
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    display: block;
}
.column .first p{
    margin: 0 0 1.625em;
    font-size: 1.6em;
    line-height: 1.7em;
}
.column .gram{
    margin: 0 0 3em;
}
.column .gram li{
    display: flex;
}
.column .gram li + li{
    margin: 2em 0 0;
}
.column .gram span{
    font-size: 1.8em;
    font-weight: 500;
}
.column .gram span + span{
    position: relative;
}
.column .gram span + span::after{
    content: '';
    width: 2em;
    aspect-ratio: 32/11;
    background: url(../images/arrow.png) no-repeat center/contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -3.1em;
}
.column .gram span:first-child{
    width: 50%;
}
.column .main .comment{
    width: 100%;   
}
.column .main .comment li img{
    width: 12em;
}
.column .main .comment li:nth-child(2n-1) p{
    margin: 0;
}
.column .main .comment li::after{
    width: 100%;
}

.column > strong{
    font-size: 2em;
    font-weight: 500;
    margin: 0 0 1.5em;
    display: block;
    text-align: center;
}
.column > p{
    margin: 0 0 6.25em;
    font-size: 1.6em;
    line-height: 1.7em;
    text-align: center;
}
.column .change{
    width: 120em;
    margin: 0 auto 3em;
    display: flex;
    justify-content: space-between;
}
.column .change li{
    width: 48%;
}
.column .change strong{
    margin: 0 0 1.666em;
    font-size: 1.8em;
    font-weight: bold;
    display: block;
}
.column > .change_text{
    width: 75em;
    margin: 0 auto 6.25em;
    text-align: left;
}

.yurakucho{
    border-bottom: 1px solid #666;
    padding: 0 0 9em;
    margin: 10em auto 9em;
    width: 120em;
}

.yurakucho h4{
    margin: 0 0 2.7777em;
    font-size: 1.8em;
    line-height: 1.75em;
    text-align: center;
}
.yurakucho img{
    width: 80em;
    margin: 0 auto 3em;
    display: block;
}
.yurakucho p{
    width: 50em;
    margin: 0 auto 2.5em;
    font-size: 1.6em;
    line-height: 1.75em;
    text-align: justify;
}
.yurakucho a{
    width: 25em;
    aspect-ratio: 400/60;
    font-size: 1.6em;
    margin: auto;
    color: #fff;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.yurakucho small{
    width: 61.538em;
    margin: 3.076em auto 0;
    font-size: 1.3em;
    line-height: 1.7em;
    display: block;
}

aside ul{
  width: 120em;
  margin: auto;
}
aside ul li{
  padding: 0 0 10em;
  display: flex;
  flex-direction: column;
  position: relative;
}
aside ul li + li{
    padding: 10em 0;
}
aside ul li h4{
  margin: 0 0 40px;
  font-size: 2em;
  text-align: center;
}
aside ul li img{
  width: 80em;
  margin: 0 auto 4em;
  display: block;
}
aside ul li + li::before{
  content: '';
  width: 100%;
  height: 1px;
  background: #d1d1cf;
  position: absolute;
  top: 0;
  left: 0;
}
aside ul li a{
  width: 560px;
  height: 50px;
  font-size: 1.6em;
  margin: auto;
  border: 1px solid #808080;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Noto Sans JP',noto-sans-cjk-jp, sans-serif;
  font-weight: 400;
}

@media screen and (max-width:1200px) {
    main{
        font-size: .7vw;
    }
    .yurakucho{
        width: 100em;
    }
    
    aside ul{
        width: 100em;
    }
    aside ul li h4{
        margin: 0 0 3vw;
    }
    aside ul li a{
        width: 45.1vw;
        height: 4vw;
        font-size: 1.6em;
    }
}

@media screen and (max-width:768px) {
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    main{
        font-size: 2.66666vw;
    }
    .about{
        width: 92%;
        margin: 0 auto 6em;
    }
    .common{
        width: 92%;
    }
    .fv{
        margin: 0 0 6em;
    }
    .about img{
        width: 30em;
        margin: 0 auto 4em;
    }
    .teach{
        padding: 6em 0;
    }
    .teach ul{
        width: 92%;
    }
    .teach li{
        position: relative;
        flex-direction: column;
    }
    .teach li strong{
        font-size: 1.8em;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .teach li img{
        width: 15em;
        margin: 0 auto 4em;
    }
    .teach li em{
        font-size: 1.6em;
    }
    .teach li span{
        font-size: 1.4em;
    }
    .teach li p{
        font-size: 1.4em;
    }
    .teach li + li{
        padding: 10em 0 0;
    }
    .teach li + li strong{
        margin: 2.777em 0 0;
    }
    .common{
        width: 100%;
        padding: 12em 4% 0;
    }
    .common + .common{
        border: none;
        position: relative;
    }
    .common + .common::before{
        content: '';
        width: 100%;
        height: 1px;
        background: #000;
        position: absolute;
        top: 0;
        left: 0;
    }
    .common h4{
        width: 11.111em;
        aspect-ratio: 200/28;
        margin-bottom: 6.666em;
        font-size: 1.8em;
    }
    .comment{
        width: 100%;
        margin: 0 0 8em;
    }
    .comment li{
        padding: 0 0 2em;
    }
    .comment li p{
        width: 14.375em;
        margin: 0;
        font-size: 1.6em;
    }
    .comment li img{
        width: 8em;
    }
    .comment li:nth-child(2n-1) p{
        margin: 0;
    }
    .comment li::after{
        width: 100%;
    }
    .comment{
        padding: 0;
    }
    .common > p{
        margin: 0 0 5.714em;
        font-size: 1.4em;
        text-align: left;
    }
    .common > p br{
        display: none;
    }
    .item .comment li{
        margin: 0;
    }
    .comment li + li{
        padding-top: 2em;
    }
    .item{
        gap: 8em 4%;
    }
    .item > li{
        padding-top: 3.5em;
        width: 100%;
        position: relative;
    }
    .item h5{
        position: absolute;
        top: 0;
        left: 0;
    }
    .item p{
        font-size: 1.4em;
    }
    .item .comment{
        width: 100%;
        margin: 0 0 12em;
    }
    .item .other{
        padding: 0;
    }

    .gara{
        gap: 8em 0;
    }
    .gara li{
        width: 100%;
    }
    .gara li h5{
        font-size: 1.6em;
    }
    .gara li p{
        font-size: 1.4em;
    }

    .gara + .item > li{
        padding-top: 0;
    }
    .item strong{
        margin-bottom: 1.25em;
        font-size: 1.6em;
        text-align: left;
    }
    .gara + .item{
        margin: 0 0 8em;
    }
    .item + .comment{
        margin: 0 0 12em;
    }
    .info{
        width: 100%;
        display: block;
        margin: 0 0 8em;
    }
    .info img{
        margin: 0 0 4em;
    }
    .info p{
        width: 100%;
        margin: 0;
        font-size: 1.4em;
    }
    .season{
        width: 100%;
        display: block;
    }
    .season > li{
        width: 100%;
    }
    .season h5{
        margin: 0 0 8em;
    }
    .season strong{
        font-size: 1.6em;
    }
    .season p{
        font-size: 1.4em;
    }
    .season ul li + li{
        margin: 8em 0 0;
    }
    .season > li + li{
        margin: 8em 0 0;
    }
    .season + .comment li + li{
        margin: 0;
    }
    .season + .comment{
        margin: 0 0 12em;
    }
    .column{
        padding: 8em 4%;
    }
    .column .main .top{
        width: 100%;
    }
    .column h4{
        font-size: 1.8em;
        margin: 0 0 4.444em;
    }
    .column .main .top h5{
        font-size: 1.6em;
    }
    .column .main .top img{
        margin: 0 0 8em;
    }
    .column .main .first{
        width: 100%;
    }
    .column .first p{
        margin: 0 0 2.857em;
        font-size: 1.4em;
    }
    .column .main{
        width: 100%;
        display: block;
    }
    .column .gram{
        margin: 0 0 8em;
    }
    .column .gram li + li{
        margin: 2em 0 0;
    }
    .column .gram span{
        font-size: 1.6em;
    }
    .column .main .comment li img{
        width: 8em;
    }

    .column > strong{
        font-size: 1.8em;
        margin: 0 0 2.222em;
    }
    .column > p{
        margin: 0 0 2.857em;
        font-size: 1.4em;
        text-align: left;
    }
    .column .change{
        width: 100%;
        display: block;
    }
    .column .change li{
        width: 100%;
    }
    .column .change strong{
        font-size: 1.6em;
        margin: 0 0 1.25em;
    }
    .column .change li + li{
        margin: 4em 0 0;
    }
    .change_text + .comment{
        margin: 0;
    }
    .column > .change_text{
        width: 100%;
    }
    .yurakucho{
        width: 92%;
        padding: 8em 0;
        margin: 0 auto 8em;
    }
    
    .yurakucho h4{
        font-size: 1.6em;
        margin: 0 0 7.5em;
    }
    .yurakucho p{
        font-size: 1.4em;
        width: 100%;
    }
    .yurakucho a{
        width: 100%;
    }
    .yurakucho small{
        width: 100%;
        margin: 9.23em auto 0;
        line-height: 1.7em;
    }

    aside{
        margin: 0;
    }
    aside ul{
        width: 95%;
    }
    aside ul li{
        padding: 0 0 5em;
    }
    aside ul li + li{
        padding: 5em 0;
    }
    aside ul li h4{
        font-size: 1.4em;
        text-align: left;
    }
    aside ul li a{
        width: 53.3vw;
        height: 10.6vw;
        font-size: 2.6vw;
    }
}