@charset "utf-8";
body{
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/*========= LoadingのためのCSS ===============*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:rgb(12, 179, 95);
text-align:center;
color:#fff;
}
/* Loading画像中央配置　*/
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Loading アイコンの大きさ設定　*/
#splash_logo img {
width:260px;
}
/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
from {
  opacity: 0;
transform: translateY(100px);
}
to {
  opacity: 1;
transform: translateY(0);
}
}


/*========= 上部固定させるためのCSS ===============*/
#header{
  height: 100px;/*高さ指定*/
  width:100%;/*横幅指定*/
  /*以下はレイアウトのためのCSS*/
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgb(12, 179, 95);
  color:#fff;
  text-align: center;
  padding: 10px;
}


/*JSを使いfixedクラスが付与された際の設定*/
#header.fixed{
  position: fixed;/*fixedを設定して固定*/
    z-index: 10;/*最前面へ*/
    top:0;/*位置指定*/
    left:0;/*位置指定*/
}

/*==================================================
フッターナビ　横並びのための設定
===================================*/

#g-navi{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
  list-style: none;
}

#g-navi li a{
  display: block;
  text-decoration: none;
  color: #fff;
}

#g-navi li{
  margin:0 15px;
}

/*==================================================
フッターナビ　中心から外に線が伸びる（下部）
===================================*/
#g-navi li a{
  /*線の基点とするためrelativeを指定*/
position: relative;
}
#g-navi li a:hover{
color:#0481A2;
}
#g-navi li a::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 10%;
  /*線の形状*/
  width: 80%;
  height: 2px;
  background:#0481A2;
  /*アニメーションの指定*/
  transition: all .3s;
  transform: scale(0, 1);/*X方向0、Y方向1*/
  transform-origin: center top;/*上部中央基点*/
}
/*現在地とhoverの設定*/
#g-navi li a:hover::after {
  transform: scale(1, 1);/*X方向にスケール拡大*/
}



/*==================================================
スライダーのためのcss
===================================*/
#slider {
  width: 100%;
  height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*========= スライダーレイアウトのためのCSS ===============*/
a{
color: #fff;
}
a:hover,
a:active{
text-decoration: none;
}
h3{
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size:40px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #fff;
}
.wrapper{
position: relative;
}
.container{
background:#555;
}
.container p{
padding: 300px 0; 
text-align: center;
color: #fff;
}


/*========= その他のCSS ===============*/
h1{
  font-size:2rem;
  margin:10px;
  text-align: center;
}
h2{
  font-size:25px;
  margin:150px 0 75px;
  text-align: center;
}
.linklist{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-around;
  margin-bottom: 50px;
}
.list{
  flex-basis:20%;
  margin: 30px 20px;
}
.list img{
  border-radius:50%;
}
.list img:hover{
  opacity:0.6;
  transition-duration: 0.3;
}
.koumoku{
  font-size:15px;
  text-align:center;
  margin: 10px;
}

.btn{
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
}
.btnchangeline{
  margin:20px;
  font-size:18px;
}


/*========= ボタンのためのCSS ===============*/

/*塗りから線に変わる*/
.btnchangeline {
  /*線の基点とするためrelativeを指定*/
position:relative;
  /*ボタンの形状*/  
color:#333;
  padding: 10px 30px;

display:inline-block;
  text-decoration: none;
  outline: none;
  /*アニメーションの指定*/   
transition:all 0.3s ease-in-out;
}

/*線の設定*/
.btnchangeline::before {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  /*線の形状*/
  width: 100%;
  height: 100%;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  /*はじめは透過0に*/
  opacity: 0;
  transform: scale(0, 1);
  /*アニメーションの指定*/   
  transition: all 0.3s;
}

/*背景の設定*/
.btnchangeline::after {
  content: '';
  /*絶対配置で背景の位置を決める*/
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  /*背景の形状*/
  width: 100%;
  height: 100%;
  background-color:rgb(136, 226, 109);
  /*アニメーションの指定*/ 
  transition: all 0.3s;
}

/*hoverした際の背景と線の形状*/
.btnchangeline:hover::before {
  opacity: 1;/*不透明に*/ 
  transform: scale(1, 1);/*X方向に線を伸ばす*/
}

.btnchangeline:hover::after {
  opacity: 0;/*透過0に*/
  transform: scale(0, 1);/*X方向に背景を縮小*/
}

/*テキストの設定*/
.btnchangeline span {
  /*テキストを前面に出すためz-indexの値を高く設定*/  
position: relative;
z-index: 2;
  /*テキストの形状*/
color: #fff;
  /*アニメーションの指定*/   
  transition: all 0.3s;
}

/*hoverした際のテキストの形状*/
.btnchangeline:hover span {
  letter-spacing: 2px;
color: #333;
}
 



/*========= マップ・フッターのCSS ===============*/
#akusesu{
  background-color: rgb(12, 179, 95);
}
.akusesu{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
.address{
  flex-basis:20%;
  padding:60px;
}
.name{
  flex-basis:20%;
padding:80px;
  background-color: rgb(190, 197, 194);
}
.map{
  flex-basis:50%;
  font-size:12px;
  margin:15px;
}
.map iframe{
  width:100%;
  height:240px;
  margin-bottom:8px;
}
footer{
text-align: center;
background:rgb(12, 179, 95);
color:#fff;
padding:30px;
}
/***追従するトップへ戻るボタン***/
#page-top {
  position: fixed;
  right: 5px;
  bottom: 20px;
  height: 50px;
  text-decoration: none;
  font-weight: bold;
  transform: rotate(90deg);
  font-size: 90%;
  line-height: 1.5rem;
  color: #737373;
  padding: 0 0 0 35px;
  border-top: solid 1px;
}
#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 15px;
  border-top: solid 1px;
  transform: rotate(35deg);
  transform-origin: left top;
}
/***トップへ戻るボタンここまで***/





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

h3{
  font-size: 20px;
  
}
h4{
  display: none;
}
.no-pc{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
}

#g-navi{
  font-size: 9px;
  flex-basis:35%;
}

.akusesu{
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
}

.map{
  flex-basis:90%;
}

.name{
  flex-basis:100%;
  margin-top: 15px;
  padding:60px 100px;
}

.address{
    flex-basis:100%;
    padding:60px 30px;
}
h1{
  font-size: 20px;
}
.btn li a span{
  font-size: 13px;
 }



}