:root {
	--vw: 100vw;
	--content-width: var(--vw);
	--content-left: calc(50% - var(--content-width) / 2);
	--font-base: calc(var(--content-width) * 0.02);
}

html{scrollbar-width: none;}
body{
	margin: 0; padding: 0;
	letter-spacing: 0;
	background-image: url(../img/background.jpg);
	background-attachment: scroll;
	background-size: 100%;
	background-repeat: repeat-y;
}
body::-webkit-scrollbar{display: none;}

div{margin:0;}
span{display: inline-block;}
a{color: inherit; text-decoration: none;}
button {
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	vertical-align: middle;
	color: inherit;
	font: inherit;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	outline: none;
	border-radius: 0;
}

.area{
	display: block;
	position: relative;
	width: 100%;
	left: 0;
	overflow: hidden;
}
.area-content{
	display: block;
	position: relative;
	height: 100%;
	width: var(--content-width);
	left: var(--content-left);
}
.inner-area{display: block; position: absolute;}
.image{display: block; position: absolute; object-fit: cover; user-select: none;}
.fiximage{ display: block; position: fixed; object-fit: cover; user-select: none;}

.filled{width: 100%; height: 100%;}
.centered{left: 50%; transform: translate(-50%,0); text-align: center;}
.no-margin{margin: 0;}

.sans{
	font-size: var(--font-base);
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.serif{
	font-size: var(--font-base);
	font-family: "Noto Serif JP", serif;
	font-weight: 500;
	font-style: normal;
}
.title{font-size: calc(var(--font-base) * 3.2);}
.subtitle{font-size: calc(var(--font-base) * 2.2);}
.paragraph{font-size: calc(var(--font-base) * 1.2);}
.small-paragraph{font-size: calc(var(--font-base) * 1.0);}
.vertical{writing-mode: vertical-rl; text-orientation: upright;}
.black{color: black;}
.brown{color: rgb(65, 46, 13);}
.gray{color: dimgray;}
.white{color: white;}
.golden{color: goldenrod;}
.seagreen{color: rgb(88, 190, 182);}
.skyblue{color: steelblue;}
.blue{color: royalblue;}
.violet{color:rgb(184, 140, 201)}

#loading{
	width: 100%; height: 100%;
}
#loading-back{
	width: 100%; height: 100%;
	position: fixed;
	object-fit: cover;
	z-index: 10;
}
#loading-sukusuku-logo{
	width: 50%; left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	position: fixed;
	object-fit: contain;
	z-index: 11;
}
#loading.loaded{animation: fadeOut 3s forwards; animation-delay: 0.5s;}
#main{overflow: hidden; opacity: 0;}
#main.loaded{animation: fadeIn 3s forwards; animation-delay: 1s;}
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

#background{
	width: 250%; left: -75%;
	bottom: -300%;
	position: fixed;
	user-select: none;
	z-index: -2;
}

.floating-insect{
	display: block; position: fixed; z-index: 6;
	width: 20%; transform: translate(-50%,-50%);
	transform-origin: center;
	pointer-events: none;
}
.loaded #bee{
	animation:
		bee-v 2.5s ease-in-out infinite alternate,
		bee-h 6s ease-in-out infinite alternate,
		bee-turn 12s linear infinite;
}
#butterfly{
	display: none;
}

@keyframes bee-v{
	0%{top: 25%;}
	50%{top: 15%;}
	100%{top: 25%;}
}
@keyframes bee-h{
	0% {left: 55%;}
	100% {left: 120%;}
}
@keyframes bee-turn{
	0% {transform: scale(1,1);}
	48% {transform: scale(1,1);}
	50% {transform: scale(-1,1);}
	98% {transform: scale(-1,1);}
	100% {transform: scale(1,1);}
}
@keyframes butterfly{
	0% {transform: rotate(0);}
	100% {transform: rotate(20deg);}
}
@keyframes butterfly-h{
	0% {left: 6%;}
	100% {left: 12%;}
}

#header-area{
	height: calc(var(--content-width) * 4.15);
	margin-bottom: calc(var(--content-width) * 0.24);
	z-index:5;
}
.main-visual{width: 200%; top: calc(var(--content-width) * 1.15); left: -50%; opacity:0; transform-origin: center;}
.loaded #main-visual1{animation: main-visual1 linear 48s infinite,fade-away linear 48s infinite;}
.loaded #main-visual2{animation: main-visual2 linear 48s infinite,fade-away2 linear 48s infinite;}
.loaded #main-visual3{animation: main-visual3 linear 48s infinite,fade-away3 linear 48s infinite;}
.loaded #main-visual4{animation: main-visual4 linear 48s infinite,fade-away4 linear 48s infinite;}
.grid{width: 50%; height: calc(var(--content-width) * 0.40); opacity:0;}
.loaded .grid-a{animation: main-visual-grid-a linear 48s infinite;}
.loaded .grid-b{animation: main-visual-grid-b linear 48s infinite;}
.loaded .grid-c{animation: main-visual-grid-c linear 48s infinite;}
.loaded .grid-d{animation: main-visual-grid-d linear 48s infinite;}
.loaded .grid1-1{left: 0; top: calc(var(--content-width) * 1.15); animation-delay: 0.6s;}
.loaded .grid1-2{left: 50%; top: calc(var(--content-width) * 1.15); animation-delay: 1.0s;}
.loaded .grid1-3{left: 0%; top: calc(var(--content-width) * 1.15); animation-delay: 0.0s;}
.loaded .grid1-4{left: 50%; top: calc(var(--content-width) * 1.15); animation-delay: 0.3s;}
.loaded .grid2-1{left: 0; top: calc(var(--content-width) * 1.55); animation-delay: 1.3s;}
.loaded .grid2-2{left: 50%; top: calc(var(--content-width) * 1.55); animation-delay: 0.2s;}
.loaded .grid2-3{left: 0%; top: calc(var(--content-width) * 1.55); animation-delay: 0.8s;}
.loaded .grid2-4{left: 50%; top: calc(var(--content-width) * 1.55); animation-delay: 0.5s;}
.loaded .grid3-1{left: 0; top: calc(var(--content-width) * 1.95); animation-delay: 0.9s;}
.loaded .grid3-2{left: 50%; top: calc(var(--content-width) * 1.95); animation-delay: 1.6s;}
.loaded .grid3-3{left: 0%; top: calc(var(--content-width) * 1.95); animation-delay: 1.2s;}
.loaded .grid3-4{left: 50%; top: calc(var(--content-width) * 1.95); animation-delay: 0.7s;}

