@charset "UTF-8";
/*
Theme Name: tinyJbrew2
Theme URI: https://tinyjbrew.jp/
Description: tinyJbrew テンプレート
Author: トリプー
Author URI: https://sh-design.jp/
Version: 1.0
*/

/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav.gnav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}

body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav.gnav,section{display:block}ul{list-style:none}

blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}

a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}

del{text-decoration:line-through}

abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}

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

hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}

input,select{vertical-align:middle}

/*================================================
 *  一般・背景設定
 ================================================*/
html{
	overflow-y: scroll;
}
img{
	border:0px;
}
body {
　margin:0px;
	/*overflow: hidden; */
}
.clearfix:after{
	display:block;
	content:"";
	clear:both;
}

/*================================================
 *  リンクカラー設定
 ================================================*/
a , a:link {
	color: #000000;
	outline: none;
}
a:visited {
	color: #666666;
}
a:hover {
	color: #999999;
}
a:active {
	color: #000000;
}
a, ins {
  text-decoration: none;
}

/*================================================
 * 追加CSS設定
 ================================================*/

.w1200{
	max-width:1200px;
	margin:0 auto 0 auto;
	padding:10px;
}
.full {
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}
.bg-white {
	background-color: rgb(255 255 255 / .7);
	padding:20px;
	margin:15px 10px 15px 10px;
}
@media screen and (max-width:781px){
.bg-white {
	border-bottom:solid 1px #999999;
	padding:0px 0px 25px 0px;
	margin:5px 10px 15px 10px;
}
}
@media screen and (min-width:781px){
.sp {
	display:none;
}
.sp img{
	display:none;
	}
}
@media screen and (max-width:781px){
	.pc  {
	display:none ;
}
	.pc img{
	display:none;
	}
}

p.gothic , h1.gothic , h2.gothic , h3.gothic{
	font-family:'NotoSansJP';

}
p.noborder , h1.noborder , h2.noborder , h3.noborder{
	border:none;
}
.padding , p.padding , div .padding , div p.padding  {
	padding:10px 15px 10px 15px;
}
.padding-0 , p.padding-0 , div .padding-0 , div p.padding-0, h1.padding-0 , h2.padding-0 , h3.padding-0   {
	padding:0px;
}
.border-none{
	border:none;
}
div .margin-top--30 , div p.margin-top--30 , div h1.margin-top--30 , div h2.margin-top--30 , div h3.margin-top--30 , div img.margin-top--30 {
	margin-top:-30px;
}
div .margin-top--40 , div p.margin-top--40 , div h1.margin-top--40 , div h2.margin-top--40 , div h3.margin-top--40 , div img.margin-top--40 {
	margin-top:-40px;
}
div .margin-bottom-10 , div p.margin-bottom-10 , div h1.margin-bottom-10 , div h2.margin-bottom-10 , div h3.margin-bottom-10 , div img.margin-bottom-10 {
	margin-bottom:10px;
}
div .margin-bottom-20 , div p.margin-bottom-20 , div h1.margin-bottom-20 , div h2.margin-bottom-20 , div h3.margin-bottom-20 , div img.margin-bottom-20 {
	margin-bottom:20px;
}
div .margin-bottom-30 , div p.margin-bottom-30 , div h1.margin-bottom-30 , div h2.margin-bottom-30 , div h3.margin-bottom-30 , div img.margin-bottom-30 {
	margin-bottom:30px;
}
div .margin-bottom-40 , div p.margin-bottom-40 , div h1.margin-bottom-40 , div h2.margin-bottom-40 , div h3.margin-bottom-40 , div img.margin-bottom-40 {
	margin-bottom:40px;
}
div .margin-bottom-50 , div p.margin-bottom-50 , div h1.margin-bottom-50 , div h2.margin-bottom-50 , div h3.margin-bottom-50 , div img.margin-bottom-50 {
	margin-bottom:50px;
}
div .margin-top-10 , div p.margin-top-10 , div h1.margin-top-10 , div h2.margin-top-10 , div h3.margin-top-10 , div img.margin-top-10 {
	margin-top:10px;
}
div .margin-top-20 , div p.margin-top-20 , div h1.margin-top-20 , div h2.margin-top-20 , div h3.margin-top-20 , div img.margin-top-20 {
	margin-top:20px;
}
div .margin-top-30 , div p.margin-top-30 , div h1.margin-top-30 , div h2.margin-top-30 , div h3.margin-top-30 , div img.margin-top-30 {
	margin-top:30px;
}
div .margin-top-40 , div p.margin-top-40 , div h1.margin-top-40 , div h2.margin-top-40 , div h3.margin-top-40 , div img.margin-top-40 {
	margin-bottom:40px;
}
div .margin-top-50 , div p.margin-top-50 , div h1.margin-top-50 , div h2.margin-top-50 , div h3.margin-top-50 , div img.margin-top-50 {
	margin-bottom:50px;
}

