﻿@charset "utf-8";

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

  Layout

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

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

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

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

header {
  width:100%;
  background-color:#fff;
  box-shadow:0 8px 15px -15px rgba(50,45,35,0.1);
}

@media print,screen and (min-width:641px) {
  header {
    position:relative;
    text-align:left;
    height:80px;
  }
}

@media screen and (max-width:640px) {
  header {
    height:70px;
  }
}

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


/*--------------------------------------------------------------------------------
  ロゴ
--------------------------------------------------------------------------------*/

.hd-logo {
  position:absolute;
  font-size:0;
  display:inline-block;
}

.hd-logo a {
  display:block;
  position:relative;
}

/* full navigation 用 */
.hd-logo a:after {
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background:url(../image/siteLogo_white.svg) no-repeat left center;
  background-size:contain;
  z-index:-1;
  opacity:0;
}

html.is-fNavOpen .hd-logo {
  position:fixed;
  z-index:200;
}

html.is-fNavOpen .hd-logo img {
  opacity:0;
}

.no-csstransitions.is-fNavOpen .hd-logo a:after {
  opacity:1;
}

.csstransitions.is-fNavOpen .hd-logo a:after {
  -webkit-animation:fNav-logo-show 0.4s forwards ease-out;
  animation:fNav-logo-show 0.4s forwards ease-out;
  -webkit-animation-delay:0.5s;
  animation-delay:0.5s;
}

.csstransitions.is-fNavClose .hd-logo a:after {
  -webkit-animation:fNav-logo-hide 0.2s forwards ease-out;
  animation:fNav-logo-hide 0.2s forwards ease-out;
}

@-webkit-keyframes fNav-logo-show {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@keyframes fNav-logo-show {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fNav-logo-hide {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@keyframes fNav-logo-hide {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@media print,screen and (min-width:641px) {
  .hd-logo {
    width:240px;
    left:18px;
    top:16px;
  }
}

@media screen and (max-width:640px) {
  .hd-logo {
    width:220px;
    left:1rem;
    top:14px;
  }
}

@media screen and (max-width:500px) {
  .hd-logo {
    width:200px;
    top:16px;
  }
}

@media screen and (max-width:400px) {
  .hd-logo {
    width:180px;
    top:13px;
  }
}


/*--------------------------------------------------------------------------------
  お問い合わせ・資料請求
--------------------------------------------------------------------------------*/

.hd-contactBtnLo {
  width:-webkit-calc(100% - 80px);
  width:calc(100% - 80px);
  min-width:1200px;
  position:fixed;
  left:0;
  top:0;
  z-index:140;
  pointer-events:none;
}

html.is-fNavOpen .hd-contactBtnLo {
  z-index:0;
}

.hd-contactBtn {
  height:80px;
  float:right;
  text-align:center;
  cursor:pointer;
  pointer-events:none;
  line-height:1;
  position:relative;
  z-index:9999;
}

.hd-contactBtn a {
  height:100%;
  pointer-events:auto;
  padding-top:0.8em;
  padding-bottom:0.8em;
}


/*--------------------------------------------------------------------------------
  TEL
--------------------------------------------------------------------------------*/

.hd-tel {
  line-height:1;
  text-align:left;
}

@media print,screen and (min-width:641px) {
  .hd-tel {
    position:absolute;
    right:330px;
    top:3px;
  }
  
  .hd-tel__no {
    font-size:1.8em;
  }
  
  .hd-tel__time {
    display:block;
    padding-left:1.5em;
  }
}

@media screen and (max-width:640px) {
  .hd-tel {
    width:70px;
    height:70px;
    float:right;
    margin-right:70px;
    background-color:#20be5f;
  }
  
  .hd-tel__time {
    display:none;
  }
  
  .hd-tel a {
    display:block;
    width:100%;
    height:100%;
    background-image:url(../image/icon/tel_white.svg);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:26px auto;
  }
  
  .hd-tel__no {
    display:none;
  }
}

@media screen and (max-width:400px) {
  .hd-tel {
    width:60px;
    height:60px;
    margin-right:60px;
  }
}


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

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

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

  full navigation
  
--------------------------------------------------------------------------------*/

html.is-fNavOpen {
  overflow-y:hidden;
}

@media print,screen and (min-width:641px) and (orientation:portrait) {
  html.is-fNavOpen {
    overflow-x:hidden;
  }
}

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


/* slide
----------------------------------------------------------------------*/

.fullNav-slide {
  width:100%;
  height:100%;
  position:fixed;
  left:0;
  top:0;
  background-color:#464137;
  z-index:-5;
  opacity:0;
  pointer-events:none;
}

html.is-fNavOpen .fullNav-slide,
html.is-fNavClose .fullNav-slide {
  width:100%;
  opacity:1;
  z-index:99;
}

.csstransitions.is-fNavOpen .fullNav-slide {
  -webkit-animation:fullNav-slideIn 0.4s forwards ease-out;
  animation:fullNav-slideIn 0.4s forwards ease-out;
}

.csstransitions.is-fNavClose .fullNav-slide {
  -webkit-animation:fullNav-slideOut 0.4s forwards ease-out;
  animation:fullNav-slideOut 0.4s forwards ease-out;
}

@-webkit-keyframes fullNav-slideIn {
  0% {
    left:100%;
  }
  100% {
    left:0;
  }
}
@keyframes fullNav-slideIn {
  0% {
    left:100%;
  }
  100% {
    left:0;
  }
}

@-webkit-keyframes fullNav-slideOut {
  0% {
    width:100%;
  }
  100% {
    width:0;
  }
}
@keyframes fullNav-slideOut {
  0% {
    width:100%;
  }
  100% {
    width:0;
  }
}


/* wrap
----------------------------------------------------------------------*/

#fullNav-wrap {
  width:100%;
  height:100%;
  position:fixed;
  right:0;
  left:0;
  top:0;
  bottom:0;
  z-index:-5;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
}

html.is-fNavOpen #fullNav-wrap {
  opacity:1;
  -webkit-transition:opacity 0.3s ease-out;
  transition:opacity 0.3s ease-out;
  -webkit-transition-delay:0.5s;
  transition-delay:0.5s;
  z-index:100;
}

html.is-fNavClose #fullNav-wrap {
  opacity:0;
}

#fullNav-scr {
  width:100%;
  height:100%;
  position:fixed;
  right:0;
  left:0;
  top:0;
  bottom:0;
  overflow:hidden;
  pointer-events:auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

@media print,screen and (min-width:641px) {
  #fullNav-scr {
    top:80px;
    height:-webkit-calc(100% - 80px);
    height:calc(100% - 80px);
  }
}

