@charset "UTF-8";
body {
  max-width: 1200px;  /* 要素の最大幅1200px */
  margin: 0 auto;     /* 要素を中央 */
  min-height: 100vh;  /* ヘッダーの最低の高さを画面全体の高さに合わせる */
  display: grid;      /* グリッドレイアウト */
  grid-template:      /* グリッドテンプレート */ 
    "header " 60px
    "nav    " 60px
    "main   " 1fr
    "footer " 60px;
}
main {
  grid-area: main;
}

header {
  grid-area: header; 
  display: flex;                    /* フレックスボックス */
  justify-content: space-between;   /* 両端を均等揃え */
  align-items: center;      /* 縦方向に中央 */
  color: #000;            /* 文字の色を黒 */
  font-size: 2rem;          /* 文字の大きさ2rem */
}
header ul {
  width: 100%;                /* 幅100% */
  display: flex;              /* フレックスボックス */
  justify-content:flex-start ;    
  align-items: center;        /* 縦方向に中央 */
}

  /*-------------------------------------------
  メニューバー
  -------------------------------------------*/
nav {
  grid-area: nav;
  background-color: #000;   /* 背景色を黒 */
}

nav ul {
  display: flex;            /* フレックスボックス */
  justify-content: center;  /* 左右中央揃え */
  margin: 0;                /* 余白0 */
  padding: 6px;             /* 内部余白6px */
  list-style-type: none;    /* 下線なし */
}
nav a {
  display: flex;         /* ブロック要素 */
  border-radius: 4px;     /* 角を丸くする4px */
  padding: 12px 30px;     /* 内側余白 上下12px 左右30px */
  text-decoration: none;  /* テキストの装飾なし */
  color: white;         /* 文字色を白 */
}
nav li a:hover {
  background-color:lavender;  /* 背景色ラベンダー */
  color: darkblue;            /* 文字色をダークブルー */
}
nav ul li.current{
  border-radius: 4px;           /* 角を丸くする4px */
  background-color: #4169e1;  /* 背景色を青系 */
}

footer {
  grid-area: footer;
  background-color: #000; /* 背景色を黒 */
  display: flex;            /* フレックスボックス */
  justify-content: center;  /* 左右中央揃え */
  align-items: center;      /* 縦方向に中央 */
  margin-top: 30px;         /* 上余白30px */
}
footer p {
  color: #fff;          /* 文字の色を白 */
  font-size: 0.875rem;    /* 文字の大きさ */
}


/* 共通 */
a {
  text-decoration: none;  /* リンク下線を消す */
}
img {
  max-width: 100%;        /* 画像の最大幅100% */
}
li {
  list-style: none;       /* リスト記号を無し */
}

/* Webフォント */
.wf-sawarabimincho {
  font-family: "Sawarabi Mincho";
}


/* キャッチコピー */
.catch-title {
  text-align: center;     /* 文字列を中央 */      
  font-size: 2rem;        /* 文字サイズ */
  margin-top: 30px;       /* 上余白30px */
}
.catch-title p {
  font-size: 1.3rem;      /* 文字サイズ1.3rem */
}

/* container */
.container {
  display: flex;          /* フレックスボックス */
  width: 100%;            /* 幅100% */
  margin-top: 20px;       /* 上余白20px */
}

.left {
  width: 70%; /* 左幅70% */
}
.left p {
  font-size: 1.25rem;
}
.right {
  width: 30%; /* 右幅30% */
}
.banner {
  width: 30%; /* 幅30% */
}

/* Topics */
.topics-title {
  font-size: 1.5rem;  /* 文字サイズ1.5rem */
  font-style: italic; /* 文字を斜体 */
}
.topics-info {
  width: 100%;  /* 幅100% */
  margin: 20px; /* 余白20px */
  font-size: 1.2rem;  /* 文字サイズ1.2rem */
}
.topics-info ul{
  display: table; /* テーブル要素 */
  width: 98%;     /* 幅98% */
  padding: 5px;   /* 内側余白5px */
  border-bottom: solid 1px darkgray;  /* 下の線を1px グレー */
}
.topics-info li{
  display: inline-block;  /* インナーブロック要素 */
  font-size: 1rem;        /* 文字サイズ1rem */
  padding: 5px;           /* 内側余白5px */
  padding-right: 20px;    /* 内側右余白20px */
}
.box {
  margin: 5px 0;          /* 余白　上下5px 左右0 */
  border-left: solid 10px #ff6347;  /* 右の線を10px 赤系 */
}

