@charset "utf-8";

/*============================
#mainPanelArea
============================*/
#mainPanelArea {}
#mainPanelArea img {}
#mainPanelArea {}
#mainPanelArea h1.middleTitle {}
#mainPanelArea .english {}

/*============================
#leadArea
============================*/
#leadArea {}
#leadArea ul { display: flex; flex-wrap: wrap; gap: 25px 2%; margin: 0 auto; width: 1000px; }
#leadArea ul li { width: 32%; 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; }
#leadArea ul li:last-child a { background-color: #FC405E; color: #fff; border: none; border-radius: 5px; }
#leadArea ul li:last-child a::after { background: url(/imageFile/global/icon_arrow_white.svg) no-repeat center; transform: translateY(-50%) rotate(0); }
#leadArea ul li:last-child a:hover::after { right: 12px; }

/*============================
#abouArea
============================*/
#aboutArea { margin-top: 60px; }
#aboutArea .sub {}
#aboutArea .titleArea {}
#aboutArea .content { display: flex; justify-content: center; gap: 30px; }
#aboutArea .content .leftArea { width: 80%; }
#aboutArea .content .leftArea .copy { margin-top: 30px; font-size: 1.125em; line-height: 1.75; }
#aboutArea .content .leftArea .button { margin-top: 20px; }
#aboutArea .content .leftArea .button a {}
#aboutArea .content .leftArea .button a span {}
#aboutArea .content .image { flex-shrink: 0; width: 384px; height: 264px; }
#aboutArea .content .image img { width: 100%; height: auto; }
#aboutArea .addition { display: flex; margin-top: 40px; background-color: #FC405E; border: 1px solid #ddd; border-radius: 25px 20px 20px 25px; }
#aboutArea .addition .event { width: 64%; padding: 30px 40px; background-color: #fff; border: 1px solid #ddd; border-radius: 20px; }
#aboutArea .addition .event .title { font-size: 1.25em; font-weight: 600; }
#aboutArea .addition .event .copy { margin-top: 20px; line-height: 1.75; }
#aboutArea .addition .event .button { text-align: right; margin-top: 20px; }
#aboutArea .addition .event .button a { font-weight: 600; color: #014099; }
#aboutArea .addition .simulation { padding: 30px; background-color: #FC405E; border-radius: 20px; }
#aboutArea .addition .simulation .title { font-size: 1.25em; font-weight: 600; color: #fff; }
#aboutArea .addition .simulation .copy { margin-top: 15px; color: #fff; }
#aboutArea .addition .simulation .button { margin-top: 20px; }
#aboutArea .addition .simulation .button a { padding: 15px 55px 13px 25px; background-color: #fff; color: #FC405E; font-weight: 600; letter-spacing: normal; }
#aboutArea .addition .simulation .button a:before { right: 10px; background: #DE3150 url(/imageFile/global/icon_arrow_white.svg) no-repeat center; background-size: 15px auto; }
#aboutArea .addition .simulation .button a:hover::before { right: 8px; }

/*============================
#lawsArea
============================*/
#lawsArea { margin-top: 80px; }
#lawsArea .title { position: relative; text-align: center; font-weight: bold; font-size: 1.25em; }
#lawsArea .title:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-bottom: 1px dashed #ccc; width: 35%; }
#lawsArea .title:after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-bottom: 1px dashed #ccc; width: 35%;  }
#lawsArea .content { display: flex; gap: 40px; margin-top: 40px; }
#lawsArea .content .image { overflow: hidden; flex-shrink: 0; border-radius: 20px; width: 300px; height: 220px; }
#lawsArea .content .image img { width: 100%; height: auto; }
#lawsArea .content .rightArea {}
#lawsArea .content .rightArea .sub {}
#lawsArea .content .rightArea .titleArea {}
#lawsArea .content .rightArea .titleArea h2.main {}
#lawsArea .content .rightArea .copy { margin-top: 20px; }
#lawsArea .content .rightArea .button { margin-top: 25px; }
#lawsArea .content .rightArea .button a {}
#lawsArea .content .rightArea .button a span {}