#header-cloud{display: none;}
#header-cloud-sp{width: 100%; top: 0; left: 0;}
#header-paddy{width: 200%; top: calc(var(--content-width) * 2.05); left: -50%;}
#main-visual-phrase{width: 80%; left: 5%; top: calc(var(--content-width) * 1.55); opacity: 0;}
.loaded #main-visual-phrase{
	animation: fadeInStamp 2.5s forwards;
	transform-origin: center;
	animation-delay: 2s;
}


@keyframes main-visual1{
	0% {opacity: 1;}
	17.5% {opacity: 1;}
	20% {opacity: 0;}
	92.5% {opacity: 0;}
	95% {opacity: 1;}
	100% {opacity: 1;}
}
@keyframes main-visual2{
	0%{opacity: 0;}
	17.5% {opacity: 0;}
	20% {opacity: 1;}
	42.5% {opacity: 1;}
	45% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes main-visual3{
	0%{opacity: 0;}
	42.5% {opacity: 0;}
	45% {opacity: 1;}
	67.5% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes main-visual4{
	0%{opacity: 0;}
	67.5% {opacity: 0;}
	70% {opacity: 1;}
	92.5% {opacity: 1;}
	95% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes fade-away{
	0% {transform: scale(1.2);}
	20% {transform: scale(1);}
	92.5% {transform: scale(1.275);}
	95% {transform: scale(1.25);}
	100% {transform: scale(1.2);}
}
@keyframes fade-away2{
	0% {transform: scale(1);}
	17.5% {transform: scale(1.275);}
	20% {transform: scale(1.25);}
	45% {transform: scale(1);}
	100% {transform: scale(1);}
}
@keyframes fade-away3{
	0% {transform: scale(1);}
	42.5% {transform: scale(1.275);}
	45% {transform: scale(1.25);}
	70% {transform: scale(1);}
	100% {transform: scale(1);}
}
@keyframes fade-away4{
	0% {transform: scale(1);}
	67.5% {transform: scale(1.275);}
	70% {transform: scale(1.25);}
	95% {transform: scale(1);}
	100% {transform: scale(1);}
}

@keyframes main-visual-grid-a{
	0% {opacity: 0;}
	11% {opacity: 0;}
	15% {opacity: 1;}
	21% {opacity: 1;}
	25% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes main-visual-grid-b{
	0% {opacity: 0;}
	36% {opacity: 0;}
	40% {opacity: 1;}
	46% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes main-visual-grid-c{
	0% {opacity: 0;}
	61% {opacity: 0;}
	65% {opacity: 1;}
	71% {opacity: 1;}
	75% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes main-visual-grid-d{
	0% {opacity: 0;}
	86% {opacity: 0;}
	90% {opacity: 1;}
	96% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes fadeInStamp {
	0% {opacity: 0; transform: scale(1.1,1.1);}
	100% {opacity: 1; transform: scale(1.0,1.0);}
}

#header-logo{width: 36%; top: 0; left: 32%;}
.symbol{
	width: calc(var(--content-width) * 0.20);
	animation: tremble 2s ease-in-out infinite;
	transform-origin: 50% 50%;
}
#header-symbol1{left: calc(22% - var(--content-width) * 0.10); 	top: calc(var(--content-width) * 0.40);}
#header-symbol2{left: calc(50% - var(--content-width) * 0.10); 	top: calc(var(--content-width) * 0.40);}
#header-symbol3{left: calc(78% - var(--content-width) * 0.10); 	top: calc(var(--content-width) * 0.40);}
#header-symbol4{left: calc(22% - var(--content-width) * 0.10); 	top: calc(var(--content-width) * 0.70);}
#header-symbol5{left: calc(50% - var(--content-width) * 0.10); 	top: calc(var(--content-width) * 0.70);}
#header-symbol6{left: calc(78% - var(--content-width) * 0.10); 	top: calc(var(--content-width) * 0.70);}
#header-symbol7{left: calc(22% - var(--content-width) * 0.10); 	top: calc(var(--content-width) * 1.00);}
@keyframes tremble {
	0% {rotate: 0deg;}
	7.5% {rotate: 15deg;}
	22.5% {rotate: -15deg;}
	37.5% {rotate: 15deg;}
	45% {rotate: 0deg;}
	100% {rotate: 0deg;}
}
.header-link{
	display: block; position: absolute; margin: 0;
	font-size: calc(var(--font-base) * 1.2);
	white-space: nowrap;
	text-align: center;
}
#header-link1{width: calc(var(--font-base) * (1.2 * 5 + 1.5)); left: calc(22% - var(--font-base) * (1.2 * 5 + 1.5) / 2); top: calc(var(--content-width) * 0.60);}
#header-link2{width: calc(var(--font-base) * (1.2 * 6 + 1.5)); left: calc(50% - var(--font-base) * (1.2 * 6 + 1.5) / 2); top: calc(var(--content-width) * 0.60);}
#header-link3{width: calc(var(--font-base) * (1.2 * 4 + 1.5)); left: calc(78% - var(--font-base) * (1.2 * 4 + 1.5) / 2); top: calc(var(--content-width) * 0.60);}
#header-link4{width: calc(var(--font-base) * (1.2 * 4 + 1.5)); left: calc(22% - var(--font-base) * (1.2 * 4 + 1.5) / 2); top: calc(var(--content-width) * 0.90);}
#header-link5{width: calc(var(--font-base) * (1.2 * 4 + 1.5)); left: calc(50% - var(--font-base) * (1.2 * 4 + 1.5) / 2); top: calc(var(--content-width) * 0.90);}
#header-link6{width: calc(var(--font-base) * (1.2 * 5 + 1.5)); left: calc(78% - var(--font-base) * (1.2 * 5 + 1.5) / 2); top: calc(var(--content-width) * 0.90);}
#header-link7{width: calc(var(--font-base) * (1.2 * 4 + 1.5)); left: calc(22% - var(--font-base) * (1.2 * 4 + 1.5) / 2); top: calc(var(--content-width) * 1.20);}

.recruit-link-box{
	width: 30%;
	left: 63%; top: calc(var(--content-width) * 1.00);
	cursor: pointer;
}

.admission-link-box{
	width: 24%;
	left: 38%; top: calc(var(--content-width) * 1.01);
	cursor: pointer;
}

.frame-title{width: 80%; left: 10%; top: 0;}
.area-title{
	left: 50%; transform: translate(-50%,0); top: calc(var(--content-width) * 0.07);
	display: block; position: absolute; margin: 0; white-space: nowrap;
}

.photo-frame{
	width: calc(var(--content-width) * 0.45);
	z-index: 1;
}

#header-area-content{
	height: calc(var(--content-width) * 0.5);
	top: calc(var(--content-width) * 2.65);
}
.concept{
	width: 50%;
}
.concept:hover{
	animation: biyo ease-in-out 0.35s 2;
}
#concept-genmai{left: 25%; top: calc(var(--content-width) * 0.20);}
#concept-farmer{left: 0%; top: calc(var(--content-width) * 0.85);}
#concept-word{left: 50%; top: calc(var(--content-width) * 0.85);}
#header-area-content .concept-link{
	width: 50%;
	text-align: center;
	font-size: calc(var(--font-base) * 1.9);
	transform: translate(-50%,-50%);
}
#concept-genmai-link{left: 50%; top: calc(var(--content-width) * 0.70);}
#concept-farmer-link{left: 25%; top: calc(var(--content-width) * 1.35);}
#concept-word-link{left: 75%; top: calc(var(--content-width) * 1.35);}
@keyframes biyo{
	0%{ transform: scale(1,1);}
	50%{ transform: scale(1.06,1.06);}
	100%{ transform: scale(1,1);}
}

#greeting-area{height: calc(var(--content-width) * 1.8); margin-bottom: calc(var(--content-width) * 0.24);}
#greeting-back{display: none;}
#greeting-photo-frame{
	display: none;
}
#greeting-title{
	display: block; position: absolute; margin: 0;
	right: 15%;
	top: 12%;
	height: calc(var(--content-width) * 0.6);
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-align: initial;
}
#greeting-paragraph{
	right: 27%;
	top: 12%;
	height: 76%;
	writing-mode: vertical-rl;
	text-orientation: upright;
	line-height: 1.8;
}

#feature-area{height: calc(var(--content-width) * 1.44); margin-bottom: calc(var(--content-width) * 0.12); overflow: visible;}
#feature-photo-frame{
	left: 4%; top: calc(var(--content-width) * 1.12);
	transform: rotate(5deg);
}
#feature-area-content p{
	display: block; position: absolute;
	margin: 0; padding: 0;
	white-space: nowrap;
}
#frame-features{display: none;}
#frame-features-sp{width: 100%; top: calc(var(--content-width) * 0.25);}
#feature-paragraph1-1{top: calc(var(--content-width) * 0.35); left: 23%; transform: translate(-50%,0);}
#feature-paragraph1-2{top: calc(var(--content-width) * 0.40); left: 23%; transform: translate(-50%,0);}
#feature-paragraph2{top: calc(var(--content-width) * 0.39); left: 74%; transform: translate(-50%,-50%);}
#feature-paragraph3{top: calc(var(--content-width) * 0.69); left: 26%; transform: translate(-50%,-50%);}
#feature-paragraph4{top: calc(var(--content-width) * 0.69); left: 74%; transform: translate(-50%,-50%);}
#feature-paragraph5{top: calc(var(--content-width) * 1.00); left: 26%; transform: translate(-50%,-50%);}
#feature-paragraph6{top: calc(var(--content-width) * 1.00); left: 74%; transform: translate(-50%,-50%);}

