@charset 'UTF-8';
/* http://meyerweb.com/eric/tools/css/reset/
	 v2.0 | 20110126
	 License: none (public domain)
*/
html , body , div , span , applet , object , iframe , h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre , a , abbr , acronym , address , big , cite , code , del , dfn , em , img , ins , kbd , q , s , samp , small , strike , strong , sub , sup , tt , var , b , u , i , center , dl , dt , dd , ol , ul , li , fieldset , form , label , legend , table , caption , tbody , tfoot , thead , tr , th , td , article , aside , canvas , details , embed , figure , figcaption , footer , header , hgroup , menu , nav , output , ruby , section , summary , time , mark , audio , video {
  font : inherit;
  font-size : 100%;
  margin : 0;
  padding : 0;
  vertical-align : baseline; 
  border : 0;
}

/* HTML5 display-role reset for older browsers */
article , aside , details , figcaption , figure , footer , header , hgroup , menu , nav , section {
  display : block;
}

body {
  line-height : 1; 
      overflow-x : hidden;
  -ms-overflow-x : hidden;
}

ol , ul {
  list-style : none;
}

blockquote , q {
  quotes : none;
}

blockquote:before , blockquote:after , q:before , q:after {
  content : '';
  content : none;
}

table {
  border-spacing : 0; 
  border-collapse : collapse;
}

/* setting */
html {
  font-size : 62.5%;
  width : 100%;
}

body {
  font-family : YuGothic, 'Yu Gothic', sans-serif;
  font-size : 1.4rem;
  box-sizing : border-box; 
  color : #000;

  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
}
body a {
  transition : .2s ease-in-out; 
  text-decoration : none;
  color : #000;
}
body a:hover {
  text-decoration : none; 
  opacity : .5;
}
body a:visited {
  text-decoration : none;
}

img {
  /*width : 100%;*/
  max-width : 100%;
  height : auto;
}

.sp-visible {
  display : block;
}

img.sp-visible {
  display : inline-block;
}

.pc-visible {
  display : none;
}

@media print, screen and (min-width: 768px) {
  img {
    /*width : auto;*/
    max-width : 100%;
    height : auto;
  }
  .sp-visible {
    display : none;
  }
  img.sp-visible {
    display : none;
  }
  .pc-visible {
    display : block;
  }
  img.pc-visible {
    display : inline-block;
  }
}

.clearfix:before , .clearfix:after {
  display : table; 
  content : '';
}

.clearfix:after {
  clear : both;
}

.header-wrap {
  height : 45px;
}
@media print, screen and (min-width: 768px) {
  .header-wrap {
    height : 72px;
  }
}

.header {
  position : fixed;
  z-index : 101;
  top : 0;
  left : 0;
  box-sizing : border-box;
  width : 100%;
  height : 45px;
  transition : all ease-in-out .5s; 
  border-bottom : transparent 2px solid;
}
.header--product , .header--about {
  background : #f9f9f9;
}
.header--detail svg {
  transition : all ease-in-out .5s; 

  fill : #fff;
}
.header--detail.scrolled {
  background : #f9f9f9;
}
.header--detail.scrolled svg {
  fill : #000;
}
.header--top {
  opacity : 1;
  background : #f9f9f9;
}

.banner {
	position: fixed;
	top: 50px;
	right: 0px;
}
.banner img {
    width: 137px;
}

@media print, screen and (min-width: 768px) {
	.banner {
		position: fixed;
		top: 80px;
		right: 10px;
	}
	.banner img {
	  width: 274px;
	}
}
/*
.header--top.scrolled {
  opacity : 1;
  background : #f9f9f9;
}
*/
.header--top.is-open {
  opacity : 1;
}
@media print, screen and (min-width: 768px) {
  .header {
    height : 70px;
  }
}
.header.is-open {
  border-bottom : #fff solid 2px; 
  background : #e3e1dd;
}

.toggle-trigger {
  position : absolute;
  top : 6px;
  left : 5px;
  width : 34px;
  /*margin-top : -17px;*/
}

.toggle-trigger img {
  height: 34px;
}

