@charset "UTF-8";
/* -----------------------------------
  サイトカラー
----------------------------------- */
:root{
    --HighLight: #fff;
    --TextColor: #222;
    --PrimaryColor: #023586;
    --SecondaryColor: #000562;
    --Blue01:#C6DCFF;
    --Blue02: #1353B7;
    --Blue03: #ECFAFF;
    --GrayDark: #B5B5B6;
    --GrayLighter: #EEE;
    --Gold01: #C3AC02;
    --Gold02: #CAA50A;
    --Accent01: #E2CF4B;
    --Accent02: #FF383C;
    --tokubetsuPrimary: #456AA3;
    --tokubetsuSecondary: #1F3B86;
    --tankyuPrimary: #74A845;
    --tankyuSecondary: #4F9D48;
    --bunkakyoyoPrimary: #F3892A;
    --bunkakyoyoSecondary: #DE5511;
    --jyouhouPrimary: #E97461;
    --jyouhouSecondary: #CD352D;
    --TextLinks: #0FA3E9;

}

/* -----------------------------------
  basic
----------------------------------- */
html {
	scroll-padding-top: 76px;
	padding-top: 76px !important;
    overflow-y:scroll;
}

body {
	font-size: 1.4rem;
	color: var(--TextColor);
	font-family:  "Noto Sans JP", "Shippori Mincho B1","Inter", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif ,serif;
}

html.is-fixed,
html.is-fixed body {
  height: 100%;
  overflow: hidden;
}

a {
	text-decoration: none;
	color: #3896d2;
	transition: .3s;
}
img {
	width: 100%;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}


/* -----------------------------------
  pc
----------------------------------- */
/* -- ページレイアウト -- */
.txt-c {
	text-align: center;
}

.txt-l {
	text-align: left;
}

.box12 {
	width: 100%;
	max-width: 1200px;
	margin: auto;
}

.box10 {
	width: 100%;
	max-width: 1000px;
	margin: auto;
}

.pc_block {
	display: block!important;
}

.pc_flex {
	display: flex!important;
}

.pc_inline {
	display: inline!important;
}

.pc_inblock {
	display: inline-block!important;
}

.sp_block,
.sp_flex,
.sp_inline,
.sp_inblock {
	display: none!important;
}

.container_wrapper{
    position: relative;
}

.container_box{
    margin: 0 auto;
    padding: 40px;
}

.container_box.anc{
	display:flex;
	flex-direction: column;
	gap: 32px;
}

.container_box.course{
	display:flex;
    justify-content: center;
    padding: 0;
}

.common_txt{
    line-height: 160%;
    font-size: 1.6rem;
}

/* CTA Medium */
.theme_cta_m,
.theme_cta_s,
.container_ctaList input[type="submit"],
.container_ctaList input[type="button"]{
    max-width: 250px;
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 16px 12px;
    font-size: 1.3rem;
    text-align: center;
    box-shadow: 0 0 8px rgba(0,0,0,0.15);
    border: 1px solid var(--PrimaryColor);
    color: var(--HighLight);
}

.container_ctaList input[type="submit"],
.container_ctaList input[type="button"]{
    padding: 16px;
    font-size: 1.6rem;
}

.theme_cta_m::after,
.theme_cta_s::after{
    content: "";
    width: 22px;
    height: 6px;
    display: block;
    background: url(../images/common/cta_arrow.svg)no-repeat;
    background-size: 100%;
    position: absolute;
    top: 48%;
    right: 20px;
    transform: translate(0,-50%);
    transition: .3s;
}

.theme_cta_m[target="_blank"]::after,
.theme_cta_s[target="_blank"]::after{
    content: "";
    width: 16px;
    height: 12px;
    background: url(../images/common/icon_blank.svg)no-repeat;
    top: 50%;
    right: 20px;
    transform: translate(0,-50%);
    transition: .3s;
}
.theme_cta_m:hover::after,
.theme_cta_s:hover::after{
    transform: translate(5px,-50%);
}

