@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Herr+Von+Muellerhoff&display=swap');


@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 420px) {}

@media screen and (max-width: 375px) {}


:root {
	--color-font: #333;
	--color-red: #FE0132;
	--color-orange: #F39801;
	--color-blue: #52ABB9;
	--color-green: #1b4b1c;
}


/*-----------------------------------------------------------------------------------------
0001 INITIAL VALUE
0002 LAYOUT
0003 TYPOGRAPHY RESET
0004 HEADER
0005 FOOTER
0006 Humberger
0006 Humberger -2 スマホ時に横FIX
0007 Humberger の時の開いたメニュー
0008 btn-fixed

1001 PAGER
1002 pagination
1003 SIDEBAR
1004 NOFOUND

2001 FRAME-MAP

3001 FIRST-VIEW
3002 main-contents
3003 area-message
3004 area-info
3005 main-contents >>> area-contents
3006 area-guidemap
3007 main-contents >>> area-contents >>> blockquote.text TYPO

4001 トップページ調整

5001 モーダル
5002 area-detail

----------------------------------------------------------------------------------------- */
/* -----
mainのpadding-topを0にした
header固定をやめました.
----- */


/*-----------------------------------------------------------------------------------------
0001 INITIAL VALUE
----------------------------------------------------------------------------------------- */
html {
	border: 0px solid red;
	padding: 0px;
	margin: 0px;
	background: white;
	font-size: 62.5%;
}

body {
	border: 0px solid green;
	width: 100%;
	height: auto;
	font-weight: normal;
	font-size: 1rem;
	line-height: 1;
	position: relative;
	color: #111;
	padding: 0;
	margin: 0;
	background: white;
	-webkit-text-size-adjust: 100%;
	min-width: 1200px;
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Yu Gothic", sans-serif;
	background: white;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

article,
section,
aside,
header,
footer,
main {
	display: block;
	padding: 0;
	margin: 0;
	width: 100%;
}

main {
	display: block;
	padding: 120px 0 0 0;padding:0;
	margin: 0 0 0 0;
	width: 100%;
	background: white;
	background-size: 100% auto;
	position: relative;
	z-index: 100;
	border-left: 0px solid pink;
}

img {
	width: 100%;
	height: auto;
	display: block;
	padding: 0;
	margin: 0 auto;
	vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast;
}

a {
	color: #111;
	text-decoration: none;
}

a:hover {
	transition: 0.5s;
	text-decoration: none;
	opacity: 0.5;
}

.none {
	display: none;
}

.clearfix::after {
	content: '';
	display: block;
	clear: both;
}

strong,
b {
	font-weight: 600;
}

small {
	font-size: 0.8em;
	font-weight: inherit;
}

span {
	font-weight: inherit;
}

em {
	font-style: italic;
}

li {
	list-style: none;
}

li.list-style-none {
	list-style: none !important;
}

hr {
	max-width: calc(1200px - 1.5rem - 1.5rem);
	margin: 6.0rem auto;
	display: block;
	width: 100%;
	height: 0;
	border-top: 3px solid #111;
}

iframe {
	width: 100%;
	vertical-align: bottom;
	margin: 0 auto;
}

.pc {
	display: block;
}

.sp {
	display: none;
}

.swiper-wrapper {
	height: auto !important;
}

.swiper-container li {
	list-style: none;
}

.txt-center {
	text-align: center;
}


@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	html {
		font-size: calc(62.5% * 0.9);
	}

	body {
		min-width: 100%;
	}

	main {
		/* padding-top: 100px */
	}

	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

	hr {
		max-width: initial;
		margin: 3.0rem auto;
		width: calc(100% - 10vw);
	}
}

@media screen and (max-width: 520px) {
	html {
		font-size: calc(62.5% * 0.85);
	}

	main {
		/* padding-top: 90px */
	}
}

@media screen and (max-width: 420px) {
	html {
		font-size: calc(62.5% * 0.80);
	}

	main {
		padding-top: 70px
	}
}

@media screen and (max-width: 375px) {
	html {
		font-size: calc(62.5% * 0.75);
	}
}










/*-----------------------------------------------------------------------------------------
0002 LAYOUT
----------------------------------------------------------------------------------------- */
.container {
	border: 0px solid red;
	width: 1200px;
	padding: 0;
	margin: 0 auto;
	background: transparent;
}

.container.small {
	max-width: 960px;

}

.container-fluid {
	border: 0px solid lightblue;
	width: 100%;
	min-width: 1200px;
	padding: 0;
	margin: 0 auto;
	background: transparent;
}

