@charset "utf-8";

/* full */

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


/* tab */

@media only screen and (min-width: 641px) and (max-width: 1100px) {}


/* sp */

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


/*
------------------------
common
------------------------
*/

:root {

    --base-font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

    /* 基本設定 */
    --page-width: 1100px;
    --font-family: "";
    --font-size: 15px;

    --link-font-color: #304DE2;
    --border-color: #C7C7C7;
    --border-color-rgb: 199 199 199;
    --box-shadow-color: #000000;
    --box-shadow-color-rgb: 0 0 0;
    --scrollbar-color: #AAAAAA;
    --scrollbar-background-color: #FFFFFF;
    --error-font-color: #D82930;
    --error-background-color: #FFCACA;
    --base-border-color: #FFFFFF;
    --base-background-color: #CCCCCC;
    --parts-font-color: #3C3C3C;
    --parts-background-color: #FFFFFF;
    --accent-font-color: #FFFFFF;
    --accent-background-color: #D82930;

    /* 基本配色 */
    --main-content-font-color: #3C3C3C;
    --main-content-background-color: #FFFFFF;
    --content-font-color: #3C3C3C;
    --content-background-color: #F4F4F4;
    --second-font-color: #3C3C3C;
    --second-background-color: #DADADA;
    --third-font-color: #FFFFFF;
    --third-background-color: #3E82CB;
    --fourth-font-color: #FFFFFF;
    --fourth-background-color: #1F589D;

    /* 自由配色 */
    --free-first-font-color: #3C3C3C;
    --free-first-background-color: #FFFFFF;
    --free-second-font-color: #3C3C3C;
    --free-second-background-color: #FFFFFF;
    --free-third-font-color: #3C3C3C;
    --free-third-background-color: #FFFFFF;
    --free-fourth-font-color: #3C3C3C;
    --free-fourth-background-color: #FFFFFF;
    --free-five-font-color: #3C3C3C;
    --free-five-background-color: #FFFFFF;

    /* ヘッダー固定 */
    --header-fixed-font-color: #3C3C3C;
    --header-fixed-background-color: #F4F4F4;
    --header-fixed-border-color: #FFFFFF;
    --header-fixed-height: 40px;
    --header-fixed-box-shadow-opacity: 0%;
    --header-fixed-box-shadow-vertical: 0px;
    --header-fixed-box-shadow-blur: 0px;

    /* ヘッダー */
    --header-position: static;
    --header-width: 1100px;
    --header-horizontal-spacing: 0px;
    --header-grid-column: 3;
    --header-grid-horizontal-spacing: 8px;
    --header-grid-vertical-spacing: 8px;
    --header-top-spacing: 26px;
    --header-bottom-spacing: 8px;
    --header-vertical-spacing: 0px;
    --header-padding-spacing: 0px;
    --header-list-horizontal-spacing: 8px;
    --header-list-vertical-spacing: 4px;
    --header-font-color: #3C3C3C;
    --header-background-color: #FFFFFF;
    --header-title-font-family: "";
    --header-title-font-color: #3C3C3C;
    --header-title-background-color: #F4F4F4;
    --header-title-border-color: #3C3C3C;

    /* サイドバー */
    --sidebar-width: 250px;
    --sidebar-section-padding-top: 8px;
    --sidebar-section-padding-bottom: 8px;
    --sidebar-section-horizontal-spacing: 8px;
    --sidebar-section-vertical-spacing: 20px;
    --sidebar-title-vertical-spacing: 20px;
    --sidebar-list-vertical-spacing: 8px;
    --sidebar-font-color: #3C3C3C;
    --sidebar-background-color: #FFFFFF;
    --sidebar-title-font-family: "";
    --sidebar-title-font-color: #3C3C3C;
    --sidebar-title-background-color: #F4F4F4;
    --sidebar-title-border-color: #3C3C3C;

    /* ドロワー（サイドバー） */
    --drawer-width: 300px;
    --drawer-section-padding-top: 8px;
    --drawer-section-padding-bottom: 8px;
    --drawer-section-horizontal-spacing: 8px;
    --drawer-section-vertical-spacing: 20px;
    --drawer-title-vertical-spacing: 20px;
    --drawer-list-vertical-spacing: 8px;
    --drawer-box-shadow-opacity: 50%;
    --drawer-box-shadow-horizontal: 8px;
    --drawer-box-shadow-blur: 20px;
    --drawer-font-color: #3C3C3C;
    --drawer-background-color: #FFFFFF;
    --drawer-title-font-family: "";
    --drawer-title-font-color: #3C3C3C;
    --drawer-title-background-color: #F4F4F4;
    --drawer-title-border-color: #3C3C3C;

    /* メインイメージ（スライダー） */
    --main-image-width: 1100px;
    --main-image-height: initial;

    /* メイン */
    --main-width: 850px;
    --main-section-padding-top: 8px;
    --main-section-padding-bottom: 8px;
    --main-section-horizontal-spacing: 8px;
    --main-section-vertical-spacing: 20px;
    --main-title-vertical-spacing: 20px;
    --main-font-color: #3C3C3C;
    --main-background-color: #FFFFFF;
    --main-title-font-family: "";
    --main-title-font-color: #3C3C3C;
    --main-title-background-color: #F4F4F4;
    --main-title-border-color: #3C3C3C;

    /* メイン（ワイド・フォーム） */
    --wide-width: 1100px;
    --wide-section-padding-top: 8px;
    --wide-section-padding-bottom: 8px;
    --wide-section-horizontal-spacing: 8px;
    --wide-section-vertical-spacing: 20px;
    --wide-title-vertical-spacing: 20px;
    --wide-font-color: #3C3C3C;
    --wide-background-color: #FFFFFF;

    /* フッター */
    --footer-width: 1100px;
    --footer-flex-direction: column;
    --footer-horizontal-spacing: 0px;
    --footer-vertical-spacing: 20px;
    --footer-padding-spacing: 20px;
    --footer-section-vertical-spacing: 0;
    --footer-title-vertical-spacing: 0;
    --footer-list-horizontal-spacing: 8px;
    --footer-list-vertical-spacing: 4px;
    --footer-font-color: #3C3C3C;
    --footer-background-color: #FFFFFF;
    --footer-title-font-family: "";
    --footer-title-font-color: #3C3C3C;
    --footer-title-background-color: #F4F4F4;
    --footer-title-border-color: #3C3C3C;

    /* テーブル */
    --table-font-color: #3C3C3C;
    --table-background-color: #FFFFFF;
    --table-horizontal-spacing: 0px;
    --table-vertical-spacing: 0px;

    /* 入力 */
    --input-font-color: #3C3C3C;
    --input-background-color: #FFFFFF;
    --input-border-radius: 2px;
    --input-box-shadow-opacity: 0%;
    --input-box-shadow-horizontal: 0px;
    --input-box-shadow-vertical: 0px;
    --input-box-shadow-blur: 0px;

    /* ボタン */
    --button-font-color: #FFFFFF;
    --button-background-color: #3E82CB;
    --button-background-color-hover: #3267A0;
    --button-border-radius: 2px;
    --button-box-shadow-opacity: 0%;
    --button-box-shadow-horizontal: 0px;
    --button-box-shadow-vertical: 0px;
    --button-box-shadow-blur: 0px;

    --submit-font-color: #FFFFFF;
    --submit-background-color: #1F589D;
    --submit-background-color-hover: #1C4E8B;
    --submit-border-radius: 2px;
    --submit-box-shadow-opacity: 0%;
    --submit-box-shadow-horizontal: 0px;
    --submit-box-shadow-vertical: 0px;
    --submit-box-shadow-blur: 0px;

    --accent-button-font-color: #FFFFFF;
    --accent-button-background-color: #D82930;
    --accent-button-background-color-hover: #C8252C;
    --accent-button-border-radius: 2px;
    --accent-button-box-shadow-opacity: 0%;
    --accent-button-box-shadow-horizontal: 0px;
    --accent-button-box-shadow-vertical: 0px;
    --accent-button-box-shadow-blur: 0px;

    /* グリッド */
    --grid-horizontal-spacing: 4px;
    --grid-vertical-spacing: 4px;

    /* 商品カード */
    --item-text-align: left;
    --item-padding: 8px;
    --item-border-bold: 0px;
    --item-border-opacity: 0%;
    --item-border-radius: 0px;
    --item-box-shadow-opacity: 0%;
    --item-box-shadow-horizontal: 0px;
    --item-box-shadow-vertical: 0px;
    --item-box-shadow-blur: 0px;
    --item-font-color: #3C3C3C;
    --item-background-color: transparent;

    /* 記事カード */
    --article-text-align: left;
    --article-padding: 8px;
    --article-border-bold: 0px;
    --article-border-opacity: 0%;
    --article-border-radius: 0px;
    --article-box-shadow-opacity: 0%;
    --article-box-shadow-horizontal: 0px;
    --article-box-shadow-vertical: 0px;
    --article-box-shadow-blur: 0px;
    --article-font-color: #3C3C3C;
    --article-background-color: transparent;

    /* 求人情報カード */
    --recruit-text-align: left;
    --recruit-padding: 8px;
    --recruit-border-bold: 0px;
    --recruit-border-opacity: 0%;
    --recruit-border-radius: 0px;
    --recruit-box-shadow-opacity: 0%;
    --recruit-box-shadow-horizontal: 0px;
    --recruit-box-shadow-vertical: 0px;
    --recruit-box-shadow-blur: 0px;
    --recruit-font-color: #3C3C3C;
    --recruit-background-color: transparent;

    /* 管理者アカウントカード */
    --manager-text-align: left;
    --manager-padding: 8px;
    --manager-border-bold: 0px;
    --manager-border-opacity: 0%;
    --manager-border-radius: 0px;
    --manager-box-shadow-opacity: 0%;
    --manager-box-shadow-horizontal: 0px;
    --manager-box-shadow-vertical: 0px;
    --manager-box-shadow-blur: 0px;
    --manager-font-color: #3C3C3C;
    --manager-background-color: transparent;

    /* お知らせカード */
    --information-text-align: left;
    --information-padding: 8px;
    --information-border-bold: 0px;
    --information-border-opacity: 0%;
    --information-border-radius: 0px;
    --information-box-shadow-opacity: 0%;
    --information-box-shadow-horizontal: 0px;
    --information-box-shadow-vertical: 0px;
    --information-box-shadow-blur: 0px;
    --information-font-color: #3C3C3C;
    --information-background-color: transparent;

    /* マイページ - メニュー */
    --mypage-menu-border-radius: 0px;
    --mypage-menu-padding: 8px;
    --mypage-menu-gap: 8px;
    --mypage-menu-font-color: #3C3C3C;
    --mypage-menu-background-color: #DADADA;
    --mypage-menu-active-font-color: #FFFFFF;
    --mypage-menu-active-background-color: #1F589D;
}

