@charset "utf-8";
@font-face {
font-family: "Noto Sans JP";
src: url("../font/NotoSansJP-Light.ttf");
}

/* =reset
--------------------------------------------------------- */
html,body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
p,form,fieldset,legend,a,em,address,img {
font-weight: normal;
font-size: 100%;
margin: 0;
padding: 0;
border: none;
text-align: left;
line-height: 1;
list-style-type: none;
font-family: "Noto Sans JP", sans-serif;
}

img {
display:block;
}

/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
img {
max-width: 100%;
height: auto;
width /***/:auto;
}
}

/* 画面サイズ 〜959px*/
@media screen and (min-width: 960px){
.brSp {display:none;}
}
/* 画面サイズ 〜959px*/
@media screen and (max-width: 959px){
.brSp {display:block;}
}

.clearfix:after {
content: "";
display: block;
clear: both;
}

a:link {
color:#000000;
text-decoration: none;
line-height:140%;
}
a:visited {
color:#000000;
text-decoration: none;
}
a:hover {
color:#999999;
text-decoration: none;
}

/* =layout
--------------------------------------------------------- */
/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
body {
font-size: 16px;
margin: 0px;
padding: 0px;
text-align: center;
color: #000000;
background:#ffffff;
}
#indexCont {
margin:0 0 15vw;
}
#indexCont:after {
content: "";
display: block;
clear: both;
}
#mainCont {
}
#mainCont:after {
content: "";
display: block;
clear: both;
}
}

/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
body {
font-size: 16px;
margin: 0px;
padding: 0px;
text-align: center;
color: #000000;
background:#ffffff;
}
#indexCont {
margin:0 0 15vw;
}
#mainCont {
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
}

/* =object
--------------------------------------------------------- */
/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
h1 {
font-size: 24px;
line-height:120%;
margin:0 0 20px;
}
h2 {
font-size: 125%;/* 20px */
margin:0 0 10px;
line-height:120%;
letter-spacing: 1px;
}
h3 {
margin:0 0 30px;
font-size: 88%;/* 14px */
line-height:200%;
}
p {
font-size: 75%;/* 12px */
line-height:200%;
margin:0 0 50px;
}

.textLarge {
font-size: 150%;
}
.attention {
font-size: 84%;
color:#666666;
}

.floatLeft {
float:left;
margin:0 0 20px;
}
.floatRight {
float:right;
margin:0 0 20px;
}

.alignCenter {
text-align:center;
}
.alignRight {
text-align:right;
}
.alignCenter img {
margin:0 auto;
}
.alignRight img {
margin:0 0 0 auto;
}

.mgn0{
margin-bottom:0px !important;
}
.mgn10{
margin-bottom:10px !important;
}
.mgn20{
margin-bottom:20px !important;
}
.mgn30{
margin-bottom:30px !important;
}
.mgn40{
margin-bottom:40px !important;
}
.mgn50{
margin-bottom:50px !important;
}
.mgn60{
margin-bottom:60px !important;
}

/* imghover */
a.imghover img {
transition: .3s;
}
a.imghover img:hover {
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}

