@charset "utf-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

:root {
    --color-light-green: #4AAF67;
    --color-deep-green: #004B17;
    --color-red: #D54444;
    --color-yellow : #FFE100;
    --color-oren : #FF9D00;
    --color-blue:  #0A6BA8;
    --color-green: #00AD7C;
    --bgColor-yellow: #F9F3E1;
    --bgColor-blue: #E1F0F9;
    --bgColor-green: #E1F9EA;
    --base-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
    --body-space: clamp(15px,2rem,20px);
    --speed-normal: 0.3s;
    --speed-scale: .3s cubic-bezier(0.33, 1, 0.68, 1); 
    --link-icon-w: 1.25rem;
    --sec-margin: 3.125rem;
    --arrow-move: 3px;
    --sp-head: 57px;
}


html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

ul,
ol {
    list-style: none;
}

html {
    font-size: 17px;
    scroll-behavior: smooth;
    overflow-y: scroll;
}
body {
    line-height: 1.6;
    background: #fff;
    overflow-x: hidden;
    color: #000;
    font-family: "Zen Kaku Gothic New", sans-serif;
    /* font-weight: 500; */
    /* padding: 4.6875rem 0 0 3.125rem; */
    position: relative;
}
* {
    font-family: "Zen Kaku Gothic New", sans-serif;
    box-sizing: border-box;
}
img {
    vertical-align: bottom;
    max-width: 100%;
}


article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}

nav ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    background: transparent;
    text-decoration: none;
    color: #0049BA;
    transition: var(--speed-normal) text-decoration-thickness;
    text-decoration: underline;
}
a.link {
    /* color: var(--main-color2); */
    /* color: #bc0022; */
    /* text-decoration: underline; */
}
a.link.color2 {
    color: #0a5dbb;
}
a:hover {
    text-decoration-thickness: 3px;
}
a:focus {
    outline: none
}

