@charset "utf-8";
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* 81-LSM */
/* clearfix */	
.clearfix:after {content: "";display: block;clear: both;}
/* flex */	
.flex,.flexA,.flexB,.flexC {display: flex;flex-wrap: wrap;}
.flexA {justify-content: space-around;}
.flexB {justify-content: space-between;}
.flexC {justify-content: center;}
/*------------------------------------------------------------
	mainVisual
------------------------------------------------------------*/
.mainVisual {
	margin-bottom: 9rem;
	position: relative;
	z-index: 5;
	background-color: #FFF;
}
.mainVisual .inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.mainVisual .inner .lBox {
	width: calc(50% - 24rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.mainVisual .inner .lBox .title {
	padding: 3.2rem 0.5rem 0 0;
	height: 56rem;
	font-size: 4rem;
	line-height: 1.4;
	-webkit-writing-mode : tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	letter-spacing: 0.1em;
	opacity: 0;
    filter: blur(30px);
	animation-duration: 2.5s;
	animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
	animation-fill-mode: forwards;
    will-change: filter, opacity;
	backface-visibility: hidden;
	box-sizing: border-box;
}
.mainVisual .inner .lBox .title.show {
	animation-name: ani-blurIn;
}
.mainVisual .inner .rBox {
	width: calc(50% + 24rem);
	opacity: 0;
	transition: opacity 2.5s linear;
}
.mainVisual .inner .rBox.show {
	opacity: 1;
}
.mainVisual .inner .rBox img {
	width: 100%;
}
@keyframes ani-blurIn {
	0% {
		opacity: 0;
		filter: blur(30px);
	}
	100% {
		opacity: 1;
		filter: blur(0);
	}
}
@media all and (max-width: 896px) {
	.mainVisual {
		margin-bottom: 2.2rem;
	}
	.mainVisual .inner {
		display: block;
	}
	.mainVisual .inner .lBox {
		padding: 5.8rem 2rem 0.2rem 0.8rem;
		width: auto;
	}
	.mainVisual .inner .lBox .title {
		padding: 3.2rem 0.5rem 0 0;
		height: 31.5rem;
		font-size: 2rem;
	}
	.mainVisual .inner .rBox {
		width: auto;
	}
}
/*------------------------------------------------------------
	content
------------------------------------------------------------*/
.content {
	margin: 0 auto;
	padding: 0 2rem;
	max-width: 144rem;
}
@media all and (max-width: 896px) {
	.content {
		margin: 0;
		padding: 0 2.6rem !important;
		max-width: inherit !important;
	}
}
/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 {
	margin-bottom: 5.9rem;
	font-size: 4rem;
	font-weight: normal;
	line-height: 1.4;
	letter-spacing: 0.1em;
}
.headLine01 sup {
	font-size: 1.6rem;
	vertical-align: 1.8rem;
}
.headLine01.white {
	color: #FFF;
}
.headLine01 .sml {
	margin-bottom: 2rem;
	display: block;
	font-size: 2.6rem;
	letter-spacing: 0.1em;
}
@media all and (min-width: 897px) and (max-width: 1500px) {
	.headLine01 {
		font-size: 2.6vw;
	}
	.headLine01 sup {
		font-size: 1vw;
	}
	.headLine01 .sml {
		font-size: 1.7vw;
	}
}
@media all and (max-width: 896px) {
	.headLine01 {
		margin-bottom: 2.3rem;
		font-size: 2.4rem;
	}
	.headLine01 sup {
		font-size: 1rem;
		vertical-align: 0.8rem;
	}
	.headLine01 .sml {
		margin-bottom: 1rem;
		font-size: 1.3rem;
	}
}
/*------------------------------------------------------------
	comText
------------------------------------------------------------*/
.comText {
	line-height: 2.2;
	letter-spacing: 0.1em;
}
.comText sup {
	font-size: 1.2rem;
}
.comText sub {
	font-size: 1.2rem;
	vertical-align: -0.1rem;
}
.comText.white {
	color: #FFF;
}
@media all and (max-width: 896px) {
	.comText {
		font-size: 1.6rem;
	}
	.comText sup {
		font-size: 0.8rem;
	} 
}
/*------------------------------------------------------------
	comSmlText
------------------------------------------------------------*/
.comSmlText {
	font-size: 1.6rem;
	letter-spacing: 0.1em;
}
.comSmlText.white {
	color: #FFF;
}
@media all and (max-width: 896px) {
	.comSmlText {
		font-size: 1.3rem;
	}
}
/*------------------------------------------------------------
	comBtn
------------------------------------------------------------*/
.comBtn {
    margin: 0 auto;
    width: 27.5rem;
    opacity: 1;
	font-size: 1.6rem;
    transition: opacity .4s cubic-bezier(.39, .575, .565, 1) 1s, transform .7s cubic-bezier(.39, .575, .565, 1) 1s, -webkit-transform .7s cubic-bezier(.39, .575, .565, 1) 1s;
    transform: translate3d(0, 0, 0);
}
.arrButton {
    margin: 0 auto;
    display: block;
    width: 100%;
    font-weight: bold;
    height: 6rem;
    letter-spacing: 0.1em;
    color: #000;
    transition: color .3s cubic-bezier(.39, .575, .565, 1), background-color .3s cubic-bezier(.39, .575, .565, 1);
}
.wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.arrButton, .wrap {
    position: relative;
    display: inline-block;
}
.wrap::after, .wrap::before {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    background-color: #343434;
    transition: opacity .6s cubic-bezier(.39, .575, .565, 1), transform .6s cubic-bezier(.55, .05, .22, .99);
    transition: opacity .6s cubic-bezier(.39, .575, .565, 1), transform .6s cubic-bezier(.55, .05, .22, .99), -webkit-transform .6s cubic-bezier(.55, .05, .22, .99);
}
.wrap::before {
    top: 0;
}
.wrap::after {
    bottom: 0;
}
.coverButton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #003461;
    opacity: 0;
    transition: opacity .6s cubic-bezier(.47, 0, .745, .715), transform .6s cubic-bezier(.55, .05, .22, .99);
    transition: opacity .6s cubic-bezier(.47, 0, .745, .715), transform .6s cubic-bezier(.55, .05, .22, .99), -webkit-transform .6s cubic-bezier(.55, .05, .22, .99);
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}
.innerButtom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.innerButtom::after, .innerButtom::before {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    content: "";
    background-color: #343434;
    transition: opacity .3s cubic-bezier(.39, .575, .565, 1), transform .6s cubic-bezier(.55, .05, .22, .99);
    transition: opacity .3s cubic-bezier(.39, .575, .565, 1), transform .6s cubic-bezier(.55, .05, .22, .99), -webkit-transform .6s cubic-bezier(.55, .05, .22, .99);
}
.innerButtom::before {
    left: 0;
}
.innerButtom::after {
    right: 0;
}
.buttonTxt {
    position: relative;
}
.wrap::after {
    bottom: 0;
}
@media all and (min-width: 897px) {
    .arrButton:hover {
        color: #fff;
        transition-delay: .2s;
    }
    .arrButton:hover .wrap::before {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    .arrButton:hover .coverButton {
        opacity: 1;
        transition-delay: .2s;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .arrButton:hover .innerButtom::before {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    .arrButton:hover .innerButtom::after {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    .arrButton:hover .wrap::after {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    .arrButton:hover .wrap::after, .arrButton:hover .wrap::before {
        opacity: 0;
    }
}
@media all and (max-width: 896px) {
    .comBtn {
        width: 100%;
        max-width: 30rem;
		font-size: 1.4rem;
    }
    .arrButton {
        height: 5rem;
    }
}
/*------------------------------------------------------------
	comImgBox
------------------------------------------------------------*/
.comImgBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.comImgBox .textBox {
	width: calc(100% - 47rem);
}
.comImgBox .textBox .subBox .comText {
	margin-bottom: 3.2rem;
}
.comImgBox .textBox .subBox .comText:last-child {
	margin-bottom: 0;
}
.comImgBox .textBox .subBox .comSmlText {
	margin-top: -2rem;
}
.comImgBox .photoBox {
	margin-top: 1rem;
	width: 40rem;
}
@media all and (max-width: 896px) {
	.comImgBox {
		display: block;
	}
	.comImgBox .textBox {
		margin-bottom: 2rem;
		width: auto;
	}
	.comImgBox .textBox .subBox .comText {
		margin-bottom: 2rem;
	}
	.comImgBox .textBox .subBox .comSmlText {
		margin-top: -1rem;
	}
	.comImgBox .photoBox {
		margin-top: 0;
		width: 15rem;
	}
}
/*------------------------------------------------------------
	comSecBox
------------------------------------------------------------*/
.comSecBox {
	background-color: #5C6878;
}
.comSecBox .inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.comSecBox .photo {
	width: 46.85%;
	aspect-ratio: 900 / 1100;
}
.comSecBox .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.comSecBox .textBox {
	padding: 9.4rem 2rem 1rem;
	width: 53.15%;
	box-sizing: border-box;
}
.comSecBox .textBox .subBox {
	margin: 0 auto;
	max-width: 79.8rem;
}
.comSecBox .textBox .headLine01 {
	margin-bottom: 4.9rem;
}
.comSecBox .textBox .comSmlText {
	margin-top: 0.8rem;
}
.comSecBox .textBox .textImg {
	margin: 0.9rem auto 0;
	max-width: 34rem;
}
@media all and (max-width: 896px) {
	.comSecBox .inner {
		display: block;
	}
	.comSecBox .photo {
		width: auto;
		aspect-ratio: 375 / 250;
	}
	.comSecBox .photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.comSecBox .textBox {
		padding: 5rem 2rem 2.6rem;
		width: auto;
	}
	.comSecBox .textBox .subBox {
		margin: 0 0.5rem;
		max-width: inherit;
	}
	.comSecBox .textBox .headLine01 {
		margin-bottom: 2.7rem;
	}
	.comSecBox .textBox .comSmlText {
		margin-top: 0.4rem;
	}
	.comSecBox .textBox .textImg {
		margin: 0.5rem auto 0;
		max-width: 17rem;
	}
}
/*------------------------------------------------------------
	comAreaBox
------------------------------------------------------------*/
.comAreaBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.comAreaBox .lBox {
	position: sticky;
	left: 0;
	top: 0;
	width: 46.9%;
}
.comAreaBox .lBox .photoList li {
	height: 100svh;
	vertical-align: top;
}
.comAreaBox .lBox .photoList li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.comAreaBox .rBox {
	width: 53.1%;
	box-sizing: border-box;
}
.comAreaBox .rBox .item {
	margin: 0 auto;
	padding: 9.2rem 2rem;
	max-width: 80rem;
	min-height: 100svh;
	box-sizing: content-box;
}
.comAreaBox .rBox .item .textBox .comText:not(:last-child) {
	margin-bottom: 3.3rem;
}
.comAreaBox .rBox .item .textBox .comSmlText {
	margin-top: -1.4rem;
}
.comAreaBox .rBox .item02 .headLine01 {
	margin-bottom: 4.6rem;
}
.comAreaBox .rBox .item02 .textBox .comText {
	line-height: 1.8;
}
.comAreaBox .rBox .item02 .textBox .comText:not(:last-child) {
	margin-bottom: 3.6rem;
}
.comAreaBox .rBox .item02 .textBox .comSmlText {
	margin-top: 0;
	line-height: 1.6;
}
.comAreaBox .rBox .item03 .headLine01 {
	margin-bottom: 1.9rem !important;
	max-width: 66rem;
	padding-bottom: 1.5rem;
	font-size: 3rem;
	border-bottom: 1px solid #999;
}
.comAreaBox .rBox .item03 .headLine01 sup {
	vertical-align: 1.1rem;
}
.comAreaBox .rBox .item03 .textList li:not(:last-child) {
	margin-bottom: 1.9rem;
}
.comAreaBox .rBox .item03 .textList li .tag {
	margin-bottom: 0.4rem;
	padding: 0.7rem 1rem 0.6rem;
	width: fit-content;
	min-width: 14rem;
	color: #FFF;
	font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
	font-family: "游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	background-color: #AC0E26;
}
.comAreaBox .rBox .item03 .textList li .txt {
	font-size: 1.8rem;
	line-height: 1.6;
	letter-spacing: 0.1em;
}
.comAreaBox .rBox .item03 .textList li .txt .red {
	color: #AC0C26;
}
@media all and (max-width: 896px) {
	.comAreaBox {
		display: block;
	}
	.comAreaBox .lBox {
		position: static;
		width: auto;
	}
	.comAreaBox .rBox {
		width: auto;
	}
	.comAreaBox .rBox .photo {
		margin-bottom: 5rem;
		aspect-ratio: 375 / 250;
	}
	.comAreaBox .rBox .photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.comAreaBox .rBox .item {
		margin: 0;
		padding: 0 0 4rem;
		max-width: inherit;
		min-height: inherit;
	}
	.comAreaBox .rBox .item .headLine01 {
		padding: 0 2.6rem;
	}
	.comAreaBox .rBox .item .textBox {
		padding: 0 2.6rem;
	}
	.comAreaBox .rBox .item .textBox .comText:not(:last-child) {
		margin-bottom: 2rem;
	}
	.comAreaBox .rBox .item02 .headLine01 {
		margin-bottom: 2.5rem;
	}
	.comAreaBox .rBox .item02 .textBox .comText:not(:last-child) {
		margin-bottom: 2rem;
	}
	.comAreaBox .rBox .item03 .headLine01 {
		margin: 0 2rem 1.9rem !important;
		max-width: inherit;
		padding: 0 0 1rem;
		font-size: 2rem;
	}
	.comAreaBox .rBox .item03 .headLine01 sup {
		vertical-align: 0.7rem;
	}
	.comAreaBox .rBox .item03 .textList {
		padding: 0 2.6rem;
	}
	.comAreaBox .rBox .item03 .textList li .tag {
		padding: 0.6rem 1rem 0.4rem;
		min-width: 10rem;
		font-size: 1.4rem;
	}
	.comAreaBox .rBox .item03 .textList li .txt {
		font-size: 1.6rem;
	}
}
/*------------------------------------------------------------
	fade
------------------------------------------------------------*/
.fadeBlur {
	opacity: 0;
    filter: blur(30px);
	animation-duration: 2.5s;
	animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
	animation-fill-mode: forwards;
    will-change: filter, opacity;
	backface-visibility: hidden;
}
.fadeBlur.on {
	animation-name: ani-blurIn;
}