/* arrow */
.arrow{
position: relative;
display: inline-block;
padding: 0 0px;
margin:0 0 0 24px;
vertical-align: middle;
text-decoration: none;
background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgb(187, 187, 187) 50%);
background-position: 0 0;
background-size: 200% auto;
transition: all .3s ease 0s;
}
.arrow::before,
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.arrow::before{
left: -24px;
width: 18px;
height: 1px;
background: #000000;
}
.arrow::after{
left: -13px;
width: 6px;
height: 6px;
border-top: 1px solid #000000;
/*border-right: 1px solid #000000;*/
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow:hover {
cursor: pointer;
background-position: -100% 0;
color: #ffffff;
}

/* boxLink */
.boxLink {
width:25vw;
margin:0 auto 20px;
font-size: 100%;/* 16px */
}
.boxLink a {
display:block;
padding:15px 0;
text-align:center;
border:1px solid #999999;
transition: .3s;
}
.boxLink a:hover {
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
}

/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
h1 {
font-size: 24px;
line-height:120%;
margin:0 0 20px;
}
h2 {
font-size: 113%;/* 18px */
margin:0 0 10px;
line-height:120%;
letter-spacing: 1px;
}
h3 {
margin:0 0 30px;
font-size: 88%;/* 14px */
line-height:200%;
}
p {
font-size: 75%;/* 12px */
line-height:200%;
margin:0 0 30px;
}

.textLarge {
font-size: 150%;
}

.attention {
font-size: 75%;
color:#666666;
}

.floatLeft {
float:left;
margin:0 0 20px;
}
.floatRight {
float:right;
margin:0 0 20px;
}

.alignCenter {
text-align:center;
}
.alignRight {
text-align:right;
}
.alignCenter img {
margin:0 auto;
}
.alignRight img {
margin:0 0 0 auto;
}

.mgn0{
margin-bottom:0px !important;
}
.mgn10{
margin-bottom:10px !important;
}
.mgn20{
margin-bottom:20px !important;
}
.mgn30{
margin-bottom:30px !important;
}
.mgn40{
margin-bottom:40px !important;
}
.mgn50{
margin-bottom:50px !important;
}
.mgn60{
margin-bottom:60px !important;
}

/* imghover */
a.imghover img {
transition: .3s;
}
a.imghover img:hover {
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}

/* arrow */
.arrow{
position: relative;
display: inline-block;
padding: 0 0px;
margin:0 0 0 24px;
vertical-align: middle;
text-decoration: none;
background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgb(187, 187, 187) 50%);
background-position: 0 0;
background-size: 200% auto;
transition: all .3s ease 0s;
}
.arrow::before,
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.arrow::before{
left: -24px;
width: 18px;
height: 1px;
background: #000000;
}
.arrow::after{
left: -13px;
width: 6px;
height: 6px;
border-top: 1px solid #000000;
/*border-right: 1px solid #000000;*/
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow:hover {
cursor: pointer;
background-position: -100% 0;
color: #ffffff;
}

/* boxLink */
.boxLink {
width:45vw;
margin:0 auto 20px;
font-size: 100%;/* 16px */
}
.boxLink a {
display:block;
padding:15px 0;
text-align:center;
border:1px solid #999999;
transition: .3s;
}
.boxLink a:hover {
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
}

/* =navigation
--------------------------------------------------------- */
/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#navigationSp {
display:none;
}
#navigation {
display:block;
position:relative;
opacity:0;
}
#navigation nav.globalMenu {
position:absolute;
top:20px;
right:20px;
z-index:200;
}
#navigation nav.globalMenu ul {
}
#navigation nav.globalMenu ul li {
display:inline-block;
margin:0 0 0 30px;
padding:0 0 5px;
font-size:13px;
letter-spacing: 1px;
}
#navigation nav.globalMenu ul li.active {
border-bottom:1px solid #000000;
}
#navigation nav.globalMenu ul li a {
}
#navigation nav.globalMenu ul li a:link {
color:#000000;
text-decoration: none;
}
#navigation nav.globalMenu ul li a:visited {
color:#000000;
text-decoration: none;
}
#navigation nav.globalMenu ul li a:hover {
color:#000000;
text-decoration: none;
}
#navigation nav.globalMenu ul li a {
position:relative;
transition: all .3s ease 0s;
}
#navigation nav.globalMenu ul li a:hover {
color:#999999;
/*top:5px;*/
}
#navigation nav.globalMenu ul li.instagram {
padding:0;
}
#navigation nav.globalMenu ul li.instagram img {
display:inline;
}
}

/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
#navigation {
display:none;
}
#navigationSp {
display:block;
z-index:200;
opacity:0;
}

#navigationSp .instagramSp {
position: absolute;
right: 65px;
top: 12px;
width: 29px;
height: 29px;
}

/* ハンバーガー用 */
#navigationSp .navToggle {
display: block;
/*position: fixed;*/
position: absolute;
right: 5px;
top: 5px;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 200;
text-align: center;
}
#navigationSp .navToggle span {
display: block;
position: absolute;
width: 30px;
border-bottom: solid 3px #000000;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
left: 10px;
}
#navigationSp .navToggle span.text {
opacity: 1;
}
#navigationSp .navToggle span:nth-child(1) {
top: 9px;
}
#navigationSp .navToggle span:nth-child(2) {
top: 18px;
}
#navigationSp .navToggle span:nth-child(3) {
top: 27px;
}
#navigationSp .navToggle span:nth-child(4) {
border: none;
color: #000000;
font-size: 10px;
top: 34px;
}

