@charset "UTF-8";
/* ################################# 必読 =========================================== 注意点 =========================================== 各ツールのバージョンに注意！　コマンドプロンプトで、●● -v　で実行で確認できます。　例： ruby -v ruby		: 2.0.0p645 (2015-04-13) [i386-mingw32] compass	: 1.0.3 (Polaris) sass		: 3.4.13 (Selective Steve) =========================================== 作成ルール =========================================== (1) #featureContent　よりも上の階層のhtmlは操作しない。 (2) グローバル変数 / mixin / id / class 等には接頭辞 fc_ または、fc-　をつける。 　　　※ただし、ローカル変数としてセレクタ内で扱う場合は、この限りではない。 例： $fc_varName @mixin fc_myMixin() .fc_className .fc_idName (3) 基本的に、BEM記法で記述する =========================================== 検証対象 =========================================== 2016-08-05公開分以降は、IE10以下は対象外に。 ※2016/07/26 9:08　メールにて小山田さん承認済 windows7 IE11 windows7 Firefox windows7 Chrome windows10 IE11 windows10 Edge mac Safari android5.1.1 XperiaZ5 chrome android4.4.4 Nexus7 2013 chrome ios7.0.4 iphone5s Safari ios9.2.1 iphone6plus Safari ios最新版 ipad Air Safari =========================================== @mixin fc_media について =========================================== 基本的に第2製作Tの、gulpテンプレートの、mixin「media」と同じです。 ただし、ウィンドウ幅は、body #feature #featureContent以下に、ローカル変数として定義しています。 ----------------------- 指定例 引数は全て、正数（単位不要）。 第1引数のみ指定・・・・・・・・・・第1引数×1px　以上の幅の際に反映するcss　 第1引数、第2引数を指定・・・第1引数×1px　以上、 （第2引数×1px - 1px）の間の幅に反映するcss @include fc_media(0, 320)		// 0～319px @include fc_media(320, 600)		// 320px～599px @include fc_media(320, 768)		// 320px～767px @include fc_media(320)			// 320px～ @include fc_media(768)			// 768px～ 同様に変数を代入することも可能。 $xs: 320px $sm: 600px $md: 768px のローカル変数の指定が有る場合 @include fc_media(0, $xs)		// 0～319px @include fc_media($xs, $sm)		// 320px～599px @include fc_media($xs, $md)		// 320px～767px @include fc_media($xs)			// 320px～ @include fc_media($md)			// 768px～ ----------------------- 注意点 入れ子にはできません。ただし、セレクタの子孫には指定可能。 */
body #feature #featureContent { color: #4B362E; font-family: "Noto Sans JP", sans-serif; }

body #feature #featureContent img { max-width: 100%; height: auto; display: block; }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent { margin: 0 auto; max-width: 500px; } }

