/* 全体のスタイル調整 */
* {
  box-sizing: border-box;
}

/* bodyの初期スタイル調整 */
body {
  font-size: 15px;
  line-height: 1.5;
  font-family: 'noto Sans JP', 'Open Sans', sans-serif;
  font-weight: 400;
  color: #333;
  background-color: #fff;
}

/* 初期スタイル調整 ここから */
h1,
h2,
h3 {
  margin-top: 0;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

h3 {
  font-size: 14px;
  margin-bottom: 20px;
}

p {
  margin-top: 0;
  margin-bottom: 1.5em;
  text-align: justify;
}

address {
  font-style: normal;
}

a {
  color: #666;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #000;
  text-decoration: none;
}

ul {
  margin: 1em 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

section {
  padding: 60px 0;
}

/* 表の見出し（th）の文字の太さ */
th {
  font-weight: 300;
}

.page-menu-title {
  font-weight: bold;
}

/* 初期スタイル調整 ここまで */

/* 共通スタイル調整 ここから */

/* h2関連 */
.h2-title {
  position: relative;
  text-transform: uppercase;
  z-index: 100;
}

.h2-title::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background: #a5d1ff;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  transform: rotate(45deg);
  z-index: -100;
}

/* テキスト関連 */
.txt-center {
  text-align: center;
}

.txt-lead {
  font-weight: 700;
}

/* ボタン関連 */
.btn {
  display: block;
  padding: 20px 35px;
  border-radius: 8px;
  margin: 0 auto;
  border: none;
}

.btn:hover,
.btn:focus {
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

/* Web予約ボタン */
.btn-reserve {
  color: #fff;
  background: #6699ff;
  margin-bottom: 30px;
  width: 30%;
}

/* CADページ資格詳細ボタン */
.btn-cad {
  color: #fff;
  background: #647696;
  width: 60%;
  margin-bottom: 30px;
  padding: 10px;
}

/* レイアウト関連 */
.inner {
  padding: 0 15px;
  margin: 0 auto;
}

/* PC用のスタイル */
@media screen and (min-width:800px) {
  .inner {
    max-width: 1200px;
  }
}

/* モバイルとPCでの表示に関するスタイル */
.sp-only {
  display: block;
}

.pc-only {
  display: none;
}

/* PC用のスタイル */
@media screen and (min-width:768px) {
  .sp-only {
    display: none;
  }

  .pc-only {
    display: block;
  }
}

/* 共通スタイル調整ここまで */

/* ヘッダーブロックここから */

.header {
  position: fixed;
  top: 0px;
  width: 100%;
  padding: 10px;
  /* background: rgba(255, 255, 255, 0.9); */
  background: #fff;
  z-index: 200;
}

/* サイトロゴとナビゲーションの並び */
.header-logo-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* サイトロゴの表示 */
.logo-area {
  margin: 0;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .logo-area {
    width: 500px;
  }
}

/* ハンバーガーメニュー */
.gnav-toggle {
  position: relative;
  margin-top: 12px;
}

/* チェックボックス等は非表示に */
.gnav-hidden {
  display: none;
}

/* アイコンのスペース */
#gnav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/* ハンバーガーの形をCSSで表現 */
#gnav-open span,
#gnav-open span::before,
#gnav-open span::after {
  content: '';
  position: absolute;
  height: 3px;
  /* 線の太さ */
  width: 25px;
  /* 線の長さ */
  border-radius: 3px;
  background: #555;
  display: block;
  cursor: pointer;
}

#gnav-open span::before {
  bottom: -8px;
}

#gnav-open span::after {
  bottom: -16px;
}

/* 閉じる用の薄黒箇所 */
#gnav-close {
  display: none;
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

/* チェックがついたら表示させる */
#gnav-input:checked~#gnav-close {
  display: block;
  opacity: 0.5;
}

#gnav-input:checked~#gnav-content {
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
}

/* メニューの中身 */
#gnav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 70%;
  max-width: 300px;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  transition: 0.3s ease-in-out;
  transform: translateX(-105%);
}

.gnav-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  text-transform: uppercase;
}

.gnav-item {
  border-bottom: 2px dotted #eee;
  margin: 10px;
  padding-bottom: 20px;
  color: #fff;
  font-size: 12px;
}

.gnav-item a {
  color: #fff;
  font-size: 12px;
  display: block;
  width: 200px;
  text-align: center;
}

.gnav-item a:hover {
  color: #85a7cc;
}

/* ハンバーガーメニューのドロップダウンリスト用 */
nav.sp-only ul ul li a {
  padding: 10px;
}

/* コース一覧の装飾 */
#course {
  padding: 5px;
  color: #fff;
  font-weight: bold;
}

#course::before,
#course::after {
  content: '';
  width: 15px;
  height: 15px;
}

#course::before {
  margin: -70px 30px 0 0;
  border-top: 5px solid #fff;
  border-left: 3px solid #ccc;
}

#course::after {
  margin: 0 0 -30px 30px;
  border-right: 3px solid #ccc;
  border-bottom: 3px solid #fff;
}

@media screen and (min-width: 768px) {
  .gnav-menu {
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 15px;
    margin: 0;
  }

  .gnav-item {
    border-bottom: none;
    margin: 7px;
    padding-bottom: 0;
    color: #333;
  }

  .gnav-item a {
    color: #333;
    width: 120px;
  }

  .gnav-item a:hover {
    color: #85a7cc;
  }
}

/* 方眼紙のようなスタイル */
.graph_paper {
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;

  /* 以下任意のスタイル */
  padding: 20px;
}


/*-------------------------------------------
　メインビジュアル
-------------------------------------------*/

/* セクションのスタイル */
.mv-title {
  font-size: 3rem;
  color: #fff;
  text-shadow: 0px 0px 5px #000;
}

