/* ベーシックなリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ナビゲーションバーのスタイル */
/* Ensure dropdown menu is hidden by default */
/* New navigation bar styles */
.navbar-table {
    width: 100%;
    background-color: #333;
    border-collapse: collapse; /* Remove gaps between cells */
    text-align: center;
}

.navbar-table td {
	width: 25%;
}

.navbar-table a {
    display: block;
    color: #fff;
    text-decoration: none;
}

.navbar-table a:hover {
    background-color: #555;
}
/* Ensure dropdown menu is hidden by default */
.navbar-table .dropdown-menu {
    display: none;
    position: absolute;
    background-color: #333;
    width: 25%; /* Match parent width */
    top: 100%; /* Position below the parent */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Display dropdown menu on hover */
.navbar-table td:hover .dropdown-menu {
    display: block;
}

/* Dropdown menu item styling */
.navbar-table .dropdown-menu li {
    height: 100%; /* Match parent height */
    text-align: center;
}

.navbar-table .dropdown-menu a {
    display: block;
    padding: 14px 0;
    color: #fff;
    text-decoration: none;
}




nav ul {
  list-style: none;
  display: flex;
  background-color: #333;
  margin: 1vw;
}
nav li {
  flex: 1;
}
nav a {
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
nav a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}
nav a:hover {
  background-color: #555;
}
nav {
	position: fixed;
	width: 100%;
	z-index: 10000;
	font-size:2vw;
	height:auto;
}
#container {
  padding-top: 150px;
}

/* コンテンツのスタイル */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}
@media (min-width: 1024px) {
    .product-list {
       width: 75%;
    }
}
h1, h2 {
  margin-bottom: 20px;
}
p, label, input, textarea {
  margin-bottom: 10px;
  width: 100%;
}
/* フォームのスタイル */
form input, form textarea {
  padding: 10px;
  border: 1px solid #ccc;
}
form input[type="submit"] {
	width: auto;
	background-color: #333;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 1.5rem;
}
form input[type="submit"]:hover {
  background-color: #555;
}
/* 動画ギャラリーのスタイル */
.video-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.video-item {
  flex: 1 1 calc(50% - 20px);
}
.video-item iframe {
  width: 100%;
  height: auto;
}

