@charset "UTF-8";

body {
	margin			: 0;
	padding			: 0;
	color			: #383631;
	background-image	: url("images/bgpaper.jpg");
	background-repeat	: repeat;
	background-color	: #FFE2C0;
	font			: normal 16px/24px sans-serif;
	text-align		: center;
}
div.page {
	position	: relative;
	width		: 800px;
	margin		: 0 auto;
	border-width	: 0 2px;
	border-style	: solid;
	text-align	: left;
}


/* MAIN */
div.main, div.nomenu, div.sidebar {
	color			: #383631;
	background-image	: url("images/whpaper.jpg");
	background-repeat	: repeat;
	background-color	: #FFF9F1;
}
div.main {
	position	: relative;
	left		: 0;
	top		: 0;
	width		: 610px;
	padding		: 10px 0;
	margin		: 0 0 0 190px;
}
div.nomenu {
	padding	: 10px 0;
	width	: 800px;
}
div.dialog {
	margin	: 0 20%;
}

/* SIDEBAR */
div.sidebar {
	position		: absolute;
	left			: 0;
	top			: 156px;
	width			: 180px;
	padding			: 10px 0;
}
div.sidebar img {
	margin		: 0;
	padding		: 0;
}
div.sidebar p {
	margin		: 0 0 10px 0;
	padding		: 0 3px;

	text-align	: left;
}
div.menu {
	margin		: 0 0 5px 0;
	border-style	: solid;
	border-width	: 1px 0 0 0;
}
div.menu p {
	margin		: 0;
	padding		: 0;
	line-height	: 12px;
	border-style	: solid;
	border-width	: 0 0 1px 0;
}
div.sponsor p {
	margin		: 3px 0;
	padding		: 0;
	text-align	: center;
}
dl.menu {
	margin	: 0 0 5px 0;
	padding	: 0;
}
dl.menu dt {
	text-align	: left;
	margin		: 0;
	padding		: 0 5px;
	border-style	: none;
	border-width	: 0;
}
dl.menu dd {
	text-align	: left;
	margin		: 0 0 5px 0;
	padding		: 0;
}
dl.menu ul, ul.menu {
	list-style-type		: none;
	list-style-position	: outside;
	margin			: 0;
	padding			: 0 0 0 1em;
	border-style		: none;
	border-width		: 0;
}

/* BEGIN IMAGE */
img {
	margin		: 3px 10px 10px 10px;
	border-style	: none;
}
img.nomargin, h1 img, h2 img, h3 img {
	margin	: 0;
}


/* Blocks */
p {
	margin		: 5px 15px 10px 15px;
	padding		: 0;
	text-align	: justify;
}
.center {
	text-align	: center;
}
.left {
	text-align	: left;
}
.right {
	text-align	: right;
}
.floatleft {
	float	: left;
}
.floatright {
	float	: right;
}
.clearleft {
	clear	: left;
}
.clearright {
	clear	: right;
}
.clearboth {
	clear	: both;
}
.noclear {
	clear	: none;
}

/* LIST */
ul {
	margin		: 10px 15px;
	padding		: 0 0 0 20px;
	list-style	: disc inside;
}
li {
	margin	: 5px 0 0 0;
	padding	: 0;
}

/* COPY */
div.copy {
	position	: relative;
	bottom		: 0;
	width		: 100%;
	height		: 50px;
	margin		: 30px 0 0 0;
	padding		: 0 0 1em 0;

	font-size	: 12px;
}
div.copy p {
	clear		: none;
	text-align	: center;
	line-height	: 1.2em;
}

/* TABLE */
table {
	margin		: 0 5px 10px 5px;
	empty-cells	: show;
	border-style	: none;
	border-width	: 0;
	border-collapse	: separate;
	border-spacing	: 0;
}
th, td {
	margin		: 0;
	padding		: 2px;
	border-style	: none;
}
th {
	text-align	: center;
}

