/*-----------------------
	load
-----------------------*/
.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	background-color: #0096d9;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: loading-fade .75s 2s forwards;
}
	@keyframes loading-fade {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
			visibility: hidden;
		}
	}
.loading_img {
	opacity: 0;
	animation: loading-logo 1.75s 0.25s forwards;
	max-width: 300px;
	width: 45%;
}
	@keyframes loading-logo {
		0% {
			opacity: 0;
			transform: translateY(20px);
		}
		60% {
			opacity: 1;
			transform: translateY(0);
		}
		100% {
			opacity: 0;
		}
	}
	
/*-----------------------
	fv
-----------------------*/
#fv{
	background: #e8e8ea url(../images/index/fv-bg.png) repeat -1px top;
	background-size: 5vw auto;
	position: relative;
	padding-top: 6em;
	padding-bottom: 1.75em;
}
#fv:before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background-color: #f6f6f7;
	border-bottom: 1px solid #dadadf;
	content: "";
}
#movie,
#fv video{
	width: 54vw;
	aspect-ratio: 4/3;
	margin: 0 auto;
	line-height: 0;
}

	@media screen and (min-width:1760px) {
		#movie,
		#fv video{
			width: 48.888888888888886vw;
		}
	}
	@media screen and (max-width:1200px) {
		#fv{
			background-size: 80px auto;
		}
	}
	@media screen and (max-width:800px) {
		#fv{
			background-size: 50px auto;
			padding-top: 6.75em;
			padding-bottom: 1.25em;
		}
		#movie,
		#fv video{
			width: 78.125vw;
		}
	}
	@media screen and (max-width:560px) {
		#movie,
		#fv video{
			width: 91.5vw;
		}
	}
#movie{
	position: relative;
	background: dedede;
}
.frame{
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: url(../images/index/fv-frame-blue.png) no-repeat center;
	background-size: 100% 100%;
}
#fv video{
	display: block;
	object-fit: cover;
	object-position: 50% 50%;
}

/*-----------------------
	information
-----------------------*/
.oshirase-inner{
	max-width: 1160px;
	width: 90%;
	margin: 2.5rem auto 0;
}
.oshirase{
	width: calc(93% - 200px);
}
.sns{
	width: 200px;
}
	@media screen and (max-width:1200px) {
		.oshirase{
			width: calc(95% - 170px);
		}
		.sns{
			width: 170px;
		}
	}

	@media screen and (max-width:800px) {
		.oshirase-inner{
			width: 90%;
		}
		.oshirase{
			width: 100%;
		}
		.sns{
			width: 100%;
			margin-top: 1em;
		}
	}
	@media screen and (max-width:700px) {
		.oshirase-inner{
			margin-top: 1.5em;
		}
	}

/* おしらせ */
.oshirase .tit{
	font-family: "M PLUS 1p", sans-serif;
	font-size: 1.75em;
	font-weight: 500;
	line-height: 1.3;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
	margin-bottom: 1.25em;
}
.oshirase ul{
	width: calc(98% - 85px);
}
.oshirase ul li{
	line-height: 1.5;
	border-bottom: 1px solid #dadada;
	padding: 1.75rem 0 1.75rem 1.25em;
	display: flex;
}
.oshirase ul li:first-child{
	padding-top: 0;
}
.oshirase ul li span{
	color: #0096d9;
	font-size: .875em;
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	padding-right: 2.5em;
	position: relative;
	top: 3px;
}
	@media screen and (max-width:1200px) {
		.oshirase ul{
			width: calc(98% - 65px);
		}
		.oshirase ul li{
			padding-left: 0;
		}
		.oshirase ul li span{
			padding-right: 1em;
		}
	}
	@media screen and (max-width:800px) {
		.oshirase .tit{
			width: 100%;
			-ms-writing-mode: lr-tb;
			writing-mode: horizontal-tb;
			text-align: center;
			margin-bottom: 1.25em;
		}
		.oshirase ul{
			width: 100%;
		}
	}
	@media screen and (max-width:700px) {
		.oshirase .tit{
			margin-bottom: 0;
		}
		.oshirase ul li{
			display: block;
			padding: .5rem 0;
		}
		.oshirase ul li span{
			display: block;
			font-size: 12px;
			margin-bottom: .25em;
		}
	}

