@charset "utf-8"; /* ************************************************************************************************************* * file name: default.css * Alteration: 2022.06 （余白変更、カスタムプロパティ名変更など） * style info: 物件スタイルCSS｛メイン要素内＋αのデフォルトスタイル｝ ---------------------------------------------------------------------------------------------------------------- * - CssCustomProperties - OuterWide - Module_Wrapper - Module_Element * * * MODULE_LAST - etc ---------------------------------------------------------------------------------------------------------------- * {A} ************************************************************************************************************* */ /* *************************************************************************************************** MODULE *************************************************************************************************** */ /* ============================================================================ CssCustomProperties ============================================================================ */ :root { /* 基本の幅 */ --default-contentWide-L: 100%; --default-contentWide-XM: 94%; --default-contentWide-M: 86%; /*92%*/ /* 【bg_fixed】でキャプション表示エリアを増やすため余白を多めに確保する */ --default-contentWide-S: 82%; /*84%*/ /* 余白 */ --default-marpad-XXL: 150px; --default-marpad-XL: 130px; --default-marpad-L: 100px; --default-marpad-M: 80px; --default-marpad-S: 60px; --default-marpad-XS: 50px; --default-marpad-XXS: 30px; } @media screen and (max-width: 1340px) { :root { /* 基本の幅 */ --default-contentWide-L: 100%; --default-contentWide-M: 82%; /*92%*/ --default-contentWide-S: 82%; /*92%*/ } } @media screen and (max-width: 768px) { :root { /* 基本の幅 */ --default-contentWide-L: 100%; --default-contentWide-XM: 93%; --default-contentWide-M: 82%; /*94%*/ --default-contentWide-S: 82%; /*94%*/ /* 余白 */ --default-marpad-XXL: 120px; --default-marpad-XL: 100px; --default-marpad-L: 80px; --default-marpad-M: 60px; --default-marpad-S: 50px; --default-marpad-XS: 40px; /* --default-marpad-XXS: 25px;*/ } } /* width: var(--default-contentWide-L); width: var(--default-contentWide-M); width: var(--default-contentWide-S); var(--default-marpad-M) var(xxxxxxxxxx) */ /* ============================================================================ OuterWide ------------------------------------------------------------------------------- コンテナー、コンテンツ類の幅・余白の初期設定。 ============================================================================ */ /* ---------------- margin */ .container, .pageThemeHeader, .mainRoleCaption, .contbox, [class*="sizeContentWide"] { clear: both; margin: 0 auto; } /* ---------------- width */ /* OUTER */ .container { width: var(--default-contentWide-L); } /* INNER */ .pageThemeHeader { width: var(--default-contentWide-M); max-width: 1260px;} /* .mainRoleCaption { width: var(--default-contentWide-M); max-width: 1260px;}*/ .mainRoleCaption { width: var(--default-contentWide-XM, 94%); max-width: 1260px;} /* '-XM' = 【bg_fixed】で幅を変更した影響 */ .contbox { width: var(--default-contentWide-M); max-width: 1260px;} /* OVERWRITE | 上書き指定の為必ず最後に記述する。 */ .sizeContentWideL { width: var(--default-contentWide-L); } .sizeContentWideM { width: var(--default-contentWide-M); max-width: 1260px;} .sizeContentWideS { width: var(--default-contentWide-S); max-width: 1000px;} /* ------------------------ reset */ /* contbox類の入れ子は100%にリセットする。 */ .contbox .contbox/*, .contbox [class*="sizeContentWide"], [class*="sizeContentWide"] .contbox*/ { width: 100%; max-width: none; } /* ============================================================================ Module_Wrapper ------------------------------------------------------------------------------- コンテナー、コンテンツ、センテンス、 背景色チェンジ、スティックアウトボックス(横幅はみだしMAX) ============================================================================ */ /* container ---------------------------------------------------- */ .container { padding-top: var(--sentens-marpad-XL); padding-bottom: var(--sentens-marpad-XL); /*padding-top: var(--default-marpad-L);*/ /*padding-bottom: var(--sentens-marpad-XXL); *//* L */ /* 【bg_fixed】でキャプション表示エリアを増やすためbottomの値を増やす */ } .pageThemeHeaderContainer {} .pageThemeHeaderContainer + .container {} /* contbox ---------------------------------------------------- */ .contWrap {} .contbox {} .pageThemeHeader + .contbox { margin-top: var(--default-marpad-M); } /* sentence style. ---------------------------------------------------- */ .sizeSentenceMaxWidth { width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; } /* bgColor ---------------------------------------------------- */ .bgColorWh { background: #fff;} /* 白 */ .bgColorWhOpa { background: rgba(255,255,255, .3);} /* 白（透過） */ .bgColorBk { background: #000;} /* 黒 */ .bgColorBkOpa { background: rgba(0,0,0, .3);} /* 黒（透過） */ .bgColor01 {} .bgColor02 {} /* stickoutFullbox | 固定幅のボックスをはみ出して、ウィンドウ幅いっぱいに広げる ---------------------------------------------------- */ .stickoutFullbox { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); /*opacity: .5; box-shadow: 0 0 0 10px red inset, 0 0 5px 10px red;*/ } .stickoutFullbox img.stickoutFullboxPic, .stickoutFullbox .stickoutFullboxPic img { width: 100%; max-width: none; } /* ----------------------------------------------------------------------------- 余白上下調整用 ============================================================================ */ :root { --sentens-marpad-XXL: 150px; --sentens-marpad-XL: 120px; --sentens-marpad-L: 100px; --sentens-marpad-M: 80px; --sentens-marpad-S: 60px; --sentens-marpad-XS: 50px; --sentens-marpad-XXS: 30px; } @media screen and (max-width: 1340px) { :root { --sentens-marpad-XXL: 140px; --sentens-marpad-XL: 110px; --sentens-marpad-L: 90px; --sentens-marpad-M: 70px; --sentens-marpad-S: 50px; --sentens-marpad-XS: 40px; --sentens-marpad-XXS: 20px; } } @media screen and (max-width: 980px) { /*{TBs}*/ :root { --sentens-marpad-XXL: 120px; --sentens-marpad-XL: 100px; --sentens-marpad-L: 80px; --sentens-marpad-M: 60px; --sentens-marpad-S: 40px; --sentens-marpad-XS: 30px; --sentens-marpad-XXS: 20px; } } @media screen and (max-width: 768px) { :root { --sentens-marpad-XXL: 100px; --sentens-marpad-XL: 90px; --sentens-marpad-L: 70px; --sentens-marpad-M: 60px; --sentens-marpad-S: 40px; --sentens-marpad-XS: 30px; --sentens-marpad-XXS: 20px; } } @media screen and (max-width: 520px) { /*{SPs}*/ :root { --sentens-marpad-XXL: 90px; --sentens-marpad-XL: 80px; --sentens-marpad-L: 60px; --sentens-marpad-M: 50px; --sentens-marpad-S: 40px; --sentens-marpad-XS: 30px; --sentens-marpad-XXS: 20px; } } .sentensTopXXL {margin-top: var(--sentens-marpad-XXL);} .sentensTopXL {margin-top: var(--sentens-marpad-XL);} .sentensTopL {margin-top: var(--sentens-marpad-L);} .sentensTopM {margin-top: var(--sentens-marpad-M);} .sentensTopS {margin-top: var(--sentens-marpad-S);} .sentensTopXS {margin-top: var(--sentens-marpad-XS);} .sentensTopXXS {margin-top: var(--sentens-marpad-XXS);} .sentensBottomXXL {margin-bottom: var(--sentens-marpad-XXL);} .sentensBottomXL {margin-bottom: var(--sentens-marpad-XL);} .sentensBottomL {margin-bottom: var(--sentens-marpad-L);} .sentensBottomM {margin-bottom: var(--sentens-marpad-M);} .sentensBottomS {margin-bottom: var(--sentens-marpad-S);} .sentensBottomXS {margin-bottom: var(--sentens-marpad-XS);} .sentensBottomXXS {margin-bottom: var(--sentens-marpad-XXS);} /* ============================================================================ Module_Element ------------------------------------------------------------------------------- 見出し ============================================================================ */ /* Heading_Elements ------------------------------------------------------------------------ */ /* ptHeading ---------------------------------------------------- */ .ptHeading .hTxt, [class*="hTxtStyh"] { display: block; min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */ /*line-height: 1.75;*/ line-height: 1.5; color: inherit; font-family: var(--site-font_family-serif); 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) ); font-weight: 300; /* familyが[noto*]の場合少し細目に設定 */ text-align: center; /*letter-spacing: .0875em;*/ letter-spacing: .15em; padding: 0; } .ptHeading .hTxt .kana, [class*="hTxtStyh"] .kana { letter-spacing: -.05em; margin-right: .05em; } .ptHeading .hTxt small, [class*="hTxtStyh"] small { color: inherit; font-family: inherit; } /* -- */ h3.ptHeading {} h3.ptHeading .hTxt, .hTxtStyh3 { --M-fluidFontSize-max-fontsize: 24; --M-fluidFontSize-min-fontsize: 16.5; /*18.5*/ line-height: 1.75em; /*margin-bottom: 80px;*/ } h4.ptHeading {} h4.ptHeading .hTxt, .hTxtStyh4 { --M-fluidFontSize-max-fontsize: 20; --M-fluidFontSize-min-fontsize: 15.125; /*16.75*/ margin-bottom: 30px; } h4.ptHeading .hTxt[data-fontsize="L"], .hTxtStyh4[data-fontsize="L"] { --M-fluidFontSize-max-fontsize: 24; --M-fluidFontSize-min-fontsize: 16.5; /*18.5*/ } h5.ptHeading .hTxt, h6.ptHeading .hTxt, .hTxtStyh5, .hTxtStyh6 { --M-fluidFontSize-max-fontsize: 18; --M-fluidFontSize-min-fontsize: 14.25; /*15.6*/ margin-bottom: .85em; } .ptHeading [data-htxt_style="line"], [data-htxt_style="line"] { /*color: #505050;*/ padding-bottom: .75em; border-bottom: 1px solid #fff; } /* hTxt_en (英語のタイトル画像) --------------------------------- */ .ptHeading .hTxt_en { --M-fluidFontSize-max-fontsize: 30; --M-fluidFontSize-min-fontsize: 20; display: block; min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */ line-height: 1.35; font-family: var(--site-font_family-en2); 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) ); color: #ccc; text-align: center; margin-bottom: 40px; } /* hWord --------------------------------- */ /*.ptHeading .hWord + .hTxt, .ptHeading .hWord + [class*="hTxtStyh"] { margin-top: 25px; }*/ /*.ptHeading .hWord { display: block; line-height: 1.1; text-align: center; margin: 0 auto; } .ptHeading .hWord .item { display: inline-block; line-height: 1.1; color: #000; font-family: var(--site-font_family-en1), serif; font-size: 2.4rem; text-transform: uppercase; letter-spacing: .1em; padding: .1em 1em; border: 0 solid #000; border-width: 1px 0; } .ptHeading .hWord .item.ja { font-size: 2.05rem; text-transform: none; letter-spacing: .05em; padding: .25em 1em; }*/ @media screen and (max-width: 980px) { /*{TBs}*/ .ptHeading .hTxt, [class*="hTxtStyh"] { line-height: 1.6; /*text-align: left; letter-spacing: .05em;*/ letter-spacing: .11em; } /*h3.ptHeading .hTxt, h4.ptHeading .hTxt, h5.ptHeading .hTxt, h6.ptHeading .hTxt, .hTxtStyh3, .hTxtStyh4, .hTxtStyh5, .hTxtStyh6 { text-align: left; letter-spacing: .05em; }*/ /* hTxt_en (英語のタイトル画像) --------------------------------- */ .ptHeading .hTxt_en { margin-bottom: 30px; } /* hWord --------------------------------- */ /*.ptHeading .hWord + .hTxt, .ptHeading .hWord + [class*="hTxtStyh"] { margin-top: 20px; }*/ /*.ptHeading .hWord .item { font-size: 2.1rem; letter-spacing: .07em; } .ptHeading .hWord .item.ja { font-size: 1.8rem; letter-spacing: .03em; }*/ } @media screen and (max-width: 768px) { /*{SP}*/ /*.ptHeading .hTxt, [class*="hTxtStyh"] { font-weight: normal; }*/ } /* *************************************************************************************************** BASE | Bukken_Framework ------------------------------------------------------------------------------------------------------ * unique--contents // main要素 - mainRoleHeaderVisualWrap // - メインヘッダービジュアル - pageThemeWrap // - ページテーマのラッパー - yokokuAnnounce // - 予告広告の告知 - mainRoleFooter // - メインフッター *************************************************************************************************** */ /* ============================================================================ unique--contents ============================================================================ */ main {} /* ---------------------------------------------------------------------------- mainRoleHeaderVisualWrap ---------------------------------------------------------------------------- */ /*pTtlWrap -------------------------------------------------- */ .pTtlWrap { width: 100%; display: flex; align-items: center; background:#fff; color:#333; padding-top: clamp(20px, 3vw, 80px); padding-bottom: clamp(20px, 3vw, 80px); min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */ line-height: 1; } .pTtl .en { display: block; font-size:5.5rem; font-family: var(--site-font_family-en2); letter-spacing: 0.05em; line-height: 1; } .pTtl .ja { --M-fluidFontSize-max-fontsize: 16; --M-fluidFontSize-min-fontsize: 10; 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) ); line-height: 1; } @media screen and (max-width: 1340px) { /*{TBl}*/ .pTtl .en { --M-fluidFontSize-max-fontsize: 55; --M-fluidFontSize-min-fontsize: 28; --M-fluidFontSize-max-viewport: 1340; --M-fluidFontSize-min-viewport: 360; 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) ); } } /* ---------------------------------------------------------------------------- mainRoleHeaderVisualBox ---------------------------------------------------------------------------- */ .mainRoleHeaderVisualBox { position: relative; } .mainRoleHeaderVisualWrap[data-height="L"] { /*aspect-ratio: 8 / 3;*/ width: 100%; height: 37.5vw; } .mainRoleHeaderVisualWrap[data-height="S"] { /*aspect-ratio: 5 / 1;*/ width: 100%; height: 20vw; } .mainRoleHeaderVisualWrap::after { /*content: "image photo"; color: #fff; background: rgba(0, 0, 0, .5); padding: 0.2em 0.8em;*/ } @media screen and (max-width: 768px) { /*{SP}*/ .mainRoleHeaderVisualBox .ppic { overflow: hidden; } .mainRoleHeaderVisualBox .ppic img { max-width:none; width:150%; } } /* breadcrumbWrap ---------------------------------------------------- */ .breadcrumbWrap { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; /*padding-bottom: 3em;*/ } .breadcrumbWrap::before { content: ""; position: absolute; z-index: inherit; top: 0; left: 0; width: 100%; height: 100%; opacity: .3; transition: opacity .5s ease-out; } .breadcrumbBox { opacity: 1; visibility: visible; transition: opacity .5s ease-out, visibility .5s ease-out; } .breadcrumbWrap ol { display: flex; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 1; padding: .4em; } .breadcrumbWrap li { line-height: 1.35; color: #fff; font-size: 1rem; text-align: right; /*text-shadow: 0 0 10px rgba(0, 0, 0, .2);*/ letter-spacing: .05em; padding: .2em 0; } .breadcrumbWrap.oppose li { color: #333; } .breadcrumbWrap li:nth-of-type(n+2)::before { content: ">"; margin: 0 .4em; } .breadcrumbWrap .current { color: rgba(255, 255, 255, 1); /*text-shadow: 0 0 10px rgba(0, 0, 0, .5);*/ } .breadcrumbWrap.oppose .current { color: rgba(0, 0, 0, 1); } .breadcrumbWrap a { color: inherit; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .breadcrumbWrap a:hover, .breadcrumbWrap a:focus { text-decoration: underline; } } @media screen and (max-width: 768px) { /*{SP}*/ .breadcrumbWrap::before { opacity: .15; } .breadcrumbBox { opacity: 0; visibility: hidden; } } /* ---------------------------------------------------------------------------- pageThemeWrap ---------------------------------------------------------------------------- */ .pageThemeWrap {} /* ---------------------------------------------------------------------------- yokokuAnnounce ---------------------------------------------------------------------------- */ .yokokuAnnounce { color: var(--site-themeColor-base-text); background: var(--site-themeColor-base); /* これに余白設定は不可 */ } .yokokuWrap {} .yokokuWrap .yokoku { display: flex; flex-wrap: wrap; justify-content: space-between; /*width: 86%;*/ width: var(--default-contentWide-XM, 94%); max-width: 1260px; line-height: 1.6; color: #fff; /*font-family: var(--site-font_family-sans);*/ margin: 0 auto; padding: 10px 0; border: 0 solid rgba(235, 235, 228, .5); background: linear-gradient(to right, rgba(235, 235, 228, .1) 0%, rgba(235, 235, 228, .14) 50%,rgba(235, 235, 228, .1) 100%) left center / 100% calc(100% - 4px) no-repeat; border-width: 1px 0; } .yokokuWrap dt { flex: 0 0 180px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 10px 1em; border-right: 1px solid rgba(235, 235, 228, .24); } .yokokuWrap dt > span { display: inline-block; line-height: 1.2; color: #fff; font-size: 1.1428em; /*background: #91a2ab; margin-bottom: .6em; padding: .3em .7em .25em;*/ } .yokokuWrap dd { flex: 1 1; font-size: 1em; padding: 10px 3.5em; } /* -- Individual -- */ .indexP .yokokuWrap { padding: 50px 0; } .outlineP .yokokuWrap { padding: 40px 0; } @media screen and (max-width: 1340px) { /*{TBl}*/ .yokokuWrap dt { flex-basis: 160px; } .yokokuWrap dd { padding-left: 2.5em; } } @media screen and (max-width: 768px) { /*{SP}*/ .yokokuWrap .yokoku { display: block; padding: 16px; } .yokokuWrap dt, .yokokuWrap dd { padding: 8px 0; } .yokokuWrap dt { display: block; border-right: none; } .yokokuWrap dt > span { font-size: 1.13207em; padding-bottom: .5em; border-bottom: 1px solid rgba(235, 235, 228, .24); } .yokokuWrap dd { font-size: .90566em; } /* -- Individual -- */ .indexP .yokokuWrap { padding: 40px 0; } .outlineP .yokokuWrap { padding: 40px 0; } } /* ---------------------------------------------------------------------------- apologyWrap ---------------------------------------------------------------------------- */ .apologyWrap { padding: 100px 0 0; } .indexP .yokokuWrap + .apologyWrap { padding-top: 30px !important; } .apologyBox { width: 86%; max-width: 1260px; line-height: 1.6; color: #eee; /*font-family: var(--site-font_family-sans);*/ margin: 0 auto; padding: 27px; border: 1px solid rgba(235, 235, 228, .4); } .apologyBox .txt { font-size: .975em; margin-top: .6em; } .apologyCorrection { display: block; margin-top: .5em; } @media screen and (max-width: 768px) { /*{SP}*/ .apologyWrap { padding: 80px 0 0; } .apologyBox { padding: 23px 16px; } .apologyBox .txt { font-size: .90566em; } } /* ---------------------------------------------------------------------------- mainRoleFooter ---------------------------------------------------------------------------- */ .mainRoleFooter { color: var(--site-themeColor-base-text); background: #666; /*background: var(--site-themeColor-base);*/ } .mainRoleCaption { padding: 40px 0; } .mainRoleCaption small { font-size: 1rem; } @media screen and (max-width: 768px) { .mainRoleCaption { padding-top: 30px; padding-bottom: 30px; } .mainRoleCaption small { font-size: 0.9rem; } } /* *************************************************************************************************** MODULE_PARTS *************************************************************************************************** */ /* ---------------------------------------------------------------------------- panoramaBnrWrap ---------------------------------------------------------------------------- */ .panoramaBnrWrap { text-align: center; /*padding-top: 0;*/ } /*.indexP .panoramaBnrWrap { background: red; padding: 50px 0; }*/ /* ---------------------------------------------------------------------------- lNav_Module 2021.10 ------------------------------------------------------------------------------- [2021.10.17] クラス名やスタイルの位置など変更 ------------------------------------------------------------------------------- - [.lNavWrap]は入れ子にしないことが前提です。 - [data-label_frame="true"]ラベルフレーム付きはSP時に必ず1カラムになります。 - 全ボタンの高さを揃えたい場合はJSにて調整を。 - 細かい設定は各ページ用CSSで設定を。 ------------------------------------------------------------------------------- - 例：
---------------------------------------------------------------------------- */ /* lNavWrap ---------------------------------------------------- */ .lNavWrap { width: 95%; max-width: calc(1260px + (30px * 2)); /* feeling. ※[.lNavWrap li 'padding']を加算 */ line-height: 1.35; font-size: 1.2em; margin: 0 auto; } .lNavWrap[data-position="top"] { padding: 60px 0 100px;} .lNavWrap[data-position="bottom"] { padding: 60px 0;} .lNavWrap ul { display: flex; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; } .lNavWrap li { flex-grow: 0; display: flex; width: 33.333%; margin: 0; padding: .82em 30px; transition: padding .2s ease; } .lNavWrap li a { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; min-height: 70px; color: #fff; text-align: center; background: rgba(var(--site-moduleLink-color), 1); /*background: linear-gradient(to right, #000 0%, #444 50%, #000 100%);*/ margin: 0 auto; padding: .5em 1.2em .55em; /*.5em 1.2em .55em | .5em 41px .55em*/ /*box-shadow: 0 2px 12px -3px rgba(0,0,25, .7);*/ transition: background .18s ease-out, border .18s ease-out, box-shadow .18s ease-out; } /*.lNavWrap li a::before { content: ""; display: block; position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; background: #fff; opacity: 0; transition: opacity .18s ease-out; }*/ /*.lNavWrap li:not(.is_current) a::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: auto; right: 16px; width: 0; height: 0; margin: auto; border-style: solid; border-width: 7px 0 7px 6px; border-color: transparent transparent transparent #fff; }*/ .lNavWrap li a .ln { display: inline-block; position: relative; z-index: 1; } .lNavWrap li a .ln .en { display: block; font-family: var(--site-font_family-en1); /*font-size: 1.2em;*/ font-size: 1.05263em; margin-bottom: -.1em; } .lNavWrap li a .ln .sml { display: inline-block; line-height: inherit; color: inherit; font-family: inherit; font-size: .77em; margin-top: 1px; } /* -- placeholder, hover, current -- */ .lNavWrap li a:not([href]) { color: rgba(255,255,255,.4); opacity: .5; } /*.lNavWrap li:not(.is_current) a:not([href])::after { opacity: 0; } @media (hover: hover) and (pointer: fine) { .lNavWrap li:not(.is_current) a[href]:hover, .lNavWrap li:not(.is_current) a[href]:focus { box-shadow: 0 0 4px -1px rgba(0,0,25, .98); } .lNavWrap li:not(.is_current) a[href]:hover::before, .lNavWrap li:not(.is_current) a[href]:focus::before { opacity: .18; } } .lNavWrap li.is_current a { }*/ @media screen and (max-width: 1340px) { /*{TBl}*/ .lNavWrap { max-width: calc(1260px + (1vw * 2)); /* feeling. ※[.lNavWrap li 'padding']を加算 */ font-size: 1.125em; } .lNavWrap[data-position="top"] { padding: 50px 0 80px;} .lNavWrap[data-position="bottom"] { padding: 50px 0;} .lNavWrap li { width: 50%; padding: .6em 1vw; } } @media screen and (max-width: 768px) { /*{SP}*/ .lNavWrap { /*font-size: 1.15em;*/ /*padding: 10px 0;*/ } .lNavWrap[data-position="top"] { padding: 40px 0 60px;} .lNavWrap[data-position="bottom"] { padding: 40px 0;} .lNavWrap ul { justify-content: space-between; } .lNavWrap li { width: 50%; padding: 4px; } .lNavWrap li a { min-height: 50px; padding: .75em .3em; /*.75em .3em | .75em 26px*/ } /*.lNavWrap li:not(.is_current) a::after { right: 12px; border-width: 6px 0 6px 5px; }*/ } @media screen and (max-width: 520px) { /*{SPs}*/ .lNavWrap { font-size: 1.1em; } } /* is_lNavWrap_labelFrame | SP時ラベルフレーム付き （透過背景ver） ---------------------------------------------------- */ @media screen and (max-width: 768px) { /*{SP}*/ .lNavWrap[data-label_frame="true"] { width: 98%; font-size: 1.175em; padding: 0; /*padding: 40px 0 30px;*/ } .lNavWrap[data-label_frame="true"][data-position="top"] { padding-top: 80px; /*20px*/ padding-bottom: 50px; /*60px*/ } .lNavWrap[data-label_frame="true"][data-position="bottom"] { padding-top: 80px; /*30px*/ padding-bottom: 30px; } .lNavWrap[data-label_frame="true"] .lNav { position: relative; text-align: center; } .lNavWrap[data-label_frame="true"] .lNav::before { /* for IE | Requires "width" */ content: attr(data-lnav_name); /*content: "PAGE MENU";*/ display: inline-flex; flex-wrap: nowrap; justify-content: center; align-items: center; line-height: 1; color: #ddd; font-family: var(--site-font_family-en1); font-size: 1.3rem; text-align: center; text-indent: .2em; letter-spacing: .2em; margin: auto; padding: 1em; } .lNavWrap[data-label_frame="true"] ul { position: relative; width: 100%; /*background: #fff; padding: 1.1em 0;*/ border-radius: 10px; } .lNavWrap[data-label_frame="true"] li { width: 94%; margin: 0 auto; padding: .3em 0; } .lNavWrap[data-label_frame="true"] li a { padding: .9em 26px; /*.9em .3em*/ } .lNavWrap[data-label_frame="true"] li:first-child a { border-radius: 4px 4px 0 0; } .lNavWrap[data-label_frame="true"] li:last-child a { border-radius: 0 0 4px 4px; } } @media screen and (max-width: 520px) { /*{SPs}*/ .lNavWrap[data-label_frame="true"] { font-size: 1.1em; } .lNavWrap[data-label_frame="true"] li a { min-height: 1px; } } /* ---------------------------------------------------------------------------- tNav_Module 2021.10 ------------------------------------------------------------------------------- - タブのナビ。ボタン量がウィンドウ幅を超えたら横スクロールになります。 - [.tNavWrap]は入れ子にしないことが前提です。 - 細かい設定は各ページ用CSSで設定を。 - 全画面表示コンテンツがアクティブの時はスクロールをオフにする設定を追加。 - - オフ：[グロナビ][venobox(venobox.js)] - - 保留：[画面下部のスティッキーエリアのお問い合わせ] ------------------------------------------------------------------------------- - 例：
---------------------------------------------------------------------------- */ /* tNavWrap ---------------------------------------------------- */ .tNavWrap { --default-tNav-yutori: .3em; --default-tNav-a-padding-top: .5em; --default-tNav-a-text-height: 1.9em; --default-tNav-a-padding-bottom: .55em; --default-tNav-li-max_width: 180px; /* ボタン幅をそろえる */ --default-tNav-li-quantity: 5; /* ボタンの数 */ position: relative; width: 100%; line-height: 1.35; font-size: 1.2em; margin: 0 auto; border: 0 solid rgba(var(--site-moduleLink-color), 1); /* ▼スクロールバー隠し [!]アクセシビリティが低下します */ /*overflow: hidden; max-height: calc(var(--default-tNav-a-padding-top) + var(--default-tNav-a-text-height) + var(--default-tNav-a-padding-bottom) + var(--default-tNav-yutori)); */ } .tNavWrap[data-position="top"] { border-bottom-width: 1px;} .tNavWrap[data-position="bottom"] { border-top-width: 1px;} .tNavWrap + .is_tNavWrap_adjacentContents { /* こちらを使ってもよい。上下ボーダーを表示 */ border: 0 solid rgba(var(--site-moduleLink-color), 1); /*border-width: 1px 0;*/ } /* 左右のぼかし処理 */ .tNavWrap:before, .tNavWrap:after { content: ""; position: absolute; top: 0; z-index: 2; width: 10px; height: 100%; pointer-events: none; } .tNavWrap:before { right: 0; /*background: linear-gradient(to right, rgba(3,3,3,0) 0%, #030303 100%);*/ } .tNavWrap:after { left: 0; /*background: linear-gradient(to left, rgba(3,3,3,0) 0%, #030303 100%);*/ } .tNav { -webkit-overflow-scrolling: touch; overflow: auto; text-align: center; } .tNavWrap[data-position="top"] .tNav { padding-top: var(--default-tNav-yutori);} .tNavWrap[data-position="bottom"] .tNav { padding-bottom:var(--default-tNav-yutori);} .tNavWrap ul { display: inline-flex; flex-wrap: nowrap; width: 100%; white-space: nowrap; max-width: calc(var(--default-tNav-li-max_width) * var(--default-tNav-li-quantity)); /* = (liのmax幅 * liの個数) */ margin: 0 auto; padding: 0; } .tNavWrap[data-position="top"] ul { align-items: flex-end;} .tNavWrap[data-position="bottom"] ul { align-items: flex-start;} .tNavWrap li { flex-grow: 0; box-sizing: content-box; /* :first-child,:last-child の為 */ display: flex; width: 100%; max-width: var(--default-tNav-li-max_width); margin: 0; padding: 0 1px; transition: padding .2s ease; } .tNavWrap li:first-child { padding-left: clamp(15px, 5vw, 30px); } .tNavWrap li:last-child { padding-right: clamp(15px, 5vw, 30px); } .tNavWrap li a { box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: calc(var(--default-tNav-a-padding-top) + var(--default-tNav-a-text-height) + var(--default-tNav-a-padding-bottom)); color: #fff; text-align: center; background: rgba(var(--site-moduleLink-color), 1); /*background: linear-gradient(to right, #000 0%, #444 50%, #000 100%);*/ margin: 0 auto; padding: var(--default-tNav-a-padding-top) 1.2em var(--default-tNav-a-padding-bottom); /*.5em 1.2em .55em | .5em 41px .55em*/ transition: background .18s ease-out, border .18s ease-out, box-shadow .18s ease-out, opacity .18s ease-out; } .tNavWrap[data-position="top"] li a { border-radius: 3px 3px 0 0;} .tNavWrap[data-position="bottom"] li a { border-radius: 0 0 3px 3px;} .tNavWrap li a .ln { display: inline-block; position: relative; z-index: 1; } .tNavWrap li a .ln .en { display: block; font-family: var(--site-font_family-en1); /*font-size: 1.2em;*/ font-size: 1.05263em; margin-bottom: -.2em; } .tNavWrap li a .ln .sml { display: inline-block; line-height: inherit; color: inherit; font-family: inherit; font-size: .77em; margin-top: 1px; } /* -- placeholder, hover, current -- */ .tNavWrap li a:not([href]) { color: rgba(255,255,255,.4); opacity: .5; } /*@media (hover: hover) and (pointer: fine) { .tNavWrap li:not(.is_current) a[href]:hover, .tNavWrap li:not(.is_current) a[href]:focus { } } .tNavWrap li.is_current a { }*/ /* [!] 全画面表示コンテンツがアクティブの時はスクロールをオフにする ---------------------------------------------------- */ body.vbox-open .tNav, /*body.is_drawerMenu_siteAttention_contact_active .tNav,*/ body.is_drawerMenu_gNav_active .tNav { overflow: hidden; } @media screen and (max-width: 768px) { /*{SP}*/ .tNavWrap { font-size: 1.1em; } } /* *************************************************************************************************** MODULE_LAST *************************************************************************************************** */ /* ============================================================================ etc ============================================================================ */ /* margin, padding | ~=スペース区切り毎の正確な値 | mt,mr,mb,ml,pt,pr,pb,pl,ptb,plr */ [data-marpad~="mtXXXL"] {margin-top:var(--default-marpad-XXXL)} [data-marpad~="mrXXXL"] {margin-right:var(--default-marpad-XXXL)} [data-marpad~="mbXXXL"] {margin-bottom:var(--default-marpad-XXXL)} [data-marpad~="mlXXXL"] {margin-left:var(--default-marpad-XXXL)} [data-marpad~="ptXXXL"] {padding-top:var(--default-marpad-XXXL)} [data-marpad~="prXXXL"] {padding-right:var(--default-marpad-XXXL)} [data-marpad~="pbXXXL"] {padding-bottom:var(--default-marpad-XXXL)} [data-marpad~="plXXXL"] {padding-left:var(--default-marpad-XXXL)} [data-marpad~="ptbXXXL"] {padding-top:var(--default-marpad-XXXL);padding-bottom:var(--default-marpad-XXXL)} [data-marpad~="plrXXXL"] {padding-right:var(--default-marpad-XXXL); padding-left:var(--default-marpad-XXXL)} [data-marpad~="mtXXL"] {margin-top:var(--default-marpad-XXL)} [data-marpad~="mrXXL"] {margin-right:var(--default-marpad-XXL)} [data-marpad~="mbXXL"] {margin-bottom:var(--default-marpad-XXL)} [data-marpad~="mlXXL"] {margin-left:var(--default-marpad-XXL)} [data-marpad~="ptXXL"] {padding-top:var(--default-marpad-XXL)} [data-marpad~="prXXL"] {padding-right:var(--default-marpad-XXL)} [data-marpad~="pbXXL"] {padding-bottom:var(--default-marpad-XXL)} [data-marpad~="plXXL"] {padding-left:var(--default-marpad-XXL)} [data-marpad~="ptbXXL"] {padding-top:var(--default-marpad-XXL);padding-bottom:var(--default-marpad-XXL)} [data-marpad~="plrXXL"] {padding-right:var(--default-marpad-XXL); padding-left:var(--default-marpad-XXL)} [data-marpad~="mtXL"] {margin-top:var(--default-marpad-XL)} [data-marpad~="mrXL"] {margin-right:var(--default-marpad-XL)} [data-marpad~="mbXL"] {margin-bottom:var(--default-marpad-XL)} [data-marpad~="mlXL"] {margin-left:var(--default-marpad-XL)} [data-marpad~="ptXL"] {padding-top:var(--default-marpad-XL)} [data-marpad~="prXL"] {padding-right:var(--default-marpad-XL)} [data-marpad~="pbXL"] {padding-bottom:var(--default-marpad-XL)} [data-marpad~="plXL"] {padding-left:var(--default-marpad-XL)} [data-marpad~="ptbXL"] {padding-top:var(--default-marpad-XL);padding-bottom:var(--default-marpad-XL)} [data-marpad~="plrXL"] {padding-right:var(--default-marpad-XL); padding-left:var(--default-marpad-XL)} [data-marpad~="mtL"] {margin-top:var(--default-marpad-L)} [data-marpad~="mrL"] {margin-right:var(--default-marpad-L)} [data-marpad~="mbL"] {margin-bottom:var(--default-marpad-L)} [data-marpad~="mlL"] {margin-left:var(--default-marpad-L)} [data-marpad~="ptL"] {padding-top:var(--default-marpad-L)} [data-marpad~="prL"] {padding-right:var(--default-marpad-L)} [data-marpad~="pbL"] {padding-bottom:var(--default-marpad-L)} [data-marpad~="plL"] {padding-left:var(--default-marpad-L)} [data-marpad~="ptbL"] {padding-top:var(--default-marpad-L);padding-bottom:var(--default-marpad-L)} [data-marpad~="plrL"] {padding-right:var(--default-marpad-L); padding-left:var(--default-marpad-L)} [data-marpad~="mtM"] {margin-top:var(--default-marpad-M)} [data-marpad~="mrM"] {margin-right:var(--default-marpad-M)} [data-marpad~="mbM"] {margin-bottom:var(--default-marpad-M)} [data-marpad~="mlM"] {margin-left:var(--default-marpad-M)} [data-marpad~="ptM"] {padding-top:var(--default-marpad-M)} [data-marpad~="prM"] {padding-right:var(--default-marpad-M)} [data-marpad~="pbM"] {padding-bottom:var(--default-marpad-M)} [data-marpad~="plM"] {padding-left:var(--default-marpad-M)} [data-marpad~="ptbM"] {padding-top:var(--default-marpad-M);padding-bottom:var(--default-marpad-M)} [data-marpad~="plrM"] {padding-right:var(--default-marpad-M); padding-left:var(--default-marpad-M)} [data-marpad~="mtS"] {margin-top:var(--default-marpad-S)} [data-marpad~="mrS"] {margin-right:var(--default-marpad-S)} [data-marpad~="mbS"] {margin-bottom:var(--default-marpad-S)} [data-marpad~="mlS"] {margin-left:var(--default-marpad-S)} [data-marpad~="ptS"] {padding-top:var(--default-marpad-S)} [data-marpad~="prS"] {padding-right:var(--default-marpad-S)} [data-marpad~="pbS"] {padding-bottom:var(--default-marpad-S)} [data-marpad~="plS"] {padding-left:var(--default-marpad-S)} [data-marpad~="ptbS"] {padding-top:var(--default-marpad-S);padding-bottom:var(--default-marpad-S)} [data-marpad~="plrS"] {padding-right:var(--default-marpad-S); padding-left:var(--default-marpad-S)} [data-marpad~="mtXS"] {margin-top:var(--default-marpad-XS)} [data-marpad~="mrXS"] {margin-right:var(--default-marpad-XS)} [data-marpad~="mbXS"] {margin-bottom:var(--default-marpad-XS)} [data-marpad~="mlXS"] {margin-left:var(--default-marpad-XS)} [data-marpad~="ptXS"] {padding-top:var(--default-marpad-XS)} [data-marpad~="prXS"] {padding-right:var(--default-marpad-XS)} [data-marpad~="pbXS"] {padding-bottom:var(--default-marpad-XS)} [data-marpad~="plXS"] {padding-left:var(--default-marpad-XS)} [data-marpad~="ptbXS"] {padding-top:var(--default-marpad-XS);padding-bottom:var(--default-marpad-XS)} [data-marpad~="plrXS"] {padding-right:var(--default-marpad-XS); padding-left:var(--default-marpad-XS)} [data-marpad~="mtXXS"] {margin-top:var(--default-marpad-XXS)} [data-marpad~="mrXXS"] {margin-right:var(--default-marpad-XXS)} [data-marpad~="mbXXS"] {margin-bottom:var(--default-marpad-XXS)} [data-marpad~="mlXXS"] {margin-left:var(--default-marpad-XXS)} [data-marpad~="ptXXS"] {padding-top:var(--default-marpad-XXS)} [data-marpad~="prXXS"] {padding-right:var(--default-marpad-XXS)} [data-marpad~="pbXXS"] {padding-bottom:var(--default-marpad-XXS)} [data-marpad~="plXXS"] {padding-left:var(--default-marpad-XXS)} [data-marpad~="ptbXXS"] {padding-top:var(--default-marpad-XXS);padding-bottom:var(--default-marpad-XXS)} [data-marpad~="plrXXS"] {padding-right:var(--default-marpad-XXS); padding-left:var(--default-marpad-XXS)}