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


/*============================
reset
============================*/
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video, input, select {
	font-size:100%;
	font-weight:inherit;
	font-style:inherit;
	vertical-align:baseline;
	white-space:normal;
	text-align:left;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	background:transparent;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
:focus {outline:0 !important;}
table {border-collapse:collapse; border-spacing:0;}
img {vertical-align:top;}
input, textarea, select, button {-webkit-appearance:none; -moz-appearance:none; appearance:none;}



/*============================
common
============================*/
body,html{
	font-family: cholla-sans, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif !important;
	font-size: 15px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

a:hover {
	opacity: 0.7;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}
#logo a:hover {opacity: 1;}

.jap {
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif !important;
	font-size: 80%;
}


#content{width: 100%; padding: 0; margin:0;}
div.entry-content{margin: 0!important; padding: 0!important; width: 100%!important; max-width: 100%!important;}
div.woocommerce{margin: 0px!important; width: 100%!important; max-width: 100%!important;}
.entry .entry-title:before{content: ""; margin: 0; width: 0;}
h1:not(.site-title):before, h2:before{content: ""; margin: 0;  width: 0;}



/*============================
header
============================*/
div#ms_header{
	width: 94%;
	height: 100px;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
}

/* --- logo ---  */
div#logo {
	position: absolute;
	left: calc( 50% - 98px );
	top: 36px;
	width: 195px; 
	margin: 0 auto;
}
div#logo img {
	width: 195px;
}

/* --- headerLeft ---  */
div#ms_header_left {
	position: absolute;
	left: 0;
	top: 35px;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* --- headerRight ---  */
div#ms_header_right {
	position: absolute;
	right: 0;
	top: 34px;
	display: flex;
	width: 340px;
	justify-content: space-between;
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 700;
}
div#ms_header_right a {
	color: #000;
	font-size: 13px;
	padding-top: 4px;
}
div#ms_header_right a:last-child {
	padding: 0;
}


/*============================
footer
============================*/
.site-footer {
	background: #000;
	width: 100%;
	height: 120px;
	box-sizing: border-box;
}
#footer_contents {
	width: 94%;
	margin: 0 auto;
	position: relative;
}
.entry-footer {
	display: none;
}

/* --- footerRight ---  */
#ms_footer_left {
	position: absolute;
	top: 28px;
	left: 0;
	display: flex;
	justify-content: space-between;
	width:250px;
}
#ms_footer_left ul {
	display: flex;
	justify-content: space-between;
	width:140px;
}
#ms_footer_left li {
	list-style: none;
	letter-spacing:0.1em;
	font-size: 12px;
	margin-top: 22px;
}
#ms_footer_left a {
	color: #FFF;
	font-weight: 400;
}

/* --- footerRight ---  */
#ms_footer_right {
	position: absolute;
	top: 52px;
	right: 0;
}
#ms_footer_right p {
	color: #FFF;
	text-align:right;
	font-weight: 400;
	font-size: 10px;
	letter-spacing:0.1em;
}




/*============================
TopPage
============================*/
div#ms_top_visual{
	width: 100%;
	height: -webkit-calc(100% - 100px);
   	height: calc(100% - 100px);
	background: url(../img/ms_top_visual.jpg) no-repeat center center;
	background-size: cover;
	background-color: #CCC;
}




/*============================
LOOK Page
============================*/
/*@media screen and (min-width:1201px){
.taxonomy-look_page .site-main {
	width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 300px 300px 300px 300px;
}
}*/
.taxonomy-look_page .site-main {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.taxonomy-look_page .site-main article img {
	width: 100%;
}




/*============================
LOOK DETAIL PAGE
============================*/
.single-lookphoto_page #main {
	display: grid;
	grid-template-columns: 50% 50%;
}
@media screen and (min-width:1201px){
.single-lookphoto_page #main {
	width: 1200px;
	margin: 0 auto;
}
}

/* --- detailLeft ---  */
.single-lookphoto_page #lookdetail_left img {
	width: 100%;
}

