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

body{
	margin: 0; padding: 0;
	letter-spacing: 0;
	background-image: url(../img/background.jpg);
	background-attachment: scroll;
	background-size: 100%;
	background-repeat: repeat-y;
}
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) * 1.6);}
.subtitle{font-size: calc(var(--font-base) * 1.2);}
.paragraph{font-size: calc(var(--font-base) * 0.7);}
.small-paragraph{font-size: calc(var(--font-base) * 0.6);}
.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: 20%; 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: 100%; left: 0;
	bottom: -300%;
	position: fixed;
	user-select: none;
	z-index: -2;
}

.floating-insect{
	display: block; position: fixed; z-index: 6;
	width: 10%; 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;
}
.loaded #butterfly{
	top: 78%;
	animation:
		butterfly 2.5s ease-in-out infinite alternate,
		butterfly-h 3s ease-in-out infinite alternate;
}

@keyframes bee-v{
	0%{top: 30%;}
	50%{top: 10%;}
	100%{top: 30%;}
}
@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: 9%;}
}

#header-area{
	height: calc(var(--content-width) * 1.60);
	margin-bottom: calc(var(--content-width) * 0.12);
	z-index:5;
}
.main-visual{width: 100%; top: calc(var(--content-width) * 0.14); left: 0; 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: 25%; height: calc(var(--content-width) * 0.25); opacity:0;}
.loaded .grid-a,.loaded .grid-c{animation: main-visual-grid-a linear 24s infinite;}
.loaded .grid-b,.loaded .grid-d{animation: main-visual-grid-b linear 24s infinite;}
.loaded .grid1-1{left: 0; top: calc(var(--content-width) * 0.14); animation-delay: 0.6s;}
.loaded .grid1-2{left: 25%; top: calc(var(--content-width) * 0.14); animation-delay: 1.0s;}
.loaded .grid1-3{left: 50%; top: calc(var(--content-width) * 0.14); animation-delay: 0.0s;}
.loaded .grid1-4{left: 75%; top: calc(var(--content-width) * 0.14); animation-delay: 0.3s;}
.loaded .grid2-1{left: 0; top: calc(var(--content-width) * 0.39); animation-delay: 1.3s;}
.loaded .grid2-2{left: 25%; top: calc(var(--content-width) * 0.39); animation-delay: 0.2s;}
.loaded .grid2-3{left: 50%; top: calc(var(--content-width) * 0.39); animation-delay: 0.8s;}
.loaded .grid2-4{left: 75%; top: calc(var(--content-width) * 0.39); animation-delay: 0.5s;}
.loaded .grid3-1{left: 0; top: calc(var(--content-width) * 0.64); animation-delay: 0.9s;}
.loaded .grid3-2{left: 25%; top: calc(var(--content-width) * 0.64); animation-delay: 1.6s;}
.loaded .grid3-3{left: 50%; top: calc(var(--content-width) * 0.64); animation-delay: 1.2s;}
.loaded .grid3-4{left: 75%; top: calc(var(--content-width) * 0.64); animation-delay: 0.7s;}

#header-cloud{width: 100%; top: 0; left: 0;}
#header-cloud-sp{display: none;}
#header-paddy{width: 100%; top: calc(var(--content-width) * 0.74); left: 0;}
#main-visual-phrase{width: 60%; left: 5%; top: calc(var(--content-width) * 0.38); 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;}
	22% {opacity: 0;}
	30% {opacity: 1;}
	42% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 0;}
}