#news-area{height: calc(var(--content-width) * 2.40); margin-bottom: calc(var(--content-width) * 0.24);}
#news-area p{display: block; position: absolute; margin: 0;}
#news-link{
	top: calc(var(--content-width) * 0.25); right: 4%;
	white-space: nowrap;
}
#news-front{
	width: 100%; height: calc(var(--content-width) * 2.00); bottom: 0;
	background-color: rgba(180, 249, 255, 0.7);
	border-radius: calc(var(--font-base) * 1);
}

#schedule-area{
	height: calc(var(--content-width) * 6.40);
	margin-bottom: calc(var(--content-width) * 0.24);
}
#schedule-area p{line-height: 1.2;}
#schedule-area .paragraph{font-size: calc(var(--font-base) * 1.0);}
#schedule-photo-frame1{
	display: none;
}
#schedule-photo-frame2{
	left: 56%; top: calc(var(--content-width) * 2.00);
	transform: rotate(5deg);
}
#schedule-annual-subtitle{width: 50%; top: calc(var(--content-width) * 0.18);}
#schedule-annual{display: none;}
#schedule-annual-sp{width: 100%; left: 0; top: calc(var(--content-width) * 0.25);}
#schedule-annual-paragraph4{width: 30%; left: 18%; top: calc(var(--content-width) * 0.45);}
#schedule-annual-paragraph5{width: 30%; left: 55%; top: calc(var(--content-width) * 0.45);}
#schedule-annual-paragraph6{width: 30%; left: 18%; top: calc(var(--content-width) * 0.715);}
#schedule-annual-paragraph7{width: 30%; left: 55%; top: calc(var(--content-width) * 0.715);}
#schedule-annual-paragraph8{width: 30%; left: 18%; top: calc(var(--content-width) * 0.98);}
#schedule-annual-paragraph9{width: 30%; left: 55%; top: calc(var(--content-width) * 0.98);}
#schedule-annual-paragraph10{width:30%; left: 18%; top: calc(var(--content-width) * 1.245);}
#schedule-annual-paragraph11{width: 30%; left: 55%; top: calc(var(--content-width) * 1.245);}
#schedule-annual-paragraph12{width: 30%; left: 18%; top: calc(var(--content-width) * 1.51);}
#schedule-annual-paragraph1{width: 30%; left: 55%; top: calc(var(--content-width) * 1.51);}
#schedule-annual-paragraph2{width: 30%; left: 18%; top: calc(var(--content-width) * 1.775);}
#schedule-annual-paragraph3{width: 30%; left: 55%; top: calc(var(--content-width) * 1.775);}
#schedule-daily-frame{top:calc(var(--content-width) * 2.4);}
#schedule-daily-title{top: calc(var(--content-width) * 2.47);}
#schedule-daily{display: none;}
#schedule-daily-sp{width: 100%; left: 0; top: calc(var(--content-width) * 2.56);}
#schedule-daily-junior-title{width: 30%; left: 15.5%; top: calc(var(--content-width) * 2.64);}
#schedule-daily-senior-title{width: 30%; left: 67%; top: calc(var(--content-width) * 2.64);}
#schedule-area .vertical{text-align: center; width: calc(var(--content-width) * 0.30); writing-mode: horizontal-tb;}
#schedule-daily-junior830{left: 10%; top: calc(var(--content-width) * 2.83);}
#schedule-daily-junior910{left: 10%; top: calc(var(--content-width) * 3.035);}
#schedule-daily-junior930{left: 10%; top: calc(var(--content-width) * 3.24);}
#schedule-daily-junior1000{left: 10%; top: calc(var(--content-width) * 3.445);}
#schedule-daily-junior1100{left: 10.0%; top: calc(var(--content-width) * 3.65);}
#schedule-daily-junior1200{left: 10.0%; top: calc(var(--content-width) * 4.055);}
#schedule-daily-junior1500{left: 10.0%; top: calc(var(--content-width) * 4.465);}
#schedule-daily-junior1600{left: 10.0%; top: calc(var(--content-width) * 4.67);}
#schedule-daily-senior830{left: 60.0%; top: calc(var(--content-width) * 2.825);}
#schedule-daily-senior910{left: 60.0%; top: calc(var(--content-width) * 3.035);}
#schedule-daily-senior930{left: 60.0%; top: calc(var(--content-width) * 3.24);}
#schedule-daily-senior1000{left: 60.0%; top: calc(var(--content-width) * 3.445);}
#schedule-daily-senior1130{left: 60.0%; top: calc(var(--content-width) * 3.855);}
#schedule-daily-senior1300{left: 60.0%; top: calc(var(--content-width) * 4.265);}
#schedule-daily-senior1500{left: 60.0%; top: calc(var(--content-width) * 4.47);}
#schedule-daily-senior1600{left: 60.0%; top: calc(var(--content-width) * 4.675);}
#schedule-regular{width: 100%; left: 0; top: calc(var(--content-width) * 5.00);}
#schedule-month-paragraph{width: 75%; left: 20%; top: calc(var(--content-width) * 5.07);}
#schedule-month-paragraph .subtitle{font-size: calc(var(--font-base) * 1.8);}
#schedule-halfmonth-paragraph{width: 75%; left: 20%; top: calc(var(--content-width) * 5.72);}
#schedule-halfmonth-paragraph .subtitle{font-size: calc(var(--font-base) * 1.8);}
#schedule-everyday-paragraph{width: 75%; left: 20%; top: calc(var(--content-width) * 6.00);}
#schedule-everyday-paragraph .subtitle{font-size: calc(var(--font-base) * 1.8);}