table.radio {
	margin		: 10px auto;
	empty-cells	: show;
	border-style	: solid;
	border-width	: 1px;
	border-collapse	: separate;
	border-spacing	: 1px;
}
table.radio th, table.radio td {
	margin		: 0;
	padding		: 5px;
	border-style	: solid;
	border-width	: 1px;
}
table.radio th {
	text-align	: center;
}

/* LINK */
a[name] {
	text-decoration	: none;
}
a[name]:hover {
	color		: inherit;
	background	: transparent;
}
a:link {
	color		: #00f;
	text-decoration	: underline;
}
a:visited {
	color		: #909;
}
a:active, a:hover, a:focus {
	color		: #e00;
}
a:link img, a:visited img {
	border-color	: #003;
}
a:active img, a:hover img, a:focus img {
	border-color	: #e00;
	filter		: contrast(50%);
}
img.eventleft, img.eventright {
	border-color	: #000;
}

/* INLINE */
strong {
	color		: #e00;
	font-weight	: bold;
}
em {
	color		: #e00;
	font-style	: normal;
}
.huge {
	font-size	: 28px;
	line-height	: 100%;
	font-weight	: bold;
}
.verybig {
	font-size	: 22px;
	font-weight	: bold;
}
.big {
	font-size	: 18px;
	font-weight	: bold;
}
.small {
	font-size	: 12px;
	line-height	: 150%;
}

/* Begin of lists */
dl {
	margin	: 0 5px 10px 5px;
}
dt {
	font-weight	: bold;
}
dd {
	margin	: 0 0 5px 20px;
}
.event a, .event span {
	border-color	: #fff;
	color		: #fff;
}
dl.link {
	padding	: 0;
}
dl.link dt {
	margin		: 3px 0;
	padding		: 3px 0;
	border-width	: 1px 0 0 0;
	border-style	: solid;
}
dl.link dd {
	margin	: 0;
	padding	: 0;
}
dl.link img {
	margin	: 0;
}
/* End of lists */

div.dialog {
	background-color	: #fee;
}
p.next, p.back, p.confirm {
	padding	: 3px 5px;
}
.next {
	background-color	: #fa6;
}
.back {
	background-color	: #9f9;
}
.confirm {
	background-color	: #ff6;
}
div.login {
	border			: 1px solid;
	margin			: 0 auto;
	width			: 18em;
	background-color	: #fa6;
}
div.login p {
	margin		: 5px;
	text-align	: center;
}

h1, h2, h3 {
	margin			: 10px 0 8px 0;
	padding			: 0;
	color			: #fff;
	background-color	: #FF692E;
	text-align		: center;
}
h4, h5 {
	margin		: 0 10px;
	padding		: 0;
	text-align	: left;
	color		: #aa0000;
	background	: transparent;
}

/* FONT */
h1 {
	height			: 146px;
	width			: 800px;
	background-image	: url("images/titleback.gif");
	background-repeat	: repeat-x;
	font-family		: sans-serif;
	font-style		: italic;
	font-weight		: normal;
	font-size		: 20px;
	line-height		: 20px;
	vertical-align		: bottom;
}
h1.southbay {
	background-image	: url("images/titleback_sbi.png");
	background-repeat	: repeat-x;
}
h2, h3, h4, h5 {
	font-family	: sans-serif;
	font-weight	: bold;
}
h2 {
	height		: 50px;
	font-size	: 30px;
	line-height	: 55px;
    padding		    : 0px 0 0 0;
	background-image	: url("images/h2.gif");
	background-repeat	: repeat-x;
}
h2.southbay {
	background-image	: url("images/h2_sbi.png");
	background-repeat	: repeat-x;
    font-family: "cooper-black-std", serif;
    font-weight: 400;
    font-style: normal;
	line-height	: 52px;
}
h3 {
	height		: 40px;
	font-size	: 24px;
	line-height	: 44px;
	background-image	: url("images/h3.gif");
	background-repeat	: repeat-x;
}
h3.southbay {
	background-image	: url("images/h3_sbi.png");
	background-repeat	: repeat-x;
}
h4 {
	font-size	: 26px;
	line-height	: 120%;
}
h5 {
	font-size	: 20px;
	line-height	: 100%;
}
div.sidebar h2 {
	height		: 30px;
	font-size	: 16px;
	line-height	: 28px;
	margin		: 0 0 5px 0;
	background-image	: url("images/sidehead.gif");
	background-repeat	: repeat-x;
}
div.sidebar h2.southbay {
	background-image	: url("images/sidehead_sbi.png");
	background-repeat	: repeat-x;
}


