トップ >>
@charset "UTF-8";
@import "swiper.min.css";
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("http://fonts.googleapis.com/earlyaccess/notosansjapanese.css");
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");
/* -- all -- */
/* -- sns -- */
.sns-wrap {
margin: 5px 0 5px 3px !important;
}
.sns-wrap .fb-like {
margin-top: -2px !important;
}
.sns-wrap .line {
display: inline-block;
margin-top: -2px !important;
padding-left: 5px\9 !important;
line-height: 0;
}
.tokusetsu {
width: 720px;
margin: 0;
padding: 0;
background-color: #fbfae9;
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo", "メイリオ", "sans-serif";
font-size: 62.5% !important;
line-height: 1 !important;
text-align: center;
}
.tokusetsu a {
text-decoration: none !important;
-webkit-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.tokusetsu div,
.tokusetsu p {
margin: 0;
padding: 0;
}
.tokusetsu h3,
.tokusetsu h4,
.tokusetsu h5 {
background: none;
}
.tokusetsu > img {
width: 720px;
height: 178px;
}
.tokusetsu .menu {
width: 720px;
height: 72px;
background: url(../imgs/menuarea.jpg) no-repeat left top;
text-align: center;
}
.tokusetsu .menu div {
display: inline-block;
width: 168px;
height: 33px;
margin: 0 auto;
font-size: 1.5em;
font-size: 15px !important;
font-weight: bold;
text-align: center;
line-height: 35px !important;
}
.tokusetsu .menu a div {
border: 1px solid #fffff8;
background-color: #2d2f66;
color: #fffff8 !important;
-webkit-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.tokusetsu .menu a:hover div {
border: 1px solid #fffff8;
background-color: #fffff8;
color: #2d2f66 !important;
}
/* -- main-block -- */
.tokusetsu .tit-block {
position: relative;
width: 700px;
margin: 15px auto 3px auto !important;
padding: 0;
border-bottom: 2px solid #2d2f66;
text-align: left;
}
.tokusetsu .tit-block h3 {
display: inline-block;
position: relative;
height: 34px;
padding: 0 20px !important;
background-color: #2d2f66;
color: #fffff8 !important;
font-size: 1.6em;
font-size: 16px !important;
font-weight: bold;
text-align: center;
line-height: 38px !important;
-webkit-border-radius: 4px 0 0 0;
-ms-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
-o-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.tokusetsu .tit-block h3:after {
display: inline-block;
position: absolute;
bottom: 0;
right: -34px;
right: -33px\9;
width: 0;
height: 0;
border: 17px solid transparent;
border-bottom: 17px solid #2d2f66;
border-left: 17px solid #2d2f66;
content: "";
}
.tokusetsu .tit-block h4 {
position: absolute;
bottom: 5px;
right: 20px;
color: #2d2f66 !important;
font-size: 1.3em;
font-size: 13px !important;
font-weight: bold;
text-align: right;
}
.tokusetsu .main-block {
position: relative;
width: 700px;
margin: 0 auto 30px auto !important;
padding: 10px 0 !important;
border-top: 1px solid #2d2f66;
border-bottom: 1px dashed #2d2f66;
text-align: center;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.tokusetsu .main-block:after {
display: block;
position: absolute;
bottom: -8px;
width: 700px;
height: 0;
border-top: 5px double #2d2f66;
content: "";
}
.tokusetsu .main-block > span {
display: block;
width: 100%;
height: auto;
padding: 5px 10px !important;
background-color: #d4f1fc;
text-align: center;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
/* -- スライダー -- */
.tokusetsu .main-block .swiper-container {
position: relative;
width: 100%;
height: 236px;
margin: -13px auto 0!important;
padding: 0!important;
text-align: center!important;
}
.tokusetsu .main-block .swiper-slide {
width: 100%;
font-size: 14px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.tokusetsu .main-block .swiper-slide img {
display: block;
width: 600px;
height: 200px;
}
.tokusetsu .main-block > span h5 {
display: table;
margin: 8px auto 8px 10px !important;
padding: 8px 12px 5px !important;
background-color: #2d2f66;
color: #fffff8 !important;
font-size: 1.2em;
font-size: 12px !important;
font-weight: bold;
text-align: center;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.tokusetsu .main-block > span > ul {
margin: 5px 15px 5px 32px !important;
text-indent: -16px;
text-align: left;
}
.tokusetsu .main-block > span > ul li {
color: #2d2f66 !important;
font-size: 1.2em;
font-size: 12px !important;
line-height: 1.6 !important;
}
.tokusetsu .main-block > span > ul li span {
color: #d83481 !important;
font-weight: bold;
}
.tokusetsu .main-block > span > hr {
width: 98%;
height: 2px;
margin: 10px auto !important;
border: none;
border-top: 2px dotted #2d2f66;
}
.tokusetsu .main-block > span h5 + p {
display: inline-block;
width: 94%;
height: 46px;
margin: 10px auto !important;
background-color: #d83481;
font-family: "Noto Sans Japanese";
font-size: 1.8em;
font-size: 18px !important;
font-weight: 700;
text-align: center;
line-height: 48px !important;
-webkit-border-radius: 23px;
-ms-border-radius: 23px;
-moz-border-radius: 23px;
-o-border-radius: 23px;
border-radius: 23px;
}
.tokusetsu .main-block > span h5 + p a:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: alpha(opacity=70);
}
.tokusetsu .main-block > span h5 + p a {
color: #fffff8 !important;
}
/*-- item -- */
.tokusetsu .item {
position: relative;
width: 670px;
margin: 15px 4px !important;
padding: 10px !important;
border-top: 1px solid #2d2f66;
border-bottom: 3px solid #2d2f66;
border-left: 1px solid #2d2f66;
border-right: 1px solid #2d2f66;
background-color: #fffff8;
text-align: center;
overflow: hidden;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.tokusetsu .item p .new {
display: inline-block;
background-color: #e51c23;
font-size: 1.3em;
font-size: 13px !important;
color: #ffe600;
border-radius: 3px;
margin: 0 3px 0 0;
padding: 2px 5px 1px;
text-shadow: 1px 1px 0px #2e303c, -1px -1px 0px #2e303c, -1px 1px 0px #2e303c, 1px -1px 0px #2e303c, 1px 0px 0px #2e303c, -1px 0px 0px #2e303c, 0px 1px 0px #2e303c, 0px -1px 0px #2e303c;
}
.tokusetsu .item p:first-child {
margin: 5px auto !important;
font-size: 1.6em;
font-size: 16px !important;
font-weight: bold;
}
.tokusetsu .item p:first-child a {
color: #2d2f66 !important;
}
.tokusetsu .item p:first-child a:hover {
color: #d83481 !important;
text-decoration: underline !important;
}
/*スライダー*/
.tokusetsu .main-block .item .swiper-container {
float: left;
position: relative;
width: 320px;
height: auto;
margin: 0 auto !important;
padding: 0!important;
text-align: center!important;
border: 1px solid rgba(45, 47, 102, 0.5);
}
.tokusetsu .main-block .item .swiper-slide {
/*width: 100%;
font-size: 14px;*/
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.tokusetsu .main-block .item .swiper-slide img {
display: block;
width: 320px;
height: auto;
border: none !important;
}
.tokusetsu .main-block .item .swiper-container-horizontal > .tokusetsu .main-block .item .swiper-pagination-bullets, .tokusetsu .main-block .item .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 10px;
}
.tokusetsu .item img {
float: left;
width: 320px;
margin: 6px 6px 6px 6px !important;
border: 1px solid rgba(45, 47, 102, 0.5);
-webkit-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.tokusetsu .item .detail {
display: inline-block;
float: left;
width: 296px;
margin: 10px 5px 0 !important;
}
.tokusetsu .item .detail p {
color: #2d2f66 !important;
font-size: 1.1em;
font-size: 11px !important;
text-align: left;
line-height: 1.6 !important;
}
.tokusetsu .item .detail ul {
margin: 10px 0 !important;
padding: 10px 7px 7px 14px !important;
background-color: #d4f1fc;
color: #2d2f66 !important;
text-align: left;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.tokusetsu .item .detail ul li {
font-size: 1.1em;
font-size: 11px !important;
line-height: 1.6 !important;
}
.tokusetsu .item .detail ul li span {
font-weight: bold;
}
.tokusetsu .item .detail ul li span:after {
display: inline-block;
margin: 0 8px !important;
font-family: FontAwesome;
font-weight: normal;
content: "\f0da";
}
.tokusetsu .item .detail ul li b {
color: #d83481 !important;
font-size: 1.15em;
font-size: 11.5px !important;
font-weight: bold;
}
.tokusetsu .item .detail ul li b:before {
display: inline-block;
margin-right: 4px !important;
font-family: FontAwesome;
font-weight: normal;
content: "\f02b";
}
.tokusetsu .item .value {
position: absolute;
bottom: 10px;
right: 15px;
text-align: right;
}
.tokusetsu .item .value.long {
position: relative;
top: 5px;
right: 15px;
text-align: right;
}
.tokusetsu .item .value .select-box {
display: inline-block;
position: relative;
width: 150px;
height: 30px;
margin: 10px auto !important;
padding: 7px !important;
border: 1px solid #4b4b4b;
background-color: #f8f8f8;
color: #2d2f66 !important;
font-size: 1.3em;
font-size: 13px !important;
outline: none !important;
overflow: hidden;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.tokusetsu .item .value .select-box:after {
display: inline-block;
position: absolute;
top: 8px;
right: 10px;
z-index: -1\0;
z-index: -1\9;
font-family: FontAwesome;
pointer-events: none;
content: "\f078";
}
.tokusetsu .item .valuev .select-box select {
outline: none;
}
.tokusetsu .item .value .select-box .select-list {
width: 100%;
margin: 0;
padding: 0;
border: 0 !important;
background-color: #f8f8f8;
background: none transparent;
color: #2d2f66 !important;
font-size: 1.3em;
font-size: 13px !important;
line-height: 1.6 !important;
-webkit-appearance: none;
-ms-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
}
/* 価格 */
.tokusetsu .item .value .original_price {
color: #666!important;
font-size: 1.4em;
font-size: 14px !important;
font-weight: bold;
text-decoration: line-through;
margin-bottom: -2px !important;
}
.tokusetsu .item .value .original_price span {
font-size: 1.0em;
font-size: 10px !important;
}
.tokusetsu .item .value dl dt.offprice {
position:relative;
background: #d83481;
padding: 0 3px!important;
height: 20px;
margin-right: 5px!important;
color: #fff;
font-size: 1.3em;
font-size: 13px !important;
line-height: 20px!Important;
}
.tokusetsu .item .value dl dt.offprice:after{
content: "";
position: absolute;
right: -5px;
bottom: 0px;
width: 0px;
height: 0px;
margin: auto;
border-style: solid;
border-color: transparent transparent transparent #d83481;
border-width: 10px 0px 10px 5px;
}
.tokusetsu .item .value dl {
color: #d83481;
font-weight: bold;
}
.tokusetsu .item .value dl dt {
display: inline-block;
font-size: 1.4em;
font-size: 14px !important;
margin-right: 4px !important;
}
.tokusetsu .item .value dl dd {
display: inline-block;
font-size: 2em;
font-size: 20px !important;
}
.tokusetsu .item .value dl dd:after {
display: inline-block;
font-size: 1.05em;
font-size: 10.5px !important;
font-weight: normal;
content: "（税込）";
}
.tokusetsu .item .value p {
color: #f00754 !important;
font-size: 1.6em;
font-size: 16px !important;
font-weight: bold;
text-align: right;
}
/* -- カートボタン --*/
.tokusetsu .item .cart {
display: inline-block;
position: relative;
z-index: 1;
width: 150px;
height: 36px;
margin: 5px auto !important;
background-color: #d83481;
text-align: center;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.tokusetsu .item .cart:before {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 150px;
height: 18px;
background-color: rgba(255, 255, 255, 0.15);
-webkit-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-o-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
content: "";
}
.tokusetsu .item .cart span {
position: relative;
z-index: 3;
color: #fffff8 !important;
font-size: 1.4em;
font-size: 14px !important;
font-weight: bold;
line-height: 38px !important;
}
.tokusetsu .item .cart:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: alpha(opacity=70);
}
/* -- itemlist -- */
.tokusetsu .itemlist {
margin: 15px auto !important;
text-align: center;
}
.tokusetsu .itemlist a:hover {
opacity: 0.8;
}
/* -- twitter -- */
.tokusetsu .twitterwrap {
width: 550px;
margin: 5px auto !important;
border: 1px solid #e8e8e8;
}
.tokusetsu .twitterwrap .twitter-timeline {
width: 100%;
}
/* -- footer -- */
.tokusetsu .footer {
width: 720px;
height: 40px;
margin-top: 20px !important;
background-color: #2d2f66;
text-align: center;
}
.tokusetsu .footer p {
color: #fffff8 !important;
font-size: 1.1em;
font-size: 11px !important;
line-height: 42px !important;
}
.tokusetsu .footer p:before {
display: inline-block;
margin-right: 4px !important;
font-family: FontAwesome;
content: "\f1f9";
}
/* -- backtop -- */
.tokusetsu .backtop {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999;
}
.tokusetsu .backtop a {
display: block;
width: 60px;
height: 60px;
background-color: rgba(45, 47, 102, 0.95);
text-align: center;
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.tokusetsu .backtop i {
margin: 10px auto !important;
color: #fffff8 !important;
font-size: 4em;
}
.tokusetsu .backtop a:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: alpha(opacity=70);
}
/*-----------------------------------------------
キャリーケース 0705
-----------------------------------------------*/
.tokusetsu .apology {
width: 90%;
margin: 20px auto 10px !important;
padding: 10px !important;
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 0 1px #2d2f66, 0 0 0 2px #fff, 0 0 0 4px #2d2f66;
}
.tokusetsu .apology .ttl {
width:100%;
font-size: 1.6em;
font-size: 16px !important;
line-height: 19px !important;
font-weight: bold;
color: #2d2f66;
padding-bottom: 4px!important;
margin-bottom: 10px!important;
border-bottom: 3px double #5c5f90;
text-align: center!important;
}
.tokusetsu .apology .text-area {
display: inline-block;
width: 380px;
vertical-align: top;
margin: 2px 5px 0 0 !important;
}
.tokusetsu .apology p {
text-align: left!important;
font-size: 1.2em;
font-size: 12px !important;
line-height: 17px !important;
margin-bottom: 10px !important;
}
.tokusetsu .apology p.schedule {
background-color: #ebe9dd;
padding: 7px !important;
}
.tokusetsu .apology p:last-child {
text-align: right!important;
}
.tokusetsu .apology img {
width: 250px;
border: 1px solid #ccc;
}
.tokusetsu .apology_index .btn {
display: inline-block;
position: relative;
z-index: 1;
width: 90%;
height: auto;
margin: 15px auto !important;
background-color: #2d2f66;
text-align: center;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.tokusetsu .apology_index .btn span {
position: relative;
z-index: 3;
color: #fffff8 !important;
font-size: 1.4em;
font-size: 14px !important;
font-weight: bold;
line-height: 50px !important;
}
.tokusetsu .apology_index .btn span i {
color: #ffe200;
}
.tokusetsu .apology_index .btn:hover {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: alpha(opacity=70);
}