@charset "utf-8";
body 
{ 
  font-family: sans-serif; 
  margin: 0; 
  background-image: url('./img/back.jpg');
  background-attachment: fixed;
  background-size:cover;
}
header { background: #004080; margin: 0; padding: 6px; position: sticky; top:0;}
header h1 {font-size: 18px; color: white; margin: 0; padding: 0; }
header h2 {font-size: 9px; color: lightgreen; margin: 0; padding: 0; }
header a { text-decoration: none; }
footer { background: #00264d; color: white; text-align: center; padding: 1rem; margin-top: 2rem; }
footer a { color: white;  text-decoration: none; gap:1rem; }

td { font-size: 0.75rem; padding: 1px;}

.hero { padding-top: 1rem;  text-align: center; }
.hero h1 { font-size: 2.5rem; color: #004080; text-shadow: 2px 2px 4px rgba(255,255,255,0.5); }
.hero h2 { font-size: 1.5rem; color: #004080; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); text-indent: 0; padding-left: 1rem; }
.hero h3 { font-size: 1rem; color: #000000; text-indent: 0; }

.TopLayout {display: flex; flex-wrap: wrap;  justify-content: center; margin: 2rem; }
.TopLayout h2 { 
  padding: 0.5rem;
  font-size: 1.5rem; 
  color:#ffffff ; 
  text-align: center; 
  background-color: #004080; 
}
.TopLayout h3 { color: #004080; text-indent: 0; vertical-align: middle; text-shadow: 2px 2px 2px rgba(255,255,255,0.5);}
.TopLayout p { color: #000000; text-indent: 0; vertical-align: middle; padding-left: 1rem; text-shadow: 2px 2px 2px rgba(255,255,255,0.5);}
.TopLayout li { color: #000000; text-indent: 0; vertical-align: middle; padding-left: 1rem; text-shadow: 2px 2px 2px rgba(255,255,255,0.5);}
.cell { flex:1; margin: 1rem; padding: 1rem; max-width: 450px; min-width: 250px; }
.cell img { display: block; margin: auto;  max-width: 300px; height: auto; }  

.contentsbox { display: flex; flex-wrap: wrap ; justify-content: center; }
.overview {
  display: grid; grid-template-columns: auto auto; 
  margin: 1rem; 
  padding: 1rem; 
  background: rgba(255,255,255,0.5); border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.overview h4 { font-size: 1rem; color: #004080; line-height: 1rem; vertical-align: middle; }
.overview p { color: #000000; text-indent: 0; vertical-align: middle; padding-left: 1rem; }


.service { margin: 1rem; padding: 1rem; max-width: 350px; background: rgba(255,255,255,0.5); border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.service h2 { font-size: 1.5rem; color: #004080; text-align: center; }
.service h3 { color: #004080; text-indent: 0; vertical-align: middle;}
.service h4 { font-size: 1rem; color: #004080; line-height: 1rem; vertical-align: middle; }
.service p { color: #000000; text-indent: 0; vertical-align: middle; padding-left: 1rem; }
.service img { max-width: 100%; height: auto; border-radius: 10px; }  

.access { margin: 1rem; padding: 1rem; width: 80%; background: rgba(255,255,255,0.5); border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.5); justify-content: center; }
.access h2 { font-size: 1.5rem; color: #004080; }
.access h3 { color: #004080; }
.access h4 { font-size: 1rem; color: #004080; line-height: 1rem; }
.access p { color: #000000;  }

.supplier { display: flex; flex-wrap: wrap; justify-content: center; margin: 1rem; padding: 1rem; }
.supplier h2 { font-size: 1.5rem; color: #004080; text-align: center; }
.supplier h3 { color: #004080; text-indent: 0; vertical-align: middle; }
.supplier h4 { font-size: 1rem; color: #004080; line-height: 1rem; vertical-align: middle; }
.supplier p { color: #000000; text-indent: 0; vertical-align: middle; padding-left: 1rem; }

.contact { max-width: 800px; margin: 1rem; padding: 1rem; background: rgba(255,255,255,0.5); border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.contact h3 { color: #004080; text-indent: 0; vertical-align: middle;}
.contact label {
  display: block;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.contact input, textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.required {
  color: red;
  font-size: 0.9em;
}

button {
  padding: 0.8rem 2rem;
  background-color: #004080;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  background-color: #0066cc;
}

/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 20px;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #ffffff;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 220px;
  height: 100%;
  position: fixed;
  bottom: 100%;
  right: 0%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgb(110, 110, 110);
  text-align: left;
  padding-top: 40px;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

.nav_ul {
  display: flex; 
  flex-wrap:wrap; 
  justify-content: center; 
  list-style: none; 
}

.nav_item a {
  font-size: 1.5rem ;
  line-height: 3rem;
  color: #fff;
  text-decoration: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  bottom: 0;/* メニューを画面に入れる */
}

/*ポップアップ*/
/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 80%;
  height: 80%;
  overflow: auto;
  padding: 10px 30px;
  background-color: #fff;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}

.modalContents table
{
  justify-content: center; 
  border-spacing: 0.2rem; 
  vertical-align: top; 
  border-width: 1px;
}

.modalContents td
{
  font-size: 1rem; padding: 1px;
}