/* --------------------------------------------------------------------------------------
	ヘッダー
--------------------------------------------------------------------------------------- */

header {
	animation: HeaderShadow 1s both linear;
	animation-range: 0 8px;
	animation-timeline: scroll(root block);
	background-color: rgba(255, 255, 255,.878);
	box-shadow: 0 0 0 rgba(0,0,0,0);
	display: flex;
	height: 80px;
	justify-content: space-between;
	left: 0;
	padding: 0 64px;
	position: sticky;
	top: 0;
	transition: all .3s ease-in-out;
	width: 100%;
	z-index: 999;
}

@keyframes HeaderShadow {
	from { box-shadow: 0 0 0 rgba(0,0,0,0); }
	to   { box-shadow: 0 4px 15px rgba(0,0,0,.04); }
}

header h1 {
	margin-top: 20px;
	/* min-width: 272px; */
}

header nav {
	align-items: center;
	display: flex;
}

header nav .gnavi {
	display: flex;
	height: 100%;
	margin-right: 60px;
}

header nav .gnavi .menu {
	align-items: center;
	display: flex;
}

header nav .gnavi .menu > p,
header nav .gnavi .menu > a {
	align-items: center;
	color: var(--color-text);
	cursor: pointer;
	display: flex;
	font-feature-settings: 'palt';
	font-weight: var(--SemiBold);
	height: 100%;
	letter-spacing: 1px;
	overflow: hidden;
	padding: 0 21px;
	position: relative;
	transition: all .3s ease-in-out;
}

header nav .gnavi .menu .dropdown {
	background-color: var(--color-orange);
	opacity: 0;
	position: absolute;
	text-align: left;
	top: 80px;
	transform: translateY(-5px);
	transition: all .4s ease-in-out;
	visibility: hidden;
}

header nav .gnavi .menu.open p {
	background-color: var(--color-orange);
	color: #fff;
}

header nav .gnavi .menu.open .dropdown {
	opacity: 1;
	transform: translateY(0);
	visibility: inherit;
}

header nav .gnavi .menu .dropdown li a {
	background: url(../img/common/icon_arrow.svg) no-repeat calc(100% - 24px) center / 18px auto;
	color: #fff;
	display: block;
	min-width: 280px;
	padding: 16px 24px;
	position: relative;
	transition: all .3s ease-in-out;
}

header nav .gnavi .menu .dropdown li a::after {
	background-color: var(--color-green);
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: .3s;
	width: 0;
	z-index: -1;
}

header nav .gnavi .menu .dropdown li:nth-of-type(n+2) a::before {
	border-top: 1px solid #fff;
	content: '';
	display: block;
	height: 1px;
	left: 24px;
	position: absolute;
	top: 0;
	width: calc(100% - 48px);
}

@media (max-width: 1320px) {

	header { padding: 0 1.533vw; }
}

@media (max-width: 1230px) {

	header nav .gnavi { margin-right: .333vw; }

	header nav .gnavi .menu > p,
	header nav .gnavi .menu > a {
		padding: 0 1.333vw;
		white-space: nowrap;
	}

	header nav .banner a { min-width: 16.333vw; }

	header nav .orange a {
		padding-left: 1.333vw;
		padding-right: 3.333vw;
	}
}

@media (min-width: 769px) {

	header nav .gnavi .menu > p:hover,
	header nav .gnavi .menu > a:hover {
		background-color: var(--color-orange);
		color: #fff;
		text-decoration: none;
	}

	header nav .gnavi .menu .dropdown li a:hover { text-decoration: none; }

	header nav .gnavi .menu .dropdown li:hover a::before,
	header nav .gnavi .menu .dropdown li:hover + li a::before { display: none; }

	header nav .gnavi .menu .dropdown li a:hover::after { width: 100%; }
}

header nav .banner:last-of-type { margin-left: 24px; }

.hamburger-meun { display: none; }

