@charset "UTF-8";
/* CSS Document */

body {
  font-family: 'UniqloProRegular', 'ヒラギノ角ゴPro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', メイリオ, Meiryo, sans-serif;

  font-family: 'Noto Sans JP';

  font-feature-settings: 'palt' 1;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  color: #000000;
  background-color: #ffffff;
}

html {
  scroll-behavior: smooth; /* スムーススクロール */
}


@media screen and (min-width: 320px) {
  /* スマホ用レイアウト 320px以上の範囲に収めるデザインはこの中に記述 */

  .pc-nav,
  .sp-none,
  .pc-only {
    display: none;
  }

  .sec {
    padding: 0 22px;
    scroll-margin-top: 110px;
  }

  .sec-company,
  .sec-faq {
    scroll-margin-top: 115px;
  }

  .color {
    color: #379E49;
    font-weight: bold;
  }

  a {
    cursor: pointer;
  }

  /*==============================================================
    　　アニメーション
  ==============================================================*/
  /* ==================== フェード ================== */
  /* その場でフェード */
  .fade {
    opacity: 0;
    transition: all 1.3s ease-out;
  }

  .fade.show {
    opacity: 1;
  }

  /* ==================== フェードアップ（ページ内）================== */
  /* アニメーション前の状態 */
  .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
  }

  /* 表示されたらこのクラスが付く */
  .fade-up.show {
    opacity: 1;
    transform: translateY(0);
  }

  /* 遅延用クラス */
  .delay-1 {
    transition-delay: 0.3s;
  }
  .delay-2 {
    transition-delay: 0.6s;
  }
  .delay-3 {
    transition-delay: 0.9s;
  }

  /* ==================== 画像（横表示）================== */
  .img-wrap {
    opacity: 0;
    position: relative;
    overflow: hidden;
  }

  .img-wrap img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1.05); /* ちょっと拡大しておくとプロっぽく見える */
    transition: transform 0.8s ease;
  }

  .img-wrap.show {
    opacity: 1;
  }

  .img-wrap.show img {
    transform: scale(1); /* 元のサイズに戻す */
  }

  /* マスクアニメーション */
  .img-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    transform: translateX(0); /* 初期状態は全体覆う */
    z-index: 1;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .img-wrap.show::before {
    transform: translateX(100%); /* 右にスライドして消える */
  }

  /*==============================================================
    　　モーダル（年末年始）
  ==============================================================*/
  .main {
    position: relative;
  }

  .season.modal-container .modal-scroll {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    margin: 0;
    padding: 0 24px 44px;
    border-radius: 0px;
    width: 340px;
  }

  .season .modal-close {
    padding-top: 0;
    margin-top: -16px;
    margin-right: -35px;
  }

  .season .modal-close .close-icon {
    background-color: #379E49;
    border: solid 1px #379E49;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    align-content: center;
  }

  .season .modal-content .title {
    font-size: 22px;
    color: #379E49;
    margin: 25px 0 28px;
  }

  .season .modal-content .text {
    font-size: 15px;
    line-height: 2.5;
  }

  .season .modal-content .text span {
    color: #379E49;
    font-weight: 700;
    font-size: 16px;
  }


  /*==============================================================
    　　ヘッダー
  ==============================================================*/
  .header {
    position: fixed;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    top: 0;
    z-index: 20;
  }

  .logo-box {
    display: flex;
    align-items: center;
  }

  .logo-box img {
    height: 43px;
    margin-right: 10px;
  }

  .logo-box a {
    display: flex;
    align-items: center;
  }

  .logo-box .logo {
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 0.08em;
   color: #379E49;
  }

  .btn {
    position: fixed;
    top: 33px;
    width: 22px;
    height: 16px;
    right: 26px;
    margin-bottom: 0.8px;
    z-index: 23;
  }


  .btn .maru {
    border: solid 1.5px #379E49;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: absolute;
    top: -15px;
    left: -17px;
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: none;
  }

  .btn.active .maru{
    opacity: 1;
    pointer-events: auto;
  }

  .btn i {
    position: absolute;
    right: 0;
    height: 2px;
    width: 30px;
    background-color: #379E49;
    transition: 0.5s;
  }



  .btn i:nth-of-type(1){
    top: 0;
  }

  .btn i:nth-of-type(2){
    top: 6.5px;
  }

  .btn i:nth-of-type(3){
    top: 13px;
  }

  .btn.active i:nth-of-type(1){
    transform: translateY(6.5px) rotate(45deg);
    width: 20px;
    margin-right: 6px;
  }

  .btn.active i:nth-of-type(2){
    opacity: 0;
  }

  .btn.active i:nth-of-type(3){
    transform: translateY(-6.5px) rotate(-45deg);
    width: 20px;
    margin-right: 6px;
  }

  /* メニューのデザイン*/
  .container {
    width: 85%;
    min-width: 332px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 22;
    background: #fff;
    transition: .5s;
    opacity: 0;
    overflow: hidden;
    overflow-y: scroll;
    pointer-events: none;
    border-radius: 0 0 0 25px;
  }

  .container.active{
    opacity: 1;
    pointer-events: auto;
  }

  .cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 21; /* containerのz-indexより小さくする */
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: none;
    display: none;
  }

  .cover.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-list {
    padding: 90px 50px 50px;
  }

  .nav-item {
    letter-spacing: .073em;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .nav-item.sns {
    font-family: 'Roboto';
    letter-spacing: 0.05em;
    font-size: 17px;
    font-weight: 500;
  }

  .nav-item.btn-box {
    margin-top: 58px;
  }

  .nav-item.btn-box .btn-style {
    position: relative;
    height: 53px;
    border-radius: 50px;
    font-size: 14px;
  }

  .nav-item.btn-box .btn-style p {
    margin-right: 10px;
  }

  .nav-item.btn-box .contact {
    margin-bottom: 12px;
    background-color: #fff;
    color: #379E49;
    border: solid 1px #379E49;
  }

  .nav-item.btn-box img {
    width: 14px;
    margin-bottom: 7px;
  }

  .nav-item.btn-box .contact img {
    margin-bottom: 5px;
  }

  .nav-item.btn-box .contact .btn-arrow,
  .nav-item.btn-box .map .btn-arrow {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #379E49;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
  }

  .nav-item.btn-box .map {
    font-family: 'Roboto';
    letter-spacing: 0.03em;
    font-weight: bold;
    font-size: calc((31 / 750) * 100vw);
    margin-top: 0;
  }

  .nav-item.btn-box .map p {
    padding-top: 2px;
  }

  .nav-item.btn-box .map .btn-arrow {
    background-color: #fff;
  }

  /*==============================================================
    　　ヒーロー
  ==============================================================*/
  .sec-hero {
    margin-top: 115px;
    position: relative;
    padding: 0 22px;
  }

  .sec-hero .swiper {
    padding: 0;
  }

  .hero-swiper {
    margin-top: 25px;
  }

  .hero-swiper .swiper-slide {
    aspect-ratio: 344 / 400;
  }

  .hero-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-swiper .slide-02 .hero-img img {
    object-position: 60% 0%;
  }

  .hero-swiper .slide-03 .hero-img img {
    object-position: 20% 80%;
  }

  .sec-hero .title {
    font-family: 'Roboto';
    font-size: 34px;
    font-weight: bold;
    line-height: 1.2;
    color: #379E49;
    letter-spacing: 0.01em;
  }

  /*==============================================================
    　　北九ウエスとは about
  ==============================================================*/
  .sec-about {
    box-sizing: border-box;

  }
  .sec h2.title {
    font-size: calc((45 / 750) * 100vw);
    line-height: calc((89 / 750) * 100vw);
    letter-spacing: .073em;
    white-space: nowrap;
    font-weight: bold;
    margin: 52px 0 28px;
  }

  .sec-text {
    display: inline-block;
    font-size: calc((29 / 750) * 100vw);
    font-weight: 400;
    letter-spacing: .184em;
  }

  .underline {
    text-decoration: underline;
    text-decoration-color: #379E49;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  .cycle-img {
    width: 100%;
    height: 100%;
    padding: 40px 22px 54px;
  }

  .cycle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ボタンスタイル */
  .btn-style {
    width: 100%;
    height: 50px;
    text-align: center;
    align-content: center;
    color: #ffffff;
    font-weight: bold;
    background-color: #379E49;
    border-radius: 25px;
    letter-spacing: .1em;
    font-size: calc((29 / 750) * 100vw);
  }

  /* ==================== 画像 ================== */
  .cycle-container {
    position: relative;
    width: calc(100% - 44px);
    max-width: 600px; /* PC ならもっと広げてもOK */
    aspect-ratio: 1 / 1; /* スマホでは正円 */
    border: 3px dotted #2f8f2f; /* 点線の円 */
    border-radius: 50%; /* 円にする */
    margin: 50px auto;
  }

  .cycle-item {
    position: absolute;
    width: 100px;
    height: 100px;
    border: solid 2px #379E49;
    border-radius: 50%;
    text-align: center;
    color: #379E49;
    font-size: 11px;
    font-weight: 600;
    display: grid;
    place-content: center;
    background-color: #fff;
  }

  .cycle-item img {
    width: auto;
    height: 45px;
    margin: 4px 0 6px;
  }

  /* 円周上に配置（4つだから90度ずつ） */
  .cycle-item:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); }
  .cycle-item:nth-child(2) { top: 50%; right: 0; transform: translate(50%, -50%); }
  .cycle-item:nth-child(3) { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
  .cycle-item:nth-child(4) { top: 50%; left: 0; transform: translate(-50%, -50%); }


  /*==============================================================
    　　受け入れについて acceptance
  ==============================================================*/
  .sec-acceptance .sec-text {
    margin-bottom: 48px;
  }

  .sec-acceptance .item {
    padding: 24px;
    background-color: #fff;
    margin-bottom: 28px;
    border-radius: 25px;
    padding-bottom: 32px;
    letter-spacing: .073em;
    box-shadow: 6px 6px 6px 0px #E4E3E3;
    border: solid 1px #f3f3f3;
  }

  .sec-acceptance .item-icon {
    margin-bottom: 13px;
  }

  .sec-acceptance .item-icon svg  {
    width: 40px;
    height: 40px;
  }

  .sec-acceptance .item h3 {
    font-size: calc((40 / 750) * 100vw);
    color: #379E49;
    font-weight: bold;
  }

  .sec-acceptance .item .text {
    font-size: calc((27 / 750) * 100vw);
    margin-top: 12px;
    font-weight: 400;
  }

  .sec-acceptance .note {
    font-size: calc((29 / 750) * 100vw);
    font-weight: 400;
    letter-spacing: .184em;
    margin-bottom: 16px;
  }

  .sec-acceptance .note-box {
    margin: 30px 0;
  }


  /*＝＝＝＝＝＝＝＝＝＝ モーダルの表示 ＝＝＝＝＝＝＝＝＝＝*/
  /* 背景 */
  .modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
  }

  .modal-bg.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* モーダル本体 */
  .modal-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    letter-spacing: 0.03em;
    overflow-y: auto;
  }

  .modal-container .modal-scroll {
    padding: 0 20px 76px;
    background-color: #ffffff;
    border-radius: 20px 20px 0 0;
    margin-top: 20px;
  }

  .modal-container.active {
    opacity: 1;
    pointer-events: auto;
  }

  .modal-close {
    cursor: auto;
    position: var(--modal-close-button-position);
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-item-align: end;
    align-self: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 9999;
    height: var(--modal-close-button-size);
    width: var(--modal-close-button-size);
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-margin-end: var(--modal-close-button-offset-inline-start);
    margin-inline-end: var(--modal-close-button-offset-inline-start);
    margin-top: var(--modal-close-button-offset-top);
    top: var(--modal-close-button-offset-top);

    position: sticky;   /* ← スクロールしたら止まる */
    top: 16px;
    display: flex;
    justify-content: flex-end;

    position: -webkit-sticky;
    position:         sticky;
    top: 0;
    padding-top: 20px;
  }

  .modal-close .close-icon {
    background-color: #333336;
    border: solid 1px #333336;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    align-content: center;
  }

  .modal-close .close-icon img {
    width: 13px;
    height: 13px;
    padding-bottom: 0;
    display: grid;
    place-content: center;
    margin: 0 auto;
  }

  .modal-content {
    flex: 1;
    overflow-y: auto; /* ← ここでスクロール */
  }

  /*＝＝＝＝＝＝＝＝＝＝ モーダルの内容 ＝＝＝＝＝＝＝＝＝＝*/
  .modal-content .title {
    font-size: 26px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 52px;
    line-height: 1.6;
  }

  .modal-content .modal-item {
    background-color: #f5f5f7;
    margin-bottom: 20px;
    padding: 56px 24px 60px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 30px;
  }

  .modal-content .modal-item.icon-box {
    padding: 56px 24px 30px;
  }


  .modal-content .modal-item p {
    margin-bottom: 12px;
    line-height: 1.5;
  }


  .modal-content .modal-item ul {
    margin-left: 20px;
    font-size: 14px;
    margin-top: 26px;
  }

  .modal-content .modal-item ul li {
    list-style: disc;
    margin-top: 8px;
  }

  .modal-content .modal-item .item-box {
    display: grid;
    grid-template-columns: 125px 125px;
    justify-content: space-between;
    margin-top: 44px;
  }

  .modal-content .modal-item .item-img {
    width: 125px;
    height: 125px;
    box-shadow: none;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
  }

  .modal-content .modal-item .item-info img {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
  }

  .modal-content .modal-item .item-info p {
    text-align: center;
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 40px;
  }

  /*==============================================================
    　　環境への取り組み environment
  ==============================================================*/
  .sec-environment {
    padding: 0;
  }

  .sec-environment .text-box {
    padding: 0 22px;
  }

  .sec-environment .text-02 {
    margin: 48px 0;
  }

  /* ==================== スライダー ================== */
  .swiper {
    padding: 0 22px 90px;
    position: relative;
  }

  .swiper-slide {
    position: relative;
    aspect-ratio: 4 / 3;
  }

  .swiper-slide .slide-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 25px;
    z-index: 3;
  }

  .swiper-slide .slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(80%);
  }

  .swiper-slide .text-box {
    position: absolute;
    bottom: 20px;
    z-index: 5;
    color: #fff;
    font-weight: 700;
    letter-spacing: .1em;
  }

  .swiper-slide .text-box .title {
    font-size: 21px;
    margin-bottom: 1px;
  }

  .swiper-slide .text-box .text {
    font-size: 12px;
  }

  /* 矢印共通 */
  .swiper-button-next:after,
  .swiper-button-prev:after {
    display: none;
  }
  /* 次のスライドがない時 */
  .swiper-button-next,
  .swiper-button-prev {
    transition: opacity 0.3s ease;
  }
  .swiper-button-next.swiper-button-disabled,
  .swiper-button-prev.swiper-button-disabled {
    opacity: 0.4;
  }


  /* 矢印スタイル共通 */
  .swiper-arrows .swiper-button-next img,
  .swiper-arrows .swiper-button-prev img {
    width: 50px;
    height: 50px;
    cursor: pointer;
  }

  /* 左矢印 */
  .swiper-arrows .swiper-button-prev img {
    transform: scale(-1, 1);
    margin-left: -225px;
  }

  .swiper-wrapper {
    position: relative;
  }

  .swiper-arrows {
    position: absolute;
    right: 20px;   /* 右からの余白 */
    bottom: 30px;  /* 下からの余白 */
    display: flex;
    z-index: 10;   /* テキストや画像の上に来るように */
  }

  /*==============================================================
    　　会社情報 company
  ==============================================================*/
  .sec-company h2.title {
    margin-bottom: 8px;
  }
  .company-info .info-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px 20px;
    margin: 0 auto;
    font-size: calc((29 / 750) * 100vw);
    font-weight: 400;
    letter-spacing: .073em;
    line-height: 1.6;
    border-bottom: solid 1px #E4E3E3;
    padding: 24px 16px;
    color: #1B1B1B;
  }

  .company-info dt {
    white-space: nowrap;
    align-content: center;
    font-weight: 400;
  }

  .company-info dd {
    margin: 0;
  }

  .company-info .info-item.job {
    border-bottom: none;
  }

  .company-info .info-item .tel {
    color: #379E49;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #379E49;
    text-decoration-thickness: 1.3px;
    text-underline-offset: 4px;
  }

  .company-info .job .item {
    display: grid;
    grid-template-columns: 14px 1fr;
  }

  .company-info .job .item.item-02 {
    margin-top: 10px;
  }

  .map {
    margin-top: 30px;
  }

  .map p {
    font-family: 'Roboto';
    letter-spacing: 0.03em;
    font-weight: bold;
    font-size: calc((31 / 750) * 100vw);
  }

  .president-img {
    margin: 50px 0 48px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background-image: url(../img/president.webp);
    background-repeat:no-repeat;
    background-size: 200%;
    background-position: 50% 30%;
  }


  /*==============================================================
    　　よくある質問 faq
  ==============================================================*/
  .faq {
    width: 100%;
    margin: 0 auto 100px;
    padding: 0 16px;
    margin-top: 80px;
  }

  .faq-toggle {
    display: none;
  }

  .faq-main {
    position: relative;
    font-optical-sizing: auto;
    margin: 0 24px 70px;
  }

  .faq-box {
    font-weight: 400;
    border-top: solid 1px #E4E3E3;
    font-size: 16px;
  }

  .faq-box.box-end {
    border-bottom: solid 1px #E4E3E3;
  }

  .faq-title {
    padding: 1em;
    display: block;
    padding: 22px 30px 25px 0;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1.6;
    display: flex;
    font-size: calc((29 / 750) * 100vw);
    align-items: center;
    letter-spacing: .184em;
  }

  .faq-title::after {
    content: "";
    position: absolute;
    right: 2px;
    width: 25px;
    height: 25px;
    transition: all 0.3s;
    margin: auto 0;
    background-image: url(../img/keyboard_arrow_up.webp);
    background-repeat:no-repeat;
    background-size: cover;
  }

  .faq-box .title-text {
    letter-spacing: .073em;
    line-height: 1.8;
    margin-top: 1px;
    margin-right: 8px;
    align-items: start;
  }

  .text-Q,
  .faq-A {
    display: flex;
  }

  .faq-box p span {
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: calc((29 / 750) * 100vw);
    margin-right: 4px;
    font-weight: 400;
  }

  .faq-A p span {
    font-size: calc((29 / 750) * 100vw);
    margin-right: 9px;
    margin-left: 1px;
    font-weight: 400;
  }

  .faq-content {
    max-height: 0;
    overflow: hidden;
  }

  .faq-content .faq-A {
    line-height: 1.8;
    letter-spacing: .073em;
    font-size: calc((28 / 750) * 100vw);
    padding: 0 30px 40px 0;
    font-weight: 400;
  }

  .faq-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
  }

  .faq-toggle:checked + .faq-title + .faq-content {
    max-height: 500px;
    transition: all 1.5s;
  }

  .faq-toggle:checked + .faq-title::after {
    transform: rotate(180deg) !important;
  }

  .faq-title {
    position: relative;
  }

  /*==============================================================
    　　インスタ instagram
  ==============================================================*/
  .sec-instagram h2.title {
    font-family: 'Roboto';
    font-size: calc((55 / 750) * 100vw);
    letter-spacing: .035em;
    font-weight: bold;
  }

  .link-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px;
    gap: 8px;
  }

  .link-box div {
    background-color: #E4E3E3;
    overflow: hidden;
  }

  .sec-instagram .btn-style {
    margin-top: 45px;
  }

  /* インスタ画像 */
  .sec-instagram .link-box .inst-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
  }

  .sec-instagram .link-box .inst-item.item-01 img {
    object-position: 50% 5%;
  }

  .sec-instagram .link-box .inst-item.item-02 img {
    object-position: 50% 5%;
  }

  .sec-instagram .link-box .inst-item.item-03 img {
    object-position: 50% 25%;
  }

  .sec-instagram .link-box .inst-item.item-06 img {
    object-position: 50% 75%;
  }



  /*==============================================================
    　　フッター
  ==============================================================*/
  .footer {
    background-color: #F4F4F4;
    margin-top: 60px;
    padding: 50px 22px;
    letter-spacing: .05em;
    font-weight: 500;
  }

  .site-links {
    font-size: 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 48px;
    margin: 50px 0;
  }

  .footer .address {
    font-size: 12px;
    line-height: 2;
  }

  .foot-link {
    font-size: 11px;
    font-weight: 500;
    margin: 50px 0 25px;
    color: #666666;
  }

  .foot-link a {
    margin-right: 10px;

  }

  .footer .copy {
    font-size: 10px;
  }


}


