2025/06/11
/* 以下全体CSS */
.HeaderForSp__logoTitle {
display: none;
}
/* PCで非表示 */
.sp_none{
display: none;
}
.pc_none{
display: block;
}
@media screen and (min-width: 768px) {
.pc_none{
display:none;
}
.sp_none{
display: block;
}
}
@media screen and (min-width: 768px) {
body.content2 .SectionComponent:first-child {
margin-top: 0;
}
}
body.content2 {
background-color: #E0EBE7;
}
/* 記事タイトル非表示 */
body.content2 .TitleComponent h1 {
display: none;
}
/* CPバナー非表示
#pt-element-ddd6d1fb {
display: none;
}*/
/* 日付非表示 */
.datetime {
display: none;
}
/* パンくず非表示 */
body.content2 .BreadCrumbSection {
display: none;
}
/* 以下全体CSSここまで */
.shindan_warp {
max-width: 960px;
margin: 32px auto;
padding: 32px;
background-color: #E0EBE7;
display: block;
justify-content: center;
align-items: center;
min-height: 100vh;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.shindan_warp {
width: 80%; /* PC画面以上の場合に幅を80%に */
}
}
@media screen and (max-width: 768px) {
.shindan_warp {
padding-top: 0;
}
}
.shindan_image {
display: block;
width: 100%;
height: auto;
}
.shindan_start {
display: block;
width: 100%;
height: auto;
}
.shindan_start:hover {
opacity: 0.8;
}
.shindan_image-item {
width: 100%;
height: auto;
}
/* --- プログレスバー画像のスタイル --- */
.progress_image_container {
display: block;
width: 100%; /* コンテナの幅を100%に */
margin-bottom: 60px; /* 質問エリアとの間隔 */
text-align: left; /* 画像を左に寄せる場合 (画像自体が左揃えのデザインなら不要かも) */
}
.progress_image {
display: block; /* 画像下の余白を防ぐ */
max-width: 100%; /* 親要素の幅を超えないようにする */
height: auto; /* アスペクト比を保つ */
/* 必要に応じて画像の幅や高さを直接指定することもできます */
/* 例: width: 300px; */
}
/* --- プログレスバー画像のスタイル ここまで --- */
.container {
border-radius: 10px;
text-align: center;
}
h2 {
color: #333; /* 見出しの色 */
margin-bottom: 30px;
font-size: 26px; /* フォントサイズを調整 */
}
/* スマートフォン向けのレスポンシブ対応 */
@media (max-width: 768px) {
h2 {
font-size: 20px;
}
}
/* ギャラリー全体を囲むコンテナ */
.gallery-container {
max-width: 1200px;
margin: 0 auto;
}
/* グリッドレイアウトの設定 */
.gallery-grid {
display: grid;
/* 均等な幅の2つのカラムを作成 */
grid-template-columns: repeat(2, 1fr);
/* 画像間の隙間 */
gap: 16px;
}
/* 各画像（リンク）のスタイル */
.gallery-item {
display: block; /* aタグをブロック要素にする */
overflow: hidden; /* ホバー時に画像がはみ出ないようにする */
}
/* 画像のスタイル */
.gallery-item img {
width: 100%; /* 親要素の幅いっぱいに広げる */
height: auto; /* 画像の縦横比を維持する */
display: block; /* 画像下の余分な隙間をなくす */
}
/* マウスを乗せた時に画像を少し拡大する */
.gallery-item:hover img {
opacity: 0.7; /* ホバー時に不透明度を70%にする */
transition: opacity 0.2s ease-in-out; /* 変化を滑らかにするためのトランジション（任意） */
}
/* 画面幅が768px以下の場合（スマートフォンなど） */
@media (max-width: 768px) {
.gallery-grid {
gap: 10px;
}
}
#idkvjy9vcw4k { visibility: visible !important; }
