/*
Theme Name: stg.halftime
Description: stg.halftime
Version: 1
Author: Reina
*/

body,
p,
ul,
li,
div,
h1 {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html[lang="en"] .en_none {
  display: none !important;
}

ul,
ol {
  list-style: none;
}

p,a,h2,h3,h5,h6,h10,h11,h12,h13,h14,h15,th,td{
  color: white;
  font-family: "Noto Sans JP";
}


h4,h7,h8,h9{
  letter-spacing: 0.05em;
}

p{
  font-size: 16px;
  margin: 0 auto ;
  line-height: 1.7;
  font-weight: 400;
  text-align: left;
}

h2{
  font-size: clamp(26px, 5vw, 37px);  
  font-family: 'Noto Serif JP', sans-serif !important;
}

@media (max-width: 400px) {
h2{   

 font-size: clamp(24px, 5vw, 37px);  

}
}

h3{
  font-size: clamp(16px, 3vw, 26px);
  letter-spacing: 0.08em;
}

h4,h5{
  margin: auto 0;
  text-align: center;
  color: #03387E;
}

h4{
  font-size: clamp(26px, 3vw, 27px);
  font-family: 'Roboto';
  font-weight: 900;
}

h5{
  font-size: clamp(16px, 2vw, 20px);
  margin-top: 3px;
  font-weight: 300;
  font-family: 'Noto Serif JP', sans-serif;
}

h6{
  color: #03387E;
  font-size: clamp(15px, 2vw, 16px);
  margin-top: -1px;
  line-height: 1.5;
  margin-bottom: 0;
  font-weight: 600;
}

p.pb{
  font-weight: 300;
}

a {
  text-decoration: none;
}

.p-nav__inner a{
  white-space: nowrap;
}

.description p{
  white-space: normal !important;
}

.center{
  display: flex;
  vertical-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

/*-------ボタン-------*/

a.btn-border {
  border: 1px solid #03387E;
  border-radius: 5px;
  padding: 9px 50px;
  color: #03387E;
  font-size: 15px;
}

a.btn-border2 {
  border: 1px solid white;
  border-radius: 5px;
  padding: 9px 50px;
  font-size: 15px;
}

a.btn-border3 {
  border: 1px solid white;
  border-radius: 5px;
  padding: 12px 70px;
  background-color: white;
  color: #03387E;
}

a.btn-border:hover ,a.btn-border2:hover ,a.btn-border3:hover{
  color: #fff;
  background: linear-gradient(to right, #E1A536, #FFC800,#D38710);
  border: none;
}

a.btn-border:hover ,a.btn-border2:hover{
  color: #03387E;
}

a.btn-border3:hover{
  font-weight: 500;
}

/* ボタン全体 */
a.btn-border2,a.btn-border,a.btn-border3 {
  box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 下方向のシャドウ */
  transition: all 0.3s ease; /* ホバー時のアニメーション */
}

/* ホバー時 */
a.btn-border2:hover {
  border: none;
}

/* 右矢印を追加 */
a.btn-border::after,a.btn-border2::after,a.btn-border3::after {
  content: '>'; /* 矢印文字 */
  display: inline-block;
  margin-left: 10px; /* テキストとの間隔 */
}

/*-------------------*/

main {
  background-color: #03387E;
  width: 100%;
  height: auto;
}

/* パターン1 */
.l-header {
  display: block;
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  left: 0; .
  width: 100%;
  background: #1C1C1C;
  height: 65px;
}

.p-header__nav {
  display: flex;
  z-index: 10;
  position: absolute;
  top: 0;
  right: -100%;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: transparent;
  opacity: 0;
  transition: top 0.6s, right 0.6s, opacity 0.6s;
}

.p-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
  padding: 0 20px;
  max-width: 1100px;   /* 最大幅は制限しておく */
  width: 100%;         /* ビューポートに合わせる */
  min-width: 0;        /* ← これが重要：はみ出し防止 */
  margin: 0 auto;
}

.p-header__hamburger {
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  width: 65px;
  height: 100%;
}

.p-header__nav.is-active {
  position: fixed;
  top: 0;
  right: 0;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.88);
  width: 100%;
}

.p-nav__list {
  display: block;
}

.p-nav__item {
  position: relative;
  width: 100%;
}

.p-nav__link {
  color: white;
  display: block;
  padding: 10px;
  width: 100%;
  white-space: nowrap;
}

.english2,.english3{
    width: 48px;
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.5;
    border-radius: 10px;
    margin-top: 4px;
    color: #fff;
    border: 1px solid #fff;
    margin-left: 10px;
    padding: 1em 2.4em;
}

.english2{
    padding: 1em 1.8em;
}

.english3{
    padding: 1em 5.4em;
}

.p-header__inner img{
  width: 195px;
}

.c-hamburger {
  position: relative;
  width: inherit;
  height: inherit;
  margin: 0;
  border: transparent;
  background-color: transparent;
  cursor: pointer;
}

.c-hamburger span {
  display: block;
  position: relative;
  left: 50%;
  width: 24px;
  height: 2px;
  transform: translateX(-50%);
  transition: all 0.4s;
  background: white;
}

.c-hamburger span:nth-of-type(1) {
  top: -4px;
}

.c-hamburger span:nth-of-type(2) {
  top: 1px;
  transform: translateX(-0.45deg);
}

.c-hamburger span:nth-of-type(3) {
  top: 6px;
  transform: translateX(-0.45deg);
}

.c-hamburger.is-active span:nth-of-type(1) {
  top: 0;
  transform: translateX(-50%) rotate(225deg);
}

.c-hamburger.is-active span:nth-of-type(2) {
  opacity: 0;
}

.c-hamburger.is-active span:nth-of-type(3) {
  top: -4px;
  transform: translateX(-50%) rotate(-225deg);
}

.header__border{
  border-bottom: 4px solid;
  border-image: linear-gradient(to right, #FFC800, #D38710) 1;
}

.p-nav__item:not(:last-child){
  margin-top:3px;
}

.lang-btn{
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  border:1.5px solid #fff;
  border-radius: 10px;
  color:#fff;
  text-decoration:none;
  line-height:1;
}
.lang-btn:hover{ opacity:.9; }

.p-header__inner > a{
  display:flex;                 /* a もフレックス化 */
  align-items:center;           /* ★縦中央 */
  height:100%;
}
.p-header__title{
  margin:0;                     /* h1 の上下余白を消す */
  line-height:1;
  display:flex;
  align-items:center;           /* 画像を中央に持ってくる保険 */
  height:100%;
}

@media screen and (min-width: 850px) {

  .p-header__hamburger {
    display: none;
  }

  .p-nav__inner {
    margin-right: auto;
    margin-left: auto;
    max-width: initial;
    justify-content: flex-start; /* ロゴ左、以降は左揃え → nav の auto で右へ追い出す */
    width: 100%;
    display:flex; 
    align-items:right;
  }

  .p-header__nav {
    position: static;
    opacity: 1;
    height: inherit;
    width: initial;
    right: auto;
    margin-left: auto;  /* ★ロゴから“右端”へ追い出す */
  }
  
   /* デフォルトでは border を非表示にしておく */
  .border {
    display: none;
  }

  .p-nav__list{
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;  /* ★折り返し無し */
  }
  .p-header__lang{
    position: static;   /* ★PCは通常フローに戻す（絶対位置を解除） */
    transform: none;
    margin-left: 20px;  /* ★メニューとの間隔ちょうど30px */
  }
}

/* ハンバーガーメニュー時のスタイル */
@media screen and (max-width: 849px) {

  .p-header__inner img{
  width: 160px;
}
 /* オーバーレイナビの上に出す */
  .p-header__lang{
    position:absolute;
    right:55px;                /* ★ハンバーガーの横幅ぶんだけ左へ（あなたのCSSと同じ幅） */
    top:50%;
    transform:translateY(-50%);
    display:block;
  }
  .lang-btn{ padding:6px 12px; font-size:14px; }

   .p-header__nav.is-active .p-nav__list > li{
    margin: 0 0 20px !important;   /* 下20px */
    border: none !important;
    position: relative;
    list-style: none;
  }

  .p-header__nav.is-active .p-nav__list > li::after{
    content: "";
    display: block;
    width: 200px;                  /* ご指定の長さ */
    max-width: 80vw;               /* 端末が極端に狭い時の保険 */
    height: 1px;
    background: #fff;
    opacity: .9;
    margin: 12px auto 0;           /* 線の上に12px、下はliの20px */
  }

  /* 最後の項目は下線なし */
  .p-header__nav.is-active .p-nav__list > li:last-child::after{
    display: none;
  }

  /* クリック領域も少し広げておく */
  .p-header__nav.is-active .p-nav__list > li > a{
    display: block;
    padding: 10px 0;
    text-align: center;
  }

}

/*----------------------------*/

.main_image {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background:  linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)),url("image/main.jpg")center / cover;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main_logo{
  width: 85%;
}

.h3 {
  margin: 0;
  position: absolute;
  top: calc(50% - 0.5em);
  width: 80%;
  text-align: center;
  line-height: 1;
  font-size: 3.1rem;
  text-shadow: 10px 10px 0 #fff;
}


/*----------------------------*/

.wrapper{
  position: relative;
  background: linear-gradient(to bottom, #03387E, #3063A7);
  margin: 0 auto;
  overflow: hidden;
  justify-content: center;
}

.section{
  margin-top: 30px;
  text-align: center;
}

.title{
  display: flex;
  vertical-align: center;
  align-items: center;
  justify-content: center;
  margin: 0 auto ;
  text-align: center;
  margin-top: 70px;
}

.slash_l{
  width: 4%;
  height: 4%;
  margin: 0 1% 0 0;
  min-width: 25px;
  min-height: 25px;
  max-width: 50px;
  max-height: 50px;
  margin-top: 3px;
}

.slash_r{
  width: 4%;
  height: 4%;
  margin: 0 0 0 1%;
  min-width: 25px;
  min-height: 25px;
  max-width: 50px;
  max-height: 50px;
  margin-top: 3px;
}

.txt{
  width: 65%;
  max-width:820px;
}

.blue p{
  color: #03387E;
  line-height: 1.5;
  width: 100%;
}

.blue{
  color: #03387E;
}

.white p{
  color: white;
  line-height: 1.5;
  width: 100%;
}

.white{
  color: white;
}

.check{
  width: 6%;
  height: 6%;
  margin-right: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.flex {
  display: flex;
  flex-wrap: wrap;        /* 狭い画面で折り返す */
  gap: 20px;
  justify-content: center;
  align-items: stretch;   /* これで子要素の高さが揃う */
  max-width: 1100px;
  margin: 0 auto;
}

.service_top_detail h4{
  white-space: nowrap;
}

.sevice_col3 h5{
  font-size: clamp(16px, 2vw, 17px);
}

.service_top_detail p{
  line-height: 1.5;
}

/* 各カラム（カードの外枠）*/
.sevice_col3 {
  flex: 0 1 340px;        /* 基準幅340px、縮小は許可 */
  display: flex;          /* ここをflexにして縦方向に伸ばす */
  flex-direction: column; /* ヘッダー→本文→フッターの縦並び */
  box-sizing: border-box;
  padding: 6px;
  border: 2px solid #D9D9D9;
  border-radius: 5px;
}

/* カード内部（背景色のボックス）*/
.sevice_col3_box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;         /* 空間を埋める（高さを伸ばす） */
  padding: 40px 15px 40px 15px;
  background: #D9D9D9;
  border-radius: 5px;
}

.sevice_col3_box2{
  padding: 20px 10px;
  background: #03387E;
}

html[lang="en"] .sevice_col3_box2{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;   /* 高さを揃えるために必須 */
  padding: 29px 10px;
  background: #03387E;
  border-radius: 5px; /* 他と同じならこれも追加 */
  box-sizing: border-box;
}

html[lang="en"] .cho{
  padding: 41px 10px;
}



.sevice_col3 {
  display: flex;
  flex-direction: column;
}
.sevice_col3 > * {
  flex: 1;  /* 子要素を同じ高さに揃える */
}

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: stretch; /* ← 重要：子要素（.sevice_col3）を等高にする */
}

/* カード内ボックスを相対位置にしてボタンを絶対配置できるようにする */
.sevice_col3_box,
.sevice_col3_box2 {
  position: relative;      /* 絶対配置の基準 */
  box-sizing: border-box;
  /* ここで下に空間を作る（ボタンの位置分）：
     見た目上、テキスト末尾+230pxにするには
     ボタンを親下から230px上に置くので下部余白は不要だが
     ボタンがボックス外へはみ出すのを防ぐために余裕を持たせる */
  padding-bottom: 60px;    /* 必要に応じ調整（例: ボタン高さ分） */
}

/* ボタンをカード下から230px上に固定（中央寄せ） */
.sevice_col3 .sevice_col3_detail.center,
.sevice_col3 .sevice_col3_detail.center.shita,
.sevice_col3 .sevice_col3_detail.center.shita2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;          /* ← ここで「下から230px上」を指定 */
  width: auto;            /* 必要なら幅調整 */
  display: flex;
  justify-content: center;
  pointer-events: auto;   /* 親が pointer-events を持っている場合用 */
}