@media screen and (max-width:640px) {
  #fullNav-scr {
    top:70px;
    height:-webkit-calc(100% - 70px);
    height:calc(100% - 70px);
  }
}

@media screen and (max-width:400px) {
  #fullNav-scr {
    top:60px;
    height:-webkit-calc(100% - 60px);
    height:calc(100% - 60px);
  }
}


/* fullNav
----------------------------------------------------------------------*/

#fullNav {
  color:#fff;
  width:100%;
  height:100%;
  position:relative;
  display:table;
}

.fullNav__ct {
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}

/* 横向き */
@media print,screen and (min-width:641px) and (orientation:landscape) {
  /* photo */
  .fullNav__photo {
    min-width:512px;
    width:40%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    background:url(../image/fNav_p.jpg) no-repeat center center;
    background-size:150% auto;
  }
  
  #fullNav {
    min-width:1280px;
  }
  
  .fullNav__ct {
    padding-left:40%;
  }
}

/* 縦向き */
@media print,screen and (min-width:641px) and (orientation:portrait) {
  #fullNav {
    padding:-webkit-calc(40 / 640 * 100vw);
    padding:calc(40 / 640 * 100vw);
    left:0 !important;
  }
  
  .fullNav__ct {
    width:100%;
  }
}

@media print,screen and (min-width:641px) {
  #fullNav {
    padding-bottom:80px;
  }
}

@media screen and (max-width:640px) {
  #fullNav {
    padding:-webkit-calc(40 / 640 * 100vw);
    padding:calc(40 / 640 * 100vw);
  }
  
  .fullNav__ct {
    width:100%;
  }
}


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

.fNav {
  display:inline-block;
  text-align:left;
  margin-left:auto;
  margin-right:auto;
}

