@charset "UTF-8";
/* CSS Document */

*{margin: 0; padding: 0;}
/*
COLORS
================================================ */
:root {
    --green: #78B41E;/* 見出し他 */
	--pink: #FA9BB6;/*  */
	--yellow: #FDEDA7;/*  */
    --blue: #93D4DE;/* b */
    --light-green: #ABD028;/*  */
    --bg-orange: #FFF3DF;/*  */
    --bg-green: #F6FFE2;/*  */
    --bg-pink: #FEDEE2;/*  */
	--bg-blue: #DEEFEE;/*  */
    --bg-light-green: #EDF6D3;/* #E5EEB7; */
	--bg-yellow: #FFFBE9; /* #FFF2C3; */
    --bg-gray: #F9F9F9;/*  */
    --text: #707070;/* normal-text-color */
    --border: #ABD028;/* border-color */
    --caution: #F62C66;/* warnning */
    --white: #FFFFFF;/*  */
}

/*
FONT-SIZE
================================================ */
h1{font-size:2em; font-weight: 800;}
h2{font-size:1.5em;}
h3{font-size:1.2em;	font-weight: 700;}
h4{font-size:1.1em;	font-weight: 500;}
p{font-size:1em;}
dt{font-size:0.8em;	font-weight: 700;}
dd{font-size:0.9em;}

