body{background-image: url("../img/bg.webp"); background-size: 400px 400px; background-position: left top; background-repeat: repeat; }
#wp_head p{background-image: url("../img/tit_sweet.webp");  }

#pagemain { padding:0  40px 80px 40px; margin-top: 40px!important; }

h1,h2{font-family: "Shippori Mincho B1", serif; font-weight: 400; color:var(--green); margin: 80px 0 40px 0; }
.date{background-color: var(--green); color: #fff; display: inline-block; padding: 0.5em; font-size: 1.8rem; margin: 0 0 40px 40px; position: absolute; right: 0; top:0;}

#parts01{width: 100%; padding: 20px 0 80px 0; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 2; }
#parts01 .left{ width: 52%; position: relative;  }
#parts01 .right{ width: 48%; text-align: center; padding-right: 40px; }
#parts01 .right img{ width: 100%; display: block; margin: 0 auto;}
#parts01 .taxonomy-post_tag{margin: 0px 40px; width: 100%; text-align: left;}
#parts01 .taxonomy-post_tag a{margin-right: 0.5em; text-decoration: underline;}
#parts01 .taxonomy-post_tag span{display:none ;}
.monthly{margin:80px 0 40px 40px; width: 100%; background-color: var(--bg_white); padding: 20px 40px 80px 40px; box-shadow: 3px 3px 6px #b2b2b2; border: 1px solid #fff; position:relative; z-index: 2; }
#parts01 h1{font-weight: normal;}
#parts02{display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; background-color: #fff; padding: 0 40px 120px 40px; gap:0 40px;}
#parts02 h2,#parts02 h2 strong{width: 100%; font-weight: normal;}
#parts02 figure{width: calc(40% - 20px); }
#parts02 figure img{max-width: 540px; margin: 0 auto; width: 100%;}
#parts02 .part02_left{width: calc(60% - 20px); }
.part02_left figure{width:100%!important; margin-bottom: 20px;}

#parts02 p,#parts01 p{margin-bottom:20px;}
#parts02 h3{font-size: 1.2em; color: var(--green); padding-left: 1em; border-left: 5px solid var(--green); margin:40px 0 20px 0;}
#parts02 h3:nth-child(1){margin-top: 0;}
#parts02 p a,#parts01 p a{text-decoration: underline; display: inline-block; margin-left:0.5em; margin-right: 0.5em;}

/*アーカイブ*/
#archive{background: var(--bg_gray); margin: 80px auto 0 auto; padding: 0 40px; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; position: relative; clear: both;}
#archive p.en_tit{margin-top: -0.4em;}
#archive p{width: 100%; padding: 0; margin-top: 40px;}
#archive ul{width: 100%; max-width: 1260px; padding: 40px 0 0 0; display: flex; justify-content:center; align-items: stretch; flex-wrap: wrap; gap:14px 0px; }
#archive ul li{font-size: 0.8rem; line-height: 1.2em;  border:2px solid #fff; width: 15.6%; margin: 0 5px; text-align: center; filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.4)); position: relative; background-color: #fff; }
#archive ul li p{display: block; width: 100%; padding:0.2em ; margin-top: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; min-height:3em; color: #000;}
#archive ul li date{position: absolute; top: 0; right: 0; display: inline-block; padding: 0 0.5em; color: #fff; background-color: rgba(0,0,0,0.35); }
#archive h1{width: 100%; margin: 40px 0 0 0 ;}

#recommend{background: var(--bg_gray); margin: 0 auto; padding: 0 40px; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; position: relative; clear: both;}
#recommend p.en_tit{margin-top: -0.4em;}
#recommend p{width: 100%; padding: 0; margin-top: 40px;}
#recommend ul{width: 100%; max-width: 1260px; padding: 40px 0 80px 0; display: flex; justify-content:space-between; align-items: stretch; flex-wrap: wrap; gap:14px 0px;  }
#recommend ul li{border:2px solid #fff; width: 15.6%; margin: 0; text-align: center; filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.4)); position: relative; background-color: #666; }
#recommend ul li span{display: block; font-size: 0.7rem; line-height: 1.2em; position: absolute; bottom: 5px; left: 0; background-color: rgba(0,0,0,0.35); width: 100%; padding:0.2em ; color: #fff;}

#viewmore{background: var(--grd); margin: 0 auto; padding: 0 40px; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 2%; position: relative; z-index: 2; clear: both; }
#viewmore p.en_tit{margin-top: -0.4em;}
#viewmore p{width: 100%; padding: 0; margin-top: 40px;}
#viewmore ul{width: 100%; max-width: 1260px; padding: 40px 40px 80px 40px; display: flex; justify-content:space-between; align-items: stretch;  }
#viewmore ul li{width: 25%; background:var(--bg_white); border-radius: 5px; margin: 0 1%; text-align: center; font-size: 1.2em; filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.4)); padding: 5px; }
#viewmore ul li a{border: 1px solid var(--green); display: block; border-radius: 5px; padding: 20px; background-image: url("../img/arrow.svg"); background-size: 1em auto; background-repeat: no-repeat; background-position: right 5px top 5px; height: 100%;}
#viewmore ul li span{display: block;}

.pagination{text-align: center; margin: 40px 0px 80px 0px; display: block; width: 100%;}
.pagination span,.pagination a{margin: 0 10px;}
.pagination a{text-decoration: underline;}

#tag{background-color: #fff; padding: 40px 0 80px 0; margin: 0;}
#tag h2{margin: 0 40px 20px 40px;}
#tag ul{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap:20px; margin: 0 40px;background-color:var(--bg_white); border-radius: 10px; padding: 40px 10px; filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.4));}
#tag a{background: var(--green); border: 2px solid #fff; border-radius: 10px; padding: 0.2em 0.5em; filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.4)); display: inline-block; color: #fff;}

#ingredient{padding: 40px 40px 80px 40px; background-color: var(--bg_gray);}
#ingredient ul{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 0.9em; gap:10px; margin: 0; background-color:var(--bg_white); border-radius: 10px; padding: 40px 10px; filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.4));}
#ingredient a{background: var(--green); border: 2px solid #fff; border-radius: 10px; padding: 0.2em 0.5em; filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.4)); display: inline-block; color: #fff; position: relative;}


span.yeartit{font-size: 1.4em; padding: 0 0.5em; border: 1px solid var(--green); line-height: 1em; display: inline-block; margin-right: 0.5rem; background-color: var(--green); color: #fff;}

.is-style-stripes thead{color: var(--green);}

/*******tablet*******/
@media screen and (orientation: portrait), screen and (max-width: 860px) {
h1,h2{margin-top: 40px;}
#parts01{width: 100%; flex-direction: column-reverse; padding: 0 0 40px 0;}
#parts01 .left{ width: 100%;}
#parts01 .right{ width: 100%; padding-right: 0; }
#parts01 .right img{ width: 100%; max-width: 540px; margin: 0 auto;}
#parts01 .tag{margin: 20px 40px; width: auto; text-align: center;}
.monthly{margin:-20px 40px 40px 40px; width: calc(100% - 80px); }
#parts01 .taxonomy-post_tag{margin: 0px 40px 10px 40px;}
#parts02{padding: 0 40px 120px 40px;}
#parts02 h2{width: 100%;}
#parts02 figure{width: 100%; }
#parts02 .part02_left{width: 100%; margin-top: 40px; }

#archive ul{ padding: 0; gap:10px 0px; margin-top: 40px; }
#archive ul li{width: calc(25% - 10px); margin: 0 5px;}

#recommend{padding: 0 40px;}
#recommend ul li{width:32% ; }

#viewmore{padding: 0 40px 40px 40px;}
#viewmore ul{position: relative; bottom: auto; left: 0; width: 100%; padding: 0; flex-wrap: wrap; }
#viewmore ul li{width:calc(50% - 20px) ; margin: 5px 10px; font-size: 1em; padding: 5px; line-height: 1.4em; }
#viewmore ul li a{ padding: 0px;}

#ingredient ul{margin: 0; font-size: 0.8em; gap:10px 0px;}
#ingredient ul li{margin:0 5px;}
#tag ul{font-size: 0.8em; gap:10px 0px;}
#tag a{margin:0 5px;}

}

/*******SP*******/
@media screen and (max-width:600px){
#page_main{padding:0  0 80px 0;}
#parts01 {padding: 0;}
#parts01 .right img{ width: 100%; margin: 0 auto; }
#parts01 .taxonomy-post_tag{margin: 0px 20px 10px 20px; width: auto;}
.monthly{ padding: 20px 20px 40px 20px; width: auto; margin: 10px 20px 40px 20px;}

#parts02{padding: 0 20px 120px 20px;}
#parts02 h2{width: 100%;}
#parts02 figure{width: 100%; }
#parts02 .part02_left{width: 100%; margin-top: 40px; }

#archive{ padding: 0 20px 0 20px;}

#recommend{ padding: 0 20px 0 20px;}
#viewmore{ padding: 0 20px 40px 20px;}
.wp-block-image{float: none; width: 100%; max-width: 540px; margin:0 auto 20px auto;}

#tag h2{margin: 0 20px 20px 20px;}
#tag ul{margin: 0 20px;}
#ingredient{padding: 40px 0px 80px 0px; }
#ingredient ul{margin: 0 20px; font-size: 0.8em; gap:10px 0px;}
#ingredient ul li{margin:0 5px;}
#archive ul{ padding: 0; gap:10px 0px; margin-top: 40px; }
#archive ul li{width: calc(33% - 10px); margin: 0 5px;}
}

.baseimg{margin-top: 80px;}

/*******Wide*******/

@media screen and (min-width:1260px){
.date{margin: 0 0 40px calc(50% - 630px);}
#parts01 .left{ width: 45%;}
#parts01 .right{width: 55%; padding-right: 0!important;}
#parts01 .right img{ width: auto; margin: 0; padding-left:0px; padding-right: 0; margin-right: 0;}
.monthly{margin:80px 0 40px 0; width: 660px; }
#parts02{ padding: 0 calc(50% - 630px) 120px calc(50% - 630px);}
#parts01 .taxonomy-post_tag{width: 1260px; margin: 0px auto; }
#parts01 .left{ width: 590px; position: relative;}
#parts01 .right{ width: 650px; text-align: center; padding-right: 0; }
#archive p{ padding-left:calc(50% - 630px); padding-right:calc(50% - 630px); }
#archive h1{width: 100%; margin: 40px 0 0 0 ; padding-left:calc(50% - 630px);}
#recommend p{ padding-left:calc(50% - 630px); padding-right:calc(50% - 630px); }
#recommend ul li{margin: 0 5px;}
#viewmore p{ padding-left:calc(50% - 630px); padding-right:calc(50% - 630px); }
#viewmore .jn { font-size: 30px;}
#viewmore .en { font-size: 30px;}
#viewmore h2{ background-size: auto 40%; padding: 20px 5px 20px 110px; }
#viewmore .btn01{background-size: auto 66%; }
#viewmore .btn02{background-size: auto 66%; }
#viewmore .btn03{background-size: auto 66%; }
#viewmore ul li{min-width: 10em;  margin: 0 20px;}
#tag h2{margin: 0 auto 20px auto; width: 1260px;}
#tag ul{margin: 0 auto; width: 1260px;}
#ingredient{padding: 40px 0px 80px 0px;}
#ingredient ul{margin: 0 auto; width: 1260px;}
}