@charset "utf-8";

/* ===============================================
# common
=============================================== */
*{
  box-sizing: border-box;
}
html { font-size: 62.5%; } /* 10px */

body{
  padding: 0;
  word-wrap : break-word;
  overflow-wrap : break-word;
  color: #000;
  background-color: #fff;
  font-size:15px;
  font-size:1.5rem;  
  font-family: "游明朝体", "Yu Mincho","ヒラギノ明朝Pro", "Hiragino Mincho Pro", YuMincho, serif;
  -webkit-animation: PageIn 1.3s ease 0s 1 normal;      
  animation: PageIn 1.3s ease 0s 1 normal;
}
@keyframes PageIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes PageIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.wrapper{
  width: 100%;
  position: relative;
  overflow: hidden;
}
.inner{
  position: relative;
}
a,
a:visited{
  text-decoration: none;
  color: #000;
}
img{
  max-width: 100%;
  vertical-align: bottom;
}
img[src*=".svg"] {
  width: 100%; 
}
.for_pc{
  display: block;
}
.for_sp{
  display: none;
}
span.for_pc,
br.for_pc,
img.for_pc{
  display: inline;
}
span.for_sp,
br.for_sp,
img.for_sp{
  display: none;
}
.clear{
  clear: both;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.flex{
  display: -webkit-box;
  display: -ms-flex;  
  display: flex;
}
@media screen and (min-width :768px){
  .tellink{
    pointer-events: none;  
  }
  .flex_pc{
    display: -webkit-box;
    display: -ms-flex;  
    display: flex;
  }
}
@media screen and (max-width :767px){
  body{
    font-size:13px;
    font-size:1.3rem;  
  }
  .wrapper{
    margin-top: 23.3vw;
  }
  img{
    width: 100%;
    height: auto;
  }
  .for_pc{
    display: none;
  }
  .for_sp{
    display: block;
  }
  span.for_pc,
  br.for_pc,
  img.for_pc{
    display: none;
  }
  span.for_sp,
  br.for_sp,
  img.for_sp{
    display: inline;
  }
}

/* マウスオーバー */
.ov{
  display:block;
}
.over{
  display:block;
}

@media screen and (min-width : 768px){
  .ov,
  .over{
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor: pointer;
  }
  .ov:hover{
    opacity: .6;
    text-decoration: none;
  }

}
/* ===============================================
# フォント
=============================================== */
.font_gothic{
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

/* ===============================================
# リンク
=============================================== */
.link_arrow .ico{
  position: relative;
  display: inline-block;
  padding-left: 22px;
}

.link_arrow .line{
  width: 100%;
  display: inline-block;
}
.link_arrow .line::before, .link_arrow .line::after {
  position: absolute;
  top: 3px;
  z-index: 1;
  content: '';
  display: block;
  width:8px;
  height: 8px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;  
}
.link_arrow .line::before{
  right: 8px;
}
.link_arrow .line::after{
  right: 0;
}

.link_arrow .ico::before{
  content: '';
  width:0;
  height: 1px;
  background: #000;
  display: block;
  left: 0;
  top: 7px;
  position: absolute;
  z-index: 1;
  -webkit-transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

@media screen and (min-width :768px){
  .link_arrow:hover .line::before{
    right: -15px;
  }
  .link_arrow:hover .line::after{
    right: -23px;
  }
  .link_arrow:hover .ico::before{
    width:35px;
    left: 10px;
  }
}
@media screen and (max-width :767px){
  .link_arrow .ico{
    padding-left: 18px;
  }
  .link_arrow .line::before, .link_arrow .line::after {
    width:6px;
    height: 6px;
  }
  .link_arrow .line::before{
    right: 6px;
  }
}

/*news*/
.link_arrow.gray .line::before,
.link_arrow.gray .line::after {
  border-color: #8b8b8b; 
}
.link_arrow.gray .ico::before{
  background: #8b8b8b;
}
/* ===============================================
# main
=============================================== */
main{
  display: block;
}
/* ===============================================
# header
=============================================== */
header{
  position: relative;
  width: 94%;
  max-width: 1806px;
  margin: 38px auto 50px;
}
header h1{
  width: 161px;
}
@media screen and (max-width :767px){
  header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    width: 100%;
    height: 64px;
    margin: 0 auto;
    padding: 18px 6.7%;
  }
  header .gnavi{
    position: relative;
    z-index: 510;
    display: -webkit-box;
    display: -ms-flex;  
    display: flex;    
    justify-content: space-between;
    align-items: center;    
  }
  header h1{
    width: 34%;
    max-width: 219px;
  }
  /*menuボタン*/
  header .box_menu{
  }
  .menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }
  .menu-trigger {
    padding: 5px;
    position: relative;
    width: 39px;
    height: 32px;
  }
  .menu-trigger span {
    position: absolute;
    left: 5px;
    width: 29px;
    height: 1px;
    background-color: #0f0d0a;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 5px;
  }
  .menu-trigger span:nth-of-type(2) {
    top: 15px;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 5px;
  }  
  .menu-trigger span:nth-of-type(2)::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #0f0d0a;
    transition: all .4s;
  }
  .menu-trigger.active span:nth-of-type(1) {
    transform: translateY(20px) scale(0);
  }
  .menu-trigger.active span:nth-of-type(2) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .menu-trigger.active span:nth-of-type(2)::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .menu-trigger.active span:nth-of-type(3) {
    transform: translateY(-20px) scale(0);
  }
}

