@charset "utf-8";

section {
    .wrap {
        .contents {
			h2 {
				font-size:2.4rem;
				grid-row-gap:.25em;
				margin-bottom:2em;
                justify-items: center;
				.font_en {
					font-size:1.2rem;
				}
			}
			p {
				color:var(--color_white);
			}
        }
    }
}

#reason {
    .wrap {
        .contents {
            .reason_list {
                display:grid;
                grid-template-columns:repeat(2,1fr);
                grid-gap:30px 5%;
                li {
                    background-color:var(--color_white);
                    border:1px solid var(--color_sub);
                    padding:30px;
                    display:grid;
                    grid-template-columns:60px 1fr;
                    align-items:center;
                    grid-column-gap:10%;
                    h3 {
                        font-size:2.0rem;
                        line-height:1.5;
                        margin-bottom:.66em;
                    }
                    p {
                        color:inherit;
                        line-height:1.8;
                    }
                }
            }
        }
    }
}

#service {
    .wrap {
        .contents {
            h2 {
                margin-bottom:.66em;
                & + p {
                    text-align:center;
                    margin-bottom: 2em;
                }
            }
            .service_list {
                display:grid;
                grid-template-columns:repeat(3,1fr);
                grid-gap:3%;
                li {
                    background-color:var(--color_white);
                    border:1px solid var(--color_sub);
                    padding:50px 30px;
                    h3 {
                        font-size:1.8rem;
                        color:var(--color_sub3);
                        text-align:center;
                        line-height:1.5;
                        margin-bottom:1em;
                    }
                    p {
                        color:inherit;
                        line-height:1.8;
                    }
                }
            }
        }
    }
}

#detail {
    .wrap {
        .contents {
            .contents_inner {
                display:grid;
                grid-template-columns:50% 1fr;
                align-items:center;
                grid-gap:5%;
                .detail {
                    h3 {
                        font-size:1.8rem;
                        color:var(--color_white);
                        line-height:1.5;
                        margin-bottom:1em;
                    }
                }
                &:not(:last-child) {
                    margin-bottom:60px;
                }
                &:nth-child(odd) {
                    grid-template-columns:1fr 50%;
                    img {
                        order:1;
                    }
                }
            }
        }
    }
}

#trust {
    .wrap {
        .contents {
            h2 {
                margin-bottom:.66em;
                & + p {
                    text-align:center;
                    margin-bottom: 2em;
                }
            }
            table {
                width:100%;
                border-collapse:collapse;
                th,td {
                    border:1px solid #D7D7D7;
                    line-height:1.5;
                    padding: 1em;
                    text-align:left;
                }
                th {
                    color:var(--color_white);
                    background-color:var(--color_sub);
                    font-weight:500;
                    width:28%;
					vertical-align:middle;
                }
                td {
                    background-color:var(--color_white);
                }
            }
        }
    }
}

#faq {
    .wrap {
        .contents {
            .faq {
                background-color:var(--color_white);
                border:1px solid var(--color_sub);
                padding:20px;
                &:not(:last-child) {
                    margin-block:30px;
                }
                dt {
                    font-size:2.0rem;
                    line-height:1.5;
                    color:var(--color_sub3);
                    display:grid;
                    grid-template-columns:1em 1fr .8em;
                    grid-column-gap:.5em;
                    cursor:pointer;
                    .mark {
                        color:#E8772E;
                        font-weight:800;
                    }
                    .plus {
                        position:relative;
                        &::before,&::after {
                            content:'';
                            display:block;
                            width:100%;
                            height:2px;
                            background-color:var(--color_sub3);
                            transition:.3s;
                            position:absolute;
                            top:50%;
                            left:50%;
                            transform:translate(-50%,-50%) rotate(0deg);
                        }
                        &::after {
                            transform:translate(-50%,-50%) rotate(90deg);
                        }
                    }
                    &.open {
                        .plus {
                            &::before {
                                transform:translate(-50%,-50%) rotate(90deg);
                                opacity:0;
                            }
                            &::after {
                                transform:translate(-50%,-50%) rotate(0deg);
                            }
                        }
                    }
                }
                dd {
                    font-size:1.6rem;
                    display:none;
                    .answer {
                        line-height:1.8;
                        display:grid;
                        grid-template-columns:1.2em 1fr;
                        grid-column-gap:.7em;
                        padding-top:1.2em;
                        .mark {
                            color:var(--color_sub3);
                            font-size:2.0rem;
                            font-weight:800;
                            transform:translateY(-.15em);
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1200px){

}

@media screen and (max-width:1024px){

	#reason {
	    .wrap {
	        .contents {
	            .reason_list {
	                li {
	                    padding:20px;
	                }
	            }
	        }
	    }
	}
	
	#service {
	    .wrap {
	        .contents {
	            .service_list {
	                li {
	                    padding:30px 20px;
	                }
	            }
	        }
	    }
	}
	
}

@media screen and (max-width:768px){
    
	section {
	    .wrap {
	        .contents {
				h2 {
					font-size:2.0rem;
				}
	        }
	    }
	}
	
	#reason {
	    .wrap {
	        .contents {
	            .reason_list {
	                grid-template-columns:1fr;
					grid-row-gap:15px;
	                li {
	                    h3 {
	                        font-size:1.8rem;
	                    }
	                }
	            }
	        }
	    }
	}
	
	#service {
	    .wrap {
	        .contents {
				display:grid;
				justify-items:center;
	            h2 {
	                & + p {
	                    text-align:left;
	                }
	            }
	            .service_list {
	                grid-template-columns:1fr;
	                grid-gap:15px;
	                li {
						padding:20px;
	                    h3 {
	                        margin-bottom:.5em;
	                    }
	                }
	            }
	        }
	    }
	}
	
	#detail {
	    .wrap {
	        .contents {
	            .contents_inner {
	                grid-template-columns: 1fr;
					grid-gap:0;
	                .detail {
						display:contents;
	                }
					img {
						grid-area:2/1/3/2;
						margin-bottom:20px;
					}
	                &:not(:last-child) {
	                    margin-bottom:30px;
	                }
	                &:nth-child(odd) {
	                    grid-template-columns:1fr;
	                    img {
	                        order:unset;
	                    }
	                }
	            }
	        }
	    }
	}
	
	#trust {
	    .wrap {
	        .contents {
				display:grid;
				justify-items:center;
	            h2 {
	                & + p {
	                    text-align:left;
	                }
	            }
	            table {
	                th,td {
						display:block;
						width:100%;
						font-size:1.4rem;
	                }
	                th {
						width:100%;
						padding:.66em 1em;
	                }
	                td {
						padding:.66em 1em;
	                }
	            }
	        }
	    }
	}
	
	#faq {
	    .wrap {
	        .contents {
	            .faq {
	                padding:15px;
	                &:not(:last-child) {
	                    margin-block:15px;
	                }
	                dt {
	                    font-size:1.6rem;
	                    .mark {
							font-size:1.2em;
							transform:translateY(-.15em);
	                    }
	                }
	                dd {
	                    font-size:1.4rem;
	                    display:none;
	                    .answer {
	                        padding-top:1em;
	                        .mark {
	                            font-size:1.92rem;
	                        }
	                    }
	                }
	            }
	        }
	    }
	}
    
}