@charset "UTF-8";
body {
    margin: 0;
    padding: 0;
    font-family: "Yu Gothic Medium", "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN",sans-serif;
    font-weight: 500;
    letter-spacing: 0.1em; 
    background-color: #f2f5f7;
    color: #252525;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width:100%;
}

article{
    overflow-x: hidden;  
}

*{
    box-sizing:border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px;
}

.container{
  width:90%;
  margin-right: auto;
  margin-left: auto;
  max-width:1170px;
}

h3{
  font-size: 36px;
  text-align: center;
  margin-bottom: 80px;
  color:#555;
  letter-spacing: 0.2em;
  line-height: 1.2;
}

.mgn_tptp{
  margin-top: 180px;
}

.mgn_tp{
  margin-top: 200px;
}

.title_text::before {
  content: "(";
  font-weight: 500;
  margin-right: 0.1em;
}

/* 後ろカッコ ) */
.title_text::after {
  content: ")";
  font-weight: 500;
  margin-left: 0.05em;
}

.sub_en {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 18px;
  color: rgba(21, 85, 162,0.8);
  /* text-transform: uppercase; */
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}

/* 英語の左右に「横棒」を作る設定 */
.sub_en::before,
.sub_en::after {
  content: "";
  width: 40px;
  height: 1px;
  background-color: rgba(21, 85, 162,0.8);
  opacity: 0.5;
  display: block;
}

.logo{
  display:flex;
  justify-content: center;
  align-items:center;
}
.logo a{
  display: flex;
  align-items: center;
  text-decoration: none;
}

.footer-bottom{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.logo img{
  width:160px;
  height:auto;
  margin-left: 10px;
  margin-right: 10px;
}

.logo_words {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  color:#ffffff;
  letter-spacing: 0.18em; 
  font-size: 19px; 
  margin-left:5px ;
}

/* =====================
  ハンバーガー全体
===================== */
.hamburger {
  position: fixed;
  top: 15px;
  left: 20px;
  z-index: 100;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: 0.3s;
  z-index: 9999;
}

.hamburger:not(.active):hover .hamburger_icon span {
  background: #4c77c5; 
  transform: scale(1.05);
}

.hamburger:not(.active):hover .menu_text {
  color: #4c77c5;
  transform: scale(1.05);
}


/* =====================
  アイコン（3本線）
===================== */
.hamburger_icon {
  position: relative;
  width: 30px;
  height: 20px;
}

.hamburger_icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #1555a2;
  transition: 0.3s ease;
  border-radius: 10px;
}

/* 線の位置 */
.hamburger_icon span:nth-child(1) {
  top: 0px;
}

.hamburger_icon span:nth-child(2) {
  top: 9px;
}

.hamburger_icon span:nth-child(3) {
  top: 18px;
}

/* hover（閉じてる時だけ） */
.hamburger:not(.active):hover span:nth-child(1) {
  transform: translateY(-2px);
}

.hamburger:not(.active):hover span:nth-child(3) {
  transform: translateY(2px);
}

/* ×アニメーション */
.hamburger.active span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

/* =====================
  MENUテキスト
===================== */
.menu_text {
  font-size: 12px;
  font-weight: 700;
  color: #1555a2;
  text-align: center;
  margin:0;
  /* 微調整（視覚中央） */
  transform: translateX(1px);
  font-family: "Helvetica Neue", "Arial", "sans-serif";
  letter-spacing: 0.2em;
}

.menu_title,.menu a{
  color: #fdfdfe;
  text-shadow: 0 0 5px rgba(80, 80, 80, 0.6);
}

.menu a:hover {
  color: #ffcc00;
}

.menu a:active {
  color: #ffc800;
}

/* ハンバーガーが開いたとき（CLOSE） */
.hamburger.active span {
  background: #fdfdfe;
}
.hamburger.active .menu_text {
  color: #fdfdfe;
}
/* =====================
  メニュー本体
===================== */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70vh;
  background: rgba(49, 111, 191, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
  transition: 0.5s;
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform, opacity;
  z-index: 9998;
}

.menu.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* =====================
  メニュー中身（4カラム）
===================== */
/* ロゴエリア全体の箱：横幅を100%にして中央寄せの土台を作る */
.menu_home_link {
  width: 100%;
  display: flex;
  justify-content: center; 
  margin-bottom: 40px;
}

.menu_home_link a {
  display: flex;
  align-items: center;
  text-decoration: none !important;
}

.logo img {
  border: none !important;
  display: block;
}

/* ロゴ画像のサイズ */
.menu_home_link .logo {
  width: 180px; 
  height: auto;
  margin-left: 8px;
  margin-right: 15px;
}

.logo_words_2{
  color:#ffffff;
  font-size: 22px;
  font-family: 'IBM Plex Sans', sans-serif ;
  font-weight: 400;
  letter-spacing: 0.15em;
  margin-left: 5px;
}

.menu_inner {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.menu_column {
  width: 23%;
  text-align: center;
  position: relative;
}

.menu_column:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 53%;
  right: 0;
  transform: translateY(-50%); 
  height: 150px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.3);
}

.menu_column:nth-child(4)::after {
  display: none;
}


.menu_title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 25px;
}

.menu_column ul {
  list-style: none;
  padding: 0;
}

.menu_column li {
  margin-bottom: 20px;
}

.menu_column a {
  text-decoration: none;
  transition: 0.3s;
}

.menu_column a:hover {
  opacity: 0.6;
}

.menu a:hover {
  transform: scale(1.05);
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
}

.header_top {
    display: flex;
    justify-content: center; 
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

/* ヘッダー独立 */

.lower_page header {
  background: #c3d6f1;
} 
/* header .header_top_2 { 
    display: flex !important;
    justify-content: space-between !important; 
    align-items: center !important;
    padding: 0 0 0 15px !important; 
    box-sizing: border-box !important;
  } */
/* =====================
  レスポンシブ
===================== */
@media (max-width: 768px) {
  .for-pc.entry_btn {
    display: none !important;
  }

  /* 2. メニュー全体の動きとスタイル */
  .menu {
    width: 85%;
    height: 100vh;
    top: 0;
    right:0;
    left: auto;
    transform: translateX(100%);
    transition: 0.4s;
    background: rgba(49, 111, 191, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-y: auto;
    z-index: 1000;
    padding-top: 60px !important;
  }

  .menu.active {
    transform: translateX(0);

  }

  .menu_inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    justify-content: flex-start;
    width: 100%;
    padding: 20px 30px ;
    gap: 25px;
  }

  /* 3. メニュー内の各カラム */
  .menu_column {
    width: 100%;
    border: none;
    margin-bottom: 0;
  }

  .menu_column:not(:last-child)::after {
    content: none;
  }

  .menu_title {
    font-size: 16px;
    color: #fdfdfe;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.3); 
    padding-bottom: 5px;
  }

  /* 4.メニュー内に入れたエントリーボタンの専用デザイン */
  .menu_btn_area {
    margin-top: 20px;
    width: 100%;
  }

  /* メニュー内の時は「四角いボタン」として再定義 */
  .menu_btn_area .entry_btn {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: auto; 
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    position: static;
    box-sizing: border-box;
  }

  .menu_btn_area .entry_text .jp {
    color: #fdfdfe; 
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-left: auto;
    margin-left: auto;
  }

  .menu_btn_area .entry_text .en {
    color: #fdfdfe;
    font-size: 12px;
    display: block;
    text-align: center;
    margin-left: auto;
    margin-left: auto;
  }

  .menu_btn_area .arrow {
    width:8%;
    right:90px;
    bottom:18px;
  }
  
  /* メニュー内の時は黄色の矢印などは隠す */
  .menu_btn_area .arrow.white .arrow.yellow {
    display: none;
  }

.entry_btn.js-fade{
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
  }

.hamburger {
    position: fixed !important;
    top: 9px !important;
    right: 15px !important;
    left: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9999;
    width: auto;
  }

.hamburger_icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    gap: 5px !important; 
    margin-bottom: 0;
    height: auto !important;
    width: 25px;
    
  }

  .hamburger_icon span {
    position: static !important;  
    display: block;
    width: 25px; 
    height: 1px;
    transition: all 0.3s;
    margin: 0 !important;
  }

  /* MENUテキストの微調整 */
  /* .menu_text {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 4px !important; 
    margin-right: 0 !important;  
    padding-left: 2px;        
    font-size: 8px !important;
    color: #ffffff;
  } */

  /* ×アニメーション（スマホ版Flex用） */
  .hamburger.active .hamburger_icon {
    gap: 0 !important;
    margin-top: 5px;
  }
  .hamburger.active span:nth-child(1) {
    transform: translateY(1px) rotate(45deg) !important;
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0 !important;
  }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-1px) rotate(-45deg) !important;
  }

.hamburger:not(.active):hover .hamburger_icon span,
  .hamburger:not(.active):hover .menu_text,
  .hamburger_icon span,
  .menu_text {
    transform: scale(1);
  }

  .header_home_link { 
    display: flex;
    align-items: center;
    transform: scale(0.85);
    transform-origin: left center;
  }

/* .logo {
    display: block !important; 
  } */

  /* 検証モードで並んだ「aタグ」の設定 */
  /* .logo a {
    display: flex !important;
    align-items: center !important; 
    text-decoration: none !important;
  } */

  /* ロゴ画像自体の調整 */
  /* .logo img {
    width: 100px !important;
    height: auto !important;
    border: none !important;
    display: block;
  } */

  .logo_words {
    font-size: 12px ;
    margin-left: 4px !important;
  }

  /* MENUボタンの調整 */
  .menu_btn_wrap {
    position: static !important;
    transform: scale(0.8);
    transform-origin: right center;
  }
.menu_text {
    font-size: 7px !important;
    letter-spacing: 0.05em !important;
    /* font-weight: bold;*/
    color: #1555a2;
    margin-top: -3px;
  }

