/***********************************************************************
/ global common
/ Copyright (C) Logic Lovers Inc.
/ Released under the MIT License, https://opensource.org/licenses/MIT
/***********************************************************************/

/***********************************************************************
/ global definition
/   notes:
/     you cannnot use var in @media condition
/***********************************************************************/
/* wide device */
@media not (max-width: 768px) {
    :root {
        --bWideDevice: 1;     /* for calc */
        --bSmartDevice: 0;    /* for calc */
    }
}
/* smart device */
@media (max-width: 768px) {
    :root {
        --bWideDevice: 0;     /* for calc */
        --bSmartDevice: 1;    /* for calc */
    }
}
:root {
    /* margin left/right and width */
    /* you should set { box-sizing: border-box; } */
    --iPixelBlockMarginUD: 48px;
    --iPixelBlockMarginLR: calc( 12px + 36px * var(--bWideDevice) );
    --iPixelBlockMaxWidth: max( 300px , calc( 100% - var(--iPixelBlockMarginLR) * 2 ) );
    --iTextBlockMarginUD: 1.5em;
    --iTextBlockMarginLR: calc( 0.5em + 1.0em * var(--bWideDevice) );
    --iTextBlockMaxWidth: calc( 100% - var(--iTextBlockMarginLR) * 2 );
    --iImageMarginUD: var(--iPixelBlockMarginUD);
    --iImageMarginLR: var(--iPixelBlockMarginLR);
    --iImageMaxWidth: var(--iPixelBlockMaxWidth);
    /*  background color */
    --sBgColorR1: #fecece;
    --sBgColorR2: #f5c9c9;
    --sBgColorR3: #f1c4c4;
    --sBgColorG1: #cefece;
    --sBgColorG2: #c7f6c7;
    --sBgColorG3: #c4f1c3;
    --sBgColorB1: #ced1fe;
    --sBgColorB2: #c9ccf8;
    --sBgColorB3: #c4c6f1;
    --sBgColorY1: #fefcce;
    --sBgColorY2: #f4f0ad;
    --sBgColorY3: #ece99d;
    --sBgColorC1: #cefef9;
    --sBgColorC2: #c9f8f3;
    --sBgColorC3: #c4f1ed;
    /* grid title */
    --sBgColorGrid: black;
    --sBgColorGridItem: var(--sBgColorY1);
    --sBgColorGridHead: #333;
    /* striped color */
    --sBgColorStriped1of2: var(--sBgColorY3);
    --sBgColorStriped2of2: var(--sBgColorY1);
    --sBgColorStriped1of3: var(--sBgColorC3);
    --sBgColorStriped2of3: var(--sBgColorY1);
    --sBgColorStriped3of3: var(--sBgColorG2);
    /* list color */
    --sBgColorList: var(--sBgColorY1);
    /* anchor color */
    --sBgColorAnchorHover:    rgba(31,31,0,0.3);
    --sBgColorUnderlineHover: rgba(0,0,255,0.5);
}

/***********************************************************************
/ all elements
/***********************************************************************/
/* display */
.none {
    display: none !important;
}
/* text */
.subtext {
    font-weight: lighter;
    font-size: 95%;
}
.nowrap {
    white-space: nowrap !important;
}
.nowrap-weak {
    white-space: nowrap;
}
/* position */
.nospace {
    margin: 0px !important;
    padding: 0px !important;
    gap: 0px !important;
}
.fitleft {
    margin-left: 0px !important;
    padding-left: 0px !important;
}
.fitright {
    margin-right: 0px !important;
    padding-right: 0px !important;
}
.center,
.blockcenter {
    margin-left: auto !important;
    margin-right: auto !important;
}
.textleft {
    text-align: left !important;
}
.textcenter {
    text-align: center !important;
}
.textright {
    text-align: right !important;
}
/* text block */
.textblock {
    margin: var(--iTextBlockMarginUD) var(--iTextBlockMarginLR);
    --iPaddingUR: calc( var(--iTextBlockMarginUD) * 0.5 );
    --iPaddingLR: calc( var(--iTextBlockMarginLR) * 0.5 );
    padding:  var(--iPaddingUR) var(--iPaddingLR);
}
/* grab */
.grab {
    cursor: grab;
}
.grab:active {
    cursor: grabbing;
}
/* click */
.clickable {
    cursor: pointer;
}
/* waiting */
.waiting {
    cursor: wait;
}