.theme_cta_m.--b,
.theme_cta_s.--b,
.container_ctaList input[type="submit"]{
    background: var(--PrimaryColor);
}

.theme_cta_m.--w,
.theme_cta_s.--w,
.container_ctaList input[type="button"]{
    background: var(--HighLight);
    color: var(--PrimaryColor);
}

.theme_cta_m.--y,
.theme_cta_s.--y{
    background: var(--Accent01);
    border:none;
    color: var(--TextColor);
}

.theme_cta_m.--w::after,
.theme_cta_s.--w::after{
    background: url(../images/common/cta_arrow_b.svg)no-repeat;
}

.theme_cta_m.--y::after,
.theme_cta_s.--y::after{
    background: url(../images/common/cta_arrow_k.svg)no-repeat;
}

.theme_cta_m.--w[target="_blank"]::after,
.theme_cta_s.--w[target="_blank"]::after{
    content: "";
    width: 16px;
    height: 12px;
    background: url(../images/common/icon_blank_b.svg)no-repeat;
    top: 50%;
    right: 20px;
    transform: translate(0,-50%);
    transition: .3s;
}


/* CTA Small */
.theme_cta_s{
    max-width: 150px;
    padding: 16px 32px 16px 8px;
}

/* list */
.common_list{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 1.6rem;
    line-height: 160%;
    font-weight: 400;
    width: fit-content;
}

.common_list .common_list_item{
    padding-left: 16px;
    position: relative;
    width: auto;
}

.common_list .common_list_item::before{
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: var(--PrimaryColor);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 12px;
}

/*-------- header --------*/
.header_list_wrapper_l{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 20px;
}

.header_list_blank{
    display: flex;
    gap: 16px;
}

.header_list_blank a{
    color: var(--PrimaryColor);
    font-size: 1.6rem;
}

.common_header_wrap{
	max-height: 76px;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--HighLight);
    position: fixed;
    top: 0;
    z-index: 9999;
}

.header_list_wrapper{
    display: flex;
}

.menu_contact, .menu_material {
    min-width: 160px;
    max-width: 160px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.menu_contact{
    background-color: var(--TextColor);
    color: var(--HighLight);
    transition: .3s ease;
}

.menu_contact:hover{
    background-color: var(--SecondaryColor);
}

.menu_material{
    background-color: var(--Accent01);
    color: var(--TextColor);
    transition: .3s ease;
}

.menu_material:hover{
    background-color: var(--Gold02);
}

/* -------- ハンバーガーメニュー -------- */
.hamburger-fade {
    position: relative;
    z-index: 1000;
    width: 76px;
    height: 76px;
    padding: 0;
    border: none;
    background: var(--PrimaryColor);
    cursor: pointer;
}

.hamburger-fade__wrapper {
  position: relative;
  width: 30px;
  height: 20px;
  margin: 20px auto;
}

.hamburger-fade__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--HighLight);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-fade__line:nth-child(1) { top: 0; }
.hamburger-fade__line:nth-child(2) { top: 12px; }
.hamburger-fade__txt {
    position: absolute;
    top: 18px;
    left: 1px;
    color: var(--HighLight);
    font-size: 10px;
}

.hamburger-fade.active .hamburger-fade__line {
  background-color: #fff;
}

.hamburger-fade.active .hamburger-fade__line:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
}

.hamburger-fade.active .hamburger-fade__line:nth-child(2) {
  transform: translateY(-9px) rotate(-45deg);
}

.nav-fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  visibility: hidden;
  z-index: 900;
  transition: 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav-fade__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(2, 53, 134,0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav-fade.active {
  visibility: visible;
}

.nav-fade.active .nav-fade__bg {
  opacity: 1;
}

.nav-fade__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100vh;
  padding: 5vh 10vw 10vh;
  overflow: auto;
}

