/* ********************************** 会社概要_専用CSS ********************************** */

.company .container {
  width: 100%;
}

.company .inner_wrapper {
  padding: unset;
  text-align: center;
}

.company #section1,
.company #section2,
.company #section3,
.company #section4,
.company #section5,
.company #section6,
.company #section7,
.company #section8{
  padding: unset;
  border: unset;
}

.company .inner_contents{
  max-width: 900px;
}





.company .section_ttl_boarder{
  padding-bottom: 1.5em;
  border-bottom: 6px solid var(--maincolor);
  margin-bottom: 1em;
  width: 7em;
  margin: 0 auto 3em auto;
}

.company #section1,
.company #section2,
.company #section5{
  background-color: var(--maincolor);
}

.company .image_box{
  padding: unset;
  background-color: unset;
  margin-bottom: unset;
}








/* ********************************** 会社概要_文字大きさ ********************************** */
.company .company_font_0ten6em{
  font-size: 10px;
}


.company .company_font_1ten5em{
  font-size: 24px;
}

.company .company_font_2em{
  font-size: 32px;
}

.company .company_font_2ten5em{
  font-size: 40px;
}

.company .company_font_3em{
  font-size: 48px;
}

.company .company_font_4em{
  font-size: 64px;
}















/* ****** ハンバーガーメニュー ****** */
/* 右上固定のラッパー */
.company .dot-menu-wrapper {
  z-index: 9999; /* ←メニューが確実に前面に来るように */
  position: fixed;
  right: 1.5em;
  top: 1.25em;
}

/* チェックボックスは非表示 */
.company .dot-menu-toggle {
  display: none;
}

/* 「・・・」が入っている丸いボタン */
.company .dot-menu-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid black;          /* 外側の丸い罫線 */
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;                         /* ドット同士の間隔 */
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* 「・・・」部分のドット */
.company .dot-menu-button .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: black;
}

.company .dot-menu-button:hover{
  background-color: #9fa0a0;
  border-color: white;
}

.company .dot-menu-button:hover .dot{
  background-color: white;
}






/* チェックされたらメニューを表示 */
.company .dot-menu-toggle:checked ~ .dot-menu-nav {
  opacity: 1;
  pointer-events: auto;     /* ★ 表示中だけクリック可能に */
}

/* ドットメニュー表示中は背景スクロール禁止（位置固定してガクッと戻らない） */
body.is-dotmenu-open{
  position: fixed;
  width: 100%;
  overflow: hidden;
  left: 0;
}


/* メニュー展開時（初期状態は非表示） */
.company .dot-menu-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;     /* ★ 非表示中はクリックできないように */
  z-index: 2;            /* ★ ・・・ボタンより少し下でOK */
  transition: opacity 0.2s ease;

  display: flex;
  align-items: center;
  justify-content: center;
}

.company .dot-menu-panel{
  max-width: 600px;
  width: 80vw;
  height: 80vh;
  overflow-y: scroll;
}

.company .dot-menu-panel .dot-menu-header-wrapper{
  display: flex;
  background-color: white;
  padding: 1.5em;
  align-items: center;
}

/* 1つ目のリスト（左寄せのまま） */
.company .dot-menu-panel .dot-menu-header-wrapper > li:first-child{
  margin-right: auto;         /* ★ これが肝 */
}

.company .dot-menu-panel .dot-menu-header-wrapper > li:first-child a{
  transition: transform 0.5s ease;
}

.company .dot-menu-panel .dot-menu-header-wrapper > li:first-child a:hover{
  transform: scale(0.95);
  opacity: 0.85;
}

.company .dot-menu-panel .dot-menu-header-wrapper > li:not(:first-child){
  margin-left: 1em;
}

.company .dot-menu-panel .dot-menu-header-wrapper .logo{
  display: block;
  width: 150px;
}

.company .dot-menu-panel .dot-menu-header-wrapper .language_box{
  border: 3px solid var(--maincolor);
  background-color: white;
  color: black;
}


.company .dot-menu-panel .dot-menu-header-wrapper .language_box .selected{
  background-color: unset;
  padding: 1em;
  border-radius: unset;
  line-height: unset;
}

.company .dot-menu-panel .dot-menu-header-wrapper #dot-menu-close-btn{
  width: 3.5em;
  height: 3.5em;
  background-color: #9dbf9e;
  border: unset;
  cursor: pointer;
  border-radius: 0.75em;
}

.company .dot-menu-panel .dot-menu-header-wrapper #dot-menu-close-btn img{
  width: 50%;
  filter: invert(99%) sepia(79%) saturate(0%) hue-rotate(259deg) brightness(119%) contrast(101%);
  transition: transform 0.5s ease;
}

.company .dot-menu-panel .dot-menu-header-wrapper #dot-menu-close-btn:hover{
  background-color: #9fa0a0;
}

.company .dot-menu-panel .dot-menu-header-wrapper #dot-menu-close-btn:hover img{
  transform: scale(0.75);
}






