@charset "UTF-8";

/*縦スクロールバーエリアを表示*/
html {
    overflow-y: scroll;
    overflow-x: hidden;
}

body {
    width: 100%;
    font-family:'じゅん 501','Noto Sans JP',  sans-serif, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif, "ヒラギノUD丸ゴ W3 JIS2004", Hiragino UD Sans Rd W3 JIS2004,Hiragino UD Sans F W5 JIS2004,"ヒラギノUD角ゴF W5 JIS2004";
	font-weight:400;
    margin: 0;
    padding: 0;
    height: 100%;
	color: #717071;
	font-size:16px;
	position:relative;
  background:#FFFBEF;
}
/* @group Reset */
* {
    margin: 0;
    padding: 0;
}

/*通常*/
a:link {
    /*color: rgba(107, 58, 6, 1);*/
    color: #6B6452;
    text-decoration: none;
    padding-right: 1px;
    padding-left: 1px;
	transition:.3s;
}

/*閲覧済み*/
a:visited {
    /*color: rgba(107, 58, 6, 1);*/
    color: #6B6452;
    text-decoration: none;
}

/*マウスオン*/
a:hover {
    /*color: rgba(107, 58, 6, 1);*/
}

/*クリック中*/
a:active {
    /*color: rgba(107, 58, 6, 1);*/
    text-decoration: none;
    background-color: transparent;
}

/*クリック時の枠線*/
a {
    padding: 0 0 0 0px;
    outline: none;
}

ul, ol {
    list-style: none;
}

img {
    vertical-align: middle;
    max-width: none;
}
svg {
  fill: currentColor;
}

/* @end */

/* @group Fluid-img */
img {
    width: auto;
}
/* @end */

/* @group HTML */
html {
    width: 100%;
    font-size: 100%;
    line-height: 1.68;
}
/* @end */
div, p {
    text-align: justify;
    text-justify: inter-ideograph;
}
#container {
    width: 100%;
    height: auto;
    display: block;
	overflow:hidden;
}
	#container.top{
		margin-top: 140px;
	}
header {
	height: 140px;
	display: flex;
	align-items: center;
	background: #fff;
	justify-content: center;
	position: fixed;
	top: 0;
	z-index: 9999;
	width: 100%;
	background: url(/parts/head_line.svg) repeat-x #fff;
}
header .inner{
	width: 1000px;
	margin: 0 auto;
	display: flex;
	position:relative;
	align-items: flex-end;
	justify-content: space-between;
    padding: 0 20px;
    box-sizing: content-box;
}
header h1{
	display:block;
	position: relative;
	z-index: 9999;
}
header .inner > a,
header .inner > div{
	position: absolute;
	right: 0;
	top: 0;
	font-size: 30px;
	color: #FF7807;
}
header .inner > div{
	text-align: right;
	top: -20px;
}
header .inner > div a{
	color: #FF7807;
}
header .inner > div p{
	font-size:14px;
	margin-top: -8px;
}
header .inner > a img,
header .inner > div a img{
	margin-right:10px;
}
.key_visual{
	width:100vw;
  height: 100vh;
	background: url(../parts/key_visual_bg.jpg) center center / cover no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position:relative;
	font-size: 23px;
	line-height: 47px;
	font-family: "Maru Folk Medium";
	color: #A28977;
}
.key_visual strong{
	position: absolute;
	top: 50%;
	margin-top: -8em;
}
#box {
}
#main{
}
.contents{
	margin:0 auto 80px;
	position:relative;
	width: 1200px;
}
h1,h2,h3{
  font-family:"Maru Folk Medium";
}
.top .contents h2{
	font-size:36px;
  background: #FF7807;
  color:#fff;
  text-align: center;
	position:relative;
	padding: 30px 0;
	margin: 0 -100% 50px;
}
.top #about h2{
  background:url(../parts/h2_about.svg) center center no-repeat #FF7807;
}
.top #program h2{
  background:none;
  color:#FF7807;
  margin: 0;
}
	.top #program h2 + p{
		text-align:center;
		margin:0 0 30px;
	}
.top #flow h2{
  background:url(../parts/h2_flow.svg) center center no-repeat #FF7807;
}
.top #user h2{
	background:url(../parts/h2_user.svg) center center no-repeat #FF7807;
}
.top #staff h2{
  background:url(../parts/h2_staff.svg) center center no-repeat #FF7807;
}
.top #access h2{
  background:url(../parts/h2_access.svg) center center no-repeat #FF7807;
}
.top #access.contact h2{
  background:url(../parts/h2_contact.svg) center center no-repeat #FF7807;
}
.top .four_block{
	display: flex;
	flex-wrap: wrap;
}
.top .four_block picture img{
	display:block;
	width:100%;
}
.top .four_block > div{
	    width: calc(100% / 3 + 1px);
}
	.top .four_block > div:nth-of-type(2n),