/*================================================
 * 幅設定
 ================================================*/
.max-1200 img{
	max-width: 1200px !important;
}

.wp-block-column img{
	margin-bottom:10px;
}


.is-layout-flex  {
column-gap: 15px;
row-gap: 0px;
}

div p.has-background , div h1.has-background , div h2.has-background , div h3.has-background {
	padding:0.4em 1.0em 0.4em 1.0em ;
}

/*================================================
 *  フォント ロード
 ================================================*/
@font-face{
	font-family:'NotoSansJP';
	src:url('fonts/NotoSansJP-Regular.otf') format('opentype');
	font-display:swap;
}
@font-face{
	font-family:'NotoSansJP';
	src:url('fonts/NotoSansJP-Medium.otf') format('opentype');
	font-weight:bold;
	font-display:swap;
}
@font-face{
	font-family:'NotoSerifJP';
	src:url('fonts/NotoSerifJP-Medium.otf') format('opentype');
	font-display:swap;
}
@font-face{
	font-family:'NotoSerifJP';
	src:url('fonts/NotoSerifJP-SemiBold.otf') format('opentype');
	font-weight:bold;
	font-display:swap;
}


/*================================================
 *  フォント 設定
 ================================================*/

/* H1         */
h1 {
	font-family:'NotoSerifJP', sans-serif;
	font-size:32px;
	line-height:1.4em;
	font-weight:bold;
	margin-bottom:15px;
	margin-top:15px;
	text-align:left;
}
h1.x-large{
	font-size:40px;
	line-height:1.5em;
	margin-bottom:1.52vh;
	margin-top:15px;
}
@media screen and (max-width:1240px){
	h1 {
	font-size:2.6vw;
}
	h1.x-large {
	font-size:3.4vw;
}	
}
@media screen and (max-width:781px){
	h1 {
	font-size:7.5vw;
}
	div h1.x-large {
	font-size:8.0vw;
	line-height:1.4em;
	margin-bottom:20px;
	}
}

/* H2         */
h2 {
	font-family:'NotoSerifJP', sans-serif;
	font-size:28px;
	line-height:1.4em;
	font-weight:bold;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f39900;
	scroll-margin-top: 100px;
	padding-bottom:5px;
	padding-left: 8px;
	margin-bottom:20px;
	margin-top:60px;
	border-left-width: 8px;
	border-left-style: solid;
	border-left-color: #f39900;
}
h2.x-large{
	font-size:40px;
	line-height:1.5em;
	margin-bottom:1.52vh;
	border:none;
	margin-top:50px;
}
h2.large{
	font-size:36px;
	border:none;
	margin-top:25px;
	line-height:1.3em;
	margin-bottom:20px;
}
h2.small {
	font-size:22px;
	font-weight:bold;
	margin-bottom:5px;
	margin-top:0px;
	border:none;
}
@media screen and (max-width:1240px){
	h2 {
	font-size:2.3vw;
}
	h2.x-large {
	font-size:3.4vw;
}	
	h2.large {
	font-size:2.9vw;
}
		h2.small {
	font-size:1.8vw;
}
}
@media screen and (max-width:781px){
	h2 {
	font-size:6.5vw;
}
	h2.x-large {
	font-size:7.7vw;
	line-height:1.4em;
	margin-bottom:20px;
}
	h2.large {
	font-size:7.3vw;
	line-height:1.5em;
	margin-bottom:5px;
	text-align:left;
}
			h2.small {
	font-size:4.8vw;
}
}

/* H3         */
h3 {
	font-family:'NotoSerifJP', sans-serif;
	font-size:24px;
	line-height:1.4em;
	font-weight:bold;
	margin-bottom:0px;
	margin-top:0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f39900;
	padding-bottom: 5px;
}
h3.category-list {
	font-family:'NotoSerifJP', sans-serif;
	font-size:24px;
	line-height:1.4em;
	font-weight:bold;
	border:none;
}
h3.large{
	font-size:32px;
	border:none;
	margin-top:0px;
	line-height:1.3em;
	margin-bottom:5px;
}
h3.medium{
	font-size:28px;
	line-height:1.3em;
	margin-bottom:0px;
	margin-top:0px;
	border:none;
}
h3.small{
	font-size:20px;
	border:none;
	margin-top:0px;
	line-height:1.3em;
	margin-bottom:5px;
}
h3.circle{
	font-size:28px;
}
h3 span.circle{
	font-size:28px;
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f39900;
  text-align:center;
  line-height: 38px;
	color:#ffffff;
}
@media screen and (max-width:1240px){	
	h3 {
	font-size:1.9vw;
}	
	h3.category-list {
	font-size:1.9vw;
}	
	h3.large{
	font-size:2.6vw;
}
	h3.medium {
	font-size:2.3vw;
}
	h3.small{
	font-size:1.61vw;
}
}
@media screen and (max-width:1000px){		
	h3.category-list {
	font-size:2.6vw;
	}
}
@media screen and (max-width:781px){
	h3 {
	font-size:5.7vw;
}
	h3.category-list {
	font-size:5.7vw;
}
	h3.large {
	font-size:7.0vw;
		line-height:1.5em;
		margin-bottom:25px;
		text-align:left;
	}
	h3.medium {
	font-size:6.5vw;
}
	h3.small{
	font-size:4.9vw;
			
}
}

