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

/*--------------------------------------------------------------
Reset:
----------------------------------------------------------------
*/

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}

nav ul,
ul,
li{
list-style:none;
}

blockquote, q {
quotes:none;
}

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

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration: none;
color: #000;
}

a:hover{
opacity: 0.5;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000; 
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

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

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;   
border-top:1px solid #808080;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

img{
width: 100%;
line-height: 1;
}



/*--------------------------------------------------------------
common:
----------------------------------------------------------------
*/
* {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}

html{
overflow: auto;
}
body{
position: relative;
font-family: "Zen Kaku Gothic New", sans-serif!important;
letter-spacing: 1px;
font-size: 1em;
line-height: 1.8;
color: #000;
background-color:  #c39e27;
}
.pc{
display: none;
}
#wrapper{
overflow: hidden;
}

/*--------------------------------------------------------------
Header:
----------------------------------------------------------------
*/

header{
position: fixed;
width: 100%;
z-index: 100;
}

#global-menu{
position: relative;
width: 100%;
z-index: 100;
}

.nav-mobile{
z-index: 100;
position: relative;
float: right;
margin: 10px 20px 0 0;
width: 40px;
height: 40px;
background-color: transparent;
border: none;
}
.nav-mobile span{
position: absolute;
display: block;
height: 1px;
width: 40px;
background-color: #e5dfd6;
}
.nav-mobile span:nth-child(1){
top:15px;
}
.nav-mobile span:nth-child(2){
top:20px;
}
header.open .nav-mobile span:nth-child(1){
transform-origin:center center; 
transform: rotate(15deg);
background-color: #000;
}
header.open .nav-mobile span:nth-child(2){
top:15px;
transform: rotate(-15deg);
background-color: #000;
}
#global-menu nav{
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background-color: #ccc;
}
header.open #global-menu nav{
right: 0;
}
#global-menu nav ul{
padding: 10%;
}
#global-menu nav a{
display: block;
font-weight: 400;
font-style: normal; 
color: #000;
text-align: center;
padding: 5% 0;
width: 100%;
}
#global-menu nav a strong{
display: block;
font-family: "Montserrat", sans-serif;
font-size: 1.2em;
letter-spacing: 2px;
font-weight: 400;
}
#global-menu nav a span{
display: block;
font-size: 80%;
letter-spacing: 2px;
}
#global-menu nav li.sns ul{
display: flex;
justify-content:center;
margin: 0;
}
#global-menu nav li.sns li{
width: 40px;
}
#global-menu nav li.sns li:nth-child(1){
margin-right: 10px;
}

/*--------------------------------------------------------------
contents
----------------------------------------------------------------
*/

section{
position: relative;
padding: 15% 10%;
}

h2{
visibility: visible!important;
}
h2 img{
display: block;
width: 70%;
margin: 0 auto;
}
h2 p{
text-align: center;
font-size: 18px;
letter-spacing: 2px;
padding:10px 0 0 2px;
}

.under-h2 img{
display: block;
width: 60px;
margin: 5% auto 7%;
}

#header{
position: relative;
width: 100%;
height: auto;
display: block;
padding: 0;
line-height: 0;
}

#header video{
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -99;
}

#header .main-title{
position: absolute;
width: 60vw;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
}

#header .header-movie.pc .main-title{
width: 30vw;
}

.yellow-base{
background-color: #c39e27;
color: #e5dfd6;
}

.grey-base{
background-color: #e5dfd6;
color: #c39e27;
}

#flexible-unique .text-box span{
visibility: visible;
display: block;
text-align: justify;
line-height: 2;
font-weight: 700;
width: 100%;
margin: 0 auto;
font-size: 13px;
}

#flexible-unique > *{
visibility: visible!important;
}

#lineup{
padding-bottom: 10%;
}

#lineup h2 img{
width: 55%;
}

#lineup .modal {
padding: 0;
max-width: none!important;
background-color: transparent!important;
border-radius: 0!important;
box-shadow: none!important;
text-align: center!important;
}

/* モーダルを開くボタン */

#lineup .modal-list{
display: flex;
flex-wrap: wrap;
column-gap: 10px;
}

.modal__trigger {
position: relative;
display: block;
cursor: pointer;
width: calc(33.33% - 6.666px);
text-align: center;
padding-bottom: 7%;
}

