@charset "UTF-8";
/* CSS Document */
/*@media (max-width: 480px) {
.sm-none {
		display:none;
	}
}*/

@media only screen and (max-width:767px){
.btn-md {
padding: 8px 31px 8px;
font-size: 14px;
}
}
/* 共通スタイル */
.ali-color {
	color:#e11d48;
}
.social-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 背景色ごとに指定 */
.social-link.yt { background-color: #FF0000; }   /* YouTube */
.social-link.tw { background-color: #000000; }   /* X（旧Twitter） */
.social-link.ig { background: #e4405f; }
.social-link.fb { background: #1877f2; }
/* ホバー演出（任意） */
.social-link:hover {
  transform: translateY(-3px);
  opacity: 0.85;
}




/* カード枠（色や影は自由に変更） */
.steps-card{
  background-color: rgba(255, 255, 255, 0.1);
  border-radius:16px; 
}

/* カラム間の余白（Bootstrap4/5どちらでも効くように自前で調整） */
.steps .col-md-6{ padding: 12px; }

/* 各ステップのボックス */
.step-box{
  height:100%;
  text-align:center;
  padding:15px;
  border-radius:12px;
  background-color: rgba(255, 255, 255, 0.2);
}

.step-box2{
  height:100%;
  text-align:center;
  padding:15px;
  border-radius:12px;
  background-color: #ffd700;
}

/* 丸い番号バッジ */
.step-num{
  width:56px; height:56px;
  margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background-color: rgba(255, 255, 255, 0.4);
  font-weight:700;
  font-size:20px;
  line-height:1;
}

.colabo-mark01{
  width:56px; height:56px;
  margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background-image: linear-gradient(90deg, rgba(246, 126, 0, 1), rgba(246, 0, 0, 1));
  font-weight:700;
  font-size:20px;
  line-height:1;
	color: #FFF;
}
.colabo-mark02{
  width:56px; height:56px;
  margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background-image: linear-gradient(90deg, rgba(0, 79, 246, 1), rgba(168, 0, 246, 1));
  font-weight:700;
  font-size:20px;
  line-height:1;
	color: #FFF;
}
.colabo-mark03{
  width:56px; height:56px;
  margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background-image: linear-gradient(90deg, rgba(78, 246, 0, 1), rgba(0, 122, 246, 1));
  font-weight:700;
  font-size:20px;
  line-height:1;
	color: #FFF;
}

/* タイトルと説明（サイズや色は自由に上書き） */
.step-title{ margin: 4px 0 6px; font-weight:700; }
.step-desc{ margin:0; font-size:14px; }

/* スマホ時は1列、PCは2列 */
@media (max-width: 767.98px){
  .steps .col-md-6{ padding:8px 0; }
  .step-box{ border-radius:10px; }
}


.spec-box {
  flex: 1 1 calc(50% - 0.5rem); /* 2列に並ぶ */
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 15px!important;
	font-size: 16px;
	line-height: 20px;
}
.fw-100 {font-weight: 100;}
.fw-200 {font-weight: 200;}
.fw-300 {font-weight: 300;}
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}
.fw-700 {font-weight: 700;}
.fw-800 {font-weight: 800;}

.p-10 {padding: 10px;}
.p-15 {padding: 15px;}
.p-20 {padding: 20px;}
.p-25 {padding: 25px;}
.p-30 {padding: 30px;}
.p-35 {padding: 35px;}
.p-40 {padding: 40px;}
.p-45 {padding: 45px;}
.p-50 {padding: 50px;}
/* カード全体 */
.product-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  overflow: hidden;
  color: #222;
  display: flex;
  flex-direction: column;   /* 上: 画像 / 下: 本文 */
  height: 100%;             /* ← 高さを統一 */
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}

/* 画像部 */
.product-media {
  position: relative;
  background: #f3f4f6;
}
.product-media > img {
  width: 100%;
  height: auto;  /* 縦横比維持してフィット */
  display: block;
}

/* 本文（FlexでCTAを最下部に） */
.product-body {
  position: relative;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;   /* 高さを伸縮 */
}

/* CTAボタンを下端に固定 */
.cta {
  margin-top: auto;
}

/* 影響範囲を限定：.cards-eq 行内のみ */
.row.cards-eq > .col-md-3 {
  display: flex;
}
.row.cards-eq > .col-md-3 > .product-card {
  width: 100%;
}

/* 番号バッジ */
.num-badge {
  position: absolute;
  top: -14px;
  left: 10px;
  background: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #222;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  outline: 3px solid #e11d48;
}

/* タイトル */
.product-title {
  font-size: 0.98rem;
  line-height: 1.45;
  margin: 4px 0 8px;
  /*display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;*/
}

/* 価格 */
.price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.price-now {
  color: #ea3358;
  font-size: 1.15rem;
  font-weight: 800;
}
.price-old {
  color: #6b7280;
  text-decoration: line-through;
  font-size: .9rem;
}

/* 引用ボックス（左に縦いっぱいのオレンジバー・角丸なし） */
.quote {
  position: relative;
  background: #f6f3ec;
  padding: 10px 12px 10px 16px; /* 左に余白を確保 */
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  border-radius: 0;
}

/* 左側のオレンジバー（縦いっぱい） */
.quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;          /* ← 上端まで */
  bottom: 0;       /* ← 下端まで */
  width: 4px;
  background-color: #ea3358;
}

/* テキスト */
.quote p {
  margin: 0;
  font-size: .85rem;
  color: #4b5563;
  line-height: 1.5;
}

/* CTAボタン */
.cta {
  display: block;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  background: #ea3358;
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  transition: filter .15s ease, transform .02s ease;
  user-select: none;
}
.cta:hover {
  color: #fff;
  background: #CC0000;
}
.cta:active {
  color: #fff;
  background: #CC0000;
}

/* レスポンシブ */
@media (max-width: 480px) {
  .product-title {
    -webkit-line-clamp: 3;
  }
}


.ali {
	border-radius: 6px;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
.ali-image {
	width: 100%;
}

/* YouTubeレスポンシブ枠（16:9） */
.yt-responsive {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  overflow: hidden;
}

.yt-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* 2カラム間の余白は .row.g-4 で付与済み。追加の余白が欲しければ以下を調整 */
.youtube-grid .col-md-6 { display: block; }


.rev_slider_wrapper .rev-slidebg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;           /* これで確実にcover */
  object-position: center;     /* センター基準 */
}

ul.list-dc {
    list-style-type: disc;
    padding: 1em 1em 1em 1.3em;
}

ul.list-dc li::marker {
    color: #2589d0;
    font-size: 1.1em;
}

ul.list-underline li:first-child {
    border-top:1px solid #666;
    border-bottom:1px solid #666;
    padding: 10px 0;
}
 
ul.list-underline li + li {
    border-bottom:1px solid #666;
    padding: 10px 0;
}
.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.scroll-container table {
  min-width: 600px;
  font-size: 14px;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 600px;
  text-align: center;
}


/* セル共通 */
th, td {
  padding: 12px 16px;
  border: 1px solid #ccc;
}

/* ヘッダー */
thead th {
  background: #f9f9f9;
  font-size: 16px;
  font-weight: bold;
}

/* ラベル列（縦） */
.left-label-t {
  background: #398093;
  color: white;
  text-align: left;
  font-weight: bold;
}

.left-label {
  background: #4a90a4;
  color: white;
  text-align: left;
  font-weight: bold;
}

/* 各列の個別カラー */
.fairy-t {
  background: #ffff00;
  font-weight: bold;
}

.fairy {
  background: #ffffcc;
  font-weight: bold;
}

.company-t {
  background: #EEE;
}

.company {
  background: white;
}

/* 色クラス */
.ff-color {
  color: #00858D;
}

.red {
  color: #C00;
}

.yellow {
  color: #FFFF00;
}

/* スマホ時のフォントサイズ最適化 */
@media (max-width: 768px) {
  table {
    font-size: 14px;
  }
}

@media (min-width: 481px) {
.pc-none {
		display:none;
	}
}

.fb-color {
	color: #1877f2;
}
.x-color {
	color: #000000;
}
.insta-color {
	color: #CF2E92;
}


.ff-title-s {
	color:#C00;
	font-weight:700;
}
.ff-title {
	color:#C00;
	font-weight:700;
}
.table-wrapper-ff {
      overflow-x: auto;
      background: white;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    table {
      border-collapse: collapse;
      width: 100%;
      min-width: 600px;
      text-align: center;
    }

    th, td {
      padding: 12px 16px;
      border: 1px solid #ccc;
    }

    thead th {
      background: #f9f9f9;
      font-size: 16px;
      font-weight: bold;
    }

    .left-label-t {
      background: #333;
      color: white;
      text-align: left;
      font-weight: bold;
    }

.left-label {
      background: #666;
      color: white;
      text-align: left;
      font-weight: bold;
    }

.fairy-t {
      background: #ffff00;
      font-weight: bold;
    }
    .fairy {
      background: #ffffcc;
      font-weight: bold;
    }

    .company-t {
      background: #EEE;
    }
.company {
      background: white;
    }

    @media (max-width: 768px) {
      table {
        font-size: 14px;
      }
    }

.ff-color {
	color:#00858D;
}
.red {
	color:#C00;
}
.yellow {
	color:#FFFF00;
}
.deleat {
	text-decoration: line-through;
}
.button-normal {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin:0 auto;
    padding: 1em 2em;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-normal:hover {
    background-color: #1579c0;
	color: #fff;
}

/*----*/

.button-slider {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 170px;
    margin: 0 auto;
    padding: 0.8em 0.5em;
    overflow: hidden;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-slider::before {
    display: block;
    position: absolute;
    top: -50%;
    left: -30%;
    transform: rotate(30deg);
    width: 70px;
    height: 100px;
    content: '';
    background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    animation: animation-button-slider 2s infinite linear;
}

@keyframes animation-button-slider {
    17% {
        left: 120%;
    }
    100% {
        left: 120%;
    }
}

.button-slider:hover {
    background-color: #1579c0;
	color: #fff;
}

/*----*/

.button-move {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 1em 0 1em 0;
    overflow: hidden;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-move::before {
    display: block;
    position: absolute;
    top: -50%;
    left: -30%;
    transform: rotate(30deg);
    width: 70px;
    height: 100px;
    content: '';
    background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    animation: animation-button-move 2s infinite linear;
}

@keyframes animation-button-move {
    17% {
        left: 120%;
    }
    100% {
        left: 120%;
    }
}

.button-move:hover {
    background-color: #1579c0;
	color: #fff;
}