/* ●文字化けを防ぐ */
@charset "UTF-8";
/* ●設定した文字サイズを正しく反映する(通常は16px) */
html {
font-size: 100%;
scroll-behavior: smooth;
scroll-padding-top: 140px;
}
/* ●書体の設定・行の高さの設定 1.7 色の指定を行う */
body{
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
line-height: 1.7;
color: #432;
}
/* ●タグの傍線はなしで設定している */
a {
text-decoration: none;
color: #432; /* ●リンクの色 茶色 */
}
a:hover {
color: #0bd; /* ●カーソルを乗せる 青色 */
}
ul {
list-style: none; /* ●リストの先頭の黒丸除去 */
}
/* ●文字の大きさと配置指定 */
.font_ichi {
text-align: center; /* ●文字の位置は真ん中 */
}
.font_bold {
font-weight: bold; /* ●文字は太字 */
}
.font_size_small {
font-size: medium; /* ●文字の大きさ標準 */
}
.font_size_medium {
font-size: x-large; /* ●文字の大きさそこそこ大きい */
}
.font_size_big {
font-size: xx-large; /* ●文字の大きさ一番大きい */
}
.font_border {
font-size: 2rem;
font-family: sans-serif;
font-weight: bold;
display: inline-block;
background-image: linear-gradient(transparent 50%, #ff6 50%);
padding-bottom: .25rem;
}
article ul li::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #93d8d0;
display: inline-block;
margin: 0 8px 2px 0;
}
.bunshou {
text-align: left; /* ●文字の配置 左 */
}
/* ●画像の大きさの指定（画像が親要素よりも大きくなることを防ぐ */
img {
max-width: 100%;
vertical-align:top;
}
/* ●コンテンツ全体を囲むボックス最大幅を指定する */
.post_img {
object-fit: cover;
border-radius: 10%;
}
.wrapper {
max-width: 1200px; /* ●横幅最大1200pxに指定 */
margin: 0 auto; /* ●中央に配置する指定 */
padding: 0 4%; /* ●スマホ向け余白の指定 */
}
/* iframe */
iframe {
width: 100%;
vertical-align:top;
}
/* ●HEADER
------------------------------- */
/* ●ヘッダー部分の固定 */
header {
background: #fff;
padding: 1rem 0;
position: fixed; /* ●上部に固定 */
width: 100%; /* ●横幅100% */
z-index: 1; /* ●全面に表示する */
}
/* ●ヘッダー右のナビ・ボタン部分 */
.main-nav {
display: flex; /* ●ナビ・ボタンを横並びにする */
margin-top: 14px; /* ●ナビ・ボタンの上部 14pxに指定 */
list-style: none; /* ●リストの先頭の黒丸除去 */
}
.main-nav li {
margin-left: 10px; /* ●ナビ・ボタンの行間 10pxに設定 */
}
.main-nav a {
color: #432; /* ●リンクの色 茶色 */
}
.main-nav a:hover {
color: #0bd; /* ●カーソルを乗せる 青色 */
}
.page-header {
display: flex; /* ●ナビ・ボタンを横並びにする */
justify-content: center; /* ●真ん中に並べる */
}
#home {
background-image: url(../image/kabegami_1.jpg); /* ●メイン画像部分のバック画像 */
min-height: 50vh; /* ●メイン画像部分のバック画像の大きさを半分に指定する */
padding-top: 150px;
}
#home_1 {
background: #f3f1e7; /* ●背景色 薄いグレー色 */
padding:20px 0px 20px 0px; /* ●メイン画像部分のバック画像の大きさを半分に指定する */
}
#home_2 {
background-image: url(../image/444328_1200.jpg); /* ●メイン画像部分のバック画像 */
padding:20px 0px 20px 0px; /* ●メイン画像部分のバック画像の大きさを半分に指定する */
}
#home_3 {
background-image: url(../image/kabegami_2.jpg); /* ●メイン画像部分のバック画像 */
min-height: 50vh; /* ●メイン画像部分のバック画像の大きさを半分に指定する */
padding-top: 150px;
}
.big-bg {
background-size: cover; /* ●メイン画像の縦横比率を保ったまま画面いっぱいに広げる */
background-position: center top; /* ●メイン画像の位置は真ん中で上に寄せる */
}
.grid {
display: grid; /* ●タイル型レイアウト */
gap: 26px; /* ●要素同士の余白 */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* ●要素の幅が240pxより小さくならず画面の幅に合わせて伸縮 auto-fitで見切れなくする */
margin-top: 6%; /* ●上部の余白 */
margin-bottom: 10px; /* ●下部の余白 */
text-align: center; /* ●文字の配置 */
}
/* ●タイル型レイアウトの名前部分 */
.in-grid_name {
font-size: 1.2rem; /* ●文字の大きさ */
background: #00a0c6; /* ●背景色 濃い緑色 */
background-image: url(../image/444328_500.jpg);
color: #fff; /* ●文字の色 白色 */
border-radius: 5px 5px 0px 0px; /* ●上部の角を丸める */
padding: 10px 5px; /* ●文字の余白指定 */
}
/* ●タイル型レイアウトのサイズ表記部分 */
.in-grid_size {
font-size: 1.2rem; /* ●文字の大きさ */
background: #00a0c6; /* ●背景色 濃い緑色 */
background-image: url(../image/444328_500.jpg);
color: #fff; /* ●文字の色 白色 */
padding: 10px 5px; /* ●文字の余白指定 */
}
/* ●タイル型レイアウトの値引き表記部分 */
.in-grid_nebiki {
font-size: 1.5rem; /* ●文字の大きさ */
background: #fff; /* ●背景色 白色 */
color: #000; /* ●文字の色 白色 */
padding: 10px 5px; /* ●文字の余白指定 */
}
/* ●タイル型レイアウトの金額表記部分 */
.in-grid_price {
font-size: 2.5rem; /* ●文字の大きさ */
background: #fff; /* ●背景色 白色 */
color: #ff0000; /* ●文字の色 赤色 */
border-radius: 0px 0px 5px 5px; /* ●下部の角を丸める */
padding: 10px 5px; /* ●文字の余白指定 */
}
.grid_little {
display: grid; /* ●タイル型レイアウト */
gap: 26px; /* ●要素同士の余白 */
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* ●要素の幅が240pxより小さくならず画面の幅に合わせて伸縮 auto-fitで見切れなくする */
margin-top: 6%; /* ●上部の余白 */
margin-bottom: 10px; /* ●下部の余白 */
text-align: center; /* ●文字の配置 */
}
.bg_title_black {
background: #000;
background-image: url(../image/22446213.jpg);
border-radius: 20px 20px 0px 0px;
padding: 20px;
margin: auto;
margin-top: 6%;
font-weight: bold; /* ●文字は太字 */
}
.bg_title_white {
background: #fff;
border-radius: 0px 0px 20px 20px;
padding: 20px;
margin: auto;
margin-bottom: 6%;
}
.bg_title_green {
background: #00a0c6; /* ●囲い色はうぐいす色 */
border-radius: 20px; /* ●角丸の角度 4方向すべて20px */
padding: 20px; /* ●囲いと文字の幅 */
margin: auto; /* ●水平方向に中央配置 */
font-weight: bold; /* ●文字は太字 */
}
.bg_title_blue {
background: #0000ff; /* ●囲い色は青色 */
border-radius: 20px; /* ●角丸の角度 4方向すべて20px */
padding: 20px; /* ●囲いと文字の幅 */
margin: auto; /* ●水平方向に中央配置 */
font-weight: bold; /* ●文字は太字 */
}
.title_margin {
margin: 20px;
}
.button:hover {
background: #0090aa;
}
/* ●ボタンを合わせると少し小さくなる */
.btn {
overflow:hidden;
}
.btn {
transform:scale(1);
} /* ●元画像の大きさ 1は同じ */
.btn:hover {
transform:scale(0.98); /* ●小さくなった時のサイズ 0.98倍 */
transition:0.3s; /* ●小さくなるのにかかる時間 */
}
/* ●出張買取冷蔵庫洗濯機テーブルの設定 */
.syuchou_th {
color: #fff;
background: #0000FF; /* ●背景色 青色 */
padding: 20px 10px; /* ●文字の余白指定 */
border-width: 1px;
border-style: solid;
}
/* ●品目テーブルの設定 */
.hinmoku_table {
text-align: center; /* ●真ん中に表示 */
padding: 20px 10px; /* ●文字の余白指定 */
margin: 50px 10px; /* ●文字の余白指定 */
}
.hinmoku_th {
color: #fff;
background: #00a0c6; /* ●背景色 濃い緑色 */
padding: 20px 10px; /* ●文字の余白指定 */
border-width: 1px;
border-style: solid;
}
.hinmoku_tr {
text-align: center;
padding: 20px 10px; /* ●文字の余白指定 */
border-width: 1px;
border-style: solid;
}
.hinmoku_td {
text-align: left;
padding: 20px 10px; /* ●文字の余白指定 */
border-width: 1px;
border-style: solid;
}
.kaisyu_table {
text-align: center; /* ●真ん中に表示 */
padding: 20px 10px; /* ●文字の余白指定 */
margin:auto; /* ● */
}
.kaisyu_th {
color: #000;
background: #B2B2B2; /* ●背景色 濃いグレー色 */
padding: 20px 10px; /* ●文字の余白指定 */
border-width: 1px;
border-style: solid;
}
.kaisyu_tr {
text-align: center;
padding: 20px 10px; /* ●文字の余白指定 */
}
.kaisyu_td {
text-align: left;
padding: 20px 10px; /* ●文字の余白指定 */
border-width: 1px;
border-style: solid;
}
/* ●地名テーブルの設定 */
.timei_table {
text-align: center; /* ●真ん中に表示 */
}
.timei_tr {
font-size: 0.6rem; /* ●文字の大きさ */
}
/* ●Googleマップの設定 */
.google_head {
background: #4169e1; /* ●背景色 青色 */
border-radius: 10px 10px 0px 0px; /* ●角を丸める */
padding: 20px; /* ●スマホ向け余白の指定 */
margin: auto; /* ●文字の余白指定 */
margin-top: 6%; /* ●上部の余白 */
}
.google_main {
background: #4169e1; /* ●背景色 青色 */
}
.google_footer {
background: #4169e1; /* ●背景色 青色 */
border-radius: 0px 0px 10px 10px; /* ●角を丸める */
margin: auto; /* ●文字の余白指定 */
margin-bottom: 20px; /* ●下部の余白 */
padding: 20px; /* ●スマホ向け余白の指定 */
}
.sub-title {
margin-bottom: 30px;
}
/* フッター
------------------------------- */
footer {
background: #432; /* ●背景の色 焦げ茶 */
text-align: center; /* ●真ん中に表示 */
padding: 26px 0; /* ●文字の余白を指定 */
}
footer p {
color: #fff; /* ●文字の色 白を指定 */
font-size: 0.875rem; /* ●文字の大きさを指定 */
}
/* ●線を引きたいとき */
.line {
border-bottom: 5px dashed #ddd;
margin-top: 6%; /* ●上部の余白 */
margin-bottom: 50px; /* ●下部の余白 */
}
/* ●回収事例画像の設定 */
.kaisyu_gazou {
padding: 30px 30px; /* ●文字の余白指定 */
margin:auto; /* ● */
}
/* ●会話テーブルの設定 */
.kaiwa_table {
font-size: 1rem; /* ●文字の大きさ 1remは16px */
padding: 50px 20px; /* ●テーブル全体の内側の余白指定 上下 10px 左右 20px */
margin: auto; /* ●テーブル全体の外側の余白指定 autoは自動設定 */
}
/* ●会話2テーブルの行部分（横) */
.kaiwa_tr {
background: #fff; /* ●背景の色 白色 */
}
/* ●会話２テーブル 会話セル部分 */
.kaiwa2_td {
background: #fff; /* ●背景色 白色 */
text-align: left; /* ●文字を左寄せで表示 */
padding: 10px 10px; /* ●セルの内側の余白指定 上下 10px 左右 20px */
border-radius: 10px 10px 10px 10px; /* ●角を丸める */
border-style: dotted; /* ●点線で囲む */
border-color: #888888; /* ●線の色 グレー */
}
/* ●会話３テーブル 画像いれるセル部分 */
.kaiwa3_td {
background: #fff; /* ●背景色白色 */
text-align: left; /* ●文字を左寄せで表示 */
padding: 10px 20px; /* ●セルの内側の余白指定 上下 10px 左右 20px */
}
@media (max-width: 600px) {
.font_size_big {
font-size: x-large;
}
.font_size_medium {
font-size: medium;
}
img {
width: 100%; /* 幅を親要素の100%にする */
height: auto; /* アスペクト比を維持するために高さを自動調整する */
}
}
/* スライドショー全体の枠 */
.slider-container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
/* レスポンシブ対応：高さを幅に対する比率で指定 */
height: 0;
padding-top: 56.25%; /* 例: 16:9 のアスペクト比 */
/* 【修正・追加】ページネーション用のスペースを下に確保 */
padding-bottom: 30px;
position: relative;
overflow: hidden;
}
/* スライド画像を格納するラッパー */
.slides-wrapper {
display: flex;
width: 500%; /* 【修正】6枚なので 600% */
height: 100%;
transition: transform 0.1s ease-in-out; /* スライドの間隔を早く */
position: absolute;
top: 0;
left: 0;
}
/* リンク要素（タグ）の設定 */
.slide-link {
width: 25%; /* 【修正】6枚なので 16.6666% (100% ÷ 6) */
height: 100%;
text-decoration: none;
display: block;
}
/* 各画像の設定 */
.slide {
width: 100%;
height: 100%;
object-fit: contain;
background-color: #FFFFFF;
}
/* ページネーション（ドット）の配置 */
.pagination {
position: absolute;
/* 【修正】bottom: 0px にすることで、padding-bottomで確保した余白の一番下に配置する */
bottom: 0px;
/* 幅をslider-container全体に広げる */
width: 100%;
/* ドットを中央揃えにする */
text-align: center;
/* z-indexを上げて、ドットが手前に表示されるようにする */
z-index: 10;
}
/* ドット自体のデザイン */
.dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background-color: #ccc; /* 非アクティブ時の色 */
cursor: pointer;
}
/* アクティブなドットのデザイン */
.dot.active {
background-color: #333; /* アクティブ時の色 */
}