@charset "UTF-8";/* CSS変数の宣言 */
/* サブページで、テンプレートで対応しきれないスタイルをこちらに記入します。ASのみ書き込み可能 */
* {
  box-sizing: border-box;
}

body {
  background: url(../images/hanasaka/back.webp) no-repeat;
  background-attachment: fixed;
  background-position: bottom right;
  background-size: 35% auto;
}

@media screen and (max-width: 1280px) {
  body {
    background-size: 50% auto;
  }

}

@media screen and (max-width: 820px) {
  body {
    background-size: 65% auto;
  }

}

@media screen and (max-width: 420px) {
  body {
    background-size: 80% auto;
  }

}

.top-image {
  position: relative;
/*  background-color:black;*/
  display:inline-block;
  display: flex; /* 追加: フレックスボックス化 */
  justify-content: center; /* 追加: 水平方向の中央揃え */
  align-items: center; /* 追加: 垂直方向の中央揃え */
  width: 100%; /* 必要に応じて幅を指定 */
}

.colorfilter-image {
/*  opacity: 0.7;*/
  display: block;
}

.top-image > h2{
  position: absolute;
  left:auto;
  bottom:auto;
  width: fit-content;
  margin: 0;
  font-size: 3rem;
  color:#fff;
  padding: 1% 15%;
  line-height:3.75rem;
  background: rgba(51,51,51,.4);
}


.top-image > h2 span {
  font-size: 1.7rem;
}

.res {
  display: none;
}

@media screen and (max-width: 796px) {
  .top-image > h2{
    margin: 1rem auto;
    font-size: 2rem;
  }

  .top-image > h2 span {
    font-size: 1.5rem;
  }

}

@media screen and (max-width: 628px) {
  .top-image > h2{
    margin: 1rem auto;
    font-size: 1.9rem;
  }

  .top-image > h2 span {
    font-size: 1.3rem;
  }

}

@media screen and (max-width: 563px) {
  .top-image > h2{
    margin: 1rem auto;
    font-size: 2.5rem;
    line-height: 1em;
    text-align: center;
    padding-top: 3%;
    padding-bottom: 3%;
  }

  .top-image > h2 span {
    font-size: 1.2rem;
  }

  .res {
    display: block;
  }

}

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

}

#intro > .intro-container{
  padding: 0;
}

#intro > .intro-container > .intro-txt{
  padding: 0;
  text-indent: 1em;
}

#inner-link {
  width: 100%;
}

#inner-link-main {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

#inner-link1,#inner-link2,#inner-link3 {
/*  border: 1px solid #ccc;*/
  width: 22%;
  aspect-ratio: 5/6;
  margin: 0 2%;
}

#inner-link1 a,#inner-link2 a,#inner-link3 a {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
/*  border: 1px solid #ccc;*/
  text-decoration: none;
}

#inner-link1 a img,#inner-link2 a img,#inner-link3 a img {
  width: 100%;
  display: block;
}

#inner-link1 a h3,#inner-link2 a h3,#inner-link3 a h3 {
  width: 100%;
  font-size: 1.2em;
  text-align: center;
  position: absolute;
  bottom: 0;
  padding: 8% 0;
  background: rgba(42,44,147,0.8);
  color: #fff;
}

#inner-link1 a h3::after,#inner-link2 a h3::after,#inner-link3 a h3::after {
  content: '';
  width: 0.7em;
  height: 0.7em;
  border: 0;
  border-bottom: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  left: calc(50% - 0.35em);
  bottom: 18%;
  margin: auto;
  transition: .2s;
}

#inner-link1 a:hover h3::after,#inner-link2 a:hover h3::after,#inner-link3 a:hover h3::after {
  bottom: 12%;
}

#inner-link1 p,#inner-link2 p,#inner-link3 p {
  margin-top: 5%;
}

#inner-link-sub {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

#inner-link-sub a {
  display: block;
  position: relative;
  text-align: center;
  text-decoration: none;
  border: 1px solid #333;
  padding: 1.2% 5% 1.7% 5%;
  background: #fff;
}