/* ブログ+SNS */
.blog a{
	position: relative;
	display: block;
	color: #fff;
	font-size: .9375em;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	height: 52px;
	line-height: 52px;
	margin-bottom: .5em;
	padding-left: 1em;
	border-radius: .5em;
}
.blog a:nth-child(1){
	background: #0096d9;
}
.blog a:nth-child(2){
	background: #c3d600;
}
.blog a:nth-child(3){
	background: #84c35a;
}
.blog a:before{
	position: absolute;
	top: 0;
	right: .75em;
	content: "→";
	transition: .3s all;
}
.blog a:hover:before{
	right: .25em;
}
.sns-icon{
	text-align: center;
}
.sns-icon img{
	width: 52px;
	padding: .25rem .25rem 0 .25em;
}

	@media screen and (max-width:800px) {
		.blog{
			display: flex;
			flex-wrap: wrap;
		}
		.blog a{
			width: calc(100% / 3);
			border-radius: 0;
			height: 68px;
			line-height: 68px;
			margin-bottom: .25em;
		}
		.sns-icon{
			text-align: right;
		}
	}
	@media screen and (max-width:700px) {
		.blog a{
			height: auto;
			line-height: 1.3;
			padding: .5rem 1em;
		}
		.blog a:before{
			top: auto;
			bottom: .5em;
		}
		.blog a span{
			display: block;
		}
		.sns-icon img{
			width: 42px;
		}
	}

/* 診療情報 */
.tel-time-box{
	background: #ececec;
	position: relative;
	justify-content: center;
	padding: 2em 0 2.5em;
	border-radius: .75em;
	margin-top: 1.25em;
}
.tel-time-box .point{
	background: #0096d9;
	font-size: .875em;
	font-weight: bold;
	font-family: "M PLUS 1p", sans-serif;
	color: #fff;
	padding: .25em 1.75em;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: .75em 0 1.5em 0;
}
.tel-time-box .tel{
	font-size: 1.75em;
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	line-height: 1.0;
	margin-top: .375em;
}
.tel-time-box .tel a{
	background: url(../images/common/icon-tel.png) no-repeat left .375em;
	background-size: .5em auto;
	padding-left: .75em;
}
.tel-time-box .txt{
	margin-top: .625em;
	margin-left: 1.25em;
}
.tel-time-box .txt .c-lightblue{
	margin-right: .5em;
	display: inline;
}
	@media screen and (max-width:800px) {
		.tel-time-box{
			width: 86%;
			margin-top: .75em;
			margin-left: auto;
			margin-right: auto;
			padding-left: 1em;
			padding-right: 1em;
		}
		.tel-time-box .tel{
			width: 100%;
			text-align: center;
		}
		.tel-time-box .txt{
			width: 100%;
			margin-left: 0;
			text-align: center;
			padding-left: 1em;
			padding-right: 1em;
		}
	}
	@media screen and (max-width:760px) {
		.tel-time-box .txt .c-lightblue{
			display: block;
		}
	}
	@media screen and (max-width:560px) {
		.tel-time-box{
			padding-top: 2em;
			padding-bottom: 1.5em;
		}
		.tel-time-box .inline-block{
			display: block;
		}
	}

/*-----------------------
	shnryo
-----------------------*/
#shinryo{
	position: relative;
	margin-top: 2.25em;
	padding-bottom: 2.25em;
}
.bg-shinryo{
	position: relative;
	background: url(../images/index/bg-shinryo.jpg) no-repeat 45% center;
	background-size: cover;
	z-index: 0;
	width: 100%;
	height: 580px;
}
.bg-shinryo .tit{
	height: 24vw;
	font-size: 1.625em;
	font-family: "Kosugi Maru", sans-serif;
	letter-spacing: -1px;
	font-feature-settings: "palt";
	line-height: 1.2;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	white-space: nowrap;
}
.bg-shinryo .tit span{
	padding: .375em;
	background: #fff;
	margin: 0 .5em;
	display: inline-block;
}
.shinryo-cicle svg{
	position: absolute;
	bottom: -1px;
	z-index: 1;
}
	@media screen and (max-width:1200px) {
		.bg-shinryo{
			height: 410px;
		}
		.bg-shinryo .tit{
			font-size: 1.5em;
			top: calc(50% - .5em);
		}
	}
	@media screen and (max-width:800px) {
		#shinryo{
			margin-top: 1.75em;
			padding-bottom: 1.75em;
		}
		.bg-shinryo{
			height: 360px;
		}
		.bg-shinryo .tit{
			font-size: 1.28571428571em;
			top: calc(50% - 1.5em);
		}

	}
	@media screen and (max-width:560px) {
		.bg-shinryo{
			height: auto;
			aspect-ratio: 56 / 47;
		}
		.bg-shinryo .tit{
			top: calc(50% - 1.5em - 40px);
		}


	}

