@charset "utf-8";
/* CSS Document */

/* =====================
  mv
===================== */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
::-webkit-scrollbar {
	/* Chrome, Safari 対応 */
	display: none;
}

html {
	overflow-y: scroll;
	-ms-overflow-style: none; /* IE, Edge 対応 */
	scrollbar-width: none; /* Firefox 対応 */
}
.nav .gnav .children:hover {
	background-color: rgba(255, 255, 255, 0.5);
	transition: 0.3s ease-in-out;
}
.box {
	color: #fff;
	height: 100vh;
	position: relative;
}
.box01-area {
	background: url(../images/index/bg_mv01.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
.box02-area {
	background: url(../images/index/bg_mv02_2026.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
.box02-area_mod_2021 {
	background: url(../images/index/bg_mv02_2021.jpg?210401-1200) no-repeat;
	background-size: cover;
	background-position: center;
}
.box02-area_mod_2021a {
	background: url(../images/index/bg_mv02_2021a.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
.box02-area_mod_2021b {
	background: url(../images/index/bg_mv02_2021b.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
.box03-area {
	background: url(../images/index/bg_mv03.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
/* scroll */
.scroll-wrap {
	bottom: 80px;
	right: 0;
	position: absolute;
}
.scroll {
	z-index: 40;
	width: 44px;
	transform: translate(-50%, 0);
	color: #fff;
}
.scroll span.text {
	font-size: 1.4rem;
	letter-spacing: 0.2em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.scroll span.arrow {
	position: absolute;
	bottom: -62px;
	right: 1px;
	width: 33px;
	height: 74px;
	margin-left: -12px;
	border-left: 2px solid #fff;
	-webkit-animation: sdb 1.5s infinite;
	animation: sdb 1.5s infinite;
	box-sizing: border-box;
}

@-webkit-keyframes sdb {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: translate(0, 20px);
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translate(0px, 20px);
		opacity: 0;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes secondaryImageOverlayIn {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

@keyframes secondaryImageOverlayOut {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100%);
	}
}

.item {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	transition-property: height, transform, opacity;
	transition-duration: 5s;
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	background-color: rgba(0, 0, 0, 0.3);
}
.add-bg {
	width: 100%;
	height: 100%;
	left: 0;
	position: absolute;
	overflow: hidden;
	transition-property: height, transform, opacity;
	transition-duration: 1s, 1s, 0.2s;
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transition: 0.7s;
	-moz-transition: 0.7s;
	-ms-transition: 0.7s;
	-o-transition: 0.7s;
	transition: 0.7s;
	transition-delay: 0.8s;
}
.change-bg {
	top: 0;
	background-color: rgba(0, 0, 0, 0.3);
	/*-webkit-transition: 2s;
	-moz-transition:  2s;
	-ms-transition: 2s;
	-o-transition: 2s;
	transition:2s;*/
	animation-duration: 0.7s; /* アニメーション時間 */
}
@keyframes SlideUp {
	0% {
		opacity: 0; /* 透明 */
		transform: translateY(500px); /* Y軸方向に50px */
	}
	100% {
		opacity: 1; /* 不透明 */
		transform: translateY(0); /* Y軸方向に0px */
	}
}
.pagenation {
	padding: 20px;
	position: fixed;
	left: 18px;
	top: 50%;
	transform: translate(0%, -50%);
}
.pagenation {
	counter-reset: number;
}
.pagenation li {
	margin-bottom: 20px;
}
.pagenation a {
	display: block;
	height: 20px;
	width: 20px;
	color: #fff;
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	cursor: pointer;
	position: relative;
}
.pagenation a::before {
	counter-increment: number;
	content: "0" counter(number);
}
.pagenation a::after {
	background-color: #fff;
	bottom: 50%;
	content: "";
	display: block;
	height: 1px;
	left: 25px;
	position: absolute;
	transition: 0.5s all;
	width: 0%;
	transform: translate(0%, -50%);
}
.pagenation a:hover::after {
	width: 180%;
}
.pagenation a.active::after {
	width: 180%;
}

/* ===============================
         .box01-area
  ================================ */
.box01-area .content-wrap-box01 {
	max-width: 96%;
	width: 100%;
	margin: 0 auto;
	padding-top: 19vh; /* 0922 */
}
.box01-area .wrap h2 {
	text-align: center;
	margin-bottom: 15px;
}
.box01-area .wrap h2 img {
	max-width: 35%;
	display: block;
	margin: 0 auto;
}
.box01-area .text {
	text-align: center;
	font-weight: bold;
	line-height: 1.8;
	font-size: 1.15vw;
}
.box01-area .bannerWrap {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 20px;
	width: 50%;
	max-width: 760px;
	/* padding-top: 50px; */
	padding-top: clamp(15px, calc(100px - 5vw), 50px);
	margin-top: 4vh; /* 0922 */
}
.box01-area .bannerLink {
	width: 338px;
	max-width: 100%;
}
.box01-area .news-area {
	margin-top: 10px; 
	background-color: rgba(255, 255, 255, 0.5);
	padding: 20px;
	animation-duration: 2s; /* アニメーション時間 */
	max-width: 760px;
	width: 100%;
}

.box01-area .news-area h3 {
	font-size: 2rem;
	letter-spacing: 0.1em;
	color: #333;
	font-weight: 500;
	display: inline-block;
}
.box01-area .news-area .ichiran {
	display: inline-block;
	position: relative;
	background-color: #333;
	color: #fff;
	padding: 5px 8px 5px 0px;
	font-weight: bold;
	max-width: 71px;
	width: 100%;
	text-align: right;
	margin-left: 9px;
	font-size: 1.4rem;
}
.box01-area .news-area .ichiran a {
	display: block;
	width: 100%;
	position: relative;
	color: #fff;
}
.box01-area .news-area .ichiran .hamb {
	left: 8px;
	top: 8px;
}
.box01-area .news-area .ichiran .hamb,
.box01-area .news-area .ichiran .hamb:before,
.box01-area .news-area .ichiran .hamb:after {
	position: relative;
	display: block;
	width: 15px;
	height: 1px;
	border-radius: 2px;
	background-color: #fff;
	transition: all 0.3s ease;
}
.box01-area .news-area .ichiran .hamb:before {
	top: 4px;
	content: "";
	transform: rotate(0deg);
}
.box01-area .news-area .ichiran .hamb:after {
	top: 7px;
	content: "";
}

.box01-area .news-area dl {
	margin-top: 10px;
}
.box01-area .news-area dl dt {
	font-weight: bold;
	vertical-align: top;
	display: inline-block;
	width: 100px;
}
.box01-area .news-area dl dd {
	display: inline-block;
	width: 400px;
}
.box02-area h2 {
	margin-top: 155px;
}
.box02-area h2 span {
	background-color: rgba(0, 0, 0, 0.3);
	padding: 1px 24px;
}
@media all and (-ms-high-contrast: none) {
	.content-wrap h2 span.en {
		margin-bottom: 26px !important;
		padding-top: 1px;
	}
	.box02-area h2 span {
		padding-top: 10px;
	}
	.box02-area p span {
		padding-top: 7px !important;
	}
}

.box02-area p span {
	display: table;
	background-color: rgba(0, 0, 0, 0.3);
	text-align: center;
	margin: 0 auto 7px;
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1.8;
	padding: 1px 24px;
}

.box02-area a.btn {
	border: 2px solid #fff;
	color: #fff !important;
	font-weight: bold;
	display: block;
	margin: 40px auto;
	padding: 20px 30px;
}
.box02-area a.btn::after {
	border-left: 9px solid #fff;
	right: 2px;
}
.box02-area .content-wrap {
	max-width: 950px;
}
.box02-area .scroll-wrap {
	bottom: 79px;
}
.box02-area .scroll {
	bottom: 75px;
	right: -30px;
}
.box02-area .scroll span.arrow {
	position: absolute;
	bottom: -66px;
	right: 1px;
	width: 33px;
	height: 74px;
}

.content-wrap {
	max-width: 850px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
.content-wrap h2 {
	font-size: 3.7rem;
	font-weight: bold;
	margin-bottom: 30px;
	text-align: center;
}
.content-wrap h2 span.en {
	display: table;
	margin: 0 auto;
	text-align: center;
	font-size: 2.4rem;
	margin-bottom: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
}
.box03-area p.text {
	text-align: center;
	font-size: 2.4rem;
	font-weight: bold;
}
.box03-area ul {
	margin-top: 50px;
	font-size: 0;
	line-height: 0;
}
.box03-area ul li {
	display: inline-block;
	vertical-align: top;
	min-height: 200px;
	width: 33%;
	margin-right: 2px;
	margin-bottom: 2px;
	overflow: hidden;
}

.box03-area ul li a:hover img {
	transform: scale(1.09);
}
.box03-area ul li img {
	transform: scale(1);
	transition: all 0.4s ease;
}

.box03-area ul li a {
	display: block;
	width: 100%;
	color: #fff;
	min-height: 200px;
	padding-top: 34px;
	position: relative;
}
.box03-area ul li a img {
	display: block;
	margin: 0 auto;
	position: relative;
}
.box03-area ul li p {
	text-align: center;
	margin-top: 18px;
	position: absolute;
	top: 109px;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 100%;
	font-size: 1.8rem;
	font-weight: bold;
}
.box03-area ul li p span.lineheight_narrow {
	line-height: 1.0;
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
}
.box03-area ul li p span {
	display: block;
	font-size: 1.2rem;
	letter-spacing: 0.2em;
	font-weight: 500;
	margin-top: 5px;
}
.box03-area ul li:nth-child(1) a {
	background-color: rgba(109, 143, 247, 0.9);
}
.box03-area ul li:nth-child(1) a:hover {
	/*background-color: rgba(56,56,228,1.0);*/
	background-color: rgba(58, 118, 226, 1);
	opacity: 1;
}
.box03-area ul li:nth-child(1) a img {
	top: 12px;
}

.box03-area ul li:nth-child(2) {
	background-color: rgba(82, 197, 198, 0.9);
}
.box03-area ul li:nth-child(2) a:hover {
	/*background-color: rgba(5,159,160,1.0);*/
	background-color: rgba(39, 188, 185, 1);
	opacity: 1;
}

.box03-area ul li:nth-child(3) {
	background-color: rgba(224, 197, 93, 0.9);
}
.box03-area ul li:nth-child(3) a:hover {
	/*background-color: rgba(187,157,27,1.0);*/
	background-color: rgba(247, 202, 54, 1);
	opacity: 1;
}
.box03-area ul li:nth-child(3) a img {
	top: 10px;
}

.box03-area ul li:nth-child(4) {
	background-color: rgba(209, 165, 122, 0.9);
}
.box03-area ul li:nth-child(4) a:hover {
	/*background-color: rgba(190,111,39,1.0);*/
	background-color: rgba(224, 152, 83, 1);
	opacity: 1;
}
.box03-area ul li:nth-child(4) a img {
}

.box03-area ul li:nth-child(5) {
	background-color: rgba(232, 127, 164, 0.9);
}
.box03-area ul li:nth-child(5) a:hover {
	background-color: rgba(249, 99, 134, 1);
	/*background-color: rgba(201,73,116,1.0);*/
	opacity: 1;
}
.box03-area ul li:nth-child(5) a img {
	top: 12px;
}

.box03-area ul li:nth-child(6) {
	background-color: rgba(172, 121, 231, 0.9);
}
.box03-area ul li:nth-child(6) a:hover {
	background-color: rgba(168, 115, 223, 1);
	/*background-color: rgba(132,75,196,1.0);*/
	opacity: 1;
}
.box03-area ul li:nth-child(6) a img {
	top: 14px;
}

.pagetop {
	display: none !important;
}
footer {
	display: none;
}
.sp-only {
	display: none;
}



/* ====================================================================================
         画面幅・高さごとの調整
  ==================================================================================== */
@media screen and (max-height: 794px) {
	.box01-area .wrap h2 img {
		max-width: 30%;
		margin-bottom: 20px;
	}
	.box01-area .text {
		font-size: 16px;
	}
}

@media screen and (max-width: 1460px)  {
	.box01-area .wrap h2 img {
		max-width: 48%;
	}
	.box01-area .text {
		font-size: 1.6vw;
	}
	.box01-area .bannerLink {
		width: 280px;
	}
}

@media screen and (max-width: 1460px) and (max-height: 794px) {
	.box01-area .wrap h2 img {
		max-width: 41%;
	}
	.box01-area .text {
		font-size: 1.5vw;
	}
	.box01-area .bannerWrap {
		padding-top: 20px;
	}
}

@media screen and (max-width: 1460px) and (max-height: 700px) {
	.box01-area .wrap h2 img {
		max-width: 36%;
	}
	.box01-area .text {
		font-size: 1.5vw;
	}
	.box01-area .bannerWrap {
		padding-top: 20px;
	}
}



/* ====================================================================================
         ipad時
  ==================================================================================== */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
}

@media screen and (max-width: 1850px) {
	.nav .gnav .box02 .children:hover .drop-menu {
		top: 71px;
		padding: 40px 3%;
	}
}

/* ====================================================================================
         SP時
  ==================================================================================== */
@media screen and (max-width: 1024px) {
	.pagenation {
		display: none;
	}
	.box {
		height: auto;
	}
	.add-bg {
		position: static;
	}
	.pagetop {
		display: block !important;
	}
	.scroll-wrap {
		display: none;
	}
	/* ===============================
         .box01-area
  ================================ */

	.box01-area {
		padding: 80px 20px 50px;
	}
	.box01-area .wrap h2 img {
		max-width: 56%; 
	}
	.box01-area .content-wrap-box01 {
		padding-top: 0;
		max-width: 100%;
		width: 100%;
	}
	.box01-area .text {
		font-size: 1.4rem;
		position: static;
		top: 0;
		left: 0;
		transform: none;
		margin: 30px 0;
	}
	.box01-area .bannerWrap {
		width: 78%;
		padding-top: 10px;
	}
	.box01-area .bannerLink {
		width: 270px;
	}
	.box01-area .news-area {
		transform: none;
		padding: 20px 15px;
		max-width: 100%;
		margin-top: 20px;
	}
	.box01-area .news-area dl dt {
		display: block;
		width: 100%;
	}
	.box01-area .news-area dl dd {
		display: block;
		width: 100%;
	}
	.box02-area .content-wrap {
		max-width: 100%;
	}
	.box02-area p span {
		display: inline;
		background-color: transparent;
		text-align: left;
		margin: 0 auto 7px;
		font-size: 1.4rem;
		padding: 0;
	}
	.box02-area h2 span {
		background-color: transparent;
		padding: 1px 0;
	}
	.content-wrap {
		max-width: 100%;
		position: static;
		padding: 40px 20px;
		top: 0;
		left: 0;
		transform: none;
	}
	.content-wrap h2 span.en {
		font-size: 1.6rem;
	}
	.content-wrap h2 {
		font-size: 2rem;
		text-align: center;
		margin-top: 0;
	}
	.box03-area p.text {
		font-size: 1.6rem;
	}

	.box03-area ul li {
		min-height: 200px;
		width: 50%;
		margin-right: 0px;
		margin-bottom: 0px;
	}
	.box03-area ul li p {
		font-size: 1.4rem;
		margin-top: 0;
		top: 97px;
	}
	.box03-area ul li p span.lineheight_narrow{
		line-height: 1.2;
		font-size: 1.4rem;
		letter-spacing: 0em !important;
	}
	.box03-area ul li a {
		min-height: 200px;
	}
	.box03-area ul li a img {
		max-width: 40px;
	}
	.sp-only {
		display: block;
	}
	footer {
		display: block;
	}
} /*  SP // */


/* ====================================================================================
         より小さいSP時（ヘッダーが変化時）
  ==================================================================================== */
@media screen and (max-width: 768px) {
	.box01-area .wrap h2 img {
		max-width: 86%;
	}
	.box01-area .bannerWrap {
		flex-direction: column;
		width: 100%;
	}
	.box01-area .bannerLink {
		width: 260px;
	}
}