@charset "utf-8";

/*---------------------------------------------------
reset
---------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    text-decoration: none;
   /* font-weight: normal;
    font-style: normal;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;*/
}
img{vertical-align:bottom;}

/*---------------------------------------------------
　 Common
---------------------------------------------------*/

body{ background-color: #FFF;}

.flL{float: left; }
.flR{float:right; }

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

.Sp_mL10{ margin-left: 10px;}
.Sp_mL15{ margin-left: 15px;}
.Sp_mL25{ margin-left: 25px;}
.Sp_mT10{ margin-top: 10px;}
.Sp_mT15{ margin-top: 15px;}
.Sp_mT35{ margin-top: 35px;}
.Sp_mT40{ margin-top: 40px;}
.Sp_mT45{ margin-top: 45px;}
.Sp_mT60{ margin-top: 60px;}
.Sp_mT75{ margin-top: 75px;}
.Sp_mT80{ margin-top: 80px;}
.Sp_mB10{ margin-bottom: 10px;}
.Sp_mB15{ margin-bottom: 15px;}
.Sp_mB80{ margin-bottom: 80px;}
.Sp_mB115{ margin-bottom: 115px;}
.Sp_mTB10{margin: 10px 0;}
.Sp_mTB20{margin: 20px 0;}

.txt_10{font-size: 10px;}
.txt_11{font-size: 11px;}
.txt_12{font-size: 12px;}

.txt_B{ font-weight: bold;}

/*---------------------------------------------------------------------------------------------
 Font
---------------------------------------------------------------------------------------------*/

@font-face{
  font-family:"NotoSansCJKjpRegular";
	src:url('../../../../font/NotoSansCJKjpRegular.eot'); /* IE9 Compat Modes */
	src:url('../../../../font/NotoSansCJKjpRegular.eot?#') format('embedded-opentype'), /* IE6-IE8 */
		  url('../../../../font/NotoSansCJKjpRegular.woff') format('woff') /* Modern Browsers */
}
@font-face{
  font-family:"NotoSansCJKjpBold";
	src:url('../../../../font/NotoSansCJKjpBold.eot'); /* IE9 Compat Modes */
	src:url('../../../../font/NotoSansCJKjpBold.eot?#') format('embedded-opentype'), /* IE6-IE8 */
		  url('../../../../font/NotoSansCJKjpBold.woff') format('woff') /* Modern Browsers */
}

/*---------------------------------------------------------------------------------------------
　SNS Area stteing
---------------------------------------------------------------------------------------------*/
#sapporo-topicpath-area .topicpath {position:relative;}
#sapporo-topicpath-area .topicpath .snsarea {position:absolute; top:5px; right:0px;}


/*---------------------------------------------------------------------------------------------
　　Navimenu
---------------------------------------------------------------------------------------------*/
#menu{ width: 950px; margin: 0 auto; padding: 50px 0;}
#menu ul { margin: 0; padding: 0; list-style-type:none;}
#menu ul li {
  position: relative;
  margin:0;
  padding:0;
  font-size:14px;
  float: left;
  width: 157px;/*親メニューの幅*/
  height: 50px;/*親メニューの高さ*/
  line-height: 50px;
  color: #000;/*親メニューの文字色*/
  text-align:center;
  font-weight:bold;
  border-left: 1px dotted #000000;
  letter-spacing:2px;
  /*background:#FF818D; 親メニューの背景色*/
}
#menu ul li.lineR{ border-right: 1px dotted #000000;}
#menu ul li a {
	position: relative;
	color: #4D4D4D;
	display: block;
	text-decoration: none;
	transition: .3s;
	/*display: inline-block;*/
  }
#menu ul li a::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 2px;
	background-color: #ffc801;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#menu ul li a:hover::after {width: 100%;}
#menu ul li:hover,
#menu ul li a:hover {
  color: #ffc801; /*ホバー時の親メニューの文字色*/
 /* background:#EA2839;ホバー時の親メニューの背景色*/
}
#menu ul li ul {
  position: absolute;
  top: 50px;/*親メニューの高さと同じにする*/
  width: 157px;
  z-index: 100;
  margin-top:0.5em;
}
#menu ul li ul li {
  visibility: hidden;
  overflow: hidden;
  width: 157px;/*サブメニューの幅*/
  height: 0;
  border:none;
  font-size:13px;
  letter-spacing: normal;
  line-height:1.5;
  background:rgba(255,255,255,0.9);
}
#menu ul li ul li:hover, .menu ul li ul li a:hover {background:rgba(255,255,255,0.9);}
#menu ul li:hover ul li, .menu ul li a:hover ul li{
  visibility: visible;
  overflow: visible;
  height:50px;/*サブメニューの高さ*/
  z-index: 10;
  }