/* --- A. 初期状態（白） --- */
  /* header_top に is-scrolled がついていない時 */
  .is-top .header_top:not(.is-scrolled) .logo_words,
  .is-top .header_top:not(.is-scrolled) .menu_text {
    color: #ffffff !important;
  }

  .is-top .header_top:not(.is-scrolled) .hamburger_icon span {
    background-color: #ffffff !important;
  }

  /* ロゴ画像を白く見せる */
  .is-top .header_top:not(.is-scrolled) .logo img {
    filter: brightness(0) invert(1) !important;
  }

  /* --- B. スクロール後（青） --- */
  /* header_top に is-scrolled がついた時 */
  .header_top.is-scrolled .logo_words,
  .header_top.is-scrolled .menu_text {
    color: #4c77c5;
  }

  .header_top.is-scrolled .hamburger_icon span {
    background-color: #4c77c5 t;
  }

  .hamburger.active .menu_text {
    margin-top: 3px !important;
    color: #fdfdfd;
  }

  /* ロゴを元の色に戻す */
  .header_top.is-scrolled .logo img {
    filter: none !important;
  }

  /* --- C. 共通設定（アニメーション） --- */
  .logo_words, .menu_text, .hamburger_icon span, .logo img {
    transition: all 0.4s ease !important;
  }

/* ロゴ画像のサイズ */
.menu_home_link img {
  width: 100px; 
}

}

@media (max-width: 768px) {
  /* 1. メニュー全体の土台を「左揃え」に固定*/
  .menu {
    /* 余白を最小限（CLOSEボタンと被らない程度）にする */
    padding-top: 60px !important; 
    justify-content: flex-start !important;
  }

  /* 2. ロゴエリアを「一番上」に強制固定 */
  .menu_home_link {
    order: -1 !important;
    margin-bottom: 20px !important;
  }

  /* 3. 二重になっているかもしれない内側の箱を調整 */
  .menu_inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 30px !important;
    gap: 15px !important;
  }

  .menu_home_link a {
    justify-content: flex-start !important;
  }

  /* 3. ロゴ画像のサイズ調整 */
  .menu_home_link img {
    width: 120px !important;
    height: auto !important;
  }
  
  .menu_home_link .logo{
    margin-right:10px;
    margin-left: 0;
  }

  .logo_words_2 {
    font-size: 14px !important;
    margin: 0;
  }

  /* 4. CLOSEボタン（ハンバーガー）を「右端」に固定 */
  .hamburger.active {
    left: auto !important;
    right: 20px !important;
    top: 20px !important;
    position: fixed !important;
  }

  .menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 85% !important;
    right: 0 !important;
    left: auto !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  /* 2. ロゴエリア */
  .menu_home_link {
    order: -1 !important;
  }

  /* 3. 内側の箱（ナビゲーションリストなど） */
  .menu_inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 30px 50px !important;
    gap: 20px !important;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 4. CLOSEボタン（右上に固定） */
  .hamburger.active {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    z-index: 10001 !important;
    color: #fdfdfe;
  }


.menu_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

/* メニューが開いた時（bodyにクラスがついた時など）に表示 */
body.is-active .menu_overlay {
  opacity: 1;
  visibility: visible;
}


}

/* .menu_text {
    color: #ffffff;
    transition: color 0.3s ease;
}

.hamburger_icon span {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
} */

/* --- スクロール後：白背景になるので「元の色」 --- */
/* header.is-scrolled .menu_text {
    color: #4c77c5;
}

header.is-scrolled .hamburger_icon span {
    background-color: #4c77c5;
} */





/* entrybutton */
/* =====================
  エントリーボタン
===================== */
.entry_btn {
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 100;
  width: 80px;
  height: 80px;
  background: #1555a2;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: visible;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none; 
  transition: all 0.4s ease;
  }

  .entry_btn.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =====================
  テキスト
===================== */
.entry_text {
  text-align: center;
  color: #fff;
}

.entry_text .jp {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  margin-left: 3px;
}

.entry_text .en {
  font-size: 12px;
  font-weight: 700;
  font-family: "Helvetica Neue", "Arial", "sans-serif";
  letter-spacing: 0.2em;
  margin-left: 3px;
}

/* =====================
  矢印
===================== */
.arrow {
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 33%;
  height: auto;
  transition: 0.3s;
}

.arrow.yellow {
  opacity: 0;
}

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

スクロール後（ぷかぷか → 止まる）
===================== */
.entry_btn.is-scrolled {
transform: translateY(-4px);
box-shadow: 0 4px 15px rgba(44, 90, 160, 0.3);
animation: floatOnce 3s ease-in-out infinite;
/* animation: floatOnce 1.5s ease-in-out 3; */
}

/* ぷかぷかアニメーション */
@keyframes floatOnce {
0% { transform: translateY(-4px); }
50% { transform: translateY(-8px); }
100% { transform: translateY(-4px); }
}

/* =====================
ホバー（浮く＋矢印変化）
===================== */

.entry_btn:hover {
animation: none;
transform: translateY(-6px) scale(1.05);
transition: background-color 0.3s ease;
background-color: #4c77c5;
}

.entry_btn:hover .arrow.white {
opacity: 0;
}

.entry_btn:hover .arrow.yellow {
opacity: 1;
transform: translate(-10%, -10%);

}


/* =====================
  クリック（押し込み）
===================== */
.entry_btn:active {
  animation: none; 
  transform: translateY(-2px) scale(0.95);
}

@media screen and (min-width: 769px) {
    .for-sp {
        display: none !important; 
    }
}

/* --- スマホ時の設定（画面を縮めた時） --- */
@media screen and (max-width: 768px) {
    /* 1. 元々右上にあった大きなボタンを隠す */
    .for-pc {
        display: none !important;
    }

    /* 2. メニュー内のボタンを表示し、デザインを調整 */
    .for-sp {
        display: block !important;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    /* メニュー内のボタン専用のサイズ調整 */
    .menu_btn_area .entry_btn {
        width: 80%;
        margin: 0 auto;
        padding: 15px;
        background-color: #1555a2;
        box-shadow: 0 4px 15px rgba(44, 90, 160, 0.3);
        /* border: 1px solid #fff; */
    }

    .menu_btn_area .entry_btn .jp {
        font-size: 14px;
    }

    .arrow.white,.arrow.arrow.yellow{
      display: none;
    }

    .entry_btn.is-scrolled {
box-shadow: 0 4px 15px rgba(44, 90, 160, 0.3);
animation:none;
/* animation: floatOnce 1.5s ease-in-out 3; */
}

}

/* =====================
  スマホ対応
===================== */
/* @media (max-width: 768px) {
  .entry_btn {
    width: 78px;
    height: 78px;
    top: 8px;
    right: 10px;
    text-align: center;
  }

  .entry_text .jp {
    font-size: 12px;
    margin-bottom: 4px; 
    margin-left: 3px;
  }

  .entry_text .en {
    font-size: 11px;
    margin-left: 3px;
  }

  .arrow {
    width: 32%;
    bottom: -5px;
    right: -5px;
  }

  .entry_text {
  line-height: 1.2;
}
} */


/* ボタン＜トップへ戻る＞ 基本スタイル */
.to_top {
  position: fixed;
  right: 20px;
  bottom: 50px;
  z-index: 998;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  
  /* 初期状態（JSが動く前） */
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.top-btn.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}


.to_top .arrow_2 {
  width: 1px;
  height: 50px;
  background-color: #1d3f73;
  position: relative;
  margin-bottom: 8px;
}

.to_top .arrow_2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 1px;
  background-color: #1d3f73;
  transform: rotate(45deg);
  transform-origin: left top;
}

.to_top .top_text {
  font-family: "Helvetica Neue", "Arial", "sans-serif";
  font-size: 13px;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
  color: #1d3f73;
}

@media screen and (max-width: 768px) {
.to_top  {
  right:13px;
    bottom: 20px;
}
.to_top .arrow_2 {
  height:30px;
}
.to_top .top_text{
  font-size: 11px;
}
}


.top_img_wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.top_img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(-5%);
  position: relative;
  z-index: 1;
}


.main_copy {
  writing-mode: vertical-rl; 
  font-size: 36px;
  letter-spacing: 0.3em;
  color: #fffefa;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
  line-height: 2.0;
  position: absolute;
  top: 10%;
  right: 10%;
  z-index: 10;
   font-family: "Klee One", cursive;
  font-weight: 600;
  font-style: normal;
  overflow: hidden;
  white-space: nowrap;
  height: 0;
  opacity: 0;
  animation: reveal_text 3s ease-out 0.5s forwards;
}

/* ★ アニメーションの中身：高さを0から100%へ伸ばす */
@keyframes reveal_text {
  0% {
    height: 0;
    opacity: 0;
  }
  20% {
    opacity: 1; /* 最初の1文字目が見える瞬間に不透明にする */
  }
  100% {
    height: 100%; /* 全部の文字が見える高さまで伸ばす */
    opacity: 1;
  }
}

.gradient_mask {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 35%; 
  
 
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.3) 50%,  
    rgba(255, 255, 255, 0.95) 80%, 
    rgba(255, 255, 255, 0.98) 90%, 
    rgba(255, 255, 255, 1) 100%
  );
  z-index: 2;
}

/* 文章エリアとの繋がり */
.message_container {
  background-color: #fff;
  padding: 70px 20px;
  text-align: center;
  margin-top: -1px; 
  position: relative;
  z-index: 3;
}

.fade_in_up_top{
    margin-top: 100px;
}


.fade_in_up {
  max-width: 800px;
  line-height: 2.5;
  font-size: 18px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 2s ease-out;
}
.fade_in_up.active {
  opacity: 1;
  transform: translateY(0);
}

.gradient_mask_2 {
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  
  z-index: 1;
  pointer-events: none;
}
/* .top_visual {
  background: url('../img/top_4.jpg') no-repeat center center;
  background-size: cover;
  width: 100%;
  max-height: 1200px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
} */

