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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* 矢印---------------------------------------------- */

.arrowbtn a {
	--arrow-color:#333; /* 矢印の色を設定 */
	position: relative; /* 疑似要素を位置指定するための基準 */
	padding: 0 2.5em .5em .5em; /* 内側の余白（右に矢印部分を空ける） */
	color: var(--arrow-color); /* 文字色を矢印の色と統一 */
	text-decoration: none; /* 下線を非表示 */
}

.arrowbtn a::before {
	border-bottom: 1px solid var(--arrow-color); /* 下線としての矢印部分 */
	border-right: 1px solid var(--arrow-color); /* 右線としての矢印部分 */
	bottom: 0; /* 矢印をボタン下部に配置 */
	content: ''; /* 疑似要素でコンテンツを空に設定 */
	height: 12px; /* 矢印の高さ */
	position: absolute; /* 親要素から相対的に配置 */
	left: 0; /* 矢印の位置を左端に */
	transform: skewX(50deg); /* 矢印の形状を傾けてデザイン */
	width: 100%; /* ボタン全体の幅に矢印を合わせる */
	transition: all .3s; /* なめらかな動き（ホバー時） */
}

/* マウスオーバー時の動き */
.arrowbtn a:hover::before {
	left: 10%; /* ホバー時、矢印が右に10%ずれる */
}
/* ボタン風スタイル */
.link-btn-border a {
  display: inline-block; /* インラインブロック要素にする */
  padding: 3px 20px; /* ボタンの内側の余白（上下・左右） */
  text-decoration: none; /* 下線を非表示 */
  border: 2px solid; /* ボタンに枠線を設定 */
  transition: all 0.3s ease; /* ホバー時の変化をなめらかに */
}

.link-btn-border a:hover {
  color: white; /* ホバー時に文字色を白に変更 */
}
.color-6 a{
--btn-color:#bfbfbf;/*ボタンの色*/
  border-color: var(--btn-color);
  color: var(--btn-color);
}

.color-6 a:hover {
  background-color: var(--btn-color);
}