/*    
Theme Name: UchiikeKogyo202603
Theme URI: https://www.uchi-ike.co.jp/
Description: None
Author: 株式会社内池工業
Author URI: https://www.uchi-ike.co.jp/
*/

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* @group Common ======================================================== */

@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed !important;
  }
}

/* opening */
.start {
  background-color: #fffae8;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bgAnime 1s linear 2s forwards;
}
.start p {
  width: 300px;
  height: 149px;
  text-align: center;
  line-height: 1.2;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 7;
}
.start p img {
  width: 300px;
  height: 149px;
  animation: textAnime1 1s linear forwards;
}
 
@keyframes textAnime1 {
    0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes bgAnime {
  0%{ opacity: 1; }
 99%{ opacity: 0; }
100%{ opacity: 0; display: none !important; }
}


@media screen and (max-width : 768px) { /* Smart Phone*/
  .start p,
  .start p img {
    width: 200px;
    height: 100px;
  }
}


/*　リセットCSS
--------------------------------------------- */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration : none;
  color: #47210D;
  border: none;
  outline: none;
  transition: .3s;
}
a:hover {
  transition: .3s;
}
a img {
  transition: .3s;
}
a img:hover {
  opacity: .5;
  transition: .3s;
}

ul, ol {
list-style : none;
margin: 0;
padding: 0;
}


/* @end */

/* @group HTML */
html {
  font-family: 'Noto Sans JP', sans-serif;
  font-size : 1rem;
  line-height: 1.75em;
  color: #47210D;
  padding: 0;
  margin: 0;
  position: relative;
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  font-size-adjust: none;
  -webkit-font-size-adjust: none;
}
h1,h2,h3,h4,h5,h6 { font-size: 1rem; }
/* @end */

main {
  overflow: hidden;
}

.fadein {
  opacity : 0;
  transform : translate(0, 30px);
  transition : all 1s;
}
 
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}



/* @group 1024px PC ======================================================== */
@media screen and (min-width : 767px) { /* PC */
  .wrap {
    width: 80%;
    min-width: 1100px;
    margin: 0 auto;
  }
  .sp {
    display: none;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  .wrap {
    width: 85%;
    margin: 0 auto;
  }
  .pc {
    display: none;
  }
 }


/* ----------------------------------------------------------
 header
---------------------------------------------------------- */
header {
  position: fixed;
  z-index: 10000;
  width: 100%;
}
header h1 a {
  display: block;
}
header h1 img {
  width: 100%;
}

@media screen and (min-width : 767px) { /* PC */
  header {
    padding: 1.5rem 1rem 0 1rem;
  }
  header > nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  header > nav > h1 {
    width: 18%;
    margin-right: auto;
  }
  header > nav > ul {
    display: flex;
    align-items: center;
    margin-right: 1rem;
  }
  header > nav > ul li {
    margin-right: 1em;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
  }
  header > nav > ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em 0 0.25em 0;
  }
  header > nav > ul li a:hover {
    color: #CB6506;
  }
  header > nav > ul li:last-child a {
    padding: 0.5em 1em 0.25em 1em;
    border-radius: 2em;
    background-color: #47210D;
    color: #ffffff;
  }
  header > nav > ul li:last-child a:hover {
    background-color: #CB6506;
  }
}

@media screen and (max-width : 768px) {  /* SP */
  header {
    padding: 0.75rem;
  }
  header > nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  header > nav h1 {
    width: 40%;
  }
  header > nav > ul {
    display: none;
  }
}


/* Gloval Nav
--------------------------------------------- */
#nav-toggle {
  position: relative;
  top: 0;
  right: 0;
}
#nav-toggle div {
  display: flex;
  justify-content: center;
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0;
  border-radius: 100%;
  background: linear-gradient(to right, #8dd4fd, #8edc32);
  text-align: center;
  transition: 0.6s;
  cursor: pointer;
}
#nav-toggle div:hover {
  opacity: 1;
  transition: 0.6s;
}
#nav-toggle div span {
  display: block;
  position: absolute;
  left: 30%;
  width: 40%;
  height: 3px;
  background: #ffffff;
  transition: transform .6s ease-in-out, top .5s ease;
}
#nav-toggle div span:nth-child(1) { top: 21px; }
#nav-toggle div span:nth-child(2) { top: 29px; }
#nav-toggle div span:nth-child(3) { top: 37px; }
#gloval-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
  text-align: center;
  transition: opacity .6s ease, visibility .6s ease;
}
 #gloval-nav nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: rgba(249,248,243,0.95);
}
#gloval-nav nav h2 {
  border-radius: 2em;
  margin-right: 3rem;    
  padding: 0 1em;
  font-size: 2rem;
  font-weight: bold;
  background: linear-gradient(to right, #F4A000, #C5CE00);
  color: #ffffff;
}
#gloval-nav nav ul {
  list-style: none;
  width: 40%;
  padding-left: 3rem;
  background-color: transparent;
}
#gloval-nav nav ul li {
  opacity: 0;
  transform: translateX(200px);
  width: 100%;
  margin: 0 2%;
  font-size: 1.25rem;
  text-align: left;
  transition:  transform .6s ease, opacity .2s ease;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: bold;
}
#gloval-nav nav ul li:nth-child(1) { transition-delay: .15s; }
#gloval-nav nav ul li:nth-child(2) { transition-delay: .3s; }
#gloval-nav nav ul li:nth-child(3) { transition-delay: .45s; }
#gloval-nav nav ul li:nth-child(4) { transition-delay: .6s; }
#gloval-nav nav ul li:nth-child(5) { transition-delay: .75s; }
#gloval-nav nav ul li:nth-child(6) { transition-delay: .9s; }
#gloval-nav nav ul li a svg {
  display: none;
}
#gloval-nav nav ul li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.5rem 0;
  text-decoration: none;
  transition: .6s ease;
}
#gloval-nav nav ul li a:hover {
  transition: .3s;
  opacity: .6;
}
#gloval-nav nav ul li a span {
  padding-left: 1em;
  color: #CB6506;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1rem;
}

/* open */
.open { overflow: hidden; }
.open #nav-toggle {
  z-index: 999;
}
.open #nav-toggle div:after {
  display: none;
  transition: 0.6s;
}
.open #nav-toggle div span { background: #ffffff; }
.open #nav-toggle div span:nth-child(1) {
  top: 29px;
  transform: rotate(45deg);
}
.open #nav-toggle div span:nth-child(2) {
  display: none;
}
.open #nav-toggle div span:nth-child(3) {
  top: 29px;
  transform: rotate(-45deg);
}
.open #gloval-nav {
  visibility: visible;
  opacity: 1;
}
.open #gloval-nav nav ul li {
  opacity: 1;
  transform: translateX(0);
  transition:  transform 1s ease, opacity .9s ease;
}
@media screen and (max-width : 768px) { /* SP */
  #gloval-nav nav {
    flex-direction: column;
  }
  #gloval-nav nav h2 {
    margin-right: 0;
    margin-bottom: 2rem;
  }
  #gloval-nav nav ul {
    width: 90%;
    margin: 0 auto;
    padding-left: 0;
    border-left: 0;
  }
  #gloval-nav nav ul li a {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    font-size: 1rem;
    text-align: center;
  }
}


/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
footer {
  position: relative;
  background-color: #F9F8F3;
  padding: 2rem 0;
}
body.page footer:before,
body.single footer:before,
body.archive footer:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 200px;
  background-color: #ffffff;
}
footer section.contact {
  position: relative;
  margin: 1rem auto;
  padding: 0;
}
footer .contact div.wrap .contactbox {
  margin: 1rem auto 2rem auto;
  padding: 2rem 0 1rem 0;
  background-color: #D4CCC4;
  text-align: center;
}
footer .contact div.wrap .contactbox h2.title span {
  color: #ffffff;
  font-size: 5rem;
}
footer .contact div.wrap .contactbox {
  margin: 0 auto;
}
footer .contact div.wrap .contactbox ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 80%;
  margin: 2rem auto;
}
footer .contact div.wrap .contactbox ul li {
  width: calc((100% - 2rem) / 2);
  margin: 0 0.5rem 1rem 0.5rem;
}
footer .contact div.wrap .contactbox ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  width: 100%;
  height: 3rem;
  border-radius: 2em;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: bold;
}
footer .contact div.wrap .contactbox ul li:nth-child(1) a {
  background-color: #00843d;
}
footer .contact div.wrap .contactbox ul li:nth-child(1) a:before {
  content: "";
  display: block;
  width: 1.75em;
  height: 1.75em;
  background: url(images/icon-yoyaku.svg) no-repeat center center / contain;
  margin-right: 0.5em;
}
footer .contact div.wrap .contactbox ul li:nth-child(2) {
  margin-left: auto;
}
footer .contact div.wrap .contactbox ul li:nth-child(2) a {
  background-color: #F4A000;
  font-size: 1.35rem;
}
footer .contact div.wrap .contactbox ul li:nth-child(2) a:before {
  content: "";
  display: block;
  width: 1.25em;
  height: 1.5em;
  background: url(images/icon-tel.svg) no-repeat center center / contain;
  margin-right: 0.5em;
}
footer .contact div.wrap .contactbox ul li:nth-child(3) a {
  background-color: #C5CE00;
  transition: .3s;
}
footer .contact div.wrap .contactbox ul li:nth-child(3) a:before {
  content: "";
  display: block;
  width: 1.75em;
  height: 1.5em;
  background: url(images/icon-mail.svg) no-repeat center center / contain;
  margin-right: 0.5em;
}
footer .contact div.wrap .contactbox ul li a:hover {
  background-color: #47210D;
  transition: .3s;
}
footer .contactbox + ul {
  display: flex;
  justify-content: space-between;
  width: 70%;
  margin: 1rem auto;
}
footer .contactbox + ul li {
  width: 32%;
}
footer .contactbox + ul li a,
footer .contactbox + ul li a img {
  width: 100%;
}
footer nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 100px;
  padding: 0 2rem;
}
footer nav p {
  font-weight: bold;
}
footer nav p small {
  display: block;
  font-size: 0.8rem;
}
footer nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 40em;
  margin-left: auto;
  margin-right: 1rem;
}
footer nav ul li {
  margin-left: 1em;
  font-size: 0.9rem;
  font-weight: bold;
}
footer nav ul li a:hover {
  opacity: .5;
}

