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; /* フォントサイズを調整 */
}
/* 「選択しない」テキストリンクのスタイル */
.skip-link {
font-size: 16px;
font-weight: bold;
color: #669988;
text-decoration: none; /* 下線を消す */
transition: opacity 0.2s; /* ホバー効果を滑らかに */
}
.option-button {
display: inline-block;
background-color: #669988;
color: #ffffff;
font-size: 18px;
font-weight: bold;
text-align: center;
text-decoration: none; /* リンクの下線を消す */
padding: 14px 28px; /* 内側の余白（上下、左右） */
border-radius: 8px; /* 角を丸くしてカプセル型に */
border: none; /* 枠線を消す */
cursor: pointer; /* マウスカーソルを指マークに */
transition: background-color 0.3s; /* ホバー効果を滑らかに */
flex-grow: 1; /* 残りの利用可能なスペースをすべて埋めるように広がる */
}
.option-button:after {
content: '';
display: inline-block;
width: 12px; /* 画像の幅に合わせて調整 */
height: 12px; /* 画像の高さに合わせて調整 */
margin-left: 10px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
}
.option-button:hover {
background-color: #f0f0f0; /* ホバー時の背景色 */
}
/* スマートフォン向けのレスポンシブ対応 */
@media (max-width: 768px) {
.options {
grid-template-columns: 1fr; /* 1列にする */
}
h2 {
font-size: 20px;
}
.option-button {
font-size: 16px;
padding: 16px 16px;
}
}
.option-link {
text-decoration: none;
color: inherit;
display: block;
}
.option-link:hover {
opacity: 0.7; /* ホバー時に不透明度を70%にする */
transition: opacity 0.2s ease-in-out; /* 変化を滑らかにするためのトランジション（任意） */
}
/* グリッドコンテナ */
.category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列のグリッド */
gap: 16px; /* アイテム間の余白 */
padding:40px 0;
max-width: 800px;
margin: 0 auto;
}
/* 各アイテム */
.category-item {
/* labelがクリック範囲になるため、ここではスタイル不要 */
}
/* 画像を囲むラッパー */
.image-wrapper {
position: relative;
cursor: pointer;
}
/* 画像のスタイル */
.category-item img {
width: 100%;
/* 画像を正方形に保ち、はみ出た部分はトリミング */
aspect-ratio: 1 / 1;
object-fit: cover;
display: block; /* 余白をなくす */
}
/* アイテムのテキスト */
.category-item p {
text-align: center;
font-size: 14px;
color: #333;
margin: 8px 0 0;
}
/* 非表示のチェックボックス */
.hidden-checkbox {
display: none;
}
/* オーバーレイ（通常は非表示） */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4); /* 半透明の黒 */
display: flex;
justify-content: center;
align-items: center;
opacity: 0; /* 透明にする */
transition: opacity 0.3s ease;
/* オーバーレイ自体はクリックできないようにする */
pointer-events: none;
}
/* チェックマークアイコンのスタイル */
.check-icon {
width: 40px;
height: 40px;
background-color: white;
border-radius: 50%; /* 円形にする */
display: flex;
justify-content: center;
align-items: center;
}
.check-icon svg {
width: 24px;
height: 24px;
stroke: #333; /* 線の色 */
stroke-width: 3; /* 線の太さ */
}
/*
* チェックボックスがチェックされたら、
* 隣のlabel内のオーバーレイを表示する
*/
.hidden-checkbox:checked + label .overlay {
opacity: 1; /* 不透明にする */
}
/* スマートフォン用のレスポンシブ対応 */
@media (max-width: 768px) {
.category-grid {
gap: 12px;
}
.category-item p {
font-size: 12px;
}
}
/* -------------------------
* 固定フッター
* ------------------------- */
.footer-nav {
position: fixed; /* 画面下部に固定 */
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
padding: 20px 24px 20px; /* 内側の余白 */
z-index: 100; /* 他の要素より手前に表示し、paddingを含めて幅100%にする */
box-sizing: border-box;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); /* 上部に影をつける */
display: flex; /* 中の要素を横並びにする */
align-items: center;
justify-content: center; /* 中央寄せ */
gap: 24px;
}
/* ==================================================
* ↓ スマートフォン用のスタイル ↓
* ==================================================
*/
@media (max-width: 768px) {
/* フッターのレイアウトとサイズを調整 */
.footer-nav {
justify-content: center; /* 中央寄せ */
padding: 15px 20px 20px;
gap: 16px;
}
.skip-link {
font-size: 12px;
}
.next-button {
font-size: 14px;
padding: 10px 32px;
}
}
#idkvjy9vcw4k { visibility: visible !important; }
気になるカテゴリーを選択してください
カテゴリーは複数選択することができます
