/* ===========================================
   style.css (整理版)
   - デザイン・位置・スタイルの変更なし
   - セクションごとに整理・コメント追加
   =========================================== */

@charset "UTF-8";

/* -------------------------------------------
      リセットとベース設定
   ------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    font-family: sans-serif;
    scroll-behavior: smooth;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-size: clamp(14px, 1.6vw, 18px);
}

/* スクロールロック用 */
html.no-scroll,
body.no-scroll {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* -------------------------------------------
      ヘッダー・グローバルナビ 
   ------------------------------------------- */

.box {
    display: flex;
    height: 102px;
    margin-top: 10px;
    border-top: 2px solid #dff2fc;
    border-bottom: 2px solid #dff2fc;
    border-right: 2px solid #dff2fc;
}

.nav ul,
.nav1 ul,
.nav2 ul {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    list-style: none;
    justify-content: center;
    gap: 50px;
    color: #57666f;
    white-space: nowrap;
}

.nav ul {
    margin: 39px 0 0 10px;
    padding: 0 660px 0 50px;
}

.nav1 ul {
    margin: 39px 0 0 7px;
    padding: 0 642px 0 50px;
}

.nav2 ul {
    margin: 39px 0 0 7px;
    padding: 0 642px 0 50px;
}

/* リンク色 */
a:link,
a:visited {
    color: #57666f;
    text-decoration: none;
}

a:hover,
a:active {
    color: #1395e4;
    text-decoration: none;
}

/* -------------------------------------------
      ハンバーガーメニュー
   ------------------------------------------- */

/*何よりも優先度が高い大きな箱*/
:root {
    --hm-width: 50px;     /*ハンバーガーメニュー全体の横幅*/
    --hm-height: 40px;     /*ハンバーガーメニュー全体の縦幅*/
    --bar-height: 6px;     /*メニューの「バー１本分」の太さ*/
    --transition-time: 0.3s;     /*メニューが開いたり閉じたりするときのアニメーションの速さ*/
}

.hamburger-menu {
    display: flex;
    flex-direction: column;     /*要素が縦になる*/
    justify-content: space-between;     /*[1]　　　[2]　　　[3]と並ぶ*/
    width: var(--hm-width);
    height: var(--hm-height);
    position: absolute;
    top: 42px;
    right: 40px;
    cursor: pointer;     /*「マウスカーソルを“手の形”に変えて、この部分はクリックできる」*/
    z-index: 801;
}

.hamburger-menu .bar {
    height: var(--bar-height);
    background-color: #1395e4;
    transition: all var(--transition-time) ease;
    /*色や大きさなど、すべての変化を、0.3秒かけて、ゆるやかなスピードの変化でアニメーションする*/
    transform-origin: center center;
    /*どこを支点にするか決める*/
}

/*ハンバーガーメニューが開いたときだけ、最初のバー（横線１本目）に対して特別なスタイルを適用する*/
.hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(calc((var(--hm-height) - var(--bar-height)) / 2)) rotate(45deg);
    /* 真ん中に上下移動して斜め45度回転する*/
}

.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;/*「透明度」を指定するプロパティです。*/
}

.hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(calc(-1 * ((var(--hm-height) - var(--bar-height)) / 2))) rotate(-45deg);/*(1)を参照*/
    ;
}

/* -------------------------------------------
      サイドバー
   ------------------------------------------- */

.sidebar {
    position: absolute;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    background-color: #fff;
    transition: right 0.3s ease;
    /*位置変更を0.3秒かけて、ease のリズムでスムーズにアニメーションしてくれる、というわけです！*/
    padding: 20px;
    margin-top: 10px;
    z-index: 800;
    border: 2px solid #dff2fc;
}

.sidebar.active {
    right: 0;
}

.sidebar h2 {
    font-size: 19px;
    text-align: start;
    margin-top: 100px;
    border-bottom: 2px solid #1395e4;
}

.sidebar ul {
    list-style: none;
    margin-top: 20px;
    padding: 0;
}

.sidebar li {
    margin-bottom: 15px;
    border-bottom: 2px solid #1395e4;
}

.sidebar a {
    text-decoration: none;
    color: #57666f;
    font-size: 18px;
}

.sidebar a:hover {
  color: #1395e4;
}

.sidebar a:link,
.sidebar a::visited {
  color: #57666f;
}

/* 子メニュー */

.has-submenu .submenu-header {
    position: relative;
    padding-right: 30px;
    display: flex;
    align-items: center;
}

.has-submenu .submenu-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.has-submenu .submenu {
    display: none;
    margin: 5px 0 0 20px;
    padding: 0;
}

.has-submenu .submenu a {
  font-size: 14px;  /* お好みのサイズに調整 */
}

/*子メニューを持つ項目が開かれているときだけ、その直下にある（.submenu）に以下のスタイルを適用する*/
.has-submenu.open>.submenu {
    display: block;
}

.submenu li {
  border-bottom: 2px solid #c4c3c3;
}
/* -------------------------------------------
      メイン　トピックス　画像スライダー
   ------------------------------------------- */

.image-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: hidden;     /* この枠からはみ出た絵は全部隠す */
}

.slides-wrapper,
.slides,
.slide {
    height: 100%;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;/*指定した幅にぴったりパディングと枠線まで入る*/
}

.slide img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;     /*写真をキレイにトリミングして枠いっぱいに見せる魔法*/
}

/* 矢印ボタン */

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 100px;
    background: #1395e4;
    border: none;
    cursor: pointer;
    z-index: 700;
    font-size: 20px;
    color: #fff;
    border-radius: 20px;
}

.slider-arrow.prev {
    left: 10px;
}

.slider-arrow.next {
    right: 10px;
}

/* -------------------------------------------
      モーダル
   ------------------------------------------- */

.modal {
    display: none;
    position: fixed;
    z-index: 8887;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /*（幅・高さ）を超えて中身がはみ出したときに、自動でスクロールバーを表示する設定です*/
    background-color: rgba(0, 0, 0, 0.7);
    transition: all 1s ease-in-out;
    /*transitionは変化を滑らかにする。全部の変化を1秒で、最初と最後をゆっくりに*/
}

