@charset "utf-8";

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

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

/*============================
#leadArea
============================*/
#leadArea {}
#leadArea ul { gap: 10px 0; margin: 0 auto; width: 100%; }
#leadArea ul li { width: 100%; }
#leadArea ul li a {}
#leadArea ul li a::after {}
#leadArea ul li a:hover::after {}
#leadArea ul li:last-child a {}
#leadArea ul li:last-child a::after {}
#leadArea ul li:last-child a:hover::after {}

/*============================
#abouArea
============================*/
#aboutArea { margin-top: 40px; }
#aboutArea .sub {}
#aboutArea .titleArea {}
#aboutArea .content { flex-direction: column; gap: 30px; }
#aboutArea .content .leftArea { width: 100%; }
#aboutArea .content .leftArea .copy { margin-top: 20px; font-size: 1em; line-height: 1.5; }
#aboutArea .content .leftArea .button { text-align: center; }
#aboutArea .content .leftArea .button a { width: 80%; }
#aboutArea .content .leftArea .button a span {}
#aboutArea .content .image { margin: 0 auto; width: 50%; height: auto; }
#aboutArea .content .image img {}
#aboutArea .addition { flex-direction: column; margin-top: 30px; border-radius: 18px 18px 15px 15px; }
#aboutArea .addition .event { width: 100%; padding: 20px; border-radius: 15px; }
#aboutArea .addition .event .title { font-size: 1.125em; }
#aboutArea .addition .event .copy { margin-top: 10px; line-height: 1.5; }
#aboutArea .addition .event .button { margin-top: 15px; }
#aboutArea .addition .event .button a {}
#aboutArea .addition .simulation { padding: 20px; border-radius: 15px; }
#aboutArea .addition .simulation .title { font-size: 1.125em; }
#aboutArea .addition .simulation .copy { margin-top: 10px; }
#aboutArea .addition .simulation .button { text-align: center; margin-top: 15px; }
#aboutArea .addition .simulation .button a { font-feature-settings: 'palt'; width: 100%; }
#aboutArea .addition .simulation .button a:before {}
#aboutArea .addition .simulation .button a:hover::before {}

/*============================
#lawsArea
============================*/
#lawsArea { margin-top: 40px; }
#lawsArea .title { font-size: 1.125em; }
#lawsArea .title:before { content: none; }
#lawsArea .title:after { content: none; }
#lawsArea .content { flex-direction: column; gap: 30px; margin-top: 20px; }
#lawsArea .content .image { border-radius: 10px; width: 100%; height: auto; }
#lawsArea .content .image img {}
#lawsArea .content .rightArea {}
#lawsArea .content .rightArea .sub {}
#lawsArea .content .rightArea .titleArea {}
#lawsArea .content .rightArea .titleArea h2.main {}
#lawsArea .content .rightArea .copy { margin-top: 10px; }
#lawsArea .content .rightArea .button { text-align: center; margin-top: 15px; }
#lawsArea .content .rightArea .button a {}
#lawsArea .content .rightArea .button a span {}

/*============================
#startArea
============================*/
#startArea { margin-top: 40px; }
#startArea .sub {}
#startArea .titleArea {}
#startArea .titleArea h2.main {}
#startArea .property {}
#startArea .property .topArea { flex-direction: column; gap: 10px; }
#startArea .property .topArea .title { width: 100%; }
#startArea .property .topArea .copy { font-size: 1em; }
#startArea .property .topArea .button { margin-left: auto; }
#startArea .property .topArea .button a {}
#startArea .property .topArea .button a span {}
#startArea .property ul { flex-direction: column; margin-top: 20px; }
#startArea .property ul li { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; width: 100%; padding: 20px 0 20px 20px; }
#startArea .property ul li:before { border-left: none; border-bottom: 1px solid #ccc; bottom: 0; top: inherit; left: 50%; transform: translateX(-50%); width: 100%; }
#startArea .property ul li:last-child:before { content: none; }
#startArea .property ul li:after { transform: rotate(90deg) translateX(-50%); right: inherit; top: inherit; left: 50%; bottom: -20px; }
#startArea .property ul li:last-child:after {}
#startArea .property ul li .image {}
#startArea .property ul li:nth-child(1) .image { width: 40px; }
#startArea .property ul li:nth-child(2) .image { width: 40px; }
#startArea .property ul li:nth-child(3) .image { width: 40px; }
#startArea .property ul li:nth-child(4) .image { width: 40px; }
#startArea .property ul li .image img {}
#startArea .property ul li:nth-child(1) .image img { width: 36px; height: 26px; }
#startArea .property ul li:nth-child(2) .image img { width: 21px; height: 28px; }
#startArea .property ul li:nth-child(3) .image img { width: 30px; height: 29px; }
#startArea .property ul li:nth-child(4) .image img { width: 35px; height: 23px; }
#startArea .property ul li .copy { margin-top: 0; line-height: 1.5; }
#startArea .property ul li .button { text-align: right; width: 100%; margin-top: 0; }
#startArea .property ul li .button a {}
#startArea .operation { margin-top: 40px; }
#startArea .operation .topArea { flex-direction: column; align-items: flex-start; gap: 10px; }
#startArea .operation .topArea .title { width: 100%; }
#startArea .operation .topArea .copy { font-size: 1em; }
#startArea .operation .topArea .button { margin-left: auto; }
#startArea .operation .topArea .button a {}
#startArea .operation .topArea .button s span {}
#startArea .operation ul { flex-direction: column; margin-top: 20px; }
#startArea .operation ul li { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; width: 100%; padding: 20px; }
#startArea .operation ul li:before { border-left: none; border-bottom: 1px solid #ccc; bottom: 0; top: inherit; left: 50%; transform: translateX(-50%); width: 100%; }
#startArea .operation ul li:last-child:before { content: none; }
#startArea .operation ul li:after { transform: rotate(90deg) translateX(-50%); right: inherit; top: inherit; left: 50%; bottom: -20px; }
#startArea .operation ul li:last-child:after {}
#startArea .operation ul li .image {}
#startArea .operation ul li:nth-child(1) .image { width: 40px; }
#startArea .operation ul li:nth-child(2) .image { width: 40px; }
#startArea .operation ul li:nth-child(3) .image { width: 40px; }
#startArea .operation ul li:nth-child(4) .image { width: 40px; }
#startArea .operation ul li .image img {}
#startArea .operation ul li:nth-child(1) .image img { width: 30px; height: 29px; }
#startArea .operation ul li:nth-child(2) .image img { width: 33px; height: 31px; }
#startArea .operation ul li:nth-child(3) .image img { width: 26px; height: 29px; }
#startArea .operation ul li:nth-child(4) .image img { width: 28px; height: 29px; }
#startArea .operation ul li .copy { margin-top: 0; line-height: 1.5; }

