@charset "utf-8";

/* --------------------------------
   □ #accent
-------------------------------- */
section#accent{
    position: relative;
    padding-top: 47px;
    margin-top: -47px;
	
    &::after {
        content: "";
        position: absolute;
        top: 47px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        background: #eae8dd;
        visibility: visible;
        z-index: -1;
    }
}

section#accent .container{
	position: relative;
}

section#accent .left_txt{
	width:500px;
}

section#accent .left_txt dl{
	padding: 70px 0;
}

	section#accent .left_txt dl dt{
		font-size: 38px;
		margin-bottom:34px;
        line-height: 1.4;
	}

	section#accent .left_txt dl dd{
		font-size: 16px;
		line-height:1.8;
	}

section#accent .right_img{
	position:absolute;
	right:-130px;
	bottom:0;
}
	
	section#accent .right_img p{
		margin:0;
	}

/* --------------------------------
   □ #menu .chapter
-------------------------------- */
#menu .area > .chapter h3{
	text-align:center;
}

#menu .area > .chapter p.caption{
	text-align:center;
	font-size: 19px;
	line-height:1.8;
	margin-top:40px;
	margin-bottom: 0;
}

/* --------------------------------
   □ #menu .item
-------------------------------- */
#menu .item{
    padding-top: 60px;
    padding-bottom: 80px;
}

#menu .item > .explain{
	float:left;
	width:500px;
}
	#menu .item h4{
		font-size: 20px;
		margin-bottom:26px;
        line-height: 1.7;
	}
	
	#menu .item p{
	    font-size: 16px;
		line-height:2;
	}

#menu .item >  p.image{
	float: right;
    margin-top: 0;
}

#menu .item >  p.figure{
	margin-bottom:50px;
}

#menu ul.nav{
	margin:50px 0;
	overflow:hidden;
}

#menu ul.nav li{
	float:left;
}

/* --------------------------------
   □ #anker
-------------------------------- */
#anker {
    position: relative;
    padding-top: 50px;
    padding-bottom: 45px;

    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        width: 100vw;
        height: 50%;
        background-color: #F5F4EE;
        visibility: visible;
        z-index: -1;
    }

    ul {
        display: flex;
        justify-content: space-between;
        gap: 7px;

        li {
            background-color: #fff;
            border-radius: 8px;
            border: 1px solid #D8D8D8;
            box-shadow: 0 2px 8px rgba(87, 77, 67, 0.08);
            padding: 20px 10px;
            flex: 1;

            dl {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;

                dt {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;

                    figure {
                        margin: 0;

                        p.image {
                            margin: 0 auto 10px;
                            display: flex;
                            align-items: flex-end;
                            justify-content: center;
                            text-align: center;
                        }
                    }

                    figcaption {
                        color: #574D43;
                        font-size: 1.6rem;
                        line-height: 1.2;
                    }
                }

                dd.text {
                    color: #CC4848;
                    font-size: 2.2rem;
                    line-height: 1;
                    flex-shrink: 0;

                    em {
                        font-size: 4.4rem
                    }

                    span {
                        color: #574D43;
                        font-size: 1.5rem
                    }

                    .sml {
                        font-size: 1.3rem;
                        display: block;
                    }
                }
                
                p.buttonStyle {
                    margin: 20px 0 0;
                    a {
                        font-size: 1.4rem;
                        letter-spacing: 0;
                        padding: 5px 20px;

                        &:before {
                            transform: rotate(90deg);
                            right: 5px;
                            top: calc(50% - 1.5px);
                            background-size: 15px auto;
                        }
                        &:hover:before {
                            right: 5px;
                            top: calc(50% + 1.5px);
                        }
                    }
                }
            }
        }
    }
}

