@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;1,200;1,300&display=swap');
:root{
	--body : #333;
	--link : #333;
	--primary : #100454;
}

/*--------------------------------------------
STATE
---------------------------------------------*/

@media screen and (max-width: 999px){
	.is-pc{
		display : none;
	}
}

@media print,screen and (min-width: 1000px){
	.is-sp{
		display : none;
	}
}

/*--------------------------------------------
DATA TEXT
---------------------------------------------*/

[data-before]:before{
	content : attr( data-before );
	white-space : pre;
}

[data-after]:after{
	content : attr( data-after );
	white-space : pre;
}

[data-both]:before{
	content : attr( data-both );
	white-space : pre;
}

[data-both]:after{
	content : attr( data-both );
	white-space : pre;
}

@media screen and (max-width: 999px){
	[data-sp-after]:after{
		content : attr( data-sp-after );
		white-space : pre;
	}
}

@media screen and (max-width: 999px){
	[data-sp-befpre]:befpre{
		content : attr( data-sp-before );
		white-space : pre;
	}
}

@media print,screen and (min-width: 1000px){
	[data-pc-after]:after{
		content : attr( data-pc-after );
		white-pcace : pre;
	}
}

@media print,screen and (min-width: 1000px){
	[data-pc-befpre]:befpre{
		content : attr( data-pc-before );
		white-space : pre;
	}
}

/*--------------------------------------------
FONTS
---------------------------------------------*/

.montserrat{
	font-family : "Montserrat", sans-serif;
}

/*--------------------------------------------
IMAGES
---------------------------------------------*/

.img-fluid{
	width : 100%;
	height : auto;
}

/*--------------------------------------------
TITLE
---------------------------------------------*/

.title01{
	letter-spacing : .1em;
	display : flex;
	line-height : 1.2;
}

.title01[data-en]:before{
	content : attr(data-en);
	font-weight : 300;
	color : #00C5CD;
	line-height : 1;
    font-family: 'Spectral', serif;
}

.title01.column{
	flex-direction : column;
}

.title01.align-center{
	align-items : center;
	text-indent : .1em;
}

.title01.white{
	color : #fff;
}

.title01.white[data-en]:before{
	color : #fff;
}

@media screen and (max-width: 999px){
	.title01{
		font-size : calc( 2.6rem * 100vw / 768 );
	}
	.title01[data-en]:before{
		font-size : 7rem;
	}
	.title01.sp-baseline{
		align-items : baseline;
	}
	.title01.sp-baseline[data-en]:before{
		margin-right : 8px;
	}
	.title01.column[data-en]:before{
		margin-bottom : calc( ( 25 - 2.6 ) * 100vw / 768 );
	}
	.title01.sp-column{
		flex-direction : column;
	}
	.title01.sp-column[data-en]:before{
		margin-bottom : calc( ( 25 - 2.6 ) * 100vw / 768 );
	}
	.title01.sp-text-center{
		text-align : center;
		text-indent : .1em;
	}
}

@media print,screen and (min-width: 1000px){
	.title01{
		font-size : 2.0rem;
        color: #656766;
	}
	.title01[data-en]:before{
		font-size : 6rem;
	}
	.title01.pc-column{
		flex-direction : column;
	}
	.title01.pc-column[data-en]:before{
		margin-bottom : calc( 3px - 2.5px );
	}
	.title01.column[data-en]:before{
		margin-bottom : calc( 25px - 2.6px );
	}
	.title01.pc-baseline{
		align-items : baseline;
	}
	.title01.pc-baseline[data-en]:before{
		margin-right : 12px;
	}
	.title01.pc-text-right{
		text-align : right;
	}
}

.title02{
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	line-height : 1.2;
	font-style : italic;
}

.title02[data-en]:before{
	content : attr(data-en);
	display : block;
	font-weight : 900;
	color : #00C5CD;
}

