/* =====================================
    共通レイアウト　ここから
===================================== */

/* ベーススタイル */
body{
  margin: 0;
  /* 日本語の明朝体を優先指定 */
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "HGS Mincho E", serif;
    color: #333;
    -webkit-font-smoothing: antialiased;
}

main > div {
  max-width: 100%; /* コンテンツの最大横幅 */
  padding: 60px 20px; /* 上下の間隔と、スマホ用の左右余白 */
}

br.pc-br{
  display: inline;
}

br.sp-br{
  display: none;
}

.sp-display{
  display: none;
}

img{
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

.title,.sub_title,.image{
    display: flex;
    justify-content: center; /* 横方向の中央寄せ */
    align-items: center;     /* 縦方向の中央寄せ（必要に応じて） */
    width: 100%;
    margin-bottom: 1em;     /* 下のコンテンツとの間隔 */
}

/* タイトル内の画像も確実に中央に配置 */
.title img,.sub_title img{
    display: block;
    width: 60%;
}

.image img{
    margin-left: auto;
    margin-right: auto;
    width: 65%;
}

h2{
  margin: 15px auto;
}

h3{
  color: #40210f;
  font-size: 21px;
}

p{
  font-size: 18px;
}

#work_introduction{
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),url(../img/top_background3.jpg);
}

/* =====================================
    共通レイアウト　ここまで
===================================== */


/* =====================================
    ヘッダー　ここから
===================================== */

header {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #fff; /* ここが画像の下の余白の色になります */
    overflow: hidden;
}

.swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ★ここがポイント：画像の高さを「100%」から「60px」引いたサイズにする */
.swiper-slide img {
    width: 100%;
    height: calc(100% - 60px); /* 60px分、下に隙間ができます */
    object-fit: cover;
}

/* アイコンをその「60pxの隙間」の真ん中あたりに配置する */
.swiper-pagination {
    bottom: 0 !important; /* 下から20pxの位置に固定 */
    z-index: 10;
}

/* 丸いアイコン自体の基本スタイル（全スライド共通） */
.swiper-pagination-bullet {
    width: 1em;
    height: 1em;
    background-color: #ccc; /* 待機中の色（薄いグレー） */
    opacity: 1;             /* 透明度を下げない（色をハッキリ出す） */
    margin: 0 15px !important;
    transition: background-color 0.3s ease; /* 色の変化を滑らかにする */
}

/* 表示中の画像に連動して付与される「アクティブ」な状態 */
.swiper-pagination-bullet-active {
    background-color: #40210f; /* 選択中の色（濃い茶色） */
    /* widthを 12px のままにすることで、正円を維持します */
    width: 1em; 
}

/* --- 矢印とオーバーレイの設定 --- */

/* 1. 矢印の共通設定（最初は透明にしておく） */
.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
    width: 15%;              /* クリック反応エリアを広く取る */
    height: 100%;            /* 画像の高さに合わせる */
    top: 0;
    margin-top: 0;
    color: #fff;             /* 矢印の色 */
    opacity: 0;              /* 普段は隠す */
    transition: all 0.4s ease; /* ふわっと出す */
    z-index: 10;
}

/* 2. マウスを乗せた時のオーバーレイ効果（左右の端を少し暗くする） */
.mySwiper .swiper-button-prev {
    left: 0;
    /* background: linear-gradient(to right, rgba(0,0,0,0.1), transparent); */
}
.mySwiper .swiper-button-next {
    right: 0;
    /* background: linear-gradient(to left, rgba(0,0,0,0.1), transparent); */
}

/* 3. スライダー全体にマウスを乗せたら矢印と背景を出す */
.mySwiper:hover .swiper-button-prev,
.mySwiper:hover .swiper-button-next {
    opacity: 1;
}

/* 4. 矢印自体のサイズ調整（Swiperのデフォルトアイコン） */
.mySwiper .swiper-button-next::after,
.mySwiper .swiper-button-prev::after {
    font-size: 30px;         /* 矢印の大きさ */
    font-weight: bold;
}

/* 矢印アイコン自体の位置をさらに微調整したい場合 */
.mySwiper .swiper-button-prev::after {
    /* 左矢印をさらに左へ寄せたい場合は負の数値を設定 */
    transform: translateX(-50px); 
}

.mySwiper .swiper-button-next::after {
    /* 右矢印をさらに右へ寄せたい場合は正の数値を設定 */
    transform: translateX(50px);
}


header .inner {
    /* 常に画面上部に固定する設定 */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 10%;
    /* 重なり順を一番上にする（他のコンテンツに隠れないように） */
    z-index: 9999; 

    /* 以下は元のデザインを維持 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px; /* 固定時は少しスリムな方が綺麗なので微調整 */
    box-sizing: border-box; /* 横幅がはみ出さないように追加 */
    
    /* 上部の文字を見やすくするための黒いグラデーション */
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, 70%, transparent 100%);
}