.company .dot-menu-panel .dot-menu-icon-wrapper{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* 高さは li で持つ（a に固定高さを持たせない） */
.company .dot-menu-panel .dot-menu-icon-wrapper > li{
  height: 200px;
}

/* 中央寄せの本体は a にやる */
.company .dot-menu-panel .dot-menu-icon-wrapper > li > a{
  display: flex;
  flex-direction: column;
  align-items: center;     /* 横中央 */
  justify-content: center; /* 縦中央 */
  width: 100%;
  height: 100%;
  text-align: center;
}

.company .dot-menu-panel .dot-menu-icon-wrapper > li > a:hover{
  background-color: black;
}

.company .dot-menu-panel .dot-menu-icon-wrapper > li > a img{
  transition: transform 0.5s ease;
}

.company .dot-menu-panel .dot-menu-icon-wrapper > li > a:hover img{
  transform: scale(0.9);
}

.company .dot-menu-panel .dot-menu-icon-wrapper > li:nth-child(1){
  background-color: #9fa0a0;
}

.company .dot-menu-panel .dot-menu-icon-wrapper > li:nth-child(2){
  background-color: #e7b000;
}

.company .dot-menu-panel .dot-menu-icon-wrapper li img{
  width: auto;
  height: 72px;
}

.company .dot-menu-panel .dot-menu-icon-wrapper .icon_ttl{
  margin-top: 1em;
  color: white;
}






.company .dot-menu-panel .dot-menu-list-wrapper{
  background-color: var(--maincolor);
}

.company .dot-menu-panel .dot-menu-list-wrapper a{
  display: block;
  color: white;
  padding: 1em 0;
  position: relative;
}

.company .dot-menu-panel .dot-menu-list-wrapper li:first-of-type a{
  padding-top: 2em;  
}

.company .dot-menu-panel .dot-menu-list-wrapper li:last-of-type a{
  padding-bottom: 2em;  
}

/* ▼ 下線（中央から伸びる用） */
.company .dot-menu-panel .dot-menu-list-wrapper a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;            /* 文字との距離 */
  width: 100%;
  height: 2px;
  background-color: var(--accentcolor);

  transform: scaleX(0);       /* ★ 初期は見えない */
  transform-origin: center;   /* ★ 中央起点 */
  transition: transform 0.35s ease;

}

/* ホバー時 */
.company .dot-menu-panel .dot-menu-list-wrapper a:hover{
  color: var(--accentcolor);
}

.company .dot-menu-panel .dot-menu-list-wrapper a:hover::after{
  transform: scaleX(1);       /* ★ 両側へ広がる */
}

















.company .top{
  width: 100vw;
  height: 100dvh;
  display: flex;
  justify-content: center;  /* ← 横方向中央寄せ */
  align-items: center;      /* ← 縦方向中央寄せ（必要なら） */
  position: relative;   /* ★ 背景を絶対配置するため */
  overflow: hidden;     /* ★ スライドがはみ出さないように */

}

.company .top_carousel {
  position: absolute;   /* ★ 背景として固定 */
  inset: 0;             /* = top:0; right:0; bottom:0; left:0; と同じ */
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;           /* ★ いちばん後ろのレイヤー */
}

/* ★ オーバーレイ色レイヤー */
.company .top_carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;                 /* 念のため */

  background: rgba(207, 123, 14, 0.6); /* ← ここで色と透明度を調整 */
  mix-blend-mode: normal;             /* ★ 乗算表現 */
  z-index: 1; /* スライダーの上に重ねる */
  
}



/* Swiper内部も高さを100%にしておく */
.company .top_carousel .swiper-wrapper,
.company .top_carousel .swiper-slide {
  width: 100%;
  height: 100%;
}

.company .slide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 横2 */
  grid-template-rows: repeat(2, 1fr);    /* 縦2 */
  width: 100%;
  height: 100%;
}

.company .slide-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* ★ 画面いっぱいに切り抜き表示 */
}











/* 1つ目：左寄せ */
.company .top_header > li:nth-child(1) {
  position: absolute;
  top: 1.25em;
  left: 1.25em;
}

/* 2つ目：中央寄せ */
.company .top_header > li:nth-child(2) {
  position: absolute;
  left: 50%;                     /* 親幅の50%の位置に持っていく */
  transform: translateX(-50%);   /* 自分の幅の半分だけ戻す → 真ん中 */
  top: 2em;
}

/* 3つ目：右寄せ */
.company .top_header > li:nth-child(3) {
  align-items: center;
  position: fixed;
  right: 6em;
  top: 1.25em;
  display: block;
  width:fit-content;
  z-index: 3;
}

.company .return_btn{
  width: 45px;
  background-color: black;
  padding: 0.5em;
  text-align: center;
  cursor: pointer;
}

.company .return_btn p{
  color: white;
  margin-top: 0.65em;
}

.company .return_btn:hover{
  background-color: var(--maincolor);
}

.company .header_btn_wrapper{
  display: flex;
  width: fit-content;
}

.company .header_btn_wrapper > li{
  margin-right: 3.2em;
}

.company .header_btn_wrapper > li:last-of-type{
  margin-right: unset;
}

.company .header_btn_wrapper li br{
  display: none;
}

.company .link_btn li{
  font-weight: 700;
  color: white;
}

.company .link_btn .ja{
  line-height: 1.35em;
}


.company .header_btn_wrapper .en{
  margin-top: 0.5em;
  border-top: 1px solid transparent;

  display: inline-block;     /* 下線を文字幅に合わせる */
  position: relative;        /* 疑似要素の基準 */
  padding-bottom: 0.5em;     /* 線との距離（今の指定を移動） */
}

.company .header_btn_wrapper .en::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;                 /* padding-bottom の下に線 */
  width: 100%;
  height: 1px;
  background: var(--accentcolor);

  transform: scaleX(0);      /* 最初は0（見えない） */
  transform-origin: center;  /* ★中央から伸びる */
  transition: transform 0.35s ease;
}

.company .header_btn_wrapper a:hover .link_btn .en{
  color: var(--accentcolor);
}

.company .header_btn_wrapper a:hover .link_btn .en::after{
  transform: scaleX(1);      /* ★100%まで伸ばす */
}












.company .language_box {
  cursor: pointer;
  color: #fff;
  border-radius: 0.75em;
  overflow: hidden;
}

/* 現在の表示言語 */
.company .language_box .selected {
  background: black;
  text-align: center;
  border-radius: 999px;
  line-height: 2em;
  padding: 0.1em 1em;
}

.company .language_box .selected:hover{
  background-color: white;
  color: black;
}

/* 選択肢（初期は非表示） */
.company .language_box .option {
  display: none;
  padding: 1em 0;
  text-align: center;
}

/* クリックしたら選択肢を表示 */
.company .language_box.open .option {
  display: block;
  width: 100%;
  background-color: white;
  color: black;
  padding: 1.25em 1em 0 1em;
}

