@charset "utf-8";

/*------------------------------------------------------------
	index.html
	TOPページ
------------------------------------------------------------*/

.slidebg {
	background-size: cover !important;
	background-position: center top;
}

#index .mainimg {
	position: relative;
	background: url(../images/index/mainimg_bg.jpg) no-repeat center top;
	background-size: 100% auto;
	text-align: center;
	padding: 75% 0 0 0; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
	/*height: 80%; /* height: 946px; */
	box-sizing: border-box;
	background-position: center top;
}

#index .mainimg:after {
	content: " ";
	display: block;
	width: 100%;
	height: 6px;
	background: url(../images/template/bg_nami.png) repeat-x center top;
	background-size: 32px auto;
	position: absolute;
	bottom: 0;
}

#index .mainimg .innerblock {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	max-height: 400px;
}

#index .mainimg:before {
	content: " ";
	display: block;
	background: url(../images/index/mainimg_pt.png) no-repeat center top;
	width: 100%;
	height: 13px;
	background-size: 30px auto;
	position: absolute;
	bottom: 32px;
}

#index .mainimg h1 {
	padding: 0 0 75px 0;
}

#index .mainimg h1 img {
	max-width: 400px;
	width: 100%;
	height: auto;
}

#index .mainimg p {
	margin: 0;
}

#index .mainimg p img {
	max-width: 600px;
	width: 100%;
	height: auto;
}

#index #about {
	text-align: center;
	padding: 80px 0 280px 0;
	background: url(../images/index/about_bg.jpg) no-repeat center bottom;
	background-size: 100% auto;
}

#index #about h2 {
	padding: 0 0 50px 0;
}

#index #about h2 img {
	max-width: 350px;
	width: 100%;
	height: auto;
}

#index #about p {
	font-size: 114%; /* font-size: 16px; */
	line-height: 2.6em;
	margin: 0 0 2.6em 0;
}

#index #about .img01 {
	margin: 0 0 50px 0;
}

#index #about .img01 img {
	max-width: 300px;
	width: 100%;
	height: auto;
}

#index #about .img02 {
	margin: 0 0 100px 0;
}

#index #about .img02 img {
	max-width: 755px;
	width: 100%;
	height: auto;
}

#index #about .btn {
	max-width: 300px;
	width: 100%;
	display: inline-block;
	margin: 0 10px;
	font-size: 114%; /* font-size: 16px; */
}

#index #about .btn a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 15px 0;
	background: #1c50a1;
	text-align: center;
}

#index #shop ul li {
	width: 50%;
	float: left;
	text-align: center;
}

#index #shop ul li a {
	display: block;
	padding: 68px 0;
}

#index #shop ul li img {
	max-width: 290px;
	width: 100%;
	height: auto;
}

#index #shop ul li.shop01 {
	background: url(../images/index/shop01_bg.jpg) no-repeat left top;
	background-size: 100% auto;
}

#index #shop ul li.shop02 {
	background: url(../images/index/shop02_bg.jpg) no-repeat left top;
	background-size: 100% auto;
}

#postarchive,
#postmedia {
	clear: both;
}

#postarchive h2,
#postmedia h2 {
	padding: 90px 0 0 0;
	text-align: center;
}

#postarchive h2 img,
#postmedia h2 img {
	max-width: 350px;
	width: 100%;
	height: auto;
}

#postarchive .postlistblock,
#postmedia .postlistblock {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	padding: 60px 0 120px 0;
}

#postmedia {
	background: #eef5f8;
}

#access .titleblock {
	background: url(../images/index/access_bg.jpg) no-repeat center top;
	background-size: 100% auto;
}

#access .titleblock h2 {
	padding: 0 0 60px 0;
}

#access .titleblock h2 img {
	max-width: 350px;
	width: 100%;
	height: auto;
}

#access #accessmap {
	width: 100%;
	height: 563px;
}

#access .addressblock {
	background: #fff;
	max-width: 300px;
	width: 100%;
	margin: 0 auto 10px auto;
	text-align: center;
	position: relative;
	top: -80px;
}

#access .addressblock h3 {
	padding: 30px 0 20px 0;
}

#access .addressblock h3 img {
	max-width: 150px;
	width: 100%;
	height: auto;
}

#access .addressblock h4 {
	font-weight: bold;
}

#access .addressblock p {
	line-height: 2em;
}

#access .addressblock .btn a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 10px 0;
	background: #1c50a1;
	text-align: center;
	font-size: 114%; /* font-size: 16px; */
}

#access dl {
	max-width: 960px;
	width: 100%;
	margin: 0 auto 60px auto;
}

#access dl dt {
	background: #eef5f8;
	padding: 15px 0;
	max-width: 300px;
	width: 100%;
	float: left;
	font-size: 114%; /* font-size: 16px; */
	font-weight: bold;
	text-align: center;
	margin: 0 35px 0 0;
}

#access dl dd {
	overflow: hidden;
}

#access dl dd p span {
	font-size: 85%; /* font-size: 12px; */
}

#access dl dd p:last-child {
	margin: 0;
}

#access dl dd img {
	max-width: 628px;
	width: 100%;
	height: auto;
}

#banner_index {
	padding: 54px 0 74px 0;
}

#banner_index ul {
	width: 494px;
	float: left;
}

#banner_index ul li {
	margin: 0 30px 20px 0;
}

#banner_index .sp_fbshare {
	display: none;
}

/*------------------------------------------------------------
	food
	Cafe&鮨割烹
------------------------------------------------------------*/

#food .titleblock {
	background: url(../images/food/bg.jpg) no-repeat center top;
	background-size: 100% auto;
}