/***********************************************************************
/ html
/***********************************************************************/
html {
    scroll-behavior: smooth;
}

/***********************************************************************
/ body
/***********************************************************************/
body {
    margin: 0px;
    padding: 0px;
}

/***********************************************************************
/ text settings (b < em < strong ; em has underline)
/***********************************************************************/
b {
    font-weight: bold;
    font-size: 110%;
}
em {
    display: inline-block;
    font-weight: bold;
    font-size: 110%;
    border-bottom: solid 2px red;
    line-height: 1em;
}
strong {
    display: inline-block;
    font-weight: bold;
    font-size: 125%;
    color: #F70253;
}
/* [PR] by <span class="pr">[PR]</span> */
span.pr {
    font-size: 70%;
    color: rgba(80,80,80,0.95); /*#505053;*/
}
/* font family */
.capture {
  font-family: 'Noto Sans JP',sans-serif;
}

/***********************************************************************
/ img/video
/***********************************************************************/
/* base */
img,
video {
    display: block;
    box-sizing: border-box;
    margin: var(--iImageMarginUD) auto;
    max-width: var(--iImageMaxWidth);
}
/* inline */
img.inline {
    display: inline;
    margin: none;
}
img.inline-block {
    display: inline-block;
    margin: none;
}
img.inlineletter {
    display: inline;
    max-height: 1em;
    margin: 0px 0.5px;
}
/* letterlink */
img.letterlink {
    transition: transform 0.2s ease-out;
    cursor: pointer;
}
img.letterlink:hover {
    transform-origin: 25% 33%;
    transform: scale(190%);
}


/***********************************************************************
/ container
/***********************************************************************/
.grabscrollx {
    overflow-x: auto;
}

/***********************************************************************
/ div
/***********************************************************************/
div {
    box-sizing: border-box;
}