@media screen and (min-width: 640px) {
  /* タブレット用レイアウト 640px以上の範囲に収めるデザインはこの中に記述 */

  .sp-only {
    display: none;
  }

  .sp-none {
    display: block;
  }

  /*==============================================================
    　　TB_モーダル（年末年始）
  ==============================================================*/
  .season.modal-container {
    padding: 0;
  }

  .season.modal-container .modal-scroll {
    width: 500px;
    padding: 0 50px 60px;
  }

  .season .modal-close {
    margin-top: -16px;
    margin-right: -63px;
  }

  .season .modal-content {
    padding: 0;
  }

  .season .modal-content .title {
    font-size: 30px;
    margin: 38px 0 30px;
    letter-spacing: 0.02em;
  }

  .season .modal-content .text {
    font-size: 20px;
    letter-spacing: 0.02em;
  }

  .season .modal-content .text span {
    font-size: 21px;
  }

  /*==============================================================
    　　TB_ヘッダー
  ==============================================================*/
  .header {
    padding: 20px 25px;
  }

  .logo-box img {
    height: 50px;
    margin-right: 16px;
  }

  .logo-box .logo {
   font-size: 20px;
  }

  .btn {
    position: fixed;
    top: 36px;
    width: 22px;
    height: 16px;
    right: 26px;
    margin-bottom: 0.8px;
    z-index: 23;
  }

  /* メニューのデザイン*/
  .container {
    width: 52%;
    border-radius: 0 0 0 30px;
  }

  .nav-list {
    padding: 120px 70px 70px;
  }

  .nav-item {
    font-size: 18px;
    margin-bottom: 32px;

  }

  .nav-item.sns {
    font-size: 21px;
  }

  .nav-item.btn-box {
    margin-top: 78px;
  }

  .nav-item.btn-box .btn-style {
    margin: 0;
    height: 65px;
    border-radius: 50px;
    font-size: 18px;
    width: 300px;
    font-size: 18px;
  }

  .nav-item.btn-box .contact {
    margin-bottom: 14px;
  }

  .nav-item.btn-box img {
    width: 16px;
    margin-bottom: 8px;
  }

  .nav-item.btn-box .contact .btn-arrow,
  .nav-item.btn-box .map .btn-arrow {
    width: 30px;
    height: 30px;
  }

  .nav-item.btn-box .map p {
    font-size: 20px;
  }


  /*==============================================================
    　　TB_ヒーロー
  ==============================================================*/
  .sec-hero {
    margin-top: 125px;
  }

  .sec-hero .title {
    font-size: 58px;
    line-height: 1.22;
  }

  .sec {
    padding: 0 25px;
    scroll-margin-top: 140px;
  }

  .hero-swiper {
    margin-top: 30px;
  }

  .nav-item.btn-box .contact img {
    margin-bottom: 7.5px;
  }

  /*==============================================================
    　　TB_北九ウエスとは about
  ==============================================================*/
  .sec h2.title {
    font-size: calc((77 / 1176) * (100vw - 50px));
    line-height: 2.1;
    letter-spacing: .068em;
    white-space: nowrap;
    font-weight: bold;
    margin: 80px 0 30px;
  }

  .sec-text {
    font-size: 30px;
    letter-spacing: 5px;
    line-height: 1.9;
  }

  .underline {
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
  }

  .cycle-img {
    margin-top: 50px;
    margin-bottom: 70px;
  }

  /* ボタンスタイル */
  .btn-style {
    width: 480px;
    height: 84px;
    border-radius: 50px;
    letter-spacing: .1em;
    font-size: 28px;
  }

  .btn-con {
    max-width: 480px;
    margin: 0 auto;
  }

  /* ==================== 画像 ================== */
  .cycle-container {
    max-width: 600px; /* PC ならもっと広げてもOK */
    aspect-ratio: 1.5 / 1; /* スマホでは正円 */
    border: 7px dotted #2f8f2f;
  }

  .cycle-item {
    width: 180px;
    height: 180px;
    border: solid 3px #379E49;
    font-size: 18px;
    font-weight: 700;
  }

  .cycle-item img {
    width: auto;
    height: 85px;
    margin: 2px 0 10px;
  }

  /*==============================================================
    　　TB_受け入れについて acceptance
  ==============================================================*/
  .sec-acceptance .sec-text {
    margin-bottom: 60px;
  }

  .sec-acceptance .item {
    padding: 28px;
    background-color: #fff;
    margin-bottom: 32px;
    border-radius: 30px;
    padding-bottom: 32px;
    letter-spacing: .068em;
    border: solid 1.3px #f3f3f3;
    line-height: 1.5;
  }

  .sec-acceptance .item-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }

  .sec-acceptance .item-icon {
    margin-bottom: 24px;
  }

  .sec-acceptance .item-icon svg  {
    width: 50px;
    height: 50px;
  }

  .sec-acceptance .item h3 {
    font-size: 30px;
  }

  .sec-acceptance .item .text {
    font-size: 20px;
    margin-top: 18px;
    font-weight: 400;
  }

  .sec-acceptance .note {
    font-size: 23px;
    margin-bottom: 20px;
    line-height: 45px;
    letter-spacing: .095em;
  }

  .sec-acceptance .note-box {
    margin: 30px 0 60px;
  }

  /* モーダル本体 */
  .modal-container {
    padding: 20px 44px 40px;
  }

  .modal-container .modal-scroll {
    border-radius: 20px;
    padding: 76px;
    padding: 0;
    margin: 0;
    padding-top: 20px;
    margin-top: 20px;
  }

  .modal-content {
    padding: 76px;
  }

  .modal-close {
    position: -webkit-sticky;
    position:         sticky;
    top: 0;
    padding-top: 0px;
    margin-right: 20px;
  }

  .modal-close .close-icon {
    width: 36px;
    height: 36px;
  }

  /*＝＝＝＝＝＝＝＝＝＝ モーダルの内容 ＝＝＝＝＝＝＝＝＝＝*/
  .modal-content .title {
    font-size: 40px;
    margin-bottom: 76px;
    margin-top: -20px;
    line-height: 1.6;
  }

  .modal-content .modal-item {
    padding: 56px 40px 64px;
  }

  .modal-content .modal-item.icon-box {
    padding: 60px 40px 30px;
  }

  .modal-content .modal-item p {
    font-size: 24px;
    line-height: 1.8;
    margin-bottom: 18px;
  }

  .modal-content .modal-item ul {
    margin-left: 20px;
    font-size: 18px;
    margin-top: 32px;
  }

  .modal-content .modal-item ul li {
    list-style: disc;
    margin-top: 18px;
  }

  .modal-content .modal-item .item-img {
    width: 140px;
    height: 140px;
  }

  .modal-content .modal-item .item-box {
    grid-template-columns: 140px 140px 140px;
    margin-top: 56px;
  }

  .modal-content .modal-item .item-info p {
    font-size: 16px;
    margin-top: 12px;
    margin-bottom: 44px;
    line-height: 1.7;
  }


  /*==============================================================
    　　TB_環境への取り組み environment
  ==============================================================*/
  .sec-environment {
    padding: 0;
  }

  .sec-environment .text-box {
    padding: 0 25px;
  }

  .sec-environment .text-02 {
    margin: 48px 0 64px;
  }

  /* ==================== スライダー ================== */
  .swiper {
    padding: 0 25px 150px;
  }

  .swiper-slide .slide-img {
    border-radius: 30px;
  }

  .swiper-slide .text-box {
    bottom: 36px;
    padding-left: 36px;
  }

  .swiper-slide .text-box .title {
    font-size: 36px;
    margin-bottom: 7px;
    letter-spacing: .08em;
  }

  .swiper-slide .text-box .text {
    font-size: 17px;
    letter-spacing: .1em;
  }

  /* 矢印スタイル共通 */
  .swiper-arrows .swiper-button-next img,
  .swiper-arrows .swiper-button-prev img {
    width: 72px;
    height: 72px;
  }

  /* 左矢印 */
  .swiper-arrows .swiper-button-prev img {
    margin-left: -300px;
  }

  .swiper-arrows {
    bottom: 40px;
    margin-right: 22px;
  }

  /*==============================================================
    　　TB_会社情報 company
  ==============================================================*/
  .sec-company h2.title {
    margin-bottom: 28px;
    line-height: 2.1;
  }

  .company-info .info-item {
    grid-template-columns: 190px 1fr;
    font-size: 23px;
    line-height: 1.7;
    padding: 35px 25px;
  }

  .company-info .info-item .tel {
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  .company-info .job .item {
    grid-template-columns: 25px 1fr;
  }

  .company-info .job .item.item-02 {
    margin-top: 14px;
  }

  .map {
    margin-top: 40px;
  }

  .president-img {
    margin: 80px 0 50px;
  }

  .sec-company .sec-text {
    font-size: 23px;
  }

  /*==============================================================
    　　TB_よくある質問 faq
  ==============================================================*/
  .sec-faq .accordion {
    margin-top: 20px;
  }

  .faq-title {
    padding: 35px 40px 35px 8px;
    font-size: 23px;
  }

  .faq-title::after {
    width: 40px;
    height: 40px;
  }

  .faq-box .title-text {
    margin-top: 0;
  }

  .faq-box p span {
    font-size: 23px;
  }

  .faq-A p span {
    font-size: 22px;
    margin-right: 11px;
    margin-left: 2px;
  }

  .faq-content .faq-A {
    font-size: 22px;
    padding: 0 60px 50px 8px;
    line-height: 1.9;
  }

  /*==============================================================
    　　TB_インスタ instagram
  ==============================================================*/
  .sec-instagram h2.title {
    font-size: 60px;
    letter-spacing: .03em;
    margin-top: 60px;
    margin-bottom: 30px;
  }

  .link-box {
    grid-template-rows: 250px 250px 250px;
    gap: 16px;
  }

  .sec-instagram .btn-style {
    margin-top: 65px;
  }

  /*==============================================================
    　　TB_フッター
  ==============================================================*/
  .footer {
    margin-top: 90px;
    padding: 70px 25px;
    letter-spacing: .05em;
    font-weight: 500;
  }

  .footer .logo-box img {
    height: 72px;
    margin-right: 20px;
  }

  .footer .logo-box .logo {
   font-size: 26px;
  }

  .site-links {
    font-size: 19px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px 60px;
    margin: 70px 0;
  }

  .footer .address {
    font-size: 19px;
    line-height: 1.9;
  }

  .foot-link {
    font-size: 18px;
    font-weight: 500;
    margin: 74px 0 44px;
  }

  .foot-link a {
    margin-right: 16px;
  }

  .footer .copy {
    font-size: 13px;
  }



}


