/*
Copyright (c) 2024 Revolme.Lab Yamasaki Masaki
デザインCSS
*/
@charset "utf-8";

:root {
    --base-font-size-pc:14; /* 文字サイズ(パソコン) */
    --base-font-size-tb:14; /* 文字サイズ(タブレット) */
    --base-font-size-sp:12; /* 文字サイズ(スマートフォン) */
    --base-display-width-sp:320; /* スマートフォン想定画面幅 */

    --focus-color:#485fc7; /* 標準UIフォーカス */
    --error-color:#f14668; /* 標準UI警告*/


    --font-color-reverse:#FFFFFF;
    --font-color-note:#999999;
    --font-color-danger:#FFFFFF;

    --theme-color:#b89c47;
    --theme-glay:#EEEEEE;
    --theme-white:#FFFFFF;

    --border-default-color:#CCCCCC;
    --valid-color:#32a852;
    --invalid-color:#a83232;

    --fs-xx-large:2.0em;
    --fs-x-large:1.6em;
    --fs-large:1.2em;
    --fs-normal:1.0em;
    --fs-small:0.9em;
    --fs-x-small:0.8em;
}


@container pc-layout (width > 1px) {
    body{font-size: calc(1.0rem * var(--base-font-size-pc) / 10);}
}
@container tab-layout (width > 1px) {
    body{font-size: calc(1.0rem * var(--base-font-size-tb) / 10);}
}
@container sp-layout (width > 1px) {
    body{font-size: calc(100vw / var(--base-display-width-sp) * var(--base-font-size-sp));}
}

.fc-error
{
    color:var(--error-color);
}

/* **************** */
/* Google Icons     */
/* **************** */
.icon.material-symbols-outlined {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;

    /* vertical-align: middle; */
    vertical-align: text-bottom;
    font-size: 1.5em;
    user-select: none;
}
.icon.valid
{
    color:var(--valid-color);
}
.icon.invalid
{
    color:var(--invalid-color);
}
.icon.theme
{
    color:var(--theme-color);
}

/* **************** */
/* 初期化前シールド  */
/* **************** */
#initedShield .ball-scale-multiple > div
{
    background-color: var(--theme-color);
}
/* **************** */
/* 通信中シールド    */
/* **************** */
#loadingShield .ball-pulse > div
{
    background-color: var(--theme-color);
}


/* **************** */
/* 基本レイアウト    */
/* **************** */
#global-header-contents
{
    background-color:var(--theme-color);
    color:var(--font-color-reverse);
    font-size:0.8em;
    padding:0.25em 0.25em;
}
#header-contents .header-title
{
    background-color:var(--theme-white);
    border-bottom: 1px solid var(--border-default-color);
    padding:2.0em 1.0em;
}
#header-contents .header-title h1
{
    border-left:0.25em solid var(--theme-color);
    padding-left:0.5em;
}
#header-contents .header-title h1 .main
{
    font-size:1.4em;
    font-weight:bold;
    line-height:1.2;
}
#header-contents .header-title p
{
    margin-top:0.5em;
    font-size:0.8em;
    font-weight:normal;
    color:var(--font-color-note);
}
#header-contents .header-navi
{
    display: flex;
    justify-content: center;
    align-items: stretch;
    border-bottom:1px solid var(--border-default-color)
}
#header-contents .header-navi .navi-item
{
    flex:1 0 auto;
    display: grid;
    grid-template:
    "..... icon  ....."auto
    "..... label ....."auto
    /1fr   auto  1fr;
    padding:0.5em;
}
#header-contents .header-navi .navi-item .navi-item-icon
{
    grid-area: icon;
    text-align:center;
    color:var(--theme-color);
}
#header-contents .header-navi .navi-item .navi-item-label
{
    grid-area: label;
    text-align:center;
    font-size: 0.8em;
}
#header-contents .header-navi .navi-item:hover,
#header-contents .header-navi .navi-item.active
{
    background-color: var(--theme-color);
}
#header-contents .header-navi .navi-item:hover .navi-item-icon,
#header-contents .header-navi .navi-item:hover .navi-item-label,
#header-contents .header-navi .navi-item.active .navi-item-icon,
#header-contents .header-navi .navi-item.active .navi-item-label

{
    color:var(--theme-white);
}

#global-navi-contents
{
    border-bottom:1px solid var(--border-default-color);
    background-color:var(--theme-white);
    padding:0.5em;
    /* height:100%;
     */
}
#main-contents {
    padding:1.0em;
}
#main-contents.centering {
    display: grid;
    place-items: center;
}
#global-footer-contents
{
    background-color:var(--theme-color);
    color:var(--font-color-reverse);
    font-size:0.8em;
    padding:0.25em 0.25em;
}
#global-navi-contents
{
    display: grid;
    align-items: center;
    grid-template:
    "logo ..... search ..... account" auto
    /auto 0.5em 1fr    0.5em auto;
}
#global-navi-contents h1.logo
{
    grid-area: logo;
}
#global-navi-contents h1.logo .main
{
    display:block;
    font-weight:bold;
    font-size: 1.2em;
    line-height: 1.2;
}
#global-navi-contents h1.logo .sub
{
    display:block;
    font-size: 0.8em;
    line-height: 1.2;
}
#global-navi-contents .search
{
    grid-area: search;
    text-align: center;
}
#global-navi-contents .search .icon
{
    margin-left:0.5em;
    cursor: pointer;
}
#global-navi-contents .account
{
    grid-area: account;
}
#global-navi-contents .account img
{
    border-radius:100%;
    border:2px solid var(--theme-color);
    width:2.5em;
    height:2.5em;
    display:block;
    cursor:pointer;
}

