@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; }