.nav-fade__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 40px 0;
}

.nav-fade__item {
  position: relative;
  margin-bottom: 2vh;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  max-width: 25%;
    width: 100%;
}

.nav-fade.active .nav-fade__item {
  opacity: 1;
  transform: translateY(0);
}

.nav-fade.active .nav-fade__item:nth-child(1) { transition-delay: 0.2s; }
.nav-fade.active .nav-fade__item:nth-child(2) { transition-delay: 0.25s; }
.nav-fade.active .nav-fade__item:nth-child(3) { transition-delay: 0.3s; }
.nav-fade.active .nav-fade__item:nth-child(4) { transition-delay: 0.35s; }
.nav-fade.active .nav-fade__item:nth-child(5) { transition-delay: 0.4s; }
.nav-fade.active .nav-fade__item:nth-child(6) { transition-delay: 0.45s; }
.nav-fade.active .nav-fade__item:nth-child(7) { transition-delay: 0.5s; }
.nav-fade.active .nav-fade__item:nth-child(8) { transition-delay: 0.55s; }


.nav-fade__link {
    display: inline-block;
    width: 100%;
    color: #fff;
    font-size: 2rem;
    font-weight: 400;
    padding-bottom: 10px;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.nav-fade__link.anc {
    border: none;
    padding: 5px 0 5px 20px;
    font-weight: 300;
    font-size: 1.6rem;
}

.nav-fade__link.anc::before{
    content: "";
    width: 10px;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
    display: block;
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
}

.nav-fade__link:hover {
  color: var(--Accent01);
}

.nav-fade__item.top{
    display: flex;
    max-width: 100%;
    justify-content: space-between;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--HighLight);
}

.nav-fade__item.top .nav-menu-logo{
    display: block;
    max-width: 170px;
    width: 100%;
}

.nav-fade__item.top .sns_icon a{
    width: 30px;
    display: block;
}

.nav-fade__item.bottom{
    color: var(--HighLight);
    border-top: 1px solid var(--HighLight);
    padding: 2vw 2vw;
    max-width: 100%;
}

.nav-fade__item .address,
.nav-fade__item .tel,
.nav-fade__item .mail{
    color: var(--HighLight);
    font-size: 1.4rem;
    line-height: 160%;
}

.nav-fade__item .tel a,
.nav-fade__item .mail a{
    text-decoration: underline;
    color: var(--HighLight);
}

/* 下層ページFV */

.page-mainttl{
    display: flex;
    font-size: 2.8rem;
    text-align: center;
    color: var(--HighLight);
    background: linear-gradient(90deg,rgba(0, 5, 98, 0.7) 0%, rgba(0, 5, 98, 0.7) 100%);
    height: 200px;
    justify-content: center;
    align-items: center;
    position: relative;
}

.page-mainttl::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
	background-image: url(../images/front/bg_method.webp);
	background-size: cover;
	background-position: center center;
    position: absolute;
    z-index: -1;
}

#course .page-mainttl::after {
    background-image: url(../images/front/bg_course.webp);
}

#schoollife .page-mainttl::after {
    background-image: url(../images/front/bg_schoollife.webp);
}

#club .page-mainttl::after {
    background-image: url(../images/front/bg_club.webp);
}

#entrance_web .page-mainttl::after {
    background-image: url(../images/front/bg_exam.webp);
}

#shinro .page-mainttl::after {
    background-image: url(../images/front/bg_career.webp);
}

.page-anc-list {
    background: var(--SecondaryColor);
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px;
}

.page-anc-list .page-anc-list-items{
    width: 100%;
    color: var(--HighLight);
    padding-bottom: 16px;
    position: relative;
    display: block;
    text-align: center;
}

.page-anc-list .page-anc-list-items::after{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid var(--HighLight);
    border-left: 2px solid var(--HighLight);
    transform: rotate(-45deg) translateX(-50%);
    position: absolute;
    left: 50%;
}