a:hover img {
    /* opacity: .85 */
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    /* background-color: #ff9; */
    /* color: #000; */
    /* font-style: italic; */
    /* font-weight: bold; */
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    border-collapse: collapse;
    /* table-layout: fixed; */
    /* word-break: keep-all; */
    /* background: #fff; */
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input,select {
    width: 100%;
    -webkit-appearance: none;
    outline: none;
    margin: 0;
    font-family: 'Noto Sans JP',sans-serif;
}
button {
    -webkit-appearance: none;
    outline: none;
    margin: 0;
    font-family: 'Noto Sans JP',sans-serif;
}
label input[type="radio"],label [type="checkbox"] {
    display: none
}
input:not([type="radio"],[type="checkbox"]),
select {
    vertical-align: middle;
    padding: 0;
    border: 2px solid #ccc;
    background-color: #fff;
    height: 2.95rem;
    font-size: 1.125rem;
    padding: 0.3rem 1.8rem 0.3rem .8rem;
    border-radius: var(--base-radius);
}
p.no-event {
    display: none;
}

@media (max-width: 1440px) {
    html { font-size: 1.2vw; }
}
@media (max-width: 1024px) {
    html { font-size: 1.7vw; }
}
@media (max-width: 810px) {
    html { font-size: 2vw; }
    :root {
    --sp-head: 47px;
    }
}
@media (max-width: 640px) {
    html { font-size: 2.4vw; }
}
@media (max-width: 480px) {
    html { font-size: 3.2vw; }
}

/* 共通
====================================================*/
body {
    background: #fff;
    letter-spacing: 0.03rem;
}
body:after{ content:""; width:100%; height:100%; position:fixed; border: 10px solid #fff; top:0; left:0; z-index:5; box-sizing:border-box; pointer-events:none; }
/* --- 
　ヘッダー
 --- */
header{
    background: var(--color-blue);
    color: #fff;
    width: 18rem;
    padding: 3rem 2rem 0;
    position: fixed;
    left: 10px;
    top: 10px;
    height: calc(100% - 20px);
    z-index: 100;
}
header a{ color:#fff; text-decoration:none; position:relative; display:inline-block; }
header h1{ margin:0 auto 1.5rem; width: 12rem; }
header h1 a{ display:block; transition:var(--speed-normal) opacity; }
header h1 a:hover{ opacity: .7;}
header h1 img{ width:100%; }
#header {
    width: 12rem;
    margin: 0 auto;
}
#header ul{}
#header li{ margin:1rem 0; }
#header nav > ul > li > a{ font-size:110%; font-weight:500; padding:.5rem 0 .5rem 2.2rem;  }
#header nav > ul > li > a:before{ content:""; position:absolute; left:0; top:calc(50% - .9rem); width:1.8rem; height:1.8rem; background:url(../images/common/icon1.svg) no-repeat center center; background-size:contain; }
#header nav > ul > li > a.howto:before{ background-image:url(../images/common/icon2.svg); }
#header nav > ul > li > a.event:before{ background-image:url(../images/common/icon3.svg); }
#header nav > ul > li > a.access:before{ background-image:url(../images/common/icon4.svg); }
#header nav > ul > li > a:after{ content:""; position:absolute; left:0; bottom:0; width:0; height:3px; border-radius:5px; background:#fff; transition:var(--speed-scale) width; }
#header nav > ul > li > a:hover:after,#header nav > ul > li > a.act:after{ width:100%; }
#header nav > ul > li > a.act:after{ background: var(--color-yellow); height:4px; }
#header nav > ul > li > a.act{ font-weight:700; }
#header nav > ul > li ul{ padding-left:1rem; font-weight:500; display:none; }

#head_foot {
    position: absolute;
    width: calc(100% - 3rem);
    left: 1.5rem;
    bottom: 2rem;
}
#head_foot p{ font-size:80%; }
#head_foot a.lang{ padding:.5rem 0 .5rem 1.8rem; font-weight:500; font-size: 110%; margin-bottom:1rem; transition:var(--speed-normal) opacity; }
#head_foot a.lang:before{ content:""; position:absolute; left:0; top:calc(50% - .75rem); width:1.5rem; height:1.5rem; background:url(../images/common/icon_lag.svg) no-repeat center center; background-size:contain; }
#head_foot a.lang:hover{ opacity:.7; }

footer #copy{ text-align:center; padding:1.5rem; color:#555; font-size:90%; }

.menu-trigger,
.menu-trigger span {
  display: block;
  transition: var(--speed-normal) transform;
  box-sizing: border-box;
}
.menu-trigger {
  position: fixed;  right: 7px; top: calc((var(--sp-head) - 33px) / 2);
  width: 54px;
  height: 33px;
  z-index: 100;
  background: #fff;
  border-radius: 100px;
  z-index: 5;
  display: none;
}
.menu-trigger.active {  }
.menu-trigger :before{}
.menu-trigger span {
  position: absolute;
  left: 18px;
  width: 20px;
  height: 1px;
  background-color: var(--color-blue);
}
.menu-trigger span:nth-of-type(1) {
  top: 12px;
}
.menu-trigger span:nth-of-type(2) {
  top: 16px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 12px;
}
.menu-trigger.active span {  }
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(4px) rotate(-32deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-4px) rotate(32deg);
}
#gnav-bg{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100dvh;
    background: #000;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    transition: var(--speed-normal) opacity;
}

@media (max-width: 1024px) {
 body:after{ display:none; }
 .menu-trigger { display:block; }
 header{ width:100%; height:auto; padding: 0 2rem; height:var(--sp-head); left:0; top:0; display:flex; align-items:center; }
 header h1{ margin:0; width:auto; height:calc(var(--sp-head) - 18px); display:inline-block; }
 header h1 a{ width:100%; height:100%; }
 header h1 img{ height:100%; width:auto; }
 #nav{ position:absolute; right: 0; top:0; background:var(--color-blue); height:100svh; box-sizing:border-box; padding:50px 3rem; clip-path: inset(0 0 0 100%); transition: var(--speed-scale) clip-path;}
 header.active #nav{ clip-path: inset(0 0 0 0); }
 header.active + #gnav-bg{ opacity: .6; pointer-events:auto; }
 #header nav > ul > li > a.act + ul{ display:block; }
 #header nav > ul > li > a.act + ul a.act{ color:var(--color-yellow); }
}


/* --- 
　ボタン
 --- */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-size: 0.9375rem;
    font-size: clamp(14.5px,0.9375rem,20px);
    margin: 0.25rem auto 0;
    font-weight: 600;
    gap: 0.35rem;
    text-decoration: none;
    transition: var(--speed-normal) background,var(--speed-normal) border-color,var(--speed-normal) filter;
}
.btn .arrow{ transition:var(--speed-normal) transform; }
.btn:hover .arrow{ transform:translateX(var(--arrow-move)); }

