@charset "UTF-8";

/*--------------------------
基本：基本タグ
---------------------------- */

/* リキッドレイアウト対応 */
main {
  font-family: "Noto Sans JP", sans-serif;
  color: #222222;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}




/* ----------
mainVisual
---------- */
.mainVisual{
  margin-bottom: clamp(60px, calc(25.3906vw - 135px), 125px);

  /* 背景（デザインはそのまま） */
  --mv-bg-img: url(../images/mainVisual.png);
  background-image: var(--mv-bg-img);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  height: 100vh;
  display: flex;
  align-items: center;
}

.mainVisual .inner{
  width: 100%;
  /*max-width: 1500px;*/
  max-width: calc(100% - 230px);

  margin: 0 auto;

  display: flex;
  gap: 0 5%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* ---- logo ---- */
.mainVisual .logoArea{
  width: 30%;
  padding-bottom: 2%;
}
.mainVisual .logoArea .logo img{
  width: 100%;
  height: auto;
  vertical-align: bottom;
  max-width: 500px;
}
.mainVisual .logoArea .logo{ text-align: center; }

/* ---- text ---- */
.mainVisual .txtArea{
  width: calc(100% - (30% + 5%));
  display: flex;
  justify-content: flex-end;
}

/* タイル（5列／各箱は成り行き） */
.typingTxt{
  width: 85%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px .3rem;
  align-items: start;
  grid-auto-rows: min-content;


  container-type: inline-size;
}

/* 中身が横はみ出ししないように */
.typingTxt > *{
  min-width: 0;
  box-sizing: border-box;
}

.typingTxt .char,
.typingTxt .pic{
  display: flex;
  align-items: center;
  flex-wrap:wrap;
}
.typingTxt .pic{
	justify-content:flex-end;
	padding-right:2%;
}

/* 文字セル：成り行き */
.typingTxt .char{
  overflow: hidden;
  font-weight: 900;

  /*font-size: clamp(45.0000px, calc(12.8571vw + -70.7143px), 135.0000px);*/
  font-size: clamp(45.0000px, calc(12.0000vw + -75.0000px), 135.0000px);

  line-height: 1;
  text-shadow: 0 0 5px rgba(16,16,16,.6);
  color: #fff;
  text-align: center;
  padding-bottom: 10px;
}

/* 画像セル：2列分 */
.typingTxt .pic{
  grid-column: span 2;
  align-self: start;
  min-width: 0;
  text-align:right;

  line-height: 1;
  padding-bottom:20px;
  padding-top:15px;


}
.typingTxt .pic > img{
  width: 100%;
  max-width: 80%;
  height: clamp(55.0000px, calc(12.5000vw + -37.5000px), 150.0000px);
  object-fit: cover;
  object-position: center;
  display: block;

  margin-bottom:4px;
  vertical-align:bottom;
}



.typingTxt .pic .pic_lable{
  display: block;
  text-align:right;
}
.typingTxt .pic .pic_lable img{
	display:inline;
  width: 100%;
  height:auto;
}

/* 右下2列に固定したい場合は下を有効化
.typingTxt .pic { grid-column: 4 / span 2; }
*/

/* Wide Breakpoint */
@media screen and (max-width: 1500px){
  .mainVisual .inner{
    width: calc(100% - 30px);
  }
}
@media screen and (max-width: 1350px){
  .mainVisual{
    height: auto;
    max-height: 100vh;
    max-height: 100svh;
    max-height: 100dvh;
    padding: 30px 0;
  }
  .mainVisual .inner{
    gap: 0 5%;
  }
  .mainVisual .logoArea{
    width: 35%;
  }
  .mainVisual .txtArea{
    width: calc(100% - (35% + 5%));
  }
  .mainVisual .logoArea .logo img{ max-width: 330px; }
}
@media screen and (max-width: 1100px){
  .mainVisual .inner{
    width: calc(100% - 100px);
  }
}
/*@media screen and (max-width: 767px){*/
@media screen and (max-width: 900px){
  .mainVisual{
    height: auto;
    max-height: 100vh;
    max-height: 100svh;
    max-height: 100dvh;
    padding: 90px 0 80px;
  }
  .mainVisual .inner{
    width: calc(100% - 30px);
	  max-width: 100%;
  }
  .mainVisual .txtArea{
    justify-content: center;
  }
  .mainVisual .logoArea{ width: 100%; margin-bottom: 15px; }
  .mainVisual .txtArea{ width: 100%; margin-bottom: 15px; }
  .mainVisual .logoArea .logo{ text-align: center; }


  .mainVisual .logoArea .logo img{ 
	  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25));
  }

	.typingTxt{
		width:320px;
	}
	.typingTxt .pic{
		padding-right:8px;
	}
	.typingTxt .pic > img{
	  max-width: 70%;
	  height: 47px;
	  margin-bottom:0px;
	}



}