@keyframes main-visual-grid-b{
	0% {opacity: 0;}
	72% {opacity: 0;}
	80% {opacity: 1;}
	92% {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: 20%; top: 0; left: 4%;}
.symbol{
	width: calc(var(--content-width) * 0.06);
	top: calc(var(--content-width) * 0.07);
	animation: tremble 2s ease-in-out infinite;
	transform-origin: 50% 50%;
}
#header-symbol1{left: calc(30% - var(--content-width) * 0.03);}
#header-symbol2{left: calc(40% - var(--content-width) * 0.03);}
#header-symbol3{left: calc(50% - var(--content-width) * 0.03);}
#header-symbol4{left: calc(60% - var(--content-width) * 0.03);}
#header-symbol5{left: calc(70% - var(--content-width) * 0.03);}
#header-symbol6{left: calc(80% - var(--content-width) * 0.03);}
#header-symbol7{left: calc(90% - var(--content-width) * 0.03);}
@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) * 0.7);
	top: calc(var(--content-width) * 0.14);
	white-space: nowrap;
	text-align: center;
}
#header-link1{width: calc(var(--font-base) * (0.7 * 5 + 1.5)); left: calc(30% - var(--font-base) * (0.7 * 5 + 1.5) / 2);}
#header-link2{width: calc(var(--font-base) * (0.7 * 6 + 1.5)); left: calc(40% - var(--font-base) * (0.7 * 6 + 1.5) / 2);}
#header-link3{width: calc(var(--font-base) * (0.7 * 4 + 1.5)); left: calc(50% - var(--font-base) * (0.7 * 4 + 1.5) / 2);}
#header-link4{width: calc(var(--font-base) * (0.7 * 4 + 1.5)); left: calc(60% - var(--font-base) * (0.7 * 4 + 1.5) / 2);}
#header-link5{width: calc(var(--font-base) * (0.7 * 4 + 1.5)); left: calc(70% - var(--font-base) * (0.7 * 4 + 1.5) / 2);}
#header-link6{width: calc(var(--font-base) * (0.7 * 5 + 1.5)); left: calc(80% - var(--font-base) * (0.7 * 5 + 1.5) / 2);}
#header-link7{width: calc(var(--font-base) * (0.7 * 4 + 1.5)); left: calc(90% - var(--font-base) * (0.7 * 4 + 1.5) / 2);}

.recruit-link-box{
	width: 14%;
	left: 100%; top: calc(var(--content-width) * 0.24);
	transform: translate(-110%,0);
	cursor: pointer;
}

.admission-link-box{
	width: 11%;
	left: 75%; top: calc(var(--content-width) * 0.22);
	cursor: pointer;
}

.frame-title{width: 50%; left: 25%; top: 0;}
.area-title{
	left: 50%; transform: translate(-50%,0); top: calc(var(--content-width) * 0.05);
	display: block; position: absolute; margin: 0;
}

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

#header-area-content{
	height: calc(var(--content-width) * 0.5);
	top: calc(var(--content-width) * 1.15);
}
.concept{
	width: 30%;
	top: calc(var(--content-width) * 0.10);
}
.concept:hover{
	animation: biyo ease-in-out 0.35s 2;
}
#concept-genmai{left: 0%;}
#concept-farmer{left: 35%;}
#concept-word{left: 70%;}
#header-area-content .concept-link{
	width: 30%;
	text-align: center;
	transform: translate(-50%,-50%);
	top: calc(var(--content-width) * 0.40);
}
#concept-genmai-link{left: 15%;}
#concept-farmer-link{left: 50%;}
#concept-word-link{left: 85%;}
@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) * 0.6); margin-bottom: calc(var(--content-width) * 0.12);}
#greeting-back-sp{display: none;}
#greeting-photo-frame{
	left: 66%; top: calc(var(--content-width) * 0.28);
	transform: rotate(-10deg);
}
#greeting-title{
	display: block; position: absolute; margin: 0;
	right: 26%;
	top: 13%;
	height: calc(var(--content-width) * 0.6);
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-align: initial;
}
#greeting-paragraph{
	right: 34%;
	top: 13%;
	height: 76%;
	writing-mode: vertical-rl;
	text-orientation: upright;
	line-height: 1.8;
}

#feature-area{height: calc(var(--content-width) * 0.6); margin-bottom: calc(var(--content-width) * 0.12); overflow: visible;}
#feature-photo-frame{
	left: 4%; top: calc(var(--content-width) * 0.52);
	transform: rotate(5deg);
}
#feature-area-content p{
	display: block; position: absolute;
	margin: 0; padding: 0;
	white-space: nowrap;
}
#frame-features{width: 100%; top: calc(var(--content-width) * 0.15);}
#frame-features-sp{display: none;}
#feature-paragraph1-1{top: 35%; left: 15%; transform: translate(-50%,0);}
#feature-paragraph1-2{top: 40%; left: 15%; transform: translate(-50%,0);}
#feature-paragraph2{top: 41%; left: 49%; transform: translate(-50%,-50%);}
#feature-paragraph3{top: 41%; left: 81%; transform: translate(-50%,-50%);}
#feature-paragraph4{top: 74%; left: 17%; transform: translate(-50%,-50%);}
#feature-paragraph5{top: 74%; left: 49%; transform: translate(-50%,-50%);}
#feature-paragraph6{top: 74%; left: 81%; transform: translate(-50%,-50%);}

