@tailwind base; 
@tailwind components;
@tailwind utilities;

/* ここにカスタムスタイルを追加 */
@layer components {

    /* 共通 */
    img{
      width: 100%;
      height: auto;
    }
    *, *:before, *:after {
    box-sizing: border-box;
    }

    @media (min-width: 768px) {
      a:hover {
        opacity: 0.8;
      }
    }

    .bg-top-img{
        background-image: url('../img/bg-top.webp');
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    .bg-service {
      background-image: url('../img/bg.webp');
      background-repeat: no-repeat;
      background-size: cover;
    }
    .bg-left-position{
        background-position-y: 74%;
    }
    .separator::before {
        content: '|';
        color: white;
    }
    @media (min-width: 768px) {
      .grid-container {
          display: grid;
          grid-template-columns: calc(100% - 375px) 375px;
      }
    }
    @media (min-width: 1024px) {
        .grid-container {
            display: grid;
            grid-template-columns: calc(50% - 187.5px) 375px calc(50% - 187.5px);
        }
    }
    /* タブレット表示 背景画像 */
    @media (min-width: 768px) and (max-width: 1023px) {
      .bg-top-img {
        background-image: url('../img/bg-top-tablet.webp');
    }
    #leftSidebar .sticky {
      align-items: start;
      padding-top: 260px;
      }
    }
  /* ハンバーガーメニュー */
  /* ハンバーガーメニュー */
#menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 36%;
  max-width: 375px;
  min-width: 320px;
  height: 100vh;
  background-color: white;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  transform: translateX(100%); /* 初期状態で右に隠す */
  transition: transform 0.3s ease-in-out; /* スライドイン・アウトのアニメーション */
}

/* メニューが表示されたときの状態 */
#menu:not(.hidden) {
  transform: translateX(0%); /* 表示時にスライドイン */
}

/* メニューが非表示のとき */
#menu.hidden {
  transform: translateX(100%); /* 非表示時にスライドアウト */
}

/* ハンバーガーメニューのボタンを右上に固定 */
#menuButton {
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 30;
}

/* スクロール可能な中央コンテンツ */
#mainContent {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  height: 100vh;
  overflow-y: auto;
}

/* オーバーレイのスタイル */
#overlay {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
  z-index: 15; /* メニューの下に表示 */
  opacity: 0; /* 初期状態は透明に */
  transition: opacity 0.3s ease-in-out; /* フェードイン・アウトのアニメーション */
  display: none; /* 初期状態では非表示 */
}

