@import url("/css/reset.css");

/* ================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   Customized to include a flexible grid system, flexible image
   ================================================================ */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}
a {
	color: #000;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

hr.style-one {
	border: 0;
    height: 1px;
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	margin-bottom: 46px;
	display: block;
}
hr.style-two {
	border: 0;
    height: 1px;
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	margin: 46px 0;
	display: block;
}
hr.style-three {
	border: 0;
    height: 1px;
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
	margin: 32px 0;
	display: block;
}
img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
  margin: 20px;
  background: #ffae00;
  border: 4px solid #ffe98e;
  color: #000;
  padding: 20px;
}

.chromeframe a {
  color: #ff0000;
  background: #ffe98e;
  padding: 3px;
}

.chromeframe a:hover {
  color:#ff0000;
  text-decoration: underline;
}


/* ================================================================
   Author's custom styles
   ================================================================ */

body {
	font-family: Futura,"游ゴシック体","YuGothic", "游ゴシック","Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 13px;
	line-height: 1;
	color: #000;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	line-height: 17px;
	padding-bottom: 37px;
}
p {
  margin: 0 0 0.9em 0;
  padding: 0;
  text-align: justify;
 }
.row { background: #000; }
.cols { background: #ddd; }

a {
	outline: none;
}
a:focus {
	outline: none;
}
/* ボックスモデルの指定 */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.pc {
  display: block !important;
}
.sp {
  display: none !important;
}
@media only screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}

/* ------------------------------
   フレキシブル・メディア
   ------------------------------ */
img {
  width: 100%;
  max-width: 100%;
}
video {
  max-width: 100%;
  height: auto;
}

/* YouTubeやVimeoなどのiFrameを使った埋め込み動画用スタイル */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ------------------------------
   BODY BORDER
   ------------------------------ */
html:before,html:after,body:before,body:after{
    content:"";
    background:#000;
    position:fixed;
    display:block;
    z-index:5;
}
html:before{
    height:5px;
    left:0;
    right:0;
    top:0;
}
html:after{
    width:5px;
    top:0;
    right:0;
    bottom:0;
}
body:before{
    height:5px;
    right:0;
    bottom:0;
    left:0;
}
body:after{
    width:5px;
    top:0;
    bottom:0;
    left:0;
}




/* ------------------------------
   Magnific Pop Up
   ------------------------------ */
.product_detail {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	text-align: center;
}
.product_detail h3 {
	font-family: Futura,"游ゴシック体","YuGothic", "游ゴシック","Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: normal;
	font-size: 18px;
}
.product_detail h4 {
	font-size: 14px;
	margin: 24px 0 0 0;
}
.product_detail h4 span {
	margin-left: 0.5em;
	background-color: #000;
	color: #FFF;
	font-size: 12px;
	padding: 3px;
}
.product_detail img {
	width: 100%;
}
.mfp-container {
	padding: 0;
}
.mfp-container .mfp-close {
	text-indent: 1000px;
	overflow: hidden;
	background: url(/img/btn_close.png) no-repeat center center;
	top: 15px;
	right: 15px;
	position: fixed;
	opacity: 1;
	filter: alpha(opacity=100);
}
.mfp-container .mfp-close:hover {
	opacity: 0.65;
	filter: alpha(opacity=65);
}
.mfp-close:active {
	top: 15px;
}
.mfp-container .mfp-close:active {
	top: 15px;
}
.mfp-arrow {
	width: 40px;
	height: 30px;
	margin-top: -15px;
	opacity: 1;
	filter: alpha(opacity=100);
}
.mfp-arrow:hover, .mfp-arrow:focus {
	opacity: 0.65;
	filter: alpha(opacity=65);
}
.mfp-arrow-left {
	left: 30px;
}
.mfp-arrow-right {
	right: 30px;
}
.mfp-container .mfp-arrow{
	background: url(/img/btn_arrows.png) no-repeat 0 5px;
}
.mfp-arrow:active {
	margin-top: -15px;
}
.mfp-container .mfp-arrow.mfp-arrow-right {
	background-position: -40px 5px;
}
.mfp-container .mfp-arrow:before,
.mfp-container .mfp-arrow:after,
.mfp-container .mfp-arrow .mfp-b
.mfp-container .mfp-arrow .mfp-a {
	display: none;
}
.mfp-bg {
	background: #FFF;
	/*opacity: 0.9;
	filter: alpha(opacity=90);*/
	opacity: 1;
	filter: alpha(opacity=100);
}
a.close {
	font-size: 10px;
	line-height: 10px;
	color: #000;
	padding: 6px 16px;
	display: inline-block;
	text-decoration: underline;
	cursor: pointer;
	margin-top: 26px;
	font-weight: bold;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin-bottom: 36px;
}
a.close:hover {
	opacity: 0.65;
	filter: alpha(opacity=65);
}
img.stretch {
	width: 100%;
}
.mfp-figure:after {
	box-shadow: none;
}



/*========== Common ==========*/
h2 {
	font-weight: normal;
	font-size: 15px;
}
h2.center {
	text-align: center;
	margin: 36px 0;
}
h2.notfound {
	text-align: center;
	font-size: 36px;
	margin-top: 1em;
}
li {
	list-style-type: none;
}
.wrap_content {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 50px;
}
.wrap_content_nopad {
	max-width: 1200px;
	margin: 0 auto;
}
.wrap_content_full {
	padding: 0 5px;
}
.en p b {
	font-family: "游ゴシック体","YuGothic", "游ゴシック","Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
ul#item li a, ul#slider-pager li a, ul#insta_image li a, ul#collection_image li a {
	-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;
	opacity: 1;
	filter: alpha(opacity=100);
}
ul#item li a:hover, ul#slider-pager li a:hover, ul#insta_image li a:hover, ul#collection_image li a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}
.sp_show {
		display: none;
	}

/* --------- header ----------*/
header {
	display: table;
	height: 90px;
	width: 100%;
}
header section {
	display: table-cell;
}
section#logo {
	width: 15%;
	vertical-align:middle;
}
section#logo h1 a {
	background: url(/img/logo.png);
	width: 75px;
	height: 45px;
	display: block;
	text-indent: -9999px;
	margin-top: 3px;
}
section#globalnav {
	width: 85%;
}
section#globalnav ul {
	float: right;
}
section#globalnav li {
	float: left;
	margin-left: 5px;
}
section#globalnav li a {
	display: block;
	height: 90px;
	text-indent: -9999px;
	margin-left: 16px;
}

