@charset "UTF-8";

html{
    font-size: 100%;
}
body{
    color: #24201D;
    background-color: #F5F3F1;
    font-family: 'Zen Old Mincho', sans-serif;
}
img{
    max-width: 100%;
    vertical-align: bottom;
}
li{
    list-style: none;
}
a{
    color: #24201D;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}
a:hover{
    opacity: 0.7;
}

/* fadein ----------------------------------- */
.fadein{
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s;
}
.fadein.inview{
    opacity: 1;
    transform: translateY(0);
}

/* 共通設定 ----------------------------------- */
.tab-br,
.sp-br{
    display: none;
}

.line-list li{
    width: 100%;
    height: 5px;
    border-bottom: 1px solid #826B2B;
    box-sizing: border-box;
}

.wrapper1000{
    max-width: 1000px;
    margin: 0 auto;
}
.wrapper800{
    max-width: 800px;
    margin: 0 auto;
}

.marker{
    font-weight: 700;
    background: linear-gradient(transparent 50%, #EFE7E0 50%);
}

/* サブタイトル */
.section-title .en{
    display: block;
    font-family: 'Playfair Display', sans-serif;
    font-size: 6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 10px;
}
.section-title .en .small{
    font-size: 3rem;
}
.section-title .ja{
    display: block;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 20px;
}
.title-line{
    width: 100%;
    height: 1px;
    background-color: #24201D;
    margin-bottom: 60px;
}

/* header ------------------------------------ */
#header{
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
}

#header .line-list{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
}
#header .line-list li.active{
    border-bottom: 1px solid #F5F3F1;
}

#header .site-logo{
    position: fixed;
    top: 50px;
    left: 50px;
    z-index: 50;
}
#header .site-logo a{
    font-size: 2rem;
    font-weight: 400;
    font-family: 'Cinzel', sans-serif;
    letter-spacing: 0.25em;
    display: block;
}
#header .site-logo a.active{
    display: none;
}

#header .hamburger{
    width: 60px;
    height: 60px;
    background-color: #F5F3F1;
    border-radius: 50%;
    position: fixed;
    top: 40px;
    right: 50px;
    z-index: 50;
    cursor: pointer;

    /* 追加: 中央に配置するためのflex設定 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#header .hamburger.active{
    background-color: #24201D;
}
#header .hamburger .img img{
    width: 15px;
    transition: transform 0.3s ease;
}

/* アニメーションの定義 */
@keyframes hop {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-5px); }
  60%      { transform: translateY(0); }
}

/* マウスオーバー時のアニメーション実行（繰り返し） */
#header .hamburger:hover .img img:nth-child(1) {
  animation: hop 0.6s ease infinite;
  animation-delay: 0s;
}
#header .hamburger:hover .img img:nth-child(2) {
  animation: hop 0.6s ease infinite;
  animation-delay: 0.1s;
}
#header .hamburger:hover .img img:nth-child(3) {
  animation: hop 0.6s ease infinite;
  animation-delay: 0.2s;
}

#header .hamburger p{
    font-size: 0.94rem;
    font-family: 'Cinzel', sans-serif;
    color: #24201D;
    text-align: center;
}
#header .hamburger p.active{
    color: #F5F3F1;
}

#header .navi{
    width: 100%;
    height: 100vh;
    color: #F5F3F1;
    background-color: #24201D;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    transition: all 0.6s;
    opacity: 0;
    visibility: hidden;
    overflow: auto;
}
#header .navi.active{
    opacity: 1;
    visibility: visible;
}
#header .navi .nav-container{
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    padding: 0 5%;
    margin: 0 auto;
}

#header .navi .nav-container .title-wrap{
    width: 50%;
}
#header .navi .nav-container .title-wrap p{
    font-family: 'Cinzel', sans-serif;
}
#header .navi .nav-container .title-wrap .sub-title{
    font-size: 1.25rem;
    letter-spacing: 0.25em;
}
#header .navi .nav-container .title-wrap .title{
    font-size: 6rem;
    letter-spacing: 0.25em;
    line-height: 1;
    margin-bottom: 15px;
}

#header .navi .nav-container .title-wrap .sns-list li{
    margin-bottom: 15px;
}
#header .navi .nav-container .title-wrap .sns-list a{
    display: flex;
    align-items: center;
}
#header .navi .nav-container .title-wrap .sns-list a img{
    width: 25px;
}
#header .navi .nav-container .title-wrap .sns-list a p{
    display: inline-block;
    color: #F5F3F1;
    font-family: 'Playfair Display',  sans-serif;
    padding-left: 10px;
    /* padding-bottom: 6px; */
}

#header .navi .nav-container .nav-wrap{
    width: 50%;
}
#header .navi .nav-container .nav-wrap li{
    max-width: 374px;
    margin-bottom: 15px;
}
#header .navi .nav-container .nav-wrap .navi-item{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
#header .navi .nav-container .nav-wrap .navi-item .en{
    font-size: 2.25rem;
    font-family: 'Playfair Display',  sans-serif;
    color: #BBA362;
}
#header .navi .nav-container .nav-wrap .navi-item .en .small{
    font-size: 1.5rem;
}

