html, body {
overflow-x: hidden;
}
/* ----------------------------------------------
おしらせ用3カラム
---------------------------------------------- */
/* newsだけ背景色が違うなら個別で追加 */
section#news {
background: rgba(208, 107, 84, 0.3);
background-size: cover;
background-position: center;
}
#news .three-column {
margin-bottom: 20px;
}
/* ----------------------------------------------
お店のこと
---------------------------------------------- */
h3#about {
margin: 0;
}
/* お店のことのロゴマーク */
.logomark {
text-align: center;
}
/* コンテンツ */
.access-wrap {
padding-left: 50px;
}
@media screen and (max-width: 768px) {
.access-wrap {
padding-left: 0;
}
}
.access-content {
width: 100%;
max-width: 1200px;
padding: 0 1rem; /* 画面端にくっつかないように */
margin: 10rem auto;
box-sizing: border-box;
}
.access-content img {
width: 100%;
max-width: 600px;
height: auto;
border-top-left-radius: 5rem;
}
.access-content .left-column {
padding: 8rem 0 0 5rem;
}
/* アクセスの詳細ボックス */
/* PC表示：2カラム */
.in-one-column {
position: relative;
width: 90%;
padding: 0.5rem 150px 0rem 2rem;
margin-top: 2rem;
height: auto;
background: rgba(208, 107, 84, 0.3) url("../img/shopimg@2x.png") calc(100% - 2rem) center / 130px no-repeat;
border-radius: 0.5rem;
overflow: hidden;
display: flex;
align-items: flex-start;
}
/* PCでの説明コンテンツ */
.in-one-column__content {
border-radius: 0.5rem;
padding: 1rem;
line-height: 1.3rem;
flex: 1; /* コンテンツ幅を柔軟に */
}
/* ボタン調整 */
.in-one-column__content .button-detail {
margin-top: 0.7rem;
}
/* PC表示：モバイル画像は非表示 */
.mobile-img {
display: none;
}
/* --- モバイル表示：1カラム（縦並び） --- */
@media screen and (max-width: 768px) {
.in-one-column {
flex-direction: column;
width: 100%;
padding: 1rem;
background: none; /* 背景画像を削除 */
background-color: rgba(208, 107, 84, 0.3);
text-align: center;
}
.in-one-column__content {
width: 100%;
margin-bottom: 1rem;
}
/* 画像は別要素として下に追加 */
.in-one-column img {
width: 100%;
max-width: 200px;
margin: 0 auto;
}
.mobile-img {
display: block;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
}
/* ----------------------------------------------
セクション区切りのイメージ
---------------------------------------------- */
.section-image {
width: 100%;
height: 250px;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.section-image {
height: 100px;
}
}
.section-image img {
width: 100%;
height: 100%;
object-fit: cover; /* 画像をちょうどいい感じに拡大・トリミング */
}
/* ----------------------------------------------
お取り扱い品：3カラム設定
---------------------------------------------- */
/* productsを基準に */
.products-header {
position: relative;
height: 100px;
}
@media screen and (max-width: 768px) {
.products-header {
position: relative;
height: auto;
}
}
.products-caption {
position: absolute;
top: -3rem;
right: 0;
width: 600px;
}
@media screen and (max-width: 768px) {
.products-caption {
position: static;
width: 100%;
margin-top: 1rem;
}
}
/* --画像の上に文字を載せる-- */
.img-wrap {
position: relative;
width: 100%;
overflow: hidden;
}
/* オーバーレイ（黒・30%透明） */
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 0.6rem); /* 画像の高さから2rem引く */
background: rgba(0, 0, 0, 0.5); /* 黒・50%透明 */
z-index: 1; /* テキストより下に置く */
border-bottom-right-radius: 3rem;
}
.img-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 1.5rem;
font-weight: bold;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* ちょっとだけ影をつけて読みやすくする */
white-space: nowrap; /* 文字を折り返さない（折り返したいなら消してOK） */
z-index: 2; /* オーバーレイより上に来るようにする */
}
/* 画像の上のラベル */
.img-label {
position: absolute;
top: 0;
color: #fff;
padding: 0.5rem 1rem;
font-size: 1.3rem;
z-index: 3;
}
/* 通年ラベル（緑色） */
.label-regular {
background: #94b226; /* 緑色 */
}
/* 季節ラベル（オレンジ色） */
.label-seasonal {
background: #d06b54; /* オレンジ色 */
}
/* キャプション */
.three-column__content p {
margin-top: 0.5rem;
line-height: 1.5rem;
}
/* ----------------------------------------------
お取り扱い雑貨：2カラム設定（PC版）
---------------------------------------------- */
.creator-two-column {
list-style: none;
padding: 0;
margin: 0;
}
.creator-two-column__item {
display: flex;
align-items: flex-start;
gap: 2rem;
margin-bottom: 3rem;
width: 100%;
}
/* 左カラム：画像エリア */
.creator-two-column__left {
width: 450px;
height: 170px;
overflow: hidden;
border-bottom-right-radius: 3rem;
margin-right: 30px;
}
/* 右カラム：テキストエリア */
.creator-two-column__right {
width: 520px;
}
/* 画像設定 */
.creator-img {
width: 100%;
height: 100%;
object-fit: cover; /* トリミングする */
display: block;
}
/* タイトル設定 */
h3.creator-title {
font-size: 1.5rem;
margin: 0 0 1rem 0;
}
/* コンテンツテキスト設定 */
.creator-content {
font-size: 1rem;
line-height: 1.6;
}
@media screen and (max-width: 768px) {
.creator-two-column__item {
flex-direction: column; /* 縦並びに */
align-items: center; /* 中央揃え */
margin: 0 auto; /* 中央寄せ */
}
/* 左カラム：幅100% */
.creator-two-column__left {
width: 100%;
height: auto; /* 高さ自動調整 */
margin-right: 0; /* 余白削除 */
}
/* 右カラム：幅100% */
.creator-two-column__right {
width: 100%;
margin: 0;
}
/* 画像設定（モバイルは自動調整） */
.creator-img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
}
/* ----------------------------------------------
ワークショップ・レンタルスペース：2カラム設定
---------------------------------------------- */
/* */
#top-workshop .two-column, #top-rental .two-column {
margin: 1rem 0;
}
.left-inner {
width: 400px;
}
@media screen and (max-width: 768px) {
.left-inner {
width: 100%;
}
}
#top-workshop .right-column img, #top-rental .right-column img {
width: 100%;
max-width: 500px;
height: 300px;
border-top-left-radius: 3rem;
}
@media screen and (max-width: 768px) {
#top-workshop .right-column img, #top-rental .right-column img {
height: 200px;
border-top-left-radius: 0;
border-bottom-right-radius: 3rem;
}
}
.wsrental-img {
width: 100%;
height: 100%;
object-fit: cover; /* トリミングする */
display: block;
}
.insta {
display: inline-block;
width: 50px;
height: 50px;
margin: 10px;
}
/* ボタンとインスタマークを並べる */
.button-insta-wrap {
display: inline-flex;
align-items: center;
gap: 1rem;
}
.button-insta-wrap .button {
display: inline-block; /* もともとボタンに設定されてるので安心 */
}
.button-insta-wrap .insta img {
width: 50px;
height: 50px;
display: block;
}