/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

.noto-serif {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;}


/* marquee */
.marquee {height: 2.8rem; width: 119%; overflow: hidden; position: relative; background-image: url(/img/2026/stitch.png); background-repeat: repeat; margin-top:-3.1rem; background-size: contain; margin-left: -1rem;}
.marquee div {display: block; width: 200%; height: 2rem; position: absolute;overflow: hidden;animation: marquee 35s linear infinite; color:#efeaed; font-family:"Titillium Web"; line-height: 2.5; font-weight: 700;}
.marquee span {float: left; width: 12%;}
span.arccs2026 {width:4%;}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}


/* subpage title text effect*/
@-webkit-keyframes focus-in-expand{0%{letter-spacing:-.5em;-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}
@keyframes focus-in-expand{0%{letter-spacing:-.5em;-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}
.focus-in-expand{-webkit-animation:focus-in-expand .8s cubic-bezier(.25,.46,.45,.94) both;animation:focus-in-expand .8s cubic-bezier(.25,.46,.45,.94) both}


/* .sub_visual{animation:kenburns-bottom 1s ease-in forwards; padding: 17rem 0; background:url(/img/2026/bar.jpg); background-position: center center; background-size: contain !important;} */

.sub_visual{padding: 17rem 0; background:url(/img/2026/bar.jpg); background-position: center center; background-size: contain !important;}
.sub_visual::before {content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; background: url(/img/2026/14th.png) no-repeat top 60% right 5%;background-size:17%; max-width: 1920px;}
.visual_txt {margin-top:-20rem;}
.visual_txt h2 {color:#103a5f; font-size:6rem; text-transform: uppercase; letter-spacing: .5rem; font-family: "Noto Serif"; text-align: left; width: 90%; max-width: 1920px; margin:0 auto;}
.visual_txt h6 {color:#fff; font-size:1.2rem; line-height: 1.8;}



@media screen and (min-width: 768px) and (max-width: 1200px){
  .sub_visual {padding: 9.6rem 0; background: url(/img/2026/bar.jpg);
    background-position: center center; background-size: contain !important; background-repeat: repeat !important;}
  .visual_txt {margin-top: -12rem;}
  .visual_txt h2 {font-size:3rem; letter-spacing: .3rem;}
  .marquee {height: 2.5rem; margin-left: -2rem !important; width: 119%;}
  .marquee div {line-height: 2.4; font-size: 1rem;}
  .sub_visual::before {background-size: 20%; max-width: 1200px;}
  .marquee span {width:25%; max-width: 420px;}
  .marquee span.arccs2026 {width:7%;}

}



@media only screen and (min-width: 501px) and (max-width: 767px){
  .sub_visual {padding: 0; min-height: 340px; background-size: cover !important;}
  /* .visual_txt h6 {font-size:1rem; line-height: 1.6; margin-bottom: 10px;} */
  .visual_txt h2 {line-height: 1.1; font-size:1.8rem; letter-spacing: 2px !important;}
  .visual_txt {margin-top: -12rem;}
  .sub_visual::before {max-width:767px; background: url(/img/2026/14th.png) no-repeat top 47% right 7%; background-size: 25%;max-width: 767px;}
  .marquee {margin-left: -4rem !important; width: 119%; height: 2.2rem;}
        .marquee span {width: 25%;}
      .marquee span.arccs2026 {width:12%;}
}


@media only screen and (max-width: 500px){
  .sub_visual {padding: 0; min-height: 300px; background-size: cover !important;}
    .visual_txt h2 {line-height: 1.1; font-size:1.6rem; letter-spacing: 2px !important;}
  .visual_txt {margin-top: -10rem;}
    .sub_visual::before {max-width:500px; background: url(/img/2026/14th.png) no-repeat top 47% right 7%; background-size: 25%; max-width: 500px;}
      .marquee {margin-left: -2rem !important; width: 119%; height: 2.2rem;}
      .marquee span {width: 36%;}
      .marquee span.arccs2026 {width:13%;}
}