body {
  font-family: 'Lato', 'M PLUS 1p', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif; /* 見出しも同様か、欧文部分を強調 */
}
p, li, /* その他の本文要素 */ {
  font-family: 'Open Sans', 'Noto Sans JP', sans-serif; /* 本文の欧文はOpen Sans */
}

a {
  text-decoration: none;
}

 a:link {
  text-decoration: none;
	text-decoration-line: none;
}

label {
	width:100%;
}
input {
	width:100%;
}
textarea {
	width:100%;
}
.wpcf7-form {
	width:100%;
}
.readtextshadow {
	font-size:1.2em;
	font-weight:bold;
    color: #FFF;
  text-shadow:  2px  2px 3px #333 ,
               -2px  2px 3px #333 ,
                2px -2px 3px #333 ,
               -2px -2px 3px #333;
}
.readtextshadow h3 {
	font-size:2.5em;
	font-weight:bold;
    color: #FFF;
  text-shadow:  2px  2px 3px #333 ,
               -2px  2px 3px #333 ,
                2px -2px 3px #333 ,
               -2px -2px 3px #333;
}
.topimg {
width:100%;
aspect-ratio: 16 / 9;
}

@media screen and (max-width: 767px) {
 .palla br {
    display: none;
  }
}

@media screen and (max-width: 767px) {
 .palla p {
    text-align: left;
  }
}


.b1 { color:#333 ; background-color:#87cefa ; }




.bg-light {

      }


.vspace video {
vertical-align: bottom;
}

.navbar{height: 4em; z-index: 9999; font-size: 1.2em; height:70px;}
.barbg{
background: rgb(0,143,255);
background: linear-gradient(180deg, rgba(0,143,255,1) 0%, rgba(147,250,252,1) 40%, rgba(147,250,252,1) 52%, rgba(0,143,255,1) 100%);
}
.field {
	aspect-ratio: 1 / 1; border-radius: 50; background-color:#ED912C; width: 90% ; font-weight:bold; display: flex;
        flex-direction: column;
        justify-content: center;
	filter: drop-shadow(0 0.5em 0.5em rgba(0, 0, 0, .7));
}

.field p {
color:#000; font-size:1.5em; font-weight:bold; padding-top:0.5em;

	  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}

.navbar-nav{ background-color:; }
@media (max-width: 991px) {
      .navst {
        background-color: #e0ffff;
        text-align: center;
      }
    }

    /* 992px以上の場合の .navst クラスのスタイル */


.toptitle{ width: 90%; }
@media screen (min-width:1px) and ( max-width:724px) {
.toptitle{ width: 95%; }
	}
.asp{ overflow: hidden; }
.asp{ aspect-ratio: 2 / 1; }
@media screen and (min-width:379px) and ( max-width:724px) {
.asp{ aspect-ratio: 1 / 1; }
}
@media screen and (min-width:1px) and ( max-width:380px) {
.asp{ aspect-ratio: 2 / 3; }
}
.btn-primary {
    background: #ff00ff;
    color: #FFF; //ボタンのテキストの色
}

.btn-primary:hover, .btn-primary:focus, 
.btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary:active.focus,
.btn-primary.active, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary, 
.open > .dropdown-toggle.btn-primary:hover,
.open > .dropdown-toggle.btn-primary:focus, 
.open > .dropdown-toggle.btn-primary.focus,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus {
    background: #d500ff;
    color: #FFF;
}

.btn-primary.outline {
    border: 3px solid #ff00ff;
    color: #d500ff;
}

.opc{ position:absolute; 
 text-align: center;  top: 50%; color:#000;
    left: 50%;
    transform: translate(-50%, -50%);width: 80%;}
.opc h2{ font-size:2em;
	    text-shadow:
        0 2px 0 #808080,
        0 3px 0 #808080,
        0 4px 5px #000;
}
@media screen and (max-width: 768px) {
.opc h2{ font-size:1.5em;}
}
.opc h3 {
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
}

.opc h3:before,
.opc h3:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
}

.opc h3:before {
  left: 0;	
}

.opc h3:after {
  right: 0;
}

.opc p{ font-size:1.2em;
}




.hpc h3 {
  color:#000;
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
}

.hpc h3:before,
.hpc h3:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
}

.hpc h3:before {
  left: 0;	
}

.hpc h3:after {
  right: 0;
}


.vpc{ text-align:center; height:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.vpc h3 {
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
}

.vpc h3:before,
.vpc h3:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #333;
  border-bottom: solid 2px #333;
}

.vpc h3:before {
  left: 0;	
}

.vpc h3:after {
  right: 0;
}



.wpc h3 {
  color:#fff;
  position: relative;
  display: inline-block;
  padding: 0 65px;
  text-align: center;
}

.wpc h3:before,
.wpc h3:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #FFF;
  border-bottom: solid 2px #FFF;
}

.wpc h3:before {
  left: 0;	
}

.wpc h3:after {
  right: 0;
}

.wpc p {
  color: #FFF;
}

