@charset "UTF-8";
/*
Theme Name: monsteryokohama
*/

html {
	font-size	: 112.5%;
	font-family	: "メイリオ";
}
html,
.letter_color {
	color		: #333;
}
body {
	margin		: 0;
	padding		: 0;
}
p {
	margin		: 0 0 1em 0;
	line-height	: 2;
}
a {
	color		: #03c;
	transition	: 0.3s;
	text-decoration	: none;
}
a:hover,
a:active,
a:focus {
	color		: #f60;
}
img {
	max-width	: 100%;
	height		: auto;
	vertical-align	: bottom;
}
.string_before:before {
	content		: attr(data-before);
}
.string_after:after {
	content		: attr(data-after);
}

/*******************************
サイト骨組み・コンテンツ部
*******************************/
body {
}
	header {
	}
		#top_sentence {	/* 1024px	*/
		}
		#header_wrap {	/* 1024px	*/
		}
			#header_inner {
			}
	#contents_full {
	}
		#contents_wrap {	/* 1024px	*/
		}
			#breadcrumb {	/* functions.phpで生成	*/
			}
			#contents {
			}
				#main_wrap {
				}
					main {
					}
				#sidebar {
				}
	footer {
	}

@media screen and (min-width:1025px) {
	#contents_full {
		background	: repeating-linear-gradient(135deg,
						rgba(213,244,255,0.2) 0px, rgba(213,244,255,0.2) 5px,
						rgba(213,244,255,0.5) 5px, rgba(213,244,255,0.5) 6px,
						rgba(213,244,255,0.8) 6px, rgba(213,244,255,0.8) 7px,
						rgba(213,244,255,0.5) 7px, rgba(213,244,255,0.5) 8px);
	}
}
#contents_wrap {
	margin		: 0 auto;
	max-width	: 1024px;
	box-sizing	: border-box;
	border-style	: solid;
	border-width	: 0 1px;
	border-color	: #ccc;
	background	: white;
}
#contents {
	display		: table;	/* for table-cell	*/
	margin		: 0 auto;
	width		: 100%;	/* 画面幅を狭くしていっても横スクロールバーを出現させない	*/
	max-width	: 1024px;
}
#main_wrap {
	display		: table-cell;
	padding		: 1.5em 0 1em;
	vertical-align	: top;
	border-style	: solid;
	border-color	: #ccc;
	border-width	: 0 1px 0 0;
}
#sidebar {
	display		: table-cell;
	padding		: 1.5em 0 1em;
	width		: 272px;
/* chromeの縦スクロールバーが幅16pxなので、#contentsの実質幅が1024-16=1008pxになったらブレイクする。
 * 実質幅1024～1008の間は#sidebar幅固定で、#main_wrap幅のみ狭くさせる	*/
	box-sizing	: border-box;
	vertical-align	: top;
	background	: lightyellow;
}
main {
	display		: block;	/* for IE11	*/
	margin		: 0 auto;
	max-width	: 720px;
	height		: 100%;
}
@media screen and (max-width:1024px) {
	#contents,
	#main_wrap,
	#sidebar {
		display		: block;
		width		: auto;
	}
	#main_wrap {
		padding-right	: 1.5vw;
		padding-left	: 1.5vw;
	}
	#sidebar {
		margin		: 0 auto;
		max-width	: 720px;
	}
}
/******* サイト骨組み・コンテンツ部 *******/

/*******************************
ヘッダー
*******************************/
#top_sentence {
	margin		: 0 auto;
	padding		: 0.2em 0.4em 0.6em;
	max-width	: 1024px;
	box-sizing	: border-box;
	line-height	: 1.2;
	overflow	: hidden;	/* for float	*/
}
@media screen and (max-width:800px) {	/* ハンバーガーメニュー出現と合わせる	*/
	#top_sentence {
		padding-right	: 145px;
		min-height	: 60px;
	}
}
#top_sentence span {
	font-size	: 0.9em;
}
#sitemap_link {
	float		: right;
	margin-left	: 1em;
}

