@charset "utf-8";

/*
2018.03.10 shuji higashimae
global: サイト共通
*/

@import url('https://fonts.googleapis.com/css?family=Arapey|Open+Sans:300,400,600,700|Catamaran:300,400,800');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,500|Noto+Sans+TC:100,300,500');
.notoSansTC { font-family: 'Noto Sans TC', sans-serif;}

/* icomoonを利用する */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?x8c7da');
  src:  url('fonts/icomoon.eot?x8c7da#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?x8c7da') format('truetype'),
    url('fonts/icomoon.woff?x8c7da') format('woff'),
    url('fonts/icomoon.svg?x8c7da#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.icon-instagram:before {
  content: "\e900";
}
.icon-vimeo:before {
  content: "\e901";
}
.icon-facebook:before {
  content: "\e902";
}
/* Material iconsを利用する */
.material-icons {
 font-family: 'Material Icons';
 font-weight: normal;
 font-style: normal;
 font-size: 24px;  /* 推奨サイズ */
 display: inline-block;
 width: 1em;
 height: 1em;
 line-height: 1;
 text-transform: none;
 vertical-align: middle;

 /* WebKitブラウザサポート */
 -webkit-font-smoothing: antialiased;
 /* Chrome、Safariサポート */
 text-rendering: optimizeLegibility;

 /* Firefoxサポート */
 -moz-osx-font-smoothing: grayscale;

 /* IEサポート */
 font-feature-settings: 'liga';
}



/*--------------------------------------------------------------------------
 body
---------------------------------------------------------------------------*/
/* html {
 height: 100%;
 font-size: 62.5%;
}
body {
 width: 100%;
 font-family: -apple-system, BlinkMacSystemFont, "Open Sans", 'Noto Sans TC', sans-serif;
 font-size: 14px;
 font-size: 1.4rem;
 font-weight: 300;
 line-height: 1.8;
 color: #1d1d1d!important;
 -webkit-font-smoothing: antialiased;
 -webkit-text-size-adjust:100%;
 letter-spacing: 0.1em;
}

body {
 height: 100%;
 margin: 0;
}*/

/* @SP */
/* @media all and (max-width: 640px){
 body{
  min-width: 320px;
  font-size: 12px;
  font-size: 1.2rem;
 }
}  */

/*--------------------------------------------------------------------------
 secetion
---------------------------------------------------------------------------*/
.inner-xl {
 max-width: 1480px;
 margin: 0 auto;
}
.inner-l {
 max-width: 1380px;
 margin: 0 auto;
}
.inner-m {
 max-width: 1200px;
 margin: 0 auto;
}
.inner-s {
 max-width: 1080px;
 margin: 0 auto;
}
@media all and (max-width: 1200px){
 .inner-l,
 .inner-m,
 .inner-s { width: 90%;}
}

/*----------------------------------------------------------------------
 a
----------------------------------------------------------------------*/
a,a:link,a:visited,a:focus,a:active {
 /* color: #1d1d1d; */
 outline:none;
 text-decoration: none;
}
a {
 -webkit-transition:  all 0.2s;
 -moz-transition:  all 0.2s;
 -o-transition:  all 0.2s;
 transition:  all 0.2s;
}

/*--------------------------------------------------------------------------
 clearfix
---------------------------------------------------------------------------*/
.cf:before, .cf:after { content: " "; display: table;}
.cf:after { clear: both;}
.cf { *zoom: 1;}


.cont { width:100%; /* min-width:960px; */ position:relative; z-index:1;}
article.zReset { z-index: 10000000 !important;}
main.zReset { z-index: 10000000 !important;}
@media screen and (min-width: 1401px) {.contMin2 { max-width:1400px; margin: 0 auto;}}
@media screen and (max-width: 1400px) {.contMin2 { width:100%;}}
@media screen and (min-width: 1201px) {.contMin { max-width:1200px; margin: 0 auto;}}
@media screen and (max-width: 1200px) {.contMin { width: 95%; margin: 0 auto;}}
.left{ float:left; display:inline;}
.right{ float:right; display:inline;}
.google-r{ width:0px; height:0px; position:absolute; left:-100px; bottom:-100px; display:none;}