@media screen and (min-width : 767px) { /* PC */
  footer .contact div {
    width: 70%;
    min-width: 800px;
  }
  footer div + ul {
    min-width: 800px;
  }
  footer .contact div.wrap .contactbox ul li:nth-child(1) {
    margin: 0 20% 1rem 20%;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  footer {
    position: relative;
    padding-bottom: 4rem;
  }
  footer .contact div.wrap {
    width: 90%;
  }
  footer .contact div.wrap .contactbox {
    padding: 2rem 1rem !important;
  }
  footer .contact div.wrap .contactbox h2.title span {
    font-size: 16vw;
  }
  footer .contact div.wrap .contactbox h2 + p {
    text-align: left;
  }
  footer .contact div.wrap .contactbox ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 0;
  }
  footer .contact div.wrap .contactbox ul li {
    margin: 0 0 1rem 0;
    width: 100%;
  }
  footer .contact div.wrap .contactbox ul li a {
    font-size: 4.5vw;
  }
  footer .contact div.wrap .contactbox ul li:nth-child(2) a {
    font-size: 6vw;
  }
  footer .contact div.wrap .contactbox + ul {
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }
  footer .contact div.wrap .contactbox + ul li {
    width: 49%;
  }
  footer .contact div.wrap + nav {
    position: relative;
  }
  footer .contact div.wrap + nav ul {
    display: none;
  }
  footer .contact div.wrap + nav p {
    text-align: center;
    width: 100%;
  }
  footer .contact div.wrap + nav p.pagetop {
    display: inline-block;
    width: 18vw;
    position: absolute;
    right: 10px;
    top: -20vw;
  }
  footer .contact div.wrap + nav p.pagetop a,
  footer .contact div.wrap + nav p.pagetop a img {
    width: 100%;
  }
  footer .contact div.wrap + nav p small {
    font-size: 2vw;
  }
  ul.spbutton {
    display: flex;
    position: fixed;
    z-index: 9000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3.5rem;
    background: linear-gradient(to right, #F4A000, #C5CE00);
    color: #ffffff;
  }
  ul.spbutton li {
    width: 50%;
    position: relative;
  }
  ul.spbutton li:first-child:after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: #ffffff;
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.spbutton li a {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }
  ul.spbutton li:first-child a:before {
    content: "";
    display: block;
    width: 1em;
    height: 1.5em;
    background: url(images/icon-tel.svg) no-repeat center center / contain;
    margin-right: 0.25em;
  }
  ul.spbutton li:last-child a:before {
    content: "";
    display: block;
    width: 1.5em;
    height: 1.5em;
    background: url(images/icon-mail.svg) no-repeat center center / contain;
    margin-right: 0.25em;
  }
}


/* ----------------------------------------------------------
 common settings
---------------------------------------------------------- */
h2 {
  font-size: 1.75rem;
  line-height: 1.5em;
  margin-bottom: 1rem;
}
h2.title {
  font-size: 1rem;
}
h2.title span {
  display: block;
  margin-top: 2rem;
  margin-bottom: 0.5em;
  color: #CB6506;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 4rem;
  font-weight: bold;
}
p.link {
  text-align: center;
}
p.link a {
  display: inline-flex;
  align-items: center;
  margin-top: 1.5rem;
  padding: 0.5em 1.5em;
  border-radius: 2em;
  background-color: #CB6506;
  color: #ffffff;
}
p.link a:hover {
  background-color: #47210D;
}
p.link a:after {
  display: block;
  transform: rotate(45deg);
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 3em;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  content: "";
}
.flex {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width : 767px) { /* PC */
  section {
    padding: 80px 0;
  }
  main section:first-of-type {
    padding-top: 100px;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  section {
    padding: 40px 0;
  }
}



/* ----------------------------------------------------------
 Page / Home
---------------------------------------------------------- */

/* .firstview
--------------------------------------------- */
section.firstview {
  height: 100vh;
  padding: 120px 0 0 0 !important;
}

/* swiper */
/*!
 * Horizontal parallax sliding slider #2
 * Author: digistate (https://codepen.io/digistate)
 * License: MIT
 */
section.firstview .transition_all_03s {
  transition: all 0.3s ease;
}
section.firstview .backface_visibility_hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
section.firstview *,
section.firstview *:before,
section.firstview *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
section.firstview .swiper-container {
  width: 80%;
  height: 100%;
  float: left;
  transition: opacity 0.6s ease, transform 0.3s ease;
}
section.firstview .swiper-container.nav-slider {
  width: 20%;
  padding-left: 5px;
}
section.firstview .swiper-container.nav-slider .swiper-slide {
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
section.firstview .swiper-container.nav-slider .swiper-slide.swiper-slide-active {
  opacity: 1;
}
section.firstview .swiper-container.nav-slider .swiper-slide .content {
  width: 100%;
}
section.firstview .swiper-container.nav-slider .swiper-slide .content .title {
  font-size: 20px;
}
section.firstview .swiper-container:hover .swiper-button-prev,
section.firstview .swiper-container:hover .swiper-button-next {
  transform: translate(0, -50%);
  opacity: 1;
  visibility: visible;
}
section.firstview .swiper-container.loading {
  opacity: 0;
  visibility: hidden;
}
section.firstview .swiper-wrapper {}
section.firstview .swiper-slide {
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
section.firstview .swiper-slide .slide-bgimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}
section.firstview .swiper-slide .entity-img {
  display: none;
}
section.firstview .swiper-slide .content {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50%;
  padding-left: 5%;
  color: #fff;
  transform: translateY(-50%);
}
section.firstview .swiper-slide .content .title {
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1.125em;
}
section.firstview .swiper-slide .content .caption {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}
section.firstview [class^="swiper-button-"] {
  width: 44px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
section.firstview .swiper-button-prev {
  transform: translateX(50px);
}
section.firstview .swiper-button-next {
  transform: translateX(-50px);
}


@media screen and (max-width : 768px) {  /* SP */
  section.firstview {
    height: 60vh;
    padding-top: 84px !important;
    padding-bottom: 0 !important;
  }
  section.firstview .swiper-container {
    width: 100%;
  }
  section.firstview .nav-slider {
    display: none;
  }
  section.firstview .swiper-container:hover .swiper-button-prev,
  section.firstview .swiper-container:hover .swiper-button-next {
    opacity: 0;
  }
}

/* .cta
--------------------------------------------- */
section.cta {
  padding-bottom: 0;
}
section.cta .wrap .phone {
  display: flex;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.25em;
}
section.cta .wrap .phone > p:nth-of-type(1) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0;
  color: #FFFFFF;
  background-color: #2d2326;
  text-align: center;
}
section.cta .wrap .phone > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 1.5rem;
  text-align: center;
}
section.cta .wrap .phone > div p:nth-of-type(1) {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
  padding: 0 0.5rem;
  border-top: 2px solid;
  border-bottom: 2px solid;
  font-size: 1.35rem;
}
section.cta .wrap .phone > div p a {
  display: block;
  width: 100%;
  line-height: 0;
}
section.cta .wrap .phone > div p a img {
  width: 100%;
}
section.cta .wrap .phone > p:nth-of-type(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0;
  border-radius: 1rem;
  color: #FFFFFF;
  background-color: #CB6506;
  text-align: center;
}
section.cta .wrap .web {
  display: flex;
  align-items: center;
  margin: 2rem auto;
}
section.cta .wrap .web div {
  font-size: 1.35rem;
  line-height: 1.5em;
  text-align: center;
}
section.cta .wrap .web div span {
  display: block;
  margin: 0.5rem auto 2rem auto;
  border-top: 2px solid;
  border-bottom: 2px solid;
}
section.cta .wrap .web div p a {
  display: block;
  padding: 0.5rem 0;
  color: #ffffff;
  background-color: #2d2326;
  font-size: 1.75rem;
}
section.cta .wrap .web div p a:hover {
  background-color: #CB6506;
}
section.cta .wrap .web figure {
  margin: 0;
}
section.cta .wrap .web figure img {
  width: 100%;
}

/* 2026.3 温泉マーク等追加 */
section.cta .wrap .phone > p {
  position: relative;
}
section.cta .wrap .phone > p:before {
  content: "";
  position: absolute;
  left: 1rem;
  display: block;
  width: 3.75rem;
  height: 3.75rem;
  aspect-ratio: 1 / 1;
  background: url(images/icon-onsen.svg) no-repeat center center / contain;
}
section.cta .wrap .phone > p:after {
  content: "";
  position: absolute;
  right: 1rem;
  display: block;
  width: 3.75rem;
  height: 3.75rem;
  aspect-ratio: 1 / 1;
  background: url(images/icon-mt.svg) no-repeat center center / contain;
}
section.cta .wrap .phone > p:nth-of-type(2):before {
  background: url(images/icon-mt.svg) no-repeat center center / contain;
}
section.cta .wrap .phone > p:nth-of-type(2):after {
  background: url(images/icon-onsen.svg) no-repeat center center / contain;
}

@media screen and (min-width : 767px) { /* PC */
  section.cta .wrap {
    width: 74rem;
    max-width: initial;
    margin: 0 auto;
  }
  section.cta .wrap .phone > p:nth-of-type(1),
  section.cta .wrap .phone > p:nth-of-type(2) {
    width: 22rem;
  }
  section.cta .wrap .phone > div p:nth-of-type(1) span:nth-of-type(1) {
    margin-right: 1em;
  }
  section.cta .wrap .web {
    width: 60rem;
  }
  section.cta .wrap .web div {
    width: 75%;
    padding-left: 4rem;
  }
  section.cta .wrap .web figure {
    width: 25%;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  section.cta .wrap .phone {
    flex-direction: column;
  }
  section.cta .wrap .phone > div {
    flex-direction: column;
    width: 100%;
    margin: 1rem auto;
    padding: 0;
  }
  section.cta .wrap .phone > div p:nth-of-type(1) {
    flex-direction: column;
    margin-bottom: 1rem;
    padding: 0.25rem;
  }
  section.cta .wrap .web {
    flex-direction: column;
  }
  section.cta .wrap .web figure {
    width: 60%;
  }
}


/* .company
--------------------------------------------- */
section.company .flex {
  align-items: center;
}
section.company .flex .left {
  position: relative;
}
section.company .flex .left:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -2rem;
  bottom: -2rem;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(244, 160, 0, 0.3);
}
section.company .flex .left img {
  width: 100%;
}
section.company .flex .right h2 img {
  width: 100%;
}


@media screen and (min-width : 767px) { /* PC */
  section.company {
    padding-top: 100px;
  }
  section.company .flex .left {
    width: 55%;
  }
  section.company .flex .right {
    width: 45%;
    padding-left: 3rem;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  section.company .flex {
    flex-direction: column;
  }
  section.company .flex .left {
    order: 2;
  }
  section.company .flex .right {
    order: 1;
    margin-bottom: 3rem;
  }
}




/* .service
--------------------------------------------- */
section.service {
  background-image: 
    url(images/block-l.svg), 
    url(images/flowerbed-r.svg);
  background-repeat: 
    no-repeat, 
    no-repeat;
  background-position: 
    left -5rem bottom 14rem, 
    right -4rem bottom;
  background-size: 
    17vw, 
    20vw;
}
section.service .wrap {
  align-items: center;
  margin-bottom: 5rem;
}
section.service ul li {
  width: 32%;
  margin: 0.5rem 2% 0.5rem 0;
  padding: 1rem 0.5rem;
  background: linear-gradient(to right, #8dd4fd, #8edc32);
  color: #ffffff;
  text-align: center;
  font-size: 0.95rem;
}
section.service ul li:nth-child(3n+3) {
  margin-right: 0;
}
section.service .wrap + p a {
  display: block;
  margin: 0 auto;
}
section.service .wrap + p img {
  width: 100%;
}
section.service .wrap p.wrap img {
  width: 100%;
}

@media screen and (min-width : 767px) { /* PC */
  section.service .left {
    width: 30%;
  }
  section.service .right {
    align-items: center;
    width: 70%;
    padding-left: 2rem;
  }
  section.service .wrap p.wrap {
    width: 80%;
    min-width: initial;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  section.service {
  background-image: 
    url(images/block-r.svg), 
    url(images/flowerbed-l.svg);
    background-position: 
      right -12vw top 2rem,
      left -11vw bottom 0;
    background-size: 
      28vw, 
      30vw;
  }
  section.service .wrap {
    flex-direction: column;
    margin-bottom: 2rem;
  }
  section.service .left {
    margin-bottom: 2rem;
  }
  section.service ul {
    justify-content: space-between;
  }
  section.service ul li {
    width: 49%;
    margin: 0.25rem 0;
    padding: 0.5rem 0;
    font-size: 0.9rem;
  }
  section.service .wrap p.wrap {
    width: 100%;
  }
}

/* .gallery
--------------------------------------------- */
section.gallery {
  position: relative;
}
section.gallery ul li a {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: .3s;
}
section.gallery ul li a:hover {
  opacity: .7;
  transition: .3s;
}
section.gallery ul li a figure {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1rem;
}
section.gallery ul li a figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section.gallery ul li a time {
  font-weight: bold;
  margin-bottom: 0.5em;
}  
section.gallery ul li a p {
  padding: 0 0.5em;
  background: linear-gradient(to right, #8dd4fd, #8edc32);
  color: #ffffff;
  font-size: 0.9rem;
}
section.gallery:before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  right: 30px;
  top: 130px;
  background-color: #F9F3AB;
}

@media screen and (min-width : 767px) { /* PC */
  section.gallery .swiper-container {
    padding-bottom: 30px !important;
  }
  section.gallery .swiper-container:before {
    content: "";
    display: block;
    width: 150px;
    height: 150px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #F9F3AB;
  }
  section.gallery ul li {
    width: 30vw;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  section.gallery:before {
    right: 0;
    top: initial;
    bottom: 170px;
  }
  section.gallery .swiper-container {
    width: 80%;
    margin: 1rem auto;
  }
}




/* .qa
--------------------------------------------- */
section.qa h2.title {
  color: #CB6506;
}
section.qa h2.title span {
  color: #47210D;
}
section.qa ul li {
  padding: 1rem;
  border-bottom: 1px solid #C5CE00;
}
section.qa ul li p:first-of-type {
  margin-bottom: 1rem;
}
section.qa ul li p span {
  margin-right: 1em;
  font-weight: bold;
}

@media screen and (min-width : 767px) { /* PC */
  section.qa {
    background-image: 
      url(images/top-image-qa01.jpg), 
      url(images/top-image-qa02.jpg);
    background-repeat: 
      no-repeat, 
      no-repeat;
    background-position:
      right 7vw bottom 5vw,
      right top 3vw;
    background-size:
      15vw,
      15vw;
  }
  section.qa ul {
    width: 75%;
    margin-right: 25%;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  section.qa {
    position: relative;
    padding-bottom: 0;
  }
  section.qa:after {
    content: "";
    display: block;
    width: 55vw;
    height: 60vw;
    margin-left: 45vw;
    margin-top: 2rem;
    background: url(images/top-image-qa02.jpg) no-repeat right bottom / cover;
  }
  section.qa:before {
    content: "";
    display: block;
    width: 45vw;
    height: 45vw;
    background: url(images/top-image-qa01.jpg) no-repeat right bottom / cover;
    position: absolute;
    left: 2rem;
    bottom: 7.5vw;
  }
}

/* .info
--------------------------------------------- */
section.info {
  margin-top: 50px;
  padding: 50px 0;
  background: url(images/wall.jpg) no-repeat left top/cover;
}
section.info .wrap {
  padding: 50px;
  background-color: #ffffff;
}
section.info .wrap h2 {
  position: relative;
  display: inline-block;
  align-items: center;
  padding-right: 185px;
}
section.info .wrap h2:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -32.5px;
  display: block;
  width: 185px;
  height: 75px;
  background: url(images/dogs.jpg) no-repeat center center / contain;
}
section.info ul {
  margin-bottom: 1.5rem;
  border-top: 1px solid #cccccc;
}
section.info ul li {
  border-bottom: 1px solid #cccccc;
}
section.info ul li a {
  display: flex;
  align-items: center;
  padding: 0.5rem 1.5em;
}
section.info ul li a:after {
  display: block;
  transform: rotate(45deg);
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  content: "";
  transition: .3s;
}
section.info ul li a:hover:after {
  border-top: 2px solid #CB6506;
  border-right: 2px solid #CB6506;
  transition: .3s;
}
section.info ul li a time {
  margin-right: 1em;
  font-weight: bold;
}
section.info ul li a p {
  display: flex;
  align-items: center;
}
section.info ul li a p span {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 1em;
}
section.info ul li a p span:before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.25em;
  background: url(images/icon-info-news.svg) no-repeat center center/cover;
}
section.info ul li.event a p span:before {
  background: url(images/icon-info-event.svg) no-repeat center center/cover;
}
section.info ul li.other a p span:before,
section.info ul li.works a p span:before,
section.info ul li.days a p span:before {
  background: url(images/icon-info-blog.svg) no-repeat center center/cover;
}
section.info ul li.niwaichi a p span:before {
  background: url(images/icon-info-niwa.svg) no-repeat center center/cover;
}
section.info ul li a p span:after {
  content: "";
  display: block;
  width: 3em;
  height: 1.5em;
  background: url(images/icon-infoafter.svg) no-repeat center center/contain;
}

@media screen and (min-width : 767px) { /* PC */
  section.info ul li a p span {
    width: 9.5em;
  }
  section.info ul li a p span:after {
    position: absolute;
    right: 0;
  }
  section.info p.link {
    text-align: right;
  }
  section.info p.link a:first-of-type {
    margin-right: 1em;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  section.info .wrap {
    padding: 2rem 1rem;
  }
  h2.title span {
    font-size: 12vw;
  }
  section.info .wrap h2 {
    display: block;
    padding-right: 0;
  }
  section.info .wrap h2:after {
    top: 1rem;
    margin-top: -32.5px;
    width: 30vw;
    height: 50px;
    background: url(images/dogs.jpg) no-repeat right center / contain;
  }
  section.info ul li a {
    flex-wrap: wrap;
    padding: 0.5rem;
    position: relative;
  }
  section.info ul li a:after {
    position: absolute;
    right: 0;
  }
  section.info ul li a p:nth-of-type(2) {
    width: 100%;
    margin-top: 0.25rem;
  }
  section.info p.link {
    margin-bottom: 2rem;
  }
  section.info p.link a {
    width: 80%;
  }
}

/* .insta
--------------------------------------------- */
#instafeed ul {
  justify-content: center;
}
#instafeed ul li {
  width: 210px;
  height: 210px;
  margin-right: 12px;
}
#instafeed ul li:last-child {
  margin-right: 0;
}
#instafeed ul li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
#instafeed ul li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#instafeed ul li a p {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1em;
  overflow: hidden;
  background: rgba(71,33,13,0.7);
  color: #ffffff;
  opacity: 0;
  transition: .3s;
}
#instafeed ul li a:hover p {
  opacity: 1;
  transition: .3s;
}
#instafeed ul li:last-child a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #E59C00;
  color: #ffffff;
}
#instafeed ul li:last-child a:hover {
  background-color: #47210D;
}
#instafeed ul li:last-child a img {
  width: 3rem;
  height: 3rem;
}