.company .language_box > li:last-of-type{
  padding-bottom: 1.25em !important;
}

/* open のときは selected を隠す（今のhover挙動と同じ） */
.company .language_box.open .selected {
  display: none;
}


.company .language_box:hover .option:hover span{
  color: red;
  border-bottom: 2px solid #e16a0e;
    padding-bottom: 0.2em;
}










.company .pv_contents{
  z-index: 1;
}

.company .pv_contents video {
  pointer-events: none;   /* ← クリック・タップを無効化 */
  user-select: none;      /* ← 選択不可（念のため） */
}















.company #section1 {
  padding-top: 6em;
  cursor: auto;
  color: white;
}

/* カーソルを追いかける天使/悪魔キャラ */
.company .cursor-chara {
  position: fixed;
  width: 60px;  /* お使いのサイズに合わせてOK */
  height: 60px;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%); /* 画面上で中央基準にする用 */

  /* ★ 常に上下にフワフワ浮遊するアニメーション */
  animation: float-y 2s ease-in-out infinite;
}

/* 天使画像 */
.company .cursor-chara.angel {
  background: url(../../images/page/company/company_img5_angel.png) center/contain no-repeat;
}

/* 悪魔画像 */
.company .cursor-chara.devil {
  background: url(../../images/page/company/company_img5_devil_syuusei.png) center/contain no-repeat;
}

/* ★ 上下2pxずつユラユラするアニメーション */
@keyframes float-y {
  0% {
    transform: translate(-50%, -50%) translateY(-20px);
  }
  50% {
    transform: translate(-50%, -50%) translateY(20px);
  }
  100% {
    transform: translate(-50%, -50%) translateY(-20px);
  }
}


/* 共通：カーソルのキラキラエフェクト（位置管理 + 煙のベース） */
.company .cursor-effect {
  position: fixed;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 2;
  opacity: 1; /* コンテナ自体は常に表示 */
}

/* 星本体（天使/悪魔のキラキラ）_コンテナの ::before を星型にする */
.company .cursor-effect::before {
  content: "";
  position: absolute;
  inset: 0;

  /* 星型シェイプ */
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  /* デフォルトは透明。angel/devil で色を付ける */
  opacity: 0;

  /* 星のキラキラアニメーション */
  animation: sparkle 1s ease-out forwards;
}

/* 白い煙（星の後ろでふわっと広がる）_::after に煙。clip-path をかけないので円形〜楕円でそのまま表示される */
.company .cursor-effect::after {
  content: "";
  position: absolute;

  /* 星より少し大きめの円（煙の範囲） */
  inset: -3px;

  /* 若干縦長の楕円 → 煙らしい形に */
  border-radius: 60% 60% 70% 70%;

  /* 白い煙のグラデーション */
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.4) 35%,
    rgba(255, 255, 255, 0) 80%
  );

  /* ふんわりさせるためのぼかし */
  filter: blur(4px);

  opacity: 0;

  /* 星より後ろに見せたい場合は z-index 調整 */
  z-index: -1;

  /* 発生して上に消えていく煙のアニメ */
  animation: smoke 1s ease-out forwards;

  /* 背景色になじませて発光効果アップ */
  mix-blend-mode: screen;
}

/* 天使モード（明るいゴールド）_::before の星に色・光を付ける */
.company .cursor-effect.angel::before {
  background: radial-gradient(circle, #fff9d8 0%, #ffd700 60%, transparent 100%);
  box-shadow: 0 0 10px rgba(255, 244, 200, 0.9);
}

/* 悪魔モード（赤っぽいエフェクト） */
.company .cursor-effect.devil::before {
  background: radial-gradient(circle, #ffe0e7 0%, #ff3366 60%, transparent 100%);
  box-shadow: 0 0 10px rgba(255, 80, 120, 0.7);
}

/* 星本体のキラキラアニメーション */
@keyframes sparkle {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(0.4) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.2) rotate(25deg);
    opacity: 0;
  }
}

/* 煙のアニメーション（ふわっと上に漂う & ゆらぎ） */
@keyframes smoke {
  /* 発生直後：小さめ、下方向に少しズレ */
  0% {
    transform: translate(0px, 4px) scale(0.4);
    opacity: 0.45;
  }

  /* 少し浮く途中：左に揺れる */
  30% {
    transform: translate(-3px, 0px) scale(1);
    opacity: 0.3;
  }

  /* さらに浮きながら右に揺れる */
  60% {
    transform: translate(3px, -6px) scale(1);
    opacity: 0.18;
  }

  /* 消える直前：上へ抜けながらフェードアウト */
  100% {
    transform: translate(-2px, -14px) scale(1.2);
    opacity: 0;
  }
}















.company #section1 .comment::before,
.company #section1 .comment::after{
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url(../../images/page/company/company_img3.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.company #section1 .comment::after{
  transform: scaleX(-1);
}

.company #section1 .ttl{
  margin:  0.9em 0 0.7em 0;
}

.company #section1 .ttl br{
  display: none;
}

.company #section1 .text{
  line-height: 3.2em;
}


.company #section1 .animation_box{
  margin: 7em auto;
  max-width: 550px;
  position: relative;

  animation: logoZoom ease forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 60%;
}

@keyframes logoZoom{
  0%{
    transform: scale(0.3);
  }
  100%{
    transform: scale(1);   /* 最終的に落ち着く */
  }
}




