html{
  font-family: 'Noto Sans JP', sans-serif;
  }
  .pop{
    font-family: 'poppins', sans-serif;
  }
  .container{
   /* background-color: #8585bd; */
    width: 90%;
    max-width: 1120px;
    margin:0 auto;
    position:relative;
  }
  .flex{
    /* background-color: red; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap ;
    align-items: center;
    
  }
   /* ヘッダー */
   header{
    /* background-color: aqua; */
     padding:27px 0;
   }
  .company_neme{
    /* background-color: #ffffff; */
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.04rem;
  }
  div a.company_neme span{
    color:#000080
  }
  /* メニューの文字の設定 */
  .header_manu li {
    /* background-color: bisque; */
    margin-left: 40px ;
  }
  .header_manu  li a{
    transition:.3s;
  }
  .header_manu  li a:hover{
    color : #8585bd;
    
  }

  @media only screen and (max-width:768px){
    header .container{
      justify-content: center;
    }
    .header_manu li {
    margin: 20px 16px 0 16px ;
    }    
  }

  /* メイン  */
      /* メインの画像 */
  #hero{
    background-image: url(../images/kabayaki.JPG);
    background-position:center;
    background-size:cover;
    height:540px;
    border-radius:30px;/* 角を丸くする */
    display: flex;
    align-items: center;
    margin-bottom:90px;
    overflow: hidden;
      }
      /* メイン黒いフイルム */
  #hero::before{
    content: '';
    width: 100%; 
    height: 100%;
    background-color:#000000;
    position:absolute;
    top: 0;
    left: 0;
    opacity:0.2;
    z-index: 1; 
    }
    .hero_inner{
    z-index: 2;
    color:#ffffff;
   width: 100%;
   text-align:center;
      }
   .hero_inner p{
   font-size:20px;
   font-weight: 700;
   margin-bottom:16px;
    }
.hero_inner h1{
  font-size:  32px;
  font-weight: 700;
  margin-bottom: 30px;
}

@media only screen and (max-width:768px){
#hero{height:460px;}

.hero_inner p{ font-size:18px; }
.hero_inner h1{ font-size: 23px;}

  }

/* コンセプト */
#Aboutus{
   margin-bottom: 120px;  
}
.title{
  font-size: 40px;
  font-weight: 500;
  color: #000080;
  margin-bottom: 40px;
}
#Aboutus h3{
   font-size: 50px;
   font-weight:700;
   margin-bottom: 60px;
}
.column-2{
  width:48%;
}
.text{
  line-height: 2; 
  font-size:20px;
}
.Aboutus-img{
    background-image: url(../images/unagi.jpg);
    background-position:center;
    background-size:cover;
    height:340px;
    border-radius:20px;
    transition: 0.8s;

}

.Aboutus-img:hover{
  transform: scale(1.1,1.1);
  opacity: 0.6;
 
}

/* 背景のダンシング文字 */
.heading{
font-family: 'Dancing Script', cursive;
font-size: 200px;
font-weight: 700;
color:#000080; 
opacity: 0.1;
position:absolute; 
top: 0;
right: 0;
/* background-color: aqua; */
transform:translateY(-30%);
z-index:-1;  
}
@media screen and (max-width:768px){
  .heading{
font-size: 5rem;
transform:translateY(-80%);
  }
  
}





@media only screen and (max-width:768px){
 #Aboutus h3{font-size: 24px;line-height:1.5;}
 .column-2{
  width:100%;
}
.text{
  line-height: 1.7; 
  font-size:15px;
}
}
/* サービス */
#service{
margin-bottom: 120px;
}
.service_inner{
  margin-bottom: 40px;
  position:relative;
}
.column-40{
width:40%}
.column-55{
  width:55%
}
#service img{
  border-radius: 20px;
   transition: 0.5s;
}
#service img:hover{
  opacity: 0.8;
  transform: scale(1.1,1.1);
 
}
#service h3{
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 24px;
}

