@charset "UTF-8";
/*
  Theme Name:twentytwentyone_child
  Template:twentytwentyone
  Version:1.4
*/
/*========= parts ===============*/
.m-b-5 {
  margin-bottom: 5rem;
}

.bold {
  font-weight: bold;
}

.left {
  text-align: left;
}

.span-txt {
  font-weight: 600;
  font-size: 1.1em;
}

.t-center {
  text-align: center;
}

.f-15 {
  font-size: 1.5em;
}

.m-auto {
  margin: auto;
}

.link-btn {
  margin-top: 3em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/*========= #single ===============*/
.type-post .pankuzu ul {
  padding-left: 0;
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.type-post .pankuzu ul li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 1em;
}
.type-post .pankuzu ul li a {
  font-weight: 600;
  text-decoration: none;
  color: #87BF49;
}
.type-post .pankuzu ul i {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.type-post .entry-content {
  background-color: rgba(255, 255, 255, 0.5019607843);
  padding: 30px 0;
  border-radius: 20px;
  margin: 3em;
}

/*========= #category ===============*/
.cat-list-wrap h1 {
  margin-top: 2em;
  font-size: 3em;
}
.cat-list-wrap h2 {
  font-size: 2em;
}
.cat-list-wrap h2 a {
  text-decoration: none;
}

/*========= #page ===============*/
#page {
  background: rgba(219, 159, 217, 0.4392156863);
}

/*========= left-anime ===============*/
/*全共通*/
.bgextend {
  -webkit-animation-name: bgextendAnimeBase;
          animation-name: bgextendAnimeBase;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@-webkit-keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*中の要素*/
.bgappear {
  -webkit-animation-name: bgextendAnimeSecond;
          animation-name: bgextendAnimeSecond;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*左から右*/
.bgLRextend::before {
  -webkit-animation-name: bgLRextendAnime;
          animation-name: bgLRextendAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffc0cb;
  /*伸びる背景色の設定*/
}

@-webkit-keyframes bgLRextendAnime {
  0% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50.001% {
    -webkit-transform-origin: right;
            transform-origin: right;
  }
  100% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@keyframes bgLRextendAnime {
  0% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50.001% {
    -webkit-transform-origin: right;
            transform-origin: right;
  }
  100% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger {
  opacity: 0;
}

/*========= raindrop ===============*/
.sns {
  min-width: 100px;
  position: absolute;
  left: 1%;
  top: 8%;
}
.sns a img {
  width: 35px;
  margin: 0.2em;
}

@media screen and (max-width: 1000px) {
  .sns {
    z-index: 998;
    position: absolute;
    right: auto;
    top: 0.12%;
  }
  .sns a img {
    margin: 0.2em;
  }
}
@media screen and (max-width: 500px) {
  .sns {
    position: absolute;
    right: 79%;
    top: 0.12%;
  }
  .sns a img {
    width: 25px;
    margin: 0.2em;
  }
}
/*スクロールダウン全体の場所*/
.scrolldown2 {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  left: 50%;
  top: 8%;
}

/*Scrollテキストの描写*/
.scrolldown2 span {
  /*描画位置*/
  position: absolute;
  left: 10px;
  bottom: 10px;
  /*テキストの形状*/
  color: #ffc0cb;
  font-weight: 600;
  font-size: 1em;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: -6.5px;
  /*丸の形状*/
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffc0cb;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  -webkit-animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
          animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@-webkit-keyframes circlemove {
  0% {
    bottom: 100px;
  }
  100% {
    bottom: -5px;
  }
}
@keyframes circlemove {
  0% {
    bottom: 100px;
  }
  100% {
    bottom: -5px;
  }
}
/*上から下にかけて丸が透過→不透明→透過する*/
@-webkit-keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cirlemovehide {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
/* 線の描写 */
.scrolldown2:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: 0;
  /*線の形状*/
  width: 2px;
  height: 100px;
  background: #ffc0cb;
}

/*========= slide ===============*/
.slider-wrapper {
  position: relative;
  top: 0;
  margin: 0 !important;
}
.slider-wrapper #slider {
  width: 100%;
  height: 100vh;
}

/*========= menu ===============*/
@media only screen and (min-width: 822px) {
  :root {
    --responsive--alignwide-width: none !important;
  }
}
#masthead {
  border-bottom: solid 4px #87BF49;
  position: fixed;
  /*fixedを設定して固定*/
  width: 100vw;
  /*横幅指定*/
  z-index: 998;
  /*最前面へ*/
  /*以下はレイアウトのためのCSS*/
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(255, 255, 255, 0.8117647059);
  color: #fff;
  text-align: center;
  padding: 10px !important;
}

/*fixedでブロックがなくなるのではじめの要素のトップに余白を持たせる*/
section#area-1 {
  padding-top: 100px;
}

nav {
  width: 100%;
}
nav #g-navi-1 ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  list-style: none;
  margin-bottom: 0;
}
nav #g-navi-1 ul li {
  width: 25%;
  display: contents !important;
}
nav #g-navi-1 ul li a {
  width: 100%;
  height: 100%;
  text-decoration: none;
  font-size: 1.3em;
  color: #87BF49;
  font-weight: 600;
}
nav #g-navi-1 ul li a i {
  padding-right: 0.5em;
}
nav .openbtn1 {
  display: none;
}

