@charset "UTF-8";
/********************************************************************************

parts-config.css for Clay

********************************************************************************/

/*============================================================
 CSS変数 for parts共通　※サイトデザインに従い適宜設定
*============================================================*/
:root {
}

/*============================================================
 CSS変数 for parts-btn　※サイトデザインに従い適宜設定
*============================================================*/
/* 標準ボタン設定　※設定必須
---------------------------------------- */
.parts-btn {
	--width: 150px;
	--margin: 0;
	--padding: 14px 0;
	--font-size: 14px;
	--line-height: 20px;
	--border-radius: 30px;
	--color: #ffffff;
	--background: var(--common-color-accent);
	--border-color: var(--common-color-accent);
	--hover-color: #ffffff;
	--hover-background: #FCD19F;
	--hover-border-color: #FCD19F;
}

/* オプション設定　※任意
---------------------------------------- */
/* 記事を読む */
.parts-btn[data-name="slide"] {
	--width: 156px;
	--margin: 0 auto;
	--padding: 10px 0;
	--sp-width: 120px;
}

/* 大ボタン */
.parts-btn[data-size="large"] {
	--width: 240px;
	--sp-width: 200px;
}
/* 白ボタン */
.parts-btn[data-color="white"] {
	--color: #252525;
	--background: #fff;
	--border-color: #fff;
	--hover-color: #252525;
	--hover-background: #f7f7f7;
	--hover-border-color: #f7f7f7;
}
/* 黒ボタン(白ボーダー) */
.parts-btn[data-color="border-white"] {
	--color: #ffffff;
	--background: #252525;
	--border-color: #ffffff;
	--hover-color: #ffffff;
	--hover-background: #4C4C4C;
	--hover-border-color: #ffffff;
}
/* 白ボタン(黒ボーダー) */
.parts-btn[data-color="white-border-black"] {
	--color: #252525;
	--background: #fff;
	--border-color: #252525;
	--hover-color: #252525;
	--hover-background: #f7f7f7;
	--hover-border-color: #4C4C4C;
}

/*============================================================
 CSS変数 for parts-boxes　※サイトデザインに従い適宜設定
*============================================================*/
/* オプション設定
---------------------------------------- */
/* 簡易テーブル */
.parts-boxes[data-type="table"] {
	/* --col-half-margin: 24px;
	--row-margin-bottom: 24px;
	--label-font-size: 12px;
	--label-line-height: 140%;
	--label-padding: 8px;
	--label-margin-bottom: 8px;
	--label-background-color: #E6F0FD;
	--data-padding: 0 8px; */
}

/* モバイル時flexbox解除
---------------------------------------- */
/* タブレットのブレイクポイントで解除し、アイテム横幅100%(デフォルト) */
.parts-boxes[data-break="tablet"] {
	/* --break-width: 100%; */
}
/* スマホのブレイクポイントで解除し、アイテム横幅100%(デフォルト) */
.parts-boxes[data-break="sp"] {
	/* --break-width: 100%; */
}

/*============================================================
 アイコン
*============================================================*/
/* default setting
---------------------------------------- */
.parts-icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    --icon-width: 48px;
    --icon-color: #fff;
    --icon-position: center center;
}
.parts-icon[data-type="search-fixed"] {
    --icon-color: #fff;
}
.parts-icon[data-type="cat"],
.parts-icon[data-type="meta"],
.parts-icon[data-type="area"] {
    width: 24px;
    height: 24px;
    vertical-align: text-bottom;
    margin-right: 8px;
    --icon-width: 24px;
}
.parts-icon[data-type="cat"] {
    --icon-color: #333333;
}
.parts-icon[data-type="meta"] {
    --icon-color: #BCB3B3;
}
.parts-icon[data-type="area"] {
    --icon-color: #fff;
}

