@charset "UTF-8";

/***********************************************/
/* ブラウザの横スクロールが意図せず出てしまう場合の はみ出し検知*/
/*調査時だけ使用する */
/* * { outline: 1px solid magenta; } */
/***********************************************/

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: serif;
    /* font-family: "Georgia", serif; */
    font-style: normal;
    background-color: #f4f4f4;
    color: #111;
}

.pd-all {
    padding: 5% 10%;
}

@media screen and (max-width: 768px) {
    .pd-all {
        padding: 2% 5%;
    }
}


.back-black {
    background-color: #f4f4f4;;
}

.back-gray {
    background-color: #f4f4f4;
}

.mgn-top300 {
    margin-top: 200px;
}

.mgn-top50 {
    margin-top: 50px;
}

/*
********************************
共通パーツ｜見出し
********************************
*/
.sec-title {
    text-align: left;
    color: #111;
    font-family: "Georgia", serif;
}

 /*英字タイトルの最初の１文字目の色をゴールド系に変更*/
/* .sec-title h2:first-child:first-letter {
    color:rgba(204, 172, 105, 1);
} */

.sec-title h2:first-of-type {
    font-size: 90px;
    margin: 0;
    font-weight: bold;
    display: inline-block;
    border-bottom: 4px solid #111;
    line-height: 1;
    margin-bottom: 30px;
}

.sec-title--black h2:first-of-type {
    font-size: 90px;
    margin: 0;
    font-weight: bold;
    display: inline-block;
    border-bottom: 4px solid #f4f4f4;
    line-height: 1;
    margin-bottom: 30px;
}

.sec-title .title,
.sec-title--black .title {
    font-size: 12px;
    display: block;
    color: #111;
}

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

    .sec-title h2:first-of-type,
    .sec-title--black h2:first-of-type {
        font-size: 48px;
        margin-bottom: 20px;
    }

    .sec-title .title,
    .sec-title--black .title {
        font-size: 10px;
    }
}

/*
********************************
共通パーツ｜ボタン
********************************
*/

/* ボタン 白 */
.btn-w {
    display: inline-block;
    padding: 12px 35px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #111;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #111;
    box-sizing: border-box;
    overflow: hidden;
    margin: 10px;
}

.btn-w:hover {
    color: #111;
    background-color: #fff;
    transform: translateX(20px);
}

.btn-w::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent #fff transparent transparent;
    transition: all 0.3s ease;
    z-index: 0;
}

.btn-w:hover::after {
    border-color: transparent #111 transparent transparent;
}

/* ボタン 黒 */
.btn-b {
    display: inline-block;
    padding: 12px 35px;
    font-size: 14px;
    font-weight: bold;
    color: #111;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #111;
    box-sizing: border-box;
    overflow: hidden;
    margin: 10px;
}

.btn-b:hover {
    color: #fff;
    background-color: #111;
    transform: translateX(20px);
}

.btn-b::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent #111 transparent transparent;
    transition: all 0.3s ease;
    z-index: 0;
}

.btn-b:hover::after {
    border-color: transparent #fff transparent transparent;
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.more-text {
    text-align: center;
    margin-top: 100px;
}

.more-text span {
    display: inline-block;
    margin-right: 10px;
}

@media screen and (max-width: 768px) {
    .more-text {
        margin-top: 20px;
    }

    .more-text span {
        margin-right: 0;
    }
}

.more-text a {
    color: #111;
    background-color: #fff;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.more-text a:hover {
    color: #fff;
    background-color: #111;
    text-decoration: none;
    transform: translateX(10px);
}

.more-text-b {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.more-text-b span {
    display: inline-block;
    margin-right: 10px;
}

.more-text-b a {
    color: #fff;
    background-color: #111;
    text-decoration: none;
    display: inline-block;
    padding: 5px 10px;
    transition: all 0.3s ease;
}

.more-text-b a:hover {
    color: #111;
    background-color: #fff;
    text-decoration: none;
    transform: translateX(10px);
}

.bus-description .more-text-b {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.bus-description .more-text-b:hover {
    transform: translateX(10px);
    color: #111;
    background-color: #fff;
}

/*
********************************
ヘッダー｜header.php
********************************
*/

.pd-side {
    padding: 30px;
}

header.pc.tab {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 768px) {
    header.pc.tab {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }
}

.logo {
    position: relative;
    width: 200px;
    height: 150px;
    display: inline-block;
    overflow: hidden;
}

.logo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.5s ease;
}

.logo img.default-image {
    opacity: 1;
    z-index: 1;
}

.logo img.hover-image {
    opacity: 0;
    z-index: 2;
}

.logo:hover img.default-image {
    opacity: 0;
}

.logo:hover img.hover-image {
    opacity: 1;
}

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

    .logo {
        height: 50px;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .logo img {
        height: 100%;
        width: auto;
        object-fit: contain;
        margin: 0;
        padding: 0;
        display: block;
    }
}

.header-menu {
    font-family: "Georgia", serif;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.h-menu {
    /* font-family: "Georgia", serif; */
    color: #111;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: flex-start;
}

@media screen and (max-width: 768px) {
    .h-menu {
        display: none;
    }
}

.h-menu-item {
    font-size: 16px;
    margin: 0;
    position: relative;
    text-align: left;
}

.h-menu-items p a {
    color: #111;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.h-menu-items p a:hover {
    color: #fff;
    background-color: #111;
    transform: translateX(10px);
}

.h-item1 {
    margin-left: 0;
}

.h-item2 {
    margin-left: 20px;
}

.h-item3 {
    margin-left: 40px;
}

.h-item4 {
    margin-left: 60px;
}

.h-item5 {
    margin-left: 80px;
}

.h-item6 {
    margin-left: 100px;
}


.h-menu-button {
    color: #111;
    font-size: 30px;
    font-weight: bold;
    display: inline-block;
    margin-left: 50px;
    cursor: pointer;
    transition: border-bottom 0.3s ease;
    border-bottom: 2px solid transparent;
}

.h-menu-button:hover {
    border-bottom: 2px solid #111;
}

@media screen and (max-width: 768px) {
    .h-menu-button {
        font-size: 16px;
        margin-left: 0;
        padding: 0;
        text-align: right;
        width: auto;
        position: relative;
        justify-content: flex-end;
        align-items: flex-start;
        border-bottom: 2px solid #111;
    }
}

.side-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: #f4f4f4;
    color: #111;
    padding: 20px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 1000;
}

.side-menu.show {
    right: 0;
}

.side-menu-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 18px;
}

.side-menu-item a {
    color: #111;
    text-decoration: none;
    margin-right: 8px;
}

.side-menu-item a:hover {
    text-decoration: underline;
}

.side-menu-item .subtitle {
    font-size: 12px;
    color: #888;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 900;
}

.overlay.show {
    display: block;
}

.close-button {
    font-size: 18px;
    color: #111;
    cursor: pointer;
    text-align: right;
    margin-bottom: 20px;
}

/* ヘッダー　ここまで */

/*
********************************
フロントページ｜front-page.php
********************************
*/

body {
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    /* font-family: "Georgia", serif; */
    /* overflow: hidden; */
    overflow-x: hidden;
    width: 100%;
    color: #111;
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.logo-animation {
    width: 150px;
    height: auto;
    animation: zoomFade 2s forwards;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    #loading {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .logo-animation {
        width: 100px;
        height: auto;
        margin: 0 auto;
    }
}

@keyframes zoomFade {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.hidden {
    display: none;
    opacity: 0;
}

.fade-in {
    animation: fadeIn 0.5s forwards;
}

/* ファーストビュー */
.firstview {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    background-color: #f4f4f4;
}

/* .firstview::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background: #f0ce84;
    background: linear-gradient(146deg,rgba(255, 255, 255, 1) 0%, rgba(240, 206, 132, 1) 100%);
}

.firstview::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:5px;
    background: #f0ce84;
    background: linear-gradient(146deg,rgba(240, 206, 132, 1) 0%, rgba(255, 255, 255, 1) 100%);
} */


.first-content {
    width: 100%;
}

.first-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* レオとは */
.LEO-IS {
    background-color: #f4f4f4;
    color: #111;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.LEO-IS::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.LEO-IS .sec-title {
    text-align: left;
    flex: 1;
    padding-right: 20px;
}

.LEO-IS .content-right {
    flex: 1;
    text-align: left;
    margin: 500px 0 0 100px;
}

.content-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.LEO-IS p {
    margin: 20px 0;
    font-size: 14px;
    line-height: 2;
}

@media screen and (max-width: 768px) {
    .LEO-IS {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .LEO-IS::before {
        background-size: 50%;
        background-position: top center;
    }

    .LEO-IS .sec-title,
    .LEO-IS .content-right {
        flex: none;
        width: 100%;
        margin: 0;
        padding: 10px 0;
    }

    .LEO-IS .content-right {
        margin-top: 20px;
        gap: 0;
    }
}

.LEOLEX {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

.LEOLEX .leolex-img {
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.LEOLEX .leolex-img {
    flex-shrink: 0;
    max-width: 50%;
    overflow: hidden;
    /* padding-left: 20px; */
    background-color: #fff;
}

.LEOLEX .leolex-img img {
    width: 100%;
    height: auto;
    display: block;
} 

@media (max-width: 768px) {
    .LEOLEX{
        padding: 70px 0;
    }
    .LEOLEX .leolex-img {
        width: 70%;
        margin: 0 auto;
        display: block;
        /* overflow: hidden; */
    }

    .LEOLEX .leolex-img img{
        width:120%;
    }
}



.LEOLEX .scroll-wrapper {
    display: flex;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    overflow: hidden;
    width: 100%;
    align-items: center;
    z-index: 2;
    white-space: nowrap;
}

.LEOLEX .scroll-text {
    display: flex;
    font-size: 150px;
    color: rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: flowing 20s linear infinite;
}

@keyframes flowing {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/*重複しているCSS*/
/* .leolex-img {
    flex-shrink: 0;
    max-width: 50%;
    padding-left: 20px;
    background-color: #fff;
}

.leolex-img img {
    width: 100%;
    height: auto;
    display: block;
} 
.leolex-img {
    flex-shrink: 0;
    max-width: 50%;
    padding-left: 20px;
}

.leolex-img img {
    width: 600px;
    height: auto;
    display: block;
} 

@media screen and (max-width: 768px) {
     .leolex-img {
        max-width: 100%;
        padding-left: 0;
    }
}
    
*/


/* 会社概要 */
.COMPANY {
    background-color: #f4f4f4;
    color: #111;
    text-align: center;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.COMPANY .sec-title {
    text-align: left;
    flex: 1;
    padding-right: 20px;
}

.COMPANY .content-right {
    text-align: left;
    padding: 20px;
    font-size: 16px;
    line-height: 1.6;
    color: #111;
}

.COMPANY p {
    margin: 20px;
    font-size: 14px;
    line-height: 2;
}

@media screen and (max-width: 768px) {
    .COMPANY {
        display: flex;
        flex-direction: column;
        padding:0 20px 0 20px;
        align-items: flex-start;
    }

    .COMPANY .sec-title,
    .COMPANY .content-right {
        flex: none;
        width: 100%;
        margin: 0;
        padding: 10px 0;
    }
}

.company-img {
    padding: 0 0;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background-color: #f4f4f4;
}

.company-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .company-img {
        height: auto;
    }

    .company-img img {
        height: auto;
        object-fit: contain;
    }
}

/* 代表取締役ご挨拶 */
 @media screen and (max-width: 768px) {
    .COMPANY.MESSAGE{
        padding:70px 20px 20px 20px;
    }
}

/* エントリー */
.ENTRY {
    position: relative;
    overflow: hidden;
    background-color: #f4f4f4;
}

.ENTRY p {
    font-size: 24px;
    margin: 10px 0;
}

.entry-img {
    width: 70%;
    padding: 5% 5% 0 5%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.entry-img img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width: 768px) {
    .entry-img {
        width: 100%;
        max-width: 100%;
        margin: 50px auto;
        padding: 0;
    }
}

.ENTRY {
    position: relative;
    overflow: hidden;
}

/* 事業内容 */
.BUSINESS {
    background-color: #f4f4f4;
    color: #111;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .BUSINESS{
        padding:70px 20px 20px 20px;
    }
}

.BUSINESS p {
    font-size: 18px;
    line-height: 1.8;
}

.bus-description {
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    padding: 30px 5%;
    color: #111;
}

.bus-description::before,
.bus-description::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #111;
}

.bus-description::before {
    top: 0;
}

.bus-description::after {
    bottom: 0;
}

.bus-cards {
    display: flex;
    justify-content: flex-start;
    overflow-x: scroll;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

.bus-card {
    background-color: #f4f4f4;
    border-right: 1px solid #111;
    width: 400px;
    text-align: left;
    color: #111;
    flex-shrink: 0;
    position: relative;
    padding: 50px;
}

.bus-cards::-webkit-scrollbar {
    display: none;
}

.bus-card:first-child {
    border-left: 1px solid #111;
}

.bus-card img {
    width: 100%;
    height: auto;
}

.bus-card h3 {
    font-size: 30px;
    margin: 10px 0 5px;
    font-weight: bold;
    border-bottom: 2px solid #111;
}

.bus-card p {
    font-size: 14px;
    margin: 0;
    padding: 5px 0;
}

.more-link {
    text-align: right;
}

/* お問い合わせ */
.CONTACT {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f4f4f4;
    color: #111;
    overflow: hidden;
}

.contact-content {
    /* max-width: 50%; */
    text-align: left;
    /* padding: 0; */
    /* padding:20px; */
}

.contact-content .sec-title {
    margin-bottom: 20px;
}

.contact-content p {
    font-size: 16px;
    line-height: 1.8;
    margin: 100px 0;
    color: #111;
}

.member-img {
    /* flex-shrink: 0; */
    width:100%;
    max-width:500px;
    /* max-width: 50%; */
    padding:100px 0 ;
}

.member-img img {
    width:100%;
    /* max-width:500px; */
    /* width: 500px; */
    height: auto;
    display: block;
}

@media screen and (max-width: 768px) {
    .CONTACT {
        flex-direction: column;
        align-items: center;
        padding:70px 20px 20px 20px;
    }

    .contact-content{
        max-width: 100%;
        padding: 20px 0 ;
        margin-bottom: 20px;
    }


    .contact-content p {
        margin: 20px 0;
    }

    .member-img{
        max-width:100%;
        padding:0 0 0 0;
        /* margin-right:auto; */
    }
    .member-img img{
        width:100%;
    }

    /* .member-img img {
    left:-200px;
    width: calc(100% + 200px);
    } */

}




/* 社員ブログ */


.blog {
    display: flex;
    align-items: flex-start;
    background-color: #f4f4f4;
    color: #111;
}

.blog-sidebar {
    flex: 1;
    padding-right: 20px;
    text-align: left;
    color: #111;
}

.blog-description {
    font-size: 14px;
    margin: 50px 0;
    line-height: 1.6;
    color: #111;
}

.blog-categories {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    align-items: flex-start;
}

.category-link {
    display: inline-block;
    font-size: 14px;
    background-color: #f4f4f4;;
    color: #111;
    padding: 5px 10px;
    border: 1px solid #000;
    cursor: pointer;
    text-align: center;
    width: auto;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.category-link:hover {
    transform: translateX(10px);
}

.blog-list {
    flex: 1;
    padding: 20px;
}

.blog-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
    border-top: 1px solid #111;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.blog-item-link:last-child {
    border-bottom: 1px solid #111;
}

.blog-item-link:hover {
    transform: translateX(20px);
    /* background-color: #111; */
    color: #f4f4f4;;
}

.blog-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding: 10px;
    transition: background-color 0.3s, color 0.3s;
    color: #111;
}

.blog-item img {
    width: auto;
    height: 80px;
    margin-right: 10px;
}

.blog-content {
    text-align: left;
    flex-grow: 1;
    height: 80px;
    overflow: hidden;
    position: relative;
    color: #111;
}

.blog-date {
    font-size: 12px;
    color: #888;
    margin-bottom: 2px;
}

.blog-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 3px;
    color: #111;
}

.blog-excerpt {
    font-size: 12px;
    margin-top: 10px;
    line-height: 1.2;
    max-height: 3.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #111;
}

@media screen and (max-width: 768px) {
    .blog {
        flex-direction: column;
        align-items: center;
        padding:70px 20px 20px 20px;
    }

    .blog-sidebar,
    .blog-list {
        flex: none;
        width: 100%;
        padding: 10px 0;
        text-align: center;
    }

    .blog-categories {
        align-items: center;
    }

    .blog-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .blog-item img {
        margin-bottom: 10px;
        margin-right: 0;
    }

    .blog-description {
        text-align: left;
        margin: 20px 0;
    }
}

/* フロントページ　ここまで */

/*
********************************
事業内容｜page-business.php
********************************
*/

.slider-wrapper {
    background-color: #f4f4f4;;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    color: #111;
}

.slider {
    position: relative;
    width: auto;
    height: 400px;
    overflow: hidden;
    background-color: #f4f4f4;;
    display: flex;
}

@media (max-width: 768px) {
    .slider {
        height: 200px;
    }
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;;
}

.slide {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.slide img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.slider-caption {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #111;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px;
    z-index: 100;
}

.slider-caption h2 {
    font-size: 30px;
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 2px solid #111;
}

.slider-caption p {
    font-size: 12px;
}

.slider-text {
    text-align: center;
    margin: 50px auto;
    max-width: 600px;
    font-size: 14px;
    line-height: 1.6;
    min-height: 80px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    color: #111;
    background-color: #fff;
}

.slider-text.hide {
    opacity: 0;
    transform: translateY(10px);
}

.slider-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.slider-controls button {
    border:1px solid #111;
    background-color: #1f1f1f;
    color: #fff;
    /* border: none; */
    padding: 10px;
    cursor: pointer;
    pointer-events: all;
    font-size: 24px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

@media (min-width: 769px) {
    /*PC向け*/
    .slider-controls button:hover{
    color:#111;
    background: /*#f0ce84*/ rgba(204, 172, 105, 1) ;
    /* background: linear-gradient(146deg,rgba(240, 206, 132, 1) 0%, rgba(204, 172, 105, 1) 100%); */
}
}


@media (max-width: 768px) {
    /*SP向け*/
    .slider-controls {
        position: absolute;
        /* top: 60%; */
        top:90%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .slider-controls button {
        border: none;
        background: /*#f0ce84*/ rgba(204, 172, 105, 0.7) ;
        font-size: 18px;
        width: 40px;
        height: 40px;
        padding: 5px;
    }
}

/* 事業内容　ここまで */


/*
********************************
会社概要｜page-company.php
********************************
*/

.company-overview-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 50px;
    color: #111;
}

.company-info-container {
    max-width: 900px;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); */
}

.company-info-row {
    display: flex;
    padding: 15px 0;
}

.company-info-title {
    width: 25%;
    font-weight: bold;
    /* color: #fff; */
    /* background-color: #111; */
    border-top: 1px solid #111;
    background: #f0ce84;
    background: linear-gradient(146deg,rgba(240, 206, 132, 1) 0%, rgba(204, 172, 105, 1) 100%);
    padding: 15px;
    text-align: left;
}

.company-info-content {
    width: 75%;
    padding: 15px;
    /* border-left: 3px solid #111; */
    position: relative;
    border-top: 1px solid #111;
}

.company-info-content p {
    margin: 0;
    padding: 5px 0;
}

.access-container {
    max-width: 900px;
    margin: 20px auto;
    margin-bottom: 100px;
    background-color: #fff;
    padding: 20px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); */
}

.access-title {
    font-weight: bold;
    /* color: #fff; */
    /* background-color: #111; */
    border-top: 1px solid #111;
    background: #f0ce84;
    background: linear-gradient(146deg,rgba(240, 206, 132, 1) 0%, rgba(204, 172, 105, 1) 100%);
    padding: 15px;
    text-align: center;
    margin-bottom: 10px;
}

.access-map {
    width: 100%;
    height: 300px;
    border: 1px solid #111;
    margin-bottom: 20px;
}

/* 会社概要　ここまで */

/*
********************************
福利厚生｜page-benefit.php
********************************
*/

.hero-container {
    position: relative;
    width: 100%;
    height: 1000px;
    background-color: #f4f4f4;
    margin-top: 200px;
}

.hero-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/leo-benefit-top.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px;
    z-index: 1;
}

.left-text {
    position: absolute;
    top: -20%;
    left: 10%;
    max-width: 40%;
    color: #111;
    font-size: 60px;
    line-height: 1.5;
    z-index: 2;
}

.right-text-container {
    position: absolute;
    top: 20%;
    right: 15%;
    transform: translateY(-50%);
    max-width: 35%;
    z-index: 3;
}

.right-text-container p {
    /* margin: 10px; */
    margin-bottom: 30px;
    color: #111;
    font-size: 14px;
    line-height: 1.6;
}

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

    .hero-container {
        position: relative;
        width: 100%;
        height: auto;
        background-color: #fff;
        margin-top: 20px;
    }

    .hero-section {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 20px;
        height: auto;
    }

    .left-text {
        position: relative;
        top: 0;
        left: 0;
        max-width: 100%;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
    }

    .right-text-container {
        position: relative;
        top: 0;
        right: 0;
        transform: none;
        max-width: 100%;
        text-align: left;
        margin-top: 0;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 10px;
    }

    .right-text-container p {
        margin: 20px 0;
        font-size: 14px;
        line-height: 1.8;
    }
}

.cta-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #111;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
}