.top .four_block > div:nth-of-type(3n){
		margin-left:-2px;
	}
.top .four_block h3{
  color:#fff;
  font-size:24px;
  text-align: center;
  position:relative;
  padding: 15px 0 15px;
  font-family: "じゅん 501";
}
.top .four_block a{
	display:block;
}
.four_block h3 span{
	display: block;
	font-size: 18px;
}
	.four_block h3 span img{
		margin-right: 5px;
	}
.block_01 h3,
.program #service_01 h2{
  background:#FF87D2;
}
.block_02 h3,
.program #service_02 h2{
  background:#40DC00;
}
.block_03 h3,
.program #service_03 h2{
  background:#00B7FF;
}
.block_04 h3,
.program #service_04 h2{
  background:#A89DFF;
}

#program{
	width:auto;
	margin-bottom:0;
}
#flow{
	width:900px;
	margin:0 auto 80px;
}
#flow dl.visit{
	border: 2px solid #FF87D1;
	background: #fff;
	padding: 30px 40px 60px;
	margin: 0px 0 80px;
	border-radius: 20px;
	position: relative;
}
#flow dl.visit dt{
	font-size: 28px;
	color: #FF87D2;
	text-align: center;
	margin: 0 0 30px;
}
	#flow dl.visit dt:before,
	#flow dl.visit dt:after{
		content:"★";
	}
#flow dl.visit dd{
	font-size:20px;
	margin: 0 0 10px;
}
#flow dl.visit dd.small{
	font-size:15px;
	margin:0 0 0;
}
#flow dl.visit dd:not(.small):first-letter{
	color: #FF87D2;
}
#flow dl.visit img{
	position: absolute;
	left: 0;
	bottom: -75px;
}
#flow dl.visit + img{
	margin:0 0 30px;
}
#flow .qa_block{
	display: flex;
	justify-content: space-between;
}
#flow .qa_block div{
	background: #FF87D2;
	color: #fff;
	border-radius: 20px;
	padding: 40px 30px 20px;
	width: 440px;
}
#flow .qa_block dt{
	font-size: 28px;
	color: #FF0;
	margin: 0 0 40px;
	text-align: center;
}
#flow .qa_01 dd{
	margin:0 0 20px;
}
#flow .qa_01 img{
	display:block;
	margin:0 auto;
}
#flow .qa_02 p{
	text-align:center;
}
#flow .qa_02 p + p{
	margin:0 0 40px;
}
#flow .qa_02 strong{
	display:block;
	color: #FF0;
	font-size: 20px;
	margin:0 0 0px;
}
#flow .user_agreement{
  color:#ff7807;
  border:solid 1px #ff7807;
  border-radius: 20px;
  padding: 45px 30px;
  margin: 88px auto 0;
}
#flow .user_agreement:has(.table_orange){
	border: none;
	padding: 0;
	color: #717071;
}
#flow .user_agreement p{
	margin-bottom: 40px;	
}
#flow .user_agreement strong{
  text-align:center;
  font-size: 28px;
  display:block;
  margin: 0 0 40px 0;
}
#flow .user_agreement ul{
  display: flex;
  justify-content:space-between;
    flex-wrap: wrap;
    gap: 20px 0;
}
#flow .user_agreement li{
    width: 410px;
    min-height: 80px;
    font-size: 20px;
    border-radius: 20px;
    background-color: #ff7807;
}
#flow .user_agreement li a{
  width: 100%;
  color:#fff!important;
  text-align: center;  color:#ff7807;
    padding: 0 10px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#flow .user_agreement li:nth-child(4){
    font-size: 18px;
}
#staff,
#access{
	width:900px;
}
dl.table_orange{
	display:flex;
	flex-wrap:wrap;
	margin: 0 0 0px;
}
dl.table_orange dt,
dl.table_orange dd{
	padding-bottom:15px;
	margin:0 0 20px;
	border-bottom: 1px solid #717071;
}
dl.table_orange dd .hyuoka{
  margin:0 0 0 30px;
}
dl.table_orange dt{
	color:#FF7807;
	width:280px;
	padding-left: 40px;
}
dl.table_orange dd{
	width:calc(100% - 280px);
}
.element p{
    margin-bottom: 20px;
}
a.underline{
  text-decoration:underline;
}
input[type="checkbox"]{display:none;}
label.park-check{
	width: 100%;
	display: block;
	background: #FF85D0;
	color: #fff;
	text-align: center;
	padding: 15px 0;
	font-size: 28px;
	position: relative;
}
	label.park-check:after{
		content:"";
		background:url(../parts/icon_cbox.svg) no-repeat;
		background-size: contain;
		width:30px;
		height:30px;
		display: block;
		position:absolute;
		top: 0;
		bottom: 0;
		right:20px;
		margin: auto;
		cursor:pointer;
		transform: rotate(180deg);
	}