/* アイコンファイル設定
---------------------------------------- */
/* 検索 */
.parts-icon[data-icon="hamburger"] {
    mask-image: url(../images/common/hamburger.svg);
    -webkit-mask-image: url(../images/common/hamburger.svg);
}
.parts-icon[data-icon="hamburger-close"] {
    mask-image: url(../images/common/hamburger-close.svg);
    -webkit-mask-image: url(../images/common/hamburger-close.svg);
}
.parts-icon[data-icon="search"] {
    mask-image: url(../images/common/icon-search.svg);
    -webkit-mask-image: url(../images/common/icon-search.svg);
}
/* カテゴリ */
.parts-icon[data-icon="cat-tourism-event"] {
    mask-image: url(../images/common/icon-cat-tourism-event.svg);
    -webkit-mask-image: url(../images/common/icon-cat-tourism-event.svg);
}
.parts-icon[data-icon="cat-camp-climbing-outdoor"] {
    mask-image: url(../images/common/icon-cat-camp-climbing-outdoor.svg);
    -webkit-mask-image: url(../images/common/icon-cat-camp-climbing-outdoor.svg);
}
.parts-icon[data-icon="cat-view-camera"] {
    mask-image: url(../images/common/icon-cat-view-camera.svg);
    -webkit-mask-image: url(../images/common/icon-cat-view-camera.svg);
}
.parts-icon[data-icon="cat-flower-nature"] {
    mask-image: url(../images/common/icon-cat-flower-nature.svg);
    -webkit-mask-image: url(../images/common/icon-cat-flower-nature.svg);
}
.parts-icon[data-icon="cat-gourmand-sweets"] {
    mask-image: url(../images/common/icon-cat-gourmand-sweets.svg);
    -webkit-mask-image: url(../images/common/icon-cat-gourmand-sweets.svg);
}
.parts-icon[data-icon="cat-experience"] {
    mask-image: url(../images/common/icon-cat-experience.svg);
    -webkit-mask-image: url(../images/common/icon-cat-experience.svg);
}
.parts-icon[data-icon="cat-lodging-hotspring"] {
    mask-image: url(../images/common/icon-cat-lodging-hotspring.svg);
    -webkit-mask-image: url(../images/common/icon-cat-lodging-hotspring.svg);
}
.parts-icon[data-icon="cat-sports"] {
    mask-image: url(../images/common/icon-cat-sports.svg);
    -webkit-mask-image: url(../images/common/icon-cat-sports.svg);
}
/* エリア共通 */
.parts-icon[data-icon="area"] {
    mask-image: url(../images/common/icon-area.svg);
    -webkit-mask-image: url(../images/common/icon-area.svg);
}


/*============================================================
 CSS変数 for parts-tabs　※サイトデザインに従い適宜設定
*============================================================*/
/* 標準タイプ　共通設定　
---------------------------------------- */
.parts-tabs:not([data-type]) {
	--tabs-main-color: #1356AF;
	--tabs-sub-color: #fff;

	/*--tab-font-size: 16px;
	--tab-line-height: 160%;
	--tab-width: 196px;
	--tab-padding: 16px 0;
	--tab-margin: 12px;
	--content-padding: 24px 16px;
	--content-background-color: #fff; */
}

/* 標準タイプ　横タブ設定
---------------------------------------- */
/* スマホのブレイクポイントでタブを横スクロール */
.parts-tabs:not([data-type])[data-break="sp-tab-scroll"] {
	/* --sp-scroll-width: 720px; */
}
/* スマホのブレイクポイントでタブ幅均等 */
.parts-tabs:not([data-type])[data-break="sp-tab-even"] {
	--sp-tab-cnt: 3;
}

/* 標準タイプ　縦タブ設定
---------------------------------------- */
.parts-tabs:not([data-type])[data-mpde="vertical"] {
	--tab-width: 200px;
	--tab-height: 120px;
	/* --tab-padding: 24px 16px; */
}

/* borderタイプ　共通設定　
---------------------------------------- */
.parts-tabs[data-type="border"] {
	--tab-count: 3;
	--tabs-notactive-color: #666666;
	--tabs-active-color: initial;
	--tab-font-size: 20px;
	--tab-line-height: 180%;
	--tab-padding: 0 0 16px 0;
	--tabs-noactive-border-color: transparent;
	--tabs-active-border-color: #7B868C;
	--content-padding: 20px 0 0 0;
	--content-background-color: #fff;

	--tablet-tab-font-size: 16px;
	--tablet-tab-line-height: 180%;
	--tablet-tab-padding: 0 0 8px 0;
	--tablet-content-padding: 32px 0 0 0;
	--tablet-scroll-width: calc(200px * var(--tab-count));
}

/*============================================================
 CSS変数 for parts-list　※サイトデザインに従い適宜設定
*============================================================*/
/* 共通設定　
---------------------------------------- */
.parts-list {
	--border-radius: 6px;
	--background-color: #F1EFE9;
	--padding: 24px 16px;
}
.parts-list[data-name="post-list"] {
	--border-radius: 0;
	--background-color: unset;
	--padding: 32px 10;
}