#news-area{height: calc(var(--content-width) * 0.6); margin-bottom: calc(var(--content-width) * 0.12);}
#news-area p{display: block; position: absolute; margin: 0;}
#news-link{
	top: calc(var(--content-width) * 0.10);
	left: 100%; transform: translate(-100%,0);
	white-space: nowrap;
}
#news-front{
	width: 100%; height: calc(var(--content-width) * 0.45); bottom: 0;
	background-color: rgba(180, 249, 255, 0.7);
	border-radius: calc(var(--font-base) * 1);
}

#schedule-area{
	height: calc(var(--content-width) * 2.4);
	margin-bottom: calc(var(--content-width) * 0.12);
}
#schedule-area .paragraph{font-size: calc(var(--font-base) * 0.6);}
#schedule-photo-frame1{
	left: 72%; top: calc(var(--content-width) * 0.64);
	transform: rotate(-15deg);
}
#schedule-photo-frame2{
	left: 0%; top: calc(var(--content-width) * 1.62);
	transform: rotate(5deg);
}
#schedule-annual-subtitle{width: 50%; top: calc(var(--content-width) * 0.12);}
#schedule-annual{width: 100%; left: 0; top: calc(var(--content-width) * 0.15);}
#schedule-annual-sp{display: none;}
#schedule-annual-paragraph4{width: 20%; left: 9%; top: calc(var(--content-width) * 0.27);}
#schedule-annual-paragraph5{width: 20%; left: 31%; top: calc(var(--content-width) * 0.27);}
#schedule-annual-paragraph6{width: 20%; left: 53%; top: calc(var(--content-width) * 0.27);}
#schedule-annual-paragraph7{width: 20%; left: 75%; top: calc(var(--content-width) * 0.27);}
#schedule-annual-paragraph8{width: 20%; left: 9%; top: calc(var(--content-width) * 0.415);}
#schedule-annual-paragraph9{width: 20%; left: 31%; top: calc(var(--content-width) * 0.415);}
#schedule-annual-paragraph10{width: 20%; left: 53%; top: calc(var(--content-width) * 0.415);}
#schedule-annual-paragraph11{width: 20%; left: 75%; top: calc(var(--content-width) * 0.415);}
#schedule-annual-paragraph12{width: 20%; left: 9%; top: calc(var(--content-width) * 0.56);}
#schedule-annual-paragraph1{width: 20%; left: 31%; top: calc(var(--content-width) * 0.56);}
#schedule-annual-paragraph2{width: 20%; left: 53%; top: calc(var(--content-width) * 0.56);}
#schedule-annual-paragraph3{width: 20%; left: 75%; top: calc(var(--content-width) * 0.56);}
#schedule-daily-frame{top:calc(var(--content-width) * 0.76);}
#schedule-daily-title{top: calc(var(--content-width) * 0.81);}
#schedule-daily{width: 100%; left: 0; top: calc(var(--content-width) * 0.85);}
#schedule-daily-sp{display: none;}
#schedule-daily-junior-title{width: 20%; left: 12.5%; top: calc(var(--content-width) * 0.873);}
#schedule-daily-senior-title{width: 20%; left: 12.5%; top: calc(var(--content-width) * 1.287);}
#schedule-area .vertical{text-align: center; height: calc(var(--content-width) * 0.11);}
#schedule-daily-junior830{left: 7.75%; top: calc(var(--content-width) * 0.95);}
#schedule-daily-junior910{left: 16.5%; top: calc(var(--content-width) * 0.95);}
#schedule-daily-junior930{left: 25.95%; top: calc(var(--content-width) * 0.95);}
#schedule-daily-junior1000{left: 35.25%; top: calc(var(--content-width) * 0.95);}
#schedule-daily-junior1100{left: 44.0%; top: calc(var(--content-width) * 0.95);}
#schedule-daily-junior1200{left: 62.2%; top: calc(var(--content-width) * 0.95);}
#schedule-daily-junior1500{left: 79.7%; top: calc(var(--content-width) * 0.95);}
#schedule-daily-junior1600{left: 88.8%; top: calc(var(--content-width) * 0.95);}
#schedule-daily-senior830{left: 7.6%; top: calc(var(--content-width) * 1.18);}
#schedule-daily-senior910{left: 16.5%; top: calc(var(--content-width) * 1.18);}
#schedule-daily-senior930{left: 25.95%; top: calc(var(--content-width) * 1.18);}
#schedule-daily-senior1000{left: 35.25%; top: calc(var(--content-width) * 1.18);}
#schedule-daily-senior1130{left: 53.2%; top: calc(var(--content-width) * 1.18);}
#schedule-daily-senior1300{left: 71.5%; top: calc(var(--content-width) * 1.18);}
#schedule-daily-senior1500{left: 80.0%; top: calc(var(--content-width) * 1.18);}
#schedule-daily-senior1600{left: 88.8%; top: calc(var(--content-width) * 1.18);}
#schedule-regular{width: 80%; left: 10%; top: calc(var(--content-width) * 1.40);}
#schedule-month-paragraph{width: 55%; left: 25%; top: calc(var(--content-width) * 1.50); line-height: 2.0;}
#schedule-halfmonth-paragraph{width: 55%; left: 25%; top: calc(var(--content-width) * 1.97); line-height: 2.0;}
#schedule-everyday-paragraph{width: 55%; left: 25%; top: calc(var(--content-width) * 2.20); line-height: 2.0;}

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