#header .navi .nav-container .nav-wrap .navi-item .ja{
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    color: #F5F3F1;
}

/* main-visual ---------------------------- */
#main-visual{
    width: 100%;
    margin-top: 40px;
}

#main-visual .mv-img-wrap{
    width: 100%;
    position: relative;
}
#main-visual .mv-img-wrap .mv-img {
    width: 90%;
    height: 400px;
    margin: 0 auto;
    clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);
    overflow: hidden;
}
#main-visual .mv-img-wrap .mv-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#main-visual .mv-img-wrap .line-list{
    width: 100%;
    position: absolute;
    top: 325px;
    left: 0;
    z-index: -10;
}

#main-visual .site-title-wrap {
    width: 344px;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    margin: 50px 5% 0 auto;
}
#main-visual .site-title-wrap p{
    color: #24201D;
    font-family: 'Cinzel', sans-serif;
    line-height: 1;
    letter-spacing: 0.25em;
    text-align: right;
}
#main-visual .site-title-wrap .sub-title{
    font-size: 0.875rem;
    text-align: left;
}
#main-visual .site-title-wrap .title{
    font-size: 6rem;
}
#main-visual .site-title-wrap .ja{
    font-size: 1rem;
    font-family: 'Zen Old Mincho', sans-serif;
    color: #24201D;
    text-align: right;
    position: relative;
}
#main-visual .site-title-wrap .ja::before{
    content: "";
    width: 30px;
    height: 1px;
    background-color: #24201D;
    position: absolute;
    top: 8px;
    right: 290px;
}
#main-visual .scroll{
    writing-mode: vertical-rl;
    font-size: 0.875rem;
    font-family: 'Cinzel', sans-serif;
    margin-left: 5px;
}

/* introduction ---------------------------- */
#introduction{
    width: 100%;
    margin-bottom: 150px;
}
#introduction .vertical-line{
    width: 1px;
    height: 50px;
    background-color: #24201D;
    margin-left: 15px;
    margin-bottom: 20px;
}

#introduction .main-wrap{
    display: flex;
    align-items: stretch;
}
#introduction .main-wrap .img{
    width: 50%;
    overflow: hidden;
    padding-right: 5%;
}
#introduction .main-wrap .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#introduction .main-wrap .text{
    width: 50%;
    padding: 0 3%;
}
#introduction .main-wrap p{
    line-height: 2;
}

/* rising-problem ------------------------- */
#rising-problem{
    position: relative;
}

#rising-problem .img-wrap{
    width: 100%;
    height: 488px;
    overflow: hidden;
}
#rising-problem .img-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#rising-problem .text-wrap{
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 60px;
    left: 15%;
    z-index: 10;
    padding: 40px 60px;
}
#rising-problem .text-wrap p{
    font-weight: 600;
    margin-bottom: 30px;
}
#rising-problem .text-wrap .problem-list{
    padding-left: 20px;
    margin-bottom: 30px;
}
#rising-problem .text-wrap .problem-list li{
    position: relative;
    margin-bottom: 15px;
}
#rising-problem .text-wrap .problem-list li::before{
    content: "";
    width: 16px;
    height: 16px;
    background: url(../img/icon-check.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 4px;
    left: -20px;
}
#rising-problem .text-wrap .problem-list li:last-child{
    margin-bottom: 0;
}
#rising-problem .text-wrap .emphasize{
    font-size: 1.5rem;
    border-bottom: 1px solid #24201D;
    margin-bottom: 0;
}

/* problems ------------------------------- */
#problems{
    background-color: #ECEAE4;
    padding: 80px 0 150px;
}

#problems .text1{
    margin-bottom: 60px;
}

#problems .problem-list-container{
    max-width: 100%;
    position: relative;
}
#problems .problem-list{
    width: 705px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 0 auto 60px;
}

#problems .problem-list .problem-item{
    width: 270px;
    height: 270px;
    border: 1px solid #826B2B;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
#problems .problem-list .problem-item:nth-child(3){
    margin-left: 135px;
}
#problems .problem-list .problem-item:nth-child(n+3){
    margin-top: -20px;
}

#problems .problem-list .problem-item .no{
    font-family: 'Cinzel', sans-serif;
    color: #826B2B;
}
#problems .problem-list .problem-item .name{
    font-size: 1.5rem;
    margin-bottom: 10px;
}
#problems .problem-list .problem-item .line{
    width: 60%;
    height: 1px;
    background-color: #826B2B;
    margin-bottom: 10px;
}
#problems .problem-list .problem-item .example li{
    margin-bottom: 10px;
}
#problems .problem-list .problem-item .example li::before{
    content: "▼";
    color: #826B2B;
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

#problems .line-box1{
    width: 100%;
    max-width: 800px;
    height: 430px;
    border: 1px solid #826B2B;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    padding: 5px;
}
#problems .line-box2,
#problems .line-box3{
    width: 100%;
    height: 100%;
    border: 1px solid #826B2B;
    padding: 5px;
}

