@charset "UTF-8";

/*---------------------------------
  Design Tokens / Variables
---------------------------------*/
:root {

  /* ===============================
     PCサイズ変換ルール
     ─────────────────────────
     デザイン基準：1920px
     実装：vwベースで可変
     使用例：
     45px → calc(45 * var(--pc))
     =============================== */
  --pc-base: 1920;

  /* ===============================
     SPサイズ変換ルール（可変）
     ─────────────────────────
     デザイン基準：750px（Illustrator）
     ※ 750pxは375px実機想定の2倍データ

     ポイント：
     ・単位なしscaleは使わず「長さ(px相当)」として持つ
     ・viewport幅に応じて自然に拡縮される
     =============================== */
  --sp-design-base: 750;

  /* カラーの定義 */
  --maincolor: #f26522;

  /* 1デザインpx（PC）= 100vw/1920 の“長さ” */
  --pc: calc(100vw / var(--pc-base));
}

/* SP時のみ 1デザインpx（SP）= 100vw/750 の“長さ” を定義 */
@media (max-width: 768px) {
  :root {
    --sp: calc(100vw / var(--sp-design-base));

    /*
      使用例：
      32px → calc(32 * var(--sp))
      80px → calc(80 * var(--sp))

      ※ 端末幅に応じて自動調整
    */
  }
}

/*---------------------------------
  Google Fonts
---------------------------------*/
.NotoSans { font-family: 'Noto Sans JP', sans-serif; }


/*---------------------------------
  表示・非表示（PC / TB / SP）
---------------------------------*/
.pconly {
	display: block;
}
.tbonly {
	display: block;
}
.sponly {
	display: none !important;
}
.pcnone {
	display: none;
}
@media (max-width: 768px) {
.pconly {
	display: none !important;
}
.tbonly {
	display: none !important;
}
.sponly {
	display: block;
}
.pcnone {
	display: inline-block;
}
.spnone {
	display: none;
}
}

/*---------------------------------
  html/bodyの設定
---------------------------------*/
html {
  font-size: 62.5%; /* 10px換算 */
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  overflow-x: clip;
}

body {
  color: #333333;
  background: #ffffff;

  /* 横はみ出し保険（clip対応環境ではclipが優先される） */
  overflow-x: hidden;
  overflow-x: clip;

  overflow-wrap: break-word;
}

/*---------------------------------
  リンク無効
---------------------------------*/
.pointereventsnone {    
   pointer-events: none;
}

/*---------------------------------
  画像
---------------------------------*/
img {
	width:100%;
	height:auto;
}
#maincontentswrap01 img {
   vertical-align:bottom;
}
#maincontentswrap01 a img {
	border-style:none;
}
#maincontentswrap01 img {
	width:100%;
	height:auto;
	image-rendering: auto;
}
#maincontentswrap01 img[src$=".svg"] {
    width: 100%;
}


/*---------------------------------
  テキストリンク
---------------------------------*/
a:link {
	color: var(--maincolor);
	text-decoration: underline;
	transition: 1.0s;
}
a:visited {
	color: var(--maincolor);
	text-decoration: underline;
	transition: 1.0s;
}
a:active {
	color: var(--maincolor);
	text-decoration: underline;
	opacity: 1;
	transition: 1.0s;
}
a:hover {
	color: var(--maincolor);
	text-decoration: underline;
	opacity: 0.8;
	transition: 1.0s;
}

/*---------------------------------
  画像リンク
---------------------------------*/
a img {
	display: block;
}
a:link img {
	display: block;
	opacity: 1.0;
	transition: all 0.8s ease;
}
a:visited img {
	opacity: 1.0;
	transition: all 0.8s ease;
}
a:hover img {
	opacity: 0.8;
	transition: all 0.8s ease;
}
a:active img {
	opacity: 0.8;
	transition: all 0.8s ease;
}

/*---------------------------------
  ボタン
---------------------------------*/
button {
	transition: all 0.8s ease;
}
button picture,
button img{
  opacity: 1.0;
	transition: all 0.8s ease;
}
button:hover {
  opacity: 1.0;
	transition: all 0.8s ease;
}
button:hover picture,
button:hover img{
  opacity: 0.8;
	transition: all 0.8s ease;
}


/*---------------------------------
  上付き文字
---------------------------------*/
.sup01 {
    font-size: 0.5em;
	vertical-align: middle;
    line-height: 160%;
}


/*---------------------------------
  フォントカラー
---------------------------------*/
.font-white01 { color: #ffffff; }
.font-blue01 { color: #009cff; }
.font-blue02 { color: #1c6ec2; }
.font-black01 { color: #000000; }
.font-red01 { color: #c83b39; }
.font-yellow01 { color: #fff338; }
.font-green01 { color: #009c37; }
.font-green02 { color: #6ac000; }
.font-orange01 { color: #ff7300; }


/*---------------------------------
  フォント太さ指定
---------------------------------*/
.font-thin100 {
    font-weight: 100;
}
.font-extralight200 {
    font-weight: 200;
}
.font-light300 {
    font-weight: 300;
}
.font-regular400 {
    font-weight: 400;
}
.font-medium500 {
    font-weight: 500;
}
.font-semibold600 {
    font-weight: 600;
}
.font-bold700 {
    font-weight: 700;
}
.font-extrabold800 {
    font-weight: 800;
}
.font-black900 {
    font-weight: 900;
}


/*---------------------------------
  テキスト頭揃え
---------------------------------*/
.indent01-01 {
	text-indent: -1em;
	padding: 0 0 0 1em;
}
.indent01-05 {
	text-indent: -1.5em;
	padding: 0 0 0 1.5em;
}
.indent02-05 {
	text-indent: -2.5em;
	padding: 0 0 0 2.5em;
}
.indent03-01 {
	text-indent: -3em;
	padding: 0 0 0 3em;
}

/*---------------------------------
  文字間調整用
---------------------------------*/
.letterspace01 {
	letter-spacing: -0.02em;
}

/*---------------------------------
  行間調整用
---------------------------------*/
.block {
    display: block;
}
.lineheight120 {
    line-height: 120% !important;
}
.lineheight140 {
    line-height: 140% !important;
}
.lineheight160 {
    line-height: 160% !important;
}
.lineheight200 {
    line-height: 200% !important;
}

/*---------------------------------
  行間調整用
---------------------------------*/
.underpadding10px {
    padding: 0 0 10px;
}

/*---------------------------------
  テキスト位置
---------------------------------*/
.textleft {
	text-align: left !important;
}
.textcenter {
	text-align: center !important;
}
.textright {
	text-align: right !important;
}

/*---------------------------------
  アンダーライン
---------------------------------*/
.underline01 {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 10px;
}

/*---------------------------------
  改行設定
---------------------------------*/
.break:before {
	content: "\A";
	white-space: pre;
}
.pcno-break:before {
	content: "";
	white-space: pre;
}
.spno-break:before {
	content: "\A";
	white-space: pre;
}
@media (max-width: 768px) {
.break:before {
	content: "\A";
	white-space: pre;
}
.pcno-break:before {
	content: "\A";
	white-space: pre;
}
.spno-break:before {
	content: "";
	white-space: pre;
}
}


/*---------------------------------
  ローディング無し：ページ出現だけ演出
---------------------------------*/
#wrapper{
  opacity: 0;
}

body.appear #wrapper{
  animation: PageAnimeAppear .6s ease forwards;
  opacity: 0;
}

@keyframes PageAnimeAppear{
  from { opacity: 0; }
  to   { opacity: 1; }
}


/*---------------------------------
  メインビジュアル
---------------------------------*/
#mainvisualwrap01 {
  width: 100%;
  position: relative;
}

#mainvisualwrap01 p {
  display: block;
  font-size: calc(26 * var(--pc));
  text-align: center;
  color: #ffffff;
  letter-spacing: 0.05em;
  background: var(--maincolor);
  padding: calc(5 * var(--pc));
}

.hero-title {
  margin: 0;
}

/*---------------------------------
  FV 比率制御
---------------------------------*/
.hero-title picture {
  display: block;
  width: 100%;
  position: relative;
}

.hero-title img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PC比率 */
@media (min-width: 769px) {
  .hero-title picture {
    aspect-ratio: 1920 / 580;
  }
}

/* SP比率 */
@media (max-width: 768px) {
  .hero-title picture {
    aspect-ratio: 375 / 686;
  }
}

/*---------------------------------
  メインビジュアル下部キャッチ
---------------------------------*/
#mainvisualcatchwrap01 {
  position: relative;
  display: block;
  font-size: calc(27 * var(--pc));
  font-weight: 600;
  text-align: center;
  color: #ffffff;
  line-height: 180%;
  letter-spacing: 0.05em;
  background: var(--maincolor);
  padding: calc(30 * var(--pc)) 0 calc(20 * var(--pc));
  margin: 0 0 calc(50 * var(--pc));
}

#mainvisualcatchwrap01 ul {
  display: block;
}

#mainvisualcatchwrap01 ul li {
  display: table;
  margin: 0 auto;
}

#mainvisualcatchwrap01 ul li:nth-child(1) p {
  display: inline;
  padding: 0.1em 0.3em;
  color: var(--maincolor);
  background: #ffffff;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: 3px;
}

/*---------------------------------
  PC三角
---------------------------------*/
#mainvisualcatchwrap01::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-30 * var(--pc));
  transform: translateX(-50%) translateY(-1px); /* 白ライン防止 */

  border-left: calc(30 * var(--pc)) solid transparent;
  border-right: calc(30 * var(--pc)) solid transparent;
  border-top: calc(30 * var(--pc)) solid var(--maincolor);
}

