@charset "UTF-8";
/* CSS Document */

.loading {
  position: fixed;
  inset: 0;
  z-index: 10;
  height: 100svh;
  background-color: #F8F1C2;
}

.loading__inner {
  width: 100%;
  height: inherit;
  display: grid;
  place-content: center;
  row-gap: 10px;
}

.loading__text {
  font-size: var(--font-size-l);
  font-weight: 500;
  line-height: 2;
  text-align: center;
  color: #000000;
}

.loading__logo {
  margin: 0 auto;
  width: min(250px, 100%);
}

.loading.active{display: none}

/* -----------------------------------
    メインビジュアル
   ----------------------------------- */
#main-visual{
    position: relative;    background-image: url(../images/common/bg_pattern.svg);
    background-repeat: repeat;
    background-size: 50px auto;
}
#kv{
    max-width: 1500px;
    width: 100%;
    margin: auto;
}
@media (width >= 769px) {
#index #h1{display: none}    
 
}


/*---------------------------------------------
	カラム
  ---------------------------------------------*/
#award{
    background-color: var(--blue);
    padding-top: 2rem;
    padding-bottom: 2rem;
    color: #ffffff;
}
#list-award{
    max-width: 1000px;
    width: 90%;
    margin: 3rem auto 2rem;
} 

#logo{
    padding-top: 5rem;
    padding-bottom: 1rem;
}
#logo h2{
    max-width: 350px;
    width: 80%;
    margin: auto;
}
#logo h3{
    color: var(--blue-light);
    text-align: center;
    border: 1px solid var(--blue-light);
    width: fit-content;
    padding: 0.1rem 0.5rem;
    margin: 2rem auto 1rem;
}
.list-btn {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin: 2rem auto;
}
.list-btn li a{width: 280px}
@media (width <= 850px) {
}



/*---------------------------------------------
	見出し
  ---------------------------------------------*/
#copy{
    font-size: var(--font-size-xl);
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}
@media (width <= 768px) {
#copy{
    text-align: left;
    width: 90%;
    margin: auto;
    font-size: 18px
}    
}


/*---------------------------------------------
	スライダー
  ---------------------------------------------*/
#photo_mori{margin-top: 4rem}
#photo_mori .slide{margin-top: .85rem}
#photo_mori .slide li{width: 500px;}
#photo_mori .slide li img{
    height: 350px;
    object-fit: cover;
}
#photo_mori .slick-slide { 
    margin: 0 10px;
    position: relative;
}
#photo_mori .slick-slide:not(.slick-slide.slick-current):before{
    position: absolute;
    top: 0;left: 0;
    content: "";
    width: 100%;
    height: 350px;
    background-color: #000000;
    display: block;
    transition: var(--transition)
}
#photo_mori .slick-slide:not(.slick-slide.slick-current) img{
    opacity: .65;
    transition: var(--transition)
}
@media (width <= 768px) {
#photo_mori{
    padding-left: 20px;
    padding-right: 20px;
}    
#photo_mori .slide li{width: 300px;}    
#photo_mori .slide li img{height: 220px;}  
#photo_mori .slick-slide { margin: 0 5px;}    
}


#leaflet{padding-top: 4rem;}
#img-leaflet{
    max-width: 350px;
    width: 90%;
    margin: 1rem auto 0.5rem;
}
#img-leaflet img{border: 1px solid #cccccc;}
#txt-leaflet{width: calc(100% - 50px;)}