@charset "utf-8";

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

	デフォルトスタイル

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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figcaption, figure, section, footer, header, main, hgroup, menu, nav, summary {

	margin: 0;

	padding: 0;

	background: transparent;

	border: 0;

	outline: 0;

	font-size: 1em;

	box-sizing: border-box;

}

html {

	font-size: 62.5%;

}

@media (min-width: 897px) and (max-width: 1340px) {

	html {

		font-size: calc(1000vw / 1340);

	}

}

@media all and (max-width: 374px) {

	html {

		font-size: calc(1000vw / 375);

	}

}

body, table, input, textarea, select, option {

	  font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

article, aside, canvas, details, figcaption, figure, footer, header, main, hgroup, menu, nav, section, summary {

	display: block;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

chrome_annotation {

	border: none !important;

}

:focus {

	outline: 0;

}

ins {

	text-decoration: none;

}

del {

	text-decoration: line-through;

}

img {

	vertical-align: top;

	max-width: 100%;

	height: auto;

}

address {

	font-style: normal;

}

a,

a:link {

	color: var(--color01);

	text-decoration: none;

	transition: 0.3s;

}

a:visited {

	color: var(--color01);

}

a:hover {

	color: var(--color01);

}

a:active {

	color: var(--color01);

}

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

	レイアウト

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

body {

	color: var(--color01);

	font-size: 1.6rem;

	line-height: 1.5;

	text-size-adjust: none;

	-webkit-text-size-adjust: none;

	background-color: #FFF;

}

.fixed {

	position: fixed;

	width: 100%;

	height: 100%;

}

#container {

	text-align: left;

	position: relative;

	overflow: hidden;

}

a[href^="tel:"] {

	cursor: default;

	pointer-events: none;

}

@media all and (min-width: 897px) {

	.sp {

		display: none !important;

	}

}

@media all and (max-width: 896px) {

	body {

		min-width: inherit;

	}

	a:hover,

	a:hover img {

		opacity: 1 !important;

	}

	.pc {

		display: none !important;

	}

	a[href^="tel:"] {

		cursor: pointer;

		pointer-events: auto;

	}

}

:root {

	--color01: #191E2E;

	--color02: 80,157,209;

	--color03: 182,154,121;

	--color04: 90,180,159;

	--color05: #03509D;

	--color05-rgb: 3,80,157;

	--color06: #fff;

	--color06-rgb: 255,255,255;

	--color07: 205, 220, 235;

	--color08: 229, 224, 219;

	--color09: 34,146,189;

	--color10: 54,156,195;

	--color11: 23,94,165;

	--color12: #E4E4E6;

	--color13: #D9E5F0;

	--color14: #EBE8E4;

	--color15: #F8F7F6;

	--color16: #7C644C;

	--color16-rgb: 124,100,76;

	--color17: #E6EDF5;

	--color18: #ECECEC;

	--color19: #3573B1;

}

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

	ヘッダー

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

#gHeader {

	padding: 0 4.1rem 0 3.9rem;

	width: 100%;

	height: 7.6rem;

	position: fixed;

	left: 0;

	top: 3.4rem;

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 1.6rem;

	z-index: 888;

}

#gHeader .logo {

	width: 39.4rem;

}

#gHeader .logo a {

	display: block;

	position: relative;

	font-size: 1.2rem;

	font-weight: 500;

}

#gHeader .logo span {

	position: absolute;

	left: 9rem;

	top: 1px;

	letter-spacing: 0.06em;

}

#gHeader .address {

	text-align: right;

	line-height: 1.583;

	font-size: 1.2rem;

	flex: 1;

	letter-spacing: 0.06em;

}

#gHeader .topList {

	display: flex;

	gap: 1.5rem;

}

#gHeader .topList li {

	width: fit-content;

	min-height: 5.6rem;

	border-radius: 3rem;

	overflow: hidden;

}

#gHeader .topList a {

	padding: 0 2.8rem;

	width: fit-content;

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	font-weight: 700;

	color: #fff;

	background: var(--color05);

	letter-spacing: 0.06em;

}

#gHeader .topList a[href^="tel:"] {

	cursor: pointer;

	pointer-events: auto;

}

