@charset "utf-8";

.bbs_title {
	position: relative;
	background: #020e20 url(../img/bbs/title-bg.jpg) no-repeat 50%;
	background-size: cover;
	padding: 9rem;
	text-align: center;
	z-index: 2;
	@media screen and (max-width: 743px) {
		padding: 2rem 3rem;
	}
	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url(../img/bbs/title-bg-point.png) no-repeat 50%;
		background-size: 200rem;
		mix-blend-mode: overlay;
		z-index: -1;
		@media screen and (max-width: 743px) {
			background-size: auto 100%;
		}
	}
	img {
		width: 52rem;
	}
}

.bbs_news {
	padding-block: 6rem;
	background: linear-gradient(180deg, var(--color-theme) 0%, var(--color-theme2) 100%);
	@media screen and (max-width: 743px) {
		padding-block: 3rem;
	}
	h2 {
		margin-bottom: 3rem;
		text-align: center;
		font-size: 3.2rem;
		line-height: 1.3;
		color: #fff;
		@media screen and (max-width: 743px) {
			margin-bottom: 1.5rem;
			font-size: 2.4rem;
		}
	}
	.list {
		padding: 3rem 4rem;
		background-color: #fff;
		border-radius: 1.2rem;
		@media screen and (min-width: 744px), print {
			max-width: 116rem;
			margin-inline: auto;
		}
		@media screen and (max-width: 743px) {
			padding: 1.5rem 2rem;
			border-radius: 0.8rem;
		}
		li {
			display: flex;
			align-items: start;
			gap: 2rem;
			@media screen and (max-width: 743px) {
				display: block;
			}
			& + li {
				margin-top: 1.8rem;
				padding-top: 1.8rem;
				border-top: 1px solid #e8ecee;
				@media screen and (max-width: 743px) {
					margin-top: 1rem;
					padding-top: 1rem;
				}
			}
			.date {
				flex-shrink: 0;
				width: 13.6rem;
				padding: 0.4rem 0.5rem 0.5rem 0;
				color: #fff;
				text-align: center;
				letter-spacing: 0;
				background-color: var(--color-theme);
				clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%);
				@media screen and (max-width: 743px) {
					display: block;
					width: 10rem;
					padding: 0.2rem 0.5rem 0.2rem 0;
					font-size: 1.3rem;
				}
			}
			a {
				display: block;
				padding: 0.4rem 0 0.5rem;
				@media screen and (max-width: 743px) {
					font-size: 1.4rem;
				}
			}
		}
	}
}

.bbs_container {
	padding-block: 6rem;
	background-color: #fff;
	@media screen and (max-width: 743px) {
		padding-block: 4rem;
	}
}

.m-bbs-aside-bnr {
	margin-bottom: 3rem;
	a {
		display: block;
		img {
			width: 100%;
		}
	}
	@media screen and (max-width: 743px) {
		width: 28rem;
		margin-inline: auto;
	}
}