/* .top_words {
  width: 100%;
  max-width: 1200px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 120px;
  padding: 60px 0;
  margin-top: 700px;
} */

/* .main_copy {
  writing-mode: vertical-rl; 
  font-size: 36px;
  letter-spacing: 0.3em;
  color: #fffefa;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
  line-height: 2.0;
  position: absolute;
  top: 10%;
  right: 8%;
  z-index: 10;

   font-family: "Klee One", cursive;
  font-weight: 600;
  font-style: normal;
} */

/* .slide_in_left, .slide_in_right {
  background-color: rgba(253, 253, 254, 0.85);
  backdrop-filter: blur(8px);
  padding: 50px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: all 1.2s ease-out; 
  border-radius: 10px;
} */

/* .slide_in_left {
  align-self: flex-start;
  width: 60%; 
  border-radius: 0 20px 20px 0;
  text-align: left;
  padding: 50px 20px 50px 150px;
} */

/* .slide_in_right {
  align-self: flex-end;
  width: 70%;
  border-radius: 20px 0 0 20px;
  text-align: left;
  border-radius: 20px 0 0 20px; 
  text-align: right;
  padding: 50px 100px 50px 50px;
  font-size: 18px;


} */
/* 
.center_work_words {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 20px;
  color: #1555a2;
} */









/* .top_img{
  position: relative;
  text-align: center;
  margin-top: 0;
  padding-top: 0;
  line-height: 0;
  width: 100%;
}

.top_img img{
  width:100%;
  object-fit:cover;
  object-position:50% 18%;
  display: block;
} */

/* .top_img h2 {
  writing-mode: vertical-rl; 
  font-size: 36px;
  letter-spacing: 0.3em;
  color: #fffefa;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
  line-height: 2.0;
  position: absolute;
  top: 10%;
  right: 8%;
  z-index: 10;

   font-family: "Klee One", cursive;
  font-weight: 600;
  font-style: normal;
} */

/* PC（基本設定） */
/* .upper-row {
  display: flex;
  align-items: center; 
  justify-content: space-between;
  width: 100%;
  margin-top: 18px;
} */

/* .top_img h2{
  position: absolute;
  top: 40%;
  left:8%;
  transform: translateY(-50%);
  color:#fdfdfe;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  font-size: 30px;
  font-weight: 500;
  line-height: 3.0;
  text-align: left;
} */


/* .large-photo {
    flex: 0 0 40%; 
    max-width: 39%;
}

.large-photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

.text-block {
    flex: 0 0 60%; 
    max-width: 59%;
}

.slide_in_right{
  width:80%;
  margin-left:auto;
  margin-right: auto;
  line-height: 2.5;
  font-size: 18px;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

.lower-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  width:100%;
} */

/* .small-photo {
  flex: 0 0 24%;
  max-width: 25%;
  aspect-ratio: 1 / 1;
  overflow: hidden;    
  border-radius: 5px; 
}

.small-photo img {
  width: 100%;  
  height: 100%;   
  object-fit: cover; 
  display: block;
} */

/* スマホ対応（画面幅が狭い時） */

/* @media (max-width: 768px) {
  .upper-row {
    flex-direction: column;
  }
    .upper-row {
        flex-direction: column;
    }
    .large-photo, .text-block {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .text-block {
        margin-top: 20px;
    }
  .lower-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .small-photo {
    flex: 0 0 50%;
  }
} */

/* 左右で配置 */
/* 親要素 */
/* .top_words {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 20px 0;
  overflow: hidden; 
}

.slide_in_left,
.slide_in_right {
  opacity: 0; 
  background-color: #fdfdfe;
  transition: all 1.2s ease-out;
  box-sizing: border-box;
  visibility: hidden;
  border-radius: 10px;
} 

.slide_in_left {
  width: 60%;
  align-self: flex-start;
  transform: translateX(-100px); 
  border-radius: 0 20px 20px 0;
  padding: 50px 20px 50px 150px;
  box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.05);
} 

.slide_in_right {
  width: 70%;
  align-self: flex-end;
  transform: translateX(100px);
  border-radius: 20px 0 0 20px; 
  text-align: right;
  padding: 50px 100px 50px 50px;
  font-size: 18px;
  box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.05);
} 

h2.slide_in_left {
    line-height: 2.2; 
    letter-spacing: 0.05em;
    color: #333;
} 

p.slide_in_right {
    line-height: 2.5; 
    color: #444; ;          
}  */


/* 表示状態（activeクラス） */
/* .slide_in_left.active,
.slide_in_right.active {
  opacity: 1;
  transform: translateX(0);
  visibility: visible; 
}  */

/* スマホ対応 */
/* @media (max-width: 768px) { */
/* .slide_in_left {
    width: 90%;
    transform: translateX(-50px); 
    border-radius: 0 10px 10px 0;
    padding: 30px 20px 30px 50px;
    margin-top: 30px;
  }
.slide_in_right {
    width: 85% !important;
    transform: translateX(50px);
    border-radius: 10px 0 0 10px;
    padding: 30px 40px 30px 50px;
    margin-top: 20px;
  }
.slide_in_right.active, .slide_in_left.active{
    transform: translateX(0);
  } */

/* .top_words h2{
  font-size: 16px;
  margin-bottom: 20px;
} */

.top_words p{
    font-size: 14px;
    line-height: 2.2; 
    text-align: left;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
  }

  .top_img h1{
    font-size: 26px;
  }

.top_img_cal{
  width:100%;
}

.top_img_cal img{
  width:25%;
  max-width: 200px;
}

.work_words{
  max-width: 700px;
  margin-right:auto ;
  margin-left: auto;
  line-height: 2.0; 
  letter-spacing: 0.05em;  
  color: #444;
  text-align: justify;
  text-justify: inter-ideograph;
  margin-top: 50px;
  font-size: 16px;
}

.t_work_words{
  max-width: 700px;
  text-align: center;
  margin-right:auto ;
  margin-left: auto;
  line-height: 3.0;
  letter-spacing: 0.05em; 
  color: #444;
  text-align: justify; 
  text-justify: inter-ideograph;
  margin-top: 50px;
  font-size: 18px;
}

.center_work_words{
  text-align: left;
  margin-right:auto ;
  margin-left: auto;
  margin-bottom: 100px;
  margin-top: 100px;
  color: #444; 
  font-size: 24px;
  font-weight: 600;

  overflow: hidden;
  white-space: nowrap;
  width: 0;
  max-width: 700px;
  opacity: 0;
  transition: width 5s ease-out, opacity 1.5s;
  margin: 100px auto;
  letter-spacing: 0.2em;
}

.center_work_words.active {
  width: 100%;
  opacity: 1;
}

/* <br class="sp-only"> */
.sp-only{
  display: none;
}
/* .sp-only {
        display: block;
    } */


    
/* スマホ用（768px以下） */
@media (max-width: 768px) {

.top_img_wrap {
  width: 100%;
  height: 100dvh; 
  position: relative;
  overflow: hidden;
  
}

.top_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* .gradient_mask {
  display: block;
  position: absolute;
  bottom:0px;
  left: 0;
  width: 100%;
  height: 150px; 
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.01) 0%,
    rgba(255, 255, 255, 0.3) 60%,  
    rgba(255, 255, 255, 0.5) 70%, 
    rgba(255, 255, 255, 0.98) 80%, 
    rgba(255, 255, 255, 1) 100%
  ) !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.01) 0%,
    rgba(255, 255, 255, 0.3) 60%,  
    rgba(255, 255, 255, 0.5) 70%, 
    rgba(255, 255, 255, 0.98) 80%, 
    rgba(255, 255, 255, 1) 100%
  ) !important;
  z-index: 10;
  pointer-events: none;
}  */

.gradient_mask {
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 150px !important;
   background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%) !important;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 100%) !important;
    z-index: 9999 !important;
    pointer-events: none !important;
}

/* background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.01) 0%,
    rgba(255, 255, 255, 0.3) 60%,  
    rgba(255, 255, 255, 0.5) 70%, 
    rgba(255, 255, 255, 0.98) 80%, 
    rgba(255, 255, 255, 1) 100%
  ); */
/* 
background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1)) !important;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)) !important; */


/* 文章エリアとの繋がり */
.message_container {
  background-color: #fff;
  padding: 20px;
  text-align: center;
  position: relative;
  z-index: 3;
}

  .main_copy {
    position: absolute;
    left: 50%; 
    transform: translateX(-50%);
    right: auto;
    display: flex;
    flex-direction: column;
    font-size: 20px;
    position: absolute;
    z-index: 10;
}

/* 共通の初期状態（消えている状態） */
  .line1, .line2 {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1.0s ease, transform 1.0s ease;
    display: block; 

  }

  /* 2行目の位置をずらす */
  .line2 {
    margin-top: 5.0em;
    margin-right: -0.5em
  }

  /* 1. 【1行目】activeになったらすぐ出す */
  .main_copy.active .line1 {
    opacity: 1;
    transform: translateY(0);
  }

  /* 2. 【2行目】activeになったら「1秒遅れて」出す */
  .main_copy.active .line2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.0s; 
  }

.sp-only {
        display: block;}

  .center_work_words{
  text-align: center;
  margin-right:auto ;
  margin-left: auto;
  margin-bottom: 50px;
  margin-top: 50px;
  color: #444; 
  font-size: 18px;
  font-weight: 600;

  overflow: hidden;
  white-space: nowrap;
  width: 0;
  max-width: 500px;
  opacity: 0;
  transition: width 2s ease-out, opacity 1.5s;
  margin: 100px auto;
  letter-spacing: 0.2em;
  line-height: 2;
}

}
/* 写真スライド
.photo-carousel-container {
    width: 100vw;
    overflow: hidden;
    margin: 30px 0;
    background: #fff;
}

.photo-carousel-track {
    display: flex;
    /* 写真の幅250px × 12枚分 = 3000px */
    /* width: calc(250px * 12); 
    animation: infiniteScroll 45s linear infinite;
/* } */