#header_wrap {
	position	: relative;
	margin		: 0 auto 0.5em;
	padding		: 2px;
	max-width	: 1024px;
	box-sizing	: border-box;
	overflow	: hidden;	/* 「アームレスリング」文字がはみ出た場合に備え	*/
	background	: linear-gradient(to right, dodgerblue 20%, rgba(8, 76, 210, 1) 90%);
}
#header_inner {
	position	: relative;
	padding		: 16% 0 0 0;
	font-size	: 44px;	/* 「腕相撲、アームレスリング。」の文字サイズ。これがベースとなる	*/
	white-space	: nowrap;
}
@media screen and (max-width:1024px) {
	#header_inner {
		font-size	: 4.2vw;
	}
}
#header_inner:before {
	content		: "";
	position	: absolute;
	top		: 0;
	right		: 0;
	display		: block;
	width		: 32%;	/* 100%でOKだが一応	*/
	height		: 100%;
	background	: url(../../uploads/images/header_monster.png) no-repeat right/contain;
	z-index		: 1;
}
#header_gym_info {
	position	: absolute;
	bottom		: 0;
	right		: 0;
	padding		: 0 32% 0 0;
	width		: 93%;
	height		: 2.3em;
	box-sizing	: border-box;
	text-align	: right;	/* 内包するinline-blockの右寄せ	*/
	color		: dodgerblue;
	background	: white;
}
#header_gym_info:before {
	content		: "";
	position	: absolute;
	top		: 0;
	left		: 0;
	border-style	: solid;
	border-width	: 2.3em 2.3em 0 0;
	border-color	: dodgerblue transparent transparent transparent;
}
#header_gym_info_inner {	/* PC時に住所・屋号をセンタリングするため1枚かます	*/
	display		: inline-block;	/* for minimum width	*/
	font-size	: 0.98em;	/* 「腕相撲、アームレスリング。」の文字サイズ基準	*/
	text-align	: center;
}
#header_gym_address {
	font-size	: 0.625em;	/* 「モンスター道場YOKOHAMA」の文字サイズ基準	*/
	line-height	: 1.8;
}
#header_gym_name {
	font-family	: "rounded-mplus-1p-bold-ttf";
	font-display	: swap;
	font-weight	: bold;
	line-height	: 1.0;
}
#header_inner a {
	position	: absolute;
	top		: 0;
	left		: 0;
	display		: block;
	width		: 100%;
	height		: 100%;
	font-weight	: bold;
	color		: white;
	z-index		: 3;
}
#header_inner a:hover {
	background	: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 100%);
}
#header_a_text {
	display		: block;
	padding		: 0 29% 0 0;
	text-align	: right;
	line-height	: 1.4;
	font-family	: "rounded-mplus-1p-bold-ttf";
	font-display	: swap;
}
#header_udezumou {
	display		: inline-block;
	transform	: rotate(-5.0deg);
}
#header_udezumou:after {
	content		: "、";
}
#header_armwrestling {
	display		: inline-block;
	transform	: rotate(-2.5deg);
}
#header_armwrestling:after {
	content		: "。";
}
@media screen and (max-width:512px) {
	#header_wrap {
		padding		: 0;
	}
	#header_inner {
		padding		: 80% 0 0 0;
		font-size	: 7.6vw;
	}
	#header_inner:before {
		right		: auto;
		top		: 37%;
		left		: 3%;
		width		: 94%;
		height		: 60%;
		background-color: white;
		background-position	: center;
		background-size	: 96%;
	}
	#header_a_text {
		padding		: 0 0 0 2%;
		text-align	: center;
	}
	#header_gym_info {
		bottom		: auto;
		right		: auto;
		top		: 14%;
		left		: 0;
		padding		: 0;
		width		: 100%;
		height		: 20%;
		text-align	: center;
		background	: linear-gradient(to right, transparent 3%, white 3%, white 97%, transparent 97%);
	}
	#header_gym_info:before {
		display		: none;
	}
	#header_gym_info_inner {
		font-size	: 0.94em;
	}
}
/******* ヘッダー *******/

/*******************************
グローバルナビ
*******************************/
#menu_trigger {
	display		: none;	/* チェックボックスを不可視	*/
}
@media screen and (min-width:801px) {
	nav {
		background	: linear-gradient(to bottom, #1e90ff, #191970);
		border-top	: 1px solid #001578;
		height		: 50px;
	}
	#menu-gnavi {
		display		: table;	/* for table-cell	*/
		table-layout	: fixed;
		margin		: 0 auto;
		padding		: 0;
		width		: 100%;
		max-width	: 1024px;
	}
	#menu-gnavi li {
		margin		: 0;
		padding		: 0;
		list-style	: none;	
	}
	#menu-gnavi > li {
		display		: table-cell;	/* 直下は等幅にするためtable-cellに	*/
	}
	#menu-gnavi ul {
		margin		: 0;
		padding		: 0;
	}