#diary-area{height: calc(var(--content-width) * 2.40); margin-bottom: calc(var(--content-width) * 0.24); overflow: visible;}
#diary-photo-frame{
	left: 5%; top: calc(var(--content-width) * -0.40);
	transform: rotate(10deg);
}
#diary-area p{display: block; position: absolute; margin: 0;}
#diary-link{
	top: calc(var(--content-width) * 0.25); right: 4%;
	white-space: nowrap;}
#diary-front{
	width: 100%; height: calc(var(--content-width) * 2.00); bottom: 0;
	background-color: rgba(248, 255, 187, 0.7);
	border-radius: calc(var(--font-base) * 1);
}

#access-area{
	height: calc(var(--content-width) * 1.30);
	margin-bottom: calc(var(--content-width) * 0.24);
}
#access-area .paragraph{
	font-size: calc(var(--font-base) * 1.4);
}
#access-photo-frame{
	display: none;
}
#access-map{
	width: 80%; left: 10%;
	height: calc(var(--content-width) * 0.60); top: calc(var(--content-width) * 0.25);
}
#access-info{
	width: 60%; left: 20%;
	height: calc(var(--content-width) * 0.35); top: calc(var(--content-width) * 0.95);
}

#footer-area{ height: calc(var(--content-width) * 0.40);}
#footer-logo{
	width: 20%; top: calc(var(--content-width) * 0.03); left: 13%;
}
#footer-profile{top: calc(var(--content-width) * 0.04); left: 34%;}
#footer-area p{line-height: 1.4; margin: 0;}
#footer-area #footer-profile-title{margin-bottom: calc(var(--font-base) * 0.2);}
#footer-button-contact{width: calc(var(--content-width) * 0.26); left: 25%; bottom: 5%;}
#footer-logo-instagram{width:calc(var(--content-width) * 0.10); left: 55%; bottom: 10%;}
#footer-logo-facebook{width:calc(var(--content-width) * 0.10); left: 70%; bottom: 10%;}