/*--------------------------------------------------------------------------
 animation
---------------------------------------------------------------------------*/
.fade-in {
 transition: opacity 1.2s;
  -o-transition: opacity 1.2s; /* opera */
  -moz-transition: opacity 1.2s; /* firefox */
  -webkit-transition: opacity 1.2s; /* chrome, safari */
  -ms-transition: opacity 1.2s; /* ie */
 opacity: 0;
}
.in {
 opacity: 1.0 !important;
}
.fade-up {
 transition: opacity 1.2s, transform 1.2s;
  -o-transition: opacity 1.2s, transform 1.2s; /* opera */
  -moz-transition: opacity 1.2s, transform 1.2s; /* firefox */
  -webkit-transition: opacity 1.2s, transform 1.2s; /* chrome, safari */
  -ms-transition: opacity 1.2s, transform 1.2s; /* ie */
 opacity: 0;
 transform: translate(0,60px);
 -webkit-transform: translate(0,60px);
}
.up {
 opacity: 1 !important;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}

.mask { position: relative;}
.mask span {
 display: inline-block;
 position: relative;
 opacity: 0 !important;
 font-size: 0 !important;
 transition: opacity 1s;
 transition-delay: 0.75s;
}
.is-visible.mask span {
 opacity: 1 !important;
 font-size: inherit !important;
}
.mask span img {
 opacity: 0;
 transition-delay: 0.75s;
 -webkit-transform: translateX(-10px);
 -ms-transform: translateX(-10px);
 transform: translateX(-10px);
}
.is-visible.mask span img {
 opacity: 1;
 animation-name: slide-in;
 animation-delay: 0.75s;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 animation-timing-function: ease-in-out;
}
.mask span::before {
 content: '';
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 -webkit-transform: scaleX(0);
 -ms-transform: scaleX(0);
 transform: scaleX(0);
 background-color: #1d1d1d;
 z-index: 100;
}

.is-visible.mask span::before {
 -webkit-animation: mask-tween-1 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0.25s forwards alternate,
 mask-tween-2 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) 0.85s forwards alternate;
 animation: mask-tween-1 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) 0.25s forwards alternate,
 mask-tween-2 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) 0.85s forwards alternate;
}
@keyframes slide-in {
 0% {
  -webkit-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
  transform: translateX(-10px);
 }
 100% {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
 }
}
@-webkit-keyframes mask-tween-1 {
 0% {
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
 }
 100% {
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
 }
}
@keyframes mask-tween-1 {
 0% {
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
 }
 100% {
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scaleX(1);
          transform: scaleX(1); }
  }

@-webkit-keyframes mask-tween-2 {
 0% {
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
 }
 100% {
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
 }
}

@keyframes mask-tween-2 {
 0% {
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
 }
 100% {
  -webkit-transform-origin: top right; transform-origin: top right;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
 }
}

.zoom  {
 display: block;
 -webkit-transition: .4s ease-out;
 -moz-transition: .4s ease-out;
 transition: .4s ease-out;
}
@media screen and (max-width: 640px) {
 .fade-up {
  transform: translate(0,30px);
  -webkit-transform: translate(0,30px);
 }
 .up {
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
 }
}

/*a:hover .zoom { transform:scaleX(1.05)scaleY(1.05);}

a:link, a:hover  { opacity:1.0; filter: alpha(opacity=100); margin:0; padding:0; font-size:100%; vertical-align:middle; background:transparent; text-decoration:none; outline:none;}*/
/*a , a *,  a img, a span{ -webkit-transition: 0.4s ease-in-out;-moz-transition: 0.4s ease-in-out;-o-transition: 0.4s ease-in-out;transition: 0.4s ease-in-out;}*/

/*--------------------------------------------------------------------------
 header
---------------------------------------------------------------------------*/