.mv-area {
  width: 100%;
  height: 500px;
  background-image: url(../img/oa_top_fountain.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 50px;
}

.mv-area {
  color: #333;
  margin-top: 70px;
}

/* h1のスタイル */
.mv-area h1 {
  margin-top: 33px;
  font-size: 200%;
  text-shadow: 0 0 5px #fff;
  font-weight: bold;
}

/* h2のスタイル */
.mv-area h2 {
  font-family: "メイリオ";
  margin-top: 9px;
  font-size: 100%;
  text-shadow: 0 0 5px #fff;
  font-weight: bold;
}



/*-------------------------------------------
　ノーコードWeb制作・オンライン講座ページ基本スタイル
-------------------------------------------*/
.mv-nocode-area {
  width: 100vw;
  height: 100vh;
  background-image: url(../img/online_zoom/top.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 150px;
}

.info-area {
  background-color: #e8f3fe;
  width: 100vw;
  background-size: cover;
}

.info-area-online {
  background-color: #effaf5;
  width: 100vw;
  background-size: cover;
}

.info-area2 {
  background-color: #f7f7f7;
  width: 100vw;
  background-size: cover;
}

.info-txt {
  color: #3b3b3b;
  margin-bottom: 10px;
  line-height: 1.75em;
}

.info-txt h2 {
  text-align: center;
}

.nocode_ul {
  font-size: 1.1em;
  margin-bottom: 0;
}


@media screen and (min-width:768px) {
  .nocode-info-content {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
  }

  .nocode-info-txt {
    flex: 1;
    margin: 20px;
  }

  .nocode-info-area img {
    flex: 1;
  }

  .mv-nocode-area {
    width: 100vw;
    background-image: url(../img/web_nocode/top.png);
  }

  .mv-online_zoom-area {
  width: 100%;
  margin-top: 100px;
  object-fit: cover;
}

.mv-main-img {
  width: 100%;
  display: block;
}

}


  .mv-nocode-title {
    color: #EEEEEE;
    text-shadow: 5px 5px 5px #333;
    margin-top: 50px;
    font-size: 100px;
    text-align: center;
    letter-spacing: -0.1rem;
  }

  .mv-nocode-title-sub {
    color: #EEEEEE;
    text-shadow: 5px 5px 5px #333;
    margin-top: 50px;
    font-size: 50px;
    text-align: center;
    letter-spacing: -0.1rem;
    margin-top: 0px;
  }

  .mv-nocode-br {
    display: none;
  }

/* モバイル用スタイル */
@media screen and (max-width:768px) {
  .mv-nocode-title {
    color: #EEEEEE;
    text-shadow: 5px 5px 5px #333;
    font-size: 70px;
    text-align: center;
    letter-spacing: -0.1rem;
  }

  .mv-nocode-title-sub {
    color: #EEEEEE;
    text-shadow: 5px 5px 5px #333;
    margin-top: 50px;
    font-size: 35px;
    text-align: center;
    letter-spacing: -0.1rem;
    margin-top: 0px;
  }

  .nocode-info-txt {
    flex: 1;
    margin: 20px;
  }

  }


/*-------------------------------------------
　動画編集講座
-------------------------------------------*/
.ve-nocode-area {
  width: 100vw;
  height: 100vh;
  background-image: url(../img/video_edit/ve_main.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 50px;
}

.ve-info-area {
  background-color: #f8f3ff;
  width: 100vw;
  background-size: cover;
}

.ve-info-area2 {
  background-color: #f8f3ff;
  width: 100vw;
  background-size: cover;
}

.ve-info-area3 {
  background-color: #f5f5f5;
  width: 100vw;
  background-size: cover;
}

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

/* 全体位置の調整　*/
ul#side-menu-left {
  display: block;
  position: fixed;
  top: 140px;
  left: 5px;
  z-index: 9999;
  list-style-type: none;
}

ul#side-menu-right {
  display: block;
  position: fixed;
  top: 140px;
  right: 5px;
  z-index: 9999;
  list-style-type: none;
}

/* 共通形状　*/
ul#side-menu-left li a {
  writing-mode: vertical-rl;
  text-align: center;
  font-size: 9.5pt;
  letter-spacing: 0.1em;
}

ul#side-menu-right li a {
  writing-mode: vertical-rl;
  text-align: center;
  font-size: 9.5pt;
  letter-spacing: 0.1em;
}

/* 個別デザイン*/
ul#side-menu-left li a.button-1 {
  display: inline-block;
  width: 40px;
  height: 200px;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  outline: none;
  position: relative;
  z-index: 2;
  background-color: #4C4F6B;
  color: #ffffff;
  border-radius: 0 30px 30px 30px;
}

ul#side-menu-left li a.button-2 {
  display: inline-block;
  width: 40px;
  height: 200px;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  outline: none;
  position: relative;
  z-index: 2;
  background-color: #4C4F6B;
  color: #ffffff;
  border-radius: 0 30px 30px 30px;
}

ul#side-menu-right li a.button-3 {
  display: inline-block;
  width: 40px;
  height: 240px;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  outline: none;
  position: relative;
  z-index: 2;
  background-color: #4C4F6B;
  color: #ffffff;
  border-radius: 30px 0 30px 30px;
}

ul#side-menu-right li a.button-4 {
  display: inline-block;
  width: 40px;
  height: 200px;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
  outline: none;
  position: relative;
  z-index: 2;
  background-color: #4C4F6B;
  color: #ffffff;
  border-radius: 30px 0 30px 30px;
}

/* サイドバナーにマウスを載せると薄くなる */
ul#side-menu-right li a:hover,
ul#side-menu-left li a:hover {
  background: #777;
}

/*-------------------------------------------
　トップページおすすめコース
-------------------------------------------*/

/* sectionのスタイル */
.recommend-area {
  background-color: #fff;
  margin-top: -100px;
}

/* サービスリスト（ul） */
.recommend-content {
  display: flex;
  flex-wrap: wrap;
}

/* サービスアイテム（li） */
.recommend-item-1 {
  flex: 90%;
  text-align: center;
  padding: 20px 20px 0;
  margin: 5px;
  box-shadow: 1px 1px 3px #aaa;
  border-radius: 5px;
}

.recommend-item-2 {
  flex: 90%;
  text-align: center;
  padding: 20px 20px 0;
  margin: 5px;
  box-shadow: 1px 1px 3px #aaa;
  border-radius: 5px;
}

/* おすすめコースタイトル */
.recommend-title {
  position: relative;
  /* 疑似要素の基準 */
  padding-top: 20px;
  /* 日本語テキストの上に余白を指定 */
  padding-bottom: 10px;
  /* 日本語テキストの下に余白を指定 */
  font-size: 26px;
  text-align: center;
}

.recommend-title span {
  position: relative;
  /* z-indexを指定するために必要 */
  z-index: 2;
  /* 英字テキストの上の階層に配置 */
}

.recommend-title::before {
  /* 英字テキストを疑似要素で表現 */
  content: attr(data-en);
  /* データ属性の読み込み */
  position: absolute;
  top: 0;
  /* 基準の上側に配置 */
  left: 50%;
  /* 左右中央配置 */
  transform: translateX(-50%);
  /* 左右中央配置 */
  color: rgba(229 192 70 / .3);
  /* 半透明のテキストカラーを指定 */
  font-size: 100%;
  font-weight: bold;
  font-style: italic;
  font-family: 'Montserrat', sans-serif;
  z-index: 1;
}