@media print, screen and (min-width: 768px) {
  .toggle-trigger {
    left : 10px;
    width : 57px;
    /*margin-top : -26px;*/
    top: 8px;
  }
  
  .toggle-trigger img {
	  height: 57px;
  }
}

.site-logo {
  width : 126px;
  margin : 0 auto;
  padding-top : 12px;
}

@media print, screen and (min-width: 768px) {
  .site-logo {
    width : 223px;
    padding-top : 18px;
  }
  
  .header .site-logo img {
	height: 33px;
  }
}


.header-sns {
	position : absolute;
	top : 30px;
	right : 10px;
	display : block;
	margin-top : -22px;
}
.header-sns ul {
	display : table;
}
.header-sns li {
	display : table-cell;
	width : 30px;
	padding : 0 4px;
}

.header-sns li:nth-child(2) {
	display: none;
}

.header-sns li:nth-child(3) {
	display: none;
}

.header-sns li img {
    width: 100%;
}

.header-sns li.pc-visible {
  display: none;
}


@media print, screen and (min-width: 768px) {
  .header-sns {
    position : absolute;
    top : 50%;
    right : 10px;
    display : block;
    margin-top : -22px;
  }
  .header-sns ul {
    display : table;
  }
  .header-sns li {
    display : table-cell;
    width : 45px;
    padding : 0 4px;
  }
  
  .header-sns li.pc-visible {
	  display: table-cell;
	}
  
  .header-sns li.sp-visible {
    display: none;
  }
  
  .header-sns li img {
	  width: 100%;
  }
  
	.header-sns li:nth-child(2) {
		display: inline-block;
	}
	
	.header-sns li:nth-child(3) {
		display: inline-block;
	}
  
}

.toggle-contents {
  position : absolute;
  top : 100%;
  left : 0;
  display : none;
  box-sizing : border-box;
  width : 100%;
  height : calc(100vh - 45px);
  margin-top : 2px; 
  background : #e3e1dd;
}
.toggle-contents-inner {
  overflow : hidden;
  overflow-y : auto;
  box-sizing : border-box; 
  width : 100%;
  height : 100%;
  margin : 0 auto;
  padding : 30px 25px;
}
@media print, screen and (min-width: 768px) {
  .toggle-contents {
    height : calc(100vh - 72px);
  }
  .toggle-contents-inner {
    width : 960px;
    margin : 0 auto; 
    padding : 80px 20px;
  }
}

.nav-followus {
  text-align : center;
}
.nav-followus-title {
  width : 48px;
  margin : 0 auto 10px;
}
@media print, screen and (min-width: 768px) {
  .nav-followus {
    position: relative;
    bottom: 0;
    left: 0;
    margin-left: 0;
    text-align: center;
    margin-top: 80px;
  }
  .nav-followus-title {
    width : 82px;
    margin : 0 0 20px;
  }
}

.nav-snslist {
  font-size : 0;
}

.nav-snsitem {
  display : inline-block;
  width : 34px; 
  vertical-align : top;
}

.nav-snsitem+.nav-snsitem {
  margin-left: 10px;
}


@media print, screen and (min-width: 768px) {
  .nav-snsitem {
    width : 47px;
  }

  .nav-snsitem+.nav-snsitem {
	  margin-left: 18px;
  }
}

/* toggle-contents レイアウト */
.globalnav {
  position : relative;
  min-height: 350px;
}

.globalnav-block {
  display : table;
  width : 100%;
  margin-bottom : 30px;
}
@media print, screen and (min-width: 768px) {
  .globalnav-block {
    width : auto;
    margin : 0 auto;
  }
}

.nav-list {
  display : table-cell;
  box-sizing : border-box;
  width : 55%;
  vertical-align : top;
}
@media print, screen and (min-width: 768px) {
  .nav-list {
    width : 100%;
  }
}

.nav-category {
  display : table-cell;
  box-sizing : border-box;
  width : 45%;
  padding-left : 20px; 
  vertical-align : top;
}
@media print, screen and (min-width: 768px) {
  .nav-category {
    width : 50%;
    padding-left : 90px;
  }
}