@media screen and (max-width: 550px){
  .mainVisual{
    height: auto;
    max-height: none !important;
    padding: 40px 0 80px;
  }
  .mainVisual .logoArea .logo img{ max-width: 300px; }

  /* タイル（5列／各箱は成り行き） */
  .typingTxt{
    gap: 5px .3rem;
  }

	/* 文字セル：成り行き */
	.typingTxt .char{
	  font-size: 50px;
	}

	/* 画像セル：2列分 */
	.typingTxt .pic{
		padding-top:0;
  }
	.typingTxt{
		width:300px;
	}

}

/* ================================
   mainVisual アニメ（JS時のみ有効）
   ================================ */

/* アニメ適用スコープ */
.mainVisual.mv-anim{
  position: relative;
  overflow: hidden;
  /* フェード開始前に背景が見えないよう、画像だけ消す */
  background-image: none;
}

/* 中身は常に前面 */
.mainVisual.mv-anim .inner{
  position: relative;
  z-index: 1;
}

/* タイピング関連：初期非表示（スコープ限定） */
.mainVisual.mv-anim .typingTxt .char{ opacity: 0; display: inline-block; }
.mainVisual.mv-anim .typingTxt .pic{  opacity: 0; }
.mainVisual.mv-anim .logoArea .logo{  opacity: 0; }

/* 背景（::before）でフェード＆拡大 0→3s */
.mainVisual.mv-anim::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--mv-bg-img);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0;
  transform: scale(1);                 /* 等倍から開始 */
  z-index: 0;
  pointer-events: none;
}
.mainVisual.mv-anim.is-bgIn::before{
  animation: mvFadeZoomUp 3s ease-out forwards;
}
@keyframes mvFadeZoomUp{
  0%   { opacity: 0; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.12); } /* フェードしながら拡大 */
}

/* 左1/3の透過帯（タイピングと同時）※要件に合わせ25% */
.mainVisual.mv-anim::after{
  content:"";
  position:absolute; top:0; left:0;
  width:25%; height:100%;
  background: rgba(0,90,120,.25);
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 3s ease, opacity .3s ease;
  z-index: 0;
  pointer-events: none;
}
.mainVisual.mv-anim.is-typing::after{
  transform: translateX(0);
  opacity: 1;
}

/* アニメ軽減モード */
@media (prefers-reduced-motion: reduce){
  .mainVisual.mv-anim.is-bgIn::before{ animation: none; opacity: 1; transform: none; }
  .mainVisual.mv-anim::after{ transition: none; transform: none; opacity: 1; }
}

/* SP：左帯を非表示（?767px） */
@media screen and (max-width: 767px){
  .mainVisual.mv-anim::after{
    content: none !important;   /* 擬似要素自体を無効化 */
    width: 0 !important;        /* 念のため幅もゼロ */
    opacity: 0 !important;      /* 念のため透明 */
    transition: none !important;/* アニメ無効 */
  }
}


/* ----------
leadSec
  ---------- */
.leadSec{
	margin-bottom: clamp(60.0000px, calc(25.3906vw + -135.0000px), 125.0000px);
}
.leadSec .inner{
	width:100%;
	max-width:1200px;
	margin:0 auto;
}

/* ---- */
.leadSec .tit{
	text-align:center;
	font-weight:bold;
	font-size: clamp(18.0000px, calc(2.3438vw + 0.0000px), 24.0000px);
	margin-bottom: clamp(20.0000px, calc(9.7656vw + -55.0000px), 45.0000px);
}
.leadSec .txt{
	text-align:center;
	font-size: clamp(14.0000px, calc(0.7813vw + 8.0000px), 16.0000px);
	line-height:2em;
	margin-bottom:40px;
}

.leadSec .pic{
	text-align:center;
}
.leadSec .pic img{
	width:100%;
	max-width:600px;
	height:auto;
}