.camp {background-color:#66cdaa;}


/* 動画要素のスタイル *//* 背景パターンを持つ親要素 */
.hero-background {
  /* 提供された背景パターン */
  background: linear-gradient(135deg, #858482 25%, transparent 25%) -15px 0/ 30px 30px, linear-gradient(225deg, #b5b5b5 25%, transparent 25%) -15px 0/ 30px 30px, linear-gradient(315deg, #858482 25%, transparent 25%) 0px 0/ 30px 30px, linear-gradient(45deg, #b5b5b5 25%,#dbdbdb 25%) 0px 0/ 30px 30px;
}



/* 動画コンテナ */
.hero-video-container {
  position: relative; /* .hero-content の絶対配置の基準 */
  width: 100%;
  max-width: 1320px; /* 例: 最大幅を設定 */
  margin-left: auto;
  margin-right: auto;
  height: auto; /* ★ 高さはJavaScriptで設定する */
  overflow: visible; /* ★ はみ出しを許可 (ただし、この方法では基本はみ出さない) */
  background-color: transparent; /* 背景は親要素のものを透かす */
}

@media (max-width: 767.98px) { /* スマホのブレークポイント例 */
  .hero-video-container {
    /* height: 60vh; */ /* 例: 高さを調整 */
    /* または padding-top を使ってアスペクト比を固定するテクニックも */
    /* height: 0; padding-top: 100%; */ /* コンテナを正方形にする場合 (1:1 動画向け) */
  }
}

/* 動画要素 */
#hero-video {
  display: block; /* 下にできる可能性のある隙間を削除 */
  width: 100%; /* コンテナの幅いっぱいに */
  height: auto;  /* 高さはアスペクト比に依存 */
  vertical-align: middle; /* 古いブラウザ対策 */
  /* object-fit, min-width, min-height, transform などは不要 */
}

/* 動画上のコンテンツ (前回と同様の配置方法) */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #fff;
  text-align: center;
  padding: 20px;
  width: 90%; /* コンテンツが広がりすぎないように */
  max-width: 800px; /* コンテンツの最大幅も指定すると良い */
  /* text-shadow などで見やすくする */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

.toptitle {
    font-family:Helvetica Inserat, Impact, Charcoal, YuGothic, Arial Black;
}


.topmidasi {
	display: inline;
	font-weight: bold;
	font-size:2em;
	background-image: linear-gradient(rgba(0,0,0,0) 80%, rgb(252,81,133) 80%);
	padding-bottom:0;
}


#heading-1{
  -webkit-text-stroke: 1px black;
   color: white;
   text-shadow:
       3px 3px 0 #333,
     -1px -1px 0 #333,  
      1px -1px 0 #333,
      -1px 1px 0 #333,
       1px 1px 0 #333;
}

.topbox{
width:90%;
padding-top:10%;
padding-bottom:10%;
margin:0 auto;
}


/*
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
*/
.scroll_fadein {
  opacity: 0;
}

/*
  JavaScriptによって画面内に入った要素に付与されるクラスです。
  このクラスが付与されると、キーフレームアニメーションが開始されます。
*/
.fadein_animation_start {
  /* 使用するキーフレームアニメーションの名前を指定 */
  animation-name: fadein_animation;
  /* アニメーションの時間を指定（1秒） */
  animation-duration: 1s;
  /* アニメーション開始までの遅延時間を指定（0.3秒） */
  animation-delay: 0.3s;
  /* アニメーション再生後のスタイルを維持 */
  animation-fill-mode: both;
}

/*
  フェードインアニメーションのキーフレーム定義
*/
@keyframes fadein_animation {
  /* アニメーション開始時（0%）の状態 */
  /*
    transform（移動）の初期値は、後述の .slideup などの
    クラスによって決まります。
  */
  from {
    /*
      opacity: 0; は .scroll_fadein で既に指定されているため
      ここでは省略可能です。
    */
  }

  /* アニメーション終了時（100%）の状態 */
  to {
    opacity: 1;
    transform: translate(0, 0); /* 元の位置に戻る */
  }
}

/*
  ここから下は動きのバリエーションです。
  .scroll_fadein と一緒に、HTML要素にクラスを追加して使います。
  例：<div class="scroll_fadein slideup">コンテンツ</div>
*/

/* 下から上へスライドアップ */
.slideup {
  transform: translateY(50px); /* 初期状態で下に50pxずらす */
}

/* 上から下へスライドダウン */
.slidedown {
  transform: translateY(-50px); /* 初期状態で上に50pxずらす */
}

/* 左から右へスライドイン */
.slideright {
  transform: translateX(-50px); /* 初期状態で左に50pxずらす */
}

/* 右から左へスライドイン */
.slideleft {
  transform: translateX(50px); /* 初期状態で右に50pxずらす */
}



.feature-row {
  /* 各行の間に少し余白が欲しい場合はここに margin-bottom: 1rem; などを追加 */
}
.feature-image-col {
  overflow: hidden;
}
.feature-text-col {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 24em;
}

