/*=============================================
 * body
 *=============================================*/
body {
   background-color: #fff;
   color: #333;
   font-family: 'Zen Maru Gothic', sans-serif;
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0;
   min-width: inherit;
   min-height: inherit;
   max-height: 100%;
   position: relative;
}

@media screen and (max-width: 767px) {
   body {
      font-size: 14px;
      line-height: 28px;
   }
}

/*=============================================
 * <main>
 *=============================================*/
main {
   clear: both;
   width: 100%;
   box-sizing: border-box;
   position: relative;
}

/*=============================================f
 * <header>
 *=============================================*/
/* -- -- */
header {
   box-sizing: border-box;
   position: sticky;
   top: 0;
   z-index: 100;
   padding: 0;
}

header:before {
   content: '';
   width: 100%;
   height: 94px;
   background-color: #fff;
   position: absolute;
   top: 0;
   left: 0;
}

header .wrap {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 10px;
   border-radius: 6px;
   max-width: 100%;
}

header .logo {
   flex: auto;
   padding-left: 330px;
   transition: all 0.3s;
}

header .logo a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 300px;
   height: 190px;
   background-color: #536930;
   border-radius: 0 0 70px 0;
   text-align: center;
   position: absolute;
   top: 0;
   left: 0;
}

header .logo img {
   width: 280px;
   transition: all 0.3s;
}

header .logo small {
   display: block;
   width: 185px;
   font-size: 13px;
   line-height: 18px;
   padding: 20px 0;
}

header .catch {
   flex: auto;
   font-size: 13px;
   line-height: 18px;
}

#navbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 70px;
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
   padding-right: 10px;
}

.navbar__nav {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 40px;
   color: #5F3F25;
   font-weight: 700;
   font-size: 16px;
   line-height: 24px;
}

.navbar__nav li>a,
.navbar__nav .sub__menu-btn {
   display: block;
   padding: 20px 0 14px;
}

.navbar__nav li>a img,
.navbar__nav .sub__menu-btn img {
   display: block;
   width: auto;
   height: 30px;
   margin: 0 auto 6px;
}

.navbar__nav .sub__menu {
   position: relative;
}

.navbar__bnr {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.navbar__bnr li {
   width: 125px;
}

.navbar__bnr a {
   display: block;
   font-weight: 700;
   font-size: 16px;
   line-height: 24px;
   color: #fff;
   text-align: center;
   border-radius: 0 0 10px 10px;
   padding: 21px 0;
}

.navbar__bnr a img {
   display: block;
   width: auto;
   height: 30px;
   margin: 0 auto 10px;
}

.navbar__bnr .calendar a {
   background-color: #1B9292;
}

.navbar__bnr .calendar a:hover {
   background-color: #5F3F25;
   opacity: 1;
}

.navbar__bnr .mail a {
   background-color: #246E85;
}

.navbar__bnr .mail a:hover {
   background-color: #5F3F25;
   opacity: 1;
}

header.fixed .logo a {
   width: 190px;
   height: 120px;
}

header.fixed .logo img {
   width: 128px;
}

@media screen and (max-width: 1440px) {
   header .logo small {
      width: 150px;
      font-size: 12px;
   }

   #navbar {
      gap: 40px;
   }

   .navbar__nav {
      gap: 20px;
   }
}

@media screen and (max-width: 1300px) {
   header .logo {
      padding-left: 260px;
   }

   header .logo a {
      width: 250px;
   }

   header .logo a img {
      width: 180px;
   }

   #navbar {
      gap: 20px;
   }

   .navbar__nav {
      gap: 20px;
   }
}

@media screen and (max-width: 1199px) {
   header:before {
      display: none;
      height: 50px;
   }

   header .wrap {
      padding-right: 20px;
   }

   header .logo {
      padding-left: 0;
   }

   header .logo small {
      display: none;
   }

   header .logo a {
      width: 126px;
      height: 80px;
      border-radius: 0 0 30px 0;
   }

   header .logo a img {
      width: 86px;
   }

   header.fixed .logo a {
      width: 126px;
      height: 80px;
   }

   header.fixed .logo a img {
      width: 86px;
   }

   .hamburger {
      display: block;
   }

   .header_bnr {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
   }

   .header_bnr a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 58px;
      height: 50px;
      border-radius: 0 0 10px 10px;
   }

   .header_bnr a img {
      width: 30px;
   }

   .header_bnr .calendar a {
      background-color: #1B9292;
   }

   .header_bnr .mail a {
      background-color: #246E85;
   }

   #navbar {
      flex-direction: column;
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: 0;
      width: 100%;
      height: 100vh;
      background-color: #fff;
      box-sizing: border-box;
      font-size: 16px;
      position: fixed;
      top: 0;
      left: 0;
      transition: all 0.5s ease-in-out;
      z-index: -1;
      opacity: 0;
      visibility: hidden;
      overflow: auto;
      padding: 80px 20px 150px;
   }

   .navbar_logo {
      display: block;
      width: 135px;
   }

   .navbar__nav {
      width: 240px;
      flex-direction: column;
      gap: 0;
      text-align: center;
   }

   .navbar__nav li {
      width: 100%;
      border-bottom: 3px dotted #31BCBC;
      padding: 20px 0;
   }

   .navbar__nav li>a,
   .navbar__nav .sub__menu-btn {
      background: transparent;
      padding: 0;
   }

   .navbar__nav .sub__menu-btn i {
      padding-left: 5px;
   }

   .navbar__nav .sub__menu-main {
      font-weight: 500;
      font-size: 15px;
      line-height: 22px;
      padding-top: 10px;
   }

   .navbar__nav .sub__menu-main p {
      padding-top: 10px;
   }

   .navbar__bnr {
      padding-top: 30px;
   }

   .navbar__bnr a {
      border-radius: 10px;
   }

   .navOpen {
      overflow: hidden;
   }

   .navOpen .logo,
   .navOpen .header_bnr li:not(.hamburger) {
      opacity: 0;
      pointer-events: none;
   }

   .navOpen #navbar {
      opacity: 1;
      visibility: visible;
   }
}

