@charset "UTF-8";
/* CSS Document */
/*-------------------------------------------------------------------------------------
PC用レイアウト（768px以上スクリーン）
----------------------------------------------------------------------------------------*/
/*--------------------------------------------------
共通設定(PC)
-----------------------------------------------------*/
/*body全体の初期スタイル調整*/
/* ベース */
body {
  font-size: 18px;
  color: #000;
  font-family:
    "Ryumin Pro",
    "A-OTF Ryumin Pro",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "MS Mincho",
    serif;
  line-height: 1.7;
}
/*リンク文字の設定*/
a {
  text-decoration: underline;
}
a:link, a:visited {
  color: #39f;
}
a:hover, a:active {
  color: #f60;
}
p { margin: 0; padding: 0; }

/*セクションエリアの共通設定*/
section {
  clear: both;
  display: flow-root;
}

img { max-width: 100%; height: auto; }



/*--------------------------------------------------
見出しタグ設定（PC）
-----------------------------------------------------*/

h1, h2, h3, h4, h5 {
  font-family:
    "Ryumin Pro",
    "A-OTF Ryumin Pro",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "MS Mincho",
    serif;
  font-weight: 400;
}

h1 { font-size: 1.5em; }
h2 { font-size: 2em; }
h3 { font-size: 19px; }
h4 { font-size: 17px; }
h5 { font-size: 16px; }


h2 {
  margin: 0em 0em 0.5em;
  text-align: center;
}
h3 {
  margin: 0.5em 0em;
  padding: 0.3em 0.6em;
  border-bottom: 1px solid #ccc;
  font-weight: bold;
  text-align: center;
}
h4 {
  margin: 0.5em 0em;
  padding: 0.3em 0.6em;
  border: 1px solid #ccc;
  font-weight: bold;
}
h5 {
  margin: 0.5em 0em;
  padding: 0.1em;
  font-weight: bold;
  border-bottom: 1px dotted #ccc;
}
/*--------------------------------------------------
全体レイアウト／背景設定（PC）
-----------------------------------------------------*/
/*全体エリア（全体背景を設定するにはここ）*/
.main {
  background-color: #101533;

}