.fNavList {
  list-style:none;
  text-align:left;
}

.fNavList-child {
  list-style:none;
  padding-left:0.2em;
  padding-top:1rem;
}

.fNavList__item {
  padding-top:1rem;
  padding-bottom:1rem;
}

.fNavList__item > a {
  font-family:"Noto Sans JP","Noto Sans JP locl";
  font-weight:500;
  font-size:1.05em;
}

.fNavList-child__item {
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}

@media print,screen and (min-width:641px) {
  .fNav {
    width:600px;
  }
  
  .fNavList {
    font-size:1.05em;
    width:40%;
    min-width:290px;
    float:left;
    display:inline-block;
  }
  
  .fNavList:first-child {
    padding-right:30px;
  }
  
  .fNavList:last-child {
    padding-left:30px;
  }
}

/* 縦向き */
@media print,screen and (min-width:641px) and (orientation:portrait) {
  .fNav {
    width:inherit;
  }
  
  .fullNav {
    font-size:1.3em;
  }
  
  .fNavList {
    width:inherit;
    min-width:inherit;
    float:left;
    display:inline-block;
  }
  
  .fNavList:first-child {
    padding-right:-webkit-calc(80 / 640 * 100vw);
    padding-right:calc(80 / 640 * 100vw);
  }
  
  .fNavList:last-child {
    padding-left:-webkit-calc(100 / 640 * 100vw);
    padding-left:calc(100 / 640 * 100vw);
  }
}

@media screen and (max-width:640px) {
  .fNavList {
    float:left;
    display:inline-block;
  }
  
  .fNavList:first-child {
    padding-right:-webkit-calc(80 / 640 * 100vw);
    padding-right:calc(80 / 640 * 100vw);
  }
  
  .fNavList:last-child {
    padding-left:-webkit-calc(100 / 640 * 100vw);
    padding-left:calc(100 / 640 * 100vw);
  }
}

@media screen and (max-width:500px) {
  .fNavList {
    font-size:1em;
  }
}


/*--------------------------------------------------------------------------------
  links
--------------------------------------------------------------------------------*/

.fNavLinks {
  width:100%;
  clear:both;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}

@media print,screen and (min-width:641px) {
  .fNavLinks {
    padding-top:60px;
    display:inline-flex;
    column-gap:40px;
  }
}

@media screen and (max-width:640px) {
  .fNavLinks {
    padding-top:-webkit-calc(60 / 640 * 100vw);
    padding-top:calc(60 / 640 * 100vw);
    padding-bottom:-webkit-calc(30 / 640 * 100vw);
    padding-bottom:calc(30 / 640 * 100vw);
  }
}


/*--------------------------------------------------------------------------------
  sns
--------------------------------------------------------------------------------*/

.fNav-sns {
  clear:both;
  list-style:none;
  display:block;
}

.fNav-sns__item {
  display:inline-block;
}

.ua-pc .fNav-sns__item a {
  -webkit-transition:opacity 0.25s ease;
  transition:opacity 0.25s ease;
}

.ua-pc .fNav-sns__item a:hover {
  opacity:0.6;
}

/*--------------------------------------------------------------------------------
  banner
--------------------------------------------------------------------------------*/

.fNav-bnr a {
  background-color: #FFF;
  padding:0.85em 1em;
}

.ua-pc .fNav-bnr a {
  -webkit-transition:opacity 0.25s ease;
  transition:opacity 0.25s ease;
}

