@charset "utf-8";

/* ///////////////////////////////////////////////
【トップページ】
index.css
/////////////////////////////////////////////// */


/* -----------------------------------------------
Table Of Contents

・グローバルナビ
・メインイメージ
・バナーx4
・新着情報
・本坊酒造 造り手のこだわり
----------------------------------------------- */



/* -----------------------------------------------

グローバルナビ

----------------------------------------------- */
#gNav ul li.gNav01 a {background-position:0 -50px;}



/* -----------------------------------------------

メインイメージ

----------------------------------------------- */
#slide {margin-bottom:8px;}

#slide {position:relative;width:777px;height:380px;}

#slide #list {z-index:1;}
		
#slide #list li {position:absolute;top:0;left:0;}
		
#slide #navi {position:absolute;bottom:10px;left:10px;font-size:11px;}
		
#slide #navi li {float:left;margin-right:6px;}
		
#slide #navi li a {display:block;border:1px solid #ccc;padding:0 7px;line-height:23px;background:#eee;color:#333;text-decoration:none;}
		
#slide #navi li a.current,#slide #navi li a:hover {background:#999;}

h1 {position:absolute;top:30px;left:128px;z-index:2;}

.sns.clearfix {float:right;width:467px;position:relative;}

#caption {position:absolute;top:83px;left:44px;z-index:2;}

#kagoshimaArea {position:absolute;top:115px;right:0;z-index:2;}

#boxKag {width:279px;height:75px;background:url(../img/index/mainimg_bg_kagoshima.png) no-repeat;}
	
#boxKag p {float:left;margin-left:15px;margin-bottom:6px;}

#shinsyuArea {position:absolute;width:279px;height:49px;top:244px;right:0;z-index:2;}

#yamanashiArea {position:absolute;width:279px;height:49px;top:297px;right:0;z-index:2;}

#shinsyuArea h3,#yamanashiArea h3 {float:right;width:81px;}

#shinsyuBoxl,#yamanashiBoxl {float:left;width:198px;}

#shinsyuBoxlb {width:198px;height:23px;padding-left:15px;background:url(../img/index/mainimg_bg_shinsyu.png) no-repeat;}

.yamanashiBoxlb {width:198px;height:23px;padding-left:15px;background:url(../img/index/mainimg_bg_yamanashi.png) no-repeat;}



/* -----------------------------------------------

バナーx4

----------------------------------------------- */
#fourBnr {margin-bottom:20px;padding:3px 0;border-top:4px solid #352516;border-bottom:4px solid #352516;}

#fourBnr li {float:left;margin-right:4px;}

#fourBnr-sp{display:none;}

.sp_itemkura .bnr_ec3{display:none;}


/* -----------------------------------------------

新着情報

----------------------------------------------- */
#news {margin-bottom:40px;}

#news h2 {margin-bottom:0;}

#news .boxA {padding:15px 15px 10px;border:1px solid #666;background:#fff;}

#news .boxA dl dt {margin:5px 0;}

#news .boxA dd {margin-left:.1em;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dotted #666;color:#333;}

#news .linkA {text-align:right;}

#news .linkA a {color:#990000;}

/* -----------------------------------------------
続きを見る用CSS　20210930
----------------------------------------------- */

.grad-wrap { position: relative; }

.grad-btn {
z-index: 2;
position: absolute;
bottom: 35px;
right: 0;
left: 0;
width: 120px;
width: max-content;
width: fit-content;
margin: auto;
padding: .5em 1em .5em 1.2em;
border-radius: 8px;
background: #006c3b;
color: #fff;
font-size: .9rem;
text-align: center;
cursor: pointer;
transition: .2s ease;
box-shadow: 0 0 5px rgb(0 0 0 / 30%);
}

.grad-btn::before  {
font-family: "Font Awesome 5 Free";
content: "\f0d7";
font-weight: 900;
position: relative;right:.3em;
}
.grad-btn:hover,active {
background: transparent;
color: #006c3b;
}
.grad-item {
position: relative;
overflow: hidden;
height: 85vw;
}
.grad-item::before {
display: block;
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
content: "";
width: 100%;
height: 100px; /*グラデーションで隠す範囲*/
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
}
.grad-trigger { display: none; }
.grad-trigger:checked ~ .grad-btn { display: none; }
.grad-trigger:checked ~ .grad-item { height: auto; }
.grad-trigger:checked ~ .grad-item::before { display: none; }


/* -----------------------------------------------

本坊酒造 造り手のこだわり

----------------------------------------------- */
#kodawari p,#kodawari ul {margin:0 12px;color:#333;}
#kodawari p {margin-bottom:10px;}
#kodawari ul li {float:left;}