/* H4         */
h4 {
	font-family:'NotoSerifJP', sans-serif;
	font-size:20px;
	line-height:1.4em;
	font-weight:bold;
	margin-bottom:0px;
	margin-top:0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	padding-bottom: 5px;
}
@media screen and (max-width:1240px){	
	h4{
	font-size:1.61vw;
}
}
@media screen and (max-width:781px){
	h4{
	font-size:4.9vw;	
}
}

/* P         */
p {
	font-family:'NotoSerifJP', sans-serif;
	font-size:20px;
	line-height:1.8em;
	font-weight:normal;
	margin-bottom:15px;
}
p.xx-large{
	font-size:28px;
	border:none;
	margin-top:0px;
	line-height:1.3em;
	margin-bottom:5px;
}
p.x-large{
	font-size:24px;
	line-height:2em;
	margin-top:0;
	margin-bottom:15px;
}
p.large{
	font-size:21px;
	line-height:2em;
	margin-top:0px;
	margin-bottom:15px;
}
p.medium{
	font-size:19px;
	line-height:1.6em;
	margin-top:0px;
	margin-bottom:7px;
}
p.small{
	font-size:17px;
	line-height:1.4em;
	margin:0;
	padding:0px;
}
p.caption{
	font-size:16px;
	line-height:1.3em;
	margin:0;
	padding:0px;
}
p.underline a , p.underline{
	text-decoration: underline;
}

@media screen and (max-width:1240px){	
	p {
		font-size:1.6vw;
}
	p.xx-large{
	font-size:2.3vw;
}
	p.x-large {
	font-size:1.93vw;
	}
	p.large {
	font-size:1.69vw;
	}
	p.medium {
		font-size:1.53vw;
		line-height:1.4em;
	}
	p.small{
	font-size:1.4vw;
}
	p.caption{
	font-size:1.2vw;
}
}
@media screen and (max-width:781px){
	p {
		font-size:4.8vw;
}
	p.xx-large {
	font-size:6.5vw;
	}
	p.x-large {
	font-size:4.9vw;
	line-height:1.7em;
	text-align:left;
	margin-bottom:10px;
	}
	p.large {
	font-size:4.7vw;
	line-height:1.5em;
	text-align:left;
	margin-bottom:10px;
	}
	p.medium {
	font-size:4.7vw;
	margin-bottom:0px;		
}
	p.small{
	font-size:4.5vw;
}
	p.caption{
	font-size:2.8vw;
}
}


/* tr         */
tr {
	font-size:16px;
	line-height:1.3em;
	font-family:'NotoSansJP';
	
}
@media screen and (max-width:1240px){	
	tr {
	font-size:1.2vw
	
}
}
@media screen and (max-width:781px){
tr {
	font-size:3.5vw
			
}	
}

strong{
	font-weight:bold;
}





/*================================================
 *  区切りケイドライバー
 ================================================*/


.box-line-1200-divider{
	position:relative;
	margin:30px auto 0px auto;
	padding-top:45px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	background:url("images/title_box.png");
	background-repeat:no-repeat;
	width:1200px;
	height:69px;
}
.box-line-1000-divider{
	position:relative;
	margin:30px auto 0px auto;
	padding-top:45px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	background:url("images/title_box.png");
	background-repeat:no-repeat;
	width:1000px;
	height:69px;
}
@media screen and (max-width:1240px){
.box-line-1200-divider , .box-line-1000-divider {
	padding-top:3.75%;
	background-size:5.75% auto;
	width:100%;
	height:5.75vw;
}
}
@media screen and (max-width:781px){
.box-line-1200-divider , .box-line-1000-divider{
	padding-top:6.9333%;
	background:url("images/title_box_sp.png");
	background-repeat:no-repeat;
	background-size:10.93% auto;
	height:10.93vw;
}
}