@media screen and (min-width: 800px) {

  /* サービスリスト（ul） */
  .recommend-content {
    flex-wrap: nowrap;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* サービスアイテム（li） */
  .recommend-item-1 {
    flex: 1;
  }

  .recommend-item-2 {
    flex: 1;
  }
}

/* トップページカルーセル（スライドショー） */
.carousel {
  margin-bottom: 10px;
}

/*-------------------------------------------
　お知らせとTwitter
-------------------------------------------*/

/* sectionのスタイル */
.service-area {
  background-color: #fff;
  margin-top: -100px;
}

/* サービスリスト（ul） */
.service-content {
  display: flex;
  flex-wrap: wrap;
}

/* サービスアイテム（li） */
.service-item-1 {
  flex: 90%;
  text-align: center;
  padding: 20px 20px 0;
  margin: 5px;
  box-shadow: 1px 1px 3px #aaa;
  border-radius: 5px;
}

.service-item-2 {
  flex: 90%;
  text-align: center;
  padding: 20px 20px 0;
  margin: 5px;
  box-shadow: 1px 1px 3px #aaa;
  border-radius: 5px;
}


@media screen and (min-width: 800px) {

  /* サービスリスト（ul） */
  .service-content {
    flex-wrap: nowrap;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* サービスアイテム（li） */
  .service-item-1 {
    flex: 2;
  }

  .service-item-2 {
    flex: 1;
  }
}

/* お知らせ全体のスタイル */
.news-box table th,
.news-box table td {
  padding: 15px;
}

/* お知らせの日付 */

/* お知らせのコンテンツ */
.info-content {
  text-align: left;
  padding-left: 15px;
}


/*-------------------------------------------
　アクセス
-------------------------------------------*/

/* sectionのスタイル */
.access-area {
  padding-bottom: 0;
}

/* 写真のスタイル */
.access-area img {
  display: block;
  max-width: 280px;
  max-height: 280px;
  border-radius: 50%;
  overflow: hidden;
  margin: 10px auto 30px;
}

/* マップの表示枠の指定 */
.access-maparea {
  position: relative;
  padding-top: 100%;
}

/* Googleマップに追加 */
.access-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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

  /* アクセス情報 */
  .access-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 150px;
  }

  /* マップの表示枠の指定 */
  .access-maparea {
    position: relative;
    padding-top: 30%;
  }
}


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

/* フッター全体のスタイル */
.foot-area {
  color: #fff;
  text-align: center;
  padding-top: 40px;
  background-color: #596680;
  font-size: 14px;
  font-weight: normal;
}

/* ロゴ画像のスタイル */
.foot-logo {
  margin: 0 auto 20px;
  background-color: #fff;
  padding: 3px;
}

/* 電話番号のスタイル */
.text-phone,
.text-phone a {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}

/* 著作権表示のスタイル */
.foot-area_copy {
  color: #ccc;
  font-size: 12px;
  display: inline-block;
  width: 100%;
  padding: 10px;
  background-color: #333;
}

/* PC用のスタイル */
@media screen and (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* フッターメニューのスタイル */
.foot-menu a {
  color: #fff;
}

.foot-menu a:hover {
  color: #ccc;
}

.txt-center a {
  color: #fff;
}

.txt-center a:hover {
  color: #ccc;
}



/*-------------------------------------------
　トップページスタイル
-------------------------------------------*/

/* メインバナー */
/* 3行2列で表示 */
#main_menu {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  /* column-gap: 40px; */
  column-gap: 25px;
  /* row-gap: 30px; */
  row-gap: 0px;
  margin: 0 auto;
  width: 90%;
  padding-bottom: 0px;
  justify-items: center;
  align-items: center;
}

#main_menu2 {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  /* column-gap: 40px; */
  column-gap: 25px;
  /* row-gap: 30px; */
  row-gap: 0px;
  margin: 0 auto;
  width: 90%;
  padding-top: 0px;
  justify-items: center;
  align-items: center;
}

/* 幅800px以上で1行に */
@media (min-width: 800px) {
  #main_menu {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 10px;
    width: 90%;
    padding-top: 20px;
    padding-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
  }

  #main_menu2 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 10px;
    width: 90%;
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
  }
}


/*-------------------------------------------
　スマホ用下部追従メニュー
-------------------------------------------*/

/*メニューをページ下部に固定*/
#sp-fixed-menu {
  position: fixed;
  width: 100%;
  bottom: 0px;
  font-size: 0;
  opacity: 0.9;
  z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

#sp-fixed-menu li {
  justify-content: center;
  align-items: center;
  width: 50%;
  padding: 0;
  margin: 0;
  font-size: 11px;
  border-right: 1px solid #fff;
}

/*１番めのメニューを緑色に*/
#sp-fixed-menu li:first-child {
  /* background: #38b435; */
  background: #999;
}

/*２番めのメニューを緑色に*/
#sp-fixed-menu li:nth-child(2) {
  /* background: #6699ff; */
  background: #999;
}

/*３番めのメニューを緑色に*/
#sp-fixed-menu li:nth-child(3) {
  /* background: #aaa; */
  background: #999;
}

/*４番目のメニューをオレンジ色に*/
#sp-fixed-menu li:last-child {
  /* background: #f3a324; */
  background: #999;
}

/*ボタンを調整*/
#sp-fixed-menu li a {
  color: #fff;
  text-align: center;
  display: block;
  width: 100%;
  padding: 7px;
}

/*PCの場合にはメニューを表示させない*/
@media (min-width: 800px) {
  .for-sp {
    display: none;
  }
}


/*-------------------------------------------
　コンテンツページ
-------------------------------------------*/

/* ヘッダー分のスペース */
#header-space {
  height: 90px;
}

/* ページタイトルエリア */
.title {
  height: 250px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  text-shadow: 1px 1px 10px #4b2c14;
}

#dtp_title {
  background-image: url(../img/dtp/dtp_title.jpeg);
}

#web_title {
  background-image: url(../img/web/web_title.jpeg);
}

#cad_title {
  background-image: url(../img/cad/cad_title.jpeg);
}

#program_title {
  background-image: url(../img/program/program_title.jpeg);
}

#office_title {
  background-image: url(../img/office/office_title.jpeg);
}

#boki_fp_title {
  background-image: url(../img/boki_fp/boki_fp_title.jpeg);
}

#fee_title {
  background-image: url(../img/fee/fee_title.jpeg);
}

#corporate_training_title {
  background-image: url(../img/corporate_training/corporate_training_title.jpeg);
}