.modal__trigger::after{
content: '';
display: block;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url("../images/icon-zoom.svg");
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
width: 20px;
height: 20px;
}

.modal__trigger > img{
line-height: 0;
}

.modal__trigger span{
font-family: "Montserrat", sans-serif;
font-weight: 700;
display: block;
line-height: 1;
font-size: 95%;
}

.grey-text{
color: #808080;
}
.light-blue-text{
color: #008291;
}
.dark-green-text{
color: #2e553a;
}
.blue-text{
color: #14334f;
}
.orange-text{
color: #ed8424;
}

/* モーダル本体 */
.modal__wrapper {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}

.modal__layer {
height: 100%;
background: rgba(229,223,214,0.9);
cursor: pointer;
}

.modal__container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(calc(100% - 40px), 1000px);
height: calc(100% - 40px);
padding: 20px;
}

.modal__inner {
position:relative;
display: table;
height: 100%;
margin: 0 auto;
width: 80%;
}

/* モーダルを閉じるボタン */
.modal__close {
position: absolute;
top: 25%;
right: 5%;
width: 44px;
height: 44px;
cursor: pointer;
}
.modal__close:hover {
opacity: .6;
}
.modal__close:before,
.modal__close:after {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
background:  #c39e27;
content: '';
}

.modal__close:before {
transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close:after {
transform: translate(-50%, -50%) rotate(-45deg);
}

/* モーダル内のコンテンツ */
.modal__content {
display: table-cell;
vertical-align: middle;
}

.modal__title {
font-family: "Montserrat", sans-serif;
font-weight: 700;
display: block;
line-height: 1;
font-size: 1.2em;
}
#index{
padding-bottom: 10%;
}
#index h2 img{
width: 55%;
}
#index nav{
margin: 0 auto;
width: 100%;
}
#index ul{
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
}

#index li{
width: 50%;
margin-top: 0;
margin-bottom: 3%;
}
#index li a{
display: block;
position: relative;
padding-top: 12%;
width: 100%;
}
#index li img:nth-child(1){
display: block;
width: 100%;
}
#index li img:nth-child(2){
position: absolute;
top:0;
display: block;
width: 64%;
left: 18%;
}

#design,
#how-to-chill,
#style-ideas,
#try{
padding: 15% 0 10%;
width: 100%;
}

#design h2 img{
width: 55%;
}
#design .number{
display: block;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 1.8em;
margin: 0 auto;
text-align: center;
}
#design .text-box{
padding: 5% 10%;
font-size: 13px;
line-height: 1.4;
font-weight: 700;
}
.text-box strong{
display: block;
text-align: center;
font-weight: 700;
font-size: 16px;
}
.text-box strong + hr{
border-top: 1px solid #c39e27;
}

.slider .text-box p{
text-align: justify;
font-size: 13px;
}

.slick-slide {
height: auto;
}

.tab_con{
margin: 0 auto;
max-width: 1000px;
}

.slide-arrow {
position: absolute;
width: 30px;
display: block;
cursor: pointer;
}

.slide-arrow.prev-arrow {
left: 0;
z-index: 10;
}
.slide-arrow.next-arrow {
right: 0;
}

#design .slide-arrow {
top:45%;
}

.dots-wrap {
position: absolute;
bottom: 45%;
top: auto;
right: 0;
left: 0;
margin: auto;
display: flex;
justify-content: center;
}

.dots-wrap li {
width: 10px;
height: 10px;
margin: 0 5px;
background: #fff;
border-radius: 50%;
cursor: pointer;
}

.dots-wrap li:hover,
.dots-wrap li.slick-active {
background: #c39e27;
}
.dots-wrap li button {
display: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
padding: 0;
border: none;
background-color: transparent;
}

.tab_box{
position: relative;
display: grid;
}
.tab_con{
position: relative;
grid-area: 1/1;
width: 100%;
display: block;
height: auto;
overflow: hidden;
background-color: #e5dfd6;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.tab_con.new-class{
z-index: 10;
}
.tab_con p{
margin: 0;
font-weight: 700;
}
.tab_con .text-box br{
display: none;
}
.slick-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none; /* 全て非アクティブに */
}

.slick-wrapper.active {
  z-index: 2;
  pointer-events: auto; /* 表示中のスライダーだけアクティブ */
}

.container01 .btn-list,
.container02 .btn-list,
.container03 .btn-list{
width: 80%;
margin: 0 auto;
column-gap: 10px;
}

