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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.wrap {
    width: 100%;
}

.page .main {
    background-color: none;
    color: #FFF;
}

.page .content-in {
    background-color: #000;
}

.blog .content,
.category .content,
.single .content,
.date .content,
.search .content,
.privacy-policy .content,
.error404 .content {
    width: 1256px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1023px以下 */
@media screen and (max-width: 1023px) {
    .wrap {
        width: 100%;
        padding: 0 10px; /* 余白を追加 */
    }

    .category .content,
    .single .content,
    .date .content,
    .search .content,
    .privacy-policy .content,
    .error404 .content {
        width: auto;
        margin-left: 10px;
        margin-right: 10px;
    }
}

/* 834px以下 */
@media screen and (max-width: 834px) {
    .category .content,
    .single .content,
    .date .content,
    .search .content,
    .privacy-policy .content,
    .error404 .content {
        width: auto;
        margin-left: 10px;
        margin-right: 10px;
    }

    body {
        font-size: 17px; /* 少し小さめに調整 */
    }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
    .category .content,
    .single .content,
    .date .content,
    .search .content,
    .privacy-policy .content,
    .error404 .content {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    body {
        font-size: 14px; /* モバイル向けに文字サイズを小さく */
    }
}

/* モバイルファーストのスタイル */
body {
    font-size: 16px;
}

/* 画面幅が768px以上の場合（タブレットやPC） */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

/* 画面幅が1024px以上の場合（PC） */
@media (min-width: 1024px) {
    body {
        font-size: 20px;
    }
}

/* 画像のレスポンシブ対応 */
img {
    max-width: 100%;
    height: auto;
}

/* ボタンやフォーム要素のレスポンシブ対応 */
button,
input[type="submit"] {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
}

@media screen and (max-width: 480px) {
    button,
    input[type="submit"] {
        padding: 8px 15px;
        font-size: 14px;
    }
}