.white-text {
    color: #111;
}

.black-text {
    color: #111;
}

/* @media screen and (max-width: 768px) {
    .black-text {
        color: #111;
    }
} */

.benefit-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 20px;
}

.benefit-container {
    /* width: 800px; */
    width: 70%;
    max-width: 100%;
    margin: 40px auto;
    position: relative;
}

.benefit-box-L,
.benefit-box-R {
    background-color: #fff;
    padding: 20px;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */
    color: #111;
    width: 500px;
    height: auto;
    z-index: 2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.benefit-box-L {
    left: -100px;
}

.benefit-box-R {
    right: -100px;
}

.benefit-box-L,
.benefit-box-R h3 {
    font-size: 24px;
    /* font-weight: bold; */
    /* position: relative; */
}

.benefit-line {
    border: none;
    border-bottom: 2px solid #111;
    margin: 10px 0;
}

.benefit-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.benefit-list-item {
    /* background-color: #111;
    color: #fff; */
    background: #f0ce84;
    background: linear-gradient(146deg,rgba(240, 206, 132, 1) 0%, rgba(204, 172, 105, 1) 100%);
    color: #111;
    padding: 5px 10px;
    font-size: 16px;
    cursor: default;
    transition: all 0.3s ease;
}

/* .benefit-list-item:hover {
    background-color: #fff;
    background: #f0ce84;
    background: linear-gradient(146deg,rgba(240, 206, 132, 1) 0%, rgba(204, 172, 105, 1) 100%);
    color: #111;
} */

@media screen and (max-width: 768px) {
    .benefit-container {
        width: calc(100% - 40px);
        margin: 20px auto;
    }

    .benefit-box-L,
    .benefit-box-R {
        position: relative;
        width: 100%;
        /* margin-bottom: 20px; */
        padding: 20px;
        left: 0;
        right: 0;
        top: 0;
        transform: none;
    }
}


.more-link {
    margin-top: 10px;
  color: #111;
  text-decoration: none;
  font-size: 14px;
  display: inline-block;
  transition: all 0.3s ease;
}

.more-link:hover {
  /* color: #fff; */
  transform: translateX(10px);
  text-decoration: none;
}

.image-container {
    position: relative;
    height: 400px;
    /* margin-top: 20px; */
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .image-container {
        height: 150px;
        /* width: calc(100% - 40px);
        margin: 20px auto; */
    }

    .image-container img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* 福利厚生　ここまで */

/*
********************************
お問合せ｜page-contact.php
********************************
*/

/* .form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    color: #111;
}

.form-group {
    margin: 50px 0;
    font-size: 14px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 16px;
}

textarea {
    height: 100px;
    resize: none;
}

.required {
    color: #fff;
    background-color: #c00;
    padding: 2px 5px;
    font-size: 12px;
    margin-left: 5px;
}

.privacy-container {
    background-color: #f4f4f4;
    padding: 20px;
    margin-top: 20px;
    color: #333;
    font-size: 12px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
}

.checkbox-container input[type="checkbox"] {
    margin-right: 10px;
}

.error-message {
    color: #f00;
    text-align: center;
    margin-bottom: 10px;
    font-size: 14px;
} */

/* お問合せ　ここまで */


/*
********************************
お問合せ｜page-contact.php
エントリー｜page-entry.php
********************************
*/

.wpcf7-spinner {
    display: none;
}

/* フォームのdt要素とdd要素にマージンを追加 */
.form-container dl dt,
.form-container dl dd {
    margin-bottom: 20px;
}

.form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    color: #111;
}

.form-container > p{
    margin:0 0 0.5em 0;
}

.form-group {
    margin: 50px 0;
    font-size: 14px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="file"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 16px;
}

textarea {
    height: 100px;
    resize: none;
}

.required {
    color: #fff;
    background-color: #c00;
    padding: 2px 5px;
    font-size: 12px;
    margin-left: 5px;
}

.privacy-container {
    background-color: #f4f4f4;
    padding: 20px;
    margin-top: 20px;
    color: #1f1f1f;
    font-size: 12px;
    line-height:1.6em;
}

.privacy-container h5{
    padding:0 0 0.5em 0;
    font-size:1.4em;
}

.privacy-container h6{
    padding:0.7em 0;
    font-size:1.2em;
}


.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
}