#menu * {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  }
  


/*---------------------------------------------------------------------------------------------
　Toppage  Layout
---------------------------------------------------------------------------------------------*/
#top_MainImg{
	position: relative;
	display: block;
	width: 100%;
	height:490px;
	background-image:url(../img/index/main.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	/*margin-top:70px;*/
}
#top_MainImg h1 { position: absolute; top:20px; right:30px; }
#top_MainImg h2 { position: absolute; top:72px; left: 36px; }
#top_MainImg h3 { position: absolute; top:72px; left:175px; }
#top_MainImg .icon{position: absolute; bottom:30px; right:-30px;}


/*_____________________________ menu _____________________________*/
#menuBg{
	background-image:url(../img/index/bg.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size: cover;
	}
#top_MenuArea{ display:block; width: 940px; height: 940px; margin: 0 auto; padding: 0 5px; }
#top_MenuArea .menuBox01,
#top_MenuArea .menuBox02,
#top_MenuArea .menuBox03,
#top_MenuArea .menuBox04 { display: block; width: 470px; height: 470px; margin: 0; padding: 0; float: left; }

#top_MenuArea .menuBox01 a span,
#top_MenuArea .menuBox02 a span,
#top_MenuArea .menuBox03 a span,
#top_MenuArea .menuBox04 a span { display: none; }