/*---------------------------------
  SP
---------------------------------*/
@media (max-width: 768px) {

  #mainvisualwrap01 p {
    font-size: calc(47 * var(--sp));
    padding: calc(15 * var(--sp));
  }

  #mainvisualcatchwrap01 {
    font-size: calc(38 * var(--sp));
    padding:
      calc(65 * var(--sp))
      calc(20 * var(--sp))
      calc(50 * var(--sp));
    margin: 0 0 calc(60 * var(--sp));
  }

  #mainvisualcatchwrap01 ul li:nth-child(1) p {
    line-height: 220%;
  }

  /* SP三角 */
  #mainvisualcatchwrap01::after {
    bottom: calc(-40 * var(--sp));
    transform: translateX(-50%) translateY(-1px); /* 白ライン防止 */

    border-left: calc(40 * var(--sp)) solid transparent;
    border-right: calc(40 * var(--sp)) solid transparent;
    border-top: calc(40 * var(--sp)) solid var(--maincolor);
  }
}


/*---------------------------------
  FV内バナー
---------------------------------*/
#fvbannerwrap01{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  padding: calc(20 * var(--pc));
  box-sizing: border-box;
}

#fvbannerwrap01 .floatbanner__title{
  font-size: calc(21 * var(--pc));
  font-weight: 600;
  text-align: center;
  padding: 0 0 calc(15 * var(--pc)) 0;
}

#fvbannerwrap01 .floatbanner__cta{
  display: flex;
  justify-content: space-between;
  gap: calc(15 * var(--pc));
  width: 100%;
  max-width: calc(645 * var(--pc));
  margin: 0 auto;
  box-sizing: border-box;
}

/*---------------------------------
  固定フロート
---------------------------------*/
#floatbannerwrap01{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  background: rgba(255, 255, 255, 0.9);
  padding: calc(20 * var(--pc));
  box-sizing: border-box;

  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform .82s cubic-bezier(.22,1,.36,1),
    opacity .22s ease;
  will-change: transform, opacity;

  overflow-x: clip;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#floatbannerwrap01.is-hidden{
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  pointer-events: none;
}

#floatbannerwrap01.is-preparing{
  visibility: hidden;
  transition: none !important;
}

#floatbannerwrap01.is-leaving{
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  pointer-events: none;
}

#floatbannerwrap01 .floatbanner__title{
  font-size: calc(21 * var(--pc));
  font-weight: 600;
  text-align: center;
  padding: 0 0 calc(15 * var(--pc)) 0;
}

#floatbannerwrap01 .floatbanner__cta{
  display: flex;
  justify-content: space-between;
  gap: calc(15 * var(--pc));
  width: 100%;
  max-width: calc(645 * var(--pc));
  margin: 0 auto;
  box-sizing: border-box;
}

/*---------------------------------
  共通CTA
---------------------------------*/
#fvbannerwrap01 .floatbanner__cta button,
#floatbannerwrap01 .floatbanner__cta button{
  display: block;
  flex: 0 0 calc(315 * var(--pc));
  max-width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  filter: drop-shadow(4px 4px 2px rgba(0,0,0,0.3));
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  will-change: transform;
}

#fvbannerwrap01 .floatbanner__cta button:active,
#fvbannerwrap01 .floatbanner__cta button:focus,
#floatbannerwrap01 .floatbanner__cta button:active,
#floatbannerwrap01 .floatbanner__cta button:focus{
  filter: drop-shadow(4px 4px 2px rgba(0,0,0,0.3));
  outline: none;
}

#fvbannerwrap01 .floatbanner__cta a,
#floatbannerwrap01 .floatbanner__cta a{
  display: block;
  flex: 0 0 calc(315 * var(--pc));
  max-width: 100%;
  filter: drop-shadow(4px 4px 2px rgba(0,0,0,0.3));
}

#fvbannerwrap01 .floatbanner__cta a:hover,
#floatbannerwrap01 .floatbanner__cta a:hover{
  opacity: 0.8 !important;
}

#fvbannerwrap01 .floatbanner__cta img,
#fvbannerwrap01 .floatbanner__cta picture,
#floatbannerwrap01 .floatbanner__cta img,
#floatbannerwrap01 .floatbanner__cta picture{
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 769px){
  #floatbannerwrap01{
    transition:
      transform .98s cubic-bezier(.22,1,.36,1),
      opacity .38s ease;
  }

  #floatbannerwrap01.is-leaving{
    transform: translate3d(0, 100%, 0);
  }
}

@media (max-width: 768px){
  #fvbannerwrap01{
    padding: calc(30 * var(--sp));
  }

  #fvbannerwrap01 .floatbanner__title{
    font-size: calc(35 * var(--sp));
    padding: 0 0 calc(25 * var(--sp)) 0;
  }

  #fvbannerwrap01 .floatbanner__cta{
    max-width: calc(642 * var(--sp));
    gap: calc(22 * var(--sp));
  }

  #floatbannerwrap01{
    padding: calc(30 * var(--sp));
    transition:
      transform .72s cubic-bezier(.22,1,.36,1),
      opacity .2s ease;
  }

  #floatbannerwrap01 .floatbanner__title{
    font-size: calc(35 * var(--sp));
    padding: 0 0 calc(25 * var(--sp)) 0;
  }

  #floatbannerwrap01 .floatbanner__cta{
    max-width: calc(642 * var(--sp));
    gap: calc(22 * var(--sp));
  }

  #fvbannerwrap01 .floatbanner__cta button,
  #fvbannerwrap01 .floatbanner__cta a,
  #floatbannerwrap01 .floatbanner__cta button,
  #floatbannerwrap01 .floatbanner__cta a{
    flex-basis: calc(310 * var(--sp));
  }
}


/*---------------------------------
  メインコンテンツ
---------------------------------*/
#maincontentswrap01 {
    width: 100%;
    margin: 0 auto;
    font-size: calc(19 * var(--pc));
    line-height: 160%;
    position: relative;
}
@media (max-width: 768px) {
#maincontentswrap01 {
    width: 100%;
    margin: 0 auto;
    font-size: calc(21 * var(--sp));
    line-height: 160%;
    position: relative;
}
}