/* 白目 */
.company .eye {
  position: absolute;
  width: 55px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

/* 左右配置（顔の画像に合わせて調整） */
.company .eye-left {
  top: 27%;
  left: 25%;
}

.company .eye-right {
  top: 27%;
  left: 46%;
}

/* 黒目 */
.company .pupil {
  width: 30px;
  height: 50px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* まぶた */
.company .eyelid {
  position: absolute;
  inset: 0;               /* top/right/bottom/left: 0; と同じ */
  background: black;       /* まぶたの色。肌色にしてもOK */
  transform-origin: top;  
  transform: scaleY(0);   /* 通常：見えない（目が開いている状態） */
  pointer-events: none;
}

/* 瞬き中に .eye に付くクラス */
.company .eye.blink .eyelid {
  animation: blink 0.45s cubic-bezier(0.45, 0, 0.2, 1);
}

/* 瞬きアニメーション */
@keyframes blink {
  0% { transform: scaleY(0); }
  65% { transform: scaleY(1); } /* ゆっくり閉じる */
  100% { transform: scaleY(0); } /* すばやく開く */
}










.company #section1 .bottom_carousel {
  width: 100vw;
  overflow: hidden;
}

.company #section1 .bottom_carousel_swiper .swiper-wrapper{
  transition-timing-function: linear !important; /* ←重要：等速 */
}

/* 各画像の幅を固定 */
.company #section1 .bottom_carousel_swiper .swiper-slide{
  width: calc(100% / 5); /* ←PCの場合 */
  height: auto;
  flex-shrink: 0;
}


/* 画像 */
.company #section1 .bottom_carousel_swiper img{
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}










.company #section2{
  padding: 7em 0;
}

.company .title{
  background-color: #e7b000;
  padding: 0.75em 0;
  color: white;
  font-weight: 700;
}

.company .section2 .tab_contents_box{
  margin-bottom: unset;
  border: unset;
  background-color: white;
}


/* 企業情報_タブ全体（tab1用） */
.company .section2 .tab_contents_box.tab1 {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 5em 2em;

}

/* 内側ラッパー：タブ＋コンテンツを包む */
.company .section2 .tab_contents_box.tab1 .tab_inner_warapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 600px;
}

/* ラジオボタンは非表示 */
.company .section2 .tab_contents_box.tab1 .tab_inner_warapper input[type="radio"] {
  display: none;
}

/* タブ共通 */
.company .section2 .tab_contents_box.tab1 .tab_menu {
  flex: 1 1 0;
  position: relative;
  cursor: pointer;
  text-align: center;
  padding: 1em 0;
  color: #9fa0a0;
  background-color: unset;
  border-right: none;
  border-bottom: none !important;
  box-sizing: border-box;
  transition: all 0s ease;
}

/* ▼ 下線は ::after で描く（タブの下端に揃える） */
.company .section2 .tab_contents_box.tab1 .tab_menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 2px;
  background-color: #9fa0a0;
  transform: translateY(-50%);
  transition: all 0s ease;
}

/* ▼ タブ内テキストの余白リセット（pなど） */
.company .section2 .tab_contents_box.tab1 .tab_menu p,
.company .section2 .tab_contents_box.tab1 .tab_menu ul,
.company .section2 .tab_contents_box.tab1 .tab_menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ▼ ホバー時（未選択のとき） */
.company .section2 .tab_contents_box.tab1 .tab_menu:hover {
  color: black;
}

.company .section2 .tab_contents_box.tab1 .tab_menu:hover::after {
  height: 6px;
  background-color: #e7b000;
}

/* ▼ チェックされているタブ（選択中） */
.company .section2 .tab_contents_box.tab1 input:checked + .tab_menu {
  color: black;
}

/* 選択中は「グレー状態」を完全に上書きする */
.company .section2 .tab_contents_box.tab1 input:checked + .tab_menu::after {
  height: 6px;
  background-color: var(--maincolor);
}

/* ▼ 選択中タブは hover しても見た目を変えない */
.company .section2 .tab_contents_box.tab1 input:checked + .tab_menu:hover {
  color: black;
}

.company .section2 .tab_contents_box.tab1 input:checked + .tab_menu:hover::after {
  height: 6px;
  background-color: var(--maincolor);
}

/* ▼ コンテンツエリア（最初は非表示） */
.company .section2 .tab_contents_box.tab1 .company_tab_content {
  display: none;
  width: 100%;
}

/* ▼ 選択時に表示（ラジオボタンと紐づく） */
.company .section2 .tab_contents_box.tab1 #tab1_a:checked ~ #tab1_a_content,
.company .section2 .tab_contents_box.tab1 #tab1_b:checked ~ #tab1_b_content,
.company .section2 .tab_contents_box.tab1 #tab1_c:checked ~ #tab1_c_content {
  display: block;
  padding-top: 1.5em;
}










/* 会社概要テーブル（tab1用） */
.company .section2 .company_profile_table table {
  width: 100%;
  border-collapse: collapse;
  word-break: break-all; /* テキストを1文字単位で改行 */
}


.company .section2 .company_profile_table th,
.company .section2 .company_profile_table td {
  padding: 1.4em 0;
  border-bottom: 1px solid #808080;
  vertical-align: top;   /* 右側のテキストが複数行になった場合、上揃え */
  font-size: 0.95rem;
}

.company .section2 .company_profile_table th {
  width: 30%;
  min-width: 180px;
  text-align: left;
  white-space: nowrap;   /* 項目名が折り返されにくくなる */
}

.company .section2 .company_profile_table td {
  text-align: left;
}

.company .section2 .company_link_btn{
  margin: 2em auto 0 auto;
}

.company .section2 .company_link_btn a{
  background-color: var(--maincolor);
  padding: 1em;
  width: fit-content;
  display: block;
  margin: 0 auto;
  color: white;
  transition: transform 0.5s ease; /* 0.5秒かけて変化 */
}

.company .section2 .company_link_btn a:hover{
  background-color: black;
  transform: scale(1.1);
}

.company .section2 .company_link_btn p::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  background: url(../../images/page/company/company_img6.svg) no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: bottom;
}











.company .section2 .company_name{
  padding: 1.25em 0;
  background-color: white;
  border: 1px solid #808080;
  margin-top: 5em;
}

.company .section2 .company_name_first{
  margin-top: 3em !important;
}










.company .section2 .company_chart_innerBox{
  position: relative;
}

.company .section2 .company_chart_box{
  overflow-y: scroll;
  width: 80vw;
  height: 80vh;
}