/* Thumb */

div.boxparent{
	width:100%;
	height:auto;
	display:flex;
	flex-wrap: wrap;
/* 	justify-content:space-between; */
	box-sizing:border-box;
}
div.item {
	height		: auto;
	border		: 1px solid #ccc;
	width		: 282px;
	margin		: 0 5px 5px 5px;
	padding		: 0;
	border-width	: 1px;
	border-style	: solid;
	border-color	: #e2c0a4;

	font-size	: 16px;
	line-height	: 1.2em;
	text-align	: center;
}

div.thumb {
	height : 180px;
	width : 270px;
	margin : 5px auto;
	padding : 0;
}
div.goodsthumb {
	height : 100px;
	width : 270px;
	margin : 5px auto;
	padding : 0;
}
div.goodsthumb a:hover {
  filter: contrast(50%);
}

div.walitem {
	height		: auto;
	border		: 1px solid #ccc;
	width		: 195px;
	margin		: 0 0 5px 5px;
	padding		: 0;
	border-width	: 1px;
	border-style	: solid;
	border-color	: #e2c0a4;
    background-color:#fff;
}
div.walthumb {
	margin		: 5px 0 0 0;
	padding		: 0;
}
div.walthumb img {
    display: block;
    width  : 180px;
    height : 180px;
	margin : 0 auto;
	padding : 0;
    object-fit: contain;
    filter: contrast(100%);
}
div.walitem:hover {
  filter: contrast(75%);
}
div.walitem p {
	margin : 0 5px 5px 5px;
	padding : 0;

	font-size : 14px;
	line-height : 1.5em;
	text-align : left;
    font-weight: bold;
}
div.walitem a {
    text-decoration-line: none;
}

span.itemimg {
/*	line-height : 200px; */
	vertical-align : 0%;
}
span.itemimg img {
	display : inline;
	margin : 0;
}
div.item p.descript {
	font-size : 14px;
	line-height : 1.2em;
	text-align : left;
	width : 270px;
	margin : 0 auto 5px auto;
	padding : 0;
}

div.item h4 {
	border-width : 0;
	margin : 0;
	padding : 0;

	font-size : 16px;
	font-weight : bold;
	line-height : 1.5em;
	text-align : center;
}
div.item p {
	margin : 0;
	padding : 0;

	font-size : 16px;
	line-height : 1.5em;
	text-align : center;
}
div.item p.stat {
	height : 1.5em;
}
div.item p.itemno {
	font-size : 14px;
	line-height : 1.5em;
}
div.item p.price {
	font-weight : bold;
}

/* CONTENTS */
ul.contentsnavi, ul.issuenavi {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin:0 8px;
    padding: 3px 0;
    background-color:#fff;
}
ul.contentsnavi li, ul.issuenavi li {
    margin:0;
    padding:0;
}
ul.contentsnavi li a, ul.contentsnavi li span {
    display:block;
    width:132px;
    margin:3px;
    padding:3px;
    border-radius:5px;
    color:#ffffff;
    background-color:#006699;
    text-align:center;
    text-decoration: none;
    font-weight:bold;
}
ul.contentsnavi li a:hover, ul.contentsnavi li span {
    background-color:#AA0000;
}
ul.issuenavi li a {
    display:block;
    width:84px;
    margin:3px;
    padding:3px;
    border-radius:5px;
    color:#ffffff;
    background-color:#006699;
    text-align:center;
    text-decoration: none;
    font-weight:bold;
}
ul.issuenavi li a:hover {
    background-color:#AA0000;
}