.row {
	clear: both;
	padding: 0;
	margin: 0;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flexbox {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flexbox li {
	list-style: none;
}

.col-01,
.col-02,
.col-03,
.col-04,
.col-05,
.col-06,
.col-07,
.col-08,
.col-09,
.col-10,
.col-11,
.col-12 {
	padding: 0 15px;
	display: block;
	float: none;
	position: relative;
}

.col-01 {
	width: 8.33333%;
}

.col-02 {
	width: 16.66667%;
}

.col-03 {
	width: 25%;
}

.col-04 {
	width: 33.33333%;
}

.col-05 {
	width: 41.66667%;
}

.col-06 {
	width: 50%;
}

.col-07 {
	width: 58.33333%;
}

.col-08 {
	width: 66.66667%;
}

.col-09 {
	width: 75%;
}

.col-10 {
	width: 83.33333%;
}

.col-11 {
	width: 91.66667%;
}

.col-12 {
	width: 100%;
}

.container-fluid .col-12,
.container-fluid .col-11,
.container-fluid .col-10,
.container-fluid .col-09,
.container-fluid .col-08,
.container-fluid .col-07,
.container-fluid .col-06,
.container-fluid .col-05,
.container-fluid .col-04,
.container-fluid .col-03,
.container-fluid .col-02,
.container-fluid .col-01 {
	padding: 0;
	border-color: orange;
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {

	.container,
	.container-fluid {
		width: 100%;
		min-width: initial;
		border-xcolor:green
	}

	.container {}

	.col-01,
	.col-02,
	.col-03,
	.col-04,
	.col-05,
	.col-06,
	.col-07,
	.col-08,
	.col-09,
	.col-10,
	.col-11,
	.col-12 {
		padding: 0 5vw;
	}

	.col-01 {
		width: 25%;
	}

	.col-02 {
		width: 25%;
	}

	.col-03 {
		width: 25%;
	}

	.col-04 {
		width: 50%;
	}

	.col-05 {
		width: 50%;
	}

	.col-06 {
		width: 50%;
	}

	.col-07 {
		width: 100%;
	}

	.col-08 {
		width: 100%;
	}

	.col-09 {
		width: 100%;
	}

	.col-10 {
		width: 100%;
	}

	.col-11 {
		width: 100%;
	}

	.col-12 {
		width: 100%;
	}


	.container-fluid .col-01,
	.container-fluid .col-02,
	.container-fluid .col-03,
	.container-fluid .col-04,
	.container-fluid .col-05,
	.container-fluid .col-06,
	.container-fluid .col-07,
	.container-fluid .col-08,
	.container-fluid .col-09,
	.container-fluid .col-10,
	.container-fluid .col-11,
	.container-fluid .col-12 {
		border: 0px solid red;
	}

}

@media screen and (max-width: 520px) {

	.col-01,
	.col-02,
	.col-03,
	.col-04,
	.col-05,
	.col-06,
	.col-07,
	.col-08,
	.col-09,
	.col-10,
	.col-11,
	.col-12 {}

	.col-01 {
		width: 50%;
	}

	.col-02 {
		width: 50%;
	}

	.col-03 {
		width: 50%;
	}

	.col-04 {
		width: 100%;
	}

	.col-05 {
		width: 100%;
	}

	.col-06 {
		width: 100%;
	}

	.col-07 {
		width: 100%;
	}

	.col-08 {
		width: 100%;
	}

	.col-09 {
		width: 100%;
	}

	.col-10 {
		width: 100%;
	}

	.col-11 {
		width: 100%;
	}

	.col-12 {
		width: 100%;
	}
}

@media screen and (max-width: 420px) {}

@media screen and (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
0003 TYPOGRAPHY RESET
----------------------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td {
	font-size: 1rem;
	line-height: 1.5;
	padding: 0;
	margin: 0;
	letter-spacing: 0;
	font-weight: 300;
	font-style: normal;
}

li,
dt,
dd {
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0;
	font-weight: 300;
	font-style: normal;
}


@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 420px) {}

@media screen and (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
0004 HEADER
----------------------------------------------------------------------------------------- */
header {
	background: rgba(17, 17, 17, 0.9);
	width: 100%;
	height: 120px;
	overflow: hidden;
	position:relative;
	/* position: fixed; */
	/* top: 0; */
	/* left: 0; */
	z-index: 1004;
	padding: 0 1.5rem;
	opacity: 1;
	transition:0.4s;
}

/* header.fixed {
	top: -120px
} */

header h1 {
	display: block;
	width: auto;
	width: 450px;
	height: 120px;
	padding: 0;
	margin: 0;
	border: 0px solid blue;
}

header h1 dl {
	-webkit-justify-content: flex-start;
	-ms-flex-pack: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
	height: 120px;
	padding: 0;
	marign: 0;
}

header h1 dl dt,
header h1 dl dd {
	width: auto;
	height: 100%;
	padding: 0.5rem;
	border: 0px solid green;
	width: 40%;
	-webkit-justify-content: center;
	-ms-flex-pack: justify;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

header h1 dl dd {
	width: 60%;
	padding: 0 2.0rem;
}

header h1 span {
	display: none;
}

header h1 img {
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0 auto;
	display: block;
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	header {
		height: 100px;
	}

	header h1 {
		width: calc(100% - 120px);
		height: 100px;
	}

	header h1 dl {
		height: 100px;
	}

	header h1 img {
		max-height: 80px;
	}
}

@media screen and (max-width: 520px) {
	header {
		height: 90px;
	}

	header h1 {
		width: calc(100% - 90px);
		height: 90px;
	}

	header h1 dl {
		height: 90px;
	}
}

@media screen and (max-width: 420px) {
	header {
		height: 70px;
	}

	header h1 {
		width: calc(100% - 80px);
		height: 70px;
	}

	header h1 dl {
		height: 70px;
	}
}

@media screen and (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
0005 FOOTER
----------------------------------------------------------------------------------------- */
footer {
	background: white;
	padding: 6.0rem 0;
	margin: 0;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 100;
}

footer blockquote {
	border-top: 3px solid #111;
	width: 100%;
	height: auto;
	display: block;
	padding: 6.0rem 0 0 0;
	margin: 0;

}

.area-btn-contact address {
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.7;
	padding: 0;
	margin: 0;
}

.area-btn-contact .copyright {
	text-align: center;
	font-size: 1.25rem;
	line-height: 1.7;
	padding: 0;
	margin: 3.0rem 0 0 0;
}

.area-btn-contact .copyright span {
	margin: 0 0.25em;
}

.area-btn-contact ul {
	width: auto;
	padding: 0;
	margin: 3.0rem auto;
	text-align: center;
}

.area-btn-contact li {
	width: 40%;
	padding: 0;
	margin: 0 auto;
	font-size: 1.25rem;
	line-height: 1;
}

.area-btn-contact li a {
	background:var(--color-blue);
	display: block;
	padding: 1.0rem 0;
	margin: 0;
	border-radius: 1.0rem;
	font-weight: 600;
}

.area-btn-contact li img {
	min-width: 50px;
	width: 10%;
	margin: 0.5rem auto 0;
}

.error404 footer,
.single footer .frame-map,
.page footer .frame-map {
	display: none;
}


@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	.area-btn-contact address {
		font-size: calc(1.6rem * 1.25);
		line-height: 1.5;
	}


	.area-btn-contact .copyright {
		font-size: calc(1.25rem * 1.25);
		line-height: 1.5;
	}

	.area-btn-contact .copyright span {
		display: block;
	}


	.area-btn-contact li {
		width: 80%;
	}
}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 420px) {
	.area-btn-contact li {
		width: 100%;
	}
}

@media screen and (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
0006 Humberger
----------------------------------------------------------------------------------------- */
.hamburger,
.hamburger span {
	display: inline-block;
	transition: all 0.4s;
	box-sizing: border-box;
}


.hamburger {
	position: fixed;
	top: calc((120px - 30px) / 2);
	right: 72px;
	width: 72px;
	height: 30px;
	z-index: 1001;
	display: block;
	background: transparent;
}

.hamburger.active {
	z-index: 1003;
}

.hamburger .hamburger-btn {
	position: absolute;
	top: 50%;
	right: 0%;
	-webkit-transform: translate(120%, -50%);
	transform: translate(120%, -50%);
	color: white;
	font-weight: 600;
	font-size: 1.5rem;
}

.hamburger span {
	position: absolute;
	left: 0;
	width: 72px;
	height: 4px;
	background-color: white;
	border-radius: 4px;
}

.hamburger span:nth-of-type(1) {
	top: 0;
	width: calc(72px * 0.5);
	left: calc(72px * 0.5 / 2);
}

.hamburger span:nth-of-type(2) {
	top: 14px;
	width: calc(72px * 0.75);
	left: calc(72px * 0.25 / 2);
}

.hamburger span:nth-of-type(3) {
	top: 28px;
}

.hamburger.active span {
	background-color: var(--color-font);
}

.hamburger.active span:nth-of-type(1) {
	transform: translate(-10px, 15px) rotate(-45deg);
	transform: translate(-10px, 15px) rotate(-45deg);
	width: 54px;
}

.hamburger.active span:nth-of-type(2) {
	left: 50%;
	opacity: 0;
	-webkit-animation: active-menu-bar02 0.8s forwards;
	animation: active-menu-bar02 0.8s forwards;
}

.hamburger.active span:nth-of-type(3) {
	transform: translate(7.5px, -13px) rotate(45deg);
	transform: translate(7.5px, -13px) rotate(45deg);
	width: 54px;
}

.hamburger:hover {
	cursor: pointer;
}

.hamburger.fixed span {
	background-color:var(--color-font);
}

.hamburger.fixed .hamburger-btn,
.hamburger.active .hamburger-btn {
	color:var(--color-font);
}



@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {

	.hamburger,
	.hamburger .hamburger-btn {
		transform: scale(0.8, 0.8);
		right: 50px;
		top: calc((100px - 30px) / 2);
		display: none;
	}

}

@media screen and (max-width: 520px) {
	.hamburger {
		transform: scale(0.7, 0.7);
		right: 30px;
		top: calc((90px - 30px) / 2);
	}
}

@media screen and (max-width: 420px) {
	.hamburger {
		transform: scale(0.65, 0.65);
		right: 25px;
		top: calc((70px - 30px) / 2);
	}
}

@media screen and (max-width: 375px) {}








/*-----------------------------------------------------------------------------------------
0006 Humberger -2
----------------------------------------------------------------------------------------- */
.hamburger2 {
	display: block;
}

@media screen and (max-width: 768px) {
	.hamburger2 {
		width: 40px;
		height: 40px;
		background: #57B6C5;
		background:var(--color-blue);
		border-radius: 0.7rem 0 0 0.7rem;
		position: relative;
	}

	.hamburger2.active {
		z-index: 1003;
	}

	.hamburger2 span {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 25px;
		height: 3px;
		background-color: white;
		border-radius: 4px;
		transform: translate(-50%, -50%);
		display: block;
		transition: all 0.4s;
		box-sizing: border-box;
	}

	.hamburger2 span:nth-child(2) {
		top: calc(50% - 8px);
		left: 50%;
	}

	.hamburger2 span:nth-child(3) {
		top: calc(50% + 8px);
	}

	.hamburger2.active span {
		background-color: white;
	}

	.hamburger2.active span:nth-child(1) {
		transform: translate(-12px, 0px) rotate(-45deg);
	}

	.hamburger2.active span:nth-child(2) {
		opacity: 0;
		background: green
	}

	.hamburger2.active span:nth-child(3) {
		transform: translate(-12px, -8px) rotate(45deg);
	}
}

@media screen and (max-width: 420px) {
	.hamburger2 {
		width: 35px;
		height: 35px;
		border-radius: 0.5rem 0 0 0.5rem;
	}

	.hamburger2 span:nth-child(2) {
		top: calc(50% - 8px);
		left: 50%;
	}

	.hamburger2 span:nth-child(3) {
		top: calc(50% + 8px);
	}

	.hamburger2.active span {
		background-color: white;
	}

	.hamburger2.active span:nth-child(1) {
		transform: translate(-12px, 0px) rotate(-45deg);
	}

	.hamburger2.active span:nth-child(2) {
		opacity: 0;
		background: green
	}

	.hamburger2.active span:nth-child(3) {
		transform: translate(-12px, -8px) rotate(45deg);
	}
}










/*-----------------------------------------------------------------------------------------
0007 Humberger の時の開いたメニュー
----------------------------------------------------------------------------------------- */
#navigation {
	position: fixed;
	display: none;
	width: 100%;
	height: calc(100% - 120px);height:100%;
	overflow-y: auto;
	top: 0;
	left: 0;
	z-index: 1002;
	background: white;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0, rgba(242, 255, 255, 1) 100%);
	padding: 5vw 10vw;
	margin: 120px 0 0 0;margin:0;
	opacity: 1;
	border: 0px solid red;
}

.accordion {
	border: 0px solid green;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	-webkit-justify-content: center;
	-ms-flex-pack: justify;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	font-size:1.8rem;
	line-height:1.2;
	font-weight:400;
}

.accordion .midashi {
	font-size:2em;
	line-height:inherit;
	display:block;
	font-weight:600;
	text-align:center;
	padding:0;
	margin:0 0 1.0em 0
}

.accordion .inner-box {
	border: 0px solid blue;
	width: 100%;
	padding: 0;
	font-size:inherit
}

.accordion ul.accordion-container {
	border: 0px solid orange;
	max-width: 27em;
	height: auto;
	padding: 1.0rem 0;
	margin: auto ;
	border-bottom: 1px solid #666;
	font-size:inherit
}

.accordion ul.accordion-container li {
	padding: 0;
	margin: 0;
	text-align: left;
	transition: 0.25s;
	font-size:inherit
}

.accordion ul.accordion-container li br {
	display: none;
}

.accordion ul.accordion-container li:hover {
	background: rgba(92, 194, 208, 0.3);
}

.accordion ul.accordion-container li:last-child {
}

.accordion ul.accordion-container li a {
	display: block;
	padding: 0.4em 0.25em 0.4em 1.5em;
	margin: 0;
}

.accordion ul.accordion-container li a b {
	color:#275976
}

.accordion ul.accordion-container li a::before {
	content: '\f138';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 0.25em;
	margin-left: -1.25em;
	color:var(--color-blue);
}

.accordion ul.accordion-container li.link-text {
	line-height: 1.3;
	padding: 0;
}

.accordion ul.accordion-container li.link-rsrv {
	padding: 2rem 0;
}

.accordion ul.accordion-container li.link-rsrv a {
	background:var(--color-blue);
	display: block;
	width: 180px;
	padding: 0;
	margin: 0 auto;
	color: white;
	border-radius: 1.0rem;
}

.accordion .area-btn-contact li {
	max-width: 470px;
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	#navigation {
		padding: 5vw 1vw;
	}
}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 420px) {}

@media screen and (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
0008 btn-fixed
----------------------------------------------------------------------------------------- */
.btn-fixed {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 1005;
	width: 50px;
	height: auto;
	padding: 0;
	margin: 0;
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	background: transparent;
}

.btn-fixed a {
	display: block;
	padding: 1.0rem 1.4rem 1.0rem 1.6rem;
	margin: 1.0rem 0;
	background:var(--color-blue);
	border-radius: 0.7rem 0 0 0.7rem;
	width: 100%;
	-webkit-justify-content: center;
	-ms-flex-pack: justify;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	color: white;
	box-shadow:0px 0px 5px rgba(0, 0, 0, 0.1);
}

.btn-fixed dl {
	padding: 0;
	margin: 0;
}

.btn-fixed dl dt,
.btn-fixed dl dd {
	margin: 1.0rem 0;
}

.btn-fixed a:hover {
	opacity: 1;
	background: silver;
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	.btn-fixed {
		width: 40px;
	}
}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 420px) {
	.btn-fixed {
		width: 35px;
	}

	.btn-fixed a {
		padding: 0.5rem 0.8rem 0.5rem 1.1rem;
		border-radius: 0.5rem 0 0 0.5rem;
	}

}

@media screen and (max-width: 375px) {}











/*-----------------------------------------------------------------------------------------
1001 PAGER
----------------------------------------------------------------------------------------- */
.pager {
	border-top: 3px double #111;
	border-bottom: 3px double #111;
	padding: 5px 0;
	margin: 60px 0;
}

.screen-reader-text {
	display: none;
}

.nav-links {
	padding: 0;
	margin: 0;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.nav-links .nav-previous,
.nav-links .nav-next {
	width: 100%;
}

.nav-links .nav-previous a,
.nav-links .nav-next a {
	display: block;
	color: #111;
	text-align: left;
	font-size: 12px;
	line-height: 1.3;
	padding: 0.5em;
	margin: 0;
	text-decoration: none;
}

.nav-links .nav-previous a:hover,
.nav-links .nav-next a:hover {
	background: #111;
	transition: 0.5s;
	opacity: 1;
	color: white;
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 420px) {}

@media screen and (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
1002 pagination
----------------------------------------------------------------------------------------- */
.pagination {
	border: 0px solid black;
	width: 100%;
	padding: 0;
	margin: 60px 0;
}

.archive .pagination {
	-webkit-justify-content: center;
	-ms-flex-pack: justify;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.pagination ul.page-numbers {
	width: 100%;
	padding: 0;
	margin: 0;
	display: block;
	-webkit-justify-content: center;
	-ms-flex-pack: justify;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.pagination li {
	list-style: none;
}

a.page-numbers,
span.page-numbers {
	border: 0px solid black;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 30px;
	height: 30px;
	text-decoration: none;
	margin: 4px;
	font-size: 12px;
	line-height: 1;
	font-weight: 400;
	background: #111;
	border: 1px solid #111;
	color: white;
}

span.page-numbers,
a.prev.page-numbers,
a.next.page-numbers {
	background: transparent;
	color: #111;
}

a.prev.page-numbers,
a.next.page-numbers {
	width: auto;
	padding-left: 8px;
	padding-right: 8px;
	border: none;
}

span.page-numbers.dots {
	border: none;
}

#index .pagination {
	display: none;
}










/*-----------------------------------------------------------------------------------------
1003 SIDEBAR
----------------------------------------------------------------------------------------- */
#sidebar {
	border: 0px solid red;
	overflow: hidden;
}

#sidebar .widget {
	border: 0px solid red;
	padding: 0;
	margin: 0 0 60px 0;
	background: transparent;
}

#sidebar .widget:first-child {
	margin-top: 0;
}

#sidebar h4 {
	border: 0px solid red;
	padding: 0.75em 10px 0.7em;
	margin: 0;
	border-top: 5px double var(--color-blue);
	border-bottom: 1px double var(--color-blue);
	font-weight: 400;
	width: 100%;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-indent: 0.1em;
	font-size: 2.0rem;
	color: #434343;
	background: rgba(87, 182, 197, 0.1);
	text-align: center;
}