.btn-shinryo a{
	position: relative;
	z-index: 2;
	max-width: 360px;
	width: 65%;
	background: #0096d9;
	box-shadow: 0 .25em .75em 0 rgba(0, 0, 0, .1);
	border-radius: 5em;
	font-size: 1.75em;
	font-family: "M PLUS 1p", sans-serif;
	text-align: center;
	color: #fff;
	padding: .375em .5em;
	display: block;
	margin:  -1.25em auto 0;
	transition: .3s all;
}
	@media screen and (max-width:800px) {
		.btn-shinryo a{
			max-width: 300px;
			font-size: 1.5em;
			padding: .25em 0;
		}
	}


.btn-shinryo a:before{
	position: absolute;
	top: 50%;
	right: 1em;
	z-index: 2;
	content: "→";
	font-family: "M PLUS 1p", sans-serif;
	transform: translateY(-50%);
	transition: .3s right;
}
.btn-shinryo a:hover{
	background: #19a1dd;
}
.btn-shinryo a:hover:before{
	right: .5em;
}

/*-----------------------
	予防カレンダー
-----------------------*/
.yobo-calendar{
	background: #eeeeee;
	padding-bottom: 1em;
	margin-bottom: 1.25em;
}
.month-tit{
	position: relative;
	text-align: center;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 500;
	padding: 0 1em;
	border-bottom: 1px solid #e0e0e0;
}
.month-tit .tit{
	position: absolute;
	top: 1em;
	left: 1.5em;
	font-size: 1.25em;
	letter-spacing: -1px;
}
.month-tit .month span{
	font-size: 2.25em;
	font-weight: bold;
	padding: 0 .25em;
}
.calendar-detali{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #e0e0e0;
}
.yobo-detali{
	border-bottom: 1px solid #e0e0e0;
}
.calendar-detali div{
	width: 3.22580645161%;
	font-weight: 500;
	text-align: center;
	padding: .75em 0;
	border-left: 1px solid #e0e0e0;
}
.calendar-detali div:before{
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	background: #e0e0e0;
	content: "";
}
.yobo-detali{
	position: relative;
	border-bottom: 1px solid #e0e0e0;
	background-image: repeating-linear-gradient(90deg, #e0e0e0, #e0e0e0 1px, transparent 1px, transparent calc(3.22580645161%));
}

	@media screen and (max-width:800px) {
		.yobo-calendar{
			padding-bottom: .5em;
			margin-bottom: 1.25em;
		}
		.calendar-scroll{
			overflow-x: scroll;
		}
		.calendar-scroll .detali-body{
			width: 780px;
		}
		.month-tit .tit{
			font-size: 1.14285714285em;
			top: 1.25em;
			left: 1.25em;
		}
		.month-tit .month span{
			font-size: 2em;
		}
	}
	@media screen and (max-width:560px) {
		.month-tit .tit{
			font-size: 1em;
		}
	}

/* 月が31日の場合
------------------------*/
.number31 .allmonth{
	width: calc(3.22580645161% * 31);
}

/* 月が30日の場合
------------------------*/
.number30 .num:nth-child(31){
	color: #bbb;
}
.number30 .allmonth{
	width: calc(3.22580645161% * 30);
}
/* 月が28日の場合
------------------------*/
.number28 .num:nth-child(31),
.number28 .num:nth-child(30),
.number28 .num:nth-child(29){
	color: #bbb;
}
.number28 .allmonth{
	width: calc(3.22580645161% * 28);
}
/* 月が29日の場合
------------------------*/
.number29 .num:nth-child(31),
.number29 .num:nth-child(30){
	color: #bbb;
}
.number29 .allmonth{
	width: calc(3.22580645161% * 29);
}
/* 
少しだけの期間のイベントがある場合
fewmonth を追加する
------------------------*/
.fewmonth_day5{
	width: calc(3.22580645161% * 27);
	margin-left: calc(3.22580645161% *4);
}
.fewmonth_day15{
	width: calc(3.22580645161% * 17);
	margin-left: calc(3.22580645161% *14);
}

/* 装飾
------------------------*/
.event {
	display: block;
	transition: .5s all;
}
a.event:hover{
	filter: brightness(0.9);
}
.event span.arw{
	padding-right: 1.25em;
	background: url(../images/common/icon-arw-black.svg) no-repeat right center;
	background-size: 1em auto;
	transition: .3s all;
}
.event:hover span.arw{
	padding-right: 1.75em;
}
.yearround{
	padding: .25em 1.25em;
}
.season{
	padding: 1em 1.25em;
}
.yobo-detali .yellow{
	background: rgba(214, 231, 0, .5);
}
.yobo-detali .green{
	background: rgba(132, 196, 91, .5);
}
.yobo-detali .blue{
	background: rgba(0, 150, 218, .5);
}
.yobo-detali .orange{
	background: rgba(255, 168, 30, .5);
}

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

　section/common

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

/* 半径section
-----------------------*/
.section-radius{
	margin: 1em 1em 0 1em;
	width: calc(100% - 2em);
	border-radius: 1.5em;
}
.sect-inner{
	max-width: 1160px;
	width: 90%;
	margin: 0 auto;
	padding-top: 3em;
	padding-bottom: 3em;
}
	@media screen and (max-width:1200px) {
		.sect-inner{
			width: 82%;
		}
	}
	@media screen and (max-width:700px) {
		.section-radius{
			margin: 1em .5em 0 .5em;
			width: calc(100% - 1em);
		}
		.sect-inner{
			width: 90%;
			padding-top: 2.25em;
			padding-bottom: 1.75em;
		}
	}

#about {
	background: #9dcf7b;
}
#feature{
	background: linear-gradient(0deg, #bfe5f6 0%, #bfe5f6 50%, #cceaf7 50%, #cceaf7 100%);
}
#trimming-pethotel{
	background: #d7e7ee;
}
#recruit{
	background: #e0ebf7;
}

