@charset "utf-8";
header { background: #e5f6ef;
}
header .catch {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Noto Serif JP',sans-serif;
  font-size: 26px;
  line-height: 41px;
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #64a473;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 20px white, 0 0 20px white, 0 0 20px white, 0 0 20px white, 0 0 20px white, 0 0 20px white, 0 0 20px white;
}
header .catch .text-combine{
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
}
header .head-copy .text{
font-size: 16px;
}
@media (max-width: 810px) {
header .head-copy{
width:90%;
top: 56%;
margin-left: -45%;
}
header .head-copy h2{
font-size: 4.6vw;
}
header .head-copy .text{
font-size: 14px;
font-size: 2.5vw;
}
header .mv_slider{
width: 140%;
text-align: center;
}
.slick-track,
.slick-slide{
width: 100% !important;
}
header .mv{
width: 140%;
margin-top: 14.2vw;
}
header .catch {
  font-size: 4vw;
  line-height: 6.7vw;
  padding-top: 3.5em;
  height: 11em;
}
}
@media (min-width: 810px) {
header {
  height: 380px;
  background: #e5f6ef;
}
header nav ul li a{
color: #3c3c3c;
text-shadow: 1px 1px 3px #e5f6ef, -1px -1px 3px #e5f6ef, 1px -1px 3px #e5f6ef, -1px 1px 3px #e5f6ef;
}
header nav ul li.contact a{
text-shadow: 0 0 0;
}
header nav ul li a::before {
  background: #3c3c3c;
}
header nav ul li a::after {
  background: #3c3c3c;
}
header nav ul li.select a{
color: #64A473;
background:url("../img/on2.png") no-repeat center center;
}
header nav ul li.select a::before {
  background: #64A473;
}
header nav ul li.select a::after {
  background: #64A473;
}
header nav ul li.faq a,
header nav ul li.sample a {
  color: #64A473;
  border: 1px solid #64A473;
  line-height: 2;
  background-color: rgba(255, 255, 255, 0.6);
}
header nav ul li.contact a {
  background: rgba(100, 164, 115, 1.0);
  color: #fff;
  line-height: 2;
}
header nav ul li.tel .pc{
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 10px 10px rgba(255 255 255 /80%);
}
header nav ul li.tel a::before,
header nav ul li.tel a::after {
display: none;
}
header .head-copy{
position: absolute;
width: 510px;
margin-left: -255px;
}
header .mv img.pc{
position: absolute;
max-width: 1920px;
left: 50%;
margin-left: -960px;
}
}

/* --------------------------------------
------------------------------------------*/
.clearfix::after {
    content: " ";
    display: block;
    clear: both;
}
img{
max-width: 100%;
}
.pc{
display: block;
}
.sp{
display: none;
}
@media screen and (max-width: 810px) {
.pc{
display: none;
}
.sp{
display: block;
}
.del{
display: none;
}
}

/* --------------------------------------
------------------------------------------*/
h2.title{
display: inline-block;
margin: 0 0 20px;
padding: 0 0 10px;
font-size: 28px;
font-family: 'Sawarabi Gothic', sans-serif;
font-weight: normal;
border-bottom: 1px solid #64A473;
}
h3.copy{
margin: 0 0 1.4em;
color: #64A473;
font-size: 25px;
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Noto Serif JP',sans-serif;
letter-spacing: .14em;
font-weight: bold;
}
@media screen and (max-width: 1280px) {
h3.copy{
  font-size: 24px;
}
}
@media screen and (max-width: 910px) {
h2.title{
  width: 100%;
}
}
@media screen and (max-width: 810px) {
h2.title{
  font-size: 18px;
}
h3.copy{
  font-size: 18px;
  letter-spacing: 0;
}
}
@media screen and (max-width: 360px) {
h2.title{
  font-size: 14px;
}
h3.copy{
  font-size: 16px;
}
}

/* --------------------------------------
------------------------------------------*/

