@charset "UTF-8";

/* =========================================================
  top
========================================================= */
#main {
  background: url("/_themes/site/images/ac-footer.png") no-repeat bottom/100vw var(--ac-color-yellow-5);
}

@media only screen and (max-width: 1240px) {
  #main {
    padding: 0;
  }
}

@media only screen and (max-width: 659px) {
  #main {
    background-size: 200vw;
  }
}

/* #pageHeader  
-----------------------------------------------*/
#pageHeader {
  position: absolute;
  right: 0;
  max-width: 100%;
  padding: 15px 3rem 15px 2rem;
}

#globalNavi ul.mainMenu a {
  color: var(--mono-color-9);
}

#smartMenu .globalNavi {
  background-image: url("/_themes/site/images/ic-menu.svg");
}

#globalNavi ul.mainMenu>li>a::after {
  background: repeating-linear-gradient(to right,
      var(--mono-color-9) 0px,
      var(--mono-color-9) 6px,
      transparent 6px,
      transparent 12px);
}

@media only screen and (max-width: 959px) {
  #pageHeader {
    padding: 0 20px 15px 1rem;
  }

  #globalNavi ul.mainMenu a {
    color: var(--mono-color-1);
  }
}

/* #mainVisual
-----------------------------------------------  */
#mainVisual img {
  width: 100%;
}

/* piece
----------------------------------------------- */
#content .pieceHeader h2 {
  margin-bottom: 2rem;
  font-weight: normal;
  font-size: 1.5rem;
  font-family: var(--font-family-pop);
  letter-spacing: 0.35rem;
  text-align: center;
}

#content>div>.pieceContainer {
  max-width: var(--site-width);
  height: 100%;
  margin: 0 auto;
  padding-bottom: 7rem;
}

@media only screen and (max-width: 959px) {
  #content>div>.pieceContainer {
    padding: 0 1rem 5rem;
  }
}

@media only screen and (max-width: 559px) {
  #content .pieceHeader h2 {
    font-size: 1.25rem;
  }
}

/*common
 ----------------------------------------------- */
#about,
#menu {
  padding-top: 4rem;
  background: url("/_themes/site/images/bg-top.png") no-repeat bottom -1px center/100%;
}

#news,
#instagram {
  padding-top: 4rem;
  background: url("/_themes/site/images/bg-bottom.png") no-repeat bottom -1px center/100% var(--ac-color-brown-4);
}

#content>#menu>.pieceContainer,
#content>#about>.pieceContainer {
  max-width: 100%;
  background: url("/_themes/site/images/bg-fence.svg") no-repeat right bottom 1rem;
}

#about .pieceBody,
#menu .pieceBody {
  max-width: var(--site-width);
  margin: 0 auto;

}

@media only screen and (max-width: 959px) {

  #content>#menu>.pieceContainer,
  #content>#about>.pieceContainer {
    background: none;
  }
}

/* #about
-----------------------------------------------  */
#about .pieceBody {
  display: flex;
  gap: 3rem;
}

#about .img {
  padding-bottom: 2rem;
}

#about .txt {
  padding-bottom: 5rem;
  background: url("/_themes/site/images/about-terrace.png") no-repeat bottom right 20%/95%;
}

#about .txt p {
  margin-bottom: 1rem;
  line-height: 2;
  letter-spacing: 0;
}

#about .txt span {
  display: inline-block;
}

#about .txt a {
  display: block;
  color: var(--mono-color-1);
  text-align: right;
  text-decoration: none;
}

@media only screen and (max-width: 959px) {
  #about .pieceBody {
    flex-wrap: wrap;
  }

  #about .pieceBody div {
    width: 100%;
  }

  #about .img {
    display: none;
    padding: 0;
  }

  #about .txt {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 9rem;
    background-position: bottom right;
    background-size: 70%;
    text-align: center;
  }
}

@media only screen and (max-width: 559px) {
  #about .txt {
    background-position: bottom 25% left;
    background-size: 80%;
  }
}

/* #news
-----------------------------------------------  */
#news {
  position: relative;
}

#news .pieceContainer {
  position: relative;
  z-index: 1;
}

#news::before,
#news::after {
  position: absolute;
  width: 250px;
  height: 150px;
  background: url("/_themes/site/images/bg-foot.svg") no-repeat;
  content: "";
}

#news::after {
  right: 0;
  bottom: 8rem;
}

#news ul.docs {
  display: flex;
  gap: 2rem;
}

#news ul.docs li {
  width: calc(100% / 4 - 6rem / 4);
}

#news ul.docs a {
  color: var(--mono-color-1);
  text-decoration: none;
}

#news ul.docs a:hover .image {
  box-shadow: none;
  transition: 0.3s;
}

#news ul.docs a>span {
  display: block;
}

#news ul.docs .publish_date {
  font-size: 0.8rem;
}

#news ul.docs a .title {
  position: relative;
}

#news ul.docs a .title:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  transform: scaleY(0);
  transform-origin: left;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--ac-color-brown-3) 0px, var(--ac-color-brown-3) 6px, transparent 6px, transparent 12px);
  transition: transform 0.3s ease;
  content: "";
}

