@charset "utf-8";

/* GSAPアニメーション用のCSS */
      #practice-areas {
        position: relative;
        overflow: hidden;
        background-color: #fff;
        padding: 8rem 0;
      }
      .home-service__bg-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .js-service-bg {
        width: 100%;
        height: 100%;
        background-color: #002863;
        -webkit-clip-path: circle(0% at 50% 50%);
        clip-path: circle(0% at 50% 50%);
      }
      #practice-areas .container-fluid {
        position: relative;
        z-index: 1;
      }


      /* Swiper Custom CSS */
      .swiper-section {
        padding: 6rem 0;
      }
      .swiper-area-container {
        position: relative;
      }
      .swiper-clipping-container {
        overflow: hidden; 
      }
      .mySwiper {
        padding-top: 10px;
        padding-bottom: 20px;
        overflow: visible;
      }
      .swiper-slide {
        display: flex;
        flex-direction: column;
        height: auto;
        font-size: 1rem;
        color: #333;
        text-align: left;
        transition: opacity 0.3s ease;
      }
      .swiper-slide:hover {
        opacity: 1; /* ホバー時に他の要素を薄くしないように変更 */
      }
      .swiper-slide a {
        text-decoration: none;
        color: inherit;
        display: block;
        width: 100%;
      }


      .slide-img {
        width: 100%;
        height: 180px;
        object-fit: cover;
      }
      .slide-content {
        padding: 17px 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
      }
      .slide-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
      }
      .slide-content .tag {
        display: inline-block;
        background-color: #002863;
        color: #fff;
        font-weight:400;
        padding: 0 14px;
        font-size: 0.6rem;
        border-radius: 15px;
      }
      .slide-date {
        font-size: 0.85rem;
        color: #6c757d;
      }
      .slide-content h4 {
        font-size: 1.1rem;
        margin-bottom: 15px;
        font-weight: 600;
      }
      .slide-lead {
        font-size: 0.9rem;
        line-height: 1.6;
        color: #495057;
        margin: 0;
      }

      .swiper-navigation-box {
        position: absolute;
        top: -55px;
        right: 10%;
        display: flex;
        gap: 8px;
        z-index: 10;
      }
      .swiper-navigation-box .swiper-button-prev,
      .swiper-navigation-box .swiper-button-next {
        position: static;
        width: 45px;
        height: 45px;
        margin-top: 0;
        background-color: #fff;
        color: #002863;
        border: 1px solid #002863;
        border-radius: 50%;
        transition: background-color 0.3s, color 0.3s;
      }
       .swiper-navigation-box .swiper-button-prev:hover,
      .swiper-navigation-box .swiper-button-next:hover {
        background-color: #002863;
        color: #fff;
      }
      .swiper-navigation-box .swiper-button-prev::after,
      .swiper-navigation-box .swiper-button-next::after {
        font-size: 0.5rem;
        font-weight: bold;
      }
      
      /* ウェルカム動画モーダルのスタイル */
      #welcomeVideoModal .modal-content {
          background-color: #000;
      }
      #welcomeVideoModal .modal-body {
          overflow: hidden;
      }
      
      #youtubeVideo {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100vw;
          height: 56.25vw; /* 100 * 9 / 16 = 56.25 */
          min-height: 100vh;
          min-width: 177.77vh; /* 100 * 16 / 9 = 177.77 */
          transform: translate(-50%, -50%);
          pointer-events: none;
      }

      #welcomeVideoModal .btn-close {
          filter: invert(1) grayscale(100%) brightness(200%);
          position: fixed;
          top: 2rem;
          right: 2rem;
          z-index: 1060;
          font-size: 1.5rem;
          opacity: 0.7;
          transition: opacity 0.2s ease-in-out;
      }

      #welcomeVideoModal .btn-close:hover {
          opacity: 1;
      }


      .custom-banner {
            display: block; /* aタグをブロック要素にする */
            position: relative;
            overflow: hidden; /* 角丸の外側を非表示にする */
            text-decoration: none; /* リンクの下線を消す */
            transition: transform 0.3s ease;
        }

        .custom-banner:hover {
            transform: scale(1.02); /* ホバー時に少し拡大するエフェクト */
        }

        .banner-background01 {
            /* 背景画像の設定 */
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), url('../img/index/aboutus/image.jpg');
            /* 上記URLを実際の画像パスに置き換えてください */
            background-size: cover;
            background-position: center;
            transition: transform 0.4s ease;
        }

        .banner-background02 {
            /* 背景画像の設定 */
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), url('../img/index/lawyers/image.jpg');
            /* 上記URLを実際の画像パスに置き換えてください */
            background-size: cover;
            background-position: center;
            transition: transform 0.4s ease;
        }
        
        .custom-banner:hover .banner-background01,
        .custom-banner:hover .banner-background02 {
            transform: scale(1.05); /* ホバー時に背景画像を少し拡大 */
        }

        .banner-content {
            position: relative; /* 背景より手前に表示 */
            z-index: 2;
            padding:6.5rem;
        }

        .banner-content h2 {
          font-family: Lexend, sans-serif;
          font-weight: 100;
          font-size: 2.2vw;
          color: #fff;
        }

        .banner-content p {
          font-size: 0.7vw;
          letter-spacing:0.1rem;
        }

        

        .banner-icon-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 56px;   /* 円の直径 */
            height: 56px;  /* 円の直径 */
            background-color: #0d2a4c; /* 画像に近い濃紺 */
            border-radius: 50%; /* 円形にする */
            color: white;
            font-size: 0.7rem; /* アイコンのサイズ */
            transition: background-color 0.3s ease;
        }

        .custom-banner:hover .banner-icon-wrapper {
            background-color: #1a539b; /* ホバー時の色変更 */
        }

        /* コンテンツボタンにMP4実装用 */

        .video-container {
            width: 100%;
            aspect-ratio: 3 / 4; /* 縦長の比率を指定 (幅 / 高さ) */
            overflow: hidden;    /* コンテナからはみ出したビデオを隠す */
            position: relative;
        }

        .video-container video {
            width: 100%;
            height: 100%;
            object-fit: cover; /* コンテナを完全に覆うようにビデオを拡大・縮小 */
            position: absolute;
            top: 0;
            left: 0;
        }
          /* コンテンツボタンにMP4実装用 */

          .google-map {
  border-radius: 15px;
  overflow: hidden;
}

