@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Noto+Serif+JP:400,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; } ``` */ ._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 背景色が単色の場合のみ使えます。 ``` */ /* @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; } } html.ie, html.edge { height: 100% !important; overflow: auto !important; } html.ie body, html.edge body { height: 100% !important; overflow: auto !important; } [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; } a:hover { -webkit-transition: .3s opacity ease-out; -o-transition: .3s opacity ease-out; transition: .3s opacity ease-out; opacity: .7; } .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; } .top-content { position: relative; } .m-contentWrap { background-color: #fff; background-image: url("../../t/images/top-bg-sp.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom; overflow: hidden; } @media screen and (min-width: 768px) { .m-contentWrap { background-image: url("../../t/images/top-bg-pc.png"); } } .page-content { position: relative; background-image: url("../../t/images/page-bg-sp.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; overflow: hidden; } @media screen and (min-width: 768px) { .page-content { background-image: url("../../t/images/page-bg-pc.png"); } } .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-logo { position: absolute; top: 6px; left: 14px; width: 115px; font-size: 0; z-index: 10; } @media screen and (min-width: 768px) { .m-logo { top: 2px; left: 0; width: 200px; } } .m-top { position: relative; padding-bottom: 28px; padding-top: 90px; z-index: 3; } @media screen and (min-width: 768px) { .m-top { padding-bottom: 65px; padding-top: 116px; } } .m-top-outer { background: -webkit-gradient(linear, left bottom, left top, from(white), color-stop(10%, white), to(rgba(255, 255, 255, 0))); background: -o-linear-gradient(bottom, white 0%, white 10%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(0deg, white 0%, white 10%, rgba(255, 255, 255, 0) 100%); background-repeat: no-repeat; background-size: 100% 300px; background-position: center bottom; } .m-top-inner { margin: auto; max-width: 780px; } @media screen and (max-width: 767px) { .m-top-inner { padding-left: 5.33%; padding-right: 5.33%; } } .m-top-movie { margin-bottom: 25px; font-size: 0; text-align: center; background-color: #fff; } @media screen and (min-width: 768px) { .m-top-movie { margin-bottom: 30px; } } .m-top-movie a { position: relative; display: block; } .m-top-movie a:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 48px; height: 48px; margin: auto; background-image: url("../../t/images/movie-play.png"); background-repeat: no-repeat; background-size: contain; } @media screen and (min-width: 768px) { .m-top-movie a:after { width: 96px; height: 96px; } } .m-top-grid { display: grid; display: -ms-grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto auto auto; -ms-grid-rows: auto; width: 100%; } @media screen and (min-width: 768px) { .m-top-grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto auto; -ms-grid-rows: auto; } } .m-top-grid-item { margin: 0 5px 8px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; border: 2px #2aaeea solid; -webkit-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } @media screen and (min-width: 768px) { .m-top-grid-item { margin: 0 5px 8px; } } @media screen and (max-width: 479px) { .m-top-grid-item { margin: 0 2px 8px; } } .m-top-grid-item a, .m-top-grid-item span { padding: 9px 0; 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; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; color: #2aaeea; font-weight: 700; text-align: center; text-decoration: none; -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; } @media screen and (min-width: 768px) { .m-top-grid-item a, .m-top-grid-item span { padding: 2px 0; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.25; } } .m-top-grid-item:hover { background-color: #2aaeea; border-color: #2aaeea; } .m-top-grid-item:hover a { color: #fff; opacity: 1; } .m-top-grid-item.none { background-color: rgba(30, 30, 30, 0.7); border: none; } .m-top-grid-item.none a, .m-top-grid-item.none span { color: #fff; } .m-top-grid-item .flex_txt { 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; width: 100%; height: 100%; } @media screen and (min-width: 768px) { .m-top-grid-item .flex_txt { padding: 2px 0; -webkit-box-sizing: border-box; box-sizing: border-box; } } .m-top-grid-item .flex_txt .large { padding: 0 0 0; line-height: 1; } @media screen and (min-width: 768px) { .m-top-grid-item .flex_txt .large { font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1; } } .m-top-grid-item .flex_txt .small { padding: 4px 0 0; font-size: 1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1; } @media screen and (min-width: 768px) { .m-top-grid-item .flex_txt .small { padding: 5px 0 0; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .m-top-grid-item.item1 { grid-column: 2/4; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-row: 1; -ms-grid-row: 1; } @media screen and (min-width: 768px) { .m-top-grid-item.item1 { grid-column: 1/3; -ms-grid-column: 1; -ms-grid-column-span: 2; } } .m-top-grid-item.item2 { grid-column: 4/6; -ms-grid-column: 4; -ms-grid-column-span: 2; grid-row: 1; -ms-grid-row: 1; } @media screen and (min-width: 768px) { .m-top-grid-item.item2 { grid-column: 3/5; -ms-grid-column: 3; -ms-grid-column-span: 2; } } .m-top-grid-item.item3 { grid-column: 1/3; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-row: 2; -ms-grid-row: 2; } @media screen and (min-width: 768px) { .m-top-grid-item.item3 { grid-column: 5/7; -ms-grid-column: 5; -ms-grid-column-span: 2; grid-row: 1; -ms-grid-row: 1; } } .m-top-grid-item.item4 { grid-column: 3/5; -ms-grid-column: 3; -ms-grid-column-span: 2; grid-row: 2; -ms-grid-row: 2; } @media screen and (min-width: 768px) { .m-top-grid-item.item4 { grid-column: 7/9; -ms-grid-column: 7; -ms-grid-column-span: 2; grid-row: 1; -ms-grid-row: 1; } } .m-top-grid-item.item5 { grid-column: 5/7; -ms-grid-column: 5; -ms-grid-column-span: 2; grid-row: 2; -ms-grid-row: 2; } @media screen and (min-width: 768px) { .m-top-grid-item.item5 { grid-column: 1/3; -ms-grid-column: 1; -ms-grid-column-span: 2; } } .m-top-grid-item.item6 { grid-column: 1/3; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-row: 3; -ms-grid-row: 3; } @media screen and (min-width: 768px) { .m-top-grid-item.item6 { grid-column: 3/5; -ms-grid-column: 3; -ms-grid-column-span: 2; grid-row: 2; -ms-grid-row: 2; } } .m-top-grid-item.item7 { grid-column: 3/5; -ms-grid-column: 4; -ms-grid-column-span: 2; grid-row: 3; -ms-grid-row: 3; } @media screen and (min-width: 768px) { .m-top-grid-item.item7 { grid-column: 5/7; -ms-grid-column: 5; -ms-grid-column-span: 2; grid-row: 2; -ms-grid-row: 2; } } .m-top-grid-item.item8 { grid-column: 5/7; -ms-grid-column: 4; -ms-grid-column-span: 2; grid-row: 3; -ms-grid-row: 3; } @media screen and (min-width: 768px) { .m-top-grid-item.item8 { grid-column: 7/9; -ms-grid-column: 7; -ms-grid-column-span: 2; grid-row: 2; -ms-grid-row: 2; } } .m-slider { position: relative; margin-bottom: 25px; font-size: 0; text-align: center; /*&-arrows{ position: absolute; top: 0; left: 0; margin: auto; width: 100%; height: 100%; z-index: 2; @include screen_l() { } }*/ } @media screen and (min-width: 768px) { .m-slider { margin-bottom: 30px; padding: 0; } } .m-slider-item { padding: 0 9.8vw; display: none; -ms-filter: blur(6px); -webkit-filter: blur(6px); filter: blur(6px); -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); -webkit-transition: -webkit-filter 0.3s ease,-webkit-transform 0.3s ease; transition: -webkit-filter 0.3s ease,-webkit-transform 0.3s ease; -o-transition: filter 0.3s ease,transform 0.3s ease; transition: filter 0.3s ease,transform 0.3s ease; transition: filter 0.3s ease,transform 0.3s ease,-webkit-filter 0.3s ease,-webkit-transform 0.3s ease; } @media screen and (min-width: 768px) { .m-slider-item { padding: 0; width: 769px; } } @media all and (min-width: 768px) and (max-width: 900px) { .m-slider-item { padding: 0; width: calc(100vw - 102px); } } .m-slider-item a { position: relative; display: block; pointer-events: none; /*&:hover{ opacity: 1; &:after{ opacity: 0.8; } }*/ } .m-slider-item a:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 48px; height: 48px; margin: auto; background-image: url("../../t/images/movie-play.png"); background-repeat: no-repeat; background-size: contain; -webkit-transition: .3s opacity ease-out; -o-transition: .3s opacity ease-out; transition: .3s opacity ease-out; } @media screen and (min-width: 768px) { .m-slider-item a:after { width: 96px; height: 96px; } } .m-slider-item.slick-initialized { display: block; } .m-slider .slick-current, .m-slider .is-active-next { -ms-filter: blur(0); -webkit-filter: blur(0); filter: blur(0); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-filter 0.3s ease,-webkit-transform 0.3s ease; transition: -webkit-filter 0.3s ease,-webkit-transform 0.3s ease; -o-transition: filter 0.3s ease,transform 0.3s ease; transition: filter 0.3s ease,transform 0.3s ease; transition: filter 0.3s ease,transform 0.3s ease,-webkit-filter 0.3s ease,-webkit-transform 0.3s ease; } @media screen and (min-width: 768px) { .m-slider .slick-current { background-color: #fff; } } .m-slider .slick-current a { pointer-events: auto; } @media screen and (max-width: 767px) { .m-slider .slick-current a:hover { opacity: 1; } } .m-slider-slideBtn { position: absolute; top: calc(50% - 12px); width: 21px; height: 42px; background-repeat: no-repeat; background-size: contain; z-index: 2; cursor: pointer; -webkit-transition: .3s opacity ease-out; -o-transition: .3s opacity ease-out; transition: .3s opacity ease-out; } @media screen and (min-width: 768px) { .m-slider-slideBtn { top: calc(50% - 41px); width: 51px; height: 82px; margin: auto; } } .m-slider-slideBtn:hover { opacity: 0.6; } .m-slider-slideBtn.prev-btn { left: calc((9.8vw / 2) - 10px); background-image: url("../../t/images/slide-prev-sp.png"); } @media screen and (min-width: 768px) { .m-slider-slideBtn.prev-btn { left: 0; right: 0; -webkit-transform: translateX(-425px); -ms-transform: translateX(-425px); transform: translateX(-425px); background-image: url("../../t/images/slide-prev.png"); } } @media all and (min-width: 768px) and (max-width: 900px) { .m-slider-slideBtn.prev-btn { right: auto; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .m-slider-slideBtn.next-btn { right: calc((9.8vw / 2) - 10px); background-image: url("../../t/images/slide-next-sp.png"); } @media screen and (min-width: 768px) { .m-slider-slideBtn.next-btn { left: 0; right: 0; -webkit-transform: translateX(425px); -ms-transform: translateX(425px); transform: translateX(425px); background-image: url("../../t/images/slide-next.png"); } } @media all and (min-width: 768px) and (max-width: 900px) { .m-slider-slideBtn.next-btn { left: auto; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .m-description { position: relative; padding-bottom: 52px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.83; letter-spacing: .2em; text-align: center; background-color: #fff; z-index: 2; /*&:before{ content: ""; position: absolute; top: -300px; left:0; width: 100%; height:300px; z-index: -1; //background-color: red; //background: rgb(2,0,36); background: linear-gradient(0deg, rgba(#fff,1) 0%,rgba(#fff,1) 10%, rgba(#fff,0) 100%); }*/ } @media screen and (min-width: 768px) { .m-description { padding-bottom: 90px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.25; } } .page-story { position: relative; padding-top: 87px; width: auto; } @media screen and (max-width: 767px) { .page-story { margin-left: 5.33%; margin-right: 5.33%; } } @media screen and (min-width: 768px) { .page-story { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (min-width: 768px) { .page-story { padding-top: 135px; padding-bottom: 35px; } } .page-story-wrap { position: relative; } @media screen and (min-width: 768px) { .page-story-inner { margin: auto; width: 780px; } } .page-story-title { margin-bottom: 38px; text-align: center; } @media screen and (min-width: 768px) { .page-story-title { margin: 0 auto 58px; width: 381px; } } .page-story-title-jp { margin-bottom: 6px; font-size: 0; } @media screen and (min-width: 768px) { .page-story-title-jp { margin-bottom: 19px; } } .page-story-title-jp img { width: 130px; } @media screen and (min-width: 768px) { .page-story-title-jp img { width: 241px; } } .page-story-title-en { margin: 0 auto; position: relative; font-size: 0; width: 54vw; } @media screen and (min-width: 768px) { .page-story-title-en { width: auto; } } .page-story-title-en-inner { padding: 0 9px; position: relative; display: inline-block; z-index: 2; } @media screen and (min-width: 768px) { .page-story-title-en-inner { padding: 0 15px; } } .page-story-title-en-inner img { width: 74px; } @media screen and (min-width: 768px) { .page-story-title-en-inner img { width: 111px; } } .page-story-title-en-bLeft, .page-story-title-en-bRight { position: absolute; top: 0; height: 100%; width: calc(50% - 43px); } @media screen and (min-width: 768px) { .page-story-title-en-bLeft, .page-story-title-en-bRight { width: calc(50% - 70px); } } .page-story-title-en-bLeft:before, .page-story-title-en-bLeft:after, .page-story-title-en-bRight:before, .page-story-title-en-bRight:after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background-color: #000; } .page-story-title-en-bLeft:before, .page-story-title-en-bRight:before { top: 28%; } .page-story-title-en-bLeft:after, .page-story-title-en-bRight:after { top: 60%; } .page-story-title-en-bLeft { left: 0; } .page-story-title-en-bRight { right: 0; } .page-story-thumbnail { margin-bottom: 34px; } @media screen and (min-width: 768px) { .page-story-thumbnail { margin-bottom: 63px; } } .page-story-subTitle { margin-bottom: 16px; text-align: center; font-size: 0; } @media screen and (min-width: 768px) { .page-story-subTitle { margin-bottom: 34px; } } .page-story-subTitle img { width: 244px; } @media screen and (min-width: 768px) { .page-story-subTitle img { width: 390px; } } .page-story-description { margin-bottom: 56px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ text-align: center; line-height: 1.83; letter-spacing: .1em; } @media screen and (min-width: 768px) { .page-story-description { margin-bottom: 60px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.25; letter-spacing: .1em; } } .page-story-link { text-align: center; } .page-story-link img { max-width: 210px; } @media screen and (min-width: 768px) { .page-story-link img { max-width: 260px; } } .m-story { padding-top: 66px; padding-bottom: 60px; background-image: url("../../t/images/story-bg-sp.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; } @media screen and (max-width: 767px) { .m-story { padding-left: 5.33%; padding-right: 5.33%; } } @media screen and (min-width: 768px) { .m-story { padding-top: 150px; padding-bottom: 134px; background-image: url("../../t/images/story-bg-pc.png"); } } @media screen and (min-width: 768px) { .m-story-inner { margin: auto; width: 390px; } } .m-story-title { margin-bottom: 38px; text-align: center; } @media screen and (min-width: 768px) { .m-story-title { margin-bottom: 26px; } } .m-story-title-jp { margin-bottom: 6px; font-size: 0; } @media screen and (min-width: 768px) { .m-story-title-jp { margin-bottom: 13px; } } .m-story-title-jp img { width: 108px; } @media screen and (min-width: 768px) { .m-story-title-jp img { width: 171px; } } .m-story-title-en { margin: 0 auto; position: relative; font-size: 0; width: 54vw; } @media screen and (min-width: 768px) { .m-story-title-en { margin-top: 4px; width: auto; } } .m-story-title-en-inner { padding: 0 9px; position: relative; display: inline-block; z-index: 2; } @media screen and (min-width: 768px) { .m-story-title-en-inner { padding: 0 22px; } } .m-story-title-en-inner img { width: 58px; } @media screen and (min-width: 768px) { .m-story-title-en-inner img { width: 77px; } } .m-story-title-en-bLeft, .m-story-title-en-bRight { position: absolute; top: 0; height: 100%; width: calc(50% - 38px); } @media screen and (min-width: 768px) { .m-story-title-en-bLeft, .m-story-title-en-bRight { width: calc(50% - 61px); } } .m-story-title-en-bLeft:before, .m-story-title-en-bLeft:after, .m-story-title-en-bRight:before, .m-story-title-en-bRight:after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background-color: #000; } .m-story-title-en-bLeft:before, .m-story-title-en-bRight:before { top: 28%; } .m-story-title-en-bLeft:after, .m-story-title-en-bRight:after { top: 60%; } .m-story-title-en-bLeft { left: 0; } .m-story-title-en-bRight { right: 0; } .m-story-subTitle { margin-bottom: 5px; text-align: center; font-size: 0; } @media screen and (min-width: 768px) { .m-story-subTitle { margin-bottom: 18px; } } .m-story-subTitle img { width: 244px; } @media screen and (min-width: 768px) { .m-story-subTitle img { width: 390px; } } .m-story-description { margin-bottom: 42px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ text-align: center; line-height: 1.83; letter-spacing: .2em; } @media screen and (min-width: 768px) { .m-story-description { margin-bottom: 31px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.25; letter-spacing: .1em; } } .m-story-link { text-align: center; } .m-story-link img { max-width: 210px; } @media screen and (min-width: 768px) { .m-story-link img { max-width: 260px; } } .m-cara_cast-inner { width: auto; margin-bottom: 40px; padding-top: 51px; } @media screen and (min-width: 768px) { .m-cara_cast-inner { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (max-width: 767px) { .m-cara_cast-inner { margin-left: 5.33%; margin-right: 5.33%; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .m-cara_cast-inner { margin-left: 20px; margin-right: 20px; width: auto; } } @media screen and (min-width: 768px) { .m-cara_cast-inner { margin-bottom: 117px; padding-top: 124px; } } .m-cara_cast-title { margin-bottom: 30px; text-align: center; } @media screen and (min-width: 768px) { .m-cara_cast-title { margin-bottom: 43px; margin-left: auto; margin-right: auto; width: 390px; } } .m-cara_cast-title-jp { margin-bottom: 6px; font-size: 0; } @media screen and (min-width: 768px) { .m-cara_cast-title-jp { margin-bottom: 14px; } } .m-cara_cast-title-jp img { width: 225px; } @media screen and (min-width: 768px) { .m-cara_cast-title-jp img { width: 355px; } } .m-cara_cast-title-en { margin: 0 auto; position: relative; font-size: 0; width: 60vw; } @media screen and (min-width: 768px) { .m-cara_cast-title-en { margin-top: 4px; width: auto; } } .m-cara_cast-title-en-inner { padding: 0 8px; position: relative; display: inline-block; z-index: 2; } @media screen and (min-width: 768px) { .m-cara_cast-title-en-inner { padding: 0 20px; } } .m-cara_cast-title-en-inner img { width: 170px; } @media screen and (min-width: 768px) { .m-cara_cast-title-en-inner img { width: 242px; } } .m-cara_cast-title-en-bLeft, .m-cara_cast-title-en-bRight { position: absolute; top: 0; height: 100%; width: calc(50% - 93px); } @media screen and (min-width: 768px) { .m-cara_cast-title-en-bLeft, .m-cara_cast-title-en-bRight { width: calc(50% - 140px); } } .m-cara_cast-title-en-bLeft:before, .m-cara_cast-title-en-bLeft:after, .m-cara_cast-title-en-bRight:before, .m-cara_cast-title-en-bRight:after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background-color: #000; } .m-cara_cast-title-en-bLeft:before, .m-cara_cast-title-en-bRight:before { top: 28%; } .m-cara_cast-title-en-bLeft:after, .m-cara_cast-title-en-bRight:after { top: 60%; } .m-cara_cast-title-en-bLeft { left: 0; } .m-cara_cast-title-en-bRight { right: 0; } .m-cara_cast-list { 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) { .m-cara_cast-list { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .m-cara_cast-listItem { margin-bottom: 18px; width: 32%; font-size: 0; } @media screen and (max-width: 767px) { .m-cara_cast-listItem:not(:nth-child(3n)) { margin-right: 2%; } } @media screen and (min-width: 768px) { .m-cara_cast-listItem { margin-bottom: 20px; width: 15%; } .m-cara_cast-listItem:not(:nth-child(6n)) { margin-right: 2%; } } .m-cara_cast-listItem img { width: 100%; } .m-cara_cast-listItem a { display: block; color: #fff; text-decoration: none; } .m-cara_cast-listItem-data { background-color: #2aaeea; 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; min-height: 36px; } @media screen and (min-width: 768px) { .m-cara_cast-listItem-data { min-height: 45px; } } .m-cara_cast-listItem-data-inner { width: 100%; } .m-cara_cast-listItem-name { padding: 0 5px; font-size: 1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ text-align: center; font-weight: 700; line-height: 1.5; background-image: url("../../t/images/character-arrow.png"); background-repeat: no-repeat; background-position: left 5px center; background-size: 3px auto; } @media screen and (min-width: 768px) { .m-cara_cast-listItem-name { font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.6; background-size: 5px auto; background-position: left 11px center; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .m-cara_cast-listItem-name { font-size: 1vw; line-height: 1.6; } } .m-cara_cast-listItem-cv { font-size: 1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.8; text-align: center; } @media screen and (min-width: 768px) { .m-cara_cast-listItem-cv { font-size: 1.3rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.6; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .m-cara_cast-listItem-cv { font-size: 1vw; } } .m-cara_cast-more { text-align: center; } .m-cara_cast-more img { max-width: 154px; } @media screen and (min-width: 768px) { .m-cara_cast-more img { max-width: 231px; } } .m-staff { position: relative; margin-bottom: 59vw; width: auto; } @media screen and (min-width: 768px) { .m-staff { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (min-width: 768px) { .m-staff { margin-bottom: 51vw; } } .m-staff-shape { position: absolute; -webkit-transition: .1s opacity ease-out; -o-transition: .1s opacity ease-out; transition: .1s opacity ease-out; } @media screen and (max-width: 767px) { .m-staff-shape { display: none; } } .m-staff-shape.m-staff-b1 { top: -39px; left: -98px; -webkit-transform: translateY(15vh); -ms-transform: translateY(15vh); transform: translateY(15vh); } .m-staff-shape.m-staff-b2 { top: 23px; left: -139px; -webkit-transform: translateY(10vh); -ms-transform: translateY(10vh); transform: translateY(10vh); } .m-staff-shape.m-staff-b3 { top: 23px; left: -68px; -webkit-transform: translateY(20vh); -ms-transform: translateY(20vh); transform: translateY(20vh); } .m-staff-shape.m-staff-p1 { top: 264px; right: -138px; -webkit-transform: translateY(10vh); -ms-transform: translateY(10vh); transform: translateY(10vh); } .m-staff-shape.m-staff-p2 { top: 264px; right: -98px; -webkit-transform: translateY(15vh); -ms-transform: translateY(15vh); transform: translateY(15vh); } .m-staff-shape.m-staff-p3 { top: 234px; right: -68px; -webkit-transform: translateY(20vh); -ms-transform: translateY(20vh); transform: translateY(20vh); } @media screen and (min-width: 768px) { .m-staff-inner { margin: auto; width: 380px; } } .m-staff-title { text-align: center; } .m-staff-title-jp { margin-bottom: 0px; font-size: 0; } @media screen and (min-width: 768px) { .m-staff-title-jp { margin-bottom: 4px; } } .m-staff-title-jp img { width: 95px; } @media screen and (min-width: 768px) { .m-staff-title-jp img { width: 148px; } } .m-staff-title-en { margin: 0 auto; position: relative; font-size: 0; width: 54vw; } @media screen and (min-width: 768px) { .m-staff-title-en { width: auto; } } .m-staff-title-en-inner { padding: 0 8px; position: relative; display: inline-block; z-index: 2; } @media screen and (min-width: 768px) { .m-staff-title-en-inner { padding: 0 22px; } } .m-staff-title-en-inner img { width: 60px; } @media screen and (min-width: 768px) { .m-staff-title-en-inner img { width: 77px; } } .m-staff-title-en-bLeft, .m-staff-title-en-bRight { position: absolute; top: 0; height: 100%; width: calc(50% - 38px); } @media screen and (min-width: 768px) { .m-staff-title-en-bLeft, .m-staff-title-en-bRight { width: calc(50% - 61px); } } .m-staff-title-en-bLeft:before, .m-staff-title-en-bLeft:after, .m-staff-title-en-bRight:before, .m-staff-title-en-bRight:after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background-color: #000; } .m-staff-title-en-bLeft:before, .m-staff-title-en-bRight:before { top: 28%; } .m-staff-title-en-bLeft:after, .m-staff-title-en-bRight:after { top: 60%; } .m-staff-title-en-bLeft { left: 0; } .m-staff-title-en-bRight { right: 0; } .m-staff-list { margin-top: 17px; margin-bottom: 32px; } @media screen and (min-width: 768px) { .m-staff-list { margin-top: 30px; margin-bottom: 40px; } } .m-staff-banner { margin: auto; width: 81.3vw; font-size: 0; } @media screen and (min-width: 768px) { .m-staff-banner { width: 548px; } } .m-staff .m-staffList { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1px; } .m-staff .m-staffList-title, .m-staff .m-staffList-name { width: 50%; font-size: 1.1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.81; letter-spacing: .2em; } @media screen and (min-width: 768px) { .m-staff .m-staffList-title, .m-staff .m-staffList-name { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.14; } } .m-staff .m-staffList-title { text-align: right; } .m-staff .m-staffList-title:after { content: "："; } .m-staff-castList { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 17px auto; } @media screen and (min-width: 768px) { .m-staff-castList { margin-top: 30px; margin-bottom: 40px; } } .m-staff-castList li { margin: 0 .5em; font-size: 1.1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.81; letter-spacing: .2em; } @media screen and (min-width: 768px) { .m-staff-castList li { margin: 0 1em; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.14; } } .m-share { margin: 48px auto 16px; width: 64vw; } @media screen and (min-width: 768px) { .m-share { margin: 42px auto 38px; width: 380px; } } .m-share-title { margin: auto; position: relative; text-align: center; width: 54vw; } @media screen and (min-width: 768px) { .m-share-title { width: auto; } } .m-share-title-inner { position: relative; display: inline-block; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.45; } @media screen and (min-width: 768px) { .m-share-title-inner { width: 216px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.14; } } .m-share-title:before, .m-share-title:after { content: ""; position: absolute; top: 50%; width: calc(50% - 78px); height: 1px; background-color: #000; } @media screen and (min-width: 768px) { .m-share-title:before, .m-share-title:after { width: calc(50% - 92px); } } .m-share-title:before { left: 0; } .m-share-title:after { right: 0; } .m-share-shareBtns { margin-top: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 0; } @media screen and (min-width: 768px) { .m-share-shareBtns { margin-top: 22px; } } .m-share-shareBtns-item { margin: 0 12px; } @media screen and (min-width: 768px) { .m-share-shareBtns-item { margin: 0 19px; } } .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: 32px; } @media screen and (min-width: 768px) { .m-share-shareBtns-item a img { width: 48px; } } .o-footer { background-color: #fff; } .o-footer-banner { 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; font-size: 0; background-color: #f2f2f2; } @media screen and (max-width: 767px) { .o-footer-banner { padding-left: 5.33%; padding-right: 5.33%; } } .o-footer-banner-image { margin: 25px 0; } @media screen and (min-width: 768px) { .o-footer-banner-image { margin: 40px 20px 50px; } } .o-footer-totop { position: absolute; bottom: 20px; right: 0; left: 0; width: 47px; margin: auto; font-size: 0; } @media screen and (min-width: 768px) { .o-footer-totop { bottom: 15px; left: auto; right: 35px; width: 72px; } } .o-footer-totop a { color: #fff; text-decoration: none; } .o-footer-totop img { display: block; } .o-footer-main { position: relative; padding-bottom: 45px; background: url("../../common/images/footerBg-sp.png") 50% 50%; background-size: cover; } @media screen and (min-width: 768px) { .o-footer-main { padding-bottom: 0; background: url("../../common/images/footerBg.png"); background-size: cover; } } .o-footer-main-inner { padding: 20px 0 27px; } @media screen and (max-width: 767px) { .o-footer-main-inner { margin-left: 5.33%; margin-right: 5.33%; } } @media screen and (min-width: 768px) { .o-footer-main-inner { padding: 27px 0 33px; color: #fff; } } .o-footer-logo { 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; font-size: 0; } @media screen and (max-width: 767px) { .o-footer-logo img { width: 76px; } } .o-footer-linkSite { margin-top: 10px; text-align: center; } @media screen and (min-width: 768px) { .o-footer-linkSite { margin-top: 20px; } } .o-footer-linkSite a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; font-size: 0; line-height: 1; font-family: 'Noto Sans JP', sans-serif; text-decoration: none; font-weight: 700; } .o-footer-linkSite a span { font-size: 1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.43; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .o-footer-linkSite a span { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .o-footer-linkSite a span:hover { text-decoration: underline; } .o-footer-linkSite a:before, .o-footer-linkSite a:after { display: block; content: ""; /*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; font-size: 10px;*/ } .o-footer-linkSite a:before { margin-right: 8px; width: 4px; height: 7px; background-image: url("../../common/images/footer-arrow.png"); background-size: contain; } @media screen and (min-width: 768px) { .o-footer-linkSite a:before { width: 7px; height: 13px; } } .o-footer-linkSite a:after { margin-left: 8px; width: 7px; height: 7px; background-size: contain; background-image: url("../../common/images/footer-brank-icn.png"); } @media screen and (min-width: 768px) { .o-footer-linkSite a:after { width: 14px; height: 14px; } } .o-footer-copylight { margin-top: 10px; font-size: 0.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; letter-spacing: .2em; text-align: center; color: #fff; font-family: 'Noto Sans JP', sans-serif; } @media screen and (min-width: 768px) { .o-footer-copylight { margin-top: 15px; font-size: 1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.6; } } .container { overflow: hidden; } .m-mv { position: relative; width: 100vw; height: calc(100vh - 80px); background-color: #f3fffd; overflow: hidden; /* position: fixed; display:flex; background: url(../../t/images/splash_bg@2x.jpg) 50% 50%; background-size:cover; &:hover { cursor: pointer; } // display:none; @include screen_l() { background: url(../../t/images/splash_bg.jpg) 50% 50%; background-size:cover; } justify-content: center; align-items: center; top:0; left:0; width:100%; height:100%; padding:15px; box-sizing: border-box; z-index:100; text-align:center; font-weight:bold; &::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:black; transition: opacity 2s ease; } .m-splash-inner { width:100%; opacity:0; .m-splash-logo { position:relative; opacity:0; transition: opacity .4s ease; margin:30px auto; @include screen_l() { max-width: 727px; margin:40px auto; } } .m-splashtxt1 { // width:100%; opacity:0; word-wrap: break-word; position:relative; color:white; @include fontsize(25); line-height:1.4; height:2.5em; @include screen_l() { @include fontsize(48); height:1.4em; width:100%; } } .m-splashtxt2 { // width:100%; opacity:0; word-wrap: break-word; position:relative; color:white; @include fontsize(27); line-height:1.4; height:2.5em; @include screen_l() { @include fontsize(48); height:1.4em; width:100%; } } } &._start { .m-splash-inner { opacity:1; } &::before { opacity:.75; } .m-splashtxt1 { animation: zoomin 0.4s ease 2s forwards; } .m-splash-logo { animation: zoomin 0.4s cubic-bezier(.31,1.07,.32,1.2) 2.1s forwards } .m-splashtxt2 { animation: zoomin 0.4s ease 2.2s forwards; } } // transition: all .8s ease; */ } @media screen and (min-width: 768px) { .m-mv { height: 100vh; } } .m-mv:after { opacity: 0; position: absolute; bottom: -25px; width: 100%; height: 40px; background-image: url("../../t/images/mv-line.png"); background-repeat: no-repeat; background-size: 100% auto; } @media screen and (min-width: 768px) { .m-mv:after { bottom: -25px; } } .m-mv-inner { position: relative; } .m-mv-scene { position: absolute; top: 0; left: 0; width: 100vw; height: calc(100vh - 80px); overflow: hidden; } @media screen and (min-width: 768px) { .m-mv-scene { height: 100vh; } } .m-mv-first { 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; z-index: 2; } .m-mv-first img { width: 60.7vw; opacity: 0; } @media screen and (min-width: 768px) { .m-mv-first img { width: 426px; } } .m-mv-first.active img { -webkit-transition: opacity .8s ease; -o-transition: opacity .8s ease; transition: opacity .8s ease; opacity: 1; } .m-mv-logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; z-index: 3; } .m-mv-logo-inner { position: relative; -webkit-transform: translateY(50vh) translateY(-95px); -ms-transform: translateY(50vh) translateY(-95px); transform: translateY(50vh) translateY(-95px); will-change: transform; } @media screen and (min-width: 768px) { .m-mv-logo-inner { -webkit-transform: translateY(50vh) translateY(-200px); -ms-transform: translateY(50vh) translateY(-200px); transform: translateY(50vh) translateY(-200px); } } .m-mv-logo-main { text-align: center; } .m-mv-logo-main img { width: 57.5vw; opacity: 0; } @media screen and (min-width: 768px) { .m-mv-logo-main img { width: 390px; } } .m-mv-logo-text { text-align: center; } .m-mv-logo-text img { width: 60.7vw; opacity: 0; } @media screen and (min-width: 768px) { .m-mv-logo-text img { width: 426px; } } .m-mv-logo.active .m-mv-logo-text img { -webkit-transition: opacity 1.8s 1.0s ease; -o-transition: opacity 1.8s 1.0s ease; transition: opacity 1.8s 1.0s ease; opacity: 1; } .m-mv-logo.active-main .m-mv-logo-main img { -webkit-transition: opacity 1.8s 4s ease; -o-transition: opacity 1.8s 4s ease; transition: opacity 1.8s 4s ease; opacity: 1; } .m-mv-logo.active-main .m-mv-logo-inner { -webkit-transition: all 4.0s 0s ease; -o-transition: all 4.0s 0s ease; transition: all 4.0s 0s ease; -webkit-transform: translateY(150px); -ms-transform: translateY(150px); transform: translateY(150px); } @media screen and (min-width: 768px) { .m-mv-logo.active-main .m-mv-logo-inner { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } } .m-mv-banners { z-index: 4; } .m-mv-banners-inner { position: relative; height: 100%; -webkit-transform: translateY(100vh); -ms-transform: translateY(100vh); transform: translateY(100vh); } @media screen and (max-width: 767px) { .m-mv-banners-inner { margin-left: 5.33%; margin-right: 5.33%; } } @media screen and (min-width: 768px) { .m-mv-banners-inner { margin-left: auto; margin-right: auto; width: 100%; max-width: 1100px; } } .m-mv-banners-link { position: absolute; bottom: 2.4vw; right: 0; width: 33.9vw; } @media screen and (min-width: 768px) { .m-mv-banners-link { bottom: 60px; right: 20px; width: 210px; } } .m-mv-banners-link img { opacity: 1; -webkit-transition: opacity 1.5s 2.0s ease; -o-transition: opacity 1.5s 2.0s ease; transition: opacity 1.5s 2.0s ease; } .m-mv-banners-scroll { position: absolute; left: 0; right: 0; bottom: 3.4vw; margin: auto; width: 10.1vw; } @media screen and (min-width: 768px) { .m-mv-banners-scroll { bottom: 50px; width: 76px; } } .m-mv-banners-scroll img { opacity: 1; } .m-mv-banners.active .m-mv-banners-inner { -webkit-transition: -webkit-transform 4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: -webkit-transform 4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: transform 4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 4s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(0vh); -ms-transform: translateY(0vh); transform: translateY(0vh); } .m-mv-bg { position: absolute; top: 0; left: 0; width: 100vw; overflow: hidden; } .m-mv-bg-inner { position: absolute; left: 0; top: 0; width: 100%; height: 277vw; } @media screen and (min-width: 768px) { .m-mv-bg-inner { height: 121vw; } } .m-mv-bg-inner.finish { top: auto; bottom: 0; } .m-mv-bg img { width: 100%; height: auto; -o-object-position: center top; object-position: center top; } .m-mv-line { position: relative; margin-top: -5px; font-size: 0; line-height: 0; opacity: 0; } @media screen and (min-width: 768px) { .m-mv-line { margin-top: -10px; } } .m-mv-line.active { opacity: 1; -webkit-transition: opacity 1.0s 4s ease; -o-transition: opacity 1.0s 4s ease; transition: opacity 1.0s 4s ease; } .m-mv-line img { width: 100%; } @-webkit-keyframes zoomin { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes zoomin { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .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: #fff; } .player-outer { position: absolute; z-index: 100; } .player-close { position: fixed; top: 7px; right: 9px; z-index: 20; } @media screen and (min-width: 768px) { .player-close { top: 24px; right: 33px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .player-close { right: 9px; } } .player-close a { display: block; width: 41px; font-size: 0; border-radius: 50%; } @media screen and (min-width: 768px) { .player-close a { width: 51px; } } .player-wrap { width: 100%; height: 100%; max-width: 1080px; display: table; margin: 0 auto; padding: 0 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .player-wrap { padding: 0; } } .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; } .slider { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: #fff; overflow-y: auto; } @media screen and (min-width: 768px) { .slider { 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; background-image: url("../../t/images/modal-shape.png"); background-repeat: no-repeat; background-position: right 138px top -20px; } } .slider-outer { position: absolute; z-index: 100; } .slider-close { position: fixed; top: 7px; right: 9px; z-index: 20; } @media screen and (min-width: 768px) { .slider-close { top: 24px; right: 33px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .slider-close { right: 9px; } } .slider-close a { display: block; width: 41px; font-size: 0; border-radius: 50%; } @media screen and (min-width: 768px) { .slider-close a { width: 51px; } } .slider-arrow { position: absolute; top: 30.5%; width: 20px; } @media screen and (min-width: 768px) { .slider-arrow { top: calc(50% - 32px); width: 41px; } } .slider-arrow.slider-next { right: 3px; } @media screen and (min-width: 768px) { .slider-arrow.slider-next { right: 40px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .slider-arrow.slider-next { right: 9px; } } .slider-arrow.slider-prev { left: 3px; } @media screen and (min-width: 768px) { .slider-arrow.slider-prev { left: 40px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .slider-arrow.slider-prev { left: 9px; } } .slider-inner { margin: auto; max-width: 1366px; padding: 32px 5.66%; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 768px) { .slider-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 130px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .slider-inner { padding: 0 5.66%; } } .slider-image { margin-bottom: 18px; width: auto; height: 92vw; 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) { .slider-image { margin-bottom: 0; width: 51%; height: auto; } } .slider-image img { max-width: 84%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and (min-width: 768px) { .slider-image img { max-width: 100%; } } @media screen and (min-width: 768px) { .slider-data { width: 45%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .slider-title { margin-bottom: 18px; font-size: 1.7rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.06; } @media screen and (min-width: 768px) { .slider-title { margin-bottom: 13px; font-size: 2.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.38; } } .slider-description { margin-bottom: 20px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.83; } @media screen and (min-width: 768px) { .slider-description { margin-bottom: 18px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.25; } } .slider-cast { margin-bottom: 34px; 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) { .slider-cast { margin-bottom: 59px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.25; } } .slider-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } .slider-listItem { margin-bottom: 7px; width: 15%; padding: 0px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 0; } @media screen and (max-width: 767px) { .slider-listItem:not(:nth-child(6n)) { margin-right: 2%; } } @media screen and (min-width: 768px) { .slider-listItem { padding: 5px; width: 16%; } .slider-listItem:not(:nth-child(6n)) { margin-right: .8%; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .slider-listItem { width: 25%; } .slider-listItem:not(:nth-child(6n)) { margin-right: 0; } .slider-listItem:not(:nth-child(3n)) { margin-right: 0; } } .slider-listItem a { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px #2aaeea solid; } .slider-listItem.currentItem a { border-width: 3px; } .page-story { position: relative; padding-top: 87px; width: auto; } @media screen and (max-width: 767px) { .page-story { margin-left: 5.33%; margin-right: 5.33%; } } @media screen and (min-width: 768px) { .page-story { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (min-width: 768px) { .page-story { padding-top: 135px; padding-bottom: 35px; } } .page-story-wrap { position: relative; } @media screen and (min-width: 768px) { .page-story-inner { margin: auto; width: 780px; } } .page-story-title { margin-bottom: 38px; text-align: center; } @media screen and (min-width: 768px) { .page-story-title { margin: 0 auto 58px; width: 381px; } } .page-story-title-jp { margin-bottom: 6px; font-size: 0; } @media screen and (min-width: 768px) { .page-story-title-jp { margin-bottom: 19px; } } .page-story-title-jp img { width: 130px; } @media screen and (min-width: 768px) { .page-story-title-jp img { width: 241px; } } .page-story-title-en { margin: 0 auto; position: relative; font-size: 0; width: 54vw; } @media screen and (min-width: 768px) { .page-story-title-en { width: auto; } } .page-story-title-en-inner { padding: 0 9px; position: relative; display: inline-block; z-index: 2; } @media screen and (min-width: 768px) { .page-story-title-en-inner { padding: 0 15px; } } .page-story-title-en-inner img { width: 74px; } @media screen and (min-width: 768px) { .page-story-title-en-inner img { width: 111px; } } .page-story-title-en-bLeft, .page-story-title-en-bRight { position: absolute; top: 0; height: 100%; width: calc(50% - 43px); } @media screen and (min-width: 768px) { .page-story-title-en-bLeft, .page-story-title-en-bRight { width: calc(50% - 70px); } } .page-story-title-en-bLeft:before, .page-story-title-en-bLeft:after, .page-story-title-en-bRight:before, .page-story-title-en-bRight:after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background-color: #000; } .page-story-title-en-bLeft:before, .page-story-title-en-bRight:before { top: 28%; } .page-story-title-en-bLeft:after, .page-story-title-en-bRight:after { top: 60%; } .page-story-title-en-bLeft { left: 0; } .page-story-title-en-bRight { right: 0; } .page-story-thumbnail { margin-bottom: 34px; } @media screen and (min-width: 768px) { .page-story-thumbnail { margin-bottom: 63px; } } .page-story-subTitle { margin-bottom: 16px; text-align: center; font-size: 0; } @media screen and (min-width: 768px) { .page-story-subTitle { margin-bottom: 34px; } } .page-story-subTitle img { width: 244px; } @media screen and (min-width: 768px) { .page-story-subTitle img { width: 390px; } } .page-story-description { margin-bottom: 56px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ text-align: center; line-height: 1.83; letter-spacing: .1em; } @media screen and (min-width: 768px) { .page-story-description { margin-bottom: 60px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.25; letter-spacing: .1em; } } .page-story-link { text-align: center; } .page-story-link img { max-width: 210px; } @media screen and (min-width: 768px) { .page-story-link img { max-width: 260px; } } .page-interview { position: relative; padding-top: 87px; width: auto; } @media screen and (max-width: 767px) { .page-interview { margin-left: 5.33%; margin-right: 5.33%; } } @media screen and (min-width: 768px) { .page-interview { margin-left: auto; margin-right: auto; width: 100%; max-width: 1080px; } } @media screen and (min-width: 768px) { .page-interview { padding-top: 116px; padding-bottom: 35px; } } .page-interview-wrap { position: relative; } @media screen and (min-width: 768px) { .page-interview-inner { margin: auto; width: 780px; } } .page-interview-title { margin-bottom: 38px; text-align: center; } @media screen and (min-width: 768px) { .page-interview-title { margin: 0 auto 99px; width: 511px; } } .page-interview-title-jp { margin-bottom: 13px; font-size: 0; } @media screen and (min-width: 768px) { .page-interview-title-jp { margin-bottom: 26px; } } .page-interview-title-jp img { width: 68vw; } @media screen and (min-width: 768px) { .page-interview-title-jp img { width: 511px; } } .page-interview-title-en { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; padding: 0 8px; position: relative; font-size: 0; width: 66vw; } @media screen and (min-width: 768px) { .page-interview-title-en { width: auto; } } .page-interview-title-en-inner { padding: 0 9px; position: relative; display: inline-block; z-index: 2; } @media screen and (min-width: 768px) { .page-interview-title-en-inner { padding: 0 26px; } } .page-interview-title-en-inner img { width: 27.2vw; } @media screen and (min-width: 768px) { .page-interview-title-en-inner img { width: 204px; } } .page-interview-title-en-bLeft, .page-interview-title-en-bRight { position: relative; height: 3px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (min-width: 768px) { .page-interview-title-en-bLeft, .page-interview-title-en-bRight { height: 7px; width: calc(50% - 120px); } } .page-interview-title-en-bLeft:before, .page-interview-title-en-bLeft:after, .page-interview-title-en-bRight:before, .page-interview-title-en-bRight:after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background-color: #000; } .page-interview-title-en-bLeft:before, .page-interview-title-en-bRight:before { top: 0; } .page-interview-title-en-bLeft:after, .page-interview-title-en-bRight:after { bottom: 0; } .page-interview-title-en-bLeft { left: 0; } .page-interview-title-en-bRight { right: 0; } .page-interview-links { margin-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) { .page-interview-links { margin-bottom: 30px; } } .page-interview-linksItem { margin-bottom: 10px; width: calc(50% - 6px); -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; border: 2px #2aaeea solid; -webkit-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } @media screen and (min-width: 768px) { .page-interview-linksItem { margin-bottom: 0; width: calc(25% - 7.5px); } } .page-interview-linksItem a, .page-interview-linksItem span { padding: 9px 0; 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; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; font-weight: 700; text-align: center; text-decoration: none; -webkit-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; color: #2aaeea; } @media screen and (min-width: 768px) { .page-interview-linksItem a, .page-interview-linksItem span { padding: 2px 0; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.25; } } .page-interview-linksItem:hover { background-color: #2aaeea; } .page-interview-linksItem:hover a { color: #fff; opacity: 1; } .page-interview-linksItem.active { background-color: #2aaeea; } .page-interview-linksItem.active a, .page-interview-linksItem.active span { color: #fff; } .page-interview-linksItem.active a:before, .page-interview-linksItem.active span:before { content: ""; margin-right: 8px; width: 5px; height: 9px; background-image: url("../../t/images/interview/link-icn.png"); background-repeat: no-repeat; background-size: contain; background-position: center left; } .page-interview-linksItem.none { background-color: rgba(190, 190, 190, 0.7); border: none; } .page-interview-linksItem.none a, .page-interview-linksItem.none span { color: #fff; } .page-interview-intro { font-size: 0; margin-bottom: 30px; } @media screen and (min-width: 768px) { .page-interview-intro { margin-bottom: 31px; } } .page-interview-content { position: relative; margin-bottom: 40px; } @media screen and (min-width: 768px) { .page-interview-content { margin-bottom: 78px; } } .page-interview-content-shapes { -webkit-transform: translateY(150vh); -ms-transform: translateY(150vh); transform: translateY(150vh); } .page-interview-content-section:not(:last-child) { margin-bottom: 40px; } @media screen and (min-width: 768px) { .page-interview-content-section:not(:last-child) { margin-bottom: 68px; } } .page-interview-content-title { margin-bottom: 32px; font-size: 1.2rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.833; letter-spacing: .1rem; text-align: center; } @media screen and (min-width: 768px) { .page-interview-content-title { margin-bottom: 66px; padding: 0 38px; font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 2.25; letter-spacing: .134rem; } } .page-interview-content-question, .page-interview-content-answer, .page-interview-content-list { font-size: 1.1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.545; letter-spacing: .1rem; } @media screen and (min-width: 768px) { .page-interview-content-question, .page-interview-content-answer, .page-interview-content-list { padding: 0 38px; font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.714; letter-spacing: .134rem; } } .page-interview-content-question { margin-bottom: 20px; color: #008ccb; } @media screen and (min-width: 768px) { .page-interview-content-question { margin-bottom: 16px; } } .page-interview-content-question:before { content: ""; display: inline-block; margin-right: 8px; margin-top: 9px; width: 20px; height: 1px; background-color: #008ccb; vertical-align: top; } @media screen and (min-width: 768px) { .page-interview-content-question:before { margin-right: 5px; width: 30px; margin-top: 11px; } } .page-interview-content-flexStyle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .page-interview-content-flexStyle .page-interview-content-image { width: calc(50% - 9px); } .page-interview-content-answer .annotation { color: #888888; } .page-interview-content-list { margin-top: 16px; color: #888888; } @media screen and (min-width: 768px) { .page-interview-content-list { margin-top: 14px; } } .page-interview-content-list li { margin-bottom: 19px; padding-left: 1.6em; border-left: 3px #008ccb solid; } @media screen and (min-width: 768px) { .page-interview-content-list li { margin-bottom: 12px; padding-left: 1.4em; } } .page-interview-content-image { margin-bottom: 18px; } @media screen and (min-width: 768px) { .page-interview-content-image { margin-bottom: 30px; } } @media screen and (min-width: 768px) { .page-interview-content-flex { 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) { .page-interview-content-flexItem { width: calc(50% - 9px); } } .page-interview-content-flexItem img { margin-top: 5px; } @media screen and (min-width: 768px) { .page-interview-content-flexItem img { margin-top: 0; } } .page-interview-content-flexItem.flexImage { font-size: 0; } .page-interview-content-flexItem.imageSmall { text-align: center; } @media screen and (max-width: 767px) { .page-interview-content-flexItem.imageSmall { margin: auto; width: 65.5vw; } } @media screen and (min-width: 768px) { .page-interview-content-flexItem.imageSmall img { margin-top: 0; } } .page-interview-content-caption { font-size: 1.1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1; text-align: right; } @media screen and (min-width: 768px) { .page-interview-content-caption { font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } } .page-interview-content img { margin-top: 18px; } .page-interview-profile { margin-bottom: 42px; padding: 20px 15px 15px 20px; background-color: #f2f2f2; /*background-color: red; opacity: .5;*/ } @media screen and (min-width: 768px) { .page-interview-profile { padding: 40px; } } .page-interview-profile:after { content: " "; display: block; clear: both; } @media screen and (min-width: 768px) { .page-interview-profile + .page-interview-profile { margin-top: 75px; } } .page-interview-profile-image { float: left; margin-bottom: 20px; margin-right: 15px; width: 110px; font-size: 0; } @media screen and (min-width: 768px) { .page-interview-profile-image { margin-bottom: 0; margin-right: 37px; width: 154px; } } .page-interview-profile-name { float: right; margin-bottom: 10px; width: calc(100% - 125px); line-height: 1; } @media screen and (min-width: 768px) { .page-interview-profile-name { margin-bottom: 20px; width: calc(100% - 191px); } } .page-interview-profile-name span { background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(40%, #ffffff)); background: -o-linear-gradient(transparent 60%, #ffffff 40%); background: linear-gradient(transparent 60%, #ffffff 40%); font-size: 1.1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.545; letter-spacing: .1rem; } @media screen and (min-width: 768px) { .page-interview-profile-name span { font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; letter-spacing: .134rem; } } .page-interview-profile-description { float: right; margin-bottom: 20px; width: calc(100% - 125px); font-size: 1.1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.545; letter-spacing: .1rem; } @media screen and (min-width: 768px) { .page-interview-profile-description { margin-bottom: 20px; width: calc(100% - 191px); font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.71; letter-spacing: .134rem; } } .page-interview-profile-link { -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.545; letter-spacing: .1rem; font-weight: bold; clear: both; } @media screen and (min-width: 768px) { .page-interview-profile-link { display: -webkit-box; display: -ms-flexbox; display: flex; float: right; width: calc(100% - 191px); font-size: 1.4rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.71; letter-spacing: .2em; clear: none; } } .page-interview-profile-link:before { content: ""; display: inline-block; margin-right: 11px; width: 5px; height: 9px; background-image: url("../../t/images/interview/link-icn-black.png"); background-repeat: no-repeat; background-size: contain; } .page-interview-profile-link a { color: #000; text-decoration: none; } .page-interview-copy { margin-bottom: 36px; font-size: 0.8rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.5; text-align: center; letter-spacing: .2em; } @media screen and (min-width: 768px) { .page-interview-copy { margin-bottom: 42px; font-size: 1rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ line-height: 1.6; } } html { font: 62.5%/2 "メイリオ", "Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Osaka,sans-serif; color: #000000; -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 Serif JP', sans-serif; font-weight: 400; } @media screen and (min-width: 768px) { body { font-size: 1.6rem; /* --- name: fontsize category: -mixin --- font-size:引数px; font-size:引数/10rem; に設定 ```scss @include fontsize(引数); ``` */ } }