@media screen and (max-width : 768px) {  /* SP */
  #instafeed ul {
    justify-content: space-between;
  }
  #instafeed ul li {
    width: 41vw;
    height: 41vw;
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
  #instafeed ul li:nth-child(4) {
    display: none;
  }
  #instafeed ul li:last-child a {
    font-size: 3vw;
  }
  #instafeed ul li:last-child a img {
    width: 2rem;
    height: 2rem;
  }
}

/* .access
--------------------------------------------- */
section.access {
  position: relative;
}
section.access:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 300px;
  background-color: #F9F8F3;
}
section.access h2.title {
  color: #CB6506;
}
section.access h2.title span {
  color: #47210D;
}
section.access .flex {
  justify-content: space-between;
  margin-bottom: 2rem;
}
section.access .flex iframe {
  width: 400px !important;
  height: 400px;
}
section.access .flex iframe + div {
  width: calc(100% - 400px - 2rem);
  background: #efefef;
  background: url(images/image-office.jpg) no-repeat center center/cover;
}

@media screen and (min-width : 767px) { /* PC */
  section.access .wrap {
    width: 1000px;
    min-width: 900px;
  }
}


/* ----------------------------------------------------------
 Page / Common
---------------------------------------------------------- */
.page {
  position: relative;
}
.page:before {
  content: "";
  display: block;
  width: 75%;
  height: 50vh;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  background: url(images/wall.jpg) no-repeat left top/cover;
}
.pagetitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.pagetitle .left h2 {
  position: relative;
  padding-top: 50px;
}
.pagetitle .left h2.title {
  color: #CB6506;
}
.pagetitle .left h2.title span {
  color: #47210d;
}
.pagetitle .left h2:before {
  content: "";
  display: block;
  width: 150vw;
  height: 100vh;
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -1em;
  transform: translateX(-50%);
  background-color: #ffffff;
}
.pagetitle .right {
  position: relative;
}
.pagetitle .right:before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -1rem;
  top: 2em;
  display: block;
  width: 15vw;
  height: 100%;
  background: url(images/flower.svg) no-repeat right top/contain;
}
.pagetitle .right:after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -1rem;
  bottom: -3rem;
  display: block;
  width: 15vw;
  height: 100%;
  background: url(images/block-l.svg) no-repeat right bottom/contain;
}
body.page h3.title {
  font-size: 1rem;
}
body.page h3.title span {
  display: block;
  color: #CB6506;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1em;
}
body.page h3.title2 {
  color: #CB6506;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
body.page h3.title2 span {
  display: block;
  color: #47210D;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 3rem;
  font-weight: bold;
  line-height: 0.75em;
}

@media screen and (min-width : 767px) { /* PC */
  .pagetitle .left {
    width: 35%;
    padding-right: 2rem;
  }
  .pagetitle .right {
    width: 65%;
    padding-right: 2rem;
  }
}

@media screen and (max-width : 768px) {  /* SP */
  .page:before {
    height: 25vh;
  }
  .pagetitle {
    flex-direction: column;
    width: 100%;
    padding-top: 50px;
  }
  .pagetitle .left {
    order: 2;
    width: 80%;
    margin: 0 auto;
  }
  .pagetitle .left h2 {
    padding-top: 1rem;
  }
  .pagetitle .right {
    order: 1;
    width: 90%;
    margin: 0 auto;
  }
  .pagetitle .right:after {
    bottom: 0;
  }
}


/* ----------------------------------------------------------
 Page / Service
---------------------------------------------------------- */
body.service .sec01 {
  background: url(images/flowerbed-r.svg) no-repeat right -4rem bottom / 20vw;
}
body.service .sec01 div.flex h3 {
  margin-right: 3rem;
}
body.service .sec01 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 2rem auto;
}
body.service .sec01 ul li {
  width: 31%;
  margin-bottom: 3em;
}
body.service .sec01 ul li figure {
  width: 100%;
}
body.service .sec01 ul li figure img {
  width: 100%;
}
body.service .sec01 ul li h4 {
  position: relative;
  width: 75%;
  margin: -2em auto 1em auto;
  padding: 0.5em 0;
  background: linear-gradient(to right, #8dd4fd, #8edc32);
  color: #ffffff;
  text-align: center;
}
body.service .sec01 ul li .more {
  margin-top: 1rem;
  text-align: center;
}
body.service .sec01 ul li .more a {
  display: inline;
  margin: 0 auto;
  padding: 0 0.25em;
  border-bottom: 1px solid;
  font-weight: 500;
}
body.service .sec01 ul li .more a:hover {
  color: #CB6506;
}
body.service .sec01 ul + p {
  width: 80%;
  min-width: initial;
}
body.service .sec01 ul + p a {
  display: block;
  margin: 0 auto;
}
body.service .sec01 ul + p img {
  width: 100%;
}
body.service .sec02 {
  padding: 4rem 0;
  background: url(images/wall.jpg) no-repeat left top/cover;
}
body.service .sec02 .wrap {
  padding: 3rem;
  background-color: #ffffff;
}
body.service .sec02 .wrap div h3 {
  margin-right: 2rem;
}
body.service .sec02 .wrap h4 {
  background: linear-gradient(to right, #F4A000, #C5CE00);
  color: #ffffff;
  margin-bottom: 0.5em;
  padding: 0 0.5em;
}
body.service .sec02 .wrap h5 {
  border-bottom: 1px solid #cccccc;
  position: relative;
  margin-top: 1rem;
  padding-bottom: 0.25rem;
}
body.service .sec02 .wrap h5:before {
  content: "";
  display: block;
  width: 7em;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -1px;
  background-color: #EBE600;
}
body.service .sec03 ul {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width : 767px) { /* PC */
  body.service .sec02 .wrap div {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  body.service .sec03 ul li:after {
    content: "／";
    margin: 0 0.5em;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  body.service .sec01 {
    padding-bottom: 100px;
    background: url(images/flowerbed-r.svg) no-repeat right -2rem bottom / 35vw;
  }
  body.service .sec01 div.flex h3 {
    margin-bottom: 1.5rem;
  }
  body.service .sec01 ul {
    margin-bottom: 1rem;
  }
  body.service .sec01 ul li {
    width: 100%;
  }
  body.service .sec01 ul + p.wrap,
  body.service .sec01 ul + p a {
    width: 100%;
  }
  body.service .sec02 .wrap {
    padding: 2rem 1.5rem;
  }
  body.service .sec02 .wrap div,
  body.service .sec02 .wrap div h3 {
    margin-bottom: 1.5rem;
  }
  body.service .sec03 {
    padding-top: 60px;
  }
  body.service .sec03 ul {
    flex-direction: column;
  }
  body.service .sec03 ul li {
    padding-left: 1.5em;
    text-indent: -1.5em;
    list-style: disc;
    list-style-position: inside;
  }
}


/* ----------------------------------------------------------
 Page / Q&A
---------------------------------------------------------- */
body.question .sec01 h3 {
  margin-bottom: 1rem;
  padding: 0 0.5em;
  background: linear-gradient(to right, #F4A000, #C5CE00);
  color: #ffffff;
}
body.question .sec01 dl dt {
  position: relative;
  border-bottom: 1px solid #cccccc;
  padding: 0.5rem;
  font-weight: bold;
}
body.question .sec01 dl dt:before {
  content: "";
  display: block;
  width: 150px;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -1px;
  background-color: #EBE600;
}
body.question .sec01 dl dd {
  padding: 0.5rem 1rem;
}

/* ----------------------------------------------------------
 Page / Company
---------------------------------------------------------- */
body.company .sec01 {
  background-color: #F9F8F3;
}
body.company .sec01 .flex {
  align-items: center;
}
body.company .sec01 .left {
  position: relative;
}
body.company .sec01 .left:after {
  content: "";
  position: absolute;
  left: -2rem;
  bottom: -2rem;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(244, 160, 0, 0.3);
}
body.company .sec01 figure img {
  position: relative;
  z-index: 1;
  width: 100%;
}
body.company .sec01 .right h3 {
  margin-bottom: 2rem;
}
body.company .sec01 .right p span {
  background:linear-gradient(transparent 60%, #F9F3AB 60%);
}
body.company .sec02 .wrap {
  display: flex;
}
body.company .sec02 dl {
  display: flex;
  flex-wrap: wrap;
}
body.company .sec02 dl dt {
  position: relative;
  border-bottom: 1px solid #cccccc;
  width: 150px;
  padding: 0.5rem;
  font-weight: bold;
}
body.company .sec02 dl dt:before {
  content: "";
  display: block;
  width: 90%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -1px;
  background-color: #EBE600;
}
body.company .sec02 dl dd {
  border-bottom: 1px solid #cccccc;
  width: calc(100% - 150px);
  padding: 0.5rem 1rem;
}
body.company .sec03 {
  background: url(images/flowerbed-r.svg) no-repeat right -4rem bottom / 20vw;
}
body.company .sec03 h3 {
  margin-bottom: 3rem;
}
body.company .sec03 .wrap > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
body.company .sec03 .wrap > ul > li {
  width: 47%;
  margin-bottom: 1rem;
}
body.company .sec03 .wrap > ul > li h4 {
  margin-bottom: 0.25rem;
  padding: 0.25rem;
  background: linear-gradient(to right, #C5CE00, #F4A000);
  color: #ffffff;
}
body.company .sec03 .wrap > ul > li:last-child h4 {
  background: linear-gradient(to right, #8dd4fd, #8edc32);
  color: #ffffff;
}
body.company .sec03 .wrap > ul > li > ul {
  width: 95%;
  margin: 1rem auto;
}
body.company .sec03 .wrap > ul > li > ul li {
  list-style: disc;
  list-style-position: inside;
}
body.company .sec04 {
  padding: 4rem 0;
  background: url(images/wall.jpg) no-repeat left top/cover;
}
body.company .sec04 .wrap {
  padding: 3rem;
  background-color: #ffffff;
}
body.company .sec04 .left dl dt {
  background: linear-gradient(to right, #F4A000, #C5CE00);
  color: #ffffff;
  padding: 0 0.5em;
}
body.company .sec04 .left dl dd {
  padding: 0.5em;
}
body.company .sec04 .right iframe {
  width: 100%;
  height: 100%;
}
body.company .sec05 .flex {
  align-items: center;
}
body.company .sec05 .left {
  position: relative;
  width: 50%;
}
body.company .sec05 .left:after {
  content: "";
  position: absolute;
  left: -2rem;
  bottom: -2rem;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(244, 160, 0, 0.3);
}
body.company .sec05 figure img {
  position: relative;
  z-index: 1;
  width: 100%;
}
body.company .sec05 .right {
  width: 50%;
  padding-left: 3rem;
}
body.company .sec05 .right h3 {
  margin-bottom: 2rem;
}

@media screen and (min-width : 767px) { /* PC */
  body.company .sec01 .left {
    width: 50%;
  }
  body.company .sec01 .right {
    width: 50%;
    padding-left: 3rem;
  }
  body.company .sec02 {
    background: url(images/block-l.svg) no-repeat left -5rem bottom 2rem / 17vw;
  }
  body.company .sec02 h3 {
    padding-right: 100px;
  }
  body.company .sec04 .left {
    width: 40%;
    padding-right: 2rem;
  }
  body.company .sec04 .right {
    width: 60%;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  body.company .sec01 .flex {
    flex-direction: column;
  }
  body.company .sec01 .right {
    margin-top: 4rem;
  }
  body.company .sec01 .right h3 {
    margin-bottom: 1.5rem;
  }
  body.company .sec02 .wrap {
    flex-direction: column;
  }
  body.company .sec02 .wrap h3 {
    margin-bottom: 1.5rem;
  }
  body.company .sec02 dl dt {
    width: 100%;
  }
  body.company .sec02 dl dt:before {
    width: 30%;
  }
  body.company .sec02 dl dd {
    width: 100%;
    border-bottom: 0;
  }
  body.company .sec03 {
    background: #F9F8F3 url(images/flowerbed-r.svg) no-repeat right -2rem bottom / 35vw;
  }
  body.company .sec03 h3 {
    margin-bottom: 1.5rem;
  }
  body.company .sec03 .wrap > ul > li {
    width: 100%;
  }
  body.company .sec03 .wrap > ul > li > ul li {
    padding-left: 1.5em;
    text-indent: -1.5em;
  }
  body.company .sec04 .wrap {
    padding: 2rem 1.5rem;
  }
  body.company .sec04 .wrap .left {
    width: 100%;
    margin-bottom: 1rem;
  }
  body.company .sec05 .left {
    order: 2;
    width: 100%;
  }
  body.company .sec05 .right {
    order: 1;
    width: 100%;
    margin-bottom: 2rem;
    padding-left: 0;
  }
  body.company .sec05 .right h3 {
    margin-bottom: 1.5rem;
  }
} 


/* ----------------------------------------------------------
 Page / Activity
---------------------------------------------------------- */
body.activity .sec01 {
  padding-bottom: 100px;
  background: url(images/flowerbed-r.svg) no-repeat right -4rem bottom / 20vw;
}
body.activity .sec01 .flex {
  align-items: center;
}
body.activity .sec01 .left {
  position: relative;
}
body.activity .sec01 .left:after {
  content: "";
  position: absolute;
  left: -2rem;
  bottom: -2rem;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(244, 160, 0, 0.3);
}
body.activity .sec01 figure img {
  position: relative;
  z-index: 1;
  width: 100%;
}
body.activity .sec01 .right h3 {
  margin-bottom: 2rem;
  font-size: 2rem;
}
body.activity .sec02 {
  padding: 4rem 0;
  background: url(images/wall.jpg) no-repeat left top/cover;
}
body.activity .sec02 .wrap {
  align-items: center;
  padding: 3rem;
  background-color: #ffffff;
}
body.activity .sec02 .right dl dt {
  background: linear-gradient(to right, #F4A000, #C5CE00);
  color: #ffffff;
  padding: 0 0.5em;
}
body.activity .sec02 .right dl dd {
  padding: 0.5em;
}
body.activity .sec02 .right dl dd span {
  color: #D01818;
}

@media screen and (min-width : 767px) { /* PC */
  body.activity .sec01 .left {
    width: 50%;
  }
  body.activity .sec01 .right {
    width: 50%;
    padding-left: 3rem;
  }
  body.activity .sec02 .left {
    width: 40%;
    padding-right: 2rem;
  }
  body.activity .sec02 .right {
    width: 60%;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  body.activity .sec01 {
    background: url(images/flowerbed-r.svg) no-repeat right -2rem bottom / 35vw;
  }
  body.activity .sec01 .flex {
    flex-direction: column;
  }
  body.activity .sec01 .left {
    margin-bottom: 4rem;
  }
  body.activity .sec02 .wrap {
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.5rem;
  }
}


/* ----------------------------------------------------------
 Page / Recruit
---------------------------------------------------------- */
body.recruit .sec01 h3 {
  padding: 0 0.5em;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #F4A000, #C5CE00);
  color: #ffffff;
}
body.recruit .sec01 dl {
  display: flex;
  flex-direction: column;
}
body.recruit .sec01 dl dt {
  border-bottom: 1px solid #cccccc;
  position: relative;
  padding: 0.25rem 1em;
  font-weight: bold;
}
body.recruit .sec01 dl dt:after {
  content: "";
  display: block;
  width: 150px;
  height: 2px;
  background-color: #EBE600;
  position: absolute;
  left: 0;
  bottom: -1px;
}
body.recruit .sec01 dl dd {
  padding: 0.25rem 1em;
  margin-bottom: 2rem;
}

@media screen and (max-width : 768px) {  /* SP */
  body.recruit .sec01 dl dd {
    margin-bottom: 1rem;
  }
}


/* ----------------------------------------------------------
 Page / Privacy Policy
---------------------------------------------------------- */
body.privacy h2.title span {
  margin-top: 0.5rem;
  line-height: 1em;
}
body.privacy .sec01 h3 {
  padding: 0 0.5em;
  background: linear-gradient(to right, #F4A000, #C5CE00);
  color: #ffffff;
}
body.privacy .sec01 p {
  margin-bottom: 1rem;
  padding: 0.5rem;
}

@media screen and (max-width : 768px) {  /* SP */
  body.privacy .sec01 {
    padding-top: 0;
  }
}

/* ----------------------------------------------------------
 Information,Blog
---------------------------------------------------------- */
body.information:before,
body.category:before,
body.archive:before,
body.single:before,
body.blog:before {
  content: "";
  display: block;
  width: 75%;
  height: 150px;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  background: url(images/wall.jpg) no-repeat left top/cover;
}
body.home:before {
  content: none !important;
}
#information .wrap {
  display: flex;
  flex-wrap: wrap;
}
#information .pagination {
  width: 100%;
}
#information section.left h2 {
  color: #CB6506;
  margin-bottom: 4rem;
}
#information section.left h2 span {
  color: #47210D;
}
#information section.left h2 + p.kind {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1em;
}
#information section.left article ul.postlist {
  margin-bottom: 1.5rem;
  border-top: 1px solid #C5CE00;
}
#information section.left article ul.postlist li {
  border-bottom: 1px solid #C5CE00;
}
#information section.left article ul.postlist li a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.5rem;
}
#information section.left article ul.postlist li a:after {
  display: block;
  transform: rotate(45deg);
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-top: 2px solid #C5CE00;
  border-right: 2px solid #C5CE00;
  content: "";
  position: absolute;
  right: 1em;
  transition: .3s;
}
#information section.left article ul.postlist li a:hover:after {
  border-top: 2px solid #47210D;
  border-right: 2px solid #47210D;
  transition: .3s;
}
#information section.left article ul.postlist li a time {
  margin-right: 1em;
  font-weight: bold;
}
#information section.left article ul.postlist li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#information section.left ul li a span,
.single #information section.left p.title span {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 9.5em;
}
.single #information section.left p.title span {
  width: initial;
}
#information section.left ul li a span:before,
.single #information section.left p.title span:before,
.blog #information section.left ul li.days a span:before,
.post-type-archive-blog_post #information section.left ul li.days a span:before,
.archive #information section.left ul li.days a span:before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.25em;
  background: url(images/icon-info-news.svg) no-repeat center center/cover;
}
#information section.left ul li.event a span:before,
.single #information section.left p.title span.event:before,
.blog #information section.left ul li.other a span:before,
.post-type-archive-blog_post #information section.left ul li.other a span:before,
.single #information section.left p.title span.other:before,
.archive #information section.left ul li.other a span:before {
  background: url(images/icon-info-event.svg) no-repeat center center/cover;
}
#information section.left ul li.niwaichi a span:before,
.single #information section.left p.title span.niwaichi:before {
  background: url(images/icon-info-niwa.svg) no-repeat center center/cover;
}
#information section.left ul li.other a span:before,
#information section.left ul li.works a span:before,
#information section.left ul li.days a span:before,
.single #information section.left p.title span.works:before {
  background: url(images/icon-info-blog.svg) no-repeat center center/cover;
}
#information section.left ul li a span:after,
.single #information section.left p.title span:after {
  content: "";
  position: absolute;
  right: 0;
  display: block;
  width: 3em;
  height: 1.5em;
  background: url(images/icon-infoafter.svg) no-repeat center center/contain;
}
.single #information section.left p.title span:after {
  position: initial;
  right: initial;
  margin-left: 0.5rem;
}
.single #information section.left p.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #C5CE00;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
}
#information section.left ul li a time {
  color: #CB6506;
}
.single #information section.left p.category {
  margin-bottom: 0.5em;
}
.single #information section.left p.category span {
  padding: 0 1em;
  background: linear-gradient(to right, #8dd4fd, #8edc32);
  color: #ffffff;
}
.single #information section.left p.title + h3,
.single #information section.left p.category + h3 {
  font-size: 1.25rem;
  margin-bottom: 1em;
}
.single #information section.left p.title + h3 + div p,
.single #information section.left p.category + h3 + div p {
  margin-bottom: 1em;
}
#information section.left ul li a h3 {
  width: 100%;
  margin-top: 0.25rem;
  padding-left: 1.75em;
}
#information section.left article + ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  border-top: 1px solid #C5CE00;
  padding-top: 2rem;
  margin-top: 4rem;
}
#information section.left article + ul li:nth-child(2) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#information section.left article + ul li a {
  border-radius: 2em;
  padding: 0.5em 2em;
  background-color: #F9F3AB;
}
#information section.left article + ul li:nth-child(1) a:before {
  content: "\0ab";
  margin-right: 0.5rem;
}
#information section.left article + ul li:nth-child(2) a {
  color: #ffffff;
  background-color: #CB6506;
}
#information section.left article + ul li:nth-child(3) a:after {
  content: "\0bb";
  margin-left: 0.5rem;
}
#information aside h2 {
  border-bottom: 1px solid #cccccc;
}
#information aside > ul {
  margin-bottom: 2rem;
  padding: 0 1rem;
}
#information aside > ul li,
#information aside > ul li a {
  color: #CB6506;
}
#information aside > ul li a:hover {
  opacity: .5;
}
#information aside ul li > ul {
  margin-bottom: 1rem;
  padding: 0 1rem;
}
#information aside ul li > ul li a {
  color: #47210D;
}

