/*

オレンジ
#e13018

グリーン
#246f57 文字線
#d9e0e2 背景

*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200..900&family=Noto+Serif+JP:wght@200..900&family=Inter:wght@100..900&family=Oswald:wght@200..700&display=swap');

html,body{
	font-family:YakuHanJP,'Noto Sans JP','Noto Serif JP',sans-serif;
	font-weight:400;
	font-size:1.0em;
	line-height:1.8em;
	box-sizing: border-box;
	font-feature-settings:"palt";
	margin:0;
	padding:0;
	position:relative;
/*	height: 6000px;*/
	background-color: transparent;}

html {
	scroll-behavior: smooth; /* スムーズスクロール */}

*	{margin:0;padding:0;list-style:none;box-sizing:border-box;text-align:justify;}

h1,h2,h3,h4
	{font-size: 1em;margin:0;padding:0;}

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

.t_mms	{font-size: 0.5em;line-height:1.2em !important;}
.t_ms	{font-size: 0.8em;}
.t_em	{font-size: 1.0em;}
.t_s	{font-size: 1.1em;}
.t_m	{font-size: 1.2em;}
.t_l	{font-size: 1.5em;}
.t_ll	{font-size: 1.625em;}
.t_xl	{font-size: 1.875em;}
.t_xxl	{font-size: 3.0em;line-height:1.0em !important;}

.txt_l	{font-weight: 200;}
.txt_r	{font-weight: 400;}
.txt_b	{font-weight: 600;}
.txt_eb	{font-weight: 800;}

.indent	{text-indent:-1em;padding-left:1em;}
.indent2{text-indent:-2em;padding-left:2em;}
.indent3{text-indent:-3em;padding-left:3em;}

.t_left		{text-align:left;}
.t_right	{text-align:right;}
.t_center	{text-align:center;}

