.orb-box{
    opacity: 1;
}


/* ===========================

common

=========================== */




.sub-fv-box{
        width: 100%;
    height: 50svh;
    display: flex;
    align-items: center;
}

.sub-h1-title{
    font-size: var(--font-b);
    font-weight: bold;
    letter-spacing: .05em;
    line-height: 1em;
}

.bread-crumb{
    display: flex;
    padding-top: 10%;
}

.bread-crumb li:not(:last-child){
    position: relative;
    padding-right: 16px;
}

.bread-crumb li:not(:last-child):after{
    position: absolute;
    content: "-";
    font-size: 16px;
    top: -2px;
    right: 4px;
}

.text-link{
    border-bottom: 1px solid #fff;
}

.h3-title{
    font-size: var(--font-d);
    color: #fff;
    font-weight: bold;
}




/* ===========================

about

=========================== */




.sub-column-contents{
    display: flex;
}

.sub-column-contents:not(:first-child){
    padding: 20% 0;
}

.column-title{
    color: #fff;
    writing-mode: vertical-rl;
    position: relative;
    padding-top: 10px;
}

.column-title::before{
    content: "-";
    position: absolute;
    top: 0;
}

.sub-column-left{
    width: 30%;
}

.sub-column-right{
    width: 70%;
}

.about-detail{
    display: flex;
    width:100%;
        padding: 8% 0px;
    border-bottom: 1px solid #fff;
}

.about-detail dt{
   width: 30%;
   font-weight: bold;
}

.about-detail dd{
   width: 70%;
}


.map-box,.map-box iframe{
    width: 100%;
}

.map-address{
    color: #fff;
    display: block;
    padding-top:3%;
}


@media screen and (max-width:800px){

.bread-crumb li:not(:last-child):after {
    top: -6px;
}
}


@media screen and (max-width:640px){
    .sub-column-contents{
        flex-direction: column;
    }

    .sub-column-right,
    .sub-column-left{
        width: 100%;
    }

    .column-title{
        writing-mode: horizontal-tb;
        padding-top: 0;
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 8%;
        padding-left: 16px;
    }

        .column-title::before{
        left: 0;
    }

    .sub-column-contents:not(:first-child) {
    padding: 40% 0;
    }

    .about-detail{
            flex-direction: column;
            padding: 16% 0;
    }


    .about-detail dt{
        width: 100%;
        padding-bottom: 3%;
    }

    .about-detail dd {
    width: 100%;
        }

.bread-crumb{
    flex-direction: column;
}

    .bread-crumb li:not(:last-child):after {
    top: -5px;
    right: 5px;

}
}



/* ===========================

privacy-policy

=========================== */


.sub-h2{
    padding-bottom: 4%;
    border-bottom: 1px solid #fff;
    font-size: var(--font-h);
    color: #fff;
    font-weight: bold;
}

.privacy-policy-box{
    padding: 10% 0 0 3%;
}

.pr-list{
    color: #fff;
    padding-top: 8%;
}


.pr-list dt{
    font-weight: bold;
    font-size: var(--font-i);
    padding-bottom: 2%;
}


@media screen and (max-width:640px){

    .sub-h2{
    padding-bottom: 8%;
}

    .pr-list{
    padding-top: 28%;
}

.privacy-policy-box {
    padding: 28% 0 0 3%;
}

.pr-list dt {
    padding-bottom: 8%;
}

}


/* ===========================

sitemap

=========================== */

.sitemap-box{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sitemap-list{
    width: 48%;
    padding-bottom: 10%;
}

.sitemap-list dt{
    border-bottom: 1px solid #fff;
    padding-bottom: 6%;
    font-weight: bold;
}

.sitemap-list dt a{
    font-size: var(--font-i)!important;
}

.sitemap-list dd{
    padding: 8% 0 0 4%;
}


@media screen and (max-width:800px){

        .sitemap-box {
        padding: 0;
    }

.sitemap-list{
    width: 100%;
    padding-bottom: 28%;
}


}



/* ===========================

liver

=========================== */


.liver-top{
        margin: 8% 0;
        display: block;
}


.content-detail{
    border-bottom: 1px solid #fff;
    padding-bottom: 3%;
}

.liver-content{
    display: flex;
    align-items: center;
    position: relative;
}

.liver-content:after{
    content: "MOMOKA";
    position: absolute;
    font-size: var(--font-b);
    opacity: 0.2;
    color: #fff;
    writing-mode: sideways-lr;
    right: 0;
    font-weight: 100;
    z-index: -1;
}

.liver-img{
    width: 40%;
    border-radius: 15px;
    height: 400px;
    overflow: hidden;
    max-width: 500px;
     position: relative;
}

      .liver-img::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("../img/momoka.JPG") center top / cover no-repeat;
        transition: transform 0.6s ease;
        width: 100%;
        height: auto;
      }

      .liver-img:hover::before {
        transform: scale(1.1);
      }


