@charset "UTF-8";
@import url("https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css");
/*
100=Thin (Hairline)
300=Light
400=Normal
500=Medium
700=Bold
800=Extra Bold (Ultra Bold)
900=Black (Heavy)
*/
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
/*フォントウェイト　300,400,500,700,900*/
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*フォントウェイト　100,300,350,400,500,700,900*/
.ttl01 {
  text-align: center;
  color: #23B3BD;
  font-size: 20px;
  margin-bottom: 15px;
  color: #231815;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .ttl01 {
    font-size: 20px;
    margin-bottom: 10px;
  }
}
.ttl01 span {
  font-size: 32px;
  margin-left: 8px;
}
@media screen and (max-width: 767px) {
  .ttl01 span {
    font-size: 23px;
    margin-left: 0;
  }
}

.ttl02 {
  text-align: center;
  padding: 10px;
  font-size: 25px;
  background-color: #23B3BD;
  color: #fff;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .ttl02 {
    font-size: 23px;
  }
}

@media screen and (min-width: 768px) {
  a:hover {
    opacity: 0.6;
  }
}
img {
  max-width: 100%;
  height: auto;
}

h1 {
  /* @include fonSB;
  color: $emerald;
  font-size: 26px;
  position: absolute;
  top: 93px;
  left: 80px; */
}
@media screen and (max-width: 767px) {
  h1 {
    font-size: 13px;
    text-align: center;
    top: inherit;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
}
h1 span {
  font-size: 46px;
  display: block;
}
@media screen and (max-width: 767px) {
  h1 span {
    font-size: 22px;
  }
}

#mainimg {
  background-color: #FFF6ED;
}
@media screen and (max-width: 767px) {
  #mainimg {
    background: none;
    height: auto;
    background-color: #fff;
  }
}
#mainimg .cpy {
  text-align: center;
  max-width: 800px;
  margin: auto;
  padding-top: 50px;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  #mainimg .cpy {
    width: 93%;
    padding-top: 20px;
    margin-bottom: 10px;
  }
}
#mainimg #mv {
  /* background: url("../img/top/main_02.jpg") no-repeat center;
  width: 100%;
  max-width: 980px;
  height: 425px;
  margin: 0 auto;
  background-size: cover;
  position: relative; */
  max-width: 980px;
  margin: auto;
  margin-bottom: 50px;
}
#mainimg ul {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1020px;
  margin: 25px auto;
}
#mainimg ul li {
  width: 31.5%;
}
#mainimg ul a {
  color: #fff;
  display: block;
  border-radius: 15px;
  background-color: #231815;
  /* box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.16); */
  font-size: 20px;
  text-align: center;
  padding: 25px 0;
  font-weight: 500;
}
#mainimg ul a img {
  max-width: 58px;
  height: auto;
  vertical-align: middle;
  margin-right: 15px;
}
#mainimg ul a:hover {
  transform: scale(1.05);
  opacity: 1;
}

#TopCampainNews {
  padding: 35px 2%;
  padding-bottom: 50px;
  font-size: 13px;
}
@media screen and (max-width: 767px) {
  #TopCampainNews {
    padding-bottom: 20px;
  }
}
#TopCampainNews .slider {
  max-width: 890px;
  margin: 0 auto 50px;
  position: relative;
}
#TopCampainNews .slider .slick-prev {
  left: -30px;
  top: 70px;
  z-index: 9;
  background: url("../img/top/arrow.svg") no-repeat;
  height: 14px;
  width: 8px;
  transform: rotate(-180deg);
  background-size: contain;
}
#TopCampainNews .slider .slick-prev:before {
  content: "" !important;
}
#TopCampainNews .slider .slick-next {
  right: -30px;
  top: 77px;
  z-index: 9;
  background: url("../img/top/arrow.svg") no-repeat;
  height: 14px;
  width: 8px;
  background-size: contain;
}
#TopCampainNews .slider .slick-next:before {
  content: "" !important;
}
#TopCampainNews .slider li {
  margin: 0 10px;
}
@media screen and (max-width: 767px) {
  #TopCampainNews .slider li {
    margin: 0 5px;
  }
}
#TopCampainNews .news ul {
  max-width: 712px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #TopCampainNews .news ul {
    border-top: 1px solid #707070;
  }
}
#TopCampainNews .news ul li {
  border-bottom: 1px solid #707070;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
