@charset "utf-8"; /* =========================================================================================== 共通設定 =========================================================================================== */ // 游書体がWindowsで細くなってしまう問題の解決(family名にMyYuGothicM,MyYuMinchoMを指定) @font-face { font-family: "MyYuGothicM"; font-weight: normal; src: local("YuGothic-Medium"), /*Postscript name*/ local("Yu Gothic Medium"), /*for Chrome*/ local("YuGothic-Regular"); /*Mediumがないとき*/ } @font-face { font-family: "MyYuGothicM"; font-weight: bold; src: local("YuGothic-Bold"), /*Postscript name*/ local("Yu Gothic"); /*for Chrome*/ } @font-face { font-family: "MyYuMinchoM"; font-weight: normal; src: local("YuMincho-Medium"), /*Postscript name*/ local("Yu Mincho Medium"), /*for Chrome*/ local("YuMincho-Regular"); /*Mediumがないとき*/ } @font-face { font-family: "MyYuMinchoM"; font-weight: bold; src: local("YuMincho-Bold"), /*Postscript name*/ local("Yu Mincho"); /*for Chrome*/ } @bodyBg: #000; // 全体背景色 @bodyColor: #fff; // 全体テキスト色 /* =================================================== アイコンフォント =================================================== */ @iconFont: Flaticon; @telIcon: "\e0df"; @folderIcon: "\e058"; /* =================================================== カラー =================================================== */ @colorMain: #c48327;//メインカラー @colorSub: #c83400; @colorWhite: #fff; @colorGray: #373737; @colorGrayDarker: #373737; @colorBrown: #555; @colorBG: #000; /* =================================================== 共通ボーダー用 =================================================== */ @borderGrayDot1: 1px dotted @colorGray; @borderGrayDot2: 2px dotted @colorGray; @borderGrayDot3: 3px dotted @colorGray; @borderGrayDot4: 4px dotted @colorGray; @borderGraySolid1: 1px solid @colorGray; @borderGraySolid2: 2px solid @colorGray; @borderGraySolid3: 3px solid @colorGray; @borderGraySolid4: 4px solid @colorGray; /* =================================================== clearfix =================================================== */ .clearfix(){ &::after {clear:both; height: 0; line-height: 0; display:block; content:"";} } /* =================================================== transition =================================================== */ @transition03Ease: 0.3s ease-in-out; @transition05Ease: 0.5s ease-in-out; /* =================================================== コンテンツサイズ設定 =================================================== */ @contentWidth: 1000px; @contentMargin: 0 0 50px; @containerWidth: 1000px; // seoテキストなど、内部コンテンツ用width /* =========================================================================================== ヘッダー設定 =========================================================================================== */ @headerBorderTop: 5px solid @colorMain;// ヘッダー上 ボーダー @headerMargin: 0 0 20px;// ヘッダーブロックのマージン @headerLay01LogoWidth: 50%;// レイアウト01のロゴのwidth @telFont: 26px;// 電話番号のフォントサイズ @telFontBefore: 80%;// 電話番号のアイコンフォントサイズ /* =========================================================================================== グローバルナビ設定 =========================================================================================== */ @globalNaviBg: @colorMain;// グローバルナビ背景 @globalLiWidth: ~"calc(100%/10)";// グローバルナビLIのサイズ(項目数10の場合) @globalColor: @colorWhite;// グローバルナビ リンク色 @globalHeight: 50px;// グローバルナビ 高さ @globalPadding: 20px 5px;// グローバルナビ aタグのpadding /* =========================================================================================== フッター設定 =========================================================================================== */ @footerColor: @colorWhite;// テキストカラー @footerH2Font: 110%;// H2フォントサイズ @footerH3Font: 100%;// H3フォントサイズ @footerLay01LogoWidth: 25%;// レイアウト01のロゴのwidth // @footerLay01InfoWidth: 65%;// レイアウト01のインフォメーションのmax width @footerLay01SnsWidth: 18%;// レイアウト01のSNSアイコンのwidth @snsIconUlWidth: 180px;// SNSアイコンブロックサイズ サイズ指定でアイコンの大きさが変わります @copyFont: 90%;// コピーライトフォントサイズ @copyBg: #0c0c0c;// コピーライトの背景 @facebookIcon: #3b579d;// facebookアイコンの色 @twitterIcon: #5ea9dd;// twitterアイコンの色 @blogIcon: #2db41f;// Blogアイコンの色 /* =================================================== フッターナビ設定 =================================================== */ @footerNaviPadding: 10px 0;// フッターナビのpadding @footerNaviMargin: 0px 0 20px;// フッターナビのmargin @footerNaviColor: @colorWhite;// フッターナビのリンク色 @footerNaviLiWidth: 16.66%;// フッターナビの幅 @footerNaviAPadding: 5px 0 0;// フッターナビのリンクpadding @foooterNaviShadow: 0px 1px 0px rgba(255,255,255,1),0px 1px 1px rgba(000,000,000,0.5);// フッターナビブロックのボーダー /* =========================================================================================== サイドバー設定 =========================================================================================== */ @colorSideH3: @colorWhite; /* =========================================================================================== ベース設定 =========================================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { outline: none; vertical-align: baseline; } body { background: @bodyBg; color: @bodyColor; font-family: Garamond, "Times New Roman", MyYuMinchoM, "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS P明朝", "MS PMincho", serif; font-size: 15px; line-height: 1.3; text-align: left; word-wrap : break-word; overflow-wrap : break-word; position: relative; } // html.body { // height: 100%; // width: 100%; // } img { vertical-align: top; width: auto; height: auto; max-width: 100%; max-height: 100%; -ms-interpolation-mode: bicubic; } img, a img { border: 0; } a, a:link, a:active, a:visited { color: @bodyColor; text-decoration: none; outline: 0; -webkit-transition: @transition03Ease; -moz-transition: @transition03Ease; -o-transition: @transition03Ease; transition: @transition03Ease; cursor: pointer; } a:hover { opacity: 0.7; } ol,ul,li { list-style: none; } ul::after { clear: both; height: 0; line-height: 0; display: block; content: ""; } input, textarea, select { cursor: pointer; } input, select { vertical-align: middle; } textarea { padding: 10px; } #wrap { height: 100%; position: relative; &::after { clear: both; height: 0; line-height: 0; display: block; content: ""; visibility: hidden; overflow: hidden; font-size: 0; } /* トップページ上部背景 */ // .home &::before { // content: ""; // position: absolute; // left: 0; // top: 0; // bottom: 0; // margin: auto; // width: 100%; // height: 100%; // background: url("../images/bg_top_header.png") no-repeat 50% 0; // z-index: -999; // } /* 下層ページ上部背景 */ // body:not(.home) &::before { // content: ""; // position: absolute; // left: 0; // top: 0; // bottom: 0; // margin: auto; // width: 100%; // height: 100%; // background: url("../images/bg_lower_header.png") no-repeat 50% 0; // z-index: -999; // } } #container { width: @contentWidth; .wrap_col1 & {width: 100%} margin: 0 auto 20px; //bottom:5px以上ないと、下層のto topボタンが崩れる .home & { background: url("../images/bg_con05.png") no-repeat 50% 100%; background-size: 100% auto; } .clearfix(); } #mainContent { display: inline-block; letter-spacing: 0.5px; padding: 0px 0px; width: 100%; &.floatLeft { width: 70% !important; float: left; } &.floatRight { width: 70% !important; float: right; } .clearfix(); } .mb5{ margin-bottom: 5px !important; } .mb10{ margin-bottom: 10px !important; } .mb20{ margin-bottom: 20px !important; } .mb30{ margin-bottom: 30px !important; } .mb40{ margin-bottom: 40px !important; } .mb60{ margin-bottom: 60px !important; } /* =========================================================================================== 共通 Hタグ 設定(アーカイブ見出し用・ほぼデフォルト) =========================================================================================== */ h2:not(.fl-heading) { #wrap & { .hLay02; } #mainContent & { margin: 0 0 20px; } #sidebar .sideContent & { margin: 0 0 1px; padding: 12px 0; font-size: 17px; color: @colorWhite; letter-spacing: .05em; text-align: center; background: #181818; // background: transparent; } #wrap .footerInfo > & { padding: 0; font-weight: bold; background: transparent; color: @bodyColor; } } h3:not(.fl-heading) { #wrap & { .hLay03; } span.date { margin: 0 0 5px; font-size: 80%; display: inline-block; width: 100%; } #mainContent & { margin: 0 0 20px; } // ホバー時調整 .galleryImgArea &::after { display: none; } } #wrap .footerInfo h3 { border: 0; padding: 0; &::after { display: none; } //フッターのh3が空なので、非表示にする } h4:not(.fl-heading) { #wrap & { .hLay04; } #wrap .galleryContent & { color: #fff; &:empty { display: none; } } #sidebar .newsNavi & { padding: 5px 0 0; font-weight: normal; } } h5:not(.fl-heading) { #wrap & { .hLay05; } } h6:not(.fl-heading) { #wrap & { .hLay06; } } /* =================================================== 共通Hタグ レイアウト設定(アーカイブ見出し用・ほぼデフォルト) =================================================== */ .hLay01 { padding: 5px 0; margin: 0 0 10px; border-bottom: @borderGrayDot2; font-weight: normal; font-size: 100%; line-height: 130%; } .hLay02 { padding: 10px; background: @colorMain; color: @colorSideH3; font-size: 120%; font-weight: normal; } .hLay03 { font-size: 110%; font-weight: normal; padding: 5px 10px; position: relative; border-left: 3px solid @colorMain; &::after { border-bottom: @borderGrayDot1; position: absolute; width: 100%; content: ""; bottom: -7px; left: -3px; } } .hLay04 { padding: 10px 0 0; color: @colorMain; font-size: 100%; font-weight: normal; } .hLay05 { border-bottom: @borderGrayDot1; padding: 10px 0 0; font-size: 100%; font-weight: normal; } .hLay06 { padding: 0; font-size: 90%; font-weight: normal; } /* ================================================== fl-headings(見出しモジュール用) ================================================== */ .flHeadingCommon { // margin-top: 10px !important; //スマホのみ // margin-bottom: 10px !important; //スマホのみ margin-bottom: 20px !important; //PCのみ font-feature-settings: 'palt'; //PCのみ font-weight: normal; line-height: 1.25; color: @bodyColor; text-align: left; } .fl-module-heading h1.fl-heading, #mainContent > h2:not(.fl-heading) { .flHeadingCommon; background-color: transparent; // .hLay02のリセット(PCのみ) font-size: 28px; text-align: center !important; } // PCのみ body:not(.page) #mainContent > h2:not(.fl-heading), /* アーカイブ、シングル */ .page-sitemap #mainContent > h2:not(.fl-heading) /* サイトマップ */ { margin-bottom: 40px !important; } .fl-module-heading h2.fl-heading { .flHeadingCommon; // background: none; // スマホのみ // border: 0; // スマホのみ font-size: 24px; background: url("../images/ico_h02.png") no-repeat 10px 50% #181818; padding: 12px 15px 8px 37px !important; } .fl-module-heading h3.fl-heading { .flHeadingCommon; // border: 0; // スマホのみ font-size: 21px; background: #181818; border-bottom: 1px solid #c83400; padding: 10px 15px !important; // &::after { // display: none; // スマホのみ // } } .fl-module-heading h4.fl-heading { .flHeadingCommon; font-size: 18px; border-bottom: 1px solid #f4ae4c; padding: 0 5px 10px !important; } .fl-module-heading h5.fl-heading { .flHeadingCommon; font-size: 16px; border-bottom: 1px dotted #555; padding: 0 5px 10px !important; } .fl-module-heading h6.fl-heading { .flHeadingCommon; font-size: 15px; font-weight: bold; color: #f4ae4c; } /* =========================================================================================== 共通 UL・LI 設定 =========================================================================================== */ ul.comUl { li { width: 100%; border-bottom: @borderGrayDot1; padding: 10px 0; a { padding: 0px 0px; width: 100%; display: inline-block; position: relative; } h4 { font-weight: normal; line-height: 150%; } // .date { // color: @colorMain; // } } } /* =========================================================================================== 共通 「詳細を見る」ボタン 設定 =========================================================================================== */ .moreBtn { a { border: 1px solid #616264; font-size: 90%; font-feature-settings : "palt"; //文字詰め・スマホ崩れのためPCのみ padding: 10px 15px; margin-top: 20px; min-width: 170px; display: inline-block; text-align: center; } /* =================================================== 使用箇所 サイドバー =================================================== */ #sidebar .sideContent nav & { margin: 10px 0 0; text-align: right; a { // border-radius: 15px; min-width: 120px; padding-top: 7px; padding-bottom: 7px; } } /* =================================================== 使用箇所 SHOP =================================================== */ .shopArea.shopLay04 .shopContent & { width: 100%; text-align: center; a { // border-radius: 5px; width: 45%; } } } /* =========================================================================================== 共通DL(TABLE) 設定 =========================================================================================== */ .comDl { .comDlLay; dt { /* =================================================== 記事一覧 箇条書きの場合 =================================================== */ .blogLay02 & { width: auto; } } /* =================================================== 記事一覧 箇条書きの場合 =================================================== */ .blogLay02 & dd { width: 17%; } } /* =================================================== 共通DL レイアウト設定 =================================================== */ .comDlLay { border-bottom: @borderGrayDot1; display: table; width: 100%; table-layout:fixed; //word-wrap:break-word;が効かないときの回避策 &:first-of-type { border-top: none; } dt,dd { display: table-cell; padding: 10px; vertical-align: middle; } dt { width: 30%; padding: 10px 10px 10px 25px; position: relative; &::after { position: absolute; content: ""; left: 3px; top: 0; bottom: 0; margin: auto; border-top: 1px solid @colorSub; border-right: 1px solid @colorSub; transform: rotate(45deg); width: 7px; height: 7px; } } } /* =========================================================================================== 共通ページネーション 設定 =========================================================================================== */ #dlt_pager{ clear: both; overflow: hidden; padding-top: 20px; margin-bottom: 30px; width: 100%; display: flex; .dlt_pagerprev { width: 33%; text-align: left; } .dlt_pagertop { width: 33%; text-align: center; } .dlt_pagernext { width: 33%; text-align: right; } .dlt_pagernext a, .dlt_pagerprev a{ display: inline-block; width: 80px; width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; } .pagination{ display: block; overflow: hidden; text-align: center; line-height: 100%; width: 100%; } .pagination span{ display: inline-block; margin: 0 2px; } .pagination a{ display: block; padding: 9px; background: @colorGray; border: @borderGraySolid1; // color: @colorWhite; text-decoration: none; } .pagination .current{ border: @borderGraySolid1; } .pagination .current a{ padding: 8px; background: #fff; border: @borderGraySolid1; color: #333; } } /* =========================================================================================== 共通 Lightbox 設定 =========================================================================================== */ .dlt_shade { position: fixed; top: 0; left: 0; display: table; height: 100%; width: 100%; z-index: 1000; background: rgba(0,0,0,0.6); .dlt_popimg { display: table-cell; vertical-align: middle; text-align: center; } .dlt_popimg img { box-shadow: 0 0 10px rgba(0,0,0,0.6); z-index: 1000; position: absolute; } span { position: absolute; z-index: 1000; } span.dlt_close { display: table; height: 34px; width: 34px; top: 50%; left: 50%; border-radius: 20px; overflow: hidden; box-shadow: 0 0 2px rgba(0,0,0,0.6); } span.dlt_close a { line-height: 0; display: table-cell; vertical-align: middle; background: @colorMain; border-radius: 20px; color: #fff; text-decoration: none !important; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); font-size: 20px; text-align: center; } span.dlt_close a:hover { text-shadow: -1px 1px 0 rgba(0,0,0,0.3); filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; } span.dlt_bprev, span.dlt_bnext { display: block; height: 90px; width: 90px; top: 50%; margin: -25px 0 0 0 !important; text-indent: -10000px; outline:none; line-height:1px; font-size:1px; background: rgba(0,0,0,0.3); a { display: block; height: 100%; width: 100%; position: relative; } a::after { position: absolute; top: 50%; left: 0; display: block; content: ''; width: 40px; height: 40px; margin-top: -22px; border-top: 5px solid @colorMain; border-right: 5px solid @colorMain; -webkit-transform: rotate(45deg); transform: rotate(45deg); } a:hover::after { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } } span.dlt_bprev {left: 0 !important} span.dlt_bnext {right: 0 !important; left: auto !important} span.dlt_bprev a::after { -webkit-transform: rotate(225deg); transform: rotate(225deg); margin-left: 30px; } span.dlt_bnext a::after {margin-left: 10px} } #dlt_imgloader{ top: 50%; left: 50%; margin: -10px 0 0 -10px; position: absolute !important; width: 20px; height: 20px; border-radius: 50%; border: 5px solid #fff; border-right-color: transparent !important; animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; } @-webkit-keyframes spin{ 0% { transform: rotate(0deg); opacity: 0.2; } /*0%の時は20%の透明度*/ 50% { transform: rotate(180deg); opacity: 0.5; } /*50%の時は50%の透明度*/ 100% { transform: rotate(360deg); opacity: 0.2; } /*100%の時に20%の透明度に戻る*/ } @-moz-keyframes spin{ 0% { transform: rotate(0deg); opacity: 0.2; } /*0%の時は20%の透明度*/ 50% { transform: rotate(180deg); opacity: 0.5; } /*50%の時は50%の透明度*/ 100% { transform: rotate(360deg); opacity: 0.2; } /*100%の時に20%の透明度に戻る*/ } .dlt_poptxt { position: absolute; top: 50%; left: 50%; min-width: 300px; color: rgba(255,255,255,0.8); z-index: 1000; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); p { letter-spacing: 0.5px; font-size: 11.5px; margin: 0 !important; padding: 0 0 10px !important; line-height: 150% !important; } p.dlt_poptitle { font-weight: bold; padding: 10px 0 5px !important; } } /* =========================================================================================== メインイメージ設定 =========================================================================================== */ body:not(.home) { width: 100%; .mainImgContent { margin: 0 auto; text-align: center; position: relative; img { /* 横幅最大のとき */ min-width: @contentWidth; width: 100vw; /* 横幅決まった幅のとき */ // max-width: 1200px; // min-width: @contentWidth; // width: 100%; } } .mainImgContent p { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: @contentWidth; height: 50px; line-height: 50px; font-feature-settings : "palt"; //文字詰め・スマホ崩れのためPCのみ font-size: 30px; font-weight: bold; // color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* =========================================================================================== bb layout =========================================================================================== */ #mainContent .fl-row-content-wrap { padding: 0; margin-top: 0; margin-bottom: 40px; } #mainContent div:not(.contBnr) .fl-row-content-wrap { .fl-rich-text, .voiceComment { line-height: 1.5; } } #mainContent .fl-module-heading .fl-module-content { margin-top: 0; margin-bottom: 10px; } /* トップページのビルダー行間を調整 */ .home #mainContent .fl-row-content-wrap { margin-bottom: 0; } /* activeでボタンがずれるのを回避 */ #top .fl-builder-content .fl-button:active { position: static; } /* =========================================================================================== コンタクトバナー =========================================================================================== */ .contBnr { font-feature-settings : "palt"; //文字詰め・スマホ崩れのためPCのみ .fl-row-content-wrap { margin: 0 auto; width: 700px; .tel-num { .fl-icon-text { height: auto; } } .fl-module-button { } } } /* コンタクトバナー、お問い合せページなど電話番号 */ .tel-num { .fl-icon-wrap { pointer-events: none; //PCのみ電話番号のリンクを無効化 // .fl-icon-text { // padding-top: 5px; // 電話アイコンによるテキストズレ調整 // } } } /* =========================================================================================== トップページ メインコンテンツ =========================================================================================== */ .line-height25 p { line-height: 2.5; } .topLine01 .fl-row-content { max-width: 815px; } .topLine03 .col-holder { background-color: rgba(0, 0, 0, .85); padding: 60px 250px; } /* =========================================================================================== べージビルダー編集不可部分 =========================================================================================== */ html.fl-builder-edit header, html.fl-builder-edit footer, html.fl-builder-edit .globalNavi, html.fl-builder-edit .mainImgArea, html.fl-builder-edit #dlt_pan, html.fl-builder-edit #sliderContent, html.fl-builder-edit #scrolltop, html.fl-builder-edit #sidebar { border: 3px solid #FA5858; background-color: #FBEFEF; opacity: 0.4; } body .mce-abs-layout-item { color: #333; }