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

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

  /* body要素の基本設定 */
body {
    /* デフォルトのマージンをリセット */
    margin: 0;
    /* 背景色を指定（任意） */
    background-color: #fff;
}

/* 画像コンテナのスタイル */
.image-container {
    /* コンテナの幅を親要素（body）の幅いっぱいに設定 */
    width: 100%;
    /* コンテナの最大幅を600pxに制限
       この値を変更することで、画像の最大幅を調整できます。
       一般的なスマートフォンの画面幅を想定した値です。
    */
    max-width: 840px;
    /* コンテナをページの中央に配置 */
    margin: 0 auto;
}

/* 画像自体のスタイル */
.image-container img {
    /* 画像をブロック要素として扱い、下の余白をなくす */
    display: block;
    /* 画像の幅を親要素（.image-container）の幅いっぱいに設定 */
    width: 100%;
    /* 画像の高さを自動調整し、縦横比を維持 */
    height: auto;
}

img[usemap] {
  max-width: 100%;
  height: auto;
}

  .flex-container {
    display: flex;
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center;    /* 垂直方向の中央寄せ */
    width: 100%;
  }

  .topic_link_button {
    display: flex;
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center;    /* 垂直方向の中央寄せ */
    width: 50%;
    height: 100%;
    margin: 2vw 2vw;
    padding: 0;
  }

  .link {
    display: flex;
    justify-content: center; 
    align-items: center;    /* 垂直方向の中央寄せ */
    width:100%;
  }

  .link a img {
    margin: 2vw;
  }

  h2.sponsor {
    text-align: center;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    padding: 0 2vw;
  }

   .sponsor_link {
    display: flex;
    justify-content: start; 
    align-items: center;    /* 垂直方向の中央寄せ */
    width:100%;
    margin: 0 2vw;
  }

  .sponsor_link a img {
    width: 80%;
  }

/*wpForo添付イメージリンク用*/
.wpforo-attached-file{
  position: relative;
}

.wpforo-attached-file .paperclip{
  position: absolute;
  font-size: 40px !important;
  opacity: 0.6;
  top: -12px;
  left: -13px;
}

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

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

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