@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/


/************************* All *************************/


/* 下のコンテンツが隠れないように余白 */
body {
	padding-top: 60px;
}

.main {
    background-color: #000;
}

.date-tags {
    display: none;	/*作成日非表示*/
}



/*------ ページタイトル ------
page-id-192:shop	→	削除
page-id-919:shop-tmp	→	タイトルはshop-tmp
page-id-195:cars
page-id-197:specialcars
page-id-201:about
page-id-203:company
page-id-791:distributor
page-id-205:cotact
------------------------------*/
.entry-title,.page-h1 {
    font-size: clamp(20px, 10vw, 100px);	/* 最小値, 推奨値(可変), 最大値 */
	text-align: left !important;
	overflow: hidden;
}

/* 表示開始 (.is-visibleはjsでaddする。)*/
.page-id-192 .entry-title.is-visible,.page-id-919 .entry-title.is-visible,.page-id-195 .entry-title.is-visible,.page-id-197 .entry-title.is-visible,.page-id-201 .entry-title.is-visible,.page-id-203 .entry-title.is-visible,.page-id-791 .entry-title.is-visible,.page-id-205 .entry-title.is-visible,.page-h1.is-visible {
	display: inline-block;
	opacity: 0;
	transform-origin: center center;

	/* 1.5秒かけて滑らかに中央から左右へくり抜いて見せる(文字自体の形は一切歪ませず、中央から透明なカーテンが左右に開いていくように文字が見えていく) */
	animation: clipCenterExpand 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	
}

/*--- <animation> クリップパス（表示エリアのくり抜き）---*/
@keyframes clipCenterExpand {
  0% {
    opacity: 0;
    
    /* 最初は文字の中央（50%の位置）に縦1本線の隙間だけを作る（左右の表示幅0%） */
    clip-path: inset(0% 50% 0% 50%);
    
    /* じわっと感を出すために少し文字間隔を縮め、ぼかす */
    letter-spacing: -0.05em;
    filter: blur(4px);
  }
  20% {
    opacity: 1; /* 開始後すぐにパッと不透明にする */
  }
  100% {
    opacity: 1;
    
    /* 最後は上下左右すべて0%（くり抜きなし＝100%すべて表示）にする */
    clip-path: inset(0% 0% 0% 0%);
    
    letter-spacing: normal;
    filter: blur(0);
  }
}



/************************* heaer *************************/

/*ヘッダー ロゴ*/
.logo.logo-header.logo-image {
	position: fixed;
	top: 12px;
	z-index: 99999;
	left: 0;
	width: 150px;
}

/* ナビ（メニュー帯）を固定 */
#navi,#navi-in {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #000;
	padding-right: 200px;	/*右端に言語スイッチャーを置く場所を確保*/
    z-index: 9999;
}



/* ========================================
   ヘッダー右端の言語切替
======================================== */

.navi-in {
    position: relative;
}

/* 言語切替全体 */
.ob-language-switcher {
    position: absolute;
    top: 30px;
    right: 0px;
    transform: translateY(-50%);

    display: flex;
    align-items: flex-start;

    width: 180px;
    margin: 0;
    padding: 0;

    font-size: 13px;
    line-height: 1.2;
    z-index: 99999;
}

/* 白いボタンとリスト部分 */
.ob-language-box {
    position: relative;
    width: 145px;
    margin-left: 5px;
}
.ob-language-box::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0ac";
    color: #ffffff;
    position: absolute;
    right: 150px;
    top: 5px;
}

/* 地球アイコン */
/*.ob-language-icon {
    display: block;
    flex: 0 0 auto;

    width: 16px;
    margin-top: 5px;

    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    text-align: center;
}*/

/* 現在の言語 */
.ob-language-current {
    display: flex;
    align-items: center;

    width: 100%;
    height: 25px;
    margin: 0;
    padding: 2px 7px;

    border: 1px solid #999999;
    border-radius: 0;
    background: #f5f5f5;
    color: #111111;

    font: inherit;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

/* 「日本語」部分 */
.ob-language-name {
    flex: 1;
}

/* 右側の三角 */
.ob-language-arrow {
    margin-left: 8px;
    font-size: 9px;
    line-height: 1;
}

/* 下段の英語リンク */
.ob-language-list {
    display: none;

    position: absolute;
    top: 25px;
    left: 0;

    width: 100%;
    margin: 0;
    padding: 0;

    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-left: 1px solid #999999;
    background: #f5f5f5;

    list-style: none;
    box-sizing: border-box;
}

/* 開いた状態 */
.ob-language-switcher.is-open .ob-language-list {
    display: block;
}

.ob-language-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cocoonのリストマークを消す */
.ob-language-list li::before,
.ob-language-list li::after {
    display: none;
    content: none;
}

/* 英語リンク */
.ob-language-list a {
    display: block;

    width: 100%;
    padding: 3px 7px;

    background: #f5f5f5;
    color: #111111;

    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    box-sizing: border-box;
}

/* マウスを重ねた状態 */
.ob-language-list a:hover,
.ob-language-list a:focus {
    background: #dddddd;
    color: #111111;
    text-decoration: none;
}

/* 言語選択リストの文字色を強制的に黒にする */
.ob-language-switcher .ob-language-list,
.ob-language-switcher .ob-language-list li,
.ob-language-switcher .ob-language-list li a,
.ob-language-switcher .ob-language-list li a:link,
.ob-language-switcher .ob-language-list li a:visited {
    color: #111111 !important;
}

/* 通常時 */
.ob-language-switcher .ob-language-list li a {
    display: block !important;
    width: 100% !important;
    padding: 4px 7px !important;
    background-color: #f5f5f5 !important;
    color: #111111 !important;
    font-size: 13px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* マウスを載せたとき */
.ob-language-switcher .ob-language-list li a:hover,
.ob-language-switcher .ob-language-list li a:focus {
    background-color: #dddddd !important;
    color: #111111 !important;
    text-decoration: none !important;
}





/************************* widget content-top（言語スイッチャー）使用せず！！ *************************/

/*
#content-top {
    position: fixed;
    display: flex;
    top: 0;
    z-index: 9999;
    margin: 0 !important;
    width: 100%;
    height:0;
}

#content-top h2{
	color:#ffffff;
	font-size: small;
	position: absolute;
	right: 20px;
}

.wpml-ls.wpml-ls-legacy-dropdown {
    width: 130px;
    position: absolute;
    top: 18px;
    font-size: small;
    right: 20px;
}
*/

/*.wpml-ls.wpml-ls-legacy-dropdown::before {*/
	/*font-family: "Font Awesome 5 Free";*/ /* バージョンや種類に応じて指定 */
	/*font-weight: 900; */               /* FreeのSolidスタイルは必須 */
	/*content: "\f0ac";*/                 /* アイコンのUnicode */
	/*color:#ffffff;*/
	/*position: absolute;*/
    /*right: 135px;*/
/*}*/

/*
.wpml-ls.wpml-ls-legacy-dropdown a{
	padding:5px !important;
	color: #000000 !important;
}
*/


/************************* 投稿 *************************/

.cat-link{
	background-color: transparent;
}


/************************* front page *************************/

/*---------- トップの動画 -----------*/
.ob-front-video-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 420px;
  max-height: none;
  overflow: hidden;
  background: #000;
}

.ob-front-video-media,
.ob-front-video {
  width: 100%;
  height: 100%;
}

.ob-front-video {
  display: block;
  object-fit: cover;
}

.ob-front-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /*padding: 0 6vw;*/
  padding: 0 2vw;
  background: rgba(0, 0, 0, 0.18);
  z-index: 2;
}