.link-list{ display:flex; gap:1rem; flex-wrap:wrap; }
.link-list.txt{ gap:1rem 2rem; align-items:end; }
.link-list li{}
.link-list li p{ font-size:110%; margin-bottom:0 !important; }
.link-list li a{ position: relative; border-radius:200px; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); padding:.8em 2.5em .8em 1em; background:#fff; text-decoration:none; display:inline-block; color:#000; font-weight:500; transition:var(--speed-normal) color,var(--speed-normal) box-shadow,var(--speed-normal) background; }
.link-list li a:before{ content: ""; position: absolute; top: calc(50% - .7em); right: .5em; background:url(../images/common/icon_arrow.svg) no-repeat center center; background-size:contain; width:1.3em; height:1.3em; filter: brightness(0) saturate(100%) invert(35%) sepia(91%) saturate(915%) hue-rotate(171deg) brightness(91%) contrast(92%); transition:var(--speed-normal) transform; }
.link-list.col1 li a:before{ filter: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(4975%) hue-rotate(358deg) brightness(98%) contrast(108%); }
.link-list.col2 li a:before{ filter: invert(35%) sepia(43%) saturate(4358%) hue-rotate(146deg) brightness(106%) contrast(102%); }
.link-list li a:hover{ color:#0A6BA8; box-shadow:none; }
.link-list li a:hover:before{ transform:translateX(var(--arrow-move)); }

.link-list.type1 li{ width:100%; }
.link-list.type1 li a{ padding-left: 0.5em; display:block; border-radius: 0;  }
.link-list.type1 li a:hover{ background:var(--bgColor-blue); border-radius: 3px; }
.link-list li a.file:before{ background-image:url(../images/common/icon_file.svg); }
.link-list li a.win:before{ background-image:url(../images/common/icon_win.svg); }
.link-list.bor li a{ border:1px solid #ddd; }

/* TOPページ
====================================================*/
#wrap{ padding:10px 10px 10px calc(18rem + 20px); }

#kv{position: relative;}
#kv .img-frame{ position:relative; overflow: hidden; height:600px; width:100%; transition:.8s cubic-bezier(0.33, 1, 0.68, 1) clip-path; clip-path: inset(0 100% 0 0); }
<<<<<<< HEAD
#kv .img-frame img{ position:absolute; left:0; top:0; animation: anime 20s 0s infinite linear; opacity:0; height:100%; width:100%; object-fit:cover; }
#kv .img-frame img:nth-child(2){ animation-delay:5s; }
#kv .img-frame img:nth-child(3){ animation-delay:10s; }
#kv .img-frame img:nth-child(4){ animation-delay:15s; }
=======
#kv .img-frame picture{ position:absolute; left:0; top:0; animation: anime 20s 0s infinite linear; opacity:0; height:100%; width:100%; }
#kv .img-frame picture img{ height:100%; width:100%; object-fit:cover;}
#kv .img-frame picture:nth-child(2){ animation-delay:5s; }
#kv .img-frame picture:nth-child(3){ animation-delay:10s; }
#kv .img-frame picture:nth-child(4){ animation-delay:15s; }
>>>>>>> ec6f863 (おじゃれスピードテスト対策10)
@keyframes anime {
    0% {  opacity: 0; }
    5% { opacity: 1;  }
    25% { opacity: 1; transform: scale(1.1); z-index:2; }
    30% { opacity: 0; transform: scale(1.12); }
    100% { opacity: 0; transform: scale(1); }
}
#kv-copy{ position:absolute; right:10%; bottom:-3rem; z-index:5; display:flex; gap:2px; align-items:start; flex-direction:row-reverse; }
#kv-copy p{ color:#fff; position:relative; font-size:280%; font-weight:500; writing-mode: vertical-rl; padding:.3em 0; letter-spacing:0.1em; line-height:1.5; clip-path: inset(0 0 100% 0); transition:.8s cubic-bezier(0.33, 1, 0.68, 1) .8s clip-path; }
#kv-copy p:last-child{ margin-top:4em; transition-delay:1.2s; }
#kv-copy p span{ position:relative; z-index:1;  }
#kv-copy p:after{ content:""; position:absolute; left:0; top:0; width: 100%; height: 100%; background:var(--color-blue); opacity:.8; }
#kv.on .img-frame,#kv.on #kv-copy p{ clip-path: inset(0 0 0 0); }


#top-about{ width:100%; padding:12rem 0; position:relative; overflow:hidden; }
#top-about .txt{ position:relative; z-index:1; margin:0 auto; }
#top-about h2{  text-align:center; font-size:240%; font-weight:500; width:75%; margin:0 auto; opacity:0; }
#top-about p{ max-width:580px; margin:1em auto 0; line-height:2; width:60%; opacity:0;  }
#top-about-ph{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:1550px; height:500px; }
#top-about-ph li{ position:absolute; opacity:0; }
#top-about-ph li img{ border-radius:1rem; }
#top-about-ph li:nth-child(1){ width:13%; left:4%; top:-10%; }
#top-about-ph li:nth-child(2){ width:16%; left:10%; bottom: -10%; }
#top-about-ph li:nth-child(3){ width:16%; right: 5%; top: -15%; }
#top-about-ph li:nth-child(4){ width:10%; right: 16%; top: 35%; }
#top-about-ph li:nth-child(5){ width:13%; right: 0%; bottom:-10%; }
#top-about.play h2{ animation:fadeIn 1s forwards; }
#top-about.play p{ animation:fadeIn 1s .5s forwards; }
#top-about.play #top-about-ph li{ animation:scale 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
#top-about.play #top-about-ph li:nth-child(2){ animation-delay:.4s; }
#top-about.play #top-about-ph li:nth-child(3){ animation-delay:.8s; }
#top-about.play #top-about-ph li:nth-child(4){ animation-delay:.2s; }
#top-about.play #top-about-ph li:nth-child(5){ animation-delay:.6s; }

#top-cont{ display:flex; gap:10px; margin:0 0 10px; }
#top-cont .top-cont-in{ width:50%; }
#top-cont #top-facility.top-cont-in,#top-facility .top-cont-ph h2{ background:var(--bgColor-blue);  }
#top-cont #top-howto.top-cont-in,#top-howto .top-cont-ph h2{ background:var(--bgColor-yellow); }
.top-cont-in{ padding:4%; opacity:0; }
.top-cont-in h2{ position:relative; font-size:150%; padding:.3em 0; border-radius:0 1rem 0 0; }
.top-cont-in h2 span{ position:relative; display:inline-block; padding:.3em 1em .3em 2.4em; }
.top-cont-in h2 span:before{ content:""; border-radius:200px; position:absolute; left:0; top:calc(50% - 1em); width:2em; height:2em; }
#top-facility.top-cont-in h2 span:before{ background:url(../images/common/icon1.svg) no-repeat center center var(--color-blue); background-size:60%; }
#top-howto.top-cont-in h2 span:before{ background:url(../images/common/icon2.svg) no-repeat center center var(--color-oren);  background-size:60%;}
#top-event.top-cont-in h2 span:before{ background:url(../images/common/icon3.svg) no-repeat center center var(--color-green);  background-size:60%;}
.top-cont-ph{ position:relative; border-radius:1rem 1rem 1rem 0; margin-bottom: 1.5em; overflow:hidden; }
.top-cont-ph h2{ position:absolute; left:0; bottom:0; }
.top-cont-ph h2:before,.top-cont-ph h2:after{ content: ""; position:absolute; background:url(../images/top/curve.svg); width:1rem; height:1rem; background-size:cover; }
#top-facility .top-cont-ph h2:before,#top-facility .top-cont-ph h2:after{ filter: brightness(0) saturate(100%) invert(92%) sepia(2%) saturate(1682%) hue-rotate(176deg) brightness(103%) contrast(95%); }
#top-howto .top-cont-ph h2:before,#top-howto .top-cont-ph h2:after{ filter: brightness(0) saturate(100%) invert(99%) sepia(31%) saturate(582%) hue-rotate(320deg) brightness(100%) contrast(96%); }
.top-cont-ph h2:before{ top:-1rem; left:0; }
.top-cont-ph h2:after{ bottom: 0; right:-1rem; }
#top-cont .top-cont-in .link-list li{ width:calc(50% - .5rem); }
#top-cont .top-cont-in .link-list li a{ display:block; font-size:110%; }
#top-event.top-cont-in{ background:var(--bgColor-green); width:100%; }
#top-event .calenderTable{ background:#fff; }
#top-event ul.link-list{ margin-top:1em; justify-content:end; }

#top-cont.play .top-cont-in{ animation:fade 1s forwards; }
#top-cont.play #top-howto.top-cont-in{ animation-delay:.3s; }
#top-cont.play + #top-event.top-cont-in{ animation:fade 1s .6s forwards; }

@media (max-width: 1440px) {
    #kv .img-frame{ height:500px; }
    #top-about h2{ font-size:220%; }
    #top-about-ph{ width:140%; height:60%; }
    #top-about-ph li:nth-child(5){ right: 10%; }
}
@media (max-width: 1024px) {
    #wrap { padding:var(--sp-head) 0 0; }
    #top-cont{ flex-direction: column; }
    #top-cont .top-cont-in{ width:100%; }

    #top-about h2{  font-size:180%; }
    #top-about p {  max-width: 500px; }
    #top-about-ph{ width:100%; height:100%; }
    #top-about-ph li:nth-child(1){ width:18%; left:2%; top:5%; }
    #top-about-ph li:nth-child(2){ width:20%; left:-5%; bottom: 8%; }
    #top-about-ph li:nth-child(3){ width:20%; right: 2%; top: 5%; }
    #top-about-ph li:nth-child(4){ width:12%; right: 4%; top: 30%; }
    #top-about-ph li:nth-child(5){ width:20%; right: 4%; bottom:5%; }
}
@media (max-width: 810px) {
    #top-about h2{ font-size:220%; }
    #top-event ul.link-list{ justify-content:center; }
}
@media (max-width: 480px) {
    #kv-copy{ right:6%;}
    #top-about-ph li:nth-child(1){ width:22%; }
    #top-about-ph li:nth-child(2){ width:22%; left:-2%; bottom: 3%; }
    #top-about-ph li:nth-child(3){ width:22%; }
    #top-about-ph li:nth-child(4){ width:16%; right: -2%; top: 23%; }
    #top-about-ph li:nth-child(5){ width:26%; bottom:5%; }
    #top-about p { width:70%; }


}


/* 下層共通
====================================================*/
#maintit{ background:var(--bgColor-blue); padding:4rem 0 .5rem; }
.howto #maintit{ background:var(--bgColor-yellow); }
.event #maintit{ background:var(--bgColor-green); }
#maintit > div{ max-width:1320px; width:90%; margin:0 auto; }
#maintit h1{ font-size:200%; font-weight:500; position:relative; padding-left:1.9em; margin-bottom:1rem; }
#maintit h1:before{ content:""; border-radius:200px; position:absolute; left:0; top:calc(50% - .8em); width:1.6em; height:1.6em; }
.facility #maintit h1:before{ background:url(../images/common/icon1.svg) no-repeat center center var(--color-blue); background-size:60%; }
.howto #maintit h1:before{ background:url(../images/common/icon2.svg) no-repeat center center var(--color-oren); background-size:60%; }
.event #maintit h1:before{ background:url(../images/common/icon3.svg) no-repeat center center var(--color-green); background-size:60%; }
.access #maintit h1:before{ background:url(../images/common/icon4.svg) no-repeat center center var(--color-blue); background-size:60%; }
#maintit .link-list{ display:flex; gap:0; flex-wrap:nowrap; width:100%; font-size:110%; }
#maintit .link-list li,#wrap > .link-list li{ width:100%;  }
#maintit .link-list li a,#wrap > .link-list li a{ display:block; border-radius:0; padding: 1.2em 2.5em 1.2em 1.2em; border-left:1px solid rgba(0, 0, 0, .3); box-shadow:0 2px 0 rgba(0, 0, 0, .15); }
#maintit .link-list li:first-child a,#wrap > .link-list li:first-child a{ border-radius:.5rem 0 0 .5rem; border:none; }
#maintit .link-list li:last-child a,#wrap > .link-list li:last-child a{ border-radius:0 .5rem .5rem 0; }
#maintit .link-list li.act a,#wrap > .link-list li.act a{ background:var(--color-blue); color:#fff; }
.howto #maintit .link-list li.act a,#wrap.howto > .link-list li.act a{ background:#FFD16E; color:#000; }
#maintit .link-list li.act a:before,#wrap > .link-list li.act a:before{ display:none; }

#wrap > .link-list{ position:fixed; flex-wrap: nowrap; top:10px; left:calc(18rem + 20px); width:calc(100% - 18rem - 30px); gap:0; padding:10px; background:var(--bgColor-blue); clip-path: inset(0 0 100% 0); transition: var(--speed-scale);clip-path; }
#wrap.howto > .link-list{ background:var(--bgColor-yellow); }
#wrap > .link-list.act{ clip-path: inset(0 0 0 0); }
#wrap > .link-list li a{   }
#wrap > .link-list li:first-child a{ border:none; }


#breadcrumbs { padding: 1.5rem 0;}
#breadcrumbs ul {
    max-width: 1440px;
    margin: auto;
    display: flex;
    padding: 0;
    font-size: 0.875rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}
#breadcrumbs a {}
#breadcrumbs ul li:not(:first-child):before {
    content: ">";
    margin-right:0.5rem;

}