.sevice_col3 a{
  white-space: nowrap;
}

.sevice_col3_contents{
  margin-bottom: 30px;
}

.sevice_col3_title{
  display: flex;
}

.sevice_col3_p{
  text-align: left;
  margin-top: -3px;
}

.sevice_col3_p p{
  margin-top: 5px;
}

.sevice_col3_detail{
  margin-top: 20px;
}

.cho{
  padding-top: 39px;
}

/* CTAエリア（カード下部に固定したいボタン等）*/
.sevice_col3_detail.center {
  margin-top: 12px;
  text-align: center;
}

/* ボタンを下に固定したい場合（ボタン親が .sevice_col3_box 内なら） */
.sevice_col3_box .btn {
  margin-top: auto;       /* ここがポイント：残りスペースを埋めて下に押し出す */
}


/* モバイル時：1カラムにする */
@media (max-width: 1100px) {
  .sevice_col3 { flex: 0 1 80%; }
  .flex { gap: 12px; }
  .sevice_col3_box { padding: 16px; }

  .check{
  width: 15px;
  height: 15px;
}

.txt{
  width: 80%;
}

a.btn-border{
  padding: 9px 50px;
  margin-top: 20px !important;
}

a.btn-border2 {
  padding: 9px 40px;
  margin-top: 20px;
}


.sevice_col3{
  margin-top: 30px;
}

.sevice_col3_box,.sevice_col3_box2 {
  padding: 20px 40px;
}

.margin{
  margin-top: 50px;
}

.sevice_col3_contents{
  margin-bottom: 65px;
}

}

@media (max-width: 480px) {
  
  #service_top{
    margin-top: 30px;
  }

  .service_top_detail h4{
  white-space: normal;
}

    .sevice_col3 {
        flex: 0 1 85%;
    }

  .flex { gap: 12px; }
  .txt{ width: 85%;}

  a.btn-border{
  padding: 9px 40px;
  margin-top: 20px !important;
}

a.btn-border2 {
  padding: 9px 30px;
  margin-top: 20px;
}

p{
  font-size: 15px;
}

.section{
  margin-top: 0;
}

.sevice_col3_box, .sevice_col3_box2 {
  padding: 20px 10px;
}

}

/*---------メディア・カンファレンス------------*/

.job{
  width: 500px;
  height: 300px;
  background:  linear-gradient(rgba(0,0,0,0.90),rgba(0,0,0,0.90)),url("image/job.png")center / cover;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  align-items: center;
  vertical-align: center;
  border-radius: 5px;
  margin-bottom: 30px;
}


.magazine{
  width: 500px;
  height: 300px;
  background:  linear-gradient(rgba(0,0,0,0.90),rgba(0,0,0,0.90)),url("image/magazine.jpg")center / cover;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin: 0;
}

.conference{
  width: 500px;
  height: 300px;
  background:  linear-gradient(rgba(0,0,0,0.90),rgba(0,0,0,0.90)),url("image/conference.jpg")center / cover;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin: 0;
}

.job,
.magazine,
.conference {
  display: flex;                 /* flexにする */
  flex-direction: column;        /* 縦並びにする */
  align-items: center;           /* 横方向の中央 */
  justify-content: center;       /* 縦方向の中央 */
  text-align: center;            /* テキスト中央揃え */
  gap: 10px;      
}

.job h4,.magazine h4,.conference h4,#service_top h4{
  margin: 0;
  letter-spacing: 0.02em;
  font-family: "Roboto";
  font-weight: 800;
}

.job p,.magazine p,.conference p{
  width: 90%;
  text-align: center;
}

.job a,.magazine a,.conference a{
  margin-top: 10px;
}

.media {
  display: flex;
  gap: 30px; /* ← これで .magazine と .conference の間が10pxになる */
  margin: auto 0;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.mc h2{
  font-size: clamp(20px, 3.5vw, 30px);  
  padding: 20px 0;
}

.mc{
  margin-bottom: 80px;
}

.mc p{
  padding: 3% 0;
}


@media (max-width: 1100px) {


.mc p{
  padding:0;
}
  .job{
    margin-top: 30px;
  }

  .media {
    display: flex;
    flex-direction: column;  /* 縦並びにする */
    align-items: center;     /* 横方向の中央寄せ */
    gap: 60px;               /* job・magazine・conferenceの間隔 */
    text-align: center;
    margin-top: 60px;
  }

  .job,
  .magazine,
  .conference {
    width: 80%;        /* 横幅を75%にして中央寄せ */
    height: auto;      /* 高さは中身に合わせる */
    padding: 40px 20px;
    border-radius: 5px;
    display: flex;             /* 中身をflexで縦並び */
    flex-direction: column;
    align-items: center;       /* 横方向の中央 */
    justify-content: center;   /* 縦方向の中央 */
    gap: 20px;                 /* h4, p, a の間隔 */
    box-sizing: border-box;    /* padding込みでwidth計算 */
  }

  .job p,
  .magazine p,
  .conference p {
    width: 100%;   /* スマホでは横幅いっぱい使う */
    max-width: 90%; /* 余白を少し残してはみ出さないように */
  }
}

@media (max-width: 480px) {
  .mc h2{
    padding: 30px 0 10px 0;
  }

  .job{
    margin-top: 0px; 
    margin-bottom: 40px; 
  }

  .media {
    gap: 30px;
    margin-top: 30px;
  }

  .magazine{
    margin-bottom: 15px; 
  }

  .job,
  .magazine,
  .conference {
    width: 85%; 
    padding: 35px 10px;
  }
}

/*-----------取引実績-------------------*/
.achievements {
  width: 80%;
/*  max-width: calc(100% - 40px);*/
  max-width: 1000px;
  height: 500px;
  background-color: #fff;
  position: relative;     /* ← 基準になる */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
  padding: 55px 20px 20px 30px;
  border-radius: 5px;
  z-index:100;  /* ← achievementsの後ろに回す */
  margin-top: 20px;
}


#achievements_top .title{
  margin-top: 40px;
}

.react_green {
  width: 100px;
  height: 200px;
  background-color: #00B38F;
  position: absolute;
  top: -20px;   /* ← 単位 px を忘れない */
  right: -30px; /* ← BOXの右上からはみ出させる */
  z-index:10;  /* ← achievementsの後ろに回す */
}

h7{
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 400;
  font-family: 'Noto Serif JP', sans-serif;
  border-bottom: solid 1px #000000;
  padding-bottom: 5px;
  padding: 0 50% 1% 3%;
  margin-bottom: 20px;
  white-space: nowrap;
}

html[lang="en"] .rights_holders h7{
  padding: 0 45% 1% 3%;
}

html[lang="en"] .related h7{
  padding: 0 30% 1% 3%;
}

html[lang="en"] .companies h7{
  padding: 0 20% 1% 3%;
}

.rights_holders, .companies,.related{
  text-align: left;
}

.rights_holders{
  vertical-align: top;
  width: 50%;
  height: 320px;
}

.related{
  vertical-align: top;
  width: 50%;
}

.companies{
  width: 55%;  
}

.top{
  display: flex;
  margin: auto 0;
  justify-content: top !important;
  vertical-align: top;
  align-items: top;
  height: auto;
  height: 330px;
  gap: 10px;
}

.img1{
  margin-top: 20px;
}

.img2{
  margin-top: 5px;
}

.img4{
  margin-top: 33px;
}

.img8{
  margin-top: 29px;
}

.img1,.img2,.img3,.img4,.img5,.img6,.img7,.img8{
  margin-left: 20px;
  vertical-align: middle;
  height: 90px;
}

img.a{
  width: 15%;
  margin-left: 1.6%;
  margin-right: 10%;
}

img.b{
  width: 15%;
  margin-right: 7%;
}

img.c{
  width: 15%;
  margin-right: 9%;
}

img.d{
  width: 9%;
  margin-top: 15px;
}

img.e{
  width: 11%;
  margin-left: 3.5%;
  margin-right: 5%;
}

img.f{
  width: 25%;
  margin-right: 4%;
  margin-bottom: 12px;
}

img.g{
  width:14%;
  margin-right: 3.2%;
}

img.h{
  width: 26%;
  margin-bottom: 20px;
}

img.i{
  width: 19%;
  margin-right: 6%;
}