/* --- Image and Heading --- */
.feature-image-wrapper {
  height: 400px;
  background-position: center center;
  background-size: cover;
}
.feature-image-wrapper--circle-left {
  clip-path: circle(50% at 33% 50%);
}
.feature-image-wrapper--circle-right {
  clip-path: circle(50% at 67% 50%);
}
.feature-heading {
  font-size: 3.5em; 
  position: relative;
  color: white;
  text-shadow: 3px 3px 0 #333, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
}
.feature-heading--left {
  top: 20%;
  left: 10%;
}
.feature-heading--right {
  top: 20%;
  right: 10%;
}

/* --- Other Custom Classes --- */
.toptitle {
    font-family:Helvetica Inserat, Impact, Charcoal, YuGothic, Arial Black;
}
.topbox{
  width:90%;
  padding-top:10%;
  padding-bottom:10%;
  margin:0 auto;
}

/* --- Animations --- */
.scroll_fadein { opacity: 0; }
.fadein_animation_start { animation-name: fadein_animation; animation-duration: 1s; animation-delay: 0.3s; animation-fill-mode: both; }
@keyframes fadein_animation { from {} to { opacity: 1; transform: translate(0, 0); } }
.slideup { transform: translateY(50px); }
.slidedown { transform: translateY(-50px); }
.slideright { transform: translateX(-50px); }
.slideleft { transform: translateX(50px); }

/* --- Responsive Adjustments --- */
@media (max-width: 767.98px) {
  .feature-heading { font-size: 2.5em; }
  .feature-image-wrapper { height: 300px; }
  .feature-text-col { min-height: 18em; }
}




.hot h4 {
  position: relative;
  padding: 0.5rem 1rem calc(0.5rem + 5px);
  background: #fff100;
}

.hot h4:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 3px solid #000;
}


.fadeUp {
animation-name: fadeUpAnime;/*アニメーションの定義名*/
animation-duration:1s;/*アニメーション変化時間 ※デフォルト*/
animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
opacity:0;
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

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




.change-time25{
animation-duration: 2.5s;
}


/* 動きをループさせるCSS*/

.count2{
animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{
 animation-iteration-count: infinite;/*無限ループ*/
}


/* アニメーションの開始を遅らせるCSS*/

.delay-time05{
animation-delay: 0.5s;
}

.delay-time1{
animation-delay: 1s;
}

.delay-time15{
animation-delay: 1.5s;
}

.delay-time2{
animation-delay: 2s;
}

.delay-time25{
  animation-delay: 2.5s;
}




.flex{
  display:flex;
  flex-wrap: wrap;
}

.box{
  box-sizing:border-box;
}



.fadeInLeft.visible {
    animation: fadeInLeft 0.7s ease 0s 1 normal;
}
/* fadeInLeft */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
  }
}

