@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700&display=swap');






html, body{
	margin:0;
	padding:0;
	border:0;
	font-size: 18px;
	font-family: "Zen Maru Gothic", serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5em;
}





a:link {color: #FFFFFF;}
a:visited {color: #FFFFFF;}
a:hover {color: #D1CC49;}
a:active {color: #D1CC49;}




.highlight *{
	 transition: all .3s;
	 }
	 

.highlight a:hover *{
	 filter: alpha(opacity=50);
	 -moz-opacity: 0.5;
	 opacity: 0.5;
	 -webkit-transition: all .3s;
	 transition: all .3s;
	 }




/*　　背景固定
------------------------------------------------------------------------------------------------------------*/

body:before {
  content: "";
  display: block;
  background-image: url("../img/bg-image.jpg");
	background-repeat: repeat;
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: -1;
}


.block {
  display: block;
  background: #fff;
  height: 100%;
}

.block-gr {
	background-color: #2c3921;
	color: #FFFFFF;
	padding: 20px 5px;
	margin-top: 300px;
}

.block-bl {
	background-color: #233449;
	color: #FFFFFF;
	padding: 20px 5px;
	margin-top: 300px;
}

.block-ye {
	background-color: #493E23;
	color: #FFFFFF;
	padding: 20px 5px;
	margin-top: 300px;
}

.block-red {
	background-color: #492323;
	color: #FFFFFF;
	padding: 20px 5px;
	margin-top: 300px;
}








/*　　PCのみ表示、スマホのみ表示の切り替え
------------------------------------------------------------------------------------------------------------*/


.pc { display:inline!important; }
.sp { display:none!important; }

@media screen and (max-width: 768px) {
.pc { display:none!important; }
.sp { display:inline!important; }
	}





/*　　フォント
------------------------------------------------------------------------------------------------------------*/


.tx10 {font-size: 10px;}
.tx11 {font-size: 11px;}
.tx12 {font-size: 12px;}
.tx13 {font-size: 13px;}
.tx14 {font-size: 14px;}
.tx15 {font-size: 15px;}
.tx16 {font-size: 16px;}
.tx17 {font-size: 17px;}
.tx18 {font-size: 18px;}
.tx20 {font-size: 20px;}
.tx22 {font-size: 22px;}
.tx24 {font-size: 24px;}
.tx26 {font-size: 26px;}
.tx28 {font-size: 28px;}
.tx30 {font-size: 30px;}
.tx32 {font-size: 32px;}
.tx34 {font-size: 34px;}
.tx36 {font-size: 36px;}
.tx38 {font-size: 38px;}
.tx40 {font-size: 40px;}

.red {color: #C30;}
.blue {color: #336699;}
.green {color: #696;}
.orange {color: #F90;}
.pink {color:#FF6699;}
.brown {color: #624628;}
.gray {color: #999;}
.white {color: #FFF;}



.tx_s {font-size: 80%;}
.tx_l {font-size: 120%;}











/*　ページトップにスクロール
------------------------------------------------------------------------------------------------------------*/



#page_top{
  width: 100px;
  height: 60px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #000000;
  opacity: 0.6;
  border-radius: 7px;
}

#page_top a{
  position: relative;
  display: block;
  width: 100px;
  height: 60px;
  text-decoration: none;
}

#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}











/*　　トップスライド
------------------------------------------------------------------------------------------------------------*/


#slide{
	position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
    background-color: #999;
	vertical-align:bottom;
}


#slide .inner-content{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	z-index: 999;
}



#slide .inner-content img{
	max-width: 100%;
}



@media screen and (max-width: 768px){
	
#slide{
    min-height: 100vh;
}

#slide .inner-content{
	width: 75%;
}
	
#slide .inner-content img{
	width: 100%;
	height: auto;
}
}




.slide-wrap {
  overflow: hidden;
	position: relative;
	bottom: 0;
}

.slide-bottom {
  background: #1CB4D3;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  height: 200px;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
} 












/*　　コンテンツ幅
------------------------------------------------------------------------------------------------------------*/


.w1100 {
	max-width: 1100px;
	margin: 0 auto;
	text-align: justify;
	word-break: break-all;
}


.w1200 {
	max-width: 1200px;
	margin: 0 auto;
	text-align: justify;
	word-break: break-all;
}

@media screen and (max-width: 960px)
and (max-width: 480px){
	.w1100, .w1200 {
	width: 100%;
}
}


.img-width {width: 100%;}
.img-width img {max-width: 100%;}





/*　　テキストボックス
------------------------------------------------------------------------------------------------------------*/

.tx-box {
	width: 100%;
	padding: 10px;
	text-align: justify;
	word-break: break-all;
}








/*　　レスポンシブボックス（PC均等配置）
------------------------------------------------------------------------------------------------------------*/




/*---　　6列　　　---*/


.col_6{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_6 > div{
	width: 16.5%;
	padding: 10px;
}

.col_6 > div img{
	max-width: 100%;
}


.col_6 > div p{
	font-size: 14px;
	line-height: 1.5em;
}

.col_6 > div > div{
	position: relative;
	overflow: hidden
}


@media screen and (max-width: 960px) {
	.col_6 > div{
		width: 20%;
	}
}
@media screen and (max-width: 480px) {
	.col_6 > div{
		width: 33.333%;
	}
	
	.col_6 > div p{
	font-size: 12px;
	line-height: 1.5em;
}
}






/*---　　5列　　　---*/


.col_5{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_5 > div{
	width: 20%;
	padding: 10px;
}


.col_5 > div img{
	max-width: 100%;
}


.col_5 > div > div{
	position: relative;
	overflow: hidden
}

@media screen and (max-width: 960px) {
	.col_5 > div{
		width: 25%;
	}
}

@media screen and (max-width: 480px) {
	.col_5 > div{
		width: 50%;
	}
}








/*---　　4列　　　---*/


.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_4 > div{
	width: 25%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_4 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 50%;
		padding: 5px;
	}
}








/*---　　3列　　　---*/

.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
	width: 33.33333%;
	padding: 10px;
}

@media screen and (max-width: 960px) {
	.col_3 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 100%;
	}
}







/*---　　2列　　　---*/

.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	align-items: center;
}
.col_2 > div{
	width: 50%;
	padding: 10px;
}

.col_2 > div img{
	max-width: 100%;
}

@media screen and (max-width: 960px) {
	.col_2 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
	.col_2 > div{
		width: 100%;
	}
}






/*　　ニュース　リストスタイル
------------------------------------------------------------------------------------------------------------*/


ul.news {
	list-style-type: circle;
	padding-left: 1em;
}

ul.news li {
	margin-bottom: 15px;
}







/*　　GoogleMapレスポンシブ
------------------------------------------------------------------------------------------------------------*/



.GoogleMap{
    position: relative;
    width: 100%;
    height: 0;
	margin-top: 20px;
	padding-top: 60%;
	/*
    padding-top: 56.25%;　/*比率をお好みで*/
}

.GoogleMap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	/* filter: sepia(10%) grayscale(50%); */
}

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

.GoogleMap{
    width: 95%;
	margin: 0 auto;
	padding-top: 65%;
	/*
    padding-top: 56.25%;　/*比率をお好みで*/
}
	
}









