@charset "UTF-8";

html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,figure{margin:0;padding:0;line-height:1;}
a{text-decoration:none;}
img,svg{vertical-align:bottom;}
ul,ol{list-style:none;}
body{font-family:'segoe UI','YuGothic','游ゴシック体','Yu Gothic','游ゴシック','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,sans-serif;}

.contents{

}

body{
	background-color:#fffdf7;
}

.contents > h2{
	display:flex;
	flex-direction:column-reverse;
	text-align:center;
	gap:0.4em;
	font-size:100%;
}
.contents > h2 span:first-child{
	font-size:2.6em;
}
.contents > h2 span:last-child{
	font-size:100%;
	color:#ec8832;
}
.contents > h3{
	margin:0;
	padding:1.5em 0;
	font-size:100%;
	text-align:center;
	line-height:2;
}



/* header */
header{
	width:100%;
	color:#fff;
	aspect-ratio:1500/630;
	background:url('../img/main_photo.jpg') no-repeat center bottom / cover;
	position:relative;
}
header #logo{
	width:100%;
}
header #logo a{
	display:flex;
	width:12.5%;
	max-width:112px;
	margin:0 auto 10px;
	padding:16px 20px;
	align-items:center;
	justify-content:center;
	background-color:#fff;
	border-radius:0 0 20px 20px;
}
header #logo img{
	width:100%;
}
header #mainTitleBox{
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
header #mainTitle{
	font-size:260%;
	font-family:"Noto Sans JP", serif;
	font-optical-sizing:auto;
	font-weight:900;
	font-style:normal;
	display:inline-flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:baseline;
	opacity:0;
	animation:1s fromLeft 0.5s ease-out forwards;
}
header #mainTitle p{
	display:inline-block;
}
header #mainTitle p strong{
	font-size:190%;
	vertical-align:sub;
}
header #mainTitleEn{
	font-weight:bold;
	font-family:"Noto Sans JP", serif;
	opacity:0;
	animation:1s fromRight 0.5s ease-out forwards;
}
@keyframes fromLeft{
	from{transform:translateX(-10%);}
	to{transform:translateX(0);opacity:1}
}
@keyframes fromRight{
	from{transform:translateX(10%);}
	to{transform:translateX(0);opacity:1}
}
header:after{
	content:'';
	display:block;
	position:absolute;
	z-index:3000;
	width:100%;
	bottom:0;
	aspect-ratio:1500/200;
	background:url('../img/mainvisual_cover.png') no-repeat center / cover;
}

/* news */
#news{
	background-color:#fffdf7;
	padding:50px 0;
}

#news ul{
	width:750px;
	margin:50px auto;
}
#news ul li{
	display:grid;
	grid-template-columns:1fr 550px;
	gap:8px;
	margin-bottom:1.5em;
	align-items:baseline;
}
#news ul li h3{
	font-weight:bold;
	font-size:100%;
}
#news ul li h3 time{
	display:inline-block;
	padding-right:8px;
}
#news ul li h3 span{
	display:inline-flex;
	align-items:center;
	background-color:#e86d03;
	color:#fff;
	padding:0.4em 1em;
	font-weight:bold;
	border-radius:1em;
}
#news ul li p{
	font-size:100%;
	line-height:1.8;
}
#news ul li p a{
	color:#000;
}
#news ul li p a:hover{
	text-decoration:underline;
}



/* anniversaryContents */
#anniversaryContents{
	background-color:#fdeb9c;
	position:relative;
	padding:150px 0;
	overflow:hidden;
}
#anniversaryContents:before{
	content:'';
	display:block;
	position:absolute;
	top:0;
	width:100%;
	height:150px;
	background:#fffdf7 url('../img/contents_bg_01.png') no-repeat center top;
}
#anniversaryContents:after{
	content:'';
	display:block;
	position:absolute;
	bottom:0;
	width:100%;
	height:150px;
	background:#eaf4ff url('../img/contents_bg_01.png') no-repeat center bottom;
}