.stn {background-image: url(https://infogrip.net/xn/wp-content/themes/castam/assets/img/stone.webp);}
.zig {background-image: url(https://infogrip.net/xn/wp-content/themes/castam/assets/img/zig.webp);}
.gal {background-image: url(https://infogrip.net/xn/wp-content/themes/castam/assets/img/blue.webp);}

.carousel-item img{
    width:50%;
  }



.slide-content p {
text-align: justify;
text-justify:inter-character;
}
.slide-content h4 {
text-align: justify;
text-justify:inter-character;
}

.slide-title{
margin-top:0.5em;
}

.navbar>.container, .navbar>.container-fluid, .navbar>.container-sm, .navbar>.container-md, .navbar>.container-lg, .navbar>.container-xl, .navbar>.container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

.ZigZag_3D {
 background: linear-gradient(135deg, #858482 25%, transparent 25%) -15px 0/ 30px 30px, linear-gradient(225deg, #b5b5b5 25%, transparent 25%) -15px 0/ 30px 30px, linear-gradient(315deg, #858482 25%, transparent 25%) 0px 0/ 30px 30px, linear-gradient(45deg, #b5b5b5 25%,#dbdbdb 25%) 0px 0/ 30px 30px;}
.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0.5rem;
    --bs-navbar-color: rgba(0, 0, 0, 0.55);
    --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
    --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
    --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
    --bs-navbar-brand-padding-y: 0.3125rem;
    --bs-navbar-brand-margin-end: 1rem;
    --bs-navbar-brand-font-size: 1.25rem;
    --bs-navbar-brand-color: rgba(0, 0, 0, 0.9);
    --bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9);
    --bs-navbar-nav-link-padding-x: 0.5rem;
    --bs-navbar-toggler-padding-y: 0.25rem;
    --bs-navbar-toggler-padding-x: 0.75rem;
    --bs-navbar-toggler-font-size: 1.25rem;
    --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
    --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
    --bs-navbar-toggler-border-radius: 0.375rem;
    --bs-navbar-toggler-focus-width: 0.25rem;
    --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
.navbar a {color:#000;} 
.dropdown-menu { background-color:#87ceeb; text-align:center;}

.ft_text { background-color: #87cefa; color:#000; }

.ft_text h4 { 
	; color:#000;}

.read h2 {
font-size:1.5em;
background-color: #d0f9ff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
  -moz-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
  -ms-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
  filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
}
.honbun h3 {padding: 1rem 2rem;
  border-left: 5px solid #000;
  background: #f4f4f4;
}

#mainslid .swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height:100%;
}

#mainslid .swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: auto;
}
#mainslid .swiper-slide img {
  width: 100%;
}


#mainslid .mySwiper2 {
  height: auto;
  width: 100%;
}

#mainslid .mySwiper {
  height: auto;
  box-sizing: border-box;
  padding: 10px 0;
}

#mainslid .mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
  line-height: 80px;
}

#mainslid .mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}
.lum-lightbox{
  z-index: 9999999;
}
@media screen and (max-width: 460px) {
  .lum-lightbox-inner img {
    max-width: 90% !important;  /* 軽くスワイプで左端から右端まで動かせる量 */

  }
}

a.zoom{
  position: relative;
  display: block;
}
a.zoom::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-color: rgba(0,0,0,0.5);
  background-image: url("虫めがねアイコンファイルのURL");
  background-size: 1em 1em;
  background-position: center center;
  background-repeat: no-repeat;
}



.youtube_thum { width:100%;}

.youtube_thum img { width:100%;}

.modal-content {background-color:unset;}

.youtube {
  width: 100%;
	  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
.vcover {position: relative;}.vbt {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); opacity: 0.8;} .vcover img {width:100%;}
		  
.vbt {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); opacity: 0.8;} 
.vcover img {width:100%;}

/*========= レイアウトのためのCSS ===============*/
 
.video-wrap {width: 100%; background-color:#c0c0c0 ;
			  position: relative;
}
@media screen and (max-width: 768px) {
 .video-wrap {
        padding: 0;
    }
}
.vspace {
    margin: 0 auto;
    max-width: 100%; /* 画面幅を超えないようにmax-widthを追加 */
}

@media screen and (max-width: 768px) {
    .vspace {
        width: 100%;
		        padding: 0;
    }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
    .vspace {
        width: 90%;
    }
}

@media screen and (min-width: 993px) and (max-width: 1120px) {
    .vspace {
        width: 80%;
    }
}

@media screen and (min-width: 1121px) {
    .vspace {
        width: 960px; /* 1121px以上の場合、横幅を960pxに固定 */
        margin: 0 auto; /* 横方向中央寄せ */
    }
}


.varia {width: 100%;
		  position: absolute;
	aspect-ratio: 2400 / 2257;
  overflow: hidden;
	
}


@media screen and (max-width: 768px) {
 .varia {
        padding: 0;
    }
}
.varia {
    margin: 0 auto;
    max-width: 100%; /* 画面幅を超えないようにmax-widthを追加 */
	aspect-ratio: 2400 / 2257;
}

@media screen and (max-width: 768px) {
    .varia {
        width: 100%;
		        padding: 0;
		aspect-ratio: 2400 / 2257;
    }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
    .varia {
        width: 90%;
		aspect-ratio: 2400 / 2257;
    }
}

@media screen and (min-width: 993px) and (max-width: 1120px) {
    .varia {
        width: 80%;
		aspect-ratio: 2400 / 2257;
    }
}

@media screen and (min-width: 1121px) {
    .varia {
        width: 960px; /* 1121px以上の場合、横幅を960pxに固定 */
		aspect-ratio: 2400 / 2257;
        margin: 0 auto; /* 横方向中央寄せ */
    }
}

.slide-content p {
text-align: justify;
text-justify:inter-character;
}
.slide-content h4 {
text-align: justify;
text-justify:inter-character;
}

.slide-title{
margin-top:0.5em;
}


h1{
  font-size:2rem;
  text-align: center;
  padding: 20px;
}

h2{
  font-size:1.2rem;
  text-align: left;
  margin: 0 0 30px 0;
}

p{
  margin-top:20px;  
}

small{
  background:#fff;
  color:#333;
  display: block;
  text-align: center;
  padding:10px;
}


section{
  padding:30px;
}

.scsection {

}


.vtitle_1 {
	float:left;
	background-color: #1e90ff;
	color:#FFF;
	font-weight:bold;
	transform: skew(-15deg);
}

@media screen and (max-width: 425px) {
 .vtitle_1 {
 	font-size :1.5em;
    padding: 0.5rem 0.67rem;
	transform: skew(-15deg);
    margin-top:2em;
	margin-left:-0.67em;
	padding-left:1em;
    }
}

@media screen and (min-width: 425px) and (max-width: 768px) {
 .vtitle_1 {
 	font-size :2em;
    padding: 0.9rem 1.3rem;
	transform: skew(-15deg);
    margin-top:1.2em;
	margin-left:-1em;
	padding-left:2em;
    }
}


@media screen and (min-width: 769px) and (max-width: 992px) {
 .vtitle_1 {
 	font-size :3em;
    padding: 1rem 1.37rem;
	transform: skew(-15deg);
    margin-top:1.36em;
	margin-left:-1.37em;
	padding-left:2.06em;
    }
}

@media screen and (min-width: 993px) and (max-width: 1120px) {
 .vtitle_1 {
 	font-size :3.5em;
    padding:1.3rem 1.77rem;
	transform: skew(-15deg);
	margin-top:1.5em;
	margin-left:-1.77em;
	padding-left:2.658em;
    }
}
@media screen and (min-width: 1121px) {
.vtitle_1 {
 	font-size :3.8em;
    padding:1.5rem 2rem;
	transform: skew(-15deg);
	margin-top:1.8em;
	margin-left:-2em;
	padding-left:3em;
    }
}




.vtitle_c {
text-align:center;
	color: #fff;
	font-weight:bold;
	-webkit-text-stroke: 1px black;
   color: white;
  text-shadow:  3px  3px 4px #333 ,
               -3px  3px 4px #333 ,
                3px -3px 4px #333 ,
               -3px -3px 4px #333;
}

@media screen and (max-width: 425px) {
 .vtitle_c {
	    margin-top:0.5em;
 	font-size :1.8em;
    }
}


@media screen and (min-width: 425px) and (max-width: 768px) {
.vtitle_c {
	    margin-top:0.8em;
 	font-size :2.4em;
    }
}


@media screen and (min-width: 769px) and (max-width: 992px) {
.vtitle_c {
	    margin-top:1em;
 	font-size :4em;
    }
}

@media screen and (min-width: 993px) and (max-width: 1120px) {
.vtitle_c {
 	font-size :4.5em;
    margin-top:1.72em;
    }
}

@media screen and (min-width: 1121px) {
.vtitle_c {
	margin-top:1.8em;
 	font-size :5em;
    }
}



.vtitle_r {
	float:right;
	background-color: #1e90ff;
	color:#FFF;
	font-weight:bold;
	transform: skew(-15deg);
}

@media screen and (max-width: 425px) {
.vtitle_r {
 	font-size :1.5em;
    padding: 0.5rem 0.67rem;
	transform: skew(-15deg);
    margin-top:1.5em;
	margin-right:-0.67em;
	padding-right:1em;
    }
}

@media screen and (min-width: 425px) and (max-width: 768px) {
.vtitle_r {
	font-size :2em;
    padding: 0.9rem 1.3rem;
	transform: skew(-15deg);
    margin-top:1.2em;
	margin-right:-1em;
	padding-right:2em;
    }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
.vtitle_r {
 	font-size :3em;
    padding: 1rem 1.37rem;
	transform: skew(-15deg);
    margin-top:1.36em;
	margin-right:-1.37em;
	padding-right:2.06em;
    }
}



@media screen and (min-width: 993px) and (max-width: 1120px) {
.vtitle_r {
 	font-size :3.5em;
    padding:1.3rem 1.77rem;
	transform: skew(-15deg);
	margin-top:3em;
	margin-right:-1.77em;
	padding-right:2.658em;
    }
}

@media screen and (min-width:1121px) {
.vtitle_r {
 	font-size :3.8em;
    padding:1.5rem 2rem;
	transform: skew(-15deg);
	margin-top:2.3em;
	margin-right:-2em;
	padding-right:3em;
    }
}


.visible, .invisible {
  opacity: 0;
  transition: opacity .5s ease .5s;
}
.visible {
  opacity: 1;
}

.visible.translateX,.invisible.translateX {
    transform: translateX(-100%);
    transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateX {
    transform: translateX(0);
}
.btn-text  {color:white; font-weight:bold;}
.btn-text a {color:white; font-weight:bold;}
.btn-text a:visited{ color : #333333;}
.markyellow {background: linear-gradient(transparent 30%, yellow 0%);}

.hrdiv {height:1em; width:100%; margin-top:1em; margin-bottom:1em;}
.hrcss {
	border: none;
	padding-bottom:3px;
	background-color:skyblue;
	width:70%;
margin: 0 auto;
}
.dli-caret-down {
  display: inline-block;
  vertical-align: middle;
  color: #4169e1;
  line-height: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0.64952em 0.375em;
  border-top-color: currentColor;
  border-bottom: 0;
}

.arrow-bottom {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 10px;
  border-bottom: 4px solid #4169e1;
  border-right: 4px solid #4169e1;
  transform: rotate(45deg);
}


.clear {
  clear:both
}

.contentimg img {
	height:auto;
}
@media (min-width: 1025px) { 
.contentimg img {width:60%;}
}
@media (min-width: 0px) and (max-width: 1024px) {
.contentimg img {width:100%;}
}

.tablewidth {
	margin:0 auto;
}
@media (min-width: 1025px) { 
.tablewidth {width:60%;}
}
@media (min-width: 0px) and (max-width: 1024px) {
.tablewidth {width:100%;}
}


.tooltip {
  position: relative;
  display: inline-block;
}



.tooltiptext {
  visibility: hidden;
  width: 170px;
  background-color: #0099ff;
  color: white;
  font-size: 1em;
  font-weight: bold;
  text-align: left;
  border-radius: 6px;
  padding-left: 15px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  position: absolute;
  z-index: 99999;
  bottom: 60%;
  left: 20%;
  margin-left: -20px;
}


 .tooltiptext p {padding: 15px;}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.centerimg {
　margin:0 auto;
}

.row-eq-height {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; 
}
.row-hq-height-t {
}
.custom-thumbnail {
    width: 100%;
    height: auto;
    align-items: stretch; 
}




/* フォーム全体のスタイル */
.wpcf7 {
background-color: #f0f0f0; /* ライトグレー */
padding: 20px;
border-radius: 10px;
max-width: 600px;
margin: auto;
}
/* ラベルのスタイル */
.wpcf7-form label {
display: block;
margin-bottom: 10px;
font-size: 16px;
color: #333333; /* ダークグレー */
}
/* 必須フィールドのラベルスタイル */
.wpcf7-form .required {
background-color: #ff0000; /* レッド */
color: white;
padding: 2px 5px;
border-radius: 3px;
margin-left: 10px;
font-size: 12px;
}
/* インプットフィールドのスタイル */
.wpcf7-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #cccccc; /* ライトグレー */
border-radius: 5px;
margin-bottom: 20px;
font-size: 16px;
background-color: #ffffff; /* 白 */
}
/* テキストエリアのスタイル */
.wpcf7-form textarea {
height: 150px;
resize: vertical;
}
/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
background-color: #007BFF; /* ブルー */
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
border: none;
}
.wpcf7-form input[type="submit"]:hover {
background-color: #0056b3; /* 濃いブルー */
}
/* エラーメッセージと成功メッセージのスタイル */
.wpcf7-form .wpcf7-not-valid-tip {
color: red;
font-size: 14px;
}
.wpcf7-form .wpcf7-mail-sent-ok {
color: green;
font-size: 16px;
margin-bottom: 20px;
}
#animation_container {

}

#pagetop {
    /* レイアウト */
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 見た目 */
    width: 60px;
    aspect-ratio: 1/1;
    background-color: green;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    transition: .3s;

    /* デフォルトは非表示 */
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}


#pagetop {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    aspect-ratio: 1/1;
    background-color: green;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    transition: .3s;

    /* デフォルトは非表示 */
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}

