/* ==========================
   色の設定
   ========================== */
:root {
  --bordercolor: #555;
  --namecolor: rgb(48, 99, 0);
  --namefont: rgb(0, 255, 174);
  --breadcolor: #ff1d1d;
  --backcolor: #000000;
}

/* ==========================
     基本スタイル
     ========================== */
body {
  margin: 0;
}
span {
  font-family: "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", "メイリオ",
    "Meiryo", "ＭＳ ゴシック", sans-serif;
}
#googlemap {
  color: blue;
}

/* ==========================
     ヘッダー
     ========================== */
header {
  background-color: #333;
  padding: 2% 0 0 2%;
}
header .logo img {
  width: 30%;
}

@media (max-width: 550px) {
  header .logo img {
    width: 60%;
  }
  .top_img img,
  .top_img {
    background-size: 100% !important;
  }
}

header .pc {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
header .pc li {
  font-size: 1.5rem;
  font-weight: bold;
  list-style: none;
  margin: 0 3%;
}
header .pc li a {
  text-decoration: none;
  color: #fff;
  font-family: inherit;
}
header .pc li:hover a {
  color: rgb(92, 207, 241);
}

/* ==========================
     ハンバーガーメニュー
     ========================== */
.input-hidden {
  display: none;
}
.hamburgerswitch {
  cursor: pointer;
  position: absolute;
  right: 3%;
  top: 0;
  z-index: 9999;
  width: 4em;
  height: 6em;
}
#hamburger-demo1:checked ~ .hamburgerswitch {
  position: fixed;
}

.hamburger-switch-line1,
.hamburger-switch-line1:before,
.hamburger-switch-line1:after {
  width: 25px;
  height: 3px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 0.3s;
  content: "";
}

.hamburger-switch-line1 {
  transform: translate(-50%, -100%);
}
.hamburger-switch-line1:before {
  transform: translate(-50%, -300%);
}
.hamburger-switch-line1:after {
  transform: translate(-50%, 200%);
}

#hamburger-demo1:checked ~ .hamburgerswitch .hamburger-switch-line1 {
  width: 0;
}
#hamburger-demo1:checked ~ .hamburgerswitch .hamburger-switch-line1:before {
  transform: rotate(45deg) translate(-40%, 325%);
}
#hamburger-demo1:checked ~ .hamburgerswitch .hamburger-switch-line1:after {
  transform: rotate(-45deg) translate(-40%, -325%);
}

.hamburgermenuwrap {
  position: fixed;
  background: #333;
  padding: 5em 3% 2em;
  z-index: 9998;
  transition: 0.3s;
  overflow-y: scroll;
  top: 0;
  left: 100%;
  width: 70%;
  border-radius: 10%;
}

#hamburger-demo1:checked ~ .hamburgermenuwrap {
  left: 30%;
}
#hamburger-demo1:checked ~ .hamburgercover {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9997;
  background: rgba(3, 3, 3, 0.5);
  display: block;
}

@media (min-width: 450px) {
  .hamburgermenubox {
    display: none;
  }
}
@media (max-width: 451px) {
  header {
    padding: 5%;
    margin-bottom: 5%;
  }
  .pc {
    display: none !important;
  }
  .text p {
    font-size: small !important;
    padding: 0.5em 2em !important;
  }
}

/* ==========================
     フッター
     ========================== */
footer {
  position: relative;
  color: #fff;
  font-family: inherit;
}
footer a {
  text-decoration: none;
  color: #fff;
}
footer a:hover {
  color: rgb(92, 207, 241);
}
footer .primary {
  padding: 40px 20px;
  background: #333;
}
footer .secondary {
  display: flex;
  padding: 40px 20px;
  background: #222;
}
footer .copyright {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  background-color: black;
}

@media (max-width: 451px) {
  footer .navi li {
    display: block;
    margin-bottom: 1em;
  }
}

/* 全体の背景設定 */
body {
  margin: 0;
}

/* 枠を作る */
.container {
  background-color: #222;
  padding: 20px;
  max-width: 900px;
  width: 90%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: white;
  margin: 0 auto;
}

/* パンくずリスト */
.breadcrumb h1 {
  color: #fff;
  background-color: #444;
  padding: 1% 0;
}
.breadcrumb ul {
  list-style: none;
  padding: 0;
  display: flex;
}

.breadcrumb li {
  margin-right: 10px;
  color: #fff;
}

.breadcrumb a {
  text-decoration: none;
  color: white;
  background-color: #444;
  padding: 5px 10px;
  border-radius: 5px;
}

.breadcrumb li:not(:last-child)::after {
  content: "▶";
  margin-left: 10px;
  color: white;
}

/* コンテンツのスタイル */

.tatenaga {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
h2 {
  width: 100%;
  background-color: #444;
  margin: 0 0 0 -10%;
  padding: 10% 10%;
  text-align: center;
}
h3 {
  width: 100%;
  margin: 0 0 0 -10%;
  padding: 10% 10%;
  text-align: center;
}
img.bira {
  width: 50%;
  height: auto;
}
img.instagram,
img.X,
img.mail {
  width: 10%;
  height: auto;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}
a {
  color: #fff;
}
.text {
  overflow-wrap: normal;
  margin: 0 0 1% -1%;
  width: 90%;
  word-break: normal;
  padding: 1% 5%;
  background-color: dimgrey;
}
@media (max-width: 1521px) {
}
@media (max-width: 780px) {
  .content {
    display: none;
  }
  img.bira {
    width: 100%;
  }
}

/* ==========================
     その他
     ========================== */
.back {
  margin: 0;
  background: url(../svg/ハニカム.svg) repeat;
  background-position: center;
  background-color: var(--backcolor);
  padding-bottom: 10px;
}