#problems .text2{
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-align: center;
}
#problems .text3{
    font-size: 2rem;
    line-height: 2.5;
    text-align: center;
}
#problems .text3 .small{
    font-size: 1.5rem;
}

/* parallax1 ------------------------------ */
#parallax1{
    width: 100%;
    height: 400px;
    background-image: url(../img/parallax1.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* solution ------------------------------- */
#solution{
    width: 100%;
    margin-top: 130px;    
}

#solution p{
    font-size: 2rem;
    line-height: 3;
    text-align: center;
    margin-bottom: 100px;
}
#solution p .small{
    font-size: 1.5rem;
}

#solution .img{
    display: flex;
    justify-content: center;
    gap: 15px;
}
#solution .img img{
    width: 15px;
    height: 15px;
}

/* about-scba ----------------------------- */
#about-scba{
    width: 100%;
    margin: 80px 0 150px;
}

#about-scba .text{
    margin-bottom: 60px;
}

#about-scba .scba-list{
    width: 726px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px 20px;
    margin: 0 auto;
}

#about-scba .scba-list .scba-item{
    width: 343px;
    box-shadow: 4px 4px 10px 0 #E4DED7;
    background-color: #fff;
    padding: 5px;
}
#about-scba .scba-list .scba-item .box{
    background-color: #fff;
    border: 1px solid #154F78;
    padding: 35px;
    text-align: left;
}
#about-scba .scba-list .scba-item .scba-title{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}
#about-scba .scba-list .scba-item .scba-title .initial{
    font-family: 'Playfair Display', sans-serif;
    font-size: 4rem;
    font-weight: 500;
    color: #154F78;
}
#about-scba .scba-list .scba-item .scba-title .scba-item-title{
    width: 219px;
}
#about-scba .scba-list .scba-item .scba-title .scba-item-title .en{
    font-family: 'Playfair Display', sans-serif;
    font-size: 0.87rem;
    color: #154F78;
    margin-bottom: 5px;
}
#about-scba .scba-list .scba-item .scba-title .scba-item-title .line{
    width: 100%;
    height: 1px;
    background-color: #24201D;
    margin-bottom: 5px;
}
#about-scba .scba-list .scba-item .scba-title .scba-item-title .ja{
    text-align: right;
}

#about-scba .scba-list .scba-item .info{
    margin-left: 36px;
}

/* recommendation ------------------------- */
#recommendation{
    background-color: #ECEAE4;
    padding: 0;
}

#recommendation .main-wrap{
    display: flex;
    align-items: stretch;
}
#recommendation .main-wrap .text{
    width: 60%;
    line-height: 2.5;
    padding: 150px 10%; 
}
#recommendation .main-wrap .img{
    width: 40%;
    overflow: hidden;
}
#recommendation .main-wrap .img img{
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
}

/* CTA ------------------------------------ */
.CTA{
    width: 100%;
    background-color: #826B2B;
    background-image: url(../img/back_CTA.jpg);
    padding: 100px 0;
}

.CTA .title-wrap{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.CTA .title-wrap .line-wrap{
    width: 30%;
}
.CTA .title-wrap .line-wrap .line-list li{
    border-bottom: 1px solid #D8CCA9;
}
.CTA .title-wrap .site-title-wrap{
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.CTA .title-wrap .site-title-wrap .sub,
.CTA .title-wrap .site-title-wrap .main{
    font-family: 'Cinzel', sans-serif;
    letter-spacing: 0.25em;
    line-height: 1;
    color: #D8CCA9;
    text-align: center;
}
.CTA .title-wrap .site-title-wrap .sub{
    font-size: 1.5rem;
    margin-bottom: 10px;
}
.CTA .title-wrap .site-title-wrap .main{
    margin-left: 20px;
    font-size: 6rem;
}

.CTA .btn-wrap .special{
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 10px;
    text-align: center;
    animation: blink 1.3s ease-in-out infinite alternate;
}
.CTA .btn-wrap .special .ex{
    font-size: 2.5rem;
    font-weight: 700;
}

@keyframes blink{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.CTA .btn-wrap .btn{
    display: block;
    width: 346px;
    background-color: #BBA362;
    border: 1px solid #24201D;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    padding: 15px 60px;
    margin: 0 auto;
    box-shadow: 0px 4px 0px 0px #24201D;
}
.CTA .btn-wrap .btn:hover{
    transform: translateY(5px);
    box-shadow: none;
    opacity: 1;
    background-color: #D8CCA9;
}

/* lesson-point --------------------------- */
#lesson-point{
    padding: 150px 0 750px;
}
#lesson-point .text-wrap{
    max-width: 800px;
    margin: 0 auto;
}
#lesson-point .text-wrap .title{
    width: 100%;
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 10px;
}
#lesson-point .text-wrap .title-line{
    width: 100%;
    height: 1px;
    background-color: #24201D;
    margin-bottom: 40px;
}
#lesson-point .text-wrap .description{
    line-height: 2;
    margin-bottom: 100px;
}