.checkbox-container input[type="checkbox"] {
    margin-right: 10px;
}

.file-drop-area {
    position: relative;
    width: 100%;
    padding: 40px;
    border: 2px dashed #999;
    border-radius: 10px;
    text-align: center;
    background-color: #fff;
    color: #111;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 18px;
    cursor: pointer;
}

.file-drop-area input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.file-drop-message {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.file-count {
    text-align: right;
    font-size: 12px;
    color: #fff;
}

/* ラジオボタンとフォームフィールドのスタイル調整 */
.form-control input[type="radio"] {
    margin-right: 5px;
}

.form-control label {
    cursor: pointer;
    margin-right: 15px;
    font-size: 14px;
    color: #fff;
}

.error-message {
    color: #f00;
    text-align: center;
    margin-bottom: 10px;
    font-size: 14px;
}

/* お問い合わせ　エントリー　ここまで */

/*
********************************
採用情報｜page-recruit.php
********************************
*/
.recruit-img {
    padding: 0 0;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.recruit-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    .recruit-img {
        height: 150px;
    }
}

/* .onimg {
    position: relative;
    top: -120px;
} */

.recruit-content {
    display: none;
    font-size: 16px;
    max-width: 800px;
    margin: 50px auto;
    background-color: #fff;
    padding: 50px;
    color: #111;
}

.recruit-content ul {
    padding-left: 20px;
    margin-bottom: 20px;
}


@media screen and (max-width: 768px) {
    .recruit-content {
        padding: 10px;
    }

    .recruit-content ul {
        padding-left: 10px;
        margin-bottom: 10px;
    }

    #accordion-content p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

}

.accordion-header {
    background-color: #fff;
    padding: 20px 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #111;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.accordion-header h1 {
    margin: 0;
    /* font-size: 28px; */
    font-size: 40px;
    color: #111;
}

.accordion-header p {
    /* margin: 0; */
    margin-top: 15px;
    font-size: 18px;
    color: #111;
}

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

    .accordion-header {
        display: block;
        padding: 20px 10px;
        text-align: left;
    }

    .accordion-header h1 {
        font-size: 24px;
    }

    .accordion-header p {
        font-size: 12px;
        margin-top: 10px;
    }
}

