html{
    background: #000;
}

body {
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.5;
    font-size: 16px;
    letter-spacing: 1.2px;
    background: #000;
}

.sp-br{
    display: none;
}

img{
    width: 100%;
}

#top-main{
    position: relative;
}

#top-main .path{
    display: none;
}

#top-main .main-visual{
    position: relative;
    height: 92vh;
    z-index: 1;
}

.pc-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-video{
    display: none;
}

#top-main .main-visual-content{
    width: 90%;
    position: absolute;
    left: 7%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    z-index: 2;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.main-visual-content h1{
    font-size: 88px;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-visual-content h1 small{
    font-size: 34px;
    font-weight: 600;
}

.mv-scroll-n-banner{
    display: flex;
}

.main-visual-content .mv-banner{
    width: 100%;
    height: 100px;
    max-width: 430px;
    object-fit: contain;
    margin-top: 70px;
}

.main-visual-content,
.intro-wrapper,
.news-wrapper,
.service-wrapper,
.simulation-wrapper,
.more-service-wrapper,
#top-main .option-wrapper,
.reviews-wrapper,
.access-wrapper,
.contact-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

/* .intro-wrapper,
.news-wrapper,
.service-wrapper,
.service-item,
.simulation-wrapper,
.more-service-wrapper,
.option-wrapper,
.reviews-wrapper,
.access-wrapper,
.contact-wrapper{
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.intro-wrapper.active,
.news-wrapper.active,
.service-wrapper.active,
.service-item.active,
.simulation-wrapper.active,
.more-service-wrapper.active,
.option-wrapper.active,
.reviews-wrapper.active,
.access-wrapper.active,
.contact-wrapper.active{
    opacity: 1;
    transform: translateY(0);
} */


.scroll-gif{
    height: 30px;
    display: flex;
    align-items: center;
    gap: 5px;
    transform: rotate(90deg);
    margin-top: 74px;
    margin-left: -72px;
}

.scroll-lines{
    overflow: hidden;
    display: flex;
    height: 1.5px;
    width: 123px;
    background-color: #a4a4a4;
}

.scroll-line{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    height: 1.5px;
    animation: 2s slide infinite linear;
}

.orange-line{
    display: block;
    height: 1.5px;
    width: 61.5px;
    background-color: #cb6500;
}

.invisible-line{
    display: block;
    height: 1.5px;
    width: 61.5px;
    background-color: transparent;
} 

@keyframes slide {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

.top-grad{
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 350px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #191919c9 50%, #191919 100%);
    z-index: 1;
}

.news-section{
    padding: 50px 0;
    background-color: #fff;
}

.news-wrapper{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.news-section .section-title{
    text-align: center;
    color: #2d2d2d;
    margin-top: 1rem;
}

.news-section-sp{
    display: none;
    background-color: #fff;
}

.news-item-wrapper{
    width: 100%;
}

.news-item{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 18px;
    border-bottom: 1px solid #b3b3b3;
    padding-bottom: 15px;
    margin-bottom: 25px;
    color: #2d2d2d;
}

.news-item > .news-text > a{
    color: blue;
    text-decoration: underline;
}

.news-item > br{
    display: none;
}

.news-date{
    width: 110px;
}

.date{
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-item:nth-last-child(1){
    border-bottom: 0;
    margin-bottom: 0;
}

.new-news{
    font-size: 12px;
    padding: 1px 10px;
    background-color: #D10715;
    color: #fff;
}

.new-news-blue{
    font-size: 12px;
    padding: 1px 10px;
    background-color: #3300b4;
    color: #fff;
}

.news-item .campaign-text{
    font-size: 10px;
    color: #AE8229;
}

.about-section,
.service-section,
.youtube-section,
#top-main .options-section,
.banner-section,
.peace-section,
.structure-section,
.review-section,
.maintenance-section,
.sns-section,
.concept-section,
.pmark-section,
.access-section{
    padding: 104px 0 124px 0;
    background-color: #fff;
}

.about-section{
    position: relative;
    background-image: url(/assets/images/top/about_bg.webp);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    z-index: 0;
}

.about-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 64px;
}

.about-imgs{
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 34px;
}


.about-content{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-content .section-title{
    text-align: left;
    margin: 0;
}

.eng-title{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #896937;
    font-size: 1rem;
    font-weight: 600;
    margin-right: auto;
}

.eng-title-shape{
    width: 8px;
    height: 16px;
    background-color: #896937;
}

.about-section .eng-title,
.access-content .eng-title{
    color: #EFD57F;
}

.about-section .eng-title-shape,
.access-content .eng-title-shape{
    background-color: #EFD57F;
}

.about-yellow-line{
    color: #EFD57F;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.service-section{
    color: #2d2d2d;
}

.service-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 50px;
}

.section-title{
    text-align: center;
    margin: 40px 0 50px 0;
}

.section-title h2{
    font-size: 42px;
    margin-bottom: 1rem;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.brown-txt{
    color: #896937;
}

.service-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.service-card{
    border: 1px solid #E0DEDA;
    border-radius: 5px;
    background-color: #FBF9F5;
}

.service-card img{
    width: 100%;
    height: 206px;
    object-fit: cover;
}

.service-card-content{
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card-num{
    font-size: 18px;
    font-style: italic;
    color: #896937;
}

.service-card-content h3{
    font-size: 20px;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.structure-section{
    width: 100%;
    background-image: url(/assets/images/top/structure_bg.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    background-color: #f3eee7;
}

.structure-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    color: #2d2d2d;
}

.structure-title{
    display: flex;
    flex-direction: column;
}

.structure-title .section-title{
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
    margin-bottom: 20px;
}

.structure-title .section-title p{
    max-width: 480px;
}

.toggle-and-img{
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.toggle-and-img img{
    max-width: 156px;
    object-fit: contain;
}

.toggle-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fdf9f1;
  border: 1.5px solid #c9a463;
  border-radius: 30px;
  padding: 3px;
  width: fit-content;
  margin-left: 6%;
}

.toggle-tab {
  border: none;
  background: transparent;
  color: #8a6d3b;
  font-weight: bold;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}

.toggle-tab.active {
  background: linear-gradient(135deg, #c9a463, #8a6d3b);
  color: #ffffff;
}

.coat-content.premium-content,
.coat-content.ultimate-content {
  display: none;
}

.coat-content.premium-content.active,
.coat-content.ultimate-content.active {
  display: grid;
}

.coat-content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 60px;
}

.coat-points{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.coat-point{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.coat-num{
    font-size: 36px;
    font-style: italic;
    color: #896937;
}

.coat-name{
    display: flex;
    flex-direction: column;
}

.eng-coat-name{
    font-family: "MFW-RyuminPro-ExHeavy";
}

.ultimate-coat{
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    background: linear-gradient(135deg, #c9a463, #8a6d3b);
    color: #fff;
}



.two-videos-block{
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
    margin-bottom: 90px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 26px;
}

.two-videos-block .youtube-card iframe{
    height: 250px;
}

.youtube-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    color: #2d2d2d;
}

.youtube-cards{
    margin: 50px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 26px;
}


.youtube-card{
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 14px;
}

.youtube-card iframe{
    width: 100%;
    height: 178px;
}

/* .youtube-wrapper p:nth-last-child(1){
    text-align: center;
} */

#top-main .options-section{
    background-color: #252C33;
    color: #fff;
}

#top-main .faq-section{
    background-color: #fff;
    color: #2d2d2d;
}

#top-main .option-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

.red-option-box{
    font-size: 14px;
    color: #fff;
    background-color: #D10715;
    border: 1px solid #fff;
    padding: 5px;
    margin-left: 10px;
    margin-top: 2px;
}

.banner-section{
    width: 100%;
    background-image: url(/assets/images/top/banner_img.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.banner-wrapper{
    width: 90%;
    max-width: 1160px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
}

.banner-content{
    max-width: 756px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: #fff;
}

.banner-content h2{
    font-size: 44px;
    line-height: 1.3;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.gradient-btn{
    width: 100%;
    max-width: 466px;
    height: 72px;
    border: 1px solid #fff;
    color: #fff;
    background: linear-gradient(to right, #FF8206 0%, #FF9B38 60%, #B75B00 100%);

    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.banner-content .gradient-btn{
    font-family: "MFW-RyuminPro-ExHeavy";
    font-weight: 600;
}

.emblem-title{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
}

.emblem-title .emblem,
.review-title .emblem{
    margin-left: -20px;
}

/* .emblem{
    width: 150px;
    height: 150px;
    border-radius: 100px;

    transform: rotate(-15deg);

    background-color: #840B73;
    color: #fff;

    box-shadow: 5px 5px 0 0 #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    font-size: 20px;
    font-weight: 600;
    font-family: "MFW-RyuminPro-ExHeavy";
} */

/* .banner-emblem{
    background-color: #191670;
} */

.emblem{
    width: 150px;
    object-fit: contain;
}

.sp-emblem{
    display: none;
}

.peace-section{
    background-color: #F6F2EC;
}

.peace-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #2d2d2d;
}

.peace-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.peace-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px 20px;
    background-color: #FBF9F5;
    border: 1px solid #E0DEDA;
    border-radius: 5px;
}

.peace-card img{
    width: 48px;
    object-fit: contain;
}

.peace-card h3{
    font-size: 20px;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.review-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 50px;

    color: #2d2d2d;
}

.review-title{
    display: flex;
    gap: 20px;
}

.review-title-content{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.review-title-content .section-title{
    margin: 0;
}

.review-card-wrapper p{
    color: #896937;
    width: fit-content;
    display: inline-flex;
}

.review-card p:nth-child(2){
    color: #2d2d2d;
}

.review-card-wrapper span{
    display: inline-flex;
    width: fit-content;
}

.review-card-wrapper .gradient-btn{
    width: fit-content;
    height: 26px;
    font-size: 12px;
    color: #fff;
    border-radius: 20px;
    padding: 5px 20px;
    background: linear-gradient(to right, #C7A456 0%, #8E6E28 100%);
}

.review-cards{
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.review-card{
    display: flex;
    flex-direction: column;
    gap: 20px;

    padding: 30px 20px;

    background-color: #FBF9F5;
    border: 1px solid #896937;
    border-radius: 5px;
    color: #000000;
}

.review-card p:nth-child(1){
    color: #896937;
}

.review-name{
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.review-name span:nth-last-child(1){
    color: #896937;
}

.review-profile{
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    color: #FBF9F5;
    background-color: #896937;
    padding: 10px 15px;
}

.maintenance-section{
    background-color: #F6F2EC;
}

.maintenance-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    color: #2d2d2d;
}

.maintenance-subtitle{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
}

.maintenance-subtitle p{
    font-size: 30px;
    padding: 10px 0;
    width: 100%;
    background-color: #E9E3D9;
    border-top: 1px solid #896937;
    border-bottom: 1px solid #896937;
    font-weight: 600;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.small-triangle{
    display: block;
    width: 0;
	height: 0;
    margin: 0 auto;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #896937;
}

.subscription-plans{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 40px auto;
}

.subscription-plan{
    background-color: #fff;
    border-radius: 5px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;

    text-align: center;
}

.plan-title{
    width: 100%;
    font-size: 20px;
    padding: 12px 0;

    background: linear-gradient(to right, #95897D 0%, #71563A 100%);
    color: #fff;
    border-radius: 5px 5px 0 0;
    font-weight: 600;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.second-price{
    margin-left: 6px;
    font-size: 30px;
    font-weight: 500;
    color: #72563B;
}

.plan-time{
    width: fit-content;
    margin: 0 auto;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    /* border-image-source: linear-gradient(to right, #95897E, #71563B); */
    background-image: 
    linear-gradient(#ffffff, #ffffff), 
    linear-gradient(to right, #95897E, #71563B);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 30px;
    padding: 2px;
}

.sub-last-txt{
    font-size: 12px;
    margin-bottom: -10px;
}

.plan-time p:nth-child(1){
    padding: 6px 20px;
}

.plan-time p:nth-child(2){
    border-radius: 30px;
    padding: 6px 20px;
    background-color: #E9E3D9;
    margin-bottom: 0;
}

.calculation-txt{
    font-size: 12px;
    margin-top: -10px;
}

#top-main .main-price{
    width: 100%;
    padding: 10px 0;
    color: #fff;
    background-color: #61646D;
    font-size: 22px;
    font-weight: 600;
    border-radius: 0 0 5px 5px;
}

#top-main .main-price small{
    font-size: 16px;
}

.silver-plan .plan-title{
    background: linear-gradient(to right, #B8B8B8 0%, #6E6E6E 100%);
}

.silver-plan .second-price{
    color: #6E6E6E;
}

.silver-plan .plan-time{
    background-image: 
    linear-gradient(#ffffff, #ffffff), 
    linear-gradient(to right, #B8B8B8, #6E6E6E);
}

.silver-plan .plan-time p:nth-child(2){
    background-color: #E7E7E7;
}

.gold-plan .plan-title{
    background: linear-gradient(to right, #C7A456 0%, #8E6E28 100%);
}

.gold-plan .second-price{
    color: #A9883E;
}

.gold-plan .plan-time{
    background-image: 
    linear-gradient(#ffffff, #ffffff), 
    linear-gradient(to right, #C7A456, #8E6E28);
}

.gold-plan .plan-time p:nth-child(2){
    background-color: #F7EAD7;
}

.maintenance-flow{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;

    padding: 2rem 1rem;

    background-color: #E9E3D9;
    border: 1px solid #2d2d2d;
    border-radius: 5px;
    margin: 32px auto;
}

.maintenance-flow h3{
    font-size: 24px;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.flow-text{
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    color: #323232;
}

.flow-box{
    font-size: 14px;
    padding: 16px 10px;
    border-radius: 3px;
    background-color: #F6F2EC;
    border: 1px solid #323232;
}

.menu-table{
    width: 100%;
    border: 1px solid #896937;
    outline: none;
}

#top-main tr{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    border-bottom: 1px solid #896937;
}

#top-main tr:nth-last-child(1){
    border-bottom: none;
}

#top-main th{
    width: 100%;
    background-color: #E9E3D9;
    padding: 10px 0;
    text-align: center;
}

#top-main tr th:nth-child(1), 
#top-main tr th:nth-child(2),
#top-main tr td:nth-child(1), 
#top-main tr td:nth-child(2){
    border-right: 1px solid #896937;
}

#top-main td{
    width: 100%;
    background-color: #fff;
    padding: 10px 16px;
}

#top-main .small-table-txt{
    font-size: 14px;
    text-align: right;
    margin-top: 1rem;
}

.sns-section{
    background-color: #252C33;

}

.sns-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.sns-card{
    border-radius: 5px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #fff;
    color: #2d2d2d;
}

.sns-btn, .sns-link, #view-more-drop-btn{
    margin-top: auto;
    height: 52px;
    border-radius: 30px;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.sns-icon{
    width: 32px;
    object-fit: contain;
}

.sns-card h3{
    font-size: 24px;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.sns-btn, #view-more-drop-btn{
    background-color: #000;
    color: #fff;
    width: 100%;
    max-width: 312px;
    padding: 10px 16px;
}

#view-more-drop-btn{
    cursor: pointer;
    max-width: 200px;
    margin: 24px auto;
    transition: all 0.3s ease;
}

#view-more-drop-btn:hover{
    background-color: #2f3033;
}

.hidden{
    display: none;
}

.sns-links{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sns-link{
    width: 100%;
    max-width: 174px;
    padding: 10px 16px;
    border: 1px solid #FF6011;
    background-color: #fff;
}

.sns-link-img{
    width: 100%;
    height: 30px;
    object-fit: contain;
}

.sns-link:nth-child(2){
    border: 1px solid #E70013;
}

.concept-section{
    background-color: #F6F2EC;
}

.concept-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    color: #2d2d2d;
    text-align: center;
}

.concept-wrapper h2, 
.concept-wrapper p:nth-child(2),
.concept-wrapper p:nth-child(4){
    width: 90%;
    margin: 0 auto;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.concept-wrapper p:nth-child(3){
    margin: 56px auto;
    font-size: 18px;
    font-family: "MFW-RyuminPro-Regular"
}

.concept-wrapper p:nth-child(4){
    font-size: 24px;
    font-weight: 600;
}

.pmark-section{
    background-color: #2E2D35;
}

.pmark-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    justify-content: space-between;
    gap: 2rem;
}

.pmark-card{
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.pmark-card img{
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.pmark-txt{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pmark-txt h3{
    color: #C5A254;
    font-size: 18px;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.divider-line{
    width: 2px;
    height: 100%;
    background-color: #fff;
}

.mid-byakko-logo{
    width: 100%;
    background-color: #000;
    padding: 30px 0;
}

.eng-logo-wrapper{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

.eng-logo-wrapper img{
    width: 140px;
    object-fit: contain;
}

.access-section{
    background-color: #2E2D35;
}

.access-wrapper{
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1rem;
    margin-bottom: 60px;
}

.access-content{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.access-content img{
    width: 80%;
}

.access-content h2{
    font-size: 32px;
    font-family: "MFW-RyuminPro-ExHeavy";
}

.access-content p:nth-child(3), 
.access-content p:nth-child(4){
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1rem;
}

.access-gradient-link{
    display: block;
    width: 90%;
    max-width: 364px;
    margin: 0 auto;
    height: 72px;
    border: 1px solid #fff;
    color: #fff;
    background: linear-gradient(to right, #C7A456 0%, #8E6E28 100%);

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "MFW-RyuminPro-ExHeavy";
}


#top-main .options{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#top-main .option-wrapper .eng-title{
    color: #fff;
}

#top-main .option-wrapper .eng-title-shape{
    background-color: #fff;
}

#top-main .faq-section .option-wrapper .eng-title{
    color: #2d2d2d;
}

#top-main .faq-section .option-wrapper .eng-title-shape{
    background-color: #2d2d2d;
}


#top-main .option-card{
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ffffff;
}

#top-main .faq-section .option-card{
    border-bottom: 1px solid #2d2d2d;
}

#top-main .option-card:nth-last-child(1){
    border-bottom: 0;
}

#top-main .option-hidden-content{
    display: none;
    transition: 0.3s all ease;
}

#top-main .faq-ans-content{
    display: none;
    align-items: flex-start;
    gap: 10px;
}

#top-main .faq-ans-content img{
    width: 40px;
    object-fit: contain;
    margin-top: -2px;
}

#top-main .option-title h3{
    font-size: 26px;
    display: flex;
    align-items: center;
}

#top-main .faq-title h3{
    display: grid;
    grid-template-columns: 40px 1fr;
    line-height: 1.4;
    font-size: 20px;
    gap: 10px;
}

#top-main .faq-title h3 span:nth-child(2){
    margin-top: -3px;
}

#top-main .faq-title h3 img{
    width: 100%;
    object-fit: contain;
}

#top-main .option-title h3 > br{
        display: none;
    }

#top-main .option-title small{
    font-size: 14px;
}

#top-main .option-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

#top-main .option-drop-icon{
    display: block;
    font-size: 20px;
    color: #fff;
}

#top-main .faq-section .option-drop-icon{
    color: #2d2d2d;
}

.side-fix-btns{
    position: fixed;
    bottom: 50px;
    right: 0;

    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
}

.side-fix-btns-sp{
    width: 100%;
    display: none;
    position: fixed;
    bottom: 0;
    z-index: 10;
}

.side-fix-btns a img{
    width: 48px;
    object-fit: contain;
}

/* Main content area */
.car-simulation-main {
    background-color: #000;
    /* min-height: 100vh; */
}

/* Basic responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Basic link styles */
a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Form elements base styling */
input, select, textarea {
    font-family: inherit;
}

/* Utility classes */
.hidden {
    display: none !important;
}


/* Basic WordPress alignment classes */
.alignleft {
    float: left;
    margin: 0 1rem 1rem 0;
}

.alignright {
    float: right;
    margin: 0 0 1rem 1rem;
}

.aligncenter {
    display: block;
    margin: 0 auto;
}

/* WordPress gallery styles */
.wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Basic WordPress block styles */
.wp-block-group {
    margin-bottom: 1rem;
}

@media (min-width: 100px) and (max-width: 1050px){
    .about-wrapper{
        grid-template-columns: 1fr;
        gap: 40px;
        align-items: center;
        grid-template-areas: 
        "txt"
        "img";
    }

    .about-imgs{
        grid-area: img;
    }

    .about-content{
        grid-area: txt;
    }
}

@media (min-width: 769px) and (max-width: 1050px){
    .about-imgs{
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .about-imgs img{
        height: 300px;
        object-fit: cover;
    }

    .second-price{
        font-size: 24px;
    }
}

/* Responsive helper classes */
@media (max-width: 768px) {
    .sp-br{
        display: block;
    }

    #top-main .main-visual{
        height: 80vh;
    }

    #top-main .main-visual-content{
        bottom: -20px;
        left: 5%;
    }

    .top-grad{
        bottom: -1px;
    }

    .main-visual-content h1 small{
        font-size: 20px;
    }

    .main-visual-content h1{
        font-size: 40px;
    }

    .main-visual-content .mv-banner{
        margin-top: 0;
    }

    .scroll-gif{
        display: none;
    }

    .pc-video{
        display: none;
    }

    .sp-video{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .eng-title{
        font-size: 12px;
    }

    .news-section-sp{
        display: block;
    }

    .news-section-pc{
        display: none;
    }

    .news-text{
        font-size: 14px;
    }

    .news-item{
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .news-item > br{
        display: block;
    }

    .about-section, .service-section, .youtube-section, #top-main .options-section, .banner-section, .peace-section, .structure-section, .review-section, .maintenance-section, .sns-section, .concept-section, .pmark-section, .access-section{
        padding: 50px 0;
    }

    .about-imgs{
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
    }

    .pc-img{
        display: none;
    }

    .sp-img{
        display: block;
    }

    .about-imgs img{
        flex: 1;
    }

    .section-title h2,
    .banner-content h2{
        font-size: 26px;
    }

    .service-wrapper{
        gap: 20px;
    }

    .section-title{
        margin: 10px 0;
    }

    .gradient-btn{
        padding: 10px;
        font-size: 13px;
    }

    .toggle-tab{
        padding: 14px 16px;
    }

    #top-main .option-title h3{
        font-size: 18px;
        line-height: 1;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    #top-main .faq-title h3{
        grid-template-columns: 30px 1fr;
        font-size: 16px;
    }

    #top-main .faq-title h3 span:nth-child(2){
        margin-top: 6px;
    }

    #top-main .option-title img{
        max-width: 170px;
    }

    #top-main .faq-title img{
        max-width: 100%;
    }

    #top-main .faq-ans-content img{
        width: 30px;
    }