@container sp-layout (width > 1px) {
    #global-navi-contents
    {
        display: grid;
        grid-template:
        "logo   .....  account" auto
        ".....  .....  .....  " 0.5em
        "search search search " auto
        /1fr    0.5em  auto;
    }

    #global-navi-contents .search input
    {
        width:100%;
    }
    #global-navi-contents .search .icon
    {
        display: none;
    }
}

#footer #footer-contents
{
    background-color: #fcfbf8;
    border-top:1px solid var(--border-default-color);
}

/* サブ機能メニュー */
.sub-function
{
    border: 1px solid var(--border-default-color);
    border-radius: 0.5em;

    display: flex;
    align-items: center;
    margin-bottom: 1.0em;
    padding:0.25em;

    overflow-x: auto;
}
.sub-function > span
{
    flex: 1 1 auto;
}
.sub-function > label
{
    flex: 0 0 auto;
}
.sub-function > .button
{
    flex: 0 0 auto;
    margin:0.25em;

    font-size:0.8em;
}

/* 機能別メインメニュー */
.main-ope
{
    display: flex;
    align-items: center;
    margin: -0.25em;
    margin-bottom: 0.75em;
}
.main-ope > span
{
    flex: 1 1 auto;
}
.main-ope > .button
{
    flex: 0 0 auto;
    margin:0.25em;
}

/* ボタンリスト */
.button-list
{
    display: flex;
    align-items: center;
    margin: -0.25em;
}
.button-list.button-list-right
{
    justify-content: flex-end;
}
.button-list.button-list-center
{
    justify-content: center;
}
.button-list > span
{
    flex: 1 1 auto;
}
.button-list > .button
{
    flex: 0 0 auto;
    margin:0.25em;
}


/* 汎用BOXレイアウト */
.box
{
    box-shadow: 0px 0px 0px 1px #00000030;
    border-radius:0.25em;
    overflow: hidden;
}
.box > * + *
{
    margin-top:1.0em;
}
.box .box__title
{
    padding:0.5em;
    background-color: var(--theme-glay);
    border-bottom:0.2em solid var(--theme-color);

    display: grid;
    grid-template:
    "icon ..... ..... menu "1fr
    "icon ..... main  menu "auto
    "icon ..... sub   menu "auto
    "icon ..... ..... menu "1fr
    /auto 0.5em 1fr   auto;
}
.box .box__title .box__title-icon
{
    grid-area: icon;
    display: grid;
    place-items: center;
    color:var(--theme-color);
    font-size:1.5em;
}
.box .box__title .box__title-label-main
{
    grid-area: main;
    font-size:1.2em;
    font-weight:bold;
}
.box .box__title .box__title-label-sub
{
    grid-area: sub;
    font-size:0.8em;
    color:var(--font-color-note);
}
.box .box__title .box__title-menu
{
    grid-area: menu;
}
.box .box__sub-title
{
    margin-left:0.5em;
    margin-right:0.5em;
}
.box .box__sub-title .box__sub-title-label-main
{
    border-left:0.25em solid var(--theme-color);
    padding-left: 0.4em;
    font-weight:bold;
}

.box .box__contents
{
    margin-left:0.5em;
    margin-right:0.5em;
}

