@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 下層ページ用CSS
************************************/
p {
  font-size: 16px;
  margin-bottom: 16px;
}
.center {
  text-align: center;
  margin: 0 auto;
}
.right {
  text-align:
}
.mb16 {
  margin-bottom: 16px;
}
.page_title {
  text-align: center;
  margin: 40px auto;
}
.page_title h1 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
  font-family: var(--font-mincho);
}
.page_title h1:before {
  content: '';
  position: absolute;
  bottom: -16px;
  display: inline-block;
  width: 60px;
  height: 4px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: rgb( 0, 132, 208 );
}
.page_wrap {
  width: 1200px;
  max-width: 100%;
  margin: 40px auto;
  background: #fff;
  padding: 40px;
}
.page_wrapinner {
  margin: 0 auto;
  width: 1200px;
  max-width: 100%;
}
.page_wrap ul.page_child {
  list-style: none;
  padding: 0 10px;
}
.page_kotsu ul.page_child li:before {
  color: #F6C0A0;
}
.page_admission ul.page_child li:before {
  color: #F6A0C1;
}
.page_gaiyo ul.page_child li:before {
  color: #A0D7F6;
}
.page_curriculum ul.page_child li:before {
  color: #A0F6D5;
}
.page_boshu ul.page_child li:before {
  color: #AAA0F6;
}
.page_wrap ul.page_child li:before {
  content:">";
  margin-right: 4px;
}
.page_wrap ul.page_child li {
    border-bottom: 1px dashed #ccc;
    margin: 8px 0;
    padding: 8px 8px 8px 0;
    font-size: 15px;
}
.page_sec .sec {
  margin-bottom: 64px;
}
h3.page_index {
  position: relative;
  padding: 0.25em 0;
}
h3.page_index:after {
  content: "";
  display: block;
  height: 5px;
  background: -webkit-linear-gradient(to right, rgb(23,163,233), #2fbbd7);
  background: linear-gradient(to right, rgb(23,163,233), #2fbbd7);
}
h4.page_index {
  padding: 4px 8px;
  background: transparent;
  border-left: solid 5px #33cccc;
  margin: 8px 0 16px;
}
.sec {
  margin: 0 0 40px;
}
.page_btn {
  color: #ffffff;
  background: #0084d0;
  padding: 8px 24px;
  margin: 16px 0;
  display: block;
  width: fit-content;
}
.page_btn:hover {
  opacity: 0.8;
  transition: all .5s;
}
.disc_li {
  list-style: inside;
  font-size: 16px;
  margin-bottom: 16px;
padding-left: 24px;
}
.no_li {
  list-style: auto;
  font-size: 16px;
  margin-bottom: 16px;
  padding-left: 24px;
}
.ul_li {
  list-style: none;
  font-size: 16px;
  margin-bottom: 16px;
  padding-left: 24px;
}
.abc_li {
  list-style: upper-alpha;
  font-size: 16px;
  margin-bottom: 16px;
  padding-left: 24px;
}
.cat-link,
.author-info {
  display: none;
}
.article-header {
  background: transparent;
  z-index: 1;
}
.article-header h1.entry-title {
  position: relative;
  padding: 0.25em 0;
}
.article-header h1.entry-title:after {
  content: "";
  display: block;
  height: 5px;
  background: -webkit-linear-gradient(to right, rgb(23,163,233), #2fbbd7);
  background: linear-gradient(to right, rgb(23,163,233), #2fbbd7);
}
.w1140 {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

/* site map */
.wsp-pages-title {
  display: none;
}
.wsp-pages-list {
  padding: 0;
}
.wsp-pages-list li {
  margin-bottom: 16px;
  padding-bottom: 16px;
  list-style: none;
  border-bottom: 1px dashed #ccc;
}
.wsp-pages-list li .children {
	padding-left:16px;
}
.wsp-pages-list li li:before {
  content: "-";
  margin-right: 8px;
}
.wsp-pages-list li li {
  margin: 0;
  padding: 0;
  border-bottom: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*PC用*/
@media screen and (min-width:800px) {
.pcNone {
	display: none;
}
.page_wrap {
  display: flex;
}
.page_wrap ul.page_child {
  width: 20%;
  height: fit-content;
  padding-bottom: 16px;
}
.page_kotsu .page_child {
  border: 4px solid #F6C0A0;
}
.page_admission .page_child {
  border: 4px solid #F6A0C1;
}
.page_gaiyo .page_child {
  border: 4px solid #A0D7F6;
}
.page_curriculum .page_child {
  border: 4px solid #A0F6D5;
}
.page_boshu .page_child {
  border: 4px solid #AAA0F6;
}
.page_wrap .page_content {
  width: 80%;
  padding:16px;
}
}
/*SP用*/
@media screen and (max-width: 800px) {
.spNone {
	display: none;
}
.page_wrap {
  padding: 16px 8px;
}
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/************************************
** table
************************************/
#table01 tr {
  border-bottom: 1px solid #b5b1b1;
}
#table01 th,
#table01 td {
  padding: 24px 0;
  border: none;
}
#table01 th {
  width: 30%;
}
#table02 .td_w10 {
  width: 10%;
}
#table02 .td_w40 {
  width: 40%;
}
#table02 th, #table02 td {
  width: 20%;
  min-width: 100px;
  padding: 10px;
  height: 60px;
  font-size: 16px;
}
#table03 th, #table03 td {
  width: calc(100% / 8) ;
  min-width: max-content;
  padding: 10px;
  font-size: 16px;
}
#table04 th, #table04 td {
  min-width: 100px;
  padding: 10px;
  height: 60px;
  font-size: 16px;
}
#table05 th, #table05 td {
  width: calc(100% / 6) ;
  min-width: max-content;
  padding: 10px;
  font-size: 16px;
}
#table06 th,
#table06 td {
  width: calc(100% / 24);
  min-width: max-content;
  padding: 4px 0;
  font-size: 15px;
  text-align: center;
}
@media only screen and (max-width: 800px) {
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
  }
  #table01 th {
    width: 100%;
  }
  #table01 td {
    padding-top: 0;
  }
  #table02,
  #table03,
  #table04,
  #table05 {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
  }
}
@media only screen and (max-width: 1200px) {
  #table06 {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
  }
