@charset "utf-8";
/* CSS Document */
html {scroll-behavior: smooth;}
main,p{
	font-size: 18px;
	line-height: 2em;
	/* google font */
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width: 991px){
	main,p{
		font-size: 16px;
		line-height: 1.7em;
	}
}
p{
	margin-bottom: 1.2em;
}
/*-----------------------
loading
----------------------  */
/*#loading {
	width:100%;
	height:100%;
	background:#192144;
	opacity:1.0;
	position:fixed;
	top:0;
	left:0;
	z-index:999999;
	text-align:center;
}
#loading img {
	width: 50px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-25px 0 0 -25px;
}*/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #192144;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}
#loading img {
	width: 50px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-25px 0 0 -25px;
}
@media screen and (max-width: 767px){
	#loading img {
		width: 40px;
	}
}
.loading.hide {
  opacity: 0;
  pointer-events: none;
}

/* ==== header ==== */
#header{
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background: rgba(255,255,255,0.9);
	backdrop-filter: blur(8px);
	padding: 1em;
	z-index: 99;
}
.top #header{
	opacity: 0;
	transition: .8s;
}
.top #header.on{
	opacity: 1;
	transition: .5s;
}
.siteId a{
	display: flex;
	align-items: center;
}
.siteId img{
	max-height: 60px;
}
@media screen and (max-width: 767px){
	.siteId img{
		max-height: 40px;
	}
}
.siteId .logo-text{
	margin-left: 1em;
	font-size: 10px;
	line-height: 1.8em;
}
@media screen and (max-width: 767px){
	.siteId .logo-text{
		line-height: 1.5em;
	}
}
#header ul{
	display: flex;
}
@media screen and (max-width: 900px){
	#header ul{
		display: none;
	}
}
#header ul li{
	margin: 0 2em 0 0 ;
}
#header ul li a{
	transition: .3s;
}
#header ul li a:hover{
	color: #004ea2
}
#header-menu {
	position: fixed;
	top: 0;
	right: 0;
	display: none;
	width: 50px;
	height: 50px;
	font-size: 11px;
	z-index: 10000000;
}
@media screen and (max-width: 767px) {
	#header-menu {
		display: block;
	}
}

#wrap:before,
#wrap:after{
	content:none
}


section{
	min-width: 980px;
	padding:140px 20px;
}
@media screen and (max-width: 991px){
	section{
		min-width: inherit;
	}
}
@media screen and (max-width: 767px){
	section{
		padding:18.2291666666vw 20px;
	}
}
section#history {
	padding: 0;
}
.inner{
	max-width: 1024px;
	margin: 0 auto;
}
h2 {
	margin-bottom: 1.5em;
	font-size: 56px;
	color: #004ea2;
	text-align: center;
	/* google font */
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: 500;
	line-height: 1.2em;
  font-style: normal;
}
@media screen and (max-width: 767px){
	h2 {
		margin-bottom: 1em;
		font-size: 9.375vw;
		line-height: 1.2em;
	}
}
h2 .jp {
	display: block;
	margin-top: 0.4em;
	font-size: 0.32142857142em;
	/* google font */
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	line-height: 1em;
}
h2 span {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(20px);
  display: block;
}

h2 span.animate {
  animation: catch_anime 1.4s forwards;
}

h2 span.animate:nth-child(2) {
  animation-delay: 0.8s;
}

h2 span.animate:nth-child(3) {
  animation-delay: 1.4s;
}
#history h2 {
	color: #fff;
}
.topics-wrap h2{
	text-align: left;
	margin-bottom: 0.4em;
}
@media screen and (max-width: 767px){
	.topics-wrap h2{
		text-align: center;
		margin-bottom: 1em;
	}
	#logo70th h2{
		margin-bottom: 1.8em;
	}
}


@keyframes catch_anime {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.ico-caret-right.color-blue:before,
.ico-caret-right.color-blue:after{
    background: #004592;
}


/* ===== .top__mainvisual ===== */
.top__mainvisual{
	position: relative;
	width: 100%;
	box-shadow: 0px 3px 10px -6px rgba(0,0,0,0.2);
}
.top__mainvisual video{
	width: 100%;
	display: block;
	line-height: 0;
}
.scroll_down{
  position:absolute;
  bottom: 0px;
  right: 5%;
	display: none;
}
@media screen and (max-width: 767px){
	.scroll_down{
		right: 50%;
	}
}
.scroll_down a{
  position: absolute;
  left: -5px;
  bottom: 70px;
  color: #000;
  font-size: 14px;
  letter-spacing: .2em;
  text-decoration: none;
	word-break: normal;
	overflow-wrap: normal;
	transform: rotate(90deg); /* 右に90度回転 */
  transform-origin: center;
}
@media screen and (max-width: 767px){
	.scroll_down a{
		left: 0;
		bottom: 8vw;
		font-size: 11px;
		letter-spacing: .1em;
	}
}

.scroll_down:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background:#000;
  animation:
  circlemove 1.6s ease-in-out infinite,
  cirlemovehide 1.6s ease-out infinite;
}

