@charset "UTF-8";
/*
Theme Name:   THE SONIC Child
Theme URI:    https://the-sonic.jp
Description:  THE SONICカスタマイズ用子テーマ
Author:       SONIC Team
Author URI:   https://the-sonic.jp
Template:     thesonic
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
* ここから下に記述
*/

/************************************
**リンクボタンデザイン
************************************/
/* リンクボタン---------------------------------------------- */

/* ボタンの配置 */
.link-btn {
	display: block; /* ボタンをブロック要素に */
	text-align: center; /* ボタン内のテキストを中央揃え */
}

/* ボタンのスタイル */
.link-btn a {
	display: inline-block; /* インラインブロック要素 */
	border: 1px solid #b5b5ae; /* ボタンの枠線（色はグレー） */
	color: var(--cocoon-text-color); /* 文字色 */
	min-width: fit-content; /* ボタンの最小幅を自動調整 */
	width: auto; /* ボタンの幅を自動調整 */
	padding: .7em 5em; /* 内側余白を上下0.7em, 左右5em */
	text-decoration: none; /* 下線を削除 */
	border-radius: 0; /* 角の丸みを0 */
	transition: .3s all; /* 変化をスムーズに */
	position: relative; /* 起点設定 */
}

/* 834px以下のボタン幅調整 */
@media screen and (max-width: 834px) {
	.link-btn a {
		min-width: 100%; /* モバイルでの最小幅を100%に */
	}
}

/* 矢印のスタイル */
.link-btn a:after {
	content: ''; /* 擬似要素の内容を空に */
	border-bottom: 1px solid var(--cocoon-text-color); /* 下矢印の線 */
	border-right: 1px solid var(--cocoon-text-color); /* 右矢印の線 */
	width: 15px; /* 矢印の幅 */
	height: 3px; /* 矢印の高さ */
	transform: skewX(45deg); /* 45度傾斜 */
	position: absolute; /* 位置を絶対配置に */
	right: 20px; /* 右から20pxに配置 */
	bottom: 50%; /* 下から50%の位置 */
	transition: .3s all; /* 変化をスムーズに */
}

/* ホバー時の変化 */
.link-btn a:hover {
	--link-btn-color: #b5b5ae; /* ホバー時のボタン色 */
	background-color: var(--link-btn-color); /* 背景色を変化 */
	border-color: var(--link-btn-color); /* 枠線色を変化 */
	color: var(--cocoon-white-color); /* 文字色を白に */
}

/* 矢印のホバー効果 */
.link-btn a:hover:after {
	border-color: var(--cocoon-white-color); /* 矢印色を白に */
	right: 15px; /* 矢印の位置を左へ少し移動 */

	
}
/* ************************************ 
 * 追従りんくボタン
 * *************************************/
.fixed_banner {
position: fixed; /* 追従させる為にfixedの値を記述します */
z-index: 99999; /* 他の要素の下に隠れないように全面配置させます */
top: 150px; /* 上から150pxのところにバナーを配置します */
right: 40px; /* 右から40pxのところにバナーを配置します */
}

.fixed_banner_pc {
width: 300px; /* バナーの横幅を指定してあげます */
}

.floating-banner:hover {
opacity: .8; /* マウスが重なった時に少し透過させます */
}

.fixed_banner_sp {
display: none; /* PCではスマホ用のバナーは非表示にします */
}


@media screen and (max-width: 480px) { /* メディアクエリを使ってスマホ用のブレイクポイントを指定 */

.fixed_banner_sp {
display: inline-block; /* 消していたスマホ用のバナーを表示させます */
width: 100vw; /* スマホの画面幅いっぱいにバナーを表示させます */
}

}