#table06 th,
#table06 td {
	padding:4px;
	min-width:38px;
}
}
.bd_none {
  border:none !important;
  background: #fff;
}
td.table_bg {
  background: #e6f7ff;
}
td.table_bg01 {
    background: #ffffe0;
}
td.table_bg02 {
    background: #f0fff0;
}
td.table_bg03 {
	background: #fff0f5;
}
td.table_bg04 {
	background: #ffebcd;
}
th.table_bg {
  background: #dff0f8;
}
th.table_bg01 {
    background: #fffacd;
}
th.table_bg02 {
    background: #e6ffdd;
}
th.table_bg03 {
	background: #ffe4e1;
}
th.table_bg04 {
	background: #ffe4b5;
}
.curriculum_table01 {
	background: #ffe4e1;
}
.curriculum_table02 {
    background: #fdf5e6;
}
.curriculum_table03 {
    background: #fffff0;
}
.curriculum_table04 {
    background: #f0fff0;
}
#table06 .label_01,
#table06  .label_02,
#table06  .label_03 {
  border: none !important;
  background: #fff;
  text-align: left;
}
.label_01 span {
  background: #0080c6;
  padding: 2px 8px;
  color: #fff;
  display: block;
  width: fit-content;
  text-align:left;
  border-radius: 24px;
}
.label_02 span {
  background: #ff6347;
  color: #fff;
  padding: 6px;
  border-radius: 24px;
  display: block;
  width: fit-content;
  writing-mode: vertical-rl;
  letter-spacing: 2px;
}
.label_03 span {
  background: #33cccc;
  padding: 2px 8px;
  color: #fff;
  display: block;
  width: fit-content;
  text-align:left;
  border-radius: 24px;
}

/************************************
** flex
************************************/
.flex_colomn_l {
	display: flex;
	flex-direction: column;
}
@media screen and (min-width:800px) {
	.flex {
		display:flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.flex_top {
		display: flex;
		align-items:flex-start;
	}
	.flex_center {
		display:flex;
		align-items:center;
	}
	.flex_jcenter {
		display: flex;
		justify-content:center;
	}
	.flex_space {
		display: flex;
		justify-content:space-around;
	}
  .flex_wrap {
    flex-wrap: wrap;
  }
	.flex2 {
		width: 50%;
		padding: 0 8px;
	}
	.flex3 {
		width : calc(100% / 3) ;
		padding: 0 8px;
	}
	.flex4 {
		width: 25%;
		padding: 0 8px;
	}
	.flex_3 {
		width: 30%;
		padding: 0 8px;
	}
	.flex_4 {
		width: 40%;
		padding: 0 8px;
	}
	.flex_6 {
		width: 60%;
		padding: 0 8px;
	}
	.flex_7 {
		width: 70%;
		padding: 0 8px;
	}
}
@media screen and (max-width: 800px) {
	.flex_reverse {
		display: flex;
		flex-direction: column-reverse;
	}
	.flex2,
	.flex3,
	.flex_3,
	.flex_4,
	.flex_6,
	.flex_7 {
		padding: 8px 0;
	}
	.flex4 {
		width: 50%;
		padding: 8px;
	}
}

/************************************
** お問い合わせ用
************************************/
.toc {
  display: none;
}
#content tr th,
#content tr td {
  padding: 16px;
}
#content tr th,
#content thead th {
  color: #000;
  font-size: 16px;
  line-height: normal;
  background: #e8e8e8;
}
.table-default {
		width: 100%;
}
.table-default caption {
margin-bottom: 0.5em;
text-align: center;
font-size: 20px;
font-size: 2rem;
}
.table-default td,
.table-default th {
border: 1px solid #ccc;
}
.table-default th {
background: #e8e8e8;
color: #000; }
.table-default td {
background: #fff;
}
.table-menu {
		width: 100%;
}
.table-menu caption {
margin-bottom: 0.5em;
text-align: center;
font-size: 20px;
font-size: 2rem;
}
.table-menu td,
.table-menu th {
padding: 0.7em 1em;
border-top: 1px solid #cd0000;
border-bottom: 1px solid #cd0000;
}
.table-menu tbody th {
text-align: left;
}
.table-menu td:last-child {
text-align: right;
white-space: nowrap;
}
.table-schedule {
width: 100%;
}
.table-schedule caption {
margin-bottom: 0.5em;
text-align: center;
font-size: 20px;
font-size: 2rem;
}
.table-schedule td,
.table-schedule th {
border: 1px solid #cd0000;
padding: 0.7em 1em;
text-align: center;
}
@media (max-width: 800px) {
	#content th {
		display:block;
		text-align: center;
	}
	#content td {
		display:block;
	}
	#content td.even {
		display:flex;
	}
	textarea {
		width:100%;
	}
	.table-menu td,
	.table-menu th {
	padding: 0.7em .3em;
	}
}
.table-schedule thead th {
background: rgba(204, 204, 204, 0.7);
color: #fff;
}
.table-schedule tbody th {
background: transparent;
}
.table-schedule td {
background: transparent;
}
.table-summary {
border-top: 1px solid #ccc;
width: 100%;
}
.table-summary caption {
margin-bottom: 0.5em;
text-align: center;
font-size: 20px;
font-size: 2rem;
}
.table-summary td,
.table-summary th {
padding: 1em;
border-bottom: 1px solid #ccc;
}
.table-summary th {
text-align: left;
font-weight: normal;
width: 20%;
}
input[type=submit]:hover {
  background: #0084d0;
  color: #fff;
transition: all .5s;
}
input[type=submit] {
transition: all .5s;
}

