@charset "UTF-8";

/* ==========================================================================
   Base
========================================================================== */
html {
  font-family: sans-serif;
}

/* ==========================================================================
   Header
========================================================================== */
#siteHeader {
	height: 68px; }
.inner-header {
	align-items: flex-end;
}
#siteHeader.fixed .inner-header{
	position: fixed;
}

#logo {
	position: absolute;
	top: 20px;
	right: 68px;
	left: 68px;
	width: 84px;
	margin: 0 auto;
}

/* ==========================================================================
   Navigation
========================================================================== */
.gNav{
}
.gNav__inner {
	
}
.gNav .navArea {
	width: 100%; 
    height: 100%;
	display: none;
}
.gNav .navArea__inner {
	position: fixed;
    top: 0;
    left: 0;  
    background: #000;
    color: #fff;
    width: 100%;
    height: 0;
    opacity: 0;
    padding: 40px 25px;
    overflow-y: auto;
    transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.gNav .nav {
	height: 100%;
}
.gNav ul {
	flex-wrap: wrap;
	max-width: 375px;
    opacity: 0;
    transform: translateX(-15px);
    transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.gNav ul li a:hover {
	opacity: .5;
}

.gNav ul li .sub-menu {
  margin: 0 -25px;
}
.gNav ul li .sub-menu .sub-menu-switch {
  padding: 16px 35px;
        font-size: 1.8rem;
}
.gNav ul li .sub-menu li {
  border-bottom: 1px solid #000;
}
.gNav ul li .sub-menu li a {
  padding: 16px 35px;
}
.gNav ul li .sub-menu li {
  font-size: 1.3rem;
    font-weight: bold;
}
.gNav ul li .sub-menu .sub-menu-switch::before,
.gNav ul li .sub-menu .sub-menu-switch::after {
  right: 35px;
}
.gNav .navapp {
    margin: 20px auto;
    width: 95%;
}
.gNav .navapp img {
    width: 100%;
}

/* OPEN */
.gNavOpen #siteHeader {
    height: 100%;
    opacity: 1 !important;
}
.gNavOpen .gNav .navArea__inner{
    opacity: 1;
    height: 100%;
}
.gNavOpen .gNav ul {
    opacity: 1;
    transform: translateX(0);
}

/* LANG */
.gNav ul.lang-nav {
	justify-content: flex-end;
	transition-delay: .5s;
	position: relative;
	top: -7px;
}
/* MAIN */
.gNav ul.main-nav {
	transition-delay: .6s;
}
.gNav ul.main-nav li {
	flex: 0 0 100%;
	font-size: 1.8rem;
}
.gNav ul.main-nav li a:hover {
	opacity: 1;
}
.gNav ul.main-nav li a span {
	display: flex;
	align-items: center;
	margin-right: 15px;
}
.gNav ul.main-nav li a span::after {
	content: '';
	display: inline-block;
	width: 18px;
	height: 1em;
	background: url(../img/icon-arrow-w.svg) no-repeat 100% 50% / 9px;
	transition: all .2s ease-in-out;
}
.gNav ul.main-nav li a:hover span::after {
  animation: arrowRight .6s cubic-bezier(1, 0, 0, 1);
}

.gNav ul.main-nav li.products {
	order: -1;
	margin-top: 30px;
	margin-bottom: 10px;
}
.gNav ul.main-nav li.products > a {
    font-size: 1rem;
    font-weight: 600;
    padding: 0 10px;
    margin-bottom: 15px;
}
.gNav ul.main-nav li.products a.spproduct {
    display: none;
}
.gNav ul.main-nav li.products > a span::after {
    display: none;
}

.gNav ul.main-nav li.ec-guide {
	font-size: 1.3rem;
}
.gNav ul.main-nav li.ec-guide::before {
	display: block;
	width: 100%;
	height: 1px;
	flex: 0 0 100%;
	content: '';
	width: calc(100% - 22px);
	margin: 20px auto;
	background: rgba(255,255,255,.3);
}
.gNav ul.main-nav li.contact {
	font-size: 1.3rem;
}


/* EC */
.gNav ul.ec-nav {
	margin: 11px 10px;
	transition-delay: .8s;
	position: absolute;
	top: 0;
	right: 0;

	opacity: 1!important;
    transform: translateX(0)!important;
    transition: all .1s ease-in-out;
}
.gNav ul.ec-nav li {
	font-size: 1.8rem;
}
.gNav ul.ec-nav li a {
  	padding: 10px 12px;
}
.gNav ul.ec-nav li.user .icon {
  width: 16px;
}
.gNav ul.ec-nav li.cart .icon {
  width: 18px;
}
.gNav.on ul.ec-nav {
  opacity: 0!important;
  pointer-events: none;
}

/* SNS */
.nav ul.sns-nav {
	margin-top: 18px;
	padding-bottom: 40px;
	transition-delay: .9s;
}
.nav ul.sns-nav li {
	flex: 0 0 50%;
	font-size: 1.1rem;
}
.nav ul.sns-nav li a span {
	margin-left: 14px;
}

/* FIXED SNS */
.sns-fixed {
	top: 50%;
	right: 17px;
	transform: translateY(-50%);
}
#container > .sns-fixed {
	display: none;
}
/* 横長 */
@media screen and (orientation: landscape) {
	.sns-fixed .ttl,
	.sns-fixed ul.sns-nav::before {
	    display: none;
	}
	.sns-fixed ul.sns-nav {
	    padding-top: 0;
	}
}