#gHeader .topList .web a {

	padding: 0 2rem;

}

#gHeader .topList .instagram a {

	padding: 0;

	width: 4.4rem;

	min-width: 4.4rem;

	height: 4.4rem;

	min-height: 4.4rem;

	background: transparent;

	border-radius: 1rem;

	overflow: hidden;

	align-self: center;

	transition: opacity 0.2s ease;

}

#gHeader .topList .instagram {

	min-height: auto;

	border-radius: 1rem;

	overflow: hidden;

	align-self: center;

}

#gHeader .topList .instagram img {

	width: 4.4rem;

	height: 4.4rem;

	display: block;

	object-fit: contain;

}

#gHeader .topList a span {

	padding: 0 3.8rem 0 1.4rem;

	position: relative;

}

#gHeader .topList a span::after {

	width: 2.6rem;

	height: 2.6rem;

	content: "";

	position: absolute;

	right: 0;

	top: 50%;

	transform: translateY(-50%);

	border-radius: 100%;

	border: 1px solid var(--color19);

	background: url(../img/common/arrow_icon.webp) no-repeat center center / 1rem;

	transition: 0.3s;

}

#gHeader .topList .menu {

	width: 9rem;

	background: var(--color05);

	position: relative;

	transition: 0.3s;

	cursor: pointer;

}

#gHeader .topList .menu span {

	height: 1px;

	display: block;

	transition: all .4s;

	box-sizing: border-box;

	position: absolute;

	left: 2.8rem;

	z-index: 1000;

	background-color: #fff;

}

#gHeader .topList .menu span:nth-of-type(1) {

	width: 3.3rem;

	top: 2rem;

}

#gHeader .topList .menu span:nth-of-type(2) {

	width: 2.2rem;

	top: 2.7rem;

}

#gHeader .topList .menu span:nth-of-type(3) {

	width: 1.1rem;

	top: 3.5rem;

}

@media all and (min-width: 1024px) {

	#gHeader .topList a:hover {

		background-color: var(--color16);

	}

	#gHeader .topList .instagram a:hover {

		background-color: transparent;

		opacity: 0.7;

	}

	#gHeader .topList a:hover span::after {

		border-color: #968370;

	}

	#gHeader .topList .menu:hover {

		background: var(--color16);

	}

	#gHeader .topList .menu:hover span {

		width: 3.3rem;

	}

}

@media all and (max-width: 896px) {

	#gHeader {

		padding: 1.8rem 2rem 0;

		height: 10.9rem;

		top: 0;

		align-items: flex-start;

		background: linear-gradient(to bottom,var(--color06) 50%,transparent 100%);

	}

	#gHeader .logo {

		width: 24rem;

	}

	#gHeader .topList .menu {

		width: 7rem;

		min-height: 4.4rem;

	}

	#gHeader .topList {

		gap: 0.8rem;

		align-items: center;

	}

	#gHeader .topList .instagram a {

		width: 4rem;

		min-width: 4rem;

		height: 4rem;

		min-height: 4rem;

	}

	#gHeader .topList .instagram img {

		width: 4rem;

		height: 4rem;

	}

	#gHeader .logo span {

		left: 5.6rem;

		font-size: 0.8rem;

	}

	#gHeader .topList .menu span {

		left: 2.2rem;

	}

	#gHeader .topList .menu span:nth-of-type(1) {

		width: 2.6rem;

		top: 1.5rem;

	}

	#gHeader .topList .menu span:nth-of-type(2) {

		width: 1.7rem;

		top: 2.1rem;

	}

	#gHeader .topList .menu span:nth-of-type(3) {

		width: 0.9rem;

		top: 2.7rem;

	}

}

/* menuBox */

.menuBox {

	display: none;

	position: fixed;

	right: 0;

	top: 0;

	width: 37.5rem;

	z-index: 999;

	height: 100%;

	overflow-y: auto;

	box-sizing: border-box;

	background: url(../img/common/menu_bg.webp) repeat left top / 10rem;

}

.menuBox .logo a {

	width: 19.9rem;

	display: block;

}

@media all and (max-width: 896px) {

	.menuBox {

		width: 100%;

	}

}

/* gNavi */

