@charset "utf-8";

:root{
  --default-font:'Noto Sans JP', system-ui;
  --eng-font:'Lato', sans-serif;
  --serif-font:'Noto Serif JP', system-ui;
	--google-icon:'Material Symbols Outlined';
	--bootstrap:'bootstrap-icons';
  --main-color:rgb(32, 47, 141);
  --key-color:rgb(0, 169, 244);
  --key-color02:rgb(255, 108, 77);
  --key-color02-hover:rgb(232, 77, 45);
  --key-color03:#00a282;
  --link-color:#127eb5;
  --base-color:#111;
  --base-light-color:#666;
  --normal:400;
  --bold:700;
  --header-transition:0.3s;
}
.main-color{color:#202f8d;}
.key-color{color:#00a9f4;}
.key-color02{color:#ff6c4d;}
.key-color02-hover{color:#e84d2d;}
.key-color03{color:#00a282;}

#billboard{
  width:100%; height:100vh;
  max-height:900px;
  position:relative;
}
#billboard figure{
  width:100%; height:100%;
  position:relative;
  z-index:10;
}
#billboard figure img{
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(60%) contrast(180%);
}
#billboard figure:before{
  content:"";
  width:100%; height:100%;
  background-image:url(../../img/fog02.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  position:absolute;
  top:0; left:0; z-index:2;
  filter:opacity(30%) contrast(160%);
}
#billboard figure:after{
  content:"";
  width:100%; height:100%;
  background:rgba(0,0,0,0.2);
  position:absolute;
  top:0; left:0; z-index:1;
}
#billboard > h1{
  width:33vw;
  position:absolute;
  top:50%; left:50%; z-index:1000;
  transform:translate(-50%,-50%);
}

header{
  width:100%; height:300px;
  position:relative;
}
header figure{
  width:100%; height:100%;
  position:relative;
  z-index:10;
}
header figure img{
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(60%) contrast(180%);
}
header figure:before{
  content:"";
  width:100%; height:100%;
  background-image:url(../../img/fog02.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  position:absolute;
  top:0; left:0; z-index:2;
  filter:opacity(30%) contrast(160%);
}
header figure:after{
  content:"";
  width:100%; height:100%;
  background:rgba(0,0,0,0.2);
  position:absolute;
  top:0; left:0; z-index:1;
}
header > h1{
  width:240px;
  position:absolute;
  top:50%; left:50%; z-index:1000;
  transform:translate(-50%,-50%);
}

#container{
  box-sizing:border-box;
  width:100%;
  padding:0 calc((100% - 1120px) / 2);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0 4.0rem;
  position:relative;
}
#container::before{
  content:"";
  width:32vw; height:auto;
  aspect-ratio:500/575;
  background-image:url(../../img/event_corner01.png);
  background-repeat:no-repeat;
  background-position:top left;
  background-size:contain;
  position:absolute;
  top:0; left:0;
}
#container > #crumb{
  position:absolute;
  top:0; right:calc((100% - 1120px) / 2);
  padding:0.3rem 0;
}
#container > #crumb > ul{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
}
#container > #crumb > ul > li{
  font-size:0.8rem; line-height:1.8;
}
#container > #crumb > ul > li:not(:last-child)::after{
  display:inline-block;
  content:"";
  width:0.3rem; height:auto;
  aspect-ratio:1/1;
  border-top:2px solid #999;
  border-right:2px solid #999;
  transform:translateY(-25%) rotate(45deg);
  margin:0 0.5rem 0 0.3rem;
}
#container > #crumb > ul > li > a{
  text-decoration:none;
  color:var(--base-light-color);
}
#container > #crumb > ul > li > a:hover{
  text-decoration:underline;
}
#container > #crumb > ul > li:last-child > a{
  pointer-events:none;
}

#container #page-title{
  box-sizing:border-box;
  width:220px; height:auto;
  aspect-ratio:1/1;
  background-color:var(--base-color);
  padding:0;
  position:relative;
  z-index:10;
  transform:translateY(-30%);
}
#container #page-title::before{
  content:"";
  width:100%; height:100%;
  background-image:url(../../img/event_title_bg.png);
  background-position:center center;
  background-size:44px auto;
  position:absolute;
  top:0; left:0;
  opacity:0.06;
}
#container #page-title > h2{
  font-family:var(--serif-font);
  font-size:1.6rem; line-height:1.8; font-weight:var(--bold);
  color:#fff;
  white-space:nowrap;
  letter-spacing:0.2em;
  margin-bottom:1.0em;
  text-align:left;
  writing-mode:vertical-rl;
  margin:0 auto;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}