img.j{
  width: 18%;
  margin-right: 5.5%;
}

img.k{
  width: 18%;
  margin-right: 7%;
}

img.l{
  width: 12%;
}
/*----------*/
img.m{
  width: 21%;
  margin-right: 2.5%;
}

img.mi{
  width: 24%;
  margin-right: 2.5%;
}

img.n{
  width: 20%;
  margin-right: 2.5%;
}

img.o{
  width: 21%;
}
/*----------*/
img.p{
  width: 28%;
  margin-right: 2.5%;
}

img.q{
  width: 32%;
  margin-right: 2.5%;
  margin-bottom: 6px;
}

img.r{
  width: 23%;
}

img.s{
  width: 29%;
  margin-right: 5%;
}

img.t{
  width: 25%;
  margin-right: 4%;
  margin-bottom: 3px;
}


img.u{
  width: 29%;
}

img.v{
  width: 25%;
  margin-right: 8%;
}

img.w{
  width: 25%;
  margin-right: 8%;
  margin-bottom: 6px;
}


img.x{
  width: 24%;
  margin-bottom: 2.5%;
}


img.y{
  width: 30%;
  margin-right: 2.5%;
}


img.z{
  width: 31%;
  margin-right: 2.5%;
  margin-bottom: 13px;
}


img.zz{
  width: 24%;
}

.achievements_detail{
  width: 100%;
  position: relative;     /* ← 基準になる */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0;
  border-radius: 6px;
  max-width: 800px;  
}

.achievements_txt{
  margin: 30px 0;
}

h8{
  font-size: clamp(17px, 2.4vw, 22px);
  margin-top: 3px;
  font-weight: 600;
  font-family: 'Noto Serif JP', sans-serif;
  color:white;
}

span{
  font-size: clamp(12px, 2vw, 13px);
  font-family: "Noto Sans JP";
}
 
.newsdetail span{
  font-size: 18px;
  font-weight: 600;

}

.achievements_txt p{
  margin-top: 15px;
  padding-bottom: 15px;
  width: 100%;
}

@media (max-width: 768px) {
  /* 親コンテナを自動高さにして中身に伸ばす */
  .achievements {
    height: auto !important;
    padding: 40px 24px !important;
    flex-direction: column !important; /* 横並び→縦並び */
    align-items: stretch !important;
    gap: 0; /* 必要なら調整 */
    box-sizing: border-box;
  }

  .achievements_txt p{
  width: 80%;
}

  /* .react_main / .top を縦レイアウトに変更 */
  .react_main,
  .top {
    display: block !important;
    width: 90% !important;
    height: auto !important;
    margin-left: 5%;
  }

  /* rights_holders / related / companies を縦並び・中央寄せに */
  .rights_holders,
  .related,
  .companies {
    display: block !important;
    width: 90% !important;
    text-align: left !important;
    margin: 0 auto 30px !important; /* 下に30pxの余白を確保（重なり回避） */
    box-sizing: border-box !important;
    height: auto !important;
    padding: 0 !important;
    clear: both;
    max-width: 600px;
  }

  .top,{
    width: 80% !important;
  }

  /* 見出しの余白崩れ防止 */
  .rights_holders h7,
  .related h7,
  .companies h7 {
    white-space: normal !important;
    padding: 0 0 8px 0 !important;
    margin: 0 0 12px 0 !important;
    display: block;
  }

  /* .img1/.img2 等の余白リセット（ネストされた余白で重なってることが多い） */
  .img1, .img2, .img3, .img4, .img5, .img6, .img7, .img8 {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }

  /* rights_holders のロゴを横3列に整列 */
  .rights_holders_img {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center;
    justify-content: flex-start;
  }
  
  /* related / companies のロゴを横2列に整列 */
  .related_img,
  .companies_img {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center;
    justify-content: flex-start;
  }

  .rights_holders_img{
    margin-top: 30px;
    width: 100%;
    margin-left: 15px;
  }

  .rights_holders_img img {
    padding-right: 30px !important;
  }

  .companies_img img{
    padding: 0 15px 0 15px;
  }

  .related_img{
    margin-top: 30px;
    width: 100%;
  }
  
  .companies_img {
    margin-top: 30px;
    width:100%;
  }

  /* もし .top 内で左右2-block が横並びになっているなら確実に縦積みに */
  .top > .rights_holders,
  .top > .related {
    width: 100% !important;
    display: block !important;
  }

  .rights_holders_img {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: center;
    justify-items: center;
  }
  /* 中間の wrapper を無効化して img を直接グリッドアイテムに */
  .rights_holders_img > div {
    display: contents;
  }

  .rights_holders_img img {
    width: calc(33.333% - 6.666px) !important;
    max-height: 60px;    /* 高さを整えたいなら調整 */
    max-width: 100% !important;
    object-fit: contain;
    margin: 0 !important;
    height: auto !important;
    display: block;
  }

  /* related と companies を 2列グリッドに */
  .related_img,
  .companies_img {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: center;
    justify-items: center;
  }
  .related_img > div,
  .companies_img > div {
    display: contents;
  }

  .related_img img,
  .companies_img img {
    max-height: 30px !important;    /* 必要に応じて調整 */
    object-fit: contain;
    width: calc(50% - 5px) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
  }

  .related_img img{
    height: auto !important;
    max-height: 38px !important;    /* 必要に応じて調整 */
    padding-bottom: 10px;
  }

  /* 親要素の余白調整（被り防止や間隔） */
  .rights_holders,
  .related,
  .companies {
    margin-bottom: 30px; /* 各ブロックの間隔を30pxに */
  }

  img.i{
    max-height: 37px !important; /* 他と同じ高さにする */
    width: auto !important;      /* 縦横比を維持して高さ基準に */
    margin: 0 auto !important;   /* 中央寄せしたい場合 */
  }

  img.q{
    max-height: 30px !important; /* 他と同じ高さにする */
    width: auto !important;      /* 縦横比を維持して高さ基準に */
    margin: 0 auto !important;   /* 中央寄せしたい場合 */
  }

  img.v{
     max-height: 48px !important; /* 他と同じ高さにする */
    width: auto !important;      /* 縦横比を維持して高さ基準に */
    margin: 0 auto !important;   /* 中央寄せしたい場合 */
  }

  img.t,
  img.z{
    max-height: 27px !important; /* 他と同じ高さにする */
    width: auto !important;      /* 縦横比を維持して高さ基準に */
    margin: 0 auto !important;   /* 中央寄せしたい場合 */
  }

  img.r
  {
    max-height: 51px !important; /* 他と同じ高さにする */
    width: auto !important;      /* 縦横比を維持して高さ基準に */
    margin: 0 auto !important;   /* 中央寄せしたい場合 */
  }

  img.z{
    max-height: 22px !important; /* 他と同じ高さにする */
    width: auto !important;      /* 縦横比を維持して高さ基準に */
    margin: 0 auto !important;   /* 中央寄せしたい場合 */
  }

  img.mi{
    max-height: 26px !important; /* 他と同じ高さにする */
  }

  img.n{
    max-height: 40px !important; /* 他と同じ高さにする */
  }

  img.o{
    max-height: 20px !important; /* 他と同じ高さにする */
  }

  .achievements_detail{
  width: 100%;
}

}

@media (max-width: 530px) {

  .achievements {
    margin-top: 10px;
    width: 80%;
    padding: 20px 0px !important;
  }

  .rights_holders_img img {
    width: calc(33.333% - 6.666px) !important;
    max-height: 60px;    /* 高さを整えたいなら調整 */
    max-width: 100% !important;
    object-fit: contain;
    margin: 0 !important;
    height: auto !important;
    display: block;
  }
  
  .related_img img{
    max-height: 34px !important;    /* 必要に応じて調整 */
    object-fit: contain;
    width: calc(50% - 5px) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
  }

  #achievements_top .title{
    margin: 30px 0 0px 0;
  }

    .rights_holders_img {
      margin-left:0;
    }
    .rights_holders_img img {
        padding: 0 15px !important;
    }

   img.d{
    max-height: 47px !important; /* 他と同じ高さにする */
   }

   img.f,img.h {
    padding: 0px!important;
  }

  img.p{
    max-height: 34px !important; /* 他と同じ高さにする */
  }

  img.r{
    max-height: 45px !important; /* 他と同じ高さにする */
  }

  img.t{
    max-height: 24px !important; /* 他と同じ高さにする */
  }

  img.v{
     max-height: 47px !important; /* 他と同じ高さにする */
  }

  img.y{
     max-height: 36px !important; /* 他と同じ高さにする */
  }

  img.m{
    max-height: 58px !important; /* 他と同じ高さにする */
  }

  img.mi{
    max-height: 60px !important; /* 他と同じ高さにする */
  }

  img.n{
    max-height: 46px !important; /* 他と同じ高さにする */
  }

  img.o{
    max-height: 48px !important; /* 他と同じ高さにする */
  }

  .companies{
    margin: 0 auto !important;
  }

  .companies_img{
    padding-bottom: 30px;
  }

  .achievements_txt, .achievements_txt p{
    margin-bottom: 0;
    padding-bottom: 0;
    text-align: center;
  }

  .achievements_txt{
    margin: 0 auto;
    width: 90%;
  }
}

@media (max-width: 375px) {
img.d{
    max-height: 40px !important; /* 他と同じ高さにする */
   }

img.e{
    max-height: 52px !important; /* 他と同じ高さにする */
   }

img.l{
    max-height: 50px !important; /* 他と同じ高さにする */
   }
}

@media (max-width: 350px) {
img.d{
    max-height: 35px !important; /* 他と同じ高さにする */
   }
}

/*-----------ニュース---------------*/

h9{
  font-size: clamp(17px, 2.4vw, 19px);
  color: white;
  margin-top: -1px;
  line-height: 1.5;
  margin-bottom: 0;
  font-weight: 600;
  margin-bottom: 20px;
}

#news_top .description{
  text-align: left !important;
}

.cp_card04,.cp_card05{
  width: 35%;
  border-radius: 5px 5px 0 0;
  margin-top: 2rem;
  margin-bottom: 2rem;
  position: relative;
  flex: 1 1 calc(50% - 30px);  /* ← 2列レイアウト用。30px gapを引く */
  max-width: 320px;            /* 上限 */
  min-width: 160px;
}
.cp_card04 .photo ,.cp_card05 .photo{
 aspect-ratio: 9 / 9;      /* 実比率に合わせてOK（例 4/3 等） */
 overflow: hidden;          /* 画像だけ隠す */
}

/* a をブロック化して高さ計算を安定化 */
 .cp_card04 > a { display:block; }

/* 行高を明示して“半分だけ切れる”のを防止 */
 .news-item__text, .news-item__title { line-height: 1.6; }