input[type="radio"] {
display: none;
}

.btn-list{
display: flex;
column-gap: 10px;
justify-content: center;
}

.tab {
position: relative;
width: calc(100% / 3 - 40px);
text-align: center;
display: block;
text-align: center;
transition: all 0.2s ease;
border: 1px solid #c39e27;
line-height: 0;
}
#tb1,
#tb4{
z-index: 10;
}

.container01 .btn-list{
flex-wrap: wrap;
row-gap: 15px
}
.container01 .tab{
width: calc(100% / 4 - 6.666px);
}
.container01 .tab svg {
width: 40%;
padding: 7% 30%;
fill: #c39e27;
}

.container01 input[type="radio"]:hover + label,
.container01 input[type="radio"]:checked + label{
border: 1px solid #e5dfd6;
background-color: #c39e27;
}
.container01 input[type="radio"]:hover + label svg,
.container01 input[type="radio"]:checked + label svg{
fill: #e5dfd6;
}

input[type="radio"]:checked + label::after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: -7px;
width: 100%;
border-bottom: 1px solid #c39e27;
}

.container02,
.container03{
padding-top: 10%;
padding-bottom: 2%;
user-select: none;
}

.container02 .slick-slide,
.container03 .slick-slide {
  touch-action: pan-y!important; /* pan-yだと縦方向だけを許可（横スワイプ時に効く） */
}
.container02 .tab_con,
.container03 .tab_con{
background-color: #c39e27;
}
.container02 .text-box,
.container03 .text-box{
color: #e5dfd6;
text-align: justify;
font-size: 13px;
line-height: 1.4;
padding: 7% 10% 5%;
}
.container02 .slide-arrow,
.container03 .slide-arrow,
#style-ideas .slide-arrow{
top:45%;
}

.container02 .text-box strong + hr {
    border-top: 1px solid #e5dfd6;
}

.container02 .tab{
border-color: #e5dfd6;
width: calc((80% - 6.666px) / 3);
}
.container02 .tab svg {
width: 90%;
padding: 5%;
fill: #e5dfd6;
}
.container03 .tab{
border-color: #e5dfd6;
}
.container03 .tab svg {
width: 50%;
padding: 7% 25%;
fill: #e5dfd6;
}
.container02 input[type="radio"]:hover + label,
.container03 input[type="radio"]:hover + label,
.container02 input[type="radio"]:checked + label,
.container03 input[type="radio"]:checked + label{
border-color: #c39e27;
background-color: #e5dfd6;
}

.container02 input[type="radio"]:hover + label svg,
.container03 input[type="radio"]:hover + label svg,
.container02 input[type="radio"]:checked + label svg,
.container03 input[type="radio"]:checked + label svg{
fill: #c39e27;
}


.container02 input[type="radio"]:checked + label::after,
.container03 input[type="radio"]:checked + label::after{
border-color: #e5dfd6;
}
.container01 .dots-wrap,
.container02 .dots-wrap,
.container03 .dots-wrap{
bottom: 10%;
}


/*アニメーション*/
.tab {
transition: 0.15s ease-in;
}

#how-to-chill .pc-two-column p {
display: block;
text-align: justify;
line-height: 2;
font-weight: 700;
width: 80%;
margin: 0 auto 5%;
font-size: 13px;
}

#how-to-chill video{
width: 80%;
padding: 0 10%;
}

#how-to-chill h2 img{
width: 80%;
}

#style-ideas h2 img{
width: 75%;
}
#style-ideas .under-h2 + p{
line-height: 1.4;
padding-bottom: 10%;
text-align: justify;
width: 80%;
margin: 0 auto;
}

.style-box{
position: relative;
}

#style-ideas h3{
padding-top: 5%;
}

#style-ideas h3 span{
display: block;
text-align: center;
line-height: 1.4;
}

#style-ideas h3 span.en{
font-size: 18px;
font-family: "Montserrat", sans-serif;
font-weight: 500;
}

#style-ideas h3 span.jp{
font-size: 15px;
font-weight: 700;
}

