@charset "UTF-8";

/*
header専用css
*/
/* ===============================================
	headerのレイアウト
================================================== */
.header {
	border-bottom: 1px solid #ccc;
	background-color: #fff;
}
.header--design {
	width: 100%;
    height: 10px;
	background: -webkit-repeating-linear-gradient(135deg, #c3000a 0px, #c3000a 10px, #fff 10px, #fff 20px, #262bc1 20px, #262bc1 30px, #fff 30px, #fff 40px);
    background: repeating-linear-gradient(135deg, #c3000a 0px, #c3000a 10px, #fff 10px, #fff 20px, #262bc1 20px, #262bc1 30px, #fff 30px, #fff 40px);
	z-index: 10;
}
/*レイアウト*/
.header--layout {
	height: 80px;
	padding-right: calc(1rem + 90px);
	display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
/*サイト名エリア*/
.header--layout--sitename {
	padding-left: 1.5rem;
	display: flex;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
}

	/* -------------------------------------------
		headerのレイアウト > SP
	--------------------------------------------- */
	@media (min-width:0px) {
	}
	/* -------------------------------------------
		headerのレイアウト > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		
		/*サイト名エリア*/
		.header--layout--sitename {
			display: flex;
		}
	}
	/* -------------------------------------------
		headerのレイアウト > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
	}
	/* -------------------------------------------
		headerのレイアウト > wide PC
	---------------------------------------------- */
	@media (min-width:1680px) {
	}

/* ===============================================
	sitename
================================================== */
.header--sitename {
	width: auto;
}
.header--sitename a {
	display: flex;
	align-items: center;
    justify-content: flex-start;
}
/*サイト名画像*/
.header--sitename--img {
	width: 269px;
	height: auto;
	aspect-ratio: 269 / 32;
}
	/* -------------------------------------------
		sitename > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		
	}
	/* -------------------------------------------
		sitename > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
	}
	/* -------------------------------------------
		sitename > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.header--layout--sitename,
		.header--sitename {
			height: auto;
		}
		.header--sitename a {
			flex-wrap: wrap;
			justify-content: flex-start;
			flex-direction: column;
			align-content: center;
			align-items: center;
		}
		/*サイト名画像*/
		.header--sitename--img {
			width: 240px;
			height: auto;
			aspect-ratio: 240 / 120;
		}
	}
/* ===============================================
	本体サイトに戻るボタン
================================================== */
.g-nav_sp > .header--layout--back {
	margin-bottom: 1rem;
	width: 100%;
}
/*PC版のとき, g-navの中にある 本体サイトに戻るボタンを消す*/
.g-nav_pc > .header--layout--back {
	display: none;
}
	/* -------------------------------------------
		header--layout--back > SP
	--------------------------------------------- */
	@media (min-width:0px) {
		/*SP版のとき , ヘッダーにあるボタン*/
		.header--layout > .header--layout--back {
			display: none;
		}
	}
	/* -------------------------------------------
		header--layout--back > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {

	}
	/* -------------------------------------------
		header--layout--back > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		/*PC版のとき , ヘッダーにあるボタン*/
		.header--layout > .header--layout--back {
			display: block;
		}
		.header--layout > .header--layout--back a.btn {
			padding-top: 0.75rem;
			padding-right: 3rem;
			padding-bottom: 0.75rem;
			padding-left: 1.5rem;
			font-size: 0.875rem;
		}
		.header--layout > .header--layout--back a.btn:after {
			right: 1.5rem;
		}
	}