@media screen and (max-width: 920px) {
/*  #header {
  padding: 0;
  z-index: 10000000;
  position: fixed;
  top: 0;
  background: #FFF;
  color: #1d1d1d!important;
 }
 #header.fixed {
  height: 44px;
  position: fixed;
  animation-name: none;
  background: #FFF;
 }
 #header.fixed + *::before { margin-top: 0;}
 #header #logo {
  width: 100%;
  height:44px;
 }
 #header #logo a {
  width: 175px;
  line-height: 44px;
 }
 #header #logo h1 { display: none;}
 #header #gnav,
 #header .sub-menu,
 #header .sns { display: none;} */
}

/* SP-nav */
@media screen and (min-width: 921px) {
 .drawer--top .drawer-hamburger,
 .drawer-nav { display: none;}
}
.drawer-open { overflow-y: hidden !important;}
.drawer-hamburger-icon,
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after {
  width: 100%;
  height: 1px !important;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  background-color: #2d2d2d !important;
}
.drawer-open .drawer-hamburger-icon { background-color: transparent !important;}
.drawer-menu .top {
 opacity: 1;
}
.drawer--top .drawer-nav { overflow-y: scroll;}
.drawer-menu .top::after { border-bottom: none;}
.drawer-menu .lang::after { border-bottom: none;}
.drawer-menu .top a {
 display: block;
  text-align: center;
 line-height: 44px;
 background: #f7f7f7;
}
.drawer-menu .top a img {
  width: 175px;
  height: auto;
  vertical-align: middle;
}
.drawer-menu > li { position: relative;margin: 0 auto}
.drawer-menu > li::after {
 content: '';
 border-bottom: 1px dotted #ddd;
 display: block;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
}
.drawer-menu a {
 display: block;
 text-align: center;
 letter-spacing: 0.2em;
 line-height: 50px;
 color: #2d2d2d;
 font-size: 12px;
 background: #fff;
}
.drawer-menu a.cam{
 line-height: 0;
}
.drawer-menu .sns {
 display: block !important;
 position: static !important;
 -webkit-transform: translate(0, 0) !important;
 transform: translate(0, 0) !important;
}
.drawer-menu > .sns::after { content: none;}
.drawer-menu .sns ul {
 width: 100%;
 text-align: center;
 background: #FFF;
}
.drawer-menu .sns ul li { width: 50px !important;}
.drawer-menu .sns ul li a {
 width: 50px;
 height: 50px;
 line-height: 50px;
}
.drawer-menu .sns ul li a span {
 line-height: 50px;
 font-size: 30px !important;
}
.drawer-menu .lang {
 width: 100%;
 opacity: 1.0;
 border-top: none;
}
.drawer-menu .lang ul {
 width: 100%;
 font-size: 0;
 letter-spacing: -5px;
 text-align: center;
}
.drawer-menu .lang ul li {
 width: 33.33%;
 display: inline-block;
 letter-spacing: 0.2em;
 line-height: 50px;
 color: #FFF;
 font-size: 12px;
 background: #2d2d2d;
 border-left: 1px solid #999;
 border-top: none;
}
.drawer-menu .lang ul li:first-child { border-left: none;}
.drawer-menu .lang ul li a {
 color: #FFF;
 background: #878787;
}


/*--------------------------------------------------------------------------
 footer
---------------------------------------------------------------------------*/
/*#footer{
 padding-bottom: 30px;
 max-width:100%;
 overflow:hidden;
 position:relative;
 background:#1d1d1d;
}
#footer .cf{}
#footer .cf h2{
 text-align:center;
 padding: 30px 0;
}
#footer .cf h2 img {
 width:250px; height: auto;
 opacity: 0.9;
}
#footer .cf h2 strong{
 display:block;
 font-family : "Arapey" , serif;
 font-size:11px;
 color:#ddd;
 letter-spacing: 0.38em;
}
#footer .cf .foot-menu {
 margin: 0 auto 60px;
 padding: 30px 0;
 border-top: solid 1px rgba(255,255,255,.15);
 border-bottom: solid 1px rgba(255,255,255,.15);
}

#footer .cf .foot-menu .box {
 width: 23%;
 margin-left: 2.65%;
 float: left;
}
#footer .cf .foot-menu .box.first-child { margin-left: 0;}
#footer .cf .foot-menu .box h3 {
 padding-bottom: 5px;
 margin-bottom: 8px;
 letter-spacing: 0.1em;
 color: #878787;
 line-height: 1.3;
 font-size: 16px;
 font-weight: 300;
 border-bottom: 1px dashed rgba(255,255,255,.15);
}
#footer .cf .foot-menu .box ul li {
 line-height: 2;
 font-size: 14px;
}
#footer .cf .foot-menu .box ul li a { color: #878787;}
#footer .cf .foot-menu .box ul li a:hover {
 color: #FFF;
 text-decoration: underline;
}
#footer .cf .foot-menu .box .left,
#footer .cf .foot-menu .box .right { width: 50%;}
#footer .cf .foot-menu .box.sns ul {
 padding-top: 5px;
 font-size: 0;
 letter-spacing: -5px;
}
#footer .cf .foot-menu .box.sns ul li {
 width: 30px;
 display: inline-block;
}
#footer .cf .foot-menu .box.sns ul li a span {
 font-size: 30px;
 letter-spacing: 0;
}
#footer .cf .foot-menu .box.sns ul li a:hover { text-decoration: none;}*/