@media screen and (max-width:960px){
		
}
@media screen and (max-width:768px){
h2{font-size:1.3em;}
h3{font-size:1.1em;}
h4{font-size:1em;}
p{font-size:0.9em;}
}
/*
/*
COMMON
================================================ */
body{
	width: 100%;
	height: auto;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:var(--text);
	background: url("../img/bg-bubble_l.png") top left no-repeat,url("../img/bg-bubble_r.png") bottom right no-repeat; background-size: 40%,60%;
	background-attachment: fixed;
}
section{
	width: 100%;
	margin: 0;
	padding: 40px 0;
}
.container{
	width:60%;
}
@media screen and (max-width:1336px){
.container{width:70%;}
}
@media screen and (max-width:960px){
.container{width:80%;}
}
.container h2.title{display: block; text-align: center; margin: 0 auto 40px auto;}
.box{
	margin: 0 0 40px 0;
	padding:20px 20px 0 20px;
	border-radius: 20px;
}
.pink{
	color: var(--pink);
}
.green{
	color: var(--green);
}
/*
タイトルロゴ
================================================ */
.title_logo{
	display: flex;
	justify-content: space-between;
}
.title_logo h1{margin-top: 40px;}
.title_logo h1 img{
	width: 320px;
	height: auto;
}
.contact{padding: 40px 40px 20px 40px;
background-color: rgba(243,137,172,0.8);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.contact h2{
	color: var(--white);
	font-weight: 700;
	font-size: 1.8em;
}
.contact h2 small{
	font-weight: 500;
	font-size: 0.8em;
}
.contact h3{
	color: var(--yellow);
}

@media screen and (max-width:960px){
.title_logo h1 img{
	width: 300px;
	height: auto;
}
.contact{padding: 40px 20px 10px 20px;
background-color: rgba(243,137,172,0.8);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.contact h2{
	color: var(--white);
	font-weight: 600;
	font-size: 1.5em;
}
.contact h3{
font-size:1em;
}
	
}

@media screen and (max-width:768px){
.title_logo h1 img{
	width: 200px;
	height: auto;
}
.contact{
	display: none;
	}
}
/*
見出し
================================================ */
h2.title{
	position: relative;
	display: inline-block;
	padding: 0 1em;
	color:var(--green);
}
#access h2.title{
color:var(--white);	
}

h2.title:before,
h2.title:after {
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
}

h2.title:before {
  content: url("../img/star_l.svg");
	margin-right:10px;
	position:relative;
	top:10px;
	left: 0;
}

h2.title:after {
  content: url("../img/star_r.svg");
	margin-left:10px;
	position:relative;
	top:10px;
	right: 0;
}

h3{
	color:var(--green);
	font-weight: 600;
}
@media screen and (max-width:768px){
h2.title{
	padding: 0;
}

	h2.title:before {
	margin-right:5px;
}

h2.title:after {
	margin-left:5px;
}


}

/*
hero area
================================================ */
.hero-wrapper{
	background: url("../img/main_feb.png") center bottom 10px no-repeat,url("../img/main_tower.png")left 300px top 60px no-repeat,url("../img/main02.png")left 100px bottom 30px no-repeat,url("../img/main01.png")right center no-repeat;
	background-size: 30%,18%,18%,40%;
}
@media screen and (max-width:1200px){
	.hero-wrapper{
	background: url("../img/main_feb.png") center bottom no-repeat,url("../img/main_tower.png")left 30px top 100px no-repeat,url("../img/main02.png")right center no-repeat,url("../img/main01.png")right top 100px no-repeat;
	background-size: 50%,30%,18%,50%;
}
}
@media screen and (max-width:786px){
	.hero-wrapper{
	background: url("../img/main_feb.png") center bottom no-repeat,url("../img/main_tower.png")left 30px top 100px no-repeat,url("../img/main02.png")right center no-repeat,url("../img/main01.png")right top 100px no-repeat;
	background-size: 75%,40%,18%,55%;
}
}
/*
hero area
================================================ */
.hero_area{ 
	height: 30vh;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.hero_area h2, .hero_area h3{
text-shadow: 3px 3px 3px var(--white), -3px -3px 3px var(--white),
  -3px 3px 3px var(--white),  3px -3px 3px var(--white),
  3px 0 3px var(--white), -3px  0 3px var(--white),
  0 3px 3px var(--white),  0 -3px 3px var(--white);
}

.contact2{
	padding: 40px 40px 20px 40px;
background-color: rgba(243,137,172,0.8);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}

@media screen and (max-width:960px){
.hero_area{ 
	height: 40vh;
}
}
@media screen and (max-width:786px){
.hero_area{ 
	height: 500px;
}
.contact2{
	padding: 10px 20px 5px 20px;
	margin: 20px 0;
background-color: rgba(243,137,172,0.8);
border-radius: 0;
width:100vw;
	text-align: center;
}
.hero_area .contact2 h2, .hero_area .contact2 h3{
text-shadow: none;
}
.hero_area .contact2 h2{
color:  var(--white);
}
.hero_area .contact2 h3{
color:  var(--yellow);
}

}
/*
navigation
================================================ */
.unicorn-icon{
	position: relative;
}
.unicorn-icon img{
	z-index: 100;
	position: absolute;
	bottom: -10px;
	left: -10px;
	width: 100px;
	height: auto;
}
nav{
background: url("../img/bg-pink.png"),var(--pink);
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}

nav ul{
	padding: 0;
	margin:0;
	display: flex;
	justify-content: center;
	align-items: center;
}
nav ul li{
	padding: 5px 15px;
	margin: 0;
}
nav ul li::before{
	content: ""
}
nav ul li a{
	color: var(--white);
	font-size: 1.1em;
	font-weight: 600;
	text-decoration: none;
	transition: all ease-in-out 0.3s;
}
nav ul li a:hover{
	color: var(--yellow);
	background: url("../img/star_l.svg")top -50px center no-repeat;
	background-size: 40px;
}
nav ul li a:active{
	color: var(--yellow);
}
.active{
	color: var(--yellow);
}
@media screen and (max-width:1336px){
.unicorn-icon img{
	bottom: -10px;
	left: -10px;
	width: 80px;
	height: auto;
}
nav ul li{
	padding: 5px 10px;
}
nav ul li a{
	font-size: 1em;
}
}
@media screen and (max-width:960px){
nav ul li{
	padding: 10px;
}
nav ul li a{
	font-size: 0.8em;
	}
}
@media screen and (max-width:786px){
	.unicorn-icon img{display: none;}
}
/*
bg
================================================ */
.bg-green{
	background: var(--bg-green);
}
.bg-orange{
	background: url("../img/bg-orange.png"),var(--bg-orange);
	background-attachment: fixed;
}
.bg-spring{
	background: var(--bg-pink);
}
.bg-summer{
	background: var(--bg-green);
}
.bg-fall{
	background: var(--bg-yellow);
}
.bg-winter{
	background: var(--bg-blue);
}
.bg-white{
	background: var(--white);
	padding: 20px;
	border-radius: 20px;
	width: 100%;
	height: auto;
}

@media screen and (max-width:786px){
	.bg-orange{
background:url("../img/bg-orange.png"),var(--bg-orange);
}
}

/*
border
================================================ */
.line{
	border-bottom: 1px var(--light-green) dotted;
}
.border-pink{
	border: 10px #FAC5D7 solid;
	background:#fff;
}
.border-blue{
	border: 5px var(--blue) solid;
	background:url(../img/rainbow.svg) bottom right no-repeat,#fff; background-size: 150px,auto;
}
.flower{
	background: url("../img/flower.svg") bottom right 20px no-repeat,#fff; 
	background-size: 30%,auto;
}
/*
ul li
================================================ */
ul {
padding-left: 0em;
list-style: none;
}
ul li{
padding-bottom:10px;
position: relative;
padding-left: 25px;
}
ul li::before{
	font: var(--fa-font-regular);
	content: "\f118";
	font-size:1.2em;
	position: absolute;
	top: 3px;
	left: 0;
	color: var(--green);
}
.fac ul li::before{
	color: var(--pink);
}
@media screen and (max-width:1200px){
	ul li{font-size: 0.9em;}
}
/*
dl
================================================ */
dl {
display: flex;
}
dt{
	color:var(--green);
	width:7em;
	align-items: center;
}
.border-pink dl dt{text-align: center;}

@media screen and (max-width:786px){
.border-pink dl dt{text-align:left;}
}

/*
button
================================================ */
a.btn{
	width: 100%;
	height: 4em;
	display: flex;
	background-color:#FFF;
	border: 3px var(--light-green) solid;
	border-radius: 20px;
	font-size:0.9em;
	font-weight:700;
	color:var(--text);
	text-decoration: none;
	text-align: left;
	padding: 10px 20px;
	justify-content:space-between;
	align-items:center;
	box-shadow: 0px 0px 3px 2px rgba(30,51,0,0.30);
	transition: all ease-in-out 0.3s;
}
a.btn:hover{
	background: var(--bg-yellow);
	color:var(--caution);
	border: 3px var(--light-green) solid;
}

a.btn i{
	color: var(--pink);
	font-size:1.4em;
}
a.btn:hover i{
	color: var(--caution);
}
@media screen and (max-width:1200px) {  
a.btn{
	font-size:0.8em;
}
}
/*
about
================================================ */
.lunch{
	margin-top: 20px;
	border-radius: 10px;
}
.room{
	border-radius: 10px;
}
.hoiku-title img,.room-title img{
	border-radius: 10px;
}
.hoiku-title h2 img,.room-title h2 img{
	border-radius: 0;
	max-width: 100px;
}

.icon-unicorn img{
	display: none;
}
@media screen and (max-width:768px) {  
	.icon-unicorn{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.icon-unicorn img{
		display: block;
		margin-bottom: 10px;
	}
}
/*
life
================================================ */
.hoiku ul li,.fac ul li{
	font-weight:500;
}
/*
life
================================================ */
.timetable dl{ margin: 0; padding: 0; margin-left: 30%;}
.timetable dt{width: auto; padding: 20px 10px 0 0 ;position: relative;}
.timetable dt::after{position: absolute; content: "●"; font-size:1.2em; color:var(--pink); right: -10px;}
.timetable dd{border-left: 5px var(--bg-pink) solid; padding: 20px 0 20px 10px; margin: 1px 0;}
@media screen and (max-width:1200px) {  
.timetable dl{ margin-left: 20%;}
.timetable dd{font-size:0.8em; padding: 20px 0 20px 10px;}
}
/*
event
================================================ */
.ev{
	padding: 20px 20px 0 20px;
	border-radius: 20px;
}

.ev dl{
	flex-direction: column;
}
.ev dt{
	width: auto;
	font-size:1.2em;
	margin-bottom: 10px;
}

.ev dl dt,.ev dl dd{
	text-align: center;
}
.ev dd{
	font-size:0.8em;
}
.bg-spring dt{
	color: #F187AA;
}
.bg-summer dt{
	color: #78B41E;
}
.bg-fall dt{
	color: #B29B36;
}
.bg-winter dt{
	color: #7FB8C1;
}
@media screen and (max-width:1200px) {  
.ev{
	padding: 20px 10px 0 10px;
	border-radius: 20px;
}
.ev dd{
	font-size:0.7em;
}
}

/*
DL
================================================ */
.dl_sm{margin-bottom: 20px;}
/*
access
================================================ */
#access{
	background: url("../img/bg-green.png"),var(--green);
	background-attachment: fixed;
	color: var(--white);
}

.address-box{
	margin-bottom: 20px;
	background: url("../img/unicorn.svg") bottom right no-repeat;
	background-size: 20%;
}
#access h2,#access h3{
	color: var(--yellow);
}
#access dt{
	color: var(--white);
	width: 6em;
}
#access dl{margin: 0;}
.access-box{
	padding: 20px 20px 0 20px;
	border: 1px var(--white) solid;
	border-radius: 20px;

}
.access-box p{
	font-size:0.9em;
}
.map{
	background: var(--white);
	padding: 20px;
	border-radius:20px;
	width: 100%;
	height:auto;
}
.map-box h2{
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
dd.mail a{
	text-decoration: none;
	color:var(--white);
}
@media screen and (max-width:1200px) {  
.map-box h2{
	font-size: 1.2em;
}
}
@media screen and (max-width:960px) {  
.map-box h2{
	font-size: 1em;
}
.access-box p{
	font-size:0.8em;
}

}

/*
footer
================================================ */
footer{
	width: 100%;
	height:100px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--light-green);
	color: var(--white);
}
footer h6{font-weight:400;}