.bbs_contents {
	@media screen and (min-width: 744px), print {
		max-width: 116rem;
		margin-inline: auto;
		display: flex;
		justify-content: space-between;
		gap: 4rem;
		.bbs_main {
			width: 80rem;
		}
		.bbs_aside {
			width: 30rem;
			flex-shrink: 0;
		}
	}
	@media screen and (max-width: 743px) {
		.bbs_aside {
			margin-top: 4rem;
		}
	}

	.m-align-r {
		text-align: right;
		@media screen and (max-width: 743px) {
			text-align: center;
		}
		&:has( > *:nth-child(2)) {
			display: flex;
			justify-content: end;
			gap: 1rem;
		}
	}
	.m-mt-l {
		margin-top: 5rem;
		@media screen and (max-width: 743px) {
			margin-top: 3rem;
		}
	}
	.m-mt-s {
		margin-top: 2rem;
		@media screen and (max-width: 743px) {
			margin-top: 1rem;
		}
	}

	.m-bg-dgy {
		padding: 4rem;
		background-color: #e0e4e7;
		border-radius: 1.6rem;
		h3 {
			margin-bottom: 2rem;
			font-size: 2.4rem;
			line-height: 1.5;
			color: #172c60;
			font-weight: var(--font-weight-bold);
		}
		@media screen and (max-width: 743px) {
			padding: 2rem;
			border-radius: 0.8rem;
			h3 {
				margin-bottom: .5rem;
				font-size: 2rem;
			}
		}
	}

	.m-bbs-topic-form-list {
		.m-bbs-topic-form-list__item + .m-bbs-topic-form-list__item {
			margin-top: 1.5rem;
			@media screen and (max-width: 743px) {
				margin-top: .8rem;
			}
		}
		.m-font-b {
			display: block;
			margin-bottom: 0.5rem;
			font-weight: var(--font-weight-bold);
			font-size: 1.6rem;
			@media screen and (max-width: 743px) {
				font-size: 1.4rem;
				margin-bottom: 0.3rem;
			}
		}
	}

	.m-bbs-submit {
		position: relative;
		width: 20rem;
		height: 5.6rem;
		background: var(--gradient);
		border-radius: 3.5rem;
		color: #fff;
		font-size: 1.6rem;
		font-weight: var(--font-weight-medium);
		text-align: center;
		text-decoration: none;
		box-shadow: 0 1px 3px rgba(6,11,28,.2);
		cursor: pointer;
		z-index: 1;
		&::before {
			content: "";
			position: absolute;
			top: 2px;
			left: 2px;
			right: 2px;
			bottom: 2px;
			background-color: #fff;
			border-radius: 100rem;
			opacity: 0;
			z-index: -1;
		}
		@media (hover) {
			&:hover:not(:disabled) {
				color: var(--color-theme);
				&::before {
					opacity: 1;
				}
			}
		}
		@media screen and (max-width: 743px) {
			height: 5rem;
			font-size: 1.5rem;
		}
	}

	.m-bbs-topic-list-item {
		position: relative;
		margin-top: 2rem;
		padding-left: 3rem;
		font-size: 1.6rem;
		&::after {
			content: "";
			position: absolute;
			top: .5lh;
			left: 0;
			width: 1.2rem;
			height: 1.2rem;
			border-top: 2px solid  var(--color-theme);
			border-right: 2px solid  var(--color-theme);
			transform-origin: 100% 0;
			transform: rotate(45deg);
			@media screen and (max-width: 743px) {
				right: 1rem;
				width: 0.9rem;
				height: 0.9rem;
			}
		}
		a {
			--a-color: #1f478c;
		}
		.author {
			display: inline-block;
		}
		@media screen and (max-width: 743px) {
			margin-top: 1.5rem;
			padding-left: 2rem;
			font-size: 1.5rem;
		}
	}

	.m-bbs-topic-pager {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: .8rem;
		margin-top: 4rem;
		@media screen and (max-width: 743px) {
			gap: .5rem;
			._sp_pd & {
				margin-inline: calc(var(--sp-base-padding) * -1);
			}
		}
		& > * {
			position: relative;
			width: 4.8rem;
			height: 4.8rem;
			@media screen and (max-width: 743px) {
				width: 4rem;
				height: 4rem;
				font-size: 1.5rem;
			}
			&:not(:has(> *)) {
				display: none;
			}
			& > * {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				background-color: #fff;
				border-radius: 10rem;
				text-decoration: none;
				color: var(--color-base);
				font-size: 1.6rem;
				font-family: var(--font-family-en);
				font-weight: 400;
				box-shadow: 0 1px 3px rgba(6,11,28,.2);
				z-index: 2;
				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: var(--gradient);
					border-radius: 10rem;
					opacity: 0;
					z-index: -1;
				}
			}
			& > span {
				color: #fff;
				&::after {
					opacity: 1;
				}
			}
			&.prev a,
			&.next a {
				overflow: hidden;
				justify-content: start;
				text-indent: -10rem;
				&::before {
					content: "";
					position: absolute;
					top: 50%;
					right: calc(50% - .6rem);
					width: 1.2rem;
					height: 1.2rem;
					border-top: 2px solid  var(--color-theme);
					border-right: 2px solid  var(--color-theme);
					transform-origin: 100% 0;
					transform: rotate(45deg);
					@media screen and (max-width: 743px) {
						width: 0.9rem;
						height: 0.9rem;
					}
				}
			}
			&.prev a {
				transform: scaleX(-1);
			}
		}
		@media (hover) {
			a:hover {
				color: #fff;
				&::after {
					opacity: 1;
				}
			}
			.next a:hover::before,
			.prev a:hover::before {
				border-color: #fff;
			}
		}
	}

	.bbs_entry {
		margin-top: 5rem;
		padding: 3rem 4rem 4rem;
		background-color: #f7f8f9;
		border-radius: 1.6rem;
		font-size: 1.6rem;
		line-height: 1.75;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
			padding: 1.5rem 2rem 2rem;
			font-size: 1.4rem;
		}
		h4 {
			margin-bottom: 2rem;
			font-size: 2.2rem;
			line-height: 1.6;
			@media screen and (max-width: 743px) {
				margin-bottom: 1rem;
				font-size: 1.8rem;
			}
		}
		.author {
			font-size: 1.4rem;
			@media screen and (max-width: 743px) {
				font-size: 1.2rem;
			}
			.m-font-b {
				margin-right: 0.5em;
				font-weight: 700;
				font-size: 1.6rem;
				@media screen and (max-width: 743px) {
					font-size: 1.4rem;
				}
			}
			a {
				--a-color: var(--color-theme);
			}
		}
		.m-bbs-topic-item--res {
			margin-top: 2rem;
			padding-top: 2rem;
			padding-left: 6rem;
			border-top: 1px solid var(--border);
			.m-mt-s {
				margin-top: 1.5rem;
			}
			@media screen and (max-width: 743px) {
				padding-left: 3rem;
			}
		}
	}

	.m-sns-area {
		margin-bottom: 3rem;
		padding: 2rem;
		display: flex;
		justify-content: center;
		background-color: #f7f8f9;
		border-radius: 1.2rem;
		gap: 1rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 2rem;
		}
	}

	.bbs_aside_search {
		margin-bottom: 3rem;
		padding: 2rem;
		background-color: #f7f8f9;
		border-radius: 1.2rem;
		font-size: 1.6rem;
		@media screen and (max-width: 743px) {
			margin-bottom: 2rem;
			font-size: 1.5rem;
		}
		dt {
			margin-bottom: 1rem;
			font-weight: 700;
		}
		.m-bbs-aside-search-word {
			position: relative;
			height: 4.4rem;
			padding-right: 6.9rem;
			input[type=text] {
				height: 4.4rem;
				border-radius: .4rem 0 0 .4rem;
			}
			input[type=submit] {
				position: absolute;
				top: 0;
				right: 0;
				width: 7rem;
				height: 4.4rem;
				background-color: #1e2047;
				border-radius: 0 .4rem .4rem 0;
				color: #fff;
				cursor: pointer;
				font-size: 1.6rem;
				font-weight: 500;
			}
		}
		.m-bbs-aside-search-cat {
			display: flex;
			flex-wrap: wrap;
			margin-top: 1rem;
			& > * {
				width: 50%;
			}
		}
	}

	.bbs_aside_ranking {
		padding: 2rem;
		background-color: #f7f8f9;
		border-radius: 1.2rem;
		font-size: 1.5rem;
		line-height: 1.6;
		@media screen and (max-width: 743px) {
			margin-bottom: 2rem;
			font-size: 1.4rem;
		}
		dt {
			margin-bottom: 1rem;
			font-weight: 700;
			font-size: 1.6rem;
			@media screen and (max-width: 743px) {
				font-size: 1.5rem;
			}
		}
		ol {
			margin-top: 2rem;
			list-style-type: decimal;
			li {
				margin-top: 1rem;
				margin-left: 2em;
			}
			a {
				--a-color: var(--color-theme);
				font-weight: 700;
			}
		}
	}

	.bbs_aside_product_list {
		padding: 2rem;
		background-color: #f7f8f9;
		border-radius: 1.2rem;
		font-size: 1.5rem;
		line-height: 1.6;
		@media screen and (max-width: 743px) {
			margin-bottom: 2rem;
			font-size: 1.4rem;
		}
		dt {
			margin-bottom: 1rem;
			font-weight: 700;
			font-size: 1.6rem;
			@media screen and (max-width: 743px) {
				font-size: 1.5rem;
			}
		}
		li {
			margin-top: 1rem;
		}
	}



	.m-bbs-search-word {
		position: relative;
		height: 5rem;
		padding-right: 6.9rem;
		input[type=text] {
			border-radius: .4rem 0 0 .4rem;
		}
		input[type=submit] {
			position: absolute;
			top: 0;
			right: 0;
			width: 7rem;
			height: 5rem;
			background-color: #1e2047;
			border-radius: 0 .4rem .4rem 0;
			color: #fff;
			cursor: pointer;
			font-size: 1.6rem;
			font-weight: 500;
		}
	}
	.m-bbs-search-cat {
		display: flex;
		flex-wrap: wrap;
		gap: 0 2rem;
		margin-top: 1rem;
	}

	.error {
		font-weight: 700;
		color: #ff0000;
	}
}

