@charset "UTF-8";
@import "https://fonts.googleapis.com/earlyaccess/notosansjapanese.css";
* {
  font-family: YakuHanJP, 'Noto Sans JP', 'noto-fallback', 'rome_num', sans-serif;
}
/*----- 基本設定 -----*/
body {
	overflow-x: hidden;
	color: #474c57; /* 基本の文字色 */
	background-color: #fff; /* 基本の背景色を白に */
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.7;
	font-size: 1.6rem; /* 基本フォントサイズを明示 */
}
/*================================================
 *  CSS設定
 ================================================*/

.tar{
	text-align: right;
}
.w80per{
	width:80%;
}
.w70per{
	width:70%;
}
.w60per{
	width:60%;
}
.mg-2{
	margin: 2rem auto;
}
.mg-3{
    margin: 3rem auto !important;
}
.mg-5{
    margin: 5rem auto !important;
}
.mg-10{
    margin: 10rem auto !important;
}
.pb-10{
	padding-bottom:1rem;
}
.m50{
	margin: 5rem auto;
}
.pt30{
	padding-top: 3rem;
}
.pd30{
	padding: 3rem 0;
}
.mt30{
	margin-top: 3rem !important;
}
.mt50{
	margin-top: 5rem !important;
}
.mb30{
	margin-bottom: 3rem !important;
}
.mb40{
	margin-bottom: 4rem !important;
}
.mb50{
	margin-bottom: 5rem !important;
}
.ptb50{
	padding-top:50px !important;
	padding-bottom:10px !important;
}

.pcOnly{
	display:inline-block;
}
.spOnly{
	display:none;
}

:root {
  --green:       #00913A;
  --green-dark:  #0A5A2A;
  --green-mid:   #007A30;
  --green-light: #F0FAF4;
  --lime:        #C8E600;
  --lime-dark:   #A8C200;
  --navy:        #0D2B55;
  --gray:        #787878;
  --gray-light:  #F2F2F2;
  --gray-border: #E0E0E0;
  --white:       #FFFFFF;
  --off-white:   #FAFAFA;
  --forlink:	#345CE0;
  --skyblue:	#EFFAF4;

  --font-jp: 'Noto Sans JP','Hiragino Sans',sans-serif;
  --font-en: 'Inter',sans-serif;

  /* 角丸を大きくして柔らかく */
  --r4:  4px; --r8:  8px; --r12: 12px;
  --r20: 20px; --r24: 24px; --r32: 32px;

  /* ソフトシャドウ */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 6px 24px rgba(0,0,0,.09);
  --shadow-green: 0 6px 24px rgba(0,145,58,.14);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-jp); background: var(--white); color: #333; line-height: 1.7; font-size: 15px; }

section a{
	color: var(--forlink);
	text-decoration:underline;
}

/* ── NAV ── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--green-dark);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px; height: 60px;
}
.nav-logo { font-family: var(--font-en); font-weight: 700; font-size: 20px; color: var(--white); letter-spacing: .08em; }
.nav-logo span { color: var(--lime); }
.nav-links { display: flex; gap: 32px; }
.nav-links a { color: rgba(255,255,255,.75); text-decoration: none; font-size: 13px; font-weight: 500; }
.nav-links a:hover { color: var(--white); }
.nav-cta {
  background: var(--lime); color: var(--green-dark);
  border: none; border-radius: 100px;
  padding: 9px 22px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: var(--font-jp);
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 8px rgba(200,230,0,.4);
}
.nav-cta:hover { background: var(--lime-dark); }

/* ── HERO ── */
.hero {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  padding: 70px 60px 30px;
  color: var(--white);
  position: relative; overflow: hidden;
}
/* 背景の装飾円 */
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.hero::before { width: 500px; height: 500px; top: -200px; right: -100px; }
.hero::after  { width: 300px; height: 300px; bottom: -100px; left: 10%; }

.hero-inner { display: flex; align-items: center; gap: 20px; max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.hero-content { flex: 1; min-width: 0; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(200,230,0,.18); border: 1px solid rgba(200,230,0,.4);
  color: var(--lime); font-size: 16px; font-weight: 700;
  padding: 5px 14px; border-radius: 100px; margin-bottom: 20px;
  letter-spacing: .08em; font-family: var(--font-en);
}
.hero h1 { font-size: 44px; font-weight: 700; line-height: 1.35; margin-bottom: 16px; color: var(--white); }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero-sub { font-size: 16px; color: rgba(255,255,255,.8); margin-bottom: 36px; line-height: 1.8; }
.hero-steps { display: flex; align-items: center; }
.hero-step {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r20); padding: 14px 10px;
  text-align: center; flex: 1; backdrop-filter: blur(4px);
}
.hero-step-num { font-family: var(--font-en); font-size: 20px; font-weight: 700; color: var(--lime); letter-spacing: .1em; margin-bottom: 4px; }
.hero-step-text { font-size: 16px; font-weight: 700; line-height: 1.4; }
.hero-arrow { color: rgba(255,255,255,.3); font-size: 20px; padding: 0 10px; flex-shrink: 0; }
.hero-note { font-size: 16px; color: rgba(255,255,255,.45); margin-top: 14px; }
/* 画像エリア */
.hero-visual {
	flex-shrink: 0; width: 500px;
  align-items: center; justify-content: center;
  display: flex;
/*   aspect-ratio: 4/3;
  background: rgba(255,255,255,.08);
  border: 2px dashed rgba(255,255,255,.25);
  border-radius: var(--r24);
  flex-direction: column;
  gap: 12px; color: rgba(255,255,255,.4);
  font-size: 12px; text-align: center; line-height: 1.7;
  overflow: hidden;
*/
}

