@charset "utf-8";

/* ---------------------------------------------
var
--------------------------------------------- */

:root {
  --window-width: 100vw;
  --vw-scale: calc(100vw / 1920);
  --content-scale-q: calc(100cqw / 767);
  --content-scale-p: calc(100% / 767);
}

/* ---------------------------------------------
Reset
--------------------------------------------- */
/* Modern browser */
*,
*::before,
*::after{box-sizing:border-box}
*{margin:0;padding:0;}
img,
picture,
video,
canvas,
svg{display:block;max-width:100%}
input,
button,
textarea,
select{font:inherit}
p,
h1,
h2,
h3,
h4,
h5,
h6{overflow-wrap:break-word}


/* addition */
img,
iframe,
video {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
em {
  font-style: normal;
}
small {
  font-size: 70%;
}

ul,ol,li {
  padding: 0;
  list-style: none;
}


/* ---------------------------------------------
font
--------------------------------------------- */
html {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "メイリオ", sans-serif;
}

strong, em {
  font-weight: 700;
}


/* ---------------------------------------------
link
--------------------------------------------- */
a,
a:link,
a:visited {
  color: #000;
}
a:hover {
  color: #e8447e;
  text-decoration: none;
}
a:focus {
  outline: none;
}


/* ---------------------------------------------
layout
--------------------------------------------- */

.lifeplan_seminar {
  width: 100%;
  margin: 0 auto;
}


/* ---------------------------------------------
outer
--------------------------------------------- */
.lp_page__wrapper {
  position: relative;
  overflow: hidden;
}
.lifeplan_seminar {
  background-color: #fff;
  overflow: hidden;
}

/* ---------------------------------------------
#mainContents
--------------------------------------------- */
.lifeplan_seminar {
  width: calc(767*var(--vw-scale));
  max-width: 518px;
  min-width: 518px;
  container-type: inline-size;
}


/* pageHeader */
#pageHeader {
  margin: 0;
  padding: calc(20*var(--content-scale-p)) 0  calc(20*var(--content-scale-p))  calc(40*var(--content-scale-p));
  border-bottom: 2px solid #005bac;
  position: relative;
  z-index: 1;
  background-color: #fff;
}
#pageHeader .logo {
  width: calc(250*var(--content-scale-p));
}


/* mainContents */
#mainContents {
  position: relative;
  z-index: 1;
  background: #fff url(/kojin/hiraku/cam/summer_campaign2026/images/bg.png) top center /100% auto no-repeat;
  font-weight: 500;
}


/* contentHeader */
#mainContents .contentHeader {
  margin-bottom: calc(58*var(--content-scale-p));
  padding: calc(37*var(--content-scale-p)) 0 0;
}
#mainContents .cpTerms {
  margin: 0 auto;
  padding: calc(33*var(--content-scale-p)) 0 calc(19*var(--content-scale-p));
  width: calc(625*var(--content-scale-p));
}
#mainContents .cpEntry {
  margin: 0 auto;
  width: calc(571*var(--content-scale-p));
}



