@charset 'utf-8';

/* Footer Base Styles */
footer { width: 100%; height: auto; background: #FFF; margin: 0; padding-bottom: 10px; overflow: hidden; }
.footer { width: 100%; display: block; }

/* Footer Menu */
.footerMenu { width: 100%; display: block; background: #FFF; border-bottom: 1px solid #000;  }
.footerMenuMain { width: 100%; padding: 0; display: flex; flex-wrap: wrap; }
.footerMenuMain li { width: 100%; border-top: 1px solid #ccc; overflow: hidden; }
.footerMenuMain li:last-child { border-bottom: 1px solid #ccc; }
.footerMenuMain li a { width: 100%; padding: 15px 5%; display: flex; position: relative; border-left: 4px solid transparent; color: #000; box-sizing: border-box; }
.footerMenuMain li a::before { content: ''; width: 6px; height: 6px; margin: -3px 0 0 0; position: absolute; top: 50%; right: 5%; border-top: 2px solid #338753; border-right: 2px solid #338753; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.footerMenuSub { width: 100%; padding: 0; display: flex; flex-wrap: wrap; border-bottom: 1px solid #ccc; }
.footerMenuSub a { width: 100%; padding: 15px 5%; display: flex; flex-wrap: wrap; position: relative; border-top: 1px solid #ccc; border-left: 4px solid transparent; }
.footerMenuSub a::before { content: ''; width: 6px; height: 6px; margin: -3px 0 0 0; position: absolute; top: 50%; right: 5%; border-top: 2px solid #338753; border-right: 2px solid #338753; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

/* Footer Logo */
.footerLogo { width: 100%; margin: 20px 0; padding: 0 5%; display: flex; align-items: center; }
.footerLogo img { width: 40px; margin-right: 10px; }
.footerLogoText { display: flex; flex-direction: column; font-size: 14px; line-height: 1.75em; color: #000; }
.footerLogoText strong { font-weight: bold; }
.mini_link { position: relative; margin-top: 8px; padding-right: 15px;}
.mini_link.sitemap_link { margin-left: 40px; }
.mini_link::before { content: ''; width: 6px; height: 6px; margin: -3px 0 0 0; position: absolute; top: 10.5px; right: 0; border-top: 1px solid #000; border-right: 1px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg);}

/* Footer Copyright */
.footerCopyright { width: 90%; margin: 0 auto; display: block; text-align: left; font-size: 14px; color: #FFF; }
@media screen and (max-width: 768px) {
    .footerCopyright { color:#000; }
}

/* Contact Contents */
.contact_contents { width: 90vw; margin: 0 5%; }
.call_number { line-height: 44px; }

/* Contact Wrapper */
.contact_wrap { padding: 50px 0 80px; background: #FFF; }
.contact_wrap .h_english { text-align: center; margin-bottom: 24px; }
.contact_wrap ul.contact_list { display: flex; flex-direction: column; gap: 40px; }
.contact_wrap ul.contact_list li a { display: flex; justify-content: center; align-items: center; gap: 20px; width: 100%; height: 130px; border: 2px solid #000; border-radius: 12px; white-space: nowrap; }
.contact_wrap ul.contact_list li .contact_icon { width: 40px; height: 40px; }
.contact_wrap ul.contact_list li .contact_text { text-align: center; }
.contact_wrap ul.contact_list li .contact_text .button_round { display: inline-block; width: fit-content; padding: 5px 18px 5px 10px; margin: 12px 0 0; text-align: center; background: #FFFF80; border-radius: 9999px; line-height: 40px; }
@media screen and (min-width: 768px) { 
    .contact_wrap ul.contact_list li .contact_text .button_round { position: relative; z-index: 0; }
    .contact_wrap ul.contact_list li .contact_text .button_round::after { content: ''; width: 100%; height: 100%; display: block; position: absolute; left: 0; bottom: 0; z-index: -1; border-radius: 9999px; background: #FFF; transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; }
    .contact_wrap ul.contact_list li:hover .contact_text .button_round::after { transform: scale(1, 1); }
    .call_number { line-height: 52px; font-size: 32px; }

}


/* Tablet Styles (1000px+) */
@media screen and (min-width: 768px) {
    .contact_wrap ul.contact_list { flex-direction: row; margin-top: 60px; }
    .contact_wrap ul.contact_list li { flex: 1; width: auto; background: #FFF;}
    .contact_wrap ul.contact_list li a { width: 100%; height: fit-content; padding: 0; justify-content: center; }
    .contact_wrap ul.contact_list li .contact_icon { width: 48px; height: 48px; }
    .contact_wrap ul.contact_list li a.call_number_wrap { pointer-events: none; }
    .contact_wrap ul.contact_list li:nth-child(1) .contact_text { padding: 36px 0; }
    .contact_wrap ul.contact_list li:nth-child(2) a .contact_text .button_round { transition: all 0s ease; border: 3px solid #FFFF80; line-height: 48px;  }
    .contact_wrap ul.contact_list li:nth-child(2) a:hover .contact_text .button_round { background: #FFFF80; color: #000;  }
    .contact_wrap ul.contact_list li:nth-child(2) .contact_text { padding: 36px 0; }
    .contact_wrap ul.contact_list li .contact_text .button_round { padding: 5px 18px 5px 10px; }
}

/* Desktop Styles (1080px+) */
@media screen and (min-width: 1080px) {
    footer { background: #338753; }
    .footer { width: 70vw; margin: 20px auto; display: flex; flex-direction: row-reverse; justify-content: space-between; }
    
    .footerMenu { width: 420px; margin: 16px 0; display: flex; flex-direction: column; background: transparent; border-bottom: none; }
    .footerMenuMain { justify-content: space-between; }
    .footerMenuMain li { width: 105px; display: block; border-top: none; }
    .footerMenuMain li:last-child { border-bottom: none; }
    .footerMenuMain li.menuRent { width: 210px; }
    .footerMenuMain li a { padding: 0 0 0 15px; border-left: none; font-size: 14px; }
    .footerMenuMain li a::before { left: 0; border-top: 2px solid #000; border-right: 2px solid #000; }
    .footerMenuMain li a::after { background: #FFFF80; }
    .footerMenuMain li a:hover { text-decoration: underline; }
    .footerMenuMain li a i { margin-left: 5px; }
    
    .footerMenuSub { margin: 10px 0 0 0; padding: 10px 0 0 0; border-top: 1px solid #ccc; border-bottom: none; }
    .footerMenuSub a { width: auto; padding: 0 0 0 15px; border-top: none; border-left: none; font-size: 14px; }
    .footerMenuSub a::before { left: 0; border-top: 2px solid #000; border-right: 2px solid #000; }
    .footerMenuSub a:hover { text-decoration: underline; }
    
    .footerLogo { width: auto; padding: 0; }
    .footerLogo img { width: 60px; }
    .footerLogoText { font-size: 16px; line-height: 1.75em; color: #FFF; }
    .footerCopyright { text-align: center; }
    .mini_link { padding-bottom: 4px; }
    .mini_link::before { position: absolute; top: 12.5px; border-top: 1px solid #FFF; border-right: 1px solid #FFF; transition: 0.3s; }
    .mini_link:hover:before {
        -webkit-transform: rotate(45deg); /* Safariや古いブラウザ用 */
        transform: rotate(45deg);         /* 標準ブラウザ用 */
        right: -12px;
      }
      
    

}