@charset "utf-8";
/* contents.css */

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* KV　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#kv {
	height: 100vh;	
}

/* -- スクロール ----------------------------------------------- */
/*スクロールダウン全体の場所*/
.scrolldown {
	position: absolute;
	bottom: 10px;
	left: 50%;
	color: #4a5d4d;
}

/*scrollテキスト*/
.scrolldown span {
	position: absolute;
	bottom: 100px;
	left: -20px;
}

/* 丸の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-3px;
    /*丸の形状*/
  width:7px;
  height:7px;
  border-radius: 50%;
  background:#4a5d4d;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:95px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:1px;
  height: 100px;
  background:#4a5d4d;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 共通　h2ボックス　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.h2_box {
	text-align: center;
	margin-bottom: 50px;
}
.h2_mark {
	margin-bottom: 20px;
}
.h2_mark img {
	height: 130px;
	width: auto;
}
.h2_box h2 {
	font-family: "M PLUS Rounded 1c", sans-serif;
	background-color: #4a5d4d;
	color: #FFFFFF;
	font-size: 40px;
	line-height: 1.2em;
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 35px;
	font-weight: 500;
	letter-spacing: 2px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 保育理念　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#area_rinen {
	background-image: url(../images/bg_01.png),url(../images/bg_02.png);
	background-position: top -50px right -80px,top 340px left -30px;
	background-size: 260px auto,130px auto;
	background-repeat: no-repeat,no-repeat;
	padding-bottom: 60px;
}
#area_rinen h3 {
	text-align: center;
	font-size: 30px;
	line-height: 1.4em;
	font-weight: 600;
}
.full_img {

}
.full_img img {
	width: 100%;
	height: auto;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 当園の特徴　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#area_tokucho {
}
.ft_list {
	padding-top: 20px;
	margin-left: -20px;
	padding-left: 20px;
	background-image: url(../images/bg_02.png);
	background-position: left top;
	background-size: 100px auto;
	background-repeat: no-repeat;
	margin-bottom: 50px;
}
.ft_list:last-child {
	margin-bottom: 0px;
}
.ft_list h3 {
	font-size: 32px;
	margin-bottom: 10px;
	font-weight: 700;
	line-height: 1.2em;
}
.ft_image {
	margin-top: 20px;
}
.ft_image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 園での生活　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*タブ切り替え全体のスタイル*/
.tabs {
	margin-top: 50px;
	width: 100%;
	margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
	width: 50%;
	height: 50px;
	background-color: #d9d9d9;
	line-height: 50px;
	font-size: 20px;
	text-align: center;
	color: rgba(255,255,255,0.80);
	display: block;
	float: left;
	transition: all 0.2s ease;
	cursor: pointer;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding-top: 20px;
	padding-bottom: 0;
	clear: both;
	overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#zero:checked ~ #zero_content,
#first:checked ~ #first_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
    color: #fff;
	cursor: default;
}
.tabs input:checked + .tab_item:hover {
    opacity: 1.0;
}

/* -- タブ色設定、角丸 ----------------------------------------------- */
#tab_zero.tab_item {
	background-color: #24a6e6;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-right: 1px solid #FFFFFF;
}
#tab_first.tab_item {
	background-color: #f1b000;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-left: 1px solid #FFFFFF;
}
#zero_content {
	border-top: 10px solid #24a6e6;
}
#first_content {
	border-top: 10px solid #f1b000;
}

/* -- スケジュール ----------------------------------------------- */
.schedule_wrap {
	padding-left: 10px;
	padding-right: 10px;
}
.sched_list {
	display: flex;
}

/* 時間・マル・行動 */
.time {
	width: 15%;
	font-family: "Roboto", sans-serif;
	font-size: 24px;
	padding-top: 10px;
}
.maru {
	width: 20%;
	text-align: center;
	background-image: url(../images/life_sched_border_01.jpg);
	background-position: center top;
	padding-top: 10px;
	background-repeat: no-repeat;
}
.koudou {
	width: 60%;
	padding-left: 10px;
	border-bottom: 1px dotted #4a5d4d;
	padding-bottom: 10px;
	padding-top: 10px;
}

/* 個別設定 */
.sched_list:first-child .time,
.sched_list:first-child .maru,
.sched_list:first-child .koudou {
	padding-top: 0px;	
}
.sched_list:first-child .maru {
	background-position: center 10px;
}
.sched_list:last-child .maru {
	background-position: center -180px;
}
#zero_content .maru {
	color: #24a6e6;	
}
#first_content .maru {
	color: #f1b000;
	background-image: url(../images/life_sched_border_02.jpg);
}

