* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

.index-top-background {
  align-items: center;  
  position: relative;
  background: none; /* 背景はSVGのfillで設定 */
  width: 100%;
  height: 340px;
  z-index: 2;
  overflow: hidden;
}

  .index-top-background-jenre{
    display: flex;   
    position: relative;
    flex-direction: column;    
    align-items: center;
    background: none; /* 背景はSVGのfillで設定 */
    width: 100%;
    z-index: 2;
    overflow: visible; /* はみ出しを許可 */  
    height:370px;
  }  

@media (max-width: 767px) {

.index-top-background {
  height: 160px;
}

  .index-top-background-jenre{
    height:180px;
  }  
}

.wave {
  display: block; /* 余白をなくす基本対策 */
  margin: 0;
  padding: 0;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  width: 100vw;  
  overflow: hidden; /* はみ出しを許可 */
}

.top-image {
  position:relative;      
  padding-top: 60px;
  display: block;
  width: 100%;
  max-height: 360px;
  z-index: 2;      
  object-fit: cover;
    }

  @media(max-width: 767px) {
    .top-image {
      padding-top: 0px;
      width: 100%;
      height: 170px;
    }
  }

h1 {
  padding: 90px 0 0 30px;    
  width:100%;
  color:#000000be;
  font-size: 49px;
  font-family: "ヒラギノ明朝", "ProN", sans-serif;
  position: relative;
  text-align: left;
  z-index: 3;   
  margin:0;
  line-height: 1.6;  
  }


@media (max-width: 767px) {
  h1{
    padding: 58px 0 0 10px;
    font-size: 22px;
  }
}

h1 .sub{
  width:100%;  
  padding:40px 40px;    
  font-size: 24px;
  z-index: 2;     
  line-height: 1.5;  
  }
  

@media (max-width: 767px) {
  h1 .sub{
    padding:8px 20px;  
    line-height: 1.4;
    font-size: 10px;
  }
}

  h2{
  margin: 30px 0 0 15px;
  line-height: 1.3;    
  font-size: 37px;
  font-family: "Arial Black","ヒラギノ角ゴ ProN", sans-serif;
  font-weight: 500;
  position: relative;
  text-align: left;
  z-index: 2;     
  }

  @media (max-width: 767px) {
    h2{
      margin:20px 0 0 10px;
      line-height: 1.3;      
      padding-left:5px;
      font-size: 22px;
  }
}

h4 {
  font-size: 38px;
  font-family: "ヒラギノ明朝", "ProN", sans-serif;
  position: relative;
  padding: 10px 0 10px 110px;
  text-align: left;
  z-index: 2;     
  }

@media (max-width: 767px) {
  h4{
    padding: 10px 0 0 20px;
    font-size: 20px;
   }
}

  h5{
     font-size: 20px;
     font-weight: 400;
     margin:15px;
     text-align: left;
     font-family: "游ゴシック", "Yu Gothic", sans-serif;
    }

    @media (max-width: 767px) {
    h5{
      margin:8px;      
      font-size: 16px;
    }
  }

  h6{
     font-size: 20px;
     font-weight: 600;
     padding: 20px 6px 0 0px;
     text-align: right;
     font-family: "游ゴシック", "Yu Gothic", sans-serif;
     z-index: 2;        
  }  

  .sub-text{
  display: inline-block;
  width:95%;  
  padding:0 40px;   
  margin:0; 
  text-align: left;
  font-size: 24px;
  z-index: 10;     
  line-height: 1.6;  
  font-weight: 550;
  }

  @media (max-width: 767px) {
  .sub-text{
    font-family: "游ゴシック", "Yu Gothic", sans-serif;     
    padding:0px 10px;  
    font-size: 10px;
  }
}
  
  p {
      position: relative;    
      font-size: 20px;
      padding: 14px 0 0 0;
      text-align: center;
      font-family: "游ゴシック", "Yu Gothic", sans-serif;
      z-index: 10;        
    }

  p .attension{
   display:inline-block;
   padding:15px 0;    
   color:#555;
   font-size: 18px;    
    line-height: 1.5;       
  }
 
  @media (max-width: 767px) {
  p{
    line-height: 1.1;    
    padding: 0 0 10px 0;
    font-size: 13px;
  }

    p .attension{
    padding:15px 0;
    font-size: 8px;  
    }
  }

  .index-container{
      display:block;
      max-width:60%;
      margin:0 auto;  
  }

/* 記事とジャンルの幅調整 */

