@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/

/* ============================================
   基本設定・リセット
============================================ */
body {
  background-color: #fff;
}

.site-name-text {
  display: none;
}

/* ============================================
   レイアウト・コンテナ
============================================ */
.wrap {
  width: 100%;
  margin: 0 auto;
}

#content {
  margin-top: -5px;
  margin-bottom: 0;
  max-width: 100%;
  padding: 0;
}

#content-in {
  margin: 0 auto;
}

#content::after {
  display: none;
}

#main {
  padding: 0;
  margin-bottom: 0;
  border: none;
}

.entry-content {
  margin-bottom: 0;
}
.home .entry-content{ margin-top:0!important;}

/* ============================================
   ヘッダー設定
============================================ */
header {
  background-color: #ffffff;
  margin: 10px auto 0 auto;
}

#header-in {
  width: 1200px;
  margin: 0 auto;
}

.header-container {
  margin: 0 auto;
  background-color:#f5fcff!important;
  position: relative;
  height: 95px;
}

.logo {
  position: absolute;
  top: 20px;
  text-align: left !important;
}

/* ナビゲーションメニュー */
.header-container-in .navi-in {
  position: absolute;
  right: 0px;
  top: 5px;
}

.header-container-in.hlt-top-menu .navi-in .item-label {
  font-size: 0.8em !important;
  text-align: center;
}

#menu-h-menu li {
  width: 90px;
  text-align: center;
  line-height: 2 !important;
  padding: 20px 0px 0 0px;
}

#menu-h-menu li a {
  color: #ffffff !important;
  background-color: transparent;
}

#menu-h-menu li a:hover {
  opacity: 0.6;
}

.sub-caption {
  color: #00a051;
}

/* 特殊メニューアイテム */
#menu-h-menu li#menu-item-16 {
  position: relative;
  background: transparent url(images/h-tel.png) left top no-repeat !important;
  padding: 10px 30px 70px 30px !important;
  width: 280px !important;
  margin-left: 20px;
}

#menu-h-menu li#menu-item-17 {
  position: relative;
  background: transparent url(images/h-demo.png) left top no-repeat !important;
  padding: 10px 30px 70px 30px !important;
  width: 280px !important;
}

#menu-h-menu li#menu-item-16 a,
#menu-h-menu li#menu-item-17 a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

#menu-h-menu li#menu-item-16 a:hover,
#menu-h-menu li#menu-item-17 a:hover {
  opacity: 0.2;
}

#menu-h-menu li#menu-item-16 .item-label,
#menu-h-menu li#menu-item-17 .item-label {
  opacity: 0;
}

/* 固定ヘッダー */
.fixed-header {
  height: 85px;
  background-color: #ffffff !important;
  width: 100% !important;
}

.fixed-header #menu-h-menu li {
  width: 100px;
}

.fixed-header #menu-h-menu li#menu-item-48 {
  width: 130px;
}

.fixed-header #nav {
  background-color: #ffffff;
  padding-bottom: 0 !important;
}

.fixed-header #navi .navi-in {
  position: absolute;
  right: 0;
  top: 5px;
}

.fixed-header .logo {
  position: absolute;
  top: 15px;
  left: 0;
}

.fixed-header .cl-slim .logo-header img {
  max-height: 60px;
}

.fixed-header #menu-h-menu .navi-in a {
  color: #012351;
  background-color: transparent;
}

.fixed-header #menu-h-menu li a:hover {
  opacity: 0.6;
}

.fixed-header #menu-h-menu li#menu-item-18 {
  background-color: #8ebe59 !important;
  display: block;
}

.fixed-header .h-submenu {
  display: none;
}

.fixed-header .h-submenu img.pc-img {
  max-width: 95%;
}

.header-container-in.hlt-top-menu .h-submenu li {
  padding-top: 10px;
}

.header-container-in.hlt-top-menu .navi-in .item-label {
  font-size: 11px;
  color: #141414;
  font-weight: bold;
}

/* ============================================
   フッター設定
============================================ */
#footer {
  padding-top: 10px !important;
  margin-top: 0px;
}

#footer .footer-widgets .widget_text {
  margin-bottom: 0;
}

#footer .footer-widgets .widget_text p {
  margin-bottom: 0;
}

.footer-bottom {
  display: none !important;
}

/* ============================================
   共通スタイル
============================================ */
section {
  margin-bottom: 0 !important;
}

.wp-block-cover {
  min-height: 560px;
  margin-bottom: 0 !important;
}

/* 投稿日・更新日非表示 */
.page .post-date,
.page .post-update {
  display: none;
}

.page .sns-follow,
.page .author-info {
  display: none;
}

/* 画像配置 */
img.aligncenter {
  display: block;
  margin: 5px auto 30px auto;
  text-align: center;
}

img.alignright {
  margin: 5px 0 30px 30px;
  float: right;
}

img.alignleft {
  margin: 5px 30px 30px 0;
  float: left;
}

img a:hover {
  opacity: 0.5;
}

/* レスポンシブ用改行 */
.sp_br {
  display: none;
}

.br-sp {
  display: none;
}

/* ============================================
   余白・スペーシング
============================================ */
.mt10 { margin-top: 10px; }
.mt30 { margin-top: 30px; }
.mt50 { margin-top: 50px; }