#school_info_title {
  background-image: url(../img/school_info/school_info_title.jpeg);
}

#reskilling_title {
  background-image: url(../img/reskilling/reskilling_title.jpeg);
}

#education_benefit_title {
  background-image: url(../img/education_benefit/education_benefit_title.jpeg);
}

#online_hyb_title {
  background-image: url(../img/online_hyb/main_1200_450.jpg);
}

#honka_title {
  background-image: url(../img/honka/title_pc.png);
  background-size: contain;
}

#web_nocode_ai_title {
  background-image: url(../img/web/web_nocode_ai_title.jpeg);
}

#ai_web_honka_title {
  background-image: url(../img/honka/ai_web_title_pc.png);
  background-size: contain;
}

#ai_cad_honka_title {
  background-image: url(../img/honka/ai_cad_title_pc.png);
  background-size: contain;
}

#online_video_title {
  background-image: url(../img/online_video/online_video_mv.png.png);
  background-size: contain;
}

/* 本科タイトルスマホ用 */
@media screen and (max-width: 768px) {
  #honka_title {
    background-image: url(../img/honka/title_sp.png);
    margin-top: -50px;
  }

  #ai_web_honka_title {
    background-image: url(../img/honka/ai_Web_title_sp.png);
    margin-top: -50px;
  }

  #ai_cad_honka_title {
    background-image: url(../img/honka/ai_cad_title_sp.png);
    margin-top: -50px;
  }
}

#celeb97_title {
  background-image: url(../img/celeb97/celeb_pc_title.png);
  background-size: contain;
}

/* 97周年タイトルスマホ用 */
@media screen and (max-width: 768px) {
  #celeb97_title {
    background-image: url(../img/celeb97/celeb_sp_title.png);
    margin-top: -50px;
  }
}

#junior_pg_title {
  background-image: url(../img/junior_pg/junior_pg_title.jpeg);
}

#junior_title {
  background-image: url(../img/junior/junior_title.jpg);
}

#job_support_title {
  background-image: url(../img/job_support/job_support_title.jpeg);
}

#support_title {
  background-image: url(../img/support_sc/yu-bann-1200-252.jpg);
  background-size: contain;
}

/* サポートスクールタイトルスマホ用 */
@media screen and (max-width: 768px) {
  #support_title {
    background-image: url(../img/support_sc/yu-bann-767-300.jpg);
    margin-top: -50px;
  }

  .btn-reserve {
    width: auto;
  }


}

.title h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: bold;
}


.title p {
  font-size: 16px;
  margin-top: 15px;
}

/* スマホの場合、左右に内余白を設ける */
@media screen and (max-width: 768px) {
  .title {
    padding-left: 10px;
    padding-right: 10px;
  }
}



/* パンくずリストとスクールの特徴 */

#bread_feature {
  margin: 10px 3px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}

/* PC用のスタイル */
@media screen and (min-width:800px) {
  #bread_feature {
    margin: 10px 50px;
    padding: 0;
    font-size: 16px;
  }
}

/* パンくずリスト */
#bread ul {
  display: flex;
  /* 子要素(li)を横一列に並べる */
  list-style-type: none;
  /* リスト要素に表示されている"・"を非表示 */
}


/* スマホの場合縦に並ぶようにする */

#bread li:after {
  content: '\003e';
  /* 「>」を要素間の区切り文字として表示 */
  margin-left: 10px;
  /* 区切り文字と要素の間隔を調整 */
  margin-right: 10px;
  /* 区切り文字と要素の間隔を調整 */
  color: #888888;
  /* 区切り文字の文字色 */
}


@media screen and (max-width: 768px) {
  #bread ul {
    /* flex-direction: column; */
  }

  #bread ul li {
    margin-top: 5px;
  }

  #bread li:after {
    content: '\003e';
    /* 「>」を要素間の区切り文字として表示 */
    margin-left: 0px;
    /* 区切り文字と要素の間隔を調整 */
    margin-right: 0px;
    /* 区切り文字と要素の間隔を調整 */
    color: #888888;
    /* 区切り文字の文字色 */
  }


}

#bread li:last-child:after {
  content: "";
  /* 最後のliの後ろには区切り文字を表示しない */
}

/* スクールの特徴 */
.pr_wrap {
  display: flex;
  /* 横並び */
  justify-content: space-between;
  /* 左右両端揃え */
  margin-top: 5px;
  width: 50%;
}

/* スマホの場合、文字を小さくする */
@media screen and (max-width: 768px) {
  .pr_wrap {
    font-size: 9px;
    gap: 0;
    width: 220px;
  }
}

.pr_item {
  padding: 5px;
  width: 32%;
}

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

  .pr_item {
    padding: 5px 0px;
    width: 32%;
  }
}

.pr_item p {
  text-align: center;
}

.pr_emphasis {
  text-emphasis: double-circle #e5c046;
  -webkit-text-emphasis: double-circle #e5c046;
}

/* コンテンツページの各セクションの上下左右の余白 */
section.contents {
  margin: 10px 5px;
  padding: 5px;
  background-color: #fff;
}

/* PC用のスタイル */
@media screen and (min-width:800px) {
  section.contents {
    margin: 10px 70px;
    padding: 5px;
  }
}

/* コンテンツページの見出し2のスタイル */
.contents h2 {
  position: relative;
  /* 疑似要素の基準 */
  padding-bottom: 10px;
  width: 100%;
  font-size: 24px;
  border-bottom: 5px solid;
  border-image: linear-gradient(to right, #c7c7c7 0%, transparent 100%);
  border-image-slice: 1;
  margin-bottom: 30px;
}

.contents h2::after {
  /* 黄色の線を疑似要素で表現 */
  content: '';
  position: absolute;
  top: 100%;
  /* 上から100%の位置に配置 */
  left: 0;
  width: 100px;
  height: 5px;
  background-color: #1d5eae;
}

/* 2つ目以降の見出し2の上にマージンを設ける */
.contents h2:nth-child(n+2) {
  margin-top: 40px;
}

/* コンテンツページの見出し3のスタイル */
.contents h3 {
  font-size: 18px;
  border-left: 8px #1d5eae solid;
  padding-left: 8px;
}

/* コンテンツページの科目チェックのスタイル */
.check {
  font-size: 18px;
  background-image: url(../img/check_icon.png);
  background-repeat: no-repeat;
  padding-left: 20px;
}

/* 強調したいテキストに蛍光ペンのマークをつける */
.emphasis {
  background-image: linear-gradient(
      /* 線形グラデーション */
      rgba(0 0 0 / 0) 70%,
      /* 透明 */
      #e5c046 70%
      /* 蛍光ペンの線を表現 */
    );
  font-size: 120%;
}
.emphasis_line_only {
  background-image: linear-gradient(
      /* 線形グラデーション */
      rgba(0 0 0 / 0) 70%,
      /* 透明 */
      #e5c046 70%
      /* 蛍光ペンの線を表現 */
    );
}
.big_emphasis {
  background-image: linear-gradient(
      /* 線形グラデーション */
      rgba(0 0 0 / 0) 70%,
      /* 透明 */
      #e5c046 70%
      /* 蛍光ペンの線を表現 */
    );
  font-size: 240%;
  font-weight: bold;
}

/* コンテンツページの段落のスタイル */
.contents p {
  line-height: 1.7;
}

/* 各コース上部のコース概要説明 */
#course_overview {
  margin-top: 30px;
  margin-bottom: 50px;
  line-height: 2;
  border: 1px solid #ccc;
  background-color: #eee;
  padding: 10px;
}

