@charset "UTF-8";

:root{
  --sans-serif: "HiraKakuPro-W3-AlphaNum", "\6E38\30B4\30B7\30C3\30AF", YuGothic, "\30D2\30E9\30AE\30CE\89D2\30B4 ProN W3", "Hiragino Kaku Gothic ProN", "\30E1\30A4\30EA\30AA", Meiryo, sans-serif !important;
  --font-filter: drop-shadow(2px 2px 7px #fff) drop-shadow(-2px -2px 7px #fff) drop-shadow(2px -2px 7px #fff) drop-shadow(-2px 2px 7px #fff);

  --salmon: #ec6d56;
  --lightsalmon: #f98e75;
  --green: #1eac4b;
  --skyblue: #2ea7e0;

  --comp-660: 89.1891891891891vw;
  --comp-580: 78.3783783783783vw;
  --comp-540: 72.9729729729729vw;
  --comp-520: 70.2702702702702vw;
  --comp-500: 67.5675675675675vw;
  --comp-480: 64.8648648648648vw;
  --comp-400: 54.054054054054vw;
  --comp-360: 48.6486486486486vw;
  --comp-350: 47.2972972972972vw;
  --comp-340: 45.9459459459459vw;
  --comp-330: 44.5945945945945vw;
  --comp-300: 40.5405405405405vw;
  --comp-280: 37.83783783783784vw;
  --comp-260: 35.1351351351351vw;
  --comp-250: 33.7837837837837vw;
  --comp-240: 32.4324324324324vw;
  --comp-225: 30.4054054054054vw;
  --comp-220: 29.7297297297297vw;
  --comp-200: 27.027027027027vw;
  --comp-195: 26.3513513513513vw;
  --comp-190: 25.6756756756756vw;
  --comp-185: 25vw;
  --comp-180: 24.3243243243243vw;
  --comp-175: 23.6486486486486vw;
  --comp-170: 22.9729729729729vw;
  --comp-165: 22.2972972972972vw;
  --comp-160: 21.6216216216216vw;
  --comp-155: 20.9459459459459vw;
  --comp-150: 20.2702702702702vw;
  --comp-145: 19.5945945945945vw;
  --comp-140: 18.9189189189189vw;
  --comp-135: 18.2432432432432vw;
  --comp-130: 17.5675675675675vw;
  --comp-125: 16.8918918918918vw;
  --comp-120: 16.2162162162162vw;
  --comp-115: 15.5405405405405vw;
  --comp-110: 14.8648648648648vw;
  --comp-105: 14.1891891891891vw;
  --comp-100: 13.5135135135135vw;
  --comp-95: 12.83783783783783vw;
  --comp-90: 12.1621621621621vw;
  --comp-85: 11.48648648648648vw;
  --comp-80: 10.8108108108108vw;
  --comp-75: 10.13513513513513vw;
  --comp-70: 9.459459459459459vw;
  --comp-65: 8.738738738738738vw;
  --comp-60: 8.108108108108108vw;
  --comp-55: 7.432432432432432vw;
  --comp-50: 6.756756756756756vw;
  --comp-45: 6.081081081081081vw;
  --comp-40: 5.405405405405405vw;
  --comp-35: 4.729729729729729vw;
  --comp-30: 4.054054054054054vw;
  --comp-25: 3.378378378378378vw;
  --comp-20: 2.702702702702702vw;
  --comp-15: 2.027027027027027vw;
  --comp-10: 1.351351351351351vw;
  --comp-5: 0.6756756756756756vw;
  
  --comp-96: 12.97297297297297vw;
  --comp-88: 11.89189189189189vw;
  --comp-86: 11.62162162162162vw;
  --comp-68: 9.189189189189189vw;
  --comp-64: 8.648648648648648vw;
  --comp-62: 8.378378378378378vw;
  --comp-58: 7.837837837837837vw;
  --comp-57: 7.702702702702707vw;
  --comp-56: 7.567567567567567vw;
  --comp-54: 7.297297297297297vw;
  --comp-52: 7.027027027027027vw;
  --comp-48: 6.486486486486486vw;
  --comp-46: 6.216216216216216vw;
  --comp-44: 5.945945945945945vw;
  --comp-43: 5.81081081081081vw;
  --comp-42: 5.675675675675675vw;
  --comp-39: 5.270270270270270vw;
  --comp-38: 5.135135135135135vw;
  --comp-36: 4.864864864864864vw;
  --comp-34: 4.594594594594594vw;
  --comp-33: 4.459459459459459vw;
  --comp-32: 4.324324324324324vw;
  --comp-28: 3.783783783783783vw;
  --comp-27: 3.648648648648648vw;
  --comp-26: 3.513513513513513vw;
  --comp-24: 3.243243243243243vw;
  --comp-22: 2.972972972972972vw;
  --comp-21: 2.837837837837837vw;
  --comp-19: 2.567567567567567vw;
  --comp-18: 2.432432432432432vw;
  --comp-17: 2.297297297297297vw;
  --comp-16: 2.162162162162162vw;
  --comp-14: 1.891891891891891vw;
  --comp-13-5: 1.82432432432432432vw;
  --comp-12: 1.621621621621621vw;
  --comp-8: 1.08108108108108108vw;
  --comp-7: 0.94594594594594594vw;
  --comp-4: 0.54054054054054054vw;
  --comp-3: 0.40540540540540540vw;
}

.birthday-mv{ position: relative;}
.birthday-mv figure{ width: 100%; height: 100%; position: relative; min-height: 687px; display: block; aspect-ratio: 1920 / 687;}
.birthday-mv figure img{ width: 100%; height: 100%; display: block; object-fit: cover;}
.birthday-mv figure img.sp{ display: none}
.birthday-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;}
.birthday-mv-text .inner-birthday-mv-text{ text-align: center; line-height: 1.6; letter-spacing: 0.15em; font-family: "Noto Serif JP", serif; }
.birthday-mv-text .inner-birthday-mv-text .mvCatch{ font-size: 58px; color: var(--green); font-weight: 700; font-family: var(--sans-serif); filter: var(--font-filter)}

