@charset "utf-8";

body{-webkit-text-size-adjust: 100%;margin: 0; font-family: "Meiryo", "Hiragino Kaku Gothic Pro W3", sans-serif; background-color: #fff;}

@media screen and (max-width:809.98px) {
header { width: 100%; background-image: linear-gradient(135deg, #e7eafe 0%, #DcDfFF 17%,#F1EEFF 40%, #EfF7Fa 60%, #E8E8FF 80%, #ffcffb 100%); position: relative; height: 82px; line-height: 20px;}
h1 {margin:0 0 0 0px; padding-top: 5px; line-height: 20px; color: #6590DB; font-size: 17px;}
.logo { position: absolute; top: 3px; left: 2px; display: inline-block; width: 62px; z-index: 998;}
.logo img { width: 100%;}
header div { padding: 3px 0 0 70px;}
header h2 { margin: 0; font-size: 18px; color: #6BAEF5; font-weight: bold;}
header h3 { margin: 0; font-size: 16px; color: #fff;text-shadow: 2px 2px 4px rgba(0,0,70,0.3); font-weight: bold; line-height: 20px;}
header h3 span { display: inline-block; font-size: 16px; margin: 0 0 0 18px; color: #F0F9FF; text-shadow: 0 0 2px rgba(30,50,100,0.95),1px 2px 3px rgba(0,0,0,0.3);}
header p {margin: 0 0 0 -60px; padding: 10px 0 0 0; color: #FF5190; font-weight: bold;}

#open-menu,#close-menu { line-height: 28px; width: 28px; padding: 01px 4px; border: 1px solid #99B2FF;position: absolute;top: 5px;right:7px;font-size: 20px;z-index: 1000; color: #6282D1; background:rgba(255,255,255,0.8);}
#close-menu { display: none; background: white; color: #62A0D1;}
#open-menu span,#close-menu span {display: block; width: 100%; margin: 3px 0; border-bottom: 4px solid #35A3FC;}
#open-menu span:active { border-color: #FB5BA0;}
#link-menu { display: none; position: absolute;top: 74px;left:0;z-index: 2000;}
#link-menu {
animation: fadeInmenu 0.5s ease 0s 1 normal;
}
@keyframes fadeInmenu {
    0% { left:-100px;}
    100% { left:0;}
}
nav { display: none; margin: 0; width: 100%; position: absolute; top: 72px; left: 2px; background: #2E5BD1; z-index: 999;}
nav ul { display: block; list-style: none; margin:0; padding: 20px 0;}
nav ul li a { display: block; margin: 0; padding: 8px 10px; font-size: 15px; color: #fff;}

#goods { padding: 25px 10px 0 10px;}
#goods h2 { margin: 0; padding: 0; color: #FF5E95; font-size: 22px; letter-spacing: 1px; line-height: 22px; }
#goods p { margin: 3px 0 0 0;}

main { margin: 10px 0; padding: 0;}
article { margin: 0 10px;}

.item { margin: 0 10px;}
.item h3 { margin: 0; color:#7AC0EA;}

.price { font-size: 17px; margin: 0 10px;}
.price span { display:inline-block; margin: 0;}
.price p { display: inline-block; font-size: 15px; margin: 0;}

#pic{text-align: center; background-image: linear-gradient(180deg, #5187E6 0%, #fff 55%, #D6E4FF 100%); margin: 5px 0 0 0; padding:5px 0; height:250px;}
#pic img{height:100%;}

.lb { margin: 0 10px;}
.lb a { position: relative;}
.thum { width: 85px; margin: 10px 2px 0 0; padding: 3px; background: #fff; border: #8DB0FF 1px solid;}
.thum:hover { background: #E2E6FF;}
.plus { position: absolute;bottom: 13px; left: 7px; width: 12px; height: 12px; border: 1px solid grey;}

#char h2 { margin: 10px 0; color: #4265A5; font-size: 20px; line-height: 22px;}
#char section { margin: 0;}
#char section h3 { margin: 0; color:#7AC0EA;}
#char section p { margin: 0;}
#char section p span { display: inline-block; margin:0 5px 5px 0; padding: 3px 4px 2px 4px; background-image: linear-gradient(135deg, #EEF4FF 0%, #F8EEFF 100%);}

.buybutton1 { padding: 10px 20px; font-size: 21px; border: 1px solid #AD210D; background: #E10023; color: #FFF; border-radius: 7px; box-shadow: 2px 2px 10px -3px rgba(0,0,0,0.5), 3px 3px 8px rgba(255,255,255,0.9) inset; margin: 8px 10px 12px 10px; cursor: pointer; transition: .4s;}
.buybutton1:active{ box-shadow:inset -2px -2px 3px rgba(255, 255, 255, .4), inset 2px 2px 3px rgba(0, 0, 0, .4);}
.buybutton1:hover{ margin: 10px 10px 10px 10px; background-color: #FF5D00;}

#utility { margin: 3px 10px;}
#utility h3 { margin: 0; color:#7AC0EA;}
#utility p { margin: 0;}
#utility p span { display: block; font-size: 15px; line-height: 18px;}

.note { margin: 0 0 15px 0; padding: 10px; border-bottom:1px solid grey;}
.note a { display: inline-block; font-size: 15px;}
footer { display: block; margin: 10px; font-size: 14px;}

}
/*-------------*/
@media screen and (min-width:810px) {

header { position: relative; margin: 0; width: 90%; padding: 0 5%; background-image: linear-gradient(135deg, #e7eafe 0%, #DcDfFF 17%,#F1EEFF 40%, #EfF7Fa 60%, #E8E8FF 80%, #ffcffb 100%); height: 100px; min-width: 1000px;}
h1 {margin:0; line-height: 20px; color: #6590DB; font-size: 18px;}
.logo { position: absolute; top: 6px; left: 5%; display: inline-block; width: 82px; z-index: 998;}
.logo img { width: 100%;}
header div { margin: 0 0 0 100px;}
header h2 { margin: 0; padding: 9px 0 0 0; font-size: 22px; color: #6BAEF5; font-weight: bold;}
header h3 { margin: 0; padding: 0px 0 0 0; font-size: 15px; color: #fff;text-shadow: 2px 2px 4px rgba(0,0,70,0.3); font-weight: bold; line-height: 20px; margin-top:-8px;}
header h3 span { display: inline-block; font-size: 18px; margin: 0 0 0 18px; color: #F0F9FF; text-shadow: 0 0 2px rgba(30,50,100,0.95),1px 2px 3px rgba(0,0,0,0.3);}
header p {margin: 0; padding: 5px 0 0 0; color: #3EB359; font-weight: bold;}
#open-menu,#close-menu { display: none;}
nav { margin: 0; position: absolute; top: 44px; left: 550px;}
nav ul { display: flex; list-style: none; margin:0; padding: 0;}
nav ul li a { display: inline-block; margin: 0 20px 0 0; font-size: 15px; color: #238FA1;}

#goods { width:90%; padding: 17px 5% 0 5%;}
#goods h2 { margin: 0; padding: 0; color: #FF5E95; font-size: 22px; letter-spacing: 1px; line-height: 22px; }
#goods p { margin: 4px 0 0 0;}


main { display: flex; box-sizing: content-box; width:90%; padding: 12px 5%;}
#leftside { width: 38%; position: relative;}
#rightside { width: 62%; position: relative;}

.item { margin: 0;}
.item h3 { margin: 8px 0 0 0; padding: 0 8px; color:#4490F1;}

.price { position: absolute; left: 100%; top: 0;font-size: 18px; width: 100%; padding: 2px 0 0 20px;}
.price span { display:inline-block; margin: 0 20px 0 45px;}
.price p { font-size: 16px; margin: 4px 0 0 45px;}

#pic{text-align: center; background-image: linear-gradient(180deg, #fff 0%, #fff 55%, #D6E4FF 100%); margin: 0; padding:15px 0;
 background-image: linear-gradient(180deg, #C4D6FC 0%, #F4F9FC 45%, #F0F5FC 68.9%, #B3C8FC 69%, #467CD4 81%, #000093 100%);}
#pic img{max-width:120px;width:100%;}

.lb { position: absolute; left: -61.3%; top:445px; width:67%;}
.lb a { position: relative;}
.thum { width: 27%; max-width: 140px; margin: 20px 1% 0 0; padding: 4px; background: #fff; border: #8DB0FF 1px solid;}
.thum:hover { background: #E2E6FF;}
.plus { position: absolute;bottom: 15px; left: 9px; width: 14px; height: 14px; border: 1px solid #444; border-radius:8px;}

#char { width: 100%; margin: 75px 0 0 0; padding: 0;}
#char h2 { margin: 0 0 10px 45px; font-size: 20px; color: #23A361; padding-left: 20px;}
#char section span { display: inline-block; margin:0 15px 12px 0; padding: 3px 10px 2px 10px;
background-image: linear-gradient(135deg, #EEF4FF 0%, #F8EEFF 100%);}
#char section span::before {content: "■"; margin: 0 7px 0 0;}

.buybutton1 { padding: 20px 40px; font-size: 20px; border: 1px solid #AD210D; background: #E10023; color: #FFF; border-radius: 7px; box-shadow: 2px 2px 10px -3px rgba(0,0,0,0.5), 3px 3px 8px rgba(255,255,255,0.9) inset; margin: 12px 0 40px 45px; cursor: pointer; transition: .4s;}
.buybutton1:active{ box-shadow:inset -2px -2px 3px rgba(255, 255, 255, .4), inset 2px 2px 3px rgba(0, 0, 0, .4);}
.buybutton1:hover{ margin: 14px 0 38px 45px; background-color: #FF5D00;}

section { margin: 0 20px 20px 45px; font-size: 15px; line-height: 23px;}
section h3 { display: block; margin: 0; padding: 10px 20px 7px 20px; color: #E25B27; font-size: 16px; background-image: linear-gradient(180deg, #F3F5FF 0%, transparent 100%); border-width: 1px 1px 0 1px; border-color:#EEF0FF; border-style: solid;}	
section p { margin: 0 0 21px 0; padding: 0 20px 12px 20px;border-width:  0 1px 1px 1px; border-color:#EEF0FF; border-style: solid;}
section p span { display: block; font-size: 13px; line-height: 20px;}

/* CSS Document */
#information{ list-style: none; margin:0 0 4px 5%;padding:0;display: block;width: 35.5%;font-size: 13px;}
#information li{display: list-item; margin: 1px 0; padding: 0;	background:#EEF0FF;}
#information li span{display: inline-block;	width: 110px;background:#f3f3f3;color:#555;padding: 2px 3px 1px 5px;margin: 0 20px 0 0;}

.note { margin: 20px 0 0 5%; padding-top: 15px; border-top: 1px solid #aaa;}
.note a { display: inline-block; font-size: 14px; color:#4C7AAB;}
.note a:hover { color: deeppink;}
footer{
	margin:15px 0;
	text-align: center;
	font-size: 14px;
}

}