.page-anc-list .page-anc-list-items:hover{
    color: var(--Accent01);
}

.page-anc-list .page-anc-list-items:hover::after{
    border-bottom: 2px solid var(--Accent01);
    border-left: 2px solid var(--Accent01);
}

.contents-ttl{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    font-family: "Shippori Mincho B1", serif;
    color: var(--PrimaryColor);
    gap: 12px;
    padding-bottom: 14px;
}

.contents-ttl::after{
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    position: absolute;
    background: linear-gradient(90deg,var(--PrimaryColor) 50%, var(--Blue01) 50%);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.contents-ttl small{
    font-family: "Inter", sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
}

.contents-ttl_line{
    display: inline-block;
    font-size: 1.6rem;
    line-height: 160%;
    padding:  4px 12px 8px;
    border-left: 4px solid var(--PrimaryColor);
    border-bottom: 1px solid var(--PrimaryColor);
}

.contents-ttl_line_marker {
    background: var(--Accent01);
    font-size: 1.2rem;
    line-height: 130%;
    padding: 4px;
    display: inline-block;
    margin-right: 8px;
}

.contents-ttl_bg{
    font-size: 1.6rem;
    line-height: 160%;
    background: var(--PrimaryColor);
    color: var(--HighLight);
    padding: 12px;
}

.contents-ttl_border {
    color: var(--PrimaryColor);
    font-size: 1.4rem;
    font-weight: 500;
    padding: 4px 8px;
    border-left: 4px solid var(--PrimaryColor);
}

.contents-ttl_cen{
    position: relative;
    text-align: center;
    font-size: 1.6rem;
    color: var(--PrimaryColor);
    font-weight: 400;
    background: var(--HighLight);
    display: block;
    width: fit-content;
    padding: 4px 12px;
    line-height: 1;
    margin: 0 auto;
}

.contents-ttl_cen::before{
    content: "";
    display: block;
    width: 1000px;
    height: 1px;
    background: var(--Blue01);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
}

.accordion-wrap{
    border-bottom: 1px solid var(--GrayLighter);
}

.accordion-wrap:nth-of-type(1){
    border-top: 1px solid var(--GrayLighter);
}

.accordion-item {
    width: 100%;
    padding: 24px 8px;
    cursor: pointer;
    color: var(--PrimaryColor);
    font-size: 1.6rem;
    font-weight: 500;
    position: relative;
transition: .3s ease;
}

.accordion-item:hover{
    background: var(--GrayLighter);
    transition:.3s ease;
}

.accordion-item::before
{
position: absolute;
content: '';
top: 50%;
right: 10px;
width: 10px;
height: 1px;
background-color:#585858;
transform: rotate(90deg);
transition: all .3s ease-in-out;
}

.accordion-item::after
{
position: absolute;
content: '';
top: 50%;
right: 10px;
width: 10px;
height: 1px;
background-color:#585858;
transition: all .3s ease-in-out;
}

.accordion-wrap.open .accordion-item::before
{
transform: rotate(180deg);
}

.accordion-wrap.open .accordion-item::after
{
opacity:0;
}
.accordion-header{
  transition: ease-in-out 100ms;
}

.accordion-text{
  width: 100%;
  display: none;
  padding: 32px 0;
 }

 .accordion-gold{
  color: #ddba4d;
 }

 .accordion-item.accordion-no-bar{
border-bottom: 0;
}

/* -------- blank_links --------- */
.blank_links {
    color: var(--PrimaryColor);
    font-size: 1.3rem;
    font-weight: 500;
    padding: 28px 60px;
    width: 100%;
    position: relative;
    display: block;
    border-bottom: 1px solid var(--GrayLighter);
    transition:.3s ease;
}
.blank_links:first-of-type{
    border-top: 1px solid var(--GrayLighter);
}

.blank_links::before{
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    background: url(../images/common/icon_download_PDF.svg)no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.blank_links[href*=".pdf"]::before{
    background: url(../images/common/icon_download_PDF.svg)no-repeat;
    background-size: 100%;
}

.blank_links[href*=".docx"]::before{
    background: url(../images/common/icon_download_Word.svg)no-repeat;
    background-size: 100%;
}

.blank_links[href*=".xlsx"]::before{
    background: url(../images/common/icon_download_Excel.svg)no-repeat;
    background-size: 100%;
}

.blank_links::after{
    content: "";
    display: block;
    width: 15px;
    height: 12px;
    background: url(../images/common/icon_blank_b.svg)no-repeat;
    background-size: 100%;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.blank_links:hover{
    background: var(--GrayLighter);
    transition:.3s ease;
}

.common_number_list{
    counter-reset: listnum; /* カウンターをリセット */
	list-style: none; /* 標準のスタイルは消す */
    display: flex;
    flex-direction: column;
    gap: 20px;

}

.common_number_listitem{
    padding-left: 30px;
    position: relative;
}

.common_number_list .common_number_listitem::before{
    counter-increment: listnum;
    content: counter(listnum);
    display: flex;
    width: 20px;
    height: 20px;
    background: var(--PrimaryColor);
    color: var(--HighLight);
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.3rem;
    position: absolute;
    left: 0;
    top: 2px;
}

/* ------- 注釈　------- */
.note,.note_swipe{
    display: inline-block;
    font-size: 1.2rem;
    line-height: 160%;
    position: relative;
}
.note li{
    position: relative;
    padding-left: 1.4rem;
    display: inline-block;
}

.note li::before{
    content: "※";
    display: block;
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: 0;
}

.note_swipe li::before{
    display: none;
}

/* -------- table -------- */

.table-swipe-true {
    overflow-x: auto;
    display: block;
    margin-bottom: 8px;
}

table{
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

table th,
table td {
    white-space: nowrap;
    padding: 10px 15px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid var(--GrayLighter)!important;
    color: var(--TextColor);
    font-weight: 400;
    line-height: 160%;
}

.table-swipe-false table th,
.table-swipe-false table td{
    white-space:inherit;
    width: 50%;
}


table thead th{
    background: var(--PrimaryColor);
    color: var(--HighLight);
    font-size: 1.3rem;
    box-sizing: border-box;
    padding: 10px 40px;

}


table tbody th{
    background: var(--Blue01);

}

.table_bold{
    font-size: 1.6rem;
    font-weight: 600;
}

.table_medium{
    font-weight: 500;
}

.table_accent{
    color: var(--Accent02);
    font-weight: 400;
    font-style: normal;
}

#entrance_web .table-swipe-false table th, #entrance_web .table-swipe-false table td {
    white-space: inherit;
}

#entrance_web .table-swipe-false.---02 table th{
    width: 30%;
}

#entrance_web .table-swipe-false.---02 table td{
    width: 70%;
}

#entrance_web .table-swipe-false.---03 table th, #entrance_web .table-swipe-false.---03 table td{
    width: 33.3%;
}