@media screen and (min-width : 767px) { /* PC */
  #information {
    padding-top: 100px;
  }
  #information section.left {
    width: 70%;
  }
  #information aside {
    width: 30%;
    padding-left: 4rem;
    padding-top: 200px;
  }
  #information section.left ul li a span,
  .single #information section.left p.title span {
    margin-right: 1em;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  body.information main,
  body.category main,
  body.archive main,
  body.single main,
  body.blog main {
    padding-top: 150px;
  }
  body.home main {
    padding-top: 0 !important;
  }
  body.information aside,
  body.category aside,
  body.archive aside,
  body.single aside,
  body.blog aside {
    margin-top: 3rem;
  }
  #information .wrap {
    flex-direction: column;
  }
  #information section.left h2 + p.kind {
    font-size: 1.5rem;
  }
  #information section.left article + ul {
    padding-bottom: 4em;
  }
  #information section.left article + ul li:nth-child(2) {
    bottom: 0;
    width: 60%;
    display: block;
    text-align: center;
  }
  #information section.left ul li a h3 {
    padding-left: 0;
  }
  #information select {
    width: 100%;
    border: 1px solid #cccccc;
    padding: 0.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    font-size: 1rem;
  }
  #information aside h2 + .sp {
    position: relative;
  }
  #information aside h2 + .sp:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 0.75rem;
    width: 10px;
    height: 10px;
    border-top: 2px solid #CB6506;
    border-left: 2px solid #CB6506;
    transform: translateY(-50%) rotate(-135deg);
    font-size: 1.5rem;
    pointer-events: none;
  }
}