/* ロゴ */
.logo{
  flex-shrink: 0; 
  min-width: 0; 
  margin-left: 0.3em;
}

.logo img{
  height: auto;
  max-height: 50px; 
  max-width: 100%;  
  display: block;
}

/*　メニュー */
.header-right{
  display: flex;
  align-items: center;
  flex-grow: 1; 
  justify-content: flex-end; 
  margin-right: 0.3em;
}

header nav{
    flex-shrink: 1; 
}

header nav ul.navi{
  list-style: none;
  display: flex;
  margin: 0 auto;
  padding: 0;
  justify-content: center; 
}

header nav ul.navi li{
  margin-left: 3vw; 
  position: relative;
}

header nav ul.navi li:first-child{
    margin-left: 0;
}

header nav ul.navi li + li::before{
  content: "/";
  position: absolute;
  left: -1.8vw; 
  top: 50%;
  transform: translateY(-50%);
  color: #fff; 
  background: none;
  width: auto;
  height: auto;
}

header nav ul.navi a {
  text-decoration: none;
  font-size: 1.3vw;
  color: #fff;
  font-weight: 600; 
  transition: color 0.2s;
  letter-spacing: 0.2em;
}

#company #nav_company a,#products #nav_products a,#affiliated #nav_affiliated a,#support #nav_support a,#recrut #nav_recrut a,header nav ul.navi a:hover {
  color: #87cefa;
}

/* ハンバーガーアイコン（PCでは非表示） */
.ac_menu{
  display: none;
  width: 35px;   
  height: 25px;  
  cursor: pointer;
  z-index: 10000;
  position: relative;
}

.ac_menu span,
.ac_menu span::before,
.ac_menu span::after{
  position: absolute;
  content: "";
  left: 0;
  width: 35px; 
  height: 3px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.ac_menu span{
  top: 50%;
  transform: translateY(-50%);
}

.ac_menu span::before{
  top: -9px; 
}

.ac_menu span::after{
  bottom: -9px; 
}

.ac_menu.active span{
  background: transparent;
}

.ac_menu.active span::before{
  transform: rotate(45deg);
  top: 0;
}

.ac_menu.active span::after{
  transform: rotate(-45deg);
  bottom: 0;
}

/* パンくずリスト */
.breadcrumb{
  font-size: 0.9rem;
  margin: 20px 5%;
}
.breadcrumb ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
.breadcrumb li + li::before{
  content: "＞";
  margin: 0 0.5em;
  color: #aaa;
}
.breadcrumb a{
  text-decoration: none;
  font-family: "din-2014-narrow", sans-serif; 
  font-weight: 600; 
  transition: color 0.2s;
  letter-spacing: 0.2em;
}
.breadcrumb li:last-child{
  text-decoration: none;
  color: #87cefa;
  font-family: "din-2014-narrow", sans-serif; 
  font-weight: 600; 
  transition: color 0.2s;
  letter-spacing: 0.2em;
}

/* =====================================
    ヘッダー　ここまで
===================================== */


/* =====================================
    ごあいさつ（決定版：強制中央寄せ）
===================================== */
#introduction {
  width: 100%;
  padding: 2em 0; /* 左右のpaddingを一旦0に */
  display: flex;
  flex-direction: column;
  align-items: center;    /* 子要素を水平中央に */
  text-align: left;       /* 文章自体は左揃え */
}

/* タイトル部分 */
#introduction .title {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 1.5em;
}


#introduction .container{
  width: 90%;           /* 画面幅に対する割合 */
  max-width: 1200px;    /* 最大幅（profileと共通にする） */
  margin: 0 auto;       /* 中央寄せ */
  padding-left: 2em;
  box-sizing: border-box;
  border-left: #40210f 2px solid;
}

/* 文章の枠組み（ここが重要） */
#introduction .text {
  
  /* widthを自由に変えても、margin: auto があれば中央に留まります */
  width: 85%; 
  max-width: 1000px;      /* 広がりすぎ防止 */
  
  box-sizing: border-box; /* paddingで幅が広がらないように固定 */
}

/* 各段落の調整 */
#introduction .text p {
  width: 100% !important; /* 個別のwidth指定を無効化 */
  margin-left: 0;
  margin-right: 0;
  line-height: 1.9;
  margin-bottom: 1.5em;
}

/* =====================================
    ごあいさつ　ここまで
===================================== */



/* =====================================
    プロフィール　ここから
===================================== */