/* sec1 */
#mainContents #sec1 {
}
#mainContents .campaignCondition {
  margin: 0 auto calc(32*var(--content-scale-p));
  padding: calc(15*var(--content-scale-p)) 0;
  border-radius: calc(10*var(--content-scale-q));
  position: relative;
  width: calc(665*var(--content-scale-p));
  min-height: calc(1145*var(--content-scale-q));
  background: url(/kojin/hiraku/cam/summer_campaign2026/images/bg_campaign.png) top right / cover repeat-y;
}
#mainContents .campaignCondition::before {
  content: "";
  display: block;
  position: absolute;
  top:  calc(-64*var(--content-scale-q));
  left: 50%;
  width: calc(767*var(--content-scale-q));
  height: calc(197*var(--content-scale-q));
  background: url(/kojin/hiraku/cam/summer_campaign2026/images/treat_campaign.png) top center / 100% auto no-repeat;
  pointer-events: none;
  transform: translateX(-50%);
}
#mainContents .campaignConditionTitle {
  margin: 0 auto calc(-9*var(--content-scale-q));
  width: calc(405*var(--content-scale-q));
}
#mainContents .campaignConditionList {
  margin: 0 auto;
  width: calc(627*var(--content-scale-q));
}
#mainContents .campaignConditionTable {
  margin: calc(17*var(--content-scale-q)) auto calc(9*var(--content-scale-q));
  width: calc(627*var(--content-scale-q));
}
#mainContents .campaignConditionMore {
  margin: 0 auto;
  width: calc(673*var(--content-scale-q));
  transform: translateX(calc(-4*var(--content-scale-q)));
}
#mainContents .campaignConditionNotice {
  padding: calc(5*var(--content-scale-q)) calc(20*var(--content-scale-q)) 0;
  line-height: 1.3888888888888888;
  font-size: calc(18*var(--content-scale-q));
}
#mainContents .campaignConditionNotice li {
  padding-left: 2.5em;
  text-indent: -2.5em;
  font-feature-settings: "palt";
}





/* sec2 */
#mainContents {
}
#mainContents .accountOpen {
  margin: 0 auto calc(72*var(--content-scale-p));
}
#mainContents .accountOpenTitle {
  margin: 0 auto calc(39*var(--content-scale-p));
  width: calc(441*var(--content-scale-p));
}
#mainContents .slider {
  margin: 0 auto;
  width: calc(628*var(--content-scale-p));
  position: relative;
}
#mainContents .slider .swiper {
  padding-top: calc(40*var(--content-scale-q));
}
#mainContents .slider .swiper-slide {
  border-radius: calc(20*var(--content-scale-q));
  position: relative;
  height: calc(616*var(--content-scale-q));
  background-color: #fff;
}
#mainContents .slider .ttl {
  margin: 0 auto calc(-7*var(--content-scale-q));
  width: calc(557*var(--content-scale-q));
  transform: translateY(calc(-40*var(--content-scale-q)));
}
#mainContents .slider .img,
#mainContents .slider .btn {
  margin: 0 auto;
  width: calc(571*var(--content-scale-q));
}
#mainContents .slider .btnArea {
}
#mainContents .slider .noteArea {
  margin: calc(10*var(--content-scale-q)) calc(30*var(--content-scale-q)) 0;
  line-height: 1.3888888888888888;
}
#mainContents .slider .noteArea small {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
  font-size: calc(18*var(--content-scale-q));
}
#mainContents .slider .slide1 .img {
  margin-bottom: calc(14*var(--content-scale-q));
  width: calc(443*var(--content-scale-q));
}
#mainContents .slider .slide1 .btn {
}
#mainContents .slider .slide2 .img {
  margin-bottom: calc(14*var(--content-scale-q));
  width: calc(437*var(--content-scale-q));
}
#mainContents .slider .slide3 .img {
  margin-bottom: calc(18*var(--content-scale-q));
  width: calc(496*var(--content-scale-q));
}
#mainContents .slider .slide4 .img {
  margin-bottom: calc(30*var(--content-scale-q));
  width: calc(298*var(--content-scale-q));
}

#mainContents .slider .swiper-pagination {
  margin-top: calc(24*var(--content-scale-q));
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(24*var(--content-scale-q));
  height: calc(14*var(--content-scale-q));
}
#mainContents .slider .swiper-pagination .swiper-pagination-bullet {
  margin: 0;
  border-radius: 100%;
  display: block;
  width: calc(14*var(--content-scale-q));
  height: calc(14*var(--content-scale-q));
  background-color: #fff !important;
  opacity: 1 !important;
}
#mainContents .slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #4dbdf0 !important;
}
#mainContents .slider .swiper-button-next,
#mainContents .slider .swiper-button-prev {
  top: calc(340*var(--content-scale-q));
  width: calc(57*var(--content-scale-q));
}
#mainContents .slider .swiper-button-next {
  right: calc(-21*var(--content-scale-q));
}
#mainContents .slider .swiper-button-prev {
  left: calc(-21*var(--content-scale-q));
}
#mainContents .slider .swiper-button-next::after,
#mainContents .slider .swiper-button-prev::after {
  display: none !important;
}





