@charset "UTF-8";

/*--------------------------------------------------------------------
index.html	(トップページ)
top.css
--------------------------------------------------------------------*/

/*------------.title---------------------------------------------------------------*/
.title {
	height: 800px;
	padding-top: 57%;
	background: inherit !important;
	overflow: hidden;
}
/*.title .mv {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: var(--transformXY);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	z-index: 0;
}
.title #mv01 { background-image: url("../img/mv_p01.jpg"); }
.title #mv02 { background-image: url("../img/mv_p02.jpg"); }
.title #mv03 { background-image: url("../img/mv_p03.jpg"); }*/
.title h2 {
	position: absolute;
	width: 100%;
	max-width: 1100px;
	text-align: right;
	font: bold 4em / 1 var(--gothic);
	color: var(--co-white);
	z-index: 4;
}
.title h2 span {
	margin-top: 1em;
	padding-right: 2em;
	font: normal 0.3125em / 1.2 var(--mincho);
	color: var(--co-white);
}

@media (max-width: 979px) {
	.title { height: 50vh; }
	.title::after {
		background-size: cover;
	}
	.title h2 {
		width: 96%;
		font: bold 1.78em / 1 var(--gothic);
	}
	.title h2 span {
		padding-right: 1em;
	}
}


.title::after { display: none; }
@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

@keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}
.swiper-container{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
}
.swiper-container::after {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-color: rgba(42,43,43,0.70);
	mix-blend-mode: hard-light;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
    -webkit-animation: zoomUp 5s linear 0s;
    animation: zoomUp 5s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.swiper-img {
    background-size: cover; 
    background-position: center center;
    height: 110%;
}

/*------------article------------------------------------*/
article {
	margin-top: 0;
	padding-bottom: 0;
}
main article:not(:first-of-type) { margin-top: 0; }
article::before,
article::after { display: none; }
article h2 {
	margin-bottom: 0.5em;
	text-align: center;
	font: bold 3.5em / 1 var(--mincho);
}
article h2 span {
	display: block;
	font: bold 0.53em / 1 var(--gothic);
	color: var(--co-sky);
}

@media (max-width: 979px) {
	article h2 { font-size: 2.5em; }
}


/*------------news------------------------*/
#news {
	position: relative;
	width: 100%;
	margin: 50px auto 0;
}
#news h2 {
	text-align: left;
	writing-mode: vertical-rl;
	font-feature-settings: initial;
	font: bold 2.1875em / 1 var(--mincho);
}
#news section {
	display: flex;
	gap: 20px;
	max-width: 1100px;
	margin: 0 auto;
}
#news section div {
	width: calc(100% - 2.1875em - 20px);
	padding: 30px;
	background-color: #eaeaea;
	border-radius: 15px;
}
#news iframe {
	display: block;
	width: 100%;
	height: 350px;
	border: none;
	background-color: transparent;
}

@media (max-width: 979px) {
	#news section {
		display: block;
	}
	#news h2 {
		writing-mode: horizontal-tb;
		font-feature-settings: initial;
		font: bold 2.1875em / 1 var(--mincho);
	}
	#news section div {
		width: 100%;
		margin-top: 0.5em;
		padding: 15px;
	}
}


/*------------about------------------------*/
#about {
	position: relative;
	width: 100%;
	margin: 60px auto 0;
}
#about h2 { text-align: left; }
#about section {
	display: flex;
	gap: 80px;
	margin: 0 auto;
}
#about #aboPho {
	width: 100%;
	max-width: 570px;
}
#about #aboPho img { border-radius: 15px; }
#about #aboTxt {
	width: 100%;
	max-width: 450px;
}

@media (max-width: 979px) {
	#about section { display: block; }
	#about #aboPho,
	#about #aboTxt {
		width: 100%;
		max-width: 570px;
		margin: 0 auto;
	}
	#about #aboTxt { margin-top: 20px; }
}


/*------------technology------------------------*/
#technology {
	position: relative;
	width: 100%;
	margin: 100px auto 0;
}
#technology ul {
	display: flex;
	gap: 55px;
}
#technology ul li {
	display: flex;
	flex-direction: column;
	width: calc((100% - 55px * 2) / 3);
}
#technology ul li img { border-radius: 15px; }
#technology ul li dl {
	margin: 20px 0;
	text-align: center;
}
#technology ul li dl dt { font: bold 1.875em / 1.2 var(--mincho); }
#technology ul li dl dd {
	font: bold 1.125em / 1.2 var(--gothic);
	color: var(--co-sky);
}
#technology ul li div { margin-top: auto; }