/* ===============================================
	g-nav
================================================== */
/*PC版グローバルメニュー*/
.g-nav_pc {
	border-top: 1px solid #ccc;
	width: 100%;
	height: auto;
	padding-top: 8px;
	padding-right: 0;
	padding-bottom: 8px;
	padding-left: 0;
	background: none;
	visibility: visible;/*表示させる*/
	box-shadow: none;
	position: relative;
	background-color: #fff;
}
.g-nav_pc .g-nav--list {
	width: 100%;
	display: flex;
	background-color: #ccc;
}
.g-nav_pc .g-nav--list--item {
	flex: auto;
	width: auto;
	display: inline-block;
	background-color: #fff;
}
.g-nav_pc .g-nav--list--item+.g-nav--list--item {
	margin-left: 1px;
}
/*リンク*/
.g-nav_pc .g-nav--list--item a {
	margin-right: auto;
	margin-left: auto;
	border-radius: 2px;
	width: calc(100% - 1rem);
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	font-weight: bold;
	font-size: 1rem;
    letter-spacing: 2px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	align-content: center;
	text-decoration: none;
	color: #3c3530;
}
.g-nav_pc .g-nav--list--item a:hover {
	background-color: #eee;
}
.g-nav_pc .g-nav--list--item a:hover .has-child--icon {
	border-top: 1px solid #fff;
    border-right: 1px solid #ffff;
}
/*PC版グローバルメニュー > ホームアイコン */
.g-nav_pc .g-nav--list--item.home .icon {
	width: auto;
	height: 1.5rem;
}
/*PC版グローバルメニュー > 子メニューを持つ場合*/
.g-nav_pc .g-nav--list--item.has-child a {
	border-radius: 2px 2px 0 0;
	position: relative;
}
/*下向き矢印*/
.g-nav_pc .g-nav--list .has-child--icon {
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: auto;
    width: 6px;
    height: 6px;
    border-top: 1px solid #f16b6f;
    border-right: 1px solid #f16b6f;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
	font-size: 0;
}
/*PC版グローバルメニュー > メガメニューの動き*/
.g-nav_pc .g-nav--list .has-child:hover a,
.g-nav_pc .g-nav--list .has-child:focus-within a {
	/* margin-bottom: -0.5rem; */
}
.g-nav_pc .g-nav--list .has-child:hover .g-nav--list--child,
.g-nav_pc .g-nav--list .has-child:focus-within .g-nav--list--child {
	display: flex;/* .has-childにhoverしたら子メニューを表示させる*/
}
/*PC版グローバルメニュー > メガメニュー(子メニュー) */
.g-nav--list--child {
	position: absolute;
	/* top: 100%; */
	top: calc(100% - 0.5rem);
	left: 0;
	width: 100%;
	height: auto;
	display: none; /*子メニューを表示させない*/
	background-color: #f16b6f;
	z-index: 2;
}
.g-nav--list--child li {
	flex: auto;
	position: relative;
}
.g-nav_pc .g-nav--list--item > .g-nav--list--child li a {
	border-radius: 0px 0px 0px 0px;
	width: 100%;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	color: #fff;
}
.g-nav--list--child li a:hover {
	color: #fff;
	text-decoration: underline;
}
.g-nav--list--child li+li {
	/* border-left: 1px solid #fff; */
}
.g-nav--list--child li+li:before {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	right: auto;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 50%;
	background-color: #fff;
	z-index: 1;
}