#food .foodblock {
	background: url(../images/template/line.png) repeat-x center bottom;
	background-size: auto 20px;
	padding: 100px 0 120px 0;
}

#food .foodblock:after {
	content: "";
	display: block;
	clear: both;
}

#food .foodblock .textblock {
	max-width: 300px;
	width: 100%;
	float: left;
}

#food .foodblock .textblock h3 {
	margin: 0 0 50px 0;
}

#food .foodblock .textblock h3 img {
	max-width: 300px;
	width: 100%;
	height: auto;
}

#food .foodblock .textblock .mainimg,
#food .foodblock .textblock .subimg {
	display: none;
}

#food .foodblock .textblock h4 {
	font-size: 140%; /* font-size: 20px; */
	line-height: 2em;
	margin: 0 0 20px 0;
}

#food .foodblock .textblock p span {
	font-size: 85%; /* font-size: 12px; */
}

#food .foodblock .textblock dl {
	margin: 45px 0 45px 0;
}

#food .foodblock .textblock dl dt {
	float: left;
}

#food .foodblock .textblock .btn a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 10px 0;
	background: #1c50a1;
	text-align: center;
}

#food .foodblock .photoblock {
	float: right;
	max-width: 630px;
	width: 100%;
}

#food .foodblock .photoblock .mainimg {
	text-align: right;
	margin: 0 0 40px 0;
}

#food .foodblock .photoblock .mainimg img {
	max-width: 540px;
	width: 100%;
	height: auto;
}

#food .foodblock .photoblock .subimg {
	text-align: left;
	margin: 0 0 40px 0;
}

#food .foodblock .photoblock .subimg img {
	max-width: 360px;
	width: 100%;
	height: auto;
}

#food .foodblock .photoblock .imgbox li {
	width: calc(100% / 3);
	float: left;
}

#food .foodblock .photoblock .imgbox li img {
	width: 100%;
	height: auto;
}

#food .foodblock .postlistblock {
	clear: both;
	padding: 80px 0 0 0;
}

#food #sushi.foodblock {
	background: none;
	padding: 100px 0 100px 0;
}

#food #sushi.foodblock .textblock {
	float: right;
}

#food #sushi.foodblock .photoblock {
	float: left;
}

#food #sushi.foodblock .photoblock .mainimg {
	text-align: left;
}

#food #sushi.foodblock .photoblock .subimg {
	text-align: right;
}

/*------------------------------------------------------------
	asobikata
	伊根浦の遊び方
------------------------------------------------------------*/

#asobikata .titleblock {
	background: url(../images/asobikata/bg.jpg) no-repeat center top;
	background-size: 100% auto;
}

#asobikata .titleblock h2 {
	padding: 0 0 77px 0;
}

#ineuramap {
	height: 565px;
	width: 100%;
}

#asobikata .asobikatablock {
	background: url(../images/template/line.png) repeat-x center bottom;
	background-size: auto 20px;
	padding: 100px 0 120px 0;
}

#asobikata .asobikatablock:after {
	content: "";
	display: block;
	clear: both;
}

#asobikata .asobikatablock:last-child {
	background: none;
	padding: 100px 0 100px 0;
}

#asobikata .asobikatablock .textblock {
	max-width: 300px;
	width: 100%;
	float: left;
}

#asobikata .asobikatablock .textblock h3 {
	font-size: 185%; /* font-size: 26px; */
	margin: 0 0 30px 0;
	font-weight: bold;
	letter-spacing: 0.1em;
}

#asobikata .asobikatablock .textblock p {
	line-height: 1.8em;
}

#asobikata .asobikatablock .photoblock {
	float: right;
	max-width: 630px;
	width: 100%;
}

#asobikata .asobikatablock .photoblock .mainimg {
	text-align: right;
}

#asobikata .asobikatablock .photoblock .mainimg img {
	max-width: 540px;
	width: 100%;
	height: auto;
}

#asobikata .asobikatablock .postlistblock {
	clear: both;
	padding: 80px 0 0 0;
}

#asobikata .asobikatablock:nth-child(2n) .textblock {
	float: right;
}

#asobikata .asobikatablock:nth-child(2n) .photoblock {
	float: left;
}

#asobikata .asobikatablock:nth-child(2n) .photoblock .mainimg {
	text-align: left;
}

/*------------------------------------------------------------
	process
	舟屋日和ができるまで
------------------------------------------------------------*/

#process .titleblock {
	background: url(../images/process/bg.jpg) no-repeat center top;
	background-size: 100% auto;
}

#process article {
	clear: both;
	margin: 0 0 15% 0;
}

#process article h3 {
	font-size: 185%; /* font-size: 26px; */
	margin: 0 0 30px 0;
	font-weight: bold;
	letter-spacing: 0;
}

#process article p {
	clear: both;
	margin: 0 0 3em 0;
}

#process .photo {
	margin: 0 0 3em 0;
}

#process .photo:after {
	content: " ";
	display: block;
	clear: both;
}

#process .photo li {
	float: left;
	padding: 0 10px 0 0;
	width: 50%;
	box-sizing: border-box;
}

#process .photo li img {
	max-width: 470px;
	width: 100%;
	height: auto;
}

#process .photo li:last-child {
	float: right;
	padding: 0 0 0 10px;
}

#process .block {
	border: 1px solid #ccc;
	padding: 5% 5% 2% 5%;
}

#process .block h4 {
	font-size: 140%; /* font-size: 20px; */
	font-weight: bold;
	margin: 0 0 10px 0;
}

#process .block .photo img {
	width: 100%;
	height: auto;
}