#sidebar ul {
	border: 0px solid red;
	padding: 0;
	margin: 0;
	width: 100%;
}

#sidebar ul li {
	border: 0px solid red;
	border-bottom: 1px dashed #aaa;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 100%;
	position: relative;
	font-size: 1.4rem;
	line-height: 1.4;
}

#sidebar ul li span {
	border: 0px solid red;
	display: block;
	text-align: right;
	padding: 5px 0 0 0;
	margin: 0 0 10px 0;
	color: #31444e;
}

#sidebar ul li a {
	width: auto;
	text-decoration: none;
	padding: 0.9em 0.2em 0.75em 1em;
	margin: 0;
	display: inline-block;
	position: relative;
	color: #31444e;
	display: block;
	width: 100%;
	height: 100%;
}

#sidebar ul li a::before {
	content: '\f0da';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	top: 54%;
	left: 0;
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	color: #B21511;
	font-size: inherit;
}

#sidebar ul li:hover {
	transition: 0.3s;
	cursor: pointer;
	background: rgba(49, 68, 78, 0.1)
}


.post-date {
	font-size: 1.1rem;
	padding: 0;
	margin: 0;
	opacity: 0.7;
}

@media (max-width: 1200px) {}

@media (max-width: 1024px) {}

@media (max-width: 768px) {
	#sidebar {
		width: 100%;
	}
}

