@charset "utf-8";

/* pc */
@media (min-width: 1200px) {    
    #process .subtitle { height: 130px; }
    #process .steps .step > img { width: 100%; }
    #process .note { width: 100%; }

    #notice > .container { width: 90%; }

    #proposal > .container > .comment > p { width: 100%; padding-left: 10%; }
}

/* tablet */
@media (min-width: 768px) and (max-width: 1199px) {
    #header h1 { width: 100%; height: auto; min-height: 360px; top: 210px; background-size: contain; }    
    #header .container > div { width: 370px; height: 80px; top: 340px; font-size: 2.3em; }
    #header .arrow { bottom: 120px; }

    #features { height: auto; padding: 40px 0; background-size: contain; }
    #features ul { width: 50%; flex-wrap: wrap; margin: 0 auto; position: inherit; transform: none; }
    #features ul li { flex: 1 1 calc(50% - 10px); text-align: center; padding: inherit; margin: 5px; }
    #features ul li::after { display: none; background: unset; }
    #features ul li img { width: 100%; }    

    #attention { height: auto; min-height: 1100px; background-size: cover; }
    #attention h2 { width: 600px; height: auto; min-height: 250px; top: 30px; margin: 0 auto; background-size: contain;  }
    #attention .container { background: none; }
    #attention ul { float: none; margin: 60px 0 0; padding: 0 30px; display: flex; flex-wrap: wrap; justify-content: center; }
    #attention ul li { width: 700px; line-height: 120px; font-size: 2em; }
    #attention .number { width: auto; display: inline-block; text-align: center; margin: 0 30px; padding-left: 0; }
    #attention .number::after { display: inline; padding: 10px; }    

    #process { height: auto; min-height: 1080px; }
    #process h2 { padding-top: 10%; font-size: 2.5em; }
    #process .subtitle { width: 60%; height: auto; min-height: 55px; margin: 0 auto; background-size: contain; padding: 3% 10% 5%; }
    #process .steps { width: 100%; margin-top: 30px; display: block; justify-content: unset; }
    #process .steps .step { width: 60%; display: flex; justify-content: center;  margin: 0 auto; text-align: center; }
    #process .steps .step > img { width: 50%; }
    #process .steps .step > p { margin-top: 20px; font-size: 1.8em; }
    #process .steps .step:nth-child(2) { padding: 10% 0; }
    #process .steps .step:first-child:after {
        display: block; content: ""; position: absolute; left: 48%; bottom: 67%;
        width: 30px; height: 20px; transform: rotate(360deg);
    }
    #process .steps .step:nth-child(2):after {
        display: block; content: ""; position: absolute; left: 48%; bottom: 31%;
        width: 30px; height: 20px; transform: rotate(360deg);
    }    
    #process .note { position: inherit; transform: none; bottom: 5%; font-size: 1.6em; padding: 7% 0; }    

    #notice { height: auto; min-height: 350px; }
    #notice > .container { width: 85%; border: 10px solid #fff; }
    #notice > .container > p { padding: 5% 16%; font-size: 2.3em; line-height: 50px; font-weight: 600; }    

    #proposal > .container { position: absolute; }
    #proposal > .container > h2 { width: 100%; height: 610px; background: url('/images/img/img_proposal_man.png') bottom no-repeat; background-size: contain; }
    #proposal > .container > .comment { width: 100%; background-color: unset; padding: inherit; border-radius: 30px; }
    #proposal > .container > .comment::after { 
        display: block; content: ""; width: 10%; background-color: #130d0c; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
        position: relative; top: 70%; left: -23px; padding: 4% 31%; }
    #proposal > .container > .comment > div { 
        position: absolute; top: 50%; transform: translateY(-50%); padding: 10%; text-align: center; border-radius: 30px;
        background-color: #130d0c; background-image: none;
    }
    #proposal > .container > .comment > div > p { line-height: 45px; font-size: 2em; font-weight: 500; color: #fff; }
    #proposal > .container > .comment > div > p strong { font-size: 1em; font-weight: 700; color: #fff18f; }   

    #contact { height: auto; min-height: 450px; }
    #contact h2 { padding-top: 60px; font-size: 2.5em; }
    #contact p { font-size: 6em; }
    #contact a { width: 100%; line-height: 75px; font-size: 2.3em; padding-bottom: 33px; top: 35px; }    

	#footer .company-info-detail { margin-bottom: 0; }
	#footer ul { width: 80%; position: relative; left: 50%; transform: translateX(-50%); }
	#footer ul li { font-size: 1.7em; flex: 1 1 calc(50% - 10px); line-height: 35px; }
	#footer ul li::after { border: unset; }
    #footer p { font-size: 1.7em; }       
}

