/*
Theme Name: MyTheme
Theme URI: https://lachichoken.com/
Author: Your Name
Author URI: https://example.com
Description: これはオリジナルのWordPressテーマです
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* A Modern CSS Reset */

*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* グローバル変数の定義（色の変数など） */
:root {
    --white: #fff;
    --red: #d71518;
    --blue: #17326c;
    --light_green: #d9ebdd;
    --green: #b0d2b8;
    --gray: #f1f1f1;
    --border_gray: #c1c3c4;
    --mark_red: #e60012;
    --noto: "Noto Sans JP", sans-serif;
}

*{
    margin: 0;
    padding: 0;
}
html { 
    font-size: 62.5%; 
}
body{
    font-size: 1.6rem; /*font-size : 16px と同等*/
    font-family: var(--noto);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 700;
    color: var(--blue);
    background-color: var(--white);
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: var(--blue);
}
.bg_blue{
    background-color: var(--blue);  
}
.bg_white{
    background-color: var(--white);  
}
.bg_green{
    background-color: var(--green);
}
.bg_light_green{
    background-color: var(--light_green);
}
.bg_gray{
    background-color: var(--gray);
}
.fz_36{
    font-size: 3.6rem;
}
.fz_24{
    font-size: 2.4rem;
}
.fz_12{
    font-size: 1.2rem;
}
.fw_400{
    font-weight: 400;
}

