@charset "UTF-8";

html {
    scroll-behavior: smooth; /* ページ内リンクに飛ぶ際のスクロールをなめらかに */
}

body{
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /* フォント指定 */
}

ul {
    list-style: none; /* 箇条書きの中黒を非表示 */
    padding: 0; /* 内側の空き */
    margin: 0; /* 外側の空き */
}

/*------------- スマホ時は非表示に -------------*/
.pc_only{
    display: none; /* 非表示（PC用の設定の為） */
}

#pc_header{
    display: none; /* 非表示（PC用の設定の為） */
}

/*------------- 見出し -------------*/
h1{
    font-size: 18px; /* 文字サイズ */
    float: left; /* 左から順に並ぶ */
}


/*------------- 1番外側の枠 -------------*/
.wrapper{
    width: 100%; /* 横幅を画面いっぱいに */
    position: relative; /* 子要素の配置の基準点 */
    overflow: hidden; /* はみ出たら非表示 */
    min-height: 100vh; /* ビューポートの高さ確保 */
    box-sizing: border-box; /* 幅や高さの中にborderとpaddingを含める（通常は別） */
    padding-bottom: 200px; /* 内側の下の空き。footerの高さと同じにする */
}





/*------------- ヘッダー -------------*/
#sp_header{
    width: 100%; /* 横幅を画面いっぱいに */
    height: 70px; /* 高さ */
	position: fixed !important; /* 位置固定 */
	display: flex; /* 子要素を横並びや中央揃えにする */
    justify-content: space-between; /* 両端揃え */
    top: 0; /* 親要素を基準に上からの位置 */
    left: 0; /* 親要素を基準に左からの位置 */
	background-color: #ffffff; /* 背景色 */
	z-index: 1001;　/* 前面へ（数字が大きいほど上になる） */
    border-bottom: 1px solid #ffffff; /* 下線（太さ、線の種類、色） */
    box-shadow: 0 0 0.8vw rgb(0 0 0 / 50%); /* 影（上下、右左、ぼかしの順）、色と透明度 */
}

/*-- ヘッダー内リンク --*/
#sp_header a{
    color: #000000; /* 文字色 */
    text-decoration: none; /* リンクの装飾を消す */
}

/*-- ヘッダー内ロゴの枠 --*/
.logo{
    width: auto; /* 横幅 */
    height: 70px; /* 高さ */
    line-height: 70px; /* 垂直に対して中央に */
    display: flex; /* 垂直に対して中央にする */
    float: left; /* 左から順に並ぶ */
}

/*-- ロゴ枠の画像 --*/
.logo img{
    width: auto; /* 横幅 */
    height: 30px; /* 高さ */
    margin: 22px 5px 18px 15px; /* 外側の空き（上、右、下、左） */
    float: left; /* 左から順に並ぶ */
}

/*-- ロゴ枠内の文字 --*/
.logo p{
    float: left; /* 左から順に並ぶ */
    font-family: 'Libre Baskerville', serif; /* フォント指定 */
    font-size: 14px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
    margin: auto; /* 外側の空き */
}





/*-- ヘッダー内メニュー --*/
/*-- メニューの枠 --*/
.sp_menu {
    width: 200px; /* 横幅 */
    height: 100%; /* 高さ */
    position: fixed; /* 位置を固定 */
    top: 0; /* 親要素を基準に上からの位置 */
    right: -100%; /* 初期状態では画面の外に隠れている */
    background-color: #fff; /* 背景色 */
    transition: right 0.5s ease; /* スライドインのアニメーション（対象、変化にかかる時間、変化の進行度合い） */
    padding: 20px; /* 内側の空き */
    box-sizing: border-box; /* 幅や高さの中にborderとpaddingを含める（通常は別） */
    z-index: 1101; /* 前面へ（数字が大きいほど上になる） */
    overflow-x: hidden; /* はみ出した部分を非表示に */
    overflow-y: auto; /* 中身がはみ出したとき だけスクロールバーが表示されてスクロール可能になる */
}

/* メニューが開いているとき */
.sp_menu.open {
    right: 0; /* 親要素を基準に右からの位置 */
    z-index: 1101; /* 前面へ（数字が大きいほど上になる） */
}

/* ボタンのスタイル */
.hamburger {
    position: fixed; /* 位置を固定 */
    top: 20px; /* 親要素を基準に上からの位置 */
    right: 20px; /* 親要素を基準に右からの位置 */
    width: 30px; /* 横幅 */
    cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
    z-index: 1201; /* 最前面へ（数字が大きいほど上になる） */
}

.hamburger span {
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
    width: 100%; /* 横幅 */
    height: 3px; /* 高さ */
    background-color: #7d7d7d; /* 背景色 */
    margin: 5px 0; /* 外側の空き（上下、左右） */
    transition: 0.4s; /* アニメーション（変化にかかる時間） */
}

/* バツ印に変化するスタイル */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0; /*透明度 */
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* メニューリストのスタイル */
.sp_menu ul {
    padding: 0; /* 内側の空き */
    margin-top: 20px; /* 外側の上の空き */
}

.menu_link {
    width: 100%; /* 横幅 */
    height: 30px; /* 高さ */
    margin-top: 30px; /* 外側の上の空き */
    color: #333; /* 文字色 */
    text-decoration: none;
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
    border-bottom: 2px solid #ff0000; /* 下線（太さ、線の種類、色） */
    float: left; /* 左から順に並ぶ */
}

.menu_link_entry {
    width: 100%; /* 横幅 */
    height: 40px; /* 高さ */
    line-height: 40px; /* 垂直方向に中央 */
    margin-top: 40px; /* 外側の上の空き */
    color: #ffffff !important; /* 文字色 */
    text-decoration: none;
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
    background-color:#ff0000; /* 背景色 */
    float: left; /* 左から順に並ぶ */
    text-align: center; /* 文字の中央揃え */
    font-weight: bold; /* 文字の太さ */
    border-radius: 1vw; /* 角を丸く */
}

.submenu_box a {
    width: 80%; /* 横幅 */
    color: #333; /* 文字色 */
    text-decoration: none;
    border-bottom: 2px solid #ff0000; /* 下線（太さ、線の種類、色） */
    float: left; /* 左から順に並ぶ */
}

.submenu_btn{
    width: 20%; /* 横幅 */
    height: 30px; /* 高さ */
    line-height: 25px; /* 行間 */
    margin-top: 30px; /* 外側の上の空き */
    float: left; /* 左から順に並ぶ */
    cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
    border-bottom: 2px solid #ff0000; /* 下線（太さ、線の種類、色） */
    text-align: center; /* 文字の中央揃え */
}

.submenu_btn::after {
  content: "▼";
  font-size: 14px; /* 文字サイズ */
}

.submenu_box.open > .submenu_btn::after {
  content: "▲";
}

.submenu{
    width: 100%; /* 横幅 */
    margin-left: 1em; /* 外側の左の空き */
    display: none; /* 非表示 */
}

.submenu li .menu_link {
    border-bottom: none !important; /* 下線なし */
}

/* メニューを開いた時の背景 */

/* 通常は見えない */
#mask {
  opacity: 0; /*透明度 */
  visibility: hidden;
  transition: all 0.5s; /* アニメーション（対象、変化にかかる時間） */
}