/* mobile */
@media (min-width: 361px) and (max-width: 767px) {

    #header { height: auto; min-height: 510px; }
    #header ul { width: 100%; height: 30px; top: 60px; background-size: contain; }
    #header ul li { font-size: 0.85em; padding-left: 10px; margin-bottom: inherit; padding-bottom: 3px; }
    #header ul li::after { height: 8px; padding-right: 10px; }
    #header h1 { width: 100%; height: auto; min-height: 200px; top: 90px; background-size: contain; }
    #header .container > div { width: 120px; line-height: 40px; top: 140px; font-size: 1.1em; padding: 0 30px; }
    #header .arrow { height: 14px; bottom: 50px; }

    #features { height: auto; padding: 20px 0; background-size: contain; }
    #features ul { width: 65%; flex-wrap: wrap; margin: 0 auto; position: inherit; transform: none; }
    #features ul li { flex: 1 1 calc(50% - 10px); text-align: center; padding: inherit; margin: 5px; }
    #features ul li::after { display: none; background: unset; }
    #features ul li img { width: 100%; }

    #attention { height: auto; padding: 5% 0 10%; background-size: cover; }
    #attention h2 { width: 70%; height: auto; top: 0; margin: 0 auto; background-size: contain;  }
    #attention h2::after { display: block; content: ""; padding: 20% 0;}
    #attention .container { background: none; }    
    #attention ul { float: none; margin: 10px 0 0; padding: 0 10px; display: flex; flex-wrap: wrap; justify-content: center; }
    #attention ul li { width: 500px; line-height: 65px; font-size: 1.1em; margin-bottom: 3%; box-shadow: 3px 3px 0 2px rgba(0, 0, 0, 0.3); }    
    #attention .number { width: auto; display: inline-block; text-align: center; margin: 0 10px; padding-left: 0; }
    #attention .number::after { display: inline; padding: 5px; }

    #process { height: auto; min-height: 1080px; }
    #process h2 { padding-top: 10%; font-size: 1.7em; }
    #process .subtitle { width: auto; height: auto; min-height: 55px; margin: 0 auto; background-size: 85%; padding: 0 10% 5%; }
    #process .steps { width: 100%; margin-top: 30px; display: block; justify-content: unset; }
    #process .steps .step { width: 60%; display: flex; justify-content: center; margin: 0 auto; text-align: center; }
    #process .steps .step > img { width: 60%; }
    #process .steps .step > p { margin-top: 20px; font-size: 1.5em; }
    #process .steps .step:nth-child(2) { padding: 15% 0; }
    #process .steps .step:first-child:after { 
        display: block; content: ""; position: absolute; left: 48%; bottom: 67%;
        width: 24px; height: 18px; transform: rotate(360deg);
    }
    #process .steps .step:nth-child(2):after {
        display: block; content: ""; position: absolute; left: 48%; bottom: 31%;
        width: 24px; height: 18px; transform: rotate(360deg);
    } 
    #process .note { position: inherit; transform: none; bottom: 5%; font-size: 1.2em; padding: 15% 0 10%; }
    
    #notice { height: auto; min-height: 350px; }
    #notice > .container { width: 85%; border: 10px solid #fff; }
    #notice > .container > p { padding: 10% 16%; font-size: 1.6em; line-height: 36px; font-weight: 600; }

    #proposal { height: auto; min-height: 635px; }
    #proposal > .container { display: unset; position: unset; }
    #proposal > .container > h2 { width: 100%; height: 340px; background-size: contain; }    
    #proposal > .container > .comment { width: auto; background-color: unset; padding: inherit; border-radius: 30px; }
    #proposal > .container > .comment > div { 
        position: unset; transform: none; padding: 6%; text-align: center; border-radius: 30px; margin: 0 10% 10%;
        background-color: #130d0c; background-image: none;
    }
    #proposal > .container > .comment > div > p { line-height: 35px; font-size: 1.4em; font-weight: 500; color: #fff; }
    #proposal > .container > .comment > div > p strong { font-size: 1em; font-weight: 700; color: #fff18f; }   

    #contact { height: auto; min-height: 350px; }
    #contact h2 { padding-top: 60px; font-size: 1.7em; }
    #contact p { font-size: 3em; }
    #contact a { width: 100%; line-height: 65px; font-size: 1.5em; padding-bottom: 25px; top: 35px; }

    #footer .container { min-height: 0; }
	#footer .company-info-detail { margin-bottom: 0; }
	#footer ul { width: 80%; position: relative; left: 50%; transform: translateX(-50%); }
	#footer ul li { width: 100%; font-size: 1.3em; flex: none; line-height: 30px; text-align: center; }
	#footer ul li::after { border: unset; margin: inherit; }	
    #footer p { line-height: 70px; font-size: 1.1em; }    

}

