@charset "UTF-8";
/* Reset
=====================================*/
* {
  margin: 0;
  padding: 0;
  font-weight: normal;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

li { list-style: none; }

a { text-decoration: none; }



/* Common Elements
=====================================*/
html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
  font-size: 53.8%;/* 1.4rem = 14px -> 12px*/
}

@media screen and (min-width: 1280px) {
html {
  font-size: 62.5%;/* 1.4rem = 14px*/
}
}

body {
  font-family: "Calibri Light", Helvetica, "メイリオ", Meiryo, sans-serif;
  color: #555;
}
small {font-size: 1.2rem;}

/* 1400px~ */
@media screen and (min-width: 1400px) {
small {font-size: 1.4rem;}
}

/* 1920px~ */
@media screen and (min-width: 1920px) {
small {font-size: 1.6rem;}
}
/* selector
=====================================*/
.bold { font-weight: bold; }

/* 480px~ */
@media screen and (max-width: 480px) {
.xsp-none { display: none !important; }
}

/* 481px~ */
@media screen and (min-width: 481px) {
.xpc-none { display: none !important; }
}

/* ~767px */
@media screen and (max-width: 767px) {
.sp-none { display: none !important; }
}

/* 768px~ */
@media screen and (min-width: 768px) {
.pc-none { display: none !important; }
}


/* header
=====================================*/
header#header {
  position: fixed;
  top: 15px;
  left: 50%;
  margin-left: -20%;
  z-index: 10;
}

header#header .logo { width: 60%; }

header#header .logo img { width: 100%; }

header#header .menu_btn {
  position: fixed;
  top: 25px;
  right: 20px;
  display: inline-block;
  text-align: right;
  cursor: pointer;
}

header#header .menu_btn img { width: 50%; }

header#header .menu.pc-none {
  position: fixed;
  top: 90px;
  right: 6px;
  display: none;
  background-color: rgba(0,0,0,.5);
  padding: 0 10px;
}

header#header .menu.pc-none > li {
  font-size: 1.6rem;
  line-height: 2.3;
}

header#header .menu {
  float: right;
  overflow: hidden;
}

header#header .menu > li {
  font-size: 1.4rem;
  text-align: right;
}

header#header .menu > li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

header#header .menu > li a:hover { text-decoration: underline; }

/* 768px~ */
@media screen and (min-width: 768px) {
header#header {
  top: 30px;
  left: 0;
  margin: 0;
  padding: 0 7%;
  width: 100%;
}

header#header .logo {
  float: left;
  width: 160px;
  margin-top: -15px;
}

header#header .menu {
  float: right;
  margin-top: 15px;
}

header#header .menu > li { float: left; }

header#header .menu > li:first-child { margin-top: 3px; }

header#header .menu > li:not(:nth-child(1)):before {
  content: "　|　";
  color: #fff;
}
}

/* 1400px~ */
@media screen and (min-width: 1400px) {
header#header .menu > li {font-size: 1.9rem;}
}

/* 1920px~ */
@media screen and (min-width: 1920px) {
header#header { top: 60px; }

header#header .logo { width: 295px; }

header#header .menu { margin-top: 30px; }

header#header .menu > li {font-size: 2.1rem;}
}

/* section
=====================================*/
section:not(:first-child) {
  background: url(../img/underbg.jpg) no-repeat center center;
  background-size: cover;
}

section.section .content {
  margin-top: -30px;
  padding: 0 20px;
}

section.section h2 {
  margin: 0 0 20px;
  color: #6ebde6;
  font-weight: bold;
  font-size: 1.7rem;
  line-height: 1.3;
}

section.section .products > h2 { text-align: center; }

section.section .product > h2 { text-align: center; }

section.section h3 {
  margin: 0 0 5px;
  font-weight: bold;
  font-size: 1.4rem;
  text-align: center;
  color: #555;
}

section.section h4 {
  margin: 0 0 5px;
  color: #6ebde6;
  font-size: 1.4rem;
}

section.section p {
  margin: 0 0 25px;
  font-size: 1.4rem;
  color: #555;
}

