/* header */	
#header.is_hide {
    transform: translateY(-100%);    
}
#header.is_hide:has(#gnav.is-visible) {
    transform: inherit;    
}

main {
    margin-top: var(--header-height);
}
/* main visual */ 
.mainv {
  	position: relative;
    display: flex;
    flex-flow: row wrap;
	width: 100%;
    background-color: var(--color-Accent);
    overflow: hidden;
    .container {
        margin-top: -34px;
        padding-bottom: 0;
        .title {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-end;
            .themetitle {
                display: flex;
                flex-flow: column;
                align-items: flex-end;
                gap: 4px;
                img {
                    width: clamp(256px, 60vw, 336px);
                }
                p {
                    color: var(--color-Text-White);
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 1;
                    letter-spacing: .1em;
                }
            }
            h2 {
                margin-top: 32px;
                text-align: right;
                font-size: clamp(24px, 4.0vw, 64px);
                font-weight: 700;
                line-height: 1.4;
                letter-spacing: .05em;
                .hd {
                    display: block;
                }
            }
        }
    }
}
@media (min-width: 560px) {
	.mainv {
		.container {
			.title {
				h2 {
					.hd {
						display: none;
					}
				}
			}
		}
	}
}
@media (min-width: 768px) {
	.mainv {
		align-items: flex-end;
		min-height: 400px;
		.container {
			margin-top: 0;
			padding-bottom: 48px;
			.title {
				justify-content: flex-start;
				.themetitle {
					img {
						width: clamp(240px, 30vw, 320px);
					}
					* {
						color: var(--color-Text);
					}
					p {
						font-size: 16px;
					}
				}
				h2 {
					margin-top: 64px;
					text-align: left;
					width: 100%;
					color: var(--color-Text-White);
					line-height: 1;
				}
			}
		} 
	}
}
@media (min-width: 1200px) {
    .mainv .container,
    .mainv_sub .container {
        padding-left: calc(10% - var(--side-margin)); 
        width: auto;
        max-width: 1920px;
        margin: 0;
    } 
} 
.mainv_eyecatch {
    position: static;
} 
.mainv_eyecatch img {
    width: 100%;
} 
@media (min-width: 768px) {
	.mainv_eyecatch {
		position: absolute;
		right: 0;
		top: 0;
		width: 61.8%;
		img {
			height: 496px;
			object-fit: cover;
			object-position: top center; 
		} 
	}
}  
.smooth {
    clip-path: inset(0 100% 0 0);
    display: inline-block;
    transition: 3.2s cubic-bezier(0.37, 0, 0.63, 1);
    transition-property: clip-path;
}
.smooth.is-animated {
    clip-path: inset(0);
}
 /* mainvsub */         
.mainv_sub {
    background-color: var(--color-Theme);
    p {
        font-size: 16px;
        font-weight: 500;
        line-height: 2.0;
        letter-spacing: .05em;
    }
} 
@media (min-width: 768px) {
	.mainv_sub {
		p {
			color: var(--color-Text-White);
			font-size: 18px;
			font-weight: 700;
			letter-spacing: .1em;
		}
	}
}  
/* benefit */
.section.benefit {
	background-color: var(--color-Background-Secondary); 
    .container {
		.benefit_content {
			p {
				line-height: 1.75;
				letter-spacing: .08em;
				& + P {
					margin-top: 1em;
				}
			}
			.benefit_list {
				margin: 24px 0;
				li {
					display: flex;
					align-items: flex-start;
					gap: 12px;
					padding-bottom: 4px;
					border-bottom: 2px dotted var(--color-Accent);
					color: var(--color-Text-Primary);
					font-size: 16px;
					font-weight: 700;
					line-height: 1.5;
					letter-spacing: .08em;
					&::before {
						flex-shrink: 0;
						content: '';
						width: 24px;
						height: 24px;
						background-size: contain;
						background-image: url(../images/icon_checkbox.svg);
					}
					& + li {
						margin-top: 20px;
					}
				}
			}
		}
    }
}

@media (min-width: 768px) {
	.section.benefit {
		.container {
			display: flex;
			flex-flow: row wrap;
			align-items: flex-start;
			justify-content: space-between;
			.section_heading {
				margin-bottom: 0;
				padding-right: calc(144 / 1200 * 100vw);
				h2 {
					line-height: 1.75;
					text-align: left;
				}
			}
			.benefit_content {
				flex: 1;
				.benefit_list {
					margin: 48px 0;
					max-width: 640px;
					li {
						gap: 12px;
						font-size: 20px;
						letter-spacing: .08em;
						&::before {
							width: 32px;
							height: 32px;
						}
						& + li {
							margin-top: 24px;
						}
					}
				}
			}
		}
	}
}
/* problem */
.section.problem {
    padding-bottom: 0; 
}
.problem_wrap {
    position: relative;
    .problem_list {
		padding-bottom: 48px;
        li {
            display: inline-block;
            position: relative ;
            padding: 16px;
            border-radius: 16px;
            background-color: var(--color-Gray-Light);
            margin-bottom: 48px;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5;
            letter-spacing: .05em;
            &::before {  
                content: "";
                position: absolute;
                bottom: -24px;
                left: 32px;
                width: 16px;
                height: 16px;
                background: var(--color-Gray-Light);
                border-radius: 50%;
            }
            &::after {
                content: "";
                position: absolute;
                bottom: -32px;
                left: 48px;
                width: 8px;
                height: 8px;
                background: var(--color-Gray-Light);
                border-radius: 50%;
            }
        }
    }
    figure {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 96px;
        z-index: -1;
    }
}
@media (min-width: 560px) {
	.problem_wrap {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		gap: 24px;
		.problem_list {
			width: 496px;
			li {
				padding: 24px;
				border-radius: 16px;
				margin-bottom: 48px;
				&:nth-child(2) {
					margin-left: 96px;
				}
				&::before {  
					left: inherit;
					right: 32px;
				}
				&::after {
					left: inherit;
					right: 24px;
				}
				.hd {
					display: none;
				}
			}
		}
		figure {
			position: relative;
			width: 160px;
			right: inherit;
			bottom: inherit;
		}
	}	
}
@media (min-width: 960px) {
	.problem_wrap {
		gap: 48px;
		.problem_list {
			width: 600px;
			padding-bottom: 64px;
			li {
				margin-bottom: 48px;
				font-size: 18px;
				&:nth-child(2) {
					margin-left: 144px;
				}
			}
		}
		figure {
			width: 176px;
		}
	}
}