.box-line-1200-divider .box-line , .box-line-1000-divider .box-line{
	margin-left:5.75%;
	width:94.25%;
	border-top:solid 1px #f39000;
}
@media screen and (max-width:781px){
.box-line-1200-divider .box-line , .box-line-1000-divider .box-line{
	margin-left:10.93%;
	width:89.07%;
	border-top:solid 2px #f39000;
}
}


/*================================================
 *  共通幅設定
 ================================================*/

.wrap-1200 {

	width:1200px;
	margin:0 auto 0 auto;
}
.wrap-1000 {

	width:1000px;
	margin:0 auto 0 auto;
}

@media screen and (max-width:1240px){
	.wrap-1200 {
	width:96%;
}
	.wrap-1000 {
	width:96%;
}
}
a.hvalpha , .hvalpha a {
	transition:all 0.6s ease;
	-moz-transition:all 0.6s ease;
	-webkit-transition:all 0.6s ease;
	-ms-transition:all 0.6s ease;
}
a.hvalpha:hover , .hvalpha a:hover{
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
}

/*================================================
 *  コンタクトボタン
 ================================================*/

.tinyJbrew-contact-wrap{
	position:relative;
	margin:100px auto 60px auto;
	text-align:center;
	width:1200px;
}
@media screen and (max-width:1200px){
.tinyJbrew-contact-wrap{
	width:96%;
}
}
@media screen and (max-width:781px){
.tinyJbrew-contact-wrap{
	margin:80px auto 40px auto;
}
}
div .tinyJbrew-contact-button a{
	display:block;
	margin:0px auto;
	background:#4d4d4d;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	font-family:'NotoSerifJP', serif;
	font-size:36px;
	font-weight:bold;
	line-height:68px;
	color:#ffffff;
	text-decoration:none;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	-ms-transition:all 0.4s ease;
	transition:all 0.4s ease;
	width:462px;
	border:solid 2px #4d4d4d;
	padding-bottom:3px;
}
.tinyJbrew-contact-button a:hover{
	background:#ffffff;
	color:#4d4d4d;
	color:#000000;
}
@media screen and (max-width:1240px){
div .tinyJbrew-contact-button a{
	font-size:3.0vw;
	line-height:5.6666vw;
	width:40%;
}
}
@media screen and (max-width:781px){
div .tinyJbrew-contact-button a{
	font-size:5.8666vw;
	line-height:11.4666vw;
	width:80%;
}
}




/*================================================
 *  ホーム
 ================================================*/
#home img{
	width:100%;
}

#entry-top {
	margin-top:-60px;
	margin-bottom:110px;
}
#home .wp-block-image.pc {
	padding-top:20px;
}




@media screen and (max-width:781px){
	#entry-top {
	margin-top:-60px;
	margin-bottom:90px;
}
}

@media screen and (max-width:781){
.wp-block-image.sp {
	padding-top:30px;
}
}

/*================================================
 *  single
 ================================================*/
#single img{
	width:100%;
}

#single header{
	border-bottom:solid 1px #f39000;
	margin-bottom:40px;	
}
@media screen and (max-width:781px){
#single header{
	border-bottom:solid 2px #f39000;
}
}
#single header h1{
	margin-bottom:40px;
}

#single header span.date{
	text-align:right ;
	display:block;
	margin-bottom:10px;
}





/*================================================
 *  最近の投稿
 ================================================*/


.recent-entry-wrap{
	position:relative;
	margin:0px auto 0px auto;
	width:1200px;
	padding-bottom:0px;
	margin-top:30px;
}
.recent-entry-wrap .entry-wrap{
	padding-left:10px;
	padding-right:10px;
}


@media screen and (max-width:1240px){
.recent-entry-wrap{
	width:96%;
}
}

.recent-entry-wrap .entry-list-wrap{
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	width:100%;
}
.recent-entry-wrap .entry-thumb  {
	width:100%;
	margin-bottom:10px;
}
.recent-entry-wrap .entry-thumb img {
	width:100%;
	height:100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
}

.recent-entry-wrap .entry{
	width: calc((100% - 36px) / 3);
	flex-direction: column;
	border: 1px solid #cccccc;
	height:auto;
}



@media screen and (max-width:1000px){
	.recent-entry-wrap .entry{
	width: calc((100% - 36px) / 2);
	}
}
@media screen and (max-width:781px){
.recent-entry-wrap .entry{
	width: 100%;
	margin-bottom:20px;
}
}