/* ▼ 基本状態：組織図のモーダルを非表示 */
.company .section2 .company_chart_wrapper {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 と同じ */
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5); /* 黒半透明の背景 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;   /* クリックを無効化（見えてない扱い） */
  transition: opacity 0.3s ease;
  z-index: 10;
}

/* ▼ モーダル内の白いボックス */
.company .section2 .company_chart_box {
  background-color: #fff;
  padding: 4em;
  box-sizing: border-box;
}

/* ▼ 閉じるボタン */
.company .section2 #close-chart_modal {
  position: absolute;
  top: -1em;
  right: -1em;
  width: 3em;
  height: 3em;
  background-color: var(--maincolor);
  border: none;
  cursor: pointer;
  border-radius: 6px;
  border: 3px solid white;
}

.company .section2 #close-chart_modal:hover{
  background-color: black;
}







.company .section2 #close-chart_modal img{
  width: 60%;
  filter: invert(99%) sepia(79%) saturate(0%) hue-rotate(259deg) brightness(119%) contrast(101%);
}

/* ▼ tab1_c が選択されているときだけモーダルを有効にする */
.company .section2 #tab1_c:checked ~ #tab1_c_content .company_chart_wrapper {
  opacity: 1;
  pointer-events: auto;  /* クリック可能にする */
}

/* モーダル表示中は背景スクロールを止める */
body.is-modal-open{
  position: fixed;
  width: 100%;
  left: 0;
  overflow: hidden;
}

















.company #section3 {
  position: relative;
  overflow: hidden;
  min-height: 1000px;      /* height ではなく min-height 推奨 */
}

/* 背景専用レイヤー */
.company #section3::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: -400px;
  background:url(../../images/page/company/company_img18_syuusei.jpg) no-repeat left top / 100%;
  opacity: 0.7;
  z-index: -1;
}

/* テキスト・画像を上に重ねる */
.company .section3 .text_cloud,
.company .section3 .message_img {
  position: absolute;
  z-index: 1;
}

/* 文字用のクラウド */
.company .section3 .text_cloud {
  color: white;
  width: fit-content;
  padding: 3em;
  position: absolute;
  right: 10%;
  top: 45%;
  transform: translateY(-45%);
}





.company .section3 .text_cloud::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(207, 123, 14, 0.7);

  border-radius: 70% 30% 50% 30% / 45% 70% 40% 60%;

  /* 2つのアニメーションを同時に実行 */
  animation:
    cloudWobble 8s ease-in-out infinite,
    cloudRotate 30s linear infinite; /* ← 360°回転 */
}

@keyframes cloudWobble {
  0% {
    border-radius: 70% 30% 50% 30% / 45% 70% 40% 60%;
    transform: translate(0, 0) rotate(0deg);
  }

  33% {
    border-radius: 40% 60% 65% 35% / 55% 35% 65% 45%;
    transform: translate(-10px, -6px) rotate(-2deg);
  }

  66% {
    border-radius: 55% 25% 35% 70% / 65% 75% 35% 30%;
    transform: translate(8px, 5px) rotate(2.5deg);
  }

  100% {
    border-radius: 70% 30% 50% 30% / 45% 70% 40% 60%;
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes cloudRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}









/* セクション下部の波線コンテナ */
.company .section3 .wave_lines {
  position: absolute;
  bottom: -1px;
  width: 100%;
}

/* SVG 自体を横幅いっぱいに */
.company .section3 .wave_lines svg {
  width: 200%;             /* 波2本分を持たせるので 200% にする */
  height: auto;
  display: block;
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(79deg) brightness(100%) contrast(101%);
}

/* 波全体を右→左にスライドさせるグループ */
.company .wave-group {
  animation: waveSlide 16s linear infinite;
}

/* 右から左へ、一定速度で流れていくアニメーション */
@keyframes waveSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%); /* ちょうど2本分の半分だけ左に移動 */
  }
}










.company .section3 .text_cloud .omoi{
  border: 2px solid white;
  width: 6em;
  height: 6em;
  line-height: 1.3em;
  border-radius: 999px;
  
  display: flex;             /* ★フレックスボックスにする */
  justify-content: center;   /* ★左右中央 */
  align-items: center;       /* ★上下中央 */
  margin: 0 auto 1em auto;
}

.company .section3 .corporate_message{
  line-height: 2.5em;
}

.company .section3 .corporate_message .ttl{
  margin-bottom: 0.75em;
  font-weight: 700;
  line-height: 1.5em;
}

.company .section3 .corporate_message .ttl br{
  display: none;
}









.company #section4{
  background-image: unset;
  border-top: 1px white solid;
}

/* ★ 中央寄せの本体 */
.company #section4 .inner_contents {
  max-width: 1200px;          /* 好きな基準幅 */
  margin: 0 auto;            /* ← 画面左右中央 */
  display: flex;
  align-items: center;        /* 縦中央 */
}

.company .section4 .section_ttl{
  background-color: white;
  padding: 0 0.2em;
}


/* 左：画像 */
.company .section4 .image_box_wrapper{
  flex: 0 0 500px;            /* 最大500pxで固定気味 */
}

.company #section4 .text_contents{
  padding: 3em;
  flex: 1;                    /* 残り幅を使う */
}

.company .section4 .message{
  position: relative;
  width: fit-content;
  margin: 0 auto;
  z-index: 1;
}

.company .section4 .message .circle{
  border: 2px solid var(--maincolor);
  width: 6em;
  height: 6em;
  line-height: 1.3em;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1em auto;
  position: absolute;
  left: -4em;
  top: -4.5em;
  z-index: -1;
}

.company .section4 .company_text{
  width: auto;
  text-align: left;
  line-height: 1.75em;
}

.company .section4 .image_box{
  background-color: unset;
  padding: unset;
  margin-bottom: unset;
  position: relative;
  overflow: hidden;
}

.company .section4 .image_box img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateX(-0px); /* ← レスポンシブ時は左にずらす */
}