/* 
    #top-main .option-title h3 > br{
        display: block;
    } */

    #top-main .options{
        margin-top: 2rem;
    }

    .red-option-box {
        font-size: 10px;
        margin-left: 0;
    }

    .service-cards,
    .coat-content,
    .peace-cards,
    .subscription-plans,
    .sns-wrapper,
    .access-wrapper{
        grid-template-columns: 1fr;
    }

    .subscription-plans{
        gap: 50px;
    }

    .structure-title .section-title{
        flex-direction: column;
        align-items: flex-start;
    }

    /* .emblem{
        width: 190px;
        height: 88px;
        font-size: 14px;
    } */

    /* .banner-emblem{
        width: 140px;
    } */

    .emblem-title{
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .emblem-title br{
        display: none;
    }

    .emblem{
        width: 100px;
    }

    .pc-emblem{
        display: none;
    }

    .review-section .section-title h2{
        margin-bottom: 0;
    }

    .review-card-wrapper span{
        margin-top: 10px;
    }

    .sp-emblem{
        display: block;
    }

    .emblem-title .emblem, .review-title .emblem{
        margin-left: 0;
    }

    .review-title-content .section-title p{
        display: inline-flex;
        align-items: center;
    }

    .review-title-content .section-title p img{
        margin-right: 10px;
    }

    .coat-content{
        margin-top: 40px;
    }

    .toggle-and-img{
        justify-content: center;
    }

    .toggle-tabs{
        margin-left: 0;
    }

    .toggle-and-img img{
        display: none;
    }
    .maintenance-subtitle p{
        font-size: 20px;
    }

    #top-main tr{
        grid-template-columns: 86px 1fr 100px;
        font-size: 14px;
    }

    #top-main th{
        padding: 10px 5px;
    }

    #top-main td{
        padding: 10px 5px;
    }

    .sns-btn{
        padding: 10px;
        font-size: 14px;
    }

    .sns-card h3{
        font-size: 22px;
    }

    .concept-wrapper h2, .concept-wrapper p:nth-child(3), .concept-wrapper p:nth-child(4){
        width: 100%;
    }

    .concept-wrapper p:nth-child(3){
        margin: 1rem auto;
    }

    .concept-wrapper p:nth-child(4){
        font-size: 20px;
    }

    .flow-text{
        flex-direction: column;
    }

    .flow-arrow{
        transform: rotate(90deg);
    }

    .youtube-cards{
        display: flex;
        align-items: flex-start;
        gap: 26px;
        overflow-x: scroll;
    }

    .review-cards{
        display: flex;
        gap: 26px;
        overflow-x: scroll;
    }

    .review-card{
        flex: 0 0 300px;
    }

    .two-videos-block{
        gap: 26px;
        overflow-x: scroll;
        margin-bottom: 50px;
    }

    .youtube-card iframe{
        width: 74vw;
        max-width: 300px;
    }

    .two-videos-block .youtube-card iframe{
        height: 170px;
    }


    .youtube-pc{
        display: none;
    }

    .google-map{
        height: 400px;
    }

    .pmark-wrapper{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2px 1fr;
    }

    .pmark-txt h3 {
        font-size: 16px;
    }

    .divider-line{
        width: 100%;
        height: 2px;
    }

    .access-wrapper{
        gap: 30px;
    }

    .access-content img{
        margin: 0 auto;
    }

    .side-fix-btns{
        display: none;
    }

    .side-fix-btns-sp{
        display: block;
        display: grid;
        grid-template-columns: 1fr 65px;
        height: 58px;
    }

    .side-fix-btns-sp a img{
        height: 58px;
        object-fit: cover;
    }
}