#anniversaryContents ul{
	width:1140px;
	margin:0 auto;
	padding:80px 0;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:64px 20px;
}
#anniversaryContents ul li{
}
#anniversaryContents ul li a{
	display:block;
	aspect-ratio:560/265;
	color:#fff;
	position:relative;
	border-radius:10px;
	overflow:hidden;
}
#anniversaryContents ul li a figure{
	position:absolute;
	top:0;
	left:0;
	transition:0.3s;
	border-radius:10px;
}
#anniversaryContents ul li a figure:after{
	display:block;
	position:absolute;
	content:'';
	top:0;
	bottom:0;
	right:0;
	left:0;
	border-radius:10px;
	transition:0.3s;
	background-color:rgba(0,0,0,0);
}
#anniversaryContents ul li a figure img{
	width:100%;
}
#anniversaryContents ul li a:hover figure{
	transform:scale(1.05);
}
#anniversaryContents ul li a:hover figure:after{
	background-color:rgba(0,0,0,0.2);
}
#anniversaryContents ul li a h3{
	position:absolute;
	bottom:17%;
	left:4%;
	font-size:180%;
}
#anniversaryContents ul li a p{
	position:absolute;
	bottom:7%;
	left:4%;
	font-size:130%;
	font-weight:bold;
}
#anniversaryContents ul li a:after{
	content:'more';
	font-style:italic;
	text-decoration:underline;
	position:absolute;
	bottom:7%;
	right:4%;
}



/* anniversaryConcert */
#anniversaryConcert{
	background-color:#eaf4ff;
	padding:50px 0 150px;
	position:relative;
}
#anniversaryConcert:after{
	content:'';
	display:block;
	position:absolute;
	bottom:0;
	width:100%;
	height:150px;
	background:#fffdf7 url('../img/contents_bg_02.png') no-repeat center bottom;
}

#anniversaryConcert > .contents > div {
	width:1025px;
	margin:0 auto;
}
#anniversaryConcert article{
	padding:50px 0;
	display:grid;
	grid-template-columns:1fr 352px;
	border-bottom:1px solid #707070;
}
#anniversaryConcert article h3{
	font-size:100%;
	line-height:1.6;
}
#anniversaryConcert article h3 a{
	color:#0029d5;
	display:inline;
}
#anniversaryConcert article h3 a:hover{
	text-decoration:underline;
}
#anniversaryConcert article p{
	line-height:1.6;
	font-size:90%;
}
#anniversaryConcert article dl{
	display:grid;
	grid-template-columns:3em 1fr;
	gap:10px;
	margin:1em 0 2em;
}
#anniversaryConcert article dt,
#anniversaryConcert article dd{
	line-height:1.6;
	font-size:90%;
}

#anniversaryConcert img{
	width:100%;
}
#anniversaryConcert aside p{
	padding:25px 0;
	line-height:1.6;
	font-size:90%;
}

/* floarBubble */
#floatBall{
	margin:0;
	padding:0;
	overflow:hidden;
	position:absolute;
	width:100%;
	top:0;
	bottom:0;
	z-index:1;
}
#floatBall > div{
	transform-origin:center;
	width:100px;
	height:100px;
	border-radius:50%;
	position:absolute;
	z-index:2;
}

/* pageTopBtn */
#pageTopBtn{
	position:fixed;
	bottom:3em;
	right:3em;
	background-color:#004492;
	padding:20px;
	clip-path:circle(50%);
	cursor:pointer;
	transition:0.3s;
}
#pageTopBtn span{
	display:block;
	width:24px;
	height:24px;
	position:relative;
	transform:translateY(6px) rotate(45deg);
}
#pageTopBtn span:before,
#pageTopBtn span:after{
	position:absolute;
	content:'';
	display:block;
	border-radius:4px;
	background-color:#fff;
}
#pageTopBtn span:before{
	width:100%;
	height:3px;
}
#pageTopBtn span:after{
	width:3px;
	height:100%;
}
#pageTopBtn.hide{
	opacity:0;
	cursor:none;
	pointer-events:none;
}

/* footer */
footer{
	margin-top:100px;
	padding:50px 0;
	font-size:80%;
	background:url('../img/tmso_logo.png') no-repeat top center/90px;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:0.5em;
}