/***********************************************************************
/ div grid
/   usage:
/     <div class="grid colsN stripedrowsN">
/      <div class="gridheader">HEAD</div>...
/      <div class="griditem">ITEM</div>...
/     </div>
/***********************************************************************/
/* grid */
.grid {
    display: grid;
    gap: 2px;
    width: fit-content;
    margin: var(--iTextBlockMarginUD) var(--iTextBlockMarginLR);
    padding: 2px;
    background-color: var(--sBgColorGrid);
}
.grid.noborder {
    background-color: inherit;
    gap: 0px;
}
/* cols */
.grid.cols1 {
    grid-template-columns: auto;
}
.grid.cols2 {
    grid-template-columns: auto auto;
}
.grid.cols3 {
    grid-template-columns: auto auto auto;
}
.grid.cols4 {
    grid-template-columns: auto auto auto auto;
}
.grid.cols5 {
    grid-template-columns: auto auto auto auto auto;
}
.grid.cols6 {
    grid-template-columns: auto auto auto auto auto auto;
}
.grid.cols7 {
    grid-template-columns: auto auto auto auto auto auto auto;
}
/* spans */
.colspan2 {
    grid-column: span 2;
}
.colspan3 {
    grid-column: span 3;
}
.rowspan2 {
    grid-row: span 2;
}
.rowspan3 {
    grid-row: span 3;
}
/* griditem, gridhead space */
.griditem,
.gridhead {
    padding: 0.3em 0.9em;
    line-height: 1.3em;
}
/* gridhead */
.gridhead {
    color: white;
    background-color: var(--sBgColorGridHead);
}
/* flex center */
.gridhead,
.griditem.textcenter {
    text-align: center;
    align-items: center;
    justify-content: center;
}
/* griditem */
.griditem {
    background-color: var(--sBgColorGridItem);
}
/*   background-color cols=1 */
.cols1.stripedrows2 > .griditem:nth-child(2n+1) {
    background-color: var(--sBgColorStriped1of2);
}
.cols1.stripedrows2 > .griditem:nth-child(2n+2) {
    background-color: var(--sBgColorStriped2of2);
}
.cols1.stripedrows3 > .griditem:nth-child(3n+1) {
    background-color: var(--sBgColorStriped1of3);
}
.cols1.stripedrows3 > .griditem:nth-child(3n+2) {
    background-color: var(--sBgColorStriped2of3);
}
.cols1.stripedrows3 > .griditem:nth-child(3n+3) {
    background-color: var(--sBgColorStriped3of3);
}
/*   background-color cols=2 */
.cols2.stripedrows2 > .griditem:nth-child(4n+1),
.cols2.stripedrows2 > .griditem:nth-child(4n+2) {
    background-color: var(--sBgColorStriped1of2);
}
.cols2.stripedrows2 > .griditem:nth-child(4n+3),
.cols2.stripedrows2 > .griditem:nth-child(4n+4) {
    background-color: var(--sBgColorStriped2of2);
}
.cols2.stripedrows3 > .griditem:nth-child(6n+1),
.cols2.stripedrows3 > .griditem:nth-child(6n+2) {
    background-color: var(--sBgColorStriped1of3);
}
.cols2.stripedrows3 > .griditem:nth-child(6n+3),
.cols2.stripedrows3 > .griditem:nth-child(6n+4) {
    background-color: var(--sBgColorStriped2of3);
}
.cols2.stripedrows3 > .griditem:nth-child(6n+5),
.cols2.stripedrows3 > .griditem:nth-child(6n+6) {
    background-color: var(--sBgColorStriped3of3);
}
/*   background-color cols=3 */
.cols3.stripedrows2 > .griditem:nth-child(6n+1),
.cols3.stripedrows2 > .griditem:nth-child(6n+2),
.cols3.stripedrows2 > .griditem:nth-child(6n+3) {
    background-color: var(--sBgColorStriped1of2);
}
.cols3.stripedrows2 > .griditem:nth-child(6n+4),
.cols3.stripedrows2 > .griditem:nth-child(6n+5),
.cols3.stripedrows2 > .griditem:nth-child(6n+6) {
    background-color: var(--sBgColorStriped2of2);
}
.cols3.stripedrows3 > .griditem:nth-child(9n+1),
.cols3.stripedrows3 > .griditem:nth-child(9n+2),
.cols3.stripedrows3 > .griditem:nth-child(9n+3) {
    background-color: var(--sBgColorStriped1of3);
}
.cols3.stripedrows3 > .griditem:nth-child(9n+4),
.cols3.stripedrows3 > .griditem:nth-child(9n+5),
.cols3.stripedrows3 > .griditem:nth-child(9n+6) {
    background-color: var(--sBgColorStriped2of3);
}
.cols3.stripedrows3 > .griditem:nth-child(9n+7),
.cols3.stripedrows3 > .griditem:nth-child(9n+8),
.cols3.stripedrows3 > .griditem:nth-child(9n+9) {
    background-color: var(--sBgColorStriped3of3);
}
/*   background-color cols=4 */
.cols4.stripedrows2 > .griditem:nth-child(8n+1),
.cols4.stripedrows2 > .griditem:nth-child(8n+2),
.cols4.stripedrows2 > .griditem:nth-child(8n+3),
.cols4.stripedrows2 > .griditem:nth-child(8n+4) {
    background-color: var(--sBgColorStriped1of2);
}
.cols4.stripedrows2 > .griditem:nth-child(8n+5),
.cols4.stripedrows2 > .griditem:nth-child(8n+6),
.cols4.stripedrows2 > .griditem:nth-child(8n+7),
.cols4.stripedrows2 > .griditem:nth-child(8n+8) {
    background-color: var(--sBgColorStriped2of2);
}
.cols4.stripedrows3 > .griditem:nth-child(12n+1),
.cols4.stripedrows3 > .griditem:nth-child(12n+2),
.cols4.stripedrows3 > .griditem:nth-child(12n+3),
.cols4.stripedrows3 > .griditem:nth-child(12n+4) {
    background-color: var(--sBgColorStriped1of3);
}
.cols4.stripedrows3 > .griditem:nth-child(12n+5),
.cols4.stripedrows3 > .griditem:nth-child(12n+6),
.cols4.stripedrows3 > .griditem:nth-child(12n+7),
.cols4.stripedrows3 > .griditem:nth-child(12n+8) {
    background-color: var(--sBgColorStriped2of3);
}
.cols4.stripedrows3 > .griditem:nth-child(12n+9),
.cols4.stripedrows3 > .griditem:nth-child(12n+10),
.cols4.stripedrows3 > .griditem:nth-child(12n+11),
.cols4.stripedrows3 > .griditem:nth-child(12n+12) {
    background-color: var(--sBgColorStriped3of3);
}
/*   background-color cols=5 */
.cols5.stripedrows2 > .griditem:nth-child(10n+1),
.cols5.stripedrows2 > .griditem:nth-child(10n+2),
.cols5.stripedrows2 > .griditem:nth-child(10n+3),
.cols5.stripedrows2 > .griditem:nth-child(10n+4),
.cols5.stripedrows2 > .griditem:nth-child(10n+5) {
    background-color: var(--sBgColorStriped1of2);
}
.cols5.stripedrows2 > .griditem:nth-child(10n+6),
.cols5.stripedrows2 > .griditem:nth-child(10n+7),
.cols5.stripedrows2 > .griditem:nth-child(10n+8),
.cols5.stripedrows2 > .griditem:nth-child(10n+9),
.cols5.stripedrows2 > .griditem:nth-child(10n+10) {
    background-color: var(--sBgColorStriped2of2);
}
/*   background-color cols=6 */
.cols6.stripedrows2 > .griditem:nth-child(12n+1),
.cols6.stripedrows2 > .griditem:nth-child(12n+2),
.cols6.stripedrows2 > .griditem:nth-child(12n+3),
.cols6.stripedrows2 > .griditem:nth-child(12n+4),
.cols6.stripedrows2 > .griditem:nth-child(12n+5),
.cols6.stripedrows2 > .griditem:nth-child(12n+6) {
    background-color: var(--sBgColorStriped1of2);
}
.cols6.stripedrows2 > .griditem:nth-child(12n+7),
.cols6.stripedrows2 > .griditem:nth-child(12n+8),
.cols6.stripedrows2 > .griditem:nth-child(12n+9),
.cols6.stripedrows2 > .griditem:nth-child(12n+10),
.cols6.stripedrows2 > .griditem:nth-child(12n+11),
.cols6.stripedrows2 > .griditem:nth-child(12n+12) {
    background-color: var(--sBgColorStriped2of2);
}
/*   background-color cols=7 */
.cols7.stripedrows2 > .griditem:nth-child(14n+1),
.cols7.stripedrows2 > .griditem:nth-child(14n+2),
.cols7.stripedrows2 > .griditem:nth-child(14n+3),
.cols7.stripedrows2 > .griditem:nth-child(14n+4),
.cols7.stripedrows2 > .griditem:nth-child(14n+5),
.cols7.stripedrows2 > .griditem:nth-child(14n+6),
.cols7.stripedrows2 > .griditem:nth-child(14n+7) {
    background-color: var(--sBgColorStriped1of2);
}
.cols7.stripedrows2 > .griditem:nth-child(14n+8),
.cols7.stripedrows2 > .griditem:nth-child(14n+9),
.cols7.stripedrows2 > .griditem:nth-child(14n+10),
.cols7.stripedrows2 > .griditem:nth-child(14n+11),
.cols7.stripedrows2 > .griditem:nth-child(14n+12),
.cols7.stripedrows2 > .griditem:nth-child(14n+13),
.cols7.stripedrows2 > .griditem:nth-child(14n+14) {
    background-color: var(--sBgColorStriped2of2);
}
/* center */
div.center {
    width: fit-content;
}

