@charset "UTF-8";
/*
Theme Name: Hp20
Description: HPテーマ2021年版（トップページ・サブページ１・サブページ２・会社概要・ブログ・お問い合わせ）
Author: 株式会社フォレストバーウッド
Author URI: https://forestbarwood.net/
Version: 1.0.0
Tags: シンプル, ブログ
*/

/*
 -- 注意 --

 全体的なスタイリングは先に呼び出される以下CSSに準じます
 /assets/css/reset.css
 /assets/css/base.css
 /assets/css/decorate.css
 /assets/css/locate.css
 /assets/css/buttons.css

 また、固定ページと連動したスタイリングは以下CSSでお願いします
 user-top.css
 user-sub1.css
 user-sub2.css
 user-company.css
 user-blog.css
 user-inquiry.css
 
 このCSSは最後に読み込まれる為、レスポンシブの調整を目的として利用します
 固定要素の色やサイズ変更はconfig.cssでお願いします
 
*/

/* レスポンシブ（パソコン） */
/* タブレット用のレイアウト　1281px以上 */

	.pc {
		display: inline-block;
	}
	.sp ,
	.tb ,
	.not-pc {
		display: none;
	}

/* レスポンシブ（タブレット） */
@media screen and (max-width: 1280px) {
/* タブレット用のレイアウト　1024px以下 */
/* タブレット用のレイアウト　1280px以下 */

	.tb {
		display: inline-block;
	}
	.sp ,
	.not-tb {
		display: none;
	}

	/* 追加 */
	div.bar_link ul {
		font-size: 78%;
	}
	div.branding {
		width: auto;
	}
}

/* レスポンシブ（スマートフォン） */
@media screen and (max-width: 768px) {
/* スマートフォン用のレイアウト　600px未満 */
/* スマートフォン用のレイアウト　768px以下 */

	.sp {
		display: inline-block;
	}
	.tb ,
	.pc ,
	.not-sp {
		display: none;
	}

	/* 追加 */
	header {
		position: static;
		opacity: 1.0;
	}

	header div.bar_string {
		width: calc(100% - 50px);    
	}
	header div.bar_link ,
	header div.bar_link ul {
		display: none;
	}
	
	h2 {
		font-size: 200%;
		top: -70px;
	}
	
	div.btn ,
	div.btn a ,
	div.btn img {
		height: auto;
		width: 100%;
	}

	div.contents p {
		width: 100%;
	}

	/*　SPマージン -- px指定　*/
	.m-sp1 { margin: 1px; width: auto;}
	.m-sp2 { margin: 2px; width: auto;}
	.m-sp3 { margin: 3px; width: auto;}
	.m-sp4 { margin: 4px; width: auto;}
	.m-sp5 { margin: 5px; width: auto;}

	/* google-map */
	iframe {
		width: 100%;
		height: 300px;
	}

	.w-float.sp-width ,
	.sp-width {
		width : calc(100% - 10px);
		margin : 0 auto;
	}



	
	/* TOP */

	.shop-list {
		background-image: url(https://zaruya.info/wp/wp-content/themes/hp20/assets/images/top/sp-tenpo-list.png);
		background-size: contain;
		background-repeat:  no-repeat;
		padding-bottom: 50px;
		width: 100%;
		margin: 30px auto 0;
	}
	.shops-box {
		width: 100%;
		padding: 70px 0 0;
	}
	.shops {
		width: 100%;
	}
	.shops tr td {
		width: calc(100% - 2em);
		padding: 0.5em 1em;
	}
	
	/* INFORMATION */
	#information-list hr {
		width: 90%;
	}
	#information-list p {
		font-size: 100%;
	}
	#information-list .list {
		width: 90%;
		margin-top : 0;
	}
	
	.message {
		width: 100%;
		margin: 20px auto;
	}

	.w-full {
		margin: 0;
	}
	.w-float {
		width: 100%;
		float: none;
	}
	.w-float img ,
	.w-float p {
		width: 100%;
		height: auto;
	}
	footer {
		padding: 0;
	}
	footer div.bar_link {
		margin: 0 0 10px;
		width: 100%;
		height: auto;
	}
	footer div.bar_link ul {
		border-top: 1px solid #333;
		width: 100%;
	}
	footer div.bar_link ul li {
		background-color: #f5f5f5;
		border-bottom: 1px solid #333;
		display: block;
		margin: 0px;
		padding : 1em 0;
		text-align: center;
		font-size: 120%;
		font-weight: bold;
	}
		
	.midashi {
		width: auto;
		height: auto;
	}

	/* sub2 */
	.produce {
		width: 100%;
		margin: 20px auto;
	}
	.produce #wine-dekirumade {
		line-height: 2em;
		border-top: 1px solid #333;
		border-bottom: 1px solid #333;
		text-align: center;
		font-size: 200%;
		font-weight: bold;
	}
	.produce p {
		padding: 0 5px;
		width: calc(100% - 10px);
	}

	/* company */
	.company ,
	.service ,
	.link ,
	.links {
		width: 100%;
		margin: 20px auto;
	}
	.link ,
	.links {
		width: 96%;
		margin: 0 auto;
	}
	.links p {
		font-size: 100%;
	}
	.company-list {
		width: 96%;
		margin: 0 auto;
	}
	.company-list tr th {
		width: 6em;
		text-align: left:
	}
	.service-item ,
	.service-beer {
		width: 90%; 
	}
	.service-beer .service-beers {
		width: 100%;
		height: auto;
		margin: 0;
	}
	.service-beer .service-beers img {
		width: 90%;
		height: auto;
	}

	.company .midashi {
		max-width: 150px;
		margin: 20px auto;
	}

	.link .midashi {
		max-width: 100px;
		margin: 20px auto;
	}
	.link .links span ,
	.link .links p {
		font-size: 120%;
	}

	.service .midashi {
		max-width: 180px;
		margin: 20px auto;
	}	

	/* blog */
	#main ,
	#sidebar {
		float: none;
	}
	#main ,
	#main .topic .note ,
	#sidebar {
		width: 100%;
	}

	#main .topic
	{
		margin: 0 auto;
	}
	#main .topic img
	{
		width: 100%;
		height: auto;
	}
/*
	#sidebar .searchform {
		width: 100%;
	}
	#sidebar .searchfield {
		width: calc(100% - 50px);
	}*/	
	/* inquiry */
	#inquiry {
		width: 100%;
		margin: 0 auto;
	}
	#inquiry-list ,
	#inquiry-list-check {
		padding : 0 5px;
		width: calc(100% - 10px);
	}
	#inquiry-list tr th ,
	#inquiry-list tr td {
		display: block;
		line-height: 1.5em;
		padding : 2px 5px;
		width: calc(100% - 10px);
	}
	#inquiry-list tr td {
		padding : 2px 5px 10px;
	}


}


/* reCAPTCHA非表示 */
.grecaptcha-badge { visibility: hidden; }