/*
 | ------------------------------------------
 | CSS File
 | ------------------------------------------
 | Copyright: gingdesign.com
*/

@charset "UTF-8";

/*-------------------------------------------------------------------------*/
/* webfonts
/*-------------------------------------------------------------------------*/
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 500;
src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
}

/*-------------------------------------------------------------------------*/
/* html5 reset
/*-------------------------------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,ins,kbd,q,samp,small,strong,
sub,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,main,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{ list-style: none; }
ul,ol,li,dl,dt,dd{ list-style-type: none; list-style-position: outside; }
blockquote,q{ quotes: none; }
blockquote:before,blockquote:after,q:before,q:after{ content: none; }
a{ margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
ins{ background-color: #ff9; color: #000; text-decoration: none; }
img{ vertical-align: top; border: 0; }
em{ font-style: italic; }
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; }
hr{ display:block; height:1px; border: 0; border-top: 1px solid #ccc; margin: 0; padding: 0; }
input,select{ vertical-align: middle; }
main { display: block; }
button { border: none; }

/*-------------------------------------------------------------------------*/
/* base
/*-------------------------------------------------------------------------*/
* { margin: 0; padding: 0; box-sizing: border-box; }
body { position: relative; font-family: "Noto Sans Japanese", "貅舌ヮ隗偵ざ繧ｷ繝�け", "Source Han Sans", Lato, "貂ｸ繧ｴ繧ｷ繝�け Medium", "貂ｸ繧ｴ繧ｷ繝�け菴�", "Yu Gothic Medium", YuGothic, "繝偵Λ繧ｮ繝手ｧ偵ざ ProN", "Hiragino Kaku Gothic ProN", "繝｡繧､繝ｪ繧ｪ", Meiryo, "�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif; font-size: 14px; color: #333; font-weight: 500; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-size: 1.0em; font-weight: normal; }
table { border-collapse: collapse; }
img { border: none; vertical-align: bottom; }
li { list-style-type: none; }
sup { font-size: 10px; }
p { line-height: 1.5; }
p small { font-size: 80%; }
.red { color: #c00; }
th { font-weight: normal; }
@media screen and (min-width: 768px) {
}

/* link */
a, :hover { transition: .3s; }
a:link { color: #0000cc; text-decoration: none; }
a:visited { color: #0000cc; }
a:hover { color: #0000cc; cursor: pointer; text-decoration: underline;}

/* rollover */
@media screen and (min-width: 768px) {
a:hover img.hov { filter: alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80; }
}

/* ios */
.ios a:hover img.hov { filter: alpha(opacity=1); -moz-opacity: 1; opacity: 1; }
.ios .ovrgp a:hover img, .ios img.ovr:hover, .ios input.ovr:hover { filter: alpha(opacity=1); opacity: 1; }

/* clear */
.clear { clear: both; }
.cf:before, .cf:after, .clearfix:before, .clearfix:after { content: ""; display: table; }
.cf:after, .clearfix:after { clear: both; }
.cf, .clearfix { *zoom: 1; }

/* img */
img { max-width: 100%; }
@media screen and (min-width: 768px) {
img { max-width: auto; max-height: auto; }
}


/*--------------------------------------------------------------------------
  module
---------------------------------------------------------------------------*/
.err { color: #ff0000 !important; font-weight: bold; }.bold { font-weight: bold !important; }.red { color: #cc0000 !important; }.center { text-align: center !important; }.right { text-align: right !important; }.left { text-align: left !important; }.fr { float: right; }.fl { float: left; }
.fs10 { font-size: 10px !important; }.fs12 { font-size: 12px !important; }.fs14 { font-size: 14px !important; }.fs16 { font-size: 16px !important; }.fs18 { font-size: 18px !important; }.fs20 { font-size: 20px !important; }.fs22 { font-size: 22px !important; }.fs24 { font-size: 24px !important; }
.mt0 { margin-top: 0px !important; }.mt5 { margin-top: 5px !important; }.mt10 { margin-top: 10px !important; }.mt15 { margin-top: 15px !important; }.mt20 { margin-top: 20px !important; }.mt30 { margin-top: 30px !important; }.mt40 { margin-top: 40px !important; }.mt50 { margin-top: 50px !important; }
.mb5 { margin-bottom: 5px !important; }.mb0 { margin-bottom: 0 !important; }.mb10 { margin-bottom: 10px !important; }.mb15 { margin-bottom: 15px !important; }.mb20 { margin-bottom: 20px !important; }.mb30 { margin-bottom: 30px !important; }.mb40 { margin-bottom: 40px !important; }.mb50 { margin-bottom: 50px !important; }
.mr0 { margin-right: 0 !important; }.mr10 { margin-right: 10px !important; }.mr15 { margin-right: 15px !important; }.mr20 { margin-right: 20px !important; }.mr25 { margin-right: 25px !important; }.mr30 { margin-right: 30px !important; }
.ml5 { margin-left: 5px !important; }.ml10 { margin-left: 10px !important; }.ml20 { margin-left: 20px !important; }.ml30 { margin-left: 30px !important; }
.center { text-align: center !important; }.right { text-align: right !important; }.left { text-align: left !important; }
.pb10 { padding-bottom: 10px !important; }.pb20 { padding-bottom: 20px !important; }.pb30 { padding-bottom: 30px !important; }.pb40 { padding-bottom: 40px !important; }
.pl10 { padding-left: 10px !important; }.pl35 { padding-left: 35px !important; }.pl40 { padding-left: 40px !important; }.pl55 { padding-left: 55px !important; }
.pr10 { padding-right: 10px !important; }
.w150 { width: 150px !important; }.w200 { width: 200px !important; }.w220 { width: 220px !important; }.w240 { width: 240px !important; }.w300 { width: 300px !important; }.w330 { width: 330px !important; }.w350 { width: 350px !important; }.w380 { width: 380px !important; }.w480 { width: 480px !important; }.w100p { width: 100% !important; }
.err-msg, .error-message { margin: 10px 0 0; font-weight: bold; font-size: 14px; color: #cc0000; }
@media screen and (min-width: 768px) {
}

/*----------------------------------------------------*/
/* wrapper
/*----------------------------------------------------*/
#wrapper { }
@media screen and (min-width: 768px) {
#wrapper { background: url(../img/bg.png) fixed; }
}

/*----------------------------------------------------*/
/* header
/*----------------------------------------------------*/
#header { box-shadow: 0 5px 10px 0 rgba(0,0,0, 0.1); background: #fff; }
#header .inner { padding: 16px 50px 14px; text-align: center; }
#header .logo { margin: 0 auto; }
#header .btn { display: none; }

@media screen and (min-width: 768px) {
#header .inner { position: relative; width: 1200px; height: 76px; margin: 0 auto; padding: 0; }
#header .logo {
	position: absolute;
	top: 44px;
	left: 23px;
	width: 383px;
	height: 104px;
}
#header .btn { display: block; position: absolute; top: 12px; right: 6px;}
}

/*----------------------------------------------------*/
/* footer
/*----------------------------------------------------*/
#footer { box-shadow: 0 0 8px 8px rgba(0,0,0, 0.1); background: #fff; }
#footer .inner { padding: 24px 25px 56px; text-align: center; }
#footer .logo { margin-bottom: 8px; }
#footer .copy { margin-bottom: 18px; font-size: 11px; }
#footer .menu li { float: left; }
#footer .menu li a { color: #333; font-size: 11px; }
#footer .menu li:before { display: inline-block; content: "/"; padding-right: 6px; margin-left: 6px; }
#footer .menu li:first-child:before { display: none; }

@media screen and (min-width: 768px) {
#footer { clear: both; }
#footer .inner { position: relative; width: 1200px; height: 100px; margin: 0 auto; padding: 0; }
#footer .logo { position: absolute; top: 25px; left: 15px; margin: 0; }
#footer .copy { position: absolute; top: 40px; left: 333px; margin: 0; font-size: 16px; }
#footer .menu { position: absolute; top: 40px; right: 0;}
#footer .menu li a { font-size: 16px; }
#footer .menu li:before { padding-right: 15px; margin-left: 15px; }
}


/*----------------------------------------------------*/
/* main
/*----------------------------------------------------*/
#main { }
@media screen and (min-width: 768px) {
#main { width: 1200px; margin: 0 auto; box-shadow: 0 5px 10px 0 rgba(0,0,0, 0.1); background: #fff; }
}
@media screen and (max-width: 768px) {
	#main img {
		width: 100%;height: auto;
	}

}

/* cont */
sub { font-size: 0.6rem;}
.pc { display: none !important; }
@media screen and (min-width: 768px) {
.pc { display: block !important; text-align: center; }
.sp { display: none !important; }
}

.d03 {
	background-image: url(../images/cinderella_03bg.jpg);
	background-repeat: no-repeat;
	padding: 40px;
	background-position: left top;
	background-size: cover;
	display: flex;
	justify-content: flex-end;
}
.d03 div {
	text-align: center
}

/* item-detail */
.item-detail { padding: 15px 15px 40px; background: #fdfaf6; font-size: 12px; }
.item-detail .item img { width: 46%; margin-right: 10px; margin-bottom: 20px; }
.item-detail .eiyo { padding: 10px 0;}
.item-detail .naiyo { padding: 10px 0;}
.item-detail .naiyo h3:not(:first-child){ margin-top: 10px;}
.item-detail .cyui { clear: both; padding: 10px 0; border-top: 1px dashed #a2855d; text-align: left; }
.item-detail .cyui:last-child { border-bottom: 1px dashed #a2855d; }
.item-detail li { padding: 2px 0; line-height: 1.4; font-size: 13px; }
.item-detail h3 { margin: 0 0 8px -10px; color: #138561; font-weight: 700; line-height: 1.4; }
.item-detail table { width: 100%; text-align: left; }
.item-detail .tbl01 tr { border-bottom: 1px dashed #a2855d; }
.item-detail .tbl01 tr:first-child { border-top: 1px dashed #a2855d; }
.item-detail .tbl01 th { width: 80px; padding: 10px 0; color: #138561; font-weight: 700; line-height: 1.4; }
.item-detail .tbl01 td { padding: 10px 0; line-height: 1.4; }
.item-detail .tbl02 th { padding: 2px 0; line-height: 1.4; }
.item-detail .tbl02 td { padding: 2px 0; line-height: 1.4; }
.item-detail .eiyo th { width: 120px; }
.item-detail .naiyo th { width: 180px; }

@media screen and (min-width: 768px) {
.item-detail { padding: 60px; font-size: 16px; }
.item-detail .item { float: left; width: 219px; }
.item-detail .item img { width: inherit; margin-right: 0; margin-bottom: 30px; }
.item-detail .detail { float: right; width: 700px; }
.item-detail .eiyo { float: left; width: 300px; padding: 18px 0;}
.item-detail .naiyo { float: left; width: 400px; padding: 18px 0;}
.item-detail .cyui { padding: 18px 0; }
.item-detail .tbl01 th { width: 100px; padding: 18px 0; }
.item-detail .tbl01 td { padding: 20px 0; }
}

.cartbtn {
	padding: 20px 0;
}
@media screen and (max-width: 768px) {
.item-detail .tbl01 th,.item-detail .tbl01 td {
	width: 100%;
	display: block;
	padding: 6px 0;
}
.cartbtn {
	margin: 0 40px;
}
}