/*==ふわっと出現させるためのCSS*/
/*　上に上がる動き　*/
#masthead.UpMove {
  position: fixed;
  width: 100%;
  -webkit-animation: UpAnime 0.5s forwards;
          animation: UpAnime 0.5s forwards;
}

@-webkit-keyframes UpAnime {
  from {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}

@keyframes UpAnime {
  from {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}
/*　下に下がる動き　*/
#masthead.DownMove {
  position: fixed;
  width: 100%;
  -webkit-animation: DownAnime 0.5s forwards;
          animation: DownAnime 0.5s forwards;
}

@-webkit-keyframes DownAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes DownAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/*========= content-item ===============*/
#company {
  background-size: cover;
  position: relative;
}
#company #hathol-title {
  font-size: 45px;
  padding: 10px 0;
  text-align: center;
}
#company #hathol-title::before {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  position: absolute;
  content: "Hathol Labo";
  font-size: 2em;
  right: 3%;
  bottom: 5%;
  color: rgba(255, 255, 255, 0.3019607843);
}

#information {
  background-size: cover;
  background-color: rgba(219, 159, 217, 0.3411764706);
  position: relative;
}
#information #info-title {
  width: 70%;
  margin: auto;
  position: relative;
  padding: 0.3em;
  text-align: center;
}
#information #info-title::before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: "";
  border-radius: 3px;
  background: #87BF49;
}

#item {
  background-size: cover;
  position: relative;
}
#item #item-title {
  width: 70%;
  margin: auto;
  position: relative;
  padding: 0.3em;
  text-align: center;
}
#item #item-title::before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: "";
  border-radius: 3px;
  background: #87BF49;
}

#jca {
  background-size: cover;
  background-color: rgba(219, 159, 217, 0.3411764706);
  position: relative;
}
#jca #jca-title {
  width: 70%;
  margin: auto;
  position: relative;
  padding: 0.3em;
  text-align: center;
}
#jca #jca-title::before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: "";
  border-radius: 3px;
  background: #87BF49;
}

#faq {
  position: relative;
}
#faq #faq-title {
  width: 70%;
  margin: auto;
  position: relative;
  padding: 0.3em;
  text-align: center;
}
#faq #faq-title::before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: "";
  border-radius: 3px;
  background: #87BF49;
}

#contact {
  position: relative;
  background: rgba(219, 159, 217, 0.3411764706);
}
#contact #contact-title {
  margin: auto;
  position: relative;
  padding: 0.3em;
  text-align: center;
}
#contact #contact-title::before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: "";
  border-radius: 3px;
  background: #87BF49;
}

