@charset "UTF-8";
/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/

@import url("inview.css");
@import url("slide.css");
/* CSS Document */
.top_news{
	width: 70%;
	margin: -40px auto 40px;
	padding: 30px 40px;
	background-color: #fff;
	border:3px solid #9ddb3a;
	border-radius: 15px;
	z-index: 2;
	
}
.top_news dl{
	width: 100%;
	padding: 0 0 5px;
	border-bottom: 1px dotted #ccc;
	display: flex;
	flex-direction: row;
}
.top_news dt{
	width: 8em;
	color: #26469a;
}
.top_news dd{
	color: #242424;
}
.top_news_ttl{
	width: 40%;
	margin: 10px auto 20px;
	
}
.top_news_ttl img{
	width: 100%;
}
.top_news_btn{
	width: 15em;
	font-size: 1.1em;
	color: #fff;
	text-align: center;
	padding: 7px 15px 5px;
	background-color: rgba(255,160,42,1.00);
	border-radius: 30px;
	margin: 20px auto 0;
}
.top_news_btn a{
	color: #fff;
	text-decoration: none;
}
.top_news_btn a:hover{
	color: rgba(221,96,4,1.00);
  transition:1s all;
}
.new_icon{
	width: 55px;
	margin-left: 20px;
}
@media screen and (max-width: 900px){
.top_news{
	width: 80%;
	margin: -20px auto 40px;
	padding: 30px 40px;
	background-color: #fff;
	border:3px solid #9ddb3a;
	border-radius: 15px;
	z-index: 2;
}
.top_news_ttl{
	width: 50%;
	margin: 10px auto 20px;
	
}

.top_news_btn{
	width: 16em;
	font-size: 1.1em;
	color: #fff;
	text-align: center;
	padding: 4px 5px 2px;
	background-color: rgba(255,160,42,1.00);
	border-radius: 30px;
	margin: 20px auto 0;
}
.new_icon{
	width: 45px;
	margin-left: 20px;
}
.new_icon img{
		width: 45px;
	}
}
@media screen and (max-width: 480px){
.top_news{
	width: 100%;
	margin: -20px auto 40px;
	padding: 20px;
	background-color: #fff;
	border:3px solid #9ddb3a;
	border-radius: 15px;
	z-index: 2;
	
}
.top_news_ttl{
	width: 70%;
	margin: 0 auto 20px;
	
}
.top_news dl{
	width: 100%;
	padding: 0 0 5px;
	border-bottom: 1px dotted #ccc;
	display: flex;
	flex-direction: column;
}
.top_news dt{
	width: 100%;
	color: #26469a;
}
.top_news dd{
	width: 100%;
	color: #242424;
}


.top_news_btn{
	width: 16em;
	font-size: 1.1em;
	color: #fff;
	text-align: center;
	padding: 4px 5px 2px;
	background-color: rgba(255,160,42,1.00);
	border-radius: 30px;
	margin: 20px auto 0;
}
.new_icon{
	width: 45px;
	margin-left: 20px;
}
.new_icon img{
		width: 45px;
	}
}


/*--------------INSTA---------------*/
.insta_area{
	width: 70%;
	margin: 50px auto 40px;
	padding: 30px 40px;
	background-color: #fff;
	border:3px solid #ff9c00;
	border-radius: 15px;
	
}
.insta_ttl{
	width: 70%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #fff;
	margin: 0 auto 10px;

}
.insta_ttl img{
	width: 49%;
}
.if_area{
	width: 100%;
	height: auto;

}
@media screen and (max-width: 900px){
.insta_area{
	width: 80%;
	margin: 50px auto 40px;
	padding: 30px 40px;
	background-color: #fff;
	border:3px solid #ff9c00;
	border-radius: 15px;
	
}
.insta_ttl{
	width: 80%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #fff;
	margin: 0 auto 10px;

}
.insta_ttl img{
	width: 49%;
}
}
@media screen and (max-width: 480px){
.insta_area{
	width: 90%;
	margin: 30px auto 40px;
	padding: 20px;
	background-color: #fff;
	border:3px solid #ff9c00;
	border-radius: 15px;

	
}
.insta_ttl{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #fff;
	margin: 0 auto 10px;

}
.insta_ttl img{
	width: 49%;
}
}
/*-------------bnr_area-----------------*/


.bnr_area{
	width: 90%;
	margin: 10px auto 30px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: stretch;
}

.bnr_area_item1{
	width: 33%;
	display: flex;
	flex-direction: column;
	padding-top: 20px;
	position: relative;
}

.bnr_area_item2{
	width: 33%;
	display: flex;
	flex-direction: column;
	position: relative;
}
.bnr_area_item3{
	width: 33%;
	display: flex;
	flex-direction: column;
	padding-top: 30px;
	position: relative;
}
.bnr_area_main{
	width: 100%;
}
.bnr_area_main :hover{
	opacity: 0.9;
}
.bnr_area_p1{
	width: 50%;
	margin: 10px 45% 0 5%;
}
.bnr_area_p2{
	width: 38%;
	margin: 0 477% 30px 10%;
}
.bnr_area_p3{
	width: 55%;
	margin: 10px 10% 0 25%;
}
@media screen and (max-width: 480px){
.bnr_area{
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: stretch;
}

.bnr_area_item1{
	width: 100%;
	display: flex;
	flex-direction: column;
	padding-top: 0;
	position: relative;
}
.bnr_area_item2{
	width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	margin-top: -150px;
}
.bnr_area_item3{
	width: 100%;
	display: flex;
	flex-direction: column;
	padding-top: 50px;
	position: relative;
}
.bnr_area_main{
	width: 100%;
}

.bnr_area_p1{
	width: 35%;
	margin: 10px 0 0 -10px;
}
.bnr_area_p2{
	width: 30%;
	margin: -40px 0 0 70%;
}
.bnr_area_p3{
	width: 40%;
	margin: -35px 0 0 -10px;
}
}
/*アニメーション*/
.animation{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.8s;
}
.animation2{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2.1s;
}
.animation3{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
/*上下にふわふわ*/
.keyframe1{
    animation-name: anim_v;
}

@keyframes anim_v {
    0% {
        transform: translate(0, 0px);
    }
    100% {
        transform: translate(5px, -12px);
    }
}

/*左右にふわふわ*/
.keyframe2{
    animation-name: anim_h;
}

@keyframes anim_h {
    0% {
        transform: translate(0px, 0);
    }
    100% {
        transform: translate(-10px, 10px);
    }
}



/*左右にゆらゆら*/
.keyframe3{
    animation-name: anim_s;
    transform: rotate(10deg);
    animation-duration: 5s;
}

@keyframes anim_s {
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(10deg);
    }
}
/*左右に少しゆらゆら*/
.keyframe4{
    animation-name: anim_s;
    transform: rotate(5deg);
    animation-duration: 8s;
}

@keyframes anim_s {
    50% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(5deg);
    }
}