/* font
-----------------------*/
.sect-eng{
	font-size: 3em;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	line-height: 1.1;
}
	@media screen and (max-width:1200px) {
		.sect-eng{
			font-size: 2.5em;
		}
	}

#feature .sect-eng{
	color: #66c0e8;
}
#about .sect-eng{
	color: #fff;
}
#trimming-pethotel .sect-eng{
	color: #686666;
}
#recruit .sect-eng{
	color: #707d88;
}
#access .sect-eng{
	color: #686666;
}
.sect-copy{
	font-size: 1.375em;
	font-weight: 500;
	line-height: 1.5;
	margin-top: .5em;
}
	@media screen and (max-width:1200px) {
		.sect-copy{
			font-size: 1.2666666em;
		}
	}
	@media screen and (max-width:800px) {
		.sect-copy{
			font-size: 1.21428571428em;
		}

	}


/* ボタン
-----------------------*/
.btn-index{
	position: relative;
	display: inline-block;
	padding: .5em 4.75em .5em 1.25em;
	font-family: "M PLUS 1p", sans-serif;
	font-size: 1.25em;
	font-weight: 500;
	color: #fff;
	border-radius: 5em;
	transition: .3s all;
}
.btn-index:before{
	position: absolute;
	top: calc(50% - .85em);
	right: 1em;
	width: 1em;
	height: 1em;
	content: "→";
	transition: .3s all;
}
#trimming-pethotel .btn-index{
	padding-right: 2.5em;
}
	@media screen and (max-width:1200px) {
		.btn-index{
			font-size: 1.25em;
		}
	}
	@media screen and (max-width:800px) {
		.btn-index{
			font-size: 1.14285714286em;
			padding-left: 1em;
		}
		.btn-index:before{
			top: calc(50% - .9rem);
			right: .75em;
		}
	}