#TopCampainNews .news ul li .date {
  font-weight: bold;
  text-align: right;
  width: 150px;
  display: table-cell;
}
@media screen and (max-width: 767px) {
  #TopCampainNews .news ul li .date {
    width: 20%;
  }
}
#TopCampainNews .news ul li span:not(.date) {
  padding: 0 10px 0 50px;
  display: table-cell;
}
@media screen and (max-width: 767px) {
  #TopCampainNews .news ul li span:not(.date) {
    padding: 0 10px;
    width: 80%;
  }
}
#TopCampainNews .news ul li details[open] > summary:after {
  background: url("../img/cmn/icon_minus.svg") no-repeat center;
}
#TopCampainNews .news ul li details div {
  padding: 10px 15px 15px;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  #TopCampainNews .news ul li details div {
    padding: 10px 15px 15px 255px;
  }
}
#TopCampainNews .news ul li details div a {
  text-decoration: underline;
  color: #23B3BD;
  display: inline-block;
}
#TopCampainNews .news ul li details div strong {
  font-weight: bold;
}
#TopCampainNews .news ul li details div small {
  font-size: 11px;
}
#TopCampainNews .news ul li summary {
  padding: 15px;
  display: table;
  width: 100%;
  cursor: pointer;
  position: relative;
  list-style: none;
}
@media screen and (max-width: 767px) {
  #TopCampainNews .news ul li summary {
    padding: 10px;
  }
}
#TopCampainNews .news ul li summary:after {
  display: block;
  content: "";
  background: url("../img/cmn/icon_plus.svg") no-repeat center;
  height: 16px;
  width: 16px;
  background-size: contain;
  position: absolute;
  right: 1%;
  top: calc(50% - 8px);
}
#TopCampainNews .news ul li summary::-webkit-details-marker {
  display: none;
}
#TopCampainNews .news .btn {
  max-width: 376px;
  display: block;
  text-align: center;
  margin: 30px auto 10px;
  padding: 0;
}
@media screen and (max-width: 767px) {
  #TopCampainNews .news .btn {
    width: 90%;
  }
}
#TopCampainNews .news .btn a {
  display: block;
  padding: 10px 50px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  #TopCampainNews ul.sp {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 98%;
    margin: 0 auto 20px;
  }
  #TopCampainNews ul.sp li {
    width: 31.6%;
    text-align: center;
  }
  #TopCampainNews ul.sp li a {
    background-color: #231815;
    display: block;
    border-radius: 15px;
    position: relative;
    padding: 8px 2% 8px;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
  }
  #TopCampainNews ul.sp li a:after {
    display: block;
    content: "";
    background: url("../img/cmn/icon_cursor3.png") no-repeat;
    width: 14px;
    height: 8px;
    background-size: contain;
    margin: 5px auto 0;
  }
  #TopCampainNews ul.sp li img {
    width: 48px;
    display: block;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
  }
}

#TopPoint > div {
  /* background: #EAEAEA; */
  text-align: center;
  padding-bottom: 50px;
}
#TopPoint > div ul {
  max-width: 980px;
  margin: 70px auto;
  align-items: flex-end;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  #TopPoint > div ul {
    display: block;
    margin: 20px auto;
  }
}
#TopPoint > div ul li {
  width: 32%;
  font-size: 15px;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #TopPoint > div ul li {
    width: 100%;
    font-size: 18px;
    margin-bottom: 20px;
  }
}
#TopPoint > div ul li div {
  color: #23B3BD;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: bold;
  margin-bottom: 10px;
}
#TopPoint > div ul li div:before {
  display: inline-block;
  content: "";
  height: 34px;
  transform: rotate(-20deg);
  border-right: 2px solid #23B3BD;
  margin-right: 12px;
  vertical-align: bottom;
}
#TopPoint > div ul li div:after {
  display: inline-block;
  content: "";
  height: 34px;
  transform: rotate(20deg);
  border-right: 2px solid #23B3BD;
  margin-left: 6px;
  vertical-align: bottom;
}
#TopPoint > div ul li img {
  margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
  #TopPoint > div ul li img {
    width: 60%;
    margin-bottom: 0;
  }
}
#TopPoint > div ul li span {
  color: #23B3BD;
}
#TopPoint > div .btn {
  display: block;
  max-width: 376px;
  padding: 0;
  margin: 0 auto 20px;
}
@media screen and (max-width: 767px) {
  #TopPoint > div .btn {
    width: 80%;
  }
}
#TopPoint > div .btn a {
  width: 100%;
  display: block;
  padding: 10px 50px;
}

