/* CSS Document */

/*BASE*/
section {
	position:relative;
}

.content-box {
	max-width:1800px;
	margin:auto;
}
.container.partition::after {
	content:"";
	display:block;
	width:100%;
	height:1px;
	border-top:solid 1px rgba(218, 218, 218, 1);
}
.title-box_floating {
	display:flex;
	flex-direction:column;
	align-self:flex-start;
	color:#1E50A2;
	writing-mode:vertical-rl;
	position:sticky;
}
.title-box_floating h1 {
	font-size: 14px;
	font-weight:700;
	line-height:1.4;
	letter-spacing:.1em;
}
.title-box_floating p {
	font-size: 10px;
    font-weight: 700;
	line-height:1;
	text-indent:3em;
}

/*Process*/
#process .container > h1.title {
	display:flex;
	justify-content:center;
	align-items:center;
	color:#FFF;
	background-color:#144DA0;
	letter-spacing:.32em;
	margin:auto;
	position:absolute;
	top:0;
	left:0;
	right:0;
}
#process .content-box {
	background-color:#FFF;
	margin:auto;
}
#process ol.step {
	counter-reset: step;
}
#process ol.step > li {
	counter-increment: step;
	position: relative;
}
#process ol.step > li::before {
	content: counter(step);
	display:flex;
	justify-content:center;
	align-items:center;
	font-weight:700;
	background: #144DA0;
	color: #fff;
	border-radius: 50%;
}
#process ol.step > li .how-to .txt-box {
	display:flex;
	flex-direction:column;
	gap:.75em;
	list-style:disc;
}
#process ol.step > li .how-to .img-box {
	display:flex;
	align-items:center;
	gap:1em;
}
#process ol.step > li .how-to .img-box > div {
	flex:1;
	border:solid 1px #CCC;
}
#process ol.step > li .how-to .img-box > .next {
	display:block;
	width: 0;
    height: 0;
}
#process ol.step > li .how-to .img-box > div img {
	width:100%;
	height:auto;
}

@media screen and (max-width: 767.98px) {
/*BASE*/
.container {
	padding:0 2rem;
}
.container.partition::after {
	margin-top:2rem;
}
.title-box_floating {
	top:40px;
	left:1vw;
	transform:scale(.6);
}
/*BASE ANIME*/
.title-anime {
	font-size:20px;
}

/*MainVisual*/
#mainvisual {
	position:relative;
	padding:2rem 60px 4rem;
}
#mainvisual .content-box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:1rem;
	width: 100%;
	margin:auto;
}
#mainvisual .content-box .txt-box {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
	align-self:center;
}
#mainvisual .content-box .txt-box ul.ul {
	margin-left:1.5em;
	font-size:14px;
	font-weight:700;
}
#mainvisual .content-box .txt-box ul.ul li:not(:last-of-type) {
	margin-bottom:.5em;
}
#mainvisual .photo img {
	border:solid 1px #CCC;
}

/*Process*/
#process {
	background-color:#70ACCE;
	padding:30px 60px 4rem;
}
#process .container {
	padding:0;
}
#process .container > h1.title {
	font-size:24px;
	width:50vw;
	height:60px;
}
#process .content-box {
	padding:0;
	border-radius:10px;
}
#process ol.step {
	font-size:14px;
	padding:0 1rem;
}
#process ol.step > li:nth-child(1) {
	padding-top:60px;
}
#process ol.step > li:not(:last-of-type) {
	padding-bottom:1.5rem;
	margin-bottom:1.5rem;
	border-bottom:dotted 2px #CCC;
}
#process ol.step > li::before {
	width:40px;
	height:40px;
	font-size:20px;
	line-height:20px;
	margin:auto;
}
#process ol.step > li .how-to .txt-box {
	padding:1rem 0;
	margin-left:1.5rem;
}
#process ol.step > li .how-to .img-box > .next {
	display:block;
	width: 0;
    height: 0;
}
#process ol.step > li.layout_type_c .txt-box {
	display:block;
	font-size:16px;
	width:100%;
	padding-top:0;
	margin-left:0;
}
@media (orientation: portrait){
#process ol.step > li .how-to .img-box {
	flex-direction:column;
}
#process ol.step > li .how-to .img-box > .next {
    border-top: 14px solid #CCC;
    border-left: 14px solid transparent;
	border-right: 14px solid transparent;
}
#process ol.step > li.layout_type_c .how-to .txt-box::after {
	content:"";
	display:block;
	background:url(../images/home/process_0701.jpg) bottom right no-repeat;
	background-size:cover;
	width:100%;
	aspect-ratio:4 / 3;
}
#process ol.step > li.layout_type_c .txt-box h3 {
	justify-content:center;
}
}
@media (orientation: landscape){
#process ol.step > li .how-to .img-box > .next {
    border-top: max(1.2vw, 12px) solid transparent;
    border-bottom: max(1.2vw, 12px) solid transparent;
    border-left: max(1.6vw, 16px) solid #CCC;
}
#process ol.step > li.layout_type_b .how-to {
	display:flex;
	column-gap:1em;
	padding:1rem;
}
#process ol.step > li.layout_type_b .how-to .txt-box,
#process ol.step > li.layout_type_b .how-to .img-box {
	flex:1;
}
#process ol.step > li.layout_type_b .how-to .txt-box {
	padding-top:0;
	padding-bottom:0;
}
#process ol.step > li.layout_type_c .how-to {
	display:block;
	width:100%;
	aspect-ratio:16 / 9;
	background:url(../images/home/process_0701.jpg) bottom right no-repeat;
	background-size:contain;
}
#process ol.step > li.layout_type_c .txt-box {
	padding-right:30%;
	padding-left:1rem;
}
}

