@charset "UTF-8";
/* CSS Document */

/*===================================================================================================
 typo
===================================================================================================*/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: #06D6A2; /* アクセント色指定 */
  line-height: 1.8em;
}

h1,
.h1 {
  font-size: 30px;
}
h2,
.h2 {
  font-size: 24px;
}
h3,
.h3 {
  font-size: 21px;
}
h4,
.h4 {
  font-size: 18px;
}
h5,
.h5 {
  font-size: 14px;
}
h6,
.h6 {
  font-size: 12px;
}
@media (max-width: 480px) {
	h1,
	.h1 {
	  font-size: 24px;
	}
	h2,
	.h2 {
	  font-size: 21px;
	}
	h3,
	.h3 {
	  font-size: 16px;
	}
	h4,
	.h4 {
	  font-size: 14px;
	}
	h5,
	.h5 {
	  font-size: 12px;
	}
	h6,
	.h6 {
	  font-size: 12px;
	}
}

h1 small,
h1 .small,
h2 small,
h2 .small,
h3 small,
h3 .small,
h4 small,
h4 .small,
h5 small,
h5 .small,
h6 small,
h6 .small,
.h1 small,
.h1 .small,
.h2 small,
.h2 .small,
.h3 small,
.h3 .small,
.h4 small,
.h4 .small,
.h5 small,
.h5 .small,
.h6 small,
.h6 .small {
  color: #06D6A2; /* アクセント色指定 */
  line-height: 1.8em;
}

h1 top_catch,
h1 .top_catch {
  font-size: 28px;
  color: #06D6A2; /* アクセント色指定 */
  line-height: 1.0em;
}

.txt18,
.txt16,
.txt14,
.txt12,
.txt10 {
  line-height: 1.5em;
}

.txt24 {
  font-size: 24px;
}
.txt21 {
  font-size: 21px;
}
.txt18 {
  font-size: 18px;
}
.txt16 {
  font-size: 16px;
}
.txt14 {
  font-size: 14px;
}
.txt12 {
  font-size: 12px;
}
.txt10 {
  font-size: 10px;
}

.rotate180{
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

.txt_li_yellow {
  color: #FEFBC5; /* お客様の声・名前文字色 */
}

.txt_accent {
  color: var(--accent-color); /* アクセント色指定 */
  font-weight: bold;
}

.txt_white {
  color: fff;
}

/* ==================================================
印刷した時にリンクURLの表示をさせない
================================================== */
@media print {
  a[href]:after {
    content: ""!important;
  }
  abbr[title]:after {
    content: ""!important;
  }
}

/* ==================================================
レイアウト調整
================================================== */
/*** 上 20px ***/
.top_space20 {
	padding-top:20px;
}
.top_space20_m {
	margin-top:20px;
}
.top_space-20_m {
	margin-top:-20px;
}
/*** 上 10px ***/
.top_space10 {
	padding-top:10px;
}
.top_space10_m {
	margin-top:10px;
}
.top_space-10_m {
	margin-top:-10px;
}
/*** 上 0px ***/
.top_space0 {
	padding-top:0px;
}
.top_space0_m {
	margin-top:0px;
}

/*** 下 20px ***/
.bottom_space20 {
	padding-bottom:20px;
}
.bottom_space20_m {
	margin-bottom:20px;
}
/*** 下 10px ***/
.bottom_space10 {
	padding-bottom:10px;
}
.bottom_space10_m {
	margin-bottom:10px;
}
/*** 下 5px ***/
.bottom_space5 {
	padding-bottom:5px;
}
.bottom_space5_m {
	margin-bottom:5px;
}
/*** 左 20px ***/
.left_space20 {
	padding-left:20px;
}
.left_space20_m {
	margin-left:20px;
}
/*** 左 40px ***/
.left_space40 {
	padding-left:40px;
}
.left_space40_m {
	margin-left:40px;
}
/*** 左 -20px ***/
.left-space20 {
	margin-left:-20px;
}
/*** 左 -10px ***/
.left-space10 {
	margin-left:-10px;
}
/*** 右 20px ***/
.right_space20 {
	padding-right:20px;
}
/*** 左右 10px ***/
.side_space10 {
	padding-left:10px;
	padding-right:10px;
}

/*** 上下 20px ***/
.t_b_space20 {
	padding-top:20px;
	padding-bottom:20px;
}
.t_b_space20_m {
	margin-top:20px;
	margin-bottom:20px;
}
/*** 上下 10px ***/
.t_b_space10 {
	padding-top:10px;
	padding-bottom:10px;
}
.t_b_space10_m {
	margin-top:10px;
	margin-bottom:10px;
}

/*** 上下左右 10px ***/
.all_space10 {
	padding: 10px;
}

/*** 上下左右 5px ***/
.all_space5 {
	padding: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(---hover-color);
}
.faq .faq-container .faq-item .:hover {
  color: var(--hover-color);
}
.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--hover-color);
}
.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--hover-color);
}