.t_gold		{color:#8f713c;}
.t_silver	{color:#9fa0a0;}
.t_red		{color:#e61911;}
.t_dred		{color:#c42a15;}
.t_blue		{color:#1d2088;}
.t_color	{color:#231815;}
.t_skyblue	{color:#00afec;}
.t_white	{color:#fff;}

ruby rt		{font-family:'Noto Sans JP',sans-serif;font-size:0.4em;}

/*
.bg_red		{background-color:#e23014;}
.bg_blue	{background-color:#0060b0;}
.bg_gold	{background-color:#c5b254;}
*/

a	{text-decoration:none;color:#cf2c16;-webkit-text-decoration-skip: none;}
a:hover,
a:focus	{text-decoration:underline;opacity:0.5;transition:0.5s;}

a.other	{
	background-image:url(../img/icon_otherlink.png);
	background-position:right 10px top 50%;
	background-repeat:no-repeat;}

a.other_w{
	background-image:url(../img/icon_otherlink_w.png);
	background-position:right 10px top 50%;
	background-repeat:no-repeat;}

a.other_txt	{
	padding-right:18px;
	background-image:url(../img/icon_otherlink.png);
	background-position:right 0 top 50%;
	background-repeat:no-repeat;}

img	{vertical-align:bottom;}
img.w	{width: 100%;}

@media screen and (max-width:640px){
a	{-webkit-text-decoration-skip: none;}
}

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

.skip{
	position: absolute;
	margin-left:-9999px;}

.pc	{display:inline;}
.sp	{display:none;}

@media screen and (max-width:640px){
.pc	{display:none;}
.sp	{display:inline;}
}

/* scroll fade */
/* 基本のフェードイン */
.fade-in,
.fade-in3{
	opacity: 0;
	transition: opacity 0.5s;}

.fade-in.active,
.fade-in3.active{
	opacity: 1;}

/* 左からフェードイン */
.fade-in-left{
	opacity: 0;
	transform: translateX(-100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-left3{
	opacity: 0;
	transform: translateX(-500px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-left.active,
.fade-in-left3.active{
	opacity: 1;
	transform: translateX(0);}

/* 右からフェードイン */
.fade-in-right{
	opacity: 0;
	transform: translateX(100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-right3{
	opacity: 0;
	transform: translateX(500px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-right.active,
.fade-in-right3.active{
	opacity: 1;
	transform: translateX(0);}

/* 上からフェードイン */
.fade-in-up{
	opacity: 0;
	transform: translateY(-100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-up3{
	opacity: 0;
	transform: translateY(-500px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-up.active,
.fade-in-up3.active{
	opacity: 1;
	transform: translateY(0);}

/* 下からフェードイン */
.fade-in-down{
	opacity: 0;
	transform: translateY(100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-down3{
	opacity: 0;
	transform: translateY(500px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-down.active,
.fade-in-down3.active{
	opacity: 1;
	transform: translateY(0);}

@media screen and (max-width:500px){
/* scroll fade */

/* 左からフェードイン */
.fade-in-left,
.fade-in-left3{
 	transition: opacity 1.0s, transform 0.5s;}

/* 右からフェードイン */
.fade-in-right,
.fade-in-right3{
 	transition: opacity 1.0s, transform 0.5s;}

/* 上からフェードイン */
.fade-in-up,
.fade-in-up3{
 	transition: opacity 1.0s, transform 0.5s;}

/* 下からフェードイン */
.fade-in-down,
.fade-in-down3{
 	transition: opacity 1.0s, transform 0.5s;}
}



/* 並びのフェードイン */
.fade-in-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-item.active {
  opacity: 1;
  transform: translateY(0);
}



.float-button__wrap {
	display: none;/*最初は隠す*/
	width: 75px;
	height: 75px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10;}

.float-button__wrap a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-decoration: none;}

@media screen and (max-width:640px){
.float-button__wrap {
	bottom: 20px !important;}
}


/*
 * パララックスを適用する汎用クラス
 */
.parallax-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	background-image: url('../img/back.jpg?v=2');
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: auto;
	will-change: transform;}

@media screen and (max-width:640px){
.parallax-background {
	background-image: url('../img/back_sp.jpg?v=2');}
}

@media screen and (max-width:450px){
.parallax-background {
	background-image: url('../img/back_sp_s.jpg?v=2');}
}

/*
 * 以下は動きを分かりやすくするためのダミーコンテンツのスタイル
 */
.content-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* コンテンツを上下に分散配置 */
	height: 100%; /* bodyの高さ(6000px)いっぱいに広げる */
	width: 100%;
	box-sizing: border-box; /* paddingを含めて高さを計算 */
}

.content-box {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 140px 60px;
	text-align: center;
	box-sizing:border-box;
	background-size:100%;
	background-repeat:no-repeat repeat;}

footer {
	font-family:YakuHanMP,'Noto Serif JP';
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 0 60px 140px;
	font-size:0.9em;
	font-weight:200;
	color:#fff;
	text-align: center;
	box-sizing:border-box;
	background-size:100%;
	background-repeat:no-repeat repeat;
	background-image:url(../img/back_black.png);}

.content-box.wh {
	background-image:url(../img/back_white.png);
/*	background-color: rgba(255, 255, 255, 0.6);*/}

.content-box.bk {
	background-image:url(../img/back_black.png);
/*	background-color: rgba(0, 0, 0, 0.6);*/}

.content-box h2 {
	font-family:YakuHanMP,'Noto Serif JP';
	font-size: 2.5em;
	line-height:1.8em;
	margin:0 auto 2.0em;
	writing-mode:vertical-rl;
	letter-spacing:0.25em;
	text-align:center;
	white-space:nowrap;}

#tradition.content-box h2{
	width:100%;
	display:flex;
	justify-content:center;}

#tradition.content-box h2 img{
	width:100%;
	max-width:382px;
	height:100%;
	max-height:342px;
	margin:0 auto;}

.content-box h3 {
	font-family:YakuHanMP,'Noto Serif JP';
	font-size: 1.8em;
	line-height:1.8em;
	margin:0 auto 1em;
	text-align:center;}

.content-box.wh h2,
.content-box.wh h3 {
	color:#000;
	font-weight:400;}

.content-box.bk h2{
	color:#fff;
	font-weight:200;}

.content-box.bk h3 {
	color:#fff;
	font-weight:200;}

.content-box.bk h3.events {
	line-height:1.3em;
	padding-bottom:0.5em;}

.content-box.wh p {
	font-family:YakuHanMP,'Noto Serif JP';
	font-weight:400;}

.content-box.bk p {
	font-family:YakuHanMP,'Noto Serif JP';
	font-weight:200;}

#tradition.content-box p,
#about.content-box p{
	line-height:2.5em;}


.content-box section{
	display:flex;
	flex-direction:column;
	gap:20px;}

.content-box section h3 {
	width:100%;
	font-size: 1.4em;
	line-height:1em;
	text-align:left;
	margin-bottom:0;}

.content-box section p{
	color:#fff;
	font-size:0.9em;
	line-height:2.3em;
	font-weight:200;}

#column.content-box section p{
	color:#000;
	font-weight:400;}

.content-box section img{
	width:100%;}

.content-box section a{
	font-family:YakuHanMP,'Noto Serif JP';
	display:block;
	line-height:1em;
	padding:15px;
	color:#534741;
	background:#fff;}

.content-box section a {
	position: relative;
	padding-right: 40px;}

.content-box section a::after {
	content: '→';
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	transition: transform 0.2s ease-out;}

.content-box section a:hover::after {
	transform: translateY(-50%) translateX(5px);}

@media screen and (max-width:640px){
.content-box {
	padding: 140px 40px;}

.content-box section{
	display:flex;
	flex-direction:column;
	gap:30px;}

.content-box section div.text{
	width:100%;
	line-height:2.0em;}

.content-box section div.photo{
	width:100%;
	display:flex;
	flex-direction:column;
	gap:30px;}

}




header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 130px;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), transparent);
	z-index: 10;
	display: flex;
	align-items: center;}

.parallax-background_btm {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 130px;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
	z-index: 0;
}

/* ヘッダー内のコンテンツのスタイル（サンプル） */
header .header-content {
	width: 100%;
	padding: 0 40px;
	box-sizing: border-box;
	display: flex;
	justify-content:space-between;
}

header h1 img{
	width:100%;
	max-width:150px;
	height:100%;
	max-height:60px;
	margin:0 auto;}

header .header-content ul{
	display:flex;
	gap:20px;}

@media screen and (max-width:1000px){
header .header-content ul{
	display:none;}
}

header .header-content ul li{
	}

header .header-content ul li a{
	font-family:YakuHanMP,'Noto Serif JP';
	line-height:1em;
	font-size:1em;
	color:#fff;
	text-decoration:none;}



.tab-container {
	width: 100%;
	overflow: hidden;}

/* タブのスタイル */
.tab-nav {
	display: flex;
	list-style: none;
	padding: 0;
	margin:0 0 10px;
	gap:10px;}

@media screen and (max-width:640px){
.tab-nav {
	flex-direction:column;}

}

.tab-nav li {
	flex: 1;
	text-align: center;}

.tab-nav a {
	display: block;
	padding: 18px 0;
	text-decoration: none;
	color: #000;
	font-family:YakuHanMP,'Noto Serif JP';
	font-weight: 400;
	font-size: 16px;
	line-height:1.2em;
	text-align:center;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	background-color: #fff; /* 非アクティブ時の背景色 */
	color: #333; /* 非アクティブ時のテキスト色 */}

.tab-nav a::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 20px 0; /* 右上への直角三角形を生成 */
	border-color: transparent;
	transition: border-color 0.3s ease;}

/* タブごとの色設定 */
#tab1-link::after { border-color: transparent #c02f20 transparent transparent; }
#tab2-link::after { border-color: transparent #8c5c61 transparent transparent; }
#tab3-link::after { border-color: transparent #307986 transparent transparent; }

/* アクティブなタブのスタイル */
#tab1-link.active {background-color:#c02f20;color:#fff;}
#tab2-link.active {background-color:#8c5c61;color:#fff;}
#tab3-link.active {background-color:#307986;color:#fff;}

/* アクティブなタブの三角形を白に設定 */
.tab-nav a.active::after {
	border-color: transparent #fff transparent transparent !important;}

.tab-nav a p{
	text-align:center;
	margin:5px 0;
	font-weight:600 !important;}

.tab-nav a .date {
	font-size:0.8em;}

.tab-nav a .school {
	font-size:0.8em;}

/* 表示領域のスタイル */
.tab-content {}

.tab-pane {
	display: none; /* 初期状態では非表示 */}

.tab-pane img{
	width:100%;}

.tab-pane .block{
	font-family:YakuHanMP,'Noto Serif JP';
	padding:20px 0 0;
	box-sizing:border-box;
	color:#fff;}

.tab-pane .block h3{
	text-align:left;
	margin-bottom:0;}

.tab-pane .block h3 span{
	font-size:1.0rem;}

#tab1.tab-pane .block dt{
	position:relative;
	background-color:#c02f20;color:#fff;padding:5px 10px;}

#tab1.tab-pane .block dt::before{
	width:100%;
	position:absolute;
	content:'';
	top:-3px;
	left:0;
	display:block;
	background-color:#c02f20;
	height:1px;}

#tab1.tab-pane .block dt::after{
	width:100%;
	position:absolute;
	content:'';
	bottom:-3px;
	left:0;
	display:block;
	background-color:#c02f20;
	height:1px;}

#tab2.tab-pane .block dt{
	position:relative;
	background-color:#8c5c61;color:#fff;padding:5px 10px;}

#tab2.tab-pane .block dt::before{
	width:100%;
	position:absolute;
	content:'';
	top:-3px;
	left:0;
	display:block;
	background-color:#8c5c61;
	height:1px;}

#tab2.tab-pane .block dt::after{
	width:100%;
	position:absolute;
	content:'';
	bottom:-3px;
	left:0;
	display:block;
	background-color:#8c5c61;
	height:1px;}

#tab3.tab-pane .block dt{
	position:relative;
	background-color:#307986;color:#fff;padding:5px 10px;}

#tab3.tab-pane .block dt::before{
	width:100%;
	position:absolute;
	content:'';
	top:-3px;
	left:0;
	display:block;
	background-color:#307986;
	height:1px;}

#tab3.tab-pane .block dt::after{
	width:100%;
	position:absolute;
	content:'';
	bottom:-3px;
	left:0;
	display:block;
	background-color:#307986;
	height:1px;}

.tab-pane .block dd{
	padding:15px 0;}

.tab-pane .block dd span{
	font-size:1.4em;}

.tab-pane a{
	font-family:YakuHanMP,'Noto Serif JP';
	display:block;
	line-height:1em;
	padding:15px;
	color:#534741;
	background:#fff;}

.tab-pane a {
	position: relative;
	padding-right: 40px;}

.tab-pane a::after {
	content: '→';
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	transition: transform 0.2s ease-out;}

.tab-pane a:hover::after {
	transform: translateY(-50%) translateX(5px);}


.sliderArea{
	}

.slick01 div{
	box-sizing:border-box;
	}

.slick01 img{
	width:100%;}

.slick01 p{
	font-size:0.9em;
	line-height:1.5em;
	font-weight:600;
	padding:10px 0;
	color:#fff;
/*	background:rgba(0,0,0,0.8);*/}

.slick01 p span{
	text-shadow:0px 0px 3px #000;}


.content-box {
  position: relative; /* 子要素の基準点として親要素に設定 */
}

.content-wrapper {
  overflow: hidden; /* 子要素のはみ出し部分を隠すために、これを設定することが重要です */
}

.content-box {
  position: relative; /* 子要素のabsolute配置の基準点となります */
}

.slick01-container {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	box-sizing: border-box;
	padding-bottom:100px;
	border-bottom:1px solid #fff;}

.slick-next{
	right:25px !important;
	z-index:5;}

.slick-prev{
	left:25px !important;
	z-index:5;}

.slick-slide {
  margin: 0 10px; /* 左右に10pxのマージンを設定して間隔を空ける */}