/* 開かれた時に見えるように */
#mask.open{
  opacity: 0.5; /*透明度 */
  visibility: visible;
  position: fixed;
  top: 0; /* 親要素を基準に上からの位置 */
  left: 0; /* 親要素を基準に左からの位置 */
  width: 100%; /* 横幅 */
  height: 100%; /* 高さ */
  background-color: #000; /* 背景色 */
  cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
  z-index: 10; /* 前面へ（数字が大きいほど上になる） */
}






/*-- ボタン（エントリー＆TOPへ戻る） --*/
.pc_botton{
    display: none; /* 非表示 */
}

/*-- エントリーボタン --*/
.entry{
    width: auto; /* 横幅 */
    height: 30px; /* 高さ */
    position: absolute; /*親要素の position: relative; を基準に配置 */
    top: 20px; /* 親要素を基準に上からの位置 */
    right: 60px; /* 親要素を基準に右からの位置 */
    padding: 0 5px; /* 内側の空き */
    text-align: center; /* 文字の中央揃え */
    font-weight: bold; /* 文字の太さ */
    color: #ffff; /* 文字色 */
    background-color: #ff0000; /* 背景色 */
    border: solid 3px #ff0000; /* 線（線の種類、太さ、色） */
    cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
	transition: all 0.5s ease 0s; /* アニメーション（対象、変化にかかる時間、開始するまでの遅延時間、変化の進行度合い） */
}

/*-- エントリーボタン（マウスオーバー時） --*/
.entry:hover {
    color: #ff0000; /* 文字色 */
	background-color: #fff; /* 背景色 */
    border: solid 3px #ff0000; /* 線（線の種類、太さ、色） */
}





/*------------- 左からスライドイン -------------*/
/*-- 左からスライドイン（動画に見えるもの）の枠--*/
.slideinLeft {
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
    animation: slideinLeft 3s; /* 左から３秒かけてスライドイン */
}

@keyframes slideinLeft {
  0% {
    transform: translateX(-75%); /* slide-containerの横幅分を指定し、完全に隠れた状態からスタート */
  }
  100% {
    transform: translateX(0); /* 隠れたものを表示 */
  }
}

/*-- 左からスライドインの設定 --*/
.slide-container {
    width: 100%; /* 横幅 */
    height: 100vh; /* 高さを画面いっぱいに */
    padding-top: 70px; /* メニューバーを避ける */
    overflow: hidden; /* はみ出たら非表示 */
    display: flex; /* 子要素を中央揃えにする */
    align-items: center; /* 中央に */
    flex-direction: column; /* 積み重なるように配置する */
    float: left; /* 左から順に並ぶ */
    margin: 0; /* 外側の空き（上、右、下、左） */
    box-sizing: border-box; /* 幅や高さの中にborderとpaddingを含める（通常は別） */
}

.slide-wrapper {
    display: flex; /* リストを横並びにする */
    flex-direction: column; /* 積み重なるように配置する */
    animation: loop-slide 40s infinite linear 3s both; /* アニメーションの名前、40秒でアニメーション完了（速度に関係する）、無限ループ、等速で変化、何秒後に再生、再生中・再生後のスタイル */
}

.slide-wrapper li{
    vertical-align: bottom; /* 要素と子孫要素の下端を行全体の下端に揃える */
    line-height: 0; /* 行ボックスの高さ */
}

.slide{
    width: 100%; /* 横幅 */
    object-fit: cover; /* 画像の比率を保ったままボックスを埋めるように拡大 */
}

/*-- 左からスライドイン（マウスオーバー時に一時停止）
.slide-paused:hover .slide-wrapper{
    animation-play-state: paused;
}
--*/

@keyframes loop-slide {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}





/*------------- 右からスライドイン -------------*/
/*-- 右からスライドインの枠 --*/
.slideinRight {
    width: 100%; /* 横幅 */
    padding: 20px; /* 内側の空き */
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
    float: left; /* 左から順に並ぶ */
    position: absolute; /*親要素の position: relative; を基準に配置 */
    top: calc( 50vh - 70px ); /* 親要素を基準に上からの位置（ヘッダーを除いたときの画面の半分の位置） */
    left: 0; /* 親要素を基準に左からの位置 */
    animation: slideinRight 3s; /* 右から3秒かけてスライドイン */
    text-align: center; /* 文字の中央揃え */
    background-color: rgba(255,255,255,0.6); /* 背景色（R,G,B,透明度） */
}

@keyframes slideinRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

/*-- RECRUITMENTの文字 --*/
.recruitment{
    color: #ffffff; /* 文字色 */
    font-size: 40px; /* 文字サイズ */
    margin: 0; /* 外側の空き */
    padding: 0; /* 内側の空き */
    text-shadow: 5px 5px 7px #000;
}

/*-- 慶進社 中途採用の文字 --*/
.recruitment2{
    color: #ffffff; /* 文字色 */
    font-size: 41px; /* 文字サイズ */
    margin: 0; /* 外側の空き */
    padding: 0; /* 内側の空き */
    text-shadow: 5px 5px 7px #000;
}





/*------------- 中央コンテンツ -------------*/
/*-- 中央コンテンツの枠 --*/
.contents{
    width: 90%; /* 横幅 */
    text-align: center; /* 文字の中央揃え */
    margin: 0 auto; /* 枠を wrapper の中央に */
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
}

/*-- 中央コンテンツの中身 --*/
.centner{
    width: 100%; /* 横幅を枠いっぱいに */
    text-align: left; /* 文字の左揃え */
    float: left; /* 左から順に並ぶ */
}

article{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    margin: 5% 0; /* 外側の空き（上下、左右） */
}

/*-- news（中央コンテンツ） --*/
#news{
    width: 100%; /* 横幅 */
    text-align: left; /* 文字の左揃え */
    float: left; /* 左から順に並ぶ */
}

/*-- news（中央コンテンツ）のテキスト --*/
.news_text{
    width: 100%; /* 横幅を枠いっぱいに */
    float: left; /* 左から順に並ぶ */
    text-align: justify; /* 文字の均等配置 */
    text-justify: inter-ideograph; /* 最終行左寄せ */
    margin: 0; /* 外側の空き */
    text-indent: -6.7em; /* 字下げ */
    padding-left: 6.7em; /* 内側の左の空き */
    font-size: 14px; /* 文字サイズ */
}

/*-- 写真＋文字（中央コンテンツ）共通の設定 --*/
/*-- 中央オブジェクトを無視して横幅が画面いっぱいの画像 --*/
.max_img{
    width: 100vw; /* 横幅を画面いっぱいに */
    height: auto; /* 高さ */
    margin: 0 calc(50% - 50vw); /* 親要素の横幅を無視して横幅を画面いっぱいに */
}

.message_box{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */   
}

.massage_img_h2{
    position: relative; /* 子要素の配置の基準点 */
}

.message_img{
    width: 100vw; /* 横幅を画面いっぱいに */
    height: auto; /* 高さ */
    margin: 0 calc(50% - 50vw); /* 親要素の横幅を無視して横幅を画面いっぱいに */
}