.ob-front-video-inner {
  width: 100%;
  max-width: 900px;
  text-align: left;
  color: #fff;
  margin-top: 8vh;
}

.ob-front-video-title {
  margin: 0;
  /*font-size: clamp(42px, 7vw, 110px);*/
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  text-transform: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  position: absolute;
  bottom: 10px;
}

.ob-front-video-title .line1,.ob-front-video-title .line2 {
  display: inline-block;
  white-space: nowrap;
}

.ob-front-video-title span {
  display: block;
  white-space: nowrap;
}

/*--- <animation> ズームイン ---*/
.ob-zoom span {
  opacity: 0;
  transform: scale(0);
  display: block;
  white-space: nowrap;
}

.ob-zoom.is-visible span {
  animation: zoomIn 1s ease-out forwards;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}



/*---------- ページタイトル -----------*/
.front-top-page h1.entry-title{
    display: none;
}
/*---------- 作成日・更新日 -----------*/
.front-top-page .date-tags{
	display: none;
}

/*動画下の低い背景が出るので透明にしてみた*/
#header-container, #header-container .navi, #navi .navi-in>.menu-header .sub-menu {
    /*background-color: #000;*/
    background-color: transparent;
}



/*---------- 画面全体 -----------*/

.front-top-page #content-in {	/*幅を全幅に*/
    width: 100%;
}

.front-top-page .content {
    margin-top: 0px;
}

.front-top-page .content .main {
    margin: 0;
    width: 100%;
    padding: 0;
    background-color:#000;
    border-radius: 0;
}

.front-top-page article{
	margin-bottom: 0px !important;
}


/*---------- 新着情報 -----------*/

/*--- <animation> 左から右に表示される ---*/

/* 初期状態 */
.posts-list-title {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-60px);
}

/* 表示 */
.posts-list-title.is-visible {
  visibility: visible;
  animation: fadeLeftIn 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 左→右 */
@keyframes fadeLeftIn {

  0% {
    opacity: 0;
    transform: translateX(-60px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }

}



.posts-list {
    padding-left: 20%;
    padding-right: 20%;
}
.posts-list li{
	border-top:1px solid #fff;
	padding: 10px;
}
.posts-list li .wp-block-latest-posts__post-title{
    font-size: large;
    font-weight: bold;
}

/* 投稿がない場合（JSで.no-postsを付与している） */
.wp-block-latest-posts.no-posts::after{
    content:"現在、お知らせはありません。";
    display:block;
}



/*---------- インスタ連携部分 -----------*/
div#sb_instagram {
    padding-left: 10%;
    padding-right: 10%;
    background-color:#fff;
    padding-top: 50px;
    padding-bottom: 100px !important;
}

div#sb_instagram .sbi_feedtheme_header_text h3 {
    border: none;
}
div#sb_instagram .sbi_header_img{
	width:50px !important;
	height:50px !important;
}


/*--- <animation> 画像 ---*/

/* 初期状態：写真を見えない状態にする */
#sb_instagram .sbi_item {
  opacity: 0;
  visibility: hidden;
  /* 中央から縮小 */
  transform: scale(0.7);
}

/* 表示開始 */
#sb_instagram .sbi_item.is-visible {
  visibility: visible;
  animation: instaZoom 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ズーム */
@keyframes instaZoom {

  0% {
    opacity: 0;
    transform: scale(0.7);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }

}

#sb_instagram .sbi_photo_wrap {
    aspect-ratio: 1 / 1;	/*正方形でない画像を整える*/
    overflow: hidden;		/*はみだしを整える*/
}




/*---------- wild speed部分 -----------*/

