@charset "utf-8";
.present h3{
	color:#777;
	border-bottom:3px solid #097;
	font-weight:normal;
	margin-bottom:1em;
}
.product-container {
	clear: both;
	position: relative;
	width: 770px;
}

.products.index {
	float: left;
	width: 540px;

}

.sidebar {
	float: right;
	width: 210px;
}

.cartbox {
	position: relative;
	margin: 10px 0;
	width: 210px;
	/*margin-top: 35px;*/
	background-color: #f0eae3;
	border:1px solid #9e6037;
	border-radius:6px;
}

.cartbox:after {
	display: block;
	clear: both;
	height: 0.01px;
	content: "";
}

.cartbox.floating {
	position: fixed;
	top: 0;
}

.cartbox.pinned-bottom {
	position: absolute;
	bottom: 0;
	_position: static;
}

.cartbox h3{
	margin: 0;
	padding: 5px;
	color: #ffffff;
	font-size: 1.0em;
	line-height: 1.3;
	text-align: center;
	border-radius:5px 5px 0 0 / 5px 5px 0 0 ;
	background:linear-gradient(180deg, #b5855d 5%, #734019 100%);
	background-color:#b87e4c;
	box-shadow:inset 0px 1px 0px 0px #c9a68f;
	}

.cartbox p {
	padding:10px;
	font-size: 0.9em;
}

.cartbox li{
	margin-bottom: 0;
	padding:5px 0 0 0;
	 font-size: 0.9em;
}

.products .standard {
	margin-bottom: 20px;
	border-bottom: 3px solid #068940;
}

.products .movie {
	position: relative;
	margin-bottom: 20px;
	border-bottom: 3px solid #068940;
}

.products .summercard {
	position: relative;
	background-color: #b3dcff;
	padding: 40px 30px 20px 30px;
	border-radius: 50px; /* CSS3 */
}

.products h5 {
	font-family: serif;
	font-size: 1em;
	margin: 0;
	display: inline-block;
	padding: 3px 10px;
	background-color: #9f031b;
	color: #fff;
}

/*
.item h4{
	width:540px;
	margin:0 0 10px 0;
	padding:0;
	height: 100px;
	text-indent: -9999px;
	background-image: url(../img/title_letter.png);
	background-repeat: no-repeat;
	background-color: transparent;
}

#letter01{ background-position: 0 0px; }
#letter02{ background-position: 0 -100px; }
#letter03{ background-position: 0 -200px; }
#letter04{ background-position: 0 -300px; }
#letter05{ background-position: 0 -400px; }
#letter06{ background-position: 0 -500px; }
*/
.item h4{
	/*
	text-indent: -9999px;
	*/
	text-align: left;
	font-size: 1.1em!important;
	width: auto;
	height: auto;
	margin: 0 10px 0 10px;
	padding:0;
	background-image: none;
}

#matomegai{
	display: block;
	margin: 0 0 10px 0;
	height: 50px;
	background-color: #008800;
	font-size: 1.5em;
	text-align: center;
}
.item{
	/* clear: both;
	position: relative; */
	display: flex;
	flex-direction: column;
	margin: 0 0 1em;
	border-bottom: 3px solid #097;
	/* border-radius: 0.4em; */
	background-color: #fff;
}
.item .explain{
	margin:10px;
	font-size:0.85em;
}

.item img{
	width:100%;
	height:auto;
	aspect-ratio: 1/1;
	background:#eee;
	margin-bottom: 15px;
}
.item a.detail{
	display:inline-block;
	background:#91d6d4;
	border:1px solid #7ba;
	border-radius: 1em;
	color:#2c4443;
	padding:0.2em 1em;
}


