@charset "UTF-8";

html {
    font-size:62.5%;
}
body {
    font-size:1.4rem;
    font-family: "Noto Sans JP",
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    background-color: #fffbef;
    line-height: 1.6;
}

@media screen and (max-width: 480px) {
    body {
        font-size:1.4rem;
        background-color: #fff;
    }
}

img{
    width: 100%;
}

#main_content{
  position: relative;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    background-color: #fff;
}

@media screen and (max-width: 480px) {
    #main_content{
        max-width: 100%;
        box-shadow:none;
    }
}

.content_inner{
    padding: 0 5.33%;
}

.poppins{
    font-family: "Poppins"
}

.mv{
    position: relative;
}

.cv_btn_mv_wrap{
    position: absolute;
    bottom: 6%;
    right: 4%;
    width: 32%;
    background: url(../img/mv_cvbtn.webp) no-repeat center;
    background-size: 80%;
}

.rotateimg{
    animation: rotateAnimation 18s linear infinite;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.link_wrap{
    margin: 40px 5.33%;
}

.link_list{
    display: flex;
    justify-content: space-around;
}

.link_list li{
    width: 46%;
}

.about_wrap{
    padding-top: 40px;
    padding-bottom: 40px;
    color:#fff;
    background: #4c4c4c url(../img/abot_bg.webp) no-repeat left top;
    background-size: contain;
    margin-bottom: 80px;
}

.content_ttl{
    font-size: 4rem;
    font-weight: 800;
    text-align: center;
}

.about_txt{
    margin: 16px 0;
}

.app{
    text-align: center;
}

.app img{
    width: 90%;
}

.liver_ttl{
    font-size: 4rem;
    line-height: 1;
    font-weight: 800;
    color: #1eb2a6;
}

.sub_ttl{
    font-size: 1.6rem;
    font-weight: bold;
    margin-top: 8px;
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.sub_ttl::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #000;
    margin-left: 20px;
  }

  .about_inner{
    position: relative;
  }

  .liver_about{
    background-color: #1eb2a6;
    border-radius: 20px;
    padding: 100px 5% 0;
    margin-top: -24%;
  }

  .liver_about.agency_about{
    background-color: #f67575;

  }

  .liver_about_txt{
    line-height: 1.8;
    padding: 32px 0 32px;
    color: #fff;
  }

  @media screen and (max-width: 480px) {
    .liver_about_txt{
        padding: 16px 0 32px;
        font-size: 1.4rem;
    }
  }

  .under_ttl_wrap{
    text-align: center;
  }

  .under_ttl{
    display: inline-block;
    font-size: 2.4rem;
    font-weight: bold;
    margin: 40px auto 0;
    padding-bottom: 20px;
    background: url(../img/underline_01.webp) no-repeat bottom;
    background-size: 100%;
  }

  .under_ttl.White{
    margin: 8px auto 0;
    color: #fff;
    padding-bottom: 16px;
    background: url(../img/underline_02.webp) no-repeat bottom;
    background-size: 100%;
  }

  .liver_support_txt_box{
    margin-top: -16px;
    margin-bottom: 40px;
  }

  .liver_support_txt{
    text-align: center;
    font-size: 1.8rem;
  }

  .liver_support_subtxt{
    display: flex;
    justify-content: space-between;
    font-size: 2rem;
    font-weight: bold;
    padding: 0 8% 8px;
  }

  @media screen and (max-width: 480px) {
    .liver_support_subtxt{
        font-size: 4.615vw;
        padding: 0 3.2% 8px;
    }

    .liver_support_txt{
    font-size: 4.102vw;
  }
  }

  .liver_support_subtxt span{
    background-color: #fff7a1;
    padding: 3px 5px;
  }

  .liver_model_wrap{
    background: #d4f8e8;
    border-radius: 40px;
    padding-top: 40px;
    padding-bottom: 56px;
    margin-bottom: 80px;
  }

  .review-section {
    margin: 0 auto;
    padding-left: 60px;
}

.model_ttl_box{
    text-align: center;
    margin-bottom: 40px;
}

.model_ttl{
    font-size: 4rem;
    line-height: 1;
    font-weight: 800;
    margin-bottom: 8px;
}

.model_sub_ttl{
    font-size: 1.8rem;
    font-weight: bold;
    color: #1eb2a6;
}

.review-card {
    background-color: #fff;
    border-radius: 24px;
    padding: 24px 24px 24px 48px;
    margin-bottom: 32px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.review-card:last-child{
    margin-bottom: 0;

}

.review-img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: -60px;
    width: 88px;
    height: 88px;
}

.review-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; 
    background-color: #fff; 
}