/*---------------------------------
  国民年金とは別物なんです
---------------------------------*/
.differentwrap01 {
    padding: 0 0 calc(50 * var(--pc));
    position: relative;
}
.differenttitle01 {
  font-size: calc(42 * var(--pc));
  font-weight: 600;
  line-height: 140%;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 0 0 calc(65 * var(--pc));
}
.differenttitle01 span {
  font-size: calc(60 * var(--pc));
  font-weight: 600;
  letter-spacing: 0.05em;
}
.differenttitle01 span:nth-child(3) {
  margin: 0 0 0 -0.15em;
  color: var(--maincolor);
}
.differentcontentswrap01 {
  display: block;
  width: calc(720 * var(--pc));
  margin: 0 auto;
}
.differentcontentswrap02 {
  display: block;
  background: #f2f2f3;
  padding: calc(68 * var(--pc)) calc(57 * var(--pc)) calc(50 * var(--pc));
  border-radius: calc(30 * var(--pc));
  font-size: calc(21 * var(--pc));
  font-weight: 400;
  line-height: 180%;
  text-align: center;
}
.differentcontentsinner01 {
  display: block;
  margin: 0 0 calc(24 * var(--pc));
}
.differentcontentsinner01:last-child {
  margin: 0;
}
.differentcontentstitle01 {
  display: block;
}
.differentcontentstitle02 {
  font-size: calc(31 * var(--pc));
  font-weight: 600;
  text-align: center;
}
.differentcontentstriviawrap01 {
  display: block;
  width: calc(720 * var(--pc));
  margin: 0 auto;
}
.differentattention01 {
  font-size: calc(12 * var(--pc));
}
ul.differentcontentsattention01 {
  display: block;
  padding: calc(60 * var(--pc)) 0 0;
}
ul.differentcontentsattention01 li {
  display: table;
  margin: 0 auto;
  text-align: center;
}
ul.differentcontentsattention01 li:nth-child(1) {
  font-size: calc(29 * var(--pc));
  font-weight: 600;
  color: var(--maincolor);
}
ul.differentcontentsattention01 li:nth-child(3) {
  font-size: calc(21 * var(--pc));
  font-weight: 400;
  line-height: 180%;
}
ul.differentcontentsattention01 li:nth-child(4) {
  line-height: 120%;
}
.differentphoto01 {
  display: inline-block;
  transform: rotate(-4deg);
  transform-origin: center;
}
@media (max-width: 768px) {
.differentwrap01 {
    padding: 0 0 calc(80 * var(--sp));
    position: relative;
}
.differenttitle01 {
  font-size: calc(62 * var(--sp));
  font-weight: 600;
  line-height: 140%;
  letter-spacing: 0.1em;
  text-align: center;
    padding: 0 0 calc(77 * var(--sp));
}
.differenttitle01 span {
  font-size: calc(88 * var(--sp));
  font-weight: 600;
  letter-spacing: 0.05em;
}
.differenttitle01 span:nth-child(3) {
  margin: 0 0 0 -0.15em;
  color: var(--maincolor);
}
.differentcontentswrap01 {
  display: block;
  width: calc(656 * var(--sp));
  margin: 0 auto;
}
.differentcontentswrap02 {
  display: block;
  background: #f2f2f3;
  padding: calc(82 * var(--sp)) calc(22 * var(--sp)) calc(35 * var(--sp));
  border-radius: calc(32 * var(--sp));
  font-size: calc(32 * var(--sp));
  font-weight: 400;
  line-height: 180%;
  text-align: center;
}
.differentcontentsinner01 {
  display: block;
  margin: 0 0 calc(45 * var(--sp));
}
.differentcontentsinner01:last-child {
  margin: 0;
}
.differentcontentstitle01 {
  display: block;
}
.differentcontentstitle02 {
  font-size: calc(47 * var(--sp));
  font-weight: 600;
  text-align: center;
}
.differentcontentstriviawrap01 {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.differentattention01 {
  font-size: calc(21 * var(--sp));
}
ul.differentcontentsattention01 {
  display: block;
  padding: calc(105 * var(--sp)) 0 0;
}
ul.differentcontentsattention01 li {
  display: table;
  margin: 0 auto;
  text-align: center;
}
ul.differentcontentsattention01 li:nth-child(1) {
  font-size: calc(41 * var(--sp));
  font-weight: 600;
  color: var(--maincolor);
}
ul.differentcontentsattention01 li:nth-child(3) {
  font-size: calc(32 * var(--sp));
  font-weight: 400;
  line-height: 180%;
}
ul.differentcontentsattention01 li:nth-child(4) {
  width: 70%;
  text-align: left;
  line-height: 120%;
  padding: calc(30 * var(--sp)) 0 0;
}
.differentphoto01 {
  display: inline-block;
  transform: rotate(-4deg);
  transform-origin: center;
}
}

/*---------------------------------
  マーカー
---------------------------------*/
/* マーカー見出し */
.markerTitle{
  margin: 0;
}

/* 文字を包むspanにマーカーを描く */
.markerTitle__inner{
  display: inline;
  position: relative;

  /* 少しはみ出す（左右） */
  padding: 0 .25em;

  /* 2行のときも行ごとに背景を複製 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

  /* マーカー（下側だけ塗る） */
  background-image: linear-gradient(transparent 68%, #ffde64 68%);
  background-repeat: no-repeat;
  background-position: left bottom;

  /* 伸びるアニメ（初期は0%） */
  background-size: 0% 100%;
  transition: background-size .55s ease-out;
}

/* スクロールで入ったら伸ばす */
.markerTitle.is-inview .markerTitle__inner{
  background-size: 100% 100%;
}

/* 動きを控えたい設定の人向け */
@media (prefers-reduced-motion: reduce){
  .markerTitle__inner{
    transition: none;
    background-size: 100% 100%;
  }
}


/*---------------------------------
  シミュレーション
---------------------------------*/
#simulationwrap01 {
    width: calc(645 * var(--pc));
    margin: 0 auto;
    padding: calc(50 * var(--pc)) 0 calc(100 * var(--pc));
    position: relative;
}
#simulationwrap02 {
    width: 100%;
    padding: calc(50 * var(--pc)) calc(45 * var(--pc));
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
    position: relative;
}
.simulationtitle01 {
    display: table;
    margin: 0 auto calc(33 * var(--pc));
    font-size: calc(27 * var(--pc));
    font-weight: 600;
    text-align: center;
    line-height: 140%;
}
.simulationtitle01::before {
    display: table-cell;
    width: calc((calc(27 * var(--pc))) + 1em);
    padding: 0 1em 0 0;
    content: url(../img/ad_01/simulationtitleframe01.svg);
    vertical-align: bottom;
}
.simulationtitle01::after {
    display: table-cell;
    width: calc((calc(27 * var(--pc))) + 1em);
    padding: 0 1em 0 0;
    content: url(../img/ad_01/simulationtitleframe01.svg);
    vertical-align: bottom;
    transform: scaleX(-1);
}
.simulationtitle02 {
    display: table;
    margin: 0 auto calc(37 * var(--pc));
    font-size: calc(28 * var(--pc));
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    background: #f26522;
    padding: 0.4em 1em;
    border-radius: 50px;
}
.simulationtitle02 span {
    display: inline-block;
    font-size: calc(32 * var(--pc));
    vertical-align: top;
}
.simulationtitle03 {
    display: table;
    margin: 0 auto calc(45 * var(--pc));
}
.simulationtitle03 p {
    font-size: calc(34 * var(--pc));
    font-weight: 500;
    color: #f26522;
    text-align: center;
    line-height: 120%;
}
.simulationtitle03 p:nth-child(1) {
    font-size: calc(28 * var(--pc));
}
@media (max-width: 768px) {
#simulationwrap01 {
    width: calc(686 * var(--sp));
    margin: 0 auto;
    padding: calc(50 * var(--sp)) 0;
    position: relative;
}
#simulationwrap02 {
    width: 100%;
    padding: calc(55 * var(--sp)) calc(35 * var(--sp));
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
    position: relative;
}
.simulationtitle01 {
    display: table;
    margin: 0 auto calc(55 * var(--sp));
    font-size: calc(34 * var(--sp));
    font-weight: 600;
    text-align: center;
    line-height: 140%;
}
.simulationtitle01::before {
    display: table-cell;
    width: calc((calc(35 * var(--sp))) + 1em);
    padding: 0 1em 0 0;
    content: url(../img/ad_01/simulationtitleframe01.svg);
    vertical-align: bottom;
}
.simulationtitle01::after {
    display: table-cell;
    width: calc((calc(35 * var(--sp))) + 1em);
    padding: 0 1em 0 0;
    content: url(../img/ad_01/simulationtitleframe01.svg);
    vertical-align: bottom;
    transform: scaleX(-1);
}
.simulationtitle02 {
    display: table;
    margin: 0 auto calc(72 * var(--sp));
    font-size: calc(32 * var(--sp));
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    background: #f26522;
    padding: 0.5em 1.5em;
    border-radius: 50px;
}
.simulationtitle02 span {
    display: inline-block;
    font-size: calc(36 * var(--sp));
    vertical-align: top;
}
.simulationtitle03 {
    display: table;
    margin: 0 auto calc(92 * var(--sp));
}
.simulationtitle03 p {
    font-size: calc(44 * var(--sp));
    font-weight: 500;
    color: #f26522;
    text-align: center;
    line-height: 120%;
}
.simulationtitle03 p:nth-child(1) {
    font-size: calc(34 * var(--sp));
    padding: 0 0 5px;
}
}


/*---------------------------------
  シミュレーションフォーム
---------------------------------*/
#simulationwrap01 {
  --accent:#f26522;
  --border:#000000;
  --text:#333333;
  --gap:16px;
  --stroke:1px;
  --h:44px; /* コントロールの高さ */
}