#sub-header-area{
	width: 100%; left: 0;
	height: calc(var(--content-width) * 1.32);
	margin-bottom: calc(var(--content-width) * 0.12);
}

#fee-area{
	height: calc(var(--content-width) * 1.70);
	margin-bottom: calc(var(--content-width) * 0.24);
}
#fee-title{
	width: 50%; top: 0;
}
#fee-table{
	display: inline-block;
	width: 100%; top: calc(var(--content-width) * 0.25); left: 0;
	border-collapse: separate;
	border-spacing:  calc(var(--font-base) * 0.5);
}
#fee-table th{
	padding: calc(var(--font-base) * 1);
	background-color: rgb(216, 224, 139);
	border-radius: calc(var(--font-base) * 0.5);
}
#fee-table td{
	padding: calc(var(--font-base) * 1);
	background-color: white;
	border-radius: calc(var(--font-base) * 0.5);
}
#fee-paragraph{
	width: 60%; left: 20%; top: calc(var(--content-width) * 1.10);
}

#overview-area{
	height: calc(var(--content-width) * 2.0);
	margin-bottom: calc(var(--content-width) * 0.24);
}
#overview-title{
	width: 50%; top: 0;
}
#overview-table{
	display: inline-block;
	width: 100%; top: calc(var(--content-width) * 0.25); left: 15%;
	border-collapse: separate;
	border-spacing:  calc(var(--font-base) * 0.5);
}
#overview-table th{
	padding: calc(var(--font-base) * 1);
	width: calc(var(--content-width) * 0.15);
	background-color: rgb(216, 224, 139);
	border-radius: calc(var(--font-base) * 0.5);
}
#overview-table td{
	padding: calc(var(--font-base) * 1) calc(var(--font-base) * 3) calc(var(--font-base) * 1) calc(var(--font-base) * 3);
	width: calc(var(--content-width) * 0.35);
	background-color: white;
	border-radius: calc(var(--font-base) * 0.5);
}
#overview-company-title{
	width: 50%; top: calc(var(--content-width) * 1.03);
}
#overview-company-paragraph{
	width: 60%; left: 20%; top: calc(var(--content-width) * 1.18);
}
#sukusuku-song{
	width: 60%; left: 20%; top: calc(var(--content-width) * 1.56);
}