.recent-entry-wrap .entry {
	position: relative;
}
.recent-entry-wrap .entry-excerpt {
margin:0px 0px 50px 0px;
}
@media screen and (max-width:781px){
.recent-entry-wrap .entry-excerpt {
margin-bottom:6vh;
}
}
.recent-entry-wrap .entry-read {
position: absolute;
right: 0;
bottom: 0;
margin:20px 0px 0px 0px;
padding: 0px 10px 2px 10px;
background-color:#000;
}
.recent-entry-wrap .entry-read p {
position: absolute;
margin:0px;

}
.recent-entry-wrap .entry-read:hover { 
background-color: #666666;
}
.recent-entry-wrap .entry-read a ,.recent-entry-wrap .entry-read a:link {
color:#fff;
}


/*================================================
 *  ボトムメニュー
 ================================================*/
.footer-menu img , .footer-menu a {
	width:100%;
}

.footer-menu .is-layout-flex  {
column-gap: 10px;
row-gap: 0px;
}

/*================================================
 *  ページ
 ================================================*/
#page img{
	width:100%;
}

#page .is-layout-flex  {
column-gap: 20px;
row-gap: 0px;
}

#page .layer-parent {
	position: relative
}

#page .layer-child {
	position: absolute;
	top:50%;
  left: 50%;
	transform: translate(-50%,-50%);
	width:93%;
}
#page .layer-child-sp-kumi {
	position: absolute;
	top:50%;
  left: 50%;
	transform: translate(-50%,-50%);
	width:93%;
	text-align: center;
}
#page .layer-child-thin {
	position: absolute;
	top:50%;
  left: 50%;
	transform: translate(-50%,-50%);
	width:60%;
}

@media screen and (max-width:781px){
#page .layer-child {
	position: static;
	transform: none;
	width:100%;
	margin-top:15px;
}
}
#page .layer-child .bg-white{
	
}
@media screen and (max-width:781px){
#page .layer-child .bg-white {
	
}
}



/*================================================
 *  フッター
 ================================================*/

#footer-area{
	width:100%;
	margin-top:30px;
	margin-bottom:35px;
}
#footer-area .footer-wrap {
	 margin: 0 20px;
}
#footer-area .footer-wrap .footer-logo-wrap{
	margin-right:auto;
}
#footer-area .wp-footer-wrap img{
	width:256px;
}
@media screen and (max-width:1240px){
#footer-area .footer-wrap img , #footer-area .wp-block-image.image{
	width:200px;
}
}
@media screen and (max-width:781px){
#footer-area .footer-wrap img , #footer-area .wp-block-image{
	width:150px;
}
}
@media screen and (max-width:550px){
#footer-area .footer-wrap img , #footer-area .wp-block-image {
	width:130px;
}
}

#footer-area .footer-wrap p {
	font-family:'NotoSansJP', sans-serif;
	font-size:12px;
	line-heighth:1.2em;
	padding:0px;
	margin:0;
	color:#000000;
	width:100%;
	text-align: right;
	
}
#footer-area .footer-wrap .has-text-align-right{
	padding:0px;
	margin:0;
}
@media screen and (max-width:781px){
#footer-area .footer-wrap p {
	font-size:2.8vw;
}
}




/*================================================
 *  フェイスブック
 ================================================*/
.facebook-wrap{
	position:relative;
	margin:70px auto 0px auto;
	font-family:'NotoSerifJP', serif;
	font-size:24px;
	line-height:1.2em;
	font-weight:bold;
	text-align:center;
	width:500px;
}



.facebook-wrap iframe{
	margin-top:25px;
	width:100% !important;
}

.facebook-wrap img , .facebook-link-wrap img{
	width:auto;
	height:auto;
}

@media screen and (max-width:550px){
.facebook-wrap{
	font-size:4.8vw;
	width:96%;
}
}

.facebook-link-wrap{
	position:relative;
	margin:70px auto 0px auto;
	font-family:'NotoSerifJP', serif;
	font-size:24px;
	line-height:1.2em;
	font-weight:bold;
	text-align:center;
	width:750px;
}


.facebook-wrap .icon,
.facebook-link-wrap .icon{
	margin-top:25px;
}
.facebook-link-wrap .link{
	margin-top:20px;
	font-size:80%;
}
.facebook-link-wrap .link .triangle{
	margin-left:5px;
}
.facebook-link-wrap .link .triangle img{
	width:14px;
}

@media screen and (max-width:781px){

.facebook img{
		width:85%;
	}
	
.facebook-link-wrap{
	font-size:3.2vw;
	width:96%;
}
.facebook-link-wrap .icon img{
	width:8.5vw;
}
.facebook-link-wrap .link{
	margin-top:10px;
}
.facebook-link-wrap .link .triangle img{
	width:1.86vw;
}
}

/*================================================
 *  トップイメージ（固定・カテゴリーページ）
 ================================================*/