/*sub*/
/*#footer .cf .foot-sub{
 width:100%;
 margin:120px 0 15px;
 text-align:center;
}
#footer .cf .foot-sub li,
#footer .cf .foot-sub li *{
 display:inline;
 font-size:11px;
 color:#777;
}
#footer .cf .foot-sub li a { padding:0 10px;}
#footer .cf .foot-sub li a:hover{
 text-decoration:underline;
 color:#ddd;
}
#footer .cf .other { display: none;}
#footer .cf .tel_num {
 font-size: 14px; line-height: 2.5;
 color:#878787;
 text-align:center;
 }
#footer .cf .copy {
 font-size:10px;
 line-height:30px;
 color:#878787;
 text-align:center;
}

/*sub*/
#footer .foot-lang {
 width:200px;
 height:40px;
 position:absolute;
 right: 0;
 bottom: 0;
 z-index:10;
}
#footer .foot-lang li{
 width:40px;
 float:right;
 line-height:40px;
 font-size:12px;
 text-align:center;
 color:#fff;
 background: #878787;
 margin-left:1px;
}
#footer .foot-lang li a{
 line-height:40px;
 display:block;
 background:#2d2d2d;
 color:#ddd;
}
#footer .foot-lang li a:hover {
 color: #fff;
 background:#878787;
}*/
#fix-pconly {
 width: 100%;
 padding: 10px 0;
 text-align: center;
 line-height: 0;
 background: rgba(13,13,13,.9);
 position: fixed;
 left: 0;
 bottom: -100px;
 z-index: 10000;
 -webkit-transition: 0.4s ease-in-out;
 -moz-transition: 0.4s ease-in-out;
 -o-transition: 0.4s ease-in-out;
 transition: 0.4s ease-in-out;
}
#fix-pconly img {
 width: auto;
 max-height: 80px;
}
#fix-pconly.active { bottom: 0;}
#fix-contact { display: none;}
#right_bnr {
 width: 7%;
 opacity: 0;
 position: fixed;
 right: 0;
 bottom: 200px;
 z-index: 1000;
 -webkit-transition: 0.6s ease-in-out;
 -moz-transition: 0.6s ease-in-out;
 -o-transition: 0.6s ease-in-out;
 transition: 0.6s ease-in-out;
}
#right_bnr a{
  cursor: pointer;
}
#right_bnr.active { opacity: 1;
 -webkit-transition: 0.6s ease-in-out;
 -moz-transition: 0.6s ease-in-out;
 -o-transition: 0.6s ease-in-out;
 transition: 0.6s ease-in-out;
}