section#globalnav li a:hover, section#globalnav li.current a {
	background-position: 0 -90px;
}

section#globalnav li.concept a {
	background-image: url(/img/nav_concept.png);
	width: 56px;
}
section#globalnav li.store a {
	background-image: url(/img/nav_store.png);
	width: 36px;
}
section#globalnav li.blog a {
	background-image: url(/img/nav_blog.png);
	width: 31px;
}
section#globalnav li.contact a {
	background-image: url(/img/nav_contact.png);
	width: 58px;
}
section#globalnav li.recruit a {
	background-image: url(/img/nav_recruit.png);
	width: 47px;
}
section#globalnav li.onlinestore a {
	background-image: url(/img/nav_onlinestore.png);
	width: 82px;
}
section#globalnav li.mn a {
	background-image: url(/img/nav_mn.png);
	width: 65px;
}
section#globalnav li.nom a {
	background-image: url(/img/nav_nom.png);
	width: 76px;
}
section#globalnav li.nom a {
	margin-left: 8px;
}
section#globalnav li.nom {
	margin-left: 0;
}

section#globalnav li.collection span {
	display: block;
	height: 90px;
	text-indent: -9999px;
	margin-left: 16px;
	background-image: url(/img/nav_collection.png);
	width: 72px;
}
section#globalnav li.collection span:hover, section#globalnav li.collection span.current {
	background-position: 0 -90px;
}