.textWrap h2 > small,
.product.pc-none h2 > small {
  font-size: 1.4rem;
  font-weight: normal;
}

.product.pc-none h2 > small { font-size: 78%; }

.textWrap .text > small {
  display: block;
  margin: 0 0 20px;
}

section.section .products-photo,
section.section .product-photo { margin: 0 auto; }

.products-photo img,
.product-photo img { width: 100%; }

/* 768px~ */
@media screen and (min-width: 768px) {
section.section .content {
  overflow: hidden;
  display: table;
  padding: 0 7%;
  margin: 0 auto;
  max-width: 1920px;
  width: 100%;
}

section.section h2{
  font-size: 2.2rem;
  line-height: 1.2;
}

section.section .textWrap {
  display: table-cell;
  vertical-align: middle;
}

section.section .products,
section.section .product {
  display: table-cell;
  vertical-align: middle;
}

section.section .products {
  width: 50%;
  height: 100%;
  /*padding-left: 5%;*/
}

section.section .product {
  width: 40%;
  height: 100%;
  /*padding-left: 5%;*/
}
}

/* 1024px~ */
@media screen and (min-width: 1024px) {
section.section p { font-size: 1.6rem; }

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

.textWrap h2 > small { font-size: 1.6rem; }

section.section h3 { font-size: 1.6rem; }
}

/* 1280px~ */
@media screen and (min-width: 1280px) {
section.section h4 { font-size: 1.8rem; }
}

/* 1400px~ */
@media screen and (min-width: 1400px) {
section.section h2 { font-size: 3.8rem; }

.textWrap h2 > small { font-size: 1.9rem; }

section.section h3 { font-size: 1.9rem; }

section.section h4 { font-size: 1.9rem; }

section.section p { font-size: 1.9rem; }
}

/* 1920px~ */
@media screen and (min-width: 1920px) {
section.section .content { padding: 0 120px; }

section.section h2 { font-size: 4.2rem; }

.textWrap h2 > small { font-size: 2.1rem; }

section.section h3 { font-size: 2.1rem; }

section.section h4 { font-size: 2rem; }

section.section p { font-size: 2.1rem; }
}



/* section#sec01
=====================================*/
section#sec01 { overflow: hidden; }

section#sec01 .bg {
  z-index: -9999;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.bg img {
  position: absolute;
  top: 0;
  left: 0;
}

/* 768px~ */
@media screen and (min-width: 768px) {
}



/* section#sec02
=====================================*/
section#sec02 { padding-bottom: 50px; }

section#sec02 .products-photo { width: 90%; }

/* 768px~ */
@media screen and (min-width: 768px) {
section#sec02 { padding-bottom: 0; }

section#sec02 .textWrap { width: 50%; }

section#sec02 .products-photo { width: 90%; }
}



/* section#sec03
=====================================*/
section#sec03 { padding-bottom: 45px; }

section#sec03 .product-photo { width: 55%; }

/* 768px~ */
@media screen and (min-width: 768px) {
section#sec03 { padding-bottom: 0; }

section#sec03 .textWrap { width: 55%; }

section#sec03 .product-photo { width: 70%; }
}



/* section#sec04
=====================================*/
section#sec04 { padding-bottom: 45px; }

section#sec04 .product-photo { width: 55%; }

/* 768px~ */
@media screen and (min-width: 768px) {
section#sec04 { padding-bottom: 0; }

section#sec04 .textWrap { width: 60%; }

section#sec04 .product-photo { width: 70%; }
}



/* section#sec05
=====================================*/
section#sec05 { padding-bottom: 45px; }

section#sec05 .product-photo { width: 55%; }

/* 768px~ */
@media screen and (min-width: 768px) {
section#sec05 { padding-bottom: 0; }

section#sec05 .textWrap { width: 55%; }

section#sec05 .product-photo { width: 70%; }
}



/* section#sec06
=====================================*/
section#sec06 {}

section#sec06 .salon-box { margin-bottom: 20px; }

section#sec06 .salon-box p { margin: 0 0 15px; }