/* --- 
　メインコンテンツ
 --- */
#contents { padding: 1rem 0 0; max-width:1200px; width:90%; margin:0 auto; }
#contents .sec{ margin:4rem auto; }
#contents .sec p{ margin-bottom:1rem; }
#contents .sec > picture{ margin:2rem auto; display:block; }
#contents .sec picture img{ border-radius:1rem; }
#contents .sec table {
    /* table-layout: fixed; */
    width: 100%;
    margin-bottom: 1rem
}
#contents .sec table th,
#contents .sec table td {
    border: 1px solid #999;
    text-align: left;
    padding: 0.625rem 1rem;
    vertical-align: middle;
}
#contents .sec table th {
    font-weight: 600;
    background: var(--bgColor-blue);
    color: #08487A;
}
#contents .sec table b{ font-weight:500; }
#contents .sec table .c1{ width:11em; }
#contents .sec table .c2{ width:9em; }
#contents .sec table td.subtit{  padding: 0; }
#contents .sec table td.subtit > div{ display: flex; width:100%; }
#contents .sec table td.subtit h3{ color:#08487A; font-weight: 500; padding: 0.625rem 1rem; background:#f4f4f4; }
#contents .sec table td.subtit > div div{ padding: 0.625rem 1rem; }
#contents .sec table td.bor { border-top:3px solid var(--color-blue); }