/*　左上　--------------*/
#top_MenuArea .menuBox01{
	position: relative;
	width: 470px;
	height: 470px;
	background-image:url(../img/index/item_01.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
}
.menuBox01 a.item_01{
	position: absolute;
	width: 235px;
	height: 235px;
	background-image:url(../img/index/item_01_1.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
  }
.menuBox01 a.item_01:hover{
	position: absolute;
	width: 235px;
	height: 235px;
	background-image:url(../img/index/item_01_1_o.jpg);
	background-repeat:no-repeat;
	background-position: 0 0;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
  }  

/*　右上　--------------*/
.menuBox02 a.item_02 {
  display: block;
  width: 235px;
  height: 235px;
  background-image:url(../img/index/item_02.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  float:left;
  }
.menuBox02 a.item_02:hover{
  display: block;
  width: 235px;
  height: 235px;
  background-image:url(../img/index/item_02_o.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  
  }
 .menuBox02 a.item_02_2 {
  display: block;
  width: 235px;
  height: 235px;
  background-image:url(../img/index/item_02_2.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  float:left;
  }
.menuBox02 a.item_02_2:hover{
  display: block;
  width: 235px;
  height: 235px;
  background-image:url(../img/index/item_02_2_o.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  }
.menuBox02 a.item_03 {
  display: block;
  width: 470px;
  height: 235px;
  background-image:url(../img/index/item_03.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  float:left;
  }
.menuBox02 a.item_03:hover{
  display: block;
  width: 470px;
  height: 235px;
  background-image:url(../img/index/item_03_o.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  }

/*　左下　--------------*/
.menuBox03 a.item_04 {
  display: block;
  width: 470px;
  height: 235px;
  background-image:url(../img/index/item_04.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  }
.menuBox03 a.item_04:hover{
  display: block;
  width: 470px;
  height: 235px;
  background-image:url(../img/index/item_04_o.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  }
.menuBox03 a.item_05 {
  display: block;
  width: 235px;
  height: 235px;
  background-image:url(../img/index/item_05.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  }
.menuBox03 a.item_05:hover{
  display: block;
  width: 235px;
  height: 235px;
  background-image:url(../img/index/item_05_o.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  }
.menuBox03 a.item_06 {
  display: block;
  width: 235px;
  height: 235px;
  background-image:url(../img/index/item_06.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  }
.menuBox03 a.item_06:hover{
  display: block;
  width: 235px;
  height: 235px;
  background-image:url(../img/index/item_06_o.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  }
  
/*　右下　--------------*/
.menuBox04 { width: 470px; height: 470px; }
.menuBox04 a.item_09 {
  display: block;
  width: 470px;
  height: 235px;
  background-image:url(../img/index/item_09.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  float:left;
  }
.menuBox04 a.item_09:hover{
  display: block;
  width: 470px;
  height: 235px;
  background-image:url(../img/index/item_09_o.jpg);
  background-repeat:no-repeat;
  background-position:0 0;
  }

.menuBox04 a.item_08{
	display: block;
	width: 235px;
	height: 235px;
	background-image:url(../img/index/item_08.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
  }
.menuBox04 a.item_08:hover{
	display: block;
 	width: 235px;
	height: 235px;
	background-image:url(../img/index/item_08_o.jpg);
	background-repeat:no-repeat;
	background-position: 0 0;
  }  


/*_____________________________ Bottom Image _____________________________*/
#btm_Img{
	position: relative;
	width: 100%;
	height:600px;
	background-image:url(../img/index/main_btm.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-size:cover;
	}
#btm_Img .ph_indexBtmcap{
	position:absolute;
	right: 30px;
	bottom: 10px;
	color: #FFF;
	font-size: 13px;
	}
.credit{
	display: block;
	text-align: right;
	font-size: 12px;
	margin: 8px 30px 30px 0;
	}


/*---------------------------------------------------------------------------------------------
　Contents Wrap
---------------------------------------------------------------------------------------------*/
.SB_Wrap{ width: 950px; margin: 0 auto; color:#000 !important; font-family:"NotoSansCJKjpRegular";}
.Section{width : 930px; position: relative; padding: 0 10px;}
.Section_TxtBox{ display: block; width: 585px;}
.IntTxtbox{width: 520px;}

/*---------------------------------------------------------------------------------------------
　Text
---------------------------------------------------------------------------------------------*/
.SB_Wrap h3{ font-size: 1.43em; line-height:1.3; margin-bottom: 0.8em; letter-spacing:1px; font-weight:normal; letter-spacing : 0.05em;}
.SB_Wrap h4{ font-size: 1.12em; line-height:1.3; margin-bottom: 0.8em; letter-spacing:1px; font-weight:normal; letter-spacing : 0.05em; font-weight:bold;}
.SB_Wrap .nomalTxt{ font-size: 0.938em; line-height:2; letter-spacing : 0.05em;}
.SB_Wrap .noteTxt{ font-size: 0.75em; line-height:1.6; letter-spacing : 0.05em;}
.SB_Wrap .ph_cap{ font-size: 0.75em; line-height:1.6; letter-spacing : 0.05em; text-align: right;} 



/*---------------------------------------------------------------------------------------------
　静岡愛
---------------------------------------------------------------------------------------------*/

#Love_MainImg{
	position: relative;
	display:block;
	width:100%;
	height:650px;
	margin-top: 50px;
	background-image:url(../img/love/love_main.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#Love_MainImg h1{position: absolute; width:690px; height:65px; margin: auto; top: 0; bottom:0; left: 0; right: 0; }

#taste_MainImg {display:block; position: relative; width:950px; height:490px; margin: 0 auto; margin-top: 50px; }
#taste_MainImg .ph01{ display: blcok; width:100%; height:190px; margin:0 0 25px; }
#taste_MainImg .ph02{ display: blcok; width:100%; height:190px; margin:20px 0 0; background-color:#F0F0F0;}
#taste_MainImg h1{ text-align:center;}
.taste_Img_beer{display: block; position: absolute; right:25px; top:-120px;}


/*---------------------------------------------------------------------------------------------
　開発秘話
---------------------------------------------------------------------------------------------*/
#Ep_MainImg{
	position: relative;
	display:block;
	width:100%;
	height:650px;
	margin-top: 50px;
	background-image:url(../img/episode/main.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#Ep_MainImg h1{position: absolute; top: 70px; right: 165px; }
#Ep_MainImg h2{position: absolute; bottom: 47px; left: -60px; z-index:10;}

#Ep_beer{
	position: relative;
	display:block;
	width:100%;
	height:810px;
	margin-top: 50px;
	background-image:url(../img/episode/ep_beer.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow:hidden;
}
#Ep_beer .ep_texBox{
	display:block;
	width: 575px;
	height: auto;
	margin-top: 65px;
	padding: 35px;
	background-color:rgba(255,255,255,0.7);
	font-size: 1em;
	line-height:2;
	letter-spacing : 0.05em;
}

.img_copy{ position: absolute; margin: auto; top: 0; bottom: 0; left: 100px;}
.img_beer{ position: absolute; top: 0; right: 60px; }

.EpLink{font-weight:bold;}	
a.EpLink {color: #000; text-decoration:none; padding: 0.3em; transition: all .3s;}
a.EpLink:hover{ color: #000; background-color: #ffc801;}




/*---------------------------------------------------------------------------------------------
　インタビューページ
---------------------------------------------------------------------------------------------*/
/*Vol.01*/
#Interview_MainImg{
	position: relative;
	display:block;
	width:100%;
	height:650px;
	margin-top: 50px;
	background-image:url(../img/interview/int_main.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	}
#Interview_MainImg h1{ position: absolute; top: 90px; left: 80px; }
#Interview_MainImg h2{ position: absolute; bottom: 60px; right: 55px;}

/*Vol.03*/
#Interview03_MainImg{
	position: relative;
	display:block;
	width:100%;
	height:650px;
	margin-top: 50px;
	background-image:url(../img/interview/03/int_main.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	}
#Interview03_MainImg h1{ position: absolute; top: 70px; left: 42px; }
#Interview03_MainImg h2{ position: absolute; bottom: 60px; right:-15px;}

/*Vol.05*/
#Interview05_MainImg{
	position: relative;
	display:block;
	width:100%;
	height:650px;
	margin-top: 50px;
	background-image:url(../img/interview/05/int_main.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	}
#Interview05_MainImg h1{ position: absolute; top: 70px; left: 42px; }
#Interview05_MainImg h2{ position: absolute; bottom: 60px; right:-15px;}




/*---------------------------------------------------------------------------------------------
　おいしさのひみつ
---------------------------------------------------------------------------------------------*/
#tasteImage{
	width:100%;
	height: 550px;
	background-image:url(../img/taste/taste_image01.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#tasteImage span{ display: none; }




/*---------------------------------------------------------------------------------------------
　ご当地グルメ
---------------------------------------------------------------------------------------------*/

/*_____________________________ index _____________________________*/

.gourmetBox {width: 950px; margin-bottom: 10px; }
.gourmetBox dl{ float: left; width:230px; margin: 0 10px 0 0}
.gourmetBox dt{ width:230px; height: 230px; background-color: #f6f4ee;}
.gourmetBox dd{ width:230px; height:70px; background-color:#f0ecdf;}
.gourmetBox dl.lastBox { margin-right: 0px; }
.gourmetBox a{color:#000; text-decoration: none;}
.ImgLink:hover{
	opacity:0.6;
	transition: all .3s;
	-ms-filter: "alpha(opacity=60)";  /* ie 8 */
	}

.g_area_izu{ /*伊豆*/
	display: block;
	width:90px;
	background-color:#3399cc;
	padding:5px 0; 
	font-size: 12px; 
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
	letter-spacing:0.2em
	}
.g_area_east{/*東部*/
	display: block;
	width:90px;
	background-color:#50b352;
	padding:5px 0; 
	font-size: 12px; 
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
	letter-spacing:0.2em
	}
	.g_area_west{/*西部*/
	display: block;
	width:90px;
	background-color:#907fbb;
	padding:5px 0; 
	font-size: 12px; 
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
	letter-spacing:0.2em
	}
	.g_area_chubu{/*中部*/
	display: block;
	width:90px;
	background-color:#eb9809;
	padding:5px 0; 
	font-size: 12px; 
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
	letter-spacing:0.2em
	}	
.g_menu{
	padding:9px 0 0 13px;
	font-size:15px;
	font-weight:bold;
	letter-spacing:0.08em
}

/*________________________ 詳細ページ __________________________*/

.g_pageTitle{
	display: block;
	margin-right: 20px;
	font-size: 1.43em;
	line-height:1.3;
	font-weight:bold;
	letter-spacing : 0.05em;
	vertical-align:middle;
	}
.g_pageArea_izu{
	display: table-cell;
	width: 100px;
	height: 30px;
	background-color: #3399cc;
	font-size: 13px;
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	color:#FFFFFF;
}
.g_pageArea_east{
	display: table-cell;
	width: 100px;
	height: 30px;
	background-color: #50b352;
	font-size: 13px;
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	color:#FFFFFF;
}
.g_pageArea_west{
	display: table-cell;
	width: 100px;
	height: 30px;
	background-color: #907fbb;
	font-size: 13px;
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	color:#FFFFFF;
}
.g_pageArea_chubu{
	display: table-cell;
	width: 100px;
	height: 30px;
	background-color: #eb9809;
	font-size: 13px;
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	color:#FFFFFF;
}


.g_txtBox{width : 490px; }

#Control{ width: 950px; height:14px; margin:55px 0 100px; position: relative ;}
#Control .Control_line{border-top: 1px solid #ccc;}
#Control .prev{ position: absolute; left:0; top:35px;}
#Control .back{position: absolute; margin:auto; left:0; right: 0; top:35px;}
#Control .next{ position: absolute; right:0; top:35px;}