/*
Theme Name: Remenbar2025
Theme URI: https://remenbar.com/
Description: モバイルファーストな白黒基調のブログテーマ。DM SansとDela Gothic Oneを使用したモダンでシンプルなデザイン。
Author: Re麺Bar
Version: 1.0.0
Text Domain: remenbar2025
*/

@import url(https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap);

/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display:block
}

body{
    line-height:1
}

ol,ul{
    list-style:none
}

blockquote,q{
    quotes:none
}

blockquote:before,blockquote:after,q:before,q:after{
    content:'';
    content:none
}

table{
    border-collapse:collapse;
    border-spacing:0
}

/* CSS Variables - 白黒基調のカラーパレット */
:root{
    --logocolor:#000;
    --primarycolor:#000;
    --primarycolor-2:#1a1a1a;
    --primarycolor-3:#333;
    --primarycolor-4:#4d4d4d;
    --primarycolor-5:#666;
    --primarycolor-6:gray;
    --primarycolor-7:#999;
    --bgcolor:white;
    --calendar-primarycolor:var(--primarycolor);
    --calendar-bgcolor:var(--bgcolor);
    --drawer-primarycolor:var(--primarycolor);
    --drawer-bgcolor:var(--bgcolor);
    --gatheringcolor:red;
    --todo-title-bgcolor:#add8e6;
    --todo-accentcolor:#05f;
    --todo-bgcolor:#f7f7f7;
    --radius:24px;
    --radius-small:5px
}

/* Base Styles */
*,::after,::before{
    box-sizing:border-box
}

html{
    font-size:16px;
    scroll-behavior:smooth
}

body{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(14px,1.5vw,16px);
    line-height:1.8;
    color:var(--primarycolor);
    background-color:var(--bgcolor);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}

/* Typography */
h1,h2,h3,h4,h5,h6{
    font-weight:700;
    line-height:1.4;
    margin-bottom:1rem
}

h1{
    font-size:clamp(28px,5vw,48px)
}

h2{
    font-size:clamp(24px,4vw,36px)
}

h3{
    font-size:clamp(20px,3vw,28px)
}

h4{
    font-size:clamp(18px,2.5vw,24px)
}

h5{
    font-size:clamp(16px,2vw,20px)
}

h6{
    font-size:clamp(14px,1.8vw,18px)
}

p{
    margin-bottom:1rem
}

a{
    color:var(--primarycolor);
    text-decoration:none;
    transition:opacity .3s ease
}

a:hover{
    opacity:.7
}

img{
    max-width:100%;
    height:auto;
    display:block
}

/* Utility Classes - Display */
.is-block{display:block!important}
.is-inline-block{display:inline-block!important}
.is-flex{display:flex!important}
.is-inline-flex{display:inline-flex!important}
.is-grid{display:grid!important}
.is-hidden{display:none!important}

/* Utility Classes - Position */
.is-relative{position:relative!important}
.is-absolute{position:absolute!important}
.is-fixed{position:fixed!important}
.is-sticky{position:sticky!important}