#genmai-area{
	height: calc(var(--content-width) * 4.10);
	margin-bottom: calc(var(--content-width) * 0.12);
}
#genmai-area p{line-height: 1.3;}
#genmai-area .subtitle{font-size: calc(var(--font-base) * 1.6);}
#genmai-photo1{
	width: 48.5%; left: 1%;
	height: calc(var(--content-width) * 0.36);
	top: calc(var(--content-width) * 0.25);
}
#genmai-photo2{
	width: 48.5%; left: 50.5%;
	height: calc(var(--content-width) * 0.36);
	top: calc(var(--content-width) * 0.25);
}
#genmai-photo3{
	width: 48.5%; left: 1%;
	height: calc(var(--content-width) * 0.36);
	top: calc(var(--content-width) * 1.00);
}
#genmai-photo4{
	width: 48.5%; left: 50.5%;
	height: calc(var(--content-width) * 0.36);
	top: calc(var(--content-width) * 1.00);
}
#genmai-photo5{
	width: 48.5%; left: 1%;
	height: calc(var(--content-width) * 0.36);
	top: calc(var(--content-width) * 1.71);
}
#genmai-photo6{
	width: 48.5%; left: 50.5%;
	height: calc(var(--content-width) * 0.36);
	top: calc(var(--content-width) * 1.71);
}
#genmai-photo-frame1{
	left: 55%; top: calc(var(--content-width) * 2.64);
	transform: rotate(-10deg);
}
#genmai-photo-frame2{
	left: 0%; top: calc(var(--content-width) * 2.72);
	transform: rotate(5deg);
}
#genmai-title{
	width: 50%; top: calc(var(--content-width) * 0.3);
}
#genmai-paragraph1{
	width: 90%; left: 5%; top: calc(var(--content-width) * 0.66);
}
#genmai-paragraph2{
	width: 90%; left: 5%; top: calc(var(--content-width) * 1.41);
}
#genmai-paragraph3{
	width: 90%; left: 5%; top: calc(var(--content-width) * 1.55);
}
#genmai-paragraph4{
	width: 90%; left: 5%; top: calc(var(--content-width) * 2.12);
}
#genmai-paragraph5{
	width: 90%; left: 5%; top: calc(var(--content-width) * 2.21);
}
#genmai-paragraph6{
	width: 90%; left: 5%; top: calc(var(--content-width) * 2.40);
}
#genmai-photo-frame3{
	display: none;
}

#genmai-area-content .concept{
	top: calc(var(--content-width) * 3.30);
}
#genmai-farmer{left: 0%;}
#genmai-word{left: 50%;}
#genmai-area-content .concept-link{
	width: 50%;
	text-align: center;
	transform: translate(-50%,-50%);
	top: calc(var(--content-width) * 3.80);
}
#genmai-farmer-link{left: 25%;}
#genmai-word-link{left: 75%;}

#farmer-area{
	height: calc(var(--content-width) * 5.10);
	margin-bottom: calc(var(--content-width) * 0.24);
}
#farmer-title{
	width: 50%; top: 0;
}
#farmer-paragraph{
	width: 60%; left: 20%; top: calc(var(--content-width) * 0.25);
}
#farmer-fukunaga1{
	width: 80%; height: calc(var(--content-width) * 0.60); left: 10%; top: calc(var(--content-width) * 0.59);
}
#farmer-fukunaga2{
	width: 39.5%; height: calc(var(--content-width) * 0.30); left: 10%; top: calc(var(--content-width) * 1.20);
}
#farmer-fukunaga3{
	width: 39.5%; height: calc(var(--content-width) * 0.30); left: 50.5%; top: calc(var(--content-width) * 1.20);
}
#farmer-fukunaga-title{
	width: 80%; left: 50%; top: calc(var(--content-width) * 0.45);
}
#farmer-fukunaga-paragraph{
	width: 76%; left: 12%; top: calc(var(--content-width) * 1.53);
}

#farmer-kaneya1{
	width: 80%; height: calc(var(--content-width) * 0.60); left: 10%; top: calc(var(--content-width) * 1.94);
}
#farmer-kaneya2{
	width: 39.5%; height: calc(var(--content-width) * 0.30); left: 10%; top: calc(var(--content-width) * 2.55);
}
#farmer-kaneya3{
	width: 39.5%; height: calc(var(--content-width) * 0.30); left: 50.5%; top: calc(var(--content-width) * 2.55);
}
#farmer-kaneya-title{
	width: 80%; left: 50%; top: calc(var(--content-width) * 1.80);
}
#farmer-kaneya-paragraph{
	width: 76%; left: 12%; top: calc(var(--content-width) * 2.88);
}

#farmer-goshima1{
	width: 80%; height: calc(var(--content-width) * 0.60); left: 10%; top: calc(var(--content-width) * 3.26);
}
#farmer-goshima2{
	width: 39.5%; height: calc(var(--content-width) * 0.30); left: 10%; top: calc(var(--content-width) * 3.81);
}
#farmer-goshima3{
	width: 39.5%; height: calc(var(--content-width) * 0.30); left: 50.5%; top: calc(var(--content-width) * 3.81);
}
#farmer-goshima-title{
	width: 80%; left: 50%; top: calc(var(--content-width) * 3.12);
}
#farmer-goshima-paragraph{
	width: 76%; left: 12%; top: calc(var(--content-width) * 4.14);
}

#farmer-area-content .concept{
	top: calc(var(--content-width) * 4.40);
}
#farmer-genmai{left: 0%;}
#farmer-word{left: 50%;}
#farmer-area-content .concept-link{
	width: 50%;
	text-align: center;
	transform: translate(-50%,-50%);
	top: calc(var(--content-width) * 4.90);
}
#farmer-genmai-link{left: 25%;}
#farmer-word-link{left: 75%;}