.hero-visual img {
	width: 100%; height: 100%; object-fit: cover;
	/*border-radius: var(--r24);*/
}


.heroLogo{
	position:absolute;
	top:1rem;
	left: 1rem;
}
.heroLogo img {
filter: brightness(0) invert(1);
width:100%;
max-width:160px;
}
.heroLogo:hover img {
	opacity:0.5;
	transition:0.7s;
}


/* ── ウェーブ区切り ── */
.wave-divider { display: block; width: 100%; height: 60px; margin-bottom: -2px; }
.wave-divider-flip { display: block; width: 100%; height: 60px; margin-top: -2px; }

/* ── セクション共通 ── */
.section { padding: 80px 0; }
.section-alt { background: var(--off-white); }
.section-bg-green { background: var(--green-light); }
.section-inner { max-width: 1100px; margin: 0 auto; }

.sectionFlex{
	display:flex;
	gap:20px;
}
.sectionFlex .swiper{
	width: 400px;
	cursor: grab;
}
.sectionFlex .swiper .swiper-wrapper .swiper-slide{
	align-items:end;
	display:flex;
}
.sectionFlex .swiper .swiper-wrapper img{
	height: 270px;
	object-fit:contain;
}


.section-label {
  font-family: var(--font-en); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; color: var(--green);
  text-transform: uppercase; margin-bottom: 8px;
}
.section-title { font-size: 4.2rem; font-weight: 700; margin-bottom: 30px; line-height: 1.4; color: var(--green-dark); }
.section-sub { font-size: 16px; color: #333; max-width: 1000px; line-height: 25px; }
.section-sub-c { font-size: 16px; color: #333; max-width: 1000px; line-height: 25px; text-align:center; margin: 0 auto 4rem; }
.section-head { margin-bottom: 40px; }

/* ── 基本構成フロー ── */
.base-flow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.base-block {
  background: var(--white); border: 1.5px solid var(--gray-border);
  border-radius: var(--r20); padding: 18px 24px;
  flex: 1; min-width: 148px; box-shadow: var(--shadow-sm);
}
.base-block.hl { border-color: var(--green); background: var(--green-light); display:flex; flex-direction:column; }
.base-block-label { font-size: 14px; font-weight: 700; color: var(--gray); letter-spacing: .06em; margin-bottom: 5px; }
.base-block.hl .base-block-label { color: var(--green); }
.base-block-name { font-size: 16px; font-weight: 700; margin-bottom: 5px; flex-grow:1;}
.base-block-note { font-size: 14px; color: #333; }
.base-plus { display: flex; align-items: center; color: var(--green); font-size: 22px; padding: 0; flex-shrink: 0; font-weight: 300; }
.base-note {
  background: #FFFBEB; border: 1px solid #F5D020;
  border-radius: var(--r12); padding: 14px 18px;
  font-size: 16px; color: #7A5F00; line-height: 1.75;
  margin-bottom: 30px; display: flex; align-items: flex-start; gap: 8px;
}
.base-note::before { content: '⚠️'; flex-shrink: 0; }
.base-custom {
  background: var(--white); border: 1px solid var(--gray-border);
  border-radius: var(--r20); padding: 20px 24px;
  font-size: 16px; color: #333; line-height: 2;
  box-shadow: var(--shadow-sm);
}
.base-custom strong { color: #333; }
.base-custom-title {
  font-size: 2.2rem; font-weight: 700; color: var(--green-dark);
  line-height:1.5;
  margin-bottom: 15px; display: flex; align-items: center; gap: 10px;
}
.base-custom-title::before {
  content: ''; display: block; width: 4px; height: 26px;
  background: var(--green); border-radius: 2px; flex-shrink: 0;
}

/* ── 2つのセット構成 ── */
.sets-grid { display: grid;
	grid-template-columns: 330px 1fr 330px;
	gap: 28px;
	max-width: 990px;
	margin: 0 auto;
}
.set-card {
  background: var(--white);
  border-radius: var(--r24);
  transition: all .25s;
  text-decoration: none; color: inherit; display: block;
  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.15));
}
/*
.set-card:hover { 
border-color: var(--green); box-shadow: var(--shadow-green); transform: translateY(-4px);
color:unset;
}


.set-card-img-ph {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.set-card-header { padding: 20px 24px 14px; border-bottom: 1px solid var(--gray-border); text-align:center; }
.set-type-badge {
  display: inline-block; font-size: 1.4rem; font-weight: 700;
  letter-spacing: .06em; padding: 4px 12px;
  border-radius: 100px; margin-bottom: 10px;
  font-family: var(--font-en);
}
.badge-drawer { background: #FEF3C7; color: #92400E; }
.badge-auto   { background: var(--green-light); color: var(--green-dark); }
.set-card-body { padding: 18px 24px; }
*/
.set-items-title { font-size: 14px; font-weight: 700; color: var(--gray); letter-spacing: .08em; margin-bottom: 10px; font-family: var(--font-en); }
.set-items { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.set-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.set-item::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-top: 7px; flex-shrink: 0; }
.set-item-note { font-size: 12px; color: var(--gray); display: block; margin-top: 1px; }

/*
.set-card-cta {
  padding: 14px 24px; background: var(--green-light);
  border-top: 1px solid var(--gray-border);
  font-size: 14px; color: var(--green); font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.set-card-cta::after { content: '→'; font-size: 14px; }
.set-card:hover .set-card-cta { background: var(--green); color: var(--white); }
*/
.set-cardGrid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:1rem;
	padding:1rem;
	position:relative;
	z-index:1;
}
.set-cardGrid::before {
  content: "";
  position: absolute;
  top: 30%;
  right: 0;
  border-style: solid;
  border-width: 0 0 32px 146px;
  border-color: transparent transparent transparent #ffffff;
  translate: 100% -50%;
  transform: skew(0, -4deg);
  transform-origin: left;
  z-index: 2;
  
}


.grid-title{
	font-size: 2rem; font-weight: 700; line-height: 1.4; color: var(--green-dark); text-align:center;
	grid-column: 1 / -1;
}

.set-cardCenter{
	position:relative;
	display: flex;
	/* flex-wrap: wrap; */
	flex-direction: column;
	justify-content: center;
	/* grid-template-columns: repeat(1, 1fr); */
	gap:1rem;
	text-align:center;
	background:unset;
	box-shadow:unset;
}
.set-cardCenter-img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.set-cardCenter-img img { width: 100%; height: 100%; object-fit: contain; }
.set-cardCenter .set-card-pop {
	font-size: 20px;
	font-weight: bold;
	color: var(--green-dark);
	border-radius: 50%;
	height: 100px;
	width: 90%;
	margin: 0 auto;
	box-shadow: var(--shadow-md);
	background:#fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border:1px solid #00913A;

}



.grid-title{
	font-size: 2rem; font-weight: 700; line-height: 1.4; color: var(--green-dark); text-align:center;
	grid-column: 1 / -1;
}

.set-cardRight{
  background: var(--white);

  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.15));
  border-radius: var(--r24);
  transition: all .25s;
  text-decoration: none; color: inherit; display: block;
	padding:1rem;
	position:relative;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap:1rem;
	text-align:center;
}
.set-cardRight::before {
  content: "";
  position: absolute;
  bottom: 40%;
  left: 0;
  border-style: solid;
  border-width: 0 120px 32px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: -100% -50%;
  transform: skew(0, -4deg);
  transform-origin: right;
  z-index: 2;
}

