:root{--main:#1d6b43;--main-d:#14502f;--main-pale:#eef6f0;--accent:#f26b00;--accent-d:#b84f00;--ink:#2a2a2a;--sub:#666;--line:#dcdcdc;--bg:#fff;--bg2:#f6f6f3;--link:#1667b8}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;font-size:16px;line-height:1.85;word-wrap:break-word;font-feature-settings:"palt" 0}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--link)}
a:hover{text-decoration:none}
table{border-collapse:collapse}
.hd{background:#fff;border-bottom:3px solid var(--main)}
.hd__in{max-width:1180px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hd__logo{margin:0;line-height:0;font-size:1rem}
.hd__logo img{width:210px}
.hd .hd__cta{display:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.cols{display:block}
.main{min-width:0}
.side{margin-top:40px}
.crumb{font-size:12px;color:var(--sub);margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:0 4px}
.crumb li:not(:last-child)::after{content:"›";margin-left:4px;color:#aaa}
.crumb a{color:var(--sub)}
.crumb li:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.art__head{margin:16px 0 20px}
.art__cat{display:inline-block;background:var(--main);color:#fff;font-size:12px;font-weight:700;padding:2px 10px;border-radius:3px;text-decoration:none}
.art__ttl{font-size:1.45rem;line-height:1.5;margin:.4em 0 .4em;font-weight:800;letter-spacing:.01em}
.art__meta{font-size:12px;color:var(--sub);display:flex;gap:12px;flex-wrap:wrap;margin:0}
.art__pr{font-size:11px;color:var(--sub);background:var(--bg2);display:inline-block;padding:1px 8px;border-radius:3px;margin:8px 0 0}
.art__eye{margin:16px 0 0}
.art__eye img{display:block;width:100%;border-radius:4px}
.body{font-size:16px}
.body>*:first-child{margin-top:0}
.body p{margin:0 0 1.4em}
.body h2{font-size:1.3rem;line-height:1.5;margin:2.6em 0 1.1em;padding:.7em .8em;background:var(--main);color:#fff;border-radius:4px;font-weight:800}
.body h3{font-size:1.15rem;line-height:1.5;margin:2.2em 0 1em;padding:0 0 .35em;border-bottom:2px solid var(--main);font-weight:800}
.body h4{font-size:1.05rem;margin:1.8em 0 .8em;font-weight:800}
.body ul,.body ol{margin:0 0 1.5em;padding-left:1.4em}
.body li{margin:.3em 0}
.body figure{margin:0 0 1.6em}
.body figcaption{font-size:13px;color:var(--sub);text-align:center}
.body blockquote{margin:0 0 1.5em;padding:1em 1.2em;background:var(--bg2);border-radius:4px}
.body .wp-block-table{margin:0 0 1.6em;overflow:visible}
.body .wp-block-table>.tbl{margin:0}
.body .tbl{margin:0 0 1.6em;max-width:100%}
.body .tbl--scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.body table{width:100%;font-size:14px;line-height:1.6;margin:0;border-collapse:collapse}
.body .tbl--fit{overflow-x:auto}
.body .tbl--fit table{table-layout:auto}
.body .tbl--scroll table{min-width:560px}
.body th,.body td{border:1px solid var(--line);padding:.45em .5em;vertical-align:top;text-align:left;word-break:normal;overflow-wrap:break-word}
.body thead th,.body thead td{background:var(--main);color:#fff;font-weight:700}
.body tbody th{background:var(--main-pale);color:var(--ink);font-weight:700}
.body .tbl-hint{display:block;font-size:12px;color:var(--sub);margin:0 0 4px}
@media (min-width:600px){.body th,.body td{padding:.6em .7em}.body .tbl-hint{display:none}}
.body strong{font-weight:800}
.body .has-text-align-center{text-align:center}
.body .aligncenter{margin-left:auto;margin-right:auto;text-align:center}
.toc{border:2px solid var(--main);border-radius:6px;margin:2em 0;background:#fff}
.toc__ttl,.body .toc__ttl{font-weight:800;padding:.6em 1em;background:var(--main-pale);margin:0}
.toc ol{margin:0;padding:.3em 1em .2em 2.4em;font-size:15px;line-height:1.6}
.toc li{margin:.45em 0}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--main);text-decoration:underline}
.toc__rest summary{cursor:pointer;list-style:none;margin:.2em 1em .8em;padding:.45em;text-align:center;font-size:14px;font-weight:700;color:var(--main);border:1px solid var(--main);border-radius:999px}
.toc__rest summary::-webkit-details-marker{display:none}
.toc__rest[open] summary{display:none}
.toc__rest ol{padding-top:0}
.toc>ol{padding-bottom:.5em}
.toc>ol:last-child{padding-bottom:.8em}
.swl-marker.mark_yellow{background:linear-gradient(transparent 60%,#fff26a 60%)}
.swl-marker.mark_green{background:linear-gradient(transparent 60%,#c4f0c8 60%)}
.swl-marker.mark_orange{background:linear-gradient(transparent 60%,#ffd7a8 60%)}
.u-fz-xs{font-size:.75em}.u-fz-s{font-size:.9em}.u-fz-l{font-size:1.2em}
.has-swl-deep-04-background-color{background:#f26b00;color:#fff;padding:.1em .4em}
.has-swl-gray-background-color{background:#eee;padding:.1em .4em}
.has-swl-pale-01-background-color{background:#fff1f1}.has-swl-pale-03-background-color{background:#eef8ee}.has-swl-pale-04-background-color{background:#fff7e8}
.u-mb-0{margin-bottom:0!important}.u-mb-10{margin-bottom:.5em!important}
.is-style-shadow img{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.is-style-balloon_box{position:relative;background:var(--main);color:#fff;border-radius:6px;padding:.6em 1em!important}
.is-style-balloon_box::after{content:"";position:absolute;left:50%;bottom:-10px;margin-left:-10px;border:10px solid transparent;border-bottom:0;border-top-color:var(--main)}
.is-style-dent_box{background:var(--bg2);border-radius:6px;padding:.8em 1em}
.is-style-num_circle{list-style:none;padding-left:0!important;counter-reset:nc}
.is-style-num_circle>li{position:relative;padding-left:2.1em;counter-increment:nc}
.is-style-num_circle>li::before{content:counter(nc);position:absolute;left:0;top:.2em;width:1.6em;height:1.6em;line-height:1.6em;text-align:center;border-radius:50%;background:var(--main);color:#fff;font-size:.85em;font-weight:700}
.is-style-check_list,.is-style-good_list,.is-style-bad_list{list-style:none;padding-left:0!important}
.is-style-check_list>li,.is-style-good_list>li,.is-style-bad_list>li{position:relative;padding-left:1.6em}
.is-style-check_list>li::before,.is-style-good_list>li::before{content:"✓";position:absolute;left:0;color:var(--main);font-weight:800}
.is-style-bad_list>li::before{content:"×";position:absolute;left:0;color:#d33;font-weight:800}
.is-style-icon_announce{background:#fff5f0;border-radius:6px;padding:.8em 1em}
.wp-block-columns{display:flex;flex-wrap:wrap;gap:1em;margin:0 0 1.6em}
.wp-block-column{flex:1 1 0;min-width:0}
.sp_column2>.wp-block-column{flex-basis:calc(50% - .5em)}
.wp-block-group{margin:0 0 1.6em}
.swell-block-button{text-align:center;margin:1.6em 0}
.swell-block-button__link{display:inline-block;min-width:260px;max-width:100%;background:var(--main);color:#fff!important;text-decoration:none;font-weight:800;padding:.9em 1.6em;border-radius:999px;box-shadow:0 4px 0 var(--main-d)}
.swell-block-step{margin:2em 0;counter-reset:step}
.swell-block-step__item{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;padding:0 0 1.6em}
.swell-block-step__item::before{content:"";position:absolute;left:25px;top:52px;bottom:0;width:2px;background:var(--line)}
.swell-block-step__item:last-child::before{display:none}
.swell-block-step__number{grid-column:1;grid-row:1;width:52px;height:52px;border-radius:50%;background:var(--main);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1;counter-increment:step;font-weight:700}
.swell-block-step__number .__label{font-size:9px;letter-spacing:.06em;display:block}
.swell-block-step__number .__label::after{content:counter(step);display:block;font-size:18px;margin-top:2px;letter-spacing:0}
.body .swell-block-step__title{grid-column:2;grid-row:1;align-self:center;font-weight:800;font-size:1.1em;line-height:1.45;margin:0;padding:0}
.swell-block-step__body{grid-column:2;grid-row:2;padding-top:.5em}
.swell-block-step__body>*:last-child{margin-bottom:0}
.body .step-badge{margin:0 0 .6em}
.step-badge span{display:inline-block;font-size:12px;font-weight:700;line-height:1.4;color:var(--main-d);background:var(--main-pale);border:1px solid #cfe3d6;border-radius:999px;padding:.2em .8em}
.btn-wrap{text-align:center;margin:1.2em 0}
.aff-btn,.btn-cta,.cv-button{display:inline-block;min-width:min(300px,100%);background:var(--accent);color:#fff!important;font-weight:800;font-size:16px;line-height:1.4;text-decoration:none;padding:.95em 1.6em;border-radius:999px;box-shadow:0 5px 0 var(--accent-d);transition:transform .08s,box-shadow .08s;text-align:center}
.aff-btn:hover,.btn-cta:hover,.cv-button:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--accent-d)}
.aff-btn::after{content:" ›";font-weight:800}
.sec-ttl{font-size:1.15rem;font-weight:800;margin:2.4em 0 1em;padding:0 0 .4em;border-bottom:3px solid var(--main)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.card a{display:flex;gap:12px;color:var(--ink);text-decoration:none;padding:10px;border:1px solid var(--line);border-radius:6px;background:#fff;height:100%}
.card a:hover{border-color:var(--main)}
.card__img{flex:0 0 128px;aspect-ratio:2/1;background:var(--bg2);border-radius:3px;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:contain;display:block}
.card__noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--main);font-weight:800;font-size:12px}
.card__ttl{font-size:14px;font-weight:700;line-height:1.55;margin:0}
.card__date{font-size:11px;color:var(--sub);margin:4px 0 0}
.post-list{list-style:none;padding:0!important;margin:0 0 2em}
.post-list li{border-bottom:1px dashed var(--line);margin:0}
.post-list a{display:block;padding:.7em .2em;color:var(--ink);text-decoration:none;font-weight:700;font-size:15px}
.post-list a:hover{color:var(--main)}
.post-list time{display:block;font-size:11px;color:var(--sub);font-weight:400}
.arch__ttl{font-size:1.4rem;font-weight:800;margin:16px 0 4px}
.arch__desc{color:var(--sub);font-size:14px;margin:0 0 16px}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:2em 0;padding:0;list-style:none}
.pager a,.pager span{display:block;min-width:2.6em;padding:.45em .7em;text-align:center;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--ink);font-size:14px;background:#fff}
.pager .is-cur{background:var(--main);color:#fff;border-color:var(--main)}
.author{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:6px;padding:16px;margin:2.4em 0 0;background:var(--bg2)}
.author img{width:64px;height:64px;border-radius:50%;background:#fff;flex:0 0 64px}
.author__label{font-size:11px;color:var(--sub);margin:0}
.author__name{font-weight:800;margin:0 0 .3em}
.author__bio{font-size:13px;line-height:1.7;margin:0}
.ft{background:#24302a;color:#d8ddd9;margin-top:56px;padding:28px 0 96px;font-size:13px}
.ft a{color:#fff;text-decoration:none}
.ft__cols{display:grid;grid-template-columns:1fr;gap:18px;margin:0 0 20px}
.ft__ttl{font-size:13px;font-weight:800;color:#fff;margin:0 0 6px;padding:0 0 4px;border-bottom:1px solid #3d4a43}
.ft__nav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.ft__nav a{display:inline-block;padding:4px 0}
.ft__copy{margin:0;color:#9aa59e}
.fcta{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#f6f6f4;border-top:1px solid var(--line);padding:5px 12px calc(6px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .2s ease;box-shadow:0 -2px 6px rgba(0,0,0,.06)}
.fcta.is-show{transform:none}
.fcta__lead{margin:0 0 3px;font-size:11px;font-weight:700;color:var(--ink);line-height:1.3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcta__btn{display:block;height:42px;line-height:42px;text-align:center;background:var(--accent);color:#fff;font-weight:800;font-size:15px;text-decoration:none;border-radius:999px;box-shadow:0 4px 0 var(--accent-d)}
.fcta__btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-d)}
.nf{text-align:center;padding:40px 0}
@media (min-width:600px){
.ft__cols{grid-template-columns:1fr 1fr}
.cards{grid-template-columns:1fr 1fr}
}
@media (min-width:960px){
body{font-size:16px}
.hd__in{padding:12px 16px}
.hd__logo img{width:280px}
.hd .hd__cta{display:inline-block;font-size:14px;min-width:0;padding:.7em 1.4em}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.side{margin-top:24px;position:sticky;top:16px}
.art__ttl{font-size:1.85rem}
.body h2{font-size:1.45rem}
.fcta{display:none}
.ft{padding-bottom:28px}
}
@media print{.side,.fcta,.ft{display:none}}
.home>h2:first-child{margin-top:1.4em}
.swell-block-step__number .__label{font-size:9px;letter-spacing:.02em}
.ft__sub{margin:0 0 10px;font-size:12px}
.pd-cta{max-width:680px;margin:2.5em auto;border:3px solid #222;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 6px 0 #222;font-feature-settings:"palt"}
.pd-cta__ribbon{background:#222;color:#fff;text-align:center;font-weight:700;font-size:15px;padding:8px 10px;letter-spacing:.04em}
.pd-cta__ribbon b{color:#ffd400}
.pd-cta__body{display:flex;gap:18px;align-items:center;padding:20px 22px 6px}
.pd-cta__img{flex:0 0 200px;display:block;line-height:0}
.pd-cta__img img{display:block;width:200px;max-width:100%;height:auto;border:1px solid #ddd;border-radius:4px}
.pd-cta__txt{flex:1;min-width:0}
.pd-cta__lead{margin:0 0 .5em;font-size:13px;color:#666;font-weight:700}
.pd-cta__ttl{margin:0 0 .6em;font-size:20px;line-height:1.45;font-weight:800;color:#222}
.pd-cta__ttl span{background:linear-gradient(transparent 60%,#ffe14d 60%)}
.pd-cta__list{list-style:none;margin:0;padding:0}
.pd-cta__list li{position:relative;padding-left:1.6em;margin:.35em 0;font-size:15px;line-height:1.5;color:#333}
.pd-cta__list li::before{content:"✓";position:absolute;left:0;top:0;width:1.2em;height:1.2em;line-height:1.2em;text-align:center;border-radius:50%;background:#222;color:#fff;font-size:12px;font-weight:700;margin-top:.15em}
.pd-cta__list strong{color:#d6001c}
.pd-cta__foot{padding:6px 22px 20px;text-align:center}
.pd-cta__foot .btn-wrap{margin:.6em 0 .4em}
.pd-cta__note{margin:0;font-size:12px;color:#777}
@media (max-width:600px){
.pd-cta{margin:2em 0;border-width:2px;box-shadow:0 4px 0 #222}
.pd-cta__ribbon{font-size:14px;padding:7px 8px}
.pd-cta__body{flex-direction:column;padding:16px 14px 4px;gap:12px}
.pd-cta__img{flex-basis:auto;margin:0 auto}
.pd-cta__img img{width:200px}
.pd-cta__lead{text-align:center;font-size:12px}
.pd-cta__ttl{text-align:center;font-size:17px}
.pd-cta__list li{font-size:14px}
.pd-cta__foot{padding:4px 14px 16px}
.pd-cta__foot .aff-btn{display:block;width:100%;box-sizing:border-box}
}
.p-service-carousel {
padding: 50px 0;
background-color: #f9fbfd;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.l-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
.p-carousel-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 24px;
}
.p-carousel-wrapper::-webkit-scrollbar {
height: 6px;
}
.p-carousel-wrapper::-webkit-scrollbar-thumb {
background-color: #dcdcdc;
border-radius: 3px;
}
.p-carousel-list {
display: flex;
gap: 24px;
list-style: none;
padding: 0;
margin: 0;
}
.p-carousel-item {
flex: 0 0 300px;
}
.c-card {
display: flex;
flex-direction: column;
height: 100%;
background-color: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.c-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.c-card__img {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: #eceff1;
}
.c-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-card__body {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.c-card__title {
font-size: 16px;
font-weight: 700;
color: #1a202c;
margin: 0 0 10px 0;
line-height: 1.4;
}
.c-card__desc {
font-size: 13px;
color: #4a5568;
margin: 0 0 20px 0;
line-height: 1.6;
flex-grow: 1;
}
.c-card__price {
font-size: 18px;
font-weight: 700;
color: #e53e3e;
text-align: center;
background-color: #fff5f5;
padding: 8px 0;
border-radius: 6px;
margin: 0 0 14px 0;
}
.c-card__btn {
display: block;
background-color: #ff9800;
color: #fff;
text-align: center;
padding: 12px;
border-radius: 6px;
text-decoration: none;
font-weight: 700;
font-size: 14px;
box-shadow: 0 2px 4px rgba(255, 152, 0, 0.2);
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.c-card__btn:hover {
background-color: #f57c00;
box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
}
.c-card__sponsor {
display: block;
font-size: 10px;
color: #a0aec0;
text-align: center;
margin: 8px 0 0 0;
}
.p-carousel-hint {
text-align: center;
font-size: 12px;
color: #718096;
margin-top: 12px;
}
.p-carousel-hint span {
display: inline-block;
animation: arrowMove 1.5s infinite ease-in-out;
}
@keyframes arrowMove {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(4px); }
}
.antenna-clean-toc {
margin-bottom: 2.5em;
font-family: inherit;
}
.antenna-clean-toc__title {
font-weight: bold;
font-size: 1.1em;
color: #333;
margin-bottom: 1em;
padding-bottom: 0.5em;
border-bottom: 1px solid #e5e7eb;
}
.antenna-clean-toc__list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
}
.antenna-clean-toc__list li {
margin: 0 !important;
padding: 0 !important;
}
.antenna-clean-toc__list a {
display: inline-flex;
align-items: center;
color: #4b5563;
text-decoration: none !important;
font-size: 0.95em;
transition: color 0.2s ease;
cursor: pointer;
}
.antenna-clean-toc__list a::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background-color: #3b82f6;
border-radius: 50%;
margin-right: 8px;
}
.antenna-clean-toc__list a:hover {
color: #3b82f6;
}
.pref-link-section {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 2em;
margin-bottom: 2em;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.pref-link-section h3 {
text-align: center;
font-size: 1.4em;
margin-bottom: 1.5em;
color: #333;
font-weight: bold;
}
.region-group {
margin-bottom: 1.5em;
}
.region-title {
font-size: 1.05em;
color: #1f2937;
border-left: 4px solid #3b82f6;
padding-left: 0.5em;
margin-bottom: 1em;
font-weight: bold;
}
.pref-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 10px;
}
.pref-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 4px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 4px;
text-decoration: none !important;
color: #4b5563;
font-size: 0.9em;
transition: all 0.2s ease;
}
.pref-btn:hover {
background: #3b82f6;
color: #ffffff !important;
border-color: #3b82f6;
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}
@media (max-width: 599px) {
.pref-link-section { padding: 1.5em 1em; }
.pref-grid { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: 8px; }
.pref-btn { font-size: 0.85em; padding: 8px 4px; }
}
.cp-card-wrapper {
font-family: "Helvetica Neue", Arial, sans-serif;
margin: 30px 0;
box-sizing: border-box;
width: 100%;
}
.cp-card-container {
display: flex;
gap: 15px;
justify-content: center;
align-items: flex-end;
padding-top: 25px;
padding-bottom: 10px;
}
.cp-card-item {
flex: 1;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
position: relative;
box-shadow: 0 3px 6px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
}
:root {
--col-1st: #ff8c00;
--col-2nd: #2980b9;
--col-3rd: #27ae60;
}
.card-1st {
border: 2px solid var(--col-1st);
z-index: 2;
box-shadow: 0 8px 20px rgba(255, 140, 0, 0.15);
}
.rank-crown {
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
background: #e74c3c;
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 4px 12px;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 10;
white-space: nowrap;
border: 2px solid #fff;
line-height: 1.2;
}
.card-2nd { border-top: 4px solid var(--col-2nd); }
.card-3rd { border-top: 4px solid var(--col-3rd); }
.cp-card-header {
text-align: center;
padding: 10px 5px;
background: #fff;
border-bottom: 1px solid #f0f0f0;
border-radius: 8px 8px 0 0;
}
.cp-card-img {
width: 100%;
max-width: 160px;
height: auto;
object-fit: contain;
margin: 0 auto 10px auto;
display: block;
transition: opacity 0.3s;
}
.cp-card-img:hover {
opacity: 0.8;
}
.cp-card-name {
font-weight: bold;
font-size: 14px;
margin: 0;
line-height: 1.2;
color: #333;
}
.cp-card-catch {
color: #fff;
font-size: 11px;
font-weight: bold;
text-align: center;
padding: 4px;
}
.card-1st .cp-card-catch { border-radius: 6px 6px 0 0; }
.bg-1st { background: var(--col-1st); }
.bg-2nd { background: var(--col-2nd); }
.bg-3rd { background: var(--col-3rd); }
.cp-card-body {
padding: 10px;
flex-grow: 1;
font-size: 13px;
line-height: 1.5;
color: #444;
}
.cp-feature-list {
list-style: none;
padding: 0;
margin: 0 0 10px 0;
}
.cp-feature-list li {
position: relative;
padding-left: 18px;
margin-bottom: 4px;
font-weight: bold;
border-bottom: 1px dashed #eee;
padding-bottom: 2px;
color: #222;
font-size: 12px;
}
.cp-feature-list li::before {
content: '✔';
position: absolute;
left: 0;
font-weight: bold;
font-size: 14px;
top: -1px;
}
.check-1st li::before { color: var(--col-1st); }
.check-2nd li::before { color: var(--col-2nd); }
.check-3rd li::before { color: var(--col-3rd); }
.cp-desc {
font-size: 11px;
color: #666;
margin-bottom: 0;
text-align: left;
line-height: 1.4;
}
.cp-card-footer {
padding: 0 10px 15px 10px;
text-align: center;
background: #fff;
border-radius: 0 0 8px 8px;
}
.btn-cta {
display: block;
width: 100%;
padding: 10px 0;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
color: #fff !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
transition: 0.3s;
}
.btn-cta:hover { opacity: 0.9; transform: translateY(-1px); }
@media screen and (max-width: 767px) {
.cp-card-wrapper {
margin: 20px -15px;
width: calc(100% + 30px);
padding-bottom: 10px;
}
.swipe-guide {
display: block;
text-align: right;
padding-right: 20px;
margin-bottom: 5px;
font-size: 11px;
color: #888;
font-weight: bold;
}
.swipe-guide::after { content: '➡ 横にスワイプして比較'; }
.cp-card-container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 10px;
justify-content: flex-start;
align-items: flex-start;
padding: 25px 15px 15px 15px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.cp-card-container::-webkit-scrollbar { display: none; }
.cp-card-item {
flex: 0 0 88%;
scroll-snap-align: center;
min-width: 260px;
margin-bottom: 0;
}
.card-1st {
margin-top: 0;
border: 2px solid var(--col-1st);
}
.rank-crown {
top: -22px;
font-size: 12px;
padding: 3px 10px;
}
.cp-card-name { font-size: 15px; }
.cp-feature-list li { font-size: 13px; margin-bottom: 5px; }
.btn-cta { font-size: 15px; padding: 12px 0; }
}
@media screen and (min-width: 768px) {
.swipe-guide { display: none; }
}
.antenna-scroll-wrapper {
margin: 24px 0;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.antenna-scroll-wrapper::after {
content: "➔ 横にスクロールできます";
display: none;
background-color: #f7fafc;
color: #718096;
text-align: center;
font-size: 11px;
padding: 6px;
border-top: 1px solid #e2e8f0;
font-weight: bold;
}
.antenna-compare-table {
width: 100%;
min-width: 800px;
border-collapse: collapse;
background-color: #fff;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #333;
}
.antenna-compare-table th {
background-color: #1a365d;
color: #fff;
font-weight: bold;
padding: 14px 10px;
text-align: center;
border: 1px solid #1a365d;
font-size: 14px;
}
.antenna-compare-table th:first-child,
.antenna-compare-table td:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background-color: #1a365d;
color: #fff;
font-weight: bold;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}
.antenna-compare-table td:first-child {
background-color: #f8fafc;
color: #1a365d;
}
.antenna-compare-table tr:nth-child(even) td:first-child {
background-color: #edf2f7;
}
.antenna-compare-table td {
padding: 14px 10px;
border: 1px solid #e2e8f0;
text-align: center;
vertical-align: middle;
}
.antenna-compare-table td.text-left {
text-align: left;
}
.antenna-compare-table tr:nth-child(even) {
background-color: #f7fafc;
}
.badge-recommend {
background-color: #e53e3e;
color: #fff;
font-size: 10px;
font-weight: bold;
padding: 2px 4px;
border-radius: 3px;
display: block;
margin-top: 4px;
text-align: center;
}
.mark-good { color: #e53e3e; font-weight: bold; font-size: 16px; }
.mark-fair { color: #dd6b20; font-weight: bold; font-size: 16px; }
.mark-bad  { color: #718096; font-weight: bold; font-size: 16px; }
@media screen and (max-width: 767px) {
.antenna-scroll-wrapper::after {
display: block;
}
.antenna-compare-table th,
.antenna-compare-table td {
padding: 12px 8px;
font-size: 13px;
}
}
.area-accordion {
margin: 2em 0;
font-family: sans-serif;
}
.area-accordion .note {
font-size: 0.85em;
color: #666;
margin-bottom: 8px;
}
.area-accordion details {
border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.area-accordion summary {
display: block;
padding: 16px 20px;
background-color: #f8f9fa;
font-weight: bold;
color: #333;
cursor: pointer;
list-style: none;
transition: background-color 0.2s ease;
}
.area-accordion summary::-webkit-details-marker {
display: none;
}
.area-accordion summary:hover {
background-color: #e9ecef;
}
.area-accordion details[open] summary {
border-bottom: 1px solid #ddd;
background-color: #e2e8f0;
}
.accordion-content {
padding: 20px;
background-color: #fff;
}
.accordion-content ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style-type: none;
}
.accordion-content li {
font-size: 0.9em;
color: #444;
padding: 4px 0;
border-bottom: 1px dashed #ccc;
position: relative;
padding-left: 12px;
}
.accordion-content li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
background-color: #007bff;
border-radius: 50%;
}
.rank-box {
margin-bottom: 60px;
}
.rank-badge {
color: #fff;
border-radius: 4px;
padding: 4px 12px;
margin-right: 10px;
font-size: 18px;
font-weight: bold;
display: inline-block;
transform: translateY(-2px);
}
.rank-1st { background-color: #f39c12; }
.rank-2nd { background-color: #3498db; }
.rank-3rd { background-color: #2ecc71; }
.rank-4th { background-color: #e67e22; }
.rank-5th { background-color: #e84393; }
.rank-top-row {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 24px;
}
.rank-image {
margin: 0;
text-align: center;
}
.rank-image img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.rank-chart-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f9f9f9;
padding: 15px;
border-radius: 6px;
}
@media (min-width: 768px){
.rank-top-row {
flex-direction: row;
align-items: center;}
.rank-image {
width: 50%;}
.rank-chart-area {
width: 50%;
height: 100%;}
}
.rank-chart {
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-weight: bold;
font-size: 22px;
color: #333;
}
.rank-chart::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
background: #f9f9f9;
border-radius: 50%;
}
.rank-chart-text {
position: relative;
z-index: 1;
}
.rank-legend {
margin-top: 10px;
font-size: 12px;
display: flex;
gap: 10px;
}
.legend-item {
display: flex;
align-items: center;
gap: 4px;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 2px;
}
.chart-1st { background: conic-gradient(#f39c12 0% 94%, #e0e0e0 94% 100%); }
.chart-2nd { background: conic-gradient(#3498db 0% 88%, #e0e0e0 88% 100%); }
.chart-3rd { background: conic-gradient(#2ecc71 0% 78%, #e0e0e0 78% 100%); }
.chart-4th { background: conic-gradient(#e67e22 0% 70%, #e0e0e0 70% 100%); }
.chart-5th { background: conic-gradient(#e84393 0% 62%, #e0e0e0 62% 100%); }
.rank-features {
margin: 0 0 24px 0;
padding-left: 24px;
}
.rank-features li {
margin-bottom: 12px;
line-height: 1.6;
font-weight: bold;
list-style-type: square;
}
.rank-description {
line-height: 1.8;
margin: 0 0 24px 0;
background-color: #fffdf0;
padding: 20px;
border-radius: 8px;
}
.btn-1st{background:#f39c12;box-shadow:0 5px 0 #c87f0a}
.btn-2nd{background:#3498db;box-shadow:0 5px 0 #217dbb}
.btn-3rd{background:#2ecc71;box-shadow:0 5px 0 #25a25a}
.btn-4th{background:#e67e22;box-shadow:0 5px 0 #bf6516}
.btn-5th{background:#e84393;box-shadow:0 5px 0 #c23679}
.rank-info-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-size: 14px;
}
.rank-info-table th,
.rank-info-table td {
padding: 10px 12px;
border-bottom: 1px dashed #ccc;
text-align: left;
}
.rank-info-table tr:first-child th,
.rank-info-table tr:first-child td {
border-top: 1px dashed #ccc;
}
.rank-info-table th {
width: 25%;
font-weight: bold;
color: #555;
white-space: nowrap;
}
.rank-info-table td {
color: #333;
font-weight: bold;
}
:root {
--saimu-navy: #14458c;
--saimu-navy-dark: #0d3168;
--saimu-navy-deep: #092349;
--saimu-navy-sub: #3a6fb8;
--saimu-navy-tint: #eef3fb;
--saimu-navy-tint2: #f6f9fd;
}
.pd-cta{max-width:680px;margin:2.5em auto;border:3px solid #222;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 6px 0 #222;font-feature-settings:"palt"}
.pd-cta__ribbon{background:#222;color:#fff;text-align:center;font-weight:700;font-size:15px;padding:8px 10px;letter-spacing:.04em}
.pd-cta__ribbon b{color:#ffd400}
.pd-cta__body{display:flex;gap:18px;align-items:center;padding:20px 22px 6px}
.pd-cta__img{flex:0 0 200px;display:block;line-height:0}
.pd-cta__img img{display:block;width:200px;max-width:100%;height:auto;border:1px solid #ddd;border-radius:4px}
.pd-cta__txt{flex:1;min-width:0}
.pd-cta__lead{margin:0 0 .5em;font-size:13px;color:#666;font-weight:700}
.pd-cta__ttl{margin:0 0 .6em;font-size:20px;line-height:1.45;font-weight:800;color:#222}
.pd-cta__ttl span{background:linear-gradient(transparent 60%,#ffe14d 60%)}
.pd-cta__list{list-style:none;margin:0;padding:0}
.pd-cta__list li{position:relative;padding-left:1.6em;margin:.35em 0;font-size:15px;line-height:1.5;color:#333}
.pd-cta__list li::before{content:"✓";position:absolute;left:0;top:0;width:1.2em;height:1.2em;line-height:1.2em;text-align:center;border-radius:50%;background:#222;color:#fff;font-size:12px;font-weight:700;margin-top:.15em}
.pd-cta__list strong{color:#d6001c}
.pd-cta__foot{padding:6px 22px 20px;text-align:center}
.pd-cta__foot .btn-wrap{margin:.6em 0 .4em}
.pd-cta__note{margin:0;font-size:12px;color:#777}
@media (max-width:600px){
.pd-cta{margin:2em 0;border-width:2px;box-shadow:0 4px 0 #222}
.pd-cta__ribbon{font-size:14px;padding:7px 8px}
.pd-cta__body{flex-direction:column;padding:16px 14px 4px;gap:12px}
.pd-cta__img{flex-basis:auto;margin:0 auto}
.pd-cta__img img{width:200px}
.pd-cta__lead{text-align:center;font-size:12px}
.pd-cta__ttl{text-align:center;font-size:17px}
.pd-cta__list li{font-size:14px}
.pd-cta__foot{padding:4px 14px 16px}
.pd-cta__foot .aff-btn{display:block;width:100%;box-sizing:border-box}
}
.cp-card-img--tall{width:auto!important;height:80px!important;max-width:160px}
@media (max-width:600px){
.pd-cta{margin:1.6em 0;border-width:2px;border-radius:10px;box-shadow:0 4px 0 #222}
.pd-cta__ribbon{font-size:12.5px;padding:4px 6px;letter-spacing:0}
.pd-cta__body{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:0;align-items:start;padding:10px 12px 0}
.pd-cta__txt{display:contents}
.pd-cta__img{grid-column:1;grid-row:1/3;width:96px;margin:0}
.pd-cta__img img{width:96px;height:104px;object-fit:cover;object-position:top;border-radius:4px}
.body .pd-cta__lead{grid-column:2;text-align:left;font-size:11.5px;margin:0 0 2px;line-height:1.4}
.body .pd-cta__ttl{grid-column:2;text-align:left;font-size:15.5px;line-height:1.45;margin:0;letter-spacing:-.01em}
.body .pd-cta__list{grid-column:1/3;margin:8px 0 0}
.body .pd-cta__list li{font-size:13px;line-height:1.4;margin:.15em 0}
.pd-cta__foot{padding:6px 12px 8px}
.pd-cta__foot .btn-wrap{margin:.3em 0 .2em}
.pd-cta__foot .aff-btn{display:block;width:100%;height:52px;line-height:52px;padding:0 1em;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.body .pd-cta__note{font-size:11px;line-height:1.4}
}
.ap-side{font-size:14px;line-height:1.6;color:#222}
.ap-side *{box-sizing:border-box}
.ap-side__box{border:3px solid #222;border-radius:12px;background:#fff;box-shadow:0 5px 0 #222;margin:0 0 24px;overflow:hidden}
.ap-side__head{background:#222;color:#fff;text-align:center;font-weight:700;font-size:15px;padding:8px 10px;margin:0}
.ap-side__head b{color:#ffd400}
.ap-side__body{padding:14px 14px 16px}
.ap-side__lead{margin:0 0 10px;font-weight:700;text-align:center}
.ap-side__btn{display:block;text-align:center;font-weight:800;font-size:15px;text-decoration:none;color:#fff;border-radius:999px;padding:13px 10px;margin:10px 0 0;box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s}
.ap-side__btn:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35);color:#fff}
.ap-side__btn--a{background:#e8380d}
.ap-side__btn--b{background:#1a8f3c}
.ap-side__note{margin:8px 0 0;font-size:12px;color:#666;text-align:center}
.ap-side__title{font-size:16px;font-weight:800;margin:0 0 10px;padding:0 0 6px;border-bottom:2px solid #222}
.ap-side__menu{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ap-side__menu a{display:flex;align-items:center;justify-content:center;height:100%;background:#fff;border:2px solid #222;border-radius:8px;box-shadow:0 3px 0 #222;padding:10px 6px;text-align:center;font-weight:700;font-size:13px;line-height:1.4;color:#222;text-decoration:none}
.ap-side__menu a:hover{transform:translateY(2px);box-shadow:0 1px 0 #222}
.ap-side__list{list-style:none;margin:0 0 8px;padding:0;counter-reset:ap}
.ap-side__list li{border-bottom:1px solid #ddd}
.ap-side__list a{display:block;padding:10px 2px;color:#222;text-decoration:none;font-weight:700;font-size:14px;line-height:1.5}
.ap-side__list a:hover{color:#e8380d}