#inner-link-sub a::after {
  content: '';
  width: 0.6em;
  height: 0.6em;
  border: 0;
  border-bottom: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
  left: calc(50% - 0.3em);
  bottom: 20%;
  margin: auto;
  transition: .2s;
}
#inner-link-sub a:hover {
  color: #000;
  background: #f6efda;
}

#inner-link-sub a:hover::after {
  bottom: 15%;
}

@media screen and (max-width: 1024px) {
  #inner-link1,#inner-link2,#inner-link3 {
/*  border: 1px solid #ccc;*/
    width: 28%;
/*    aspect-ratio: 5/6;*/
  }

}

@media screen and (max-width: 820px) {
#inner-link1 a h3,#inner-link2 a h3,#inner-link3 a h3 {
  width: 100%;
  font-size: 1.2em;
  text-align: center;
  position: absolute;
  bottom: 0;
  padding: 10% 0;
  background: rgba(42,44,147,0.8);
  color: #fff;
}

  #inner-link-sub a {
    padding: 1.5% 5% 2.1% 5%;
  }

}

@media screen and (max-width: 768px) {
  #inner-link {
    margin-bottom: 70px;
  }

}

@media screen and (max-width: 700px) {
  #inner-link-main {
    width: 100%;
    display: block;
  }

  #inner-link1,#inner-link2,#inner-link3 {
    width: 95%;
    margin: 2% auto;
    aspect-ratio: initial;
  }

  #inner-link1 a,#inner-link2 a,#inner-link3 a {
    position: relative;
    aspect-ratio: initial;
  }

  #inner-link1 a img,#inner-link2 a img,#inner-link3 a img {
    display: none;
  }

  #inner-link1 a h3,#inner-link2 a h3,#inner-link3 a h3 {
    font-size: 1em;
    position: relative;
    padding: 3% 0;
    background: rgba(42,44,147,1);
  }

  #inner-link1 a h3::after,#inner-link2 a h3::after,#inner-link3 a h3::after {
    width: 0.65em;
    height: 0.65em;
    left: 90%;
    bottom: 50%;
  }

  #inner-link1 a:hover h3::after,#inner-link2 a:hover h3::after,#inner-link3 a:hover h3::after {
    bottom: 40%;
  }

  #inner-link-sub {
    display: block;
  }

  #inner-link-sub a {
    display: block;
    width: 60%;
    margin: 2% auto;
    padding: 2%;
  }

  #inner-link-sub a::after {
    content: '';
    width: 0.6em;
    height: 0.6em;
    left: 90%;
    bottom: 50%;
  }

  #inner-link-sub a:hover::after {
    bottom: 40%;
  }

}

#hanasaka-desc,#highlight,#back,#reference {
  width: 100%;
}

#hanasaka-desc h2,#highlight h2,#back h2,#reference h2 {
  width: 100%;
  background: rgba(42,44,147,1);
  padding: 0.5% 0;
  color: #fff;
  text-align: center;
  margin: 7% 0 0 0;
  position: relative;
}

#hanasaka-desc h2::before,#highlight h2::before,#back h2::before,#reference h2::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 130px;
  left: calc(50% - 50px);
  top: -127px;
  background: url(../images/hanasaka/bunko.webp);
}
@media screen and (max-width: 1500px) {
  #hanasaka-desc,#highlight,#back,#reference {
    margin-top: 2%;
  }

}

@media screen and (max-width: 1075px) {
  #hanasaka-desc,#highlight,#back,#reference {
    margin-top: 4%;
  }

}

@media screen and (max-width: 900px) {
  #hanasaka-desc,#highlight,#back,#reference {
    margin-top: 6%;
  }

}

@media screen and (max-width: 900px) {
  #hanasaka-desc {
    margin-top: 11%;
  }

}