/* solution */ 
.section.solution {
	padding-top: 0;
}
.solution_wrap {
	position: relative;
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 12px;
	padding: 1em .5em;
	border: .5em solid;
	border-image: linear-gradient(to right, #FC760F, #FFE4B9) 1;
	font-size: clamp(24px, 4.0vw, 40px);
	font-weight: 700;
	letter-spacing: 0.1em;
	p {
		line-height: 1.5;
	}
	.solution_list {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		li {
			display: flex;
			align-items: flex-end;
			gap: 2px;
			color: var(--color-Accent);
			line-height: 1;
			&::before {
				flex-shrink: 0;
				content: '';
				width: .8em;
				height: .8em;
				background-size: contain;
				background-image: url(../images/icon_check_dot.svg);
			}
			span {
				font-size: .75em;
				color: var(--color-Text-Primary);
			}
		}
	}
	.solution_bubble {
		width: min(calc(120 / 560 * 100vw), 120px);
		position: absolute;
		top: -64px;
		left: 16px;
		z-index: 10;
	}
}
@media (min-width: 560px) {
	.solution_wrap {
		.solution_list {
			flex-direction: row;
			flex-wrap: wrap;
			gap: 12px;
		}
		.solution_bubble {
			width: min(calc(112 / 560 * 100vw), 144px);
			top: -88px;
			left: min(calc(16 / 560 * 100vw), 40px);
		}
	}
}
/* feature */ 
.section.feature {
    background-color: var(--color-Background-Secondary);
}
.feature_wrap {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 12px;
    .feature_item {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: 32px;
        padding: 16px;
        background-color: var(--color-Background-Primary);
        border: 1px solid var(--color-Gray-Light);
        border-radius: 8px;
        .text {
            flex: 1;
        }
        h3 {
            margin-top: 16px;
            font-size: 16px;
            line-height: 1.5;
            letter-spacing: 0;
            flex: 1;
        }
        .number {
            color: var(--color-Accent);
            font-size: 12px;
            line-height: 1.0;
            text-align: left;
            span {
                margin-left: 4px;
                font-size: 24px;
                font-weight: 700;
            }
        }
        figure {
            img {
                display: block;
                margin-inline: auto;
                width: 96px;
            }
        }
    }
}
@media (min-width: 768px) {
	.feature_wrap {
		.feature_item {
			width: calc(100% / 3 - 8px);
			justify-content: center;
			gap: 16px;
			padding: 12px 24px 24px;
			/*box-shadow: 0 4px 12px rgba(100, 100, 100, 0.15); */
			border-radius: 8px;
			* {
				width: 100%;
			}
			.number {
				order: 1;
				span {
					font-size: 32px;
				}
			}
			figure {
				order: 2;
				img {
					width: 144px;
				}
			}
			.text {
				display: contents;
			}
			h3 {
				margin-top: 0;
				letter-spacing: .05em;
				order: 3;
			}

		}
	}
}
/* product */ 
.section.product {
    background-color: var(--color-Background-Secondary);
}
.product_wrap {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: 12px;
    .product_item {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
        background-color: var(--color-Background-Primary);
        border: 1px dotted var(--color-Gray-Medium);
        border-radius: 4px;
        figure {
            padding: 16px;
            background-color: var(--color-Text-Primary);
            border-radius: 4px 0 0 4px;
            img {
                display: block;
                width: 24px;
            }
        }
        h3 {
            margin: auto 16px;
            flex: 1;
        }
    }
}
@media (min-width: 768px) {
.product_wrap {
    .product_item {
        width: calc(100% / 2 - 6px);
        h3 {
        margin-left: 24px;
        letter-spacing: .05em;
        }
        figure {
            padding: 20px;
            img {
                width: 32px;
            }
        }
    }
}
}
/*faq */    
.faq_box + .faq_box {
    margin-top: 24px;
}
.faq_box {
    border-bottom: 1px solid var(--color-Gray-Light);
    .faq_header,
    .faq_inner {
        position: relative;
        background-color: var(--color-Background-Secondary) ;
        border-color: var(--color-Gray-Light);
        border-style: solid;
        padding: 24px 40px 24px 12px;
    }
    .faq_header {
        cursor: pointer;
        transition: .3s;
        border-width: 1px 1px 0;
        .i_box {
            position: absolute;
            top: 50%;
            right: 12px;
            width: 16px;
            height: 16px;
            margin-top: -8px;
            &::before,
            &::after {
                position: absolute;
                content: "";
                margin: auto;
                vertical-align: middle;
            }
            &::before {
                width: 16px;
                height: 0;
                top: 0;
                bottom: 0;
                right: 0;
                border-top: 2px solid var(--color-Accent);
            }
            &::after {
                width: 0;
                height: 16px;
                top: 0;
                bottom: 0;
                right: 7px;
                border-left: 2px solid var(--color-Accent);
                transition: .2s;
            }
        }
        &.is-open {
            .i_box {
                &::after {
                    height: 0;
                }
            }
        }
    }
    .faq_inner {
        display: none;
        border-top: 0;
        border-width: 0 1px;
          .faq_body {
            .text {
                font-weight: 400;
            }
        }
    }
    .faq_body {
        display: flex;
        align-items: center;
        .faq {
            width: 40px;
            color: var(--color-Accent);
            font-size: 24px;
            font-weight: 700;
            line-height: 1;
            span {
                font-size: 16px;
            }
        }
        .text {
            color: var(--color-text);
            font-size: 16px;
            font-weight: 700;
            letter-spacing: .05em;
        }
    }
}

.faq_header.is-open > .faq_body > .text {
    color: var(--color-Accent);
}
.faq_header:not(.is-open):hover > .faq_body > .text {
    color: var(--color-Accent);
}
@media (min-width: 768px) {
.faq_box {
    .faq_header,
    .faq_inner {
        padding: 24px 80px 24px 32px;
    }
    .faq_header {
        .i_box {
            right: 32px;
            width: 20px;
            height: 20px;
            margin-top: -10px;
        }
        &::before {
            width: 20px;
        }
        &::after {
            height: 20px;
            right: 9px;
        }
    } 
    .faq_body {
        .faq {
            width: 56px;
            margin-top: -8px;
            font-size: 32px;
            span {
                font-size: 18px;
            }
        }
    }  
}
}
/* support */
.section.support {
    background: linear-gradient(to right, #FFFFFF, #ECE9E6);
    h2 {
        line-height: 2.0;
    }
}
.support_img {
    display: block;
    margin-inline: auto;
}

/* schedule */
.section.schedule {
    .content {
        max-width: 1024px;
    }    
}
table.table_schedule {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    th,
    td {
    border: 1px solid var(--color-Gray-Light) ;
    padding: 1em 0;
    line-height: 1.4;
    letter-spacing: .05em;
    }
    th {
        padding: 1em 1em;
        background-color: var(--color-Gray-Light);
        font-weight: 500;
        letter-spacing: .1em;
        text-align: center;
        &.wide {
            width: 30%;
        }
    }
    td {
        vertical-align: middle;
        text-align: center;
        span {
        display: block;
        padding: 0 1em;
        }
    }
}
@media (max-width: 767px) { 
    table.table_schedule {
        thead {
            display: none;
        }
        td {
            display: block;
            padding-top: 0;
            &::before {
                display: block;
                content: attr(data-label);
                margin-bottom: 1em;
                padding: 1em;
                background-color: var(--color-Gray-Light);
                font-weight: 700;
            }
        }
    }
}	 
.table_note {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .05em;
    ul {
        text-align: left;
    }
}