/*========= content-item ===============*/
#all-wrap {
  background-image: url(/wp-content/themes/twentytwentyone_child/images/dairiseki-bk.webp);
  background-attachment: fixed;
  margin: 0 auto;
}
#all-wrap .single {
  padding: 50px 0;
  /*========= SECTION ===============*/
  /*========= SECTION ===============*/
  /*========= SECTION ===============*/
  /*========= SECTION ===============*/
  /*========= SECTION ===============*/
  /*========= SECTION ===============*/
}
#all-wrap .single #company-wrap {
  padding: 3em 0;
  width: 80%;
  margin: auto;
  text-align: center;
}
#all-wrap .single #company-wrap .hat-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#all-wrap .single #company-wrap .hat-wrap .first-title {
  margin-bottom: 0 !important;
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Hiragino Mincho ProN", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
  padding: 1em 0 0.5em;
}
#all-wrap .single #company-wrap .hat-wrap .first-title span {
  font-size: 2em;
  background-image: -webkit-linear-gradient(135deg, #e1ce08 0%, #030303 37%, #000000 47%, #e1ce08 50%, #000000 63%, #c4ba57 63%, #000000 100%);
  background-image: -webkit-linear-gradient(315deg, #e1ce08 0%, #030303 37%, #000000 47%, #e1ce08 50%, #000000 63%, #c4ba57 63%, #000000 100%);
  background-image: linear-gradient(135deg, #e1ce08 0%, #030303 37%, #000000 47%, #e1ce08 50%, #000000 63%, #c4ba57 63%, #000000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#all-wrap .single #company-wrap .hat-wrap a img {
  width: 80%;
  margin: auto;
}
#all-wrap .single #company-wrap .hat-wrap p {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 500px;
}
#all-wrap .single #company-wrap .erth-content {
  background-color: rgba(255, 255, 255, 0.4588235294);
  margin: 4em 0;
}
#all-wrap .single #company-wrap .erth-content .hathor-logo {
  margin-bottom: 2em;
}
#all-wrap .single #company-wrap .erth-content #sp {
  display: none;
}
#all-wrap .single #company-wrap .erth-content #pc {
  display: block;
}
#all-wrap .single #company-wrap .erth-content .first-title {
  margin-bottom: 0 !important;
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Hiragino Mincho ProN", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
  padding: 1em 0 0.5em;
}
#all-wrap .single #company-wrap .erth-content .first-title span {
  font-size: 2em;
  background-image: -webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #e1ce08 47%, #e1ce08 50%, #e1ce08 63%, #e1ce08 63%, #b8751e 100%);
  background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #e1ce08 47%, #e1ce08 50%, #e1ce08 63%, #e1ce08 63%, #b8751e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#all-wrap .single #company-wrap .erth-content .menu-contents {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0.5em;
}
#all-wrap .single #company-wrap .erth-content .menu-contents span {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-width: 400px;
}
#all-wrap .single #company-wrap .erth-content .menu-contents span .a-content-1 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  color: #333;
  font-size: 2em;
  background-size: cover;
  border-radius: 10%;
}
#all-wrap .single #company-wrap .erth-content .menu-contents span .a-content-1 img {
  border-radius: 20px;
  border-radius: 10px;
}
#all-wrap .single #company-wrap .erth-content .menu-contents .a-content-2 p {
  padding: 1em;
  text-align: left;
}
#all-wrap .single #company-wrap .video-content .video-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
#all-wrap .single #company-wrap .video-content .video-box iframe {
  width: 80%;
  height: 500px;
}
#all-wrap .single #company-wrap .video-content .video-box a {
  color: #ffa500;
  font-weight: bold;
  font-size: 1.5rem;
  margin-top: 1rem;
  text-decoration: none;
}
#all-wrap .single #company-wrap .pickup-wrap {
  margin: 6em 0;
}
#all-wrap .single #company-wrap .pickup-wrap h2 {
  margin-bottom: 2em;
  position: relative;
  padding: 0.3em;
  text-align: center;
}
#all-wrap .single #company-wrap .pickup-wrap h2::before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: "";
  border-radius: 3px;
  background: #87BF49;
}
#all-wrap .single #company-wrap .pickup-wrap .pickup-item-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}
#all-wrap .single #company-wrap .pickup-wrap .pickup-item-wrap #slide-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding-left: 0;
}
#all-wrap .single #company-wrap .pickup-wrap .pickup-item-wrap img {
  width: 75%;
  /*スライダー内の画像を横幅100%に*/
  margin: auto;
  height: auto;
  border: #87BF49 4px solid;
}
#all-wrap .single #company-wrap .pickup-wrap .pickup-item-wrap .slick-slide {
  margin: 0 10px;
}
#all-wrap .single #company-wrap .pickup-wrap .pickup-item-wrap .slick-prev,
#all-wrap .single #company-wrap .pickup-wrap .pickup-item-wrap .slick-next {
  position: absolute;
  /*絶対配置にする*/
  top: 42%;
  cursor: pointer;
  /*マウスカーソルを指マークに*/
  outline: none;
  /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666;
  /*矢印の色*/
  border-right: 2px solid #666;
  /*矢印の色*/
  height: 15px;
  width: 15px;
}
#all-wrap .single #company-wrap .pickup-wrap .pickup-item-wrap .slick-prev {
  /*戻る矢印の位置と形状*/
  left: -1.5%;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