#gNavi {

	padding: 5.1rem 4rem 2rem;

	position: relative;

	font-size: 1.4rem;

}

#gNavi .logo {

	margin-bottom: 3.2rem;

}

#gNavi .logo a {

	width: 19.9rem;

	display: block;

}

#gNavi .menu {

	width: 3.6rem;

	height: 1.5rem;

	position: absolute;

	right: 6.8rem;

	top: 6.5rem;

	cursor: pointer;

}

#gNavi .menu span {

	width: 100%;

	height: 1px;

	position: absolute;

	left: 0;

	top: 50%;

	display: block;

	background: var(--color06);

}

#gNavi .menu span:nth-of-type(1) {

	transform: translateY(-50%) rotate(-25deg);

}

#gNavi .menu span:nth-of-type(2) {

	transform: translateY(-50%) rotate(25deg);

}

#gNavi .navUl {

	margin-bottom: 1.3rem;

	columns: 2;

}

#gNavi .navUl > li {

	page-break-inside: avoid;

	word-break: break-all;

}

#gNavi .navUl > li + li {

	margin-top: 2.3rem;

}

#gNavi a {

	color: var(--color06);

	position: relative;

	font-weight: 700;

	letter-spacing: 0.04em;

	display: block;

	width: fit-content;

}

#gNavi .navUl a {

	padding-left: 2.5rem;

	text-indent: -2.5rem;

}

#gNavi .navUl a::before {

	margin-right: 1rem;

	content: "●";

}

#gNavi .subList {

	margin: 1rem 0.3rem;

}

#gNavi .subList li + li {

	margin-top: 0.5rem;

}

#gNavi .subList a {

	font-weight: 500;

	padding-left: 1.6rem;

	text-indent: -1.6rem;

}

#gNavi .subList a::before {

	content: "-";

}

#gNavi .comMap {

	margin: 0;

	display: block;

	width: auto;

}

#gNavi .comMap .table {

	margin-bottom: 0.6rem;

}

#gNavi .comMap thead th {

	padding-top: 1rem;

	padding-bottom: 1rem;

}

#gNavi .comMap tbody tr:first-child th,

#gNavi .comMap tbody tr:first-child td {

	padding-top: 1rem;

	padding-bottom: 0;

}

#gNavi .comMap tbody tr:last-child th,

#gNavi .comMap tbody tr:last-child td {

	padding-bottom: 1.2rem;

	border-color: rgba(186,187,192,0.4);

}

#gNavi .comMap th,

#gNavi .comMap td {

	font-size: 1.4rem;

}

#gNavi .comMap tbody th,

#gNavi .comMap tbody td {

	color: var(--color06);

}

#gNavi .comMap thead th {

	background: var(--color19);

}

#gNavi .comMap .tips {

	font-size: 1.2rem;

	text-align: right;

	color: var(--color06);

}

#gNavi .comMap .tel {

	margin: 2rem 0 1.2rem;

	text-align: center;

}

#gNavi .comMap .tel a {

	margin: 0 auto;

	width: 100%;

	font-size: 3.1rem;

	letter-spacing: 0;

	font-family: "Barlow", sans-serif;

}

#gNavi .comMap .address {

	margin-bottom: 3.2rem;

	text-align: center;

	font-size: 1.3rem;

	color: var(--color06);

	line-height: 1.538;

}

#gNavi .infoTxt {

	text-align: center;

	font-size: 1.3rem;

	font-weight: 700;

	letter-spacing: 0.08em;

	color: var(--color06);

}

@media all and (min-width: 1024px) {

	#gNavi .menu:hover,

	#gNavi ul a:hover {

		opacity: 0.6;

	}

}

@media all and (max-width: 896px) {

	#gNavi {

		padding-top: 10.3rem;

	}

	#gNavi .logo {

		position: absolute;

		left: 2rem;

		top: 2rem;

	}

	#gNavi .logo a {

		width: 24rem;

	}

	#gNavi .menu {

		width: 2.9rem;

		right: 4.1rem;

		top: 3.3rem;

	}

	#gNavi .comMap .address {

		margin-bottom: 1.4rem;

	}

}

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

	フッター

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

#gFooter {

	position: relative;

	z-index: 1;

	background: url(../img/common/bg04.webp) no-repeat center top / 100% 10rem;

}