@media only screen and (max-width:768px ){
.column-40{width:100%}
.column-55{  width:100%}
#service h3{
  font-size: 24px;
  margin-top:15px;
 
}

  
}
/* カンパニー */
#company{
  margin-bottom: 100px;
}
#company dl{
  max-width: 900px;
  margin-left: 15%;
 }
 #company dt{
   width: 30%;
   padding: 48px 0;
   font-weight: 500;
   border-bottom: solid 1px  #000080 ;


 }
 #company dd{
   width :70%;
   padding: 48px 0;
   border-bottom: solid 1px  #000080;
 }

 @media only screen and (max-width:768px){
    font-size:15px;
 }
 /* ボトム */
 .colum-a{
  background-image: url(../images/店舗外観.jpg);
    background-position:center;
    background-size:cover;
    width:24%;
    height:270px;
    border-radius:20px;
    transition: 0.8s;
 }
 .colum-a:hover{
  transform: scale(1.1,1.1);
  opacity: 0.7;
 }
 .colum-b{
  background-image: url(../images/国産鰻宣言.PNG);
    background-position:center;
    background-size:cover;
    width:24%;
    height:270px;
    border-radius:20px;
    transition: 0.8s;
 }
 .colum-b:hover{
  transform: scale(1.1,1.1);
  opacity: 0.7;
 }
  .colum-c{
  background-image: url(../images/鰻弁当.jpg);
    background-position:center;
    background-size:cover;
    width:24%;
    height:270px;
    border-radius:20px;
    transition: 0.8s;
 }
 .colum-c:hover{
  transform: scale(1.1,1.1);
  opacity: 0.7;
 }
 .colum-d{
  background-image: url(../images/鰻商品画像.JPG);
    background-position:center;
    background-size:cover;
    width:24%;
    height:270px;
    border-radius:20px;
    cursor: pointer;
    transition: 0.8s;
 }
 .colum-d:hover{
  transform: scale(1.1,1.1);
  opacity: 0.7;
 }

 .hover{
    cursor: pointer;
}
.hover:hover{
    transform:scale(1.2, 1.2);
    opacity: 0.7;
    transition: 0.3s;
}

 @media only screen and (max-width:768px){
  .colum-a, .colum-b, .colum-c, .colum-d{
    width:48%;
    height:140px;
    margin: 1%;
  }
 }

 /* フッター */
 footer{
  text-align: center;
  margin: 90px 0;
 }

 .copyright{
  font-size: 12px;
  margin-top: 40px;
 }


/* youtube */
#YouTube {
  margin-bottom: 120px;
}

/* ★修正点★ .flex クラスのスタイルを確認または追加 */
.youtubeflex {
  display: flex;
  justify-content: space-between; /* 要素間に均等なスペースを配置 */
  flex-wrap: wrap; /* 必要に応じて折り返す */
  align-items: flex-start; /* 上揃えにするか、必要に応じてcenter/stretchなど調整 */
  gap: 2%; /* ★追加★ 要素間のギャップを設定（flexboxのgapプロパティ） */
}

.youtube-box {
  /* width: 30%; から変更 */
  /* gapプロパティを使用する場合はcalc()で幅を調整すると良い */
  width: calc((100% - 4%)/3); /* 2%のgapが2箇所あるため4%を引く */
  aspect-ratio: 16 / 9; /* YouTube動画の縦横比 */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, opacity 0.3s;
  display: block; /* aタグをブロック要素として扱うため */
  text-decoration: none; /* aタグの下線を消す */
  color: inherit; /* aタグの文字色を親から継承 */
  cursor: pointer; /* クリック可能であることを示すカーソル */
  /* margin-right: 2%; /* gapプロパティを使わない場合はこのように余白を設定 */
  /* &:nth-child(3n) { margin-right: 0; } /* 3つ目の要素の右マージンをなくす */
}

/* iframeのスタイル調整（YouTube埋め込みコード内のiframeに適用） */
.youtube-box iframe {
  width: 100%;
  height: 100%;
  border: none; /* iframeのデフォルトの枠線を消す */
  border-radius: 12px; /* 親要素の角丸に合わせる */
  pointer-events: none; /* iframeのクリックイベントを無効にする */
}

.youtube-box:hover {
  transform: scale(1.03);
  opacity: 0.85;
}

/* レスポンシブ対応 */
@media only screen and (max-width: 768px) {
  /* .youtube-wrapper はHTMLに存在しないため削除しました */
  /* gap: 20px; は不要です。flexコンテナのgapで全体を制御します */
  .youtube-box {
    width: 100%; /* スマホなど小さい画面では1列表示 */
    margin-bottom: 20px; /* スマホ表示時に各動画の下に余白を追加 */
  }
}