@charset "utf-8";



/* ======================================================

 * publicCnav2.css

 * ------------------------------------------------------

 * @media print, screen and (min-width: 768px)

 * - Gnav

 * - Other

 * - Clearfix

 * Media Queries

 * Print

====================================================== */

body.is-active {

	overflow: hidden;

}

/* ------------------------------------------------------

	* fixedObject

------------------------------------------------------ */

.fixedObject {

	position: relative;

	top: 0;

	left: 0;

	z-index: 20;

	overflow-x: auto;

}



.fixedObject.fixed {

	position: fixed;



}



/* ------------------------------------------------------

	* header

------------------------------------------------------ */

header.spOnly.fixed {

	position: relative !important;

} 



@media print, screen and (min-width: 768px) {

	#header {

		position: relative;

	}

}



.headerScroll {

	position: fixed;

	left: 0;

	top: 0;

    border-bottom: 1px solid #ccc;

	display: flex;

	justify-content: center;

	align-items: baseline;

	height: 44px;

	width: 100%;

	background: #fff;

	z-index: 1001;

	opacity: 0;

	visibility: hidden;

	transition: .4s;

	font-family: "Noto Sans JP",sans-serif;

}



.headerScroll.is-active {

	visibility: visible;

	opacity: 1;

}



.headerScrollLogo {

	width: 76px;

	margin-inline: auto;

	align-self: center;

}



.headerScrollButton {

	position: absolute;

	top: 0;

	right: 0;

	background: none;

	width: 44px;

	height: 44px;

	border: none;

	z-index: 2;

}



.headerScrollButton::before,

.headerScrollButton > span,

.headerScrollButton::after {

	position: absolute;

	left: 0;

	right: 0;

	margin-inline: auto;

	width: 20px;

	height: 1px;

	background-color: #333;

	top: 50%;

	backface-visibility: hidden;

}



.headerScrollButton::before,

.headerScrollButton::after {

	content: "";

}



.headerScrollButton::before {

	margin-top: -7px;

}



.headerScrollButton::after {

	margin-top: 7px;

}



.headerScrollButton.is-active > span {

	display: none;

}



.headerScrollButton.is-active::before {

	rotate: 45deg;

	top: 30px;

}



.headerScrollButton.is-active::after {

	rotate: -45deg;

	top: 17px;

}



.headerScrollNav {

	position: fixed;

	top: 0;

	right: -100%;

	width: 347px;

	height: 100dvh;

	background-color: #EAEAEA;

	padding: 85px 40px;

	transition: .4s;

	z-index: 1;

}



.headerScrollNav.is-active {

	right: 0;

}



.headerScrollNavButton {

	margin-inline: auto;

	max-width: 260px;

}



.headerScrollNavButton > a {

	background-color: #EE9052;

	padding: 15px 35px 15px 20px;

	display: flex;

	border-radius: 100vmax;

	position: relative;

	transition: .4s;

	text-decoration: none !important;

}



.headerScrollNavButton > a::after {

	content: "";

	width: 19px;

	aspect-ratio: 19/12;

	position: absolute;

	right: 20px;

	top: 50%;

	translate: 0 -50%;



	background-color: #fff;

	mask-image: url(/public/common2/img/icon-arrow.svg);

	mask-position: center center;

	mask-repeat: no-repeat;

	mask-size: cover;

	transition: .4s;

}



.headerScrollNavButton > a > .text {

	color: #fff;

	font-size: 1.6rem;

	font-weight: 700;

}



.headerScrollNavLink {

	margin-top: 20px;

	text-align: center;

}



.headerScrollNavLink > a {

	text-decoration: none !important;

	display: inline-block;

}



.headerScrollNavLink > a > .text {

	color: #333;

	font-size: 1.4rem;

	font-weight: 700;

	letter-spacing: .04em;

	display: block;

	padding-right: 30px;

	position: relative;

}



.headerScrollNavLink > a > .text::after {

	content: "";

	width: 19px;

	aspect-ratio: 19/12;

	position: absolute;

	right: 0;

	top: 50%;

	translate: 0 -50%;



	background-color: #333;

	mask-image: url(/public/common2/img/icon-arrow.svg);

	mask-position: center center;

	mask-repeat: no-repeat;

	mask-size: cover;

	transition: .4s;

}



.headerScrollNavMenu {

	margin-top: 40px;

}



.headerScrollNavMenu > li {

	position: relative;

}



.headerScrollNavMenu > li:not(:first-child) {

	margin-top: 30px;

}



.headerScrollNavMenu > li::before {

	content: "";

	position: absolute;

	left: 0;

	top: 50%;

	translate: 0 -50%;

}



