/*
-------------------------
	[1]common
-------------------------
*/
/* == 1)main == */
main {
	background: #e5ecc1;
}
@media screen and (max-width: 798px) {
	main {
		background: url(../../../img/common/bg-base01.gif) repeat;
	}
}

/* == 2)elements == */
main img {
	vertical-align: bottom;
}
main figcaption,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
	line-height: 1;
	font-weight: normal;
	font-size: 10px;
}
@media screen and (max-width: 798px) {
	main img {
		max-width: none;
		width: 100%;
	}
}

.bold {
	font-weight: bold;
}
.text-credit {
	font-size: 13px;
}
.item-2column {
	display: flex;
	padding-inline: 54px;
	gap: 64px 40px;
}
.item-2column > div {
	width: calc(100% / 2);
}
.item-2column > div figure img {
	width: 400px;
	height: auto;
}
.item-2column > div figure figcaption {
	font-size: 14px;
	line-height: 1.7;
}
.border-box {
	width: 808px;
	margin-inline: auto;
	padding-block: 45px 55px;
	padding-inline: 70px;
	background: #fff;
	border: solid 2px #d2c295;
	outline: solid 6px #d2c295;
	outline-offset: 8px;
	box-shadow: 0 0 0 8px #fff;
	border-radius: 12px;
}
@media screen and (max-width: 798px) {
	.border-box {
		width: auto;
		margin-inline: calc(36 / 375 * 100vw);
		padding-block: calc(40 / 375 * 100vw) calc(60 / 375 * 100vw);
		padding-inline: calc(13 / 375 * 100vw);
		outline-offset: 6px;
		box-shadow: 0 0 0 6px #fff;
		border-radius: 10px;
	}
}
.border-box .border-box-title {
	margin-block-end: 50px;
}
@media screen and (max-width: 798px) {
	.border-box .border-box-title {
		margin-block-end: calc(22 / 375 * 100vw);
		text-align: center;
	}
}
.border-box .border-box-text p {
	margin-block-end: 40px;
}
@media screen and (max-width: 798px) {
    .border-box .border-box-text p {
        margin-block-end: calc(40 / 375 * 100vw);
    }
}
.border-box .border-box-text p:last-child {
	margin-block-end: 0;
}

/* == 3)slick.css == */
.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.slick-list:focus {
	outline: none;
}
.slick-list.dragging {
	cursor: pointer;
	cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.slick-track {
	position: relative;
	top: 0;
	left: 0;
	display: block;
}
.slick-track:before,
.slick-track:after {
	display: table;
	content: '';
}
.slick-track:after {
	clear: both;
}
.slick-loading .slick-track {
	visibility: hidden;
}
.slick-slide {
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}
[dir='rtl'] .slick-slide {
	float: right;
}
.slick-slide img {
	display: block;
}
.slick-slide.slick-loading img {
	display: none;
}
.slick-slide.dragging img {
	pointer-events: none;
}
.slick-initialized .slick-slide {
	display: block;
}
.slick-loading .slick-slide {
	visibility: hidden;
}
.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
	display: none;
}

/*
-------------------------
	[2]page-header
-------------------------
*/
/* == 1)layout == */
.page-header {
	padding: 0 0 100px;
	background: url("../../img/kome_library/make/bg-repeat-01.jpg") repeat 0 0;
	overflow: hidden;
}
@media screen and (max-width: 798px) {
	.page-header {
		height: auto;
		padding: 0 0 calc(64 / 640 * 100vw);
		background-size: calc(102 / 640 * 100vw) auto;
	}
}

/* == 2)h1 == */
.page-header > h1 {
	margin: 28px 0 30px 215px;
}
@media screen and (max-width: 798px) {
	.page-header > h1 {
		margin: calc(8 / 640 * 100vw) calc(40 / 640 * 100vw) calc(40 / 640 * 100vw);
	}
}

