@charset "UTF-8";
/**
 * SCSS Information
 * ===============================================================
 *
 * File name: _module.scss
 * Summary:   モジュール用スタイル
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    modules
 *
 * ===============================================================
*/
/** =1
 * ========================================
 * modules
 * ========================================
 */

.sideNavWrapper{
  left: 0;
  top: 0;
  bottom: 0;
  flex-direction: column;
  justify-content: space-between;
  width: 264px;
  padding: 60px 50px;
}

    @media screen and (max-width: 912px) {
      .sideNavWrapper{
        width: 244px;
        padding: 60px 40px;
      }
    }

    @media screen and (max-width: 777px) {
      .sideNavWrapper{
        width: 222px;
        padding: 60px 35px;
      }
    }

    @media screen and (max-width: 767px) {
      .sideNavWrapper{
        left: 0;
        top: 0;
        bottom: auto;
        right: 0;
        z-index: 10;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        padding: 20px;
        background: #fff;
      }
      .sideNavWrapper.scrolled{
        padding: 10px 10px 0;
      }
      .is-menuOpened .sideNavWrapper.scrolled{
        padding: 20px;
      }
      /* .mainLogoH1{
        padding-right: 182px;
      } */
    }

.h1Shoulder{
  font-size: 14px;
  font-size: 1.4rem;
  letter-spacing: .03em;
}
.h1Title{
  padding-bottom: 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #77a2be;
  font-size: 34px;
  font-size: 3.4rem;
}
.h1Caption{
  font-size: 12px;
  font-size: 1.2rem;
  letter-spacing: .02em;
}

    @media screen and (max-width: 777px) {
      .h1Shoulder{
        font-size: 12px;
        font-size: 1.25rem;
      }
      .h1Title{
        font-size: 31px;
        font-size: 3.15rem;
      }
      .sideNavWrapper.scrolled .h1Title{
        margin-bottom: 0;
      }
      .is-menuOpened .sideNavWrapper.scrolled .h1Title{
        margin-bottom: 5px;
      }
      .h1Caption{
        font-size: 12px;
        font-size: 1.2rem;
      }
      .sideNavWrapper.scrolled .h1Caption{
        display: none;
      }
      .is-menuOpened .sideNavWrapper.scrolled .h1Caption{
        display: block;
      }
    }