#all-wrap .single #company-wrap .pickup-wrap .pickup-item-wrap .slick-prev::before {
  color: #666 !important;
  content: none !important;
}
#all-wrap .single #company-wrap .pickup-wrap .pickup-item-wrap .slick-next {
  /*次へ矢印の位置と形状*/
  right: -1.5%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
#all-wrap .single #company-wrap .pickup-wrap .pickup-item-wrap .slick-next::before {
  color: #666 !important;
  content: none !important;
}
#all-wrap .single #company-wrap .pickup-wrap .pickup-item-wrap .slick-dots {
  display: none !important;
}
#all-wrap .single #company-wrap .pickup-wrap .pickup-item-wrap .slick-dots button {
  display: none !important;
}
#all-wrap .single #information-wrap {
  padding: 3em 0;
  width: 80%;
  margin: auto;
  text-align: center;
}
#all-wrap .single #information-wrap .blog-content {
  max-height: 300px;
  overflow: scroll;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 1em;
  border-radius: 20px;
}
#all-wrap .single #information-wrap .blog-content a {
  color: #333;
  font-weight: bold;
  text-decoration: none;
  font-family: "Kaisei Decol", serif !important;
  margin: 1em 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  width: 60%;
  border-bottom: solid #87BF49 2px;
  padding-top: 2em;
}
#all-wrap .single #information-wrap .blog-content a .blog-day {
  width: 200px;
  margin-right: 4em;
}
#all-wrap .single #information-wrap .blog-content a:hover {
  color: darkseagreen;
}
#all-wrap .single #information-wrap .blog-content img {
  margin-bottom: 1em;
  height: 200px !important;
  width: 200px !important;
}
#all-wrap .single #information-wrap .twitter-timeline {
  margin-left: auto;
  margin-right: auto;
  display: block !important;
}
#all-wrap .single #items-wrap {
  padding: 3em 0;
  width: 80%;
  margin: auto;
  text-align: center;
}
#all-wrap .single #items-wrap p {
  position: relative;
  margin-bottom: 7em;
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.4588235294);
}
#all-wrap .single #items-wrap p::before {
  -webkit-box-shadow: 20px 20px 40px -5px rgba(0, 0, 0, 0.4784313725);
          box-shadow: 20px 20px 40px -5px rgba(0, 0, 0, 0.4784313725);
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(255, 192, 203, 0.3607843137);
  left: 4%;
  top: 9%;
}
#all-wrap .single #items-wrap .use-item-wrap {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
#all-wrap .single #items-wrap .use-item-wrap .img-box-1 {
  -webkit-box-shadow: 20px 20px 40px -5px rgba(0, 0, 0, 0.4784313725);
          box-shadow: 20px 20px 40px -5px rgba(0, 0, 0, 0.4784313725);
  position: relative;
  width: 100%;
  height: 700px;
  margin-bottom: 4em;
}
#all-wrap .single #items-wrap .use-item-wrap img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
#all-wrap .single #items-wrap .use-item-wrap .item-txt {
  margin-left: 2em;
}
#all-wrap .single #items-wrap .use-item-wrap .item-txt p {
  position: relative;
  text-align: left;
  max-width: 800px;
  height: 100%;
  margin: 0 auto 4em;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 0.3em;
  padding: 1em;
  font-size: 0.9em;
  margin-bottom: 6em;
}
#all-wrap .single #items-wrap .use-item-wrap .item-txt p::before {
  -webkit-box-shadow: 20px 20px 40px -5px rgba(0, 0, 0, 0.4784313725);
          box-shadow: 20px 20px 40px -5px rgba(0, 0, 0, 0.4784313725);
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(255, 192, 203, 0.3607843137);
  left: 4%;
  top: 9%;
}
#all-wrap .single #items-wrap .use-item-wrap .img-box-2 {
  position: relative;
  text-align: right;
  margin: 4em 0px;
}
#all-wrap .single #items-wrap .use-item-wrap .img-box-2 img {
  margin-right: 9em;
  width: 300px;
  height: 300px;
}
#all-wrap .single #items-wrap .use-item-wrap .img-box-2 h3 {
  position: absolute;
  top: 20%;
  left: 50%;
}
#all-wrap .single #items-wrap .use-item-wrap .img-box-2 p {
  width: 500px;
  position: absolute;
  top: 50%;
  right: 40%;
}
#all-wrap .single #items-wrap .use-item-wrap .img-box-3 {
  position: relative;
  text-align: left;
  margin: 4em 0px;
}
#all-wrap .single #items-wrap .use-item-wrap .img-box-3 h3 {
  position: absolute;
  top: 20%;
  right: 50%;
}
#all-wrap .single #items-wrap .use-item-wrap .img-box-3 img {
  margin-left: 9em;
  width: 300px;
  height: 300px;
}
#all-wrap .single #items-wrap .use-item-wrap .img-box-3 p {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 40%;
}
#all-wrap .single #jca-wrap {
  padding: 3em 0;
  width: 80%;
  margin: auto;
  text-align: center;
}
#all-wrap .single #jca-wrap .jca-info-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-1 {
  margin-bottom: 5em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-1 .img-wrap {
  max-height: 300px;
  -webkit-box-shadow: 20px 20px 40px -5px rgba(0, 0, 0, 0.4784313725);
          box-shadow: 20px 20px 40px -5px rgba(0, 0, 0, 0.4784313725);
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-1 .img-wrap img {
  width: 300px;
  height: 300px;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-1 .jca-txt {
  margin-left: 3em;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-1 .jca-txt h3 {
  text-align: left;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-1 .jca-txt p {
  max-width: 650px;
  border-left: #87BF49 dotted 2px;
  padding: 0 2em;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-2 .img-wrap {
  max-height: 300px;
  -webkit-box-shadow: 20px 20px 40px -5px rgba(0, 0, 0, 0.4784313725);
          box-shadow: 20px 20px 40px -5px rgba(0, 0, 0, 0.4784313725);
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-2 .img-wrap img {
  width: 300px;
  height: 300px;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-2 .jca-txt {
  margin-right: 3em;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-2 .jca-txt h3 {
  text-align: right;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-2 .jca-txt p {
  max-width: 650px;
  border-right: #87BF49 dotted 2px;
  padding: 0 2em;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-3 {
  position: relative;
  text-align: left;
  margin: 4em 0px;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-3 h3 {
  position: absolute;
  top: 20%;
  right: 50%;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-3 img {
  margin-left: 5em;
  width: 300px;
  height: 300px;
}
#all-wrap .single #jca-wrap .jca-info-wrap .img-box-3 p {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 40%;
}
#all-wrap .single #faq-wrap {
  padding: 3em 0;
  width: 80%;
  margin: auto;
  text-align: center;
}
#all-wrap .single #faq-wrap #flush-headingOne,
#all-wrap .single #faq-wrap #flush-headingTwo,
#all-wrap .single #faq-wrap #flush-headingThree {
  margin-bottom: 0 !important;
}
#all-wrap .single #faq-wrap .jca-banner {
  width: 800px;
  height: 200px;
}
#all-wrap .single #faq-wrap .a-box {
  margin-top: 2em;
}
#all-wrap .single #faq-wrap .a-box a {
  margin-top: 2em;
  text-decoration: none;
  padding: 0.5em 2em;
  border: solid #333;
  background-color: transparent;
  text-align: center;
  color: #333;
}
#all-wrap .single #contact-wrap {
  width: 80%;
  margin: auto;
  text-align: center;
}

/*========= SECTION ===============*/
footer {
  padding-bottom: 0 !important;
  background: #fff;
}
footer h5 {
  font-size: 0.8em;
  color: #87BF49;
  margin-top: 1em !important;
  margin-bottom: 1em !important;
}

/*========= contact-form ===============*/
form label {
  font-weight: 600;
}
form #contact-items {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
form #contact-items label {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  font-weight: 600;
  width: 50%;
  min-height: 150px;
}
form #contact-items label input {
  width: 80px;
}

/*========= BTN ===============*/
/*その他と主な共通部分は省略*/
a.btn-flat {
  position: absolute;
  overflow: hidden;
  padding: 1em 4em;
  color: #000;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.8117647059);
  font-weight: 600;
}

a.btn-flat span {
  position: relative;
}

a.btn-flat span i {
  padding-right: 0.3em;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #87BF49;
}

a.btn-flat:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

/*========= fade ===============*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #fff;
  text-align: center;
  display: none;
}

/* Loading画像中央配置*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width: 50%;
}

@media screen and (max-width: 1000px) {
  #splash_logo img {
    width: 100%;
  }
}/*# sourceMappingURL=style.css.map */