#message h2{
    width: 100%; /* 横幅 */
    font-size: 6.5vw; /* 文字サイズ（画面幅に合わせて変わる） */
    line-height: 7.5vw; /* 行間 */
    position: absolute; /*親要素の position: relative; を基準に配置 */
    top: 20%; /* 親要素を基準に上からの位置 */
    left: 0%; /* 親要素を基準に左からの位置 */
    margin: 0; /* 外側の空き */
    padding: 0; /* 内側の空き */
}


/*-- 代表メッセージのカテゴリー名 --*/
#message{
    float: left; /* 左から順に並ぶ */
}

/*-- 社長の役職 --*/
.president_position{
    position: relative; /* 子要素の配置の基準点 */
    margin-top: -15vw; /* 外側の上の空き（マイナスでわざと写真と重なるように） */
    z-index: 100; /* 写真より上に表示（前面へ） */
    font-size: 14px; /* 文字サイズ */
    float: left; /* 左から順に並ぶ */
}

/*-- 社長の名前 --*/
.president_name{
    position: relative; /* 子要素の配置の基準点 */
    margin-top: -10vw; /* 外側の上の空き（マイナスでわざと写真と重なるように） */
    z-index: 100; /* 写真より上に表示（前面へ） */
    font-size: 18px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
}

/*-- 社長の名前（英語表記） --*/
.president_name_english{
    color: #7d7d7d; /* 文字色 */
}

.sp_only{
    margin-top: 5%; /* 外側の上の空き */
    margin-bottom: 0; /* 外側の下の空き */
}

/*-- 代表メッセージ --*/
#president_text{
    width: 100%; /* 横幅 */
    position: relative; /* 子要素の配置の基準点 */
    text-align: justify; /* 文字の均等配置 */
    text-justify: inter-ideograph; /* 最終行左寄せ */
    text-indent: 1em; /* 字下げ */
    font-size: 14px; /* 文字サイズ */
    float: left; /* 左から順に並ぶ */
}

#president_text p:first-child{
    margin: 0; /* 外側の空き */
    padding: 0; /* 内側の空き */
}






/*-- 部署紹介のカテゴリー名 --*/
#Business_details{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
}

#Business_details h2{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    font-size: 20px; /* 文字サイズ */
    padding-bottom: 0; /* 内側の下の空き */
    margin: 0; /* 外側の空き */
}

#Business_details p{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    font-size: 14px; /* 文字サイズ */
    text-align: justify; /* 文字の均等配置 */
    text-justify: inter-ideograph; /* 最終行左寄せ */
}


/*-- 部署紹介の枠 --*/
#department{
    float: left; /* 左から順に並ぶ */
}

/*-- 部署紹介のアイコンの入れ物--*/
#department ul{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
}

/*-- 部署紹介のアイコン --*/
/* ※注意※
部署紹介は上が3部署、下が2部署のレイアウトなので、合計が100%になる且つ、3部署並ぶ横幅を設定すること。

#department a → width 30%
                margin 右に5%
上の設定では、1部署につき35%かかるため、35%×3部署で100%を超えてしまう。
そこで、部署紹介の3番目のみmargin-rightを0%にすることで100%にしている。
幅を変えるときはレイアウトが崩れないよう注意。
*/

#department a{
    text-decoration: none; /* リンクの装飾を消す */
    width: 30%; /* 横幅 */
    height: 35px; /* 高さ */
    line-height: 35px; /* 垂直方向に中央 */
    padding: 0; /* 内側の空き */
    margin: 2.5% 5% 2.5% 0; /* 外側の空き（上、右、下、左） */
    float: left; /* 左から順に並ぶ */
    background-color: #ff0000; /* 背景色 */
    color: #ffff; /* 文字色 */
    outline: 3px solid #ff0000; /* 線の太さ、状態、色（brderとの違いは要素の幅に影響を与えない） */
    text-align: center; /* 文字の中央揃え */
    font-weight: bold; /* 文字の太さ */
    font-size: 14px; /* 文字サイズ */
    display: inline-block;  /* 横に並ぶ＋幅・高さも指定可能 */
    cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
	transition: all 0.3s ease 0s; /* アニメーション（対象、変化にかかる時間、開始するまでの遅延時間、変化の進行度合い） */
}

/*-- 部署紹介の3番目のアイコン --*/
#department a:nth-of-type(3){
    margin-right: 0; /* 外側の右の空き */
}

/*-- 部署紹介のアイコン（マウスオーバー時） --*/
#department a:hover{
    background: #ffff; /* 背景色 */
	color: #ff0000; /* 文字色 */
    outline: 3px solid #ff0000; /* 線の太さ、状態、色（brderとの違いは要素の幅に影響を与えない） */
    cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
}



/*-- リンク先の各部署名（部署紹介） --*/
.department_margin{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    margin-top: 5%; /* 外側の上の空き */
    margin-bottom: 10%; /* 外側の下の空き */
}

.department_detail{
    position: relative; /* 子要素の配置の基準点 */
    width: 30%; /* 横幅 */
    height: 35px; /* 高さ */
    line-height: 32px; /* 行間 */
    padding: 0; /* 内側の空き */
    margin: 2.5% 0 0 0; /* 外側の空き（上、右、下、左） */
    background-color: #fff; /* 背景色 */
    color: #ff0000; /* 文字色 */
    border: 3px solid #ff0000; /* 線（太さ、線の種類、色） */
    font-weight: bold; /* 文字の太さ */
    font-size: 14px; /* 文字サイズ */
    text-align: center; /* 文字の中央揃え */
}

/*-- 部署紹介のテキスト --*/
#department_text{
    width: 100%; /* 横幅 */
    position: relative; /* 子要素の配置の基準点 */
    margin: 0; /* 外側の空き */
    padding: 1.1% 3%; /* 内側の空き（上下、左右） */
    text-align: justify; /* 文字の均等配置 */
    text-justify: inter-ideograph; /* 最終行左寄せ */
    background-color: #ffffff; /* 背景色 */
    border: 3px solid #ffffff;  /* 線（太さ、線の種類、色） */
    box-shadow:0.1vw 0.2vw 0.5vw rgb(0 0 0 / 40%); /* 影（上下、右左、ぼかしの順）、色と透明度 */
    text-indent: 1em; /* 字下げ */
    font-size: 14px; /* 文字サイズ */
    box-sizing: border-box; /* 幅や高さの中にborderとpaddingを含める（通常は別） */
}

.department_text_sales{
    padding-left: 2em; /* 内側の左の空き */
    text-indent: -1em; /* 字下げ */
}

.text-indent_none{
    text-indent: 0; /* 字下げ */
}

/* カルーセル全体 */
.carousel {
    width: 100vw; /* 横幅を画面いっぱいに */
    height: auto; /* 高さ */
    position: relative; /* 子要素の配置の基準点 */
    left: 50%;
    right: 50%;
    margin-left: -50vw; /* 外側の左の空き */
    margin-right: -50vw; /* 外側の右の空き */
    display: flex; /* 子要素を横並びにする */
    overflow: hidden; /* はみ出た部分は表示しない */
}

/* カルーセル内容 */
.contains {
  /* サイズは自由に変更してください。*/
  /* 下の.carousel_slideも同じサイズにしてください。 */
  width: 100vw; /* 横幅 */
  height: 44.5302vw; /* 高さ */
  position: relative; /* 子要素の配置の基準点 */
  padding: 0; /* 内側の空き */
  list-style: none;
}