.btn-index:hover{
	filter: brightness(.9) contrast(150%);
}
.btn-index:hover:before{
	right: 1em;
}
#about .btn-index{
	background: #66b432;
}
#trimming-pethotel .btn-index{
	background: #74a1ab;
}
#recruit .btn-index{
	background: #707d88;
}


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

　about

-----------------------*/
#loop-about{
	position: relative;
	bottom: -.25em;
}
.about-since-loop-area {
	width: 100%;
	display: flex;
	overflow: hidden;
	position: relative;
	border-radius: 1.5em;
}
.about-since-loop-area div{
	color: #b5db9c;
	white-space: nowrap;
	padding-right: 1em;
	font-size: 4.25em;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 300;
	line-height: 1;
	letter-spacing: .125em;
	animation: loop 35s linear 2s infinite normal both;
	position: relative;
	top: -5px;
}
	@media screen and (max-width:1200px) {
		.about-since-loop-area div{
			font-size: 3.75em;
		}
	}
	@media screen and (max-width:800px) {
		.about-since-loop-area div{
			font-size: 3.28571428571em;
		}
	}
	@keyframes loop {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(-100%);
		}
	}
#about .sect-inner{
	padding-bottom: 3em;
}

/* flexの幅指定はトリミングなどと一緒にまとめてます */
.about-flex .btn-index{
	margin-top: .75em;
}
.about-thumbnail{
	line-height: 0;
	border-radius: 0 0 1.5em 1.5em;
	overflow: hidden;
}
.about-thumb-loop-area ul{
	display: none;
}
.about-thumb-loop-area ul:first-child {
	display: block;
}

	@media screen and (max-width:800px) {
		#about .sect-inner{
			padding-top: 1.75em;
			padding-bottom: 1.75em;
		}
		.about-flex .btn-index{
			margin-top: .5em;
		}
		.about-thumbnail{
			padding-left: 0;
			padding-right: 0;
			padding-bottom: 0;
		}
		.about-thumb-loop-area {
			display: flex;
			overflow: hidden;
			border-radius: 0 0 1.5em 1.5em;
		}
		.about-thumb-loop-area ul {
			display: flex;
			list-style: none;
			padding: 0;
			animation: loop 35s infinite linear 2s both;
		}
		.about-thumb-loop-area ul li {
			width: 130vw;
			line-height: 0;
		}
		.about-thumb-loop-area ul li > img {
			width: 100%;
		}
	}
	@media screen and (max-width:800px) {
		.about-thumb-loop-area ul li {
			width: 145vw;
		}

	}

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

FEATURE

-----------------------*/
#feature .sect-eng{
	position: relative;
}
#feature .img-posi{
	position: absolute;
	right: 0;
	top: calc(50%);
	max-width: 418px;
	height: auto;
	transform: translateY(-50%);
}
.feature-flex{
	background: #fff;
	padding: 1.25em 2em 1.5em;
	margin-top: 2.25em;
	border-radius: 1.5em;
}
	@media screen and (max-width:800px) {
		#feature .sect-inner{
			padding-top: 2em;
		}
		#feature .img-posi{
			right: -5%;
			max-width: auto;
			width: 45%;
			margin-left: auto;
		}
		.feature-flex{
			margin-top: 1.25em;
			padding: 1em;
		}

	}

.feature-flex ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.feature-flex li{
	width: calc(100% / 3 - 1.25em);
	position: relative;
}
	@media screen and (max-width:1200px) {
		.feature-flex li{
			width: calc(100% / 3 - 1em);
		}
	}

	@media screen and (max-width:800px) {
		#feature .img-posi{
			max-width: 300px;
		}
		.feature-flex li{
			width: 100%;
			margin-bottom: 1em;
		}
		.feature-flex li:last-child{
			margin-bottom: 0;
		}
	}

