@charset "utf-8";
  
/*---------------------------------------
  タイトル部分
---------------------------------------*/
.title_img{
	background:url(../img/main_img_5.jpg) center;
	background-size:cover;
	padding:7rem 5%;
	/* じわっと画像が表示される */
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}

.title_img h2{
	color:#fff;
	text-align:left;
	padding:0;
	margin:0;
}
.title_img h2:before{
	content:none;
}

@media screen and (max-width: 600px) {
.title_img{
	padding:5rem 5%;
}
}

/*---------------------------------------
  アンカーナビ
---------------------------------------*/

.anc_btn{
	overflow:hidden;
}
.anc_btn a{
	display:block;
	width:30%;
	float:left;
	color:#3f9543;
	background:#fff;
	border:1px solid #3f9543;
	border-radius:5px;
	margin-left:1.5%;
	padding:10px 1%;
	text-align:center;
	position: relative;
}
.anc_btn a:first-child{
	margin-left:0;
}
.anc_btn a::before { /* くの字の表示設定 */
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px; 
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #3f9543;
  border-right: 2px solid #3f9543;
  transform: rotate(45deg);
}
@media screen and (max-width: 730px) {
.anc_btn a{
	width:29.5%;
	padding:10px 1% 30px 1%;
}
	
.anc_btn a::before { /* くの字の表示設定 */
  top: 20px;
  right: 45%; 
}
}

#education,
#sightseeing,
#event{
	margin-top:-60px;
	padding-top:60px;
}


/*---------------------------------------
  季節のタイトル
---------------------------------------*/
.title{
	text-align:center;
	font-size:250%;
	padding-bottom:1.5rem;
}

.spring{color:#f29c97;}
.summer{color:#38b25d;}
.autumn{color:#905031;}
.winter{color:#6699cc;}
.spring::after{
	content:url(../charm/img/spring_r.png);
}
.spring::before{
	content:url(../charm/img/spring_l.png);
}
.summer::after{
	content:url(../charm/img/summer_r.png);
}
.summer::before{
	content:url(../charm/img/summer_l.png);
}
.autumn::after{
	content:url(../charm/img/autumn_r.png);
}
.autumn::before{
	content:url(../charm/img/autumn_l.png);
}
.winter::after{
	content:url(../charm/img/winter_l.png);
}
.winter::before{
	content:url(../charm/img/winter_r.png);
}
@media screen and (max-width: 600px) {
.title{
	font-size:200%;
}
.spring::after{
	content:url(../charm/img/spring_r_sp.png);
}
.spring::before{
	content:url(../charm/img/spring_l_sp.png);
}
.summer::after{
	content:url(../charm/img/summer_r_sp.png);
}
.summer::before{
	content:url(../charm/img/summer_l_sp.png);
}
.autumn::after{
	content:url(../charm/img/autumn_r_sp.png);
}
.autumn::before{
	content:url(../charm/img/autumn_l_sp.png);
}
.winter::after{
	content:url(../charm/img/winter_l_sp.png);
}
.winter::before{
	content:url(../charm/img/winter_r_sp.png);
}

}



/*---------------------------------------
  くらみの魅力
---------------------------------------*/
.charm{

}

.charm section section{
	background:#fff;
	border-radius:5px;
	padding:5%;
	overflow:hidden;
	margin-bottom:3rem;
}
.charm section section .txt{
	width:30%;
	float:right;
}
.charm section section .txt_long p,
.charm section section .txt p{
	padding-top:0.5rem;
}
.charm section section .txt p a{
	color: #3f9543;
	font-size:90%;
	display:block;
}
.photo1{
	width:65%;
	float:left;
    height:380px;
    overflow: hidden;
    position:relative;
}
.photo1 img{
    position:absolute; 
    top:-10%;      
}

.photo2{
	width:32%;
	float:left;
}
.photo3{
	width:32%;
	margin-left:5px;
	float:left;
}
.photo2,
.photo3{
    height:300px;
    overflow: hidden;
    position:relative; 
}
.photo2 img,.photo3 img{
    position:absolute; 
    left:-25%;       
	width:150%;
	max-width:150%;
}

@media screen and (max-width: 900px) {
.photo1{
	width:100%;
	height:250px;
}
.photo2,
.photo3{
	width:49.5%;
	height:250px;
}
.photo3{
	margin-left:1%;
}
.charm section section .txt{
	width:100%;
	float:left;
	padding-top:1rem;
}	
}

@media screen and (max-width: 600px) {
.photo1{
	height:200px;
}
.photo2 img,.photo3 img{
    top:-10%;      
}
.photo2,
.photo3{
	height:200px;
}	
}

@media screen and (max-width: 480px) {
.photo1{
	height:150px;
}
.photo2,
.photo3{
	height:150px;
}	
.charm section section{
	margin-bottom:1.5rem;
}
}
@media screen and (max-width: 350px) {
.photo1{
	height:120px;
}
.photo2,
.photo3{
	height:120px;
}	
}