.set-cardRight .body-card{
	padding: 2rem 5px;
}

.set-name { 
	font-size: 13px;
	position:relative;
}
.set-name:before {
	content:"\f058";
	color: var(--green-dark);
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
	padding-right:0.5rem;
}
.set-card-img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap:2rem;
  margin: 2rem auto;
}
.set-card-img img { width: 40%; object-fit: contain; }

.set-card-name{
/*	width:80%;
	margin: 0 auto;
	text-align:center;
	color:#fff;
	border-radius: var(--r4);
	background:#85D2AC;
	font-size:14px;
	font-weight:bold;
	padding: 0.8rem;
*/
font-size: 16px; font-weight: bold;
}
.set-card-name small{
	font-size:12px;
}

.set-note { font-size: 1.4rem; color: #333; line-height: 25px; text-align:right; width:100%; max-width:990px; margin: 16px auto 2rem;}

.setRegu{
  border-radius: var(--r24);
  	padding:2rem;
	position:relative;
/*
	display: grid;
	grid-template-columns: 0.8fr 1fr 1fr 1fr 1fr;
*/
	display:flex;
	gap:0;
	align-items:center;
	border: 1px solid;
	border-color:var(--green-dark);
	background:#fff;
	width:100%;
	max-width: 990px;
	margin: 0 auto;
	justify-content:space-between;
}
.regu-title{
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--green-dark);
	text-align:center;
	width: 15%;
}
.setRegu dl{
  display: grid;
  grid-template-columns: auto 1fr; 
  column-gap: 5px;
  row-gap: 0;
  align-items: center;
  position:relative;
  width: 20%;
 }
.setRegu dl:after{
	content:"＋";
	color:var(--green);
	font-size:15px;
	position:absolute;
	right: 0;
}
.setRegu dl:last-child::after{
	content:"";
}
 
.setRegu dl dt{
  grid-column: 1;
  grid-row: 1 / span 2;
  border-radius: 50%;
  background: var(--green-dark);
  color:#fff;
  font-size:14px;
  font-weight:500;
  line-height:24px;
  width:24px;
  height:24px;
  text-align:center;
  }