.cp_card04 .photo ,.cp_card05 .photo{
/*  height: 300px;*/
  overflow: hidden;
}

.cp_card04:hover {
  border-bottom: 2px solid white;
}

.saiyo .cp_card04:hover ,.pr .cp_card04:hover {
  border-bottom:none;
}

.description {
　text-align: left;
  vertical-align: left;
  justify-content: left;
  align-items: left;
  margin-top: 30px;
}

.text p{
  margin-top: 15px;
  margin-bottom: 15px;
}

p.news-item__title{
  font-weight: 500 !important;
  font-size: 17px;
}

#saiyo_top .flex3{
  width: 80%;
}

#saiyo_top .cp_card05 .photo{
  width: 80%;
}

.cp_card04 .photo img,.cp_card05 .photo img{
  width: 100%;
/*  height: 100%;*/
  object-fit: contain; /* ← 全体が収まる */
  display: block;
}

.cp_card04 .description {
  padding: 0 1em;
}
.cp_card04 .description h1 {
  font-size: 1.4em;
  margin: 0;
  margin-bottom: 0.5em;
}

.cp_card04 .description a {
  float: right;
  margin: 15px 0 10px 0;
  text-decoration: none;
}

.pr .cp_card04 .description a,.saiyo .cp_card04 .description a {
    float: none !important;
    border-bottom: solid 1px white;
}

.cp_card04 .description a::after {
  background-color: #333; /* 下線の色 */
  bottom: -4px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 2px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: left top; /* 変形の原点を左上に指定 */
  transition: transform .3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}

/* description の疑似要素が正しく動くように親を relative に */
.cp_card04 .description {
  position: relative;
}

/* nolink（採用側）と nolink2（PR側）：リンクがないので下線／hover を確実に無効化 */
.cp_card04.no-link,
.cp_card04.no-link2 {
  cursor: default;         /* カーソルを通常に */
  pointer-events: none;    /* クリックを無効化 */
}

/* 念のため、もし a 要素が残っているケースに備えて非表示にする（安全策） */
.cp_card04.no-link .description a,
.cp_card04.no-link2 .description a {
  display: none !important;
}

/* さらに ::after の表示を確実に消す */
.cp_card04.no-link .description a::after,
.cp_card04.no-link2 .description a::after {
  display: none !important;
  opacity: 0 !important;
  transform: scale(0, 1) !important;
}

.flex2,.flex3{
  width: 90%;
  margin: 0 auto;              /* ← 画面中央に配置 */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ← 3列。各列は最小240pxまで縮む */
  gap: 10%; /* カード間を30pxに固定 */
  box-sizing: border-box;
  max-width:1080px;
}

.flex2{
  gap: 5%; /* カード間を30pxに固定 */
}

.cp_card04,.cp_card05 {
  width: 100%;
  max-width: none; /* Grid セルサイズに従う */
  box-sizing: border-box;
}

.news{
 width: 100%;          /* 親幅いっぱい */
 margin: auto 0;
 text-align: center;   /* 内部のaタグを中央寄せ */
 justify-content: center;
 text-align: center;
 align-items: center;
 padding-top: 20px;
 padding-bottom: 40px;
}

#news_top .title{
    margin-top: 0px;
  }

#news_top .news{
 padding-bottom: 40px;
}

.news .btn {
  display: inline-block; /* ボタンを中央に寄せるため */
}

#news_top a{
    white-space: normal;
  }
#news_top .cp_card04 .photo { 
  margin-bottom: 20px !important;
}
#news_top .cp_card04 .description {
  margin-top: 0 !important;
  padding-top: 0; /* 念のため */
}
@media (max-width: 768px) {

  #news_top .title{
    margin: 30px 0 20px 0;
  }

.flex2{
  gap: 3%; /* カード間を30pxに固定 */
}

  .flex2,.flex3 {
    grid-template-columns: 1fr; /* 1列に切替 */
    width: 80%;                 /* コンテナ幅を画面の90% */
    gap: 20px;
    padding: 0 5%;              /* 両端5%ずつ余白 */
    margin: 0 auto;             /* 中央寄せ */
  }

  .cp_card04{
    width: 100%;               /* グリッドの幅に合わせる */
    max-width: none;           /* 制限解除 */
    margin-top: 0;
  }


  .cp_card04 .photo img, .cp_card05 .photo img {
    width: 100%;               /* 画像をカード幅いっぱいに */
    height: auto;              /* 元画像比率で表示 */
    object-fit: contain;       /* 全体を収める */
    display: block;
  }

  .description {
    width: 60%;                /* 文字部分はカード幅の80% */
    margin: 0 auto;            /* 中央寄せ */
    margin-top: 30px;
  }

  #news_top{
    margin-top: 30px;
  }

  #news_top .title{
    margin-top: 0px;
  }
}

/* さらに小さい端末で余白を調整 */
@media (max-width: 420px) {
  .flex2,.flex3 {
    width: 100%;
    padding: 0 7.5%;
  }
  
  .cp_card04 .description {
    width: 100% !important;                /* 小さい画面は文字も広げる */
  }

  .news{
    padding: 0 0 35px 0;
  }

  #saiyo_top .flex3 {
    width: 100%;
}

   #saiyo_top .flex3 {
    gap:40px;
  }
}

#news_top .cp_card04 .photo {
  aspect-ratio: auto !important;   /* ← これで .photo の強制比率を無効化 */
  height: auto;
  overflow: visible;               /* 任意（隠さないなら） */
}
#news_top .cp_card04 .photo img {
  width: 100%;
  height: auto;                    /* 画像は比率維持で伸縮 */
  display: block;
}

#news_top .cp_card04 .photo {
  aspect-ratio: 16 / 9;          /* 実画像に合わせて */
  overflow: hidden;
}
#news_top .cp_card04 .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* はみ出しはトリミング */
  display: block;
}

/*------------採用・会社情報---------------*/

.sc{
  background: linear-gradient(rgba(3,56,126,0.95)),url("image/baseball.jpg") center bottom / cover no-repeat;
  height: auto;           /* section の高さに合わせる */
  background-position: bottom;  /* 中央を基準に配置 */
  background-size: cover;       /* 高さに合わせてトリミング */
  padding: 20px 0 0px;  /* ← 上60px / 下120px余白 */
  box-sizing: border-box;
  margin-top: 0;
}

.flex3{
  width: 100%;
  margin: 0 auto;              /* ← 画面中央に配置 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← 2列。各列は最小0pxまで縮む */
  max-width:1100px;
  box-sizing: border-box;
  align-items: end;
}

.flex3 .title{
  margin-top: 20px;
}

.saiyo,.company{
  width: 100%;
  margin: 0 auto; 
}

.cp_card05 {
    width: 100%;               /* グリッドの幅に合わせる */
    max-width: none;           /* 制限解除 */
    margin-top: 0;
  }

.company .cp_card05,.saiyo .cp_card05{
  margin-bottom:0;
}

div#saiyo_top .slash_l{
  width: 10%;
  height: 10%;
  margin: 0 15px 0 0;
  min-width: 27px;
  min-height: 27px;
  margin-top: 3px;
}

#saiyo_top .cp_card05 .photo {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#saiyo_top .cp_card05 .photo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 768px) {

  .sc{
    padding: 10px 0 30px;  /* ← 上60px / 下120px余白 */
  }

  .flex3 {
    display: grid;
    grid-template-columns: 1fr; /* 1列 */
    width: 92%;                 /* 親幅を画面いっぱいに寄せつつ余白確保 */
    max-width: 720px;
    gap: 24px;                  /* 上下の間隔 */
    margin: 0 auto;             /* 中央寄せ */
    box-sizing: border-box;
    padding: 24px 0;
  }

  #saiyo_top .flex3 {
    padding: 0;
  }

  /* 各コラムをカード状に見せる（幅100%） */
  .flex3 > .saiyo,
  .flex3 > .company {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;   /* 内部要素を中央寄せ */
    gap: 12px;
  }

  /* カード内画像をカード幅に合わせる（はみ出さない） */
  .cp_card05 .photo,
  .cp_card04 .photo {
    margin:  0 auto;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
 
  /* 「もっと見る」ボタンを確実に中央に */
  .flex3 .news {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 20px;
  }

  .news a{
    margin: 0 !important;
  }
}

@media (max-width: 700px) {

  .saiyo .news{
    padding: 20px 0 0 0;
  }

  #company_top .title{
    margin-top: 0;
  }
}

.flex3 {
  /* 既存のプロパティは残す */
  align-items: stretch; /* ← end から stretch に変更 */
}

/*------------お問い合わせ---------------*/

.contact {
  background: linear-gradient(to bottom, #03387E, #3063A7, #03387E);
  padding-bottom: 60px;
  margin-top: 0;
}

#contact_top .title{
  margin-top: 0px;
  padding-top: 30px;
}

.info{
  margin: 2% 0 5% 0;
}

.info a.btn-border2{
  border: 1px solid white;
  border-radius: 5px;
  padding: 9px 40px;
}

@media (max-width: 425px) {
  a.btn-border3 {
    border: 1px solid white;
    border-radius: 5px;
    padding: 10px 25px;
    background-color: white;
    color: #03387E;
  }
}


/*------------footer---------------*/
footer {
  width: 100%;
  background-color: #1C1C1C;
  color: #fff;
  box-sizing: border-box;
  padding: 35px 0;           /* 高さ固定はやめて中身に応じる */
}