.fNav-bnr a,
.fNav-bnr a:visited,
.fNav-bnr a:hover { color:#322d23 !important; text-decoration:none !important; }
.ua-pc .fNav-bnr a:hover { opacity:0.6; color:#322d23 !important; text-decoration:none !important; }

.fNav-bnr img {
  height:50px;
}

.fNav-bnr p {
  line-height:1.4;
  padding-left:1em;
}

@media print,screen and (min-width:641px) {
  .fNav-bnr a {
    display:flex;
    align-items:center;
  }
  
  .fNav-bnr p {
    font-size:0.7em;
    display:inline-block;
  }
}

@media screen and (max-width:640px) {
  .fNav-bnr {
    padding-top:12%;
  }
  
  .fNav-bnr a {
    display:block;
    text-align:center;
  }
  
  .fNav-bnr img {
    max-width:100px;
    height:auto;
    width:-webkit-calc(150 / 640 * 100vw);
    width:calc(150 / 640 * 100vw);
  }
  
  .fNav-bnr p {
    font-size:0.8em;
    margin-top:0.8em;
  }
  
  .fNav-bnr p br {
    display:none;
  }
}


/*--------------------------------------------------------------------------------
  button
--------------------------------------------------------------------------------*/

.fNavBtn-wrapLo {
  width:100%;
  position:fixed;
  left:0;
  top:0;
  z-index:130;
  pointer-events:none;
}

@media print,screen and (min-width:641px) {
  .fNavBtn-wrapLo {
    height:80px;
  }
  
  html:not(.is-fNavOpen) .fNavBtn-wrapLo {
    min-width:1280px;
  }
  
  html.is-fNavOpen .fNavBtn-wrapLo {
    left:0 !important;
  }
}

@media screen and (max-width:640px) {
  html:not(.is-fNavOpen) .fNavBtn-wrapLo {
    min-width:320px;
  }
}

.fNavBtn {
  float:right;
  text-align:center;
  cursor:pointer;
  pointer-events:none;
  line-height:1;
  background-color:#464137;
  -webkit-transition:background 0.15s ease-out, color 0.15s ease-out;
  transition:background 0.15s ease-out, color 0.15s ease-out;
}

.ua-pc:not(.is-fNavOpen) .fNavBtn:hover {
}

.fNavBtnLo {
  position:relative;
  height:100%;
  pointer-events:auto;
}

.fNavBtnLo__item {
  display:inline-block;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.fNavBtn__icon,
.fNavBtn__icon span,
.fNavBtn__icon span:before,
.fNavBtn__icon span:after {
  display:inline-block;
}
  
.fNavBtn__icon {
  position:relative;
  width:26px;
  height:21px;
}
      
.fNavBtn__icon span {
  position:absolute;
  left:0;
  width:100%;
  height:3px;
  background-color:#fff;
}
  
.fNavBtn__icon span:nth-of-type(1) {
  top:0;
}
.fNavBtn__icon span:nth-of-type(2) {
  top:9px;
}
.fNavBtn__icon span:nth-of-type(3) {
  bottom:0;
}
  
.csstransitions .fNavBtn.is-aniSet .fNavBtn__icon span:nth-of-type(1) {
  -webkit-animation:menu-bar01 0.4s forwards;
  animation:menu-bar01 0.4s forwards;
}
  
.csstransitions .fNavBtn.is-aniSet .fNavBtn__icon span:nth-of-type(2) {
  transition:opacity 0.2s 0.2s;
  opacity:1;
}
  
.csstransitions .fNavBtn.is-aniSet .fNavBtn__icon span:nth-of-type(3) {
  -webkit-animation:menu-bar02 0.4s forwards;
  animation:menu-bar02 0.4s forwards;
}
  
.csstransitions .fNavBtn.is-close .fNavBtn__icon span:nth-of-type(1) {
  -webkit-animation:active-menu-bar01 0.4s forwards;
  animation:active-menu-bar01 0.4s forwards;
}
  
.csstransitions .fNavBtn.is-close .fNavBtn__icon span:nth-of-type(2) {
  opacity:0;
}
  
.csstransitions .fNavBtn.is-close .fNavBtn__icon span:nth-of-type(3) {
  -webkit-animation:active-menu-bar03 0.4s forwards;
  animation:active-menu-bar03 0.4s forwards;
}

@media print,screen and (min-width:641px) {
  .fNavBtn {
    width:80px;
    height:80px;
  }
  
  .fNavBtn__label:before,
  .fNavBtn__label:after {
    margin-top:0.5rem;
  }

  .fNavBtn__label:before,
  .fNavBtn__label:after {
    white-space:nowrap;
    display:block;
    text-align:center;
    font-size:0.9em;
    line-height:1;
    color:#fff;
    font-family:"Open Sans Condensed","Open Sans Condensed locl"; font-weight:700;
  }
    
  .fNavBtn__label:before { content:"MENU"; }
  .fNavBtn:not(.is-close) .fNavBtn__label:after { display:none; }
    
  .fNavBtn.is-close .fNavBtn__label:after { content:"CLOSE"; }
  .fNavBtn.is-close .fNavBtn__label:before { display:none; }
}

@media screen and (max-width:640px) {
  .fNavBtn {
    width:70px;
    height:70px;
  }
}

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

@-webkit-keyframes menu-bar01 {
  0% {
    -webkit-transform:translateY(9px) rotate(45deg);
  }
  50% {
    -webkit-transform:translateY(9px) rotate(0);
  }
  100% {
    -webkit-transform:translateY(0) rotate(0);
  }
}
@keyframes menu-bar01 {
  0% {
    transform:translateY(9px) rotate(45deg);
  }
  50% {
    transform:translateY(9px) rotate(0);
  }
  100% {
    transform:translateY(0) rotate(0);
  }
}
@-webkit-keyframes menu-bar02 {
  0% {
    -webkit-transform:translateY(-9px) rotate(-45deg);
  }
  50% {
    -webkit-transform:translateY(-9px) rotate(0);
  }
  100% {
    -webkit-transform:translateY(0) rotate(0);
  }
}
@keyframes menu-bar02 {
  0% {
    transform:translateY(-9px) rotate(-45deg);
  }
  50% {
    transform:translateY(-9px) rotate(0);
  }
  100% {
    transform:translateY(0) rotate(0);
  }
}
@-webkit-keyframes active-menu-bar01 {
  0% {
    -webkit-transform:translateY(0) rotate(0);
  }
  50% {
    -webkit-transform:translateY(9px) rotate(0);
  }
  100% {
    -webkit-transform:translateY(9px) rotate(45deg);
  }
}
@keyframes active-menu-bar01 {
  0% {
    transform:translateY(0) rotate(0);
  }
  50% {
    transform:translateY(9px) rotate(0);
  }
  100% {
    transform:translateY(9px) rotate(45deg);
  }
}
@-webkit-keyframes active-menu-bar03 {
  0% {
    -webkit-transform:translateY(0) rotate(0);
  }
  50% {
    -webkit-transform:translateY(-9px) rotate(0);
  }
  100% {
    -webkit-transform:translateY(-9px) rotate(-45deg);
  }
}
@keyframes active-menu-bar03 {
  0% {
    transform:translateY(0) rotate(0);
  }
  50% {
    transform:translateY(-9px) rotate(0);
  }
  100% {
    transform:translateY(-9px) rotate(-45deg);
  }
}


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

  global navigation bar
  
--------------------------------------------------------------------------------*/

.gNavbar {
  list-style:none;
}

.gNavbar__item a,
.gNavbar__item a:visited,
.gNavbar__item a:hover { color:inherit; text-decoration:none; }

@media print,screen and (min-width:641px) {
  #globalNavbar {
    background-color:#fff;
    box-shadow:0 8px 15px -15px rgba(50,45,35,0.1);
    position:relative;
    z-index:90;
  }
  
  html.is-fNavbarOpen #l-ct {
    position:relative;
  }
  
  #l-ct:after {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background-color:transparent;
    -webkit-transition:background 0.3s ease-out;
    transition:background 0.3s ease-out;
    z-index:-1;
  }

  html.is-fNavbarOpen #l-ct:after {
    background-color:rgba(50,45,35,0.6);
    z-index:80;
  }
  
  .gNavbar {
    max-width:1180px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display:table;
  }
  
  .gNavbar__item {
    display:table-cell;
  }
  
  .gNavbar__item > a {
    font-family:"Noto Sans JP","Noto Sans JP locl";
    font-weight:500;
    font-size:1.1em;
    display:block;
    white-space:nowrap;
    padding:1em 0.5em 1.4em 0.5em;
    position:relative;
  }
  
  .ua-pc .gNavbar__item > a:hover,
  .gNavbar__item.is-active,
  .gNavbar__item.toggle-active > a {
    color:#20be5f;
  }

  .gNavbar__item.is-active > a:before {
    content:"";
    width:100%;
    height:4px;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background-color:#20be5f;
  }
  
  .ua-pc .gNavbar__item > a {
    -webkit-transition:background 0.15s ease-out, color 0.15s ease;
    transition:background 0.15s ease-out, color 0.15s ease;
  }
  
  .gNavbar-parent > a:after {
    content:"";
    position:absolute;
    bottom:0.8em;
    left:50%;
    display:inline-block;
    width:8px;
    height:8px;
    border-bottom:1px solid #20be5f;
    border-left:1px solid #20be5f;
    -webkit-transform:rotate(-45deg) translateX(-50%);
    transform:rotate(-45deg) translateX(-50%);
    transition:0.3s cubic-bezier(0.2, 0.6, 0.3, 1.1);
  }
  
  .ua-pc .gNavbar__item > a:hover:after,
  .gNavbar__item.toggle-active > a:after {
    -webkit-transform:rotate(135deg) translateX(-50%);
    transform:rotate(135deg) translateX(-50%);
    margin-left:-6px;
    margin-bottom:-9px;
  }

  .gNavbar-child a,
  .gNavbar-child a:visited,
  .gNavbar-child a:hover { color:$fff; text-decoration:none; }
  
  .gNavbar-child-wrap {
    display:none;
    color:#fff;
    width:100%;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background-color:#20be5f;
  }
  
  .gNavbar-child {
    list-style:none;
    position:relative;
    max-width:1220px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-top:2em;
    padding-bottom:2em;
  }
  
  .gNavbar-child__item {
    float:left;
  }
  
  .gNavbar-child__item > a {
    display:block;
    padding:20px;
  }
  
  /* 住宅プラン */
  .gNavbar-child--plan li {
    width:25%;
    font-family:"Noto Sans JP","Noto Sans JP locl";
    font-weight:500;
  }
  
  .gNavbar-child--plan li img {
    margin-bottom:0.5em;
  }
}


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

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