.mb0 { margin-bottom: 0px !important; }
.mb15 { margin-bottom: 15px; }
.mb30 { margin-bottom: 30px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb100 { margin-bottom: 100px !important; }

.mr0 { margin-right: 0 !important; }
.mr10 { margin-right: 10px !important; }
.mr40 { margin-right: 40px !important; }

.ml80 { margin-left: 80px !important; }

.pb10 { padding-bottom: 10px; }
.pt10 { padding-top: 10px; }
.pt100 { padding-top: 100px; }

/* ============================================
   フォント・テキスト
============================================ */
.fss { font-size: 60%; }
.fs { font-size: 80%; }
.fm { font-size: 120%; }
.fl { font-size: 140%; }
.fll { font-size: 180%; }
.fbig { font-size: 250%; }

.bold { font-weight: bold; }
.uline { text-decoration: underline; }
.line { 
  border-bottom: 1px solid #a2a2a2; 
  padding-bottom: 7px; 
}

.marker-y {
  background: linear-gradient(transparent 50%, #fffc9d 50%);
}

.fuchidori {
  color: #000;
  text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF, 0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

/* カラー */
.black { color: #000000; }
.red { color: #e02051; }
.pink { color: #df4c81; }
.white { color: #ffffff; }
.gray { color: #aeaeae; }
.green { color: #5ab54c; }
.yellow { color: #fbf17c; }
.blue { color: #41a1d9; }
.blue02 { color: #206fa9; }
.orange { color: #ff6817; }

.boxglay { 
  padding: 10px; 
  background-color: #e2e2e2; 
}

.mincho { 
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif; 
}

/* テキスト配置 */
.center { text-align: center !important; }
.right { text-align: right !important; }
.left { text-align: left !important; }

.text01 { line-height: 1.4; }

/* 640px以下の改行制御 */
@media screen and (max-width: 640px) {
  .sp_br {
    display: block;
  }
}

/* ============================================
   ボタン
============================================ */
.button01 {
  margin-top: 50px;
  margin-bottom: 0;
  text-align: center;
}

.button01 a {
  display: block;
  margin: 0 auto;
  padding: 1em 2em;
  width: 70% !important;
  color: #ffffff;
  font-size: 1.4em;
  font-weight: 700;
  background: #38c1f1 url(images/icon-contact.png) left 5% center no-repeat;
  text-decoration: none;
}

.button01 a:hover {
  background-color: #bbbbbb;
}

/* ============================================
   タイトル・見出し
============================================ */
.article section h2 {
  background-color: transparent;
  text-align: center;
  font-size: 1.8em;
}

.entry-title {
  font-size: 24px;
  border-bottom: solid 4px #999;
  padding-bottom: 5px;
  position: relative;
  font-weight: normal;
  padding-top: 10px;
  max-width:90%;
	margin:0 auto 30px auto;
}

.entry-title:before {
  content: '';
  width: 80px;
  height: 3px;
  background-color: #ff7700;
  display: block;
  position: absolute;
  left: 0;
  bottom: -3px;
}

.article h2 { padding: 0 !important; }
.article h3 { 
  border: none; 
  font-size: 1.4em; 
}
.article h4 { 
  border-top: none;
  border-bottom: none;
}

h2.title-box {
  background-color: #ff7f00 !important;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 15px 10px !important;
  position: relative;
  font-size: 1.2rem;
  line-height: 1.5;
}

.article section h2.title-box::after {
  content: "";
  position: absolute;
  bottom: -19px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ff7f00;
}

/* ============================================
   固定ページ
============================================ */
.page .inner {
  width: 1000px;
  margin: 0 auto;
}

.page p {
  margin-bottom: 0.8em;
}

/* ============================================
   アイキャッチ画像
============================================ */
.page .eye-catch-wrap {
  display: none;
}

.eye-catch-wrap {
  display: block;
}

.eye-catch {
  text-align: center;
}

.eye-catch img {
  margin-bottom: 30px;
}

/* ============================================
   リスト
============================================ */
ul {
  padding-left: 0px !important;
  margin-bottom: 0 !important;
}

.listNomal {
  padding-left: 0 !important;
}

.listNomal li {
  list-style: none !important;
}

.article dd {
  margin-left: 0px;
}

.listcircle {
  padding-left: 0px !important;
  margin-bottom: 30px !important;
}

.listcircle li {
  position: relative;
  padding-left: 30px;
  list-style: none;
  font-size: 1em;
}

.listcircle li:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 15px;
  height: 15px;
  background-color: #318496;
  border-radius: 50%;
}

.listIcon {
  padding-left: 0 !important;
  padding-bottom: 17px;
}

.listIcon li {
  padding: 15px 0 15px 40px;
  line-height: 1.2em;
  background: url(images/icon-chk.png) left 0px top 50% no-repeat;
  margin: 0 0 10px 0;
  font-weight: bold;
  font-size: 1em;
  list-style: none;
}

ol.listNumber {
  padding: 0;
  counter-reset: cp_clist;
  list-style-type: none;
}

ol.listNumber li {
  position: relative;
  margin: 0 0 10px 30px;
  font-size: 0.95em;
}

ol.listNumber li::before {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  counter-increment: cp_clist;
  content: counter(cp_clist);
  background: #bae8ff;
  color: #000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: 2px;
  margin-left: -40px;
  margin-bottom: 10px;
}

ul.listinline {
  text-align: left;
}

ul.listinline li {
  display: inline-block;
  margin-right: 20px;
}

ul.listinline li.last {
  margin-right: 0px;
}

/* ============================================
   テーブル
============================================ */
.table-company {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Helvetica Neue', sans-serif;
  background: #fff7f0;
  box-shadow: 0 4px 12px rgba(255, 165, 0, 0.15);
  border-radius: 10px;
  overflow: hidden;
}

.table-company th,
.table-company td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid #ffd9b3;
}

.table-company th {
  background-color: #ffa94d;
  color: #fff;
  font-weight: bold;
  width: 30%;
}

.table-company td {
  color: #333;
  background-color: #fffaf3;
}

.table-company tr:last-child td {
  border-bottom: none;
}

/* ============================================
   HOME
============================================ */
.home section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.home #main-image{  background: linear-gradient(to bottom,#f5fcff 0%, #e7faff 40%, #d7f6ff 70%, #bde3fd 100%); }
.home #main-image p {
    margin: 0 auto;
    width: 1000px;
    padding-bottom: 30px;
}
.home .entry-title{ display:none;}

/* ===== sec01 ===== */
.sec01{ background-color:#fff8f1; padding-top:30px;}
.sec01 .sec01-container{background-color:#ffffff;max-width:1100px;margin:0 auto;padding:0;}


/* 上部見出し帯そのものを画像で使用 */
.banner-top{display:block;width:100%;max-width:1200px;margin:0 auto;}


/* 2カラム：左が製品、右が価格ブロック（どちらも提供PNG/JPGを使用） */
.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:end;margin-top:18px}
.left-visual{display:flex;align-items:flex-end;justify-content:center;}
.left-visual img{max-width:100%;height:auto;filter:drop-shadow(0 22px 34px rgba(0,0,0,.28));}


.price-panel{display:flex;flex-direction:column;justify-content:flex-end}
.price-panel img{width:100%;height:auto;}


/* CTA 画像をそのままボタンとして使用 */
.cta{margin:0 auto 0;display:flex;justify-content:center;width: 100%;}
.cta a{display:inline-block;}
.cta img{width:min(980px,100%);height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));}


/* レスポンシブ */
@media (max-width: 960px){
.grid{grid-template-columns:1fr;gap:18px;}
.left-visual{order:2}
.price-panel{order:1}
.left-visual img,
  .price-panel img {
    display: block;
    margin: 0 auto;
  }	
	
}

/* ===== sec02 ===== */
.sec02{ background: linear-gradient(to bottom, #ffffff 0%, #f7fdff 40%, #dcf7ff 70%, #b9eeff 100%);}
.sec02 .ti02{ font-size:1.6em; font-weight:bold; color:#2d7fbb;text-align:center; margin-bottom:30px;}

.sec02 {
  padding: 40px 0;
  background: linear-gradient(to bottom, #ffffff 0%, #eaf7ff 40%, #cceeff 70%, #99ddff 100%);
}

.slider-container {
  overflow: hidden;
  width: 100%;
}

.slider-wrapper {
  display: flex;
  gap: 20px;
  transition: transform 0.5s ease;
}

.slider-item {
  flex: 0 0 calc(33.333% - 20px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 15px;
}

.slider-header {
  background: #007acc;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 30px; /* ▼が下に出る分マージンを少し増やす */
  position: relative;  /* ▼の基準にする */
}

.slider-header::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px; /* ヘッダーの下に突き出す */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;   /* 左辺透明 */
  border-right: 10px solid transparent;  /* 右辺透明 */
  border-top: 10px solid #007acc;        /* 上辺だけ色を付けて▼を作る */
}

.slider-title {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
	padding:10px 0;
	border-bottom:#97bcd7 solid 1px;
}
.slider-sub {
  font-size: 12px;
  display: block;
}

/* 共通 */
.box-before,
.box-after{
  position: relative;
  border-radius: 4px;
  padding: 14px 16px;
  line-height: 1.7;
  background: #fff;
}

/* Before（薄グレー枠＋左上グレーラベル） */
.box-before{
  border: 1px solid #e2e2e2;
  color: #333;
	margin-bottom:10px;
}
.box-before::before{
  content: "Before";
  position: absolute;
  left: -1px;            /* 枠上にぴったり載せる */
  top: -12px;
  background: #d9d9d9;
  color: #333;
  font-weight: 700;
  font-size: 14px;
  padding: 4px 10px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
/* ラベル下の枠線を消して“食い込み”表現 */
.box-before::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;           /* 枠線と同じ太さ */
  width: 110px;          /* ラベル幅＋余白分（調整可） */
}

.box-before .text{ margin-top:20px!important;}

/* After（オレンジ枠＋左上オレンジラベル、本文は赤寄り） */
.box-after{
  border: 3px solid #ff7a1a;      /* オレンジ枠 */
  color: #e95163;                  /* 見本に近い赤みの文字色 */
  font-weight: 700;
  padding-top:20px;
}
.box-after::before{
  content: "After";
  position: absolute;
  left: -3px;            /* 枠太さに合わせて調整 */
  top: -14px;
  background: #ff7a1a;   /* ラベルのオレンジ */
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 12px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
/* ラベル下の枠線を消す（枠が3pxなので高さ3px） */
.box-after::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;           /* 枠線と同じ太さ */
  width: 120px;          /* ラベル幅＋余白分（調整可） */
}

/* 矢印共通 */
.swiper-button-prev,
.swiper-button-next {
  width: 48px;
  height: 48px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
border:none;
}

/* 左矢印 */
.swiper-button-prev {
background-image: url('images/arrow-left.png'); /* 実際のパスに変更 */
left: 10px;  /* 画面端からの距離 */
}

/* 右矢印 */
.swiper-button-next {
background-image: url('images/arrow-right.png'); /* 実際のパスに変更 */
  right: 10px;
}

/* Swiperが持っているデフォルトの矢印アイコンを消す */
.swiper-button-prev::after,
.swiper-button-next::after{
  display: none;
}



.text {
  font-size: 13px;
  margin: 8px 0;
}

.text.orange {
  color: #ff6600;
  font-weight: bold;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .slider-item {
    flex: 0 0 calc(50% - 20px);
  }
}
@media (max-width: 768px) {
	.slider-wrapper{gap:0;}	
  .slider-item {
    flex: 0 0 100%;
	  padding:15px 10px;
  }
}
/* スマホ文字サイズ少しだけ調整 */
@media (max-width: 480px){
  .box-before::before,
  .box-after::before{ font-size: 13px; }
}

/* ===== sec03 ===== */

.sec03{ background-color:#37a6ed;padding-bottom:50px;}

.sec03-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.sec03-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}


/* レスポンシブ */
@media (max-width: 1024px) {
  .sec03-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .sec03-grid {
    grid-template-columns: 1fr;
  }
  .sec-title {
    font-size: 20px;
  }
}

/* ===== sec04 ===== */
.sec04 {
padding: 40px 0px 0 0!important;
  /* 背景にグラデーション＋画像を重ねる */
  background: 
    linear-gradient(to bottom,
      #ffffff 0%,
      #ffffff 40%,
      #f3fcff 70%,
      #b8eeff 100%
	);
}
.sec04 .inner{padding-bottom:0!important;}

.sec04 .sec04-box2{
background-image:url("images/bg-sec04.png");
background-size: contain;
background-position: left;
background-repeat:no-repeat;
padding-left:340px;
padding-top:50px;
padding-bottom:40px;
}

.sec04__title{
/* レイアウト */
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(10px, 4vw, 28px);
  /* 文字 */
  font-weight: 900;
  font-size: contain;
  line-height: 1.3;
  /* 色（必要に応じて変更） */
  color:#3b80c6;              /* 文字色＝ライン色 */
  letter-spacing: .05em;
  text-align:center;
  margin:50px 0;
}

/* 両サイドの斜線を疑似要素で作成 */
.sec04__title::before,
.sec04__title::after{
  content:"";
  display:block;
  width: clamp(26px, 10vw, 64px);
  height: 2px;
  background: currentColor;   /* 文字色と揃える */
  transform-origin: center;
  opacity:.9;
}

/* 左右で角度を変える（画像の雰囲気に合わせて調整可） */
.sec04__title::before{
  transform: rotate(70deg);
}
.sec04__title::after{
  transform: rotate(-70deg);
}

/* 余白を含めたクリック/タップに備え span を保持 */
.sec04__title > span{
  display:inline-block;
}

.sec04-box{
  --sec04-blue: #3b80c6;
  --sec04-red:  #e64a3b;

  position: relative;
  padding: clamp(24px, 4vw, 40px);
  border: 3px solid var(--sec04-blue);
  border-radius: 16px;
  background: #fff;

  /* 左右の背景画像を内側に表示 */
  background-image: url("images/sec04-left.png"), url("images/sec04-right.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left 10px top 20px, right 10px top 20px;
  background-size: contain;
}

/* 本文（リスト） */
.sec04-list{
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 100px;   /* 左の画像分だけ寄せる */
  margin-right: 80px;  /* 右の画像分だけ寄せる */
  color: var(--sec04-blue);
  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.9;
}

.sec04-list li{
  position:relative;
  padding-left:2em;   /* 左余白調整 */
  line-height:1.7;
  color:#3b80c6;
	font-size:1.4em;
}

.sec04-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:block;
  width:1.4em;                   /* 横幅を指定 */
  height:calc(1.2em * 0.735);    /* 高さは比率で計算 */
  background:currentColor;
  -webkit-clip-path: polygon(
    0 31%,
    63.2% 31%,
    63.2% 0,
    100% 50%,
    63.2% 100%,
    63.2% 69%,
    0 69%
  );
  clip-path: polygon(
    0 31%,
    63.2% 31%,
    63.2% 0,
    100% 50%,
    63.2% 100%,
    63.2% 69%,
    0 69%
  );
}

.sec04-list .em-red{
  color: var(--sec04-red);
  font-weight: 900;
}

/* ===== レスポンシブ ===== */
@media (max-width: 840px){
.sec04 .sec04-box2{
background-position: bottom;
padding-left:0;
padding-bottom:500px;
	background-size:50%;
	}
.sec04-list{	
 margin-right:0px;}
	}	
@media (max-width: 640px){
  .sec04-box{
    /* スマホでは右画像だけ */
    background-image: url("images/sec04-right.png");
    background-repeat: no-repeat;
    background-position: right 10px bottom 10px;
    background-size: clamp(90px, 30vw, 140px);
  }
	.sec04 .sec04-box2{padding-bottom:280px; }
	
  .sec04-list{
    margin-left: 0;     /* 左はなくなるのでリセット */
    margin-right:0px!important; /* 右画像の分だけ余白を残す */
	padding-bottom:150px!important;
	}
}

/* ===== sec05 ===== */
.sec05{ }
.sec05 .inner section{ padding:0!important;}
.sec05-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}
.sec05 h2{margin-bottom:0!important;}

/* テキスト部分 */
.sec05-content {
  flex: 1;
	background-color:#eaf6fd;
	padding:30px;
}

.sec05-point img {
  width: 120px;
  margin-bottom: 15px;
}

.sec05-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1672b9;
  margin: 0 0 10px!important;
  line-height: 1.5;
	padding-left:0!important;	
}

.sec05-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;

}

/* 画像部分 */
.sec05-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* 反転パターン */
.sec05--reverse {
  flex-direction: row-reverse;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .sec05-container {
    flex-direction: column;
    text-align: center;
  }
  .sec05--reverse {
    flex-direction: column;
  }
  .sec05-point img {
    margin-left: auto;
    margin-right: auto;
  }
  .sec05-content {
    margin-top: 20px;
	 padding:10px;
  }
}

/* ====== sec06 ====== */

.sec06{background-color:#fff8f1;padding:50px 0;}

/* ====== 違いセクション（左テキスト／右画像） ====== */
.chigai { padding: clamp(24px, 4vw, 48px) 0; background:#f7fbff; color:#333; }
.chigai__inner {display:grid; gap:clamp(16px,2.8vw,28px); }

/* カード本体 */
.chigai-item{
  display:grid;
  grid-template-columns: 1fr;          /* SP: 縦並び（テキスト→画像） */
  gap:16px;
  background:#fff;
  border:3px solid #2d7fbb;
  border-radius:10px;
  padding: clamp(16px, 2.5vw, 24px);
  box-shadow:0 2px 8px rgba(0,40,80,.06);
}

.chigai-item__desc{ padding-left:80px;}


/* 吹き出し＋タイトルを横並びに */
.chigai-headline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: .3em;
  padding-bottom: .3em;
  width: 100%;          /* ← 親（.chigai-item__text）の幅いっぱいに広げる */
}

/* タイトルは吹き出しの右に */
.chigai-item__title {
  margin: 0!important;
  font-weight: 700;
  line-height: 1.35;
  font-size: clamp(18px, 2.1vw, 24px);
  color: #e4002b;
border-bottom:2px solid #2d7fbb!important;
}

.chigai-item__desc{ margin:0; font-size:clamp(14px,1.6vw,16px); line-height:1.9; }
.chigai-item__media{margin:0 auto;}
.chigai-item__media img{ height:auto; display:block; border-radius:10px; }

/* —— 丸い吹き出しバッジ（画像風デザイン） —— */
.chigai-badge{
  position:relative;
  display:inline-grid;
	 vertical-align: top; 
  place-items:center;
  width:64px; aspect-ratio:1/1;       /* 正円 */
  border-radius:50%;
  background:#2a8bcf;                 /* ベース青 */
  color:#fff;
  font-weight:700;
  margin-bottom:.6em;
  line-height:1;
}
.chigai-badge::after{                  /* 右向きの小さな三角（吹き出し） */
  content:"";
  position:absolute;
  right:-8px; top:50%; transform:translateY(-50%);
  border-width:8px 0 8px 10px;
  border-style:solid;
  border-color:transparent transparent transparent #2a8bcf;
}
.chigai-badge .jp{ font-size:14px; letter-spacing:.08em; margin-top:5px; }
.chigai-badge .num{ font-size:20px;margin-top:-5px;}

/* LINEボタン */
.line-btn {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左アイコン・中央テキスト・右矢印 */
  gap: 12px;
  padding: 0 18px;
  border-radius: 999px;
  background: #06c755;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.1);
  transition: transform .05s, filter .2s;
  font-size: clamp(14px,1.6vw,16px);
	 max-width: 600px;   /* 横幅の上限を600pxに */
  width: 100%;        /* 親幅に応じて伸縮 */
  margin: 0 auto;     /* 中央寄せ */
}

.line-btn:hover {
  filter: brightness(1.05);
	color:#efefef;
}
.line-btn:active {
  transform: translateY(1px);
}

/* 左のLINEアイコン */
.line-btn__icon {
  width: 50px;  /* アイコンサイズ調整 */
  height: auto;
  display: block;
}

/* テキストは中央寄せ */
.line-btn__text {
  flex: 1;
  text-align: center;
}

/* 右の矢印 */
.line-btn__arrow {
  font-size: 1.2em;
}


@media (min-width: 900px){
  .chigai-item {
    grid-template-columns: 1fr 270px;  /* ← 右側を270pxに固定 */
    align-items: center;
  }
}
@media (min-width: 640px){
  .chigai-item{
    grid-template-columns: 1fr min(40%,420px);
    align-items:center;
  }
}



/* ====== sec07 ====== */

.sec07 {
  padding:50px 0;
  background: linear-gradient(to bottom, #b9eeff 0%,#ccf3ff 40%,#f2fcff 70%,#ffffff 100%);
}
.sec07 h2{ margin-bottom:0!important;}
.sec07 h2 img{margin-top:-37px!important;}
.sec07 .inner{
  background-color:#ffffff;
}

.sec07-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 30px;
}

/* 左55% / 右45% */
.sec07-left {
  flex: 0 0 48%;
}
.sec07-right {
  flex: 0 0 42%;
}

/* 左側：赤チェックリスト */
.sec07-left .check-list {
  list-style: none;
  margin: 0;
  padding:20px!important;
  border: 1px solid #ccc;
}
.check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom:16px!important;
  line-height: 1.6;
  color: #333;
  font-size:0.9em;
}
.check-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #e60033; /* 赤 */
  font-weight: bold;
}
.check-list span {
  color: #e60033; /* 強調赤 */
  font-weight: 700;
}

/* 右側：青矢印リスト */
.sec07-right .arrow-list {
  list-style: none;
  margin: 0;
  padding: 20px!important;
  background: #fffaf7;
  border: 2px solid #c7e3f6;
  border-radius: 6px;
}
.arrow-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: #1672b9; /* 青 */
  font-weight: 700;
}
.arrow-list li::before {
  content: "➤";
  position: absolute;
  left: 0;
  color: #1672b9;
  font-size: 1.1em;
}

/* レスポンシブ（縦並び） */
@media (max-width: 768px) {
  .sec07-container {
/*    flex-direction: column;*/
  display: flex;
  flex-wrap: wrap;        /* 複数段に対応 */
  justify-content: center;/* 横方向中央寄せ */	  
  }
  .sec07-left,
  .sec07-right {
    flex: 0 0 100%;
	 max-width: 600px;/* 中央に寄せたい幅 */ 
  }
}
/* ===== 仕様表（PCは4列、SPは縦積み） ===== */
.spec-table{
  max-width: 1100px;
  margin: 0 auto;
padding: 20px 30px;	
  border-collapse:collapse;
  table-layout:fixed;              /* 均等割り */
  border:1px solid #d9d9d9;
  background:#fff;
  font-size:clamp(14px,1.6vw,16px);
  color:#333;
	width:95%;
}
.spec-table th,
.spec-table td{
  border:1px solid #d9d9d9;
  padding:14px 16px;
  vertical-align:middle;
  line-height:1.7;
}

/* 見出しセルの見た目（薄グレー背景・太字） */
.spec-table th{
  width:18%;
  background:#f3f3f3;
  font-weight:700;
  text-align:left;
  color:#333;
}
.spec-table td{ width:32%; }

/* --- スマホ：行を縦積み（見出し→値→見出し→値） --- */
@media (max-width: 768px){
  .spec-table{
    border-radius:6px;
    overflow:hidden;
  }
  .spec-table tr{
    display:grid;
    grid-template-columns: 1fr;    /* 1列に */
  }
  .spec-table th,
  .spec-table td{
    width:auto;                    /* 固定幅解除 */
    display:block;
    border-left:0;
    border-right:0;
    padding:12px 14px;
  }
  .spec-table th{
    background:#f3f3f3;
    border-top:1px solid #d9d9d9;
	 text-align:center;
  }
  .spec-table td{
    border-top:0;                  /* 直前のthとの境界は1本に見せる */
  }
  /* 行と行の区切りを少し強調 */
  .spec-table tr + tr th:first-of-type{
    border-top:2px solid #d9d9d9;
  }
}

.filmbox{max-width:1000px;margin:80px auto 40px;padding:0;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","游ゴシック体",YuGothic,"Noto Sans JP","メイリオ",Meiryo,sans-serif;border-left:2px #206fa9 solid;border-right:2px #206fa9 solid;border-bottom:2px #206fa9 solid; border-radius:0 0 5px 5px;}

.notes{margin:0 0 30px 30px;padding-left:1.2em;font-size:.92rem;line-height:1.6}
.notes li{margin:.2em 0}
.notes li::marker {content: none;}
.notes .em{color:#d7000f;font-weight:700}

/* 価格表（PCは表風／SPはカード） */
:root{
  --bd:#e6e6e6;
  --text:#333;
  --blue:#2f72b8;
  --pink:#e03151;
  --muted:#6b7280;
}

.price-table{border:1px solid var(--bd);overflow:hidden;background:#fff; margin:20px 30px;}
.price-table .pt-head{/*display:grid;grid-template-columns: 1fr 1fr 1fr;*/
  display: grid;
  grid-template-columns: 20% 40% 40%;
	text-align:center
}
.price-table .pt-head > div{padding:14px 16px;font-weight:700;color:#fff}
.price-table .pt-head .c-name{background:#9aa6b2}
.price-table .pt-head .c-one{background:var(--blue)}
.price-table .pt-head .c-set{background:var(--pink)}

.price-table .pt-row{
  display: grid;
  grid-template-columns: 20% 40% 40%;border-top:1px solid var(--bd);}
.price-table .pt-row:first-of-type{border-top:none}
.price-table .pt-row > div{padding:18px 16px}
.price-table .pt-row .c-one{ background-color:#ecf9ff;}
.price-table .pt-row .c-set{ background-color:#fff8f1;}


.c-name figure{margin:0 auto; text-align:center;}
.c-name img{width:120px;height:120px;object-fit:cover;border-radius:6px;border:1px solid var(--bd);background:#fff}
.c-name figcaption{font-weight:700;font-size:1em!important;}

.price{font-size:1.25rem;font-weight:800;letter-spacing:.02em; text-align:center;}
.price span{font-weight:700;font-size:.95rem;margin-left:.2em;text-align:center;}
.price.accent{color:#d72638;text-align:center;}
.meta{margin:.25em 0 0;color:var(--muted);font-size:.92rem; text-align:center;}

/* ボーダー調整 */
.price-table .pt-row > div:not(:last-child){border-right:1px solid var(--bd);}

/* スマホ：カード型に変形 */
@media (max-width: 768px){
.price-table .pt-head{display:none!important;}
  .price-table{border:none;background:transparent;}
  .price-table .pt-row{
    grid-template-columns: 1fr;
    border:1px solid var(--bd);
    border-radius:12px;
    margin-bottom:14px;
    overflow:hidden;
    background:#fff;
  }

  .price-table .pt-row > div{border-right:none;padding:14px 16px}
  .c-name{background:#f8fafc;border-bottom:1px solid var(--bd)}
  .c-name figure{gap:14px}
  .c-name figcaption{font-size:1.05rem}
  /* 2カラムの価格をラベル付きで */
  .c-one::before,
  .c-set::before{
    content:attr(data-label);
    display:inline-block;
    font-size:.82rem;
    font-weight:700;
    padding:.25em .6em;
    border-radius:999px;
    margin-bottom:.4em;
    background:#e9eef5;
    color:#3b4754;
  }
  .c-one{border-bottom:1px solid var(--bd)}
}

/* ラベルをJSなしで付与 */
.price-table .pt-row .c-one{--label:"1巻"; }
.price-table .pt-row .c-set{--label:"お得な4巻セット";}
@media (max-width:768px){
  .price-table .pt-row .c-one::before{content:"1巻";}
  .price-table .pt-row .c-set::before{content:"お得な4巻セット";}
}



.sec08 {
  /* セクションの高さは自動（コンテンツに応じる） */
  padding: 10px 1rem 50px!important;
  text-align: center;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
  background: linear-gradient(
    to bottom,#ff961e 0%,#ff961e 10%,#329be8 10%,#3db3f4 55%,#47c8fe 100%
  );
}

/* 吹き出しの三角 */
.sec08 h2 {
  margin: 0 0 1rem;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  position: relative;
  z-index: 1;
}

/*.sec08 h2::after {
content: "";
position: absolute;
left: 50%;
bottom:-25px;
transform: translateX(-50%);
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #ff961e transparent transparent transparent;
}*/

/* 左の丸背景 */
.sec08 .circle {
  background: #fff;
  color: #e03151;
  border-radius: 50%;
  display: inline-block;
  font-weight: 700;
  padding: 1.1em 0.4em;
  font-size: 0.5em;
}
/* --------------------------
   デモ機を体験してみませんか？
---------------------------*/
:root{
  --wrap: 1120px;
  --padX: 16px;
  --gap: 24px;
}

.taiken {
  max-width: var(--wrap);
  margin: 40px auto 0;
  padding: 12px var(--padX) 40px;
  box-sizing: border-box;
  font-family: "Noto Sans JP", system-ui, -apple-system,
               "Hiragino Kaku Gothic ProN","Yu Gothic", Meiryo, sans-serif;

  /* 背景に taiken-left.png を設定 */
  background-image: url("images/taiken-left.png");
  background-repeat: no-repeat;
  background-position: left 10% bottom; /* PC用配置 */
  background-size: 40%; /* サイズは調整 */
 background-color:#ffffff; 
}

/* タイトル */
.taiken-title{
  margin: 0 0 18px;
  line-height: 0;
}
.taiken-title img{
  width: 100%;
  height: auto;
  display: block;
}

/* 本体 */
.taiken-body{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: end; /* 右寄せ */
}
.taiken-right img{
  max-width: 500px;
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------
   レスポンシブ調整
---------------------------*/
/* タブレット幅以下 */
@media (max-width: 1025px){
  .taiken {
    background-position: left bottom!important; /* 左寄せを強めに */
    background-size: 50%!important;
	 padding-bottom:200px;
  }
  .taiken-right img{
    max-width: 420px;
  }
}

/* スマホ幅以下 */
@media (max-width: 640px){
  .taiken {
    background-position: center bottom; /* 中央寄せに変更 */
    background-size: 80%; /* 画面に合わせて大きめに */
    padding-bottom: 330px; /* 背景が隠れないよう余白を確保 */
  }
  .taiken-body{
    justify-items: center; /* 中央寄せ */
  }
  .taiken-right img{
    max-width: 100%;
  }
}

/* 小型スマホ */
@media (max-width: 480px){
.sec08 {
	padding-top:20px!important;
	background: linear-gradient( to bottom,#ff961e 0%,#ff961e 15%,#329be8 15%,#3db3f4 55%,#47c8fe 100% );
}	
	
  .taiken {
    background-size: 95%;  /* 画面幅いっぱい */
    padding-bottom: 220px;
  }
}

/* --------------------------
         sec09
---------------------------*/
.sec09 {
	padding:0!important;
  background: linear-gradient(
    to bottom,
    #a9e6ff 0%,   /* 上の水色 */
    #ffffff 40%,  /* 中央の白 */
    #ffffff 60%,  /* 中央広めの白 */
    #a9e6ff 100%  /* 下の水色 */
  );
}

.sec09 .inner{
padding-top:50px;
background-image: url("images/img-air-sample.png");
background-repeat: no-repeat;
background-position: left 10% bottom;
background-color:transparent;
background-size:40%;
padding-bottom:50px;
}

.sec09 h2{ 
	color:#2d7fbb;
  text-shadow:
    0 0 6px rgba(255,255,255,0.6),
    0 0 12px rgba(255,255,255,0.6),
    0 0 18px rgba(255,255,255,0.6);
}
.sec09 .sec09-text{ padding-left:500px;}


@media screen and (max-width: 640px){
.sec09 .sec09-text{ padding-left:0px!important;}	

.sec09 .inner{
padding-top:50px;
background-image: url("images/img-air-sample.png");
background-repeat: no-repeat;
background-position: center bottom;
background-color:transparent;
background-size:40%;
padding-bottom:80px!important;
}
}

/* --------------------------
         sec10
---------------------------*/
.sec10 h2{padding-top:30px;}
.superair-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;   /* SP: 1カラム */
  max-width: 1100px;
  margin: 0 auto 30px auto;
}

.superair-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* PCでは左右2カラム */
@media (min-width: 900px) {
  .superair-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------
         sec11
---------------------------*/
.sec11 {
  /* グラデーション背景（上が濃い青 → 下が薄い水色） */
  background: linear-gradient(to bottom, #2d9ee0 0%, #5ac9ff 100%);

  /* 水玉パターン（上部のみ） */
  background-image: 
    radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
    linear-gradient(to bottom, #2d9ee0 0%, #5ac9ff 100%);
  background-size: 20px 20px, auto;
  background-position: center top, center;
  background-repeat: repeat, no-repeat;
	padding:80px 0;
}

.sec11box{ background-color:#ffffff;padding:30px;}

.article h2.sec11-title{
  position: relative;
  background: #1f6da5!important;         /* 青帯 */
  color: #ffff66;              /* 黄色文字 */
  text-align: center;
  font-weight: 700;
  font-size: 1.4rem;
  padding: 17px 25px!important;
  margin: 0 auto;
  border-radius:50px;	
	display:inline-block;
	top:-50px;
	left:30%;
}

/* 下の小さな三角 ▼ */
.article h2.sec11-title::after {
  content: "";
  position: absolute;
  bottom: -10px;               /* 帯の下に突き出す */
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 8px 0 8px;
  border-style: solid;
  border-color: #1f6da5 transparent transparent transparent;
}

/* 見出しテキスト */
.contact__lead{
  margin:0 0 .8em;
	text-align:center;
}
.contact__sub{
  margin:.4em auto 1.2em;
  padding:.6em 0;
  width:min(600px,100%);
  border-top:2px solid #2d7fbb;
  border-bottom:2px solid #2d7fbb;
  font-weight:700;
		text-align:center;
display:block;
}

/* 電話画像（レスポンシブ） */

.contact__tel{ text-align:center;}

.contact__tel img{
  max-width: 520px;
  width: 100%;
  height: auto;
  display: inline-block;
}

/* 画像ボタン（LINE / メール） */
.contact__btns{
  margin: clamp(16px,3vw,28px) auto;
  display:grid;
  gap: clamp(10px,2vw,16px);
  grid-template-columns: 1fr; /* SP: 1カラム */
  width:min(1040px,100%);
}

@media (min-width: 840px){
.sec11 {padding:50px 0;}	
}

@media (max-width: 840px){
.article h2.sec11-title {
  top: -50px;
  left: 0%;		
}
}	
	
/* PC: 2カラム */
.contact__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}


.contact__btn-img img{
  width:100%;
  height:auto;
  display:block;
}

.company-box {
  border: 1.5px solid #1f5d91;   /* 枠の色 */
  border-radius: 10px;           /* 角丸 */
  padding: 20px 30px;
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
  background: #fff;
  box-sizing: border-box;
}

.company-box p {
  margin: 6px 0;
  line-height: 1.6;
  font-size: 1rem;
  color: #333;
}

.company-name {
  font-weight: 700;
  font-size: 1.1rem;
}


/* スマホ: 1カラム */
@media screen and (max-width: 768px) {
  .contact__btns {
    grid-template-columns: 1fr;
  }
}

/* --------------------------
         sec12
---------------------------*/
@media (max-width: 840px){
	.home .sec12{ padding-bottom:0px;}
}

/* --------------------------
         sec13
---------------------------*/
.sec13{
padding:50px 0;
background-color:#fbfbfb;
}

.sec13 h2{
text-align: center;
color: #206fa8;
margin-bottom:10px!important;
font-size: 28px;
}


.guide-subtitle {
            text-align: center;
            color: #666;
            margin-bottom:20px;
            font-size: 16px;
        }
        
        .main-content {
            display: flex;
            gap: 30px;
        }
        
        .left-column, .right-column {
            flex: 1;
            width: 50%;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .section-header {
            background: #206fa8;
            color: white;
            padding: 15px 20px;
            font-weight: bold;
            font-size: 16px;
        }
        
        .section-content {
            padding: 20px;
			font-size:12px;
        }
        
        dl.guide-dl {
            margin-bottom: 25px;
        }
        
         dl.guide-dl dt {
            color: #206fa8;
            margin-bottom: 10px;
            font-size: 14px;
            font-weight: bold;
        }
        
         dl.guide-dl dd {
            font-size: 12px;
            color: #333;
            margin-bottom: 15px;
            margin-left: 0;
        }
        
        .shipping-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
            font-size: 11px;
        }
        
        .shipping-table th, .shipping-table td {
            border: 1px solid #ddd;
            padding: 6px;
            text-align: center;
        }
        
        .shipping-table th {
            background: #f8f9fa;
            font-weight: bold;
        }
        
        .shipping-note {
            color: #d32f2f;
            font-weight: bold;
            font-size: 12px;
            margin: 10px 0;
        }
        
        .contact-info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
            font-size: 12px;
        }
        
        .map-container {
            text-align: center;
            margin: 20px 0;
        }
        
        .japan-map {
            max-width: 100%;
            height: auto;
        }
        
        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
            font-size: 11px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .legend-color {
            width: 15px;
            height: 15px;
        }
        
        .color-same-day { background: #ff9800; }
        .color-next-day { background: #4caf50; }
        .color-3days { background: #00bcd4; }
        .color-3-4days { background: #f44336; }
        .color-2days { background: #ff7f7f; }
        
        .button {
            display: inline-block;
            background: #ff9800;
            color: white;
            padding: 12px 24px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            margin: 10px 5px;
            transition: background 0.3s;
            font-size: 12px;
        }
        
        .button:hover {
            background: #f57c00;
        }
        
        .demo-button {
            background: #ff5722;
            display: block;
            text-align: center;
            margin: 20px auto;
            max-width: 200px;
        }
        
        .button-container {
            text-align: center;
            margin: 20px 0;
        }
        
        .map-section {
            background: white;
            margin-top: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
                gap: 20px;
            }
            
            .left-column, .right-column {
                width: 100%;
            }
            
            
            .shipping-table {
                font-size: 10px;
            }
            
            .shipping-table th, .shipping-table td {
                padding: 4px;
            }
            
            .legend {
                justify-content: center;
            }
            
            .section-header {
                font-size: 14px;
                padding: 12px 15px;
            }
            
            .button {
                display: block;
                margin: 10px 0;
                text-align: center;
            }
        }

/* ============================================
   フォーム・お問い合わせ
============================================ */
.box_con {
  max-width: 1100px;
  margin: 0 auto;
}

.box_con form {
  width: 100%;
}

.box_con form table {
  width: 100%;
}

.box_con form table tr {
  position: relative;
}

.box_con form table tr:after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 1px;
}

.box_con form table tr th {
  width: 30%;
  font-weight: normal;
  padding: 1em .5em;
  box-sizing: border-box;
  text-align: left;
}

.box_con form table tr th span {
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 3px;
  padding-bottom: 3px;
  width: 48px;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

.box_con form table tr th .optional {
  background: #337ab7;
}

.box_con form table tr th .essential {
  background: #cd6f55;
}

.box_con form table tr td {
  padding: 1em .5em;
  box-sizing: border-box;
}

.box_con form table tr select,
.box_con form table tr input,
.box_con form table tr textarea {
  width: 100%;
  height: 3em;
  padding: .5em;
  box-sizing: border-box;
}

.box_con form table tr textarea {
  width: 100% !important;
  height: 100px !important;
}

.input-zip {
  width: 120px !important;
}

.submit-button {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  margin: 30px auto 0;
  background-color: #e4eeef;
  cursor: pointer;
  border: 1px solid #e4eeef;
  color: #000;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
  outline: none;
  transition: all .5s;
  padding: 20px 100px;
}

.submit-button:hover {
  background: #cae1e3;
  color: #000;
  border: 1px solid #cae1e3;
}

.boxBtn {
  position: relative;
  height: 50px;
  text-align: center;
}

.box_con input[type=submit] {
  width: 50%;
}

/* ラジオボタン */
.box_con form table tr .radio02-input {
  padding-left: 23px;
  margin-right: 20px;
  position: relative;
}

.box_con form table tr .radio02-input + label {
  padding-left: 23px;
  margin-right: 20px;
  position: relative;
}

.box_con form table tr .radio02-input + label:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #999;
  border-radius: 50%;
  transform: translateY(-50%);
}

.box_con form table tr .radio02-input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  background: #4c7096;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* プライバシーポリシー */
.con_pri {
  max-width: 700px;
  margin: 0 auto;
}

.con_pri .box_pri {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #cdcdcd;
  background: #f7f7f7;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 20px 55px;
}

.con_pri .box_pri .box_tori {
  text-align: left;
  margin-top: 40px;
}

.con_pri .box_pri .box_tori h4 {
  font-weight: normal;
  margin-bottom: 30px;
  font-size: 150%;
}

.con_pri .box_pri .box_tori .txt {
  padding: 0 20px;
}

.con_pri .box_pri .box_num {
  margin-top: 30px;
}

.con_pri .box_pri .box_num h4 {
  font-weight: normal;
  font-size: 113%;
}

.con_pri .box_pri .box_num .txt {
  padding: 10px 0 0 20px;
}

.dlprivacy {
  margin-left: 0;
  margin-right: 10px;
}

.dlprivacy dt {
  margin: 27px 0 14px;
  border-left: 5px solid #42a6ff;
  background-color: #f4f4f4;
  padding: 10px 18px 7px;
  line-height: 1.5;
  font-size: 120%;
  font-weight: normal;
}

.dlprivacy dd {
  margin-bottom: 20px;
  margin-left: 15px;
}

/* ============================================
   マップ・メディア
============================================ */
.ggmap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube iframe {
  width: 100%;
  height: 100%;
}

.video-container {
  max-width: 100%;
  margin: 30px 0;
}

/* ============================================
   投稿・記事ページ
============================================ */
.category .container,
.single .container {
  background-color: #ffffff !important;
  background-image: none;
}

.category #content,
.single #content {
  margin: 0 auto;
  background: #FFF;
  padding: 20px 5% 2% 5%;
  max-width: 1000px;
}

.single .article h2 {
  padding: 0.5em !important;
  color: #494949;
  background: #eaf4fc;
  border-left: solid 5px #7db4e6;
  font-size: 1.2em;
}

.single .article h3 {
  font-size: 1em;
  border-left: 10px solid #7db4e6;
}

.single .article h4 {
  font-size: 16px;
  padding: 0.5em;
  color: #494949;
  border-bottom: solid 1px #7db4e6;
}

.single .article h5 {
  font-size: 14px;
  padding: 0.5em;
  color: #494949;
  background: #eaf4fc;
  border-left: solid 5px #7db4e6;
  border-bottom: none;
}

.cta-box {
  border: solid 1px #9d9d9d;
  border-radius: 8px;
  background-color: #fff;
  color: #444;
}

.new-entry-card-post-date {
  color: #00a8e3;
}

.date-tags {
  margin-bottom: 30px !important;
}

/* ============================================
   カテゴリ・アーカイブページ
============================================ */
.entry-card-wrap {
  margin-bottom: 10px;
}

.entry-card {
  padding-left: 0 !important;
  padding-bottom: 20px;
  margin-bottom: 10px;
  background: url(images/line-dotte.png) left 0px bottom repeat-x;
}

.post h2.entry-card-title,
.post h2.related-entry-card-title {
  background: #fef0de;
  padding: 1rem 1rem 1rem 2.5rem;
  position: relative;
}

.post h2.entry-card-title:before,
.post h2.related-entry-card-title:before {
  position: absolute;
  top: 20%;
  left: 20px;
  width: 6px;
  height: 60%;
  content: '';
  border-radius: 3px;
  background: #ff7f00;
}

.entry-card-meta {
  display: none;
}

/* ウィジェット */
.new-entry-card-date {
  display: block;
}

.new-entry-card-date .post-date {
  background: transparent url(images/icon-time.png) no-repeat left center;
  display: block !important;
  padding: 10px 0 10px 20px;
}

.widget-entry-card-date {
  display: block;
  position: absolute;
  right: 0;
  font-size: 18px;
}

.widget-entry-card-snippet {
  line-height: 1.5;
}

.widget-entry-cards.card-large-image .a-wrap {
  width: 32.5%;
  height: auto;
  display: inline-flex;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.widget-entry-cards.not-default figure img {
  padding: .5em;
}

/* ============================================
   ユーティリティ・その他
============================================ */
.clearfix:after,
.clearfix:before {
  content: "";
  display: block;
  clear: both;
}

.clearfix {
  display: block;
}

/* 画像表示制御 */
.pc-img { display: inline !important; }
.tab-img { display: none !important; }
.tab-smt { display: none !important; }
.smt-img { display: none !important; }

/* ============================================
   レスポンシブデザイン
============================================ */
/*1100px以下 (タブレット横サイズ)* */
@media screen and (max-width: 1100px){

#header-container-in{ width:100%; position:relative; padding-top:70px!important;}

#header-container {
    padding-top: 5px;
    padding-bottom: 10px;
}
	
.logo{
position:absolute;
top: 0px;
left: 0;	
}

	

/************************************
** MENU
************************************/	
#menu-h-menu li{ width:80px!important;}
	
#menu-h-menu li#menu-item-18{
background:transparent url(images/h-demo-smt.png) 50% 50% no-repeat!important;
padding:30px!important;
width:70px!important;
height:70px;
}
#menu-h-menu li#menu-item-18 a:hover{ opacity:0.2;}	

#menu-h-menu li#menu-item-19{
background:transparent url(images/h-contact-smt.png) 50% 50% no-repeat!important;
padding:30px!important;
margin-left:10px;
width:70px!important;
height:70px;
}	
.fixed-header{ background-color:#ffffff!important;}
/************************************
** 固定ページ
************************************/
.page .inner{
	width:100%;
	margin:0 auto;
	padding:0 20px;
}
/************************************
** TOP
************************************/
.home .container{
}	
.home #main-image{
width:100%;
}
	
.home #main-image p{
    width: 100%;
    margin: 0 auto;
	text-align:center;
}		

.pc-img { display:none !important;}
.tab-img{ display:inline!important;}	
.tab-smt{ display:inline!important;}	
.smt-img{ display:none !important;}		
}



/*1024px以下 (iPadMini横サイズ)* */
@media screen and (max-width: 1025px){
/************************************
** ヘッダー
************************************/
#header-container {
  padding-bottom: 0px;
	width:100%!important;	
}
#header-container-in{ padding-top:0!important;width:100%; position:relative;}

	
.home #main-image p{
width:100%;
padding-left:0px;
}
.home #main-image p img{ margin:0 auto;width:100%;}			
	
.page .inner{
	width:100%;
	margin:0 auto;
}	

.tagline{ 
	margin-top:0!important;
	margin-bottom:0!important;
}
	
.mobile-header-menu-buttons{ background-color:#fff;}

.search-menu-button{ display:none;}
.navi-menu-button{ margin-top:7px;}
	
	
/*ロゴエリア*/
.mobile-menu-buttons .logo-menu-button{display:block; width:80px!important;}
	
.logo{
position:absolute!important;
top: 15px!important;
left: 0!important;	
}
.logo-menu-button{
	position:relative;
	left:0px;
	width:100%;
}
	
.logo-menu-button img {
max-height: 80px;
	max-width:95%;
	margin: 5px 0 0 5px;
}

	
/*メニューエリア*/
#menu-h-menu li{ font-size:0.8em!important;}
.m-tel {
   padding: 10px!important;
   width: 240px;
}
	
.fa-bars::before{ color:#02224d!important; font-size:30px;}
.search-menu-button.menu-button,
.mobile-header-menu-buttons .navi-menu-button.menu-button{
	height: 65px;
	padding-top:0px;
	padding-left:0;
	padding-right:0px;
}
.navi-menu-button { width:60px!important;}	
.navi-menu-button img{margin-right:0; }
.navi-menu-caption{ display:none!important; }	
	

	
/*固定ヘッダーエリア*/	
.fixed-header{background-color:#ffffff!important;}
.fixed-header #navi .navi-in {
position: absolute;
right: 0px!important;
top: 10px;
}

.fixed-header .header-container-in.hlt-top-menu .navi-in .item-label{ font-size:0.8em!important;}	
.fixed-header .logo{ position:absolute;top:10px;left:0; }
.fixed-header .h-submenu{
  width:340px;	
  position: absolute;
  top: -10px;
  left: 750px;
  margin-top: 0 !important;	
}
.fixed-header #menu-h-menu li{ /*width:16%!important;*/ }
.fixed-header .h-submenu li{ max-width:90px;}	
.fixed-header .h-submenu img{ }
/*メイン画像エリア*/
.wp-block-cover{min-height:70vh;}

img.alignright, img.alignleft{
display:block;
margin:5px auto 20px auto;
}

/************************************
** 画像関係のスタイル
************************************/
figure {
  margin: 0;
}

img {
max-width: 95%;
  height: auto;
}
	
/************************************
** contents
************************************/
.page .inner{
max-width: 100%;	
margin:0 auto;
padding: 0 5%;
}
	
/************************************
** section
************************************/
section .inner{ margin:0 auto; width:100%; /*padding:30px!important;*/}

/************************************
** TOP
************************************/

	
/************************************
** List
************************************/
.list01{　width: 100%; text-align:center;}
.list01 li{　margin:0 auto;display:inline-block;}

.listblue li{ margin-left:0px!important;}	
	
dl.dllist { float:none;width:100%; margin-right:0;}
dl.dllist dt{ text-align:center; }	
.alignright,.alignleft{	float:none;}

/************************************
** table
************************************/
table.table01 th,
table.table01 td{
width:100%!important;
display: block!important;}	

.pc-img { display:none !important;}
.tab-img{ display:inline!important;}	
.tab-smt{ display:inline!important;}	
.smt-img{ display:none !important;}	
}	
/*1024px以下*/
@media screen and (max-width: 1024px){

/************************************
** 固定ページ
************************************/
.page .inner{
	width:100%;
	margin:0 auto;
}
#header-container{padding-top:0px!important;}
	
/*ヘッダーボタンエリア　*/	
.h-submenu {
width:220px;
  margin-top: 15px!important;
  margin-left: 0px !important;
  padding:0 5px !important;
	text-align:right;
}	
	
.ti01{ display:block;}
	
.smt-img{ display:inline!important;}
#main-image .smt-img{display:none !important;}
.tab-img{ display:none !important;}
#main-image .tab-img{display:inline !important;}	
.h-submenu .smt-img { display:inline!important;}
.category-page-content li.listred{ width:45%; margin:0 auto; }	
}


/*1000px以下*/
@media screen and (max-width: 1000px){
.header-container-in.hlt-top-menu{ display:none;}
.home #main-image p {
}

/************************************
** 			header
************************************/
.mobile-header-menu-buttons .h-submenu li{ display:inline-block;}
.mobile-header-menu-buttons .h-submenu li.h-demo{ max-width:120px;}
.logo-menu-button img {
max-height: 80px;
	max-width:95%;
	margin: 5px 0 0 5px;
}
	
	
.tab-img {
display:inline !important;
width: 100% !important;
}

.title-box {
    font-size: 1rem;
    padding: 0.8em 1em;
  }

.title-box::after {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #ff7f00;
    bottom: -15px;
  }
}

/* ============================================
   追尾バナー 
============================================ */
.fixed-try-banner {
  position: fixed;
  right: 10px;        /* 右端からの距離 */
  bottom: 20px;       /* 下端からの距離 */
  z-index: 9999;      /* 前面に出す */
  width: 100px;       /* バナー幅（任意調整） */
}
.fixed-try-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ時は非表示にしたい場合 */
@media (max-width: 768px){
  .fixed-try-banner { display: none; }
}


/* ============================================
  Form
============================================ */
.form-container {
            max-width: 1000px;  /* PC用の最大幅を設定 */
            width: 100%;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 40px;
        }

        /* テーブルスタイル */
        .table01 {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
        }

        .table01 th,
        .table01 td {
            padding: 20px 15px;
            border-bottom: 1px solid #e0e0e0;
            vertical-align: top;
            word-break: break-word;
        }

        .table01 th {
            background-color: #f8f9fa;
            font-weight: bold;
            width: 200px;
            text-align: left;
        }

        .table01 td {
            background-color: white;
        }

        /* 必須マーク */
        .essential {
            background-color: #e74c3c;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 8px;
            display: inline-block;
        }

        /* チェックボックス群のスタイル修正 */
        .inquiry-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 20px 15px;
        }

        .chk {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            line-height: 1.6;
        }

        .chk input[type="checkbox"] {
            margin-top: 2px;
            width: 18px;
            height: 18px;
        }

        .chk label {
            flex: 1;
            cursor: pointer;
        }

        /* "その他"の追加入力 */
        .other {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .other-input {
            width: 100%;
            max-width: 400px;
            height: 40px;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        /* 入力フィールド */
        input[type="text"],
        input[type="email"],
        input[type="tel"] {
            width: 100%;
            max-width: 400px;
            height: 45px;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
   input.other-input[type="text"]{ max-width: 350px;}


        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="tel"]:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
        }

        /* ボタンスタイル */
        .mfp_buttons {
            text-align: center;
            padding: 30px 0;
        }

        button[type="submit"] {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            padding: 15px 50px;
            border-radius: 6px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }

        button[type="submit"]:hover {
            background: linear-gradient(135deg, #2980b9, #21618c);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
        }

        /* レスポンシブ対応 */
        @media (max-width: 768px) {
            .form-container {
                margin: 10px;
                padding: 20px;
            }

            .table01 th {
                width: auto;
                display: block;
                border-bottom: none;
                padding-bottom: 5px;
            }

            .table01 td {
                display: block;
                padding-top: 5px;
            }

            .inquiry-options {
                padding: 15px 0;
            }

            input[type="text"],
            input[type="email"],
            input[type="tel"] {
                max-width: 100%;
            }

            .other-input {
                max-width: 100%;
            }
        }

        /* 中間サイズ（タブレット）対応 */
        @media (min-width: 769px) and (max-width: 1200px) {
            .form-container {
                max-width: 90%;
                margin: 0 auto;
            }
        }
div#mfp_hidden {
	overflow: hidden;
	width: 1px;
	height: 1px;
	padding: 0px;
	margin: 0px;
}
div#mfp_hidden input {
	margin: 10px;
}
div.mfp_thanks {
	padding: 30px;
}
div.mfp_thanks p {
	line-height: 1.7em;
}
div.mfp_thanks ul.mfp_caution {
	margin: 0px;
	padding: 0px;
}
div.mfp_thanks ul.mfp_caution li {
	display: block;
	color: #C00;
	margin: 0px;
	padding: 5px 0px;
}
div#mfp_thanks {
	text-align: center;
	font-size: 18px;
	padding: 20px 0px;
}
div#mfp_thanks strong {
	color: #C00;
	font-size: 24px;
}
form#mailformpro {
	padding: 10px 0px;
	vertical-align: top;
}
.must {
	display: block;
	background-color: #C00;
	border: solid 2px #C00;
	text-shadow: 0px 1px 2px #933;
	padding: 2px 5px;
	font-size: 10px;
	color: #FFF;
	float: left;
	margin: 0px 5px;
	border-radius: 4px;
	box-shadow: 0px 0px 5px #CCC;
	background-image: url(images/header.png);
	background-size: 100% 100%;
}
.optionally {
	display: block;
	background-color: #06C;
	border: solid 2px #06C;
	text-shadow: 0px 1px 2px #933;
	padding: 2px 5px;
	font-size: 10px;
	color: #FFF;
	float: left;
	margin: 0px 5px;
	border-radius: 4px;
	box-shadow: 0px 0px 5px #CCC;
	background-image: url(images/header.png);
	background-size: 100% 100%;
}
form#mailformpro label {
	border-radius: 3px;
	margin: 3px;
	max-width:100%;
}
form#mailformpro label.mfp_checked {
	padding: 3px;
	border: solid 1px #CCC;
	background-color: #E8EEF9;
	box-shadow: 0px 1px 3px #CCC inset;
}
form#mailformpro label.mfp_not_checked {
	padding: 3px;
	border: solid 1px #EEE;
}
input {
	margin-bottom:5px;
	background: #ccc;
	max-width:100%;
}
input.input-seimei[type="text"]{ width:48%;float:left ; margin-right:5px;}

input:focus{
background: #FFF;
}
table#mfp_confirm_table {
	border-spacing: 0px;
	border-collapse: collapse;
	width: 100%;
}
table#mfp_confirm_table tr.mfp_colored {
	background-color: #f5f5f5;
}
table#mfp_confirm_table tr.mfp_achroma {
	background-color: #FFF;
}
table#mfp_confirm_table tr th,table#mfp_confirm_table tr td {
	text-align: left;

	border-top: solid 1px #CCC;
	padding: 5px 10px;
}
table#mfp_confirm_table tr th {
	white-space: nowrap;
	width: 200px;
}
table#mfp_confirm_table tr td {
	line-height: 1.5em;
	word-break: break-all;
}
div#mfp_phase_confirm {
	clear: both;
}
div#mfp_phase_confirm h4 {
	font-size: 36px;
	padding: 10px 0px 0px 0px;
	text-align: center;
}
div#mfp_overlay {
	position: absolute;
	display: none;
	z-index: 10001;
}
div#mfp_overlay_inner {
	background-color: #FFF;
	padding: 15px;
	margin: 0px auto;
	border-radius: 5px;
	box-shadow: 0px 0px 10px #000;
	width: 640px;
	max-width: 90%;
}
div#mfp_overlay_background {
	background-color: #000;
	position: absolute;
	display: none;
	z-index: 10000;
}
div#mfp_loading_screen {
	z-index: 20000;
	opacity: 0.8;
	display: none;
	background-color: #000;
	position: absolute;
}
div#mfp_loading {
	z-index: 20001;
	position: absolute;
	display: none;
	width: 40px;
	height: 40px;
	background-image: url(images/mfp_loading.gif);
}
.mfp_colored {
	background-color: #F6F7F9;
}
.mfp_achroma {
	background-color: #FFF;
}
div.mfp_err {
	clear: both;
	display: none;
	text-align: left;
	margin: 5px 0px 0px 0px;
	padding: 3px 0px 5px 17px;
	color: #F00;
	font-size: 12px;
	line-height: normal;
	background-image: url(images/mfp_error.gif);
	background-repeat: no-repeat;
	background-position: 0px 1px;
}
.mfp_parent_error {
	border: solid 2px #F00;
}
.problem {
	background-color: #FCC;
}
div#mfp_error {
	background-color: #FEE;
	border: solid 1px #F00;
	padding: 10px;
	display: none;
}
div#mfp_error p {
	padding: 0px;
	margin: 0px;
	font-size: 14px;
	text-align: center;
}
div#mfp_error p strong {
	font-size: 18px;
	color: #F00;
}
div#mfp_warning {
	background-color: #FEE;
	border: solid 1px #F00;
	padding: 10px;
	display: none;
}
div#mfp_warning p {
	padding: 0px;
	margin: 0px;
	font-size: 14px;
	text-align: center;
}
div#mfp_warning p strong {
	font-size: 18px;
	color: #F00;
}
div#mfp_price {
	color: #C00;
	font-size: 36px;
	padding: 10px;
	font-weight: bolder;
}
div#mfp_price span {
	color: #666;
	font-size: 12px;
	font-weight: normal;
}
button.mfp_next,button.mfp_prev {
	font-size: 18px;
	margin: 10px;
	padding: 5px 10px;
}
button.mfp_next {
	float: right;
}
button.mfp_prev {
	float: left;
}
ul#mfp_phase_stat {
	padding: 10px;
}
ul#mfp_phase_stat li {
	float: left;
	padding: 8px 15px;
	border-radius: 3px;
	margin: 5px;
	list-style: none;
	font-size: 14px;
}
ul#mfp_phase_stat li.mfp_phase_arrow {
	box-shadow: none;
	padding: 8px 5px;
}
ul#mfp_phase_stat li.mfp_active_phase {
	background-color: #E8EEF9;
	box-shadow: 0px 0px 5px #000;
}
ul#mfp_phase_stat li.mfp_inactive_phase {
	background-color: #CCC;
	color: #666;
	box-shadow: 0px 0px 5px #CCC;
}
div#mfp_shopping_cart {
	border: solid 1px #CCC;
	margin: 0px;
	padding: 0px;
	display:none;
}
div#mfp_shopping_cart p {
	margin: 0px;
	text-align: center;
	padding: 20px 10px;
	font-size: 12px;
	background-color: #FEE;
}
table.mfp_shoppingcart {
	border-spacing: 0px;
	border-collapse: collapse;
	width: 100%;
}
table.mfp_shoppingcart thead tr td {
	background-color: #EEE;
	border-bottom: solid 1px #CCC;
	text-align: center;
	font-size: 12px;
	padding: 5px;
}
table.mfp_shoppingcart tbody tr th,table.mfp_shoppingcart tbody tr td {
	font-size: 12px;
	padding: 5px;
	border-bottom: solid 1px #CCC;
}
table.mfp_shoppingcart tbody tr td select {
	display: block;
	margin: 0px auto;
	text-align: center;
}
table.mfp_shoppingcart tbody tr td select option {
	text-align: center;
}
table.mfp_shoppingcart tbody tr th span {
	display: block;
	font-weight: normal;
	font-size: 10px;
	color: #666;
	padding: 3px 0px;
}
table.mfp_shoppingcart tfoot tr td {
	padding: 5px;
	font-size: 16px;
	font-weight: bolder;
	color: #900;
}
td.msc_price {
	font-size: 12px;
	text-align: right;
}
div.mfp_buttons {
	clear: both;
	padding: 10px 0px;
	text-align: center;
}
div.mfp_buttons button#mfp_button_cancel {
}
.imagebutton {
	margin: 0px;
	padding: 0px;
	border: none;
	outline: none;
	background: none;
}
.mfp_element_all {
	max-width: 90%;
}
.mfp_element_text,
.mfp_element_number,
.mfp_element_select-one,
.mfp_element_email,
.mfp_element_tel,
.mfp_element_textarea,
.mfp_element_date {
	border: solid 1px #CCC;
	border-radius: 3px;
	box-shadow: 0px 0px 5px #CCC inset;
	padding: 3px 8px;
	margin: 2px;
	vertical-align: middle;
}
.mfp_element_checkbox,
.mfp_element_radio {
	vertical-align: middle;
	margin: 0px 2px;
}
.mfp_element_submit,.mfp_element_reset,.mfp_element_button {
	border-radius: 5px;
	padding: 5px 10px;
	border: solid 1px #CCC;
	background: gradient(linear, center top, center bottom, from(#FEFEFE), to(#DEDEDE));
	background: -webkit-gradient(linear, center top, center bottom, from(#FEFEFE), to(#DEDEDE));
	background: -moz-linear-gradient(top, #FEFEFE, #DEDEDE);
	background: -ms-linear-gradient(top, #FEFEFE 0%, #DEDEDE 100%);
/*	text-shadow: 0px 2px 0px #FFF;*/
	font-size: 24px;
	cursor: pointer;
	outline: none;
color:#000;
}
.mfp_element_reset {
	color: #333;
}
.mfp_element_submit:hover,.mfp_element_reset:hover,.mfp_element_button:hover {
	background: gradient(linear, center top, center bottom, from(#F7F7F7), to(#7ECEF4));
	background: -webkit-gradient(linear, center top, center bottom, from(#F7F7F7), to(#7ECEF4));
	background: -moz-linear-gradient(top, #F7F7F7, #7ECEF4);
	background: -ms-linear-gradient(top, #F7F7F7 0%, #7ECEF4 100%);
	box-shadow: 0px 2px 15px #7ECEF4;
}
input#mfp_reserve_item,input#mfp_reserve_date {
	display: none;
}
div#mfp_reserve_wrapper {
	position: relative;
	overflow: hidden;
	border: solid 1px #CCC;
}
div#mfp_reserve_inner {
	position: relative;
	padding: 0px 0px 0px 100px;
	overflow: auto;
}
div#mfp_reserve_wrapper table {
	border-spacing: 0px;
	border-collapse: collapse;
}
div#mfp_reserve_wrapper table.mfp_reserve_table_label {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100px;
	background-color: #FEE;
	z-index: 100;
}
div#mfp_reserve_wrapper table.mfp_reserve_table_value {
	padding: 0px 0px 0px 0px;
}
div#mfp_reserve_wrapper table.mfp_reserve_table_value tr td.mfp_reserve_active,
div#mfp_reserve_wrapper table.mfp_reserve_table_value tr td.mfp_reserve_warning {
	cursor: pointer;
}
div#mfp_reserve_wrapper table.mfp_reserve_table_value tr td.mfp_reserve_active:hover,
div#mfp_reserve_wrapper table.mfp_reserve_table_value tr td.mfp_reserve_warning:hover {
	background-color: #E8EEF9;
}
div#mfp_reserve_wrapper table.mfp_reserve_table_value tr td.mfp_reserve_current {
	background-color: #0068B7;
	color: #FFF;
}
td.mfp_reserve_disabled {
	background-color: #CCC;
}
td.mfp_reserve_warning {
	background-color: #FFC;
}
div#mfp_reserve_wrapper table tr td,div#mfp_reserve_wrapper table tr th {
	border: solid 1px #CCC;
	padding: 0px 5px;
	font-size: 12px;
	text-align: center;
	font-family: Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	font-weight: normal;
	height: 20px;
	text-align: left;
}
td.mfp_reserve_week_0 {
	color: #F00;
	background-color: #FEE;
}
td.mfp_reserve_week_6 {
	color: #00F;
	background-color: #EEF;
}
div.mfp_ok {
	border-radius: 5px;
	background-color: #090;
	border: solid 1px #090;
	display: inline-block;
	line-height: 1.5em;
	padding: 0px 5px;
	margin: 0px 2px;
	color: #FFF;
	font-size: 10px;
	background-image: url(images/header.png);
	background-size: 100% 100%;
	display: none;
}
div.prefcodeWrapper {
	position: relative;
}
div.prefcodeResult {
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 5px;
	border: solid 1px #CCC;
	background-color: #FFF;
	box-shadow: 0px 0px 5px #CCC;
	display: none;
}
div.prefcodeResult div {
	cursor: pointer;
}
div.prefcodeResult div:hover {
	background-color: #C9EBFB;
}
div.prefcodeResult div.prefcodeNext {
	background-color: #EEE;
	text-align: center;
}
div.prefLoading {
	padding: 60px 100px;
	background: url(images/mfp_zip_loading.gif) no-repeat center center;
}
.hidefield {
	height: 0px;
	overflow: hidden;
}
.showfield {
	height: auto;
	overflow: visible;
}
div.mfp_buttons {
	clear: both;
	padding: 10px 0px;
	text-align: center;
}
div.mfp_buttons button#mfp_button_send {
	
}
div.mfp_buttons button#mfp_button_cancel {
	
}
div.mfp_buttons button {
	font-size: 24px;
}