/* sec3 */
#mainContents #sec3 {
  padding-top: calc(34*var(--content-scale-p));
}
#mainContents .cpDetail {
  margin: 0 auto calc(45*var(--content-scale-p));
  position: relative;
  width: calc(667*var(--content-scale-p));
  height: calc(756*var(--content-scale-q));
  background: url(/kojin/hiraku/cam/summer_campaign2026/images/bg_cp_detail.png) top center / 100% auto no-repeat;
}
#mainContents .cpDetail::before {
  content: "";
  display: block;
  position: absolute;
  top:  calc(-80*var(--content-scale-q));
  right: calc(-50*var(--content-scale-q));
  width: calc(149*var(--content-scale-q));
  height: calc(202*var(--content-scale-q));
  background: url(/kojin/hiraku/cam/summer_campaign2026/images/treat_cp_detail.png) top center / contain no-repeat;
  pointer-events: none;
}
#mainContents .cpDetailTitle {
  margin: 0 0 calc(-27*var(--content-scale-q)) calc(99*var(--content-scale-q));
  width: calc(465*var(--content-scale-q));
  transform: translateY(calc(-34*var(--content-scale-q)));
}
#mainContents .cpDetailTable {
  margin: 0 auto;
  width: calc(630*var(--content-scale-q));
}
#mainContents .cpDetailCalendar {
  margin: 0 auto calc(42*var(--content-scale-p));
  width: calc(667*var(--content-scale-p));
}





/* sec4 */
#mainContents .clubMerit {
  padding-bottom: calc(50*var(--content-scale-p));
  background-color: #eef6dd;
}
#mainContents .clubMeritTitle {
  margin: 0 auto;
  width: calc(667*var(--content-scale-p));
}
#mainContents .clubMeritPoint {
  margin: calc(64*var(--content-scale-p)) auto 0;
  border-radius: calc(28*var(--content-scale-q));
  width: calc(667*var(--content-scale-p));
  background-color: #fff;
}
#mainContents .clubMeritPointLabel {
  margin-bottom: calc(38*var(--content-scale-p));
  transform: translateY(calc(-20*var(--content-scale-q)));
}
#mainContents .clubMeritPoint .notice {
  margin: 0 calc(30*var(--content-scale-q));
}
#mainContents .clubMeritPoint .notice li {
  line-height: 1.3888888888888888;
  font-size: calc(18*var(--content-scale-q));
  font-weight: 500;
}


#mainContents .point01 {
  padding-bottom: calc(60*var(--content-scale-q));
}
#mainContents .point01 .txt01 {
  margin: 0 0 calc(30*var(--content-scale-q)) calc(20*var(--content-scale-q));
  width: calc(520*var(--content-scale-q));
}
#mainContents .point01 .txt02 {
  margin: 0 auto;
  width: calc(469*var(--content-scale-q));
}
#mainContents .point01 .txt03 {
  margin: calc(20*var(--content-scale-q)) auto calc(12*var(--content-scale-q));
  width: calc(627*var(--content-scale-q));
}
#mainContents .point01 .txt04 {
  margin: 0 auto;
  width: calc(627*var(--content-scale-q));
}
#mainContents .point01 .txt05 {
  margin: calc(35*var(--content-scale-q)) auto calc(16*var(--content-scale-q));
  width: calc(455*var(--content-scale-q));
}
#mainContents .point01 .txt06 {
  margin: 0 auto;
  width: calc(627*var(--content-scale-q));
}
#mainContents .point01 .txt07 {
  margin: calc(12*var(--content-scale-q)) auto calc(41*var(--content-scale-q));
  width: calc(627*var(--content-scale-q));
}
#mainContents .point01 .btn {
  margin: 0 auto;
  width: calc(569*var(--content-scale-q));
}
#mainContents .point02 {
  padding-bottom: calc(60*var(--content-scale-q));
}
#mainContents .point02 .txt01 {
  margin: 0 auto calc(10*var(--content-scale-q));
  width: calc(623*var(--content-scale-q));
}
#mainContents .point02 .btn {
  margin: calc(30*var(--content-scale-q)) auto 0;
  width: calc(569*var(--content-scale-q));
}
#mainContents .point03 {
  padding-bottom: calc(30*var(--content-scale-q));
}
#mainContents .point03 .txt01 {
  margin: 0 auto calc(10*var(--content-scale-q));
  width: calc(624*var(--content-scale-q));
}