#profile{
  background-image: url(../img/top_background2.jpg);
  width: 100%;
  padding: 60px 0; /* 左右のpaddingを一旦0に */
  display: flex;
  flex-direction: column;
  align-items: center;    /* 子要素を水平中央に */
  text-align: left;       /* 文章自体は左揃え */
}

#profile .profile_name h3{
  margin-bottom: 20px;
  font-size: 28px;
}


#profile .container{
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: 15px;
  width: 90%;           /* 画面幅に対する割合 */
  max-width: 1200px;    /* 最大幅（profileと共通にする） */
  margin: 0 auto;       /* 中央寄せ */
  padding-left: 2em;
  box-sizing: border-box;
  border-left: #40210f 2px solid;
}

#profile .container .image_box,
#profile .container .text_box{
  width: 100%; /* ここで横幅を等しくします */
  box-sizing: border-box; /* 必要に応じてパディングを含めて幅を計算する場合に推奨 */
}

#profile .container .text{
  padding-right: 0;
  width: 100% !important; /* 個別のwidth指定を無効化 */
  margin-left: 0;
  margin-right: 0;
  line-height: 1.9;
  margin-bottom: 1.5em;
}


#profile .container .text h4{
  font-size: 18px;
}

#profile .container .text a{
  font-weight: bold; text-decoration: underline;
}

#profile .container .text h3{
  font-weight: bold;
}

#profile .container .text table tbody tr th{
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap; 
    text-align: left;
    text-justify: inter-ideograph; 
    vertical-align: top;
}

#profile .container .text table tbody td{
  font-size: 18px;
  text-align: left;
  vertical-align: top;
}

#profile .container .image_box {
  display: flex;           /* Flexboxを開始 */
  justify-content: center;  /* 左右の中央寄せ */
  align-self: stretch;      /* 右側の文章と同じ高さまでエリアを広げる */
}

#profile .container .image {
  margin-bottom: 0;        /* 共通設定の margin-bottom: 30px を打ち消す */
  width: auto;             /* 幅を自動（画像サイズ）に戻す */
  display: block;          /* flexからblockに戻して安定させる */
}

#profile .container .image img {
  width: 100%;             /* 親要素(.image)の幅に合わせる */
  max-width: 300px;        /* お好みの画像サイズに調整してください */
  height: auto;
  display: block;
  margin: 0;               /* 余計な余白をカット */
  border: #fff 3px solid;
}

/* =====================================
    プロフィール　ここまで
===================================== */

/* =====================================
    著書　ここから
===================================== */

#book .image img{
    width: 40%;
}

#book .button{
  display: flex;
}

#book .book-button{
    display: block;
    margin: 0 auto;
    align-items: center;
    width: 250px;
    height: 50px;
    background-color: #40210f;
    color: white;
    font-size: 1.3rem;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#book .book-button:hover{
    background-color: #0066cc;
}


/* =====================================
    著書　ここまで
===================================== */

/* =====================================
    作品　ここから
===================================== */
#works{
  width: 100%;
  padding: 3em 0; /* 左右のpaddingを一旦0に */
  display: flex;
  flex-direction: column;
  align-items: center;    /* 子要素を水平中央に */
  text-align: left;       /* 文章自体は左揃え */
}

#works .works_list {
  display: grid;
  /* 1fr 1fr から、中身に合わせた設定に変更 */
  grid-template-columns: repeat(2, minmax(0, 400px)); 
  
  /* 左右の間隔を直接指定（10pxなどお好みで） */
  column-gap: 60px; 
  row-gap: 40px;    /* 上下の行間はお好みで維持 */
  
  justify-content: center; /* 2列の塊を画面中央に寄せる */
  width: 100%;
  margin: 0 auto;
}

#works .works_list .card{
  text-align: center;
}

#works .works_list .card a {
    display: block;          /* カード全体をクリック可能にする */
    text-decoration: none;   /* 下線を消す */
    color: inherit;          /* 文字色を親要素から引き継ぐ */
    transition: background-color 0.3s ease; /* 変化をふわっとさせる（0.3秒） */
    border-radius: 8px;      /* 角を丸くしている場合はここも合わせる */
    overflow: hidden;        /* はみ出し防止 */
}

/* マウスが乗ったとき（ホバー時）の設定 */
.card a:hover {
    /* 半透明の青色 (赤0, 緑100, 青255, 透明度0.3) */
    background-color: #BFA46F; 
}

/* 画像自体の透明度も少し変えると、より「選んでいる感」が出ます */
.card a:hover img {
    opacity: 0.8;            /* 画像を少し薄くする */
    transition: opacity 0.3s;
}

#works .works_list .card h3{
  font-size: 1.3em;
}


#works .works_list .card .image img {
  /* 共通設定の width: 65% が隙間を作っている原因なので、100%に広げる */
  width: 100%; 
  max-width: 100%;
  height: auto;
}