html,
body {
    color: var(--main-font-color);
    background-color: var(--main-background-color);
    width: 100%;
    height: 100%;
    -ms-word-break: break-all;
        word-break: break-all;
    -ms-word-wrap: break-word;
        word-wrap: break-word;
    overflow-wrap: break-word;
}

noscript {
    color: var(--error-font-color);
    background-color: var(--error-background-color);
    display: block;
    width: 100%;
    padding: 8px 0;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
}

a {
    color: var(--main-font-color);
    text-decoration: none;
}

a:hover {
    -khtml-opacity: 0.8;
      -moz-opacity: 0.8;
           opacity: 0.8;
    -ms-filter: "alpha(opacity=80)";
        filter: alpha(opacity=80);
}

li {
    list-style: none;
}

img {
    border-style: none;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    -webkit-touch-callout: none;
       -moz-touch-callout: none;
            touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.band {
    color: var(--accent-font-color);
    background-color: var(--accent-background-color);
    width: fit-content;
    padding: 2px;
    border-radius: 2px;
    line-height: 12px;
    font-size: 10px;
}

.band.black {
    background-color: #424242;
}

.gray-out {
    background-color: #A9A9A9 !important;
    border: solid 1px #A9A9A9 !important;
}

#js-loading>ul {
    margin-top: var(--grid-vertical-spacing);
}

#js-loading-run {
    margin-top: 16px;
    text-align: center;
}


/*
------------------------
配色指定
------------------------
*/

.theme-color-main-content,
#header .search-area.theme-color-main-content .form,
#header .search-area.theme-color-main-content .detail,
#sidebar-header nav .theme-color-main-content ul {
    color: var(--main-content-font-color);
    background-color: var(--main-content-background-color);
}

.theme-color-main-content a,
#header-fixed .theme-color-main-content a,
#header .theme-color-main-content a,
#sidebar-header .theme-color-main-content a,
#drawer .theme-color-main-content a,
#sidebar .theme-color-main-content a,
#footer .theme-color-main-content a {
    color: var(--main-content-font-color);
}

.theme-color-content,
#header .search-area.theme-color-content .form,
#header .search-area.theme-color-content .detail,
#sidebar-header nav .theme-color-content ul {
    color: var(--content-font-color);
    background-color: var(--content-background-color);
}

.theme-color-content a,
#header-fixed .theme-color-content a,
#header .theme-color-content a,
#sidebar-header .theme-color-content a,
#drawer .theme-color-content a,
#sidebar .theme-color-content a,
#footer .theme-color-content a {
    color: var(--content-font-color);
}

.theme-color-second,
#header .search-area.theme-color-second .form,
#header .search-area.theme-color-second .detail,
#sidebar-header nav .theme-color-second ul {
    color: var(--second-font-color);
    background-color: var(--second-background-color);
}

.theme-color-second a,
#header-fixed .theme-color-second a,
#header .theme-color-second a,
#sidebar-header .theme-color-second a,
#drawer .theme-color-second a,
#sidebar .theme-color-second a,
#footer .theme-color-second a {
    color: var(--second-font-color);
}

.theme-color-third,
#header .search-area.theme-color-third .form,
#header .search-area.theme-color-third .detail,
#sidebar-header nav .theme-color-third ul {
    color: var(--third-font-color);
    background-color: var(--third-background-color);
}

.theme-color-third a,
#header-fixed .theme-color-third a,
#header .theme-color-third a,
#sidebar-header .theme-color-third a,
#drawer .theme-color-third a,
#sidebar .theme-color-third a,
#footer .theme-color-third a {
    color: var(--third-font-color);
}

.theme-color-fourth,
#header .search-area.theme-color-fourth .form,
#header .search-area.theme-color-fourth .detail,
#sidebar-header nav .theme-color-fourth ul {
    color: var(--fourth-font-color);
    background-color: var(--fourth-background-color);
}

.theme-color-fourth a,
#header-fixed .theme-color-fourth a,
#header .theme-color-fourth a,
#sidebar-header .theme-color-fourth a,
#drawer .theme-color-fourth a,
#sidebar .theme-color-fourth a,
#footer .theme-color-fourth a {
    color: var(--fourth-font-color);
}

.theme-color-free-first,
#header .search-area.theme-color-free-first .form,
#header .search-area.theme-color-free-first .detail,
#sidebar-header nav .theme-color-free-first ul {
    color: var(--free-first-font-color);
    background-color: var(--free-first-background-color);
}

.theme-color-free-first a,
#header-fixed .theme-color-free-first a,
#header .theme-color-free-first a,
#sidebar-header .theme-color-free-first a,
#drawer .theme-color-free-first a,
#sidebar .theme-color-free-first a,
#footer .theme-color-free-first a {
    color: var(--free-first-font-color);
}

.theme-color-free-second,
#header .search-area.theme-color-free-second .form,
#header .search-area.theme-color-free-second .detail,
#sidebar-header nav .theme-color-free-second ul {
    color: var(--free-second-font-color);
    background-color: var(--free-second-background-color);
}

.theme-color-free-second a,
#header-fixed .theme-color-free-second a,
#header .theme-color-free-second a,
#sidebar-header .theme-color-free-second a,
#drawer .theme-color-free-second a,
#sidebar .theme-color-free-second a,
#footer .theme-color-free-second a {
    color: var(--free-second-font-color);
}

.theme-color-free-third,
#header .search-area.theme-color-free-third .form,
#header .search-area.theme-color-free-third .detail,
#sidebar-header nav .theme-color-free-third ul {
    color: var(--free-third-font-color);
    background-color: var(--free-third-background-color);
}

.theme-color-free-third a,
#header-fixed .theme-color-free-third a,
#header .theme-color-free-third a,
#sidebar-header .theme-color-free-third a,
#drawer .theme-color-free-third a,
#sidebar .theme-color-free-third a,
#footer .theme-color-free-third a {
    color: var(--free-third-font-color);
}

.theme-color-free-fourth,
#header .search-area.theme-color-free-fourth .form,
#header .search-area.theme-color-free-fourth .detail,
#sidebar-header nav .theme-color-free-fourth ul {
    color: var(--free-fourth-font-color);
    background-color: var(--free-fourth-background-color);
}

.theme-color-free-fourth a,
#header-fixed .theme-color-free-fourth a,
#header .theme-color-free-fourth a,
#sidebar-header .theme-color-free-fourth a,
#drawer .theme-color-free-fourth a,
#sidebar .theme-color-free-fourth a,
#footer .theme-color-free-fourth a {
    color: var(--free-fourth-font-color);
}

.theme-color-free-five,
#header .search-area.theme-color-free-five .form,
#header .search-area.theme-color-free-five .detail,
#sidebar-header nav .theme-color-free-five ul {
    color: var(--free-five-font-color);
    background-color: var(--free-five-background-color);
}

.theme-color-free-five a,
#header-fixed .theme-color-free-five a,
#header .theme-color-free-five a,
#sidebar-header .theme-color-free-five a,
#drawer .theme-color-free-five a,
#sidebar .theme-color-free-five a,
#footer .theme-color-free-five a {
    color: var(--free-five-font-color);
}


/*
------------------------
video-area
------------------------
*/

.video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}


/*
------------------------
wrap
------------------------
*/