/* スライド切り換え用ラジオボタンは常に非表示 */
.slide_select {
  display: none; /* 非表示 */
}

/* 各スライド */
.carousel_slide {
  /* サイズは自由に変更してください。*/
  /* 上の.containsも同じサイズにしてください。 */
  width: 100vw; /* 横幅 */
  height: 44.5302vw; /* 高さ */
  position: absolute; /*親要素の position: relative; を基準に配置 */
  /* スライドの初期値は選択されていないので透明にしておく */
  opacity: 0; /*透明度 */
}

.carousel_slide img{
  width: 100%; /* 横幅 */
  height: auto; /* 高さ */
  object-fit: cover;
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
    z-index: 1; /* 前面へ（数字が大きいほど上になる） */
}

/* 前へ次へボタン */
.scroll_button {
  position: absolute; /*親要素の position: relative; を基準に配置 */
  display: block; /* 親要素の横幅いっぱいに広がり、改行 */
  height: 20px; /* 高さ */
  width: 20px; /* 横幅 */
  /* 縦中央から20px上の位置 */
  top: 50%; /* 親要素を基準に上からの位置 */
  border-width: 3px 3px 0 0; /* 線の太さ（上、右、下、左） */
  border-style: solid; /* 線の種類 */
  border-color: #fdfdfd; /* 線の色 */
  cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
  opacity: 0.5; /* 透明度（普段はボタンはやや薄くする） */
  z-index: 3; /* スライドよりも前面にする */
}

/* ホバー時にボタンを強調 */
.scroll_button:hover {
  opacity: 1; /*透明度 */
}

/* 前へボタン */
.scroll_prev {
  left: 30px;
  /* 上辺と右辺の枠線を回転して"＜"にする */
  transform: translateY(-50%) rotate(-135deg);
}

/* 次へボタン */
.scroll_next {
  right: 30px;
  /* 上辺と右辺の枠線を回転して"＞"にする */
  transform: translateY(-50%) rotate(45deg);
}

/* スライド移動ボタンエリア */
.move_controler {
    position: absolute; /*親要素の position: relative; を基準に配置 */
    width: 100%; /* 横幅 */
    text-align: center; /* 文字の中央揃え */
    bottom: 10%;
    z-index: 2; /* スライドより前面にする */
}

/* スライド移動の各ボタン */
.button_move {
  display: inline-block; /* 横に並ぶ＋幅・高さも指定可能 */
  height: 1vw; /* 高さ */
  width: 1vw; /* 横幅 */
  margin: 0 0.25vw; /* 外側の空き（上下、左右） */
  border-radius: 100%; /*角を丸く */
  cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
  opacity: 0.5; /* 透明度（普段はやや薄くする） */
  z-index: 2; /* スライドより前面にする */
}

/* ホバー時はやや明るくする */
.button_move:hover {
  opacity: 0.75; /*透明度 */
}

/* スライド移動ボタンの色 */
.button_move {
  background-color: #fdfdfd; /* 背景色 */
}

/* ===== 営業部のカルーセルスライド表示制御 ===== */
#slide_sales1:checked ~ .carousel_slide:nth-of-type(1) { opacity: 1; /*透明度 */
}
#slide_sales2:checked ~ .carousel_slide:nth-of-type(2) { opacity: 1; /*透明度 */
}

/* ドット表示アクティブ制御 */
#slide_sales1:checked ~ .move_controler label[for="slide_press1"] { opacity: 1; /*透明度 */
}
#slide_sales2:checked ~ .move_controler label[for="slide_press2"] { opacity: 1; /*透明度 */
}

/* ===== プリプレス部のカルーセルスライド表示制御 ===== */
#slide_prepress1:checked ~ .carousel_slide:nth-of-type(1) { opacity: 1; /*透明度 */
}
#slide_prepress2:checked ~ .carousel_slide:nth-of-type(2) { opacity: 1; /*透明度 */
}
#slide_prepress3:checked ~ .carousel_slide:nth-of-type(3) { opacity: 1; /*透明度 */
}
#slide_prepress4:checked ~ .carousel_slide:nth-of-type(4) { opacity: 1; /*透明度 */
}

/* ドット表示アクティブ制御 */
#slide_prepress1:checked ~ .move_controler label[for="slide_prepress1"] { opacity: 1; /*透明度 */
}
#slide_prepress2:checked ~ .move_controler label[for="slide_prepress2"] { opacity: 1; /*透明度 */
}
#slide_prepress3:checked ~ .move_controler label[for="slide_prepress3"] { opacity: 1; /*透明度 */
}
#slide_prepress4:checked ~ .move_controler label[for="slide_prepress4"] { opacity: 1; /*透明度 */
}

/* ===== プレス部のカルーセルスライド表示制御 ===== */
#slide_press1:checked ~ .carousel_slide:nth-of-type(1) { opacity: 1; /*透明度 */
}
#slide_press2:checked ~ .carousel_slide:nth-of-type(2) { opacity: 1; /*透明度 */
}

/* ドット表示アクティブ制御 */
#slide_press1:checked ~ .move_controler label[for="slide_press1"] { opacity: 1; /*透明度 */
}
#slide_press2:checked ~ .move_controler label[for="slide_press2"] { opacity: 1; /*透明度 */
}

/* ===== 業務部のカルーセルスライド表示制御 ===== */
#slide_business1:checked ~ .carousel_slide:nth-of-type(1) { opacity: 1; /*透明度 */
}
#slide_business2:checked ~ .carousel_slide:nth-of-type(2) { opacity: 1; /*透明度 */
}
#slide_business3:checked ~ .carousel_slide:nth-of-type(3) { opacity: 1; /*透明度 */
}

/* ドット表示アクティブ制御 */
#slide_business1:checked ~ .move_controler label[for="slide_business1"] { opacity: 1; /*透明度 */
}
#slide_business2:checked ~ .move_controler label[for="slide_business2"] { opacity: 1; /*透明度 */
}
#slide_business3:checked ~ .move_controler label[for="slide_business3"] { opacity: 1; /*透明度 */
}





/*-- 社員紹介 --*/
#staff{
    width: 100%; /* 横幅 */
    margin-bottom: 5%; /* 外側の下の空き */
    float: left; /* 左から順に並ぶ */
}

/*-- 社員紹介　部署ごとの入れ物 --*/
.staff_box{
    width: 100%; /* 横幅 */
    height: auto; /* 高さ */
    float: left; /* 左から順に並ぶ */
    margin: 5% 0; /* 外側の空き（上下、左右） */
}

/* ※注意※
.staff_boxには、.staff_box imgと.staff_detailが入っているので、合計が100%を超えないようにすること。

.staff_box img　横幅20%
                margin-right 5%
.staff_detail　 横幅75%
で合計100%
*/

/*-- 人物アイコン --*/
.staff_box img{
    width: 20%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    margin-right: 5%; /* 外側の右の空き */
}

/*-- ●●●●年入社 ●●部のh1 --*/
.staff_detail{
    width: 75%; /* 横幅 */
    font-size: 14px; /* 文字サイズ */
    float: left; /* 左から順に並ぶ */
    font-weight: bold; /* 文字の太さ */
    margin-bottom: 2.5%; /* 外側の下の空き */
}