@media (max-width: 767px) {
.index-container{
  max-width:100%;
  }
}

  .bottom-line{
    position:relative;
    background-color: #5f5e5ecc;
    margin: 2px auto;
    height:3.8px;
    width:80%;
    border-radius: 1.9px;
  }

  @media (max-width: 767px) {
    .bottom-line{
    height:2px;
    width:90%;
    border-radius: 0.5px;
    }    
  }


 .gallery-shop {
    padding:40px 0 60px 0;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    width: 760px;  
    margin: 0 auto;
    z-index: 1;
  }

  @media (max-width: 767px) {
  .gallery-shop {
    padding:15px 0 30px 0;
    z-index:1;            
    gap: 3px; 
    width: 99% 
  }
}

  .card-shop {
    z-index: 1;        
    border-radius: 0.2em;
    font-family: "游ゴシック", "Yu Gothic", sans-serif;        
    overflow: hidden;
    text-align: center;
    transition: transform 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: #333;
    position:relative;
    background-color: white;
  }

  .card-shop:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  }
  
  /*-----------------------*/

  .card-shop img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
  }

   .card-shop-title {
    font-family: "ヒラギノ明朝", "ProN", sans-serif;        
    line-height: 1.3;   /*段落幅*/
    padding: 10px 3px 5px 3px;
    font-weight: bold;
    font-size: 30px;
  }

  .card-shop-comment{
    line-height: 1.3;   /*段落幅*/
    font-weight: 570;
    font-size: 20px;
    padding:4px 2px 120px 2px;
  }

  .card-shop-address{
    padding-bottom: 5px;
    font-weight: bold;
    font-size: 18px;
    position:absolute;
    bottom: 30px;
    right: 3px;
  } 

   .card-shop-address::before {
    content: "📍";
    margin-right: 2px;
  }
  
  .card-shop-date{
    font-weight: normal;
    font-size: 17px;
    position:absolute;
    bottom: 6px;
    right: 3px;
  }

  .card-shop-date::before {
  content: "訪問日：";
  margin-right: 4px;
    }

  @media (max-width: 767px) {
  .card-shop img {
    height: 160px;
   }

  .card-shop-title {
    padding: 3px ;
    font-size: 15px;
  }

  .card-shop-comment {
    padding-bottom:70px;
    font-size: 12px;
  }

   .card-shop-address {
    bottom:20px;
    font-size: 9px
  }

    .card-shop-date {
    font-size: 10px;
    bottom: 4px;
    }

    .card-shop-date::before {
    margin-right:1px
    }
}

/*---------------------*/

  .card-shop-article{
    position:absolute;
    padding:1px 20px;  
    top: 0;
    right: 0;
    border-radius: 0 0 0 5px;
    background-color: #ffff00cb;
    box-shadow: 0 2px 4px rgba(0, 60, 224, 0.1);
    }

  .card-shop-article::before{
    color:#999;
    font-weight:bold;
    font-size:20px;
    content:"詳しく見る";
  }

     @media (max-width: 767px) {
      .card-shop-article{
      padding:0 4px;  
    }
      .card-shop-article::before{
       font-size:12px;
     }

    }

      /*---------------------*/

  
  .gallery {
    padding:40px 0 60px 0;  
    z-index: 10;            
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    max-width: 850px;
    margin: 0 auto;
  }

  @media (max-width: 767px) {
  .gallery {
    padding:15px 0 30px 0;
    gap: 3px;
    max-width: 98% /* 画面幅いっぱい */
  }
}

  .card {
    font-family: "游ゴシック", "Yu Gothic", sans-serif;  
    border-radius: 0.2em;
    overflow: hidden;
    text-align: center;
    transition: transform 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: #333;
    position:relative;
  }

  .card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  }

  .card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
  }

  @media (max-width: 767px) {
  .card img {
    height: 120px;
   }
  }

  .card-title {
    position: absolute;
    font-family: "ヒラギノ明朝", "ProN", sans-serif;    
    line-height: 1.3;   /*段落幅*/
    bottom: 0;
    width:100%;
    color:rgb(70, 69, 69);
    background-color: #ffffffad;
    font-weight: bold;
    font-size: 30px;
  }
  
  @media (max-width: 767px) {
  .card-title {
    line-height: 1.3;   /*段落幅*/
    padding: 3px ;
    font-size: 10px;
  }
}

  .like-button {                /* いいねボタン */
      align-items: center;
      cursor: pointer;
      user-select: none;
      font-size: 1.5em;
      color: #999;               /* 押していないときの灰色 */
      transition: color 0.2s ease;
      display: inline-flex;;
      justify-content: flex-end;
    }
  @media (max-width: 767px) {
    .like-button {
    font-size: 15px;
    }
  }

    /* ハートマーク（♡／♥）の部分 */
  .like-button .heart {
    margin-right: 0.4em;
    transition: transform 0.2s ease;
    }

    /* 押された状態（liked）※カウントが1以上のとき適用 */
   .like-button.liked {
    color: #e63946;            /* 赤色など、お好きな色に */
    }
  .like-button.liked .heart {
    transform: scale(1.2);     /* 軽くアニメーション */
    }

    /* カウント数のスタイル */
  .like-button .count {
     font-size: 0.9em;
     color: #555;
    }
  
 .site-header {
  font-family: "ヒラギノ明朝", "ProN", sans-serif;    
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  z-index: 1000;
  box-sizing: border-box;
}

  @media (max-width: 767px) {
  .site-header {
  height:50px;
  padding: 0 10px;
  }
}

.logo {
  padding-left:20px;
  font-size: 32px;
  font-weight: 700;
  color: #f00000; 
  text-decoration: none;
}