/* -- スライド ----------------------------------------------- */
#scroller {
	margin-top: 40px;
	margin-bottom: 40px;
	display: block;

}
#scroller li img {
	width: 280px;
	height: auto;
}

/* -- 季節の行事 ----------------------------------------------- */
#season {
	margin-bottom: 60px;
	display: flex;
	flex-wrap: wrap;
}
.season_list {
	width: 50%;
}
.season_list:nth-child(1) {
	padding-bottom: 30px;
	border-right: 1px solid #4a5d4d;
	padding-top: 10px;
}
.season_list:nth-child(2) {
	padding-bottom: 30px;
	padding-top: 10px;
}
.season_list:nth-child(3) {
	padding-top: 30px;
	border-right: 1px solid #4a5d4d;
	border-top: 1px solid #4a5d4d;
	padding-bottom: 10px;
}
.season_list:nth-child(4) {
	padding-top: 30px;
	border-top: 1px solid #4a5d4d;
	padding-bottom: 10px;
}
.season_jp {
	margin-bottom: 20px;
	text-align: center;
}
.season_jp img {
	width: auto;
	height: 164px;
}
.season_list ul {
	margin-left: 60px;
}

/* -- その他の行事 ----------------------------------------------- */
#other_event h3 {
	font-size: 18px;
	color: #FFFFFF;
	height: 50px;
	line-height: 50px;
	background-color: #4a5d4d;
	font-weight: 600;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding-left: 20px;
}
#other_event th {
	width: 50%;
	padding-bottom: 10px;
	padding-top: 10px;
	border-bottom: 1px solid #4A5D4D;
	padding-left: 20px;
	text-align: left;
	border-right: 1px solid #4A5D4D;
	background-color: #FFFDED;
	font-weight: 700;
}
#other_event td {
	width: 50%;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	border-bottom: 1px solid #4A5D4D;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 当園について　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#area_about th {
	width: 100%;
	display: block;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 15px;
	background-color: #e6f4e8;
	text-align: left;
	font-weight: 700;
}
#area_about td {
	width: 100%;
	display: block;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-left: 15px;
	line-height: 1.6em;
}
#about_pic {
}
#about_pic li {
	margin-bottom: 10px;
}
#about_pic li img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}
























/* ↓↓↓↓↓↓↓↓↓↓ ---以下スマホ--- ↓↓↓↓↓↓↓↓↓↓ */


@media screen and (max-width: 768px) {

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* KV　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#kv {
	height: calc(100vh - 60px);	
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 共通　h2ボックス　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.h2_box {
	margin-bottom: 40px;
}
.h2_mark img {
	height: 90px;
}
.h2_box h2 {
	font-size: 30px;
	line-height: 1.2em;
	height: 60px;
	border-radius: 30px;
	letter-spacing: 2px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 保育理念　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#area_rinen {
	padding-bottom: 40px;
}
#area_rinen h3 {
	font-size: 24px;
	line-height: 1.4em;
}
	
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 当園の特徴　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#area_tokucho {
}
.ft_list {
	padding-top: 20px;
	margin-left: -10px;
	padding-left: 10px;
	background-size: 80px auto;
	margin-bottom: 40px;
}
.ft_list h3 {
	font-size: 26px;
	line-height: 1.2em;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 園での生活　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 時間・マル・行動 */
.time {
	font-size: 20px;
}
	
/* -- 季節の行事 ----------------------------------------------- */
#season {
	margin-bottom: 30px;
}
.season_list:nth-child(1) {
	padding-bottom: 20px;
}
.season_list:nth-child(2) {
	padding-bottom: 20px;
}
.season_list:nth-child(3) {
	padding-top: 20px;
}
.season_list:nth-child(4) {
	padding-top: 20px;
}
.season_jp {
	margin-bottom: 12px;
}
.season_jp img {
	width: auto;
	height: 110px;
}
.season_list ul {
	margin-left: 40px;
}
	
/* -- その他の行事 ----------------------------------------------- */
#other_event h3 {
	font-size: 16px;
	padding-left: 10px;
}
#other_event th {
	width: 50%;
	padding-bottom: 7px;
	padding-top: 7px;
	padding-left: 10px;
}
#other_event td {
	width: 50%;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 10px;
}
	
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 当園について　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#area_about th {
	padding-left: 10px;
}
#area_about td {
	padding-left: 10px;
	line-height: 1.6em;
}

}