@charset "UTF-8";

/* Basic Structure
------------------------- */
body {
	padding-top: 100px;
}
.skin {
	width: 1040px;
	margin: auto;
	padding: 0 20px;
}
#chest {
	width: 100%;
	overflow: hidden;
}

.flexbox-1to1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 0 0 50px;
}
.flexbox-1to2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 0 0 50px;
}
.flexbox-1to3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 0 0 50px;
}
.flexbox-1to1 figure,
.flexbox-1to2 figure,
.flexbox-1to3 figure {
	width: 100%;
}
.flexbox-1to1 figure img,
.flexbox-1to2 figure img,
.flexbox-1to3 figure img {
	width: 100%;
	height: auto;
}


/* TOP
------------------------- */
#top {
	transition: 0.4s;
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100px;
	padding: 0 0 0 20px;
	background-color: #fff;
}
#top.scroll {
	height: 50px;
}
#innerTop {
	display: flex;
	width: 100%;
}
#outerSiteId {
	flex: 1 1 768px;
	display: flex;
	align-items: center;
}
#SiteId__anchor {
	color: #000;
}
#siteId {
	transition: 0.4s;
	display: flex;
	align-items: center;
	line-height: 1.5;
	font-weight: 600;
	font-size: 12px;
	font-family:
		"Noto Sans JP",
		"游ゴシック Medium", "Yu Gothic Medium",
		"游ゴシック体", "YuGothic",
		"ヒラギノ角ゴシック", "Hiragino Sans",
		"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
		"メイリオ", "Meiryo",
		sans-serif;
}
#siteId:before {
	display: block;
	content: "";
	width: 100px;
	height: 40px;
	margin: 0 10px 0 0;
	background-image: url("../img/header/logo.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.siteId_sub_3 {
	display: block;
}

/* on Scroll */
#top.scroll #siteId {
	line-height: 1.3;
	font-weight: 400;
	font-size: 10px;
}
#top.scroll #siteId:before {
	width: 75px;
	height: 30px;
}
#top.scroll .outerContactButton {
	flex: 0 0 200px;
}
#top.scroll .contactButton {
	width: 200px;
	height: 30px;
	font-size: 13px;
}

/* Contact Button */
.outerContactButton {
	flex: 0 0 240px;
	display: flex;
	align-items: center;
}
.contactButton {
	transition: 0.4s;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 240px;
	height: 40px;
	border: solid 1px var(--navy);
	background-color: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	font-family:
		"Noto Serif JP",
		"游明朝", "Yu Mincho",
		"游明朝体", "YuMincho",
		"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN",
		"MS 明朝", "MS Mincho",
		"ＭＳ Ｐ明朝", "MS PMincho",
		serif;
}
.innerContactButton {
	z-index: 3;
	position: relative;
	color: var(--navy);
}
.innerContactButton:before {
	display: inline-block;
	content: "\f0e0";
	margin-right: 5px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
.contactButton:hover {
	/*background-color: var(--navy);
	color: #fff;*/
}
.contactButton:before {
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--navy);
	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
	transform-origin: right top;
}
.contactButton:hover:before {
	transform-origin: left top;
	transform: scale(1, 1);
}
.contactButton:hover .innerContactButton {
	color: #fff;
}

/* Menu Button */
.outerMenuButton {
	flex: 0 0 110px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.menuButton {
	cursor: pointer;
	position: relative;
	top: 0;
	width: 50px;
	height: 40px;
}
.menuBar {
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #000;
}
#menuBar__1 {
	transition: 0.4s;
	position: absolute;
	left: 0;
	top: 8px;
}
#menuBar__2 {
	transition: 0.4s;
	position: absolute;
	left: 0;
	top: 19px;
}
#menuBar__3 {
	transition: 0.4s;
	position: absolute;
	left: 0;
	top: 30px;
}
.menuButton.close {
	top: 2px;
	width: 40px;
}
.menuButton.close #menuBar__1 {
	transform: rotate( -45deg );
	top: 19px;
}
.menuButton.close #menuBar__3 {
	transform: rotate( 45deg );
	top: 19px;
}
.menuButton.close #menuBar__2 {
	display: none;
}

