@charset "UTF-8";



.first_view_img {
    background-image: none;
    position: relative;
    height: clamp(226px, 33.185vw - -81.143px, 4149px);
}

.first_view_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.first_view_img {
    z-index: 1;
}

.first_view_img .mask {
    background-color: rgba(31, 31, 31, 0.527);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}



.article {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 30px;
}

.article h2 {
    background-color: #1E2223;
    color: white;
    font-size: 28px;
    padding: 10px;
    text-align: center;
    /* max-width: 680px; */
    margin: 0 auto 100px;

    font-size: clamp(16px, calc(16px + (28 - 16) * (100vw - 375px) / (680 - 375)), 28px);
    margin-bottom: clamp(60px, calc(60px + (100 - 60) * (100vw - 375px) / (680 - 375)), 100px);
}


.article img {
    width: 100%;
    height: auto;
}

.article p:has(img) {
    margin-bottom: 30px;
}
.article p:not(:has(img)) {
    margin-bottom: 100px;
}

.breadcrumbs {
        padding: 8px clamp(6px, 4.167vw, 60px);
    }
@media ( max-width: 375px ) {
    .article h2 {
        font-size: 16px;
        margin-bottom: 60px;
    }
}



/* ーーーーーーーーーーーーーーーーーーーーーbottom_kinkセクションに当たるスタイル！ーーーーーーーーーーーーーーーーーーーーー */
.btn_to_form {
    max-width: 500px;
    margin: 0 auto;
    text-decoration: underline;
    text-align: center;
    font-size: 20px;
}
.btn_to_form a {
    display: block;
    background-color: white;
    padding: 10px 20px;
    font-size: clamp(16px, calc(0.595vw + 11.43px), 20px);
}
.bottom_kink {
    padding: 100px 0 100px;
    padding-top: clamp(81px, calc(2.827vw + 59.29px), 100px);
    padding-bottom: clamp(67px, calc(4.911vw + 29.29px), 100px);
    padding: clamp(81px, calc(2.827vw + 59.29px), 100px)
     clamp(67px, calc(4.911vw + 29.29px), 100px);
}
.bottom_kink .btn_to_form {
    text-decoration-thickness: 2px;

    max-width: clamp(365px, calc(20.09vw + 210.71px), 500px);
}
.bottom_kink .btn_to_home {
    background-color: black;
    color: white;
    max-width: 500px;
    text-align: center;
    font-size: 20px;
    margin: 0px auto;
    margin-top: 60px;
    transition-duration: .3s;
    box-sizing: content-box;

    max-width: clamp(365px, calc(20.09vw + 210.71px), 500px);
    font-size: clamp(16px, calc(0.595vw + 11.43px), 20px);
    margin-top: clamp(54px, calc(0.893vw + 47.14px), 60px);
}
.bottom_kink .btn_to_home a {
    display: block;
    padding: 10px 0px;
}
.bottom_kink .btn_to_home:hover {
    background-color: white;
    color: #000;
    outline: 1px solid #000;
}
.text-progress {
    position: relative;
    font-size: 20px;
    background-color: var( --blue-btn );
    overflow: hidden;

    font-size: clamp(16px, calc(0.595vw + 11.43px), 20px);
}
.text-progress::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: #1a1e24;
    width: 100%;
    padding: 10px 0px;
    transition: clip-path .3s;
    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
    clip-path: inset( 0px 100% 0px 0px );
    color: white;
    z-index: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    font-size: 13px;
    font-size: clamp(16px, calc(0.595vw + 11.43px), 20px);
}
.text-progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: var( --blue-btn );
    transition: clip-path .3s;
    
    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
    clip-path: inset( 0px 100% 0px 0px );
    z-index: 1;
    height: 110%;
    width: 103%;
    transform: translateY(-4px) ;
}
.text-progress:hover::before {
    clip-path: inset( 0px 0px 0px 0px );
}
.text-progress:hover::after {
    clip-path: inset( 0px 0px 0px 0px );
}
@media ( max-width: 600px ) {
    #inquiry a {
        font-size: 13px;
    }
    .text-progress::after {
        font-size: 13px;
    }
}
@media ( max-width: 768px ) {
  section.bottom_kink {
    padding: 81px 0 67px;
  }
  .text-progress {
    font-size: 16px;
  }
  .bottom_kink .btn_to_form {
    max-width: clamp(307px, calc(307px + 58 * (100vw - 375px) / 393), 365px);
    letter-spacing: clamp(-1px, calc(-1px + 1 * (100vw - 375px) / 393), 0px);
    letter-spacing: -1px;
    font-size: clamp(16px, calc(0.595vw + 11.43px), 20px);
  }

  .bottom_kink .btn_to_home {
    max-width: clamp(307px, calc(307px + 58 * (100vw - 375px) / 393), 365px);
    font-size: 16px;
    margin-top: clamp(38px, calc(38px + 16 * (100vw - 375px) / 393), 54px);
    letter-spacing: clamp(-1px, calc(-1px + 1 * (100vw - 375px) / 393), 0px);
  }
}