/* --------------------------------
    header
-------------------------------- */
/* header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
} */
.pc_header{
    width: 100%;
    height: 144px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: var(--white);
    padding: 36px 40px 40px;
}
.pc_header h1{
    margin: -12px 0 0 0;
}
.pc_menu{
    display: flex;
    align-items: center;
    width: 56%;
}
.pc_menu ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 52%;
    /* padding: 0 0 0 2em; */

    border-bottom: 1px solid var(--border_gray);
    margin: 0 0 0 2em;
    /* padding: 0.4em 0 0.8em; */
}
.pc_menu li{
    padding: 0.4em 0 0.8em;
}
.pc_menu li:hover{
    border-bottom: 4px solid var(--red);
}
.pc_header .contact_box{
    display: flex;
    align-items: center;
}
.contact_address{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 2em 0 0;
}
.contact_address .lachic_tell{
    display: flex;
    align-items: center;
    font-size: 3.2rem;
}
.contact_address .lachic_tell span{
    margin-right: 10px;
    margin: 6px 10px 0 0;
}
.sp_header{
    display: none;
}
.to_contact{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 64px;
}
.to_contact .gradient_btn {
    width: 300px;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 50px;
    background: linear-gradient(90deg, rgba(23, 50, 108, 1) 19%, rgba(215, 21, 24, 1));
    transition: all 0.8s;
    padding: 0 40px 0 50px;
    box-sizing: border-box;
}
.to_contact .gradient_btn p{
    color: #fff;
}
.to_contact:hover .gradient_btn{
    background: linear-gradient(90deg, rgba(215, 21, 24, 1) 19%, rgba(23, 50, 108, 1));
}
.h1_flex{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.h1_flex img{
    width: 50%;
}
.h1_flex span{
    font-size: 1.2rem;
    /* padding: 0 0 0 .5em; */
}
@media screen and (max-width:1400px) {
    .pc_header .pc_menu h1{
        width: 34%;
    }
    .pc_menu li {
        font-size: 1.4rem;
    }
    .contact_address {
        padding: 0;
    }
    .contact_address .lachic_tell {
        font-size: 1.8rem;
        max-width: 336px;
    }
}
/* hamburger_menu */
@media screen and (max-width:1200px) {
    .pc_header{
        display: none;
    }
    .sp_header{
        display: block;
    }
    .sp_header_flex{
        width: 100%;
        height: 82px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        background-color: var(--white);
    }
    .hamburger_btn{
        width: 50px;
        height: 38px;
        border-radius: 10px;
        background: linear-gradient(90deg, rgba(23, 50, 108, 1) 19%, rgba(215, 21, 24, 1));

        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        position: relative;
        padding: 4px 0 0;
    }
    .hamburger_btn .line{
        background-color: #fff;
        width: 32px;
        height: 1px;
        margin: 4px 0;
        transition: transform 0.3s, opacity 0.3s;
    }
    .hamburger_btn .menu_text{
        color: #fff;
        font-size: 9px;
        pointer-events: none; /* 文字をクリックできなくする */
    }
    .hamburger_btn.active .line:nth-child(1) {
        transform: rotate(25deg) translate(5px, 3px);
        background-color: #fff;
    }
    .hamburger_btn.active .line:nth-child(2) {
        transform: rotate(-25deg) translate(3px, -3px);
        background-color: #fff;
    }
    .hamburger_btn.active .menu_text::before {
        content: "閉じる";
        color: #fff;
    }
    .hamburger_btn .menu_text::before {
        content: "メニュー";
        color: #fff;
    }
    @keyframes fadeInMenu {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    .hamburger_menu{
        /* opacity: 0; */
        display: none;
    }
    .hamburger_menu.active{
        opacity: 1;
        background-color: rgba(255,255,255,0.9);
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        z-index: 500;
        justify-content: space-evenly;
    }
    .hamburger_menu ul{
        width: 100%;
        /* height: 80%; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 70%;
    }
    .hamburger_menu li{
        width: 100%;
        height: 15%;
        /* padding: 28px 46px 28px 50px; */
        border-top: 1px solid #c1c3c4;
        padding: 26px 46px 28px 50px;
    }
    .hamburger_menu li:last-child{
        border-bottom: 1px solid #c1c3c4;
    }
    .hamburger_menu li a{
        display: inline-block;
        width: 100%;
    }
    .contact_box.sp{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 0 40px;
    }
    .contact_address .lachic_tell {
        font-size: 2.8rem;
        max-width: 336px;
    }
    .contact_address {
        padding: 0 0 40px;
    }
}



/* --------------------------------
    footer
-------------------------------- */
.footer .bg_white{
    width: 100%;
}
.info_contents{
    display: flex;
    justify-content: center;
    padding: 44px;
    max-width: 1420px;
    height: 680px;
}
.info_address{
    width: 50%;
    background-color: #c0d9e8;
    border-radius: 12px 0 0 12px;
    display: flex;
    align-items: center;
}
.footer .item_box{
    margin: 0 auto;
}
.footer .contact_address{
    align-items: flex-start;
}
.info_txt p{
    line-height: 2;
}
.info_txt .fz_36{
    padding-bottom: 16px;
    padding: 0 0 16px;
    letter-spacing: 0.08em;
}
.info_txt .fz_24{
    letter-spacing: 0.08em;
}
.info_txt .fax{
    padding-bottom: 56px;
    padding: 0 0 56px;
}
.footer .to_contact {
    margin: 36px 0 0;
}
.footer .info_img{
    padding-top: 32px;
    padding: 32px 0 0;
}
.footer .gmap{
    width: 50%;
}
.footer .gmap iframe{
    width: 100%;
    height: 100%;
    border-radius: 0 12px 12px 0;
}

.footer_link{
    width: 100%;
    border-bottom: 1px solid var(--border_gray);
    padding: 40px 0;
}
.footer_link ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 382px;
    margin: 0 auto;
}
.footer_link a:hover{
    opacity: 0.6;
}

.footer .office_info{
    width: 100%;
}
.footer .office_info_contents{
    max-width: 1180px;
    margin: 0 auto;
    padding: 36px 0;
}
.footer .office_info_contents .item_box{
    display: flex;
    align-items: center;
    width: 100%;
    margin: 40px 0 0;
}
.footer .office{
    width: 30%;
    margin: 0 30px 0 0;
}

.footer .footer_img_box{
    width: 100%;
}
.footer .img_contents{
    max-width: 614px;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 46px 0 82px;
}

.footer_link.subcontents{
    border-bottom: none;
    border-top: 1px solid var(--border_gray);
}
.footer_link.subcontents li{
    font-size: 1.28rem;
}
.footer_copry{
    background-color: var(--blue);
    width: 100%;
    height: 92px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer_copry .copryright{
    color: var(--white);
}

#to_top_btn{
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 80;
}
.gradient_btn{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(23, 50, 108, 1) 19%, rgba(215, 21, 24, 1));
    display: flex;
    justify-content: center;
    align-items: center;
}
.gradient_btn:hover{
    background: linear-gradient(90deg, rgba(215, 21, 24, 1) 19%, rgba(23, 50, 108, 1));
}
.dli-chevron-up {
    display: inline-block;
    vertical-align: middle;
    color: var(--white);
    line-height: 1;
    width: 0.6em;
    height: 0.6em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(25%) rotate(-45deg);
}

