@charset "utf-8";

/*====================================================================================================

  Layout

    1.  Header
    2.  Navigation
    3.  Contents
    4.  Footer

====================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  Loading
  
----------------------------------------------------------------------------------------------------*/

html.is-loading {
  overflow:hidden;
}

.l-loading {
  width:100%;
  height:100vh;
  position:fixed;
  left:0;
  top:0;
  z-index:999;
  color:#fff;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.l-load {
  opacity:0;
}

html.is-load .l-load {
  opacity:1;
  width:100%;
  height:100vh;
  position:fixed;
  left:0;
  top:0;
  z-index:999;
  color:#fff;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.l-load:before {
  content:"";
  width:100%;
  height:100vh;
  position:fixed;
  left:0;
  top:0;
  background-color:#141414;
  transform-origin:right top;
  transform:scale(0,1);
  -webkit-transition:transform 0.6s cubic-bezier(.23, 1, .32, 1);
  transition:transform 0.6s cubic-bezier(.23, 1, .32, 1); /* easeOutQuint */
}

html.is-gNavOpen .l-load:before,
html.is-load .l-load:before {
  transform-origin:left top;
  transform:scale(1,1);
}

.l-loading:before {
  content:"";
  width:100%;
  height:100vh;
  z-index:-1;
  position:fixed;
  left:0;
  top:0;
  background-color:#141414;
  transform-origin:left top;
  transform:scale(1,1);
  -webkit-transition:transform 1.2s cubic-bezier(.23, 1, .32, 1);
  transition:transform 1.2s cubic-bezier(.23, 1, .32, 1); /* easeOutQuint */
}

body:not([pg="home"]) .l-loading__cont {
  display:none;
}

body[pg="home"] .l-loading__cont {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

html.is-loaded .l-loading:before {
  transform-origin:right top;
  transform:scale(0,1);
}

body[pg="home"] #loading-logo {
  position:relative;
  width:240px;
  height:53px;
  background:url(../image/logoJP_gray.svg) no-repeat center center;
  background-size:contain;
}

body[pg="home"] #loading-logo__mask {
  position:absolute;
  top:0;
  left:0;
  width:240px;
  height:53px;
  clip:rect(0,0,53px,0);
  background:url(../image/logoJP.svg) no-repeat center center;
  background-size:contain;
  background-color:#141414;
  -webkit-animation:loadingLogo-mask 1s forwards;
  animation:loadingLogo-mask 1s forwards;
}

@media screen and (max-width:640px) {
  body[pg="home"] .l-loading__cont {
    transform:scale(0.8);
  }
}

@media screen and (max-width:560px) {
  body[pg="home"] .l-loading__cont {
    transform:scale(0.7);
  }
}

@-webkit-keyframes loadingLogo-mask {
  0% { clip:rect(0,0,53px,0); }
  100% { clip:rect(0,240px,53px,0); }
}

@keyframes loadingLogo-mask {
  0% { clip:rect(0,0,50px,0); }
  100% { clip:rect(0,240px,53px,0); }
}


/*----------------------------------------------------------------------------------------------------

  1. Header
  
----------------------------------------------------------------------------------------------------*/

header {
  position:fixed;
  left:0;
  top:0;
  z-index:20;
  color:#fff;
  text-align:left;
}

_:-ms-lang(x), header:hover {
  z-index:110;
}

.l-hd {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
}