#access-area{
	height: calc(var(--content-width) * 0.64);
	margin-bottom: calc(var(--content-width) * 0.12);
}
#access-photo-frame{
	left: 63%; top: calc(var(--content-width) * 0.36);
	transform: rotate(-5deg);
}
#access-map{
	width: 50%; left: 10%;
	height: calc(var(--content-width) * 0.35); top: calc(var(--content-width) * 0.17);
}
#access-info{
	width: 35%; left: 65%;
	height: calc(var(--content-width) * 0.25); top: calc(var(--content-width) * 0.17);
}

#footer-area{ height: calc(var(--content-width) * 0.20);}
#footer-logo{
	width: 16%; top: 0; left: 8%;
}
#footer-profile{bottom: 24%; left: 24%;}
#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.24); left: 64%; bottom: 20%;}
#footer-logo-instagram{width:calc(var(--content-width) * 0.05); left: 90%; top: 20%;}
#footer-logo-facebook{width:calc(var(--content-width) * 0.05); left: 90%; top: 50%;}

#sub-header-area{
	width: 100%; left: 0;
	height: calc(var(--content-width) * 0.24);
	margin-bottom: calc(var(--content-width) * 0.12);
}
#sub-header-area .recruit-link-box{display: none;}
#sub-header-area .admission-link-box{display: none;}

#fee-area{
	height: calc(var(--content-width) * 1.1);
	margin-bottom: calc(var(--content-width) * 0.12);
}
#fee-title{
	width: 50%; top: 0;
}
#fee-table{
	display: inline-block;
	width: 100%; top: calc(var(--content-width) * 0.16); left: 16%;
	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) * 0.78);
}

#overview-area{
	height: calc(var(--content-width) * 1.5);
	margin-bottom: calc(var(--content-width) * 0.12);
}
#overview-title{
	width: 50%; top: 0;
}
#overview-table{
	display: inline-block;
	width: 100%; top: calc(var(--content-width) * 0.16); left: 16%;
	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) * 1) 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) * 0.78);
}
#overview-company-paragraph{
	width: 60%; left: 20%; top: calc(var(--content-width) * 0.86);
}
#sukusuku-song{
	width: 60%; left: 20%; top: calc(var(--content-width) * 1.06);
}