#pagetop.visible {
    opacity: 1;
    visibility: visible;
}


/* デスクトップ (デフォルトのスタイル) */
.parallax-section {
  background-image: url('https://grip.xsrv.jp/rx/wp-content/uploads/design/key1.webp'); /* デスクトップ用画像 */
  background-attachment: fixed; /* ★パララックス有効 */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 600px; /* 例: セクションの高さ */
  position: relative; /* 疑似要素を絶対配置するための基準点 */
  z-index: 0;
  /* padding など他のスタイルが必要なら追加 */
}

/* オーバーレイ用の疑似要素 (独立させる) */
.parallax-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3); /* 例: 30%黒オーバーレイ */
  z-index: 1; /* 背景より手前、コンテンツより後ろ */
}

/* 前景コンテンツラッパー */
.parallax-content-wrapper {
  position: relative; /* z-index を ★パララックス有効 */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 600px; /* 例: セクションの高さ */
  position: relative; /* オーバーレイを使う場合は必要 */
  z-index: 0;
  /* 他のスタイル (paddingなど) */
}

/* オーバーレイが必要な場合 */
/* ★★★ 修正箇所 ★★★ */
.parallax-section::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, 0.3); /* 例: 30%黒オーバーレイ */
  z-index: 1;
}

/* 前景コンテンツラッパー (オーバーレイを使う場合) */
.parallax-content-wrapper {
  position: relative;
  z-index: 2;
  /* color: #fff; */
}