/* bxslider */
#slider {
  width: 90%;
  margin: 1rem auto;
}
#slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg_img + div {
  display: flex;
  flex-wrap: wrap;
}
.bg_img + div a {
  display: block;
  width: 19%;
  margin: 0.5%;
  line-height: 0;
  position: relative;
  z-index: 10;
  border: 1px solid #cccccc;
  padding: 0.25rem;
}
.bg_img + div a img {  
  aspect-ratio: 4 / 3;
  width: 100% !important;
  height: 100% !important;
}  
.bx-wrapper {
  margin-bottom: 0.5rem !important;
  box-shadow: none !important;
  border: 0 !important;
}
.bx-viewport {
  aspect-ratio: 4 / 3;
  width: 100% !important;
  height: 100% !important;
  border: 1px solid #cccccc;
  padding: 0.25rem;
}
.bx-viewport ul {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}
.bx-viewport ul li {
  position: relative !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.bx-wrapper .bx-caption {
  background: rgba(00,00,00,.55) !important;
}
.bx-wrapper .bx-caption span {
  padding: 0.25rem 1em !important;
}

@media screen and (max-width : 768px) {  /* SP */
  #slider {
    width: 100%;
  }
  .bx-wrapper .bx-caption span {
    font-size: 3vw !important;
    line-height: 1.5em !important;
  }
}