.park_box{
	background: #fff;
	height: 0;
	overflow: hidden;
	opacity: 0;
	padding: 0 30px;
	transition:.3s;
	border: 2px solid #FF85D0;
}
.park-check:checked ~ .park_box{
	max-height:1500px;
	height:100%;
	padding:30px;
	opacity:1;
}
.park-check:checked + label.park-check:after{
	transform:none;
}
.park_box dl{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 60px 0 0;
}
.park_box dl dt{
	width: 53%;
	max-width:400px;
	margin-right:30px;
}
	.park_box dl dt:nth-child(3){
		margin-top:30px;
	}
.park_box dl dd{
	max-width:375px;
	width:40%;
	display: flex;
	justify-content: center;
	margin:0 0 30px;
}
.park_box img{
	display:block;
	max-width:100%;
}
.park_box h3{
	font-size:28px;
	margin:0 0 15px;
	color: #FF7807;
}
.park_box p{
	font-size:20px;
}
.park_box picture + p{
	margin-top:40px;
}
#exterior{
	display:flex;
	width: 1200px;
	margin: 0 auto 60px;
	height: 800px;
	overflow: hidden;
}
#exterior h4{
	font-size: 20px;
	color: #fff;
	background: #FF7808;
	padding: 15px 0 10px;
	text-align: center;
}
#exterior > div:nth-of-type(1){
	margin-right:5px;
	overflow: hidden;
}
#exterior > div:nth-of-type(1) picture{
	display: flex;
	height: 100%;
	justify-content: center;
}
#exterior > div:nth-of-type(1)
#exterior > div:nth-of-type(1) img{
	display:block;
	width:100%;
}
#pdf{
	width:800px;
}
#pdf a{
	width: 370px;
	display: inline-block;
	background: #FF7807;
	color: #fff;
	text-align: center;
	padding: 37px 0;
	font-size: 20px;
}
	#pdf a:nth-of-type(1){
		margin-right: 50px;
	}

#about .element{
	text-align:center;
}

footer{
	background: #fff;
	padding: 60px 0 0;
}
footer .inner{
	display:flex;
	justify-content: center;
}
footer img{
	margin-right:40px;
}
footer .address{
	margin-right: 70px;
}
footer .address li:first-child a{
	display:block;
}
footer .address li:nth-child(2) a{
	margin-right:15px;
}
footer .link a{
	color:#FF7807;
}
.copyright{
	background: #707070;
	color: #fff;
	margin: 40px 0 0;
	font-size: 14px;
	padding: 15px 0;
}
.copyright p{
	text-align: center;
}

/* スライダー */
.bx-wrapper{
	box-shadow: none;
	border: none;
}

#page-top{
	position: fixed;
	right: 40px;
	bottom: 100px;
}
	#page-top a{
		display: block;
		text-indent: 1em;
		width:30px;
		height:30px;
		background:url(/parts/pagetop.png) no-repeat;
		background-size:contain;
		text-indent: -999em;
	}