/************************************
** アコーディオン
************************************/
.accordion__list {
  /* width: 500px; */
  padding: 10px;
  list-style: none;
}
.accordion__item:nth-child(n+2) {
  margin-top: 10px;
}
.accordion__head {
  position: relative;
  width: 100%;
  padding: 10px;
  color: #fff;
  background: rgb( 0, 132, 208 );
  cursor: pointer;
}
.accordion__head::after {
  content: "+";
  position: absolute;
  top: 8px;
  right: 10px;
}
.accordion__item.active .accordion__head::after {
  content: "-";
  right: 13px;
}
.accordion__body {
  overflow: hidden;
  width: 100%;
  height: 0;
  padding: 0 10px;
  transition: all .25s ease;
}
.accordion__item.active .accordion__body {
  height: auto;
  padding: 10px;
}

/* google_language_translator */
@media screen and (min-width:800px) {
#sortable {
	display: none;
}
}
@media screen and (max-width: 800px) {
#google_language_translator {
    display: block !important;
}
#flags {
	width: 100% !important;
}
#flags ul li {
}
header .header-sp-menu #sp-menu-check ~ .sp-menu #flags a {
    padding: 0;
    border: none;
}
}

/*2026.7.31*/
@media (min-width: 769px){
  .movies {
    position: relative;
    padding: 0 5%; /* 左右に余白 */
  }

  /* 共通 */
  .movies .movies-01,
  .movies .movies-02,
  .movies .movies-03 {
    position: absolute;
    top: 33%;
  }

  /* 左：横向き動画 */
  .movies .movies-01 {
    width: 30%;
    aspect-ratio: 16 / 9;
    left: 5%;
  }

  /* 中央：縦向き動画（ここを変更） */
  .movies .movies-02 {
    width: 18%;          /* 縦動画は細くする */
    aspect-ratio: 9 / 16; /* ← 縦長に変更 */
    left: 37%;           /* 左の横動画の右に配置 */
  }

  /* 右：横向き動画 */
  .movies .movies-03 {
    width: 30%;
    aspect-ratio: 16 / 9;
    left: 60%;           /* 中央の縦動画の右に配置 */
  }
}

@media (max-width: 768px) {
  .sp-mvbox {
      margin: 0;
      padding: 0;
      width: 100%;
      aspect-ratio: auto;
      height: 200vh;
  }
.movies.sp-mvbox .movies-title {
 top: 7%;
}
.movies.sp-mvbox .movies-subtitle {
 top: 11%;
}
.movies.sp-mvbox .movies-text1{
 top: 14%;
}

  .movies .movies-01,
  .movies .movies-02,
  .movies .movies-03 {
    position: absolute;
    left: 7%;
    width: 86%;
    height: auto;          /* ← 高さを中身に合わせる */
    aspect-ratio: auto;    /* ← 比率固定を解除 */
  }

  .movies .movies-01 {
    top: 20%;
  }

  .movies .movies-02 {
    top: 36%;
  }

  .movies .movies-03 {
    top: 81%; /* 3つ目の位置 */
  }
}

@media (max-width: 468px) {
  .movies .movies-03 {
    top: 77%; /* 3つ目の位置 */
  }
}