.l-hdLogo a,
.l-hdLogo a:visited,
.l-hdLogo a:hover { color:#fff; text-decoration:none; }

.l-hdLogo a {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.l-hdLogo .logo-jp {
  display:inline-block;
  vertical-align:middle;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  background:url(../image/logoJP.svg) no-repeat left center;
  background-size:contain;
}

@media print,screen and (min-width:641px) {
  header {
    padding:40px 0 40px 40px;
    width:-webkit-calc(100% - 88px);
    width:calc(100% - 88px);
    min-width:912px;
  }
  
  .l-hdLogo {
    margin-left:-12px;
    margin-top:-6px;
  }
  
  .l-hdLogo a {
    height:36px;
  }
  
  .l-hdLogo .logo-jp {
    width:164px;
  }
}

@media screen and (max-width:640px) {
  header {
    padding:1.5em 0 1.5em 1.25em;
    width:-webkit-calc(100% - 64px);
    width:calc(100% - 64px);
  }
  
  .l-hdLogo a {
    height:28px;
  }
  
  .l-hdLogo .logo-jp {
    width:127px;
  }
}

@media screen and (max-width:400px) {
  header {
    width:-webkit-calc(100% - 60px);
    width:calc(100% - 60px);
  }
}

.l-hdNav {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.l-hdNav ul {
  list-style:none;
}

.l-hdNav ul a,
.l-hdNav ul a:visited,
.l-hdNav ul a:hover { color:#fff; }
.ua-pc .l-hdNav ul a:hover { opacity:0.6; }
.l-hdNav ul a,
.l-hdNav ul a:visited,
.l-hdNav ul a:hover { text-decoration:none; }

.l-hdNav_menu li {
  padding-left:1em;
  padding-right:1em;
  font-weight:400;
  font-size:0.88em;
}

.l-hdNav_sns li {
  padding-left:0.5em;
  padding-right:0.5em;
  margin-top:-0.1em;
}

.ua-pc .l-hdNav_sns a:hover {
  opacity:0.5;
}

@media print,screen and (min-width:641px) {
  .l-hdNav_menu {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
  }
  
  .l-hdNav_sns {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
  }
}

@media screen and (max-width:640px) {
  .l-hdNav {
    display:none;
  }
}


/*----------------------------------------------------------------------------------------------------

  2. Navigation
  
----------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------
  Global navigation
--------------------------------------------------------------------------------*/

html.is-gNavOpen {
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

html.is-gNavOpen .l-gNav-wrap {
  pointer-events:auto;
}

.l-gNav a,
.l-gNav a:visited { color:#fff; }
.ua-pc .l-gNav a:hover { color:#999; }
.l-gNav a,
.l-gNav a:visited,
.l-gNav ul a:hover { text-decoration:none; }
  
.l-gNav-wrap {
  width:100%;
  height:100%;
  pointer-events:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  color:#fff;
}

.l-gNav {
  width:100%;
  height:100%;
  pointer-events:auto;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.l-gNav__cont {
  position:relative;
}

.l-gNav__cont .inner {
  width:100%;
  height:100%;
  position:relative;
}

.l-gNav__cont nav {
  overflow-y:auto;
  height:100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}
  
.l-gNav-item {
  font-size:1.08em;
  list-style:none;
  width:100%;
  opacity:0;
  transform:translateY(2em);
  -webkit-transition:opacity 0.8s ease, transform 1s cubic-bezier(.23, 1, .32, 1);
  transition:opacity 0.8s ease, transform 1s cubic-bezier(.23, 1, .32, 1);
}

html.is-gNavOpen .l-gNav-item,
html.is-gNavClose .l-gNav-item {
  opacity:1;
  transform:translateY(0);
}
  
html.is-gNavClose .l-gNav-item {
  opacity:0;
  -webkit-transition:opacity 0.2s ease;
  transition:opacity 0.2s ease;
  -webkit-transition-delay:0;
  transition-delay:0;
}

.ua-pc .l-gNav_sns a:hover {
  opacity:0.5;
}

.l-gNav_menu {
  font-weight:400;
}

.l-gNav_sns {
  padding-top:1em;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}

.l-gNav_sns li {
  width:2em;
  font-size:1.1em;
}
  
.l-gNav_menu { padding-top:1.5em; }
.l-gNav_sns { padding-bottom:3em; }


@media print,screen and (min-width:641px) {
  .l-gNav-wrap {
    min-width:1000px;
  }

  .l-gNav__cont {
    padding-top:88px; /* gNavBtnの分 */
  }
  
  .l-gNav__cont nav {
    padding:0 64px;
  }
  
  .l-gNav__cont:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    display:block;
    background-color:#141414;
    transform-origin:right top;
    transform:scale(0,1);
    -webkit-transition:transform 1s cubic-bezier(.23, 1, .32, 1);
    transition:transform 1s cubic-bezier(.23, 1, .32, 1); /* easeOutQuint */
  }
  
  html.is-gNavOpen .l-gNav__cont:before {
    transform-origin:left top;
    transform:scale(1,1);
  }
  
  .l-gNav-item {
    -webkit-transition-delay:0.3s;
    transition-delay:0.3s;
  }

  .l-gNav_menu li {
    padding-bottom:1em;
  }
}

/* 横向き */
@media print,screen and (min-width:641px) and (orientation:landscape) {
  .l-gNav {
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
  }
  
  .l-gNav__photos {
    width:55%;
    -webkit-box-ordinal-group:1;
    -ms-flex-order:0;
    order:0;
    position:relative;
  }
  
  .l-gNav__photos .inner {
    position:absolute;
    overflow:hidden;
    right:0;
    width:0;
    height:100%;
    background-color:#141414;
    -webkit-transition:width 0.8s cubic-bezier(.23, 1, .32, 1);
    transition:width 0.8s cubic-bezier(.23, 1, .32, 1); /* easeOutQuint */
  }

  .l-gNav__photos .item {
    width:55vw;
    min-width:570px;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    opacity:0;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    -webkit-transition:opacity 0.8s ease, transform 1s 0.1s ease;
    transition:opacity 0.8s ease, transform 1s 0.1s ease;
    transform:scale(1.08);
  }
  
  html.is-gNavOpen .l-gNav__photos .inner {
    width:100%;
    right:inherit;
    left:0;
  }
  
  html.is-gNavOpen .l-gNav__photos .item {
    right:inherit;
    left:0;
    opacity:0.8;
  }
  
  html.is-gNavOpen .l-gNav__photos .item,
  html.is-gNavClose .l-gNav__photos .item {
    transform:scale(1);
  }
  
  .l-gNav__photos .item[data-no="1"] { background-image:url(../image/mainvisual/01.jpg); }
  .l-gNav__photos .item[data-no="2"] { background-image:url(../image/mainvisual/02.jpg); }
  .l-gNav__photos .item[data-no="3"] { background-image:url(../image/mainvisual/03.jpg); }
  .l-gNav__photos .item[data-no="4"] { background-image:url(../image/mainvisual/04.jpg); }
  .l-gNav__photos .item[data-no="5"] { background-image:url(../image/mainvisual/05.jpg); }
  .l-gNav__photos .item[data-no="6"] { background-image:url(../image/mainvisual/06.jpg); }
  .l-gNav__photos .item[data-no="7"] { background-image:url(../image/mainvisual/07.jpg); }
  .l-gNav__photos .item[data-no="8"] { background-image:url(../image/mainvisual/08.jpg); }
  .l-gNav__photos .item[data-no="9"] { background-image:url(../image/mainvisual/09.jpg); }
  

  .l-gNav__cont {
    width:45%;    
    -webkit-box-ordinal-group:2;
    -ms-flex-order:1;
    order:1;
  }
}

/* 縦向き */
@media print,screen and (min-width:641px) and (orientation:portrait) {
  .l-gNav__photos {
    display:none;
  }
  
  .l-gNav__cont {
    width:100%;
  }
}

@media screen and (max-width:640px) {
  html.is-gNavOpen .l-gNav-wrap {
    background-color:#141414;
  }
  
  .l-gNav-wrap {
    min-width:320px;
    background-color:transparent;
    -webkit-transition:background 0.3s ease-out;
    transition:background 0.3s ease-out;
  }
  
  .l-gNav__photos {
    display:none;
  }
  
  .l-gNav__cont {
    width:100%;
    padding-top:64px; /* gNavBtnの分 */
  }
  
  .l-gNav__cont nav {
    padding:0 10%;
  }
  
  .l-gNav-item {
    -webkit-transition-delay:0.2s;
    transition-delay:0.2s;
  }

  .l-gNav_menu li a {
    display:inline-block;
    padding:0.5em 2em;
  }
}

@media screen and (max-width:400px) {
  .l-gNav__cont {
    padding-top:60px;
  }
}


/*--------------------------------------------------------------------------------
  Button
--------------------------------------------------------------------------------*/

.l-gNavBtn-wrap {
  width:100%;
  pointer-events:none;
  position:fixed;
  top:0;
  left:0;
  z-index:100;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

.l-gNavBtn {
  pointer-events:auto;
  cursor:pointer;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  -webkit-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out;
}

@media print,screen and (min-width:641px) {
  .l-gNavBtn-wrap {
    min-width:1000px;
  }
  
  .l-gNavBtn {
    width:88px;
    height:88px;
    padding-top:1.2em;
  }
}

@media screen and (max-width:640px) {
  .l-gNavBtn-wrap {
    min-width:320px;
  }
  
  .l-gNavBtn {
    width:64px;
    height:64px;
    padding-top:0.6em;
  }
}

@media screen and (max-width:400px) {
  .l-gNavBtn {
    width:60px;
    height:60px;
  }
}

.l-gNavBtn.is-fix {
  background-color:#fff;
  padding-top:0;
}

html.is-gNavOpen .l-gNavBtn.is-fix {
  background-color:transparent;
}

.l-gNavBtn.is-fix .l-gNavBtn__icon span {
  background-color:#141414;
}

.l-gNavBtn__icon,
.l-gNavBtn__icon span,
.l-gNavBtn__icon span:before,
.l-gNavBtn__icon span:after {
  display:inline-block;
}
  
.l-gNavBtn__icon {
  position:relative;
  width:24px;
  height:18px;
}
      
.l-gNavBtn__icon span {
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background-color:#fff;
  -webkit-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out;
}

.l-gNavBtn.is-close .l-gNavBtn__icon span {
  background-color:#fff;
}
  
.l-gNavBtn__icon span:nth-of-type(1) {
  top:0;
}
.l-gNavBtn__icon span:nth-of-type(2) {
  top:8px;
}
.l-gNavBtn__icon span:nth-of-type(3) {
  bottom:0;
}

.l-gNavBtn.is-aniSet .l-gNavBtn__icon span:nth-of-type(1) {
  -webkit-animation:navBtn01 0.4s forwards;
  animation:navBtn01 0.4s forwards;
}
  
.l-gNavBtn.is-aniSet .l-gNavBtn__icon span:nth-of-type(2) {
  transition:opacity 0.2s 0.2s;
  opacity:1;
} 
    
.l-gNavBtn.is-aniSet .l-gNavBtn__icon span:nth-of-type(3) {
  -webkit-animation:navBtn02 0.4s forwards;
  animation:navBtn02 0.4s forwards;
}
    
.l-gNavBtn.is-close .l-gNavBtn__icon span:nth-of-type(1) {
  -webkit-animation:active-navBtn01 0.4s forwards;
  animation:active-navBtn01 0.4s forwards;
}
 
.l-gNavBtn.is-close .l-gNavBtn__icon span:nth-of-type(2) {
  opacity:0;
}
    
.l-gNavBtn.is-close .l-gNavBtn__icon span:nth-of-type(3) {
  -webkit-animation:active-navBtn03 0.4s forwards;
  animation:active-navBtn03 0.4s forwards;
}

@-webkit-keyframes navBtn01 {
  0% {
    -webkit-transform:translateY(8px) rotate(45deg);
  }
  50% {
    -webkit-transform:translateY(8px) rotate(0);
  }
  100% {
    -webkit-transform:translateY(0) rotate(0);
  }
}
@keyframes navBtn01 {
  0% {
    transform:translateY(8px) rotate(45deg);
  }
  50% {
    transform:translateY(8px) rotate(0);
  }
  100% {
    transform:translateY(0) rotate(0);
  }
}
@-webkit-keyframes navBtn02 {
  0% {
    -webkit-transform:translateY(-8px) rotate(-45deg);
  }
  50% {
    -webkit-transform:translateY(-8px) rotate(0);
  }
  100% {
    -webkit-transform:translateY(0) rotate(0);
  }
}
@keyframes navBtn02 {
  0% {
    transform:translateY(-8px) rotate(-45deg);
  }
  50% {
    transform:translateY(-8px) rotate(0);
  }
  100% {
    transform:translateY(0) rotate(0);
  }
}
@-webkit-keyframes active-navBtn01 {
  0% {
    -webkit-transform:translateY(0) rotate(0);
  }
  50% {
    -webkit-transform:translateY(8px) rotate(0);
  }
  100% {
    -webkit-transform:translateY(8px) rotate(45deg);
  }
}
@keyframes active-navBtn01 {
  0% {
    transform:translateY(0) rotate(0);
  }
  50% {
    transform:translateY(8px) rotate(0);
  }
  100% {
    transform:translateY(8px) rotate(45deg);
  }
}
@-webkit-keyframes active-navBtn03 {
  0% {
    -webkit-transform:translateY(0) rotate(0);
  }
  50% {
    -webkit-transform:translateY(-8px) rotate(0);
  }
  100% {
    -webkit-transform:translateY(-8px) rotate(-45deg);
  }
}
@keyframes active-navBtn03 {
  0% {
    transform:translateY(0) rotate(0);
  }
  50% {
    transform:translateY(-8px) rotate(0);
  }
  100% {
    transform:translateY(-8px) rotate(-45deg);
  }
}


/*----------------------------------------------------------------------------------------------------

  3. Contents
  
----------------------------------------------------------------------------------------------------*/

body:before {
  content:"";
  display:block;
}

body[pg="home"]:before {
  height:100vh;
}

@media print,screen and (min-width:641px) {
  body[pg="home"]:before {
    min-height:600px; /* mainVisualの分 */
  }
  
  body:not([pg="home"]):before {
    height:400px; /* pgTtlの分 */
  }
}

@media screen and (max-width:640px) {
  body[pg="home"]:before {
    min-height:400px;
  }
  
  body:not([pg="home"]):before {
    height:300px;
  }
}

.l-cont {
  position:relative;
  z-index:30;
  text-align:left;
}

body:not([pg="home"]) .l-cont {
  background-color:#fff;
}

.l-contBlock {
  max-width:1360px;
  margin-left:auto;
  margin-right:auto;
}

@media print,screen and (min-width:641px) {
  .l-contBlock {
    padding-left:64px;
    padding-right:64px;
  }
}

@media screen and (max-width:640px) {
  .l-contBlock {
    padding-left:5%;
    padding-right:5%;
  }
}


/*--------------------------------------------------------------------------------
  Page title
--------------------------------------------------------------------------------*/

.l-pgTtl {
  width:100%;
  position:fixed;
  left:0;
  top:0;
  z-index:1;
  color:#fff;
  opacity:0;
  overflow:hidden;
}

.l-pgTtl:before {
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  z-index:10;
  background-color:#141414;
  transform-origin:left top;
  transform:scale(1,1);
}

.l-pgTtl.is-loaded {
  -webkit-animation:fadeIn 0.6s forwards;
  animation:fadeIn 0.6s forwards;
}

.l-pgTtl.is-loaded:before {
  transform-origin:right top;
  transform:scale(0,1);
  -webkit-transition:transform 1s cubic-bezier(.23, 1, .32, 1);
  transition:transform 1s cubic-bezier(.23, 1, .32, 1); /* easeOutQuint */
  -webkit-transition-delay:0.2s;
  transition-delay:0.2s;
}

.l-pgTtl:after {
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(to bottom, rgba(20,20,20,0.4), rgba(20,20,20,0) 30%);
  position:absolute;
  left:0;
  top:0;
  z-index:1;
}

.l-pgTtl__cont {
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
  position:relative;
}

.l-pgTtl__cont:after {
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:rgba(20,20,20,0.2);
  position:absolute;
  left:0;
  top:0;
  z-index:2;
}

.l-pgTtl__photo {
  position:absolute;
  left:0;
  top:0;
  transform:scale(1.05);
  -webkit-transition:transform 1.6s ease;
  transition:transform 1.6s ease;
  -webkit-transition-delay:0.2s;
  transition-delay:0.2s;
  min-width:100%;
  height:100%;
  object-fit:cover;
  font-family:"object-fit:cover;"
}

.l-pgTtl.is-loaded .l-pgTtl__photo {
  transform:scale(1);
}

.l-pgTtl h2 {
  position:relative;
  z-index:3;
  padding-top:3rem;
  font-weight:600;
  opacity:0;
}

.l-pgTtl.is-loaded h2 {
  -webkit-animation:fadeIn 0.6s forwards;
  animation:fadeIn 0.6s forwards;
  -webkit-animation-delay:0.4s;
  animation-delay:0.4s;
}

.l-pgTtl.is-loaded .p-passing:before,
.l-pgTtl.is-loaded .p-passing__txt {
  -webkit-animation-delay:0.8s;
  animation-delay:0.8s;
}

@media print,screen and (min-width:641px) {
  .l-pgTtl {
    min-width:1000px;
    height:400px;
  }
  
  .l-pgTtl h2 {
    font-size:2.88em;
  }
}

@media screen and (max-width:640px) {
  .l-pgTtl {
    min-width:320px;
    height:300px;
  }
  
  .l-pgTtl h2 {
    font-size:2.44em;
  }
}


/*----------------------------------------------------------------------------------------------------

  4. Footer
  
----------------------------------------------------------------------------------------------------*/

footer {
  background-color:#282828;
  color:#fff;
  position:relative;
}

footer a,
footer a:visited,
footer a:hover,
.ua-pc footer a:hover { color:#fff; text-decoration:none; }


/*--------------------------------------------------------------------------------
  Contact
--------------------------------------------------------------------------------*/

.ft-contact {
  background-color:#141414;
  text-align:center;
}

.ft-contact-list {
  list-style:none;
}

.ft-contact__btn a {
  padding:1em 2em;
}

.ft-contact__tel .ff-min {
  letter-spacing:0.025em;
}

@media print,screen and (min-width:641px) {
  .ft-contact {
    padding-top:96px;
    padding-bottom:96px;
  }

  .ft-contact-hdline {
    padding-bottom:40px;
  }
  
  .ft-contact-list {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding-top:48px;
  }

  .ft-contact-list li {
    padding-left:20px;
    padding-right:20px;
  }

  .ft-contact__tel a {
    list-style:none;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
  }

  .ft-contact__tel span {
    text-align:left;
  }

  .ft-contact__tel .open {
    padding-left:1em;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
  }
}

@media screen and (max-width:640px) {
  .ft-contact {
    padding-top:3.5em;
    padding-bottom:3.5em;
  }
  
  .ft-contact-lead {
    font-size:0.88em;
  }
  
  .ft-contact-hdline {
    padding-bottom:1.5em;
  }
  
  .ft-contact__tel {
    padding-bottom:2em;
  }
  
  .ft-contact-list {
    padding-top:1.5em;
  }
  
  .ft-contact__btn a {
    display:block;
  }
  
  .ft-contact__tel .open {
    display:block;
  }
  
  .ft-contact__tel .open br {
    display:none;
  }
}


/*--------------------------------------------------------------------------------
  Fotter contents
--------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .ft-cont {
    font-size:0.88em;
    display:grid;
    display:-ms-grid;
    grid-template-rows:auto 1.5em;
    grid-template-columns:40% 60%;
    -ms-grid-rows:auto 1.5em;
    -ms-grid-columns:40% 60%;
    padding-top:64px;
    padding-bottom:64px;
  }
}

@media screen and (max-width:640px) {
  .ft-cont {
    padding-top:3em;
    padding-bottom:3em;
  }
}


/* Address
----------------------------------------------------------------------*/

.ft-logo a {
  display:inline-block;
  width:168px;
  height:37px;
}

.ft-logo .logo-jp {
  width:100%;
  height:100%;
  display:block;
  vertical-align:middle;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  background:url(../image/logoJP.svg) no-repeat left center;
  background-size:contain;
}

@media print,screen and (min-width:641px) {
  .ft-ad {
    grid-column:1 / 2;
    -ms-grid-column:1;
    grid-row:1 / 3;
    -ms-grid-row:1;
    -ms-grid-row-span:2;
  }
  
  .ft-ad p {
    padding-top:0.75em;
  }
}

@media screen and (max-width:640px) {
  .ft-logo a {
    width:150px;
    height:33px;
  }
  
  .ft-ad p {
    padding-top:0.5em;
  }
}

@media screen and (max-width:560px) {
  .ft-logo a {
    width:calc((150 / 560 * 100vw)  + 0.75vw);
    height:calc((33 / 560 * 100vw)  + 0.75vw);
    min-width:127px;
    min-height:28px;
  }
}


/* Nav
----------------------------------------------------------------------*/

.ft-nav {
  text-align:right;
}

.ft-nav ul {
  list-style:none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end;
  -ms-flex-pack:end;
  justify-content:flex-end;
}

.ft-nav li {
  padding-left:1.5em;
}

.ua-pc .ft-nav a:hover { color:#999; }

@media print,screen and (min-width:641px) {
  .ft-nav {
    grid-column:2 / 3;
    -ms-grid-column:2;
    grid-row:1 / 2;
    -ms-grid-row:1;
    text-align:right;
  }
  
  .ft-nav ul {
    padding-top:-webkit-calc(37px + 1.2em);
    padding-top:calc(37px + 1.2em);
    white-space:nowrap;
  }
}

@media screen and (max-width:640px) {
  .ft-nav {
    display:none;
  }
}


/* copyright
----------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .ft-copy {
    grid-column:2 / 3;
    -ms-grid-column:2;
    grid-row:2 / 3;
    -ms-grid-row:2;
    text-align:right;
  }
}

@media screen and (max-width:640px) {
  .ft-copy {
    padding-top:2.5em;
  }
}


/*--------------------------------------------------------------------------------
  Back to top
--------------------------------------------------------------------------------*/

.l-backtoTop-lo {
  display:none;
  position:fixed;
  left:0;
  bottom:0;
  z-index:90;
  width:100%;
  min-width:1000px;
  pointer-events:none;
  text-align:right;
}

.l-backtoTop {
  display:inline-block;
  pointer-events:auto;
  width:88px;
  height:88px;
  cursor:pointer;
}

.l-backtoTop-lo.is-noFix {
  position:absolute;
  bottom:inherit;
  left:0 !important;
}

.l-backtoTop__icon {
  height:100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;
}

.l-backtoTop__icon:after {
  content:"";
  display:inline-block;
  width:14px;
  height:14px;
  margin-top:7px;
  border-top:1px solid #141414;
  border-right:1px solid #141414;
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

.l-backtoTop__icon:after {
  content:"";
  display:inline-block;
  width:14px;
  height:14px;
  margin-top:7px;
  border-top:1px solid #141414;
  border-right:1px solid #141414;
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
  -webkit-transition:border 0.2s ease-out;
  transition:border 0.2s ease-out;
}

.l-backtoTop-lo.is-scrFt .l-backtoTop__icon:after {
  border-top-color:#fff;
  border-right-color:#fff;
}

@media screen and (max-width:640px) {
  .l-backtoTop-lo {
    display:none !important;
  }
}