/* Knee
------------------------- */
.bottomContactArea {
	width: 640px;
	height: 210px;
	margin: 0 auto 100px;
	border: solid 1px var(--light-gray);
	background-image: url("../img/footer/back_bottom_contact2.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.bottomContactArea a {
	display: block;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 640px;
	height: 210px;
	font-weight: 600;
	font-size: 17px;
	color: #fff;
}
#bottomContactArea__desc {
	margin: 0 0 20px;
	text-align: center;
	color: var(--navy);
}
.bottomContactArea .outerContactButton {
	flex: 0 0 240px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Footer
------------------------- */
#footer {
	padding: 65px 0 30px;
	background-color: var(--dark-aquamarine);
}
#innerFooter {
	display: flex;
	justify-content: space-between;
	width: 1200px;
	margin: auto;
}
#organizationInfo {
	flex: 1 1 19%;
	font-size: 14px;
	color: #fff;
}
#organizationInfo address {
	margin: 0 0 10px;
}
#footer .siteID {
	margin: 0 0 7px;
	letter-spacing: 2px;
	font-weight: 300;
	font-size: 17px;
}
#fnavi-1 {
	flex: 0 0 30%;
}
#fnavi-2 {
	flex: 0 0 30%;
}
#fnavi-3 {
	flex: 0 0 21%;
}
.fnaviArea {
	padding: 0 0 30px;
}
.fnaviArea .menu {
	margin: 0 0 40px;
}
.fnaviArea .sub-menu {
	margin: 0 0 0 20px;
}
.fnaviArea h3 {
	margin: 0 0 15px 0;
	padding: 0 0 5px;
	border-bottom: solid 1px #fff;
	font-size: 20px;
	color: #fff;
}
.fnaviArea#fnavi-2 h3 {
	overflow: hidden;
	margin: 0 5px 15px 0;
	text-indent: -200%;
}
.fnaviArea h4 {
	color: #fff;
}
.fnaviArea h4::before {
	display: inline-block;
	content: "";
	width: 14px;
	height: 14px;
	margin: 0 5px 0 0;
	background-color: var(--turquoise);
}
.fnavi-1__inner--child {
	flex: 0 0 calc( 50% - 5px );
}
.fnaviArea ul {
	list-style-type: none;
}
.fnaviArea ul li {
	font-size: 13px;
}
.fnaviArea a {
	color: #fff;
}
.fnaviArea [class*="menu"] a {
	display: block;
	padding: 7px 0;
	color: #fff;
}
.fnaviArea [class*="menu"] a:before {
	content: "- ";
}
#copyright {
	width: 1200px;
	margin: auto;
	padding: 20px 0 0;
	font-size: 13px;
	color: #fff;
}
.mobile #organizationInfo .telnm a {
	color: #fff;
}

/* Floating Menu
------------------------- */
#floatingMenu {
	z-index: 9998;
	transition: 0.4s;
	overflow: hidden;
	display: none;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0;
	background-color: #012;
	color: #fff;
}
#floatingMenu.showed {
	display: block;
	opacity: 1;
}
#floatingMenu__inner {
	display: flex;
	justify-content: space-between;
	width: 1200px;
	margin: auto;
	padding: 40px 0;
}
#floatingMenu__title {
	flex: 0 0 calc( 19% - 20px );
	display: flex;
	align-items: center;
}
.floatingMenu__naviWrap {
	flex: 0 0 calc( 27% - 13px );
}

#floatingMenu__title strong {
	display: block;
	letter-spacing: 3px;
	font-weight: 400;
	font-size: 43px;
}
#floatingMenu__title span {
	display: block;
	margin: 0;
	letter-spacing: 2px;
	text-indent: 2px;
	font-size: 12px;
	color: #609dcd;
}
#floatingMenu__title strong:after {
	display: block;
	content: "";
	width: 64px;
	height: 1px;
	margin: 3px 0 15px;
	background-color: var(--gold);
}