#lesson-point .reason-list{
    width: 100%;
    margin-bottom: 150px;
}
#lesson-point .reason-list .point1{
    width: 100%;
    margin-bottom: 150px;
    position: relative;
}

#lesson-point .reason-list .point1 .img{
    max-width: 800px;
    width: auto;
    height: 375px;
    overflow: hidden;
}
#lesson-point .reason-list .point1 .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#lesson-point .reason-list .point1 .info-wrap{
    max-width: 600px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 10px 0 #DED9CA;
    position: absolute;
    top: 55px;
    right: 5%;
    z-index: 10;
    padding: 5px;
}
#lesson-point .reason-list .reason-item .info-wrap .info-wrap-box{
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #826B2B;
    padding: 45px 100px;
}
#lesson-point .reason-list .reason-item .info-wrap .info-wrap-box .sub-title{
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 40px;
}
#lesson-point .reason-list .reason-item .info-wrap .info-wrap-box .info{
    line-height: 2;
}

#lesson-point .reason-list .point2{
    width: 100%;
    margin-bottom: 0px;
    position: relative;
}

#lesson-point .reason-list .point2 .img{
    max-width: 800px;
    width: auto;
    height: 450px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
#lesson-point .reason-list .point2 .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#lesson-point .reason-list .point2 .info-wrap{
    max-width: 600px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 4px 4px 10px 0 #DED9CA;
    position: absolute;
    top: 40px;
    left: 5%;
    z-index: 10;
    padding: 5px;
}

#lesson-point .reason-list .point2 .info-wrap .support-list dt{
    font-weight: 600;
    margin-bottom: 5px;
    position: relative;
}
#lesson-point .reason-list .point2 .info-wrap .support-list dt::before{
    content: "";
    width: 15px;
    height: 15px;
    background: url(../img/brilliant_black.gif) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 4px;
    left: -20px;
}
#lesson-point .reason-list .point2 .info-wrap .support-list dd{
    font-size: 0.875rem;
    margin-bottom: 30px;   
}
#lesson-point .reason-list .point2 .info-wrap .support-list dd:last-of-type{
    margin-bottom: 0;
}


/* lesson-image --------------------------- */
#lesson-image{
    background-color: #ECEAE4;
    padding: 150px 0;
}
#lesson-image .background-image-wrap{
    width: 800px;
    height: 700px;
    background: url(../img/back_lessonimage.jpg) no-repeat center;
    margin: 0 auto;
}

#lesson-image .background-image-wrap .section-title{
    color: #826B2B;
    text-align: center;
}
#lesson-image .background-image-wrap h3{
    font-size: 1rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 40px;
}
#lesson-image .background-image-wrap h3 .en{
    font-size: 0.875rem;
    font-family: 'Playfair Display', sans-serif;
    margin-right: 5px;
    text-align: center;
}

#lesson-image .background-image-wrap .info{
    text-align: center;
    line-height: 1.8;
    margin-bottom: 10px;
}

#lesson-image .background-image-wrap .week-list{
    width: 610px;
    margin: 0 auto 40px;
}
#lesson-image .background-image-wrap .week-list .week-item{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
#lesson-image .background-image-wrap .week-list .week-item:nth-child(2){
    margin-left: 120px;
}
#lesson-image .background-image-wrap .week-list .week-item:nth-child(3){
    margin-left: 240px;
}
#lesson-image .background-image-wrap .week-list .week-item:nth-child(4){
    margin-left: 360px;
}
#lesson-image .background-image-wrap .week-list .week-item dt{
    width: 63px;
    height: 63px;
    background-color: #24201D;
    color: #fff;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
#lesson-image .background-image-wrap .week-list .week-item dd{
    margin-left: 5px;
    position: relative;
}
#lesson-image .background-image-wrap .week-list .week-item dd::after{
    content: "";
    width: 230px;
    height: 1px;
    background-color: #24201D;
    position: absolute;
    bottom: -7px;
    left: -35px;
}

#lesson-image .background-image-wrap .essentials{
    width: 670px;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    padding: 15px 35px;
    margin: 0 auto 45px;
}
#lesson-image .background-image-wrap .essentials .essentials-title{
    width: 135px;
    flex-shrink: 0;
    font-size: 0.875rem;
    border-right: 1px solid #24201D;
    padding-right: 5px;
}
#lesson-image .background-image-wrap .essentials .essentials-list{
    margin-left: 10px;
}
#lesson-image .background-image-wrap .essentials .essentials-list .essentials-item{
    display: flex;
}
#lesson-image .background-image-wrap .essentials .essentials-list .essentials-item dt{
    width: 112px;
    flex-shrink: 0;
    font-weight: 600;
}
#lesson-image .background-image-wrap .essentials .essentials-list .essentials-item dd{
    font-size: 0.875rem;
}

/* parallax2 ------------------------------ */
#parallax2{
    width: 100%;
    height: 400px;
    background-image: url(../img/parallax2.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* customers-voice ------------------------ */
#customers-voice{
    padding: 150px 0;
}

