.dl-style-1 {
  width: 330px;
  height: 330px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: url("../img/shared/bg9.jpg");
  border-radius: 100%;
  font-family: "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 0.1em;
  text-align: center;
}
.dl-style-1 small {
  font-size: 25px;
  letter-spacing: 0.1em;
}
.dl-style-1 dd {
  margin-top: 15px;
}

.slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-column-gap: 4px;
     -moz-column-gap: 4px;
          column-gap: 4px;
}
.slick-dots li {
  width: auto;
  height: auto;
  line-height: 0;
}
.slick-dots li button {
  width: 55px;
  height: 6px;
  background: transparent;
  border: 1px solid #493325;
  border-radius: 0;
  color: transparent;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
}
.slick-dots li button:hover {
  cursor: pointer;
  background: #493325;
}
.slick-dots .slick-active button {
  background: #493325;
}

#key {
  background: url(../img/recommend/key.jpg) no-repeat center/cover;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  min-height: 610px;
}

#sec1 {
  padding: 69px 0 24px;
}
#sec1 .wrap::before {
  content: "";
  width: 189px;
  height: 231px;
  background: url("../img/recommend/sec1_deco.png") 0 0/contain no-repeat;
  position: absolute;
  top: 74px;
  right: -69px;
  z-index: -1;
}
#sec1 .set1 {
  text-align: center;
}
#sec1 .set1 .txt {
  margin-top: 27px;
}
#sec1 .set2 {
  margin: 43px -100px 0;
  position: relative;
}
#sec1 .set2 .bnr1 {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  top: -131px;
  left: -20px;
}
#sec1 .set2 .bnr2 {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-left: 439px;
}
#sec1 .set2 .bnr3 {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  position: absolute;
  top: -164px;
  right: -23px;
}
#sec1 .txtnote {
  margin-top: -57px;
  padding: 0 25px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: right;
}

#sec2 {
  padding: 155px 0 146px;
  position: relative;
  z-index: 0;
}
#sec2::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url("../img/recommend/sec2_bgt.png") center top/100% 130px no-repeat, url("../img/recommend/sec2_bgb.png") center bottom/100% 130px no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#sec2::after {
  content: "";
  background: url("../img/shared/bg4.jpg");
  position: absolute;
  inset: 130px 0;
  z-index: -1;
}
#sec2 .set1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -100px;
}
#sec2 .set1 h2.ttl {
  margin: 0 -44px -65px -136px;
  position: relative;
  z-index: 1;
}
#sec2 .set1 .gr1 {
  width: 600px;
  margin-top: 10px;
}
#sec2 .set1 .gr1 .img {
  margin: 0 40px 0 -89px;
}
#sec2 .set1 .gr2 {
  width: 600px;
}
#sec2 .set1 .gr2 .img {
  margin: 0 -150px 0 -87px;
}
#sec2 .set1 .gr2 .txt {
  width: 530px;
  margin: 56px 0 0 26px;
}
#sec2 .set2 {
  margin: 97px -70px 0;
  padding: 50px 50px 82px 75px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url("../img/shared/bg5.jpg");
  position: relative;
  z-index: 0;
}
#sec2 .set2::before {
  content: "";
  border: 20px solid #FFF;
  border-image: url(../img/index/frame.png) 20 round;
  -webkit-border-image: url(../img/index/frame.png) 20 round;
  -o-border-image: url(../img/index/frame.png) 20 round;
  position: absolute;
  inset: 0;
  z-index: -1;
}
#sec2 .set2 .gr1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#sec2 .set2 .gr1 .ttl {
  width: 380px;
  margin-top: 60px;
  text-align: center;
}
#sec2 .set2 .gr1 .img {
  width: 620px;
}
#sec2 .set2 .gr2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 49px;
}
#sec2 .set2 .gr2 .imgbox {
  width: 425px;
}
#sec2 .set2 .gr2 .txtbox {
  width: 508px;
  margin-top: 8px;
}
#sec2 .set2 .gr2 .txtbox .txt {
  width: 415px;
}
#sec2 .set3 {
  margin-top: 178px;
  position: relative;
}
#sec2 .set3 dl {
  margin-left: 23px;
}
#sec2 .set3 .img {
  position: absolute;
  top: -194px;
  right: -92px;
}

