@charset "UTF-8";
.yearpass-mv{ position: relative;}
.yearpass-mv figure{ width: 100%; height: 100%; position: relative; min-height: 687px; display: block; aspect-ratio: 1920 / 687;}
.yearpass-mv figure img{ width: 100%; height: 100%; display: block; object-fit: cover;}
.yearpass-mv figure img.sp{ display: none}
.yearpass-mv-text{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 80px;}
.yearpass-mv-text .inner-yearpass-mv-text{ text-align: center; line-height: 1.6; letter-spacing: 0.15em; font-family: "Noto Serif JP", serif; }
.yearpass-mv-text .inner-yearpass-mv-text .mvCatch{ font-size: 50px; background: linear-gradient(to right, #027cc4 0%, #09a045 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 40px; font-weight: 700;}
.yearpass-mv-text .inner-yearpass-mv-text .mvLead{ font-size: 24px; margin-bottom: 0; font-weight: 600; line-height: 2;}
.heading.yearpass p.ttl{ background: linear-gradient(to left, #027cc4 0%, #09a045 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 50px; line-height: 1.6;}
.heading p.ttl .green{ display: block; font-size: 22px; background-color: #1EAC4B; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 30px auto 0;}
.heading.simpletitle{ font-size: 14px; font-size: 32px; font-weight: normal; margin: 120px auto 50px; }
.heading.simpletitle .heading-subtext{ width: 100%; height: auto; font-family: "Noto Serif JP", serif; letter-spacing: 0.15em; font-weight: 600;}
.okBox + .table-green, .table-blue, .table-pink{ margin-top: 30px;}
.program-caution-box-pageinner{ background-color: #F9F9F9; width: 100%; box-sizing: border-box; padding: 25px 30px; }
.program-caution-box-pageinner .lead{ font-size: 16px; line-height: 2;}
#yearpass-point .yearpass-benefits{ display: flex; flex-wrap: wrap; gap: 80px}
#yearpass-point .yearpass-benefits .media-left{ order: 3; max-width: 100%; margin: 0 auto 20px;}
#yearpass-point .yearpass-benefits .media-left .media-thumb{ aspect-ratio: 370 / 217; width: 100%; height: auto;}
#yearpass-point .yearpass-benefits .u-clear{ flex-wrap: wrap; flex-direction: column; max-width: calc(988px + 110px); margin-bottom: 0; }
#yearpass-point .yearpass-benefits .u-clear:nth-child(1)::after{ background-image: url(../images/icon-point01.png); }
#yearpass-point .yearpass-benefits .u-clear:nth-child(2)::after{ background-image: url(../images/icon-point02.png); }
#yearpass-point .yearpass-benefits .u-clear:nth-child(3)::after{ background-image: url(../images/icon-point03.png); }
#yearpass-point .yearpass-benefits .u-clear:nth-child(4)::after{ background-image: url(../images/icon-point04.png); }
#yearpass-point .yearpass-benefits .u-clear:nth-child(5)::after{ background-image: url(../images/icon-point05.png); }
#yearpass-point .yearpass-benefits .u-clear::after{ content: ""; display: block; width: 80px; height: 80px; margin: 0 auto 15px; position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 2; order: 1;}
#yearpass-point .yearpass-benefits .media-right{ display: contents;}
#yearpass-point .yearpass-benefits .media-right .media-title{ text-align: center; margin: 0 auto 20px; order: 2; font-size: 24px; }
#yearpass-point .yearpass-benefits .media-right .media-title span{ background-size: 100% 2em;}
#yearpass-point .yearpass-benefits .inner-media-right{ width: 100%; order: 4;}
#yearpass-point .yearpass-benefits .inner-media-right .media-desc{ text-align: center;}

/*/*ボタンなし　.linkBnrList{ margin: 125px auto 150px; display: flex; gap: 20px; flex-wrap: wrap;}*/
.linkBnrList{ margin: 125px auto 0; display: flex; gap: 20px; flex-wrap: wrap;}
.linkBnrList a{ display: block;}


@media (width <= 750px) {
  .yearpass-mv{ position: relative;}
  .yearpass-mv figure{ height: auto; min-height: 0; aspect-ratio: 567 / 687; margin-bottom: 35px;}
  .yearpass-mv figure img{ width: 100%; height: 100%; display: block; object-fit: cover;}
  .yearpass-mv figure img.sp{ display: block}
  .yearpass-mv figure img.pc{ display: none}
  .yearpass-mv-text{ height: auto; position: relative; top: auto; left: auto; display: block; padding-bottom: 0;}
  .yearpass-mv-text .inner-yearpass-mv-text .mvCatch{ font-size: 24px; margin-bottom: 20px; }
  .yearpass-mv-text .inner-yearpass-mv-text .mvLead{ font-size: 16px; margin-bottom: 0; font-weight: 600; line-height: 2;}
  .subpage-inner{ margin-top: 35px}
  .page-fee .fee-section{ margin-top: 35px;}
  .heading.yearpass p.ttl{ font-size: 24px; line-height: 1.6;}
  .heading p.ttl .green{ font-size: 14px; margin: 15px auto 0;}
  .heading.simpletitle{ font-size: 18px;  margin: 50px auto 25px;}
  .heading.simpletitle .heading-subtext{ width: 100%; height: auto;}
  .okBox + .table-green, .table-blue, .table-pink{ margin-top: 10px;}
  .program-caution-box-pageinner{ padding: 15px 15px; }
  .program-caution-box-pageinner .lead{ font-size: 12px; line-height: 2;}
  
  #yearpass-point .yearpass-benefits{ display: flex; flex-wrap: wrap; gap: 40px}
  #yearpass-point .yearpass-benefits .media-left{ width: 100%; margin: 0 auto 20px;}
  #yearpass-point .yearpass-benefits .media-left .media-thumb{ aspect-ratio: 370 / 217; width: 100%; height: auto;}
  #yearpass-point .yearpass-benefits .u-clear::after{ width: 60px; height: 60px; margin: 0 auto 10px; }
  #yearpass-point .yearpass-benefits .media-right .media-title{ text-align: center; margin: 0 auto 20px; order: 2; font-size: 16px; }
  #yearpass-point .yearpass-benefits .media-right .media-title span{ background-size: 100% 2em;}
  #yearpass-point .yearpass-benefits .inner-media-right{ width: 100%; order: 4;}
  #yearpass-point .yearpass-benefits .inner-media-right .media-desc{ text-align: center;}
  
/*ボタンなし  .linkBnrList{ margin: 50px auto 60px; gap: 15px; padding: 0 10px;}*/
  .linkBnrList{ margin: 50px auto 0; gap: 15px; padding: 0 10px;}
}