/* .carousel-item {
    width: 250px;
    height: 250px;
    flex-shrink: 0;
    padding: 8px; 
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}  */

/* 右から左へ「6枚分」だけ動かして、0に戻すループ */
/* @keyframes infiniteScroll {
    0% {
        transform: translateX(0);
    }
    100% { */
        /* 1セット分（6枚 × 250px = 1500px）左へ移動 */
        /* transform: translateX(calc(250px * 6));
    }
} */

/* スマホ用（768px以下） */
/* @media (max-width: 768px) {
    .carousel-item {
        width: 160px;
        height: 160px;
    }
    .photo-carousel-track {
        width: calc(160px * 12);
    }
    @keyframes infiniteScroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-160px * 6)); }
    }
} */ 


.movie{
  position: relative;
  background-color: #f2f5f7;
  padding: 50px 0;
}

.movie h3{
  margin-top:0 ;
  padding-top: 200px;
}

.movie p{
  text-align: center;
  margin-bottom: 50px;
  color: #444; 
}

/*福利厚生 ＜魅力＞ */
.benefits{
  width: 90%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.benefits p{
  text-align: center; 
  margin-bottom: 50px;
}

.benefit-card{
  align-items: center;
   min-height: 290px;
     max-width: 800px;
      margin: 0 auto 30px auto;
       padding:10px 20px;
        background: #fdfdfe; 
        border-radius: 10px; 
        opacity: 0; 
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; 
         transform: translateX(-30px); 
         transition: opacity 0.8s ease, transform 0.8s ease;

}

.benefit-card:hover { 
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

.benefit-front {
  display: flex;
  position: relative;
}

/* 画像 */
/* .benefit-image {
  width: 40%;
} */

.benefit-image img{
  max-width: 220px;
  height: auto;
  width: 100%;
  margin:30px auto 20px 30px;
  order: 2 !important;
}

.bnft_right img{
  max-width: 220px;
  height: auto;
  width: 100%;
  margin:40px 35px 20px auto;
  order: 2 !important;
}

/* テキスト（タイトル含む） */
.benefit-text{
  position: relative;
}

.hidden-content{
  max-width: 500px;
  height: auto;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 50px;
}

.benefit-text h4{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  font-size: 20px;
  order: 1 !important;
}

.hidden-content p{
  text-align: left;
  margin-bottom: 25px;
}

.txt_2{
  display: block;
}


.benefit-card.reverse .benefit-front {
  flex-direction: row-reverse;
}


/* ボタンのデザイン */
.btn{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.btn_2 {
  display: inline-block;
  padding: 10px 20px;
  background-color: #1555a2; 
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(44, 90, 160, 0.3);
}

.btn_2:hover {
  background-color:#4c77c5;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 90, 160, 0.4);
}

.benefit-card.reverse {
  flex-direction: row-reverse;
  transform: translateX(30px);
}

.benefit-card.show {
  opacity: 1;
  transform: translateX(0);
}

.modal-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(21, 85, 162, 0.2); 
    z-index: 99999;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
.hidden-content {
    display: none;
}

/* 1. 親要素：2カラムの土台を確定 */
  .benefits-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 11px;
  }

  .benefit-card {
    width: 48%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    margin-bottom: 0;
    position: relative;
  }

  .benefit-card::after {
    content: "+";
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 20px;
    height: 20px;
    color: #1555a2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.benefit-card:hover::after {
    color: #fff;
    transform: rotate(90deg); 
}

  /* 3. 中身の配置：タイトル一番上 */
  .benefit-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  /* タイトルを1番目、画像を2番目に固定 */
  .benefit-front h4 {
    order: 1 !important;
    font-size: clamp(10px, 3.5vw, 16px);
    margin: 10px 0 0 0 !important;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
    line-height: 1.2;
  }

  .benefit-image {
    order: 2 !important;
    width: 100% !important;
    margin: 0 auto;
    display: flex !important;
    justify-content: center !important;
  }

  .benefit-image img { 
    width:60%;
    max-width: 150px ;
    margin: 10px auto;
  }

/* --- 「広がるパネル」の設定 --- */

/* 2. モーダルの内側（白パネル部分） */
/* .modal-content {
    background: rgba(255, 255, 255, 0.95);
    width: 90%;
    aspect-ratio: 1 / 1;
    max-height: 85vh;
    max-width: 450px;
    padding: 40px 20px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
} */

.modal-content {
    background: rgba(255, 255, 255, 0.95);
    width: 90%;
    min-height: 65vw; 
    max-height: 80vh;
    max-width: 450px;
    padding: 40px 25px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

/* 閉じるボタン */
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    z-index: 10005 !important;
    color:rgba(255, 255, 255, 0.5);
    padding: 10px; 
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#modal-body p {
    padding:0 15px 25px 20px;
    line-height: 1.8;
    width: fit-content; 
    margin-left: auto;   
    margin-right: auto;  
    text-align: left;
    margin: 0;
    font-size: clamp(13px, 3.5vw, 16px);
}

#modal-body h4{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: clamp(20px, 4vw, 24px) !important; 
}

.benefit-card, .benefit-card.reverse {
    min-height: 0 !important; 
}

.benefit-text{
  overflow-y: auto;
}
}

/* .benefit-overlay {
  position: absolute;
  left: 40%;
  top: 60px;
  width: 60%;
  text-align: left;
} */

  /* 2. カード：2カラムの幅と正方形を維持 */
  /* .benefit-card, 
  .benefit-card.reverse {
    position: relative !important;
    width: 48% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #eee;
    border-radius: 10px;
  } */

  /* .modal-container {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }

  .modal-content {
    background: #fff;
    width: 90%;
    max-height: 80%;
    padding: 30px 20px;
    border-radius: 15px;
    position: relative;
    overflow-y: auto;
  } */

/* モーダル内の文字デザイン */
/* #modal-body h3 {
    color: #1555a2;
    font-size: 1.2rem;
    margin-bottom: 20px;
    padding-right: 30px;
/* }  */

  /* 4. 青い幕：はみ出し防止 */
  /* .benefit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(101%);
    z-index: 2;
     background: rgba(49, 111, 191, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
    transform: translateY(101%); 
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
  } */

  /* カードを触った時（またはタップした時）、幕を出す */
  /* .benefit-card:active .benefit-overlay,
  .benefit-card:hover .benefit-overlay {
    transform: translateY(0);
  } */

  /* 幕の中の文字サイズ */
  /* .benefit-overlay p {
    font-size: clamp(10px, 3.5vw, 12px);
    line-height: 1.4;
    margin-bottom: 10px;
    color: #fff;
    text-align: left;
    text-align: justify;
  } */
  /* .btn_2 { font-size: 10px; padding: 5px 10px; } */



/* 社員の声 */
/* PCレイアウト */
.voice{
  width: 90%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.voice_flex_container {
    display: flex;
    flex-direction: row; 
    max-width: 900px;
    margin: 40px auto;
    gap: 40px;
    align-items: stretch; 
}

/* 左側（写真） */
.voice_left_photo {
    flex: 0 0 350px;
    text-align: center;
}

.syain img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 8px;
}

/* 右側（文章 ＋ ボタン） */
.voice_right_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around; 
    padding: 10px 0; 
}

.work_words {
    text-align: center;
    margin-top: 0px; 
}

.voice_btn_block {
    text-align: center;
}

.syain {
    text-align: center;
    width: 100%;
}

.syain img {
    max-width: 300px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: inline-block;
}


.syain p{
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
}

/* --- スマホ・縦並び（文章 → 写真 → ボタン ＆ 中央揃え） --- */
@media (max-width: 768px) {
    .voice_flex_container {
        flex-direction: column; 
        align-items: center; 
        gap: 20px;
    }

    /* 1. 文章:一番上 */
    .voice_text_block {
        order: 1;
        width: 100%;
    }

    /* 2. 写真ブロック:真ん中 */
    .voice_left_photo {
        order: 2;
        width: 100%;
    }

    /* 3. ボタン:一番下 */
    .voice_btn_block {
        order: 3;
        width: 100%;
        margin-top: 0;
    }

    .voice_right_content {
        display: contents; 
    }

}

/* 社員インタビュー */
.introduction {
  max-width: 900px; 
  margin: 0 auto;
}

/* --- プロフィールエリア --- */
.interview_profile {
  display: flex;
  flex-direction: row;
  justify-content: center; 
  align-items: center;
  gap: 50px; 
  margin-bottom: 100px;
    background-color: #fdfdfe;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
  padding:50px 0;
  border: 1px solid #ddd;
}

.profile_img{
  width:35%;
  height: auto;
}

.profile_img img{
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 10px 25px rgba(74, 111, 165, 0.1); 
  transition: transform 0.3s ease;
}

.profile_words{
  width: 45%;
  text-align: center;
}

.profile_words h4{
  font-size: 20px;
  color: #1555a2;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 2.0;

}

.answer h5{
  font-size: 16px;
  margin-bottom: 0;
  margin-top: 0;
}

.answer p { 
  font-size: 0.95rem;
  line-height: 1.8;
  text-align: justify;
    text-align-last: left;
    text-justify: inter-character;
    word-break: break-all;}

.semaku{
  margin-top: 5px;
}

.interview_content{
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

/* --- 親要素：Flexboxを解除、普通のブロックに戻す --- */
.interview_content_1, 
.interview_content_2 {
  display: block;
  width: 100%;
  overflow: hidden; 
  margin-bottom: 10px;
}

/* --- 文章エリア：幅100%、写真の横も下も通す --- */
.interview_left,
.interview_right {
  display: block;      
  width: 100%;         
}

/* --- 画像エリア：右側に浮かせ、周りに隙間を作る --- */
/* 共通：画像自体の設定 */
.inline_img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 10px 25px rgba(74, 111, 165, 0.1); 
  transition: transform 0.3s ease;
  
}