/*TELタッチでコール*/
@media(min-width: 768px){
    a[href^="tel:"]{
      pointer-events: none;
    }
}

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

	#container{
		min-width:320px;
	}

	.contents, #flow, #staff, #access{
		width:auto;
	}
	header .inner{
		width:100%;
		margin: 0 20px;
	}

	header h1{
		height: 100%;
	}

	.contents{
		margin:0 20px 80px;
	}
	#flow{
		margin:0 20px 140px;
	}
	.top #flow h2{
		margin: 0 -20px 50px;
	}
	#flow .qa_block div{
		width:48%;
	}
	#exterior{
		width: auto;
		justify-content: space-between;
	}
	#exterior > div{
		width:48%;
	}
	#exterior > div:nth-of-type(1){
		margin-right:0;
		overflow: hidden;
	}
	#pdf{
		width: auto;
		display: flex;
		justify-content: center;
	}
	#pdf > div{
		width:100%;
	}
	#pdf a{
		max-width:370px;
		width:48%;
	}

	footer .inner{
		margin:0 20px;
	}
	footer img,
	footer .address{
		margin-right: 20px;
	}

}

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

	header{
		height:60px;
		background-image:none;
	}
	header h1{
		height: 50px;
		/*overflow: hidden;*/
	}
		header h1 img{
			height:100%;
			padding: 4px 0;
		}
		header h1 a{
			display: flex;
			height: 100%;
		}
	header .inner > a{
		display:none;
	}
	header .inner > div{
		display:none;
	}

	.key_visual strong{
		margin-top: -17vw;
		font-size: 3vw;
		line-height: 4vw;
	}
	.key_visual img{
		width: 95%;
		max-width: 678px;
	}

	.contents{
		margin-bottom:50px;
	}
	.top .contents h2{
		font-size:24px;
		padding: 20px 0;
	}

	#program{
		margin: 0 0 80px;
	}
	.top .four_block{
		flex-direction: column;
		align-items: center;
	}
	.top .four_block h3{
		font-size:20px;
	}
	.four_block h3 span{
		font-size:15px;
	}
	.top .four_block > div{
		width: 100%;
	}
		.top .four_block > div a{
			width:100%;
		}
	#flow{
		margin-bottom:50px;
	}
	#flow dl.visit dt,
	#flow .qa_block dt{
		font-size: 20px;
	}
	#flow dl.visit dd{
		font-size:18px;
	}
	#flow .qa_block dt{
		margin: 0 0 15px;
	}
	#flow .qa_02 strong{
		font-size:18px;
	}
	#flow dl.visit + img{
		max-width:900px;
		width:100%;
	}
	#flow .qa_block{
		flex-direction: column;
		align-items: center;
	}
	#flow .qa_block div{
		width:100%;
	}
		#flow .qa_block div:first-child{
			margin-bottom:50px;
		}
#flow .user_agreement{
  padding: 20px;
  margin:50px auto 0;
}
#flow .user_agreement ul{
    gap: 30px 0;
}

#flow .user_agreement li{
  width:100%;
}
	dl.table_orange dt{
		padding-left: 10px;
		padding-right: 20px;
		width: 35%;
	}
	dl.table_orange dd {
		width: calc(100% - 35%);
	}
	.park_box{
		padding: 0px 10px;
	}
	.park-check:checked ~ .park_box{
		padding:10px;
	}
	.park_box dl{
		display:block;
		margin-top:20px;
	}
	.park_box dl dt, .park_box dl dd{
		width:100%;
		max-width: none;
		margin: 0;
	}
	.park_box dl dd{
		margin:0 0 20px;
	}
	.park_box h3{
		font-size:22px;
	}
	.park_box p{
		font-size: 16px;
		margin: 0 0 20px;
	}
	label.park-check{
		font-size: 22px;
		padding: 7px 0;
	}
	#exterior > div:nth-of-type(1) img{
		max-height: 1700px;
		height: 71vw;
		width: auto;
	}
	#pdf > div{
		text-align: center;
	}
	#pdf a{
		min-width: 300px;
		width: 100%;
	}
	#pdf a:nth-of-type(1){
		margin-right: 0;
		margin-bottom:20px;
	}

	footer {
		clear: both;
		margin: 20px auto 0;
	}
	footer .inner{
		flex-direction: column;
		align-items: center;
	}
	footer img, footer .address{
		margin:0 0 30px;
	}
	footer img{
		height:50px;
	}
	footer .copyright{
		width:100%;
		font-size:12px;
		margin-top:14px;
	}

	#container{
		margin-top:60px!important
	}

	#page-top{
		display: block;
		width: 40px;
		position: absolute;
		bottom: 240px;
		right: 0px;
		margin: 0 auto;
	}
	#page-top a{
		transform:none;
	}
}

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

	.top .four_block{
		margin: 0 -20px 0;
	}
	.top .four_block > div{
		max-width:none;
	}
  a.underline_sponly{
    text-decoration:underline;
  }
}

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

	.key_visual{
		height:auto;
		padding: 22vw 0;
	}
	.key_visual strong{
		top: 22vw;
		margin: 0;
		font-size: 4.8vw;
		line-height: 9vw;
	}

	dl.table_orange dt,
	dl.table_orange dd{
		width:100%;
		padding-left:0;
	}

}



/*------------print---------------------*/
/* 印刷 */
@page {
    margin: 12mm 7mm;
}
@media print {
    body { zoom: 95%; }
    #page-top {
        display: none!important;
    }
}