@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 追従バナー */
.follow-banner {
  position: fixed;
  top: 60%;
  bottom: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 20;
}

.follow-banner a {
  display: flex;
  /* flex-direction: row;  /* 横並びに変更 */
  align-items: center;
  gap: 0.5em;
  writing-mode: vertical-rl; /* horizontal-tb; /* 縦書き → 横書き */

  color: #fff;
  background-color: #AA4D53 /* var(--color_main) */ ; 
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1.5em 1em;
  border-radius: 0px 0 0 0px;
  transition: opacity 0.25s;
}

.follow-banner a:hover {
  opacity: 0.7;
}

.follow-banner .swl-inline-icon::after {
  left: 50%;
  transform: translateX(-50%);
}

/* 追従バナー・スマホは非表示 */
@media screen and (max-width: 599px) {
  .follow-banner {
    display: none;
  }
}

/* フローティングバナー */
#footer-floating {
	visibility: hidden;
}

@media not all and (min-width: 960px) {


	[data-scrolled=true] #footer-floating {
	    opacity: 1; /* 不透明度 0～1で調整 */
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff; /* 背景色（必要に応じて変更） */
		z-index: 1000; /* 他の要素の上に表示 */
    	visibility: visible;
	}

	#footer-floating .swell-block-column:first-child .swell-block-button a {
		background-color: #a62b4c !important; /* 左のカラム（青） */
		color: #fff !important; /* 文字色を白 */
	}

	#footer-floating .swell-block-column:last-child .swell-block-button a {
		background-color: #1e9da9 !important; /* 右のカラム（緑） */
		color: #fff !important; /* 文字色を白 */
	}

	/* アイコンの色も白に統一 */
	#footer-floating .swell-block-button a svg {
		fill: #fff !important;
	}

	#footer-floating .is-style-more_btn{
		padding:0;
	}

	/* 上に戻るボタンの下余白を調整 */
	.p-fixBtnWrap {
		bottom: 4em;
	}
}

/* (他のCSSは前回のものをベースとします) */

.follow-widget a {
  display: flex;
  align-items: center; /* 主軸（縦）方向の中央揃え */
  justify-content: center; /* 交差軸（横）方向の中央揃え (アイコンとテキストが横並びの場合に有効) */
  gap: 0.5em;
  writing-mode: vertical-rl;
  text-orientation: mixed; /* これを追加して文字の向きを調整 */
  color: #fff;
  background-color: var(--color_main, #333);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1em; /* パディングを上下左右均等にしてみる、または調整 */
  /* min-height: 50px; */ /* 物理的な「横幅」の最小値を確保。縦書きなのでheightが横幅に影響 */
                          /* 値は適宜調整してください。 */
  /* min-width: 100px; */ /* 物理的な「縦の長さ」の最小値を確保。縦書きなのでwidthが縦の長さに影響 */
                          /* 値は適宜調整してください。 */

  /* ↓論理プロパティでのサイズ指定（推奨）↓ */
  /* writing-modeに適したプロパティで最小サイズを指定 */
  min-block-size: 50px;  /* 縦書きの「幅」に相当する部分の最小サイズ */
  min-inline-size: 70px; /* 縦書きの「高さ」に相当する部分の最小サイズ */
                         /* 値はコンテンツに合わせて調整してください */

  border-radius: 10px 0 0 10px;
  transition: opacity 0.25s;
  text-decoration: none;
  overflow: hidden; /* はみ出しを一旦隠す。もしこれで内容が消えすぎるなら原因は他 */
}

/* アイコンのスタイル調整 (もしアイコンが見切れる場合) */
.follow-widget .swl-inline-icon { /* クラス名が swl-inline-icon の場合 */
  /* アイコンのサイズやマージンを調整する必要があるかもしれません */
  /* 例: */
  /* max-width: 100%; */
  /* max-height: 2em;  */ /* フォントサイズに合わせた相対的な高さ */
  /* object-fit: contain; */ /* 画像がアイコンの場合 */
}

/* アイコンの疑似要素の調整も確認 */
.follow-widget .swl-inline-icon::after {
  position: static; /* transformとの競合を避けるために一旦staticにしてみる */
  transform: none;  /* transformを一旦解除して影響を確認 */
  /* または、元の left: 50%; transform: translateX(-50%); が縦書きモードで
     期待通りに動作しているか確認。writing-mode の影響を受ける可能性があります。 */
  /* writing-mode: horizontal-tb; */ /* アイコンだけ横書きに戻す場合（レイアウトに大きく影響） */
}