@media screen and (max-width: 999px){
	.title02{
		font-size : 2.6rem;
	}
	.title02[data-en]:before{
		font-size : 7rem;
		margin-bottom : calc( ( 35 - 7 - 2.6 ) * 100vw / 768 );
	}
}

@media print,screen and (min-width: 1000px){
	.title02{
		font-size : 2.5rem;
	}
	.title02[data-en]:before{
		font-size : 5rem;
		margin-bottom : calc( 24px - 5px - 2.5px );
	}
}

/*--------------------------------------------
TEXT
---------------------------------------------*/

.text01{
	letter-spacing : .1em;
	line-height : 2;
}

@media screen and (max-width: 999px){
	.text01{
		font-size : 2.6rem;
	}
}

@media print,screen and (min-width: 1000px){
	.text01{
		font-size : 1.8rem;
	}
	.text01 + .text01{
		margin-top : 10px;
	}
}

/*--------------------------------------------
triangle
---------------------------------------------*/

.triangle{
	position : relative;
	overflow : hidden;
}

.triangle:before , .triangle:after{
	content : "";
	position : absolute;
	border-style : solid;
	position : absolute;
	z-index : -1;
}

.triangle:before{
	border-color : transparent transparent transparent #00C5CD;
	left : 0;
}

.triangle:after{
	border-color : transparent transparent #b2edf0 transparent;
	left : 0;
	top : 0;
}

.triangle .bg{
	background-color : #b2edf0;
}

@media screen and (max-width: 999px){
	.triangle{
		padding-top : calc( 110 * 100vw / 768 );
	}
	.triangle:before{
		top : calc( 25 * 100vw / 768 );
		border-width : calc( 239 * 100vw / 768 ) 0 0 calc( 2570 * 100vw / 768 );
	}
	.triangle:after{
		border-width : 0 0 calc( 110 * 100vw / 768 ) 100vw;
	}
}

@media print,screen and (min-width: 1000px){
	.triangle:before{
		top : 40px;
	}
}

@media screen and (min-width: 1000px) and (max-width:1439px){
	.triangle{
		padding-top : calc( 182 * 100vw / 1440 );
	}
	.triangle:before{
		top : calc( 40 * 100vw / 1440 );
		border-width : calc( 239 * 100vw / 1440 ) 0 0 calc( 2570 * 100vw / 1440 );
	}
	.triangle:after{
		border-width : 0 0 calc( 182 * 100vw / 1440 ) 100vw;
	}
}

@media print,screen and (min-width: 1440px){
	.triangle{
		padding-top : 182px;
	}
	.triangle:before{
		top : 40px;
		border-width : 239px 0 0 2570px;
	}
	.triangle:after{
		border-width : 0 0 182px 100vw;
	}
}


/*--------------------------------------------
text アニメーション　背景色が伸びて出現
---------------------------------------------*/
/*全共通*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

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

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00C5CD;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/*--------------------------------------------
画像の拡大　
---------------------------------------------*/
/*　画像の拡大　*/

.zoomIn img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn a:hover img{/*hoverした時の変化*/
	transform: scale(1.1);/*拡大の値を変更したい場合はこの数値を変更*/
}

/*　画像のマスク　*/

.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}


/*--------------------------------------------
画像のキラッ　
---------------------------------------------*/
/*　キラッ　*/

.shine .mask{
	position: relative;/*キラッの基点となる位置を定義*/
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.shine .mask::before {
	position: absolute;
	content:"";
	width: 50%;/*キラッの横幅*/
	height: 100%;/*キラッの縦幅*/
	top: 0;/*.shine span.maskのトップ0を基点*/
	left: -75%;/*画面の見えていない左から右へ移動するスタート地点*/
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);/*背景白透過を斜めに*/
}

.shine .mask:hover::before {/*hoverした時の変化*/
	animation: shine 0.7s;/*アニメーションの名前と速度を定義*/
}

@keyframes shine {
	100% {
		left: 125%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}