.aboutus-title {
  margin-bottom:5rem;
}

section.lawyers,
section.seminars {
  padding:8rem 0;
}

.h-person-box {
  bottom: 2rem;
  position: absolute;
  transform: translateY(-50%);
  right: 0;
}

.h-person-box img {
  width:190px;
}

.index-news {
  padding:8rem 0 4rem 0;
}

.column-title {
        color:#002863;
        writing-mode: vertical-rl;
        line-height: 250%;
      }

      .column-title span {
        font-size:3rem;
        font-weight:200;
      }

      section.foot-googlemap {
        padding:6rem 0;
      }

      .hajimete-text {
      padding-left:11rem;
      }

      a.column-index-link {
        text-decoration:none;
      }


      @media screen and (max-width:599px)  {

      .swiper-navigation-box {
        right:5%;
      }

      .top-main h1 {
        line-height: 160%;
        font-size:1.5rem;
      }

      .top-main h2 {
        font-size:1rem;
        line-height: 170%;
      }

      .top-main {
        height:93svh;
        font-size:4.8vw;
        padding:35vw 0 0 8vw;
        background: url(../img/main_sp.jpg) no-repeat center center;
        background-size: cover;
      }

      .banner-icon-wrapper {
        position: absolute;
        bottom:1.5rem;
        width:40px;
        height:40px;
        left: 50%;
        transform: translateX(-50%);
      }

      .banner-content h2 {
        font-size:1.9rem;
      }

      .banner-content {
        padding:6rem 0;
      }

      .banner-content p {
        font-size:0.6rem;
        text-align:center;
      }

      .aboutus-title {
  margin-bottom:3rem;
}

.main02 {
  height:80vh;
  background: url(../img/main02_sp.jpg) no-repeat center center;
  background-size:cover;
}

#practice-areas,
section.lawyers,
section.seminars,
section.foot-googlemap {
  padding:4rem 0;
}

.practice_areas-con {
  margin-top:0;
}

.practice_areas-con02 {
  padding-top:0;
}

.seminar-con-con {
  margin-top:5px;
}

.h-person-box {
  right:4rem;
  top:8rem;
}

.h-person-box img {
  width:130px;
}

.hajimete h2 {
  padding-top:7rem;
}

.column-title {
  writing-mode: horizontal-tb;
  line-height:150%;
  margin-bottom:5rem;
  padding-left:0.7rem;
}

.swiper-clipping-container {
  margin-top:2rem;
}

.column-title span {
  font-size:2.5rem;
}

.column-title-mini {
  font-size:0.7rem;
}

.googlemap-sp {
  margin:0 1rem;
}

.banner-background01 {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), url(../img/index/aboutus/image_sp.jpg);
  background-size:cover;
}

.banner-background02 {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), url(../img/index/lawyers/image_sp.jpg);
  background-size:cover;
}

section.hajimete {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), url(../img/index/hajimete/image_sp.jpg);
  background-size:cover;
}

.swiper-section {
  padding:0 0 6rem 0;
}


      }


      /* SKIPボタンのスタイル */
.btn-skip {
    position: absolute;
    top: 20px;           /* 上からの位置 */
    right: 20px;         /* 右からの位置 */
    z-index: 1056;       /* モーダルより手前に表示 */
    background: rgba(0, 0, 0, 0.5); /* 背景色（半透明の黒） */
    border: 1px solid #fff;         /* 白い枠線 */
    color: #fff;                    /* 文字色 */
    padding: 5px 15px;              /* 内側の余白 */
    font-size: 14px;                /* 文字サイズ */
    letter-spacing: 0.1em;          /* 文字間隔 */
    cursor: pointer;                /* カーソルを指の形に */
    text-transform: uppercase;      /* 大文字に変換 */
    transition: all 0.3s ease;      /* ホバー時のアニメーション */
}

/* ホバー時のスタイル */
.btn-skip:hover {
    background: #fff;    /* 背景を白に */
    color: #333;         /* 文字を黒っぽく */
    opacity: 1;
}