/* オーバーレイが表示されたとき */
#overlay.active {
  display: block; /* 表示 */
  opacity: 1; /* 不透明に */
}


    /* トップページ */
    .top-mv-bg {
      background-image: url(../img/top-mv-bg.webp);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
    .slider {
      position: absolute!important;
    }
    .slider .slick-slide{
      margin-right: 5px!important;
      margin-left: 5px!important;
    }
    .top-about-bg {
      background-image: url(../img/top-about-bg.webp);
      background-repeat: no-repeat;
      background-size: cover;
    }
    .top-bg-service {
      background-image: url('../img/bg.webp');
      background-repeat: no-repeat;
      background-size: cover;
    }
    .top-bg-service::before {
      background-image: url('../img/top-bg-service01.webp');
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      position: absolute;
      width: 40.8vw;
      height: 103.46vw;
      top: 32%;
      right: 0;
      display: inline-block;
    }
    .top-bg-service::after {
      background-image: url('../img/top-bg-service02.webp');
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      position: absolute;
      width: 40.9vw;
      height: 83.33vw;
      top: 60%;
      left: 0;
      display: inline-block;
    }
    .top-bg-works {
      background-image: url('../img/top-bg-works.webp');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top center;
    }
    .top-bg-works::after {
      background-image: url('../img/title-bg.webp');
      background-repeat: no-repeat;
      background-size: cover;
      content: "";
      position: absolute;
      width: 100%;
      height: 79.2vw;
      bottom: -18%;
      left: 0;
      display: inline-block;
    }
    .top-bg-client {
      background-image: url('../img/top-bg-client.webp');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top center;
    }
    .top-bg-contact {
      background-image: url('../img/top-bg-contact.webp');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top center;
    }
    @media (min-width: 768px) {
      .top-bg-service::before {
        width: 153px;
        height: 388px;
      }
      .top-bg-service::after {
        width: 153px;
        height: 312px;
      }
      .top-bg-works::after {
        width: 100%;
        height: 297px;
      }
    }

    /* 実績詳細ページ */
    .contact-bg::after {
      background-image: url('../img/title-bg.webp');
      background-repeat: no-repeat;
      background-size: cover;
      content: "";
      position: absolute;
      width: 100%;
      height: 79.2vw;
      bottom: 14%;
      left: 0;
      display: inline-block;
    }
    .color-event {
      border-color: #529632; /* ボーダー色 */
      color: #529632; /* テキスト色 */
    }
    .color-sns {
      border-color: #327296; /* ボーダー色 */
      color: #327296; /* テキスト色 */
    }
    .color-ad {
      border-color: #963292; /* ボーダー色 */
      color: #963292; /* テキスト色 */
    }

    @media (min-width: 768px) {
      .contact-bg::after {
        width: 100%;
        height: 297px;
      }
    }

    /* お問い合わせページ */
    .wpcf7-previous {
      display: block;
    }
    input.wpcf7-form-control.wpcf7-previous {
      border: none;
      text-align: center;
      text-decoration:underline;
      color: #529632;
  }
    
    .contact-step::before {
      content: "";
      position: absolute;
      width: 160px;
      height: 1px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: inline-block;
      background: #529632;
      z-index: -1;
    }
    .wpcf7-form > p {
      margin-bottom: 30px;
    }
    .wpcf7-spinner{
      display: none!important;
    }
    .contact-item__text {
      display: inline-block;
      height: auto;
      width: 100%;
      margin-bottom: 0;
    }
    .contact-item__title {
      font-weight: bold;
    }
    .contact-item__text .contact-item__required {
      color: #fff;
      font-size: 0.75rem;
      background-color: #D9700F;
      padding: 2px 12px;
      border-radius: 4px;
      margin-left: 12px;
    }
    .wpcf7-form-control {
      border: solid 1px #A1A1A1;
      border-radius: 4px;
      display: inline-block;
      width: 100%;
      height: 36px;
      margin-top: 16px;
      padding: 6px 10px;
    }
    .contact-service .wpcf7-form-control {
      border: none;
      display: flex;
      flex-direction: column;
      height: auto;
      padding: 0;
    }
    .contact-service .wpcf7-form-control .wpcf7-list-item {
      font-weight: normal;
    }
    .wpcf7-form-control.service-item {
      height: auto;
      border: none;
      display: flex;
      flex-direction: column;
      padding: 0;
    }
    .wpcf7-form-control.service-item label {
      display: flex;
      margin-bottom: 16px;
    }
    .wpcf7-form-control.service-item input {
      margin-right: 8px;
      width: 16px;
      height: 16px;
      border: solid 1px #A1A1A1;
      margin-top: 3px;
    }
    .wpcf7-form-control.service-item .wpcf7-list-item-label {
      width: 91%;
    }
    .wpcf7-form-control.wpcf7-textarea {
      height: 205px;
    }
    .wpcf7-form-control.wpcf7-submit {
      display: block;
      color: #fff;
      font-size: 1.125rem;
      font-weight: bold;
      background-color: #529632;
      border: none;
      text-align: center;
      width: 295px;
      line-height: 62px;
      height: 62px;
      padding: 0;
      margin: auto;
      margin-top: 0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    }
    .wpcf7-form > p:last-of-type {
      margin-top: 36px;
    }
    .screen-reader-response ul,
    .wpcf7-response-output {
      display: none;
    }
    .screen-reader-response {
      color: #D11C2C;
      margin-bottom: 16px;
    }
    .wpcf7-not-valid-tip {
      color: #D11C2C;
      font-size: 0.75rem;
    }span.contact-confirm-title{
        display: inline-block;
        margin-bottom: 16px; 
    }
    span.contact-confirm-title:first-child{
        margin-top: 0px;
    }
    span.contact-confirm-title{
      display: inline-block;
      margin-bottom: 16px; 
    }
    span.contact-confirm-title:first-child{
        margin-top: 0px;
    }
    .mwform-checkbox-field.horizontal-item {
      display: block;
    }
    .mw_wp_form form > p {
      margin-bottom: 24px;
    }
    .mw_wp_form.mw_wp_form_input .horizontal-item + .horizontal-item {
      margin-left: 0;
    }
    .contact-service {
      margin-bottom: 16px;
    }
    .contact-back {
      font-size: 0.875rem;
      color: #529632;
      text-decoration: underline;
      display: block;
      margin: 0 auto;
    }
    body.contact-confirm .mw_wp_form form > p:nth-of-type(4) .contact-item__text {
      margin-bottom: 0;
    }
  

    /* 実績一覧ページ */
    .tab-button {
      z-index: 10;
      position: relative;
      pointer-events: auto; 
    }
    .tab-button.is-active {
      background-color: #D9700F; /* デフォルト */
      color: white;
    }
    
    .tab-button.is-active.event {
      background-color: #529632; /* イベント企画運営サポートのアクティブ色 */
    }
    
    .tab-button.is-active.sns {
      background-color: #327296; /* SNS運用代行のアクティブ色 */
    }
    
    .tab-button.is-active.ad {
      background-color: #963292; /* 広告運用代行のアクティブ色 */
    }
    /* ページネーション */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      gap: 10px; /* 各ページ番号の間にスペースを追加 */
  }
  
  .pagination a, .pagination span {
      display: inline-block;
      padding: 10px 15px;
      border: 1px solid #4E3504; /* ボーダーの色を指定 */
      border-radius: 4px; /* 角を丸くする */
      background-color: #fff; /* ボタンの背景色 */
      color: #4E3504; /* 文字色 */
      font-size: 1rem; /* 文字サイズを指定 */
      text-decoration: none; /* テキストの下線を削除 */
  }
  
  .pagination .current {
      background-color: #4E3504; /* 現在のページの背景色 */
      color: #fff; /* 現在のページの文字色 */
      font-weight: bold; /* 現在のページの文字を太字に */
  }
  .pagination a {
      transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* ホバー時のスムーズな変化を追加 */
  }
  /* 非アクティブ時のデフォルトスタイル */