/* スマホの場合、コース概要説明の上余白狭くする */
@media screen and (max-width: 868px) {
  #course_overview {
    margin-top: 10px;
  }

  .graph_paper {
    padding: 20px 0
  }

  .inner {
    padding: 0;
  }

  /* トップページ文字調整 */
  .mv-area h1 {
    font-size: 165%;
  }

  /* トップページ画像領域高さ調整 */
  .mv-area {
    height: auto;
  }
}

/* 表の幅、パソコンは90%にする */
@media screen and (min-width:768px) {
  .table-90 {
    width: 90%;
  }
}


/*-------------------------------------------
　人気のコース
-------------------------------------------*/

/* sectionのスタイル */
/* .page-menu-area {
  background-color: #f0f0f0;
} */

/* プランリスト（ul） */
.page-menu-content {
  display: flex;
  flex-direction: column;
}

/* プランアイテム（li） */
.page-menu-item {
  background-color: #fff;
  margin-bottom: 30px;
  box-shadow: 1px 1px 3px #aaa;
  border-radius: 3px;
}

/* 写真以外の情報 */
.page-menu-info {
  padding: 0 15px 15px;
}

/* プラン名 */
.page-menu-title {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #527acc;
  font-size: 15px;
  margin-top: 20px;
}


/* リストマーカー */
.page-menu-list li::before {
  content: "";
  background: url(../img/list-marker.svg) no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 3px;
}

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

  /* プランリスト（ul） */
  .page-menu-content {
    flex-direction: row;
  }

  /* プランアイテム（li） */
  .page-menu-item {
    flex: 1;
    margin-top: 0;
    margin-left: 15px;
    margin-right: 15px;
  }
}


/*-------------------------------------------
　習得できるスキル
-------------------------------------------*/

/* スキルリスト（ul） */
.learningskill-content {
  display: flex;
  flex-direction: column;
}

/* スキルアイテム（li） */
.learningskill-item {
  background-color: #fff;
  margin-bottom: 30px;
  box-shadow: 1px 1px 3px #aaa;
  border-radius: 5px;
}

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

  /* プランリスト（ul） */
  .learningskill-content {
    flex-direction: row;
  }

  /* プランアイテム（li） */
  .learningskill-item {
    flex: 1;
    margin-top: 0;
    margin-left: 15px;
    margin-right: 15px;
  }
}

/* アイコンを回り込み左 */
.icon_left {
  float: left;
  width: 35%;
  margin: 10px;
}

/* アイコン以外の情報 */
.learningskill-info {
  padding: 10px;
}

/*-------------------------------------------
　企業研修ページ
-------------------------------------------*/

/* 研修カリキュラム、スタイル共通 */
/* 研修カリキュラム（ul） */
.curriculum-content {
  display: flex;
  flex-direction: column;
}

/* 研修カリキュラム（li） */
.curriculum-item {
  background-color: #fff;
  margin-bottom: 30px;
  box-shadow: 1px 1px 3px #aaa;
  border-radius: 5px;
}

.corporate-font {
  font-size: 1.2em;
}

/* オンライン対応アイコンスタイル */
.online_training_icon {
  width: 60px;            /* サイズ調整 */
  vertical-align: middle; /* 文字の中央高さに合わせる */
  margin-left: 5px;       /* 文字との隙間を開ける */
}

.online_training_h5 {
  width: 60px;            /* サイズ調整 */
  vertical-align: middle; /* 文字の中央高さに合わせる */
  margin-left: 5px;       /* 文字との隙間を開ける */
  position: relative; top: -15px;
}

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

  /* 研修カリキュラム（ul） */
  .curriculum-content {
    flex-direction: row;
  }

  /* 研修カリキュラム（li） */
  .curriculum-item {
    flex: 1;
    margin-top: 0;
    margin-left: 15px;
    margin-right: 15px;
  }

  /* 講座総時間数改行コントロール */
  .reskill_time_br {
    display: none;
  }
  
}



/* 研修カリキュラムの科目名と画像中央配置 */
.curriculum-info {
  text-align: center;
} 

.curriculum-info img {
  width: 80%;       /* 200px固定を解除し、親要素の幅に合わせる */
  max-width: 80%;   /* 念のため親要素からはみ出さないようにする */
  height: auto;
  
}

.curriculum-info p {
  text-align: center;
  margin-top: 10px;
}

.curriculum-info h4 {
  font-size: 16px;
}

/* 企業研修ページの受講方法アイコン用設定 */
.curriculum-info-coporate_training img {
  width: 30%;       /* 200px固定を解除し、親要素の幅に合わせる */
  max-width: 30%;   /* 念のため親要素からはみ出さないようにする */
  height: auto;
  display: block;   /* 画像をブロック要素として扱う */
  margin: 0 auto;   /* 上下は0、左右は自動調整（＝中央寄せ） */
}

.curriculum-info-coporate_training p {
  text-align: center;
  margin-top: 10px;
}

.curriculum-info-coporate_training h4 {
  font-size: 16px;
}


/* リスキリングタイトル画像の大きさ */
.reskilling_img {
  width: 90%;
}

.reskilling_img_wrap {
  text-align: center;
}

/* リスキリング科目メニュー */
.reskill_menu {
  text-align: center;
}

.reskill_menu a {
  display: block;
  padding: 25px 40px;
  border: 1px solid #333;
  font-size: 1rem;
  color: #333;
  background-color: #fff;
  text-decoration: none;
  box-shadow: 4px 4px 4px gray;
}