/*-- 詳しく見る　クリックで開閉するところ --*/
.staff_box details {
    width: 75%; /* 横幅（.staff_detail に合わせる） */
    float: left; /* 左から順に並ぶ */
    position: relative; /* 子要素の配置の基準点 */
    margin: 0; /* 外側の空き */
}

/*-- 詳しく見る（閉じている時） --*/
.staff_box summary {
    height: 35px; /* 高さ */
    line-height: 32px; /* 行間 */
    margin: auto; /* 外側の空き */
    padding-left: 5.5vw; /* 内側の左の空き */
    font-weight: bold; /* 文字の太さ */
    color: #ff0000; /* 文字色 */
    background-color: #ffffff; /* 背景色 */
    cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
    font-size: 14px; /* 文字サイズ */
    list-style: none;/* summaryの三角アイコンを非表示にする */
    position: relative; /* 子要素の配置の基準点 */
    border-top: 3px solid #ffffff; /* 上線（太さ、線の種類、色） */
    border-bottom: 2px solid #ff0000; /* 下線（太さ、線の種類、色） */
}

/*-- 詳しく見る（開いた時） --*/
.staff_box details[open] summary {
    color: #ffffff; /* 文字色 */
    background-color: #ff0000; /* 背景色 */
    border-top: 3px solid #ff0000; /* 上線（太さ、線の種類、色） */
    border-bottom: 2px solid #ff0000; /* 下線（太さ、線の種類、色） */
}

/* 独自の三角アイコンを設定する */
.staff_box summary::before {
    content: "";
    position: absolute; /*親要素の position: relative; を基準に配置 */
    top: 50%; /* 親要素を基準に上からの位置 */
    left: 2%; /* 親要素を基準に左からの位置 */
    transform: translateY(-50%) rotate(0deg);
    border: solid 1.6vw transparent; /* 線（太さ、線の種類、色）、transparentは透明。線のスペースだけ確保するため */
    border-left-color: #ff0000; /* 三角形の色 */
    transition: transform 0.3s ease; /* アニメーション（対象、変化にかかる時間、変化の進行度合い） */
}

/* detailsが開かれたときの三角アイコンの回転 */
.staff_box details[open] summary::before {
    transform: translateY(-25%) rotate(90deg);
    border-left-color: #ffffff; /* 三角形の色 */
}


/*-- 詳しく見るの内容 --*/
/*-- 01.～04.までの問い --*/
.staff_h2{
    font-size: 14px; /* 文字サイズ */
    color: #ff0000; /* 文字色 */
    float: left; /* 左から順に並ぶ */
    margin-bottom: 0; /* 外側の下の空き */
}

/*-- 01.～04.の回答 --*/
.staff_text{
    float: left; /* 左から順に並ぶ */
    font-size: 14px; /* 文字サイズ */
    text-align: justify; /* 文字の均等配置 */
    text-justify: inter-ideograph; /* 最終行左寄せ */
    word-break: break-all;
}

/*-- タイムスケジュール --*/
.time-schedule {
    width: 100%; /* 横幅 */
    list-style: none; /* 箇条書きの中黒を非表示 */
    margin-top: 5%; /* 外側の上の空き */
    border-left: 3px solid #d3d3d3; /* 線（太さ、線の種類、色） */
    box-sizing: border-box; /* 幅や高さの中にborderとpaddingを含める（通常は別） */
    float: left; /* 左から順に並ぶ */
    font-size: 14px; /* 文字サイズ */
}

/*-- タイムスケジュールの時間と内容の入れ物 --*/
.time-schedule li {
    width: 100%; /* 横幅 */
    margin-top: 15%; /* 外側の上の空き */
    padding: 0; /* 内側の空き */
    position: relative; /* 子要素の配置の基準点 */
    font-size: 14px; /* 文字サイズ */
}

/*-- タイムスケジュールの時間の● --*/
.time-schedule li::after {
    content: "";
    width: 15px; /* 横幅 */
    height: 15px; /* 高さ */
    border-radius: 15px; /* 角を丸く */
    position: absolute; /*親要素の position: relative; を基準に配置 */
    top: -17px; /* 親要素を基準に上からの位置 */
    left: -9px; /* 親要素を基準に左からの位置 */
    background: #d3d3d3;
}

/*-- タイムスケジュールの時間 --*/
.time-schedule span.time {
    width: 100%; /* 横幅 */
    position: absolute; /*親要素の position: relative; を基準に配置 */
    top: -20px; /* 親要素を基準に上からの位置 */
    left: 5%; /* 親要素を基準に左からの位置 */
    font-size: 14px; /* 文字サイズ */
}

/*-- タイムスケジュールの内容の入れ物 --*/
.time-schedule .sch_box {
    display: inline-block; /* 横に並ぶ＋幅・高さも指定可能 */
    width: 95%; /* 横幅 */
    margin: 3% 5%; /* 外側の空き（上下、左右） */
    padding: 2%; /* 内側の空き */
    vertical-align: middle;
    background: #ffffff;
    box-shadow: 0 0.1vw 0.3vw 0 rgb(0 0 0 / 25%); /* 影（上、右、下、左の順） */
}

/*-- タイムスケジュールの内容・太字 --*/
.time-schedule .sch_title {
    font-size: 14px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
    margin: 0; /* 外側の空き */
}

/*-- タイムスケジュールの内容・細字 --*/
.time-schedule .sch_tx {
    font-size: 14px; /* 文字サイズ */
    margin: 0; /* 外側の空き */
}







/*-- 募集要項 --*/
#job_description{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
}


/*-- 募集要項 部署のボタンの入れ物--*/
.job_description_box{
    width: 100%; /* 横幅 */
    margin-bottom: 5%; /* 外側の下の空き */
    float: left; /* 左から順に並ぶ */
}

/*-- 募集職種のアイコン --*/
#job_description a{
    width: 30%; /* 横幅 */
    height: 35px; /* 高さ */
    line-height: 35px; /* 垂直方向に中央 */
    padding: 0; /* 内側の空き */
    margin: 2.5% 5% 2.5% 0; /* 外側の空き（上、右、下、左） */
    float: left; /* 左から順に並ぶ */
    background-color: #ff0000; /* 背景色 */
    color: #ffffff; /* 文字色 */
    outline: 3px solid #ff0000; /* 線の太さ、状態、色（brderとの違いは要素の幅に影響を与えない） */
    text-align: center; /* 文字の中央揃え */
    text-decoration: none; /* リンクの装飾を消す */
    font-weight: bold; /* 文字の太さ */
    font-size: 14px; /* 文字サイズ */
    display: inline-block; /* 横に並ぶ＋幅・高さも指定可能 */
    cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
	transition: all 0.3s ease 0s; /* アニメーション（対象、変化にかかる時間、開始するまでの遅延時間、変化の進行度合い） */
}

/*-- 募集職種の3番目のアイコン --*/
#job_description a:nth-of-type(3){
    margin-right: 0; /* 外側の右の空き */
}

/*-- 募集職種のアイコン（マウスオーバー時） --*/
#job_description a:hover{
    background: #ffff; /* 背景色 */
	color: #ff0000; /* 文字色 */
    outline: 3px solid #ff0000; /* 線の太さ、状態、色（brderとの違いは要素の幅に影響を与えない） */
}