@media screen and (min-width: 641px) {
 /*#footer .cf .foot-menu .box ul { display: block!important;}
}*/

@media screen and (max-width: 640px) {
/*.pc {display: none!important;}
 #right_bnr { display: none;}
 #footer { padding-bottom: 85px!important;}
 .fixed-body #footer { z-index:-1;}
 #footer .contMin {
  width: 100%;
  margin: 0;
  background-color: #1d1d1d;
 }
 #footer .cf h2 {
  text-align:center;
  line-height: 1.2;
  padding: 30px 0 20px;
 }
 #footer .cf h2 img {
  width: 175px;
  height: 14px;
  display: inline;
 }
 #footer .cf h2 strong{
  margin-top: 3px;
  display:block;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: #878787;
 }
 #footer .cf .foot-menu {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border: none;
 }
 #footer .cf .foot-menu .box.first-child {
  margin: 0 auto;
 }
 #footer .cf .foot-menu .box {
  width: 100%;
  margin: 0 auto;
  float: none;
  display: block;
  }
 #footer .cf .foot-menu .box h3 {
  font-size: 11px;
  text-align: center;
  color: #878787;
  padding: 6% 0 1%;
  border-bottom:none;
 }
  #footer .cf .foot-menu .box ul {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 0px;
  }
  #footer .cf .foot-menu .box.first-child ul {
    padding-bottom: 13px;
  }
  #footer .cf .foot-menu .box ul li a{
  color: #878787!important;
  font-size: 12px;
  padding: 5% 10%;
  display:block;
  }
 #footer .cf .foot-menu .box ul li {
  background-color: #333;
  width: 49%;
  float: left;
  margin:0 0.5% 1%;
 }
 #footer .cf .box.sns {
  width: 100%;
  margin: 0;
  display: block;
  background: #1d1d1d;
 }
 #footer .cf .box.sns h3 { display: none;}
 #footer .cf .box.sns ul {
  padding-top: 0;
  text-align: center;
  background: none;
  border: none;
  background-color: #1d1d1d!important;
  padding-bottom: 0;
  padding-top: 5px;
 }
 #footer .cf .box.sns ul li {
  background-color: #1d1d1d;
  margin: 0;
  padding: 0;
  display: inline;
  font-size: 30px;
  line-height: 0;
 }
 #footer .cf .box.sns ul li a { color: #878787!important;}
 #footer .cf .box.sns ul li a img {}
 #footer .cf .tel_num {
  padding-top: 10px;
  line-height: 1.2;
  text-align: center;
  font-size: 12px;
 }
 #footer .cf .other {
  padding: 10px 0;
  display: block;
  text-align: center;
  line-height: 1;
  color: #878787;
  font-size: 11px;
 }
 #footer .cf .other a {
  vertical-align: baseline;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #878787;
  font-size: 11px;
 }
 #footer .cf .copy {
  padding: 5px 0 0;
  line-height: 1.2;
  background-color: #1d1d1d;
  padding-bottom: 5px;
 }
 #footer .cf .copy span {
  margin-top: 5px;
  margin-bottom: 0;
  line-height: 1.2;
  font-size: 9px;
 }
 #footer .cf .copy span a {
  line-height: 1.2;
  vertical-align: top;
  font-size: 8px;
 }
 #footer .foot-lang { display: none; }

 #fix-pconly.active { display: none;}
 #fix-contact {
  width: 100%;
  position: fixed;
  display: block;
  bottom: -100px;
  z-index: 10000;
  opacity: 0;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  background: #FFF;
 }
 #fix-contact.active {
  bottom: 0;
  opacity: 1;
 }
 #fix-contact ul { padding: 15px;}
 #fix-contact ul li {
  float: left;
  width: 48.83333%;
 }
 #fix-contact ul li:last-child { float: right;}
 #fix-contact a {
  height: 45px;
  padding: 7.5px 0 7.5px 7.5px;
  display: block;
  line-height: 1;
  background: #1d1d1d;
 }
 #fix-contact ul li:last-child a { background: #0098da;}
 #fix-contact a .icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
 }
 #fix-contact a b {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.4;
  color: #FFF;
  font-size: 10px;
  font-weight: 500;
 }
 #fix-contact img { width: 100%; height: auto;}*/
}
@media screen and (max-width: 460px) {}


/*--------------------------------------------------------------------------
 pagetop
---------------------------------------------------------------------------*/
.page-up{
 text-align:center;
 padding:80px 0 30px;
 position:relative;
 z-index:5;
 background:#fff;
}
.page-up a { display: block;}
.page-up a img{
 width: 52px;
 height: auto;
 margin: 0 auto;
 padding:20px 0 0;
 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
     -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
         transition: all 0.3s ease;
}
.page-up a:hover img{ padding:0 0 20px;}

@media screen and (max-width: 640px) {
 .page-up{ padding: 40px 0 20px;}
 .page-up a img {
  width: 50px;
  padding-top: 15px;
 }
}

/*--------------------------------------------------------------------------
 Breadcrumb
---------------------------------------------------------------------------*/
#Breadcrumb{
 width:100%;
 background:#aaa;
 position:relative;
 z-index:2;
 font-size: 0;
 letter-spacing: -5px;
}
#Breadcrumb li {
 display: inline-block;
 position: relative;
 letter-spacing: 0.1em;
 line-height:22px;
 font-size:12px;
}
#Breadcrumb li a {
 display:block;
 width:180px;
 text-align:center;
 line-height:22px;
}
#Breadcrumb li.now{ margin-left:30px;}
#Breadcrumb li .img { display:none;}
#Breadcrumb li span {
 width: 0;
 height: 0;
 border: 11px solid transparent;
 border-left: 11px solid #f00;
 position:absolute;
 right:-21.1px;
 top:0.8px;
 z-index:10;
}
#Breadcrumb li a, #Breadcrumb li span {
 -webkit-transition: 0.6s ease-in-out;
 -moz-transition: 0.6s ease-in-out;
 -o-transition: 0.6s ease-in-out;
 transition: 0.6s ease-in-out;
}
#Breadcrumb li.page1:hover span,
#Breadcrumb li.page2:hover span{ border-left: 11px solid #555;}
@media screen and (max-width: 768px) {#Breadcrumb{ display:none;}}

/* COLOR */
#Breadcrumb{ background:#878787;}
#Breadcrumb li,
#Breadcrumb li a{ color:#fff;}
#Breadcrumb li.page1 a{ background:#585858;}
#Breadcrumb li.page1 span{ border-left: 11px solid #585858;}
#Breadcrumb li.page2 a{ background:#4c4c4c;}
#Breadcrumb li.page2 span{ border-left: 11px solid #4c4c4c;}
#Breadcrumb li.page3 a{ background:#333333;}
#Breadcrumb li.page3 span{ border-left: 11px solid #333333;}
#Breadcrumb li.page4 a{ background:#2d2d2d;}
#Breadcrumb li.page4 span{ border-left: 11px solid #2d2d2d;}
/*hover*/
#Breadcrumb li.page1:hover a,
#Breadcrumb li.page2:hover a,
#Breadcrumb li.page3:hover a,
#Breadcrumb li.page4:hover a { background:#fff; color:#2d2d2d;}
#Breadcrumb li.page1:hover span,
#Breadcrumb li.page2:hover span,
#Breadcrumb li.page3:hover span,
#Breadcrumb li.page4:hover span { border-left: 11px solid #fff;}

/*--------------------------------------------------------------------------
 contact
---------------------------------------------------------------------------*/
#contact {
 margin: 100px auto;
 padding: 45px 0 50px;
 border: 1px solid #dfdfdf;
 z-index:10 !important;
}