#customers-voice .comment-wrap{
    width: 100%;
    background-color: #fff;
    padding: 40px 30px;
}
#customers-voice .comment-wrap .customer{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
#customers-voice .comment-wrap .customer .info{
    margin-left: 20px;
}

#customers-voice .comment-wrap .review{
    margin-bottom: 40px;
}
#customers-voice .comment-wrap .review img{
    width: 20px;
}
#customers-voice .comment-wrap .title{
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 40px;
}

/* fee ------------------------------------ */
#fee{
    background-color: #fff;
    padding: 150px 0;
}
#fee .section-title{
    text-align: right;
}
#fee .main-wrap{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
#fee .main-wrap .box{
    width: 450px;
    flex-shrink: 0;
    background-color: #ECEAE4;
    border: 1px solid #826B2B;
    padding: 5px;
}
#fee .main-wrap .sub{
    width: 100%;
}
#fee .main-wrap .main{
    width: 100%;
    padding: 40px 30px;
}
#fee .main-wrap .main>p{
    text-align: center;
}
#fee .main-wrap .main>p .small{
    font-size: 1rem;
}
#fee .main-wrap .main>p .big{
    font-size: 2.5rem;
    font-weight: 700;
    color: #826B2B;
}
#fee .main-wrap .main>p .color{
    color: #826B2B;
}
#fee .main-wrap .main>p .extra{
    font-size: 4rem;
    font-weight: 700;
    color: #D39C03;
}

#fee .main-wrap .fee{
    font-size: 1.5rem;
}
#fee .main-wrap .fee-ex{
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 10px;
}

#fee .main-wrap .info{
    width: calc(100% - 450px);
    margin-left: 30px;
}
#fee .main-wrap .info dt{
    font-weight: 600;
    position: relative;
}
#fee .main-wrap .info dt::before{
    content: "";
    width: 15px;
    height: 15px;
    background: url(../img/brilliant_black.gif) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 4px;
    left: -20px;
}
#fee .main-wrap .info dd{
    font-size: 0.875rem;
    margin-bottom: 20px;
}

/* apply ---------------------------------- */
#apply{
    background-color: #ECEAE4;
    padding: 150px 0;
}

#apply .text{
    line-height: 1.8;
    text-align: center;
    margin-bottom: 60px;
}

#apply .step-list{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}
#apply .step-item{
    width: 250px;
    height: 270px;
    background-color: #fff;
    border: 1px solid #826B2B;
    padding: 30px 25px;
    position: relative;
}
#apply .step-item::after{
    content: "▶︎";
    width: 15px;
    height: 15px;
    color: #826B2B;
    position: absolute;
    top: 127px;
    right: -20px;
}
#apply .step-item:last-of-type::after{
    content: none;
}
#apply .step-item > p{
    text-align: center;
}
#apply .step-item .no{
    font-family: 'Cinzel', sans-serif;
    font-size: 2rem;
    line-height: 1;
    color: #826B2B;
    margin-bottom: 30px;
}
#apply .step-item .title{
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 30px;
}
#apply .step-item .title .small{
    font-size: 1.25rem;
}

/* faq ------------------------------------ */
#faq{
    background-color: #fff;
    padding: 150px 0;
}
#faq .section-title{
    text-align: right;
}
#faq .section-title .en{
    color: #826B2B;
}

#faq .faq-list{
    width: 100%;
}
#faq .faq-list dt{
    width: 100%;
    background-color: #ECEAE4;
    padding: 25px 50px;
    margin-top: 15px;
    cursor: pointer;
    position: relative;
}
#faq .faq-list .question{
    position: relative;
}
#faq .faq-list .question::before{
    content: "Q";
    width: 19px;
    height: 19px;
    font-family: 'Playfair Display', sans-serif;
    font-size: 1.5rem;
    color: #154F78;
    position: absolute;
    top: -5px;
    left: -25px;
}
#faq .faq-list dt:first-child{
    margin-top: 0;
}
#faq .faq-list dt::after{
    content: "";
    width: 10px;
    height: 10px;
    background-color: #ECEAE4;
    border-top: 1px solid #24201D;
    border-right: 1px solid #24201D;
    transform: rotate(45deg);
    position: absolute;
    top: 33px;
    right: 25px;
}
#faq .faq-list dt.active{
    background-color: rgba(236, 234, 228, 0.5);
}
#faq .faq-list dt.active::after{
    background-color: rgba(236, 234, 228, 0.5);
    transform: rotate(-45deg);
}

#faq .faq-list dd{
    width: 100%;
    background-color: rgba(236, 234, 228, 0.5);
    padding: 0 40px 25px 50px;
}
#faq .faq-list dd .A-icon{
    font-family: 'Playfair Display', sans-serif;
    color: #826B2B;
    margin-left: 20px;
    position: relative;
}
#faq .faq-list dd .A-icon::before{
    content: "";
    width: 15px;
    height: 1px;
    background-color: #24201D;
    position: absolute;
    top: 12px;
    left: -20px;
}