#contact-tel{
clear: both;
overflow: hidden;
width: 85.7vw;
max-width: 1100px;
margin: 0 auto 90px;
padding-top: 90px;
text-align: center;
}
#contact-tel .inner{
padding: 50px;
position: relative;
text-align: center;
background: #F2F2F2;
box-sizing: border-box;
}
#contact-tel img{
max-width: 462px;
}



@media screen and (max-width: 810px) {
#contact-tel{
margin-bottom: 40px;
padding-top: 40px;
}
#contact-tel .inner{
padding: 20px;
}
}

/* --------------------------------------
------------------------------------------*/

#contact-form{
clear: both;
overflow: hidden;
width: 85.7vw;
max-width: 1100px;
margin: 0 auto 90px;
position: relative;
text-align: center;
}



@media screen and (min-width: 810px) {
#text01 .cont .text{
font-size: 16px;
}
#contact-form{
margin-bottom: 40px;
}
}





/*----------------------------------------------------

------------------------------------------------------*/
#contact-form{
clear: both;
overflow: hidden;
width: 85.7vw;
max-width: 1100px;
margin: 0 auto 60px;
text-align: center;
}

#contact-form table{
	border:none;
  width: 100%;
	margin:0 0 2em;
  vertical-align: top;
}
#contact-form table th{
	text-align:left;
	font-size:16px;
	font-weight:bold;
	padding:1em 0;
	width:290px;
  vertical-align: top;
  box-sizing: border-box;
}
#contact-form table th .koumoku{
display: inline-block;
}
#contact-form table th .required{
  float: left;
	color:#fff;
	background:#64A473;
	border:0.5em;
	margin:0 5px 0 0;
	padding:0.2em 1em;
  font-size: 12px;
}
#contact-form table th .no-required{
  float: left;
  color:#414141;
	background:#E9E9E9;
	border:0.5em;
	margin:0 5px 0 0;
	padding:0.2em 1em;
  font-size: 12px;
}
#contact-form table td{
	text-align:left;
	padding:1em 1em;
	font-size:16px;
  vertical-align: middle;
  box-sizing: border-box;
}
#contact-form table td.inquiry-select label{
	font-size:18px;
}
#contact-form table td.sentaku label{
	font-size:18px;
}
#contact-form table td .sub-text{
color: #bf0d23;
}

#contact-form table td input[type=text],
#contact-form table td input[type=email],
#contact-form table td input[type=tel],
#contact-form table td select,
#contact-form table td textarea{
	width:100%;
	border:1px solid #000;
	border-radius: 10px;
	padding:0.5em;
  font-size: 16px;
  box-sizing: border-box;
}



#contact-form table .kugiri td{
padding-left: 0;
padding-right: 0;
}

@media screen and (max-width: 810px) {
#contact-form table th{
clear: both;
display: block;
width: 100%;
padding-bottom: 0;
	font-size:13px;
}
#contact-form table td{
clear: both;
display: block;
width: 100%;
	font-size:13px;
}
#contact-form table th .required{
  font-size: 13px;
  padding: 0.1em 0.5em;
}
#contact-form table th .no-required{
  font-size: 13px;
  padding: 0.1em 0.5em;
}

}

/*--------------------------------*/
#contact-form #ZIP01{
width: 50%;
max-width: 320px;
margin-right: 0.5em;
}
#contact-form #NAME01,
#contact-form #KANA01,
#contact-form #NAME10,
#contact-form #ADDR01{
max-width: 680px;
}
#contact-form #TEL,
#contact-form #FAX,
#contact-form #EMAIL{
max-width: 100%;
}
#contact-form #REMARKS{
clear: both;
max-width: 100%;
}
#contact-form td.inquiry-select label{
display: inline-block;
margin-right: 1.5em;
margin-bottom: 5px;
}

#contact-form td.inquiryd-check label{
display: inline-block;
width: 190px;
margin-bottom: 5px;
}
#contact-form td.inquiryd-check label:nth-child(2n){
margin-right: 300px;
}


#contact-form #zip-btn{
color: #fff;
font-size: 16px;
border: 1px solid #5a5a5a;
border-radius: 18px;
padding: 0.4em 2em;
background: #5a5a5a;
box-sizing: border-box;
vertical-align: top;
}