/* フッター内ラッパー（中央寄せ＆最大幅） */
.footer_detail {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ul をフレックスにして横並び、中央寄せ */
.footer_detail ul {
  display: flex;
  gap: 25px;                 /* li 間のスペース（好きに調整） */
  justify-content: center;   /* 横方向中央寄せ */
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: wrap;           /* 幅が狭ければ折り返す */
}

/* 各 li の基本スタイル */
.footer_detail ul li {
  margin: 0;
  padding: 0;
}

/* リンク（a）スタイル */
.footer_detail ul li a{
  color: #fff;
  text-decoration: none;
  font-size: 14px;           /* 必要なら clamp() で可変に */
  line-height: 1;
  display: inline-block;
  padding: 6px 4px;          /* クリック領域を確保 */
  transition: color .18s, transform .18s;
}

/* ホバー/フォーカス時の見た目 */
.p-nav__inner ul li a:hover,
.p-nav__inner ul li a:focus,
.footer_detail ul li a:hover,
.footer_detail ul li a:focus,
 a.point:hover,
 a.point:focus,
 .p-header__lang .lang-btn:hover,
 .p-header__lang .lang-btn:focus{
  color: #FFC800 !important; /* 他CSSに勝たせる */
  outline: none;
}

.footer p{
  text-align: center;
  font-size: clamp(12px, 1.7vw, 13px);
  margin-top: 30px;
}

.flex4{
  display: flex !important;
  justify-content: center; /* 中央寄せ */
  align-items: center;
  gap: 25px;                /* ← ここがアイコン間隔 */
  margin: 30px auto 0;     /* 上余白と中央寄せ */
  padding: 0;
  box-sizing: border-box;
  width:60%;
}

.flex4 a {
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.flex4 img{
  width: 30px;
  height: 30px;
  display: block;   /* インライン余白を消す */
  object-fit: contain;
  margin: 0;
  padding: 0;
}

.flex4 img,
.flex4 > a {
  max-width: none !important;
}


/* モバイル（幅が狭いときは縦並び） */
@media (max-width: 680px) {
  .footer_detail {
    width: 92%;
    padding: 0 8px;
  }

  .footer_detail ul {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

}

.page-id-108 .p-header__lang { display: none !important; }
.page-id-389 .p-header__lang { display: none !important; }

/*----------------採用・PRブランディング-------------------*/

.sub_title {
  position: relative;
  width: 100%;
  max-width: 1220px;     /* PC時の最大幅 */
  margin: 0 auto;
  overflow: hidden;      /* はみ出し防止 */
}

.sub_imagedetail {
  position: absolute;
  top: 75%;
  left: 120px;            /* 左から少し余白 */
  transform: translateY(-50%);
  z-index: 3;
  color: white;
  max-width: 60%;
  word-break: break-word;
}

h10 {
  font-size: clamp(55px, 7vw, 80px);
  font-family: 'Roboto';
  font-weight: 900;
  font-style: italic;
  margin: 10% 0 0 0;
}

.client_top {
  display: block;
  width: 75%;            /* デフォルト幅 */
  max-width: 1100px;     /* 最大幅制御 */
  height: 184px;
  object-fit: cover;
  object-position: right; /* 画像の右側を優先表示 */
  margin-left: auto;      /* 右端に寄せる */
  padding-top: 30px;
}


.client_saiyo .photo img {
  width: 400px;   /* 横幅 */
  height: 180px;  /* 縦幅 */
  object-fit: cover; /* 画像をトリミングして枠にフィットさせる */
  display: block;
}

.client_saiyo .photo img {
  height: 180px;  /* 縦幅 */
}
.saiyo .flex2 {
   padding-bottom: 40px;
}
@media (max-width: 768px) {
  .client_top {
    width: 100%;
    max-width: none;
  }

  .news_button_detail a{
    white-space: nowrap;
  }

  .sub_imagedetail {
    left: 50px;
    max-width: 80%;
    font-size: clamp(20px, 6vw, 35px);
  }

  .sub_title {
  height: 10%;
}

  .client_title{
    margin: 12% 0 3% 0;
  }

  .client_saiyo .photo img {
  height: 300px;  /* 縦幅 */
}

.saiyo .description,.pr .description{
  width: 90%;
}
}

@media (max-width: 425px) {
.client_title{
    margin: 0% 0 3% 0;
  }

  .news_button_detail{
    position: static !important;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    padding: 12% 0 5% 0%;
  }

  .news_button_detail a{
    font-size: 14px;
  }
}

.saiyo_btn{
    padding-bottom: 40px !important;
    padding-top: 0px;
}

.client_wrapper {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.news_button_detail {
  position: absolute;
  top: 30px;               /* 必要に応じて調整 */
  right: 20px;          /* 右端から20px */
  max-width: 1100px;    /* 最大1100px */
  width: auto;          /* 中身に合わせる */
  display: flex;
  z-index: 3;
}

.news_button_detail li{
  right: 0;
}

h11,h12{
  font-size: clamp(17px, 2vw, 18px);
  font-weight: 500;
}

h12{
  font-weight: 400;
}

.h11{
  padding: 5% 0;
}

.client_saiyo .description,.client_pr .description{
  padding: 0;
}

.client_saiyo p{
  font-weight: 300;
}

/* 親は背景画像を持たせない（疑似要素で処理する） */
.background {
  position: relative;
  background: none;
  box-sizing: border-box;
  padding: 10px 0 0 0;
  margin-top: 0;
}

/* 疑似要素::before に背景画像を入れて、下方向へフェード（マスク）をかける */
.background::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: url("image/tie.jpg") center bottom / cover no-repeat;
  /* 画像自体を上→下でフェードさせる（WebKit と標準） */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  z-index: 0;
  pointer-events: none;
}

/* 色のオーバーレイ（上部は濃く、下に行くほど透明）を別の疑似要素で重ねる */
.background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(3,56,126,0.95) 0%, rgba(3,56,126,0) 100%);
  z-index: 1;
  pointer-events: none;
}

/* .background 内のコンテンツ（h2 や .slash_r）は疑似要素の上に表示する */
.background > * {
  position: relative;
  z-index: 2;
}

.client_pr{
  margin-bottom: 50px;
}

.client_pr .flex2 {
  
  justify-content: space-between; /* 均等配置 */
  gap: 20px 30px;         /* 縦30px、横20pxの間隔 */
  margin-bottom: 60px;    /* 下の余白を確保 */
}

.pr .flex2 {
  justify-content: space-between; /* 均等配置 */
  gap: 20px 40px;         /* 縦30px、横20pxの間隔 */
  margin-bottom: 30px;    /* 下の余白を確保 */
}

/* 各カードの幅を調整（3列） */
.client_pr .cp_card04 {
  box-sizing: border-box;
}


@media (max-width: 768px) {
   .cp_card04 .photo {
    width: 90%;
  }
}

@media (max-width: 680px) {
  .pr .background{
    margin-bottom: 20px !important;
  }

  .cp_card04 .photo {
    width: 100%;
  }

  .client_saiyo .description,.client_pr .description{
    width: 100%;
    margin-top: 10px;
  }
}

#saiyo_top .cp_card05 .photo{
  aspect-ratio: 16 / 9;   /* 画像の比率に合わせて調整可 */
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

/* 画像は箱いっぱいに収める（切り抜き嫌なら contain のままでもOK） */
#saiyo_top .cp_card05 .photo img{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* そのまま“全体表示”派なら contain で */
  display: block;
}

#saiyo_top .cp_card05 .photo { 
  aspect-ratio: 16 / 9;   /* 必要なら 4/3 等に変更 */
}

#saiyo_top .cp_card05 .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 収まり優先なら contain のままでも可 */
}
#saiyo_top .cp_card05 .photo { aspect-ratio: 11/9; } /* 画像比率に合わせて */
#saiyo_top .cp_card05 .photo img { width:100%; height:100%; object-fit:cover; }


/*----------ニュース一覧----------------*/

.newspage{
  padding-top: 0;
}

.news_p{
  text-align: center;
  margin: 5px 0;
}

.pagination{
  margin: 5% 0 8% 0;
}

.pagination ul ,.news_button_detail ul{
  margin: auto 0;
  justify-content: center;
}

.pagination_detail, .news_button_detail{
    display: flex;
    gap: 0.5rem;
}

.news_button_detail{
  gap: 1rem;
}

.pagination_detail a{
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 1px solid white;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    line-height: 40px;
    text-align: center;
}

.news_button_detail a {
   position: relative;
    display: inline-block;
    width: 100%;
    padding: 10px;
    height: 30px;
    border: 1px solid white;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    line-height: 7px;
    text-align: center;
}

.pagination_detail i ,.news_button_detail i{
    line-height: 40px;
}

.pagination_detail .active a,.news_button_detail .active a {
    background-color: #00B38F;
    color: white;
}

.pagination_detail a:hover ,.news_button_detail a:hover{
    background-color: #00B38F;
    color: white;
}

.pagination_detail .disabled a ,.news_button_detail .disabled a {
    pointer-events: none;
    color: white;
}

.pagination_detail .disabled a:hover,.news_button_detail .disabled a:hover {
    background-color: initial;
    color: white;
}

@media (max-width: 768px) {
.news_p{
  text-align: center;
  width:80%;
  text-align: center;
  margin: 0 auto;
  padding: 2% 0 5% 0;
}

.pagination{
  margin: 0 0 13% 0;
}

.pagination{
  margin: 10% 0 8% 0;
}

 .newspage .title{
  margin-top: 15px;
 }
}

/*----------ニュース詳細----------------*/

.newsdetail{
  position: relative;
  width: 70%;
  max-width: 1100px;
  margin: 0 auto;
  justify-content: center;
  text-align: center;
}

.newsdetail_txt{
  text-align: left;
  margin-top: 80px;
}

.h13{
  margin-bottom: 20px;
}

h13{
  font-size: clamp(18px, 2.8vw, 19px);
}

h14{
  font-size: clamp(18px, 2.8vw, 30px);
  font-weight: 500;
}

.newsdetail img{
  display: block;
  width: 100%;
  height: auto;         /* 高さは自動（縦横比維持） */
  object-fit: cover;    /* or contain：見せ方の好みで */
  position: relative;
  z-index: 1;   
  border-radius: 2px;
}
.pr h1,.pr h2,.pr h3,.pr h4,.pr h5,.pr h6,
.saiyo h1,.saiyo h2,.saiyo h3,.saiyo h4,.saiyo h5,.saiyo h6,
  .newsdetail h1,.newsdetail h2,.newsdetail h3,.newsdetail h4,.newsdetail h5,.newsdetail h6{
  color: white;
  font-family: "Noto Sans JP";
  font-weight: 600;
  letter-spacing: 1;
  line-height: 1.3;
  text-align: left;
}

pr h1,.pr h2,.pr h3,.pr h4,.pr h5,.pr h6,
.saiyo h1,.saiyo h2,.saiyo h3,.saiyo h4,.saiyo h5,.saiyo h6,{
  font-weight: 400;
}

.newsdetail h1{font-size: 26px !important;}
.newsdetail h2{font-size: 24px !important;}
.newsdetail h3{font-size: 22px !important;}
.newsdetail h4{font-size: 20px !important;}
.newsdetail h5{font-size: 18px !important;}
.newsdetail h6{font-size: 16px !important;}

.news-img{
  position: relative;
  display: block;       /* 横幅に合わせる */
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8%;
}

.news-img::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 200px;
  background: #00B38F;     /* 必要に応じて色を変更 */
  bottom: -20px;        /* 画像の下に30pxはみ出す */
  right: -20px;         /* 画像の右に30pxはみ出す */
  z-index: 0;           /* 画像の背面だが親の中には表示される */
  border-radius: 2px;   /* 任意 */
}

.news_border{
  width: 100%;
  border-bottom: solid 1px white;
  margin: 4% 0 5% 0;
}

.prbtn{
  padding-bottom: 80px;
}

.pagination_back{
  margin: 5% 0 5% 0;
  justify-content: center;
}

