@charset "UTF-8";
/********************************************************************************
common.css
********************************************************************************/

/*============================================================
 css変数
*============================================================*/
:root {
    /* サイズ設定 */
    --common-vw: 100vw;                             /* jsで変動(スクロールバーサイズを含まない) */
    --common-vh: 100vh;                             /* jsで変動 */
    --common-inner-max-width-inside: 1080px;        /* 実質サイト幅 */
	--common-inner-padding: 40px;                   /* 通常サイト幅内余白 */
	--common-inner-max-width: calc(var(--common-inner-max-width-inside) + (var(--common-inner-padding) * 2));           /* 通常サイト幅 */

    --common-header-height: 0;                      /* jsで変動 */
    --common-footer-height: 0;                      /* jsで変動 */

    /* 色設定 */
    --common-color-site-bg: #fff;               /* サイト背景色 */
    --common-color-text: #222222;               /* 基本テキスト色 */
    --common-color-main: #911352;               /* メイン色 */
    --common-color-sub: #9B6275;                   /* サブ色 */
    --common-color-bg: #E6E1E1;                 /* コンテンツ背景色 */
    --common-color-accent: #EE7098;             /* アクセント色(強調色) */
    --common-color-notice: #898989;             /* 注釈色 */

    --common-color-header-bg: #fff;             /* ヘッダー背景色 */
    --common-color-footer-bg: #898989;          /* フッター背景色 */
    --common-color-footer-text: #fff;           /* フッターテキスト色 */

    /* 未使用色設定 */
    --common-color-attention: #D93838;          /* 注意色 */
    --common-color-attention-bg: #FFF5F5;       /* 注意色(背景用) */
    --common-color-link: #2784D6;               /* テキストリンク色 */
    
    --common-color-breadcrumb: #B3B3B3;         /* パンくず色 */
    --common-color-lower-mv-bg: #FAFAFA;        /* 下層メインビジュアル背景色 */
}

body {
    --inner-max-width: var(--common-inner-max-width);
    --inner-padding: var(--common-inner-padding);
}


/*============================================================
 system
*============================================================*/
/* pc-sp display switch
---------------------------------------- */
.forPC {
    display: inherit;
}
.forSP {
    display: none;
}

/*============================================================
 Base Setting
*============================================================*/
/* Frame 
---------------------------------------- */
html {
    display: block;
    background-color: #fff;
}
body {
    width: 100%;
    font-family: "Zen Maru Gothic", serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 160%;
    color: var(--common-color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    padding: 0 0 0 0;
}
#main-contents {
    display: flex;
    flex-direction: column;
    /* gap: 80px; */
    width: 100%;
    padding: 0;
}
.section {
    width: 100%;

    display: flex;
	flex-wrap: wrap;
    flex-direction: column;
    /* gap: 40px; */
}
.inner {
    width: 100%;
    max-width: var(--inner-max-width);
    padding: 0 var(--inner-padding);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    /* gap: 40px; */
}
.block {
    width: 100%;
    display: flex;
	flex-wrap: wrap;
    flex-direction: column;
    /* gap: 32px; */
}

/* Headline 
---------------------------------------- */
h1.page-title {
    font-weight: bold;
}
h2.sec-title {
    font-weight: bold;
}
h3.block-title {
    font-weight: bold;
}

/* Image 
---------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}
svg {
    max-width: 100%;
    height: auto;    
}

/* Other
---------------------------------------- */
span {
    font-weight: inherit;
}
a[href^="tel:"] {
    pointer-events: none;
}
strong {
    font-weight: bold;
    color: var(--common-color-accent);
}
.accent {
    color: var(--common-color-accent);
}

.attention {
    color: var(--common-color-attention);
}
.notice {
    font-size: 12px;
    line-height: 160%;
    color: var(--common-color-notice);
}
.list-date {
    font-size: 12px;
    line-height: 160%;
}

/*============================================================
 Sub Fonts
*============================================================*/
*[data-font="noto"] {
    font-family: 'Noto Sans JP', sans-serif;
}


/*============================================================
 Header
*============================================================*/
#fixed-header {
    width: 100%;
    position: fixed;
    top: -100%;
    left: 0;
    z-index: 9999;
    transition: top 0.3s;
}
.gnav {
    width: 100%;
    padding: 8px 24px;
    background-color: var(--common-color-accent);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.gnav .gnav-left .logo {
}
.gnav .gnav-right {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    align-items: center;
}
.gnav .gnav-right .catch {
    font-weight: bold;
    font-size: 20px;
    line-height: 100%;
}

/* スクロール時
---------------------------------------- */
#fixed-header.scrolled {
    top: 0;
}


/*============================================================
 Footer
*============================================================*/
#site-footer {
    width: 100%;
    padding: 56px 0 72px 0;
    background-color: var(--common-color-footer-bg);
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--common-color-footer-text);
    text-align: center;
}

/* ナビ
---------------------------------------- */
#site-footer .nav {
    margin-bottom: 24px;
}
/* ロゴ */
#site-footer .nav .logo {
    width: 160px;
    aspect-ratio: 1;
    align-content: center;
    background-color: #fff;
    border-radius: 16px;
    margin: 0 auto 48px auto;
}
/* リンクリスト */
#site-footer .nav .link-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    font-weight: 400;
    font-size: 14px;
    line-height: 180%;
    text-decoration-line: underline;
    margin-bottom: 48px;
}
/* SNSリスト */
#site-footer .nav .sns-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* Copyright
---------------------------------------- */
#site-footer #copyright {
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
}