#container section{
  flex:1;
  text-align:left;
  margin:4.0rem 0;
  position:relative;
  z-index:1;
}

#index-about{
  box-sizing:border-box;
  width:100%;
  padding:4.0rem calc((100% - 1120px) / 2) 5.0rem;
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
  align-items:flex-start;
}
#index-about > figure{
  width:460px;
  margin-left:3.0rem;
}
#index-about > .text-box{
  flex:1;
  text-align:left;
}
#index-about h2{
  font-family:var(--serif-font);
  font-size:2.2rem; line-height:1.8; font-weight:var(--bold);
  margin-bottom:1.0em;
}
#index-about h2 > span{
  display:inline-block;
  position:relative;
}
#index-about h2 > span::after{
  content:"";
  width:100%; height:2px;
  background:var(--base-color);
  position:absolute;
  bottom:0; left:0;
}
#index-about p{
  line-height:2.0;
  text-indent:1.0em;
  margin-bottom:1.0em;
}

#index-event{
  box-sizing:border-box;
  width:100%;
}
.event-box{
  position:relative;
  padding-top:300px;
}
.event-box::before{
  display:block;
  content:"";
  width:100vw; height:300px;
  position:absolute;
  top:0; left:0;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}
.event-box.event01::before{
  background-image:url(../../img/event01/02.jpg);
}
.event-box.event02::before{
  background-image:url(../../img/event02/01.jpg);
  background-position:top -150px center;
}
.event-box.event03::before{
  background-image:url(../../img/event03/01.jpg);
  background-position:bottom -50px center;
}
.event-box.event04::before{
  background-image:url(../../img/event04/01.jpg);
  background-position:bottom -200px center;
}
.event-box::after{
  display:block;
  content:"";
  width:100vw; height:300px;
  position:absolute;
  top:0; left:0; z-index:5;
  background:rgba(0,0,0,0.5);
}
.event-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  position:relative;
  padding:0 calc((100% - 1120px) / 2);
  padding-bottom:5.0rem;
}
.event-inner::before{
  content:"";
  width:36vw; height:auto;
  aspect-ratio:500/575;
  background-image:url(../../img/event_corner01.png);
  background-repeat:no-repeat;
  background-position:top left;
  background-size:contain;
  position:absolute;
  top:0; left:0;
}
.event-inner::after{
  content:"";
  width:28vw; height:auto;
  aspect-ratio:471/572;
  background-image:url(../../img/event_corner02.png);
  background-repeat:no-repeat;
  background-position:top left;
  background-size:contain;
  position:absolute;
  bottom:0; right:0;
}
.event04 .event-inner::after{
  display:none;
}
.event-box .event-title{
  box-sizing:border-box;
  width:240px;
  background-color:var(--base-color);
  padding:3.0rem 0;
  margin-top:-160px;
  margin-right:3.5rem;
  position:relative;
  z-index:10;
}
.event-box .event-title::before{
  content:"";
  width:100%; height:100%;
  background-image:url(../../img/event_title_bg.png);
  background-position:center center;
  background-size:44px auto;
  position:absolute;
  top:0; left:0;
  opacity:0.06;
}
.event-box .text-box{
  flex:1;
  text-align:left;
  margin-top:2.5rem;
  position:relative;
  z-index:10;
}
.event-title > h2{
  font-family:var(--serif-font);
  font-size:2.2rem; line-height:1.8; font-weight:var(--bold);
  color:#fff;
  letter-spacing:0.2em;
  margin-bottom:1.0em;
  text-align:left;
  writing-mode:vertical-rl;
  margin:0 auto;
}
.event-title > h2 > span{
  display:block;
  font-size:0.45em; font-weight:var(--normal);
  letter-spacing:0.1em;
}
.event-box .text-box > p{
  margin-bottom:2.5rem;
}
.event-box.event05 .text-box > p{
  margin-bottom:0;
}
ul.event-gallery{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:2.0rem 0;
}
ul.event-gallery > li{
  width:48%;
}
ul.event-gallery > li > figure{
  width:100%; height:auto;
  aspect-ratio:3/2;
  overflow:hidden;
}
ul.event-gallery > li > figure > img{
  width:100%; height:100%;
  object-fit:cover;
}
ul.event-gallery > li > figcaption{
  font-size:0.9rem; line-height:1.8;
  margin-top:0.25em;
}