/* オプション設定　リンクリスト
---------------------------------------- */
.parts-list[data-type^="link"] {
	/* --li-border-bottom: solid 1px #d3d3d3;
	--text-decoration: underline; */
}
.parts-list[data-type="link-block"] {
	/* --li-padding: 16px;
	--hover-background-color: unset; */
}
.parts-list[data-type="link-inline"] {
	/* --li-padding-bottom: 16px;
	--li-margin-bottom: 16px; */
}

/* オプション設定　マークあり
---------------------------------------- */
/* 共通 */
.parts-list[data-type^="mark"] {
	--li-margin-bottom: 24px;
	--li-mark-width: 16px;
	--li-mark-margin-right: 8px;
	--li-mark-color: #7B868C;
}
/* ドット */
.parts-list[data-type="mark-dot"] {
	/* --dot-width: 8px;
	--dot-margin-top: 8px; */
}
/* アイコン共通 */
.parts-list[data-type^="mark-icon"] {
	--icon-width: 16px;
}
/* アイコン　ファイル */
.parts-list[data-type="mark-icon-file"] {
	--icon-image: url(../images/parts/icon-list-file.svg);
}

/* アイコン　サイト内リンク */
.parts-list[data-type="mark-icon-inner-link"] {
	--icon-image: url(../images/parts/icon-list-inner-link.svg);
}
/* アイコン　外部リンク */
.parts-list[data-type="mark-icon-ext-link"] {
	--icon-image: url(../images/parts/icon-list-ext-link.svg);
}
/* 連番 */
.parts-list[data-type="mark-num"] {
	/* --num-font-size: 16px;
	--num-line-height: 160%; */
}

/*============================================================
 CSS変数 for parts-table　※サイトデザインに従い適宜設定
*============================================================*/
/* 基本
---------------------------------------- */
dl.parts-table {
	/* --row-border-bottom: solid 1px #EFEFEF;
	--row-padding: 16px 0;
	--dt-width: 120px;
	--dt-margin-right: 8px;
	--font-size: 16px;
	--line-height: 180%; */
	--font-size: 14px;
	--line-height: 200%;
}

/*============================================================
 CSS変数 for parts-accordions　※サイトデザインに従い適宜設定
*============================================================*/
/* 基本
---------------------------------------- */
.parts-accordions {
	--border-bottom: solid 2px #ccc;
	--border-radius: 0;
	--margin-bottom:  0;
	--sw-padding: 36px 84px 36px 96px;
	--sw-font-family: 'Noto Sans JP';
	--sw-font-size: 20px;
	--sw-line-height: 140%;
	--sw-color: inherit;
	--sw-text-align: left;
	--sw-before-width: 27px;
	--sw-before-height: 40px;
	--sw-before-background-image: url(../images/parts/icon-qa-q.svg);
	--sw-before-background-size: 27px auto;
	--sw-before-top:  32px;
	--sw-before-left: 24px;
	--sw-after-width: 26px;
	--sw-after-height: 26px;
	--sw-after-background-image-open: url(../images/parts/icon-accordion-open.svg);
	--sw-after-background-image-close: url(../images/parts/icon-accordion-close.svg);
	--sw-after-background-size: 26px auto;
	--sw-after-top:  36px;
	--sw-after-right: 24px;
	--content-padding: 0 96px 56px 84px;
	--content-font-size: 16px;

	--sp-sw-padding: 32px 56px 32px 32px;
	--sp-sw-font-size: 18px;
	--sp-sw-before-left: 0;
	--sp-sw-before-top: 24px;
	--sp-sw-after-right: 16px;
	--sp-sw-after-top: 32px;
	--sp-content-padding: 0 32px 32px 32px;
	--sp-content-font-size: 16px;
}
.parts-accordions[data-name="category"] {
	--border-bottom: solid 1px #fff;
	--sw-padding: 24px 16px;
	--sw-font-size: 20px;
	--sw-line-height: 180%;
	--sw-letter-spacing: -0.011em;
	--sw-before-display: none;
	--sw-after-width: 24px;
	--sw-after-height: 24px;
	--sw-after-background-image-open: url(../images/parts/icon-accordion-open-arrow.svg);
	--sw-after-background-image-close: url(../images/parts/icon-accordion-close-arrow.svg);
	--sw-after-background-size: 24px auto;
	--sw-after-top:  36px;
	--sw-after-right: 16px;
	--content-padding: 16px 16px 0 16px;
}