.headerScrollNavMenu > li._01::before {

	background: url(/public/common2/img/header_ic01.svg) no-repeat left top /cover;

	width: 18px;

	height: 20px;

	margin-left: 2px;

}



.headerScrollNavMenu > li._02::before {

	background: url(/public/common2/img/header_ic02.svg) no-repeat left top /cover;

	width: 24px;

	height: 16px;

}



.headerScrollNavMenu > li._03::before {

	background: url(/public/common2/img/header_ic03.svg) no-repeat left top /cover;

	width: 16px;

	height: 20px;

	margin-left: 3px;

}



.headerScrollNavMenu > li._04::before {

	background: url(/public/common2/img/header_ic04.svg) no-repeat left top /cover;

	width: 15px;

	height: 23px;

	margin-left: 3px;

}



.headerScrollNavMenu > li._05::before {

	background: url(/public/common2/img/header_ic07.svg) no-repeat left top /cover;

	width: 16px;

	height: 22px;

	margin-left: 3px;

}



.headerScrollNavMenu > li > a {

	text-decoration: none !important;

	color: #333 !important;

	font-size: 1.8rem;

	letter-spacing: .004em;

	position: relative;

	display: block;

}



.headerScrollNavMenu > li[class] {

	padding-left: 32px;

}



.headerScrollNavMenu > li > a::before,

.headerScrollNavMenu > li > a::after {

	content: "";

	position: absolute;

	top: 50%;

	translate: 0 -50%;

}



.headerScrollNavMenu > li > a::before {

	width: 32px;

	height: 32px;

	border-radius: 50%;

	right: 0;

	border: 1px solid #30C790;

}



.headerScrollNavMenu > li._01 > a::before {

	border-color: #8B7D59;

}



.headerScrollNavMenu > li._02 > a::before {

	border-color: #A0BA52;

}



.headerScrollNavMenu > li._03 > a::before {

	border-color: #6CABD1;

}



.headerScrollNavMenu > li._04 > a::before {

	border-color: #9189CA;

}



.headerScrollNavMenu > li._05 > a::before {

	border-color: #4F6CB0;

}



.headerScrollNavMenu > li > a::after {

	content: "";

	width: 12px;

	height: 13px;

	position: absolute;

	right: 10px;

	rotate: -90deg;



	background-color: #30C790;

	mask-image: url(/public/common2/img/icon-menu.svg);

	mask-position: center center;

	mask-repeat: no-repeat;

	mask-size: cover;

	transition: .4s;

}



.headerScrollNavMenu > li._01 > a::after {

	background-color: #8B7D59;

}



.headerScrollNavMenu > li._02 > a::after {

	background-color: #A0BA52;

}



.headerScrollNavMenu > li._03 > a::after {

	background-color: #6CABD1;

}



.headerScrollNavMenu > li._04 > a::after {

	background-color: #9189CA;

}



.headerScrollNavMenu > li._05 > a::after {

	background-color: #4F6CB0;

}



.headerScrollBg {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100dvh;

    transition: .4s;

	opacity: 0;

	visibility: hidden;

}



.headerScrollBg.is-active {

	opacity: 1;

	visibility: visible;

}



@media print, screen and (min-width: 768px) {

	.headerScroll {

		display: none;

	}

}



/* ------------------------------------------------------

	* Gnav

------------------------------------------------------ */

.GnavNew {

	width: 100%;

	background-color: #fff;

	border-bottom: solid 1px #192f68;

}



.GnavNew *,

.GnavNew *::before,

.GnavNew *::after {

	box-sizing: border-box;

}

	

.GnavBodyNew {

	width: 800px;

	margin: 0 auto;

}



.gnavList {

	display: flex;

	width: 100%;

}



.gnavList > li {

	position: relative;

	display: table;

}



.gnavList > li > a {

	display: table-cell;

	font-size: 1.2rem;

	height: 40px;

	color: #333;

	text-decoration: none;

	vertical-align: middle;

}



.gnavList > li.nav01 > a,

.gnavList > li.nav02 > a,

.gnavList > li.nav03 > a,

.gnavList > li.nav04 > a,

.gnavList > li.nav07 > a {

	padding-inline: 30px 16px;

}



.gnavList > li.nav01 > a {

	width: 116px;

	background: url(/public/common2/img/header_ic01.svg) no-repeat 10px 50%;

}



.gnavList > li.nav02 > a {

   	width: 127px;

	padding-left: 40px;

	background: url(/public/common2/img/header_ic02.svg) no-repeat 10px 50%;

}