.price_clr{
    font-size: 2.4rem;
    color: var(--Gold02);
    font-weight: 700;
    font-family: 'Inter',sans-serif;
}

/* ------ footer ------- */
.common_footer_wrap{
    background: var(--PrimaryColor);
    color: var(--HighLight);
    padding: 40px 0;
    position: relative;
    font-size: 12px;
}
.common_footer_wrap .box10{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

.footer_container{
    display: flex;
    justify-content: space-between;
}


.footer_nav{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer_nav_title{
    color: var(--HighLight);
    font-size: 14px;
    font-weight: 700;
    position: relative;
}


.footer_nav_title[target="_blank"]::after{
    content: "";
    display: inline-block;
    width: 16px;
    height: 12px;
    background: url(../images/common/icon_blank.svg)no-repeat;
    background-size: contain;
    position: absolute;
    top: 1px;
    right: -24px;
    transition: .3s;
}



.footer_nav_anc{
    display: block;
    position: relative;
    padding-left: 15px;
    color: var(--HighLight);
    width: fit-content;
    font-weight: 300;
}

.footer_nav_anc::before{
    content: "";
    display: inline-block;
    width: 8px;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.footer_nav_anc[target="_blank"]::after{
    content: "";
    display: inline-block;
    width: 13px;
    height: 10px;
    background: url(../images/common/icon_blank.svg)no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 3px;
    right: -18px;
    transition: .3s;
}
.footer_nav_title:hover,
.footer_nav_anc:hover{
    color: var(--Accent01);
}
.footer_container.btm{
    justify-content: center;
    gap: 16px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--HighLight);
}

.footer_nav_btm{
    color: var(--HighLight);
    position: relative;
}

.footer_nav_btm::after{
    content: "/";
    color: var(--HighLight);
    opacity: 0.3;
    position: absolute;
    right: -12px;
}


.footer_nav_btm:last-of-type::after{
    content: "";
    display: none;
}

.school_connection{
    display: flex;
    gap: 36px;
}

.sns_icon{
    display: flex;
    align-items: center;
    gap: 12px;
}

.common_footer_wrap .copy{
    font-size: 10px;
    font-weight: 300;
    text-align: center;
}

.header_list_blank.bottom{
    position: fixed;
    bottom: 0;
    z-index: 999;
    background: var(--SecondaryColor);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.header_list_blank.bottom a{
    color: var(--HighLight);
    display: block;
    width: 50%;
    padding: 10px;
    text-align: center;
    font-size: 1.2rem;
    border-bottom: 1px solid var(--HighLight);
    border-right: 1px solid var(--HighLight);
}

.header_list_blank.bottom a:nth-of-type(even){
    border-right: none;
}

.header_list_blank.bottom a:nth-of-type(3),
.header_list_blank.bottom a:nth-of-type(4){
    border-bottom: none;
}

/* ----------- ローディングアニメーション ---------- */
.start {
	background: var(--PrimaryColor);
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 99999;
}
.start #logo_anime {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	max-width: 900px;
	width: 100%;
}

#logo_anime path {
  fill: var(--HighLight);
  stroke: var(--HighLight); 
  stroke-width: 0.1px;
  animation: svg-anime 3.5s ease-in;
}

@keyframes svg-anime {
  0% {
    fill: transparent;
    stroke-dasharray: 400px;
    stroke-dashoffset: 400px;
  }
  80% {
    fill: transparent;
    stroke-dashoffset: 0;
  }
  100%{
    fill: var(--HighLight);
  }
}



@media screen and (max-width: 768px) {
.start #logo_anime {
	max-width: 80vw;
}
}