.accordion-header:hover {
    background-color: #111;
    color: #fff;
    border-top: 1px solid #fff;
}

.accordion-header:hover h1,
.accordion-header:hover p {
    color: #fff;
}

.recruit-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    table-layout: auto;
}

.recruit-content th {
    width: calc(30% - 10px);
    padding: 8px 10px;
    text-align: left;
    word-wrap: break-word;
}

.recruit-content td {
    width: calc(70% - 10px);
    padding: 8px 10px;
    text-align: left;
    word-wrap: break-word;
}

.recruit-content hr {
    border: none;
    border-top: 1px solid #111;
    margin: 20px 0;
}

/* 採用情報　ここまで */

/*
********************************
社員ブログ｜shingle.php
********************************
*/

.blog-container {
    display: flex;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    gap: 20px;
}

.blog-main {
    flex: 3;
    background-color: #f4f4f4;
    color: #111;
    padding: 30px;
    margin-bottom: 40px;
    max-width: 100%;
}

@media (max-width: 768px) {
    .blog-main {
        padding: 20px;
    }
}

.blog-article img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 20px;
}

.blog-article h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333;
}

.blog-article p {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 15px;
}

.blog-article hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 20px 0;
}

.article-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.article-navigation a {
    background-color: #fff;
    color: #111;
    padding: 10px 20px;
    text-decoration: none;
    flex: 1;
    text-align: center;
    margin: 0 5px;
    border: 1px solid #111;
    transition: background-color 0.3s, color 0.3s;
    width: 350px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-navigation a:hover {
    background-color: #111;
    color: #fff;
}

@media (max-width: 768px) {
    .article-navigation {
        flex-direction: column;
        margin-top: 20px;
    }

    .article-navigation a {
        width: 100%;
        margin: 5px 0;
        padding: 10px;
    }
}

/* ブログサイドバー */
.sidebar {
    flex: 1;
    margin: 0;
    padding: 0;
    margin-top: 10px;
    width: 300px;
    height: 750px;
    background-color: #f4f4f4;
    padding: 20px;
    color: #111;
}

.sidebar ul li a p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.post-title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.sidebar h3 {
    font-size: 14px;
    margin-bottom: 15px;
    color: #111;
}

.sidebar h4 {
    background-color: #f4f4f4;
    font-size: 16px;
    margin-bottom: 15px;
    padding: 4px;
    color: #111;
}

.sidebar ul {
    list-style: none;
    padding: 0 0 20px 20px;
    margin: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    color: #111;
    text-decoration: none;
    font-size: 14px;
}

/* 月別アーカイブ専用スタイル */
.sidebar form select {
    color: #000;
    background-color: #fff; 
    border: 1px solid #ccc;
}
.sidebar form select option {
    color: #000;
}

@media (max-width: 768px) {

    .sidebar {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }

    .sidebar h3 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .sidebar h4 {
        /* background-color: #111; */
        font-size: 12px;
        margin-bottom: 10px;
        /* padding: 4px;
        color: #fff; */
    }

    .sidebar ul li a {
        /* color: #1f1f1f;
        text-decoration: none; */
        font-size: 12px;
    }
}

.archive-main::after {
    content: "";
    display: table;
    clear: both;
}

.pagination {
    display: flex;
    justify-content: center;
    margin: 50px auto;
    width: 100%;
    clear: both;
}

.pagination ul {
    display: flex;
    padding: 0;
    margin: 0;
}

.pagination li {
    margin: 0 5px;
}

.pagination a {
    color: #111;
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #111;
}

.pagination a:hover {
    background-color: #111;
    color: #fff;
}

.pagination .current {
    background-color: #111;
    color: #fff;
    padding: 5px 10px;
    border: 1px solid #111;
}

@media (max-width: 768px) {

    .blog-container {
        flex-direction: column;
    }

    .archive-main {
        display: block;
        width: 100%;
    }

    .archive-main .archive-card {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .pagination {
        flex-direction: column;
        margin: 30px auto;
    }
}

/* 社員ブログ　ここまで */

/*
********************************
ブログ｜アーカイブページ｜archive.php
********************************
*/

.archive-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    gap: 20px;
}

@media (max-width: 768px) {

    .archive-container {
        display: block;
        margin: 0 auto;
    }
}

.archive-title-container {
    width: 100%;
    /* padding: 20px 0; */
    text-align: left;
    /* margin-bottom: 20px; */
    clear: both;/
}

.archive-title {
    font-size: 20px;
    font-weight: bold;
    color: #111;
}

.archive-main {
    flex: 3;
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .archive-main {
        display: block;
        width: 100%;
    }
}

.archive-card {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
    margin: 10px;
    max-height: fit-content;
    background-color: #fff;
    color: #111;
    overflow: hidden;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

@media (max-width: 768px) {
    .archive-card {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 10px 0;
    }
}

.archive-card-link:hover .archive-card {
    background-color: #f0f0f0;
    transform: scale(1.05);
}

.archive-card img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

.archive-card-content {
    padding: 15px;
}

.archive-card-content h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #111;
    /* background-color: #f4f4f4;
    padding: 3px 10px; */
}

.archive-card-content p {
    margin: 0 0 10px;
    font-size: 14px;
    /* color: #666; */
}

.archive-underline {
    border-bottom: 2px solid #111;
    padding-bottom: 5px;
    display: block;
    margin-bottom: 10px;
    width: 100%;
}

/*
********************************
フッター｜footer.php
********************************
*/

.footer {
    margin-top:5em;
    background-color: #f4f4f4;
    color: #111;
    text-align: center;
    position: relative;
    /* padding: 30px 0; */
}

.footer-img {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    background-color: #f4f4f4;
}

.footer-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.footer-menu {
    font-family: "Georgia", serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    padding: 0 15%;
    position: relative;
    overflow: hidden;
}

.f-menu-item {
    font-family: "Georgia", serif;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 1000px;
    padding: 10px 0;
    position: relative;
    margin: 0 auto;
    transition: background-color 0.3s, color 0.3s, transform 0.5s;
    z-index: 1;
    text-align: left;
}

.f-menu-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    width: 100%;
    transition: all 0.3s ease;
}