.wrap {
    max-width: var(--page-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/*
------------------------
message-area
------------------------
*/

.message-area {
    color: var(--main-content-font-color);
    background-color: var(--main-content-background-color);
    border: dotted 1px var(--border-color);
    border-radius: 2px;
    padding: 16px 16px 0 16px !important;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

.message-area .point,
.message-area .questionnaire,
.message-area .message-textarea,
.message-area .message {
    margin-bottom: 16px;
}

.message-area .point,
.message-area .questionnaire {
    text-align: center;
}


/*
------------------------
お気に入り
------------------------
*/

.favorite-area {
    color: var(--parts-font-color);
    background-color: var(--parts-background-color);
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    -webkit-box-shadow: 1px 1px 1px 1px rgba(var(--box-shadow-color-rgb) / 0.075);
       -moz-box-shadow: 1px 1px 1px 1px rgba(var(--box-shadow-color-rgb) / 0.075);
            box-shadow: 1px 1px 1px 1px rgba(var(--box-shadow-color-rgb) / 0.075);
}

.favorite-area img {
    width: 50% !important;
    height: 100%;
}

.favorite-area .js-tooltip-target {
    top: initial;
    bottom: -36px;
}


/*
------------------------
正方形 可変
------------------------
*/

.square-area {
    position: relative;
    z-index: 0;
    height: auto;
}

.square-area::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.square-area p {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.square-area img {
    position: absolute;
    width: auto;
    max-height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
}

.square-area .arrive {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    max-width: 60px;
    width: 100%;
}

.square-area .arrive img {
    width: 100%;
    opacity: 1 !important;
}

.square-area .soldout {
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: 100%;
    font-size: 19px;
    font-weight: bold;
    line-height: 50px;
    margin-top: -25px;
    text-align: center;
}

.square-area .favorite-area {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.square-area .user-icon {
    background-color: var(--base-background-color);
    width: 100%;
}


/* sp */

@media only screen and (max-width: 640px) {
    .square-area .soldout {
        font-size: 16px;
        line-height: 30px;
        margin-top: -15px;
    }
}


/*
------------------------
長方形 1:2 可変
------------------------
*/

.rectangle {
    position: relative;
    height: auto;
}

.rectangle::before {
    content: "";
    display: block;
    aspect-ratio: 53 / 26;
}

.rectangle .bg-image {
    background-color: var(--base-background-color);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.rectangle .bg-image img {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
}


/*
------------------------
close-icon
------------------------
*/

.close-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-bottom: -4px;
    position: relative;
    cursor: pointer;
}

.close-icon span::before,
.close-icon span::after {
    background-color: var(--main-content-font-color);
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 6%;
    margin: -3% 0 0 -45%;
}

.close-icon span::before {
    transform: rotate(-45deg);
}

.close-icon span::after {
    transform: rotate(45deg);
}


/*
------------------------
search-area
------------------------
*/

.search-area {
    position: relative;
}

.search-area .js-input-area .js-count-display {
    font-size: 8px;
    bottom: -3px;
}

.search-area .form {
    display: flex;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
}

/* free-word */
.search-area .form .free-word {
    flex-grow: 1;
}

.search-area .form .js-search-detail {
    color: var(--button-font-color);
    background-color: var(--button-background-color);
    border: solid 1px var(--button-background-color);
    border-radius: var(--button-border-radius);
    -webkit-box-shadow: var(--button-box-shadow-horizontal) var(--button-box-shadow-vertical) var(--button-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--button-box-shadow-opacity));
       -moz-box-shadow: var(--button-box-shadow-horizontal) var(--button-box-shadow-vertical) var(--button-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--button-box-shadow-opacity));
            box-shadow: var(--button-box-shadow-horizontal) var(--button-box-shadow-vertical) var(--button-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--button-box-shadow-opacity));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 33px;
    line-height: 1;
    font-size: 12px;
    margin: 8px 0 8px 8px;
    cursor: pointer;
    font-weight: bold;
    flex-shrink: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

.search-area .form .js-search-detail:hover {
    background-color: var(--button-background-color-hover);
    border: solid 1px var(--button-background-color-hover);
}

.search-area .form .search-button {
    position: relative;
    margin: 8px 0 8px 8px;
    flex-shrink: 0;
}

.search-area .form .search-button button[type="submit"] {
    height: 33px;
    line-height: 16px;
    font-size: 13px;
    margin: 0;
}

.search-area .form .search-button .analytics {
    top: -8px;
    left: -8px;
}

/* detail */
.search-area .detail {
    display: none;
}

.search-area .detail ul {
    display: flex;
    align-items: center;
}

.search-area .detail ul li.title {
    min-width: 70px;
    flex-shrink: 0;
}

/* price-range */
.search-area .detail ul.price-range li:nth-of-type(2),
.search-area .detail ul.price-range li:nth-of-type(4) {
    flex-grow: 1;
}

.search-area .detail ul.price-range li input[type="number"] {
    width: 100%;
}

.search-area .detail ul.price-range li:nth-of-type(3) {
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

/* category */
.search-area .detail ul.category li:nth-of-type(2) {
    flex-grow: 1;
}

.search-area .detail ul.category li select {
    width: 100%;
}


/*
------------------------
profile
------------------------
*/

.profile .icon {
    background-color: var(--base-background-color);
    border: solid 5px var(--base-border-color);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}


/*
------------------------
cover-image-area
------------------------
*/

.cover-image-area {
    position: relative;
}

.cover-image-area .full-size img {
    object-fit: cover;
    width: 100%;
}

.cover-image-area .profile-area {
    display: flex;
    gap: 8px;
    width: calc(100% - 16px - var(--main-section-horizontal-spacing) * 2);
}

.cover-image-area .profile-area .left {
    position: relative;
    z-index: 0;
    flex-shrink: 0;
    width: 200px;
    text-align: center;
}

.cover-image-area .profile-area .left button[type="button"] {
    margin: 8px auto 0;
}

.cover-image-area .profile-area .right {
    color: var(--main-content-font-color);
    background-color: var(--main-content-background-color);
    position: relative;
    z-index: 1;
    padding: 8px;
    flex-grow: 1;
}

.cover-image-area .profile-area .right .content {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 8px;
    line-height: 2em;
    border-radius: 2px;
}

.cover-image-area .profile-area .right .content h2 {
    margin: 0;
}

.cover-image-area .profile-area .right .content p {
    margin-top: 8px;
}

.cover-image-area .profile-area .profile-area {
    position: absolute;
    width: calc(100% - 32px);
    bottom: 16px;
    margin: 0 16px;
}

.cover-image-area .layer {
    position: relative;
    z-index: 1;
}

.cover-image-area .layer .profile-area {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 8px;
}


/* sp */

@media only screen and (max-width: 640px) {
    .cover-image-area .profile-area .left {
        width: 120px;
    }
}


/*
------------------------
購入ステップ
------------------------
*/

.step ul {
    display: flex;
}

.step ul li {
    position: relative;
    flex: 1;
    height: 47px;
    padding-top: 23px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

.step ul .first {
    background-color: #CCCCCC;
}

.step ul .first::after {
    border-color: transparent #CCCCCC;
    content: "";
    position: absolute;
    right: -20px;
    top: 0px;
    z-index: 1;
    width: 0;
    border-style: solid;
    border-width: 35px 0 35px 20px;
    display: block;
}

.step ul .second {
    background-color: #DADADA;
}

.step ul .second::after {
    border-color: transparent #DADADA;
    content: "";
    position: absolute;
    right: -20px;
    top: 0px;
    z-index: 1;
    width: 0;
    border-style: solid;
    border-width: 35px 0 35px 20px;
    display: block;
}

.step ul .third {
    background-color: #CCCCCC;
}

.step ul .third::after {
    border-color: transparent #CCCCCC;
}

.step ul .active {
    color: var(--third-font-color);
    background-color: var(--third-background-color);
}

.step ul .active::after {
    border-color: transparent var(--third-background-color);
}


/* sp */

@media only screen and (max-width: 640px) {
    .step ul li {
        height: 20px;
        line-height: 20px;
        padding: 9px 0;
        font-size: 1em;
        font-weight: normal;
    }
    .step ul .first::after {
        right: -11px;
        border-width: 19px 0 19px 12px;
    }
    .step ul .second::after {
        right: -11px;
        border-width: 19px 0 19px 12px;
    }
}


/*
------------------------
アンケート
------------------------
*/

.questionnaire-area h3 {
    margin-top: var(--wide-section-vertical-spacing);
    margin-bottom: var(--wide-title-vertical-spacing);
}

.questionnaire-area h3 .attention {
    margin-left: 2px;
    margin-right: 6px;
}

.questionnaire-gift-image img {
    margin-bottom: var(--wide-section-vertical-spacing);
}

.questionnaire-gift-image .content {
    display: flex;
    flex-wrap: wrap;
    color: var(--main-content-font-color);
    background-color: var(--main-content-background-color);
    border: solid 1px var(--border-color);
    padding: 6px 12px;
}

.questionnaire-area .content {
    display: flex;
    flex-wrap: wrap;
    color: var(--main-content-font-color);
    background-color: var(--main-content-background-color);
    border: solid 1px var(--border-color);
    padding: 6px 12px;
}

.questionnaire-area .content input[type="radio"],
.questionnaire-area .content input[type="checkbox"] {
    margin: 0 12px 0 0;
}

.questionnaire-area .content label {
    display: block;
    margin: 10px 8px;
}

.questionnaire-area .content label.clear {
    width: calc(100% - 16px);
}

.questionnaire-area .content label.clear span {
    display: inline-block;
    width: 10%;
}

.questionnaire-area .content label.clear div {
    width: 90%;
}

#js-questionnaire-gift-target {
    margin-top: 16px;
}

@media screen and ( min-width: 501px) {
    .questionnaire-area .content label {
        width: calc(25% - 16px);
    }
}

@media screen and ( max-width: 500px) {
    .questionnaire-area .content label {
        width: calc(50% - 16px);
    }
}

/*
------------------------
よくあるご質問
------------------------
*/

.faq-content-area dl {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.faq-content-area dl dt,
.faq-content-area dl dd div {
    display: flex;
    gap: 6px;
}

.faq-content-area dl dt {
    cursor: pointer;
    color: var(--main-title-font-color);
    background-color: var(--main-title-background-color);
    padding: 8px;
    font-weight: bold;
    line-height: 2;
    user-select: none;
}

.faq-content-area dl dd {
    display: none;
    padding: 8px;
    line-height: 2;
    user-select: none;
}


/*
------------------------
ページング 並び替え
------------------------
*/

.paging div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.paging div ul {
    display: flex;
    flex-wrap: wrap;
    height: 32px;
}

.paging div ul li {
    color: var(--parts-font-color);
    background-color: var(--parts-background-color);
    border: solid 1px var(--border-color);
    position: relative;
    width: 30px;
    height: 30px;
    line-height: 32px;
    margin-right: 12px;
    text-align: center;
}

.paging div ul li:hover {
    border: solid 1px var(--third-background-color);
}

.paging div ul li.active {
    color: var(--third-font-color);
    background-color: var(--third-background-color);
    border: solid 1px var(--third-background-color);
}

.paging div ul li.edge {
    background-color: #A9A9A9;
    border: solid 1px #A9A9A9;
}

.paging div ul li.edge a {
    color: #FFFFFF;
}

.paging div ul li a {
    display: block;
}

.paging div ul li img {
    height: 32px;
}

.paging div ul li .analytics {
    top: -16px;
    left: -16px;
}

.paging div .count {
    margin-left: auto;
}

/* 並び替え */
.paging-sort>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.paging-sort>div .paging {
    width: calc(100% - 230px);
    margin: 0;
}

.paging-sort>div .sort {
    position: relative;
    width: 230px;
    text-align: right;
}

.paging-sort>div .sort select {
    margin: 0;
}

.paging-sort>div .sort>.analytics {
    position: relative;
    margin-right: 8px;
}

.list-item-area .paging-sort:first-of-type,
.list-article-area .paging-sort:first-of-type,
.information-area .paging:first-of-type {
    margin-bottom: 8px;
}

.list-item-area .paging-sort:last-of-type,
.list-article-area .paging-sort:last-of-type,
.information-area .paging:last-of-type {
    margin-top: 8px;
}


/* tab */

@media only screen and (min-width: 641px) and (max-width: 1100px) {
    .paging,
    .sort {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}


/* sp */

@media only screen and (max-width: 640px) {
    .paging-sort>div .paging,
    .paging-sort>div .sort {
        width: 100%;
    }
}


/*
------------------------
SNSシェアボタン
------------------------
*/

.sns-share-area ul {
    display: flex;
    justify-content: flex-end;
}

.sns-share-area ul li {
    position: relative;
    width: 35px;
    height: 35px;
    margin-right: 8px;
    cursor: pointer;
    text-align: center;
}

.sns-share-area ul li:last-of-type {
    margin-right: 0;
}

.sns-share-area ul li .analytics {
    top: -10px;
    left: -10px;
}

.sns-share-area ul li a,
.sns-share-area ul li .js-favorite {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

.sns-share-area ul li .js-favorite {
    background-color: #EA6878;
    border: solid 1px #EA6878;
}

.sns-share-area ul li img {
    margin-top: 5px;
}


/*
------------------------
SNS関連付けボタン
------------------------
*/

.sns-related-area button[type="button"] {
    max-width: 300px;
    width: 100%;
    margin-bottom: 16px;
}

#js-amazon-login-button {
    max-width: 300px;
    width: 100%;
    margin: 0 auto 16px;
}


/*
------------------------
アイコン
------------------------
*/

.icon-area {
    display: flex;
}

.icon-area li {
    margin-right: 4px;
}

.icon-area li:last-of-type {
    margin-right: 0;
}

.icon-area li div {
    font-size: 10px;
    line-height: 16px;
    border-radius: 2px;
    padding: 0 3px 0;
    font-weight: bold;
}

.icon-area li:last-of-type div {
    margin-right: 0;
}

.icon-area li .member-price,
.icon-area li .free-shipping,
.icon-area li .tomorrow {
    color: var(--accent-font-color);
    background-color: var(--accent-background-color);
}

.icon-area li .new {
    color: var(--fourth-font-color);
    background-color: var(--fourth-background-color);
}

.icon-area li .tomorrow span {
    display: none;
}

/*
------------------------
サムネイル表示
------------------------
*/

.thumbnail-box .status {
    color: var(--parts-font-color);
    background-color: var(--parts-background-color);
    border: solid 1px var(--border-color);
    font-size: 0.8em;
    text-align: center;
    padding: 2px 0;
    border-radius: 2px;
    margin-top: 4px;
}

.thumbnail-box .id {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 4px;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 4px;
    text-align: right;
}

.thumbnail-box .icon-area li div {
    margin-bottom: 4px;
}

/* detail*/

.thumbnail-box .left {
    position: relative;
}

.thumbnail-box .right p,
.thumbnail-box .right .js-ratebox-small {
    margin-bottom: 8px;
}

.thumbnail-box .right p a {
    display: block;
}

.thumbnail-box .right .name {
    margin-top: 8px;
}

.thumbnail-box .right .category-name {
    color: var(--parts-font-color);
    background-color: var(--parts-background-color);
    border: solid 1px var(--border-color);
    font-size: 0.8em;
    line-height: 1;
    padding: 4px;
    margin: 6px 0;
    border-radius: 2px;
}

.thumbnail-box .right .price {
    font-size: 1.2em;
}

.thumbnail-box .right .price .title {
    margin-right: 4px;
}

.thumbnail-box .right .price .tax {
    margin-left: 8px;
}

.thumbnail-box .right .description {
    font-size: 0.9em;
}


/* sp */

@media only screen and (max-width: 640px) {
    .thumbnail-box .column {
        margin-top: 0;
    }
    .thumbnail-box .column li {
        height: 20px;
    }
    .thumbnail-box .column li div {
        font-size: 12px;
        line-height: 12px;
        padding: 4px 0;
    }
}


/*
------------------------
各カード
------------------------
*/

.item .thumbnail-box {
    padding: var(--item-padding) var(--item-padding) 0 var(--item-padding);
    text-align: var(--item-text-align);
    border: solid var(--item-border-bold) rgba(var(--border-color-rgb) / var(--item-border-opacity));
    border-radius: var(--item-border-radius);
    background-color: var(--item-background-color);
    color: var(--item-font-color);
    -webkit-box-shadow: var(--item-box-shadow-horizontal) var(--item-box-shadow-vertical) var(--item-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--item-box-shadow-opacity));
       -moz-box-shadow: var(--item-box-shadow-horizontal) var(--item-box-shadow-vertical) var(--item-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--item-box-shadow-opacity));
            box-shadow: var(--item-box-shadow-horizontal) var(--item-box-shadow-vertical) var(--item-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--item-box-shadow-opacity));
}

.item .thumbnail-box a {
    color: var(--item-font-color);
}

.article .thumbnail-box {
    padding: var(--article-padding) var(--article-padding) 0 var(--article-padding);
    text-align: var(--article-text-align);
    border: solid var(--article-border-bold) rgba(var(--border-color-rgb) / var(--article-border-opacity));
    border-radius: var(--article-border-radius);
    background-color: var(--article-background-color);
    color: var(--article-font-color);
    -webkit-box-shadow: var(--article-box-shadow-horizontal) var(--article-box-shadow-vertical) var(--article-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--article-box-shadow-opacity));
       -moz-box-shadow: var(--article-box-shadow-horizontal) var(--article-box-shadow-vertical) var(--article-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--article-box-shadow-opacity));
            box-shadow: var(--article-box-shadow-horizontal) var(--article-box-shadow-vertical) var(--article-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--article-box-shadow-opacity));
}