/*
-------------------------
	[3]contents
-------------------------
*/
/* == 1) prologue == */
.prologue {
	padding-block: 105px 60px;
	background: #fff;
}
@media screen and (max-width: 798px) {
	.prologue {
		padding-block: calc(45 / 375 * 100vw) calc(60 / 375 * 100vw);
	}
}
.prologue-body {
	max-width: 840px;
	margin-inline: auto;
	letter-spacing: 0.04em;
}
@media screen and (max-width: 798px) {
	.prologue-body {
		max-width: 100%;
	}
}
.prologue-body h1 {
	margin-block-end: 47px;
}
@media screen and (max-width: 798px) {
	.prologue-body h1 {
		margin-block-end: calc(24 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.prologue-info {
    width: 680px;
	margin-block-end: 60px;
    margin-inline: auto;
    font-family: "Noto Serif JP", serif;
    font-size: 17px;
    font-weight: 200;
    color: #79634c;
    line-height: 2;
}
@media screen and (max-width: 798px) {
	.prologue-info {
        width: auto;
		margin-block-end: calc(44 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
        font-size: 16px;
	}
}
.prologue-item {
	width: 680px;
	margin-block-end: 48px;
	margin-inline: auto;
}
@media screen and (max-width: 798px) {
	.prologue-item {
		width: auto;
		margin-block-end: calc(50 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
		box-sizing: border-box;
	}
}
.prologue-item figure {
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 798px) {
	.prologue-item figure {
		display: block;
	}
}
.prologue-item figure img {
	margin-inline-start: 74px;
}
@media screen and (max-width: 798px) {
	.prologue-item figure img {
		width: 100%;
		height: auto;
		margin-inline-start: 0;
	}
}
.prologue-item figure figcaption {
	width: 400px;
	margin-block-start: 20px;
	font-size: 14px;
	line-height: 1.7;
}
@media screen and (max-width: 798px) {
	.prologue-item figure figcaption {
		width: 100%;
		margin-block-start: calc(20 / 375 * 100vw);;
	}
}
.prologue-item figure figcaption span {
	display: block;
}
.prologue-body .page-btn-title {
	margin-block-end: 16px;
}
@media screen and (max-width: 798px) {
	.prologue-body .page-btn-title {
		margin-block-end: calc(16 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.prologue .page-btn-text {
	gap: 15px;
	list-style: none;
}
@media screen and (max-width: 798px) {
	.prologue .page-btn-text {
		gap: calc(14 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.prologue .page-btn-text li {
	width: calc((100% - 30px) / 3);
	margin-inline: 0;
}
@media screen and (max-width: 798px) {
	.prologue .page-btn-text li {
		width: 100%;
	}
}
.prologue .page-btn-text li a {
	position: relative;
	display: flex;
	padding-block: 19px 17px;
	padding-inline: 15px 36px;
	background: #fff;
	border: #907116 solid 1px;
	border-radius: 5px;
	text-align: center;
	color: #78634c;
	font-size: 20px;
	text-decoration: none;
	line-height: 1;
	align-items: center;
    justify-content: center;
}
@media screen and (max-width: 798px) {
	.prologue .page-btn-text li a {
		padding-block: calc(17 / 375 * 100vw);
		padding-inline: calc(15 / 375 * 100vw) calc(45 / 375 * 100vw);
	}
}
.prologue .page-btn-text li a::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 11px;
	background: url(../../../img/kome_library/ricecooking/icon-arrow-02-pc.png) 0 0 no-repeat;
	background-size: cover;
	top: calc(100% / 2);
	right: 15px;
	margin-block-start: -6px;
}
@media screen and (max-width: 798px) {
	.prologue .page-btn-text li a::after {
		background: url(../../../img/kome_library/ricecooking/icon-arrow-02-sp.png) 0 0 no-repeat;
		background-size: cover;
	}
}
.prologue .page-btn-text li a:hover {
	background: #f1edd8;
	border: #da9501 solid 1px;
	color: #da9501;
}
.prologue .page-btn-text li a:hover::after {
	background: url(../../../img/kome_library/ricecooking/icon-arrow-01-pc.png) 0 0 no-repeat;
	background-size: cover;
}

/* == 2) ransition-first == */
.ransition-first {
	padding-block: 110px 120px;
	background: url(../../../img/kome_library/ricecooking/bg-pattern-01.jpg);
}
@media screen and (max-width: 798px) {
	.ransition-first {
		padding-block: calc(60 / 375 * 100vw) calc(80 / 375 * 100vw);
	}
}
.ransition-first-body {
	max-width: 948px;
	margin-inline: auto;
	letter-spacing: 0.04em;
}
@media screen and (max-width: 798px) {
	.ransition-first-body {
		max-width: 100%;
	}
}
.ransition-first-body h2 {
	margin-block-end: 70px;
	text-align: center;
}
@media screen and (max-width: 798px) {
	.ransition-first-body h2 {
		margin-block-end: calc(33 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.ransition-first-body h3 {
	margin-block-end: 50px;
}
@media screen and (max-width: 798px) {
	.ransition-first-body h3 {
		margin-block-end: calc(22 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.ransition-first-body h4 {
	margin-block-end: 35px;
}
@media screen and (max-width: 798px) {
	.ransition-first-body h4 {
		margin-block-end: calc(20 / 375 * 100vw);
	}
}
.ransition-first-body .text-box {
	padding-inline: 54px;
}
@media screen and (max-width: 798px) {
	.ransition-first-body .text-box {
		margin-inline: calc(24 / 375 * 100vw);
		padding-inline: 0;
		font-size: 15px;
	}
}
.ransition-first-body .text-box p {
	margin-block-start: 35px;
}
@media screen and (max-width: 798px) {
	.ransition-first-body .text-box p {
		margin-block-start: calc(45 / 375 * 100vw);
	}
}
.ransition-first-body .text-box p:first-child {
	margin-block-start: 0;
}
.period01 {
	width: 647px;
	margin-block: 85px 155px;
	margin-inline: auto;
}
@media screen and (max-width: 798px) {
	.period01 {
		width: auto;
		margin-block: calc(40 / 375 * 100vw) calc(60 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.period01-title {
	text-align: center;
}
@media screen and (max-width: 798px) {
	.period01-title {
		padding-block: calc(40 / 375 * 100vw) calc(35 / 375 * 100vw);
		background: #fdfcf7;
	}
}
.period01-list {
	margin-block: -10px 17px;
	padding-block: 60px;
	padding-inline: 70px 30px;
	background: #fdfcf7;
	list-style: none;
}
@media screen and (max-width: 798px) {
	.period01-list {
		margin-block: calc(0 / 375 * 100vw) calc(16 / 375 * 100vw);
		padding-block: 0 calc(40 / 375 * 100vw);
		padding-inline: calc(24 / 375 * 100vw) calc(24 / 375 * 100vw);
	}
}
.period01-list li:first-child {
	margin-block-end: 30px;
}
.period01-list li:nth-child(2) {
	margin-block-end: 12px;
}
@media screen and (max-width: 798px) {
    .period01-list li:nth-child(2) {
        margin-block-end: 30px;
    }
}
.period01-list li figure {
	display: flex;
	gap: 44px;
}
@media screen and (max-width: 798px) {
	.period01-list li figure {
		display: block;
	}
}
.period01-list li:nth-child(2) figure {
	gap: 7px;
}
.period01-list li figure img {
	width: 266px;
	height: auto;
}
@media screen and (max-width: 798px) {
	.period01-list li figure img {
		width: 100%;
	}
}
.period01-list li:nth-child(2) img {
	width: 306px;
}
@media screen and (max-width: 798px) {
	.period01-list li:nth-child(2) img {
		width: 100%;
	}
}
.period01-list li figure figcaption {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: bold;
	flex-wrap: wrap;
	align-content: center;
	gap: 7px;
    line-height: 1.5;
}
@media screen and (max-width: 798px) {
	.period01-list li figure figcaption {
		display: block;
		padding-block-start: calc(12 / 375 * 100vw);
	}
}
.period01-list li figure figcaption span {
	display: block;
}
@media screen and (max-width: 798px) {
	.period01-list li figure figcaption span {
		display: inline;
	}
}
.period01 .text-credit {
	text-align: right;
}
.period02 {
	width: 840px;
	margin-block: 75px 60px;
	margin-inline: auto;
}
@media screen and (max-width: 798px) {
	.period02 {
		width: 100%;
		margin-block: calc(40 / 375 * 100vw);
	}
}
.period02-item-title {
	text-align: center;
}
@media screen and (max-width: 798px) {
	.period02-item-title {
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.period02-item {
	margin-block-start: -14px;
	padding-block: 40px;
	padding-inline: 20px;
	background: #d3c9a0;
	border-radius: 100px;
	text-align: center;
	line-height: 1;
	font-size: 14px;
}
@media screen and (max-width: 798px) {
	.period02-item {
		margin-block-start: calc(-13 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
		padding-block: calc(35 / 375 * 100vw);
		padding-inline: calc(20 / 375 * 100vw);
		border-radius: 20px;
		line-height: 1.7;
	}
}
.period02-heading {
	margin-block-end: 17px;
}
.period03 {
	margin-block-end: 35px;
	padding-block-end: 67px;
	padding-inline: 54px;
}
@media screen and (max-width: 798px) {
	.period03 {
		margin-block-end: calc(40 / 375 * 100vw);
		padding-block-end: 0;
		padding-inline: 0;
	}
}
@media screen and (max-width: 798px) {
	.period03 h4 {
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.period03-item {
	position: relative;
}
@media screen and (max-width: 798px) {
	.period03-item {
		position: static;
		margin-inline: calc(24 / 375 * 100vw);
	}
}
@media screen and (max-width: 798px) {
	.period03-first {
		margin-block-end: calc(40 / 375 * 100vw);
	}
}
.period03-first figure {
	display: flex;
	gap: 18px;
}
@media screen and (max-width: 798px) {
	.period03-first figure {
		display: block;
	}
}
.period03-first figure img {
	width: 510px;
	height: auto;
}
@media screen and (max-width: 798px) {
	.period03-first figure img {
		width: 100%;
	}
}
.period03-first figure figcaption {
	font-size: 14px;
	line-height: 1.7;
}
@media screen and (max-width: 798px) {
	.period03-first figure figcaption {
		padding-block-start: calc(15 / 375 * 100vw);
	}
}
.period03-first .bold {
	padding-inline-end: 10px;
}
.period03-first .text-credit {
	display: block;
}
.period03-second {
	position: absolute;
	right: -30px;
	bottom: -67px;
}
@media screen and (max-width: 798px) {
	.period03-second {
		position: static;
	}
}
.period04 {
	margin-block-end: 90px;
	text-align: center;
}
@media screen and (max-width: 798px) {
	.period04 {
		margin-block-end: calc(40 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.period04 figure img {
	width: 647px;
	height: auto;
}
@media screen and (max-width: 798px) {
	.period04 figure img {
		width: 100%;
	}
}
.period05 {
	display: flex;
	margin-block: 80px 60px;
	padding-inline: 54px;
	gap: 40px;
}
@media screen and (max-width: 798px) {
	.period05 {
		margin-block: calc(40 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
		padding-inline: 0;
		flex-wrap: wrap;
		gap: calc(25 / 375 * 100vw);
	}
}
.period05 > div {
	width: calc(100% / 2);
}
@media screen and (max-width: 798px) {
	.period05 > div {
		width: 100%;
	}
}
.period05 > div figure img {
	width: 400px;
	height: auto;
}
@media screen and (max-width: 798px) {
	.period05 > div figure img {
		width: 100%;
	}
}
.period05 > div figure figcaption {
	padding-block-start: 20px;
	font-size: 14px;
	line-height: 1.7;
}
@media screen and (max-width: 798px) {
	.period05 > div figure figcaption {
		padding-block-start: calc(14 / 375 * 100vw);
	}
}
.period05 > div figure figcaption .bold {
	display: block;
	text-align: center;
}
.period05 > div figure figcaption .text-credit {
	display: block;
}
.period05 > div:nth-child(2) .text-credit {
	text-align: center;
}
.period06 {
	text-align: center;
}
@media screen and (max-width: 798px) {
	.period06 {
		margin-inline: calc(24 / 375 * 100vw);
	}
}

/* == 3) ransition-second == */
.ransition-second {
	padding-block: 120px;
	background: url(../../../img/kome_library/ricecooking/bg-pattern-02.jpg);
}
@media screen and (max-width: 798px) {
	.ransition-second {
		padding-block: calc(60 / 375 * 100vw);
	}
}
.ransition-second-body {
	max-width: 948px;
	margin-inline: auto;
	letter-spacing: 0.04em;
}
@media screen and (max-width: 798px) {
	.ransition-second-body {
		max-width: 100%;
	}
}
.ransition-second-body h2 {
	margin-block-end: 70px;
	text-align: center;
}
@media screen and (max-width: 798px) {
	.ransition-second-body h2 {
		margin-block-end: calc(35 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.ransition-second-body h3 {
	margin-block-end: 50px;
}
@media screen and (max-width: 798px) {
	.ransition-second-body h3 {
		margin-block-end: calc(22 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
	}
}
@media screen and (max-width: 798px) {
	.ransition-second-body .text-box {
		font-size: 15px;
	}
}
.period07 {
	display: flex;
	margin-block-end: 130px;
	padding-inline: 54px;
	gap: 10px 36px;
	flex-wrap: wrap;
}
.period07 .text-credit a {
    text-decoration: underline;
}

.period07 .text-credit a:hover {
    text-decoration: none;
}
@media screen and (max-width: 798px) {
	.period07 {
		margin-block-end: calc(60 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
		padding-inline: 0;
		gap: calc(29 / 375 * 100vw);
	}
}
.period07-item:first-child {
	width: 333px;
}
@media screen and (max-width: 798px) {
	.period07-item:first-child {
		width: 100%;
	}
}
.period07-item:first-child p {
    height: 262px;
	margin-block-end: 10px;
}
@media screen and (max-width: 798px) {
	.period07-item:first-child p {
        height: auto;
		margin-block-end: calc(20 / 375 * 100vw);
	}
}
.period07-item:last-child {
	display: flex;
	width: 471px;
	flex-wrap: wrap;
	gap: 10px;
}
@media screen and (max-width: 798px) {
	.period07-item:last-child {
		width: 100%;
		gap: calc(30 / 375 * 100vw);
	}
}
@media screen and (max-width: 798px) {
	.period07-item > p {
		font-size: 15px;
	}
}
.period07-item figure img {
	width: 100%;
	height: auto;
}
.period07-item figure figcaption {
	padding-block-start: 20px;
	font-size: 14px;
	line-height: 1.7;
}
@media screen and (max-width: 798px) {
	.period07-item figure figcaption {
		padding-block-start: calc(14 / 375 * 100vw);
	}
}
.period07-item figure figcaption span {
	display: block;
}
.period07-item figure figcaption span > span {
	display: inline;
}
.ransition-second-body .text-box {
	padding-inline: 54px;
}
@media screen and (max-width: 798px) {
	.ransition-second-body .text-box {
		margin-inline: calc(24 / 375 * 100vw);
		padding-inline: 0;
	}
}
.period08 {
	display: flex;
	gap: 40px;
	margin-block: 50px 150px;
	padding-inline: 54px;
	flex-wrap: wrap;
}
.period08 .text-credit a {
    text-decoration: underline;
}

.period08 .text-credit a:hover {
    text-decoration: none;
}
@media screen and (max-width: 798px) {
	.period08 {
		gap: calc(25 / 375 * 100vw);
		margin-block: calc(60 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
		padding-inline: 0;
	}
}
.period08 div {
	width: calc((100% - 40px) / 2);
}
@media screen and (max-width: 798px) {
	.period08 div {
		width: 100%;
	}
}
.period08 div:last-child {
	width: 100%;
}
@media screen and (max-width: 798px) {
	.period08 div > p {
		font-size: 15px;
	}
}
.period08 div figure figcaption {
	padding-block-start: 20px;
	font-size: 14px;
	line-height: 1.7;
}
@media screen and (max-width: 798px) {
	.period08 div figure figcaption {
		padding-block-start: calc(16 / 375 * 100vw);
	}
}
.period08 div figure figcaption .bold {
	display: block;
}
.period08 div figure img {
	width: 100%;
	height: auto;
}
.period09 {
	display: flex;
	gap: 38px;
	margin-block-end: 65px;
	padding-inline: 54px;
}
@media screen and (max-width: 798px) {
	.period09 {
		gap: calc(25 / 375 * 100vw);
		margin-block-end: calc(25 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
		padding-inline: 0;
		flex-wrap: wrap;
	}
}
.period09 div {
	width: calc(100% / 2);
}
@media screen and (max-width: 798px) {
	.period09 div {
		width: 100%;
	}
}
.period09 div figure img {
	width: 100%;
	height: auto;
}
.period09 div figure figcaption {
	margin-block-start: 14px;
	font-size: 14px;
	line-height: 1.7;
}
@media screen and (max-width: 798px) {
	.period09 div figure figcaption {
		margin-block-start: calc(14 / 375 * 100vw);
	}
}
.period09 div:first-child figure figcaption .bold {
	display: block;
}
.period09 div:last-child span:not(.bold):not(.text-credit) {
	display: block;
}
.period10 {
	display: flex;
	margin-block-end: 110px;
	padding-inline: 54px;
	justify-content: space-between;
}
@media screen and (max-width: 798px) {
	.period10 {
		margin-block-end: calc(60 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
		padding-inline: 0;
		flex-wrap: wrap;
		gap: calc(30 / 375 * 100vw);
	}
}
.period10 > div figure figcaption {
	margin-block-start: 14px;
	font-size: 14px;
	line-height: 1.7;
}
@media screen and (max-width: 798px) {
	.period10 > div figure figcaption {
		margin-block-start: calc(14 / 375 * 100vw);
	}
}
.period10 > div figure figcaption span {
	display: block;
}
.period10 > div figure figcaption .bold {
	text-align: center;
}
.period10 > div figure figcaption .text-credit {
	text-align: center;
}
.period10 > div:first-child {
	display: flex;
	width: 393px;
	flex-wrap: wrap;
	justify-content: space-between;
}
@media screen and (max-width: 798px) {
	.period10 > div:first-child {
		width: 100%;
		gap: calc(25 / 375 * 100vw);
	}
}
.period10 > div:first-child .text-credit {
	display: block;
	width: 100%;
	margin-block-start: 20px;
	text-align: center;
}
@media screen and (max-width: 798px) {
	.period10 > div:first-child .text-credit {
		display: none;
	}
}
.period10 > div:last-child {
	width: 414px;
}
@media screen and (max-width: 798px) {
	.period10 > div:last-child {
		width: 100%;
	}
}
.period10 > div:last-child figure img {
	width: 100%;
	height: auto;
}
.period10 div div {
	width: 184px;
}
@media screen and (max-width: 798px) {
	.period10 div div {
		width: 100%;
	}
}
.period11 {
	width: 657px;
	margin-block: 70px 115px;
	margin-inline: auto;
}
@media screen and (max-width: 798px) {
	.period11 {
		width: auto;
		margin-block: calc(26 / 375 * 100vw) calc(60 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.period11 figure img {
	width: 100%;
	height: auto;
}
.period11 figure figcaption {
	padding-block-start: 20px;
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
}
@media screen and (max-width: 798px) {
	.period11 figure figcaption {
		padding-block-start: calc(24 / 375 * 100vw);
	}
}
.period11 figure figcaption .bold {
	display: block;
}
.ransition-second .border-box {
	position: relative;
}
@media screen and (max-width: 798px) {
	.ransition-second .border-box {
		position: static;
	}
}
.ransition-second .border-box .border-box-text p {
	margin-block-end: 50px;
}
@media screen and (max-width: 798px) {
	.ransition-second .border-box .border-box-text p {
		margin-block-end: calc(36 / 375 * 100vw);
		padding-inline: calc(13 / 375 * 100vw);
		font-size: 15px;
	}
}
.ransition-second .border-box .border-box-text p:last-child {
	width: 420px;
	margin-block-end: 0;
}
@media screen and (max-width: 798px) {
	.ransition-second .border-box .border-box-text p:last-child {
		width: 100%;
	}
}
.ransition-second .border-box .border-box-text p:last-child > span {
	display: block;
	font-family: "Noto Serif JP", serif;
	font-weight: 200;
	font-size: 18px;
	color: #2d2d2d;
}
.ransition-second .border-box .border-box-text p:last-child > span span {
	display: inline;
	font-size: 14px;
}
.ransition-second .border-box .border-box-image {
	position: absolute;
	bottom: 85px;
	right: -45px;
}
@media screen and (max-width: 798px) {
	.ransition-second .border-box .border-box-image {
		position: static;
		width: calc(271 / 375 * 100vw);;
		margin-block-start: calc(40 / 375 * 100vw);
		margin-inline: calc(-13 / 375 * 100vw) 0;
		bottom: 0;
		right: 0;
	}
}

.ransition-second .border-box .border-box-credit {
	font-size: 13px;
	text-align: right;
	position: relative;
	margin-inline-end: -25px;
}
@media screen and (max-width: 798px) {
	.ransition-second .border-box .border-box-credit {
		margin-block-start: 5px;
		margin-inline-end: -5px;
	}
}

/* == 4) ransition-third == */
.ransition-third {
	padding-block: 120px 135px;
	background: #fdf6d9;
}
@media screen and (max-width: 798px) {
	.ransition-third {
		padding-block: calc(60 / 375 * 100vw);
	}
}
.ransition-third-body {
	max-width: 948px;
	margin-inline: auto;
}
.period12 {
	display: flex;
	gap: 18px;
	margin-block: 80px;
	padding-inline: 54px;
}
@media screen and (max-width: 798px) {
	.period12 {
		display: flex;
		gap: calc(30 / 375 * 100vw);
		margin-block: calc(40 / 375 * 100vw) calc(55 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
		padding-inline: 0;
		flex-wrap: wrap;
	}
}
.period12 > div {
	width: 407px;
}
@media screen and (max-width: 798px) {
	.period12 > div {
		width: 100%;
	}
}
.period12 > div:nth-child(2) {
	width: 412px;
}
@media screen and (max-width: 798px) {
	.period12 > div:nth-child(2) {
		width: 100%;
	}
}
.period12 figure img {
	width: 100%;
	height: auto;
}
.period12 figure figcaption {
	margin-block-start: 12px;
	font-size: 14px;
	line-height: 1.7;
}
@media screen and (max-width: 798px) {
	.period12 figure figcaption {
		margin-block-start: calc(12 / 375 * 100vw);
	}
}
.period12 figure figcaption span {
	display: block;
}
.period13 {
	display: flex;
	width: 648px;
	margin-block-end: 80px;
	margin-inline: auto;
	flex-wrap: wrap;
	gap: 10px;
}
@media screen and (max-width: 798px) {
	.period13 {
		display: flex;
		width: auto;
		margin-block-end: calc(55 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
		gap: calc(11 / 375 * 100vw);
	}
}
.period13 > div {
	width: 319px;
}
@media screen and (max-width: 798px) {
	.period13 > div {
		width: 100%;
	}
}
.period13 figure img {
	width: 100%;
	height: auto;
}
.period13 > div:last-child {
	width: 100%;
	font-size: 14px;
	line-height: 1.7;
}
.period13 > div:last-child .bold {
	display: block;
	text-align: center;
}
.period14 {
	width: 647px;
	margin-block: 80px 70px;
	margin-inline: auto;
}
@media screen and (max-width: 798px) {
	.period14 {
		width: auto;
		margin-block: calc(55 / 375 * 100vw) calc(45 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.period14-title {
	text-align: center;
}
.period14-body {
	margin-block-start: -10px;
	padding-block: 40px 30px;
	padding-inline: 28px;
	background: #fdfcf7;
}
@media screen and (max-width: 798px) {
	.period14-body {
		margin-block-start: calc(-12 / 375 * 100vw);
		padding-block: calc(43 / 375 * 100vw) calc(30 / 375 * 100vw);
		padding-inline: 0;
	}
}
.period14-text {
	margin-block-start: 30px;
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
}
@media screen and (max-width: 798px) {
	.period14-text {
		margin-block-start: calc(34 / 375 * 100vw);
		padding-inline: calc(15 / 375 * 100vw);
		font-size: 13px;
	}
}
@media screen and (max-width: 798px) {
	.period14-text span {
		display: block;
	}
}
.period15 {
	display: flex;
	width: 564px;
	margin-block-start: 70px;
	margin-inline: auto;
	flex-wrap: wrap;
	gap: 18px;
}
@media screen and (max-width: 798px) {
	.period15 {
		width: auto;
		margin-block-start: calc(45 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
		gap: calc(24 / 375 * 100vw);
	}
}
.period15 > div {
	width: 273px;
}
@media screen and (max-width: 798px) {
	.period15 > div {
		width: 100%;
	}
}
.period15 figure img {
	width: 100%;
	height: auto;
}
.period15 figure figcaption {
	margin-block-start: 12px;
	font-size: 14px;
	text-align: center;
}
@media screen and (max-width: 798px) {
	.period15 figure figcaption {
		margin-block-start: calc(10 / 375 * 100vw);
	}
}

/* == 5) science == */
.science {
	padding-block: 100px 160px;
	background: linear-gradient(to bottom, #ffffff, #e5ecc1);
}
@media screen and (max-width: 798px) {
	.science {
		padding-block: calc(60 / 375 * 100vw);
	}
}
.science-body {
	max-width: 948px;
	margin-inline: auto;
	letter-spacing: 0.04em;
}
@media screen and (max-width: 798px) {
	.science-body {
		max-width: 100%;
	}
}
.science-body h2 {
	margin-block-end: 55px;
	text-align: center;
}
@media screen and (max-width: 798px) {
	.science-body h2 {
		margin-block-end: calc(28 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
	}
}
.science-body .text-box {
	padding-inline: 54px;
	color: #728226
}
@media screen and (max-width: 798px) {
	.science-body .text-box {
		margin-inline: calc(24 / 375 * 100vw);
		padding-inline: 0;
		font-size: 15px;
	}
}
.science-process {
	width: 840px;
	margin-block: 45px 170px;
	margin-inline: auto;
	padding-block: 120px;
	padding-inline: 120px;
	background: #fdf6d9;
	border-radius: 95px;
}
@media screen and (max-width: 798px) {
	.science-process {
		width: auto;
		margin-block: calc(48 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
		padding-block: calc(38 / 375 * 100vw);
		padding-inline: 0;
		border-radius: 16px;
	}
}
.science-process h3 {
	margin-block-end: 60px;
	text-align: center;
}
@media screen and (max-width: 798px) {
	.science-process h3 {
		margin-block-end: calc(50 / 375 * 100vw);
	}
}
.science-process ul {
	list-style: none;
}
.science-process li {
	position: relative;
	margin-block-start: 100px;
}
@media screen and (max-width: 798px) {
	.science-process li {
		position: static;
		margin-block-start: calc(55 / 375 * 100vw);
	}
}
.science-process li:first-child {
	margin-block-start: 0;
}
.science-process li:nth-child(4) {
	margin-block-start: 140px;
}
.science-process li:nth-child(5) {
	margin-block-start: 190px;
}
.science-process li:nth-child(6) {
	margin-block-start: 170px;
}
.science-process li:nth-child(7) {
	margin-block-start: 160px;
}
.science-process li:nth-child(8) {
	margin-block-start: 140px;
}
@media screen and (max-width: 798px) {
	.science-process li:nth-child(4),
	.science-process li:nth-child(5),
	.science-process li:nth-child(6),
	.science-process li:nth-child(7),
	.science-process li:nth-child(8) {
		margin-block-start: calc(55 / 375 * 100vw);
	}
}
.science-process li h4 {
	margin-block-end: 20px;
    font-size: 25px;
    font-weight: bold;
    color: #79634c;
    display: flex;
    gap: 10px;
}
@media screen and (max-width: 798px) {
	.science-process li h4 {
		margin-block-end: calc(8 / 375 * 100vw);
        font-size: 21px;
        margin-inline: calc(24 / 375 * 100vw);
        line-height: 1.2;
	}
}

.science-process li h4 span {
    display: inline-block;
}
.science-process li p {
	font-size: 15px;
}
@media screen and (max-width: 798px) {
	.science-process li p {
		margin-block-end: calc(18 / 375 * 100vw);
		margin-inline: calc(24 / 375 * 100vw);
		font-size: 14px;
	}
}
.science-process li p span {
	display: block;
}
.science-process li:nth-child(n+3) p {
	padding-inline-end: 170px;
}
@media screen and (max-width: 798px) {
	.science-process li:nth-child(n+3) p {
		padding-inline-end: 0;
	}
}
.science-process li:nth-child(n+3) figure {
	position: absolute;
	top: 0;
	left: 435px;
}
@media screen and (max-width: 798px) {
	.science-process li:nth-child(n+3) figure {
		position: static;
		top: 0;
		left: 0;
	}
}
.science-process li:nth-child(4) figure {
    top: -60px;
}
.science-process li:nth-child(5) figure {
	top: -40px;
}
.science-process li:nth-child(6) figure {
	top: -20px;
}
.science-process li:nth-child(7) figure {
	top: -30px;
}
.science-process li:nth-child(8) figure {
	top: -25px;
}
@media screen and (max-width: 798px) {
	.science-process li:nth-child(3) figure,
	.science-process li:nth-child(4) figure,
	.science-process li:nth-child(5) figure,
	.science-process li:nth-child(6) figure,
	.science-process li:nth-child(7) figure,
	.science-process li:nth-child(8) figure {
		position: relative;
		width: 100vw;
		top: 0;
		left: calc((-3%) + (-24 / 375 * 100vw));
	}
}
.science-body .border-box {
	position: relative;
	padding-block: 80px 105px;
}
@media screen and (max-width: 798px) {
	.science-body .border-box {
		position: static;
		padding-block: calc(40 / 375 * 100vw);
	}
}
.science-body .border-box-text {
    font-family: "Noto Serif JP", serif;
    font-weight: 200;
    font-size: 18px;
    color: #2d2d2d;
    line-height: 1.7;
    text-indent: 1em;
}
@media screen and (max-width: 798px) {
    .science-body .border-box-text {
        font-size: 16px;
    }
}
.science-body .border-box-image {
	position: absolute;
	right: -105px;
	bottom: -150px;
}
@media screen and (max-width: 798px) {
	.science-body .border-box-image {
		position: static;
		right: 0;
		bottom: 0;
		margin-block-start: calc(34 / 375 * 100vw);
		margin-inline: calc(3 / 375 * 100vw);
	}
}