/* =================================
	BBS CSS
================================= */

/*	reset
============================== */
article:not(#notice) div.wrap > div.contents {
	background-color:transparent;
}

/*	settings
============================== */

/* &#232;&#402;&#338;&#230;&#8482;&#175;&#232;๑&#178;&#239;&#188;&#353;honwan */
div.bbs-loop:nth-child(odd) {
	background-color: hsla(0,0%,100%,0.95);
}
div.bbs-loop:nth-child(even) {
	background-color: hsla(56,60%,95%,0.8);
}
/* &#232;&#402;&#338;&#230;&#8482;&#175;&#232;๑&#178;&#239;&#188;&#353;Twitter */
div.bbs-twitter {
	background-color:#e0f2ff;
}
@media all and (min-width: 768px) {
/* loop &#227;&#129;&#174; padding&#227;&#129;Nmargin&#239;&#188;&#353;PC */
div.bbs-loop {
	padding: 40px 30px;
	margin-bottom:20px;
}
}
@media all and (max-width: 767px) {
/* loop &#227;&#129;&#174; padding&#227;&#129;Nmargin&#239;&#188;&#353;SMP */
div.bbs-loop {
	padding: 30px 20px 56px;
	margin-bottom:12px;
	-webkit-box-shadow:0 0 6px 0 hsla(0,0%,0%,0.25);
	box-shadow:0 0 6px 0 hsla(0,0%,0%,0.25);
}
}
/* &#230;&#8211;๖&#229;&#173;&#8212;&#227;&#129;&#174;&#232;&#161;&#338;&#233;&#8211;g */
div.bbs-loop {
	line-height:1.6;
}
/* &#230;&#352;&#8226;&#231;N&#191;&#227;&#129;&#174;&#227;&#402;&#382;&#227;&#402;&#188;&#227;&#8218;&#184;&#227;&#402;&#179; */
div.bbs-loop p.bbs-message {
	margin-bottom: 1em;
}
/* &#227;&#402;&#143;&#227;&#402;&#179;&#227;&#402;๑&#227;&#402;&#171;&#229;&#144;&#141;&#227;&#129;&#174;&#227;&#402;&#382;&#227;&#402;&#188;&#227;&#8218;&#184;&#227;&#402;&#179; */
div.bbs-loop p.bbs-from {
	margin-bottom:0.5em;
	font-size: 80%;
}
div.bbs-loop p.bbs-message {
	font-weight: bold;
	letter-spacing: 0.05em;
	display: table;
}
div.bbs-loop p.bbs-message,
div.bbs-loop p.bbs-from .bbs-handle {
		font-variant-east-asian: full-width;
}
@media all and (min-width: 768px) {
/* &#230;&#8211;๖&#229;&#173;&#8212;&#227;&#129;&#174;&#229;&#164;&#227;&#129;&#141;&#227;&#129;&#8226;&#239;&#188;&#353;PC */
div.bbs-loop {
	width: 22.551020408163265%;
	box-sizing: border-box;
}
div.bbs-loop p.bbs-message {
	font-size: 28px;
	display: inline;
	vertical-align: middle!important;
	min-height: 7.7em;
}
}
@media all and (max-width: 767px) {
/* &#230;&#8211;๖&#229;&#173;&#8212;&#227;&#129;&#174;&#229;&#164;&#227;&#129;&#141;&#227;&#129;&#8226;&#239;&#188;&#353;SMP */
div.bbs-loop p.bbs-message {
	font-size: 6.1vw!important;
	min-height: 7em;
}

}
/* &#230;&#8211;๖&#229;&#173;&#8212;&#227;&#129;&#174;&#232;๑&#178; */
div.bbs-loop p {
	color:#333;
}
/* &#227;&#402;&#143;&#227;&#402;&#179;&#227;&#402;๑&#227;&#402;&#171;&#229;&#144;&#141;&#239;&#188;&#353;hogwan */
div.bbs-loop p.bbs-from {
	position: absolute;
	left: 12%;
	bottom: 3.8em;
	white-space: nowrap;
}
@media all and (max-width: 767px) {
	div.bbs-loop p.bbs-from {
		bottom: 4.5em;
	}
}

/* &#230;&#352;&#8226;&#231;N&#191;&#230;&#8212;\&#227;&#129;&#174;&#232;๑&#178; */
div.bbs-loop p.bbs-post {
	color:#7b7b7b;
	display: none;
}