.gnavList > li.nav03 > a {

	width: 127px;

	background: url(/public/common2/img/header_ic03.svg) no-repeat 10px 50%;

}



.gnavList > li.nav04 > a {

	width: 100px;

	background: url(/public/common2/img/header_ic04.svg) no-repeat 10px 50%;

}



.gnavList > li.nav07 > a {

	width: 156px;

	background: url(/public/common2/img/header_ic07.svg) no-repeat 10px 50%;

}



.gnavList > li.nav01.on > a:after,

.gnavList > li.nav01 > a:hover:after,

.gnavList > li.nav02.on > a:after,

.gnavList > li.nav02 > a:hover:after,

.gnavList > li.nav03.on > a:after,

.gnavList > li.nav03 > a:hover:after,

.gnavList > li.nav04.on > a:after,

.gnavList > li.nav04 > a:hover:after,

.gnavList > li.nav07.on > a:after,

.gnavList > li.nav07 > a:hover:after {

	content: "";

	position: absolute;

	bottom: 0;

	left: 10px;

	display: block;

	height: 4px;

}



.gnavList > li.nav01.on > a:after,

.gnavList > li.nav01 > a:hover:after {

	width: 82px;

	background: #8b7d59;

}



.gnavList > li.nav02.on > a:after,

.gnavList > li.nav02 > a:hover:after {

	width: 95px;

	background: #a0ba52;

}



.gnavList > li.nav03.on > a:after,

.gnavList > li.nav03 > a:hover:after {

	width: 95px;

	background: #6db6d1;

}



.gnavList > li.nav04.on > a:after,

.gnavList > li.nav04 > a:hover:after {

	width: 60px;

	background: #9189ca;

}



.gnavList > li.nav07.on > a:after,

.gnavList > li.nav07 > a:hover:after {

	width: 105px;

	background: #4e6cb0;

}



.gnavList > li.nav05 > a {

	width: 95px;

	text-align: center;

}



.gnavList > li.nav06 > a {

	width: 95px;

	text-align: center;

}



.gnavList > li.nav05.on > a:after,

.gnavList > li.nav05 > a:hover:after {

	content: "";

	position: absolute;

	bottom: 0;

	left: 50%;

	display: block;

	width: 4em;

	height: 4px;

	margin-left: -2em;

	background: #3578b7;

}



.gnavList > li.nav06.on > a:after,

.gnavList > li.nav06 > a:hover:after {

	content: "";

	position: absolute;

	bottom: 0;

	left: 50%;

	display: block;

	width: 6em;

	height: 4px;

	margin-left: -3em;

	background: #e8823e;

}



.gnavList > li.nav05 > a:before,

.gnavList > li.nav06 > a:before {

	content: "";

	position: absolute;

	top: 50%;

	left: 0;

	display: block;

	width: 1px;

	height: 30px;

	margin-top: -15px;

	background: #ccc;

}



@media print, screen and (min-width: 768px) {

	.GnavBodyNew {

		width: 1000px;

	}



	.gnavList > li > a {

		height: 58px;

		font-size: 1.6rem;

	}

	

	.gnavList > li.nav01 > a,

	.gnavList > li.nav02 > a,

	.gnavList > li.nav03 > a,

	.gnavList > li.nav04 > a,

	.gnavList > li.nav07 > a {

		padding-inline: 30px;

	}



	.gnavList > li.nav01 > a {

		width: 168px;

	}



	.gnavList > li.nav02 > a {

		width: 185px;

		padding-left: 43px;

	}



	.gnavList > li.nav03 > a {

		width: 185px;

	}



	.gnavList > li.nav04 > a {

		width: 150px;

	}



	.gnavList > li.nav07 > a {

		width: 210px;

	}



	.gnavList > li.nav01.on > a:after, 

	.gnavList > li.nav01 > a:hover:after {

		width: 103px;

	}



	.gnavList > li.nav02.on > a:after,

	.gnavList > li.nav02 > a:hover:after {

		width: 115px;



	}



	.gnavList > li.nav03.on > a:after,

	.gnavList > li.nav03 > a:hover:after {

		width: 115px;

	}



	.gnavList > li.nav04.on > a:after,

	.gnavList > li.nav04 > a:hover:after {

		width: 90px;

	}



	.gnavList > li.nav07.on > a:after,

	.gnavList > li.nav07 > a:hover:after {

		width: 130px;

	}



	.gnavList > li.nav05 > a {

		width: 105px;

		font-size: 1.6rem;

	}



	.gnavList > li.nav06 > a {

		width: 175px;

	}

}