.company .section4 .image_box .nema_box{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  padding: 1em;
  margin-bottom: 2em;
  width: max-content;
}

.company .section4 .image_box .nema_box span{
  font-size: 16px;
  margin-right: 1em;
}









.company #section5{
  padding: 6em 0 0 0;
}

.company .section5 .section_ttl{
  color: white;
}

.company .section5 .section_ttl_boarder,
.company .section6 .section_ttl_boarder{
  border-bottom:6px solid  #fff100;
}

.company .section5 .movie_box {
  border: 7px solid white;
  background-color: white;
  position: relative;
  margin-bottom: 5em;
  transition: transform 0.5s ease; /* 0.5秒かけて変化 */
}


.company .section5 .movie_box video {
  width: 100%;
  display: block;
}


/* ▼ 再生ボタン（Outdoor_toy と同じデザイン） */
.company .section5 .movie_box .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  border: 8px solid white;
  outline: none;
  cursor: pointer;
}

/* ▼ 三角マーク（既存アウトドア仕様と同じように） */
.company .section5 .movie_box .play-button::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 40px solid white;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%);
}

.company .section5 .movie_box:hover{
  cursor: pointer;
  transform: scale(0.95);
}

.company .section5 .movie_box:hover .play-button::before{
  border-left-color: var(--pointcolor);
}

.company .section5 .movie_box:hover .play-button{
  border-color: var(--pointcolor);
}
















.company .section5 .business_list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
  align-items: stretch; /* ← boxの高さを合わせる */
}

.company .section5 .business_list_box{
  border: 10px solid #eca52b;
  border-radius: 2em;
  padding: 2em;
  height: 100%; /* 伸びるように高さを設定 */
  background-color: white;
  transition: transform 0.5s ease;
}

.company .section5 .business_list_box li{
  margin-bottom: 1em;
  line-height: 1.5em;
}

.company .section5 .business_list_box li:last-of-type{
  margin-bottom: unset;
}

.company .section5 .business_list_box > li:nth-child(2){
  margin-bottom: 2em;
}


