@charset "UTF-8";
/* CSS Document */
html {
	font-size: 62.5%;
}
body {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #123f78;
	background: #f3f1ef;
	margin: 0;
}

@media screen and (max-width: 768px) {
	body {
		font-size: 1.4rem;
	}
}

@media screen and (min-width: 769px) {
	body {
		font-size: 1.6rem;
	}
}


/* -------------------------
オープニングロゴ
------------------------- */
.opening {
  position: fixed;
  inset: 0;
  background: #f4f3f1;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: openingFade 1.8s ease forwards;
}
.opening-logo {
  width: 180px;
  animation: logoMove 1.8s ease forwards;
}

@keyframes logoMove {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }

  30% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  70% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(-42vh) scale(0.45);
    opacity: 0;
  }
}

@keyframes openingFade {
  0%, 75% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
	


/* -------------------------
ヘッダーロゴ
------------------------- */
@media screen and (max-width:768px){
	.header-logo {
		width: 120px;
		margin: 56px auto 0;
	}
}

@media screen and (min-width:769px){
	.header-logo {
		width: 150px;
		margin: 72px auto 0;
	}
}

	
	

/* -------------------------
フッター
------------------------- */	
.contact__inner{
	margin:0 auto;
	background:#fff;
	border-radius: 8px;
}
.contact__image{
	flex-shrink: 0;
}
.contact__image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.contact__text{
	margin:24px 0;
	line-height:1.8;
}
.contact__text p+p{
	margin-top:16px;
}

/* LINEボタン */
.line-btn{
	display:inline-flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	background:#06c755;
	color:#fff;
	padding:8px 8px 8px 24px;
	border-radius:999px;
}
.line-btn-icon{
	width:40px;
	height:40px;
	background:#fff;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#06c755;
}

/* 下のリンク */
.footer__nav{
	gap:8px;
}
.footer__link{
	background:#fff;
	border-radius:8px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	color:#123f78;
	font-weight:700;
	overflow:hidden;
}
.link-btn-icon {
	background:#c91f25;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	border-radius: 8px;
}
.footer__link i{
	color:#fff;
}

/* copyright */
.copyright{
	display:block;
	margin:0 auto;
	border-top:2px solid #123f78;
	text-align:center;
	color:#123f78;
}

@media screen and (max-width:768px){
	.contact__inner{
		width: calc(100% - 48px);
	}
	.contact__content{
		padding: 40px 24px 32px;
	}
	.contact__image img{
		border-radius: 0 0 8px 8px;
	}
	.footer__nav{
		width: calc(100% - 48px);
		margin:8px auto 32px;
	}
	.footer__link{
		padding: 8px 8px 8px 24px;
	}
	.line-btn{
		width: 100%;
	}
	.link-btn-icon {
		width:40px;
		height:40px;
	}
	.footer__link:first-child {
		margin-bottom: 8px;
	}
	.copyright{
		width:calc(100% - 48px);
		padding:32px 0;
		font-size:10px;
	}
}
@media screen and (min-width:769px){
	.contact__inner{
		width:1080px;
		padding:16px;
		display:flex;
		justify-content:space-between;
		align-items: stretch;
	}
	.contact__content{
		flex:1;
		padding: 40px 56px 40px 40px;
	}
	.contact__image{
		width: 500px;
	}
	.contact__image img{
		border-radius: 8px;
	}
	.footer__nav{
		width:1080px;
		margin:8px auto 64px;
		display:grid;
		grid-template-columns:1fr 1fr;
	}
	.footer__link{
		padding: 8px 8px 8px 48px;
	}
	.link-btn-icon {
		width:64px;
		height:64px;
	}
	.copyright{
		width:1080px;
		padding:48px 0;
		font-size:12px;
	}
}