/* 最初のspanをマイナス45度に */
#navigationSp .navToggle.active span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
#navigationSp .navToggle.active span:nth-child(2),
#navigationSp .navToggle.active span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

#navigationSp .globalMenuBg {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height:100%;
opacity: 0;
background:#ffffff;
transition: all 0.5s;
}
#navigationSp nav.globalMenu {
position: fixed;
width: 70vw;
background:#ffffff;
border:1px solid #cccccc;
z-index: -1;
top: 10vh;
left: 0;
right: 0;
margin:0 auto;
transition: all 0.5s;
opacity: 0;
}
#navigationSp nav.globalMenu ul {
}
#navigationSp nav.globalMenu ul li {
font-size: 88%;/* 14px */
border-bottom: 1px solid #cccccc;
}
#navigationSp nav.globalMenu ul li:last-child {
border:0;
}
#navigationSp nav.globalMenu ul li a {
display: block;
padding: 1em 1em 1em 1em;
letter-spacing: 0.1em;
}
#navigationSp nav.globalMenu ul li a:link {
color:#000000;
text-decoration: none;
}
#navigationSp nav.globalMenu ul li a:visited {
color:#000000;
text-decoration: none;
}
#navigationSp nav.globalMenu ul li a:hover {
color:#000000;
text-decoration: underline;
}
/* このクラスを、jQueryで付与・削除する */
#navigationSp .navToggle span.text.active {
opacity: 0;
}
#navigationSp nav.globalMenu.active {
z-index: 199;
opacity: 1;
}
#navigationSp .globalMenuBg.active {
z-index: 198;
opacity: 0.95;
}
}

/* =logo
--------------------------------------------------------- */
/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#logo {
opacity:0;
padding:3vw;
margin:0 0 3vw;
}
#logo h1 {
width:250px;
margin:0;
padding:0;
}
}

/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
#logo {
opacity:0;
padding:20px 0 20px 20px;
margin:0 0 3vw;
}
#logo h1 {
width:250px;
margin:0;
padding:0;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#logo {
opacity:0;
padding:15px 0 15px 15px;
}
#logo h1 {
width:180px;
margin:0;
padding:0;
}
#logo img {
width:180px;
}
}

/* =indexCont
--------------------------------------------------------- */
/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#indexCont #boxInfo {
float:left;
width:20vw;
margin:0 0 0 3vw;
}
#indexCont #boxInfo dl {
margin:0 0 20px;
}
#indexCont #boxInfo dl dt {
font-size: 63%;/* 10px */
color:#666666;
letter-spacing: 0.1em;
padding:20px 0 0;
}
#indexCont #boxInfo dl dt:first-child {
border-top:1px solid #bbbbbb;
}
#indexCont #boxInfo dl dd {
font-size: 75%;/* 12px */
line-height:160%;
padding:10px 0 20px;
border-bottom:1px solid #bbbbbb;
}

#indexCont #boxInfo #instaBox {
display:block;
}

#indexCont #boxKeyvisual {
float:right;
width:68vw;
}
#indexCont #boxKeyvisual .photo {
width:68vw;
height:60vh;
background:url("../../images/keyvisual_02.jpg") no-repeat 50% 50%;
background-size:cover;
margin:0 0 10px;
}
#indexCont #boxKeyvisual h2,
#indexCont #boxKeyvisual p {
display:inline;
margin:0;
}
#indexCont #boxKeyvisual .text {
font-size: 175%;/* 28px */
letter-spacing: 1px;
}
#indexCont #boxKeyvisual .text span {
font-size: 43%;/* 12px */
letter-spacing: 0;
vertical-align:middle;
color:#666666;
}
#indexCont #boxKeyvisual .link {
margin:0 0 0 15px;
}
#indexCont #boxKeyvisual .link a {
position: relative;
top:-5px;
}
}