.top-image-wrap {
	position:relative;
	width:100%;
}
.top-image-wrap img{
	width:100%;
	height:auto;
}
.top-image-wrap .page-title-wrap{
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	text-align:center;
	width:100%;
	
	font-size:50px;
	color:#ffffff;
	font-family:'NotoSerifJP', serif;
	text-shadow: 3px 3px 6px black;
	letter-spacing: 0.1em
}

.top-image-wrap .tinyjbrew-logo{
	position:absolute;
	top:80px;
	right:2%;
	width:500px;
}
@media screen and (max-width:1600px){
.top-image-wrap .tinyjbrew-logo{
	width:30%;
}
}


@media screen and (max-width:1240px){
.top-image-wrap .page-title-wrap {
	font-size:4.0vw;
	
}

}

@media screen and (max-width:781px){

.top-image-wrap img{
	height: 86vh;
}
.top-image-wrap.topics img , .top-image-wrap.casestudies img , .top-image-wrap.faq img , .top-image-wrap.contact img{
	height: auto;
}
.top-image-wrap img {
	object-fit: cover;
}
.top-image-wrap .page-title-wrap {
	font-size:6.5vw;
	line-height:1.4em;
}	
.top-image-wrap .tinyjbrew-logo{
	top:0px;
	width:43%;
	transform:translate(0%, -32%);
}
	.top-image-wrap .tinyjbrew-logo img{
object-fit: contain;
}
}






/*-----------------------------------------------*/
/* taiho button                                  */
/*-----------------------------------------------*/
p.taiho-btn{
	width:auto;
	height:auto;
	display:inline-block;
	padding:0;
	margin:0;
}
p.taiho-btn img{
	vertical-align: middle;
	padding:0px 0px 7px 0px;
	margin:0;
}
p.taiho-btn.has-background{
	
	padding:0px 15px 0px 15px;
	margin:0;
}




/*-----------------------------------------------*/
/* カテゴリー一覧                            */
/*-----------------------------------------------*/

.category-page-wrap{
	position:relative;
	margin:0px auto 0px auto;
	width:1200px;
	padding-bottom:100px;
	margin-top:40px;
}
.category-page-wrap .entry-list-wrap{
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	width:100%;
	margin-top:50px;
}



@media screen and (max-width:1240px){
.category-page-wrap{
	width:96%;
}
}
.category-page-wrap a , a:link {
	color:#000000;
}
.category-page-wrap a:hover {
	color: #666666;
}
.category-page-wrap a, ins {
  text-decoration: none; 
}





.category-page-wrap .entry-thumb  {
	width:100%;
	margin-bottom:10px;
}

.category-page-wrap .entry-thumb img {
	width:100%;
	height:100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
}
.category-page-wrap .entry-thumb p {
	flex-grow: 0 1 30%;
}

.category-page-wrap .entry{
	width: calc((100% - 36px) / 3);
	flex-direction: column;
	border: 1px solid #cccccc;
	height:auto;
}

@media screen and (max-width:1000px){
	.category-page-wrap .entry{
	width: calc((100% - 36px) / 2);
	}
}
@media screen and (max-width:781px){
.category-page-wrap .entry{
	width: 100%;
	margin-bottom:20px;
}
}

.category-page-wrap .entry-wrap{
	padding-left:10px;
	padding-right:10px;
}

.category-page-wrap span.date{
	margin:0px 0px 5px 0px;
	font-family:'NotoSerifJP', sans-serif;
	font-size:16px;
	line-height:1.4em;
}

@media screen and (max-width:1000px){
	.category-page-wrap h1{
	font-size:3.2vw;
}
.category-page-wrap p{
	font-size:2.0vw;
}
.category-page-wrap span.date {
	font-size:1.8vw;
}
}
@media screen and (max-width:750px){
	.category-page-wrap h1{
	font-size:6.0vw;
	margin-top:0px;
}
.category-page-wrap p{
	margin-top:15px;
	font-size:4.5vw;
	text-align:left;
	line-height:1.6em;
}
			.category-page-wrap span.date {
	font-size:3.8vw;
}
}

.category-page-wrap .date {
	display:block;
	text-align: right;
	line-height:1.0em;
	margin:10px;
	padding:0px;
}

.category-page-wrap .entry {
	position: relative;
}
.category-page-wrap .entry-excerpt {
margin:0px 0px 50px 0px;
}
.category-page-wrap .entry-read {
position: absolute;
right: 0;
bottom: 0;
margin:20px 0px 0px 0px;
padding: 2px 10px 2px 10px;
background-color:#000;
}
.category-page-wrap .entry-read p {
position: absolute;
margin:0px;

}
.category-page-wrap .entry-read:hover { 
background-color: #666666;
}
.category-page-wrap .entry-read a ,.category-page-wrap .entry-read a:link {
color:#fff;
}