@media screen and (min-width: 1200px) {
   .navbar__nav .sub__menu-btn {
      cursor: pointer;
   }

   .navbar__nav .sub__menu-btn i {
      padding-left: 5px;
   }

   .navbar__nav .sub__menu-main {
      width: max-content;
      background-color: #fff;
      border: 1px solid #5F3F25;
      font-weight: 500;
      font-size: 15px;
      line-height: 20px;
      text-align: center;
      padding: 15px;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
   }

   .navbar__nav .sub__menu-main p+p {
      padding-top: 10px;
   }

   .navbar__nav .sub__menu:hover .sub__menu-main {
      opacity: 1;
      visibility: visible;
   }
}

/*=============================================
 * <section>
 *=============================================*/
/* --- --- */
section {
   width: auto;
   box-sizing: border-box;
   margin: 0;
}

/* --- --- */
/*=============================================
 * <footer>
 *=============================================*/
footer {
   background: #EBF6F6 url("../img/common/footer-deco.png") repeat-x center bottom 10px/auto 35px;
   position: relative;
   padding: 0 0 125px;
}

footer .logo {
   width: 185px;
   margin: 0 auto;
}

footer .nav {
   font-weight: 700;
   text-align: center;
   padding-top: 20px;
}

footer .nav li {
   width: 25%;
   box-sizing: border-box;
   border-left: 3px dotted #31BCBC;
   padding: 20px 10px;
}

footer .nav li:last-child {
   border-right: 3px dotted #31BCBC;
}

footer .nav li img {
   display: block;
   width: 50px;
   margin: 0 auto 6px;
}

footer .nav .sub__menu {
   font-weight: 500;
   font-size: 15px;
   padding-top: 10px;
}

footer .nav .sub__menu p {
   padding-top: 10px;
}

footer address {
   color: #5F3F25;
   width: 60px;
   height: 100vh;
   font-weight: 500;
   font-size: 15px;
   line-height: 60px;
   text-align: center;
   position: fixed;
   top: 0;
   right: 0;
}

.error404 footer,
.page-id-424 footer,
.page-id-2215 footer {
   padding-top: 30px;
}

@media screen and (max-width: 991px) {
   footer .nav {
      padding-bottom: 30px;
   }

   footer address {
      color: #333;
      width: 100%;
      height: auto;
      position: static;
   }
}

@media screen and (max-width: 767px) {
   footer {
      padding-bottom: 64px;
   }

   footer .logo,
   footer .nav {
      display: none;
   }

   footer address {
      color: #333;
      width: 100%;
      height: auto;
      font-size: 13px;
      line-height: 20px;
      position: static;
   }
}

/*
 * Animation
*=============================================*/
/* -- -- */
.fadeInUp {
   opacity: 0;
}

.fadeInUp[style*="visible"] {
   opacity: 1;
}

/* -- -- */
.img_effect {
   display: inline-block;
   overflow: hidden;
   position: relative;
}

.img_effect:after {
   content: "";
   animation-duration: 300ms;
   animation-fill-mode: forwards;
   animation-delay: 300ms;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background-color: #fff;
}

.img_effect[style*="visible"]:after {
   animation-name: homeTileAnimation;
}

@keyframes homeTileAnimation {
   0% {
      transform: translateX(0);
   }

   to {
      transform: translateX(-120%);
   }
}

/*
 * Key visual
*=============================================*/
#kv {
   display: flex;
   align-items: center;
   flex-direction: row-reverse;
   gap: 20px;
   background-color: #F3F6EB;
   margin: 0;
   padding: 25px 60px 40px;
   position: relative;
}

#kv .photo {
   width: calc(50% - 100px);
}

#kv .photo img {
   width: 100%;
   max-width: inherit;
   height: auto;
   border-radius: 60px;
   border: 10px solid #ACE3DD;
   box-sizing: border-box;
}

.kv__ttl {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 690px;
   min-height: 222px;
   text-align: left;
   position: relative;
}

.kv__ttl:before {
   content: '';
   width: 117px;
   height: 223px;
   background: url("../img/common/kv-deco.png") no-repeat center top/cover;
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
}