/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
#indexCont #boxInfo {
width:80vw;
margin:20px auto 30px;
}
#indexCont #boxInfo dl {
}
#indexCont #boxInfo dl dt {
font-size: 63%;/* 10px */
color:#666666;
letter-spacing: 0.1em;
padding:10px 0 0;
}
#indexCont #boxInfo dl dt:first-child {
border-top:1px solid #bbbbbb;
}
#indexCont #boxInfo dl dd {
font-size: 75%;/* 12px */
line-height:160%;
padding:5px 0 10px;
border-bottom:1px solid #bbbbbb;
}

#indexCont #boxInfo #instaBox {
display:none;
}

#indexCont #boxKeyvisual {
width:80vw;
margin:0 auto 50px;
}
#indexCont #boxKeyvisual .photo {
width:80vw;
height:60vh;
background:url("../../images/keyvisual_02.jpg") no-repeat 50% 50%;
background-size:cover;
margin:0 0 10px;
}
#indexCont #boxKeyvisual h2,
#indexCont #boxKeyvisual p {
display:inline;
margin:0;
}
#indexCont #boxKeyvisual .text {
font-size: 175%;/* 28px */
letter-spacing: 1px;
}
#indexCont #boxKeyvisual .text span {
font-size: 43%;/* 12px */
vertical-align:middle;
color:#666666;
}
#indexCont #boxKeyvisual .link {
margin:0 0 0 15px;
}
#indexCont #boxKeyvisual .link a {
position: relative;
top:-5px;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#indexCont #boxKeyvisual .text {
font-size: 150%;/* 24px */
}
#indexCont #boxKeyvisual .text span {
font-size: 50%;/* 12px */
}
#indexCont #boxKeyvisual h2,
#indexCont #boxKeyvisual p {
display:block;
}
#indexCont #boxKeyvisual .link {
margin:10px 0 0;
}
}

/* =indexFeatures
--------------------------------------------------------- */
/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#indexFeatures {
}
#indexFeatures #boxHeel {
width:70vw;
margin:0 auto 15vw;
}
#indexFeatures #boxHeel img {
width:70vw;
margin:0 0 20px;
}
#indexFeatures #boxMakeToOrder {
width:70vw;
margin:0 auto 15vw;
}
#indexFeatures #boxMakeToOrder:after {
content: "";
display: block;
clear: both;
}
#indexFeatures #boxMakeToOrder .left {
float:left;
width:28vw;
}
#indexFeatures #boxMakeToOrder .right {
float:right;
width:38vw;
}
#indexFeatures #boxMakeToOrder .right p {
margin:0;
}
#indexFeatures #boxMakeToOrder .left img {
width:28vw;
}
#indexFeatures #boxInstagram {
width:70vw;
margin:0 auto 15vw;
text-align:center;
background:#eeeeee;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px; 
border-radius: 6px;
}
#indexFeatures #boxInstagram:after {
content: "";
display: block;
clear: both;
}
#indexFeatures #boxInstagram .left {
float:left;
width:53vw;
margin:2vw 0 2vw 2vw;
}
#indexFeatures #boxInstagram .left p {
margin:0 0 10px;
}
#indexFeatures #boxInstagram .left h3 {
margin:0;
}

#indexFeatures #boxInstagram .right {
float:right;
width:10vw;
margin:2vw 2vw 2vw 0;
}
#indexFeatures #boxInstagram .right img {
width:6vw;
margin:2vw;
}

#indexFeatures #boxInstagram ul {
clear: both;
margin:0 3vw;
padding:0 0 2vw;
}
#indexFeatures #boxInstagram ul:after {
content: "";
display: block;
clear: both;
}
#indexFeatures #boxInstagram ul li {
float:left;
width:15.5vw;
margin:0 0.5vw 0.5vw 0;
}
#indexFeatures #boxInstagram ul li img {
width:15.5vw;
}
}

