@charset 'UTF-8';
/*--------------------------------------------------
  accs.css
  (c)2026 Cohaku Creative Co. All rights reserved.
--------------------------------------------------*/

#container div.bg_blk {
  background: #000;
}
#hdr {
  margin: 0 auto 99px;
  padding: 8vw 0 7vw;
  clear: both;
  display: block;
  position: relative;

  z-index: 0;
  background-image: url('../../img/accs/bg_1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

#hdr h2 {
  padding: 55px 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: block;
  font-family: 'Cinzel', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  font-size: 250%;
  font-weight: bold;
}

#hdr p {font-size: 188%;}
#hdr p span {
  display: block;
  font-size: 67%;
  line-height: 1.2;
}

#hdr div {
  color: #fff;
}

#hdr div.rght::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: -9%;
  top: 0;
  background-color: #49391a;
  -webkit-transform: skewX(-15deg);
  -ms-transform: skewX(-15deg);
  transform: skewX(-15deg);
  z-index: -1;
}

#hdr div.rght {
  width: 48%;
  height: 100%;
  padding: 18vw 0 40px 25%;
  line-height: 0.8;
  text-align: left;
  background-color: #49391a;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
#hdr:after {
  content: "";
  width: 100%;
  height: 28%;
  background: #000;
  -webkit-transform: translateY(-70%) skewY(3deg);
  -ms-transform: translateY(-70%) skewY(3deg);
  transform: translateY(-70%) skewY(3deg);

  position: absolute;
  left: 0;
  top: 110%;
}

section h3::before {
  margin: 0 auto 10px;
  width: 14%;
  content: '';
  border-top: 3px solid #000;
  display: block;
}

section h3 span {
  display: block;
  font-size: 50%;
}


#exp {
  padding: 20px 0 60px;
  background: #000;
  color: #fff;
}
#exp h2 {
  padding: 0;
}
#exp h3 {
  margin: 0 auto 10px;
  padding: 0;
  font-size: 130%;
}

#exp {
  position: relative;
}
#exp p {
  margin: 0 auto 0;
  line-height: 1.8;
  text-align: center;
}
#exp p a{
  color: #fff;
  border-bottom: 1px solid #fff;
}
#exp::before {
  content: "";
  width: 100%;
  height: 28%;
  position: absolute;
  left: 0;
  background-color: #000;
  -webkit-transform: translateY(-70%) skewY(3deg);
  -ms-transform: translateY(-70%) skewY(3deg);
  transform: translateY(-70%) skewY(3deg);
}
#exp::after {
  content: "";
  width: 100%;
  height: 70%;
  background-color: #000;
  -webkit-transform: translateY(-70%) skewY(3deg);
  -ms-transform: translateY(-70%) skewY(3deg);
  transform: translateY(-70%) skewY(3deg);

  position: absolute;
  left: 0;
  top: 100%;
  z-index: -1;
}

#map {
  margin: 0 auto 50px;
  padding: 30px 0;
}
#map iframe {
  width: 100%;
  aspect-ratio: 16 / 8;
  border: none;
}
#map ul {
  width: 90%;
  margin: 0 auto 69px;
}
#map ul li {
  display: flex;
  align-items: anchor-center;
}
#map ul li.pht {
  width: 40%;
}



#prc ul {
  margin: 0 0 40px;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
#prc ul::before {
  display: block;
  content:"";
  width: 24%;
  order:1;
}
#prc ul::after {
  display: block;
  content:"";
  width: 24%;
}

#prc ul li {
  width: 24%;
  margin: 0 0 20px 0;
  text-align: center;
  vertical-align: top;
}

#prc ul li img {
  border: 1px solid #9c8f4e;
  margin: 0 auto 20px;
}

#prc ul li p:nth-child(2) {
  font-weight: 900;
  margin: 0 auto 6px;
}
#prc ul li p:nth-child(2) span {
  margin: 2px auto;
  color: #9c8f4e;
  display: block;
  font-size: 0.8rem;
}


#tmu div a:hover {
  background: #9c8f4e;
  color: #fff;
}

/* tablet */
@media screen and (max-width: 1080px) {
  #hdr h2 {
    width: 34%;
    padding: 44px 0;
    font-size: 180%;
  }
  #hdr div.rght {
    padding: 7% 0 20px 22%;
    line-height: 1.0;
    font-size: 80%;
  }
}
/* sp */
@media screen and (max-width: 780px) {

  #hdr h2 {
    width: 34%;
    padding: 44px 0;
    font-size: 180%;
  }

  #hdr div.rght {
    padding: 16% 0 20px 30%;
    line-height: 1.0;
    font-size: 70%;
  }

  #prc ul li {
    width: 48%;
    margin: 0 0 16px;
  }
  #prc ul li img {
    margin: 0 auto 12px;
  }
}

@media screen and (max-width: 680px) {
  #hdr {
    margin: 0 auto 50px;
    background-position: 30% center;
  }
  #hdr div.rght {
    padding: 15% 0 20px 20%;
    line-height: 1.0;
    font-size: 70%;
  }

  #map iframe {aspect-ratio: 16 / 10;}
}