@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese"); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; outline: 0; vertical-align: baseline; background: transparent; } article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; } ol, ul { list-style-type: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing=0' in the markup */ table { border-collapse: collapse; border-spacing: 0; } img { max-width: 100%; height: auto; } /*#overview 色 */ /* --- name: 色／フォントサイズなど category: -color fontsize tag: setting --- ## ベースフォントサイズ **PC**：16px **SP**：13px *** ## BGカラー **ベースBG　**：■ #fff **フッターBG**：■ #999 *** ## フォントカラー **通常テキスト**：■ #000000 **重要　　　　**：■ #AA0000 **アクセント　**：■ #BF62EB **注意　　　　**：■ #AA0000 **リンクカラー**：■ #5555FF */ /* --- name: font-weight:bold category: -mixin --- SP：bold（固定）
PC：500（任意）などの出し分け ```scss @include bold(PC用の値) ``` */ /* --- name: media query category: -mixin --- ```scss @include screen_s() { @content; } @include screen_m() { @content; } @include screen_l() { @content; } ``` */ @-webkit-keyframes bounce { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0); } 40% { } 60% { } 70% { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes bounce { 0% { -webkit-transform: scale(0, 0); transform: scale(0, 0); } 40% { } 60% { } 70% { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes bounceUp { from { -webkit-transform: scale(0.7) translate(-10px, 10px); transform: scale(0.7) translate(-10px, 10px); opacity: 0; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes bounceUp { from { -webkit-transform: scale(0.7) translate(-10px, 10px); transform: scale(0.7) translate(-10px, 10px); opacity: 0; } to { -webkit-transform: none; transform: none; opacity: 1; } } ._sample { background-image: -o-linear-gradient(left, lightgray 4px, transparent 2px), -o-linear-gradient(bottom, lightgray, red 2px, transparent 2px); background-image: linear-gradient(to right, lightgray 4px, transparent 2px), linear-gradient(to top, lightgray, red 2px, transparent 2px); background-size: 8px 1.7em; padding-bottom: 8px; } /* --- name: underline-dashed category: -mixin --- ```scss @include dashed(BGcolor,LINEcolor) ``` ```jade p.mod-para._sample 背景色が単色の場合のみ使えます。 ``` */ @font-face { font-family: "icon"; src: url("./fonts/icon.eot"); src: url("./fonts/icon.eot?#iefix") format("eot"), url("./fonts/icon.woff2") format("woff2"), url("./fonts/icon.woff") format("woff"), url("./fonts/icon.ttf") format("truetype"), url("./fonts/icon.svg#icon") format("svg"); } .mod-icon:before { font-family: "icon"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-variant: normal; font-weight: normal; /* speak: none; only necessary if not using the private unicode range (firstGlyph option) */ text-decoration: none; text-transform: none; vertical-align: middle; margin: 0 .5em; } .mod-icon.-arrow:before { content: "\F001"; } .mod-icon.-arrow1:before { content: "\F002"; } .mod-icon.-arrow1Left:before { content: "\F003"; } .mod-icon.-arrow2:before { content: "\F004"; } .mod-icon.-arrow2Left:before { content: "\F005"; } .mod-icon.-blankWindow:before { content: "\F006"; } .mod-icon.-blankWindow2:before { content: "\F007"; } .mod-icon.-dotarrow:before { content: "\F008"; } .mod-icon.-dotarrow_l:before { content: "\F009"; } .mod-icon.-link:before { content: "\F00A"; } .mod-icon.-monbo:before { content: "\F00B"; } /* @import "sass/_text"; @import "sass/_base"; // @import "sass/_nav"; // @import "sass/_section"; // @import "sass/_pager"; @import "sass/_image"; @import "sass/_list"; @import "sass/_link"; @import "sass/_dl"; @import "sass/_table"; // @import "sass/_column"; // @import "sass/_flex"; @import "sass/_twoColContent"; // @import "sass/_penetrationContent"; // @import "sass/_faq"; @import "sass/_sns"; // @import "sass/_narrowContent"; // @import "sass/_group"; @import "sass/_modalmovie"; @import "sass/_playicon";*/ /* --- name: ブレイクポイントで表示切り替え category: -helper --- ```jade ._showSp SPで表示 ._showPc PCで表示 ``` */ @media screen and (min-width: 768px) { ._showSp { display: none !important; } ._showSmall { display: none !important; } } @media screen and (max-width: 767px) { ._showPc { display: none !important; } ._showSmall { display: none !important; } } @media screen and (max-width: 320px) { ._showSmall { display: block !important; } } /* --- name: 横幅設定 category: -helper --- 横幅指定 おもにmod-columnでセルの幅指定に使用する ```jade ._x1of1: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of2: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of3: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x2of3: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of4: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of4: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of5: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x2of5: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of5: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x4of5: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of6: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x5of6: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of7: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x2of7: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of7: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x4of7: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x5of7: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x6of7: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of8: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of8: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x5of8: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x7of8: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of9: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x2of9: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x4of9: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x5of9: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x7of9: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x8of9: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of10: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of10: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x7of10: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x9of10: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ``` */ ._x1of1 { width: 100%; } ._x1of2 { width: 50%; } ._x1of3 { width: 33.333%; } ._x2of3 { width: 66.666%; } ._x1of4 { width: 25%; } ._x3of4 { width: 75%; } ._x1of5 { width: 20%; } ._x2of5 { width: 40%; } ._x3of5 { width: 60%; } ._x4of5 { width: 80%; } ._x1of6 { width: 16.666%; } ._x5of6 { width: 83.333%; } ._x1of7 { width: 14.285%; } ._x2of7 { width: 28.571%; } ._x3of7 { width: 42.857%; } ._x4of7 { width: 57.142%; } ._x5of7 { width: 71.428%; } ._x6of7 { width: 85.714%; } ._x1of8 { width: 12.5%; } ._x3of8 { width: 37.5%; } ._x5of8 { width: 62.5%; } ._x7of8 { width: 87.5%; } ._x1of9 { width: 11.111%; } ._x2of9 { width: 22.222%; } ._x4of9 { width: 44.444%; } ._x5of9 { width: 55.555%; } ._x7of9 { width: 77.777%; } ._x8of9 { width: 88.888%; } ._x1of10 { width: 10%; } ._x3of10 { width: 30%; } ._x7of10 { width: 70%; } ._x9of10 { width: 90%; } /* --- name: 横幅指定(スマホ時) category: -helper --- 横幅指定(スマホ時) おもにmod-columnでセルの幅指定に使用する ```jade ._x1of1_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of2_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of3_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x2of3_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of4_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of4_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of5_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x2of5_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of5_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x4of5_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of6_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x5of6_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of7_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x2of7_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of7_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x4of7_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x5of7_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x6of7_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of8_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of8_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x5of8_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x7of8_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of9_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x2of9_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x4of9_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x5of9_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x7of9_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x8of9_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of10_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of10_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x7of10_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x9of10_sp: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ``` */ @media screen and (max-width: 767px) { ._x1of1_sp { width: 100% !important; } ._x1of2_sp { width: 50% !important; } ._x1of3_sp { width: 33.333% !important; } ._x2of3_sp { width: 66.666% !important; } ._x1of4_sp { width: 25% !important; } ._x3of4_sp { width: 75% !important; } ._x1of5_sp { width: 20% !important; } ._x2of5_sp { width: 40% !important; } ._x3of5_sp { width: 60% !important; } ._x4of5_sp { width: 80% !important; } ._x1of6_sp { width: 16.666% !important; } ._x5of6_sp { width: 83.333% !important; } ._x1of7_sp { width: 14.285% !important; } ._x2of7_sp { width: 28.571% !important; } ._x3of7_sp { width: 42.857% !important; } ._x4of7_sp { width: 57.142% !important; } ._x5of7_sp { width: 71.428% !important; } ._x6of7_sp { width: 85.714% !important; } ._x1of8_sp { width: 12.5% !important; } ._x3of8_sp { width: 37.5% !important; } ._x5of8_sp { width: 62.5% !important; } ._x7of8_sp { width: 87.5% !important; } ._x1of9_sp { width: 11.111% !important; } ._x2of9_sp { width: 22.222% !important; } ._x4of9_sp { width: 44.444% !important; } ._x5of9_sp { width: 55.555% !important; } ._x7of9_sp { width: 77.777% !important; } ._x8of9_sp { width: 88.888% !important; } ._x1of10_sp { width: 10% !important; } ._x3of10_sp { width: 30% !important; } ._x7of10_sp { width: 70% !important; } ._x9of10_sp { width: 90% !important; } } /* --- name: 横幅指定(PC時) category: -helper --- 横幅指定(PC時) おもにmod-columnでセルの幅指定に使用する ```jade ._x1of1_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of2_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of3_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x2of3_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of4_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of4_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of5_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x2of5_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of5_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x4of5_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of6_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x5of6_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of7_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x2of7_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of7_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x4of7_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x5of7_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x6of7_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of8_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of8_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x5of8_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x7of8_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of9_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x2of9_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x4of9_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x5of9_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x7of9_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x8of9_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x1of10_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x3of10_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x7of10_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ._x9of10_pc: img(src='https://placehold.jp/fff/1000x30.png?text=dummy', alt='') ``` */ @media screen and (min-width: 768px) { ._x1of1_pc { width: 100% !important; } ._x1of2_pc { width: 50% !important; } ._x1of3_pc { width: 33.333% !important; } ._x2of3_pc { width: 66.666% !important; } ._x1of4_pc { width: 25% !important; } ._x3of4_pc { width: 75% !important; } ._x1of5_pc { width: 20% !important; } ._x2of5_pc { width: 40% !important; } ._x3of5_pc { width: 60% !important; } ._x4of5_pc { width: 80% !important; } ._x1of6_pc { width: 16.666% !important; } ._x5of6_pc { width: 83.333% !important; } ._x1of7_pc { width: 14.285% !important; } ._x2of7_pc { width: 28.571% !important; } ._x3of7_pc { width: 42.857% !important; } ._x4of7_pc { width: 57.142% !important; } ._x5of7_pc { width: 71.428% !important; } ._x6of7_pc { width: 85.714% !important; } ._x1of8_pc { width: 12.5% !important; } ._x3of8_pc { width: 37.5% !important; } ._x5of8_pc { width: 62.5% !important; } ._x7of8_pc { width: 87.5% !important; } ._x1of9_pc { width: 11.111% !important; } ._x2of9_pc { width: 22.222% !important; } ._x4of9_pc { width: 44.444% !important; } ._x5of9_pc { width: 55.555% !important; } ._x7of9_pc { width: 77.777% !important; } ._x8of9_pc { width: 88.888% !important; } ._x1of10_pc { width: 10% !important; } ._x3of10_pc { width: 30% !important; } ._x7of10_pc { width: 70% !important; } ._x9of10_pc { width: 90% !important; } } /* --- name: ブロックポジション category: -helper --- ブロックポジション ```jade ._x1of3._blockCenter(style="background:#ccc;") block center ._x1of3._blockLeft(style="background:#ccc;") block left ._x1of3._blockRight(style="background:#ccc;") block right ``` */ ._blockCenter { margin-left: auto !important; margin-right: auto !important; } ._blockLeft { margin-left: 0 !important; margin-right: auto !important; } ._blockRight { margin-left: auto !important; margin-right: 0 !important; } /* --- name: フロート category: -helper --- フロート ```jade ._clearfix ._x1of3._floatLeft(style="background:#ccc;") floatLeft ._x1of3._floatRight(style="background:#ccc;") floatRight ``` */ ._floatLeft { float: left !important; } ._floatRight { float: right !important; } ._clearfix { *zoom: 1; /* --- name: clearfix category: -mixin --- ```scss @include clearfix; ``` */ } ._clearfix:after { content: ''; display: table; clear: both; } /* --- name: インラインのポジション category: -helper --- インラインのポジション ```jade ._clearfix p.mod-para._inlineCenter(style="background:#ccc;") inlineCenter p.mod-para._inlineLeft(style="background:#ccc;") inlineLeft p.mod-para._inlineRight(style="background:#ccc;") inlineRight ``` */ ._inlineCenter { text-align: center !important; } ._inlineLeft { text-align: left !important; } ._inlineRight { text-align: right !important; } /* --- name: インラインのポジション（PCのみ） category: -helper --- インラインのポジション（PCのみ） ```jade ._clearfix p.mod-para._inlineCenterPc(style="background:#ccc;") inlineCenterPC p.mod-para._inlineLeftPc(style="background:#ccc;") inlineLeftPC p.mod-para._inlineRightPc(style="background:#ccc;") inlineRightPC ``` */ @media screen and (min-width: 768px) { ._inlineCenterPc { text-align: center !important; } ._inlineLeftPc { text-align: left !important; } ._inlineRightPc { text-align: right !important; } } /* --- name: インラインのポジション（SPのみ） category: -helper --- インラインのポジション（SPのみ） ```jade ._clearfix p.mod-para._inlineCenterSp(style="background:#ccc;") inlineCenterSP p.mod-para._inlineLeftSp(style="background:#ccc;") inlineLeftSP p.mod-para._inlineRightSp(style="background:#ccc;") inlineRightSP ``` */ @media screen and (max-width: 767px) { ._inlineCenterSp { text-align: center !important; } ._inlineLeftSp { text-align: left !important; } ._inlineRightSp { text-align: right !important; } } /* --- name: 縦のポジション category: -helper --- 縦のポジション ```jade p span(style="display:inline-block; height:5em; vertical-align:middle;") span._vAlignTop 上 span._vAlignMiddle 中央 span._vAlignBottom 下 ``` */ ._vAlignTop { vertical-align: top; } ._vAlignBottom { vertical-align: bottom; } ._vAlignMiddle { vertical-align: middle; } /* --- name: 縦のポジション（PCのみ） category: -helper --- 縦のポジション（PCのみ） ```jade p span(style="display:inline-block; height:5em; vertical-align:middle;") span._vAlignTopPc 上 span._vAlignMiddlePc 中央 span._vAlignBottomPc 下 ``` */ @media screen and (min-width: 768px) { ._vAlignTopPc { vertical-align: top; } ._vAlignBottomPc { vertical-align: bottom; } ._vAlignMiddlePc { vertical-align: middle; } } /* --- name: 縦のポジション（SPのみ） category: -helper --- 縦のポジション（SPのみ） ```jade p span(style="display:inline-block; height:5em; vertical-align:middle;") span._vAlignTopSp 上 span._vAlignMiddleSp 中央 span._vAlignBottomSp 下 ``` */ @media screen and (max-width: 767px) { ._vAlignTopSp { vertical-align: top; } ._vAlignBottomSp { vertical-align: bottom; } ._vAlignMiddleSp { vertical-align: middle; } } /* --- name: マージン category: -helper --- |マージンの削除| |-| |._rm| |._rmTop| |._rmBottom| |._rmLeft| |._rmRight| |上マージン|下マージン|左マージン|右マージン| |--|--|--|--| |._addTopXS|._addBottomXS|._addLeftXS|._addRightXS| |._addTopSS|._addBottomSS|._addLeftSS|._addRightSS| |._addTopS|._addBottomS|._addLeftS|._addRightS| |._addTopM|._addBottomM|._addLeftM|._addRightM| |._addTopL|._addBottomL|._addLeftL|._addRightL| |._addTopLL|._addBottomLL|._addLeftLL|._addRightLL| |._addTopXL|._addBottomXL|._addLeftXL|._addRightXL| */ /* --- name: パディング category: -helper --- |パディングの削除| |-| |._rmPad| |._rmPadTop| |._rmPadBottom| |._rmPadLeft| |._rmPadRight| |上パディング|下パディング|左パディング|右パディング| |--|--|--|--| |._addPadTopXS|._addPadBottomXS|._addPadLeftXS|._addPadRightXS| |._addPadTopSS|._addPadBottomSS|._addPadLeftSS|._addPadRightSS| |._addPadTopS|._addPadBottomS|._addPadLeftS|._addPadRightS| |._addPadTopM|._addPadBottomM|._addPadLeftM|._addPadRightM| |._addPadTopL|._addPadBottomL|._addPadLeftL|._addPadRightL| |._addPadTopLL|._addPadBottomLL|._addPadLeftLL|._addPadRightLL| |._addPadTopXL|._addPadBottomXL|._addPadLeftXL|._addPadRightXL| */ ._rm { margin: 0 !important; } ._rmTop { margin-top: 0 !important; } ._rmBottom { margin-bottom: 0 !important; } ._rmLeft { margin-left: 0 !important; } ._rmRight { margin-right: 0 !important; } ._rmPad { padding: 0 !important; } ._rmPadTop { padding-top: 0 !important; } ._rmPadBottom { padding-bottom: 0 !important; } ._rmPadLeft { padding-left: 0 !important; } ._rmPadRight { padding-right: 0 !important; } @media screen and (min-width: 768px) { ._addTopXS { margin-top: 0.2em !important; } ._addTopSS { margin-top: 0.5em !important; } ._addTopS { margin-top: 0.8em !important; } ._addTopM { margin-top: 1em !important; } ._addTopL { margin-top: 1.5em !important; } ._addTopLL { margin-top: 2em !important; } ._addTopXL { margin-top: 3em !important; } ._addBottomXS { margin-bottom: 0.2em !important; } ._addBottomSS { margin-bottom: 0.5em !important; } ._addBottomS { margin-bottom: 0.8em !important; } ._addBottomM { margin-bottom: 1em !important; } ._addBottomL { margin-bottom: 1.5em !important; } ._addBottomLL { margin-bottom: 2em !important; } ._addBottomXL { margin-bottom: 3em !important; } ._addLeftXS { margin-left: 0.2em !important; } ._addLeftSS { margin-left: 0.5em !important; } ._addLeftS { margin-left: 0.8em !important; } ._addLeftM { margin-left: 1em !important; } ._addLeftL { margin-left: 1.5em !important; } ._addLeftLL { margin-left: 2em !important; } ._addLeftXL { margin-left: 3em !important; } ._addRightXS { margin-right: 0.2em !important; } ._addRightSS { margin-right: 0.5em !important; } ._addRightS { margin-right: 0.8em !important; } ._addRightM { margin-right: 1em !important; } ._addRightL { margin-right: 1.5em !important; } ._addRightLL { margin-right: 2em !important; } ._addRightXL { margin-right: 3em !important; } ._addPadXS { padding: 0.2em !important; } ._addPadSS { padding: 0.5em !important; } ._addPadS { padding: 0.8em !important; } ._addPadM { padding: 1em !important; } ._addPadL { padding: 1.5em !important; } ._addPadLL { padding: 2em !important; } ._addPadXL { padding: 3em !important; } ._addPadTopXS { padding-top: 0.2em !important; } ._addPadTopSS { padding-top: 0.5em !important; } ._addPadTopS { padding-top: 0.8em !important; } ._addPadTopM { padding-top: 1em !important; } ._addPadTopL { padding-top: 1.5em !important; } ._addPadTopLL { padding-top: 2em !important; } ._addPadTopXL { padding-top: 3em !important; } ._addPadBottomXS { padding-bottom: 0.2em !important; } ._addPadBottomSS { padding-bottom: 0.5em !important; } ._addPadBottomS { padding-bottom: 0.8em !important; } ._addPadBottomM { padding-bottom: 1em !important; } ._addPadBottomL { padding-bottom: 1.5em !important; } ._addPadBottomLL { padding-bottom: 2em !important; } ._addPadBottomXL { padding-bottom: 3em !important; } ._addPadLeftXS { padding-left: 0.2em !important; } ._addPadLeftSS { padding-left: 0.5em !important; } ._addPadLeftS { padding-left: 0.8em !important; } ._addPadLeftM { padding-left: 1em !important; } ._addPadLeftL { padding-left: 1.5em !important; } ._addPadLeftLL { padding-left: 2em !important; } ._addPadLeftXL { padding-left: 3em !important; } ._addPadRightXS { padding-right: 0.2em !important; } ._addPadRightSS { padding-right: 0.5em !important; } ._addPadRightS { padding-right: 0.8em !important; } ._addPadRightM { padding-right: 1em !important; } ._addPadRightL { padding-right: 1.5em !important; } ._addPadRightLL { padding-right: 2em !important; } ._addPadRightXL { padding-right: 3em !important; } } @media screen and (max-width: 767px) { ._addTopXS { margin-top: 0.2em !important; } ._addTopSS { margin-top: 0.5em !important; } ._addTopS { margin-top: 0.8em !important; } ._addTopM { margin-top: 1em !important; } ._addTopL { margin-top: 1.5em !important; } ._addTopLL { margin-top: 2em !important; } ._addTopXL { margin-top: 3em !important; } ._addBottomXS { margin-bottom: 0.2em !important; } ._addBottomSS { margin-bottom: 0.5em !important; } ._addBottomS { margin-bottom: 0.8em !important; } ._addBottomM { margin-bottom: 1em !important; } ._addBottomL { margin-bottom: 1.5em !important; } ._addBottomLL { margin-bottom: 2em !important; } ._addBottomXL { margin-bottom: 3em !important; } ._addLeftXS { margin-left: 0.2em !important; } ._addLeftSS { margin-left: 0.5em !important; } ._addLeftS { margin-left: 0.8em !important; } ._addLeftM { margin-left: 1em !important; } ._addLeftL { margin-left: 1.5em !important; } ._addLeftLL { margin-left: 2em !important; } ._addLeftXL { margin-left: 3em !important; } ._addRightXS { margin-right: 0.2em !important; } ._addRightSS { margin-right: 0.5em !important; } ._addRightS { margin-right: 0.8em !important; } ._addRightM { margin-right: 1em !important; } ._addRightL { margin-right: 1.5em !important; } ._addRightLL { margin-right: 2em !important; } ._addRightXL { margin-right: 3em !important; } ._addPadXS { padding: 0.2em !important; } ._addPadSS { padding: 0.5em !important; } ._addPadS { padding: 0.8em !important; } ._addPadM { padding: 1em !important; } ._addPadL { padding: 1.5em !important; } ._addPadLL { padding: 2em !important; } ._addPadXL { padding: 3em !important; } ._addPadTopXS { padding-top: 0.2em !important; } ._addPadTopSS { padding-top: 0.5em !important; } ._addPadTopS { padding-top: 0.8em !important; } ._addPadTopM { padding-top: 1em !important; } ._addPadTopL { padding-top: 1.5em !important; } ._addPadTopLL { padding-top: 2em !important; } ._addPadTopXL { padding-top: 3em !important; } ._addPadBottomXS { padding-bottom: 0.2em !important; } ._addPadBottomSS { padding-bottom: 0.5em !important; } ._addPadBottomS { padding-bottom: 0.8em !important; } ._addPadBottomM { padding-bottom: 1em !important; } ._addPadBottomL { padding-bottom: 1.5em !important; } ._addPadBottomLL { padding-bottom: 2em !important; } ._addPadBottomXL { padding-bottom: 3em !important; } ._addPadLeftXS { padding-left: 0.2em !important; } ._addPadLeftSS { padding-left: 0.5em !important; } ._addPadLeftS { padding-left: 0.8em !important; } ._addPadLeftM { padding-left: 1em !important; } ._addPadLeftL { padding-left: 1.5em !important; } ._addPadLeftLL { padding-left: 2em !important; } ._addPadLeftXL { padding-left: 3em !important; } ._addPadRightXS { padding-right: 0.2em !important; } ._addPadRightSS { padding-right: 0.5em !important; } ._addPadRightS { padding-right: 0.8em !important; } ._addPadRightM { padding-right: 1em !important; } ._addPadRightL { padding-right: 1.5em !important; } ._addPadRightLL { padding-right: 2em !important; } ._addPadRightXL { padding-right: 3em !important; } } .m-h2 { text-align: center; font-weight: bold; font-size: 2.1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.46; padding-bottom: 20px; margin-bottom: 20px; position: relative; } @media screen and (min-width: 768px) { .m-h2 { font-weight: 500; } } @media all and (-ms-high-contrast: none) { .m-h2 { font-weight: bold; } } @media screen and (min-width: 768px) { .m-h2 { font-size: 3.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ padding-bottom: 25px; margin-bottom: 25px; } } .m-h2::after { content: ""; display: block; width: 40px; height: 3px; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; background: url(../../t/images/bgBtoR.png) 50% 50%; background-size: cover; } @media screen and (min-width: 768px) { .m-h2::after { width: 80px; height: 2px; } } .m-h3 { text-align: center; background: white; padding: 20px; line-height: 1.5; } @media screen and (min-width: 768px) { .m-h3 { padding: 60px 20px; } } .m-h3 h3 { font-weight: bold; display: inline-block; position: relative; padding: 0 40px; font-size: 2.1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } @media screen and (min-width: 768px) { .m-h3 h3 { font-weight: 500; } } @media all and (-ms-high-contrast: none) { .m-h3 h3 { font-weight: bold; } } @media screen and (min-width: 768px) { .m-h3 h3 { padding: 0 70px; font-size: 3.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .m-h3 h3::before, .m-h3 h3::after { content: ""; display: block; width: 30px; height: 30px; background: url(../images/icon/monbo@2x.png); background-size: cover; position: absolute; top: 0; bottom: 0; margin: auto; } @media screen and (min-width: 768px) { .m-h3 h3::before, .m-h3 h3::after { width: 41px; height: 41px; } } .m-h3 h3::before { left: 0; } .m-h3 h3::after { right: 0; } .m-h4 { font-size: 1.5rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ font-weight: bold; line-height: 1.7333; position: relative; text-align: center; margin-top: 30px; padding-top: 30px; } @media screen and (min-width: 768px) { .m-h4 { font-weight: 500; } } @media all and (-ms-high-contrast: none) { .m-h4 { font-weight: bold; } } @media screen and (min-width: 768px) { .m-h4 { font-size: 2.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .m-h4::after { content: ""; display: block; width: 100%; height: 1px; position: absolute; top: 0; left: 0; right: 0; margin: auto; background: url(../../t/images/bgBtoR.png) 50% 50% no-repeat; background-size: cover; } .m-logo { position: absolute; top: 0; left: 0; width: 57px; z-index: 2; } @media screen and (min-width: 768px) { .m-logo { width: 114px; } } .m-menu { position: fixed; top: 17px; right: 13px; z-index: 20; } @media screen and (min-width: 1079px) { .m-menu.sp-only { display: none; } } @media screen and (min-width: 768px) { .m-menu { top: 49px; right: 38px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .m-menu { top: 17px; } } .m-menu a { display: block; width: 64px; font-size: 0; background-color: #5c3709; border-radius: 50%; } @media screen and (min-width: 768px) { .m-menu a { width: 124px; } } .m-menu a img { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (min-width: 768px) { .m-menu a img { -webkit-transform: translateY(-11px); -ms-transform: translateY(-11px); transform: translateY(-11px); } } .m-menu a img:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .m-share { margin: 0 auto; padding: 21px 0; background-color: #fff; } @media screen and (min-width: 768px) { .m-share { margin: 0 auto 0; padding: 21px 0; } } .m-share-wrap { padding-bottom: 19px; background-color: #7bd6fe; } @media screen and (min-width: 768px) { .m-share-wrap { padding-bottom: 18px; } } .m-share-shareBtns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 0; } .m-share-shareBtns-item { margin: 0 9px; } @media screen and (min-width: 768px) { .m-share-shareBtns-item { margin: 0 10px; } } .m-share-shareBtns-item a { display: block; -webkit-transition: .3s opacity ease-out; -o-transition: .3s opacity ease-out; transition: .3s opacity ease-out; } .m-share-shareBtns-item a:hover { opacity: .5; } .m-share-shareBtns-item a img { width: 55px; } @media screen and (min-width: 768px) { .m-share-shareBtns-item a img { width: 60px; } } .o-footer { padding-bottom: 64px; position: relative; background-color: #5c3709; background-image: url("../../common/images/footer-bg-top.png"), url("../../common/images/footer-bg-bottom.png"); background-repeat: no-repeat; background-position: left top, right bottom; } @media screen and (min-width: 768px) { .o-footer { padding: 26px 0 16px; } } .o-footer-link { margin-bottom: 18px; } @media screen and (min-width: 768px) { .o-footer-link { margin-bottom: 38px; padding-bottom: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px #885f09 solid; } } .o-footer-link li { margin: 0 20px; padding: 10px 1%; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ font-weight: bold; border-bottom: 1px #885f09 solid; } @media screen and (min-width: 768px) { .o-footer-link li { padding: 0 2%; border-bottom: none; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; } } .o-footer-link li a { position: relative; color: #fff; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: none; } .o-footer-link li a:hover span { text-decoration: underline; } .o-footer-link li a:hover:before { background-image: url("../../common/images/footer-link-arrow-on.png"); } .o-footer-link li a:before { margin-top: 0px; margin-right: 9px; display: block; content: ""; width: 10px; height: 10px; background-image: url("../../common/images/footer-link-arrow.png"); background-repeat: no-repeat; background-size: contain; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (min-width: 768px) { .o-footer-link li a:before { margin-top: 4px; margin-right: 10px; width: 18px; height: 20px; } } .o-footer-link li a:after { margin-left: 10px; display: block; content: ""; width: 12px; height: 12px; background-image: url("../../common/images/footer-icon-target.png"); background-repeat: no-repeat; background-size: contain; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (min-width: 768px) { .o-footer-link li a:after { width: 18px; height: 18px; } } .o-footer-link li a span { display: block; } .o-footer-logos { margin-bottom: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 7.2%; padding-right: 7.2%; } @media screen and (min-width: 768px) { .o-footer-logos { margin-bottom: 32px; padding: 0; } } .o-footer-logos-item a { padding: 0 .25em; } @media screen and (min-width: 768px) { .o-footer-logos-item a { padding: 0 .85em; } } .o-footer-copylight { font-size: 1.1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; text-align: center; color: #fff; } @media screen and (max-width: 767px) { .o-footer-copylight { padding-left: 5.33%; padding-right: 5.33%; } } @media screen and (min-width: 768px) { .o-footer-copylight { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .o-footer-toTop { position: absolute; bottom: 10px; right: 15px; width: 70px; } @media screen and (min-width: 768px) { .o-footer-toTop { right: 36px; width: 141px; } } .h-menu { position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100vh; background-image: url("../../common/images/menu-bg-pc.png"); background-repeat: no-repeat; background-size: cover; background-position: center center; z-index: 15; padding-top: 9.2vw; overflow-y: auto; } @media screen and (min-width: 768px) { .h-menu { padding-top: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .h-menu-close { position: fixed; z-index: 10; top: 17px; right: 13px; } @media screen and (min-width: 768px) { .h-menu-close { top: 49px; right: 38px; } } .h-menu-close a { display: block; width: 64px; font-size: 0; background-color: #5c3709; border-radius: 50%; } @media screen and (min-width: 768px) { .h-menu-close a { width: 124px; } } .h-menu-close a img { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (min-width: 768px) { .h-menu-close a img { -webkit-transform: translateY(-11px); -ms-transform: translateY(-11px); transform: translateY(-11px); } } .h-menu-close a img:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .h-menu-inner { margin-left: 20%; margin-right: 20%; } @media screen and (min-width: 768px) { .h-menu-inner { margin: 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .h-menu-logo { margin-bottom: 15px; text-align: center; } @media screen and (min-width: 768px) { .h-menu-logo { width: 51.9%; } } @media screen and (min-width: 768px) { .h-menu-logo img { width: 498px; } } .h-menu-list { width: auto; } @media screen and (min-width: 768px) { .h-menu-list { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (min-width: 768px) { .h-menu-list { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } .h-menu-listItem { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 4px #5c3709 dotted; } @media screen and (max-width: 767px) { .h-menu-listItem { margin-bottom: 8px; padding-bottom: 8px; } } @media screen and (min-width: 768px) { .h-menu-listItem { padding: 12px 0 12px 10px; border-bottom-width: 3px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .h-menu-listItem a { display: block; font-size: 0; } .h-menu-listItem:nth-child(1) > img { max-width: 32.53333vw; } @media screen and (min-width: 768px) { .h-menu-listItem:nth-child(1) > img { max-width: 194px; } } .h-menu-listItem:nth-child(2) > img { max-width: 32.8vw; } @media screen and (min-width: 768px) { .h-menu-listItem:nth-child(2) > img { max-width: 185px; } } .h-menu-listItem:nth-child(3) > img { max-width: 26.66667vw; } @media screen and (min-width: 768px) { .h-menu-listItem:nth-child(3) > img { max-width: 147px; } } .h-menu-listItem:nth-child(4) > img { max-width: 43.73333vw; } @media screen and (min-width: 768px) { .h-menu-listItem:nth-child(4) > img { max-width: 253px; } } .h-menu-listItem:nth-child(5) > img { max-width: 31.2vw; } @media screen and (min-width: 768px) { .h-menu-listItem:nth-child(5) > img { max-width: 175px; } } .h-menu-listItem:nth-child(6) > img { max-width: 30.93333vw; } @media screen and (min-width: 768px) { .h-menu-listItem:nth-child(6) > img { max-width: 186px; } } @media screen and (max-width: 767px) { .h-menu-listItem-child { width: 100%; text-align: center; } } @media screen and (min-width: 768px) { .h-menu-listItem-child { padding: 10px 0 10px 20px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } .h-menu-listItem-child-inner { display: inline-block; } @media screen and (min-width: 768px) { .h-menu-listItem-child-inner { display: block; } } .h-menu-listItem-child a { display: block; } @media screen and (max-width: 767px) { .h-menu-listItem-child a { padding: 10px 0; border-top: 2px #5c3709 dotted; } } @media screen and (min-width: 768px) { .h-menu-listItem-child a:not(:last-child) { border-bottom: 2px #5c3709 dotted; } } @media screen and (min-width: 768px) { .h-menu-listItem-child a { padding: 18px 0; } .h-menu-listItem-child a:first-child { padding-top: 0; } .h-menu-listItem-child a:last-child { padding-bottom: 0; } } .m-mv { position: relative; } .m-mv-inner { position: absolute; padding: 4vw 0 15vw; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: justify; align-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; z-index: 2; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .m-mv-inner { padding: 0 6vw 9vw; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .m-mv-date, .m-mv-logo, .m-mv-experience { width: 100%; text-align: center; } @media screen and (min-width: 768px) { .m-mv-date, .m-mv-logo, .m-mv-experience { width: auto; } } .m-mv-date img, .m-mv-logo img, .m-mv-experience img { -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); } .m-mv-date { margin-bottom: 12vw; width: 53.33333vw; } @media screen and (min-width: 768px) { .m-mv-date { margin-bottom: 0; width: 23%; } } .viewed .m-mv-date img { -webkit-animation: bounce 0.6s 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation: bounce 0.6s 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .m-mv-logo { width: 87.2vw; } @media screen and (min-width: 768px) { .m-mv-logo { width: 50%; } } .viewed .m-mv-logo img { -webkit-animation: bounce 0.6s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation: bounce 0.6s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .m-mv-experience { width: 72.93333vw; } @media screen and (min-width: 768px) { .m-mv-experience { width: 26%; } } .viewed .m-mv-experience img { -webkit-animation: bounce 0.6s 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation: bounce 0.6s 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .m-mv-bg { width: 100%; height: 163vw; overflow: hidden; } @media screen and (min-width: 768px) { .m-mv-bg { height: 65vw; } } .m-mv-bg img { position: absolute; bottom: 5vw; width: 100%; height: 110%; -o-object-fit: cover; object-fit: cover; -o-object-position: center bottom; object-position: center bottom; } @media screen and (min-width: 768px) { .m-mv-bg img { position: static; height: 100%; -webkit-transform: scale(1.3) translate(0px, -90px); -ms-transform: scale(1.3) translate(0px, -90px); transform: scale(1.3) translate(0px, -90px); } } .m-mv:after { content: ""; position: absolute; bottom: -30px; width: 100%; height: 95px; background-image: url("../../t/images/mv-bg-bottom-sp.png"); background-repeat: no-repeat; background-position: left center; background-size: 100% 100%; z-index: 2; } @media screen and (min-width: 768px) { .m-mv:after { bottom: 0; height: 22.4vw; background-position: center center; background-image: url("../../t/images/mv-bg-bottom-pc.png"); background-size: 100% auto; } } .player { position: fixed; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 0; left: 0; width: 100%; height: 100vh; z-index: 20; background-color: rgba(76, 52, 35, 0.8); } .player-outer { position: absolute; z-index: 20; } .player-close { position: fixed; top: 17px; right: 13px; z-index: 20; } @media screen and (min-width: 768px) { .player-close { top: 49px; right: 38px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .player-close { top: 17px; } } .player-close a { display: block; width: 64px; font-size: 0; background-color: #5c3709; border-radius: 50%; } @media screen and (min-width: 768px) { .player-close a { width: 124px; } } .player-close a img { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (min-width: 768px) { .player-close a img { -webkit-transform: translateY(-11px); -ms-transform: translateY(-11px); transform: translateY(-11px); } } .player-close a img:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .player-wrap { width: 100%; height: 100%; max-width: 960px; display: table; margin: 0 auto; } .player-container { display: table-cell; vertical-align: middle; width: 100%; } .player-inner { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; padding-top: 56.25%; margin: 0 auto; overflow-y: auto; position: relative; } .player-inner iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #modalbase { position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; } #modalbase .modal-bg { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } #modalbase .modalinner { position: absolute; padding: 30px 0; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: inline-block; margin: auto; width: 100%; max-width: 960px; } #modalbase .modalinner .modalinner-margin { margin: 0 20px; } #modalbase .modalinner .modal-close { display: block; width: 48px; height: 48px; background: url(../../t/images/btn_close_s.png); background-size: cover; margin: 0 0 30px auto; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } @media screen and (min-width: 768px) { #modalbase .modalinner .modal-close { width: 60px; height: 60px; background-size: cover; } } #modalbase .modalinner .modal-close:hover { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); cursor: pointer; } #modalbase .modalinner .modal-close-button { display: block; width: 300px; height: 60px; background: url(../../t/images/btn_close.png); margin: 30px auto 0; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } #modalbase .modalinner .modal-close-button:hover { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); cursor: pointer; } #modalbase .modalinner .modal-content > div.img { max-width: 800px; display: block; margin: auto; } #modalbase .modalinner .modal-content img { width: 100%; } #modalbase .modalinner .modal-content .modal-mov { padding-top: 45%; height: 100%; height: 100%; position: relative; } #modalbase .modalinner .modal-content .modal-mov iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .m-movie { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .m-movie video { position: absolute; top: 50%; left: 50%; display: block; min-width: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .m-movie:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../../t/images/pt_bg_mov.png"); background-size: 2px 2px; opacity: .5; z-index: 1; } .m-news { position: relative; padding-bottom: 56vw; background-image: url("../../t/images/news-bg-sp.png"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100vw; z-index: 2; } @media screen and (max-width: 767px) { .m-news { padding-left: 5.33%; padding-right: 5.33%; } } @media screen and (min-width: 768px) { .m-news { padding-bottom: 442px; -webkit-transform: translateY(-63px); -ms-transform: translateY(-63px); transform: translateY(-63px); background-image: url("../../t/images/news-bg-pc.png"); background-size: 100% 798px; } } .m-news-title { margin-bottom: 2px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .m-news-title { margin-bottom: 28px; } } .m-news-title img { max-width: 30.93333vw; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); } @media screen and (min-width: 768px) { .m-news-title img { max-width: 200px; } } .m-news-title.viewed img { -webkit-animation: bounce 0.34s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation: bounce 0.34s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .m-news-content { margin-bottom: 28px; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: auto; } @media screen and (min-width: 768px) { .m-news-content { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (min-width: 768px) and (max-width: 1079px) { .m-news-content { padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } } @media screen and (min-width: 768px) { .m-news-content { margin-bottom: 31px; } } .m-news-contentItem { position: relative; padding: 10px; -webkit-filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); -webkit-box-sizing: border-box; box-sizing: border-box; /*&.newItem{ &:after{ content: ""; position: absolute; top: -19px; left: 0; width: 77px; height: 38px; @include screen_l() { top: -19px; left: 0; width: 77px; height: 38px; background-image: url('../../t/images/new-icon.png'); background-repeat: no-repeat; background-size: contain; } } }*/ } @media screen and (min-width: 768px) { .m-news-contentItem { padding: 0; margin-right: 40px; width: calc(25% - 30px); -webkit-filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1)); } .m-news-contentItem:nth-child(4n) { margin-right: 0; } } .m-news-contentItem-inner { position: relative; padding: 11px 0 0; background-image: url("../../t/images/newsItem-bg-sp.png"); background-repeat: no-repeat; background-size: cover; -webkit-transition: .2s 0s transform ease; -o-transition: .2s 0s transform ease; transition: .2s 0s transform ease; -webkit-box-sizing: border-box; box-sizing: border-box; /*&:before{ content: ""; position: absolute; top: 0; left: -3%; width: 106%; left: 0; width: 100%; height: 100%; z-index: -1; background-image: url('../../t/images/newsItem-bg-pc.png'); background-size: 100% 100%; //transform: scale(1.1); }*/ } @media screen and (min-width: 768px) { .m-news-contentItem-inner { height: 100%; padding: 23px 0 0; background-image: url("../../t/images/newsItem-bg-pc.png"); background-size: 100% 100%; } } @media screen and (min-width: 768px) { .m-news-contentItem-inner:hover { -webkit-transform: translate(-10px, -10px); -ms-transform: translate(-10px, -10px); transform: translate(-10px, -10px); } } .m-news-contentItem-inner a { display: block; color: #5c3709; text-decoration: none; } .newItem .m-news-contentItem-inner:after { content: ""; position: absolute; top: -25px; left: 5px; width: 65px; height: 32px; background-image: url("../../t/images/new-icon.png"); background-repeat: no-repeat; background-size: contain; } @media screen and (min-width: 768px) { .newItem .m-news-contentItem-inner:after { top: -24px; left: 0; width: 82px; height: 44px; } } .m-news-contentItem-image { position: relative; font-size: 0; } .m-news-contentItem-image img { width: 100%; } .movieItem .m-news-contentItem-image:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 35px; height: 35px; margin: auto; background-image: url("../../t/images/play-icon.png"); background-size: contain; } @media screen and (min-width: 768px) { .movieItem .m-news-contentItem-image:before { width: 60px; height: 60px; } } .m-news-contentItem-data { padding: 16px 8px 16px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; } @media screen and (min-width: 768px) { .m-news-contentItem-data { padding: 14px 20px 25px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .m-news-contentItem-title { min-height: 5.4em; } @media screen and (min-width: 768px) { .m-news-contentItem-title { min-height: initial; } } .targetBrabk .m-news-contentItem-title span { padding-right: 10px; background-image: url("../../t/images/news/target-icon.png"); background-repeat: no-repeat; background-position: right center; background-size: 9px auto; } @media screen and (min-width: 768px) { .targetBrabk .m-news-contentItem-title span { padding-right: 20px; background-size: auto auto; } } .m-news-alert { margin-bottom: 25px; padding: 0 10px; } @media screen and (min-width: 768px) { .m-news-alert { margin-bottom: 44px; padding: 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .m-news-alert-item { padding: 12px 30px 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fff; border-radius: 4px; -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1); } @media screen and (min-width: 768px) { .m-news-alert-item { padding: 25px 44px 11px; border-radius: 10px; -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); } } .m-news-alert a { color: #ff0000; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; text-align: center; text-decoration: underline; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; } @media screen and (min-width: 768px) { .m-news-alert a { font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 3.5; } } .m-news-alert a span { padding-right: 15px; background-image: url("../../t/images/news/target-icon.png"); background-repeat: no-repeat; background-position: right center; background-size: 9px auto; } @media screen and (min-width: 768px) { .m-news-alert a span { padding-right: 30px; background-size: auto auto; } } .m-news-alert a:hover { opacity: .7; } .m-news-link { margin: auto; width: 180px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .m-news-link { width: 300px; } } .m-news-link a { display: inline-block; font-size: 0; background-color: #5c3709; border-radius: 8px; } .m-news-link img { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (min-width: 768px) { .m-news-link img { -webkit-transform: translateY(-9px); -ms-transform: translateY(-9px); transform: translateY(-9px); } } .m-news-link img:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .m-news .slick-list { padding-top: 15px; } .m-news-slideBtn { position: absolute; top: calc(50% - 12px); width: 23px; height: 26px; background-repeat: no-repeat; background-size: contain; z-index: 2; cursor: pointer; } .m-news-slideBtn.prev-btn { left: -10px; background-image: url("../../t/images/news-arrow-left.png"); } .m-news-slideBtn.next-btn { right: -10px; background-image: url("../../t/images/news-arrow-right.png"); } .m-story { padding: 18px 0 43px; background-image: url("../../t/images/story-bg.png"); background-repeat: no-repeat; background-position: center top; background-size: cover; } @media screen and (min-width: 768px) { .m-story { padding: 111px 0 13px; background-position: center center; } } .m-story-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .m-story-photo, .m-story-data { width: 100%; } @media screen and (min-width: 768px) { .m-story-photo, .m-story-data { width: 50%; } } @media screen and (min-width: 768px) { .m-story-photo1 { text-align: center; -webkit-transform: translate(-32px, -32px); -ms-transform: translate(-32px, -32px); transform: translate(-32px, -32px); } } @media screen and (max-width: 767px) { .m-story-photo1 { display: none; } } .m-story-photo1 img { opacity: 0.5; -webkit-transform: translate(100px, -10px); -ms-transform: translate(100px, -10px); transform: translate(100px, -10px); } .m-story-photo1.viewed img { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: 0.34s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: 0.34s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.34s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); } .m-story-photo2 { margin: auto; text-align: center; } @media screen and (min-width: 768px) { .m-story-photo2 { position: relative; margin-top: -119px; left: -19px; } } .m-story-photo2 img { max-width: 92%; opacity: 0.5; -webkit-transform: translate(-100px, 10px); -ms-transform: translate(-100px, 10px); transform: translate(-100px, 10px); } @media screen and (min-width: 768px) { .m-story-photo2 img { max-width: 100%; } } .m-story-photo2.viewed img { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: 0.34s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: 0.34s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.34s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); } .m-story-data { margin-top: -41px; } @media screen and (max-width: 767px) { .m-story-data { margin-left: 5.33%; margin-right: 5.33%; } } @media screen and (min-width: 768px) { .m-story-data { margin-top: 0; } } .m-story-title { text-align: center; } @media screen and (min-width: 768px) { .m-story-title { text-align: left; } } .m-story-title img { -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); } @media screen and (min-width: 768px) { .m-story-title img { width: 100%; max-width: 456px; } } .m-story-title.viewed img { -webkit-animation: bounce 0.34s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation: bounce 0.34s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .m-story-description { margin-bottom: 17px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.94; } @media screen and (min-width: 768px) { .m-story-description { margin-bottom: 31px; line-height: 2; text-align: left; } } .m-story-link { margin: auto; width: 180px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .m-story-link { width: 300px; } } .m-story-link a { display: inline-block; font-size: 0; background-color: #5c3709; border-radius: 8px; } .m-story-link img { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (min-width: 768px) { .m-story-link img { -webkit-transform: translateY(-9px); -ms-transform: translateY(-9px); transform: translateY(-9px); } } .m-story-link img:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } @media screen and (min-width: 768px) { .m-story-link { margin: 0; } } .m-pokemon { padding-bottom: 47px; } @media screen and (min-width: 768px) { .m-pokemon { padding-bottom: 65px; } } .m-pokemon-characters { position: relative; height: 227px; padding-top: 65px; } @media screen and (min-width: 768px) { .m-pokemon-characters { height: 330px; } } .m-pokemon-characters-list { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; left: 0; } .m-pokemon-characters-list.topScroll { left: 0; } .m-pokemon-characters-list.bottomScroll { right: 0; left: auto; } .m-pokemon-characters-listItem { font-size: 0; padding: 0 10px; } .m-pokemon-characters-listItem span { display: inline-block; width: 189px; } @media screen and (min-width: 768px) { .m-pokemon-characters-listItem span { width: 270px; } } .m-pokemon-title { text-align: center; } @media screen and (min-width: 768px) { .m-pokemon-title { margin-bottom: 6px; } } .m-pokemon-title img { width: 88%; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); } @media screen and (min-width: 768px) { .m-pokemon-title img { width: auto; } } .m-pokemon-title.viewed img { -webkit-animation: bounce 0.34s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation: bounce 0.34s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .m-pokemon-description { margin-bottom: 14px; color: #fff; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; text-align: center; } @media screen and (min-width: 768px) { .m-pokemon-description { margin-bottom: 28px; } } .m-pokemon-link { margin: auto; width: 180px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .m-pokemon-link { width: 300px; } } .m-pokemon-link a { display: inline-block; font-size: 0; background-color: #5c3709; border-radius: 8px; } .m-pokemon-link img { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (min-width: 768px) { .m-pokemon-link img { -webkit-transform: translateY(-9px); -ms-transform: translateY(-9px); transform: translateY(-9px); } } .m-pokemon-link img:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .m-dungeon { padding: 20px 0; background-image: url("../../t/images/dungeon-bg.png"); background-repeat: no-repeat; background-position: center top; background-size: cover; } @media screen and (min-width: 768px) { .m-dungeon { padding: 30px 0; } } .m-dungeon-scroll { position: relative; height: 105px; -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); } @media screen and (min-width: 768px) { .m-dungeon-scroll { height: 150px; } } .m-dungeon-scroll.dungeon-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .m-dungeon-scroll-list { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; } .m-dungeon-scroll-list.topScroll { left: 0; } .m-dungeon-scroll-listItem { font-size: 0; } .m-dungeon-scroll-listItem span { display: inline-block; width: 189px; } @media screen and (min-width: 768px) { .m-dungeon-scroll-listItem span { width: 266px; } } .m-dungeon-titleArea { padding: 20px 0; background-image: url("../../t/images/dungeon-title-bg-sp.png"); background-repeat: no-repeat; background-position: center top 8px; background-size: contain; } @media screen and (min-width: 768px) { .m-dungeon-titleArea { background-image: url("../../t/images/dungeon-title-bg-pc.png"); padding: 35px 0; background-position: center center; } } .m-dungeon-title { text-align: center; } @media screen and (min-width: 768px) { .m-dungeon-title { margin: auto; max-width: 713px; width: 51vw; } } .m-dungeon-title img { width: 82%; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); } @media screen and (min-width: 768px) { .m-dungeon-title img { width: auto; } } .m-dungeon-title.viewed img { -webkit-animation: bounce 0.34s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation: bounce 0.34s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .m-dungeon-description { margin-bottom: 13px; color: #fff; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; text-align: center; } @media screen and (min-width: 768px) { .m-dungeon-description { margin-bottom: 30px; } } .m-dungeon-link { margin-bottom: 32px; margin: auto; width: 180px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .m-dungeon-link { width: 300px; } } .m-dungeon-link a { display: inline-block; font-size: 0; background-color: #5c3709; border-radius: 8px; } .m-dungeon-link img { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (min-width: 768px) { .m-dungeon-link img { -webkit-transform: translateY(-9px); -ms-transform: translateY(-9px); transform: translateY(-9px); } } .m-dungeon-link img:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .m-overview { padding: 163px 0 32px 0; background-image: url("../../t/images/overview-outer-bg-sp.png"); background-size: cover; } @media screen and (min-width: 768px) { .m-overview { padding: 200px 0 60px; background-image: url("../../t/images/overview-outer-bg-pc.png"); } } .m-overview-title { margin-bottom: 14px; font-size: 2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.2; font-weight: 700; text-align: center; } @media screen and (min-width: 768px) { .m-overview-title { margin-bottom: 21px; font-size: 3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.6; text-align: left; } } .m-overview-content { width: auto; position: relative; margin-left: 7.6%; margin-right: 7.6%; padding: 34px 20px; background-image: url("../../t/images/overview-bg-sp.png"); background-repeat: no-repeat; background-position: center top; background-size: cover; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .m-overview-content { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (min-width: 768px) { .m-overview-content { margin: auto; padding: 57px 60px; background-image: url("../../t/images/overview-bg-pc.png"); } } @media screen and (min-width: 768px) and (max-width: 1079px) { .m-overview-content { margin-left: 20px; margin-right: 20px; width: auto; } } @media screen and (min-width: 768px) { .m-overview-content-inner { display: -webkit-box; display: -ms-flexbox; display: flex; } } .m-overview-content-description { margin-bottom: 20px; padding: 20px 20px 0; border: 1px #d3a29a solid; } @media screen and (min-width: 768px) { .m-overview-content-description { margin-bottom: 15px; padding: 40px 40px 0; } } .m-overview-content-title { margin-bottom: 14px; font-size: 2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.6; font-weight: 700; text-align: center; } @media screen and (min-width: 768px) { .m-overview-content-title { margin-bottom: 21px; font-size: 3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.6; } } .m-overview-content-text p { margin-bottom: 32px; color: #000; font-weight: 400; font-size: 1.3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.92; } @media screen and (min-width: 768px) { .m-overview-content-text p { font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .m-overview-content-text p a { color: #733f00; } .m-overview-content-text p span { display: inline-block; padding-left: 1em; text-indent: -1em; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } @media screen and (min-width: 768px) { .m-overview-content-text p span { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .m-overview-content-text dl { padding: 20px 0; } @media screen and (min-width: 768px) { .m-overview-content-text dl { padding: 40px 0; } } .m-overview-content-text dl:first-of-type { border-top: 1px #d3a29a solid; } .m-overview-content-text dl:not(:last-child) { border-bottom: 1px #d3a29a solid; } .m-overview-content-text dl dt, .m-overview-content-text dl dd { color: #000; font-weight: 400; line-height: 1.92; } @media screen and (min-width: 768px) { .m-overview-content-text dl dt, .m-overview-content-text dl dd { line-height: 2; } } .m-overview-content-text dl dt { -ms-flex-negative: 0; flex-shrink: 0; color: #733f00; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ font-weight: 700; } @media screen and (min-width: 768px) { .m-overview-content-text dl dt { font-size: 2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .m-overview-content-text dl dd { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } @media screen and (min-width: 768px) { .m-overview-content-text dl dd { font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .m-overview-content-text dl dd .small-text { font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } @media screen and (min-width: 768px) { .m-overview-content-text dl dd .small-text { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .m-overview-content-text dl dd .label-text { color: #733f00; font-weight: 700; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } @media screen and (min-width: 768px) { .m-overview-content-text dl dd .label-text { font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .m-overview-content-text dl dd a { color: #733f00; } .m-overview-content-text dl dd a { padding-right: 10px; background-image: url("../../t/images/news/target-icon.png"); background-repeat: no-repeat; background-position: right center; background-size: 9px auto; } @media screen and (min-width: 768px) { .m-overview-content-text dl dd a { padding-right: 20px; background-size: auto auto; } } .m-overview-content-text-inner { padding-left: 1em; } .m-overview-image { margin-bottom: 12px; text-align: center; } @media screen and (min-width: 768px) { .m-overview-image { margin-bottom: 0; margin-right: 64px; width: 285px; } } .m-overview-image img { width: 43%; } @media screen and (min-width: 768px) { .m-overview-image img { width: 100%; } } @media screen and (min-width: 768px) { .m-overview-data { padding-top: 5px; width: calc(100% - 304px); } } .m-overview-table { margin-bottom: 30px; border-top: 1px #d3a29a solid; } @media screen and (min-width: 768px) { .m-overview-table { margin-bottom: 35px; } } .m-overview-table dl { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px #d3a29a solid; } .m-overview-table dl dt, .m-overview-table dl dd { color: #000; font-weight: 400; font-size: 1.3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.92; } @media screen and (min-width: 768px) { .m-overview-table dl dt, .m-overview-table dl dd { font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.5; } } .m-overview-table dl dt { width: 80px; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (min-width: 768px) { .m-overview-table dl dt { width: 135px; } } .m-overview-table dl dd { padding-left: 1em; text-indent: -1em; } .m-overview-table dl dd:before { content: ":"; margin-right: 11px; } .m-overview-link { margin: auto; width: 180px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .m-overview-link { width: 300px; } } .m-overview-link a { display: inline-block; font-size: 0; background-color: #5c3709; border-radius: 8px; } .m-overview-link img { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (min-width: 768px) { .m-overview-link img { -webkit-transform: translateY(-9px); -ms-transform: translateY(-9px); transform: translateY(-9px); } } .m-overview-link img:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .m-overview-letter { position: absolute; bottom: 0px; right: -46px; display: none; } @media screen and (min-width: 768px) { .m-overview-letter { display: block; } } @media screen and (min-width: 768px) and (max-width: 1079px) { .m-overview-letter { right: -73px; } } .m-overview-letter img { width: 18vw; max-width: 241px; } .c-page-mainTitle { margin-bottom: 29px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .c-page-mainTitle { margin-bottom: 54px; } } .c-page-mainTitle img { max-width: 61%; } @media screen and (min-width: 768px) { .c-page-mainTitle img { max-width: initial; } } .c-page-mainTitle.story-title img { max-width: 72%; } @media screen and (min-width: 768px) { .c-page-mainTitle.story-title img { width: 398px; } } @media screen and (max-width: 767px) { .c-page-mainTitle.howtoplay-title { margin-bottom: 13px; } } .c-page-mainTitle.howtoplay-title img { max-width: 54%; } @media screen and (min-width: 768px) { .c-page-mainTitle.howtoplay-title img { width: 282px; } } .c-page-mainTitle.mysterymail-title img { max-width: 98%; } @media screen and (min-width: 768px) { .c-page-mainTitle.mysterymail-title img { width: 480px; } } .c-page-mainTitle.about-title img { max-width: 66%; } @media screen and (min-width: 768px) { .c-page-mainTitle.about-title img { width: 348px; } } .c-page-mainTitle.news-title img { max-width: 70%; } @media screen and (min-width: 768px) { .c-page-mainTitle.news-title img { width: 364px; } } .c-page-title { position: relative; margin-bottom: 18px; padding: 22px 0; font-size: 0; text-align: center; background-image: url("../../common/images/title-bg-top-sp.png"), url("../../common/images/title-bg-bottom-sp.png"); background-repeat: no-repeat; background-position: center top,center bottom; background-size: 100% auto; } @media screen and (min-width: 768px) { .c-page-title { margin-bottom: 40px; padding: 32px 0; background-image: url("../../common/images/title-bg-top-pc.png"), url("../../common/images/title-bg-bottom-pc.png"); background-size: 100% auto; } } @media screen and (min-width: 768px) { .c-page-title img { max-width: 100%; } } .c-page-title.inview img { -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); } .c-page-title.inview.viewed img { -webkit-animation: bounce 0.5s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation: bounce 0.5s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } .c-page-target { position: absolute; top: -20px; z-index: -1; } @media screen and (min-width: 768px) { .c-page-target { top: -130px; } } .c-page-description { margin-bottom: 6px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } @media screen and (min-width: 768px) { .c-page-description { margin: 0 9% 35px; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-page-description .small-text { font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ font-weight: 400; } @media screen and (min-width: 768px) { .c-page-description .small-text { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-page-flexImages { margin: 0 9%; } @media screen and (min-width: 768px) { .c-page-flexImages { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .c-page-flexImages-arrow { text-align: center; -ms-flex-item-align: center; align-self: center; } @media screen and (max-width: 767px) { .c-page-flexImages-arrow img { max-width: 40%; } } .c-page-flexImages-item { font-size: 0; } @media screen and (min-width: 768px) { .c-page-flexImages-item { width: 48%; } } @media screen and (max-width: 767px) { .c-page-flexImages-item:not(:last-child) { margin-bottom: 20px; } .add-arrow .c-page-flexImages-item:not(:last-child) { margin-bottom: 0; } } .c-page-flexImages-item-caption { margin-top: 10px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ font-weight: 400; line-height: 1.5; } @media screen and (min-width: 768px) { .c-page-flexImages-item-caption { margin-top: 5px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-page-image { text-align: center; } .c-page { position: relative; padding-top: 112px; padding-bottom: 76px; background-image: url("../../common/images/page-bg-top-sp.png"), url("../../common/images/page-bg-bottom-sp.png"), url("../../common/images/page-bg-sp.png"); background-repeat: no-repeat,repeat-x, repeat; background-position: center top,center bottom,center top; background-size: 100% auto,100% 200px,cover; /*background-image: url('../../common/images/page-bg-sp.png'); background-repeat: repeat; background-position: center top; background-size: cover;*/ z-index: 2; } @media screen and (min-width: 768px) { .c-page { padding-top: 158px; padding-bottom: 123px; background-image: url("../../common/images/page-bg-top-pc.png"), url("../../common/images/page-bg-bottom-pc.png"), url("../../common/images/page-bg-pc.png"); background-repeat: no-repeat,no-repeat, repeat; background-size: 100% auto,100% 470px,cover; } } .c-page-inner { width: auto; } @media screen and (min-width: 768px) { .c-page-inner { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (max-width: 767px) { .c-page-inner { padding-left: 8%; padding-right: 8%; } } .c-story { position: relative; padding-top: 112px; padding-bottom: 41vw; background-image: url("../../t/images/story/story-bg-sp.png"); background-repeat: no-repeat; background-position: center bottom; background-size: cover; z-index: 3; background-color: #1d57c2; } @media screen and (min-width: 768px) { .c-story { padding-top: 150px; padding-bottom: 0; height: 1692px; background-image: url("../../t/images/story/story-bg-pc.png"); background-position: center bottom; } } .c-story-inner { width: auto; } @media screen and (min-width: 768px) { .c-story-inner { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (max-width: 767px) { .c-story-inner { padding-left: 5.33%; padding-right: 5.33%; } } .c-story-description { margin-bottom: 6px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; text-align: center; } @media screen and (min-width: 768px) { .c-story-description { margin-bottom: 18px; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.67; } } .c-story-photo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 768px) { .c-story-photo { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } @media screen and (min-width: 768px) { .c-story-photo img { display: block; } } .c-story-photo-item1 { width: 100%; -webkit-transform: translate(-8px, 0); -ms-transform: translate(-8px, 0); transform: translate(-8px, 0); } @media screen and (min-width: 768px) { .c-story-photo-item1 { width: auto; -webkit-transform: translate(30px, 0); -ms-transform: translate(30px, 0); transform: translate(30px, 0); } } .c-story-photo-item1 img { max-width: 73%; opacity: .2; -webkit-transform: translate(-120px, 0) rotate(0); -ms-transform: translate(-120px, 0) rotate(0); transform: translate(-120px, 0) rotate(0); } @media screen and (min-width: 768px) { .c-story-photo-item1 img { max-width: initial; } } .viewed .c-story-photo-item1 img { opacity: 1; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); -webkit-transition: 0.8s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: 0.8s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.8s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); } .c-story-photo-item2 { width: 100%; margin-top: -52px; text-align: right; -webkit-transform: translate(7px, 0); -ms-transform: translate(7px, 0); transform: translate(7px, 0); } @media screen and (min-width: 768px) { .c-story-photo-item2 { width: auto; margin-top: 0; -webkit-transform: translate(-36px, 29px); -ms-transform: translate(-36px, 29px); transform: translate(-36px, 29px); } } .c-story-photo-item2 img { max-width: 70%; opacity: .2; -webkit-transform: translate(120px, 0) rotate(0); -ms-transform: translate(120px, 0) rotate(0); transform: translate(120px, 0) rotate(0); } @media screen and (min-width: 768px) { .c-story-photo-item2 img { max-width: initial; } } .viewed .c-story-photo-item2 img { opacity: 1; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); -webkit-transition: 0.8s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: 0.8s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.8s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); } .c-story-photo-item3 { width: 100%; position: relative; -webkit-transform: translate(-9px, 0); -ms-transform: translate(-9px, 0); transform: translate(-9px, 0); z-index: 2; } @media screen and (min-width: 768px) { .c-story-photo-item3 { width: auto; -webkit-transform: translate(44px, 18px); -ms-transform: translate(44px, 18px); transform: translate(44px, 18px); } } .c-story-photo-item3 img { max-width: 70%; opacity: .2; -webkit-transform: translate(-120px, 0) rotate(0); -ms-transform: translate(-120px, 0) rotate(0); transform: translate(-120px, 0) rotate(0); } @media screen and (min-width: 768px) { .c-story-photo-item3 img { max-width: initial; } } .viewed .c-story-photo-item3 img { opacity: 1; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); -webkit-transition: 0.8s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: 0.8s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.8s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); } .c-story-photo-item4 { width: 100%; margin-top: -38px; text-align: right; -webkit-transform: translate(7px, 0); -ms-transform: translate(7px, 0); transform: translate(7px, 0); } @media screen and (min-width: 768px) { .c-story-photo-item4 { width: auto; margin-top: 0; -webkit-transform: translate(-38px, 0px); -ms-transform: translate(-38px, 0px); transform: translate(-38px, 0px); } } .c-story-photo-item4 img { max-width: 72%; opacity: .2; -webkit-transform: translate(120px, 0) rotate(0); -ms-transform: translate(120px, 0) rotate(0); transform: translate(120px, 0) rotate(0); } @media screen and (min-width: 768px) { .c-story-photo-item4 img { max-width: initial; } } .viewed .c-story-photo-item4 img { opacity: 1; -webkit-transform: translate(0, 0) rotate(0); -ms-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); -webkit-transition: 0.8s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: 0.8s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.8s 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94); } .c-story-boldText { margin-top: 26px; text-align: center; font-size: 2.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1; font-weight: 700; } @media screen and (min-width: 768px) { .c-story-boldText { margin-top: 0; font-size: 3.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.33; } } .c-story-title { padding: 14px 0; } @media screen and (min-width: 768px) { .c-story-title { padding: 27px 0; } } .c-story-title img { max-width: 53%; } @media screen and (min-width: 768px) { .c-story-title img { max-width: initial; } } .c-stage { position: relative; /*background-image: url('../../t/images/story/stage-bg-sp.png'); background-repeat: no-repeat; background-position: center center; background-size: cover;*/ z-index: 2; overflow: hidden; } .c-stage:before { content: ""; display: block; width: 100%; height: 7.4vw; min-height: 120px; background-color: #1d57c2; } @media screen and (max-width: 767px) { .c-stage:before { display: none; } } @media screen and (min-width: 768px) { .c-stage { margin-top: 0; padding-top: 0px; } } .c-stage-outer { position: absolute; top: 7.6vw; width: 100%; z-index: 2; } .c-stage-inner { width: 100%; width: auto; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .c-stage-inner { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .c-stage-inner { padding-left: 3%; padding-right: 3%; } } @media screen and (max-width: 767px) { .c-stage-inner { padding-left: 3%; padding-right: 3%; } } .c-stage-title { margin-bottom: 24px; padding: 18.5px 0; font-size: 0; text-align: center; background-image: url("../../t/images/story/stage-title-bg-sp.png"); background-repeat: no-repeat; background-size: 100% 70px; } @media screen and (min-width: 768px) { .c-stage-title { margin-bottom: 32px; padding: 31px 0; background-image: url("../../t/images/story/stage-title-bg-pc.png"); background-position: center center; background-size: contain; } } .c-stage-title img { max-width: 124px; } @media screen and (min-width: 768px) { .c-stage-title img { max-width: 212px; } } .c-stage-description { color: #fff; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; text-align: center; } @media screen and (min-width: 768px) { .c-stage-description { font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .c-stage-image { position: relative; margin-top: -25vw; width: 100%; } @media screen and (min-width: 768px) { .c-stage-image { margin-top: -12vw; height: auto; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .c-stage-image { margin-top: 0; } } @media screen and (max-width: 480px) { .c-stage-image { margin-top: -7vw; } } .c-stage-image img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; } .c-early { position: relative; margin-top: -50px; padding-top: 84px; padding-bottom: 30vw; background-image: url("../../common/images/page-bg-bottom-sp.png"), url("../../common/images/page-bg-sp.png"); background-repeat: repeat-x, repeat; background-position: center bottom,center top; background-size: 100% 200px,cover; z-index: 1; } @media screen and (min-width: 768px) { .c-early { padding-top: 135px; padding-bottom: 210px; background-image: url("../../common/images/page-bg-bottom-pc.png"), url("../../common/images/page-bg-pc.png"); background-repeat: no-repeat, repeat; background-size: 100% 470px,cover; } } @media screen and (min-width: 768px) { .c-early .c-page-title { margin-bottom: 32px; padding: 29px 0; } } .c-early .c-page-title img { width: 61.46667vw; } @media screen and (min-width: 768px) { .c-early .c-page-title img { width: auto; } } @media screen and (min-width: 768px) { .c-early .c-ninetales-title { margin-bottom: 32px; padding: 29px 0; } } .c-early .c-ninetales-title img { width: 50.93333vw; } @media screen and (min-width: 768px) { .c-early .c-ninetales-title img { width: auto; } } .c-early-inner { width: auto; } @media screen and (min-width: 768px) { .c-early-inner { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (max-width: 767px) { .c-early-inner { padding-left: 5.33%; padding-right: 5.33%; } } @media screen and (min-width: 768px) { .c-early-content { margin: 0 9%; } } .c-early-intro { margin-bottom: 34px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; text-align: center; } @media screen and (min-width: 768px) { .c-early-intro { margin-bottom: 48px; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .c-early-description { margin-bottom: 16px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } @media screen and (min-width: 768px) { .c-early-description { margin-bottom: 22px; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-early-description.text-center { text-align: center; } .c-early-bottomText { margin-bottom: 16px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } @media screen and (min-width: 768px) { .c-early-bottomText { margin-bottom: 22px; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-early-bottomText.text-center { text-align: center; } .c-early-subTitle { margin-bottom: 13px; font-size: 0; text-align: center; /*background-image: url('../../t/images/story/early-subTitle-bg.png'); background-repeat: no-repeat; background-position: center bottom;*/ } @media screen and (min-width: 768px) { .c-early-subTitle { margin-bottom: 20px; } } .c-early-subTitle.subTitle1 img { width: 81.33333vw; } @media screen and (min-width: 768px) { .c-early-subTitle.subTitle1 img { width: auto; } } .c-early-subTitle.subTitle2 img { width: 90.93333vw; } @media screen and (min-width: 768px) { .c-early-subTitle.subTitle2 img { width: auto; } } .c-early-images { margin-bottom: 14px; font-size: 0; padding: 0 8vw; } @media screen and (min-width: 768px) { .c-early-images { margin-bottom: 49px; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .c-early-images-item { margin: 0 auto; width: 100%; } @media screen and (min-width: 768px) { .c-early-images-item { margin: 0 0; width: auto; } } .c-early-images-item img { width: 100%; } .c-early-partner { margin: 36px auto 36px; padding: 52px 25px 46px; background-image: url("../../t/images/story/partner-bg-sp.png"); background-repeat: no-repeat; background-size: 100% 100%; } @media screen and (min-width: 768px) { .c-early-partner { margin: 54px auto 30px; padding: 52px 40px 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-image: url("../../t/images/story/partner-bg.png"); } } .c-early-partner-data { margin-bottom: 14px; } @media screen and (min-width: 768px) { .c-early-partner-data { margin-bottom: 0; padding-top: 22px; width: 52%; } } .c-early-partner-image { padding: 0 15px; font-size: 0; } @media screen and (min-width: 768px) { .c-early-partner-image { padding: 0; width: 43%; } } .c-early-partner-title { position: relative; margin-bottom: 12px; text-align: center; font-size: 0; } @media screen and (min-width: 768px) { .c-early-partner-title { margin-bottom: 19px; text-align: left; } } .c-early-partner-title:before { content: ""; position: absolute; top: -58px; left: 0; width: 93px; height: 63px; background-image: url("../../t/images/story/partner-icn.png"); background-repeat: no-repeat; background-size: contain; } @media screen and (min-width: 768px) { .c-early-partner-title:before { top: -90px; width: 132px; height: 88px; } } .c-early-partner-title img { width: 61.2vw; } @media screen and (min-width: 768px) { .c-early-partner-title img { width: auto; } } .c-early-partner-description { font-size: 1.3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.77; } @media screen and (min-width: 768px) { .c-early-partner-description { font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .c-early-boldText { margin: 23px auto 50px; text-align: center; font-size: 2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; font-weight: 700; } @media screen and (min-width: 768px) { .c-early-boldText { margin-top: 41px; margin-bottom: 80px; font-size: 3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.67; } } .c-early-oldDescription { margin-bottom: 32px; padding: 32px 0; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; font-weight: bold; border-top: 1px #733f00 dotted; border-bottom: 1px #733f00 dotted; } @media screen and (min-width: 768px) { .c-early-oldDescription { margin-bottom: 62px; padding: 50px 0; font-size: 2.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ text-align: center; } } .c-early-oldDescription.text-center { text-align: center; } .c-early-oldDescription2 { margin-bottom: 20px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } @media screen and (min-width: 768px) { .c-early-oldDescription2 { margin-bottom: 61px; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ text-align: center; } } .c-early-oldDescription2.text-center { text-align: center; } .c-early-oldImage { text-align: center; } .c-early-oldImage img { max-width: 92.8vw; } @media screen and (min-width: 768px) { .c-early-oldImage img { max-width: 100%; } } .footerNav { margin-top: -4.5vw; position: relative; background-image: url("../../common/images/footerNav-bg-sp.png"); background-repeat: repeat-x; background-size: cover; padding-top: 37px; padding-bottom: 22px; z-index: 2; } @media screen and (max-width: 767px) { .footerNav { padding-left: 5.33%; padding-right: 5.33%; } } @media screen and (min-width: 1079px) { .footerNav { margin-top: -16px; padding-top: 43px; padding-bottom: 26px; background-image: url("../../common/images/footerNav-bg-pc.png"); } } .footerNav-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (min-width: 768px) { .footerNav-list { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (min-width: 1079px) { .footerNav-list { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .footerNav-listItem { position: relative; width: 47%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 1079px) { .footerNav-listItem { display: block; width: auto; } } .footerNav-listItem a { padding: 12px 0; } @media screen and (min-width: 1079px) { .footerNav-listItem a { padding: 0; height: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media screen and (max-width: 1079px) { .footerNav-listItem:nth-child(odd):after { content: ""; position: absolute; width: 4px; height: 90%; margin: auto; top: 0; bottom: 0; right: -6%; border-right: 4px #5c3709 dotted; } .footerNav-listItem:nth-child(-n+4) { border-bottom: 4px dotted #5c3709; } } @media screen and (min-width: 1079px) { .footerNav-listItem:nth-child(1) { width: 165px; } } .footerNav-listItem:nth-child(1) img { width: 34.4vw; } @media screen and (min-width: 1079px) { .footerNav-listItem:nth-child(1) img { width: auto; } } @media screen and (min-width: 1079px) { .footerNav-listItem:nth-child(2) { width: 160px; } } .footerNav-listItem:nth-child(2) img { width: 32.53333vw; } @media screen and (min-width: 1079px) { .footerNav-listItem:nth-child(2) img { width: auto; } } @media screen and (min-width: 1079px) { .footerNav-listItem:nth-child(3) { width: 126px; } } .footerNav-listItem:nth-child(3) img { width: 25.06667vw; } @media screen and (min-width: 1079px) { .footerNav-listItem:nth-child(3) img { width: auto; } } @media screen and (min-width: 1079px) { .footerNav-listItem:nth-child(4) { width: 206px; } } .footerNav-listItem:nth-child(4) img { width: 42.8vw; } @media screen and (min-width: 1079px) { .footerNav-listItem:nth-child(4) img { width: auto; } } @media screen and (min-width: 1079px) { .footerNav-listItem:nth-child(5) { width: 143px; } } .footerNav-listItem:nth-child(5) img { width: 28.66667vw; } @media screen and (min-width: 1079px) { .footerNav-listItem:nth-child(5) img { width: auto; } } @media screen and (min-width: 1079px) { .footerNav-listItem:nth-child(6) { width: 157px; } } .footerNav-listItem:nth-child(6) img { width: 32.93333vw; } @media screen and (min-width: 1079px) { .footerNav-listItem:nth-child(6) img { width: auto; } } @media screen and (min-width: 768px) { .footerNav-listItem { /*&:nth-child(1){ width: 158px; order:1; } &:nth-child(2){ width: 145px; order:2; } &:nth-child(3){ width: 200px; order:4; } &:nth-child(4){ width: 145px; order:3; } &:nth-child(5){ width: 145px; order:5; } &:nth-child(6){ width: 139px; order:6; }*/ } } .footerNav-listItem a { text-align: center; } .c-header { position: absolute; z-index: 10; } @media screen and (min-width: 768px) { .c-header { position: fixed; top: 0; left: 0; width: 100%; height: 138px; background-image: url("../../common/images/headerNav-bg.png"); background-repeat: repeat-x; } } @media screen and (min-width: 768px) and (max-width: 1079px) { .c-header { background: none; } } .c-header-inner { width: 100%; max-width: 1366px; height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; } .c-header-logo { margin: 15px 0 0 12px; width: 134px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .c-header-logo { margin: 6px 0 0 0px; padding: 0px 0 0 43px; width: 266px; } } .c-header-logo:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .c-header-menu { padding: 0 2%; width: calc(100% - 266px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 767px) { .c-header-menu { display: none; } } @media screen and (min-width: 768px) and (max-width: 1079px) { .c-header-menu { display: none; } } .c-header-menu li { position: relative; } @media screen and (min-width: 768px) { .c-header-menu li:nth-child(1) { width: 165px; } .c-header-menu li:nth-child(2) { width: 160px; } .c-header-menu li:nth-child(3) { width: 126px; } .c-header-menu li:nth-child(4) { width: 206px; } .c-header-menu li:nth-child(5) { width: 143px; } .c-header-menu li:nth-child(6) { width: 157px; } } .c-header-menu li a { display: block; font-size: 0; } .c-header-menu li .child { position: absolute; padding: 15px 16px 16px; top: 54px; left: -72px; width: 268px; height: 182px; background-image: url("../../common/images/nav-child-bg.png"); background-repeat: no-repeat; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 2; } .c-header-menu li .child a { height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .c-header-menu li .child a:not(:last-child) { border-bottom: 1px rgba(255, 255, 255, 0.3) solid; } .c-pokemon-characters { margin-bottom: 22px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media screen and (min-width: 768px) { .c-pokemon-characters { margin-bottom: 52px; } } .c-pokemon-characters-item { margin: 0 6px 18px; } @media screen and (min-width: 768px) { .c-pokemon-characters-item { margin: 0px 24px 37px; } } @media screen and (max-width: 767px) { .c-pokemon-characters-item:nth-child(1) { width: 19.73333vw; } .c-pokemon-characters-item:nth-child(2) { width: 18.53333vw; } .c-pokemon-characters-item:nth-child(3) { width: 15.33333vw; } .c-pokemon-characters-item:nth-child(4) { width: 16.53333vw; } .c-pokemon-characters-item:nth-child(5) { width: 20.26667vw; } .c-pokemon-characters-item:nth-child(6) { width: 17.73333vw; } .c-pokemon-characters-item:nth-child(7) { width: 15.06667vw; } .c-pokemon-characters-item:nth-child(8) { width: 15.33333vw; } .c-pokemon-characters-item:nth-child(9) { width: 18.4vw; } .c-pokemon-characters-item:nth-child(10) { width: 13.6vw; } .c-pokemon-characters-item:nth-child(11) { width: 19.73333vw; } .c-pokemon-characters-item:nth-child(12) { width: 15.73333vw; } .c-pokemon-characters-item:nth-child(13) { width: 26.53333vw; } .c-pokemon-characters-item:nth-child(14) { width: 18.26667vw; } .c-pokemon-characters-item:nth-child(15) { width: 18.93333vw; } .c-pokemon-characters-item:nth-child(16) { width: 19.2vw; } } .c-pokemon-image { margin-top: 22px; margin-bottom: 55px; } @media screen and (min-width: 768px) { .c-pokemon-image { margin-top: 93px; margin-bottom: 96px; } } .c-pokemon-flexImages { margin: 0; } @media screen and (min-width: 768px) { .c-pokemon-flexImages { margin: 0 9% 54px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .c-pokemon-flexImages-item { margin-bottom: 40px; } @media screen and (min-width: 768px) { .c-pokemon-flexImages-item { margin-bottom: 36px; width: 46%; } } @media screen and (max-width: 767px) { .c-pokemon-flexImages-item:not(:last-child) { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px #733f00 dotted; } .add-arrow .c-pokemon-flexImages-item:not(:last-child) { margin-bottom: 0; } } .c-pokemon-flexImages-item-caption { margin-top: 0; margin-bottom: 12px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ font-weight: 400; line-height: 2; } @media screen and (min-width: 768px) { .c-pokemon-flexImages-item-caption { margin-top: 11px; margin-bottom: 0; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .c-pokemon-flexImages-image { padding: 0 9%; } @media screen and (min-width: 768px) { .c-pokemon-flexImages-image { padding: 0; } } .c-pokemon-flexImages-title { margin-bottom: 12px; padding-bottom: 4px; background-image: url("../../t/images/pokemon/itemTitle-bg.png"); background-repeat: no-repeat; background-position: left bottom; background-size: contain; font-size: 0; } @media screen and (min-width: 768px) { .c-pokemon-flexImages-title { margin-bottom: 30px; } } .c-pokemon-flexImages-title img { height: 19px; } @media screen and (min-width: 768px) { .c-pokemon-flexImages-title img { height: auto; } } .c-pokemon-flexImages-flex { display: block; } @media screen and (min-width: 768px) { .c-pokemon-flexImages-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-pokemon-flexImages-flex .c-pokemon-flexImages-image { width: 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; font-size: 0; } .c-pokemon-flexImages-flex .c-pokemon-flexImages-item-caption { width: 100%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .c-pokemon-imagesLarge { margin: 0 auto 48px; padding: 0 9%; max-width: 560px; text-align: center; font-size: 0; } @media screen and (min-width: 768px) { .c-pokemon-imagesLarge { margin-bottom: 94px; padding: 0; } } .c-pokemon-imagesLarge-title { text-align: left; margin-bottom: 13px; font-size: 0; } .c-pokemon-imagesLarge-title img { height: 17px; } @media screen and (min-width: 768px) { .c-pokemon-imagesLarge-title img { width: auto; height: 22px; } } .c-pokemon-imagesLarge-text { margin-top: 10px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; letter-spacing: .05em; text-align: left; } @media screen and (min-width: 768px) { .c-pokemon-imagesLarge-text { margin-top: 8px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-pokemon-flexImagesSmall { margin: 0 9% 50px; } @media screen and (min-width: 768px) { .c-pokemon-flexImagesSmall { margin: 48px 9% 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .c-pokemon-flexImagesSmall-item { font-size: 0; } @media screen and (min-width: 768px) { .c-pokemon-flexImagesSmall-item { width: 32.2%; } } @media screen and (max-width: 767px) { .c-pokemon-flexImagesSmall-item:not(:last-child) { margin-bottom: 20px; } .add-arrow .c-pokemon-flexImagesSmall-item:not(:last-child) { margin-bottom: 0; } } .c-pokemon-flexImagesSmall-caption { margin-top: 5px; text-align: center; } @media screen and (min-width: 768px) { .c-pokemon-flexImagesSmall-caption { margin-top: 20px; margin-bottom: 35px; } } .c-pokemon-flexImagesSmall-caption img { height: 17px; } @media screen and (min-width: 768px) { .c-pokemon-flexImagesSmall-caption img { width: auto; height: 23px; } } .c-pokemon-flexImagesSmall-title { margin-bottom: 13px; font-size: 0; } .c-pokemon-flexImagesSmall-title img { height: 17px; } @media screen and (min-width: 768px) { .c-pokemon-flexImagesSmall-title img { width: auto; height: 22px; } } .c-pokemon-sectionTitle { position: relative; margin-bottom: 38px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .c-pokemon-sectionTitle { margin-bottom: 51px; } } .c-pokemon-sectionTitle img { width: 75.46667vw; } @media screen and (min-width: 768px) { .c-pokemon-sectionTitle img { width: auto; } } .c-pokemon-flexImagesSmallText { margin: 0 auto 30px; padding: 0 9% 25px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; letter-spacing: .05em; border-bottom: 1px #733f00 dotted; } @media screen and (min-width: 768px) { .c-pokemon-flexImagesSmallText { padding: 0 9%; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ letter-spacing: .04em; border: none; } } .c-pokemon-title1 img { width: 45.46667vw; } @media screen and (min-width: 768px) { .c-pokemon-title1 img { width: auto; } } .c-pokemon-title2 img { width: 56.4vw; } @media screen and (min-width: 768px) { .c-pokemon-title2 img { width: auto; } } .c-pokemon-title3 img { width: 75.86667vw; } @media screen and (min-width: 768px) { .c-pokemon-title3 img { width: auto; } } .c-pokemon-title4 img { width: 61.86667vw; } @media screen and (min-width: 768px) { .c-pokemon-title4 img { width: auto; } } .c-pokemon-title5 img { width: 52.13333vw; } @media screen and (min-width: 768px) { .c-pokemon-title5 img { width: 350px; } } .c-pokemon-dotted-style { margin-bottom: 28px; padding-bottom: 21px; border-bottom: 1px #733f00 dotted; } @media screen and (min-width: 768px) { .c-pokemon-dotted-style { margin-bottom: 36px; padding-bottom: 0; border: none; } } @media screen and (min-width: 768px) { .c-pokemon-legend-wrap { padding: 0 9%; } } .c-pokemon-legend-item { margin-bottom: 24px; } @media screen and (min-width: 768px) { .c-pokemon-legend-item { margin-bottom: 40px; } } .c-pokemon-legend-title { margin-bottom: 13px; font-size: 0; padding: 0 8vw; } @media screen and (min-width: 768px) { .c-pokemon-legend-title { padding: 0 0; } } .c-pokemon-legend-title img { height: 17px; } @media screen and (min-width: 768px) { .c-pokemon-legend-title img { width: auto; height: 22px; } } .c-pokemon-legend-titleBorder { margin-bottom: 24px; padding-bottom: 4px; } @media screen and (min-width: 768px) { .c-pokemon-legend-titleBorder { margin-bottom: 12px; } } .c-pokemon-legend-titleBorder span { display: block; background-image: url("../../t/images/pokemon/itemTitle-bg.png"); background-repeat: no-repeat; background-position: left bottom; background-size: contain; font-size: 0; } @media screen and (min-width: 768px) { .c-pokemon-legend-titleBorder span { padding-right: 50px; display: inline-block; } } @media screen and (min-width: 768px) { .c-pokemon-legend-titleBorder { margin-bottom: 30px; } } .c-pokemon-legend-titleBorder img { width: 47.46667vw; } @media screen and (min-width: 768px) { .c-pokemon-legend-titleBorder img { width: 316px; } } .c-pokemon-legend-images { padding: 0 8vw; } @media screen and (min-width: 768px) { .c-pokemon-legend-images { padding: 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .c-pokemon-legend-imagesItem { width: auto; } @media screen and (min-width: 768px) { .c-pokemon-legend-imagesItem { width: 47.7%; } } .c-pokemon-legend-imagesItemLarge { margin-bottom: 35px; padding-bottom: 35px; width: 100%; border-bottom: 1px #ba986f dotted; } @media screen and (min-width: 768px) { .c-pokemon-legend-imagesItemLarge { margin-bottom: 64px; padding-bottom: 64px; } } .c-pokemon-sectionTitle { position: relative; margin-bottom: 38px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .c-pokemon-sectionTitle { margin-bottom: 51px; } } .c-pokemon-sectionTitle img { width: 75.46667vw; } @media screen and (min-width: 768px) { .c-pokemon-sectionTitle img { width: auto; } } .c-howtoplay-switch { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; height: 24.7vw; max-height: 157px; padding: 4% 1% 8%; background-image: url("../../t/images/howtoplay/switch-bg-sp.png"); background-repeat: no-repeat; background-size: contain; background-position: center center; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .c-howtoplay-switch { padding: 1.5% 1.7% 5%; height: 14.54vw; background-image: url("../../t/images/howtoplay/switch-bg.png"); } } .c-howtoplay-switch.adventure { background-image: url("../../t/images/howtoplay/switch-bg-adventure-sp.png"); } @media screen and (min-width: 768px) { .c-howtoplay-switch.adventure { background-image: url("../../t/images/howtoplay/switch-bg-adventure.png"); } } .c-howtoplay-switch.rescue { background-image: url("../../t/images/howtoplay/switch-bg-rescue-sp.png"); } @media screen and (min-width: 768px) { .c-howtoplay-switch.rescue { background-image: url("../../t/images/howtoplay/switch-bg-rescue.png"); } } .c-howtoplay-switchItem { width: 32%; padding: 0 2vw; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .c-howtoplay-switchItem { width: 33%; padding-left: 16px; padding-right: 16px; } } .c-howtoplay-switchItem a, .c-howtoplay-switchItem span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) and (max-width: 1079px) { .c-howtoplay-switchItem .img_s1 { max-width: 16.2vw; } } @media screen and (max-width: 767px) { .c-howtoplay-switchItem .img_s1 { max-width: 23.33333vw; } } @media screen and (min-width: 768px) and (max-width: 1079px) { .c-howtoplay-switchItem .img_s2 { max-width: 20.9vw; } } @media screen and (max-width: 767px) { .c-howtoplay-switchItem .img_s2 { max-width: 23.33333vw; } } @media screen and (min-width: 768px) and (max-width: 1079px) { .c-howtoplay-switchItem .img_a1 { max-width: 25.6vw; } } @media screen and (max-width: 767px) { .c-howtoplay-switchItem .img_a1 { max-width: 31.2vw; } } @media screen and (min-width: 768px) and (max-width: 1079px) { .c-howtoplay-switchItem .img_a2 { max-width: 28vw; } } @media screen and (max-width: 767px) { .c-howtoplay-switchItem .img_a2 { max-width: 35.6vw; } } .c-howtoplay-switchB { margin-top: 27px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; height: 24.7vw; max-height: 157px; padding: 6% 1.4% 2%; background-image: url("../../t/images/howtoplay/switch-bg-bottom-sp.png"); background-repeat: no-repeat; background-size: contain; background-position: center center; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .c-howtoplay-switchB { height: 14.54vw; margin-top: 60px; padding: 4.8% 1.7% 1.5%; background-image: url("../../t/images/howtoplay/switch-bg-bottom.png"); } } .c-howtoplay-switchB.adventure { background-image: url("../../t/images/howtoplay/switch-bg-adventure-bottom-sp.png"); } @media screen and (min-width: 768px) { .c-howtoplay-switchB.adventure { background-image: url("../../t/images/howtoplay/switch-bg-adventure-bottom.png"); } } .c-howtoplay-switchB.rescue { background-image: url("../../t/images/howtoplay/switch-bg-rescue-bottom-sp.png"); } @media screen and (min-width: 768px) { .c-howtoplay-switchB.rescue { background-image: url("../../t/images/howtoplay/switch-bg-rescue-bottom.png"); } } .c-howtoplay-switchItemB { width: 32%; padding: 0 2vw; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .c-howtoplay-switchItemB { width: 33%; padding-left: 16px; padding-right: 16px; } } .c-howtoplay-switchItemB a, .c-howtoplay-switchItemB span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) and (max-width: 1079px) { .c-howtoplay-switchItemB .img_s1 { max-width: 15.6vw; } } @media screen and (max-width: 767px) { .c-howtoplay-switchItemB .img_s1 { max-width: 23.33333vw; } } @media screen and (min-width: 768px) and (max-width: 1079px) { .c-howtoplay-switchItemB .img_s2 { max-width: 20.9vw; } } @media screen and (max-width: 767px) { .c-howtoplay-switchItemB .img_s2 { max-width: 23.33333vw; } } @media screen and (min-width: 768px) and (max-width: 1079px) { .c-howtoplay-switchItemB .img_a1 { max-width: 25.6vw; } } @media screen and (max-width: 767px) { .c-howtoplay-switchItemB .img_a1 { max-width: 25.73333vw; } } @media screen and (min-width: 768px) and (max-width: 1079px) { .c-howtoplay-switchItemB .img_r1 { max-width: 25.6vw; } } @media screen and (max-width: 767px) { .c-howtoplay-switchItemB .img_r1 { max-width: 28vw; } } .c-howtoplay-switchText { margin-bottom: 10px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; letter-spacing: .05em; } @media screen and (min-width: 768px) { .c-howtoplay-switchText { margin-bottom: 22px; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-howtoplay-nav { margin-bottom: 38px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 768px) { .c-howtoplay-nav { margin-top: 18px; margin-bottom: 83px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } @media screen and (max-width: 767px) { .c-howtoplay-nav.item5 { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 767px) { .c-howtoplay-nav.item5 .c-howtoplay-navItem { width: 33%; } } .c-howtoplay-nav.itemFlex { -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .c-howtoplay-navItem { width: 48%; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-navItem { width: 270px; } } .c-howtoplay-content { margin: 30px 0 16px; border-top: 1px #5c3709 dotted; } @media screen and (min-width: 768px) { .c-howtoplay-content { margin: 53px 9% 40px; border-top-width: 2px; } } .c-howtoplay-contentItem { padding-top: 28px; padding-bottom: 34px; } .c-howtoplay-contentItem:not(:last-child) { border-bottom: 1px #5c3709 dotted; } @media screen and (min-width: 768px) { .c-howtoplay-contentItem { padding-top: 63px; padding-bottom: 55px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom-width: 2px; } } @media screen and (min-width: 768px) { .c-howtoplay-contentItem:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } @media screen and (min-width: 768px) { .c-howtoplay-contentItem-data { width: 48%; } } .c-howtoplay-contentItem-image { margin: auto; width: 80%; text-align: center; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-contentItem-image { width: 48%; } } .c-howtoplay-contentItem-title { margin-bottom: 18px; font-size: 0; } .c-howtoplay-contentItem-description { margin-bottom: 18px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } @media screen and (min-width: 768px) { .c-howtoplay-contentItem-description { margin-bottom: 0; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .c-howtoplay-contentItem-description a { color: #733f00; } .c-howtoplay-contentItem-image { font-size: 0; } .c-howtoplay-contentItem-caption { font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; font-weight: 400; text-align: left; } @media screen and (min-width: 768px) { .c-howtoplay-contentItem-caption { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.71; } } .c-howtoplay-contentItem-pdf { margin: 28px 0 4px; width: 100%; padding: 20px; background-color: #fff; border-radius: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .c-howtoplay-contentItem-pdf { margin: 35px 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .c-howtoplay-contentItem-pdfItem { margin: 0 0; font-size: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 767px) { .c-howtoplay-contentItem-pdfItem:not(:last-child) { margin-bottom: 20px; } } @media screen and (min-width: 768px) { .c-howtoplay-contentItem-pdfItem { margin: 0 30px; display: block; } } .c-howtoplay-contentItem-pdfItem a { display: inline-block; font-size: 0; background-color: #5c3709; border-radius: 8px; } .c-howtoplay-contentItem-pdfItem img { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (min-width: 768px) { .c-howtoplay-contentItem-pdfItem img { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } } .c-howtoplay-contentItem-pdfItem img:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .c-howtoplay-contentItem-pdfItem-text { font-size: 1.3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.53; text-align: center; } @media screen and (min-width: 768px) { .c-howtoplay-contentItem-pdfItem-text { font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.25; } } .c-howtoplay-friends { margin: 0 0 0; } @media screen and (min-width: 768px) { .c-howtoplay-friends { margin: 0 9% 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; background-image: url("../../t/images/howtoplay/image21.png"); background-repeat: no-repeat; background-position: bottom 113px right -56px; } } .c-howtoplay-friendsItem { position: relative; margin-bottom: 18px; padding: 25px 6% 34px; background-image: url("../../t/images/howtoplay/friends-bg-sp.png"); background-repeat: no-repeat; background-size: 100% 100%; -webkit-box-sizing: border-box; box-sizing: border-box; /*@include screen_l(){ &:nth-child(1){ &:after{ content: ""; position: absolute; right: 0; width: 235px; height: 157px; background-image: url('../../t/images/howtoplay/shape1.png'); background-size: cover; } } &:nth-child(4){ &:after{ content: ""; position: absolute; right: 20px; width: 167px; height: 136px; background-image: url('../../t/images/howtoplay/shape2.png'); background-size: cover; } } &:nth-child(7){ &:after{ content: ""; position: absolute; right: 20px; width: 146px; height: 115px; background-image: url('../../t/images/howtoplay/shape3.png'); background-size: cover; } } }*/ } @media screen and (min-width: 768px) { .c-howtoplay-friendsItem { width: 48.5%; margin-bottom: 60px; padding: 43px 5%; background-image: url("../../t/images/howtoplay/friends-bg-pc.png"); } } .c-howtoplay-friendsItem-title { margin-bottom: 14px; padding: 4px 0; background-color: #23782e; border: 2px #39a247 solid; border-radius: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (min-width: 768px) { .c-howtoplay-friendsItem-title { margin-bottom: 21px; padding: 8px 0; border: 4px #39a247 solid; } } .c-howtoplay-friendsItem-title img { width: auto; height: 18px; } @media screen and (min-width: 768px) { .c-howtoplay-friendsItem-title img { height: 25px; } } .c-howtoplay-friendsItem-image { margin-bottom: 10px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .c-howtoplay-friendsItem-image { margin-bottom: 12px; } } .c-howtoplay-friendsItem-image img { max-width: 90%; } @media screen and (min-width: 768px) { .c-howtoplay-friendsItem-image img { max-width: 100%; } } .c-howtoplay-friendsItem-description { font-size: 1.3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.77; } @media screen and (min-width: 768px) { .c-howtoplay-friendsItem-description { font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .c-howtoplay-content1 { margin: 18px 0 11px; border-top: 1px #5c3709 dotted; } @media screen and (min-width: 768px) { .c-howtoplay-content1 { margin: 46px 9% 32px; border-top-width: 2px; border-top-width: 3px; } } .c-howtoplay-adventureItem1 { padding-top: 28px; padding-bottom: 34px; } .c-howtoplay-adventureItem1:not(:last-child) { border-bottom: 1px #5c3709 dotted; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem1:not(:last-child) { border-bottom-width: 3px; } } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem1 { padding-top: 63px; padding-bottom: 55px; border-bottom-width: 2px; } } .c-howtoplay-adventureItem1-title { margin-bottom: 11px; padding-bottom: 3px; font-size: 0; background-image: url("../../t/images/howtoplay/item-title-bg.png"); background-repeat: no-repeat; background-position: bottom left; background-size: 100% auto; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem1-title { margin-bottom: 18px; background-size: auto auto; } } .c-howtoplay-adventureItem1-title img { height: 21px; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem1-title img { height: auto; } } .c-howtoplay-adventureItem1-description { margin-bottom: 13px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem1-description { margin-bottom: 24px; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .c-howtoplay-adventureItem1-images { padding: 0 8vw; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem1-images { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .c-howtoplay-adventureItem1-arrow { text-align: center; -ms-flex-item-align: center; align-self: center; } @media screen and (max-width: 767px) { .c-howtoplay-adventureItem1-arrow img { max-width: 40%; } } .c-howtoplay-adventureItem1-image { text-align: center; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem1-image { width: 48%; } } .c-howtoplay-content2 { margin: 20px 0 15px; border-top: 1px #5c3709 dotted; } @media screen and (min-width: 768px) { .c-howtoplay-content2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 53px 9% 50px; padding-top: 63px; border-top-width: 3px; } } .c-howtoplay-adventureItem2 { padding-top: 28px; padding-bottom: 34px; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem2 { padding-top: 0; padding-bottom: 42px; border-bottom-width: 2px; width: 46%; } } .c-howtoplay-adventureItem2-title { margin-bottom: 15px; padding-bottom: 3px; font-size: 0; background-image: url("../../t/images/howtoplay/item-title-bg.png"); background-repeat: no-repeat; background-position: bottom left; background-size: 100% auto; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem2-title { margin-bottom: 30px; background-size: auto auto; } } .c-howtoplay-adventureItem2-title img { height: 21px; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem2-title img { height: auto; } } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem2-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .c-howtoplay-adventureItem2-description { margin-bottom: 12px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem2-description { margin-bottom: 0; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .c-howtoplay-adventureItem2-image { margin-bottom: 0; padding: 0 8vw; text-align: center; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem2-image { margin-bottom: 20px; padding: 0; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .c-howtoplay-content3_1 { margin: 0px 0 16px; padding-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 768px) { .c-howtoplay-content3_1 { margin: 32px 9% 55px; } } .c-howtoplay-content3_1-icn { width: 37%; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-content3_1-icn { width: 37%; text-align: right; } } .c-howtoplay-content3_1-image { margin: 0; width: 63%; text-align: center; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-content3_1-image { margin: 0; padding: 7px 24px 0 0; width: 57.5%; -webkit-box-sizing: border-box; box-sizing: border-box; } } .c-howtoplay-content3_1-caption { width: 100%; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; font-weight: 400; text-align: left; } @media screen and (min-width: 768px) { .c-howtoplay-content3_1-caption { width: auto; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.71; } } .c-howtoplay-content3_2 { margin: 10px 0 16px; border-top: 1px #5c3709 dotted; } @media screen and (min-width: 768px) { .c-howtoplay-content3_2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 9% 53px; border-top-width: 3px; } } .c-howtoplay-content3_3 { margin: 60px 0 16px; padding-bottom: 34px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 768px) { .c-howtoplay-content3_3 { margin: 0 9% 100px; padding: 0; } } .c-howtoplay-content3_3-icn { width: 37%; } @media screen and (min-width: 768px) { .c-howtoplay-content3_3-icn { width: 37%; text-align: right; } } .c-howtoplay-content3_3-icn img { -webkit-transform: translate(5px, -34px) scale(1.15); -ms-transform: translate(5px, -34px) scale(1.15); transform: translate(5px, -34px) scale(1.15); } @media screen and (min-width: 768px) { .c-howtoplay-content3_3-icn img { -webkit-transform: translate(17px, 10px); -ms-transform: translate(17px, 10px); transform: translate(17px, 10px); } } .c-howtoplay-content3_3-image { margin: auto; width: 63%; text-align: center; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-content3_3-image { margin: 0; padding: 7px 48px 0 0; width: 57.5%; -webkit-box-sizing: border-box; box-sizing: border-box; } } .c-howtoplay-content3_3-caption { font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; font-weight: 400; text-align: left; } @media screen and (min-width: 768px) { .c-howtoplay-content3_3-caption { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.71; } } .c-howtoplay-adventureItem3_2 { padding-top: 20px; padding-bottom: 30px; border-bottom: 1px #5c3709 dotted; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem3_2 { padding-top: 63px; padding-bottom: 51px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom-width: 2px; } } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem3_2:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem3_2-data { width: 48%; } } .c-howtoplay-adventureItem3_2-image { margin: auto; width: 80%; text-align: center; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem3_2-image { margin: 0; width: 48%; } } .c-howtoplay-adventureItem3_2-title { margin-bottom: 18px; padding-bottom: 3px; font-size: 0; background-image: url("../../t/images/howtoplay/item-title-bg.png"); background-repeat: no-repeat; background-position: bottom left; background-size: 100% auto; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem3_2-title { background-size: auto auto; } } .c-howtoplay-adventureItem3_2-title img { height: 21px; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem3_2-title img { height: auto; } } .c-howtoplay-adventureItem3_2-description { margin-bottom: 14px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem3_2-description { margin-bottom: 0; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .c-howtoplay-adventureItem3_2-image { font-size: 0; } .c-howtoplay-content4 { margin: 24px 0 28px; border-top: 1px #5c3709 dotted; } @media screen and (min-width: 768px) { .c-howtoplay-content4 { margin: 50px 9% 40px; border-top-width: 3px; } } .c-howtoplay-adventureItem4 { padding-top: 28px; padding-bottom: 24px; border-bottom: 1px #5c3709 dotted; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem4 { border-bottom-width: 3px; } } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem4 { padding-top: 63px; padding-bottom: 40px; border-bottom-width: 2px; } } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem4-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem4-inner { width: 48%; } } .c-howtoplay-adventureItem4-image { padding: 0 8vw; text-align: center; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem4-image { padding: 0; } } .c-howtoplay-adventureItem4-title { margin-bottom: 18px; width: 100%; padding-bottom: 3px; font-size: 0; background-image: url("../../t/images/howtoplay/item-title-bg.png"); background-repeat: no-repeat; background-position: bottom left; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem4-title { background-size: auto auto; } } .c-howtoplay-adventureItem4-title img { height: 21px; } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem4-title img { height: auto; } } .c-howtoplay-adventureItem4-description { width: 100%; margin-bottom: 18px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } @media screen and (min-width: 768px) { .c-howtoplay-adventureItem4-description { margin-bottom: 0; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .c-howtoplay-adventureItem4-description + .c-howtoplay-adventureItem4-flex { margin-top: 25px; } .c-howtoplay-content5 { margin: 0 0 20px; } @media screen and (min-width: 768px) { .c-howtoplay-content5 { margin: 0 9% 0; } } .c-howtoplay-content5-map { margin-bottom: 10px; } .c-howtoplay-content5-characters { margin-bottom: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (min-width: 768px) { .c-howtoplay-content5-characters { margin-bottom: 21px; } } .c-howtoplay-content5-charactersItem { margin: 0 3vw; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-content5-charactersItem { margin: 0 22px; } } .c-howtoplay-content5-text { margin-bottom: 18px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; letter-spacing: .05em; } @media screen and (min-width: 768px) { .c-howtoplay-content5-text { margin-bottom: 42px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1; text-align: center; } } .c-howtoplay-content5-images { padding: 0 8vw; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-content5-images { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .c-howtoplay-content5-imagesItem { margin-bottom: 14px; } @media screen and (min-width: 768px) { .c-howtoplay-content5-imagesItem { margin-bottom: 0; width: calc(33.3% - 13.33px); } } .c-howtoplay-content6 { margin: 0 0 35px; } @media screen and (min-width: 768px) { .c-howtoplay-content6 { margin: 0 9% 100px; } } .c-howtoplay-content6-title { position: relative; margin-bottom: 23px; background-image: url("../../t/images/howtoplay/item-title-bg.png"); background-repeat: no-repeat; background-position: bottom left; } @media screen and (min-width: 768px) { .c-howtoplay-content6-title { margin-bottom: 30px; background-size: auto auto; background-image: url("../../t/images/howtoplay/item-title-bg-long.png"); } } .c-howtoplay-content6-title img { width: 56.8vw; } @media screen and (min-width: 768px) { .c-howtoplay-content6-title img { width: auto; } } .c-howtoplay-content6-description { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } @media screen and (min-width: 768px) { .c-howtoplay-content6-description { font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } @media screen and (min-width: 768px) { .c-howtoplay-content6-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .c-howtoplay-content6-flexItem { margin-top: 22px; padding: 0 8vw; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-content6-flexItem { margin-top: 30px; padding: 0; width: 48%; } } .c-howtoplay-content6-flexTitle { width: 100%; margin-top: 11px; margin-bottom: 30px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; } @media screen and (min-width: 768px) { .c-howtoplay-content6-flexTitle { margin-top: 20px; margin-bottom: 35px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ text-align: center; } } .c-howtoplay-content6-flexItemLarge { width: 100%; text-align: center; } .c-howtoplay-content6-flexItemLarge-inner { margin: auto; } @media screen and (min-width: 768px) { .c-howtoplay-content6-flexItemLarge-inner { width: 63.6%; } } .c-howtoplay-content6-flexItemLarge-image { padding: 0 8vw; } @media screen and (min-width: 768px) { .c-howtoplay-content6-flexItemLarge-image { padding: 0 0; } } .c-howtoplay-content6-flexItemLarge img { width: 100%; } .c-howtoplay-content6-flexItemLarge-title { font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; text-align: left; } @media screen and (min-width: 768px) { .c-howtoplay-content6-flexItemLarge-title { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-howtoplay-m1 { margin-top: 20px; margin-bottom: 26px; } @media screen and (min-width: 768px) { .c-howtoplay-m1 { margin-top: 0; margin-bottom: 50px; } } .c-howtoplay-m2 { margin-top: 20px; margin-bottom: 33px; } @media screen and (min-width: 768px) { .c-howtoplay-m2 { margin-top: 0; margin-bottom: 104px; } } .c-howtoplay-m3 { margin-bottom: 20px; } .c-howtoplay-s1 { max-width: 76%; } @media screen and (min-width: 768px) { .c-howtoplay-s1 { max-width: initial; } } .c-howtoplay-s2 { max-width: 93%; } @media screen and (min-width: 768px) { .c-howtoplay-s2 { max-width: initial; } } .c-howtoplay-s3 { max-width: 54%; } @media screen and (min-width: 768px) { .c-howtoplay-s3 { max-width: initial; } } .c-howtoplay-s4 { max-width: 67%; } @media screen and (min-width: 768px) { .c-howtoplay-s4 { max-width: initial; } } .c-howtoplay-s5 { max-width: 58%; } @media screen and (min-width: 768px) { .c-howtoplay-s5 { max-width: initial; } } .c-howtoplay-s6 { max-width: 63%; } @media screen and (min-width: 768px) { .c-howtoplay-s6 { max-width: initial; } } .c-howtoplay-s7 { max-width: 51%; } @media screen and (min-width: 768px) { .c-howtoplay-s7 { max-width: initial; } } .c-howtoplay-s8 { max-width: 49%; } @media screen and (min-width: 768px) { .c-howtoplay-s8 { max-width: initial; } } .c-howtoplay-s9 { max-width: 41.6%; } @media screen and (min-width: 768px) { .c-howtoplay-s9 { max-width: initial; } } .c-howtoplay-s10 { max-width: 63.6%; } @media screen and (min-width: 768px) { .c-howtoplay-s10 { max-width: initial; } } .c-howtoplay-s11 { max-width: 79.9%; } @media screen and (min-width: 768px) { .c-howtoplay-s11 { max-width: initial; } } .c-howtoplay-s12 { max-width: 59.5%; } @media screen and (min-width: 768px) { .c-howtoplay-s12 { max-width: initial; } } .c-howtoplay-s13 { max-width: 69.7%; } @media screen and (min-width: 768px) { .c-howtoplay-s13 { max-width: initial; } } @media screen and (min-width: 768px) { .c-howtoplay-rescue-wrap { margin: 0 9%; } } .c-howtoplay-rescue-intro { margin: 31px 0 43px; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-intro { margin: 40px 0 86px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media screen and (min-width: 768px) { .c-howtoplay-rescue-intro-item { width: 45.5%; } } .c-howtoplay-rescue-intro-item:not(:last-child) { margin-bottom: 33px; padding-bottom: 24px; border-bottom: 1px #ba986f dotted; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-intro-item:not(:last-child) { margin: 0; padding: 0; border-bottom: none; } } .c-howtoplay-rescue-intro-title { margin-bottom: 12px; background-image: url("../../t/images/howtoplay/item-title-bg.png"); background-repeat: no-repeat; background-position: bottom left; background-size: contain; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-intro-title { margin-bottom: 22px; background-size: auto auto; } } .c-howtoplay-rescue-intro-title img { height: 5.06667vw; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-intro-title img { height: 35px; } } .c-howtoplay-rescue-intro-description p { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; text-indent: -1em; padding-left: 1em; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-intro-description p { font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-howtoplay-rescue-intro-description p:before { content: "◎"; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-intro-description p + P { margin-top: 10px; } } .c-howtoplay-rescue-title { margin-top: 32px; margin-bottom: 38px; background-image: url("../../t/images/howtoplay/item-title-bg.png"); background-repeat: no-repeat; background-position: bottom left; background-size: contain; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-title { margin-top: 62px; margin-bottom: 50px; background-size: auto auto; background-image: url("../../t/images/howtoplay/item-title-bg-long.png"); } } @media screen and (min-width: 768px) { .c-howtoplay-rescue-title img { height: 29px; } } .c-howtoplay-rescue-subTitle { margin-bottom: 15px; padding: 0 8vw; font-size: 0; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-subTitle { margin-bottom: 30px; padding: 0; } } .c-howtoplay-rescue-subTitle img { height: 4.53333vw; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-subTitle img { height: 24px; } } .c-howtoplay-rescue-pageDescription { padding-bottom: 24px; border-bottom: 1px #ba986f dotted; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-pageDescription { padding-bottom: 0; border-bottom: none; } } .c-howtoplay-rescue-description { font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; text-indent: -1em; padding-left: 1em; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-description { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-howtoplay-rescue-flex { margin-bottom: 35px; padding: 0 8vw; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-flex { margin-bottom: 58px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0; } } @media screen and (min-width: 768px) { .c-howtoplay-rescue-flex-item { margin-bottom: 20px; width: 29.5%; } } .c-howtoplay-rescue-flex-item-image { font-size: 0; } .c-howtoplay-rescue-flex-item-text { margin-top: 6px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; text-indent: -1em; padding-left: 1em; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-flex-item-text { margin-top: 11px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-howtoplay-rescue-flex-arrow { margin-bottom: 10px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-flex-arrow { margin-bottom: 20px; padding-top: 6%; width: 3.8%; } } .c-howtoplay-rescue-flex-arrow img { width: 26.93333vw; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-flex-arrow img { width: auto; } } .c-howtoplay-rescue-flex-arrow + .c-howtoplay-rescue-flex-arrow { display: none; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-flex-arrow + .c-howtoplay-rescue-flex-arrow { display: block; } } .c-howtoplay-rescue-group { margin-bottom: 50px; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-group { margin-bottom: 80px; } } .c-howtoplay-rescue-group:not(:last-child) { margin-bottom: 30px; padding-bottom: 46px; border-bottom: 1px #733f00 dotted; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-group:not(:last-child) { margin-bottom: 97px; border-bottom-width: 3px; } } .c-howtoplay-rescue-noRequest { margin-top: 46px; padding: 9.6vw 5.3vw; background-image: url("../../t/images/howtoplay/rescue-noRequest-bg-sp.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-noRequest { margin-top: 80px; padding: 47px 47px 73px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-image: url("../../t/images/howtoplay/rescue-noRequest-bg.png"); } } .c-howtoplay-rescue-noRequest-data { margin-bottom: 15px; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-noRequest-data { margin-bottom: 0; width: 50.6%; } } .c-howtoplay-rescue-noRequest-image { padding: 0 3vw; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-noRequest-image { padding: 0; width: 42.5%; } } .c-howtoplay-rescue-noRequest-title { margin-bottom: 15px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-noRequest-title { margin-bottom: 16px; text-align: left; } } .c-howtoplay-rescue-noRequest-title img { height: 5.2vw; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-noRequest-title img { height: 29px; } } .c-howtoplay-rescue-noRequest-description { font-size: 1.3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.77; } @media screen and (min-width: 768px) { .c-howtoplay-rescue-noRequest-description { font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .c-mysterymail-m1 { margin-top: 22px; margin-bottom: 56px; } @media screen and (min-width: 768px) { .c-mysterymail-m1 { margin-top: 0; margin-bottom: 73px; } } .c-mysterymail-s1 { max-width: 76%; } @media screen and (min-width: 768px) { .c-mysterymail-s1 { max-width: initial; } } .c-mysterymail-passwordsTitle { margin-bottom: 18px; } @media screen and (min-width: 768px) { .c-mysterymail-passwordsTitle { margin-bottom: 30px; } } .c-mysterymail-passwordsTitle img { width: 82vw; } @media screen and (min-width: 768px) { .c-mysterymail-passwordsTitle img { width: 568px; } } .c-mysterymail-description { margin-bottom: 25px; font-size: 2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.6; text-align: center; font-weight: bold; } @media screen and (min-width: 768px) { .c-mysterymail-description { margin-bottom: 37px; font-size: 3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } @media screen and (min-width: 768px) { .c-mysterymail-passwords { margin: 0 9.7% 0; border-top: 3px #733f00 solid; border-bottom: 3px #733f00 solid; } } .c-mysterymail-passwords-item { margin-bottom: 29px; border-bottom: 3px #733f00 solid; /*&:nth-child(n+58){ }*/ } @media screen and (min-width: 768px) { .c-mysterymail-passwords-item { margin-bottom: 0; padding: 15px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom-width: 1px; } } .c-mysterymail-passwords-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 9px; color: #000000; font-size: 4.27vw; text-align: center; font-weight: bold; letter-spacing: .05em; } @media screen and (min-width: 768px) { .c-mysterymail-passwords-title { display: block; margin-bottom: 0; width: 32.2%; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ text-align: left; } } .c-mysterymail-passwords-title span { display: inline-block; margin-right: 10px; width: 18.4vw; font-size: 0; } @media screen and (min-width: 768px) { .c-mysterymail-passwords-title span { position: relative; display: block; margin-top: -28px; margin-right: 0; left: -18px; width: 70px; } } .c-mysterymail-passwords-password { padding: 5px 0; color: #000000; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ letter-spacing: .05em; font-weight: bold; border-top: 3px #733f00 solid; border-bottom: 1px #733f00 solid; } @media screen and (min-width: 768px) { .c-mysterymail-passwords-password { padding: 0; width: 27%; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ border-top: none; border-bottom: none; } } .c-mysterymail-passwords-password span { margin-right: 6px; display: inline-block; padding: 3px; color: #fff; font-size: 1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1; background-color: #343434; border-radius: 5px; } @media screen and (min-width: 768px) { .c-mysterymail-passwords-password span { margin-bottom: 13px; padding: 6px 3px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-mysterymail-passwords-description { padding: 14px 0; color: #000000; font-size: 1.3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.56; letter-spacing: .05em; } @media screen and (min-width: 768px) { .c-mysterymail-passwords-description { padding: 0; width: 40.8%; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .c-about-images { margin: 24px auto 0; width: 100%; position: relative; text-align: center; } @media screen and (min-width: 768px) { .c-about-images { margin: auto; width: 90%; } } .c-about-images-ab { position: absolute; top: 0; left: 0; } .c-about-images .images2 { z-index: 2; } .c-about-images img { width: 100%; } .c-about-overview { padding: 32px 0 0; background: none; } @media screen and (min-width: 768px) { .c-about-overview { padding: 55px 0 0; } } .c-about-overview .m-overview-content { background-image: url("../../t/images/about/overview-bg-h-sp-center.png"), url("../../t/images/about/overview-bg-h-sp-top.png"), url("../../t/images/about/overview-bg-h-sp-bottom.png"); background-repeat: no-repeat; background-position: top 10px center, top center,bottom center; background-size: 100% calc(100% - 25px), 100% 10px, 100% 15px; } @media screen and (max-width: 767px) { .c-about-overview .m-overview-content { margin-left: 0; margin-right: 0; padding: 28px 20px; } } @media screen and (min-width: 768px) { .c-about-overview .m-overview-content { /*background-image: url('../../t/images/about/overview-bg-h-pc-center.png'),url('../../t/images/about/overview-bg-h-pc-top.png'),url('../../t/images/about/overview-bg-h-pc-bottom.png'); background-repeat: repeat, no-repeat, no-repeat; background-position: top 30px center, top center, bottom center; background-size: 100% auto, 100% 30px, 100% 80px;*/ background-image: url("../../t/images/about/overview-bg-h-pc-center.png"), url("../../t/images/about/overview-bg-h-pc-top.png"), url("../../t/images/about/overview-bg-h-pc-bottom.png"); background-position: top 30px center, top center,bottom center; background-size: 100% calc(100% - 110px), 100% 30px, 100% 80px; } } .c-about-link { margin: auto; width: 180px; font-size: 0; text-align: center; margin-top: 40px; } @media screen and (min-width: 768px) { .c-about-link { width: 300px; } } .c-about-link a { display: inline-block; font-size: 0; background-color: #5c3709; border-radius: 8px; } .c-about-link img { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (min-width: 768px) { .c-about-link img { -webkit-transform: translateY(-9px); -ms-transform: translateY(-9px); transform: translateY(-9px); } } .c-about-link img:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } @media screen and (min-width: 768px) { .c-about-link { margin-top: 50px; } } .c-about-s1 { max-width: 88%; } @media screen and (min-width: 768px) { .c-about-s1 { max-width: initial; } } .c-news-content { margin-top: 40px; margin-bottom: 20px; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: auto; } @media screen and (min-width: 768px) { .c-news-content { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (min-width: 768px) and (max-width: 1079px) { .c-news-content { padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } } @media screen and (min-width: 768px) { .c-news-content { margin-top: 70px; margin-bottom: 20px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .c-news-contentItem { position: relative; margin-bottom: 23px; padding: 10px 0 0px; -webkit-filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); width: calc(50% - 10px); -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .c-news-contentItem { padding: 0; margin-bottom: 55px; margin-right: 30px; width: calc(33.3% - 20px); -webkit-filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1)); } .c-news-contentItem:nth-child(3n) { margin-right: 0; } } .c-news-contentItem.hide { display: none; } .c-news-contentItem-inner { position: relative; height: 100%; padding: 11px 0 0; background-repeat: no-repeat; background-size: cover; -webkit-transition: .2s 0s transform ease; -o-transition: .2s 0s transform ease; transition: .2s 0s transform ease; -webkit-box-sizing: border-box; box-sizing: border-box; background-image: url("../../t/images/news/item-bg-sp.png"); background-size: 100% 100%; /*&:before{ content: ""; position: absolute; top: 0; //left: -3%; //width: 106%; left: 0; width: 100%; height: 100%; z-index: -1; //transform: scale(1.1); @include screen_l() { } }*/ } @media screen and (min-width: 768px) { .c-news-contentItem-inner { min-height: initial; height: 100%; padding: 23px 0 0; background-image: url("../../t/images/news/item-bg-pc.png"); } } @media screen and (min-width: 768px) { .c-news-contentItem-inner:hover { -webkit-transform: translate(-10px, -10px); -ms-transform: translate(-10px, -10px); transform: translate(-10px, -10px); } } .c-news-contentItem-inner a { display: block; color: #5c3709; text-decoration: none; } .newItem .c-news-contentItem-inner:after { content: ""; position: absolute; top: -25px; left: 5px; width: 65px; height: 32px; background-image: url("../../t/images/new-icon.png"); background-repeat: no-repeat; background-size: contain; } @media screen and (min-width: 768px) { .newItem .c-news-contentItem-inner:after { top: -24px; left: 0; width: 82px; height: 44px; } } .c-news-contentItem-image { position: relative; font-size: 0; } .c-news-contentItem-image img { width: 100%; } .movieItem .c-news-contentItem-image:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 35px; height: 35px; margin: auto; background-image: url("../../t/images/play-icon.png"); background-size: contain; } @media screen and (min-width: 768px) { .movieItem .c-news-contentItem-image:before { width: 60px; height: 60px; } } .c-news-contentItem-data { padding: 16px 8px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; } @media screen and (min-width: 768px) { .c-news-contentItem-data { padding: 8px 20px 43px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .targetBrabk .c-news-contentItem-title span { padding-right: 10px; background-image: url("../../t/images/news/target-icon.png"); background-repeat: no-repeat; background-position: right center; background-size: 9px auto; } @media screen and (min-width: 768px) { .targetBrabk .c-news-contentItem-title span { padding-right: 20px; background-size: auto auto; } } .c-news-link { margin: auto; width: 180px; font-size: 0; text-align: center; } @media screen and (min-width: 768px) { .c-news-link { width: 300px; } } .c-news-link a { display: inline-block; font-size: 0; background-color: #5c3709; border-radius: 8px; } .c-news-link img { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (min-width: 768px) { .c-news-link img { -webkit-transform: translateY(-9px); -ms-transform: translateY(-9px); transform: translateY(-9px); } } .c-news-link img:hover { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } @media screen and (min-width: 768px) { .news-detail { margin: 0 9% 35px; } } .news-detail-subTitle { font-size: 2.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; font-weight: 700; } @media screen and (min-width: 768px) { .news-detail-subTitle { font-size: 2.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } } .news-detail-description { margin-bottom: 26px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } @media screen and (min-width: 768px) { .news-detail-description { margin-bottom: 35px; font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .news-detail-description .small-text { font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ font-weight: 400; } @media screen and (min-width: 768px) { .news-detail-description .small-text { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .news-detail-description .bold-text { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ font-weight: 700; } @media screen and (min-width: 768px) { .news-detail-description .bold-text { font-size: 2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .news-detail-description a { color: #5c3709; overflow-wrap: break-word; } .news-detail-image { margin-bottom: 39px; } @media screen and (min-width: 768px) { .news-detail-image { margin-bottom: 78px; } } .news-detail-flex { margin-bottom: 39px; font-size: 0; } @media screen and (min-width: 768px) { .news-detail-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 78px; } } .news-detail-flex-item { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } @media screen and (min-width: 768px) { .news-detail-flex-item { font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .news-detail-flex-item:nth-child(2) { text-align: center; margin: 20px 0; } @media screen and (min-width: 768px) { .news-detail-flex-item:nth-child(2) { margin: 0 0 0 20px; } } .news-detail-flex a { color: #5c3709; overflow-wrap: break-word; } .c-icon-title img { max-width: 86.4vw; } @media screen and (min-width: 768px) { .c-icon-title img { max-width: 100%; } } .c-icon-characters { margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 768px) { .c-icon-characters { padding: 0px 9%; } } .c-icon-characters-item { margin-bottom: 30px; width: 37.33333vw; padding: 0 2.66667vw; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .c-icon-characters-item { margin-bottom: 60px; padding: 0 5px; width: calc(25% - 30px); } } .c-icon-characters-image { margin-bottom: 15px; font-size: 0; } @media screen and (min-width: 768px) { .c-icon-characters-image { margin-bottom: 20px; } } .c-icon-characters-download { background-color: #5c3709; border-radius: 5px; font-size: 0; } @media screen and (min-width: 768px) { .c-icon-characters-download { border-radius: 10px; } } .c-icon-characters-download a { display: block; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } @media screen and (min-width: 768px) { .c-icon-characters-download a:hover { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .c-jukebox { padding-bottom: 14vw; background-image: url("../../common/images/page-bg-bottom-sp.png"), url("../../common/images/page-bg-sp.png"); background-repeat: repeat-x, repeat; background-position: center bottom,center top; background-size: 100% 200px,cover; } @media screen and (min-width: 768px) { .c-jukebox { padding-bottom: 109px; background-image: url("../../common/images/page-bg-bottom-pc.png"), url("../../common/images/page-bg-pc.png"); background-repeat: no-repeat, repeat; background-size: 100% 470px,cover; } } .c-jukebox-player { width: 1px; height: 1px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: -1; } .c-jukebox-inner { width: auto; } @media screen and (min-width: 768px) { .c-jukebox-inner { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } .c-jukebox-head { position: relative; margin-bottom: 15px; width: 100%; min-height: 56vw; } @media screen and (max-width: 1079px) { .c-jukebox-head { min-height: 110vw; } } .c-jukebox-head-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-image: url("../../t/images/jukebox/header-bg-sp.png"); background-size: 100% auto; background-position: top center; /*img{ width: 100%; height: 100%; object-fit: cover; }*/ } @media screen and (min-width: 1079px) { .c-jukebox-head-bg { background-image: url("../../t/images/jukebox/header-bg.png"); background-position: center center; background-size: cover; } } .c-jukebox-head-content { position: relative; padding-top: 35vw; z-index: 2; } @media screen and (min-width: 1079px) { .c-jukebox-head-content { padding-top: 19vw; } } .c-jukebox-head-title { width: 100%; margin-bottom: 16vw; } @media screen and (min-width: 768px) { .c-jukebox-head-title { margin-bottom: 92px; } } .c-jukebox-head-title-main { text-align: center; font-size: 0; } .c-jukebox-head-title-main img { width: 65vw; } @media screen and (min-width: 768px) { .c-jukebox-head-title-main img { width: 37vw; } } .c-jukebox-head-title-logo { text-align: center; } .c-jukebox-head-title-logo img { width: 56.13333vw; } @media screen and (min-width: 768px) { .c-jukebox-head-title-logo img { width: auto; } } .c-jukebox-head-description { margin: 0 8vw; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2; } @media screen and (min-width: 768px) { .c-jukebox-head-description { font-size: 1.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.67; text-align: center; } } .c-jukebox-content { padding-left: 8vw; padding-right: 8vw; } @media screen and (min-width: 768px) { .c-jukebox-content { padding: 0; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .c-jukebox-content { padding-left: 20px; padding-right: 20px; } } .c-jukebox-playlist { margin-bottom: 6.5vw; padding: 6vw 1vw; position: relative; background-image: url("../../t/images/jukebox/playlist-bg-sp.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; } @media screen and (min-width: 768px) { .c-jukebox-playlist { margin-bottom: 52px; padding: 55px; background-image: url("../../t/images/jukebox/playlist-bg.png"); background-position: center center; } } .c-jukebox-playlist-title { position: relative; z-index: 2; text-align: center; } @media screen and (min-width: 768px) { .c-jukebox-playlist-title { text-align: left; margin-bottom: 12px; } } .c-jukebox-playlist-title img { width: 51.46667vw; } @media screen and (min-width: 768px) { .c-jukebox-playlist-title img { width: 354px; } } .c-jukebox-playlist-bg { margin-top: -13vw; } @media screen and (min-width: 768px) { .c-jukebox-playlist-bg { margin-top: 0; position: absolute; width: 100%; left: 0; top: 0; } } .c-jukebox-playlist-listWrap { position: relative; margin-top: -5vw; z-index: 2; } @media screen and (min-width: 768px) { .c-jukebox-playlist-listWrap { margin-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .c-jukebox-playlist-list { background-repeat: no-repeat; background-position: top center; background-size: 100% auto; } .c-jukebox-playlist-list:nth-child(1) { background-image: url("../../t/images/jukebox/playlist-title-bg.png"); } @media screen and (min-width: 768px) { .c-jukebox-playlist-list:nth-child(2) { background-image: url("../../t/images/jukebox/playlist-title-bg.png"); } } @media screen and (min-width: 768px) { .c-jukebox-playlist-list { width: 49.7%; } } .c-jukebox-playlist-listItem { background-image: url("../../t/images/jukebox/playlist-title-bg.png"); background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; } .c-jukebox-playlist-listItem a { padding: 11px 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0; text-decoration: none; color: #733f00; display: none; } @media screen and (min-width: 768px) { .c-jukebox-playlist-listItem a { padding: 16px 15px; } } .c-jukebox-playlist-listItem:hover .c-jukebox-playlist-listItem-icn { background-image: url("../../t/images/jukebox/play-btn-on.png"); } .c-jukebox-playlist-listItem .play .c-jukebox-playlist-listItem-icn { background-image: url("../../t/images/jukebox/pause-btn.png"); } .c-jukebox-playlist-listItem .svg svg { display: block; } .c-jukebox-playlist-listItem span { display: block; } .c-jukebox-playlist-listItem-icn { margin-right: 8px; width: 22px; background-image: url("../../t/images/jukebox/play-btn.png"); background-repeat: no-repeat; background-position: center center; background-size: 20px auto; width: 30px; height: 30px; } @media screen and (min-width: 768px) { .c-jukebox-playlist-listItem-icn { margin-right: 10px; width: 58px; height: 58px; background-size: auto auto; } } .c-jukebox-playlist-listItem-icn svg { display: none; fill: transparent; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); width: 30px; height: 30px; } @media screen and (min-width: 768px) { .c-jukebox-playlist-listItem-icn svg { width: 58px; height: 58px; } } .c-jukebox-playlist-listItem-icn svg circle { cx: 15; cy: 15; r: 13; stroke-width: 2; } @media screen and (min-width: 768px) { .c-jukebox-playlist-listItem-icn svg circle { cx: 29; cy: 29; r: 27; stroke-width: 4; } } .c-jukebox-playlist-listItem-icn svg .progress-bg { stroke: #dad5d1; } .c-jukebox-playlist-listItem-icn svg .progress { stroke: #ff0000; } .c-jukebox-playlist-listItem-text { font-size: 1.3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.27; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (min-width: 768px) { .c-jukebox-playlist-listItem-text { font-size: 2.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } @media screen and (min-width: 768px) and (max-width: 1024px) { .c-jukebox-playlist-listItem-text { font-size: 1.6vw; } } .c-jukebox-text { text-align: center; } .c-jukebox-text img { width: 65vw; } @media screen and (min-width: 768px) { .c-jukebox-text img { width: auto; } } html { font: 62.5%/2 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Osaka,sans-serif; color: #733f00; -webkit-text-size-adjust: 100%; } .outline { overflow: hidden; } body { font-size: 1.3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ font-family: 'Noto Sans JP', sans-serif; font-weight: 500; } @media screen and (min-width: 768px) { body { font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .container { overflow: hidden; } [v-cloak] { display: none; } .fade-enter-active, .fade-leave-active { -webkit-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; }