.ws-title{
	font-size: 3.2vw !important;
    font-weight: bold;
    white-space: nowrap;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.ob-link-more a:hover{
	background-color:#fff;
	color:#000;
}

.ws-wrap{
	position: relative;
}
.ws-left-group{
	position: static;
}
.ws-text-wrap{
	position: static;
}
.ws-video{
	position: static;
}


/*-- <animation> 上から下に表示 --*/

/* 初期状態：見えない */
.ws-text-wrap p,.ws-text-wrap div {
  clip-path: inset(0 0 100% 0); /* 下側を100%隠す */
}

/* 表示されたら発火 */
.ws-text-wrap.is-visible p,.ws-text-wrap.is-visible div {
  animation: revealDown 1.4s ease-out forwards;
}

/* 2行目を少し遅らせる */
.ob-reveal-down.is-visible p:nth-child(2) {
  animation-delay: 0.2s;
}

@keyframes revealDown {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}


/*-- <animation> 左から右に表示 --*/

/* 初期状態 */
.ws-image-wrap {
  opacity: 0;
  visibility: hidden;

  transform: translateX(-60px);
}

/* 表示 */
.ws-image-wrap.is-visible {
  visibility: visible;

  animation: fadeLeftIn 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 左→右 */
@keyframes fadeLeftIn {

  0% {
    opacity: 0;
    transform: translateX(-60px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }

}

/************************* PAGE Media *************************/

.video-container {
    max-width: 100%;
}


/************************* PAGE About *************************/

/*---------- 会社説明文 ---------- */

/*--- <animation> 上から下に表示 ---*/
/* 初期状態 */
.about-txt {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-60px);
}
/* 表示 */
.about-txt.is-visible {
  visibility: visible;
  animation: fadeDownIn 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* 左→右 */
@keyframes fadeDownIn {
  0% {
    opacity: 0;
    transform: translateY(-60px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/*---------- 社長写真 ---------- */

#content {
    overflow-x: hidden;
}

.right-edge-image img {
	/*width: calc(50vw - (var(--content-width, 1023px) / 2) + 100%) !important;*/
	/*width: calc(50vw - (var(--content-width, 833px) / 2) + 100%) !important;*/
	width: calc(50vw - (var(--content-width, 749px) / 2) + 100%) !important;
	max-width: none !important;
	height: auto !important;
	object-fit: cover;
}

/* アニメーション初期状態 */
.right-edge-image {
  opacity: 0;
  visibility: hidden;
  transform: translateY(60px);
}

/* 表示時 */
.right-edge-image.is-visible {
  visibility: visible;
  animation: fadeUpImage 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 下→上 */
@keyframes fadeUpImage {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}







/*
------------------------------------------------------------------------------
width: calc(50vw - (var(--content-width, 1023px) / 2) + 100%) !important;の解説
------------------------------------------------------------------------------
■画面全体の幅を 100vw、その半分を 50vw とします。
1.50vw （画面の左端から中央までの距離）まずは画面の「左端からぴったり真ん中（50%）」までの距離を確保します。
2.- (var(--content-width, 1023px) / 2) （コンテンツ幅の半分を引き算）Cocoonのコンテンツ全体の幅（例：1023px）の「半分」を引き算します。
  これにより、「画面の中央から、コンテンツの右端（枠線）までの距離」が正確に割り出せます。
3.+ 100% （自分自身の幅を足し算）ここで言う 100% とは、画像が元々入っている「右側カラムの横幅」のことです。
  本来の表示幅をプラスすることで、コンテンツの枠線を突き破り、画面の右端（ブラウザの境界線）へジャンプする仕組みになります。

■図解イメージ（計算の仕組み）
もし仮に、画面幅（100vw）が 1400px、Cocoonのサイト幅が 1000px だと仮定します。
・50vw ＝ 700px
・コンテンツ幅 / 2 ＝ 500px
・700px - 500px ＝ 200px （＝コンテンツの右端から、画面の本当の右端までの隙間の広さ）

この「200px」というハミ出し必要な数値に、本来の画像幅（+ 100%）を合体させることで、
「本来の幅を維持したまま、右側の余白200px分ぴったりに画像を巨大化させて埋める」という命令になります。


*/


/*---------- VIDEO ---------- */
/*thefastandthefuriousページのワイルドスピードの動画にも.about-videoを利用しているので、修正時注意！*/

/*--- <animation> ズームイン ---*/

/* 初期状態：写真を見えない状態にする */
.about-video ,.about-video-txt {
  opacity: 0;
  visibility: hidden;
  /* 中央から縮小 */
  transform: scale(0.7);
}

/* 表示開始 */
.about-video.is-visible ,.about-video-txt.is-visible {
  visibility: visible;
  /*animation: instaZoom 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;*/
  animation: instaZoom 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ズーム */
@keyframes instaZoom {

  0% {
    opacity: 0;
    transform: scale(0.7);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }

}

/*--- VIDEOの上に再生ボタンを表示 ---*/
.about-video {
  position: relative;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.about-video video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 白い円 */
.about-video::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  /*background: rgba(255,255,255,0.9);*/
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  border: 3px solid #fff;
}

/* ▶マーク */
.about-video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%);
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 16px solid #fff;
  z-index: 11;
  pointer-events: none;
}


/*---------- AWARD ---------- */
.award-year {
  font-family: 'Fraunces', serif;	/*Google Fonts からのWebフォント*/
  font-weight: 500 !important;
  font-size: clamp(20px, 5vw, 100px) !important;
}


/*--- <animation> 写真・年・説明 ズームイン ---*/

/* 初期状態：写真を見えない状態にする */
.award-pic,.award-txt {
  opacity: 0;
  visibility: hidden;
  /* 中央から縮小 */
  transform: scale(0.7);
}

/* 表示開始 */
.award-pic.is-visible, .award-txt.is-visible {
  visibility: visible;
  animation: instaZoom 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ズーム */
@keyframes instaZoom {

  0% {
    opacity: 0;
    transform: scale(0.7);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }

}




.others-col-wrap{
	margin-bottom: 180px !important;
}

.others-title {
	font-family: 'Fraunces', serif;	/*Google Fonts からのWebフォント*/
    border: none !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    padding-left: 0px !important;
    padding-top: 40px !important;
    padding-bottom: 0px !important;
}



/************************* PAGE Company *************************/

/*---------- Table ----------*/
.company-table table td {
    background-color: #000;
    border-left: none;
    border-right: none;
    padding-top: 12px;
    padding-bottom: 12px;
}
.company-table table tr:first-child td {
	border-top: none; /* 一番上の行のセル（th/td）の上線を消す */
}
.company-table table tr:last-child td {
	border-bottom: none; /* 一番下の行のセル（th/td）の下線を消す */
}

/*---------- Access ----------*/
/* 画面いっぱいに広げるためのマジック */
.full-width-map {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	width: 100vw !important;
	max-width: 100vw !important;
	height: 400px !important;
}
/* 内部のマップ自体を枠ぴったりに広げる */
.full-width-map iframe {
  width: 100% !important;
  height: 100% !important;
  border: 2px solid #000 !important;
}


/*---------- Distributor ----------*/
/* 画面いっぱいに広げる */
.full-width-distributor{
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	width: 100vw !important;
	max-width: 100vw !important;
	padding:50px;
}


/* ---- JAPANとWORDLの切り替え部分 ----*/

/* 地図部分のカーバ全体 */
.col-center{
	position: relative;
}

/* 全体の縦3段コンテナ */
.map-container-v3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
}

/* 上段・中段・下段の共通設定 */
.section-top, .section-bottom, .section-middle {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 「JAPAN」「WORLD」の文字スタイル */
.map-title-text {
  color: #fff;
  letter-spacing: 1px;
  margin: 10px 0;
  font-size: clamp(20px, 10vw, 100px);/*J AddEdit*/
  font-weight: 100;
  z-index: 1000;
}
#area-japan .map-title-text{
    position: absolute;
    /*top: 15%;*/
    top: 20%;
}
#area-world .map-title-text{
    position: absolute;
    /*bottom: 15%;*/
    bottom: 5%;
}


/* 地図画像のスタイル */
.map-img {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  object-fit: contain;
  object-position: center center;
}

/* 中段エリア：スイッチ固定 */
.section-middle {
  padding: 20px 0; /* スイッチの上下の余白 */
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10000;
}

/* トグルスイッチの形状設定 */
.switch-button-v3 {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 40px;  
}
.switch-button-v3 input {
  opacity: 0; width: 0; height: 0;
}
.switch-slider-v3 {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ffffff;
  transition: .3s;
  border-radius: 34px;
  z-index: 10000;
}
.switch-slider-v3:before {
  position: absolute; content: "";
  height: 26px; width: 26px;
  left: 6px; bottom: 6px;
  background-color: #000000;
  transition: .3s;
  border-radius: 50%;
}

/* WORLD（ON）の時のスイッチ背景色 */
.map-container-v3.is-world .switch-slider-v3 {
  background-color: #ffffff;
}
/* ONの時にツマミを右側に移動 */
.map-container-v3.is-world .switch-slider-v3:before {
  transform: translateX(26px);
}

/* ==========================================
   トグルスイッチのアニメーション設定（2重構造）
========================================== */

/* -------------------------------------------
   1. 外枠のアニメーション（スクロールで3回転して登場）
------------------------------------------- */
/* 初期状態：スクロールして見えていない時は非表示 */
.switch-rotate-wrapper.js-animate {
  opacity: 0;
}

/* 画面に見えた瞬間（is-visibleが付与された時）：3秒で3回転しながら表示 */
/* cubic-bezier(0.25, 1, 0.5, 1)…3次ベジェ曲線の座標の値を記述。これは「最初は勢いよく回り始めて、後半にかけてスーッと滑らかに減速してピタッと止まる」*/
.switch-rotate-wrapper.js-animate.is-visible {
  /*animation: rollInAndAppearV4 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;*/
  animation: rollInAndAppearV4 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes rollInAndAppearV4 {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.3); /* 最初は少し小さく */
  }
  100% {
    opacity: 1;
    /*transform: rotate(1080deg) scale(1);*/ /* 3回転（360度×3＝1080度）して等倍に */
    transform: rotate(720deg) scale(1); /* 2回転（360度×2＝720度）して等倍に */
  }
}

/* -------------------------------------------
   2. 内枠のアニメーション（その場でずっと鼓動する）
------------------------------------------- */
.switch-heartbeat-box {
  display: inline-block;
  /* 
    2秒周期で無限に鼓動。
    【重要】最初の3秒（外枠が回転している間）は鼓動を待機させるため、
    「animation-delay: 3s;」でアニメーションの開始を3秒遅らせます。
  */
  animation: heartbeatV4 2s ease-in-out infinite;
  animation-delay: 3s;
}

@keyframes heartbeatV4 {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(0.88); } /* 1回目の縮小 */
  28% { transform: scale(1); }    /* 戻る */
  42% { transform: scale(0.88); } /* 2回目の縮小（ドックン） */
  70% { transform: scale(1); }    /* 戻ってキープ */
}


/************************* PAGE Contact *************************/

.cfvs-wrapper input[type=text], .cfvs-wrapper input[type=email], .cfvs-wrapper input[type=number], .cfvs-wrapper input[type=tel], textarea {
    border-radius:0;
}

.cfvs-flex {
	display: flex;
    justify-content: space-between;	/*各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる*/
}

.cfvs-container {
    width: 45%;
}
.cfvs-container-block{

}
.cfvs-title {
    margin-bottom: 0px !important;
    font-size: 14px;
}
.cfvs-p {
    font-size: 14px;
    margin-top: -30px;
}
.cfvs-submit{
	width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.cfvs-submit input.wpcf7-form-control.wpcf7-submit.has-spinner{
	font-size:16px;
}

/* ---- 電話番号 国番号選択 ---- */

/*国旗の隣に表示される国番号を非表示に*/
.cfvs-wrapper .flag-container .selected-dial-code {
    display: none !important;
    color: #000;
}
/*国番号を非表示にしたので、国旗の幅を縮小*/
.cfvs-wrapper .flag-container .selected-flag {
    width: 50px !important;
}
/*電話番号入力エリア*/
input.wpcf7-form-control.wpcf7-phonetext.wpcf7-validates-as-required.wpcf7-text.wpcf7-validates-as-phonetext {
    padding-left: 60px;
}
/*選択肢*/
span.country-name {
    color: #000;
}
.intl-tel-input .country-list .country .dial-code {
    color: #000;
}
/*選択肢の最上部に固定でアメリカとイギリスが表示されるので非表示に*/
li.country.preferred,li.divider{
    display: none;
}


/************************* PAGE Privacy Policy・Terms of Service・Recruitment *************************/

/*------ ページタイトル ------
page-id-207:Privacy Policy
page-id-209:Terms of Service
page-id-211:Recruitment
page-id-714:Privacy Policy(英語)
page-id-716:Terms of Service(英語)
page-id-712:Recruitment(英語)
------------------------------*/

/* コンテンツの背景 */
.page-id-207 #content,.page-id-207 main,.page-id-209 #content,.page-id-209 main,.page-id-211 #content,.page-id-211 main,.page-id-714 #content,.page-id-714 main,.page-id-716 #content,.page-id-716 main,.page-id-712 #content,.page-id-712 main{
	background-color: #fff !important;
	margin-top: 0;
    padding-top: 48px;
}
/* ページタイトル */
.page-id-207 .entry-title,.page-id-209 .entry-title,.page-id-211 .entry-title,.page-id-714 .entry-title,.page-id-716 .entry-title,.page-id-712 .entry-title {
    color: #000;
    text-align: center !important;
    margin-bottom: 50px;
}


.pp-h2,.ts-h2 {
    border-top: 1px solid #000;
    font-size: clamp(18px, 5vw, 30px) !important;	/* 最小値, 推奨値(可変), 最大値 */
}


/*------ Recruitment  ------*/

/*--- <animation> 左から右に表示される ---*/
.page-id-211 .entry-title {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100px);
}
/* 表示 */
.page-id-211 .entry-title.is-visible {
  visibility: visible;
  animation: fadeLeftIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* 左→右 */
@keyframes fadeLeftIn {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/*--- <animation> 右から左に表示される ---*/
.recruit-container {
  opacity: 0;
  visibility: hidden;
  transform: translateX(100px);
}
/* 表示 */
.recruit-container.is-visible {
  visibility: visible;
  animation: fadeRightIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* 左→右 */
@keyframes fadeRightIn {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}




/*--- ボタン ---*/
.recruit-btn a:hover {
	background-color:#000 !important;
	color:#fff !important;
}



/************************* PAGE the Fast and the Furious(WideSpeed) *************************/

/*---------- カルーセル ----------*/

/* カルーセルの表示範囲 */
.simple-carousel{
    overflow:hidden;

    /*width:calc(100vw - 40px);*/   /* 左右20pxずつ余白 */
    /*margin-left:calc(50% - 50vw + 20px);*/
    
    width: calc(100vw - 8%);	/* 左右4%ずつ余白 */
    margin-left: calc(50% - 50vw + 4%);
    
}

/* カルーセル画像を横並びにする */
.simple-carousel-track{
    display:flex;
    width:max-content;
}

/* カルーセル画像 */
.simple-carousel-track img{
    width:751px;
    height:423px;
    object-fit:cover;
    flex-shrink:0;
}


/* --------------------------------
   カルーセル上の文字画像全体
-------------------------------- */
.carousel-message {
    position: absolute;
    z-index: 10;

    top: 350px;
    left: 50%;

    width: min(600px, 80vw);

    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

/* 文字画像に共通する指定 */
.carousel-message img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* VeilSide：左から中央へ */
.carousel-message-top {
    /*width: 500px;*/

    opacity: 0;
    animation: message-from-left 1.5s ease-out forwards;
}

/* ×：中央でじわっと表示 */
.carousel-message-cross {
    /*width: 70px;*/
    margin: 30px 0;

    opacity: 0;
    animation: message-fade-in 1.5s ease-out forwards;
    animation-delay: 0.5s;
}

/* WildSpeed：右から中央へ */
.carousel-message-bottom {
    /*width: 500px;*/

    opacity: 0;
    animation: message-from-right 1.5s ease-out forwards;
}

/* 下向き矢印：上下ゆっくり */
.carousel-message-arrow{
    /*width:70px;*/
    margin-top:100px;

    /* 最初から表示 */
    opacity:1;

    /* 上下にゆっくり動く */
    animation: arrow-updown 1.5s ease-in-out infinite;
}



/* 左から中央へ */
@keyframes message-from-left {
    from {
        opacity: 0;
        transform: translateX(-50vw);
    }

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

/* 右から中央へ */
@keyframes message-from-right {
    from {
        opacity: 0;
        transform: translateX(50vw);
    }

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

/* 中央でフェードイン */
@keyframes message-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 上下する */
@keyframes arrow-updown{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(20px);
    }

    100%{
        transform:translateY(0);
    }

}

/*---------- 2nd タイトル ----------*/
.second-title {
	font-size: clamp(20px, 6.5vw, 60px) !important;;	/* 最小値, 推奨値(可変), 最大値 */
	overflow: hidden;
}

.second-title-2{
	font-size: 13px !important;
}

/* 表示開始 */
.second-title.is-visible {
	/*display: inline-block;*/
	opacity: 0;
	transform-origin: center center;

	/* 1.5秒かけて滑らかに中央から左右へくり抜いて見せる(文字自体の形は一切歪ませず、中央から透明なカーテンが左右に開いていくように文字が見えていく) */
	animation: clipCenterExpand 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	
}

/*--- <animation> クリップパス（表示エリアのくり抜き）---*/
@keyframes clipCenterExpand {
  0% {
    opacity: 0;
    
    /* 最初は文字の中央（50%の位置）に縦1本線の隙間だけを作る（左右の表示幅0%） */
    clip-path: inset(0% 50% 0% 50%);
    
    /* じわっと感を出すために少し文字間隔を縮め、ぼかす */
    letter-spacing: -0.05em;
    filter: blur(4px);
  }
  20% {
    opacity: 1; /* 開始後すぐにパッと不透明にする */
  }
  100% {
    opacity: 1;
    
    /* 最後は上下左右すべて0%（くり抜きなし＝100%すべて表示）にする */
    clip-path: inset(0% 0% 0% 0%);
    
    letter-spacing: normal;
    filter: blur(0);
  }
}


/* ワイルドスピードシリーズ（動画） */
/*.about-videoを利用しているので、修正時注意！*/

.thefastandthefurious-video{	/*.about-videoより幅を狭くする*/
	width:70%;
}
.thefastandthefurious-video::before,.thefastandthefurious-video::after {	/*.about-videoでは追加していた画像中央の○と▶のボタンを非表示にする*/
    display: none;
}


/*---------- Cars in the Movies ----------*/


/* ========================================
   車一覧全体
======================================== */

.moviecars-list {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* ========================================
   1項目共通
======================================== */

.moviecars-item {
  position: relative;
  display: grid;
  align-items: center;

  /*
   * 10% + 50% + 40%で100%になるため、
   * column-gapは使用しない
   */
  column-gap: 0;

  width: 100%;
  margin-bottom: clamp(100px, 14vw, 200px);
}

/*
 * タイトル左・画像中央・番号右
 *
 * タイトル：画像：番号
 *   10%   ：50% ：40%
 */
.moviecars-item-left {
  grid-template-columns: 10% 60% 30%;
}

/*
 * 番号左・画像中央・タイトル右
 *
 * 番号：画像：タイトル
 * 40% ：50% ：10%
 */
.moviecars-item-right {
  grid-template-columns: 30% 60% 10%;
}

/* ========================================
   画像
======================================== */

.moviecars-image-wrap {
  grid-column: 2;
  grid-row: 1;

  position: relative;
  width: 100%;
  overflow: hidden;

  /* 初期状態：中央から小さな円で表示 */
  clip-path: circle(0% at 50% 50%);
  -webkit-clip-path: circle(0% at 50% 50%);

  transition:
    clip-path 1.3s cubic-bezier(.22, 1, .36, 1),
    -webkit-clip-path 1.3s cubic-bezier(.22, 1, .36, 1);
}

/* 画像の縦横比は元画像を維持 */
.moviecars-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* 表示領域に入った時 */
.moviecars-item.is-visible .moviecars-image-wrap {
  clip-path: circle(75% at 50% 50%);
  -webkit-clip-path: circle(75% at 50% 50%);
}

/* ========================================
   タイトル
======================================== */

.moviecars-title {
  grid-row: 1;

  margin: 0;
  padding: 0;

  font-size: clamp(40px, 3.2vw, 60px) !important;;
  font-weight: 400 !important;
  line-height: 1;
  /*letter-spacing: 0.08em;*/

  writing-mode: sideways-lr;
  text-orientation: mixed;

  background: transparent !important;
  
  font-family: 'Fraunces', serif;
  
  margin: 0 !important;
  text-align: center;

  opacity: 0;
  transform: translateY(50px);

  transition:
    opacity 0.9s ease 0.25s,
    transform 0.9s cubic-bezier(.22, 1, .36, 1) 0.25s;
}

/* 下から上へ表示 */
.moviecars-item.is-visible .moviecars-title {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   番号
======================================== */

.moviecars-number {
  grid-row: 1;

  margin: 0;
  padding: 0;

  font-size: clamp(22px, 2.2vw, 38px);
  font-weight: 400 !important;
  line-height: 1;
  
  font-family: 'Fraunces', serif;
  font-size:40px !important;
  text-align: center;

  opacity: 0;

  transition: opacity 1.2s ease 0.65s;
}

/* じわっと表示 */
.moviecars-item.is-visible .moviecars-number {
  opacity: 1;
}

/* ========================================
   左右交互配置
======================================== */

/*
 * タイトル左・番号右
 *
 * タイトル領域：10%
 * 画像領域　　：50%
 * 番号領域　　：40%
 */
.moviecars-item-left .moviecars-title {
  grid-column: 1;
  justify-self: end;

  /* 画像との間隔 */
  padding-right: clamp(12px, 2vw, 35px);
}

.moviecars-item-left .moviecars-number {
  grid-column: 3;
  /*justify-self: start;*/

  /* 画像との間隔 */
  /*padding-left: clamp(12px, 2vw, 35px);*/

}

/*
 * 番号左・タイトル右
 *
 * 番号領域　　：40%
 * 画像領域　　：50%
 * タイトル領域：10%
 */
.moviecars-item-right .moviecars-title {
  grid-column: 3;
  justify-self: start;

  /* 画像との間隔 */
  padding-left: clamp(12px, 2vw, 35px);
}

.moviecars-item-right .moviecars-number {
  grid-column: 1;
  /*justify-self: end;*/

  /* 画像との間隔 */
  /*padding-right: clamp(12px, 2vw, 35px);*/
}






/************************* footer *************************/

.footer {
    margin-top: 0px;
    border-top:1px solid #fff;
}

/*デフォルトのフッターロゴは非表示にし、ウィジェットのフッター中のカスタムHTMLで設定*/
.footer-bottom-logo {
    display: none;
}

.footer-center {
    padding-top: 50px;
    padding-bottom: 50px;
}

.footer-widget-logo{
    width: 150px;
    margin-left: auto;
    margin-right: auto;
        margin-bottom:10px;
}
.sns-wrap{
	text-align: center;
	line-height: 1;
}
a.sns-facebook,.sns-insta,.sns-tiktok {
    text-decoration: none;
    margin-left:10px;
    margin-right: 10px;
}

.sns-facebook::after{
  font-family:"Font Awesome 5 Brands";
  content:"\f39e";
  font-size: 16px;
}
.sns-insta::after{
  font-family:"Font Awesome 5 Brands";
  content:"\f16d";
  font-size: 16px;
}  
.sns-tiktok::after{
  font-family:"Font Awesome 5 Brands";
  content:"\e07b";
  font-size: 16px;
}

.sns-wrap::after{
	font-family: "Font Awesome 5 Free";
    content: "\A\A〒300-2656\A茨城県つくば市真瀬1250-3 ヴェイルサイド\A Tel: 029-838-1104\A Fax: 029-838-1106";
    white-space: pre;
    font-size:13px;
}

/*メニュー・クレジット*/
.footer-bottom-content {
    float: unset;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/*メニュー*/
.navi-footer-in a:hover {
	background-color:transparent;
	color:#757575 !important;
}

.navi-footer-in .current_page_item a{	/*現在のページの場合メニューの色変更*/
	color:#757575 !important;
}



/*relativeの設定だが、メニュー・クレジットを全幅にしたいので解除。*/
.footer-bottom {
    position: static;	
}

/*メニュー・クレジットを全幅にしたいので、これをrelativeにする*/
#footer {
    position: relative;
}

.menu-footer{	
    justify-content: center !important;
    border-top: 1px solid;
}

.footer-bottom.fnm-text-width .menu-footer li{
    width: 33.33%;
    border: none;
    padding-top: 10px;
    padding-bottom: 2px;
}

.copyright{
	background-color: #fff;
    color: #000;
    padding-top: 3px;
    padding-bottom: 3px;
    height: 30px;
}


/* フッターをウィンドウ最下部に固定 */
html, body {
	height: 100%; /* HTMLとBODYの高さを100%に設定 */
	margin: 0; /* 不要な余白を排除 */
}

#content {
	min-height: calc(100vh - 450px); /* フッターの高さを差し引いた高さを指定 */
	display: flex;
	flex-direction: column; /* Flexboxで縦並びを設定 */
}

#footer {
	margin-top: auto; /* 自動的に最下部に配置 */
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

@media screen and (max-width: 1255px) {
	/*固定ページが狭くなるとコンテンツ幅が極端に狭くなるので変更*/
    .wrap {
        width: 100%;
    }

    .navi-in .menu-pc {
        display: none;
    }


    
    .logo.logo-header.logo-image {	/*ロゴ小さく*/
	    width: 120px;
	}

	/*モバイル時のヘッダーメニュー 上部へ固定*/
	.slicknav_menu {
	    background-color: #000;
	    position: fixed;
	    top: 0px;
	    left: 0;
	    z-index: 9999;
	    width: 100%;
	}

	/*右端のハンバーガーメニュー部分*/
	
	.slicknav_menu {
        display: block;
    }
	
	.slicknav_btn {
	    background-color: transparent;
	    padding-right:200px;	/*言語スイッチャーを右側に配置するための余白*/
	    z-index: 99999;
	}
	.slicknav_menu .slicknav_menutxt {	/*「MENU」という文字を削除*/
	    display: none;
	}
	.slicknav_menu .slicknav_icon-bar {	/*barの長さ*/
		width: 1.5em;
	}
	
	.slicknav_icon {
	    margin-top: 7px !important;
	}
    
    
    /*TheFastAndTheFuriousページ カルーセル上の文字画像*/
    .carousel-message-top,.carousel-message-bottom{	/*ロゴ系*/
    	max-width: 50% !important;
    }
	.carousel-message-cross,.carousel-message-arrow{	/*記号系*/
		max-width: 10% !important;
	}
    
    
    
    
}



/*1023px以下*/
@media screen and (max-width: 1023px){


  
  
	/*------- wild speed部分 --------*/
	.ws-wrap {
		display: flow-root !important;	/*横並び解除*/
		padding-bottom:70px;
	}
	.ws-title{
		text-align:center;
    	font-size: 5.4vw !important;
	}
	.ws-video{
		margin: 0 !important;
	}
	
	.ws-button-group{
		position:absolute;
		bottom:0;
		left:0;
		right:0;
  		justify-content: center !important;
	}
  
}

/*834px以下*/
@media screen and (max-width: 834px){
  
  	/*フロントページ ヒーロー動画とNewsの間が空くので調整*/
	.front-top-page .content {
		margin-top: -32px;
	}
		
	.footer-widgets {
		display: block;
	}
}
  

/*781px以下*/
@media screen and (max-width: 781px){

	/*------- 固定ページ about --------*/
	
	.right-edge-image {
    	margin-right: auto;
    }
    .right-edge-image img {
        width: 100% !important;
    }
	.reverse-box {
		flex-direction: column-reverse !important;	/*左右を縦並びになった時、上から右左にする*/
	}
	
	
	/*------- 固定ページ Company --------*/
	
	/*--- Distributor ---*/
	/*親のカラムをFlexboxの縦並びにする */
	.wp-block-columns.custom-flex-reverse {
		display: flex !important;
		flex-direction: column !important;
	}
	/* orderの数字が小さい順に上から並びます */
	.col-left {
		order: 2; /* 左カラムを2番目に */
	}
	.col-center {
		order: 1; /* 中央の画像カラムを1番上（最初）に */
	}
	.col-right {
		order: 3; /* 右カラムを3番目に */
	}
	
	/*地図をDistributorの一番上に*/
	.map-img{
        position: relative;
        height: 300px;
        width: auto;
	}
	#area-japan .map-title-text{
	    top: 5%;
	}
	#area-world .map-title-text{
	    bottom: 3%;
	}


	/*------- 固定ページ the Fast and the Furious --------*/
	.simple-carousel-track img {
	    width: auto;
	    height: 280px;
	}

	/* ワイルドスピードシリーズ（動画） */
	.thefastandthefurious-video{
		width:auto;
	}

	/*--- Cars in the Movies ---*/
	.moviecars-item,
	.moviecars-item-left,
	.moviecars-item-right {
	display: flex;
	flex-direction: column;
	align-items: stretch;

	/*
	 * PC用のgrid設定を解除
	 */
	grid-template-columns: none;

	margin-bottom: 90px;
	}

	/* タイトルを画像上へ */
	.moviecars-title {
	order: 1;

	writing-mode: horizontal-tb;
	text-orientation: initial;

	margin: 0 0 10px;
	padding: 0;

	font-size: clamp(20px, 6vw, 28px);
	line-height: 1.3;

	transform: translateY(35px);
	}

	/* 画像 */
	.moviecars-image-wrap {
	order: 2;
	width: 100%;
	}

	/* 番号を非表示に */
	.moviecars-number {
	display: none;
	}

	/* PC用の左右位置指定を解除 */
	.moviecars-item-left .moviecars-title,
	.moviecars-item-right .moviecars-title,
	.moviecars-item-left .moviecars-number,
	.moviecars-item-right .moviecars-number {
	justify-self: auto;
	padding-right: 0;
	padding-left: 0;
	}
}

/*750px以下*/
@media screen and (max-width: 750px){

	/*------- フロントページ ワイルドスピード --------*/
	.ws-wrap{
		display: block !important;
	}
	.ws-title {
	    font-size: 5.6vw !important;
	}

	/*------- 固定ページ about --------*/
	
	/*.right-edge-image {
    	margin-right: auto;
    }*/
	/*.reverse-box {*/
		/*flex-direction: column-reverse !important;*/	/*左右を縦並びになった時、上から右左にする*/
	/*}*/

	/*再生ボタンを非表示に。androidの場合デフォルトで再生ボタンが表示される場合があるので、スマホでは表示とする。*/
	.about-video::before,.about-video::after {
		display:none;
	}

	.award-txt{
		padding-left: 0px !important;
		margin-top: -10px !important;
	}
	.award-year {
	    padding-bottom: 10px !important;
	}

	/*------- 固定ページ Company --------*/
	.full-width-map {
		height: 300px !important; /* スマホは少し低めにする */
	}

	/*------- 固定ページ Recruitment --------*/
	
	.recruit-txt{
		text-align: left;
	}
	
	/*--- ボタンの文言を変更（Contact→Explore） ---*/
	.recruit-btn a{
		font-size:0 !important;	
	}
	.recruit-btn a:before{
		font-size:13px !important;
		content:"Explore";
	}

}


/*600px以下*/
@media screen and (max-width: 600px) {

  /*------- フロントページ トップの動画 --------*/
  .ob-front-video-overlay {
    padding: 5px;
  }
  .ob-front-video-inner {
    max-width: none;
    margin-top: 4vh;
  }
  .ob-front-video-title {
    font-size: 8.8vw;
    line-height: 1.02;
    letter-spacing: -0.01em;
  }
  
}


/*480px以下*/
@media screen and (max-width: 480px){

  	/*------- ハンバーガーメニュー --------*/
    /* 通常時 */
    .slicknav_menu{
        height:70px;
        overflow:hidden;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    /* メニュー展開時 */
    .slicknav_menu:has(.slicknav_btn.slicknav_open){
        height:auto;
        overflow:visible;
        background-color:#000000 !important;

    }

	ul.slicknav_nav {
	    z-index: 99999;
	    background:#000000 !important;
	}

    #header-container,
    #header,
    .header-container,
    .navi,
    .slicknav_menu{
        overflow:visible;
    }
	
	/*右端に配置*/
	.slicknav_btn {
        padding-right: 15px;
        padding-top: 0px;
    }
    
	.ob-language-switcher {
	    top: 50px;
	    right: -10px;
	}


	/*------- プロントページ --------*/
	/*ワイルドスピード*/
	.ws-image-wrap.is-layout-flex {
		gap: 0.5rem;
	}

}


/*240px以下*/
@media screen and (max-width: 240px) {

  /*------- フロントページ トップの動画 --------*/
  .ob-front-video-title {
    line-height: 1.06;
  }
}