/********************************
h-business様公式HP
 制作：Namishi@Namishi@SuddenPleasureInfinities.
 製作開始 2024.7.12 -
********************************/

/********************************
注意事項
①bootstrap4系使用。
②styleは別書にすること。
④メディアクエリブレイクポイント
@media screen and (min-width: 480px) { }
PC first 対応。
********************************/
/********************************
base.css
出力部分に係る共通事案
********************************/

/*
色設定
*/

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --background-color: #ffffff;
  --text-color: #333333;
}

a:any-link{
	color:#fff;
}

.liner{
	font-size:3em;
margin-top:30px;	
}

.liner3{
	font-size:4em;
}

p {
    margin: 0;
    padding: 0;
}


.liner2{
	margin-bottom:20px;
}


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

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;	
}

.header {
    height: 100px; /* ヘッダーの高さ */
  background-color: rgba(0, 0, 0, 0.8); 
    color: white;
    position: absolute; /* 絶対位置指定 */
    top: 0; /* 上部に配置 */
    left: 0; /* 左部に配置 */
    width: 100%; /* 幅を100%に設定 */
    display: flex;
    align-items: center;
    justify-content: right;
    z-index: 1; /* 他の要素より前面に表示 */
}

nav ul {
    list-style-type: none;
    display: flex;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

.content {
    height: 100vh; /* 背景をスクリーン全体に設定 */
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0; /* ヘッダーの後ろに配置 */
	margin:0;
	padding:0;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* 半透明のオーバーレイ */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左寄せに変更 */
    justify-content: flex-end; /* 下寄せに変更 */
    color: white;
    text-align: left;
    padding: 20px; /* 余白を加えて見やすく */
}

.works1 {
    display: flex;
    justify-content: space-between;
}

.card {
    width: 30%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
}

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

.card-content {
    padding: 10px;
}

.date {
    font-size: 0.9em;
    color: #666;
}

.title {
    font-size: 1.2em;
    margin: 5px 0;
}

.hashtags {
    font-size: 0.9em;
    color: #007BFF; /* ハッシュタグカラー */
}

.menu-card {
    width: 300px; /* カードの幅を指定 */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: center;
	height:100%;
}

.menu-card-img {
    width: 100%;
    height: auto;
}

.menu-content {
    padding: 10px;
}

.menu-text {
    width: 80%;
    margin: 0 auto;
    font-size: 1em;
}

.header2 {
    height: 100px; /* ヘッダーの高さ */
  background-color: rgba(0, 0, 0, 1); 
    color: white;
    display: flex;
    align-items: center;
    justify-content: right;
}

.content2 {
    height: calc(100vh - 100px); /* 背景をスクリーン全体に設定 */
}

.card-header1{
	border-bottom:2px solid #ccc;
}

.black{
	color:#000;
}


.arrow2 {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 1.2em;
}

.flow1{
	background-color: #4f5050;
	color:#fff;
}

.flow_container {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央寄せに変更 */
    margin-bottom: 20px;
}

.flow_card {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    width: 150px;
    margin: 0 10px;
	color:#000;
	font-size:10pt;
}

.flow_image {
    width: 100px;  /* 画像のサイズ */
    height: auto;  /* 比率を保持 */
    margin-bottom: 10px;  /* タイトルとのスペース */
}

.flow_arrow {
    font-size: 24px;
    margin: 0 10px;
}

.submenu1{
	margin-top:30px;
}

ul.submenu2{
	margin:0;
	padding:0;
	width:100%;
	list-style-type:none;
}


ul.submenu2 li{
	display: block;
	width:100%;
	height:100px;
	float:left;
	line-height:9999px;
}

li.submenu3_1{
	background: url("../img/submenu_off_01.png") no-repeat;
background-size: contain;	
}

li.submenu3_2{
	background: url("../img/submenu_off_02.png") no-repeat;
background-size: contain;
}

li.submenu3_3{
	background: url("../img/submenu_off_03.png") no-repeat;
background-size: contain;
}

li.submenu3_1:hover{
	background: url("../img/submenu_on_01.png") no-repeat;
background-size: contain;	
}

li.submenu3_2:hover{
	background: url("../img/submenu_on_02.png") no-repeat;
background-size: contain;
}

li.submenu3_3:hover{
	background: url("../img/submenu_on_03.png") no-repeat;
background-size: contain;
}

.submenu4{
	background-color: #000218;
		padding:20px;
}

.arrow {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 1.5em;
    width: 20%; /* 残りの20%の幅 */
    text-align: center; /* 矢印を中央に配置 */
 
}

.submenu5{
	width:100%;
	display: flex;
}

.submenu6{
	width:calc(100% - 50px);
	float:left;
}
.submenu7{
	width:50px;
	float:left;
}

.menu-card.outputnone {
    display: none;  /* outputnoneクラスも隠しておく */
}

.contact2{
	width:100%;
background: url("../img/contact1.jpg") no-repeat;
background-size: cover;
}

.contact_card {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    width: 350px;
    margin: 0 10px;
	color:#000;
	font-size:10pt;
}

.contact3{
	padding:30px;
}

.button1{
	margin-top:20px;
	margin-bottom:20px;
	display: block;
	float:left;
	width:100%;
}
.button2{
	padding-top:20px;
	padding-bottom:20px;
}

footer{
	margin-top:30px;
}

.footer1{
	list-style-type:none;
}

.footer2{
	width:60%;
}

.mt30{
	margin-top:30px;
}

.eyechach2 {
    position: relative; /* 親要素の基準位置を設定 */
    height: 100%; /* 必要に応じて高さを設定 */
}

.eyechach1 {
    position: absolute; /* 絶対位置を設定 */
    left: 0; /* 左に配置 */
    bottom: 0; /* 下に配置 */
    padding: 10px; /* 適宜パディングを追加 */
}

nav {
 
}

nav ul {
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0;
    margin: 0;
    display: flex; /* 横並びにする */
flex-wrap:nowrap
}


nav ul li {
    position: relative; /* ドロップダウン位置調整のため */
    margin-right: 20px; /* 各項目の間隔 */
	font-size: 10pt;
	
}

nav ul li a {
    text-decoration: none; /* 下線を削除 */
    color: #333; /* テキストカラー */
}

nav ul li:hover > a {
    background-color: #f0f0f0; /* ホバー時の背景色 */
	color:#000;
}

nav .dropdown {
    display: none; /* 初期状態では非表示 */
    position: absolute; /* ドロップダウンの位置を調整 */
    top: 100%; /* 親要素の下に配置 */
    left: 0;
    background-color: #000; /* ドロップダウンの背景色 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 陰影 */
    z-index: 1000; /* 最前面に表示 */
	padding:20px;
	width:200px;
}

nav ul li:hover .dropdown {
    display: block; /* ホバー時に表示 */
}

nav .dropdown li {
    margin: 0; /* マージンリセット */
}

.mod1:any-link{
	color:#bbb;
}

.mod1:hover{
	color:#000;
}

.mod2:any-link{
	color:#777;
	text-decoration:none;
}

.mod2:hover{
	color:#000;
	text-decoration:none;
}





.dropdown li{
	padding-top:10px;
}
.logo{
	height: 200px; /* ヘッダーの高さ */
	background-color: rgba(255, 255, 255, 0.8); 
    color: white;
    position: absolute; /* 絶対位置指定 */
    top: 0; /* 上部に配置 */
    left: 0; /* 左部に配置 */
    width: 200px; /* 幅を100%に設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000; /* 他の要素より前面に表示 */
}