/* drop down menu */
#globalnav li div.dropdown {
	position: absolute;
	z-index: 100;
	margin: -36px 0 0 16px;
}
#globalnav li:hover div.dropdown, #globalnav li a:hover div.dropdown {
	z-index: 10;
}
.wrap_dropdown {
	padding: 6px 0;
	display: none;
}
.wrap_dropdown_current {
	padding: 6px 0;
}
.collection span {
	cursor: pointer;
}
section#globalnav li .dropdown a {
	text-indent: 0;
	display: inline-block;
	height: 30px;
	margin: 0;
	font-size: 12px;
	text-decoration: none;
	color: #000;
}
section#globalnav li .dropdown a:hover, section#globalnav li .dropdown a.current {
	text-decoration: underline;
}

/* --------- nav mobile ----------*/
nav {
	color: #000;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: transparent;
	z-index: 9;
	display: none;
}
.menu_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #FFF;
	opacity: 0.95;
	z-index: -1;
	position: fixed !important;
	height: 150% !important;
}
.menu_btn {
	margin: -65px 0 0 30px;
	width: 25px;
	height: 22px;
	position: relative;
	overflow: visible;
	line-height: 13px;
	font-size: 1px;
	float: left;
	cursor: pointer;
	-webkit-transition: all 400ms ease-out 0ms;
	-moz-transition: all 400ms ease-out 0ms;
	-o-transition: all 400ms ease-out 0ms;
	transition: all 400ms ease-out 0ms;
}
.menu_btn .line {
	position: absolute;
	background-color: #000;
	overflow: hidden;
	z-index: 1;
	height: 2px;
	width: 25px;
	left: 0;
	-webkit-transition: all 400ms ease-out 0ms;
	-moz-transition: all 400ms ease-out 0ms;
	-o-transition: all 400ms ease-out 0ms;
	transition: all 400ms ease-out 0ms;
}

.menu_btn .line:nth-child(1) {
	top: 0px;
	z-index: 2;
}
.menu_btn .line:nth-child(2) {
	top: 10px;
	z-index: 2;
}
.menu_btn .line:nth-child(3) {
	top: 20px;
	z-index: 2;
}
.btn_wrapper {
	z-index: 999;
	position: absolute;
	display: none;
}

/*メニューオープン時のクリックボタン*/
.btn_wrapper.clicked .menu_btn .line:nth-child(1) {
	-webkit-transform: translateY(10px) rotate(45deg);
	transform: translateY(10px) rotate(45deg);
	-webkit-transition: all 400ms ease-out 0ms;
	-moz-transition: all 400ms ease-out 0ms;
	-o-transition: all 400ms ease-out 0ms;
	transition: all 400ms ease-out 0ms;
}
.btn_wrapper.clicked .menu_btn .line:nth-child(2) {
	opacity: 0;
	-webkit-transition: all 400ms ease-out 0ms;
	-moz-transition: all 400ms ease-out 0ms;
	-o-transition: all 400ms ease-out 0ms;
	transition: all 400ms ease-out 0ms;
}
.btn_wrapper.clicked .menu_btn .line:nth-child(3) {
	-webkit-transform: translateY(-10px) rotate(-45deg);
	transform: translateY(-10px) rotate(-45deg);
	-webkit-transition: all 400ms ease-out 0ms;
	-moz-transition: all 400ms ease-out 0ms;
	-o-transition: all 400ms ease-out 0ms;
	transition: all 400ms ease-out 0ms;
}
nav ul {
	margin: 65px 0 0 50px;
	position: relative;
	display: inline-block;
}
nav ul li {
	font-size: 18px;
	line-height: 1.5;
}
nav ul li a {
	color: #000;
	text-decoration: none;
}
nav ul li span {
	display: block;
	padding-bottom: 6px;
}
nav ul li span a {
	margin-left: 12px;
	font-size: 15px;
	line-height: 1.3;
	display: block;
}
nav hr {
	margin: 18px 50px;
	background-color: #000;
	border: none;
	height: 1px;
}
nav ul#related_links {
	margin: 0 0 0 50px;
}
/* --------- footer ----------*/
footer {
	background-color: #000;
	background-image: url(/img/copyright.png);
	background-position: center center;
	background-repeat: no-repeat;
	color: #FFF;
	padding: 12px 20px;
	text-align: right;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 1;
}
footer a {
	margin: 0 8px;
	color: #FFF;
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
}
a.ico_instagram {
  background-image: url(/img/ico_insta.svg);
  background-position: center center;
	background-repeat: no-repeat;
  background-size: cover;
  width: 20px;
  height: 20px;
  float: left;
  display: block;
}