/* ==================================================
料金プラン　h3背景色
================================================== */
.pricing .pricing-item h3 {
  font-weight: 400;
  margin: -20px -20px 20px -20px;
  padding: 20px 15px;
  font-size: 16px;
  font-weight: 600;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background: color-mix(in srgb, var(--default-color), transparent 85%); /*　背景色95%から変更 */
}
.pricing .btn-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 85%); /*　背景色95%から変更 */
  margin: 0 -20px -20px -20px;
  padding: 20px 15px;
  text-align: center;
}
.pricing .featured h3 {
  background: var(--accent-color);
  color: var(--contrast-color);
}

/* ==================================================
リンクボタン
================================================== */
.btn-pagelink {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 30px;
  border-radius: 4px;
  transition: 0.5s;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  width: 100%;         /* col の幅いっぱいに広げる */
  text-align: center;  /* 文字を中央寄せ */
}

.btn-pagelink:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

@media (max-width: 640px) {
.btn-pagelink {
    font-size: 13px;
  }
}

/* ==================================================
注文ボタン(btn-pagelinkの文字サイズを大きく)
================================================== */
.btn-order {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 21px;  /* 文字を大きく */
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 30px;
  border-radius: 4px;
  transition: 0.5s;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  width: 100%;         /* col の幅いっぱいに広げる */
  text-align: center;  /* 文字を中央寄せ */
}

.btn-order:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

@media (max-width: 640px) {
.btn-order {
    font-size: 16px;  /* 文字を大きく */
  }
}

/*--------------------------------------------------------------
# Contents Section
--------------------------------------------------------------*/
.contents-section {
    display: flex;
    flex-wrap: wrap;
	padding: 20px;
}

.txt_right {
    max-width: 100%;
    height: auto;
    margin: 0 30px 30px 0;
}

@media (min-width: 768px) {
    .contents-section  {
        display: block;
    }
    
.txt_right{
        float: left;
	    width: 50%;
        margin: 0 30px 30px 0;
    }
}

/* テキスト全体を「枠」として扱う */
.text-wrap {
  overflow: hidden;  /* ここで写真回り込みの影響を止める(floatの下に潜り込ませない-下には回り込まなくなるので注意) */
}

/*----------- 写真レイアウト(幅50%) --------------*/
  .img-fluid-small{
	  max-width:100%;
	  height:auto;
	  padding-bottom: 20px;
}
@media (min-width: 768px) {
  .img-fluid-small{
	  max-width:30%;
	  height:auto;
}
  .txt_right-small{
      float: left;
	  width: 50%;
      margin: 0 30px 30px 0;
    }
}

/*--------------------------------------------------------------
# panel
--------------------------------------------------------------*/
.panel {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.panel .t-center {
  text-align: center;
}

.panel h3 {
  font-weight: 400;
  margin: -20px -20px 20px -20px;
  padding: 17px 15px;
  font-size: 18px;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent-color), transparent 20%);
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  text-align: left;
}

.panel h4 {
  font-size: 30px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.panel h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.panel h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 16px;
  font-weight: 300;
}

.panel ul {
  padding: 15px 0;
  list-style: none;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.panel ul li {
  padding-bottom: 16px;
}

.panel ul i {
  color: var(--accent-color);
  font-size: 18px;
  padding-right: 4px;
}

.panel ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-decoration: line-through;
}

.panel .btn-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  margin: 0 -20px -20px -20px;
  padding: 20px 15px;
  text-align: center;
}

.panel .btn-buy {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--heading-font);
  font-weight: 600;
  transition: 0.3s;
}

