@charset "utf-8";

main {
  padding-top:10vh;
}


.topics-title {
    font-family: Lexend, sans-serif;
    font-weight: 100;
    font-size: 2.5vw;
    color: #002863;
    margin-bottom: 1rem;
}

.topics-title-box {
  margin:10rem 0 3rem 0;
}

     
body {
  overflow-x: hidden;
  font-family: 'Noto Sans JP', sans-serif;
  font-size:0.9rem;
  line-height:170%;
}

.flow-box {
        background-color:#fff;
        padding:2rem;
        border-radius:20px;
      }

img.btnbtn {
  width:210px;
}

a.navbar-brand img {
  width:240px;
}

header {
  background-color:#fff;
}

a.btn-img img:hover {
  opacity:0.8;
}

.navbar {
  height:10vh;
  padding:0.5rem 2rem;
}

.alphabet {
  font-family: "Lexend", sans-serif;
}

.top-main {
  background:url(../img/main.jpg) no-repeat center center;
  height:90vh;
  background-size:cover;
  color:#2d5a88;
  letter-spacing:0.3vw;
  font-size:1.7vw;
  padding:13vw 0 0 12vw;
  line-height:180%;
}

.top-main h1 {
  line-height: 160%;
  padding-bottom:0.7vw;
  font-size:2vw;
  color:#19436f;

}

.top-main h2 {
  font-size:0.9vw;
  color:#19436f;
}

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

.blue-bg {
  background-color:#002863;
  color:#fff;
}

.gray-bg {
  background-color:#f9f9f9;
}

.bg-light {
  background-color:#f9f9f9 !important;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.text-secondary {
  letter-spacing: 0.1rem;
  font-weight:600;
  color:#002863 !important;
}