#style-ideas hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #c39e27;
margin: 5% auto;
padding: 0;
width: 80%;
}
#style-ideas hr + p{
line-height: 1.4;
text-align: justify;
padding-bottom: 10%;
font-size: 13px;
width: 80%;
margin: 0 auto;
font-weight: 700;
}
#style-ideas hr + p br{
display: none;
}
#style-ideas{
padding-bottom: 5%;
}
#style-ideas .dots-wrap {
bottom: 10%;
}
#try h2 img{
width: 70%;
}
#try .under-h2 + p{
font-weight: 700;
font-size: 13px;
text-align: center;
margin-bottom: 5%;
}
#try .flow-box{
position: relative;
}
#try .flow-box .title{
font-weight: 700;
font-size: 13px;
line-height: 1.2;
text-align: center;
padding-top: 3%;
background-color: #e5dfd6;
color: #c39e27;
}
#try .slide-arrow {
top: 45%;
}
.slide14{
background-color: #e5dfd6;
}
#try .text-box{
color: #c39e27;
}
.slide14 .image-box video{
display: block;
width: 64%;
margin: 3% auto 0;
}
.slide14 .text-box{
padding: 3% 18% 10%;
text-align: center;
}
.slide14 .text-box span{
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 13px;
line-height: 1;
}
.slide14 .text-box strong{
display: inline;
font-weight: 700;
font-size: 13px;
line-height: 1;
}
.slide14 .text-box strong + hr{
margin: 3% 0 4%;
}
.slide14 .text-box p{
text-align: center;
line-height: 1.4;
font-weight: 700;
font-size: 11px;
}
.slide14 .text-box p br{
display: none;
}
.slide14 + p{
font-weight: 700;
font-size: 16px;
line-height: 1.2;
text-align: center;
padding-top: 5%;
}

.slide14 .dots-wrap{
bottom: 5%;
}
.slick-slider div { transition: none; }
.dock-wrap{
/*background-color: #e5dfd6;*/
padding-bottom: 7%;
}
.cp_arrows-wrap{
display: block;
position: absolute;
bottom: 3%;
right: 7%;
}

@keyframes floating-y {
  0% 100%{
    transform: translateY(-10%);
  }
  50% {
    transform: translateY(10%);
  }
}
.cp_arrows-wrap p{
position: relative;
color: #c39e27;
writing-mode: vertical-rl;
padding-bottom: 50px;
font-weight: 700;
line-height: 1;
animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
.cp_arrows-wrap p::before{
position: absolute;
content: '';
width: 1px;
height: 30px;
background-color: #c39e27;
top:50px;
left: 35%;
}
.cp_arrows-wrap p::after{
position: absolute;
content: '';
width: 1px;
height: 10px;
background-color: #c39e27;
top: 71px;
left: 49%;
transform: rotate(30deg);
}

.dock-wrap p{
padding: 10% 0 0;
font-family: "Montserrat", sans-serif;
color: #e5dfd6;
font-weight: 700;
font-size: 1.4em;
line-height: 1.2;
text-align: center;
}
.dock-wrap p.title{
padding-top: 5%;
}
.dock-wrap p + span{
font-size: 10px;
display: block;
text-align: center;
font-weight: 700;
padding-bottom: 5%;
}
#dock {
  position: relative;
  padding-top: 40%;
  width: 100%;
  height: auto;
  overflow: hidden;
}

#dock .draggable {
  width: 20vw;
  height: auto;
  position: absolute;
  z-index: 10;
  touch-action: none;
  user-select: none;
  cursor: grab;
  transition: transform 0.1s ease;
}
.palette-wrap{
position: relative;
margin: 0 auto;
display: flex;
z-index: 10;
column-gap: 10px;
justify-content: center; /* 子要素を横方向中央に配置 */
align-items: center; /* 子要素を縦方向中央に配置 */
}
.palette {
display: block;
width: 40px;
height: 20px;
}
.palette:nth-child(1) {
background: #eeb900;
}
.palette:nth-child(2) {
background: #ccc;
}
.palette:nth-child(3) {
background: #008291;
}
.palette:nth-child(4) {
background: #2e553a;
}
.palette:nth-child(5) {
background: #14334f;
}
.palette:nth-child(6) {
background: #ed8424;
}

/* レイアウトのためのスタイル */

.main-img {
width: 100%;
margin-top: 40px;
z-index: 0;
}
.main-img img {
width: 100%;
}

.dock + ul{
width: calc(80% - 20px);
display: flex;
margin: 0 auto;
padding: 5% 0 0;
list-style: none;
grid-gap: 10px;
}
.dock + ul li{
width: 33.33%;
}