/*--------------------------------------------------------------------------------
  ページタイトル
--------------------------------------------------------------------------------*/

#pgTtl h2 {
  height:100%;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  background-size:contain;
}

#pgTtl,
#pgTtl h2 {
  background-repeat:no-repeat;
  background-position:center center;
}

@media print,screen and (min-width:641px) {
  #pgTtl {
    height:300px;
  }
}

@media screen and (max-width:640px) {
  #pgTtl {
    background-size:cover;
  }
  
  #pgTtl {
    height:-webkit-calc(250 / 640 * 100vw);
    height:calc(250 / 640 * 100vw);
  }
}


/*--------------------------------------------------------------------------------
  見出し
--------------------------------------------------------------------------------*/

.l-hdline {
  line-height:1.4;
}

.l-hdline__en {
  font-family:"Charmonman","Charmonman locl";
  font-weight:400;
  font-size:1.5em;
}

.l-hdlineS,
.l-hdline__jp {
  font-family:"Noto Sans JP","Noto Sans JP locl";
  font-weight:700;
  font-size:2.2em;
}

@media screen and (max-width:640px) {
  .l-hdlineS,
  .l-hdline__jp {
    font-size:2em;
  }
}


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

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

footer {
  background-color:#fff;
}


/*--------------------------------------------------------------------------------
  back to top
--------------------------------------------------------------------------------*/