#contents .sec.map iframe{ width:100%; }

h2.catch{ font-size:200%; font-weight:500; color:var(--color-blue); line-height:1.4; margin-bottom:1rem; }
h2.catch span{ display:inline-block; background:linear-gradient(transparent 75%,var(--color-yellow) 75%); }
h2.tit{ font-size:170%; font-weight:500; line-height:1.4; padding-left:.6rem; border-left:4px solid var(--color-blue); margin-bottom:1rem; }
h2.tit span{ font-size:85%; }
.flex-ph{ display:flex; gap:20px; margin:2rem auto; }
.flex-ph > div{ width:100%; }
.flex-ph > picture{ width: 100%; }

.step{}
.step > li{ position:relative; border:2px solid #ddd; border-radius:.6rem; margin-bottom:4rem; }
.step > li .inner{ padding:1.5rem; }
.step > li:not(:last-child):before{ content:""; position:absolute; left:calc(50% - 2rem); bottom:-3.7rem; width:4rem; height:3rem; background:url(../images/common/arr.svg) no-repeat center center; background-size:contain; }
.step h3{ background:var(--bgColor-yellow); color: var(--color-blue); font-weight:600; font-size:130%; border-radius:3px; padding:.7rem 1rem; border-radius:.6rem .6rem 0 0; }
.step h3.typ1{ border-radius:.6rem; }
.step h3 span{ font-size:85%; font-weight:500; }

.box{ background:#f4f4f4; border-radius:5px; padding:1.5rem; }
.box.note{ font-size:90%; color:#333; }
.box dl{ display:flex; align-items:center; gap:1.5rem; } 
.box dt{ font-weight:600; position:relative; text-align:center; width:14em;  }
.box dd{ padding-left:1.5rem; border-left:1px solid #ccc; }
.box h4{ color:var(--color-blue); margin-bottom:1rem; }

ul.list{}
ul.list li{ padding:.2em 0 .2em 1em; position:relative; }
ul.list li:not(.end):before{content: ""; position: absolute; left: .2em; top: .9em; width: 4px; height: 4px; background-color: #666; border-radius: 2px; }

@media (max-width: 1024px) {
    #maintit .link-list{ font-size:100%; }
    #maintit .link-list li a{ padding: 1em 2.5em 1em .8em; height:100%; display:flex; align-items:center; }
    #wrap > .link-list{ display:none; }
    h2.catch { font-size:160%; }
    h2.tit { font-size:140%; }
    .flex-ph{ gap:1.5rem; }
}
@media (max-width: 480px) {
    #maintit .link-list{ display:block; font-size:110%;  }
    #maintit .link-list li a{  border-top:1px solid rgba(0, 0, 0, .3);  border-left:none; }
    #maintit .link-list li:first-child a{ border-radius:.5rem .5rem 0 0; border-top:none; }
    #maintit .link-list li:last-child a{ border-radius:0  0  .5rem .5rem; }
    .flex-ph{ flex-direction: column;}
    .step > li{ padding:1rem; }
    .box dl{ flex-wrap:wrap; } 
    .box dt{ text-align:left; width:100%;  }
}

/* =========================
   scroll lock
========================= */
html.is-modal-open {
  overflow: hidden;
}

/* =========================
   gallery thumb
========================= */
.gallery{ display:flex; flex-wrap:wrap; gap:1.5rem; }
a.gallery-thumb {
  display: inline-block;
  text-decoration: none;
  color: #000;
  width: calc((100% - 3.1rem) / 3 );
}
a.gallery-thumb:hover{}

a.gallery-thumb picture{ overflow:hidden; border-radius: .5rem !important; display:block; }
a.gallery-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius:0 !important;
  transition: var(--speed-scale) transform,var(--speed-scale) filter;
}
a.gallery-thumb img:hover{ transform:scale(1.1); filter:brightness(1.15); }
a.gallery-thumb p{ margin-top:.5rem; display:block; }

/* =========================
   modal overlay
========================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* =========================
   modal content
========================= */
.modal-content {
  position: relative;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 50%; transform: translateY(-47%);
  max-width: 1400px;
  margin: 0 auto;
}

/* =========================
   close
========================= */
.modal-close {
  position: absolute;
  top: -3rem;
  right: -1rem;
  width: 3rem;
  height: 3rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.modal-close::before,
.modal-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2px;
  background: #fff;
}

.modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* =========================
   media
========================= */
.modal-media {
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /*overflow: hidden;*/
  position: relative;
}

.modal-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s ease,transform 0.2s ease;
  will-change: opacity, transform;
}

/* 表示中 */
.modal-image.is-show {
  opacity: 1;
  transform: translateX(0);
}

/* ===== 退場 ===== */
.modal-image.exit-next {
  opacity: 0;
  transform: translateX(-1rem);
}

.modal-image.exit-prev {
  opacity: 0;
  transform: translateX(1rem);
}

/* ===== 入場 ===== */
.modal-image.enter-next {
  opacity: 0;
  transform: translateX(1rem);
}

.modal-image.enter-prev {
  opacity: 0;
  transform: translateX(-1rem);
}


/* =========================
   caption
========================= */
.modal-caption {
  color: #fff;
  margin-top: 1rem;
  max-height: 20vh;
  overflow-y: auto;
}

/* =========================
   arrows (border方式)
========================= */
.modal-arrow {
  position: absolute;
  top: 50%;
  width: 3.6rem;
  height: 3.6rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
}

.modal-prev {
  left: -3rem;
}

.modal-prev::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6rem;
  height: 1.6rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-next {
  right: -3rem;
}

.modal-next::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6rem;
  height: 1.6rem;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

@media (max-width: 810px) {
    .gallery{ display:flex; flex-wrap:wrap; gap:1rem; }
    a.gallery-thumb { width: calc((100% - 1rem) / 2 ); }
  .modal-arrow {
    display: none;
  }
}




@media (max-width: 768px) {
    .pageLinksList li {
        min-width: calc((100% - 2rem)/3);
    }
    .indexImgList {
        grid-template-columns: max(50px, 20%) 1fr;
        gap: 1.25rem 1.25rem;
    }
    .indexImgList .ttlLink {
        place-content: center
    }
    .indexImgList .img {
        grid-row: 1/2;
    }
    .indexList {
        grid-column: 1/3;
        grid-template-columns: 1fr;
    }
    .indexImgList .moreBtnWrap {
        grid-column: 1 / 3
    }
    .indexList li {
        padding: 0 0.5rem
    }
}
@media (max-width: 500px) {
    .pageLinksList li {
        /* min-width: calc((100% - 1rem)/2); */
    }
}
/* class */
@media screen and (max-width: 810px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width: 811px) {
    .sp {
        display: none !important;
    }
}

@media screen and (max-width: 1080px) {
    .o1080 {
        display: none !important;
    }
}

@media screen and (min-width: 1081px) {
    .u1080 {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .o768 {
        display: none !important;
    }
}

@media screen and (min-width: 769px) {
    .u768 {
        display: none !important;
    }
}

@media screen and (max-width: 640px) {
    .o640 {
        display: none !important;
    }
}

@media screen and (min-width: 641px) {
    .u640 {
        display: none !important;
    }
}

@media screen and (max-width: 480px) {
    .o480 {
        display: none !important;
    }
}

@media screen and (min-width: 481px) {
    .u480 {
        display: none !important;
    }
}
.fc-red {
    color: var(--main-color);
}

.dilb {
    display: inline-block;
}

.fll {
    float: left;
}

.tal {
    text-align: left;
}

.tac {
    text-align: center;
}

.tar {
    text-align: right;
}

@keyframes fade{
    0% { opacity:0; }
    to { opacity:1; }
}
@keyframes fadeIn {
    0% { opacity:0; transform:translateY(2rem); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes scale {
  0% {opacity: 0; transform: scale(1.2);}
  to {opacity: 1;  transform: scale(1); }
}

.note{ font-size:.85rem; color:#555; font-weight:normal; }
.note.red{ color:var(--main-color); }
.tar{ text-align:right !important; }
.tac{ text-align:center !important; }
.w60 {width: 60px;}
.w70 {width: 70px;}
.w80 {width: 80px;}
.w100 {width: 100px;}
.w200 {width: 200px;}
.w100p {width: 100%;}
.mxw-60 {max-width: 60px !important;}
.mxw-100 {max-width: 100px !important;}
.mxw-150 {max-width: 150px !important;}
.mxw-200 {max-width: 200px !important;}
.mxw-250 {max-width: 250px !important;}
.mxw-300 {max-width: 300px !important;}
.mxw-380 {max-width: 380px !important;}
.mxw-400 {max-width: 400px !important;}
.mxw-600 {max-width: 600px !important;}

/* margin-top */
.mt1em{ margin-top:1rem; }

.mt0{margin-top: 0 !important;}
.mt1{margin-top: 1px;}
.mt2{margin-top: 2px;}
.mt3{margin-top: 3px;}
.mt4{margin-top: 4px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px !important;}
.mt15{margin-top: 15px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mt60{margin-top: 60px !important;}

.mt1rem{margin-top: 1rem;}
.mt2rem{margin-top: 2rem;}
.mt3rem{margin-top: 3rem;}
.mt4rem{margin-top: 4rem;}

/* margin-right */
.mr1{margin-right: 1px;}
.mr2{margin-right: 2px;}
.mr3{margin-right: 3px;}
.mr4{margin-right: 4px;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}

/* margin-bottom */
.mb0{margin-bottom: 0!important;}
.mb1{margin-bottom: 1px;}
.mb2{margin-bottom: 2px;}
.mb3{margin-bottom: 3px;}
.mb4{margin-bottom: 4px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px !important;}
.mb50{margin-bottom: 50px !important;}

.mb1rem{margin-bottom: 1rem;}
.mb2rem{margin-bottom: 2rem;}
.mb3rem{margin-bottom: 3rem;}
.mb4rem{margin-bottom: 4rem;}

/* margin-left */
.ml1{margin-left: 1px;}
.ml2{margin-left: 2px;}
.ml3{margin-left: 3px;}
.ml4{margin-left: 4px;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}

/* padding-top */
.pt1{padding-top: 1px;}
.pt2{padding-top: 2px;}
.pt3{padding-top: 3px;}
.pt4{padding-top: 4px;}
.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}
.pt40{padding-top: 40px;}

/* padding-right */
.pr1{padding-right: 1px;}
.pr2{padding-right: 2px;}
.pr3{padding-right: 3px;}
.pr4{padding-right: 4px;}
.pr5{padding-right: 5px;}
.pr10{padding-right: 10px;}
.pr15{padding-right: 15px;}
.pr20{padding-right: 20px;}

/* padding-bottom */
.pb1{padding-bottom: 1px;}
.pb2{padding-bottom: 2px;}
.pb3{padding-bottom: 3px;}
.pb4{padding-bottom: 4px;}
.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}

/* padding-left */
.pl1{padding-left: 1px;}
.pl2{padding-left: 2px;}
.pl3{padding-left: 3px;}
.pl4{padding-left: 4px;}
.pl5{padding-left: 5px;}
.pl10{padding-left: 10px;}
.pl15{padding-left: 15px;}
.pl20{padding-left: 20px;}
.pl30{padding-left: 30px;}
.pl40{padding-left: 40px;}

/* padding */
.pg1{padding: 1px;}
.pg2{padding: 2px;}
.pg3{padding: 3px;}
.pg4{padding: 4px;}
.pg5{padding: 5px;}
.pg10{padding: 10px;}
.pg15{padding: 15px;}
.pg20{padding: 20px;}
.pg30{padding: 30px;}
.pg40{padding: 40px;}