.event-box.event05{
  background:#F9F3E3;
  padding-top:0;
}
.event-box.event05::before,
.event-box.event05::after,
.event-box.event05 > .event-inner::before,
.event-box.event05 > .event-inner::after{
    display:none;
}
.event-box.event05 > .event-inner{
  padding-top:5.0rem;
}
.event-box.event05 .text-box{
  margin-top:0;
}
.event-box.event05 ul.event-gallery > li{
  width:49%;
  margin-bottom:1.0rem;
}

#index-topics{
  box-sizing:border-box;
  width:100%;
  padding:3.5rem calc((100% - 1120px) / 2) 4.5rem;
  text-align:left;
}
#index-topics > .topics-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
#index-topics > .topics-title > h2{
  font-family:var(--serif-font);
  font-size:1.6rem; line-height:1.8; font-weight:var(--bold);
  margin-bottom:1.0em;
}
#index-topics > .topics-title > h2 > span{
  display:inline-block;
  position:relative;
}
#index-topics > .topics-title > h2 > span::after{
  content:"";
  width:100%; height:2px;
  background:var(--base-color);
  position:absolute;
  bottom:0; left:0;
}
#index-topics > .topics-title > .more > a{
  display:block;
  text-decoration:none;
  font-size:0.95rem; line-height:1.8;
  color:var(--base-color);
  padding-right:1.0em;
  position:relative;
}
#index-topics > .topics-title > .more > a::after{
  content:"";
  width:0.5em; height:auto;
  aspect-ratio:0.6/1;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background:var(--base-light-color);
  position:absolute;
  top:50%; right:0;
  transform:translateY(-50%);
}
#index-topics > .topics-title > .more > a:hover{
  text-decoration:underline;
}



ul.topics-list{
  display:flex;
  justify-content:space-between;
  gap:0 2.0rem;
}
ul.topics-list > li{
  width:100%;
}
ul.topics-list > li > a{
  display:block;
  text-decoration:none;
  color:var(--base-light-color);
}
ul.topics-list > li > a > figure{
  width:100%; height:auto;
  aspect-ratio:3/2;
  overflow:hidden;
}
ul.topics-list > li > a > figure > img{
  width:100%; height:100%;
  object-fit:cover;
  transition:0.2s;
}
ul.topics-list > li > a:hover > figure > img{
  transform:scale(1.03);
}
ul.topics-list > li > a .text-box{
  margin-top:0.3rem;
}
ul.topics-list > li > a .text-box > .entry-date{
  font-size:0.85rem; line-height:1.8;
}
ul.topics-list > li > a .text-box > h3{
  font-size:1.0rem; line-height:1.6;
  color:var(--link-color);
}
ul.topics-list > li > a:hover .text-box > h3{
  text-decoration:underline;
}

#gmap{
  width:100vw; height:420px;
}
#gmap > iframe{
  width:100%; height:100%;
}

#supporter{
  box-sizing:border-box;
  width:100%;
  padding:4.5rem calc((100% - 1120px) / 2);
  border-bottom:1px solid #ccc;
}
#supporter > h2{
  width:fit-content;
  font-family:var(--serif-font);
  font-size:1.4rem; line-height:1.8; font-weight:var(--bold);
  border-bottom:1px solid var(--base-color);
  margin:0 auto 1.0em;
}
ul.supporter-list{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0 1.0rem;
  margin-bottom:0.25rem;
}
ul.supporter-list.rank01{font-size:1.7em;}
ul.supporter-list.rank02{font-size:1.5em;}
ul.supporter-list.rank03{font-size:1.3em;}
ul.supporter-list.rank04{font-size:1.1em;}
ul.supporter-list.rank05{font-size:0.95em;}
ul.supporter-list > li{
  font-family:var(--serif-font);
}

