/* Custom colors based on Cosmo Oil logo */
:root {
    --color-cosmo-red: #ED4E37; /* A vibrant red/orange from the logo */
    --color-cosmo-blue: #003399; /* A deep blue from the logo */
    --color-cosmo-green: #009966; /* A teal/green from the logo */
    --color-text-dark: #333333; /* Dark gray for body text */
    --color-text-light: #666666; /* Lighter gray for secondary text */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f5; /* Slightly darker light gray background */
    color: var(--color-text-dark);
    min-height: 100vh; /* Ensure body takes full viewport height */
    display: flex;
    flex-direction: column;
}

/* Tailwind CSS custom configuration to use variables */
.tailwind-config {
    display: none; /* Hide this element, it's just for Tailwind config */
}
main {
    flex-grow: 1; /* Allow main content to grow and push footer down */
}
.orijinaru{
    text-shadow: 2px 2px 2px black;
}
.logo{
    width:300px;
}
.icon{
    margin: 0 auto 20px auto;
    width:100px;
}

/* Initially off-screen to the left */
#main-nav {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}
/* When menu is open, slide it into view */
#main-nav.open {
    transform: translateX(0);
}

/* Overlay for when the mobile menu is open */
#mobile-menu-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40; /* Below the menu (z-50) */
}
.title-container {
    /* バッジとテキストを横並びにする */
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    padding-bottom: 5px; /* 下線との隙間 */
    margin-top: 40px;
}

/* --- 1. 赤い円形バッジのスタイル --- */
.badge {
    /* 外側の赤い円のスタイル */
    width: 60px;
    height: 60px;
    background-color: var(--color-cosmo-blue); /* 赤色 */
    border-radius: 50%; /* 円形にする */
    margin-right: 10px;
    display: flex;
    flex-direction: column; /* 縦に配置するため */
    justify-content: center; /* 垂直方向の中央揃え */
    align-items: center; /* 水平方向の中央揃え */
    position: relative;
    /* 1の周りの白い線に見える部分の再現（オプション） */
    box-shadow: 0 0 0 2px white; 
}

.badge-text {
    /* 「お」と「得」の文字スタイル */
    color: #fff; /* 白色 */
    font-size: 12px;
    line-height: 1.2;
    font-weight: bold;
    /* 「お」を少し黄色く見せる工夫 */
    position: absolute;
    top: 7px;
    left: 18px;
    color: #ffc107; /* 黄色 */
}

.number {
    /* 「1」の文字スタイル */
    color: #ffc107; /* 黄色 */
    font-size: 30px;
    font-weight: 900; /* 非常に太い */
    line-height: 1;
    position: relative;
    top: 5px; /* 位置調整 */
    z-index: 1;
}


/* --- 2. タイトルテキストのスタイル --- */
.title-text {
    font-size: 28px;
    font-weight: bold;
    color: #333; /* 濃い文字色 */
    margin: 0; /* h2のデフォルトマージンをリセット */
    white-space: nowrap; /* テキストが折り返さないようにする */
}


/* --- 3. 下線のスタイル --- */
.red-line {
    width: 100%; /* 幅いっぱい */
    height: 3px; /* 線の太さ */
    background-color: var(--color-cosmo-blue); /* 赤色 */
    /* 下線がバッジを横切るように見せるための位置調整（タイトル部分の下線のみにする場合は不要） */
    position: relative;
    top: -15px; /* .title-containerのpadding-bottomで調整 */
    margin-bottom: 20px;
}
.big{
	font-size: 20px;
	font-weight: bold;
}