.backtoTop-lo {
  position:relative;
  z-index:10;
}
  
.backtoTop {
  display:inline-block;
  vertical-align:bottom;
  border:1px solid #464137;
  background-color:#fff;
  cursor:pointer;
  position:relative;
}

.backtoTop__icon {
  position:relative;
  width:100%;
  height:100%;
  display:block;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  line-height:0;
  z-index:2;
}

.backtoTop__icon:after {
  content:"";
  display:inline-block;
  width:30%;
  height:30%;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-15%;
  margin-top:-7.5%;
  border-top:2px solid #464137;
  border-right:2px solid #464137;
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
  
.ua-pc .backtoTop:before {
  content:"";
  display:block;
  width:102%;
  height:102%;
  background-color:#464137;
  position:absolute;
  left:-1%;
  top:-1%;
  right:-1%;
  bottom:-1%;
  z-index:1;
  -webkit-transition:transform 0.2s ease-out;
  transition:transform 0.2s ease-out;
  transform-origin:left top;
  transform:scale(1,0);
}

.ua-pc .backtoTop:hover:before {
  transform-origin:left bottom;
  transform:scale(1,1);
}
  
.ua-pc .backtoTop:hover .backtoTop__icon:after {
  border-color:#fff;
}

@media print,screen and (min-width:641px) {
  .backtoTop-lo {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
  }
  
  .backtoTop {
    margin-top:-25px;
    margin-bottom:-25px;
    width:50px;
    height:50px;
    float:right;
  }
}

@media screen and (max-width:640px) {
  .backtoTop-lo {
    background-color:#fff;
    padding:8% 4% 0 4%;
  }
  
  .backtoTop-lo:before {
    content:"";
    width:100%;
    height:1px;
    position:absolute;
    left:0;
    top:100%;
    transform:translateY(-1.3em);
    border-bottom:1px solid #e0e0de;
  }
  
  .backtoTop {
    width:2.6em;
    height:2.6em;
  }
}


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

#footerNav {
  width:1180px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  padding-top:60px;
  padding-bottom:60px;
}