.f-menu-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 200vw;
    height: 1px;
    background-color: #111;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: -1;
}

.f-item1 {
    transform: translateX(0);
}

.f-item2 {
    transform: translateX(50px);
}

.f-item3 {
    transform: translateX(100px);
}

.f-item4 {
    transform: translateX(150px);
}

.f-item5 {
    transform: translateX(200px);
}

.f-item6 {
    transform: translateX(250px);
}

@media screen and (min-width: 769px) {
    /* PC向けスタイル */

    .f-menu-item:hover{
        color: #cdad6a;
    }

    .f-menu-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 200vw;
        height: 100%;
        background-color: transparent;
        transform: translateX(-50%);
        z-index: -1;
        transition: background-color 0.3s;
        transition: all 0.3s ease;
    }

    .f-menu-item:hover::before {
        /* background-color: #111; */
        color:#111;
        background-color:rgba(255,255,255,0.8);
    }


    /* 各メニュー項目のホバー時の位置調整 */
    .f-item1:hover {
        transform: translateX(30px);
        /* 0 + 30 */
    }

    .f-item2:hover {
        transform: translateX(80px);
        /* 50 + 30 */
    }

    .f-item3:hover {
        transform: translateX(130px);
        /* 100 + 30 */
    }

    .f-item4:hover {
        transform: translateX(180px);
        /* 150 + 30 */
    }

    .f-item5:hover {
        transform: translateX(230px);
        /* 200 + 30 */
    }

    .f-item6:hover {
        transform: translateX(280px);
        /* 250 + 30 */
    }

}