/*	settings (Pager)
============================== */

/* &#230;&#8211;๖&#229;&#173;&#8212;&#227;&#129;&#174;&#232;๑&#178; */
div.bbs-pager {
	color:#333;
}

/* &#228;&#187;&#352;&#227;&#129;&#8222;&#227;&#8218;&#8249;&#227;&#402;&#353;&#227;&#402;&#188;&#227;&#8218;&#184;&#227;&#129;&#174;&#232;๑&#178; */
div.bbs-pager ul li b {
	color: #ad9e00;
}

/* &#227;&#402;&#170;&#227;&#402;&#179;&#227;&#8218;&#175;&#227;&#129;&#174;&#232;๑&#178; */
div.bbs-pager ul li a {
	color:#000;
}
div.bbs-pager ul li.pager-prev a::before,
div.bbs-pager ul li.pager-next a::after {
	background-color:#000;
}

/* &#227;&#402;&#170;&#227;&#402;&#179;&#227;&#8218;&#175;&#227;&#129;&#174;&#227;&#402;&#8250;&#227;&#402;&#144;&#227;&#402;&#188;&#232;๑&#178; */
div.bbs-pager ul li a:hover {
	color:#ce9b00;
}
div.bbs-pager ul li.pager-prev a:hover::before,
div.bbs-pager ul li.pager-next a:hover::after {
	background-color:#ce9b00;
}

/* &#230;&#172;&#161;&#227;&#129;&#184;&#229;๑&#141;&#227;&#129;&#184;&#227;&#402;&#339;&#227;&#8218;&#191;&#227;&#402;&#179;&#227;&#8364;&#129;&#230;&#352;&#188;&#227;&#129;&#8250;&#227;&#129;&#170;&#227;&#129;&#8222;&#227;&#129;N&#227;&#129;&#141;&#227;&#129;&#174;&#232;๑&#178; */
div.bbs-pager ul li span {
	color:#ce9b00;
}
div.bbs-pager ul li.pager-prev span::before,
div.bbs-pager ul li.pager-next span::after {
	background-color: #ad9e00;
}


/*	notice
============================== */
main article#notice h2 {
	font-weight:bold;
	line-height:1.5;
	color:#c00;
	text-align:center;
	margin-bottom:1em;
}
main article#notice ol {
	list-style-type:decimal;
	margin:0 0 20px 30px;
}
main article#notice ol li {
	line-height:1.5;
	padding-bottom:0.5em;
}
main article#notice p.agree {
	color:#c00;
	line-height:1.5;
	font-weight:bold;
	text-align:center;
	letter-spacing:0.1em;
	margin-bottom:2.5em;
}
main article#notice p.cap {
	font-weight:bold;
	font-size:87.5%;
	line-height:1.25;
	text-align:center;
	letter-spacing:0.2em;
}
main article#notice p.cap a {
	color:#ce9b00;
	padding:0.25em 2em;
}
@media all and (min-width: 768px)  {
main article#notice h2 {
	letter-spacing:0.1em;
}
main article#notice ol li {
	font-size:87.5%;
}
main article#notice p.agree {
	font-size:100%;
}
main article#notice p.cap a:hover {
	text-decoration:none;
	color:#fff;
	background-color:#ce9b00;
}
}
@media all and (max-width: 767px)  {
main article#notice h2 {
	font-size:87.5%;
}
main article#notice ol li {
	font-size:75%;
}
main article#notice p.agree, main article#notice p.cap {
	font-size:83%;
}
}


/*	.ctrl
============================== */
div.ctrl {
}
@media all and (min-width: 768px)  {
div.ctrl {
	width:600px;
	margin:0 auto;
}
}


/*	msg box
============================== */
.bx-msg {
	background-color:hsla(0,0%,100%,0.9);
}
.bx-msg p {
	line-height:1.5;
}
@media all and (min-width: 768px)  {
.bx-msg {
	padding:24px;
	margin-bottom:40px;
}
.bx-msg p {
	font-size:87.5%;
}
}
@media all and (max-width: 767px)  {
.bx-msg {
	padding:12px;
	margin-bottom:20px;
}
.bx-msg p {
	font-size:83%;
}
}