.floatingMenu__naviWrap {
	/*border: solid 1px #fff;*/
}
.floatingMenu__naviWrap ul {
	list-style-type: none;
}
.floatingMenu__naviWrap h3 {
	margin: 0 0 7px;
	font-size: 19px;
}
.floatingMenu__naviWrap a {
	position: relative;
	display: block;
	width: 100%;
	padding: 5px 10px;
	margin: 0 0 7px;
	background-color: #fff;
	font-weight: 500;
	font-family:
		"Noto Sans JP",
		"游ゴシック Medium", "Yu Gothic Medium",
		"游ゴシック体", "YuGothic",
		"ヒラギノ角ゴシック", "Hiragino Sans",
		"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
		"メイリオ", "Meiryo",
		sans-serif;
	font-size: 13px;
	color: #012;
}
.floatingMenu__naviWrap a:after {
	position: absolute;
	display: inline-block;
	content: "";
	right: 9px;
	top: calc( 50% - 4px );
	width: 6px;
	height: 8px;
	background-image: url("../img/icon/gt.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* Floating Menu 2 (Side)
------------------------- */
#floatingMenu-2 {
	z-index: 9998;
	transition: 0.4s;
	overflow: hidden;
	position: fixed;
	top: 100px;
	right: 0;
	width: 0;
	height: 100vh;
	padding: 0 0 20px;
	background-color: #012;
}
#floatingMenu-2.showed {
	right: 0;
	width: 430px;
}
#floatingMenu-2__inner {
	width: 430px;
}
#floatingMenu-2 h3 {
	position: relative;
	padding: 30px 0 0;
	margin: 0 10px 10px;
	font-size: 30px;
	color: #fff;
}
#floatingMenu-2 h3:nth-of-type(1) {
	padding: 20px 0 0;
}
#floatingMenu-2 h3:before {
	position: relative;
	top: -4px;
	display: inline-block;
	content: "";
	width: 8px;
	height: 8px;
	margin: 0 9px 0 0;
	background-color: var(--turquoise);
}
.sideMenu__title {
	cursor: pointer;
	transition: 0.4s;
	position: relative;
	padding: 10px 15px 8px;
	border-top: solid 1px #385285;
}
.sideMenu__title em {
	font-weight: normal;
}
.sideMenu__link--1 {
	transition: 0.4s;
	padding: 10px 15px 8px;
	border-top: solid 1px #385285;
	font-size: 16px;
}
.sideMenu__title:hover,
.sideMenu__link--1:hover {
	background-color: var(--dark-aquamarine);
}
.sideMenu__title:hover + .sideMenu__links {
	background-color: var(--dark-aquamarine);
}
.sideMenu__links {
	padding: 0 0 15px;
}
.bar-horizontal {
	position: absolute;
	top: 25px;
	right: 25px;
	display: block;
	width: 17px;
	height: 1px;
	background-color: #fff;
}
.bar-vertical {
	transform: rotate( -90deg );
	position: absolute;
	top: 25px;
	right: 25px;
	display: block;
	width: 17px;
	height: 1px;
	background-color: #fff;
}
.sideMenu__title.showed .bar-vertical {
	display: none;
}
.sideMenu__links {
	display: none;
}
.sideMenu__links.showed {
	display: block;
}
.sideMenu {
	border-bottom: solid 1px #385285;
}
.sideMenu a {
	display: block;
}
.sideMenu__title--inner {
	font-size: 16px;
	color: #fff;
}
[class*="sideMenu__link"] {
	color: #fff;
}
.sideMenu__link--2 {
	transition: 0.4s;
	padding: 5px 10px;
	margin: 0 20px 7px;
	background-color: var(--turquoise);
	font-size: 15px;
}
.sideMenu__link--2:hover {
	background-color: #169;
}
.sideMenu__links .sideMenu__link--2:last-child {
	margin: 0 20px 0;
}
.sideMenu__links--sub {
	list-style-type: disc;
	margin: 0 0 5px 50px;
}
.sideMenu__links--sub a {
	display: block;
	color: #fff;
}
/* End of file */