@media (max-width: 1180px) {}

/* ==========================================================================
	Variables
   ========================================================================== */

main {
  --pg-inner-size: 1000px;
  --pg-inner-size-s: 850px;
  --pg-inner-size-l: 1200px;
  --pg-inner-side-m: clamp(1.25rem, -5.417rem + 13.889vw, 11.25rem);
}

/* ==========================================================================
	generic
   ========================================================================== */

.pg-inner {
  padding-inline: max((100vw - var(--pg-inner-size)) / 2, var(--pg-inner-side-m));
}
.pg-innerS {
  padding-inline: max((100vw - var(--pg-inner-size-s)) / 2, var(--pg-inner-side-m));
}
.pg-innerL {
  padding-inline: max((100vw - var(--pg-inner-size-l)) / 2, var(--pg-inner-side-m));
}

.pg-innerMargin {
  margin-inline: max((100vw - var(--pg-inner-size)) / 2, var(--pg-inner-side-m));
}

main img {
  display: block;
}

main {
  font-feature-settings: "palt";
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0;
  color: #333;
}

main .appBtn {
  margin-inline: auto;
  max-width: 560px;
  text-align: center;
}

main a {
  transition: opacity 300ms;
}
@media (hover: hover) {
  main a:hover {
    opacity: 0.8;
  }
}

main .pg-lnk {
  border-bottom: 1px solid currentColor;
}

main .pg-btn {
  background: #6e7073;
  color: #fff;
  display: inline-grid;
  place-content: center;
  width: 300px;
  min-height: 50px;
  text-align: center;
  position: relative;
}
main .pg-btn.-gold {
  background: #9d8959;
}
main .pg-btn::after {
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  top: 50%;
  transform: translateY(-50%);
  right: var(--s2);
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m19 12l12 12l-12 12'/%3E%3C/svg%3E");
}
main .pg-btn.-outlink::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3z'/%3E%3C/svg%3E");
}

main .pg-tag {
  display: inline-block;
  padding: var(--ss) var(--s3);
  background: #ededed;
  font-size: var(--f22);
}

main .pg-headding {
  font-size: var(--f28);
  font-weight: normal;
}



main .pg-grey {
  color: #666;
}
main .pg-red {
  color: #b53333;
}

/* ==========================================================================
	sec-mv
   ========================================================================== */

.sec-mv {}


/* ==========================================================================
	sec-intro
   ========================================================================== */

.sec-intro {
  padding-block: var(--s10);
  background: #f5f3ee;
  color: #830000;
  font-size: var(--f24);
}
@media (max-width: 767px) {
  .sec-intro {
    font-size: var(--f18);
  }
}

.sec-intro a {
  display: block;
  margin-inline: auto;
  max-width: max-content;
}
@media (max-width: 767px) {
  .sec-intro a {
    max-width: 400px;
  }
}

/* ==========================================================================
	sec-present
   ========================================================================== */

.sec-present {
  overflow-y: hidden;
}

.presentBlock {
  padding-block: var(--s13);
  position: relative;
  z-index: 10;
}
.presentBlock.-bgGold {
  background: linear-gradient(#fff, #f7f4ed);
}
.presentBlock.-bgSilver {
  background: linear-gradient(#fff, #f5f5f5);
}

.presentIntro {
  position: relative;
  z-index: 10;
}
.presentIntro_logo {
  margin-bottom: var(--s3);
}
.presentIntro_grid {
  display: grid;
  grid-template-columns: 620fr 300fr;
  gap: var(--s5) var(--s10);
}
@media (max-width: 767px) {
  .presentIntro_logo img {
    margin-inline: auto;
  }
  .presentIntro_grid {
    grid-template-columns: 1fr;
  }
  .presentIntro_grid_btn {
    width: 300px;
    margin-inline: auto;
  }
}

.presentIntro_gridSrv {
  display: grid;
  align-items: center;
  grid-template-columns: 130fr 465fr;
  gap: var(--s3);
}

.presentContent {
  position: relative;
  z-index: 10;
}
.presentContent_gridWrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s15) var(--s7);
}
@media (max-width: 767px) {
  .presentContent_gridWrap {
    grid-template-columns: 1fr;
    /* row-gap: var(--s6); */
  }
}
.presentContent_gridWrap.-slip>*:nth-child(2n) {
  position: relative;
  top: 56%;
}
@media (max-width: 767px) {
  .presentContent_gridWrap.-slip>*:nth-child(2n) {
    position: static;
  }
}

.presentContent_card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6) var(--s7);
}
.presentContent_card.-horizon {
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 767px) {
  .presentContent_card.-horizon {
    grid-template-columns: 1fr;
  }
}
.presentContent_card_txt {
  padding-left: 7.4%;
}
/* .presentContent_card_img {
  padding-bottom: 7.4%;
} */
.presentContent_card_maker {
  margin-bottom: var(--s2);
}
.presentContent_card_name {
  margin-bottom: var(--s2);
}

.cloud {
  position: absolute;
  z-index: -1;
  background: url(../img/cloud-01.png) center/100% 100%;
  width: 230px;
  aspect-ratio: 230/95;
}
@media (max-width: 767px) {
  .cloud {
    width: 30%;
  }
}
.cloud.-rvs {
  background-image: url(../img/cloud-02.png);
}
.cloud.-pos01 {
  top: 10%;
  right: 15%;
}
@media (max-width: 767px) {
  .cloud.-pos01 {
    top: -2%;
    right: -2%;
  }
}
.cloud.-pos02 {
  top: 82%;
  right: -5%;
}
@media (max-width: 767px) {
  .cloud.-pos02 {
    top: 98%;
    right: -2%;
  }
}
.cloud.-pos03 {
  top: 0%;
  right: -17%;
}
@media (max-width: 767px) {
  .cloud.-pos03 {
    top: -8%;
    right: -2%;
  }
}
.cloud.-pos04 {
  top: -24%;
  right: -21%;
}
@media (max-width: 767px) {
  .cloud.-pos04 {
    top: -20%;
    right: -14%;
  }
}
.cloud.-pos05 {
  top: -10%;
  right: -20%;
}
@media (max-width: 767px) {
  .cloud.-pos05 {
    top: -6%;
    right: -2%;
  }
}


/* ==========================================================================
	sec-overview
   ========================================================================== */

.sec-overview {
  padding-block: var(--s10) var(--s15);
}

.overviewTable {
  --border: 1px solid #d6d6d6;
  border: var(--border);
  border-bottom: none;
  color: #5c5c5c;
  line-height: 2.2;

}
.overviewTable>div {
  display: grid;
  grid-template-columns: 160px 1fr;
}
@media (max-width: 767px) {
  .overviewTable>div {
    grid-template-columns: 1fr;
  }
}
.overviewTable dt,
.overviewTable dd {
  padding: var(--s3) var(--s5);
  border-bottom: var(--border);
}
.overviewTable dt {
  background: #f7f7f7;
  text-align: center;
  border-right: var(--border);
}
.overviewTable hr {
  margin-block: var(--s3);
  border: none;
  border-bottom: 1px dashed #d6d6d6;
}

.dotList {
  position: relative;
  padding-left: 16px;
}
.dotList li {
  /* margin-block: var(--s1); */
}
.dotList li:before {
  content: "●";
  position: absolute;
  left: 0;
  transform: scale(.5);
}