/*
Theme Name: Baumkupen
Author: hitorigoya
Description: Baumkupenは使いやすさを重視したシンプルなテーマです。機能や設定を最小限に絞り、ワードプレス初心者の方でも簡単に扱えるようになっています。スマホとパソコンどちらでも使えるレスポンシブにも対応しています。
Tags: blog, custom-colors, custom-logo, custom-menu, right-sidebar, footer-widgets, translation-ready, theme-options
Version: 1.0
Requires at least: 5.4
Tested up to: 7.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baumkupen
*/


*{
    box-sizing: border-box;
}

body{
    margin: 0;
    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* 改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定 */
    overflow-wrap: break-word;
}


/* リンク */
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}


/* カスタムロゴ */
header .custom-logo{
    /* サムネイルをdisplay: block;に設定。デフォルトの inline だと、画像の下に小さな余白ができてしまう */
    /* https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image */
    display: block;
}


/* メイン */
.main-container{
    padding: 16px;
}


/* フッター */
.footer-container{
    padding: 16px;
}


button,
input,
select,
textarea {
    box-sizing: border-box;
    font-family : inherit;
    font-size: inherit;
    background-color: inherit;
    color: inherit;
}


input[type="submit"]:hover{
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6{
    margin: 0;
}


/* 画像のアスペクト比が変わらないようにする */
img{
    max-width: 100%;
    height: auto;
}

/* 埋め込み画像の幅の設定 */
.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    max-width: 100%;
    height: auto;
}

/* user agent stylesheet によって自動的にmarginが付与されてしまう。主要なテーマではmargin: 0; に設定しているので、それに倣う */
figure{
    max-width: 100%;
    margin: 0;
}

/* 埋め込み要素の最大幅の調整 */
iframe{
    max-width: 100%;
}

/* 整形済みテキスト (preformatted text) */
pre{
    white-space: pre-wrap;
}


/* Font Awesome 5 Free を使うために必要な設定 */
.icon::before {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
}


/* 投稿一覧 */
/* 投稿一覧のリスト ulの user agent stylesheet をリセット*/
ul.index-posts-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

/* サムネイルをdisplay: block;に設定。デフォルトの inline だと、画像の下に小さな余白ができてしまう */
/* https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image */
.index-post-thumbnail img,
.index-post-thumbnail svg{
    display: block;
}

/* サムネイルをホバーした時に少し透明にする。視覚効果。 */
.index-post-thumbnail img:hover,
.index-post-thumbnail svg:hover{
    opacity: 0.8;
}

/* 投稿へのリンクをホバーした時の効果 */
.index-post-info a:hover{
    text-decoration: none;
    opacity: 0.8;
}

/* 投稿のタイトルが一続きの長い単語の場合、オーバーフローしてしまう。 */
/* overflow-wrap: break-word;　でも溢れてしまう */
/* word-break: break-all;　で単語の途中でも改行する */
.index-post-heading{
    word-break: break-all;
}

/* 抜粋の p タグの調整 */
.index-post-excerpt p{
    margin: 0;
}

/* 投稿一覧 日付 */
.index-post-date{
    opacity: 0.9;
}

/* 投稿一覧　コメント数　カテゴリ */
.index-post-meta{
    opacity: 0.9;
}


/* 検索フォーム */
.search-form{
    display: flex;
    border: none;
    border-radius: 20px;
    padding: 4px;
}

.search-form input[type="search"]{
    /* user agent stylesheet を上書き、リセット */
    /* appearance CSSプロパティ。OS のテーマに基づいたプラットフォーム固有のスタイルを使用して要素を表示するために使用される。 */
    appearance: none;
    padding: 0;

    flex: auto;
    border: none;
    padding-left: 18px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.94rem;
    
    /* 角が四角いと外にはみ出るので border-radius で修正 */
    border-radius: 20px;

    /* outline フォーカスした時のエフェクト 特に設定しなければブラウザごとのフォーカスエフェクトが表示される*/
    outline: none;
}

/* 検索アイコンをホバーした時のエフェクト 最初は少しだけ透明 ホバー時に透明を解除 */
.search-form .search-submit{
    border: none;
    opacity: 0.7;
    padding: 1px 6px;

    /* 角が四角いと外にはみ出るので border-radius で修正 */
    border-radius: 20px;
}
.search-form .search-submit:hover{
    opacity: 1;
}