/*メニューPC---------------------------------*/
.gnavi_menu{
  position: absolute;
  top: 17.5%;
  right: 0;
  width: 70%;
  justify-content: flex-end;
  font-size: 15px;
  font-size: 1.5rem;
}
.gnavi_menu li:nth-child(n + 2){
  margin-left: 3.6%;
}
.gnavi_menu a{
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  overflow: hidden;
}
.gnavi_menu a::after{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: #000;
  transform: translateX(-100%);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;  
}
@media screen and (min-width :768px){
  .gnavi_menu a:hover::after,
  .gnavi_menu li.active a::after{
    transform: translateX(0);
  }
}
@media print,screen and (max-width :1200px){
  .gnavi_menu{
    font-size: 1.25vw;
    font-size: 1.1vw;
  }
}

/*メニューSP---------------------------------*/
@media screen and (max-width :767px){
  #gnavi_sp{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    background: url(../img/bg_smpmenu.png) no-repeat bottom right;
    background-size: 32.8% auto;
    background-color: rgba(255,255,255,0.9);
    padding-top: 64px;
    display: none;
  }
  #gnavi_sp .gnavi_menu_sp{
    text-align: center;
    font-size: 22.5px;
    font-size: 6vw;
    letter-spacing: 0.04em;
  }
  #gnavi_sp .gnavi_menu_sp li{
    margin-top: 45px;
  }
}
/* ===============================================
# アクセス
=============================================== */
.sec_access{
  padding-top: 85px;
  margin: 0 auto;
  text-align: center;
}
.sec_access .inner{
  display: inline-block;
}
.sec_access .ttl_access{
  font-size: 30px;
  font-size: 3rem;
  margin-bottom: 47px;
  letter-spacing: 0.04em;
}
.sec_access .adr{
  font-size: 18px;
  font-size: 1.8rem;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.sec_access .tel{
  border-top: solid 1px #e8e8e8;
  border-bottom: solid 1px #e8e8e8;
  padding: 16px 0;
}
.sec_access .tel .text{
  letter-spacing: 0.06em;  
  margin-bottom: 5px;
}
.sec_access .tel a{
  font-size: 44px;
  font-size: 4.4rem;
}
.sec_access .tel a span{
  display: inline-block;
  color: #868686;
  padding-right: 0.5em;
}
@media screen and (max-width :767px){
  .sec_access{
    padding-top: 22.2vw ;
  }
  .sec_access .ttl_access{
    font-size: 27.5px;
    font-size: 7.333vw;
    margin-bottom: 8.4vw;
    letter-spacing:0;
  }
  .sec_access .adr{
    font-size: 14px;
    font-size: 3.733vw;
    margin-bottom: 2.5vw;
    letter-spacing: 0.08em;
  }
  .sec_access .tel{
    padding: 1.7vw 0;
  }
  .sec_access .tel .text{
    font-size: 11.5px;
    font-size: 3.067vw;
    letter-spacing: 0.26em;  
  }
  .sec_access .tel a{
    font-size: 34.5px;
    font-size: 9.2vw;
    letter-spacing: 0.08em;
  }
  .sec_access .tel a span{
    padding-right: 0.5em;
  }
}

.sec_access .map{
  position: relative;
  margin-top: 65px;
  padding-top: 19.8%;
  border-bottom: solid 1px #000000;
}
.sec_access .map iframe{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
@media screen and (max-width :767px){
  .sec_access .map{
    margin-top: 29vw;
    padding-top: 110%;
    border-bottom: none;
  }
}
/* ===============================================
# footer
=============================================== */
footer{
  padding-bottom: 35px;
  background-color: #fcfcfc;
}
footer .inner{
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
}
footer .text{
  padding-top: 48px;
  padding-bottom: 50px;
  text-align: center;
  vertical-align: middle;
}
footer .text *{
  vertical-align: middle;  
}
footer .text .name{
  font-size: 30px;
  font-size: 3rem;
  letter-spacing: 0.28em;
  margin-bottom: 17px;
}
footer .text .name span{
  font-size: 20px;
  font-size: 2rem;
  letter-spacing: 0.02em;
  padding-right: 15px;
}
footer .text .adr{
  letter-spacing: 0.08em;
  margin-bottom:8px;
}
footer .text .tel a{
  font-size: 25px;
  font-size: 2.5rem;
}
footer .text .tel a span{
  color: #868686;
  padding-right: 0.5em;
  vertical-align: top;
}
footer .text .tel .time{
  letter-spacing: 0.04em;
}
footer .copy{
  font-size: 13px;
  font-size: 1.3rem;
  text-align: center;
}

@media screen and (max-width :767px){
  footer{
    padding-bottom: 0;
  }
  footer .copy{
    padding-top: 3.2vw;
    padding-bottom: 3.2vw;
    background-color: #000000;    
    font-size: 10px;
    font-size: 1rem;
    color: #fff;    
    letter-spacing: 0.04em;
  }
}


/* ===============================================
# ページトップ
=============================================== */
.pagetop{
  display: none;
  cursor: pointer;
  position: fixed;
  bottom: 30px;
  width: 44px;
  height: 90px;
  right: 2.5%;
  z-index: 1;
}
.pagetop.absolute{
  position: absolute;
  bottom: auto;
  top: -100px;
}
.pagetop::before{
  content: '';
  width: 1px;
  height: 0;
  background: #000;
  display: block;
  right: 21px;
  bottom: 18px;
  position: absolute;
  z-index: 1;
  -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.pagetop .ico{
  position: relative;
  display: block;
}
.pagetop .ico::before, .pagetop .ico::after {
  position: absolute;
  right:6px;
  content: '';
  z-index: 1;
  display: block;
  width: 27px;
  height: 30px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;    
}
.pagetop .ico::before {
    top:6px;
}
.pagetop .ico::after {
    top: 28px;
}
@media screen and (min-width :768px){  
  .pagetop:hover .ico::before {
    top: -15px;
  }
  .pagetop:hover .ico::after {
    top: 7px;
  }
  .pagetop:hover::before{
    height: 90px;
  }
}
@media screen and (max-width :767px){
  .pagetop{
    bottom: 0;
    }
  .pagetop.absolute{
    top: -70px;
  }
}


/* 2510 add */
.tel-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1em 5em;
  padding-top: 10px;
  @media screen and (max-width :767px) {
    flex-direction: column;
    align-items: center;
  }
  img {
    vertical-align: 0;
    @media screen and (max-width :767px) {
      width: 20px;
    }
  }
  a {
    &:hover {
      text-decoration: underline;
      text-decoration-thickness: 1px;
    }
  }
}
.sec_access .tel a {
  @media screen and (max-width :767px) {
    font-size: 20px;
  }
}
footer img[src*=".svg"] {
  width: 25px;
  vertical-align: 0;
}
footer .text .tel {
  line-height: 1.5;
}
footer .text .tel a {
  &:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }
  span {
    vertical-align: 0;
  }
}