@charset "UTF-8";

/* =========================================================
   Root
   ========================================================= */
:root {
    --main-color: #333;
    --sub-color: #A0A0A0;
    --background-color: #F8F8F8;
    --white: #fff;
    --line-color: #E1E1E1;
    --caution-color: #FF383C;
    --link-color:#180EA8;
    --link-visited-color:#6A1EA5;

    --jp-font: "Hiragino Sans", "Meiryo", sans-serif;
    --en-font: "Helvetica Neue", "Arial", sans-serif;

    --header-grid: 1fr auto 1fr;
    --padding-gap: 6rem 0;

    --header-top-h: 72px;
    --header-full-h: 120px;
    --header-offset-h: 120px;
}



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

    @media screen and (min-width: 744px) {
        
    }

    @media screen and (min-width: 1024px) {
    
    }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Layout */
body {
        padding-top: var(--header-offset-h);
}
    @media screen and (min-width: 744px) {
        body {
            padding-top: var(--header-offset-h);
        }
    }

    @media screen and (min-width: 1024px) {
        body {
            padding-top: var(--header-offset-h, 120px);
        }
    }

.page-content {
    width: 100%;
    background-color: var(--background-color);
}

.works-container,
.works-individuals-container,
.about-container,
.company-container,
.contact-container,
.disclaimer-container,
.privacy-container,
.news-container,
.news-individuals-container,
.column-container,
.column-individuals-container,
.recruit-container,
.services-container,
.sitemap-container {
    padding: 3rem 0;
}
    @media screen and (min-width: 744px) {
        .works-container,
        .works-individuals-container,
        .about-container,
        .company-container,
        .contact-container,
        .disclaimer-container,
        .privacy-container,
        .news-container,
        .news-individuals-container,
        .column-container,
        .column-individuals-container,
        .recruit-container,
        .services-container,
        .sitemap-container {
            padding: 3.5rem 0;
        }
    }

    @media screen and (min-width: 1024px) {
        .works-container,
        .works-individuals-container,
        .about-container,
        .company-container,
        .contact-container,
        .disclaimer-container,
        .privacy-container,
        .news-container,
        .news-individuals-container,
        .column-container,
        .column-individuals-container,
        .recruit-container,
        .services-container,
        .sitemap-container {
            padding: var(--padding-gap);
        }
    }

/* =========================================================
   Header (FIXED / column)
   ========================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    display: flex;
    flex-direction: column;

    background: var(--white);
    color: var(--main-color);
    z-index: 1100;
}

.header-top-container {
    display: grid;
    grid-template-columns: var(--header-grid);
    align-items: center;
    position: relative;
    z-index: 2;
    background-color: var(--white);
    border-bottom: 1px solid var(--line-color);
    padding: 1rem 2rem;
}
    @media screen and (min-width: 744px) {
        .header-top-container {
            padding: 1rem 2.5rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .header-top-container {
            padding: 1.5rem 3.5rem;
        }
    }

.header-top-right {
    justify-self: end;
}

.header-top-menu {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    appearance: none;
    cursor: pointer;

    font-size: 1.5rem;
    font-family: var(--en-font);
    font-weight: 300;
    text-decoration: none;
    color: currentColor;
}
    @media screen and (min-width: 1024px) {
        .header-top-menu {
            gap: 0.25dvw;   
            font-size: 1.25rem;
        }
    }

.header-top-menu p {
    display: none;
    font-weight: 300;
}
    @media screen and (min-width: 1024px) {
        .header-top-menu p {
            display: inline;
        }
    }

.header-svg {
    width: 100%;
    height: auto;
    max-height: 1.5rem;
    display: block;
    color: inherit;
}
    @media screen and (min-width: 1024px) {
        .header-svg {
            max-height: 2rem;
        }
    }

.header-bottom-container {
    display: flex;
    border-bottom: 1px solid var(--line-color);
    background: var(--white);
    position: relative;
    z-index: 1;
    overflow: hidden;
    max-height: 200px;
    opacity: 1;
    transition: max-height .4s ease, opacity .3s ease;
}
    @media screen and (min-width: 744px) {
        .header-bottom-container {
            flex-direction: row;
            justify-content: space-between;
        }
    }

.header-bottom-left {
    padding: 1rem 2rem;
}
    @media screen and (min-width: 744px) {
        .header-bottom-left {
            padding: 1rem 2.5rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .header-bottom-left {
            padding: 1.5rem 3.5rem;
        }
    }

.header-bottom-left h1,
.header-bottom-left a {
    font-family: var(--en-font);
    font-weight: 300;
    text-decoration: none;
    color: var(--main-color);
    font-size: 1.25rem;
}
    @media screen and (min-width: 744px) {
        .header-bottom-left h1,
        .header-bottom-left a {
            font-size: 1.5rem;
        }
    }

/* -------------------------
   Collapsed
   ------------------------- */