#contact .text {
 margin-bottom: 30px;
 text-align:center;
 letter-spacing: 0.1em;
 font-size: 16px;
 font-weight: 300;
}
#contact .btn {
 width: 580px;
 margin: 0 auto;
}
#contact .btn a {
 letter-spacing: 0.1em;
 text-align: center;
 line-height: 90px;
 display: block;
 color: #FFF;
 font-size: 16px;
 font-weight: 400;
 position: relative;
}
#contact .btn a:hover {
 color: #2d2d2d;
 background: transparent;
}
#contact .btn a::before {
 content: "";
 width: 0;
 height: 100%;
 background: #fff100;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
}
#contact .btn a:hover::before {
 width: 100%;
 -webkit-transition:  all 0.15s ease-out;
 -moz-transition:  all 0.15s ease-out;
 -o-transition:  all 0.15s ease-out;
 transition:  all 0.15s ease-out;
}
#contact .btn a::after {
 content: "";
 width: 100%;
 height: 100%;
 background: #2d2d2d;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -2;
}
#contact .btn a .icon {
 width: 60px;
 height: 60px;
 position: absolute;
 left: 15px;
 top: 15px;
}
#contact .btn a .icon img {
 width: 100%;
 height: auto;
}
/* リニューアル*/

#contact {
 margin: 100px auto;
 padding: 45px 0 50px;
 border: 1px solid #dfdfdf;
 z-index:10 !important;
}