.feature-flex .vol{
	margin-bottom: .75em;
}
.feature-flex .vol div{
	display: inline-block;
	border-radius: 3em;
	padding: 0 1em;
	color: #fff;
	font-size: .9375em;
}
	@media screen and (max-width:800px) {
		.feature-flex .vol{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.feature-flex .vol div{
			border-radius: 1rem 0;
		}
	}
	@media screen and (max-width:700px) {
		.feature-flex .vol div{
			padding: .125em .75em;
		}
	}

.feature-flex .vol span{
	font-size: 1.25em;
	font-family: "Roboto", sans-serif;
}
.feature-flex li:nth-child(1) .vol div{
	background: #0096d9;
}
.feature-flex li:nth-child(2) .vol div{
	background: #84c35a;
}
.feature-flex li:nth-child(3) .vol div{
	background: #c3d600;
}
.feature-flex .thumbnail{
	overflow: hidden;
	aspect-ratio: 433 / 344;;
}
.feature-flex .thumbnail img{
	transition: .3s all;
	width: 100%;
}
.feature-flex a:hover .thumbnail img{
	transform: scale(1.1);
}
.feature-flex .heading{
	position: relative;
	font-size: 1.375em;
	font-family: "M PLUS 1p", sans-serif;
	line-height: 1.4;
	margin-top: .5em;
}
	@media screen and (max-width:800px) {
		.feature-flex .thumbnail{
			aspect-ratio: 4/3;
		}
		.feature-flex .thumbnail img{
			height: 100%;
			object-fit: cover;
		}
		.feature-flex .heading{
			font-size: 1.25em;
			padding: 0 .5em;
		}
	}

.feature-flex a .heading:before{
	position: absolute;
	top: -.25em;
	right: .5rem;
	width: 1em;
	height: 1em;
	content: "→";
	font-size: 1.375em;
	transition: .3s all;
}
.feature-flex a:hover .heading:before{
	right: 0;
}
.feature-flex li:nth-child(1) a .heading:before{
	color: #0096d9;
}
.feature-flex li:nth-child(2) a .heading:before{
	color: #84c35a;
}
.feature-flex li:nth-child(3) a .heading:before{
	color: #c3d600;
}
/*-----------------------

TRIMMING & PET HOTEL / RECRUIT /※About一部

-----------------------*/
.trimming-pethotel-flex,
.recruit-flex,
.about-flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.trimming-pethotel-flex .txt,
.recruit-flex .txt,
.about-flex .txt{
	width: 43%;
}
.trimming-pethotel-flex .thumbnail,
.recruit-flex .thumbnail,
.about-flex .thumbnail{
	width: calc(98% - 43%);
}
.trimming-pethotel-flex .btn-index,
.recruit-flex .btn-index{
	margin-top: 1.25em;
}
	@media screen and (max-width:800px) {
		.trimming-pethotel-flex .txt,
		.recruit-flex .txt,
		.about-flex .txt{
			width: 92%;
			margin-left: auto;
			margin-right: auto;
		}
		.trimming-pethotel-flex .thumbnail,
		.recruit-flex .thumbnail,
		.about-flex .thumbnail{
			width: 100%;
			margin-top: 1.75em;
		}
	}


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

TOPICS

-----------------------*/
#topics{
	overflow: hidden;
}
.topics-illust{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	line-height: 0;
	margin-top: .5em;
}
.topics-illust .img-posi{
	position: relative;
	max-width: 382px;
}
	@media screen and (max-width:1200px) {
		.topics-illust .img-posi{
			right: -82px;
			max-width: 300px;
			width: 65%;
		}
	}

.topics-illust .img-posi .kumo,
.topics-illust .img-posi .tree{
	position: absolute;
	top: 0;
	left: 0;
}
.topics-illust .img-posi .tree{
	z-index: 1;
}
.topics-illust .img-posi .kumo{
	animation: animation-x 2.5s ease-in-out infinite alternate-reverse;
	z-index: -1;
}
.animation-y{
	animation: animation-y 1s ease-in-out infinite alternate-reverse;
}
	@keyframes animation-x {
		0% {
			transform: translateX(-1.75%);
		}
		100% {
			transform: translateX(1.75%);
		}
	}
	@keyframes animation-y {
		0% {
			transform: translateY(-.5%);
		}
		100% {
			transform: translateY(.5%);
		}
	}
.topics-bg{
	background: #eaf1a6 url(../images/common/bg-sand.png) repeat-x center top;
	margin-top: -8.5em;
}
	@media screen and (max-width:1200px) {
		.topics-bg{
			margin-top: -7.5em;
		}
	}
	@media screen and (max-width:560px) {
		.topics-bg{
			margin-top: -5em;
		}
	}