.article .thumbnail-box a {
    color: var(--article-font-color);
}

.recruit .thumbnail-box {
    padding: var(--recruit-padding) var(--recruit-padding) 0 var(--recruit-padding);
    text-align: var(--recruit-text-align);
    border: solid var(--recruit-border-bold) rgba(var(--border-color-rgb) / var(--recruit-border-opacity));
    border-radius: var(--recruit-border-radius);
    background-color: var(--recruit-background-color);
    color: var(--recruit-font-color);
    -webkit-box-shadow: var(--recruit-box-shadow-horizontal) var(--recruit-box-shadow-vertical) var(--recruit-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--recruit-box-shadow-opacity));
       -moz-box-shadow: var(--recruit-box-shadow-horizontal) var(--recruit-box-shadow-vertical) var(--recruit-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--recruit-box-shadow-opacity));
            box-shadow: var(--recruit-box-shadow-horizontal) var(--recruit-box-shadow-vertical) var(--recruit-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--recruit-box-shadow-opacity));
}

.recruit .thumbnail-box a {
    color: var(--recruit-font-color);
}

.manager .thumbnail-box {
    padding: var(--manager-padding) var(--manager-padding) 0 var(--manager-padding);
    text-align: var(--manager-text-align);
    border: solid var(--manager-border-bold) rgba(var(--border-color-rgb) / var(--manager-border-opacity));
    border-radius: var(--manager-border-radius);
    background-color: var(--manager-background-color);
    color: var(--manager-font-color);
    -webkit-box-shadow: var(--manager-box-shadow-horizontal) var(--manager-box-shadow-vertical) var(--manager-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--manager-box-shadow-opacity));
       -moz-box-shadow: var(--manager-box-shadow-horizontal) var(--manager-box-shadow-vertical) var(--manager-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--manager-box-shadow-opacity));
            box-shadow: var(--manager-box-shadow-horizontal) var(--manager-box-shadow-vertical) var(--manager-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--manager-box-shadow-opacity));
}

.manager .thumbnail-box a {
    color: var(--manager-font-color);
}

.information .thumbnail-box {
    padding: var(--information-padding) var(--information-padding) 0 var(--information-padding);
    text-align: var(--information-text-align);
    border: solid var(--information-border-bold) rgba(var(--border-color-rgb) / var(--information-border-opacity));
    border-radius: var(--information-border-radius);
    background-color: var(--information-background-color);
    color: var(--information-font-color);
    -webkit-box-shadow: var(--information-box-shadow-horizontal) var(--information-box-shadow-vertical) var(--information-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--information-box-shadow-opacity));
       -moz-box-shadow: var(--information-box-shadow-horizontal) var(--information-box-shadow-vertical) var(--information-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--information-box-shadow-opacity));
            box-shadow: var(--information-box-shadow-horizontal) var(--information-box-shadow-vertical) var(--information-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--information-box-shadow-opacity));
}

.information .thumbnail-box a {
    color: var(--information-font-color);
}


/*
------------------------
サムネイル
------------------------
*/

.thumbnail-area {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--grid-horizontal-spacing);
    row-gap: var(--grid-vertical-spacing);
}

.thumbnail-area .separated-image {
    margin: 8px 4px 0;
    text-align: center;
}

.thumbnail-area .thumbnail-box {
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}


/* pc tab */