.income-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 4px;
}


.income-amount {
    font-size: 2.4rem;
    color: #4ebda8; 
    font-weight: bold;
    margin: 0 5px;
}


.user-profile {
    font-size: 1.4rem;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
}


.user-comment {
    font-size: 1.4rem;
    line-height: 1.8;
}

@media screen and (max-width: 480px) {
    .review-section {
        padding-left: 50px;
    }
    
    .review-img {
        width: 70px;
        height: 70px;
        left: -48px;
        top: 0;
        bottom: 0;
    }

    .income-amount {
        font-size: 2.4rem;
    }
    
    .review-card {
        padding: 20px;
        padding-left: 35px;
    }

    .user-comment {
    font-size: 1.2rem;
    line-height: 1.6;
}
}

#agency{
    margin-bottom: 56px;
}

.agency_ttl{
    font-size: 4rem;
    line-height: 1;
    font-weight: 800;
    color: #f67575;
}

.agency_support_wrap{
    margin-top: 56px;
    padding-top: 40px;
    padding-bottom: 56px;
    background-color: #4c4c4c;
}

.agency_support_ttlimg{
    text-align: center;
    margin-bottom: 40px;
}

.agency_support_ttlimg img{
    width: 80%;
}

.agency_support_list{
    background: #fff;
    border-radius: 20px;
    margin-bottom: 32px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.agency_support_list:last-child{
    margin-bottom: 0;
}

.agency_support_list img{
    border-radius: 20px 20px 0 0;
}

.agency_support_list_inner{
    padding: 24px;
}

.agency_support_ttl_box{
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #2a2a2a;

}

.agency_support_no{
    color: #f67575;
    font-size: 40px;
    font-weight: bold;
    margin-right: 16px;
    line-height: 1;
    letter-spacing: 0.2rem;
}

.agency_support_ttl{
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
}

.agency_support_txt{
    margin-top: 16px;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
}

.agency_support_example{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 24px 0 0;
}

.agency_support_example_list{
    width: 31%;
    margin-bottom: 16px;
}

.agency_support_annotation{
    color: #fff;
    font-size: 1.2rem;
    text-align: right;
    margin-bottom: 40px;
}

#flow{
    margin-bottom: 80px;
}

