/*
Copyright (c) 2024 Revolme.Lab Yamasaki Masaki
共通CSS
*/
@charset "utf-8";

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

/* ******************************************** */
/* レスポンシブのブレークポイント指定別コンテナ設定 */
/* ******************************************** */
html.isPC  {container: pc-layout / inline-size;}
html.isTAB {container: tab-layout / inline-size;}
html.isSP  {container: sp-layout / inline-size;}
@container pc-layout (width > 1px) {
    body{visibility: visible;}
    body{font-size: calc(1.0rem * var(--base-font-size-pc) / 10);}
    .pc-hide{display:none !important;}
    .tab-visible{display:none !important;}
    .sp-visible{display:none !important;}
}
@container tab-layout (width > 1px) {
    body{visibility: visible;}
    body{font-size: calc(1.0rem * var(--base-font-size-tb) / 10);}
    .pc-visible{display:none !important;}
    .tab-hide{display:none !important;}
    .sp-visible{display:none !important;}
}
@container sp-layout (width > 1px) {
    body{visibility: visible;}
    body{font-size: calc(100vw / var(--base-display-width-sp) * var(--base-font-size-sp));}
    .pc-visible{display:none !important;}
    .tab-visible{display:none !important;}
    .sp-hide{display:none !important;}
}

/* **************** */
/* 基準フォント      */
/* **************** */
html {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.5;
}

/* **************** */
/* 初期化前シールド  */
/* **************** */
#initedShield
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #FFFFFF;

    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}
html.inited #initedShield
{
	animation-name:initializeSeaild;
	animation-delay:0.5s;
	animation-duration:0.3s;
	animation-timing-function:ease;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes initializeSeaild
{
	0% {
		opacity:1;
		transform:translateY(0%);
	}
	99% {
		opacity:0;
		transform:translateY(-5%);
	}
	100% {
		opacity:0;
		transform:translateY(-200%);
	}
}

/* **************** */
/* 通信中シールド    */
/* **************** */
#loadingShield
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.15);

    display: none;
    justify-content: center;
    align-items: center;
    align-content: center;
	-webkit-backdrop-filter: blur(0.1em);
	backdrop-filter: blur(0.1em);
}
html.loading #loadingShield
{
    display: flex;
}

/* ******************* */
/* ポップアップシールド  */
/* ******************* */
#popupShield
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.15);

    display: none;
    justify-content: center;
    align-items: center;
    align-content: center;
	-webkit-backdrop-filter: blur(0.1em);
	backdrop-filter: blur(0.1em);
}
#popupShield.show
{
	display: grid;
	grid-template:
	  " ...... ...... ...... " 0.5fr
	  " ...... dialog ...... " auto
	  " ...... ...... ...... " 0.5fr
	  / 0.5fr  auto   0.5fr ;
}
#popupShield .dialog
{
	grid-area: dialog;

	max-width:90vw;
	max-height:90vh;

	margin: 0;
	padding: 0;
}
@media screen and (max-width:640px)
{
	/*
    #popupShield .dialog
	{
		font-size:18px;
	}
    */
}
#popupShield .dialog .dialog-contents
{
	background-color: #FFFFFF;
	border:2px solid #999999;
	border-radius:0.5em;

	margin:0;
	padding:0;

	max-width:90vw;
	max-height:90vh;
	width:480px;

	display: grid;
	grid-template:
	  " title   " auto
	  " message " auto
	  " body " 1fr
	  " action  " auto
	  / 100% ;
}
#popupShield .dialog.error .dialog-contents
{
	border:2px solid #AA3333;
}
#popupShield .dialog .dialog-contents .dialog-title
{
	grid-area: title;
	padding:0.5em;

	font-weight: bold;
	border-bottom:1px solid #CCCCCC;
}
#popupShield .dialog .dialog-contents .dialog-message
{
	grid-area: message;
	padding:0.5em;
}
#popupShield .dialog .dialog-contents .dialog-body
{
	grid-area: body;
    overflow-y: auto;
}
#popupShield .dialog .dialog-contents .dialog-action
{
	grid-area: action;
	padding:0.5em;
	text-align: right;
}



/* **************** */
/* 基本レイアウト    */
/* **************** */
#wrapper
{
    width: 100%;
    height: 100dvh;
    overflow: auto;
}
#app-wrapper
{
    min-height: 100dvh;
    max-width:  100dvw;
    display: grid;
    grid-template:
    "gheader gheader  "auto
    "side    header   "auto
    "side    contents "1fr
    "side    footer   "auto
    "gfooter gfooter  "auto
    /280px   calc(100% - 280px);
    /* overflow-y: auto; */
}
#app-wrapper.straight
{
    min-height: 100dvh;
    max-width:  100dvw;
    display: grid;
    grid-template:
    "gheader gheader  "auto
    "side    header   "auto
    "side    contents "1fr
    "side    footer   "auto
    "gfooter gfooter  "auto
    /0       100%;
}
#global-header {
    grid-area: gheader;
    position:sticky;
    top:0;
    z-index:4;
}
#header        {
    grid-area: header;
    z-index:3;
}
#global-navi   {
    grid-area: side;
    z-index:2;
}
#main-contents {
    grid-area: contents;
    z-index:1;
}
#footer        {
    z-index:1;
    grid-area: footer;
}
#global-footer {
    grid-area: gfooter;
    z-index:1;
}
@container sp-layout (width > 1px) {
    #app-wrapper
    {
        min-height: 100dvh;
        display: grid;
        grid-template:
        "gheader  "auto
        "side   "auto
        "header   "auto
        "contents "1fr
        "footer   "auto
        "gfooter  "auto
        /100vw;
    }
    #global-header {
        position:relative;
    }
    #global-navi   {
        position:sticky;
        top:0;
    }
}

/* 幅 */
.w-full  {width:100%;}
.w-320px {max-width:320px;}
.w-600px {max-width:100%;}

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

/* 文字縦位置 */
.va-middle {vertical-align: middle;}

/* 文字サイズ */
.fs-s    {font-size: 0.8em;}
.fs-m    {font-size: 1.0em;}
.fs-l    {font-size: 1.2em;}
.fs-xl   {font-size: 1.4em;}
.fs-xxl  {font-size: 1.6em;}

.fw-bold{font-weight: bold;}
.ellipsis
{
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* マージン */
.mt05 {margin-top: 0.5em;}
.mt10 {margin-top: 1.0em;}
.mb05 {margin-bottom: 0.5em;}
.mb10 {margin-bottom: 1.0em;}

/* スクロール */
.scroll-x {overflow-x: auto;}

/* ブロック種別 */
.inline-block{display: inline-block;}


/* printLayout */
@media print {
    body{
        -webkit-print-color-adjust: exact;
    }
    #wrapper
    {
        height:auto;
    }
    #app-wrapper
    {
        min-height: 100dvh;
        display: grid;
        grid-template:
        "contents "1fr
        /100vw;
    }
    #global-navi,
    #global-header,
    #header,
    #footer,
    #global-footer,
    #main-contents .main-ope
    {
        display:none !important;
    }

}