/* --------- column----------*/
.content_onecol {
	display: table;
	width: 100%;
	margin-bottom: 18px;
}
.content_onecol section {
	display: table-cell;
	vertical-align: top;
}
.content_onecol section.first {
	width: 100%;
	text-align: center;
}
.content_onecol section.first img {
	max-width: 400px;
}
.content_twocol {
	display: table;
	width: 100%;
	margin-bottom: 18px;
}
.content_twocol section {
	display: table-cell;
	vertical-align: top;
}
.content_twocol section.first {
	width: 50%;
	padding: 0 5% 0 0;
}
.content_twocol section.second {
	width: 50%;
	padding: 0 0 0 5%;
}
.content_threecol {
	display: table;
	width: 100%;
	margin-bottom: 18px;
}
.content_threecol section {
	display: table-cell;
}
.content_threecol section.first {
	width: 22%;
	padding: 0 7% 0 0;
	padding-bottom: 12px;
	text-align: right;
}
.content_threecol section.first h2 {
	margin-bottom: 8px;
}
.content_threecol section.first img {
	/*max-width: 120px;*/
}
.content_threecol section.second {
	width: 39%;
	padding: 0 3% 0 0;
	padding-bottom: 12px;
}
.content_threecol section.third {
	width: 39%;
	padding: 0 0 0 3%;
	padding-bottom: 12px;
}
.content_fourcol {
	display: table;
	width: 100%;
}
#store .content_fourcol {
  margin-bottom: 46px;
}
.content_fourcol section {
	display: table-cell;
	vertical-align: top;
}
.content_fourcol section.first {
	width: 22%;
	padding: 0 7% 0 0;
	text-align: right;
}
.content_fourcol section.second {
	width: 26%;
	padding: 0 2% 0 0;
}
.content_fourcol section.third {
	width: 26%;
	padding: 0 1%;
}
.content_fourcol section.fourth {
	width: 26%;
	padding: 0 0 0 2%;
}

/* --------- responsive slides ----------*/
/*
#slider-pager {
	margin: 18px 0;
}
#slider-pager a {
	display: inline-block;
}
#slider-pager img {
	float: left;
}
#slider-pager .rslides_here a {
	background: transparent;
	box-shadow: 0 0 0 1px #CCC;
}
#slider-pager a {
	padding: 0;
}
#slider-pager li {
	display: inline;
	margin-right: 6px;
}
.rslides {
	position: relative;
	list-style: none;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0;
}
.rslides li {
	-webkit-backface-visibility: hidden;
	position: absolute;
	display: none;
	width: 100%;
	left: 0;
	top: 0;
}
.rslides li:first-child {
	position: relative;
	display: block;
	float: left;
  }
.rslides img {
	display: block;
	height: auto;
	float: left;
	width: 100%;
	border: 0;
}
*/
/* --------- CSS Responsive Slider ----------*/
div.nav_thumb {
	margin-top: 24px;
}
/*全サムネイルのコンテナー*/
#thumbs {
	margin-right:3%;
}
/*サムネイルの幅、ポインターを手のひら*/
#thumbs label img {
	/*width:18.5%;*/
	width: 25%;
	cursor: pointer;
	margin-bottom: 1%;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5, #r6{
	display: none;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
.photo {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.photo img {
	width: 90%;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #photo1 img, #r2:checked ~ #photo2 img, #r3:checked ~ #photo3 img, #r4:checked ~ #photo4 img, #r5:checked ~ #photo5 img, #r6:checked ~ #photo6 img {
	opacity: 1;
}
img#hero {
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	opacity: 1;
}
#r1:checked ~ img#hero, #r2:checked ~ img#hero, #r3:checked ~ img#hero, #r4:checked ~ img#hero, #r5:checked ~ img#hero, #r6:checked ~ img#hero {
	opacity: 0;
}