/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
#indexFeatures {
}
#indexFeatures #boxHeel {
width:80vw;
margin:0 auto 15vw;
}
#indexFeatures #boxHeel img {
width:80vw;
margin:0 0 20px;
}
#indexFeatures #boxMakeToOrder {
width:60vw;
margin:0 auto 15vw;
}
#indexFeatures #boxMakeToOrder:after {
}
#indexFeatures #boxMakeToOrder .left {
}
#indexFeatures #boxMakeToOrder .right {
}
#indexFeatures #boxMakeToOrder .right p {
margin:0;
}
#indexFeatures #boxMakeToOrder .left img {
width:60vw;
margin:0 0 20px;
}
#indexFeatures #boxInstagram {
width:80vw;
margin:0 auto 15vw;
text-align:center;
background:#eeeeee;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px; 
border-radius: 6px;
}
#indexFeatures #boxInstagram:after {
content: "";
display: block;
clear: both;
}
#indexFeatures #boxInstagram .left {
float:left;
width:51vw;
margin:4vw 0 4vw 4vw;
}
#indexFeatures #boxInstagram .left p {
margin:0 0 10px;
}
#indexFeatures #boxInstagram .left h3 {
margin:0;
}
#indexFeatures #boxInstagram .right {
float:right;
width:20vw;
margin:2vw 2vw 2vw 0;
}
#indexFeatures #boxInstagram .right img {
width:12vw;
margin:4vw;
}

#indexFeatures #boxInstagram ul {
clear: both;
width:72vw;
margin:0 auto;
padding:0 0 4vw;
}
#indexFeatures #boxInstagram ul:after {
content: "";
display: block;
clear: both;
}
#indexFeatures #boxInstagram ul li {
float:left;
width:17.5vw;
margin:0 0.5vw 0.5vw 0;
}
#indexFeatures #boxInstagram ul li img {
width:17.5vw;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
#indexFeatures #boxInstagram .left {
float:none;
width:70vw;
margin:0 auto;
padding:5vw 0;
}
#indexFeatures #boxInstagram .left p {
margin:0 0 10px;
}
#indexFeatures #boxInstagram .left h3 {
margin:0;
}
#indexFeatures #boxInstagram .right {
float:none;
width:70vw;
margin:0 auto;
padding:5vw 0 10vw;
}
#indexFeatures #boxInstagram .right img {
width:25vw;
margin:0 auto;
}

#indexFeatures #boxInstagram ul {
clear: both;
width:70vw;
margin:0 auto;
padding:0 0 5vw;
}
#indexFeatures #boxInstagram ul li {
float:left;
width:17vw;
margin:0 0.5vw 0.5vw 0;
}
#indexFeatures #boxInstagram ul li img {
width:17vw;
}
}

/* =Collection
--------------------------------------------------------- */
/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#Collection{
}

#Collection #CollectionList{
width:50vw;
margin:0 auto 50px;
padding:50px 0;
}
#Collection #CollectionList ul{
}
#Collection #CollectionList ul:after {
content: "";
display: block;
clear: both;
}
#Collection #CollectionList ul li{
float:left;
width:24vw;
margin:0 0 2vw 2vw;
}
#Collection #CollectionList ul li:nth-child(2n+1){
clear:both;
margin:0 0 0 0;
}
#Collection #CollectionList ul li img{
width:24vw;
margin:0 0 5px;
}
#Collection #CollectionList ul li h2{
text-align:center;
font-size: 88%;/* 14px */
letter-spacing: 1px;
}

#Collection #mainCont{
width:50vw;
margin:0 auto 50px;
}
#Collection .name {
/*float:left;
width:25vw;*/
font-size: 175%;/* 28px */
letter-spacing: 1px;
display:inline;
margin:0 0 5px;
}
#Collection .name span {
font-size: 43%;/* 12px */
letter-spacing: 1px;
vertical-align:middle;
color:#666666;
}
#Collection .name em {
font-size: 50%;/* 14px */
letter-spacing: 1px;
vertical-align:middle;
font-style:normal;
}
#Collection .color {
/*float:right;
width:25vw;*/
text-align:right;
margin:10px 0 5px;
}
#Collection .color span {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
}
#Collection .color span.white {
background:#ffffff;
border:1px solid #999999;
}
#Collection .color span.lightGray {
background:#c6c2b7;
}
#Collection .color span.taupe {
background:#846b55;
}
#Collection .color span.brown {
background:#a45827;
}
#Collection .color span.red {
background:#ed2c2b;
}
#Collection .color span.skyBlue {
background:#b2d4df;
}
#Collection .color span.emeraldGreen {
background:#59bcbd;
}
#Collection .color span.navy {
background:#202c45;
}
#Collection .color span.black {
background:#000000;
}
#Collection .color span a {
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
overflow:hidden;
text-indent:100%;
white-space: nowrap;
}
#Collection .color span a.active {
pointer-events: none;
cursor: default; 
}
#Collection .colorName {
text-align:right;
margin:0 0 10px;
color:#666666;
}