@media only screen and (min-width: 641px) {
    .thumbnail-area .thumbnail-box:hover {
        -khtml-opacity: 0.7;
          -moz-opacity: 0.7;
               opacity: 0.7;
        -ms-filter: "alpha(opacity=70)";
            filter: alpha(opacity=70);
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
             -o-box-sizing: border-box;
                box-sizing: border-box;
    }

    /* two */
    .thumbnail-area.two.item .thumbnail-box {
        width: calc(50% - var(--grid-horizontal-spacing) / 2);
    }
    .thumbnail-area.two.article .thumbnail-box {
        width: calc(50% - var(--grid-horizontal-spacing) / 2);
    }
    .thumbnail-area.two.recruit .thumbnail-box {
        width: calc(50% - var(--grid-horizontal-spacing) / 2);
    }
    .thumbnail-area.two.manager .thumbnail-box {
        width: calc(50% - var(--grid-horizontal-spacing) / 2);
    }
    .thumbnail-area.two.information .thumbnail-box {
        width: calc(50% - var(--grid-horizontal-spacing) / 2);
    }

    /* three */
    .thumbnail-area.three.item .thumbnail-box {
        width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
    }
    .thumbnail-area.three.article .thumbnail-box {
        width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
    }
    .thumbnail-area.three.recruit .thumbnail-box {
        width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
    }
    .thumbnail-area.three.manager .thumbnail-box {
        width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
    }
    .thumbnail-area.three.information .thumbnail-box {
        width: calc(33.33% - var(--grid-horizontal-spacing) * 2 / 3);
    }

    /* four */
    .thumbnail-area.four.item .thumbnail-box {
        width: calc(25% - var(--grid-horizontal-spacing) * 3 / 4);
    }
    .thumbnail-area.four.article .thumbnail-box {
        width: calc(25% - var(--grid-horizontal-spacing) * 3 / 4);
    }
    .thumbnail-area.four.recruit .thumbnail-box {
        width: calc(25% - var(--grid-horizontal-spacing) * 3 / 4);
    }
    .thumbnail-area.four.manager .thumbnail-box {
        width: calc(25% - var(--grid-horizontal-spacing) * 3 / 4);
    }
    .thumbnail-area.four.information .thumbnail-box {
        width: calc(25% - var(--grid-horizontal-spacing) * 3 / 4);
    }

    /* five */
    .thumbnail-area.five.item .thumbnail-box {
        width: calc(20% - var(--grid-horizontal-spacing) * 4 / 5);
    }
    .thumbnail-area.five.article .thumbnail-box {
        width: calc(20% - var(--grid-horizontal-spacing) * 4 / 5);
    }
    .thumbnail-area.five.recruit .thumbnail-box {
        width: calc(20% - var(--grid-horizontal-spacing) * 4 / 5);
    }
    .thumbnail-area.five.manager .thumbnail-box {
        width: calc(20% - var(--grid-horizontal-spacing) * 4 / 5);
    }
    .thumbnail-area.five.information .thumbnail-box {
        width: calc(20% - var(--grid-horizontal-spacing) * 4 / 5);
    }

    /* six */
    .thumbnail-area.six.item .thumbnail-box {
        width: calc(16.66666% - var(--grid-horizontal-spacing) * 5 / 6);
    }
    .thumbnail-area.six.article .thumbnail-box {
        width: calc(16.66666% - var(--grid-horizontal-spacing) * 5 / 6);
    }
    .thumbnail-area.six.recruit .thumbnail-box {
        width: calc(16.66666% - var(--grid-horizontal-spacing) * 5 / 6);
    }
    .thumbnail-area.six.manager .thumbnail-box {
        width: calc(16.66666% - var(--grid-horizontal-spacing) * 5 / 6);
    }
    .thumbnail-area.six.information .thumbnail-box {
        width: calc(16.66666% - var(--grid-horizontal-spacing) * 5 / 6);
    }
}


/* sp */

@media only screen and (max-width: 640px) {
    .thumbnail-area.item .thumbnail-box {
        width: calc(50% - var(--grid-horizontal-spacing) / 2);
        padding: var(--item-padding) var(--item-padding) 0 var(--item-padding);
    }
    .thumbnail-area.article .thumbnail-box {
        width: calc(50% - var(--grid-horizontal-spacing) / 2);
        padding: var(--article-padding) var(--article-padding) 0 var(--article-padding);
    }
    .thumbnail-area.recruit .thumbnail-box {
        width: calc(50% - var(--grid-horizontal-spacing) / 2);
        padding: var(--recruit-padding) var(--recruit-padding) 0 var(--recruit-padding);
    }
    .thumbnail-area.manager .thumbnail-box {
        width: calc(50% - var(--grid-horizontal-spacing) / 2);
        padding: var(--manager-padding) var(--manager-padding) 0 var(--manager-padding);
    }
    .thumbnail-area.information .thumbnail-box {
        width: calc(50% - var(--grid-horizontal-spacing) / 2);
        padding: var(--information-padding) var(--information-padding) 0 var(--information-padding);
    }

    /* リスト */
    .thumbnail-area.row .thumbnail-box {
        display: flex;
        column-gap: var(--grid-horizontal-spacing);
        border-bottom: solid 1px var(--border-color);
        padding: 8px;
        margin: 0;
    }
    .thumbnail-area.row.item .thumbnail-box {
        width: calc(100% - var(--item-padding));
    }
    .thumbnail-area.row.article .thumbnail-box {
        width: calc(100% - var(--article-padding));
    }
    .thumbnail-area.row.recruit .thumbnail-box {
        width: calc(100% - var(--recruit-padding));
    }
    .thumbnail-area.row.manager .thumbnail-box {
        width: calc(100% - var(--manager-padding));
    }
    .thumbnail-area.row.information .thumbnail-box {
        width: calc(100% - var(--information-padding));
    }
    .thumbnail-area.row .thumbnail-box .left {
        width: 25%;
    }
    .thumbnail-area.row .thumbnail-box .right {
        width: 75%;
    }
}


/*
------------------------
一覧
------------------------
*/

.list-area {
    display: flex;
    flex-direction: column;
    row-gap: var(--grid-vertical-spacing);
}

.list-area .thumbnail-box {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

.list-area.item .thumbnail-box {
    padding: var(--item-padding);
    gap: var(--item-padding);
}

.list-area.article .thumbnail-box {
    padding: var(--article-padding);
    gap: var(--article-padding);
}

.list-area.recruit .thumbnail-box {
    padding: var(--recruit-padding);
    gap: var(--recruit-padding);
}

.list-area.manager .thumbnail-box {
    padding: var(--manager-padding);
    gap: var(--manager-padding);
}

.list-area.information .thumbnail-box {
    padding: var(--information-padding);
    gap: var(--information-padding);
}

.list-area .thumbnail-box .left {
    width: 200px;
}

.list-area.item .thumbnail-box .right {
    width: calc(100% - 200px - var(--item-padding));
}

.list-area.article .thumbnail-box .right {
    width: calc(100% - 200px - var(--article-padding));
}

.list-area.recruit .thumbnail-box .right {
    width: calc(100% - 200px - var(--recruit-padding));
}

.list-area.manager .thumbnail-box .right {
    width: calc(100% - 200px - var(--manager-padding));
}

.list-area.information .thumbnail-box .right {
    width: calc(100% - 200px - var(--information-padding));
}

.list-area .thumbnail-box .right .name {
    margin-top: 0;
}


/* sp */

@media only screen and (max-width: 640px) {
    .list-area .thumbnail-box .left {
        width: 120px;
    }
    .list-area.item .thumbnail-box .right {
        width: calc(100% - 120px - var(--item-padding));
    }
    .list-area.article .thumbnail-box .right {
        width: calc(100% - 120px - var(--article-padding));
    }
    .list-area.recruit .thumbnail-box .right {
        width: calc(100% - 120px - var(--recruit-padding));
    }
    .list-area.manager .thumbnail-box .right {
        width: calc(100% - 120px - var(--manager-padding));
    }
    .list-area.information .thumbnail-box .right {
        width: calc(100% - 120px - var(--information-padding));
    }
}


/*
------------------------
スクロール
------------------------
*/

.js-scroll-area {
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

.js-scroll-area.item {
    padding-bottom: calc(var(--item-box-shadow-vertical) + var(--item-box-shadow-blur) + 12px);
}
.js-scroll-area.article {
    padding-bottom: calc(var(--article-box-shadow-vertical) + var(--article-box-shadow-blur) + 12px);
}
.js-scroll-area.recruit {
    padding-bottom: calc(var(--recruit-box-shadow-vertical) + var(--recruit-box-shadow-blur) + 12px);
}
.js-scroll-area.manager {
    padding-bottom: calc(var(--manager-box-shadow-vertical) + var(--manager-box-shadow-blur) + 12px);
}
.js-scroll-area.information {
    padding-bottom: calc(var(--information-box-shadow-vertical) + var(--information-box-shadow-blur) + 12px);
}

.js-scroll-area .js-scroll-main {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 0;
    display: flex;
}

.js-scroll-area .js-scroll-main .thumbnail-box {
    position: relative;
    margin-left: calc(var(--grid-horizontal-spacing) / 2);
    margin-right: calc(var(--grid-horizontal-spacing) / 2);
}

.js-scroll-area .js-scroll-left,
.js-scroll-area .js-scroll-right {
    position: absolute;
    top: 0;
    z-index: 1;
    width: 30px;
    height: 100%;
    cursor: pointer;
}

.js-scroll-area .js-scroll-left {
    left: 0;
}

.js-scroll-area .js-scroll-right {
    right: 0;
}

.js-scroll-area .js-scroll-left img,
.js-scroll-area .js-scroll-right img {
    position: relative;
    top: 50%;
    margin-top: -15px;
}


/*
------------------------
お知らせ
------------------------
*/

.information-area .thumbnail-box .content .title,
.information-area .thumbnail-box .content .content-sub {
    padding-bottom: 0.5em;
}

.information-area .thumbnail-box .content .title {
    font-weight: bold;
}

.information-area .thumbnail-box .content .title .category-name {
    display: inline-block;
    font-size: 0.8em;
    line-height: 1;
    padding: 4px;
    margin-top: 6px;
    margin-right: 6px;
    border: solid 1px var(--border-color);
    border-radius: 2px;
}

.information-area .thumbnail-box .content .title .category-name:last-of-type {
    margin-right: 0;
}

.information-area .thumbnail-box .flag span {
    background-color: #FFFFFF;
    border: solid 2px #3C3C3C;
    font-weight: bold;
    text-align: center;
    display: block;
    padding: 4px;
    line-height: 1;
}


/* list */

.information-area .list-area .thumbnail-box .date {
    width: 130px;
    font-weight: bold;
    font-size: 1.1em;
}

.information-area .list-area .thumbnail-box .content {
    display: flex;
    gap: var(--information-padding);
    width: calc(100% - 270px - var(--information-padding) * 2);
    flex-grow: 1;
}

.information-area .list-area .thumbnail-box .content .square-area {
    width: 100px;
}

.information-area .list-area .thumbnail-box .content .detail {
    width: calc(100% - 100px);
}

.information-area .list-area .thumbnail-box .flag {
    width: 140px;
}


/* sp */

@media only screen and (max-width: 640px) {
    .information-area .list-area .thumbnail-box,
    .information-area .list-area .thumbnail-box .date,
    .information-area .list-area .thumbnail-box .content,
    .information-area .list-area .thumbnail-box .flag {
        width: 100%;
    }
}


/*
------------------------
/detail.php
/article/detail.php
------------------------
*/

.file-detail .profile .user {
    position: relative;
}

.file-detail .profile .user .analytics {
    top: -10px;
    left: -10px;
}

.file-detail .profile .user ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.file-detail .profile .user ul li:first-of-type {
    width: 35px;
    margin-right: 8px;
}

.file-detail .profile .user ul li:last-of-type {
    margin-right: 0;
}


/*
------------------------
画像登録フォーム レビュー お問い合せ
------------------------
*/

.image-area {
    display: flex;
    background-color: var(--base-background-color);
    width: calc(100% - 16px);
    padding: 8px;
    border-radius: 2px;
    margin-bottom: 0;
}

.image-area p {
    font-size: 0.9em;
}

.image-area .left {
    width: 150px;
    margin-right: 8px;
}

.image-area .right {
    width: calc(100% - 158px);
}


/*
------------------------
矢印（ヘッダー/サイドバー/フッター）
------------------------
*/

.arrow {
    position: relative;
    display: block;
    width: 15px;
    height: 22px;
}

.arrow::before,
.arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    right: 0;
    width: 15px;
    height: 4px;
    transform-origin: calc(100% - 2px) 50%;
}

.arrow::before {
    transform: rotate(45deg);
}

.arrow::after {
    transform: rotate(-45deg);
}


/*
------------------------
コンテナ
------------------------
*/

#container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}


/*
------------------------
アクセスデータ
------------------------
*/

#click-data {
    color: var(--main-font-color);
    background-color: var(--main-background-color);
    width: 100%;
    position: relative;
    z-index: 5;
}