@media screen and (max-width: 810px) {
#contact-form td.inquiry-select label{
display: block;
margin-right: 0;
margin-bottom: 0;
}
#contact-form td.inquiryd-check label:nth-child(2n){
margin-right: 0;
}
}

/*--------------------------------*/
label.error{
color: #c00;
}
input.error,
select.error,
textarea.error{
border-color:#c00;
background: #fff0f0;
}
/*--------------------------------*/

#contact-btn a{
	display:block;
  width: 100%;
	max-width:292px;
	margin:0 auto 1em;
	padding:0.5em 0.5em !important;
	text-align:center;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	background:#1EBFA0;
	border-radius:10px;
	border:none;
  box-sizing:border-box;
}
#contact-btn input{
	display:block;
  width: 100%;
	max-width:292px;
	margin:0 auto 1em;
	padding:0.5em 0.5em !important;
	text-align:center;
	color:#fff;
	font-size:20px;
	font-weight:bold;
	background:#1EBFA0;
	border-radius:10px;
	border:none;
  box-sizing:border-box;
  cursor: pointer;
}
#contact-btn .btn-send{
	display:block;
  width: 100%;
	max-width:292px;
	margin:0 auto 1em;
	padding:0.5em 0.5em !important;
	text-align:center;
	color:#fff;
	font-size:20px;
  line-height: 2;
  font-weight:bold;
	background:#1EBFA0;
	border-radius:10px;
  box-sizing:border-box;
	border:none;
}
#contact-btn .btn-back{
	display:block;
  width: 100%;
	max-width:292px;
	margin:0 auto 1em;
	padding:0.5em 0.5em !important;
	text-align:center;
	color:#fff;
	font-size:20px;
	font-weight:bold;
  line-height: 2;
	background:#ddd6e0;
	border-radius:10px;
  box-sizing:border-box;
	border:none;
}
@media screen and (max-width: 810px) {
#contact-btn a,
#contact-btn input{
  clear: both;
  float: none;
	font-size:16px;
  max-width: 100%;
}

}

/*----------------------------------------------------

------------------------------------------------------*/

#privacy{
	clear:both;
	border:1px solid #B0B0B0;
	margin:0 0 2.5em;
	padding:2.5em 1em;
}
#privacy .cont{
	text-align:left;
	font-size:16px;
  line-height: 1.8;
	overflow:hidden;
	overflow-y:auto;
	max-height:50px;
}

#privacy h3{
margin: 0 0 1em;
	color:#563265;
	font-weight:bold;
	font-size:112%;
	text-align:center;
}

@media screen and (max-width: 810px) {
#privacy .cont{
	font-size:14px;
  line-height: 1.6;
}
}


/*----------------------------------------------------

------------------------------------------------------*/
.input-btnarea{
max-width: 704px;
margin: 0 auto;
}
.input-btnarea #contact-btn{
float: left;
width:292px;

}

#specifed{
float: right;
margin: 0 0 1.5em;
font-size:15px;
text-align: left
}
#specifed a{
text-decoration: underline;
}
@media screen and (max-width: 810px) {
#specifed{
clear: both;
float: none;
font-size:12px;
}
}


/*----------------------------------------------------

------------------------------------------------------*/
