.tab-button {
  background-color: #fff; /* ボタンの背景色 */
  color: #4E3504; /* テキスト色 */
  border: 1px solid #4E3504; /* ボーダー色 */
  font-size: 0.875rem;
  padding: 10px 24px;
  border-radius: 9999px; /* 丸いボタン */
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* タブごとのボーダー色（非アクティブ時） */
.tab-button.all {
  border-color: #D9700F;
  color: #D9700F;
}

.tab-button.event {
  border-color: #529632;
  color: #529632;
}

.tab-button.sns {
  border-color: #327296;
  color: #327296;
}

.tab-button.ad {
  border-color: #963292;
  color: #963292;
}


/* button-activeクラスがついたときのスタイル（すべて） */
.tab-button.all.button-active {
  background-color: #D9700F; /* すべての時の背景色 */
  color: #fff;               /* 文字色 */
  border: #D9700F solid 1px;
}

/* イベント企画運営サポートのボタンがアクティブな時 */
.tab-button.event.button-active {
  background-color: #529632; /* イベントの時の背景色 */
  color: #fff;
  border: #529632 solid 1px;
}

/* SNS運用代行のボタンがアクティブな時 */
.tab-button.sns.button-active {
  background-color: #327296; /* SNS運用代行の時の背景色 */
  color: #fff;
  border: #327296 solid 1px;
}

/* 広告運用代行のボタンがアクティブな時 */
.tab-button.ad.button-active {
  background-color: #963292; /* 広告運用代行の時の背景色 */
  color: #fff;
  border: #963292 solid 1px;
}
.pagination .prev,
.pagination .next {
  display: none;
}



@font-face {
    font-family: 'MyCustomFont';
    src: url('../font/LINESeedJP_OTF_Th.woff') format('woff');
    font-weight: 100; /* Thin */
    font-style: normal;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('../font/LINESeedJP_OTF_Rg.woff') format('woff');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('../font/LINESeedJP_OTF_Bd.woff') format('woff');
    font-weight: 700; /* Bold */
    font-style: normal;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('../font/LINESeedJP_OTF_Eb.woff') format('woff');
    font-weight: 800; /* Extra Bold */
    font-style: normal;
}
}