.leftbar.leftbar.leftbar.leftbar.leftbar.leftbar@charset "utf-8"; /* CSS Document */ /* ======================================================================================= サイト共通パーツ用CSS @author K.Sekioka of HEVIZ Co.,Ltd. @copyright HEVIZ Co.,Ltd. @version 1.0 2021.02.24 New @version 1.1 2021.07.05 body.leftNav .siteNav 追加 @version 2.0 2021.10.04 reset.cssに合わせて改修 @version 2.1 2022.02.03 パンくず、２列構成（左）追加 @version 3.0 2022.05.18 大改修（主にスマートギフト用を想定） @history 2021.04.95 littaitomari.jp 実装 @history 2022.05.18 リンベルスマートギフト実装 @history 2022.05.18 smilehikita.com 実装 [想定タグ] サイト共通ヘッダー
サイトロゴ

logo

ヘッダーに付くナビ
サイト共通ナビ メイン部分
サイトコンテンツ部分
[コンテンツブロック]
[コンテンツブロック]
サイト共通フッター ローディング
ページTOP

PAGE TOP

GDPR確認
[ CSS構成 ] 1. HTMLタグリセット body.headerNav PCで見たとき、ナビがヘッダーで横並びになる body.leftNav PCで見たとき左側にメニューが開いた状態で表示される body.rightNav PCで見たとき右側にメニューが開いた状態で表示される ※SPの時はsiteNavと同じハンバーガーメニューになる 2. .siteHeader サイト共通ヘッダー 3. .siteMain メインコンテンツ部分 3-1. .siteContent 1列構成、真ん中寄せ .siteContent.hasSidebar 2列構成、右サイドバー .siteContent.hasSidebar.leftbar 2列構成、左サイドバー 3-2. .siteContentMain 2列構成、メイン部分 3-3. .siteContentSide 2列構成 サイドバー部分 3-4. .siteBlock コンテンツブロック 4. .siteBread パンくずリスト 5. .siteNav サイト共通ナビ (z-index:1100) 6. .siteFooter サイト共通フッター 7. .mainNav ナビ共通パーツ : メインナビ 8. .subNav ナビ共通パーツ : サブナビ 9. .contactNav ナビ共通パーツ : お問い合わせナビ 10. .snsNav ナビ共通パーツ : SNSナビ 11. .pageTop ページTOPボタン (z-inde:900) 12. .siteLoading ローディング表示 (z-index:2000) 13. .siteGDPR GDPR確認ダイアログ (z-index:1200) ========================================================================================== **/ /** =========================================================================== 1. body, html =============================================================================== **/ html { display: block; position: relative; margin: 0; padding: 0; } body { display: block; position: relative; margin: 0; padding: 80px 0 0 0; } /* ヘッダーナビの時 */ body.headerNav { padding: 140px 0 0 0; } /* 左ナビの時 */ body.leftNav { padding: 0 0 0 300px; } /* 右ナビの時 */ body.rightNav { padding: 0 300px 0 0; } /* ローディングあり */ /* メニューが開いている間 */ body.loading, body.openSiteNav { overflow: hidden; } /** for Tablet ---------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { /* 左ナビの時 */ body.leftNav { padding: 0 0 0 250px; } /* 右ナビの時 */ body.rightNav { padding: 0 250px 0 0; } } /** for Smart Phone ----------------------------- **/ @media all and (max-width:767px) { /* 左ナビの時 */ /* 右ナビの時 */ body.leftNav, body.rightNav { padding: 160px 0 0 0; } } /** =========================================================================== .siteHeader サイト共通ヘッダー [想定タグ]

============================================================================== **/ .siteHeader { display: block; position: fixed; left: 0; top: 0; width: 100%; height: auto; margin: 0; padding: 10px 0; box-sizing: border-box; background-color: inherit; z-index:1000; transition: all 0.5s; /* background-color: #e0e0e0; */ } /* Reset ------------------------------ */ .siteHeader a { color: inherit; text-decoration: none; transition: all 0.3s; } .siteHeader a:link, .siteHeader a:visited, .siteHeader a:hover, .siteHeader a:active { color: inherit; } /** logo --------------------------------------- **/ .siteHeader h1 { display: block; position: relative; width: auto; height: 80px; margin: 0 auto; padding: 0; box-sizing: border-box; font-size: inherit; font-weight: inherit; text-align: center; transition: all 0.5s; } .siteHeader h1 img, .siteHeader h1 svg { width: auto; max-width: 100%; height: auto; max-height: 100%; box-sizing: border-box; vertical-align: bottom; } /** Header Navigation -------------------------- **/ .siteHeaderNav { display: block; position: absolute; right: 0; top: 0; width: 300px; margin: 0; padding: 0; } /* Tag Reset */ .siteHeaderNav ul, .siteHeaderNav li, .siteHeaderNav dl, .siteHeaderNav dt, .siteHeaderNav dd { margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; } .siteHeaderNav a { color: inherit; text-decoration: none; } .siteHeaderNav a:link, .siteHeaderNav a:visited, .siteHeaderNav a:hover, .siteHeaderNav a:active { color: inherit; } .siteHeaderNav ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; } .siteHeaderNav li { border-left: 1px solid transparent; } .siteHeaderNav a { display: block; margin: 0; padding: 8px 0 0 0; min-width: 60px; min-height: 60px; box-sizing: border-box; cursor: pointer; background-color: #f0f0f0; text-align: center; font-size: 8px; line-height: 1; } .siteHeaderNav dt { display: block; position: relative; width: 25px; height: 25px; margin: 0 auto 8px; padding: 0; } .siteHeaderNav dt img, .siteHeaderNav dt svg { width: 100%; height: auto; vertical-align: bottom; } .siteHeaderNav dd { } /* Hunberger Menu */ .siteHeaderNav .menu a { } .siteHeaderNav .menu dl::after { content: "MENU"; display: block; position: relative; margin: 0; padding: 0; } .siteHeaderNav .menu dt span { display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin: 0; padding: 0; background-color: #231815; transition: all 0.3s; } .siteHeaderNav .menu dt span:nth-of-type(1) { transform: translateY(-11px); } .siteHeaderNav .menu dt span:nth-of-type(2) { transform: translateY( 0px); } .siteHeaderNav .menu dt span:nth-of-type(3) { transform: translateY( 11px); } /* メニューが開いている時, CLOSE表示 */ body.openSiteNav .siteHeaderNav .menu dl::after { content: "CLOSE"; } body.openSiteNav .siteHeaderNav .menu dt span:nth-of-type(1) { transform: translateY( 0px) rotate( 45deg); } body.openSiteNav .siteHeaderNav .menu dt span:nth-of-type(2) { transform: translateY( 0px); opacity: 0; } body.openSiteNav .siteHeaderNav .menu dt span:nth-of-type(3) { transform: translateY( 0px) rotate(-45deg); } /* 上部横イチナビの時 */ body.headerNav .siteHeader { padding: 10px 0 50px; } body.headerNav .siteHeaderNav .menu { display: none; } /* 左ナビの時 */ /* 右ナビの時 */ body.leftNav .siteHeader { left: 0; right: auto; width: 300px; height: 100%; } body.rightNav .siteHeader { left: auto; right: 0; width: 300px; height: 100%; } body.leftNav .siteHeaderNav, body.rightNav .siteHeaderNav { position: relative; left: auto; right: auto; top: auto; width: auto; margin: 10px 0 0 0; } body.leftNav .siteHeaderNav .menu, body.rightNav .siteHeaderNav .menu { display: none; } body.leftNav .siteHeaderNav ul, body.rightNav .siteHeaderNav ul { justify-content: center; } /** for Smart Phone ----------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { /* 左ナビの時 */ /* 右ナビの時 */ body.leftNav .siteHeader, body.rightNav .siteHeader { width: 250px; } } /** for Smart Phone ----------------------------- **/ @media all and (max-width:767px) { /* 左ナビの時 */ /* 右ナビの時 */ .siteHeader, body.headerNav .siteHeader, body.leftNav .siteHeader, body.rightNav .siteHeader { left: 0; right: auto; width: 100%; height: auto; padding: 10px 0 0; } .siteHeaderNav, body.headerNav .siteHeaderNav, body.leftNav .siteHeaderNav, body.rightNav .siteHeaderNav { position: relative; left: auto; right: auto; top: auto; width: auto; margin: 10px 0 0 0; } .siteHeaderNav ul, body.headerNav .siteHeaderNav ul { justify-content: center; } /* ハンバーガーメニュー表示 */ body.leftNav .siteHeaderNav .menu, body.rightNav .siteHeaderNav .menu, body.headerNav .siteHeaderNav .menu { display: block; } } /** =========================================================================== 1. .siteMain メインコンテンツ部分 2. .siteContent (1列構成、真ん中寄せ) .siteContent.hasSidebar (右ナビ2列構成、真ん中寄せ) .siteContent.hasSidebar.leftbar (左ナビ2列構成、真ん中寄せ) 3-1. 1列構成
[コンテンツ]
3-2. 1列構成(真ん中寄せ, 左右に隙間を持たせる)
[コンテンツ]
3-3. 2列構成(右にサイドバー)
[コンテンツ]
[サイドバー]
3-3. 2列構成(左にサイドバー)
[コンテンツ]
[サイドバー]
4. .siteBlock =============================================================================== **/ /** メイン部分 ------------------------------------------------- **/ .siteMain { display: block; position: relative; min-height: 80vh; margin: 0; padding: 0; } .siteMain::after { content:"."; display:block; height:0; clear:both; visibility:hidden; } /** コンテンツ部分 ----------------------------------------------- **/ .siteContent { display: block; position: relative; width: calc(100% - 100px); max-width: 1500px; margin: 0 auto; padding: 0; } /* サイドバーがある場合(右) */ .siteContent.hasSidebar { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch; } .siteContent.hasSidebar .siteContentMain { display: block; position: relative; width: calc( 100% - 320px ); margin: 0 20px 0 0; padding: 0; box-sizing: border-box; } .siteContent.hasSidebar .siteContentSide { display: block; position: relative; width: 300px; margin: 0; padding: 0; box-sizing: border-box; } /* サイドバーがある場合(左) */ .siteContent.hasSidebar.left { flex-direction: row-reverse; } .siteContent.hasSidebar.left .siteContentMain { margin: 0 0 0 20px; } /* ブロック */ .siteBlock { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .siteBlock::after { content:"."; display:block; height:0; clear:both; visibility:hidden; } @media all and (max-width:1024px) and (min-width:768px) { .siteContent { width: calc(100% - 60px); max-width: none; } .siteContent.hasSidebar .siteContentMain { width: calc( 100% - 270px ); } .siteContent.hasSidebar .siteContentSide { width: 250px; } .siteContent.hasSidebar.left .siteContentMain { margin: 0 0 0 20px; } } @media all and (max-width:767px) { .siteContent { width: auto; max-width: none; margin: 0 20px; } /* サイドバーがある場合(右) */ .siteContent.hasSidebar { display: block; } .siteContent.hasSidebar .siteContentMain, .siteContent.hasSidebar.left .siteContentMain { width: auto; margin: 0; } .siteContent.hasSidebar .siteContentSide { width: auto; margin: 20px 0 0 0; } } /** =========================================================================== .siteBread パンくずリスト 2022年2月3日追加 [想定タグ]
=============================================================================== **/ .siteBread { display: block; position: relative; width: calc(100% - 100px); max-width: 1500px; margin: 0 auto 10px; padding: 0; } .siteBread a { display: block; position: relative; margin: 0; padding: 0 30px 0 0; color: inherit; text-decoration: none; transition: all 0.3s; } .siteBread a::after { content: ""; display: block; position: absolute; right: 15px; top: 50%; width: 5px; height: 5px; margin: 0; padding: 0; border-top: 1px solid #888888; border-right: 1px solid #888888; transform: translateY(-50%) rotate(45deg); } .siteBread a:link, .siteBread a:visted { color: inherit; } .siteBread a:hover, .siteBread a:active { color: inherit; text-decoration: underline; } .siteBread ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin: 0; padding: 0; list-style-type: none; } .siteBread li { display: block; position: relative; margin: 0; padding: 0; } /** for Mobile Phone -------------------------------------- **/ @media all and (max-width:767px) { .siteBread { width: auto; margin: 0 30px 10px; } } /** =========================================================================== .siteNav サイト共通ナビ (z-index:1100) [想定タグ] =============================================================================== **/ .siteNav { display: block; position: fixed; left: 100%; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; z-index:1100; transition: all 0.5s; } /* link --------------------------------------------------- */ .siteNav a { color: inherit; text-decoration: none; transition: all 0.3s; } .siteNav a:link, .siteNav a:visited { color: inherit; } .siteNav a:hover, .siteNav a:active { color: #d83a3a; } /* Clickable Background ----------------------------------- */ .siteNavBg { display: block; position: absolute; left: 0; top:0; right: 0; bottom: 0; margin: 0; padding: 0; background-color: rgba(0,0,0,0.8); cursor: pointer; } /* Main Menu Area ----------------------------------------- */ .siteNavInner { display: block; position: absolute; right: 0; top:0; width: 500px; height: 100%; margin: 0; padding: 10px 30px 30px; box-sizing: border-box; overflow: auto; overflow-x: hidden; overflow-y: auto; background-color: #f0f0f0; } /* スクロールバーを表示させたい(右ナビ、左ナビ) -------------------- */ .siteNav .scrollBar { display: none; position: absolute; right: 0; top: 0; width: 10px; height: 100%; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; cursor: pointer; background-color: transparent; } .siteNav .scrollBarInner { display: block; position: absolute; right: 0; top: 0; width: 100%; height: 90%; margin: 0; padding: 0; box-sizing: border-box; cursor: pointer; background-color: #c0c0c0; border-radius: 5px; } .siteNav.scroll .scrollBar { display: block; } /* close button ------------------------------------------- */ .siteNavClose { display: block; position: relative; margin: 0; padding: 0; background-color: #f0f0f0; } .siteNavClose a { display: block; position: relative; width: 60px; height: 60px; margin: 0 auto; padding: 10px 0 0 0; box-sizing: border-box; cursor: pointer; font-size: 8px; text-align: center; text-decoration: none; line-height: 1; } .siteNavClose dl { margin: 0; padding: 0; text-align: center; } .siteNavClose dt { display: block; position: relative; width: 25px; height: 25px; margin: 0 auto 8px; padding: 0; box-sizing: border-box; } .siteNavClose dt span { display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background-color: #231815; transition: all 0.3s; } .siteNavClose dt span:nth-of-type(1) { transform: rotate( 45deg); } .siteNavClose dt span:nth-of-type(2) { transform: rotate(-45deg); } .siteNavClose dd { margin: 8px 0 0 0; font-size: smaller; text-align: center; line-height: 1; } /* Hover */ .siteNavClose a:hover { color: #E80685; } .siteNavClose a:hover .bars span { background-color: #E80685; } /* Humberger Menu ------------------------------- */ .siteNavMenu { display: block; position: absolute; right: 100%; top: 0; margin: 0; padding: 0; box-sizing: border-box; } .siteNavMenu a { display: block; position: relative; width: 60px; height: 60px; margin: 0; padding: 10px 0 0 0; box-sizing: border-box; cursor: pointer; font-size: 8px; font-weight: 400; text-align: center; line-height: 1; color: inherit; text-decoration: none; /* background-color: #333333; */ transition: all 0.5s; } .siteNavMenu a:hover { color: inherit; } .siteNavMenu dl { margin: 0; padding: 0; } .siteNavMenu dl::after { content: "MENU"; } .siteNavMenu dt { display: block; position: relative; width: 25px; height: 25px; margin: 0 auto 8px; padding: 0; } .siteNavMenu dt span { display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin: 0; padding: 0; background-color: #231815; transition: all 0.3s; } .siteNavMenu dt span:nth-of-type(1) { transform: translateY(-9px); } .siteNavMenu dt span:nth-of-type(2) { transform: translateY( 0px); } .siteNavMenu dt span:nth-of-type(3) { transform: translateY( 9px); } /* メニューが上部横イチの場合 */ body.headerNav .siteNav { left: 0; top: 90px; height: auto; } body.headerNav .siteNavInner { position: relative; right: auto; top: auto; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; overflow-x: visible; overflow-y: visible; background-color: transparent; } body.headerNav .siteNavBg, body.headerNav .siteNavClose, body.headerNav .siteNavMenu { display: none; } /* メニューが左固定の場合 */ body.leftNav .siteNav { left: 0; right: auto; top: 160px; width: 300px; height: calc( 100% - 160px ); } body.leftNav .siteNavInner { width: 100%; background-color: transparent; overflow: hidden; overflow-x: hidden; overflow-y: hidden; } body.leftNav .siteNavBg, body.leftNav .siteNavClose, body.leftNav .siteNavMenu { display: none; } /* メニューが右固定の場合 */ body.rightNav .siteNav { left: auto; right: 0; top: 160px; width: 300px; height: calc( 100% - 160px ); } body.rightNav .siteNavInner { width: 100%; background-color: transparent; overflow: hidden; overflow-x: hidden; overflow-y: hidden; } body.rightNav .siteNavBg, body.rightNav .siteNavClose, body.rightNav .siteNavMenu { display: none; } /* メニューが展開する時 */ body.openSiteNav .siteNav { left: 0; right: auto; } body.openSiteNav.headerNav .siteNav, body.openSiteNav.leftNav .siteNav, body.openSiteNav.rightNav .siteNav { left: inherit; right: inherit; } body.openSiteNav .siteNavMenu { right: 500px; } body.openSiteNav .siteNavMenu a { background-color: #f0f0f0; } /* メニューが展開する時 ハンバーガーメニューの MENU を　CLOSEに */ body.openSiteNav .siteNavMenu dl::after { content: "CLOSE"; } body.openSiteNav .siteNavMenu dt span:nth-of-type(1) { transform: translateY( 0px) rotate( 45deg); } body.openSiteNav .siteNavMenu dt span:nth-of-type(2) { transform: translateY( 0px); opacity: 0; } body.openSiteNav .siteNavMenu dt span:nth-of-type(3) { transform: translateY( 0px) rotate(-45deg); } /** for Tablet ---------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { /* メニューが左固定の場合 */ /* メニューが右固定の場合 */ body.leftNav .siteNav, body.rightNav .siteNav { width: 250px; } } /** for Smart Phone ----------------------------- **/ @media all and (max-width:767px) { .siteNav, body.headerNav .siteNav, body.leftNav .siteNav, body.rightNav .siteNav { left: 100%; right: auto; top: 0; width: 100%; height: 100%; } body.leftNav .siteNav { left: auto; right: 100%; } .siteNavInner, body.headerNav .siteNavInner, body.leftNav .siteNavInner, body.rightNav .siteNavInner { position: absolute; left: auto; right: 0; top: 0; width: calc( 100% - 70px ); height: 100%; padding: 10px 30px 30px; overflow: auto; overflow-x: hidden; overflow-y: auto; background-color: #f0f0f0; } body.leftNav .siteNavInner { left: 0; right: auto; } .siteNavBg, .siteNavClose, .siteNavMenu, body.headerNav .siteNavBg, body.headerNav .siteNavClose, body.headerNav .siteNavMenu, body.leftNav .siteNavBg, body.leftNav .siteNavClose, body.leftNav .siteNavMenu, body.rightNav .siteNavBg, body.rightNav .siteNavClose, body.rightNav .siteNavMenu { display: block; } body.leftNav .siteNavMenu { right: auto; left: 100%; } /* 展開時 */ body.openSiteNav .siteNav, body.openSiteNav.headerNav .siteNav, body.openSiteNav.rightNav .siteNav { left: 0; right: auto; } body.openSiteNav .siteNavMenu, body.openSiteNav.headerNav .siteNavMenu, body.openSiteNav.rightNav .siteNavMenu { left: auto; right: calc( 100% - 70px ); } body.openSiteNav.leftNav .siteNav { left: auto; right: 0; } body.leftNav.openSiteNav .siteNavMenu { left: calc( 100% - 70px ); } } /** ============================================================================= .siteFooter サイト共通フッター [想定タグ] ================================================================================= **/ .siteFooter { display: block; position: relative; margin: 0; padding: 50px; color: inherit; background-color: inherit; transition: all 0.5s; } /* Reset -------------------------------------------------- */ .siteFooter a { color: inherit; text-decoration: none; transition: all 0.3s; } .siteFooter a:link, .siteFooter a:visited { color: inherit; } .siteFooter a:hover, .siteFooter a:active { color: #d83a3a; } /* head --------------------------------------------------- */ .siteFooter .head { display: block; position: relative; margin: 0 0 50px; padding: 0; box-sizing: border-box; text-align: center; } .siteFooter h2 { margin: 0; padding: 0; font-size: 24px; font-weight: 400; } .siteFooter h3 { margin: 0; padding: 0; font-size: 14px; font-weight: 400; } /* Copyright */ .siteFooter .copyright { clear: both; display: block; position: relative; margin: 0; padding: 0; font-size: smaller; text-align: center; } /** for Tablet ----------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { } /** for Smart Phone ------------------------------ **/ @media all and (max-width:767px) { .siteFooter { padding: 50px 30px; } .siteFooter h2, .siteFooter h3 { font-size: inherit; font-weight: inherit; } /* Copyright */ .siteFooter .copyright span { display: none; } } /** =============================================================================== .mainNav ナビ共通パーツ : メインナビ ※　.siteNav または .siteFooter に置く想定 [想定タグ] =================================================================================== **/ .mainNav { display: block; position: relative; margin: 0; padding: 0; } /* Tag Reset */ .mainNav ul, .mainNav li, .mainNav dl, .mainNav dt, .mainNav dd { margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; } /* リンクをブロック化(前に矢印を置く) */ .mainNav a { display: block; position: relative; padding: 10px 10px 10px 20px; cursor: pointer; } .mainNav a::before { content: ""; display: block; position: absolute; left: 5px; top: calc( 50% - 5px ); width: 10px; height: 10px; margin: 0; padding: 0; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2040%2040%22%20style%3D%22enable-background%3Anew%200%200%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M18.55%2C9.1l-18%2C19.05c-1.2%2C1.28-0.3%2C3.37%2C1.45%2C3.37H38c1.75%2C0%2C2.66-2.1%2C1.45-3.37l-18-19.05%20C20.66%2C8.27%2C19.34%2C8.27%2C18.55%2C9.1z%22%2F%3E%3C%2Fsvg%3E'); background-position: center center; background-size: 100% auto; background-repeat: no-repeat; transform: rotate(90deg); } /* 第一階層 */ .mainNav ul { display: block; position: relative; } .mainNav li { display: block; position: relative; margin: 10px 0; } /* 第2階層 */ .mainNav li div { width: 100%; margin: -5px 0 0 0; box-sizing: border-box; } .mainNav ul ul { display: block; position: relative; margin: 5px 0 0 0; padding: 5px; border:1px solid #f0f0f0; border-radius: 5px; background-color: #ffffff; } /*　第2階層を吹き出しに .mainNav ul ul::before { content: ""; display: block; position: absolute; width: 6px; height: 6px; left: 30px; top:-5px; margin: 0; padding: 0; border-top:1px solid #f0f0f0; border-right: 1px solid #f0f0f0; background-color: #ffffff; transform: rotate(-45deg); } */ .mainNav li li { font-size: smaller; } /* 子要素がある場合 */ .mainNav li.hasChild { } .mainNav li.hasChild > a::before { transform: rotate(180deg); } /* ナビ内に置く場合 */ .siteNav .mainNav { margin: 0 0 50px; } /* hasChildの子要素を開閉する */ .siteNav .mainNav li.hasChild > div { max-height: 0px; overflow: hidden; transition: all 0.5s; } .siteNav .mainNav li.hasChild.open > div { max-height: 1000px; } .siteNav .mainNav li.hasChild > a::before { transition: all 0.5s 0.5s; } .siteNav .mainNav li.hasChild.open > a::before { transform: rotate(0deg); transition: all 0.5s 0s; } /* 上部横イチメニューの場合, 横並びにする */ body.headerNav .siteNav .mainNav { margin: 0; } body.headerNav .siteNav .mainNav ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; position: relative; margin: 0; padding: 0; } body.headerNav .siteNav .mainNav li { margin: 0 1em; } body.headerNav .siteNav .mainNav li:first-child { margin: 0 1em 0 0; } body.headerNav .siteNav .mainNav li:last-child { margin: 0 0 0 1em; } body.headerNav .siteNav .mainNav li div { position: absolute; left: 0; top: 100%; min-width: 250px; } body.headerNav .siteNav .mainNav ul ul { display: block; margin: 5px 0 0 0; padding: 10px; } body.headerNav .siteNav .mainNav li li, body.headerNav .siteNav .mainNav li li:first-child, body.headerNav .siteNav .mainNav li li:last-child { margin: 0; } /* フッターに置く場合, 横並びに */ .siteFooter .mainNav { margin: 0 0 50px; } .siteFooter .mainNav ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; } .siteFooter .mainNav ul ul { display: block; } .siteFooter .mainNav li { width: 20%; max-width: 200px; padding: 0 10px; box-sizing: border-box; } .siteFooter .mainNav li li { width: auto; max-width: none; padding: 0; } /** for Tablet ---------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { .siteFooter .mainNav li { width: 33.33%; } .siteFooter .mainNav li li { width: auto; } } /** for Smart Phone ----------------------------- **/ @media all and (max-width:767px) { body.headerNav .siteNav .mainNav { margin: 0 0 50px; } /* main nav 1st layer */ body.headerNav .siteNav .mainNav ul { display: block; margin: 0; padding: 0; } .siteFooter .mainNav li { width: auto; } body.headerNav .siteNav .mainNav li, body.headerNav .siteNav .mainNav li:first-child, body.headerNav .siteNav .mainNav li:last-child { margin: 10px 0; } /* main nav 2nd layer */ body.headerNav .siteNav .mainNav li div { position: relative; left: auto; top: auto; min-width: 1px; } /* フッターに置く場合 */ .siteFooter .mainNav ul { display: block; } .siteFooter .mainNav li { width: auto; padding: 0; max-width: none; } } /** =========================================================================== .subNav ナビ共通パーツ : サブナビ [想定タグ] =============================================================================== **/ .subNav { display: block; position: relative; margin: 0; padding: 0; font-size: smaller; line-height: 1.3; } .subNav a { text-decoration: none; transition: all 0.3s; } .subNav ul { margin: 0; padding: 0; list-style-type: none; } .subNav li { margin: 0; padding: 0; list-style-type: none; } .subNav li a { display: block; padding: 5px 10px; } /* ナビ内に置く場合 */ .siteNav .subNav { margin: 0 0 50px; } /* 上部横並びナビの場合、右上に置く */ body.headerNav .siteNav .subNav { position: absolute; right: 80px; top: -40px; margin: 0; padding: 0; } body.headerNav .siteNav .subNav ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; } /* フッターに置く場合、横並びに */ .siteFooter .subNav { margin: 0 0 50px; } .siteFooter .subNav ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } .siteFooter .subNav li { display: block; position: relative; padding: 0 10px; } .siteFooter .subNav li::before { content: ""; display: block; position: absolute; left: 0; top: 50%; width: 1px; height: 10px; margin: 0; padding: 0; background-color:#888888; transform: translateY(-50%); } .siteFooter .subNav li:first-child::before { display: none; } /** for Tablet ---------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { } /** for Smart Phone ----------------------------- **/ @media all and (max-width:767px) { /* sub nav */ body.headerNav .siteNav .subNav { position: relative; right: auto; top: auto; margin: 0 0 50px; } body.headerNav .siteNav .subNav ul { display: block; } /* フッターに置く場合、横並びに */ .siteFooter .subNav { margin: 0 0 50px; } .siteFooter .subNav ul { display: block; } .siteFooter .subNav li { margin: 0; text-align: center; } .siteFooter .subNav li::before { display: none; } } /** =========================================================================== .contactNav ナビ共通パーツ : お問い合わせナビ [想定タグ] =============================================================================== **/ .contactNav { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; font-size: smaller; line-height: 1.3; } .contactNav a { text-decoration: none; transition: all 0.3s; } .contactNav ul { display: block; position: relative; margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; } .contactNav li { display: block; position: relative; margin: 5px 0; padding: 0; list-style-type: none; box-sizing: border-box; } .contactNav dl { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; margin: 0; padding: 0; } .contactNav dt { margin: 0 10px 0 0; padding: 0; box-sizing: border-box; white-space: nowrap; } .contactNav dd { margin: 0; padding: 0; box-sizing: border-box; } .contactNav svg { width: 100%; height: auto; vertical-align: bottom; fill:#888888; transition: all 0.3s; } .contactNav a:hover svg { fill:#e56767; } /* ナビ内に置く場合 */ .siteNav .contactNav { margin: 0 0 50px; } /* 上部横イチナビの時、左上に置く */ body.headerNav .siteNav .contactNav { position: absolute; left: 20px; bottom: 100%; margin: 0; padding: 0; } /* フッターに置く場合 */ .siteFooter .contactNav { margin: 0 0 50px; } .siteFooter .contactNav dl { justify-content: center; } /** for Tablet ---------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { } /** for Smart Phone ----------------------------- **/ @media all and (max-width:767px) { /* 上部横イチナビの時 */ body.headerNav .siteNav .contactNav { position: relative; left: auto; bottom: auto; margin: 0 0 50px; } /* フッターに置く場合 */ .siteFooter .contactNav li { margin: 10px 0; } } /** =========================================================================== .snsNav ナビ共通パーツ : SNSナビ [想定タグ] =============================================================================== **/ .snsNav { display: block; position: relative; margin: 0; padding: 0; color: inherit; } .snsNav a { color: inherit; text-decoration: none; transition: all 0.3s; } .snsNav a:link, .snsNav a:visited { color: inherit; } .snsNav a:hover, .snsNav a:active { color: #E80685; } .snsNav ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; } .snsNav li { margin: 10px; padding: 0; list-style-type: none; box-sizing: border-box; } .snsNav dl { margin: 0; padding: 0; box-sizing: border-box; } .snsNav dt { width: 20px; margin: 0 auto; padding: 0; box-sizing: border-box; text-align: center; } .snsNav dd { min-width: 5em; margin: 5px 0 0 0; padding: 0; box-sizing: border-box; font-size: 8px; line-height: 1; white-space: nowrap; text-align: center; } .snsNav svg { width: 100%; height: auto; vertical-align: bottom; transition: all 0.3s; } .snsNav li.twitter svg { fill: #1DA1F2; } .snsNav li.facebook svg { fill: #32508E; } .snsNav li.youtube svg { fill: #FF0000; } .snsNav li.line svg { fill: #00B300; } .snsNav li.note svg { fill: #41C9B4; } .snsNav li.voicy svg { fill: #ff7d32; } /* ナビに置く場合 */ .siteNav .snsNav { margin: 0 0 50px 0; } /* 上部横並びナビの場合 */ body.headerNav .siteNav .snsNav { position: absolute; right: 80px; top: -90px; margin: 0; padding: 0; } body.headerNav .siteNav .snsNav dd { display: none; } /* フッターに置く場合 */ .siteFooter .snsNav { margin: 0 0 50px 0; } /** for Tablet ---------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { } /** for Smart Phone ----------------------------- **/ @media all and (max-width:767px) { body.leftNav .siteNav .snsNav, body.rightNav .siteNav .snsNav { margin: 0 0 50px 0; } /* 上部横並びナビの場合 */ body.headerNav .siteNav .snsNav { position: relative; right: auto; top: auto; margin: 0 0 50px; } body.headerNav .siteNav .snsNav dd { display: block; } } /** =========================================================================== .pageTop ページTOPボタン (z-inde:900) [想定タグ]
PAGE TOP
=============================================================================== **/ .pageTop { display: block; position: fixed; right: 0; bottom: -100px; margin: 0; padding: 0; opacity: 0; transition: all 0.5s; z-index: 900; font-size: 8px; text-align: center; } .pageTop a { display: block; position: relative; width: 60px; height: 60px; margin: 0; padding: 35px 0 0 0; box-sizing: border-box; cursor: pointer; color: #f0f0f0; text-decoration: none; background-color: rgba(0,0,0,0.6); transition: all 0.3s; } .pageTop a::before { content: ""; display: block; position: absolute; left: 50%; top: 15px; width: 40%; padding: 0 0 40% 0; box-sizing: border-box; border-top:1px solid #f0f0f0; border-right:1px solid #f0f0f0; transform: translateX(-50%) rotate(-45deg); } .pageTop a:hover { color: #f0f0f0; } /* スクロールで出てくる */ body.scrolled .pageTop { bottom: 0; opacity: 1; } /* 右ナビの場合、左へ */ body.rightNav .pageTop { left: 0; right: auto; } /** for Tablet ---------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { } /** for Smart Phone ----------------------------- **/ @media all and (max-width:767px) { .pageTop { right: 0; } .pageTop > a:hover { background-color: rgba(0,0,0,0.6); } /* 右ナビの場合も右に戻す */ body.rightNav .pageTop { left: auto; right: 0; } } /** =========================================================================== .siteLoading ローディング表示 (z-index:2000) [想定タグ]
=============================================================================== **/ .siteLoading { display : block; position : fixed; left : 0; top : 0; width : 100%; height : 100%; margin : 0; padding : 0; color : #231916; background-color : #ffffff; z-index : 2000; transition: all 0.5s; } /* ロゴ等 */ .siteLoading .logo { display: block; position: absolute; left: 25%; bottom: 50%; width: 50%; margin: 0 0 10px 0; padding: 0; text-align: center; } .siteLoading .logo img, .siteLoading .logo svg { max-width: 200px; vertical-align: bottom; fill:#a0a0a0; } /* ステータスバー */ .siteLoading .status { display : block; position : absolute; left : 0; top : 50%; width : 100%; height : 3px; margin : 0; padding : 0; overflow : hidden; } .siteLoading .status .bar{ display : block; position : absolute; left: 0; top:0; width : 1%; height : 100%; margin : 0; padding : 0; background-color : #000000; transition: all 0.5s; } /* Circle */ .siteLoading .circle { display: block; position: absolute; left: 50%; top:50%; width: 30px; height: 30px; margin: 0; padding: 0; transform: translate(-50%, -50px); } .siteLoading .circle svg { display: block; position: relative; width:100%; height: 100%; margin: 0; padding: 0; vertical-align: bottom; } @keyframes loadinganim { 0% { opacity:0; } 70% { opacity:1; } } .siteLoading .circle svg path { fill:#000000; animation-name: loadinganim; animation-duration: 1000ms; animation-iteration-count: infinite; opacity:1; } .siteLoading .circle svg path:nth-of-type(1) { animation-delay: 0; } .siteLoading .circle svg path:nth-of-type(2) { animation-delay: 100ms; } .siteLoading .circle svg path:nth-of-type(3) { animation-delay: 200ms; } .siteLoading .circle svg path:nth-of-type(4) { animation-delay: 300ms; } .siteLoading .circle svg path:nth-of-type(5) { animation-delay: 400ms; } .siteLoading .circle svg path:nth-of-type(6) { animation-delay: 500ms; } .siteLoading .circle svg path:nth-of-type(7) { animation-delay: 600ms; } .siteLoading .circle svg path:nth-of-type(8) { animation-delay: 700ms; } .siteLoading .circle svg path:nth-of-type(9) { animation-delay: 800ms; } .siteLoading .circle svg path:nth-of-type(10) { animation-delay: 900ms; } .siteLoading .circle svg path:nth-of-type(11) { animation-delay: 1000ms; } .siteLoading .circle svg path:nth-of-type(12) { animation-delay: 1100ms; } /* body.readyで引っ込む */ .siteLoading.complete { display: none; } /** =========================================================================== .siteGDPR GDPR確認ダイアログ (z-index:1050) [想定タグ]

当ウェブサイトでは、お客様の利便性の改善やサービス向上などを目的とした、Google Analyticsによるアクセスログ解析のためにクッキーを使用しています。詳細はプライバシー・ポリシーをご参照ください。

=============================================================================== **/ .siteGDPR { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; position: fixed; left: 0; top: 100%; bottom: auto; width: 100%; margin: 0; padding: 20px 40px; box-sizing: border-box; background-color:#f0f0f0; z-index: 1050; transform: translateY(100%); transition: all 1s; } .siteGDPR .desc { width: 65%; margin: 0; padding: 0 20px 0 0; box-sizing: border-box; } .siteGDPR .desc p { margin: 0; } .siteGDPR .buttons { width: 25%; margin: 0; padding: 0; box-sizing: border-box; } .siteGDPR .buttons ul { margin: 0; padding: 0; list-style-type: none; } .siteGDPR .buttons li { /* width: 48%; */ margin: 1px 0; padding: 0; list-style-type: none; box-sizing: border-box; } .siteGDPR .buttons li.accept {} .siteGDPR .buttons a { display: block; padding: 15px 10px; background-color: #444444; color: #ffffff; text-align: center; text-decoration: none; font-size: larger; cursor: pointer; transition: all 0.3s; } .siteGDPR .buttons li.denied a { padding: 5px 10px; background-color: #c0c0c0; font-size: inherit; } .siteGDPR .buttons li a:hover, .siteGDPR .buttons li a:active { color: #fffff; background-color: #cc0000; } .siteGDPR .close { display: block; position: absolute; right: 10px; top: 10px; } .siteGDPR .close a { cursor: pointer; } .siteGDPR .close svg { width: 20px; height: 20px; fill: #444444; transition: all 0.3s; } .siteGDPR .close a svg:hover, .siteGDPR .close a svg:active { fill: #cc0000; } /* 左ナビの時 */ body.leftNav .siteGDPR { left: 300px; right: auto; width:calc( 100% - 300px ); } /* 右ナビの時 */ body.rightNav .siteGDPR { left: auto; right: 300px; width:calc( 100% - 300px ); } /* 表示 */ body.ready .siteGDPR.open { top: auto; bottom: 0; transform: translateY(0%); } /** for Smart Phone ----------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { /* 左ナビの時 */ body.leftNav .siteGDPR { left: 250px; right: auto; width:calc( 100% - 250px ); } /* 右ナビの時 */ body.rightNav .siteGDPR { left: auto; right: 250px; width:calc( 100% - 250px ); } } /* for smart phone */ @media all and (max-width:767px) { .siteGDPR { display: block; padding: 20px 40px; } .siteGDPR .desc { width: auto; padding: 0; } .siteGDPR .buttons { width: auto; margin: 20px 0 0 0; } /* 左ナビの時 */ /* 右ナビの時 */ body.leftNav .siteGDPR, body.rightNav .siteGDPR { left: 0; right: auto; width: 100%; } }