#click-data>div {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#click-data>div .scrol {
    width: calc(100% - 80px);
    font-size: 0.8em;
    overflow-x: scroll;
}

#click-data>div .scrol::-webkit-scrollbar {
    height: 10px;
}

#click-data>div .scrol::-webkit-scrollbar-track {
    background-color: var(--scrollbar-background-color);
    border-radius: 5px;
}

#click-data>div .scrol::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 5px;
}

#click-data>div .scrol table {
    border: solid 1px var(--border-color);
    text-align: center;
}

#click-data>div .scrol table th,
#click-data>div .scrol table td {
    width: 11.1%;
    min-width: 136px;
    padding: 4px;
    text-align: center;
    display: table-cell;
    border: solid 1px var(--border-color);
}

#click-data>div .scrol table th {
    color: var(--third-font-color);
    background-color: var(--third-background-color);
}

#click-data>div .js-analytics-left,
#click-data>div .js-analytics-right {
    width: 40px;
    text-align: center;
    cursor: pointer;
}

#click-data button {
    margin: 8px 16px 8px 0;
}


/*
------------------------
header-fixed
header
------------------------
*/

#header-fixed .wrap,
#header .wrap,
#breadcrumbs .wrap {
    max-width: var(--header-width);
}

#header-fixed ul li .arrow::before,
#header-fixed ul li .arrow::after,
#header ul li .arrow::before,
#header ul li .arrow::after {
    background-color: var(--header-font-color);
}

#header-fixed ul li .js-open-sidebar,
#header ul li .js-open-sidebar {
    cursor: pointer;
}


/*
------------------------
header-fixed
------------------------
*/

#header-fixed {
    display: none;
    color: var(--header-fixed-font-color);
    background-color: var(--header-fixed-background-color);
    position: sticky;
    top: 0;
    z-index: 4;
    width: 100%;
    margin: 0 auto;
    -webkit-box-shadow: 0 var(--header-fixed-box-shadow-vertical) var(--header-fixed-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--header-fixed-box-shadow-opacity));
       -moz-box-shadow: 0 var(--header-fixed-box-shadow-vertical) var(--header-fixed-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--header-fixed-box-shadow-opacity));
            box-shadow: 0 var(--header-fixed-box-shadow-vertical) var(--header-fixed-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--header-fixed-box-shadow-opacity));
}

#header-fixed a {
    color: var(--header-fixed-font-color);
}

#header-fixed ul {
    display: flex;
    align-items: center;
    height: var(--header-fixed-height);
}

#header-fixed ul li {
    border-left: solid 2px var(--header-fixed-border-color);
    height: 100%;
    flex: 1;
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

#header-fixed ul li:last-of-type {
    border-right: solid 2px var(--header-fixed-border-color);
}

#header-fixed ul li img,
#header-fixed ul li .arrow {
    height: 40px;
    margin: 0 4px;
}

#header-fixed ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#header-fixed ul li a .js-notice-contact,
#header-fixed ul li a .js-cart-count {
    position: absolute;
    top: 2px;
    left: 2px;
}

#header-fixed ul li a .analytics {
    right: 0;
    left: initial;
}


/*
------------------------
header
------------------------
*/

#header {
    color: var(--header-font-color);
    background-color: var(--header-background-color);
    position: var(--header-position);
    top: 0;
    z-index: 3;
    width: 100%;
    padding-bottom: var(--header-padding-spacing);
    margin-bottom: var(--header-vertical-spacing);
}

#header a {
    color: var(--header-font-color);
}

#header .wrap,
#breadcrumbs .wrap {
    max-width: calc(var(--header-width) - var(--header-horizontal-spacing) * 2);
    width: calc(100% - var(--header-horizontal-spacing) * 2);
    padding-left: var(--header-horizontal-spacing);
    padding-right: var(--header-horizontal-spacing);
}

#header .campaign-message {
    color: var(--accent-font-color);
    background-color: var(--accent-background-color);
    width: 100%;
    padding: 4px 0;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    font-weight: bold;
}

#header .campaign-message span {
    margin-left: 6px;
}

#header .personal-login {
    display: flex;
    padding: 8px;
}

#header .personal-login .campaign-message {
    width: calc(100% - 108px);
    margin-right: 8px;
    margin-bottom: 0;
}

#header .personal-login button[type="button"] {
    width: 100px;
}

#header .personal-login button[type="button"] a {
    color: var(--button-font-color);
    padding: 2px;
}

#header .content {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    column-gap: var(--header-grid-horizontal-spacing);
    row-gap: var(--header-grid-vertical-spacing);
    padding-top: var(--header-top-spacing);
    padding-bottom: var(--header-bottom-spacing);
}

#header .content>section {
    width: calc(100% / var(--header-grid-column) - (var(--header-grid-horizontal-spacing) * (var(--header-grid-column) - 1) / var(--header-grid-column)));
    flex-grow: 1;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

/* ロゴ */
#header .content .logo-area {
    position: relative;
}

/* 検索 */
#header .content .search-area .form {
    color: var(--main-content-font-color);
    background-color: var(--main-content-background-color);
}

#header .content .search-area .form .free-word input {
    height: 33px;
    line-height: 23px;
    padding: 5px;
}

#header .content .search-area .detail {
    position: absolute;
    z-index: 1;
    color: var(--main-content-font-color);
    background-color: var(--main-content-background-color);
    width: calc(100% - 16px);
    padding-left: 8px;
    padding-right: 8px;
}

#header .content .search-icon-area .js-search-open {
    cursor: pointer;
    width: fit-content;
}

#header .content .search-icon-area .search-area {
    display: none;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;
}

#header .content .search-icon-area .search-area .js-search-close {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 28, 28, 0.2);
    cursor: pointer;
}

#header .content .search-icon-area .search-area form {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    max-width: var(--main-width);
    width: calc(100% - 16px);
    margin: 0 auto;
}

/* カートを見る ナビ 共通 */
#header .content .cart-button-area ul,
#header .content .navi-area ul {
    display: flex;
    flex-wrap: wrap;
}

#header .content .cart-button-area ul li,
#header .content .navi-area ul li {
    position: relative;
    padding-top: var(--header-list-vertical-spacing);
    padding-bottom: var(--header-list-vertical-spacing);
    flex-shrink: 0;
}

#header .content .cart-button-area ul li a,
#header .content .navi-area ul li a,
#header .content .navi-area ul li .js-search-open {
    display: flex;
    gap: calc(var(--header-list-horizontal-spacing) * 2 / 3);
    justify-content: center;
    align-items: center;
    padding-left: var(--header-list-horizontal-spacing);
    padding-right: var(--header-list-horizontal-spacing);
}

#header .content .cart-button-area ul li .js-notice-contact,
#header .content .cart-button-area ul li .analytics,
#header .content .navi-area ul li .analytics {
    position: absolute;
    top: -4px;
    left: -12px;
}

/* カートを見る */
#header .content .cart-button-area ul {
    justify-content: flex-end;
}

#header .content .cart-button-area .view-cart {
    position: relative;
    margin-right: 8px;
}

#header .content .cart-button-area .view-cart .js-cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 1;
}

#header .content .cart-button-area .view-cart .analytics {
    top: -4px;
    left: initial;
    right: 30px;
}

#header .content .cart-button-area .view-cart a {
    width: fit-content;
    margin-left: auto;
    display: flex;
}

#header .content .cart-button-area .view-cart a .title {
    color: var(--button-font-color);
    background-color: var(--button-background-color);
    border: solid 1px var(--button-background-color);
    border-radius: var(--button-border-radius);
    -webkit-box-shadow: var(--button-box-shadow-horizontal) var(--button-box-shadow-vertical) var(--button-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--button-box-shadow-opacity));
       -moz-box-shadow: var(--button-box-shadow-horizontal) var(--button-box-shadow-vertical) var(--button-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--button-box-shadow-opacity));
            box-shadow: var(--button-box-shadow-horizontal) var(--button-box-shadow-vertical) var(--button-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--button-box-shadow-opacity));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 24px;
    line-height: 1;
    margin-right: 8px;
}

#header .content .cart-button-area .view-cart a .title:hover {
    background-color: var(--button-background-color-hover);
    border: solid 1px var(--button-background-color-hover);
}

#header .content .cart-button-area .view-cart a .title .analytics {
    top: -8px;
    left: -8px;
}

/* ナビ */
#header .content .navi-area ul li .search-icon-area {
    padding-top: 0;
    padding-bottom: 0;
}


/* tab sp */

@media only screen and (max-width: 1100px) {
    #header .content .cart-button-area {
        display: none;
    }
}


/* sp */

@media only screen and (max-width: 640px) {
    #header .content .search-area {
        display: none;
    }
    #header .content .logo-area {
        width: 100%;
        text-align: center;
    }
}


