@charset "utf-8";

/**** キーカラー ****/
:root {
  --clrGreen: #009140;
  --clrOrg: #f27f13;
  --clrPink: #f0c040;
  --clrRed: #a72c24;
  --clrWhite: #fff;
  --clrYellow: #101010;
  --keyColor: #b07020;
}

/**** レスポンシブ ****/
.sp {
  display: none;
}
.pc {
  display: block;
}
@media screen and (max-width: 750px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}

/**** メニューエリアの背景 ****/
.grandmenu {
  background: url(../images/top/menu_bg.webp) no-repeat top center;
}

/**** メニュー見出し ****/
.grandmenu > h2 {
  padding: 50px 0;
  font-weight: 600;
  font-size: 2.6rem;
}
.grandmenu > :is(h2, p) {
  color: #fff;
  font-family: "Hiragino Kaku Gothic StdN", sans-serif;
}
.grandmenu > h2 {
  font-size: 3.2rem;
}

/**** メニューボタンの設定 ****/
.grandmenu ul.cir li {
  padding: 10px;
  background: var(--keyColor);
  color: var(--clrWhite);
  transition: .3s;
}
.grandmenu ul.cir li b {
  margin: 0;
  color: var(--clrWhite);
  transition: .3s;
}
.grandmenu ul.cir li:is(:hover, .on, .select) {
  background: var(--clrPink);
  color: var(--clrYellow);
}
.grandmenu ul.cir li:is(:hover, .on, .select) b {
  color: var(--clrYellow);
}
.grandmenu ul.cir li i {
  margin: 0 0 0 10px;
}
.grandmenu ul.cir li:is(:hover, .on, .select) i {
  color: var(--clrYellow);
}
.grandmenu ul.cir li:is(.on, .select) u {
  margin: 0;
}
@media screen and (max-width: 750px) {
  .grandmenu ul.cir li {
    height: 120px;
  }
  .grandmenu ul.cir li i {
    font-size: .8rem;
  }
  .grandmenu ul.cir li b {
    font-size: 1.3rem;
  }
}

/**** メニューアイコンの大きさ ****/
.grandmenu ul.cir li u,
.grandmenu ul.cir li:is(.on, .select) u::before {
  width: 33px;
  height: 33px;
  margin: 0;
  overflow: visible;
  border-radius: 0;
}
.grandmenu ul.cir li:is(.on, .select) u::before {
  /* background: var(--keyColor); */
}
.grandmenu ul.cir li {
  border: 2px solid var(--clrWhite);
}
@media screen and (max-width: 750px) {
  .grandmenu ul.cir li u,
  .grandmenu ul.cir li:is(.on, .select) u::before {
    width: 40px;
    height: 40px;
  }
}

/**** メニューアイコン設定 ****/
.grandmenu ul.cir li {
  u::before {
    display: block;
    width: 33px;
    height: 33px;
    margin: 0;
    overflow: visible;
    border-radius: 0;
    background-size: cover;
    background-repeat: no-repeat;
  }
  &:nth-of-type(1) {
    u::before {
      background-image: url(../images/top/icon01.svg);
    }
    :is(&:hover, &.on, &.select) u::before {
      background-image: url(../images/top/icon01-hover.svg);
    }
  }
  &:nth-of-type(2) {
    u::before {
      background-image: url(../images/top/icon02.svg);
    }
    :is(&:hover, &.on, &.select) u::before {
      background-image: url(../images/top/icon02-hover.svg);
    }
  }
  &:nth-of-type(3) {
    u::before {
      background-image: url(../images/top/icon03.svg);
    }
    :is(&:hover, &.on, &.select) u::before {
      background-image: url(../images/top/icon03-hover.svg);
    }
  }
  &:nth-of-type(4) {
    u::before {
      background-image: url(../images/top/icon04.svg);
    }
    :is(&:hover, &.on, &.select) u::before {
      background-image: url(../images/top/icon04-hover.svg);
    }
  }
  &:nth-of-type(5) {
    u::before {
      background-image: url(../images/top/icon05.svg);
    }
    :is(&:hover, &.on, &.select) u::before {
      background-image: url(../images/top/icon05-hover.svg);
    }
  }
  &:nth-of-type(6) {
    u::before {
      background-image: url(../images/top/icon06.svg);
    }
    :is(&:hover, &.on, &.select) u::before {
      background-image: url(../images/top/icon06-hover.svg);
    }
  }
}
@media screen and (max-width: 750px) {
  .grandmenu ul.cir li {
    u {
      width: 40px;
      height: 40px;
      top: -12px;
      transform: translateX(-50%);
      &::before {
        width: 40px;
        height: 40px;
      }
    }
    &:nth-of-type(1) {
      u::before {
        background-image: url(../images/top/icon01-hover.svg);
      }
    }
    &:nth-of-type(2) {
      u::before {
        background-image: url(../images/top/icon02-hover.svg);
      }
    }
    &:nth-of-type(3) {
      u::before {
        background-image: url(../images/top/icon03-hover.svg);
      }
    }
    &:nth-of-type(4) {
      u::before {
        background-image: url(../images/top/icon04-hover.svg);
      }
    }
    &:nth-of-type(5) {
      u::before {
        background-image: url(../images/top/icon05-hover.svg);
      }
    }
    &:nth-of-type(6) {
      u::before {
        background-image: url(../images/top/icon06-hover.svg);
      }
    }
  }
}

/**** コンテンツ見出し ****/
#contents :is(.cont, .cont1, .cont2, .cont3, .cont4, .cont5) h2 {
  color: black;
}

