@charset "UTF-8";
/*=================================
cmn.css　共通CSS
1: reset-CSSModern CSS Reset（The Custom CSS Reset）
2: setting
3: root
4: contents
=================================*/


/* 1: reset-CSSModern CSS Reset（The Custom CSS Reset）
================================== */
/*
  Josh W. Comeau's Custom CSS Reset
  www.joshwcomeau.com */

/* 1. ボックスモデルの修正：余白や境界線が幅を壊さないようにする */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. デフォルトの余白を削除 */
* {
  margin: 0;
}

/* 3. 本文の行間を整え、フォントのレンダリングを滑らかにする */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 4. メディア要素（画像など）がはみ出さないようにし、ブロック要素化する */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 5. フォーム要素が親のフォント設定を無視するのを防ぐ */
input,
button,
textarea,
select {
  font: inherit;
}

/* 6. 長い単語が画面からはみ出して横スクロールが出るのを防ぐ */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* WordPress Additions */
ul,
ol {
  padding-left: 1.5em;
}

a {
  color: inherit;
  text-decoration: none;
}

textarea {
  resize: vertical;
}

/* 2: setting
================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: pretty;
}

html {
  font-size: 100%;
}

@media (min-width: 900px) {
  html {
    overflow: auto;
    min-width: var(--content-min-width);
  }
}

body {
  font-family: var(--font-base);
  font-optical-sizing: auto;
  color: var(--text);
  font-size: var(--font-size-md);
  /* 1rem = 通常16px */
  font-weight: normal;
  line-height: 1.7;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

@media all and (-ms-high-contrast:none) {
  body {
    font-family: 'Noto Sans JP', sans-serif, Meiryo, 'ヒラギノ角ゴ Pro W3', メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  }
}

/* リンク設定*/
a {
  color: var(--text);
  text-decoration: underline;
  transition: var(--transition-default);

  &:hover {
    color: var(--link-hover);
    text-decoration: none;
  }

  & img {
    transition: var(--transition-default);
  }

  &:hover img {
    opacity: 0.8;
  }
}