/*============================================================
 CSS変数 for pars-panels-h　※サイトデザインに従い適宜設定
*============================================================*/
/* 基本
---------------------------------------- */
.pars-panels-h {
	--panel-count: 3;

	--width: 100vw;
	--max-width: 1920px;
	--height: 600px;
	--animation-width: 1s;
	--animation-opacity: 1.5s;
	--animation-visibility: 1.5s;

	--sw-width: 128px;
	--sw-inner-padding: 10px 16px;

	--content-inner-padding: 24px 36px;
}

/*============================================================
 CSS変数 for parts-img　※サイトデザインに従い適宜設定
*============================================================*/
/* 単独画像
---------------------------------------- */
.parts-img[data-type="block"] {
	/* --text-align: center;
	--margin: 16px 0 32px 0; */
}

/* 画像フィルター
---------------------------------------- */
/* 基本(明るさ) ※ホバー時 */
.parts-img[data-filter="filter01"] {
	/* --filter: unset;
	--hover-filter-transition: filter 0.3s;
	--hover-filter: brightness(110%) opacity(80%); */
}
/* ぼかし */
.parts-img[data-filter="filter02"][data-filter-adjust="blur"] {
	--filter: blur(5px);
	--hover-filter: var(--filter);
}
/* コントラスト */
.parts-img[data-filter="filter03"] {
	--filter: contrast(160%);
	--hover-filter: var(--filter);
}
/* グレースケール */
.parts-img[data-filter="filter04"] {
	--filter: grayscale(70%);
	--hover-filter: var(--filter);
}
/* 色相回転 */
.parts-img[data-filter="filter05"] {
	--filter: hue-rotate(180deg);
	--hover-filter: var(--filter);
}
/* 反転 */
.parts-img[data-filter="filter06"] {
	--filter: invert(100%);
	--hover-filter: var(--filter);
}
/* 透過度 */
.parts-img[data-filter="filter07"] {
	--filter: opacity(70%);
	--hover-filter: var(--filter);
}
/* 彩度 */
.parts-img[data-filter="filter08"] {
	--filter: saturate(40%);
	--hover-filter: var(--filter);
}
/* セピア */
.parts-img[data-filter="filter09"] {
	--filter: sepia(70%);
	--hover-filter: var(--filter);
}
/* ドロップシャドウ */
.parts-img[data-filter="filter10"] {
	--filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.6));
	--hover-filter: var(--filter);
}

/* アスペクト比 */
.parts-img[data-aspect="custom-7-3"] {
	--aspect-ratio: 7 / 3;
}

/* 透過オーバーレイ
---------------------------------------- */
.parts-img[data-type="overlay"] {
	--background-color: rgba(255, 255, 255, 0.3);
}


/*============================================================
 CSS変数 for parts-text　※サイトデザインに従い適宜設定
*============================================================*/
/* 行数制限(省略文字「...」付)
---------------------------------------- */
/* 1行　※デフォルト */
.parts-text[data-type="clamp"] {
	/* --webkit-line-clamp: 2; */
	/* --sp-webkit-line-clamp: var(--webkit-line-clamp) */
}
/* 2行 */
.parts-text[data-type="clamp-1"] {
	--webkit-line-clamp: 1;
	--sp-webkit-line-clamp: 2;
}
/* 3行 */
.parts-text[data-type="clamp-3"] {
	--webkit-line-clamp: 3;
	--sp-webkit-line-clamp: 2;
}

/*============================================================
 CSS変数 for parts-modal　※サイトデザインに従い適宜設定
*============================================================*/
.parts-modal {
	--padding: 0;
	--background-color: transparent;
	--content-max-width: 100%;
	--content-background-color: #000000e6;
	--content-padding: 32px 24px;
	--close-top: 0;
	--close-right: 0;
	--close-size: 64px;
	--close-background-color: : transparent;
	--close-background-size: 20px auto;
	--close-border-radius: 0; 

	--sp-padding: 0;
	--sp-content-padding: 32px 24px;
}


/*============================================================
 CSS変数 for mw_wp_form　※サイトデザインに従い適宜設定
*============================================================*/
.mw_wp_form {
	--border-color: #D8D8D8;
	--checked-color: #4A8B2C;
}