#Collection .listPhoto{
position:relative;
margin:0 0 50px;
}
#Collection .listPhoto ul {
position:absolute;
top:0;
left:0;
opacity: 0;
z-index:1;
transition: 1s;
}
#Collection .listPhoto ul.active {
position:relative;
z-index:100;
opacity: 1;
}

#Collection .listPhoto ul:after {
content: "";
display: block;
clear: both;
}
#Collection .listPhoto ul li:nth-child(1) {
width:50vw;
margin:0 0 0.2vw;
}
#Collection .listPhoto ul li:nth-child(2) {
width:24.9vw;
float:left;
margin:0 0 0.2vw;
}
#Collection .listPhoto ul li:nth-child(3) {
width:24.9vw;
float:right;
margin:0 0 0.2vw;
}
#Collection .listPhoto ul li:nth-child(4) {
width:24.9vw;
float:left;
margin:0 0 0.2vw;
}
#Collection .listPhoto ul li:nth-child(5) {
width:24.9vw;
float:right;
margin:0 0 0.2vw;
}
#Collection .listPhoto ul li:nth-child(1) img {
width:50vw;
}
#Collection .listPhoto ul li:nth-child(2) img {
width:24.9vw;
}
#Collection .listPhoto ul li:nth-child(3) img {
width:24.9vw;
}
#Collection .listPhoto ul li:nth-child(4) img {
width:24.9vw;
}
#Collection .listPhoto ul li:nth-child(5) img {
width:24.9vw;
}

#Collection .descriptionBox {
float:left;
width:23vw;
margin:0 0 20px;
}
#Collection .descriptionBox p {
margin:0 0 10px;
}
#Collection .adjustmentBox {
float:right;
width:24.9vw;
border:1px solid #cccccc;
margin:0 0 50px;
}
#Collection .adjustmentBox img {
width:20.9vw;
margin:2vw;
}
#Collection .adjustmentBox p {
margin:0 2vw 2vw;
}
#Collection .spec {
margin:0 0 20px;
}
#Collection .spec dl {
}
#Collection .spec dl:after {
content: "";
display: block;
clear: both;
}
#Collection .spec dl dt {
float:left;
width:15%;
font-size: 75%;/* 12px */
line-height:160%;
margin:0 0 10px;
}
#Collection .spec dl dd {
float:right;
width:85%;
font-size: 75%;/* 12px */
line-height:160%;
margin:0 0 10px;
}
#Collection .flowBox {
background:#f3f3f3;
padding:20px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px; 
border-radius: 6px;
}
#Collection .flowBox h3 {
margin:0 0 5px;
}
#Collection .flowBox p {
margin:0 0 20px;
line-height:140%;
}
}

/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
#Collection{
}

#Collection #CollectionList{
width:90vw;
margin:0 auto 50px;
padding:50px 0 0;
}
#Collection #CollectionList ul{
}
#Collection #CollectionList ul:after {
content: "";
display: block;
clear: both;
}
#Collection #CollectionList ul li{
float:left;
width:44vw;
margin:0 0 2vw 2vw;
}
#Collection #CollectionList ul li:nth-child(2n+1){
clear:both;
margin:0 0 0 0;
}
#Collection #CollectionList ul li img{
width:44vw;
margin:0 0 5px;
}
#Collection #CollectionList ul li h2{
text-align:center;
font-size: 88%;/* 14px */
letter-spacing: 1px;
}

#Collection #mainCont{
width:90vw;
margin:30px auto 30px;
}
#Collection .name {
/*float:left;
width:45vw;*/
font-size: 150%;/* 24px */
letter-spacing: 1px;
display:inline;
margin:0 0 5px;
}
#Collection .name span {
font-size: 43%;/* 10px */
vertical-align:middle;
color:#666666;
}
#Collection .name em {
font-size: 50%;/* 12px */
vertical-align:middle;
font-style:normal;
}
#Collection .color {
/*float:right;
width:45vw;*/
text-align:right;
margin:10px 0 5px;
}
#Collection .color span {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
}
#Collection .color span.white {
background:#ffffff;
border:1px solid #999999;
}
#Collection .color span.lightGray {
background:#c6c2b7;
}
#Collection .color span.taupe {
background:#846b55;
}
#Collection .color span.brown {
background:#a45827;
}
#Collection .color span.red {
background:#ed2c2b;
}
#Collection .color span.skyBlue {
background:#b2d4df;
}
#Collection .color span.emeraldGreen {
background:#59bcbd;
}
#Collection .color span.navy {
background:#202c45;
}
#Collection .color span.black {
background:#000000;
}
#Collection .color span a {
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
overflow:hidden;
text-indent:100%;
white-space: nowrap;
}
#Collection .color span a.active {
pointer-events: none;
cursor: default; 
}
#Collection .colorName {
text-align:right;
margin:0 0 10px;
color:#666666;
}