/* instructor ---------------------------- */
#instructor{
    padding: 150px 0 0;
}
#instructor .title-line{
    margin-bottom: 10px;
}

#instructor .name{
    font-family: 'Cinzel', sans-serif;
    font-size: 2rem;
    line-height: 1;
    color: #826B2B;
    text-align: right;
    margin-bottom: 10px;
}

#instructor .img-box{
    width: 45%;
    height: auto;
    border-radius: 180px 180px 0 0;
    border: 1px solid #826B2B;
    float: left;
    padding: 5px;
    margin: 0 50px 10px 0;
}
#instructor .img{
    width: 100%;
    height: 100%;
    border-radius: 180px 180px 0 0;
    overflow: hidden;
}
#instructor .img img{
    width: 100%;
    object-fit: cover;
}

#instructor .text{
    line-height: 2.5;
    text-align: justify;
    margin-top: 100px;
    margin-bottom: 150px;
}

/* footer -------------------------------- */
#footer{
    width: 100%;
    background-color: #24201D;
    background: url(../img/back_footer.jpg) no-repeat center;
    background-size: cover;
    color: #F5F3F1;
    padding: 0;
}

#footer .footer-main-wrap{
    padding: 100px 0;
    display: flex;
    justify-content: space-between;
}
#footer .footer-main-wrap .footer-title-wrap{
    width: 40%;
}
#footer .footer-main-wrap .footer-title-wrap .sub-title{
    font-family: 'Cinzel', sans-serif;
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: 0.25em;
}
#footer .footer-main-wrap .footer-title-wrap .main-title{
    font-family: 'Cinzel', sans-serif;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 0.25em;
    margin-bottom: 30px;
}
#footer .footer-main-wrap .footer-title-wrap .sns-list{
    display: flex;
    align-items: center;
    gap: 20px;
}
#footer .footer-main-wrap .footer-title-wrap .sns-list li{
    width: 30px;
    height: 30px;
}
#footer .footer-main-wrap .footer-title-wrap .sns-list li img{
    width: 100%;
}

#footer .footer-main-wrap .footer-nav{
    width: 60%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#footer .footer-main-wrap .footer-nav-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 50px;
}
#footer .footer-main-wrap .footer-nav li a{
    color: #F5F3F1;
    font-size: 0.875rem;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
}

#footer .copyright-container{
    width: 100%;
    background-color: #24201D;
    padding: 10px 0;
}
#footer .copyright-container .copyright{
    color: #F5F3F1;
    font-size: 0.75rem;
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    text-align: center;
}



/*-------------------------------------------
タブレット
-------------------------------------------*/
@media screen and (max-width: 800px) {
    
    .tab-br{
        display: inline;
    }
    .wrapper800{
        width: 96%;
        margin: 0 auto;
    }
    .wrapper1000{
        width: 90%;
        margin: 0 auto;
    }

    /* header ------------------------------------ */

    #header .site-logo{
        left: 20px;
    }
    #header .site-logo a.active{
        display: block;
        color: #FFFBFE;
    }

    #header .hamburger{
        right: 20px;
    }

    #header .navi .nav-container{
        flex-direction: column;
        margin: 140px auto;
    }

    #header .navi .nav-container .title-wrap{
        width: 100%;
    }
    #header .navi .nav-container .title-wrap .sub-title {
        display: none;
    }

    #header .navi .nav-container .title-wrap .title {
        display: none;
    }
    #header .navi .nav-container .title-wrap .sns-list{
        width: 116px;
        margin: 0 auto;
    }

    #header .navi .nav-container .nav-wrap{
        width: 374px;
        margin: 0 auto 60px;
    }

    /* introduction ---------------------------- */
    #introduction .main-wrap{
        flex-direction: column;
    }
    #introduction .main-wrap .img{
        display: none;
    }

    #introduction .main-wrap .text{
        width: 100%;
        padding: 0 3%;
    }
    #introduction .main-wrap p{
        text-align: center;
    }

    /* rising-problem ------------------------- */
    #rising-problem .img-wrap{
        height: auto;
    }

    #rising-problem .text-wrap{
        width: 100%;
        position: static;
        text-align: center;
        padding: 80px 5% 100px;
    }
    #rising-problem .text-wrap .problem-list{
        max-width: 360px;
        text-align: left;
        margin: 0 auto 30px;
    }
    #rising-problem .text-wrap .emphasize{
        display: inline-block;
        text-align: center;
    }

    /* problems ------------------------------- */
    #problems{
        padding: 60px 0 100px;
    }

    #problems .text1{
        margin: 0 2% 60px;
    }

    /* parallax1 ------------------------------ */
    #parallax1{
        height: 300px;
        background-attachment: scroll;
        background-position: top;
    }

    /* solution ------------------------------- */
    #solution{
        margin-top: 100px;    
    }

    /* CTA ------------------------------------ */
    .CTA .title-wrap .line-wrap{
        width: 25%;
    }
    .CTA .title-wrap .site-title-wrap{
        width: 50%;
    }

    /* lesson-point --------------------------- */
    #lesson-point{
        padding: 150px 0;
    }
    #lesson-point .text-wrap{
        margin: 0 5%;
    }
    #lesson-point .reason-list{
        margin-bottom: 0;
    }
    #lesson-point .reason-list .point1{
        margin-bottom: 80px;
        position: static;
    }

    #lesson-point .reason-list .point1 .img img{
        object-position: left;
    }

    #lesson-point .reason-list .point1 .info-wrap{
        max-width: 100%;
        box-shadow: none;
        position: static;
    }

    #lesson-point .reason-list .point2{
        position: static;
    }

    #lesson-point .reason-list .point2 .img{
        max-width: 100%;
        height: 375px;
        position: static;
    }
    #lesson-point .reason-list .point2 .img img{
        object-position: right;
    }

    #lesson-point .reason-list .point2 .info-wrap{
        max-width: 100%;
        box-shadow: none;
        position: static;
    }

    /* lesson-image --------------------------- */
    #lesson-image .background-image-wrap{
        width: 100%;
    }

    #lesson-image .background-image-wrap .section-title{
        margin-bottom: 15px;
    }

    /* parallax2 ------------------------------ */
    #parallax2{
        height: 300px;
        background-attachment: scroll;
        background-position: center;
    }

    /* apply ---------------------------------- */
    #apply .step-list{
        flex-direction: column;
    }
    #apply .step-item::after{
        content: "▼";
        top: 270px;
        left: 50%;
        transform: translateX(-50%);
    }

}