/* ▼ 子要素以下のポップアップのため	https://webdesignday.jp/inspiration/technique/css/5793/	*/
	#menu-gnavi ul li {
		position	: relative;	/* 孫階層以下ULのabsoluteのため	*/
		height		: 0;
		overflow	: hidden;
		opacity		: 0;
		transition-duration	: 0.3s;
	}
	#menu-gnavi li:hover > ul > li {
		height		: 50px;	/* 100%でも可、autoは×	*/
		overflow	: visible;
		opacity		: 1;
		z-index		: 10;
	}
	#menu-gnavi ul ul {	/* 孫階層以下は、右側にポップアップさせる	*/
		position	: absolute;
		top		: 0;
		left		: 100%;
		width		: 100%;
	}
/* △ 子要素以下のポップアップのため	*/
	#menu-gnavi a {
		position	: relative;
		display		: block;
		padding		: 0 0.5em;
		line-height	: 50px;
		text-align	: center;
		color		: white;
		border-left	: 1px solid #001578;
		background	: linear-gradient(to bottom, #1e90ff 15%, #191970 85%);
	}
	#menu-gnavi a:before {
		content		: "";
		position	: absolute;
		top		: 10%;
		left		: 3px;
		display		: block;
		width		: 1px;
		height		: 80%;
		background	: white;
	}
	#menu-gnavi a:hover {
		background-image	: linear-gradient(to bottom, #00ff00 15%, #006400 85%);
	}
}
@media screen and (max-width:880px) {
	#menu-gnavi {
		table-layout	: auto;
	}
}

@media screen and (max-width:800px) {
	nav {
		position	: fixed;
		top		: 0;
		right		: 0;
	}
	nav:before {
		content		: "MENU";
		position	: absolute;
		top		: 10px;
		right		: 64px;
		font-family	: "rounded-mplus-1p-bold-ttf";
		font-size	: 20px;
		font-weight	: bold;
		line-height	: 1;
		white-space	: nowrap;
		text-shadow	:
			0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff,
			0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff,
			0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff,
			0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
	}
	nav,
	#menu_open {
		z-index		: 100;	/* ページトップボタンより上に	*/
	}
	#menu_open {
		position	: absolute;
		top		: 0;
		right		: 0;
		display		: block;
		width		: 60px;
		height		: 60px;
		background-color: rgba(203, 86, 23, 0.95);
		cursor		: pointer;
		transition	: background 0.5s, transform 0.5s cubic-bezier(0.76, 0.52, 0.29, 1.25);
	}
	#menu_close {
		position	: fixed;
		top		: 0;
		right		: 0;
		display		: block;
		width		: 100%;	/* ページ全体を常時覆っている状態	*/
		height		: 100%;
		pointer-events	: none;
		cursor		: pointer;
		transition	: background 0.5s;
	}
	#menu_trigger:checked ~ #menu_close {	/* ハンバーガーメニュークリック後	*/
		background	: rgba(255, 255, 255, 0.5);
		pointer-events	: auto;	/* 背景クリックでドロワーメニューを閉じられる	*/
	}
	#menu_open span,
	#menu_open:before,
	#menu_open:after {
		position	: absolute;
		top		: 50%;
		left		: 50%;
		display		: block;
		margin		: -1px 0 0 -11px;
		width		: 22px;
		height		: 2px;
		background	: white;
		border-radius	: 100vh;
		transition	: transform 0.5s cubic-bezier(0.76, 0.52, 0.29, 1.25);
	}
	#menu_open:before {
		content		: "";
		transform	: translateY(-9px);
	}
	#menu_open:after {
		content		: "";
		transform	: translateY(9px);
	}
	#menu_trigger:checked + #menu_open {
		background-color: lightseagreen;
	}
	#menu_trigger:checked + #menu_open span {
		transform	: scaleX(0);
	}
	#menu_trigger:checked + #menu_open:before {
		transform	: rotate(45deg);
	}
	#menu_trigger:checked + #menu_open:after {
		transform	: rotate(-45deg);
	}
	.menu-gnavi-container {
		position	: absolute;
		top		: 0;
		right		: 0;
		transform	: translateX(100%);
		transition	: all 0.3s ease-out;
	}
	#menu_trigger:checked ~ .menu-gnavi-container {
		transform	: none;	/* チェックボックスがクリックされたら通常に戻す	*/
	}
	#menu-gnavi {
		margin		: 0;
		padding		: 0;
		background	: black;
		border		: 2px solid black;
	}
	#menu-gnavi li {
		margin		: 0;
		padding		: 0;
		list-style	: none;
	}
	#menu-gnavi > li:not(:last-child) {
		border-bottom	: 1px solid gray;
	}
	#menu-gnavi ul {
		margin		: 0 0 0 1em;
		padding		: 0;
	}
	#menu-gnavi a {
		display		: block;
		padding		: 0 70px 0 2em;
		line-height	: 60px;
		white-space	: nowrap;
		color		: white;
	}
	#menu-gnavi a:hover {
		color		: black;
		background	: white;
	}
}
/******* グローバルナビ *******/