.zk-form{
  background:#fff;
  color:var(--text);
}

.zk-form__inner{
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* ===== 見出し ===== */
.zk-field{ margin-top: calc(50 * var(--pc)); }
.zk-field:first-child{ margin-top: 0; }

.zk-field__label{
  font-weight: 500;
  font-size: calc(20 * var(--pc));
  line-height: 1.2;
  margin-bottom: 14px;
}
.zk-field__sub{
  font-weight: 500;
  font-size: calc(20 * var(--pc));
}

/* ===== ラジオ ===== */
.zk-radioGroup{
  display:flex;
  gap: clamp(24px, 6vw, 80px);
  align-items:center;
  flex-wrap: wrap; /* 小さい幅でも折り返してはみ出し防止 */
}

.zk-radio{
  display:inline-flex;
  align-items:center;
  gap: 14px;
  cursor:pointer;
  user-select:none;
}

.zk-radio__input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.zk-radio__ui{
  width: calc(35 * var(--pc));
  height: calc(35 * var(--pc));
  border: var(--stroke) solid var(--border);
  border-radius: 999px;
  display:grid;
  place-items:center;
  transition: box-shadow .18s ease, border-color .18s ease;
}

/* 中の●（“枠ふわっとだけ”にしたいなら下の::after消す） */
.zk-radio__ui::after{
  content:"";
  width: calc(14 * var(--pc));
  height: calc(14 * var(--pc));
  border-radius: 999px;
  background: var(--accent);
  transform: scale(0);
  transition: transform .16s ease;
}

/* 選択時：枠ふわっと（リング）だけ + 枠色も寄せる */
.zk-radio__input:checked + .zk-radio__ui{
  border-color: var(--accent);
  box-shadow: 0 0 0 7px rgba(242,101,34,.18);
}
.zk-radio__input:checked + .zk-radio__ui::after{
  transform: scale(1);
}

/* キーボードフォーカスも同じ“ふわっと” */
.zk-radio__input:focus-visible + .zk-radio__ui{
  border-color: var(--accent);
  box-shadow: 0 0 0 7px rgba(242,101,34,.18);
}

.zk-radio__text{
  font-weight: 500;
  font-size: calc(20 * var(--pc));
  letter-spacing: .18em;
  white-space: nowrap;
}

/* ===== セレクト（共通） ===== */
.zk-select{
  position: relative;
  display: block;
  width: 100%;
}

.zk-select__control{
  width: 100%;
  height: var(--h);
  padding: 0 calc(32 * var(--pc)) 0 calc(10 * var(--pc));

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  border: var(--stroke) solid var(--border);
  border-radius: 0;
  background:#fff;
  color: var(--text);

  font-weight: 500;
  font-size: calc(20 * var(--pc));
  outline: none;
  box-sizing: border-box;

  transition: box-shadow .18s ease, border-color .18s ease;
}

.zk-select__arrow{
  position:absolute;
  right: calc(16 * var(--pc));
  top: 50%;
  width: calc(10 * var(--pc));
  height: calc(10 * var(--pc));
  transform: translateY(-60%) rotate(45deg);
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  pointer-events:none;
}

/* “枠ふわっとオレンジ”だけ */
.zk-select__control:focus-visible{
  border-color: var(--accent);
  box-shadow: 0 0 0 7px rgba(242,101,34,.18);
}

/* ===== 生年月日：はみ出しゼロの可変グリッド ===== */
/* PC：1行で 4つ + 年/月/日 を “セルの中”で管理してはみ出さない */
.zk-birth{
  display:grid;
  gap: var(--gap);
  align-items:center;

  /* 4つのselect列。全部 minmax(0, 1fr) で 100%内に必ず収まる */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 各アイテム内：select + suffix を横並び */
.zk-birth__item{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0; /* 重要：中身のはみ出し防止 */
}

/* 元号は suffix なし */
.zk-birth__item--gengo .zk-birth__suffix{ display:none; }

.zk-birth__suffix{
  font-weight: 500;
  font-size: calc(24 * var(--pc));
  white-space: nowrap;
}

/* ご希望掛金額：中央寄せっぽく */
.zk-select--wide .zk-select__control{
  text-align:center;
  padding-left: calc(60 * var(--pc));
  padding-right: calc(60 * var(--pc));
}

/* ===== SP：2段（元号+年 / 月+日） ===== */
@media (max-width: 768px) {
/* ===== 見出し ===== */
.zk-field{ margin-top: calc(67 * var(--sp)); }
.zk-field:first-child{ margin-top: 0; }

.zk-field__label{
  font-size: calc(32 * var(--sp));
}
.zk-field__sub{
  font-weight: 500;
  font-size: calc(32 * var(--sp));
}
.zk-radio__text{
  font-weight: 500;
  font-size: calc(32 * var(--sp));
  letter-spacing: .18em;
  white-space: nowrap;
}

.zk-radio__ui{
  width: calc(70 * var(--sp));
  height: calc(70 * var(--sp));
  border: var(--stroke) solid var(--border);
  border-radius: 999px;
  display:grid;
  place-items:center;
  transition: box-shadow .18s ease, border-color .18s ease;
}

/* 中の●（“枠ふわっとだけ”にしたいなら下の::after消す） */
.zk-radio__ui::after{
  content:"";
  width: calc(35 * var(--sp));
  height: calc(35 * var(--sp));
  border-radius: 999px;
  background: var(--accent);
  transform: scale(0);
  transition: transform .16s ease;
}

.zk-select__control{
  width: 100%;
  height: var(--h);
  padding: 0 calc(35 * var(--sp)) 0 calc(15 * var(--sp));

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  border: var(--stroke) solid var(--border);
  border-radius: 0;
  background:#fff;
  color: var(--text);

  font-weight: 500;
  font-size: calc(32 * var(--sp));
  outline: none;
  box-sizing: border-box;

  transition: box-shadow .18s ease, border-color .18s ease;
}

.zk-select__arrow{
  position:absolute;
  right: calc(15 * var(--sp));
  top: 50%;
  width: calc(20 * var(--sp));
  height: calc(20 * var(--sp));
  transform: translateY(-60%) rotate(45deg);
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  pointer-events:none;
}

  .zk-birth{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 元号と年が1段目、月と日が2段目 */
  .zk-birth__item--gengo{ grid-column: 1 / 2; }
  .zk-birth__item--year { grid-column: 2 / 3; }
  .zk-birth__item--month{ grid-column: 1 / 2; }
  .zk-birth__item--day  { grid-column: 2 / 3; }

  .zk-radio__ui{ width: 38px; height: 38px; }
  .zk-select__control{ font-size: calc(32 * var(--sp)); }
/* ご希望掛金額：中央寄せっぽく */
.zk-select--wide .zk-select__control{
  text-align:center;
  padding-left: calc(55 * var(--sp));
  padding-right: calc(55 * var(--sp));
}
  .zk-birth__suffix{
  font-weight: 500;
  font-size: calc(38 * var(--sp));
  white-space: nowrap;
}
}

/* さらに狭い端末：文字サイズだけ少し落として詰める */
@media (max-width: 360px){
  .zk-select__control{ font-size: 20px; }
  .zk-birth__suffix{ font-size: 22px; }
}


/*---------------------------------
  シミュレーション詳細
---------------------------------*/

/* ブロック余白（フォーム下との間） */
.zk-out{
  margin-top: 18px;
}

/* ===== アコーディオン ===== */

/* 共通：ボタン全体は透明のまま中央寄せ */
.zk-acc__btn{
  width:100%;
  display:flex;
  justify-content:center;
  border:none;
  background:transparent;
  padding: 10px 0 0;
  cursor:pointer;
}

/* ---------------------------
  ① 結果を見る（オレンジ）
--------------------------- */
.zk-acc__btnPrimary{
  min-width: calc(400 * var(--pc));
  padding: calc(20 * var(--pc)) calc(40 * var(--pc));
  background: var(--accent);
  color:#fff;
  border-radius: 8px;

  position: relative; /* ←矢印を右端固定するため */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* ラベル（中央） */
.zk-acc__btnLabel{
  font-size: calc(28 * var(--pc));
  font-weight: 600;
  letter-spacing: .02em;
}

/* 矢印（共通形状） */
.zk-acc__chev{
  position:absolute;
  top:50%;
  right: calc(46 * var(--pc));
  width: calc(20 * var(--pc));
  height: calc(20 * var(--pc));
  pointer-events:none;

  border-right: calc(3 * var(--pc)) solid currentColor;
  border-bottom: calc(3 * var(--pc)) solid currentColor;

  transform: translateY(-60%) rotate(45deg); /* ∨ */
  transition: transform .18s ease;
}

/* オレンジボタンの矢印色＝白 */
.zk-acc__btnPrimary .zk-acc__chev{
  color:#fff; /* currentColor を白に */
}

/* 開いたら上向き（∧） */
.zk-acc__btn[aria-expanded="true"] .zk-acc__btnPrimary .zk-acc__chev{
  transform: translateY(-40%) rotate(-135deg);
}

/* ---------------------------
  ② プラン詳細を見る（白枠）
--------------------------- */
.zk-acc__ghostInner{
  width: 100%;
  border: 1px solid #595757;
  background:#fff;
  border-radius: 8px;
  padding: calc(10 * var(--pc)) 0;
  position: relative; /* ←矢印を右端固定するため */

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* ラベル */
.zk-acc__ghostLabel{
  font-size: calc(20 * var(--pc));
  font-weight: 600;
  letter-spacing: .02em;
  color:#5a5a5a;
}

/* 白枠ボタンの矢印（オレンジ） */
.zk-acc__ghostInner .zk-acc__chevGhost{
  position:absolute;
  top:50%;
  right: calc(46 * var(--pc));
  width: calc(20 * var(--pc));
  height: calc(20 * var(--pc));
  pointer-events:none;

  border-right: calc(4 * var(--pc)) solid var(--accent);
  border-bottom: calc(4 * var(--pc)) solid var(--accent);

  transform: translateY(-60%) rotate(45deg); /* ∨ */
  transition: transform .18s ease;
  display:block;
}

/* 開いたら上向き（∧） */
.zk-acc__btn[aria-expanded="true"] .zk-acc__ghostInner .zk-acc__chevGhost{
  transform: translateY(-40%) rotate(-135deg);
}

/* ---------------------------
  SP（750px基準）※必要なら微調整
--------------------------- */
@media (max-width: 768px) {

  .zk-acc__btnPrimary{
    min-width: 76vw;
    padding: calc(38 * var(--sp)) 6vw;
    border-radius: 8px;
  }

  .zk-acc__btnLabel{
    font-size: calc(32 * var(--sp));
  }

  .zk-acc__chev{
    right: 6vw;
    width: 4vw;
    height: 4vw;
    border-right: 0.8vw solid currentColor;
    border-bottom: 0.8vw solid currentColor;
  }

  .zk-acc__ghostInner{
    padding: 4.8vw 0;
  }

  .zk-acc__ghostLabel{
    font-size: calc(33 * var(--sp));
  }

  .zk-acc__ghostInner .zk-acc__chevGhost{
    right: 6vw;
    width: 4vw;
    height: 4vw;
    border-right: 0.9vw solid var(--accent);
    border-bottom: 0.9vw solid var(--accent);
  }
}

.zk-acc__panel{
  padding-top: 18px;
}

/* ===== 結果エリア ===== */
.zk-result{
  text-align:center;
  padding: 16px 4px 10px;
}

.zk-result__icon{
    width: calc(106 * var(--pc));
    margin: 0 auto calc(30 * var(--pc));
}
.zk-result__title{
    margin: 0 0 calc(55 * var(--pc));
    color: var(--accent);
    font-weight: 500;
    font-size: calc(34 * var(--pc));
}

.zk-result__lead{
    margin: 0 0 calc(24 * var(--pc));
    font-size: calc(30 * var(--pc));
    font-weight: 600;
    line-height: 120%;
    color:#5a5a5a;
}
.zk-result__number{
    font-size: calc(50 * var(--pc));
    font-weight: 600;
}
.zk-result__note{
    font-size: calc(18 * var(--pc));
    font-weight: 400;
}


.zk-result__sumBox{
    background: #ffeca6;
    padding: calc(29 * var(--pc)) calc(45 * var(--pc));
    border-radius: 8px;
    margin: 10px 0 14px;
}
.zk-result__sumLabel{
    font-weight: 500;
    font-size: calc(26 * var(--pc));
    color: #5a5a5a;
    margin: 0 0 calc(17 * var(--pc));
}
.zk-result__sumLabel span{
    font-weight: 600;
    font-size: calc(38 * var(--pc));
}
.zk-result__sumValue{
    font-weight: 500;
    font-size: calc(63 * var(--pc));
    color: var(--accent);
    background: #ffffff;
    padding: calc(27 * var(--pc)) calc(10 * var(--pc));
}
.zk-result__yen{
    font-size: calc(45 * var(--pc));
    vertical-align: baseline;
}


.zk-result__kv01{
    display: block;
}
.zk-result__kvItem01{
    background: #fff6cf;
    border-radius: 8px;
    padding: calc(27 * var(--pc));
    margin: 0 0 calc(18 * var(--pc));
}
.zk-result__kvItem02{
    padding: 0 calc(27 * var(--pc));
    margin: 0 0 calc(37 * var(--pc));
}
.zk-result__kvLabel01{
    font-size: calc(20 * var(--pc));
    font-weight: 500;
    color:#5a5a5a;
    margin: 0 0 calc(10 * var(--pc));
}
.zk-result__kvLabel02{
    font-size: calc(20 * var(--pc));
    font-weight: 500;
    color:#5a5a5a;
    margin: 0 0 calc(10 * var(--pc));
}
.zk-result__kvValue01{
    font-size: calc(36 * var(--pc));
    color:#5a5a5a;
    font-weight: 500;
}
.zk-result__kvValue02{
    font-size: calc(32 * var(--pc));
    color:#5a5a5a;
    font-weight: 500;
}
.zk-result__kvValue_amount01{
    font-size: calc(45 * var(--pc));
    color:#5a5a5a;
    font-weight: 500;
    vertical-align: top;
}
.zk-result__kvValue_amount02{
    font-size: calc(39 * var(--pc));
    color:#5a5a5a;
    font-weight: 500;
    vertical-align: top;
}
.zk-result__kvArrow{
    width:0;
    height:0;
    margin: 0 auto calc(18 * var(--pc));
    border-left: transparent solid 10px;
    border-right: transparent solid 10px;
    border-bottom: 15px solid #5a5a5a;
    opacity:1;
}

.zk-result__taxNote{
    margin: 0 0 calc(30 * var(--pc));
    font-size: calc(20 * var(--pc));
    font-weight: 500;
    color: var(--accent);
}

/* ===== ご加入プラン：タイトルも黄色BG内 ===== */
.zk-plan{
    margin-top: 12px;
}

/* 黄色の外枠（画像の黄色BG） */
.zk-plan__wrap{
    background: #ffeca6;
    color: #5a5a5a;
    padding: calc(20 * var(--pc));
    border-radius: 8px;
}

/* 黄色BGの中に入る見出し */
.zk-plan__titleIn{
    font-weight: 500;
    font-size: calc(24 * var(--pc));
    text-align: center;
    margin: 0 0 calc(10 * var(--pc));
}

/* 2カラムの中身（ここは黄色を消す） */
.zk-plan__grid{
    background: transparent;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 14px;
}

/* 既存カードはそのまま使える */
.zk-planCard{
    background:#fff;
}

.zk-planCard__head{
    background: var(--accent);
    color:#fff;
    text-align:center;
    font-size: calc(24 * var(--pc));
    font-weight: 500;
    padding: calc(20 * var(--pc)) calc(10 * var(--pc));
}

.zk-planCard__body{
    font-size: calc(26 * var(--pc));
    font-weight: 500;
    padding: calc(15 * var(--pc));
}

.zk-planCard__body--single{
    display:flex;
    align-items:center;
    justify-content:center;
}

.zk-planList{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 15px;
    align-content:center;
}

.zk-planItem{
    text-align:center;
    white-space: nowrap;
}

/* ===== 注釈 ===== */
.zk-footnotes{
  margin: 14px 0 0;
  text-align:left;
  font-size: calc(16 * var(--pc));
  line-height: 1.6;
  color:#333333;
}

/* ===== CTA（資料請求） ===== */
.zk-cta{
  margin: 18px 0 6px;
}
.zk-cta__link{
  display:block;
  text-decoration:none;
  border: 0;
  padding: 0;
  background: none;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 768px) {
.zk-result__icon{
    width: calc(133 * var(--sp));
    margin: 0 auto calc(56 * var(--sp));
}
.zk-result__title{
  margin: 0 0 calc(85 * var(--sp));
  color: var(--accent);
  font-weight: 500;
  font-size: calc(44 * var(--sp));
}

.zk-result__lead{
    margin: 0 0 calc(45 * var(--sp));
    font-size: calc(38 * var(--sp));
    font-weight: 600;
    line-height: 120%;
    color:#5a5a5a;
}
.zk-result__number{
    font-size: calc(60 * var(--sp));
    font-weight: 600;
}
.zk-result__note{
    font-size: calc(24 * var(--sp));
    font-weight: 400;
}


.zk-result__sumBox{
    background: #ffeca6;
    padding: calc(40 * var(--sp)) calc(23 * var(--sp));
    border-radius: 8px;
    margin: 0 0 calc(21 * var(--sp));
}
.zk-result__sumLabel{
    font-weight: 500;
    font-size: calc(32 * var(--sp));
    color: #5a5a5a;
    margin: 0 0 calc(25 * var(--sp));
}
.zk-result__sumLabel span{
    font-weight: 600;
    font-size: calc(44 * var(--sp));
}
.zk-result__sumValue{
    font-weight: 500;
    font-size: calc(79 * var(--sp));
    color: var(--accent);
    background: #ffffff;
    padding: calc(30 * var(--sp)) calc(10 * var(--sp));
}
.zk-result__yen{
    font-size: calc(55 * var(--sp));
    vertical-align: baseline;
}


.zk-result__kv01{
    display: block;
}
.zk-result__kvItem01{
    background: #fff6cf;
    border-radius: 8px;
    padding: calc(30 * var(--sp));
    margin: 0 0 calc(20 * var(--sp));
}
.zk-result__kvItem02{
    padding: 0 calc(30 * var(--sp));
    margin: 0 0 calc(40 * var(--sp));
}
.zk-result__kvLabel01{
    font-size: calc(30 * var(--sp));
    font-weight: 500;
    color:#5a5a5a;
    margin: 0 0 4vw;
}
.zk-result__kvLabel02{
    font-size: calc(30 * var(--sp));
    font-weight: 500;
    color:#5a5a5a;
    margin: 0 0 calc(22 * var(--sp));
}
.zk-result__kvValue01{
    font-size: calc(56 * var(--sp));
    color:#5a5a5a;
    font-weight: 500;
}
.zk-result__kvValue02{
    font-size: calc(49 * var(--sp));
    color:#5a5a5a;
    font-weight: 500;
}
.zk-result__kvValue_amount01{
    font-size: calc(56 * var(--sp));
    color:#5a5a5a;
    font-weight: 500;
    vertical-align: top;
}
.zk-result__kvValue_amount02{
    font-size: calc(49 * var(--sp));
    color:#5a5a5a;
    font-weight: 500;
    vertical-align: top;
}
.zk-result__kvArrow{
    width:0;
    height:0;
    margin: 0 auto calc(22 * var(--sp));
    border-left: transparent solid 10px;
    border-right: transparent solid 10px;
    border-bottom: 15px solid #5a5a5a;
    opacity:1;
}

.zk-result__taxNote{
    margin: 0 0 calc(34 * var(--sp));
    font-size: calc(30 * var(--sp));
    font-weight: 500;
    line-height: 180%;
    color: var(--accent);
}

/* ===== ご加入プラン：タイトルも黄色BG内 ===== */
.zk-plan{
    margin-top: 12px;
}

/* 黄色の外枠（画像の黄色BG） */
.zk-plan__wrap{
    background: #ffeca6;
    color: #5a5a5a;
    padding: calc(34 * var(--sp));
    border-radius: 8px;
}

/* 黄色BGの中に入る見出し */
.zk-plan__titleIn{
    font-weight: 600;
    font-size: calc(32 * var(--sp));
    text-align: center;
    margin: 0 0 calc(34 * var(--sp));
}

/* 2カラムの中身（ここは黄色を消す） */
.zk-plan__grid{
    background: transparent;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 14px;
}

/* 既存カードはそのまま使える */
.zk-planCard{
    background:#fff;
}

.zk-planCard__head{
    background: var(--accent);
    color:#fff;
    text-align:center;
    font-size: calc(30 * var(--sp));
    font-weight: 600;
    padding: calc(24 * var(--sp));
}

.zk-planCard__body{
    font-size: calc(32 * var(--sp));
    font-weight: 600;
    padding: calc(24 * var(--sp)) calc(15 * var(--sp));
}

.zk-planCard__body--single{
    display:flex;
    align-items:center;
    justify-content:center;
}

.zk-planList{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(15 * var(--sp)) calc(10 * var(--sp));
    align-content:center;
}

.zk-planItem{
  text-align:center;
  white-space: nowrap;
}

/* ===== 注釈 ===== */
.zk-footnotes{
  margin: 14px 0 0;
  text-align:left;
  font-size: calc(28 * var(--sp));
  line-height: 1.6;
  color:#333333;
}

/* ===== CTA（資料請求） ===== */
.zk-cta{
  margin: 18px 0 6px;
}
.zk-cta__link{
  display:block;
  text-decoration:none;
  border: 0;
  padding: 0;
  background: none;
  width: 100%;
  max-width: 100%;
}
}
@media (max-width: 360px){
  .zk-planItem{ font-size: 22px; }
  .zk-planCard__body--single{ font-size: 24px; }
}


/*---------------------------------
  インタビュー
---------------------------------*/
.interviewvisualwrap01 {
  display: block;
  padding: 0 0 calc(60 * var(--pc));
}
.interviewwrap01 {
  position: relative;
  text-align: justify;
  text-justify: inter-ideograph;
}
.interviewcontentsimgwrap01 {
  display: block;
  padding: 0 0 calc(37 * var(--pc));
}
.interviewcontentswrap01 {
  display: block;
  width: calc(720 * var(--pc));
  margin: 0 auto;
}
.interviewcontentswrap02 {
  display: block;
  width: calc(602 * var(--pc));
  margin: 0 auto;
  font-size: calc(19 * var(--pc));
  font-weight: 400;
  line-height: 180%;
}
.interviewcontentsinner01 {
  display: block;
  padding: 0 0 calc(57 * var(--pc));
}
.interviewcontentsinner02 {
  display: block;
  padding: 0 0 calc(0 * var(--pc));
}
ul.interview01 {
  display: block;
}
ul.interview01 li {
  display: block;
}
ul.interview01 li:nth-child(1) {
  font-size: calc(30 * var(--pc));
  font-weight: 600;
}
ul.interview01 li:nth-child(2) {
  font-size: calc(19 * var(--pc));
  padding: 0 0 calc(19 * var(--pc));
  margin: 0 0 calc(19 * var(--pc));
  border-bottom: 1px solid #333333;
}
.interviewcontentstriviawrap01 {
  display: block;
  width: calc(720 * var(--pc));
  margin: 0 auto calc(85 * var(--pc));
}
.pricewrap01 {
  display: block;
  background: #ffc900;
  padding: calc(24 * var(--pc));
  border-radius: calc(14 * var(--pc));
  font-size: calc(19 * var(--pc));
  line-height: 200%;
  text-align: center;
  position: relative;
}
.pricelabel01 {
  display: block;
  width: calc(80 * var(--pc));
  height: calc(80 * var(--pc));
  line-height: calc(80 * var(--pc));
  border-radius: 50%;
  background: var(--maincolor);
  color: #ffffff;
  position: absolute;
  top: calc(-40 * var(--pc));
  left: calc(-40 * var(--pc));
}
ul.price01 {
  display: block;
}
ul.price01 li {
  display: block;
}
ul.price01 li:nth-child(2) {
  font-size: calc(41 * var(--pc));
  font-weight: 600;
}
.priceattenttion01 {
  font-size: calc(12 * var(--pc));
  text-align: right;
}
@media (max-width: 768px) {
.interviewvisualwrap01 {
  display: block;
  padding: 0;
}
.interviewwrap01 {
  position: relative;
  text-align: justify;
  text-justify: inter-ideograph;
}
.interviewcontentsimgwrap01 {
  display: block;
  padding: 0 0 calc(40 * var(--sp));
}
.interviewcontentswrap01 {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.interviewcontentswrap02 {
  display: block;
  width: calc(605 * var(--sp));
  margin: 0 auto;
  font-size: calc(32 * var(--sp));
  font-weight: 400;
  line-height: 160%;
}
.interviewcontentsinner01 {
  display: block;
  padding: 0 0 calc(57 * var(--sp));
  position: relative;
}
.interviewcontentsinner02 {
  display: block;
  padding: 0 0 calc(0 * var(--sp));
  position: relative;
}
ul.interview01 {
  display: block;
}
ul.interview01 li {
  display: block;
}
ul.interview01 li:nth-child(1) {
  font-size: calc(38 * var(--sp));
  font-weight: 600;
}
ul.interview01 li:nth-child(2) {
  font-size: calc(23 * var(--sp));
  padding: 0 0 calc(23 * var(--sp));
  margin: 0 0 calc(23 * var(--sp));
  border-bottom: 1px solid #333333;
}
.interviewcontentstriviawrap01 {
  display: block;
  width: 100%;
  margin: 0 auto calc(100 * var(--sp));
}
.pricewrap01 {
  display: block;
  background: #ffc900;
  padding: calc(30 * var(--sp));
  border-radius: calc(19 * var(--sp));
  font-size: calc(27 * var(--sp));
  line-height: 140%;
  text-align: center;
  position: relative;
}
.pricelabel01 {
  display: block;
  width: calc(83 * var(--sp));
  height: calc(83 * var(--sp));
  line-height: calc(83 * var(--sp));
  border-radius: 50%;
  background: var(--maincolor);
  color: #ffffff;
  position: absolute;
  top: calc(-23 * var(--sp));
  left: calc(-23 * var(--sp));
  font-size: calc(19 * var(--sp));
}
ul.price01 {
  display: block;
}
ul.price01 li {
  display: block;
}
ul.price01 li:nth-child(2) {
  font-size: calc(54 * var(--sp));
  font-weight: 600;
  line-height: 140%;
}
.priceattenttion01 {
  font-size: calc(21 * var(--sp));
  text-align: right;
}
}


/*---------------------------------
  【まとめ】つまり国民年金基金とは
---------------------------------*/
.summaryvisualwrap01 {
  display: block;
  padding: 0 0 calc(30 * var(--pc));
}
.summarycontentstriviawrap01 {
  display: block;
  width: calc(720 * var(--pc));
  margin: 0 auto;
}
.faqwrap01 {
  width: calc(720 * var(--pc));
  margin: 0 auto;
  position: relative;
  text-align: justify;
  text-justify: inter-ideograph;
}
.faqwrap01 h2 {
  font-size: calc(32 * var(--pc));
  font-weight: 600;
  text-align: center;
  padding: calc(30 * var(--pc)) 0;
  margin: 0 0 calc(60 * var(--pc));
  border-top: 2px solid var(--maincolor);
  border-bottom: 2px solid var(--maincolor);
}
.faqwrap02 {
  display: block;
  padding: 0 0 calc(80 * var(--pc));
}
.faqwrap01 h3 {
  font-size: calc(27 * var(--pc));
  font-weight: 600;
  text-align: center;
  color: var(--maincolor);
  padding: 0 0 calc(20 * var(--pc));
}
.faqcontentswrap01 {
  display: block;
  margin: 0 0 calc(20 * var(--pc));
  border: 1px solid #595757;
  border-radius: 8px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 58%, rgba(240, 240, 240, 1));
  font-size: calc(16 * var(--pc));
}
@media (max-width: 768px) {
.summaryvisualwrap01 {
  display: block;
  padding: 0;
}
.summarycontentstriviawrap01 {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.faqwrap01 {
  width: calc(657 * var(--sp));
  margin: 0 auto;
  position: relative;
  text-align: justify;
  text-justify: inter-ideograph;
}
.faqwrap01 h2 {
  font-size: calc(59 * var(--sp));
  font-weight: 600;
  text-align: center;
  padding: calc(32 * var(--sp)) 0;
  margin: 0 0 calc(65 * var(--sp));
  border-top: 2px solid var(--maincolor);
  border-bottom: 2px solid var(--maincolor);
}
.faqwrap02 {
  display: block;
  padding: 0 0 calc(125 * var(--sp));
}
.faqwrap01 h3 {
  font-size: calc(47 * var(--sp));
  font-weight: 600;
  text-align: center;
  color: var(--maincolor);
  padding: 0 0 calc(22 * var(--sp));
}
.faqcontentswrap01 {
  display: block;
  margin: 0 0 calc(22 * var(--sp));
  border: 1px solid #595757;
  border-radius: 8px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 58%, rgba(240, 240, 240, 1));
  font-size: calc(28 * var(--sp));
}
}


/*---------------------------------
  アコーディオン
---------------------------------*/
.accordion {
    display: block;
}
.accordion a:link {
    color: #333333;
    text-decoration: none;
}
.accordion a:visited {
    color: #333333;
}
.accordion__title {
    width: 100%;
    display: table;
    font-size: calc(21 * var(--pc));
    font-weight: 500;
    padding: calc(30 * var(--pc)) calc(20 * var(--pc));
    cursor: pointer;
    position: relative;
}
a.accordion__title:link {
    color: #333333;
    opacity: 1 !important;
}
a.accordion__title:hover {
    color: #333333;
    opacity: 1 !important;
}
a.accordion__title:hover img {
    opacity: 1 !important;
}
.accordion__title::before {
    content: '';
    display: inline-block;
    width: calc(24 * var(--pc));
    height: calc(8 * var(--pc));
    background-color: #f8b290;
    border-radius: 4px;
    position: absolute;
    right: calc(20 * var(--pc));
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 1s;
}
.accordion__title::after {
    content: '';
    display: inline-block;
    width: calc(24 * var(--pc));
    height: calc(8 * var(--pc));
    background-color: #f8b290;
    border-radius: 4px;
    position: absolute;
    right: calc(20 * var(--pc));
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: transform 1s;
}
.accordion__title.show::before {
    opacity: 0;
}
.accordion__title.show::after {
    transform: translateY(-50%) rotate(180deg);
}
.accordion__title p {
    display: table-cell;
    vertical-align: middle;
}
.accordion__title p:nth-child(1) {
    width: calc(16 * var(--pc));
    padding: calc(6 * var(--pc)) 0 0;
}
.accordion__title p:nth-child(2) {
    padding: 0 0 0 calc(20 * var(--pc));
}
.accordion__title p img {
    display: block;
}
.accordion__content {
    display: none;
    font-size: calc(16 * var(--pc));
    font-weight: 400;
    padding: 0 calc(20 * var(--pc)) calc(40 * var(--pc));
    color: #333333;
}
.accordion__contentattention {
    display: block;
    font-size: calc(16 * var(--pc));
    line-height: 160%;
}
.accordion__contentdetail {
    width: 100%;
    display: table;
}
.accordion__contentdetail p {
    display: table-cell;
    vertical-align: top;
    font-size: calc(19 * var(--pc));
}
.accordion__contentdetail p:nth-child(1) {
    width: calc(16 * var(--pc));
    padding: calc(6 * var(--pc)) 0 0;
}
.accordion__contentdetail p:nth-child(2) {
    padding: 0 calc(20 * var(--pc));
    letter-spacing: -0.01em;
}
.accordion__contntdetail-atitle01 {
    display: block;
    font-size: calc(21 * var(--pc));
    font-weight: 500;
    line-height: 160%;
    color: var(--maincolor);
    padding: 0 0 calc(10 * var(--pc));
}
span.acc2columnwrap01 {
  display: flex;
  gap: 0 calc(40 * var(--pc));
}
span.acc2columninner01 {
  width: calc(100% / 2);
}
.accordion__contentdetail a:link {
    color: #ff6c00;
    text-decoration: underline;
}
.accordion__contentdetail a:visited {
    color: #ff6c00;
    text-decoration: underline;
}
@media (max-width: 768px) {
.accordion {
    display: block;
}
.accordion a:link {
    color: #333333;
}
.accordion a:visited {
    color: #333333;
}
.accordion a:hover {
    color: #333333;
}
.accordion__title {
    width: 100%;
    display: table;
    font-size: calc(32 * var(--sp));
    padding: calc(45 * var(--sp)) calc(25 * var(--sp));
    cursor: pointer;
    position: relative;
}
a.accordion__title:link {
    color: #333333;
    opacity: 1 !important;
}
a.accordion__title:hover {
    color: #333333;
    opacity: 1 !important;
}
a.accordion__title:hover img {
    opacity: 1 !important;
}
.accordion__title::before {
    content: '';
    display: inline-block;
    width: calc(30 * var(--sp));
    height: calc(10 * var(--sp));
    background-color: #f8b290;
    border-radius: 4px;
    position: absolute;
    right: calc(25 * var(--sp));
    transform: translateY(-50%);
    transition: opacity 1s;
}
.accordion__title::after {
    content: '';
    display: inline-block;
    width: calc(30 * var(--sp));
    height: calc(10 * var(--sp));
    background-color: #f8b290;
    border-radius: 4px;
    position: absolute;
    right: calc(25 * var(--sp));
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: transform 1s;
}
.accordion__title.show::before {
    opacity: 0;
}
.accordion__title.show::after {
    transform: translateY(-50%) rotate(180deg);
}
.accordion__title p {
    display: table-cell;
    vertical-align: middle;
    line-height: 140%;
}
.accordion__title p:nth-child(1) {
    width: calc(20 * var(--sp));
    padding: 0;
}
.accordion__title p:nth-child(2) {
    padding: 0 0 0 calc(17 * var(--sp));
}
.accordion__title p img {
    display: block;
}
.accordion__content {
    display: none;
    padding: 0 calc(20 * var(--sp)) calc(50 * var(--sp));
    font-weight: 400;
}
.accordion__contentattention {
    display: block;
    font-size: calc(16 * var(--sp));
    line-height: 120%;
}
.accordion__contentdetail {
    width: 100%;
    display: table;
    font-size: calc(28 * var(--sp));
    line-height: 140%;
}
.accordion__contentdetail p {
    display: table-cell;
    vertical-align: top;
    font-size: calc(28 * var(--sp));
    line-height: 140%;
}
.accordion__contentdetail p:nth-child(1) {
    width: calc(20 * var(--sp));
    padding: calc(14 * var(--sp)) 0 0;
}
.accordion__contentdetail p:nth-child(2) {
    padding: 0 calc(19 * var(--sp));
    letter-spacing: -0.01em;
}
.accordion__contntdetail-atitle01 {
    display: block;
    font-size: calc(32 * var(--sp));
    font-weight: 500;
    line-height: 160%;
    color: var(--maincolor);
    padding: 0 0 calc(10 * var(--sp));
}
span.acc2columnwrap01 {
  display: flex;
  flex-flow: column;
  gap: calc(60 * var(--sp)) 0;
}
span.acc2columninner01 {
  width: 100%;
}
.accordion__contentdetail a:link {
    color: #ff6c00;
    text-decoration: underline;
}
.accordion__contentdetail a:visited {
    color: #ff6c00;
    text-decoration: underline;
}
}

/*---------------------------------
  ご加入までの流れ
---------------------------------*/
.flowwrap01 {
  display: block;
  margin: 0 0 calc(40 * var(--pc));
  padding: 0 0 calc(93 * var(--pc));
  border-top: calc(17 * var(--pc)) solid var(--maincolor);
  background: #f3edce;
}
.flowvisualwrap01 {
  width: calc(840 * var(--pc));
  margin: 0 auto;
}
.flowcontentswrap01 {
  width: calc(600 * var(--pc));
  margin: 0 auto;
}
.flowcontentswrap01 p {
  font-size: calc(30 * var(--pc));
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.05em;
  padding: 0 0 calc(56 * var(--pc));
}
@media (max-width: 768px) {
.flowwrap01 {
  display: block;
  margin: 0 0 calc(28 * var(--sp));
  padding: 0 0 calc(150 * var(--sp));
  border-top: calc(11 * var(--sp)) solid var(--maincolor);
  background: #f3edce;
}
.flowvisualwrap01 {
  width: 100%;
  margin: 0 auto;
}
.flowcontentswrap01 {
  width: calc(700 * var(--sp));
  margin: 0 auto;
}
.flowcontentswrap01 p {
  font-size: calc(29 * var(--sp));
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.05em;
  padding: calc(20 * var(--sp)) 0 calc(37 * var(--sp));
}
}

/*---------------------------------
  お問い合わせ
---------------------------------*/
.contactwrap01 {
  display: block;
  padding: calc(60 * var(--pc)) 0;
  background: #f3f1ec;
}
.contactwrap01 p {
  font-size: calc(27 * var(--pc));
  font-weight: 500;
  text-align: center;
  line-height: 140%;
  letter-spacing: 0.05em;
  color: var(--maincolor);
  padding: 0 0 calc(56 * var(--pc));
}
.contactcontentswrap01 {
  width: calc(600 * var(--pc));
  margin: 0 auto;
}
@media (max-width: 768px) {
.contactwrap01 {
  display: block;
  padding: calc(90 * var(--sp)) 0 calc(74 * var(--sp));
  background: #f3f1ec;
}
.contactwrap01 p {
  font-size: calc(45 * var(--sp));
  font-weight: 500;
  text-align: center;
  line-height: 140%;
  letter-spacing: 0.05em;
  color: var(--maincolor);
  padding: 0 0 calc(30 * var(--sp));
}
.contactcontentswrap01 {
  width: calc(650 * var(--sp));
  margin: 0 auto;
}
}


/*---------------------------------
  フッター
---------------------------------*/
footer {
  display: block;
  padding: calc(77 * var(--pc)) 0 calc(40 * var(--pc));
}
#logo {
  width: calc(403 * var(--pc));
  margin: 0 auto calc(27 * var(--pc));
}
#copyright {
  font-size: calc(17 * var(--pc));
  font-weight: 500;
  color: #000000;
  text-align: center;
}
@media (max-width: 768px) {
footer {
  display: block;
  padding: calc(62 * var(--sp)) 0 calc(85 * var(--sp));
}
#logo {
  width: calc(565 * var(--sp));
  margin: 0 auto calc(37 * var(--sp));
}
#copyright {
  font-size: calc(28 * var(--sp));
  font-weight: 500;
  color: #000000;
  text-align: center;
}
}


/*---------------------------------
  資料請求ボタン
---------------------------------*/
.requestbtnwrap01 {
  display: block;
  width: calc(600 * var(--pc));
  margin: 0 auto calc(100 * var(--pc));
}
.requestbtnwrap01 picture {
  display: block;
}
.requestbtnwrap01 button{
  display: block;
  width: calc(600 * var(--pc));

  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;

  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.35));

  transform: translateZ(0);
  will-change: transform;
}