#gFooter::after {

	content: "";

	width: 100%;

	height: 100%;

	position: absolute;

	left: 0;

	top: 9.8rem;

	z-index: -1;

	background: #fff;

}

#gFooter .comMap {

	padding: 1px 0 7rem;

	flex-wrap: wrap;

	row-gap: 4.7rem;

}

#gFooter .topBox {

	margin: -5rem 0 0;

	width: 100%;

}

#gFooter .topBox .logoBox {

	margin-bottom: 0;

}

#gFooter .comMap .address {

	margin: 2.3rem 0 2.8rem;

}

#gFooter .comMap .textList {

	flex-direction: column;

	row-gap: 1rem;

}

#gFooter .comMap .textList li {

	width: fit-content;

}

#gFooter .comMap .map {

	margin: 0;

	max-width: 100%;

	height: 100%;

}

#gFooter .navBox {

	padding: 6rem 0 6.6rem;

	position: relative;

	z-index: 1;

	background: url(../img/common/logo_img02.webp) no-repeat top -10.7rem right calc(50% - 41.2rem) / 47.5rem, linear-gradient(45deg,rgba(var(--color06-rgb),0) 0%,var(--color05) 100%);

}

#gFooter .navBox::after {

	width: 100%;

	height: 100%;

	content: "";

	position: absolute;

	left: 0;

	top: 0;

	background: url(../img/common/noise.webp) repeat left top;

	mix-blend-mode: plus-lighter;

	z-index: -1;

}

#gFooter .navBox .content {

	width: 96rem;

	gap: 3.2rem;

}

#gFooter .navBox .list {

	width: 18rem;

}

#gFooter .navBox .list:has(.subList) {

	width: 41rem;

}

#gFooter .navBox .list > li + li {

	margin-top: 2.2rem;

}

#gFooter .navBox a {

	padding-left: 2.5rem;

	font-size: 1.4rem;

	font-weight: 700;

	color: #fff;

	letter-spacing: 0.05em;

	display: block;

	width: fit-content;

	text-indent: -2.5rem;

	word-break: break-all;

}

#gFooter .navBox a::before {

	margin-right: 1rem;

	content: "●";

}

#gFooter .navBox .subList {

	margin: 1.4rem 0.5rem 0;

	columns: 3;

}

#gFooter .navBox .subList li + li {

	margin-top: 0.9rem;

}

#gFooter .navBox .subList a {

	padding-left: 1.4rem;

	font-weight: 500;

	text-indent: -1.4rem;

}

#gFooter .navBox .subList a::before {

	content: "-";

}

@media all and (min-width: 1024px) {

	#gFooter .navBox a:hover {

		opacity: 0.6;

	}

}

@media all and (max-width: 896px) {

	#gFooter {

		background: url(../img/common/bg04.webp) no-repeat center top 0.6rem/ 100% 3rem;

	}

	#gFooter::after {

		top: 3.4rem;

	}

	#gFooter .comMap {

		padding-bottom: 3.8rem;

	}

	#gFooter .topBox {

		margin-top: -3rem;

	}

	#gFooter .topBox .logoBox {

		margin-bottom: 3.2rem;

	}

	#gFooter .comMap .address {

		margin: 1.4rem 0 1rem;

	}

	#gFooter .navBox {

		padding: 3.2rem 0 1px;

		background-position: right -17rem bottom 0rem,right bottom;

	}

	#gFooter .navBox .content {

		padding-bottom: 8.3rem;

	}

	#gFooter .navBox .subList li + li {

		margin-top: 0.9rem;

	}

	#gFooter .navBox .subList a::before {

		margin-right: 0.7rem;

	}

	#gFooter .navBox .content {

		gap: 2.6rem 2.5rem;

	}

	#gFooter .navBox .list {

		width: calc(50% - 2rem);

		min-width: 15rem;

	}

	#gFooter .navBox .list > li + li {

		margin-top: 2.2rem;

	}

	#gFooter .navBox .subList {

		margin-top: 2.8rem;

		columns: 2;

	}

	#gFooter .navBox .list02 {

		order: 3;

		min-width: inherit;

    	width: 100%;

	}

}