@keyframes svg {
    0% {
        fill: transparent;
    }
    80% {
        fill: transparent;
    }
    100%{
        stroke-dashoffset: 0;
    }
}

  @keyframes loading {
	0% {
	  transform: scale(0, 1);
	}
	100% {
	  transform: scale(1, 1);
	}
  }
  @keyframes fadein-keyframes {
	  0% {
		opacity: 1;
	  }
  
	  100% {
		opacity: 0;
	  }
	}


/* --------- アニメーション ---------- */
/* フェードイン前 */
.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

/* フェードイン後 */
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}


/* ------------ お知らせ ------------- */
.contents-ttl_line {
    line-height: 105%;
    padding: 4px 12px 12px;
    position: relative;
}

.contents-ttl_line time{
    font-family: 'Inter' , sans-serif;
    font-size: 1.3rem;
    color: var(--GrayDark);
}

.category_list{
    display: flex;
    gap: 20px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.category{
    display: inline-block;
    width: fit-content;
    padding: 6px 12px;
    background: var(--PrimaryColor);
    color: var(--HighLight);
}

.text-area{
    font-size: 1.6rem;
    line-height: 160%;
}

.text-area .wp-block-heading{
    margin-bottom: 30px;
}

.text-area h1.wp-block-heading {
    position: relative;
    font-size: 4rem;
    font-family: "Shippori Mincho B1", serif;
    color: var(--PrimaryColor);
    line-height: 160%;
    padding-bottom: 14px;
}

.text-area h1.wp-block-heading::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    background: linear-gradient(90deg,var(--PrimaryColor) 20%, var(--Blue01) 20%);
    bottom: 0;
    left: 0;
}