@media (max-width: 520px) {}

@media (max-width: 420px) {}

@media (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
1004 PANKUZU
----------------------------------------------------------------------------------------- */
.pankuzu {
	max-width: 1200px;
	padding: 1.0rem 15px;
	margin: 0 auto 4vw auto;
	text-align: left;
	font-size: 1.3rem;
	line-heioght: 1.3;
}

.pankuzu span {
	margin-right: 0.25em;
}

.pankuzu a {
	color:var(--color-blue);
}


@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	.pankuzu {
		text-align: left;
	}
}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 420px) {}

@media screen and (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
1004 NOFOUND
----------------------------------------------------------------------------------------- */
.not-found {
	padding: 0;
	width: 100%;
	height: calc(100vh - 100px);
	-webkit-justify-content: center;
	-ms-flex-pack: justify;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

}

.not-found-message {
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 0;
	margin: auto;
	overflow: hidden;

}

.not-found-message span {
	display: block;
	border: 0px solid black;
	width: 100%;
	text-align: center;
	color:var(--color-blue);
	line-height: 0.8;
	font-size: 16px;
	text-align: center;
	padding: 0;
	margin: 0;
	font-weight: 600;
	font-family: Poppins, sans-serif;
}

.not-found-message span:first-child {
	font-size: 15.2vw;
	padding: 10px 0 0 0;
}

.not-found-message span:nth-child(2) {
	font-size: 5vw;
	padding: 10px 0;
}

.not-found-message span:last-child {
	font-size: 1.6vw;
	padding: 10px 0;
}

@media screen and (max-width: 768px) {
	.not-found-message span:first-child {
		font-size: calc(15.2vw * 1.5);
	}

	.not-found-message span:nth-child(2) {
		font-size: calc(5vw * 1.5);
	}

	.not-found-message span:last-child {
		font-size: calc(1.6vw * 1.5);
	}
}

@media screen and (max-width: 420px) {
	.not-found-message span:first-child {
		font-size: calc(15.2vw * 1.9);
	}

	.not-found-message span:nth-child(2) {
		font-size: calc(5vw * 1.9);
	}

	.not-found-message span:last-child {
		font-size: calc(1.6vw * 1.9);
	}
}









/*-----------------------------------------------------------------------------------------
2001 FRAME-MAP
----------------------------------------------------------------------------------------- */
.frame-map {
	position: relative;
	padding-bottom: 66.66666%;
	height: 0;
	overflow: hidden;
}

.frame-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	.frame-map {
		padding-bottom: 100%;
	}
}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 420px) {
	.frame-map {
		padding-bottom: 150%;
	}
}