.liver-detail h2{
    padding: 8% 0;
    font-size: var(--font-i);
        line-height: 1.5em;
}

.name-sub{
    font-size: var(--font-g);
    color: var(--gray02);
}

.liver-sentences{
    width: 60%;
    padding-left: 8%;
}

.liver-skill{
    display: flex;
}

.tag{
    width: 100%;
    padding: 6px;
    margin-top: 10%;
    text-align: center;
    line-height: 1.6em;
}

.t-liver{
    background: var(--blue);
}

.t-creater{
background: var(--pink);
    margin-left: 1em;
}


#liver .liver-list{
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
    gap: 70px 5%;
}

.liver-item{
    width: 30%;
}

.liver-member{
width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mem-detail{
    padding: 10% 0;
}

.mem-img{
    width: 90%;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    max-width: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}



.mem-img::before {
content: "";
position: absolute;
inset: 0;
background: url("../img/momoka.JPG") center top / cover no-repeat;
transition: transform 0.6s ease;
width: 100%;
height: auto;
}



.mem-img:hover::before {
transform: scale(1.1);
}

.lm01::before{
background: url("../img/Celia.jpg") center top / cover no-repeat;
}

.lm02::before{
background: url("../img/nana.jpg") center top / cover no-repeat;
}


.lm03::before{
background: url("../img/ayano.jpg") center top / cover no-repeat;
}


.lm04::before{
background: url("../img/miho.jpg") center top / cover no-repeat;
}


.lm05::before{
background: url("../img/ame.jpg") center / cover no-repeat;
}


.lm06::before{
background: url("../img/ai.jpg") center top / cover no-repeat;
}


.lm07::before{
background: url("../img/suzu.jpg") center top / cover no-repeat;
}


.lm08::before{
background: url("../img/Hannah.jpg") center top / cover no-repeat;
}



.mem-skill{
    flex-wrap:wrap;
    width: 90%;
}

.mem-skill .tag{
    margin-top: 0;
}

.mem-skill .t-creater {
    margin-left: 0;
    margin-top: 3px;
}

.liver-pg .liver-img::before{
display: none;
}



@media screen and (max-width:800px){

    .liver-top{
        margin: 20% 0;
    display: block;
    }


    .content-detail{
        padding-bottom: 16%;
    }
    .liver-content {
    flex-direction: column;
}

.liver-img,.liver-sentences{
    width: 100%;
    padding-left: 0;
    order: 3;
}

.liver-content:after {
    display: none;
}


.sp-sub-name{
    font-size: clamp(2.5rem, 12.5vw, 6.25rem);
    color: #fff;
    font-weight: 100;
    order: 1;
    opacity: 0.4;
    text-align: center;
    line-height: 100%;
}


.liver-detail{
    display: flex;
    flex-direction:column;
}

.liver-detail .class{
    order: 1;
}


.liver-img{
    height: 250px;
    order: 2;
}


.liver-detail h2{
    padding-top: 0;
    order:2;
}

.liver-detail .liver-skill{
    order: 3;
    margin-bottom: 10%;
}


.liver-detail .tag{
    margin-top: 0;
}

.liver-detail p{
    order: 4;
}

.liver-content:after{
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}





.liver-detail .class,
.liver-detail h2{
    text-align: center;
        width: 100%;
        display: block;
}

.liver-detail .class{
    padding: 8% 0 4%;
}


#liver .liver-list{
   flex-wrap: wrap;
   gap: 0;
}

.mem-img{
    height: 150px;
}

#liver .liver-item{
    width: 48%;
}

