@charset "utf-8";

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

    /* 文字サイズ展開 */
    --font-size-xx-large:2.0em;
    --font-size-x-large:1.6em;
    --font-size-large:1.2em;
    --font-size-medium:1.0em;
    --font-size-small:0.9em;
    --font-size-x-small:0.8em;

    /* パディング・マージン */
    --spacer-normal:1.0em;
    --spacer-thin:0.5em;
    --spacer-x-thin:0.25em;
    --spacer-thick:1.5em;
    --spacer-x-thick:2.0em;
    --spacer-xx-thick:3.0em;
    --spacer-xxx-thick:4.0em;

    /* コンテンツ基準幅 */
    --content-width:1000px;

    /* 段落背景色 */
    --section-evn-background-color:rgba(0,0,0,0.05);
}

/* レスポンシブブレークポイント */
#ResponsiveCheck
{
    width:0px;
    height:0px;
    visibility: hidden;
}

/* 10pxを基準値に */
html{
    font-size: 10px;
}

/* パソコンサイズ */
@media (min-width: 781px)
{
    body{font-size: calc(1.0rem * var(--base-font-size-pc) / 10);}
    #ResponsiveCheck .isPC{display:block;}
    #ResponsiveCheck .isTAB{display:none;}
    #ResponsiveCheck .isSP{display:none;}
}
/* タブレットサイズ */
@media (max-width: 780px)
{
    body{font-size: calc(1.0rem * var(--base-font-size-tb) / 10);}
    #ResponsiveCheck .isPC{display:none;}
    #ResponsiveCheck .isTAB{display:block;}
    #ResponsiveCheck .isSP{display:none;}
}
/* スマートフォンサイズ */
@media (max-width: 600px)
{
    /* スマートフォンサイズ時に個別の変数を定義 */
    :root
    {
        --fs-xx-large:2.0em;
        --fs-x-large:1.6em;
        --fs-large:1.2em;
        --fs-medium:1.0em;
        --fs-small:0.9em;
        --fs-x-small:0.8em;
    }
    
    body{font-size: calc(100vw / var(--base-display-width-sp) * var(--base-font-size-sp));}
    #ResponsiveCheck .isPC{display:none;}
    #ResponsiveCheck .isTAB{display:none;}
    #ResponsiveCheck .isSP{display:block;}
}

/* レイアウト定義 */
#wrapper
{
    display: grid;
	grid-template:
    " title  " auto
    " gnavi " auto
    " main   " 1.0fr
    " footer " auto
    / 100%;
}
#global-navi
{
    grid-area: gnavi;
    position: sticky;
    top:-1px;

    z-index:4;
}
#header
{
    grid-area: title;
    z-index:3;
}
#main
{
    grid-area: main;
    z-index:2;
}
#footer
{
    grid-area: footer;
    z-index:1;
}

/* 標準段落 */
.section
{
    width:100%;
    padding:var(--spacer-xxx-thick) var(--spacer-normal);
    margin:0;
}
.section.no-padding
{
    padding:0 0;
}
.row
{
    max-width:var(--content-width);
    margin:0 auto;
}
.row.wide
{
    max-width:100%;
}
.row + .row
{
    margin-top:var(--spacer-x-thick);
}
.row.no-margin
{
    margin-top:0;
}

/* Google Icons */
i.material-symbols-outlined
{
    font-size: 1.2em;
    vertical-align: text-bottom;
}

/* Gridシステム(12 col grid) */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacer-thick);
}
.grid .sub-grid {
    display: grid;
    grid-template-columns: subgrid;
}
.grid.no-gap,
.grid .sub-grid.no-gap
{
    gap: 0;
}
.grid .grid-col-1  {grid-column: span 1;}
.grid .grid-col-2  {grid-column: span 2;}
.grid .grid-col-3  {grid-column: span 3;}
.grid .grid-col-4  {grid-column: span 4;}
.grid .grid-col-5  {grid-column: span 5;}
.grid .grid-col-6  {grid-column: span 6;}
.grid .grid-col-7  {grid-column: span 7;}
.grid .grid-col-8  {grid-column: span 8;}
.grid .grid-col-9  {grid-column: span 9;}
.grid .grid-col-10 {grid-column: span 10;}
.grid .grid-col-11 {grid-column: span 11;}
.grid .grid-col-12 {grid-column: span 12;}