/***********************************************************************
/ table (use div.grid instead)
/***********************************************************************/
table {
    --iMarginLR: var(--iTextBlockMarginLR);
    margin: 1.5em auto;
    max-width: calc( 100% - var(--iMarginLR) * 2 );
}
table.nocenter {
    margin: 1.5em var(--iTextBlockMarginLR);
}
th, td {
    border: solid 2px;
}
table.noborder th,
table.noborder td {
    border: none;
}
th {
    padding: 0.3em 0.9em;
}
td {
    padding: 0.3em 0.9em;
}
table.center td,
td.center {
    text-align: center;
    vertical-align: middle;
}
/* table img */
table img {
    margin: 0.5em;
}

/***********************************************************************
/ list
/***********************************************************************/
.listblock {
    background-color: var(--sBgColorList);
    margin: 1.2em 0.5em;
    padding: 1.0em 0.5em 1.0em calc( 0.5em + 1.2em * var(--bWideDevice) );
}
.listblock ol,
.listblock ul {
    list-style-position: outside;
    background-color: inherit;
    margin: 0px;
    padding: 0px;
    padding-left: 1.5em;
}
/* 'd like to remove */
ol,
ul {
    list-style-position: inside;
    background-color: var(--sBgColorList);
    margin: 1.2em 0.5em;
    padding: 1.0em calc( 0.5em + 1.2em * var(--bWideDevice) );
}
ol.inlist,
ol.inlistfit,
ul.inlist,
ul.inlistfit {
    margin-top: 0em;
    margin-bottom: 0em;
    padding-top: 0em;
    padding-bottom: 0;
    box-sizing: border-box;
}
ol.inlist,
ul.inlist {
    margin-bottom: 1.2em;
}
ol.indent,
ul.indent {
    padding-left: calc( 2em + 2em * var(--bWideDevice) );
}
ul.nomark {
    list-style: none;
}
.listblock.supplement {
    background-color: inherit;
}

