。
カード全体をクリックできる挙動は Learn more の .stretched-link が担う
（
の入れ子は不正なため、レビューへの導線と両立させる方法）。 */
section.products .in .swiper-slide { width: 100%; max-width: 400px; padding: 30px 30px; background-color: white; border-radius: 14px; color: inherit; position: relative; line-height: 1; box-shadow: 0px 0px 20px 0px rgb(233, 233, 233); display: flex; flex-direction: column; align-self: stretch; }
/* .body を flex:1 で伸ばす → .footer が最下部に押し出される */
section.products .in .body { flex: 1 1 auto; }
section.products .in .category { margin-bottom: 10px; text-align: center; text-align: center; }
section.products .in .name { font-size: 32px; font-weight: 900; margin-bottom: 5px; text-align: center; }
section.products .in .capacity { margin-bottom: 5px; font-size: 16px; color: #777; font-weight: 400; text-align: center; }
section.products .in picture { text-align: center; margin: 0 auto; display: block; }
section.products .in .read { margin-top: -15px; color: #707070; color: #333; line-height: 1.5; }
section.products .in .read_sub { margin: 0 0 20px; color: #707070; color: #777; font-size: 14px; font-weight: 400; line-height: 1.3; }
section.products .in table { margin: -15px 0 20px; border-top: 1px dotted #999; font-size: 14px; line-height: 1.4; color: #777; font-weight: 400; }
section.products .in table td { border-bottom: 1px dotted #999; padding: 10px 0; color: #333; }
section.products .in table td:last-of-type { text-align: right; color: #333; font-weight: 700; }
section.products .in .fa-fw { width: 1.8rem; }
section.products .in .detail p { font-size: 13px; line-height: 1.3; color: #777; font-weight: 400; }
section.products .in .detail p:last-of-type { margin-bottom: 30px; }
section.products .in .footer { flex: 0 0 auto; margin-top: auto; }
section.products .in .fee { margin: 0 0 20px; text-align: center; }
section.products .in .fee .based_on { font-size: 13px; color: #bbb; }
section.products .in .cta { text-align: center; }
/* 商品比較カードのレビュー評価（商品名・容量の下、画像の上）。
星の色・サイズは商品詳細ページ（product.css の .review .body .rating）に合わせている。 */
section.products .in .card-rating { display: flex; align-items: center; justify-content: center; margin: 10px 0 16px; font-size: 13px; color: #666; }
section.products .in .card-rating .icon { display: flex; column-gap: 2px; font-size: 12px; color: #f7d631; }
section.products .in .card-rating .score { padding-left: 6px; font-weight: 700; color: #132e51; }
section.products .in .card-rating .sep { padding: 0 6px; color: #ccc; }
/* レビューへのリンク。stretched-link より手前に置いて、
ここだけレビューページへ飛ばす。 */
section.products .in a.card-rating { position: relative; z-index: 2; color: inherit; text-decoration: none; }
section.products .in a.card-rating:hover .count { text-decoration: underline; }
/* Learn more をカード全面に広げる（Bootstrap の stretched-link と同じ仕組み）。
カードのどこを押してもカテゴリーページへ遷移する。 */
section.products .in .stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
section.products.wifi .in picture { text-align: center; margin: -40px auto 0; display: block; }
section.products.wifi .in picture img { width: 100%; max-width: 300px; height: auto; }
section.products.sim_card .in picture { margin: 0 0 20px }
section.products.sim_card .in picture img { width: 100%; max-width: 300px; height: auto; }
section.products.sim_card .in table { margin-top: 0; }
section.products.sim_card .in .name { margin-bottom: 20px; }
/* PC では Grid レイアウトに切替えてカード高さを確実に揃える。
Grid はデフォルトで align-items: stretch なので、flex-wrap:wrap のような
伸縮判定のあいまいさがなく、行内のセル(=カード)高さが必ず揃う。
※ SP (Swiper 稼働時) は flex のままで問題なし、PCのみ Grid に切替 */
@media screen and (min-width: 768px) {
section.products .in {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 400px));
justify-content: center;
gap: 30px 50px; /* row-gap / column-gap */
align-items: stretch;
}
section.products .in .swiper-slide {
max-width: none; /* Grid 側で幅管理するため解除 */
width: auto;
height: 100%; /* Grid セル全体を埋める */
}
}
/* 利用流れ（How to Pick Up and Return?） */
section.flow { background-color: white; }
section.flow .container { padding: 50px 20px 0px; }
section.flow .category { text-align: center; }
section.flow .category .badge { margin: 0 5px 15px; }
section.flow .row { margin-bottom: 50px; }
section.flow .row:last-of-type { margin: 0; }
section.flow h2 { margin: 0 0 80px; font-size: 40px; font-weight: 900; text-align: center; }
section.flow .flow-item-illustration { margin: 0 0 25px; text-align: center; }
section.flow .flow-item-illustration img { width: auto; height: 120px; }
section.flow h3 { font-weight: 900; font-size: 28px; }
section.flow .col-4 { position: relative; }
section.flow .col-4::after { content: '\F285'; font-family: 'bootstrap-icons'; position: absolute; right: -12px; top: 50px; font-size: 20px; font-weight: 700; color: var(--mid); z-index: 2; line-height: 1; color: #ddd; }
section.flow .col-4:last-child::after { display: none; }
/* 特集（Featured Blog Posts） */
section.article { background-color: white; }
section.article .container { padding: 50px 20px 50px; }
section.article h2 { margin: 0 0 80px; font-size: 40px; font-weight: 900; text-align: center; }
section.article .row { margin: 0 0 50px; line-height: 1.4; font-weight: 400; }
section.article .row .col-4 { display: flex; }
section.article .row a { display: flex; flex-direction: column; width: 100%; text-decoration: none; color: inherit; }
section.article .row .header { margin: 0; }
section.article .row .body { flex: 1; background-color: white; box-shadow: 0px 0px 20px 0px rgb(233, 233, 233); padding: 30px 40px 20px; border-radius: 0 0 14px 14px; display: flex; flex-direction: column; }
section.article .row h4 { font-size: 20px; font-weight: 500; line-height: 1.3; }
section.article .row p { margin: 0 0 20px; font-weight: 400; color: #999; }
section.article .row img { border-radius: 14px 14px 0 0; }
/* FAQ */
section.faq { background-color: white; }
section.faq .container { padding: 50px 20px 50px; }
section.faq h2 { margin: 0 0 80px; font-size: 40px; font-weight: 900; text-align: center; }
section.faq .q { position: relative; margin: 0 0 15px; padding: 0 40px 10px 34px; line-height: 1.6; border-bottom: 1px solid #e8e8e8; font-weight: 500; }
section.faq .q:hover { cursor: pointer; }
section.faq .a { position: relative; margin: 0 0 15px; padding: 0 40px 30px 34px; line-height: 1.6; border-bottom: 1px solid #e8e8e8; display: none; }
section.faq h3 { margin: 30px 0 15px; text-align: left; font-size: 16px; padding: 12px 15px 12px; background-color: #f6f6f6; border-radius: 4px; }
section.faq .row { margin: 0 auto; padding: 15px 20px 0; max-width: 1020px; }
section.faq .row .col-sm-12:last-child .a { border: none; padding-bottom: 0; }
section.faq .row:last-of-type { margin-bottom: 40px; }
section.faq .q::before { position: absolute; top: 0; left: 0; content: ''; background: url("/assets/images/ic_q_200x200.png") no-repeat left top; background-size: auto; background-size: 24px; width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
section.faq .q::after { position: absolute; top: 0; right: 10px; font-family: FontAwesome; content: '\f107'; text-align: center; width: 24px; height: 24px; display: inline-block; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; font-size: 18px; }
section.faq .q.active::after { -webkit-transform: rotate(180deg) scale(1.08); -ms-transform: rotate(180deg) scale(1.08); transform: rotate(180deg) scale(1.08); }
section.faq .a::before { position: absolute; top: 0; left: 0; content: ''; background: url("/assets/images/ic_a_200x200.png") no-repeat left top; background-size: 24px; width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
@media screen and (max-width: 767px) {
section.faq .container { padding: 50px 15px 40px; }
section.faq .row { margin: 0px; padding: 15px 0 0; }
}
/* Trusted by Travelers (Promo Panel) */
section.about { background-color: #f9f9f9; }
section.about .container { padding: 100px 20px; display: flex; border-bottom: 1px solid #ddd; }
section.about .col-sm-6 { padding-right: 80px; }
section.about h2 { margin: 0 0 20px; font-size: 22px; font-weight: 600; text-align: left; }
section.about h3 { margin: 0 0 10px; font-size: 18px; }
section.about .img { margin: 0 0 20px; width: 140px; height: 140px; border-radius: 14px; }
section.about .shibuya { background: url("/assets/images/trusted-by-travelers.jpg.webp") no-repeat; background-size: cover; }
section.about .zazen { background: url("/assets/images/img_zazen.webp") no-repeat; background-size: cover; }
section.about .lady { background: url("/assets/images/image-14.jpg.webp") no-repeat; background-size: cover; }
section.about .izakaya { background: url("/assets/images/img_izakaya.webp") no-repeat; background-size: cover; }
section.about .site-logo img { width: auto; height: 20px; }
section.about p { font-weight: 400; }
/* リボン */
.ribbon { width: 150px; height: 150px; overflow: hidden; position: absolute; top: 0; right: 0; }
.ribbon-float, .ribbon span { color: #fff; text-align: center; }
.ribbon span { position: absolute; top: 16px; left: 0; display: block; width: 225px; padding: 10px 0; background-color: red; box-shadow: 0 5px 10px rgba(0,0,0,.1); text-shadow: 0 1px 1px rgba(0,0,0,.2); text-transform: uppercase; transform: rotate(45deg); }
/* [for Pocket WiFi] Benefit information (Early Bird Discount / Free power bank) */
section.benefits .container { padding: 60px 15px; max-width: 1000px; }
section.benefits .early_bird_discount { background-color: #fcece5; border-radius: 14px; padding: 30px; height: 100%; }
section.benefits .free_power_bank { border: 1px solid #ddd; border-radius: 14px; padding: 30px; height: 100%; }
section.benefits picture { text-align: center; display: block; }
/* [for Pocket WiFi] Exceptional network coverage for the most incredible journey */
section.coverage .container { padding: 60px 15px; max-width: 1000px; }
section.coverage .in { padding: 0 60px; background-color: #f6f6f6; border-radius: 14px; }
/* [for Pocket WiFi] 4 Reasons Why You Should Choose Our Pocket WiFi in Japan */
section.promo_panel .container { padding: 60px 15px 100px; max-width: 1000px; overflow: hidden; }
footer { background-color: #f9f9f9; }
footer.page_footer .container { padding: 80px 15px; }
footer.page_footer .row { margin-bottom: 60px; }
footer.page_footer div { font-size: 14px; }
footer.page_footer h4 { margin: 0 0 15px; font-size: 16px; font-weight: 500; color: #000; }
footer.page_footer ul li { line-height: 2; }
footer.page_footer div a { color: #333; font-weight: 400; }
footer.page_footer div a:hover { text-decoration: underline; }
footer.page_footer .copyright { font-size: 13px; letter-spacing: 0.1rem; color: #666; font-weight: 400; text-align: center; }
/* footer collapse (SPのみアコーディオン化、PCは通常表示) */
footer.page_footer .footer-collapse-toggle {
background: none; border: 0; padding: 0; margin: 0;
color: inherit; font: inherit; text-align: left; width: 100%;
display: flex; justify-content: space-between; align-items: center;
}
footer.page_footer .footer-collapse-icon { transition: transform .3s ease; font-size: 1rem; }
footer.page_footer .footer-collapse-toggle[aria-expanded="true"] .footer-collapse-icon {
transform: rotate(180deg);
}
/* PC (>=769px): コラプスを常に展開表示、トグルは無効化、アイコン非表示 */
@media screen and (min-width: 769px) {
footer.page_footer .footer-collapse .collapse { display: block !important; height: auto !important; visibility: visible !important; }
footer.page_footer .footer-collapse .collapsing { height: auto !important; transition: none !important; }
footer.page_footer .footer-collapse-toggle { pointer-events: none; cursor: default; }
footer.page_footer .footer-collapse-icon { display: none; }
}
@media screen and (max-width: 768px) {
footer.page_footer h4 { margin: 0; padding: 0; font-size: 15px; letter-spacing: 0.05em; }
footer.page_footer .footer-collapse { border-bottom: 1px solid #e8e8e8; }
footer.page_footer .footer-collapse:first-of-type { border-top: 1px solid #e8e8e8; }
footer.page_footer .footer-collapse-toggle { padding: 18px 4px; font-weight: 500; font-size: 15px; color: #000; }
footer.page_footer .footer-collapse .list-unstyled { padding: 0 4px 10px; }
footer.page_footer .footer-collapse ul li { border: none; }
footer.page_footer .footer-collapse ul li:first-child { border: none; }
footer.page_footer div a { display: block; padding: 14px 4px; font-size: 15px; width: 100%; }
}
/* ============================================================
プラン一覧カルーセル (section.products .plans-carousel)
- PC (>=768px): Swiper は未初期化。.swiper-wrapper.in の flex-wrap
で 3 + 2 の 2 行表示 (従来の見た目を維持)。
prev/next ボタンは非表示。
- SP (<768px): JS で Swiper を init し、横スワイプで 1 枚ずつ表示。
設定は index_home.php のレビューカルーセルと同じ
(loop / autoplay / spaceBetween:15 / navigation)。
============================================================ */
/* PC: リボン等のはみ出し要素のためには overflow: visible にしたいが、
モバイル時に水平スクロールを引き起こすため、overflow は Swiper デフォルト
(hidden) に任せる。リボンはカード内に収まるため問題なし。 */
section.products .plans-carousel { /* overflow: visible; -- 削除 */ }
/* prev/next ボタンのPC非表示/SP表示は、後述の全カルーセル共通スタイルに統一 */
/* SP: Swiper として動作させる */
@media screen and (max-width: 767px) {
section.products .container { padding: 60px 0 40px; }
section.products h2 { margin: 0 15px 30px; font-size: 28px; }
/* .swiper-wrapper.in のデスクトップ用 flex-wrap / gap / justify を打ち消す */
section.products .plans-carousel .in {
flex-wrap: nowrap;
column-gap: 0; /* Swiper の spaceBetween に任せる */
row-gap: 0;
justify-content: flex-start;
margin: 0 0 0;
padding-bottom: 10px;
}
/* カード幅は Swiper の slidesPerView 計算に任せるため
width:auto とし、max-width も解除 (width:100% は多スライドで水平溢れの原因) */
section.products .plans-carousel .swiper-slide {
width: auto;
max-width: none;
height: auto;
padding: 25px 20px;
}
/* カード内の余白/文字サイズを SP 向けに少し詰める */
section.products .plans-carousel .name { font-size: 26px; }
section.products .plans-carousel .caution { margin: 0 0 15px; }
/* 左右に余白を作ってチラ見せ + スワイプ範囲を確保
上下の padding はカードの box-shadow (20px 広がる)が overflow:hidden で
切れないようにするため。下は prev/next ボタン配置も兼ねる */
section.products .plans-carousel { padding: 20px 15px 60px; }
}
/* ============================================================
ページ全体のレスポンシブ微調整
(ヒーロー / Benefits / Coverage / Promo Panel など)
============================================================ */
@media screen and (max-width: 767px) {
/* Hero */
section.page_top .container { padding: 40px 15px 0; }
h1.page-title { font-size: 32px !important; }
h1.page-title span { font-size: 18px !important; padding-top: 10px !important; }
section.page_top .fee { font-size: 20px !important; }
section.page_top .fee .based_on { font-size: 14px; color: #bbb; }
/* benefits_list (Hero下の4特徴):
.row の display:flex は flex-wrap:wrap のため fit-content が「全項目を1列に並べた幅」
に展開されてしまい、SPでは画面いっぱいに広がって中央寄せが効かなかった。
CSS Grid に切り替えることで、
- grid-template-columns: max-content → 一番長い項目の幅ピッタリの列を1本作る
- justify-content: center → その列をグリッドコンテナ内で中央に配置
という挙動になり、テキストの長短に関わらず自動で中央寄せされる。 */
.benefits_list {
font-size: 18px !important;
--bs-gutter-x: 0;
display: grid !important; /* .row の display:flex を上書き */
grid-template-columns: max-content;
justify-content: center;
row-gap: 10px;
}
.benefits_list .col-md-6 {
text-align: left;
margin-bottom: 0; /* row-gap に任せる */
}
/* Benefits (Early Bird / Free Power Bank)
SP では縦積みになるので row-gap で上下間隔を確保 */
section.benefits .container { padding: 40px 15px !important; }
section.benefits .row { --bs-gutter-y: 1.25rem; }
section.benefits .early_bird_discount,
section.benefits .free_power_bank { padding: 22px !important; }
/* Coverage */
section.coverage .container { padding: 40px 15px !important; }
section.coverage .in { padding: 30px 20px !important; }
section.coverage .section-title { font-size: 26px; }
/* アイコン + テキスト行を flex にしてアイコンの下に折返さないよう固定 */
section.coverage .in .col-md-6 > div {
display: flex;
align-items: center;
}
section.coverage .in .col-md-6 > div picture { flex-shrink: 0; }
section.coverage .in .col-md-6 > div picture img { display: block; }
/* 4 Reasons (Promo Panel) */
section.promo_panel .container { padding: 40px 15px 60px !important; }
section.promo_panel .section-title { font-size: 26px; }
section.promo_panel .side-picture { margin-top: 30px; }
/* 共通 h2 の縮小 */
section:not(.about) .container h2 { font-size: 28px !important; }
}
/* ============================================================
TOP ページ レスポンシブ対応 (index_home.php)
対象: welcome / best_mobile / featured / murals / products (comparing)
/ flow / article / about
============================================================ */
/* --- 共通: Swiper prev/next ボタン (全カルーセル共通) ---
- 丸型 (40px 円形)、薄グレー背景
- カルーセルブロック右下に配置 (top:auto; bottom:0; right:0)
- PC では Comparing/Flow/Blog/Pickup のカルーセルは非動作のためボタン非表示。
Reviews はPCでも稼働するため表示を維持。 */
section.reviews #reviews_carousel,
section.products .plans-carousel,
section.flow .flow-carousel,
section.article .article-carousel { position: relative; padding-bottom: 60px; }
section.welcome .pickup-carousel { position: relative; } /* padding-bottom はSPのみ (後述) */
/* plans-carousel カード box-shadow (20px 広がる) が上端で切れないよう padding-top を確保 */
section.products .plans-carousel { padding-top: 20px; }
/* flow / article カルーセルは PC で Swiper 非稼働なので、
Swiper デフォルトの .swiper-slide { width: 100% } が .col-4 (33.33%) を上書きし
3カードが 100% 幅ずつになって縦積みになってしまう。
PC のみ .swiper-slide.col-4 (詳細度高め) で .col-4 の幅に戻す。 */
@media screen and (min-width: 768px) {
section.flow .flow-carousel .swiper-slide.col-4,
section.article .article-carousel .swiper-slide.col-4 {
width: 33.333333%;
flex: 0 0 auto;
}
}
/* Blog (section.article) PC でカード高さを揃える。
Comparing と同じく Grid でセルを stretch させ、カード内は flex column で
.body を伸縮させて下端揃え。 */
@media screen and (min-width: 768px) {
/* カルーセルラッパを Grid に (SP では Swiper 側が display を上書きするので問題なし) */
section.article .article-carousel .swiper-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
align-items: stretch;
margin: 0;
}
/* Grid セル (.col-4.swiper-slide) は width 指定なし、高さは stretch */
section.article .article-carousel .swiper-slide.col-4 {
width: auto;
height: 100%;
display: flex; /* 中の を縦伸ばしするため */
}
/* カード をセル内でフル展開 */
section.article .article-carousel .swiper-slide a {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* .body を伸縮させる (既に flex:1 済みだが念のため明示) */
section.article .article-carousel .swiper-slide .body {
flex: 1 1 auto;
}
}
/* 全カルーセル共通のボタンスタイル */
.swiper-button-prev,
.swiper-button-next {
top: auto !important;
bottom: 0 !important;
left: auto !important;
width: 40px !important;
height: 40px !important;
margin: 0 !important;
background: #f0f0f0;
border-radius: 50%;
color: #333 !important;
transition: background-color 0.2s ease;
--swiper-navigation-size: 14px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 14px !important;
font-weight: 700;
}
.swiper-button-next { right: 0 !important; }
.swiper-button-prev { right: 52px !important; }
.swiper-button-prev:hover,
.swiper-button-next:hover { background: #e0e0e0; }
.swiper-button-disabled { opacity: 0.35; cursor: default; }
/* PC: 静的レイアウトになる (Swiper 非稼働の) カルーセルはボタン非表示 */
section.products .plans-carousel .swiper-button-prev,
section.products .plans-carousel .swiper-button-next,
section.flow .flow-carousel .swiper-button-prev,
section.flow .flow-carousel .swiper-button-next,
section.article .article-carousel .swiper-button-prev,
section.article .article-carousel .swiper-button-next,
section.welcome .pickup-carousel .swiper-button-prev,
section.welcome .pickup-carousel .swiper-button-next { display: none; }
/* SP: 全カルーセルでボタン表示 */
@media screen and (max-width: 767px) {
section.products .plans-carousel .swiper-button-prev,
section.products .plans-carousel .swiper-button-next,
section.flow .flow-carousel .swiper-button-prev,
section.flow .flow-carousel .swiper-button-next,
section.article .article-carousel .swiper-button-prev,
section.article .article-carousel .swiper-button-next,
section.welcome .pickup-carousel .swiper-button-prev,
section.welcome .pickup-carousel .swiper-button-next { display: flex; }
}
/* pickup-carousel だけ閾値が 991px のため、768-991 でもボタンを表示 */
@media screen and (max-width: 991px) {
section.welcome .pickup-carousel .swiper-button-prev,
section.welcome .pickup-carousel .swiper-button-next { display: flex; }
}
/* ============================================================
1. キービジュアル3商品 (section.welcome .pickup-carousel)
- 閾値 991px: これ以下でカルーセル(Swiper)稼働、以上で3カード横並び
(他の carousel と違う閾値: 992-1199 だと 3カード +左バッジが container に収まらず
2+1 折返しになりやすいため、早めにカルーセル化)
- セレクタに a.swiper-slide を使って基底の .pickup .in a ルールと同じ詳細度を確保
(基底ルールが詳細度で勝つと width:100%; max-width:250px が SP でも残り、
Swiper の inline 幅と衝突して空白スクロールが発生する)
============================================================ */
/* --- カード共通スタイル (全サイズ) --- */
section.welcome .pickup-carousel a.swiper-slide {
background-color: white;
border-radius: 14px;
color: inherit;
position: relative;
line-height: 1;
text-align: center;
box-shadow: 0px 3px 0px 0px rgb(156, 156, 156);
text-decoration: none;
}
/* --- PC (>=992px): Swiper 非稼働。3カード横並び。バッジは枠外にはみ出し表示 --- */
@media screen and (min-width: 992px) {
section.welcome .pickup-carousel {
overflow: visible; /* .mp-rank, .benefits を見切れさせない */
}
section.welcome .pickup-carousel .swiper-wrapper {
flex-wrap: wrap; /* 手動3カード横並び */
overflow: visible;
}
section.welcome .pickup-carousel a.swiper-slide {
width: 100%;
max-width: 250px;
padding: 35px 0 20px;
}
}
/* --- タブレット/SP (<=991px): Swiper 稼働。スライド幅は JS に完全委託 --- */
@media screen and (max-width: 991px) {
/* overflow は Swiper デフォルトの hidden に任せる
padding-top はランクバッジ (top:-30px) 用、padding-bottom は prev/next ボタン用 */
section.welcome .pickup-carousel {
padding-top: 40px;
padding-bottom: 60px;
}
section.welcome .pickup-carousel .swiper-wrapper {
flex-wrap: nowrap;
column-gap: 0;
row-gap: 0;
justify-content: flex-start;
margin: 0;
}
/* Swiper の inline width と衝突しないよう width/max-width を解除
a.swiper-slide セレクタで基底 .pickup .in a (0,0,3,2) と同じ詳細度を確保 */
section.welcome .pickup-carousel a.swiper-slide {
width: auto;
max-width: none;
padding: 25px 15px;
box-sizing: border-box;
}
/* ランクバッジ (1/2/3): PC同様にカードの上にはみ出して表示
(padding-top:40px のおかげで Swiper の overflow:hidden で切れない) */
section.welcome .pickup-carousel a.swiper-slide .mp-rank {
top: -30px;
right: 15px;
left: auto;
max-width: 60px;
height: 60px;
}
.mp-rank span:first-of-type { padding: 0; font-size: 8px; font-size: 24px; margin-top: -5px; line-height: 1; }
.mp-rank span:last-of-type { font-size: 8px; }
/* Free power bank バッジは SP ではカード内右下に配置 (左方向のはみ出しは
Swiper の overflow:hidden とカード配置的にスマホでは見切れやすいため) */
section.welcome .pickup-carousel a.swiper-slide .benefits {
position: absolute;
left: auto;
right: 25px;
top: 110px;
width: 74px;
height: 74px;
padding: 8px;
}
section.welcome .pickup-carousel a.swiper-slide .benefits .title { font-size: 10px; }
section.welcome .pickup-carousel a.swiper-slide .benefits .spec { font-size: 9px; }
section.welcome .pickup-carousel a.swiper-slide .benefits .img img { width: 28px; height: 28px; }
}
/* --- スマホ縦 (<768px) のみ hero テキストを小さめに --- */
@media screen and (max-width: 767px) {
section.welcome .container { padding: 30px 15px 15px; }
section.welcome .page-title.home { font-size: 28px !important; line-height: 1.3; }
section.welcome .page-lead { margin: 0 0 0; font-size: 16px; }
}
/* ============================================================
2. 検索ブロック (section.best_mobile .planner)
SP: 日付 / プラン / 人数 / Search を縦並び full-width
入力欄のアイコン (.input-group-text) が上に改行してしまう問題を修正:
- .input-group に flex-wrap: nowrap
- input/select の width: 100% を解除 (Bootstrap の flex:1 1 auto / width:1% を維持)
============================================================ */
@media screen and (max-width: 767px) {
section.best_mobile .container { padding: 0 15px; }
section.best_mobile .in { padding: 25px 18px; }
section.best_mobile .title { font-size: 16px; margin: 0 0 20px; }
section.best_mobile .planner {
flex-direction: column;
align-items: stretch;
column-gap: 0;
row-gap: 18px;
}
section.best_mobile .planner > div { width: 100%; }
/* ★ アイコン改行防止: input-group を nowrap に */
section.best_mobile .planner .input-group {
width: 100%;
flex-wrap: nowrap;
}
/* max-width だけ解除、width は Bootstrap に任せる (input-group 内で自動計算) */
section.best_mobile .planner input,
section.best_mobile .planner select,
section.best_mobile .planner .form-control,
section.best_mobile .planner .form-select {
max-width: none !important;
min-width: 0;
}
section.best_mobile .planner .submit { margin: 0 !important; }
section.best_mobile .planner .submit .btn { width: 100%; padding: 12px; font-size: 16px; }
}
/* ============================================================
3. Featured In / In Corporation With (section.featured)
既存の @media では flex-direction:column 済だが、中央寄せが抜けていたので追加
============================================================ */
@media screen and (max-width: 767px) {
section.featured .container { align-items: center; text-align: center; }
section.featured .featured_in,
section.featured .in_corp { text-align: center; align-items: center; }
section.featured .featured_in div,
section.featured .in_corp div { display: flex; justify-content: center; }
}
/* ============================================================
4. Our Strengths (section.murals)
SP: 3ブロック縦並び。各ブロック内は「画像左・テキスト右」を維持
============================================================ */
@media screen and (max-width: 767px) {
section.murals .container { padding: 50px 15px; }
section.murals h2 { font-size: 26px; margin: 0 0 30px; }
section.murals .row { row-gap: 30px; }
section.murals .col-4 {
flex: 0 0 100%;
max-width: 100%;
column-gap: 20px;
align-items: flex-start;
}
section.murals picture { width: 100px; height: 100px; flex-shrink: 0; }
section.murals picture img { width: 100px; height: 100px; }
section.murals h3 { font-size: 18px; margin: 0 0 8px; }
section.murals p { font-size: 14px; margin: 0 0 8px; }
}
/* ============================================================
5. Comparing (section.products) カルーセル
TOP では Comparing が .plans-carousel#comparing_carousel を使用
(CSSは前回追加済の .plans-carousel ブロックを流用)
- 追加で SP 時の微調整のみ
============================================================ */
@media screen and (max-width: 767px) {
section.products .plans-carousel#comparing_carousel .swiper-slide {
padding: 22px 18px;
}
}
/* ============================================================
6. How (section.flow) カルーセル
============================================================ */
/* overflow: visible は SP で水平スクロールを誘発するため使わない。
PC では Swiper 未初期化で .row が効くため、.swiper-wrapper に
flex-wrap:wrap を指定 (.row の折返しを保証) */
section.flow .flow-carousel .swiper-wrapper { flex-wrap: wrap; }
@media screen and (max-width: 767px) {
section.flow .container { padding: 50px 15px; }
section.flow .row { margin-bottom: 40px; }
section.flow h2 { font-size: 24px !important; margin: 0 0 30px; }
section.flow h3 { font-size: 20px; }
section.flow .flow-item-illustration img { height: 100px; }
/* SP: Swiper として動作 */
section.flow .flow-carousel .swiper-wrapper {
flex-wrap: nowrap;
--bs-gutter-x: 0;
margin: 0;
padding-bottom: 10px;
}
section.flow .flow-carousel .swiper-slide {
flex: 0 0 auto;
max-width: none;
width: auto; /* Swiper の slidesPerView 計算に任せる */
padding: 0 5px;
box-sizing: border-box;
}
/* flow では .col-4::after の矢印 (PC用ステップ区切り) を非表示 */
section.flow .flow-carousel .col-4::after { display: none; }
/* prev/next ボタンは全カルーセル共通ルール (上部) で表示制御 */
}
/* ============================================================
How (section.flow) のうち、ステップ数が 2 つだけのバリアント
(SIM ページの "How To Use Our Prepaid SIM Card" 等で使用)
- HTML:
- HTML 内のスライドは Bootstrap グリッドを使わない
(.swiper-wrapper / .swiper-slide のみ。.row .col-6 .gx-5 は使わない)
- 影響範囲をこのセクション内に限定
- 他ページの section.flow には一切影響しない
============================================================ */
/* PC (>=768px): Swiper は非稼働。.swiper-wrapper を flex で 2 カラムに。
Swiper 標準の .swiper-slide { width:100% } を上書きして 50% に。 */
@media screen and (min-width: 768px) {
/* container 下 padding を縮小 (この section だけ。次の FAQ section にも 100px 上 padding が
あるため、合計で 200px 空いてしまっていた → 100+30=130px に) */
section.flow.flow-2steps .container { padding-bottom: 30px; }
section.flow.flow-2steps .flow-carousel .swiper-wrapper {
display: flex;
flex-wrap: wrap;
column-gap: 40px;
justify-content: center;
}
section.flow.flow-2steps .flow-carousel .swiper-slide {
width: calc(50% - 20px); /* gap 40px の半分ずつ削る */
max-width: 480px;
flex: 0 0 auto;
}
}
/* SP (<=767px): Swiper として動作。slidesPerView 計算に幅を委託 */
@media screen and (max-width: 767px) {
section.flow.flow-2steps .flow-carousel .swiper-wrapper {
flex-wrap: nowrap;
}
section.flow.flow-2steps .flow-carousel .swiper-slide {
width: auto; /* Swiper の inline width を尊重 */
max-width: none;
flex: 0 0 auto;
padding: 0 5px;
box-sizing: border-box;
}
}
/* ============================================================
7. Blog (section.article) カルーセル
PC レイアウト (Grid 化、カード高さ揃え) は上部 (line 390付近) で定義済み。
ここでは SP のみの追加指定を行う。
============================================================ */
@media screen and (max-width: 767px) {
section.article .container { padding: 50px 15px; }
section.article h2 { font-size: 24px !important; margin: 0 0 30px; }
/* SP: Swiper として動作。display:grid (PC用) を上書きして flex に戻す */
section.article .article-carousel .swiper-wrapper {
display: flex;
flex-wrap: nowrap;
--bs-gutter-x: 0;
margin: 0 0 0;
padding-bottom: 10px;
}
section.article .article-carousel .swiper-slide {
flex: 0 0 auto;
max-width: none;
width: auto; /* Swiper の slidesPerView 計算に任せる */
height: auto; /* PC Grid で指定した height:100% を解除 */
padding: 0 5px;
box-sizing: border-box;
}
section.article .row h4 { font-size: 17px; }
section.article .row .body { padding: 20px 22px 15px; }
section.article .article-carousel .swiper-button-prev,
section.article .article-carousel .swiper-button-next {
display: flex;
--swiper-navigation-size: 28px;
}
}
/* ============================================================
8. About (section.about)
- 右側の余白を詰める
- SP では縦並び
============================================================ */
section.about .col-sm-6 { padding-right: 40px; } /* 元 80px → 40px に縮小 */
@media screen and (max-width: 991px) {
section.about .container { flex-direction: column; padding: 60px 20px; }
section.about .col-sm-6 { padding-right: 0; margin-bottom: 40px; }
section.about .col-sm-6:last-child { margin-bottom: 0; }
}
@media screen and (max-width: 767px) {
section.about .container { padding: 40px 15px; }
section.about h2 { font-size: 20px; }
section.about .img { width: 100px; height: 100px; }
section.about p { font-size: 14px; line-height: 1.6; }
}
.br-pc {display: block; }
.br-sp {display: none; }
._pc_none { display: none; }
._sp_none { display: initial; }
@media screen and (max-width:768px) {
.br-pc {display: none; }
.br-sp {display: block; }
._pc_none { display: block; }
._sp_none { display: none; }
}