.reskill_menu a::after {
  display: inline-block;
  position: relative;
  content: "";
  width: 16px;
  height: 16px;
  top: 2px;
  left: 8px;
  background: url(../img/corporate_training/yaji_bottom.png) no-repeat right center;
}

.reskill_menu a:hover {
  background-color: #1d5eae;
  transition: 1s;
  color: #fff;
}

.reskill_h4 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.reskill_h4::before,
.reskill_h4::after {
  content: '';
  width: 70px;
  height: 3px;
  background-color: #1d5eae;
}

.reskill_h4::before {
  margin-right: 30px;
}

.reskill_h4::after {
  margin-left: 30px;
}

.reskill_h5 {
  display: flex;
}

.reskill_h5::before,
.reskill_h5::after {
  content: '';
  width: 3px;
  height: 26px;
  background-color: #1d5eae;
}

.reskill_h5::before {
  margin-right: 10px;
}

.reskill_h5::after {
  margin-left: 10px;
}

/* 総研修時間表示スタイル */
.reskill_time_brown {
  color: #841414;
}

.reskill_time_green {
  color: #0f5879;
}

/* 修了生作品の科目名と画像中央配置 */
.portofolio-info {
  text-align: center;
}

.portofolio-info img {
  width: 300px;
  margin: 0 auto;
}

.portofolio-info p {
  text-align: center;
  margin-top: 10px;
}

.portofolio-info h4 {
  font-size: 16px;
}

/* 科目名 */
.subject-title {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #527acc;
  width: 90%;
  margin: 0 auto;
}

.curriculum-item table {
  width: 95%;
  margin: 10px auto;
}

/* 講座一覧の講座名の横に給付印 */
.kyufu-wrap {
  margin: 10px 20px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.kyufu-wrap h4 {
  font-size: 16px;
}

/* 給付印 */
.kyufu {
  font-size: 15px;
  border: 2px solid #527acc;
  padding: 3px;
}

/* 給付印(母子用) */
.kyufu2 {
  font-size: 15px;
  border: 2px solid #e07a9c;
  padding: 3px;
}

/* 就職支援ページのジョブリスト */
.job_list dt {
  margin-bottom: 10px;
}

.job_list dd {
  margin-bottom: 15px;
}

.job_room {
  width: 70%;
  margin: 0 auto;
}

/* 修了生の声の文章の内余白 */
.voice-content {
  padding: 5px;
}

/* 修了生の声の写真下背景色のずらし装飾 */
.pic_shadow {
  box-shadow: 5px 5px 0 rgba(29, 94, 174, 0.4);
}

/* 本科ページ用 */
.honka-info {
  padding: 8px;
}

.honka-info p {
  text-align: center;
}

.honka-info ul {
  list-style-type: none;
}

.honka-info li {
  line-height: 1.8;
  padding-left: 1.4em;
  background-image: url(../img/honka/check.png);
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: left center;
}

.honka-info img {
  width: 200px;
  margin: 0 auto;
}

.honka-info h4 {
  font-size: 16px;
  margin-bottom: 7px;
}

.honka-info h5 {
  font-size: 17px;
  font-weight: bold;
}

.balloon-006 {
  display: flex;
  justify-content: center;
  position: relative;
  max-width: 300px;
  margin-top: 15px;
  padding: .8em 1.2em;
  border: 3px solid #2589d0;
  border-radius: 5px;
  background-color: #fff;
  color: #333333;
}

.balloon-006::before,
.balloon-006::after {
  position: absolute;
  top: -15px;
  width: 30px;
  height: 15px;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  content: '';
}

.balloon-006::before {
  background-color: #2589d0;
}

.balloon-006::after {
  top: -11px;
  background-color: #fff;
}


.backg {
  background-color: #f0f5fb;
  padding-top: 10px;
}

.h5_style {
  color: #04a9f4;
}

.h6_style {
  font-weight: bold;
  font-size: 110%;
}

.img_left {
  float: left;
  margin-left: 20px;
  margin-right: 20px;
}

.flow_li {
  font-size: 70%;
}

.comment {
  background-color: #fff;
  font-size: 75%;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

.yajirushi {
  text-align: center;
  margin-top: 10px;
}

.kaishi {
  text-align: center;
  color: #ffffff;
  font-weight: bold;
}

.kaishi h5 {
  background-color: #308bf4;
}

.l_bt {
  width: 100%;
  display: inline-block;
  padding: 10px;
  line-height: 1.4;
  border-radius: 4px;
  background-color: #1d5eae;
  font-family: Meiryo, 'Hiragino Kaku Gothic Pro', 'MS PGothic';
  font-size: 15px;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: 10px;
}

.c_bt {
  width: 100%;
  display: inline-block;
  padding: 10px;
  line-height: 1.4;
  border-radius: 4px;
  background-color: #669;
  font-family: Meiryo, 'Hiragino Kaku Gothic Pro', 'MS PGothic';
  font-size: 15px;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
}

.g_bt {
  width: 100%;
  display: inline-block;
  padding: 10px;
  line-height: 1.4;
  border-radius: 4px;
  background-color: #009933;
  font-family: Meiryo, 'Hiragino Kaku Gothic Pro', 'MS PGothic';
  font-size: 15px;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
}

.honka-info h6 {
  text-align: center;
}

.bosyu {
  font-size: 20px;
}

.bosyu span {
  /* テキストの指定 */
  display: flex;
  align-items: center;
  /* テキストと線の上下中央配置 */
  margin-bottom: 10px;
  color: #4C4F6B;
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  font-family: 'Montserrat', sans-serif;
  text-indent: 2em;
}

.bosyu span::before {
  /* 黄色の線を疑似要素で表現 */
  content: '';
  display: inline-block;
  margin-right: 20px;
  width: 40px;
  height: 1px;
  background-color: #4C4F6B;
}

/* 本科時間割表 */
.time-table {
  vertical-align: middle;
}

.tt_h {
  font-weight: bold;
  color: #1d5eae;
}

.afterS {
  text-align: center;
  height: 65px;
}

.honka_senko_1 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 30px 43px 30px 30px;
  width: 100%;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  background-color: #90be70;
  border-image-source: repeating-linear-gradient(45deg, #2b550e 0px, #2b550e 4px, rgba(0 0 0 / 0) 4px, rgba(0 0 0 / 0) 6px);
  border-image-slice: 3;
  border-width: 3px;
  border-image-repeat: round;
  border-style: solid;
}

.honka_senko_1 a::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: #cae6b7;
  border-radius: 20px;
}

.honka_senko_1 a::after {
  content: '';
  transform: rotate(45deg);
  width: 6px;
  height: 6px;
  border-top: 2px solid #2b550e;
  border-right: 2px solid #2b550e;
}

.honka_senko_2 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 30px 43px 30px 30px;
  width: 100%;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  background-color: #ff66cc;
  border-image-source: repeating-linear-gradient(45deg, #74162b 0px, #74162b 4px, rgba(0 0 0 / 0) 4px, rgba(0 0 0 / 0) 6px);
  border-image-slice: 3;
  border-width: 3px;
  border-image-repeat: round;
  border-style: solid;
}

.honka_senko_2 a::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: #cae6b7;
  border-radius: 20px;
}

