@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {
/* message
-------------------------------------*/
    .message .inner {
        width: min(95%, 1200px);
        margin-inline: auto;
        padding: 4.4rem 0 0;
        position: relative;
        z-index: 1;
      }
      .message h2 {
        font-size: 34px;
        line-height: 1.6470588235;
        letter-spacing: 0.1em;
        font-weight: 700;
        margin-bottom: 1.4rem;
      }
      .message .lead {
        font-size: 20px;
        line-height: 2.8;
        letter-spacing: 0.1em;
        font-weight: 500;
        padding-bottom: 4.15rem;
        position: relative;
        z-index: 3;
        display: inline-block;
      }
      .message .lead::after {
        content: "";
        position: absolute;
        bottom: -0.05rem;
        left: 0;
        width: 90.5%;
        height: 1px;
        background: #000;
      }
      .message .photo-box {
        margin-left: auto;
        width: min(95%, 800px);
        position: relative;
        top: -9.35rem;
      }
      .message .photo {
        margin-bottom: 2.75rem;
        position: relative;
        z-index: 2;
      }
      .message .name {
        display: flex;
        gap: 1.875rem;
        justify-content: flex-end;
        margin: 0 0.2rem 0 0;
      }
      .message .name span {
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 0.1em;
        color: #000;
      }
      .message .message-box {
        background: #fff;
        box-shadow: 8px 8px 16px rgba(28, 28, 28, 0.1);
        padding: 1.8rem 5rem 3rem;
        position: relative;
        width: min(95%, 840px);
        top: -26.2rem;
        margin-bottom: -26.2rem;
      }
      .message .message-box::before {
        content: "";
        position: absolute;
        top: 0.05rem;
        right: 5.65rem;
        width: 350px;
        height: 210px;
        background: #FFFFFF;
        z-index: 2;
      } 
      .message .message-box::after {
        content: "";
        position: absolute;
        bottom: 0.5rem;
        right: -8.7rem;
        width: 88px;
        height: 513px;
        background: url(../images/company/message-en.svg) no-repeat;
        background-size: contain;
      }
      .message .message-box h3 {
        font-size: 24px;
        line-height: 1.5833333333;
        letter-spacing: 0.1em;
        font-weight: 700;
        margin-bottom: 2.2rem;
        position: relative;
        z-index: 3;
      }
      .message .message-box .txt {
        font-size: 16px;
        line-height: 1.875;
        letter-spacing: 0.1em;
        font-weight: 500;
        margin-bottom: 1.95rem;
        position: relative;
        z-index: 3;
      }
      .message .bottom-photo {
        width: min(95%, 1760px);
        margin-inline: auto;
        margin-bottom: -0.5rem;
        position: relative;
        top: -5.1rem;
      }
      .message .bottom-message {
        font-weight: bold;
        font-size: 30px;
        letter-spacing: 0.1em;
        line-height: 1.8666;
        text-align: center;
        color: #141414;
        position: relative;
        width: min(95%, 600px);
        margin-inline: auto;
      }
      .message .bottom-message::before {
        content: "";
        position: absolute;
        top: -9.5rem;
        right: -8.75rem;
        width: 145px;
        height: 177px;
        background: url(../images/company/message-bottom-deco.png) no-repeat;
        background-size: contain;
      }

      /* sec共通
      -------------------------------------*/
      .sec-ttl {
        font-size: 32px;
        line-height: 2.625;
        letter-spacing: 0.1em;
        font-weight: 700;
        text-align: center;
        margin-bottom: 2.45rem;
      }
      .sec-enttl {
        text-align: center;
      }
      .bnr-list {
        width: min(95%, 1420px);
        margin-inline: auto;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2.3rem 1.25rem;
    }
    .bnr-list li:nth-child(5) {
        grid-column: 1 / -1;
        text-align: center;
    }
    .bnr-list li img {
        margin-bottom: 0.5em;
    }
    .bnr-list li .txt {
        font-size: 14px;
        line-height: 1.8571428571;
        letter-spacing: 0.05em;
        font-weight: 500;
        text-align: center;
    }

      /* company
      -------------------------------------*/
      .company {
        padding: 7.9rem 0 0;
      }
      .company .company-table {
        width: min(95%, 1200px);
        margin-inline: auto;
      }
      .company .company-table tr {
        border-bottom: 2px solid #FFFFFF;
      }
      .company .company-table th, .company .company-table td {
        font-size: 16px;
        line-height: 1.875;
        letter-spacing: 0.1em;
        font-weight: 500;
        padding: 1.62rem 2.4rem;
      }
      .company .company-table th {
        font-weight: 700;
        background: #EFEFEF;
        border-bottom: 2px solid #FFFFFF;
        text-align: left;
        width: 23%;
        border-right: 2px solid #FFFFFF;
      }
      .company .company-table td {
        background: #F8F8F8;
        border-bottom: 2px solid #FFFFFF;
        padding: 1.6rem 2.6rem;
        line-height: 1.75;
      }
      .company .company-table .sp-tel-link{
        display: block;
      }

      /* access
      -------------------------------------*/
      .access {
        padding: 6.85rem 0 7.5rem;
      }
      .access .map-list {
        width: min(95%, 1240px);
        margin-inline: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem;
      }
      .access .map-list li {
        background: #1C1C1C;
        color: #FFFFFF;
        text-align: center;
        padding: 1.875rem 1.25rem 2.25rem;
      }
      .access .map-list li h3 {
        font-size: 24px;
        line-height: 1.5;
        letter-spacing: 0.1em;
        font-weight: 700;
        margin-bottom: 1.5rem;
      }
      .access .map-list li .map {
        margin-bottom: 0.25rem;
      }
      .access .map-list li .map iframe {
        aspect-ratio: 16/9;
        width: 100%;
      }
      .access .map-list li .address {
        font-size: 14px;
        line-height: 1.8571428571;
        letter-spacing: 0.1em;
        font-weight: 500;
      }

      /* menu
      -------------------------------------*/
      .menu {
        background: url(../images/index/reform-bg.png) no-repeat center center/cover;
        padding: 7.1rem 0 4.85rem;
        margin-bottom: 6.2rem;
        max-width: 1920px;
        width: 100%;
        margin-inline: auto;
     }
      .menu .sec-ttl {
        color: #FFFFFF;
      }
    .menu .bnr-list li a {
        color: #FFFFFF;
     }

     /* special
     -------------------------------------*/
     .special {
        background: #EFEFEF;
        width: min(95%, 1600px);
        margin-inline: auto;
        padding: 4.45rem 0 6rem;
     }

     /* reason
     -------------------------------------*/
    .reason {
        padding: 5.8rem 0 8rem;
    }
    .reason .sec-ttl {
        margin-bottom: 0.7rem;
    }
    .reason .bnr {
        width: min(95%, 920px);
        margin-inline: auto;
        margin-bottom: 1.875rem;
        text-align: center;
    }
    .reason .bnr img {
        margin-bottom: 1.6rem;
        max-width: 920px;
        width: 100%;
    }
    .reason .bnr .txt {
        font-size: 14px;
        line-height: 1.8571428571;
        letter-spacing: 0.05em;
        font-weight: 500;
        text-align: center;
    }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1860px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1860px) {
    .message .bottom-photo img {
        width: 100%;
        height: auto;
        max-width: 1760px;
    }
}
/* ========================================
@media screen and (min-width:768px) and (max-width:1490px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1490px) {
    .bnr-list li img {
        width: 100%;
        height: auto;
        max-width: 560px;
    }
    .bnr-list li .txt {
        font-size: clamp(0.625rem, 0.359rem + 0.55vw, 0.875rem);
    }
}
/* ========================================
@media screen and (min-width:768px) and (max-width:1240px)
======================================== */
@media screen and (min-width:768px) and (max-width:1240px) {
    .message .inner {
        width: 96.774vw;
        margin-inline: auto;
        padding: 5.677vw 0 0;
        position: relative;
        z-index: 1;
      }
      .message h2 {
        font-size: 2.742vw;
        line-height: 1.6470588235;
        letter-spacing: 0.1em;
        font-weight: 700;
        margin-bottom: 1.806vw;
      }
      .message .lead {
        font-size: 1.613vw;
        line-height: 2.8;
        letter-spacing: 0.1em;
        font-weight: 500;
        padding-bottom: 5.355vw;
        position: relative;
        z-index: 3;
        display: inline-block;
      }
      .message .lead::after {
        content: "";
        position: absolute;
        bottom: -0.065vw;
        left: 0;
        width: 90.5%;
        height: 0.081vw;
        background: #000;
      }
      .message .photo-box {
        margin-left: auto;
        width: 64.516vw;
        position: relative;
        top: -12.065vw;
      }
      .message .photo {
        margin-bottom: 3.548vw;
        position: relative;
        z-index: 2;
      }
      .message .photo img {
        width: 100%;
        height: auto;
      }
      .message .name {
        display: flex;
        gap: 2.419vw;
        justify-content: flex-end;
        margin: 0 0.258vw 0 0;
      }
      .message .name span {
        font-weight: 500;
        font-size: 1.29vw;
        letter-spacing: 0.1em;
        color: #000;
      }
      .message .message-box {
        background: #fff;
        box-shadow: 8px 8px 16px rgba(28, 28, 28, 0.1);
        padding: 2.323vw 6.452vw 3.871vw;
        position: relative;
        width: 67.742vw;
        top: -33.806vw;
        margin-bottom: -33.806vw;
      }
      .message .message-box::before {
        content: "";
        position: absolute;
        top: 0.065vw;
        right: 7.29vw;
        width: 28.226vw;
        height: 16.935vw;
        background: #FFFFFF;
        z-index: 2;
      }
      .message .message-box::after {
        content: "";
        position: absolute;
        bottom: 0.645vw;
        right: -11.226vw;
        width: 7.097vw;
        height: 41.371vw;
        background: url(../images/company/message-en.svg) no-repeat;
        background-size: contain;
      }
      .message .message-box h3 {
        font-size: 1.935vw;
        line-height: 1.5833333333;
        letter-spacing: 0.1em;
        font-weight: 700;
        margin-bottom: 2.839vw;
        position: relative;
        z-index: 3;
      }
      .message .message-box .txt {
        font-size: 1.29vw;
        line-height: 1.875;
        letter-spacing: 0.1em;
        font-weight: 500;
        margin-bottom: 2.516vw;
        position: relative;
        z-index: 3;
      }
      .message .bottom-photo {
        margin-bottom: -0.645vw;
        position: relative;
        top: -6.581vw;
      }
      .message .bottom-message {
        font-weight: bold;
        font-size: 2.419vw;
        letter-spacing: 0.1em;
        line-height: 1.8666;
        text-align: center;
        color: #141414;
        position: relative;
        width: 48.387vw;
        margin-inline: auto;
      }
      .message .bottom-message::before {
        content: "";
        position: absolute;
        top: -12.258vw;
        right: -11.29vw;
        width: 11.694vw;
        height: 14.274vw;
        background: url(../images/company/message-bottom-deco.png) no-repeat;
        background-size: contain;
      }
      
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1000px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1000px) {
    .access .map-list li h3 {
        font-size: clamp(1.375rem, 0.961rem + 0.86vw, 1.5rem);
    }
}

