2025/06/20
/* 以下全体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: 20px; /* 質問エリアとの間隔 */
text-align: left; /* 画像を左に寄せる場合 (画像自体が左揃えのデザインなら不要かも) */
}
.progress_image {
display: block; /* 画像下の余白を防ぐ */
max-width: 100%; /* 親要素の幅を超えないようにする */
height: auto; /* アスペクト比を保つ */
/* 必要に応じて画像の幅や高さを直接指定することもできます */
/* 例: width: 300px; */
}
/* --- プログレスバー画像のスタイル ここまで --- */
/* --- 結果画像のスタイル --- */
.result_image_container {
display: block;
width: 100%; /* コンテナの幅を100%に */
margin-bottom: 60px; /* 質問エリアとの間隔 */
text-align: left; /* 画像を左に寄せる場合 (画像自体が左揃えのデザインなら不要かも) */
}
.result_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; /* フォントサイズを調整 */
}
.options {
display: grid;
grid-template-columns: 1fr; /* ★常に1列にする */
gap: 20px; /* ボタン間のスペースは維持、または調整 */
}
.option-button {
background-color: #ffffff;
color: #333;
border: 2px solid #669988;
border-radius: 8px;
padding: 20px 20px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
width: 100%; /* ボタンがaタグの幅いっぱいに広がるように */
box-sizing: border-box; /* paddingとborderをwidthに含める */
pointer-events: none; /* ★重要：aタグのクリックを妨げないように */
}
.option-button:after {
content: '';
display: inline-block;
width: 12px; /* 画像の幅に合わせて調整 */
height: 12px; /* 画像の高さに合わせて調整 */
margin-left: 10px;
background-image: url('https://clas.style/images/other/0000155625_70297f852ef0787c1bd64fbc20b9ef386717e96eaea0328e8faedc6cf9d35d638e85083ebc6a31a5e6cd973154798b23a9c32b9ba1e0ae735f6ed1f69e62b29e.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
}
.option-button.full-width {
grid-column: 1 / -1; /* グリッドの開始列から最終列まで広げる */
}
.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; /* 変化を滑らかにするためのトランジション（任意） */
}
#idkvjy9vcw4k { visibility: visible !important; }