@media (max-width : 680px){


.must {
    display: initial;
	float: none;
}
.must:after {
	content: "\A" ;
	white-space: pre ;
}


}
@media (max-width : 460px){

form#mailformpro td.left {
	width: 120px;
	text-align: left !important;

}
}

.thanks-card {
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 40px 20px;
  max-width: 840px;
  margin: 40px auto;
  font-family: "Hiragino Sans", "Meiryo", sans-serif;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
}

.thanks-head {
  margin-bottom: 30px;
}

.thanks-ico {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.thanks-title {
  font-size: 26px;
  font-weight: bold;
  color: #21345c; /* サロンサイトに合わせた濃紺系カラー */
  margin: 0;
}

.thanks-lead {
  font-size: 16px;
  line-height: 1.8;
  margin: 20px 0;
  color: #333;
}

.thanks-info {
  margin: 30px auto;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
  text-align: center;
}

.thanks-info p {
  margin: 0;
  white-space: pre-line; /* 改行を反映 */
}

.mfp_buttons {
  margin-top: 30px;
}

.mfp_buttons .btn {
  display: inline-block;
  padding: 12px 40px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: #21345c; /* メインカラー */
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s;
}

.mfp_buttons .btn:hover {
  background: #2f4e85; /* ホバー時少し明るく */
}

.mfp_buttons .btn:active {
  background: #555; /* タップ時にグレー系に */
}

/* ============================================
  LOOP-image
============================================ */
.secloop {
  background-color: #1b70b0 !important;
  margin-top: -28px;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  overflow: hidden; /* はみ出しを隠す */
}

.loop_wrap {
            display: flex;
            width: 200%; /* 2つの画像を並べるため */
          animation: slide 30s linear infinite;

}

        .loop_wrap img {
            width: 100%; /* 各画像が全体の100%を占める */
            height: 100%;
            object-fit: contain;
            flex-shrink: 0;
            background: white;
            display: block; /* 画像間の隙間を完全に除去 */
}

        @keyframes slide {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%); /* 一つの画像分だけ移動 */
}
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
            .loop_wrap {
                animation-duration: 20s;
            }
        }

        @media (max-width: 480px) {
            .loop_wrap {
                animation-duration: 15s;
				margin-top: 30px;
				margin-bottom: 30px;
		
		
            }
    .loop_wrap img {
        transform: scale(2);
        transform-origin: center center;
    }
}