/* 1つ目のロゴ画像ボックス：高さを固定して中央揃え */
.company .section5 .business_list_box li:nth-child(1){
  height: 90px;           /* ← 必要に応じて調整可 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ロゴ画像を高さ100%で揃える */
.company .section5 .business_list_box li:nth-child(1) img{
  height: 100%;
  width: auto;
  object-fit: contain;
}

.company .section5 .business_list > li:first-of-type .business_list_box li:nth-child(1) img{
  height: 70%;
}

/* 3つ目の画像ボックス：高さを固定 */
.company .section5 .business_list_box li:nth-child(3){
  height: 170px;          /* ← max-height ではなく固定値にする */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画像をコンテナ内で収めて同じ高さに揃える */
.company .section5 .business_list_box li:nth-child(3) img{
  height: 100%;
  width: auto;
  object-fit: contain;     /* サイズ比をキープして収める */
}

.company .section5 .business_list_box li:nth-child(4) .link_ttl{
  display: block;
  margin-top: 1em;
  background-color: var(--maincolor);
  padding: 0.75em 0;
  color: white;
  transition: transform 0.5s ease;
}

.company .section5 .montagna{
  border: 10px solid #34906a;
}

.company .section5 .montagna li:nth-child(4) .link_ttl{
  background-color: #437235;
  transition: transform 0.5s ease;
}

.company .section5 .business_list a:hover .link_ttl{
  background-color: black;
}


.company .section5 .business_list a:hover .business_list_box{
  transform: scale(0.95);
}

.company .section5 .background-tint > .blur {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}






.company #section6{
  position: relative;
  overflow: unset;
}

.company .section6 .tab_btn_wrapper{
  background-color: var(--maincolor);
  padding-top: 6em;
}

.company .section6 .tab_btn_wrapper .section_ttl p{
  color: white;
}

/* ▼ タブボタンのリセット */
.company .section6 .tab_contents_box{
  border: unset;
  margin: unset;
}

/* ▼ タブボタンを横並びにする */
.company .section6 .tab_contents_box.tab2 .tab_inner_warapper {
  display: flex;
  align-items: stretch;
}

/* ▼ ラジオボタンは非表示（section直下に移動したのでセレクタ変更） */
/* ラジオは非表示のままでOK */
.company .section6 input[type="radio"][name="tab_menu2"] {
  display: none;
}

/* タブの基本見た目 */
.company .section6 .tab_contents_box.tab2 .tab_menu {
  line-height: 1.25em;
  display: inline-block;
  width: 50%;
  background: white;
  padding: 1.2em 0;
  box-sizing: border-box;
  border: unset;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.company .section6 .tab_contents_box.tab2 .tab_menu::before{
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  vertical-align: -0.1em;
  background: url(../../images/systems/icon/dot_arrow_icon_black.png) no-repeat center / contain;
}

/* ★ JSで付けるアクティブ */
.company .section6 .tab_contents_box.tab2 .tab_menu.is-active {
  background: #e7b000;
  color: #fff;
}

.company .section6 .tab_contents_box.tab2 .tab_menu.is-active::before{
  background: url(../../images/systems/icon/dot_arrow_icon.png) no-repeat center / contain;
  transform: rotate(90deg);
}

/* hover（アクティブ以外だけにしたい場合） */
.company .section6 .tab_contents_box.tab2 .tab_menu:not(.is-active):hover {
  background: black;
  color: white;
}

/* hover（アクティブ以外だけにしたい場合） */
.company .section6 .tab_contents_box.tab2 .tab_menu:not(.is-active):hover::before{
  background: url(../../images/systems/icon/dot_arrow_icon_gray.png) no-repeat center / contain;
}

/* コンテンツは基本非表示（JSで表示） */
.company .section6 .tab2_content {
  display: none;
}












.company .section6 .tab2_content .tab_inner_contents{
  text-align: left;
}

.company .section6 .tab_inner_contents li{
  line-height: 1.5em;
}

/* 沿革のデザイン */
.company .section6 .history_wrapper > li{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* lino奇数に適用 */
.company .section6 .history_wrapper > li:nth-child(odd) {
  background-color: #f2f2f2;
  z-index: -2;
}

.company .section6 .history_wrapper > li:nth-child(odd) .history_list,
.company .section6 .history_wrapper > li:nth-child(even) .history_list{
  max-width: 900px;
  margin: 0 auto;
}










/* 沿革の縦ラインCSS実装 */
/* =========================
   1) 行の中身：2列グリッド
========================= */
.company .section6 .history_list{
  display: grid;
  grid-template-columns: minmax(11em, auto) 1fr;
  column-gap: 1em;
  row-gap: 1em;
  align-items: center;

  padding: 1.9em 0;
  box-sizing: border-box;
}

/* =========================
   2) タイムラインの縦線：全体で1本だけ
   ※重なりがなくなり、常に同じ色/太さになる
========================= */
.company .section6 .history_wrapper{
  position: relative;
}

.company .section6 .history_wrapper p,
.company .section6 .history_wrapper li{
  word-break: break-all; /* テキストを1文字単位で改行 */
}

/* history_list が max-width:900px; margin:0 auto; の前提 */
.company .section6 .history_wrapper::before{
  content: "";
  position: absolute;
  top: 3.4em;
  left: 0.7em;
  bottom: 3.4em;
  width: 1px;
  background: var(--assortcolor);
  z-index: 0;
}

/* 最後(To be continued...)の下は線を止めたい場合（任意） */
.company .section6 .history_wrapper > li:last-child{
  padding-bottom: 0; /* 必要なら調整 */
}
.company .section6 .history_wrapper > li:last-child::before,
.company .section6 .history_wrapper > li:last-child::after{
  content: none;
}

/* =========================
   3) リスト1（日付）＋ ●
========================= */
.company .section6 .history_list > li:nth-child(1){
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  white-space: nowrap;

  position: relative;
  padding-left: 1.4em; /* ●分の余白 */
}

/* ●（ドット） */
.company .section6 .history_list > li:nth-child(1)::before{
  content: "";
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: var(--assortcolor);

  position: absolute;
  left: 0;              /* 日付セル内での左端 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;           /* 縦線より上 */
}

/* ★ 行ごとの縦線は使わない（重なり防止） */
.company .section6 .history_list > li:nth-child(1)::after{
  content: none;
}















/* 沿革の本文（沿革タイトル） */
.company .section6 .history_list > li:nth-child(2){
  grid-column: 2;
  grid-row: 1;
  min-width: 0;                    /* 長文はみ出し防止 */
}

/* リスト3：画像（本文とツラ合わせ＝2列目に配置） */
.company .section6 .history_list > li:nth-child(3){
  grid-column: 2;                  /* ★本文と同じ列 */
  grid-row: 2;                     /* ★下の行 */
}

/* 画像が複数あるとき横並びにする（image_box用） */
.company .section6 .history_list > li:nth-child(3) .image_box{
  display: flex;
  gap: 2em;
  flex-wrap: wrap;                 /* 複数でも折り返し */
  align-items: center;
}

/* 画像サイズ（単体imgにも、image_box内にも効かせる） */
.company .section6 .history_list > li:nth-child(3) img{
  max-width: 200px;
  height: auto;
  display: block;
}

.company .section6 .history_list .img7{
  max-height: 150px;
}

.company .section6 .history_list .To_be{
  color: var(--maincolor);
}

.company .section6 .history_list .To_be::before{
  color: black;
}










/* ここから代表作用にCSSを上書きカスタム */
.company .section6 #tab2_b_content  .history_wrapper > li:nth-child(odd) {
  background-color: #fdf3e7;
}

.company .section6 #tab2_b_content .history_wrapper::before {
  background: var(--maincolor) !important;
  top: 17em;
  bottom: 15em;
}

.company .section6 #tab2_b_content .history_list > li:nth-child(1)::before {
  background: var(--maincolor);
}

.company .section6 .tabB_message{
  text-align: center;
  line-height: 1.5em;
  margin: 2.5em 0 0.75em 0;
}

/* 代表作（tab2_b）：1行3列レイアウト */
.company .section6 #tab2_b_content .history_list{
  display: grid;
  grid-template-columns:
    minmax(11em, auto)  /* 1：日付 */
    160px               /* 2：サムネ（固定） */
    1fr;                /* 3：テキスト（残り全部） */

  column-gap: 1.5em;
  align-items: center;
  padding: 2.4em 0;
  box-sizing: border-box;
}

/* 1：日付 */
.company .section6 #tab2_b_content .history_list > li:nth-child(1){
  grid-column: 1;
  white-space: nowrap;
  color: var(--maincolor);
}

/* 2：サムネイル画像 */
.company .section6 #tab2_b_content .history_list > li:nth-child(2){
  grid-column: 2;
  min-width: 0; /* 折り返し安定 */
  grid-row: unset;
  
  background-color: #fdf3e7;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  position: relative;
}

.company .section6 #tab2_b_content .history_list > li:nth-child(2) img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}

/* 3：テキストボックス */
.company .section6 #tab2_b_content .history_list > li:nth-child(3){
  grid-column: 3;
  grid-row: unset;
  margin-left: 2em;
}

.company .section6 #tab2_b_content .history_wrapper > li:nth-child(odd) .history_list > li:nth-child(2){
  background-color: white;
}









.company .section6 #tab2_b_content .history_list .item_name {
  padding-bottom: 0.25em;
}

.company .section6 #tab2_b_content .history_list .item_text {
  line-height: 1.75em;
  margin-bottom: unset;
}

.company .section6 #tab2_b_content .history_list .patent_wrapper{
  margin-top: 1em;
}

.company .section6 #tab2_b_content .history_list .patent_wrapper > ul{
  display: flex;
}