/***********************************************************************
/ paragraph
/***********************************************************************/
p {
    clear: both;
}
p.indent {
    padding-left: 3em;
}
p.clearonly {
    margin: 0px;
    padding: 0px;
    line-height: 0em;
}
p.inh2 {
    padding: 0.5em 3em;
}

/***********************************************************************
/ anchor
/***********************************************************************/
a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    overflow: hidden;
    vertical-align: middle;
    z-index: 3;
    padding-left: 0.3em;
    padding-right: 0.3em;
    transition: transform 0.3s ease-in-out;
}
a:hover {
    transform: scale(1.1);
}

/* undeline animation */
a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--sBgColorUnderlineHover);
    transition: all 0.3s ease-in-out;
    z-index: 2;
}
a:hover::before {
    left: 0px;
    width: 100%;
}

/* background animation */
a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--sBgColorAnchorHover);
    transition: width 0.1s ease-in-out;
    z-index: 1;
}
a:hover::after {
    width: 100%;
}

/* novfx */
a.nodefaultvfx {
    display: initial;
    position: initial;
    color: inherit;
    padding: initial;
    overflow: initial;
    z-index: initial;
}
a.nodefaultvfx::before {
    height: 0px;
}
a.nodefaultvfx::after {
    height: 0px;
}
a.nodefaultvfx:hover {
    transform: none;
}
a.nodefaultvfx:hover::before {
    width: 0px;
}
a.nodefaultvfx:hover::after {
    width: 0px;
}