.flow_ttl_box{
    text-align: center;
}

  .flow_ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
  }
  
  .flow_ttl::before,
  .flow_ttl::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #000;
  }
  
  .flow_ttl::before {
    margin-right: 20px;
  }
  
  .flow_ttl::after {
    margin-left: 20px;
  }

  .flow_sub_ttl{
    font-size: 1.8rem;
    font-weight: bold;
  }

  .flow_txt{
    font-size: 1.4rem;
    margin: 24px 0 ;
  }

  .tab_list{
    display: flex;
    
  }

  .tab_label{
    width: 50%;
    background-color: #cacaca;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 16px 10%;
    border-radius: 20px 20px 0 0;
    cursor:pointer;
  }

  @media screen and (max-width: 480px) {
    .tab_label{
        font-size: 4.102vw;
    }
  }

  .tab_label.liver.tab_active{
    background-color: #1eb2a6;
    color: #fff;
  }

  .tab_label.agency.tab_active{
    background-color: #f67575;
    color: #fff;
  }

  .tab_panel{
    display: none;
  }

  .tab_panel.tab_active{
    display: block;
  }

  .faq_wrap{
    margin-bottom: 120px;
    padding-top: 40px;
    padding-bottom: 56px;
    background-color: #4c4c4c;
    border-radius: 40px;
  }

  .faq_ttl_box{
    text-align: center;
    margin-bottom: 40px;
  }

  .faq_ttl{
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    color: #fff;
  }

  .faq_sub_ttl{
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
  }

  .faq_box{
    background-color: #fff;
    padding: 24px 5%;
    border-radius: 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }

  .faq_q_txt{
    font-size: 1.6rem;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: start;
  }

  .faq_q{
    font-size: 2.8rem;
        line-height: 1;
    font-weight: 800;
    color: #1eb2a6;
    padding-right: 16px;

  }

.faq_a_txt{
    font-size: 1.4rem;
    display: flex;
    align-items: stretch;
    justify-content: start;
  }

  .faq_a{
    font-size: 2.8rem;
    line-height: 1;
    font-weight: 800;
    color: #f67575;
    padding-right: 16px;
  }

  .faq_span{
    font-size: 1.2rem;
  }

  #footer{
    padding-bottom: 20px;
  }

  .copy{
    text-align: center;
    font-size: 1.2rem;
  }

   @media screen and (max-width: 480px) {
  .cv_bnr{
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 56%;

  }

  .cv_bnr_link{
    display: inline-block;
    text-align: center;
    color: #fff;
    padding: 16px 16px 16px 32px;
    font-size: 3.4vw;
    font-weight: bold;
    letter-spacing: 0.2rem;
    width: 100%;
    border-radius: 8px 0 0 0;
    background: #06c755 url(../img/line_icon.webp) no-repeat 6% center;
    background-size: 15%;
  }
  }

  @media screen and (min-width: 481px) {
    .cv_bnr{
      display: none;
      position: fixed;
      bottom: 0;
      width: 100%;
      max-width: 480px;
  
    }
  
    .cv_bnr_link{
      display: inline-block;
      color: #fff;
      padding: 16px 16px 16px 48px;
      font-size: 1.6rem;
      font-weight: bold;
      letter-spacing: 0.2rem;
      width: 100%;
      background: #06c755 url(../img/line_icon.webp) no-repeat 27% center;
      background-size: 10%;
      text-align: center;
    }
  }

  body.modal-open { overflow: hidden; }

  .foot_menu {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 40px;
  }

  .foot_menu li{
    cursor: pointer;
  }

  /* オーバーレイ */
  .modal-overlay {
    display:none; /* JSで表示 */
    position:fixed;
    inset:0;
    background: rgba(0,0,0,0.6);
    z-index:1000;
    align-items:center;
    justify-content:center;
    padding:20px;
  }

  /* モーダル本体 */
  .modal {
    background:#fff;
    width:100%;
    max-width:820px;
    max-height:90vh;
    overflow:auto;
    border-radius:10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    padding:20px 24px;
    position:relative;
  }

  .modal h2 { margin-top:0; font-size:1.25rem; }
  .modal .policycontent { font-size:1.2rem; line-height:1.6; color:#333; }

  .modal .close-btn {
    padding:8px 12px;
    border-radius:6px;
    cursor:pointer;
    border:0;
  }

  .modal .close-btn{
    background:#eee; 
  }

  .modal .close-btn.foot { 
    display: block;
    background:#eee; 
    margin: 40px auto 24px;
  }

  /* 小さなスクリーンでの調整 */
  @media (max-width:420px) {
    .modal { padding:16px; }
  }

  .policyttl{
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 24px;
  }

  .policycontent h4{
    margin-top: 24px;
    font-weight: bold;
  }