.top-padding{
    padding-top: 10%;
}

.liver-skill > *{
        font-size: 12px!important;
}


}

@media screen and (max-width:640px){


.liver-skill{
    flex-direction: column;
}

.t-creater {
    margin-left: 0;
    margin-top: .5em!important;
}

.sp-img{
    display: block!important;
}

}


@media screen and (max-width: 400px){

    .sp-img{
    display: none!important;
}

    .sp-img02{
        display: block!important;
    }

    .liver-skill > *{
        font-size: 10px!important;
}

    .bread-crumb li a,
    .bread-crumb li{
        font-size: 10px!important;
    }

    .bread-crumb li:not(:last-child):after {
        top: -7px;
    }

}

/* ===========================

liver-pg

=========================== */



/* アコーディオンメニュー */


.acc {
    -webkit-column-width: 100%;
}

.acc-item {
  margin-bottom: 6px;
}

.acc-btn {
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  padding: 0 0 5%;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--gray02);
}

/* プラス／マイナス */
.acc-btn::after,
.acc-btn::before {
  content: "";
  position: absolute;
  right: 1.5em;
  width: 14px;
  height: 2px;
  background: #ffffffb3;
  transition: opacity .3s ease, transform .3s ease;
}

.acc-btn::before { transform: rotate(90deg); }
.acc-item.active .acc-btn::before { opacity: 0; }

.acc-content {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .35s ease, opacity .35s ease;
  padding: 0 1.5em;
}

.acc-item.active .acc-content {
  opacity: 1;
  padding: 5%;
}

.acc-title{
        font-size: var(--font-i);
        font-weight:bold;
}



.acc-content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: #fff;
}


.acc-box{
    width: 48%;
}

.acc-list{
    padding: 6%;
}

.acc-list li{
    position: relative;
    padding-left: 1.5em;
}


.acc-list li::before{
 content: "■";
 position: absolute;
 left: 0;
}


.tiktok-btn{
    display: block;
    background: transparent;
    margin: 8% auto 0;
    width: 50%;
    border: 1px solid #fff;
    border-radius: 200px;
}

.tiktok-btn a{
    display: block;
    width: 100%;
    margin: 0 auto;
}

.tiktok-btn img{
    width: 40%;
    display: block;
    margin: 0 auto;
}




@media screen and (max-width:800px){
    .acc-content{
        flex-direction: column;
}

.acc-box{
    width: 100%;
    padding: 10% 0;
}


}




@media screen and (max-width:640px){

    .tiktok-btn{
        width: 100%;
    }

    .tiktok-btn a{
        width: 100%;
    }

}


/* momoka */


.momoka-img{
    background: url(../img/momoka.JPG) no-repeat center top 10% / 120%;
}

/* celia */

.celia .liver-content::after{
    content: "CELIA";
}

.celia-img{
    background: url(../img/Celia.jpg) no-repeat center top / cover;
}

/* nana */

.nana .liver-content::after{
    content: "NANA";
}

.nana-img{
    background: url(../img/nana.jpg) no-repeat center top / cover;
}

/* ayano */

.ayano .liver-content::after{
    content: "SONODA AYANO";
    line-height: 80px;
    font-size: 70px;
    text-align: center;
}

.ayano-img{
    background: url(../img/ayano.jpg) no-repeat center top / cover;
}



/* miho */

.miho .liver-content::after{
    content: "SUGIYAMA MIHO";
        line-height: 80px;
    font-size: 70px;
    text-align: center;
}

.miho-img{
    background: url(../img/miho.jpg) no-repeat center top / cover;
}

/* ame */

.ame .liver-content::after{
    content: "AMECHAN";
}

.ame-img{
    background: url(../img/ame.jpg) no-repeat center/ cover;
}


/* ai */

.ai .liver-content::after{
    content: "MARUYAMA AI";
    line-height: 80px;
    font-size: 70px;
    text-align: center;
}

.ai-img{
    background: url(../img/ai.jpg) no-repeat center top / cover;
}



/* suzu */

.suzu .liver-content::after{
    content: "SUZU";
}

.suzu-img{
    background: url(../img/suzu.jpg) no-repeat center top / cover;
}






/* Hannah */

.hannah .liver-content::after{
    content: "HANNA";
}

.hannah-img{
    background: url(../img/Hannah.jpg) no-repeat center top / cover;
}




@media screen and (max-width:640px){

.tiktok-btn{
    margin: 16% auto 0;
}

}



/* ===========================

contact

=========================== */

.form-table{
    color: #fff;
    width: 100%;
}

.form-box{
        padding: 10% 0;
}

.form-table tbody,
.form-tr,
.form-tr th,
.form-tr td{
    width: 100%;
}

.form-tr td{
    color: #fff;
}


.form-tr{
    display: flex;
}
.form-tr:not(:last-child){
padding-bottom: 2em;
}

.form-tr th{
    width: 40%;
}

.form-tr td{
    color: #fff;
    width: 60%;
}


button, input, optgroup, select, textarea {
    background: #fff;
    color: var(--black);
}



input[type="radio"] {
    width: 13px;
    height: 13px;
    background: #fff;
    vertical-align: sub;
    font-weight: bold;
    position: relative;
    border-radius: 50%;
    margin-bottom: 4px;
}


input[type="radio"]:checked:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 7px;
    height: 7px;
    background: #000;
    border-radius: 50%;
}



input[type="text"],
input[type="tel"]{
    height: 50px;
    
}

input[type="text"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 5% 3%;
}

.confirm-btn{
    width: 100%;
    display: flex;
    justify-content: center;
}

.btn{
    font-weight: bold;
    padding: 3%;
    border-radius: 100px;
    width: 50%;
    background: var(--gray);
    color: #fff;
    margin: 10% auto;
    display: block;
    text-align: center;
}


input[type="submit"]{
    background: var(--pink);
    color: #fff;
    font-weight: bold;
    padding: 3%;
    border-radius: 100px;
        width: 50%;
        margin: 0 auto;
        text-align: center;
}



th, td{
    padding: 2.5em 1.2em;
}

.type{
    padding: 3px 12px;
    margin-right: 2%;
    color: #fff;
}

.required{
    background: var(--blue);
}

.optional{
    background: var(--gray);

}


.contact-privacy-policy{
    padding: 10% 0;
    text-align: center;
}

.caution{
    color: var(--pink);
    font-size: var(--font-h);
    font-weight: bold;
}

label{
	cursor:pointer;
}




@media screen and (max-width:800px){

    .form{
            padding-bottom: 20%;
    }
    .form-tr{
        flex-direction: column;
    }

    .form-radio{
        width: 100%!important; 
    }
        .form-tr th {
        width: 100%;
}

    .form-tr td {
        width: 100%;
        padding-top: 0;
	padding-bottom:0;
}

input[type="submit"] {
            padding: 30px;
    width: 100%;
}

.privacy-policy-box {
    padding: 20% 0;

}

input[type="radio"] {
    margin-bottom: 2px;
}

.contact-privacy-policy{
    padding: 10% 0 25%;
}
}

.error-msg {
    color: #ff4d4f!important;
    font-size: 0.9em;
    margin-top: 0.3em;
    display: block;
}

.form-radio-group {
    display: flex;
    flex-direction: column; /* エラーを下に固定 */
    gap: 0.5em;
}

.form-radio-group label {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.form-radio-group label:not(:last-child) {
    margin-bottom: 4%;
}


/* ===========================

confirm

=========================== */


.confirm-box{
    padding: 10% 0;
}

.confirm-table{
    width: 100%;
    color: #fff;
}

.btn-box{
    display: flex;
        padding: 10% 0;
}

.confirm-back-btn{
    background: var(--gray);
    color: #fff;
    font-weight: bold;
    padding: 3%;
    border-radius: 100px;
    width: 50%;
    margin: 0 auto;
    margin-left: 30px;
}

.back-btn{
    margin-bottom: 20%;
}




@media screen and (max-width:800px){
    
.confirm-box{
    padding: 20% 0;
}

.btn-box{
        padding: 20% 0;
        flex-direction: column;
}

.confirm-back-btn{
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
    padding: 30px;

}

.btn{
    padding: 30px;
    width: 100%;
}

}