/* 検索アイコンをホバーした時 マウスカーソルを「指」にする*/
.search-submit:hover{
    cursor: pointer;
}

/* 404ページ用の検索フォーム */
.search-form-page-not-found{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* 検索結果　タイトル */
.search-results-title{
    word-break: break-all;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}


/* single page */
/* 見出し */
.type-post h1,
.type-page h1{
    word-break: break-all;
    margin-bottom: 8px;
}

/* 投稿日と更新日 */
.single-date{
    display: flex;
    column-gap: 8px;
    margin-bottom: 24px;
}

/* 投稿の本文 */
.article-content{
    margin-bottom: 24px;
}

/* .alignleft, .alignright の後の要素をクリア */
/* 投稿の一番下に画像（右寄せ、左寄せ）がある場合、直後のページ送り項目などがfloatに巻き込まれる */
/* https://www.w3schools.com/Css/css_float_clear.asp */
.article-content::after{
    content: "";
    clear: both;
    display: table;
}


/* 投稿内のページ分割 wp_link_pages */
.page-links{
    display: flex;
    justify-content: center;
    column-gap: 16px;
    margin-top: 1rem;
}


/* ウィジェット */
.widget{
    word-break: break-all;
    margin-bottom: 20px;
}

.widget ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.widget ul li{
    padding-top: 4px;
    padding-bottom: 4px;
}


/* ウィジェット　カレンダーの表示 */
#wp-calendar {
    text-align: center;
    width: 100%;
}


/* フッターウィジェット */
.footer-widget{
    text-align: center;
}

/* フッターウィジェットのリンクカラーを文字色と同じに設定 */
.footer-widget .widget a,
.footer-widget .widget a:visited{
    color: inherit;
}


/* ページ送り index */
.index-posts-navigation{
    margin-top: 20px;
    margin-bottom: 16px;
}
.index-posts-navigation .nav-links{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    column-gap: 48px;
}
.index-posts-navigation .nav-previous{
    text-align: end;
}
.index-posts-navigation .nav-previous::after{
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f054";
    margin-left: 6px;
}
.index-posts-navigation .nav-next{
    text-align: start;
}
.index-posts-navigation .nav-next::before{
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f053";
    margin-right: 6px;
}
/* ページ数 */
.index-posts-pagination .nav-links{
    display: flex;
    justify-content: center;
    column-gap: 16px;
}

/* ページ送り single */
.single-post-navigation{
    word-break: break-all;

    margin-top: 32px;
    margin-bottom: 32px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
}

.single-post-navigation .single-post-nav-next{
    display: flex;
    align-items: center;
}
.single-post-navigation .single-post-nav-next i{
    margin-right: 4px;
}

.single-post-navigation .single-post-nav-previous{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.single-post-navigation .single-post-nav-previous i{
    margin-left: 4px;
}

/* ページ送りのスクリーンリーダーテキストを非表示 */
/* 「投稿ナビゲーション」などの文字が自動的に挿入されてしまうので、それを非表示にする */
.screen-reader-text{
    display: none;
}


/* コメント */
/* コメントの間隔を空ける */
.comments-area > div{
    margin-bottom: 1rem;
}

/* コメント欄　タイトル */
.comments-area-title{
    text-align: center;
    font-size: 1rem;
    margin-bottom: 4px;
}

/* 「コメントを残す」　h3 タイトルの文字サイズの修正 */
.comment-reply-title{
    font-size: 1rem;
}

/* コメント入力欄の修正 */
/* モバイルだとコメント入力欄が右にはみ出し、スクロールできてしまう場合がある */
#comment{
    display: block;
    width: 100%;
}

/* コメントが途中で閉じられた旨を表示する */
.comment-closed{
    text-align: center;
}


/* フッター　コピーライト */
.footer-copyright{
    text-align: center;
}


/* ブロックエディタ　右寄せ、左寄せ用のスタイル */
.alignleft{
    float: left;
    margin-right: 1rem;
}
.alignright{
    float: right;
    margin-left: 1rem;
}
.aligncenter{
	display: block;
	clear: both;
	margin: 0 auto;
}


/***** デスクトップ表示 *****/
@media(min-width:780px){

    /* 中央寄せ */
    .header-container{
        margin: auto;
    }
    .main-container{
        margin: auto;
    }
    .footer-container{
        margin: auto;
    }
}