@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');

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;}

@media screen and ( min-width: 768px ) {
  body {font-size: 16px;}
}

html {font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}
a {text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects;}
a:active, a:hover {outline-width: 0;}
a:hover {opacity: .9;}
a:active {opacity: .8;}
b, strong {font-weight: inherit;}
dfn {font-style: italic;}
img {border-style: none; max-width: 100%;}
button, input, optgroup, select, textarea {font: inherit; margin: 0;}
button, input {overflow: visible;}
button, select {text-transform: none;}
button, html [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button; appearance: button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none; padding: 0;}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend {box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;}
textarea {overflow: auto;}
[type="checkbox"], [type="radio"] {box-sizing: border-box; padding: 0;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield; appearance: textfield; outline-offset: -2px;}
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-input-placeholder {color: inherit; opacity: 0.54;}
::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;}
optgroup {font-weight: bold;}
code, kbd, pre, samp {font-family: monospace, monospace; font-size: 1em;}
figure {margin: 1em 40px;}
hr {box-sizing: content-box; height: 0; overflow: visible;}

.container {overflow: hidden; max-width: 1920px; margin: 0 auto; background: rgba(84,194,240,.8); min-height: 1080px;}
header > img {width: 100%; margin: 0 auto;}
.s-dev {display: block;}
.n-dev {display: none;}
header h1 {font-family: "M PLUS Rounded 1c"; font-weight: 800; text-align: center; font-size: 6em; padding: .5em;}
@media all and (min-width: 1080px) {
  .s-dev {display: none;}
  .n-dev {display: block;}
}
.container-inner {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));}
article {padding: 0 12px 10px 12px;}

h1, h2, h3, h4 {line-height: 1.25;}
h1 {font-weight: bold; font-size: 2em; margin-bottom: 0.2em; margin-top: 2em; color: white;}
h1:first-child { margin-top: 0;}
h2 {font-family: "M PLUS Rounded 1c", Arial, Verdana, sans-serif; font-size: 2em; font-weight: 800; margin: 0 .5em .5em; color: rgba(77,67,151,1);}
h2.res-title {text-align: center; margin-bottom: 12px;}
h3 {font-family: "M PLUS Rounded 1c", Arial, Verdana, sans-serif; font-size: 16px; font-weight: bold; margin: 5px 0 3px 0;}
h4 {text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.1em;}

.clearfix:after {content: ''; clear: both; display: block;}
.info-box {padding: .8em 1.2em; text-align: center;}
.info-box > h2,p {line-height: 1.6;}
.info-box-finner > p {line-height: 1.6;}
.grid > h2,p {line-height: 1.2;}
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,.9);}
div.info-box-sinner {margin-bottom: 5px;}

.carousel {display: flex; max-width: 800px; width: 100%; overflow: hidden; margin: 0 auto; border-radius: 1em;}
.carousel img {width: 100%; max-width: 800px; transition: transform 0.5s ease;}

/* main */
.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);}
.lightgreen_bg      {background: rgba(131,194,165,1);}
.purple_bg          {background: rgba(207,201,224,1);}

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

footer {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;}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.header-image-lg { display: block; width: 100%; height: auto; max-width: 100%; }
.header-image-sml { display: none; }
@media (max-width: 1080px) {
  .header-image-lg { display: block; }
  .header-image-sml { display: none; }
}

.event-intro { max-width: 1000px; margin: 0 auto; margin-bottom: 2em; text-align: center; line-height: 1.8; background: white; padding: 2em; border-radius: .2em;}
.event-intro p { font-size: 1.3em; margin-bottom: 0.5em; color: #2a4d7a; }
.event-intro .event-summary { background: #f7fbff; border: 1px solid #b5c9e2; padding: 1em; border-radius: .3em; margin: 1em 0; color: #2a4d7a; }
.event-intro ul { text-align: left; margin: .5em auto 1em; max-width: 800px; }
.event-intro .note { font-size: .9em; color: #555; margin-left: .5em; }
.event-intro .fee { font-weight: 700; color: #b33; margin-left: .5em; }
.event-intro h3, .event-intro h4, .event-intro h5 { color: #2a4d7a; margin-top: 1.2em; }
.event-grid { max-width: 1000px; margin: 0 auto; background: rgb(255,255,255); border-radius: .2em; padding: 2em; margin-bottom: 2em; }
.event-grid h3 { text-align: center; font-size: 1.5em; font-weight: bold; color: #2a4d7a; margin-bottom: 1.5em; }
.event-grid .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: 2em; }
.event-card { display: flex; flex-direction: column; align-items: center; background: rgba(85,113,149,.8); border-radius: 16px; padding: 0; text-decoration: none; color: #222; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: box-shadow 0.2s, transform 0.2s; font-size: 1.1em; overflow: hidden; }
.event-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.14); transform: translateY(-6px) scale(1.04); }
.event-icon { width: 100%; height: 50%; background: #e0e7ef; display: flex; align-items: center; justify-content: center; font-size: 2em; font-weight: bold; color: #2a4d7a; border-bottom: 2.5px solid #b5c9e2; }
.event-image { width: 100%; height: 50%; object-fit: cover; }
.event-title { display: none; }
.coming-soon { opacity: 0.6; pointer-events: none; }
.soon-label { display: block; font-size: 0.95em; color: #888; margin-top: 0.3em; }


.event-images-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0; }
.event-images-grid .event-image { width: 100%; height: auto; display: block; }

/* 切替ボタン */
.view-toggle { display: inline-flex; gap: .5rem; margin: .5rem 0 1rem; }
.toggle-btn {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  color: #1b2733;
  border: 1px solid #cdd3df;
  border-radius: 9999px;
  padding: .45rem .9rem;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
}
.toggle-btn:focus { outline: 2px solid #4c8bf5; outline-offset: 2px; }
.toggle-btn.is-active { background: #1b2733; color: #fff; border-color: #1b2733; }

/* YouTube 埋め込みのレスポンシブ対応（16:9） */
.video-embed { position: relative; width: 100%; max-width: 800px; margin: .6em auto; }
.video-embed::before { content: ""; display: block; padding-top: 56.25%; }
.video-embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }