@charset "utf-8";
/*---------------------------------------------------------
Theme Name: 広島かき沖縄もずく 占部水産
Theme URI: http://www.urabesuisan.co.jp/netshop/
Description: 広島名産の牡蠣と沖縄もずくを中心に、加工食品や冷凍食品など、良質の素材を活かした美味しい商品づくりに取り組んでいます。
Author: 占部水産
version: 1.0
---------------------------------------------------------*/
@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);
/* ================================================
   初期化設定
================================================ */

html, body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea,
p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

address, caption, cite, code, dfn, th, var {
    font-style: normal;
    font-weight: normal;
}

caption, th {
    text-align: left;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img, abbr, acronym, fieldset {
    border: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}

img {
    vertical-align: top;
}

a {
    outline: none;
}

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.1.1
build: 47
*/
body{font:14px/1.5 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}


/* ================================================
   全体の構造設定
================================================ */

body {
line-height: 1.5;
background: #8e585e;
color: #151515;
font-family: 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
background: url(images/bg1.jpg) 0 0 #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}

a       { color: #151515; text-decoration: none; }
a:hover { color: #0069b7; text-decoration: underline; }

/* ラッパー
------------------------------------------------ */
div#wrapper {
background: url(images/line1.png) repeat-x top 0 ;
}
div#wrapper img {
max-width:100%;
height:auto;
}

/* ヘッダー
------------------------------------------------ */
div#header {
width: 100%;
background: #fff;
}
.logo {
position:absolute;
top:18px;
width:239px;
}
.htxt {
position:absolute;
top:45px;
left:264px;
}
div#header div.headerinr {
position: relative;
margin: 0 auto;
padding: 0 0 5px 0;
background: #fff;
width: 980px;
}
.header-l {
position:relative;
float:left;
width:400px;
height:95px;
}
.header-r {
position:relative;
float:right;
width:560px;
}
.hmenu ul li {
float:left;
width:25%;
text-align:center;
margin:0 auto;
}
.hmenu ul li a {
display:block;
padding:5px;
}

/* グローバルナビ
------------------------------------------------ */
div#navwrap {
width: 100%;
background: url(images/line1.png) repeat-x 0 top #fff;
}
div#navwrap div.navwrapinrbg {
background: url(images/line2.jpg) repeat-x 0 bottom;
min-width:980px;
}
div#navwrap div.navwrapinr {
min-width:980px;
margin:0 auto;

}
#gnavi {
font-size: 15px;
padding:0 0 6px 0;
width:980px;
margin:0 auto;
position:relative;
font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
#gnavi li{
float: left;
}
#gnavi li a{
display:block;
padding:20px 24px 16px 24px;
}
#gnavi li a:hover {
background-color:#efefef;
text-decoration:none;
}
.hmenu {
position: absolute;
top: 0;
right: 0;
}
.haiso {
position:absolute;
right:0;
top:50px;
width: 345px;
}
.hcard {
position:absolute;
right: 354px;
top: 51px;
}

/* スライド
------------------------------------------------ */
#visual {
position:relative;
background: url(images/slide_bg1.jpg) no-repeat center center #c6ecf8;
height:460px;
}
.wave {
background: url(images/slide_bg2.png) repeat-x bottom center;
position:absolute;
bottom:-10px;
z-index:1000 !important;
width:100%;
height:118px;
z-index:1000;
text-align: center;
margin: 0 auto;
}
.visualinr2 {
/*width:980px;*/
margin:0 auto;
position:static;
z-index:1000;
}
.visualinr2 ul {
position:static;
z-index:-10;
}

/* コンテンツヘッダー
------------------------------------------------ */
div#contentsHeader {
    width: 100%;
    height: 119px;
    background: url(img/contents_header_bg.png) repeat-x 0 0;
}

/* TOP */
body.top div#contentsHeader div.contentsHeaderInner {}

/* NEXT */
body.next div#contentsHeader div.contentsHeaderInner {}


/* コンテンツ
------------------------------------------------ */
div#topcontents {
    margin: 0 auto;
    width: 100%;
}
div#contents {
    margin: 0 auto;
    width: 980px;
    padding: 0 0 20px 0;
}
div#contents div.contentsInner {}


/* ぱんくずリスト
------------------------------------------------ */
.pan {
width:980px;
margin:20px auto;
}

#breadcrumb div {
float:left;
color:#898989;
}
#breadcrumb div a {
padding:0 5px ;
color:#898989;
}

/* メイン
------------------------------------------------ */
div#topmain {
width: 100%;
min-height: 600px;
}

div#main {
float: left;
width: 740px;
min-height: 600px;
}

div#main p {
margin-bottom:20px;
line-height:1.5;
}

#main.page a {
color:#0069b7;
}

/* 左カラム
------------------------------------------------ */
div#leftColum {
float: right;
width: 210px;
}
.sidearea {
margin-bottom:20px;
}
.sidebnr {
margin-bottom:20px;
}
.sidebnr ul li{
background:none;
}
.siderank ul li {
border-bottom:1px dotted #ccc;
padding:15px 0;
}
.siderank {
margin-bottom:20px;
}
.siderank h2 {
background: url(images/side_rank_bg.png) no-repeat bottom center ;
padding: 10px 0;
}

.side_rank-l {
position:relative;
float:left;
width:90px;
}
.side_rank-r {
float:right;
margin-left:10px;
width:110px;
}
.side_rank-l span {
position:absolute;
top:-5px;
left:5px;
width:25px;
}
.sidearea ul.list {
padding:0 10px;
}
.sidearea ul li {
border-bottom:1px dotted #ccc;
}
.sidearea ul li a {
display:block;
background: url(images/b_arw.png) no-repeat center left ;
padding: 10px 0 10px 20px;
}
.sidearea h2 {
background: url(images/side_h_ttl.png) no-repeat center center ;
background-size:210px;
line-height:50px;
color:#fff;
font-size:16px;
}
.sidearea h2 span {
padding: 10px 0 10px 50px;
}
.side_kaki_bg {
background: url(images/side_kaki_bg.png) no-repeat 10px center;
background-size:30px;
}
.side_gift_bg {
background: url(images/side_gift_bg.png) no-repeat 10px center;
background-size:30px;
}
.side_mozuku_bg {
background: url(images/side_mozuku_bg.png) no-repeat 10px center;
background-size:30px;
}
.side_info_bg {
background: url(images/side_info_bg.png) no-repeat 20px center;
background-size:20px;
}
.side_eigyo_bg {
background: url(images/side_eigyo_bg.png) no-repeat 20px center;
background-size:26px;
}


/* フッター
------------------------------------------------ */
div#footer {
background: url(images/f_bg1.png) repeat-x top center #fff;
width: 100%;
}
div#footer div.footerInner {
position: relative;
margin: 0 auto;
padding: 70px 0 0 0;
width: 980px;
}
.footerInner a {
color:#fff;
}

.fmenu-l {
float:left;
width:40%;
color:#fff;
}
.fmenu-r {
float:left;
width:60%;
}
.fmenu-r ul li{
float:left;
width:33.33%;
padding: 5px 0;
}
.fmenu-r ul li a {
background: url(images/w_arw.png) no-repeat center left;
padding: 0 0 0 20px;
color:#fff;
}
.copyright {
margin: 0 auto;
padding: 10px 0 30px 0;
width: 980px;
color:#fff;
font-size:12px;
}

/* 見出し
------------------------------------------------ */
#topmain h2 {
text-align:center;
}
#main h1 {
margin: 0 0 30px 0;
padding: 10px 0 20px 0;
}
.page h1 {
font-size:24px;
margin: 0 ;
padding: 10px 0 ;
background: url(images/f_line_bg1.png) repeat-x 0 bottom ;
}
.page .product h1 {
font-size:24px;
margin: 0 0 20px 0 !important;
padding: 10px 0  !important;
background: none;
}
#main h2 {
font-size:18px;
margin: 20px 0;
padding: 5px 15px;
border-left:5px solid #1071BA;
background: url(images/line1.png) repeat-x 0 bottom ;
font-weight:bold;
}
#main h3 {
font-size:15px;
padding: 10px 0;
font-weight:bold;
margin: 0 0 10px 0;
}
.f_reco h2 {
font-size:24px;
margin: 0 0 20px 0;
padding: 10px 0 ;
background: url(images/line1.png) repeat-x 0 bottom ;
text-align:center;
}

/* トップ
------------------------------------------------ */
.treco {
padding:25px 0 40px 0;
width:980px;
margin:0 auto;
}
.treco ul li {
float:left;
width:33.33%;
margin:20px 0 0 0 ;
}
.tabout {
background:#fff;
width:100%;
}
.taboutinr {
width:980px;
margin:0 auto;
padding:40px 0 50px 0;
}
.tabout-l {
float:right;
width:30%;
text-align:right;
background: url(images/t_about_bg1.png) no-repeat bottom center #fff;
min-height:500px;
}
.tabout-r {
float:left;
width:68%;
text-align:center;
min-height:500px;
}

.trank {
background: url(images/bg2.jpg) repeat center center;
}
.trankinr {
width:980px;
margin:0 auto;
padding:40px 0;
}
.trank-l {
float:left;
width:80px;
}
.trank-r {
float:right;
width:900px;
}
.trank-r div {
margin: 15px 0 0 0;
}
.trank-r ul {
margin-left:-15px;
margin-top:30px;
}
.trank-r ul li{
float:left;
width:168px;
margin-left:15px;
position:relative;
}
.trank-r ul li span {
position:absolute;
top: -20px;
left: 60px;
}
.tinfo {
background: url(images/bg1.jpg) 0 0 #fff;
}
.tinfo h2 {
padding:20px 0;
margin:0 0 20px 0;
background: url(images/line1.png) repeat-x 0 bottom;
text-align:left !important;
}
.tinfoinr {
width:980px;
margin:0 auto;
padding:30px 0 50px 0;
}
ul.tinfo-1 {
margin-left:-25px;
}
ul.tinfo-1 li {
float:left;
width:360px;
margin-left:25px;
min-height:200px;
}
.tinfo-1 dl dt {
padding:20px 0 0 0;
}
.tinfo-1 dl dd {
border-bottom:1px dotted #ccc;
padding:0 0 20px 0;
}
.tinfoli {
width:210px !important;
}


/* 共通ガイド
------------------------------------------------ */
.fguide {
background: url(images/f_bg2.jpg) repeat-x 0 top #fff;
}
.fguide-l {
float:left;
width:48%;
}
.fguide-r {
float:right;
width:48%;
}
.fguideinr {
width:980px;
margin:0 auto;
padding:80px 0 50px 0;
position:relative;;
}
.fguide h2 {
position:relative;
padding:20px 0;
background: url(images/f_line_bg1.png) repeat-x 0 bottom;
text-align:left !important;
}
.fguide h3 {
padding: 10px 0;
color:#014b84;
font-weight:bold;
margin: 10px 0 0 0;
position:relative;
padding:20px 0 10px 0;
}

/* ページの先頭へ戻る */
div#goTop {
position: fixed;
bottom: 20px;
right: 20px;
}
div#goTop a {
animation: vertical 2s ease-in-out infinite alternate;
}
@keyframes horizontal {
    0% { transform:translateX( -0px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-5px); }
  100% { transform:translateY(  0px); }
}


/* 商品ページ
------------------------------------------------ */
.product {
font-size:15px;
}
.product1 {
margin:20px 0 40px 0 ;
position:relative;
}
.pttl {}
.pprice {
position:absolute;
top:10px;
right:40px;
font-size:24px;
line-height:1.5;
font-weight:bold;
color:#cc0000;
}
table.productp {
width:100%;
border: 1px solid #e2e2e2;
font-size:13px;
}
table.productp th {
border-right: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
background:#e9ead5;
padding:5px;
width:27%;
}
table.productp td {
border-bottom: 1px solid #e2e2e2;
background:#fff;
padding:5px;
}
.product-l {
float:left;
width:62%;
}
.product-r {
float:right;
width:35%;
}
.product-r a:hover {
opacity:0.7;
}
/* ▼ レビューを見るボタン */
.button__toReview {
	position: relative;
}
.button__toReview a {
	display: block;
	padding: 15px 30px;
	background-color: #3b8dde;
	color: #fff !important;
	font-size: 18px;
	text-align: center;
}
.button__toReview a:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 32px;
	transform: translateY(-50%);
	background-image: url(./images/icon-buttonNav.png);
	background-position: center top;
	background-size: contain;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
}
/* ▲ ここまで */
.product2-l {
float:left;
width:65%;
}
.product2-r {
float:right;
width:30%;
text-align:center;
margin:0 auto;
}
.product3-l {
float:left;
width:48%;
}
.product3-r {
float:right;
width:48%;
}
.pattention {
margin:40px 0;
padding:15px;
border:1px solid #ccc;
background:;
}
.pattention_ttl {
padding:0 !important;
color:#e2413e;
font-weight:bold;
background:none !important;
margin-bottom:0 !important;
}
.pattention ul li {
font-size:13px;
list-style:disc;
list-style-position:outside;
margin: 0 0 0 25px;
padding:5px 0;
}
.pcook ul li {
list-style:decimal;
list-style-position:outside;
margin: 0 0 0 25px;
padding:5px 0;
}
.product h2 {
font-size:18px;
font-weight:bold;
padding:0 0 0 0 !important;
color:#e2413e;
border-left:none !important;
background:none !important;
}

.t_image {
background: url(images/kakimovie.gif) repeat-x center center;
height:210px;
}
.t_image2 {
background: url(images/net.png) repeat center center;
height:210px;
}

dl.qa dt {
font-weight:bold;
padding:5px 0;
margin:20px 0 10px 0;
}
dl.qa dd {
padding:0 0 25px 0;
border-bottom:1px dotted #ccc;
}

ul.point li {
padding: 5px 0;
list-style:disc;
list-style-position:outside;
margin: 0 0 0 25px ;
}
.productlist {
margin-left:-20px;
}
.productlist li {
float:left;
width:355px;
padding: 10px 0;
margin-left:20px;
text-align:center;
}

ul.reco li {
width:20%;
}
.bx-wrapper .bx-viewport {
box-shadow: none !important;
border: none !important;
left: -5px !important;
background: none !important;
}
.f_reco {
width:918px;
margin:0 auto 20px auto;
}
ul.cartlist {
margin-left:-5%;
}
ul.cartlist li {
float:left;
width:45%;
margin-left:5%;
margin-bottom:20px;
}
ul.cartlist li p {
background:url(images/cart_ttl_bg.png) repeat-x center bottom;
color:#1071ba;
font-size:18px;
padding:10px 5px 15px 5px;
font-weight:bold;
}
ul.cartlist2 {
}
ul.cartlist2 li {
margin-bottom:20px;
}
ul.cartlist2 li p {
background:url(images/cart_ttl_bg.png) repeat-x center bottom;
color:#1071ba;
font-size:18px;
padding:10px 5px 15px 5px;
font-weight:bold;
}


.cookrow1 {}
.cookrow1 li {
    display: flex;
    justify-content: space-between;
    margin: 30px auto;
}
.cookrow1 li .photo {
    width: 30%;
}
.cookrow1 li .txt {
    width: 68%;
}
.cookrow1 li .txt p {}
.cookrow1 li .txt p strong {
    display: block;
    padding-bottom: 10px;
    background: url(images/line1.png) repeat-x 0 bottom;
}

/* レビュー機能
------------------------------------------------ */
.rev-star-score img {
	vertical-align: text-bottom;
}
div.e-rev-box1 input.rev-write-button {
	/* display: block; */
	/* margin: 15px auto 25px !important; */
	padding: 10px 30px !important;	
	border: none;
	cursor: pointer;
	background-color: #3b8dde;
	color: #fff !important;
	font-size: 18px;
}
div.e-rev-box1 input.rev-write-button:hover {
	opacity: 0.7;
}
.rev-art-date {
	color: #565656 !important;
}
div.rev-art-box1 span.reviewer-info {
	color: #565656 !important;
}
span.ra-evaluation img {
	vertical-align: baseline;
}


/* カラム
------------------------------------------------ */
ul.col2  {
margin-left:-20px;
}
ul.col2 li {
float:left;
margin-left:20px;
width:360px;
}
ul.col3  {
margin-left:-20px;
}
ul.col3 li {
float:left;
margin-left:20px;
width:230px;
}
ul.col4  {
margin-left:-20px;
}
ul.col4 li {
float:left;
margin-left:20px;
width:165px;
}


/* 固定ページ
------------------------------------------------ */
.pagearea {}
h1.pagegift {
background:none !important;
margin: 0 !important;
padding:0 !important;
}

/* ギフト
------------------------------------------------ */
.gift h2 {
margin:30px 0 0 0 !important;
padding:10px 20px !important;
background:url(images/gift_bg1.jpg) repeat-x center center !important;
color:#fff;
font-size:21px !important;
border-left:none !important;
}
.giftinr {
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
padding:20px;
background:#fff;
border-bottom-left-radius: 5px; 
border-bottom-right-radius: 5px; 
-webkit-border-bottom-left-radius: 5px; 
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
}
.giftbtn {
margin:20px 0 0 0;
}
.giftbtn a {
display:block;
padding:10px;
text-align:center;
color:#fff !important;
background:#f6695b;
font-size:18px;
border-radius: 3px 3px;
}
.giftbtn a:hover {
opacity:0.7;
text-decoration:none;
}
.giftinr dl {
font-size:15px;
}
.giftinr dl dt {
float:left;
padding:10px;
/*font-weight:bold;*/
}
.giftinr ul li {
border-bottom:1px dotted #ccc;
}
.giftinr dl dd {
float:right;
width:20%;
padding:10px;
text-align:right;
}
.gift-l {
float:left;
width:250px;
}
.gift-r {
float:right;
width:430px;
}
.giftlist {
background:#fff;
}
.giftlist ul li {
float:left;
width: 21%;
padding: 2%;
}

/* ガイド
------------------------------------------------ */
.guide ul li {
padding: 3px 0 3px 0;
list-style: disc;
list-style-position: outside;
margin: 0 20px;
}
.flowlist {
margin: 0 0 60px 0;
}
.flow ul li {
list-style:none;
}
.flow h3 {
border-bottom:none !important;
color:#cc0000 !important;
background:none !important;
margin-bottom:0 !important;
}
.flowlist ul li{
border-bottom:1px solid #ccc;
list-style:none;
list-style-position: none;
margin:0;
}
.flowlist ul li a {
display:block;
background: url(images/b_arw.png) no-repeat center left;
padding: 5px 0 5px 20px;
}