/* 3: root
================================== */
:root {
	--navy:#003b95;
	--navy-deep:#081f4a;
	--blue:#0882be;
	--blue-gray:#4a5a80;
	--blue-light:#e7f0fd;
	--gold:#e0a638;
	--gold-deep:#b9821f;
	--yellow: #f2c922;
	--cream:#f3efdc;
  --white: #FFF;
	--ink:#1c2a4a;
	--red:#d43b3b;
	--line:#dfe6f2;
  --text: #262626;
  --filter-drop-shadow: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.7));
  --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
  --box-shadow-hover: 0px 8px 16px rgba(0, 0, 0, 0.4);
  --txt-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  --mesh-gradient:
    radial-gradient(at 0% 0%, #ec7e79 0, rgba(255, 95, 109, 0) 55%),
    radial-gradient(at 100% 0%, #f7f98b 0, rgba(255, 195, 113, 0) 55%),
    radial-gradient(at 20% 100%, #f8f3c2 0, rgba(109, 213, 237, 0) 55%),
    radial-gradient(at 80% 100%, #f8f3c2 0, rgba(33, 147, 176, 0) 55%),
    radial-gradient(at 50% 35%, #ec7e79 0, rgba(255, 95, 109, 0) 45%),
    radial-gradient(at 50% 70%, #f7f98b 0, rgba(255, 195, 113, 0) 45%);
  --transition-default: color .2s ease, background-color .2s ease, opacity .2s ease;
  --fade-transition: opacity 0.8s ease, transform 0.8s ease;
  /* Font */
  --font-base: 'Noto Sans JP', sans-serif, 'Yu Gothic', '游ゴシック', '游ゴシック体', YuGothic, Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  --font-size-2xs: clamp(0.625rem, 0.6rem + 0.1vw, 0.688rem);
  /* 10→11 */
  --font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.813rem);
  /* 12→13 */
  --font-size-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.938rem);
  /* 14→15 */
  --font-size-md: clamp(0.938rem, 0.91rem + 0.15vw, 1rem);
  /* 15→16 */
  --font-size-lg: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  /* 16→18 */
  --font-size-xl: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  /* 18→22 */
  --font-size-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  /* 22→28 */
  --font-size-3xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  /* 28→36 */
  --font-size-4xl: clamp(2rem, var(--font-size-xl) + 1.8vw, 2.75rem);
  /* 32→44 */
  --font-size-5xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  /* 40→56 */
  --font-size-6xl: clamp(3rem, 2.4rem + 3.5vw, 4.5rem);
  /* 48→72 */
  --font-size-7xl: clamp(4rem, 3rem + 5vw, 6rem);
  /* 64→96 */

	--max-wd: 1080px;

  /* 余白 */
  --space-section: clamp(40px, 8vw, 80px);
  --space-section-mini: clamp(24px, 4vw, 60px);
  --space-xs: clamp(8px, 1vw, 12px);
  --space-s: clamp(16px, 2vw, 24px);
  --space-sm: clamp(21px, 3vw, 32px);
  --space-md: clamp(24px, 4vw, 40px);
  --space-lg: clamp(40px, 6vw, 80px);
  --header-height: 60px;
  --header-height-min: 80px;
}


/* 4: contents
================================== */
/* ファイル・外部リンクアイコン共通 */
a[target="_blank"]:not(:has(img)):not([href$=".pdf"]):not([href$=".doc"]):not([href$=".docx"]):not([href$=".xls"]):not([href$=".xlsx"]) {
  display: inline-flex;
  align-items: center;
  gap: .4em;

  &::after {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 8px;
  }
}

/* 新しいタブ */
a[target="_blank"]:not(:has(img)):not([href$=".pdf"]):not([href$=".doc"]):not([href$=".docx"]):not([href$=".xls"]):not([href$=".xlsx"])::after {
  background-image: url("../images/icn_blank.svg");
}

.wrapper{width:100%;overflow:hidden;}
.inner{width:100%;max-width:var(--max-wd);margin:0 auto;padding-inline:var(--space-s);}

/* Common headings */
.section{padding:var(--space-lg) 0;}
.section + .section{border-top:1px solid var(--line);}
.section-title{
	text-align:center;
	font-size:var(--font-size-5xl);
	font-weight:900;
	color:var(--navy);
	margin-bottom:var(--space-sm);
}
.section-title::after{
	content:"";
	display:block;
	width:64px;
	height:5px;
	background:linear-gradient(90deg,var(--gold),var(--gold-deep));
	border-radius:3px;
	margin:var(--space-xs) auto 0;
}
.section-lead{
	text-align:center;
	color:var(--blue-gray);
	font-size:var(--font-size-2xl);
	margin-bottom:var(--space-md);
}

.fB {font-weight: bold;}

/* Hero */
.hero{
	position:relative;
	line-height:0;
	background:var(--navy);
}
.hero_inner {
  width: min(1060px, 100%);
  margin: auto;
	padding-block: var(--space-md);
}
.hero_sp {
	display: none;
}
@media (max-width:600px){
	.hero_sp {
		display: block;
	}
	.hero_pc {
		display: none;
	}
	.hero_inner {
		padding-block: var(--space-s) 0;
	}
}
/* Period table */
.period{background:var(--white);}
.period-table{
	width:100%;
}
.period-row{
	display:flex;
	border-bottom:10px solid var(--white);
}
@media (max-width:768px){
	.period-row{
		display: block;
		& dt {
			margin-bottom: 4px;
		}
  }
}
.period-row:last-child{border-bottom:none;}
.period-row dt{
	flex:0 0 190px;
	background:var(--blue);
	color:var(--white);
	font-weight:700;
	font-size:var(--font-size-xl);
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:var(--space-s) var(--space-xs);
}
.period-row dd{
	flex:1;
	background:var(--white);
	padding:var(--space-s) 26px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	font-weight:700;
	font-size:var(--font-size-2xl);
	color:var(--text);
	border: 4px solid var(--blue);
}
.period-row dd small{
	display:block;
	font-size:var(--font-size-xl);
	font-weight:500;
	color:var(--blue-gray);
	margin-top:8px;
}

/* Benefit cards */
.benefits{background:var(--blue-light);}
.benefit-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:var(--space-s);
	max-width:var(--max-wd);
	margin:0 auto;
	padding: var(--space-sm);
	background-color: var(--white);
}
@media (max-width:900px){
	.benefit-grid{
		grid-template-columns:1fr;
		& div {
			margin-bottom: var(--space-md);
		}
	}
}
.double-box{
	margin:36px auto 0;
	background:var(--white);
	border:2px solid var(--gold);
	border-radius:14px;
	padding:var(--space-s);
	display:flex;
	align-items:center;
	gap:var(--space-md);
	& p:last-child {
		margin-top: 1em;
	}
}
.double-box .badge{
	flex:none;
	background:linear-gradient(160deg,var(--gold),var(--gold-deep));
	color:#3a2600;
	font-weight:900;
	font-size:var(--font-size-xl);
	padding:var(--space-s);
	border-radius:12px;
	text-align:center;
	line-height:1.3;
}
.double-box p{font-size:var(--font-size-xl);color:var(--blue-gray);}
.double-box p + p{margin-top:6px;}
.point-note{
	margin:14px auto 0;
	color:var(--blue-gray);
}

.pc_none {
	display: none;
}

@media (max-width:600px){
	.double-box{
		flex-direction:column;
		text-align:center;
		& .badge {
			width: 100%;
		}
		& .badge br {
			display: none;
		}
		& p {
			text-align: left;
		}
	}
	.pc_none {
		display: block;
	}
}



/* Steps */
.steps{background:var(--white);}
.steps-list{
	margin:0 auto;
	display:flex;
	flex-direction:column;
	gap:28px;
	position:relative;
}
.steps-list::before{
	content:"";
	position:absolute;
	left:39px;top:20px;bottom:20px;
	width:2px;
	background:linear-gradient(to bottom,rgba(224,166,56,.15),var(--gold),rgba(224,166,56,.15));
}
.step{
	display:grid;
	grid-template-columns:80px 1fr;
	background:#fbfcff;
	border:1px solid var(--line);
	border-radius:14px;
	overflow:hidden;
	position:relative;
	z-index:1;
}
.step .num{
	background:linear-gradient(160deg,var(--navy),var(--navy-deep));
	color:var(--white);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	font-weight:900;
	border-right:4px solid var(--gold);
}
.step .num span{font-size:1.1rem;font-weight:700;letter-spacing:.05em;}
.step .num strong{font-size:2.6rem;line-height:1;margin-top:2px;}
.step .content{padding:20px 22px;}
.step h3{
	font-size:var(--font-size-2xl);
	font-weight:700;
	color:var(--navy);
	margin-bottom:12px;
}
.step .action-row{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin-bottom:12px;
}
.step .action{
	flex:1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width:220px;
	background:var(--white);
	border:1px solid var(--line);
	border-radius:10px;
	padding:14px 16px;
	font-size:var(--font-size-lg);
}
.step .action .label{
	display:block;
	font-weight:700;
	color:var(--blue);
	margin-bottom:4px;
}
.step .action .url{
	display:block;
	font-size:var(--font-size-lg);
	color:var(--blue-gray);
	word-break:break-all;
}
.step .sub-row{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	margin-top:10px;
}
.step .sub{
	flex:1;
	min-width:220px;
	background:var(--blue-light);
	border-radius:10px;
	padding:12px 14px;
	font-size:var(--font-size-lg);
}
.step .sub .tag{
	display:block;
	background:var(--navy);
	color:var(--white);
	font-size:1.1rem;	font-weight:700;
	margin-bottom:6px;
	padding:8px;
	text-align: center;
	border-radius:99px;
}
.step p.desc{font-size:var(--font-size-lg);color:var(--blue-gray);}

@media (max-width:600px){
	.steps-list::before{left:29px;}
	.step{grid-template-columns:60px 1fr;}
	.step .content{padding:16px;}
	.step h3{font-size:var(--font-size-xl);}
}

/* Attention */
.attention{background:var(--blue-light);}
.attn-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:0 40px;
	max-width:var(--max-wd);
	margin:0 auto;
}
.attn-grid ul{font-size:var(--font-size-lg);color:var(--blue-gray);}
.attn-grid li{
	margin-bottom:10px;
}
@media (max-width:768px){
	.attn-grid{grid-template-columns:1fr;gap:0;}
}

.contact-box{
	max-width:840px;
	margin:40px auto 0;
	background:var(--white);
	border:1px solid var(--line);
	border-radius:14px;
	padding:26px 30px;
	text-align:center;
	box-shadow:0 10px 24px rgba(11,47,107,.06);
}
.contact-box p{font-size:var(--font-size-lg);color:var(--blue-gray);margin-bottom:14px;}
.contact-box .tel{
	font-size:var(--font-size-3xl);
	font-weight:900;
	color:var(--navy);
	letter-spacing:.02em;
}
.contact-box .company{font-weight:700;color:var(--navy);font-size:var(--font-size-xl);margin-bottom:4px;}
.contact-box .time{font-size:var(--font-size-xl);color:var(--blue-gray);margin-top:6px;}

/* Bonus banner */
.bonus{
	background:var(--cream);
	border-top:3px solid var(--gold-deep);
	border-bottom:3px solid var(--gold-deep);
}
.bonus_inner{
	max-width:var(--max-wd);
	display:flex;
	margin:0 auto;
	padding: var(--space-md);
	align-items:center;
	gap:26px;
	flex-wrap:wrap;
	justify-content:center;
	text-align:left;
}

.bonus_main{
	flex:1;
	& .lead,p a {
		font-size:var(--font-size-2xl);font-weight:700;
		color:var(--navy);
		margin-bottom:var(--space-s);
		text-align: center;
	}
	& img {
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
	}
	& p {
		margin-top: var(--space-s);
		text-align: center;
	}
}

/* CTA / Footer */
.cta-fixed{
	position:fixed;
	left:0;bottom:0;
	width:100%;
	z-index:50;
	background:rgba(6,20,54,.75);
	backdrop-filter:blur(2px);
	padding:14px 16px;
	text-align:center;
}
.cta-fixed a{
	display:inline-block;
	background:var(--yellow);
	color:#000;
	font-weight:900;
	font-size:var(--font-size-xl);
	padding:12px 60px;
	border-radius:99px;
	box-shadow:0 8px 20px rgba(0,0,0,.3);
	position:relative;
	text-decoration: none;
}
.cta-fixed a:hover{filter:brightness(1.05);}
.cta-fixed a::after{content:" ▶";}

.footer{
	background:var(--navy-deep);
	color:#8fa0c9;
	text-align:center;
	padding:26px 0 100px;
	font-size:1.2rem;
}

@media (max-width:768px){
	.cta-fixed a{font-size:var(--font-size-xl);padding:10px 40px;}
}