#sec3 {
  padding: 12px 0 246px;
}
#sec3 .set1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 -100px;
}
#sec3 .set1 .gr1 {
  width: 600px;
  margin-top: 101px;
}
#sec3 .set1 .gr1 .img {
  margin: 0 -23px 0 -77px;
}
#sec3 .set1 .gr2 {
  width: 600px;
  position: relative;
  z-index: 1;
}
#sec3 .set1 .gr2 .ttl {
  margin: 0 -75px -83px -145px;
}
#sec3 .set1 .gr2 .txt {
  width: 356px;
  margin-left: 95px;
}
#sec3 .set2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 12px -174px 0 -140px;
}
#sec3 .set2 .img2 {
  margin-top: -47px;
}
#sec3 .set3 {
  margin-top: 50px;
  position: relative;
}
#sec3 .set3 .img {
  position: absolute;
  top: -112px;
  left: -44px;
}
#sec3 .set3 dl {
  margin: 0 26px 0 auto;
}

#sec4 {
  padding: 147px 0 121px;
  position: relative;
  z-index: 0;
}
#sec4::before {
  content: "";
  width: 100%;
  height: 130px;
  background: url("../img/recommend/sec4_bgt.png") center top/100% 130px no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#sec4::after {
  content: "";
  background: url("../img/shared/bg6.jpg");
  position: absolute;
  inset: 130px 0 0;
  z-index: -1;
}
#sec4 .set1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin: 0 -100px;
}
#sec4 .set1 .gr1 {
  width: 600px;
  position: relative;
  z-index: 1;
}
#sec4 .set1 .gr1 .ttl {
  margin: 0 -66px -116px -150px;
}
#sec4 .set1 .gr1 .img {
  margin: 0 17px 0 -27px;
}
#sec4 .set1 .gr2 {
  width: 600px;
  margin-top: 360px;
  position: relative;
}
#sec4 .set1 .gr2 dl {
  margin-left: 65px;
}
#sec4 .set1 .gr2 .img {
  position: absolute;
  top: -489px;
  left: -132px;
}
#sec4 .set2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 58px -132px 0 -100px;
}
#sec4 .set2 .gr1 {
  width: 520px;
}
#sec4 .set2 .gr1 .ttl {
  margin-left: -3px;
}
#sec4 .set2 .gr1 .txt {
  width: 440px;
  margin: 38px 0 0 35px;
}
#sec4 .set2 .gr1 .img {
  margin: 65px 0 0 52px;
}
#sec4 .set2 .gr2 .img {
  margin-top: -127px;
}
#sec4 .set2 .gr2 .txtbox {
  width: 650px;
  margin: 100px 0 0 6px;
  padding: 72px 30px 51px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: url("../img/shared/bg5.jpg");
  -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.26);
          box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.26);
  position: relative;
  z-index: 0;
}
#sec4 .set2 .gr2 .txtbox::before {
  content: "";
  border: 20px solid #FFF;
  border-image: url(../img/index/frame.png) 20 round;
  -webkit-border-image: url(../img/index/frame.png) 20 round;
  -o-border-image: url(../img/index/frame.png) 20 round;
  position: absolute;
  inset: 0;
  z-index: -1;
}
#sec4 .set2 .gr2 .txtbox::after {
  content: "";
  width: 100%;
  height: 115px;
  background: url("../img/recommend/sec4_deco.png") center/contain no-repeat;
  position: absolute;
  top: -55px;
  left: 0;
}
#sec4 .set2 .gr2 .txtbox .ttl {
  text-align: center;
}
#sec4 .set2 .gr2 .txtbox .detail-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;
  margin-top: 14px;
}
#sec4 .set2 .gr2 .txtbox .detail-list dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#sec4 .set2 .gr2 .txtbox .detail-list dl dd {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100%;
          flex: 0 1 100%;
}
#sec4 .set2 .gr2 .txtbox .detail-list .gr:first-child dl dt {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 105px;
          flex: 0 0 105px;
}
#sec4 .set2 .gr2 .txtbox .detail-list .gr:nth-child(2) dl dt {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 115px;
          flex: 0 0 115px;
}
#sec4 .set3 {
  margin-top: 70px;
  text-align: center;
}

#sec5 {
  padding: 125px 0 108px;
  position: relative;
  z-index: 0;
}
#sec5::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: url(../img/shared/bg2.jpg);
  z-index: 1;
  -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.35);
          box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.35);
}
#sec5 .set {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 -40px 0 -144px;
}
#sec5 .set .imgbox {
  width: 710px;
  margin-top: 8px;
}
#sec5 .set .txtbox {
  width: 390px;
}
#sec5 .set .txtbox .txt {
  margin: 28px 35px 0 15px;
}
#sec5 .set .txtbox .btn-link {
  margin: 35px 0 0 16px;
  -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.35);
          box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.35);
}