/* sec5 */
#mainContents .faq {
  padding: calc(40*var(--content-scale-p)) 0;
}
#mainContents .faq .faqBlock {
  margin: 0 auto;
  width: calc(668*var(--content-scale-q));
}
#mainContents .faq .faqBlock + .faqBlock {
  margin-top: calc(30*var(--content-scale-p)) ;
}
#mainContents .faq .faqBlock .faqTtl {
  padding: calc(7*var(--content-scale-q)) 0 calc(5*var(--content-scale-q)) calc(20*var(--content-scale-q));
  border-radius: calc(10*var(--content-scale-q));
  position: relative;
  color: #fff;
  background-color: #00a67b;
  font-size: calc(26*var(--content-scale-q));
  font-weight: 700;
  cursor: pointer;
}
#mainContents .faq .faqBlock .faqTtl::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(21*var(--content-scale-q));
  right: calc(21*var(--content-scale-q));
  width: calc(20*var(--content-scale-q));
  height: calc(12*var(--content-scale-q));
  background: url(/kojin/hiraku/cam/summer_campaign2026/images/toggle_arrow.svg) 0 0 / contain no-repeat;
}
#mainContents .faq .faqBlock.active .faqTtl::after {
  transform: rotate(180deg);
}
#mainContents .faq .faqBlock .faqCont {
  padding: calc(12*var(--content-scale-q)) calc(20*var(--content-scale-q)) 0;
}
#mainContents .faq .faqBlock .faqCont .liSt1 > li {
  padding-left: 1me;
  text-indent: -1em;
  line-height: 1.3181818181818181;
  letter-spacing: 0.02em;
  font-size: calc(22*var(--content-scale-q));
  font-weight: 500;
}
#mainContents .faq .faqBlock .faqCont .liSt1 > li::first-letter {
  color: #33b895;
}
#mainContents .cpPrecautions .txt {
  margin: 0 auto;
  padding-bottom: calc(40*var(--content-scale-p));
  width: calc(668*var(--content-scale-q));
  line-height: 1.7142857142857142;
  font-size: calc(21*var(--content-scale-q));
  font-weight: 500;
}



/* ---------------------------------------------
#pageFooter
--------------------------------------------- */
#pageFooter {
  margin-bottom: calc(146*var(--content-scale-q));
  padding: calc(28*var(--content-scale-q)) 0;
  position: relative;
  z-index: 1;
  background-color: #0d3bbc;
  text-align: center;
}
#pageFooter .copyright {
  line-height: 1.25;
  color: #fff;
  font-size: calc(20*var(--content-scale-q));
  font-weight: 500;
}

/* ---------------------------------------------
#fixedBtn
--------------------------------------------- */
.fixedBtn {
  width: 100%;
  width: calc(767*var(--content-scale-q));
  height: calc(146*var(--content-scale-q));
  background-color: #99d9f6 !important;
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 10;
  display: none;
  transform: translateX(-50%);
}
.fixedBtn .btnBlock {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: calc(12*var(--content-scale-p));
}
.fixedBtn .btnBlock .btn {
  width: calc(324*var(--content-scale-p));
}















/* ---------------------------------------------
pc only content
--------------------------------------------- */

