/*
Theme Name: SANGO-recipe
Theme URI: 
Description: sango Child Theme
Author: Your Name
Template: sango-theme
Version: 1.0.0
*/


:root {
  /* Mode 1 */
  /* number */
  --space-00h: 4px;
  --space-01: 8px;
  --space-01h: 12px;
  --space-02: 16px;
  --space-03: 24px;
  --space-03h: 28px;
  --space-04: 32px;
  --space-38: 38px;
  --space-05: 40px;
  --space-05h: 44px;
  --space-06: 48px;
  --space-07: 56px;
  --space-08: 64px;
  --space-09: 72px;
  --space-10: 80px;
  --space-11: 88px;
  --space-12: 96px;
  --space-20: 160px;
  --space-58: 58px;

  /* Color styles */
  --main: #333333;
  --sub: #969696;
  --accent: #E58FB3;
  --base: #EEEEEE;
  --line: #D8D8D8;
  --white: #FFFFFF;
  --text: #333333;
  --title: #974E44;
  --text4:#EBEBEB;

  /* Text-size styles */
  --copyright-en: 12px;
  --footer-nav-en: 16px;
  --caption-min: 10px;
  --body: 16px;
  --caption: 16px;
  --h3: 20px;
  --h2-sub: 16px;
  --tagline-sub-en: 34px;
  --tagline-en: 140px;
  --gnav-en: 16px;
  --h2-en: 64px;
  --common--btn: 20px;
  --common--tag: 10px;
  --common--btn-mini-en: 12px;
  --common--new-icon: 12px;
}


@media (max-width: 769px){
  /* 画面サイズが769px未満の場合の設定 */
  :root {
      /* Text-size styles */
    --h2-en: 55px;
    --copyright-en: 12px;
    --footer-nav-en: 16px;
    --caption-min: 12px;
    --body: 16px;
    --caption: 16px;
    --h3: 20px;
    --h2-sub: 16px;
    --tagline-sub-en: 20px;
    --tagline-en: 120px;
    --gnav-en: 16px;
  }
}


@media (max-width: 431px){

  /* 画面サイズが360px未満の場合の設定 */
  :root {
      /* Text-size styles */
    --h2-en: 45px;
    --copyright-en: 10px;
    --footer-nav-en: 14px;
    --caption-min: 12px;
    --body: 16px;
    --caption: 16px;
    --h3: 20px;
    --h2-sub: 14px;
    --tagline-sub-en: 12px;
    --tagline-en: 44px;
    --gnav-en: 16px;
  }
}

@media (min-width: 1240px){
  .single #inner-content, .page #inner-content, .inner-footer{
    width:100%;
  }
}


