@charset "utf-8";

/* ==========================================================

	Gutenbergデフォルト 追加・修正

========================================================== */
a:hover { opacity: 0.7;}

.wp-block-column p:last-child,
.wp-block-media-text__content p:last-child { margin-bottom: 0;}

.wp-block-image { margin-top: calc(1em + 13px); margin-bottom: calc(1em + 13px);}

.wp-block-columns .wp-block-image  { margin-top: 0; margin-bottom: 0;}

.wp-block-image img { height: auto;}

.wp-block-buttons { column-gap: 1.5rem;}

.wp-block-buttons a:hover { opacity: 0.8;}

.wp-block-media-text { margin-bottom: 1.3rem;}

.wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content { padding-right: 0;}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding-left: 0;}

.wp-block-image figcaption {
	text-align: center;
	font-size: 12px;
}



/* sm */
@media screen and (min-width : 576px) and (max-width : 767.98px) {
	.wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content { padding-left: 3.5vw;}
	.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding-right: 3.5vw;}
}

/* xs */
@media screen and (max-width: 575.98px) {
	.wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content { padding-left: 0;}
	.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding-right: 0;}
}


/* Youtube・Twitter
===========================================================*/
.is-type-video .wp-block-embed__wrapper { text-align: center;}

.wp-block-embed__wrapper .twitter-tweet { margin-right: auto; margin-left: auto;}

/* md以上 */
@media screen and (min-width : 768px) {
	.is-type-video .wp-block-embed__wrapper iframe { width: 700px; height: 394px;}
}








/* ==========================================================

	全体

========================================================== */
p:last-child { margin-bottom: 0;}

body {
	background: url(../img/bg_wood.jpg) repeat;
	color: #eee;
}

header { position: relative;}


/* xl */
@media screen and (min-width: 1200px) {
	header {
		width: 31%; height: 100vh;
		position: fixed;
	}

	main {
		width: 69%;
		margin-left: 31%;
		box-sizing: border-box;
	}
}

/* lg */
@media screen and (min-width : 992px) and (max-width : 1199.98px) {
	
}

/* md */
@media screen and (min-width : 768px) and (max-width : 991.98px) {
	
}

/* sm */
@media screen and (min-width : 576px) and (max-width : 767.98px) {
	
}

/* xs */
@media screen and (max-width: 575.98px) {
	
}




/* ==========================================================

	header

========================================================== */
header {
	background: url(../img/bar_bg.jpg) no-repeat center top;
	background-size: cover;
}

header .__logo img { width: 100%;}
header .__logo:hover { opacity: 1;}

header .title_page {
	color: #2c190c;
	background: url(../img/bg_page_title.png) no-repeat;
	background-size: 100% 100%;
	font-size: 1.4rem;
	text-align: center;
	position: relative;  z-index: 3;
}

header .title_page a {
	color: inherit;
	text-decoration: none;
}

header .__sub_menu {
	background: #241e1e;
	border-radius: 10px;
	box-shadow: 0 0 3px rgba(26,9,5, 0.4);
	font-family: 'Yusei Magic';
}

header .__sub_menu ul {
	list-style: none;
	padding-left: 10px; padding-right: 10px;
}

header .__sub_menu li { padding-left: 2.5rem;}

header .__sub_menu li.__my_page { background: url(../img/ico_hane.png) no-repeat left top;}

header .__sub_menu a {
	color: #eee;
	text-decoration: none;
	display: inline-block;
	padding-right: 10px; padding-left: 5px;
	border-bottom: 1px solid #241e1e;
}

header .__sub_menu li.__my_page a,
header .__sub_menu a:hover { border-bottom: 1px solid #aaa;}


/* xl */
@media screen and (min-width: 1200px) {
	header {
		background: url(../img/bg_bar_side.png) no-repeat right top;
		background-size: cover;
	}

	header::after {
		content: '';
		display: block;
		background: url(../img/bg_counter_side.png) no-repeat;
		width: 100%; height: 17%;
		position: absolute; bottom: 0; right: 0;
	}

	header .__logo {
		display: block;
		width: calc(220px + 10%);
		margin-right: auto; margin-left: auto;
	}

	header .title_page {
		width: calc(270px + 10%);
		padding-top: calc(20px + 2%); padding-bottom: calc(5px + 1%);
		top: -12px; left: calc(45% - 130px);
	}

	header .__sub_menu {
		width: calc(280px + 10%);
		margin-right: auto; margin-left: auto;
		font-size: 18px;
		box-sizing: border-box;
	}

	header .__sub_menu ul { padding-top: 2rem; padding-bottom: 0.5rem;}

	header .__sub_menu li { margin-bottom: 1.5rem;}

	header .__sub_menu a { padding-top: 5px; padding-bottom: 3px;}
}

/* lg */
@media screen and (min-width : 992px) and (max-width : 1199.98px) {
	header {
		display: flex;
		justify-content: space-between; align-items: flex-start;
	}

	header .__area {
		width: calc(120px + 10%);
		margin-left: 2%;
	}

	header .title_page {
		position: absolute; top: -10px; left: 25%;
		padding: 24px 50px 8px;
	}

	header .__sub_menu {
		width: 72%;
		padding-top: 5px; padding-bottom: 10px;
		margin-top: 54px;
		border-radius: 8px 8px 0 0;
	}

	header .__sub_menu ul {
		display: flex;
		justify-content: space-between; align-items: center;
	}

	header .__sub_menu a { padding-top: 8px;}
	
}

/* md */
@media screen and (min-width : 768px) and (max-width : 991.98px) {
	header {
		display: flex;
		justify-content: space-between; align-items: flex-end;
	}

	header .__area {
		display: block;
		width: calc(180px + 10%);
		margin-left: 1%;
	}

	header .__logo { display: block;}

	header .title_page {
		padding-top: 24px; padding-bottom: 8px;
		text-align: center;
		top: -10px;
	}

	header .__sub_menu {
		width: 72%;
		padding-top: 5px; padding-bottom: 10px;
		margin-top: 54px; margin-left: 10%;
		border-radius: 8px 8px 0 0;
	}

	header .__sub_menu ul {
		display: flex;
		flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;
	}

	header .__sub_menu li:nth-of-type(2n-1) { width: 60%;}

	header .__sub_menu a { padding-top: 8px;}
}

/* sm */
@media screen and (min-width : 576px) and (max-width : 767.98px) {
	header {
		display: flex;
		justify-content: space-between; align-items: flex-start;
	}

	header .__area {
		display: block;
		width: 40%;
		margin-left: 1%;
	}

	header .title_page {
		padding-top: 24px; padding-bottom: 8px;
		text-align: center;
		top: -10px;
	}

	header .__sub_menu {
		width: 45%;
		padding-top: 5px; padding-bottom: 10px;
		margin-top: 10px; margin-bottom: 10px;
		margin-right: 2%;
	}

	header .__sub_menu a { padding-top: 8px;}
}

/* xs */
@media screen and (max-width: 575.98px) {
	header { padding-bottom: 2vw;}

	header  .__area {
		display: flex;
		justify-content: space-between; align-items: center;
	}

	header .__logo { width: 45vw;}

	header .title_page {
		width: 50vw;
		box-sizing: border-box;
		margin-right: 1vw;
		padding-top: 24px; padding-bottom: 8px;
		text-align: center;
	}

	header .__sub_menu {
		margin-right: 2vw; margin-left: 2vw;
		letter-spacing: normal;
	}

	header .__sub_menu ul {
		display: flex;
		flex-wrap: wrap; justify-content: space-between; align-items: stretch;
	}

	header .__sub_menu li {
		padding-left: 1.5rem;
		box-sizing: border-box;
		width: 40%;
	}

	header .__sub_menu li:nth-of-type(2n-1) { width: 60%;}

	header .__sub_menu li.__my_page {
		background: url(../img/ico_hane.png) no-repeat left 3vw;
		background-size: 24px 25px;
	}

	header .__sub_menu li a { padding-top: 3vw; padding-bottom: 2vw;}
}







/* ==========================================================

	footer

========================================================== */
.copyr { text-align: center; font-size: 0.8rem;}

/* xl */
@media screen and (min-width: 1200px) {
	.copyr {
		position: fixed; bottom: 0; left: 0;
		width: 31%;
	}
}

/* lg */
@media screen and (min-width : 992px) and (max-width : 1199.98px) {
	
}

/* md */
@media screen and (min-width : 768px) and (max-width : 991.98px) {
	
}

/* sm */
@media screen and (min-width : 576px) and (max-width : 767.98px) {
	
}

/* xs */
@media screen and (max-width: 575.98px) {
	
}




/* ==========================================================

	main

========================================================== */
main a { color: #b1e3ff;}

.yoshi {
	width: 100%;
	display: flex;
	justify-content: center; align-items: center;
}

.yoshi img {
	max-width: 100%; max-height: 100%;
}

/* xl */
@media screen and (min-width: 1200px) {
	main { padding-top: 30px; padding-right: 4%; padding-left: 4%}

	main section,
	.wrapper_blog .__summary { margin-bottom: 120px;}

	main section section,
	.sec_summary { margin-bottom: 80px;}

	.yoshi { height: 100vh;}
}

/* lg */
@media screen and (min-width : 992px) and (max-width : 1199.98px) {
	main { padding-top: 30px; padding-right: 4%; padding-left: 4%}

	main section,
	.wrapper_blog .__summary { margin-bottom: 120px;}

	main section section,
	.sec_summary { margin-bottom: 80px;}

	.yoshi { height: calc(100vh - 110px);}
}

/* md */
@media screen and (min-width : 768px) and (max-width : 991.98px) {
	main { padding-top: 30px; padding-right: 3%; padding-left: 3%}

	main section,
	.wrapper_blog .__summary { margin-bottom: 100px;}

	main section section,
	.sec_summary { margin-bottom: 60px;}

	.yoshi { height: calc(100vh - 180px);}
}

/* sm */
@media screen and (min-width : 576px) and (max-width : 767.98px) {
	main { padding-top: 30px; padding-right: 2%; padding-left: 2%}

	main section,
	.wrapper_blog .__summary { margin-bottom: 80px;}

	main section section,
	.sec_summary { margin-bottom: 50px;}

	.yoshi { height: calc(100vh - 210px);}
}

/* xs */
@media screen and (max-width: 575.98px) {
	main { padding-top: 5vw; padding-right: 4vw; padding-left: 4vw}

	main section,
	.wrapper_blog .__summary { margin-bottom: 14vw;}

	main section section,
	.sec_summary { margin-bottom: 8vw;}

	.yoshi { height: calc(100vh - 200px);}
}





/* ==========================================================

	sidebar

========================================================== */











/* ==========================================================

	single

========================================================== */