/* =====================================
    作品　ここまで
===================================== */

/* =====================================
    お問合せ　ここから
===================================== */
#contact{
  background-image: url(../img/);
}

#mailformpro{
  margin: 0 auto;
}

.form-row {
    /* Flexboxを有効にする */
    display: flex;
    
    /* 子要素（.form-group）を横方向の中央に配置する */
    justify-content: center;
    
    /* 子要素が画面幅を超えたら折り返す */
    flex-wrap: wrap; 

    /* ★重要★ フォーム全体が画面中央に来るように、親要素も中央寄せにする */
    /* この設定がないと、form-rowが画面いっぱいに広がり続けます */
    max-width: 800px; /* 適切な幅に設定 */
    margin: 0 auto; 
}

.inquiry-form {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
}

/* フォームの各行のレイアウト (Gridを使用) */
.form-group {
    display: grid;
    /* ★ここを修正します★ */
    /* 1. ラベル(固定幅) 2. 必須マーク(固定幅) 3. 入力欄(残りの幅) */
    grid-template-columns: 120px 70px 1fr; 
    gap: 10px; 
    align-items: center;
    margin: 0;
    margin-bottom: 15px;
}

label{
  font-size: 18px;
}

/* ラベルのスタイル */
.form-label{
    font-weight: bold;
    color: #333;
    white-space: nowrap; 
    text-align-last: justify;       /* Chrome・Firefox用 */
}

/* 必須マークのスタイル */
.required-badge {
    background-color: #40210f; /* 画像の緑色に合わせる */
    color: white;
    font-size: 0.9em;
    margin: 0 0.5em;
    padding: 2px 8px;
    border-radius: 2em;
    text-align: center;
}

/* 入力欄（input, textarea）のスタイル */
.form-group input:not([type="submit"]),
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #333;
    box-sizing: border-box;
    font-size: 1rem;
    background-color: #fff;
}
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #333;
    box-sizing: border-box;
    font-size: 1rem;
    background-color: #fff;
}

/* お問い合わせ内容（textarea）の行の設定 */
.form-group.full-width {
    display: grid;
    /* 他の項目と同じカラム設定を維持することで、ラベル幅(120px)を揃える */
    grid-template-columns: 120px 70px 1fr; 
    gap: 10px;
    margin-bottom: 20px;
}

/* ラベルとスペーサー（または必須バッジ）はそのまま1行目に配置 */
.form-group.full-width .form-label,
.form-group.full-width .grid-spacer,
.form-group.full-width .required-badge {
    grid-row: 1; 
}

/* 入力欄（div）を2行目に配置し、1列目〜3列目まで広げる */
.form-group.full-width > div {
    grid-row: 2;         /* 2行目に配置 */
    grid-column: 1 / 4;  /* 1カラム目から4カラム目の手前（つまり全部）まで結合 */
    width: 100%;
    margin-top: 5px;     /* ラベルとの隙間を微調整 */
}

.form-group.full-width textarea {
    width: 100%;         /* 横幅いっぱい */
    min-height: 150px;   /* 高さを確保 */
}


/* 確認ボタンのスタイル */
.button{
  display: flex;
}

.confirm-button{
    display: block;
    width: 250px;
    padding: 15px 30px;
    margin: 40px 20px 20px auto;
    background-color: #40210f;
    color: white;
    font-size: 1.3rem;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.reset-button,.back-button{
    display: block;
    width: 250px;
    padding: 15px 30px;
    margin: 40px auto 20px 20px;
    background-color: #ccc;
    color: #333;
    font-size: 1.3rem;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.confirm-button:hover,.reset-button:hover{
    background-color: #0066cc;
}

/* 各フォームグループを全幅にする */
#support02 .form-group {
    width: 100%;
    margin-right: 0; /* 横方向のマージンをリセット */
    margin-bottom: 20px; /* 項目間に適切な間隔を設定 */
    box-sizing: border-box; /* パディングやボーダーを含めて幅を計算 */
}

/* ラベルと入力値の表示部分（確認画面で値が入っている<div>）を調整 */
#support02 .form-group > div {
    /* 必要に応じて、テキストが長くなっても崩れないように調整 */
    word-break: break-word; 
    padding-left: 0; 
}

/* =====================================
    お問合せ　ここまで
===================================== */
/* index.html (#home_page) の時だけ、起動前はライトボックスを完全に消去 */
#home_page .lightbox-overlay:not(.active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* どのページでも、active クラスがない時はボタン類を隠す設定 */
.lightbox-overlay:not(.active) .lightbox-prev,
.lightbox-overlay:not(.active) .lightbox-next,
.lightbox-overlay:not(.active) .lightbox-close {
  display: none !important;
}