/* Wide Breakpoint */
@media screen and (max-width: 1700px) {
	.leadSec .inner{
		width: calc(100% - 30px);
	}
}

/* SP */
@media screen and (max-width: 767px) {
	.leadSec .tit{
		text-align:left;
	}
	.leadSec .txt{
		text-align:left;
	}
}


/* ----------
centerSec
  ---------- */
.centerSec{
	margin-bottom: clamp(80.0000px, calc(27.3438vw + -130.0000px), 150.0000px);
}
.centerSec .inner{
	width:100%;
	max-width:1380px;
	margin:0 auto 15px;
	border:solid 4px #00894F;
	padding: clamp(15.0000px, calc(6.1275vw + -7.0588px), 40.0000px);

}

/* ---- */
.centerSec .centerSect_tit{
	text-align:center;
	font-weight:bold;
	color:#00894F;
	font-size: clamp(22.0000px, calc(6.2500vw + -26.0000px), 38.0000px);
	margin-bottom:32px;
	
}
.centerSec .centerSec_map{
	text-align:center;
	margin-bottom:30px;
}
.centerSec .centerSec_map img{
	width:100%;
	max-width:830px;
	height:auto;
}

/* ---- */
.centerSec .centerLst{
	display: grid; 
	grid-template-columns: 1fr 1fr;

	gap:40px 0;

	grid-template-areas: 
	"a b"
	"c c";

	position: relative; /* 疑似要素の基準にする */
}

.centerSec .centerLst .centerLst_item{
}
.centerSec .centerLst .centerLst_item.lst-chuo01{
	grid-area: a;
	border-right:solid 1px #00894F;
	padding-right:20px;
	padding-top:15px;
	padding-bottom:15px;
}
.centerSec .centerLst .centerLst_item.lst-chuo02{
	grid-area: b;
	padding-left:40px;
	padding-top:15px;
	padding-bottom:15px;
}
.centerSec .centerLst .centerLst_item.lst-chuo03{
	grid-area: c;
	border-top:solid 1px #00894F;
	padding-top:40px;
}

.centerSec .centerLst .centerLst_item .centerLst_item_tit{
	margin-bottom:25px;
}
.centerSec .centerLst .centerLst_item .centerLst_item_tit .titLogo{
	text-align:center;
}
.centerSec .centerLst .centerLst_item .centerLst_item_tit .titLogo img{
	width:100%;
	max-width:285px;
	height:auto;
	vertical-align:bottom;	
}
.centerSec .centerLst .centerLst_item .centerLst_item_tit .titTel{
	text-align:center;
}
.centerSec .centerLst .centerLst_item .centerLst_item_tit .titTel a{
	text-decoration:none;
	color:#00894F;
	font-weight:bold;
}
.centerSec .centerLst .centerLst_item .lst{
	display:flex;
	gap:10px 3%;
	flex-wrap:wrap;
}
.centerSec .centerLst .centerLst_item .lst .item{
	/*width:calc( (100% - 3%) / 2);*/
	width:100%;

	color:#00894F;
	font-size:15px;
}
.centerSec .centerLst .centerLst_item .lst .item a{
	font-weight:bold;
	color:#00894F;
	text-decoration:none;
	display:inline-block;
	margin-left:10px;
}
/* ---- */
.centerSec .attentTxt{
	width:100%;
	max-width:1380px;
	margin:0 auto;
	text-align:right;
	color:#666666;
	font-size: clamp(13.0000px, calc(0.3906vw + 10.0000px), 14.0000px);
}

/* Wide Breakpoint */
@media screen and (max-width: 1700px) {
	.centerSec .inner,
	.centerSec .attentTxt {
		width: calc(100% - 30px);
	}
}

/* SP */
@media screen and (max-width: 767px) {
	.centerSec .centerLst{
		grid-template-columns: 1fr;
		gap:0px 0;
		grid-template-areas: 
		"a"
		"b"
		"c";
	}

	.centerSec .centerLst .centerLst_item .lst{
		width:calc( 100% - 20px);
		margin:0 auto;
	}
	.centerSec .centerLst .centerLst_item .lst .item{
		width:100%;
	}

	.centerSec .centerLst .centerLst_item.lst-chuo01{
		border:none;
		border-bottom:solid 1px #00894F;
		padding:30px 0;
	}
	.centerSec .centerLst .centerLst_item.lst-chuo02{
		border:none;
		border-bottom:solid 1px #00894F;
		padding:30px 0;
	}
	.centerSec .centerLst .centerLst_item.lst-chuo03{
		border-top:none;
		padding:30px 0;
	}

	.centerSec .centerLst .centerLst_item .lst .item {
		list-style:disc;
		margin-left:1em;
	}
	.centerSec .centerLst .centerLst_item .lst .item a{
		display:block;
		margin-left:0px;
	}

	.centerSec .attentTxt{
		text-align:left;
	}
}