/*
------------------------
sidebar共通
------------------------
*/

/* 通常 */
#sidebar-header,
#sidebar {
    color: var(--sidebar-font-color);
    background-color: var(--sidebar-background-color);
}

#sidebar-header a,
#sidebar a {
    color: var(--sidebar-font-color);
}

#sidebar-header nav section,
#sidebar nav section {
    margin-top: var(--sidebar-section-vertical-spacing);
    padding-top: var(--sidebar-section-padding-top);
    padding-left: var(--sidebar-section-horizontal-spacing);
    padding-right: var(--sidebar-section-horizontal-spacing);
    padding-bottom: var(--sidebar-section-padding-bottom);
}

#sidebar-header nav section h2,
#sidebar nav section h2 {
    margin-bottom: var(--sidebar-title-vertical-spacing);
    line-height: 1;
}

#sidebar-header nav section>ul>li>.indent,
#sidebar nav section>ul>li>.indent {
    display: none;
    padding-left: var(--sidebar-section-horizontal-spacing);
}

#sidebar-header nav section>ul li,
#sidebar nav section>ul li {
    position: relative;
    padding-top: var(--sidebar-list-vertical-spacing);
    padding-bottom: var(--sidebar-list-vertical-spacing);
}

#sidebar-header nav section>ul li.js-open-category>div,
#sidebar nav section>ul li.js-open-category>div{
    cursor: pointer;
    padding-top: var(--sidebar-list-vertical-spacing);
    padding-bottom: var(--sidebar-list-vertical-spacing);
}

#sidebar-header nav section ul li .arrow::before,
#sidebar-header nav section ul li .arrow::after,
#sidebar nav section ul li .arrow::before,
#sidebar nav section ul li .arrow::after {
    background-color: var(--sidebar-font-color);
}

/* ドロワー */
#drawer nav section {
    margin-top: var(--drawer-section-vertical-spacing);
    padding-top: var(--drawer-section-padding-top);
    padding-left: var(--drawer-section-horizontal-spacing);
    padding-right: var(--drawer-section-horizontal-spacing);
    padding-bottom: var(--drawer-section-padding-bottom);
}

#drawer nav section h2 {
    margin-bottom: var(--drawer-title-vertical-spacing);
    line-height: 1;
}

#drawer nav section>ul>li>.indent {
    display: none;
    padding-left: var(--drawer-section-horizontal-spacing);
}

#drawer nav section>ul li {
    position: relative;
    padding-top: var(--drawer-list-vertical-spacing);
    padding-bottom: var(--drawer-list-vertical-spacing);
}

#drawer nav section>ul li.js-open-category>div {
    cursor: pointer;
    padding-top: var(--drawer-list-vertical-spacing);
    padding-bottom: var(--drawer-list-vertical-spacing);
}

#drawer nav section ul li .arrow::before,
#drawer nav section ul li .arrow::after {
    background-color: var(--drawer-font-color);
}

/* 通常 / ドロワー 共通 */
#sidebar-header nav section h2 img,
#sidebar nav section h2 img,
#drawer nav section h2 img {
    position: relative;
    padding-right: 8px;
}

#sidebar-header nav section>ul>.open,
#sidebar nav section>ul>.open,
#drawer nav section>ul>.open {
    padding: 0;
}

#sidebar-header nav section>ul>.open>.indent,
#sidebar nav section>ul>.open>.indent,
#drawer nav section>ul>.open>.indent {
    display: block;
}

#sidebar-header nav section>ul li.js-open-category,
#sidebar nav section>ul li.js-open-category,
#drawer nav section>ul li.js-open-category {
    padding-top: 0;
    padding-bottom: 0;
}

#sidebar-header nav section>ul li a,
#sidebar-header nav section>ul li.js-open-category>div,
#sidebar nav section>ul li a,
#sidebar nav section>ul li.js-open-category>div,
#drawer nav section>ul li a,
#drawer nav section>ul li.js-open-category>div {
    display: flex;
    align-items: center;
}

#sidebar-header nav section>ul li .left .js-up,
#sidebar nav section>ul li .left .js-up,
#drawer nav section>ul li .left .js-up {
    display: none;
}

#sidebar-header nav section>ul li a .js-notice-contact,
#sidebar nav section>ul li a .js-notice-contact,
#drawer nav section>ul li a .js-notice-contact {
    position: absolute;
    top: -4px;
    left: 10px;
}

#sidebar-header nav section>ul li .left,
#sidebar nav section>ul li .left,
#drawer nav section>ul li .left {
    margin-right: 8px;
}

#sidebar-header nav section>ul li .right,
#sidebar nav section>ul li .right,
#drawer nav section>ul li .right {
    position: relative;
    flex-grow: 1;
}

#sidebar-header nav section>ul li .right span,
#sidebar nav section>ul li .right span,
#drawer nav section>ul li .right span {
    position: absolute;
    bottom: -8px;
    right: 0;
    font-size: 0.7em;
}

#sidebar-header nav section>ul>li .analytics,
#sidebar nav section>ul>li .analytics,
#drawer nav section>ul>li .analytics {
    margin-top: -9px;
    top: 50%;
    right: 8px;
    left: initial;
}

#sidebar-header nav section>ul>li>ul>li>.analytics,
#sidebar nav section>ul>li>ul>li>.analytics,
#drawer nav section>ul>li>ul>li>.analytics {
    top: 4px;
    left: -10px;
}

#sidebar-header nav section>ul>li>ul>li>a>.left,
#sidebar nav section>ul>li>ul>li>a>.left,
#drawer nav section>ul>li>ul>li>a>.left {
    margin-left: 6px;
}


/*
------------------------
sidebar-header
------------------------
*/

#sidebar-header {
    display: none;
}


/*
------------------------
sidebar
------------------------
*/

#sidebar {
    max-width: var(--sidebar-width);
    width: 100%;
    order: 3;
}


/* tab sp */

@media only screen and (max-width: 1100px) {
    #sidebar {
        display: none;
    }
}


/*
------------------------
drawer
------------------------
*/

#drawer {
    display: none;
    position: relative;
    z-index: 6;
}

#drawer .search-area .form .free-word input[type="search"],
#drawer .search-area .form .search-button button[type="submit"],
#drawer .search-area .detail ul.price-range input[type="number"],
#drawer .search-area .detail ul.category select {
    height: 41px;
}

#drawer .search-area .form .js-search-detail {
    height: 41px;
    line-height: 41px;
}

#drawer nav {
    color: var(--drawer-font-color);
    background-color: var(--drawer-background-color);
    position: fixed;
    top: 0;
    right: 0;
    width: var(--drawer-width);
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-shadow: calc(var(--drawer-box-shadow-horizontal) * -1) 0 var(--drawer-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--drawer-box-shadow-opacity));
       -moz-box-shadow: calc(var(--drawer-box-shadow-horizontal) * -1) 0 var(--drawer-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--drawer-box-shadow-opacity));
            box-shadow: calc(var(--drawer-box-shadow-horizontal) * -1) 0 var(--drawer-box-shadow-blur) rgba(var(--box-shadow-color-rgb) / var(--drawer-box-shadow-opacity));
}

#drawer nav::-webkit-scrollbar {
    width: 12px;
}

#drawer nav::-webkit-scrollbar-track {
    background-color: var(--scrollbar-background-color);
    border-radius: 6px;
}

#drawer nav::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 6px;
}

#drawer nav a {
    color: var(--drawer-font-color);
}

#drawer nav .close-icon span::before,
#drawer nav .close-icon span::after {
    background-color: var(--drawer-font-color);
}

#drawer nav .js-close-sidebar {
    position: relative;
    line-height: 1;
    cursor: pointer;
}

#drawer nav section .two {
    margin-left: 8px;
}

#drawer nav section .three {
    margin-left: 8px;
}

#drawer nav section .four {
    margin-left: 8px;
}


/* sp */

@media only screen and (max-width: 640px) {
    #drawer nav {
        width: 80%;
    }
    #drawer>.js-close-sidebar {
        background-color: rgba(28, 28, 28, 0.2);
        position: fixed;
        top: 0;
        left: 0;
        width: 20%;
        height: 100%;
    }
}


/*
------------------------
パンくずリスト
------------------------
*/

#breadcrumbs ul {
    display: flex;
    align-items: center;
}

#breadcrumbs ul li {
    position: relative;
    padding: 8px;
    flex-shrink: 0;
}


/* tab sp */

@media only screen and (max-width: 1100px) {
    #breadcrumbs {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }
    #breadcrumbs::-webkit-scrollbar {
        height: 6px;
    }
    #breadcrumbs::-webkit-scrollbar-track {
        background-color: var(--scrollbar-background-color);
        border-radius: 3px;
    }
    #breadcrumbs::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-color);
        border-radius: 3px;
    }
}


/*
------------------------
メッセージ 長期休暇
------------------------
*/

#free-text,
#vacation {
    max-width: var(--page-width);
    width: 100%;
    margin: 24px auto 16px;
}

#vacation p {
    display: block;
}

#vacation p:first-of-type {
    font-size: 1.2em;
    line-height: 1.4em;
    text-decoration: underline;
    margin-bottom: 8px;
}

#vacation p:last-of-type {
    font-size: 1.1em;
    text-decoration: underline;
    margin-top: 8px;
}


/* tab sp */

@media only screen and (max-width: 1100px) {
    #free-text,
    #vacation {
        width: calc(100% - 16px);
    }
}


/*
------------------------
main-image
------------------------
*/

#main-image,
.slider-area .wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: var(--main-image-height);
    overflow: hidden;
}

#main-image .notice-area {
    width: var(--main-image-width);
    text-align: center;
}

#main-image .notice-area a,
#main-image .notice-area span {
    display: contents;
}

#main-image .notice-area a img,
#main-image .notice-area span img {
    width: var(--main-image-width);
    height: var(--main-image-height);
    object-fit: cover;
}

#main-image-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
}


/* sp */

@media only screen and (max-width: 640px) {
    #main-image-content {
        width: 300px;
    }
}


/*
------------------------
content
------------------------
*/

#content {
    display: flex;
    flex-grow: 1;
    justify-content: center;
}


/*
------------------------
main
------------------------
*/