.honka_senko_2 a::after {
  content: '';
  transform: rotate(45deg);
  width: 6px;
  height: 6px;
  border-top: 2px solid #74162b;
  border-right: 2px solid #74162b;
}

.senko_syosai_1 a {
  display: flex;
  align-items: center;
  position: relative;
  padding: 30px 0 30px 33px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.senko_syosai_1 a span {
  position: relative;
  padding: 10px;
  background-color: #fff;
  z-index: 1;
}

.senko_syosai_1 a::before {
  content: '';
  transform: rotate(45deg);
  margin-right: 10px;
  width: 8px;
  height: 8px;
  border-top: 3px solid #2b550e;
  border-right: 3px solid #2b550e;
}

.senko_syosai_1 a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  border: 2px solid #90be70;
  border-radius: 50%;
}

.senko_syosai_2 a {
  display: flex;
  align-items: center;
  position: relative;
  padding: 30px 0 30px 33px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.senko_syosai_2 a span {
  position: relative;
  padding: 10px;
  background-color: #fff;
  z-index: 1;
}

.senko_syosai_2 a::before {
  content: '';
  transform: rotate(45deg);
  margin-right: 10px;
  width: 8px;
  height: 8px;
  border-top: 3px solid #74162b;
  border-right: 3px solid #74162b;
}

.senko_syosai_2 a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  border: 2px solid #ff66cc;
  border-radius: 50%;
}