/* Btn */
.nav-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 68px;
	height: 68px;
	padding: 25px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	transition: all .4s ease-in-out;
}
.nav-btn i{
	display: block;
	background: currentColor;
	height: 2px;
	position: absolute;
	right: 25px;
	left: 25px;
	transition: transform .3s;
}
.nav-btn i:nth-of-type(1){
	top: 29px;
}
.nav-btn i:nth-of-type(2){
	top: 37px;
}

.nav-btn.on{
	position: fixed;
}
.nav-btn.on i{
	background: #FFF;
}
.nav-btn.on i:nth-of-type(1){
	top: 50%;
	transform: rotate(45deg);
}
.nav-btn.on i:nth-of-type(2){
	top: 50%;
	transform: rotate(135deg);
}

/* ==========================================================================
   Main Bottom
========================================================================== */
.main-bottom__links ul li a .ttl {
  font-size: 3rem;
}
@media only screen and (min-width: 768px) {
	.main-bottom__links ul {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.main-bottom__links ul li {
		-ms-flex-preferred-size: 0;
		flex-basis: 0;
		-ms-flex-positive: 1;
		flex-grow: 1;
		max-width: 100%;
	}
}
/* ==========================================================================
   Footer
========================================================================== */
#siteFooter {
	padding: 50px 0 40px;
}

#siteFooter .footer-logo {
	text-align: center;
}

.fNav ul li a {
	padding: 14px 10px;
}

/* MAIN */
.fNav ul.main-nav {
	flex-wrap: wrap;
}
.fbNav ul.main-nav {
	flex-wrap: wrap;
}
.fbNav ul.main-nav li {
	width: 50%;
}
.fNav ul.main-nav::before,
.fNav ul.main-nav::after {
	content: '';
	display: block;
	margin: 26px auto;
	width: calc(100% - 18px);
	height: 1px;
	border-top: 1px solid #383838;
}
.fNav ul.main-nav::after {
	order: 100;
}
.fNav ul.main-nav li {
	flex: 0 0 50%;
}
@media only screen and (min-width: 768px) {
	.fNav ul.main-nav li {
		flex: 0 0 33.33333%;
	}
}

/* SNS */
.fNav .followus {
  padding: 14px 10px;
}
.fNav ul.sns-nav {
	flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
	.fNav ul.sns-nav li {
		flex: 0 0 25%;
	}
}

.fbNav {
	width: 100%;
	margin-top: 35px;
}
.fbNav .nav {
    display: block;
}
.fbNav .nav ul.lang-nav {
    padding: 0 8px;
    margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
	.fbNav ul.main-nav li {
		flex: 0 0 25%;
	}
}

#siteFooter .copyright {
	margin-top: 28px;
	padding: 0 10px;
}


/* ==========================================================================
   Assets
========================================================================== */
/* ---------------
   Container
--------------- */
body:not(.haveMV) #container {
  margin-top: 0;
}
.section-padding {
  padding-top: 40px;
}
.content {
  margin-top: 50px;
  margin-bottom: 50px;
}
/* ---------------
   Typography
--------------- */
.huge {
  font-size: 6rem; }

h1, .h1 {
  font-size: 4rem; }

h2, .h2 {
  font-size: 3rem; }

h3, .h3 {
  font-size: 1.8rem; }

h4, .h4 {
  font-size: 1.4rem; }

h5, .h5 {
  font-size: 1.2rem; }

h6, .h6 {
  font-size: 1rem; }
/* ---------------
   Headline
--------------- */
@media only screen and (min-width: 768px) {
	.section__header {
	  text-align: center;
	  right: 0;
	  margin: 0 auto;
	}
}
/* ---------------
   Hero
--------------- */
/* 縦長 */
@media screen and (orientation: portrait) {
	.hero .hero_inner {
		-ms-flex-pack: end;
		justify-content: flex-end;
	}
}

/* ---------------
   List
--------------- */
.lists .list a {
  display: block;
  padding: 20px 50px 17px 30px;
}
.lists .list a .entry__meta {
  margin-bottom: 5px;
}
@media only screen and (max-width: 575px) {
	.lists {
		margin-right: -30px;
		margin-left: -30px;
	}
}
/* ---------------
  Card
--------------- */
.cards .card {
  margin-bottom: 50px;
}
/* ---------------
   inview Animation
--------------- */
@media only screen and (min-width: 768px) {
	.cards li.inview.fadeInUp:nth-of-type(2n) {
	  transition-delay: .4s;
	}
}
/* ---------------
   MW WP Form
--------------- */
form dl dt {
	line-height: 1;
	padding-top: 30px;
	padding-bottom: 15px;
}
form dl dd {
	padding-bottom: 30px;
}
form textarea {
  min-height: 250px;
}
#contact .bg-l-gray,
#confirm .bg-l-gray {
	margin-right: -30px;
	margin-left: -30px;
}