@charset "UTF-8";
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none; height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, /* 1 */
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em; margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0; color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {border-style: none; max-width: 100%;}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  appearance: button;
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none; padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  appearance: textfield;
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit; opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* button
------------------------- */

/* .button {display: inline-block; font-weight: bold; padding: 10px 18px 8px; margin: 10px 14px 0; background-color: #F8F8F8; background-image: linear-gradient( hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.1) ); border: 1px solid #CCC; border-radius: 8px; position: relative;} */
.button {display: inline-block; font-weight: bold; padding: 10px 18px 8px; margin: 10px 14px 0; background-color: #19F; color:#111; border: 1px solid #CCC; border-radius: 8px; position: relative;}
.button > a {position:absolute; top:0; left:0; width:100%; height:100%;}
.button:enabled {
  cursor: pointer;
}

.button:enabled:hover {opacity: .8;}

.button.is-checked,
.button.is-selected {
  background-color: #19F; color: white;
}
.button.yellow2023      {background: rgba(255,247,103,1);}
.button.orange          {background: rgba(248,183,60,1);}
.button.yellow          {background: rgba(255,241,0,1);}
.button.pink            {background: rgba(244,180,208,1);}
.button.blue            {background: rgba(155,208,236,1);}
.button.green           {background: rgba(163,198,84,1);} 
.button.purple          {background: rgba(198,173,210,1);}
.button.green2          {background: rgba(209,223,150,1);}
.button.yellow25mixed   {background: linear-gradient(90deg, rgba(242,233,73,1), rgba(242,201,31,1));}
.button.bluepink25mixed {background: linear-gradient(90deg, rgba(87,185,226,1) 50%, rgba(236,177,202,1) 50%);}
.button.blueorange25mixed {background: linear-gradient(90deg, rgba(87,185,226,1) 50%, rgba(224,106,69,1) 50%);}
.button.pink25mixed {background: linear-gradient(90deg, rgba(227,144,181,1), rgba(236,177,202,1));}
.button.purple25 {background: rgba(161,150,194,1);}
.button.green25 {background: rgba(162,202,127,1);}
.button.red25 {background: rgba(214,20,27,1);}
.button.turquoise25 {background: rgba(129,195,184,1);}
.button.turquoisegreen25mixed {background: linear-gradient(90deg, rgba(129,195,184,1), rgba(162,202,127,1));}


.button:active {
  color: white; background-color: #59F; box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* hide radio inputs */
.button input[type="radio"] { display: none; }

/* ---- button-group ---- */

.button-group:after {
  content: ''; display: block; clear: both;
}

.button-group .button {float: left; margin-left: -1px;}
/*
.button-group .button:first-child { border-radius: 5px; }
.button-group .button:last-child { border-radius: 5px; }
*/


/* site-footer
------------------------- */

footer {flex-shrink: 0; color: #fff; margin: 0 auto; text-align: center;}
footer ul, ol {margin: 1em 0; padding-left: 0;}
footer ul li {display: inline-block;}
footer ul li a {color: #fff; text-decoration: none; margin: .5em; font-weight: bold;}
footer ul li a:hover {color: rgba(255,255,255,.7)}
footer .copyright {text-align: center; font-size: smaller; margin: 5px 0;}

/* Footer layout styles */
.footer-content {display:flex;align-items:center;justify-content:space-between;max-width:600px;margin:0 auto;}
.footer-spacer{flex:1;}
.footer-logo{flex:1;text-align:center;}
.footer-logo img{max-width:400px;object-fit:contain;}
.footer-social{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:20px;justify-content:end;align-items:center;margin-left:20px;}
.footer-social img{height:50px;width:auto;object-fit:contain;}

/* Responsive footer for screens 500px and below */
@media all and (max-width: 500px) {
  .footer-content {flex-direction:column;gap:10px;max-width:100%;padding:0 20px;}
  .footer-spacer {order:1;flex:none;height:0;}
  .footer-social {order:2;flex:none;margin-left:0;justify-content:center;max-width:200px;margin:0 auto;}
  .footer-logo {order:3;flex:none;}
  .footer-logo img {max-width:285px;height:54px;}
  .footer-social img {height:40px;}
}

/* summer-site */

/* 
responsive
grid layout : smartphone : 570px under
navigation layout : 660px over
*/

.s-dev {display: block;}
.n-dev {display: none;}
header > img {padding: 10px 0; margin: 0 auto;}
header h1 {display: none; font-family: "M PLUS Rounded 1c"; font-weight: 800; color: red;}

@media all and (min-width: 660px) {
  .s-dev {display: none;}
  .n-dev {display: block;}
}

* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/*html {background: linear-gradient(45deg, rgba(0,163,149,1), rgba(89,118,186,1) 35%, rgba(89,118,186,1) 65%, rgba(0,159,232,1));}*/

body {font-family: Arial, Verdana, sans-serif; font-size: 16px; line-height: 1.2; margin:0 auto; background-image: url(../../img/sum2024bk.jpg); background-color:rgba(255,255,255,0.5); background-blend-mode:lighten;}
.container {overflow: hidden; max-width: 1920px; margin: 0 auto; background: linear-gradient(180deg, rgba(0,163,149,.1), rgba(89,118,186,.4) 35%, rgba(89,118,186,.7) 65%, rgba(0,159,232,.9));}
.container-inner {display: flex; flex-direction: column; overflow: hidden; max-width: 1920px; margin: 0 auto; background: linear-gradient(180deg, rgba(0,159,232,.9), rgba(89,118,186,.9) 35%, rgba(89,118,186,.9) 65%, rgba(0,159,232,.9));}
main {flex: 1 0 auto; overflow: hidden; max-width: 1380px; margin: 0 auto; padding: 0 12px 10px 12px;}
h2 {font-size: 20px; font-weight: bold; margin: 2px 2px 2px 3px;}
h2.res-title {text-align: center; margin-bottom: 12px;}
h3 {font-size: 16px; font-weight: bold; margin: 5px 0 3px 0;}

.heder-bottom {background: linear-gradient(45deg, rgba(0,163,149,1), rgba(89,118,186,1) 35%, rgba(89,118,186,1) 65%, rgba(0,159,232,1)); padding-bottom: 10px}
.today-box {margin: 10px 0 0; overflow: hidden; display: grid; grid-auto-flow: column; justify-content: center;}
.info-box > h2,p {line-height: 1.6;}
.info-box a {color: rgba(248,183,60,1);}
.info-box-finner > p {line-height: 1.6;}
.grid > h2,p {line-height: 1.2;}
.grid > a > div.white p {color: white;}
div.info-box h2,p {color: #fff;}
div.info-box-finner {background: rgba(240,240,240,.7); -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;	border-radius: 5px;	padding: 7px 15px 6px; border: solid 1px #fff;}
div.info-box-finner p {font-size: 14px; color: #000;}
div.info-box-finner a {text-decoration: none; color: rgba(230,60,60,.9); margin: auto 4px; font-weight: bold;}
div.info-box-finner a:hover {color: rgba(230,80,80,.7);}
div.info-box-sinner {margin-bottom: 5px;}

/* ---- links ---- */

a {text-decoration: none;}
a:hover {opacity: .7;}
a:active {opacity: .8;}

/* ---- headers ---- ***** */

h1, h2, h3, h4 {
  line-height: 1.25;
}

h1 {
  font-weight: bold; font-size: 2.65em; margin-bottom: 0.2em; margin-top: 2.0em;
}

h1:first-child { margin-top: 0; }

h2 {
  font-weight: bold;
}

h3 {
  font-weight: normal; font-size: 1.4em; margin-top: 2.0em; margin-bottom: 0.8em;
}

h4 {
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.1em;
}

/* ---- lists ---- ***** */

ul, ol {padding-left: 1.8em;}

.clearfix:after {
  content: ''; clear: both; display: block;
}


/* web fonts */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;600;700;800;900&family=Noto+Sans+JP:wght@700;800;900&family=Zen+Maru+Gothic:wght@700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300..900&display=swap');

/* main *****
------------------------- */

/* ---- instruction ---- */

.orange_bg          {background: rgba(248,183,60,1);}
.yellow_bg          {background: rgba(255,241,0,1);}
.yellow2023_bg      {background: rgba(255,247,103,1)}
.pink_bg            {background: rgba(244,180,208,1);}
.blue_bg            {background: rgba(155,208,236,1);}
.green_bg           {background: rgba(163,198,84,1);}
.green2_bg          {background: rgba(209,223,150,1);}
.lightgreen_bg      {background: rgba(131,194,165,1);}
.purple_bg          {background: rgba(207,201,224,1);}

/* ---- notification ---- */

/* button overwrites
------------------------- */

.button {border-color: #222;}

/* grid
------------------------- */

.grid {position: relative;}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* element-item
------------------------- */

.element-item {position: relative; float: left; width: 250px; height: 250px; margin: 8px; padding: 10px; border-radius: 10px; display: grid; grid-template-rows: 10fr 18fr 8fr 20fr 3fr; border: solid 1px rgba(255,255,255,.5);}
.element-item-clear {place-items: center; grid-template-rows: 1fr 10fr 1fr;}
.element-item-nodate {position: relative; float: left; width: 250px; height: 250px; margin: 8px; padding: 10px; border-radius: 10px; display: grid; grid-template-rows: 1fr 2fr 2fr; border: solid 1px rgba(255,255,255,.5);}
.element-item > * {margin: 0; padding: 0;}

.element-item.orange          {background: rgba(248,183,60,1);}
.element-item.yellow          {background: rgba(255,241,0,1);}
.element-item.yellow2023      {background: rgba(255,247,103,1)}
.element-item.pink            {background: rgba(244,180,208,1);}
.element-item.blue            {background: rgba(155,208,236,1);}
.element-item.green           {background: rgba(163,198,84,1);}
.element-item.green2          {background: rgba(209,223,150,1);}
.element-item.lightgreen      {background: rgba(131,194,165,1);}
.element-item.purple          {background: rgba(207,201,224,1);}

.element-item .name {display: none;}
.element-item .number {display: none;}

@media all and (max-width: 570px) {
  .element-item {position: relative; width: 100%; height: auto; margin: 8px 0; padding: 10px; display: block;}
  .element-item .t-img {width: 100%; max-width: 200px; height: auto; margin: .5em; display: inline-block; object-fit: cover; border-radius: 10px; max-height: 200px; min-width: auto;}
}


/* element-item original
------------------------- */

/*
.element-item .name {position: absolute; left: 10px; top: 60px; text-transform: none; letter-spacing: 0; font-size: 0.8em; font-weight: normal;}
.element-item .symbol {position: absolute; left: 10px; top: 0px; font-size: 2.8em; font-weight: bold; color: white;}
.element-item .number {position: absolute; right: 8px; top: 5px;}
.element-item .weight {position: absolute; left: 10px; top: 76px; font-size: 0.8em;}
*/

/* grid-item
------------------------- */

.grid p {color: #181878; font-weight: bold; font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}

p.t-online {grid-row: 2 / 2; grid-column: 5 / 5; font-size: 9px; background: rgba(210,18,118,.9); color: white; text-align: center; padding: 5px 0; border-radius: 5px; align-self: center; justify-self: center; min-width: 60px;}
.t-numb {grid-row: 1 / 1; grid-column: 4 / 5; font-size: 12px; align-self: end; margin-block-end: 0; vertical-align: bottom; text-transform: lowercase; padding-left: .3em; transform: translate(-3px, -10px);}
p.t-numb {color: rgba(250,250,250,1);}
div.yellow > p.t-numb {color: rgba(250,250,250,1)} /* 2024は黄色背景もマゼンダ */
.t-img {grid-row: 1 / 3; grid-column: 1 / 1; height: 100px; align-self: start; justify-self: end; border-radius: 5px; object-fit: cover; min-width: 168px;}
.t-date {grid-row: 3 / 4; grid-column: 1 / 5; padding-top: 5px; font-size: 18px; font-weight: bold; max-width: 230px;}
.t-date-m {grid-row: 3 / 4; grid-column: 1 / 5; padding-top: 32px; font-size: 18px; font-weight: bold; text-align: center;}
.t-title {grid-row: 4 / 5; grid-column: 1 / 5; font-size: 20px; align-self: stretch; text-align: center;}
.t-title-m {grid-row: 4 / 5; grid-column: 1 / 5; padding-top: 4px; font-size: 20px; align-self: stretch; text-align: center; max-width: 230px;}
.element-item-nodate .t-title {grid-row: 2 / 3; grid-column: 1 / 5; font-size: 20px; align-self: center; text-align: center; padding-top: 0;}
.element-item-nodate .t-numb {transform: translate(-3px, -16px);}
.t-sub-title {grid-row: 3 / 4; grid-column: 1 / 5; font-size: 14px; align-self: center; text-align: center; color: rgba(60,60,60,0.8); line-height: 1.4;}
.t-cate {grid-row: 5 / 6; grid-column: 1 / 5; font-size: 11px; margin-bottom: -5px; font-weight: normal;}
.t-numb-letter {color: rgba(250,250,250,1); padding-left: 2px; font-size: 26px;	font-family: "Rubik", sans-serif; align-self: end; font-weight: 900; font-style: normal; text-transform: capitalize; letter-spacing: -0.1em;}
.t-entry-date {padding-left: 5px;}
.t-entry-date::after{content:"～ 受付";}
.ib-title {text-align: center; vertical-align: middle; padding-top: -15px; font-size: 24px; color: #000; line-height: 1.6;}

.fnt13 {line-height: 1.2; font-size: 13px !important;}
.fnt14 {line-height: 1.2; font-size: 14px !important;}
.fnt15 {line-height: 1.2; font-size: 15px !important;}
.fnt16 {line-height: 1.2; font-size: 16px !important;}
.fnt18 {line-height: 1.2; font-size: 18px !important;}
.fnt20 {line-height: 1.2; font-size: 20px !important;}

@media all and (max-width: 570px) {
  .t-date {max-width: fit-content;}
  .t-title .fnt13,
  .t-title .fnt14,
  .t-title .fnt15,
  .t-title .fnt16,
  .t-title .fnt18 {
    font-size: 20px !important;
  }
  .t-title {font-size: 20px !important; padding: 10px 0;}
  .element-item-nodate {display: block; height: auto;}
  .element-item-nodate .t-title {font-size: 20px !important; padding: 10px 0;}
  .element-item-nodate .t-sub-title {font-size: 16px !important; padding: 5px 0;}
}

@media all and (max-width: 570px) {
  .t-date {max-width: fit-content;}
  .t-title .fnt13,
  .t-title .fnt14,
  .t-title .fnt15,
  .t-title .fnt16,
  .t-title .fnt18 {
    font-size: 20px !important;
  }
  .t-title {font-size: 20px !important; padding: 10px 0;}
  .element-item-nodate {display: block; height: auto;}
  .element-item-nodate .t-title {font-size: 20px !important; padding: 10px 0;}
  .element-item-nodate .t-sub-title {font-size: 16px !important; padding: 5px 0;}
}

.grid p.online {height: auto; margin: 0; position: absolute; top: 60px; right: 7px; opacity: 1; z-index: 1; font-size: 9px; background: rgba(210,18,118,.9); color: white; text-align: center; padding: 5px 0; border-radius: 5px; align-self: center; justify-self: center; min-width: 60px;}
.grid img.mv-img {height: auto; margin: 0; position: absolute; top: 89px; left: 40%; opacity: .5; z-index: 1;}
.grid img.mv-img22 {height: auto; margin: 0; position: absolute; top: 90px; left: 40%; opacity: .5; z-index: 1;}
.grid img.btm-img22 {height: auto; margin: 0; position: absolute; bottom: 0; border-radius: 0 0 6% 6%;}
.grid img.btm-img22:hover {opacity: .7;}

/* 2025年 各プログラム個別ページカラー */
.purple25 { background: rgba(161,150,194,1) !important; }
.lightblue25 { background: rgba(87,185,226,1) !important; }
.darkblue25 { background: rgba(53,151,204,1) !important; }
.yellow25 { background: rgba(242,233,73,1) !important; }
.lightpink25 { background: rgba(236,177,202,1) !important; }
.pink25 { background: rgba(227,144,181,1) !important; }
.red25 { background: rgba(214,20,27,1) !important; }
.blue25 { background: rgba(30,164,218,1) !important; }
.darkyellow25 { background: rgba(242,201,31,1) !important; }
.green25 { background: rgba(162,202,127,1) !important; }
.orange25 { background: rgba(224,106,69,1) !important; }
.turquoise25 { background: rgba(129,195,184,1) !important; }
.lightorange25 { background: rgba(239,183,28,1) !important; }
.yellow25mixed {background: linear-gradient(90deg, rgba(242,233,73,1), rgba(242,201,31,1)) !important;}
.bluepink25mixed {background: linear-gradient(90deg, rgba(87,185,226,1) 50%, rgba(236,177,202,1) 50%) !important;}
.blueorange25mixed {background: linear-gradient(90deg, rgba(87,185,226,1) 50%, rgba(224,106,69,1) 50%) !important;}
.pink25mixed {background: linear-gradient(90deg, rgba(227,144,181,1), rgba(236,177,202,1)) !important;}
.turquoisegreen25mixed {background: linear-gradient(90deg, rgba(129,195,184,1), rgba(162,202,127,1)) !important;}

.oneword {display: inline-block;}
.grid p.white {color: white;}
.pale_red {color: rgba(255,0,0,.8);}
.pale_white {color: rgba(250,250,250,.8);}
.pale_blue {color: rgba(24,24,240,.8);}
.red-b {color: rgba(255,0,0,.8); font-weight: bold;}

div.box-cover {width: 100%; height: 100%;	border-radius: 10px;}
div.box-cover:hover {background: rgba(254,254,254,.2);}

@media all and (max-width: 570px) {
  p.t-online {grid-row: 1/2; grid-column: 1/2; font-size: 9px; background: rgba(210,18,118,.9); color: white; text-align: center; padding: 5px 0; border-radius: 5px; align-self: center; justify-self: normal; min-width: 80px;}
}

/* nav
------------------------- */

/* notification
------------------------- */

.notification {
  max-width: none;
  display: none; /* hide by default */
  position: fixed;
  z-index: 20; /* above most stuff */
  bottom: 0px;
  right: 0px;
  background: #A2C;
  padding: 10px 20px;
  color: white;
  font-size: 1.2rem;
  pointer-events: none;
  -webkit-transition: opacity 0.4s;
          transition: opacity 0.4s;
}

/* ui-group
------------------------- */

.ui-group {display: inline-block;}
.ui-group__title {display: inline-block; vertical-align: top; font-size: 1.1rem; line-height: 40px; margin: 0 10px 3px 0; font-weight: bold;}
.ui-group .button-group {display: inline-block; margin-right: 20px;}

@media all and (max-width: 570px) {
  .ui-group {width: 100%;}
  .ui-group .button-group {margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
  .button {margin: 0; width: 100%; position:relative;}
}

/* スマホレイアウトでは絶対配置を解除 */
@media all and (max-width: 570px) {
  .element-item .t-img,
  .element-item .t-numb,
  .element-item .t-date,
  .element-item .t-title,
  .element-item .t-cate {
    position: static !important; transform: translate(0, 0);
  }
  .grid p.online,
  .grid img.mv-img,
  .grid img.mv-img22,
  .grid img.btm-img22 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    margin: 0 !important;
  }
}