@media (max-width: 720px) {
	#technology ul { flex-wrap: wrap; }
	#technology ul li { width: calc((100% - 55px) / 2); }
}

@media (max-width: 480px) {
	#technology ul li {
		width: 100%;
		max-width: 330px;
		margin: 0 auto;
	}
}


/*------------technology------------------------*/
#movie {
	position: relative;
	width: 100%;
	margin: 100px auto 0;
}
#movie ul {
	display: flex;
	gap: 50px 100px;
}
#movie ul li { width: calc((100% - 100px) / 2); }
#movie ul li img { border-radius: 15px; }
#movie ul li dl { margin: 20px 0 0; }
#movie ul li dl dt { font: bold 1.65em / 1.2 var(--gothic); }
#movie ul li dl dd {
	margin-top: 20px;
	font: normal 0.9375em / 1.2 var(--gothic);
}

@media (max-width: 720px) {
	#movie ul { flex-wrap: wrap; }
	#movie ul li {
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
}


/*------------special------------------------*/
#special {
	position: relative;
	width: 100%;
	margin: 100px auto 0;
	padding: 35px 0;
	background: linear-gradient(to bottom,  rgba(42,43,43,1) 0%,rgba(0,48,92,1) 100%);
}
#special h2,
#special h2 span { color: var(--co-white); }
#special h2 { margin-bottom: 20px; }
#special section {
	width: 90%;
	max-width: 1270px;
	margin: 0 auto;
}
#special section > p {
	margin-bottom: 25px;
	text-align: center;
	color: var(--co-white);
}
/* スライドアニメーションの設定
@keyframes horizontal-animation {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
} */
/* スライダーを表示する親コンテナ */
#special #speSlide {
	display: flex;
	justify-content: center;
	overflow: hidden;
}
#special ul {
	display: flex;
	animation: horizontal-animation 30s linear infinite;
}
#special ul li {
	display: flex;
	flex-direction: column;
	width: 300px;
	margin-right: 25px;
}
#special ul li img { border-radius: 15px; }
#special ul li p {
	margin-top: 10px;
	font: bold 1.125em / 1.2 var(--gothic);
	color: var(--co-white);
}
#special ul li dl { margin-top: auto; }
#special ul li dl dt {
	margin-top: 40px;
	font: normal 0.9375em / 1.2 var(--gothic);
	color: var(--co-white);
}
#special ul li dl dd {
	margin-top: 0.15em;
	font: bold 1.625em / 1.2 var(--gothic);
	color: var(--co-white);
}
#special ul li dl dd span {
	display: inline-block;
	margin-left: 0.5em;
	font-size: 0.57em;
}
/* ホバー時の一時停止用 ※任意 */
@media (hover: hover) {
	#special #speSlide:hover ul { animation-play-state: paused; }
}


/*------------pamphlet------------------------*/
#pamphlet {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 1400px;
	margin: 35px auto;
}
#pamphlet section {
	display: flex;
	gap: 20px 40px;
	width: calc(100% / 2);
	margin: 0 auto;
	padding: 30px 70px;
	border: 1px solid #aaaaaa;
}
#pamphlet section:last-of-type { border-left: 0 none; }
#pamphlet section h2 {
	text-align: left;
	font-size: 2.1875em;
}
#pamphlet section .pamPho { width: 140px; }
#pamphlet section .pamTxt {
	display: flex;
	flex-flow: column;
	width: calc(100% - 140px);
}

@media (max-width: 979px) {
	#pamphlet { flex-flow: column; }
	#pamphlet section { width: 96%; }
	#pamphlet section:last-of-type {
		border-left: 1px solid #aaaaaa;
		border-top: 0 none;
	}
}

@media (max-width: 560px) {
	#pamphlet section { padding: 30px 30px; }
}

@media (max-width: 430px) {
	#pamphlet section {
		flex-flow: column;
		padding: 30px 20px;
	}
	#pamphlet section h2 { text-align: center; }
	#pamphlet section .pamPho {
		width: 100%;
		text-align: center;
	}
	#pamphlet section .pamTxt { width: 100%; }
	#pamphlet section .pamTxt .Btn04 { margin: 0 auto; }
}


/*------------digital------------------------*/
#digital section {
	position: relative;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}