/*-- 募集職種のリンク先 --*/
.job_detail{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
}

/*-- リンク先の各部署名（部署紹介） --*/
.job_department{
    width: 30%; /* 横幅 */
    height: 35px; /* 高さ */
    line-height: 32px; /* 行間 */
    margin: 0; /* 外側の空き */
    padding: 0; /* 内側の空き */
    background-color: #ffffff; /* 背景色 */
    color: #ff0000; /* 文字色 */
    border: 3px solid #ff0000; /* 線（太さ、線の種類、色） */
    font-weight: bold; /* 文字の太さ */
    font-size: 14px; /* 文字サイズ */
    text-align: center; /* 文字の中央揃え */
}

/*-- 募集職種の内容の入れ物 --*/
.job_table{
    width: 100%; /* 横幅 */
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
    box-sizing: border-box; /* 幅や高さの中にborderとpaddingを含める（通常は別） */
    padding: 1% 3%; /* 内側の空き（上下、左右） */
    margin-bottom: 5%; /* 外側の下の空き */
    border-collapse: collapse; /* 表の枠線がセルごとに二重になるので、1本にまとめる */
    box-shadow:0.1vw 0.2vw 0.5vw rgb(0 0 0 / 40%); /* 影（上下、右左、ぼかしの順）、色と透明度 */
    float: left; /* 左から順に並ぶ */
}

/*-- 募集職種のthとtdの入れ物 --*/
.job_table tr{
    width: 100%; /* 横幅 */
}

/*-- 募集職種の赤い〇 --*/
.job_table th::before{
    display: inline-block; /* 横に並ぶ＋幅・高さも指定可能 */
    width: 14px; /* 横幅 */
    height: 14px; /* 高さ */
    margin-right: 5%; /* 外側の右の空き */
    content: '';
    border-radius: 100%; /* 角を丸く */
    border: 1px solid #ff0000; /* 線（太さ、線の種類、色） */
    vertical-align: -0.2vw; /* 文字揃えをベースラインから移動 */
}

/* ※注意※
.job_table、.job_table th、.job_table td
の内容が.job_tableの横幅100%を超えないようにする。（.job_table th、.job_table td は.job_tableの内側に存在するので、超えるとレイアウトが崩れる恐れあり。）

.job_table　のpadding左右に各3%　計6%
.job_table th　横幅35%
.job_table td　横幅59%
で合計100%
*/

/*-- 募集職種の左側 --*/
.job_table th{
    width: 35%; /* 横幅 */
    padding: 3% 0; /* 内側の空き（上下、左右） */
    font-size: 14px; /* 文字サイズ */
    border-bottom: 1px solid #d3d3d3; /* 下線（太さ、線の種類、色） */
    box-sizing: border-box; /* 幅や高さの中にborderとpaddingを含める（通常は別） */
}

.job_table tr:last-child th{ border-bottom:none; /* 下線なし */ }

/*-- 募集職種の右側 --*/
.job_table td{
    width: 59%; /* 横幅 */
    padding: 3% 0; /* 内側の空き（上下、左右） */
    font-size: 14px; /* 文字サイズ */
    border-bottom: 1px solid #d3d3d3; /* 下線（太さ、線の種類、色） */
    box-sizing: border-box; /* 幅や高さの中にborderとpaddingを含める（通常は別） */
}

.job_p{
    margin: 0; /* 外側の空き */
    text-indent: -1em; /* 字下げ */
    padding-left: 1em; /* 内側の左の空き */
}

/*-- 募集職種の右側　太字部分 --*/
.black{
    margin-bottom: 0; /* 外側の下の空き */
    font-size: 14px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
}

/*-- 募集職種の右側　※赤字部分 --*/
.red{
    color: #ff0000; /* 文字色 */
    margin: 0; /* 外側の空き */
    padding: 0; /* 内側の空き */
    font-size: 14px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
    text-indent: -1em; /* 字下げ */
    padding-left: 1em; /* 内側の左の空き */
}

.job_table tr:last-child td{
    border-bottom:none; /* 下線なし */
}





/*-- よくあるご質問 --*/
#Q_A{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    position: relative; /* 子要素の配置の基準点 */
    margin-bottom: 5%; /* 外側の下の空き */
}

/*-- よくあるご質問　質問ごとの入れ物 --*/
#Q_A details {
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    position: relative; /* 子要素の配置の基準点 */
    margin: 8% 0 0 0; /* 外側の空き（上、右、下、左） */
    border-left: 2px solid #ff0000; /* 左線（太さ、線の種類、色） */
}

/*-- よくあるご質問　開いた時 --*/
#Q_A details[open] {
    border-bottom: none; /* 下線なし */
}

/*-- よくあるご質問　クリックで開閉するところ --*/
#Q_A summary {
    display: flex; /* 子要素を横並びにする */
    cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
    position: relative; /* 子要素の配置の基準点 */
    list-style: none;/* summaryの三角アイコンを非表示にする */
}

/* 独自の三角アイコンを設定する */
#Q_A summary::before {
    content: "";
    position: absolute; /*親要素の position: relative; を基準に配置 */
    top: 60%; /* 親要素を基準に上からの位置 */
    right: 0; /* 親要素を基準に右からの位置 */
    transform: translateY(-50%) rotate(90deg);
    border: solid 1.6vw transparent; /* 線（太さ、線の種類、色）、transparentは透明。線のスペースだけ確保するため */
    border-left-color: #ff0000; /* 三角形の色 */
    transition: transform 0.3s ease; /* アニメーション（対象、変化にかかる時間、変化の進行度合い） */
    vertical-align: top;
}

/* detailsが開かれたときの三角アイコンの回転 */
#Q_A details[open] summary::before {
  transform: translateY(-100%) rotate(270deg);
    border-left-color: #ff0000; /* 三角形の色 */
}

/* ※注意※
.Q_A_Q、.questionの合計が100%に
.Q_A_A、.answerの合計が100%になるように。

.Q_A_Q=.Q_A_A、.question=.answerにする。

.Q_A_Q（.Q_A_A）横幅6%
                margin-left 3%
.question（.answer）横幅85%
                margin-right 6%
で合計100%
*/

/*-- よくあるご質問　Q. --*/
.Q_A_Q{
    width: 6%; /* 横幅 */
    margin-left: 3%; /* 外側の左の空き */
    float: left; /* 左から順に並ぶ */
    font-size: 14px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
}

/*-- よくあるご質問　質問内容 --*/
.question{
    width: 85%; /* 横幅 */
    float: right; /* 右寄せ */
    padding: 0; /* 内側の空き */
    margin-right: 6%; /* 外側の右の空き */
    font-size: 14px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
    text-align: justify; /* 文字の均等配置 */
    text-justify: inter-ideograph; /* 最終行左寄せ */
}

/*-- よくあるご質問　A. --*/
.Q_A_A{
    width: 6%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    margin-top: 2%; /* 外側の上の空き */
    margin-left: 3%; /* 外側の左の空き */
    font-size: 14px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
    color: #ff0000; /* 文字色 */
}

/*-- よくあるご質問　回答 --*/
.answer{
    width: 85%; /* 横幅 */
    float: right; /* 右寄せ */
    margin: 2% 6% 0 0; /* 外側の空き（上、右、下、左） */
    padding: 0; /* 内側の空き */
    font-size: 14px; /* 文字サイズ */
    text-align: justify; /* 文字の均等配置 */
    text-justify: inter-ideograph; /* 最終行左寄せ */
}





