﻿@charset "UTF-8";

body#index {
	background-color: #f0f5da;
}

/*top visual slide */

section.content {
	margin: 7px 0 0 0;
	position: relative;
	z-index: 3;
}

section.top_block {
	position: relative;
	margin: 157px 0 0 0;
	padding: 0 0 0 0;
	min-width: 960px;
	max-width: 100%;
	height: 160px;
	background-image: url("../images/top/bg_01.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	z-index: 4;
}

div.contact {
	position: absolute;
	right: 60px;
	top: 530px;
	width: 190px;
	z-index: 4;
	transition-property: all;
	transition-duration: 1s;
}

div.top_visual {
	width: 100%;
	margin: -163px auto 0;
	position: relative;
	z-index: 12;
	max-height: 840px;
}

/* トップビジュアルの位置 */
div.top_visual ul {
	width: 100%;
}

div.top_visual ul li {}

div.top_visual ul.bxslider li {
	overflow: hidden;
	animation: sdb 8s linear forwards;
}

.bxslider {}

.bx-viewport,
.bx-wrapper li {
	min-height: 290px !important;
	max-height: 840px !important;
}

section.content section.foot_block {
	position: absolute;
	bottom: 0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 100%;
	height: 350px;
	background-image: url("../images/top/bg_02.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	z-index: 12;
}

section.content section.content_block {
	width: 960px;
	/* max-width:1300px; position: relative;*/
	margin: 0 auto 0 auto;
}

section.news_block {
	position: absolute;
	left: 10%;
	bottom: 350px;
	z-index: 13;
	width: 540px;
	transition-property: left;
	transition-duration: 1s;
}

section.news_block div.cloud_bg {
	position: absolute;
	bottom: -170px;
	width: 100%;
	height: 405px;
	background-image: url("../images/top/cloud_bg.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	z-index: 12;
}

section.news_block div.news_box {
	position: absolute;
	bottom: -25px;
	left: 250px;
	z-index: 12;
}

section.news_block div.news_box dl {
	border-bottom: 1px dashed #222222;
	margin: 10px 0 0 0;
	padding: 0 0 .5em 0;
}

section.news_block div.news_box dl dt {
	line-height: 1.6;
}

section.news_block div.news_box dl dt a {
	color: #22ac38;
}

section.news_block div.news_box dl dd {
	font-feature-settings: "palt";
	font-size: 87%;
}

section.news_block h3 {
	width: 140px;
	position: relative;
	left: 31%;
	top: -150px;
	z-index: 15;
}

section.read_block {
	position: relative;
	left: 610px;
	bottom: 155px;
	width: 400px;
	z-index: 15;
	padding: 0 0 0 30px;
}

section.content_2 div.chara_01 {
	width: 80px;
	position: absolute;
	left: 16%;
	bottom: 140px;
	z-index: 15;
	transition-property: left;
	transition-duration: 1s;
}

/* キリン位置 */
section.content_2 div.chara_02 {
	width: 80px;
	position: absolute;
	right: 4%;
	bottom: -70px;
	z-index: 15;
	transition-property: left;
	transition-duration: 1s;
}

/* ウサギ位置 */


section.content_2 {
	position: relative;
	z-index: 10;
}

section.content_2 div.line {
	margin: -80px 0 0 0;
	position: relative;
	z-index: 10;
	top: -25px;
}

section.content_3 {
	position: relative;
	z-index: 3;
	top: -8px;
	margin: -30px 0 0 0;
}

section.content_3 section.head_block {
	position: relative;
	width: 100%;
	height: 500px;
	margin: 0 auto 0 auto;
	padding: 60px 0 0 0;
	background-image: url("../images/top/bg_03.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: bottom;
	z-index: 12;
}

section.content_3 section.head_block div.button_block {
	width: 960px;
	margin: 0 auto 0 auto;
	display: flex;
}

section.content_3 section.head_block div.button_01 {
	position: relative;
	width: 30%;
	margin: 0 5% 0 0;
}

section.content_3 section.head_block div.button_02 {
	position: relative;
	width: 30%;
	margin: 0 5% 0 0;
}

section.content_3 section.head_block div.button_03 {
	position: relative;
	width: 30%;
}

section.content_3 section.head_block div.button_01 div.visual img {
	transition: 0.3s ease-in-out;
}

section.content_3 section.head_block div.button_01 div.visual img:hover {
	transform: rotate(10deg);
	transition: 0.3s ease-in-out;
}

section.content_3 section.head_block div.button_02 div.visual img {
	transition: 0.3s ease-in-out;
	position: relative;
}

section.content_3 section.head_block div.button_02 div.visual img:hover {
	transform: translate(0, -10px);
	transition: 0.3s ease-in-out;
}

section.content_3 section.head_block div.button_03 div.visual img {
	transition: 0.3s ease-in-out;
}

section.content_3 section.head_block div.button_03 div.visual img:hover {
	transform: rotate(10deg);
	transition: 0.3s ease-in-out;
}

section.content_3 section.head_block div.button_block h4 {
	width: 50%;
	margin: 25px auto 0 auto;
	padding: 0 10% 0 0;
	position: relative;
	z-index: 1;
}

section.content_3 section.head_block div.button_block div.txt {
	width: 60%;
	margin: 10px auto 0 auto;
	line-height: 1.6;
}


section.content_3 section.head_block div.button_01 div.img_01 {
	position: absolute;
	left: -47px;
	top: 172px;
	width: 80px;
}

section.content_3 section.head_block div.button_02 div.img_01 {
	position: absolute;
	left: 7px;
	top: 43px;
	width: 275px;
}

section.content_3 section.head_block div.button_02 div.img_02 {
	position: absolute;
	left: 267px;
	top: 5px;
	width: 40px;
}

section.content_3 section.head_block div.button_02 div.img_03 {
	position: absolute;
	left: -30px;
	top: -10px;
	width: 35px;
}

section.content_3 section.head_block div.button_03 div.img_01 {
	position: absolute;
	right: -43px;
	top: 190px;
	width: 135px;
}

section.content_4 {
	min-width: 960px;
	width: 960px;
	height: 273px;
	margin: -10px auto 0 auto;
	position: relative;
}

section.content_4 div.chara_03 {
	width: 100px;
	position: absolute;
	left: 100px;
	top: 40px;
	z-index: 15;
	transition-property: left;
	transition-duration: 1s;
}

/* リス位置 */
section.content_4 div.chara_04 {
	width: 165px;
	position: absolute;
	left: 80px;
	top: 150px;
	z-index: 15;
	transition-property: left;
	transition-duration: 1s;
}

/* クマ位置 */

section.sns_block {
	position: absolute;
	right: 350px;
	top: 0;
	z-index: 12;
}

section.sns_block div.fb_block {
	width: 300px;
}

section.sns_block div.tw_block {
	width: 300px;
	margin: 15px 0 0 0;
}

section.contact_block {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 12;
}

section.contact_block div.mail_contact {
	width: 300px;
}

section.contact_block div.tel_contact {
	width: 300px;
	margin: 15px 0 0 0;
}


.new_icon {
	color: #FF0000;
}







@keyframes sdb {
	100% {
		-webkit-transform: scale(1.2, 1.2);
		-moz-transform: scale(1.1, 1.1);
		-ms-transform: scale(1.1, 1.1);
		transform: scale(1.1, 1.1);
	}
}

@media (max-width: 1600px) {

	section.top_block {
		height: 136px;
	}

	/* トップビジュアルの背景 */
	div.top_visual {
		margin: -140px auto 0;
	}

	/* トップビジュアルの位置 */

	section.content section.foot_block {
		height: 390px;
	}

	section.news_block {
		left: 10%;
	}

	section.content_2 div.chara_01 {
		left: 19%;
	}

	/* キリン位置 */



}

@media (max-width: 1400px) {

	section.top_block {
		height: 120px;
	}

	/* トップビジュアルの背景 */
	div.top_visual {
		margin: -126px auto 0;
	}

	/* トップビジュアルの位置 */

	section.content section.foot_block {
		height: 370px;
	}

	section.news_block {
		left: 8%;
	}

	section.content_2 div.chara_01 {
		left: 20%;
	}

	/* キリン位置 */

}

@media (max-width: 1300px) {

	section.news_block {
		left: 5%;
	}

	section.content_2 div.chara_01 {
		left: 18%;
	}

	/* キリン位置 */

}

@media (max-width: 1180px) {

	div.contact {
		right: 60px;
		top: 510px;
	}

	section.news_block {
		left: 2%;
	}

	section.content section.foot_block {
		height: 360px;
	}

	section.content_2 div.chara_01 {
		left: 16%;
	}

	/* キリン位置 */
	section.content_4 div.chara_03 {
		left: 10%;
	}

	/* リス位置 */
	section.content_4 div.chara_04 {
		left: 8%;
	}

	/* クマ位置 */
}


@media (max-width: 1100px) {

	div.contact {
		right: 60px;
		top: 510px;
	}

	section.news_block {
		left: 2%;
	}

	section.content section.foot_block {
		height: 360px;
	}

	section.content_2 div.chara_01 {
		left: 180px;
	}

	/* キリン位置 */
	section.content_3 {
		margin: -70px 0 0 0;
	}

	section.content_4 div.chara_03 {
		left: 10%;
	}

	/* リス位置 */
	section.content_4 div.chara_04 {
		left: 8%;
	}

	/* クマ位置 */
}


/*ipad*/
@media (max-width: 768px) {

	div.contact {
		width: 130px;
		right: 20px;
		top: 400px;
	}

	section.top_block {
		min-width: 100%;
		height: 120px;
		margin: 142px 0 0 0;
	}

	/* トップビジュアルの背景 */
	section.news_block {
		width: 95%;
		position: relative;
		top: 230px;
	}

	section.news_block div.cloud_bg {
		top: 0;
		width: 70%;
		height: 450px;
		margin: 0 auto 0 auto;
		left: 0;
		right: 0;
	}

	section.news_block div.news_box dl {
		padding: 0 0 .2em 0;
	}

	section.news_block h3 {
		width: 152px;
		position: relative;
		left: 36%;
		top: 55px;
		z-index: 15;
	}

	section.read_block {
		left: 0;
		top: -40px;
		width: 60%;
		margin: 20px auto 0 auto;
		padding: 0 0 0 0;
	}

	section.news_block div.news_box {
		position: absolute;
		top: 100px;
		right: 230px;
		z-index: 12;
		font-size: 14px;
	}

	section.content section.content_block {
		width: 100%;
		margin: 0 auto 0 auto;
	}

	section.content section.foot_block {
		width: 100%;
		background-size: contain;
	}

	section.content_2 div.chara_01 {
		width: 50px;
		left: 6%;
		top: 140px;
	}

	/* キリン位置 */
	section.content_2 div.chara_02 {
		width: 50px;
		right: 4%;
		top: 230px;
	}

	/* ウサギ位置 */

	section.content_2 div.line {
		margin: 0 0 0 0;
		top: 325px;
	}

	section.content_3 {
		position: relative;
		z-index: 3;
		top: 250px;
	}

	section.content_3 section.head_block {
		height: auto;
		margin: 0 auto 0 auto;
		padding: 30px 0 0 0;
		top: 70px;
		background-position: top;
	}

	section.content_3 section.head_block div.button_block {
		width: 90%;
		margin: 0 auto 0 auto;
		display: flex;
	}

	section.content_3 section.head_block div.button_01 {
		width: 30%;
		margin: 0 auto 0 auto;
	}

	section.content_3 section.head_block div.button_02 {
		width: 30%;
		margin: 0 auto 0 auto;
	}

	section.content_3 section.head_block div.button_03 {
		width: 30%;
		margin: 0 auto 0 auto;
	}


	section.content_3 section.head_block div.button_block h4 {
		width: 60%;
		margin: 15px auto 0 auto;
		padding: 0 10% 0 0;
	}

	section.content_3 section.head_block div.button_block div.txt {
		width: 90%;
		margin: 10px auto 0 auto;
		line-height: 1.8;
		font-size: 14px;
	}

	section.content_3 section.head_block div.button_01 div.img_01 {
		left: -50px;
		top: 65px;
		width: 90px;
	}

	section.content_3 section.head_block div.button_02 div.img_01 {
		position: absolute;
		left: 10px;
		top: 13px;
		width: 100%;
	}

	section.content_3 section.head_block div.button_02 div.img_02 {
		left: 267px;
		top: 5px;
		width: 40px;
	}

	section.content_3 section.head_block div.button_02 div.img_03 {
		left: -20px;
		top: -10px;
		width: 25px;
	}

	section.content_3 section.head_block div.button_03 div.img_01 {
		right: -30px;
		top: 120px;
		width: 105px;
	}

	section.content_4 {
		min-width: 100%;
		width: 100%;
		height: auto;
		margin: 130px auto 0 auto;
		position: relative;
	}

	section.content_4 div.chara_03 {
		width: 70px;
		left: 15%;
		top: -50px;
	}

	/* リス位置 */
	section.content_4 div.chara_04 {
		width: 90px;
		left: 57%;
		top: -80px;
	}

	/* クマ位置 */

	section.sns_block {
		position: inherit;
		width: 90%;
		left: 0;
		margin: 40px auto 0 auto;
	}

	section.sns_block div.fb_block {
		width: 100%;
	}

	section.sns_block div.tw_block {
		width: 100%;
		margin: 15px 0 0 0;
	}

	section.contact_block {
		position: inherit;
		width: 90%;
		left: 0;
		margin: 15px auto 0 auto;
	}

	section.contact_block div.mail_contact {
		width: 100%;
	}

	section.contact_block div.tel_contact {
		width: 100%;
		margin: 15px 0 0 0;
	}


}


/*iPhone7/6 Plus*/
@media (max-width: 414px) {

	div.contact {
		width: 130px;
		right: 10px;
		top: 250px;
	}

	section.top_block {
		min-width: 100%;
		height: 123px;
		margin: 73px 0 0 0;
	}

	/* トップビジュアルの背景 */

	section.news_block {
		width: 95%;
		position: relative;
		top: 140px;
	}

	section.news_block div.cloud_bg {
		top: 0;
		width: 100%;
		height: 242px;
	}

	section.news_block div.news_box dl {
		padding: 0 0 .2em 0;
	}

	section.news_block h3 {
		width: 112px;
		position: relative;
		left: 31%;
		top: 25px;
		z-index: 15;
	}

	section.read_block {
		left: 0;
		top: 0;
		width: 80%;
		margin: -30px auto 0 auto;
		padding: 0 0 0 0;
	}

	section.news_block div.news_box {
		position: absolute;
		top: 60px;
		right: 55px;
		left: 80px;
		z-index: 12;
		font-size: 14px;
	}

	section.content section.content_block {
		width: 100%;
		margin: 0 auto 0 auto;
	}

	section.content section.foot_block {
		width: 100%;
		height: 114px;
		top: 217px;
		background-size: contain;
	}

	section.content_2 div.chara_01 {
		width: 50px;
		left: 6%;
		top: 90px;
	}

	/* キリン位置 */
	section.content_2 div.chara_02 {
		width: 50px;
		right: 4%;
		top: 260px;
	}

	/* ウサギ位置 */

	section.content_2 div.line {
		margin: 0 0 0 0;
		top: 255px;
	}

	section.content_3 {
		position: relative;
		z-index: 3;
		top: 250px;
	}

	section.content_3 section.head_block {
		height: auto;
		margin: 0 auto 0 auto;
		padding: 20px 0 0 0;
		top: 70px;
		background-position: top;
	}

	section.content_3 section.head_block div.button_block {
		width: 90%;
		margin: 0 auto 0 auto;
		display: block;
	}

	section.content_3 section.head_block div.button_01 {
		width: 80%;
		margin: 0 auto 0 auto;
	}

	section.content_3 section.head_block div.button_02 {
		width: 80%;
		margin: 70px auto 0 auto;
	}

	section.content_3 section.head_block div.button_03 {
		width: 80%;
		margin: 70px auto 0 auto;
	}


	section.content_3 section.head_block div.button_block h4 {
		width: 50%;
		margin: 15px auto 0 auto;
		padding: 0 10% 0 0;
	}

	section.content_3 section.head_block div.button_block div.txt {
		width: 90%;
		margin: 10px auto 0 auto;
		line-height: 1.8;
		font-size: 14px;
	}

	section.content_3 section.head_block div.button_01 div.img_01 {
		left: -50px;
		top: 125px;
		width: 120px;
	}

	section.content_3 section.head_block div.button_02 div.img_01 {
		position: absolute;
		left: 10px;
		top: 13px;
		width: 100%;
	}

	section.content_3 section.head_block div.button_02 div.img_02 {
		left: 267px;
		top: 5px;
		width: 40px;
	}

	section.content_3 section.head_block div.button_02 div.img_03 {
		left: -20px;
		top: -10px;
		width: 25px;
	}

	section.content_3 section.head_block div.button_03 div.img_01 {
		right: -20px;
		top: 230px;
		width: 115px;
	}

	section.content_4 {
		min-width: 100%;
		width: 100%;
		height: auto;
		margin: 130px auto 0 auto;
		position: relative;
	}

	section.content_4 div.chara_03 {
		width: 60px;
		position: absolute;
		left: 10px;
		top: -50px;
	}

	/* リス位置 */
	section.content_4 div.chara_04 {
		width: 60px;
		position: absolute;
		right: 10px;
		bottom: 15px;
		left: auto;
		top: -80px;
	}

	/* クマ位置 */

	section.sns_block {
		position: inherit;
		width: 90%;
		left: 0;
		margin: 40px auto 0 auto;
	}

	section.sns_block div.fb_block {
		width: 100%;
	}

	section.sns_block div.tw_block {
		width: 100%;
		margin: 15px 0 0 0;
	}

	section.contact_block {
		position: inherit;
		width: 90%;
		left: 0;
		margin: 15px auto 0 auto;
	}

	section.contact_block div.mail_contact {
		width: 100%;
	}

	section.contact_block div.tel_contact {
		width: 100%;
		margin: 15px 0 0 0;
	}


}

/*iPhone 7/6*/
@media (max-width: 375px) {

	div.contact {
		top: 220px;
	}

	section.content section.foot_block {
		top: 196px;
	}

	section.news_block {
		width: 95%;
		position: relative;
		top: 130px;
	}

	section.news_block h3 {
		width: 105px;
	}

	section.read_block {
		margin: -40px auto 0 auto;
	}

	section.news_block div.news_box {
		right: 25px;
		left: 70px;
	}

	section.content_2 div.chara_01 {
		left: 3%;
	}

	/* キリン位置 */

	section.content_3 section.head_block div.button_01 div.img_01 {
		top: 125px;
		width: 100px;
	}

	section.content_3 section.head_block div.button_03 div.img_01 {
		right: -30px;
		top: 190px;
		width: 115px;
	}


	section.content_4 div.chara_03 {
		width: 60px;
		position: absolute;
		left: 10px;
		top: -50px;
	}

	/* リス位置 */
	section.content_4 div.chara_04 {
		width: 60px;
		position: absolute;
		right: 10px;
		bottom: 10px;
		left: auto;
		top: -80px;
	}

	/* クマ位置 */

}

/*iPhone 5/SE/4*/
@media (max-width: 320px) {

	div.contact {
		width: 130px;
		right: 10px;
		top: 190px;
	}

	section.content section.foot_block {
		top: 167px;
	}

	section.top_block {
		min-width: 100%;
		height: 119px;
		margin: 79px 0 0 0;
		background-size: contain;
	}

	/* トップビジュアルの背景 */

	section.content section.content_block {
		width: 100%;
		margin: -50px auto 0 auto;
	}

	section.news_block {
		top: 120px;
	}

	section.news_block div.cloud_bg {
		position: absolute;
		bottom: -170px;
		width: 100%;
		height: 235px;
		background-image: url("../images/top/cloud_bg_02.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
		z-index: 12;
	}

	section.news_block h3 {
		width: 110px;
		left: 28%;
		top: 19px;
	}

	section.news_block div.news_box {
		top: 63px;
		right: 27px;
	}


	section.content_2 div.chara_01 {
		width: 35px;
		top: 110px;
		left: 1%;
	}

	/* キリン位置 */

	section.content_2 div.line {
		top: 275px;
	}

	section.content_3 {
		position: relative;
		z-index: 3;
		top: 250px;
		margin: -50px 0 0 0;
	}

	section.content_3 section.head_block div.button_01 div.img_01 {
		top: 125px;
		width: 90px;
	}

	section.content_3 section.head_block div.button_01 {
		width: 80%;
		margin: 0 auto 0 auto;
	}

	section.content_3 section.head_block div.button_02 {
		width: 80%;
		margin: 60px auto 0 auto;
	}

	section.content_3 section.head_block div.button_03 {
		width: 80%;
		margin: 60px auto 0 auto;
	}

	section.content_3 section.head_block div.button_02 div.img_02 {
		left: 227px;
		top: 5px;
		width: 30px;
	}

	section.content_3 section.head_block div.button_03 div.img_01 {
		right: -30px;
		top: 160px;
		width: 115px;
	}

}