@media screen and (max-width: 767px){
	.scroll_down:before {
		animation:
		circlemove-sp 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
	}
}

@keyframes circlemove{
  0%{bottom:120px;}
  100%{bottom:0px;}
}

@keyframes circlemove-sp{
  0%{bottom:15.625vw;}
  100%{bottom:0px;}
}

@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}
.scroll_down:after{
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width:2px;
	height: 120px;
  background:#000;
}
@media screen and (max-width: 767px){
	.scroll_down:after{
		height: 15.625vw;
		width:1px;
	}
}
/* ===== .top__mainvisual.test ===== */
.top__mainvisual.movie{
	height: 100vh
}
@media screen and (max-width: 767px){
	.top__mainvisual.movie{
		height: 90vh
	}
}
.bg-video {
  top: 0;
  left: 0;
  width: 100vw;          /* 画面幅いっぱい */
  height: 100vh;         /* 画面高さいっぱい */
  object-fit: cover;     /* 背景画像のように拡大・トリミング */
  object-position: center center; /* 中央基準で表示 */
  z-index: -1;           /* 背景に配置 */
}
@media screen and (max-width: 767px){
	.bg-video {
		height: 90vh;
	}
}

@media screen and (orientation: landscape) {
  /* 横向きのときに適用されるスタイル */
	.scroll_down{
		bottom: 0px;
		right: 5%;
	}
	.scroll_down a{
		left: 0;
		bottom: 8vw;
		font-size: 11px;
		letter-spacing: .1em;
	}
	.scroll_down:before {
	animation:
	circlemove-sp 1.6s ease-in-out infinite,
	cirlemovehide 1.6s ease-out infinite;
	}
	.scroll_down:after{
	height: 15.625vw;
	width:1px;
	}
	#video-pc {
    display: block;
  }

  #video-sp {
    display: none;
  }
}

@media screen and (orientation: portrait) {
  /* 縦向きのときに適用されるスタイル */
  #video-pc {
    display: none;
  }

  #video-sp {
    display: block;
  }
}


/* ===== #topmessage ===== */
#topmessage p{
	line-height: 1.8em;
}
#topmessage .msg-wrap{
	display: flex;
	justify-content: center;
  align-items: flex-end
}
@media screen and (max-width: 991px){
	#topmessage .msg-wrap{
		flex-wrap: wrap;
	}
}
#topmessage .msg-wrap .msg-photo{
	max-width: 350px;
	width: 30%;
}
@media screen and (max-width: 991px){
	#topmessage .msg-wrap .msg-photo{
		min-width: 300px;
		width: 50%;
		margin-bottom: 3em;
	}
}
#topmessage .msg-wrap .msg-photo img{
	width: 100%;
}
@media screen and (max-width: 991px){
	#topmessage .msg-wrap .msg-photo{
		text-align: center;
	}
	#topmessage .msg-wrap .msg-photo img{
		width: 80%;
		margin: 0 auto;
	}
}
.msg-text{
	padding-left:min(3em,60px);
}
@media screen and (max-width: 991px){
	.msg-text{
		padding-left:0
	}
}
p.presidentname{
	margin-top: 1.4em;
	margin-bottom: 0;
	font-size: 21px;
	line-height: 1.6em;
	letter-spacing: 0.1em
}
p.presidentname img{
	display: block;
	margin-top: 10px;
	max-width: 185px
}
/*p.presidentname span{
	display: block;
	margin-top: 0.2em;
	font-size: 32px;
	letter-spacing: 0.1em;
}*/
@media screen and (max-width: 991px){
	p.presidentname{
		font-size: 18px;
	}
	p.presidentname img{
		width: 8.5em;
		margin-right: 0;
		margin-left: auto;
	}
	/*p.presidentname span{
		font-size: 24px;
	}*/
}
@media screen and (max-width: 991px){
	p.presidentname{
		text-align: right;
	}
}