/* 卒業生の声の写真 */
.honka_grad_content img {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.tegaki_moji {
  font-family: 'Zen Kurenaido', sans-serif;
  font-weight: bold;
  font-size: 110%;
}

.tegaki_w_s {
  font-weight: bold;
  font-size: 130%;
}

.honka_grad_content h5 {
  text-align: center;
  font-size: 100%;
}

/* トップページ下部バナー */
.top_menu {
  text-align: center;
}

.top_menu a {
  display: block;
  padding: 25px 20px;
  border: 1px solid #333;
  font-size: 1rem;
  color: #333;
  background-color: #fff;
  text-decoration: none;
  box-shadow: 4px 4px 4px gray;
}

.top_menu a::after {
  display: inline-block;
  position: relative;
  content: "";
  width: 16px;
  height: 16px;
  top: 2px;
  left: 8px;
  background: url(../img/corporate_training/yaji_bottom.png) no-repeat right center;
}

.top_menu a:hover {
  background-color: #1d5eae;
  transition: 1s;
  color: #fff;
}

/* 下向き矢印 */
.dli-chevron-down {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

/* 波線 */
.wavy_line {
  color: #333;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #00CCFF;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  text-align: center;
  text-underline-offset: 5px;
  text-align: center;
  font-size: 16px;
}

/* 波線(母子用) */
.wavy_line2 {
  color: #333;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #E056DB;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  text-align: center;
  font-size: 16px;

  text-underline-offset: 5px;
  text-align: center;
  font-size: 16px;
}

/* リスキリング対象印 */
.riskill_mark {
  font-size: 10px;
  border: 2px solid #E056DB;
  padding: 3px;
}

/* トップページSNS用 */
.sns-info p {
  text-align: center;
  color: #fff;
  font-weight: bold;
}

.sns-info p a {
  width: 100%;
  display: block;
  color: #fff;
}

.sns-info ul {
  list-style-type: none;
}

.sns-info li {
  line-height: 1.8;
  padding-left: 1.4em;
  background-image: url(../img/honka/check.png);
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: left center;
}

.sns-info img {
  width: 200px;
  margin: 0 auto;
}

.sns-info h4 {
  font-size: 16px;
  margin-bottom: 7px;
}

.sns-info h5 {
  font-size: 17px;
  font-weight: bold;
}

/* 各SNS用スタイル */
.sns-info-line {
  padding: 8px;
  background-color: #00b900;
}

.sns-info-insta {
  padding: 8px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.sns-info-x {
  padding: 8px;
  background-color: #000000;
}

/* LINE友だち追加ボタン用スタイル(ヘッダー(モバイル表示)、フッター) */
.line-banner-head {
  transform: scale(0.6);
  justify-content: center;

}

.line-banner-foot {
  transform: scale(0.7);
}

/* プログラミングページトップ画像、文章並び設定 */
.top_br {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.top_br img {
  width: 50%;
  height: 100%;
  border-radius: 10px
}

.top_br h3 {
  margin: 0;
}

@media (max-width: 768px) {
  .top_br {
    flex-direction: column;
  }

  .top_br img {
    width: 100%;
    align-self: center
  }
}

/* CADページ習得スキル(ソフト名)画像文字並び設定 */
/* --------------------------------------------------
   CADコース「習得できるスキル」専用レイアウト
   クラス名: cad-skill-custom
-------------------------------------------------- */

/* ▼▼▼ 共通設定（リストアイテム内の基本設定） ▼▼▼ */
.cad-skill-custom .learningskill-item {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  width: 100%;
  box-sizing: border-box;
}

/* 画像（アイコン）の共通設定 */
.cad-skill-custom .learningskill-item img {
  height: auto;
  flex-shrink: 0; /* 画像が潰れないようにする */
}

/* 文章エリアの共通設定 */
.cad-skill-custom .learningskill-info {
  flex: 1; /* 残りの幅を全て使う */
}

.cad-skill-custom .learningskill-info h4 {
  margin-top: 0;
  font-weight: bold;
}

.cad-skill-custom .learningskill-info p {
  margin-bottom: 0;
}

/* CADページ習得スキル(ソフト名)画像文字並び設定 */
/* --------------------------------------------------
   CADコース「習得できるスキル」専用レイアウト
   クラス名: cad-skill-custom
-------------------------------------------------- */

/* ▼▼▼ PC表示（768px以上）の設定 ▼▼▼ */
/* 画像：左、文章：右 のリスト形式 */
@media screen and (min-width: 768px) {
  
  /* リスト全体を縦積みに戻す（横並び解除） */
  ul.cad-skill-custom {
    flex-direction: column !important; 
  }

  /* アイテムの設定 */
  .cad-skill-custom .learningskill-item {
    flex-direction: row; /* 左→右 */
    padding: 5px;
    margin: 0 0 20px 0 !important; /* 横並び用のマージンを解除 */
    text-align: left;
  }

  /* 画像サイズ（PC用） */
  .cad-skill-custom .learningskill-item img {
    width: 60px;       /* PCで見やすいサイズ */
    margin-right: 20px; /* 画像と文章の間隔 */
    margin-bottom: 0;
  }

  /* 文字サイズ（PC用） */
  .cad-skill-custom .learningskill-info h4 {
    font-size: 20px;
    margin-bottom: 10px;
  }
}

/* ▼▼▼ スマホ表示（767px以下）の設定 ▼▼▼ */
/* 画像：上、文章：下 のカード形式 */
@media screen and (max-width: 768px) {

  /* アイテムの設定 */
  .cad-skill-custom .learningskill-item {
    padding: 20px 15px;
  }

  /* 画像サイズ（スマホ用） */
  .cad-skill-custom .learningskill-item img {
    width: 80px;         /* スマホで見やすいサイズ */
    margin-right: 10px;
    margin-bottom: 10px; /* 画像の下に余白 */
  }

  /* 文字サイズ（スマホ用） */
  .cad-skill-custom .learningskill-info h4 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .cad-skill-custom .learningskill-info p {
    font-size: 14px;
    text-align: left; /* 文章は左揃え（読みやすさ重視） */
  }
}

@media (max-width: 768px) {
  
  /* リストアイテムをFlexボックスにして横並びにする */
  .learningskill-item {
    display: flex;          /* 横並びにする */
    align-items: center;    /* 上下中央揃え */
    padding: 15px;          /* カード内の余白 */
  }

  /* 左側の画像（アイコン）の調整 */
  .learningskill-item img {        /* アイコンの幅（画像に合わせて適宜調整してください） */
    height: auto;           /* 高さは自動調整 */
    margin-right: 15px;     /* 画像と文章の間の余白 */
    flex-shrink: 0;         /* 画面が狭くても画像が潰れないように固定 */
  }

  /* 右側の文章エリアの調整 */
  .learningskill-info {
    padding: 0;             /* 元のパディングをリセット */
    flex: 1;                /* 残りの幅を一杯まで使う */
    text-align: left;       /* 左揃え */
  }

  /* 見出し（科目名） */
  .learningskill-info h4 {
    margin-top: 0;
    margin-bottom: 5px;     /* 見出し下の余白 */
    font-size: 18px;        /* 少し大きめにして強調 */
    font-weight: bold;
  }

  /* 説明文 */
  .learningskill-info p {
    font-size: 13px;        /* スマホで見やすいサイズ */
    margin: 0;              /* 余計な余白を削除 */
    line-height: 1.5;       /* 行間 */
  }
  
}

/* CADページトップ画像並び設定 */
/* 合格者バナー：PC横並び・モバイル縦並び */
/* 合格者バナー：PC横並び・モバイル縦並び */
.goukaku-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
}

.goukaku-item {
  flex: 1;
  max-width: 50%;
}

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

.goukaku-link {
  display: block;
}

@media screen and (max-width: 768px) {
  .goukaku-wrap {
    flex-direction: column;
    align-items: center;
  }

  .goukaku-item {
    max-width: 100%;
    width: 100%;
  }
}


/* ナビゲーションバー下の画像の余白を調整 */
#mv.mv-online_zoom-area {
  margin-top: 200px; /* ヘッダーの高さ分だけ調整（実際の高さに合わせて数値を変更） */
  padding: 0;
}

/* PC表示で適用されていたマージンをリセット */
@media screen and (max-width:768px) {
  #mv.mv-online_zoom-area {
    margin-top: 70px;
  }
}

/*--- スマホ用ヘッダーの横並びと画像サイズ調整（完成版） ---*/

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

  /* スマホ表示の<nav>全体をFlexboxコンテナにする */
  nav.sp-only {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  /* ロゴとLINEバナーが入っている<ul>もFlexboxにする */
  nav.sp-only .sp-logo {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  /* ▼▼▼ START: ここから修正・追加 ▼▼▼ */

  /* ロゴを囲む<li>が縮まないように設定 */
  nav.sp-only .sp-logo li:first-child {
    flex-shrink: 0; /* これでロゴが潰れるのを防ぎます */
  }

  /* ハンバーガーメニューの不要な余白をリセット */
  .gnav-toggle {
    margin-top: 0; /* これで垂直方向の中央が揃います */
  }

  /* ▲▲▲ END: 修正・追加ここまで ▲▲▲ */


  /* ロゴ画像のサイズを調整 */
  nav.sp-only .sp-logo li:first-child img {
    height: 35px;
    width: auto;
  }

  /* LINEバナーのサイズを調整 */
  nav.sp-only .line-banner img {
    height: 25px;
    width: auto;
    margin-left: 8px;
  }

}
/* スマホヘッダーのLINEバナー下の余白を削除 */
@media screen and (max-width: 767px) {
  nav.sp-only .gnav-item.line-banner {
    padding-bottom: 0px;
    border-bottom: none;
  }
  
}
/* PC表示のロゴマークを大きくし、縦横比を維持する */
@media screen and (min-width: 768px) {

  /* ロゴを囲むaタグの固定幅を解除する */
  .pc-only .gnav-item:first-child a {
    width: auto;
  }

  /* ロゴ画像の高さを指定する */
  .pc-only .gnav-item:first-child img {
    height: 50px;
    width: auto;
  }
}

/* 取り消し線 */
.canc {
  text-decoration: line-through;
}

/* 割引授業料 */
.price_off {
  color: red;
  font-weight: bold;
  font-size: 120%;
}

/*メニュー項目リスキリング用 */
.reskill{
  font-size:0.8em;
  letter-spacing: -0.05em;  
}



/*-------------------------------------------
　動画教材販売ページ
-------------------------------------------*/
.ve-online-video-area {
  width: 100vw;
  height: 100vh;
  background-image: url(../img/online_video/online_video_mv.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 50px;
}

.online_video h3 {
  font-size: 200%;
  border: 0;
  text-align: center;
  margin-bottom: 0;
}

.sample-video{
    width:90%;
    max-width:900px;
    margin:0 auto;
}

.cad-detail-btn {
  display: block;
  width: 90%;
  max-width: 420px;
  margin: 20px auto;
  padding: 15px 20px;
  background: #174a7e;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  border-radius: 6px;
  box-sizing: border-box;
  transition: 0.2s;
}

.cad-detail-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}