@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 .step0 { padding: 0 50px 60px; }
#stepArea .step0 .sub {}
#stepArea .step0 .titleArea {}
#stepArea .step0 .titleArea h2.main {}
#stepArea .step0 ul { display: flex; flex-direction: column; gap: 40px; margin-top: 30px; }
#stepArea .step0 ul li { display: flex; gap: 40px; }
#stepArea .step0 ul li .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 480px; height: 480px; }
#stepArea .step0 ul li .image img { width: 100%; height: auto; }
#stepArea .step0 ul li .contets { border-top: 1px dashed #ccc; margin-top: 35px; width: 100%; }
#stepArea .step0 ul li .contets .title { margin-top: 20px; font-weight: 700; font-size: 1.125em; }
#stepArea .step0 ul li .contets .copy { margin-top: 10px; }
#stepArea .step0 ul li .contets .note { margin-top: 10px; font-size: 0.875em; }
#stepArea .step0 ul li .contets .note a { color: #014099; }
#stepArea .step0 ul li .contets .note a.app { display: inline-block; margin-right: 20px; }
#stepArea .step0 ul li .contets .note a.app img { width: 150px; height: 55px; }
#stepArea .step0 ul li .contets .note a.googleplay { display: inline-block; }
#stepArea .step0 ul li .contets .note a.googleplay img { width: 185px; height: 55px; }
#stepArea .step1 { position: relative; padding: 60px 50px 80px; }
#stepArea .step1:before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vw; height: 1px; background-color: #ccc; }
#stepArea .step1 .sub {}
#stepArea .step1 .titleArea {}
#stepArea .step1 .titleArea h2.main {}
#stepArea .step1 ul { display: flex; flex-direction: column; gap: 40px; margin-top: 30px; }
#stepArea .step1 ul li { display: flex; gap: 40px; }
#stepArea .step1 ul li .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 480px; height: 480px; }
#stepArea .step1 ul li .image img { width: 100%; height: auto; }
#stepArea .step1 ul li .contets { border-top: 1px dashed #ccc; margin-top: 35px; width: 100%; }
#stepArea .step1 ul li .contets .title { margin-top: 20px; font-weight: 700; font-size: 1.125em; }
#stepArea .step1 ul li .contets .copy { margin-top: 10px; }
#stepArea .step1 ul li .contets .note { margin-top: 10px; font-size: 0.875em; }
#stepArea .step1 ul li .contets .note a { color: #014099; }
#stepArea .step1 ul li .contets .note dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 0; }
#stepArea .step1 ul li .contets .note dl dt { font-weight: bold; font-size: 0.875em; }
#stepArea .step1 ul li .contets .note dl dd { font-size: 0.875em; }
#stepArea .step2 { position: relative; padding: 60px 50px 80px; }
#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 ul {}
#stepArea .step2 ul { display: flex; flex-direction: column; gap: 40px; margin-top: 30px; }
#stepArea .step2 ul li { display: flex; gap: 40px; }
#stepArea .step2 ul li .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 480px; height: 480px; }
#stepArea .step2 ul li .image img { width: 100%; height: auto; }
#stepArea .step2 ul li .contets { border-top: 1px dashed #ccc; margin-top: 35px; width: 100%; }
#stepArea .step2 ul li .contets .title { margin-top: 20px; font-weight: 700; font-size: 1.125em; }
#stepArea .step2 ul li .contets .copy { margin-top: 10px; }
#stepArea .step2 ul li .contets .note { margin-top: 10px; font-size: 0.875em; }
#stepArea .step2 ul li .contets .note a { color: #014099; }
#stepArea .step2 ul li .contets .note dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 0; }
#stepArea .step2 ul li .contets .note dl dt { font-weight: bold; font-size: 0.875em; }
#stepArea .step2 ul li .contets .note dl dd { font-size: 0.875em; }
#stepArea .step2 ul li .contets .banner { margin-top: 15px; width: 100%; height: 100%; }
#stepArea .step2 ul li .contets .banner a { display: block; padding: 5px; background: #fff; border: solid 1px #e5e5e5; border-radius: 10px; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.05); }
#stepArea .step2 ul li .contets .banner a img { border-radius: 5px; width: 100%; height: auto; }
#stepArea .step3 { position: relative; padding: 60px 50px 80px; }
#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 ul { display: flex; flex-direction: column; gap: 40px; margin-top: 30px; }
#stepArea .step3 ul li { display: flex; gap: 40px; }
#stepArea .step3 ul li .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 480px; height: 480px; }
#stepArea .step3 ul li .image img { width: 100%; height: auto; }
#stepArea .step3 ul li .contets { border-top: 1px dashed #ccc; margin-top: 35px; width: 100%; }
#stepArea .step3 ul li .contets .title { margin-top: 20px; font-weight: 700; font-size: 1.125em; }
#stepArea .step3 ul li .contets .copy { margin-top: 10px; }
#stepArea .step3 ul li .contets .note { margin-top: 10px; font-size: 0.875em; }
#stepArea .step3 ul li .contets .note a { color: #014099; }