/* ========================================
@media screen and (max-width: 767px) 
======================================== */
@media screen and (max-width: 767px) {
/* message
-------------------------------------*/
.message .inner {
    width: 91.79vw;
    margin-inline: auto;
    padding: 19vw 0 15.5vw;
    position: relative;
    z-index: 1;
    display: grid;
  }
  .message .inner::after {
    content: "";
    position: absolute;
    top: 10vw;
    right: 1vw;
    width: 76.1vw;
    height: 13.1vw;
    background: url(../images/company/message-en_sp.svg) no-repeat;
    background-size: contain;
  }
  .message h2 {
    font-size:5.314vw;
    line-height: 1.54545;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin: 0 1.21vw 4.3vw;
    order: 1;
    position: relative;
    z-index: 2;
  }
  .message .lead {
    font-size:3.865vw;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 500;
    padding-bottom: 11vw;
    position: relative;
    z-index: 3;
    display: inline-block;
    order: 2;
  }
  .message .photo-box {
    display: contents;
  }
  .message .photo {order: 3;margin-bottom: 6.5vw;}
  .message .name {
    display: flex;
    gap: 7.3vw;
    order: 6;
    margin: 3.5vw 2.412vw;
  }
  .message .name span {
    font-weight: 500;
    font-size:3.865vw;
    letter-spacing: 0.1em;
    color: #000;
  }
  .message .message-box {
    display: contents;
  }
  .message .message-box h3 {
    font-size:4.348vw;
    line-height: 1.777777;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin: 0 2.412vw 4vw;
    position: relative;
    z-index: 3;
    order: 4;
  }
  .message .message-box .txt {
    font-size:3.382vw;
    line-height: 1.8571428;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin: 0 2.412vw 6.3vw;
    position: relative;
    z-index: 3;
    order: 5;
  }
  .message .bottom-photo {margin-bottom: 9.2vw;}
  .message .bottom-message {
    font-weight: bold;
    font-size:4.348vw;
    letter-spacing: 0.1em;
    line-height: 1.777777;
    text-align: center;
    color: #141414;
    position: relative;
  }
  .message .bottom-message::before {
    content: "";
    position: absolute;
    top: -23.4vw;
    right: 12vw;
    width: 17.635vw;
    height: 21.5vw;
    background: url(../images/company/message-bottom-deco.png) no-repeat;
    background-size: contain;
  }

      /* sec共通
      -------------------------------------*/
      .sec-ttl {
        font-size:4.831vw;
        line-height: 2.1;
        letter-spacing: 0.1em;
        font-weight: 700;
        text-align: center;
        margin-bottom: 5vw;
      }
      .sec-enttl {
        text-align: center;
        margin-bottom: 0.8vw;
      }
      .bnr-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5.4vw;
        width: 82.129vw;
        margin-inline: auto;
    }
    .bnr-list li {
        text-align: center;
    }
    .bnr-list li img {
        margin-bottom: 1.4vw;
        width: 100%;
        height: auto;
    }
    .bnr-list li .txt {
        font-size:3.382vw;
        line-height: 1.8571428571;
        letter-spacing: 0.05em;
        font-weight: 500;
        text-align: center;
    }

     /* company
      -------------------------------------*/
      .company {
        padding: 16vw 0 0;
      }
      .company .sec-enttl img {width: 15vw;}
      .company .company-table {
        width: 91.79vw;
        margin-inline: auto;
      }
      .company .company-table tr {
        border-bottom: 0.3vw solid #FFFFFF;
      }
      .company .company-table th, .company .company-table td {
        font-size:3.382vw;
        line-height: 1.7142857;
        letter-spacing: 0.1em;
        font-weight: 500;
        padding: 5.55vw 3vw;
      }
      .company .company-table th {
        font-weight: 700;
        background: #EFEFEF;
        text-align: left;
        width: 28%;
      }
      .company .company-table td {
        background: #F8F8F8;
        margin: 0 0 0 -0.7vw;
        display: block;
        padding: 5.55vw 1.7vw 5.55vw 3.7vw;
      }
      .company .company-table td .bold {
        font-weight: 700;
        display: block;
        margin: 0 0 -4.7vw;
      }
      .company .company-table td .city {
        width: 57.8vw;
        display: block;
        margin-left: auto;
        line-height: 1.571428;
        margin-bottom: -4vw;
    }
      .company .company-table .sp-tel-link{
        display: block;
      }


      /* access
      -------------------------------------*/
      .access {
        padding: 11vw 0 19vw;
      }
      .access .sec-enttl img {width: 12vw;}
      .access .sec-ttl {margin-bottom: 5.8vw;}
      .access .map-list {
        width: 91.79vw;
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 4.9vw;
      }
      .access .map-list li {
        background: #1C1C1C;
        color: #FFFFFF;
        text-align: center;
        padding: 7vw 4.8vw 6.2vw;
      }
      .access .map-list li h3 {
        font-size:4.348vw;
        line-height: 1.777777;
        letter-spacing: 0.1em;
        font-weight: 700;
        margin-bottom: 1.5rem;
      }
      .access .map-list li .map {
        margin-bottom: 3vw;
      }
      .access .map-list li .map iframe {
        aspect-ratio: 16/9;
        width: 100%;
        height: 53.143vw;
      }
      .access .map-list li .address {
        font-size:3.382vw;
        line-height: 1.8571428571;
        letter-spacing: 0.1em;
        font-weight: 500;
      }

      /* menu
      -------------------------------------*/
      .menu {
        background: url(../images/index/reform-bg_sp.png) no-repeat center center/cover;
        padding: 12.4vw 0 14vw;
        margin-bottom: 9.4vw;
     }
     .menu .sec-enttl img {width: 8vw;}
      .menu .sec-ttl {
        color: #FFFFFF;
        margin-bottom: 5.7vw;
      }
    .menu .bnr-list li a {
        color: #FFFFFF;
     }

     /* special
     -------------------------------------*/
     .special {
        background: #EFEFEF;
        width: 91.79vw;
        margin-inline: auto;
        padding: 10vw 0 11.5vw;
     }
     .special .sec-enttl img {width: 13vw;}
     .special .sec-ttl {
        margin-bottom: 5.25vw;
    }

     /* reason
     -------------------------------------*/
     .reason {
        padding: 12vw 0 22.5vw;
    }
    .reason .sec-enttl img {width: 12vw;}
    .reason .sec-ttl {
        margin-bottom: 5.5vw;
        padding: 1vw;
    }
    .reason .bnr {
        width: 87vw;
        margin-inline: auto;
        margin-bottom: 1vw;
        text-align: center;
    }
    .reason .bnr img {
        margin-bottom: 1.8vw;
        width: 100%;
        height: auto;
    }
    .reason .bnr .txt {
        font-size:3.382vw;
        line-height: 1.8571428571;
        letter-spacing: 0.05em;
        font-weight: 500;
        text-align: center;
    }
}