article#notice > div.wrap > div.contents {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
@media all and (min-width: 768px) {
article#notice > div.wrap > div.contents {
	padding:40px 32px;
}
}
@media all and (max-width: 767px) {
article#notice > div.wrap > div.contents {
	padding:20px 12px;
}
}



.bbs-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-feature-settings: normal;
  font-style: normal;
  margin-bottom: 1em;
  font-kerning: normal;
  vertical-align: middle;
  -webkit-text-orientation: mixed;
  text-orientation: sideways-right;
}

div.bbs-loop {
  display: inline-flex;
  background-image: url(../img/senryu/senryu_bg1.jpg);
  position: relative;
  box-sizing: border-box;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -moz-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
  background-size: 100%;
  font-style: normal;
  font-feature-settings: normal;
  font-optical-sizing: none;
}
@media all and (min-width: 768px) {
	div.bbs-loop {
		min-height: max-content;
	}
}
@media all and (max-width: 767px) {
	div.bbs-loop {
		width: 48%;
		min-height: max-content;
	}
}
div.bbs-loop:nth-child(odd) {
	background-image: url(../img/senryu/senryu_bg2.jpg);
}
.tate {
	text-combine-upright: all;
-webkit-text-combine: horizontal;
-ms-text-combine-horizontal: all;
}
.bbs-age {
	-ms-writing-mode: tb-rl;
	writing-mode: horizontal-tb;
	font-size: 70%;
	letter-spacing: -0.05em;
	padding-top: 0.3em;
}

div.bbs-loop::before {
	content: "";
	display: block;
	background-image: url(../img/senryu/senryu_bgtop1.jpg);
	width: 100%;
	height: 7%;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	top: 0;
	background-size: 100%;
}
div.bbs-loop:nth-child(odd)::before {
	background-image: url(../img/senryu/senryu_bgtop2.jpg);
}
div.bbs-loop::after {
	content: "";
	display: block;
	background-image: url(../img/senryu/senryu_bgbtm1.png);
	width: 100%;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	bottom: -1px;
	background-position: bottom;
	background-size: 100%;
}
@media all and (min-width: 768px) {
	div.bbs-loop::after {
		height: 21%;
	}
}
@media all and (max-width: 767px) {
	div.bbs-loop::after {
		height: 4em;
	}
}
div.bbs-loop:nth-child(odd)::after {
	background-image: url(../img/senryu/senryu_bgbtm2.png);
}

.bbs-gender {
	margin-top: -1em;
}

div.bbs-loop p.bbs-from::before {
	content: "";
}


.bbs-box::before {
    content: "";
    display: block;
    width: 22.551020408163265%;
		order: 1;
}

.bbs-box::after {
    content: "";
    display: block;
    width: 22.551020408163265%;
}

.senryu article {
	background-color: #f6f0df;
}

.senryu_title span {
	display: block;
	position: relative;
	height: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.senryu_title span img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.senryu .example {
	background-color: #fff;
	padding: 1em;
	margin: 0 auto 2em;
	border-radius: 20px;
	display: block;
	box-sizing: border-box;
}
.senryu_example {
	margin: 0 auto;
}
.senryu_example span {
	display: block;
	position: relative;
	height: 0;
	background-position: center center;
	background-repeat: no-repeat;
	padding-top: 27.623126338329764%;
	background-size: cover;
}
.senryu_example span img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
p.btn {
	margin-bottom: 2em;
}
.senryu_present span {
	display: block;
	position: relative;
	height: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 50.767754318618042%;
}
.senryu_present span img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.senryu .kome {
	color: #696969;
}

@media all and (min-width: 768px) {
	.senryu .example {
		width: 70%;
	}
	.senryu_example {
		width: 467px;
	}
	.senryu_title span {
		padding-top: 30.915492957746479%;
	}
	.senryu_present {
		width: 70%;
		margin: 0 auto;
	}
	.senryu .kome {
		margin: 1em auto 2em;
		width: 65%;
	}
}
@media all and (max-width: 767px) {
	.senryu .example {
		width: 100%;
	}
	.senryu_example {
		width: 100%;
	}
	.senryu_title span {
		padding-top: 62%;
	}
	.senryu .kome {
		width: 90%;
		margin: 1em auto 0;
	}
}
.senryu .wrap {
	padding-top: 0;
}