/*============================
#supportArea
============================*/
#supportArea { margin-top: 40px; }
#supportArea .sub {}
#supportArea .titleArea {}
#supportArea .titleArea h2.main {}
#supportArea .myhome { flex-direction: column; gap: 20px; margin-top: 0; padding: 20px 0; border-top: none; }
#supportArea .myhome .leftArea {}
#supportArea .myhome .leftArea .target {}
#supportArea .myhome .leftArea .copy { margin-top: 10px; font-size: 1em; line-height: 1.5; }
#supportArea .myhome .leftArea .buttonArea { gap: 10px; }
#supportArea .myhome .leftArea .buttonArea .button { width: 100%; }
#supportArea .myhome .leftArea .buttonArea .button a { white-space: nowrap; padding: 10px 30px 10px 20px; }
#supportArea .myhome .leftArea .buttonArea .button a span {}
#supportArea .myhome .image { display: flex; align-items: center; border-radius: 10px; width: 100%; height: 190px; }
#supportArea .myhome .image img {}
#supportArea .business { flex-direction: column; gap: 20px; margin: 0; padding: 20px 0; }
#supportArea .business .leftArea {}
#supportArea .business .leftArea .target {}
#supportArea .business .leftArea .copy { margin-top: 10px; font-size: 1em; line-height: 1.5; }
#supportArea .business .leftArea .buttonArea { flex-direction: column; gap: 10px; }
#supportArea .business .leftArea .buttonArea .button { width: 100%; }
#supportArea .business .leftArea .buttonArea .button a {}
#supportArea .business .leftArea .buttonArea .button a span {}
#supportArea .business .leftArea .buttonArea .button:nth-child(2) {}
#supportArea .business .leftArea .buttonArea .button:nth-child(2) a span {}
#supportArea .business .image { display: flex; align-items: center; border-radius: 10px; width: 100%; height: 190px; }
#supportArea .business .image img {}

/*============================
#communityArea
============================*/
#communityArea { margin-top: 30px; }
#communityArea .content { position: inherit; display: flex; flex-direction: column; gap: 20px; border-radius: 10px; padding: 20px 20px 0 20px; }
#communityArea .content .leftArea {}
#communityArea .content .leftArea .title { font-size:  1.5em; }
#communityArea .content .leftArea .copy { margin-top: 10px; line-height: 1.75; }
#communityArea .content .leftArea .button { text-align: center; margin-top: 15px; }
#communityArea .content .leftArea .button a { width: 80%; }
#communityArea .content .leftArea .button a:before {}
#communityArea .content .leftArea .button a:hover:before { right: 8px; }
#communityArea .content .image { position: inherit; right: inherit; width: 100%; height: auto; }
#communityArea .content .image img {}

/*============================
#faqArea
============================*/
#faqArea.faqArea { margin-top: 40px; }
#faqArea.faqArea .sub {}
#faqArea.faqArea .titleArea {}
#faqArea.faqArea .titleArea h2.main {}
#faqArea.faqArea .content { flex-direction: column; gap: 20px; margin-top: 30px; }
#faqArea.faqArea .content .faq { width: 100%; border-radius: 10px; padding-bottom: 20px; }
#faqArea.faqArea .content .faq a {}
#faqArea.faqArea .content .faq a .image {}
#faqArea.faqArea .content .faq a .image img { height: 100%; }
#faqArea.faqArea .content .faq a:hover .image img {}
#faqArea.faqArea .content .faq a .title { text-align: center; top: 113px; width: 100%; }
#faqArea.faqArea .content .faq a .copy { margin-top: 20px; }
#faqArea.faqArea .content .academy { width: 100%; border-radius: 10px; padding-bottom: 20px; }
#faqArea.faqArea .content .academy a {}
#faqArea.faqArea .content .academy a .image {}
#faqArea.faqArea .content .academy a .image img { height: 100%; }
#faqArea.faqArea .content .academy a:hover .image img {}
#faqArea.faqArea .content .academy a .title { text-align: center; top: 113px; width: 100%; }
#faqArea.faqArea .content .academy a .copy { margin-top: 20px; }


}