@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 拡大(ポップアップ)画像をスマホの幅に合わせるCSS */
@media only screen and (max-width:480px) {
	.lum-lightbox-inner img{
		width:100%;
	}
}

/* エロ画像まとめ */
/* 中央寄せ and divタグ全体の下余白を調整 (ボタンと画像の間隔を調整) */
.egazo-matome1, .egazo-matome2, .gif-gazo-matome {
	text-align: center;
	margin-bottom: 10px;
}

/* 画像の間隔をあける */
.egazo-matome1 img, .egazo-matome2 img {
	margin-bottom: 10px;
}

/* 本文とおすすめ記事ウィジェットの間隔の調整 */
.l-mainContent__inner>.post_content {
	margin-bottom: 5px;
}

/* 本文のh2の間隔調整 */
.post_content h2 {
	margin-top: 5px;
}

/* 投稿記事上部の余白調整 */
#main_content > article > div.p-articleHead.c-postTitle {
		margin-top: 1.5em;
}

#main_content > article > div.is-style-bg_gray > div {
	margin-bottom: 0;
}

#content {
	padding-top: 2em;
}

/* トップページのボタンの余白調整 */
#custom_html-3 > div > div > div {
		margin-bottom: 0;
}

/* ビデオタグのサイズとposter画像の調整 */
#main_content > article > div.post_content > video {
  display: block; /* ビデオをブロックレベル要素として設定 */
  margin: 0 auto 1.5em; /* 上方向に0、下方向に1.5em、左右方向は自動で設定 */
  width: 100%; /* ビデオの幅を親要素の幅に合わせる */
  max-width: 812px; /* ビデオの最大幅を812ピクセルに設定 */
  height: auto; /* ビデオの高さを自動調整 */
  aspect-ratio: 16 / 9; /* ビデオのアスペクト比を16:9に設定 */
  object-fit: contain; /* 画像がビデオ要素の領域を覆うようにする */
}

/* ビデオタグのサイズとposter画像の調整 (スマートフォン用のスタイル) */
@media (max-width: 767px) {
  #main_content > article > div.post_content > video {
    margin-bottom: 1em; /* 下方向のマージンを1emに設定 */
  }
}

/* タグ関連記事のCSS */
.tag-related-posts {
    display: flex;
    flex-wrap: wrap;
}

.tag-related-post {
    margin-bottom: 20px; /* 各記事の下の余白 */
}

.tag-related-post:last-child {
    margin-right: 0; /* 最後の要素の右側の余白を除去 */
}

.tag-related-post img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* 幅をコンテナに合わせて調整 */
    height: fit-content; /* コンテンツに基づいて高さを調整（flex コンテナ内での使用を想定） */
    object-fit: contain; /* 画像を親要素に完全に収める */
    aspect-ratio: 16 / 9; /* アスペクト比を設定 */
}

/* PC向けカラムレイアウト */
.tag-columns-1 .tag-related-post {
    width: 100%;
    margin-right: 0;
}

.tag-columns-2 .tag-related-post {
    width: calc(50% - 1.5%);
    margin-right: 1.5%;
}

.tag-columns-3 .tag-related-post {
    width: calc(33.333% - 1.5%);
    margin-right: 1.5%;
}

.tag-columns-4 .tag-related-post {
    width: calc(25% - 1.5%);
    margin-right: 1.5%;
}

/* スマホ向けのカラムレイアウト */
@media only screen and (max-width: 767px) {
    .tag-mobile-columns-1 .tag-related-post {
        width: 100%;
        margin-right: 0;
    }

    .tag-mobile-columns-2 .tag-related-post {
        width: calc(50% - 1.5%);
        margin-right: 1.5%;
    }

    .tag-mobile-columns-3 .tag-related-post {
        width: calc(33.333% - 1.5%);
        margin-right: 1.5%;
    }

    .tag-mobile-columns-4 .tag-related-post {
        width: calc(25% - 1.5%);
        margin-right: 1.5%;
    }
}

/* カテゴリー関連記事のCSS */
.related-posts {
    display: flex;
    flex-wrap: wrap;
}

.related-post {
    margin-bottom: 20px; /* 各記事の下の余白 */
}

.related-post:last-child {
    margin-right: 0; /* 最後の要素の右側の余白を除去 */
}

.related-post img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* 幅をコンテナに合わせて調整 */
    height: fit-content; /* コンテンツに基づいて高さを調整（flex コンテナ内での使用を想定） */
    object-fit: contain; /* 画像を親要素に完全に収める */
    aspect-ratio: 16 / 9; /* アスペクト比を設定 */
}

/* PC向けカラムレイアウト（PHPでクラスを動的に指定） */
.columns-1 .related-post {
    width: 100%;
    margin-right: 0;
}

.columns-2 .related-post {
    width: calc(50% - 1.5%);
    margin-right: 1.5%;
}

.columns-3 .related-post {
    width: calc(33.333% - 1.5%);
    margin-right: 1.5%;
}

.columns-4 .related-post {
    width: calc(25% - 1.5%);
    margin-right: 1.5%;
}

/* スマホ向けのカラムレイアウト */
@media only screen and (max-width: 767px) {
    .mobile-columns-1 .related-post {
        width: 100%;
        margin-right: 0;
    }

    .mobile-columns-2 .related-post {
        width: calc(50% - 1.5%);
        margin-right: 1.5%;
    }

    .mobile-columns-3 .related-post {
        width: calc(33.333% - 1.5%);
        margin-right: 1.5%;
    }

    .mobile-columns-4 .related-post {
        width: calc(25% - 1.5%);
        margin-right: 1.5%;
    }
}

/* テーブル下線リンク */
.table_character a {
    text-decoration: underline;
}