.middleNavUl,
.bottomNavUl{
  font-size: 17px;
  font-size: 1.7rem;
  line-height: 1.6;
}
.middleNavLi a,
.bottomNavLi a{
  position: relative;
  display: block;
}
.middleNavLi a.current,
.middleNavLi a:hover,
.bottomNavLi a.current,
.bottomNavLi a:hover{
  color: #77a2be;
}
.middleNavLi a::before{
  content: "";
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translate(0 , -50%);
  width: 0;
  height: 1px;
  background: #77a2be;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.middleNavLi a:hover::before,
.middleNavLi a.current::before{
  width: 40px;
}
.middleNavLiSeparateMark{
  margin: 8px 0;
  font-size: 12px;
  font-size: 1.2rem;
  color: #838383;
}

    @media screen and (max-width: 912px) {
      .middleNavLi a::before{
        left: -40px;
      }
      .middleNavLi a:hover::before,
      .middleNavLi a.current::before{
        width: 30px;
      }
    }

    @media screen and (max-width: 777px) {
      .middleNavLi a::before{
        left: -35px;
      }
      .middleNavLi a:hover::before,
      .middleNavLi a.current::before{
        width: 25px;
      }
    }

    @media screen and (max-width: 767px) {
      .sideNavWrapper .middleNavUl,
      .sideNavWrapper .bottomNavUl{
        display: none;
      }

      .sidepanelNavWrapper .middleNavUl,
      .sidepanelNavWrapper .bottomNavUl{
        font-size: 19px;
        font-size: 1.9rem;
        line-height: 1.6;
      }
      .middleNavLi a::before{
        left: -50px;
      }
      .middleNavLi a:hover::before,
      .middleNavLi a.current::before{
        width: 40px;
      }
    }


.bottomNavIcon{
  width: 15px;
  vertical-align: -.1em;
}
.bottomNavLi path{
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.bottomNavLi a.current .bottomNavIcon path,
.bottomNavLi a:hover .bottomNavIcon path{
  fill: #77a2be;
}


.innerPageTitle{
  margin-bottom: 60px;
  font-size: 36px;
  font-size: 3.6rem;
}
.h2MarkWrapper{
  margin: 15px 0;
}
.h2Mark{
  width: 20px;
}
.innerPageTitleJp{
  font-size: 14px;
  font-size: 1.4rem;
}

    @media screen and (max-width: 767px) {
      .innerPageTitle{
        margin-bottom: 40px;
      }
    }


.instaLinkWrapper{
  right: 23px;
  top: 50%;
  transform: translate(0 , -50%);
}
a.instaLink{
  text-orientation: upright;
  letter-spacing: -.3em;
  font-size: 12px;
  font-size: 1.22rem;
}
.instaIcon{
  width: 15px;
  margin: 0 0 3px -1px;
}

    @media screen and (max-width: 912px) {
      a.instaLink{
        letter-spacing: -.2em;
      }
    }

    @media screen and (max-width: 767px) {
      .instaLinkWrapper{
        position: static;
        text-align: center;
      }
      .instaLinkWrapper a.instaLink{
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        letter-spacing: initial;
      }
      .instaLinkWrapper .instaIcon{
        margin: 0 5px 3px 0;
      }

      .sidepanelInstaLinkWrapper{
        bottom: 20px;
        right: 35px;
      }
      .sidepanelInstaLinkWrapper a.instaLink{
        letter-spacing: -.1em;
      }
    }



/*
* btn
* ----------------------------------
*/
.btnWrapper{
  margin: 50px 0 0;
}
a.btn,
button.btn{
  width: 80%;
  max-width: 280px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #000;
  line-height: 1;
}
.btnArrowImg{
  width: 11px;
  vertical-align: -0.5px;
}
.btnArrowLeft{
  margin-right: 8px;
}
.btnArrowRight{
  margin-left: 8px;
}



/*
* footer
* ----------------------------------
*/
.footerCompanyProfile{
  margin: 40px 0 100px;
}
.footerCompanyProfileTitle{
  font-size: 16px;
  font-size: 1.6rem;
}
.footerCompanyProfileAddress{
  line-height: 1.8;
}
.copyright{
  padding-bottom: 15px;
}

    @media screen and (max-width: 767px) {
      .copyright{
        text-align: center;
      }
    }


/*
* standardDl
* ----------------------------------
*/
.standardDl{
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px dotted #aaaaaa;
  font-size: 15px;
  font-size: 1.5rem;
}
.standardDt{
  width: 175px;
  color: #77a2be;
  font-weight: 500;
}
.standardDd{
  width: calc(100% - 175px);
}

    @media screen and (max-width: 912px) {
      .standardDl{
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 0 20px;
      }
      .standardDt{
        width: 100%;
      }
      .standardDd{
        width: 100%;
      }
    }


/*
* slick
* ----------------------------------
*/
.slickSlider{
  opacity: 0;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.slickSlider.slick-initialized{
  opacity: 1
}

/*
* iframe
* ----------------------------------
*/
.iframeWrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.iframeWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/*
* pagetop
* ----------------------------------
*/
.pagetop {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.pagetop a {
  display: block;
  height: 90px;
  padding: 0 10px 0 20px;
  writing-mode: vertical-rl;
  font-size: 10px;
  font-size: 1.0rem;
  color: #000;
}
.pagetop a.scrolled {
  /* display: none; */
  text-align: right;
}
.pagetop a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 30px;
  width: 1px;
  height: 100%;
  background: #000;
}
.pagetop a::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 18px;
  width: 12px;
  height: 1px;
  background: #000;
  transform: rotate(-60deg);
  transform-origin: left bottom;
}
.pagetop a.scrolled::after {
  bottom: auto;
  top: 0;
  background: #000;
  transform: rotate(60deg);
}
.pagetop a.scrolled span{
  padding-bottom: 5px;
}
.pagetop a.scrolled span::before{
  visibility: visible;
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  height: 1px;
  width: 16px;
  background: #000;
}

    @media screen and (max-width: 999px) {

    }

    @media screen and (max-width: 767px) {

    }


/*ハンバーガーメニュー ここから*/
.navHandler {
  display: none;
  position: absolute;
  top: 28px;
  right: 20px;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

    @media screen and (max-width: 767px) {
      .navHandler {
        display: block;
      }
      .sideNavWrapper.scrolled .navHandler{
        top: 18px;
        right: 10px;
      }
      .is-menuOpened .sideNavWrapper.scrolled .navHandler{
        top: 28px;
        right: 20px;
      }
    }

/* .navHandler a{
  color: #000;
}
.is-menuOpened .navHandler a{
  color: #fff;
} */

.menu-trigger,
.menu-trigger span{
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger{
  position: relative;
  width: 32px;
  height: 24px;
}
.menu-trigger span{
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
}
.menu-trigger span:nth-of-type(1){
  top: 0;
}
.menu-trigger span:nth-of-type(2){
  top: 11px;
}
.menu-trigger span:nth-of-type(3){
  bottom: 0;
}

/*エフェクト用*/
.menu-trigger.active span:nth-of-type(1){
  -webkit-transform: translateY(11px) rotate(-315deg);
  transform: translateY(11px) rotate(-315deg);
}
.menu-trigger.active span:nth-of-type(2){
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3){
  -webkit-transform: translateY(-11px) rotate(315deg);
  transform: translateY(-11px) rotate(315deg);
}

/*ハンバーガーメニュー ここまで*/


p.error_messe{
	text-align: center;
	color: #FF0004;
}