/* --- detailRight ---  */
.single-lookphoto_page #lookdetail_right {
	border-top: 1px solid #DEDEDE;
	border-right: 1px solid #DEDEDE;
	display: grid;
	grid-template-rows: 1fr 6% 67%;
}
/* right1 */
.single-lookphoto_page #lookdetail_right1 {
	position: relative;
}
.single-lookphoto_page #lookdetail_title {
	position: absolute;
	top: calc( 50% - 8px );
	left: 5%;
	width:90%;
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 700;
	text-align: center;
	font-size: 16px;
}
.single-lookphoto_page #lookpre {
	position: absolute;
	z-index: 10;
	top: calc( 50% - 8px );
	left: 20px;
}
.single-lookphoto_page #lookpre a {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../img/ms_arrow_l.svg) no-repeat center center;
	width: 16px;
	height: 25px;
}
.single-lookphoto_page #looknext {
	position: absolute;
	z-index: 10;
	top: calc( 50% - 8px );
	right: 20px;
}
.single-lookphoto_page #looknext a {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../img/ms_arrow_r.svg) no-repeat center center;
	width: 16px;
	height: 25px;
}
/* right2 */
.single-lookphoto_page #lookdetail_right2 {
	border-top: 1px solid #DEDEDE;
	border-bottom: 1px solid #DEDEDE;
	font-size: 10px;
	position: relative;
}
.single-lookphoto_page #lookdetail_right2 span {
	position: absolute;
	width: 100%;
	text-align: center;
	top: calc( 50% - 8px );
}
/* right3 */
.single-lookphoto_page #lookdetail_right3,
.single-lookphoto_page #lookdetail_right3 .crp_related {
	margin: 0;
	height: 100%;
}
.single-lookphoto_page #lookdetail_right3 ul {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.single-lookphoto_page #lookdetail_right3 ul li {
	border: 0;
	border-right: 1px solid #DEDEDE;
	border-bottom: 1px solid #DEDEDE;
	border-radius: 0;
	box-shadow: none;
	margin: 0 !important;
	padding: 0 !important;
	height: 100%;
	width: 100%;
	line-height: 1.3;
	position: relative;
}
.single-lookphoto_page #lookdetail_right3 ul li:nth-child(3n) {
	border-right: 0;
}
.single-lookphoto_page #lookdetail_right3 ul li:nth-child(4),
.single-lookphoto_page #lookdetail_right3 ul li:nth-child(5),
.single-lookphoto_page #lookdetail_right3 ul li:nth-child(6) {
	border-bottom: 0;
}
.single-lookphoto_page #lookdetail_right3 ul a {
	display: block;
	width: 100%;
	height: 100%;
}
.single-lookphoto_page #lookdetail_right3 ul li:hover {
	background: none !important;
}
.single-lookphoto_page #lookdetail_right3 ul li img {
	width: 100% !important;
	max-width: 100% !important;
	margin-top:24%;
}
.single-lookphoto_page #lookdetail_right3 ul li .crp_title {
	text-align: center;
	font-size: 10px;
	color: #999 !important;
	line-height: 1.3;
	padding: 0;
	text-shadow: none;
	width: 100%;
	background:none;
	position: absolute;
	bottom: 6%;
}




/*============================
PRODUCTS Page
============================*/

/* ---「全XX件を表示」---  */
#post-6 p.woocommerce-result-count {
	text-align: center;
	font-size: 11px;
	color: #999;
	margin-left: 3%;
	margin-bottom: 8px;
	padding-top: 4px;
}

/* --- 表示順 ---  */
#post-6 form.woocommerce-ordering {
	margin-right: 3%;
	margin-bottom: 8px;
}
#post-6 form.woocommerce-ordering select {
	border: 1px solid #DEDEDE;
	font-size: 10px;
	color: #999;
	width: 140px;
	padding: 3px 10px;
	margin: 0;
	line-height: 1.3;
}