/* --- タブレット向けスタイル --- */
/* 例: 画面幅が 991.98px 以下の場合に適用 (Bootstrapのlgブレークポイント未満) */
@media (max-width: 991.98px) {
  .parallax-section {
    background-image: url('https://grip.xsrv.jp/rx/wp-content/uploads/design/key2.webp'); /* タブレット用画像 */
    background-attachment: scroll; /* ★パララックス無効 (通常のスクロール背景) */
    /* background-position や background-size は cover のままで良いことが多い */
    /* 必要に応じて min-height などを調整 */
  }
  /* ★★★ タブレット以下でオーバーレイを消す場合（またはスマホで消す場合）★★★
     メディアクエリ内に ::before のスタイルも記述する必要がある場合があります
     例：タブレット以下でオーバーレイ不要なら */
  /*
  .parallax-section::before {
     display: none; // または background-color: transparent;
  }
  */
}


/* --- スマートフォン向けスタイル --- */
/* 例: 画面幅が 767.98px 以下の場合に適用 (Bootstrapのmdブレークポイント未満) */
@media (max-width: 767.98px) {
  .parallax-section {
    background-image: url('https://grip.xsrv.jp/rx/wp-content/uploads/design/key3.webp'); /* スマートフォン用画像 */
    /* background-attachment: scroll; はタブレットの設定が継承されるので再指定不要な場合が多い */
    /* スマホ用に背景の位置を調整したい場合 */
    /* background-position: center top; */
    /* 必要に応じて min-height などを調整 */
    /* min-height: 450px; */
  }

  /* スマホではオーバーレイを薄くする、または無くす場合 (任意) */
  /* ★★★ スマホでオーバーレイを調整する場合もセレクタは .parallax-section::before ★★★ */
  /*
  .parallax-section::before {
    background-color: rgba(0, 0, 0, 0.1);
  }
  */
}

