/* 格納
   ========================================================================== */

label {
    padding: 3px 3px;
    display: block;
    cursor: pointer;
    margin: 0;
    margin-top: 0px;
	margin-bottom: 0px;
	text-decoration: none;
    color: #000;
	}

input[type="checkbox"].on-off{
    display: none;
}


.photocenter{
	display: inline-block;
	text-align: center;
}

.midashi{
	font-size: 1.3rem;
	padding:0px;
	margin: 3px;
	width:100%;
}

input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
    height: auto;
    overflow:hidden;
}

.photoleft{
	float:left;
	margin-right:10px;
}



/* フロートセンタリング
   ========================================================================== */
.hoge {
  position: relative; 
  overflow: hidden; /* 下のulのcssでリスト全体を右に50%移動しているので、その分幅が広がってしまいスクロールバーが表示されてしまいます。それを防ぐ為の設定です。 */
}

.hoge ul {
  position: relative;
  left: 50%; /* リスト全体であるul要素を右に50%移動。つまり先頭を中央に持ってくる感じです。 */
  float: left;
}

.hoge ul li {
  position: relative;
  left: -50%; /* 各リスト項目になるli要素を左に50%移動。 */
  float: left;
  list-style: none; /* 項目にぼっちを出したくない場合はこれを設定（今回はあんまり関係ないですが） */
}
/* グーグルマップ
   ========================================================================== */

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 10px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 80%;
height:60%;
}


/* スマホ対応
   ========================================================================== */

@media screen and (max-width: 480px) {
.photoleft { float : none ;  width:100%; max-width: 240px;}
.photo-right { float : none ; width:100%; max-width: 240px;}
.rightbox2 { float : none ;  width:100%;}
.leftbox2 { float : none ;  width:100%;}
.hyou { width:100%;}
.ul.nav li strong{ width:100%;}
.taishi {margin-left:10px;}
.ol li{ margin-left:10px;}
.nav{margin: 0px;}
}

/* ボタンアニメーション　公式サイト
   ======================================================================= */

.btn-animation-02 {
  display: inline-block;
  width: 280px;
  text-align: center;
  background-color: #9ec34b;
  border: 2px solid #9ec34b;
  font-size: 16px;
  color: #9ec34b;
  text-decoration: none;
  font-weight: bold;
  padding: 5px 5px;
  border-radius: 4px;
  position: relative;
  margin-top:10px;

}

.btn-animation-02 span {
  position: relative;
  z-index: 1;
}

.btn-animation-02::before,
.btn-animation-02::after {
  content: "";
  display: block;
  background-color: #FFF;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: .2s;
}
.btn-animation-02::before {
  left: 0;
}
.btn-animation-02::after {
  right: 0;
}

.btn-animation-02:hover:before,
.btn-animation-02:hover:after {
  width: 0;
  background-color: #FFF;
}

.btn-animation-02:hover {
  color: #FFF;
}

/* ボタンアニメーション　取組み紹介動画
   ======================================================================= */

.btn-animation-03{
  display: inline-block;
  width: 280px;
  text-align: center;
  background-color: #ff5753;
  border: 2px solid #ff5753;
  font-size: 16px;
  color: #ff5753;
  text-decoration: none;
  font-weight: bold;
  padding: 5px 5px;
  border-radius: 4px;
  position: relative;
}

.btn-animation-03 span {
  position: relative;
  z-index: 1;
}

.btn-animation-03::before,
.btn-animation-03::after {
  content: "";
  display: block;
  background-color: #FFF;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: .2s;
}
.btn-animation-03::before {
  left: 0;
}
.btn-animation-03::after {
  right: 0;
}

.btn-animation-03:hover:before,
.btn-animation-03:hover:after {
  width: 0;
  background-color: #FFF;
}

.btn-animation-03:hover {
  color: #FFF;
}