@charset "utf-8";
/*問い合わせ*/
html {
  font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.holtwood-one-sc-regular {
  font-family: "Holtwood One SC", serif;
  font-weight: 400;
  font-style: normal;
}
#wrap {
  position: relative; /*基準ボックス化　相対位置を決定*/
  /*	width: 900px;幅を900pxに設定*/
  width: 100%;
  margin: 0 auto; /*HPを中心に持ってくる*/
  max-width: 900px;
  padding-bottom: 20px;
  /*	background-color: aqua;*/
  background-image: url("../images/backgroudcolor.jpg")
}
body {
  margin: 0 auto; /*上部の隙間をなくす*/
}

/*ナビゲーション*/
img {
  vertical-align: middle;
}
button {
  outline: none;
}
.page-main {
  position: relative;
  z-index: 1000; /* content より大きな値 */
}
.page-main > aside {
  background-color: rgba(213, 124, 23, 0.80);
  width: 100px;
  height: 100%;
  top: 0;
  left: -100px; /* 初期状態は左に隠れている */
  position: fixed; /* 常に画面に固定される */
}
.page-main > aside ul {
  position: absolute; /* サイドバー内で絶対位置 */
  margin: 0;
  padding: 0;
  top: 50px;
  left: 10px;
}
.page-main > aside li {
  margin: 0 0 20px;
  list-style: none; /* リストの点を消す */
}
.page-main > aside button {
  background-color: rgba(92, 175, 53, 0.80);
  display: block;
  position: absolute;
  top: 150px;
  left: 100px;
  width: 52px;
  height: 132px;
  margin: 0;
  padding: 0;
  border: none;
}
/*----naviの中の写真img---------*/
.page-main > aside ul li img {
  width: 80px; /* 横幅を小さく */
  height: 80px; /* 高さを小さく */
  border-radius: 50%; /* 丸く切り抜き */
  object-fit: cover; /* はみ出しをトリミング */
  display: block;
}
.page-main > aside ul li .overlay-text {
  font-size: 24px; /* 小さめに */
  white-space: nowrap; /* 改行防止 */
}
/* 7番目の li だけ改行を許可する */
.page-main > aside ul li:nth-child(7) .overlay-text {
  white-space: normal; /* 自動改行許可 */
  font-size: 12px; /* 少し小さめにして収めやすく */
  text-align: center; /* 2行になった時に中央揃え */
}
.content {
  position: relative;
  z-index: 1; /* aside より低くする */
}

/* 画像の文字を重ねる設定 */
.img-box {
  position: relative; /* この中で絶対配置を使えるようにする */
  display: inline-block;
}

.img-box img {
  display: block; /* 余白防止 */
}
.overlay-text {
  position: absolute;
  top: 50%; /* 縦位置 */
  left: 50%; /* 横位置 */
  transform: translate(-50%, -50%); /* ちょうど中央に配置 */
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7); /* 背景に埋もれないよう影を付ける */
  pointer-events: none; /* ←これで親の<a>も反応 */
  }
/*-------------------------------------*/
/*お問合せ情報*/
th {
  text-align: right;
}
/*表組の設定*/
.entrytable {
  width: 100%;
  margin-bottom: 30px;
  border-collapse: separate; /* セルを分離 */
  border-spacing: 15px; /* セル間の隙間 */
 
}
.entrytable tr {
  display: flex;
  align-items: center;
}
.entrytable caption {
  padding-top: 30px;
  padding-bottom: 10px;
  font-size: 20px;
}
.entrytable th {
  width: 10em;
  text-align: right;
  /*  background: #f6f6f6;*/
  padding: 10px; /* ←セル内の余白 */
  }

/*ボックスの幅*/
.entrytable td {
  padding: 1px;
  border: 2px solid #b2bcbe;
  border-radius: 5px;
  width: 70%
}
/*ボーダーの角丸*/
.entrytable tr {
  margin: 10px auto;
}
.entrytable caption {
  margin-top: 10px;
  margin-bottom: 10px;
}
/*入力フォームの設定*/
.entrytable input[type="text"], /*.entryTableというクラス名を持つ要素の子孫要素のうち、input要素で、かつそのtype属性がtextであるものを指します。*/ .entrytable input[type="email"], /*.entryTableというクラス名を持つ要素の子孫要素のうち、input要素で、かつそのtype属性がemailであるものを指します。*/ .entrytable textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #fff;
  box-sizing: border-box; /*padding,borderを含めて全体で100％に収めるようにしておく*/
  font-size: 1em; /*画面サイズに応じたサイズになるため*/
}
/*ボタンの基本スタイル*/
.entryBtns input {
  width: 200px;
  margin: 0 10px;
  padding: 10px;
  background: #fff;
  border: 2px solid #264348;
  border-radius: 10px; /*ボーダーの角丸*/
  font-size: 1em;
  -webkit-appearance: none; /*デフォルトで用意されているCSSのフォームを打ち消すnoneで*/
}
/*送信ボタン用のスタイル*/
.entryBtns input[type="submit"] {
  background: #264348;
  color: #fff;
}
/*ボタンにマウスが乗った時*/
.entryBtns input:hover {
  opacity: 0.7;
}
.entryBtns {
  text-align: center;
}
/*カーソル形状*/
label, input, textarea, select {
  cursor: pointer;
}
/*-----------------------*/
/*footer*/
#footer {
  width: 100%;
  height: auto;
  background-color: #DCDADA;
  text-align: center;
}
#footer h2 {
  color: #000000;
  font-size: 24px;
  margin-top: 0px;
  padding-top: 23px;
  padding-bottom: 23px;
}
#footer h3 {
  font-size: 20px;
  padding-bottom: 10px;
}
#footer h4 {
  font-size: 18px;
  bottom: auto;
  padding-bottom: 20px;
}
.logo-f {
  padding-bottom: 0px;
}
.copyright {}
#footer p {
  padding-bottom: 16px;
  padding-top: 5px;
  margin-bottom: 8px;
}

/* ==============================
   スマホ向け（640px以下）
   ============================== */
@media screen and (max-width: 640px) {
  /* ページ全体 */
  /*------------------------------------------*/
  /* ナビゲーション */
  .page-main > aside {
	  margin-left: 0px;
	  width: 70px;/*  少し小さく */
  }
	
  .page-main > aside ul li img {
    width: 50px;
    height: 50px;
  }
	
  .page-main > aside ul li .overlay-text {
    font-size: 14px;
  }

	.page-main > aside button{
		left: 70px;
		width: 80px;
		height: 101px;
	}	
	
	.page-main > aside button img{
		padding-left: 20px;
		left: 100px;
		width:40px;
		height: 101px;
	}
	
/*	---------------------------*/
	
	
	.entryBtns > input{
		margin-bottom: 7px;
	}
	/*-------------------*/
	#footer h3{
		font-size: 16px;
	}
	#footer h4{
		font-size: 14px;
	}
	
}


/*-------下層のｃｓｓ----------*/
/* 横幅を1000pxに固定して中央寄せ */
/*
.content-wrapper {
	width: 1000px;
	margin: 0 auto;
	padding-right: 20px;
	padding-left: 20px;
*/
/*
	padding-bottom: 40px;  余白 
	background: #fff;    背景を白などに 
}
*/