@charset "UTF-8";
/*
	BASE
*******************************/

/*
font-family: "Noto Sans JP", sans-serif;
font-family: "Zen Kaku Gothic New", sans-serif;
font-family: "Poppins", sans-serif;
*/
* {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,'Hiragino Kaku Gothic Pro',Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
	margin: 0;
	padding: 0;
	box-sizing:border-box;
	font-feature-settings: "palt";
	line-height:1;
}

.font_jp {
	font-family: "Shippori Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.font_en {
	font-family: "Cormorant", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}

html {
	font-size:62.5%;
	line-height:1;
	body {
		font-size:1.6rem;
		font-weight:500;
		background-color:var(--color_main);
		img {
			-webkit-backface-visibility: hidden;
			vertical-align:bottom;
			line-height:0;
			max-width: 100%;
			height: auto;
		}
		p,th,td,dt,dd,li,h1,h2,h3,h4,h5,h6,label {
			color:#000000;
		}
		a {
			color:#000000;
			text-decoration:none;
			outline:none;
			border:none;
			img {
				outline:none;
				border:none;
				-webkit-backface-visibility: hidden;
			}
		}
		area {
			border:none;
			outline:none;
		}
		.clear { clear:both;}
	} 
}

:root {
	--color_def: #000000;
	--color_main: #021540;
	--color_sub: #0552FE;
	--color_sub2: #052977;
	--color_sub3: #1F3A5F;
	--color_white: #FFFFFF;
	--color_gray: #333333;
}

/*//////////////////////////////////////////////////////////////////////////*/

/*
	BASE LAYOUT
******************/

.wrap {
	.contents {
		max-width:1140px;
		width: calc(100% - 60px);
		margin:0 auto;
		p {
			font-size: 1.6rem;
			line-height: 2.2;
		}
		.btn_more {
			font-size:1.8rem;
			color:var(--color_gray);
			background-color:var(--color_white);
			height:2.8em;
			width:100%;
			max-width:300px;
			display:grid;
			grid-template-columns:1em auto 2.6em;
			align-items:center;
			grid-column-gap:.75em;
			padding:0 1em;
			&::before {
				content:'';
				aspect-ratio:1;
				background-color:var(--color_sub);
			}
		}
	}
}


#contact {
	.wrap {
		background-color:var(--color_sub);
		padding:120px 0;
		.contents {
			.contents_inner {
				display:grid;
				grid-template-columns:1fr 40%;
				align-items:center;
				.detail {
					h2 {
						font-size:3.6rem;
						line-height:1;
						color:var(--color_white);
						display:grid;
						justify-items: start;
						margin-bottom:1.2em;
						.font_jp {
							font-weight:500;
							margin-top:-.8em;
						}
						.font_en {
							font-family: "Cormorant", serif;
							font-size:10rem;
							color:rgba(255,255,255,.2);
							letter-spacing: normal;
						}
					}
					p {
						font-size:1.8rem;
						line-height:2;
						margin-bottom:2em;
					}
				}
				.cta {
					font-size:2.2rem;
					display:grid;
					grid-row-gap:3em;
					li {
						a {
							display:grid;
							grid-template-columns:1.5em 1fr;
							align-items:center;
							grid-column-gap:.66em;
							color:var(--color_white);
							padding-bottom:1em;
							position: relative;
							&::before {
								content:'';
								display:block;
								width:100%;
								height:1px;
								background-color:var(--color_white);
								position:absolute;
								left:0;
								bottom:0;
							}
							&::after {
								content:'';
								display:block;
								width:2.5em;
								height:1px;
								background-color:var(--color_white);
								position:absolute;
								right:0;
								bottom:0;
								transform-origin:right bottom;
								transform:rotate(25deg);
							}
						}
						&.tel {
							a {
								span {
									font-size:3.0rem;
								}
							}
						}
					}
				}
			}
		}
	}
}

@media ( hover:hover) {

	a {
		transition: .3s;
		&:hover {
			text-decoration: none;
			opacity: .75;
		}
	}

	.wrap {
		.contents {
			.btn_more {
				transition:.3s;
				img {
					transition: .3s;
				}
				&:hover {
					color:var(--color_sub2);
					opacity: 1;
					img {
						transform: translateX(.33em);
					}
				}
			}
		}
	}

	#contact {
		.wrap {
			.contents {
				.contents_inner {
					.cta {
						li {
							a {
								&::before {
									transition:.3s;
								}
								&::after {
									transition:.3s;
								}
								&:hover {
									&::before {
										width:calc(100% + 5px);
									}
									&::after {
										transform:translateX(5px) rotate(20deg);
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
}


@media screen and (max-width:1024px){

	.wrap {
		.contents {
			width: calc(100% - 50px);
		}
	}

	#contact {
		.wrap {
			padding:90px 0;
			.contents {
				.contents_inner {
					grid-template-columns:1fr 45%;
					grid-column-gap:5%;
					.detail {
						h2 {
							font-size:3.0rem;
							.font_en {
								font-size:8rem;
							}
						}
						p {
							font-size:1.6rem;
						}
					}
					.cta {
						font-size:1.8rem;
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:768px){

	.wrap {
		.contents {
			width: calc(100% - 40px);
			p {
				font-size: 1.4rem;
				line-height: 1.8;
			}
			.btn_more {
				font-size:1.6rem;
				max-width:250px;
			}
		}
	}


	#contact {
		.wrap {
			padding:50px 0;
			.contents {
				.contents_inner {
					grid-template-columns:1fr;
					justify-items:center;
					.detail {
						display:contents;
						h2 {
							font-size:min(6.4vw,3rem);
							width:100%;
							max-width:400px;
							.font_en {
								font-size:min(16vw,8rem);
							}
						}
						p {
							font-size:1.5rem;
							line-height:2;
						}
						.btn_more {
							order:2;
							margin:50px auto 0;
						}
					}
					.cta {
						font-size:min(4.8vw,1.8rem);
						grid-row-gap:2em;
						width:100%;
						max-width:400px;
						margin:0 auto;
						li {
							&.tel {
								a {
									span {
										font-size:min(9vw,3.0rem);
									}
								}
							}
						}
					}
				}
			}
		}
	}
	

}


@media screen and (max-width:1024px) {
    .pcOnly2 {
    	display:none !important;
    }
}
@media screen and (max-width:768px) {
    .pcOnly {
    	display:none !important;
    }
    .tbOnly {
    	display:none !important;
    }
}
@media screen and (min-width:1025px) {
    .tbOnly {
    	display:none !important;
    }
    .sptbOnly {
    	display:none !important;
    }
}
@media screen and (min-width:769px) {
    .spOnly {
    	display:none !important;
    }
}