*/
.scroll-target {
scroll-margin-top: 100px; /* スマホでのヘッダーの高さ */
}
@media only screen and (min-width: 1025px) {
.scroll-target {
scroll-margin-top: 100px; /* PCでのヘッダーの高さ */
}
}
/*----------------------------------------------------------------------------------------------------
サムネイル用(サイズ調整・上下中央)
----------------------------------------------------------------------------------------------------*/
.aspectFit {
display:block;
position: relative;
width: 100%;
background-color:#f5f3ee;
overflow:hidden;
}
.aspectFit:before {
content:"";
display: block;
}
.aspectFit-11:before { padding-top: 100%; } /* 1:1 spect-ratio: 100 / 100; */
.aspectFit-43:before { padding-top: 75%; } /* 4:3 */
.aspectFit-32:before { padding-top: 66.66%; } /* 3:2 */
.aspectFit-169:before { padding-top: 56.25%;} /* 16:9 */
.aspectFit-219:before { padding-top: 42.857%; } /* 21:9 */
.aspectFit > img,
.aspectFit > video {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
display:inline;
max-width:100%;
max-height:100%;
width: auto;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
/*----------------------------------------------------------------------------------------------------
パンくずリスト
----------------------------------------------------------------------------------------------------*/
.breadcrumb ul::-webkit-scrollbar{
height:3px;
}
.breadcrumb ul::-webkit-scrollbar-track{
background-color: #ccc;
}
.breadcrumb ul::-webkit-scrollbar-thumb{
background-color: #333;
}
.breadcrumbWrap{
padding:10px 0 10px 0;
border-bottom:1px solid #eee;
}
.breadcrumb ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
overflow-x: scroll;
word-break: keep-all;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.breadcrumb ul li{
font-size:1.4rem;
padding-right:30px;
}
.breadcrumb ul li:not(:last-child) {
position:relative;
padding-right:30px;
}
.breadcrumb ul li:not(:last-child) ::after{
font-family: "FontAwesome";
content: "\f105 ";
display: block;
position: absolute;
width: 10px;
height: 15px;
top: 0px;
right: 8px;
}
.breadcrumb ul li a{
color:#000;
text-decoration:underline;
}
@media only screen and (min-width: 600px) {
.breadcrumb ul::-webkit-scrollbar {
display: none; /* PCではスクロールバー非表示（必要に応じて削除） */
}
}
@media only screen and (min-width: 1025px) {
.breadcrumb ul {
overflow-x: visible;
white-space: normal;
word-break: break-word;
}
}
/*----------------------------------------------------------------------------------------------------
フォーム 進捗バー
----------------------------------------------------------------------------------------------------*/
/* 基本スタイル (モバイルファースト: 600px未満の画面に適用) */
.progressBarWrap {
width: 100%;
overflow: hidden;
margin: 20px 0;
}
.progressBar {
list-style: none;
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 40px; /* モバイルでの高さを少し低めに設定 */
background-color: #eee;
}
.progressBar li {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
padding: 0 10px; /* モバイルでのパディングを調整 */
font-weight: bold;
color: #fff;
background-color: #ccc;
white-space: nowrap;
overflow: hidden;
font-size: 0.8em; /* モバイルでのフォントサイズを小さく */
}
/* 矢印の基本スタイル (モバイル向け) */
.progressBar li:not(:last-child)::after {
content: '';
position: absolute;
right: -20px; /* heightの半分 (45px / 2) */
top: 0;
width: 0;
height: 0;
border-top: 20px solid transparent; /* heightの半分 */
border-bottom: 20px solid transparent; /* heightの半分 */
border-left: 10px solid #ccc; /* heightの半分 */
z-index: 1;
}
.progressBar li:not(:first-child)::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 20px solid transparent; /* heightの半分 */
border-bottom: 20px solid transparent; /* heightの半分 */
border-left: 10px solid #ccc; /* heightの半分 */
z-index: 2;
}
/* アクティブなステップのスタイル */
.progressBar li.progressBar-active {
background-color: #B84A4A;
color: #fff;
}
.progressBar li.progressBar-active:not(:last-child)::after {
border-left-color: #B84A4A;
}
.progressBar li.progressBar-active + li::before {
border-left-color: #B84A4A;
}
/* 中画面対応: min-width: 600px */
@media only screen and (min-width: 600px) {
.progressBar {
height: 50px; /* 高さを少し上げる */
}
.progressBar li {
padding: 0 15px; /* パディングを調整 */
font-size: 0.9em; /* フォントサイズを調整 */
}
/* 矢印のサイズ調整 */
.progressBar li:not(:last-child)::after {
right: -25px; /* heightの半分 */
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #ccc;
}
.progressBar li:not(:first-child)::before {
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #ccc;
}
}
/* 大画面対応: min-width: 1025px */
@media only screen and (min-width: 1025px) {
.progressBar {
height: 60px; /* 高さを元のサイズに戻す */
}
.progressBar li {
padding: 0 20px; /* パディングを調整 */
font-size: 1em; /* フォントサイズを元のサイズに戻す */
}
/* 矢印のサイズ調整 */
.progressBar li:not(:last-child)::after {
right: -30px; /* heightの半分 */
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #ccc;
}
.progressBar li:not(:first-child)::before {
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #ccc;
}
}
/*----------------------------------------------------------------------------------------------------
ページナビ
----------------------------------------------------------------------------------------------------*/
/*