/*
.detail {float: left; width: 350px;margin:10px 0 10px 10px; }
*/
.detail {width: auto;margin: 0 0 10px 10px;}
.text{ margin-left: 10px; line-height: 1.5em; color:#000000;}

.select-letter{
	font-weight:bold;
	margin-bottom:1em;
}
.select-letter span{
	font-size:0.9em;
}

 .price_action{
	display: flex;
	justify-content: space-between;
 }
.actions{margin-right: 20px;}
.actions a{
	border: 0;
	border-radius: 3px; /* CSS3 */
	-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
	-moz-border-radius: 3px; /* Firefox用 */
 }

.price{
	margin-left: 10px;
	color: #2d18b7;
	font-size: 1.7em!important;
	font-weight: bold;
}
.price .yen{ font-size: 0.65em; }
.price .strike{ text-decoration: line-through; color: black; }
/*.summercard .price{
	font-size: 1.5em;
}*/

.detail a {
	/* float: left; */
	width: 160px;
	font-size:22px;
	font-weight:normal;
	text-align: center;
	border-radius:6px;
	border:1px solid  #00906f;
	padding:5px 0;
	text-decoration:none;
	background:linear-gradient(180deg, #00c69a 5%, #00906f 100%);

	background-color:#00906f;
	color:#ffffff;
	display:inline-block;
 	box-shadow:inset 0px 1px 0px 0px #91f2dd;
}
/*.detail a:hover {
	background:linear-gradient(180deg, #633707 5%, #b87e4c 100% );
	background-color:#633707;
}*/
.detail a:active {
	position:relative;
	top:1px;
}

.button-cart1, .button-cart2{ margin:0  auto 10px auto; text-align: center;}
.cartbox a{
	width: 130px;
	font-size:16px;
	font-weight:normal;
	color:#ffffff;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #d83526;
	padding:9px 18px;
	text-decoration:none;
	display:inline-block;
}

.button-cart1 a{ 
	border:1px solid #d83526;
	background:linear-gradient(180deg, #e04837 5%, #b30000 100% );
	background-color:#e04837;
 	box-shadow:inset 0px 1px 0px 0px #f29c93;
}.button-cart1 a:hover {
	background:linear-gradient(180deg, #b30000 5%, #e04837 100% );
	background-color:#b30000;
}.button-cart2 a:active {
	position:relative;
	top:1px;
}

.button-cart2 a{
	border:1px solid #337fed;
	background:linear-gradient(180deg, #4996ec 5%, #285aab 100% );
	background-color:#4996ec;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
}.button-cart2 a:hover {
	background:linear-gradient(180deg, #285aab 5%, #4996ec 100% );
	background-color:#285aab;
}.button-cart2 a:active {
	position:relative;
	top:1px;
}

.cartbox p.attention {
	display: none;
	background-color: #fff;
	border: 2px solid #AB0136;
	margin: 4px 10px;
	padding: .4em;
	font-size: 90%;
	color: #AB0136;
}


.item.disabled {
	background-color: #eee;
}
.item.disabled h4{
	color: #999;
}
.item.disabled .text{ color:#999;}
.item.disabled .actions a{
	border: 0;
	border-radius: 3px; /* CSS3 */
}
.item.disabled .price{
	color: #999;
}
.item.disabled .detail a {
	cursor: default;
	opacity:0.5;
	zoom:1;
}.item.disabled .detail a:hover {
	background:linear-gradient(180deg, #b87e4c 5%, #633707 100% );
	background-color:#b87e4c;
}.item.disabled .detail a:active {
	position: static;
	top: 0;
}


.cartbox.disabled a{
	cursor: default;
	opacity:0.5;
	zoom:1;
}

.disabled .button-cart1 a{ 
	opacity:0.5;
	zoom:1;
}.disabled .button-cart1 a:hover {
	background:linear-gradient(180deg, #d91600 5%, #b30000 100% );
	background-color:#d91600;
}.disabled .button-cart2 a:active {
	position: static;
	top: 0;
}

.disabled .button-cart2 a{
	opacity:0.5;
	zoom:1;
}.disabled .button-cart2 a:hover {
	background:linear-gradient(180deg, #3d94f6 5%, #1e62d0 100% );
	background-color:#3d94f6;
}.disabled .button-cart2 a:active {
	position: static;
	top: 0;
}

.cartbox.disabled div {
	color: #999;
}

.cartbox.disabled p.attention {
	display: block;
}

.movie .attention {
	margin-bottom: 20px;
	line-height: 1.4em;
	font-size: 110%;
	font-weight: bold;
	padding: 1em;
	background-color: #e1da97;
	border: 5px solid #fff;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	box-shadow: 3px 3px 6px 2px rgba(0,0,0,0.4);
}

.movie .attention a {
	font-size: 90%;
	margin: .2em 0;
	display: inline-block;
	color: #403ee2;
	text-decoration: underline;
	word-break: break-all;
}

.movie .attention a:hover {
	text-decoration: none;
}

.movie .attention span {
	font-size: 66%;
	line-height: 1.5em;
	font-weight: normal;
}

.movie-info {
	display: none;
	top: 450px;
	left: 109px;
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	line-height: 1.4em;
	color: #fff;
	font-size: 150%;
	font-weight: bold;
	padding: 1.5em;
	background-color: #d4043c;
	border: 5px solid #fff;
	border-radius: 40px;
	box-shadow: 3px 3px 6px 2px rgba(0,0,0,0.4);
}

.movie-info.enabled {
	display: block;
}

.summercard .movie-info {
	top: 880px;
}

.products-title {
	display: table;
	color: #fff;
	width: 100%;
	background-color: #875eb9;
}

.products-title.goods{
	background:#099d88;
}

.products-title div {
	padding: 5px 20px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.products-title div.title-body {
	font-size: 34px;
}
.letter-sample{
	background: url(../img/letter-sample.jpg) no-repeat;
	background-size:contain;
	width:770px;
	height:450px;
}

/*---------- popup ----------*/
.popup-background{
    /*position size*/
    position: fixed;
    z-index : 100;
    top : 0;
    left : 0;
    height : 100vh;
    width : 100vw;
    /*design*/
    background-color: gray;
    opacity : 0.5
}
.popup{
    /*position size*/
    --height : 90vh;
    --width : 80vw;
    z-index : 101;
    position: fixed;
    top : calc(50vh - calc(var(--height) / 2));
    left : calc(50vw - calc(var(--width) / 2));
    height : var(--height);
    width : var(--width);
    /*design*/
    overflow: scroll;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px gray;
}
.popup > .close-button{
    /*position size*/
    --size : 20px;
    position:absolute;
    top : calc(var(--size)/4);
    left : calc(var(--width) - var(--size) * 5/3);/*css variables are available in children*/
    height : var(--size);
    width : var(--size);
    /*design*/
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color : gray;
    font-size: var(--size);
    border-radius: calc(var(--size)/5);
}
.popup > .close-button:hover{
    /*design*/
    background-color: red;
    color : white;
}
.popup > .content{
    padding: 10px;
    /* text-align: center; */
}


/*hide popup*/
.popup-flag{
    display:none;
}
.popup-flag:not(:checked) + .popup-background{
    display:none;
}
.popup-flag:not(:checked) + * + .popup{
    display:none;
}

/*popup document*/
.goods_popup .images{display:flex;justify-content: space-evenly;flex-direction: row;flex-wrap: wrap;}
.goods_popup .images img{width:40%;margin:15px 0;}
.goods_popup h2{text-align: center;}
.goods_popup .lead{text-align:center;color:#fff;background:#c458c6;padding:1em;border-radius: 1em;margin: auto;max-width:800px;}
.goods_popup dl{margin:2em 3vw 1em;}
.goods_popup dt{margin-top:0.8em;font-weight:bold;}
.goods_popup dd{margin-inline-start:1.5em;}
.goods_popup .detail ul{list-style-type: none;color:#666;font-size: 0.9em;}
@media screen and (min-width: 600px) {
	.goods_popup .images img{width:20%;}
}
@media screen and (min-width: 1000px) {
	.popup{    --width : 70vw;}
}

/*---------- end popup ----------*/

@media screen and (min-width: 501px){
	.item{flex-direction: row;}
	.item img{width:200px;}
}