@media screen and (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
3001 FIRST-VIEW
----------------------------------------------------------------------------------------- */
.first-view-video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border: 0px solid red;
}

.first-view-video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* .first-view-video {
	width: 100%;
	height: calc(100vh - 119px);height:100vh !important;
	position: fixed;
	top: 119px;top:0;
	left: 0;
	overflow: hidden;
	z-index: 0;
	border: 10px solid red;
	transition:0.5s
} */

/* .first-view-video video {
	min-width: 100%;
	height:100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	border: 0px solid green;
} */

/* .first-view-copy {
	border: 0px solid green;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.2);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-justify-content: center;
	-ms-flex-pack: justify;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}

.first-view-copy h2 {
	width: auto;
	height: 50vh;
	max-height: 700px;
}

.first-view-copy h2 img {
	width: auto;
	height: 100%;
} */

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	.first-view-video {
	padding-bottom: 100%;
}

.first-view-video video {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) ;

	width: auto;
	height: 100%;
}

}
@media screen and (max-width: 520px) {
	.first-view-video {}

}

@media screen and (max-width: 420px) {
	.first-view-video {}
}

@media screen and (max-width: 375px) {}




/*-----------------------------------------------------------------------------------------
3002 main-contents
----------------------------------------------------------------------------------------- */
main.main-contents {
	border: 0px solid red;
	/* margin-top: 100vh; */
	background: white;
	padding-top:0;
}

