.leftbar.leftbar.leftbar.leftbar.leftbar.leftbar@charset "utf-8"; /* CSS Document */ /* ================================================================================================= サイト共通パーツ用CSS @author K.Sekioka of HEVIZ Co.,Ltd. @copyright HEVIZ Co.,Ltd. [version] @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 大改修（主にスマートギフト用を想定） @version 4.0 2022.09.30 body.headerNav廃止 mainNav を siteMainNav に変更 subNav を siteSubNav に変更 @version 5.0 2023.01.23 ナビゲーション関係を全面改定 .siteMainNavを.siteNav.main に変更 .siteSubNav を.siteNav.sub に変更 .siteIconNavを.siteNav.icon に変更 .siteHeaderMenu を新設 .siteNav を廃止 @version 6.0 2024.09.12 全面改訂 .siteHeaderInner / .siteMainInner / .siteFooterInner 追加 .siteContent廃止 body.topHeader / body.leftHeader / body.rightHeader 廃止 [history] [CSS] :root 共通パラメータ body, html 基本HTML .siteLoading ローディング表示 .siteSplash スプラッシュ画面用（必要な時のみ） .siteHeader サイト共通ヘッダー .siteMenu サイト共通メニュー枠 .siteHumberger ハンバーガーメニューボタン .siteNav ナビゲーションツリー .siteMain メインコンテンツ部分 .siteBread パンくずリスト .siteBlock 各ブロック .siteFooter サイト共通フッター .sitePageTop ページTOPボタン .siteGDPR GDPR確認ダイアログ .siteModal モーダルWindow .siteSVG SVGを格納しておくスペース(非表示) .hasSideBar 　　　　　　　サイドバーがある場合の配置 .scrollBar　　　　　　　　　　　　疑似スクロールバー [想定タグ]
[シーン1]
[シーン2]
[シーン3]
Skip
MENU
[メニューの中身]
<

CLOSE

[コンテンツの中身]
[ブロックの中身]
[メインパート]
[サイドパート]
PAGE TOP

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

CLOSE
[コンテンツ]
CLOSE
==================================================================================================== **/ /** =========================================================================== 1. 共通パラメータ root =============================================================================== **/ :root { --text-color : #231815; --text-reverse-color : #231815; --link-color : #0000aa; --visited-color : #0000aa; --hover-color : #E80685; --gochic-font-family : "Jost" , "Noto Sans JP" , "YuGothic" , "Yu Gothic medium" , "Hiragino Sans" , Meiryo , sans-serif; --mincho-font-family : "Cormorant Garamond" , "Noto Serif JP" , "YuMincho" , "Yu Mincho" , "Hiragino Mincho ProN" , serif; } /** =========================================================================== 2. body, html =============================================================================== **/ html { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } /* padding-topをデザインに合わせて変える */ body { display: block; position: relative; margin: 0; padding: 130px 0 0 0; box-sizing: border-box; } /** for Tablet ---------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { } /** for Smart Phone ----------------------------- **/ @media all and (max-width:767px) { } /** for Print ----------------------------------- **/ @media print { body { padding: 0; } } /** =========================================================================== ローディング表示 .siteLoading [想定タグ]
=============================================================================== **/ .siteLoading { display : block; position : fixed; left : 0; top : 0; width : 100%; height : 100%; margin : 0; padding : 0; box-sizing: border-box; z-index: 2000; background-color : #ffffff; transition: all 0.5s; } .siteLoadingInner { display: block; position: relative; margin: 0 auto; padding: 0; box-sizing: border-box; } /* ロゴ等 */ .siteLoadingLogo { display: block; position: absolute; left: 25%; bottom: 50%; width: 50%; margin: 0 0 10px 0; padding: 0; text-align: center; } .siteLoadingLogo img, .siteLoadingLogo svg { max-width: 200px; vertical-align: bottom; fill:#a0a0a0; } /* ステータスバー */ .siteLoadingStatus { display : block; position : absolute; left : 0; top : 0; width : 100%; height : 3px; margin : 0; padding : 0; overflow : hidden; } .siteLoadingStatus .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 */ .siteLoadingCircle { display: block; position: absolute; left: 50%; top:50%; width: 30px; height: 30px; margin: 0; padding: 0; transform: translate(-50%, -50px); } .siteLoadingCircle svg { display: block; position: relative; width:100%; height: 100%; margin: 0; padding: 0; vertical-align: bottom; } @keyframes siteLoadingAnim { 0% { opacity:0; } 70% { opacity:1; } } .siteLoadingCircle svg path { fill:#000000; animation-name: siteLoadingAnim; animation-duration: 1000ms; animation-iteration-count: infinite; opacity:1; } .siteLoadingCircle svg path:nth-of-type(1) { animation-delay: 0; } .siteLoadingCircle svg path:nth-of-type(2) { animation-delay: 100ms; } .siteLoadingCircle svg path:nth-of-type(3) { animation-delay: 200ms; } .siteLoadingCircle svg path:nth-of-type(4) { animation-delay: 300ms; } .siteLoadingCircle svg path:nth-of-type(5) { animation-delay: 400ms; } .siteLoadingCircle svg path:nth-of-type(6) { animation-delay: 500ms; } .siteLoadingCircle svg path:nth-of-type(7) { animation-delay: 600ms; } .siteLoadingCircle svg path:nth-of-type(8) { animation-delay: 700ms; } .siteLoadingCircle svg path:nth-of-type(9) { animation-delay: 800ms; } .siteLoadingCircle svg path:nth-of-type(10) { animation-delay: 900ms; } .siteLoadingCircle svg path:nth-of-type(11) { animation-delay: 1000ms; } .siteLoadingCircle svg path:nth-of-type(12) { animation-delay: 1100ms; } /* body.readyで引っ込む */ .siteLoading.complete { display: none; } /** =========================================================================== .siteSplash パーツ : Splash画面 [想定タグ]
[シーン1]
[シーン2]
[シーン3]
Skip
=============================================================================== **/ body.splash { overflow: hidden; } .siteSplash { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; background-color: #f0f0f0; transition: all 0.5s; z-index: 2100; } body.splash .siteSplash { display: block; } .siteSplashInner { margin: 0; padding: 0; box-sizing: border-box; } .siteSplashScene { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; opacity: 0; } .siteSplashSkip { display: block; position: absolute; right: 30px; bottom: 30px; margin: 0; padding: 0; font-size: 24px; font-weight: 400; line-height: 1; z-index: 2100; } .siteSplashSkip a { cursor: pointer; color: inherit; text-decoration: none; } .siteSplashSkip a:link, .siteSplashSkip a:visited { color: inherit; } /** =========================================================================== .siteHeader サイト共通ヘッダー [想定タグ] =============================================================================== **/ .siteHeader { display: block; position: fixed; left: 0; top: 0; width: 100%; margin: 0; padding: 0; box-sizing: border-box; background-color: inherit; transition: all 0.5s; z-index: 1000; } .siteHeader::after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .siteHeaderInner { display: block; position: relative; margin: 0 auto; padding: 0; box-sizing: border-box; } /* サイトタイトル */ .siteHeaderTitle { display: block; position: relative; width: 200px; height: 80px; margin: 0 auto; padding: 0; font-size: larger; font-weight: inherit; text-align: center; z-index: 1010; } .siteHeaderTitle a, .siteHeaderTitle a:link, .siteHeaderTitle a:visited, .siteHeaderTitle a:hover, .siteHeadertitle a:active { color: inherit; } .siteHeaderTitle img, .siteHeaderTitle svg { display: block; position: absolute; left: 50%; top: 50%; width: auto; height: auto; /* ここで大きさ調整 */ max-width: 80%; max-height: 80%; margin: 0; padding: 0; box-sizing: border-box; vertical-align: bottom; transform: translate(-50%, -50%); } /** for Smart Phone ----------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { } /** for Smart Phone ----------------------------- **/ @media all and (max-width:767px) { } /** for Print ----------------------------------- **/ @media print { .siteHeader { position: relative; left: auto; top: auto; width: auto; height: auto; } } /** =========================================================================== サイト共通メニュー枠 [想定タグ]
[メニュー]

CLOSE

=============================================================================== **/ .siteMenu { display: block; position: fixed; left: 0; right: auto; top: auto; bottom: 100%; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; overflow: auto; overflow-x: hidden; overflow-y: auto; z-index: 900; transition: all 1s; } .siteMenuInner { display: block; position: relative; margin: 0 auto; padding: 0; box-sizing: border-box; } .siteMenuClose { display: block; position: relative; padding: 0; box-sizing: border-box; } .siteMenuClose a { display: block; position: relative; margin: 0 auto; padding: 30px 0 0 0; box-sizing: border-box; color: var(--text-color); text-align: center; font-size: smaller; } .siteMenuClose a::before, .siteMenuClose a::after { content: ""; display: block; position: absolute; left: 50%; top: 15px; width: 30px; height: 1px; margin: 0; padding: 0; box-sizing: border-box; background-color: var(--text-color); } .siteMenuClose a::before { transform: rotate( -45deg ); } .siteMenuClose a::before { transform: rotate( 45deg ); } /* マージンを一定間隔にする */ .siteMenuInner > * { margin: 50px 0; } .siteMenuInner > *:first-child { margin-top: 0; } .siteMenuInner > *:first-child { margin-bottom: 0; } /** for Tablet ----------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { } /** for Smart Phone ------------------------------ **/ @media all and (max-width:767px) { } /** for Print ------------------------------------ **/ @media print { /* 印刷では表示しない */ .siteMenu { display: none; } } /** =========================================================================== ハンバーガーメニューボタン =============================================================================== **/ .siteHumberger { display: block; position: fixed; right: 20px; top: 20px; margin: 0; padding: 0; box-sizing: border-box; z-index: 1100; } .siteHumberger a { cursor: pointer; } .siteHumberger span { display: block; position: relative; width: 30px; height: 30px; margin: 0 auto; padding: 0; box-sizing: border-box; } .siteHumberger span span { display: block; position: absolute; left: 0; width: 100%; height: 2px; margin: 0; padding: 0; box-sizing: border-box; background-color: #000000; opacity: 1; transition: all 0.3s; } .siteHumberger span span:nth-of-type(1) { top: 15%; transform: translateY(-50%); } .siteHumberger span span:nth-of-type(2) { top: 50%; transform: translateY(-50%); } .siteHumberger span span:nth-of-type(3) { top: 85%; transform: translateY(-50%); } /* .siteHumbergerを押した時に開閉するメニュー .siteMenu.humberger */ body.openHumbergerMenu { overflow: hidden; } body.openHumbergerMenu .siteHumberger span span:nth-of-type(1) { top: 50%; opacity: 1; transform: rotate( 45deg); } body.openHumbergerMenu .siteHumberger span span:nth-of-type(2) { top: 50%; opacity: 0; transform: rotate( 0deg); } body.openHumbergerMenu .siteHumberger span span:nth-of-type(3) { top: 50%; opacity: 1; transform: rotate(-45deg); } body.openHumbergerMenu .siteMenu.humberger { bottom: 0; /* padding: 100px 0 50px; */ } /** =========================================================================== ナビゲーションツリー [想定タグ] =============================================================================== **/ .siteNav { display: block; position: relative; margin: 50px auto; padding: 0; box-sizing: border-box; } /* 第一階層 */ .siteNav ul { margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; } .siteNav li { display: block; position: relative; margin: 0; padding: 0; line-height: 1.2em; } .siteNav a { display: block; position: relative; margin: 0; padding: 10px 30px 10px 10px; box-sizing: border-box; cursor: pointer; color: var(--text-color); text-decoration: none; } .siteNav a:link, .siteNav a:visited { color: var(--text-color); } .siteNav a:hover, .siteNav a:active { color: var(--hover-color); } /* 矢印 */ .siteNav a::before { content: ""; display: block; position: absolute; left: auto; right: 10px; top: 50%; width: 7px; height: 10px; margin: 0; padding: 0; box-sizing: border-box; clip-path: polygon(0% 0%, 0% 100%, 100% 50%); background-color: var(--text-color); transform: translate( -50%, -50% ) rotate(0deg); } /* 第一階層に子要素がある場合 */ .siteNav li.hasChild a { padding-right: 10px; padding-left: 30px; } .siteNav li.hasChild > a::before { left: 10px; right: auto; transform: translate( -50% , -50% ) rotate( 90deg ); } /* 第2階層 */ .siteNav ul ul { padding: 5px 0px 5px 1em; } .siteNav li li { } /* 第2階層を開閉する */ .siteNav li div { display: block; position: relative; max-height: 0px; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; transition: all 0.3s; } .siteNav li.open > div { max-height: 1000px; } .siteNav li.hasChild.open > a::before { transform: translate( -50% , -50% ) rotate( -90deg ); } /* アイコンがある場合 */ .siteNav svg { display: block; width: 30px; height: auto; margin: 0 auto 5px; vertical-align: bottom; } /* SNSアイコン */ .siteNav .twitter svg { fill: #1DA1F2; } .siteNav .facebook svg { fill: #32508E; } .siteNav .youtube svg { fill: #FF0000; } .siteNav .line svg { fill: #00B300; } .siteNav .note svg { fill: #41C9B4; } .siteNav .voicy svg { fill: #ff7d32; } /** フリーワード検索フォーム **/ /* .siteNav.freeword { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-end; width: auto; max-width: none; } .siteNav.freeword input { display: block; } .siteNav.freeword input.search-field { width: calc( 100% - 60px ); border-left: 0; border-top: 0; border-right: 0; border-color: #ddd; } */ /** =========================================================================== .siteMain メインコンテンツ部分
[コンテンツ]
=============================================================================== **/ .siteMain { display: block; position: relative; min-height: 80vh; margin: 0; padding: 0; box-sizing: border-box; } .siteMain::after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .siteMainInner { display: block; position: relative; margin: 0 auto; padding: 0; box-sizing: border-box; } /** =========================================================================== .siteBread パンくずリスト 2022年2月3日追加 [想定タグ]
=============================================================================== **/ .siteBread { display: block; position: relative; margin: 10px 0; padding: 0; box-sizing: border-box; font-size: smaller; } .siteBread ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin: 5px 0; padding: 0; box-sizing: border-box; list-style-type: none; } .siteBread li { display: block; position: relative; margin: 0; padding: 0 30px 0 0; box-sizing: border-box; } .siteBread li::after { content: ""; display: block; position: absolute; right: 15px; top: 50%; width: 4px; height: 5px; margin: 0; padding: 0; box-sizing: border-box; clip-path: polygon(0% 0%, 0% 100%,50% 50%); background-color: var(--text-color); transform: translate(-50%,-50%); } .siteBread a { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; color: inherit; text-decoration: none; transition: all 0.3s; } .siteBread a:link, .siteBread a:visted { color: inherit; } .siteBread a:hover, .siteBread a:active { color: inherit; text-decoration: underline; } /* 現在のページ */ .siteBread li.here { display: none; padding: 0; } .siteBread li.here::after { display: none; } /* 間隔を調整 */ .siteBread > *:first-child { margin-top: 0; } .siteBread > *:last-child { margin-bottom: 0; } /** for Smart Phone ----------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { .siteBread { width: calc(100% - 60px); } } /** for Mobile Phone ---------------------------- **/ @media all and (max-width:767px) { .siteBread { width: auto; margin: 0 20px 10px; } } /** for Print ----------------------------------- **/ @media print { .siteBread { display: none; } } /** =========================================================================== .siteBlock 各ブロック
[ブロックの中身]
=============================================================================== **/ .siteBlock { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .siteBlock::after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .siteBlockInner { display: block; position: relative; margin: 0 auto; padding: 0; box-sizing: border-box; } /** =========================================================================== .siteFooter サイト共通フッター [想定タグ] =============================================================================== **/ .siteFooter { display: block; position: relative; margin: 0; padding: 50px; box-sizing: border-box; transition: all 0.5s; } .siteFooterInner { display: block; position: relative; margin: 0 auto; padding: 0; box-sizing: border-box; } .siteFooter a { color: inherit; text-decoration: none; transition: all 0.3s; } .siteFooter a:link, .siteFooter a:visited, .siteFooter a:hover, .siteFooter a:active { color: inherit; } /* Copyright */ .siteFooterCopyright { clear: both; font-size: smaller; text-align: center; } /* マージンを一定間隔にする */ .siteFooterInner > * { margin: 50px 0; } .siteFooterInner > *:first-child { margin-top: 0; } .siteFooterInner > *:last-child { margin-bottom: 0; } /** for Tablet ----------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { .siteFooter { padding: 50px 30px; } } /** for Smart Phone ------------------------------ **/ @media all and (max-width:767px) { .siteFooter { padding: 30px; } /* Copyright */ .siteFooterCopyright span { display: none; } } /** for Print ----------------------------------- **/ @media print { .siteFooter .siteTitle, .siteFooter .siteNav { display: none; } } /** =========================================================================== .sitePageTop ページTOPボタン (z-inde:800) [想定タグ]
PAGE TOP
=============================================================================== **/ .sitePageTop { 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; } .sitePageTop 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; } .sitePageTop 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); } .sitePageTop a:hover { color: #f0f0f0; } /* スクロールで出てくる */ body.scrolled .sitePageTop { bottom: 0; opacity: 1; } /** for Tablet ---------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { } /** for Smart Phone ----------------------------- **/ @media all and (max-width:767px) { } /** for Print ----------------------------------- **/ @media print { .sitePageTop { display: none; } } /** =========================================================================== .siteGDPR パーツ : GDPR確認ダイアログ (z-index:1050) [想定タグ]

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

CLOSE
=============================================================================== **/ .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; } .siteGDPRInner { } .siteGDPRDesc { width: 65%; margin: 0; padding: 0 20px 0 0; box-sizing: border-box; } .siteGDPRDesc p { margin: 0; } .siteGDPRButtons { width: 25%; margin: 0; padding: 0; box-sizing: border-box; } .siteGDPRButtons ul { margin: 0; padding: 0; list-style-type: none; } .siteGDPRButtons li { /* width: 48%; */ margin: 1px 0; padding: 0; list-style-type: none; box-sizing: border-box; } .siteGDPRButtons li.accept {} .siteGDPRButtons 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; } .siteGDPRButtons li.denied a { padding: 5px 10px; background-color: #c0c0c0; font-size: inherit; } .siteGDPRButtons li a:hover, .siteGDPRButtons li a:active { color: #fffff; background-color: #cc0000; } .siteGDPRClose { display: block; position: absolute; right: 10px; top: 10px; } .siteGDPR .close a { display: block; position: relative; margin: 0 auto; padding: 30px 0 0 0; box-sizing: border-box; text-align: center; font-size: smaller; line-height: 1.2; color: inherit; text-decoration: none; cursor: pointer; } .siteGDPR .close a::before, .siteGDPR .close a::after { content: ""; display: block; position: absolute; left: 50%; top: 15px; width: 30px; height: 1px; margin: 0; padding: 0; box-sizing: border-box; background-color: var(--text-color); } .siteGDPR .close a::before { transform: rotate( -45deg ); } .siteGDPR .close a::after { transform: rotate( 45deg ); } /* 表示 */ body.ready .siteGDPR.open { top: auto; bottom: 0; transform: translateY(0%); } /** for Smart Phone ----------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { } /** for smart phone ----------------------------- **/ @media all and (max-width:767px) { .siteGDPR { display: block; padding: 20px 40px; } .siteGDPRDesc { width: auto; padding: 0; } .siteGDPRButtons { width: auto; margin: 20px 0 0 0; } } /** for print ----------------------------------- **/ @media print { .siteGDPR { display: none; } } /** =========================================================================== モーダルWindow [想定タグ]
[コンテンツ]
CLOSE
=============================================================================== **/ .siteModal { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; z-index: 1200; transition: all 0.5s; } .siteModalBg { display: block; position: absolute; left: 0; top:0; right: 0; bottom: 0; margin: 0; padding: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.8); cursor: pointer; } .siteModalInner { display: block; position: absolute; left: 50%; top: 50%; /* min-width: 100px; min-height: 100px; */ margin: 0; padding: 0; box-sizing: border-box; background-color:#ffffff; color: #231815; transform: translate(-50%, -50%); } .siteModalClose { display: block; position: absolute; right: 0; top: 0; margin: 0; padding: 0; box-sizing: border-box; transform: translate(50%, -50%); z-index: 1201; } .siteModalClose a { display: block; position: relative; width: 40px; height: 40px; margin: 0; padding: 0; box-sizing: border-box; cursor: pointer; z-index: 1210; border-radius: 50%; background-color: #888888; font-size: 1px; text-indent: -9999px; overflow: hidden; } .siteModalClose a::before, .siteModalClose a::after { content: ""; display: block; position: absolute; left: 20%; top: 50%; width: 60%; height: 2px; background-color: #ffffff; transition: all 0.3s; } .siteModalClose a::before { transform: rotate(45deg); } .siteModalClose a::after { transform: rotate(-45deg); } /* モーダルの開閉 */ @keyframes siteModalAnim { 0% { top: 100%; visibility: hidden; } 1% { top: 100%; visibility: visible; } 100% { top: 0; visibility: visible; } } @keyframes siteModalAnimRev { 0% { top: 0; visibility: visible; } 99% { top: 100%; visibility: visible; } 100% { top: 0; visibility: hidden; } } .siteModal { top: 100%; visibility: hidden; } .siteModal.open { animation-name: siteModalAnim; animation-duration: 0.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: forwards; } .siteModal.close { animation-name: siteModalAnimRev; animation-duration: 0.5s; animation-timing-function: ease-in; animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: forwards; } /* Youtube用モーダル */ .siteModal.youtube .siteModalInner{ width: 60%; width: 70%; padding: 0 0 33.75%; padding: 0 0 39.375%; } .siteModal.youtube iframe { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 1; } /** for Smart Phone ----------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { } /** for smart phone ----------------------------- **/ @media all and (max-width:767px) { } /** for print ----------------------------------- **/ @media print { .siteModal { display: none; } } /** =========================================================================== .siteSVG SVGを格納しておくスペース(非表示) [想定タグ] =============================================================================== **/ .siteSVG { display:block; position:absolute; visibility:hidden; right:0; bottom:0; width: 0; height: 0 } /** for print ----------------------------------- **/ @media print { .siteSVG { display:none; } } /** =========================================================================== .hasSideBar サイトバーがある場合の配置
[メインパート]
[サイドパート]
=============================================================================== **/ .hasSidebar { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch; } .hasSidebar > *:first-child { margin-top: 0; } .hasSidebar > *:last-child { margin-bottom: 0; } .hasSidebar > .hasSidebarMain { display: block; position: relative; width: calc( 100% - 320px ); margin: 0 20px 0 0; padding: 0; box-sizing: border-box; } .hasSidebar > .hasSidebarMain > *:first-child { margin-top: 0; } .hasSidebar > .hasSidebarMain > *:last-child { margin-bottom: 0; } .hasSidebar > .hasSidebarSide { display: block; position: relative; width: 300px; margin: 0; padding: 0; box-sizing: border-box; } .hasSidebar > .hasSidebarSide > *:first-child { margin-top:0; } .hasSidebar > .hasSidebarSide > *:last-child { margin-bottom: 0; } /* サイドバーがある場合(左) */ .hasSidebar.left { flex-direction: row-reverse; } .hasSidebar.left > .hasSidebarMain { margin: 0 0 0 20px; } /* for tablet --------------------------------------------- */ @media all and (max-width:1024px) and (min-width:768px) { .hasSidebar > .hasSidebarMain { width: calc( 100% - 270px ); } .hasSidebar > .hasSidebarSide { width: 250px; } } /* for Smart Phone ---------------------------------------- */ @media all and (max-width:767px) { .hasSidebar { display: block; } .hasSidebar > .hasSidebarMain { width: auto; margin: 0; } .hasSidebar > .hasSidebarMain::after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .hasSidebar > .hasSidebarSide, .hasSidebar.left > .hasSidebarMain { width: auto; margin: 20px 0 0 0; } .hasSidebar > .hasSidebarSide::after { content:"."; display:block; height:0; clear:both; visibility:hidden; } } /** =========================================================================== .scrollBar : 疑似スクロールバー =============================================================================== **/ /* スクロール対象 */ .scrollBarTarget {} /* 親要素 */ .scrollBarWrapper {} /* スクロールバー本体 */ .scrollBar { display: none; position: absolute; right: 0; top: 0; width: 10px; height: 100%; margin: 0; padding: 0; box-sizing: border-box; z-index:20; overflow: hidden; cursor: pointer; background-color: transparent; } /* スクロールバー中身 */ .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: #d0d0d0; border-radius: 5px; transition: all 0.2s; } .scrollBarWrapper.scroll .scrollBar { display: block; }