@media screen and (max-width:768px) {
    .sp_header_flex h1{
        max-width: 288px;
    }
    .h1_flex span{
        font-size: 1rem;
        padding: 0 0 0 .5em;
    }
    .swiper-slide {
        height: 200px !important;
    }
    .swiper-wrapper {
        max-width: 200px;
    }
    .swiper-slide {
        width: 100% !important;
    }
    .swiper-slide img{
        height: 100%;
    }
    .under_link {
        padding: 0 20px;
    }
    .under_introduce {
        flex-direction: column;
        align-items: end;
        height: auto;
        padding: 50px 40px 50px 42px;
    }
    .info_contents{
        flex-direction: column;
    }
    .info_address{
        width: 100%;
        border-radius: 12px 12px 0 0;
        padding: 56px 28px 0;
    }
    .gmap{
        width: 100%;
    }
    .footer .gmap{
        width: 100%;
    }
    .footer .gmap iframe{
        width: 100%;
        height: 100%;
        border-radius: 0 0 12px 12px;
    }
    .footer .info_txt .fz_36{
        font-size: 2.8rem;
        padding: 0 0 20px;
    }
    .info_txt p{
        line-height: 1.6;
        letter-spacing: 0.058em;
    }
    .info_txt p span{
        display: inline-block;
        margin-right: 1em;
    }
    .info_txt .fax {
        padding: 0;
    }
    .footer .contact_address{
        padding: 30px 0 0;
    }
    .footer .to_contact {
        margin: 36px auto 40px;
        max-width: 334px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .footer .to_contact .gradient_btn{
        padding: 44px 40px 46px 50px;
    }
    /* .footer .office_info{
        padding: 18px 0;
    } */
    .footer .office_info_contents{
        max-width: 1180px;
        margin: 0 auto;
        padding: 36px 0;

        /* display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; */
        padding: 36px 18px 0;
    }
    .footer .office_info_contents .item_box{
        display: flex;
        align-items: center;
        width: 100%;
        margin: 40px 0 0;

        flex-direction: column;
    }
    .footer .office{
        width: 30%;
        margin: 0;

        width: 100%;
        margin: 0 0 16px;
    }
    .footer .office_info_contents .item_box .office_name{
        font-size: 2.4rem;
        line-height: 2;
        letter-spacing: 0.05em;
    }
    .footer .img_contents{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 42px 18px 82px;
    }
    .footer .img_contents .mark{
        width: 30%;
        padding: 16px;
    }
    /* .footer .img_contents .mark.item2{
        margin: 0 34px;
    } */

    .footer .item_box {
        max-width: 460px;
        width: 100%;
    }
    .contact_address .lachic_tell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 4.5rem;
        max-width: 336px;
        width: 100%;
    }
    .info_address {
        padding: 56px 26px 0 28px;
    }
}

@media screen and (max-width: 440px) {
    .footer{
        height: auto;
    }
    .footer .bg_white {
        height: auto;
    }
    .info_contents {
        padding: 44px 18px;
        height: auto;
    }
    .footer .item_box .fz_36{
        font-size: 2.6rem;
        letter-spacing: 0.058em;
        display: inline-block;
    }
    .footer .gmap {
        height: 324px;
    }
    .footer_link {
        padding: 40px 20px 40px 22px;
    }
    .footer_link.subcontents{
        padding: 40px 0;
    }
    .footer_link.subcontents ul {
        max-width: 300px;
    }
    .footer_copry .copryright {
        font-size: 1.2rem;
    }
    .footer .img_contents .mark {
        width: 30%;
        padding: 8px;
    }
}

@media screen and (max-width: 400px) {
    .footer .item_box .fz_36 {
        font-size: 2.4rem;
    }
    .info_address {
        padding: 56px 24px 0 24px;
    }
    .contact_address .lachic_tell {
        font-size: 3.8rem;
        padding: 0 24px 0 0;
    }
    .contact_address .lachic_tell span {
        margin: 6px 0px 0 0;
    }
    .contact_address .lachic_tell span img{
        margin-right: 0;
        width: 20px;
    }
    .footer_link a{
        font-size: 1.28rem;
    }
    .footer .img_contents {
        flex-wrap: wrap;
    }
    .footer .img_contents .mark {
        width: 25%;
        padding: 0;
        margin: 10px;
    }
}