/* Utility Classes - Background */
.is-bgcolor-primary{background-color:var(--primarycolor)!important}
.is-bgcolor-white{background-color:var(--bgcolor)!important}
.is-bgcolor-gray{background-color:#f7f7f7!important}
.is-bgcolor-black{background-color:#000!important}

/* Utility Classes - Text Color */
.is-color-primary{color:var(--primarycolor)!important}
.is-color-white{color:white!important}
.is-color-gray{color:var(--primarycolor-6)!important}

/* Utility Classes - Border */
.is-border{border:1px solid var(--primarycolor-7)!important}
.is-border-top{border-top:1px solid var(--primarycolor-7)!important}
.is-border-bottom{border-bottom:1px solid var(--primarycolor-7)!important}
.is-border-left{border-left:1px solid var(--primarycolor-7)!important}
.is-border-right{border-right:1px solid var(--primarycolor-7)!important}

/* Utility Classes - Border Radius */
.is-radius{border-radius:var(--radius)!important}
.is-radius-small{border-radius:var(--radius-small)!important}
.is-radius-circle{border-radius:50%!important}

/* Utility Classes - Overflow */
.is-overflow-hidden{overflow:hidden!important}
.is-overflow-scroll{overflow:scroll!important}
.is-overflow-auto{overflow:auto!important}

/* Utility Classes - Aspect Ratio */
.is-aspect-ratio-16-9{aspect-ratio:16/9!important}
.is-aspect-ratio-4-3{aspect-ratio:4/3!important}
.is-aspect-ratio-1-1{aspect-ratio:1/1!important}
.is-aspect-ratio-3-2{aspect-ratio:3/2!important}

/* Utility Classes - Line Height */
.is-line-height-1{line-height:1!important}
.is-line-height-1-2{line-height:1.2!important}
.is-line-height-1-4{line-height:1.4!important}
.is-line-height-1-6{line-height:1.6!important}
.is-line-height-1-8{line-height:1.8!important}
.is-line-height-2{line-height:2!important}

/* Utility Classes - Font Family */
.is-font-dm-sans{font-family:"DM Sans",sans-serif!important}
.is-font-dela-gothic{font-family:"Dela Gothic One",sans-serif!important}

/* Utility Classes - Font Size */
.is-font-size-12{font-size:12px!important}
.is-font-size-14{font-size:14px!important}
.is-font-size-16{font-size:16px!important}
.is-font-size-18{font-size:18px!important}
.is-font-size-20{font-size:20px!important}
.is-font-size-24{font-size:24px!important}
.is-font-size-28{font-size:28px!important}
.is-font-size-32{font-size:32px!important}

/* Utility Classes - Font Weight */
.is-font-weight-300{font-weight:300!important}
.is-font-weight-400{font-weight:400!important}
.is-font-weight-500{font-weight:500!important}
.is-font-weight-600{font-weight:600!important}
.is-font-weight-700{font-weight:700!important}
.is-font-weight-900{font-weight:900!important}

/* Utility Classes - Text Align */
.is-text-align-left{text-align:left!important}
.is-text-align-center{text-align:center!important}
.is-text-align-right{text-align:right!important}

/* Utility Classes - Letter Spacing */
.is-letter-spacing-1{letter-spacing:.1em!important}
.is-letter-spacing-2{letter-spacing:.2em!important}

/* Utility Classes - Width & Height */
.is-width-100{width:100%!important}
.is-height-100{height:100%!important}
.is-width-auto{width:auto!important}
.is-height-auto{height:auto!important;}

/* Utility Classes - Padding */
.is-padding-0{padding:0!important}
.is-padding-8{padding:8px!important}
.is-padding-16{padding:16px!important}
.is-padding-24{padding:24px!important}
.is-padding-32{padding:32px!important}
.is-padding-48{padding:48px!important}

/* Utility Classes - Margin */
.is-margin-0{margin:0!important}
.is-margin-8{margin:8px!important}
.is-margin-16{margin:16px!important}
.is-margin-24{margin:24px!important}
.is-margin-32{margin:32px!important}
.is-margin-auto{margin:auto!important}

/* Utility Classes - Gap */
.is-gap-8{gap:8px!important}
.is-gap-16{gap:16px!important}
.is-gap-24{gap:24px!important}
.is-gap-32{gap:32px!important}

/* Utility Classes - Flex */
.is-flex-direction-column{flex-direction:column!important}
.is-flex-direction-row{flex-direction:row!important}
.is-justify-content-center{justify-content:center!important}
.is-justify-content-space-between{justify-content:space-between!important}
.is-justify-content-flex-start{justify-content:flex-start!important}
.is-justify-content-flex-end{justify-content:flex-end!important}
.is-align-items-center{align-items:center!important}
.is-align-items-flex-start{align-items:flex-start!important}
.is-align-items-flex-end{align-items:flex-end!important}
.is-flex-wrap{flex-wrap:wrap!important}
.is-flex-nowrap{flex-wrap:nowrap!important}

/* Layout Container */
.container{
    width:100%;
    max-width:900px;
    margin:0 auto;
    /* SPのパディングを16pxに調整 */
    padding:0 16px
}

@media(min-width:768px){
    .container{
        /* PCのパディングを24pxに調整 */
        padding:0 24px
    }
}
/* WordPress Block Editor Styles */
.wp-content .wp-block-button__link{
    background-color:var(--primarycolor);
    color:white;
    padding:12px 24px;
    border-radius:var(--radius-small);
    display:inline-block;
    text-decoration:none;
    transition:opacity .3s ease
}

.wp-content .wp-block-button__link:hover{
    opacity:.8
}

.wp-content .wp-block-image{
    margin:2rem 0
}

.wp-content .wp-block-image img{
    border-radius:var(--radius-small)
}

.wp-content .wp-block-quote{
    border-left:4px solid var(--primarycolor);
    padding-left:1.5rem;
    margin:2rem 0;
    font-style:italic
}

.wp-content .wp-block-code{
    background-color:#f7f7f7;
    padding:1.5rem;
    border-radius:var(--radius-small);
    overflow-x:auto;
    font-family:monospace;
    font-size:14px
}

.wp-content pre{
    background-color:#f7f7f7;
    padding:1.5rem;
    border-radius:var(--radius-small);
    overflow-x:auto
}

.site-branding img{
    width: 110px;
}


/*モバイル表示のサイドメニュー*/
.mobile-menu {
    /* ... */
    transform: translateX(100%); /* 画面右外に非表示 */
    transition: transform 0.3s ease-out;
}

.mobile-menu.is-active {
    transform: translateX(0); /* クリック時に画面内に表示 */
}


/*記事詳細の関連記事の画像サイズを調整*/
.related-posts{}
.related-posts img{max-height: 200px; object-fit:cover}

/* Responsive Typography */
@media(max-width:767px){
    body{
        font-size:14px
    }
    
    h1{
        font-size:28px
    }
    
    h2{
        font-size:24px
    }
    
    h3{
        font-size:20px
    }
}

/* Print Styles */
@media print{
    body{
        background:white;
        color:black
    }
}