#footerNav a,
#footerNav a:visited,
#footerNav a:hover { color:inherit; text-decoration:none; }
.ua-pc #footerNav a:hover { text-decoration:underline; }

.ftNav {
  width:25%;
  float:left;
  list-style:none;
  border-right:1px solid #e0e0de;
  padding:0.5rem 3rem;
}

.ftNav:first-child {
  border-left:1px solid #e0e0de;
}

.ftNav-child {
  list-style:none;
  padding-left:0.2em;
  padding-top:0.75rem;
}

.ftNav__item {
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}

.ftNav__item > a {
  font-family:"Noto Sans JP","Noto Sans JP locl";
  font-weight:500;
  font-size:1.05em;
}

.ftNav-child__item {
  padding-top:0.25rem;
  padding-bottom:0.25rem;
}


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

.ft-logo {
  display:inline-block;
  position:relative;
}
  
.ft-ad address {
  line-height:1.4;
  margin-bottom:0.25rem;
}

.ft-tel {
  line-height:1;
}

.ft-tel__time {
  padding-left:1.5em;
}

.ft-bnr a {
  border:1px solid rgba(1,87,132,0.7);
  padding:0.85em 1em;
}

.ua-pc .ft-bnr a {
  -webkit-transition:opacity 0.25s ease;
  transition:opacity 0.25s ease;
}

.ft-bnr a,
.ft-bnr a:visited,
.ft-bnr a:hover { color:inherit; text-decoration:none; }
.ua-pc .ft-bnr a:hover { opacity:0.6; }

.ft-bnr img {
  height:50px;
}

.ft-bnr p {
  line-height:1.4;
  padding-left:1em;
}

@media print,screen and (min-width:641px) {
  .ft-lo {
    border-top:1px solid #e0e0de;
    padding-top:40px;
    padding-bottom:40px;
  }
  
  #ft {
    width:1180px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
  }
  
  .ft-logo {
    width:240px;
    padding-bottom:20px;
  }
  
  .ft-tel {
    padding-bottom:0.65rem;
  }
  
  .ft-tel__no {
    font-size:2.2em;
  }

  .ft-bnr a {
    display:flex;
    align-items:center;
  }
  
  .ft-bnr p {
    font-size:0.7em;
    display:inline-block;
  }
}

@media screen and (max-width:640px) {
  .ft-lo {
    padding:8% 6%;
  }
  
  .ft-logo {
    max-width:300px;
    width:-webkit-calc(350 / 640 * 100vw);
    width:calc(350 / 640 * 100vw);
    margin-bottom:6%;
  }
  
  .ft-ad {
    padding-bottom:4%;
  }
  
  .ft-tel {
    font-size:1.1em;
    padding-bottom:10%;
  }
  
  .ft-tel__no {
    font-size:2.4em;
  }
  
  .ft-bnr {
    padding-top:6%;
  }
  
  .ft-bnr a {
    display:block;
  }
  
  .ft-bnr img {
    max-width:100px;
    height:auto;
    width:-webkit-calc(150 / 640 * 100vw);
    width:calc(150 / 640 * 100vw);
  }
  
  .ft-bnr p {
    font-size:0.8em;
    margin-top:0.8em;
  }
  
  .ft-bnr p br {
    display:none;
  }
}