.img_left,
.img_right {
  width: 40%;          
  margin-bottom: 15px; 
}

.img_right {
  float: right;        
  width: 40%;          
  margin-left: 30px;  
  margin-top: 50px;
}

.img_left {
  float: left;
  width: 40%;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-top: 60px;
}


/* 質問文のデザイン */
.question {
  position: relative;
  display: table;
  color: #1555a2;
  font-size: 18px;
  padding-left: 15px;
  margin-top: 50px;
  margin-bottom: 20px;
  line-height: 1.4;
}

/* 線の設定 */
.question::before {
  content: "";
  position: absolute;
  left: 0; 
  top: 0.2em;
  bottom: 0.2em;
  width: 5px; 
  background-color: #1555a2;
  border-radius: 2px;
}

/* --- スマホ用の解除設定 --- */
@media (max-width: 768px) {

.interview_profile,
.interview_content  {
    display: flex;
    flex-direction: column-reverse; 
    align-items: center;
  }

  .interview_profile{
margin-bottom: 20px;
}

.interview_left {
    display: flex;
    flex-direction: column-reverse; 
    width: 100%;
    align-items: center;
  }

.profile_img,
.profile_words,
  .img_left,
  .img_right
  {
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

.profile_img img,
.profile_words img,
  .img_left img,
  .img_right img
  {
    max-width: 70%;
    height: auto;
  }

  .img_right{
    margin-top:10px;
    margin-bottom: 0;
  }

.img_left{
  margin-top:10px;
  margin-bottom: 50px;
}

 .interview_item {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .semaku{
    margin-bottom: 0;
  }

.profile_words h4
{
  font-size: 16px;
}

.question{
  font-size: 14px;
  margin-top: 30px;
}

.answer h5{
  font-size: 14px;
  margin-top: 10px;
}
.answer p{
  font-size: 13px;
}

}

/* ＜採用メッセージ＞ */
/* --- 採用メッセージ：スライドイン --- */
.message {
  opacity: 0;
  background-color: #fdfdfe;
  box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.05); 
  transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
  width: 70%;
  margin: 80px 0 50px auto;
  transform: translateX(100px);
  border-radius: 10px 0 0 10px;
  padding: 30px 120px 30px 100px;
  margin-bottom: 50px;
}

/* ★ JSで .active がついた瞬間に定位置に戻る */
.message.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* 中のテキスト：右寄せのデザインに合わせる */
.message h4, .message p {
  text-align: left;
}

.message-header {
  position:relative; 
  padding-top: 20px;
  text-align: left;
}

.en_message {
  position: absolute;
  top: 0;
  font-size: 50px;
  color: rgba(21, 85, 162,0.8);
  font-family: "Caveat",cursive;
  transform: rotate(-3deg);
  z-index: 10;
}

.jp_message{
  display: block;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: #ababab;
  margin-left: 25px;
  margin-top: 42px;
}

.int_jp_messa
{
  margin-left: 60px;
  margin-top: 48px;
}

.message h4 {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #333;
}

.message p {
  font-size: 16px;
  line-height: 2.2;
  color: #555;
  text-align: justify;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .message {
    width: 90% !important;
    transform: translateX(50px);
    border-radius: 10px 0 0 10px;
    padding: 40px 44px;
    margin-top: 30px;
  }
  .message.active {
    transform: translateX(0);
  }

.en_message {
  font-size: 42px;
}

.jp_message{
  font-size: 11px;
  margin-left: 19px;
  margin-top: 33px;
}

.message h4 {
  font-size: 13px;
  margin-bottom: 15px;
  line-height: 2;
}

  .message p{
    font-size: 12px;
  }

.int_jp_messa{
  margin-left: 40px;
  margin-top: 20px;
  font-size:9px;

}

.int_en_messa{
  font-size: 30px;
  margin-bottom: 0;
}

.int h4{
  font-size: 13px;
  margin-top: 20px;
}
}



footer {
 background: #91addb;
  padding: 80px 10px 30px 10px;
  margin-top: 200px;
}

.menu_home_link_2 {
  width: 100%;
  display: flex;
  justify-content: center; 
}

.menu_home_link_2 a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
}

.footer-column {
  width: 25%;
  text-align: center;
  position: relative;
}

.footer-column:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 53%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.3);
}

.footer-column:last-child {
  border-right: none; 
}

.footer-column:last-child {
  border-right: none;
}

.footer-title {
  font-size: 20px;
  margin-bottom: 45px;
  font-weight: 600;
}

.footer-list {
  list-style: none;
  padding:0;
}

.footer-list li {
  margin-bottom: 20px;
  text-decoration: none;
}

.footer-title,.footer-list a{
  color: #fdfdfe;
}

.footer-list a {
  text-decoration: none;
  transition: 0.3s;
}

.footer-list a:hover {
  color: #ffcc00;
}

.footer-list a:active {
  color: #ffc800;
}


.footer-bottom {
  text-align: center;
  margin-top: 60px;
  font-size: 14px;
}

footer p.copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding:0;
    letter-spacing: 0.05em;
}

.adrs_tel{
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  margin-bottom: 0;
  margin-top: 35px;
}

@media (max-width: 768px) {
  footer {
    padding: 40px 20px 10px 20px;
    margin-top: 80px;
  }

  .footer-inner {
    flex-wrap: wrap;
  }

  .footer-column:not(:last-child)::after {
    content: none;
  }
  .footer-column {
    width: 50%;
    padding: 20px 0;
  }
  
  .footer-bottom {
    margin-top: 10px;
  }

  .footer-title{
    font-size: 18px;
    margin: 0 0 20px 0;
  }

  .footer-list li{
    margin-bottom: 10px;
  }

  .s {
  font-size: 13px;
}
}

/* 仕事紹介＜YouTube＞ */
.movie_words{
  width:90%;
  margin-left: auto;
  margin-right: auto;
}

.movie iframe {
  width: 100%;
  max-width: 800px;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
}

.movie{
  text-align: center;
  padding: 0 20px;
}


/* ＜募集要項＞ */
.requirements{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width:90%;
}

.requirements_2{
  width: 100%;
  max-width: 900px;
  text-align: center;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fdfdfe;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid #ddd;
}

.requirements_table{
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  padding:50px 20px;
  text-align: left;
  border-collapse: collapse;
}

.requirements th{
  width: 25%;
  color: #2c5aa0;
  font-weight: bold;
  vertical-align:baseline;
  border-bottom: 1px solid #ddd;
  text-align: center;
  padding-top:20px;
  font-size: 17px;
}