/* ===== #topics ===== */
#topics{
	background:rgba(0,69,146,0.05);
}
.topics-wrap{
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 767px){
	.topics-wrap{
		flex-wrap: wrap;
	}
}
.topics-wrap .ttl{
	width: 25%;
	min-width: 230px;
	margin-top: 10px;
}
.topics-wrap .list{
	width: 100%;
	padding-left: 5%;
}
@media screen and (max-width: 767px){
	.topics-wrap .ttl{
		width: 100%;
	}
	.topics-wrap .list{
		padding-left: 0;
	}
}
.topics-wrap .list ul{
	border-top: 1px solid #ccc;
}
.topics-wrap .list li{
	border-bottom: 1px solid #ccc;
}
.topics-wrap .list li a,
.topics-wrap .list li div{
	position: relative;
	display: flex;
	padding: 1.8em 3em 1.8em 0;
}
@media screen and (max-width: 767px){
	.topics-wrap .list li a,
	.topics-wrap .list li div{
		padding: 1.4em 1.8em 1.4em 0;
	}
}
.topics-wrap .list li a span.topics-date,
.topics-wrap .list li div span.topics-date{
	width: 6.4em;
}

.topics-wrap .list li a span.topics-ttl,
.topics-wrap .list li div span.topics-ttl{
	width: calc(100% - 6.4em);
}
@media screen and (max-width: 767px){
	.topics-wrap .list li a,
	.topics-wrap .list li div{
		flex-wrap: wrap;
	}
	.topics-wrap .list li a span.topics-date,
	.topics-wrap .list li a span.topics-ttl,
	.topics-wrap .list li div span.topics-date,
	.topics-wrap .list li div span.topics-ttl{
		width: 100%;
		display: block;
		margin-right: 0;
	}
}
.topics-wrap .list li a i{
	position: absolute;
	top: calc(50% - 2.5px);
	right: 1em;
	transition: .5s
}
.topics-wrap .list li a:hover i{
	transform: translateX(0.3em);
}
@media screen and (max-width: 767px){
	.topics-wrap .list li a i{
		right: 0;
	}
	.topics-wrap .list li a:hover i{
		transform: none;
	}
}
#topics a.btn{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em;
	background: #004592;
	color: #fff;
}
#topics a.btn.sp{
	margin-top:2.4em
}
#topics a.btn i{
	transition: .5s;
}
#topics a.btn:hover i{
	transform: translateX(0.3em);
}


/* ===== #logo70th ===== */
#logo70th{
	text-align:center;
}
#logo70th img.logo{
	display: block;
	margin:0 auto 80px;
}
@media screen and (max-width: 767px){
		#logo70th img.logo{
			width: 60%;
			max-width: 320px;
			margin:0 auto 3em;
		}
		#logo70th p{
			text-align: left;
		}
}
.fade-img {
  opacity: 0;
  transition: opacity 2s ease;
	transition-delay: 0s; /* 初期は遅延なし */
}
.fade-img.visible {
  opacity: 1;
	ransition-delay: 1s; /* 表示時に0.5秒遅れてフェードイン */
}
/* ===== #history ===== */
.slider-wrap {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
}
@media screen and (max-width: 767px){
	.slider-wrap {
		height: 90vh;
	}
}
.slider {
  position: absolute;
  display: flex;
	gap: 1em;
  width: 300%; /* 画像3枚分などに応じて調整 */
  height: 100%; 
  overflow: hidden;
}
.slider img {
  height: 100%;         /* 親の高さに合わせる */
  width: auto;          /* 横幅は自動で調整 */
  object-fit: contain;  /* 画像全体を表示（切れない） */
}
/* 上段スライド（右→左） */
.slider.top {
  top: 0;
  animation: slide-left 100s linear infinite;
	width: calc(200%); /* 画像2セット分の幅 */
  height: calc( 50% - 0.5em); /* 上下それぞれ半分の高さ */
	margin-bottom: 1em;
}
/* 下段スライド（左→右）で互い違いに */
.slider.bottom {
  bottom: 0;
  animation: slide-left 100s linear infinite;
	width: calc(200%); /* 画像2セット分の幅 */
  height: calc( 50% - 0.5em);  /* 上下それぞれ半分の高さ */
}
@media screen and (max-width: 767px){
	.slider.top,
	.slider.bottom {
		animation: slide-left 30s linear infinite;
	}
}

.slider.bottom img{
  transform: translateX(50%); /* 画像だけを右にずらす */
}
@keyframes slide-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 画像1セット分だけ左に動かす */
}

.history-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(46,71,98,0.8);
  z-index: 1;
}
.history-content {
  position: absolute;
	width: 90%;
  z-index: 2;
  color: #fff;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#history a.cm-button{
	margin-top: 50px;
}
@media screen and (max-width: 767px){
	#history a.cm-button{
		font-size: 0.9em
	}
}