.insta_txt {
  margin-bottom: -30px;
  font-size: 18px;
}

#lead {
  max-width: 890px;
  margin: 0 auto;
  padding: 60px 30px;
}
#lead p {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 25px;
  font-size: 1.6rem;
}
#lead p b {
  font-size: 2rem;
  letter-spacing: .1em;
}
#lead .kaiki {
  margin: 0 0 25px;
}
#lead .kaiki p {
  margin: 0;
}
@media screen and (max-width: 750px) {
  #lead .kaiki p {
    font-size: 1rem;
  }
}
#lead p.sub {
  font-family: "Hiragino Sans", sans-serif;
  font-weight: 400;
  font-size: .9rem;
  line-height: 1.8;
}
#lead p.txt {
  font-weight: 600;
  font-size: 1.6rem;
}
#lead p.ttl {
  flex-direction: column;
  gap: 8px;
  line-height: 1.2;
}
#lead p.ttl b {
  font-family: "A-OTF Gothic MB101 Pr6", sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
  letter-spacing: .1em;
}

.kaiki {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

#contents .cont.list2 li {
  width: 48%;
  padding: 0;
  padding-right: 0;
}
#contents .cont.list2 li:nth-child(2n) {
  padding-right: 0;
}
#contents .cont.list2 li.fs-full {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto 40px;
}
.cont .inner_ttl {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto 30px;
  box-sizing: border-box;
}
.cont .inner_ttl img {
  max-width: 100%;
}

header {
  height: 56px;
}
header .logo {
  top: 13px;
}
header #hdrSns {
  top: 20px;
  right: 18px;
}

#contents .cont {
  h2 {
    margin: 0;
    padding: 105px 0 0;
    font-size: 4.9rem;
    &::before {
      content: "";
      width: 65px;
      height: 65px;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      margin-left: 0;
      background: var(--keyColor);
      background-size: cover;
      background-repeat: no-repeat;
      background-color: transparent;
      mask-size: 100% auto;
      mask-repeat: no-repeat;
    }
  }
  &:nth-of-type(1) h2::before {
    background-image: url("../images/cont1/cont1_icon1.svg");
  }
  &:nth-of-type(2) h2::before {
    background-image: url("../images/cont2/cont2_icon1.svg");
  }
  &:nth-of-type(3) h2::before {
    background-image: url("../images/cont3/cont3_icon1.svg");
  }
  &:nth-of-type(4) h2::before {
    background-image: url("../images/cont4/cont4_icon1.svg");
  }
  &:nth-of-type(5) h2::before {
    background-image: url("../images/cont5/cont5_icon1.svg");
  }
  &:nth-of-type(6) h2::before {
    background-image: url("../images/cont6/cont6_icon1.svg");
  }
}
@media screen and (max-width: 750px) {
  #contents .cont h2 {
    padding: 90px 0 0;
    font-size: 2.4rem;
  }
}

#contents .cont li .text {
  margin-top: 16px;
}

/* リンクボタン */
.btn_wrap {
  max-width: 455px;
  margin: 0 auto;
}
.btn {
  display: inline-block;
  width: 100%;
  position: relative;
  padding: 6px 0;
  border: 2px solid #171717;
  color: #171717;
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: .1em;
  transition: .3s ease-out;
}
.btn::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #171717;
}
.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%) rotate(-90deg);
  border-top: 5px solid #fff;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
}
.btn:hover {
  background: #171717;
  color: #fff;
}
.btn:hover::before {
  background: #fff;
}
.btn:hover::after {
  border-top: 5px solid #171717;
}

.twitterShare {
  width: 88px;
  height: 30px;
}
.twitterShare img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 750px) {
  #lead {
    max-width: 750px;
    margin: 0 auto;
    padding: 14px 30px;
  }
  #lead .kaiki {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  .grandmenu > h2 {
    font-size: 2.4rem;
  }
  #contents .cont ul {
    padding: 20px;
  }
  #contents .cont.list2 li {
    width: 100%;
    margin: 0;
    margin-bottom: 40px;
    padding: 0;
  }
  #contents .cont:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) h2::before {
    width: 60px;
    height: 60px;
  }
  #lead p {
    margin: 10px 0;
    font-size: 1.2rem;
  }
  #lead p.sub {
    margin: 25px 0 15px;
    font-size: .8rem;
  }
  .btn::before {
    width: 25px;
    height: 25px;
  }
  .btn::after {
    right: 17px;
    border-top: 9px solid #fff;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
  }
}

#contents .cont ul {
  display: flex;
  width: 100%;
  max-width: 1250px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 80px auto 0;
}
#contents .cont ul li .img {
  position: relative;
}

#contents .cont ul.fs {
  margin: 80px auto 0;
}

.cont .inner_ttl.mt {
  margin-top: 80px;
}

#contents .cont {
  padding: 100px 0;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
}
#contents .cont li {
  text-align: left;
}
#contents .cont li .text {
  margin-bottom: 30px;
}
#contents .cont p {
  font-size: 2.6rem;
}

@media screen and (max-width: 820px) {
  .grandmenu ul.cir li {
    width: 374px;
  }
}
@media screen and (max-width: 750px) {
  .grandmenu ul.cir li {
    width: 355px;
  }
  .cont .inner_ttl.mt {
    margin-top: 80px;
  }
  .cont .inner_ttl {
    padding: 0 20px;
  }
  #contents .cont ul {
    width: 100%;
  }
  #contents .cont p {
    font-size: 1.76rem;
  }
  #contents .cont ul.fs {
    margin-top: 60px;
  }
}