TEST 1のコーディングです。参考にできます
cssでnormalizeの部分
@charset "utf-8";
/*---------------サイトの基本設定---------------*/
/*cssのリセット*/
こちらはノーマライズするときは要らない html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
border: 0;
outline: 0;
background: transparent;
}
/*html&bodyの設定*/
html {
font-size: 62.5%; /* 1rem = 10px */
overflow-y: scroll;
overflow-x: hidden;
}
body {
font-family: "YakuHanJPs_Noto", "Roboto", "Noto Sans JP", "游ゴシック Medium",
"游ゴシック体", "Yu Gothic Medium", "YuGothic", "ヒラギノ角ゴ ProN",
"Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
"MS PGothic", sans-serif;
margin: 0;
padding: 0;
line-height: 1.8;
width: 100%;
}
/* Box Sizing の設定 */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* - - h1.h2.h3.... - - */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
color: #000;
overflow-wrap: break-word;
}
/* -- a -- */
a {
text-decoration: none;
outline: none;
color: #000;
}
a,
a > img {
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
/* -- img -- */
img {
display: block;
max-width: 100%;
height: auto;
}
/* -- ul -- */
ul {
list-style: none;
}
li {
list-style: none;
}
/* -- :hover -- */
a:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
cursor: pointer;
}
/* -- inputの設定 --*/
input[type="text"] {
font-size: 1rem;
}
input[type="submit"] {
padding: 8px;
border: #efefef;
color: #000;
background-color: aliceblue;
}
/*-- フォーム要素の設定 --*/
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button {
border: none;
background: none;
padding: 0;
cursor: pointer;
}
/*--テーブルのborder-collapse*/
table {
border-collapse: collapse;
border-spacing: 0;
}cssでstyleの部分
@charset "utf-8";
/*---------------rootの基本設定---------------*/
:root {
/* カラーパレット */
--primary-color: #3498db;
--secondary-color: #2ecc71;
--bg-beige: #f3f0e8;
--text-color: #333;
--white--: #ffffff;
--gold--: #b49f68;
--black--: #000000;
--footer-bg: #222222;
/* フォントサイズ */
--font-small: 12px; /* 12px */
--font-medium: 16px; /* 16px */
--font-large: 20px; /* 20px */
/* スペーシング */
--spacing-small: 8px;
--spacing-medium: 16px;
--spacing-large: 24px;
}
/*---------------デバイス別表示・非表示---------------*/
/* PC専用（769px以上で表示） */
.pc-only {
display: block;
}
@media screen and (max-width: 768px) {
.pc-only {
display: none !important;
}
}
/* タブレット専用（768px〜1024px） */
.tablet-only {
display: none;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.tablet-only {
display: block;
}
}
/* スマホ専用（500px以下で表示） */
.sp-only {
display: none;
}
@media screen and (max-width: 500px) {
.sp-only {
display: block !important;
}
}
/* モバイル専用（768px以下で表示：タブレット+スマホ） */
.mobile-only {
display: none;
}
@media screen and (max-width: 768px) {
.mobile-only {
display: block !important;
}
}
/*---------------デバイス別表示・非表示の設定終了---------------*/
/*---------------headerの基本設定---------------*/
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--bg-beige);
color: var(--text-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1000;
transform: translateY(-100px);
transition: transform 0.3s ease-in-out;
}
.header_inner {
display: flex;
justify-content: space-between;
align-items: center;
margin-inline: auto;
padding-block: 20px;
padding-inline: 20px;
width: 100%;
/*max-width: min(95.83vw, 1380px);*/
height: 100%;
min-height: min(6.32vw, 80px);
}
.header_logo img {
width: 100%;
}
.header_nav {
display: flex;
align-items: center;
gap: min(1.67vw, 24px);
}
@media screen and (max-width: 768px) {
.header_nav {
display: none;
}
}
.header_nav ul {
display: flex;
gap: 40px;
font-size: var(--font-medium);
}
/*ボタン設定*/
.header_btn {
width: min(13.8vw, 200px);
}
.btn_gold {
display: flex;
justify-content: center;
align-items: center;
padding-top: min(0.97vw, 14px);
padding-bottom: min(1.11vw, 16px);
padding-left: min(0.69vw, 10px);
padding-right: min(0.69vw, 10px);
font-size: min(1.11vw, 16px);
font-style: normal;
font-weight: 700;
line-height: 1.5;
border-radius: min(42vw, 6px);
transition: all 0.3s ease;
background-color: var(--gold--);
color: var(--white--);
}
/*---------------ハンバーガーナビ---------------*/
.openbtn {
display: none;
}
#g-nav {
display: none;
}
/*---------------g-naviとボタンの設定---------------*/
@media screen and (max-width: 768px) {
.openbtn {
display: block;
position: fixed;
z-index: 4000;
/*ボタンを最前面に*/
top: 15px;
right: 20px;
cursor: pointer;
width: 45px;
height: 45px;
}
.openbtn span {
display: inline-block;
transition: all 0.4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #000;
width: 80%;
height: 2px;
}
.openbtn span:nth-of-type(1) {
top: 15px;
}
.openbtn span:nth-of-type(2) {
top: 23px;
}
.openbtn span:nth-of-type(3) {
top: 31px;
}
.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 80%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 80%;
}
/*========= ナビゲーションのためのCSS ===============*/
#g-nav {
display: block;
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position: fixed;
z-index: 3000;
/*ナビのスタート位置と形状*/
top: 0;
right: -120%;
width: 60%;
/*半分とか調整をする際は、g-nav-listも合わせる*/
height: 100dvh;
/*ナビの高さ - dvhを使用してモバイルブラウザのUIを考慮*/
background: #fff;
/*動き*/
transition: all 0.6s;
}
#g-nav.panelactive {
right: 0;
}
#g-nav.panelactive #g-nav-list {
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 3000;
width: 60%;
/*半分とか調整をする際は、g-navも合わせる*/
height: 100dvh;
/*表示する高さ - dvhを使用*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#g-nav ul {
/*ナビゲーション天地中央揃え*/
position: absolute;
width: 100%;
z-index: 3000;
margin-top: 100px;
}
#g-nav ul .sns-wrapper {
display: flex;
gap: 20px;
margin-top: 10px;
margin-left: 10px;
}
#g-nav ul .sns-wrapper .x-logo a img {
width: 20px;
height: 20px;
}
#g-nav ul .sns-wrapper .insta-logo a img {
width: 25px;
height: 25px;
}
#g-nav li {
font-size: 1.5rem;
list-style: none;
text-align: left;
padding-inline: 20px; /* 左右の余白 */
}
#g-nav li li:not(:first-child) {
margin-top: 20px;
}
#g-nav li a {
color: #000;
text-decoration: none;
padding: 10px 0; /* 上下のみpadding */
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 1px solid #ddd; /* 下線を左右端べったりじゃなく余白を持たせる */
}
/*---------------navi内のボタンの設定---------------*/
/*ボタン設定*/
.g_nav_btn {
width: 80%;
margin: 50px auto;
}
.g_nav_btn_gold {
display: flex;
justify-content: center;
align-items: center;
padding-top: min(1.82vw, 14px);
padding-bottom: min(2.08vw, 16px);
padding-left: min(1.3vw, 10px);
padding-right: min(1.3vw, 10px);
font-size: min(3.72vw, 16px);
font-style: normal;
font-weight: 700;
line-height: 1.5;
border-radius: min(0.78vw, 6px);
transition: all 0.3s ease;
background-color: var(--gold--);
color: var(--white--);
}
/* オーバーレイのスタイル */
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 1500;
}
#overlay.active {
opacity: 1;
visibility: visible;
}
}
/*---------------header設定終了---------------*/
/* スクロール制御（メディアクエリ外に配置） */
html.no-scroll,
html.no-scroll body {
overflow: hidden;
}
/*---------------mv-topの基本設定---------------*/
.mv_top_wrapper {
position: relative;
padding-top: min(2.08vw, 30px);
padding-inline: min(2.08vw, 30px);
background-color: var(--bg-beige);
overflow-x: hidden; /* 横スクロールを防止 */
max-width: 100vw; /* 画面幅を超えないように */
}
/*---------------mv-top-hedaerの基本設定---------------*/
.mv_top_header {
width: 100%;
background-color: var(--bg-beige);
color: var(--text-color);
}
.mv_top_header_inner {
display: flex;
justify-content: flex-end;
align-items: flex-start;
margin-inline: auto;
padding-inline: 20px;
width: 100%;
height: 100%;
min-height: min(6.32vw, 80px);
}
@media screen and (max-width: 768px) {
.mv_top_header_inner {
padding-bottom: min(2.08vw, 30px);
}
}
@media screen and (max-width: 450px) {
.mv_top_header_inner {
padding-bottom: min(9.3vw, 40px);
}
}
.mv_top_header_logo img {
position: absolute;
top: 0;
left: 0;
padding-block: min(1.04vw, 15px);
padding-inline: min(2.7vw, 40px);
z-index: 10;
width: clamp(480px, 3.82vw, 550px);
}
@media screen and (max-width: 1440px) {
.mv_top_header_logo img {
top: min(2.08vw, 30px);
width: min(29.86vw, 430px);
}
}
@media screen and (max-width: 768px) {
.mv_top_header_logo img {
top: 0px;
width: min(37.1vw, 285px);
padding-block: min(2.6vw, 20px);
padding-inline: min(4.17vw, 60px);
}
}
@media screen and (max-width: 450px) {
.mv_top_header_logo img {
width: min(37.2vw, 160px);
top: min(3.3vw, 15px);
padding-block: min(2.32vw, 10px);
padding-inline: min(4.65vw, 20px);
}
}
.mv_top_header_nav {
display: flex;
align-items: center;
gap: min(1.67vw, 24px);
}
@media screen and (max-width: 768px) {
.mv_top_header_nav {
display: none;
}
}
.mv_top_header_nav ul {
display: flex;
gap: 40px;
font-size: var(--font-medium);
}
/*ボタン設定*/
.mv_top_header_btn {
width: min(13.8vw, 200px);
}
.btn_gold {
display: flex;
justify-content: center;
align-items: center;
padding-top: min(0.97vw, 14px);
padding-bottom: min(1.11vw, 16px);
padding-left: min(0.69vw, 10px);
padding-right: min(0.69vw, 10px);
font-size: min(1.11vw, 16px);
font-style: normal;
font-weight: 700;
line-height: 1.5;
border-radius: min(42vw, 6px);
transition: all 0.3s ease;
background-color: var(--gold--);
color: var(--white--);
}
@media screen and (max-width: 768px) {
.openbtn_mv {
display: block;
position: fixed;
z-index: 4000;
/*ボタンを最前面に*/
top: 15px;
right: 20px;
cursor: pointer;
width: 45px;
height: 45px;
}
.openbtn_mv span {
display: inline-block;
transition: all 0.4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #000;
width: 80%;
height: 2px;
}
.openbtn_mv span:nth-of-type(1) {
top: 15px;
}
.openbtn_mv span:nth-of-type(2) {
top: 23px;
}
.openbtn_mv span:nth-of-type(3) {
top: 31px;
}
.openbtn_mv.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 80%;
}
.openbtn_mv.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn_mv.active span:nth-of-type(3) {
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 80%;
}
}
@media screen and (max-width: 640px) {
.openbtn_mv {
top: 0;
}
}
@media screen and (max-width: 500px) {
.openbtn_mv {
top: -4px;
}
}
/*---------------mv-top-hedaer設定終了---------------*/
/*---------------mv-topコンテンツの基本設定---------------*/
.mv_top_content {
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
overflow-x: hidden; /* 横スクロールを明示的に防止 */
-webkit-mask-image: url("../img/mask.png");
-webkit-mask-size: 100% 100%;
mask-image: url("../img/mask.png");
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-position: center center;
}
.mv_top_content ul {
position: relative;
width: 100%;
/*height: min(50vw, 720px); /* 幅の50%(2:1比率)、最大720px */
margin-inline: auto;
aspect-ratio: 2 / 1; /* 2:1の比率を維持 */
}
.mv_top_content ul::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(26deg, rgba(0, 0, 0, 0.6), transparent);
z-index: 2; /* 画像の上に配置 */
pointer-events: none; /* クリックイベントを通過させる */
}
@media screen and (max-width: 768px) {
.mv_top_content {
-webkit-mask-image: url("../img/mask_sp.png");
mask-image: url("../img/mask_sp.png");
mask-position: unset;
}
.mv_top_content ul {
height: 100vh !important; /* スマホ用に高さを調整 */
aspect-ratio: unset !important; /* 768px以下ではaspect-ratioを解除 */
}
@media screen and (max-width: 500px) {
.mv_top_content ul {
height: min(150vw, 750px) !important; /* さらに小さい画面用に高さを調整 */
}
}
.mv_top_content ul::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(26deg, rgba(0, 0, 0, 0.6), transparent);
z-index: 2; /* 画像の上に配置 */
pointer-events: none; /* クリックイベントを通過させる */
}
}
.mv_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1; /* グラデーションより下に配置 */
}
.mv_image.active {
opacity: 1;
}
/*---------------mv-top-banner(pc用)コンテンツ設定---------------*/
.mv_bottom_text_banner_wrapper {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 3;
}
.mv_bottom_text_banner_wrapper_sp {
display: none;
}
@media screen and (max-width: 768px) {
.mv_bottom_text_banner_wrapper {
display: none;
}
}
.mv_bottom_text_banner_inner {
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
align-items: flex-end;
padding-inline: min(4.16vw, 60px);
padding-bottom: min(2.08vw, 30px);
}
.bt_text_wrapper {
display: flex;
flex-direction: column;
gap: min(0.69vw, 10px);
}
.bt_text_one,
.bt_text_two {
font-size: min(2.77vw, 40px);
font-weight: 700;
line-height: 1.2;
color: var(--white--);
}
.bt_text_border {
border-bottom: min(0.06vw, 1px) solid var(--white--);
width: fit-content;
}
.bt_text_info {
margin-top: min(1.38vw, 20px);
}
.bt_text_info ul {
display: flex;
align-items: center;
gap: min(2.77vw, 40px);
}
.bt_text_info ul li {
position: relative;
font-size: min(1.11vw, 16px);
font-weight: 400;
line-height: 1.5;
color: var(--white--);
padding-left: min(1.38vw, 20px);
}
.bt_text_info ul li::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 8px;
height: 8px;
background-color: var(--gold--);
}
/* 右下バナー */
.mv_bottom_right_banner_btn {
width: min(31.25vw, 450px); /* バナー全体の幅 */
height: min(8.33vw, 120px); /* バナー全体の高さ */
}
.mv_bottom_right_banner_btn a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: visible;
}
.mv_bottom_right_banner_btn img {
width: 40%; /* 画像の幅を40%に制限 */
height: 100%;
object-fit: cover;
flex-shrink: 0;
}
.mbr_banner_text_wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding-left: min(1.38vw, 20px);
padding-right: min(1.38vw, 20px);
background-color: var(--white--);
width: 60%; /* テキスト部分を60%に */
height: 100%;
}
/* 右下の三角形 */
.mbr_banner_text_wrapper::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 min(3.47vw, 50px) min(3.47vw, 50px);
border-color: transparent transparent #333 transparent;
}
/* 右下の矢印 */
.mbr_banner_text_wrapper::before {
content: "→";
position: absolute;
bottom: min(0.34vw, 5px);
right: min(0.34vw, 5px);
color: var(--white--);
font-size: min(1.38vw, 20px);
z-index: 1;
line-height: 1;
}
.mbr_text_small {
font-size: min(1.04vw, 15px);
font-weight: 700;
line-height: 1.5;
color: var(--text-color--);
}
.mbr_text_large {
font-size: min(1.38vw, 20px);
font-weight: 700;
line-height: 1.5;
color: var(--text-color--);
}
/*---------------mv-top-banner(sp用)コンテンツ設定---------------*/
@media screen and (max-width: 768px) {
.mv_bottom_text_banner_wrapper {
display: none;
}
.mv_bottom_text_banner_wrapper_sp {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
margin-bottom: min(3.9vw, 30px);
width: 100%;
z-index: 3;
}
.mv_bottom_text_banner_inner_sp {
display: block;
padding-inline: min(3.9vw, 30px);
}
.bt_text_wrapper_sp {
display: flex;
flex-direction: column;
gap: min(0.69vw, 10px);
margin-bottom: min(3.81vw, 30px);
text-align: left;
}
.bt_text_one_sp,
.bt_text_two_sp {
font-size: min(3.9vw, 30px);
color: var(--white--);
font-weight: 700;
line-height: 1.2;
}
@media screen and (max-width: 430px) {
.bt_text_one_sp,
.bt_text_two_sp {
font-size: min(6.97vw, 30px);
line-height: 1.6;
}
}
.bt_text_info_sp {
margin-top: min(1.3vw, 10px);
}
.bt_text_info_sp ul li {
position: relative;
font-size: min(3.12vw, 18px);
color: var(--white--);
font-weight: 400;
line-height: 1.5;
padding-left: min(1.95vw, 15px);
}
@media screen and (max-width: 430px) {
.bt_text_info_sp ul li {
font-size: min(3.48vw, 15px);
padding-left: min(3.48vw, 15px);
}
}
.bt_text_info_sp ul li::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 8px;
height: 8px;
background-color: var(--gold--);
}
}
/*---------------mv-topコンテンツ設定終了---------------*/
/*---------------Footerの基本設定---------------*/
footer {
background-color: var(--footer-bg);
color: var(--text-color);
padding-block: min(4.16vw, 60px);
padding-inline: min(2.08vw, 30px);
}
.footer_inner {
display: flex;
justify-content: space-between;
align-items: center;
margin-inline: auto;
width: 100%;
max-width: min(80.55vw, 1160px);
}
.footer_logo img {
width: 100%;
max-width: min(20.83vw, 288px);
}
.footer_nav ul {
display: flex;
gap: min(2.77vw, 40px);
font-size: var(--font-medium);
color: var(--white--);
}
.footer_nav ul li a {
color: var(--white--);
}
.footer_btn {
width: min(13.8vw, 200px);
margin-top: min(1.38vw, 20px);
}
.btn_gold {
display: flex;
justify-content: center;
align-items: center;
padding-top: min(0.97vw, 14px);
padding-bottom: min(1.11vw, 16px);
padding-left: min(0.69vw, 10px);
padding-right: min(0.69vw, 10px);
font-size: min(1.11vw, 16px);
font-style: normal;
font-weight: 700;
line-height: 1.5;
border-radius: min(42vw, 6px);
transition: all 0.3s ease;
background-color: var(--gold--);
color: var(--white--);
}
@media screen and (max-width: 768px) {
footer {
padding-block: min(7.81vw, 60px);
padding-inline: min(3.9vw, 30px);
}
.footer_logo img {
width: 100%;
max-width: min(37.5vw, 288px);
}
.footer_nav ul {
gap: min(2.6vw, 20px);
}
.footer_btn {
width: min(26.04vw, 200px);
}
.btn_gold {
font-size: min(2.08vw, 16px);
}
@media screen and (max-width: 430px) {
footer {
padding-block: min(13.95vw, 60px);
padding-inline: min(6.97vw, 30px);
}
.footer_inner {
flex-direction: column;
gap: min(6.97vw, 40px);
}
.footer_logo img {
width: 100%;
max-width: min(66.97vw, 288px);
}
.footer_nav ul {
gap: min(4.65vw, 20px);
}
.footer_btn {
margin: 20px auto;
width: min(46.51vw, 200px);
}
.btn_gold {
font-size: min(3.72vw, 16px);
}
}
}
/*---------------Footer設定終了---------------*/
cssのbanner_sectionの部分
@charset "UTF-8";
/* バナーセクションのcss設定 */
.banner_contents_top_pc {
width: 100%;
background-color: var(--bg-beige);
}
.bct_inner {
max-width: min(80.55vw, 1160px);
margin-inline: auto;
padding-block: min(6.94vw, 100px);
}
.bct_inner ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: min(2.59vw, 30px);
}
/* 1つ目のバナー */
.bct_inner ul li:nth-child(1) a {
display: block;
width: 100%;
height: 100%;
position: relative;
padding-block: min(2.36vw, 34px);
text-align: center;
overflow: hidden;
border-radius: min(1.38vw, 20px);
}
.bct_inner ul li:nth-child(1) a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(26deg, rgba(0, 0, 0, 0.6), transparent),
url(../img/banner1.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.3s ease;
z-index: 1;
filter: blur(2px);
}
.bct_inner ul li:nth-child(1) a:hover::before {
transform: scale(1.1);
}
.bct_inner ul li:nth-child(1) a p {
position: relative;
z-index: 2;
color: var(--white--);
font-size: min(1.66vw, 24px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.04em;
}
/* 2つ目のバナー */
.bct_inner ul li:nth-child(2) a {
display: block;
width: 100%;
height: 100%;
position: relative;
padding-block: min(2.36vw, 34px);
text-align: center;
overflow: hidden;
border-radius: min(1.38vw, 20px);
}
.bct_inner ul li:nth-child(2) a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(26deg, rgba(0, 0, 0, 0.9), transparent),
url(../img/banner2.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.3s ease;
z-index: 1;
filter: blur(2px);
}
.bct_inner ul li:nth-child(2) a:hover::before {
transform: scale(1.1);
}
.bct_inner ul li:nth-child(2) a p {
position: relative;
z-index: 2;
color: var(--white--);
font-size: min(1.66vw, 24px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.04em;
}
/*ボタン共通*/
.bct_btn {
position: relative;
z-index: 2;
display: inline-block;
margin-top: min(1.38vw, 20px);
padding: min(0.83vw, 12px) min(3.47vw, 50px);
border: 1px solid var(--white--);
border-radius: min(0.83vw, 12px);
color: var(--white--);
font-size: min(2.34vw, 18px);
font-weight: 500;
text-decoration: none;
}
.bct_btn::before {
content: "→";
position: absolute;
top: 50%;
transform: translateY(-45%);
right: min(1.04vw, 15px);
color: var(--white--);
font-size: min(1.95vw, 15px);
z-index: 1;
line-height: 1;
}
@media screen and (max-width: 768px) {
.bct_btn {
padding-inline: min(5.2vw, 40px);
}
}
@media screen and (max-width: 430px) {
.bct_btn {
margin-top: 0px;
font-size: min(2.32vw, 10px);
}
.bct_btn::before {
font-size: min(2.32vw, 10px);
}
}
/* --- タブレットとSP用 ---*/
@media screen and (max-width: 768px) {
.banner_contents_top_tab {
width: 100%;
background-color: var(--bg-beige);
}
.bct_inner_tab {
max-width: 100%;
margin-inline: auto;
padding-inline: min(6.36vw, 50px);
padding-block: min(12.7vw, 100px);
}
@media screen and (max-width: 430px) {
.bct_inner_tab {
padding-top: min(23.2vw, 100px);
padding-inline: min(6.97vw, 30px);
padding-bottom: 100px;
}
}
.bct_inner_tab ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: min(2.59vw, 30px);
}
@media screen and (max-width: 430px) {
.bct_inner_tab ul {
grid-template-columns: 1fr;
gap: min(6.36vw, 50px);
}
}
/*上部のバナーの設定*/
.top_banner_tab {
max-width: 100%; /* バナー全体の幅 */
height: min(12.72vw, 100px); /* バナー全体の高さ */
margin-bottom: min(6.36vw, 50px);
}
.top_banner_tab a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: visible;
border-radius: min(1.38vw, 20px);
}
.top_banner_tab img {
width: 20%; /* 画像の幅を40%に制限 */
height: 100%;
object-fit: cover; /* 画像を枠内に収める */
flex-shrink: 0;
}
.top_banner_tab_text_wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding-left: min(1.38vw, 20px);
padding-right: min(1.38vw, 20px);
background-color: var(--white--);
width: 80%; /* テキスト部分を60%に */
height: 100%;
}
/* 右下の三角形 */
.top_banner_tab_text_wrapper::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 min(6.51vw, 50px) min(6.51vw, 50px);
border-color: transparent transparent #333 transparent;
}
@media screen and (max-width: 430px) {
.top_banner_tab_text_wrapper::after {
border-width: 0 0 min(11.62vw, 50px) min(11.62vw, 50px);
}
}
/* 右下の矢印 */
.top_banner_tab_text_wrapper::before {
content: "→";
position: absolute;
bottom: min(0.34vw, 5px);
right: min(0.34vw, 5px);
color: var(--white--);
font-size: min(2.6vw, 20px);
z-index: 1;
line-height: 1;
}
@media screen and (max-width: 430px) {
.top_banner_tab_text_wrapper::before {
font-size: min(4.65vw, 20px);
}
}
.mbr_text_small {
font-size: min(1.04vw, 15px);
font-weight: 700;
line-height: 1.5;
color: var(--text-color--);
}
.mbr_text_large {
font-size: min(1.38vw, 20px);
font-weight: 700;
line-height: 1.5;
color: var(--text-color--);
}
/* 1つ目のバナー */
.bct_inner_tab ul li:nth-child(1) a {
display: block;
width: 100%;
height: 100%;
position: relative;
padding-block: min(2.36vw, 34px);
text-align: center;
overflow: hidden;
border-radius: min(1.38vw, 20px);
}
@media screen and (max-width: 430px) {
.bct_inner_tab ul li:nth-child(1) a {
display: flex;
align-items: center;
justify-content: center;
gap: min(3.48vw, 15px);
height: min(12.7vw, 54.3px);
}
}
.bct_inner_tab ul li:nth-child(1) a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(26deg, rgba(0, 0, 0, 0.6), transparent),
url(../img/banner1.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.3s ease;
z-index: 1;
filter: blur(2px);
}
.bct_inner_tab ul li:nth-child(1) a:hover::before {
transform: scale(1.1);
}
.bct_inner_tab ul li:nth-child(1) a p {
position: relative;
z-index: 2;
color: var(--white--);
font-size: min(2.6vw, 20px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.04em;
}
@media screen and (max-width: 430px) {
.bct_inner_tab ul li:nth-child(1) a p {
font-size: min(2.79vw, 12px);
}
}
/* 2つ目のバナー */
.bct_inner_tab ul li:nth-child(2) a {
display: block;
width: 100%;
height: 100%;
position: relative;
padding-block: min(2.36vw, 34px);
text-align: center;
overflow: hidden;
border-radius: min(1.38vw, 20px);
}
@media screen and (max-width: 430px) {
.bct_inner_tab ul li:nth-child(2) a {
display: flex;
align-items: center;
justify-content: center;
gap: min(3.48vw, 15px);
height: min(12.7vw, 54.3px);
}
}
.bct_inner_tab ul li:nth-child(2) a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(26deg, rgba(0, 0, 0, 0.9), transparent),
url(../img/banner2.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.3s ease;
z-index: 1;
filter: blur(2px);
}
.bct_inner_tab ul li:nth-child(2) a:hover::before {
transform: scale(1.1);
}
.bct_inner_tab ul li:nth-child(2) a p {
position: relative;
z-index: 2;
color: var(--white--);
font-size: min(2.6vw, 20px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.04em;
}
@media screen and (max-width: 430px) {
.bct_inner_tab ul li:nth-child(2) a p {
font-size: min(2.79vw, 12px);
}
}
.mbr_text_small_tab {
font-size: min(2.54vw, 20px);
font-weight: 700;
line-height: 1.5;
color: var(--text-color--);
}
.mbr_text_large_tab {
font-size: min(3.18vw, 25px);
font-weight: 700;
line-height: 1.5;
color: var(--text-color--);
}
}
cssのabout_shopの部分
@charset "UTF-8";
/* 店舗紹介セクションのcss設定 */
.about_shop {
width: 100%;
background-color: var(--bg-beige);
position: relative;
z-index: 10;
}
.about_shop_inner {
max-width: min(80.55vw, 1160px);
margin-inline: auto;
padding-block: min(6.94vw, 100px);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: min(4.16vw, 60px);
}
/* 店舗紹介テキスト部分 */
.about_shop_text_wrapper {
grid-column: 1;
}
.about_shop_title {
font-size: min(2.77vw, 40px);
font-weight: 500;
color: var(--gold--);
margin-bottom: min(1.38vw, 20px);
}
.about_shop_text {
font-size: min(1.73vw, 25px);
line-height: 1.8;
letter-spacing: 5px;
color: var(--text-dark);
}
.about_shop_text .char {
display: inline-block;
}
/* 店舗紹介画像部分 */
.about_shop_image_wrapper {
grid-column: 2;
}
.about_shop_image_wrapper img {
width: 100%;
border-radius: 10px;
box-shadow: var(--box-shadow-light);
}
@media screen and (max-width: 768px) {
.about_shop_inner {
max-width: 100%;
grid-template-columns: 1fr;
padding-inline: min(5.2vw, 40px);
}
.about_shop_text_wrapper {
grid-column: 1;
margin-bottom: min(4.16vw, 60px);
}
.about_shop_title {
font-size: min(5.2vw, 40px);
}
.about_shop_text {
font-size: min(2.6vw, 20px);
}
.about_shop_image_wrapper {
grid-column: 1;
}
@media screen and (max-width: 430px) {
.about_shop_inner {
grid-template-columns: 1fr;
padding-inline: min(6.97vw, 30px);
}
.about_shop_text_wrapper {
grid-column: 1;
margin-bottom: min(4.16vw, 60px);
}
.about_shop_title {
font-size: min(6.97vw, 30px);
}
.about_shop_text {
font-size: min(3.48vw, 15px);
}
.about_shop_image_wrapper {
grid-column: 1;
}
}
}
cssのproductの部分
@charset "UTF-8";
/* コーヒー商品セクションのcss設定 */
.product_section {
width: 100%;
background-color: var(--bg-beige);
padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
.product_section {
padding-bottom: 0px;
}
}
/* コーヒー商品セクションの内側設定 */
.pt_inner {
max-width: min(80.55vw, 1160px);
margin-inline: auto;
padding-top: min(6.94vw, 100px);
}
@media screen and (max-width: 768px) {
.pt_inner {
max-width: 100%;
padding-top: min(12.7vw, 100px);
padding-inline: min(5.2vw, 40px);
margin-inline: unset;
}
@media screen and (max-width: 430px) {
.pt_inner {
padding-top: min(23.2vw, 100px);
padding-inline: min(6.97vw, 30px);
}
}
}
/* 商品紹介のタイトル*/
.pt_title_wrapper {
margin-bottom: min(4.16vw, 60px);
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
align-items: start;
gap: 0;
}
.pt_subtitle {
grid-column: 1;
grid-row: 1;
}
.pt_title {
grid-column: 1;
grid-row: 2;
}
.all_btn {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
}
.pt_subtitle {
font-size: min(1.38vw, 20px);
font-weight: 500;
color: var(--gold--);
}
@media screen and (max-width: 768px) {
.pt_subtitle {
font-size: min(2.54vw, 20px);
}
@media screen and (max-width: 430px) {
.pt_subtitle {
font-size: min(3.48vw, 15px);
}
}
}
.pt_title {
position: relative;
font-size: min(3.47vw, 50px);
font-weight: 700;
color: var(--text-color);
}
.pt_title::after {
content: "";
position: absolute;
top: 50%;
width: 60px;
height: 4px;
margin-left: min(1.39vw, 20px);
background-color: var(--text-color);
}
@media screen and (max-width: 768px) {
.pt_title {
font-size: min(3.9vw, 30px);
}
@media screen and (max-width: 430px) {
.pt_title {
font-size: min(4.65vw, 20px);
}
}
}
/*商品一覧ページへのリンク*/
.all_btn {
display: inline-block;
font-size: min(1.38vw, 20px);
font-weight: 500;
color: var(--text-color);
margin-top: min(1.38vw, 20px);
padding: min(0.83vw, 12px) min(1.66vw, 24px);
border: 2px solid var(--text-color);
border-radius: min(0.35vw, 5px);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.all_btn {
font-size: min(1.95vw, 15px);
}
@media screen and (max-width: 430px) {
.all_btn {
font-size: min(2.32vw, 10px);
}
}
}
.all_btn::after {
content: "→";
margin-left: min(0.69vw, 10px);
transition: transform 0.3s ease;
display: inline-block;
}
/* ホバー可能なデバイスのみ（タッチパネル除外） */
@media (hover: hover) and (pointer: fine) {
.all_btn:hover::after {
transform: translateX(5px);
color: var(--text-color);
}
}
/* 商品紹介のアニメーションとボタン共通*/
.product_carousel_container {
position: relative;
max-width: 100%;
margin-inline: auto;
overflow: hidden; /* はみ出た部分を隠す */
}
@media screen and (max-width: 768px) {
.product_carousel_container {
max-width: 100%;
padding-inline: min(5.2vw, 40px);
margin-inline: unset;
}
@media screen and (max-width: 430px) {
.product_carousel_container {
padding-inline: min(6.97vw, 30px);
}
}
}
/* ボタンのラッパー */
.carousel_control_wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: min(1.38vw, 20px);
margin-top: min(2.77vw, 40px);
}
/* 前へ・次へボタン */
.carousel_btn {
width: min(3.47vw, 50px);
height: min(3.47vw, 50px);
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.6);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: min(1.38vw, 20px);
transition: background-color 0.3s ease;
touch-action: manipulation; /* ダブルタップズーム防止 */
}
.carousel_btn:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* 再生・停止ボタン */
.carousel_control {
width: min(3.47vw, 50px);
height: min(3.47vw, 50px);
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.6);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: min(1.38vw, 20px);
transition: background-color 0.3s ease;
touch-action: manipulation; /* ダブルタップズーム防止 */
}
.carousel_control:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.carousel_control .play_icon {
display: none;
}
.carousel_control .pause_icon {
display: block;
}
.carousel_control.paused .play_icon {
display: block;
}
.carousel_control.paused .pause_icon {
display: none;
}
/* 商品紹介のアニメーション内側設定 */
.product_card_wrapper {
display: flex;
gap: min(1.38vw, 20px);
animation: scrollCards 40s linear infinite;
transition: transform 0.5s ease;
}
.product_card_wrapper.paused {
animation-play-state: paused;
}
.product_card_wrapper.manual-control {
animation: none; /* 手動操作時はアニメーション無効 */
}
.product_card {
flex-shrink: 0;
width: min(20.83vw, 300px);
background-color: white;
border-radius: min(0.69vw, 10px);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.product_card:hover {
transform: translateY(-5px);
}
.product_card img {
width: 100%;
height: min(20.83vw, 300px);
object-fit: cover;
}
.product_card h3 {
padding: min(1.38vw, 20px);
font-size: min(1.38vw, 20px);
font-weight: 700;
}
.detail_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.product_card p {
padding: 0 min(1.38vw, 20px) min(1.38vw, 20px);
font-size: min(1.11vw, 16px);
color: #666;
}
/* 商品詳細ボタン */
.detail_pro a {
color: var(--text-color);
font-size: min(0.83vw, 12px);
font-weight: 700;
padding: min(0.69vw, 10px);
border: 1px solid var(--text-color);
border-radius: min(0.35vw, 5px);
text-decoration: none;
}
@media screen and (max-width: 768px) {
.detail_pro a {
font-size: min(1.56vw, 12px);
padding: min(1.3vw, 10px);
}
@media screen and (max-width: 430px) {
.detail_pro a {
font-size: min(2.32vw, 10px);
padding: min(2.32vw, 10px);
}
}
}
.detail_pro a:hover {
background-color: var(--black--);
color: white;
}
/* ホバー可能なデバイスのみ（タッチパネル除外） */
@media (hover: hover) and (pointer: fine) {
.detail_pro a:hover {
background-color: var(--black--);
color: white;
}
}
.pt_black {
color: var(--text-color);
font-weight: 600;
}
/* カード枚数変更時: *4の部分をカード枚数に変更 (例: 5枚なら*5) */
@keyframes scrollCards {
0% {
transform: translateX(0);
}
100% {
transform: translateX(
calc(-1 * (min(20.83vw, 300px) + min(1.38vw, 20px)) * 8) /* ←カード枚数 */
);
}
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
.carousel_control_wrapper {
margin-top: 30px;
gap: 15px;
}
.carousel_btn,
.carousel_control {
width: 40px;
height: 40px;
font-size: 16px;
}
.product_card {
width: 250px;
}
.product_card img {
height: 250px;
}
.product_card h3 {
padding: 15px;
font-size: 18px;
}
.product_card p {
padding: 0 15px 15px;
font-size: 14px;
}
/* タブレット・スマホ用のアニメーション */
.product_card_wrapper {
gap: 20px; /* 固定値に変更 */
}
/* カード枚数変更時: (250px + 20px) × カード枚数 で再計算 */
/* 例: 5枚なら (250px + 20px) × 5 = 1350px */
@keyframes scrollCards {
0% {
transform: translateX(0);
}
100% {
transform: translateX(
-2160px
); /* (250px + 20px) × 4枚 = 1080px ←再計算 */
}
}
}
cssのprice_sectionの部分まで
@charset "UTF-8";
/* 価格セクションのcss設定 */
.price_table_section {
width: 100%;
background-color: var(--bg-beige);
}
.pts_inner {
max-width: min(80.55vw, 1160px);
margin-inline: auto;
padding-block: min(6.94vw, 100px);
padding-bottom: min(13.8vw, 200px);
}
@media screen and (max-width: 768px) {
.pts_inner {
max-width: 100%;
padding-top: min(12.7vw, 100px);
padding-bottom: min(26.04vw, 200px);
padding-inline: min(5.2vw, 40px);
}
@media screen and (max-width: 430px) {
.pts_inner {
padding-top: min(23.2vw, 100px);
padding-bottom: min(46.51vw, 200px);
padding-inline: min(6.97vw, 30px);
}
}
}
/* 価格セクションのタイトル*/
.pts_title_wrapper {
margin-bottom: min(4.16vw, 60px);
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
align-items: start;
gap: 0;
}
.pts_subtitle {
grid-column: 1;
grid-row: 1;
}
.pts_title {
grid-column: 1;
grid-row: 2;
}
.all_btn {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
}
.pts_subtitle {
font-size: min(1.38vw, 20px);
font-weight: 500;
color: var(--gold--);
}
@media screen and (max-width: 768px) {
.pts_subtitle {
font-size: min(2.54vw, 20px);
}
@media screen and (max-width: 430px) {
.pts_subtitle {
font-size: min(3.48vw, 15px);
}
}
}
.pts_title {
position: relative;
font-size: min(3.47vw, 50px);
font-weight: 700;
color: var(--text-color);
}
.pts_title::after {
content: "";
position: absolute;
top: 50%;
width: 60px;
height: 4px;
margin-left: min(1.39vw, 20px);
background-color: var(--text-color);
}
@media screen and (max-width: 768px) {
.pts_title {
font-size: min(3.9vw, 30px);
}
@media screen and (max-width: 430px) {
.pts_title {
font-size: min(4.65vw, 20px);
}
}
}
/*価格一覧ページへのリンク*/
.all_btn {
display: inline-block;
font-size: min(1.38vw, 20px);
font-weight: 500;
color: var(--text-color);
margin-top: min(1.38vw, 20px);
padding: min(0.83vw, 12px) min(1.66vw, 24px);
border: 2px solid var(--text-color);
border-radius: min(0.35vw, 5px);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.all_btn {
font-size: min(1.95vw, 15px);
}
@media screen and (max-width: 430px) {
.all_btn {
font-size: min(2.32vw, 10px);
}
}
}
.all_btn::after {
content: "→";
margin-left: min(0.69vw, 10px);
transition: transform 0.3s ease;
display: inline-block;
}
.all_btn:hover::after {
transform: translateX(5px);
color: var(--text-color);
}
/* スクロール案内テキスト */
.scrool_text {
font-size: 12px;
margin-top: 8px;
margin-bottom: 12px;
color: #555;
text-align: right;
}
.scrool_text::after {
content: "→";
display: inline-block;
margin-left: 5px;
animation: scrollArrow 0.8s infinite alternate;
}
@keyframes scrollArrow {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(5px);
}
}
/* 価格表の設定のテーブル */
/* ヘッダータイトルセル（左側3列分） */
.header-title-left {
background-color: #3c3c3c;
padding: 20px 15px;
border: 1px solid #ddd;
vertical-align: middle;
}
.title-content {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
/* タイトル */
.price-table-title {
text-align: left;
font-size: 20px;
font-weight: bold;
margin: 0 0 10px 0;
color: #fff;
}
/* 凡例 */
.price-table-legend {
text-align: left;
margin: 0;
font-size: 12px;
color: #fff;
font-weight: normal;
}
/* 時間帯ヘッダー */
.time-header {
font-size: 16px;
font-weight: bold;
padding: 20px 15px;
}
.time-header .price-table-title {
color: #fff;
font-size: 20px;
text-align: center;
margin: 0 0 10px 0;
}
.time-header .price-table-legend {
display: flex;
justify-content: center;
color: #fff;
text-align: center;
font-size: 12px;
}
/* 空白セル */
.empty-cell {
background-color: #3c3c3c;
}
.legend-item {
display: inline-block;
margin-right: 15px;
}
.color-box {
display: inline-block;
width: 20px;
height: 14px;
vertical-align: middle;
margin-right: 5px;
border: 1px solid #999;
}
.color-2year {
background-color: #b4c7dc;
}
.color-3month {
background-color: #d9d2c5;
}
.color-1month {
background-color: #e6d5bf;
}
/* テーブルラッパー（Flexコンテナ） */
.table-wrapper {
display: flex;
width: 100%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 固定列テーブル */
.table-fixed {
flex-shrink: 0;
}
/* スクロール可能テーブル */
.table-scroll {
flex-grow: 1;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* スクロールバーを非表示 */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}
/* Webkit系ブラウザ（Chrome, Safari）のスクロールバーを非表示 */
.table-scroll::-webkit-scrollbar {
display: none;
}
/* 共通のテーブルスタイル */
.price-table-left,
.price-table-right {
border-collapse: collapse;
background-color: #fff;
font-size: 14px;
}
.price-table-left {
width: auto;
}
.price-table-right {
min-width: 900px;
width: 100%;
}
/* 左側テーブルのヘッダーの高さを調整 */
.price-table-left thead tr:first-child th {
height: 155px;
vertical-align: middle;
}
@media screen and (max-width: 768px) {
.price-table-left thead tr:first-child th {
height: 128px;
}
}
@media screen and (max-width: 430px) {
.price-table-left thead tr:first-child th {
height: 127px;
}
}
/* ヘッダー */
.price-table-left thead th,
.price-table-right thead th {
padding: 15px 10px;
text-align: center;
font-weight: bold;
border: 1px solid #ddd;
white-space: nowrap;
}
.header-dark {
background-color: #3c3c3c;
color: #fff;
vertical-align: middle; /*中央配置*/
}
.header-light {
background-color: #666;
color: #fff;
}
/* テーブルボディ */
.price-table-left tbody td,
.price-table-right tbody td {
padding: 12px 10px;
text-align: center;
border: 1px solid #ddd;
white-space: nowrap;
}
/* 部屋名 */
.room-name {
background-color: #3c3c3c;
color: #fff;
font-weight: bold;
text-align: left;
padding-left: 15px !important;
}
/* 価格セルの背景色 */
.price-cell {
font-weight: 500;
}
/*border-rightの消去*/
.no-r-border {
border-right: none !important;
}
.bg-2year {
background-color: #b4c7dc;
}
.bg-3month {
background-color: #d9d2c5;
}
.bg-1month {
background-color: #e6d5bf;
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
.price-table-wrapper {
padding: 20px 10px;
}
.price-table-title {
font-size: 22px;
}
.price-table-legend {
font-size: 12px;
}
.legend-item {
display: block;
margin-bottom: 5px;
}
.price-table-left,
.price-table-right {
font-size: 12px;
}
.price-table-left thead th,
.price-table-left tbody td,
.price-table-right thead th,
.price-table-right tbody td {
padding: 8px 5px;
}
.room-name {
padding-left: 8px !important;
}
}
/* 印刷用スタイル */
@media print {
.price-table-wrapper {
max-width: 100%;
}
.table-scroll {
overflow: visible;
}
.price-table-left,
.price-table-right {
font-size: 10px;
}
}
/*価格表示説明*/
.pts_tax_p {
font-size: 12px;
color: #555;
margin-top: 20px;
text-align: right;
}
サイトは
こちらから