.pagination_back ul ,.pagination_backdetail ul{
  margin: auto 0;
  justify-content: center;
}

.pagination_back, .pagination_back_detail{
    display: flex;
    gap: 0.5rem;
}

.pagination_back_detail{
  gap: 3rem;
}

.pagination_back_detail a{
    position: relative;
    display: inline-block;
    width: 80px;
    height: 40px;
    color: white;
    text-decoration: none;
    line-height: 40px;
    text-align: center;
}

.pagination_back_detail i{
    line-height: 40px;
}

.pagination_back_detail .active a{
    background-color: #00B38F;
    color: white;
}

.pagination_back_detail a:hover,
.pagination_back_detail a:focus{
  color: #FFC800;            /* 強調色 */
  outline: none;
}

.pagination_back_detail .disabled a{
    pointer-events: none;
    color: white;
    transition: color .18s, transform .18s;
    display: inline-block;
}

.pagination_back_detail .disabled a:hover{
    background-color: initial;
    color: white;
}


@media (max-width: 680px) {
.newsdetail{
  width: 80%;
  max-width: 1080px;
}

 .newsdetail_txt{
    margin-top: 40px;
  }
}

@media (max-width: 425px) {
.news-img::after {
    width: 80px;
    height: 139px;
    bottom: -11px;
    right: -13px;
}
}

/*--------------採用情報ページ-----------------*/

.concept_detail{
  display: flex;
  width: 80%;
  max-width: 1100px;
  margin: 3% auto;
}

.concept_detail_left{
  width: 60%;
  padding-right: 10px;
}

.concept_detail_left p{
  margin: 5% 0 3% 0;
}

.concept_detail_left h5{
  text-align: right;
  color: white;
}

.concept_detail_right{
  width: 40%;
  text-align: right;
}

.concept_detail_right img{
  width: 90%;
}

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

   .concept_detail{
    display: flex !important;
    flex-direction: column-reverse; /* right を上、left を下 にする */
    width: 80%;
    margin: 3% auto;
    box-sizing: border-box;
  }

  .concept_detail_left,
  .concept_detail_right{
    width: 100% !important;
    margin: 0 auto;
  }

  .concept_detail_right{
    margin-bottom: 20px; /* 必要なら調整 */
    text-align: center;
  }

  .concept_detail_right img{
    width: 75% !important;
  }

  .concept_detail_left{
}

.concept_detail_left h5{
  text-align: center;
  padding-top: 15px;
}
}

.message_detail h5{
  color: white;
}

/*---*/

.joblist_detail{
  max-width: 1100px;
  margin: 0 auto;
}

.joblist_detail p{
  text-align: center;
  width: 85%;
  padding: 1% 0 3% 0;
}

.joblist1{
  width: 100%;
  display: flex;
}

.joblist h8{
  text-align: center;
}

.cp_card06 {
  width: 30%;
  overflow: hidden;
  border-radius: 3px;
  margin: 1rem auto;
  position: relative;
  transition: all 0.25s ease-in;
  border: 1px solid white;
  text-align: center;
}

.cp_card06 .photo {
  width: 100%;
  height: 200px;              /* 高さを自動にする */
  overflow: hidden;
  margin-bottom: 20px;
}

.cp_card06 .photo img {
  width: 100%;               /* カード幅に合わせる */
  height: 100%;              /* アスペクト比を保持 */
  object-fit: cover;       /* 画像全体が収まるように */
  object-position: center;
  display: block;
}

.cp_card06 .details {
  display: flex;
  padding: 1em 1em 0 1em;
  font-size: 0.8em;
  margin-top: 5px;
  gap: 5px;
}

.cp_card06 .category {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.cp_card06 .category{
  font-size: 0.8em;
  padding: 2px 4px;
  margin: 0;
  color: #ffffff;
  border: solid 1px white;
  font-size: clamp(12px, 1.3vw, 13px);
  white-space: nowrap;
}

.cp_card06 .description {
  padding: 0 1.2em;
  margin-top: 20px;
}

.cp_card06 .description h1 {
  font-size: 1.4em;
  margin: 0;
  margin-bottom: 0.5em;
}

.cp_card06 .description .text p {
  margin: 0;
  text-align: left;
  width: 100%;
}

.cp_card06 .description .text p:nth-of-type(2) {
  margin-top: 5px;
}

.cp_card06 .description a:after {
  font-family: FontAwesome;
  margin-left: -10px;
  content: '\f061';
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
  vertical-align: middle;
  opacity: 0;
}

.cp_card06 .description a:hover:after {
  margin-left: 5px;
  opacity: 1;
}

.category.taglist {
  display: inline-flex;    /* 中の img とテキストを横並びにし、幅は中身に合わせる */
  align-items: center;     /* 垂直中央揃え */
  gap: 0.6em;              /* img とテキストの間隔（必要に応じ調整） */
  padding: 4px 7px;        /* 見た目の余白 */
  border: 1px solid white; /* 既存の見た目に合わせる */
  background: transparent; /* 必要なら色を指定 */
  white-space: nowrap;     /* 改行させず1行にする */
  width: auto;             /* 幅は中身に合わせる（重要） */
  box-sizing: border-box;
}

/* タグ内の画像は固定ピクセル幅にすると安定する（例: 16〜22px） */
.category.taglist img {
  width: 14px;    /* 画像サイズはここで統一。好みに合わせて変更 */
  height: auto;
  flex: 0 0 auto; /* 画像は縮まない（flexの伸縮抑制） */
  display: block;
}

/* 既存 .cp_card06 .details は flex なので、デスクトップでは左寄せでOK */
.cp_card06 .details {
  display: flex;
  gap: 3%;               /* タグ間のスペース */
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;      /* デスクトップは折返さない（必要なら変更） */
}

.joblist .news{
  padding: 0;
}

#contents{
  margin-bottom: 50px;
}

#contents p{
 text-align: center;
}

.cp_card04 .description {
    padding: 0;
}

#contents .h15{
  margin-bottom: 20px;
}

.joblist .description{
  min-height: 285px;
}

@media screen and (max-width: 1070px) {
.joblist .description{
  min-height: 330px;
}
.contents_p{
  width: 80%;
  line-height: 1.5;
  margin-bottom: 30px;
}
  .cp_card06 .details {
   display: grid !important;                            /* flexを確実に無効化 */
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);  /* 2列 */
    gap: 10px !important;         
    width: auto;                        /* 幅を自然に */
    margin: 0 auto;                     /* 全体は中央 */
    column-gap: 10px !important;                 /* 列の間隔を10px */
  }

  /* 3つしかない前提なら、3つ目を強制的に次の行へ */
  .cp_card06 .details .category.taglist:nth-child(3) {
    grid-column: 1 / 2;  /* 1列目に配置 */
  }

}

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

   .cp_card06 .details {
    display: flex !important;   /* flexに戻す */
    gap: 5px;
    width: auto;
  }

  .cp_card06 .details .category.taglist {
    grid-column: auto !important; /* grid指定を打ち消す */
  }

  .joblist .description{
  min-height: auto;
  margin-top: 5px;
}

  .joblist1 {
    display: block;      /* 横並びから縦並びへ */
  }

  .cp_card06 {
    width: 60%;          /* 画面幅の80%に */
    margin: 1.5rem auto; /* 中央寄せ（上下余白も確保） */
  }


  .cp_card06 .photo {
  height: 250px;              /* 高さを自動にする */
}

  .taglist {
  border: 1px solid white;
  max-width: 100px;
  white-space: nowrap;
}

.joblist_detail p {
  width: 80%;
}

 .cp_card06 .details {
    width: 60%;
    justify-content: center;  /* 横方向中央寄せ */
    align-items: center;      /* 垂直方向中央 */
    gap: 10px;
    margin: 0 auto;
    padding: 20px;
  }

  /* モバイルでタグがはみ出さないように余白調整 */
  .category.taglist {
    gap: 0.6em;
    padding: 4px 8px;
    max-width: 100%;
  }

  .joblist .news{
  padding: 20px 0;
}

.category.taglist{
  padding: 3px 5px;        /* 見た目の余白 */
}

.category.taglist img {
  min-width: 12px;    /* 画像サイズはここで統一。好みに合わせて変更 */
}

.contents_p{
  width: 80%;
  line-height: 1.5;
  margin-bottom: 30px;
}

.description{
  width: 80%;
}

.newspage .description{
  width: 90%;
}

#contents .description{
  width: 100% !important;
}
}

@media (max-width: 425px) {
.cp_card06 {
    width: 80%;          /* 画面幅の80%に */
    margin: 1.5rem auto; /* 中央寄せ（上下余白も確保） */
  }

.cp_card06 .description {
  padding: 0 ;
}
}


/*--------------contents-----------------*/

.contents .bold{
  font-weight: 600;
  font-size: clamp(15px, 2vw, 15px);
}

.contents .center{
  text-align: center;
  margin-bottom: 30px;
}

.contents .h14{
  text-align: left;
  padding-bottom: 30px;
}

.contents h14{
  font-size: clamp(19px, 2.8vw, 23px);
}

#contents a{
  white-space: normal !important;
}

.contents .pagination_back{
  margin-bottom: 60px;
}

#contents .cp_card04 .photo {
  width: 100%;
  aspect-ratio: 16 / 9; /* 必要なら 2/1 に変更 */
  overflow: hidden;
}

#contents .cp_card04 .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


#contents .flex2 {
  gap: 30px;
}

#contents .description,#contents .description p{
  text-align: left;
}

/* 共通ボタン */
.pagination_detail li a.page-numbers,
.pagination_detail li span.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border:1px solid #fff; border-radius:6px;
  text-decoration:none;
}

/* 現在ページ（aではなくspan） */
.pagination_detail li span.page-numbers.current{
  background:#fff; color:#0B4A9F;  /* サイトの配色に合わせて */
  border-color:#fff;
  font-weight:700;
}

/* 前後ボタン（<a class="prev page-numbers"> / <a class="next page-numbers">） */
.pagination_detail li a.page-numbers.prev,
.pagination_detail li a.page-numbers.next{
  /* 必要ならサイズや余白を調整 */
}


@media screen and (max-width: 768px) {
#contents .flex2{
  width: 95%;
}

 #news_top .flex2{
    width: 100% !important;
  }
}

/*--------------company-----------------*/

.wrapper_company{
  position: relative;
  background-color: #03387E;
  margin: 0 auto;
  overflow: hidden;
  justify-content: center;
}

.companypage{
  width: 80%;
  margin: 0 auto;
  max-width: 1100px;
  justify-content: center;
  text-align: center;
}

.company1{
  margin-top: 100px;
}

.companypage .title{
  text-align: center !important;
  width: 100%;
  margin: 0;
}

.company1 p{
  text-align: center;
}

