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

/*koburina-gothic-Std-W3*/
@font-face{
font-family: "koburina-gothic-Std-W3";
src: url("../lp-contents/koburina-gothic-Std-W3.otf");

}
/*koburina-gothic-Std-W6*/
@font-face{
font-family: "koburina-gothic-Std-W6";
src: url("../lp-contents/koburina-gothic-Std-W6.otf");
}

/*基本文字色*/
div, span,p {color: #231815;}
img {width: 100%; height: auto;}
body{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; background: #fffdfa;}
p{font-family: "koburina-gothic-Std-W3";}

/*ナビゲーション*/

header nav h1{
	text-align: center;
	color: #FFF;
  margin:0 auto;
}

header nav h1 a {
  display: block;
  width:10%;
  max-width: 100px;
  min-width: 60px;
  height: auto;
  padding:5px; 
  margin-left:auto!important;
  margin-right:auto!important;
}

/* ナビゲーションバーのアニメーション設定 */
.smart-scroll-nav {
  position: fixed; /* 常に画面に固定 */
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030; /* 他の要素より手前に表示 */

  /* デフォルトの状態：上に隠しておく */
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

/* スクロールした時にJSで付与するクラス */
.smart-scroll-nav.is-visible {
	transform: translateY(0); /* 元の位置（画面内）に戻す */
	background:#000;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 浮いている感じの影 */
}

/*メインビジュアル*/

#mvTrigger {
  position: relative;
  width: 100%;
  height: 100vh;       /* フォールバック（古いブラウザ用） */
  height: 100dvh;      /* 現在の推奨：スマホのアドレスバーを考慮した高さ */
  overflow: hidden;    /* はみ出した部分を隠す */
  padding: 0;
  margin: 0;
  cursor: pointer; /* クリックできるカーソルにする */

}
  
#mvTrigger video{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 【重要】縦横比を保ったままエリアを埋める */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中心を基準に配置 */
  z-index: 1;
}

/* --- モーダル設定 --- */
.modal-overlay {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999; /* ナビゲーションより上に */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* JSで active クラスがついたら表示 */
.modal-overlay.active {
  display: flex; /* 上下中央揃えのためにflex使用 */
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.modal-wrapper {
  position: relative;
  width: 90%;       /* スマホ含む基本幅 */
  max-width: 1200px; /* PCでの最大幅制限 */
}

.modal-video {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.close-btn {
  position: absolute;
  top: -45px;
  right: 0;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  line-height: 1;
}


/*swaneldog ロゴ*/

.swneldog_logo{
  width:100%;
  padding:40%;
  margin: 0 auto;
}

/*キャッチコピー*/

.catchCopy{
  text-align: center;
  margin: 0 auto;
}

.catchCopy p{
  font-size: 4vw;
  line-height: 2em;
  letter-spacing: 0.2em;
  font-family: "koburina-gothic-Std-W6";
  padding:20% 0;
}


.subVisual_right{
  background: url("../lp-contents/subvisual_2.webp") no-repeat;
  background-position: right center;
  background-size: 50%;
}

.subVisual_right .container{
  

  padding:10vw 0vw;
  text-align: left;
}

.subVisual_right p{
  font-size: min(3vw, 21px);
  line-height: 1.5em;
  letter-spacing: 0em;
  font-family: "koburina-gothic-Std-W3";
}

.subVisual_right p.bold{
  font-size: min(5vw, 35px);
  line-height: 1.5em;
  letter-spacing: 0em;
  font-family: "koburina-gothic-Std-W6";
}

.subVisual_left{
  background: url("../lp-contents/subvisual_3.webp") no-repeat;
  background-position: left center;
  background-size: 50%;
}

.subVisual_left .container{
  padding:10vw 0;
  text-align: right;
}

.subVisual_left p{
  font-size: min(3vw, 21px);
  line-height: 1.5em;
  letter-spacing: 0em;
  font-family: "koburina-gothic-Std-W3";
}

.subVisual_left p.bold{
  font-size: min(5vw, 35px);
  line-height: 1.5em;
  letter-spacing: 0em;
  font-family: "koburina-gothic-Std-W6";
}


.footprint{
  width:100%;
  padding:5% 30%;
}

.comment p{
  font-size: min(3vw, 18px);
  line-height: 1.2em;
  font-family: "koburina-gothic-Std-W3";
  padding:0;
}
.comment {
  padding:0 0 5vw;
}

.product{
  background: #ccc;
  padding:3vw
}

.product h2{
  font-size: max(3vw, 30px);
  line-height: 1em;
  letter-spacing: 0.2em;
  font-family: "koburina-gothic-Std-W6";
  padding:5% 0;
  text-align: center;
}


.product .notion{
  padding-top: 2%;
  font-size: 0.8em;
}


/* ギャラリーアイテムの枠 */
.gallery-item {
  overflow: hidden;
  border-radius: 4px; /* スマホ用に少し角丸を小さく */
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* サムネイル画像 */
.gallery-img {
  width: 100%;
  height: 100px; /* ★スマホ時の高さ（小さくする） */
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery{
  padding-bottom: 10%;
}


/*スペック表記*/

.spec .accordion-item{
  background: #c0c0c0;
}
.spec .accordion-button{
  background: #c0c0c0;
}

.spec p{
  font-size:  0.8em;
}

.spec dl,
.spec dt,
.spec dd{
  padding:5px;
  margin: 0;
}

.spec dl:after{
   content: "";
   display: block;
   clear: both;
}

.spec dl.small dd{
  font-size: 0.8em;
}

footer{
  background:#000;  
  padding:5% 10px 10px;
}

footer p a.navbar-brand{
  display: block;
  width: 10%;
  min-width: 60px;
  height: auto;
  margin-left: 0;
  
}
  
footer .Copyright{
  text-align: left;
  font-size: 0.7em;
  color: #FFF;
}



/* コンバージョンボタンの配置 */
.fixed-cta-btn {
  position: fixed;
  bottom: 20px; /* 下からの距離 */
  left: 50%;
  transform: translateX(-50%); /* 左右中央寄せ */
  width: 90%; /* スマホでの幅（画面の90%） */
  max-width: 400px; /* PCでの最大幅（これ以上大きくならない） */
  transition: opacity 0.3s;
}

/* ホバー時に少し薄くして「押せる感」を出す */
.fixed-cta-btn:hover {
  opacity: 0.8;
}

/* 画像自体の角丸や影（画像の元デザインにあれば不要） */
.fixed-cta-btn img {
  width: 100%; /* 親要素に合わせて伸縮 */
  height: auto;
}


/* コンバージョンボタンの配置 */
#floating-cta {
  opacity: 0;            /* 最初は透明 */
  visibility: hidden;    /* 透明な時にクリックできないようにする */
  transition: all 0.3s;  /* ふわっと表示させるためのアニメーション設定 */
}

/* 表示用のクラス */
#floating-cta.show {
  opacity: 1;
  visibility: visible;
}




/* --- 【追加】スマホ用の設定（768px以下） --- */
@media screen and (max-width: 768px) {
  
  /*メインビジュアル*/
  #mvTrigger {
      /* 高さを画面の50%にする */
      height: 60vh; 
      height: 60dvh; /* 対応ブラウザ用（より正確な高さ） */
      /* 補足: 最小の高さを確保したい場合（極端に縦が短いスマホ対策） */
      min-height: 300px; 
    }
  
  .subVisual_right{
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
    background-size: 80%;

  }
  
  .subVisual_left{
    background-color:rgba(255,255,255,0.8);
    background-blend-mode:lighten;
    background-size: 80%;

  }
}

.fablic{
  padding-bottom: 5%;
}

.fablic .row div{
  padding-bottom: 2%;
}


/* スマホでの閉じるボタン調整 */
@media screen and (max-width: 768px) {
  .modal-wrapper {
    width: 100%; /* スマホは横幅いっぱい */
  }
  .close-btn {
    right: 15px; /* 少し内側へ */
  }
  
  footer{
    background:#000;  
    padding-bottom: 80px;
  }
}

/*スマホのギャラリー*/
/* PC/タブレット（768px以上）の時は大きくする */
@media (min-width: 768px) {
  .gallery-img {
   height: 250px; /* ★PC時の高さ */
  }
  .gallery-item {
    border-radius: 8px;
  }
}

/* ホバー時のズーム */
.gallery-item:hover .gallery-img {
  transform: scale(1.1);
}

/* モーダルのスタイル（変更なし） */
.modal-content-clean {
  background-color: transparent;
  border: none;
}