:import("../colors/_colors.css"){ i__const_col_text_common_0: col-text-common; i__const_col_text_placeholder_common_1: col-text-placeholder-common; } :import("../variables/_variables.css"){ i__const_hover_time_transition_common_2: hover-time-transition-common; } :export{ values: "../variables/_variables.css"; colors: "../colors/_colors.css"; col-text-common: #333; col-text-placeholder-common: i__const_col_text_placeholder_common_1; hover-time-transition-common: 0.2s; size-width-page-pc: 990px; size-width-content-pc: 800px; size-width-procedure-pc: 500px; size-width-modal-pc: 500px; size-width-column-main-pc: 230px; size-thumbnail-small-pc: 80px; size-thumbnail-middle-pc: 96px; size-thumbnail-wide-width-pc: 148px; size-thumbnail-wide-height-pc: 84px; size-thumbnail-small-sp: 80px; size-thumbnail-middle-sp: 96px; size-thumbnail-wide-width-sp: 148px; size-thumbnail-wide-height-sp: 84px; layer-under-common: -1; layer-base-common: 1; layer-middle-common: 100; layer-high-common: 200; layer-overlay-common: 5000100; layer-modal-common: 5000200; radius-common: 4px; radius-small-common: 3px; radius-btn-normal: 4px; shadow-card-normal-common: 0 0 3px 0 rgba(0, 0, 0, .3); shadow-card-bottom-common: 0 3px 3px -3px rgba(0, 0, 0, .3); shadow-button-normal-common: 0 0 3px 0 rgba(0, 0, 0, .3); space-content-inner-pc: 16px; space-content-inner-pc-lv1: 8px; space-content-inner-pc-lv2: 12px; space-content-inner-pc-lv3: 16px; space-content-inner-pc-lv4: 20px; space-content-inner-pc-lv5: 24px; space-content-inner-sp: 12px; space-content-inner-sp-lv1: 8px; space-content-inner-sp-lv2: 12px; space-content-inner-sp-lv3: 16px; space-content-inner-sp-lv4: 20px; space-content-inner-sp-lv5: 24px; hover-img-opacity-common: 0.5; hover-button-opacity-common: 0.5; fontsize-lv1: 12px; fontsize-lv2: 14px; fontsize-lv3: 16px; fontsize-lv4: 18px; fontsize-lv5: 20px; fontsize-lv6: 22px; expand-transition: opacity 0.35s ease-in-out, max-height 0.25s ease-in-out; col-primary-red-common: #ff6673; col-secondary-blue-common: #1a75ff; col-bg-pink: #EC7FAB; col-gray-common: #666; col-text-sub-common: #999; col-text-blue-common: #019dff; col-link-blue-pc: #4c7df1; col-link-blue-hover-pc: #a5bef8; col-link-blue-visited-pc: #941d55; col-bor-lv1-common: #f0f0f0; col-bg-lv1-common: #fff; col-bg-content-pc: #eee; col-bg-content-sp: #eee; col-button-normal-bg-common: #fff; col-button-normal-ie-border-common: #d8d8d8; } /* foundation */ @charset "UTF-8"; /** * iOS 11+ で、ヒラギノフォントが指定サイズより1px小さく描画されてしまう問題の対策 * * @see * ios11以前と以降での、-apple-systemの表示 - Qiita * https://qiita.com/a_t/items/18693be11bd87f98d212 */ @font-face { font-family: '-apple-system-subset'; src: local(-apple-system); unicode-range: U+0000-05C7; } /* ---------------------------------- *\ Reset Box Model \* ---------------------------------- */ * { -webkit-box-sizing: border-box; box-sizing: border-box; } ::before, ::after { -webkit-box-sizing: inherit; box-sizing: inherit; } /* ---------------------------------- *\ Document \* ---------------------------------- */ /** * 1. ページの高さを、常にビューポート分確保する * 2. タッチデバイスで自動でズームされるのを防ぐ */ html { min-height: 100%; /* 1 */ line-height: 1.5; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* 2 */ } /* ---------------------------------- *\ Sections \* ---------------------------------- */ body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, -apple-system-subset, 'Hiragino Kaku Gothic ProN', sans-serif; } /** * IE で、main 要素を正常に表示させる */ main { display: block; } /* ---------------------------------- *\ Vertical Rhythm \* ---------------------------------- */ p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0; } /* ---------------------------------- *\ Headings \* ---------------------------------- */ h1, h2, h3, h4, h5, h6 { font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0; } /* ---------------------------------- *\ Lists \* ---------------------------------- */ ul, ol { margin: 0; padding: 0; list-style: none; } dt { font-weight: bold; } dd { margin-left: 0; } /* ---------------------------------- *\ Grouping content \* ---------------------------------- */ /** * 1. Firefox で、box-sizing を正常にする * 2. IE、Edge で、はみ出した部分も表示されるようにする */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ border: 0; border-top: 1px solid; margin: 0; clear: both; } /** * 1. すべてのブラウザで、フォントサイズが正常に継承されるようにする * * @see * https://github.com/necolas/normalize.css/issues/519#issuecomment-197131966 * * 2. すべてのブラウザで、'em'で指定したフォントサイズが反映されるようにする */ pre { /* stylelint-disable-next-line font-family-no-duplicate-names */ font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ } address { font-style: inherit; } /* ---------------------------------- *\ Text-level semantics \* ---------------------------------- */ /** * IE 10 で、クリック時のグレー背景を無効化 */ a { background-color: transparent; text-decoration: none; color: inherit; } /** * 1. Chrome 57- で、下線を削除 * 2. Chrome、Edge、IE、Opera、Safari で、正常に装飾されるようにする */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Chrome、Edge、Safari で、フォントウェイトを正常にする */ b, strong { font-weight: bolder; } /** * 1. すべてのブラウザで、フォントサイズが正常に継承されるようにする * * @see * https://github.com/necolas/normalize.css/issues/519#issuecomment-197131966 * * 2. すべてのブラウザで、'em'で指定したフォントサイズが反映されるようにする */ code, kbd, samp { /* stylelint-disable-next-line font-family-no-duplicate-names */ font-family: monospace, monospace; /* 1 */ font-size: inherit; /* 2 */ } /** * すべてのブラウザで、正常なフォントサイズで表示する */ small { font-size: 80%; } /** * すべてのブラウザで、sub/sup 要素に line-height が影響しないようにする */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* ---------------------------------- *\ Embedded content \* ---------------------------------- */ /** * IE 10 で、リンク内の画像のボーダーを削除する */ img { border-style: none; vertical-align: bottom; } embed, object, iframe { border: 0; vertical-align: bottom; } /* ---------------------------------- *\ Forms \* ---------------------------------- */ /** * フォーム関連要素をリセットしてスタイルを整える * 1. ラジオボタンとチェックボックスをリセットしつつ、iOS では iOS 独自のスタイルを維持する */ button, input, optgroup, select, textarea { -webkit-appearance: none; appearance: none; vertical-align: middle; color: inherit; font: inherit; border: inherit; background: transparent; padding: 0; margin: 0; outline: 0; border-radius: 0; text-align: inherit; } [type='checkbox'] { /* 1 */ -webkit-appearance: checkbox; appearance: checkbox; } [type='radio'] { /* 1 */ -webkit-appearance: radio; appearance: radio; } /** * IE、Edge で、はみ出した部分も表示されるようにする */ button, input { overflow: visible; } /** * Edge、Firefox、IE で、text-transform の継承を無効化 */ button, select { text-transform: none; } /** * iOS と Safari で、クリッカブルにならない状態を正常にする */ button, [type='button'], [type='reset'], [type='submit'] { cursor: pointer; -webkit-appearance: none; appearance: none; } button[disabled], [type='button'][disabled], [type='reset'][disabled], [type='submit'][disabled] { cursor: default; } /** * Firefox で、内側の border と padding を削除 */ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } /** * 前のルールにおいて無効化したフォーカス時のスタイルを再度有効化する */ button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } /** * 非表示にする */ fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } /** * 1. Edge、IE で、テキストの囲みを正常にする * 2. IE で、fieldset 要素の色の継承を正常にする * 3. すべてのブラウザで、fieldset と同時に使った際の legend につく padding を削除 */ legend { color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Chrome、Firefox、Operaで、縦位置を正常にする */ progress { vertical-align: baseline; } /** * IE 10+ でデフォルトの縦方向のスクロールバーを削除 */ textarea { overflow: auto; } /** * 1. IE 10 で padding を削除 */ [type='checkbox'], [type='radio'] { padding: 0; /* 1 */ } /** * Chromeで、 時の ▲ と ▼ の装飾を無効化 */ [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } /** * 1. Safari で、アウトラインのスタイルを正常化 */ [type='search'] { outline-offset: -2px; /* 1 */ } /** * macOSの Chrome、Safari で、内側の padding を削除 */ [type='search']::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } /** * 1. iOS、Safariで、クリッカブルなテキスト要素を無効化 * 2. Safari で、フォントのプロパティを 'inherit' に変更 */ ::-webkit-file-upload-button { -webkit-appearance: button; appearance: button; /* 1 */ font: inherit; /* 2 */ } /** * ラベルをクリッカブルにする */ label[for] { cursor: pointer; } /* ---------------------------------- *\ Interactive \* ---------------------------------- */ /** * Edge、IE+、Firefox で、正常に表示させる */ details { display: block; } /** * すべてのブラウザで、正常にに表示させる */ summary { display: list-item; } /* ---------------------------------- *\ Table \* ---------------------------------- */ table { border-collapse: collapse; border-spacing: 0; } caption { text-align: left; } td, th { vertical-align: top; } th { text-align: left; font-weight: bold; } html { font-size: 62.5%; /* 1remを10pxにして計算しやすくする */ line-height: 1.6; } body { color: #333; font-size: 1.6rem; } h1, h2, h3, h4, h5, h6 { font-weight: bold; } em { font-style: normal; } img { max-width: 100%; } a { text-decoration: none; } a:hover img { -webkit-transition: 0.2s; transition: 0.2s; } button > span { pointer-events: none; } input[type='text'], input[type='password'], input[type='tel'], input[type='url'], input[type='email'], input[type='number'], input[type='search'], textarea, select[multiple], button { border: none; } /* placeholder */ /* Webkit */ ::-webkit-input-placeholder { color: i__const_col_text_placeholder_common_1; opacity: 1; } /* Firefox 18 以前 */ :-moz-placeholder { color: i__const_col_text_placeholder_common_1; } /* Firefox 19 以降 */ ::-moz-placeholder { color: i__const_col_text_placeholder_common_1; opacity: 1; } /* IE 10 以降 */ :-ms-input-placeholder { color: i__const_col_text_placeholder_common_1; } /* サイズ */ /* サムネイル */ /********** レイヤー（z-index） layer 変数名や階層数などは運用しながら調整予定 **********/ /* 背景的に使いたい場合など */ /* 通常 */ /* ちょっと上げたい場合、absoluteにして被せたいときなど */ /* fixedな要素など */ /* 全社マストヘッド:5000000 */ /* 要素全体に被せるoverlayなど */ /* overlayの上で用いるモーダルなど */ /********** 角丸 radius **********/ /* オブジェクトのサイズが44px*44px未満のものは3pxを利用 */ /********** 影 box-shadow **********/ /********** 余白 space **********/ /********** マウスオーバー時 **********/ /********** フォントサイズ **********/ /********** フォントサイズ **********/ /* 主要色 */ /* 文字色 */ /* 通常 */ /* ちょっと薄め */ /* 補足テキスト */ /* タグテキストなど */ /* リンク色 */ /* 罫線 */ /* コンテンツ内の区切りなど */ /* 背景色 */ /* ボタン */ /* 関数みたいなものを */ /* テキストを複数行で３点リーダーにする時に使う（PC向け） ● 引数 line-height：任意（デフォルトは1.4） font-size：任意（デフォルトは14px） 行数：任意（デフォルトは3行） 背景色：任意（デフォルトは#fff） ● 注意点 ・リンクの中で使ってhover時に背景色が変わる場合などは、それ用の記述が必要 */ /* テキストを複数行で３点リーダーにする時に使う（SP向け） ● 引数 行数：任意（デフォルトは3行） */ /* --- アニメーション --- */ /* スケルトンスクリーン フェードイン */ /* モーダル フェードイン */ @-webkit-keyframes leftTop { 0% { margin-left: -67.85714vw; margin-top: -60.71429vw; opacity: 0; } 50% { margin-left: -38.09524vw; margin-top: -30.95238vw; opacity: 50%; } 100% { margin-left: -8.33333vw; margin-top: -1.19048vw; opacity: 100%; } } @keyframes leftTop { 0% { margin-left: -67.85714vw; margin-top: -60.71429vw; opacity: 0; } 50% { margin-left: -38.09524vw; margin-top: -30.95238vw; opacity: 50%; } 100% { margin-left: -8.33333vw; margin-top: -1.19048vw; opacity: 100%; } } @-webkit-keyframes leftMid { 0% { margin-left: -63.69048vw; margin-top: 81.54762vw; opacity: 0; } 50% { margin-left: -33.92857vw; margin-top: 51.78571vw; opacity: 50%; } 100% { margin-left: -4.16667vw; margin-top: 22.02381vw; opacity: 100%; } } @keyframes leftMid { 0% { margin-left: -63.69048vw; margin-top: 81.54762vw; opacity: 0; } 50% { margin-left: -33.92857vw; margin-top: 51.78571vw; opacity: 50%; } 100% { margin-left: -4.16667vw; margin-top: 22.02381vw; opacity: 100%; } } @-webkit-keyframes leftBottom { 0% { margin-left: -66.66667vw; margin-top: 105.35714vw; opacity: 0; } 50% { margin-left: -36.90476vw; margin-top: 75.59524vw; opacity: 50%; } 100% { margin-left: -7.14286vw; margin-top: 45.83333vw; opacity: 100%; } } @keyframes leftBottom { 0% { margin-left: -66.66667vw; margin-top: 105.35714vw; opacity: 0; } 50% { margin-left: -36.90476vw; margin-top: 75.59524vw; opacity: 50%; } 100% { margin-left: -7.14286vw; margin-top: 45.83333vw; opacity: 100%; } } @-webkit-keyframes rightTop { 0% { margin-right: -60.71429vw; margin-top: -64.28571vw; opacity: 0; } 50% { margin-right: -30.95238vw; margin-top: -34.52381vw; opacity: 50%; } 100% { margin-right: -1.19048vw; margin-top: -4.7619vw; opacity: 100%; } } @keyframes rightTop { 0% { margin-right: -60.71429vw; margin-top: -64.28571vw; opacity: 0; } 50% { margin-right: -30.95238vw; margin-top: -34.52381vw; opacity: 50%; } 100% { margin-right: -1.19048vw; margin-top: -4.7619vw; opacity: 100%; } } @-webkit-keyframes rightMid { 0% { margin-right: -62.5vw; margin-top: 13.69048vw; opacity: 0; } 50% { margin-left: -32.7381vw; margin-top: 13.69048vw; opacity: 50%; } 100% { margin-right: -2.97619vw; margin-top: 13.69048vw; opacity: 100%; } } @keyframes rightMid { 0% { margin-right: -62.5vw; margin-top: 13.69048vw; opacity: 0; } 50% { margin-left: -32.7381vw; margin-top: 13.69048vw; opacity: 50%; } 100% { margin-right: -2.97619vw; margin-top: 13.69048vw; opacity: 100%; } } @-webkit-keyframes rightBottom { 0% { margin-right: -72.02381vw; margin-top: 97.61905vw; opacity: 0; } 50% { margin-right: -42.2619vw; margin-top: 67.85714vw; opacity: 50%; } 100% { margin-right: -12.5vw; margin-top: 38.09524vw; opacity: 100%; } } @keyframes rightBottom { 0% { margin-right: -72.02381vw; margin-top: 97.61905vw; opacity: 0; } 50% { margin-right: -42.2619vw; margin-top: 67.85714vw; opacity: 50%; } 100% { margin-right: -12.5vw; margin-top: 38.09524vw; opacity: 100%; } } @-webkit-keyframes upDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes upDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } /*animation Setting*/ @keyframes move { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } } @-webkit-keyframes move { 0% { -webkit-transform: translateY(0px); } 100% { -webkit-transform: translateY(-1000px); opacity: 0; } } /*animation Play*/ .move { animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; -webkit-animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; position: absolute; bottom: -10%; left: 50%; } /*animation Setting*/ @keyframes shake { 0% { -webkit-transform: translateX(10px); transform: translateX(10px); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @-webkit-keyframes shake { 0% { -webkit-transform: translateX(10px); } 50% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(10px); } } /*animation Play*/ .shake { animation: shake 2s ease 0s infinite normal; -webkit-animation: shake 2s ease 0s infinite normal; } /* Buzz Out */ @-webkit-keyframes buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } /* Buzz Out Fadein*/ @-webkit-keyframes buzz-out-fade-in { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); opacity: .1; -webkit-transform: scale(.6); transform: scale(.6); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); opacity: .2 } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); opacity: .3 } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); opacity: .4 } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); opacity: .5; -webkit-transform: scale(.8); transform: scale(.8); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); opacity: .6 } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); opacity: .7 } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); opacity: .8 } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); opacity: .9 } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes buzz-out-fade-in { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); opacity: .1; -webkit-transform: scale(.6); transform: scale(.6); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); opacity: .2 } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); opacity: .3 } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); opacity: .4 } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); opacity: .5; -webkit-transform: scale(.8); transform: scale(.8); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); opacity: .6 } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); opacity: .7 } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); opacity: .8 } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); opacity: .9 } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /* Pop */ @-webkit-keyframes pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } /* ---------------------------------- *\ #PAGE \* ---------------------------------- */ body { font-family: -apple-system-subset, Helvetica, Hiragino Kaku Gothic ProN, sans-serif; } a { color: #333; } a, button { -webkit-transition: 0.2s; transition: 0.2s; } .Page_wrapper { background-image: url(/umekaku/common/img/page_bg.png); background-repeat: repeat; position: relative; overflow: hidden; } /* tool */ /* UTIL */ .Util-displayHiddenVisually { position: absolute!important; overflow: hidden!important; clip: rect(1px, 1px, 1px, 1px)!important; padding: 0!important; width: 1px!important; height: 1px!important; border: 0!important; } .Util-textCenter { text-align: center; } .Util-marginB20 { margin-bottom: 20px; } .Icon { position: relative; } .Icon::before { position: absolute; top: 0; left: 0; background-image: url(../image/all.png); -webkit-background-size: 216px 191px; background-size: 216px 191px; background-repeat: no-repeat; content: ''; } .Icon--buttonAndroid { width: 170px; height: 51px; } .Icon--buttonAndroid::before { width: 170px; height: 51px; background-position: 0px 0px; } .Icon--buttonIos { width: 170px; height: 51px; } .Icon--buttonIos::before { width: 170px; height: 51px; background-position: 0px -53px; } .Icon--kurashi { width: 90px; height: 22px; } .Icon--kurashi::before { width: 90px; height: 22px; background-position: 0px -142px; } .Icon--scrollTop { width: 44px; height: 44px; } .Icon--scrollTop::before { width: 44px; height: 44px; background-position: -172px 0px; } .Icon--snsFb { width: 68px; height: 25px; } .Icon--snsFb::before { width: 68px; height: 25px; background-position: 0px -166px; } .Icon--snsLn { width: 68px; height: 25px; } .Icon--snsLn::before { width: 68px; height: 25px; background-position: -70px -166px; } .Icon--snsTw { width: 68px; height: 25px; } .Icon--snsTw::before { width: 68px; height: 25px; background-position: -140px -166px; } .Icon--yahooJapanLogo { width: 104px; height: 34px; } .Icon--yahooJapanLogo::before { width: 104px; height: 34px; background-position: 0px -106px; } /** * @mixin breakpoints */ /*animation Play*/ .shake-0 { -webkit-animation: shake 2s ease 0s infinite normal; animation: shake 2s ease 0s infinite normal; } .move-0 { -webkit-animation: move 5s ease 0s infinite normal; animation: move 5s ease 0s infinite normal; position: absolute; bottom: -20%; } .pos-0 { left: 0%; } .scale-0 { -webkit-transform: scale(0); transform: scale(0); } .shake-1 { -webkit-animation: shake 2.2s ease 0s infinite normal; animation: shake 2.2s ease 0s infinite normal; } .move-1 { -webkit-animation: move 5.2s ease 0.2s infinite normal; animation: move 5.2s ease 0.2s infinite normal; position: absolute; bottom: -20%; } .pos-1 { left: 2%; } .scale-1 { -webkit-transform: scale(0.1); transform: scale(0.1); } .shake-2 { -webkit-animation: shake 2.4s ease 0s infinite normal; animation: shake 2.4s ease 0s infinite normal; } .move-2 { -webkit-animation: move 5.4s ease 0.4s infinite normal; animation: move 5.4s ease 0.4s infinite normal; position: absolute; bottom: -20%; } .pos-2 { left: 4%; } .scale-2 { -webkit-transform: scale(0.2); transform: scale(0.2); } .shake-3 { -webkit-animation: shake 2.6s ease 0s infinite normal; animation: shake 2.6s ease 0s infinite normal; } .move-3 { -webkit-animation: move 5.6s ease 0.6s infinite normal; animation: move 5.6s ease 0.6s infinite normal; position: absolute; bottom: -20%; } .pos-3 { left: 6%; } .scale-3 { -webkit-transform: scale(0.3); transform: scale(0.3); } .shake-4 { -webkit-animation: shake 2.8s ease 0s infinite normal; animation: shake 2.8s ease 0s infinite normal; } .move-4 { -webkit-animation: move 5.8s ease 0.8s infinite normal; animation: move 5.8s ease 0.8s infinite normal; position: absolute; bottom: -20%; } .pos-4 { left: 8%; } .scale-4 { -webkit-transform: scale(0.4); transform: scale(0.4); } .shake-5 { -webkit-animation: shake 3s ease 0s infinite normal; animation: shake 3s ease 0s infinite normal; } .move-5 { -webkit-animation: move 6s ease 1s infinite normal; animation: move 6s ease 1s infinite normal; position: absolute; bottom: -20%; } .pos-5 { left: 10%; } .scale-5 { -webkit-transform: scale(0.5); transform: scale(0.5); } .shake-6 { -webkit-animation: shake 3.2s ease 0s infinite normal; animation: shake 3.2s ease 0s infinite normal; } .move-6 { -webkit-animation: move 6.2s ease 1.2s infinite normal; animation: move 6.2s ease 1.2s infinite normal; position: absolute; bottom: -20%; } .pos-6 { left: 12%; } .scale-6 { -webkit-transform: scale(0.6); transform: scale(0.6); } .shake-7 { -webkit-animation: shake 3.4s ease 0s infinite normal; animation: shake 3.4s ease 0s infinite normal; } .move-7 { -webkit-animation: move 6.4s ease 1.4s infinite normal; animation: move 6.4s ease 1.4s infinite normal; position: absolute; bottom: -20%; } .pos-7 { left: 14%; } .scale-7 { -webkit-transform: scale(0.7); transform: scale(0.7); } .shake-8 { -webkit-animation: shake 3.6s ease 0s infinite normal; animation: shake 3.6s ease 0s infinite normal; } .move-8 { -webkit-animation: move 6.6s ease 1.6s infinite normal; animation: move 6.6s ease 1.6s infinite normal; position: absolute; bottom: -20%; } .pos-8 { left: 16%; } .scale-8 { -webkit-transform: scale(0.8); transform: scale(0.8); } .shake-9 { -webkit-animation: shake 3.8s ease 0s infinite normal; animation: shake 3.8s ease 0s infinite normal; } .move-9 { -webkit-animation: move 6.8s ease 1.8s infinite normal; animation: move 6.8s ease 1.8s infinite normal; position: absolute; bottom: -20%; } .pos-9 { left: 18%; } .scale-9 { -webkit-transform: scale(0.9); transform: scale(0.9); } .shake-10 { -webkit-animation: shake 4s ease 0s infinite normal; animation: shake 4s ease 0s infinite normal; } .move-10 { -webkit-animation: move 7s ease 2s infinite normal; animation: move 7s ease 2s infinite normal; position: absolute; bottom: -20%; } .pos-10 { left: 20%; } .scale-10 { -webkit-transform: scale(1); transform: scale(1); } .shake-11 { -webkit-animation: shake 4.2s ease 0s infinite normal; animation: shake 4.2s ease 0s infinite normal; } .move-11 { -webkit-animation: move 7.2s ease 2.2s infinite normal; animation: move 7.2s ease 2.2s infinite normal; position: absolute; bottom: -20%; } .pos-11 { left: 22%; } .scale-11 { -webkit-transform: scale(1.1); transform: scale(1.1); } .shake-12 { -webkit-animation: shake 4.4s ease 0s infinite normal; animation: shake 4.4s ease 0s infinite normal; } .move-12 { -webkit-animation: move 7.4s ease 2.4s infinite normal; animation: move 7.4s ease 2.4s infinite normal; position: absolute; bottom: -20%; } .pos-12 { left: 24%; } .scale-12 { -webkit-transform: scale(1.2); transform: scale(1.2); } .shake-13 { -webkit-animation: shake 4.6s ease 0s infinite normal; animation: shake 4.6s ease 0s infinite normal; } .move-13 { -webkit-animation: move 7.6s ease 2.6s infinite normal; animation: move 7.6s ease 2.6s infinite normal; position: absolute; bottom: -20%; } .pos-13 { left: 26%; } .scale-13 { -webkit-transform: scale(1.3); transform: scale(1.3); } .shake-14 { -webkit-animation: shake 4.8s ease 0s infinite normal; animation: shake 4.8s ease 0s infinite normal; } .move-14 { -webkit-animation: move 7.8s ease 2.8s infinite normal; animation: move 7.8s ease 2.8s infinite normal; position: absolute; bottom: -20%; } .pos-14 { left: 28%; } .scale-14 { -webkit-transform: scale(1.4); transform: scale(1.4); } .shake-15 { -webkit-animation: shake 5s ease 0s infinite normal; animation: shake 5s ease 0s infinite normal; } .move-15 { -webkit-animation: move 8s ease 3s infinite normal; animation: move 8s ease 3s infinite normal; position: absolute; bottom: -20%; } .pos-15 { left: 30%; } .scale-15 { -webkit-transform: scale(1.5); transform: scale(1.5); } .shake-16 { -webkit-animation: shake 5.2s ease 0s infinite normal; animation: shake 5.2s ease 0s infinite normal; } .move-16 { -webkit-animation: move 8.2s ease 3.2s infinite normal; animation: move 8.2s ease 3.2s infinite normal; position: absolute; bottom: -20%; } .pos-16 { left: 32%; } .scale-16 { -webkit-transform: scale(1.6); transform: scale(1.6); } .shake-17 { -webkit-animation: shake 5.4s ease 0s infinite normal; animation: shake 5.4s ease 0s infinite normal; } .move-17 { -webkit-animation: move 8.4s ease 3.4s infinite normal; animation: move 8.4s ease 3.4s infinite normal; position: absolute; bottom: -20%; } .pos-17 { left: 34%; } .scale-17 { -webkit-transform: scale(1.7); transform: scale(1.7); } .shake-18 { -webkit-animation: shake 5.6s ease 0s infinite normal; animation: shake 5.6s ease 0s infinite normal; } .move-18 { -webkit-animation: move 8.6s ease 3.6s infinite normal; animation: move 8.6s ease 3.6s infinite normal; position: absolute; bottom: -20%; } .pos-18 { left: 36%; } .scale-18 { -webkit-transform: scale(1.8); transform: scale(1.8); } .shake-19 { -webkit-animation: shake 5.8s ease 0s infinite normal; animation: shake 5.8s ease 0s infinite normal; } .move-19 { -webkit-animation: move 8.8s ease 3.8s infinite normal; animation: move 8.8s ease 3.8s infinite normal; position: absolute; bottom: -20%; } .pos-19 { left: 38%; } .scale-19 { -webkit-transform: scale(1.9); transform: scale(1.9); } .shake-20 { -webkit-animation: shake 6s ease 0s infinite normal; animation: shake 6s ease 0s infinite normal; } .move-20 { -webkit-animation: move 9s ease 4s infinite normal; animation: move 9s ease 4s infinite normal; position: absolute; bottom: -20%; } .pos-20 { left: 40%; } .scale-20 { -webkit-transform: scale(2); transform: scale(2); } .shake-21 { -webkit-animation: shake 6.2s ease 0s infinite normal; animation: shake 6.2s ease 0s infinite normal; } .move-21 { -webkit-animation: move 9.2s ease 4.2s infinite normal; animation: move 9.2s ease 4.2s infinite normal; position: absolute; bottom: -20%; } .pos-21 { left: 42%; } .scale-21 { -webkit-transform: scale(2.1); transform: scale(2.1); } .shake-22 { -webkit-animation: shake 6.4s ease 0s infinite normal; animation: shake 6.4s ease 0s infinite normal; } .move-22 { -webkit-animation: move 9.4s ease 4.4s infinite normal; animation: move 9.4s ease 4.4s infinite normal; position: absolute; bottom: -20%; } .pos-22 { left: 44%; } .scale-22 { -webkit-transform: scale(2.2); transform: scale(2.2); } .shake-23 { -webkit-animation: shake 6.6s ease 0s infinite normal; animation: shake 6.6s ease 0s infinite normal; } .move-23 { -webkit-animation: move 9.6s ease 4.6s infinite normal; animation: move 9.6s ease 4.6s infinite normal; position: absolute; bottom: -20%; } .pos-23 { left: 46%; } .scale-23 { -webkit-transform: scale(2.3); transform: scale(2.3); } .shake-24 { -webkit-animation: shake 6.8s ease 0s infinite normal; animation: shake 6.8s ease 0s infinite normal; } .move-24 { -webkit-animation: move 9.8s ease 4.8s infinite normal; animation: move 9.8s ease 4.8s infinite normal; position: absolute; bottom: -20%; } .pos-24 { left: 48%; } .scale-24 { -webkit-transform: scale(2.4); transform: scale(2.4); } .shake-25 { -webkit-animation: shake 7s ease 0s infinite normal; animation: shake 7s ease 0s infinite normal; } .move-25 { -webkit-animation: move 10s ease 5s infinite normal; animation: move 10s ease 5s infinite normal; position: absolute; bottom: -20%; } .pos-25 { left: 50%; } .scale-25 { -webkit-transform: scale(2.5); transform: scale(2.5); } .shake-26 { -webkit-animation: shake 7.2s ease 0s infinite normal; animation: shake 7.2s ease 0s infinite normal; } .move-26 { -webkit-animation: move 10.2s ease 5.2s infinite normal; animation: move 10.2s ease 5.2s infinite normal; position: absolute; bottom: -20%; } .pos-26 { left: 52%; } .scale-26 { -webkit-transform: scale(2.6); transform: scale(2.6); } .shake-27 { -webkit-animation: shake 7.4s ease 0s infinite normal; animation: shake 7.4s ease 0s infinite normal; } .move-27 { -webkit-animation: move 10.4s ease 5.4s infinite normal; animation: move 10.4s ease 5.4s infinite normal; position: absolute; bottom: -20%; } .pos-27 { left: 54%; } .scale-27 { -webkit-transform: scale(2.7); transform: scale(2.7); } .shake-28 { -webkit-animation: shake 7.6s ease 0s infinite normal; animation: shake 7.6s ease 0s infinite normal; } .move-28 { -webkit-animation: move 10.6s ease 5.6s infinite normal; animation: move 10.6s ease 5.6s infinite normal; position: absolute; bottom: -20%; } .pos-28 { left: 56%; } .scale-28 { -webkit-transform: scale(2.8); transform: scale(2.8); } .shake-29 { -webkit-animation: shake 7.8s ease 0s infinite normal; animation: shake 7.8s ease 0s infinite normal; } .move-29 { -webkit-animation: move 10.8s ease 5.8s infinite normal; animation: move 10.8s ease 5.8s infinite normal; position: absolute; bottom: -20%; } .pos-29 { left: 58%; } .scale-29 { -webkit-transform: scale(2.9); transform: scale(2.9); } .shake-30 { -webkit-animation: shake 8s ease 0s infinite normal; animation: shake 8s ease 0s infinite normal; } .move-30 { -webkit-animation: move 11s ease 6s infinite normal; animation: move 11s ease 6s infinite normal; position: absolute; bottom: -20%; } .pos-30 { left: 60%; } .scale-30 { -webkit-transform: scale(3); transform: scale(3); } .shake-31 { -webkit-animation: shake 8.2s ease 0s infinite normal; animation: shake 8.2s ease 0s infinite normal; } .move-31 { -webkit-animation: move 11.2s ease 6.2s infinite normal; animation: move 11.2s ease 6.2s infinite normal; position: absolute; bottom: -20%; } .pos-31 { left: 62%; } .scale-31 { -webkit-transform: scale(3.1); transform: scale(3.1); } .shake-32 { -webkit-animation: shake 8.4s ease 0s infinite normal; animation: shake 8.4s ease 0s infinite normal; } .move-32 { -webkit-animation: move 11.4s ease 6.4s infinite normal; animation: move 11.4s ease 6.4s infinite normal; position: absolute; bottom: -20%; } .pos-32 { left: 64%; } .scale-32 { -webkit-transform: scale(3.2); transform: scale(3.2); } .shake-33 { -webkit-animation: shake 8.6s ease 0s infinite normal; animation: shake 8.6s ease 0s infinite normal; } .move-33 { -webkit-animation: move 11.6s ease 6.6s infinite normal; animation: move 11.6s ease 6.6s infinite normal; position: absolute; bottom: -20%; } .pos-33 { left: 66%; } .scale-33 { -webkit-transform: scale(3.3); transform: scale(3.3); } .shake-34 { -webkit-animation: shake 8.8s ease 0s infinite normal; animation: shake 8.8s ease 0s infinite normal; } .move-34 { -webkit-animation: move 11.8s ease 6.8s infinite normal; animation: move 11.8s ease 6.8s infinite normal; position: absolute; bottom: -20%; } .pos-34 { left: 68%; } .scale-34 { -webkit-transform: scale(3.4); transform: scale(3.4); } .shake-35 { -webkit-animation: shake 9s ease 0s infinite normal; animation: shake 9s ease 0s infinite normal; } .move-35 { -webkit-animation: move 12s ease 7s infinite normal; animation: move 12s ease 7s infinite normal; position: absolute; bottom: -20%; } .pos-35 { left: 70%; } .scale-35 { -webkit-transform: scale(3.5); transform: scale(3.5); } .shake-36 { -webkit-animation: shake 9.2s ease 0s infinite normal; animation: shake 9.2s ease 0s infinite normal; } .move-36 { -webkit-animation: move 12.2s ease 7.2s infinite normal; animation: move 12.2s ease 7.2s infinite normal; position: absolute; bottom: -20%; } .pos-36 { left: 72%; } .scale-36 { -webkit-transform: scale(3.6); transform: scale(3.6); } .shake-37 { -webkit-animation: shake 9.4s ease 0s infinite normal; animation: shake 9.4s ease 0s infinite normal; } .move-37 { -webkit-animation: move 12.4s ease 7.4s infinite normal; animation: move 12.4s ease 7.4s infinite normal; position: absolute; bottom: -20%; } .pos-37 { left: 74%; } .scale-37 { -webkit-transform: scale(3.7); transform: scale(3.7); } .shake-38 { -webkit-animation: shake 9.6s ease 0s infinite normal; animation: shake 9.6s ease 0s infinite normal; } .move-38 { -webkit-animation: move 12.6s ease 7.6s infinite normal; animation: move 12.6s ease 7.6s infinite normal; position: absolute; bottom: -20%; } .pos-38 { left: 76%; } .scale-38 { -webkit-transform: scale(3.8); transform: scale(3.8); } .shake-39 { -webkit-animation: shake 9.8s ease 0s infinite normal; animation: shake 9.8s ease 0s infinite normal; } .move-39 { -webkit-animation: move 12.8s ease 7.8s infinite normal; animation: move 12.8s ease 7.8s infinite normal; position: absolute; bottom: -20%; } .pos-39 { left: 78%; } .scale-39 { -webkit-transform: scale(3.9); transform: scale(3.9); } .shake-40 { -webkit-animation: shake 10s ease 0s infinite normal; animation: shake 10s ease 0s infinite normal; } .move-40 { -webkit-animation: move 13s ease 8s infinite normal; animation: move 13s ease 8s infinite normal; position: absolute; bottom: -20%; } .pos-40 { left: 80%; } .scale-40 { -webkit-transform: scale(4); transform: scale(4); } .shake-41 { -webkit-animation: shake 10.2s ease 0s infinite normal; animation: shake 10.2s ease 0s infinite normal; } .move-41 { -webkit-animation: move 13.2s ease 8.2s infinite normal; animation: move 13.2s ease 8.2s infinite normal; position: absolute; bottom: -20%; } .pos-41 { left: 82%; } .scale-41 { -webkit-transform: scale(4.1); transform: scale(4.1); } .shake-42 { -webkit-animation: shake 10.4s ease 0s infinite normal; animation: shake 10.4s ease 0s infinite normal; } .move-42 { -webkit-animation: move 13.4s ease 8.4s infinite normal; animation: move 13.4s ease 8.4s infinite normal; position: absolute; bottom: -20%; } .pos-42 { left: 84%; } .scale-42 { -webkit-transform: scale(4.2); transform: scale(4.2); } .shake-43 { -webkit-animation: shake 10.6s ease 0s infinite normal; animation: shake 10.6s ease 0s infinite normal; } .move-43 { -webkit-animation: move 13.6s ease 8.6s infinite normal; animation: move 13.6s ease 8.6s infinite normal; position: absolute; bottom: -20%; } .pos-43 { left: 86%; } .scale-43 { -webkit-transform: scale(4.3); transform: scale(4.3); } .shake-44 { -webkit-animation: shake 10.8s ease 0s infinite normal; animation: shake 10.8s ease 0s infinite normal; } .move-44 { -webkit-animation: move 13.8s ease 8.8s infinite normal; animation: move 13.8s ease 8.8s infinite normal; position: absolute; bottom: -20%; } .pos-44 { left: 88%; } .scale-44 { -webkit-transform: scale(4.4); transform: scale(4.4); } .shake-45 { -webkit-animation: shake 11s ease 0s infinite normal; animation: shake 11s ease 0s infinite normal; } .move-45 { -webkit-animation: move 14s ease 9s infinite normal; animation: move 14s ease 9s infinite normal; position: absolute; bottom: -20%; } .pos-45 { left: 90%; } .scale-45 { -webkit-transform: scale(4.5); transform: scale(4.5); } .shake-46 { -webkit-animation: shake 11.2s ease 0s infinite normal; animation: shake 11.2s ease 0s infinite normal; } .move-46 { -webkit-animation: move 14.2s ease 9.2s infinite normal; animation: move 14.2s ease 9.2s infinite normal; position: absolute; bottom: -20%; } .pos-46 { left: 92%; } .scale-46 { -webkit-transform: scale(4.6); transform: scale(4.6); } .shake-47 { -webkit-animation: shake 11.4s ease 0s infinite normal; animation: shake 11.4s ease 0s infinite normal; } .move-47 { -webkit-animation: move 14.4s ease 9.4s infinite normal; animation: move 14.4s ease 9.4s infinite normal; position: absolute; bottom: -20%; } .pos-47 { left: 94%; } .scale-47 { -webkit-transform: scale(4.7); transform: scale(4.7); } .shake-48 { -webkit-animation: shake 11.6s ease 0s infinite normal; animation: shake 11.6s ease 0s infinite normal; } .move-48 { -webkit-animation: move 14.6s ease 9.6s infinite normal; animation: move 14.6s ease 9.6s infinite normal; position: absolute; bottom: -20%; } .pos-48 { left: 96%; } .scale-48 { -webkit-transform: scale(4.8); transform: scale(4.8); } .shake-49 { -webkit-animation: shake 11.8s ease 0s infinite normal; animation: shake 11.8s ease 0s infinite normal; } .move-49 { -webkit-animation: move 14.8s ease 9.8s infinite normal; animation: move 14.8s ease 9.8s infinite normal; position: absolute; bottom: -20%; } .pos-49 { left: 98%; } .scale-49 { -webkit-transform: scale(4.9); transform: scale(4.9); } .shake-50 { -webkit-animation: shake 12s ease 0s infinite normal; animation: shake 12s ease 0s infinite normal; } .move-50 { -webkit-animation: move 15s ease 10s infinite normal; animation: move 15s ease 10s infinite normal; position: absolute; bottom: -20%; } .pos-50 { left: 100%; } .scale-50 { -webkit-transform: scale(5); transform: scale(5); } /** * Swiper 6.4.8 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2021 Vladimir Kharlampidi * * Released under the MIT License * * Released on: January 22, 2021 */ @font-face { font-family: 'swiper-icons'; src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff'); font-weight: 400; font-style: normal; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; padding-top: 4.16667vw; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -webkit-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-container-pointer-events { touch-action: pan-y; } .swiper-container-pointer-events.swiper-container-vertical { touch-action: pan-x; } .swiper-slide { -webkit-flex-shrink: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform; } /* 3D Effects */ .swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { -webkit-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { -webkit-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } :root { /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 30%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; color: #ec7fab; outline: none; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: 44px; text-transform: none !important; letter-spacing: 0; text-transform: none; -webkit-font-feature-settings: ; font-feature-settings: ; font-variant: normal; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 19%; right: auto; background-image: url(/umekaku/common/img/arrow_left.svg); -webkit-background-size: cover; background-size: cover; width: 50px; height: 50px; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; display: none; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 19%; left: auto; background-image: url(/umekaku/common/img/arrow_right.svg); -webkit-background-size: cover; background-size: cover; width: 50px; height: 50px; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; display: none; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #ffffff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); */ } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms opacity; transition: 300ms opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; bottom: -11.30952vw; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: -10.11905vw; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(0.33); transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullet { width: 15px; height: 15px; display: inline-block; border-radius: 50%; background: #fff; opacity: .8 } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: #EC7FAB; } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: 200ms top, 200ms -webkit-transform; transition: 200ms top, 200ms -webkit-transform; transition: 200ms transform, 200ms top; transition: 200ms transform, 200ms top, 200ms -webkit-transform; } .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 10px; outline: none; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms left, 200ms -webkit-transform; transition: 200ms left, 200ms -webkit-transform; transition: 200ms transform, 200ms left; transition: 200ms transform, 200ms left, 200ms -webkit-transform; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms right, 200ms -webkit-transform; transition: 200ms right, 200ms -webkit-transform; transition: 200ms transform, 200ms right; transition: 200ms transform, 200ms right, 200ms -webkit-transform; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, .25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, .1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, .5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ :root { /* --swiper-preloader-color: var(--swiper-theme-color); */ } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s infinite linear; animation: swiper-preloader-spin 1s infinite linear; -webkit-box-sizing: border-box; box-sizing: border-box; border: 4px solid #007aff; border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-container-cube .swiper-cube-shadow:before { content: ''; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; -webkit-filter: blur(50px); filter: url('data:image/svg+xml;charset=utf-8,#filter'); filter: blur(50px); } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media screen and (max-width: 767px) { .swiper-pagination-bullet { width: 11px; height: 11px; } .swiper-pagination-bullets { bottom: -100px; } .swiper-wrapper { padding-top: 0; } .swiper-button-prev { left: 11%; top: 28% } .swiper-button-next { right: 11%; top: 28% } } /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; overflow: scroll; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 85px; height: 85px; text-indent: 100%; overflow: hidden; white-space: normal; position: absolute; right: 0; top: 0; background-image: url(/umekaku/common/img/modal/recipe_close.svg); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; } @media screen and (max-width: 767px) { .mfp-close { width: 65px; height: 65px; } } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6); box-shadow: 0 0 8px rgba(0, 0, 0, .6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6); box-shadow: 0 0 8px rgba(0, 0, 0, .6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, .6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, .6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } /* component */ .Button { } .FlexBox { display: -webkit-box; display: -webkit-flex; display: flex; width: 100%; } .FlexBox--center { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .FlexBox--left { -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .FlexBox--right { -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .FlexBox--justify { -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .FlexBox--middle { -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .FlexBox--reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .FlexBox--column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; } .FlexBox__item { display: block; } .FlexBox__item--fill { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } /* ui */ .Navi { background-color: white; border-bottom: 1px solid #C19B41; border-top: 1px solid #C19B41; padding: 0 20px; width: 100%; z-index: 10; } .Navi.fixed { position: fixed; top: 0; } .Navi_list { max-width: 930px; height: 55px; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .Navi_item { height: 100%; } .Navi_item h1 { height: 100%; } .Navi_link { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; height: 100%; -webkit-transition: all .2s; transition: all .2s; } .Navi_link:hover { -webkit-transform: scale(1.05); transform: scale(1.05) } .Navi_sp { display: none; } .Navi_sp_contents { height: 48px; } .Navi_sp_contents h1 { height: 100%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .Navi_sp_menu { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; padding-top: 40px; } .Navi_sp_listItem { text-align: center; } .Navi_sp_listItem + .Navi_sp_listItem { margin-top: 30px } .Navi_sp_link { color: white!important; display: block; } .Navi #nav-drawer { position: relative; } .Navi .nav-unshown { display: none; } .Navi #nav-open, .Navi #nav-close { display: inline-block; width: 30px; height: 26px; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-10px); transform: translateY(-10px); } .Navi #nav-close { -webkit-transform: translateY(-2px); transform: translateY(-2px); display: none; } .Navi #nav-open span, .Navi #nav-open span:before, .Navi #nav-open span:after { position: absolute; height: 3px; width: 30px; border-radius: 3px; background: #C19B41; display: block; content: ""; cursor: pointer; } .Navi #nav-open span:before { bottom: -8px; } .Navi #nav-open span:after { bottom: -16px; } .Navi #nav-close span:before, .Navi #nav-close span:after { position: absolute; height: 3px; width: 30px; border-radius: 3px; background: #C19B41; display: block; content: ""; cursor: pointer; } .Navi #nav-close span:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .Navi #nav-close span:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .Navi #nav-content { overflow: auto; position: fixed; top: 105px; left: 0; z-index: 9999; width: 100%; height: 100%; background: col-text-green; color: white; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; -webkit-transform: translateX(-105%); transform: translateX(-105%); padding-bottom: 40px; background-image:url(/umekaku/common/img/header/sp_menu_bg.jpg); background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; background-color: #FFD6D6; background-blend-mode: multiply; } .Navi #nav-input:checked ~ #nav-close { display: block; opacity: 0.5; } .Navi #nav-input:checked ~ #nav-open { display: none; } .Navi #nav-input:checked ~ #nav-content { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-box-shadow: 6px 0 25px rgba(0, 0, 0, .15); box-shadow: 6px 0 25px rgba(0, 0, 0, .15); } @media screen and (max-width: 767px) { .Navi.fixed { position: fixed; top: 0; } .Navi.fixed #nav-content { top: 50px } .Navi_list { display: none; } .Navi_sp { display: block; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; position: relative; } .Navi_sp_link img { height: 18px; display: block; margin: 0 auto; } .Navi_sp_banner img { height: 110px; width: 290px; margin: 0 auto; } .Navi #nav-open { padding-left: 0!important; } .Navi #nav-open:before { display: none; } } .Main { position: relative; padding-bottom: 14.88vw; overflow:hidden; } .Main.fixed { margin-top: 60px; } .Main_contents { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .Main_image { text-indent: 100%; white-space: nowrap; overflow: hidden; width: 48.9881vw; height: 47.79762vw; background-image: url(/umekaku/common/img/main_img.png); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; margin-top: 40px; } .Main_title { text-indent: 100%; white-space: nowrap; overflow: hidden; } .Main_text { background-image: url(/umekaku/common/img/main_txt.png); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; width: 35.47619vw; height: 36.90476vw; text-indent: -99999px; margin-top: 3.57143vw; margin-right: -2.38vw; } .Main span { position: absolute; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; } .Main_bg-1 { background-image: url(/umekaku/common/img/main_top_left_bg.png); width: 24.34524vw; height: 22.79762vw; margin-top: -2.97619vw; left: 0; top: 0; } .Main_bg-2 { background-image: url(/umekaku/common/img/main_top_right_bg.png); width: 16.13095vw; height: 19.52381vw; margin-top: -10.71429vw; right: 0; top: 0; } .Main_bg-3 { background-image: url(/umekaku/common/img/main_bottom_left_bg.png); width: 31.13095vw; height: 52.5vw; left: 0; bottom: 0; } .Main_bg-4 { background-image: url(/umekaku/common/img/main_bottom_right_bg.png); width: 30.65476vw; height: 49.16667vw; right: 0; bottom: 25vw; } .Main_obj-1 { background-image: url(/umekaku/common/img/main_fl_obj1.png); width: 8.33333vw; height: 8.33333vw; margin-left: -16.66667vw; margin-bottom: 1.19048vw; left: 50%; bottom: 0; -webkit-animation: upDown 1.5s 0s infinite alternate; animation: upDown 1.5s 0s infinite alternate; } .Main_obj-2 { background-image: url(/umekaku/common/img/main_fl_obj2.png); width: 7.7381vw; height: 5.35714vw; margin-right: 30.35714vw; margin-bottom: 7.14286vw; right: 0; bottom: 0; -webkit-animation: upDown 1.8s 0s infinite alternate; animation: upDown 1.8s 0s infinite alternate; } .Main_obj-3 { background-image: url(/umekaku/common/img/main_fl_obj3.png); width: 4.7619vw; height: 4.7619vw; margin-right: 14.10714vw; margin-bottom: 13.69048vw; right: 0; bottom: 0; -webkit-animation: upDown 2.8s 0s infinite alternate; animation: upDown 2.8s 0s infinite alternate; } .Main_obj-4 { background-image: url(/umekaku/common/img/main_fl_obj5.png); width: 3.92857vw; height: 3.92857vw; margin-right: 25.59524vw; margin-bottom: 18.45238vw; right: 0; bottom: 0; -webkit-animation: upDown 1.2s 0s infinite alternate; animation: upDown 1.2s 0s infinite alternate; } .Main_obj-5 { background-image: url(/umekaku/common/img/main_fl_obj4.png); width: 4.88095vw; height: 5.2381vw; margin-right: 3.57143vw; margin-top: 26.78571vw; right: 0; top: 0; -webkit-animation: upDown 2.2s 0s infinite alternate; animation: upDown 2.2s 0s infinite alternate; } .Main_obj-6 { background-image: url(/umekaku/common/img/main_fl_obj5.png); width: 4.16667vw; height: 4.16667vw; margin-right: 20.2381vw; margin-top: 33.33333vw; right: 0; top: 0; -webkit-animation: upDown 2s 0s infinite alternate; animation: upDown 2s 0s infinite alternate; } .Main_obj-7 { background-image: url(/umekaku/common/img/main_fl_obj5.png); width: 4.16667vw; height: 4.16667vw; margin-right: 10.11905vw; margin-top: 9.52381vw; right: 0; top: 0; -webkit-animation: upDown 1.6s 0s infinite alternate; animation: upDown 1.6s 0s infinite alternate; } .Main_obj-8 { background-image: url(/umekaku/common/img/main_fl_obj6.png); width: 5.95238vw; height: 5.95238vw; margin-left: 25vw; margin-top: 50vw; left: 0; top: 0; -webkit-animation: upDown 1.9s 0s infinite alternate; animation: upDown 1.9s 0s infinite alternate; } .Main_obj-9 { background-image: url(/umekaku/common/img/main_fl_obj7.png); width: 5.95238vw; height: 5.95238vw; margin-left: 4.7619vw; margin-top: 22.61905vw; left: 0; top: 0; -webkit-animation: upDown 1.6s 0s infinite alternate; animation: upDown 1.6s 0s infinite alternate; } .Main_obj-10 { background-image: url(/umekaku/common/img/main_fl_obj8.png); width: 3.57143vw; height: 3.57143vw; margin-left: 8.92857vw; margin-top: 41.66667vw; left: 0; top: 0; -webkit-animation: upDown 1.4s 0s infinite alternate; animation: upDown 1.4s 0s infinite alternate; } .Main_pour { opacity: 0; } .Main_pour-l1 { background-image: url(/umekaku/common/img/main_pour_l1.png); width: 28.63095vw; height: 27.55952vw; margin-left: -8.33333vw; margin-top: -1.19048vw; left: 0; top: 0; -webkit-animation: leftTop 1.5s 1s 1 forwards; animation: leftTop 1.5s 1s 1 forwards; } .Main_pour-l2 { background-image: url(/umekaku/common/img/main_pour_l2.png); width: 30.95238vw; height: 28.03571vw; margin-left: -4.16667vw; margin-top: 22.02381vw; left: 0; top: 0; -webkit-animation: leftMid 1.2s 1s 1 forwards; animation: leftMid 1.2s 1s 1 forwards; } .Main_pour-l3 { background-image: url(/umekaku/common/img/main_pour_l3.png); width: 33.27381vw; height: 41.30952vw; margin-left: -7.14286vw; margin-top: 45.83333vw; left: 0; top: 0; -webkit-animation: leftBottom 1.9s 1s 1 forwards; animation: leftBottom 1.9s 1s 1 forwards; } .Main_pour-r1 { background-image: url(/umekaku/common/img/main_pour_r1.png); width: 27.85714vw; height: 16.84524vw; margin-right: -1.19048vw; margin-top: -4.7619vw; right: 0; top: 0; -webkit-animation: rightTop 1.5s 1s 1 forwards; animation: rightTop 1.5s 1s 1 forwards; } .Main_pour-r2 { background-image: url(/umekaku/common/img/main_pour_r2.png); width: 26.4881vw; height: 17.55952vw; margin-right: -2.97619vw; margin-top: 13.69048vw; right: 0; top: 0; -webkit-animation: rightMid 1.2s 1s 1 forwards; animation: rightMid 1.2s 1s 1 forwards; } .Main_pour-r3 { background-image: url(/umekaku/common/img/main_pour_r3.png); width: 35.65476vw; height: 36.19048vw; margin-right: -12.5vw; margin-top: 38.09524vw; right: 0; top: 0; -webkit-animation: rightBottom 1.5s 1s 1 forwards; animation: rightBottom 1.5s 1s 1 forwards; } @media screen and (max-width: 767px) { .Main { padding-bottom: 20vw; } .Main.fixed { margin-top: 48px; } .Main_image { width: 100%; height: 358px; background-position: center; margin-top: 60px; } .Main_lead { margin-top: 60px; } .Main_text { background-image: url(/umekaku/common/img/main_txt_sp.svg); width: 330px; height: 640px; } .Main_bg-1 { left: -30px; top: -30px; } .Main_bg-3 { bottom: 440px; } .Main_bg-4 { background-image: url(/umekaku/common/img/main_bottom_right_bg_sp.png); width: 111px; height: 350px; bottom: 440px; right: -4px; } .Main_obj-1 { width: 60px; height: 60px; margin-left: 0; left: 15%; bottom: -14px; } .Main_obj-2 { width: 60px; height: 60px; margin-right: 0; margin-bottom: 0; right: 24%; bottom: -20px; } .Main_obj-3 { margin-right: 40px; margin-bottom: 20px; } .Main_obj-4 { width: 40px; height: 40px; margin-right: 0; left: 34%; top: 440px; } .Main_obj-5, .Main_obj-6, .Main_obj-10 { display: none; } .Main_obj-7 { width: 40px; height: 40px; margin-right: 10px; margin-top: 60px; } .Main_obj-8 { width: 50px; height: 50px; margin-left: 65%; margin-top: 700px; } .Main_obj-9 { width: 50px; height: 50px; margin-left: 60px; margin-top: 20px; } .Main_pour-l1 { left: -45px; top: -20px; -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transform-origin: center; transform-origin: center; } .Main_pour-l2 { top: 320px; left: 0; -webkit-transform: scale(1.4); transform: scale(1.4); -webkit-transform-origin: center; transform-origin: center; } .Main_pour-l3 { top: 340px; left: -10px; -webkit-transform: scale(1.4); transform: scale(1.4); -webkit-transform-origin: center; transform-origin: center; } .Main_pour-r1 { -webkit-transform: scale(1.8); transform: scale(1.8); -webkit-transform-origin: center; transform-origin: center; } .Main_pour-r2 { display: none; } .Main_pour-r3 { -webkit-transform: scale(1.8); transform: scale(1.8); -webkit-transform-origin: center; transform-origin: center; margin-top: 0; top: 280px; right: 6px; background-image: url(/umekaku/common/img/main_pour_r3_sp.png); } } .Campaign { position: relative; padding-top: 64px; } .Campaign:before, .Campaign:after { display: block; content: ""; position: absolute; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; } .Campaign:before { background-image: url(/umekaku/common/img/campaign_bg_l1.png); width: 25vw; height: 24.34524vw; margin-left: 5.95238vw; margin-bottom: -5.95238vw; bottom: 0; left: 0; } .Campaign:after { background-image: url(/umekaku/common/img/campaign_bg_r1.png); width: 35.53571vw; height: 34.64286vw; margin-right: 1.19048vw; margin-top: 0vw; top: 0; right: 0; } .Campaign_wrapper { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; z-index: 1; } .Campaign_wrapper a { overflow: hidden; display: block; } .Campaign_wrapper a img { -webkit-transition: all .3s; transition: all .3s; } .Campaign_wrapper a:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transform-origin: center; transform-origin: center; } .Campaign_title { margin-bottom: 60px } .Campaign .pc { display: block; } .Campaign .sp { display: none; } @media screen and (max-width: 767px) { .Campaign { padding-bottom: 100px; margin-top: 40px; } .Campaign:before { width: 210px; height: 200px; left: -140px; } .Campaign:after { width: 250px; height: 240px; margin-right: -140px; } .Campaign_title { margin-bottom: 40px; } .Campaign_title img { height: 38px; } .Campaign .pc { display: none; } .Campaign .sp { display: block; } } .Lineup { position: relative; padding-top: 64px; margin-top: 3.52381vw; padding-bottom: 22.02381vw; overflow: hidden; } .Lineup:after { background-image: url(../../.././umekaku/common/img/page_bg_bottom.png); -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; display: block; content: ""; position: absolute; width: 40.89286vw; height: 39.88095vw; margin-left: -22.02381vw; margin-bottom: -26.19048vw; bottom: 0; left: 0; } .Lineup:before { display: block; content: ""; position: absolute; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; background-image: url(/umekaku/common/img/lineup_fl_obj_l1.png); width: 16.4881vw; height: 11.30952vw; margin-left: 20.2381vw; margin-bottom: 8.92857vw; bottom: 0; left: 0; -webkit-animation: upDown 1.6s 0s infinite alternate; animation: upDown 1.6s 0s infinite alternate; } .Lineup_contents { position: relative; } .Lineup_contents:after { display: block; content: ""; position: absolute; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; } .Lineup_contents:after { background-image: url(/umekaku/common/img/lineup_fl_obj_r1.png); width: 12.79762vw; height: 15vw; margin-right: 15.47619vw; margin-top: 7.14286vw; top: 0; right: 0; -webkit-animation: upDown 1.8s 0s infinite alternate; animation: upDown 1.8s 0s infinite alternate; } .Lineup_wrapper { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; max-width: 1180px; margin: 0 auto; padding: 0 20px; z-index: 1; } .Lineup_title { margin-bottom: 60px } .Lineup_items{ display: -webkit-box; display: -webkit-flex; display: flex; position: relative; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; width: 100%; top: 0vw; } .Lineup_text { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .Lineup_button { width: 11.90476vw; height: 2.38095vw; display: block; -webkit-transition: all .2s; transition: all .2s; } .Lineup_item { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; position: relative; z-index: 20; margin-top: -3.57143vw; } .Lineup_item:before { content: ""; display: block; position: absolute; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; } .Lineup_item_image { width: 15.17857vw; height: 43.09524vw; } .Lineup_item_image img { max-height: 740px; } .Lineup_item_description { -webkit-transform: scale(1.05); transform: scale(1.05); margin-bottom: 2.02381vw; } .Lineup_item-left .Lineup_item_description { width: 16.60714vw; height: 7.5vw; margin-top: -8.33333vw; } .Lineup_item-right .Lineup_item_description { width: 11.84524vw; height: 7.38095vw; margin-top: 0vw; } .Lineup_item-left { z-index: 10; margin-right: 2.38095vw; margin-left: -8.33333vw; } .Lineup_item-left:before { background-image: url(/umekaku/common/img/lineup_bg_l1.png); width: 40.89286vw; height: 39.88095vw; margin-top: -2.38095vw; margin-left: -2.38095vw; top: 0; left: 0; z-index: -1; } .Lineup_item-right { top: 14.28571vw; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; padding-right: 2.38095vw; z-index: 0; } .Lineup_item-right:before { background-image: url(/umekaku/common/img/lineup_bg_r1.png); width: 40.89286vw; height: 39.88095vw; margin-top: 2.38095vw; margin-right: -3.57143vw; top: 0; right: 0; z-index: -1; } .Lineup_items-sp { display: none; } @media screen and (max-width: 767px) { .Lineup:after { display: none; } .Lineup_contents:after { width: 27.14286vw; height: 37.71429vw; margin-right: 0; margin-top: 0; top: auto; left: 0; bottom: 131.42857vw; margin-left: 5.71429vw; } .Lineup_title img { height: 38px; } .Lineup_items { display: none; } .Lineup_button { position: absolute; left: 50%; bottom: 74px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 175px; height: 35px; } .Lineup_button:hover { -webkit-transform: translateX(-50%); transform: translateX(-50%); } .Lineup:before { width: 44.85714vw; height: 20vw; margin-left: 0; margin-bottom: 0; margin-top: 28.57143vw; margin-right: -14.28571vw; bottom: 0; left: auto; right: 0; top: 0; } .Lineup_image { position: relative; } .Lineup_image + .Lineup_image { margin-top: 20px; } .Lineup_items-sp { display: block; } } #diagnosis { padding-top: 56px; margin-top: -56px; } @media screen and (max-width: 767px) { #diagnosis { margin-top: -50px; padding-top: 50px; } } .Diagnosis { background-image: url(/umekaku/common/img/dgs_bg.png); -webkit-background-size: cover; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; width: 100%; height: 42.88889vw; overflow: hidden; } .Diagnosis:before { content: ''; display: block; height: 0; position: absolute; padding-top: 42.85714% } .Diagnosis .button:hover { -webkit-animation-name: buzz-out; animation-name: buzz-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; } .Diagnosis_frame iframe { width: 100%; } .Diagnosis.is-started:before { content: ''; display: block; position: absolute; right: 0; top: 0; background-image: url(/umekaku/common/img/dgs_title.svg); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-position: right center; width: 12.61905vw; height: 41.66667vw; z-index: 10; } .Diagnosis:after { content: ''; display: block; position: absolute; width: 70.65476vw; height: 42.97619vw; background-image: url(/umekaku/common/img/dgs_container.png); background-position: center; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; z-index: 1; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .Diagnosis_title { width: 31.78571vw; height: 16.30952vw; text-align: center; } .Diagnosis .item { position: relative; width: 68.86905vw; height: 41.66667vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; z-index: 2; margin: 0 auto; } .Diagnosis .start { height: 100%; width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; position: relative; } .Diagnosis .start .button { width: 25.41667vw; height: 4.70238vw; margin-top: 0.95238vw; } .Diagnosis .start .text { width: 23.27381vw; height: 3.21429vw; margin-top: 1.78571vw; text-align: center; } .Diagnosis .start:before { position: absolute; display: block; content: ""; background-image: url(/umekaku/common/img/dgs_start_obj.png); background-position: center; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .Diagnosis_dummy { display: none; } @media screen and (max-width: 767px) { .Diagnosis { height: auto; } .Diagnosis_frame iframe { width: 100%; } .Diagnosis:after { background-image: url(/umekaku/common/img/dgs_container_sp.png); width: 100%; height: 100%; } .Diagnosis .start:before { background-image: url(/umekaku/common/img/dgs_start_obj_sp.png); width: 108.57143vw; height: 130.28571vw; -webkit-background-size: contain; background-size: contain; top: 6.85714vw; left: -8.57143vw; } .Diagnosis .start .button { width: 78.57143vw; height: 14.57143vw; } .Diagnosis .start .text { width: 66vw; height: 8.57143vw; margin-top: 5.71429vw; } .Diagnosis .item { width: 85.71429vw; height: 142.85714vw; } .Diagnosis_title { width: 74.28571vw; height: 41.42857vw; margin-top: -1.19048vw; } .Diagnosis.is-started:before { display: none; } } .Question { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; position: relative; display: none; } .Question_container { position: relative; } .Question_wrapper { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .Question_contents { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .Question_contents + .Question_contents { margin-left: 2.38095vw; } .Question_contents_link { display: block; margin-top: auto; width: 23.03571vw; height: 7.32143vw; } .Question:after { content: ""; display: block; position: absolute; } .Question:after { left: 0; top: 0; -webkit-background-size: cover; background-size: cover; margin-top: 1.19048vw; margin-left: 2.38095vw; } .Question .title { opacity: 0; } .Question .title.is-show { opacity: 1; -webkit-transition: opacity .6s .4s linear; transition: opacity .6s .4s linear; } .Question .button.is-show { -webkit-animation-name: buzz-out-fade-in; animation-name: buzz-out-fade-in; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } .Question .button:hover { -webkit-transform: scale(.95); transform: scale(.95); opacity: .9; } .Question.q1:after { background-image: url(/umekaku/common/img/dgs_number1.svg); width: 11.0119vw; height: 11.84524vw; } .Question.q2:after { background-image: url(/umekaku/common/img/dgs_number2.svg); width: 13.15476vw; height: 11.84524vw; } .Question.q3:after { background-image: url(/umekaku/common/img/dgs_number3.svg); width: 12.97619vw; height: 11.84524vw; } .Question .q1_title { margin-bottom: 2.5vw; width: 17.61905vw; height: 2.67857vw; } .Question .q1_buttons { z-index: 2; } .Question .q1_buttons .button { display: block; margin-bottom: 1.19048vw; width: 45.35714vw; height: 5vw; } .Question .q1_text { margin-top: 1.19048vw; width: 41.60714vw; height: 2.67857vw; } .Question.q2 .title { margin-top: -4.7619vw; margin-bottom: 3.57143vw; } .Question.q2-a .title { width: 15.47619vw; height: 3.33333vw; } .Question.q2-a .image-l { width: 17.08333vw; height: 7.20238vw; margin-top: 1.19048vw; } .Question.q2-a .image-r { width: 17.32143vw; height: 9.22619vw; margin-bottom: 0.59524vw; } .Question.q2-b .title { width: 27.91667vw; height: 3.33333vw; } .Question.q2-b .image-l { width: 8.63095vw; height: 8.63095vw; margin-bottom: 0.59524vw; } .Question.q2-b .image-r { width: 11.66667vw; height: 7.7381vw; margin-top: 0.59524vw; } .Question.q2-c .title { width: 29.46429vw; height: 3.33333vw; } .Question.q2-c .image-l { width: 13.92857vw; height: 8.21429vw; margin-top: 1.78571vw; } .Question.q2-c .image-r { width: 12.97619vw; height: 11.36905vw; } .Question.q3 .title { width: 21.66667vw; height: 3.33333vw; margin-top: -3.57143vw; margin-bottom: 3.57143vw; } .Question.q3-a .image-l { width: 17.08333vw; height: 13.27381vw; z-index: 2; } .Question.q3-a .image-l img { margin-left: -1.19048vw; } .Question.q3-a .image-r { width: 11.66667vw; height: 13.27381vw; } .Question.q3-a .image-r img { margin-top: 1.78571vw; } .Question.q3-a .Question_contents_link { margin-top: -1.78571vw; } .Question.q3-b .image-l { width: 13.57143vw; height: 9.64286vw; } .Question.q3-b .image-r { width: 10.59524vw; height: 10.11905vw; margin-bottom: 0.59524vw; } .Question.q3-c .image-l { z-index: 2; width: 15.11905vw; height: 13.92857vw; } .Question.q3-c .image-r { width: 20.05952vw; height: 13.92857vw; } .Question.q3-c .image-r img { margin-top: 2.2619vw; } .Question.q3-c .Question_contents { margin-top: -2.38095vw; } .Question.q3-c .Question_contents_link { margin-top: -0.89286vw; } .Question.q3-d .image-l { z-index: 2; width: 10vw; height: 15.29762vw; } .Question.q3-d .image-l img { margin-top: 4.16667vw; } .Question.q3-d .image-r { z-index: 2; width: 11.84524vw; height: 15.29762vw; } .Question.q3-d .Question_contents { margin-top: -4.7619vw; } .Question.q3-d .Question_contents_link { margin-top: -0.59524vw; } .Question.q3-e .image-l { z-index: 2; width: 11.78571vw; height: 15.95238vw; } .Question.q3-e .image-r { z-index: 2; width: 8.92857vw; height: 15.95238vw; } .Question.q3-e .image-r img { margin-top: 1.42857vw; } .Question.q3-e .Question_contents { margin-top: -3.57143vw; } .Question.q3-e .Question_contents_link { margin-top: -1.19048vw; } .Question.q3-f .image-l { z-index: 2; width: 8.15476vw; height: 14.16667vw; } .Question.q3-f .image-r { z-index: 2; width: 11.19048vw; height: 14.16667vw; } .Question.q3-f .image-r img { margin-top: 4.40476vw; } .Question.q3-f .Question_contents { margin-top: -2.38095vw; } .Question.q3-f .Question_contents_link { margin-top: -0.83333vw; } .Question .step { position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 17.32143vw; height: 1.4881vw; margin-bottom: 3.57143vw; } .Question .back { display: block; position: absolute; left: 0; bottom: 0; width: 10.71429vw; height: 3.86905vw; margin-bottom: 2.38095vw; margin-left: 11.90476vw; } .Question .back:hover { -webkit-transform: scale(.95); transform: scale(.95) } .Question .sp { display: none; } .Question .pc { display: block; } @media screen and (max-width: 767px) { .Question.q1:after { width: 15.71429vw; height: 14.57143vw; top: 6.28571vw; left: 0.57143vw; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; } .Question.q1 .q1_title { width: 43.71429vw; height: 6.57143vw; margin-bottom: 11.42857vw; margin-top: -10.85714vw; } .Question.q1 .q1_buttons { margin-bottom: 5.71429vw; } .Question.q1 .q1_buttons .button { width: 85.71429vw; height: 17.14286vw; margin-bottom: 3.42857vw; } .Question.q1 .q1_text { width: 59.42857vw; height: 14.57143vw; } .Question.q2:after { width: 15.71429vw; height: 17.71429vw; top: 6.28571vw; left: 0; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; } .Question.q2 .title { position: absolute; top: 18.85714vw } .Question.q2-a .title { width: 34.28571vw; height: 6.85714vw; } .Question.q2-a .image-l { width: 28.28571vw; height: 11.71429vw; margin-bottom: 2.85714vw; } .Question.q2-a .image-r { width: 28.57143vw; height: 15.14286vw; margin-bottom: 2.85714vw; } .Question.q2-b .title { width: 49.14286vw; height: 4.57143vw; } .Question.q2-b .image-l { width: 14.85714vw; height: 14.85714vw; margin-bottom: 2.85714vw; } .Question.q2-b .image-r { width: 20vw; height: 13.14286vw; margin-bottom: 2.85714vw; } .Question.q2-c .title { width: 51.42857vw; height: 5.14286vw; } .Question.q2-c .image-l { width: 24vw; height: 14.28571vw; margin-bottom: 2.85714vw; } .Question.q2-c .image-r { width: 22.28571vw; height: 19.42857vw; } .Question.q3:after { width: 15.71429vw; height: 17.71429vw; top: 6.28571vw; left: 0; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; } .Question.q3 .title { position: absolute; top: 18.85714vw } .Question.q3-a .title { width: 38vw; height: 5.14286vw; } .Question.q3-a .image-l { width: 28vw; height: 21.14286vw; } .Question.q3-a .image-r { width: 20vw; height: 20vw; } .Question.q3-b .title { width: 38vw; height: 5.14286vw; } .Question.q3-b .image-l { width: 23.42857vw; height: 16.57143vw; margin-bottom: 1.42857vw; } .Question.q3-b .image-r { width: 18.28571vw; height: 17.42857vw; margin-bottom: 1.42857vw; } .Question.q3-c .Question_wrapper { margin-top: -11.42857vw; } .Question.q3-c .title { width: 38vw; height: 5.14286vw; } .Question.q3-c .image-l { width: 26vw; height: 24vw; } .Question.q3-c .image-r { width: 34.57143vw; height: 18.85714vw; margin-top: 8.57143vw; margin-bottom: 4.28571vw; } .Question.q3-d .Question_wrapper { margin-top: -8.57143vw; } .Question.q3-d .title { width: 38vw; height: 5.14286vw; } .Question.q3-d .image-l { width: 16.85714vw; height: 19.14286vw; margin-bottom: 2.85714vw; } .Question.q3-d .image-r { width: 20vw; height: 25.71429vw; margin-top: 8.57143vw; margin-bottom: -2.85714vw; } .Question.q3-e .Question_wrapper { margin-top: -11.42857vw; } .Question.q3-e .title { width: 38vw; height: 5.14286vw; } .Question.q3-e .image-l { width: 20.28571vw; height: 27.42857vw; margin-bottom: 2.85714vw; margin-bottom: -2.85714vw; } .Question.q3-e .image-r { width: 15.42857vw; height: 18.85714vw; margin-top: 8.57143vw; margin-bottom: 5.71429vw; } .Question.q3-f .Question_wrapper { margin-top: -8.57143vw; } .Question.q3-f .title { width: 38vw; height: 5.14286vw; } .Question.q3-f .image-l { width: 14vw; height: 24.57143vw; margin-bottom: 0vw; } .Question.q3-f .image-r { width: 19.14286vw; height: 16vw; margin-top: 8.57143vw; margin-bottom: 4.85714vw; } .Question_wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; } .Question_contents { width: 100vw; height: 41.42857vw; } .Question_contents + .Question_contents { margin-top: 2.85714vw; } .Question_contents + .Question_contents { margin-left: 0; } .Question_contents_link { width: 71.42857vw; height: 51.14286vw; } .Question .back { width: 26.85714vw; height: 9.71429vw; } .Question .back-left { margin-left: 4vw; margin-bottom: 11.42857vw; } .Question .step { width: 43.71429vw; height: 3.71429vw; margin-bottom: 16.57143vw; } .Question .step-right { left: auto; right: 4vw; -webkit-transform: none; transform: none } .Question .sp { display: block; } .Question .pc { display: none; } } .Result { position: relative; z-index: 2; display: none; } .Result_links { position: absolute; right: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-right: 11.54762vw; margin-bottom: 2.97619vw; } .Result_links:after { display: none; } .Result_fb, .Result_tw { width: 3.57143vw; height: 3.57143vw; } .Result_fb:hover, .Result_tw:hover { -webkit-transform: scale(.95); transform: scale(.95) } .Result_tw { margin-left: 0.89286vw; } .Result_back { width: 10.71429vw; height: 3.86905vw; margin-left: 1.60714vw; } .Result_back:hover { -webkit-transform: scale(.95); transform: scale(.95) } .Result .pc { display: block; } .Result .sp { display: none; } .Result a[target="_blank"]:not(.m-no-icon):after { display: none; } @media screen and (max-width: 767px) { .Result { background-color: white; padding-bottom: 80px; } .Result_links { position: relative; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; margin-top: 2.85714vw; margin-right: 0; margin-bottom: 0; } .Result_fb, .Result_tw { width: 14.28571vw; height: 14.28571vw; } .Result_tw { margin-left: 2.85714vw; } .Result_back { width: 43.14286vw; height: 15.71429vw; margin-left: 4.28571vw; } .Result .pc { display: none; } .Result .sp { display: block; } } #recipe { padding-top: 8px; } @media screen and (max-width: 767px) { #recipe { padding-top: 8px; } } .Recipe { padding-top: 3.21429vw; padding-bottom: 10.71429vw; height: 68vw; } .Recipe_wrapper { margin-top: -1.78571vw; position: relative; } .Recipe_wrapper:before { display: block; content: ""; position: absolute; z-index: 0; top: 0; left: 0; background-image: url(/umekaku/common/img/recipe/recipe_bg.png); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; background-position: center; width: 100%; height: 53vw; } .Recipe_title { position: relative; z-index: 1; margin-left: auto; margin-right: auto; margin-top: 1.19048vw; width: 10.29762vw; height: 4.64286vw; } .Recipe_items { position: relative; z-index: 2; } .Recipe_link { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-tap-highlight-color: transparent; -webkit-transition: all .2s; transition: all .2s; } .Recipe_link:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .Recipe .swiper-slide-active .Recipe_link:hover { -webkit-transform: scale(1); transform: scale(1) } .Recipe_contents { position: relative; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; background-position: center bottom; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: scale(.6); transform: scale(.6); opacity: .85; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; margin-top: 60px; width: 16.66667vw; height: 33.69048vw; } .swiper-slide-active .Recipe_contents { -webkit-transform: scale(.9); transform: scale(.9); -webkit-transform-origin: center; transform-origin: center; opacity: 1; margin-top: 0; } .Recipe_contents-1 { background-image: url(/umekaku/common/img/recipe/recipe_item1.png); } .swiper-slide-active .Recipe_contents-1 { -webkit-transform: scale(.9); transform: scale(.9); } .Recipe_contents-2 { background-image: url(/umekaku/common/img/recipe/recipe_item2.png); } .Recipe_contents-3 { background-image: url(/umekaku/common/img/recipe/recipe_item3.png); } .Recipe_contents-4 { background-image: url(/umekaku/common/img/recipe/recipe_item4.png); } .swiper-slide-active .Recipe_contents-4 { -webkit-transform: scale(.8); transform: scale(.8); margin-top: 1.78571vw; } .Recipe_contents-5 { background-image: url(/umekaku/common/img/recipe/recipe_item5.png); } .Recipe_contents-6 { background-image: url(/umekaku/common/img/recipe/recipe_item6.png); } .swiper-slide-active .Recipe_contents-6 { -webkit-transform: scale(1.05); transform: scale(1.05); margin-top: -4.7619vw; } .Recipe_contents-7 { background-image: url(/umekaku/common/img/recipe/recipe_item7.png); } .swiper-slide-active .Recipe_contents-7 { -webkit-transform: scale(1.05); transform: scale(1.05); margin-top: -3.57143vw; } .Recipe_contents-8 { background-image: url(/umekaku/common/img/recipe/recipe_item8.png); } .Recipe_contents-9 { background-image: url(/umekaku/common/img/recipe/recipe_item9.png); } .Recipe_contents-10 { background-image: url(/umekaku/common/img/recipe/recipe_item10.png); } .swiper-slide-active .Recipe_contents-10 { -webkit-transform: scale(1.05); transform: scale(1.05); margin-top: -3.57143vw; } .Recipe_texts { width: 21.66667vw; height: 7.32143vw; position: absolute; left: 50%; bottom: -2.38095vw; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .Recipe_text { background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; -webkit-transform: scale(.6); transform: scale(.6); opacity: 0; position: absolute; left: 0; top: 0; right: 0; bottom: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; } .Recipe_text.is-show { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition: opacity 0.4s ease-in; transition: opacity 0.4s ease-in; -webkit-transform-origin: center center; transform-origin: center center; background-position: center; } .Recipe_text-1 { background-image: url(/umekaku/common/img/recipe/recipe_title1.svg); } .Recipe_text-1.is-show { -webkit-transform: scale(.9); transform: scale(.9); } .Recipe_text-2 { background-image: url(/umekaku/common/img/recipe/recipe_title2.svg); } .Recipe_text-3 { background-image: url(/umekaku/common/img/recipe/recipe_title3.svg); } .Recipe_text-4 { background-image: url(/umekaku/common/img/recipe/recipe_title4.svg); } .Recipe_text-5 { background-image: url(/umekaku/common/img/recipe/recipe_title5.svg); } .Recipe_text-6 { background-image: url(/umekaku/common/img/recipe/recipe_title6.svg); } .Recipe_text-6.is-show { -webkit-transform: scale(.7); transform: scale(.7); } .Recipe_text-7 { background-image: url(/umekaku/common/img/recipe/recipe_title7.svg); } .Recipe_text-7.is-show { -webkit-transform: scale(.9); transform: scale(.9); } .Recipe_text-8 { background-image: url(/umekaku/common/img/recipe/recipe_title8.svg); } .Recipe_text-9 { background-image: url(/umekaku/common/img/recipe/recipe_title9.svg); } .Recipe_text-9.is-show { -webkit-transform: scale(.7); transform: scale(.7); } .Recipe_text-10 { background-image: url(/umekaku/common/img/recipe/recipe_title10.svg); } @media screen and (max-width: 767px) { .Recipe { height: 750px; padding-top: 60px; } .Recipe_wrapper { margin-top: 0; } .Recipe_wrapper:before { background-image: url(/umekaku/common/img/recipe/recipe_bg_sp.png); width: 100%; height: 430px; -webkit-background-size: cover; background-size: cover; background-position: center; margin-left: 0; } .Recipe_title { width: auto; height: auto; text-align: center; margin-bottom: 5.71429vw; } .Recipe_title img { height: 38px; } .Recipe_contents { width: 150px; height: 300px; } .Recipe_texts { left: 50%; -webkit-transform: translateX(-50%) scale(2.4) ; transform: translateX(-50%) scale(2.4) ; -webkit-transform-origin: center; transform-origin: center; bottom: 2%; } } .Bubble { overflow: hidden; position: absolute; width: 100%; height: 100%; z-index: 1; } .Bubble .bubbleItem { display: block; width: 70px; height: 70px; border-radius: 100%; position: relative; background-color: rgba(255, 255, 255, .4) } .RecipeContents { display: none; position: relative; width: 768px; height: 635px; margin: 0 auto; } .mfp-content .RecipeContents { display: block; } .RecipeContents_wrapper { width: 100%; height: 100%; } .RecipeContents_close { position: absolute; top: 0; right: 0; } .RecipeContents .pc { display: block; } .RecipeContents .sp { display: none; } @media screen and (max-width: 767px) { .RecipeContents { width: auto; height: auto; margin: 20px 14px; } .RecipeContents .pc { display: none; } .RecipeContents .sp { display: block; } } .Loading { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #fff; z-index: 100; } .Loading .loader, .Loading .loader:after { border-radius: 50%; width: 10em; height: 10em; } .Loading .loader { display: none; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 100%; text-indent: -9999em; } .Loading .loader:after { content: ''; display: block; font-size: 10px; position: relative; border-top: 1.1em solid rgba(236, 127, 171, .2); border-right: 1.1em solid rgba(236, 127, 171, .2); border-bottom: 1.1em solid rgba(236, 127, 171, .2); border-left: 1.1em solid #ec7fab; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } .is-show.loader { display: -webkit-box; display: -webkit-flex; display: flex; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .Footer_copy { display: block; margin-top: 12px; font-size: 1.2rem; line-height: 1.6; } .CP_howto { margin-bottom: 3.57143vw; } .CP_contents { position: relative; height: 65.47619vw; width: 100%; margin-top: -4.7619vw; margin-bottom: 4.7619vw; } .CP_contents_title { margin: 0 auto; margin-bottom: 4.64286vw; } .CP_contents_title-1 { width: 35.83333vw; height: 2.20238vw; } .CP_contents_title-2 { width: 30vw; height: 2.20238vw; } .CP_contents_title-3 { width: 35.83333vw; height: 2.20238vw; } .CP_contents_title-4 { width: 39.82143vw; height: 2.20238vw; } .CP_contents_title-5 { width: 44.64286vw; height: 2.20238vw; } .CP_contents_wrapper { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .CP_contents_wrapper-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .CP_contents_item + .CP_contents_item { margin-left: 5.95238vw; } .CP_contents_wrapper-reverse .CP_contents_item + .CP_contents_item { margin-right: 5.35714vw; margin-left: 0; } .CP_contents_primary { position: relative; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; width: 26.78571vw; height: 43.9881vw; margin-top: 4.28571vw; } .CP_contents_primary-1 { background-image: url(/umekaku/common/img/cp/contents1p_pc.png); } .CP_contents_primary-2 { background-image: url(/umekaku/common/img/cp/contents2p_pc.png); } .CP_contents_primary-3 { background-image: url(/umekaku/common/img/cp/contents3p_pc.png); } .CP_contents_primary-4 { background-image: url(/umekaku/common/img/cp/contents4p_pc.png); } .CP_contents_primary-5 { background-image: url(/umekaku/common/img/cp/contents5p_pc.png); } .CP_contents_secondary { width: 35.71429vw; height: 48.86905vw; } .CP_contents_id { display: -webkit-box; display: -webkit-flex; display: flex; position: absolute; left: 5.83333vw; bottom: 5.95238vw; } .CP_contents_id img { display: block; -webkit-transition: all .3s; transition: all .3s; } .CP_contents_id:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transform-origin: center; transform-origin: center; } .CP_contents_id-1 img { width: 16.90476vw; height: 1.54762vw; } .CP_contents_id-1{ left: 6.42857vw; } .CP_contents_id-2 img { width: 9.10714vw; height: 1.54762vw; } .CP_contents_id-2{ left: 0; } .CP_contents_id-3 img { width: 16.90476vw; height: 1.54762vw; width: auto; } .CP_contents_id-3{ left: 5.95238vw; } .CP_contents_id-4 img { width: 8.86905vw; height: 1.54762vw; } .CP_contents_id-4{ left: 0; } .CP_contents_id-5 img { width: 12.61905vw; height: 1.54762vw; } .CP_contents:before { content: ''; display: block; position: absolute; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; bottom: 0; z-index: -1; } .CP_contents-1:before { width: 92.67857vw; height: 46.25vw; background-image: url(/umekaku/common/img/cp/bg1_pc.png); left: 0; } .CP_contents-2:before { width: 93.15476vw; height: 37.85714vw; background-image: url(/umekaku/common/img/cp/bg2_pc.png); background-position: right; right: 0; } .CP_contents-3:before { width: 90.95238vw; height: 46.25vw; background-image: url(/umekaku/common/img/cp/bg3_pc.png); left: 0; } .CP_contents-4:before { width: 23.09524vw; height: 37.85714vw; background-image: url(/umekaku/common/img/cp/bg4_pc.png); background-position: right; right: 0; } .CP_contents-5:before { width: 18.80952vw; height: 64.04762vw; background-image: url(/umekaku/common/img/cp/bg5_pc.png); background-position: left; } .CP_lineup { position: relative; height: 52.38095vw; margin-top: -4.7619vw; margin-bottom: 10.71429vw; } .CP_lineup:before { content: ''; display: block; background-image: url(/umekaku/common/img/cp/lineup_bg_pc.png); background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: absolute; left: 0; top: 0; z-index: -1; width: 100vw; height: 51.0119vw; } .CP_lineup_wrapper { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; padding-top: 4.7619vw; } .CP_lineup_item { width: 16.60714vw; height: 42.2619vw; } .CP_lineup_item + .CP_lineup_item { margin-left: 11.90476vw; } .CP_lineup_image { height: 100%; text-align: center; margin-bottom: 2.02381vw; } .CP_lineup_button { width: 11.90476vw; height: 2.38095vw; margin: 0 auto; display: block; } .CP_lineup_button img { -webkit-transition: transform .3s; transition: transform .3s; } .CP_lineup_button:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transform-origin: center; transform-origin: center; } .CP_banner_link { display: block; overflow: hidden; -webkit-transform: scale(1); transform: scale(1); } .CP_banner_link img { -webkit-transition: all .3s; transition: all .3s; } .CP_banner_link:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transform-origin: center; transform-origin: center; } .CP .pc { display: block; } .CP .sp { display: none; } @media screen and (max-width: 767px) { .CP_howto { margin-bottom: 100px; } .CP_contents { margin-top: 0; padding-bottom: 32.53333vw; height: auto; } .CP_contents:before { -webkit-background-size: cover; background-size: cover; } .CP_contents-1:before { background-image: url(/umekaku/common/img/cp/bg1_sp.png); left: 0; width: 90.93333vw; height: 202vw; } .CP_contents-2:before { background-image: url(/umekaku/common/img/cp/bg2_sp.png); background-position: right; right: 0; width: 86vw; height: 289.2vw; } .CP_contents-3:before { background-image: url(/umekaku/common/img/cp/bg3_sp.png); left: 0; width: 92.13333vw; height: 204.26667vw; } .CP_contents-4:before { background-image: url(/umekaku/common/img/cp/bg4_sp.png); background-position: right; right: 0; width: 101.06667vw; height: 295.6vw; } .CP_contents-5:before { background-image: url(/umekaku/common/img/cp/bg5_sp.png); background-position: left; bottom: 360px; width: 34vw; height: 103.6vw; } .CP_contents_primary { width: 84vw; height: 126.4vw; } .CP_contents_primary-1 { background-image: url(/umekaku/common/img/cp/contents1p_sp.png); } .CP_contents_primary-2 { background-image: url(/umekaku/common/img/cp/contents2p_sp.png); } .CP_contents_primary-3 { background-image: url(/umekaku/common/img/cp/contents3p_sp.png); } .CP_contents_primary-4 { background-image: url(/umekaku/common/img/cp/contents4p_sp.png); } .CP_contents_primary-5 { background-image: url(/umekaku/common/img/cp/contents5p_sp.png); } .CP_contents_id { width: auto; left: 0; bottom: 14.13333vw; } .CP_contents_id img { height: 17px; width: auto; } .CP_contents_secondary { width: 100%; height: auto; padding-left: 8vw; padding-right: 8vw; } .CP_contents_wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .CP_contents_item + .CP_contents_item { margin-top: 17.6vw; margin-left: 0; margin-right: 0!important; } .CP_contents_title { height: 66px; width: auto; text-align: center; } .CP_lineup { height: auto; margin-top: 0; margin-bottom: 40vw; } .CP_lineup:before { background-image: url(/umekaku/common/img/cp/lineup_bg_sp.png); width: 107.14286vw; height: 331.14286vw; } .CP_lineup_wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding-top: 53.33333vw; } .CP_lineup_item { height: 133.33333vw; width: 73.33333vw; } .CP_lineup_item + .CP_lineup_item { margin-left: 0; margin-top: 73.33333vw; } .CP_lineup_image { margin-bottom: 6.66667vw; } .CP_lineup_button { width: 175px; height: auto; } .CP .pc { display: none; } .CP .sp { display: inline-block; } }