/***********************************************************************
/ form
/***********************************************************************/
textarea,
input,
select {
    font-size: 100%;
}

/***********************************************************************
/ common profile
/***********************************************************************/
#commonprofile {
    margin: 5em var(--iTextBlockMarginLR) 1em var(--iTextBlockMarginLR);
}
/* each profile */
#commonprofile #thisblogprofile,
#commonprofile #authorprofile,
#commonprofile #companyprofile {
    display: block;
    clear: both;
    padding: 32px min( 32px , max( 1.2em , 2% ) );
    margin: 16px var(--iTextBlockMarginLR);
    background: rgba(40,248,240,1);
}
#commonprofile #thisblogprofile {
    background: #e7ffe6;
    min-height: 144px;
}
#commonprofile #authorprofile {
    background: #28f8f0;
    min-height: 144px;
}
#commonprofile #companyprofile {
    background: #e7d6ff;
    min-height: 144px;
}
/* img */
#commonprofile .profileimg {
    display: block;
    float: left;
    padding: 0px;
    margin: -1.0em 1.5em 1.5em 0px;
    max-width: 112px;
}
/* title */
#commonprofile .profiletitle {
    text-align: center;
    font-size: 105%;
    font-weight: bold;
    line-height: 2em;
    margin: 0px 0px 0.8em 0px;
    padding-top: 0px;
    white-space: nowrap;
}
/* profile */
#commonprofile .profiletext {
    display: block;
    font-size: 85%;
    margin: 0px;
}
/*
#commonprofile a {
	text-decoration: none;
	color: inherit;
}
#commonprofile a:hover {
	background: rgba(255,127,127,0.1);
}
*/

/***********************************************************************
/ copyright, privacypolicy
/***********************************************************************/
#trademark,
#privacypolicy,
#copyright {
    display: block;
    font-size: 80%;
    width: 100%
    margin; 0.5em 0px;
    padding: 0.2em 1.8em;
    color: #777;
    text-shadow: 1px 1px 0px #ddd;
}
#trademark {
    margin-top: 2.5em;
    text-align: center;
}
#privacypolicy {
    text-align: right;
}
#privacypolicy a {
    text-decoration: underline;
}
#copyright {
    text-align: center;
}

/***********************************************************************
/ PR banner
/***********************************************************************/
div.publicpr {
    clear: both;
    margin: 2.5em 0px;
}
div.publicpr::before {
    content: "<span class="pr">[PR]</span><br />";
}
div.publicpr div {
    margin: 0px;
    padding: 0px;
}
.publiconly,
.publicsdonly,
.publichdonly {
    margin: 0px;
    padding: 0px;
}
@media (min-width: 768px) {
    .publicsdonly {
        display: none;
    }
}
@media (max-width: 768px) {
    .publichdonly {
        display: none;
    }
}

/***********************************************************************
/ search window
/***********************************************************************/
.searchwindowcontainer {
    max-width: 50em;
    margin: 4px;
    padding: 0;
}
#mainbody .searchwindowcontainer {
    margin: var(--iTextBlockMarginUD) var(--iTextBlockMarginLR);
}
.searchwindowcontainer div,
.searchwindowcontainer table img,
.searchwindowcontainer table,
.searchwindowcontainer tr,
.searchwindowcontainer th,
.searchwindowcontainer td {
    margin: 0;
    padding: 0;
    max-width: 100%;
}
.searchwindowcontainer table td,
.searchwindowcontainer table th,
.searchwindowcontainer table tr,
.searchwindowcontainer table {
    border: none;
}
/* does not work
.searchwindowcontainer table td input.gsc-input {
    padding: 10px;
    height: 100px;
    background-color: red;
}
*/
#globalmenu .searchwindowcontainer table td button.gsc-search-button {
    margin: 1px;
    padding: 3px;
}

/***********************************************************************
/ log frame
/***********************************************************************/
#logiframe {
    display: none;
}