/*----------------------------------------------------
sample-info
------------------------------------------------------*/
#sample-info {
  clear: both;
  width: 85.7vw;
  max-width: 1100px;
  margin: 0 auto 60px;
  padding-top: 90px;
  text-align: left;
}
#sample-info .inner {
  padding: 50px;
  background: #f7faf8;
  border: 1px solid #c8e0ce;
  box-sizing: border-box;
}
.sample-price {
  font-size: 28px;
  font-weight: bold;
  color: #64A473;
  margin: 0.3em 0 1em;
  font-family: 'Noto Sans JP', sans-serif;
}
.sample-price span {
  font-size: 16px;
  color: #555;
  font-weight: normal;
  margin-left: 0.3em;
}
.sample-lead {
  margin-bottom: 2em;
  font-size: 16px;
  line-height: 1.8;
}
.sample-select-box {
  background: #fff;
  border: 1px solid #c8e0ce;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 1.8em;
  box-sizing: border-box;
}
.sample-select-title {
  font-size: 16px;
  font-weight: bold;
  color: #3c3c3c;
  margin: 0 0 1em;
  padding-left: 0.8em;
  border-left: 4px solid #64A473;
  font-family: 'Noto Sans JP', sans-serif;
}
.sample-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5em;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.sample-list li {
  font-size: 15px;
  font-weight: bold;
  padding-left: 1.2em;
  position: relative;
  width: calc(50% - 10px);
  box-sizing: border-box;
}
.sample-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #64A473;
}
.sample-example {
  background: #f0f6f2;
  border-radius: 6px;
  padding: 16px 20px;
  font-size: 14px;
}
.sample-example-title {
  font-weight: bold;
  margin: 0 0 0.5em;
  color: #64A473;
}
.sample-example ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sample-example ul li {
  padding: 2px 0 2px 1.2em;
  position: relative;
}
.sample-example ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #64A473;
}
.sample-notes {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8em;
}
.sample-notes li {
  font-size: 14px;
  color: #555;
  padding: 0.3em 0 0.3em 1.5em;
  position: relative;
}
.sample-notes li::before {
  content: "◎";
  position: absolute;
  left: 0;
  color: #64A473;
  font-size: 12px;
  top: 0.4em;
}
.sample-spec {
  border-top: 1px solid #c8e0ce;
  margin: 0;
  padding-top: 1.2em;
}
.sample-spec div {
  display: flex;
  gap: 1em;
  padding: 0.6em 0;
  border-bottom: 1px solid #e5ede8;
  font-size: 15px;
}
.sample-spec dt {
  font-weight: bold;
  min-width: 90px;
  color: #64A473;
}
.sample-spec dd {
  margin: 0;
  color: #3c3c3c;
  line-height: 1.6;
}
@media screen and (max-width: 810px) {
#sample-info {
  padding-top: 40px;
  margin-bottom: 40px;
}
#sample-info .inner {
  padding: 20px;
}
.sample-price {
  font-size: 22px;
}
.sample-select-box {
  padding: 20px 16px;
}
.sample-list li {
  width: 100%;
}
.sample-spec div {
  flex-direction: column;
  gap: 0.2em;
}
.sample-spec dt {
  min-width: auto;
}
}

/*----------------------------------------------------
sample-header（画像レイアウト）
------------------------------------------------------*/
.sample-header {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-bottom: 1.5em;
}
.sample-header-text {
  flex: 1;
}
.sample-header-img {
  flex-shrink: 0;
  width: 520px;
}
.sample-header-img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.sample-apply-note {
  margin: 1.5em 0 0;
  padding: 1em 1.5em;
  background: #e8f4ec;
  border-left: 4px solid #64A473;
  font-size: 16px;
  line-height: 1.7;
  border-radius: 0 6px 6px 0;
}
@media screen and (max-width: 1280px) {
.sample-header-img {
  width: 50%;
}
}
@media screen and (max-width: 910px) {
.sample-header {
  flex-direction: column;
  gap: 16px;
}
.sample-header-text {
  width: 100%;
}
.sample-header-img {
  width: 100%;
}
.sample-apply-note {
  font-size: 14px;
}
}

/*----------------------------------------------------
fdi_sample_form 追加スタイル
------------------------------------------------------*/
:root {
  --green-mid:    #0F6E56;
  --green-main:   #1D9E75;
  --green-light:  #5DCAA5;
  --green-pale:   #9FE1CB;
  --green-bg:     #E1F5EE;
  --red:          #E24B4A;
  --text:         #1a1a1a;
  --text-muted:   #555;
  --text-hint:    #888;
  --border:       rgba(0,0,0,0.12);
  --border-focus: #1D9E75;
  --bg:           #fff;
  --bg-surface:   #f7f7f5;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
}