/* --------------------------------
   □ #warranty
-------------------------------- */
#warranty {
	padding-top: 80px;
    padding-bottom: 80px;

    .warranty-item {
        padding-top: 70px;
    }

    h4 {
        dl {
            display: flex;
            align-items: center;
            column-gap: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #707070;

            dt {
                display: flex;
                align-items: flex-end;
                justify-content: center;
                column-gap: 10px;

                figure {
                    margin: 0;

                    p.image {
                        margin: 0;
                    }
                }
            }

            dd.text {
                font-size: 2.4rem;

                em {
                    font-size: 3.2rem;
                }
            }
        }
    }

    h5 {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.7;
        margin-bottom: 14px;
    }

    .text {
        font-size: 1.6rem;
        line-height: 2;
        margin-bottom: 0;

        &._large {
            font-size: 2.2rem;
            line-height: 1.8;
            letter-spacing: 0.04em;
            margin-top: 30px;

            em {
                font-size: 2.6rem;
            }
        }

        + .image {
            margin-top: 20px;
        }
    }

    .asterisk {
        padding-left: 1em;
        text-indent: -1em;
        font-size: 1.3rem;
        line-height: 1.7;
        margin-top: 10px;
        margin-bottom: 0;
    }

    em {
        color: #CC4848;
    }

    .marker {
        background: linear-gradient(transparent 70%, #F3F3C6 70%);
    }

    p.image {
        margin: 0;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .flex_box {
        display: flex;
        justify-content: space-between;
        margin-top: 50px;

        &.mt30 {
            margin-top: 30px;
        }

        &._gray {
            align-items: center;
            justify-content: center;
            background-color: #F1F1F1;
            border-radius: 8px;
            padding: 14px;

            .image_box {
                max-width: 100%;
                mix-blend-mode: darken;
            }
        }

        &._border {
            border-top: 1px solid #DBDBDB;
            padding-top: 24px;

            + ._border {
                margin-top: 36px;
            }

            .icon_box {
                margin-top: 0;
                justify-content: flex-end;
                column-gap: 8px;
            }
        }

        .text_box {
            width: 400px;

            &.w640 {
                width: 640px;
            }

            &.w500 {
                width: 500px;
            }

            &.w450 {
                width: 450px;
            }
        }

        .image_box {
            max-width: 540px;

            .caption {
                display: block;
                font-size: 1.7rem;
                font-weight: 700;
                text-align: center;
                margin-top: -12px;
                margin-bottom: 5px;
            }
        }

        .iframe_box {
            max-width: 540px;
            width: 100%;
            aspect-ratio: 540 / 304;

            iframe {
                width: 100%;
                height: 100%;
            }
        }

        figure {
            margin: 0;

            figcaption {
                font-size: 1.6rem;
                margin-top: 10px;
                text-align: center;
            }
        }

        &._end {
            align-items: flex-end;
        }

        + *:not(.flex_box) {
            margin-top: 40px;
        }
    }

    .title_box {
        flex-shrink: 0;

        h5 {
            margin-bottom: 0;
        }
    }

    .icon_box {
        justify-content: center;
        gap: 18px;

        figure {
            figcaption {
                margin-top: 5px;
            }
        }
    }

    .check_box {
        flex-wrap: wrap;
        gap: 17px 20px;

        p {
            background-color: #EAE8DD;
            width: calc((100% - 20px) /2);
            padding: 17px 64px;
            box-sizing: border-box;
            font-size: 2rem;
            font-weight: 700;
            line-height: 1.3;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 0;

            &::before {
                position: absolute;
                content: "";
                display: inline-block;
                width: 34px;
                height: 30px;
                left: 24px;
                top: 0;
                bottom: 0;
                margin: auto 0;
                background: url(../../../images/concept/afterservice/check.png) no-repeat center / contain;
            }
        }
    }
}

/* --------------------------------
   □ #inspection
-------------------------------- */
#inspection{
    padding-top: 100px;
}

#inspection{
    position: relative;
}

#inspection::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: #F5F4EE;
    visibility: visible;
    z-index: -1;
}

#inspection #checklist .explain{
	float:right;
	width:457px;
}

#inspection #checklist .explain h5{
	position:relative;
	height:76px;
	margin-bottom:37px;
}

	#inspection #checklist .explain h5 img{
		position:absolute;
		top:0;
		left:-76px;
	}

#inspection #checklist .explain p{
    font-size: 16px;
	line-height:2;
	width:450px;
}

#inspection #checklist .image{
	float:left;
    margin-top: 0;
}

#inspection #inspection1 p.figure{
	clear: both;
	padding-top: 30px;
	margin-bottom: 70px;
}

/* --------------------------------
   □ ul.btn
-------------------------------- */

.chapter ul.btn{
	width:1000px;
	margin:0 auto;
	padding: 40px 0;
	border-bottom:2px solid #414141;
	border-top:2px solid #414141;
}

	.chapter ul.btn li{
		float:left;
		width:480px;
		margin-right: 40px;
	}
	
	.chapter ul.btn li:last-child{
		margin-right:0;
	}

/* --------------------------------
   □ #galleryBnr
-------------------------------- */

#galleryBnr{
	width:1000px;
	margin:0 auto;
	padding: 40px 0 60px;
}
	
	#galleryBnr dl{
		width: 490px;
		float: left;
	}
	
	#galleryBnr dl:last-child{
		float: right;
	}
	
		#galleryBnr dl dd{
			width: 90%;
			margin: 20px auto 0;
		}


