/* * トップページ（front-page.php）専用: PC/SP統合作業でSP側に追加したモバイル用スタイル。 * responsive-nav.css（サイト共通のヘッダー/フッター）とは別に、front-page.phpだけで * 使うセクション（.nav--company/.visual--top1/.hot-news等）をここにまとめる。 * 表示切り替えは.site-nav--pc/.site-nav--sp（responsive-nav.cssの * @media (max-width: 768px)ブロック）に従う。 * 元は titicaca-sp/css/common.css の該当ルールを移植したもの。 */ /* * #mv_pop（未使用のYouTube動画ポップアップ、廃止済みの#happyセクション用の名残）は * #wrap-top/#wrapperの外側（直下）にあり.site-nav--pc/--spで包まれていないため、 * PC幅限定にしたtop.css内のdisplay:noneがモバイルには効かなくなり、素のブロック要素として * 表示されてしまっていた（ヘッダー下の空白の原因）。表示トリガーも現状存在しないため、 * 常時非表示のまま維持する。 */ #mv_pop, #mv_pop #mv_popBox { display: none; } /* * top-common.cssのbody{font-family:...}は、SP用ハンバーガーメニューとの * 衝突を避けるためファイル全体が@media (min-width: 769px)で囲われており * （front-page.php専用のPC版レガシーCSSのため）、モバイル幅では効かない。 * front-page.phpは他ページと違いstyle.css（サイト共通、body書体を持つ）自体を * 読み込まないため、SP用のbody書体指定がどこにも存在せず、ブラウザ既定の * フォント（環境によってはNoto Sans JP等）にフォールバックしてしまっていた * （ユーザー報告「ページによってフォントがNoto Sans JPになっている」により発覚）。 * 本番titicaca-sp/css/common.cssの実際のbody書体をモバイル幅限定で追加する。 */ @media (max-width: 768px) { body { font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Osaka', Arial, sans-serif; } } /* * titicaca-spのheader.php構成では.contents{padding-top:53px}が固定ヘッダー分の * 余白を確保していた。front-page.phpにはcontents相当の共通クラスがないため、 * #wrapper（PC/SP共通のIDだが、front-page.php以外ではこのCSSファイル自体を * 読み込まないため影響しない）に同じ余白をモバイル幅限定で持たせる。 */ @media (max-width: 768px) { #wrapper { padding-top: 53px; } /* * 管理バー表示時は.sp-header自体がその分下にずれる（responsive-nav.cssの * .admin-bar .sp-header）。#wrapperのpadding-topは固定値のままだと管理バー分の * 差がヘッダーと本文の間の余白として見えてしまうため、同じだけ足す。 * 768px以下は常にresponsive-nav.css側の782px以下ブレークポイントにも入るため、 * 管理バーの高さは常に46px側になる。 */ .admin-bar #wrapper { padding-top: 99px; } } .nav--company { background: url(../images/nav/bg_nav_company_x.png) repeat-x; background-size: 30px auto; position: relative; top: -5px; margin-bottom: -5px; } .nav--company__list { width: 100%; list-style: none; margin: 0; padding: 0; overflow: hidden; } .nav--company__item { width: 33.3%; height: 39px; float: left; text-align: center; background: url(../images/nav/bg_nav_company_y.png) repeat-y right top; background-size: auto 6px; } .nav--company__item:last-child { background: none; } .nav--company__item img { height: 13px; width: auto; } .nav--company__item a { display: block; height: 100%; padding-top: 4px; box-sizing: border-box; } .hot-news { color: #000; max-width: 640px; margin: 5px auto 0; padding: 0; font-size: 12px; text-align: center; } .hot-news p { margin: 0 10px; padding: 2px 0; text-align: center; background-color: #fff; } .hot-news p a { color: #000; font-weight: bold; } .visual--top1 { position: relative; overflow: hidden; } .visual--top1:before, .visual--top1:after { content: ''; width: 100%; height: 15px; background-image: url(../images/common/line02.png); background-size: 18px 15px; display: block; } .visual--top1:after { transform: rotateZ(180deg); } .visual__img { margin: 0; line-height: 0; text-align: center; } /* * 元テーマ(titicaca-sp)はimg{max-width:100%;}をグローバルに設定していたため * 個別の画像サイズ指定が不要だったが、統合先(titicaca)のstyle.cssにはこの * リセットがなく、他ページへの影響を避けるためグローバル追加はせずここで * 個別に指定する（ヘッダーロゴ等で発生したのと同じ「等倍で崩れる」問題の予防）。 */ .visual__img img { width: 100%; height: auto; } .visual--top1__flag { position: absolute; top: 0; left: 50%; margin-left: -232px; width: 465px; max-width: none; height: auto; } .visual--top1__link1 { width: 100px; position: absolute; bottom: 50px; left: 50%; margin-left: -50px; } .visual--top1__link1 img { width: 100%; height: auto; } .news { background: url(../images/top/bg_news.png) no-repeat center 10px; background-size: 360px auto; padding-bottom: 50px; overflow: hidden; position: relative; } .news:after { content: ''; width: 100%; height: 2px; background-image: url(../images/common/line01.png); background-repeat: repeat-x; background-size: auto 2px; position: absolute; bottom: 0; left: 0; } .news__title { width: 206px; margin: 0 auto; padding: 25px 0 20px; } .news__title img { width: 100%; height: auto; } .news__btn { width: 225px; margin: 0 auto; } .news__btn img { width: 100%; height: auto; } .slider--news .slider-main { width: 476px; margin-left: 172px; } .slider--news .slide { width: 152px; padding: 10px 0; } .slider--news .slide:nth-child(odd) .slider--news__item { transform: rotate(4deg); } .slider--news .slide:nth-child(even) .slider--news__item { transform: rotate(-4deg); } .slider--news .bx-wrapper .bx-controls-direction a { margin-top: 0; height: 200px; } .slider--news__item { display: block; width: 120px; height: 210px; background-repeat: no-repeat; background-size: 120px auto; } .slider--news__item a { display: block; padding: 30px 15px 0 15px; height: 190px; position: relative; box-sizing: border-box; } .slider--news__item.cat-info { background-image: url(../images/news/info.jpg); } .slider--news__item.cat-event { background-image: url(../images/news/event.jpg); } .slider--news__item.cat-happytrade { background-image: url(../images/news/happytrade.jpg); } .slider--news__item.cat-media { background-image: url(../images/news/media.jpg); } .slider--news__title { font-size: 10px; font-weight: bold; margin: 0; color: #000; line-height: 1.5; max-height: 43px; overflow: hidden; word-wrap: break-word; } .slider--news__img { width: 90px; /* * 元のtiticaca-sp/css/top.cssにはheight指定がなく、widthだけを90pxに固定していた。 * news-top-image（ACF）は正方形とは限らず、縦長画像がアップロードされると * アスペクト比のままwidthに合わせて縦に伸び、カード下部のタイトル文字を覆って * しまう不具合が実データ（人気スタッフコーディネート記事）で発生したため、 * 正方形に固定してobject-fit:coverでトリミング表示する。 */ height: 90px; object-fit: cover; border: 1px solid #ddd; box-sizing: border-box; position: absolute; bottom: 15px; left: 15px; } .slider--news__nav { list-style: none; margin: 0 0 20px; padding: 0; text-align: center; } .slider--news__nav__item { display: inline-block; background-color: #fff; margin: 0; padding: 0 12px; border-radius: 50px; font-size: 8px; font-weight: bold; position: relative; cursor: pointer; } .slider--news__nav__item.is-active:before, .slider--news__nav__item:hover:before { content: ''; position: absolute; bottom: -8px; left: 50%; margin-left: -5px; display: block; width: 0; height: 0; border-style: solid; border-width: 8px 5px 0 5px; border-color: #fff transparent transparent transparent; } .slider--news__nav__item.all { color: #3fb0ff; } .slider--news__nav__item.all.is-active, .slider--news__nav__item.all:hover { background-color: #3fb0ff; color: #fff; } .slider--news__nav__item.all.is-active:before, .slider--news__nav__item.all:hover:before { border-color: #3fb0ff transparent transparent transparent; } .slider--news__nav__item.info { color: #e60c31; } .slider--news__nav__item.info.is-active, .slider--news__nav__item.info:hover { background-color: #e60c31; color: #fff; } .slider--news__nav__item.info.is-active:before, .slider--news__nav__item.info:hover:before { border-color: #e60c31 transparent transparent transparent; } .slider--news__nav__item.media { color: #ff8400; } .slider--news__nav__item.media.is-active, .slider--news__nav__item.media:hover { background-color: #ff8400; color: #fff; } .slider--news__nav__item.media.is-active:before, .slider--news__nav__item.media:hover:before { border-color: #ff8400 transparent transparent transparent; } .slider--news__nav__item.event { color: #ff28b1; } .slider--news__nav__item.event.is-active, .slider--news__nav__item.event:hover { background-color: #ff28b1; color: #fff; } .slider--news__nav__item.event.is-active:before, .slider--news__nav__item.event:hover:before { border-color: #ff28b1 transparent transparent transparent; } .slider--news__nav__item.happytrade { color: #1b44b9; } .slider--news__nav__item.happytrade.is-active, .slider--news__nav__item.happytrade:hover { background-color: #1b44b9; color: #fff; } .slider--news__nav__item.happytrade.is-active:before, .slider--news__nav__item.happytrade:hover:before { border-color: #1b44b9 transparent transparent transparent; } .brandtop__title { width: 238px; margin: 0 auto; padding: 15px 0 10px; } .brandtop__title img { width: 100%; height: auto; } .visual--brandtop { height: 303px; background: url(../images/top/bg_brand.gif) repeat-x; background-size: 98px auto; position: relative; overflow: hidden; } .visual--brandtop__img { width: 346px; max-width: none; margin: 0; position: relative; left: 50%; margin-left: -173px; } .visual--brandtop__img img { width: 100%; height: auto; } .visual--brandtop__link1 { width: 125px; display: block; position: absolute; top: 172px; left: 50%; margin-left: -62px; } .visual--brandtop__link2 { width: 125px; display: block; position: absolute; top: 213px; left: 50%; margin-left: -62px; } .visual--brandtop__link1 img, .visual--brandtop__link2 img { width: 100%; height: auto; } .shop-search { padding-bottom: 40px; position: relative; } .shop-search:after { content: ''; width: 100%; height: 2px; background-image: url(../images/common/line01.png); background-repeat: repeat-x; background-size: auto 2px; position: absolute; bottom: 0; left: 0; } .shop-search__title { /* images/shop/title.png（646x80）採用に伴い、他タイトルと近い高さ(約40px)になる幅に調整 */ width: 320px; margin: 0 auto; padding: 15px 0 20px; } .shop-search__title img { width: 100%; height: auto; } .select__wrap { width: 100%; /* line-height:34pxで決まる本来の高さを明示し、崩れて潰れて見えるのを防ぐ */ height: 34px; position: relative; overflow: hidden; background-color: #e50a84; } .select__txt { color: #fff; line-height: 34px; font-size: 15px; font-weight: bold; padding-left: 10px; } .select__txt:after { content: ''; width: 28px; height: 28px; background-image: url(../images/common/parts_select.png); background-size: 28px; position: absolute; top: 3px; right: 3px; } .select__list { width: 100%; height: 100%; zoom: 1.5; position: absolute; top: 0; left: 0; opacity: 0; } .search-block { margin: 0 20px; } .search-block__inner { max-width: 600px; background-color: #fff; padding: 25px; margin: 0 auto; overflow: hidden; box-sizing: border-box; } .search-block__select { clear: both; } .online-shop { position: relative; } .online-shop:after { content: ''; width: 100%; height: 2px; background-image: url(../images/common/line01.png); background-repeat: repeat-x; background-size: auto 2px; position: absolute; bottom: 0; left: 0; } .online-shop__title { width: 276px; margin: 0 auto; padding: 15px 0 10px; } .online-shop__title img { width: 100%; height: auto; } .visual--online-shop { position: relative; margin-bottom: -4px; } .visual--online-shop__title { text-align: center; margin: 0; } .visual--online-shop__title img { width: 100%; height: auto; } .visual--online-shop____link1 { position: absolute; bottom: 50px; left: 50%; width: 225px; margin-left: -112px; } .visual--online-shop____link1 img { width: 100%; height: auto; } .appli { margin-top: 32px; } .appli__title { width: 276px; margin: 0 auto; padding: 15px 0 10px; } .appli__title img { width: 100%; height: auto; } .visual--appli { position: relative; margin-bottom: -4px; } .visual--appli__title { text-align: center; margin: 0; } .visual--appli__title img { width: 100%; height: auto; }