@charset "UTF-8";
/* ---------------------------------------------------------------------------------------------------   

　.header

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

/* transition */
.header,
.header:before,
.header:after,
.header_sp,
.header_sp:after,
.header .logo_area,
.header .nav_area,
.header .nav_area_right { -webkit-transition: all 0.5s ease;  transition: all 0.5s ease; }
.header .logo_area h1 a{ -webkit-transition: all 0.5s ease;  transition: all 0.5s ease; }

.header { position: fixed; top: 0; left:0; right: 0; height: 65px; z-index: 99; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.5s ease;  transition: all 0.5s ease; width: 1400px; margin: 0 auto;}
.header:after { position: absolute; top:5%; right: 0;left: 0; bottom: 75%; bottom:10%; content: ""; background:transparent;z-index: -2; ;}
.header.fixed:after  {top: 0; right: 0;left: 0;bottom: 0;background: #f9f8f7;box-shadow: 0px 0px 40px rgba(0, 0, 0, .1);-webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, .1);}
.fixed .menu > li a { color: #333; }

@media only screen and (max-width: 960px) {
.header {display: none;}
  .p-header__title a { font-size: 7vw; line-height: 1.7 }
}


/* ------------------------------------------------
   .logo_area
   ------------------------------------------------ */   
.header .logo_area { position: absolute; top:20px; left: 0; z-index: 5;}
.header .logo_area h1{ display: block; position: relative;  z-index:0; }
.header .logo_area h1 a {display: block; position: relative;z-index: 1; font-size: .8em;}
.header .logo_area h1 a svg { fill:#fff; font-size: 20px; inline-size: 0; width: 100%; stroke: inherit; }

/* ----- .page_sub ----- */
.page_sub .header .logo_area h1 a:before {background:url("../images/common/logo_b.png") center left no-repeat;background-size: 164px 30px;}
.header.fixed .logo_area h1 a svg { fill:#333; }
@media only screen and (max-width: 960px) {
.header .logo_area {display: none;}
}


/* ------------------------------------------------
   .nav_area
   ------------------------------------------------ */   

.header .nav_area { position: absolute; top: 5px; right: 0; z-index: 0;}

/* menu */
.menu {list-style: none;position: relative; z-index: 0; font-size: 0}
.menu > li {list-style: none;display:inline-block; margin: 0 30px 0 0;font-size: 14px; position: relative; z-index: 0;color: #f9f8f7;}
.menu > li:last-child {margin: 0;}
.menu > li a {display: block;font-size: 14px;font-family: "Montserrat", sans-serif;;font-weight: normal;line-height: 55px; letter-spacing: 0.05em;position: relative; z-index: 0; color: #fff;}
.menu > li a:after { position: absolute; bottom: 16px; right: 2px; left: 0; height: 1px; content: "";background: #f9f8f7; z-index: 1;transition: transform .3s cubic-bezier(.215, .61, .355, 1);transform-origin: right center;transform:scaleX(0) }
.menu > li:hover a:after { transform-origin: left center;transform:scaleX(1)}
.header.fixed .menu > li {color: #111;}
.header.fixed .menu > li a:after { background: #111; }

.menu > li.arrow_down { padding-right: 17px; margin: 0 30px 0 0; }
.menu > li.arrow_down:hover {cursor: pointer;}
.menu > li.arrow_down:before { position: absolute; top: -1px; right: -2px; bottom: 0; margin: auto 0; width: 15px; height: 16px;border:#f1eee9 1px solid; font-size: 8px;line-height: 15px; font-family:'themify'; content:"\e64b"; text-align: center;z-index: 0; border-radius:100%;-webkit-border-radius:100%;-webkit-transition: all 0.3s ease;  transition: all 0.3s ease;}
.menu > li.arrow_down:hover:before {background:#f9f8f7; color: #111; }
.header.fixed .menu > li.arrow_down:before { border-color: #111;}
.header.fixed .menu > li.arrow_down:hover:before { background: #111; border-color: #111;color: #f9f8f7; }

.menu > li > ul {position: absolute;top: 50px; left: -30px; width:auto; padding: 35px 0 20px;-webkit-transition: .25s ease; transition: .25s ease;visibility: hidden;opacity: 0; z-index: -1;}
.menu > li:hover > ul {top: 55px;visibility: visible;opacity: 1;}
.menu > li > ul:after { position: absolute; top: 15px; right: 0; bottom: 0; left: 0; content: "";background: #f9f8f7; box-shadow: 0px 0px 40px rgba(0, 0, 0, .1);-webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, .1); z-index: -1; }

.menu > li > ul > li {display: block;}
.menu > li > ul > li a { padding: 0 70px 0 30px; color: #111; line-height: 45px; white-space: nowrap; -webkit-transition: all 0.3s ease;  transition: all 0.3s ease;}

/* ul.list_jp */
.menu > li > ul.list_jp {margin: -4px 0;}
.menu > li > ul.list_jp > li {margin: 4px 0;}
.menu > li > ul.list_jp > li a { padding: 10px 40px 10px 60px; font-size: 13px; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese', "メイリオ", "Lucida Grande", Meiryo, sans-serif; line-height: 1;}
.menu > li > ul.list_jp > li a span.txt_en{ display: block;font-size:10px;font-family: "Montserrat", sans-serif;;font-weight: normal; letter-spacing: 0.05em;}
.menu > li > ul.list_jp > li a span.txt_jp {display: inline-block; margin: 6px 0 0;  font-size: 13px; font-family: 'Noto Serif JP', serif;font-weight: 500; position: relative; z-index: 0;}
.menu > li > ul.list_jp > li a span.txt_jp:after { position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; content: ""; background:#111; z-index: 0; transition: transform .3s cubic-bezier(.215, .61, .355, 1);transform-origin: right center;transform:scaleX(0) }
.menu > li > ul.list_jp > li a:hover span.txt_jp:after { transform-origin: left center;transform:scaleX(1)}
.menu > li > ul.list_jp > li a:before { position: absolute; top: 50%; left: 25px;width: 22px; height: 22px;border: #555 1px solid;  font-size: 13px;font-family: "Montserrat", sans-serif;;font-weight:normal; line-height: 20px;text-align: center;letter-spacing: 0; z-index: 0;border-radius:100%;-webkit-border-radius:100%;-webkit-transition: 0.3s ease; transition: 0.3s ease;-webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
.menu > li > ul.list_jp > li a.l_1:before {content: "01";}
.menu > li > ul.list_jp > li a.l_2:before {content: "02";}
.menu > li > ul.list_jp > li a.l_3:before {content: "03";}
.menu > li > ul.list_jp > li a.l_4:before {content: "04";}
.menu > li > ul.list_jp > li a:hover:before { background: #111; color: #f9f8f7; border-color: #111;}
.menu > li:hover ul > li a:after,
.header.fixed .menu > li:hover ul > li a:after{ border-color: transparent; display: none; }

/* ul.list_brand */
.menu > li > ul.list_brand > li a {padding: 0 40px 0 90px; line-height: 50px; }
.menu > li > ul.list_brand > li a .img_area { position: absolute; top: 0; left: 30px; bottom: 0; margin: auto 0; width: 45px; height: 45px; border: #ddd 1px solid;z-index: 0;-webkit-transition: all 0.3s ease;  transition: all 0.3s ease; }
.menu > li:hover ul.list_brand > li a:before { display: none; }
.menu > li > ul.list_brand > li a span {display: inline-block; margin: 8px 0 0; position: relative; z-index: 0;}
.menu > li > ul.list_brand > li a span:after { position: absolute; left: 0; right: 0; bottom:13px; height: 1px; content: ""; background:#111; z-index: 0; transition: transform .3s cubic-bezier(.215, .61, .355, 1);transform-origin: right center;transform:scaleX(0) }
.menu > li > ul.list_brand > li a:hover span:after{ transform-origin: left center;transform:scaleX(1)}

/* ----- .page_sub ----- */
.page_sub .header .logo_area h1 a:before {background:url("../images/common/logo_b.png") center left no-repeat;background-size: 164px 30px;}
.page_sub .header .nav_area .menu > li {color: #111;}
.page_sub .header .nav_area .menu > li.arrow_down:before { border-color: #111;}
.page_sub .header .nav_area .menu > li.arrow_down:hover:before { background: #111; border-color: #111;color: #f9f8f7; }
.page_sub .header .nav_area .menu > li a:after { background: #111;}

/* ----------- .nav_area_right ----------- */
.header .nav_area_right {position: absolute; top: 5px; right: 3.5%; z-index: 1;}
.header .nav_area_webstore {position: absolute; top: 15px; right: 3.5%; z-index: 1; } 
.header .nav_area_webstore a { display: block; width: 120px;border: #f9f8f7 1px solid; color: #f9f8f7;font-size: 14px;font-family: "Montserrat", sans-serif;;font-weight: normal; line-height: 35px;letter-spacing: 0.05em; text-align: center;  position: relative; z-index: 0; border-radius:2px; -webkit-border-radius:2px;}
.header .nav_area_webstore a:hover {background:#f9f8f7; color: #111; }
.header.fixed .nav_area_webstore a {border-color: #111;color: #111}
.header.fixed .nav_area_webstore a:hover { background:#111; color: #f9f8f7; }
.header .nav_area_webstore_sub a {border-color: #111;color: #111}
.header .nav_area_webstore_sub a:hover { background:#111; color: #f9f8f7; }

/* ----- .page_sub ----- */
.page_sub .nav_area_webstore a {border-color: #111;color: #111}
.page_sub .nav_area_webstore a:hover { background:#111; color: #f9f8f7; }

/* サブページ（黒色） */
.page_sub .header .menu > li a { color: #000; }
/* サブページのホバー（黒色のライン） */
.page_sub .header .menu > li a:after { background: #000; }
/* サブページのロゴ */
.page_sub .header .logo_area h1 a svg { fill: #000; }



/*sp header*/
.p-header {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #222222;
}

.p-header__inner {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
  position: relative;
}

.p-header__title {
  z-index: 997;
}

.p-header__title a {
  text-decoration: none;
  color: #FFFFFF;
}

.p-header__nav {
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #333;
  transition: ease .4s;
  z-index: 999;
}


.p-header__nav-items {
  padding-top: 200px;
}

.p-header__nav-item {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.p-header__nav-item a {
  color: #FFFFFF;
  display: inline-block;
  text-align: center;
  margin-bottom: 24px;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
}

.p-header__nav-item:last-child a {
  margin-bottom: 0;
}

.p-header__hamburger {
  width: 24px;
}

.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
  cursor: pointer;
}

.hamburger span {
  width: 24px;
  height: 1px;
  background-color: #FFFFFF;
  position: relative;
  transition: ease .4s;
  display: block;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 8px 0;
}


.hamburger span:nth-child(3) {
  top: 0;
}

.p-header__nav.active {
  transform: translateX(0);
}

.hamburger.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}


.hamburger.active span:nth-child(2) {
  opacity: 0;
}


.hamburger.active span:nth-child(3) {
  top: -13px;
  transform: rotate(-45deg);
}

.p-header__nav-box-mask.active {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: rgba(0,0,0,0.55);
  transition: ease .4s;
}









@media only screen and (max-width: 768px) {
.p-header__title a svg { width: 80%;  }
.p-header__title a svg text { fill:#fff !important; font-size: 4.6vw !important; }
.p-header__title a svg text tspan { font-weight:400 !important;}