.requestbtnwrap01 button:active,
.requestbtnwrap01 button:focus{
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.35));
  outline: none;
}
.requestbtnwrap02 {
  display: block;
  width: calc(600 * var(--pc));
  margin: 0 auto calc(67 * var(--pc));
}
.requestbtnwrap02 picture {
  display: block;
}

.requestbtnwrap02 button{
  display: block;
  width: calc(600 * var(--pc));

  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;

  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.35));

  transform: translateZ(0);
  will-change: transform;
}

.requestbtnwrap02 button:active,
.requestbtnwrap02 button:focus{
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.35));
  outline: none;
}
@media (max-width: 768px) {
.requestbtnwrap01 {
  display: block;
  width: calc(480 * var(--sp));
  margin: 0 auto calc(120 * var(--sp));
}
.requestbtnwrap01 picture {
  display: block;
}
.requestbtnwrap01 button{
  display: block;
  width: 100%;

  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;

  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.35));

  transform: translateZ(0);
  will-change: transform;
}

.requestbtnwrap01 button:active,
.requestbtnwrap01 button:focus{
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.35));
  outline: none;
}
.requestbtnwrap02 {
  display: block;
  width: calc(480 * var(--sp));
  margin: 0 auto calc(57 * var(--sp));
}
.requestbtnwrap02 picture {
  display: block;
}
.requestbtnwrap02 button{
  display: block;
  width: 100%;

  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;

  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.35));

  transform: translateZ(0);
  will-change: transform;
}

.requestbtnwrap02 button:active,
.requestbtnwrap02 button:focus{
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.35));
  outline: none;
}
}


/*---------------------------------
  コンテンツ（共通）
---------------------------------*/
.contentswrap01 {
	width: 100%;
    position: relative;
}
.contentswrap01 img {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 768px) {
.contentswrap01 {
	width: 100%;
    position: relative;
}
.contentswrap01 img {
	display: block;
	width: 100%;
	height: auto;
}
}


/*---------------------------------
  モーダル
---------------------------------*/
.zk-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.zk-modal.is-open {
  display: block;
}

.zk-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
}

.zk-modal__panel {
  position: relative;
  width: min(92vw, 560px);
  height: min(82vh, 760px);
  margin: 8vh auto 0;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.zk-modal__header {
  position: relative;
  height: 72px;
  background: var(--maincolor);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 56px;
  box-sizing: border-box;
}

.zk-modal__title {
  margin: 0;
  color: #fff;
  font-size: calc(30 * var(--pc));
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
}

.zk-modal__close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.zk-modal__body {
  height: calc(100% - 72px);
}

.zk-modal__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 768px) {
.zk-modal__title {
  margin: 0;
  color: #fff;
  font-size: calc(34 * var(--sp));
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
}
}