/*============================
#startArea
============================*/
#startArea { margin-top: 90px; }
#startArea .sub {}
#startArea .titleArea {}
#startArea .titleArea h2.main {}
#startArea .property { margin-top: 30px; }
#startArea .property .topArea { display: flex; gap: 20px; }
#startArea .property .topArea .title { align-self: center; padding: 8px 12px; font-weight: 600; background-color: #222; color: #fff; }
#startArea .property .topArea .copy { font-size: 1.125em; }
#startArea .property .topArea .button { margin-left: auto; }
#startArea .property .topArea .button a {}
#startArea .property .topArea .button a span {}
#startArea .property ul { display: flex; margin-top: 40px; }
#startArea .property ul li { position: relative; width: 25%; padding: 30px 40px; }
#startArea .property ul li:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 100%; border-left: 1px solid #ccc; z-index: 0; }
#startArea .property ul li:last-child:before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 100%; border-right: 1px solid #ccc; z-index: 0; }
#startArea .property ul li:after { content: ''; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 18px solid #777777; border-right: 0; z-index: 1; }
#startArea .property ul li:last-child:after { content: none; }
#startArea .property ul li .image {}
#startArea .property ul li:nth-child(1) .image { width: 36px; height: 26px; }
#startArea .property ul li:nth-child(2) .image { width: 21px; height: 28px; }
#startArea .property ul li:nth-child(3) .image { width: 30px; height: 29px; }
#startArea .property ul li:nth-child(4) .image { width: 35px; height: 23px; }
#startArea .property ul li .image img { width: 100%; height: auto; }
#startArea .property ul li .copy { margin-top: 30px; font-weight: 600; line-height: 1.75; color: #014099; }
#startArea .property ul li .button { margin-top: 20px; }
#startArea .property ul li .button a { font-size: 0.875em; font-weight: 600; color: #014099; letter-spacing: normal; font-feature-settings: 'palt'; }
#startArea .operation { margin-top: 70px; }
#startArea .operation .topArea { display: flex; align-items: center; gap: 20px; }
#startArea .operation .topArea .title { align-self: center; padding: 8px 12px; font-weight: 600; background-color: #222; color: #fff; }
#startArea .operation .topArea .copy { font-size: 1.125em; }
#startArea .operation .topArea .button { margin-left: auto; }
#startArea .operation .topArea .button a {}
#startArea .operation .topArea .button a span {}
#startArea .operation ul { display: flex; margin-top: 40px; }
#startArea .operation ul li { position: relative; width: 25%; padding: 30px 40px; }
#startArea .operation ul li:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 100%; border-left: 1px solid #ccc; z-index: 0; }
#startArea .operation ul li:last-child:before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 100%; border-right: 1px solid #ccc; z-index: 0; }
#startArea .operation ul li:after { content: ''; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 18px solid #777777; border-right: 0; z-index: 1; }
#startArea .operation ul li:last-child:after { content: none; }
#startArea .operation ul li .image {}
#startArea .operation ul li:nth-child(1) .image { width: 30px; height: 29px; }
#startArea .operation ul li:nth-child(2) .image { width: 33px; height: 31px; }
#startArea .operation ul li:nth-child(3) .image { width: 26px; height: 29px; }
#startArea .operation ul li:nth-child(4) .image { width: 28px; height: 29px; }
#startArea .operation ul li .image img { width: 100%; height: auto; }
#startArea .operation ul li .copy { margin-top: 30px; font-weight: 600; line-height: 1.75; color: #014099; }