/*-------------------------------------------

-------------------------------------------*/
@media screen and (max-width: 740px) {

    /* problems ------------------------------- */
    #problems .problem-list{
        width: 570px;
    }

    #problems .problem-list .problem-item:nth-child(3){
        margin-left: 0;
    }

    /* about-scba ----------------------------- */
    #about-scba .scba-list{
        width: 343px;
        grid-template-columns: repeat(1,1fr);
        gap: 20px;
    }

    /* recommendation ------------------------- */
    #recommendation .main-wrap{
        /* display: flex; */
        flex-direction: column;
        align-items: center;
    }
    #recommendation .main-wrap .text{
        width: 100%;
        line-height: 2.5;
        padding: 100px 2%; 
        text-align: center;
    }
    #recommendation .main-wrap .img{
        width: 100%;
        overflow: scroll;
    }
    #recommendation .main-wrap .img img{
        width: 100%;
        height: auto;
        /* object-fit: cover; */
        object-position: center;
    }

    /* CTA ------------------------------------ */
    .CTA .title-wrap .line-wrap{
        width: 20%;
    }
    .CTA .title-wrap .site-title-wrap{
        width: 60%;
    }

    /* lesson-image --------------------------- */
    #lesson-image .background-image-wrap .info{
        padding: 0 5%;
    }

    #lesson-image .background-image-wrap .week-list{
        width: 273px;
    }
    #lesson-image .background-image-wrap .week-list .week-item:nth-child(2){
        margin-left: 0;
    }
    #lesson-image .background-image-wrap .week-list .week-item:nth-child(3){
        margin-left: 0;
    }
    #lesson-image .background-image-wrap .week-list .week-item:nth-child(4){
        margin-left: 0;
    }

    #lesson-image .background-image-wrap .essentials{
        width: 100%;
        flex-direction: column;
    }
    #lesson-image .background-image-wrap .essentials .essentials-title{
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #24201D;
        padding-right: 0;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    #lesson-image .background-image-wrap .essentials .essentials-list{
        margin-left: 0;
    }

    /* fee ------------------------------------ */
    #fee .main-wrap{
        align-items: center;
        flex-direction: column;
    }
    #fee .main-wrap .box{
        width: 100%;
    }
    #fee .main-wrap .info{
        width: 96%;
        margin-top: 30px;
    }
    #fee .main-wrap .info dd:last-child{
        margin-bottom: 0;
    }

    /* footer -------------------------------- */
    #footer .footer-main-wrap .footer-nav-list{
        grid-template-columns: repeat(1, 1fr);
    }

}