.setRegu dl dd{
  grid-column: 2;
  margin: 0;
}
.setRegu dl .regu-name{
  font-size:15px;
  font-weight:600;
  line-height:1;
  color:#333;
}
.setRegu dl .regu-txt{
  font-size:12px;
  line-height:1.4;
  color:#333;
}




.styleBox{
	margin: 0 auto 10rem;
}
.styleBox:nth-of-type(2){
	margin: 0 auto 5rem;
}
.style-title{
	font-size:32px;
	font-weight:bold;
	color:#022752;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom:2rem;
}
.style-title span{
	color:#fff;
	background:#022752;
	width: 32px;
	height:32px;
	border-radius:50%;
	text-align:center;
	line-height:32px;
	font-size:16px;
	margin-right:1rem;
	display:inline-block;
}
.style-title + p{
	font-size:16px;
	line-height:25px;
	color:#333;
	margin-bottom:4rem;
	text-align:center;
}

.styleFlex{
	display: flex;
	align-items: center;
	justify-content: center;
	gap:10rem;
	margin: 0 auto 5rem;
	text-align:center;
	color:#333;
}

.styleDet{
	text-align:center;
	position:relative;
}
.styleDet:not(:last-child)::after{
	content:"or";
	position:absolute;
	right:-6rem;
	top: 35%;
	font-weight:bold;
	font-size:24px;
}

.styleImg{
	position:relative;
	text-align:center;
}
.styleRegi{
	color:#fff;
	border-radius: 50px;
	width:130%;
	max-width:300px;
	background:#018C39;
	position:absolute;
	bottom: -28px;
	line-height:56px;
	left: calc(50% - 65%);
	font-size:24px;
	font-weight:bold;
}
.styleDet:nth-of-type(2) .styleRegi{
	background:#022852;
}
.styleDet:nth-of-type(3) .styleRegi{
	background:#047DBE;
}

.styleDlFlex{
	position:relative;
	display:flex;
	align-items: center;
	justify-content: center;
	gap:5rem;
	margin: 4rem auto 0;
}
.styleDlFlex dl{
	display: flex;
	flex-direction:column-reverse;
	position:relative;
}
.styleDlFlex dl:not(:last-child)::after{
	content:"＞";
	position:absolute;
	right:-3.4rem;
	top: 26%;
	font-size:16px;
}
.styleDlFlex dt{
	font-size:24px;
	font-weight:bold;
}
.styleDlFlex dt span{
	color:#CB6600;
}
.styleDlFlex dd{
	font-size:16px;
}



.styleFlex2{
	display: flex;
	justify-content: center;
	gap:3rem;
	margin: 0 auto 5rem;
	text-align:center;
	color:#333;
	width:100%;
	max-width:990px;
}
.styleDet2{
	text-align:center;
	position:relative;
	display: flex;
	gap:1rem;
	width: 100%;
	flex-direction: column;
}
.styleH4{
	font-size:16px;
	font-weight:bold;
	line-height:25px;
	color:#022752;
	background:#EFFAF4;
	border-radius:20px;
	width:100%;
	padding: 0.8rem;
	display:flex;
	align-items:center;
	justify-content: center;
	text-align:center;
	height:70px;
}


.styleTxt{
}
.styleTxt dt{
	font-size:16px;
	font-weight:bold;
}
.styleTxt dd{
	font-size:14px;
	text-align:left;
}

  .bpRe-btn {
    display: block;
    margin: 0 auto;
    padding: 0 10px;
    border:#10695e 1px solid;
    border-radius: 30px;
    color: #10695E !important;
    line-height: 56px;
    font-size: 1.6rem;
	font-weight:bold;
    transition: 0.2s;
	width: fit-content;
	text-decoration:none;
	min-width:306px;
	text-align:center;
}

.bpRe-btn:hover {
    opacity:0.8;
}







/* ── 本体スクロール ── */
.bodies-scroll { display: flex; gap: 18px; overflow-x: auto; padding: 0 5px 20px; -ms-overflow-style: none; scrollbar-width: none;justify-content: space-around; min-width: 1100px; }
.bodies-scroll::-webkit-scrollbar { display: none; }
.body-card {
  background: var(--skyblue); 
  border-radius: var(--r24);
  transition: none; position: relative;
  /*box-shadow: var(--shadow-sm); cursor: default;*/
  padding: 1rem 5px;
}
.body-card.standard {grid-column: 1 / -1;display: flex;align-items: center;justify-content: center;gap: 0rem;
	padding: 2rem;}

.standard-badge {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background: var(--green); color: var(--white);
  font-size: 12px; font-weight: 700; padding: 4px 14px;
  border-radius: 0 0 10px 10px; white-space: nowrap; z-index: 2;
}
/* 画像エリア大きめ */
.body-img {
  width: 80%; height: 90px;
  display: flex; align-items: center; justify-content: center;
margin: 0 auto;
}
.body-card.standard .body-img {
  width: 40%;
  height: auto;
  padding: 0;
}