.company2{
  background-color:#3063A7;
  clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%);
  width: 100%;   /* 横幅いっぱい */
  min-height: 380px; /* 縦の高さを好きに調整 */
  padding: 60px;
  margin-top: 30px;
}

.company2_detail{
  margin: 0 auto;
  text-align: center;
} 

.company2_detail p{
  text-align: center;
}

.company3{
  margin-top: 2%;
}

.company3 .flex4 {
  display: flex;
  gap: 20px;                 /* カード間の余白 */
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;      /* 子要素（カード）を同じ高さに揃える */
  justify-content: space-between;
  box-sizing: border-box;
}

/* カード本体：横幅を均等に、縦方向にレイアウト */
.professional,
.challenging,
.global {
  flex: 1 1 0;               /* 等分配される（幅は自動で均等） */
  min-width: 0;              /* flex 子の横オーバーフロー防止 */
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 6px;
  padding: 3% 3%;             /* 内側の余白（調整可） */
  display: flex;             /* カード内を縦レイアウトに */
  flex-direction: column;
  gap: 12px;
  background: transparent;
  /* 固定高さが必要なら min-height を使（optional） */
  min-height: 220px;         /* 最低高さ（必要なら調整） */
}

/* h4 と本文の上揃え（見出しは上、本文はその下で伸びる） */
.professional h4,
.challenging h4,
.global h4 {
  font-size: clamp(22px, 3vw, 25px);
  font-weight: 800;
  margin: 0 0 6px 0;
  line-height: 1.2;
  flex: 0 0 auto;           /* 見出しは縮めない */
  color: white;
}

/* 本文エリア：残りの高さを取る（長文のときは折返し。スクロールにしたければ overflow:auto） */
.professional p,
.challenging p,
.global p {
  width: 100%;
  margin: 0;
  flex: 1 1 auto;           /* 残りスペースを埋める */
  overflow-wrap: break-word;/* 単語の長い場合も折り返す */
  word-break: break-word;
  line-height: 1.6;
  text-align: left;
}

.company1 p,
.company2 p{
  margin-top: 15px;
}

/* 小さい画面では縦並びにする（レスポンシブ） */
@media (max-width: 768px) {
  .company3 .flex4 {
    padding-top: 10px;
    display: block !important;          /* 縦に積む */
    width:100%;
    margin: 0 auto; 
  }

  .professional,
  .challenging,
  .global {
    width: 100%;
    min-height: auto;        /* 必要なら解除 */
    padding: 18px;
    margin-bottom: 30px;
  }

  .company p{
  text-align: center;
  width: 90%;
}

.company2_detail p{
    width: 85%;
    margin: 0 auto;   /* 中央寄せ */
    text-align: center;
  }

  .company2_detail h11 {
  display: block;   /* 幅を持たせるために必要 */
  width: 85%;
  margin: 0 auto;
  text-align: center;
}

.company2 {
    clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100%);
    padding: 40px 0;  /* スマホでは上下だけ余白、左右は狭める */
    min-height: 290px;
  }

  .company3 p{
    width: 100%;
  }

}

@media (max-width: 469px) {
  .company2 {
    clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0 100%);
    padding: 40px 0;  /* スマホでは上下だけ余白、左右は狭める */
    min-height: 330px;
  }
}

/*代表メッセージ*/

.message{
  margin: 7% 0;
}

.message_detail img{
  width: 80%;
}

.message_detail{
  width: 80%;
  margin: 0 auto;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.message_detail h8{
  font-size: clamp(20px, 2vw, 24px);
}

.message_detail .h8{
  margin: 5% 0 4% 0;
}

.message_detail h5{
  margin-top: 5%;
}

@media (max-width: 768px) {
  .message_detail{
    width: 100%;
  }
}

@media (max-width: 425px) {
.message_detail img{
  width: 100%;
}

.message_detail h5{
  margin: 10% 0 12% 0;
}

.message_detail .h8 {
    margin: 5% 0 7% 0;
}

.company2 {
    padding: 60px 0;
}

.exective {
    margin-top: 5%;
}

.company1 {
    margin-top: 60px;
}

.companypage  h2 {
    font-size: clamp(23px, 5vw, 37px);
  }
}

@media (max-width: 360px) {
    .companypage h2 {
        font-size: 22px;
    }
}

/*ーーーーーーーーーーーーーーーExective*/

.exective{
  width: 80%;
  margin: 0 auto;
  justify-content: center;
  margin-top: 3%;
}

.modal_wrap input {
  display: none;
}

.modal_overlay {
  display: flex;
  justify-content: center;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}

.modal_trigger {
  position: absolute;
  width: 100%;
  height: 100%;
}

.modal_content {
    align-self: center;
    width: 80%;
    padding: 30px 30px 15px;
    box-sizing: border-box;
    background: #fff;
    line-height: 1.4em;
    transition: 0.5s;
}

.modal_content p {
  padding-top: 0;
}

.close_button {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 24px;
  cursor: pointer;
}

.modal_wrap input:checked ~ .modal_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}

.modal_wrap input:checked ~ .modal_overlay .modal_content {
  transform: translateY(20px);
}

.open_button {
    font-weight: bold;
    text-align: center;
    cursor :pointer;
    transition: all 0.3s;
    display: block;
    margin-bottom: 1px;
    padding: 12px 2px;
    max-width: 300px;
    text-decoration: none;
}

.open-button:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*下に動く*/

}

/*アイコンを表示*/
.open-button:after {
font-family: "Font Awesome 5 Free";
  content: "\f2d0";
    padding-left: 8px;
}

/*ラベルホバー時*/
.open-button:hover {
  color: #FFFFFF;
  background-color: #4f96f6;
  transition: .6s;
}

.modal_title2 {
  position: relative;
  overflow: hidden;
  padding-bottom: 10px;
  margin-top:0;
  margin-bottom: 0;
}

.modal_title2::before,
.modal_title2::after{
  content: "";
  position: absolute;
  bottom: 0;
}

/* h2 プライマリカラー*/
.modal_title2:before{
  border-bottom: 4px solid #00b38f;
  width: 100%;
}

.modal_title_left{
  width:60%;
}

.modal_title_right{
  width:40%;
}

.flex6 p ,.flex6 h8{
  color: #03387E;
}

.flex6 p.modal_center{
  line-height: 1.6;
}

.flex6 p.left{
  line-height: 1.7;
  padding: 3% 0;
}

.flex6 h8{
  font-size: clamp(21px, 2vw, 28px);
  letter-spacing: 0.1em;
  font-weight: 700;
}

.flex6 h11 ,.flex6 h15{
  font-family: 'Noto Serif JP', sans-serif;
}

.flex6 h11{
  font-size: clamp(20px, 1.7vw, 24px);
  text-align: center;
}

.flex6 h15{
  font-size: clamp(14px, 1.3vw, 14px);
}

.modal_title_left .h8{
  margin: 10px 0 3px 0;
}

.modal_title_left .left{
  text-align: left;
}

.modal_title_right img{
  width: 90%;
  margin-top: 8%;
}

.exective .flex6{
  width: 100%;
  margin: 0 auto;
  display: flex;
  max-width: 1100px;
  padding-bottom: 5%;
}

.exective .title{
  margin: 0;
}

.company_exective{
  width: 85%;
}

.exective .photo{
  height: 200px;
}

.triggerkuma .cp_card04{
  min-width: 160px;
  border-radius: 2px 2px 0 0;
}

.exective .description{
  width: 100%;
  padding: 0;
  text-align: center;
  margin: 20px 0;
}

:root {
  --exective-photo-height: 200px; /* ← ここで高さを調整 */
  --exective-card-gap: 20px;
}

.exective .flex6 {
  display: flex;
  gap: 20px;
  align-items: stretch;        /* 子要素を同じ高さに揃える */
  justify-content: center;
  box-sizing: border-box;
  margin: 0 auto;

}

/* 各カード（cp_card04 相当）を等しく扱う */
.exective .cp_card04,
.exective > .cp_card04, /* 安全にカバー */
.exective .company_exective > .cp_card04 {
  flex: 1 1 0;                /* 幅は等分、縮小は可能だが均等 */
  min-width: 200px;           /* 必要に応じて最小幅を調整 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;       /* 内部を縦方向で伸ばす */
  margin: 0;                  /* 親側で余白管理する */
  background: transparent;
}