/* small mobile */
@media (max-width: 360px) {

    #header { height: auto; min-height: 420px; }
    #header ul { width: 100%; height: 30px; top: 60px; background-size: contain; }
    #header ul li { font-size: 0.7em; padding-left: 8px; margin-bottom: 0; padding-bottom: 0; }
    #header ul li::after { height: 8px; padding-right: 8px; }
    #header h1 { width: 100%; height: auto; min-height: 170px; top: 70px; background-size: contain; }
    #header .container > div { width: 50%; line-height: 35px; top: 93px; font-size: 1em; padding-top: inherit; }
    #header .arrow { height: 14px; bottom: 50px; }

    #features { height: auto; padding: 20px 0; background-size: contain; }
    #features ul { width: 80%; flex-wrap: wrap; margin: 0 auto; position: inherit; transform: none; }
    #features ul li { flex: 1 1 calc(50% - 10px); text-align: center; padding: inherit; margin: 5px; }
    #features ul li::after { display: none; background: unset; }
    #features ul li img { width: 100%; }

    #attention { height: auto; min-height: 460px; background-size: cover; }
    #attention h2 { height: auto; min-height: 130px; top: 0; background-size: contain;  }
    #attention .container { background: none; }
    #attention ul { float: none; margin: inherit; }
    #attention ul li { width: 100%; line-height: 49px; font-size: 1em; margin-bottom: 4%; box-shadow: 3px 3px 0 2px rgba(0, 0, 0, 0.3); }
    #attention .number { width: auto; display: inline-block; text-align: center; margin: 0 3px 0 7px; padding-left: 0; }
    #attention .number::after { display: inline; padding: 3px; }

    #process { height: auto; min-height: 770px; }
    #process h2 { padding-top: 10%; font-size: 1.3em; }
    #process .subtitle { width: 60%; height: auto; min-height: 55px; margin: 0 auto; background-size: contain; padding: 0 10%; }
    #process .steps { width: 100%; margin-top: 30px; display: block; justify-content: unset; }
    #process .steps .step { width: 60%; display: flex; justify-content: center;  margin: 0 auto; text-align: center; }
    #process .steps .step > img { width: 50%; }
    #process .steps .step > p { margin-top: 20px; font-size: 1em; }
    #process .steps .step:nth-child(2) { padding: 15% 0; }
    #process .steps .step:first-child:after { 
        display: block; content: ""; position: absolute; left: 46%; bottom: 67%;
        width: 25px; height: 11px; transform: rotate(360deg); background-size: 60%;
    }
    #process .steps .step:nth-child(2):after {
        display: block; content: ""; position: absolute; left: 46%; bottom: 31%;
        width: 25px; height: 11px; transform: rotate(360deg); background-size: 60%;
    } 
    #process .note { width: 60%; margin: 0 auto; position: inherit; transform: none; bottom: 5%; font-size: 1em; padding: 15% 0; }   
    
    #notice { height: auto; min-height: 350px; }
    #notice > .container { width: 85%; border: 10px solid #fff; }
    #notice > .container > p { padding: 30px 10px; font-size: 1.3em; line-height: 36px; font-weight: 500; }

    #proposal { height: auto; min-height: 500px; }
    #proposal > .container { display: unset; }
    #proposal > .container > h2 { width: 100%; height: 300px; background-size: 65%; }    
    #proposal > .container > .comment { width: auto; background-color: unset; padding: inherit; border-radius: 30px; }
    #proposal > .container > .comment > div { 
        position: unset; transform: none; padding: 6%; text-align: center; border-radius: 30px; margin-bottom: 20%;
        background-color: #130d0c; background-image: none;
    }
    #proposal > .container > .comment > div > p { line-height: 33px; font-size: 1.3em; font-weight: 500; color: #fff; }
    #proposal > .container > .comment > div > p strong { font-size: 1em; font-weight: 700; color: #fff18f; } 

    #contact { height: auto; min-height: 300px; }
    #contact h2 { padding-top: 60px; font-size: 1.5em; }
    #contact p { font-size: 2.5em; }
    #contact a {width: 80%; line-height: 65px; font-size: 1.3em; padding-bottom: 18px; top: 35px; background-size: contain; }

    #footer .container { min-height: 0; }
	#footer ul li { width: 100%; font-size: 1em; flex: none; line-height: 20px; text-align: center; }
	#footer ul li::after { border: unset; margin: inherit; }	
    #footer p { line-height: 70px; font-size: 1em; }       

}