#news ul.docs a:hover .title:after {
  transform: scaleY(1);
}

#news ul.docs .image {
  position: relative;
  margin-bottom: 0.7rem;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#news ul.docs .image::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-image-source: repeating-linear-gradient(145deg, #bda585, #bda585 2px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10px);
  border-image-slice: 20;
  border-image-repeat: round;
  border-style: solid;
  border-width: 8px;
  content: "";
}

#news ul.docs .image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media only screen and (max-width: 959px) {
  #news ul.docs {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  #news ul.docs li {
    width: calc(100% / 3 - 0.4rem);
  }

  #news ul.docs li:nth-of-type(4) {
    display: none;
  }
}

@media only screen and (max-width: 759px) {
  #news ul.docs {
    gap: 0.5rem;
  }

  #news ul.docs li {
    width: calc(50% - 0.25rem);
  }

  #news ul.docs li:nth-of-type(4) {
    display: block;
  }
}

/* BUTTON Design 
----------------------------------------------- */
#faq .more,
#news .more {
  text-align: right;
}

#news .more a,
#faq .more a {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 0.5em 1em;
  border: none;
  text-align: right;
}

#about .txt a::before,
#news .more a::before,
#news .more a::after,
#faq .more a::before,
#faq .more a::after {
  position: absolute;
  bottom: -1rem;
  left: 0;
  width: 100%;
  height: 2rem;
  content: "";
}

#news .more a::before,
#faq .more a::before {
  z-index: -3;
  opacity: 0.6;
  background-image: url('/_themes/site/images/footprints.svg');
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

#news .more a::after,
#faq .more a::after {
  z-index: -1;
  background-color: var(--ac-color-yellow-5);
  transition: 0.5s ease-in-out;
}

#news .more a::after {
  background-color: var(--ac-color-brown-4);
}

@media (hover: hover) {

  #news .more a:hover,
  #faq .more a:hover {
    transition: 0.2s;
  }

  #news .more a:hover::after,
  #faq .more a:hover::after {
    right: 0;
    left: auto;
    width: 0;
  }
}

@media (hover: none) {

  #news .more a:active,
  #faq .more a:active {
    transition: 0.2s;
  }

  #news .more a:active::after,
  #faq .more a:active::after {
    right: 0;
    left: auto;
    width: 0;
  }
}


/* menu
----------------------------------------------- */
#menu.piece ul {
  position: relative;
}

#menu.piece ul::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background: url("/_themes/site/images/bg-cutlery.svg") no-repeat center;
  content: "";
}

@media only screen and (max-width: 959px) {
  #menu.piece ul::after {
    display: none;
  }
}

/* instagram
----------------------------------------------- */
#instagram .pieceBody {
  position: relative;
}

#instagram .links {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#instagram .links img {
  display: none;
}

/* faq
----------------------------------------------- */
#faq {
  position: relative;
  background: url("/_themes/site/images/bg-fence-left.svg") no-repeat left top;
}

#faq .docs {
  position: relative;
  z-index: 1;
}

#faq:before,
#faq:after {
  position: absolute;
  width: 180px;
  height: 150px;
  background: no-repeat;
  content: "";
}

#faq::before {
  bottom: 15rem;
  left: 0;
  background-image: url("/_themes/site/images/bg-bone-line.svg");
}

#faq::after {
  right: 0;
  bottom: 8rem;
  background-image: url("/_themes/site/images/bg-bone-line-right.svg");
}

@media only screen and (max-width: 959px) {

  #faq::before,
  #faq::after {
    display: none;
  }
}

/* information
----------------------------------------------- */
#information {
  padding-bottom: 10rem;
}

#information>.pieceContainer>.pieceBody {
  display: flex;
  gap: 3rem;
  margin-bottom: 2rem;
}

#information #detail,
#information .time-place {
  width: 50%;
}

@media only screen and (max-width: 959px) {
  #information>.pieceContainer>.pieceBody {
    flex-wrap: wrap-reverse;
  }

  #information #detail,
  #information dl,
  #information .time-place {
    width: 100%;
  }

  div[id^="calendar"] .pieceContainer {
    max-width: 100%;
  }
}

@media only screen and (max-width: 559px) {
  #information dl>div {
    flex-wrap: wrap;
  }
}

/* event-list
----------------------------------------------- */
.calendarEvents table {
  width: 100%;
}

.calendarEvents th {
  padding: 8px 15px;
  background-color: var(--main-color-9);
  font-weight: normal;
  text-align: center;
}

.calendarEvents th:first-child {
  width: 10rem;
}

.calendarEvents th:not(:last-child) {
  border-right: 1px solid var(--main-color-8);
}

.calendarEvents td {
  padding: 8px;
  border-bottom: 1px solid var(--mono-color-6);
  vertical-align: middle;
}

.calendarEvents .image,
.calendarEvents .date {
  text-align: center;
}

.calendarEvents .image {
  width: 90px;
  text-align: center;
}

#commonFooter {
  padding-top: 0;
}

#banner {
  margin-top: 2rem;
}