.body-img img { width: 100%; height: 100%; object-fit: contain;  }
.body-img-ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--gray); font-size: 10px; }
.body-info {  }
.body-name { font-size: 10px; font-weight: 400; margin-bottom: 10px; color: #333; text-align:center; }
.body-name strong { font-size:16px;font-weight: bold;  }
/*
.body-spec { font-size: 12px; color: #333; line-height: 1.5; }
.body-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.body-tag { font-size: 12px; padding: 4px 8px; border-radius: 100px; background: var(--green-light); color: var(--green); font-weight: 700; }
.body-tag-std { background: var(--green); color: var(--white); }
*/
/* ── 釣銭機 ── */
.cash-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; max-width: 1100px; }
.cash-card {
  background: var(--white); border: 1.5px solid var(--gray-border);
  border-radius: var(--r24); overflow: hidden;
  transition: none; box-shadow: var(--shadow-sm); cursor: default;
}
/* 画像エリア */
.cash-img {
  width: 100%; height: 160px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
padding: 30px 10px 0;
}
.cash-card:nth-of-type(2) .cash-img,
.cash-card:nth-of-type(4) .cash-img {
padding: 10px 10px 0;
}
.cash-img img { width: 100%; height: 100%; object-fit: contain;}
.cash-img-ph { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--gray); font-size: 11px; text-align: center; }
.cash-info { padding: 16px 18px 18px; }
.cash-name { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: #333; }

.cash-model { font-size: 12px; color: #333; }

/* ── 価格パネル ── */
.pricing-wrap { max-width: 1100px; margin: 0 auto; }
.pricing-wrap p { font-size:16px;color:#333;margin-bottom:28px;}
.pricing-set-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 32px;
  padding-bottom: 16px; border-bottom: 2.5px solid var(--green);
  justify-content: center;
}
.pricing-set-title { font-size: 4.2rem; font-weight: 700; color: var(--green-dark); text-align:center; }

.pc-models-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-bottom: 24px; }
.pc-model-card {
  background: var(--white); border: 2px solid var(--gray-border);
  border-radius: var(--r20); padding: 14px 10px 12px;
  text-align: center; cursor: pointer; transition: all .2s; position: relative;
  box-shadow: var(--shadow-sm);
}
.pc-model-card:hover { border-color: var(--green); background: var(--green-light); box-shadow: var(--shadow-green); transform: translateY(-2px); }
.pc-model-card.selected { border-color: var(--green); background: var(--green-light); box-shadow: var(--shadow-green); }
/*
.pc-model-card.selected::after { content: '✓'; position: absolute; top: 7px; right: 10px; font-size: 10px; font-weight: 700; color: var(--green); }
*/
.pc-model-img { width: 54px; height: 54px; background: var(--gray-light); border-radius: var(--r12); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pc-model-card.selected .pc-model-img { background: rgba(0,145,58,.1); }
.pc-model-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pc-model-name { font-size: 16px; font-weight: 700; }

.price-panel {
  background: var(--white); border: 1.5px solid var(--gray-border);
  border-radius: var(--r24); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.price-panel-header {
  background: var(--green-dark); color: var(--white);
  padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.price-panel-model { font-size: 2.3rem; font-weight: 700; }
.price-panel-sub { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
.price-panel-badge {
  background: rgba(200,230,0,.2); border: 1px solid rgba(200,230,0,.4);
  color: var(--lime); font-size: 14px; font-weight: 700;
  padding: 5px 14px; border-radius: 100px; font-family: var(--font-en);
}
.price-contents-col {  padding: 30px 28px;display: flex; gap: 0;align-items: center;}
.price-main {flex: 1; min-width: 0; }
.price-main-label { font-size: 14px; color: #666; margin-bottom: 4px; font-weight: 500; }
.price-main-amount { font-family: var(--font-en); font-size: 24px; font-weight: 700; color: var(--green-dark); letter-spacing: -.01em; line-height: 1.4; margin-bottom:36px; }
.price-main-amount span { font-size: 3.2rem; font-weight: 700; color: var(--green-dark); }
.price-main-amount .tax { font-size: 14px; font-weight: 400; color: #666; margin-left: 6px; }
.price-contents { min-height: 146px; }
.price-contents-title { font-family: var(--font-en); font-size: 14px; font-weight: 700; color: var(--gray); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.price-img-ph {
  width: 400px;
  /* flex-shrink: 0; */
  height: auto;
  /* max-height:250px; */
  /*
  background: var(--gray-light); border-radius: var(--r20);
  border: 2px dashed var(--gray-border);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; color: var(--gray); font-size: 11px; text-align: center; line-height: 1.6;
  overflow: hidden;
  */
}
.price-img-ph img {width: 100%;height: 100%;max-height: 250px;object-fit: contain;border-radius: var(--r20);}
.price-include-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.price-include-item { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; }
.check-icon { width: 20px; height: 20px; background: var(--green-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.check-icon svg { width: 11px; height: 11px; }
.price-include-note {font-size: 14px;color: #333;display: inline-block;padding-left: .5em;/* margin-top: 1px; */}
















/* 釣銭機セレクタ */
.semiselfTxt{
	background:#F0FAF4;
	border: 2px solid #00913A;
	color:#333;
	width: 100%;
	padding: 3rem 4rem 2rem;
	font-weight:bold;
	border-radius:24px;
	margin: 0 auto 5rem;
	display:flex;
	justify-content: center;
	align-items: baseline;
	gap:2rem;
}
.semiselfTxt p:nth-of-type(1){
	color:#cb6600;
	font-size:30px;
	margin-bottom:unset;
}
.semiselfTxt p:nth-of-type(1) span{
	color:#333;
}
.semiselfTxt p:nth-of-type(2){
	font-size:24px;
	margin-bottom:unset;
}
.semiselfTxt p:nth-of-type(2) span{
	font-size:58px;
}

/* S1000バナー */
.s1000-banner {
  background: #fff;
  color: #333;
  border-radius: 10px;
  border:1px solid #0B5B2A;
  padding: 10px 30px 10px 5px;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 5rem;
  box-shadow: var(--shadow-md);
}
.s1000-label {
	font-family: var(--font-en);
	font-size: 10px;
	font-weight: 700;
	color: rgba(255,255,255,.5);
	letter-spacing: .08em;
	margin-bottom: 4px;
	}
.s1000-name { 
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 4px;
	}
.s1000-price {
	font-size: 16px;
	font-weight: normal;
	}
.s1000-price span {
	font-size: 2em;
	font-weight: bold;
	color: #ab1d1c;
	margin-left: 2px;
	}
.s1000-note {
	font-size: 16px;
	color: rgba(255,255,255,.75);
	flex: 1;
	line-height: 1.75;
	}
.price-note {
	font-size: 1.4rem;
	color: #333;
	margin-top: 16px;
	line-height: 25px;
	padding-left:1em;
	margin-left:auto;
	width: fit-content;
	}
.s1000-title {
	width: auto;
}
.s1000-contents {
	padding: 30px;
	background:#f2f2f2;
	}
.s1000-contents p{
	font-weight:bold;
	font-size:16px;
	margin-bottom:2rem;
}
.s1000-contents ul{
	display:flex;
	flex-wrap:wrap;
	font-size:16px;
	font-weight:normal;
	}
.s1000-contents li{
}
.s1000-contents li:not(:last-child)::after{
	content: "／";
	margin: 0 5px;
}


.s1000-img-ph {
  width: 300px;
}
.s1000-img-ph img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── CTA ── */
.cta-section {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  text-align: center; padding: 88px 64px; color: var(--white);
  position: relative; overflow: hidden;
}
.cta-section.dark {
	background:var(--green-dark);
	padding:48px 64px
}
.cta-section.dark:after{
  content: ''; position: absolute; position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(200,230,0,.05);bottom:-80px;left:8%;pointer-events:none;
}
.cta-section::before {
  content: ''; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.04);
  width: 400px; height: 400px; top: -150px; right: 5%;
}

.cta-section h2 { font-size: 30px; font-weight: 700; margin-bottom: 12px; position: relative; }
.cta-section p { font-size: 15px; color: rgba(255,255,255,.75); margin-bottom: 36px; position: relative; }

.ctaColumn{
	display:flex;
	flex-direction:column-reverse;
}
.cta-section .ctaColumn  h2 { margin-bottom: 24px;}
.cta-section .ctaColumn  p { margin-bottom: 5px;}

.cta-btns { display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; }
.btn-primary {
  background: var(--lime); color: var(--green-dark);
  border: none; border-radius: 100px;
  padding: 16px 40px; font-size: 16px; font-weight: 700;
  cursor: pointer; font-family: var(--font-jp);
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(200,230,0,.4);
}
.btn-primary:hover { background: var(--lime-dark); transform: translateY(-1px); color:#fff; transition:0.4s;}
.btn-secondary {
  background: transparent; color: var(--white);
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 100px;
  padding: 15px 32px; font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: var(--font-jp);
}
.btn-secondary:hover { border-color: rgba(255,255,255,.9); }


.section-table{
}
.section-titleH3 {
  font-size: 2.2rem; font-weight: 700; color: var(--green-dark);
  line-height:1.5;
  margin-bottom: 15px; display: flex; align-items: center; gap: 10px;
}
.section-titleH3::before {
  content: ''; display: block; width: 4px; height: 30px;
  background: var(--green); border-radius: 2px; flex-shrink: 0;
}
.dlFlex{
  display:grid;
  grid-template-columns: 1fr 1fr;
  background:var(--white);
  border:1.5px solid var(--gray-border);
  border-radius:var(--r20);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.dlFlex dt{
  background:var(--green-dark);
  color:var(--white);
  padding:12px 24px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  border-bottom:1px solid var(--gray-border);
}

.dlFlex dd{
  padding:16px 24px;
  font-size:14px;
  border-bottom:1px solid var(--gray-border);
  display:flex;
  align-items:center;
}

/* 右列の縦線 */
.dlFlex dt:nth-of-type(2),
.dlFlex dd:nth-of-type(2n){
  border-left:1px solid var(--gray-border);
}

/* 偶数行の背景 */
.dlFlex dd:nth-of-type(4n-1),
.dlFlex dd:nth-of-type(4n){
  background:var(--off-white);
}

/*
footer { background: var(--navy); padding: 24px 40px; text-align: center; font-size: 11px; color: rgba(255,255,255,.35); }
*/

/* ── クリック可能要素の明確化 ── */
/* 非クリック要素（base-block, set-card-body, price-panel等）はcursorデフォルト */
.base-block, .price-panel, .price-contents, .cash-card { cursor: default; }
/* クリック可能ボタン系は必ずpointer＋下線なし */
a, button, .pc-model-card, .changer-option, .nav-cta { cursor: pointer; }
/* set-cardのリンクらしさを強調 */
.set-card { outline: none; }
.set-card:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }


@media screen and (max-width: 1024px) {


.pcNot{
	display:block;
}
.hero{
	padding: 8rem 3rem 3rem;
}
.section{
	padding: 8rem 3rem;
}
/*
.hero{
	padding: 8rem 3rem 3rem;
}

.hero-inner {
	  padding: 0;
	  min-height: 400px;
}
.section-inner,
.pricing-wrap{
	padding: 0 3rem;
}
*/
}

@media screen and (max-width: 1023px) {
/*

.hero-content{
	width:60%;
}
.hero-steps{
	width: calc(100vw - 60px);
	margin: 0 calc(50% - 50vw + 30px);
}
.hero-inner .hero-visual {
	position:absolute;
	top: -15%;
	width: 30%;
	right: -2%;
}
*/
.hero{
	padding: 8rem 3rem 3rem;
}
.hero-inner {
	gap:1rem;
}
.hero-inner .hero-visual{
	width:37%;
}
.hero h1{
	font-size:5.4vw;
}
.hero-content{
	width:100%;
}

.section{
	padding: 5rem 3rem;
}
.sectionFlex .swiper{
	width: 36%;
}

.base-note{
	flex-wrap:wrap;
}

/* ── 2つのセット構成 ── */
.sets-grid {
	grid-template-columns: 1fr 1fr 1fr;
}
.set-cardCenter .set-card-pop{
	font-size:2.3vw;
}

.set-item {
	flex-wrap: wrap;
	gap:0px 10px;
}
.set-item-note {
	width: 80%;
	padding: 0 0 0 15px;
}
.section-title{
	font-size:5vw;
}
.style-title{
	font-size:4vw;
}
.styleDlFlex{
	flex-direction: column;
}
.styleFlex2{
	gap:2rem;
}
.styleH4{
	font-size: 1.8vw;
	padding: 0.5rem;
	height: 5em;
}
.styleRegi{
	font-size: 2.8vw;
}

.styleDlFlex dl:not(:last-child)::after{
	rotate: 90deg;
	right: calc(50% - 8px);
	top: unset;
	bottom: -56%;
}

.cta-section{
	padding: 5rem 3rem;
}

.cta-section.dark{
	padding: 3rem;
}
.cta-section h2{
	font-size: 4vw;
}

.pricing-set-title{
	font-size: 5vw;
}
.pricing-wrap p{
	margin-bottom: 4rem;
}

.posbox{
	height: auto;
}


.semiselfTxt{
	padding: 3rem 2rem 2rem;
	gap:2rem;
}
.semiselfTxt p:nth-of-type(1),
.semiselfTxt p:nth-of-type(2){
	font-size: 2.6vw;
}
.semiselfTxt p:nth-of-type(2) span{
	font-size:6vw;
}

.s1000-banner {
  gap: 0;
}
.s1000-img-ph{
	width:60%;
}
.s1000-name{
	font-size:3vw;
}
.s1000-contents{
	margin-top:2rem;
	padding: 1.5rem;
}


.base-flow {display: flex;align-items: stretch;gap: 5px;flex-wrap: wrap;margin-bottom: 30px;
justify-content: space-around;}
.base-block {
  padding: 15px 14px;
  flex: 0;
  min-width: 21%;
}

}
/*************************************************************************************/
/*Sp Layout*/
/*************************************************************************************/
@media screen and (max-width: 767px) {
.pcOnly{
	display:none;
}
.spOnly{
	display:block;
}


.hero-inner {
	flex-direction: column-reverse;
}



.hero{
	padding: 8rem 2rem 3rem;
}
.hero-inner {
	flex-direction: column-reverse;
}
.hero h1 {
	font-size: 8vw;
}
.hero-eyebrow{
	margin: 0 auto 20px;
	width: fit-content;
	display: block;
}

.hero-content{
	width:100%;
}
.hero-steps{
	width: 100%;
	margin: 0 auto;
	flex-direction: column;
}
.hero-inner .hero-visual{
	position:unset;
	width: 100%;
}
.hero-inner .hero-visual img{
	width:100%;
}
.hero-step{
	width: 90%;
}
.hero-step br{
	display:none;
}
.hero-arrow {
	transform: rotate(90deg);
}

.section{
	padding:5rem 3rem;
}

.ptb50{
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}


.set-cardGrid::before {
  content: "";
  position: absolute;
  top: unset;
  bottom: -2%;
  right: 0;
  border-style: solid;
  border-width: 0 0 32px 76px;
  border-color: transparent transparent transparent #ffffff;
  translate: -140% 0%;
  transform: skew(0, -4deg);
  transform-origin: left;
  rotate: 90deg;
  z-index: 2;
}

.set-cardCenter .set-card-pop{
	font-size: 5.3vw;
}
.set-cardRight::before {
  content: "";
  position: absolute;
  bottom: unset;
  top: 0;
  left: 0;
  border-style: solid;
  border-width: 0 210px 32px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: 40% -50%;
  transform: skew(0, -12deg);
  transform-origin: right;
  rotate: 90deg;
  z-index: 2;
}

.setRegu{
  flex-direction: column;
  gap: 4rem;
}
.regu-title{
	width: 100%;
}
.setRegu dl{
  width: 100%;
 }
.setRegu dl:after{
	bottom: -3rem;
	right: calc(50% - 7px);
}


.style-title{
	font-size: 6vw;
}
.style-title span{
	flex-shrink: 0;
}

.styleFlex2{
	gap: 4rem;
	flex-direction: column;
}
.styleH4{
	font-size: 3.8vw;
	padding: 0.5rem;
	height: 4em;
}

.styleFlex{
	flex-direction: column;
	gap: 7rem;
}
.styleDlFlex{
	flex-direction: unset;
}
.styleDet:not(:last-child)::after{
	right: calc(50% - 12px);
	bottom: -10%;
	top:unset;
}
.styleDlFlex dl:not(:last-child)::after{
	rotate: unset;
	right: -3.4rem;
	top: 26%;
	bottom: unset;
}
.styleRegi{
	font-size: 5.8vw;
}



.section-inner, .pricing-wrap{
	padding: 0;
}
.base-flow {
	flex-direction: column;align-items: center;
}
.base-block{
	min-width:90%;
}
.base-note{
	justify-content: center;
}

.sectionFlex{
	gap: 10px;
	flex-direction: column-reverse;
}
.sectionFlex .swiper{
	width: 80%;
}

.section-sub-c{
	text-align:left;
}
.section-title{
	font-size: 7vw;
}
.sets-grid,
.opts-grid,
.changer-selector{
	grid-template-columns: repeat(1,1fr);
}

.pc-models-grid{
	grid-template-columns: repeat(2,3fr);
}

.opts-grid{
	gap:5px;
}

.cta-section{
	padding: 50px 20px;
}

.cta-section.dark{
	padding: 30px 20px;
}
.cta-section h2 {font-size: 5.4vw;}

.pricing-set-title {font-size: 5.4vw;}

.price-contents-col {
	padding: 2rem ;
	gap: 10px;
	flex-direction: column-reverse;
}
.price-main-amount{
	margin-bottom: 2rem;
}
.price-img-ph {
  width: 100%;
  flex-shrink: 0;
  height: 200px;
  margin: 0 auto;
}
.price-img-ph img {width: 100%;height: 100%;object-fit: contain;border-radius: var(--r20);max-width: 100%;max-height: 200px;}

.changer-price{
	line-height:1;
}
.price-panel-header {
  flex-direction: column-reverse;
  gap:5px;
}

.pc-model-name{
	font-size:3vw;
}
.s1000-title {width: 100%;}
.s1000-name { font-size: 5vw;}
.s1000-img-ph {
  width: 100%;
  height: 250px;
}
.s1000-img-ph img{
	max-width:unset;
	max-height:unset;
}
.s1000-contents {
	padding: 30px 0 0;display: flex;gap: 15px;align-items: center;flex-direction: column-reverse;
}

.section-titleH3{
	font-size:4.2vw;
}

font.productTitle {
	/* word-break: break-word; */
	margin: 30px 0px 20px !important;
	word-break: auto-phrase;
	}


.style-title + p{
	text-align:left;
}
.semiselfTxt{
	padding: 1rem 2rem;
	gap:1rem;
	flex-direction: column;
	text-align: center;
	align-items: center;
	margin:0 auto 3rem;
}
.semiselfTxt p:nth-of-type(1){
	font-size: 4.6vw;
}
.semiselfTxt p:nth-of-type(2){
	font-size: 3.6vw;
}
.semiselfTxt p:nth-of-type(2) span{
	font-size:7vw;
}


.productImg .r{
     flex-direction: column;
}
.colorbox2{
	margin-top:0 !important;
}
.colorbox2,
.makerbox{
	text-align: center;
	margin-top: 20px;
	width: 100%;

}
.colorwrap,
.makerwrap{
	flex-direction: unset;
	gap: 0;
}
.makerwrap .maker:nth-of-type(1)::after {
	content: "/";
	margin: 0 0 0 3em;
}
.productImg .img{
	margin-top:3rem;
}

.s1000-banner {
  gap: 0;
  flex-direction: column;
  padding: 0 2rem 2rem;
}
.s1000-contents {
	padding: 1rem;
	display: flex;
	gap: 0;
	align-items: center;
	flex-direction: column;
}

.s1000-contents p {
	margin-bottom:1rem !important;
}

.filter2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 0px;
	align-items: center;
}
.filter2 div {
	padding: 10px 25px;
	width: 90%;
	font-size: 3.4vw;
}
.dlFlex dt,
.dlFlex dd{
  padding:12px 12px;
}

}