.text-area h2.wp-block-heading {
    color: var(--PrimaryColor);
    font-size: 2.6rem;
    font-weight: 500;
    padding: 8px 12px;
    border-left: 4px solid var(--PrimaryColor);
}

.text-area h3.wp-block-heading {
    font-size: 2rem;
    width: fit-content;
    display: inline-block;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 70%, rgba(198, 220, 255, 1) 70%);
}

.text-area h4.wp-block-heading {
    position: relative;
    text-align: left;
    font-size: 1.8rem;
    color: var(--PrimaryColor);
    font-weight: 400;
    background: var(--HighLight);
    display: block;
    width: fit-content;
    padding: 4px 12px 4px 0;
    line-height: 1;
}

.text-area h4.wp-block-heading::before {
    content: "";
    display: block;
    width: 920px;
    height: 1px;
    background: var(--Blue01);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    z-index: -1;
}

.text-area h5.wp-block-heading {
    font-size: 1.7rem;
    height: 40px;
    padding: 0 20px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    position: relative;
}

.text-area h5.wp-block-heading::before,
.text-area h5.wp-block-heading::after{
    content: "";
    display: block;
    width: 8px;
    height: 100%;
    border: 1px solid var(--Blue01);
    position: absolute;
}

.text-area h5.wp-block-heading::before{
    border-right: none;
    left: 0;
}

.text-area h5.wp-block-heading::after{
    border-left: none;
    right: 0;
}

.text-area h6.wp-block-heading {
    color: var(--Blue02);
    font-weight: 600;
    font-size: 1.6rem;
}

.text-area ul{
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: inside;
}

.text-area .wp-block-quote {
    margin: 0;
    padding: 20px;
    background: var(--GrayLighter);
}

.text-area .wp-block-quote p{
    margin: 0;
}

.text-area .wp-block-quote cite{
    color: var(--GrayDark);
    font-size: 1.3rem;
}

.wp-block-details {
    padding: 16px 0;
    border-top: 1px solid var(--GrayLighter);
    border-bottom: 1px solid var(--GrayLighter);
}

.wp-block-details summary {
    color: var(--PrimaryColor);
    font-size: 1.7rem;
}

.text-area p,
.text-area ul,
.text-area .wp-block-quote,
.text-area .wp-block-table,
.text-area figure{
    margin-bottom: 30px;
}

.text-area .wp-block-details p{
    margin-bottom: 0;
}

#toteacher .post-password-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

#toteacher .post-password-form p{
    font-size: 1.6rem;
    line-height: 160%;
}

#toteacher .post-password-form label{
    color: var(--PrimaryColor);
}

#toteacher .post-password-form label input[type="password"]{
    background: var(--GrayLighter);
    padding: 4px;
}

#toteacher .post-password-form input[type="submit"]{
    color: var(--HighLight);
    background: var(--Blue02);
    padding:4px 8px;
    margin-left: 8px;
}

.pagination .page-numbers {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 1.4rem;
	font-family: "Inter", sans-serif;
}

.pagination .page-numbers li .page-numbers {
    border: 1px solid var(--PrimaryColor);
    color: var(--PrimaryColor);
    padding: 8px 12px;
}


.pagination .page-numbers li .page-numbers.current {
    background: var(--PrimaryColor);
    color: var(--HighLight);
}


/* -----------------------------------
  tablet
----------------------------------- */

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

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

/* この上に記述 */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
}

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