/* ----------
nowSect
  ---------- */
.nowSect{
	margin-bottom: clamp(40.0000px, calc(29.2969vw + -185.0000px), 115.0000px);
}
.nowSect .inner{
	width:100%;
	max-width:1200px;
	margin:0 auto;
}

/* ---- */
.nowSect .tit{
	color:#00894F;
	font-weight:bold;
	font-size: clamp(22.0000px, calc(6.2500vw + -26.0000px), 38.0000px);
	text-align:center;
	margin-bottom: clamp(22.0000px, calc(7.0313vw + -32.0000px), 40.0000px);

	display:flex;
	flex-wrap:wrap;
	gap:20px;
	align-items:center;
	justify-content:center;
}
.nowSect .tit span{
	display:inline-block;
}
.nowSect .tit:before{
	content:"";
	display:block;
	width:10%;
	height:3px;
	background:#00894F;
	margin-top:3px;
}
.nowSect .tit:after{
	content:"";
	display:block;
	width:10%;
	height:3px;
	background:#00894F;
	margin-top:3px;
}


.nowSect .txt{
	line-height:2em;
}
.nowSect .txt + .txt{
	padding-top:3em;
}

/* Wide Breakpoint */
@media screen and (max-width: 1700px) {
	.nowSect .inner{
		width: calc(100% - 30px);
	}
}

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


/* ----------
gallerySec
  ---------- */
.gallerySec{
	margin-bottom: clamp(40.0000px, calc(17.5781vw + -95.0000px), 85.0000px);
}
.gallerySec .inner{
}

/* ---- */
.gallerySec .lst{
	display:flex;
	flex-wrap:wrap;
	gap:0;
}
.gallerySec .lst .item{
	width:33.33%;
}
.gallerySec .lst .item img{
	width:100%;
	height:auto;
}

/* Wide Breakpoint */
@media screen and (max-width: 1200px) {
}

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

/* ----------
schoolInfoSec
  ---------- */
.schoolInfoSec{
	margin-bottom: clamp(40.0000px, calc(15.6250vw + -80.0000px), 80.0000px);
}
.schoolInfoSec .inner{
	width:100%;
	max-width:1200px;
	margin:0 auto;

	display:flex;
	flex-wrap:wrap;
	gap:15px 6.6%;
}

/* ---- */
.schoolInfoSec .infoBox{
	width:calc( ( 100% - 6.6%) / 2);
}
.schoolInfoSec .infoBox .tit{
	font-size: clamp(22.0000px, calc(3.1250vw + -2.0000px), 30.0000px);
	text-align:center;
	font-weight:bold;
	position:relative;
}
.schoolInfoSec .infoBox .tit:after{
	content:"";
	display:block;
	width:90px;
	height:3px;
	background:#00894F;
	margin:10px auto clamp(25.0000px, calc(17.5781vw + -110.0000px), 70.0000px);;
}
.schoolInfoSec .infoBox .infoTbl{
	width:100%;
	font-size: clamp(14.0000px, calc(0.4902vw + 12.2353px), 16.0000px);
}
.schoolInfoSec .infoBox .infoTbl tr{
	border-bottom:solid 1px #CCCCCC;
}
.schoolInfoSec .infoBox .infoTbl th{
	color:#00894F;
	font-weight:bold;
	padding:1em 15px 1em 10px;
	width:120px;
}
.schoolInfoSec .infoBox .infoTbl td{
	padding:1em;
	width:calc( 100% - 120px);
}
.schoolInfoSec .infoBox .infoTbl td  a{
}

/* Wide Breakpoint */
@media screen and (max-width: 1700px) {
	.schoolInfoSec .inner{
		width: calc(100% - 30px);
	}
}

/* SP */
@media screen and (max-width: 767px) {
	.schoolInfoSec .inner{
		gap:40px 0;
	}

	/* ---- */
	.schoolInfoSec .infoBox{
		width:100%;
	}
}