@media only screen and
	(max-width : 767px) {
		
	/* --------------------------------
	   □ #accent
	-------------------------------- */

	section#accent .left_txt{
		float:inherit;
		width:100%;
	}

	section#accent .left_txt dl{
        padding: 30px 0 0 0;
	}

		section#accent .left_txt dl dt{
			font-size: 2.2rem;
			margin-bottom:18px;
		}

	section#accent .right_img{
		margin-top: 30px;
		width: 100%;
        position: static;
	}

	/* --------------------------------
	   □ #menu .chapter
	-------------------------------- */
	#menu .area > .chapter h3{
		text-align:center;
	}

	#menu .area > .chapter p.caption{
		text-align: left;
		font-size: 18px;
	}

	/* --------------------------------
	   □ #menu .item
	-------------------------------- */
	#menu .item{
        padding-top: 30px;
	}

	#menu .item > .explain{
		float: inherit;
		width: 100%;
	}
		#menu .item h4{
			font-size: 20px;
			margin-bottom: 26px;
		}

		#menu .item p{
			font-size: 16px;
			line-height: 1.8;
		}

	#menu .item >  p.image{
		float: inherit;
		width: 100%;
	}
		
		#menu .item >  p.image > img,
		#inspection #checklist .image > img{
			width: 100%;
		}

	#menu ul.nav li{
		text-align: center;
		float:inherit;
	}

    /* --------------------------------
	   □ #anker
    -------------------------------- */
    #anker {

        ul {
            flex-direction: column;

            li {
                padding: 10px;

                dl {
                    flex-direction: row;
                    justify-content: space-between;

                    dt {
                        align-items: baseline;
                        width: 90px;
                        flex-shrink: 0;

                        figure {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            align-items: center;

                            img {
                                zoom: 0.8;
                            }

                            figcaption {
                                font-size: 1.4rem;
                            }
                        }
                    }

                    dd.text {
                        font-size: 2rem;

                        em {
                            font-size: 3rem
                        }
                    }

                    p.buttonStyle {
                        margin: 0;
                    }
                }
            }
        }
    }

	/* --------------------------------
	   □ #warranty
	-------------------------------- */
    #warranty {

        h4 {
            dl {
                flex-direction: column;
                row-gap: 10px;

                dt {
                    flex-shrink: 0;
                }

                dd.text {
                    font-size: 2.2rem;
                    letter-spacing: 0.02em;
                    line-height: 1.5;

                    em {
                        font-size: 3rem;
                    }
                }
            }
        }

        h5 {
            font-size: 2rem;
        }

        .text {
            font-size: 1.6rem;

            &._large {
                font-size:1.8rem;
                letter-spacing: 0;

                em {
                    font-size: 2.4rem;
                }
            }
        }

        .flex_box {
            flex-direction: column;
            margin-top: 40px;
            row-gap: 20px;

            &._gray {
                padding: 14px 0;
            }

            &._border {
                .icon_box {
                    justify-content: flex-start;
                    gap: 10px;
                }
            }

            .text_box {
                width: 100%!important;
            }

            .image_box {
                max-width: 100%;

                .caption {
                    font-size: 1.5rem;
                    margin-top: 0;
                }
            }

            .iframe_box {
                max-width: 100%;
            }

            figure {
                figcaption {
                    font-size: 1.5rem;
                    margin-top: 5px;
                }
            }
        }

        .icon_box {
            flex-wrap: wrap;
            flex-direction: row;
            gap: 10px;

            figure {
                width: calc((100% - 30px) /3);
            }
        }

        .check_box {

            p {
                width: 100%;
                padding: 17px 35px;
                font-size: 1.8rem;

                &::before {
                    width: 20px;
                    height: 17px;
                    left: 10px;
                }
            }
        }
    }

	/* --------------------------------
	   □ #inspection
	-------------------------------- */

	#inspection #checklist .explain{
		float:inherit;
		width:100%;
	}

	#inspection #checklist .explain h5{
		height:auto;
		margin-bottom:20px;
	}

		#inspection #checklist .explain h5 img{
			position:static;
			display: block;
			width: 100%;
			height: auto;
			top: inherit;
			left: inherit;
		}

	#inspection #checklist .explain p{
		width: 100%;
	}


	#inspection #checklist .image{
		float: inherit;
	}


	#inspection #inspection1 p.figure{
		clear: both;
		padding-top: 30px;
		margin-bottom: 50px;
	}

	/* --------------------------------
	   □ ul.btn
	-------------------------------- */

	.chapter ul.btn{
		width: 1000px;
		margin: 0 auto;
		padding: 40px 0;
		border-bottom:2px solid #414141;
		border-top:2px solid #414141;
		box-sizing: border-box;
	}

		.chapter ul.btn li{
			float:inherit;
			width:100%;
			margin-right: 0px;
		}

		.chapter ul.btn li:last-child{
			margin-right:0;
		}

	/* --------------------------------
	   □ #galleryBnr
	-------------------------------- */

	#galleryBnr{
		width: 1000px;
		margin:0 auto;
		padding: 40px 0 60px;
		box-sizing: border-box;
	}

		#galleryBnr dl{
			width: 100%;
			float: inherit;
		}

		#galleryBnr dl:last-child{
			float: inherit;
		}

			#galleryBnr dl dd{
				width: 100%;
				margin: 20px auto 0;
			}
		
}