/* ── ヘッダービジュアル ── */
.page-hero {
  background: var(--green-mid);
  padding: 48px 24px 40px;
  text-align: center;
}
.page-hero .hero-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--green-pale);
  border: 1px solid rgba(159,225,203,.4);
  border-radius: 99px;
  padding: 3px 14px;
  margin-bottom: 12px;
}
.page-hero h1 {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: .02em;
}
.page-hero .price {
  font-size: clamp(26px, 6vw, 36px);
  font-weight: 700;
  color: #fff;
}
.page-hero .price small {
  font-size: 13px;
  font-weight: 400;
  color: var(--green-pale);
  margin-left: 6px;
}
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 99px;
  background: #0F6E56;
  color: #fff;
  width: 29%;
  text-align: center;
  box-sizing: border-box;
}
.hero-badge img { width: 13px; height: 13px; flex-shrink: 0; margin-right: 2px; }

@media (max-width: 910px) {
.hero-badge {
  width: 32%;
}
}
@media (max-width: 640px) {
.hero-badge {
  width: 31%;
  gap: 2px;
  padding: 6px 8px;
}
.hero-badge img{
 margin-right: 0;
}
}

/* ── カード ── */
.card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 20px;
}

/* ── セクションラベル ── */
.sec-lbl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--green-mid);
  margin-bottom: 16px;
}
.sec-lbl::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--green-bg);
}

/* ── 導入文 ── */
.intro-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.85;
}

/* ── 商品リスト ── */
.prod-list { list-style: none; padding: 0; margin: 0; }
.prod-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--border);
  font-size: 14px;
}
.prod-item:last-child { border-bottom: none; }
.prod-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-main);
  flex-shrink: 0;
}

/* ── メタ情報グリッド ── */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.meta-cell {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.meta-lbl { font-size: 10px; color: var(--text-hint); margin-bottom: 3px; }
.meta-val { font-size: 12px; color: var(--text); line-height: 1.5; }

/* ── ステップ ── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.step {
  text-align: center;
  padding: 14px 14px;
  background: var(--green-bg);
  border-right: 1px solid var(--green-pale);
}
.step:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.step:last-child  { border-right: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.step-num { font-size: 20px; font-weight: 700; color: var(--green-mid); }
.step-txt { font-size: 13px; color: var(--green-mid); margin-top: 3px; line-height: 1.5; text-align: left;}

/* ── 注意事項 ── */
.notice-list { list-style: none; padding: 0; margin: 0; }
.notice-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
  line-height: 1.6;
}
.notice-item:last-child { border-bottom: none; }
.notice-icon { color: var(--green-main); flex-shrink: 0; margin-top: 2px;width: 1em; height: 1em; line-height: 1;}
.notice-icon img{ flex-shrink: 0;vertical-align: middle;}

/* ── 電話ボックス ── */
.tel-box {
  background: var(--green-bg);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
}
.tel-sub { font-size: 12px; color: var(--green-mid); margin-bottom: 8px; }
.tel-num {
  font-size: 32px;
  font-weight: 700;
  color: var(--green-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: .03em;
}
.tel-num svg { width: 28px; height: 28px; }
.tel-hours { font-size: 12px; color: var(--green-mid); margin-top: 6px; }

/* ── wrap ── */
.sample-wrap {
  max-width: 85.7vw;
  max-width: min(85.7vw, 1100px);
  margin: 0 auto;
  padding: 32px 0 60px;
}


.sample-detail-area{
margin: 0.5em 0 0;
padding:0.4em 0.5em;
color: #0F6E56;
font-family: 'Sawarabi Gothic', sans-serif;
font-weight: normal;
background: #e8f4ec;
}


/* ── レスポンシブ ── */
@media (max-width: 810px) {
  .card { padding: 18px 16px; }
  .meta-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(1, 1fr); display: block;}
  .step {padding: 14px 10px;}
  .step:nth-child(1) { border-radius: var(--radius-md) var(--radius-md) 0 0; border-right: none; border-bottom: 1px solid var(--green-pale);}
  .step:nth-child(2) { border-radius: 0 0 0 0; border-right: none; border-bottom: 1px solid var(--green-pale);}
  .step:last-child   { border-radius: 0 0 var(--radius-md) var(--radius-md); }
  .step-num { font-size: 18px;}
  .step-txt { text-align: left;}
}