#banner{
  box-sizing:border-box;
  width:100%;
  padding:3.0rem calc((100% - 1120px) / 2);
}
#banner > ul{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:0.5rem 1.0rem;
}
#banner > ul > li{
  width:268px;
}
#banner > ul > li > a{
  display:block;
  box-sizing:border-box;
  width:100%; height:auto;
  aspect-ratio:320/100;
  background:#fff;
  border:1px solid #ccc;
}
#banner > ul > li.kisodani-trip > a{
  background:#000;
}
#banner > ul > li.ontake-outaki > a,
#banner > ul > li.okuwa > a{
  border:none;
}
#banner > ul > li > a > img{
  width:100%; height:100%;
  object-fit:contain;
}

footer{
  background:#111;
  padding:6.0rem 0 2.0rem;
  position:relative;
}
footer::before{
  content:"";
  width:100%; height:100%;
  background-image:url(../../img/image01.jpg);
  background-repeat:no-repeat;
  background-position:top -200px center;
  background-size:cover;
  position:absolute;
  top:0; left:0;
  filter:brightness(80%) opacity(15%);
}
footer > #footer-logo{
  width:200px;
  margin:0 auto;
}
footer > #copy{
  font-size:0.8rem; line-height:1.6;
  color:#fff;
  margin-top:4.0rem;
}

section ul.topics-list{
  display:block;
}
section ul.topics-list > li{
  margin-bottom:2.5rem;
}
section ul.topics-list > li > a{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0 1.0rem;
  text-decoration:none;
  color:var(--base-light-color);
}
section ul.topics-list > li > a > figure{
  width:200px; height:auto;
  aspect-ratio:3/2;
  overflow:hidden;
}
section ul.topics-list > li > a > figure > img{
  width:100%; height:100%;
  object-fit:cover;
  transition:0.2s;
}
section ul.topics-list > li > a:hover > figure > img{
  transform:scale(1.03);
}
section ul.topics-list > li > a .text-box{
  flex:1;
  margin:0;
}
section ul.topics-list > li > a .text-box > .entry-date{
  font-size:0.85rem; line-height:1.8;
}
section ul.topics-list > li > a .text-box > h3{
  font-size:1.2rem; line-height:1.6;
  color:var(--link-color);
}
section ul.topics-list > li > a:hover .text-box > h3{
  text-decoration:underline;
}

article{
  width:100%;
  margin-bottom:7.0rem;
  text-align:left;
}
article > .page-title{
  text-align:left;
  position:relative;
  margin-bottom:2.0rem;
}
article > .page-title > h2{
  font-size:1.8rem; line-height:1.6; font-weight:var(--normal);
  position:relative;
  z-index:2;
}
article > .sns-share-box{
  margin:2.5rem 0;
}
article > .entry-body h3{
  font-size:1.4rem; line-height:1.8; font-weight:var(--bold);
  position:relative;
  margin-bottom:0.25em;
}
article > .entry-body h4{
  font-size:1.15rem; line-height:1.8; font-weight:var(--bold);
  position:relative;
  margin-bottom:0.25em;
}
article > .entry-body p{
  line-height:2.0;
  margin-bottom:2.0em;
}
article > .entry-body ul,
article > .entry-body ol{
  margin-bottom:2.0em;
}
article > .entry-body ul > li,
article > .entry-body ol > li{
  margin-bottom:0.5em;
  margin-left:1.25em;
}
article > .entry-body ul > li{
  list-style:disc outside;
}
article > .entry-body ol > li{
  list-style:decimal outside;
}
article > .entry-body img{
  box-sizing:border-box;
  width:auto; height:auto;
  max-width:100%;
}
article > .entry-body img.border{
  border:1px solid #ccc;
  padding:1.0rem;
}
article ul.entry-bottom{
  margin-top:4.0em;
  padding-top:2.5em;
  border-top:1px solid #ccc;
  display:flex;
  justify-content:center;
}
article ul.entry-bottom > li{
  font-size:0.8em; line-height:1.8;
  color:var(--base-light-color);
}
article ul.entry-bottom > li:not(:last-child)::after{
  content:"｜";
  display:inline-block;
  margin:0 0.5em;
}
article ul.entry-bottom > li > a{
  color:var(--base-light-color);
}

#index-topics > .movie-box{
  width:100%; height:auto;
  aspect-ratio:16/9;
  overflow:hidden;
  margin-top:2.5rem;
}
#index-topics > .movie-box > iframe{
  width:100%; height:100%;
}