.site-header.is-collapsed .header-bottom-container {
    max-height: 0;
    opacity: 0;
    border-bottom: 0;
}

/* =========================================================
   Home (hero overlay)
   ========================================================= */
body.page-home {
    padding-top: 0 !important;
}

body.page-home .site-header {
    background: rgb(51, 51, 51, 0.45);
}

body.page-home .header-top-container {
    background-color: transparent;
    border-bottom-color: transparent;
}

body.page-home .header-bottom-container {
    display: none;
}

body.page-home .header-top-menu,
body.page-home .header-top-menu p,
body.page-home .header-top-menu i {
    color: var(--white);
}

body.page-home .site-header.is-scrolled {
    background: var(--white);
    color: var(--main-color);
}

body.page-home .site-header.is-scrolled .header-top-container {
    background-color: var(--white);
    border-bottom: 1px solid var(--line-color);
}

body.page-home .hero__inner {
    padding-top: var(--header-top-h, 72px);
}

body.page-home .site-header.is-over-hero .header-svg {
    color: var(--white);
}

body.page-home .site-header.is-scrolled .header-svg {
    color: var(--main-color);
}

/* =========================================================
   FIX: homeでスクロール後（白ヘッダー）にMENU/CONTACTが同化する問題
   ========================================================= */
body.page-home .site-header.is-scrolled .header-top-left,
body.page-home .site-header.is-scrolled .header-top-right,
body.page-home .site-header.is-scrolled .header-top-menu,
body.page-home .site-header.is-scrolled .header-top-menu p,
body.page-home .site-header.is-scrolled .header-top-menu i {
    color: var(--main-color);
}

/* サイドメニュー（外枠：固定・スクロールさせない） */
.side-menu{
    position: fixed;
    
    top: var(--header-offset-h, 120px);
    height: calc(100dvh - var(--header-offset-h, 120px));
    left: 0;
    width: min(320px, 80vw);
    background: var(--white);
    box-shadow: 2px 0 1rem rgba(0,0,0,.15);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000;

    /* 外側はスクロール禁止 */
    overflow: hidden;
}

.side-menu.is-open{
  transform: translateX(0);
}

/* リスト領域（ここだけスクロール） */
.side-menu .menu-scroll{
  /* 上下padding分を引いた高さ */
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* オーバーレイ */
.overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 900;
}

/* メニュークリック可能っぽく */
#menu-btn{
    display: flex;
    flex-direction: row;
    cursor: pointer;
    user-select: none;
}

/* 初期は bars 表示 / xmark 非表示 */
#menu-btn .icon-xmark { display: none; }

/* メニューが開いたら xmark 表示 / bars 非表示 */
#menu-btn.is-open .icon-bars  { display: none; }
#menu-btn.is-open .icon-xmark { display: inline-block; }

.main-menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    border-bottom: 1px solid var(--line-color);

    padding: 1rem 2rem ;
    gap: 0.75em;
    font-size: 1.25rem;
}
    @media screen and (min-width: 744px) {
        .main-menu {
            padding: 1rem 2.5rem;
            gap: 0.5em;
            font-size: 1.5rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .main-menu {
            padding: 2rem 3.5rem;
            gap: 0.75em;
        }
    }

.main-menu a {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--main-color);
    font-family: var(--jp-font);
}