.isSP .grid .grid-col-sp-1  {grid-column: span 1;}
.isSP .grid .grid-col-sp-2  {grid-column: span 2;}
.isSP .grid .grid-col-sp-3  {grid-column: span 3;}
.isSP .grid .grid-col-sp-4  {grid-column: span 4;}
.isSP .grid .grid-col-sp-5  {grid-column: span 5;}
.isSP .grid .grid-col-sp-6  {grid-column: span 6;}
.isSP .grid .grid-col-sp-7  {grid-column: span 7;}
.isSP .grid .grid-col-sp-8  {grid-column: span 8;}
.isSP .grid .grid-col-sp-9  {grid-column: span 9;}
.isSP .grid .grid-col-sp-10 {grid-column: span 10;}
.isSP .grid .grid-col-sp-11 {grid-column: span 11;}
.isSP .grid .grid-col-sp-12 {grid-column: span 12;}


/* ショートコード:文字サイズ */
.fs-xx-l {font-size: var(--font-size-xx-large);}
.fs-x-l  {font-size: var(--font-size-x-large);}
.fs-l    {font-size: var(--font-size-large);}
.fs-m    {font-size: var(--font-size-medium);}
.fs-s    {font-size: var(--font-size-small);}
.fs-x-s  {font-size: var(--font-size-x-small);}

/* ショートコード:文字ウェイト */
.fw-bold{font-weight: bold;}
.fw-normal{font-weight: normal;}

/* 文字よせ */
.ta-normal {text-align: justify;}
.ta-left   {text-align: left;}
.ta-center {text-align: center;}
.ta-right  {text-align: right;}

/* ショートコード:マージン */
.p-xs {padding:var(--spacer-thin);}
.p-s  {padding:var(--spacer-thin);}
.p-m  {padding:var(--spacer-normal);}
.p-l  {padding:var(--spacer-thick);}
.p-xl {padding:var(--spacer-x-thick);}

.pt-xs {padding-top:var(--spacer-thin);}
.pt-s  {padding-top:var(--spacer-thin);}
.pt-m  {padding-top:var(--spacer-normal);}
.pt-l  {padding-top:var(--spacer-thick);}
.pt-xl {padding-top:var(--spacer-x-thick);}

.pb-xs {padding-bottom:var(--spacer-thin);}
.pb-s  {padding-bottom:var(--spacer-thin);}
.pb-m  {padding-bottom:var(--spacer-normal);}
.pb-l  {padding-bottom:var(--spacer-thick);}
.pb-xl {padding-bottom:var(--spacer-x-thick);}

.pl-xs {padding-left:var(--spacer-thin);}
.pl-s  {padding-left:var(--spacer-thin);}
.pl-m  {padding-left:var(--spacer-normal);}
.pl-l  {padding-left:var(--spacer-thick);}
.pl-xl {padding-left:var(--spacer-x-thick);}

.pr-xs {padding-right:var(--spacer-thin);}
.pr-s  {padding-right:var(--spacer-thin);}
.pr-m  {padding-right:var(--spacer-normal);}
.pr-l  {padding-right:var(--spacer-thick);}
.pr-xl {padding-right:var(--spacer-x-thick);}

/* ショートコード:パッディング */
.p-xs {margin:var(--spacer-thin);}
.p-s  {margin:var(--spacer-thin);}
.p-m  {margin:var(--spacer-normal);}
.p-l  {margin:var(--spacer-thick);}
.p-xl {margin:var(--spacer-x-thick);}

.mt-xs {margin-top:var(--spacer-thin);}
.mt-s  {margin-top:var(--spacer-thin);}
.mt-m  {margin-top:var(--spacer-normal);}
.mt-l  {margin-top:var(--spacer-thick);}
.mt-xl {margin-top:var(--spacer-x-thick);}

.mb-xs {margin-bottom:var(--spacer-thin);}
.mb-s  {margin-bottom:var(--spacer-thin);}
.mb-m  {margin-bottom:var(--spacer-normal);}
.mb-l  {margin-bottom:var(--spacer-thick);}
.mb-xl {margin-bottom:var(--spacer-x-thick);}

.ml-xs {margin-left:var(--spacer-thin);}
.ml-s  {margin-left:var(--spacer-thin);}
.ml-m  {margin-left:var(--spacer-normal);}
.ml-l  {margin-left:var(--spacer-thick);}
.ml-xl {margin-left:var(--spacer-x-thick);}

.mr-xs {margin-right:var(--spacer-thin);}
.mr-s  {margin-right:var(--spacer-thin);}
.mr-m  {margin-right:var(--spacer-normal);}
.mr-l  {margin-right:var(--spacer-thick);}
.mr-xl {margin-right:var(--spacer-x-thick);}