.kv__ttl .en:first-letter {
   text-transform: uppercase;
}

#kv.no-img .photo {
   min-height: 520px;
}

@media screen and (max-width: 1440px) {
   .kv__ttl {
      width: 650px;
   }
}

@media screen and (max-width: 1199px) {
   #kv {
      flex-direction: row;
      flex-wrap: wrap;
      height: auto;
      min-height: 128px;
      padding: 40px 20px;
   }

   #kv:before {
      content: '';
      width: 100%;
      height: 50px;
      background-color: #F3F6EB;
      position: absolute;
      bottom: 100%;
      left: 0;
   }

   #kv .photo {
      width: 100%;
      height: auto;
      position: static;
   }

   #kv .photo img {
      height: auto;
   }

   .kv__ttl {
      width: 100%;
      text-align: center;
   }

   .kv__ttl:before {
      left: 50%;
      transform: translate(-50%, -50%);
   }

   #kv.no-img .photo {
      min-height: 0;
   }
}

@media screen and (max-width: 767px) {
   #kv .photo img {
      border-radius: 20px;
      border-width: 5px;
   }

   .kv__ttl {
      min-height: 128px;
   }

   .kv__ttl:before {
      width: 68px;
      height: 128px;
   }
}

/*
 * Breadcrumbs
*=============================================*/
.breadcrumbs {
   width: 100%;
   font-size: 15px;
   line-height: 20px;
   padding: 10px 0;
}

.breadcrumbs .wrap>span {
   display: inline-block;
   word-break: break-all;
   text-transform: uppercase;
   padding: 0 10px;
}

.breadcrumbs .wrap>span:first-child {
   padding-left: 0;
}

.breadcrumbs a:hover {
   text-decoration: underline;
}

@media screen and (max-width: 991px) {
   .breadcrumbs {
      font-size: 12px;
      overflow-x: auto;
      box-sizing: border-box;
      padding: 10px 20px;
   }

   .breadcrumbs .wrap {
      width: max-content;
      max-width: inherit;
      background-color: transparent;
      margin: 0;
      padding: 0;
   }

   .breadcrumbs .wrap>span {
      display: inline-block;
      word-break: break-all;
      padding: 0 10px;
      position: relative;
      top: 1px;
   }

   .breadcrumbs .wrap>span:first-child {
      padding-left: 0;
   }
}

/*=============================================
 * 404
 *=============================================*/
#content-404 {
   text-align: center;
   padding: 120px 0 100px;
}

#content-404 .txt {
   padding-top: 40px;
}

#content-404 .button {
   padding-top: 50px;
}

@media screen and (max-width: 767px) {
   #content-404 {
      padding: 60px 0;
   }

   #content-404 .txt {
      padding-top: 20px;
   }

   #content-404 .button {
      padding-top: 30px;
   }
}

/*
 * 
*=============================================*/
#lead {
   padding: 80px 0;
}

#lead .txt-18 {
   padding-top: 40px;
}

#lead .logo {
   width: 288px;
   margin: 0 auto;
   padding-bottom: 40px;
}

@media screen and (max-width: 767px) {
   #lead {
      padding: 40px 0;
   }

   #lead .txt-18 {
      padding-top: 20px;
   }

   #lead .logo {
      width: 200px;
      padding-bottom: 30px;
   }
}

/* -- --*/
.box-text {
   padding-top: 30px;
}

.box-text h3 {
   border-bottom: 1px dashed #333;
   margin-top: 40px;
   padding: 0 0 10px 20px;
   position: relative;
}

.box-text h3:before {
   content: '';
   width: 0;
   height: 0;
   border-width: 7px 0 7px 10px;
   border-style: solid;
   border-color: transparent transparent transparent #FFBD59;
   position: absolute;
   top: 10px;
   left: 0;
}

.box-text h3:first-child {
   margin-top: 0;
}

.box-text .txt {
   padding: 10px 20px 0;
}

.box-text .check {
   background-color: #fff;
   border: 3px solid #41A5C5;
   border-radius: 20px;
   padding: 40px 50px;
   margin-top: 30px;
}

.box-text .check .item {
   padding: 0 20px;
}

.box-text .check .item+.item {
   border-top: 3px dotted #41A5C5;
   margin-top: 20px;
   padding-top: 20px;
}

.box-text .check h4 i {
   margin-right: 5px;
}

.box-text .check .txt {
   padding: 10px 0 0;
}

/* -- --*/
.hvr-sweep-to-right {
   overflow: hidden;
   position: relative;
   z-index: 1;
}

.hvr-sweep-to-right:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: #41A5C5;
   -webkit-transform: scaleX(0);
   transform: scaleX(0);
   -webkit-transform-origin: 0 50%;
   transform-origin: 0 50%;
   -webkit-transition-property: transform;
   transition-property: transform;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
   border-radius: inherit;
}

.hvr-sweep-to-right:hover {
   opacity: 1;
}

.hvr-sweep-to-right:hover:before {
   -webkit-transform: scaleX(1);
   transform: scaleX(1);
}