/*記事(ボディ)エリア*/
.article {
  background-color: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
/*記事(ボディ)エリアの行間*/
.article p {
  line-height: 1.6;
}
/*カラム全体の幅を変更する*/
.article, .top_image_in {
  width:600px;
  margin: 0 auto; /*真ん中に要素を置きたいときに使う*/
}

/*--------------------------------------------------
画像＋h２の設定
-----------------------------------------------------*/
.img-text {
  position: relative;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;

  aspect-ratio: 3 / 2;   /* 高さ安定（重要） */

  display: flex;
  align-items: center;
}

.img-text h2{
  text-align: left;
  margin-left: 1em;


  /* 初期状態 */
  opacity: 0;
  transform: translateY(12px);

  /* アニメ用 */
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

/* 表示されたら */
.img-text.is-show h2{
  opacity: 1;
  transform: translateY(0);
}


/*--------------------------------------------------
sectionの設定
-----------------------------------------------------*/
.fv_text{
  background-color: #101533;
  color: #fff;
  padding: 1em 3em 1.5em;
  text-align: center;
}
.section_01 {
  padding: 1.5em 3em;

}
.section_02 {
  background:
    linear-gradient(
      180deg,
      #101533 0%,
      #1b1f4a 40%,
      #2a1f4f 70%,
      #120a24 100%
    );

  padding: 2em 3em;
  color: #fff;
}

.box-white{
  border-top: 3px dotted #fff;
  padding: 1em 0em 0;
  margin: 1.5em 0 0;
}

/*--------------------------------------------------
プロフィールの設定
-----------------------------------------------------*/

    .profile-section{
      box-sizing:border-box;
      padding: 2em 3em;
    }

    .profile-inner{
      display:flex;
      align-items:stretch; /* 高さを上で揃える（行の先頭基準） */
      position:relative;
      gap:0;
      padding-top: 1em;
    }

.profile-image{
  flex:0 0 60%;
}

    .profile-image img{
        width:100%;
  height:auto;
  display:block;
  border-radius:20px; 
    }

    /* 左側：テキスト（ベースは60%幅）＋ 画像の上に少し被せる */
    .profile-text-wrap{
      flex:0 0 100%;
      position:relative;
      z-index:2;
      /* 右へせり出させて画像にかぶせる */
      margin-right:-55%;
      margin-top: 1%;
    }
    .profile-text-box{
      box-sizing:border-box;
    }

 
/*--------------------------------------------------
VOICEの設定
-----------------------------------------------------*/

.voice {
  background-image: url(../images/bg_space.jpg);
    background-size: cover;
  background-position: center;
}
.voice img
{
  margin: 1em auto;
  border-radius: 13px;
}
.border-radius{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px; /* 数値は好みで */
}

/*--------------------------------------------------
特典の設定
-----------------------------------------------------*/
.tokuten{
  background:#fff;
  color: #120a24;
  margin: 1em .5em;
  padding: 1em 1em 1.5em;
  border-radius: 12px;
  border: #d7ba5f solid 1px;
}
.tokuten_no{
  display: block;    
  width: fit-content; /* 中身幅にする */
  margin: 0 auto .2em;     /* 中央寄せ */
  text-align: center;
  color: #fff;
  background-color: #d7ba5f;
  padding: .1em .5em;
  transform: skew(-12deg);
}
.tokuten h2{
  line-height: 1.2;
  margin-bottom: .2em;
}
.tokuten_sub{
  font-size:.9em; 
  border-bottom: #d7ba5f dotted 1px;
  margin: 0 auto 1em; 
  text-align: center;
}

.tokuten_img{
  display:flex;
  justify-content:center;
  margin: 0 0 1.2em;
}

.tokuten_img img{
  width: 40%;             
  max-width: 260px;
  height:auto;
  display:block;
}

p{ margin: 0 0 1.5em; }

/*--------------------------------------------------
チェックリスト01設定
-----------------------------------------------------*/
ul.checklist {
  background: #f6f5ef;
  list-style: none;
  padding: .5em 1em 1em 2em;
  border-radius: 20px;
}
ul.checklist li {
  background-image: url("../images/icon-check03-red.png");
  background-repeat: no-repeat;
  background-size: 3.5%;
  padding-left: 1.8em;
  margin-bottom: 0.8em;
}
ul.checklist li:last-child {
  margin-bottom: 0em;
}
/*--------------------------------------------------
チェックリスト02 設定
-----------------------------------------------------*/

ul.checklist_simple {
  background: #f6f5ef;
  list-style: none;
  padding: .5em 1em 1em 2em;
  border-radius: 20px;
}

/*--------------------------------------------------
よくある質問
-----------------------------------------------------*/
.box_qa {
  background-color: #efefef;
  padding: 1em;
}
.box_qa_q {
  background-color: #fff;
  padding: 1em 2em 1em 3em;
  border-bottom: 1px solid #ccc;
  font-size: 1.2em;
  font-weight: bold;
  color: #D10003;
}
.box_qa_a {
  background-color: #fff;
  padding: 1em 2em 1em 3em;
}

.box_qa_q p, .box_qa_a p { text-indent: 0; }

.box_qa_q .big2, .box_qa_a .big2 { display: inline-block; width: 2em; }

/*--------------------------------------------------
CTAエリア
-----------------------------------------------------*/
.area_cta {
  padding: 1em 3em;
  color: #fff;
  text-align: center;
}
.area_cta p{
  font-size: 0.9em;
}
/*--------------------------------------------------
フッター部分
-----------------------------------------------------*/
.footer {
  background-color: #101533;
  padding: 2em 0em;
  text-align: center;
  font-size: 1em;
  color: #fff;
}
.footer a {
  color: #fff;
}
.footer .sep{
  margin: 0 .8em;
}

/*--------------------------------------------------
下部固定フッター
-----------------------------------------------------*/


.fixed-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(16, 21, 51, 0.9);
  text-align: center;
  padding: 1em;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease;
  z-index: 9999;
}

.fixed-cta p{
  color: #fff;
 }


/*--------------------------------------------------
アニメ
-----------------------------------------------------*/ 
.cta-glow{
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 70px;
}

.cta-glow::after{
  content:"";
  position:absolute;
  top:0;
  left:-150%;
  width:120%;
  height:100%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,0) 100%
  );
  animation:ctaShine 2.8s ease-in-out infinite;
    mix-blend-mode: screen;
  opacity: .8;
}

@keyframes ctaShine{
  0%{ left:-150%; }
  60%{ left:150%; }
  100%{ left:150%; }
}

.cta-glow img{
  display:block;
  animation:ctaPulse 2.8s ease-in-out infinite;
}

@keyframes ctaPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.03); }
}
/*--------------------------------------------------
pp
-----------------------------------------------------*/
.small-note{
  font-size: 0.7em;
  font-weight: normal;
}
.kiyaku h2{
  text-align: left;
}
.no-copy {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.section_tokushoho{
  padding: 1em 1em;
}
.tokushoho {
  width: 100%;
  border-collapse: collapse;
}
.tokushoho th,
.tokushoho td {
  border: 1px solid #ccc;
  padding: 0.8em;
  vertical-align: top;
}
.tokushoho th {
  width: 30%;
  background: #f5f5f5;
  font-weight: bold;
}