.topics-bg .sect-inner{
	padding-top: 0;
	padding-bottom: 0;
}
.topics-bg .sect-eng{
	position: relative;
	top: calc(-3.25rem);
	color: #b3cb00;
	letter-spacing: 4px;
	z-index: 1;
}
.topics-slid{
	position: relative;
	z-index: 1;
}
.topics-slid a{
	margin: 2em 1.25em 1.75em;
}

	@media screen and (max-width:800px) {
		.topics-slid a{
			margin-left: .5em;
			margin-right: .5em;
		}
	}
	@media screen and (max-width:560px) {
		.topics-slid a{
			margin-top: 0;
		}
	}
.topics-slid a img{
	transition: .3s all;
}
.topics-slid a:hover img{
	transform: scale(1.05);
}
.topics-tag{
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-bottom: 1.75em;
	font-size: .9375em;
}
.topics-tag a{
	position: relative;
	background: #fff;
	padding: .125em 1em .125em 2em;
	margin: .25em .375em;
	border-radius: 3em;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 500;
	transition: .1s all;
	top: 0;
}
.topics-tag a:hover{
	top: 3px;
	filter: brightness(.8) contrast(150%);
}
.topics-tag a:before{
	position: absolute;
	top: .125em;
	left: 1em;
	width: 1em;
	height: 1em;
	content: "#";
	font-weight: bold;
}
a.topi-blue:before		{color: #6cbfd1}
a.topi-orange:before	{color: #f0a041}
a.topi-red:before		{color: #ee7e72}
a.topi-green:before		{color: #74ca69}
a.topi-purple:before	{color: #ab90c5}
a.topi-yellow:before	{color: #f6c600}

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

ACCESS

-----------------------*/
#access{
	position: relative;
	padding-top: 2.25em;
}
#access svg{
	position: absolute;
	top: 0;
	left: 0;
}
#access .sect-inner{
	padding-top: 0;
	position: relative;
}
#access .thumbnail img{
	display: block;
	max-width: 760px;
	width: 75%;
	margin: 0 auto;
	position: relative;
	top: -1em;
}

	@media screen and (max-width:700px) {
		#access .thumbnail img{
			top: -2.25em;
			margin-bottom: 1.125em;
		}
	}
	@media screen and (max-width:560px) {
		#access .thumbnail img{
			width: 100%;
		}
	}

.access-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.access-flex .txt{
	width: 48.5%;
}
.access-flex .map{
	width: 50%;
}
.access-flex .map{
	margin-top: 2em;
	text-align: center;
}
.access-flex .map img{
	width: 90%;
}
	@media screen and (max-width:800px) {
		.access-flex .txt{
			width: 100%;
		}
		.access-flex .map{
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			margin-top: 1.5em;
		}
	}
	@media screen and (max-width:560px) {
		.access-flex .map{
			padding-bottom: 4.25em;
		}
		.access-flex .map img{
			width: 100%;
		}
	}

a.googlemap{
	font-size: .9375em;
	color: #0072b0;
	text-decoration: underline;
	padding-left: 1.25em;
	background: url(../images/common/googlemap.png) no-repeat left top;
	background-size: 1em auto;
}
.list-access li{
	padding-left: 1.5em;
	position: relative;
}
.list-access li:before{
	position: absolute;
	top: .5em;
	left: 0;
	width: .75em;
	height: .75em;
	background: #0096d9;
	content: "";
	border-radius: 50%;
}
.parking{
	font-size: 1.5em;
	font-family: "M PLUS 1p", sans-serif;
	margin-top: 1em;
	color: #0096d9;
	font-weight: bold;
}
.parking .p-mark{
	display: inline-block;
	background: #0096d9;
	font-size: .875em;
	color: #fff;
	width: 1.25em;
	height: 1.25em;
	line-height: 1.25;
	text-align: center;
	border-radius: .25em;
	margin-right: .5em;
}
.parkinglist-flex div{
	margin-right: 1em;
}
.access-point{
	position: absolute;
	bottom: -.5em;
	right:0;
	aspect-ratio: 126 / 293;
	width: 130px;
}
	@media screen and (max-width:560px) {
		.access-point{
			width: 105px;
			right: -5%;
		}

	}