.main-contents section {
	padding: 6.0rem 0;
}

.main-contents h3 {
	font-size: calc(3.0rem * 1.2);
	line-height: 1.5;
	text-align: center;
	font-weight: 600;
	margin-bottom: 0.75em;
}

.main-contents p {
	font-size: 1.6rem;
	line-height: 1.8;
	margin: 1em 0;
}

a.view-more {
	font-size: 1.7rem;
	line-height: 1;
	font-weight: 600;
	text-align: center;
	display: block;
	padding: 0;
	margin: .5rem 0;
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	.main-contents h3 {
		font-size: calc(3.0rem * 1.1);
	}

	.main-contents p {
		font-size: 2.0rem;
	}
}

@media screen and (max-width: 520px) {
	.main-contents h3 {
		font-size: calc(3.0rem * 1.0);
	}
}

@media screen and (max-width: 420px) {}

@media screen and (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
3003 area-message
----------------------------------------------------------------------------------------- */
.area-message {
	border: 0px solid red;
	padding-left: 5vw !important;
	padding-right: 5vw !important;
}

.area-message .area-text p {
	margin-bottom:1em !important;
}


@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 420px) {}

@media screen and (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
3004 area-info
----------------------------------------------------------------------------------------- */
.area-info {
	padding: 3.0rem 0;
	background:var(--color-blue);
	position: relative;
}

.area-info dl,
.area-info dl dt,
.area-info dl dd {
	padding: 0;
	margin: 0;
}

.area-info dl dt {
	border: 1px solid white;
}

.area-info li {
	padding: 0 1.0rem;
}

.area-info h4 {
	font-size: 1.7rem;
	line-height: 1.4;
	font-weight: 600;
}

.area-info time {
	font-size: 1.3rem;
	padding: 0;
	margin: 1.5rem 0 0.5em 0;
	display: block;
}

.area-info a.view-more {
	position: absolute;
	top: 7px;
	right: 0;
	margin-right: 3.0rem;
	font-size: 1.5rem;
	font-weight: 600;
}

button.slick-arrow {
	display: none !important;
}


@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	.area-info {
		padding-bottom: 6.0rem;
	}

	.area-info .col-12 {
		padding: 0;
	}

	.area-info a.view-more {
		position: absolute;
		top: auto;
		bottom: 3.0rem;
		right: auto;
		left: 50%;
		margin: 0;
		font-size: 1.5rem;
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
	}
}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 420px) {}