#genmai-area{
	height: calc(var(--content-width) * 2.40);
	margin-bottom: calc(var(--content-width) * 0.12);
}
#genmmai-area p{line-height: 1.3;}
#genmai-photo1{
	width: 32%; left: 1%;
	height: calc(var(--content-width) * 0.24);
	top: calc(var(--content-width) * 0.18);
}
#genmai-photo2{
	width: 32%; left: 34%;
	height: calc(var(--content-width) * 0.24);
	top: calc(var(--content-width) * 0.18);
}
#genmai-photo3{
	width: 32%; left: 67%;
	height: calc(var(--content-width) * 0.24);
	top: calc(var(--content-width) * 0.18);
}
#genmai-title{
	width: 50%; top: calc(var(--content-width) * 0.3);
}
#genmai-paragraph1{
	width: 60%; left: 0%; top: calc(var(--content-width) * 0.55);
}
#genmai-photo-frame1{
	left: 68%; top: calc(var(--content-width) * 0.52);
	transform: rotate(-10deg);
}
#genmai-paragraph2{
	width: 60%; left: 40%; top: calc(var(--content-width) * 0.90);
}
#genmai-paragraph3{
	width: 60%; left: 40%; top: calc(var(--content-width) * 1.00);
}
#genmai-photo-frame2{
	left: 0%; top: calc(var(--content-width) * 0.84);
	transform: rotate(5deg);
}
#genmai-paragraph4{
	width: 60%; left: 0%; top: calc(var(--content-width) * 1.20);
}
#genmai-paragraph5{
	width: 60%; left: 0%; top: calc(var(--content-width) * 1.26);
}
#genmai-paragraph6{
	width: 60%; left: 0%; top: calc(var(--content-width) * 1.43);
}
#genmai-photo-frame3{
	left: 74%; top: calc(var(--content-width) * 1.24);
	transform: rotate(-5deg);
}
#genmai-photo4{
	width: 32%; left: 1%;
	height: calc(var(--content-width) * 0.24);
	top: calc(var(--content-width) * 1.66);
}
#genmai-photo5{
	width: 32%; left: 34%;
	height: calc(var(--content-width) * 0.24);
	top: calc(var(--content-width) * 1.66);
}
#genmai-photo6{
	width: 32%; left: 67%;
	height: calc(var(--content-width) * 0.24);
	top: calc(var(--content-width) * 1.66);
}
#genmai-area-content .concept{
	top: calc(var(--content-width) * 2.00);
}
#genmai-farmer{left: 15%;}
#genmai-word{left: 55%;}
#genmai-area-content .concept-link{
	width: 30%;
	text-align: center;
	transform: translate(-50%,-50%);
	top: calc(var(--content-width) * 2.30);
}
#genmai-farmer-link{left: 30%;}
#genmai-word-link{left: 70%;}

#farmer-area{
	height: calc(var(--content-width) * 2.12);
	margin-bottom: calc(var(--content-width) * 0.12);
}
#farmer-title{
	width: 50%; top: 0;
}
#farmer-paragraph{
	width: 60%; left: 20%; top: calc(var(--content-width) * 0.14);
}
#farmer-fukunaga1{
	width: 40%; height: calc(var(--content-width) * 0.30); left: 0; top: calc(var(--content-width) * 0.32);
}
#farmer-fukunaga2{
	width: 29%; height: calc(var(--content-width) * 0.20); left: 41%; top: calc(var(--content-width) * 0.26);
}
#farmer-fukunaga3{
	width: 29%; height: calc(var(--content-width) * 0.20); left: 71%; top: calc(var(--content-width) * 0.26);
}
#farmer-fukunaga-title{
	width: 40%; left: 20%; top: calc(var(--content-width) * 0.24);
}
#farmer-fukunaga-paragraph{
	width: 58%; left: 42%; top: calc(var(--content-width) * 0.51);
}

#farmer-kaneya1{
	width: 40%; height: calc(var(--content-width) * 0.30); left: 60%; top: calc(var(--content-width) * 0.82);
}
#farmer-kaneya2{
	width: 29%; height: calc(var(--content-width) * 0.20); left: 0%; top: calc(var(--content-width) * 0.76);
}
#farmer-kaneya3{
	width: 29%; height: calc(var(--content-width) * 0.20); left: 30%; top: calc(var(--content-width) * 0.76);
}
#farmer-kaneya-title{
	width: 40%; left: 80%; top: calc(var(--content-width) * 0.74);
}
#farmer-kaneya-paragraph{
	width: 58%; left: 0%; top: calc(var(--content-width) * 1.01);
}

#farmer-goshima1{
	width: 40%; height: calc(var(--content-width) * 0.30); left: 0; top: calc(var(--content-width) * 1.32);
}
#farmer-goshima2{
	width: 29%; height: calc(var(--content-width) * 0.20); left: 41%; top: calc(var(--content-width) * 1.26);
}
#farmer-goshima3{
	width: 29%; height: calc(var(--content-width) * 0.20); left: 71%; top: calc(var(--content-width) * 1.26);
}
#farmer-goshima-title{
	width: 40%; left: 20%; top: calc(var(--content-width) * 1.24);
}
#farmer-goshima-paragraph{
	width: 58%; left: 42%; top: calc(var(--content-width) * 1.51);
}