@media screen and (max-width: 500px) {
  #hanasaka-desc,#highlight,#back,#reference {
    margin-top: 90px;
  }

  #hanasaka-desc h2::before,#highlight h2::before,#back h2::before,#reference h2::before {
    width: 80px;
    height: 104px;
    left: calc(50% - 40px);
    top: -101px;
    background: url(../images/hanasaka/bunko-sp.webp);
  }

  #hanasaka-desc h2,#highlight h2,#back h2,#reference h2 {
    width: 100%;
    background: rgba(42,44,147,1);
    padding: 2% 0;
    color: #fff;
    text-align: center;
    margin: 0;
    position: relative;
    font-size: 1.7em;
  }

}

.wrapper {
  width: 100%;
/*  background: #fdfbf5;*/
  background: rgba(251, 247, 234, 0.5);
  padding-bottom: 1%;
}

#desc-author {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1% 0%;
  text-align: right;
}

#desc-main,#highlight-intro {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 2% auto;
/*  border: 1px solid #ccc;*/
  text-indent: 1em;
  padding: 1% 0%;
/*  background: #fff;*/
  line-height: 1.7;
}

#highlight-intro > p:first-child {
  width: 100%;
  max-width: 1280px; /* 必要に応じて調整してください */
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

@media screen and (max-width: 1280px) {
  .wrapper {
    padding: 0 2.5% 1% 2.5%;
  }

  #desc-main {
    margin-top: 3%;
    padding: 0;
  }

  #highlight-intro {
    width: 95%;
    padding: 0;
  }
}

#desc-img {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

#desc-link {
  width: 100%;
  max-width: 1280px;
  margin: 1% auto;
  text-align: center;
}

#desc-link-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1% 0 0 0;
}

#desc-link-wrapper a {
  margin: 1% 2%;
  width: 25%;
  text-decoration: none;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 1.2% 0;
  font-size: 1.2em;
  position: relative;
}

#desc-link-wrapper a::after {
  content: '';
  width: 0.7em;
  height: 0.7em;
  border: 0;
  border-bottom: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(-45deg);
  position: absolute;
  left: calc(100% - 1.2em);
  top: calc(50% - 0.35em);
  margin: auto;
  transition: .2s;
}

#desc-link-wrapper a:hover {
  background: #f6efda;
  color: #000;
}

#desc-link-wrapper a:hover::after {
  left: calc(100% - 0.8em);
}

@media screen and (max-width: 1035px) {
  #desc-link-wrapper a {
    width: 45%;
    padding: 2% 0;
  }

}

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

  #desc-link-wrapper a {
    width: 100%;
    padding: 2% 0;
  }

}

#highlight-guide {
  width: 100%;
  margin-top: 1%;
}

#highlight-guide ul {
  max-width: 850px; /* デザインに合わせて幅を調整してください */
  margin-left: auto;
  margin-right: auto;
  text-align: left; /* リスト内のテキストを左寄せ */
}

#highlight-guide li {
  text-align: left;
}

.list-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;

}

.list-inner p:first-child {
  width: 25%;
}

.list-inner p:last-child {
  width: 75%;
}

@media screen and (max-width: 860px) {
  .list-inner p:first-child {
    width: 25%;
  }

  .list-inner p:last-child {
    width: 75%;
  }

}

@media screen and (max-width: 709px) {
  .list-inner p:first-child {
    width: 32%;
  }

  .list-inner p:last-child {
    width: 68%;
  }

}

@media screen and (max-width: 553px) {
  #highlight-guide ul li {
    margin-bottom: 3%;
  }

  .list-inner p {
    width: 100%!important;
  }

}

#highlight-anchor {
  width: 85%;
  max-width: 1280px;
  background: #fff;
  border-radius: 5px;
  margin: 2% auto;
}

#highlight-anchor ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

#highlight-anchor ul li {
  text-align: center;
  padding: 5% 0;
  position: relative;
  transition: .2s;
}

#highlight-anchor ul li:hover {
  background: #f6efda;
}

#highlight-anchor ul li::before {
  position: absolute;
  content: "";
  border-right: 1px solid #333;
  height: 60%;
  right: 0;
  top: 20%;
}

#highlight-anchor ul li:nth-child(5n)::before {
  position: absolute;
  content: "";
  border:none
}