/*========== Top Splash ==========*/
#splash {
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #FFF;
	opacity: 1;
	z-index:1001;
}
#splash div {
	position: absolute;
	display: none;
	width: 106px;
	height: 64px;
	z-index:1002;
}


/*========== Top ==========*/
#key_visual {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#key_visual div {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#key_visual div.copy {
	width: 200px;
	height: 40px;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	margin-top: -65px;
	position: relative;
}
#key_visual div.aw a {
	display: block;
	width: 200px;
	height: 40px;
	text-indent: -9999px;
	background: url(/img/copy.png);
}
#key_visual div.aw a:hover {
	background-position: 0 -40px;
}


/*========== Designer ==========*/
body#designer .content_threecol {
	margin-top: 24px;
}
img#portrait {
	margin-top: 8px;
}

/*========== Masterpiece ==========*/
h3#masterpiece {
	text-align: center;
	height: 32px;
	text-indent: -9999px;
	background: url(/masterpiece/img/h3_masterpiece.png) no-repeat center 0;
	margin: 24px 0;
}
h3.hstyle_one {
	position: relative;
	text-align: center;
	font-weight: normal;
	max-width: 300px;
	margin: 0 auto;
}
h3.hstyle_one:before {
    content: "";
  display: block;
  border-top: solid 1px #000;
  position: absolute;
  width: 100%;
  top: 50%;
  z-index: 1;
}
h3.hstyle_one span {
   background: #fff;
  padding: 0 1em;
  position: relative;
  z-index: 2;
}
p.leadcopy {
	max-width: 560px;
	margin: 16px auto 16px auto;
	/*text-align: center;*/
	text-align: justify;
}
ul.permanent_item {
	margin-top: 28px;
}
ul.permanent_item li {
	float: left;
	width: 25%;
}
.product_detail {
	max-width: 850px;
}
.description {
	margin: 0 auto;
	display: table;
	width: 100%;
	font-family: "游ゴシック体","YuGothic", "游ゴシック","Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.description .image, .product_detail .text {
	display: table-cell;
	width: 50%;
}

.description .image {
	/*padding: 0 1% 0 7%;
	position: absolute;*/
	position: relative;
}
.description .image img#hero {
	width: 90%;
}
.description .text {
	padding: 0 7% 0 3%;
	text-align: left;
	vertical-align: middle;
}
.description dl {
	margin: 12px 0;
}
.description .text dt {
	float: left;
	width: 90px;
	font-weight: bold;
}
.description .text dd {
	margin-left: 100px;
}