/*******************************
パンくずリスト
*******************************/
#breadcrumb {
	margin		: 0;
	padding		: 0.8em 0.5em 0;
	list-style	: none;
	line-height	: 1;
	border-bottom	: 1px solid #ccc;
}
#breadcrumb li {
	display		: inline-block;
	margin		: 0 0 0.5em 0;
	padding		: 0;
}
#breadcrumb li:after {
	content		: ">";
}
#breadcrumb a {
	padding		: 0 0.1em;
	line-height	: 1.4;
	background	: honeydew;
	border-radius	: 0.3em;
}
#breadcrumb a:not(:hover) {
	color	: inherit;
}
/******* パンくずリスト *******/

/*******************************
ページトップのH1見出し
*******************************/
.h_pagetop {
	position	: relative;
	margin		: 0 0 1em;
	padding		: 0.5em;
	font-size	: 1.3em;
	font-weight	: normal;
	line-height	: 1.4;
	border		: 2px solid #333;
	border-radius	: 0.5em;
	background	: white;
	box-shadow	: 2px 2px 2px 0px #aaa;
}
.h_pagetop:before,
.h_pagetop:after {
	content		: "";
	position	: absolute;
	top		: 100%;
	left		: 2em;
	border-style	: solid;
	border-width	: 12px 12px 0 12px;
}
.h_pagetop:before {
	border-color	: #333 transparent transparent transparent;
}
.h_pagetop:after {
	border-color	: white transparent transparent transparent;
	margin-top	: -3px;
}
/******* ページトップのH1見出し *******/

/*******************************
投稿・更新日
/******************************/
#post_date {
	display		: table;	/* 最小幅	*/
	margin-left	: auto;
	padding		:  0 0.5em;
	line-height	: 1.5;
	border-style	: solid;
	border-width	: 0 3px 3px;
	border-color	: transparent transparent #999;
}
#post_date:before {	/* 更新日がある場合の公開日は、これで描画	*/
	display		: block;
}
#post_date time .string_before:before {	/* 公開日が10月で更新日が4月等の場合は、beforeの0を非表示にして桁を合わせる	*/
	visibility	: hidden;
}
/******* 投稿・更新日 *******/

/*******************************
SNSボタン
/******************************/
#sns_area {
	padding		: 0 0 0 1em;
	min-height	: 2.5em;
}
#sns_area > div {
	display		: inline-block;
	vertical-align	: top;	/* for IE	*/
}
.sns_hatena {
	margin-left	: 2em;
}
.fb-like {
	margin-left	: 1em;
}
/******* SNSボタン *******/