div.contents {
    margin: 8px;
    padding: 0;
    font-size:0.8em;
    border-style:solid;
    border-color:#999;
    border-width: 2px;
    background-color:#fff;
}
div.contents div.floatleft img {
    margin: 10px 20px 0 10px;
    border-style:solid;
    border-color:#999;
    border-width: 1px;
}
div.contents h4 {
    margin: 0 0 10px 0;
    padding: 5px 0;
    line-height:1.5em;
    color:#FFFFFF;
    background-color:#EE6600;
}
div.contents ul {
    list-style: none;
    margin: 5px 10px 10px 10px;
    padding:0;
    border-style:solid;
    border-color:#999;
    border-width: 1px 0 0 0;
}
div.contents ul li ul {
    margin: 0 0 0 30px;
    padding:0;
    border-width: 0;
}

div.contents ul li {
    border-style:solid;
    border-color:#999;
    border-width: 0 0 1px 0;
}
div.contents ul li ul li {
    border-width: 0;
}




/* Lightbox JS */
#lightbox{
	color			: #000;
	background-color	: #eee;
	padding			: 10px 5px 5px 5px;
	border-bottom		: 2px solid #666;
	border-right		: 2px solid #666;
}
#lightboxDetails{
	font-size	: 12px;
	padding		: 10px 5px 5px 5px;
}	
#lightboxCaption{
	float	: left;
}
#keyboardMsg{
	float	: right;
}
#closeButton{
	top	: 5px;
	right	: 0px;
}

#lightbox img{
	border	: none;
	margin	: 0;
	clear	: both;
}

#overlay img{
	border	: none;
}

#overlay{
	background-image	: url("./images/overlay.png");
}

* html #overlay {
	background-color	: #333;
	background-color	: transparent;
	background-image	: url("./images/blank.gif");
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/overlay.png", sizingMethod="scale");
}
kbd {
	font-weight	: bold;
	padding		: 0 3px;
	border-width	: 1px;
	border-style	: solid;
	border-color	: #fff #666 #666 #fff;
}


.cp_box1 {
  position: relative;
}
.cp_box1 input {
  display: none;
}
/*開くためのボタンとテキストを隠すグラデーションの設定*/
.cp_box1 label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  bottom: 0px;
  width: 100%;
  height: 140px; /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
  background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
/* 開いた時にグラデーションを消す */
.cp_box1 input:checked + label {
  background: inherit;
}
.cp_box1 input:checked + label {
  /* display: none ; 閉じるボタンを消す場合コメントアウトを外す */
}
.cp_box1 .cp_container {
  overflow: hidden;
  height: 100px; /* 開く前に見えている部分の高さ */
  transition: all 0.5s;
}
/*続きをよむボタン*/
.cp_box1 label:after,
.cp_box1 label::before {
  content: '';
  position: absolute;
  line-height: 2.5rem;
}
.cp_box1 label:after {
  z-index: 2;
  bottom: 20px;
  width: 13em;
  content: '続きをよむ';
  color: #ffffff;
  background: #1b2538;
  border-radius: 20px;
}
.cp_box1 label::before {
  position: absolute;
  bottom: 38px;
  left: calc(50% - 3.5em);
  z-index: 3;
  width: 10px;
  height: 5px;
  background: #ffffff;
  clip-path: polygon(50% 100%, 0 0, 100% 0)
}
/*閉じるボタン*/
.cp_box1 input:checked + label:after {
  content: '閉じる';
}
.cp_box1 input:checked + label:before {
  left: calc(50% - 2.5em);
  transform: scale(1, -1);
}
.cp_box1 input:checked ~ .cp_container {
  height: auto;
  padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
  transition: all 0.5s;
}