/*
div#order {
	background-color: #C7B299;
	padding: 12px 0 18px 0;
}
div#wrap_order {
	display: table;
	max-width: 640px;
	margin: 0 auto;
	padding: 0 20px;
}
div#wrap_order section {
	display: table-cell;
	vertical-align: top;
}
div#wrap_order section.first {
	width: 18%;
}
div#wrap_order section.second {
	width: 75%;
	padding-left: 7%;
	padding-top: 18px;
}
div#wrap_order section.first a {
	font-size: 18px;
	height: 35px;
	display: block;
	background: url(/masterpiece/img/arr_order.png) no-repeat right top;
	text-decoration: none;
	color: #000;
	margin-top: 18px;
	padding-top: 10px;
}
div#wrap_order section.first a:before {
	display: block;
	left: 0;
	top: -10px;
	width: 0;
	height: 3px;
	background-color: #000;
	content: "";
	transition: width 0.2s;
	width: 20%;
	position: relative;
}
div#wrap_order section.first a:hover:before {
	width: 50%;
}

.detail_order h3 {
	font-size: 16px;
	margin-top: 26px;
}
.detail_order h4 {
	font-size: 13px;
}
.detail_order ol {
	margin-left: 25px;
	margin-bottom: 12px;
}
.detail_order ol li {
	list-style-type: inherit;
}
.detail_order .description .text {
	padding: 0 7%;
	text-align: left;
	vertical-align: top;
}
div#private_room {
	text-align: center;
	padding: 18px 0 0 0;
}
div#private_room img {
	max-width: 720px;
}
h2#h_order {
	text-align: center;
	font-weight: bold;
	margin-top: 24px;
}
*/
/*========== Collection ==========*/
ul#nav_season {
	text-align: center;
	margin: 26px 0;
}
ul#nav_season li {
	display: inline;
}
ul.collection_item li {
	float: left;
	width: 33.333%;
}
ul.collection_item li img {
	vertical-align: bottom;
}
ul#collection_image li {
	float: left;
	width: 33.333%;
}
p.note {
	font-size: 12px;
	margin-left: 1em;
	margin-bottom: 0.5em;
}
p.note span {
	margin-right: 0.5em;
	background-color: #000;
	color: #FFF;
	font-size: 12px;
	padding: 3px;
	line-height: 21px;
}
/*========== Store ==========*/
div#store {
	/*margin-top: 42px;*/
	margin-top: 24px;
}
div#store h2.storename {
	text-align: center;
	margin-bottom: 18px;
	text-decoration: underline;
}
img.storephoto {
	margin-bottom: 18px;
}
section dl {
	margin-top: 36px;
}
section dt {
	float: left;
	width: 65px;
	font-weight: bold;
	font-family: "游ゴシック体","YuGothic", "游ゴシック","Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin-bottom: 12px;
}
section dd {
	margin-left: 80px;
	margin-bottom: 12px;
}
div#dealer {
	/*border-top: 1px solid #000;*/
	margin-top: 48px;
	/*padding-top: 42px;*/
	/* margin-bottom: 36px; */
}
figure.map {
	text-align: center;
	margin-top: 36px;
}
figure.map img {
	max-width: 461px;
}
div#store section p {
	font-family: "游ゴシック体","YuGothic", "游ゴシック","Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* ================================================================
   Flexible Grid Sytem
   - Based on Foundation "The Grid" http://foundation.zurb.com/
   ================================================================ */

.row {
  width: 1140px;
  max-width: 100%;
  min-width: 768px;
  margin: 0 auto;
  overflow: hidden;
}

.row .row {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 -10px;
}

.cols {
  float: left;
  min-height: 1px;
  padding: 0 10px;
  position: relative;
}

/* カラムのpaddingをなくすcollapseクラス */
.row.collapse .cols, .row.collapse .cols { padding: 0; }
.row .row.collapse { margin: 0; }

[class*="cols"] + [class*="cols"]:last-child { float: right; }
[class*="cols"] + [class*="cols"].end { float: left; }

.row .one { width: 8.33%; }
.row .two { width: 16.66%; }
.row .three { width: 25%; }
.row .four { width: 33.33%; }
.row .five { width: 41.66%; }
.row .six { width: 50%; }
.row .seven { width: 58.33%; }
.row .eight { width: 66.66%; }
.row .nine { width: 75%; }
.row .ten { width: 83.33%; }
.row .eleven { width: 91.66%; }
.row .twelve { width: 100%; }

/* PUSH & PULL */
.push-two { left: 16.66%; }
.pull-two { right: 16.66%; }
.push-three { left: 25%; }
.pull-three { right: 25%; }
.push-four { left: 33.33%; }
.pull-four { right: 33.33%; }
.push-five { left: 41.66%; }
.pull-five { right: 41.66%; }
.push-six { left: 50%; }
.pull-six { right: 50%; }
.push-seven { left: 58.33%; }
.pull-seven { right: 58.33%; }
.push-eight { left: 66.66%; }
.pull-eight { right: 66.66%; }
.push-nine { left: 75%; }
.pull-nine { right: 75%; }
.push-ten { left: 83.33%; }
.pull-ten { right: 83.33%; }

