@charset "utf-8";

.box {font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","Osaka","ＭＳ Ｐゴシック","MS P Gothic",Verdana,Arial,Helvetica,sans-serif;}
#main {float:left; width:700px; margin-top:20px; padding-bottom:70px; background:#fff; color:#000;}
#content{-webkit-font-smoothing: antialiased;}
#content header {border:0;}
#content time {margin-bottom:20px; font-family: 'Montserrat',Verdana,Arial,Helvetica,sans-serif; color:#999;}
#content h2 {font-size:2.2em; font-family:"Montserrat",Verdana,Arial,Helvetica,sans-serif; font-weight:bold; margin-bottom:5px;}
#content h3 {font-size:1.3em; font-weight:normal; margin-bottom:20px;}
#content h4 {font-size:1.3em; font-weight:normal; margin-bottom:10px; text-align:center;}
#content .en {font-family: 'Montserrat',Verdana,Arial,Helvetica,sans-serif;}

#content br.onlySP,
#content br.onlySP--force{ display: none; }
.smartphone #content br.force,
.smartphone #content br.onlySP--force { display: inline-block!important; }

#content header{ margin: 0; padding: 0; }
#content header .image{ margin: 0; }
a.black-bg{ display: inline-block!important; margin: 0 auto; position: relative; }
a.black-bg img{ opacity: 1!important; position: relative; }
a.black-bg:before{ background-color: #9f9f9f; border-radius: 4px; content: " "; display: block; height: 100%; margin: -5px 0 0 -20px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; padding: 5px 20px; position: absolute; left: 0; top: 0; transition: opacity .4s ease; width: 100%; }
a.black-bg:hover:before{ opacity: 1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; }

/* introduction */
#content #introduction{ padding: 60px 0; }
#content #introduction h3 strong,
#content #introduction h3 span { display: block; }
#content #introduction h3 strong { padding: 0 0 8px; }
#content #introduction h3 span { font-size: 12px; }
#content #introduction h4 {font-size:18px; color:#363636; font-weight: normal; margin-top: 60px;}
#content #introduction *{ text-align: center; }
#content #introduction p{ line-height: 32px; }
#content #introduction > div{ padding: 30px 0 20px; position: relative; text-align: center; }

/* .section */
#content .section{ padding: 46px 0 0; }
#content .section:before { background: url(images/line.png) repeat-x top center; content: " "; display: block; height: 30px; margin: -30px 0 60px; width: 100%; }

#content .section .description{ font-size: 18px; line-height: 32px; margin: 0; position: relative; text-align: center; }
#content .section .description:before,
#content .section .description:after{ content: " "; display: block; left: 50%; position: absolute; }

#content .section .img{ padding: 45px 0; text-align: center; }

#content .section .meta{ width: 100%; text-align: center;}
#content .section .meta *{ text-align: center; }
#content .section .meta h5 { font-size:16px; line-height:26px; color:#9fa0a0; margin-bottom:25px;}
#content .section .meta .icon { display: block; width: 80px; font-size: 11px; margin: 0 auto 13px; padding:2px 20px; border: 1px solid #aaa;}
#content .section .meta .release{ display: block; font-size: 13px; margin: 0 0 4px; }
#content .section .meta .reserve { display: block; font-size: 12px; margin: 0 0 13px; }
#content .section .meta .title strong{ color: #333; display: block; font-size: 20px; line-height: 28px; padding: 0 0 20px; }
#content .section .meta .title span{ color: #999; display: block; font-size: 11px; line-height: 15px; }
#content .section .meta .price{ font-size: 13px; line-height: 18px; padding: 0 0 20px; margin: 0; }
#content .section .meta .color { padding: 20px 0 40px; }
#content .section .meta .colors { border: none!important; padding: 8px 0 20px;!important; margin: 0; }
#content .section .meta .colors li { padding-top: 0!important; }

#content .section .more{ padding: 0 0 30px; text-align: center; }
#content .section .more > *{ display: inline-block; vertical-align: middle; text-align: left; }
#content .section .more dd{ font-size: 12px; line-height: 18px; padding: 0 0 0 10px; width: 160px; }

#content .section .detailBtn,
#content .section .cartBtn { background-color: #333; color: #fff; display: block; font-family: 'Montserrat',Verdana,Arial,Helvetica,sans-serif; font-size: 14px; font-weight: bold; line-height: 1.4; padding: 8px 0; margin: 10px auto 0; transition: opacity .4s ease; text-align: center; width: 265px; }
#content .section .detailBtn:hover,
#content .section .cartBtn:hover{ opacity: .8; }

#content .section .cartBtn-s { border-bottom: 1px solid #333; box-sizing: border-box; color: #333; display: inline-block; font-size: 11px; font-weight: bold; line-height: 1.2; letter-spacing: 0; margin-top: 8px; }
#content .section .cartBtn-s:before { background: url(/common/images/general/icon_cart_black.png) no-repeat 0 50%; content: " "; display: inline-block; height: 12px; padding: 0 4px 0 0; position: relative; top: 1px; width: 14px; }
#content .section .cartBtn-s:hover { opacity: .6; }

#content .section__footer { display: flex; justify-content:flex-end; margin: 50px 0 0; }
#content .section__footer .limited { font-size: 12px; margin: 0; padding: 0; }
#content .section__footer .pagetop { background: url(/common/images/general/icon_up.png) no-repeat; color: #333; font-size: 12px; padding: 0 0 0 16px; }

/* .colors */
#content div[class^="colors"]{ border-top: 1px solid #eaeaea; margin: 45px 0 50px; padding: 10px 0 0; position: relative; }
#content div[class^="colors"].no-border{ border: 0; margin-top: 0; }
#content div[class^="colors"].no-border li { padding-top: 0; }
#content div[class^="colors"] h5{ font-size: 16px; line-height: 28px; padding: 0 0 40px; text-align: center; }
#content div[class^="colors"] ul{ display: flex; flex-flow: wrap; justify-content: center; margin: 25px 0 0;}
#content div[class^="colors"] li{ width: 216px; font-size: 11px; padding-top: 0; margin-bottom: 30px; position: relative; display: flex; justify-content: space-between; flex-direction: column; align-items: center;}
#content div[class^="colors"] li:first-child{ padding-left: 0; }
#content div[class^="colors"] li *{ display: block; text-align: center; }
#content div[class^="colors"] li img{ margin: 0 auto 9px; }
#content div[class^="colors"] li strong { display: block; font-family: 'Montserrat',Verdana,Arial,Helvetica,sans-serif; color: #000; font-size: 12px; padding: 0 0 8px; line-height: 15px;}
#content div[class^="colors"] li strong span{ display: block; font-size: 12px; font-weight: normal; padding:0; text-align: center; }
#content div[class^="colors"] li span{ font-size: 10px; line-height: 14px; letter-spacing: 0; color: #333; }
#content div[class^="colors"] .limited{ bottom: -1em; font-size: 11px; margin: 0; padding: 0; position: absolute; right: 0; text-align: right; }

#content .section .colors-1col ul li { width: 100%; }
#content .section .colors-3col ul { width: 100%; }
#content .section .colors-3col ul li { width: 33.3%; }
#content .section .colors-4col ul li{ width: 162px; }
#content .section .colors-5col ul li{ width: 129px; }
#content .section .colors-6col ul li{ width: 107px; }

/* toggle */
#content .toggle__body { display: none; flex-wrap: wrap; justify-content: center; padding: 0; }
#content .toggle__buttons { text-align: center; }
#content .toggle__button { }
#content .toggle__button:hover { opacity: .8; }
#content .toggle__button--detail { background: #f6f4f4; color: #8b202d; border: #ddd; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; font-size: 12px; text-align: center; transition: opacity .4s ; width: 610px; padding: 10px 0; position: relative;}
#content .toggle__button--detail:after { content: ""; background: url("images/icon_down.png") no-repeat center; display: inline-block; width: 15px; height: 8px; margin-left: 10px; position: absolute; right: 18px;}
#content .toggle__button--close { font-size: 12px; color: #8b202d; text-decoration: underline; display: none; margin-top: 20px; text-align: center;}
#content .toggle__button--close:after { content: ""; background: url("images/icon_down.png") no-repeat center; display: inline-block; width: 15px; height: 8px; margin-left: 3px; transform: rotate(180deg) scale(1); }

/* checked */
#content .toggle { height: 1px; left: -9999px; position: absolute; visibility: hidden; width: 1px; }
#content .toggle:checked ~ .toggle__body { display: block; opacity: 1; }
#content .toggle:checked ~ .toggle__body .toggle__button--close { display: block; }
#content .toggle:checked ~ .toggle__buttons .toggle__button--detail { display: none; }



/**
 * for smartphone
 */
.smartphone #content .smp_view {display:inline;}
.smartphone #content .smp_hidden {display:none;}
.smartphone #content time {margin-bottom:10px; text-align:center;}
.smartphone #content h2 {font-size:18px; margin-bottom:10px; text-align:center;}
.smartphone #content h3 {font-size:14px; line-height:1.6; text-align:center;}
.smartphone #content header .image img{ width: 100%; }
.smartphone #content .line{ width: 100%; }

.smartphone main .main_inner{ overflow: visible; }
.smartphone #content br.onlySP{ display: inline; }

/* # introduction */
.smartphone #content #introduction{ padding: 40px 0; }
.smartphone #content #introduction h3 img{ width: 152px; }
.smartphone #content #introduction h4 {font-size:16px; }
.smartphone #content #introduction p{ font-size: 12px; line-height: 1.8; text-align:left; }
.smartphone #content #introduction p br{ display: none; }

/* section */
.smartphone #content .section{ background-size: auto 50px; margin: -30px -7.13% 30px; padding-top: 30px; }
.smartphone #content .section > *{ margin: 0 6.25%; }
.smartphone #content .section:before { margin: 0 0 40px; }

.smartphone #content .section .description { font-size: 14px; line-height: 1.6; letter-spacing: 0; margin: 0 6.25%; }
.smartphone #content .section .description br { }
.smartphone #content .section .description:before,
.smartphone #content .section .description:after{ background-size: contain; content: " "; display: block; left: 50%; position: absolute; }
.smartphone #content .section .description:before{ height: 17px; margin: 0 0 0 -25px; top: -20px; width: 50px; }
.smartphone #content .section .description:after{ bottom: -12px; height: 8px; margin: 0 0 0 -22px; width: 44px; }

.smartphone #content .section .img { padding: 30px 0; }
.smartphone #content .section .img img{ height: auto; max-height: 250px; max-width: 250px; }
.smartphone #content .section .meta h5 { font-size:14px; line-height:1.6; }
.smartphone #content .section .meta .icon { margin: 0 auto 16px; }
.smartphone #content .section .meta .release{ font-size: 12px; margin: 0 0 4px; }
.smartphone #content .section .meta .reserve { font-size: 12px; margin: 0 0 16px; }
.smartphone #content .section .meta .title strong{ font-size: 18px; line-height: 1.6; padding: 0 0 15px; letter-spacing: 0;}
.smartphone #content .section .meta .title span{ font-size: 10px; line-height: 1.4;  }
.smartphone #content .section .meta .price{ font-size: 12px; line-height: 1.4; padding: 0 0 15px; }
.smartphone #content .section .meta .colors ul{ justify-content: center; }

.smartphone #content .section .detailBtn,
.smartphone #content .section .cartBtn{ max-width: 320px; }

.smartphone #content .section__footer { align-items: flex-end; flex-direction: column; margin: 0 4% -30px; }
.smartphone #content .section__footer .limited { font-size: 11px; padding: 0 0 8px; }
.smartphone #content .section__footer .pagetop { font-size: 11px; }

.smartphone #content .section .more dt img{ max-height: 80px; max-width: 90px; }
.smartphone #content .section .more dd{ font-size: 11px; line-height: 1.6; }

/* colors */
.smartphone #content div[class^="colors"]{ padding: 0 0 50px; position: relative; margin: 30px auto 0; max-width: 320px; width: 100%; }
.smartphone #content div[class^="colors"] ul{ display: flex; flex-wrap: wrap; justify-content: space-around; text-align: left; margin:0 -5.13%;}
.smartphone #content div[class^="colors"] h5{ font-size: 12px; line-height: 18px; }
.smartphone #content div[class^="colors"] .note { width: auto; }
.smartphone #content div[class^="colors"] li{ padding: 30px 0 0; width: 48%; }
.smartphone #content div[class^="colors"] li strong{ font-size: 12px; }
.smartphone #content div[class^="colors"] li span{ font-size: 11px; }
.smartphone #content div[class^="colors"] li span br{ display: none; }
.smartphone #content div[class^="colors"] li img { margin-bottom: 5px; }
.smartphone #content div[class^="colors"] .limited{ text-align: left; }

.smartphone #content .section .colors-3col ul { width: auto; }


/* toggle */
.smartphone #content .toggle__buttons { margin-bottom: 30px; }
.smartphone #content .toggle__button { }
.smartphone #content .toggle__button--detail { width: calc(100% - 40px); padding: 10px 20px; }
.smartphone #content .toggle__button--detail:after { right: 5px; }





/* for this page */
#content #introduction { background: url('images/introduction_bg.jpg'); margin-bottom: 50px; padding: 40px;}
#content #introduction .introduction_inner { background: rgba(255,255,255,0.77); padding: 50px 40px; position: relative; }
.smartphone #content #introduction {background-size: cover; margin: 30px -7.15%;}
.smartphone #content #introduction .introduction_inner {padding:40px 15px 20px;}
.smartphone #content #introduction .introduction_inner:before {opacity: 0.3;}
.smartphone #content #introduction .introduction_inner::after {opacity: 0.3;}

/* lineup */
#content #lineup .lineup__title { font-size: 16px!important; text-align: center; margin-bottom: 40px!important; }
#content #lineup .lineup__lists {display: flex; flex-wrap: wrap; justify-content: center; }
#content #lineup .lineup__list {}
#content #lineup .lineup__items { display: flex; justify-content: space-between; flex-wrap: wrap; margin:0 40px 15px;}
#content #lineup .lineup__items li { text-align: center; margin:0 0 30px; width: 33%;}
#content #lineup .lineup__items li a { color: #333!important; display: flex; justify-content: space-between; flex-direction: column; }
#content #lineup .lineup__items li:last-child { /*width: 16%;*/ }
#content #lineup .lineup__items li span { display: block; padding: 3px 00; text-align: center; font-weight: normal;}
#content #lineup .lineup__items .item__img { align-items: flex-end; display: flex; height: auto; justify-content: center; align-items: flex-end; width: 100%; margin-bottom:7px; }
#content #lineup .lineup__items.goods .item__img,
#content #lineup .lineup__items.kit .item__img {height: 65px;}
#content #lineup .lineup__items .item__title { font-size: 11px; line-height: 12px; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#content #lineup .lineup__items .item__img img { max-width: 180px; max-height:110px;}
.smartphone #content #lineup .lineup__title { margin-bottom: 20px!important; }
.smartphone #content #lineup .lineup__lists {margin: 0 2%;}
.smartphone #content #lineup .lineup__items {justify-content: space-around; margin: 0 0 10px!important; width: 100%;}
.smartphone #content #lineup .lineup__items li {padding: 10px 0 0; display: flex; flex-flow: column; justify-content: flex-end; width: 26%;}
.smartphone #content #lineup .lineup__items li img {max-width:100%;}
.smartphone #content #lineup .lineup__items .item__img {margin-bottom: 0;}
.smartphone #content #lineup .lineup__items .item__img img {height: 90px; }
.smartphone #content #lineup .lineup__items .item__title {height: 4rem;}

/* lineup *
.smartphone #content #lineup .lineup__title { font-size: 16px!important; margin-bottom:30px !important;}
.smartphone #content #lineup .lineup__items { flex-wrap: wrap; margin: 0 3px!important; justify-content: center; }
.smartphone #content #lineup .lineup__items li { width: auto; margin: 0; padding: 0 10px 10px;}
.smartphone #content #lineup .lineup__items li img { max-width: 70%; max-height: 80px; }
.smartphone #content #lineup .lineup__items .item__img {margin-bottom: 4px; height: 80px;}
.smartphone #content #lineup .lineup__items .item__title { padding: 0px 0 0; }
*/


#content #present-box .img { padding-top:26px; }
#content #present-box p.small { text-align: center; margin: 2em 0 1em; }
#content #present-box p.xsmall { text-align: center; margin: 2em 0 1em; font-size:12px;}
#content #present-box p.price { padding-bottom: 10px; }
#content #present-box p.comment { text-align: center; margin: 20px 0 0; font-size: 12px; line-height: 22px;}
#content #present-box p.comment a { color:inherit; text-decoration: underline;}
#content #present-box .komes{ margin: 40px 60px; }
#content #present-box .kome { margin: 0 0 10px; font-size: 12px; text-indent: -12px; padding-left: 12px;}
.smartphone #content #present-box p.comment { text-align: left; }
.smartphone #content #present-box p.comment br { display: none; }
.smartphone #content #present-box .komes{ margin: 40px 0; }



/* for this page */
#content .deco-title {text-align: center; color: #000; font-size: 14px; font-weight: bold; background: url(images/deco.png) no-repeat; background-position: center -5px; height: 95px; line-height: 95px; margin-bottom:20px;}