#word-area{
	height: calc(var(--content-width) * 2.30);
	margin-bottom: calc(var(--content-width) * 0.24);
}
#word-title{
	width: 50%; top: 0;
}
#word-photo-frame1{
	width: 40%; left: 0%; top: calc(var(--content-width) * 0.23);
	transform: rotate(10deg);
}
#word-photo-frame2{
	width: 40%; left: 56%; top: calc(var(--content-width) * 0.18);
	transform: rotate(-10deg);
}
#word-paragraph1{
	width: 80%; left: 10%; top: calc(var(--content-width) * 0.60);
}
#word-paragraph2{
	width: 80%; left: 10%;  top: calc(var(--content-width) * 0.75);
}
#word-paragraph3{
	width: 80%; left: 10%;  top: calc(var(--content-width) * 0.86);
}
#word-paragraph4{
	width: 80%; left: 10%;  top: calc(var(--content-width) * 1.11);
}
#word-paragraph5{
	width: 80%; left: 10%;  top: calc(var(--content-width) * 1.26);
}
#word-paragraph6{
	width: 80%; left: 10%;  top: calc(var(--content-width) * 1.41);
}
#word-area-content .concept{
	top: calc(var(--content-width) * 1.6);
}
#word-genmai{left: 0%;}
#word-farmer{left: 50%;}
#word-area-content .concept-link{
	width: 50%;
	text-align: center;
	transform: translate(-50%,-50%);
	top: calc(var(--content-width) * 2.1);
}
#word-genmai-link{left: 25%;}
#word-farmer-link{left: 75%;}

#news-list-area{height: calc(var(--content-width) * 2); margin-bottom: calc(var(--content-width) * 0.12);}
#news-detail-area{margin-top: calc(var(--content-width) * 0.08); margin-bottom: calc(var(--content-width) * 0.12);}

#contact-area{
	margin-bottom: calc(var(--content-width) * 0.12);
}
#contact-area p{
	display: block;
	position: relative;
}
#contact-area .title{width: 100%; top:0; padding-top: calc(var(--content-width) * 0.07); padding-bottom: calc(var(--content-width) * 0.08);}
#contact-area .paragraph{width: 100%; top:8%;}
#contact-area table{
	display: block;
	position: relative;
	width: 90%; left: 5%; top: 14%;
	background-color: rgb(255, 232, 252);
	border-radius: calc(var(--font-base) * 0.4);
	border-collapse: collapse;
	padding: calc(var(--font-base) * 2) calc(var(--font-base) * 1);
}
#contact-area tr{
	border-top: calc(var(--font-base) * 0.2) solid white;
	border-bottom: calc(var(--font-base) * 0.2) solid white;
}
#contact-area th{
	width: calc(var(--font-base) * 16);
	font-size: calc(var(--font-base) * 1.6);
	color: dimgray;
}
#contact-area td{
	width: calc(var(--font-base) * 32);
	font-size: calc(var(--font-base) * 1.6);
	padding: calc(var(--font-base) * 1) calc(var(--font-base) * 0.4);
}
#contact-area .half-input{
	width: calc(var(--font-base) * 10);
	height: calc(var(--font-base) * 2);
	border: 0;
	border-radius: calc(var(--font-base) * 0.2);
	margin-right: calc(var(--font-base) * 1);
	padding: 0 calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 1.4);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
#contact-area .full-input{
	width: calc(var(--font-base) * 23.2);
	height: calc(var(--font-base) * 2);
	border: 0;
	border-radius: calc(var(--font-base) * 0.2);
	padding: 0 calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 1.4);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
#contact-area .radio-button{
	margin-left: calc(var(--font-base) * 1);
	margin-right: calc(var(--font-base) * 2);
}
#contact-area input[type=radio]{
	width: calc(var(--font-base) * 1);
	height: calc(var(--font-base) * 1);
}
#contact-area select{
	width: calc(var(--font-base) * 25.2);
	height: calc(var(--font-base) * 2);
	border: 0;
	border-radius: calc(var(--font-base) * 0.2);
	padding: 0 calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 1.4);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
	background-color: white;
}
#contact-area textarea{
	width: calc(var(--font-base) * 23.2);
	height: calc(var(--font-base) * 7);
	border: 0;
	border-radius: calc(var(--font-base) * 0.2);
	padding: calc(var(--font-base) * 0.5) calc(var(--font-base) * 1);
	font-size: calc(var(--font-base) * 1.4);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
	background-color: white;
}
#contact-area .submit-button{
	margin-top: calc(var(--content-width) * 0.1);
	display: block;
	position: relative;
	width: calc(var(--content-width) * 0.5); height: calc(var(--content-width) * 0.16); left: calc(var(--content-width) * 0.25);
	color: white;
	border-radius: calc(var(--font-base) * 0.4);
	border: 0;
	font-size: calc(var(--font-base) * 1.5);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
#contact-area .submit-button input{
	display: block;
	position: absolute;
	width:100%;
}
#submit-pink{
	opacity: 0;
	transition: opacity 0.4s;
}
.submit-button:hover #submit-pink{opacity: 1;}
#contact-area .submit-button p{
	display: block;
	position: absolute;
	width: 100%; text-align: center;
	top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; padding: 0;
	pointer-events: none;
}