/*
FORM
================================================ */
form h3 i{
	color:var(--pink);
}
::placeholder {
  color: #cccccc !important;
}
#g-nav-list ul.form{margin-bottom: 40px;}
/*==================================================
/*Form > table template */
/*===================================*/
table{
  border-collapse: collapse;
  width: 60%;
	background-color:#fff;
}
#form table{margin: 20px auto;}
#form table th{ background: var(--green); color: #fff; text-align: center;padding: 10px;}
#form table tr{ border-bottom: 1px #ccc solid;}
#form table td{ padding: 10px; font-size:0.9em; line-height:2;}
@media screen and (max-width:768px) {  
	#form table th,#form table td{ display: block; width: 100%;}
	#form table tr{ border-bottom: none;}
}

/*==================================================
/*ToTop */
/*===================================*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:var(--pink);
	border-radius: 5px;
	border:3px var(--white) solid;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: var(--caution);
	color:var(--yellow);
}

@media screen and (max-width:768px) {
 #page-top a:hover{
	background:var(--pink);
}   
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

/*
スマホ時：表示非表示
================================================ */
.noSMP{display: block;}
.SMP{display: none;}
@media screen and (max-width:768px){
.noSMP{display: none;}
.SMP{display: block;}
}

/*
印刷用CSS
================================================ */
@media print{
	body{color:#000;}
	section{padding: 20px 0;}
	section{page-break-before: always;}
	.container{width:90%;}
	h2,h3{font-size:1rem;}
	h4,dt{font-size:0.9rem;}
	p,dd,li{font-size:0.8rem;}
	.ev{padding: 10px 5px 0 5px; border-radius: 10px;}
	.ev dd{font-size:0.6em;}
	.ev dt{	font-size:1em; margin-bottom: 5px;}
	.border-pink dl dt{font-size:0.9rem;}
	.border-pink dl dd{font-size:0.7rem;}
	.border-pink dl{margin-bottom:0;}
	.border-pink,.border-blue{padding: 10px;}
	.border-blue h3,.border-blue h3{font-size:0.9rem;}
	.border-blue p,.border-blue li{font-size:0.6rem;}
	.timetable dd{ padding: 10px 0 10px 10px;}
}