@media screen and (max-width: 768px) {
  #highlight-anchor ul {
    grid-template-columns: repeat(3, 1fr);
  }

  #highlight-anchor ul li:nth-child(5n)::before {
    position: absolute;
    content: "";
    border-right: 1px solid #333;
    height: 60%;
    right: 0;
    top: 20%;
  }

  #highlight-anchor ul li:nth-child(3n)::before {
    position: absolute;
    content: "";
    border:none
  }

}

@media screen and (max-width: 420px) {
  #highlight-anchor {
    width: 95%;
  }

  #highlight-anchor ul {
    grid-template-columns: repeat(2, 1fr);
  }

  #highlight-anchor ul li:nth-child(3n)::before {
    position: absolute;
    content: "";
    border-right: 1px solid #333;
    height: 60%;
    right: 0;
    top: 20%;
  }

  #highlight-anchor ul li:nth-child(2n)::before {
    position: absolute;
    content: "";
    border:none
  }

}

.highlight-main-box {
  width: 100%;
  max-width: 1280px;
  margin: 2% auto;
  display: flex;
}

.back-main-box {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 2% auto;
  padding-top: 2%;
  display: flex;
}

.highlight-left,
.box-writing-left {
  margin-right: 1%;
  width: 30%;
  max-width: 360px;
}

.highlight-left img,
.box-writing-left img {
  width: 100%;
  max-width: 360px;
}

.highlight-right,
.back-right {
  margin-left: 1%;
  width: 70%;
}

.highlight-num {
  display: inline-block;
  font-size: 1.5em;
  border-bottom: 1px solid #333;
  padding: 0 2%;
  margin-bottom: 2%;
}

.highlight-text,
.back-text {
  margin: 2% 0;
}

.highlight-link-wrapper,
.back-link-wrapper {
  display: flex;
  width: 100%;
  justify-content: start;
  margin: 1% 0 0 0;
  flex-wrap: wrap;
}

.highlight-link-wrapper a,
.back-link-wrapper a {
  margin: 1%;
  width: 31%;
  text-decoration: none;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 2%;
  font-size: 1.2em;
  position: relative;
}

.highlight-link-wrapper a::after,
.back-link-wrapper a::after {
  content: '';
  width: 0.7em;
  height: 0.7em;
  border: 0;
  border-bottom: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(-45deg);
  position: absolute;
  left: calc(100% - 1.2em);
  top: calc(50% - 0.35em);
  margin: auto;
  transition: .2s;
}

.highlight-link-wrapper a:hover,
.back-link-wrapper a:hover {
  background: #f6efda;
  color: #000;
}

.highlight-link-wrapper a:hover::after,
.back-link-wrapper a:hover::after {
  left: calc(100% - 0.8em);
}

@media screen and (max-width: 1064px) {
  .back-link-wrapper a {
    width: 48%;
  }

}

@media screen and (max-width: 872px) {
  .highlight-main-box {
    margin-bottom: 5%;
  }

  .highlight-left,
  .box-writing-left {
    width: 35%;
  }

  .highlight-right,
  .back-right {
    width: 65%;
  }

  .highlight-link-wrapper a {
    width: 48%;
  }

  .back-link-wrapper a {
    width: 100%;
  }

}

@media screen and (max-width: 600px) {
  .highlight-main-box,
  .back-main-box {
    flex-wrap: wrap;
    margin-bottom: 10%;
  }

  .highlight-left,
  .box-writing-left {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }


  .highlight-right,
  .back-right {
    width: 100%;
    text-align: center;
  }

  .highlight-text,.back-text {
    width: fit-content; /* 幅を文字の長さに合わせる */
    margin: 0 auto;  /* 左右中央に寄せる */
    text-align: left;
  }

  .highlight-link-wrapper a {
    width: 100%;
  }

}

#reference-list ul {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2% 0;
}

#reference-list ul li {
  display: flex;
  justify-content: start;
  line-height: 1.7;
  flex-wrap: wrap;
  margin-bottom: 2%;
}

#reference-list ul li div {
  margin: 0 0.5%;
}