@charset "UTF-8";
/* Body */
body {
	background-color: #FFFFFF;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin: 0;
	overflow-x: hidden;
}
/* Container */

/* Header */
header {
	clear: both;
	display: inline-block;
	width: 100%;
	height: auto;
	background-color: #5D5E5D;
}

/* Hamberger */
.navbar {
  display: flex; /* フレックスボックスを使用 */
  justify-content: space-between; /* アイテムをスペースで均等に分割 */
  align-items: center; 
  background-color: #5D5E5D; 
  color: white; 
  font-weight: bold;
  font-size: 1.0em;
  padding-top: 20px;
  padding-right: 20px;
  margin-bottom: 0px;
  height: auto;
}
.logo {
	padding-left: 20px;
 }
.nav-list {
  list-style: none; 
  display: flex; /* 水平表示 */
  margin: 0; /* 外部余白なし */
	text-align: left;
}

.nav-list li {
  padding: 0 15px; /* 各アイテムの内部余白 */
}

.nav-list a {
  text-decoration: none; /* アンダーラインなし */
  color: white; /* リンク色 */
}
.nav-list a:hover{
  text-decoration: none; /* アンダーラインなし */
  color: #A3A3A3; /* リンク色 */
}
.nav-list a:visited{
  text-decoration: none; /* アンダーラインなし */
  color: white; /* リンク色 */
}


/* モバイルメニュー用スタイル */
.menu-toggle {
  margin-right: 20px;
  margin-left: 5px;
  display: none; /* デフォルトでは非表示 */
  flex-direction: column; /* 垂直方向のスタック */
  cursor: pointer; /* カーソルをポインタに設定 */
	z-index:99;
}

.menu-toggle .bar {
  height: 3px; /* 棒の高さ */
  width: 25px; /* 棒の幅 */
  margin: 3px 0; /* 棒の間隔 */
  background-color: white; /* 棒の色 */
  transition: 0.3s; /* アニメーションの速さ */
}

/* メディアクエリでモバイル対応 */
@media (mini-width: 415px)and (max-width: 824px){
.navbar {
	display: flex; /* フレックスボックスを使用 */
	justify-content: space-between; /* アイテムをスペースで均等に分割 */
	align-items: center;
	background-color: #5D5E5D;
	color: white; 
	font-weight: bold;
	font-size: 0.6em;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 20px;
	margin-bottom:0;
	height: auto;
	background-image: url(../toppage-images/navback2.jpg);
	}	
	}

@media (max-width: 414px) {
  .nav-list {
	position: absolute; /* 絶対位置 */
    top: -100%; /* 初期位置は上外 */
    right: 0; /* 右部からの距離 */
    flex-direction: column; /* 垂直方向のスタック */
    background-color: #5D5E5D; /* 背景色 */
    width: 150px; /* 幅 */
    height: 70%; /* 高さ */
    justify-content: flex-start; /* 開始点から配置 */
    padding-top: 20px;
	  padding-right: 50px;/* 右部の内部余白 */
	  padding-left: 0px;
    transition: 0.3s; /* 位置変更のアニメーション時間 */
     opacity: 0.9;
  }

  .nav-list li {
    padding: 15px; /* リストアイテムの余白 */
  }

  .menu-toggle {
    display: flex; /* モバイルでは表示 */
	  z-index:99;
  }

  .nav-active {
    top: 0; /* アクティブ時は右端に */
  }

  .toggle .bar:nth-child(1),
  .toggle .bar:nth-child(3) {
    transform: translateX(-5px); /* X記号のための変形 */
  }

  .toggle .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-6px, 7px);
  }

  .toggle .bar:nth-child(2) {
    opacity: 0; /* 中央の棒を透明に */
  }

  .toggle .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -7px);
  }
}

/* Heading */
.heading{
	clear:both;
	background-color: #5D5E5D;
	color: white;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin-top: 0;
	margin-bottom: 0px;
	padding-top: 10px;
	padding-bottom: 20px;
}
.heading h1{	
	font-size:18pt;
	text-align: left;
	padding-left: 5%;
}

/* About Section */

.breadcrumbs{
	height: 60px;
	text-align: right;
	color: #333;
	font-size: 0.95em;
	font-weight: 600;
	margin:0 0 0 0;
	padding-right:30px;
	padding-top:20px;
	padding-bottom: 0px;
	background-color: white;
}
img{
	width:100%;
	height:auto;
}

/* Footerspace */
footer {
	background-color: #C9C9C9;
	padding-top: 60px;
	padding-bottom: 60PX;
	clear:both;
}
.hero_header {
	color: #000000;
	text-align: center;
	margin: 0;
	letter-spacing: 4px;
}
.copyright {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #717070;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
}
/* 戻るボタン */
.pagetop {
  cursor: pointer;
  position: fixed;
  right: 30px;
  bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: .3s;
  color: #ffffff;
  background: red;
  
/*   デフォルトは非表示 */
  opacity: 0;
}
.pagetop:hover {
    box-shadow: 0 0 10px #00A6C4;
}