/*
Theme Name: kihachi page
Author: Color Basket
Description: 縲梧悽蝣ｴ縺ｧ鮟��縲榊ｰら畑縺ｮ繝��繝槭〒縺吶€�
Version: 1.0.0
License: 縲梧悽蝣ｴ縺ｧ鮟��縲阪�縺ｿ蛻ｩ逕ｨ蜿ｯ閭ｽ縺ｧ縺吶€�
*/

html {
  font-size: calc(100vw / 32);
  min-height: 100%;
}

@media (orientation: landscape) {
  html {
    font-size: calc(100vw / 64);
  }
  @media screen and (min-width: 1920px) {
    html {
      font-size: calc(100vw / 96);
    }
  }
}

body {
  font-family: "Noto Serif JP", "貂ｸ譏取悃", "繝偵Λ繧ｮ繝取�譛� Pro W3", serif;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: justify;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
}

.serif {
  font-family: "Noto Serif JP", "貂ｸ譏取悃", "繝偵Λ繧ｮ繝取�譛� Pro W3", serif;
}

.sans {
  font-family: "Noto Sans JP", "貂ｸ繧ｴ繧ｷ繝�け", "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", sans-serif;
}

h1 {
  font-size: 2rem;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
h1::after {
  content: "";
  display: block;
  transform: translateY(-4px);
  bottom: -0.4rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 0.6rem;
  z-index: -1;
  background-image: url(./assets/img/triangle_yellow.svg);
  background-repeat: no-repeat;
  background-size: 100% 80%;
  background-position: bottom;
  width: 100%;
}

h2 {
  font-size: 2rem;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
h2::after {
  content: "";
  display: block;
  transform: translateY(-4px);
  bottom: -0.4rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 0.6rem;
  z-index: -1;
  background-image: url(./assets/img/triangle_blue.svg);
  background-repeat: no-repeat;
  background-size: 100% 80%;
  background-position: bottom;
  width: 100%;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

h4 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-family: "Noto Sans JP", "貂ｸ繧ｴ繧ｷ繝�け", "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", sans-serif;
  font-weight: 700;
}

h5 {
  font-size: 1rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

h6 {
  font-size: 1rem;
  margin-bottom: 1rem;
  font-family: "Noto Sans JP", "貂ｸ繧ｴ繧ｷ繝�け", "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", sans-serif;
  font-weight: 700;
}

/* iPhone蟇ｾ遲� */
button,
*[type="button"] {
  -webkit-appearance: none;
  border-radius: 0;
  margin: 0;
  /* background-color: #FFF; */
  border: 0px;
}

.text-outlined {
  color: #000;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff,
    1px -1px 0 #fff, 0px 1px 0 #fff, 0-1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff;
}

.custom-nav-button {
  border-color: rgba(0, 0, 0, 0) !important;
  border-radius: 50%;
}

.custom-nav-button:focus {
  outline: none;
}

.custom-navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 149, 208, 0.5%29' stroke-linecap='square' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  width: 2rem;
  height: 2rem;
}

.navbar-sns {
  line-height: 0.5;
}

.navbar-sns.navbar-brand {
  color: #3d3533;
}

.dropdown-menu {
  width: 80%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease-out;
}

.dropdown-menu.show {
  display: block;
  opacity: 1;
  pointer-events: all;
}

.navbar-nav {
  margin: 3%;
  font-size: 1.4rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.navbar-light .navbar-nav .nav-link {
  color: rgb(0, 0, 0);
}
.navbar-light:hover .navbar-nav:hover .nav-link:hover {
  color: #9a9614;
}

.top_wrapper {
  overflow: hidden;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 70%;
  background-size: cover;
  max-width: 1200px;
}

.top_bg {
  overflow: hidden;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  max-width: 100vw;
  background-image: url(./assets/img/top.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.top_title {
  width: 58%;
  top: 8%;
  left: 0%;
}
@media (orientation: landscape) {
  .top_title {
    width: 40%;
    top: 8%;
    left: 0%;
  }
}

.image_wrapper {
  height: 100vw;
  max-height: 80vh;
}

.image_photo {
  height: 100vw;
  max-height: 80vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-position: 50% 50%;
}

.image_photo_1 {
  background-image: url(./assets/img/01.jpg);
}

.image_photo_2 {
  background-image: url(./assets/img/02_history.jpg);
  background-color: lightgray;
}

.image_photo_3 {
  background-image: url(./assets/img/03_ki.jpg);
}

.image_photo_3_1 {
  background-image: url(./assets/img/03_ki.jpg);
}

.image_photo_3_2 {
  background-image: url(./assets/img/03_kaba.jpg);
}

.image_photo_3_3 {
  background-image: url(./assets/img/03_kuro.jpg);
}

.image_photo_4 {
  background-image: url(./assets/img/04_some.jpg);
  background-color: lightgray;
}

.image_photo_5 {
  background-image: url(./assets/img/05_0404-14_web.jpg);
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  border-color: black;
  border-width: 1px;
  border-style: solid;
  line-height: 50px;
  text-align: center;
  background: rgba(244, 165, 22, 0.6);
  font-size: 2rem;
}

.circle_ki {
  border-color: black;
  background: rgba(244, 165, 22, 0.7);
  color: black;
}

.circle_kaba {
  border-color: gray;
  background: rgba(113, 51, 27, 0.7);
  color: white;
}

.circle_kuro {
  border-color: black;
  background: rgba(32, 15, 12, 0.7);
  color: white;
}

.bg-triangle::after {
  content: "";
  position: absolute;
  bottom: -0.4rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 0.6rem;
  z-index: -1;
  background-image: url("./assets/img/triangle_yellow.svg");
  background-repeat: no-repeat;
  background-size: 100% 80%;
}
.bg-triangle-yellow::after {
  content: "";
  position: absolute;
  bottom: -0.4rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 0.6rem;
  z-index: -1;
  background-image: url("./assets/img/triangle_yellow.svg");
  background-repeat: no-repeat;
  background-size: 100% 80%;
}
.bg-triangle-blue::after {
  content: "";
  position: absolute;
  bottom: -0.4rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 0.6rem;
  z-index: -1;
  background-image: url("./assets/img/triangle_blue.svg");
  background-repeat: no-repeat;
  background-size: 100% 80%;
}

.bg-square-blue {
  background-color: #d2f8ff;
}

.footer {
  background-color: #a8d5ec;
}

.footer-fit-bottom {
  background-color: #a8d5ec;
  width: 100%;
  position: sticky;
  top: 100vh;
}

.footer_text_wrapper {
  font-family: "Noto Sans JP", "貂ｸ繧ｴ繧ｷ繝�け", "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", sans-serif;
}

.loader-base {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 20000;
  background: rgba(255, 255, 255, 1);
  will-change: transform, animation, position;
}

.loader-icon {
  color: #e7e01d;
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load-animation 1.3s infinite linear;
  animation: load-animation 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

@-webkit-keyframes load-animation {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
      0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
      0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load-animation {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
      0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
      0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

/* Top Bar繝励Λ繧ｰ繧､繝ｳ縺ｮ蠕悟ｧ区忰 */
.after-top-bar {
  position: fixed;
  top: 43px !important;
}

#tpbr_box {
  font-family: "Noto Sans JP", "貂ｸ繧ｴ繧ｷ繝�け", "繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3", sans-serif !important;
}

/* Contact Form 7 繝ｬ繧､繧｢繧ｦ繝亥ｴｩ繧悟ｯｾ蠢� */
.wpcf7 input,
.wpcf7 textarea {
  max-width: 80vw;
}