@charset "utf-8";

/*============================
#mainPanelArea
============================*/
#mainPanelArea {}
#mainPanelArea .category {}
#mainPanelArea .category span {}
#mainPanelArea h1.middleTitle {}
#mainPanelArea .english {}

/*============================
#leadArea
============================*/
#leadArea {}
#leadArea ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 25px 4%; margin: 0 auto; width: 700px; }
#leadArea ul li { width: 48%; flex-wrap: nowrap; }
#leadArea ul li a { width: 100%; display: flex; white-space: nowrap; padding: 16px 45px 15px 16px; }
#leadArea ul li a::after { transform: translateY(-50%) rotate(90deg); }
#leadArea ul li a:hover::after { transform: translateY(-40%) rotate(90deg); right: 15px; }

/*============================
#stepArea
============================*/
#stepArea { margin-top: 60px; }

#stepArea .step1 { padding: 60px 50px 80px; }
#stepArea .step1 .sub {}
#stepArea .step1 .titleArea {}
#stepArea .step1 .titleArea h2.main {}
#stepArea .step1 .detail { display: flex; gap: 40px; margin-top: 30px; }
#stepArea .step1 .detail:hover { opacity: inherit; }
#stepArea .step1 .detail .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 320px; height: 240px; }
#stepArea .step1 .detail .image img { width: 100%; height: auto; }
#stepArea .step1 .detail .contets { border-top: 1px dashed #ccc; margin-top: 35px; width: 100%; }
#stepArea .step1 .detail .contets .title { margin-top: 20px; font-weight: 700; font-size: 1.125em; }
#stepArea .step1 .detail .contets .copy { margin-top: 20px; }
#stepArea .step1 .detail .contets .note { margin-top: 30px; font-size: 0.875em; }
#stepArea .step1 .detail .contets .note a { color: #014099; }

#stepArea .step2 { position: relative; padding: 60px 50px 80px; margin-top: 30px; }
#stepArea .step2:before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #ccc; }
#stepArea .step2 .sub {}
#stepArea .step2 .titleArea {}
#stepArea .step2 .titleArea h2.main {}
#stepArea .step2 .detail { display: flex; gap: 40px; margin-top: 30px; }
#stepArea .step2 .detail:hover { opacity: inherit; }
#stepArea .step2 .detail .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 320px; height: 240px; }
#stepArea .step2 .detail .image img { width: 100%; height: auto; }
#stepArea .step2 .detail .contets { border-top: 1px dashed #ccc; margin-top: 35px; width: 100%; }
#stepArea .step2 .detail .contets .title { margin-top: 20px; font-weight: 700; font-size: 1.125em; }
#stepArea .step2 .detail .contets .copy { margin-top: 20px; }
#stepArea .step2 .detail .contets .note { margin-top: 30px; font-size: 0.875em; }
#stepArea .step2 .detail .contets .note a { color: #014099; }

#stepArea .step3 { position: relative; padding: 60px 50px 80px; margin-top: 30px; }
#stepArea .step3:before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #ccc; }
#stepArea .step3 .sub {}
#stepArea .step3 .titleArea {}
#stepArea .step3 .titleArea h2.main {}
#stepArea .step3 .detail { display: flex; gap: 40px; margin-top: 30px; }
#stepArea .step3 .detail:hover { opacity: inherit; }
#stepArea .step3 .detail .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 320px; height: 240px; }
#stepArea .step3 .detail .image img { width: 100%; height: auto; }
#stepArea .step3 .detail .contets { border-top: 1px dashed #ccc; margin-top: 35px; width: 100%; }
#stepArea .step3 .detail .contets .title { margin-top: 20px; font-weight: 700; font-size: 1.125em; }
#stepArea .step3 .detail .contets .copy { margin-top: 20px; }
#stepArea .step3 .detail .contets .note { margin-top: 30px; font-size: 0.875em; }
#stepArea .step3 .detail .contets .note a { color: #014099; }

#stepArea .step4 { position: relative; padding: 60px 50px 80px; margin-top: 30px; }
#stepArea .step4:before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #ccc; }
#stepArea .step4 .sub {}
#stepArea .step4 .titleArea {}
#stepArea .step4 .titleArea h2.main {}
#stepArea .step4 .detail { display: flex; gap: 40px; margin-top: 30px; }
#stepArea .step4 .detail:hover { opacity: inherit; }
#stepArea .step4 .detail .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 320px; height: 240px; }
#stepArea .step4 .detail .image img { width: 100%; height: auto; }
#stepArea .step4 .detail .contets { border-top: 1px dashed #ccc; margin-top: 35px; width: 100%; }
#stepArea .step4 .detail .contets .title { margin-top: 20px; font-weight: 700; font-size: 1.125em; }
#stepArea .step4 .detail .contets .copy { margin-top: 20px; }
#stepArea .step4 .detail .contets .note { margin-top: 30px; font-size: 0.875em; }
#stepArea .step4 .detail .contets .note a { color: #014099; }