/*　Youtubeレスポンシブ
------------------------------------------------------------------------------------------------------------*/

.movie-width {
	width: 90%;
	margin: 5px auto;
}



.movie-width-tbl {
	width: 100%;
	margin: 5px auto;
}



.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0px;
	width: 100%;
	height: 100%;
}



@media screen and (max-width: 960px){
.movie-width {
	width: 100%;
	margin: 5px auto;
}

.movie-width-tbl {
	width: 100%;
	margin: 5px auto;
}
}












/*　　フッター
------------------------------------------------------------------------------------------------------------*/


.footer {
	width: 1200px;
	padding: 10px;
	margin: 0 auto;
}


.copyright {
	width: 100%;
	font-size: .7rem;
	text-align: center;
	padding: 30px 0px 0px 0px;
	letter-spacing: 0.1em;
}

@media screen and (max-width: 768px) {
.footer {
	width: 100%;
	padding: 10px;
}

}





.footer-sns {
	margin: 20px 0 0 0;
	padding: 0 0 0 10px;
	font-size: 24px;
	font-weight: 900;
	text-align: center;
	color: #FFFFFF;
}

.footer-sns i{
	margin: 0px 10px 0px 20px;
	font-size: 40px;
}




.footer-sns a:link {color: #FFFFFF; text-decoration: none;}
.footer-sns a:visited {color: #FFFFFF;}
.footer-sns a:hover {color: #96793B;}
.footer-sns a:active {color: #96793B;}