/* トップページの募集要項 */
.r_t_color{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

.r_t_color table{
  width: 100%;
  border-collapse: collapse;
  border: none;
  margin: 0 auto;
}

.r_t_color th,.r_t_color td{
  padding: 25px;
  line-height: 1.8;
  border-bottom: 1px solid #ddd;
  border-right: none;
}

.r_t_color tr:last-child th,
.r_t_color tr:last-child td {
  border-bottom: none;
}

.table_last a {
    color: #4791ff;
    text-decoration: none;
    transition: 0.3s;
}

.table_last a:hover {
    text-decoration: underline; 
    color: #3c7bdb;
}

.table_last i {
    font-size: 0.8em;
    margin-left: 5px;
}

.r_t_color th{
  background-color: #e7f0ff;
  vertical-align:middle;

}

.r_t_color td{
  background-color:  #fdfdfe;
}

.requirements td{
  padding:20px;
  line-height: 1.8;
  border-bottom: 1px solid #ddd;
}

.bold_div{
  margin-bottom: 10px;
}

.bold{
  font-weight: bold;
}

.small{
  font-size: 15px;
  color:#444;
}

.requirements_table tr:last-child th,
.requirements_table tr:last-child td {
  border-bottom: none;
}

.btn_3 {
  display: inline-block;
  padding: 15px 45px;
  background-color: #1555a2;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  transition: 0.3s;
  margin: 40px 0;
  box-shadow: 0 4px 15px rgba(44, 90, 160, 0.3); 
}

.btn_3:hover {
  background-color:#4c77c5;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 90, 160, 0.4);
}

.voice_btn_block .btn_3{
  margin-top: 0px;
}

.qa_btn{
  margin-top: 80px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.qa_btn p{
  margin-bottom: 0;
}

.btn_cntr{
  margin-top: 0;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* スマホ対応：縦並びに変換 */
@media (max-width: 768px) {
  .requirements_table th, 
  .requirements_table td {
    display: block;
    width: 100%;
    text-align: left;
  }
  .requirements_table th {
    padding: 20px 20px 5px 20px;
    border-bottom: none;
  }
  .requirements_table td{
    padding-top: 5px;
  }

  .requirements th{
    font-size: 15px;
  }
  .requirements td{
    font-size: 14px;
  }
  .small{
    font-size: 13px;
  }

  .btn_3 {
    padding: 10px 25px;
    font-size: 0.9rem;
}
}

/* 画面幅が768px以下（スマホ・タブレット）になった時の設定 */
@media screen and (max-width: 768px) {
  
  .r_t_color th {
    padding: 10px 15px;
  }

  .r_t_color td {
    padding: 15px;
  }
}

/* ＜採用の流れ＞ */
.r_process_list{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding:0;
}

.r_process_item {
    position: relative;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    padding: 40px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.r_process_item p{
  font-size: 18px;
  letter-spacing: 0.2em;
   color: #444; 
}

/* 数字の中央背景 */
.r_process_num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 140px;
    font-weight: 400;
    font-family: "Helvetica Neue", sans-serif;
    color: #1555a2;
    opacity: 0.07;
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}

.e_text{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.r_entry_btn {
    display: inline-block;
    color: #1555a2;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.2em;
    position: relative;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* 下線の設定 */
.r_entry_btn::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 130%;
    transform: translateX(-50%) scaleX(0);
    height: 1px;
    background-color: rgba(21, 85, 162, 0.4);
    transform-origin: center;
}

/* スクロールで見えた時のアニメーション発動 */
.js-scroll-trigger.is-active .r_entry_btn::after {
    animation: lineOverExtend 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes lineOverExtend {
    0% {
        width: 100%;
        transform: translateX(-50%) scaleX(0);
        opacity: 0;
    }
    50% {
        width: 200%; 
        transform: translateX(-50%) scaleX(1);
        opacity: 1.5;
    }
    100% {
        width: 130%;
        transform: translateX(-50%) scaleX(1);
        opacity: 1.5;
    }
}

/* 文字自体のホバー変化 */
.r_entry_btn::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: rgba(21, 85, 162, 1);
    transform: translateX(-50%);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.r_entry_btn:hover {
    transform: scale(1.1);
    color: #003366;
    /* transition: all 0.3s ease; */
}

/* ホバー時、また少しだけ長くして「反応」 */
.r_entry_btn:hover::after {
  opacity: 0 !important;
    width: 0;
    transition: opacity 0.2s ease, width 0.2s ease;
}

/* 新しい線をスッと出す */
.r_entry_btn:hover::before {
    width: 160%;
}

.r_process_arrow {
  width: 0;
  height: 0;
  margin: 20px auto;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid #1555a2;
}

@media (max-width: 768px){
  .r_process_num{
    font-size: 100px;
  }
  .r_process_item{
    max-width: 500px;
    padding: 20px 10px;
  }
  .r_process_item p{
    font-size: 15px;
  }
}

/* ＜求める人物像＞ */
/* グリッドレイアウト */
.person_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  list-style: none;
  padding: 0;
  max-width: 900px;
  margin: 0 auto;
}

/* カードのデザイン */
.person_card {
  background: #fff;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-top: 3px solid #1555a2;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 英語タイトル */
.eng_title {
  display: block;
  font-size: 12px;
  font-family: "Helvetica Neue", sans-serif;
  color: #1555a2;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.person_card h4 {
  font-size: 20px;
  margin: 0 0 10px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.person_card h4 .not_bold{
  font-weight:100;
  color: #1555a2;
  opacity: 0.3;
}

.person_card h5 {
  font-size: 16px;
  color: #1555a2;
  margin-bottom: 15px;
}

.person_card p {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  text-align: justify;
}

/* --- JavaScriptでアニメーションさせるためのクラス --- */
.js-scroll-trigger.is-animated .person_card {
  opacity: 1;
  transform: translateY(0);
}

/* カードを1つずつ時間差で出す*/
.js-scroll-trigger.is-animated .person_card:nth-child(1) { transition-delay: 0.1s; }
.js-scroll-trigger.is-animated .person_card:nth-child(2) { transition-delay: 0.3s; }
.js-scroll-trigger.is-animated .person_card:nth-child(3) { transition-delay: 0.5s; }
.js-scroll-trigger.is-animated .person_card:nth-child(4) { transition-delay: 0.7s; }

/* スマホ対応 */
@media (max-width: 768px) {
  .person_grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.person_right{ 
  text-align: right; 
  max-width: 900px; 
  margin: 40px auto 100px auto;    
  padding: 0;
}

/* 動きの要素 */
/* 最初は透明で、少し移動した状態にしておく */
.fade_item,
.person_right {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 採用の流れ：下から上へ */
.fade_item {
  transform: translateY(40px);
}

/* 求める人物像：右から左へ */
.person_right {
  transform: translateX(60px); 
}

.js-scroll-trigger.is-animated {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

/* ＝＝＝＝＝＝
/* 会社のこと */
/* ＝＝＝＝＝＝ 
/* 代表挨拶 */
.president_message_2{
  max-width: 900px;
  width:100%;
  background-color: #fdfdfe;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  padding:40px 90px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
   border: 1px solid #ddd;
}

/* 写真＝＝＝＝＝＝ */
.president_profile {
    float: left;
    width: 250px;
    margin-right: 30px; 
    margin-top: 25px; 
    margin-bottom: 15px;
    text-align: center;
}

.president_img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 8px;
}

.sml_name{
    font-size: 14px;
    color: #333;
    margin: 0;
}

/* 回り込みを解除する設定（崩れ防止） */
.message_content::after {
    content: "";
    display: block;
    clear: both;
}
/* ======== */

.message_words,.message_words_2,.message_words_3{
  margin-right:auto;
  margin-left: auto;
  font-size: 1rem;
  line-height: 2.2;
  letter-spacing: 0.05em;
  color: #444;
  text-align: justify;
  text-justify: inter-ideograph;
  font-size: 16px;
}

.message_words{
  margin-bottom: 40px;
}

.message_words_2{
  margin-top: 50px;
}

.message_words_3{
  margin-top: 10px;
  margin-bottom: 50px;
}

.president_message h4{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
}

.important{
  margin: 0;
  letter-spacing: 0.5em;
  font-weight: 400;
}

.important_2{
  font-size: 20px;
  margin-top: 10px;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: #1555a2;
}

.idea_container h4 {
    width: auto;
    margin: 10px 0 0 0;
    padding: 0 ; 
    margin-left: -15px
}

.idea_container {
    display: flex;
    justify-content: center;
}

.mgnbtm{
  margin-bottom:40px;
}

.js-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.0s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* スクロールして画面に入った時の状態 */
.js-fade.is-active {
    opacity: 1;
    transform: translateY(0);
}

.center{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.center_2{
  display: inline-block;
  text-align: left;
  margin-top: 0;
  line-height: 3.0;
}

.right{
  display: block;
  text-align: right;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
}

.president_message_2 .right {
  margin-bottom: 20px;
}

.syakun_list{
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-weight: bold;
}

@media (max-width: 768px) {
  .president_profile {
    float: none !important;
    width: 100% !important;
    margin: 0 auto 20px !important;
    text-align: center;
  }
    .president_img {
        float: none;
        display: block;
        margin: 0 auto 10px;
        width: 80%;
        max-width: 200px;
    }
    .message_words {
    clear: both;
    font-size: 14px;               
  }
  .message_words_2{
    font-size: 14px;
  }
    .president_message_2{
        padding:30px 30px;
}
.sml_name{
  font-size: 12px;
  margin-top: 0;
}


    .mission_section {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

  .idea_container {
        display: block !important;
        margin-bottom: 30px !important;     
    }
    
    .important_2 {
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
        white-space: nowrap;
        font-size: 18px;
    }
    
    .important {
        text-align: left !important;
        margin-bottom: 10px;
        padding-left: 10px;
        font-size: 13px;
        font-weight: bold;
    }
   .mgntp{
    margin-top: 35px;
   }
   .center_2{
  line-height: 2.0;
}

/* .center {
        text-align: center !important;
        width: 100% !important;
    } */

    .center, .center_2 {
    display: block !important;
    text-align: left !important;
    width: 100% !important;
  }

.syakun_list {
    width: 100% !important;
    text-align: left !important;
    padding-left: 10px !important;
    display: block !important;
  }

  .syakun_list li {
    display: block !important;
    text-align: left !important;
    margin-bottom: 15px !important;
    line-height: 1.6 !important;
  }

    .syakun_list li span {
        display: inline !important;
        padding: 0 !important;
        margin: 0 !important; 
        white-space: normal !important;
    }

    .president_message_2 .right{
      margin-top: 20px;
      margin-bottom: 5px;
      font-size: 14px;
    }
    .message_words_3{
      margin-top: 0;
      margin-bottom:25px ;
      font-size: 14px;
    }
  }


/* 会社概要 */
.profile{
  background-color: #fdfdfe;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
}
.profile_table{
  width: 100%;
  margin-left:auto;
  margin-right:auto;
  border-collapse: collapse;
  border: none;
  margin: 0 auto;
}

.profile_table th,.profile_table td{
  padding: 30px;
  line-height: 1.8;
  border-bottom: 1px solid #ddd;
  border-right: none;
}

.profile_table th{
  text-align: center;
  background-color: #e7f0ff;
  vertical-align: middle;
  font-weight: bold;
  color: #2c5aa0;
  border-right: 1px solid #eee;
  letter-spacing: 0.1em;
}

.profile_table td{
  width:65%;
  background-color:  #fdfdfe;
  line-height: 1.8;
  padding:20px 40px;
  vertical-align: middle;
}
.profile_table tr:last-child th,
.profile_table tr:last-child td {
  border-bottom: none;
}


/* -----------------------------------------
   スマホ対応（レスポンシブ）
   ----------------------------------------- */
@media screen and (max-width: 768px) {
  .profile {
    padding: 30px 20px;
  }

  .profile_table th, 
  .profile_table td {
    display: block;
    width: 100%;
    padding: 10px 0;
  }

  .profile_table th {
    padding-top: 20px;
    border-bottom: none;
    font-size: 14px;
    color: #2c5aa0;
  }

  .profile_table td {
    padding-bottom: 20px;
  }

  .profile_table th {
    text-align: left;
    background-color: transparent;
    border-right: none;
  }

}

.access{
  max-width: 700px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.navi{
  margin-top: 20px;
}

.navi_2{
  display: block;
  text-align: left;
  margin-bottom: 100px;
}

@media screen and (max-width: 768px) {
  .access {
    width: 90%;
    margin: 0 auto;
  }

  .access iframe {
    width: 100% !important;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ＝＝＝＝＝＝＝
入社後のこと
＝＝＝＝＝＝＝ */
/* 入社後の流れ */
.flow_container{
  background:#fdfdfe;
  max-width: 1020px;
  margin: 0 auto;
  padding:60px;
  border-radius: 10px;
  border:1px solid #ddd;
  line-height:1.8;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.flow{
  display: flex;
  gap: 0;
  justify-content: center;
}

.flow_section_words{
  text-align: center;
  margin-bottom: 50px;
}

.process h4,
.process p{
  text-align: center;
  padding-bottom: 20px;
}

.process h4{
  padding: 10px;
  font-size: 24px;
  margin: 0;
    letter-spacing: 0.4em;
}

.process p {
  font-feature-settings: "palt" !important; 
  letter-spacing: 0.05em;
  text-align: center;
  font-weight: bold;
}

.process {
  margin-right: -32px;
  position: relative;
  z-index: 1;
  color:#ffffff;
  padding-top:10px;
  border-radius:6px;
  }

.step{
  flex: 1;
  max-width: 300px;
}

/* 1番目の矢印が一番下、3番目が一番上になるように重なりを調整 */
.step:nth-child(1) { z-index: 3; }
.step:nth-child(2) { z-index: 2; }
.step:nth-child(3) { z-index: 1; }

.box {
  border: none;
  box-shadow: none;
  background: transparent;
  margin-top: 40px;
  padding: 0 26px;
  border-right: 1px solid #ddd;
  line-height: 1.6;
  text-align: justify;
  text-justify: inter-ideograph;
}

.step:last-child .box {
  border-right: none; 
}

/* 1つ目（左が直線） */

.process_1{
background-color: #a9bedd;
  background:#98b4e7;
clip-path: polygon(
0% 0%,
90% 0%,
100% 50%,
90% 100%,
0% 100%
);
}

/* 2つ目 */

.process_2{
background-color:#7ca1ce;
  background:#6794e1;
clip-path: polygon(
0% 0%,
90% 0%,
100% 50%,
90% 100%,
0% 100%,
10% 50%
);
}

/* 3つ目 */

.process_3{
  background-color: #507bbf;
background:#386bc2;
clip-path: polygon(
0% 0%,
90% 0%,
100% 50%,
90% 100%,
0% 100%,
10% 50%
);
}

/* 1. アニメーションの動き（左からスッと出てくる） */
@keyframes slideRightIn {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 2. 矢印共通：アニメーションをセットし、最初は消しておく */
.js-slide-right {
  opacity: 0; 
  /* 1.2sかけて動く */
  animation: slideRightIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 3. 各ステップの遅延 */
.process_1 { animation-delay: 0.2s; }
.process_2 { animation-delay: 0.5s; }
.process_3 { animation-delay: 0.8s; }


@media (max-width: 768px) {
  .flow {
    display: block;
  }
.flow_container
{
  padding: 30px;
}
  .step {
    max-width: 100%;
    margin-bottom: 20px;
  }

  /* 矢印を「下向き」に変形 */
  .process {
    margin-right: 0 !important;
    margin-bottom: -15px;
    
    /* 下が尖った形に変更 */
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%) !important;
    padding-bottom: 30px !important;
  }

.process h4,
.process p{
  text-align: center;
  padding-bottom: 10px;
  margin: 0;
}

.process h4{
  font-size: 20px;
}

.box {
  border-right: none;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

}



/* 等級 */
.grade-section{
padding:0 20px;
text-align:center;
}

/* .grade-section p{
margin-bottom:5px;
} */

/* グラフ */

.graph{
flex:1;
display:flex;
max-width:1020px;
height:250px;
margin: auto;
margin-top:200px;
}

.graph-column{
flex:1;
display:flex;
align-items:flex-end;
justify-content:center;
}

.graph-container {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
}

/* イラストの初期位置 */
.runner-icon {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    z-index: 5;
    opacity: 0;
    transform: translateX(-20px);
    transition: 
        opacity 0.8s ease, 
        left 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95),
        bottom 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* JSで active が付いたとき */
.runner-icon.active {
  opacity: 1;
  left: calc(80% + (20% / 2) - (100px / 2));
  bottom: 200px;
  transform: translateX(0) rotate(-5deg);
}

.runner-icon img{
  max-width: 200px;
  height: auto;
}

.bar{
width:80%;
margin:auto;
margin-bottom: 0;
height:0;
transition:1s ease;
border-radius:4px 4px 0 0;
}

.bar1 {
    background: linear-gradient(to bottom, #c5cedd, #aeb8c9);
}
.bar2 {
    background: linear-gradient(to bottom, #a4b4cf, #8fa2c1);
}
.bar3 {
    background: linear-gradient(to bottom, #869cc5, #6f89b5);
}
.bar4 {
    background: linear-gradient(to bottom, #5d81be, #4369a8);
}
.bar5 {
    background: linear-gradient(to bottom, #2a56ad, #163f8f);
}

.bar1.active{height:80px;}
.bar2.active{height:120px;}
.bar3.active{height:160px;}
.bar4.active{height:210px;}
.bar5.active{height:250px;}

/* 下の説明 */

.grade-text{
display:flex;
max-width:980px;
margin:auto;
border:1px solid #ddd;
box-sizing:border-box;
}

.grade-text_cld{
border-right: 1px solid #ddd; 
}

.grade-text_cld:last-child {
    border-right: none;
}

.grade-text div {
    flex: 1;
    background: #fdfdfe;
    padding: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}

.grade-text h4 {
    font-size: 14px;
    letter-spacing: 0.3em;
    display: inline-block;
    position: relative;
    
    /* 他の要素との距離（外側） */
    margin-top: 10px;
    margin-bottom: 10px;
    
    /* 文字と線の間の距離（内側） */
    padding-bottom: 5px;
        color: #1555a2;   
}

.grade-text h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    
    /* 線のサイズ設定 */
    width: 70px;
    height: 1px;
   background: rgba(21, 85, 162, 0.3);
}

.title{
  font-weight: bold;
  margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3em;
    margin-top: 0;


}

.sml_year{
  margin-top: 5px;
  font-size: 12px;
  min-height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.stmi{
  text-align: justify;
  text-justify: inter-ideograph;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  padding-left: 5px;
  padding-right: 5px;
  line-height: 1.6;
}

.kist {
    display: block;
}


.graph-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/yaji.png"); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 2.0s ease-out, opacity 0.5s;
    pointer-events: none;
}

/* 表示時 */
.graph-container.active::after {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
}

.tap-guide {
    display: none;
}


@media (max-width: 900px) {
    .runner-icon.active {
        bottom: 200px; 
        left: calc(80% + 10% - 50px);
        width: 80px;
    }

    .graph{
flex:1;
display:flex;
max-width:900px;
height:240px;
margin: auto;
margin-top:100px;
}

.bar1.active { height: 80px; }
    .bar2.active { height: 120px; }
    .bar3.active { height: 160px; }
    .bar4.active { height: 200px; }
    .bar5.active { height: 240px; }

    .runner-icon img{
    max-width: 150px;
    height: auto;
}



/* --- 等級項目のスタイル調整 --- */
.grade-text div {
  height: auto; 
  min-height: 55px;
    background: #fdfdfe;
    padding: 5px 7px;
    border-left: 1px solid #ccc; 
    border-right: none;
    position: relative; 
    cursor: pointer; 
    transition: background 0.3s;
}
.grade-text div:first-child {
    border-left: none;
}

/* ホバー時に背景を変えて「反応」を出す */
.grade-text div:hover {
    background: #f0f4f9;
}

.grade-text h4{
  font-size: 14px;
  padding:10px 0;
  color:#444;
  position: relative;
  width: 100%;
}

.tap-guide {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 10px;
        text-align: center;
        font-size: 10px;
        color: #1555a2;
        margin-top: 20px;
        opacity: 0.8;
    }

.tap-guide::before {
    content: "▴";
    font-size: 13px;
    color: rgba(21, 85, 162, 0.5);
}

.tap-guide {
    animation: floatGuide 3s ease-in-out infinite;
}

@keyframes floatGuide {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 0.8; transform: translateY(-3px); }
}

/* --- 文章（pタグ）を隠す設定 --- */
.grade-text div .kist {
   position: absolute !important; 
        top: 100%;
        left: 0;
        right:auto;
        width: 200%;
        
        /* 初期状態は非表示 */
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 20;
    background: #fff;
    padding: 15px;
    border: 1px solid #1555a2;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.grade-text div:nth-child(n+4) .kist {
        left: auto;
        right: 0;
    }

/* 中身のpタグは普通の表示に戻す（absoluteを解除） */
    .grade-text div p {
        opacity: 1;
        visibility: visible;
        position: static;
        transform: none;
        width: auto;
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
        text-align: left;
    }

.bar {
    transition: all 0.3s ease;
}

/* --- グラフの棒が反応した時 --- */
.bar.is-hovered {
  transform: scaleY(1.1) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25) !important;
}

/* --- 下の等級（文字）が連動して反応する設定 --- */
.grade-text div.is-active {
  background-color: #fff8b7 !important;
  transition: background 0.3s ease;
}

.grade-text div.is-active h4,
.grade-text div.is-active .title {
    color: #1555a2 !important; 
}

    .grade-text .sml_year {
        font-size: 12px;
        color: #666;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
.grade-text div:hover .kist,
.grade-text div.is-active .kist {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(10px) !important;
    pointer-events: auto;
}
.grade-text .stmi{
  font-size: 14px;
  text-align: justify;
  text-justify: inter-ideograph;
  margin-left: auto;
  margin-right: auto;
}

.graph-container {
        position: relative;
        padding-top: 50px;
        overflow: visible !important;
    }

.graph-container::after {
        background-image: url("../img/yaji_2.png");
        height: 100%;
        width: 97%;
        background-position: left bottom;
    }
    .graph-container.active::after {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
}

 .grade-text h4::after{
  background: none;
}

}

@media (max-width:768px) {
  .grade-text div .kist {
    width:300px;
  }
.grade-text .title {
        font-size: 13px ; 
        font-weight: bold;
        color: #1555a2;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .grade-text .sml_year {
        font-size: 11px;
        color: #666;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

.grade-text .stmi{
  font-size: 12px;
  text-align: justify;
  text-justify: inter-ideograph;
  margin-left: auto;
  margin-right: auto;
}

.grade-text h4{
  font-size: 12px;
  padding:10px 0;

}

.graph-container::after {
        background-image: url("../img/yaji_3.png");
        background-position: left bottom;
        background-size: 90% auto;
    }
    .graph-container.active::after {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
}

}

@media (max-width: 480px) {
    .grade-text div .kist {
    width:200px;
  }
    .runner-icon.active {
        bottom: 220px;
        left: calc(80% + 10% - 50px);
        width: 60px;
    }
    .runner-icon img{
    max-width: 120px;
    height: auto;
}
    .grade-text h4 {
        font-size: 10px;
        letter-spacing: 0.1px;
    }
}


/* --- 福利厚生エリア全体 --- */
.fukuri {
  text-align: center;
}

.fukuri_card {
  max-width: 800px;
  margin: 50px auto 100px;
  background: #fdfdfe;
  border-radius: 10px;
  border: 1px solid #ddd;
  line-height: 1.8;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* --- アイコン行の共通設定 --- */
.fukuri_icon, .fukuri_icon_2 {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.fukuri_icon { padding: 50px 0 30px; }
.fukuri_icon_2 { padding-bottom: 50px; }

/* --- テキスト周り --- */
.fukuri_icon p, .fukuri_icon_2 p {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.05em;
  min-height: 3em;
  color: #555;
  margin-bottom: 0;
}

.small_2 {
  display: block;
  font-size: 13px;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #666;
}

/* --- ★画像のアニメーション設定 --- */
.fukuri_icon img, .fukuri_icon_2 img {
  width: 80%;
  object-fit: contain;
  margin-top: 10px;
  transition: transform 0.6s ease;
}

@keyframes yureru {
  0% { transform: translateY(-10px) rotate(0deg) scale(1.1); }
  25% { transform: translateY(-10px) rotate(5deg) scale(1.1); }
  75% { transform: translateY(-10px) rotate(-5deg) scale(1.1); }
  100% { transform: translateY(-10px) rotate(0deg) scale(1.1); }
}

.fukuri_icon > div:hover img, 
.fukuri_icon_2 > div:hover img {
  animation: yureru 0.6s ease-in-out 3;
  transform: translateY(-10px) scale(1.1);
}


/* スマホ用（768px以下） */
@media screen and (max-width: 768px) {
  /* 1. 全体を包むカード（白い枠） */
  .fukuri_card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px 15px;
  }

  /* 2. 中にあるグループ（div）の仕切りを無効化する */
  .fukuri_icon, 
  .fukuri_icon_2 {
    display: contents;
  }

  /* 3. 1つ1つの項目（中のdiv） */
  .fukuri_card > div > div {
    width: 48%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* 4. テキストと画像の調整 */
  .fukuri_card p {
    font-size: 13px;
    margin-bottom: 10px;
    order: 1;
    height: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .fukuri_card img {
    width: 90px; 
    height: auto;
    order: 2;
  }

  .small_2{
    font-size: 11px;
    margin-top: 5px;
    color: #666;     
  }
}

/* <QandA> */
/* summaryの横の矢印を消したり、デザインを整える */
.qa_container{
  width: 90%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
}

.qa_p{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}

details {
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
}

summary {
  cursor: pointer;
  font-weight: bold;
  list-style: none;
  position: relative;
  padding-right: 30px;
  display: flex;
  align-items: center;
}

summary::before {
  content: "Q";
  font-weight: bold;
  color: #1555a2;
  margin-right: 10px;
  margin-left: 10px;
  font-size: 1.2em;
}

/* 矢印を自作する場合（＋マークなど） */
summary::after {
  content: '+';
  position: absolute;
  right: 10px;
}

/* 回答の頭に A をつける */
.answer-content {
  display: flex;
  padding-top: 10px;
  padding: 20px 20px 20px 0;
  background-color: #fdfdfd;
  border-radius: 2px 2px 10px 10px;
  margin-top: 10px;
}

.answer-content::before {
  content: "A";
  font-weight: bold;
  color: #e6bf49;
  margin-right: 10px;
  margin-left: 10px;
  font-size: 1.2em;
  flex-shrink: 0;
}


/* 開いている時は「−」にする */
details[open] summary::after {
  content: '−';
}

.answer-content p{
  line-height: 1.8;
  text-justify: inter-ideograph;
  margin: 0;
}

.f_btn {
    color: #1555a2;
    text-decoration: none;
    font-weight: bold;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
    padding:0 5px 0 4px;
    vertical-align: 0.1px;
}

/* マウスを乗せた時の文字色 */
.f_btn:hover {
    color: rgba(21, 85, 162, 0.7);
}

/* 下線の土台を作る */
.f_btn::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 110%;
    left: -8%;
    height: 1px;
    background-color:rgba(21, 85, 162, 0.7);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

/* マウスを乗せた時に線を伸ばす */
.f_btn:hover::after {
    transform: scaleX(1);
}

.schedule-list {
  max-width: 600px;
  margin: 0 auto;
}

.schedule-item {
  display: flex;
  padding: 15px 10px;
  align-items: flex-start;
  font-size: 16px;
}

/* 時間の部分 */
.schedule-item dt {
  width: 70px;
  flex-shrink: 0;
  font-weight: bold;
  color: #1555a2;   /* コーポレートカラーを使うと締まります */
}

/* 内容の部分 */
.schedule-item dd {
  margin-left: 20px;
  flex-grow: 1;
  margin-inline-start: 20px;
  flex-grow: 1;
  text-align: left;
}


/* エントリーフォーム */
#entry_form{
  max-width: 800px;
  width: 90%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.form-lead{
  margin-bottom: 15px;
  color: #444; 
  line-height: 2.2;
  
}

.e_form{
  padding-top: 30px ;
  padding-bottom: 50px;
  padding-left:40px ;
  padding-right: 40px;
  background-color:#fdfdfd;
  margin-bottom: 100px;
  line-height: 3.0;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
}

.form-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

.form-item .input-area {
  flex-grow: 1;
}
.form-item input[type="text"],
.form-item input[type="tel"],
.form-item input[type="email"],
.form-item textarea {
  width: 98%;
  padding: 12px 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-item textarea {
  height: 200px;
}

/* 左側のラベルエリア */
.form-item label {
  width: 200px; 
  font-weight: bold;
  flex-shrink: 0;
}

/* 必須ラベル */
.form-item .red_s {
  background: #e66;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 2px;
  margin-left: 5px;
}

#entry_form {
    border: none;
}

/* 2. ボタンエリア全体の調整（上の余白を作る） */
.form-submit {
    text-align: center;
    margin-top: 25px; 
    border-top: none; 
}

.form-submit button {
    background-color: #1555a2;
    color: #fff;     
    font-weight: bold;
    font-size: 1.1rem;
    padding: 18px 50px;
    border: none;
    border-radius: 50px;
    cursor: pointer; 
    box-shadow: 0 4px 15px rgba(44, 90, 160, 0.3);
    transition: 0.3s; 
    letter-spacing: 0.2em;
    text-indent: 0.2em;
}

/* ボタンにマウスを乗せた時の色（少し濃くする） */
.form-submit button:hover {
  background-color:#4c77c5;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(44, 90, 160, 0.4);
}

.e_form .form-item:nth-of-type(4) {
    border-bottom: none !important;
}

@media screen and (max-width: 768px) {
    .form-item {
        flex-direction: column;
    }

    .form-item label {
        width: 100%;
        margin-bottom: 8px;
    }

    .input-area {
        width: 100%;

    }
    
.form-item input[type="text"],
.form-item input[type="tel"],
.form-item input[type="email"],
.form-item textarea {
        font-size: 16px;
        padding: 12px;
        margin-left: auto;
        margin-right: auto;
    }
.form-submit button{
font-size: 15px;
padding: 15px 25px;
    }
}


@media (max-width: 768px) {
  /* .wid_min{
    width:85%;
    margin-left: auto;
    margin-right: auto;
  } */

  body {
        font-size: 14px;
    }

  h2 {
        font-size: 24px;
  }
  h3 {
    font-size: 24px;
    letter-spacing: 0.2em;
    margin-bottom: 50px;
  }
  h4{
    font-size: 20px;
  }
  p {
        font-size: 13px;
    }
.work_words{
    font-size: 13px !important;
}

.mgn_tptp{
  margin-top: 100px;
}

.mgn_tp{
  margin-top: 100px;
}

.header_top .logo a {
    display: -webkit-box !important; 
    display: -webkit-flex !important; 
    display: flex !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    text-decoration: none !important;
    border: none !important;
  }

  /* 2. 中の画像（ロゴマーク） */
  .header_top .logo a img {
    display: block !important;
    margin: 0 !important;
    width: 100px !important; 
    height: auto !important;
    flex-shrink: 0 !important;
  }

  /* 3. 中の文字（RECRUIT SITE） */
  .header_top .logo a .logo_words {
    display: block !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: none !important;
    position: relative !important;
    top: 0px;
  }

  .header_top{
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .logo_words_f{
  font-size: 16px !important;
}

.schedule-item {
  font-size: 13px;
}
}
/* 電話番号のリンク */
a[href^="tel:"] {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

.corporate_link{
  margin-top: 0;
  margin-bottom: 35px;
}
.corporate_link a {
  color: rgba(255, 255, 255, 0.5)!important;
  font-size: 12px;
  text-decoration: none!important;
  border-bottom: 1px solid transparent;
  transition: 0.3s;
}

.corporate_link i{
  margin-left: 3px;
}

.corporate_link a:hover {
  color:#fff;
  border-bottom: 1px solid #fff;
}

.tyusyaku{
  font-size: 12px;
   color: #666;
    /* margin-top: 30px; */
    line-height: 1.5;
    margin-bottom: 60px;
}
@media (max-width: 768px) {
  .tyusyaku{
    font-size: 10px;
  }
}