.main-menu a:hover {
    color: var(--sub-color);
}

.sub-menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    font-weight: 300;
    border-bottom: 1px solid var(--line-color);

    font-size: 0.875rem;
    gap: 0.75em;
    padding: 1rem 2rem;
}
    @media screen and (min-width: 744px) {
        .sub-menu {
            padding: 1rem 2.5rem;
            gap: 0.5em;
            font-size: 1rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .sub-menu {
            padding: 2rem 3.5rem;
            gap: 0.75rem;
        }
    }

.sub-menu a {
    text-decoration: none;
    font-family: var(--jp-font);
    color: var(--main-color);
}

.sub-menu a:hover {
    color: var(--sub-color);
}

.instagram {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    font-family: var(--jp-font);
    color: var(--main-color);

    padding: 1rem 2rem;
    font-size: 0.875rem;
}
    @media screen and (min-width: 744px) {
        .instagram {
            padding: 1rem 2.5rem;
            font-size: 1rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .instagram {
            padding: 2rem 3.5rem;
        }
    }

.instagram:hover i,
.instagram:hover p{
    color: var(--sub-color);
}

/*contact-footerのレイアウト*/
.contact-footer-container {
    background-image: linear-gradient(rgba(51, 51, 51, 0.8)), url(../img/contact-footer-background.webp);
    background-size: cover;
    background-position: 75%;
    background-color: rgb(51, 51, 51, 0.75);

    padding: 2rem 0;
}
    @media screen and (min-width: 744px) {
        .contact-footer-container {
            padding: 3.5rem 0;
        }
    }

.contact-footer-main {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
}

.contact-footer-title {
    width: 100%;
    padding-bottom: 1rem;
    text-decoration: none;
}
    @media screen and (min-width: 1024px) {
        .contact-footer-title {
            padding-bottom: 1.25rem;
        }
    }

.contact-footer-title:hover p,
.contact-footer-title:hover h2{
    color: var(--sub-color);
}

.contact-footer-title h2 {
    font-family: var(--en-font);
    font-weight: 300;
    font-size: 2rem;
    color: var(--white);
}
    @media screen and (min-width: 744px) {
        .contact-footer-title h2 {
            font-size: 2.5rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .contact-footer-title h2 {
            font-size: 2.75rem;
        }
    }

.contact-footer-title p {
    font-family: var(--jp-font);
    font-weight: 300;
    color: var(--line-color);
    font-size: 0.875rem;
}
    @media screen and (min-width: 744px) {
        .contact-footer-title p {
            font-size: 1rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .contact-footer-title p {
            font-size: 1.25rem;
        }
    }

.contact-footer-contents {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
    @media screen and (min-width: 1024px) {
        .contact-footer-contents {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

.contact-footer-item {
    width: 100%;
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 2rem;
    background-color: var(--white);
}
    @media screen and (min-width: 744px) {
        .contact-footer-item {
            padding: 2rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .contact-footer-item {
            padding: 2rem 1.25rem;
        }
    }

.contact-footer-top {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-footer-top h3 {
    font-family: var(--jp-font);
    font-weight: 300;
    text-align: center;
    color: var(--main-color);

    font-size: 1.25rem;
}
    @media screen and (min-width: 744px) {
        .contact-footer-top h3 {
            font-size: 1.5rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .contact-footer-top h3 {
            font-size: 1.25rem;
        }
    }

.contact-footer-open-hour {
    display: flex;
    flex-direction: row;
    gap: 0;
    color: var(--sub-color);
    font-family: var(--jp-font);
    margin: 0 auto;
}
    @media screen and (min-width: 1024px) {
        .contact-footer-open-hour {
            flex-direction: column;
            text-align: center;
        }
    }

    @media screen and (min-width: 1070px) {
        .contact-footer-open-hour {
            flex-direction: row;
        }
    }

.contact-hour-rowonly {
    display: inline;
}
    @media screen and (min-width: 1024px) {
        .contact-hour-rowonly {
            display: none;
        }
    }

    @media screen and (min-width: 1070px) {
        .contact-hour-rowonly {
            display: inline;
        }
    }

.contact-footer-item .contact-footer-lead {
    font-family: var(--jp-font);
    height: 4rem;
}
    @media screen and (min-width: 744px) {
        .contact-footer-item .contact-footer-lead {
            height: 3rem;
        }
    }

.contact-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

.contact-footer-btn {
    padding: 1rem 0;
    background-color: var(--main-color);
    color: var(--white);
    border: none;
}

.contact-footer-btn:hover {
    background-color: var(--sub-color);
}

.contact-footer-bottom a {
    display: block;
    margin: 0 auto;
    width: 100%;
    color: var(--white);
    text-decoration: none;
    font-family: var(--jp-font);
}

.contact-footer-notice {
    font-size: 0.75rem;
    color: var(--sub-color);
    font-family: var(--jp-font);
}

/* フッターのレイアウト */
.footer-container {
    width: 100%;
    background-color: var(--main-color);
}

.footer-container svg,
.footer-container a,
.footer-container p {
    color: var(--white);
    text-decoration: none;
}

.footer-top {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 2rem;
}
    @media screen and (min-width: 744px) {
        .footer-top {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            padding: 2rem 2.5rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .footer-top {
            padding: 2rem 3.5rem;
        }
    }

.footer-top-left {
    display: flex;
    flex-direction: column;
    padding: 2rem 0;
}
    @media screen and (min-width: 744px) {
        .footer-top-left {
            /*.----横並びで上下padding削除--- */
            padding: 0; 
        }
    }

.footer-top-left svg {
    display: inline-block;;
    width: auto;
    height: 2rem;
    color: var(--white);
}
    @media screen and (min-width: 744px) {
        .footer-top-left svg {
            height: 2.5rem;
        }
    }

.footer-top-left p {
    font-family: var(--en-font);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.125rem;
}
    @media screen and (min-width: 744px) {
        .footer-top-left p {
            font-size: 0.875rem;
        }
    }

.footer-top-right {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem 0;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
    gap: 0.5rem;
}
    @media screen and (min-width: 744px) {
        .footer-top-right {
            grid-template-columns: repeat(3, 1fr);
            padding: 0;
            border: none;
            align-self: end;
            row-gap: 1rem;
        }
    }

.footer-top-right li {
    font-family: var(--en-font);
    font-size: 0.875rem;
    font-weight: 300;
    list-style: none;
    letter-spacing: 0.125rem;
}

.footer-top-right li:hover {
    color: var(--sub-color);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    padding: 0 2rem;
}
    @media screen and (min-width: 744px) {
        .footer-bottom {
            flex-direction: column;
            padding: 0rem 2.5rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .footer-bottom {
            flex-direction: row;
            padding: 1rem 3.5rem;
            justify-content: space-between;
            border-top: 1px solid var(--line-color);
        }
    }

.footer-bottom-left ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 1px solid var(--line-color);
    gap: 0.5rem;
    padding: 1rem 0;
    letter-spacing: 0.125rem;
}
    @media screen and (min-width: 744px) {
        .footer-bottom-left ul {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-top: 1px solid var(--line-color);
        }
    }

    @media screen and (min-width: 1024px) {
        .footer-bottom-left ul {
            padding: 0;
            border: none;
            justify-content: baseline;
            gap: 1.5rem;
        }
    }

.footer-bottom li,
.footer-bottom p {
    font-family: var(--en-font);
    font-size: 0.875rem;
    font-weight: 300;
    list-style: none;
    
}

.footer-bottom p {
    padding: 1rem 0;
    text-align: center;
    letter-spacing: 0.125rem;
}
    @media screen and (min-width: 744px) {
        .footer-bottom p {
            padding: 1rem 2.5rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .footer-bottom p {
            padding: 0;
        }
    }