#contact .text {
 margin-bottom: 30px;
 text-align:center;
 letter-spacing: 0.1em;
 font-size: 16px;
 font-weight: 300;
}
#contact .btn.left {
 width: 40%;
/* max-width: 580px;*/
 margin: 0 1.5% 0 8.5%;
}
#contact .btn.right {
 width: 40%;
/* max-width: 580px;*/
 margin: 0 8.5% 0 1.5%;
}
@media screen and (min-width:641px) and ( max-width:1024px){
#contact .btn.left {
 display: block;
 float: none;
 width: 60%;
/* max-width: 580px;*/
 margin: 0 auto;
 margin-bottom: 20px;
}
#contact .btn.right {
 display: block;
 width: 60%;
 float: none;
/* max-width: 580px;*/
 margin: 0 auto;
}
}

#contact .btn a {
 letter-spacing: 0.1em;
 text-align: center;
 line-height: 90px;
 display: block;
 color: #FFF;
 font-size: 16px;
 font-weight: 300;
 position: relative;
}
#contact .btn a:hover {
 color: #2d2d2d;
 background: transparent;
}
#contact .btn a::before {
 content: "";
 width: 0;
 height: 100%;
 background: #fff100;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
}
#contact .btn a:hover::before {
 width: 100%;
 -webkit-transition:  all 0.15s ease-out;
 -moz-transition:  all 0.15s ease-out;
 -o-transition:  all 0.15s ease-out;
 transition:  all 0.15s ease-out;
}
#contact .btn.left a::after {
 content: "";
 width: 100%;
 height: 100%;
 background: #2d2d2d;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -2;
}
#contact .btn.right a::after {
 content: "";
 width: 100%;
 height: 100%;
 background: #0098da;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -2;
}
#contact .btn a .icon {
 width: 60px;
 height: 60px;
 position: absolute;
 left: 15px;
 top: 15px;
}
#contact .btn a .icon img {
 width: 100%;
 height: auto;
}

@media screen and (max-width: 640px) {
 #contact {
  margin: 80px auto;
  padding: 45px 0 50px;
  border: 1px solid #dfdfdf;
  z-index:10 !important;
 }
}

@media screen and (max-width: 640px) {
 #contact { display: none;}
}

/*--------------------------------------------------------------------------
 pagetitle
---------------------------------------------------------------------------*/
#page-title {
 padding: 100px 0 80px;
 text-align: center;
 background: #f7f7f7;
}
#page-title h2 {}
#page-title h2 .en {
 display: block;
 letter-spacing: 0.1em;
 line-height: 1;
 font-family: 'Arapey', serif;
 font-size: 38px;
 font-weight: normal;
}
#page-title h2 .ch {
 margin-top: 0.8em;
 display: block;
 letter-spacing: 0.2em;
 line-height: 1;
 font-size: 12px;
 font-weight: normal;
}
#page-title h2 .underline {
 width: 40px;
 margin: 25px auto;
 display: block;
 line-height: 0;
 border-bottom: 1px solid #1d1d1d;
}
@media screen and (max-width: 1200px) {
 #page-title { padding: 80px 0 60px;}
 #page-title h2 .en { font-size: 32px;}
 #page-title h2 .ch { font-size: 10px;}
 #page-title h2 + p {text-align: center!important; font-size: 14px!important;}
}
@media screen and (max-width: 640px) {
 #page-title { padding: 50px 0 40px; margin: 0 auto;}
 #page-title h2 .en { font-size: 26px;}
 #page-title h2 + p {text-align: left!important; font-size: 12px!important;}
 #page-title h2 .underline {
  width: 30px;
  margin: 20px auto;
 }
}