.dock + ul li img{
display: block;
width: 50%;
margin: 0 auto 10%;
cursor: pointer;
} 

.dock + ul li span{
display: block;
font-family: "Montserrat", sans-serif;
color: #e5dfd6;
text-align: center;
font-size: 80%;
line-height: 1.2;
font-weight: 500;
}

.reset{
position: relative;
display: block;
background-color: #e5dfd6;
font-family: "Zen Kaku Gothic New", sans-serif !important;
cursor: pointer;
font-size: 13px;
font-weight: 700;
line-height: 1;
color: #c39e27;
border: none;
border-radius: 0;
padding: 3% 0;
margin: 5% auto 0;
width: 63%;
}
.reset span{
letter-spacing: 1px;
}
.reset::after{
content: '';
position: absolute;
width: 7px;
height: 7px;
border-bottom: 2px solid #c39e27;
border-right: 2px solid #c39e27;
transform: rotate(315deg);
top:calc(50% - 3px);
right: 20px;
}
.reset:hover{
opacity: .5;
}
#spec h2 img,
#movie h2 img{
width: 50%;
}
.spec-icon img{
width: 60px;
display: block;
margin: 10% auto;
}
#spec table{
border: 1px solid #c39e27;
width: 100%;
}
#spec th{
padding: 5% 0 5% 5%;
text-align: left;
font-weight: normal;
width: 80px;
overflow-wrap: break-word;
border-bottom: 1px solid #c39e27;
font-size: 13px;
font-weight: 700;
}
#spec td{
padding: 5% 5% 5% 0;
overflow-wrap: break-word;
border-bottom: 1px solid #c39e27;
font-size: 13px;
font-weight: 700;
}

#movie .gallery {
display: flex;
flex-wrap: wrap;
column-gap: 10px;
justify-content: center;
}

#movie li {
position: relative;
width: calc(50% - 5px);
cursor: pointer;
transition: transform 0.2s;
}

#movie li::after{
position: absolute;
display: block;
content: '▶︎';
top:50%;
left: 50%;
transform: translate(-50%,-50%);
color: #c39e27;
opacity: .9;
font-size: 3em;
pointer-events: none;
}

#movie .thumbnail:hover {
transform: scale(1.05);
    }

#movie .modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: rgba(229,223,214,0.9);
}

#movie .modal.active {
  display: block;
}

#movie .modal-content {
  position: relative;
  margin: 5% auto;
  width: 90%;
  height: auto;
  max-width: 800px;
}

#movie .close-btn {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 32px;
  color:#c39e27;
  cursor: pointer;
  z-index: 10;
}

/* 背景スクロールを止める */
body.modal-open {
  overflow: hidden;
}

#cta a{
position: relative;
display: block;
width: 80%;
max-width: 280px;
padding: 5% 10%;
text-align: center;
margin: 0 auto;
color: #c39e27;
border: #c39e27 1px solid; 
background-color: #f2efea;
font-weight: 700;
font-size: 18px;
}

#cta a::after{
content: '';
position: absolute;
width: 7px;
height: 7px;
border-bottom: 2px solid #c39e27;
border-right: 2px solid #c39e27;
transform: rotate(315deg);
top:calc(50% - 3px);
right: 20px;
}

/*--------------------------------------------------------------
footer
----------------------------------------------------------------
*/

footer{
position: relative;
background-color: #c39e27;
color: #e5dfd6;
}
footer > *{
visibility: visible!important;
}
#lh-navigation{
margin-bottom: 10%;
}
#lh-navigation ul{
display: flex;
justify-content:center;
}
#lh-navigation li{
margin-right: 20px;
}
#lh-navigation li:last-child{
margin-right: 0;
}
#lh-navigation li a{
display: block;
width: 40px;
}
#lh-navigation li a img{
line-height: 0;
display: block;
}
footer h1{
position: relative;
width: 40%;
max-width: 240px;
margin: 0 auto 10%;
padding: 15% 0 0;
}
footer h1 img{
display: block;
width: 100%;
}
#lh-navigation + p{
display: block;
font-size: 10px;
padding: 10%;
}
#lh-navigation + strong{
display: block;
font-size: 10px;
padding-left: 15%;
}
footer table{
width: 70%;
margin: 0 auto 10%;
}
footer th{
font-size: 10px;
font-weight: 400;
text-align: left;
width: 3em;
}
footer td{
font-size: 10px;
}

