@charset "UTF-8";

html {
	width: 100%;
	height: 100%;
	color: #333;
	margin: 0;
	padding: 0;
	font-feature-settings: "palt" 1;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure {
	margin: 0;
	padding: 0;
}

body{
	font-size: 14px;
	font-family: "Source Han Serif JP",serif;
	line-height: 2;
	counter-reset:number;
	height: 100%;
	-webkit-text-size-adjust: none;
}

table {
	font: 100%;
	font-size: inherit;
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th { text-align:left; }

fieldset,img { border: 0;}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
address,caption,cite,code,dfn,em,th,var {
	font-style: normal;
	font-weight: normal;
}
ol,ul { list-style: none;}

q:before,q:after { content:'';}
abbr,acronym {
	border: 0;
	font-variant: normal;
}
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom;}
input,textarea,select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	outline: 0;
}
legend{ color:#555;}

select,input,button,textarea{ font-family: "Source Han Serif JP",sans-serif; }

pre,code,kbd,samp,tt{
	font-family: monospace;
	line-height: 100%;
}

main { display: block; }

a {
	color: #333;
	outline: none;
	text-decoration: none;
}
a:hover,
a:focus,
a:active { text-decoration: none; }

a img { border: none; }

li img,
dt img,
dd img{ vertical-align: top; }

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

html, body {
	height: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
}
body { -webkit-text-size-adjust: 100%; }

@media screen and (min-width:769px), print{
	.sp { display: none !important; }
	a[href^="tel:"] { pointer-events: none; }
}
@media screen and (max-width:768px){
	.pc { display: none !important; }
}

#wrapper {
	min-height: 100vh;
	background-color: #fbfaf8;
}
#header {
	text-align: center;
	padding: 20px 0 30px;
}
#subTitle span {
	display: block;
	&.title {
		font-size: 12px;
		margin-top: 3px;
	}
	&.name {
		font-size: 20px;
		line-height: 1;
		margin-top: 5px;
	}
}
#video {
	position: relative;
	video {
		width: 100%;
		background: no-repeat center center;
		background-size: cover;
		@media screen and (min-width:769px), print{
			aspect-ratio: 1200 / 675;
			background-image: url(../images/load_pc.gif);
		}
		@media screen and (max-width:768px){
			aspect-ratio: 375 / 468.75;
			background-image: url(../images/load_sp.gif);
		}
	}
	.control {
		position: absolute;
		@media screen and (min-width:769px), print{
			top: 23px;
			right: 11px;
		}
		@media screen and (max-width:768px){
			top: 12px;
			right: 3px;
		}
		ul {
			display: flex;
			line-height: 0;
			align-items: center;
			li {
				cursor: pointer;
				padding: 3px 9px 2px;
			}
			li + li { border-left: 1px solid #fff }
			&::before {
				content: "";
				width: 29px;
				height: 15px;
				display: block;
				background: no-repeat center center;
			}
		}
	}
	&.off .control ul::before { background-image: url(../images/icon_off.svg); }
	&.on .control ul::before { background-image: url(../images/icon_on.svg); }
	&.on .control img[alt="on"],
	&.off .control img[alt="off"] { opacity: 0.3; }
	.caution {
		font-size: 12px;
		text-align: center;
		margin-top: 5px;
	}
}
#contents {
	background: url(../images/bg_horse.svg) no-repeat;
	@media screen and (min-width:769px), print {
		background-size: auto 862px;
		background-position: calc(50vw - 46px) 22px;
	}
	@media screen and (max-width:768px) {
		background-size: 745px auto;
		background-position: 42px 32px;
	}
	#mainText {
		max-width: 650px;
		margin-inline: auto;
		padding-inline: 40px;
		@media screen and (min-width:769px), print{
			font-size: 18px;
			padding-top: 204px;
			margin-bottom: 192px;
		}
		@media screen and (max-width:768px){
			font-size: 14px;
			padding-top: 240px;
			margin-block: 85px;
		}
	}
	#footer {
		max-width: 295px;
		margin-inline: auto;
		padding-bottom: 52px;
		.logo img { max-width: 100%; }
		.address { margin-top: 15px; }
		.tel {
			font-size: 16px;
			margin-top: 5px;
			small { font-size: 12px; }
		}
		.member {
			font-size: 12px;
			margin-top: 18px;
		}
		.viewmore {
			margin-top: 27px;
			a {
				color: #fff;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				line-height: 1;
				position: relative;
				padding: 17px 25px 17px 29px;
				background-color: #00a795;
				transition-duration: .3s;
				transition-property: background-color, padding-left;
				&::before,
				&::after {
					content: "";
					display: block;
					position: absolute;
					top: 0;
					bottom: 0;
					margin-block: auto;
					transition-duration: .3s;
				}
				&::before {
					width: 18px;
					height: 0;
					left: 0;
					border-top: 1px solid #fff;
					transition-property: width;
				}
				&::after {
					left: 12px;
					width: 5px;
					height: 5px;
					border-top: 1px solid #fff;
					border-right: 1px solid #fff;
					transform: rotate(45deg);
					transition-property: left;
				}
				&:hover {
					padding-left: 39px;
					background-color: #ea5e00;
					&::before { width: 28px; }
					&::after { left: 22px; }
				}
				img { height: 18px; }
			}
		}
		.copyright {
			font-size: 12px;
			text-align: center;
			margin-top: 38px;
		}
	}
}