form {
	input[type=text],
	input[type=email],
	input[type=tel],
	input[type=number],
	input[type=date],
	input[type=url],
	textarea,
	select {
		width: 100%;
		height: 5rem;
		padding: 0 1em;
		background-color: #fff;
		border: 1px solid var(--border);
		border-radius: .4rem;
		color: var(--color-base);
		font-size: 1.6rem;
		@media screen and (max-width: 743px) {
			height: 4rem;
		}
	}
	input[type=date] {
		width: auto;
	}
	textarea {
		height: 15rem;
		padding-top: 0.8em;
		padding-bottom: 0.8em;
	}
	select {
		width: auto;
		padding: 0 3rem 0 1em;
		background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%226%22%20viewBox%3D%220%200%209%206%22%3E%3Cpath%20d%3D%22M8.995%2C.297L4.5%2C5.704%2C.005%2C.296H8.995Z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E');
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem);
	}
	input[type=text],
	input[type=email],
	input[type=tel],
	input[type=number],
	input[type=date],
	input[type=url],
	select,
	textarea {
		transition: box-shadow .2s, border .2s;
		&:focus {
			border-color: #66afe9;
			outline: 0;
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,0.8);
		}
		&:disabled {
			background-color: #ddd;
			opacity: .5;
		}
	}
	button:disabled {
		opacity: 0.3;
	}
	::placeholder {
		color: #a3a3a3;
	}
	input[type=checkbox],
	input[type=radio] {
		position: absolute;
		width: 2rem;
		height: 2rem;
	}
	label {
		position: relative;
		display: flex;
		align-items: center;
		padding: 0.4rem 0;
		:is(input[type=radio], input[type=checkbox]) {
			& + span {
				position: relative;
				padding-left: 3.4rem;
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -1.2rem;
					width: 2.4rem;
					height: 2.4rem;
					background-color: #fff;
					border: 1px solid var(--border);
					border-radius: .4rem;
				}
				&::after {
					content: "";
					position: absolute;
					opacity: 0;
					transition: opacity .1s;
				}
			}
			&:checked + span::after {
				opacity: 1;
			}
		}
		input[type=radio] + span::before {
			border-radius: 100%;
		}
		input[type=radio] + span::after {
			left: 0;
			top: 50%;
			width: 1.4rem;
			height: 1.4rem;
			margin-top: -.7rem;
			margin-left: .5rem;
			background-color: var(--color-base);
			border-radius: 100%;
		}
		input[type=checkbox] + span::before {
			border-radius: .4rem%;
		}
		input[type=checkbox] + span::after {
			left: .9rem;
			top: calc(50% - .8rem);
			width: .7rem;
			height: 1.4rem;
			border-right: .3rem solid var(--color-base);
			border-bottom: .3rem solid var(--color-base);
			transform: rotate(45deg);
		}
	}
	.-radio label {
		input[type=checkbox] + span::before {
			border-radius: 100%;
		}
		input[type=checkbox] + span::after {
			left: 0;
			top: 50%;
			width: 1.4rem;
			height: 1.4rem;
			margin-top: -.7rem;
			margin-left: .5rem;
			background-color: var(--color-base);
			border-radius: 100%;
		}
	}

}