@media screen and (min-width: 1024px) {
  /* パソコン用レイアウト 1024px以上の範囲に収めるデザインはこの中に記述 */
  .pc-none {
    display: none;
  }
  .pc-only {
    display: block;
  }

  /*==============================================================
    　　PC_モーダル（年末年始）
  ==============================================================*/
  .season.modal-container .modal-scroll {
    /* width: 600px; */
    width: 550px;
    padding: 0 70px 80px;
  }

  .season .modal-content .title {
    margin: 58px 0 42px;
    letter-spacing: 0.05em;
  }

  .season .modal-content .text {
    letter-spacing: 0.03em;
  }

  .season .modal-close {
    margin-top: -16px;
    margin-right: -83px;
  }

  .season .modal-close .close-icon img {
    margin-bottom: 2px;
    margin-left: 11px;
  }

  /*==============================================================
    　　PC_ヘッダー
  ==============================================================*/
  /* メニューのデザイン*/
  .container {
    width: 40%;
  }

  .nav-item.btn-box .btn-style {
    width: 100%;
  }

  .nav-item.btn-box {
    margin-top: 72px;
  }

  /*==============================================================
    　　PC_ヒーロー
  ==============================================================*/
  .sec-hero {
    margin-top: 160px;
    position: relative;
    padding: 0 60px;
  }

  .sec-hero .title {
    font-size: 7vw;
  }

  .sec {
    padding: 0 60px;
    scroll-margin-top: 140px;
    max-width: 1300px;
    margin: 0 auto;
  }

  .hero-swiper {
    margin-top: 40px;
    aspect-ratio: 1.5;
  }

  .hero-swiper .slide-02 .hero-img img {
    object-position: 25% 50%;
  }

  .hero-swiper .slide-03 .hero-img img {
    object-position: 20% 80%;
  }

  /*==============================================================
    　　PC_北九ウエスとは about
  ==============================================================*/
  .sec h2.title {
    font-size: calc((77 / 1176) * (100vw - 50px));
    line-height: 2.1;
    letter-spacing: .068em;
    white-space: nowrap;
    font-weight: bold;
    margin: 85px 0 28px;
  }

  /* ==================== 画像 ================== */
  .cycle-container {
    max-width: 840px; /* PC ならもっと広げてもOK */
    aspect-ratio: 1.9 / 1; /* スマホでは正円 */
    border: 10px dotted #2f8f2f;
  }

  .cycle-item {
    width: 230px;
    height: 230px;
    border: solid 4px #379E49;
    font-size: 24px;
  }

  .cycle-item img {
    width: auto;
    height: 105px;
    margin: 2px 0 16px;
  }

  .cycle-img {
    margin-top: 100px;
    margin-bottom: 90px;
  }

  /*==============================================================
    　　PC_受け入れについて acceptance
  ==============================================================*/
  /* モーダル本体 */
  .modal-container {
    padding: 20px 73px 40px;
  }

  .modal-container .modal-scroll {
    position: relative;
    max-width: 1260px;
    margin: 20px auto 0;
  }

  .modal-content {
    padding: 60px 76px 76px;
  }

  .modal-close .close-icon {
    width: 36px;
    height: 36px;
    padding-top: 2px;
  }

  .sec-acceptance .note-box {
    margin: 30px 0 70px;
  }

  /*＝＝＝＝＝＝＝＝＝＝ モーダルの内容 ＝＝＝＝＝＝＝＝＝＝*/
  .modal-content .title {
    font-size: 49px;
    margin-bottom: 100px;
  }

  .modal-content .modal-item {
    padding: 64px 56px;
  }

  .modal-content .modal-item.icon-box {
    padding: 64px 56px 36px;
  }

  .modal-content .modal-item p {
    font-size: 31px;
  }

  .modal-content .modal-item .item-img  {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .modal-content .modal-item ul {
    margin-left: 32px;
    font-size: 22px;
    margin-top: 50px;
  }

  .modal-content .modal-item ul li {
    margin-top: 24px;
  }

  .modal-content .modal-item .min-title {
    font-size: 32px;
    margin-bottom: 28px;
  }

  .modal-content .modal-item .item-box {
    grid-template-columns: 21% 21% 21% 21%;
    margin-top: 64px;
  }

  .modal-content .modal-item .item-info p {
    font-size: 18px;
    margin-top: 12px;
    margin-bottom: 21%;
  }



  /*==============================================================
    　　PC_環境への取り組み environment
  ==============================================================*/
  .sec-environment .text-box {
    padding: 0;
  }

  /* ==================== スライダー ================== */

  .sec-environment .swiper {
    padding: 0 2px;
  }

  .sec-environment .swiper-wrapper {
    display: grid !important;   /* flex を grid に上書き */
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 16px; /* カード間の余白 */
    transform: none !important;
    margin-left: 0 !important;
  }
  .sec-environment .swiper-slide {
    width: auto !important; /* Swiperの幅指定を無効化 */
    margin: 0 !important;
  }

  element.style {
    margin-right: 0px;
  }

  .swiper-slide .text-box {
    bottom: 36px;
    padding-left: 36px;
  }

  /*==============================================================
    　　PC_会社情報 company
  ==============================================================*/
  .company-info {
    margin-top: 40px;
  }

  .company-info .info-item {
    grid-template-columns: 240px 1fr;
    font-size: 30px;
    padding: 40px 25px;
  }

  .company-info .info-item .tel {
    font-weight: 500;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }

  .map p {
    font-size: 33px;
  }

  .sec-company .sec-text {
    font-size: 30px;
  }

  .president-box {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    margin-top: 140px;
    gap: 50px;
    align-content: end;
    margin-bottom: 40px;
  }

  .president-img {
    margin: 0px 0 50px;
    aspect-ratio: 1 / 1;
    background-size: 265%;
    background-position: 51% 30%;
  }

  .president-name {
    text-align: right;
  }

  .sec-company .sec-text {
    font-size: 22px;
    line-height: 1.85;
    letter-spacing: 0.126em;
  }

  .map iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 1.7;
    margin-top: 70px;
  }

  .btn-con.map {
    max-width: 1180px;
  }


  /*==============================================================
    　　PC_よくある質問 faq
  ==============================================================*/
  .sec-faq .accordion {
    margin-top: 40px;
  }

  .faq-title {
    font-size: 30px;
    padding: 40px 40px 40px 8px;
  }

  .faq-title::after {
    width: 45px;
    height: 45px;
  }

  .faq-box p span {
    font-size: 30px;
  }

  .faq-A p span {
    font-size: 28px;
    margin-right: 14px;
    margin-left: 3px;
  }

  .faq-content .faq-A {
    font-size: 28px;
    padding: 0 60px 60px 8px;
  }

  /*==============================================================
    　　PC_インスタ instagram
  ==============================================================*/
  .link-box {
    grid-template-rows: 341px 341px 341px;
    gap: 18px;
  }

  .sec-instagram .btn-style {
    margin-top: 80px;
  }

  /*==============================================================
    　　PC_フッター
  ==============================================================*/
  .footer {
    margin-top: 90px;
    margin-top: 200px;
    padding: 70px 60px;
    letter-spacing: .05em;
    font-weight: 500;
  }

  .foot-link a {
    margin-right: 18px;
  }



}