/* TOPページ専用の背景設定 */
body.top-page {
    background-image: url('images/top-background.jpg'); /* TOPページ専用の背景画像 */
    background-size: cover; /* 画面全体にフィットさせる */
    background-position: center center; /* 中央に配置 */
    background-attachment: fixed; /* 背景を固定 */
    background-repeat: no-repeat; /* 繰り返しを防止 */
}
/* ホームページ専用スタイル */
.home-container {
	text-align: center;
    padding-top: 20vw;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* ロゴのスタイル */
.logo {
    max-width: 70%;
    height: auto;
    opacity: 0.6; /* 例：opacity: 0.9;（10%透過）、opacity: 0.5;（50%透過） */
}



/* 会社名のスタイル */
.company-name {
    margin-top: 4vw; /* ロゴとの間隔を調整 */
    font-size: 7vw; /* フォントサイズを調整 */
    color: #ffffff; /* 文字色を白に設定（背景画像に合わせて変更してください） */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* テキストに影をつけて視認性を向上 */
}

/* 商品一覧ページのスタイル */
/* 商品セクションのマージンとパディング */
.product-section {
    margin-bottom: 40px; /* 各セクションの間隔を調整 */
}
/* 一番上の画像のスタイル */
.top-image {
    width: 100%; /* 画像の幅を調整 */
    height: auto;
    display: block;
    margin: 0 auto;
}
/* セクションタイトルのスタイル */
.image-title {
    font-size: 2rem;
    color: #fff;
    margin: 0px auto 0px 0px; /* 左右のマージンを auto に設定 */
    text-align: left; /* 左寄せ */
    text-decoration:underline;
    width: 95%; /* 一番上の画像と同じ幅に設定 */
}
/* 画像を横並びにするコンテナ */
.image-row {
    display: flex;
    justify-content: space-between;
    width: 100%; /* 一番上の画像と同じ幅に設定 */
    margin: 0 auto; /* 横並び全体を中央寄せ */
}
/* 画像を横並びにするコンテナ */
.image-row2 {
    display: flex;
    justify-content: space-between;
    width: 100%; /* 一番上の画像と同じ幅に設定 */
    margin: 0 auto; /* 横並び全体を中央寄せ */
}
.image-row2 .image-container{
	text-align:center;
    flex: 1; /* 各画像コンテナが均等に幅を取る */
    margin: 0 10px; /* 画像同士の間に余白を追加 */
    text-align: center; /* 画像を中央揃え */
}
.image-row2 .image-container img {
    width: 100%; /* 各コンテナの幅いっぱいに画像を表示 */
    height: auto; /* 画像の縦横比を維持 */
}
/* 商品画像のスタイル */
.product-image {
    width: 95%; /* 横並びで2つ表示するために幅を調整 */
    height: auto;
}
/* 商品画像のスタイル */
.TopPicks .product-image {
    width: 100%; /* 横並びで2つ表示するために幅を調整 */
    height: auto;
}

div{
	
}
.image-row .image-container{
	flex-grow:1;
}


/* セクション0のスタイル */
.product-section0{
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.product-section0 .image-title {
    font-size: 2.5vw;
    color: #fff;
    margin: 0px auto 0px 0px;
    text-align: left;
    text-decoration: underline;
    width: 95%;
	margin-bottom: 1rem;
}
.product-section0 .top-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
/*********ここまで**********/

/* セクション1のスタイル */
.product-section1{
	margin-bottom: 2rem;
}
.product-section1 .image-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}
.product-section1 .image-container .image-title {
    font-size: 2rem;
    color: #fff;
    margin: 0px auto 0px 0px;
    text-align: left;
    text-decoration: underline;
    width: 95%;
}
.product-section1 .image-container .image-title2 {
    font-size: 2rem;
	color: #ffffff00;;
    margin: 0px auto 0px 0px;
    text-align: left;
    text-decoration: underline;
    width: 95%;
}
.product-section1 .image-container .product-image {
    width: 95%;
    height: auto;
}

/*********ここまで**********/

/* セクション8のスタイル */
.product-section8{
	margin-bottom: 40px;
}
.product-section8 .image-row2{
    display: flex;
    justify-content: space-between;
    width: 100%;
	margin-bottom: 0.5rem;
}
.product-section8 .image-row2 .image-container{
	text-align: center;
    flex: 1;
    margin: 0 0.5rem;
}
/*********ここまで**********/

/* セクション11のスタイル */
.image-column .product-image {
    width: 80%;
    height: auto;
	padding-bottom: 1rem;
}
.image-column .image-container {
	text-align:center;
}
/*********ここまで**********/

/* セクション12のスタイル */
.product-section12 .image-title{
	width:100%;
	margin-bottom:1rem;
}
.product-section12 .image-row {
	margin: 0 0 1rem auto;
}
.product-section12 .image-row .product-image {
    width: 98%;
    height: auto;
}
/*********ここまで**********/

/* セクション13のスタイル */
.product-section13 .image-title{
	width:100%;
	margin-bottom:1rem;
}
.product-section13 .image-row:first-of-type {
	width: 50%;
    text-align: left;
    margin: 0 0 1rem 0;
}
.product-section13 .image-row {
	margin: 0 0 1rem auto;
}
.product-section13 .image-row .product-image {
    width: 98%;
    height: auto;
}
/*********ここまで**********/

/* セクション14のスタイル */
.product-section14{
	margin-bottom:1rem;
}
.product-section14 .image-title{
	width:100%;
	margin-bottom:1rem;
}
.product-section14 .image-row {
	margin: 0 0 1rem auto;
}
.product-section14 .image-row .product-image {
    width: 98%;
    height: auto;
}
.product-section14 .image-container ul {
    list-style-type: none;
    font-size: 2rem;
    color: #fff;
}

/*********ここまで**********/

/* セクション16のスタイル */
.product-section16 .custom-row .custom-block-1 {
    flex: 2;
    box-sizing: border-box;
    text-align: center;
	display: block;
    padding-top: 110px;
    margin-top: -110px;
}

.product-section16 .custom-row .custom-block-2 {
    flex: 3;
    box-sizing: border-box;
}
.product-section16 .custom-row .custom-block-1 h3 {
    font-size: 3rem;
    color: #fff;
    margin-left: 0.5rem;
    margin-bottom: 10px;
    text-decoration: underline;
    color: #fff;
    text-shadow: 1px 1px 0 #ff0000, -1px -1px 0 #ff0000, -1px 1px 0 #ff0000, 1px -1px 0 #ff0000, 0px 1px 0 #ff0000, 0 -1px 0 #ff0000, -1px 0 0 #ff0000, 1px 0 0 #ff0000;
}
.product-section16 .custom-row .custom-block-2 ul {
    font-size: 1.3rem;
    color: #fff;
    text-shadow: 1px 1px 0 #ff0000, -1px -1px 0 #ff0000, -1px 1px 0 #ff0000, 1px -1px 0 #ff0000, 0px 1px 0 #ff0000, 0 -1px 0 #ff0000, -1px 0 0 #ff0000, 1px 0 0 #ff0000;
}
.product-section16 .image-row2{
	margin-bottom:0.7rem;
}
.product-section16 .image-row2 .image-container img {
    width: 90%;
    height: auto;
}
/*********ここまで**********/
/* セクション17のスタイル */
/* product-section17 テーブルのスタイル */
.product-section17 .custom-table {
    height: 100vh; /* 親要素の高さに合わせる */
    background-image: url('images/TopPicks/image4.jpg'); /* テーブルの背景画像 */
    background-size: cover; /* 画像をテーブル全体にフィット */
    background-position: center; /* 中央に配置 */
    border-collapse: collapse; /* セルの隙間をなくす */
    margin: 0 auto; /* テーブルを中央寄せ */
    color: #fff; /* 文字色を白に */
}

.product-section17 .custom-table tr {
    width: 100%;
}

/* 見出し行のスタイル */
.product-section17 .table-header {
    font-size: 3vw; /* 見出しのフォントサイズ */
    padding-top: 2rem;
    padding-right: 2rem;
    padding-left: 2rem;
    text-align: left
}

/* テキスト行のスタイル */
.product-section17 .table-text {
    font-size: 1.5vw; /* テキスト行のフォントサイズ */
    padding: 2em;
	padding-bottom: 0;
	padding-left: 5vw;
    text-align: left;
	vertical-align: top;
	height: 10%;
}
.product-section17 .table-element:first-child {
    word-wrap: break-word; /* テキストが幅を超えそうになったら改行 */
    width: 30%;
    font-size: 3vw;
	padding:3vw;
}
/* リストのスタイル */
.product-section17 .text-list {
    padding: 0;
    margin: 0;
}

.product-section17 .text-list li {
    margin-bottom: 0.5em; /* リスト項目間の余白 */
    font-size: 2vw; /* リスト項目のフォントサイズ */
	text-decoration: underline;
}
.product-section17 .table-element img {
    width: auto; /* 画像の実際のサイズで表示 */
    max-width: 70%; /* 必要に応じて最大幅を設定（親要素の幅を超えないように） */
    height: auto; /* 高さをアスペクト比に合わせて調整 */
    display: block;
	padding: 1vw;
}

.product-section17 .table-element {
    display: inline-block; /* セルが内容にフィットするようにする */
    width: auto; /* セルの幅を画像に合わせる */
    text-align: center; /* 画像を中央揃え */
}

/* 中央の画像を親要素に合わせてリサイズ */
.product-section17 .table-image {
    width: 100%; /* 画像の幅をテーブルの幅に合わせる */
    height: auto; /* 高さをアスペクト比に合わせて自動調整 */
    display: block;
}
.product-section17 .table-element:has(img) {
	width: 20%;
}
.product-section17 .custom-table tr:first-child .table-header {
    height: 10vh; /* 全体の1割の高さ */
	text-decoration: underline;
}
.product-section17 .table-element ul {
	list-style:none;
	text-align: left;
	text-decoration: underline;
	font-size: 1.5vw
}

.product-section17 .table-element:last-child {
    width: 50%; /* 任意の幅に設定 */
	white-space: normal;
}



/*********ここまで**********/


/* 商品2だけ右寄せ */
.image-row .image-container:nth-child(2) .image-title{
	margin: 0px 0px 0px auto;
}
.image-row .image-container:nth-child(2) .product-image{
	margin: 0px 0px 0px auto;
	text-align: right;
	display:flex;
}

body {
    background-image: url('images/background2.jpg'); /* 背景画像のパスを指定 */
    background-size: cover; /* 画面全体に背景画像をフィットさせる */
    background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
    background-position: center center; /* 背景画像を中央に配置 */
    background-attachment: fixed; /* 背景画像を固定 */
}
.product-list {

    margin: 0 auto; /* 左右の中央揃え */
    padding-top: 4vw; /* 上下の余白が必要なら、ここに値を設定 */
}
/* 新しいセクションのスタイル */
.custom-section {
    margin: 40px 0;
}
/* ブロックを横並びに配置 */
.custom-row {
    display: flex;
    justify-content: space-between;
}
/* 2の割合のブロック */
.block-2 {
    flex: 3;
    box-sizing: border-box;
}
/* 4の割合のブロック */
.block-4 {
    flex: 3.5;
    box-sizing: border-box;
}
/* ブロック内のスタイル */
.custom-block h3 {
    font-size: 2vw;
	color:#fff;
	margin-left: 0.5rem;
    margin-bottom: 10px;
	text-decoration: underline;
	text-align: left;
}
.custom-block ul {
	list-style-type: none;
    font-size: 1.5vw;
	color:#fff;
}


h3.section-title{
	font-size:2rem;
	font-weight: normal;
	padding-top:0.5rem;
	color:#fff;
	text-align: center;
	background-image : linear-gradient(to right, #fff 1.8rem, transparent 1.8rem);
	background-size: 2rem 0.15rem;
	background-repeat: repeat-x; 
	background-position: left top;
}

/* コンテナ全体を縦並びにする */
.vertical-image-container {
    display: flex;
    flex-direction: column; /* 縦並びに設定 */
    align-items: center; /* 画像を中央寄せ */
    width: 100%; /* コンテナ幅を100%に設定 */
    max-width: 600px; /* 必要に応じて最大幅を設定 */
    margin: 0 auto; /* コンテナ全体を中央寄せ */
}
/* 画像アイテムのスタイル */
.image-item {
    margin-bottom: 20px; /* 画像同士の間隔を設定 */
    width: 100%; /* 画像をコンテナ幅に合わせる */
}
/* 画像自体のスタイル */
.image-item img {
    width: 100%; /* 画像を親コンテナの幅いっぱいに表示 */
    height: auto; /* アスペクト比を保ちながら高さを自動設定 */
    object-fit: cover; /* 画像がコンテナにきれいにフィットするよう調整 */
}

/* 各ブロック内で画像を縦に並べる */
.image-block {
    display: flex;
    flex-direction: column; /* 画像を縦に並べる */
    gap: 10px; /* 画像間の余白 */
    width: 50%; /* 各ブロックの幅を50%に */
}
/* 画像のスタイル */
.image-block img {
    width: 100%; /* 画像の幅をブロック内でいっぱいに */
    height: auto; /* 画像の高さは自動調整 */
}

/* 作業動画 */
.gallery-section0{
	margin-top: 2rem;
}

.gallery-section0 .image-title {
    font-size: 2.5vw;
    color: #fff;
    text-align: left;
    text-decoration: underline;
    width: 95%;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .gallery-section0 .image-title {
        font-size: 3.5vw;
        margin-top: 3rem;
    }
}

/* 問い合わせフォーム */
.product-list h2{
    font-size: 2.5rem;
    color: #fff;
    margin: 15px auto 0px 0px;
    text-align: left;
    text-decoration: underline;
    width: 95%;
	margin-bottom: 1rem;
}
.product-list label {
	font-size: 1.5rem;
	color: #fff;
}
#contact h2{
	margin-top: 45px;
}
#category {
	font-size: 1.5rem;
}