.copyright{
text-align: center;
font-size: 10px;
letter-spacing: 1px;
padding: 3% 0 5%;
line-height: 1.6;
}
.to-online-store{
position: fixed;
right: -120px;
bottom: 70px;
width: 100px;
z-index: 10;
}
.to-online-store.is-show{
right: -30px;
}
.page-top {
position: fixed;
bottom: -60px;
right: 10px;
width: 50px;
z-index: 10;
}
.page-top.is-show{
bottom: 10px;
}


@media screen and (min-width:480px) {
.modal__title {
font-size: 1.4em;
padding-top: 5%;
}
.modal__trigger span {
font-size: 100%;
}
#index li a span br{
display: none;
}
.reset {
font-size: 16px;
}
.dock-wrap p {
font-size: 16px;
}
.spec table {
margin: 10% auto;
font-size: 15px;
width: auto;
}
.spec th{
padding-right: 10px;
}

.spec h3 + p + img + P {
width: 70%;
}

.copyright{
padding:5% 0;
}
.copyright br{
display: none;
}
}

@media screen and (min-width:768px) {
.nav-mobile{
display: none;
}
header{
background: rgba(255,255,255,.4);
margin-top: 0;
}
header.come{
margin-top: -140px;
}
#global-menu nav{
position: relative;
left: 0;
width: 100%;
height: auto;
background-color: transparent;
}
#global-menu nav ul{
display: flex;
padding: 12px 30px;
}
#global-menu nav li{
width: 33.33%;
}
#global-menu nav li.sns{
display: none;
}
#global-menu nav a{
padding: 20px 0;
width: 100%;
}

.pc{
display: block;
}
.sp{
display: none;
}

#header .header-movie.pc .main-title {
width: 35vw;
}
section {
padding: 10% 8%;
}
#flexible-unique h2 img.sp{
display: block;
width: 50%;
}
#flexible-unique h2 img.pc{
display: none;
}
#flexible-unique .text-box span{
font-size: 16px;
line-height: 2;
}
#flexible-unique{
padding: 10%;
}
h2 p {
font-size: 24px;
}
.under-h2 img {
width: 100px;
}
#lineup {
 padding-bottom: 5%;
}
#lineup h2 img {
width: 40%;
}
.modal__trigger span {
font-size: 18px;
padding-top: 3%;
}
.modal__trigger span {
font-size: 18px;
}
.modal__title {
font-size: 20px;
}
#index h2 img {
width: 40%;
}
#index li {
width: 25%;
margin-top: 2%;
margin-bottom: 0;
}
#design{
padding-top: 10%;
padding-bottom: 7%;
}
#design h2 img {
width: 36%;
}
#design .text-box{
padding: 5% 0 3%;
}
.text-box strong + hr {
width: 30%;
margin: 1em auto;
}
.tab_con p {
text-align: center;
}
.tab_con .text-box br{
display: block;
}
#design .dots-wrap {
bottom:7%; 
}
.container01 .btn-list {
flex-wrap: wrap;
column-gap: 10px;
width: 72%;
}
.container01 .tab{
width: calc(100% / 6 - 30px);
}
.container01 .tab svg {
    width: 60%;
    padding: 5% 20%;
}
.slider .text-box strong {
font-size: 1.6em;
padding-bottom: 3%;
}
.slider .text-box p{
font-size: 16px;
line-height: 1.6;
padding: 3% 0 0;
}
.btn-list {
column-gap: 30px;
width: 55%;
margin: 0 auto;
}
#design .number {
font-size: 36px;
}
#how-to-chill{
padding: 10% 0 5%;
}
#how-to-chill h2 img{
width: 64%;
}