/*******************************
画像・写真の重なり 及び アイキャッチ
*******************************/
#eye_catch_wrap {
	margin-bottom	: 1em;
}
.pic_stack_wrap {
	padding		: 3.0em 2.0em;	/* 上下はコンテンツ幅720pxを目安に、左右は概ね16:9画像を基準に	*/
	font-size	: 8px;	/* 白枠幅や影等、全体の基準値となる数値	*/
}
@media screen and (max-width:752px) {
	.pic_stack_wrap {
		font-size	: 1.1vw;
	}
}
.pic_stack {
	position	: relative;
	z-index		: 0;	/* 必須。before, afterのz-indexにマイナス値を付けるだけでは、wordpressではbefore, afterが描画されない	*/
}
.pic_stack img {
	width		: 100%;	/* コンテンツ幅に満たない画像でも枠サイズに	*/
}
.pic_stack img,
.pic_stack:before,
.pic_stack:after {
	box-sizing	: border-box;	/* img, :before, :afterのサイズを同じにするため	*/
	border		: 1em solid white;	/* 白枠幅はここで変更	*/
	box-shadow	: 1px 1px 0.5em 1px rgba(0, 0, 0, 0.5);
}
.pic_stack:before,
.pic_stack:after {
	content		: "";
	position	: absolute;
	top		: 0;
	left		: 0;
	width		: 100%;
	height		: 100%;
}
.pic_stack:before {
	background	: #768590;	/* やや青みがかったグレー	*/
	transform	: rotate(3deg);
	z-index		: -2;
}
.pic_stack:after {
	background	: #eff4de;	/* 極薄の緑	*/
	transform	: rotate(-3.5deg);
	z-index		: -1;
}
/******* 画像・写真の重なり *******/

/*******************************
画像のネイティブCSS対応
/******************************/
.alignleft {
	float		: left;
	margin		: 0 0.5em 0.5em 0;
}
.alignright {
	float		: right;
	margin		: 0 0 0.5em 0.5em;
}
.aligncenter	{
	float		: none;
	display		: block;
	margin		: 0 auto;
}
/******* 画像のネイティブCSS対応 *******/

/*******************************
カードリンク・ピックアップ
/******************************/
.card_link_pickup {	/* 外枠線はstyle.cssで	*/
	margin		: 0 auto 2em;
	max-width	: 352px;
	border		: 1px solid black;
	box-shadow	: 4px 4px 4px 0px #999;
}
.card_link_pickup img {
	width		: 100%;	/* IEでカラムを超えて画像サイズそのままで表示されるのを阻止	*/
}
.card_link_pickup_text {
	padding		: 0.5em 0 0;
	background	: linear-gradient(to bottom, goldenrod 15%, white 30%);
	line-height	: 1.6;
}
.card_link_pickup_text a {
	display		: block;
	padding		: 0.5em 0.5em;
}
/******* カードリンク・ピックアップ *******/

/*******************************
サイドメニュー
*******************************/
.sidebar_list {
	margin		: 0 auto 2em;
	padding		: 0.8em 4px 2px 2px;
	list-style	: none;
	background-color: #630;
	border-radius	: 0.8em 0.8em 0 0;
	text-align	: center;
}
.sidebar_list:before {
	content		: attr(data-before);
	display		: block;
	padding		: 0em 0.2em 0.2em;
	color		: white;
	line-height	: 1.6;
}
.sidebar_list li {
	margin		: 0 0 2px 0;
	padding		: 0;
}
.sidebar_list a {
	position	: relative;
	display		: block;
	padding		: 0.9em 0.2em;
	line-height	: 1.2;
	color		: white;
	background	: linear-gradient(to bottom, #1EC9E3 10%, #0144C7 80%);
	overflow	: hidden;
	outline		: none;
	z-index		: 2;
}
.sidebar_list a,
.sidebar_list a:before,
.sidebar_list a:after {
	box-sizing	: border-box;
	transition	: all 0.3s;
}
.sidebar_list a:before,
.sidebar_list a:after {
	content		: "";
	position	: absolute;
	display		: block;
	z-index		: -1;
}
.sidebar_list a:after {
	top		: 0;
	left		: 0;
	width		: 100%;
	height		: 100%;
	transform	: scale(0.5);
}
.sidebar_list a:hover {
	color		: rgb(0, 64, 200);
	background	: #0455cb none;
}
.sidebar_list a:hover:after {
	background	: white;
	transform	: scale(1);
}
/******* サイドメニュー *******/

/*******************************
その他優先順位高
*******************************/
.kagikakko:before {
	content		: "「";
}
.kagikakko:after {
	content		: "」";
}

.waf_place_wrap {
	margin		: 0 auto 1em;
}
/******* その他優先順位高 *******/