@charset "utf-8";

/** ***************************************************************************
 * 共用
 * ************************************************************************* */

body {
  background-color: rgb(var(--accentcolor-1));
}

#main {
  padding-bottom: 40px;
  font-weight: 400;
}

@media screen and (min-width:768px) {

  #main {
    padding-bottom: 80px;
  }

}

/** ***************************************************************************
 * アンカーナビ
 * ************************************************************************* */

#main div.anchornav ul.list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#main div.anchornav ul.list li {
  margin: 10px;
}

#main div.anchornav ul.list a {
  min-width: 300px;
}

@media screen and (min-width:768px) {

  #main div.anchornav ul.list a {
    min-width: 370px;
  }

}

/** ***************************************************************************
 * 紹介文
 * ************************************************************************* */

#lead div.lead dl.list div.item {
  position: relative;
  z-index: 0;
}

#lead div.lead dl.list :where(div.item) ~ div.item {
  margin-top: 60px;
}

#lead div.lead dl.list div.item::after {
  content: '';
  width: calc((var(--innerWidth) / 2) + 50% + 20px);
  max-width: none;
  height: 100%;
  border: 2px solid rgb(var(--accentcolor-6));
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  z-index: -1;
  top: 0;
}

#lead div.lead dl.list dt {
  position: absolute;
  z-index: 2;
  top: -40px;
}

@media screen and (min-width:768px) {

  #lead div.lead {
    padding-bottom: 100px;
    background: url("../_image/oyako/index/lead-decoration.png") left bottom / 374px 374px no-repeat;
  }

  #lead div.lead dl.list :where(div.item) ~ div.item {
    margin-top: unset;
  }

  #lead div.lead dl.list dt {
    top: unset;
  }

}

/**
 * 奇数要素
 */

#lead div.lead dl.list div.item:nth-of-type(odd) {
  padding: 4.5em 3em 2em 1em;
}

#lead div.lead dl.list div.item:nth-of-type(odd)::after {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-left: none;
  right: 0;
}

#lead div.lead dl.list div.item:nth-of-type(odd) dt {
  left: 0;
}

@media screen and (min-width:768px) {

  #lead div.lead dl.list div.item:nth-of-type(odd) {
    width: 48%;
    padding: 3.5em 3em 4em 0;
  }

  #lead div.lead dl.list div.item:nth-of-type(3) {
    margin-top: -3em;
  }

  #lead div.lead dl.list div.item:nth-of-type(odd) dt {
    top: -40px;
    left: 0;
  }

  #lead div.lead dl.list div.item:nth-of-type(odd) dd {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

}

/**
 * 偶数要素
 */

#lead div.lead dl.list div.item:nth-of-type(even) {
  margin-left: auto;
  padding: 3em 0 3em 3em;
}

#lead div.lead dl.list div.item:nth-of-type(even)::after {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-right: none;
  left: 0;
}

#lead div.lead dl.list div.item:nth-of-type(even) dt {
  left: 1em;
}

@media screen and (min-width:768px) {

  #lead div.lead dl.list div.item:nth-of-type(even) {
    width: 48%;
    padding: 3em 0 3em 3em;
  }

  #lead div.lead dl.list div.item:nth-of-type(2) {
    margin-top: -10em;
    padding-bottom: 4em;
  }

  #lead div.lead dl.list div.item:nth-of-type(2) dt {
    top: unset;
    left: unset;
    right: 0;
    bottom: -30px;
  }

  #lead div.lead dl.list div.item:nth-of-type(4) {
    margin-top: 2em;
  }

  #lead div.lead dl.list div.item:nth-of-type(4) dt {
    top: -50px;
    left: 6em;
  }

}

/** ***************************************************************************
 * 約束ごと
 * ************************************************************************* */

/**
 * タイトル
 */

#promise .section-title {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  padding-right: 90px;
  font-size: 1.22em;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

#promise .section-title::before {
  content: '';
  width: 74px;
  height: 96px;
  margin-right: 16px;
  background: url("../_image/_common/icon-flower-1.png") 0 0 / 100% 100% no-repeat;
}

/**
 * 紹介文
 */

@media screen and (min-width:768px) {

  #promise div.lead {
    text-align: center;
  }

}

/**
 * 約束ごと
 */

#promise div.promise section.item {
  padding: 20px 20px 30px;
  border-radius: 10px;
  background-color: #fff;
}

#promise div.promise section.item ~ section.item {
  margin-top: 20px;
}

@media screen and (min-width:768px) {

  #promise div.promise section.item {
    padding: 30px 30px 40px;
  }

}

/* タイトル */

#promise div.promise section.item .title {
  margin-bottom: 0.75em;
  font-size: 1.22em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#promise div.promise section.item .title::before {
  content: '';
  width: 1.25em;
  height: 1em;
  margin-right: 0.125em;
  background: url("../_image/_common/icon-heart-1.png") 0 0 / 100% 100% no-repeat;
}

/* 内容 */

@media screen and (min-width:768px) {

  #promise div.promise section.item div.content {
    padding: 0 2em;
  }

}

/** ***************************************************************************
 * 開催日
 * ************************************************************************* */

/**
 * タイトル
 */

#detail .section-title {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  padding-right: 90px;
  font-size: 1.22em;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

#detail .section-title::before {
  content: '';
  width: 74px;
  height: 96px;
  margin-right: 16px;
  background: url("../_image/_common/icon-flower-1.png") 0 0 / 100% 100% no-repeat;
}