.panel .btn-buy:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.panel .order {
  font-weight: 400;
  margin: -20px -20px 20px -20px;
  padding: 20px 15px;
  font-size: 21px;
  font-weight: 600;
  color: var(--contrast-color);
  background: var(--accent-color);
  text-align: center;
}

/*------ 選択ポイント -------*/
.select-panel ul {
  padding: 15px 0;
  list-style: none;
  text-align: left;
  line-height: 20px;
  font-size: 16px;
}

.select-panel ul i {
  color: var(--accent-color);
  font-size: 16px;
  padding-right: 4px;
}

/*------ ヘッダーのタスキ帯 -------*/
.panel .tasuki, .pricing .tasuki {
  background: var(--accent-color);
  color: var(--contrast-color);
  width: 200px;
  position: absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index: 1;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  padding: 1px 0 3px 0;
}

/*--------------------------------------------------------------
# dub plan
--------------------------------------------------------------*/
.dub_plan h4 {
  font-size: 36px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.dub_plan h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.dub_plan h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 16px;
  font-weight: 300;
}


/*----------- ページ余白 --------------*/
.gap {
    margin-bottom: 50px;
}

.big-gap {
    margin-bottom: 100px;
}

.no-margin {
    margin: 0;
    padding: 0;
}


/* === hrの罫線を修飾 === */
/* 破線 */
.dash {
	border-top: 1px dashed;
}

/*-- (price01_list)メディア特徴比較のリスト表示=文字サイズ14px --*/
ul.media-cpt01 {
	list-style-type: none;
	margin-left:70px;/* マーカーを1文字(14px)*文字数寄せた分、ULにマージンを設定*/
}
ul.media-cpt01 li:before {
	content: '収録時間：'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-69px; /* 1文字(-14px)*文字数分に-1px、左に寄せる */
}
ul.media-cpt02 {
	list-style-type: none;
	margin-left:42px;/* マーカーを1文字(14px)*文字数寄せた分、ULにマージンを設定*/
}
ul.media-cpt02 li:before {
	content: '画質：'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-41px; /* 1文字(-14px)*文字数分に-1px、左に寄せる */
}
ul.media-cpt03 {
	list-style-type: none;
	margin-left:98px;/* マーカーを1文字(14px)*文字数寄せた分、ULにマージンを設定*/
}
ul.media-cpt03 li:before {
	content: 'テープまとめ：'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-97px; /* 1文字(-14px)*文字数分に-1px、左に寄せる */
}
ul.media-cpt04 {
	list-style-type: none;
	margin-left:56px;/* マーカーを1文字(14px)*文字数寄せた分、ULにマージンを設定*/
}
ul.media-cpt04 li:before {
	content: '耐久性：'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-55px; /* 1文字(-14px)*文字数分に-1px、左に寄せる */
}

/*----------- トップページ動画画面比の縦対応・スマホ用 --------------*/
@media (max-width: 768px) {

  .glightbox-container .ginner-container {
    display: block; /* ←flexやめる */
  }

  .glightbox-container .gslide-media {
    margin-top: 60px;     /* ←上に余白で調整 */
    margin-bottom: 20px;
    padding: 0 16px;
  }

  .glightbox-container .gvideo-wrapper {
    width: 100%;
    max-width: 420px;     /* ←スマホでちょうどいい幅 */
    margin: 0 auto;       /* ←横中央 */
    aspect-ratio: 9 / 16;
  }

  .glightbox-container iframe {
    width: 100%;
    height: 100%;
  }

  .glightbox-container .gslide-description {
    padding: 0 16px 20px;
    text-align: center;
  }
}

/*----------- グリーンベース内リンク文字色(FAQ) --------------*/
/* 未訪問 */
a.green-link:link {
  color: #FAFA00;/* クリーム色 */
}

/* 訪問後 */
a.green-link:visited {
  color: #E6E6E6;/* 明るい灰色 */
}

/*----------- ナビメニュー文字色変更(コンテンツと合わせる) --------------*/
:root {
  --nav-color: #444444;  /* The default color of the main navmenu links */
}