@media screen and (min-width: 1400px) {
  /* パソコン用レイアウト 1400px以上の範囲に収めるデザインはこの中に記述 */

  .pc-nav {
    display: block;
  }

  .sp-nav {
    display: none;
  }

  .sec {
    scroll-margin-top: 180px;
  }

  .sec-company,
  .sec-faq {
    scroll-margin-top: 190px;
  }

  /*==============================================================
    　　PC-big_モーダル（年末年始）
  ==============================================================*/
  /* .season.modal-container .modal-scroll {
    width: 680px;
  } */

  /*==============================================================
    　　PC-big_ヘッダー
  ==============================================================*/
  .header {
    padding: 60px 60px;
  }

  .header .nav-list {
    display: flex;
    padding: 0;
    position: relative;
    margin-top: 20px;
  }

  .header .nav-item {
    font-size: 14px;
    letter-spacing: 0.17em;
    padding: 0;
    margin: 0;
    padding-left: 32px;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
  }

  .header .nav-item:hover {
    color: #2f8f2f;
  }

  /* ==================== navリンク＿ホバー ================== */
  /* リンク全体に基準を設定 */
  .nav-item a {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
  }

  /* 疑似要素でアニメーション下線を作成 */
  .nav-item a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #379E49;
    transform: scaleX(0);
    transform-origin: left center; /* ← 常に左基準 */
    transition: transform 0.3s ease;
  }

  /* ホバー時：左からスライド表示 */
  .nav-item a:hover::after {
    transform: scaleX(1);
  }

  .logo-box img {
    height: 50px;
    margin-right: 16px;
  }

  .header .nav-item.sns {
    font-size: 17px;
    letter-spacing: 0.08em;
    margin-top: -2px;
  }

  /*==============================================================
    　　PC-big_ヒーロー
  ==============================================================*/

  .sec-hero {
    margin-top: 230px;
  }

  .sec-hero .title {
    font-size: 7vw;
  }

  .btn-style {
    transition: all 0.3s;
    border: solid 2px #379E49;
  }

  .btn-style:hover {
    color: #379E49;
    background-color: #fff;
    border: solid 2px #379E49;
  }

  .hero-swiper .slide-03 .hero-img img {
    object-position: 50% 100%;
  }

  /*==============================================================
    　　PC-big北九ウエスとは about
  ==============================================================*/
  .sec h2.title {
    margin: 150px 0 8px;
  }

  /* ==================== 画像 ================== */
  .cycle-container {
    max-width: 930px; /* PC ならもっと広げてもOK */
    aspect-ratio: 1.9 / 1; /* スマホでは正円 */
    border: 10px dotted #2f8f2f;
  }

  .cycle-item {
    width: 250px;
    height: 250px;
    border: solid 4px #379E49;
    font-size: 26px;
  }

  .cycle-item img {
    height: 115px;
    margin: 2px 0 16px;
  }

  .cycle-img {
    margin-top: 135px;
    margin-bottom: 100px;
  }

  /*==============================================================
    　　PC-big_北九ウエスとは about
  ==============================================================*/
  .sec h2.title {
    font-size: 77px;
  }

  /*==============================================================
    　　PC-big_受け入れについて acceptance
  ==============================================================*/
  .sec-acceptance .note-box {
    margin: 30px 0 100px;
  }


  /*==============================================================
    　　PC-big_会社情報 company
  ==============================================================*/
  .company-info .info-item .tel {
    text-decoration-thickness: 2.5px;
    text-underline-offset: 8px;
    transition: transform 0.3s ease;
  }

  .company-info .info-item .tel:hover {
    opacity: 0.6;
  }

  /*==============================================================
    　　PC-big_よくある質問 faq
  ==============================================================*/
  .sec-faq .accordion {
    margin-top: 70px;
  }

  /*==============================================================
    　　PC-big_インスタ instagram
  ==============================================================*/
  .link-box {
    grid-template-rows: 381px 381px 381px;
    margin-top: 50px;
  }

  .sec-instagram .btn-style {
    margin-top: 80px;
  }

  .sec-instagram .link-box .inst-item:hover img {
    transform: scale(1.1);
  }


  /*==============================================================
    　　PC-big_フッター
  ==============================================================*/
  .footer .site-links a {
    transition: all 0.3s ease-in-out;
  }

  .footer .site-links a:hover {
    opacity: 0.4;
  }

  .footer .foot-link a {
    transition: all 0.3s ease-in-out;
  }

  .footer .foot-link a:hover {
    opacity: 0.6;
  }






}