.filter-instruction {
  display: inline-block; /* 幅を内容に合わせる */
  padding: 0.5rem 1.5rem; /* 内側の余白 */
  border-radius: 30px;   /* 角を丸くする */
  font-weight: 600;      /* 少し太字に */
  margin-bottom: 2rem !important; /* ボタン群との間隔を少し広げる (必要なら調整) */

  /* --- 見た目の選択肢 (以下のいずれか、または組み合わせる) --- */

  /* 選択肢 A: 明るい背景色と濃い文字色 */
background-color: rgba(255, 255, 255, 0.9);
color: #333;
border: 1px solid #ddd;

  /* 選択肢 B: テーマカラー (例: プライマリ色) の背景と白文字 */
  /* background-color: var(--bs-primary); /* Bootstrapのプライマリ色を使用 */ */
  /* color: #fff; */
  /* text-shadow: 1px 1px 2px rgba(0,0,0,0.3); */ /* 軽い影 */

  /* 選択肢 C: 枠線のみで強調 */
   border: 2px solid #fff; /* 白い枠線 */
   color: #fff; /* 文字色は白のまま */
   background-color: rgba(0, 0, 0, 0.2); /* 背景を少し暗くして枠線を目立たせる */

  /* 選択肢 D: 文字色と太さで強調 (シンプル) */
  /* color: #ffc107; /* 例えば Warning の黄色 */ */
  /* font-weight: 700; */ /* より太字に */
  /* padding: 0; border: none; background: none; */ /* 背景や枠線はなし */
}

.toptitle {
    font-family:Helvetica Inserat, Impact, Charcoal, YuGothic, Arial Black;
}


.topmidasi {
	display: inline;
	font-weight: bold;
	font-size:2em;
	background-image: linear-gradient(rgba(0,0,0,0) 80%, rgb(252,81,133) 80%);
	padding-bottom:0;
}


#heading-1{

/*  -webkit-text-stroke: 1px black;*/
   color: white;
/*     text-shadow:
       3px 3px 0 #333,
     -1px -1px 0 #333,  
      1px -1px 0 #333,
      -1px 1px 0 #333,
       1px 1px 0 #333;*/
}

.topbox{
width:90%;
padding-top:10%;
padding-bottom:10%;
margin:0 auto;
}


/*
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
*/
.scroll_fadein {
  opacity: 0;
}

/*
  JavaScriptによって画面内に入った要素に付与されるクラスです。
  このクラスが付与されると、キーフレームアニメーションが開始されます。
*/
.fadein_animation_start {
  /* 使用するキーフレームアニメーションの名前を指定 */
  animation-name: fadein_animation;
  /* アニメーションの時間を指定（1秒） */
  animation-duration: 1s;
  /* アニメーション開始までの遅延時間を指定（0.3秒） */
  animation-delay: 0.3s;
  /* アニメーション再生後のスタイルを維持 */
  animation-fill-mode: both;
}

/*
  フェードインアニメーションのキーフレーム定義
*/
@keyframes fadein_animation {
  /* アニメーション開始時（0%）の状態 */
  /*
    transform（移動）の初期値は、後述の .slideup などの
    クラスによって決まります。
  */
  from {
    /*
      opacity: 0; は .scroll_fadein で既に指定されているため
      ここでは省略可能です。
    */
  }

  /* アニメーション終了時（100%）の状態 */
  to {
    opacity: 1;
    transform: translate(0, 0); /* 元の位置に戻る */
  }
}

/*
  ここから下は動きのバリエーションです。
  .scroll_fadein と一緒に、HTML要素にクラスを追加して使います。
  例：<div class="scroll_fadein slideup">コンテンツ</div>
*/

/* 下から上へスライドアップ */
.slideup {
  transform: translateY(50px); /* 初期状態で下に50pxずらす */
}

/* 上から下へスライドダウン */
.slidedown {
  transform: translateY(-50px); /* 初期状態で上に50pxずらす */
}

/* 左から右へスライドイン */
.slideright {
  transform: translateX(-50px); /* 初期状態で左に50pxずらす */
}

/* 右から左へスライドイン */
.slideleft {
  transform: translateX(50px); /* 初期状態で右に50pxずらす */
}



.feature-row {
  /* 各行の間に少し余白が欲しい場合はここに margin-bottom: 1rem; などを追加 */
}
.feature-image-col {
  overflow: hidden;
}
.feature-text-col {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 24em;
}
.toptitle {
    font-family:Helvetica Inserat, Impact, Charcoal, YuGothic, Arial Black;
}
/* --- Image and Heading --- */
.feature-image-wrapper {
  height: 400px;
  background-position: center center;
  background-size: cover;
}
.feature-image-wrapper--circle-left {
  clip-path: circle(50% at 33% 50%);
}
.feature-image-wrapper--circle-right {
  clip-path: circle(50% at 67% 50%);
}
.feature-heading {
  font-size: 3.5em; 
  position: relative;
  color: white;
text-shadow: 3px 3px 0 #333, -2px -2px 0 #333, 2px -2px 0 #333, -2px 2px 0 #333, 2px 2px 0 #333;
}
.feature-heading--left {
  top: 20%;
  left: 10%;
}
.feature-heading--right {
  top: 20%;
  right: 10%;
}