@media print, screen and (min-width: 48pc) { body #feature #featureContent { width: 768px; } }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-pc { display: none; } }

@media print, screen and (min-width: 48pc) { body #feature #featureContent .fc-sp { display: none; } }

body #feature #featureContent .fc-bridge { background-color: #EFD246; overflow: hidden; position: relative; display: flex; justify-content: center; }

body #feature #featureContent .fc-bridge-txt-wrap { position: relative; z-index: 1; padding-top: 24px; padding-bottom: 16px; }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-bridge-txt-wrap { padding-left: 16px; padding-right: 16px; } }

@media print, screen and (min-width: 48pc) { body #feature #featureContent .fc-bridge-txt-wrap { padding-left: 24px; padding-right: 24px; } }

body #feature #featureContent .fc-bridge-decoration { position: absolute; }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-bridge-decoration-left { top: -140px; left: -130px; } }

@media print, screen and (min-width: 48pc) { body #feature #featureContent .fc-bridge-decoration-left { top: -130px; left: -80px; } }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-bridge-decoration-right { bottom: -80px; left: 210px; } }

@media print, screen and (min-width: 48pc) { body #feature #featureContent .fc-bridge-decoration-right { top: -50px; right: -100px; } }

body #feature #featureContent .fc-product { background-size: cover; margin-top: 0; padding: 60px 24px; position: relative; }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-product { background-image: url("/common/goodsFeature/nid-fried-beans_2181484_2609/img/product-bg-sp.webp"); } }

@media print, screen and (min-width: 48pc) { body #feature #featureContent .fc-product { background-image: url("/common/goodsFeature/nid-fried-beans_2181484_2609/img/product-bg-pc.webp"); } }

body #feature #featureContent .fc-yellow-strip { height: 24px; width: 100%; position: absolute; top: 0; left: 0; }

body #feature #featureContent .fc-product-name-pc { margin: 0 auto; }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-product-name-sp { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; } }

body #feature #featureContent .fc-product-inner { margin-top: 24px; display: flex; justify-content: center; gap: 24px; }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-product-inner { flex-direction: column; align-items: center; } }

@media print, screen and (min-width: 48pc) { body #feature #featureContent .fc-product-inner { align-items: flex-end; } }

body #feature #featureContent .fc-product-img-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }

body #feature #featureContent .fc-features { background-color: #EFD246; overflow: hidden; padding-top: 60px; padding-bottom: 60px; position: relative; display: flex; flex-direction: column; gap: 60px; }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-features { padding-left: 16px; padding-right: 16px; } }

@media print, screen and (min-width: 48pc) { body #feature #featureContent .fc-features { padding-left: 24px; padding-right: 24px; } }

body #feature #featureContent .fc-feature { position: relative; z-index: 1; }

body #feature #featureContent .fc-feature-heading { font-weight: bold; position: relative; display: flex; gap: 24px; }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-feature-heading { flex-direction: column; } }

@media print, screen and (min-width: 48pc) { body #feature #featureContent .fc-feature-heading { align-items: flex-start; } }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-feature-heading-num { margin: 0 auto; } }

@media print, screen and (min-width: 48pc) { body #feature #featureContent .fc-feature-heading-num { position: relative; top: 4px; } }

body #feature #featureContent .fc-feature-heading-txt { display: flex; flex-direction: column; line-height: 1.25; }

html.chrome body #feature #featureContent .fc-feature-heading-txt, html:not([class*="win"]) body #feature #featureContent .fc-feature-heading-txt { font-size: 28px; }

html.ie8 body #feature #featureContent .fc-feature-heading-txt, html.firefox body #feature #featureContent .fc-feature-heading-txt { font-size: 28px; }

html:not([class*="chrome"]) body #feature #featureContent .fc-feature-heading-txt { font-size: 1.75rem; }

body #feature #featureContent .fc-feature-heading-txt-lg { line-height: 1.25; }

html.chrome body #feature #featureContent .fc-feature-heading-txt-lg, html:not([class*="win"]) body #feature #featureContent .fc-feature-heading-txt-lg { font-size: 38px; }

html.ie8 body #feature #featureContent .fc-feature-heading-txt-lg, html.firefox body #feature #featureContent .fc-feature-heading-txt-lg { font-size: 38px; }

html:not([class*="chrome"]) body #feature #featureContent .fc-feature-heading-txt-lg { font-size: 2.375rem; }

body #feature #featureContent .fc-feature-txt { text-align: left; line-height: 1.5; }

html.chrome body #feature #featureContent .fc-feature-txt, html:not([class*="win"]) body #feature #featureContent .fc-feature-txt { font-size: 22px; }

html.ie8 body #feature #featureContent .fc-feature-txt, html.firefox body #feature #featureContent .fc-feature-txt { font-size: 22px; }

html:not([class*="chrome"]) body #feature #featureContent .fc-feature-txt { font-size: 1.375rem; }

@media print, screen and (min-width: 48pc) { body #feature #featureContent .fc-feature-content { display: flex; align-items: center; gap: 16px; } }

body #feature #featureContent .fc-feature-img-wrap { flex: none; width: 250px; }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-feature-img-wrap { margin: 24px auto 0; } }

body #feature #featureContent .fc-feature-img-note { line-height: 1.5; margin-top: 10px; text-align: right; }

html.chrome body #feature #featureContent .fc-feature-img-note, html:not([class*="win"]) body #feature #featureContent .fc-feature-img-note { font-size: 12px; }

html.ie8 body #feature #featureContent .fc-feature-img-note, html.firefox body #feature #featureContent .fc-feature-img-note { font-size: 12px; }

html:not([class*="chrome"]) body #feature #featureContent .fc-feature-img-note { font-size: 0.75rem; }

body #feature #featureContent .fc-feature-decoration { position: absolute; }

body #feature #featureContent .fc-feature-decoration-top { transform: rotate(5deg); }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-feature-decoration-top { top: -60px; right: -110px; } }

@media print, screen and (min-width: 48pc) { body #feature #featureContent .fc-feature-decoration-top { top: -60px; right: -70px; } }

body #feature #featureContent .fc-feature-decoration-bottom { transform: rotate(-10deg); }

@media only screen and (max-width: 47.99pc) { body #feature #featureContent .fc-feature-decoration-bottom { bottom: -80px; left: -60px; } }

@media print, screen and (min-width: 48pc) { body #feature #featureContent .fc-feature-decoration-bottom { bottom: -90px; left: -20px; } }