/*-------------------------------------------

-------------------------------------------*/
@media screen and (max-width: 600px) {


    /* problems ------------------------------- */
    #problems .problem-list{
        width: 270px;
        flex-direction: column;
        gap: 20px;
    }

    #problems .problem-list .problem-item:nth-child(n+3){
        margin-top: 0;
    }

    #problems .line-box1{
        max-width: 400px;
        height: 1020px;
    }
    #problems .text3{
        font-size: 1.5rem;
    }
    #problems .text3 .small{
        font-size: 1.25rem;
    }

    /* parallax1 ------------------------------ */
    #parallax1{
        background-image: url(../img/parallax1-sp.jpg);
    }

    /* solution ------------------------------- */
    #solution p{
        font-size: 1.5rem;
    }
    #solution p .small{
        font-size: 1.25rem;
    }

    /* CTA ------------------------------------ */
    .CTA{
        padding: 60px 0;
    }

    .CTA .title-wrap .site-title-wrap .sub{
        font-size: 1.25rem;
    }
    .CTA .title-wrap .site-title-wrap .main{
        font-size: 4rem;
    }

    /* lesson-point --------------------------- */
    #lesson-point .text-wrap .title{
        font-size: 1.5rem;
    }

    #lesson-point .reason-list .reason-item .info-wrap .info-wrap-box{
        padding: 45px 2%;
    }

    #lesson-point .reason-list .point2 .info-wrap .support-list{
        margin-left: 20px;
    }

    /* lesson-image --------------------------- */
    #lesson-image{
        padding: 150px 0 300px;
    }

    /* customers-voice ------------------------ */
    #customers-voice .section-title .en{
        font-size: 4rem;

    }

    /* footer -------------------------------- */
    #footer .footer-main-wrap{
        flex-direction: column;
    }
    #footer .footer-main-wrap .footer-title-wrap{
        width: 100%;
    }
    #footer .footer-main-wrap .footer-title-wrap .sub-title{
        text-align: center;
    }
    #footer .footer-main-wrap .footer-title-wrap .main-title{
        text-align: center;
    }
    #footer .footer-main-wrap .footer-title-wrap .sns-list{
        width: 130px;
        margin: 0 auto 40px;
    }

    #footer .footer-main-wrap .footer-nav{
        width: 100%;
        justify-content: center;
    }
    #footer .footer-main-wrap .footer-nav-list{
        grid-template-columns: repeat(1, 1fr);
    }

}

/*-------------------------------------------
スマホ
-------------------------------------------*/
@media screen and (max-width: 430px) {

    .sp-br{
        display: inline;
    }

    /* サブタイトル */
    .section-title .en{
        font-size: 3rem;
        letter-spacing: 0;
    }
    .section-title .en .small{
        font-size: 2.25rem;
    }

    /* header ------------------------------------ */
    #header .site-logo{
        left: 5%;
    }
    #header .hamburger{
        right: 5%;
    }

    #header .navi .nav-container .nav-wrap{
        width: 160px;
    }
    #header .navi .nav-container .nav-wrap li{
        max-width: 160px;
        margin: 0 auto 30px;
    }
    #header .navi .nav-container .nav-wrap .navi-item{
        justify-content: center;
    }
    #header .navi .nav-container .nav-wrap .navi-item .en{
        display: none;
    }

    /* main-visual ---------------------------- */
    #main-visual .site-title-wrap {
        width: 95%;
        margin: 50px auto 0;
    }
    #main-visual .site-title-wrap p{
        text-align: center;
    }
    #main-visual .site-title-wrap .sub-title{
        text-align: center;
    }
    #main-visual .site-title-wrap .title{
        font-size: 5rem;
    }
    #main-visual .site-title-wrap .ja{
        text-align: center;
    }
    #main-visual .site-title-wrap .ja::before{
        content: none;
    }
    #main-visual .scroll{
        margin-top: 30px;
    }
    
    /* problems ------------------------------- */
    #problems .problem-list{
        width: 270px;
        flex-direction: column;
        gap: 20px;
    }

    #problems .problem-list .problem-item:nth-child(n+3){
        margin-top: 0;
    }

    #problems .line-box1{
        max-width: 300px;
    }
    #problems .text2,
    #problems .text3{
        font-size: 1.25rem;
    }
    #problems .text3 .small{
        font-size: 0.93rem;
    }

    
    /* parallax1 ------------------------------ */
    #parallax1{
        height: 250px;
    }

    /* solution ------------------------------- */
    #solution p{
        font-size: 1.25rem;
    }
    #solution p .small{
        font-size: 0.93rem;
    }

    /* about-scba ----------------------------- */
    #about-scba{
        margin: 60px 0 100px;
    }
    
    /* CTA ------------------------------------ */
    .CTA .title-wrap .site-title-wrap .sub{
        font-size: 1rem;
    }
    .CTA .title-wrap .site-title-wrap .main{
        margin-left: 15px;
        font-size: 3.5rem;
    }

    /* lesson-point --------------------------- */
    #lesson-point{
        padding: 100px 0;
    }

     /* lesson-image --------------------------- */
    #lesson-image{
        padding: 100px 0 150px;
    }

    /* customers-voice ------------------------ */
    #customers-voice{
        padding: 100px 0;
    }

    /* fee ------------------------------------ */
    #fee{
        background-color: #fff;
        padding: 100px 0;
    }
    #fee .main-wrap .main{
        padding: 40px 5%;
    }
    #fee .main-wrap .info{
        width: 96%;
        margin-top: 30px;
    }

    /* apply ---------------------------------- */
    #apply{
        padding: 100px 0;
    }

    /* faq ------------------------------------ */
    #faq{
        padding: 100px 0;
    }

    /* instructor ---------------------------- */
    #instructor{
        padding: 100px 0 0;
    }

    #instructor .img-box{
        width: 80%;
        float: none;
        margin: 10px auto 40px;
    }
    #instructor .text{
        margin: 0 5% 100px;
    }


}