/* --- PRODUCTS ---  */
#post-6 .woocommerce ul.products {
	border-left: 1px solid #DEDEDE;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
#post-6 .woocommerce ul.products::before,
#post-6 .woocommerce ul.products::after {
   content: none;
}
#post-6 .woocommerce ul.products li {
	border-right: 1px solid #DEDEDE;
	border-top: 1px solid #DEDEDE;
	width: 100%;
	float: none;
	margin: 0;
	box-sizing: border-box;
	position: relative;
	padding: 40px 0 20px 0;
}
#post-6 .woocommerce ul.products li:hover {
	opacity: 0.7;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}
#post-6 .woocommerce ul.products li .video {
	position: absolute;
	top: 20px;
	right: 20px;
	background: url(../img/ms_icon_video.svg) no-repeat center center;
	width: 24px;
	height: 12px;
	z-index: 10;
	pointer-events: none;
}
#post-6 .woocommerce ul.products li a {
	z-index: 1;
}
#post-6 .woocommerce ul.products li img {
	width: 100%;
	margin:20px 0 20px 0;
}
#post-6 .woocommerce ul.products li h2 {
	text-align: center;
	font-size: 10px;
	color: #999;
	line-height: 1.3;
	margin: 0;
}



/*============================
PRODUCTS DETAIL Page
============================*/
.productmaster {
	border-top: 1px solid #DEDEDE;
	border-left: 1px solid #DEDEDE;
	margin: 0;
	display: grid;
	grid-template-columns: 50% 50%;
}
@media screen and (min-width:1201px){
.productmaster {
	width: 1200px;
	margin: 0 auto;
}
}

/* --- left ---  */
.productmaster #pm_left {
	border-right: 1px solid #DEDEDE;
}
.productmaster #pm_left img {
	width: 100%;
	margin: 80px 0 120px 0;
	/*cursor: zoom-in;*/
}
.productmaster #pm_left .woocommerce-product-gallery__trigger {
	display: none;
}
#product_img {
	position: relative;
	height: 100%;
}
/* left [VIEW 360] */
.toggle-wrap  {
	text-align: center;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	pointer-events: none;
	z-index:11;
}
.toggle-button {
	display: block;
	cursor: pointer;
	width: 160px;
	margin:0 auto;
}
.toggle-wrap .toggle-button:after {
	content: url(../img/ms_icon_video.svg) "　VIEW 360°";
	border: 1px solid #ddd;
	padding: 1px 30px;
	position: absolute;
	bottom: 40px;
	z-index:99;
	pointer-events: auto;
}
.toggle-wrap .toggle-content {
	background: #FFF;
	height: 100% !important;
	padding: 0;
	opacity: 0;
	transition: 0.8s;
	pointer-events: none;
}
.toggle-wrap .toggle-content canvas {
	height: 100% !important;
}
.toggle-wrap > input[type="checkbox"] {
	display: none;
}
.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-button:after {
	content: url(../img/close.png);
	width: 20px;
	position: absolute;
	top: 50px;
	right: 50px;
	border: 0;
	z-index:99;
}
.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-content {
	display: block;
	height: auto;
	opacity: 1;
	pointer-events: auto;
}
/* left [thumnail] */
ol.flex-control-nav {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	bottom: 20px;
	padding: 0 20px;
	z-index:11;
}
ol.flex-control-nav li {
	width: 50px;
	height: 50px;
	margin-left: 5px;
	margin-bottom: 5px;
}
.productmaster #pm_left ol.flex-control-nav li img {
	cursor: pointer;
}
ol.flex-control-nav li:hover {
	opacity: 0.7;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}