section#sec06 .salon-box p em {
  color: #6ebde6;
  font-size: 1.4rem;
  font-weight: bold;
  font-style: normal;
}

section#sec06 .country-list {
  overflow: hidden;
  display: table;
  width: 100%;
  max-width: 335px;
  margin: 0 auto;
}

section#sec06 .country-list li {
  float: left;
  list-style: none;
  vertical-align: top;
  width: 50%;
}

section#sec06 .country-list li:first-child > a { padding: 23px 0; }

section#sec06 .country-list li > a {
  display: block;
  height: 80px;
  margin: 10px;
  padding: 16px 0;
  border: 1px solid #6ebde6;
  text-align: center;
  color: #6ebde6;
  font-size: 1.6rem;
  font-weight: bold;
}

section#sec06 .country-list li > a:hover {
  border: 1px solid #96cfed;
  color: #96cfed;
}

section#sec06 .country-list li > a:active {
  border: 1px solid #96cfed;
  color: #62c8ff;
}

section#sec06 .country-list li a span {
  display: block;
  font-size: 1.4rem;
  font-weight: normal;
}

/* ~767px */
@media screen and (max-width: 767px) {
section#sec06 .country-list li:nth-child(odd) > a { margin-left: 0; }

section#sec06 .country-list li:nth-child(even) > a { margin-right: 0; }
}

section#sec06 .info-box { margin: 0 0 35px; }

section#sec06 .info-box .co-info {
  overflow: hidden;
  font-size: 1.4rem;
}

section#sec06 .info-box .co-info th {
  width: 100px;
  text-align: left;
  vertical-align: top;
  line-height: 2;
}

section#sec06 .info-box .co-info td {
vertical-align: top;
line-height: 2;
}

section#sec06 .gotop {
  margin-top: 20px;
  text-align: right;
  font-size: 1.6rem;
}

section#sec06 .gotop a { color: #555; }

section#sec06 .gotop a:hover { text-decoration: underline; }

/* 768px~ */
@media screen and (min-width: 768px) {
section#sec06 .salon-box { margin-bottom: 0; }

section#sec06 .salon-box p { margin: 0 0 7px; }

section#sec06 .info-box .co-info th { width: 180px; }

section#sec06 .country-list {
  margin: 0 0 0 -10px;
  max-width: 500px;
}

section#sec06 .country-list li { width: 33.33%; }

section#sec06 .country-list li:nth-child(4) { clear: left; }
}

/* 1154px~ */
@media screen and (min-width: 1154px) {
section#sec06 .salon-box { margin-bottom: 35px; }

section#sec06 .country-list{ max-width: 1520px; }

section#sec06 .country-list li { width: 16.66%; }

section#sec06 .country-list li:nth-child(4) { clear: none; }
}

/* 1280px~ */
@media screen and (min-width: 1280px) {
section#sec06 small { font-size: 1.4rem; }

section#sec06 .info-box .co-info { font-size: 1.8rem; }

section#sec06 .salon-box p { font-size: 1.8rem; }

section#sec06 .salon-box p em { font-size: 1.8rem; }

section#sec06 .country-list li > a {
  height: 90px;
  padding: 16px 0;
  font-size: 1.8rem;
}

section#sec06 .country-list li:first-child > a { padding: 25px 0; }

section#sec06 .country-list li a span {
  font-size: 1.4rem;
}
}

/* 1500px~ */
@media screen and (min-width: 1500px) {
section#sec06 .country-list li > a {
  height: 105px;
  padding: 23px 0;
}

section#sec06 .country-list li:first-child > a { padding: 31px 0; }
}

/* 1920px~ */
@media screen and (min-width: 1920px) {
section#sec06 .info-box .co-info { font-size: 2rem; }

section#sec06 .salon-box p { font-size: 2rem; }

section#sec06 .salon-box p em { font-size: 2rem; }

section#sec06 .country-list li > a {
  height: 116px;
  font-size: 2.1rem;
}

section#sec06 .country-list li a span {
  font-size: 1.7rem;
}
}