#main {
    color: var(--main-font-color);
    background-color: var(--main-background-color);
    max-width: calc(100% - var(--sidebar-width));
    width: 100%;
    order: 2;
}

#main>section,
#main>.title-area {
    margin-top: var(--main-section-vertical-spacing);
}

#main>section {
    padding-top: var(--main-section-padding-top);
    padding-bottom: var(--main-section-padding-bottom);
}

#main>section .title-area {
    margin-bottom: var(--main-title-vertical-spacing);
}

#main .wrap {
    max-width: calc(var(--main-width) - var(--main-section-horizontal-spacing) * 2);
    width: calc(100% - var(--main-section-horizontal-spacing) * 2);
    padding-left: var(--main-section-horizontal-spacing);
    padding-right: var(--main-section-horizontal-spacing);
}


/* tab sp */

@media only screen and (max-width: 1100px) {
    #main {
        max-width: var(--main-width);
    }
}


/*
------------------------
information
item-list
article-list
------------------------
*/

#main .more {
    margin-top: var(--main-section-vertical-spacing);
    margin-left: auto;
    margin-right: auto;
}


/*
------------------------
category-description-area
------------------------
*/

#main .category-description-area p {
    position: relative;
}

#main .category-description-area p .analytics {
    top: -4px;
    left: -4px;
}


/*
------------------------
image-banner-area
------------------------
*/

#main .image-banner-area {
    position: relative;
}

#main .image-banner-area img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

#main .image-banner-area .content {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    width: 200px;
    text-align: center;
    background-color: #FFFFFF;
    padding: 16px;
    margin: 0 auto;
}

#main .image-banner-area .content .title {
    font-size: 18px;
    font-weight: bold;
}

#main .image-banner-area .content a {
    display: inline-block;
    padding: 2px 10px;
    color: var(--button-font-color);
    background-color: var(--button-background-color);
    border: solid 1px var(--button-background-color);
    border-radius: var(--button-border-radius);
}

#main .image-text-left-area>div,
#main .image-text-right-area>div {
    display: flex;
}

#main .image-text-left-area>div img,
#main .image-text-right-area>div img {
    height: 300px;
    object-fit: cover;
}

#main .image-text-left-area>div p,
#main .image-text-left-area>div .content,
#main .image-text-right-area>div p,
#main .image-text-right-area>div .content {
    width: 50%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

#main .image-text-left-area>div .content,
#main .image-text-right-area>div .content {
    padding: 20px;
}

#main .image-text-left-area>div p {
    order: 1;
}

#main .image-text-left-area>div .content {
    order: 2;
}

#main .image-text-right-area>div .content {
    order: 1;
}

#main .image-text-right-area>div p {
    order: 2;
}


/*
------------------------
collage-area
------------------------
*/

#main .collage-area>div img,
#main .collage-area>div iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#main .collage-area>div .first div,
#main .collage-area>div .second div,
#main .collage-area>div .third div {
    position: absolute;
    bottom: 0;
    color: var(--main-content-font-color);
    background-color: var(--main-content-background-color);
    width: calc(100% - 18px);
    padding: 8px;
    border: solid 1px var(--border-color);
    border-top: none;
    line-height: 1.5;
}

#main .collage-area>div .price {
    font-size: 1.2em;
}

#main .collage-area>div .price .title {
    margin-right: 4px;
}

#main .collage-area>div .price .tax {
    margin-left: 8px;
}

#main .collage-area>div .three {
    display: grid;
    grid-template-rows: 200px 200px;
    grid-template-columns: 65% 1fr;
    gap: var(--grid-horizontal-spacing);
}

#main .collage-area>div .three .first {
    position: relative;
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    overflow: hidden;
}

#main .collage-area>div .three .second {
    position: relative;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    overflow: hidden;
}

#main .collage-area>div .three .third {
    position: relative;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    overflow: hidden;
}

#main .collage-area>div .two {
    display: grid;
    grid-template-rows: 400px;
    grid-template-columns: 65% 1fr;
    gap: var(--grid-horizontal-spacing);
}

#main .collage-area>div .two .first {
    position: relative;
    grid-column: 1 / 2;
    overflow: hidden;
}

#main .collage-area>div .two .second {
    position: relative;
    grid-column: 2 / 3;
    overflow: hidden;
}

#main .collage-area>div .one {
    display: grid;
    grid-template-rows: 400px;
    position: relative;
}


/* sp */

@media only screen and (max-width: 640px) {
    #main .collage-area>div .three {
        grid-template-rows: 230px 230px;
        grid-template-columns: 50% 50%;
        gap: var(--grid-horizontal-spacing);
    }
    #main .collage-area>div .three .first {
        grid-row: 1 / 1;
        grid-column: 1 / 3;
    }
    #main .collage-area>div .three .second {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }
    #main .collage-area>div .three .third {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
    }
    #main .collage-area>div .two {
        grid-template-rows: 230px 230px;
        grid-template-columns: 100%;
        gap: var(--grid-horizontal-spacing);
    }
    #main .collage-area>div .two .first {
        grid-row: 1 / 2;
        grid-column: initial;
    }
    #main .collage-area>div .two .second {
        grid-row: 2 / 3;
        grid-column: initial;
    }
}


/*
------------------------
footer
------------------------
*/

#footer {
    color: var(--footer-font-color);
    background-color: var(--footer-background-color);
    margin-top: var(--footer-vertical-spacing);
    padding-top: var(--footer-padding-spacing);
}

#footer a {
    color: var(--footer-font-color);
}

#footer section {
    margin-top: var(--footer-section-vertical-spacing);
}

#footer section .title-area {
    margin-bottom: var(--footer-title-vertical-spacing);
}

#footer .wrap {
    max-width: calc(var(--footer-width) - var(--footer-horizontal-spacing) * 2);
    width: calc(100% - var(--footer-horizontal-spacing) * 2);
    padding-left: var(--footer-horizontal-spacing);
    padding-right: var(--footer-horizontal-spacing);
}

#footer .analytics {
    right: 0;
    left: initial;
}

#footer .navi-area ul {
    display: flex;
    flex-wrap: wrap;
}

#footer .navi-area ul li {
    position: relative;
    padding-top: var(--footer-list-vertical-spacing);
    padding-bottom: var(--footer-list-vertical-spacing);
}

#footer .navi-area ul li a {
    display: flex;
    width: fit-content;
    align-items: center;
    padding-left: var(--footer-list-horizontal-spacing);
    padding-right: var(--footer-list-horizontal-spacing);
}

#footer .navi-area ul li .arrow::before,
#footer .navi-area ul li .arrow::after {
    background-color: var(--footer-font-color);
}

#footer .navi-area ul li .js-notice-contact {
    position: absolute;
    top: -4px;
    left: -4px;
}

#footer .logo-area {
    text-align: center;
}

#footer .logo-area a,
#footer .logo-area span {
    position: relative;
    display: inline-block;
    padding: 8px;
}

#footer .site-name-area,
#footer .small-text {
    width: 100%;
    margin-top: 16px;
    margin-bottom: 16px;
    text-align: center;
}


/* sp */

@media only screen and (max-width: 640px) {
    #footer {
        border-top: solid 3px var(--border-color);
    }
    #footer .navi-area ul {
        flex-direction: column;
    }
}


/*
------------------------
EASE料金表
------------------------
*/

.ease-price {
    width: 100%;
}

.ease-price .date {
    text-align: right;
    margin-bottom: 8px;
}

.ease-price .table-area {
    position: relative;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.ease-price .table-area::-webkit-scrollbar {
    height: 6px;
}
.ease-price .table-area::-webkit-scrollbar-track {
    background-color: var(--scrollbar-background-color);
    border-radius: 3px;
}
.ease-price .table-area::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 3px;
}

.ease-price .table-area .date {
    text-align: right;
    margin-bottom: 8px;
}

.ease-price .table-area table {
    width: 100%;
    outline: solid 4px #F2F2F2;
}

.ease-price .table-area table>tbody>tr>td {
    border: solid 1px #DEDEDE;
    padding: 4px;
    display: table-cell;
}

.ease-price .table-area table>tbody>tr>td .small-text {
    margin-left: 8px;
    font-size: 0.8em;
}

.ease-price .table-area table.price td {
    min-width: 100px;
    font-size: 0.9em;
    text-align: center;
}

.ease-price .table-area table.price .title {
    -webkit-writing-mode: vertical-rl;
       -moz-writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
           -writing-mode: vertical-rl;
}

.ease-price .table-area table.price .title-sub {
    width: 21%;
    min-width: 205px;
    text-align: left;
}

.ease-price .table-area table.price .title-sub img {
    margin-right: 4px;
}

.ease-price .table-area table.price .title-sub p {
    line-height: 20px;
    display: inline-block;
}

.ease-price .table-area table.sub-price {
    margin-top: 16px;
}

.ease-price .table-area table.sub-price td {
    width: 20%;
    min-width: 190px;
    font-size: 0.9em;
    text-align: center;
}

.ease-price .table-area table.contact-us>tbody>tr>td:first-of-type {
    width: 30%;
}

.ease-price .table-area table.contact-us>tbody>tr>td:last-of-type {
    width: 70%;
}

.ease-price .remarks {
    margin-top: 1.6em;
    font-size: 12px;
    line-height: 3em;
}

.ease-price .remarks img {
    height: 3em;
    margin: 0 3px 0 4px;
}

.ease-price .remarks .form {
    display: flex;
    flex-wrap: wrap;
}

.ease-price .remarks .form div {
    margin-right: 6px;
    border: solid 1px #dedede;
    padding: 0 8px 6px;
}

.ease-price .remarks .form div a {
    width: 110px;
}

#under section .submit {
    margin: 40px auto 0;
    padding-bottom: 60px;
}

#under section .submit a {
    display: inline-block;
    width: 100%;
    background-color: #00863E;
    border-radius: 2px;
    text-align: center;
    padding: 8px 0;
    color: #FFFFFF;
}


/* sp */

@media only screen and (max-width: 1100px) {
    .ease-price .table-area .js-swipe {
        position: absolute;
        top: 50%;
        margin-top: -40px;
        width: 100%;
        text-align: center;
        margin-left: -40px;
    }
}