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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ボタン（矢印付き）--------------------------------- */

/* ボタンのスタイル */
.arrowbtn-5 a {
   --arrow-color: #333; /* 矢印の色 */
   display: inline-block; /* インラインブロック要素にする */
   border: 1px solid #b5b5ae; /* ボタンの枠線の設定（太さ、種類、色） */
   color: var(--arrow-color); /* 文字色を矢印の色と合わせる */
   padding: 10px 50px 10px 20px; /* 内側の余白（上・右・下・左） */
   text-decoration: none; /* 下線を非表示 */
   transition: .3s all; /* 変化をゆっくりにする */
   position: relative; /* 疑似要素の位置基準 */
}

/* 矢印のスタイル */
.arrowbtn-5 a:after {
   content: ''; /* 疑似要素で矢印を描写 */
   border-bottom: 1px solid var(--arrow-color); /* 矢印の下線の設定 */
   border-right: 1px solid var(--arrow-color); /* 矢印の右線の設定 */
   width: 15px; /* 矢印の幅 */
   height: 3px; /* 矢印の高さ */
   transform: skewX(45deg); /* 矢印の角度 */
   position: absolute; /* 親要素からの位置指定 */
   right: 20px; /* ボタンの右からの距離 */
   bottom: 50%; /* ボタンの中央位置に配置 */
   transition: .3s all; /* 変化をスムーズに */
}

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

.arrowbtn-5 a:hover:after {
   border-color: #fff; /* ホバー時に矢印の色を白に変更 */
   right: 15px; /* 矢印の位置を左へ少し移動 */
}

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

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

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