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

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


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

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

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

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



/**Footer タグクラウド**/
.tagcloud a {
font-size: 14px !important;
line-height: 1em;
background: #935b0b;
color: #fff;
display: inline-block;
white-space: nowrap;
padding: 8px;
margin-top: 3px;
border-radius: 4px;
text-decoration: none;
}
.tagcloud a:hover {
background: #ddd;
color: #c03 !important;
}




/**プロフィール欄（サイドカラム専用）装飾コード**/
.nwa .author-box {
    text-align: center;
    max-width: 100%;
}
#sidebar .author-box {
    border: none;
    border-radius: 4px;
    margin: 1em 0;
    line-height: 1.4;
    position: relative;
    padding: 1.4% 2% 1.8%;
}
#sidebar .author-thumb {
    float: none;
    width: 100%;
    margin: 9px auto 0;
    background: url(https://selecting-pc.com/wp-content/uploads/2023/07/AdobeStock_86241124-scaled.jpeg) center no-repeat;
    background-size: cover;
    height: 0;
    padding-top: calc(100%*392/700);
    position: relative;
}
#sidebar .author-thumb img{
    border: 3px solid #fff;
    width: 30%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25%;
}
#sidebar .author-content {
    margin-top: 16%;
    font-size: 0.9em;
}
.author-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}
.author-box .author-name a {
    text-decoration: none;
    color: #333;
}
.author-box p {
    margin-top: 0.3em;
    line-height: 1.6;
}
.author-box p a {
    text-decoration: none;
    color: #008cee;
}
.author-box p a:hover {
    text-decoration: underline;
    color: #008cee;
}
.author-box .sns-follow-buttons a.follow-button {
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    margin-bottom: 4px;
    margin-right: 8px;
    background: none;
    color: #fff;
}
.author-box a.follow-button span {
    line-height: 40px;
}
.author-box a.follow-button span::before {
    font-size: 22px;
}
.author-box .icon-twitter-logo::before {
    font-family: FontAwesome;
    content: "\f099"
}
.author-box .icon-facebook-logo::before {
    font-family: FontAwesome;
    content: "\f09a";
}
.author-box .icon-instagram-new::before {
    font-family: FontAwesome;
    content: "\f16d";
}
.author-box .icon-hatebu-logo::before {
    font-family: Verdana;
    content: 'B!';
    font-weight: bold;
}
.author-box .icon-google-plus-logo::before {
    font-family: FontAwesome;
    content: "\f0d5";
}
.author-box .icon-youtube-logo::before {
    font-family: FontAwesome;
    content: "\f167";
}
.author-box .icon-pinterest-logo::before {
    font-family: FontAwesome;
    content: "\f231";
}
.author-box .icon-amazon-logo::before {
    font-family: FontAwesome;
    content: "\f270";
}
.author-box .icon-github-logo::before {
    font-family: FontAwesome;
    content: "\f09b";
}
.author-box .website-button { background-color: #47555c !important; }
.author-box .twitter-button { background-color: #1da1f2 !important; }
.author-box .facebook-button { background-color: #3b5998 !important; }
.author-box .hatebu-button { background-color: #2c6ebd !important; }
.author-box .google-plus-button { background-color: #dd4b39 !important; }
.author-box .instagram-button { background: #e1306c !important; }
.author-box .youtube-button { background-color: #ef1515 !important; }
.author-box .flickr-button { background-color: #0063dc !important; }
.author-box .pinterest-button { background-color: #bd081c !important; }
.author-box .line-button { background-color: #00c300 !important; }
.author-box .amazon-button { background-color: #ff9900 !important; }
.author-box .rakuten-room-button { background-color: #c42e7f !important; }
.author-box .github-button { background-color: #333 !important; }
.author-box .feedly-button { background-color: #2bb24c !important; }
.author-box .rss-button { background-color: #f26522 !important; }



/* === 景品表示法対応 === */
/* Cocoon設定本文上のPR表記 */
.pr-label-l {
    border-top: 1px dotted #333; /* 上の点線 */
    border-bottom: 1px dotted #333; /* テキスト下の点線 */
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 13px; /* 文字サイズ */
    color: #333; /* 文字の色 */
    text-align: center; /* テキスト中央揃え */
    background: #fff;
    padding: 3px 0;
    margin-bottom: 2em;
}
/* スライダー */
/* スライド全体の枠線設定 */
.swiper-slide {
  display: flex; /* コンテンツを整列 */
  align-items: center; /* 縦の中央揃え */
  justify-content: center; /* 横の中央揃え */
  height: 100%; /* 高さをスライダー全体に合わせる */
  box-sizing: border-box; /* パディングを枠線内に含める */
}

/* 内部のスライドコンテンツ用ボックス */
.slide-content {
  width: 300px; /* ボックスの幅 */
  padding: 20px; /* 内側の余白 */
  background-color: #fff; /* 背景色 */
  border: 2px solid #333; /* 外枠の色と太さ */
  border-radius: 10px; /* 枠線の角を丸める */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影の効果（任意） */
  text-align: center; /* コンテンツを中央揃え */
}

/* 画像をボックス内に調整 */
.slide-content img {
  max-width: 100%; /* 画像の幅をボックスに収める */
  height: auto; /* 比率を維持 */
  margin-bottom: 10px; /* 下部に余白 */
}

/* ボタンのデザイン */
.type2 .campaign-button a {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #f2c94c; /* ボタン背景色 */
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

.type2 .campaign-button a:hover {
  background-color: #e0b33c; /* ボタンのホバー効果 */
}

/* 説明文のスタイル */
.type2 description {
  font-size: 14px;
  color: #555;
  line-height: 1.5; /* 行間を調整 */
  margin-top: 10px;
}
/* New2 */
.swiper.type1 .swiper-wrapper .swiper-slide {
  width: 300px;
  flex-shrink: 0;
  margin-right: 0px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;align-content
}

.swiper.type1 .swiper-wrapper {
    display: flex; /* スライドを横並びに */
}

.swiper.type1 {
  position: relative;
  padding-bottom: 60px; /* 下部スペース確保 */
}

.custom-scrollbar-wrapper {
  display: flex;
  align-items: center;            /* ← 垂直方向を中央に揃える！ */
  justify-content: center;
  gap: 12px;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  padding: 0 20px;
  height: 32px;                   /* ← 全体の高さをバーに合わせる！ */
}

/* 矢印ボタン */
.swiper-button-prev,
.swiper-button-next {
  font-size: 20px;
  color: #333;
  background: #eee;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  height: 100%;                   /* ← 矢印の高さもバーに揃える！ */
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-scrollbar {
  height: 32px;                 /* ★ 太さの調整 */
  border-radius: 16px;          /* 丸み（高さの半分くらいが自然） */
  background: #ccc;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.2); /* 内側に陰影も追加可 */
}

.swiper-scrollbar-drag {
  height: 32px;                 /* バーと同じ高さに揃える */
  border-radius: 16px;
  background: linear-gradient(to right, #f2c94c, #e0b33c);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);      /* ドラッグ部分の影 */
}
/* ************************** */
.scroll-box-wrapper {
  margin-top: 0px; /* ← 固定ヘッダーの高さと同じだけ下げる */
  display: flex;
  overflow-x: auto;
  gap: 0;
  padding: 12px 0;
  background: #fff;align-content
  z-index: 10;
}

.scroll-box-wrapper::-webkit-scrollbar {
  height: 8px;
}
.scroll-box-wrapper::-webkit-scrollbar-track {
  background: #ccc;
  border-radius: 4px;
}
.scroll-box-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #f2c94c, #e0b33c);
  border-radius: 4px;
}

.scroll-box {
  display: flex;
  flex-direction: row;       /* ← 横並び */
  align-items: flex-start;   /* 上端揃え */
  gap: 16px;                 /* 要素間スペース */
  padding: 16px;
  width: auto;
  min-width: 300px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  box-sizing: border-box;
  flex-wrap: wrap;           /* ← 画面幅に応じて折り返し（任意） */}

.campaign-title {
  flex: 0 1 100%;
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 8px;
}

figure {
  margin: 0;
}

figure img {
  width: 300px;
  height: auto;
  display: block;
  border-radius: 4px;
}

.campaign-button a {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #f2c94c; /* ボタン背景色 */
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

.description {
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 300px;
}