/*----------- ナビメニューUI変更 --------------*/
@media (max-width: 1199px) {

  /* ===== メニュー全体 ===== */
  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 12px 0;
    margin: 0;
    border-radius: 14px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    z-index: 9998;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
  }

  /* ===== 各リンク ===== */
  .navmenu a {
    display: block;
    padding: 14px 20px;
    font-size: 17px;
    color: var(--nav-dropdown-color);
    transition: 
      background-color 0.25s ease,
      color 0.25s ease,
      transform 0.15s ease;
  }

  .navmenu a:active {
    transform: scale(0.97);
  }

  .navmenu li + li {
    margin-top: 4px;
  }

  /* ===== Dropdownヘッダー ===== */
  .dropdown-header {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* ← 横に寄せる */
    gap: 6px;
    padding-right: 10px;
  }

  .dropdown-header a {
    font-weight: 600;
  }

  /* ===== トグル（不要消す） ===== */
.toggle-dropdown {
  display: none;
}

  /* ===== 子メニュー（常時表示＋アニメ） ===== */
  .navmenu .dropdown ul {
    display: block;
    margin: 6px 12px 10px;
    padding: 8px 0;
    border-radius: 10px;
    background: #f8f9fa;

    /* アニメーション */
    opacity: 0;
    transform: translateY(-6px);
    animation: fadeInMenu 0.3s ease forwards;
  }

  @keyframes fadeInMenu {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ===== 子リンク（インデント） ===== */
  .navmenu .dropdown ul li a {
    padding: 12px 20px 12px 34px;
    font-size: 16px;
  }

  /* ===== ホバー ===== */
  .navmenu a:hover {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown ul li a:hover {
    background-color: rgba(0,0,0,0.04);
    border-radius: 6px;
  }

  /* ===== アクティブ ===== */
  .navmenu .active {
    background: rgba(0,0,0,0.05);
    border-radius: 6px;
  }

  /* ===== モバイル表示制御 ===== */
  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
  }

  .mobile-nav-active .navmenu > ul {
    display: block;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    z-index: 9999;
  }
}
/* ==================================================
お客様の声、お知らせ
================================================== */
/* テキスト全体を「枠」として扱う */
#line_contents {
  overflow: hidden;  /* ここで写真回り込みの影響を止める */
}

#line_contents ul {
	list-style: none;
	padding-left: 0px;
	margin-top: 0px;
	margin-left: -15px;

}

#line_contents li.l-border {
	border-left: var(--accent-color) 3px solid; /* アクセント色指定 */
	padding-left: 10px;
	margin-left: 25px;
	margin-bottom: 10px;
}

/*----------- ※印リスト --------------*/
.kome-list {
  list-style-position: outside;
  list-style-type: "※ ";
}

/* ==================================================
メールフォーム
================================================== */
/* フォーム統一ルール */
.form-rule {
	font-size: 14px;
}

/* 入力項目(必須) */
.form_space1 {
	text-align: left;
	color: var(--accent-color);  /* アクセント色指定 */
	font-weight: bold; 
}

/* 入力項目(必須なし) */
.form_space1b {
	text-align: left;
	padding-left: 43px;
	color: var(--accent-color);  /* アクセント色指定 */
	font-weight: bold;
}
@media (max-width: 575.98px) {
.form_space1b {
	text-align: left;
	padding-left: 0px;
	color: var(--accent-color);  /* アクセント色指定 */
	font-weight: bold;
}
}

/* 入力項目(市町村以下) */
.form_space1c {
	text-align: left;
	margin-top: 20px;
	padding-left: 43px;
	color: var(--accent-color);  /* アクセント色指定 */
	font-weight: bold;
}
@media (max-width: 575.98px) {
.form_space1c {
	text-align: left;
	padding-left: 0px;
	color: var(--accent-color);  /* アクセント色指定 */
	font-weight: bold;
}
}

/* 入力欄 */
.form_space2 {
	text-align: left;
	margin-top: -26px;
	padding-left: 200px;
	margin-bottom: 30px;
}

@media (max-width: 575.98px) {
.form_space2 {
	text-align: left;
	margin-top: 10px;
	padding-left: 0px;
	margin-bottom: 30px;
}
}

/* 住所(市町村以下) */
.form_space3 {
	text-align: left;
	margin-top: 10px;
	padding-left: 0px;
	margin-bottom: 5px;
}

@media (max-width: 767.98px) {
.form_space3 {
	text-align: left;
	margin-top: 10px;
	padding-left: 0px;
	margin-bottom: 30px;
}
}