/*-----------------------------------------------*/
/* FAQ Q&A                            */
/*-----------------------------------------------*/
.faq-page-wrap{
	margin-top:40px;
}

.faq ul , ol {
	margin:0px 0px 20px 0px;
}
.faq ul li {
	font-size:19px;
	font-family:'NotoSansJP';
	line-height:1.4em;
	list-style-type: disc;
	list-style-position:inside;	
}
.faq ol li {
	font-size:19px;
	font-family:'NotoSansJP';
	line-height:1.4em;
	list-style-type: decimal;
	list-style-position:inside;	
}

.faq #toc {
	text-align:center;
	margin:20px auto 0px auto;
	overflow: hidden;
	
}
.faq #toc ol {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	text-align:left;
	margin:0px 30px 0px 30px;
	
}
@media screen and (max-width:1240px){
.faq ul li , .faq ol li {
	font-size:1.53vw;
	}
}
@media screen and (max-width:781px){
.faq ul li , .faq ol li {
	font-size:4.7vw;
	}
}
 .faq #toc ol li {
	list-style-type: none;
	font-weight:normal;
	font-family:'NotoSerifJP', sans-serif;
	font-size:17px;
	line-height:1.1em;
	display:block;
	width: calc((100% - 30px) / 2); 
}

 .faq #toc ol li a{
	 	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	 padding-bottom:3px;
}
.faq ul {
	margin-top:0px;
}
 .faq h2 {
	border-left:none;
}

 .faq span.q {
	font-size:36px;
	color:#ffffff;
	background-color:#f39900;
	padding:0px 10px 10px 10px;
	display:inline-block;
	
}
 .faq #toc span.q {
	font-weight:normal;
	font-family:'NotoSerifJP', sans-serif;
	font-size:17px;
	line-height:1.1em;
	color:#000000;
	background : none;
}

@media screen and (max-width:1240px){	
	 .faq #toc ol li ,.faq #toc ol li span.q   {
	font-size:1.4vw;
}
	 .faq h2 span.q {
	font-size:2.3vw;
}
}
@media screen and (max-width:781px){	
.faq #toc ol {
	margin:0px 0px 0px 0px;
}
	 .faq #toc ol li {
	font-size:4.0vw;
		 line-height:1.4em;
		 width:100%;
}
	.faq #toc ol li span.q   {
	font-size:4.0vw;
}
	 .faq span.q {
	font-size:24px;
	padding:0px 10px 5px 10px;
}
	.faq h2 span.q {
	font-size:6.5vw;
}
}







/*-----------------------------------------------*/
/* contact                                       */
/*-----------------------------------------------*/


@media screen and (max-width:781px){
	.contact-wrap ul{
	text-align:center;
	}
}


.contact-wrap ul li{
	display:inline-block;
	vertical-align:top;
}

.contact-wrap ul li:nth-child(0){
	margin-top:30px;
	font-family:'NotoSerifJP', serif;
	font-weight:bold;
	font-size:36px;
	line-height:1.2em;
	width:100%;
}
.contact-wrap ul li:nth-child(1){
	margin-top:40px;
	width:80%;
}
.contact-wrap ul li:nth-child(n+2){
	margin-top:20px;
	width:80%;
}




/*-----------------*/
/* form            */
/*-----------------*/
.form-name{
	float:left;
	margin-right:2%;
	font-family:'NotoSansJP', sans-serif;
	font-size:22px;
	line-height:50px;
	font-weight:bold;
	text-align:right;
	width:30%;
}
.form-name .blank{
	font-size:0px;
}

.form-input{
	float:left;
	font-family:'NotoSansJP', sans-serif;
	font-size:22px;
	font-weight:bold;
	text-align:left;
	width:68%;
}

@media screen and (max-width:1200px){
.form-name{
	font-size:1.8333vw;
	line-height:4.1666vw;
}
}

@media screen and (max-width:750px){
.form-name{
	margin-right:0%;
	font-size:3.7333vw;
	line-height:1.5em;
	text-align:left;
	width:100%;
}
.form-name .blank{
	font-size:0px;
	line-height:0em;
}
.form-input{
	width:100%;
}
.form-input .g-recaptcha{
	-moz-transform:scale(0.8) translate(-12%, -12%);
	-webkit-transform:scale(0.8) translate(-12%, -12%);
	-ms-transform:scale(0.8) translate(-12%, -12%);
	transform:scale(0.8) translate(-12%, -12%);
}
}

.form-input a{
	color:#000000;
}

.form-name sup{
	font-size:60%;
	top:-0.2em;
	color:#ff0000;
}

.form-input .txfield{
	padding-left:10px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	width:100%;
	height:50px;
	border:solid 1px #808080;
}
.form-input .txarea{
	padding-left:10px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	font-family:'NotoSansJP', sans-serif;
	font-size:22px;
	font-weight:bold;
	width:100%;
	height:320px;
	border:solid 1px #808080;
}