/*-- 採用フロー --*/
#select_flow {
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    padding: 0; /* 内側の空き */
    margin-bottom: 5%; /* 外側の下の空き */
}

/*-- 採用フロー　文章 --*/
#select_flow p{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    font-size: 14px; /* 文字サイズ */
    margin: 0; /* 外側の空き */
    padding: 0; /* 内側の空き */
    text-indent: -1em; /* 字下げ */
    padding-left: 1em; /* 内側の左の空き */
}

#select_flow p:last-child{
    margin-bottom: 20px; /* 外側の下の空き */
}

/*-- 採用フローのul（liの入れ物） --*/
.flow {
    float: left; /* 左から順に並ぶ */
    margin-top: 3%; /* 外側の上の空き */
}

.flow > li {
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    flex: 1; /* 親要素の幅からliの幅を均等に振り分け */
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
    margin-bottom: 50px; /* 外側の下の空き */
}

.flow > li:not(:last-child) {
  margin-right: 1vw; /* 外側の右の空き */
}

.flow > li:last-child {
  margin-bottom: 20px; /* 外側の下の空き */
}

/*-- 採用フローの枠 --*/
.flow > li dl {
    padding: 5%; /* 内側の空き */
    margin: 0; /* 外側の空き */
    border: 0.2vw solid #d3d3d3; /* 線（太さ、線の種類、色） */
    position: relative; /* 子要素の配置の基準点 */
    text-align: justify; /* 文字の均等配置 */
    text-justify: inter-ideograph; /* 最終行左寄せ */
    flex-grow: 1; /* 比率を指定 */
}

/*-- 採用フローの矢印＞ --*/
.flow > li:not(:last-child) dl::after {
    content: "";
    width: 20px; /* 横幅 */
    height: 20px; /* 高さ */
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
    position: absolute; /*親要素の position: relative; を基準に配置 */
    left: calc(50% - 20px);
    bottom: -30px;
    border-top: 2px solid #ff0000; /* 上線（太さ、線の種類、色） */
    border-right: 2px solid #ff0000; /* 右線（太さ、線の種類、色） */
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

/*-- 採用フローの赤文字 --*/
.flow > li dl dt {
    font-size: 14px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
    color: #ff0000; /* 文字色 */
    margin-bottom: 1vh; /* 外側の下の空き */
    text-align: center; /* 文字の中央揃え */
}

/*-- 採用フローの黒文字 --*/
.flow dd{
    margin-left: 0; /* 外側の左の空き */
    font-size: 14px; /* 文字サイズ */
    text-align: center; /* 文字の中央揃え */
}





/*-- entry.phpの中に該当コード有り --*/
.page-width{
    width: 90%; /* 横幅 */
    margin: 90px auto 50px auto; /* 枠を wrapper の中央に。外側の空き（上、右、下、左） */
}

.page-width p{
    text-align: center; /* 文字の中央揃え */
}

/*-- エントリーフォーム --*/
#entry_form{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    margin-bottom: 10%; /* 外側の下の空き */
}

#entry_form a{
    text-decoration: none;
}

/*-- エントリーフォーム　必須項目アイコン --*/
.entry_red{
    width: 10%; /* 横幅 */
    height: 20px; /* 高さ */
    line-height: 20px; /* 垂直方向に中央 */
    text-align: center; /* 文字の中央揃え */
    color: #ffffff; /* 文字色 */
    background-color: #ff6347; /* 背景色 */
    font-size: 12px; /* 文字サイズ */
    margin-right: 10px; /* 外側の右の空き */
    border-radius: 0.5vw; /* 角を丸く */
    float: left; /* 左から順に並ぶ */
}

/*-- エントリーフォーム　任意項目アイコン --*/
.entry_gray{
    width: 10%; /* 横幅 */
    text-align: center;
    color: #ffffff; /* 文字色 */
    background-color: #a9a9a9; /* 背景色 */
    font-size: 12px; /* 文字サイズ */
    margin-right: 10px; /* 外側の右の空き */
    padding: 1px 0; /* 内側の空き（上下、左右） */
    border-radius: 0.3vw; /* 角を丸く */
    float: left; /* 左から順に並ぶ */
}

/*-- エントリーフォームの影 --*/
.entry_shadow{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    margin: 3% 0; /* 外側の空き（上下、左右） */
    padding: 20px; /* 内側の空き */
    box-shadow:0.1vw 0.2vw 0.5vw rgb(0 0 0 / 40%); /* 影（上下、右左、ぼかしの順）、色と透明度 */
}

/*-- 「エントリーフォーム」の文字 --*/
.entry_shadow h1{
    width: 100%; /* 横幅 */
    text-align: center; /* 文字の中央揃え */
    margin: 2% 0 5% 0; /* 外側の空き（上、右、下、左） */
    font-size: 22px; /* 文字サイズ */
}

.margin_bottom{
    margin-bottom: 5%; /* 外側の下の空き */
}

/*-- フォームの入れ物 --*/
.entry_box{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    margin-bottom: 20px; /* 外側の下の空き */
}

/*-- フォームの左側 --*/
.entry_detail{
	color: #000000; /* 文字色 */
	font-weight: bold; /* 文字の太さ */
    padding: 0.5vw 0; /* 内側の空き（上下、左右） */
}

.entry_box label:last-child{
    margin-bottom: 0.5vw; /* 外側の下の空き */
}

/*-- フォームの右側 --*/
.entry_right_box{
    width: calc(90% - 10px); /* 横幅 */
    margin-left:  calc(10% + 10px); /* 外側の左の空き */
}

/*-- 選択項目のチェック☑ --*/
.entry_box label, #resume{
    width: fit-content; /* 横幅 */
    display: flex; /* 子要素を横並びにする */
    margin-top: 5px; /* 外側の上の空き */
    font-size: 16px; /* 文字サイズ */
    cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
}

/* 「選択されていません（選択後はファイル名）」のスタイル */
.file-button{
    margin-top: 10px; /* 外側の上の空き */
    font-size: 14px; /* 文字サイズ */
}

/* ボタンとテキストの間で改行もできる */
.block::file-selector-button {
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
    margin-bottom: 5px; /* 外側の下の空き */
}

/*-- 個人情報取扱いについて、～の入れ物 --*/
.entry_center{
    width: 100%; /* 横幅 */
    text-align: center; /* 文字の中央揃え */
    float: left; /* 左から順に並ぶ */
    margin-top: 3%; /* 外側の上の空き */
}

/*-- 個人情報取扱いについて、～の文字 --*/
#entry_form p{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    font-size: 14px; /* 文字サイズ */
    padding: 0; /* 内側の空き */
}

/*-- 個人情報取扱いについて、～のチェック☑ --*/
.entry_center label{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    margin-bottom: 5%; /* 外側の下の空き */
    font-size: 14px; /* 文字サイズ */
}

/*-- 個人情報保護方針 --*/
.privacy-link{
    color: #ff0000; /* 文字色 */
}