/* 一覧
------------------------------------------------ */
.archive ul li {
border-bottom:1px dotted #ccc;
padding:20px 5px;
}
.archive ul li a {
display:block;

}

/* 記事
------------------------------------------------ */
.singledate {
font-size:15px;
margin-bottom:30px;
}


/* テーブル
------------------------------------------------ */
.table1 th {
background:#efefef;
padding:13px;
border:1px solid #ccc;
width:25%;
}
.table1 td {
padding:13px;
border:1px solid #ccc;
background:#fff;
}
.table2 th {
background:#efefef;
padding:5px;
border:1px solid #ccc;
width:38%;
}
.table2 td {
padding:5px;
border:1px solid #ccc;
background:#fff;
width:50%;
}

/* カレンダー
------------------------------------------------ */
.calendar{border-collapse:collapse;width:100%;margin-bottom:10px;}
.calendar caption{padding:20px 0 10px 0;font-size:14px;font-weight:bold;}
 
.calendar th,.calendar td{font-size:12px;border:1px solid #bbb;text-align:center;line-height:28px;}
 
.calendar th{background:#ddedf8;}
.calendar th:first-child{color:#f30;}
.calendar th:last-child{color:#03c;}
.calendar td div{text-align:center;}

td.blank,
td.days {background:#fff;}


.today{background:#fffbcc;}
.saturday{background:#f3f9fd;}
.sunday{background:#fff5f2;}
.holiday{background:red;color: #fff;}

.calendar td a{text-decoration:underline;display:block;width:100%;}
.calendar td a:hover{background:#fe814d;color:#fff;text-decoration:none;}
.calendar td a:active{background:#f30;}

div.e-shops_calendar{
text-align:center !important;
margin:20px auto 0 auto !important;
}

/* スライド
------------------------------------------------ */
.bx-viewport {}


/* カート
------------------------------------------------ */
.cartb form {
font-size:16px !important;
}
.cartb input,
.cartb select {
margin:0 0 10px 0 !important;
}
.cartb input[type=text] {
padding:3px;
}
.cartb input[type=submit] {
    width: 69%;
    background: #f3ce00;
    font-size: 16px;
    padding: 12px;
    border-radius: 5px;
    border: none;
    font-weight: bold;
        cursor: pointer;
}
.cartb input[type=submit]:hover {
opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
}

/* Youtube
------------------------------------------------ */
.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*問い合わせ*/

dl.contact {
	background: #e7e7e7;
	border: 1px solid #ccc;
	border-top: none;
	width: 100%;
}

dl.contact dt,
dl.contact dd {
	padding: 15px;
}

dl.contact dt {
	border-top: 1px solid #ccc;
	clear: left;
	float: left;
	width: 27%;
}
dl.contact dd {
	background: #fff;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	margin-left: 27%;
	min-height: 24px;
}
dl.contact input[type=text],
dl.contact input[type=email],
dl.contact textarea {
width:90%;
padding:3px;
}
dl.contact input[type=checkbox]  {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}


/* ADD
------------------------------------------------ */
.b {
font-weight:bold !important;
}
.center {
text-align:center !important;
}
.mt10 {
margin-top: 10px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mt40 {
margin-top: 40px !important;
}
.mt60 {
margin-top: 60px !important;
}
.mt80 {
margin-top: 80px !important;
}
.mt120 {
margin-top: 120px !important;
}
.clear {
clear: both;
}
.flo-l {
float: left;
}
.flo-r {
float: right;
}
.flo-l2 {
float: left;
width:70%;
}
.flo-r2 {
float: right;
width:28%;
}
.flo-l3 {
float: left;
width:48%;
}
.flo-r3 {
float: right;
width:48%;
}
.flo-l4 {
float: left;
width:73%;
}
.flo-r4 {
float: right;
width:25%;
}

.f12{
font-size: 12px !important;
}
.f15{
font-size: 15px !important;
}
.f16{
font-size: 16px !important;
}
.f18 {
font-size: 18px !important;
}
.f21 {
font-size: 21px !important;
}
.f24 {
font-size: 24px !important;
}
.red {
color: #cc0000 !important;
}
.txt-r {
text-align: right;
}
.bg-gray1{
padding:20px;
background:#efefef;
}
.bg-gray2{
padding:20px;
border:1px solid #ccc;
}

.row {
clear:both;
}
.row1 {
clear:both;
padding:20px 0;
border-top:1px dotted #ccc;
}
.row2 {
margin-top: 20px ;
padding:20px 0;
clear:both;
background: url(images/line1.png) repeat-x 0 top ;
}

.a_link {
background: url(images/b_arw.png) no-repeat center left;
padding: 0 0 0 16px;
display:inline-block;
}

.col2-l {
float:left;
width:48%;
}
.col2-r {
float:right;
width:48%;
}

/**************スライダー****************/


.wideslider {
	width: 100%;
	text-align: left;
	position: relative;
	overflow: hidden;
}

.wideslider ul,
.wideslider ul li {
	float: left;
	display: inline;
	overflow: hidden;
}

.wideslider ul li img {
	width: 100%;
	display: none;
}

.wideslider_base {
	top: 0;
	position: absolute;
}
.wideslider_wrap {
	top: 0;
	position: absolute;
	overflow: hidden;

}
.slider_prev,
.slider_next {
	top: 0;
	overflow: hidden;
	position: absolute;
	z-index: 100;
	cursor: pointer;
}
.slider_prev {background: #fff url(images/prev.jpg) no-repeat right center;}
.slider_next {background: #fff url(images/next.jpg) no-repeat left center;}

.pagination {
	bottom: 10px;
	left: 0;
	width: 100%;
	height: 15px;
	text-align: center;
	position: absolute;
	z-index: 1000;
}

.pagination a {
	margin: 0 5px;
	width: 15px;
	height: 15px;
	display: inline-block;
	overflow: hidden;
	background: #1071BA;
}
.pagination a.active {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}


/* =======================================
	ClearFixElements
======================================= */
.wideslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.wideslider ul {
	display: inline-block;
	overflow: hidden;
}


/* Clearfix
------------------------------------------------ */
div#contents div.contentsInner,
.clearfix {
    /zoom: 1;
}

div#contents div.contentsInner:after,
.giftlist ul:after,
.giftinr dl:after,
.giftinr dl dd:after,
.giftinr:after,
ul.cartlist:after,
.reco:after,
.productlist:after,
ul.col2:after,
ul.col3:after,
#breadcrumb:after,
.product2:after,
.product3:after,
.product1:after,
.row2:after,
.row1:after,
.row:after,
div#footer div.footerInner:after,
.fmenu-r ul:after,
.fmenu-r:after,
.fguideinr:after,
ul.tinfo-1:after,
.trank-r ul:after,
.trankinr:after,
.taboutinr:after,
.treco ul:after,
.hmenu ul:after,
.headerinr:after,
#avwrap:after,
#gnavi:after,
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

.remarks{
    color: red;
}
/* お知らせ本文の表（旧 WordPress のブロックエディタの表）。2026-10-15 静的化に伴い追加 */
.pagearea .wp-block-table { margin: 10px 0 20px; }
.pagearea .wp-block-table table { border-collapse: collapse; }
.pagearea .wp-block-table td { padding: 6px 18px 6px 0; border-bottom: 1px solid #ddd; white-space: nowrap; vertical-align: top; }
.pagearea .wp-block-table tr:first-child td { border-bottom: 2px solid #999; }
.pagearea .has-text-align-right { text-align: right; }
.pagearea .has-text-align-center { text-align: center; }

/* ================================================
   スマホ表示（2026-10-15 追加）
   スマホのときだけ <html class="sp"> が付く（各ページの head の小さなスクリプト）。
   PC・タブレットにはこのクラスが付かないので、ここより下は PC の見た目に影響しない。
================================================ */
html.sp body { font-size: 15px; }
html.sp div#wrapper { overflow-x: hidden; }
html.sp div#wrapper iframe { max-width: 100%; }

/* 幅を固定している箱を、画面幅いっぱいに */
html.sp div#header div.headerinr,
html.sp #gnavi,
html.sp div#contents,
html.sp .pan,
html.sp .treco,
html.sp .taboutinr,
html.sp .trankinr,
html.sp .tinfoinr,
html.sp .fguideinr,
html.sp .f_reco,
html.sp div#footer div.footerInner,
html.sp .copyright {
  width: auto;
  box-sizing: border-box;
}
html.sp div#navwrap div.navwrapinrbg,
html.sp div#navwrap div.navwrapinr { min-width: 0; }

/* 横並びの段を、縦1列に */
html.sp .header-l, html.sp .header-r,
html.sp div#main, html.sp div#leftColum,
html.sp .tabout-l, html.sp .tabout-r,
html.sp .trank-l, html.sp .trank-r,
html.sp .fguide-l, html.sp .fguide-r,
html.sp .fmenu-l, html.sp .fmenu-r,
html.sp .product-l, html.sp .product-r,
html.sp .product2-l, html.sp .product2-r,
html.sp .product3-l, html.sp .product3-r,
html.sp .gift-l, html.sp .gift-r,
html.sp .col2-l, html.sp .col2-r,
html.sp .flo-l2, html.sp .flo-r2,
html.sp .flo-l3, html.sp .flo-r3,
html.sp .flo-l4, html.sp .flo-r4 {
  float: none;
  width: auto;
  min-height: 0;
}

/* ヘッダー */
html.sp div#header div.headerinr { padding: 8px 10px 10px; }
html.sp .header-l { height: auto; text-align: center; }
html.sp .logo { position: static; width: auto; margin: 4px auto 8px; }
html.sp .logo img { width: 210px; }
html.sp .hmenu, html.sp .haiso { position: static; width: auto; }
html.sp .hcard { display: none; }
html.sp .hmenu ul li a { padding: 2px; }
html.sp .haiso { margin: 6px auto 0; max-width: 360px; }

/* メニュー（4列×2段） */
html.sp #gnavi { display: flex; flex-wrap: wrap; padding: 0 0 6px; font-size: 13px; }
html.sp #gnavi li { float: none; width: 25%; }
html.sp #gnavi li a { padding: 10px 2px; text-align: center; border-bottom: 1px solid #eee; white-space: nowrap; letter-spacing: -0.03em; }

/* トップのスライド */
html.sp #visual { height: auto; }
html.sp .wave { height: 40px; background-size: auto 40px; bottom: -6px; }

/* 本文 */
html.sp div#contents { padding: 0 12px 20px; }
html.sp .pan { margin: 12px 12px; font-size: 12px; }
html.sp div#main, html.sp div#topmain { min-height: 0; }
html.sp div#leftColum { margin-top: 30px; }
html.sp .page h1 { font-size: 20px; }
html.sp #main h2 { font-size: 17px; }
html.sp .sidearea h2 { background-size: 100% 50px; }

/* 商品ページ */
html.sp .pprice { position: static; margin: 0 0 12px; font-size: 22px; }
html.sp .product-r { margin: 0 0 10px; text-align: center; }
html.sp .product2-r { margin-top: 20px; }
html.sp .product3-r { margin-top: 20px; }
html.sp table.productp th { width: 32%; }
html.sp .pattention { margin: 24px 0; }
html.sp .cartb input[type=submit] { width: 100%; }
html.sp .cookrow1 li { flex-direction: column; }
html.sp .cookrow1 li .photo, html.sp .cookrow1 li .txt { width: auto; }
html.sp .cookrow1 li .txt { margin-top: 10px; }

/* 一覧・カラム */
html.sp .productlist, html.sp ul.col2, html.sp ul.col3, html.sp ul.col4,
html.sp ul.cartlist, html.sp ul.tinfo-1 { margin-left: 0; }
html.sp .productlist li, html.sp ul.col2 li, html.sp ul.col3 li {
  float: none; width: auto; margin-left: 0;
}
html.sp ul.col4 li { width: 48%; margin-left: 4%; }
html.sp ul.col4 li:nth-child(2n+1) { margin-left: 0; clear: left; }
html.sp ul.cartlist li { float: none; width: auto; margin-left: 0; }
html.sp .giftlist ul li { width: 46%; }
html.sp .giftinr { padding: 14px; }
html.sp .giftinr dl dd { width: auto; }

/* トップ：おすすめ・ランキング・お知らせ */
html.sp .treco { padding: 16px 8px 24px; }
html.sp .treco ul li { width: 50%; margin-top: 10px; padding: 0 4px; box-sizing: border-box; }
/* 3個ずつの2つの並びを1つにまとめ、6個を2列×3段に詰める（空欄を作らない） */
html.sp .treco { display: flex; flex-wrap: wrap; }
html.sp .treco h2 { width: 100%; }
html.sp .treco ul { display: contents; }
html.sp .treco ul:after { display: none; }
html.sp .treco ul li { float: none; }
html.sp .taboutinr { padding: 24px 12px; }
html.sp .tabout-l { background: none; text-align: center; }
html.sp .tabout-r ul li { margin-top: 12px; }
html.sp .trankinr { padding: 24px 12px; }
html.sp .trank-l { text-align: center; }
html.sp .trank-r ul { margin-left: 0; margin-top: 20px; }
html.sp .trank-r ul li { width: 48%; margin: 24px 0 0 4%; }
html.sp .trank-r ul li:nth-child(2n+1) { margin-left: 0; clear: left; }
html.sp .trank-r ul li span { left: 50%; margin-left: -12px; }
html.sp .tinfoinr { padding: 20px 12px 30px; }
html.sp ul.tinfo-1 li { float: none; width: auto; margin-left: 0; min-height: 0; margin-bottom: 20px; }
html.sp .tinfoli { width: auto !important; text-align: center; }

/* ご利用案内・関連商品・フッター */
html.sp .fguideinr { padding: 40px 12px 30px; }
html.sp .fguide-r { margin-top: 10px; }
html.sp .f_reco { padding: 0 12px; }
html.sp .f_reco h2 { font-size: 20px; }
html.sp div#footer div.footerInner { padding: 50px 14px 0; }
html.sp .fmenu-l { margin-bottom: 16px; }
html.sp .fmenu-r ul li { width: 50%; padding: 6px 0; }
html.sp .copyright { padding: 14px 14px 24px; }
html.sp div#goTop { bottom: 12px; right: 10px; width: 44px; }

/* 表・フォーム */
html.sp .table1 th, html.sp .table1 td { padding: 8px; }
html.sp .table1 th { width: 32%; }
html.sp .pagearea .wp-block-table { overflow-x: auto; }
html.sp dl.contact dt { float: none; width: auto; }
html.sp dl.contact dd { margin-left: 0; border-left: none; }
html.sp dl.contact input[type=text],
html.sp dl.contact input[type=email],
html.sp dl.contact textarea { width: 100%; box-sizing: border-box; font-size: 16px; }
html.sp .pagearea .wp-block-table td { padding: 6px 10px 6px 0; font-size: 13px; }

/* ===== スマホの見やすさ（2026-10-16）=====
   決まり：画像は中央にそろえる／説明・カートなどのまとまりを区切る／カートは枠で囲み押しやすく／PC は変えない */

/* 画像：画面からはみ出さず、中央にそろえる */
html.sp #contents img { max-width: 100%; height: auto; }
html.sp .pagearea div.center > img,
html.sp .pagearea div.center > a > img,
html.sp .giftinr img,
html.sp .sidearea > a > img,
html.sp .sidearea > p > a > img { display: block; margin-left: auto; margin-right: auto; }
html.sp .tinfoinr h2 img { display: block; margin: 0 auto; }
/* 画像が1つだけの段落は中央そろえ（文中の小さな画像やレビューの星には当てない） */
html.sp .pagearea p:has(> img:only-child),
html.sp .pagearea p:has(> a:only-child > img:only-child),
html.sp .pagearea p:has(> img:first-child + br:last-of-type) { text-align: center; }

/* 文章：行間を少し広げて読みやすく */
html.sp .pagearea p { line-height: 1.8; }

/* 商品ページ：まとまりごとに区切る */
html.sp .pagearea.product .product1 { padding-bottom: 8px; }
html.sp .pagearea.product .product-r img { max-width: 300px; width: 100%; }
html.sp .pagearea.product .row2,
html.sp .pagearea.product .product2 { margin-top: 28px; padding-top: 24px; border-top: 1px solid #ddd; background: none; }

/* カート：ご購入のまとまりを枠で囲み、商品ごとにカードにする */
html.sp .pagearea .product3 { margin: 32px -4px 0; padding: 16px 12px; background: #fffbea; border: 2px solid #f3ce00; border-radius: 8px; }
html.sp .pagearea .product3 h2 { margin-top: 0; }
html.sp .pagearea > .cartb { margin: 20px -4px 0; }
html.sp ul.cartlist li,
html.sp ul.cartlist2 li { margin: 0 0 16px; padding: 4px 12px 12px; background: #fff; border: 1px solid #ddd; border-radius: 6px; }
html.sp ul.cartlist li p,
html.sp ul.cartlist2 li p { font-size: 17px; padding: 10px 0 12px; }
html.sp .cartb select { display: block; width: 100%; max-width: 100%; margin-top: 4px !important; padding: 8px; font-size: 16px; box-sizing: border-box; }
html.sp .cartb input[type=text] { width: 64px !important; height: 40px; font-size: 16px; text-align: center; box-sizing: border-box; }
html.sp .cartb input[type=submit] { display: block; width: 100%; margin-top: 4px !important; padding: 14px; font-size: 17px; font-weight: bold; -webkit-appearance: none; }
/* カートがご購入のまとまりの直後に別に置かれているページ：枠をつなげて1つに見せる */
html.sp .pagearea .product3:has(+ .cartb) { margin-bottom: 0; border-bottom: none; border-radius: 8px 8px 0 0; }
html.sp .pagearea .product3 + .cartb { margin-top: 0 !important; padding: 0 12px 4px; background: #fffbea; border: 2px solid #f3ce00; border-top: none; border-radius: 0 0 8px 8px; }