/*============================
#supportArea
============================*/
#supportArea { margin-top: 60px; }
#supportArea .sub {}
#supportArea .titleArea {}
#supportArea .titleArea h2.main {}
#supportArea .myhome { display: flex; gap: 100px; margin-top: 30px; padding: 30px 0 40px; border-top: 1px dashed #ccc; }
#supportArea .myhome .leftArea {}
#supportArea .myhome .leftArea .target { font-size: 0.875em; font-weight: 600; }
#supportArea .myhome .leftArea .copy { margin-top: 10px; font-size: 1.125em; line-height: 1.75; }
#supportArea .myhome .leftArea .buttonArea { display: flex; gap: 20px; margin-top: 20px;  }
#supportArea .myhome .leftArea .buttonArea .button {}
#supportArea .myhome .leftArea .buttonArea .button a {}
#supportArea .myhome .leftArea .buttonArea .button a span {}
#supportArea .myhome .image { flex-shrink: 0; overflow: hidden; border-radius: 20px; width: 240px; height: 160px; }
#supportArea .myhome .image img { width: 100%; height: auto; }
#supportArea .business { display: flex; gap: 100px; margin-top: 30px; padding: 30px 0 40px; border-top: 1px dashed #ccc; }
#supportArea .business .leftArea {}
#supportArea .business .leftArea .target { font-size: 0.875em; font-weight: 600; }
#supportArea .business .leftArea .copy { margin-top: 10px; font-size: 1.125em; line-height: 1.75; }
#supportArea .business .leftArea .buttonArea { display: flex; justify-content: space-between; margin-top: 20px; }
#supportArea .business .leftArea .buttonArea .button {}
#supportArea .business .leftArea .buttonArea .button a {}
#supportArea .business .leftArea .buttonArea .button a span {}
#supportArea .business .leftArea .buttonArea .button:nth-child(2) { text-align: right; }
#supportArea .business .leftArea .buttonArea .button:nth-child(2) a span { font-weight: 600; color: #014099; }
#supportArea .business .image { flex-shrink: 0; overflow: hidden; border-radius: 20px; width: 240px; height: 160px; }
#supportArea .business .image img { width: 100%; height: auto; }

/*============================
#communityArea
============================*/
#communityArea { margin-top: 80px; }
#communityArea .content { position: relative; border-radius: 20px; padding: 40px 60px; background-color: #FC405E; border: #E5E5E5; }
#communityArea .content .leftArea {}
#communityArea .content .leftArea .title { color: #fff; font-weight: 600; font-size:  1.75em; }
#communityArea .content .leftArea .copy { margin-top: 15px; color: #fff; line-height: 1.75; }
#communityArea .content .leftArea .button { margin-top: 25px; }
#communityArea .content .leftArea .button a { background-color: #fff; color: #FC405E; font-weight: 600; }
#communityArea .content .leftArea .button a:before { right: 10px; background: #DE3150 url(/imageFile/global/icon_arrow_white.svg) no-repeat center; background-size: 15px auto; }
#communityArea .content .leftArea .button a:hover:before { right: 8px; }
#communityArea .content .image { position: absolute; bottom: 0; right: 20px; width: 520px; height: 174px; }
#communityArea .content .image img { width: 100%; height: auto; }

/*============================
#faqArea
============================*/
#faqArea.faqArea { margin-top: 80px; }
#faqArea.faqArea .sub {}
#faqArea.faqArea .titleArea {}
#faqArea.faqArea .titleArea h2.main {}
#faqArea.faqArea .content { display: flex; justify-content: space-between; gap: 40px; margin-top: 30px; }
#faqArea.faqArea .content .faq { overflow: hidden; position: relative; padding-bottom: 25px; width: 50%; border-radius: 20px; border: 1px solid #e5e5e5; box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.05); }
#faqArea.faqArea .content .faq a {}
#faqArea.faqArea .content .faq a .image { overflow: hidden; width: 100%; height: 113px; }
#faqArea.faqArea .content .faq a .image img { width: 100%; height: auto; transition: 0.5s all; }
#faqArea.faqArea .content .faq a:hover .image img { transform: scale(1.05); }
#faqArea.faqArea .content .faq a .title { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); font-weight: 600; font-size: 1.125em; }
#faqArea.faqArea .content .faq a .copy { text-align: center; margin-top: 30px; }
#faqArea.faqArea .content .academy { overflow: hidden; position: relative; padding-bottom: 25px; width: 50%; border-radius: 20px; border: 1px solid #e5e5e5; box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.05); }
#faqArea.faqArea .content .academy a {}
#faqArea.faqArea .content .academy a .image { overflow: hidden; width: 100%; height: 113px; }
#faqArea.faqArea .content .academy a .image img { width: 100%; height: auto; transition: 0.5s all; }
#faqArea.faqArea .content .academy a:hover .image img { transform: scale(1.05); }
#faqArea.faqArea .content .academy a .title { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); font-weight: 600; font-size: 1.125em; }
#faqArea.faqArea .content .academy a .copy { text-align: center; margin-top: 30px; }