@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

html,body,div,span,iframe,h1,h2,h3,h4,h5,p,a,img,table,tr,td,main {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	list-style: none;
	text-decoration: none;	
 }


img {
  max-width: 100%; /* 画像が親要素からはみ出さないように縮小 */
  height: auto;
}

iframe{
  max-width: 100%; /* google地図が親要素からはみ出さないように縮小 */
}


body {/* フォント*/
	font-family: "Arial","Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 	-webkit-text-size-adjust: 100%;
 }

body {/*全体の書式*/
	margin: 0em;
	background-color: #ffffff;
	color: #555555;
 } 

main {/* 余白指定 */
    margin-right: auto;
	margin-left: auto;
	width: 80%;
 }

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
 }

header{
  display: flex; /* Flexboxを使う */
  justify-content: space-between; /* 左端と右端に寄せる */
  align-items: center; /* 垂直方向中央揃え */
  padding: 20px 30px;
  background-color: #FFFFFF;
 }

.header-title {
	display: flex;
	align-items: center;
	font-weight: bold;
 }

.header-logo {
width: 90px;
margin-right: 20px;/* ヘッダタイトルとのスペース */
 }

.keyvisual {
display: block;
margin:auto;
width: 100%;
 }

div  {/*グループの書式*/
    margin : 0em ;
    padding : 0em ;
 }

table, td{
	width: 100%;
    border-bottom: 1px solid #dddddd;/*下だけに罫線を引く*/
 }

table {
    border-collapse: collapse;/*要素間の枠線の隙間を無くす*/
 }
 
td.td1{/*1列目　中央揃え*/
	width: 15%;
	text-align:　left;
	vertical-align: middle;
	padding: 1.5em 0em 1.5em 0em;
 }

td.td2{/*1列目　上揃え*/
	width: 15%;
	text-align:　left;
	vertical-align: top;
	padding: 1.5em 0em 1.5em 0em;
 }
    
td.td3{/*2列目　中央揃え*/
	text-align:　left;
	vertical-align: middle;
	padding: 1.5em;
 }

hr{/*水平線の書式*/
	margin: 0em;
	color: #555555;
 }

a{/*リンクの書式*/
	color: #555555
 }

p {/*段落の書式*/
margin: 1em 0em 1em 0em;
line-height: 200%;
 }

br {/*改行の書式*/
margin: 10em 0em 1em 0em;
 }

h1 {
  padding: 0em 0em 0.5em 0em;/*上右下左の余白*/
  font-size: 1.8em;
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
 }

h3 {
  padding: 5em 0em 0.5em 0em;/*上右下左の余白*/
  font-size: 1.2em;
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
 }

.container {
	display: flex;
	flex-wrap: wrap;
    margin: auto;
	/*
	justify-content: space-evenly;/*要素が複数ある場合、全てのflexアイテム間の余白を均等にする*/
	*/
  }

.map {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;/*要素が複数ある場合、両端揃えにする*/
	margin: auto;
 }


html {
  scroll-behavior: smooth;
}

img:hover {/* マウスオーバーで透明度を0にする */
  opacity: 1.0;
}

.scroll-button {
	position:relative;/* 親要素を基準にする */
	text-align:  center;/* 左右中央に配置 */
 }

.overlay-image {
  position:relative; /* 親要素を基準に相対位置指定 */
  bottom: 150px; /* 下から50px */
  opacity: 0.5;/* 透明度を50%にする */
  z-index: 10; /* 重ね順（数字が大きいほど上） */
  margin: 0 auto;

  animation: shake 10s ease-in-out infinite;
 }

@keyframes shake {
	0%, 100% { 
   	transform: translateY(0);
	}
  	10%, 30%, 50%, 70%, 90% { 
   	transform: translateY(-5px)
	}
  	20%, 40%, 60%, 80% { 
   	transform: translateY(5px);
	}
 }


footer{background-color: #F3F3F3}/* フッターの背景色 */

.style-nav{/* ナビゲーションのスタイル */
	text-align: center;
	color: #555555;
 }

.style-nav ul{/* ナビゲーションのスタイル */
	list-style-type: none;
	text-decoration: none;
	margin: 0;/* デフォルト余白をリセット */
	padding: 0;/* デフォルト余白をリセット */
 }

.style-nav ul li a{/* ナビゲーションの項目リストのスタイル */
	display:block;
	padding: 2em 2em 0em 2em;	
 }

.copylight {
    line-height: 20px;
    font-weight: 400;
    color: #999999;
    text-align: center;
    padding: 2em;
 }

 @media (min-width: 800px){/* タブレットビュー　これより前はモバイル用 */

	.style-nav ul li{
		display: inline-block;
	}
	.style-nav ul {
		text-align: center;
	}
	 
 }