.company .section6 #tab2_b_content .history_list .patent_wrapper li{
  background-color: #e7b000;
  color: white;
  padding: 0.5em 0.75em;
  border-radius: 8px;
}

.company .section6 #tab2_b_content .history_list .patent_wrapper li:first-of-type{
  margin-right: 0.5em;
}













.company .section6 #tab2_b_content .history_wrapper > li:last-of-type .history_list {
  display: grid;
  grid-template-columns:
    minmax(11em, auto)  /* 1：日付 */
    1fr;                /* 2：テキスト（残り全部） */
    height: 470px;
}

.company .section6 #tab2_b_content .history_wrapper > li:last-of-type .history_list > li:nth-child(2){
  width: 100%;
  background-color: unset;
  border-radius: unset;
}

.company .section6 #tab2_b_content .history_wrapper .toku_syoukai{
  display: flex;
  align-items: center;
}

.company .section6 #tab2_b_content .history_wrapper .toku_syoukai > li:first-of-type{
  position: relative;
  padding: 3em 4em 3em 2em;
  text-align: center;
  overflow: hidden;
}

.company .section6 #tab2_b_content .history_wrapper .toku_syoukai > li:first-of-type::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url(../../images/page/company/section_img25.png) no-repeat center / 100% 100%;
  z-index: -1;
}

.company .section6 #tab2_b_content .history_wrapper .toku_syoukai > li:last-of-type{
  text-align: center;
}


.company .section6 #tab2_b_content .history_wrapper .toku_syoukai li img{
  position: unset;
  transform:unset;
  max-width: 160px;
}

.company .section6 #tab2_b_content .history_wrapper .toku_name{
  margin-top: 1em;
}


.company .section6 .yurayura_toku{
  position: absolute;
  bottom: -210px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

/* ★ここがマスク枠 */
.company .section6 .img_container{
  width: 500px;
  height: 210px;
  overflow: hidden;
  position: relative;
}

/* 揺れる画像は枠の中でabsolute */
.company .section6 .img_container img{
  position: absolute;
  left: 50%;
  top: -60px;
  width: 100px;
  transform-origin: top center;
  animation: burannko 2.8s ease-in-out infinite;
}

@keyframes burannko {
  0%   { transform: translateX(-50%) rotate(-15deg); }
  50%  { transform: translateX(-50%) rotate(15deg); }
  100% { transform: translateX(-50%) rotate(-15deg); }
}











.company .section7 .csr_wrapper{
  width: 100%;
  padding-top: 5em;
  margin: 0 auto;
  text-align: center;
  border-top: 6px solid var(--maincolor);
}

.company .section7 .csr_figure{
  width: 790px;
  margin: 0 auto;
}

.company .section7 .csr_midashi{
  background-color: #e7b000;
  color: white;
  padding: 1em 0;
}

.company .section7 .csr_list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3em;
  padding: 4em 3em 3em 3em;
  max-width: 1200px;
  margin: 0 auto;
}

.company .section7 .csr_list .csr_contents{
  line-height: 1.5em;
}

.company .section7 .csr_list .csr_imageBox{
  background-color: #fdf3e7;
  padding: 1.5em;
}

.company .section7 .csr_list .csr_title{
  padding-top: 1em;
  font-weight: 900;
}

.company .section7 .csr_list .csr_text{
  text-align: left;
  margin-top: 1.5em;
}

.company .section7 .link_box{
  margin: 18em auto 0 auto;
  position: relative;
  border-radius: 6em;
  border: 10px solid #437235;
  background-color: white;
  padding: 3em 1em;
  max-width: 1200px;
}

.company .section7 .link_title{
  position: absolute;
  top: -1.75em;
  left: 50%;
  transform: translateX(-50%);
  background-color: #437235;
  padding: 1em;
  color: white;
  line-height: 1.5em;
  width: 100%;
  max-width: 600px;
}

.company .section7 .link_title br{
  display: none;
}

.company .section7 .sdgs_thumbnail{
  max-width: 930px;
  transition: transform 0.5s ease; /* 0.5秒かけて変化 */
}

.company .section7 .link_box a{
  display: block;
}

.company .section7 .link_box a:hover .sdgs_thumbnail{
  transform: scale(0.9);
}



.company .section7 .earth{
  position: absolute;
  top: -16em;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  width: 500px;
}

.company .section7 .earth img{
  display: block;
  width: 100%;
  height: auto;
  animation: earthRoll 40s linear infinite;
  transform-origin: center;
}

@keyframes earthRoll{
  0%{ transform: rotate(360deg); }
  100%{ transform: rotate(0deg); }
}

.company .section7 .csr_thumbnail{
  position: absolute;
  right: 7em;
  bottom: -3.5em;
  width: 160px;
  box-shadow: 5px 6px 10px 0px rgba(0, 0, 0, 0.4);
  transform:rotate(15deg); 
}

.company .section7 .csr_url{
  margin-top: 2em;
}










.company .section8 .link_list_title{
  padding: 1em 0;
  background-color: var(--maincolor);
  border-bottom: solid 6px #fff100;
  color: white;
  margin-top: 2.5em;
}

.company .section8  .link_list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
  max-width: 800px;
  margin: 0 auto;
  padding: 3em;
  justify-items: center; /* ★ 横方向（列の中で中央） */
}

.company .section8 .link_list > li{
  display: flex;
  align-items: center;
}

.company .section8 .link_list li:nth-child(1){
  width: 80%;
}

.company .section8 .link_list li:nth-child(2){
  width: 75%;
}


.company .section8 .link_list li:nth-child(4){
  width: 90%;
}

.company .section8 .link_list a{
  transition: transform 0.5s ease; /* 0.5秒かけて変化 */
  display: block;
}

.company .section8 .link_list a:hover{
  transform: scale(0.9);
}

.company .section8 .company_copyright{
  background-color: #fdf3e7;
  padding: 1.5em 0;
  line-height: 1.75em;
}

.company .section8 .company_copyright br{
  display: none;
}

.company footer,
#copyright_box{
  display: none;
}