.nav-contact-btn {
        background-color:#ffaa00;
        width:15rem;
        position: absolute;
        right:0;
        height:100%;
        transition: opacity 0.3s ease;
      }

      .nav-contact-btn:hover {
        opacity: 0.7;

      }
      /* ページのちらつき防止 */
      #main-content.content-hidden {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease-out;
      }

      /* ローディングアニメーション */
      #loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index: 2000;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.5s ease-out;
      }
      #loader::after {
        content: "";
        width: 50px;
        height: 50px;
        border: 5px solid #333;
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        to {
            transform: rotate(360deg);
        }
      }
      .loader-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }



      /* 「取扱業務」内の各項目（企業法務など）のスタイル */
      .practice-item-link {
        text-decoration: none;
      }
      .practice-item-link:hover {
        opacity: 0.7;
      }
      .practice-item-heading,
      .seminar-con-con {
        display: flex;
        align-items: center;
        gap: 10px; /* テキストとアイコンの間隔 */
        margin-bottom:0.7rem;
      }

      .practice-item-heading h4 {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 400;
        color: #002863;
      }
      #practice-areas .practice-item-heading h4 {
        color: #ffffff;
      }
      .practice-item-heading .icon-arrow-small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        border: 1px solid #ffaa00;
        color: #ffaa00;
        flex-shrink: 0;
      }
      .practice-item-heading .icon-arrow-small i,
      .seminar-con .icon-arrow-small i {
        font-size: 0.5rem;
        font-weight: bold;
      }

      .seminar-con .icon-arrow-small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        border: 1px solid #2d5a88;
        color: #2d5a88;
        flex-shrink: 0;
      }

      /* About Usセクション用の円形ボタン */
      .btn-view-all-circle {
        display: inline-flex;
        flex-direction: column; /* 縦並びにする */
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        border: 1px solid #002863;
        color: #002863;
        text-decoration: none;
        transition: all 0.3s ease;
      }
      .btn-view-all-circle span {
        font-size: 0.7rem; /* 文字を小さく */
        font-weight: 700;
        line-height: 1.2;
      }
      .btn-view-all-circle i {
        font-size: 0.7rem; /* アイコンサイズ */
        font-weight: 700;
      }
      .btn-view-all-circle:hover {
        background-color: #002863;
        color: #fff;
      }

      /* テキスト＋矢印アイコンボタン（VIEW ALL/MORE用） */
      .btn-view-all-arrow {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        text-decoration: none;
        transition: opacity 0.3s ease;
      }
      .btn-view-all-arrow:hover {
        opacity: 0.7;
      }
      .btn-view-all-arrow span {
        font-size: 0.7rem;
        font-weight: 500;
      }
      .btn-view-all-arrow .icon-circle-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        transition: all 0.3s ease;
        flex-shrink: 0;
      }
      .btn-view-all-arrow .icon-circle-arrow i {
        font-size: 0.7rem; /* アイコンサイズ調整 */
        font-weight: bold;
      }
      /* 青バージョン */
      .btn-view-all-arrow.blue span { color: #002863; }
      .btn-view-all-arrow.blue .icon-circle-arrow { border: 1px solid #002863; color: #002863; }
      .btn-view-all-arrow.blue:hover .icon-circle-arrow { background-color: #002863; color: #fff; }
      /* オレンジバージョン */
      .btn-view-all-arrow.orange span { color: #ffffff; }
      .btn-view-all-arrow.orange .icon-circle-arrow { border: 1px solid #ffaa00; color: #ffaa00; }
      .btn-view-all-arrow.orange:hover .icon-circle-arrow { background-color: #ffaa00; color: #fff; }

      /* ============================================================== */

      /* ========== [追加] 画像ホバーエフェクト ========== */
      .img-hover-effect {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
      }
      a:hover .img-hover-effect {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
      }
      /* =================================================== */

      /* ========== [追加] トップへ戻るボタン ========== */
      .scroll-to-top-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #002863;
        border: 2px solid #fff;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.7rem;
        text-decoration: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s, background-color 0.3s, color 0.3s;
        z-index: 1000;
      }
      .scroll-to-top-btn.show {
        opacity: 1;
        visibility: visible;
      }
      .scroll-to-top-btn:hover {
        background-color: #f2f2f2;
        color: #777777;
        border: 2px solid #aaaaaa;
      }
      /* =================================================== */

      /* ========== [追加] Accessセクションのお問い合わせボタン ========== */
      .btn-contact-access {
        font-size:1rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        background-color: #ffaa00;
        color: #002863;
        font-weight: bold;
        text-decoration: none;
        padding: 25px 50px;
        border-radius: 10px;
        transition: opacity 0.3s ease;
      }
      .btn-contact-access:hover {
        opacity: 0.8;
        color: #002863;
      }
      .btn-contact-access img {
        height: 20px;
      }
      /* ========================================================== */

      /* ========== [追加] Accessセクションのお問い合わせボタン ========== */
      .btn-contact-access02 {
        font-size:1rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        border:1px solid #002863;
        color: #002863;
        font-weight: bold;
        text-decoration: none;
        padding: 30px 0px;
        border-radius: 10px;
        width:100%;
        transition: background-color 0.3s ease;
      }
      .btn-contact-access02:hover {
        color: #002863;
        background-color: #fefefe;
      }
      .btn-contact-access02 img {
        height: 20px;
      }
      /* ========================================================== */



      .section-title h2 {
        font-family: "Lexend", sans-serif;
        font-weight:100;
        font-size:3.5vw;
        color:#002863;
      }

      .section-title img {
        width:3vw;
        padding-top:1vw;
      }

      .section-title span {
        padding-top:1vw;
        font-size:0.7vw;
      }



      
      .btn-view-all {
        background-color: #002863;
        color: #fff;
        font-weight: bold;
        padding: 12px 50px;
        border-radius: 50px;
        text-transform: uppercase;
        transition: background-color 0.3s;
      }
      .btn-view-all:hover {
        background-color: #004a9e;
        color: #fff;
      }

      .swiper-slide img,
      .seminar-con img,
      .practice_areas-con img,
      .lawyers-con img {
        border-radius:20px;
      }

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

      .seminar-con-con .tag {
        display: inline-block;
        border:1px solid #002863;
        color: #002863;
        font-weight:400;
        padding: 0 14px;
        font-size: 0.6rem;
        border-radius: 15px;
      }

      .seminar-con-con h4 {
        color: #002863;
        margin-top:14px;
        font-size: 1.1rem;
        margin-bottom: 15px;
        font-weight: bold;
      }

      .seminar-con-con p {
        font-size: 0.9rem;
        line-height: 1.6;
        color: #495057;
        margin: 0;

      }

      .practice_areas-con {
        margin-top:5rem;
        line-height:150%;
      }

      
      .practice_areas-con02 {
        padding-top:5rem;
      }

      .news-tab {
        background-color: #ffaa00;
        color:#002863;
        font-weight:bold;
      }

      .nav-contact-btn a {
        text-decoration: none;
        color: #002863;
        font-weight: bold;
      }

      .nav-contact-btn img {
        height:20px;
        flex-shrink: 0;
      }

      .nav-contact-btn span {
        text-align: center;
        line-height: 1.3;
      }

      section.hajimete {
        height:650px;
        background:url(../img/index/hajimete/image.jpg) no-repeat center center;
        background-size: cover;
        color:#fff;
      }

      .news-section-title {
        font-weight:700;
        font-family: 'Noto Serif JP', serif;
        padding-bottom:0.3rem;
      }

      .title-underline {
        display: inline-block;
        border-bottom: 1.5px solid #002863;
      }

      .flow-number {
        font-size:2rem;
        font-weight:200;
        color:#002863;
        font-family: Outfit, sans-serif;
      }

      .flow-title-mini {
        color:#000;
        margin:1.3rem 0;
        font-size:1.1rem;
        line-height:150%;
      }
      .flow-title {
        font-family: Lexend, sans-serif;
    font-weight: 100;
    font-size: 2.5vw;
    color: #002863;
    margin-bottom: 1rem;
      }

      .flow-box {
        background-color:#f9f9f9;
        border:1px solid#002863;
        border-radius:20px;
        padding:2.3rem 2rem;
        margin:3rem 0 0 0;
      }

      section.flow {
    background-color: #fff;
    padding: 9rem 0;
}


      





.news {
  height:8vh;
  background:url(../img/bg-grade.png) repeat-y;
  color:#fff;
  background-size: contain;
  position:relative;
  padding-top:2.5vh;
}

.news-index {
  font-family: 'Noto Sans JP', sans-serif;
}

.news-index dl {
  border-bottom:1px solid #ccc;
  padding-bottom:1.2rem;
  padding-top:0.9rem;
}

dl.news-index-first {
  padding-top:1.7rem;
}

.news-index a {
  color:#000;
  text-decoration:none;
}

.news-index a:hover {
  text-decoration:underline;
}

.news-page {
  margin-top:4rem;
  margin-bottom:4rem;
  text-align:center;
}

.news-page li.active span {
  background-color:#2d5a88;
  color:#fff;
  border:0px;
}

.news-page li span {
  background-color:#97a8be;
  color:#fff;
  border:0px !important;
}

.news-page li span:hover {
  background-color:#2d5a88;

}

.news-page li a:hover {
  text-decoration:none;
}

.news-details {
  font-family: 'Noto Sans JP', sans-serif;
}

.news-details h5 {
  font-size:0.8rem;
}

.news-details h2 {
  color:#2d5a88;
  font-size:1.3rem;
  border-bottom:1px dotted #ccc;
  padding-bottom:1rem;
  margin-bottom:2rem;
}

.news-details h3 {
  border-top:1px dotted #ccc;
  padding-top:2rem;
  margin-bottom:10rem;
  position:relative;
  padding-left:1.5rem;
}

.news-details h3 a {
  color:#2d5a88;
  font-size:0.9rem;
}

.news-details h3 a::before {
  font-family: "Font Awesome 5 Free";
  margin-right: 0.5em;
  font-weight: 600;
  content: "\f104";
  position: absolute;
  left: 0rem;
  color: #2d5a88;
  bottom:0.15rem;
}


.vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size:1rem;
  padding-top:7rem;
  line-height:230%;
}

.v-box {
  position:relative;
  height:53rem;
  background:url(../img/vr-bg.jpg) no-repeat center center;
  background-size:cover;
}

.title {
  margin-bottom:3rem;
}

.title h2 {
  color:#2d5a88;
  font-size:3.5vw;
  font-family: 'EB Garamond', serif;
  padding-bottom:0;
  margin-bottom:0;
}

.title h2.jpn {
  color:#2d5a88;
  font-size:2vw;
  font-family: 'Noto Serif JP', serif;
  font-weight:700;
  padding-bottom:0.7rem;
  margin-bottom:0;
  line-height: 150%;
}


.title h3 {
  color:#de8e00;
  font-size:0.8rem;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.2rem;
}

.usui {
  background-color:#f4f6f9;
}

footer {
  font-size:0.7rem;
  padding:2rem 0;
  background:url(../img/bg-grade.png) repeat-y;
  color:#fff;
  font-family: 'Noto Sans JP', sans-serif;
  position:relative;
  background-size: contain;
  line-height:150%;
}

footer a {
  color:#fff;
  text-decoration:none;
}

footer a:hover {
  text-decoration:underline;
}

footer a:hover {
  text-decoration:underline;
  color:#fff;
}

.accessselect {
  font-size:0.9rem;
  border:1px solid #2d5a88;
  padding:2.2rem;
  font-family: 'Noto Sans JP', sans-serif;
}

.accessselect h3 {
  color:#2d5a88;
  font-size:1.2rem;
}

a.nav-link {
  color:#2d5a88 !important;
  font-weight:600;
  font-size:0.8rem;
}

a.nav-link:hover {
  text-decoration:underline;
}

a.nav-link.active {
  text-decoration: underline;
  color:#0a79b6 !important;
}

.copy {
  margin-top:0.5rem;
}

p.read {
  font-family: 'Noto Sans JP', sans-serif;
}

.slider {
  font-family: 'Noto Sans JP', sans-serif;
  font-size:0.8rem;
  color:#fff;
}


.slider a{
    display: block;
    color:#fff;
    font-size:0.8rem;
}

/*日付*/
.slider span {
    display:inline-block;
    font-size:0.8rem;
    margin-right:10px;
    color:#fff;
}

.bx-wrapper {
  border:0px;
}

.eiji-logo {
  position: absolute;
  top:45%;
  z-index:990;
  width:25vw;
  left:3%;
}

.news-box {
  z-index:990;
}

ul.slider {
  padding:0;
  margin:0;
}

.bx-wrapper {
  background:none;
  box-shadow:none;
}

.top-aboutus-p {
  position:absolute;
  bottom:-30vw;
}

.top-aboutus-con {
  height:30vw;
}

.navbar-light .navbar-toggler {
  border-color: rgba(0,0,0,0);
}

.google-map {
  height:25vw;
}

.page-head {
  position:relative;
  margin-bottom:6rem;
}

.page-title {
  position:absolute;
  color:#fff;
  text-align:center;
  font-size:4vw;
  font-family: 'EB Garamond', serif;
  letter-spacing: 0.1rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.service-con {
  background: url(../img/practice_areas/bg.png) repeat-x center center;
}

.service-con-end {
  background: url(../img/practice_areas/bg.png) repeat-x center 10rem;
}

.service-con h2 {
  color:#2d5a88;
  font-size:1.7rem;
  margin-bottom:1.7rem;
  font-weight:700;
  line-height:140%;
}

.service-con h4 {
  font-size:1rem;
  letter-spacing:0.05rem;
  margin-bottom:1rem;
  color:#c0cedc;

}

.history {
  font-family: 'Noto Sans JP', sans-serif;

}

.history dl {
  margin-bottom:5rem;
}

.history dt{
  font-size:5rem;
  color:#c0cedc;
  font-family: 'Sorts Mill Goudy', serif;
  font-weight:400;
  margin-bottom:2rem;
}

.history dt span {
  font-size:0.9rem;
  font-weight:400;
  font-family: 'Noto Sans JP', sans-serif;
}

.history dd {
  padding-left:5rem;
  position:relative;
}

.office-info {
  position:relative;
}

.office-info dt,
.office-info dd{
  border-bottom:1px solid #ccc;
  padding-bottom:0.7rem;
  margin-bottom:0;
  font-family: 'Noto Sans JP', sans-serif;
}

.office-info-dt-first,
.office-info-dd-first {
  border-top:1px solid #ccc;
  padding-top:0.8rem;
}

.office-info dt {
  color:#2d5a88;
}

.history .container{
  background:url(../img/aboutus/bg-line.png) no-repeat 1.25rem 1rem;
}

.history dl {
  padding-left:4.5rem;
}

.history dl::before {
  content: url(../img/aboutus/circle.png);
  transform: scale(0.6);
  margin-left: 0.5em;
  font-weight: 600;
  position: absolute;
  left:0;
}

.photo01 {
  position:absolute;
  top:0;
  right:0;
  width:15rem;
}

.photo02 {
  position:absolute;
  bottom:0;
  right:0;
  width:20rem;
}

.photo03 {
  position:absolute;
  top:-4rem;
  right:0;
  width:15rem;
}

.photo04 {
  position:absolute;
  top:-4rem;
  right:0;
  width:25rem;
}

.photo05 {
  position:absolute;
  top:2rem;
  right:0;
  width:25rem;
}

.privacy h2 {
  border-bottom:1px solid #2d5a88;
  padding-bottom:1rem;
  margin-bottom:4rem;
  color:#2d5a88;
  font-size:1.5rem;
}

.privacy h3 {
  color:#2d5a88;
  margin-bottom:1rem;
  font-size:1.3rem;
}

.privacy {
  margin-bottom:9rem;
}

.privacy-con {
  border-bottom:1px solid #ccc;
  padding-bottom:2rem;
  margin-bottom:3rem;
}

.lawyers-prof {
  font-family: 'Noto Sans JP', sans-serif;
  font-size:0.8rem;
  line-height:170%;
}

.lawyers-prof h2 {
  background-color:#2d5a88;
  font-family: 'Noto Serif JP', serif;
  color:#fff;
  padding:1rem 2rem 0.5rem 2rem;
  font-weight:600;
  letter-spacing:0.2rem;
  font-size:2rem;
  line-height:100%;
  margin-bottom:1.2rem;
}

.lawyers-prof h2 small {
  font-size:0.8rem;
}



.kome {
  font-family: 'Noto Sans JP', sans-serif;
  font-size:0.7rem;
  line-height:180%;
}

.link-disabled {
  /* クリックイベントを無効化する */
  pointer-events: none;
  /* (任意) ユーザーに無効であることを示すために見た目を変更 */
  cursor: default;
  opacity: 0.6;
}



/* blur */
.blur{
  animation-name: blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  }
  
  @keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }
  
  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
  }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
  
  .blurTrigger{
  opacity: 0;
  }
  
  
  
  
  
  
  /*==================================================
  背景色が伸びて出現
  ===================================*/
  
  .bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
  }
  
  @keyframes bgextendAnimeBase{
  from {
  opacity:0;
  }
  
  to {
  opacity:1;  
  }
  }
  
  /*中の要素*/
  .bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
  }
  
  @keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
  }
  }
  
  /*左から右*/
  .bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #2d5a88;/*伸びる背景色の設定*/
  }
  @keyframes bgLRextendAnime{
  0% {
  transform-origin:left;
  transform:scaleX(0);
  }
  50% {
  transform-origin:left;
  transform:scaleX(1);
  }
  50.001% {
  transform-origin:right;
  }
  100% {
  transform-origin:right;
  transform:scaleX(0);
  }
  }
  
  /*右から左*/
  .bgRLextend::before{
  animation-name:bgRLextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #2d5a88;/*伸びる背景色の設定*/
  }
  @keyframes bgRLextendAnime{
  0% {
  transform-origin:right;
  transform:scaleX(0);
  }
  50% {
  transform-origin:right;
  transform:scaleX(1);
  }
  50.001% {
  transform-origin:left;
  }
  100% {
  transform-origin:left;
  transform:scaleX(0);
  }
  }
  
  /*下から上*/
  .bgDUextend::before{
  animation-name:bgDUextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #2d5a88;/*伸びる背景色の設定*/
  }
  @keyframes bgDUextendAnime{
  0% {
  transform-origin:bottom;
  transform:scaleY(0);
  }
  50% {
  transform-origin:bottom;
  transform:scaleY(1);
  }
  50.001% {
  transform-origin:top;
  }
  100% {
  transform-origin:top;
  transform:scaleY(0);
  }
  }
  
  /*上から下*/
  .bgUDextend::before{
  animation-name:bgUDextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #2d5a88;/*伸びる背景色の設定*/
  }
  @keyframes bgUDextendAnime{
  0% {
  transform-origin:top;
  transform:scaleY(0);
  }
  50% {
  transform-origin:top;
  transform:scaleY(1);
  }
  50.001% {
  transform-origin:bottom;
  }
  100% {
  transform-origin:bottom;
  transform:scaleY(0);
  }
  }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
  .bgappearTrigger,
  .bgUDextendTrigger,
  .bgDUextendTrigger,
  .bgRLextendTrigger,
  .bgLRextendTrigger{
  opacity: 0;
  }





  @media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
    gap: 0.5rem;
  }
}



  