.form-input input[type="text"]{
	font-family:'NotoSansJP', sans-serif;
	font-size:22px;
	font-weight:bold;
}
.form-input input[type=checkbox]{
	margin-right:10px;
	-moz-transform:scale(1.4);
	-webkit-transform:scale(1.4);
	-ms-transform:scale(1.4);
	transform:scale(1.4);
}

@media screen and (max-width:1200px){
.form-input{
	font-size:1.8333vw;
}
.form-input .txarea{
	font-size:1.8333vw;
}
.form-input input[type="text"]{
	font-size:1.8333vw;
}
}
@media screen and (max-width:750px){
.form-input{
	font-size:3.7333vw;
}
.form-input .txarea{
	font-size:3.7333vw;
}
.form-input input[type="text"]{
	font-size:3.7333vw;
}
}

.form-input .submit-button input[type="button"]{
	display:block;
	background:#4d4d4d;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	font-family:'NotoSansJP', sans-serif;
	font-size:30px;
	font-weight:bold;
	line-height:60px;
	color:#ffffff;
	text-decoration:none;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	-ms-transition:all 0.4s ease;
	transition:all 0.4s ease;
	width:400px;
	border:solid 2px #4d4d4d;
}
.form-input .submit-button input[type="button"]:hover{
	background:#ffffff;
	color:#4d4d4d;
}

@media screen and (max-width:1200px){
.form-input .submit-button input[type="button"]{
	font-size:2.5vw;
	width:62%;
}
}
@media screen and (max-width:750px){
.form-input .submit-button input[type="button"]{
	font-size:5.3333vw;
	width:70%;
}
}

/*-----------------------------------------------*/
/* confirm                                       */
/*-----------------------------------------------*/
.form-input .confirm{
	padding-left:10px;
	background:#efefef;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	font-family:'NotoSansJP', sans-serif;
	font-size:22px;
	line-height:50px;
	font-weight:bold;
	width:100%;
	height:50px;
	border:solid 1px #4d4d4d;
}

.form-input .confirm-area{
	padding-left:10px;
	background:#efefef;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	font-family:'NotoSansJP', sans-serif;
	font-size:22px;
	font-weight:bold;
	width:100%;
	min-height:320px;
	border:solid 1px #4d4d4d;
}

@media screen and (max-width:1200px){
.form-input .confirm{
	font-size:1.8333vw;
}
.form-input .confirm-area{
	font-size:1.8333vw;
}
}
@media screen and (max-width:750px){
.form-input .confirm{
	font-size:3.7333vw;
}
.form-input .confirm-area{
	font-size:3.7333vw;
}
}

.form-input .first-button{
	float:left;
	margin-top:20px;
	margin-right:2%;
	width:49%;
}
.form-input .second-button{
	float:left;
	margin-top:20px;
	width:49%;
}
@media screen and (max-width:750px){
.form-input .first-button{
	margin-top:10px;
	margin-right:0%;
	width:70%;
}
.form-input .second-button{
	margin-top:30px;
	width:70%;
}
}

.form-input .submit-flex-button input[type="button"]{
	display:block;
	background:#4d4d4d;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	font-family:'NotoSansJP', sans-serif;
	font-size:30px;
	font-weight:bold;
	line-height:60px;
	color:#ffffff;
	text-decoration:none;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	-ms-transition:all 0.4s ease;
	transition:all 0.4s ease;
	width:100%;
	border:solid 2px #4d4d4d;
}
.form-input .submit-flex-button input[type="button"]:hover{
	background:#ffffff;
	color:#4d4d4d;
}

@media screen and (max-width:1200px){
.form-input .submit-flex-button input[type="button"]{
	font-size:2.5vw;
}
}
@media screen and (max-width:750px){
.form-input .submit-flex-button input[type="button"]{
	font-size:5.3333vw;
}
}

/*-----------------------------------------------*/
/* thanks                                        */
/*-----------------------------------------------*/
.contact-wrap ul li:nth-child(3) .thanks-wrap{
	position:relative;
	padding:150px 30px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	font-family:'NotoSansJP', sans-serif;
	font-size:24px;
	font-weight:bold;
	line-height:1.5em;
	width:100%;
	border:solid 1px #4d4d4d;
}
@media screen and (max-width:1200px){
.contact-wrap ul li:nth-child(3) .thanks-wrap{
	padding-top:12.5vw;
	padding-bottom:12.5vw;
	font-size:2.0vw;
}
}
@media screen and (max-width:750px){
.contact-wrap ul li:nth-child(3) .thanks-wrap{
	font-size:3.7333vw;
}
}