@charset "utf-8";
/* CSS Document */
.section01{
	padding: 120px 0;
}
.section01 .inner{
	gap: 40px;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}
.section01 .txtbox,
.section01 .imgbox{
	flex: 1;
	width: auto;
	min-width: 0;
}
.section01 .imgbox{
	position: relative;
}
.section01 .imgbox img{
	width: 100%;
	height: auto;
	display: block;
}
.section01 .txtbox .default_title2{
	padding-top: 24px;
	line-height: 1.78;
	letter-spacing: 0.094em;
}
.section01 .txtbox .txt{
	padding: 40px 0;
	line-height: 2.4;
}

.section02{
	background-color: #002a45;
	padding: 120px 0;
}
.section02 .sec_label .line{
	background-color: rgba(255,251,242,0.4);
}
.section02 .en_title2{
	color: rgba(255,251,242,0.6);
}
.section02 .default_title2{
	padding: 24px 0 80px;
	color: #fffbf2;
}
.section02 .row{
	gap: 80px;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 80px;
	flex-wrap: nowrap;
	justify-content: flex-start;
}
.section02 .row:last-of-type{
	margin-bottom: 0;
}
.section02 .row.rev{
	flex-direction: row-reverse;
}
.section02 .imgbox,
.section02 .txtbox{
	width: 440px;
}
.section02 .imgbox{
	flex-shrink: 0;
}
.section02 .imgbox img,
.section03 .imgbox img,
.section04 .steps .imgbox img{
	width: 100%;
	height: auto;
	display: block;
}
.section02 .num{
	font-family: "EB Garamond", serif;
	line-height: 1;
	color: #fffbf2;
}
.section02 .txtbox .line{
	width: 32px;
	height: 1px;
	background-color: #c83c1e;
	margin-top: 8px;
}
.section02 .txtbox h3{
	padding-top: 20px;
	font-weight: 500;
	letter-spacing: 0.067em;
	line-height: 1.5;
	color: #fffbf2;
}
.section02 .txtbox .txt{
	padding-top: 20px;
	line-height: 2.06;
	letter-spacing: 0.056em;
	color: rgba(255,251,242,0.8);
}

.section03{
	padding: 120px 0;
}
.section03 .default_title2{
	padding: 24px 0 72px;
}
.section03 .product{
	gap: 80px;
}
.section03 .imgbox{
	width: 461px;
	flex-shrink: 0;
}
.section03 .infobox{
	flex: 1;
	min-width: 0;
}
.section03 .table .row{
	padding: 16px 0;
	border-bottom: 1px solid #d4c9b0;
	gap: 8px;
}
.section03 .table .th{
	width: 100px;
	flex-shrink: 0;
	letter-spacing: 0.052em;
	color: #8a7e6a;
}
.section03 .table .colon{
	color: #8a7e6a;
}
.section03 .table .td{
	letter-spacing: 0.056em;
}
.section03 .ul{
	padding-top: 32px;
}
.section03 .ul p{
	position: relative;
	padding: 8px 0 8px 14px;
	letter-spacing: 0.056em;
}
.section03 .ul p::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 2px;
	background-color: #c83c1e;
}
.section03 .note{
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #d4c9b0;
	line-height: 1.925;
	letter-spacing: 0.052em;
	color: #555;
}
.section03 .more{
	margin-top: 32px;
}
.section03 .more a{
	width: 100%;
	padding: 20px 48px;
}
.section03 .more a p{
	font-weight: 500;
	letter-spacing: 0.093em;
}