#Collection .listPhoto{
position:relative;
margin:0 0 30px;
}
#Collection .listPhoto ul {
position:absolute;
top:0;
left:0;
opacity: 0;
z-index:1;
transition: 1s;
}
#Collection .listPhoto ul.active {
position:relative;
z-index:100;
opacity: 1;
}

#Collection .listPhoto ul:after {
content: "";
display: block;
clear: both;
}
#Collection .listPhoto ul li:nth-child(1) {
width:90vw;
margin:0 0 0.2vw;
}
#Collection .listPhoto ul li:nth-child(2) {
width:44.9vw;
float:left;
margin:0 0 0.2vw;
}
#Collection .listPhoto ul li:nth-child(3) {
width:44.9vw;
float:right;
margin:0 0 0.2vw;
}
#Collection .listPhoto ul li:nth-child(4) {
width:44.9vw;
float:left;
margin:0 0 0.2vw;
}
#Collection .listPhoto ul li:nth-child(5) {
width:44.9vw;
float:right;
margin:0 0 0.2vw;
}
#Collection .listPhoto ul li:nth-child(1) img {
width:90vw;
}
#Collection .listPhoto ul li:nth-child(2) img {
width:44.9vw;
}
#Collection .listPhoto ul li:nth-child(3) img {
width:44.9vw;
}
#Collection .listPhoto ul li:nth-child(4) img {
width:44.9vw;
}
#Collection .listPhoto ul li:nth-child(5) img {
width:44.9vw;
}

#Collection .descriptionBox {
float:left;
width:43vw;
margin:0 0 20px;
}
#Collection .descriptionBox p {
margin:0 0 10px;
}
#Collection .adjustmentBox {
float:right;
width:44.9vw;
border:1px solid #cccccc;
margin:0 0 30px;
}
#Collection .adjustmentBox img {
width:40.9vw;
margin:2vw;
}
#Collection .spec {
margin:0 0 20px;
}
#Collection .spec dl {
}
#Collection .spec dl:after {
content: "";
display: block;
clear: both;
}
#Collection .spec dl dt {
float:left;
width:20%;
font-size: 75%;/* 12px */
line-height:160%;
margin:0 0 10px;
}
#Collection .spec dl dd {
float:right;
width:80%;
font-size: 75%;/* 12px */
line-height:160%;
margin:0 0 10px;
}
#Collection .flowBox {
background:#f3f3f3;
padding:20px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px; 
border-radius: 6px;
}
#Collection .flowBox h3 {
margin:0 0 5px;
}
#Collection .flowBox p {
margin:0 0 20px;
line-height:140%;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {

#Collection #CollectionList{
width:90vw;
margin:0 auto 30px;
padding:30px 0 0;
}
#Collection #CollectionList ul{
}
#Collection #CollectionList ul:after {
}
#Collection #CollectionList ul li{
float:none;
width:90vw;
margin:0 auto 5vw;
}
#Collection #CollectionList ul li:nth-child(2n+1){
margin:0 auto 5vw;
}
#Collection #CollectionList ul li img{
width:90vw;
margin:0 0 5px;
}
#Collection #CollectionList ul li h2{
}

#Collection .name {
width:90vw;
}
#Collection .color {
width:90vw;
margin:5px 0 5px;
}
#Collection .descriptionBox {
float:none;
width:90vw;
margin:0 0 0;
}
#Collection .adjustmentBox {
float:none;
width:70vw;
margin:0 10vw 30px;
}
#Collection .adjustmentBox img {
width:60vw;
margin:5vw;
}
}