/* News */
#news {
  display: flex;            /* フレックスボックス */
  justify-content: center;  /* 左右中央揃え */
  margin: 30px;             /* 余白30px */
}
#news ul {
  display: flex;            /* フレックスボックス */
  justify-content: space-between;   /* 両端を均等揃え */
  width: 100%;              /* 幅100% */
}
#news li {
  width: 32%;             /* 幅32% */                   
}
#news img {
  width: 330px;     /* 幅330px */
  height: 200px;    /* 高さ200px */
  padding: 0 10px;  /* 内側余白 上下0 左右10px */
}
#news p {
  padding: 0 10px;  /* 内側余白 上下0 左右10px */
}


/* BUSINESS */
#business {
  display: flex;            /* フレックスボックス */
  justify-content: center;  /* 左右中央揃え */
  margin-top: 20px;         /* 上余白20px */
}
#business ul {
  display: flex;            /* フレックスボックス */
  justify-content: space-between;   /* 両端を均等揃え */
  width: 100%;  /* 幅100% */
}
#business li {
  width: 30%;                 /* 幅30% */
  border: solid 1px white;  /* 上下左右の線を1px 白 */
  border-radius: 5%;          /* 角を丸くする5% */
  background-color:#ffefff; /* 背景色を白系 */
  text-align: center;         /* 文字列を中央揃え */
  margin-left: 20px;          /* 左余白20px */
}
#business img {
  width: 150px;   /* 幅100% */
  height: 150px;  /* 高さ150px */
  padding: 10px;  /* 内部余白10px */
}
#business p {
  padding: 0 10px;  /* 内部余白 上下0 左右10px */
  color: black;   /* 文字の色　黒 */
  background-color:aliceblue; /* 背景色をアリスブルー */
}
#business h3 {
  font-size: 0.875rem;  /* 文字のサイズ0.875rem */
  color:darkgray;     /* 文字の色　ダークグレー */
  background-color:aliceblue; /* 背景色をアリスブルー */
}
.business-title {
  margin-top: 50px;                     /* 上余白50px */
  border-bottom: solid 1px darkgray;  /* 下の線を1px ダークグレー */
  font-size: 1.5rem;                    /*  */
}
.business-info {
  display: flex;                  /* フレックスボックス */
  justify-content: space-between; /* 両端を均等揃え */
}
.business-left {
  width: 68%;   /* 幅68% */
  margin: 20px; /* 余白20px */
}
.business-right {
  width: 28%;   /* 幅28% */
  margin: 20px; /* 余白20px */
}
.business-info img {
  width: 300px;   /* 幅300% */
  height: 200px;  /* 高さ200px */
}
.business-info p {
  font-size: 1.1rem;  /* 文字のサイズ1.1rem */
}

/* COMPANY */
.company {
  display: flex;                /* フレックスボックス */
  justify-content: center;      /* 左右中央揃え */
  width: 80%;                   /* 幅80% */
  margin: 0 auto;               /* 要素を中央 */
  border-bottom: solid 1px darkgray;  /* 下線1px ダークグレー */
  padding: 5px;                 /* 内部余白5px */
}
.company-left {
  width: 20%;           /* 幅20% */
  font-size: 1.125rem;  /* 文字サイズ1.125rem */
  font-weight: bold;    /* 太文字 */
}
.company-right {
  width: 80%;           /* 幅80% */
  font-size: 1.125rem;  /* 文字サイズ1.125rem */
}

/* kouza */
.kouza {
  display: flex;                /* フレックスボックス */
  justify-content: center;      /* 左右中央揃え */
  width: 96%;                   /* 幅80% */
  margin: 0 auto;               /* 要素を中央 */
  padding: 5px;                 /* 内部余白5px */
}
.kouza-left {
  width: 20%;             /* 幅20% */
  font-size: 1.125rem;    /* 文字サイズ1.125rem */
  text-align: center;     /* 文字列を中央 */
  font-weight: bold;      /* 太文字 */
  margin-right: 10px;     /* 右余白10px */
  padding: 5px;           /* 内部余白5px */
  background:#dcdcdc;   /*背景色を薄いグレー  */
}
.kouza-right {
  width: 80%;             /* 幅80% */
  font-size: 1.125rem;    /* 文字サイズ1.125rem */
  border: 1px solid darkgray; /* 上下左右の線を1px ダークグレー */
  padding: 5px;           /* 内部余白5px */
  background:#fffff0;   /* 背景色を白系 */
}

/* ACCESS */
#access-map {
  width: 80%;     /* 幅80% */
  margin: 0 auto; /* 要素を中央 */
}
iframe {
  width: 100%;    /* 幅100% */
}
/* TEST */
.test {
  width: 90%;            /* 幅100% */
  margin-top: 20px;       /* 上余白20px */
  margin: 0 auto; /* 要素を中央 */
}
.test h3{
	margin-bottom:0.25em;
	padding:2px 5px;
	color:#fff;
	font-size:22px;
	background:#006830;
}
.test p {
  font-size: 1.2rem;
}