#farmer-area-content .concept{
	top: calc(var(--content-width) * 1.76);
}
#farmer-genmai{left: 15%;}
#farmer-word{left: 55%;}
#farmer-area-content .concept-link{
	width: 30%;
	text-align: center;
	transform: translate(-50%,-50%);
	top: calc(var(--content-width) * 2.06);
}
#farmer-genmai-link{left: 30%;}
#farmer-word-link{left: 70%;}


#word-area{
	height: calc(var(--content-width) * 1.46);
	margin-bottom: calc(var(--content-width) * 0.12);
}
#word-title{
	width: 50%; top: 0;
}
#word-photo-frame1{
	width: 30%; left: 62%;
	height: calc(var(--content-width) * 0.30); top: calc(var(--content-width) * 0.18);
	transform: rotate(10deg);
}
#word-paragraph1{
	width: 60%; left: 0%; top: calc(var(--content-width) * 0.18);
}
#word-paragraph2{
	width: 60%; left: 0%; top: calc(var(--content-width) * 0.30);
}
#word-paragraph3{
	width: 60%; left: 0%; top: calc(var(--content-width) * 0.38);
}
#word-photo-frame2{
	width: 30%; left: 0%;
	height: calc(var(--content-width) * 0.30); top: calc(var(--content-width) * 0.60);
	transform: rotate(-10deg);
}
#word-paragraph4{
	width: 60%; left: 40%; top: calc(var(--content-width) * 0.60);
}
#word-paragraph5{
	width: 60%; left: 40%; top: calc(var(--content-width) * 0.72);
}
#word-paragraph6{
	width: 60%; left: 40%; top: calc(var(--content-width) * 0.84);
}
#word-area-content .concept{
	top: calc(var(--content-width) * 1.1);
}
#word-genmai{left: 15%;}
#word-farmer{left: 55%;}
#word-area-content .concept-link{
	width: 30%;
	text-align: center;
	transform: translate(-50%,-50%);
	top: calc(var(--content-width) * 1.4);
}
#word-genmai-link{left: 30%;}
#word-farmer-link{left: 70%;}

#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.05); padding-bottom: calc(var(--content-width) * 0.05);}
#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) * 0.8);
	color: dimgray;
}
#contact-area td{
	width: calc(var(--font-base) * 32);
	font-size: calc(var(--font-base) * 0.8);
	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) * 0.8);
	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) * 0.8);
	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) * 0.8);
	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) * 0.8);
	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) * 1.4);
	margin-bottom: calc(var(--content-width) * 0.12);
}
#recruit-photo-frame1{
	left: 0%; top: calc(var(--content-width) * 0.10);
	transform: rotate(-5deg);
}
#recruit-photo-frame2{
	left: 72%; top: calc(var(--content-width) * 0.36);
	transform: rotate(5deg);
}
#recruit-catch-copy{
	width: 60%; top: calc(var(--content-width) * 0.16);
}
#recruit-paragraph{
	width: 50%; left: 25%; top: calc(var(--content-width) * 0.28);
}
#recruit-detail-title{
	width: 60%; top: calc(var(--content-width) * 0.42);
}
.recruit-detail-table{
	display: block;
	position: relative;
	width: 70%; top: calc(var(--content-width) * 0.50); left: 16%;
	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.15);
	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.35);
	background-color: white;
	border-radius: calc(var(--font-base) * 0.5);
}

#admission-area{
	height: calc(var(--content-width) * 1.08);
	margin-bottom: calc(var(--content-width) * 0.12);
}
#admission-photo-frame1{
	left: 0%; top: calc(var(--content-width) * 0.30);
	transform: rotate(-5deg);
}
#admission-photo-frame2{
	left: 74%; top: calc(var(--content-width) * 0.08);
	transform: rotate(5deg);
}
#admission-catch-copy{
	width: 60%; top: calc(var(--content-width) * 0.16);
}
#admission-paragraph{
	width: 50%; left: 25%; top: calc(var(--content-width) * 0.28);
}
#admission-detail-title{
	width: 60%; top: calc(var(--content-width) * 0.50);
}
#admission-detail-table{
	display: inline-block;
	width: 100%; top: calc(var(--content-width) * 0.58); 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%);
}


.side-menu{display: none;}
.side-menu-btn{display: none;}