@charset "UTF-8";
/* CSS Document */

body{background-color:#FFFFFF;

	padding: 5%;
	margin: 5%;
	
	overflow-x:hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling:touch;
	max-width: 100%;
	
		
 }

@media not all and (min-width: 450px){
span{display: block;}
}
	
	
p{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-size: 16px}


hr{border-top: 3px dashed #589EB4;
}

img {
  max-width: 100%;
	height:auto;
	
}

li{list-style: none}

p{line-height: inherit
}

h1{color: #589EB4;
margin-left: 20px;
font-family:"Arial Black", Gadget, "sans-serif"}

h2{font-family:"Arial Black", Gadget, "sans-serif"}

h3{font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-size: 22px}



nav{margin: 5%}

.img1{
margin-right: 100px}

.img2{
margin-left: 100px}


.map{
	text-align: center;
 position:relative;
  width: 100%;
	height: auto;
  padding-top: 75%;}

.mapframe{padding: 30px;
	margin: 3%;
flex-wrap: nowrap;}

.iframe{position: absolute;
  top: 0;
  left: 0;
	
  width: 100%;
  height: 70%}



.content{background:#DAE5ED;
padding: 30px;
	margin: 3%;
	flex-wrap: nowrap;
	}


.content img{max-width: 400px;
  height: auto;
	margin: 0;
	padding: 0;
}






.info{margin: 7px}

.button{max-width: 100%;
	height:auto;
	border-style: none;}

.header-logo {
  
  line-height: 1.5;
  margin: 20px;
  letter-spacing: .05em;
	text-align: center;
	width: 90%
}

.header-nav{
text-align: center;
	white-space: nowrap;
	text-align: center;
}

.header-nav-list {
  display: flex;
  justify-content: center;
	text-align: center;
	align-content: center;
	margin-left: -15%
	
}

.header-nav-item {
  margin:3px;
	font-family:"Arial Black", Gadget, "sans-serif";
	text-align: center;	 
}

.header-nav-item a {
  font-size: 10px;
  padding: 4px;
  
  color: #000;
 
	
}

.header-nav-item a:hover {
  opacity: .8;
}



.slideshow{;

	padding: 0;
	
  width: 100%;
 
	
	margin-bottom: 0
	
}
.slideshow img{margin:0;
	padding: 0;
	
  width: 100%;
  
height:auto;}





.insta_list{
    display: flex;
    flex-wrap: wrap;
    
    margin: 20px 0;
}

.insta_list li{
    position: relative;
    width: calc((90% - 40px)/3);
	
	margin: auto
}

@media screen and (max-width: 750px){
    .insta_list li{
        width: calc((90% - 20px)/2);
    }
}

.insta_list li::before{
	content: "";
	display: block;
	padding-top: 100%;
}

.insta_list a{
	position: absolute;
  top: 0;
  width: 100%;
 ;
}

.insta_list img{
  width: 100%;
  
  object-fit: cover;
	aspect-ratio:1/1;
}

.space{margin-top: 160px;
margin-bottom: 50%}

.insta_btn{
    background-color: #589EB4;
   padding: 5px 15px;
	margin: 5px ;
    
    cursor: pointer;
    transition: .3s;
	align-content: center;
	text-align: center
}

.insta_btn a{
    color: #fff;
    text-decoration: none;
	font-size: 15px;
	
	
	
		
}

.insta_btn:hover{
    background-color:powderblue;
}



.section4{
 overflow:hidden;
 text-align:center;
}
.section4 h2{
 position:relative;
 display:inline-block;
 padding:0 30px;
 text-align:center;
}
.section4 h2::after,
.section4 h2::before{
 position:absolute;
 top:50%;
 width:9999em;
 height:2px;
 content:'';
 transform:translateY(-50%);
 background:#ccc;
}
.section4 h2::before{
 right:100%;
}
.section4 h2::after{
 left:100%;
}



.container {
  max-width: 100%;
  margin:  auto;
	  
  ;
}
/*　画面サイズが767px以下になったとき　*/
@media screen and (max-width:767px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }
}



/*　行  中の要素を横並びにする　*/
.row1{
  display: -webkit-box; /* old Android */
  display: -webkit-flex; /* Safari etc. */
  display: -ms-flexbox; /* IE10        */
  display: flex;
  padding: 3% ;
	margin: 1%;
 ;
  flex-wrap: wrap;	
	flex-shrink: 0;
	background: #C7B6D6
	
}

.row2{
  display: -webkit-box; /* old Android */
  display: -webkit-flex; /* Safari etc. */
  display: -ms-flexbox; /* IE10        */
  display: flex;
  padding: 3%;
	margin: 1%;
  ;
  flex-wrap: wrap;	
	flex-shrink: 0;
	background: #B4E5B6
	
}



/*　横2段組み　*/
.col-2 {
  width: 48%;
  padding: 0;
	margin: 1%;
}




.col-2:nth-of-type(2n+1) {
  margin-left: 0%;
}
@media screen and (max-width:767px) {
  /*　横2段組みがスマホで横１段になる　*/
  .col-2 {
    width: 100%;
    padding: 0;
    margin-left: 0%;

  }
}

.row-sp-reverce {
  display: -webkit-box; /* old Android */
  display: -webkit-flex; /* Safari etc. */
  display: -ms-flexbox; /* IE10        */
  display: flex;
  padding: 3%;
	margin: 1%;
 ;
  flex-wrap: wrap;
  flex-direction: row-reverse;
	flex-shrink: 0;
	background: #B3E0DD
}
@media screen and (max-width:767px) {
  .row-sp-reverce {
    flex-direction: column;
  }
}