@media screen and (max-width:49.25em){
/* 788px以下向けのモバイル版グリッド・スタイル */
  .cols {
    float: none;
    width: auto !important;
    height: 100%;
  }
  .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
  [class*="cols"] + [class*="cols"]:last-child { float: none; }
  [class*="cols"] + [class*="cols"].end { float: none; }

  /* PUSH & PULLの調整*/
  .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten { left: auto; }
  .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten { right: auto; }

  /* モバイル版4カラムグリッド */
  .row .mobile-one { width: 25% !important; float: left; padding: 0 10px; }
  .row .mobile-one:last-child { float: right; }
  .row .mobile-one.end { float: left; }
  .row.collapse .mobile-one { padding: 0; }

  .row .mobile-two { width: 50% !important; float: left; padding: 0 10px; }
  .row .mobile-two:last-child { float: right; }
  .row .mobile-two.end { float: left; }
  .row.collapse .mobile-two { padding: 0; }

  .row .mobile-three { width: 75% !important; float: left; padding: 0 10px; }
  .row .mobile-three:last-child { float: right; }
  .row .mobile-three.end { float: left; }
  .row.collapse .mobile-three { padding: 0; }

  .row .mobile-four { width: 100% !important; float: left; padding: 0 10px; }
  .row .mobile-four:last-child { float: right; }
  .row .mobile-four.end { float: left; }
  .row.collapse .mobile-four { padding: 0; }

  /* モバイル用 PUSH & PULL */
  .mobile-push-one { left: 25%; }
  .mobile-pull-one { right: 25%; }
  .mobile-push-two { left: 50%; }
  .mobile-pull-two { right: 50%; }
  .mobile-push-three { left: 75%; }
  .mobile-pull-three { right: 75%; }

  /* モバイル用collapseクラス */
  .row.mobile-collapse .cols, .row.mobile-collapse .cols { padding: 0; }
  .row .row.mobile-collapse { margin: 0; }
  .row.mobile-collapse .mobile-one { padding: 0; }
  .row.mobile-collapse .mobile-two { padding: 0; }
  .row.mobile-collapse .mobile-three { padding: 0; }
  .row.mobile-collapse .mobile-four { padding: 0; }
}


/* ================================================================
   Media Queries
   ================================================================ */

@media only screen and (max-width: 925px) {
	body {
		padding-bottom: 20px;
	}
	.btn_wrapper {
		display: inherit;
	}
	section#logo {
		width: 100%;
		vertical-align:middle;
		text-align: center;
	}
	section#logo h1 {
		display: inline-block;
	}
	section#globalnav {
		display: none;
	}
	footer a {
		display: none;
	}
}

@media only screen and (max-width: 780px) {
	div#private_room img {
		max-width: 60%;
	}
}

@media only screen and (max-width: 680px) {
	/*========== Common ==========*/
	h2 {
		/*
		font-weight: normal;
		*/
		font-size: 18px;
	}
	.wrap_content {
		padding: 0 22px;
	}
	.sp_show {
		display: inherit;
	}
	.sp_pb01 {
		padding-bottom: 42px;
	}
	/* --------- column----------*/
	.content_onecol {
		display: block;
	}
	.content_onecol section {
		display: block;
	}
	.content_onecol section.first {
		display: none;
	}
	.content_onecol section.second {
		width: 100%;
	}

	.content_twocol {
		display: block;
	}
	.content_twocol section {
		display: block;
	}
	.content_twocol section.first {
		width: 100%;
		padding: 0;
	}
	.content_twocol section.second {
		width: 100%;
		padding: 0;
	}

	.content_threecol {
		/*display: table;
		width: 100%;
		margin-bottom: 18px;*/
		display: block;
	}
	.content_threecol section {
		/*display: table-cell;*/
		display: block;
	}
	.content_threecol section.first {
		width: 100%;
		padding: 0;
		padding-bottom: 12px;
		text-align: center;
	}
	.content_threecol section.first h2 {
		margin-bottom: 8px;
	}
	.content_threecol section.first img {
		max-width: 120px;
	}
	.content_threecol section.second {
		width: 100%;
		/*padding: 0 2% 0 0;*/
		padding: 0;
		padding-bottom: 12px;
	}
	.content_threecol section.third {
		width: 100%;
		/*padding: 0 0 0 2%;*/
		padding: 0;
		padding-bottom: 12px;
	}



	.content_fourcol {
		display: block;
	}
	.content_fourcol section {
		display: block;
	}
	.content_fourcol section.first {
		width: 100%;
		padding: 0 0 24px 0;
		text-align: center;
	}
	.content_fourcol section.first h2 {
		margin-top: 48px;
	}
	.content_fourcol section.second {
		width: 100%;
		padding: 0;
	}
	.content_fourcol section.third {
		width: 100%;
		padding: 0;
	}
	.content_fourcol section.fourth {
		width: 100%;
		padding: 0;
	}


	div#wrap_order section.first a {
		height: 70px;
		display: block;
		background: url(/masterpiece/img/arr_order.png) no-repeat left bottom;
	}
	/*========== Store ==========*/
	section dl {
		margin: 36px 0 42px 0;
	}

}