/* 写真コンテナを固定高さで揃える */
.exective .photo {
  height: var(--exective-photo-height);
  min-height: var(--exective-photo-height);
  max-height: var(--exective-photo-height);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* 画像をコンテナにフィットさせる（切り出しで同サイズに見せる） */
.exective .photo img,
.cp_card04 .photo img {
  display: block;
  width: 100%;
/*  height: 100%;*/
  object-fit: cover;     /* ここでアスペクト比を保ちつつコンテナを埋める */
  object-position: center center;
}

/* 説明欄の高さを揃える（必要なら） */
.exective .description {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 上揃え */
  box-sizing: border-box;
}

/* h11（名前）と役職は上揃え */
.exective .h11,
.exective h11 {
  margin: 0 0 6px 0;
}

.flex5{
  display: flex;
  padding-left: 20px;
}

.modal_center{
    text-align: center;
  }

/* 小さい画面でのレスポンシブ（任意で調整） */
@media (max-width: 700px) {

  .exective{
     width: 80%;
  }

  .flex5{
    display: block;     
    width: 100%;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column-reverse !important; 
    gap: 16px;
    box-sizing: border-box;
    margin: 0px auto;
    padding: 0;
    flex: 1 1 auto;
  overflow-y: auto !important;       /* ← 中身だけスクロール */
  max-height: calc(100vh - 200px);   /* ← 画面に収まるように制限 */
  -webkit-overflow-scrolling: touch; /* ← iOSのスムーズスクロール */
  }

  .modal_title_left,.modal_title_right{
    width: 100%;
    box-sizing: border-box !important;
  }

  .company_exective {
    width: 100%;
  }

  .exective .flex6 {
    gap: 16px;
    display: block;
    width: 100%;
  }
  .exective .cp_card04 {
    flex: 1 1 100%;   /* 2列に折り返す */
    min-width: 400px;
  }

  .open_button{
    width: 100%;
    max-width: none;
}

  .modal_title_right img{
    width: 80% !important;
  }

  .modal_overlay {
    display: flex;
    align-items: flex-start !important;   /* modal を上から始める */
    justify-content: center;
    padding: 0px 12px;                   /* 上の余白を確保 */
    -webkit-overflow-scrolling: touch !important;    /* スムーズスクロール（iOS） */
  }

  .modal_content {
    position: relative;
    width: 100% !important;
    max-width: 680px !important; 
    margin: 0 auto !important;            
    display: flex !important;
    flex-direction: column !important;    /* 内部を縦に並べる */
    gap: 16px;
    align-self: center;
    padding: 30px;
    background: #fff;
    line-height: 1.4em;
    overflow: hidden !important;  /* ← モーダル全体はスクロール禁止 */
  }

  .open_button {
    margin-bottom: 30px;
  }

}
:root { --exective-photo-height: 100%; } /* 小さい画面では画像高さを少し下げる */


@media (max-width: 600px) {

  /* 親コンテナを縦並び＆中央寄せに */
  .exective .flex6 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 各カードを幅95%で中央に（切れないようmin-width解除） */
  .exective .cp_card04,
  .exective .cp_card04 * {
    box-sizing: border-box !important;
  }

  .exective .cp_card04 {
    width: 100% !important;
    max-width: 420px !important;   /* 必要に応じて調整 */
    min-width: 0 !important;       /* はみ出し防止 */
    margin: 0 auto 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  /* 画像コンテナを固定高さに揃える（全カード同一高さ） */
  .exective .photo {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  /* 画像をコンテナにフィットさせる */
  .exective .photo img,
  .cp_card04 .photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }

  /* 名前 / 役職のサイズを固定して小さくなりすぎないように */
  .exective h11,
  .exective .h11 {
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    text-align: center !important;
  }

  .exective h15 {
    line-height: 1.35 !important;
    text-align: center !important;
  }

  /* 説明ブロックの余白調整（テキストが小さく表示される問題対策） */
  .exective .description {
    padding: 0px !important;
    width: 100% !important;
    margin: 15px 0;
  }

  /* 念のため modal の open_button がはみ出さないように */
  .open_button {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 0px;
    padding-bottom: 10px;
  }

  .modal_overlay {
    align-items: stretch;       /* 内部を縦方向で伸ばす */
  }
  .modal_content {
    width: calc(100% - 24px) !important;
    max-height: calc(100vh - 72px) !important;
  }

  .modal_content,.modal_title2,.flex5{
    align-items: stretch;       /* 内部を縦方向で伸ばす */
  }

  label{
    margin: 0;
    padding: 0;
  }
}


@media (max-width: 700px) {

  /* ここを column-reverse → column に変更 */
  .flex5{
    display: flex !important;
    flex-direction: column !important;   /* ★ここをcolumnに */
    gap: 16px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-y: auto !important;         /* ← これまで通り .flex5 をスクロール対象に */
    max-height: calc(100vh - 200px);     /* ← 好みで調整 */
    -webkit-overflow-scrolling: touch;
  }

  /* 表示順は order で制御：画像を先頭、テキストを後ろ */
  .modal_title_right{ order: 1; width: 100%; box-sizing: border-box !important; }
  .modal_title_left { order: 2; width: 100%; box-sizing: border-box !important; }

  /* 初期表示を上からにしやすいよう、オーバーレイは上寄せ */
  .modal_overlay {
    align-items: flex-start !important;
  }
}


@media (max-width: 425px) {
    .modal_title_right img {
        width: 100% !important;
    }
}


/*-------------------------*/

/*kaisha*/

.company_back {
  position: relative; /* 基準になる */
}

.company_info{
  position: relative;
  z-index: 2; /* 背景より上に表示 */
  margin-top: 5%;
  margin-bottom: 80px;
}

.company_info_detail{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  justify-content: center;
  position: relative;
  z-index: 2;            /* コンテンツより下 */
}

#table01 {
  margin: 0 auto;
  border-collapse: collapse; /* ← 線が綺麗に出る */
  width: 70%; /* 必要なら調整 */
  max-width: 1100px; /* 中央寄せ＋横幅制限 */
}

#table01 tr {
  border-bottom: 1px solid white;
}

#table01 th,
#table01 td {
  padding: 24px 0;
  text-align: left;
}

#table01 th {
  width: 30%;
  padding-left: 30px;
  font-weight:500;
}

#table01 td {
  font-weight:400;
  padding: 10px 20px;
}

/* sp */
@media only screen and (max-width: 600px) {

  .company_info_detail{
   width: 95%;
  }

  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
  }

  #table01 {
    width:100%
  }

  #table01 th {
    width: 100%;
    padding-left: 0px;
  }

  #table01 td {
    padding-top: 0;
  }
}

.company_info .title{
  margin: 0;
}

/* 親は背景画像を持たせない（疑似要素で処理する） */
.background2 {
  position: absolute;
  inset: 0; /* left:0; right:0; top:0; bottom:0; */
  height: 100%;
  width: 100%;
  background: none;
  box-sizing: border-box;
  margin-top: 0;
}

/* 疑似要素::before に背景画像を入れて、下方向へフェード（マスク）をかける */
.background2::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: url("image/company_back.jpg") center / cover  no-repeat;
  /* 画像自体を上→下でフェードさせる（WebKit と標準） */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
  z-index: 0;
  pointer-events: none;
}

/* 色のオーバーレイ（上部は濃く、下に行くほど透明）を別の疑似要素で重ねる */
.background2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(23,74,144,0.95) 0%, rgba(23,74,144,0.1) 30%);
  z-index: 1;
  pointer-events: none;
}

/* .background 内のコンテンツ（h2 や .slash_r）は疑似要素の上に表示する */
.background2 > * {
  position: relative;
  z-index: 2;
}

.company_back_detail{
  position: absolute;
  top: 54%;   /* .company_info の下半分あたりから配置 */
  width: 100%;
  height: 420px; /* .background2 の高さと合わせる */
  z-index: 1;    /* コンテンツより後ろ */
}

/*-----------privacy--------------*/

.category{
  padding-bottom: 5%;
}

.privacy{
  width: 80%;
  max-width: 1100px;
  margin: 10px auto;
}

.privacy ul{
  list-style-type: disc;
  margin-top: 10px;
}

.privacy li{
  color: white;
  margin-left: 10%;
}

.privacy h2, .privacy h8{
  text-align: center;
}

.privacy p, h8.left2{
  margin-top: 20px;
  text-align: left;
}

.privacy .sec{
  text-align: left;
  margin-top: 40px;
}

.privacy .right2{
  text-align: right;
}

.privacy ol{
  margin-top: 10px;
  list-style-type: decimal;
  margin-left: -5%;
}

.privacy a,.news-content a,td a{
 border-bottom: solid 1px white;
}

.cell{
  padding-left: 10%;
}

.small{
  font-size: 14px;
}

.top2{
  padding-top: 10px;
}

.top3{
  padding-top: 50px;
}

@media only screen and (max-width: 425px) {
  .category{
  padding-bottom: 10%;
}
}

.newspage .cp_card04 > a { display:block; }

.newspage .cp_card04 .photo{
  aspect-ratio: auto !important; /* 正方形の強制を解除 */
  height: auto !important;
  margin-bottom: 20px;           /* 画像と本文の余白を20pxに固定 */
  overflow: visible;
}
.newspage .cp_card04 .photo img{
  width: 100%;
  height: auto;                  /* 画像の比率で伸縮 */
  display: block;
  object-fit: cover;             /* contain だと下が余るので cover 推奨 */
}

.newspage .cp_card04 .description{
  margin-top: 0;                 /* 画像下の余白は photo 側で管理 */
  padding-top: 0;
}

/* 文字が上下で欠けるのを防止（念のため） */
.newspage .news-item__title,
.newspage .news-item__text { line-height: 1.6; }

.client_saiyo .cp_card04 .photo { 
  margin-bottom: 0 !important;
  aspect-ratio: auto !important;   /* もし他所で設定されていても無効化 */
  height: auto !important;
}
.client_saiyo .cp_card04 .description { 
  margin-top: 0 !important;        /* グローバル 30px を打ち消す */
}
.client_saiyo .cp_card04 .photo img {
  display: block;
  width: 100% !important;
  height: auto !important;          /* 画像の下に空きが出ないように */
}

/* （任意）タイトル行の余白が大きければ少しだけに */
.client_saiyo .h11 { padding: 20px 0 0 !important; }

.company_noimg{
  width: 100%;
}

#company_no .privacy p{
  margin-bottom: 40px !important;
}

.newspage .flex2{
  margin-bottom: 80px;
}


.saiyo .flex2 {
    justify-content: space-between;
    gap: 20px 30px;
    margin-bottom: 30px;
}

.newspage .flex2 {
    justify-content: space-between;
    gap: 20px 40px;
    margin-bottom: 30px;
}

.saiyo_btn a ,.client_btn a{
    margin-top: 0px;
}

.lang-en .entry-content { white-space: pre-line; }

.prev, .next{
  font-weight: 400 !important;
  font-size: 14px !important;
}

@media (min-width: 769px) {
  .newspage .cp_card04 .photo img{
  height: 200px;                  /* 画像の比率で伸縮 */
}

.client_saiyo .cp_card04 .photo img{ 
  height: 200px !important;                  /* 画像の比率で伸縮 */
}

.cp_card06 {
  width: 30%;
  overflow: hidden;
  border-radius: 3px;
  margin: 1rem auto;
  position: relative;
  transition: all 0.25s ease-in;
  border: 1px solid white;
  text-align: center;

  /* ▼追加 */
  display: flex;
  flex-direction: column;
}

.cp_card06 .description {
  flex: 1; /* 余白を押し広げる */
}

.cp_card06 .news {
  margin-top: auto;       /* 一番下へ押し下げる */
  margin-bottom: 20px;    /* 下から20pxの余白 */
}

a.btn-border2 {
    margin-top: 0px;
}

}

.newsdetail .client_btn{
  padding: 40px 0 60px 0;
}

.co{
  margin-bottom: 0 !important;
}

.companypage h2{
  white-space: nowrap;
}

#service_top1 { 
  scroll-margin-top: 30px;
}

.rights_holders_en h7{
    padding: 0 44% 1% 3% !important;
  } 

.related_en h7{
    padding: 0 28% 1% 3% !important;
  } 

  .companies_en h7{
    padding: 0 63% 1% 3% !important;
  }

  @media only screen and (max-width: 1050px) {
.rights_holders_en h7{
    padding: 0 37% 1% 3% !important;
  } 

.related_en h7{
    padding: 0 21% 1% 3% !important;
  } 
  }

   @media only screen and (max-width: 850px) {
.rights_holders_en h7{
    padding: 0 35% 1% 3% !important;
  } 

.related_en h7{
    padding: 0 16% 1% 3% !important;
  } 
  }

@media only screen and (max-width: 425px) {
  .rights_holders_en h7{
    white-space: nowrap !important;
  }

}

@media (max-width: 480px) {
  .achievements {
    width: 85%;
  }

      #news_top .flex2 {
        width: 95% !important;
    }
}

@media (max-width: 375px) {
    #news_top .flex2 {
        width: 100% !important;
    }
  }