/*-- 入力内容の確認 --*/
.btn{
    display: inline-block; /* 横に並ぶ＋幅・高さも指定可能 */
    font-size: 18px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
    padding: 5px 15px; /* 内側の空き（上下、左右） */
    margin: 0 0 5% 0; /* 外側の空き（上、右、下、左） */
    color: #ffffff; /* 文字色 */
    background-color: #ff0000; /* 背景色 */
    border: none; /* 線なし */
    cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
	transition: all 0.5s ease 0s; /* アニメーション（対象、変化にかかる時間、開始するまでの遅延時間、変化の進行度合い） */
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
    background-image: none;
    border-radius: 1vw; /* 角を丸く */
}

/*-- 戻る、送信するボタンの入れ物 --*/
.btn-center{
    display: flex; /* 子要素を中央揃えにする */
    justify-content: center;
    gap: 20px; /* ボタン間の間隔 */
}

/*-- 戻る、送信するボタン --*/
.btn-back, .btn-next{
    width: 150px; /* 横幅 */
    margin-top: 80px !important; /* 外側の上の空き */
    margin-bottom: 80px; /* 外側の下の空き */
    padding: 0.5vw 1vw; /* 内側の空き（上下、左右） */
    display: inline-block; /* 横に並ぶ＋幅・高さも指定可能 */
    font-size: 18px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
    color: #ffffff; /* 文字色 */
    border: none; /* 線なし */
    cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
	transition: all 0.5s ease 0s; /* アニメーション（対象、変化にかかる時間、開始するまでの遅延時間、変化の進行度合い） */
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
    background-image: none;
    border-radius: 0.3vw; /* 角を丸く */
}

/*-- トップページに戻るボタン --*/
.btn-top{
    width: auto; /* 横幅 */
    margin-top: 80px !important; /* 外側の上の空き */
    margin-bottom: 80px; /* 外側の下の空き */
    padding: 0.5vw; /* 内側の空き */
    display: inline-block; /* 横に並ぶ＋幅・高さも指定可能 */
    font-size: 18px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
    color: #ffffff; /* 文字色 */
    border: none; /* 線なし */
    cursor: pointer; /* マウスオーバー時のカーソルを指さしのアイコンに */
	transition: all 0.5s ease 0s; /* アニメーション（対象、変化にかかる時間、開始するまでの遅延時間、変化の進行度合い） */
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
    background-image: none;
    border-radius: 0.3vw; /* 角を丸く */
    text-decoration: none;
}

/*-- 入力画面に戻るボタン --*/
.btn-back{
    background-color: #7d7d7d; /* 背景色 */
}

/*-- 送信する、トップページに戻るボタン --*/
.btn-next, .btn-top{
    background-color: #ff0000; /* 背景色 */
}

/*-- ボタンが選択された時 --*/
.btn:focus, .btn-back:focus, .btn-next:focus, .btn-top:focus {
    color: #ffffff; /* 文字色 */
    box-shadow: 0 0.1vw 0.3vw 0 rgb(0 0 0 / 25%); /* 影（上、右、下、左の順） */
	transform: scale(1.1,1.1); /* 要素を拡大（X軸,Y軸） */
}

/*-- ボタンのマウスオーバー時 --*/
.btn:hover, .btn-back:hover, .btn-next:hover, .btn-top:hover {
    color: #ffffff; /* 文字色 */
	box-shadow: 0 0.1vw 0.3vw 0 rgb(0 0 0 / 25%); /* 影（上、右、下、左の順） */
	transform: scale(1.1,1.1); /* 要素を拡大（X軸,Y軸） */
}

/*-- 内容確認ページ（entry.php） --*/
.table-border {
    width: 100%; /* 横幅 */
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
    box-sizing: border-box; /* 幅や高さの中にborderとpaddingを含める（通常は別） */
}

.table-border tr {
    width: 100%; /* 横幅 */
    height: auto; /* 高さ */
    display: flex; /* 子要素を横並びや中央揃えにする */
    flex-direction: column;
    box-sizing: border-box; /* 幅や高さの中にborderとpaddingを含める（通常は別） */
}

.table-border td {
    width: 100%; /* 横幅 */
    height: auto; /* 高さ */
    display: block; /* 親要素の横幅いっぱいに広がり、改行 */
    box-sizing: border-box; /* 幅や高さの中にborderとpaddingを含める（通常は別） */
    vertical-align: top;
    padding: 0.5em; /* 内側の空き */
    overflow-wrap: break-word; /* 標準的な折り返し対応（推奨） */
    white-space: normal; /* 折り返しを許可 */
    hyphens: auto; /* 英語などでハイフンによる自動折り返し */
}

.table-border tr:not(:last-child) td:first-child {
    font-weight: bold; /* 文字の太さ */
    background-color: #f5f5f5; /* 背景色 */
    padding-bottom: 0.2em; /* 内側の下の空き */
}





/*------------- フッター -------------*/
footer{
    position: absolute; /*親要素の position: relative; を基準に配置 */
    bottom: 0;
    left: 0;
    width: 100%; /* 横幅 */
    height: 200px; /* 高さ */
    float: left; /* 左から順に並ぶ */
    background-color: #d3d3d3; /* 背景色 */
    padding: 30px 0 30px 0; /* 内側の空き（上、右、下、左）*/
}

.footer_box{
    width: 90%; /* 横幅 */
    margin: 0 auto; /* 外側の空き（上下、左右） */
}

/*-- ロゴ枠の画像 --*/
.footer_box img{
    width: auto; /* 横幅 */
    height: 1.5vw; /* 高さ（画面幅に合わせて変わる） */
    min-height: 18px; /* 高さの最小 */
    margin: 1vw 1vw 0 0; /* 外側の空き（上、右、下、左） */
    float: left; /* 左から順に並ぶ */
}

.footer_link{
    text-decoration: none;
    color: #0066c0; /* 文字色 */
    font-size: 12px; /* 文字サイズ */
    margin: 1.3vw 0; /* 外側の空き（上下、左右） */
    float: left; /* 左から順に並ぶ */
}

/*-- ロゴ枠内の文字 --*/
.footer_site{
    float: left; /* 左から順に並ぶ */
    text-decoration: none;
    color: #000000; /* 文字色 */
    font-family: 'Libre Baskerville', serif; /* フォント指定 */
    font-size: 12px; /* 文字サイズ */
    font-weight: bold; /* 文字の太さ */
    margin-top: 1.3vw; /* 外側の上の空き（画面幅に合わせて変わる） */
}

.footer_detail{
    width: 100%; /* 横幅 */
    float: left; /* 左から順に並ぶ */
    font-size: 12px; /* 文字サイズ */
    margin: 0; /* 外側の空き */
}



/*-- カテゴリーの下の動く線 --*/
.border {
    position: relative; /* 子要素の配置の基準点 */
    width: fit-content; /* コンテンツに合わせた長さ */
    height: auto; /* コンテンツに合わせた長さ */
}


.border:before {
  content: '';
  position: absolute; /*親要素の position: relative; を基準に配置 */
  left: 0;
  bottom: 0;
  border-bottom: solid 3px #ff0000; /* 下線（線の種類、太さ、色） */
  animation: border_anim 1.5s linear forwards;
}

@keyframes border_anim {
  0% {
    width: 0%; /* 横幅 */
  }
  100% {
    width: 100%; /* 横幅 */
  }
}