/* --- Other Custom Classes --- */
.topbox{
  width:90%;
  padding-top:10%;
  padding-bottom:10%;
  margin:0 auto;
}

/* --- Animations --- */
.scroll_fadein { opacity: 0; }
.fadein_animation_start { animation-name: fadein_animation; animation-duration: 1s; animation-delay: 0.3s; animation-fill-mode: both; }
@keyframes fadein_animation { from {} to { opacity: 1; transform: translate(0, 0); } }
.slideup { transform: translateY(50px); }
.slidedown { transform: translateY(-50px); }
.slideright { transform: translateX(-50px); }
.slideleft { transform: translateX(50px); }

/* --- Responsive Adjustments --- */
@media (max-width: 767.98px) {
  .feature-heading { font-size: 2.5em; }
  .feature-image-wrapper { height: 300px; }
  .feature-text-col { min-height: 18em; }
}

.title_big {
  border-bottom: 6px double #FFF;
}

.swiper {
  position: relative;
}

/* --- Swiperデフォルト矢印を完全に無効化 --- */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: none !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  font-family: none !important;
  font-size: 0 !important;
  color: transparent !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
}

/* --- ボタンの共通設定 --- */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  color: transparent !important;
  cursor: pointer;
  z-index: 10;
}

/* 左右位置 */
.swiper-button-prev { left: 10px; }
.swiper-button-next { right: 10px; }

/* --- カスタムの緑色三角形 --- */
.swiper-button-prev::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 30px solid #008000;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.swiper-button-next::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid #008000;
  opacity: 0.8;
  transition: opacity 0.2s;
}

/* ホバー時の明るさアップ */
.swiper-button-prev:hover::before,
.swiper-button-next:hover::before {
  opacity: 1;
}

/* 非活性時 */
.swiper-button-disabled {
  opacity: 0.3 !important;
  pointer-events: none;
}

/* スライドを同じ高さに伸ばす */
.mySwiper .swiper-wrapper {
  align-items: stretch; /* ← 重要 */
}

/* スライド自身もflex化して子（article/card）を全高に */
.mySwiper .swiper-slide {
  display: flex;
}

/* カードを縦flexにして全高化 */
.mySwiper .swiper-slide article,
.mySwiper .swiper-slide .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 本文領域が余白をうまく食うように */
.mySwiper .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* タイトル・本文の行数を抑えて高さを安定化（任意） */
.mySwiper .card-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* タイトル2行まで */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mySwiper .card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 本文3行まで */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* サムネイルを一定比率に（16:9は例） */
.mySwiper .card-img-top.custom-thumbnail {
  aspect-ratio: 16 / 9;   /* 画像の比率を固定 */
  width: 100%;
  height: auto;           /* ブラウザによっては無視されるが保険 */
  object-fit: cover;      /* 切り抜きで見た目を揃える */
  display: block;
}


.vcover {
    position: relative; /* アイコンを重ねるための基準 */
    overflow: hidden;
}

.vcover img {
    transition: transform 0.3s ease;
}

/* ホバー時に画像を少し拡大するエフェクト */
.vcover:hover img {
    transform: scale(1.03);
}

.vbt {
    /* アイコンを中央に配置するための設定 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* アイコン自体のスタイル */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.85; /* 通常時は少しだけ透明に */
}

/* ホバー時にアイコンを少し大きく、くっきりさせるエフェクト */
.vcover:hover .vbt {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
}

/* アイコンにドロップシャドウを付けて視認性を高める */
.vbt svg {
   filter: drop-shadow(0px 2px 5px rgba(0,0,0,0.5));
}



/* 親 */
a.video-thumbnail{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
}

/* 画像（余計な余白を無くす） */
a.video-thumbnail img{
  display: block;
  width: 100%;
  height: auto;
}

/* オーバーレイ：中央固定・全域フィット */
.video-thumbnail .video-overlay{
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 の省略形 */
  display: grid;            /* 中央配置を確実にする */
  place-items: center;      /* 水平・垂直とも中央 */
  z-index: 2;
  color: #fff;              /* SVGのcurrentColorに反映 */
  background: transparent;  /* 初期は暗幕なし */
  pointer-events: none;     /* クリックはaタグへ通す */
}

/* PCなどhover可能な環境だけ暗幕を出す */
@media (hover:hover){
  a.video-thumbnail:hover .video-overlay{
    background: rgba(0,0,0,.4);
    transition: background-color .25s ease;
  }
}
.video-thumbnail .video-overlay svg{
  display: block;                       /* ベースラインズレ防止 */
  width: clamp(64px, 10vw, 120px);      /* 画面幅に応じて64〜120pxで可変 */
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
}

.onsale {
  color: #ffffff;
  background-color: red;
  padding: 0.2em;
}

.del {
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-color: red;
}

.saleprice {
font-size:1.5em;
}

.snumber {
  color: #ffffff;
  background-color: red;
  padding: 0.2em;
}

.swiper_x .mySwiper .swiper-slide {
    width: auto !important;      /* JavaScriptの計算値を優先させる */
    max-width: none !important;  /* 最大幅の制限も解除 */
}