/* フォーム */
.wrapper {
  max-width: 800px; /* 要素の最大幅800px */
	margin:0 auto;    /* 要素を中央 */
}

form div {
  margin-bottom: 30px;  /* 下余白30px */
}
label {
  display: block;       /* ブロック要素 */
  font-size: 1.125rem;  /* 文字サイズ1.125rem */
}
input[type="text"],
input[type="email"],
textarea {
  background: snow;           /* 背景色を白系 */
  border: 1px darkgray solid; /* 上下左右の線を1px ダークグレー */
  padding: 10px;                /* 内部余白10px */
  font-size: 1rem;              /* 文字サイズ1rem */
	width: 100%;                  /* 幅100% */
}
input[type="text"],
input[type="email"] {
  max-width: 600px;           /* 要素の最大幅600px */
}
textarea {
  max-width: 600px;   /* 要素の最大幅600px */
  height: 6rem;       /* 高さ6rem */
}
input[type="submit"] {
  border: none;       /* 下線なし */
  cursor: pointer;    /* カーソルをポインタ */
  line-height: 1;     /* 行の高さ1 */
}
/* ボタン */
.button {
  font-size: 1.4rem;      /* 文字サイズ1.4rem */
  background: #202020;  /* 背景色を黒系 */
  color: #fff;          /* 文字の色　白 */
  padding: 20px 36px;     /* 内部余白 上下20px 左右36px */
  border-radius: 5%;      /* 角を丸くする5% */
}
.button:hover {
  background: gray;   /* 背景色をグレー */
}

/* その他 */
.list {
	padding:0 0 0 5px;
}

.list li {
	margin:0;
	padding:0;
	list-style:none;
}
.list li:before {
	content:"\002618\00a0";
	color:#9b2f3d;
}
.subtext {
	margin-bottom:0.5em;
	font-size:20px;
	color:#B6003D;
	border-bottom:3px solid #c4877f;
	font-weight:bold;
}
.uguisu {
	font-weight:bold;
 	color:#00908B;
}
.li2{
  padding-left: 20px;
}
.inner{
margin:0 auto;
width:100%;
}

/*-------------------------------------------
テーブル
-------------------------------------------*/
table {
	width:95%;
	margin:0 auto;    /* 要素を中央 */
	margin-bottom:1em;
	border-collapse:collapse;
	border:1px solid #999999;
}
th {
	padding:5px;
	text-align:center;
	vertical-align:middle;
	border:1px solid #999999;
	background:lightgray;
}
td {
	padding:5px;
	border:1px solid #999999;
	vertical-align:middle;
}

td:font{
	font-size:12px;
}
.table-50 {
	width:50%;
  margin-right: auto;
	margin-bottom:1em;
	border-collapse:collapse;
	border:1px solid #999999;
}

/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {
	position:fixed;
	bottom:15px;
	right:15px;
}
.totop a {
	display:block;
	text-decoration:none;
}
.totop img {
	background:#7dbdb4;
}
.totop img:hover {
	background:#85d1c6;
}


/*================================================
 *  ハンバーガーボタン
 ================================================*/

/* ハンバーガーアイコン */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 25px;
  right: 20px;
  z-index: 1100;
}
.hamburger span {
  height: 3px;
  background: #333;
  border-radius: 2px;
  transition: 0.3s;
}

/* ハンバーガー開閉時のアニメーション */
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ナビゲーションの表示切替 */
.nav-menu {
  display: flex;
  gap: 15px;
}


/*================================================
 *  スマートフォン向け
 ================================================*/
@media (max-width: 768px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    background: black;
    position: absolute;
    top: 70px;
    right: 20px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 1000;
  }
  .nav-menu a {
    text-decoration: none;  /* テキストの装飾なし */
    color: white;         /* 文字色を白 */
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu ul {
    display: block;            /* フレックスボックス */
    list-style-type: none;    /* 下線なし */
  }
  .nav-menu a {
    display: block;         /* ブロック要素 */
    color: white;         /* 文字色を白 */
  }

  .hamburger {
    display: flex;
  }
  header {
    display: block;              /*  */
    font-size: 1.5rem;
  }
  header ul {
    display: block;              /*  */
  }
  .left {
    width: 100%;
  }
  .right {
    width: 0%;
  }
  .banner {
    width: 70%;
  }
  .container {
    display:block;          
    width: 100%;            /* 幅100% */
    margin-top: 20px;       /* 上余白20px */
  }
  .kouza-left {
    font-size: 1rem; 
    width: 30%;
  }
  .kouza-right {
    font-size: 1rem; 
    width: 70%;
  }
  .catch-title {
    font-size: 2rem;
  }
  .catch-title p {
    font-size: 1rem;
  }

}