/* -----------------------------------
  basic
----------------------------------- */
html {
	scroll-padding-top: 56px;
	padding-top: 56px !important;
}

#front::after{
        content: "";
        display: block;
        width: 120px;
        height: 480px;
        background: var(--PrimaryColor);
        position: fixed;
        top: 0;
        right: 0;
        z-index: -10;
}

.container_box {
    margin: 10vw auto;
    padding: 6vw;
}

/* -- ページレイアウト -- */
.box12 {
	max-width: 100%;
}

.box10 {
	max-width: 90%;
}

.sp_block {
	display: block!important;
}

.sp_flex {
	display: flex!important;
}

.sp_inline {
	display: inline!important;
}

.sp_inblock {
	display: inline-block!important;
}

.pc_block,
.pc_flex,
.pc_inline,
.pc_inblock {
	display: none!important;
}

.bg-w{
    background: var(--HighLight);
}

.container_box.course{
    flex-direction: column;
    padding: 0 0 10vw;
    margin: 0 auto;
}

.common_txt{
    font-size: 1.3rem;
}

/* list */
.common_list{
    font-size: 1.3rem;
}
.common_list .common_list_item::before{
    top: 8px;
}

/* ----- header ----- */
.common_header_wrap {
    max-height: 56px;
}
.header_list_wrapper_l {
    padding: 1vw 3vw;
}


.header_list_wrapper_l .logo{
    display: block;
    max-width: 25vw;
    width: 100%;
}
.menu_contact, .menu_material {
    min-width: 58px;
    max-width: 58px;
    gap: 0.5vw;
    font-size: 0.8rem;
}


/* -------- ハンバーガーメニュー -------- */
.hamburger-fade__wrapper {
    margin: 0 auto;
}
.hamburger-fade {
    width: 56px;
    height: 56px;
}
.hamburger-fade.active {
    background: transparent;
}
.nav-fade__list {
    flex-direction: column;
    gap: 4vw;
}
.nav-fade__wrapper {
    justify-content: flex-start;
}

.nav-fade__item {
  max-width: 100%;
}
.nav-fade__item.top {
    flex-direction: column;
    align-items: center;
    gap: 4vw;
}

.nav-fade__item.bottom{
    padding: 6vw 2vw;
}

/* 下層ページFV */
.page-mainttl {
    font-size: 2rem;
    height: 150px;
}

.contents-ttl {
    font-size: 2.5rem;
}

.contents-ttl_cen::before {
    width: 90vw;
}

.page-anc-list {
    gap: 12px;
}

.page-anc-list .page-anc-list-items{
    font-size: 0.9rem;
}

#schoollife .page-anc-list li{
    max-width: 22%;
    width: 100%;
}

/* ------ footer ------- */
.common_footer_wrap {
    padding: 4vh 0 10vh;
}
.footer_container.btm {
        flex-wrap: wrap;
        gap: 2vw;
        justify-content: center;
}
.footer_nav_title[target="_blank"]::after {
    right: 0;
}

.footer_nav_btm {
    max-width: 48%;
    width: 100%;
    padding-left: 5vw;
}
.footer_nav_btm::after {
    content: "ー";
    right: auto;
    left: 0;
}
.footer_nav_btm:last-of-type:after {
    content: "ー";
        top: 0;
        right: auto;
        left: 0;
    display: block;
    position: absolute;
}
.school_connection {
    flex-direction: column;
    gap: 2vw;
}
.footer_nav_title {
    padding-right: 7vw;
}
.footer_container:last-of-type {
    flex-direction: row-reverse;
    justify-content: space-between;
}

/* ------- 注釈　------- */
.note,.note_swipe{
    font-size: 1.0rem;
}


/* 中学校の先生方へ */
#toteacher .post-password-form label input[type="password"] {
    width: 100%;
    display: block;
}
#toteacher .post-password-form input[type="submit"] {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    text-align: center;
}

}