.logo::before{
  content:"札幌ラーメン さっぽら～";
}
@media (max-width: 767px) {
  .logo {
  padding-left:1px;  
  font-size: 16px;
  }
}

.logo:hover {
  background: linear-gradient(to right,#e6000088,#e2e60660,#ff000071,#00994560,#0068b7a4,#1d218877,#9207847c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}


.subLogo{
  display: flex;
  align-items: center;  
  font-size: 25px;
  font-weight: 600;
}

.subLogo a:hover {
  color: #f00014; 
}

.subLogo a{
  padding-right:20px;
  padding-left: 25px;
  text-decoration: none;
  color: #333333;  
}

.subLogo .home::before{
  content:"HOME";
}

.subLogo .about::before{
  content:"ABOUT";
}

@media (max-width: 767px) {
  .subLogo a{
  padding-right: 1px;
  padding-left:5px;
  font-size: 14px;
  }
}

.wrapper {
  position: fixed;
  display: flex;
  bottom:20px;
  right:20px;
  align-items: center;     /* 縦方向中央 */
  justify-content: center;
  z-index: 100;
}

.pageIcon{
  display: flex;
  align-items: center; /* ← これが重要 */
  cursor: pointer;
  border-radius: 50%;                 /* 角丸指定 */
  width: 60px;                       /* 幅指定 */
  height: 60px;                    
  background-color: rgb(255, 0, 0,0.3);
  margin-left: 20px;
  text-decoration: none; 
}

 @media (max-width: 767px) {
  .pageIcon {
  margin-left: 8px;
  width: 42px; 
  height: 42px;
  }
}

 .pageIcon:hover {
    transform: scale(1.05);
  }

.topFont {
    margin: 0 auto;
    font-family: "ヒラギノ明朝", "ProN", sans-serif;
    font-weight: bold;
    font-size: 2.0em;      
    color: #ffffff;
    margin-bottom:6px;
}

.topFont::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-left: 3px solid white; 
  border-top: 3px solid white;
  transform: rotate(45deg); /*L字になった線を45度回転*/
}
@media (max-width: 767px) {
  .topFont {
    margin-bottom:12px;
}
  .topFont::before {
  width: 8px; 
  height: 8px;
  }
}

 .numberFont {
    margin: 0 auto;
    font-family: "ヒラギノ明朝", "ProN", sans-serif;
    font-weight: bold;
    font-size: 1.6em;      
    color: #ffffff;   
    text-decoration: none; 
}
 
@media (max-width: 767px) {
  .numberFont {
  font-size: 14px;
  }
}

  iframe {
    width: 100%;
    height: 800px;
    border: none;
    padding-top:20px;
    display: block;
    margin: 0 auto;
  }

  @media (max-width: 600px) {
    iframe{
      height: 600px; /* スマホ用に高さをちょっと増やす */
    }
  }

.footer-container{
  display: flex;   
  position: relative;
  flex-direction: column;    
  align-items: left;
}

.footer-box {
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 10px;             /* アイコン間の間隔 */
  padding:10px; 
  margin:10px;
  align-items:flex-start;
  text-align: left;
  margin-top:30px;
  padding-left:50px;
  }

.footer-link{
  padding-left:20px;
  font-size:25px;
  font-weight:100;
  font-family: "Arial Black","ヒラギノ角ゴ ProN", sans-serif;  
  text-decoration: none;
  color:#000000be;
}

  @media (max-width: 600px) {
.footer-box{
  padding-left:10px;
  padding-top:15px;  
  }

.footer-link{
  font-size:16px;  
  padding-left:0px;  
}
}

 /*-----------------------*/

.gallery-article {
    padding:40px 0 60px 0;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 20px;
    width: 740px;  
    height: 270px;    
    margin: 0 auto;
    z-index: 1;
  }

  @media (max-width: 767px) {
  .gallery-article {
    padding:15px 0 30px 0;
    z-index:1;            
    gap: 3px; 
    width: 95%;
    height: 130px;     
  }
}

  .card-article {
    display:flex;
    z-index: 1;
    border-radius: 0.2em;
    font-family: "游ゴシック", "Yu Gothic", sans-serif;        
    overflow: hidden;
    text-align: left;
    transition: transform 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: #333;
    position:relative;
    background-color: white;
  }

  .card-article:hover {
    transform: scale(1.01);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  }

  .card-article img {
    width: 350px;
    height: 100%;
    object-fit: cover;
    display: block;
  }

   .card-article-title {
    display:block;    
    font-family: "ヒラギノ明朝", "ProN", sans-serif;        
    line-height: 1.3;   /*段落幅*/
    padding: 20px 22px;
    font-weight: bold;
    font-size: 27px;
  }

  .card-article-comment{
    line-height: 1.3;   /*段落幅*/
    font-weight: 430;
    font-size: 20px;
    padding:15px;
  }

    @media (max-width: 767px) {
    .card-article img {
      width: 160px;    
    }

    .card-article-title {
    font-size: 14px;
    padding: 7px;
    }

      .card-article-comment{
      font-size: 10px;  
      padding:4px;
    }
  }