@media only screen and (max-width: 500px) {
	/* ------------------------------
   BODY BORDER
   ------------------------------ */
	html:before,html:after,body:before,body:after{
		content:"";
		background:#000;
		position:fixed;
		display:block;
		z-index:5;
	}
	html:before{
		height:4px;
		left:0;
		right:0;
		top:0;
	}
	html:after{
		width:2px;
		top:0;
		right:0;
		bottom:0;
	}
	body:before{
		height:2px;
		right:0;
		bottom:0;
		left:0;
	}
	body:after{
		width:2px;
		top:0;
		bottom:0;
		left:0;
	}
	/*========== Common ==========*/
	.wrap_content_full {
		padding: 0 2px;
	}
	/*========== Masterpiece ==========*/
	.description {
		display: block;
	}
	.description .image, .product_detail .text {
		display: block;
		width: 100%;
	}
	.description .text {
		padding: 0 10px;
		font-size: 11px;
		line-height: 1.2;
	}
	.description .image img#hero {
		width: 33%;
	}
	/* --------- CSS Responsive Slider ----------*/
	#thumbs label img {
		width: 12%;
	}
	.photo img {
		width: 33%;
	}
	/* ------------------------------
   Magnific Pop Up
   ------------------------------ */
	.product_detail h3 {
		font-size: 14px;
	}
	.mfp-container .mfp-arrow {
		display: none;
	}
	a.close {
		margin-top: 18px;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {

}

/* ================================================================
   Helper classes
   ================================================================ */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ================================================================
   Print styles
   ================================================================ */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}



/* ================================================================
   Retina
   ================================================================ */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	section#logo h1 a {
		background: url(/img/logo@2x.png);
		background-size: 75px 45px;
		width: 75px;
		height: 45px;
	}
	h3#masterpiece {
		background-image: url(/masterpiece/img/h3_masterpiece@2x.png);
		background-size: 390px 32px;
		background-repeat: no-repeat;
		background-position: center 0;
	}
	footer {
		background-image: url(/img/copyright@2x.png);
		background-size: 162px 9px;
	}
	div#wrap_order section.first a {
		background-image: url(/masterpiece/img/arr_order@2x.png);
		background-size: 35px 35px;
	}
	section#globalnav li.concept a {
		background-image: url(/img/nav_concept@2x.png);
		background-size: 56px 180px;
	}
	section#globalnav li.store a {
		background-image: url(/img/nav_store@2x.png);
		background-size: 36px 180px;
	}
	section#globalnav li.blog a {
		background-image: url(/img/nav_blog@2x.png);
		background-size: 31px 180px;
	}
	section#globalnav li.contact a {
		background-image: url(/img/nav_contact@2x.png);
		background-size: 58px 180px;
	}
	section#globalnav li.recruit a {
		background-image: url(/img/nav_recruit@2x.png);
		background-size: 47px 180px;
	}
	section#globalnav li.onlinestore a {
		background-image: url(/img/nav_onlinestore@2x.png);
		background-size: 82px 180px;
	}
	section#globalnav li.mn a {
		background-image: url(/img/nav_mn@2x.png);
		background-size: 65px 180px;
	}
	section#globalnav li.nom a {
		background-image: url(/img/nav_nom@2x.png);
		background-size: 76px 180px;
	}

	section#globalnav li.collection span {
		background-image: url(/img/nav_collection@2x.png);
		background-size: 72px 180px;
	}
}