@charset "utf-8";
/* =============================================================================
   base
   ========================================================================== */
main { display: block; }
html { background: #fff; color: #333; font-size: 62.5%; line-height: 1.5; }
body { font-family: YakuHanJP, 'Roboto', "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif; text-align: center; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; }
body, div, pre, p, blockquote,a,form, fieldset, figure, input, textarea, select, option,button,label, select, textarea,table,tr,th,td,dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,embed, object, header, footer, nav, article, aside, section, main { margin: 0; padding: 0; vertical-align: baseline; box-sizing: border-box; }
body, div, section, header, footer, nav, article, aside, main, dl, ul, p, a { backface-visibility: hidden; }
a { color: #333; border: 0; cursor: pointer; outline: 0; background-color: transparent; overflow: hidden; text-decoration: none; }
a:hover,
a:active,
a:focus { outline: 0; }
table { border-collapse: collapse; border-spacing: 0; }
td,
th { padding: 0; }
img { border: 0; vertical-align: bottom; line-height: 0px; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
ol, ul { list-style-type: none; }
em, strong { font-weight: bold; font-style: normal; }


/* =============================================================================
   common
   ========================================================================== */
img { max-width: 100%; height: auto; }
img[src$=".svg"] { max-width: 100%; }


/* perfect-scrollbar v0.8.1 */
.ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail { background-color: transparent; opacity: 1; }
.ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y { background-color: #fff; width: 5px; }
.ps > .ps__scrollbar-y-rail { display: block; width: 5px; opacity: 1; }
.ps > .ps__scrollbar-y-rail > .ps__scrollbar-y {  background-color: #fff; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; right: 0; width: 5px; }
.ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y, .ps > .ps__scrollbar-y-rail:active > .ps__scrollbar-y { width: 5px; }
.ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail { background-color: transparent; opacity: 0; }
.ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y { background-color: #fff; width: 5px; }
.ps:hover > .ps__scrollbar-x-rail,
.ps:hover > .ps__scrollbar-y-rail { opacity: 1; }
.ps:hover > .ps__scrollbar-y-rail:hover { background-color: transparent; opacity: 1; }
.ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y { background-color: #fff; }

:placeholder-shown { color: #b8b8b8; }
::-webkit-input-placeholder { color: #b8b8b8; }
:-ms-input-placeholder { color: #b8b8b8; }
.c-txtbox,
.c-txtarea { width: 100%; height: 57px; border: 0; background-color: #fff; border-radius: 0;  border: 0; padding: 0 20px; outline: 0; font-size: 1.6rem; font-family: inherit; }
.c-txtarea { width: 100%; height: 230px; padding: 20px; }
@media only screen and (max-width: 800px) {
  :placeholder-shown { color: transparent; }
  ::-webkit-input-placeholder { color: transparent; }
  :-ms-input-placeholder { color: transparent; }
}
@media only screen and (max-width: 640px) {
  .c-txtbox,
  .c-txtarea {
    appearance: none;
  }
}
@media only screen and (max-width: 480px) {
  .c-txtbox,
  .c-txtarea { height: 45px; padding: 0 16px; font-size: 1.3rem; }
  .c-txtarea { height: 185px; padding: 16px; }
}


#l-wrapper { position: relative; z-index: 0; opacity: 0; }
.cm-loading { position: fixed; bottom: 0; width: 100%; height: 100vh; z-index: 99; }
.cm-loading-body { display: table; width: 100%; height: 100%; }
.cm-loading-body__inner { display: table-cell; vertical-align: middle; }

/* =============================================================================
   utility
   ========================================================================== */
.u-section { max-width: 1100px; width: 93.75%; margin: 0 auto; text-align: left; }
.u-sectionnarrow { max-width: 1000px; width: 93.75%; margin: 0 auto; text-align: left; }

.u-pcNone { display: none; }
.u-cf:after { content: ""; clear: both; display: block; }
@media only screen and (max-width: 800px) {
    .u-spNone { display: none; }
    .u-pcNone { display: block; }
}

.u-target { transition: opacity .3s; }
.u-target:hover { opacity: .6; }
@media only screen and (max-width: 800px) {
    .u-target:hover { opacity: 1; }
}

.u-animateblock { opacity: 0; }


.u-en { font-family: 'Playfair Display', serif; font-weight: 700; }
.u-jp { font-family: YakuHanJP, YuGothic, "Yu Gothic", Meiryo, sans-serif; font-weight: bold; }

.u-whitebg { background-color: #fff; }
.u-graybg { background-color: #efefef; }

.u-block { padding: 125px 0 90px; }
@media only screen and (max-width: 480px) {
  .u-block { padding: 65px 0; }
}


/* =============================================================================
   component
   ========================================================================== */
.c-title { text-align: center; }
.c-title__en,
.c-title__jp { display: block; line-height: 1; }
.c-title__en { font-size: 7rem; letter-spacing: .04em; text-indent: .04em; }
.c-title__jp { font-size: 1.8rem; letter-spacing: .04em; text-indent: .04em; line-height: 1; margin-top: 11px; }
@media only screen and (max-width: 800px) {
  .c-title__en { font-size: calc(55/640*100vw); }
  .c-title__jp { font-size: calc(26/640*100vw); margin-top: calc(15/600*100%); }
}

.c-toptitle { font-size: 1.6rem; line-height: 1.8; text-align: center; margin-top: 27px; }
@media only screen and (max-width: 800px) {
  .c-toptitle { text-align: left; }
}
@media only screen and (max-width: 480px) {
  .c-toptitle { font-size: 1.3rem; margin-top: 22px; }
}

/* =============================================================================
   common module
   ========================================================================== */
.cm-notarget { display: none; }
.lt-ie9 .cm-notarget { display: table; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999; background-color: #fff; }
.lt-ie9 .cm-notarget-inner { display: table-cell; vertical-align: middle; }
.lt-ie9 .cm-notargetTitle { font-size: 20px; font-weight: bold; }
.lt-ie9 .cm-notargetTxt { margin: 25px 0 40px; font-size: 18px; line-height: 1.8; }
.lt-ie9 .cm-notargetBrowserItem { display: inline; zoom: 1; margin: 0 10px; }
.lt-ie9 .cm-notargetBrowserItem a { font-size: 16px; }


/* header */
.cm-h { position: absolute; top: 0; left: 0; width: 100%; padding: 23px 22px 0 51px; z-index: 9999; text-align: left; }
.cm-h__logo { float: left; margin-top: 24px; }
.cm-h-info { float: right; font-size: 0; }
.cm-h__nav,
.cm-h__navList,
.cm-h__navListItem,
.cm-h__mail { display: inline-block; vertical-align: middle; }
.cm-h__navListItem:not(:first-child) { margin-left: 34px; }
.cm-h__navListItem .target { color: #fff; transition: color .3s; font-size: 1.4rem; letter-spacing: .06em; }
.cm-h__navListItem .target:hover { color: #ffff00; }
.cm-h__mail { margin-left: 23px; }
@media only screen and (max-width: 800px) {
  .cm-h { padding: 23px 3.125% 0; }
  .cm-h__logo { margin-top: 24px; }
  .cm-h__nav { display: none; }
  .cm-h__mail { margin-left: 0; }
}
@media only screen and (max-width: 480px) {
  .cm-h { padding-top: calc(23/640*100%); }
  .cm-h__logo { margin-top: calc(24/640*100%); }
  .cm-h__logo { width: calc(223/640*100%); }
  .cm-h-info { width: calc(80/640*100%); }
}



/* footer */
.cm-f { background-color: #fff; padding: 30px 0; position: relative; z-index: 1; }
.cm-f__copyTxt { font-size: 1.1rem; line-height: 1; }


.cm-f__group { font-size: 12px; margin-bottom: calc(45em/12); }
.cm-f__groupTitle { font-weight: bold; font-size: calc(13em/12); margin-bottom: 1em; text-align: center; }
.cm-f__groupList { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 0 calc(-13em/12) calc(-13em/12); }
.cm-f__groupListItem { padding: 0 calc(13em/12); line-height: 1; margin-bottom: calc(13em/12); }
.cm-f__groupListItem:not(:last-of-type) { border-right: 1px solid #181818; }
.cm-f__groupListItem .target { color: #181818; }
.cm-f__groupListItem .target:hover { text-decoration: underline; }
@media only screen and (max-width: 800px) {
  .cm-f__group { font-size: 11px;  }
  .cm-f__groupTitle { text-align: left; }
  .cm-f__groupList { justify-content: flex-start;}
}


/* =============================================================================
   page
   ========================================================================== */

/* video */
.p-fixedvideo { position: fixed; top: 0; bottom: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; }
.p-fixedvideo::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .4); z-index: 1; }
.p-fixedvideo video { min-width: 100%; min-height: 100%; width: auto; height: auto; position: relative;  z-index: 0; }
@media only screen and (max-width: 800px) {
  .p-fixedvideo { position: absolute; height: calc(800/640*100vw); overflow: hidden; }
  .p-fixedvideo video { width: auto; height: 100%; position: absolute; top: 0; left: 50%; transform: translate3d(-50%, 0px, 0px); }
}


/* main */
.main-inner { position: relative; z-index: 1; }


/* mv */
.p-mv { position: relative; display: table; width: 100%; height: 100vh; z-index: 1; }
.p-mv-inner { display: table-cell; vertical-align: middle; }
.p-mv__title { padding-top: 30px; position: relative; display: inline-block; opacity: 0; }
.p-mv__title.is-active { opacity: 1; }
.p-mv__title.is-active svg .path {  fill: transparent; stroke:transparent; stroke-dasharray: 1300; stroke-dashoffset: 0; stroke-width: 1; -webkit-animation: mvtitle 1.5s ease-in; -webkit-animation-fill-mode: forwards; animation: mvtitle 1.5s ease-in; animation-fill-mode: forwards; }
.p-mv__title.is-active svg .path:nth-child(4) { animation-delay: 1.5s; }
.p-mv__title.is-active svg .path:nth-child(5) { animation-delay: 1.1s; }
@-webkit-keyframes mvtitle {
      0% {
        stroke:  #fff;
        stroke-dashoffset: 1300;
        fill:transparent;
      }
      65% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#fff;
      }
    }
@keyframes mvtitle {
      0% {
        stroke:  #fff;
        stroke-dashoffset: 1300;
        fill:transparent;
      }
      65% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#fff;
      }
    }
.p-mv__titleTxt { position: absolute; top: 235px; right: -120px; font-size: 1.8rem; color: #fff; letter-spacing: .06em; line-height: 1.9; }
.p-mv__titleTxt span { display: block; transition: transform .8s, opacity .8s; transform: translate3d(-10px, 0px, 0px); }
.p-mv__titleTxt span.is-active { opacity: 1; transform: translate3d(0px, 0px, 0px); }
.p-mv__titleTxt span:nth-child(1) { transition-delay: 1s; }
.p-mv__titleTxt span:nth-child(2) { transition-delay: 1.2s; }
.p-mv__scroll { opacity: 0; position: absolute; bottom: -45px; width: 260px; height: 100px; left: 50%; margin-left: -130px; transition: transform .8s, opacity .8s; transform: translate3d(0px, 100px, 0px); }
.p-mv__scroll.is-active { opacity: 1; transform: translate3d(0px, 0px, 0px); transition-delay: 1.5s; }
.p-mv__scroll a { display: block; height: 100%; background-color: #ffff00; padding-top: 20px; font-size: 1.3rem; letter-spacing: .08em; text-indent: .08em; color: #000; font-weight: 500; }
@media only screen and (max-height: 700px) and (min-width: 800px), screen and (max-width: 1280px) {
  .p-mv__title { padding-top: 24px; }
  .p-mv__title svg { width: 609px; height: auto; }
  .p-mv__titleTxt { top: 250px; right: -76px; font-size: 1.4rem; }
  .p-mv__scroll { bottom: -36px; width: 208px; height: 80px; margin-left: -104px; }
  .p-mv__scroll a { padding-top: 16px; font-size: 1.1rem; }
}
@media only screen and (max-width: 800px) {
  .p-mv { height: calc(800/640*100vw); }
  .p-mv__title { padding-top: 30px; width: calc(555/600*100%); margin: 0 auto; display: block;}
  .p-mv__title svg { width: 100%; }
  .p-mv__titleTxt { position: static; font-size: calc(28/640*100vw); margin-top: calc(43/555*100%); }
  .p-mv__scroll { display: none; }
}
@media only screen and (max-width: 480px) {
  .p-mv__title { padding-top: calc(30/600*100%); }
}


/* about */
.p-about { background-color: #000; position: relative; z-index: 0; }
.p-about-body { display: table; width: 100%; table-layout: fixed; }
.p-about__txt,
.p-about__img { display: table-cell; vertical-align: middle; }
.p-about__txt { padding: 134px 0 65px; }
.p-about__txtTitle { text-align: center; }
.p-about__txtTitle .en,
.p-about__txtTitle .jp { display: block; }
.p-about__txtTitle .jp { font-size: 1.8rem; color: #fff; margin-top: 15px; line-height: 1; letter-spacing: .08em; text-indent: .08em; }
.p-about__txtBody { margin: 33px auto 0; position: relative; width: 510px; height: 440px; text-align: left; padding: 0 25px 30px 0; }
.p-about__txtBody p { font-size: 1.6rem; line-height: 1.8; color: #fff; }
.p-about__txtBody p:not(:first-child) { margin-top: 30px; }
.p-about__txtBody p.name { font-size: 2rem; line-height: 1.5; }
.p-about__txtBody p .name__txt { font-size: 1.5rem; }
.p-about__img { height: 100%; background: url("../images/whoweare-img.jpg") center center no-repeat; background-size: cover; }
.p-about__imgBody { width: 100%; height: 100%;  }
@media only screen and (max-width: 800px) {
  .p-about__bg { height: 450px; background: url("../images/whoweare-img.jpg") 50% 80% no-repeat; background-size: cover;}
  .p-about-body { display: block; }
  .p-about__txtTitle .en img { width: calc(400/640*100%); }
  .p-about__txtTitle .jp { font-size: calc(26/640*100vw); margin-top: calc(15/640*100%); }
  .p-about__txt { display: block; padding: 80px 0; }
  .p-about__txtBody { width: calc(510/640*100%); }
  .p-about__img { display: none; }
}
@media only screen and (max-width: 480px) {
  .p-about__bg { height: 250px; }
  .p-about__txt { padding: 65px 0; }
  .p-about__txtBody { margin-top: 24px; height: 350px; padding: 0 20px 24px 0; }
  .p-about__txtBody p { font-size: 1.3rem; }
  .p-about__txtBody p:not(:first-child) { margin-top: 24px; }
  .p-about__txtBody p.name { font-size: 1.6rem; }
  .p-about__txtBody p .name__txt { font-size: 1.3rem; }
}

/* service */
.p-service__list { margin-top: 58px; }
.p-service__listItem { float: right; width: calc(525/1100*100%); }
.p-service__listItem:first-child { float: left; }
.p-service__listItemBlock .img { display: block; }
.p-service__listItemBlock .title { font-size: 2.4rem; margin: 25px 0 12px; }
.p-service__listItemBlock .txt { font-size: 1.6rem; line-height: 1.8; }
@media only screen and (max-width: 480px) {
  .p-service__list { margin-top: 46px; }
  .p-service__listItem { float: none; width: 100%; }
  .p-service__listItem:first-child { float: none; margin-bottom: 45px; }
  .p-service__listItemBlock .title { font-size: 1.9rem; margin: 20px 0 10px; }
  .p-service__listItemBlock .txt { font-size: 1.3rem; }
}

/* company */
.p-company { margin-top: 100vh; }
.p-company__body { margin-top: 50px; display: table; width: 100%; position: relative; }
.p-company__body::before { content: ""; display: block; width: 47px; position: absolute; top: 0; left: 225px; background-color: #fff; height: 100%; }
.p-company__bodyRow { display: table-row; position: relative; }
.p-company__bodyRowTitle,
.p-company__bodyRowBody { display: table-cell; vertical-align: middle; border-top: 1px solid #c9c9c9; padding: 25px 0; font-size: 1.6rem; line-height: 1.7; }
.p-company__bodyRowTitle { width: 272px; letter-spacing: -.02em; }
.p-company__bodyRowBody a { color: #00a0e9; }
.p-company__bodyRowBody a[href^="tel:"] { color: #333; }
.p-company__map { margin-top: 35px; }
@media only screen and (max-width: 800px) {
  .p-company { margin-top: 0; }
  .p-company__map { position: relative; padding-top: calc(800/1000*100%); }
  .p-company__map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}
@media only screen and (max-width: 640px) {
  .p-company__body { display: block; }
  .p-company__body::before { display: none; }
  .p-company__bodyRow { display: block; }
  .p-company__bodyRow:not(:first-child) { margin-top: 45px; }
  .p-company__bodyRowTitle,
  .p-company__bodyRowBody { display: block; border-top: 0; border-bottom: 1px solid #c9c9c9; padding: 0; }
  .p-company__bodyRowTitle { width: auto; letter-spacing: 0; padding-bottom: 10px; }
  .p-company__bodyRowBody { padding: 13px 0; }
  .p-company__map { margin-top: 45px; }
}
@media only screen and (max-width: 480px) {
  .p-company__body { margin-top: 40px; }
  .p-company__bodyRowTitle,
  .p-company__bodyRowBody { font-size: 1.3rem; }
  .p-company__bodyRow:not(:first-child) { margin-top: 35px; }
  .p-company__map { margin-top: 35px; }
}


/* contact */
.p-contact__form { margin-top: 50px; }
.p-contact__formTblRow:not(:first-child) { margin-top: 22px; }
.p-contact__formTblRow .col { width: calc(480/1000*100%); float: right; }
.p-contact__formTblRow .col:first-child { float: left; }
.p-contact__formTblRow .title { display: none; }
.p-contact__formTbl .error .c-txtbox,
.p-contact__formTbl .error .c-txtarea {  background-color: #ebbbbb; }
.p-contact__formTbl .error .validationMessage { display: block; color: #e53f52; margin-top: 10px; font-size: 1.6rem; }
.p-contact__formBtn { width: 700px; margin: 47px auto 0; }
.p-contact__formBtnBody a { display: block; line-height: 85px;background-color: #ffff00; color: #333; font-size: 1.6rem; text-align: center; }
.p-contact__formBtnBodyLoad,
.p-contact__formResult { margin-top: 20px; text-align: center; }
.p-contact__formBtnBodyLoad { display: none; }
.p-contact__formResult p { font-size: 1.6rem; border: 2px solid #ffff00; display: none; padding: 20px; background-color: #fff; }
@media only screen and (max-width: 800px) {
  .p-contact__formTblRow .col { width: 100%; float: none; margin-top: 35px; }
  .p-contact__formTblRow .col:first-child { float: none; margin-top: 0; }
  .p-contact__formTblRow .title { display: block; font-size: 1.6rem; margin-bottom: 8px; }
  .p-contact__formBtn { width: 100%; }
}
@media only screen and (max-width: 480px) {
  .p-contact__form { margin-top: 40px; }
  .p-contact__formTblRow:not(:first-child) { margin-top: 18px; }
  .p-contact__formTblRow .col { margin-top: 28px; }
  .p-contact__formTblRow .title { font-size: 1.3rem; margin-bottom: 6px; }
  .p-contact__formTbl .error .validationMessage { margin-top: 8px; font-size: 1.3rem; }
  .p-contact__formBtn {  margin-top: 37px; }
  .p-contact__formBtnBody a { line-height: 70px; font-size: 1.3rem; }
  .p-contact__formBtnBodyLoad,
  .p-contact__formResult { margin-top: 16px; }
  .p-contact__formResult p { font-size: 1.3rem; padding: 16px; }
}