@charset "UTF-8";




/* CSS STYLE */

body {
	line-height: 2;
}

.pcnone {
	display: none !important;
}





#ricepower11 {
	position: relative;
	width: 100%;
	padding-top: 9em;
	font-family: "Noto Serif JP", serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.05em;
	overflow: hidden;
	a {
		color: #b68d1e;
		text-decoration: underline;
		transition: 0.3s ease;
		&:hover {
			text-decoration: none;
			color: #000;
		}
		img {
			transition: 0.3s ease;
		}
	}
	sup,
	sub {
		height: 0;
		line-height: 1;
		vertical-align: baseline;
		_vertical-align: bottom;
		position: relative;
	}
	sup {
		bottom: 1ex;
	}
	sub {
		top: .5ex;
	}

	.ricepower11-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		clip-path: inset(0);
		overflow: hidden;
		z-index: 1;
		&:after {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			display: block;
			background: #fff url(../img/main-bg.png) no-repeat right top / 90em;
			width: 100vw;
			height: 100vh;
		}
	}
	.inner {
		position: relative;
		width: 100%;
		max-width: 130em;
		margin-left: auto;
		margin-right: auto;
		padding-left: 5em;
		padding-right: 5em;
		z-index: 2;
	}
	.head1 {
		margin-bottom: 1.25em;
		font-size: 4em;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.15em;
		text-align: center;
		color: #000;
		& + p {
			margin: -1.2em 0 2em 0;
			font-size: 1.6em;
			text-align: center;
		}
	}
	.readbox, .readbox2 {
		position: relative;
		background-color: #fff;
		padding: 4.5em 5em;
		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
		z-index: 1;
		h2, h3 {
			position: relative;
			margin-bottom: 0.8em;
			font-size: 2.4em;
			font-weight: 500;
			line-height: 1.6;
			color: #000;
			&:before {
				content: "";
				display: block;
				position: absolute;
				top: 0.6em;
				left: -2.08333em;
				width: 1.6666em;
				border-top: 2px solid #b68d1e;
			}
		}
		p {
			margin-top: 0.5em;
			font-size: 1.4em;
			strong {
				font-weight: 500;
				color: #b68d1e;
			}
		}
		&.flex {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			.read {
				width: 55.4545%;
			}
			.image {
				background-color: #f8f8f8;
				width: 40%;
				padding: 2.5em 3em;
				h4 {
					margin-bottom: 1em;
					font-size: 1.8em;
					font-weight: 500;
					line-height: 1.4;
					color: #000;
					text-align: center;
				}
			}
		}
	}
	.readbox2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 5em;
		padding: 0;
		&:nth-of-type(odd) {
			flex-direction: row-reverse;
			transform: translate(4em, 0);
		}
		&:nth-of-type(even) {
			transform: translate(-4em, 0);
		}
		.read {
			width: 46.6667%;
			padding: 4.5em 5em;
		}
		.image {
			position: relative;
			width: 53.3333%;
			height: 100%;
			min-height: 40em;
			margin: 0;
			padding: 0;
			overflow: hidden;
			img {
				position: absolute;
				top: 0;
				left: 0;
				object-fit: cover;
				max-width: initial;
				width: 100%;
				height: 100%;
			}
		}
	}

	.ricepower11-head {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 2px solid #b68d1e;
		background-color: #fff;
		width: 100%;
		height: 9em;
		transition: 0.3s ease;
		z-index: 101;
		&.active {
			height: 7em;
		}
		.header-inner {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			max-width: 136em;
			margin: 0 auto;
			padding: 0 3em;
			.header-logo {
				width: 16.7em;
				a {
					font-size: 1.1em;
					text-decoration: none;
					color: #1a1a1a;
				}
				img {
					width: 16.7em;
					height: auto;
				}
			}
			#header-menu {
				position: relative;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				ul {
					display: flex;
					align-items: center;
					li {
						margin-left: 2.5em;
					}
					a {
						position: relative;
						text-decoration: none;
						color: #1a1a1a;
						span {
							font-size: 1.4em;
							line-height: 2;
						}
						&:after {
							content: '';
							position: absolute;
							left: 0;
							width: 100%;
							height: 2px;
							background: #b68d1e;
							bottom: -3px;
							transform: scale(0, 1);
							transform-origin: right top;
							transition: transform 0.3s;
						}
						&:hover {
							&:after {
								transform: scale(1, 1);
								transform-origin: left top;
							}
						}
					}
				}
				p {
					width: 22em;
					margin-left: 5em;
					a {
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 1px solid #1a1a1a;
						border-radius: 3px;
						background-color: #fff;
						width: 22em;
						height: 5em;
						text-decoration: none;
						color: #1a1a1a;
						overflow: hidden;
						span {
							position: relative;
							font-size: 1.5em;
							z-index: 2;
						}
						svg {
							position: relative;
							margin-right: 1em;
							width: 18px;
							height: 17px;
							transition: 0.3s ease;
							z-index: 2;
						}
						&:hover {
							border: 1px solid #b68d1e;
							background-color: #b68d1e;
							color: #fff;
							svg {
								fill: #fff;
							}
						}
					}
				}
			}
		}
		#menu-open {
			display: none;
		}
	}

	.ricepower11-mv {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #996b0f url(../img/mv-bg.jpg) no-repeat center center / cover;
		width: 100%;
		height: calc(100vh - 9em);
		color: #fff;
		z-index: 2;
		h1 {
			font-size: 4em;
			font-weight: bold;
			line-height: 1.5;
			text-align: center;
			strong {
				font-size: 200%;
			}
		}
		p {
			margin-top: 0.8em;
			font-size: 3.2em;
			font-weight: bold;
			line-height: 1.5;
			text-align: center;
		}
	}
	
	.ricepower11-about {
		width: 100%;
		padding-top: 11em;
		padding-bottom: 12em;
		z-index: 1;
		ul {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10em;
			li {
				position: relative;
				font-size: 2em;
				font-weight: 500;
				line-height: 1.4;
				text-align: center;
				&:first-of-type {
					width: 61.6666%;
					&:after {
						content: "";
						position: absolute;
						top: 9em;
						right: -3.5em;
						width: 0;
						height: 0;
						border-style:solid;
						border-width: 2em 0 2em 2em;
						border-color: transparent transparent transparent #b68d1e;
						margin-top: -2em;
					}
				}
				&:last-of-type {
					width: 30%;
					color: #b68d1e;
				}
				img {
					margin-bottom: 0.8em;
				}
			}
		}
	}
	
	.ricepower11-menu {
		position: relative;
		background: #efebe2 url(../img/no11-top-bg.jpg) no-repeat center center / cover;
		width: 100%;
		padding: 11em 0 12em 0;
		z-index: 2;
		ul {
			display: flex;
			justify-content: space-between;
			margin-top: 4em;
			li {
				width: 49.16%;
				a {
					position: relative;
					display: flex;
					align-items: center;
					border: 1px solid #fff;
					background-color: #b68d1e;
					padding: 1.36em 1.6em;
					font-size: 2.2em;
					line-height: 1.5;
					letter-spacing: 0.1em;
					text-decoration: none;
					color: #fff;
					img {
						width: 3.63em;
						margin-right: 1em;
					}
					&:after {
						content: "";
						position: absolute;
						top: 50%;
						right: 1.5em;
						display: block;
						border-bottom: 1px solid #fff;
						border-right: 1px solid #fff;
						width: 0.8em;
						height: 0.8em;
						margin-top: -0.6em;
						transform: rotate(45deg);
						transition: 0.3s ease;
					}
					&:hover {
						background-color: #996b0f;
						&:after {
							margin-top: -0.4em;
						}
					}
				}
			}
		}
	}
	
	.ricepower11-main {
		position: relative;
		background: linear-gradient(to right, #775511 0%,#8a7233 100%);
		width: 100%;
		padding: 0 0 12em 0;
		overflow: hidden;
		z-index: 2;
		.inner {
			z-index: 2;
		}
		.bg-img1 {
			mix-blend-mode: multiply;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
			opacity: 0.3;
			z-index: 1;
		}
		.bg-img2 {
			mix-blend-mode: multiply;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: auto;
			opacity: 0.3;
			transform: rotate(180deg);
			z-index: 1;
		}
		.main-top {
			position: relative;
			padding: 9em 70em 9em 0;
			color: #fff;
			&:after {
				content: "";
				position: absolute;
				top: 0;
				right: 50%;
				display: block;
				background: url(../img/no11-title-bg.png) no-repeat top right / cover;
				width: 70em;
				height: 70em;
				z-index: -1;
			}
			&#no11plus {
				margin-top: 12em;
			}
			h3 {
				margin-bottom: 0.8em;
				font-size: 2.4em;
				font-weight: 500;
				line-height: 1.65;
			}
			p {
				font-size: 1.4em;
				strong {
					text-decoration: underline;
				}
			}
			.link {
				margin-top: 0.5em;
				text-align: right;
			}
			a {
				display: inline-flex;
				align-items: center;
				text-decoration: underline;
				color: #fff;
				&:hover {
					text-decoration: none;
				}
				&:after {
					content: "";
					display: block;
					border-top: 1px solid #fff;
					border-right: 1px solid #fff;
					width: 0.5em;
					height: 0.5em;
					margin-left: 0.3em;
					transform: rotate(45deg);
				}
			}
			dl {
				margin-top: 2.5em;
				dt {
					font-size: 1.8em;
					line-height: 1;
				}
				dd {
					margin-top: 1.4em;
					ul {
						display: flex;
						gap: 3px;
						text-align: center;
						line-height: 1.3;
						li {
							width: 100%;
							span {
								display: block;
								border-radius: 0.6em;
								background-color: #fff;
								width: 100%;
								height: 3.125em;
								margin-bottom: 0.3em;
								padding: 0 0.8em;
								letter-spacing: 0;
								font-size: 1.6em;
								line-height: 3.125em;
								text-align: center;
								color: #000;
								white-space: nowrap;
							}
						}
					}
				}
			}
			.image {
				position: absolute;
				top: 0;
				left: 50%;
				width: 50vw;
				height: 100%;
				overflow: hidden;
				img {
					position: absolute;
					top: 0;
					left: 0;
					object-fit: cover;
					max-width: initial;
					width: 100%;
					height: 100%;
				}
			}
		}
		.main-sub {
			margin: 6em 0;
			color: #fff;
			h4 {
				margin-bottom: 0.7em;
				font-size: 2.4em;
				font-weight: 500;
				line-height: 1.65;
			}
			ul {
				display: flex;
				gap: 1.5em;
				line-height: 1.5;
				text-align: center;
				li {
					width: 100%;
					span {
						display: block;
						border-radius: 1.25em;
						background-color: #fff;
						width: 100%;
						height: 6.25em;
						margin-bottom: 0.3em;
						padding: 1.54em 1em;
						letter-spacing: 0;
						font-size: 1.6em;
						line-height: 1.6;
						text-align: center;
						color: #000;
						em {
							font-size: 0.9em;
							font-weight: 500;
						}
					}
				}
			}
		}
		#turnover {
			position: relative;
			border: 3px solid #996b0f;
			border-radius: 2em;
			background: linear-gradient(135deg, #f2e8ce 0%,#ffffff 30%,#edddb2 100%);
			width: calc(100% - 10em);
			min-width: 130em;
			margin: 0 auto;
			padding: 5em;
			box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
			z-index: 3;
			.inner {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				max-width: 120em;
				.read {
					width: 55.4545%;
					h3 {
						position: relative;
						margin-bottom: 0.8em;
						font-size: 2.4em;
						font-weight: 500;
						line-height: 1.4;
						color: #000;
						&:before {
							content: "";
							display: block;
							position: absolute;
							top: 0.6em;
							left: -2.08333em;
							width: 1.6666em;
							border-top: 2px solid #b68d1e;
						}
					}
					p {
						margin-top: 0.5em;
						font-size: 1.4em;
						strong {
							font-weight: 500;
							color: #b68d1e;
						}
					}
				}
				.image {
					background-color: #fff;
					width: 40%;
					padding: 2.5em 3em;
					h4 {
						margin-bottom: 1em;
						font-size: 1.8em;
						font-weight: 500;
						line-height: 1.4;
						color: #996b0f;
						text-align: center;
					}
				}
			}
		}
		.readbox {
			.image-flow {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: flex-end;
				background-color: #f8f8f8;
				margin-top: 4em;
				padding: 2.5em 5em 3em 5em;
				h4 {
					width: 100%;
					font-size: 1.8em;
					font-weight: 500;
					line-height: 1.4;
					color: #000;
					text-align: center;
				}
				.box {
					position: relative;
					width: 28%;
					&:after {
						content: "";
						position: absolute;
						bottom: 55%;
						right: -5.5em;
						width:0;
						height:0;
						border-style:solid;
						border-width: 3em 0 3em 3em;
						border-color: transparent transparent transparent #decb99;
					}
					img {
						display: block;
						width: 22em;
						height: auto;
						margin: 0 auto 1em auto;
					}
					dt {
						font-size: 1.6em;
						color: #996b0f;
					}
					dd {
						font-size: 1.4em;
						line-height: 1.6;
					}
					&:last-child {
						&:after {
							display: none;
						}
					}
				}
				& + p {
					margin-top: 1em;
					font-size: 1em;
					line-height: 1;
					text-align: right;
					color: #666;
				}
			}
		}
		.main-btn {
			margin-top: 4em;
			text-align: center;
			a {
				position: relative;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #fff;
				border-radius: 0.3125em;
				width: 31.25em;
				height: 3.75em;
				font-size: 1.6em;
				line-height: 1;
				text-decoration: none;
				color: #fff;
				&:after {
					content: "";
					position: absolute;
					top: 50%;
					right: 1.25em;
					display: block;
					border-top: 1px solid #fff;
					border-right: 1px solid #fff;
					width: 0.5em;
					height: 0.5em;
					margin-top: -0.3em;
					transform: rotate(45deg);
				}
				&:hover {
					background-color: rgba(255, 255, 255, 0.3);
				}
			}
		}
	}
	
	.ricepower11-reason {
		position: relative;
		width: 100%;
		padding-top: 11em;
		padding-bottom: 12em;
		z-index: 2;
		.readbox2 {
			ul {
				display: flex;
				gap: 2em;
				margin-top: 2.5em;
				li {
					display: flex;
					align-items: center;
					img {
						width: 5em;
						margin-right: 1em;
					}
					span {
						font-size: 1.5em;
						line-height: 1.4;
						letter-spacing: 0;
					}
				}
			}
		}
	}
	
	.ricepower11-episode {
		position: relative;
		background: #f5f2eb url(../img/episode-bg.png) repeat-x center top / 20em;
		width: 100%;
		padding: 11em 0 20em 0;
		z-index: 2;
		.episode {
			display: flex;
			justify-content: space-between;
			margin-top: 3em;
			.read {
				width: 46.6666%;
				padding: 0 5em;
				h3 {
					position: relative;
					margin-bottom: 0.8em;
					font-size: 2.4em;
					font-weight: 500;
					line-height: 1.6;
					color: #000;
				}
				p {
					font-size: 1.4em;
					strong {
						font-weight: 500;
						color: #b68d1e;
					}
				}
			}
			.image {
				width: 53.3333%;
				p {
					margin-top: 0.8em;
					font-size: 1em;
					line-height: 1;
					text-align: right;
					color: #666;
				}
			}
			&:nth-of-type(odd) {
				flex-direction: row-reverse;
			}
		}
		hr {
			border: none;
			border-top: 1px solid #ccc;
			margin: 6em 0;
		}
	}
}

@media screen and (max-width: 1300px) {
	#ricepower11 {
		font-size: 0.76923vw;
	}
}