.pc-two-column{
display: flex;
align-items: center;
justify-content: center;
padding: 0 5%;
}
#how-to-chill video{
width: 50%;
padding: 0;
}
.pc-two-column p{
padding: 0 5% 0 0;
}
#how-to-chill .pc-two-column p {
line-height: 2;
font-size: 16px;
}
.container02, .container03 {
padding-bottom: 3%;
}
.container02 .text-box,
.container03 .text-box {
line-height: 1.6;
padding: 5% 0% 3%;
}
.text-box strong{
font-size: 20px;
}
.container02 .btn-list{
width: 50%;
}
.container02 .tab img{
width: 80%;
padding: 2% 10%;
}
.container03 {
padding-top: 5%;
}
.container03 .btn-list{
width: 50%;
}
.container03 .tab img {
width: 50%;
}
#style-ideas{
padding-top: 10%;
padding-bottom: 3%;
}
#style-ideas h2 img{
width: 64%;
}
#style-ideas h3 {
padding-top: 2%;
}
#style-ideas .under-h2 + p {
line-height: 1.6;
font-size: 18px;
}
#style-ideas h3 span.jp {
font-size: 18px;
}
#style-ideas h3 span.en {
font-size: 36px;
}
#style-ideas hr {
width: 30%;
margin: 1em auto;
}
#style-ideas .text-box{
padding: 3% 0 5%;
}
#style-ideas hr + p {
line-height: 1.6;
padding: 0;
text-align: center;
}
#style-ideas hr + p br{
display: block;
}
#style-ideas .dots-wrap {
bottom: 7%;
}
#try{
padding-top: 10%;
}
#try h2 img {
width: 70%;
}
#try .under-h2 + p {
font-size: 18px;
line-height: 1.8;
}
#try .flow-box .title{
font-size: 18px;
padding-top: 3%;
}

.slide14 .image-box img {
width: 50%;
margin: 3% auto 0;
}
#try .slider .text-box strong {
font-size: 16px;
padding-bottom: 0;
line-height: 1;
}
.slide14 .text-box strong + hr {
width: 100%;
}
.slide14 .text-box {
padding: 2% 25% 7%;
}
.slide14 .text-box p {
font-size: 13px;
line-height: 1.6;
padding: 0;
}
.slide14 .text-box p br{
display: block;
}
.slide14 + p {
padding-top: 3%;
}
.dock-wrap{
padding-bottom: 0;
}
.dock-wrap p {
font-size: 28px;
padding: 7% 0 1%;
}
.dock-wrap p + span {
font-size: 13px;
}
.dock + ul {
width: 50%;
grid-gap: 30px;
}
.palette {
width: 80px;
 height: 40px;
}
.dock-wrap p.title {
padding-top: 3%;
padding-bottom: 1%;
}
.reset {
font-size: 18px;
padding: 2% 0;
width: 43%;
}

#spec h2 img{
width: 32%;
}
.spec-icon img {
width: 100px;
}
#spec table{
width: 480px;
margin: 0 auto;
}
#spec th{
width: 100px;
font-size: 16px;
}
#spec td{
font-size: 16px;
}
#movie h2 img{
width: 40%;
}
#movie .gallery {
column-gap: 20px;
}
#movie li {
width: calc(50% - 10px);
}
#cta a {
font-size: 24px;
max-width: none;
width: 480px; 
padding: 2% 0;
}
#cta a::after {
right: 20px;
}

#lh-navigation + strong {
text-align: center;
width: 70%;
margin: 0 auto;
font-size: 12px;
padding: 0 0 2% 0;
}
footer th {
font-size: 12px;
}
footer td {
font-size: 12px;
}
.copyright {
font-size: 12px;
}
}

@media screen and (min-width:1080px) {

#global-menu {
width: 1000px;
margin: 0 auto;
}
#global-menu nav ul{
padding: 20px 0;
}
.under-h2 img {
margin: 50px auto;
}
section{
padding: 120px 0;
margin: 0;
}
.w1000{
margin: 0 auto;
width: 1000px;
}
#flexible-unique {
padding: 8%;
}
#flexible-unique h2 img.sp {
display: none;
}
#flexible-unique h2 img.pc {
display: block;
width: 680px;
}
#flexible-unique .text-box span {
font-size: 18px;
line-height: 2.2;
width: 720px;
}
#lineup h2 img {
width: 300px;
}
.modal__close {
top: 5%;
}
.container01{
position: relative;
width: 1000px;
margin: 0 auto;
}
.container01 .tab_con{
display: flex;
align-items: center;
justify-content: center;
}

.tab_con .text-box hr{
margin: 5% auto;
width: 100%;
}
.tab_con .text-box p{
text-align: justify;
font-size: 15px;
line-height: 1.8;
}
.tab_con .text-box p br{
display: none;
}
.container01 .slider{
width: 60%;
}
#design .text-box{
width: calc(40% - 40px);
padding: 0 0 0 40px;
margin-top: -100px;
}
.container01 .btn-list{
position: absolute;
bottom: 10px;
right: 60px;
width: 240px;
z-index: 10;
}
.container01 .tab {
width: calc((100% - 26px)/3);
}
.container01 .tab svg {
width: 50%;
padding: 5% 0;
margin: 0 auto;
}