#process ol.step > li.layout_type_c .txt-box h3 {
	display:flex;
	align-items:center;
	height: max(4.8vw, 48px);
	font-size:24px;
	font-weight:700;
	margin-bottom:1em;
}
}


@media screen and (min-width: 768px) {
/*BASE*/
.container.partition::after {
	margin-top:80px;
}
.title-box_floating {
	height:0px;
	top:calc( 50% - 40px );
	left:1.6vw;
	transform: scale(0.8) translateY(calc(-50% - 80px));
	overflow:visible;
	white-space:nowrap;
}
/*BASE ANIME*/
.title-anime {
	font-size:24px;
}

/*MainVisual*/
#mainvisual {
	position:relative;
	padding:max(4vw, 40px) max(8vw, 80px) max(8vw, 80px);
}
#mainvisual .content-box {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:3em;
	width: 80vw;
	min-width: 800px;
	margin:auto;
}
#mainvisual .content-box .txt-box {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
	align-self:center;
}
#mainvisual .content-box .txt-box ul.ul {
	width:max-content;
	margin:0 auto;
	font-size: clamp(20px, 2vw, 32px);
	font-weight:700;
}
#mainvisual .content-box .txt-box ul.ul li:not(:last-of-type) {
	margin-bottom:.5em;
}

/*Process*/
#process {
	background-color:#70ACCE;
	padding:max(4vw, 40px) max(8vw, 80px) max(8vw, 80px);
}
#process .container > h1.title {
	font-size:max(3.2vw, 32px);
	letter-spacing:.32em;
	width:50vw;
	min-width:500px;
	height:max(8vw, 80px);
}
#process .content-box {
	width:80vw;
	min-width:800px;
	padding: max(8vw, 80px) max(6vw, 60px) 0;
	margin:auto;
	border-radius:20px;
}
#process ol.step {
	font-size:clamp(13px, 1.3vw, 20px);
}
#process ol.step > li {
	display:flex;
	column-gap:max(2vw, 20px);
	position: relative;
}
#process ol.step > li:not(:last-of-type) {
	padding-bottom:max(4vw, 40px);
	margin-bottom:max(4vw, 40px);
	border-bottom:dotted 4px #CCC;
}
#process ol.step > li::before {
	width: max(4.8vw, 48px);
	height: max(4.8vw, 48px);
	font-size: max(2vw, 20px);
	line-height:max(4.8vw, 48px);
	border-radius: 50%;
	position:sticky;
	top:max(4.8vw, 48px);
}

#process ol.step > li .how-to {
	flex:1;
}
#process ol.step > li .how-to .txt-box {
	padding-top:max(1.4vw, 14px) ;
	padding-bottom:max(2.4vw, 24px);
	margin-left:1em;
}
#process ol.step > li .how-to .img-box > .next {
    border-top: max(1.2vw, 12px) solid transparent;
    border-bottom: max(1.2vw, 12px) solid transparent;
    border-left: max(1.6vw, 16px) solid #CCC;
}
#process ol.step > li.layout_type_b .how-to {
	display:flex;
	column-gap:1em;
}
#process ol.step > li.layout_type_b .how-to .txt-box,
#process ol.step > li.layout_type_b .how-to .img-box {
	flex:1;
}
#process ol.step > li.layout_type_b .how-to .txt-box {
	padding-bottom:0;
}
#process ol.step > li.layout_type_c .how-to {
	display:block;
	width:100%;
	aspect-ratio:16 / 9;
	background:url(../images/home/process_0701.jpg) bottom right no-repeat;
	background-size:contain;
}
#process ol.step > li.layout_type_c .txt-box {
	display:block;
	font-size:clamp(16px, 1.6vw, 24px);
	width:100%;
	padding-top:0;
	padding-right:30%;
}
#process ol.step > li.layout_type_c .txt-box h3 {
	display:flex;
	align-items:center;
	height: max(4.8vw, 48px);
	font-size:clamp(24px, 2.4vw, 32px);
	font-weight:700;
	margin-bottom:1em;
}
}