.productmaster #pm_left ol.flex-control-nav li img {
	margin: 0;
}
/* left [imgZOOM] */
#pm_zoom_link {
	cursor: zoom-in;
	z-index:10;
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	top: 0;
}
#pm_zoom #pm_zoom_close {
	cursor: pointer;
	z-index:99;
	position: absolute;
	background: url(../img/close.png) no-repeat center center;
	width: 40px;
	height: 40px;
	top: 80px;
	right: 80px;
}
#pm_zoom {
	width: 100%;
	height: 100%;
	padding-top: 4%;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	background: #FFF;
	z-index: 100;
}
.productmaster #pm_left #pm_zoom figure {
	pointer-events: none;
}
/*.productmaster #pm_left #pm_zoom figure,
.productmaster #pm_left #pm_zoom figure div,
.productmaster #pm_left #pm_zoom figure div a,
.productmaster #pm_left #pm_zoom figure div a img {
	width: 100% !important;
	height: 80vh !important;
	overflow: auto !important;
}*/
.productmaster #pm_left #pm_zoom figure .woocommerce-product-gallery__image flex-active-slide {
	width: 100% !important;
	height: 80vh !important;
}
.productmaster #pm_left #pm_zoom figure img {
	display: block;
	margin: 50px auto 0 auto;
	width: 70%;
	height: 80vh;
	object-fit: cover;
}
@media screen and (min-width:1201px){
.productmaster #pm_left #pm_zoom figure img {
	width: 750px;
}
}
#pm_zoom ol.flex-control-nav {
    top: 80px;
}
#pm_zoom ol.flex-control-nav li img {
	cursor: pointer;
}
#pm_zoom .woocommerce-product-gallery__trigger {
	display: none;
}

/* --- right ---  */
.productmaster #ps_pmright {
	border-right: 1px solid #DEDEDE;
	display: grid;
	grid-template-rows: 25% 1fr 32%;
}
/* right1 */
.productmaster #ps_pmright1 {
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 700;
	padding-left: 120px;
	padding-right: 30px;
	box-sizing: border-box;
	position: relative;
}
.productmaster #ps_pmright1 h1 {
	font-size: 25px;
	position: absolute;
	bottom: 60px;
}
.productmaster #ps_pmright1 p.price {
	position: absolute;
	bottom: 28px;
	font-size: 15px;
}
/* right2 */
.productmaster #ps_pmright2 {
	border-top: 1px solid #DEDEDE;
	padding: 30px 30px 0 120px;
	box-sizing: border-box;
	line-height:1.5;
	font-size: 14px;
}
.productmaster #ps_pmright2 {
	text-align: justify;
}
/* right3 */
.productmaster #ps_pmright3 {
	border-top: 1px solid #DEDEDE;
}

/* --- otherproducts ---  */
@media screen and (min-width:1201px){
#otherproducts {
	width: 1200px;
	margin: 0 auto;
}
}
#otherproducts_title {
	border: 1px solid #DEDEDE;
	text-align: center;
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 700;
	padding: 22px 0 20px 0;
	letter-spacing: 0.07em;
}
#otherproducts ul.products::before,
#otherproducts ul.products::after {
   content: none !important;
}
#otherproducts ul.products {
	border-left: 1px solid #DEDEDE;
	border-right: 1px solid #DEDEDE;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
#otherproducts ul.products li {
	border-right: 1px solid #DEDEDE;
	border-bottom: 1px solid #DEDEDE;
	width: 100%;
	float: none;
	margin: 0;
	box-sizing: border-box;
	position: relative;
	padding: 40px 0 20px 0;
}
#otherproducts ul.products li:nth-child(4n) {
	border-right: 0;
}
#otherproducts ul.products li:hover {
	opacity: 0.7;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}
#otherproducts ul.products li .video {
	position: absolute;
	top: 20px;
	right: 20px;
	background: url(../img/ms_icon_video.svg) no-repeat center center;
	width: 24px;
	height: 12px;
	z-index: 10;
	pointer-events: none;
}
#otherproducts ul.products li a {
	z-index: 1;
}
#otherproducts ul.products li img {
	width: 100%;
	margin:20px 0 20px 0;
}
#otherproducts ul.products li h2 {
	text-align: center;
	font-size: 10px;
	color: #999;
	line-height: 1.3;
	margin: 0;
}