@media screen and (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
3005 main-contents >>> area-contents
----------------------------------------------------------------------------------------- */
.area-contents {
	padding: 0;
	background: white;
	border: 0px solid pink;
}

.area-contents dl {
	border: 0px solid black;
	padding: 12.0rem 0 12.0rem;
	margin: 0;
	background: inherit;
	popsition: relative;
}
.area-contents dl:first-child {
	padding-top:0;
}

.area-contents dl dt,
.area-contents dl dd {
	border: 0px solid purple;
	padding: 0;
	margin: 0;
	position: relative;
}

.area-contents dl dt {
	width: 35%;
	z-index: 201;
	order: 1;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	transform: translate(6.0rem, 9.0rem);
}

.area-contents dl dd {
	width: calc(65% + 12.0rem);
	z-index: 200;
	order: 2;
	margin-left: -12.0rem;
}

.area-contents aside {
	background: white;
	display: block;
	padding: 0;
	margin: auto 0 0 0;
	border: 0px solid red;
}

.area-contents .area-text {
	padding: 1.5rem 3.0rem;
	margin: 0;
}

.area-contents h2 {
	background:var(--color-blue);
	font-size: 4.0rem;
	font-size: calc(4.0vw * 0.6);
	line-height: 1.2;
	color: white;
	padding: 1.5rem 3.0rem;
	margin: 0;
	text-align: left;
	font-weight: 300;
}

.area-contents h3 {
	font-size: 4.0rem;
	font-size: calc(4.0vw * 0.8);
	line-height: 1.2;
	color:var(--color-blue);
	padding: 0.5rem 0;
	margin: 0;
	text-align: left;
}

/* .area-contents h3 br {
	display: none;
} */

.area-contents h4 {
	font-size: 2.0rem;
	line-height: 1.4;
	padding: .5rem 0;
	margin: 0;
	text-align: left;
	font-weight: 600;
}

.area-contents p {
	font-size: 1.6rem;
	line-height: 1.8;
	padding: .5rem 0;
	margin: 0;
	text-align: left;
}

.area-contents blockquote {
	background: #DCDDDE;
	padding: 0.5rem 1.5rem;
	margin: 1.5rem 0;
}

.area-contents dl:nth-child(even) {
	padding-bottom: 9.0rem;
}

.area-contents dl:nth-child(even) dt {
	order: 2;
	transform: translate(0, 9.0rem);
	margin-left: -18.0rem;
}

.area-contents dl:nth-child(even) dd {
	order: 1;
	margin-left: 0;
}

.swiper-container li {
	display: none;
}

.swiper-container li:last-child {
	display: block;
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {

	.area-contents {
		padding: 0;
	}

	.area-contents a:hover {
		opacity: 1;
	}

	.area-contents dl {
		padding: 0;
	}

	.area-contents dl dt,
	.area-contents dl dd {
		width: 100%;
		order: 2;
		transform: translate(0, 0);
	}

	.area-contents dl dd {
		order: 1;
		margin-left: 0;
	}

	.area-contents aside {
		border: 0px solid orange;
		position: relative;
		padding-bottom: 15vw;
	}

	.area-contents .area-text {
		width: 75%;
		padding: 0 2.5vw 5vw 2.5vw;
		margin: 0;
		margin-top: -8.5rem
	}

	.area-contents h2 {
		font-size: 4.75rem;
		font-size: calc(11.0vw * 0.6);
		line-height: 1.1;
		padding: 0.5em 0.25em 1em 0.25em;
		margin: 0;
		position: absolute;
		top: -3em;
		right: 5vw;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		letter-spacing: 0.05em;
	}

	.area-contents h3 {
		font-size: 7.0rem;
		line-height: 1.1;
		color:var(--color-blue);
		padding: 0;
		margin: 0;
		text-align: left;
	}

	.area-contents h3 br {
		display: block;
	}

	.area-contents h4 {
		font-size: calc(2.0rem * 1.25);
	}


	.area-contents p {
		font-size: calc(1.6rem * 1.25);
	}

	.area-contents blockquote {
		background: #DCDDDE;
		padding: 1.0rem;
		margin: 1.5rem 0;
	}

	.area-contents dl:nth-child(even) {
		padding-bottom: 0;
	}

	.area-contents dl:nth-child(even) dt {
		order: 2;
		transform: translate(0, 0);
		margin-left: 0
	}

	.area-contents dl:nth-child(even) dd {
		order: 1;
		margin-left: 0;
	}

	.area-contents dl:nth-child(even) h2 {
		right: auto;
		left: 5vw;
	}

	.area-contents dl:nth-child(even) .area-text {
		margin-right: 0;
		margin-left: auto;
	}
}

@media screen and (max-width: 520px) {

	.area-contents .area-text {
		width: 75%;
		margin-top: -6.25rem
	}

	.area-contents h2 {
		font-size: calc(5.0rem * 0.7);
	}

	.area-contents h3 {
		font-size: calc(7.0rem * 0.9);
	}

	.area-contents h4 {
		font-size: calc(2.0rem * 1.0);

	}

	.area-contents p {
		font-size: calc(1.6rem * 1.0);
	}

	.area-contents blockquote {
		margin: 1.0rem 0;
	}
}

@media screen and (max-width: 420px) {
	.area-contents h2 {
		right: 2.5vw;
	}

	.area-contents dl:nth-child(even) h2 {
		left: 2.5vw;
	}
}

@media screen and (max-width: 375px) {}










/*-----------------------------------------------------------------------------------------
3006 area-guidemap
----------------------------------------------------------------------------------------- */
.main-contents section.area-guidemap {
	padding-bottom:0;}

.area-guidemap a {
	display: block;
}

.area-guidemap img {
	/* border: 4px solid #5CC2D0; */
	/* border-radius: 3.0rem; */
	display: block;
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 420px) {}

@media screen and (max-width: 375px) {}











/*-----------------------------------------------------------------------------------------
3007 main-contents >>> area-contents >>> blockquote.text TYPO
----------------------------------------------------------------------------------------- */
blockquote.text h1,
blockquote.text h2,
blockquote.text h3,
blockquote.text h4,
blockquote.text h5,
blockquote.text h6,
blockquote.text p,
.area-message .area-text h1,
.area-message .area-text h2,
.area-message .area-text h3,
.area-message .area-text h4,
.area-message .area-text h5,
.area-message .area-text h6,
.area-message .area-text p {
	text-align: left;
	padding: 0;
	margin: 1em 0;
	font-size: 1.0rem;
	line-height: 1.2;
	color: inherit;
}

blockquote.text h1,
.area-message .area-text h1 {
	font-size: 3.3rem;
	font-weight: 600;
	margin: 0.5em 0;
}

blockquote.text h2,
.area-message .area-text h2 {
	font-size: 3.3rem;
	font-weight: 600;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	margin: 0.5em 0;
}

blockquote.text h3,
.area-message .area-text h3 {
	font-size: 2.2rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0.5em 0;
}

blockquote.text h4,
.area-message .area-text h4 {
	font-size: 2.2rem;
	font-weight: 600;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	line-height: 1.4;
	margin: 0.5em 0;
}

blockquote.text h5,
.area-message .area-text h5 {
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.7;
}

blockquote.text h6,
.area-message .area-text h6 {
	font-size: 1.4rem;
	font-weight: 600;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	line-height: 1.7;
}

blockquote.text p,
.area-message .area-text p {
	font-size: 1.6rem;
	line-height: 1.8;
	margin: 0.5em 0;
}

blockquote.text br {
	display: block !important;
}

blockquote.text {
	width: 100% !important;
}





















/*-----------------------------------------------------------------------------------------
4001 トップページ調整
----------------------------------------------------------------------------------------- */
/* ----- ADD 2024-07-21 ----- */
.area-contents h2 {
font-size: 3.5rem;
font-weight:600;
}

.area-contents h3 {
font-size:5.6rem;
word-break:keep-all;
}
@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	.area-contents {
		border:0px solid green;
	}

	.area-contents .area-text {
		margin-top: 1.5rem;
	}

	.area-contents h2 {
	font-size:calc( 3.5vw * 1.5);

	}

	.area-contents h3 {
	font-size:calc( 5.0vw * 1.5);
	margin-bottom:1.5rem;
	}
}

@media screen and (max-width: 520px) {
	.area-contents .area-text {
		margin-top: 1.5rem
	}

	.area-contents h2 {
	font-size:calc( 3.5vw * 1.9);

	}

	.area-contents h3 {
	font-size:calc( 5.0vw * 1.9);
	}
}

@media screen and (max-width: 420px) {}

@media screen and (max-width: 375px) {}











/*-----------------------------------------------------------------------------------------
5001 モーダル
----------------------------------------------------------------------------------------- */
.modal-wrapper {
	z-index: 1999;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
	border: 0px solid blue;
	transition: opacity .5s, visibility .5s;
	width:100%;
	height:100%;
	justify-content : center;
	align-items : center;
	display : flex;
	flex-wrap : wrap;
	padding: 0;
	margin:0;
}

.modal-wrapper:not(:target) {
	opacity: 0;
	visibility: hidden;
}

.modal-wrapper:target {
	opacity: 1;
	visibility: visible;
}

.modal-overlay {
	z-index: 10;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width:100%;
	height:100%;
	background: rgba(0, 0, 0, 0.8)
}
.modal-overlay:hover {
	opacity:1;
}

.modal-wrapper .modal-window {
	display: block;
	z-index: 20;
	position: relative;
	width: 90%;
	max-width:600px;
	padding: 0;
	border-radius: 0.2rem;
	background: #fff;
	box-shadow: 0 0 3.0rem rgba(0, 0, 0, .9);
}



.modal-wrapper .modal-window .modal-content {
	max-height: 85vh;
	overflow-y: auto;
	text-align: left;
	padding:4.0rem
}


.modal-wrapper .modal-close {
	z-index: 20;
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 3.5rem;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 3.5rem;
	text-align: center;
	text-decoration: none;
	text-indent: 0;
	color: white !important;
	background:#ccc
}

.modal-content p {
	font-size: 1.6rem;
	line-height: 1.7;
	padding: 0;
	margin: 1.5rem 0;
}

.modal-window .btn-more {
	font-size:2.0rem;
	padding:0.5em;
	margin:1em  auto;
	justify-content : center;
	align-items : center;
	display : flex;
	flex-wrap : wrap;
	background:#9FA0A0;
	font-weight:600;
	color:white;
	width:calc( 100% - 2.0rem - 2.0rem);
	border-radius:0.5rem;
	display:none;
}

.modal-content figure {
	padding: 0;
	margin: 1.5rem 0;
	border: 0px solid #ddd;
}

.modal-content figure img {
	padding: 0;
	margin: 0;
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 520px) {
	.modal-wrapper .modal-window {
	display: block;
	z-index: 20;
	position: relative;
	width: 80%;
}
}
@media screen and (max-width: 420px) {}

@media screen and (max-width: 375px) {}












/*-----------------------------------------------------------------------------------------
5002 area-detail
----------------------------------------------------------------------------------------- */
.main-contents section.area-detail {
	padding-top:1.5rem;
}
/* ----- モーダルのトリガーの方 ----- */
dl.modal {
	padding:0.4rem 0;
	margin:0 auto;
	justify-content : center;
	display : flex;
	flex-wrap : wrap;
	width:100%;
	border-top:1px solid #ddd;
}

dl.modal dt,
dl.modal dd {
	border:0px solid green;
	width:10.0rem;
	padding:0.5rem
}

dl.modal dd {
	border:0px solid blue;
	width:calc( 100% - 10.0rem);
	align-items : center;
	display : flex;
	flex-wrap : wrap;
}

dl.modal dt img {
	border:0px soplid red;
	width:auto;
	height:5.0rem;
	padding:0;
	margin:0 auto;
}

dl.modal .inner-box {
	border:0px solid red;
	display : flex;
	flex-wrap : wrap;padding:0;
	margin:0;
}

dl.modal .modal-trigger-btn {
	border:0px solid green;
	padding:0.5em;
	font-size:2.0rem;
	font-weight:600;
}

dl.modal .modal-trigger-btn small {
	display:none;
}

dl.modal .modal-trigger-btn::before {
	content:'●';
	margin-right:0.15em;
	color:var(--color-orange);
}

.second dl.modal .modal-trigger-btn::before {
	color:var(--color-blue);
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	dl.modal {
		border:none;
	}

	dl.modal .inner-box {
		display:block;
	}

	dl.modal .modal-trigger-btn {
		font-size:2.4rem;
	}
}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 420px) {
	dl.modal .modal-trigger-btn {
		font-size:2.0rem;
	}
}

@media screen and (max-width: 375px) {}









/* ----- 調整 ----- */
@media screen and (max-width: 768px) {
.home .container,
.area-contents dl dt{
	border:0px solid red;
	width: calc(100% - 4.0rem + 2.0rem);
	margin-left:0;
}
}


@media screen and (max-width: 520px) {
	.home .container,
.area-contents dl dt{
	width: calc(100% - 5.0rem + 1.5rem);
}
}

@media screen and (max-width: 420px) {
	.home .container,
.area-contents dl dt{
	width: calc(100% - 4.0rem + 1.0rem);
}
}