@media screen and (max-width: 768px) {
    /* SP向けスタイル */

    .footer-img {
        height: auto;
    }

    .footer-img img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .footer-logo img {
        margin-top: 20px;
    }

    .f-item1 {
        transform: translateX(0);
    }

    .f-item2 {
        transform: translateX(25px);
    }

    .f-item3 {
        transform: translateX(50px);
    }

    .f-item4 {
        transform: translateX(75px);
    }

    .f-item5 {
        transform: translateX(100px);
    }

    .f-item6 {
        transform: translateX(125px);
    }
}

.f-menu-item h2 {
    font-size: 70px;
    margin: 0;
    padding-right: 10px;
    z-index: 2;
}

.subtitle {
    font-size: 12px;
    /* color: #ccc; */
    margin-left: 10px;
    z-index: 2;
}

.footer a {
    text-decoration: none;
    color: inherit;
}

.footer-info-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 20px 50px;
}

.footer-info {
    text-align: left;
    font-size: 12px;
    line-height: 1.5;
    color: #111;
}

.footer-info p {
    margin: 30px 0;
}

.footer-logo img {
    width: 100px;
    height: auto;
}

.copyright {
    text-align: right;
    font-size: 12px;
    color: #111;
}

/* フッターのスタイル調整 */
/*  ※上と重複していそうな部分をコメントアウト */
/* .footer {
    background-color: #f4f4f4;
    color: #111;
    text-align: center;
    position: relative;
}

.footer-img {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    background-color: #f4f4f4;
}

.footer-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media screen and (max-width: 768px) {
    .footer-img {
        height: auto;
    }

    .footer-img img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .footer-logo img {
        margin-top: 20px;
    }
}

.f-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 10px 0;
    position: relative;
    margin: 0 auto;
    transition: background-color 0.3s, color 0.3s;
    z-index: 1;
    text-align: left;
}

.f-menu-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    width: 100%;
}

.f-menu-item h2 {
    font-size: 70px;
    margin: 0;
    padding-right: 10px;
    z-index: 2;
} 

.subtitle {
    font-size: 12px;
    color: #ccc;
    margin-left: 10px;
    z-index: 2;
} 

.footer-info-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 20px 50px;
}

.footer-info {
    text-align: left;
    font-size: 12px;
    line-height: 1.5;
    color: #111;
}

.footer-info p {
    margin: 30px 0;
}

.footer-logo img {
    width: 100px;
    height: auto;
}

.copyright {
    text-align: right;
    font-size: 12px;
    color: #111;
} */

@media screen and (max-width: 768px) {
    .footer-menu {
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
    }

    .f-menu-item {
        width: 100%;
        justify-content: center;
        padding: 10px 0;
    }

    .f-menu-item h2 {
        font-size: 24px;
    }

    .subtitle {
        font-size: 10px;
    }

    .footer-info-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .footer-info,
    .copyright {
        text-align: center;
        width: 100%;
    }

    .footer-logo img {
        margin-top: 20px;
    }
}

/* フッター　ここまで */

/*
********************************
404ページ｜404.php
********************************
*/

.body-404 {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #111;
    /* font-family: 'Arial', sans-serif; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    flex-direction: column;
}

.error-container {
    max-width: 600px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    color: #111;
}

.error-container p {
    font-size: 18px;
    margin-bottom: 30px;
}

/* 404ページ　ここまで */