#recruit-area{
	height: calc(var(--content-width) * 2.00);
	margin-bottom: calc(var(--content-width) * 0.24);
}
#recruit-photo-frame1{
	display: none;
}
#recruit-photo-frame2{
	display: none;
}
#recruit-catch-copy{
	width: 56%; top: calc(var(--content-width) * 0.25);
}
#recruit-paragraph{
	width: 80%; left: 10%; top: calc(var(--content-width) * 0.48);
}
#recruit-detail-title{
	width: 60%; top: calc(var(--content-width) * 0.70);
}
.recruit-detail-table{
	display: block;
	position: relative;
	width: 100%; top: calc(var(--content-width) * 0.82); left: 8%;
	border-collapse: separate;
	border-spacing:  calc(var(--font-base) * 0.5);
	margin-bottom: calc(var(--content-width) * 0.04);
}
.recruit-detail-table th{
	padding: calc(var(--font-base) * 1);
	width: calc(var(--content-width) * 0.18);
	background-color: rgb(216, 224, 139);
	border-radius: calc(var(--font-base) * 0.5);
}
.recruit-detail-table td{
	padding: calc(var(--font-base) * 1) calc(var(--font-base) * 3) calc(var(--font-base) * 1) calc(var(--font-base) * 3);
	width: calc(var(--content-width) * 0.46);
	background-color: white;
	border-radius: calc(var(--font-base) * 0.5);
}

#admission-area{
	height: calc(var(--content-width) * 1.80);
	margin-bottom: calc(var(--content-width) * 0.12);
}
#admission-photo-frame1{
	display: none;
}
#admission-photo-frame2{
	display: none;
}
#admission-catch-copy{
	width: 60%; top: calc(var(--content-width) * 0.25);
}
#admission-paragraph{
	width: 80%; left: 10%; top: calc(var(--content-width) * 0.48);
}
#admission-detail-title{
	width: 60%; top: calc(var(--content-width) * 0.82);
}
#admission-detail-table{
	display: inline-block;
	width: 100%; top: calc(var(--content-width) * 0.94); left: 16%;
	border-collapse: separate;
	border-spacing:  calc(var(--font-base) * 0.5);
}
#admission-detail-table th{
	padding: calc(var(--font-base) * 1);
	width: calc(var(--content-width) * 0.15);
	background-color: rgb(216, 224, 139);
	border-radius: calc(var(--font-base) * 0.5);
}
#admission-detail-table td{
	padding: calc(var(--font-base) * 1) calc(var(--font-base) * 3) calc(var(--font-base) * 1) calc(var(--font-base) * 3);
	width: calc(var(--content-width) * 0.35);
	background-color: white;
	border-radius: calc(var(--font-base) * 0.5);
}

#form-complete-area{height: calc(var(--content-width) * 0.60); margin-bottom: calc(var(--content-width) * 0.12);}
#form-complete-area .title{top: 0%;}
#form-complete-area .paragraph{top: 35%;}
#link-button-back{
	width: 40%; height: 20%; left: 30%; top: 80%;
}
#link-button-back .image{
	width: 100%; height: 100%;
}
#link-button-back p{
	width: 100%; top: 50%; margin: 0; padding: 0; transform: translate(-50%, -50%);
}
#link-button-back .subtitle{font-size: calc(var(--font-base) * 1.4);}

body.side-open{overflow-y:hidden;}

.side-open .overlay {
	transform: translate3d(-60%, 0, 0);
}

.overlay {
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	transition: all .5s ease;
	z-index: 19;
}
.side-open .overlay {
	visibility: visible;
	cursor: pointer;
	background: rgba(0,0,0,.2);
	transition: all .5s ease;
}

.side-menu{
	position: fixed;
	top: 0;
	right: -60%;
	width: 60%;
	height: 100%;
	padding-top: 20%;
	text-align: left;
	background: rgb(150, 196, 66);
	z-index: 18;
	transition: all .5s ease;
}
.side-open .side-menu{
	right: 0;
	transition: all .5s ease;
}

.side-menu-ul{
	position: absolute;
	width: 100%;
	height: 90%;
	top: 5%;
	overflow-x: hidden;
	overflow-y: scroll;
	list-style-type: none;
	padding-inline-start: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.side-menu-ul::-webkit-scrollbar{
	display: none;
}
.side-menu-ul li{
	display: block; position: relative;
	height: 8%;
	padding: 0 calc(var(--font-base) * 2.4);
}
.side-menu-ul li p{display: block; position: absolute; top: 50%; transform: translate(0,-50%); padding: 0 calc(var(--font-base) * 2.4);}
.side-menu-ul li p.category{padding: 0 0;}

.side-menu-btn {
	position: fixed;
	top: calc(var(--font-base) * 1);
	right: calc(var(--font-base) * 1);
	width: calc(var(--font-base) * 6);
	height: calc(var(--font-base) * 6);
	padding: 0;
	cursor: pointer;
	z-index: 20;
	background: rgba(255, 255, 255, 0.9);
}
.side-open .side-menu-btn{
	background: none;
}

.ellipsis-v {
	position: relative;
	display: block;
	cursor: pointer;
	width: 50%;
	left: 25%;
	height: 50%;
	top: 25%;
}

.ellipsis-v .point {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 4px;
	margin: auto;
	background: #333;
	transition: all .3s;
}

.ellipsis-v .point.top {
	top: 0;
}

.ellipsis-v .point.mid {
	top: 0;
	bottom: 0;
}

.ellipsis-v .point.bot {
	bottom: 0;
}

.side-open .side-menu-btn:hover .top,
.side-open .top {
	width: 140%;
	height: 1px;
	background: #fff;
	transform-origin: left top;
	transform: rotate(45deg);
}

.side-open .mid {
	opacity: 0;
}

.side-open .side-menu-btn:hover .bot,
.side-open .bot {
	width: 140%;
	height: 1px;
	background: #fff;
	transform-origin: left bottom;
	transform: rotate(-45deg);
	}

.side-open .side-menu-btn:hover .bot,
.side-open .side-menu-btn:hover .top {
	background: #ccc;
}