.modal-content {
    padding: 20px 25px;
    width: 90%;
    max-width: 650px;
    position: relative;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*要素（箱）を自分の幅と高さの半分だけ 左上 にずらす設定です*/
    max-height: 400px;
    animation: show 0.6s linear;
    filter: drop-shadow(0 2px 6px #777);
}

/* ───── モーダル内画像のサイズ調整 ───── */
.modal-container img {
    display: block;
    /* 中央寄せしやすくする */
    margin: 0 auto 0px;
    /* 下にだけ余白を残す */
    max-width: 90%;
    /* モーダル幅の90%以内に収める */
    max-height: 100vh;
    /* ビューポート高さの70%以内に収める */
    width: auto;
    /* アスペクト比を維持 */
    height: auto;
    object-fit: contain;
    /* 縦横比を保ったまま収める */
}

.modal-top {
    position: absolute;
    top: 5px;
    right: 5px;
}

.modal-close {
    display: flex;
    justify-content: center;
    align-items: center;/*アイテムを縦方向に中央揃え する*/
    position: absolute;
    top: 0;
    right: 30px;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #023c90;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

/* ───── モーダル起動ボタンの枠線・アウトラインを除去 ───── */
.modal-toggle,
.btn-example {
    border: none !important;
    background: none !important;
    outline: none !important;/*!importantは絶対にという意味*/
    box-shadow: none !important;
}

.modal-toggle:focus,
.btn-example:focus {
    outline: none !important;
    box-shadow: none !important;
}

/*.modal-contentのanimation: show 0.6s linear;に対応*/
@keyframes show {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
    /*from はアニメーションの 開始状態（0% の位置）
    to はアニメーションの 終了状態（100% の位置）*/
}

/* -------------------------------------------
       メイン　　トピックス
   ------------------------------------------- */

.ue {
    background: linear-gradient(to bottom right, #ffffff, #c1feff);
    /*グラデーション*/
}

.karenda {
    text-align: center;
    padding: 40px 0;
}

.article-title {
  margin: 60px 14% 0;
  font-size: 30px;
}

.article-title2 {
  margin: 10px 15% 0;
  font-size: 24px;
  color: #1395e4;
}

.article-title3 {
  margin: 100px 15% 0;
  font-size: 30px;
  padding-left: 1%;
  border-left: 10px solid #1395e4;
}

.article-img {
  margin: 10px 15% 0;
  max-width: 100%;
  width: 70%;
}

.article-img2 {
  margin: 50px 15% 0;
  max-width: 100%;
  width: 70%;
}

.article-img2:hover {
  opacity: 0.9;
}

.article-sen {
  margin: 30px 15%;
  font-size: 20px;
  line-height: 2;
  text-align: justify;
}

.article-sen2 {
  margin: 10px 15% 0;
  padding-left: 30px;
  font-size: 14px;
  text-align: justify;
}

.article-table {
  margin: 40px 15% 0;
}

.article-table2 th {
  padding-left: 30px;
  vertical-align: middle;
  text-align-last: justify;
  border-bottom:1px solid #dad8d8 ;
}

.article-table2 td {
  font-size: 20px;
  padding: 20px 50px 20px 200px;
  border-bottom:1px solid #dad8d8 ;
}

.under-line,
.under-line2,
.under-line3 {
    margin: 40px 80px 0 80px;
    position: relative;
    font-weight: bold;     /*文字を太くする*/
    line-height: 1.3;     /*テキストの幅の1.3倍の隙間ができる*/
    font-size: 22px;
    border-bottom: 3px solid #dedede;
    padding-bottom: .4em;
}

.under-line4 {
  margin-left: 15%;
  margin-right: 15%;
  position: relative;
  font-weight: bold;     /*文字を太くする*/
  line-height: 1.3;     /*テキストの幅の1.3倍の隙間ができる*/
  font-size: 22px;
  border-bottom: 3px solid #dedede;
  padding-bottom: .4em;
}

/*線の前の部分を指定*/
.under-line::before,
.under-line2::before,
.under-line3::before,
.under-line4::before {
    content: "";     /*この疑似要素に何を表示させるか*/
    /*（::before や ::after）に必ず書く「生成コンテンツ」の指定です*/
    position: absolute;
    bottom: -3px;
    width: 100px;
    height: 3px;
    background: #1395e4;
}

.h44 {
    font-size: 15px;
}

:root {
  --btn-width: 180px; /* トピックス記事一覧の実際の幅に合わせて調整 */
  --btn-v-padding: 20px;         /* 縦余白 */
  --btn-h-padding: 20px;         /* 横余白 */
}

.topics,
.picup {
  display: block;                /* ブロック要素にする */
  width: var(--btn-width);       /* 固定幅 */
  margin: 40px auto 0;           /* 上マージン40px、左右autoで中央寄せ */
  padding: var(--btn-v-padding) var(--btn-h-padding);
  white-space: nowrap;           /* 改行させない */
  text-align: center;            /* ボタン内テキストを中央 */
  background: #1395e4;
  border: 2px solid #1395e4;
  text-decoration: none;         /* リンクの下線を消す */
}

.topics,
.picup {
  display: flex;               /* ← ブロックのまま横並びコンテナに */
  justify-content: center;     /* ← 水平方向センター */
  align-items: center;         /* ← 垂直方向センター */
}

.topics-items {
  text-align: center;
  margin-top: 15px;
}

.topics-content {
  max-width: 30%;
}

/* h4の余白リセット */

.topics .h44,
.picup .h44 {
  margin: 0;
  line-height: 1;
  text-align: center;               /* 横中央揃え */
  display: block;                   /* ブロックにして幅いっぱいに */
}

.topics:visited,
.picup:visited {
    color: #fff;
}

.topics:hover,
.topics:active,
.picup:hover,
.picup:active {
    background: #fff;
    color: #1395e4;
}

/* -------------------------------------------
       メイン　　ビジネス
   ------------------------------------------- */

.container {
    display: grid;
    /* Flex レイアウト */
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    /* 子要素を中央揃え */
    flex-wrap: wrap;
    /* 行を折り返し可に */
    gap: 20px;
    /* ボタン間の余白（必要に応じ調整） */
    margin: 0 auto 80px;
    /* 上:0 右左:auto（中央寄せ） 下:80px */
}
.container2{
    display: flex;
    /* Flex レイアウト */
    justify-content: center;
    /* 子要素を中央揃え */
    flex-wrap: wrap;
    /* 行を折り返し可に */
    gap: 20px;
    /* ボタン間の余白（必要に応じ調整） */
    margin: 0 auto 80px;
    /* 上:0 右左:auto（中央寄せ） 下:80px */
}
.kigyouandschool,
.kigyou,
.koukou,
.kakusyu {
    display: flex;
    justify-content: center;
    /* 必要に応じて幅を100%に */
    width: 100%;
    margin: 40px 0 80px;
    /* 既存の上下マージンを保持 */
}

/* -------------------------------------------
      サイトマップと利用規約
   ------------------------------------------- */
.sitemap-wait {
  margin-top: 40px;
  text-align: center;
  font-size: 50px;
}

/* -------------------------------------------
      サイトポリシー
   ------------------------------------------- */

.heading {
  margin-bottom: 40px;
  padding: 30px 0;
  background-color: #fff;
  border-top: 10px solid #f2f2f2;
}

.background-design {
  background-image: url(../image/background-main.png);
  background-repeat: no-repeat;
  padding-bottom: 10px;
}

.heading h1::after {
  content: "";
  position: absolute;
  bottom: -20px;                /* 親 <h1> の下端にぴったり */
  left: 8%;                /* 親幅の中央 */
  transform: translateX(-50%);
  width: 220px;             /* 下線の長さをここで調整 */
  height: 2px;              /* 線の太さ */
  background-color: #1395e4;   /* 線の色 */
}

.heading h1 {
  position: relative;
  left: 120px;
  top: 10px;
  font-size: 30px;
}

.sitepolicy-text {
  width: 85%;
  text-align: start;
  margin: 0px auto 40px;
  padding: 80px 70px;
  background-color: #fff;
  box-shadow: 10px 10px 0px rgba(151, 151, 151, 0.2);
}

.sitepolicy-content-title {
  padding-bottom: 20px;
  font-size: 28px;
}

.sitepolicy-content-title3{
  font-size: 15px;
}

.sitepolicy-content {
  font-size: 15px;
  margin-bottom: 80px;
}
.sitepolicy-content2 {
  font-size: 15px;
  padding-top: 5px;
  padding-bottom: 20px;
}

/* -------------------------------------------
      アクセスページ用テーブル
   ------------------------------------------- */
.access {
    border-collapse: collapse;
    /*まわりのセル（マス）の枠線を くっつけて一本の線 にしてくれる設定。*/
    margin: 20px 0 0 80px;
}

.canpany img {
  width: 100%;
  height: auto;
}

.access th,
.access td {
    border: 2px solid #dff2fc;
    padding: 15px;
    font-size: 20px;
}

.access th {
    color: #fff;
    background: #1395e4;
    /* 横方向中央寄せ */
    text-align: center;
    /* 縦方向中央寄せ */
    vertical-align: middle;
    /* 文字とアイコンの真ん中を揃える */
}

.map {
    display: flex;
}

.googlemap {
  margin: 70px auto 0;
}

/* -------------------------------------------
      フッター 　サイトポリシーと利用規約
   ------------------------------------------- */
.footer2 {
  background: #dff2fc;
}

.footer2 .form {
  background: #1395e4; /* ボタンの青背景 */
  border-color: #1395e4;
  color: #ffffff;      /* 白文字 */
}

/* ② ホバー時：文字を青、背景を白に */
.footer2 .form:hover {
  background: #ffffff; /* 白背景 */
  color: #1395e4;      /* 青文字 */
}

/* ③ クリック（Active）時：文字を白、背景を青に */
.footer2 .form:active {
  background: #1395e4; /* 青背景 */
  color: #ffffff;      /* 白文字 */
}

/* -------------------------------------------
      フッター
   ------------------------------------------- */

.footer {
    margin-top: 40px;
    background: #dff2fc;
}

.box2 {
    height: 98px;
    background: #1395e4;
    display: flex;
    justify-content: space-between;
}

.icon {
    display: flex;
    justify-content: center;
    color: #57666f;
}

hr {
    border: 1px solid #57666f;
    margin: 0 150px;
}

.h3box {
    display: flex;
    font-size: 18px;
    font-weight: bold;
    color: #57666f;
    padding-top: 25px;
    justify-content: center;
    white-space: nowrap;
    /*自動改行をすべて無効化*/
}

.jigyou1,
.kaisha1,
.news1,
.support1 {
    line-height: 1.8;
}

.jigyou,
.kaisha,
.news,
.support {
    font-size: 13px;
    padding-left: 25px;
}

.kaisha1,
.news1 {
    padding-left: 50px;
}

.support1 {
    padding-left: 40px;
}

.form {
    display: block;
    margin: 5px 0 20px 85px;
    padding: 0 23px;
    text-align: center;
    background: #1395e4;
    border: 2px solid #1395e4;
    border-radius: 10px;
}

.icon h3 {
    margin-top: 37px;
}

.form h4 {
    margin-top: 22px;
}

.form:visited {
    color: #fff;
}

.footer .form {
  background: #1395e4; /* ボタンの青背景 */
  border-color: #1395e4;
  color: #ffffff;      /* 白文字 */
}

/* ② ホバー時：文字を青、背景を白に */
.footer .form:hover {
  background: #ffffff; /* 白背景 */
  color: #1395e4;      /* 青文字 */
}

/* ③ クリック（Active）時：文字を白、背景を青に */
.footer .form:active {
  background: #1395e4; /* 青背景 */
  color: #ffffff;      /* 白文字 */
}

.allfooter {
    position: relative;
}

.option,
.fin {
    position: relative;
    left: 180px;
    font-size: 12px;
    font-weight: bold;
    color: #57666f;
    padding-top: 25px;
    text-align: left;
    max-width: 1200px;    /* 好みのコンテナ幅に調整 */
    margin: 0 auto;       /* 左右中央寄せ */
    width: 100%;
    box-sizing: border-box;
    /*中身＋パディング＋ボーダーすべてを含めた合計のサイズ*/
}

.h33 {
    font-size: 16px;
    margin: 0;
}

.info {
    margin: 5px 0 0;
    font-size: 14px;
    padding: 0 0 40px;
}

/* ===============================
   メディアクエリ: モバイル対応
   =============================== */
   @media (max-width: 768px) {
    /*ヘッダー*/
    /* ★追加：スマホでの横スクロール防止 */

    html, body {
        width: 100% !important;
        overflow-x: hidden !important;
        position: relative;
    }

/* -------------------------------------------
      ハンバーガーメニュー
   ------------------------------------------- */

    .sidebar ul,
    .sidebar li,
    .sidebar a {
        overflow-x: hidden;
        word-break: break-word;
        /*長ーい言葉がページからはみ出さないように「途中で切ってでも次の行に送る」*/
        max-width: 100%;
        box-sizing: border-box;
    }

    .sidebar {
        position: fixed !important;     /* ★absolute → fixed に変更 */
        top: 0;
        right: 0;
        transform: translateX(100%);    /* ★追加：完全に右に隠す */
        transition: transform 0.3s ease;
        width: 100vw !important;
        max-width: 50%;
        height: 100%;
        background-color: #fff;
        padding: 20px;
        z-index: 800;
        box-sizing: border-box;
        overflow-x: hidden;             /* 念のため横スクロール防止 */
    }
    
    /* ▼メニュー表示時にtransformで表示させる */
    .sidebar.active {
        transform: translateX(0);       /* ★追加：表示状態では元に戻す */
    }
    .header-inner {
        height: auto; /* 高さを自動にする */
        min-height: 56px; /* 最低限の高さを設定 */
        padding: 4px 12px;
        border-bottom: 2px solid #dff2fc; /* これがロゴの下に出るように */
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      header {
        max-height: 60px;
      }
      .box {
        max-height: 60px;
      }
      a {
        max-height: 60px;
      }
      a img {
        max-height: 60px; /* ロゴも小さめに */
        max-width: 100px;
      }
      
      .hamburger-menu {
        position: absolute;
        top: 28px;
        right: 12px;
        height: 24px;
        width: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 1001;
        cursor: pointer;
      }
    
      .hamburger-menu .bar {
        height: 4px;
        width: 100%;
        background-color: #1395e4;
        transition: all 0.3s ease;
        transform-origin: center center;
      }
    
      /* アクティブ時 */
      .hamburger-menu.active .bar:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
      }
    
      .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
      }
    
      .hamburger-menu.active .bar:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
      }
      
      .nav,
      .nav1,
      .nav2 {
        display: none !important;
      }

      .hamburger-menu {
        display: flex;
      }

      .header-inner {
        padding: 0px;
      }

      .sidebar {
        top: 0;
        right: -250px;
        height: 100%;
      }

      .sidebar.active {
        right: 0;
      }

      /*メイン*/
/* ===============================
   　　　　メイン　　　事業案内
   =============================== */

          /* ★変更：コンテナの横スクロール防止 + パディング追加 */
      .container,
      .container2 {
        padding: 0 10px;               
        max-width: 100%;              
        overflow-x: hidden;           
        box-sizing: border-box;       
      }
      /* ★変更：画像がはみ出さないように調整 */
      .container img,
      .container2 img {
        width: 100%;                  /* ★変更 */
        max-width: 100%;              /* ★変更 */
        height: auto;
      }

      .slider-arrow {
        width: 14px;         /* ← ボタン幅を小さく */
        height: 60px;        /* ← ボタン高さも調整 */
        font-size: 14px;     /* ← 矢印の大きさも調整 */
        border-radius: 10px; /* ← 小さめの角丸 */
      }
    
      .slider-arrow.prev {
        left: 6px; /* ← 左端に近づける */
      }
    
      .slider-arrow.next {
        right: 6px;
      }
      .container {
        grid-template-columns: 1fr 1fr;
      }
      /* ↓ 画像が縮みすぎないよう調整（任意で変更可） */
      .container img,
      .container2 img {
          width: 100%;
          max-width: 150px;     /* ← 横幅上限 */
          height: auto;
      }
      .kigyouandschool img,
      .kigyou img,
      .koukou img,
      .kakusyu img {
          width: 80%;          /* 画像の横幅を縮小 */
          max-width: 600px;    /* 最大幅の制限（必要に応じて） */
          height: auto;
          display: block;
          margin: 0 auto;       /* 中央寄せ */
      }
      .modal-close {
        width: 2rem;        /* ★ 幅を小さく */
        height: 2rem;       /* ★ 高さを小さく */
        right: 21px;
        font-size: 1.2rem;  /* ★ × の文字サイズを調整 */
        align-items: flex-start;  /* コンテンツを上寄せして… */
        padding-top: 0.125rem;      /* …“×”を下へ約0.3rem移動 */
      }

/* ===============================
        メイン　　　アクセス
   =============================== */

            /* ── 追加: .canpany 画像をフル幅に拡大 ── */
      .canpany img {
        width: 100% !important;
        height: auto !important;
        /* inline 属性（height="80%"）を上書き */
        max-width: none;
      }

            /* テーブル全体をやや狭めて中央寄せ */
      .access {
        /* コンテナ幅から左右各80pxを引いた幅 */
        width: calc(100% - 160px) !important;
        /* 上マージンは20px、左右は自動中央寄せ */
        margin: 20px auto 0;
      }
      /* セル内パディングと文字サイズを縮小 */
      .access th,
      .access td {
        padding: 8px;                     /* 元の15px → 8px */
        font-size: 14px;                  /* 元の20px → 14px */
      }

      .access th {
        white-space: nowrap;
        writing-mode: horizontal-tb;
      }
      
        /* スマホ版で地図をテーブルの上に並べ替え */
      .map {
        display: flex;                
        flex-direction: column-reverse; /* 順序を逆転 */
        align-items: center;           
      }

  /* 地図の下にテーブルが来るので、その間に余白を */
      .map .googlemap {
        margin-bottom: 16px;
        /* 幅指定がある場合は残す */
        /* 例: width: calc(100% - 20px); max-width: 423px; */
      }

  /* テーブルを中央寄せ */
      .map .access {
        margin: 0 auto;
      }

    /* .googlemap を幅いっぱい使いたい場合は幅指定を */
      .googlemap {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin: 40px auto;
        /* 必要に応じて幅を調整 */
        /* 例: width: calc(100% - 20px); */
      }
  
    /* iframe 自体をブロック要素にして余白リセット */
      .googlemap iframe {
        display: block;
        margin: 0 auto;              /* ブロック要素の中央寄せ */
      }
    /* スマホ版で地図サイズを調整 */
      .map .googlemap iframe {
        /* 画面幅いっぱいから左右10pxずつ余白 */
        width: calc(100% - 20px) !important;
        /* 高さは任意のピクセルで固定（例：200px） */
        height: 200px !important;
        /* アスペクト比崩れ防止 */
        max-width: 100% !important;
        /* 必要であれば縦横スクロール防止 */
        border: 0;
      }

      /* ── スマホ版で「アクセス」見出しと下線を地図幅に合わせる ── */
      .under-line3 {
        /* 地図と同じ calc(100% - 20px) 幅に */
        width: calc(100% - 39px) !important;
        /* マージンも中央寄せに */
        margin: 20px auto 0 !important;
      }

/* ===============================
      　　　メイン　　　トピックス
   =============================== */

        /* スマホ版でカレンダー画像を幅100％に */
      .karenda img {
        width: 100%;
        height: auto;
        max-width: none;
        display: block;
        margin: 0 auto;
      }

    /* メインコンテナの左右余白 */
      .sita {
        padding: 0 10px;
      }
  
    /* 見出しを少し小さく＆上下マージンを調整 */
      .sita .under-line,
      .sita .under-line2 {
        font-size: 15px;       /* 22px → 18px */
        margin: 24px 0 12px;   /* 上24px／下12px */
      }
  
    /* ボタンの幅・パディング・マージンを縮小 */
      .sita .topics,
      .sita .picup {
        width: 100px;                   /* ボタン幅を180px → 140px に */
        padding: 12px 12px;             /* 縦12px・横16px */
        margin: 20px auto 0;            /* 上20px／左右autoで中央寄せ */
    }
  
    /* ボタン内テキストを小さく */
      .sita .h44 {
        font-size: 9px;                /* 15px → 14px */
        line-height: 1;
      }

      /* トピックス／ピックアップの灰色ラインを短く＆中央寄せ */
      .sita .under-line,
      .sita .under-line2 {
        display: inline-block;       /* 幅を固定できるように */
        width: 370px;                /* スマホ向けの長さに調整 */
        margin: 24px 0 12px 20px;      /* 上24px／左右 auto（中央寄せ）／下12px */
        padding-bottom: .4em;        /* 元の見た目を維持 */
        border-bottom: 3px solid #dedede; /* 灰色のライン */
      }

/* ===============================
  　　　メイン　　　サイトマップ
   =============================== */

      .sitemap-wait {
        margin-top: 40px;
        text-align: center;
        font-size: 30px;
        padding-bottom: 48px;
      }

/* ===============================
  　　　メイン　　　サイトポリシー
   =============================== */

    /* ── メイン全体（背景画像含む）上下の余白を詰める */
    .background-design {
      /* 上下のパディングを調整 */
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      /* 背景画像の縦サイズを最適化 */
      background-size: cover !important;
      background-position: top center !important;
    }

    /* 社長挨拶 */
    .ceo-subtitle {
      left: 25px;
      margin-top: 10px;
      font-size: 10px;
    }
  
    .ceo-title {
      margin-bottom: 5px;
      left: 25px;
      font-size: 20px;
    }
  
    .ceo-greeting {
      display: flex;
      flex-direction: column;
    }
    .ceo-img {
      /* コンテナは高さ0＋paddingでアスペクト比（50%＝上半分）を指定 */
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 60%;  /* 画像高さの50%分だけ表示 */
      overflow: hidden;      /* はみ出した下半分を隠す */
    }
    .ceo-img img {
      /* コンテナいっぱいに広げ、上寄せ */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      object-fit: cover;     /* 画像比率を保ってコンテナを埋める */
      object-position: top;  /* 上側を基準に表示 */
    }
  
    .greeting-message {
      position: relative;
      bottom: 47px;
      display: flex;
      flex-direction: column-reverse;
      margin-bottom: 0px;
      
    }
    .greeting-message-box {
      font-size: 12px;
      max-width: 450px;
      margin: 10px auto 0;
      line-height: 1.6;
      text-align: justify;
      /* 両端揃え */
    }
    .ceo-name {
      top: 60px;
      right: 30px;
    }
    .ceo-name p {
      padding-bottom: 60px;
    }
  
    .hosoi {
      margin-left: 10px;
      bottom: 9px;
      font-size: 22px;
    }
  
  
    /* 社長の経歴 */
    .under-line {
      margin: 30px 8% 0 8%;
      position: relative;
      font-weight: bold;
      line-height: 1.3;
      font-size: 16px;
      border-bottom: 3px solid #dedede;
      padding-bottom: .4em;
    }
    
    .under-line:before {
      position: absolute;
      bottom: -3px;
      width: 85px;
      height: 3px;
      display: block;
      content: "";
      background-color: #1395e4;
    }
    
    .ceo-career {
      max-width: 100%;
      width: 1600px;
      height: auto;
      display: block;
      margin: 0 auto;
    }
  
    /* ── サイトポリシー本文の余白も縮小 */
      .sitepolicy-text {
        width: 95%;
        padding: 20px !important;  /* 元80px→20px に */
      }
  
    /* ── 見出し周りのマージン調整 */
      .heading {
        padding: 20px 0 !important;  /* 元30px→20px に */
        margin-bottom: 20px !important; /* 元40px→20px に */
      }
      .sitepolicy-content {
        margin-bottom: 20px;
      }
      .heading h1 {
        left: 25%;
      }
      .heading h1::after {
        /* 横位置を見出し中央に */
        left: 25% !important;
        transform: translateX(-50%) !important;
        /* 縦位置のオフセット（数値はお好みで上下調整） */
        bottom: -10px !important;
        /* 線の長さもモバイル向けに短く */
        width: 220px !important;
      }
/* -------------------------------------------
          フッター サイトポリシーと利用規約
   ------------------------------------------- */
      .footer2 {
        margin: 0;
      }

/* -------------------------------------------
                    フッター
   ------------------------------------------- */

      .footer {
        margin: 40px 0 0;
      }

      .box2 {
        height: 70px;
      }

      .icon {
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
    
      .icon .h3 {
        order: -1; /* 最上部に配置 */
        /* このアイテムだけ、他より先に（前に）表示する */
      }
    
    /* 横並びにする画像用ラッパーを追加 */
      .icon-images {
        display: flex;
        justify-content: center;
        gap: 10px;
      }
      .icon img {
        width: 80px;  /* アイコンサイズ調整（必要に応じて） */
        height: auto;
      }
    
      hr {
        width: 90%;                 /* スマホ向けにやや短めにする例（任意） */
        margin: 0px auto;          /* ← 中央寄せに重要！ */
      }
      .icon .h3 h3 {
        font-size: 18px; /* スマホ向けに少し小さめに */
        margin-top: 10px;
      }
      .h3 {
        position: relative;
        top: 10px;
      }
        /* フッター内の「トップに戻る」ボタンを下にずらす */
      .reset {
        margin-top: 7px;  /* 必要に応じて値を調整 */
      }
      .reset img {
        width: 60px !important;   /* ← 幅を拡大（元サイズに応じて調整可） */
        height: 200px !important;   /* ← 高さは自動計算 */
      }

      .h3box > .jigyou1,
      .h3box > .kaisha1,
      .h3box > .news1,
      .h3box > .support1 {
        flex: 1 0 0px;
        min-width: 0;
      }
           /* ── フッター内 .h3box を hr と同じ幅に制限 ── */
      .h3box {
        position: relative;
        left: 18px;
        display: flex;                     /* 横並び */
        justify-content: flex-start;    /* 両端＋間隔均等 */
        flex-wrap: wrap;                   /* 必要に応じ折り返し 次の行へ*/
        width: 80%;                        /* hr と揃える */
        gap: 20px;                          /* アイテム間の余白 */
        font-size: 13px;
      }
      .h3box > div {
        flex: 1 1 25%;                     /* 均等に 4 分割 */
        /*<成長率-1-> <縮小率-2-> <基準サイズ-3->*/
        /*<-1-余ったスペースを「どれだけもらいたいか」>*/
        /*<-2-スペースが足りないときに「どれだけ小さくなってもいいか」>*/
        /*「親の幅の25％をこの子のもとになる幅にするよ」*/
        min-width: 0;                      /* 中身にかかわらず縮小可 */
      }
      .support1 {
        padding-left: 50px;
      }
      .jigyou,
      .kaisha,
      .news,
      .support {
        position: relative;
        right: 18px;
        font-size: 13px;
      }
          /* ── スマホ版: お問い合わせボタン(.form)を中央寄せ＆サイズ調整 ── */
    .h3box > .form {
      /* 横幅は親要素幅に合わせつつ最大180pxに */
      width: 100%;
      height: 100px;
      max-width: 180px;
      text-align: center;
      margin: 5px 0 20px 32% !important;
      padding: 8px 16px;         /* 縦:8px・横:16pxにコンパクト化 */
      box-sizing: border-box;    /* パディング込みで幅を計算 */
    }
    /* ボタン内テキストも少し小さくするとバランス良くなります */
    .h3box > .form h4 {
      font-size: 14px;
      margin-top: 9px;
    }
    /* ── スマホ版: .option/.fin を左寄せ ── */
    .option,
    .fin {
      /* デスクトップの left:180px をリセット */
      left: 0 !important;
      /* 必要であれば余白を少し追加 */
      margin-left: 18px;
      /* 幅を自動に */
      width: auto;
    }
    }
/* ---------- PC表示用 ---------- */
@media (min-width: 769px) {
    .nav,
    .nav1,
    .nav2 {
      display: flex !important;
    }
    .slider-arrow {
        width: 20px;         /* ← ボタン幅を小さく */
        height: 100px;        /* ← ボタン高さも調整 */
        font-size: 20px;     /* ← 矢印の大きさも調整 */
        border-radius: 20px; /* ← 小さめの角丸 */
      }
    
      .slider-arrow.prev {
        left: 6px; /* ← 左端に近づける */
      }
    
      .slider-arrow.next {
        right: 6px;
      }
}

    /* トップページ 可能性 */
    .top-back-image {
      background-image: url(../image/aichi.png);
      position: relative;
      bottom: 63px;
      width: 100%;
      height: 500px;
      max-height: 100%;
      background-size: cover;
      background-position: center;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .top-back-color {
      position: absolute;
      width: 90%;
      height: 90%;
      background-color: rgba(0, 0, 0, 0.6); /* 黒背景＋透過 */
      z-index: 1;
    }
    .top-title {
      position: relative;
      bottom: 15px;
      z-index: 2;
      text-align: center;
    }
    .top-title h1 {
      font-size: 40px;
      margin-bottom: 30px;
    }
    .top-title p {
      line-height: 1.8;
      font-size: 20px;
    }

    @media (max-width: 768px) {
      .top-back-image {
        background-image: url(../image/aichi.png);
        position: relative;
        bottom: 14px;
        width: 100%;
        height: 200px;
        max-height: 100%;
        background-size: cover;
        background-position: center;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .top-title {
        position: relative;
        bottom: 15px;
        z-index: 2;
        text-align: center;
      }
      .top-title h1 {
        font-size: 18px;
        margin-bottom: 15px;
      }
      .top-title p {
        line-height: 1.8;
        font-size: 7px;
      }
    }

    /* 企業理念 */
    .top-main {
      background-image: url(../image/background.png);
    }
    .top-rinen-back {
      background-color: #fff;
      margin: 0 10%;
      box-shadow: 10px 10px 0 rgba(151, 151, 151, 0.2);
    }
    .top-rinen-title {
      text-align: center;
      font-size: 40px;
      padding-top: 3%;
    }

    .top-rinen,
    .top-rinen2,
    .top-rinen3 {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 2% 0;
      gap: 5%;
    }
    .top-rinen h2,
    .top-rinen2 h2,
    .top-rinen3 h2 {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      color: #fff;
      background-color: #1395e4;
      width:200px;
      height:200px;
      border-radius: 50%;
      box-shadow: 5px 5px 0 rgba(41, 41, 41, 0.2);
    }
    .top-rinen p,
    .top-rinen2 p,
    .top-rinen3 p {
      text-align: justify;/* 両端揃え */
      line-height: 1.6;
      max-width: 1000px;
    }
    .top-rinen3 {
      padding-bottom: 5%;
      margin-bottom: 5%;
    }
    @media (max-width: 768px) {
      .top-rinen,
      .top-rinen2,
      .top-rinen3 {
        gap: 10%;
      }
      .top-rinen-back {
        background-color: #fff;
        margin: 0 3%;
        box-shadow: 10px 10px 0 rgba(151, 151, 151, 0.2);
      }
      .top-rinen-title {
        text-align: center;
        font-size: 20px;
        padding-top: 3%;
      }
      .top-rinen h2,
      .top-rinen2 h2,
      .top-rinen3 h2 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        color: #fff;
        background-color: #1395e4;
        width:50px;
        height:50px;
        border-radius: 50%;
        box-shadow: 5px 5px 0 rgba(41, 41, 41, 0.2);
      }
      .top-rinen p,
      .top-rinen2 p,
      .top-rinen3 p {
        text-align: justify;/* 両端揃え */
        line-height: 1.6;
        font-size: 6px;
        max-width: 270px;
      }
      .top-rinen3 {
        padding-bottom: 5%;
        margin-bottom: 5%;
      }
    }
    /* 事業内容 */
    :root {
      --jigyou-width: 600px;
      --jigyou-height: 450px;
    }
    .top-office {
      position: relative;
      width: 100%;
      height: 800px;
      max-height: 100%;
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url(../image/office.png);
    }
    .white-box {
      position: absolute;
      width: 90%;
      height: 90%;
      background-color: rgba(255, 255, 255, 0.5);
    }
    .top-jigyou-title {
      text-align: center;
      font-size: 40px;
      margin-top: 30px;
      padding-top: 20px;
    }
    .top-jigyou {
      display: flex;
      text-align: center;
      justify-content: center;
      gap: 8%;
      padding-top: 2%;
      padding-bottom: 5%;
    }
    .top-jigyou-kigyou,
    .top-jigyou-school {
      line-height: 1;
      display: block;
      width: var(--jigyou-width);
      height: var(--jigyou-height);
      border: 5px solid #1395e4;
      border-radius: 10%;
      background-color: rgb(233, 233, 233);
    }
    .top-jigyou-kigyou h6,
    .top-jigyou-school h6 {
      padding-top: 115px;
      font-size: 35px;
      padding-bottom: 20px;
    }
    .top-jigyou-kigyou p,
    .top-jigyou-school p {
      padding-top: 30px;
      line-height: 1.8;
      font-size: 20px;
    }
    @media (max-width: 768px) {
      .top-office {
        height: 260px;
      }
      .top-jigyou-title {
        font-size: 20px;
        margin-top: 10px;
        padding-top: 10px;
      }
      .top-jigyou-kigyou h6,
      .top-jigyou-school h6 {
        padding-top: 40px;
        font-size: 16px;
        padding-bottom: 10px;
      }
      .top-jigyou-kigyou p,
      .top-jigyou-school p {
        padding-top: 5px;
        line-height: 1.8;
        font-size: 5px;
      }
      .top-jigyou-kigyou,
      .top-jigyou-school {
        height: 150px;
        border: 3px solid #1395e4;
      }
    }

    /* 会社概要メインに適用 */
    .gaiyou-main {
      margin: 0 8% 0 8%;
    }
    .kaisha-info {
      border-collapse: collapse;
      margin: 20px 8% 0 0;
    }

    .kaisha-info2 {
      border-collapse: collapse;
      margin: 20px 0 0 8%;
    }
    .kaisha-info th {
      color: #fff;
      background-color: #1395e4;
      vertical-align: middle;
    }
    .kaisha-info th,
    .kaisha-info td {
      border: 2px solid #dff2fc;
      padding: 15px;
    }

    .kaisha-info2 th,
    .kaisha-info2 td {
      border: 2px solid #dff2fc;
      padding: 15px;
    }

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

      .kaisha-info {
        margin-right: 0;
        font-size: 10px;
      }

      .kaisha-info2 {
        margin: 20px auto 0;
      }

      .kaisha-info th {
        white-space: nowrap;
        writing-mode: horizontal-tb;
      }
    }

    /* 社長挨拶 */
    .ceo-subtitle {
      position: relative;
      left: 148px;
      margin-top: 30px;
      margin-bottom: 10px;
    }

    .ceo-title {
      position: relative;
      left: 148px;
      margin-bottom: 20px;
      font-size: 40px;
    }

    .ceo-greeting {
      display: flex;
      margin: 30px;
      justify-content: center;
    }

    .ceo-img img {
      max-width: 450px;
      height: auto;
      border-radius: 20px;
    }

    .greeting-message-box{
      font-size: 20px;
      max-width: 1000px;
      margin: 20px 0 0 20px;
      padding: 10px;
      line-height: 1.6;
      text-align: justify;
      /* 両端揃え */
    }

    .ceo-name {
      position: relative;
      display: flex;
      margin-left: 30px;
      gap: 30px;
    }

    .hosoi {
      position: relative;
      bottom: 9px;
      font-size: 28px;
    }

    /* 社長の経歴 */
    .under-line {
      margin: 150px 8% 0 8%;
      position: relative;
      font-weight: bold;
      line-height: 1.3;
      font-size: 26px;
      border-bottom: 3px solid #dedede;
      padding-bottom: .4em;
    }

    .under-line:before {
      position: absolute;
      bottom: -3px;
      width: 133px;
      height: 3px;
      display: block;
      content: "";
      background-color: #1395e4;
    }

    .ceo-career {
      max-width: 100%;
      width: 1600px;
      height: auto;
      display: block;
      margin: 0 auto;
    }

  @media screen and (max-width: 768px) {
    /* 社長挨拶 */
    .ceo-subtitle {
      left: 25px;
      margin-top: 10px;
      font-size: 10px;
    }

    .ceo-title {
      margin-bottom: 5px;
      left: 25px;
      font-size: 20px;
    }

    .ceo-greeting {
      display: flex;
      flex-direction: column;
    }
    .ceo-img {
      /* コンテナは高さ0＋paddingでアスペクト比（50%＝上半分）を指定 */
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 60%;  /* 画像高さの50%分だけ表示 */
      overflow: hidden;      /* はみ出した下半分を隠す */
    }
    .ceo-img img {
      /* コンテナいっぱいに広げ、上寄せ */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      object-fit: cover;     /* 画像比率を保ってコンテナを埋める */
      object-position: top;  /* 上側を基準に表示 */
    }

    .greeting-message {
      position: relative;
      bottom: 47px;
      display: flex;
      flex-direction: column-reverse;
      margin-bottom: 0px;
    }
    .greeting-message-box {
      font-size: 12px;
      max-width: 450px;
      margin: 10px auto 0;
      line-height: 1.6;
      text-align: justify;
      /* 両端揃え */
    }
    .ceo-name {
      top: 60px;
      right: 30px;
    }
    .ceo-name p {
      padding-bottom: 60px;
    }

    .hosoi {
      margin-left: 10px;
      bottom: 9px;
      font-size: 22px;
    }


    /* 社長の経歴 */
    .under-line {
      margin: 30px 8% 0 8%;
      position: relative;
      font-weight: bold;
      line-height: 1.3;
      font-size: 16px;
      border-bottom: 3px solid #dedede;
      padding-bottom: .4em;
    }
  
    .under-line:before {
      position: absolute;
      bottom: -3px;
      width: 85px;
      height: 3px;
      display: block;
      content: "";
      background-color: #1395e4;
    }
  
    .ceo-career {
      max-width: 100%;
      width: 1600px;
      height: auto;
      display: block;
      margin: 0 auto;
    }
  }


    /* お問い合わせフォーム */
    .form-main {
      width: 100%;
      margin: 0;
      padding-bottom: 3%;
      background-color: #dff2fc;
    }
    @media screen and (max-width: 480px) {
      .form-main {
        max-width: 100%;
        width: 100%;
        margin: 0;
        box-shadow: none;
      }
    }
    .form-title {
      color: #1395e4;
      font-size: 40px;
      text-align: center;
      margin-top: 0px;
      padding-top: 40px;
      margin-bottom: 30px;
    }
    @media screen and (max-width: 480px) {
      .form-title {
        font-size: 24px;
        margin-top: 0;
      }
    }
    .deco {
      display: flex;
      justify-content: center;
      gap: 20px;
    }
    .deco p {
      font-size: 18px;
      font-weight: bold;
      padding: 18px 10px;
    }
    @media screen and (max-width: 480px) {

      .deco p {
        font-size: 12px;
        padding: 10px 5px;
      }
    }
    .deco-main {
      color: #fff;
      background: #1395e4;
      border-radius: 50px;
      padding: 0 60px;
      margin: 0 20px;
    }
    @media screen and (max-width: 480px) {
      .deco-main {
        padding: 0 20px;
        margin: 0 10px;
      }
    }
    .deco-main2 {
      color: #fff;
      background: #1395e4;
      border-radius: 50px;
      padding: 0 60px;
      margin: 0 20px;
      opacity: 0.5;
    }
    @media screen and (max-width: 480px) {
      .deco-main2 {
        padding: 0 20px;
        margin: 0 10px;
      }
    }
    .deco-main3 {
      color: #fff;
      background: #1395e4;
      border-radius: 50px;
      padding: 0 60px;
      margin: 0 20px;
      opacity: 0.5;
    }
    @media screen and (max-width: 480px) {
      .deco-main3 {
        padding: 0 20px;
        margin: 0 10px;
      }
    }
    .Form {
      margin-top: 40px;
      margin-left: auto;
      margin-right: auto;
      max-width: 720px;
    }
    @media screen and (max-width: 480px) {
      .Form {
        margin-top: 40px;
      }
    }
    .form-confilm {
      font-size: 20px;
      margin-bottom: 20px;
    }
    @media screen and (max-width: 480px) {
      .form-confilm {
        margin-left: 15px;
        margin-bottom: 5px;
      }
      .form-confilm-title {
        font-size: 18px;
      }
      .form-click {
        font-size: 12px;
      }
    }
    .Form-Item {
      border-top: 1px solid #dedede;
      padding-top: 24px;
      padding-bottom: 24px;
      width: 100%;
      display: flex;
      align-items: center;
    }
    .dob-wrapper {
      width: 100%;
      display: flex;
      align-items: center;
    }
    @media screen and (max-width: 480px) {
      .dob-wrapper {
        display: flex;
        flex-direction: row; /* 横並びにする */
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding-top: 18px;
      }

      .dob-wrapper select {
        flex: 1;
        min-width: 0;
        font-size: 14px;
        height: 40px;
        margin-top: 0;
      }

      /* 不要な個別マージンを打ち消し */
      .dob-wrapper .Form-Item-Input {
        margin-left: 0;
        margin-top: 0;
      }
    }
    .dob-wrapper2 {
      width: 100%;
      display: flex;
      align-items: center;
    }

    @media screen and (max-width: 480px) {
      .dob-wrapper2 {
        display: flex;
        padding-top: 24px;
        padding-bottom: 8px;
        align-items: center;
        gap: 6px;           /* ボタン同士の間隔を狭く */
        font-size: 14px;    /* ラベル文字をちょっと小さく */
      }
      .dob-wrapper2 input[type="radio"]:nth-of-type(1) {
        /* 幅・高さを直接指定 */
        width: 20px;
        height: 20px;
        /* 不要な余白はリセット */
        margin: 0 12px 0 8px;
      }

      .dob-wrapper2 input[type="radio"]:nth-of-type(2) {
        /* 幅・高さを直接指定 */
        width: 20px;
        height: 20px;
        /* 不要な余白はリセット */
        margin: 0 12px 0 84px;
      }

      .dob-wrapper2 input[type="radio"]:nth-of-type(3) {
        /* 幅・高さを直接指定 */
        width: 20px;
        height: 20px;
        /* 不要な余白はリセット */
        margin: 0 12px 0 84px;
      }

    }
    @media screen and (max-width: 480px) {
      .Form-Item {
        display: flex;
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 16px;
        padding-bottom: 16px;
        flex-wrap: wrap;
      }
    }
    .Form-Item:nth-child(5) {
      border-bottom: 1px solid #dff2fc;
    }
    .Form-Item-Label {
      width: 100%;
      max-width: 248px;
      letter-spacing: 0.05em;
      font-weight: bold;
      font-size: 18px;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Label {
        max-width: inherit;
        display: flex;
        align-items: center;
        font-size: 15px;
      }
    }
    .Form-Item-Label.isMsg {
      margin-top: 8px;
      margin-bottom: auto;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Label.isMsg {
        margin-top: 0;
      }
    }
    .Form-Item-Label-Required {
      border-radius: 6px;
      margin-right: 8px;
      padding-top: 8px;
      padding-bottom: 8px;
      width: 48px;
      display: inline-block;
      text-align: center;
      background: #1395e4;
      color: #fff;
      font-size: 14px;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Label-Required {
        border-radius: 4px;
        padding-top: 4px;
        padding-bottom: 4px;
        width: 32px;
        font-size: 10px;
      }
    }
    .Form-Item-Input {
      border: 1px solid #ddd;
      border-radius: 6px;
      margin-left: 40px;
      padding-left: 1em;
      padding-right: 1em;
      height: 48px;
      flex: 1;
      width: 100%;
      max-width: 410px;
      background: #eaedf2;
      font-size: 18px;
    }

    input[type="radio"]:checked {
      accent-color: #1395e4 !important;
    }

    @media screen and (max-width: 480px) {
      .Form-Item-Input {
        margin-left: 0;
        margin-top: 18px;
        height: 40px;
        flex: inherit;
        font-size: 15px;
      }
    }
    .Form-Item-Input2 {
      border: 1px solid #ddd;
      border-radius: 6px;
      margin-left: 40px;
      padding-left: 1em;
      padding-right: 1em;
      height: 48px;
      flex: 1;
      width: 100%;
      max-width: 410px;
      background: #eaedf2;
      font-size: 18px;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Input2 {
        margin-left: 0;
        margin-top: 18px;
        height: 40px;
        flex: inherit;
        font-size: 15px;
      }
    }
    .Form-Item-Textarea {
      border: 1px solid #dff2fc;
      border-radius: 6px;
      margin-left: 40px;
      padding-left: 1em;
      padding-right: 1em;
      height: 216px;
      flex: 1;
      width: 100%;
      max-width: 410px;
      background: #eaedf2;
      font-size: 18px;
    }
    @media screen and (max-width: 480px) {
      .Form-Item-Textarea {
        margin-top: 18px;
        margin-left: 0;
        height: 200px;
        flex: inherit;
        font-size: 15px;
      }
    }
    .Form-Btn {
      border: 2px solid #1395e4;
      border-radius: 6px;
      margin-top: 32px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 20px;
      padding-bottom: 20px;
      width: 280px;
      display: block;
      letter-spacing: 0.05em;
      background: #1395e4;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
    }
    .Form-Btn-Group {
      display: flex;
      justify-content: center;
      margin: 10% 0;
      gap: 10%;
    }

    .Form-Btn-Group .Form-Btn {
      margin: 0 5px;  /* 両側に5pxずつの余白 */
    }
    form:link {
      color: #fff;
      text-decoration: none;
    }

    .Form-Btn:visited{
      color: #fff;
    }
    .Form-Btn:active {
      background-color: #fff;
      color: #1395e4;
    }
    .Form-Btn:hover {
      background-color: #fff;
      color: #1395e4;
    }
    @media screen and (max-width: 480px) {
      .Form-Btn {
        margin-top: 24px;
        padding-top: 8px;
        padding-bottom: 8px;
        width: 160px;
        font-size: 16px;
      }
    }
    @media screen and (max-width: 480px) {
      input[type="radio"] {
        width: auto;
        height: auto;
        margin: 0 8px 0 0;  /* 必要なら間隔だけ調整 */
        transform: scale(2.0);
      }
    }


    /* 送信完了コンテナ全体の背景色・文字色 */
    .message--sent {
      text-align:center;
      background-color:#1395e4;
      color:#fff;
      margin: 30px 20%;
      padding: 5px 0 10px 0;
      border-radius: 20px
    }
    .message--sent {
      background-color: #1395e4 !important;
      color: #fff !important;
      text-align: center; /* もともとの inline style と同じ効果 */
    }
    /* h2 や p など、すべての子要素にも白文字を強制 */
    .message--sent > * {
      color: #fff !important;
    }
    @media screen and (max-width: 480px) {
      .message--sent {
        margin-right: 2%;
        margin-left: 2%;
      }
    }
    .form-process {
      padding: 1% 0;
      font-size: 30px;
    }
    @media screen and (max-width: 480px) {
      .form-process {
        font-size: 24px;
      }
    }
    .thank-text {
      padding-bottom: 1%;
    }
    @media screen and (max-width: 480px) {
      .thank-text {
        font-size: 8px;
      }
    }