/* Pager */
div.pagination {
  clear:both;
  padding:20px 0;
  position:relative;
  background:none;
  margin:10px 0 20px;
  vertical-align: middle;
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 768px){ /* スマホ */
  div.pagination {
    display: flex;
    justify-content: center;
  }
}
div.pagination span, .pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  float:left ;
  height: 2.5em;
  text-decoration:none;
  color: #47210D;
  background: #F9F3AB;
  border-radius: 2.5em;
  padding: 0 1em;
  margin-right: 0.5em;
}
div.pagination a:hover{
  color:#fff ;
  background: #CB6506;
}
div.pagination .current {
  background: #CB6506;
  color:#fff ;
}
div.pagination .current,
.pagination a {
  width: 2.5em;
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------------------------
 Contact
---------------------------------------------------------- */
body.contact .contactbox,
body.contact-confirm .contactbox,
body.contact-completion .contactbox {
  display: none;
}
body.contact footer:before,
body.contact-confirm footer:before,
body.contact-completion footer:before {
  content: none;
}
body.contact .sec01 {
  background-color: #F9F8F3;
}
body.contact .sec01 .right p a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 2em;
  margin-bottom: 1rem;
  border-radius: 2em;
  background-color: #F4A000;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: bold;
}
body.contact .sec01 .right p a:before {
  content: "";
  display: block;
  width: 1.25em;
  height: 1.5em;
  background: url(images/icon-tel.svg) no-repeat center center / contain;
  margin-right: 0.5em;
}
body.contact .sec01 .right ul li {
  padding-left: 1em;
  text-indent: -1em;
}
body.contact .sec01 .right ul li:before {
  content: "■";
}
.contactform h3 {
  margin-bottom: 1rem;
}
.contactform dl {
  margin-bottom: 2rem;
}
.contactform dl dt {
  font-weight: bold;
}
.contactform dl dd input,
.contactform dl dd textarea {
  border: 0;
  padding: 0.25rem;
  background-color: #F9F3AB;
  font-size: 1.1rem;
  resize: vertical;
}
.contactform dl dd input[name=contact-name],
.contactform dl dd input[name=contact-name2],
.contactform dl dd input[type=email],
.contactform dl dd textarea {
  width: 100%;
}
.contactform dl dd textarea[name=contact-address2] {
  margin-top: 0.5rem;
}
.contactform dl dd input[type=file] {
  background-color: initial;
  resize: none;
  font-size: 1rem;
}
.contactform dl dd input[name=contact-file1] {
  margin-top: 0.5rem;
}
.contactform .cf-turnstile {
  text-align: center;
  margin: 2rem auto;
}
.contactform .submitbutton {
  text-align: center;
}
.contactform .submitbutton input[type=submit] {
  padding: 0.5rem 3em;
  border: 0;
  border-radius: 2em;
  background-color: #C5CE00;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  transition: .3s;
}
.contactform .submitbutton input[type=submit]:hover {
  background-color: #47210D;
}
body.contact-confirm dd span.memo {
  display: none;
}
body.contact-completion .contactform .right p {
  padding: 1em;
  margin-bottom: 1em;
  background-color: #F9F8F3;
}
body.contact-completion .contactform .right ul li {
  padding-left: 1em;
  text-indent: -1em;
}
body.contact-completion .contactform .right ul li:before {
  content: "※";
}

