→
- カスタムデータ属性（^= と = の違いに注意。^=先頭の値）
---------------------------------------------------------------------------
- 「単独設定（通常通り）」と「一揃い（スイート）」の2種類を用意。
- 「単独設定」はターゲット（[data-js_show_target]を設定した要素）自身がアニメーションする。
- 「一揃い」はターゲット（[data-js_show_target_suite]を設定した要素）の“子孫要素”がアニメーションする。
- 子孫要素のdata属性の値でディレイ秒数を設定できる。設定したくない場合は値を空にする。（[data-js_show_target_suite_descendant="300ms"] ＝ 300ミリ秒遅延）
---------------------------------------------------------------------------
- 2022.04 開始時の opacity を0より少し高くすることでスクロールを促す（但しChromeはバグがあるため0とする。※CSSハック）
------------------------------------------------------------------------ */
@media screen {
/* ----------------------------------------------------
共通設定
---------------------------------------------------- */
/* 開始時、初期値 ========== */
[data-js_show_target],
[data-js_show_target_suite_descendant] {
--base-jsShowTarget-transition-opacity: opacity 1000ms ease-out 100ms;
--base-jsShowTarget-transition-translate: transform 600ms ease-in-out 50ms;
--base-jsShowTarget-transition-blur: filter 700ms ease-out 200ms;
/*opacity: .05;*/
opacity: 0;
}
_:lang(x)::-internal-media-controls-overlay-cast-button, /* CSSハック */
[data-js_show_target],
[data-js_show_target_suite_descendant] { /* for Chrome. | Chromeでは「transform + opacity」で「transition (animation) のフェードイン」をするときに、「開始時の opacity が 0 以外」では正しくフェードしないバグがある模様。 */
opacity: 0;
}
/* 終了時 ================== */
[data-js_show_target-passed],
[data-js_show_target_suite-passed] :where([data-js_show_target_suite_descendant]) {
opacity: 1;
}
/* ----------------------------------------------------
単独設定（通常）
-------------------------------------------------------
* 2023.09 データ属性の値を変更、設定を追加
-------------------------------------------------------
フェードイン、上へスライド、ブラー、
ストレッチレフト、ストレッチライト
---------------------------------------------------- */
[data-js_show_target="fadeIn"] { transition: var(--base-jsShowTarget-transition-opacity);}
[data-js_show_target="fadeIn_slowly"] { transition: opacity 2500ms ease-out 100ms;}
[data-js_show_target^="moveUp"] { transition: var(--base-jsShowTarget-transition-opacity), var(--base-jsShowTarget-transition-translate);}
[data-js_show_target="moveUp20"] { transform: translateY(20px);}
[data-js_show_target="moveUp30"] { transform: translateY(30px);}
[data-js_show_target="moveUp40"] { transform: translateY(40px);}
[data-js_show_target-passed^="moveUp"] { transform: translateY(0);}
[data-js_show_target^="moveDown"] { transition: var(--base-jsShowTarget-transition-opacity), var(--base-jsShowTarget-transition-translate);}
[data-js_show_target="moveDown20"] { transform: translateY(-20px);}
[data-js_show_target="moveDown30"] { transform: translateY(-30px);}
[data-js_show_target="moveDown40"] { transform: translateY(-40px);}
[data-js_show_target-passed^="moveDown"] { transform: translateY(0);}
[data-js_show_target^="moveLeft"] { transition: var(--base-jsShowTarget-transition-opacity), var(--base-jsShowTarget-transition-translate);}
[data-js_show_target="moveLeft20"] { transform: translateX(20px);}
[data-js_show_target="moveLeft30"] { transform: translateX(30px);}
[data-js_show_target="moveLeft40"] { transform: translateX(40px);}
[data-js_show_target-passed^="moveLeft"] { transform: translateX(0);}
[data-js_show_target^="moveRight"] { transition: var(--base-jsShowTarget-transition-opacity), var(--base-jsShowTarget-transition-translate);}
[data-js_show_target="moveRight20"] { transform: translateX(-20px);}
[data-js_show_target="moveRight30"] { transform: translateX(-30px);}
[data-js_show_target="moveRight40"] { transform: translateX(-40px);}
[data-js_show_target-passed^="moveRight"] { transform: translateX(0);}
[data-js_show_target="blur"] { opacity: .7; filter: blur(6px); transition: var(--base-jsShowTarget-transition-opacity), var(--base-jsShowTarget-transition-blur);}
[data-js_show_target-passed="blur"] { opacity: 1; filter: blur(0);}
[data-js_show_target="blur_opacity0"] { opacity: 0; filter: blur(6px); transition: var(--base-jsShowTarget-transition-opacity), var(--base-jsShowTarget-transition-blur);}
[data-js_show_target-passed="blur_opacity0"] { opacity: 1; filter: blur(0);}
[data-js_show_target="blur_slowly"] { opacity: .7; filter: blur(6px); transition: var(--base-jsShowTarget-transition-opacity), filter 2000ms ease-out 600ms;}
[data-js_show_target-passed="blur_slowly"] { opacity: 1; filter: blur(0);}
[data-js_show_target="blur_slowly_opacity0"] { opacity: 0; filter: blur(6px); transition: var(--base-jsShowTarget-transition-opacity), filter 2000ms ease-out 600ms;}
[data-js_show_target-passed="blur_slowly_opacity0"] { opacity: 1; filter: blur(0);}
[data-js_show_target="fadeInStretchLeft"],
[data-js_show_target="fadeInStretchRight"] { opacity: 0; transition: opacity 500ms, clip-path 1000ms; transition-delay: 100ms; transition-timing-function: ease-out;}
[data-js_show_target="fadeInStretchLeft"] { clip-path: inset(0 100% 0 0);}
[data-js_show_target="fadeInStretchRight"] { clip-path: inset(0 0 0 100%);}
[data-js_show_target-passed="fadeInStretchLeft"],
[data-js_show_target-passed="fadeInStretchRight"] { opacity: 1; clip-path: inset(0 0 0 0);}
[data-js_show_target="fadeInStretchUp"],
[data-js_show_target="fadeInStretchDown"] { opacity: 0; transition: opacity 500ms, clip-path 1000ms; transition-delay: 100ms; transition-timing-function: ease-out;}
[data-js_show_target="fadeInStretchUp"] { clip-path: inset(100% 0 0 0);}
[data-js_show_target="fadeInStretchDown"] { clip-path: inset(0 0 100% 0);}
[data-js_show_target-passed="fadeInStretchUp"],
[data-js_show_target-passed="fadeInStretchDown"] { opacity: 1; clip-path: inset(0 0 0 0);}
[data-js_show_target="fadeIn_scaleGetBigger_blur"] { opacity: 0; transform: scale(.5); filter: blur(10px);}
[data-js_show_target-passed="fadeIn_scaleGetBigger_blur"] { animation: 700ms ease both M_fadeIn_and_scaleGetBigger_and_blur;}
[data-js_show_target="fadeIn_scaleGetBigger_blur myEaseOutBack"] { opacity: 0; transform: scale(.5); filter: blur(10px);}
[data-js_show_target-passed="fadeIn_scaleGetBigger_blur myEaseOutBack"] { animation: 700ms var(--M-easing-myEaseOutBack_01) both M_fadeIn_and_scaleGetBigger_and_blur;}
/* ----------------------------------------------------
一揃い(suite) | 子孫要素にスタイルを設定する
-------------------------------------------------------
フェードイン、上へスライド
---------------------------------------------------- */
[data-js_show_target_suite="fadeIn"] :where([data-js_show_target_suite_descendant]) { transition: var(--base-jsShowTarget-transition-opacity);}
[data-js_show_target_suite="fadeIn_slowly"] :where([data-js_show_target_suite_descendant]) { transition: opacity 2500ms ease-out 100ms;}
[data-js_show_target_suite^="moveUp"] :where([data-js_show_target_suite_descendant]) { transition: var(--base-jsShowTarget-transition-opacity), var(--base-jsShowTarget-transition-translate);}
[data-js_show_target_suite="moveUp20"] :where([data-js_show_target_suite_descendant]) { transform: translateY(20px);}
[data-js_show_target_suite="moveUp30"] :where([data-js_show_target_suite_descendant]) { transform: translateY(30px);}
[data-js_show_target_suite="moveUp40"] :where([data-js_show_target_suite_descendant]) { transform: translateY(40px);}
[data-js_show_target_suite-passed^="moveUp"] :where([data-js_show_target_suite_descendant]) { transform: translateY(0);}
[data-js_show_target_suite^="moveLeft"] :where([data-js_show_target_suite_descendant]) { transition: var(--base-jsShowTarget-transition-opacity), var(--base-jsShowTarget-transition-translate);}
[data-js_show_target_suite="moveLeft20"] :where([data-js_show_target_suite_descendant]) { transform: translateX(20px);}
[data-js_show_target_suite="moveLeft30"] :where([data-js_show_target_suite_descendant]) { transform: translateX(30px);}
[data-js_show_target_suite="moveLeft40"] :where([data-js_show_target_suite_descendant]) { transform: translateX(40px);}
[data-js_show_target_suite-passed^="moveLeft"] :where([data-js_show_target_suite_descendant]) { transform: translateX(0);}
}
/* ============================================================================
OtherModule
-------------------------------------------------------------------------------
* noticeWrap
- is_noticeWrap_all
============================================================================ */
/* noticeWrap | 全ページ共通用（基本的に書き換えない。調整は後述の「is_noticeWrap_all」へ）
------------------------------------------------------------------------ */
/* noticeItem
---------------------------------------------------- */
.noticeWrap .noticeItem {
margin-top: 30px;
}
.noticeWrap .noticeItem .kana {
letter-spacing: -.02em;
}
.noticeWrap .noticeItem a,
.noticeWrap .noticeItem a .inbl {
text-decoration: none;
}
.noticeWrap .noticeItem .marker {
background: linear-gradient(to top, rgba(255, 255, 255, 0) .06em, rgba(255, 255, 205, .75) .06em, rgba(255, 255, 205, .75) .6em, rgba(255, 255, 255, 0) .6em);
}
/* 文字サイズ調整
----------------------- */
/* noticeItem ----- */
.noticeWrap .noticeItem {
--default-noticeItem-fontsize: 22;
--default-noticeItem-fontsize-first: 22; /* --default-noticeItem-fontsize と同じ値を設定する。変数の代入は不可。 */
line-height: 1.6;
font-size: calc(var(--default-noticeItem-fontsize) * .1rem);
font-family: var(--site-font_family-serif);
letter-spacing: .12em;
text-align: center;
}
.noticeWrap .noticeItem small {
display: inline-block;
/*color: inherit;*/
}
.noticeWrap .noticeItem :is(.txtLLL, .txtLL, .txtL, .txtM, .txtS, .txtSS, .txtSSS, .txtSSSS) {
--default-noticeItem-fontsize-coefficient: 1em; /* 係数（倍率の調整＆単位を付けるための値） */
}
.noticeWrap .noticeItem :is(.txtLLL, .txtLL, .txtL, .txtM) {
font-size: calc(var(--default-noticeItem-txt-fontsize) / var(--default-noticeItem-fontsize) * var(--default-noticeItem-fontsize-coefficient));
}
.noticeWrap .noticeItem :is(.txtS, .txtSS, .txtSSS, .txtSSSS) {
font-size: max((var(--default-noticeItem-txt-fontsize) / var(--default-noticeItem-fontsize) * var(--default-noticeItem-fontsize-coefficient)), var(--default-noticeItem-txt-min-fontsize));
}
/* txtL ----- */
.noticeWrap .noticeItem .txtLLL {
--default-noticeItem-txt-fontsize: 30;
line-height: 1.5;
letter-spacing: 0.045em;
}
.noticeWrap .noticeItem .txtLL {
--default-noticeItem-txt-fontsize: 28;
line-height: 1.5;
letter-spacing: 0.045em;
}
.noticeWrap .noticeItem .txtL {
--default-noticeItem-txt-fontsize: 26;
letter-spacing: 0.06em;
}
/* txtM ----- */
.noticeWrap .noticeItem .txtM {
--default-noticeItem-txt-fontsize: 24;
}
/* txtS ----- */
.noticeWrap .noticeItem .txtS {
--default-noticeItem-txt-fontsize: 18;
--default-noticeItem-txt-min-fontsize: 1.4rem;
}
.noticeWrap .noticeItem .txtSS {
--default-noticeItem-txt-fontsize: 16;
--default-noticeItem-txt-min-fontsize: 1.3rem;
}
.noticeWrap .noticeItem .txtSSS {
--default-noticeItem-txt-fontsize: 15;
--default-noticeItem-txt-min-fontsize: 1.25rem;
}
.noticeWrap .noticeItem .txtSSSS {
--default-noticeItem-txt-fontsize: 14;
--default-noticeItem-txt-min-fontsize: 1.2rem;
}
/* letterSpacing ----- */
.noticeWrap .noticeItem .letterSpacingL {
letter-spacing: .26em;
}
/* color ----- */
/* base.cssで設定済み。 .txtColor01 等
*/
@media screen and (max-width: 1200px) {
.noticeWrap .noticeItem {
--default-noticeItem-fontsize: 19;
}
.noticeWrap .noticeItem :is(.txtLLL, .txtLL, .txtL, .txtM, .txtS, .txtSS, .txtSSS, .txtSSSS) { /* 親のフォントサイズに合わせた倍率を算出 */
--default-noticeItem-fontsize-coefficient: calc(var(--default-noticeItem-fontsize) / var(--default-noticeItem-fontsize-first) * 1em);
}
}
@media screen and (max-width: 600px) {
.noticeWrap .noticeItem {
--default-noticeItem-fontsize: 17;
}
}
@media screen and (max-width: 480px) {
.noticeWrap .noticeItem {
--default-noticeItem-fontsize: 16;
margin-top: 25px;
}
.noticeWrap .noticeItem :is(.txtLLL, .txtLL, .txtL, .txtM, .txtS, .txtSS, .txtSSS, .txtSSSS) { /* 仕切り直し */
--default-noticeItem-fontsize-coefficient: 1em;
}
.noticeWrap .noticeItem .txtLLL {
--default-noticeItem-txt-fontsize: 23;
}
.noticeWrap .noticeItem .txtLL {
--default-noticeItem-txt-fontsize: 20;
}
.noticeWrap .noticeItem .txtL {
--default-noticeItem-txt-fontsize: 18.5;
}
.noticeWrap .noticeItem .txtM {
--default-noticeItem-txt-fontsize: 17;
}
.noticeWrap .noticeItem .txtS {
--default-noticeItem-txt-fontsize: 14;
--default-noticeItem-txt-min-fontsize: 1.1rem;
}
.noticeWrap .noticeItem .txtSS {
--default-noticeItem-txt-fontsize: 12;
--default-noticeItem-txt-min-fontsize: 1.05rem;
}
.noticeWrap .noticeItem .txtSSS {
--default-noticeItem-txt-fontsize: 11.5;
--default-noticeItem-txt-min-fontsize: .97rem;
}
.noticeWrap .noticeItem .txtSSSS {
--default-noticeItem-txt-fontsize: 11;
--default-noticeItem-txt-min-fontsize: .94rem;
}
}
/* noticeBtnBox
---------------------------------------------------- */
.noticeBtnBox {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.noticeBtnBox .noticeBtn {
flex: 0 0 400px;
}
.noticeBtnBox .noticeBtn:nth-of-type(n+3) {
margin-top: 30px;
}
@media screen and (max-width: 1200px) {
.noticeBtnBox {
display: block;
}
.noticeBtnBox .noticeBtn:nth-of-type(n+2) {
margin-top: 15px;
}
}
/* holiday | noticeWrap内
---------------------------------------------------- */
.noticeWrap .holidayWrap .holiday {
display: block;
text-align: center;
margin: 0 auto;
padding: 2em 0;
}
.noticeWrap .holidayWrap .holiday .holidayInner {
display: inline-block;
color: #6f0c0c;
font-family: inherit;
font-size: 1.4rem;
text-align: left;
letter-spacing: .05em;
padding: .45em 1.1em .5em;
border: 1px solid currentColor;
}
@media screen and (max-width: 600px) {
.noticeWrap .holidayWrap .holiday .holidayInner {
font-size: 1.3rem;
}
}
/* is_noticeWrap_all ［調整用］
------------------------------------------------------------------------ */
/* 共通の設定
---------------------------------------------------- */
.noticeWrap .btLine {
padding-bottom: 3em;
border-bottom: 1px solid rgba(0, 0, 0, .2);
}
.noticeWrap .offer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: calc((450px * 2) + 10px);
font-size: 1.8rem;
margin: 0 auto;
padding: 0.5em 0.8em;
background: rgba(255, 255, 255, .3);
}
.noticeWrap .offerList {
text-align: left;
margin: 0 auto;
}
.noticeWrap .offerList li::before {
content: "・";
}
@media screen and (max-width: 1200px) {
.noticeWrap .offer {
}
.noticeWrap .offerList {
font-size: 0.7em;
margin-top: 0.5em;
}
}
/* ページ下部の共通部分のみ適用したい場合
---------------------------------------------------- */
.is_noticeWrap_all.noticeWrap {}
/* トップページのみ適用したい場合
---------------------------------------------------- */
:not(.is_noticeWrap_all).noticeWrap {
}
:not(.is_noticeWrap_all).noticeWrap .is_notIndex {
display: none;
}
/* ============================================================================
Etc
============================================================================ */
.clearfix::after {content:"";display:block;clear:both;}
.clear{clear:both !important;}
.dispNone{display:none;}
.dispNoneImp{display:none!important;}
.dispInline{display:inline;}
.inbl{display:inline-block;}
.bl{display:block;}
.bltc{display:block;text-align:center;}
.blImp{display:block !important;}
.noWrap{white-space:nowrap;}
.tj{text-align:justify !important;text-justify:inter-ideograph !important;/* for IE */}.tj *{display:inline !important;}
.tc{text-align:center !important}.tl{text-align:left !important}.tr{text-align:right !important}
.fl{float:left !important}.fr{float:right !important}.fn{float:none !important}
/* letterSpacing */
.lettsp0 {letter-spacing: 0 !important;}
.lettsp001 {letter-spacing: .01em !important;}
.lettsp002 {letter-spacing: .02em !important;}
.lettsp003 {letter-spacing: .03em !important;}
.lettsp004 {letter-spacing: .04em !important;}
.lettsp005 {letter-spacing: .05em !important;}
.lettsp006 {letter-spacing: .06em !important;}
.lettsp007 {letter-spacing: .07em !important;}
.lettsp01 {letter-spacing: .1em !important;}
.lettsp015 {letter-spacing: .15em !important;}
.lettsp02 {letter-spacing: .2em !important;}
/* margin, padding | Legacy */
.mt005em{margin-top: .05em!important} .mr005em{margin-right: .05em!important} .mb005em{margin-bottom: .05em!important} .ml005em{margin-left: .05em!important} .pt005em{padding-top: .05em!important} .pr005em{padding-right: .05em!important} .pb005em{padding-bottom: .05em!important} .pl005em{padding-left: .05em!important}
.mt01em {margin-top: .1em!important} .mr01em {margin-right: .1em!important} .mb01em {margin-bottom: .1em!important} .ml01em {margin-left: .1em!important} .pt01em {padding-top: .1em!important} .pr01em {padding-right: .1em!important} .pb01em {padding-bottom: .1em!important} .pl01em {padding-left: .1em!important}
.mt02em {margin-top: .2em!important} .mr02em {margin-right: .2em!important} .mb02em {margin-bottom: .2em!important} .ml02em {margin-left: .2em!important} .pt02em {padding-top: .2em!important} .pr02em {padding-right: .2em!important} .pb02em {padding-bottom: .2em!important} .pl02em {padding-left: .2em!important}
.mt03em {margin-top: .3em!important} .mr03em {margin-right: .3em!important} .mb03em {margin-bottom: .3em!important} .ml03em {margin-left: .3em!important} .pt03em {padding-top: .3em!important} .pr03em {padding-right: .3em!important} .pb03em {padding-bottom: .3em!important} .pl03em {padding-left: .3em!important}
.mt04em {margin-top: .4em!important} .mr04em {margin-right: .4em!important} .mb04em {margin-bottom: .4em!important} .ml04em {margin-left: .4em!important} .pt04em {padding-top: .4em!important} .pr04em {padding-right: .4em!important} .pb04em {padding-bottom: .4em!important} .pl04em {padding-left: .4em!important}
.mt05em {margin-top: .5em!important} .mr05em {margin-right: .5em!important} .mb05em {margin-bottom: .5em!important} .ml05em {margin-left: .5em!important} .pt05em {padding-top: .5em!important} .pr05em {padding-right: .5em!important} .pb05em {padding-bottom: .5em!important} .pl05em {padding-left: .5em!important}
.mt06em {margin-top: .6em!important} .mr06em {margin-right: .6em!important} .mb06em {margin-bottom: .6em!important} .ml06em {margin-left: .6em!important} .pt06em {padding-top: .6em!important} .pr06em {padding-right: .6em!important} .pb06em {padding-bottom: .6em!important} .pl06em {padding-left: .6em!important}
.mt07em {margin-top: .7em!important} .mr07em {margin-right: .7em!important} .mb07em {margin-bottom: .7em!important} .ml07em {margin-left: .7em!important} .pt07em {padding-top: .7em!important} .pr07em {padding-right: .7em!important} .pb07em {padding-bottom: .7em!important} .pl07em {padding-left: .7em!important}
.mt08em {margin-top: .8em!important} .mr08em {margin-right: .8em!important} .mb08em {margin-bottom: .8em!important} .ml08em {margin-left: .8em!important} .pt08em {padding-top: .8em!important} .pr08em {padding-right: .8em!important} .pb08em {padding-bottom: .8em!important} .pl08em {padding-left: .8em!important}
.mt09em {margin-top: .9em!important} .mr09em {margin-right: .9em!important} .mb09em {margin-bottom: .9em!important} .ml09em {margin-left: .9em!important} .pt09em {padding-top: .9em!important} .pr09em {padding-right: .9em!important} .pb09em {padding-bottom: .9em!important} .pl09em {padding-left: .9em!important}
.mt1em {margin-top: 1em!important} .mr1em {margin-right: 1em!important} .mb1em {margin-bottom: 1em!important} .ml1em {margin-left: 1em!important} .pt1em {padding-top: 1em!important} .pr1em {padding-right: 1em!important} .pb1em {padding-bottom: 1em!important} .pl1em {padding-left: 1em!important}
.mt1_25em{margin-top: 1.25em!important} .mr1_25em{margin-right: 1.25em!important} .mb1_25em{margin-bottom: 1.25em!important} .ml1_25em{margin-left: 1.25em!important} .pt1_25em{padding-top: 1.25em!important}.pr1_25em{padding-right: 1.25em!important} .pb1_25em{padding-bottom: 1.25em!important} .pl1_25em{padding-left: 1.25em!important}
.mt1_5em{margin-top: 1.5em!important} .mr1_5em{margin-right: 1.5em!important} .mb1_5em{margin-bottom: 1.5em!important} .ml1_5em{margin-left: 1.5em!important} .pt1_5em{padding-top: 1.5em!important} .pr1_5em{padding-right: 1.5em!important} .pb1_5em{padding-bottom: 1.5em!important} .pl1_5em{padding-left: 1.5em!important}
.mt2em {margin-top: 2em!important} .mr2em {margin-right: 2em!important} .mb2em {margin-bottom: 2em!important} .ml2em {margin-left: 2em!important} .pt2em {padding-top: 2em!important} .pr2em {padding-right: 2em!important} .pb2em {padding-bottom: 2em!important} .pl2em {padding-left: 2em!important}
.mt2_5em{margin-top: 2.5em!important} .mr2_5em{margin-right: 2.5em!important} .mb2_5em{margin-bottom: 2.5em!important} .ml2_5em{margin-left: 2.5em!important} .pt2_5em{padding-top: 2.5em!important} .pr2_5em{padding-right: 2.5em!important} .pb2_5em{padding-bottom: 2.5em!important} .pl2_5em{padding-left: 2.5em!important}
.mt3em {margin-top: 3em!important} .mr3em {margin-right: 3em!important} .mb3em {margin-bottom: 3em!important} .ml3em {margin-left: 3em!important} .pt3em {padding-top: 3em!important} .pr3em {padding-right: 3em!important} .pb3em {padding-bottom: 3em!important} .pl3em {padding-left: 3em!important}
.mt3_5em{margin-top: 3.5em!important} .mr3_5em{margin-right: 3.5em!important} .mb3_5em{margin-bottom: 3.5em!important} .ml3_5em{margin-left: 3.5em!important} .pt3_5em{padding-top: 3.5em!important} .pr3_5em{padding-right: 3.5em!important} .pb3_5em{padding-bottom: 3.5em!important} .pl3_5em{padding-left: 3.5em!important}
.mt4em {margin-top: 4em!important} .mr4em {margin-right: 4em!important} .mb4em {margin-bottom: 4em!important} .ml4em {margin-left: 4em!important} .pt4em {padding-top: 4em!important} .pr4em {padding-right: 4em!important} .pb4em {padding-bottom: 4em!important} .pl4em {padding-left: 4em!important}
.mt4_5em{margin-top: 4.5em!important} .mr4_5em{margin-right: 4.5em!important} .mb4_5em{margin-bottom: 4.5em!important} .ml4_5em{margin-left: 4.5em!important} .pt4_5em{padding-top: 4.5em!important} .pr4_5em{padding-right: 4.5em!important} .pb4_5em{padding-bottom: 4.5em!important} .pl4_5em{padding-left: 4.5em!important}
.mt5em {margin-top: 5em!important} .mr5em {margin-right: 5em!important} .mb5em {margin-bottom: 5em!important} .ml5em {margin-left: 5em!important} .pt5em {padding-top: 5em!important} .pr5em {padding-right: 5em!important} .pb5em {padding-bottom: 5em!important} .pl5em {padding-left: 5em!important}
.mt5_5em{margin-top: 5.5em!important} .mr5_5em{margin-right: 5.5em!important} .mb5_5em{margin-bottom: 5.5em!important} .ml5_5em{margin-left: 5.5em!important} .pt5_5em{padding-top: 5.5em!important} .pr5_5em{padding-right: 5.5em!important} .pb5_5em{padding-bottom: 5.5em!important} .pl5_5em{padding-left: 5.5em!important}
.mt6em {margin-top: 6em!important} .mr6em {margin-right: 6em!important} .mb6em {margin-bottom: 6em!important} .ml6em {margin-left: 6em!important} .pt6em {padding-top: 6em!important} .pr6em {padding-right: 6em!important} .pb6em {padding-bottom: 6em!important} .pl6em {padding-left: 6em!important}
.mt6_5em{margin-top: 6.5em!important} .mr6_5em{margin-right: 6.5em!important} .mb6_5em{margin-bottom: 6.5em!important} .ml6_5em{margin-left: 6.5em!important} .pt6_5em{padding-top: 6.5em!important} .pr6_5em{padding-right: 6.5em!important} .pb6_5em{padding-bottom: 6.5em!important} .pl6_5em{padding-left: 6.5em!important}
.mt7em {margin-top: 7em!important} .mr7em {margin-right: 7em!important} .mb7em {margin-bottom: 7em!important} .ml7em {margin-left: 7em!important} .pt7em {padding-top: 7em!important} .pr7em {padding-right: 7em!important} .pb7em {padding-bottom: 7em!important} .pl7em {padding-left: 7em!important}
.mt7_5em{margin-top: 7.5em!important} .mr7_5em{margin-right: 7.5em!important} .mb7_5em{margin-bottom: 7.5em!important} .ml7_5em{margin-left: 7.5em!important} .pt7_5em{padding-top: 7.5em!important} .pr7_5em{padding-right: 7.5em!important} .pb7_5em{padding-bottom: 7.5em!important} .pl7_5em{padding-left: 7.5em!important}
.mt8em {margin-top: 8em!important} .mr8em {margin-right: 8em!important} .mb8em {margin-bottom: 8em!important} .ml8em {margin-left: 8em!important} .pt8em {padding-top: 8em!important} .pr8em {padding-right: 8em!important} .pb8em {padding-bottom: 8em!important} .pl8em {padding-left: 8em!important}
.mt8_5em{margin-top: 8.5em!important} .mr8_5em{margin-right: 8.5em!important} .mb8_5em{margin-bottom: 8.5em!important} .ml8_5em{margin-left: 8.5em!important} .pt8_5em{padding-top: 8.5em!important} .pr8_5em{padding-right: 8.5em!important} .pb8_5em{padding-bottom: 8.5em!important} .pl8_5em{padding-left: 8.5em!important}
.mt9em {margin-top: 9em!important} .mr9em {margin-right: 9em!important} .mb9em {margin-bottom: 9em!important} .ml9em {margin-left: 9em!important} .pt9em {padding-top: 9em!important} .pr9em {padding-right: 9em!important} .pb9em {padding-bottom: 9em!important} .pl9em {padding-left: 9em!important}
.mt9_5em{margin-top: 9.5em!important} .mr9_5em{margin-right: 9.5em!important} .mb9_5em{margin-bottom: 9.5em!important} .ml9_5em{margin-left: 9.5em!important} .pt9_5em{padding-top: 9.5em!important} .pr9_5em{padding-right: 9.5em!important} .pb9_5em{padding-bottom: 9.5em!important} .pl9_5em{padding-left: 9.5em!important}
.mt5 {margin-top: 5px!important} .mr5 {margin-right: 5px!important} .mb5 {margin-bottom: 5px!important} .ml5 {margin-left: 5px!important} .pt5 {padding-top: 5px!important} .pr5 {padding-right: 5px!important} .pb5 {padding-bottom: 5px!important} .pl5 {padding-left: 5px!important}
.mt10 {margin-top: 10px!important} .mr10 {margin-right: 10px!important} .mb10 {margin-bottom: 10px!important} .ml10 {margin-left: 10px!important} .pt10 {padding-top: 10px!important} .pr10 {padding-right: 10px!important} .pb10 {padding-bottom: 10px!important} .pl10 {padding-left: 10px!important}
.mt15 {margin-top: 15px!important} .mr15 {margin-right: 15px!important} .mb15 {margin-bottom: 15px!important} .ml15 {margin-left: 15px!important} .pt15 {padding-top: 15px!important} .pr15 {padding-right: 15px!important} .pb15 {padding-bottom: 15px!important} .pl15 {padding-left: 15px!important}
.mt20 {margin-top: 20px!important} .mr20 {margin-right: 20px!important} .mb20 {margin-bottom: 20px!important} .ml20 {margin-left: 20px!important} .pt20 {padding-top: 20px!important} .pr20 {padding-right: 20px!important} .pb20 {padding-bottom: 20px!important} .pl20 {padding-left: 20px!important}
.mt25 {margin-top: 25px!important} .mr25 {margin-right: 25px!important} .mb25 {margin-bottom: 25px!important} .ml25 {margin-left: 25px!important} .pt25 {padding-top: 25px!important} .pr25 {padding-right: 25px!important} .pb25 {padding-bottom: 25px!important} .pl25 {padding-left: 25px!important}
.mt30 {margin-top: 30px!important} .mr30 {margin-right: 30px!important} .mb30 {margin-bottom: 30px!important} .ml30 {margin-left: 30px!important} .pt30 {padding-top: 30px!important} .pr30 {padding-right: 30px!important} .pb30 {padding-bottom: 30px!important} .pl30 {padding-left: 30px!important}
.mt35 {margin-top: 35px!important} .mr35 {margin-right: 35px!important} .mb35 {margin-bottom: 35px!important} .ml35 {margin-left: 35px!important} .pt35 {padding-top: 35px!important} .pr35 {padding-right: 35px!important} .pb35 {padding-bottom: 35px!important} .pl35 {padding-left: 35px!important}
.mt40 {margin-top: 40px!important} .mr40 {margin-right: 40px!important} .mb40 {margin-bottom: 40px!important} .ml40 {margin-left: 40px!important} .pt40 {padding-top: 40px!important} .pr40 {padding-right: 40px!important} .pb40 {padding-bottom: 40px!important} .pl40 {padding-left: 40px!important}
.mtAuto {margin-top: auto!important} .mrAuto {margin-right: auto!important} .mbAuto {margin-bottom: auto!important} .mlAuto {margin-left: auto!important} .ptAuto {padding-top: auto!important} .prAuto {padding-right: auto!important} .pbAuto {padding-bottom: auto!important} .plAuto {padding-left: auto!important}
.mt0 {margin-top: 0!important} .mr0 {margin-right: 0!important} .mb0 {margin-bottom: 0!important} .ml0 {margin-left: 0!important} .pt0 {padding-top: 0!important} .pr0 {padding-right: 0!important} .pb0 {padding-bottom: 0!important} .pl0 {padding-left: 0!important}
/* margin, padding | ~=スペース区切り毎の正確な値 | mt,mr,mb,ml,pt,pr,pb,pl,ptb,plr | !importantつき（2023.09追加） */
[data-marpad~="mtXXXL"] {margin-top:var(--site-marpad-XXXL)!important} [data-marpad~="mrXXXL"] {margin-right:var(--site-marpad-XXXL)!important} [data-marpad~="mbXXXL"] {margin-bottom:var(--site-marpad-XXXL)!important} [data-marpad~="mlXXXL"] {margin-left:var(--site-marpad-XXXL)!important} [data-marpad~="ptXXXL"] {padding-top:var(--site-marpad-XXXL)!important} [data-marpad~="prXXXL"] {padding-right:var(--site-marpad-XXXL)!important} [data-marpad~="pbXXXL"] {padding-bottom:var(--site-marpad-XXXL)!important} [data-marpad~="plXXXL"] {padding-left:var(--site-marpad-XXXL)!important} [data-marpad~="ptbXXXL"]{padding-top:var(--site-marpad-XXXL)!important;padding-bottom:var(--site-marpad-XXXL)!important} [data-marpad~="plrXXXL"]{padding-right:var(--site-marpad-XXXL)!important;padding-left:var(--site-marpad-XXXL)!important}
[data-marpad~="mtXXL"] {margin-top:var(--site-marpad-XXL)!important} [data-marpad~="mrXXL"] {margin-right:var(--site-marpad-XXL)!important} [data-marpad~="mbXXL"] {margin-bottom:var(--site-marpad-XXL)!important} [data-marpad~="mlXXL"] {margin-left:var(--site-marpad-XXL)!important} [data-marpad~="ptXXL"] {padding-top:var(--site-marpad-XXL)!important} [data-marpad~="prXXL"] {padding-right:var(--site-marpad-XXL)!important} [data-marpad~="pbXXL"] {padding-bottom:var(--site-marpad-XXL)!important} [data-marpad~="plXXL"] {padding-left:var(--site-marpad-XXL)!important} [data-marpad~="ptbXXL"] {padding-top:var(--site-marpad-XXL)!important;padding-bottom:var(--site-marpad-XXL)!important} [data-marpad~="plrXXL"] {padding-right:var(--site-marpad-XXL)!important;padding-left:var(--site-marpad-XXL)!important}
[data-marpad~="mtXL"] {margin-top:var(--site-marpad-XL)!important} [data-marpad~="mrXL"] {margin-right:var(--site-marpad-XL)!important} [data-marpad~="mbXL"] {margin-bottom:var(--site-marpad-XL)!important} [data-marpad~="mlXL"] {margin-left:var(--site-marpad-XL)!important} [data-marpad~="ptXL"] {padding-top:var(--site-marpad-XL)!important} [data-marpad~="prXL"] {padding-right:var(--site-marpad-XL)!important} [data-marpad~="pbXL"] {padding-bottom:var(--site-marpad-XL)!important} [data-marpad~="plXL"] {padding-left:var(--site-marpad-XL)!important} [data-marpad~="ptbXL"] {padding-top:var(--site-marpad-XL)!important;padding-bottom:var(--site-marpad-XL)!important} [data-marpad~="plrXL"] {padding-right:var(--site-marpad-XL)!important;padding-left:var(--site-marpad-XL)!important}
[data-marpad~="mtL"] {margin-top:var(--site-marpad-L)!important} [data-marpad~="mrL"] {margin-right:var(--site-marpad-L)!important} [data-marpad~="mbL"] {margin-bottom:var(--site-marpad-L)!important} [data-marpad~="mlL"] {margin-left:var(--site-marpad-L)!important} [data-marpad~="ptL"] {padding-top:var(--site-marpad-L)!important} [data-marpad~="prL"] {padding-right:var(--site-marpad-L)!important} [data-marpad~="pbL"] {padding-bottom:var(--site-marpad-L)!important} [data-marpad~="plL"] {padding-left:var(--site-marpad-L)!important} [data-marpad~="ptbL"] {padding-top:var(--site-marpad-L)!important;padding-bottom:var(--site-marpad-L)!important} [data-marpad~="plrL"] {padding-right:var(--site-marpad-L)!important;padding-left:var(--site-marpad-L)!important}
[data-marpad~="mtM"] {margin-top:var(--site-marpad-M)!important} [data-marpad~="mrM"] {margin-right:var(--site-marpad-M)!important} [data-marpad~="mbM"] {margin-bottom:var(--site-marpad-M)!important} [data-marpad~="mlM"] {margin-left:var(--site-marpad-M)!important} [data-marpad~="ptM"] {padding-top:var(--site-marpad-M)!important} [data-marpad~="prM"] {padding-right:var(--site-marpad-M)!important} [data-marpad~="pbM"] {padding-bottom:var(--site-marpad-M)!important} [data-marpad~="plM"] {padding-left:var(--site-marpad-M)!important} [data-marpad~="ptbM"] {padding-top:var(--site-marpad-M)!important;padding-bottom:var(--site-marpad-M)!important} [data-marpad~="plrM"] {padding-right:var(--site-marpad-M)!important;padding-left:var(--site-marpad-M)!important}
[data-marpad~="mtS"] {margin-top:var(--site-marpad-S)!important} [data-marpad~="mrS"] {margin-right:var(--site-marpad-S)!important} [data-marpad~="mbS"] {margin-bottom:var(--site-marpad-S)!important} [data-marpad~="mlS"] {margin-left:var(--site-marpad-S)!important} [data-marpad~="ptS"] {padding-top:var(--site-marpad-S)!important} [data-marpad~="prS"] {padding-right:var(--site-marpad-S)!important} [data-marpad~="pbS"] {padding-bottom:var(--site-marpad-S)!important} [data-marpad~="plS"] {padding-left:var(--site-marpad-S)!important} [data-marpad~="ptbS"] {padding-top:var(--site-marpad-S)!important;padding-bottom:var(--site-marpad-S)!important} [data-marpad~="plrS"] {padding-right:var(--site-marpad-S)!important;padding-left:var(--site-marpad-S)!important}
[data-marpad~="mtXS"] {margin-top:var(--site-marpad-XS)!important} [data-marpad~="mrXS"] {margin-right:var(--site-marpad-XS)!important} [data-marpad~="mbXS"] {margin-bottom:var(--site-marpad-XS)!important} [data-marpad~="mlXS"] {margin-left:var(--site-marpad-XS)!important} [data-marpad~="ptXS"] {padding-top:var(--site-marpad-XS)!important} [data-marpad~="prXS"] {padding-right:var(--site-marpad-XS)!important} [data-marpad~="pbXS"] {padding-bottom:var(--site-marpad-XS)!important} [data-marpad~="plXS"] {padding-left:var(--site-marpad-XS)!important} [data-marpad~="ptbXS"] {padding-top:var(--site-marpad-XS)!important;padding-bottom:var(--site-marpad-XS)!important} [data-marpad~="plrXS"] {padding-right:var(--site-marpad-XS)!important;padding-left:var(--site-marpad-XS)!important}
[data-marpad~="mtXXS"] {margin-top:var(--site-marpad-XXS)!important} [data-marpad~="mrXXS"] {margin-right:var(--site-marpad-XXS)!important} [data-marpad~="mbXXS"] {margin-bottom:var(--site-marpad-XXS)!important} [data-marpad~="mlXXS"] {margin-left:var(--site-marpad-XXS)!important} [data-marpad~="ptXXS"] {padding-top:var(--site-marpad-XXS)!important} [data-marpad~="prXXS"] {padding-right:var(--site-marpad-XXS)!important} [data-marpad~="pbXXS"] {padding-bottom:var(--site-marpad-XXS)!important} [data-marpad~="plXXS"] {padding-left:var(--site-marpad-XXS)!important} [data-marpad~="ptbXXS"] {padding-top:var(--site-marpad-XXS)!important;padding-bottom:var(--site-marpad-XXS)!important} [data-marpad~="plrXXS"] {padding-right:var(--site-marpad-XXS)!important;padding-left:var(--site-marpad-XXS)!important}
[data-marpad~="mt1px"] {margin-top:1px!important} [data-marpad~="mr1px"] {margin-right:1px!important} [data-marpad~="mb1px"] {margin-bottom:1px!important} [data-marpad~="ml1px"] {margin-left:1px!important} [data-marpad~="pt1px"] {padding-top:1px!important} [data-marpad~="pr1px"] {padding-right:1px!important} [data-marpad~="pb1px"] {padding-bottom:1px!important} [data-marpad~="pl1px"] {padding-left:1px!important} [data-marpad~="ptb1px"] {padding-top:1px!important;padding-bottom:1px!important} [data-marpad~="plr1px"] {padding-right:1px!important;padding-left:1px!important}
[data-marpad~="mt1em"] {margin-top:1em!important} [data-marpad~="mr1em"] {margin-right:1em!important} [data-marpad~="mb1em"] {margin-bottom:1em!important} [data-marpad~="ml1em"] {margin-left:1em!important} [data-marpad~="pt1em"] {padding-top:1em!important} [data-marpad~="pr1em"] {padding-right:1em!important} [data-marpad~="pb1em"] {padding-bottom:1em!important} [data-marpad~="pl1em"] {padding-left:1em!important} [data-marpad~="ptb1em"] {padding-top:1em!important;padding-bottom:1em!important} [data-marpad~="plr1em"] {padding-right:1em!important;padding-left:1em!important}
[data-marpad~="mt2em"] {margin-top:2em!important} [data-marpad~="mr2em"] {margin-right:2em!important} [data-marpad~="mb2em"] {margin-bottom:2em!important} [data-marpad~="ml2em"] {margin-left:2em!important} [data-marpad~="pt2em"] {padding-top:2em!important} [data-marpad~="pr2em"] {padding-right:2em!important} [data-marpad~="pb2em"] {padding-bottom:2em!important} [data-marpad~="pl2em"] {padding-left:2em!important} [data-marpad~="ptb2em"] {padding-top:2em!important;padding-bottom:2em!important} [data-marpad~="plr2em"] {padding-right:2em!important;padding-left:2em!important}
[data-marpad~="mt0"] {margin-top:0!important} [data-marpad~="mr0"] {margin-right:0!important} [data-marpad~="mb0"] {margin-bottom:0!important} [data-marpad~="ml0"] {margin-left:0!important} [data-marpad~="pt0"] {padding-top:0!important} [data-marpad~="pr0"] {padding-right:0!important} [data-marpad~="pb0"] {padding-bottom:0!important} [data-marpad~="pl0"] {padding-left:0!important} [data-marpad~="ptb0"] {padding-top:0!important;padding-bottom:0!important} [data-marpad~="plr0"] {padding-right:0!important;padding-left:0!important}
[data-marpad~="mtXL_flexible"] {margin-top:var(--site-marpad-XL-flexible)!important} [data-marpad~="mrXL_flexible"] {margin-right:var(--site-marpad-XL-flexible)!important} [data-marpad~="mbXL_flexible"] {margin-bottom:var(--site-marpad-XL-flexible)!important} [data-marpad~="mlXL_flexible"] {margin-left:var(--site-marpad-XL-flexible)!important} [data-marpad~="ptXL_flexible"] {padding-top:var(--site-marpad-XL-flexible)!important} [data-marpad~="prXL_flexible"] {padding-right:var(--site-marpad-XL-flexible)!important} [data-marpad~="pbXL_flexible"] {padding-bottom:var(--site-marpad-XL-flexible)!important} [data-marpad~="plXL_flexible"] {padding-left:var(--site-marpad-XL-flexible)!important} [data-marpad~="ptbXL_flexible"] {padding-top:var(--site-marpad-XL-flexible)!important;padding-bottom:var(--site-marpad-XL-flexible)!important} [data-marpad~="plrXL_flexible"] {padding-right:var(--site-marpad-XL-flexible)!important;padding-left:var(--site-marpad-XL-flexible)!important}
[data-marpad~="mtL_flexible"] {margin-top:var(--site-marpad-L-flexible)!important} [data-marpad~="mrL_flexible"] {margin-right:var(--site-marpad-L-flexible)!important} [data-marpad~="mbL_flexible"] {margin-bottom:var(--site-marpad-L-flexible)!important} [data-marpad~="mlL_flexible"] {margin-left:var(--site-marpad-L-flexible)!important} [data-marpad~="ptL_flexible"] {padding-top:var(--site-marpad-L-flexible)!important} [data-marpad~="prL_flexible"] {padding-right:var(--site-marpad-L-flexible)!important} [data-marpad~="pbL_flexible"] {padding-bottom:var(--site-marpad-L-flexible)!important} [data-marpad~="plL_flexible"] {padding-left:var(--site-marpad-L-flexible)!important} [data-marpad~="ptbL_flexible"] {padding-top:var(--site-marpad-L-flexible)!important;padding-bottom:var(--site-marpad-L-flexible)!important} [data-marpad~="plrL_flexible"] {padding-right:var(--site-marpad-L-flexible)!important;padding-left:var(--site-marpad-L-flexible)!important}
[data-marpad~="mtM_flexible"] {margin-top:var(--site-marpad-M-flexible)!important} [data-marpad~="mrM_flexible"] {margin-right:var(--site-marpad-M-flexible)!important} [data-marpad~="mbM_flexible"] {margin-bottom:var(--site-marpad-M-flexible)!important} [data-marpad~="mlM_flexible"] {margin-left:var(--site-marpad-M-flexible)!important} [data-marpad~="ptM_flexible"] {padding-top:var(--site-marpad-M-flexible)!important} [data-marpad~="prM_flexible"] {padding-right:var(--site-marpad-M-flexible)!important} [data-marpad~="pbM_flexible"] {padding-bottom:var(--site-marpad-M-flexible)!important} [data-marpad~="plM_flexible"] {padding-left:var(--site-marpad-M-flexible)!important} [data-marpad~="ptbM_flexible"] {padding-top:var(--site-marpad-M-flexible)!important;padding-bottom:var(--site-marpad-M-flexible)!important} [data-marpad~="plrM_flexible"] {padding-right:var(--site-marpad-M-flexible)!important;padding-left:var(--site-marpad-M-flexible)!important}
[data-marpad~="mtS_flexible"] {margin-top:var(--site-marpad-S-flexible)!important} [data-marpad~="mrS_flexible"] {margin-right:var(--site-marpad-S-flexible)!important} [data-marpad~="mbS_flexible"] {margin-bottom:var(--site-marpad-S-flexible)!important} [data-marpad~="mlS_flexible"] {margin-left:var(--site-marpad-S-flexible)!important} [data-marpad~="ptS_flexible"] {padding-top:var(--site-marpad-S-flexible)!important} [data-marpad~="prS_flexible"] {padding-right:var(--site-marpad-S-flexible)!important} [data-marpad~="pbS_flexible"] {padding-bottom:var(--site-marpad-S-flexible)!important} [data-marpad~="plS_flexible"] {padding-left:var(--site-marpad-S-flexible)!important} [data-marpad~="ptbS_flexible"] {padding-top:var(--site-marpad-S-flexible)!important;padding-bottom:var(--site-marpad-S-flexible)!important} [data-marpad~="plrS_flexible"] {padding-right:var(--site-marpad-S-flexible)!important;padding-left:var(--site-marpad-S-flexible)!important}
/* cliphidden | 構造上は存在するが表示させない要素 */
.cliphidden { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0px 0px 99.99% 99.99%); overflow: hidden; width: 1px; height: 1px; white-space: nowrap; padding: 0; border: 0; }
/* ***************************************************************************************************
@KEYFRAMES
*************************************************************************************************** */
/* ----------------------------------------------------------------------------
fade
-------------------------------------------------------------------------------
例 { animation: .7s ease-out both M_fadeIn__0_1; }
例 { animation: 2s cubic-bezier(.25, .46, .45, .94) .3s both M_fadeIn__0_1; }
例 { animation: 1.1s ease-out 0s infinite alternate both M_fadeIn__0_1; }
---------------------------------------------------------------------------- */
@keyframes M_fadeIn__0_1 {
0% {opacity: 0}
100% {opacity: 1}
}
@keyframes M_fadeIn__1_0 {
0% {opacity: 1}
100% {opacity: 0}
}
@keyframes M_fadeIn_and_scaleGetBigger_and_blur {
0% { opacity: 0; transform: scale(.5); filter: blur(10px);}
100% { opacity: 1; transform: scale(1); filter: blur(0px);}
}
/* ***************************************************************************************************
BASE
*************************************************************************************************** */
/* ======================================================================================
NOSCRIPT
====================================================================================== */
.noscript_jsOnGuidance {
position: absolute;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
color: #000;
line-height: 1.75;
font-size: 16px;
text-align: center;
letter-spacing: .07em;
background: rgba(255, 255, 255, .9);
padding: 1.7em;
border: 4px double #000;
}
/* ======================================================================================
SITE_WRAPPER | ボディ、サイトラッパー
====================================================================================== */
body.is_drawerMenu_gNav_active {
overflow: hidden;
}
.siteWrap {
}
/* ======================================================================================
SITE_HEADER
====================================================================================== */
/* //////////////////////////////////////////////////////////////////////////////////
* 先祖要素に backdrop-filter を設定すると、子孫要素の position: fixed; が効かなくなる点に注意。
////////////////////////////////////////////////////////////////////////////////// */
.siteHeaderWrap {
--base-siteHeaderWrap-bgBokeh-background: 255, 255, 255; /* rgb */
--base-siteHeaderWrap-bgBokeh-backdropFilter: blur(4px) saturate(150%);
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: var(--site-stickyHeader-height);
overflow: hidden;
line-height: 1.35;
color: rgba(var(--site-themeColor-text_dark), 1);
box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.15);
/*background: rgba(255,119,122,0.16);*/
}
.siteHeaderWrap::before { /* ぼかし背景 */
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgba(var(--base-siteHeaderWrap-bgBokeh-background), .9);
-webkit-backdrop-filter: var(--base-siteHeaderWrap-bgBokeh-backdropFilter);
backdrop-filter: var(--base-siteHeaderWrap-bgBokeh-backdropFilter);
opacity:1;
transition: opacity .8s ease-out;
}
body.winScrolledShort .siteHeaderWrap::before {
opacity: 1; /* setting.js | WinScrolledObserver | 「とても少しスクロールしたら」ヘッダーの背景色を表示する */
}
.siteHeader {
display: flex;
flex-direction: column;
justify-content: space-between;
/*width: 96%;*/
/*max-width: 1200px;*/
height: var(--site-stickyHeader-height);
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 900px) {
.siteHeaderWrap {
--base-siteHeaderWrap-bgBokeh-background: 244, 244, 244; /* rgb */
--base-siteHeaderWrap-bgBokeh-backdropFilter: blur(20px) saturate(180%);
position: absolute;
height: auto;
overflow: visible;
position: fixed;
}
.siteHeaderWrap::before {
content: none;
}
.siteHeader {
width: 100%;
}
}
/* siteHeaderLogoWrap
------------------------------------------------------------------------ */
.siteHeaderLogoWrap {
display: flex;
justify-content: space-between;
padding: 12px 2%;
background: #000f;
color: #fff;
}
/* siteHeaderLogo
---------------------------------------------------- */
.siteHeaderLogo {
flex: 0 0 35%;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
max-width: 238px;
height: 60px;
line-height: 1;
font-size: inherit;
z-index: 999;
}
.siteHeaderLogo img {
position: absolute;
inset: 0;
width: 100%;
max-width: none;
height: 100%;
object-fit: contain;
object-position: left center;
}
/* hNavWrap
---------------------------------------------------- */
.hNavWrap {
flex: 0 1 auto;
display: flex;
align-items: center; /* SP時に解除すること */
}
.hNav {
display: flex;
justify-content: flex-end;
/*column-gap: min((28 / 1366 * 100vw), 28px);*/
}
.hNav li {
display: flex;
--M-fluidFontSize-max-fontsize: 13;
--M-fluidFontSize-min-fontsize: 11;
--M-fluidFontSize-max-viewport: 1200;
--M-fluidFontSize-min-viewport: 900;
min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
font-size: clamp(
calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
);
letter-spacing: .14em;
}
.hNav li:where([data-hnav-li="bgColor"]) + li:where([data-hnav-li="bgColor"]) {
margin-left:4px;
}
.hNav li a {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
position: relative;
z-index: 0;
padding: 1em 0;
}
.hNav li:where([data-hnav-li="text"]) a {
color:#fff;
padding-left: .5em;
padding-right: .5em;
margin-right: min((10 / 1200 * 100vw), 40px);
line-height: 1.35;
}
.hNav li:where([data-hnav-li="bgColor"]) a {
color: #fff;
background-color: #000;
/*padding-left: 1.2em;
padding-right: 1.2em;*/
}
.hNav li a::before {
content: "icon-pic";
display: none;
}
.hNav li a::after {
content: none; /* icon-new */
display: block;
position: absolute;
top: 0;
left: 0;
right: auto;
z-index: 1;
line-height: 1.35;
/*color: rgba(var(--site-variationColor-yellow), 1);*/
color: #fff;
font-family: var(--site-font_family-en_1);
font-size: 1rem;
text-align: center;
/*font-weight: bold;*/
letter-spacing: -.01em;
background: #cf0e3b;
transform-origin: center bottom;
}
.hNav li:where([data-hnav-li="text"]) a::after {
transform: scale(.9) translateY(calc(-100% + .4em));
}
.hNav li:where([data-hnav-li="bgColor"]) a::after {
/*transform: scale(.9) translateY(-100%);*/
top: 0;
left: revert;
right: 0;
/*transform: scale(.9);*/
font-size: 1.05rem;
transform-origin: right top;
padding: 0 .5em;
}
.hNav li.is_new a::after { content: "NEW";}
.hNav li.is_update a::after { content: "UPDATE";}
.hNav li a > div {
flex: 0 0 100%;
}
.hNav li a > div::after { /* hover, current 用 */
content: "";
position: absolute;
z-index: -1;
transform: scaleX(0);
transform-origin: right top;
}
.hNav li:where([data-hnav-li="text"]) a > div::after { /* 下線 */
inset: auto 0 0;
border-bottom: 1px solid currentColor;
transition: transform .2s var(--M-easing-easeInOutQuint);
}
.hNav li:where([data-hnav-li="bgColor"]) a > div::after { /* 背景色 */
inset: 0;
background-color: #666;
transition: transform .25s var(--M-easing-easeInOutQuint);
}
/* -- Individual -- */
.hNav li:where(.telNav) {
display: none;
}
/* off色 */
.hNav li:where(.reqNav) a { background-color: rgba(var(--site-specificColor-req), 1); padding-left: 1.25em; padding-right: 1.25em;}
.hNav li:where(.resNav) a { background-color: rgba(var(--site-specificColor-res), 1); padding-left: 2.75em; padding-right: 2.75em;}
/* on色 */
.hNav li:where(.reqNav) a > div::after { background-color: rgba(var(--site-specificColor-req-active), 1);}
.hNav li:where(.resNav) a > div::after { background-color: rgba(var(--site-specificColor-res-active), 1);}
/* -- hover, current -- */
@media (hover: hover) and (pointer: fine) {
.hNav li a[href]:hover > div::after {
transform: scaleX(1);
transform-origin: left top;
}
}
.hNav li.is_current a > div::after {
transform: scaleX(1);
transform-origin: left top;
}
/* -- placeholder -- */
.hNav li:where([data-hnav-li="text"]) a:not([href]) {
opacity: .25;
}
.hNav li:where([data-hnav-li="bgColor"]) a:not([href]) {
opacity: .11;
}
/* drawerBtn_gNavWrap
---------------------------------------------------- */
.drawerBtn_gNavWrap {
display: none;
}
@media screen and (min-width: 900.02px) {
/* icon */
.hNav li:where([data-hnav-li="bgColor"]) a > div::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
}
.hNav li:where(.reqNav) a div:before {
background-image: url("../images/share/hnav_ico_req.svg") ;
}
.hNav li:where(.resNav) a div:before {
background-image: url("../images/share/hnav_ico_res.svg") ;
}
/* //////////////////////////////////////////////////////////////////////////////////
* setting.js | WinScrolledObserver | PC時のトップページのみ「とても少しスクロールしたら」ヘッダーロゴを標準サイズにする（小さくする）
////////////////////////////////////////////////////////////////////////////////// */
/* body.indexP .siteHeaderLogo {
transition: height .2s ease-out;
}
body.indexP:not(.winScrolledVeryShort) .siteHeaderLogo {
height: 56px;
}*/
}
@media screen and (max-width: 900px) {
.siteHeaderLogoWrap {
align-items: center;
height: var(--site-stickyHeader-height);
margin-top: 0;
padding-left: 17px;
}
/* siteHeaderLogo
---------------------------------------------------- */
.siteHeaderLogo {
flex: 0 0 calc(100% - var(--site-stickyHeader-height) - 15px);
height: 45px;
transform: translateY(1px);
}
/* hNavWrap
---------------------------------------------------- */
.hNavWrap {
align-items: stretch;
position: fixed;
bottom: 0;
left: 0;
z-index: 997;
width: 100%;
height: var(--site-stickyConversionSP-height);
}
.hNav {
flex: 0 0 100%;
justify-content: space-between;
column-gap: 0;
background: rgba(255, 255, 255, .35);
}
.hNav li {
flex: 1 1;
display: flex;
line-height: 1.2;
font-size: 1.1rem;
letter-spacing: .03em;
margin-left: 0;
}
.hNav li:nth-of-type(n+2) {
/*border-left: 1px solid #fff;*/
margin-left: 1px;
}
.hNav li a {
flex: 1 1 100%;
text-align: center;
padding: .4em .8em;
margin: 0;
}
.hNav li:where([data-hnav-li="text"]) a {
color: #fff;
background: #615c5b;
}
.hNav li a::before {
display: block;
content: "";
width: 20px;
height: 20px;
}
.hNav li a::after { /* icon-new */
left: 0;
right: auto;
color: #fff;
background: #aa0;
padding: .1em .15em .05em;
transform: scale(.85);
transform-origin: left top;
}
.hNav li a > div {
flex: 0 0 100%;
}
.hNav li a > div::after { /* 一旦削除 */
content: none;
}
/* -- hover, current -- */
/*.hNav li.is_current a > div::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(circle at center -60%, rgba(255, 255, 255, .53) 0%, rgba(255, 255, 255, 0) 77%);
border: none;
transform: scaleX(1);
transition: none;
}*/
/* -- Individual -- */
.hNav li.telNav a::before { background-image: url("../images/share/hnav_ico_tel.svg"); }
.hNav li.outNav a::before { background-image: url("../images/share/hnav_ico_out.svg"); }
.hNav li.mapNav a::before { background-image: url("../images/share/hnav_ico_map.svg"); }
.hNav li.reqNav a::before { background-image: url("../images/share/hnav_ico_req.svg"); }
.hNav li.resNav a::before { background-image: url("../images/share/hnav_ico_res.svg"); }
/* -- placeholder -- */
.hNav li a:not([href]) {
opacity: 1;
}
.hNav li a:not([href])::before,
.hNav li a:not([href]) > div {
opacity: .25;
}
/* drawerBtn_gNavWrap
---------------------------------------------------- */
.drawerBtn_gNavWrap {
display: flex;
/*position: fixed;*/
position: absolute;
top: 0;
right: 0;
z-index: 999;
height: var(--site-stickyHeader-height);
aspect-ratio: 1;
}
.drawerBtn_gNavWrap button {
/* clear */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: inherit;
font: inherit;
background: transparent;
border: none;
border-radius: 0;
cursor: pointer;
/* reset */
flex: 1 1 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 5px ;
transition: background .18s ease;
/* background: rgb(var(--base-siteHeaderWrap-bgBokeh-background) / .8);
-webkit-backdrop-filter: var(--base-siteHeaderWrap-bgBokeh-backdropFilter);
backdrop-filter: var(--base-siteHeaderWrap-bgBokeh-backdropFilter);*/
}
/* .drawerBtn_gNavWrap button[aria-expanded="true"] {
color: #fff;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
@media (hover: hover) and (pointer: fine) {
.drawerBtn_gNavWrap button:hover {
background: rgba(var(--base-siteHeaderWrap-bgBokeh-background), .7);
}
.drawerBtn_gNavWrap button[aria-expanded="true"]:hover {
background: rgba(0, 0, 0, .04);
}
}*/
.drawerBtn_gNavWrap button .line {
flex: 0 0 65%;
display: block;
position: relative;
height: 2px;
background: currentColor;
margin: auto;
transition: background .13s ease-in-out;
}
/* ≡ ライン */
.drawerBtn_gNavWrap button .line::before,
.drawerBtn_gNavWrap button .line::after {
content: "";
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 2px;
background: currentColor;
transition: transform .18s ease-in-out;
}
.drawerBtn_gNavWrap button .line::before { transform: translateY(-10px);}
.drawerBtn_gNavWrap button .line::after { transform: translateY(10px);}
/* × ライン （グロナビアクティブ時） */
.drawerBtn_gNavWrap button[aria-expanded="true"] .line { background: rgb(255 255 255 / 0);}
.drawerBtn_gNavWrap button[aria-expanded="true"] .line::before { transform: rotate(135deg);}
.drawerBtn_gNavWrap button[aria-expanded="true"] .line::after { transform: rotate(-135deg);}
.drawerBtn_gNavWrap button .label {
/* cliphidden */
position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0px 0px 99.99% 99.99%); overflow: hidden; width: 1px; height: 1px; white-space: nowrap; padding: 0; border: 0;
}
/* ウィンドウサイズを変えた瞬間はアニメーションさせない */
body.is_drawerMenu_gNav_screenNarrow .drawerBtn_gNavWrap button {
transition: background 0s;
}
body.is_drawerMenu_gNav_screenNarrow .drawerBtn_gNavWrap button .line {
transition: background 0s;
}
body.is_drawerMenu_gNav_screenNarrow .drawerBtn_gNavWrap button .line::before,
body.is_drawerMenu_gNav_screenNarrow .drawerBtn_gNavWrap button .line::after {
transition: transform 0s;
}
}
@media screen and (max-width: 600px) {
/* hNavWrap
---------------------------------------------------- */
.hNav li {
font-size: 1rem;
letter-spacing: .02em;
}
.hNav li a {
padding: .4em;
}
}
@media screen and (max-width: 359.08px) {
/* hNavWrap
---------------------------------------------------- */
.hNav li {
font-size: .9rem;
letter-spacing: 0em;
}
}
/* gNavWrap
------------------------------------------------------------------------ */
.gNavWrap {
margin: 0 auto 5px;
}
.gNav {
display: flex;
justify-content: center;
}
.gNav li {
flex: 1 1 auto;
display: flex;
position: relative;
z-index: 0;
text-align: center;
letter-spacing: normal;
}
/* .gNav li:where(:nth-of-type(1))::before,
.gNav li::after {
content: "";
position: absolute;
z-index: 1;
width: 1px;
height: .8em;
background: currentColor;
margin: auto;
}
.gNav li:where(:nth-of-type(1))::before {
inset: 0 auto 0 0;
}
.gNav li::after {
inset: 0 0 0 auto;
}*/
.gNav li a {
--base-gNav-a-pad-lr: 9px;
flex: 0 0 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
position: relative;
z-index: 0;
padding: .75em var(--base-gNav-a-pad-lr) .6em;
}
.gNav li a::before {
content: none; /* icon-new */
display: block;
position: absolute;
top: 0;
left: auto;
right: auto;
z-index: 1;
line-height: 1.1;
color: #e05d4f;
font-family: var(--site-font_family-en_1);
font-size: 1rem;
font-weight: bold;
}
.gNav li.is_new a::before { content: "NEW";}
.gNav li.is_update a::before { content: "UPDATE";}
.gNav li a > div {
flex: 0 0 100%;
}
.gNav li .ja {
display: block;
font-family: var(--site-font_family-serif);
--M-fluidFontSize-max-fontsize: 14;
--M-fluidFontSize-min-fontsize: 12;
--M-fluidFontSize-max-viewport: 1300;
--M-fluidFontSize-min-viewport: 901;
min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
font-size: clamp(
calc(var(--M-fluidFontSize-min-fontsize) * .1rem),
calc(calc(var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - calc(var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport)))),
calc(var(--M-fluidFontSize-max-fontsize) * .1rem)
);
letter-spacing: 0.08em;
line-height: 1;
color: rgba(var(--site-themeColor-main_text), 1);
width: 100%;
}
.gNav li .en {
display: block;
/*margin-top:0.5em;*/
font-size: 1.4rem;
font-family: var(--site-font_family-en_1);
letter-spacing: 0.08em;
line-height: 1;
}
.gNav li a > div::after { /* hover, current 用 */
content: "";
position: absolute;
z-index: -1;
inset: auto 0 0;
width: min((80% - (var(--base-gNav-a-pad-lr) * 2)), 60px);
margin: 0 auto;
border-bottom: 2px solid #baa591;
transform: scaleX(0);
transform-origin: right top;
transition: transform .2s var(--M-easing-easeInOutQuint);
}
/* -- Individual -- */
.gNav li:where(.outNav, .mapNav) {
display: none;
}
/* -- hover, current -- */
@media (hover: hover) and (pointer: fine) {
.gNav li a[href]:hover > div::after {
transform: scaleX(1);
transform-origin: left top;
}
}
.gNav li.is_current a > div::after {
transform: scaleX(1);
transform-origin: left top;
}
/* -- placeholder -- */
.gNav li a:not([href]) {
opacity: .25;
}
@media screen and (min-width: 900.02px) {
/* //////////////////////////////////////////////////////////////////////////////////
* setting.js | WinScrolledObserver | PC時のトップページのみ「とても少しスクロールしたら」グロナビを表示する（[!]ユーザビリティ注：非表示の間、グロナビはタブ移動ができなくなる）
////////////////////////////////////////////////////////////////////////////////// */
/*body.indexP .gNavWrap {
visibility: hidden;
opacity: 0;
transition: visibility 0s ease-out .3s, opacity .3s ease-out;
}
body.indexP.winScrolledVeryShort .gNavWrap {
visibility: visible;
opacity: 1;
transition: visibility 0s ease-out, opacity .3s ease-out;
}*/
.gNavWrap {
max-width: 1200px;
width: 96%;
}
.gNav li a .en {
opacity: 1;
visibility: visible;
transition: opacity 0.15s ease;
}
.gNav li a .ja {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* -- hover, current -- */
@media (hover: hover) and (pointer: fine) {
.gNav li.is_current a[href] > div .ja,
.gNav li a[href]:hover .ja {
opacity: 1;
visibility: visible;
}
.gNav li.is_current a[href] > div .en,
.gNav li a[href]:hover .en {
opacity: 0;
visibility: hidden;
}
}
}
@media screen and (max-width: 900px) {
/* //////////////////////////////////////////////////////////////////////////////////
* .gNavWrap ：背景カバーの役割有
* .gNavWrap::before ：背景カバーの色
* .gNav ：横からスライド表示
* .gNav li a ：メニューボタンと重ならないように右余白設ける
////////////////////////////////////////////////////////////////////////////////// */
.gNavWrap {
display: block;
position: fixed;
inset: 0;
z-index: 998;
height: 100lvh;
overflow-x: hidden;
overflow-y: scroll;
overscroll-behavior-y: none; /* none=バウンドしない */
background: transparent;
margin-bottom: 0;
width: 100%;
}
.gNavWrap[aria-hidden="true"] {
visibility: hidden;
opacity: 0;
transition: visibility 0s ease calc(.4s + .1s),
opacity .4s ease;
}
.gNavWrap[aria-hidden="false"] {
visibility: visible;
opacity: 1;
transition: visibility 0s ease,
opacity .4s ease;
}
.gNavWrap[aria-hidden="false"]::before {
content: "";
display: block;
position: fixed;
inset: 0;
z-index: -1;
width: 100%;
background: rgba(239, 240, 238, .7);
}
.gNav {
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 100%;
min-height: calc(100lvh + 1px);
color: rgba(var(--site-variationColor-whitish), 1);
background: rgba(var(--site-variationColor-blackish), 1);
padding: calc(var(--site-stickyHeader-height) + 20px) 20px calc(var(--site-stickyConversionSP-height) + (var(--site-stickyHeader-height) + 20px)) 40px ;
transform-origin: right top;
transition: right .6s ease;
}
.gNavWrap[aria-hidden="true"] .gNav {
right: -100%;
}
.gNavWrap[aria-hidden="false"] .gNav {
right: 0;
}
.gNav li {
display: block;
width: 100%;
font-size: 1.6rem;
text-align: left;
letter-spacing: .06em;
margin-bottom: .6em;
}
.gNav li::before,
.gNav li::after {
content: none;
}
.gNav li a {
--base-gNav-a-pad-lr: 1vw;
display: block;
width: 100%;
padding: .75em var(--site-stickyHeader-height) .7em var(--base-gNav-a-pad-lr);
}
.gNav li a::before { /* icon-new */
top: 2px;
left: var(--base-gNav-a-pad-lr);
color: #f7ae6a;
}
.gNav li a > div {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row-reverse;
}
.gNav li .ja {
letter-spacing: 0.08em;
line-height: 1;
font-size: 1.25rem;
padding-left: 0.5em;
color: #cacaca;
}
.gNav li .en {
font-size: 1.8rem;
font-weight: 500;
}
.gNav li a > div::after { /* hover, current 用 */
bottom: 4px;
width: min(80%, 50px);
margin: 0 var(--base-gNav-a-pad-lr);
}
/* -- Individual -- */
.gNav li:where(.outNav, .mapNav) {
display: block;
}
/* -- hover, current -- */
@media (hover: hover) and (pointer: fine) {
.gNav li a[href]:hover > div::after {
transform: scaleX(1);
transform-origin: left top;
}
}
.gNav li.is_current a > div::after {
transform: scaleX(1);
transform-origin: left top;
}
/* -- placeholder -- */
.gNav li a:not([href]) {
opacity: .3;
}
}
@media screen and (max-width: 359.08px) {
.gNav {
width: 87vw;
}
}
/* ======================================================================================
SITE_FOOTER
====================================================================================== */
.siteFooterWrap {
color: rgba(var(--site-themeColor-base_text), 1);
/*background: #efefee;*/
}
@media screen and (max-width: 900px) {
.siteFooterWrap {
padding-bottom: var(--site-stickyConversionSP-height);
}
}
/* pagebottomFreeSpaceWrap
------------------------------------------------------------------------ */
/* commonInformationWrap
---------------------------------------------------- */
.commonInformationWrap {
background: rgba(var(--site-themeColor-main), 1);
padding: var(--site-marpad-M) 0;
}
.commonInformationHeader .heading {
line-height: 1.35;
color: rgba(var(--site-themeColor-text_darkGray), 1);
font-family: var(--site-font_family-en_1);
font-size: 1.95rem;
text-align: center;
text-transform: uppercase;
letter-spacing: normal;
margin-bottom: 2em;
}
.commonInformationBody {
}
@media screen and (max-width: 600px) {
.commonInformationHeader .heading {
font-size: 1.4rem;
}
}
/* siteFooter
------------------------------------------------------------------------ */
.siteFooter {
--base-siteFooter-descendantElem-pad-lr: clamp(20px, 5.5vw, 50px);
}
.siteFooter > * {
padding-left: var(--base-siteFooter-descendantElem-pad-lr);
padding-right: var(--base-siteFooter-descendantElem-pad-lr);
}
/* contactAddress
---------------------------------------------------- */
.contactAddress {
min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
line-height: 1.4;
font-size: clamp(1.1rem, (13.2 / 600 * 100vw), 1.32rem);
font-style: normal;
text-align: center;
letter-spacing: .06em;
padding-top: 45px;
padding-bottom: 45px;
padding-left: calc(var(--base-siteFooter-descendantElem-pad-lr) + .8em);
padding-right: calc(var(--base-siteFooter-descendantElem-pad-lr) + .8em);
}
.contactAddressInner {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.contactAddress .nameBox { /* 2024.02 一式追加 */
width: 100%;
line-height: 1.5;
text-align: center;
letter-spacing: .02em;
margin-bottom: 2px;
}
.contactAddress .nameBox :is(.txt, .post) {
display: block;
}
.contactAddress .nameBox :is(.name) {
display: inline-block;
}
.contactAddress .nameBox .name {
margin: 0 -.1em;
}
.contactAddress .telBox {
padding: .09em 0 .33em;
}
.contactAddress .telBox a {
display: inline-block;
min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
overflow: hidden;
line-height: 1;
font-size: clamp(3.3rem, (44 / 600 * 100vw), 4.4rem);
font-weight: 500;
/*line-height: .9;
font-family: var(--site-font_family-en_1);
font-size: clamp(3.8rem, (53 / 600 * 100vw), 5.3rem);
text-shadow: 0 0 1px rgba(var(--site-themeColor-base_text), .1), 0 0 1px rgba(var(--site-themeColor-base_text), .3);*/
}
.contactAddress .telBox strong {
display: flex;
justify-content: center;
align-items: baseline;
}
.contactAddress .telBox .ttl {
height: .57em;
margin-left: 1px;
margin-right: .19em;
}
.contactAddress .telBox .ttl img {
display: block;
width: auto;
max-width: none;
height: 100%;
}
.contactAddress .telBox .value {
letter-spacing: clamp(.085em, (6 / 900 * 100vw), .1em);
/*letter-spacing: -.007em;
transform: translateY(.04em);*/
}
.contactAddress .timeBox {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
font-size: .91em;
}
.contactAddress .timeBox > * {
display: flex;
align-items: baseline;
}
.contactAddress .timeBox > *:not(:last-of-type) {
margin-right: 1em;
}
.contactAddress .timeBox .ttl {
letter-spacing: .1em;
white-space: nowrap;
/*padding-right: .2em;*/
}
.contactAddress .timeBox .valueWrap,
.contactAddress .timeBox .valueWrap > * {
display: inline;
}
/*.contactAddress .timeBox .valueWrap > *:not(:last-of-type)::after {
content: "／";
margin: 0 .2em;
}*/
.contactAddress .timeBox .closed .except {
font: inherit;
margin-left: .5em;
}
/* holiday | footer内 | .footHolidayWrap にはスタイル設定禁止 */
.contactAddress .noteBox .footHolidayWrap .holiday {
margin-top: 1.5em;
}
.contactAddress .noteBox .footHolidayWrap .holiday .holidayInner {
display: inline-block;
line-height: 1.55;
color: #af4154;
text-align: center;
padding: .525em 1em .8em;
border: 1px solid currentColor;
}
.contactAddress .noteBox .footHolidayWrap .holiday .holidayInner .ttl {
display: block;
font-size: 1.17em;
letter-spacing: .07em;
margin-bottom: .15em;
}
/* footCorpLink
---------------------------------------------------- */
.footCorpLink {
}
.footCorpLink dl {
}
.footCorpLink a {
display: block;
width: 70%;
max-width: 400px;
margin: 3.2rem auto 0;
}
.footCorpLink a img {
display: block;
width: 100%;
max-width: none;
height: auto;
}
/* copyright
---------------------------------------------------- */
.copyright {
--M-fluidFontSize-max-fontsize: 11.25;
--M-fluidFontSize-min-fontsize: 10;
--M-fluidFontSize-max-viewport: 600;
--M-fluidFontSize-min-viewport: 480;
--M-fluidFontSize-fontSize: clamp( var(--M-fluidFontSize-min-fontsize) * .1rem, (var(--M-fluidFontSize-min-fontsize) * .1rem) + (1vw - (var(--M-fluidFontSize-min-viewport) / 100 * .1rem)) * (100 * (var(--M-fluidFontSize-max-fontsize) - var(--M-fluidFontSize-min-fontsize)) / (var(--M-fluidFontSize-max-viewport) - var(--M-fluidFontSize-min-viewport))), var(--M-fluidFontSize-max-fontsize) * .1rem );
display: block;
min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
font-size: var(--M-fluidFontSize-fontSize);
text-align: center;
letter-spacing: .02em;
padding: 10px 1em 60px;
}
@media screen and (max-width: 600px) {
.contactAddress {
letter-spacing: .03em;
}
}
@media screen and (max-width: 359.08px) {
/* contactAddress
---------------------------------------------------- */
.contactAddress .telBox a {
font-size: min((35 / 359 * 100vw), 3.5rem);
}
.contactAddress .telBox .value {
letter-spacing: .05em;
}
.contactAddress .timeBox {
flex-wrap: wrap;
}
}
/* lastPagetop
------------------------------------------------------------------------ */
/* lastPagetop
------------------------------------------------------------------------ */
.lastPagetop {
white-space: nowrap;
position: fixed;
/*width: 50px;
height: 50px;
border-radius: 50%;*/
cursor: pointer;
right: 20px;
bottom: 20px;
z-index: 1000;
}
.lastPagetop a {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
aspect-ratio: 1;
background: #000;
border-radius: 100%;
margin: 0 auto;
}
.lastPagetop a img {
display: block;
width: 36%;
max-width: none;
height: auto;
transform: rotate(-90deg);
}
@media screen and (max-width: 900px) {
.lastPagetop {
position: static;
width: 100%;
height: auto;
margin-top: -30px;
padding-bottom: 30px;
}
.lastPagetop a {
width: clamp(45px, (50 / 600 * 100vw), 60px);
}
}
/* ウィンドウサイズ確認表示 */
/*
body::before {content: "[PC]1390より大";display: flex;align-items: center;position: fixed;inset: 0 auto;color: red;font-size: 2em;font-weight: bold;text-shadow: 0 0 2px #000, 0 0 5px #000, 0 0 10px #000;border-left: 10px solid red;opacity: .5;pointer-events: none; }
@media screen and (max-width: 1390px) { body::before {content: "[PCm]1390 以下";border-left: 10px solid green;color:green;} }
@media screen and (max-width: 1200px) { body::before {content: "[PCs]1200 以下";border-left: 10px solid blue;color:royalblue;} }
@media screen and (max-width: 900px) { body::before {content: "[TB]900 以下";border-left: 10px solid yellow;color:orange;} }
@media screen and (max-width: 600px) { body::before {content: "[SP]600 以下";border-left: 10px solid magenta;color:magenta;} }
@media screen and (max-width: 480px) { body::before {content: "[SPs]480 以下";border-left: 10px solid cyan;color:cyan;} }
*/