#stepArea .step5 { position: relative; padding: 60px 50px 80px; margin-top: 30px; }
#stepArea .step5:before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #ccc; }
#stepArea .step5 .sub {}
#stepArea .step5 .titleArea {}
#stepArea .step5 .titleArea h2.main {}
#stepArea .step5 .detail { display: flex; gap: 40px; margin-top: 30px; }
#stepArea .step5 .detail:hover { opacity: inherit; }
#stepArea .step5 .detail .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 320px; height: 240px; }
#stepArea .step5 .detail .image img { width: 100%; height: auto; }
#stepArea .step5 .detail .contets { border-top: 1px dashed #ccc; margin-top: 35px; width: 100%; }
#stepArea .step5 .detail .contets .title { margin-top: 20px; font-weight: 700; font-size: 1.125em; }
#stepArea .step5 .detail .contets .copy { margin-top: 20px; }
#stepArea .step5 .detail .contets .note { margin-top: 30px; font-size: 0.875em; }
#stepArea .step5 .detail .contets .note a { color: #014099; }

#stepArea .step6 { position: relative; padding: 60px 50px 80px; }
#stepArea .step6:before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #ccc; }
#stepArea .step6 .sub {}
#stepArea .step6 .titleArea {}
#stepArea .step6 .titleArea h2.main {}
#stepArea .step6 .detail { display: flex; gap: 40px; margin-top: 30px;}
#stepArea .step6 .detail:hover { opacity: inherit; }
#stepArea .step6 .detail .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 320px; height: 240px; }
#stepArea .step6 .detail .image img { width: 100%; height: auto; }
#stepArea .step6 .detail .contets { border-top: 1px dashed #ccc; margin-top: 35px; width: 100%; }
#stepArea .step6 .detail .contets .title { margin-top: 20px; font-weight: 700; font-size: 1.125em; }
#stepArea .step6 .detail .contets .copy { margin-top: 20px; }
#stepArea .step6 .detail .contets .note { margin-top: 30px; font-size: 0.875em; }
#stepArea .step6 .detail .contets .note a { color: #014099; }

#stepArea .step7 { position: relative; padding: 60px 50px 80px; margin-top: 30px; }
#stepArea .step7:before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #ccc; }
#stepArea .step7 .sub {}
#stepArea .step7 .titleArea {}
#stepArea .step7 .titleArea h2.main {}
#stepArea .step7 .detail { display: flex; gap: 40px; margin-top: 30px; }
#stepArea .step7 .detail:hover { opacity: inherit; }
#stepArea .step7 .detail .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 320px; height: 240px; }
#stepArea .step7 .detail .image img { width: 100%; height: auto; }
#stepArea .step7 .detail .contets { border-top: 1px dashed #ccc; margin-top: 35px; width: 100%; }
#stepArea .step7 .detail .contets .title { margin-top: 20px; font-weight: 700; font-size: 1.125em; }
#stepArea .step7 .detail .contets .copy { margin-top: 20px; }
#stepArea .step7 .detail .contets .note { margin-top: 30px; font-size: 0.875em; }
#stepArea .step7 .detail .contets .note a { color: #014099; }

#stepArea .step8 { position: relative; padding: 60px 50px 80px; margin-top: 30px; }
#stepArea .step8:before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #ccc; }
#stepArea .step8 .sub {}
#stepArea .step8 .titleArea {}
#stepArea .step8 .titleArea h2.main {}
#stepArea .step8 .detail { display: flex; gap: 40px; margin-top: 30px; }
#stepArea .step8 .detail:hover { opacity: inherit; }
#stepArea .step8 .detail .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 320px; height: 240px; }
#stepArea .step8 .detail .image img { width: 100%; height: auto; }
#stepArea .step8 .detail .contets { border-top: 1px dashed #ccc; margin-top: 35px; width: 100%; }
#stepArea .step8 .detail .contets .title { margin-top: 20px; font-weight: 700; font-size: 1.125em; }
#stepArea .step8 .detail .contets .copy { margin-top: 20px; }
#stepArea .step8 .detail .contets .note { margin-top: 30px; font-size: 0.875em; }
#stepArea .step8 .detail .contets .note a { color: #014099; }