/* メディアサイズ、タブレット */
@media (min-width: 768px) and (max-width: 1024px) {
    /* コンテナ幅を調整 */
    .product-list {
        width: 90%; /* タブレットサイズに合わせて少し広げる */
        padding: 3rem;
    }
	.product-section1 .image-container .image-title{
		font-size: 3vw;
	}
	.product-section1 .image-container .image-title2{
		font-size: 3vw;
	}
	.custom-block ul{
		font-size: 1.5vw;
	}
	.image-column .product-image{
		width: 100%;
	}

	.product-section {
		margin-bottom: 0;
	}

	.product-section16 .custom-row .custom-block-1 h3 {
		font-size: 4vw;
	}
	.product-section16 .custom-row .custom-block-2 ul {
		font-size: 2vw;
	}

	.product-section14 .image-container ul {
		font-size: 3vw;
	}

	.product-section17 .table-header{
		font-size: 4vw;
	}

	.product-section17 .text-list li{
		font-size: 2.5vw;
	}
}


@media (max-width: 768px) {
	nav{
		font-size: 3vw;
	}
    .product-list {
        width: 90%; /* 他のスタイルで確認 */
    }
	.product-section0 .image-title {
		font-size: 3.5vw;
		margin-top: 3rem;
	}
	.product-section1 .image-container .image-title {
		font-size: 4vw;
	}
	.product-section1 .image-container .image-title2 {
		font-size: 4vw;
	}
	.product-section1 {
		margin-bottom: 1rem;
	}
	.custom-section {
		margin: 3vw 0;
	}
	.product-section{
		margin-bottom: 1rem;
	}
	h3.section-title {
    	font-size: 1.5rem;
	}

	.image-column .product-image{
    	width: 100%;
	}

	.product-list h2 {
    	font-size: 5vw;
	}


	.product-section14 .image-container ul {
		font-size: 3vw;
	}

	.product-section16 .custom-row .custom-block-1 h3 {
		font-size: 4vw;
	}
	.product-section16 .custom-row .custom-block-2 ul {
		font-size: 2vw;
	}

	.product-section17 .custom-table{
		height: auto;
	}
	.product-section17 .table-header {
		font-size: 4vw;
		padding-top: 1rem;
	}
	.product-section17 .table-text {
		padding-top: 1rem;
	}
	.product-section17 .text-list li {
		font-size: 2.5vw;
	}
	.product-section17 .table-element:first-child {
		font-size: 4vw;
	}
	.product-section17 .table-element ul{
		font-size: 2vw;
	}
}

/* ポップアップ表示 */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none; /* 初期表示は非表示 */
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.popup-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.popup-content img {
    width: 100%;
    height: auto;
}

.popup-video {
    display: none; /* 初期表示は非表示 */
    width: 100%;
    height: auto;
    margin-top: 10px;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}




@media (min-width: 1024px) {
	.logo{
		max-width: 70%;
	}
	.home-container{
		padding-top: 13vw;
	}
	.company-name{
		margin-top: 2vw;
    	font-size: 4vw;
	}
}







.video-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between each video */
}

.video-item {
    flex: 1 1 calc(50% - 20px); /* Two videos per row */
}

.video-item video {
    width: 100%;
    height: auto;
}

.video-title {
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    margin-top: 10px;
}






}