#TopShop .dflex {
  justify-content: center;
  padding: 70px 0;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #TopShop .dflex {
    display: block;
  }
}
#TopShop .dflex div {
  text-align: center;
  font-weight: 500;
}
#TopShop .dflex div p:not(.btn) {
  font-size: 20px;
}
@media screen and (max-width: 767px) {
  #TopShop .dflex div p:not(.btn) {
    font-size: 18px;
  }
}
#TopShop .dflex div span {
  color: #23B3BD;
}
#TopShop .ttl02 {
  background: #231815;
}
#TopShop img {
  max-width: 330px;
  margin-right: 50px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  #TopShop img {
    margin: 0 auto 15px;
    display: block;
    width: 60%;
  }
}
#TopShop .btn {
  display: block;
  margin-top: 20px;
}
@media screen and (max-width: 767px) {
  #TopShop .btn {
    width: 80%;
    padding: 0;
    margin: 20px auto 10px;
  }
  #TopShop .btn a {
    width: 100%;
    display: block;
    padding: 10px;
  }
}

#TopTokuten > div {
  text-align: center;
  padding-bottom: 20px;
}
@media screen and (max-width: 767px) {
  #TopTokuten > div {
    padding-bottom: 10px;
  }
}
#TopTokuten > div .dflex {
  justify-content: center;
  padding: 70px 0;
  align-items: center;
}
#TopTokuten > div .dflex div {
  text-align: center;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #TopTokuten > div .dflex div {
    order: 2;
  }
}
#TopTokuten > div .dflex div p:not(.btn) {
  font-size: 18px;
  margin-bottom: 20px;
}
#TopTokuten > div .dflex div span {
  color: #23B3BD;
}
#TopTokuten > div .ttl02 {
  background: #231815;
}
#TopTokuten > div .btn {
  display: block;
}
#TopTokuten > div img {
  max-width: 365px;
  margin-left: 50px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  #TopTokuten > div img {
    order: 1;
    margin: 0 0 15px;
    width: 65%;
  }
}

#TopApp > div {
  padding-bottom: 5px;
}
#TopApp > div .ttl02 {
  background: #23B3BD;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  #TopApp > div .ttl02 {
    font-size: 21px;
  }
}
#TopApp > div .box {
  background: #fff;
  border-radius: 20px;
  padding: 50px;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  #TopApp > div .box {
    background: none;
    padding: 0;
  }
}
#TopApp > div .box .btn {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  #TopApp > div .box .btn {
    width: 90%;
    margin: 0 auto;
  }
}
#TopApp > div .box + .box {
  margin: 40px auto;
  padding-top: 70px;
}
#TopApp > div .box .mec_card {
  max-width: 420px;
  margin-bottom: 40px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  #TopApp > div .box .mec_card {
    width: 80%;
    margin: 10px auto 20px;
  }
}
#TopApp > div .box .txt {
  font-size: 15px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: bold;
  margin-bottom: 20px;
}
#TopApp > div .box .btn[target=_blank]:after {
  background: url("../img/cmn/ico_blank.svg") no-repeat;
  height: 20px;
  width: 20px;
  border: none;
}
@media screen and (max-width: 767px) {
  #TopApp > div .contentswrap {
    width: 100%;
  }
}
#TopApp > div .catch {
  background: #23B3BD;
  color: #fff;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  position: absolute;
  display: inline-block;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  width: 234px;
  padding: 8px;
}
@media screen and (max-width: 767px) {
  #TopApp > div .catch {
    width: 100%;
    font-size: 23px;
  }
}
#TopApp > div .catch:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 10px 0 10px;
  border-color: #23B3BD transparent transparent transparent;
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  #TopApp > div .catch:after {
    display: none;
  }
}
#TopApp > div .banner_machi {
  max-width: 538px;
  margin: 0 auto 30px;
}
@media screen and (max-width: 767px) {
  #TopApp > div .banner_machi {
    width: 92%;
    margin-bottom: 20px;
  }
}
#TopApp > div .ttl_app {
  font-size: 18px;
}
#TopApp > div .ttl_app span {
  color: #23B3BD;
  font-size: 27px;
  display: block;
}/*# sourceMappingURL=top.css.map */