@media screen and (max-width:1273px) {
  .top-aboutus-con {
    height:auto;
  }
}

@media screen and (max-width:1199px) {
  .photo01 {
    width:15vw;
  }
}

@media screen and (max-width:991px) {
  .navbar {
    height:auto;
    padding:0.2rem 0rem 0.2rem 1rem;
  }

  main {
    padding-top:7svh;
  }

  .office-info dt {
    border-bottom:0;
  }

  .office-info-dd-first {
    border-top:0px;
  }

  .photo01 {
    top:-4rem;
  }
  
  .photo02 {
    width:20vw;
  }
  
  .photo03 {
    width:15vw;
    top:-7rem;
  }
  
  .photo04 {
    width:25vw;
  }
  
  .photo05 {
    width:25vw;
  }

}

@media screen and (max-width:768px)  {
        .scroll-to-top-btn {
          right:10px;
          bottom:30px;
        }
      }

@media screen and (max-width:767px) {
  .title h2 {
    font-size:3.5rem;
  }

  .google-map {
    height:100vw;
  }
}

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

  .news {
    padding-top:1vh;
    line-height:160%;
    font-size:0.7rem;

  }
  .news-box {
    top:auto;
    bottom:10%;
    right:5%;
    margin:0 auto;
    width:90%;
  }

}

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

  body {
    line-height:180%;
  }
  

  nav img {
    width:50vw;
  }

  .vertical {
    font-size:0.8rem;
    line-height:170%;
  }

  .accessselect {
    padding:1.2rem;
  }
  
  

  .top-aboutus-p {
    position:relative;
    margin-bottom:3rem;
    bottom:auto;
  }

  .v-box {
    height:30rem;
  }

  .vertical {
    padding-top:5rem;
  }

  .page-title {
    font-size:8vw;
  }

  .page-head {
    margin-bottom:2rem;
  }

  .history dl {
    padding-left:2rem;
    margin-bottom:3rem;
  }

  .history dt {
    font-size:3rem;
    margin-bottom:1rem;
  }

  .history dd {
    padding-left:1rem;
  }

  .title {
    margin-bottom:1.5rem;
  }

  .title h2.jpn {
    font-size:6vw;
  }

  .privacy h2 {
    font-size:1.3rem;
    margin-bottom:1rem;
  }

  .privacy h3 {
    font-size:1rem;
  }

  .privacy-con {
    padding-bottom:0.5rem;
    margin-bottom:1.5rem;
  }

  .privacy {
    margin-bottom:4rem;
  }

  .lawyers-prof h2 {
    font-size:1.2rem;
  }

  .lawyers-prof h2 small {
    font-size:0.6rem;
  }

  .hero {
    position:relative;
    height:auto;
  }

  .section-title {
    padding-left:1rem;
  }

  .section-title h2 {
        font-size:2.8rem;
      }

      .section-title img {
        width:2rem;
      }

      .section-title span {
        font-size:0.7rem;
      }

      .practice_areas-con01 {
        padding-top:0rem;
      }

      a.navbar-brand img {
  width:170px;
}

.btn-contact-access {
  font-size:0.8rem;
}

section.flow {
  padding: 6rem 0;

}

.flow-title {
    font-size: 2.5rem;
      }

/* 横スクロールさせたい中身のスタイル */
.non-responsive-content {
    /* これが重要：スマホの画面幅より広く設定 */
    min-width: 800px; 
    padding: 20px;
}

.topics-title {
  font-size:2.5rem;
}

.topics-title-box {
  text-align:center;
}

.flow-box-con .flow-number {
  border-right:none !important;
  border-bottom:1px solid #eaeaea;
}

.news-section-title {
  font-size:1.5rem;
  margin-bottom:2rem;
}
}