/*-- ハンバーガーボタン --*/
.hamburger {
	border-radius: 0 0 0 2px;
	width: 90px;
	height: 90px;
	position: fixed;
	top: 0px;
	right: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	align-content: center;
	flex-wrap: wrap;
	z-index: 9;
	background-color: #c3000a;
	box-shadow: -10px 0px 10px 0px rgb(255,255,255,1);
}
#body.scrolled .hamburger{
	box-shadow: 0px 0px 20px 0px rgb(0,0,0,0.1);
}
/*-------- ボタンをクリックした時の動き -------*/
.hamburger.open {
	background-color: #c3000a;
}
.g-nav_sp.open {
	transform: translateX(0);/*画面内に配置*/
	visibility: visible;/*表示させる*/
	z-index: 7;
	transition: all 0.5s;/*ふわっと*/
}
	/* -------------------------------------------
		g-nav > SP
	--------------------------------------------- */
	@media (min-height:0px) and (min-width:0px) {
		/*---- ヘッダーに常時表示されるメニュー ここから↓ ----*/
		.g-nav_pc {
			display: none;/*PC版メニューは非表示*/
		}
		.g-nav--list {
			flex-wrap: nowrap;/*改行させる*/
		}
		/*---- ヘッダーに常時表示されるメニュー ここまで↑ ----*/
		/*MENUの文字*/
		.hamburger .menu {
			margin-top: 16px;
			font-size: 12px;
			line-height: 12px;
			color:#fff;
		}
		/*真ん中の線*/
		.btn-line {
			margin-top: 10px;
			display: block;
			position: relative;  /* バーガー線の位置基準として設定 */
			width: 28px;  /* 線の長さと高さ */
			height: 2px;
			transition: .2s;
			background-color: #fff;
		}
		/*上下の線を疑似要素で表示させる*/
		.btn-line::before,
		.btn-line::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			transition: .5s;
			background-color: #fff;
		}
		.btn-line::before {
			transform: translateY(-8px); /*上にずらす*/
		}
		.btn-line::after {
			transform: translateY(8px); /*下にずらす*/
		}
		.g-nav_sp {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: auto;
			width: 90%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			align-content: center;
			flex-wrap: wrap;
			padding-top: 1rem;
			padding-right: 3rem;
			padding-bottom: 3rem;
			padding-left: 3rem;
			background-color: #fefefe;
			transform: translateX(110vw);/*画面外に配置*/
			visibility:hidden;/*非表示にする*/
			transition: all 0.5s;/*ふわっと*/
			z-index: 8;
			box-shadow: 0px -3px 3px 3px rgba(0, 0, 0, 0.05);
		}
		
		/*-------- ボタンをクリックした時のヘッダーのスタイル -------*/
		.g-nav_sp .g-nav--list--item,
		.g-nav_sp .g-nav--list {
			width: 100%;
		}
		.btn-line.open {
			background-color: transparent;/* 真ん中の線を透明に */
		}
		.btn-line.open::before , 
		.btn-line.open::after {
			content: "";
			transition: .2s;
		}
		.btn-line.open::before {
			transform: rotate(45deg);  /* 上の線を傾ける */
		}
		.btn-line.open::after {
			transform: rotate(-45deg);  /* 下の線を傾ける */
		}
		/*--- ハンバーガーメニューの中 ---*/
		/*サイト名*/
		.g-nav_sp--header--layout--sitename div {
			font-size: 0.875rem;
		}
		.g-nav_sp.open .g-nav--list--item+.g-nav--list--item {
			border-top-style: solid;
			border-top-color: #ccc;
			border-top-width: 1px;
		}
		.g-nav_sp .g-nav--list--item a {
			display: flex;
			line-height: 1.5em;
			padding-top: 1rem;
			padding-bottom: 1rem;
			font-size: 1.125rem;
			text-decoration: none;
			color: #222;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			flex-wrap: wrap;
		}
		.g-nav_sp .g-nav--list--item a:hover {
			background-color: rgba(195, 0, 10,0.2);
		}
		/*アイコン*/
		.g-nav_sp .g-nav--list--item a .icon {
			margin-right: 1rem;
			width: 1rem;
			height: auto;
		}
		/*検索ボックス*/
		.g-nav_sp--header--search.header--search {
			margin-top: 1rem;
			margin-bottom: 1rem;
		}
	}
	/* -------------------------------------------
		g-nav > TABLET
	---------------------------------------------- */
	@media (min-width:720px) {
		.g-nav_sp.open {
			width: 50%;
		}
		/*PC版グローバルメニュー > 子メニューを持つ場合*/
		.g-nav_pc .g-nav--list--item.has-child a {
			padding-right: 0.5rem;/*下向き矢印の分だけ空ける*/
		}
		/*下向き矢印*/
		.g-nav_pc .g-nav--list .has-child--icon {
			right: 0.25rem;
		}
	}
	/* -------------------------------------------
		g-nav > PC
	---------------------------------------------- */
	@media (min-width:1028px) {
		.g-nav_pc {
			display: block;/*表示させる*/
		}
		.g-nav_sp {
			padding-left: 4rem;
		}
	}
	/* -------------------------------------------
		g-nav > wide PC
	---------------------------------------------- */
	@media (min-width:1360px) {
		/*PC版グローバルメニュー > 子メニューを持つ場合*/
		.g-nav_pc .g-nav--list--item.has-child a {
			padding-right: 1rem;/*下向き矢印の分だけ空ける*/
		}
		/*下向き矢印*/
		.g-nav_pc .g-nav--list .has-child--icon {
			right: 1rem;
		}
		.g-nav_sp {
			padding-left: 6rem;
		}
	}