.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px var(--color-cosmo-blue);
}
.box1 p {
    margin: 0; 
    padding: 0;
}
.contact-box {
    display: flex; /* ラベルとコンテンツを横並びにする */
    width: 100%; /* 例として幅を設定 */
    border: 1px solid #ccc; /* 薄い枠線 */
    /* 背景のグラデーションや影を再現 */
    background: linear-gradient(to bottom, #f9f9f9, #eaeaea);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- 1. 左側の赤い帯とラベル --- */
.contact-label {
    background-color: var(--color-cosmo-blue); /* 濃い赤 */
    color: white;
    padding: 15px 10px 15px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    width: 60px; /* 赤い帯の幅を調整 */
    position: relative;
    /* 垂直方向の位置調整 */
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl; /* 縦書き風に（画像は横書きですが、再現性のため） */
}

/* 「お問い合わせ」の吹き出しの矢印（疑似要素で三角形を作成） */
.contact-label::after {
    content: "";
    position: absolute;
    right: -15px; /* ラベルの右外側へ */
    top: 50%;
    transform: translateY(-50%); /* 垂直方向中央 */
    /* 三角形を作成 */
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid var(--color-cosmo-blue); /* 赤い三角形 */
}

/* --- 2. 中央のコンテンツエリア --- */
.contact-content {
    flex-grow: 1; /* 残りのスペースを埋める */
    padding: 10px 20px;
}

/* 上部のテキスト */
.contact-info-top {
    font-size: 14px;
    margin: 0 0 10px 0;
}
.red-text {
    color: var(--color-cosmo-blue); /* 赤い文字 */
    font-weight: bold;
    font-size: 20px;
}

/* --- 3. 電話番号と部署名ラベル --- */
.phone-numbers {
    display: flex;
    align-items: center;
    gap: 15px; /* 各要素間の隙間 */
}

/* 部署名ラベル（大分営業部、宮崎営業部） */
.dept-label {
    font-size: 12px;
    color: #555;
    background-color: #e8f0ff; /* 薄い茶系の背景色 */
    border: 1px solid var(--color-cosmo-blue); /* 薄い枠線 */
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
}

/* 電話番号 */
.phone-number {
    font-size: 28px;
    font-weight: 900; /* 非常に太い */
    color: #000;
}

.product-block {
    /* 画像エリアとコンテンツエリアを横並びにする */
    display: flex;
    max-width: 800px; /* 全体の最大幅を設定 (適宜調整) */
    margin: 20px auto; /* ページ中央に配置する際の例 */
}

/* --- 1. 画像エリアのスタイル --- */
.product-image {
    width: 35%; /* 左側の画像が占める幅 */
    padding: 10px;
    box-sizing: border-box; /* paddingを幅に含める */
}

.product-image img {
    /* 画像の枠線は、画像自体でなく、親要素の枠線に見えますが、ここではimgに設定 */
    /* 実際は画像がboxの領域を占めるように調整が必要です */
}


/* --- 2. テキストコンテンツエリアのスタイル --- */
.product-content {
    width: 65%; /* 右側のコンテンツが占める幅 */
    padding-left: 15px; /* 画像との間に少し隙間をあける */
}

/* タイトルエリア */
.product-title {
    /* 背景色の再現 (薄いオレンジ/肌色) */
    background-color: #e8f0ff; 
    color: #333;
    font-size: 20px;
    padding: 5px 10px; /* 内側の余白 */
    margin: 0 0 15px 0; /* 上下のマージン */
    font-weight: bold;
    line-height: 1.5; /* タイトルの高さ調整 */
}

/* 説明文 */
.product-description {
    font-size: 14px;
    line-height: 1.8; /* 行の高さ */
    color: #555;
    margin-bottom: 20px;
}

/* リンクエリア */
.product-link-area {
    text-align: right; /* リンクを右寄せにする */
}

.product-link {
    color: #007bff; /* 青色のリンク色 */
    text-decoration: none; /* 下線をなくす場合はnone */
    font-size: 14px;
}

.product-link:hover {
    text-decoration: underline; /* ホバーで下線を表示 */
}
.contact-label-img{
	background-color: var(--color-cosmo-blue); /* 濃い赤 */
    color: white;
    padding: 15px 10px 15px 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    width: 30%; /* 赤い帯の幅を調整 */
    position: relative;
    /* 垂直方向の位置調整 */
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl; /* 縦書き風に（画像は横書きですが、再現性のため） */
}

/* 「お問い合わせ」の吹き出しの矢印（疑似要素で三角形を作成） */
.contact-label-img::after {
    content: "";
    position: absolute;
    right: -15px; /* ラベルの右外側へ */
    top: 50%;
    transform: translateY(-50%); /* 垂直方向中央 */
    /* 三角形を作成 */
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid var(--color-cosmo-blue); /* 赤い三角形 */
}

.topTitle{
	color: #003399; 
	font-weight: 900;
	font-size: 5vw;
	font-size: clamp(25px, 5vw, 80px);
	-webkit-text-stroke: 1vw white;
	text-stroke: 1vw white;
	paint-order: stroke;

}
.topTitleSub{
	color: #003399; 
	font-weight: 600;
	font-size: 2vw;
	font-size: clamp(15px, 2vw, 25px);
	-webkit-text-stroke: 0.8vw white;
	text-stroke: 0.8vw white;
	paint-order: stroke;
}
.topTitleSub2{
	color: #003399; 
	font-weight: 400;
	font-size: clamp(12px, 1.8vw, 20px);
	-webkit-text-stroke: 0.8vw white;
	text-stroke: 0.8vw white;
	paint-order: stroke;
}
.postImg{
	width:100px;
}