#index h2 img {
width: 280px;
}
#design{
padding: 10% 0;
}
#design h2 img {
width: 300px;
}
#design .dots-wrap {
bottom:8%;
}
#how-to-chill h2 img{
width: 640px;
}
.pc-two-column{
width: 1000px;
margin: 0 auto;
}
.container02{
position: relative;
width: 1000px;
margin: 0 auto;
}
.container02 .tab_con{
display: flex;
align-items: center;
justify-content: center;
}
.container02 .tab_con .slider{
width: 60%;
}
.container02 .tab_con .text-box{
width: calc(40% - 40px);
padding: 0 0 0 40px;
margin-top: -55px;
}
.container02 .tab_con .text-box strong {
font-size: 24px;
}
.container02 .btn-list{
position: absolute;
bottom: 55px;
right: 0;
width: 360px;
z-index: 10;
}
.container02 .dots-wrap{
bottom: 8%;
}
.container03{
position: relative;
width: 1000px;
margin: 0 auto;
}
.container03 .tab_con{
display: flex;
align-items: center;
justify-content: center;
flex-direction: row-reverse;
}
.container03 .tab_con .slider{
width: 60%;
}
.container03 .tab_con .text-box{
width: calc(40% - 40px);
padding: 0 40px 0 0;
margin-top: -40px;
}

.container03 .btn-list{
position: absolute;
bottom: 10px;
left: 0;
width: 360px;
z-index: 10;
}
.container03 .dots-wrap{
bottom: 8%;
}

#style-ideas h2 img {
width: 500px;
}
.style-box{
display: flex;
align-items: center;
justify-content: center;
width: 1000px;
margin: 0 auto;
padding-bottom: 5%;
}
.style-box .slider{
width: 60%;
}
#style-ideas .text-box{
width: calc(40% - 40px);
padding: 0 0 0 40px;
}
#style-ideas h3 span.jp {
font-size: 20px;
}
#style-ideas hr{
width: 100%;
margin: 5% auto;
}
#style-ideas hr + p{
font-size: 16px;
line-height: 1.6;
text-align: justify;
width: 100%;
}
#style-ideas hr + p br{
display: none;
}
#style-ideas .under-h2 + .style-box + .style-box{
flex-direction: row-reverse;
}
#style-ideas .under-h2 + .style-box + .style-box .text-box{
padding-left: 0;
padding-right: 40px;
}
#try h2 img {
 width: 640px;
}
#try .under-h2 + p{
width: 1000px;
margin: 0 auto 3%;
}
#try .flow-box .title{
width: 1000px;
margin: 0 auto;
}
.slide14{
width: 1000px;
margin: 0 auto;
}
.cp_arrows-wrap{
right: calc(50vw - 480px);
}
.dock-wrap p {
font-size: 42px;
padding: 5% 0 1%;
}
.dock-wrap p + span{
font-size: 16px;
}
#dock{
width: 1000px;
margin: 0 auto;
padding-top: 400px;
}
#dock .draggable {
width: 200px;
}
.dock + ul{
width: 500px;
padding-top: 40px;
}
.reset{
padding: 2% 0%;
width: 430px;
margin-top: 40px;
}
#spec h2 img {
width: 240px;
}
.spec-icon img {
margin: 5% auto;
}
#movie h2 img {
width: 260px;
}
#movie .gallery {
column-gap: 80px;
}
#movie li {
width: calc(50% - 40px);
}
#movie .modal-content {
margin: 0 auto;
height: 100vh;
width: auto;
}
#movie video{
height: 100vh;
width: auto;
}
footer h1 {
padding: 5% 0 0;
margin-bottom: 5%;
}
#lh-navigation {
margin-bottom: 5%;
}
footer table {
width: 600px;
margin: 0 auto 5%;
}
#lh-navigation + strong {
width: 600px;
margin: 0 auto;
}
.copyright {
padding: 40px 0;
}
.to-online-store.is-show {
    right: -10px;
}
.to-online-store {
    right: -140px;
    bottom: 80px;
    width: 120px;

}
}