/* =AboutUS
--------------------------------------------------------- */
/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#AboutUS{
}
#AboutUS #boxText {
float:left;
width:32vw;
margin:30px 0 30px 16vw;
}
#AboutUS #boxPhoto {
float:right;
width:30vw;
height:72vh;
background:url("../../about_us/images/ph_01.jpg") no-repeat 50% 50%;
background-size:cover;
margin:30px 10vw 30px 10vw;
}
}

/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
#AboutUS{
}
#AboutUS #boxText {
width:80vw;
margin:30px auto 0;
}
#AboutUS #boxPhoto {
width:80vw;
height:70vh;
background:url("../../about_us/images/ph_01.jpg") no-repeat 50% 50%;
background-size:cover;
margin:0 auto 30px;
}
}

/* =Repair
--------------------------------------------------------- */
/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#Repair{
}
#Repair #mainCont{
width:70vw;
margin:30px auto;
}
#Repair #mainCont #boxLadies{
float:left;
width:35vw;
border-right:1px solid #000000;
}
#Repair #mainCont #boxGentlemen{
float:right;
width:30vw;
}

#Repair #mainCont #boxLadies dl{
padding-right:5vw;
}
#Repair #mainCont #boxLadies dl,
#Repair #mainCont #boxGentlemen dl{
}
#Repair #mainCont #boxLadies dl:after,
#Repair #mainCont #boxGentlemen dl:after{
content: "";
display: block;
clear: both;
}
#Repair #mainCont #boxLadies dl dt,
#Repair #mainCont #boxGentlemen dl dt{
clear: both;
float:left;
width:15vw;
margin:0 0 30px;
}
#Repair #mainCont #boxLadies dl dd,
#Repair #mainCont #boxGentlemen dl dd{
float:left;
width:15vw;
margin:0 0 30px;
font-size: 75%;/* 12px */
line-height:300%;
text-align:right;
}
}

/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
#Repair{
}
#Repair #mainCont{
width:70vw;
margin:50px auto;
}
#Repair #mainCont #boxLadies{
border-bottom:1px solid #000000;
margin:0 0 50px;
padding:0 0 20px;
}
#Repair #mainCont #boxGentlemen{
}

#Repair #mainCont #boxLadies dl,
#Repair #mainCont #boxGentlemen dl{
}
#Repair #mainCont #boxLadies dl:after,
#Repair #mainCont #boxGentlemen dl:after{
content: "";
display: block;
clear: both;
}
#Repair #mainCont #boxLadies dl dt,
#Repair #mainCont #boxGentlemen dl dt{
clear: both;
float:left;
width:35vw;
margin:0 0 20px;
}
#Repair #mainCont #boxLadies dl dd,
#Repair #mainCont #boxGentlemen dl dd{
float:left;
width:35vw;
margin:0 0 20px;
font-size: 100%;
line-height:200%;
text-align:right;
}


}

/* =Shop
--------------------------------------------------------- */
/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#Shop{
}
#Shop #mainCont{
width:60vw;
margin:50px auto;
}
#Shop #boxText {
width:30vw;
float:left;
}
#Shop #boxPhoto {
width:30vw;
float:right;
}
#Shop #boxPhoto img {
width:7vw;
float:left;
margin:0 0 0 0.2vw;
}
#Shop .map{
width:60vw;
margin:0 auto 30px;
}
}

/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
#Shop{
}
#Shop #mainCont{
width:90vw;
margin:50px auto;
}
#Shop #boxText {
}
#Shop #boxPhoto {
margin:0 0 30px;
}
#Shop #boxPhoto img {
width:22vw;
float:left;
margin:0 0 0 0.5vw;
}
#Shop .map{
width:90vw;
}
}

/* =footer
--------------------------------------------------------- */
/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#footer{
padding:15px;
}
#footer p{
font-size: 75%;/* 12px */
text-align:right;
margin:0;
}
#footer p span{
word-break:keep-all;
}
}

/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
#footer{
margin:0 3vw;
}
#footer p{
font-size: 75%;/* 12px */
text-align:right;
padding:0 0 10px;
margin:0;
}
#footer p span{
word-break:keep-all;
}
}

/* 画面サイズ 〜600px*/
@media only screen and (max-width: 600px) {
}