@media screen and (min-width : 767px) { /* PC */
  body.contact .left,
  .contactform .left {
    width: 35%;
  }
  body.contact .right,
  .contactform .right {
    width: 65%;
    padding-left: 2rem;
  }
  .contactform dl {
    display: flex;
    flex-wrap: wrap;
  }
  .contactform dl dt {
    width: 25%;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #cccccc;
    position: relative;
  }
  .contactform dl dt:after {
    content: "";
    display: block;
    width: 80%;
    height: 2px;
    background-color: #CB6506;
    position: absolute;
    left: 0;
    bottom: -1px;
  }
  .contactform dl dd {
    width: 75%;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #cccccc;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  body.contact .sec01 h3,
  body.contact-confirm .sec01 h3 {
    margin-bottom: 1.5rem;
  }
  body.contact .sec01 .right p,
  body.contact-confirm .sec01 .right p {
    text-align: center;
  }
  .contactform .right {
    width: 100%;
  }
  .contactform dl {
    margin-top: 2rem;
  }
  .contactform dl dd {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #cccccc;
  }
  body.contact-completion .contactform .right p {
    margin-top: 1rem;
  }
}


/* ----------------------------------------------------------
 Reserve Form
---------------------------------------------------------- */
body.reservation .contactbox {
  display: none;
}
body.reservation footer:before {
  content: none;
}
body.reservation .sec01 {
  background-color: #F9F8F3;
}
body.reservation .sec01 .right p a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 2em;
  margin-bottom: 1rem;
  border-radius: 2em;
  background-color: #F4A000;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: bold;
}
body.reservation .sec01 .right p a:before {
  content: "";
  display: block;
  width: 1.25em;
  height: 1.5em;
  background: url(images/icon-tel.svg) no-repeat center center / contain;
  margin-right: 0.5em;
}
body.reservation .sec01 .right ul li {
  padding-left: 1em;
  text-indent: -1em;
}
body.reservation .sec01 .right ul li:before {
  content: "■";
}
body.reservation .contactform h3 {
  margin-bottom: 1rem;
}
body.reservation .contactform dl {
  margin-bottom: 2rem;
}
body.reservation .contactform dl dt {
  font-weight: bold;
}
body.reservation .contactform dl dt span.req {
  padding-left: 0.5em;
  color: #c30d23;
}
body.reservation .contactform dl dt span.detail {
  font-size: 0.9rem;
  line-height: 1.5em;
}
body.reservation .contactform dl dd input,
body.reservation .contactform dl dd textarea {
  border: 0;
  padding: 0.25rem;
  background-color: #F9F3AB;
  font-size: 1.1rem;
  resize: vertical;
}
body.reservation .contactform dl dd.reserve-date div {
  margin-bottom: 0.5rem;
}
body.reservation .contactform dl dd.reserve-date div span {
  margin-right: 1rem;
}
body.reservation .contactform dl dd input[type=date] {
  width: 12em;
}
body.reservation .contactform dl dd input[type=email],
body.reservation .contactform dl dd textarea {
  width: 100%;
}
body.reservation .contactform dl dd .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
}
body.reservation .contactform dl dd .wpcf7-checkbox .wpcf7-list-item {
  width: 50%;
  margin: 0;
}
body.reservation .contactform dl dd textarea {
  height: 5em;
}
body.reservation .contactform dl dd input[name=reserve-address01] {
  margin-bottom: 0.5rem;
}
body.reservation .contactform dl dd div.more {
  border-top: 1px dotted;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
body.reservation .contactform dl dd div.more textarea {
  margin-top: 0.5rem;
}
body.reservation .contactform ::placeholder {
  color: #cccccc;
}
body.reservation .contactform .cf-turnstile {
  text-align: center;
  margin: 2rem auto;
}
body.reservation .contactform .submitbutton {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.reservation .contactform .submitbutton input[type=submit] {
  padding: 0.5rem 3em;
  border: 0;
  border-radius: 2em;
  background-color: #C5CE00;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  transition: .3s;
}
body.reservation .contactform .submitbutton input[type=submit]:hover {
  background-color: #47210D;
}

@media screen and (min-width : 767px) { /* PC */
  body.reservation .pagetitle .right {
    width: 60% !important;
  }
  body.reservation .left {
    width: 35%;
  }
  body.reservation .right {
    width: 65%;
    padding-left: 2rem;
  }
  body.reservation .contactform dl {
    display: flex;
    flex-wrap: wrap;
  }
  body.reservation .contactform dl dt {
    width: 25%;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #cccccc;
    position: relative;
  }
  body.reservation .contactform dl dt:after {
    content: "";
    display: block;
    width: 80%;
    height: 2px;
    background-color: #CB6506;
    position: absolute;
    left: 0;
    bottom: -1px;
  }
  body.reservation .contactform dl dt span.detail {
    display: block;
  }
  body.reservation .contactform dl dd {
    width: 75%;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #cccccc;
  }
}
@media screen and (max-width : 768px) {  /* SP */
  body.reservation .sec01 h3 {
    margin-bottom: 1.5rem;
  }
  body.reservation .sec01 .right p {
    text-align: center;
  }
  body.reservation .contactform .right {
    width: 100%;
  }
  body.reservation .contactform dl {
    margin-top: 2rem;
  }
  body.reservation .contactform dl dd {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #cccccc;
  }
  body.reservation .contactform dl dd input[type=email],
  body.reservation .contactform dl dd input[type=text],
  body.reservation .contactform dl dd input[type=tel],
  body.reservation .contactform dl dd input[type=email],
  body.reservation .contactform dl dd textarea,
  body.reservation .contactform dl dd .wpcf7-checkbox .wpcf7-list-item {
    width: 100%;
  }
  body.reservation .contactform dl dd .wpcf7-checkbox {
    padding-left: 1rem;
  }
}