@media (max-width: 900px) {

	header nav {
		transform: scale(.9);
		transform-origin: center right;
	}

}

@media (max-width: 768px) {

	header {
		animation: none;
		display: block;
		height: auto;
		padding: 0;
	}

	header h1 { display: none; }

	header nav {
		display: block;
		height: 0;
		overflow: hidden;
		padding: 8vw 5.25vw;
		position: fixed;
		top: 0;
		transform: scale(1);
		transition: all .4s cubic-bezier(.37, 0, .63, 1);
		width: 100%;
		z-index: -1111;
	}

	header nav.open {
		height: 100%;
		z-index: 100;
	}

	header nav.transition-completed { z-index: 100; }

	header nav::after {
		background-color: var(--color-orange);
		content: '';
		display: block;
		height: 0;
		position: absolute;
		right: 0;
		top: 0;
		transition: all .4s cubic-bezier(.37, 0, .63, 1);
		width: 0;
		z-index: -1;
	}

	header nav.open::after {
		height: 100vh;
		width: 100vw;
	}

	header nav .gnavi {
		flex-wrap: wrap;
		height: auto;
		justify-content: space-between;
		margin-bottom: 5vw;
		margin-right: 0;
		margin-top: 7.333vw;
	}

	header nav .gnavi .menu {
		display: block;
		text-align: left;
		width: 47%;
	}

	header nav .gnavi .menu > p,
	header nav .gnavi .menu > a {
		color: #fff;
		font-size: 3.6vw;
		height: auto;
		padding: 0;
	}

	header nav .gnavi .menu .dropdown {
		background-color: transparent;
		margin-top: 1.333vw;
		opacity: 1;
		position: relative;
		top: 0;
		transform: none;
		visibility: inherit;
	}

	header nav .gnavi .menu .dropdown li a {
		background-position: right center;
		background-size: 3.5vw auto;
		font-size: 3vw;
		min-width: 0px;
		padding: 1.75vw 0;
	}

	header nav .gnavi .menu .dropdown li:nth-of-type(n+2) a { border-top: 1px solid #fff; }

	header nav .gnavi .menu .dropdown li:nth-of-type(n+2) a::before,
	header nav .gnavi .menu .dropdown li a::after { display: none; }

	header nav .banner:last-of-type {
		margin-left: 0;
		margin-top: 4vw;
	}

	header nav .banner:last-of-type a { border: 1px solid #fff; }

	header nav .gnavi .menu,
	header nav .banner {
		opacity: 0;
		transform: translateY(-10px);
		transition: all .6s cubic-bezier(.5, 1, .89, 1);
		visibility: hidden;
	}

	header nav .gnavi .menu.open,
	header nav .banner.open {
		opacity: 1;
		transform: translateY(0);
		visibility: inherit;
		z-index: 1;
	}

	.hamburger-meun {
		background-color: var(--color-orange);
		display: block;
		height: 15vw;
		position: fixed;
		right: 0;
		top: 0;
		width: 15vw;
		z-index: 111;
	}

	.hamburger-meun span {
		background-color: #fff;
		content: '';
		display: block;
		height: 3px;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
		transition: all .3s ease-in-out;
		width: 5.75vw;
	}

	.hamburger-meun span:first-of-type { margin-top: -10px; }
	.hamburger-meun span:last-of-type { margin-top: 10px; }

	.hamburger-meun.open span:nth-of-type(2) { opacity: 0; }

	.hamburger-meun.open span:first-of-type { animation: active-bar-top .75s forwards; }
	.hamburger-meun.open span:last-of-type { animation: active-bar-bottom .75s forwards; }

	.hamburger-meun.close span:first-of-type { animation: inactive-bar-top .75s forwards; }
	.hamburger-meun.close span:last-of-type { animation: inactive-bar-bottom .75s forwards; }

	@keyframes inactive-bar-top {
		0% { margin-top: 0; transform: translate(-50%,-50%) rotate(45deg); }
		50% { margin-top: 0; transform: translate(-50%,-50%) rotate(0); }
		100% { margin-top: -10px; transform: translate(-50%,-50%) rotate(0); }
	}

	@keyframes inactive-bar-bottom {
		0% { margin-top: 0; transform: translate(-50%,-50%) rotate(-45deg); }
		50% { margin-top: 0; transform: translate(-50%,-50%) rotate(0); }
		100% { margin-top: 10px; transform: translate(-50%,-50%) rotate(0); }
	}

	@keyframes active-bar-top {
		0% { margin-top: -10px; transform: translate(-50%,-50%) rotate(0); }
		50% { margin-top: 0; transform: translate(-50%,-50%) rotate(0); }
		100% { margin-top: 0; transform: translate(-50%,-50%) rotate(45deg); }
	}

	@keyframes active-bar-bottom {
		0% { margin-top: 10px; transform: translate(-50%,-50%) rotate(0); }
		50% { margin-top: 0; transform: translate(-50%,-50%) rotate(0); }
		100% { margin-top: 0;transform: translate(-50%,-50%) rotate(-45deg); }
	}
}

/* --------------------------------------------------------------------------------------
	共有パーツ
--------------------------------------------------------------------------------------- */

.box {
	margin-left: auto;
	margin-right: auto;
	max-width: 1100px;
	position: relative;
	text-align: left;
	width: 100%;
	z-index: 1;
}

@media (max-width: 1150px) {

	.box {
		padding-left: 5.333vw;
		padding-right: 5.333vw;
	}
}

.font-inter {
	font-family: var(--font-inter);
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: var(--Regular);
}

.main-title {
	text-align: center;
}

.main-title strong {
	display: block;
	font-size: 4rem;
	font-weight: var(--Bold);
	letter-spacing: 2px;
}

.main-title strong + span {
	color: #a7a7a7;
	display: block;
	font-size: 1.8rem;
	font-weight: var(--Bold);
	letter-spacing: 0;
}

.main-title .font-inter { font-size: 4.8rem; }

.dotted-title {
	font-size: 2.4rem;
	font-weight: var(--Bold);
	padding-left: 28px;
	position: relative;
}

.dotted-title::before {
	background-color: var(--color-orange);
	border-radius: 100vw;
	content: '';
	display: block;
	height: 17px;
	left: 0;
	position: absolute;
	top: 10px;
	width: 17px;
}

.fadeIn { opacity: 1; }
.fadeOut { opacity: 0; }

@media (max-width: 768px) {

	.box {
		padding-left: 0;
		padding-right: 0;
		width: auto;
	}

	.main-title strong { font-size: 8vw; }

	.dotted-title {
		font-size: 5vw;
		padding-left: 6.333vw;
	}

	.dotted-title::before {
		height: 3.625vw;
		width: 3.625vw;
	}
}

/* --------------------------------------------------------------------------------------
	デバイス切り替え
--------------------------------------------------------------------------------------- */

.sp { display: none; }

@media (max-width: 768px) {

	.pc { display: none; }
	.sp { display: block; }
}

/* --------------------------------------------------------------------------------------
	バナー
--------------------------------------------------------------------------------------- */

.banner a {
	align-items: center;
	background: #fff url(../img/common/icon_arrow.svg) no-repeat calc(100% - 14px) center / 18px auto;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	font-weight: var(--Bold);
	justify-content: center;
	min-height: 56px;
	min-width: 232px;
	position: relative;
	text-align: center;
	transition: all .3s ease-in-out;
	width: 100%;
}

.banner.no-arrow a { background-image: none; }
.banner.green a { background-color: var(--color-green); }
.banner.orange a { background-color: var(--color-orange); }

.banner a dt {
	font-size: 2rem;
	font-weight: var(--Bold);
	line-height: 1;
}

.banner a dd { font-size: 1.2rem; }

.banner.big a {
	background-position: calc(100% - 24px) center;
	background-size: 25px auto;
	border-radius: 16px;
	min-height: 144px;
}

.banner.small a {
	background-position: calc(100% - 24px) center;
	background-size: 25px auto;
	border-radius: 16px;
	min-height: 144px;
}

.banner.big a dt { font-size: 2.4rem; }

.banner.big a dd {
	font-size: 1.6rem;
	letter-spacing: .6px;
	margin-top: 8px;
}

.banner-area {
	padding-bottom: 100px;
	padding-top: 68px;
	position: relative;
	text-align: center;
	z-index: 10;
}

.banner-area::before {
	background-image: linear-gradient(175deg, rgb(248, 236, 205) 0%, rgb(248, 225, 144) 44%, rgb(247, 214, 82) 99%);
	content: '';
	display: block;
	height: 100%;
	left: -290px;
	position: absolute;
	top: 0;
	width: calc(100% + 580px);
	z-index: -1;
}

.banner-area .banner-area-head {
	color: #313131;
	font-size: 4rem;
	font-weight: var(--Bold);
}

.banner-area ul {
	align-items: center;
	display: flex;
	gap: 0 28px;
	justify-content: center;
	margin-top: 50px;
}

.banner-area li { width: 100%; }

.banner-arrow a {
	background: url(../img/common/icon_arrow_orange.svg) no-repeat right center / 18px auto;
	color: var(--color-text);
	display: inline-block;
	padding-right: 42px;
}

.over { transition: all .3s ease-in-out; }

@media (min-width: 768px) {

	.over:hover {
		opacity: .6;
		text-decoration: none;
	}

	.banner a:hover {
		background-color: var(--color-orange);
		color: #fff;
		text-decoration: none;
	}

	.banner.green a:hover { background-color: #118105; }
	.banner.orange a:hover { background-color: #e57300; }

}

@media (max-width: 768px) {

	.banner a {
		background-position: calc(100% - 5vw) center;
		background-size: 4vw auto;
		border-radius: 1.25vw;
		font-size: 4vw;
		min-height: 17.5vw;
		min-width: 72vw;
	}

	.banner a dt { font-size: 4.333vw; }

	.banner a dd {
		font-size: 3vw;
		margin-top: .75vw;
	}

	.banner.big a {
		background-position: calc(100% - 6vw) center;
		background-size: 5.75vw auto;
		border-radius: 2vw;
		min-height: 24.125vw;
	}

	.banner.big a dt { font-size: 5.25vw; }

	.banner.big a dd {
		font-size: 3.75vw;
		margin-top: 1.5vw;
	}

	.banner-arrow a {
		background-size: 4vw auto;
		font-weight: var(--Bold);
		padding-right: 10vw;
	}

	.banner-area { padding: 13.75vw 5vw 15.875vw; }

	.banner-area::before {
		background-image: linear-gradient(175deg, rgb(248, 236, 205) 0%, rgb(248, 225, 144) 44%, rgb(242 218 124) 99%);
		left: 0;
		width: 100%;
	}

	.banner-area .banner-area-head { font-size: 8vw; }

	.banner-area ul {
		display: block;
		gap: 0;
		margin-top: 6.25vw;
	}

	.banner-area  li:nth-of-type(n+2) { margin-top: 6vw; }
}

/* --------------------------------------------------------------------------------------
	アニメーション
--------------------------------------------------------------------------------------- */

.slide-item,
.slide-item-top {
	/* filter: blur(10px); */
	opacity: 0;
	transition: all 1s cubic-bezier(.5, 1, .89, 1);
}

.slide-top { transform: translateY(-50px); }
.slide-bottom { transform: translateY(50px); }

.slide-left {
	opacity: 0;
	transform: translateX(-50px);
}

.slide-right  {
	opacity: 0;
	transform: translateX(50px);
}

.open-left { transform: translateX(-100vw); transition: all .3s cubic-bezier(0, .8, .56, 1);}
.open-right { transform: translateX(100vw); transition: all .3s cubic-bezier(0, .8, .56, 1); }

.slide-top-animate,
.slide-bottom-animate,
.slide-right-animate,
.slide-left-animate,
.slide-right-animate::after,
.slide-left-animate::before,
.open-left-animate,
.open-right-animate {
	/* filter: blur(0); */
	opacity: 1;
	transform: translateY(0) translateX(0);
}


@keyframes fade-animate {
	0% {
		opacity: 0;
		transform: translateY(150px);
	}

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

/* --------------------------------------------------------------------------------------
	フッター
--------------------------------------------------------------------------------------- */

footer {
	background-color: var(--color-deep-blue);
	padding-top: 75px;
	position: relative;
	z-index: 30;
}

footer,
footer a,
footer a:hover { color: #fff; }



footer .footer-content {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
}

footer .footer-content .logo {
	align-items: flex-end;
	display: flex;
}

footer .footer-content .logo:hover { text-decoration: none; }

footer .footer-content .logo p {
	font-weight: var(--Bold);
	letter-spacing: 1px;
	line-height: 1.6;
	margin-left: 28px;
}

footer .footer-content nav {
	display: flex;
	gap: 0 50px;
	margin-top: 22px;
}

footer .footer-content nav dt,
footer .footer-content nav dt a { font-weight: var(--Bold); }

footer .footer-content nav dd a { font-size: 1.4rem; }

footer .footer-content nav dt:nth-of-type(n+2) { margin-top: 14px; }
footer .footer-content nav dd { margin-top: 14px; }

footer .footer-content nav dt:nth-of-type(n+2) + dd,
footer .footer-content nav dd + dd { margin-top: 6px; }

footer .address {
	font-size: 1.4rem;
	margin-top: -30px;
}

footer .copyright {
	align-items: center;
	border-top: 1px solid #c1c1c1;
	display: flex;
	font-size: 1.2rem;
	justify-content: space-between;
	margin-top: 42px;
	padding-bottom: 24px;
	padding-top: 21px;
}

footer .copyright ul {
	display: flex;
	gap: 36px;
}

@media (max-width: 768px) {

	footer { padding: 12.5vw 5vw 0; }

	footer .footer-content {
		flex-wrap: wrap;
		padding: 0 4vw;
	}

	footer .footer-content .logo {
		margin-top: 11.25vw;
		order: 2;
	}

	footer .footer-content .logo > div { width: 31.75vw; }

	footer .footer-content .logo p {
		font-size: 3.5vw;
		margin-left: 4vw;
	}

	footer .footer-content nav {
		display: flex;
		flex-direction: column;
		gap: 0;
		letter-spacing: 1px;
		margin-top: 0;
		order: 1;
		position: relative;
		width: 100%;
	}

	footer .footer-content nav dl:nth-of-type(n+2) { margin-top: 6.25vw; }

	footer .footer-content nav dl:last-of-type {
		margin-top: 0;
		position: absolute;
		right: 0;
		top: 0;
	}

	footer .footer-content nav dt { font-size: 3.625vw; }

	footer .footer-content nav dt:nth-of-type(n+2),
	footer .footer-content nav dd { margin-top: 2.75vw; }

	footer .footer-content nav dd a { font-size: 3.25vw; }

	footer .footer-content nav dt:nth-of-type(n+2) + dd,
	footer .footer-content nav dd + dd { margin-top: 1vw; }

	footer .address {
		font-size: 3.25vw;
		letter-spacing: 1px;
		margin-top: 4.75vw;
		padding: 0 4vw;
	}

	footer .copyright {
		flex-direction: column;
		flex-wrap: wrap;
		margin-top: 5.25vw;
		padding-top: 3.75vw;
	}

	footer .copyright ul {
		gap: 0 4vw;
		order: 1;
	}

	footer .copyright small {
		font-size: 3.2vw;
		margin-top: 2.5vw;
		order: 2;
		white-space: nowrap;
	}
}