.nav-item {
  display : table;
  width : 100%;
  height : 35px; 
  text-align : center;
}
.nav-item:not(:last-child) {
  margin-bottom : 10px;
}
.nav-item a {
  display : table-cell;
  width : 100%;
  height : 35px;
  vertical-align : middle;
  border-radius : 18px; 
  background : #fff;
}
.nav-item--top img {
  width : 22px;
}
.nav-item--about img {
  width : 37px;
}
.nav-item--product img {
  width : 54px;
}
.nav-item--journal img {
  width : 46px;
}
.nav-item--company img {
  width : 58px;
}
.nav-item--contact img {
  width : 48px;
}
.nav-item--shoplist img {
  width : 29px;
}
.nav-item--howto img {
  width : 45px;
}

@media print, screen and (min-width: 768px) {
  .nav-item {
    width : 184px;
    height : 50px;
  }
  .nav-item:not(:last-child) {
    margin-bottom : 15px;
  }
  .nav-item a {
    height : 50px;
    border-radius : 25px;
  }
  .nav-item--top img {
    width : 36px;
  }
  .nav-item--about img {
    width : 61px;
  }
  .nav-item--product img {
    width : 90px;
  }
  .nav-item--journal img {
    width : 76px;
  }
  .nav-item--company img {
    width : 97px;
  }
  .nav-item--contact img {
    width : 80px;
  }
  .nav-item--shoplist img {
    width : 52px;
  }
  .nav-item--howto img {
    width: 76px;
  }
}

.nav-category-title {
  font-size : .7rem;
  font-weight : bold;
  margin-bottom : 20px; 
  text-align : center;
}
@media print, screen and (min-width: 768px) {
  .nav-category-title {
    font-size : 1.4rem;
    margin-bottom : 28px;
    text-align : left;
  }
}

.nav-category-list {
  text-align : left;
}

.nav-category-item {
  font-size : 1.0rem;
}
.nav-category-item:not(:last-child) {
  margin-bottom : 12px;
}
@media print, screen and (min-width: 768px) {
  .nav-category-item {
    font-size : 1.4rem; 
    line-height : 2.14;
    display : inline-block;
    margin-bottom : 0;
  }
}

.wrapper {
  background : #f4f4f4;
}

.footer {
  padding : 60px 5% 25px;
}
@media print, screen and (min-width: 768px) {
  .footer {
    position : relative;
    padding : 145px 35px 35px;
  }
}

.footer-sns {
  margin-bottom : 92px;
}
.footer-sns ul {
  font-size : 0; 
  text-align : center;
}
.footer-sns li {
  display : inline-block;
  width: 34px;
  margin: 0 10px;
}

.footer-sns li a:hover {
  opacity: 1!important;
}

@media print, screen and (min-width: 768px) {
  .footer-sns {
    margin-bottom : 160px;
  }
  .footer-sns li {
    width: 68px;
    margin: 0 15px;
  }
  .footer-sns li a:hover {
	opacity: 1!important;
  }
  
}

.footer-logo {
  width : 28%;
  margin : 0 auto 20px;
}
@media print, screen and (min-width: 768px) {
  .footer-logo {
    position : absolute;
    right : 35px;
    bottom : 35px;
    width: 179px;
    /*width : 134px;*/
    margin : 0;
  }
}

.copy {
  font-size : .8rem;
  text-align : center;
}
@media print, screen and (min-width: 768px) {
  .copy {
    font-size : 1.1rem; 
    text-align : left;
  }
}

/* follow */
.heading-follow {
  width : 32%;
  margin : 0 auto 20px;
}
@media print, screen and (min-width: 768px) {
  .heading-follow {
    width : 163px;
    margin : 0 auto 35px;
  }
}

.follow-gallery {
  display : -ms-flexbox;
  display : flex;
  padding : 0 30px;

  -ms-flex-wrap : wrap;
      flex-wrap : wrap;
  -ms-flex-pack : justify;
  justify-content : space-between;
}
.follow-gallery li {
  box-sizing : border-box; 
  width : 33.33%;
  padding : 2px;
}
@media print, screen and (min-width: 768px) {
  .follow-gallery {
    font-size : 0; 
    max-width : 862px;
    margin : 0 auto;
  }
  .follow-gallery li {
    width : 16.666666667%;
    padding: 1px;
    box-sizing: border-box;
  }
}