) */
.faq-question {
display: block; /* デフォルトのマーカーを消すため */
position: relative;
padding: 20px 50px 20px 60px; /* Qとアイコンの余白を確保 */
font-size: 1.1rem;
font-weight: bold;
color: #0a2a5d; /* メインカラー */
background-color: #f9f9f9;
cursor: pointer;
transition: background-color 0.2s ease;
}
/* デフォルトの▼マーカーを非表示 (Chrome/Safari) */
.faq-question::-webkit-details-marker {
display: none;
}
/* デフォルトの▼マーカーを非表示 (Firefox) */
.faq-question {
list-style: none;
}
.faq-question:hover {
background-color: #f0f0f0;
}
/* Qの疑似要素 */
.faq-question::before {
content: 'Q';
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
font-weight: bold;
color: #0a2a5d;
}
/* 開閉アイコン (+/-) の疑似要素 */
.faq-question::after {
content: '+';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
font-weight: bold;
color: #5c6a17; /* ワインの濃い緑 */
}
/* 開いた状態のアイコン */
.faq-item[open] > .faq-question::after {
content: '−'; /* マイナス記号 */
}
/* 開いた状態の質問の背景色 */
.faq-item[open] > .faq-question {
background-color: #f0f0f0;
}
/* 回答 () */
.faq-answer {
position: relative;
padding: 25px 30px 25px 60px; /* Aの余白を確保 */
background-color: #ffffff;
}
/* Aの疑似要素 */
.faq-answer::before {
content: 'A';
position: absolute;
left: 20px;
top: 15px; /* テキストの上端に合わせる */
font-size: 1.5rem;
font-weight: bold;
color: #5c6a17; /* ワインの濃い緑 */
}
.faq-answer p {
font-size: 1rem;
line-height: 1.7;
color: #333;
margin: 0;
}
/* 回答内のリンク */
.faq-answer a {
color: #0a2a5d;
text-decoration: underline;
}
.faq-answer a:hover {
text-decoration: none;
}
/* --------------------------------
* レスポンシブ対応 (768px以下)
* -------------------------------- */
@media (max-width: 768px) {
.faq-content-section {
padding: 30px 0;
}
.title_h2 {
font-size: 1.8rem;
margin-bottom: 30px;
}
.faq-question {
padding: 15px 45px 15px 50px; /* 少し詰める */
font-size: 1rem;
}
.faq-question::before {
left: 15px;
font-size: 1.3rem;
}
.faq-question::after {
right: 15px;
font-size: 1.3rem;
}
.faq-answer {
padding: 20px 20px 20px 50px; /* 少し詰める */
}
.faq-answer::before {
left: 15px;
top: 20px;
font-size: 1.3rem;
}
}
/* --------------------------------
* H2見出しのアイコン (FAQページ)
* -------------------------------- */
.h2-icon-wrapper {
text-align: center; /* アイコンを中央揃え */
margin-bottom: 12px; /* アイコンと見出しの間の余白 */
}
.h2-icon-wrapper i {
font-size: 2.5rem; /* 40px相当 (サイズはお好みで調整) */
color: #0a2a5d; /* サイトのメインカラー */
opacity: 0.8; /* 少しだけ透明度を落とす */
}
/* --------------------------------
* CSSの調整 (必須)
* -------------------------------- */
/* 1. アイコンの直後にあるH2の上マージンをリセット */
.h2-icon-wrapper + .title_h2 {
margin-top: 0;
}
/* 2. ワインショップセクション (2つ目のH2) の
アイコンラッパーに、セクション間の上部マージンを適用 */
.faq-list + .h2-icon-wrapper {
margin-top: 60px; /* セクション間の余白 */
}
.sec_basic {
padding: 50px 0;
}
/* セクション間の区切り線 */
.sec_basic + .sec_basic {
border-top: 1px solid #eee;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
/* 導入テキスト (中央揃え) */
.pc-text-center {
text-align: center;
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 30px;
}
/* 右揃え (代表取締役) */
.text-right {
text-align: right;
font-weight: bold;
margin-top: 1.5em;
}
/* 2カラムレイアウト */
.row {
display: flex;
gap: 30px;
}
.row .col {
flex: 1;
}
.row .col figure {
margin: 0;
}
.row .col figure img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
.row .col.flex_1 {
flex: 1; /* 約 33% */
min-width: 250px;
}
.row .col.flex_2 {
flex: 2; /* 約 66% */
display: flex;
flex-direction: column;
justify-content: center;
}
.row .col.flex_2 p {
margin-bottom: 1.5em;
}
/* flex_2 の最後のPタグのマージンをリセット */
.row .col.flex_2 p:last-child {
margin-bottom: 0;
}
/* --------------------------------
* H2見出し + アイコン
* -------------------------------- */
.h2-icon-wrapper {
text-align: center;
margin-bottom: 12px;
}
.h2-icon-wrapper i {
font-size: 2.5rem; /* 40px */
color: #0a2a5d;
opacity: 0.8;
}
.title_h2 {
font-size: 2rem; /* 32px */
font-weight: bold;
text-align: center;
margin-top: 0; /* アイコンがあるので上マージンは不要 */
margin-bottom: 40px;
}
/* --------------------------------
* 会社概要テーブル
* -------------------------------- */
.table_default {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd;
}
.table_default th,
.table_default td {
padding: 20px !important;
text-align: left;
border-bottom: 1px solid #ddd;
vertical-align: top;
}
.table_default th {
background-color: #879ed4;
font-weight: bold;
/* デザインに合わせて幅を固定 */
width: 25%;
min-width: 150px;
color: #fff;
}
.table_default td{
background: #fff;
color: #333;
}
/* --------------------------------
* Google マップ
* -------------------------------- */
.map_container {
position: relative;
width: 100%;
/* アスペクト比 16:9 */
padding-top: 56.25%;
height: 0;
overflow: hidden;
border-radius: 4px; /* マップにも角丸 */
}
.map_container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* --------------------------------
* レスポンシブ対応 (768px以下)
* -------------------------------- */
@media (max-width: 768px) {
.sec_basic {
padding: 30px 0;
}
.row {
flex-direction: column; /* 縦積みに変更 */
gap: 20px;
}
.row .col.flex_1,
.row .col.flex_2 {
min-width: 0;
}
.title_h2 {
font-size: 1.8rem;
margin-bottom: 30px;
}
.pc-text-center {
text-align: left; /* スマホでは左揃えに */
font-size: 1rem;
}
/* PC用の改行(
)を非表示に */
.pc-only {
display: none;
}
/* 会社概要テーブル (スマホ用) */
.table_default tr {
border-bottom: 2px solid #0a2a5d;
}
.table_default th,
.table_default td {
display: block;
width: 100%;
box-sizing: border-box; /* paddingを含めて100%に */
padding: 15px;
border-bottom: none; /* 個別の下線を消す */
}
.table_default th {
border-bottom: 1px dashed #ddd; /* 項目間の区切り線 */
min-width: 0;
}
.table_default td {
/* thとセットで下のボーダーが引かれるように調整 */
border-bottom: 1px solid #ddd;
}
/* テーブルの最後の行の最後のセルだけ下線を消す */
.table_default tr:last-child td {
border-bottom: none;
}
}
.sec_basic.sec_recruit {
padding: 50px 0;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
/* 募集終了メッセージボックス */
.recruit-message-box {
border: 2px solid #0a2a5d; /* メインカラー */
background: #f9f9f9;
border-radius: 8px;
padding: 40px;
text-align: center;
max-width: 800px; /* 広がりすぎないように */
margin: 20px auto; /* 上下と左右中央 */
}
.recruit-message-icon {
font-size: 2.5rem; /* 40px */
color: #0a2a5d;
margin-bottom: 20px;
}
.recruit-message-title {
font-size: 1.5rem; /* 24px */
font-weight: bold;
color: #0a2a5d;
margin: 0 0 16px 0;
}
.recruit-message-box p {
font-size: 1rem;
line-height: 1.7;
color: #333;
margin: 0;
}
.recruit-message-box p + p {
margin-top: 1em;
}
/* --------------------------------
* レスポンシブ対応 (768px以下)
* -------------------------------- */
@media (max-width: 768px) {
.sec_basic.sec_recruit {
padding: 30px 0;
}
.recruit-message-box {
padding: 30px 20px;
text-align: left; /* スマホでは左揃え */
}
.recruit-message-icon {
text-align: center; /* アイコンだけ中央 */
}
.recruit-message-title {
font-size: 1.25rem; /* 20px */
text-align: center; /* タイトルも中央 */
}
}
.archive-list {
margin-bottom: 60px;
}
.archive-item {
padding: 30px !important;
background: #fff;
}
.archive-item:first-child {
padding-top: 0;
}
.archive-item__meta {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 15px;
font-size: 14px;
}
.archive-item__date {
color: #333;
}
.archive-item__category {
display: inline-block;
background-color: #4bbbeb;
color: #fff;
padding: 3px 12px;
border-radius: 4px;
font-size: 12px;
}
.archive-item__title {
font-size: 22px;
margin: 0 0 15px 0;
color: #333;
}
.archive-item__title a {
color: #333;
text-decoration: none;
transition: color 0.3s;
}
.archive-item__title a:hover {
color: #333;
}
.archive-item__excerpt p {
font-size: 15px;
line-height: 1.8;
margin: 0;
color: #333;
}
/* ページネーション */
.pagination {
display: flex;
justify-content: center;
gap: 10px;
}
.pagination .nav-links {
display: flex;
gap: 10px;
}
.pagination .page-numbers {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid #e9ecf2;
border-radius: 50%;
text-decoration: none;
color: #555;
transition: all 0.3s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
background-color: #4bbbeb;
color: #fff;
border-color: #4bbbeb;
}
/* --- single.php --- */
.post-content {
max-width: 800px;
margin: 0 auto 60px auto;
padding: 30px !important;
background: #fff;
color: #333;
}
.post-header {
margin-bottom: 40px;
border-bottom: 1px solid #e9ecf2;
padding-bottom: 20px;
}
.post-title {
font-size: 32px;
line-height: 1.5;
margin: 0 0 20px 0;
color: #333;
}
.post-meta {
display: flex;
gap: 20px;
font-size: 14px;
color: #555;
}
.post-meta a {
color: #555;
text-decoration: none;
}
.post-meta a:hover {
color: #4bbbeb;
}
.post-meta .fas {
margin-right: 5px;
}
/* 投稿本文のスタイル */
.post-content h2, .post-content h3, .post-content h4 {
font-weight: bold;
margin: 40px 0 20px 0;
color: #333;
}
.post-content h2 {
font-size: 24px;
padding-bottom: 10px;
border-bottom: 2px solid #e9ecf2;
color: #333;
}
.post-content h3 {
font-size: 20px;
}
.post-content p {
line-height: 1.9;
margin-bottom: 1.5em;
color: #333;
}
.post-content ul, .post-content ol {
padding-left: 20px;
margin-bottom: 1.5em;
}
.post-content li {
line-height: 1.8;
margin-bottom: 0.8em;
}
.post-content a {
color: #4bbbeb;
text-decoration: underline;
}
.post-content a:hover {
text-decoration: none;
}
.post-content img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 20px 0;
}
/* 前後記事へのナビゲーション */
.post-navigation {
margin-top: 60px;
display: flex;
justify-content: space-between;
}
.post-navigation .nav-links {
display: flex;
width: 100%;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
flex: 1;
padding: 20px;
display: block;
}
.post-navigation .nav-previous{
text-align: left;
}
.post-navigation .nav-next{
text-align: right;
}
.post-navigation a {
text-decoration: none;
color: #fff;
}
.post-navigation a:hover .nav-title {
color: #4bbbeb;
}
.post-navigation .nav-subtitle {
display: block;
font-size: 12px;
color: #fff;
margin-bottom: 5px;
}
.post-navigation .nav-title {
font-weight: bold;
transition: color 0.3s;
}
.page-body {
padding-top: 40px;
padding-bottom: 40px;
}
.page-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
/* ヘッダー (背景画像なし)
--------------------------------*/
.subpage-header {
padding: 50px 0;
max-width: 1000px;
margin: 0 auto;
}
.subpage-header .page-container {
text-align: center;
}
.subpage-header__icon {
font-size: 42px; /* アイコンのサイズをフォントサイズで指定 */
color: #4bbbeb; /* テーマカラーを適用 */
margin-bottom: 20px;
}
.subpage-header__title {
font-size: 36px;
font-weight: bold;
color: #fff;
margin: 0;
}
.subpage-header__subtitle {
font-size: 16px;
color: #879ed4;
margin: 5px 0 0 0;
letter-spacing: 1px;
}
@media(max-width: 768px) {
.post-title {
font-size: 26px;
}
.p-page__content{
padding: 0 30px;
}
.p-page-header__inner {
padding-top: 40px;
padding-bottom: 40px;
}
.top_logo img {
height: 35px;
width: auto;
}
.head_wrap {
height: 80px;
}
.top_logo {
z-index: 1000;
position: absolute;
top: 25px;
left: 20px;
}
.l-main__body {
padding: 40px 0 80px 0;
}
.footer-contact-button {
display: block;
background-color: #052f8f;
color: #fff;
font-weight: bold;
padding: 12px 40px;
text-decoration: none;
position: relative;
transition: opacity 0.3s;
margin: 0 auto 30px auto;
text-align: center;
}
.table_default {
width: 100%;
border-collapse: collapse;
border: unset;
}
.table_default tr {
border-bottom: unset;
}
.table_default td {
border-bottom: 1px solid #ddd;
margin-bottom: 30px;
}
}
[data-sidebar=on] .l-main {
max-width: 100%;
width: auto;
margin: 0 auto;
}