.box .box__contents_tab
{
    margin-left:0.5em;
    margin-right:0.5em;
    border-bottom:1px solid #CCCCCC;
}
.box .box__contents_tab .button-list .button
{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.box .box__footer
{
    padding:0.5em;
    background-color: var(--theme-glay);
    border-top:1px solid var(--theme-color);
}

/* 汎用BOXレイアウト */
.flex-12
{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin:-0.5em;
}
.flex-12__cell {margin:0.5em;}
.cell-1  {flex:0 0 calc(  8.33333% - 1.0em);}
.cell-2  {flex:0 0 calc( 16.66667% - 1.0em);}
.cell-3  {flex:0 0 calc( 25.00000% - 1.0em);}
.cell-4  {flex:0 0 calc( 33.33333% - 1.0em);}
.cell-5  {flex:0 0 calc( 41.66667% - 1.0em);}
.cell-6  {flex:0 0 calc( 50.00000% - 1.0em);}
.cell-7  {flex:0 0 calc( 58.33333% - 1.0em);}
.cell-8  {flex:0 0 calc( 66.66667% - 1.0em);}
.cell-9  {flex:0 0 calc( 75.00000% - 1.0em);}
.cell-10 {flex:0 0 calc( 83.33333% - 1.0em);}
.cell-11 {flex:0 0 calc( 91.66667% - 1.0em);}
.cell-12 {flex:0 0 calc(100.00000% - 1.0em);}

/* 検索結果テーブル*/
table.result-list
{
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
    border:0px solid transparent;
    border-top:1px solid var(--border-default-color);
}
table.result-list th,
table.result-list td
{
    /* width:10px;
    white-space:nowrap; */
    padding:0.5em;
    border:0px solid transparent;
    background-color: var(--theme-white);
    border-bottom:1px solid var(--border-default-color);
}
table.result-list th > div,
table.result-list td > div
{
    width: 100%;
}
table.result-list thead tr th
{
    width:10px;
    white-space:nowrap;
    font-size: 0.8em;
}
table.result-list tr th.check,
table.result-listle tr td.check
{
    width:1px;
}
table.result-list tr th.flex,
table.result-list tr td.flex
{
    width:auto;
    max-width: 100%;
}
.search-result.no-scroll > table tr td.flex
{
    white-space:unset;
}
table.result-list tr th.prop,
table.result-list tr td.prop
{
    font-size: 0.8em;
}
table.result-list tr th.num,
table.result-list tr td.num
{
    white-space:nowrap;
}
table.result-list tr th.num2,
table.result-list tr td.num2
{
    min-width:10em;
}
table.result-list tr th.ope,
table.result-list tr td.ope
{
    width:10px;
    white-space:nowrap;

    position: sticky;
    right:0px;
    vertical-align: middle;
    padding:0.5em 0.5em;
}
table.result-list tr th.ope button,
table.result-list tr td.ope button
{
    font-size:0.8em;
}

table.result-list tbody tr:hover th,
table.result-list tbody tr:hover td
{
    background-color: var(--theme-glay);
}
@container sp-layout (width > 1px) {
    /* table.result-list,
    table.result-list thead,
    table.result-list tbody,
    table.result-list tr,
    table.result-list thead tr th,
    table.result-list thead tr td,
    table.result-list tbody tr th,
    table.result-list tbody tr td
    {
        display:block;
        width:100%;
    } */
    table.result-list,
    table.result-list tbody,
    table.result-list tbody tr,
    table.result-list tbody tr th,
    table.result-list tbody tr td
    {
        display:block;
        width:100%;
    }
    table.result-list thead
    {
        display: none;
    }
    table.result-list tbody tr td
    {
        border-bottom: 1px dashed var(--border-default-color);
    }
    table.result-list tbody tr td:last-child
    {
        border-bottom: 1px solid var(--border-default-color);
    }
    table.result-list tbody tr td.ope
    {
        width:100%;
    }
}

/* ページネーション */
.paginate
{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    margin:-0.25em;
}
.paginate > *
{
    flex:0 0 auto;
    width: auto;
    margin:0.25em;
}
.paginate > select
{
    font-size:0.9em;
}
.paginate > .button
{
    font-size:0.8em;
}

/* スペックテーブル*/
table.spec-list
{
    width:100%;
    border-spacing:0px;
    border-collapse:separate;
    border:0px solid transparent;
    border-top:1px solid var(--border-default-color);
    border-left:1px solid var(--border-default-color);
}
table.spec-list th,
table.spec-list td
{
    padding:0.5em;
    border:0px solid transparent;
    background-color: var(--theme-white);
    border-bottom:1px solid var(--border-default-color);
    border-right:1px solid var(--border-default-color);
}
table.spec-list tr th
{
    width:10px;
    white-space:nowrap;
    background-color: var(--theme-glay);
    vertical-align: middle;
}
table.spec-list tr th.check,
table.spec-listle tr td.check
{
    width:1px;
}
table.spec-list tr th.flex,
table.spec-list tr td.flex
{
    width:auto;
    max-width:100%;
}

table.spec-list tr th.prop,
table.spec-list tr td.prop
{
    font-size: 0.8em;
}
table.spec-list tr th.num,
table.spec-list tr td.num
{
    min-width:6em;
}
table.spec-list tr th.num2,
table.spec-list tr td.num2
{
    min-width:10em;
}
table.spec-list tr th.ope,
table.spec-list tr td.ope
{
    position: sticky;
    right:0px;
    vertical-align: middle;
    padding:0 0.5em;
}
table.spec-list tr th.ope button,
table.spec-list tr td.ope button
{
    font-size:0.8em;
}

table.spec-list tbody tr:hover th,
table.spec-list tbody tr:hover td
{
    background-color: var(--theme-glay);
}
@container sp-layout (width > 1px) {
    table.spec-list,
    table.spec-list thead,
    table.spec-list tbody,
    table.spec-list tr,
    table.spec-list thead tr th,
    table.spec-list thead tr td,
    table.spec-list tbody tr th,
    table.spec-list tbody tr td
    {
        display:block;
        width:100%;
    }
}

/* マスタ選択 */
.dialog-body.master-list
{
    display: grid;
    grid-template:
      "search " auto
      "list   " auto
      / 100% ;
}
.dialog-body.master-list .search-keyword
{
    grid-area: search;
    position:sticky;
    top:0;
    background-color: #FFFFFF;
    padding:0.25em;
}
.dialog-body.master-list ul
{
    grid-area: list;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dialog-body.master-list ul > li
{
    margin: 0;
    padding:0.5em;
    border-bottom: 1px solid var(--border-default-color);
    cursor:pointer;
    display: flex;
    align-items: center;
}
.dialog-body.master-list ul > li:hover
{
    background-color: var(--theme-glay);
}
.dialog-body.master-list ul > li > span
{
    flex:1 0 auto;
}

/* タグ一覧 */
ul.tag
{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding:0;
    margin:-0.25em;
    font-size:0.8em;
    list-style: none;
    width: max-content;
}

ul.tag li
{
    flex:0 0 auto;
    margin:0.25em;
    padding:0.00em 0.5em;

    border-radius: 0.25em;
    border:1px solid var(--border-default-color);
    background-color:var(--theme-glay);
    
    list-style: none;
}

/* 圧縮表示 */
.compress
{
    max-height:5.5em;
    overflow: hidden;
}
.compress > .toggle
{
    cursor: pointer;
    position:absolute;
    bottom:0;
    height: 2.5em;
    text-align: center;
    width:100%;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
}
.compress > .toggle::after
{
    content: "+ Open";
    font-weight: bold;
}
.compress.show
{
    max-height:none;
    padding-bottom:3.0em;
}
.compress.show > .toggle
{
    background: none;
}
.compress.show > .toggle::after
{
    content: "- Close";
    font-weight: bold;
}

/* ファイル一覧*/
ul.file-list
{
    margin: 0.0em;
    padding: 0.0em;
    list-style: none;
}
ul.file-list > li
{
    margin: 0.0em;
    padding: 0.0em;
    list-style: none;
    margin-bottom: 0.5em;

    display: grid;
    grid-template:
    "file_name ..... ope "1fr
    /1fr       0.5em auto;
}
ul.file-list > li .file_name
{
    grid-area: file_name;
    display: flex;
    align-items: center;
}
ul.file-list > li .ope
{
    grid-area: ope;
}

/* 段落 */
.section
{
    width:100%;
    padding:5.0em 0;
}
.section .row
{
    max-width:1000px;
    margin:0 auto;
}
.section .row + .row
{
    margin-top:2.0em;
}
@container sp-layout (width > 1px) {
    .section
    {
        max-width:100%;
    }
    .section .row
    {
        max-width:calc(100vw - 2.0em);
        margin:0 auto;
    }
}

/* ログインボックス */
.dialog-body.dialog-body-login
{
    padding:2.0em;
}


/* メニューカードリスト */
.menu-card-list
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    margin:-1.0em;
}
.menu-card-list .menu-card-item
{
    margin:1.0em;
    flex: 0 0 calc(50% - 2.0em);

    display: grid;
    align-items: center;
    grid-template:
    "..... ..... ..... .....       ..... " 1.0em
    "..... icon  ..... label       ..... " auto
    "..... icon  ..... description ..... " auto
    "..... ..... ..... .....       ..... " 1.0em
    /1.0em 3.0em 0.5em 1fr         1.0em;

    background-color:var(--theme-glay);
    border:1px solid var(--border-default-color);
}
.menu-card-list .menu-card-item .menu-card-item-icon
{
    grid-area: icon;
    font-size:3.0em;
    color:var(--theme-color);
}
.menu-card-list .menu-card-item .menu-card-item-label
{
    grid-area: label;
    font-size: 1.2em;
    font-weight: bold;
}
.menu-card-list .menu-card-item .menu-card-item-description
{
    grid-area: description;
    font-size: 0.9em;
}
.menu-card-list .menu-card-item:hover .menu-card-item-label
{
    text-decoration: underline;
}
@container sp-layout (width > 1px) {
    .menu-card-list .menu-card-item
    {
        flex: 0 0 calc(100% - 2.0em);
    }
}

/* ユーザプロフィールアイコン */
img.user-profile-icon
{
    border:2px solid var(--theme-color);
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* アイキャッチ画像 */
.eyecatch
{
    border:2px solid var(--theme-color);
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
/* サムネイル */
.thumbnail
{
    border:2px solid var(--theme-color);
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.thumbnail-list
{
    display: flex;
    flex-wrap: wrap;
    margin:-0.5em;
}
.thumbnail-list .thumbnail
{
    margin:0.5em;
    flex:0 0 calc(16.66666% - 1.0em);
    width:calc(16.66666% - 1.0em);
}

/* 画像アップロード */
.input-field__editFile
{
    display: inline-block;
}
.input-field__editFile img
{
    display: block;
    cursor:pointer;
}
.input-field__editFile .editableIdon
{
    display: grid;
    place-items: center;

    border-radius: 100%;
    width:2.5em;
    aspect-ratio: 1 / 1;

    background-color: var(--theme-color);
    color:var(--theme-white);

    position:absolute;
    bottom:0.5em;
    right:0.5em;
}

/* 複数画像アップロード */
.input-field__fileList
{
    display: flex;
    flex-wrap: wrap;
    margin:-0.5em;
}
.input-field__fileList .thumbnail
{
    margin:0.5em;
    flex: 0 0 calc(16.66666% - 1.0em);
    border:1px solid var(--theme-color);
    aspect-ratio: 1 / 1;
}
.input-field__fileList .thumbnail img
{
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.input-field__fileList .thumbnail.thumbnail-default
{
    background-color: var(--theme-glay);
    cursor:pointer;
}
.input-field__fileList .thumbnail .icon
{
    position:absolute;
    bottom:0.5em;
    right:0.5em;
}
.input-field__fileList .thumbnail.thumbnail-default .icon
{
    top:50%;
    left:50%;
    bottom:auto;
    right:auto;

    transform: translate(-50%, -50%);
}
/* 段落見出し */
h2.row
{
}
h2.row::after
{
    content: "";
    display: block;
    height:1px;
    width:5em;
    background-color: var(--theme-color);

    position:absolute;
    top:calc(100% + 0.5em);
    left:50%;
    transform: translateX(-50%);
}
h2.row .main
{
    display: inline-block;
    width: 100%;
    font-size:2.0em;
    font-weight:bold;
    text-align: center;
}

h3.sub-title
{
    border-left:0.25em solid var(--theme-color);
    padding-left:0.5em;
    margin-bottom:1.0em;
}
h3.sub-title .main
{
    font-size:1.4em;
    font-weight:bold;
}
h3.tos-title
{
    margin-bottom:1.0em;
}
h3.tos-title .main
{
    font-size:1.4em;
    font-weight:bold;
}

/* プロジェクトサマリ */
.project-summary
{
    border:1px solid var(--border-default-color);
    border-radius: 0.5em;

	display: grid;
    align-items: center;
	grid-template:
	  " ...... ......   ...... ...... ...... " 1.0em
	  " ...... eyecatch ...... detail ...... " auto
	  " ...... ......   ...... ...... ...... " 1.0em
	  / 1.0em  25%      1.0em  1fr    1.0em;
}
.project-summary .project-eyecatch
{
    grid-area: eyecatch;
}
.project-summary .project-eyecatch .eyecatch
{
    display: block;
}
.project-summary .project-detail
{
    grid-area: detail;
}
.project-summary .project-detail .title
{
    font-weight: bold;
    font-size: var(--fs-large);
}
.project-summary .project-detail .summary
{
    margin-top: 0.5em;
}

/**/
.txt-ellipsis {
    /* オーバーした要素を非表示にする*/
    overflow: hidden;
  
    /* 改行を半角スペースに変換することで、1行にする */
    white-space: nowrap;
  
    /* 幅を指定しないとテキストの長さによって要素の幅が変わるため指定 */
    width: 100%;
  
    /* オーバーしたテキストを３点リーダーにする */
    text-overflow: ellipsis;
}

/* infoボックス */
.notice-block
{

	display: grid;
    align-items: center;
	grid-template:
    " ...... ...... ...... ...... ......" 1.0em
    " ...... icon   ...... notice ......" auto
    " ...... ...... ...... ...... ......" 1.0em
    / 1.0em  auto   0.5em  1fr   1.0em;

    border-radius: 0.5em;
    border:1px solid var(--border-default-color);
}
.notice-block > .icon
{
    align-self: flex-start;
	grid-area: icon;
    font-size: 2.5em;
    color:var(--theme-color);
}
.notice-block > ul
{
	grid-area: notice;
}


/* 返礼品リスト */
.return-list
{

}
.return-list .return-list-item
{
	display: grid;
    align-items: center;
	grid-template:
    " ...... ......   ...... ...... ...... ......   ...... " 1.0em
    " ...... eyecatch ...... ...... ...... ......   ...... " 1fr
    " ...... eyecatch ...... title  title  title    ...... " auto
    " ...... eyecatch ...... amount nop    schedule ...... " auto
    " ...... eyecatch ...... detail detail detail   ...... " auto
    " ...... eyecatch ...... ...... ...... ......   ...... " 1fr
    " ...... ......   ...... ...... ...... ......   ...... " 1.0em
    / 1.0em  20%      0.5em  1fr    1fr    1fr      1.0em;

    border:1px solid var(--border-default-color);
    border-radius:0.5em;
}
.return-list .return-list-item + .return-list-item
{
    margin-top:1.0em;
}
.return-list .return-list-item .eyecatch
{
    grid-area: eyecatch;
    align-self: flex-start;
}
.return-list .return-list-item .title
{
    grid-area: title;
}
.return-list .return-list-item .title .main
{
    font-weight: bold;
    font-size: 1.2em;
}
.return-list .return-list-item .amount
{
    grid-area: amount;
}
.return-list .return-list-item .nop
{
    grid-area: nop;
}
.return-list .return-list-item .schedule
{
    grid-area: schedule;
}
.return-list .return-list-item .detail
{
    grid-area: detail;
    padding-top: 0.5em;
    margin-top: 0.5em;
    border-top: 1px dashed var(--border-default-color);
}
.return-list .return-list-item .amount .label,
.return-list .return-list-item .nop .label,
.return-list .return-list-item .schedule .label
{
    font-size: 0.9em;
}
.return-list .return-list-item .amount .value,
.return-list .return-list-item .nop .value,
.return-list .return-list-item .schedule .value
{
    font-weight: bold;
}
@container sp-layout (width > 1px) {
    .return-list .return-list-item
    {
        display: grid;
        align-items: center;
        grid-template:
        " ...... ......   ...... " 1.0em
        " ...... eyecatch ...... " auto
        " ...... ......   ...... " 0.5em
        " ...... title    ...... " auto
        " ...... amount   ...... " auto
        " ...... nop      ...... " auto
        " ...... schedule ...... " auto
        " ...... detail   ...... " auto
        " ...... ......   ...... " 1.0em
        / 1.0em  1fr      1.0em;
    
        border:1px solid var(--border-default-color);
        border-radius:0.5em;
    }
}


/* メインビジュアル */
#header-contents .index-visual
{
    overflow: hidden;
}
#header-contents .index-visual .blur
{
    position: absolute;
    width: calc(100% + var(--bg-blur) * 2);
    height: calc(100% + var(--bg-blur) * 2);
    top:var(--bg-blur) * -1;
    bottom:var(--bg-blur) * -1;
    left:var(--bg-blur) * -1;
    right:var(--bg-blur) * -1;

    background-image: var(--bg-image);
    background-position: center center ;
    background-repeat: no-repeat;
    background-size: cover;

    filter: blur(var(--bg-blur));
}
#header-contents .index-visual .alpha
{
    position: absolute;
    width: calc(100%);
    height: calc(100%);
    top:0;
    bottom:0;
    left:0;
    right:0;
    /* background-color: rgba(184, 156, 71, 0.3); */
    background-color: rgba(255, 255, 255, 0.4);
}
#header-contents .index-visual .main-visual
{
    aspect-ratio: 16 / 9;
    background-image: var(--bg-image);
    background-position: center center ;
    background-repeat: no-repeat;
    background-size: cover;

    max-width: 1000px;
    margin: 0 auto;

    display: grid;
	grid-template:
	  " ...... ...... ...... " 0.5fr
	  " ...... copy   ...... " auto
	  " ...... ...... ...... " 0.5fr
	  / 0.5fr  auto   0.5fr ;
}
#header-contents .index-visual .main-copy
{
	grid-area: copy;

    padding:2.0em;
    border-radius: 0.5em;
    background-color: rgba(255, 255, 255, 0.4);
    border:2px solid #FFFFFF;
}
#header-contents .index-visual .main-copy h1
{
    text-align: center;
    --text-outline:rgba(0,0,0,0.6);
}
#header-contents .index-visual .main-copy h1 .main
{
    color: #FFFFFF;
    font-size: var(--fs-x-large);
    font-weight:bold;
    display: block;

    text-shadow:
        1px 0px 1px var(--text-outline),
        0px 1px 1px var(--text-outline),
        1px 1px 1px var(--text-outline),
        -1px -1px 1px var(--text-outline),
        -1px 0px 1px var(--text-outline),
        0px -1px 1px var(--text-outline);
}
#header-contents .index-visual .main-copy h1 .sub
{
    color: #FFFFFF;
    display: block;

    text-shadow:
        1px 0px 1px var(--text-outline),
        0px 1px 1px var(--text-outline),
        1px 1px 1px var(--text-outline),
        -1px -1px 1px var(--text-outline),
        -1px 0px 1px var(--text-outline),
        0px -1px 1px var(--text-outline);
}
@container sp-layout (width > 1px) {
    #header-contents .index-visual .main-visual
    {
        aspect-ratio: 1 / 1;
    }
}

/* プロジェクト：タイル表示 */
.tile-list
{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin:-0.5em;
}
.tile-list .tile-item
{
    flex: 0 0 calc(25.00000% - 1.0em);
    width:calc(25.00000% - 1.0em);
    margin:0.5em;
}
.tile-list .tile-item.project-tile
{
    flex: 0 0 calc(25.00000% - 1.0em);
    width:calc(25.00000% - 1.0em);
    margin:0.5em;
}
@container sp-layout (width > 1px) {
    .tile-list .tile-item
    {
        flex: 0 0 calc(50.00000% - 1.0em);
        width:calc(50.00000% - 1.0em);
    }
    .tile-list .tile-item.project-tile
    {
        flex: 0 0 calc(50.00000% - 1.0em);
        width:calc(50.00000% - 1.0em);
    }
}
.project-tile
{
    overflow: hidden;
    border-radius: 0.5em;
    border:1px solid var(--border-default-color);
    
    display: grid;
	grid-template:
	  " eyecatch eyecatch eyecatch eyecatch " 0.5fr
	  " ......   ......     ......    ......   " 0.5em
	  " ......   title      title     ......   " auto
	  " ......   category   category  ......   " auto
	  " ......   progress   amount    ......   " auto
	  " ......   supporters days_left ......   " auto
	  " ......   ......   ......   ......      " 0.5em
	  / 0.5em    1fr      auto     0.5em ;

      width:calc(25.00000% - 2.0em);
      margin: 1.0em;
}
.project-tile > img
{
	grid-area: eyecatch;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.project-tile > h3
{
	grid-area: title;
}
.project-tile > h3 .main
{
    font-weight: bold;
}
.project-tile .category
{
	grid-area: category;
    margin: 0;
    list-style: none;
}
.project-tile .category li
{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-small);
    color:var(--font-color-note);
}
.project-tile .progress
{
	grid-area: progress;
    align-self: center;
}
.project-tile .progress.progress-bg
{
    height:1.0em;
    border-radius: 0.5em;
    background-color: var(--theme-glay);
}
.project-tile .progress.progress-bg .progress-rate
{
    position:absolute;
    top:0;
    left:0;

    height:1.0em;
    border-radius: 0.5em;
    background-color: var(--theme-color);
    width:var(--progress-rate);
    max-width:100%;
    min-width: 25%;
}
.project-tile .progress.progress-bg .progress-rate .label
{
    position: absolute;
    top:50%;
    left:0.5em;
    transform: translateY(-50%);
    color:var(--theme-white);
    font-size: var(--fs-x-small);
}
.project-tile .amount
{
	grid-area: amount;
    text-align: right;
    font-weight: bold;
    font-size: var(--fs-large);
}
.project-tile .supporters
{
	grid-area: supporters;
    align-self: center;
}
.project-tile .supporters .icon
{
    font-size: var(--fs-small);
    color: var(--theme-color);
}
.project-tile .days_left
{
	grid-area: days_left;
    text-align: right;
    align-self: center;
}
.project-tile .days_left .icon
{
    font-size: var(--fs-small);
    color: var(--theme-color);
}

/* カルーセルスタイル */
.carousel-parent.slick-initialized .slick-slide
{
    width:300px;
}
.carousel-parent.slick-initialized .slick-slide.project-tile
{
    display: grid;
    width:310px;
}
.carousel-ope
{
    position:absolute;
    top:50%;
    width:100%;
}
.carousel-ope .carousel-prev,
.carousel-ope .carousel-next
{
    position:absolute;
    transform: translateY(-50%);
}
.carousel-ope .carousel-prev
{
    left:0;
}
.carousel-ope .carousel-next
{
    right:0;
}

/* プロジェクトヘッダー */
.project-header
{
    display: grid;
	grid-template:
	  " attr        attr        attr        " auto
	  " .....       .....       .....       " 1.0em
	  " images      .....       summary     " auto
	  " .....       .....       .....       " 1.0em
	  " description description description " auto
	  / 60%         1.5em       1fr;
}
.project-header .project-attribute
{
    grid-area: attr;
}
.project-header .project-images
{
    grid-area: images;
}
.project-header .support-summary
{
    grid-area: summary;
}
.project-header .project-description
{
    grid-area: description;
}
.project-header .project-attribute
{
    display: grid;
	grid-template:
	  " ..... author ....  category ..... " auto
	  / 1fr   auto   1.0em auto     1fr;
      color:var(--font-color-note);
}
.project-header .project-attribute .author
{
    grid-area: author;
}
.project-header .project-attribute .category
{
    grid-area: category;
}
.project-header .support-summary
{
    border-radius: 0.5em;
    border: 1px solid var(--border-default-color);
    padding:1.0em;
}
.project-header .support-summary .support-amount
{

}
.project-header .support-summary .support-amount .label
{
    color:var(--font-color-note);
    display: flex;
    align-items: center;
}
.project-header .support-summary .support-amount .amount
{
    font-size: var(--fs-xx-large);
    font-weight: bold;
    text-align: right;
}
.project-header .support-summary .support-amount  .progress
{
	grid-area: progress;
    align-self: center;
}
.project-header .support-summary .support-amount  .progress.progress-bg
{
    height:1.0em;
    border-radius: 0.5em;
    background-color: var(--theme-glay);
}
.project-header .support-summary .support-amount  .progress.progress-bg .progress-rate
{
    position:absolute;
    top:0;
    left:0;

    height:1.0em;
    border-radius: 0.5em;
    background-color: var(--theme-color);
    width:var(--progress-rate);
    max-width:100%;
    min-width: 10%;
}
.project-header .support-summary .support-amount  .progress.progress-bg .progress-rate .label
{
    position: absolute;
    top:50%;
    left:0.5em;
    transform: translateY(-50%);
    color:var(--theme-white);
    font-size: var(--fs-x-small);
}
.project-header .support-summary .support-amount .target-amount
{
    text-align: right;
}
.project-header .support-summary .support-member .label
{
    color:var(--font-color-note);
    display: flex;
    align-items: center;
}
.project-header .support-summary .support-member .supporter-count
{
    font-size: var(--fs-xx-large);
    font-weight: bold;
    text-align: right;
}
.project-header .support-summary .support-days-left .label
{
    color:var(--font-color-note);
    display: flex;
    align-items: center;
}
.project-header .support-summary .support-days-left .days-left
{
    font-size: var(--fs-xx-large);
    font-weight: bold;
    text-align: right;
}
@container sp-layout (width > 1px) {
    .project-header
    {
        grid-template:
          " attr        " auto
          " .....       " 1.0em
          " images      " auto
          " .....       " 1.0em
          " summary     " auto
          " .....       " 1.0em
          " description " auto
          / 1fr;
    }
}

/* プロジェクト詳細部分 */
.project-info
{
    display: grid;
	grid-template:
	  " main ..... sub " auto
	  / 1fr  2.0em 400px;
}
.project-info .project-main-info
{
    grid-area: main;
}
.project-info .project-sub-info
{
    grid-area: sub;
}
.project-info .project-sub-info .member-info
{
    border-radius: 0.5em;
    padding:1.0em;
    border:2px solid var(--theme-color);
    margin-top: 5em;
    padding-top: 5.0em;
    margin-bottom:1.0em;
}
.project-info .project-sub-info .member-info .user-profile-icon
{
    width:10em;
    display: block;
    margin:0 auto;
    position: absolute;
    top: 0;
    left:0;
    right: 0;
    transform: translateY(-5em);
}
.project-info .project-sub-info .member-info .nick_name
{
    text-align: center;
}
.project-info .project-sub-info .member-info .nick_name .label
{
    font-weight: bold;
    font-size: var(--fs-large);
}
.project-info .project-sub-info .member-info .profile
{
    font-size: var(--fs-small);
}

/* リターン一覧 */
.project-info .project-sub-info .projefct-return-list
{
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item + .projefct-return-item
{
    margin-top: 1.0em;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item
{
    display: grid;
	grid-template:
	  " ..... .....    .....    ..... " 1.0em
	  " ..... eyecatch eyecatch ..... " auto
	  " ..... title    title    ..... " auto
	  " ..... status   status   ..... " auto
	  " ..... select   select   ..... " auto
	  " ..... detail   detail   ..... " auto
	  " ..... footer   footer   ..... " auto
	  " ..... .....    .....    ..... " 1.0em
	  / 1.0em 1.0fr    1.0fr    1.0em;
      background-color: var(--theme-glay);
      border-radius: 0.5em;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .eyecatch
{
    grid-area: eyecatch;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-title
{
    grid-area: title;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-status
{
    grid-area: status;
    display: grid;
	grid-template:
	  " amount left " auto
	  / auto   1.0fr;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-status .support-amount
{
    grid-area: amount;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-status .left-nop
{
    grid-area: left;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-select
{
    grid-area: select;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-detail
{
    grid-area: detail;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-footer
{
    grid-area: footer;
    display: grid;
	grid-template:
	  " limit schedule " auto
	  / auto   1.0fr;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-footer .supporter_num
{
    grid-area: limit;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-footer .schedule
{
    grid-area: schedule;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-title .main
{
    font-weight: bold;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-status .support-amount .currency
{
    font-size: var(--fs-large);
    font-weight: bold;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-status .left-nop
{
    text-align: right;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-status .left-nop .label,
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-status .left-nop .num,
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-status .left-nop .unit
{
    font-size: var(--fs-large);
    font-weight: bold;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-detail
{
    margin-top:1.0em;
    margin-bottom: 1.0em;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-detail .editor_area
{
    font-size: var(--fs-small);
    background-color: transparent;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-footer .supporter-num
{
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-footer .supporter-num .label,
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-footer .supporter-num .num,
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-footer .supporter-num .unit
{
    font-weight: bold;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-footer .schedule
{
    text-align: right;
}
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-footer .schedule .label,
.project-info .project-sub-info .projefct-return-list .projefct-return-item .return-footer .schedule .date
{
    font-weight: bold;
}
@container sp-layout (width > 1px) {
    .project-info
    {
        display: grid;
        grid-template:
          " main  " auto
          " ..... " 3.0em
          " sub   " auto
          / 1fr;
    }
}


.project-sub-info .project-tile
{
    width:100%;
    margin: 0;
    margin-bottom: 1.0em;
}

/* 支援登録画面 */
.project-main-info .selected-return
{
    display: grid;
	grid-template:
	  " eyecatch " auto
	  " title    " auto
	  " status   " auto
	  " detail   " auto
	  / 1.0fr;
}
.project-main-info .selected-return .eyecatch
{
    grid-area: eyecatch;
}
.project-main-info .selected-return .title
{
    grid-area: title;
}
.project-main-info .selected-return .title .main
{
    font-size: var(--fs-large);
    font-weight: bold;
}
.project-main-info .selected-return .status
{
    grid-area: status;
    display: grid;
	grid-template:
	  " amount left " auto
	  / auto   1.0fr;
}
.project-main-info .selected-return .status .support-amount .currency
{
    font-size: var(--fs-large);
    font-weight: bold;
}
.project-main-info .selected-return .status .left-nop
{
    text-align: right;
}
.project-main-info .selected-return .status .left-nop .label,
.project-main-info .selected-return .status .left-nop .num,
.project-main-info .selected-return .status .left-nop .unit
{
    font-size: var(--fs-large);
    font-weight: bold;
}
.project-main-info .selected-return .detail
{
    grid-area: detail;
}

/* 支援情報の入力 */
.project-main-info .input-support-info
{
    margin-top:1.0em;
}


/* 活動報告一覧 */
.report-list
{
    
}
.report-list .report-list-item
{
    display: grid;
	grid-template:
    " ..... .....    ..... ..... ..... " 0.5em
    " ..... eyecatch ..... title ..... " 1fr
    " ..... eyecatch ..... date  ..... " auto
    " ..... .....    ..... ..... ..... " 0.5em
    / 0.5em 25%      0.5em 1.0fr 0.5em;

    border-radius: 0.5em;
    border: 1px solid var(--border-default-color);
    margin-top:1.0em;

}
.report-list .report-list-item:hover
{
    box-shadow: 1px 1px 2px 0px #0000005a;
}
.report-list .report-list-item img
{
    grid-area: eyecatch;
}
.report-list .report-list-item .title
{
    align-self: center;
    grid-area: title;
}
.report-list .report-list-item .title .main
{
    font-size: var(--fs-large);
    font-weight: bold;
}
.report-list .report-list-item .date
{
    grid-area: date;
    text-align: right;
    font-size: var(--fs-small);
    color:var(--font-color-note);
}

/* 活動報告詳細 */
.report-view
{
    display: grid;
	grid-template:
    " eyecatch " auto
    " title    " auto
    " date     " auto
    " .....    " 1.0em
    " body     " auto
    / 1.0fr;
}
.report-view img
{
    grid-area: eyecatch;
}
.report-view .title
{
    grid-area: title;
}
.report-view .title .main
{
    font-size: var(--fs-large);
    font-weight: bold;
}
.report-view .date
{
    grid-area: date;
    text-align: right;
    color: var(--font-color-note);
}
.report-view .body
{
    grid-area: body;
}

/* 支援者一覧 */
.supporte-list
{

}
.supporte-list .supporte-list-item
{
    display: grid;
	grid-template:
    " ..... ..... .... .....     ..... " 0.5em
    " ..... icon  ..... nickname ..... " auto
    " ..... icon  ..... message  ..... " 1fr
    " ..... icon  ..... date     ..... " auto
    " ..... ..... ..... .....    ..... " 0.5em
    / 0.5em 15%   0.5em 1.0fr    0.5em;

    border-radius: 0.5em;
    border: 1px solid var(--border-default-color);
    margin-top:1.0em;
}
.supporte-list .supporte-list-item .user-profile-icon
{
    grid-area: icon;
}
.supporte-list .supporte-list-item .nickname
{
    grid-area: nickname;
}
.supporte-list .supporte-list-item .nickname .main
{
    font-size: var(--fs-small);
    color: var(--font-color-note);
}
.supporte-list .supporte-list-item .message
{
    grid-area: message;
}
.supporte-list .supporte-list-item .date
{
    grid-area: date;
    text-align: right;
}
.supporte-list .supporte-list-item .date .main
{
    font-size: var(--fs-small);
    color: var(--font-color-note);
}


.support-amount  .progress
{
	grid-area: progress;
    align-self: center;
}
.support-amount  .progress.progress-bg
{
    height:1.0em;
    border-radius: 0.5em;
    background-color: var(--theme-glay);
    box-shadow: 0px 0px 1px 0px #00000040;
}
.support-amount  .progress.progress-bg .progress-rate
{
    position:absolute;
    top:0;
    left:0;

    height:1.0em;
    border-radius: 0.5em;
    background-color: var(--theme-color);
    width:var(--progress-rate);
    max-width:100%;
    min-width: 10%;
}
.support-amount  .progress.progress-bg .progress-rate .label
{
    position: absolute;
    top:50%;
    left:0.5em;
    transform: translateY(-50%);
    color:var(--theme-white);
    font-size: var(--fs-x-small);
}
.footer-navi
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.0em 1.0em;
    padding:0;
    margin: 0;
    list-style: none;
}
.footer-navi li
{
    padding:0;
    margin: 0;
    list-style: none;
}

.tos-no
{
    display: inline-block;
    margin-right: 0.5em;
    font-weight: bold;
}