.cpIntro {
  padding: 0 0 0 20px;
  position: fixed;
  top: 50%;
  right: calc(50% + 258px + 50px);
  z-index: 100;
  width: calc(455/1920*100%);
  max-width: min(475px,calc(50% - 258px - 50px));
  transform: translateY(-50%);
}
.cpIntro .cpIntroTitle {
}
.cpIntro .btn01 {
  margin: calc(20/455*100%) auto calc(10/455*100%);
  width: calc(440/455*100%);
}
.cpIntro .btn02 {
  margin: 0 auto calc(32/455*100%);
  width: calc(440/455*100%);
}
.cpIntro .cpIntroTxt {
  margin: 0 auto;
  width: calc(450/455*100%);
}


.gNav {
  position: fixed;
  top: 50%;
  left: calc(50% + 258px + 50px);
  transform: translateY(-50%);
  z-index: 100;
  width: calc(326/1920*100%);
  aspect-ratio: 326/441;
  max-width: 326px;
  background: url(/kojin/hiraku/cam/summer_campaign2026/images/bg_gnav.png) 0 0 / contain no-repeat;
}
.gNav .ttl {
  margin: 0 auto calc(34/326*100%);
  padding-top: calc(48/326*100%);
  width: calc(261/326*100%);
}
.gNav .nav {
}
.gNav .nav li {
  margin: calc(24/326*100%) 0 0 calc(40/326*100%);
}
.gNav .nav li a {
  position: relative;
}
.gNav .nav li a:before {
  content: '';
  margin-left: calc(-20/286*100%);
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  border-radius: 100%;
  width: calc(13/286*100%);
  aspect-ratio: 13/13;
  background-color: #f0eb45;
  transform: translateY(-50%);
  opacity: 0;
}
.gNav .nav li a:hover img {
  filter: brightness(0) saturate(100%)
    invert(89%)
    sepia(56%)
    saturate(1450%)
    hue-rotate(356deg)
    brightness(101%)
    contrast(89%);
}
.gNav .nav li a:hover:before {
  opacity: 1;
}
.gNav .nav li a[href="#pageTop"] img {
  width: calc(57/286*100%);
}
.gNav .nav li a[href="#sec1"] img {
  width: calc(258/286*100%);
}
.gNav .nav li a[href="#sec2"] img {
  width: calc(258/286*100%);
}
.gNav .nav li a[href="#sec3"] img {
  width: calc(187/286*100%);
}
.gNav .nav li a[href="#sec4"] img {
  width: calc(256/286*100%);
}
.gNav .nav li a[href="#sec5"] img {
  width: calc(115/286*100%);
}

.pcBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bg01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/kojin/hiraku/cam/summer_campaign2026/images/bg_cloud.png) left bottom / cover no-repeat;
}/*
.plane {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/kojin/hiraku/cam/summer_campaign2026/images/img_plane.png) top  right / cover no-repeat;
  animation: planeMove 16s linear infinite;
  will-change: transform;
}*/
.bg02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/kojin/hiraku/cam/summer_campaign2026/images/bg_tree.png) right bottom / cover no-repeat;
}
.btn01 a:hover img,
.btn02 a:hover img,
.cpEntry a:hover img,
.slide .btn a:hover img,
.btnBlock a:hover img,
.clubMerit .btn a:hover img {
  opacity: 0.7;
}
.plane {
  position: absolute;
  top: 50vh;
  left: 0;
  width: calc(620/1920*100%);
  aspect-ratio: 620/148;
  transform-origin: bottom right;
  transform: translateX(-100%);
  animation: planeMove 12s linear infinite;
}

@keyframes planeMove {
  from {
    transform: translate(-100%, 0);
  }
  to {
    transform: translate(400%, -500%);
  }
}


/* ---------------------------------------------
SP
--------------------------------------------- */

@media screen and (max-width:1000px) {
  .cpIntro,.gNav {
    display: none;
  }
}
@media screen and (max-width:767px) {
  .lifeplan_seminar {
    width: 100%;
    max-width: inherit;
    min-width: inherit;
  }
  .gNav {
    display: none;
  }
  .pcBg {
    display: none;
  }
}