.birthday-heading-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

.birthday-catch{ text-align: center; color: var(--green); font-size: 22px; font-weight: bold; margin-bottom: 60px; line-height: 2;}

.targetBox{ border: var(--lightsalmon) 2px solid; border-radius: 13px; max-width: 740px; padding: 20px; box-sizing: border-box; margin-inline: auto;}
ul.targetList{ display: flex; flex-wrap: wrap; justify-content: center; row-gap: 10px; column-gap: 10px;}
ul.targetList li{ text-wrap: nowrap; padding: 5px 13px 3px; line-height: 1.6; box-sizing: border-box; border-radius: 50px; background-color: #fff; font-weight: bold; font-size: 14px; color: #999999;}
ul.targetList li.ok{ border: 1px solid var(--lightsalmon); padding: 4px 10px 2px; color: var(--lightsalmon);}
ul.targetList li:not([class]),
ul.targetList li.ng{ background-color: #f2f2f2; }
ul.targetList li::after{ content: ""; aspect-ratio: 1 / 1; width: 0.9em; margin-left: 0.5em; display: inline-block;  background-image: url(../images/icon-cross.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; }
ul.targetList li.ok::after{ background-image: url(../images/icon-circle.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;}

.tab-switch-list{ display: flex; align-items: stretch; width: 100%; gap: 20px;}
.tab-switch-list li{ display: flex; flex: 1; text-align: center;}
.tab-switch-list li button{ flex: 1; align-self: stretch; font-weight: bold; font-size: 26px; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; padding: 30px 20px; border: 0; border-radius: 30px 30px 0 0; cursor: pointer; -webkit-appearance: none; appearance: none;}
.tab-switch-list li button[data-target="campaign"]{ color: var(--skyblue); background-image: url(../images/bg-b.jpg);}
.tab-switch-list li button[data-target="set"]{ color: var(--green); background-image: url(../images/bg-y.jpg);}

.tab-detail-box{ padding: 80px 60px;}
.tab-detail-box.campaign{ background-image: url(../images/bg-b.jpg); background-repeat: repeat; background-position: center top;}
.tab-detail-box.set{ background-image: url(../images/bg-y.jpg); background-repeat: repeat; background-position: center top;}
.inner-birthday-target-box,
.tab-detail-box .btn-type01[data-cate]{ display: none;}
.inner-birthday-target-box.active,
.tab-detail-box .btn-type01[data-cate].active{ display: block; animation: birthday-tab-fade-in 0.55s ease-out both;}

@keyframes birthday-tab-fade-in{
  from{ opacity: 0; transform: translateY(12px);}
  to{ opacity: 1; transform: translateY(0);}
}

@media (prefers-reduced-motion: reduce){
  .inner-birthday-target-box.active,
  .tab-detail-box .btn-type01[data-cate].active{ animation: none;}
}

.birthday-target-Box table{ max-width: 800px; margin-inline: auto;}
.birthday-target-Box table th{ background-color: #f7f7f7; border: 1px solid #00a040; text-align: center; padding: 17px 40px;}
.birthday-target-Box table td{ text-align: left; padding: 17px 40px; border: 1px solid #00a040;}

.birthday-pick-up-box{ margin-top: 80px; max-width: calc(988px + 110px); padding: 0 55px;}
.birthday-pick-up-box hgroup{ margin-bottom: 30px; text-align: center;}
.birthday-pick-up-box hgroup p:not(.caution){ color: var(--green); font-size: 20px; width: fit-content; padding: 0 60px; box-sizing: border-box; margin-inline: auto; font-weight: bold; position: relative; margin-bottom: 20px;}
.birthday-pick-up-box hgroup p:not(.caution)::before,
.birthday-pick-up-box hgroup p:not(.caution)::after{ content: ""; display: block; height: 35px; width: 2px; background-color: var(--green); position: absolute;}
.birthday-pick-up-box hgroup p:not(.caution)::before{ bottom: -5px; left: 0; transform: rotate(-30deg);}
.birthday-pick-up-box hgroup p:not(.caution)::after{ bottom: -5px; right: 0; transform: rotate(30deg);}
.birthday-pick-up-box hgroup p.caution{ margin-top: 10px; font-size: 16px;}
.birthday-pick-up-box hgroup h3{ font-size: 26px; }
.tab-detail-box.campaign .birthday-pick-up-box hgroup h3,
.tab-detail-box.campaign .birthday-pick-up-box hgroup p.caution{ color: var(--skyblue);}
.tab-detail-box.set .birthday-pick-up-box hgroup h3,
.tab-detail-box.set .birthday-pick-up-box hgroup p.caution{ color: var(--salmon);}
.birthday-pick-up-box figure{ position: relative; padding: 5px; box-sizing: border-box; margin-bottom: 20px;}
.birthday-pick-up-box figure::after{ position: absolute; content: ''; background-image: url(../images/img-frame-bg.png); background-size: cover; background-repeat: no-repeat; top: 0; left: -2%; z-index: 0; width: 103%; height: 103%; z-index: 1;}
.birthday-pick-up-box figure img{ aspect-ratio: 370 / 217; height: auto; display: block; position: relative; z-index: 2;}
.birthday-pick-up-box .media-desc{ text-align: center;}

.btn-type01{ cursor: pointer; margin: 60px 20px 40px 10px; transition: all 0.5s; width: min(100%, 400px); margin-inline: auto;}
.btn-type01 a{ display: block; padding: 20px 20px 20px 30px; width: 100%; text-decoration: none; font-size: 18px; box-sizing: border-box; border-radius: 50px; position: relative; transition: all 0.5s; background: #68B4AD; color: #fff; font-weight: bold;}
.btn-type01 a::after{ content: ""; position: absolute; display: block; width: 10px; height: 10px; transform: rotate(45deg); border-top: 2px  solid #fff; border-right: 2px solid #fff; right: 30px; top: calc(50% - 6px); transition: all 0.5s;}
.btn-type01 a:hover::after{ right: 20px; border-top: 2px  solid #fff; border-right: 2px solid #fff; }
.btn-type01:last-child{ margin-bottom: 0;}
.tab-detail-box.campaign .btn-type01 a{ background-color: var(--skyblue);}
.tab-detail-box.set .btn-type01 a{ background-color: var(--green);}
.last-btn-Box .btn-type01{ margin-bottom: 0;}

.birthday-benefits{ display: flex; flex-wrap: wrap; gap: 60px; margin-top: 80px;}
.birthday-benefits .media-left{ order: 3; max-width: 100%; margin: 0 auto 20px;}
.birthday-benefits .media-left .media-thumb{ aspect-ratio: 370 / 217; width: 100%; height: auto;}
.birthday-benefits .u-clear{ flex-wrap: wrap; flex-direction: column; max-width: calc(988px + 110px); margin-bottom: 0; }
.birthday-benefits .u-clear:nth-child(1)::after{ background-image: url(../images/icon-present01.png); }
.birthday-benefits .u-clear:nth-child(2)::after{ background-image: url(../images/icon-present02.png); }
.birthday-benefits .u-clear:nth-child(3)::after{ background-image: url(../images/icon-present03.png); }
.birthday-benefits .u-clear:nth-child(4)::after{ background-image: url(../images/icon-present04.png); }
.birthday-benefits .u-clear:nth-child(5)::after{ background-image: url(../images/icon-present05.png); }
.birthday-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;}
.birthday-benefits .media-right{ display: contents;}
.birthday-benefits .media-right .media-title{ text-align: center; margin: 0 auto 20px; order: 2; font-size: 24px; }
.birthday-benefits .media-right .media-title span{ background-size: 100% 2em; background-image: linear-gradient(0deg, #c3e8d8 19.44%, transparent 19.44%, transparent 50%, #c3e8d8 50%, #c3e8d8 69.44%, transparent 69.44%, transparent 100%);}
.birthday-benefits .inner-media-right{ width: 100%; order: 4;}
.birthday-benefits .inner-media-right .media-desc{ text-align: center;}
.birthday-benefits .inner-media-right .media-desc b{ font-weight: bold}
.birthday-benefits .inner-media-right .media-desc a{ text-decoration: underline; color: inherit;}

@media (width <= 750px) {
    #container * {
        scroll-margin-top: calc(60px + min(var(--comp-15), 15px));
    }
}

@media (width <= 750px) {


  .birthday-mv{ position: relative;}
  .birthday-mv figure{ height: auto; min-height: 0; aspect-ratio: 740 / 640; margin-bottom: 35px;}
  .birthday-mv figure img{ width: 100%; height: 100%; display: block; object-fit: cover;}
  .birthday-mv figure img.sp{ display: block}
  .birthday-mv figure img.pc{ display: none}
  .birthday-mv-text{ height: auto; position: relative; top: auto; left: auto; display: block; padding-bottom: 0;}
  .birthday-mv-text .inner-birthday-mv-text .mvCatch{ font-size: var(--comp-42); margin-bottom: var(--comp-30); }
  .subpage-inner:has( #yearpass-detail:first-child){ margin-top: 0;}
  #yearpass-detail{ margin-top: 0;}
  .birthday-catch{ text-align: center; color: var(--green); font-size: var(--comp-28); font-weight: bold; margin-bottom: var(--comp-80); line-height: 2;}

  .targetBox{ border-radius: var(--comp-15); padding: var(--comp-20);}
  ul.targetList{ row-gap: var(--comp-15); column-gap: var(--comp-15);}
  ul.targetList li{ padding: calc(min(var(--comp-5), 5px) - 1px) calc(min(var(--comp-15), 15px) - 1px) calc(min(var(--comp-5), 5px) - 1px); font-size: min(var(--comp-24), 16px); }
  ul.targetList li.ok{ padding: calc(min(var(--comp-5), 5px) - 1px) calc(min(var(--comp-15), 15px) - 1px) calc(min(var(--comp-5), 5px) - 1px);}
  ul.targetList li:not([class]),
  ul.targetList li.ng{ padding: calc(min(var(--comp-5), 5px) - 1px) calc(min(var(--comp-15), 15px) - 1px) calc(min(var(--comp-5), 5px) - 1px); }

  .tab-switch-list{ gap: var(--comp-20);}
  .tab-switch-list li button{ font-size: min(var(--comp-22), 26px); padding: min(var(--comp-30), 30px) min(var(--comp-15), 20px); border-radius: min(var(--comp-30), 30px) min(var(--comp-30), 30px) 0 0;}

  .tab-detail-box{ padding: min(var(--comp-60), 80px) min(var(--comp-50), 60px) min(var(--comp-80), 80px);}

  .birthday-target-Box table th{ padding: min(var(--comp-30), 17px) min(var(--comp-20), 20px); font-size: min(var(--comp-22), 16px);}
  .birthday-target-Box table td{ text-align: left; padding: min(var(--comp-30), 17px) min(var(--comp-20), 20px); font-size: min(var(--comp-22), 16px); line-height: 1.6;}

  .birthday-pick-up-box{ margin-top: min(var(--comp-80), 80px); padding: 0 20px;}
  .birthday-pick-up-box hgroup{ margin-bottom: min(var(--comp-30), 30px); }
  .birthday-pick-up-box hgroup p:not(.caution){ font-size: min(var(--comp-26), 20px); padding: 0 min(var(--comp-30), 30px); margin-inline: auto; font-weight: bold; position: relative; margin-bottom: min(var(--comp-20), 20px);}
  .birthday-pick-up-box hgroup p:not(.caution)::before,
  .birthday-pick-up-box hgroup p:not(.caution)::after{ height: min(var(--comp-30), 30px); width: 2px; background-color: var(--green); position: absolute;}
  .birthday-pick-up-box hgroup p:not(.caution)::before{ bottom: 50%; transform: rotate(-30deg) translateY(50%);}
  .birthday-pick-up-box hgroup p:not(.caution)::after{ bottom: 50%; transform: rotate(30deg) translateY(50%);}
  .birthday-pick-up-box hgroup p.caution{ margin-top: min(var(--comp-10), 10px); font-size: min(var(--comp-22), 16px);}
  .birthday-pick-up-box hgroup h3{ font-size: min(var(--comp-34), 26px); }
  .birthday-pick-up-box hgroup h3 small{ display: block;}
  .birthday-pick-up-box figure{ position: relative; padding: 5px; box-sizing: border-box; margin-bottom: min(var(--comp-20), 20px);}
  .birthday-pick-up-box .media-desc{ font-size: min(var(--comp-22), 16px);}

  .btn-type01{ cursor: pointer; margin: min(var(--comp-70), 70px) auto min(var(--comp-20), 20px); transition: all 0.5s; width: min(100%, 400px); margin-inline: auto;}
  .btn-type01 a{ display: block; padding: min(var(--comp-30), 20px) min(var(--comp-60), 60px) min(var(--comp-30), 20px) min(var(--comp-30), 20px); width: 100%; text-decoration: none; font-size: min(var(--comp-26), 18px); }
  .btn-type01 a::after{ width: min(var(--comp-20), 10px); height: min(var(--comp-20), 10px); transform: rotate(45deg) translateY(-50%);  right: min(var(--comp-40), 40px); top: 50%;}
  .btn-type01 a:hover::after{ right: min(var(--comp-30), 30px); }
    
 .birthday-benefits{ gap: min(var(--comp-60), 60px); margin-top: min(var(--comp-100), 100px);}
 .birthday-benefits .media-left{ width: 100%; margin: 0 auto min(var(--comp-20), 20px);}
 .birthday-benefits .media-left .media-thumb{ aspect-ratio: 370 / 217; width: 100%; height: auto;}
 .birthday-benefits .u-clear::after{ width: min(var(--comp-100), 60px); height: auto; margin: 0 auto min(var(--comp-10), 10px); aspect-ratio: 1 / 1;}
 .birthday-benefits .media-right .media-title{ text-align: center; margin: 0 auto min(var(--comp-20), 20px); order: 2; font-size: min(var(--comp-28),20px); }
 .birthday-benefits .media-right .media-title span{ background-size: 100% 2em;}
 .birthday-benefits .inner-media-right{ width: 100%; order: 4;}
 .birthday-benefits .inner-media-right .media-desc{ text-align: center; font-size: min(var(--comp-22), 16px); padding-top: 0;}
  
/*ボタンなし  .linkBnrList{ margin: 50px auto 60px; gap: 15px; padding: 0 10px;}*/
  .linkBnrList{ margin: 50px auto 0; gap: 15px; padding: 0 10px;}
}