@charset "UTF-8";

/*==============================================================================
■目次--------------------------------------------------------------------------

1.デフォルト
3.ヘッダー
4.コンテンツラッパー
10.フッター
00.メンテナンス

==============================================================================*/



/* ==========================================================================
1.デフォルト
========================================================================== */
html,
button,
input,
select,
textarea {
    color: #333;
}

html{
	font-size:82.5%;
}

body{
	font-family: "Helvetica", "Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	line-height:normal;
}

img{
    vertical-align: middle;
}

a{
	outline:none;
	border:0;
}

dl{
	margin:0;
}

p,
strong,
em{
	word-break:break-all;
}

/* placeholder */
:placeholder-shown {
	color:#ccc;
}

::-webkit-input-placeholder {
	color:#ccc;
}

:-moz-placeholder {
	color:#ccc;
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

::-moz-placeholder {
	color:#ccc;
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

:-ms-input-placeholder {
	color:#ccc;
}


/* ==========================================================================
3.ヘッダー
========================================================================== */
header{
	width:100%;
	margin:0 0 0 0;
	/* padding:1em 0; */
}

.headerWrapper{
	width:960px;
	padding:0;
	margin:0 auto;
}

/* ==========================================================================
4.コンテンツラッパー
========================================================================== */
.content{
	width:100%;
	margin:0em 0 5em 0;
}

#dialog.content{
	margin:0;
}

.contentWrapper{
	width:960px;
	margin:0 auto;

	position:relative;
}

/* ==========================================================================
10.フッター
========================================================================== */

.footerWrapper{
	width:960px;
	padding:0;
	margin:1em auto;
}

/* ==========================================================================
12.商品詳細(デフォルト)
========================================================================== */

.buttons strong{
	display:block;
	font-size:1.2rem;
	margin:0.5em 0 0 0;
	min-width:5rem;
	text-align:right;
}

.buttons ul{
	margin:0;
	padding:0;
	list-style-type:none;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

.buttons ul li{
	width:auto;
	letter-spacing:normal;
	text-align:center;
	border:none;
	box-sizing:border-box;
	position:relative;
	margin-right: 0.3rem;
}

.buttons ul li input[type="text"]{
	font-size:1.8rem;
	text-align: center;

	border:1px solid #999;
	padding:0.25em;

	width:4rem;
	height:4rem;

	box-sizing:border-box;

	border-radius:5px;

	-webkit-appearance:none;
	
}

.buttons ul li a, .buttons ul li button{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    justify-content: center;
    align-items: center;

    width: 4rem;
    height: 4rem;

	color:#fff;
	font-size:2.3rem;
	text-decoration:none;
	background:#666;

	border-radius:5px;

	-webkit-transition:all linear 0.25s;
	transition:all linear 0.25s;

	margin:0 auto;
}

.buttons ul li button{
	border: 1px solid transparent;
	background:#d4dad4;
}

.buttons ul li a.plus{
	background:#d4dad4;
	color:black;
}

.buttons ul li a.minus{
	background:#d4dad4;
	color:black;
}

.buttons ul li a b.case{
	position: absolute;
	top: 3%;
	left: 3%;
	font-size: 1rem;
	display: inline-block;
	font-family: arial;
	background: #fff;
	line-height:100%;
	color: #669900;
	border-radius: 1em;
	width: 10px;
}

.buttons ul li a b.bara{
	position: absolute;
	top: 3%;
	left: 3%;
	font-size: 1rem;
	display: inline-block;
	font-family: arial;
	background: #fff;
	line-height:100%;
	color: #FF6600;
	border-radius: 1em;
	width: 10px;
}

/* ==========================================================================
00.商品入れ替えページ
========================================================================== */
html.ref{
	height:100%;
	background:#fff;
}

html.ref .contentWrapper{
	border:none;
}

.contentWrapper.renew{
	width:auto;
}

.refArea{
	text-align:center;
	margin:2em 0;
}

.refArea span.mark{
	display:inline-block;
	color:#333;
	font-size:14rem;
	margin:0.25em 0;

   	-webkit-animation: change 5s ease forwards;
	-webkit-animation-iteration-count: infinite;
   	-moz-animation: change 5s ease forwards;
	-moz-animation-iteration-count: infinite;
   	-ms-animation: change 5s ease forwards;
	-ms-animation-iteration-count: infinite;
   	-o-animation: change 5s ease forwards;
	-o-animation-iteration-count: infinite;
   	animation: change 5s ease forwards;
	animation-iteration-count: infinite;
}

.refArea h2{
	color:#fff;
	font-size:4rem;
	font-weight:bold;
	font-family:arial;
	margin:0;
	padding:0.25em 0;
	background:#333;
}

.refArea strong{
	display:block;
	color:#333;
	font-size:2rem;
	margin:1em 0;
}

.refArea p{
	color:#333;
	font-size:1.4rem;
	letter-spacing:-0.05em;
	margin:0;
}

.refArea a{
	display:inline-block;
	color:#fff;
	font-size:1.4rem;
	text-align:center;
	text-decoration:none;
	padding:0.65em 0.8em;
	margin:0;

	background: #333;

	min-width:170px;

	border-radius:2px;
	-ms-border-radius:2px;
	-o-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}

.refArea a:hover{
	background:#eee;
	color:#333;
}

.refArea ul{
	margin:5em 0;
	padding:0;
	list-style-type:none;

	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-ms-flex-direction:row;
	        flex-direction:row;
	-webkit-box-align:center;
	-ms-flex-align:center;
	        align-items:center;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	        justify-content:center;
}

.refArea ul li{
	margin:0 1em;
}



/* ==========================================================================
00.404,403,505,エラーページ
========================================================================== */
html.err{
	height:100%;
	background:#e62074;
}

html.err .contentWrapper{
	border:none;
	width:auto;
}

.errArea{
	width:auto;
	text-align:center;
	margin:8em 0;
}

.errArea span.mark{
	display:inline-block;
	color:#fff;
	font-size:14rem;
	margin:0 0 0.25em 0;
}

.errArea h2{
	color:#e62074;
	font-size:4rem;
	font-weight:bold;
	letter-spacing:-0.05em;
	margin:0;
	padding:0.25em 0;
	background:#fff;
}

.errArea strong{
	display:block;
	color:#fff;
	font-size:2rem;
	letter-spacing:0.1em;
	padding:0 0.8em;
	margin:0.5em 0 1em 0;
}

.errArea p{
	color:#fff;
	font-size:1.4rem;
	margin:0;
	padding:0.8em;
	text-align:center;
}

.errArea a{
	display:inline-block;
	color:#e62074;
	font-size:1.4rem;
	text-align:center;
	text-decoration:none;
	padding:0.65em 0.8em;
	margin:3em 0;

	background: #fff;

	border-radius:2px;
	-ms-border-radius:2px;
	-o-border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}

.errArea a:hover{
	background:#333;
	color:#fff;
}

footer.err{
	border:none
}

footer.err p,
footer.err a{
	color:#fff;
}

/* ==========================================================================
00.ボーダー
========================================================================== */

/* ==========================================================================
00.クリックアニメーション
========================================================================== */

/* ==========================================================================
00.メンテナンス
========================================================================== */
html.repair{
	background:#fff;
}

.repairLogo{
	max-width:184px;
	margin:0 auto 2em auto;
}

.repairLogo img{
	max-width:100%;
}

html.repair .errArea h2{
	color:#666;
	font-weight:normal;
	padding:0;
	background:none;
}

html.repair .errArea strong{
	color:#999;
	letter-spacing:normal;
	margin:0;
}

.repArea{
	text-align:center;
}

html.repair .errArea p{
    display: inline-block;
	color:#333;
    margin: 3em 0 0 0;
}

html.repair .errArea a{
	color:#333;
	background:#eee;
}

html.repair .errArea a:hover{
	color:#fff;
	background:#333;
}

html.repair .copyright p,
html.repair .copyright a{
	color:#333;
}

/* clock */
.clock {
    height: 184px;
    margin: 40px auto 0 auto;
    max-width: 184px;
    position: relative;
    border: 4px solid #f9f9f9;
    border-radius: 50%;
    z-index: 2;
    -webkit-box-shadow: 0 0 1px 10px rgba(0,0,0,0.6);
            box-shadow: 0 0 1px 10px rgba(0,0,0,0.6);
}

.clock:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border: 3px solid #eee;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    z-index: 0;
}

.second-hand {
    -webkit-animation: rotation-s 60s linear infinite;
            animation: rotation-s 60s linear infinite;
    background-color: #999;
    border-radius: 2px;
    height: 4px;
    position: absolute;

    right: calc(50% - 2px);
    top: calc(50% - 2px);
    -webkit-transform-origin: calc(100% - 2px) center;
        -ms-transform-origin: calc(100% - 2px) center;
            transform-origin: calc(100% - 2px) center;

    width: 50%;
}

.minute-hand {
    -webkit-animation: rotation-m 3600s linear infinite;
            animation: rotation-m 3600s linear infinite;
    background-color: #000;
    border-radius: 5px;
    height: 10px;
    position: absolute;

    right: calc(50% - 5px);
    top: calc(50% - 5px);
    -webkit-transform-origin: calc(100% - 5px) center;
        -ms-transform-origin: calc(100% - 5px) center;
            transform-origin: calc(100% - 5px) center;

    width: 40%;
}

.hour-hand {
    -webkit-animation: rotation-h 86400s linear infinite;
            animation: rotation-h 86400s linear infinite;
    background-color: #cc3b3b;
    border-radius: 5px;
    height: 10px;
    position: absolute;
    right: calc(50% - 5px);
    top: calc(50% - 5px);
    -webkit-transform-origin: calc(100% - 5px) center;
        -ms-transform-origin: calc(100% - 5px) center;
            transform-origin: calc(100% - 5px) center;

    width: 25%;
}

/* IE fix */
@media all and (-ms-high-contrast: none){
	.second-hand {
		transform-origin:100%;
		right: 50%;
		top: 50%;
	}

	.minute-hand {
		transform-origin:100%;
		right: 50%;
		top: 50%;
	}

	.hour-hand {
		transform-origin:100%;
		right: 50%;
		top: 50%;
	}
}
/* IE fix end */

@-webkit-keyframes rotation-s {
    0% {-webkit-transform: rotate(90deg);transform: rotate(90deg)}
    100% {-webkit-transform: rotate(450deg);transform: rotate(450deg)}
}

@keyframes rotation-s {
    0% {-webkit-transform: rotate(90deg);transform: rotate(90deg)}
    100% {-webkit-transform: rotate(450deg);transform: rotate(450deg)}
}

@-webkit-keyframes rotation-m {
    0% {-webkit-transform: rotate(90deg);transform: rotate(90deg)}
    100% {-webkit-transform: rotate(450deg);transform: rotate(450deg)}
}

@keyframes rotation-m {
    0% {-webkit-transform: rotate(90deg);transform: rotate(90deg)}
    100% {-webkit-transform: rotate(450deg);transform: rotate(450deg)}
}

@-webkit-keyframes rotation-h {
    0% {-webkit-transform: rotate(150deg);transform: rotate(150deg)}
    100% {-webkit-transform: rotate(510deg);transform: rotate(510deg)}
}

@keyframes rotation-h {
    0% {-webkit-transform: rotate(150deg);transform: rotate(150deg)}
    100% {-webkit-transform: rotate(510deg);transform: rotate(510deg)}
}

.time12{
	position: absolute;
    font-size: 240%;
    font-weight: bold;
    left: 0;
    right: 0;
    margin: auto;
    top: 6px;
}

.time3{
    position: absolute;
    top: calc(50% - 10px);
    right: 14px;
    font-size: 240%;
    font-weight: bold;
}

.time6{
    position: absolute;
    font-size: 240%;
    font-weight: bold;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 6px;
}

.time9{
    position: absolute;
    top: calc(50% - 10px);
    left: 14px;
    font-size: 240%;
    font-weight: bold;
}