* {
    margin:0;
    padding:0;
  }

  body {
    font-size: 14px;
    margin:0;
    padding:0;
  }

  a{
    text-decoration: none;
    color:var(--text,#333);
  }

  a:visited{
    text-decoration: none;
    color:var(--text,#333);
  }

  h3{
    color: var(--text, #333);
    text-align: justify;
    /* pc/h3 */
    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
  }
  
  .space-03{
    font-size:var(--space-03);
  }

  .title{
    color:var(--title,'#974E44');
  }

  input[type="checkbox"]{
    border: 2px solid #32CD32;
    accent-color:var(--title);
  }


header.header{
  background:none;
  box-shadow:none;
}

.header-right-box{
  display:none;
}

.desktop-nav{
  float:none;
}

#container,.container,.footer-inner{
  display: flex;
  /*width: 90%;*/
  max-width:1016px;
  padding:0 var(--space-58,58px);
  flex-direction: column;
  align-items: flex-start;
  gap:90px;
  background:#fff;
  margin:0 auto;
  position:relative;
}

.h2{
  color: var(--color-block, #000);
  /* pc/h2 */
  font-family: Roboto;
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 52.8px */
}

.header{
  display: flex;
  width: 100%;
  padding:0;
  justify-content: space-between;
  align-items: flex-start;
  z-index:1;
}

.header-contents{
  display: flex;
  max-width: 659px;
  align-items: center;
  gap: var(--space-09, 32px);
  flex-shrink: 0;
}

.main-img{
  position:absolute;
  width: 578px;
  height: 456px;
  right:0;
  top:0;
  background: url('public/images/header-background.png') lightgray 50% / cover no-repeat;
}

.gnav-list{
  display: flex;
  align-items: center;
}


.gnav{
  font-size: var(--gnav-en);
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 18px */
  letter-spacing: 1.8px;
  color:var(--text);
  padding: 0px var(--space-03, 24px);
  align-items: center;

}

.gnav:nth-of-type(1){
  padding-left:0;
}

.header-btn{
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top:4px;
  background:url('public/images/header-background.png');
}

.btn{
  display: flex;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: var(--color-text4, #EBEBEB);
  /* p6-r */
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 10px */
  letter-spacing: -0.5px;
}

.btn-signup,#submit{
  background: var(--color-title, #B55D51);
  color: var(--color-white, #FFF);
}

.header-btn .btn{
  width: 90px;
  font-size:10px;
}

.outer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-space-38, 38px);
  align-self: stretch;
  width:100%;
  max-width:1016px;
}

.title-viewmore{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.title-viewmore h3{
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}

.title-viewmore span{
  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 18px */
}

.recipe-items-inner{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: var(--space-24, 24px) 24px;
  flex-wrap: wrap;
}

.recipe-item{
  display: flex;
  width: 31%;
  padding-bottom: var(--space-02-h);
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  position:relative;
}

.recipe-item h2{
  white-space: pre-line;
  overflow:hidden;
  width:100%;
}

.bookmark{
  position: absolute;
  right: 8px;
  top: 4px;
  padding: 8px 8px 4px 8px;
  background: #fff;
  border-radius: 10px;
}

.recipe-item .recipe-img{
  display: flex;
  width: 100%;
  max-height: 144px;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
}

.recipe-info{
  display: flex;
  height: 100px;
  padding-bottom: 1px;
  flex-direction: column;
  align-items: flex-start;
  gap:0;
  flex-shrink: 0;
  width:100%;
  border: 1px solid var(--text4, #A5A5A5);
  border-top:none;
  background: #FFF;
}

.recipe-info-title{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding:0 4px;
  align-self: stretch;
}

.recipe-info-title h2{
  min-height:36px;
}

.recipe-info-user{
  display: flex;
  width: 100%;
  height: 20px;
  padding: 10px;
  align-items: center;
  gap: 10px;
  padding: 0px var(--space03, 12px);
  margin-top: auto;
  margin-bottom: 8px;
}

.recipe-info-user img{
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.callbox{
  border-radius: 3px;
  border: 1px solid var(--color-text4, #EBEBEB);
  padding: 0 10px;
  margin-left: auto;
  color: var(--color-text2, #878787);
  font-size:14px;
}

.star{
  color: var(--color-text2, #878787);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21px */
  }

.p2-m{
  color: var(--color-block, #000);
  /* pc/p2-m */
  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 18px */
}

.p6-r{
  color: var(--color-block, #000);
  /* p6-r */
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 10px */
  letter-spacing: -0.5px;
  }


.blog-inner{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-24, 24px);
}


.blog-item{
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.blog-item img{
  max-height:189px;
  width:100%;
}

.blog-info{
  display: flex;
  height: 72px;
  padding: var(--space-space-08, 8px) 0px 0px var(--space-space-08, 8px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-space-04, 4px);
  align-self: stretch;
  border: 1px solid var(--text4, #A5A5A5);
  background: #FFF;
  white-space: pre-line;
  overflow:hidden;
}

.searchbox{
  display: flex;
  padding: var(--space-space-38, 38px) 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  background: var(--color-background-p, #FFF0ED);
  text-align:center;
  width:100%;
  margin:90px 0;
}

.searchbox h3{
  color: var(--color-block, #000);
  text-align: center;
  align-items: center;
  /* pc/h5-h-m */
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 24px */
  width:100%;
  text-align:center;
}

.searchbox .tagline-sub{
  width:100%;
  text-align:center;
}

.searchbox form{
  display: flex;
  margin:0 auto;
}

.searchbox form .email{
  min-width:250px;
}

.category-box-inner{
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: var(--space-06, 12px) var(--space-02, 12px);
  flex-wrap: wrap;
}

.category-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-01, 4px);
  align-self: stretch;
  width:23%;
}

.category-box h3{
  color: #000;
  text-align: center;

/* pc/p3-m */
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
}

.category-box-inner .recipe-img{
  height: 130px;
  border-radius: 100px;
}

.company-box{
  color: #000;
  text-align: center;
  /* pc/h5 */
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 24px */

  display: flex;
  padding: 10px var(--space-58, 58px);
  justify-content: center;
  align-items: center;
  gap: var(--space-24, 24px);
  align-self: stretch;
}

.sns-outer{
  display: flex;
  align-items: center;
  gap: var(--space-01, 8px);
}

.burger{
  display: flex;
  width: 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-01h, 12px);
  flex-shrink: 0;
}

.burger-line{
  height:3px;
  align-self: stretch;
  background: var(--main, #333);
}


.first-visual-outer{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
}

.first-visual{
  display: flex;
  width: 1440px;
  height: 898px;
  align-items: flex-end;
  gap: var(--space-12, 96px);
}

.main-visual-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-space-12, 12px);
  align-self: stretch;
  z-index:1;
}

.main-visual{
  display: flex;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
}

.tagline{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-space-12, 12px);
  align-self: stretch;
}

.tagline-main{
  color: var(--color-block, #000);
  /* pc/h2 */
  font-family: Roboto;
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 52.8px */
}

.tagline-sub{
  color: var(--color-text3, #A5A5A5);

  /* pc/p3-r */
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 20.8px */
}

.first-visual-outer .tagline-sub{  
  white-space: pre-line;
}



.share-outer{
  display: flex;
  align-items: center;
  gap: var(--space-58, 58px);
  align-self: stretch;
  padding-top:90px;
}

.share-inner{
  display: flex;
  width: 454px;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24, 24px);
}

h4{
  color: var(--color-block, #000);
  text-align: center;
  
  /* pc/h4 */
  font-family: Roboto;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 32px */
}


footer.footer{
  display: flex;
  padding: var(--space-06);
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
  background: var(--base, #EEE);
}

.footer-contents-inner,.footer-link-box,.footer-searchbox{
  width:33%;
}

.footer-inner{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  background:none;
}

.footer-inner .footer-contents{
  display: flex;
  align-items: flex-start;
  gap: var(--space-02, 16px);
}

.footer-link-box{
  display: flex;
  padding: var(--space-space-08, 8px) var(--space-24, 24px);
  align-items: center;
  gap: 10px;
}

.footer-searchbox{
  display: flex;
  flex-direction: column;
  gap: var(--space-space-12, 12px);
}

.footer-searchbox h3{
  text-align:center;
}

.footer-searchbox form{
  display: flex;
  flex-direction: column;
  gap: 4px;
  width:80%;
  margin:0 auto;
}

.footer-searchbox .tagline-sub{
  font-size:12px;
}

.copyrightbox{
  margin:0 auto;
  width:100%;
  max-width:1016px;
  padding:0 90px;
  display: flex;
  align-items: flex-start;
}

.footer .sns-outer{
  margin-left: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-02, 16px);
}

.footer-contents-inner{
  display: flex;
  width: 300px;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.fnav-list{
  display: flex;
  width: 86px;
  height: 134px;
  padding: var(--space-space-08, 8px) 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-space-16, 16px);
}

.fnav,.fnav:visited{
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 18.2px */
  color: var(--color-text2, #878787);
}

.fnav-list span{
  color: #000;

  /* pc/p3-m */
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
}


.copyright{
  color: var(--text, #333);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 12px */
  letter-spacing: 1.8px;
}

.header__inner{
  display:none;
}

.nozindex{
  z-index:0;
}

/* single */
.single-box-left{
  width:70%;
}

.entry-content{
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.post-info-box-inner{
  display: flex;
  align-items: center;
  gap: var(--space-space-12, 12px);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.post-info-box:nth-of-type(1){
  display:flex;
  align-items: center;
  gap: var(--space-space-04, 4px);
}

.post-info-box img{
  width:16px;
  height:16px;
  border-radius: 50%;
  align-items: center;
}

.review-box{
  color: var(--color-text3, #A5A5A5);
}

.post-recipe-times{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-24, 24px);
}

.post-time-box{
  display: flex;
  align-items: center;
  gap: var(--space-58, 58px);
}

.post-time-inner{
  display: flex;
  align-items: center;
  gap: var(--space-04,32px);
}

.post-time{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-space-08, 8px);
}

.post-time span{
  color: var(--color-block, #000);
  text-align: center;
  display:block;
  /* pc/p4-m */
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 18.2px */
}

.post-time span:nth-of-type(1){
  color: var(--color-text3, #A5A5A5);
}

.post-info-box i{
  color: var(--color-title, #B55D51);
}

.post-time-box .post-info-box{
  color: var(--color-title, #B55D51);
  border-radius: 10px;
  padding: var(--space-space-08, 8px);
  border: 1px solid var(--color-title, #B55D51);
}

#primary{
  display: flex;
}

.single-box-right{
  width:25%;
}

.right-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-24, 24px);
  align-self: stretch;
}

.recent-posts-grid{
    display: flex;
    flex-direction: column;
    gap: var(--space-01,8px);
}

/*
.recipe-item{
  display: flex;
  width: 162px;
  height: 72px;
  align-items: flex-start;
}
*/

.single-box-right h2{
  margin-bottom:var(--space-02,8px);
  font-size:20px;
}

.single-box-right h3{
  font-size: 14px;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 24px;
  white-space: pre-line;
  overflow:hidden;
  max-height: 36px;
  line-height:1.3;
}

.recent-post-card .recipe-item{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-01,8px);
  align-self: stretch;
  width:100%;
  height:auto;
}

.recent-post-card .recipe-item  .post-content{
  width:45%;
}

.recent-post-card .recipe-item .recent-post-thumbnail{
  width:50%;
}

.single-box-right .searchbox{
  margin:var(--space-02,16px) 0;
}

.single-box-right .searchbox form{
  flex-direction: column;
  gap:var(--space-01,8px);
}

.searchbox form .email{
  min-width:100%;
}

.related-posts-grid{
  display: flex;
  align-items: center;
  align-content: center;
  gap: 12px var(--pace-12, 12px);
  align-self: stretch;
  flex-wrap: wrap;
}

.related-post-card{
  width:45%;
}

.related-post-card .recipe-item{
  width:100%;
}

time.pubdate:before,time.updated:before{
  color: #b21a05;
}

.product-box{
  display: flex;
  padding: var(--space-24, 24px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background: var(--color-text4, #EBEBEB);
  width:100%;
}

.tagbox{
  display: flex;
  align-items: center;
  align-content: center;
  gap: 4px var(--space-space-04, 4px);
  align-self: stretch;
  flex-wrap: wrap;
}

.tagbox a{
  color: var(--color-text3, #A5A5A5);
  /* p5-r */
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  border-radius: 5px;
  border: 1px solid var(--color-text3, #A5A5A5);
  padding: var(--space-space-04, 4px);
}

.recipe-check-outer,.recipe-num-outer{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-space-16, 16px);
}

.recipe-check-inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-space-08, 8px);
  align-self: stretch;
}

.recipe-check-inner div{
  display: flex;
  align-items: center;
  gap: var(--space-space-08, 8px);
}

ol.recipe-num-inner {
  padding: 0px;
  margin: 0px;
  list-style: none;
  counter-reset: list_circle_num_counter;
  list-style-type:none;
  padding:0;
  border:none;
}

.recipe-num-inner > li {
  list-style-type:none;
  position: relative;
  padding: 0px 0px 0px 2em;
  counter-increment: list_circle_num_counter;
  font-size:14px;
  line-height:1.5;
}
.recipe-num-inner> li::before {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: calc(1.5em);
  height: calc(1.5em);
  border: 1px solid var(--color-title, #B55D51);
  background:var(--color-title, #B55D51);

  border-radius: 5px;
  text-align: center;
  line-height: 1;
  content: counter(list_circle_num_counter);
  color:#fff;
}

.recipe-num-inner > li + li {
  margin: 1em 0px 0px;
}

.block-outer{
  display: flex;
  width: 476px;
  padding: var(--space-space-16, 16px) var(--space-24, 24px);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  background: var(--color-text4, #EBEBEB);
}

.block-outer .post-time-box{
  gap:0;
}

.block-outer .img-box{
  display: flex;
  align-items: flex-start;
  gap: var(--space-space-16, 16px);
} 

.block-outer .img-box img{
  width:50%;
}

.comment-meta,.comment-author{
  display: flex;
  align-items: center;
  gap:4px;
}

.comment-author img{
  border-radius:50%;
}

.says{
  display:none;
}

.reply{
  text-align: right;
}

.comments-title,.comment-form,.product-box{
  margin:16px 0;
}

.recipe-item a{
  max-height:145px;
  width:100%;
  display:flex;
}

.post-info-box{
  font-size:15px;
}

.post-info-box a{
  color:var(--color-block);
}

.fab-btn{
  display:none;
}

.single #breadcrumb{
  width: 100%;
  margin: 0 auto;
  padding-bottom:45px;
  margin-top:-90px;
}

.entry-title{
  line-height:1.2;
}

.entry-content blockquote .recipe-num-inner{
  margin:0;
  padding:0;
}

.d-5of7{
  width:75%;
}

#drawer {
  display: none;
}

#drawer + #inner-header{
  max-width:100%;
}

#comments-title.h2{
  font-size:24px;
}

.comment .vcard .avatar{
  width:20px;
}

.comment .vcard{
  margin-left:30px;
}

@media (min-width: 1030px){
  .wrap, .maximg, .single #inner-content, .page #inner-content{
    width:100%;
  }
}

@media (min-width: 769px){
  .wrap, .maximg, .single #inner-content, .page #inner-content{
    width:100%;
  }
}

@media (max-width: 769px){
  #container{
    background: url('public/images/header-sp-background.png') no-repeat;
    background-size:100% auto;
  }

  .single #breadcrumb{
    margin:0;
    padding:13px 15px;
    background: none;
    padding-bottom: 45px;
    margin-top: -30px;
  }

  .single #container{
    background:none;
  }
  


  .main-visual-text{
    z-index:0;
  }

  .searchbox form{
    flex-direction: column;
  }

  #drawer{
    display: block;
  }

  #drawer__open{
    left:auto;
    right:0;
  }
  
  .mobile-nav{
    display: none;
  }

  .desktop-nav {
     display: none;
  }
  #inner-header {
     text-align:center;
  }


  .d-5of7{
    width:100%;
  }

  .post-info-box-inner{
    padding:0 25px;
  }


  .post-time-inner{
    gap:8px;
  }

  .post-time-box{
    gap:16px;
  }

  #comments{
    width:90%;
  }

  .header-contents{
    width:100%;
  }

  .block-outer{
    display: none;
  }

  .header__inner {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 20px;
  }
  
  #js-nav{
    display:flex;
    flex-direction: column;
    gap:var(--space-02, 12px)
  }

  .header__inner .gnav{
    padding: 0px var(--space-03, 24px)
  }

  .header__title {
    font-size: 24px;
  }
  
  .header__hamburger {
    display: none;
    z-index:99;
  }
  
  .nav__items {
    display: flex;
    gap: 20px;
    list-style: none;
  }
  
    .header__hamburger {
      display: block;
      width: 30px;
      height: 20px;
      position: relative;
      background: none;
      border: none;
      cursor: pointer;
    }
  
    .hamburger__line {
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: #333;
      transition: all 0.3s;
    }
  
    .hamburger__line:nth-child(1) {
      top: 0;
    }
  
    .hamburger__line:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
    }
  
    .hamburger__line:nth-child(3) {
      bottom: 0;
    }
  
    .header__nav {
      position: fixed;
      top: 60px;
      right: -100%;
      width: 70%;
      height: 100vh;
      background-color: #fff;
      transition: all 0.3s;
    }
  
    .header__nav.active {
      right: 0;
    }
  
    .nav__items {
      flex-direction: column;
      padding: 20px;
    }
  
    /* ハンバーガーメニューがアクティブ時の×マーク */
    .header__hamburger.active .hamburger__line:nth-child(1) {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
  
    .header__hamburger.active .hamburger__line:nth-child(2) {
      opacity: 0;
    }
  
    .header__hamburger.active .hamburger__line:nth-child(3) {
      bottom: 50%;
      transform: translateY(50%) rotate(-45deg);
    }


    #container,.container,.footer-inner,.copyrightbox{
      /*max-width: 768px;*/
      width:100%;
      padding:var(--space-02, 8px);
      gap:var(--space-06,48px);
    }

  .outer{
    gap:var(--space-02, 8px);
  }

  .gnav-list,.sns-outer,.header-btn,.title-viewmore .title{
    display:none;
  }


  .main-img{
    background:none;
    height:230px;
  }

  .main-visual-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-space-12, 12px);
    flex-shrink: inherit;
    align-self: stretch;
    width:100%;
    position:sticky;
  }

  .tagline {
    position:unset;
  }
  .tagline-main{
    font-size: 36px;
    margin:0 auto;
  }

  .searchbox{
    margin:var(--space-06,48px) 0;
  }

  .share-outer{
    flex-direction: column;
    gap: var(--space-03, 24px);
  }

  .share-inner{
    width:100%;
    gap: var(--space-02,16px);
  }

  .recipe-item{
    width:46%;
  }

  .bookmark svg{
    width:12px;
    height:12px;
  }

  .bookmark{
    position: absolute;
    right: 8px;
    top: 4px;
    padding: 4px 4px 2px 4px;
    background: #fff;
    border-radius: 10px;
  }

  .blog-inner{
    flex-direction: column;
  }

  .blog-item{
    width:99%;

  }

  .category-box{
    width:46%;
  }

  .company-box{
    flex-wrap: wrap;
    padding:0;
  }

  footer.footer{
    padding:var(--space-02,8px);
    margin-top:var(--space-06,48px);
  }
  .footer-inner,.footer-inner .footer-contents{
    flex-direction: column;
  }

  .footer-link-box{
    padding:0;
    width:100%;
  }

  .footer-searchbox,.recipe-info-user{
    display:none;
  }

  .copyrightbox{
    flex-direction:column-reverse;
    gap:var(--space-02);
  }

  .footer .sns-outer{
    margin-left:0;
  }

  #primary{
    display: block;
  }
  .single-box-left{
    width:100%;
    margin:0 auto;
  }

  .single-box-right{
    width:100%;
    margin:0 auto;
  }


}


@media (max-width: 431px){


  /*

  #container{
    display: flex;
    width: 368px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-08, 64px);
  }

  .header{
    display: flex;
    width: 360px;
    height: 70px;
    padding: var(--space-06, 48px) var(--space-05h, 44px);
    justify-content: space-between;
    align-items: center;
  }

  .header-contents{
    display: flex;
    align-items: center;
    gap: var(--space-09, 72px);
  }

  .header-btn{
    display: flex;
    width: 40px;
    align-items: center;
    gap: var(--space-00h, 4px);
    flex-shrink: 0;
  }

  .tagline{
    position: absolute;
    left: 28px;
    top: 148px;
  }
    */

  .burger{
    display: flex;
  width: 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-01, 8px);
  flex-shrink: 0;
  }

  .burger-line{
    width:40px;
    height:2px;
  }

  .first-visual{
    display: flex;
    width: 360px;
    height: 824px;
    align-items: flex-end;
    gap: var(--space-04, 32px);
  }

  .sub-visual{
    display: flex;
    width: 108px;
    height: 408px;
    max-width: 672px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-03, 24px);
    flex-shrink: 0;
  }



  .img-text{
    display: flex;
    width: 304px;
    height: 437px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-05, 40px);
    flex-shrink: 0;
  }

  .img-text img{
    width: 304px;
    height: 152px;
    flex-shrink: 0;
  }

  .journal-outer{
    display: flex;
    padding: 0px var(--space-03h, 28px);
    flex-direction: column;
    align-items: center;
    gap: var(--space-04, 32px);
    align-self: stretch;
  }

  .journal-inner{
    display: flex;
    padding: 0px var(--space-05h, 44px);
    flex-direction: column;
    align-items: center;
    gap: var(--space-05, 40px);
    align-self: stretch;
  }

  .journal-items{
    display: flex;
    width: 304px;
    padding-bottom: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-03, 24px);
  }
  
  .journal-items-inner{
    display: flex;
    width: 304px;
    padding-bottom: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-03, 24px);
  }


  .journal-img-outer{
    display: flex;
    width: 304px;
    height: 171px;
    flex-direction: column;
    align-items: flex-end;
  }

  .journal-info{
    display: flex;
    width: 304px;
    height: 135px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-01, 8px);
  }
  


}