.section04{
	background-color: #f5ede0;
	padding: 120px 0;
}
.section04 .default_title2{
	padding-top: 24px;
	padding-bottom: 72px;
}
.section04 .steps .item{
	width: 25%;
	padding: 0 36px;
	box-sizing: border-box;
	border-left: 1px solid #d4c9b0;
}
.section04 .steps .item:first-of-type{
	border-left: none;
}
.section04 .steps .imgbox{
	width: 100%;
}
.section04 .steps .en{
	padding-top: 28px;
	font-family: "EB Garamond", serif;
	letter-spacing: 0.2em;
	color: #c83c1e;
}
.section04 .steps h3{
	padding-top: 12px;
	font-weight: 500;
	letter-spacing: 0.071em;
}
.section04 .steps .txt{
	padding-top: 14px;
	line-height: 1.73;
	letter-spacing: 0.035em;
	color: #555;
}
.section04 .caution{
	padding-top: 20px;
}

.section05{
	padding: 100px 0;
	border-top: 1px solid #d4c9b0;
}
.section05 .btns{
	gap: 16px;
}
.section02 span{color: #fff!important;}


@media screen and (max-width: 1080px){
	.section01 .inner,
	.section02 .row,
	.section02 .row.rev,
	.section03 .product{
		flex-direction: column;
	}
	.section01 .txtbox,
	.section01 .imgbox{
		width: 100%;
		flex: none;
	}
	.section02 .imgbox,
	.section02 .txtbox,
	.section03 .imgbox{
		width: 100%;
	}
	.section04 .steps{
		flex-wrap: wrap;
	}
	.section04 .steps .item{
		width: 50%;
		border-left: none;
		padding: 0 12px 40px;
	}
	.section01,
	.section02,
	.section03,
	.section04{
		padding: 80px 0;
	}
}
@media screen and (max-width: 576px){
	.section04 .steps .item{
		width: 100%;
		padding: 0 0 32px;
	}
	.section05 .btns{
		flex-direction: column;
	}
}

/* 見出しを文節ごとに折り返す */
.page h1 > span,
.page h2 > span,
.page h3 > span {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.page .sec_label {
  justify-content: flex-start !important;
  align-items: center;
  text-align: left;
}
.page .sec_label .en_title2 { text-align: left; }
.section02 .row,
.section03 .product { gap: clamp(32px, 5vw, 80px); }
.section02 .imgbox,
.section02 .txtbox { width: calc((100% - clamp(32px, 5vw, 80px)) / 2); min-width: 0; }
.section03 .product { flex-wrap: nowrap; align-items: flex-start; }
.section03 .imgbox { width: 46%; }
.section03 .table .row { margin-left: 0; margin-right: 0; flex-wrap: nowrap; }
.section03 .table .td { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.section04 .steps { align-items: flex-start; }
.section04 .steps h3 { line-height: 1.6; }

@media screen and (max-width: 1080px) {
  .section01 .inner,
  .section02 .row,
  .section02 .row.rev,
  .section03 .product {
    flex-direction: column !important;
    align-items: stretch;
    gap: 32px;
  }
  .section01 .imgbox { order: -1; }
  .section01 .txtbox,
  .section01 .imgbox,
  .section02 .txtbox,
  .section02 .imgbox,
  .section03 .imgbox,
  .section03 .infobox { width: 100%; flex: none; }
  .section02 .default_title2,
  .section03 .default_title2,
  .section04 .default_title2 { padding-bottom: 40px; }
}
@media screen and (max-width: 576px) {
  .page .inner { padding-left: 20px; padding-right: 20px; }
  .section01, .section02, .section03, .section04 { padding: 56px 0; }
  .section01 .txtbox .txt { padding: 24px 0; line-height: 2; }
  .section02 .row { margin-bottom: 48px; }
  .section03 .table .th { width: 72px; }
  .section03 .more a { min-width: 0; padding: 16px 20px; box-sizing: border-box; }
  .section04 .steps .item:last-child { padding-bottom: 0; }
  .section04 .caution { padding-top: 28px; line-height: 1.9; }
  .section05 { padding: 48px 20px; }
  .section05 .btns { align-items: stretch; }
  .section05 .more, .section05 .more a { width: 100%; min-width: 0; box-sizing: border-box; }
}
.section02 .num {
    font-family: "EB Garamond", serif;
    font-size: 56px;
    line-height: 1;
    color: #fffbf2;
}