@charset "utf-8"; /* ================================================================================================= サイト共通パーツ用CSS ■基本設定 ■ローディング表示 .siteLoading ■Splash画面 .siteSplash ■サイト共通ヘッダー .siteHeader ■メインコンテンツ部分 .siteMain ■サイト共通コンテンツブロック .siteBlock ■コンテンツブロック(削除予定) .siteContent ■サイト共通フッター .siteFooter ■ハンバーガーメニューアイコン　.siteHumberger ■サイト共通メニュー枠 .siteMenu ■ナビゲーションツリー .siteNav ■フリーワード検索フォーム .siteFreeword ■ページTOPボタン .sitePageTop ■パンくずリスト .siteBread ■SVG格納スペース(非表示) .siteSVG ■GDPR確認window .siteGDPR ■モーダルwindow .siteModal ■疑似スクロールバー .scrollBar [想定タグ] ----------------------------------------------

[シーン1]

[ブロックのタイトル]

[ブロックのコンテンツ]

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

承認する
承認しない

==================================================================================================== **/ :root { /* フォント */ --gothic-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; --text-color : #231815; /* 背景色 */ --background-color : #ffffff; /* リンク色 */ --text-link-color : #0000cc; --text-hover-color : #cc0000; /* ボタン */ --button-text-color : #ffffff; --button-background-color : #444444; --button-hover-text-color : #ffffff; --button-hover-background-color : #cc0000; } html { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } body { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; background-color: var( --background-color ); color: var( --text-color ); font-family: var( --gothic-font-family ); font-size: 16px; font-weight: 400; line-height: 1.8; } /* ハンバーガーメニュー展開中 */ body.openHumbergerMenu { overflow: hidden; } /* スプラッシュ画面再生中 */ body.splash { overflow: hidden; } /** =========================================================================== ローディング表示 =============================================================================== **/ .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; box-sizing: border-box; overflow : hidden; } .siteLoadingBar{ display : block; position : absolute; left: 0; top:0; width : 1%; height : 100%; margin : 0; padding : 0; box-sizing: border-box; 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; } /** 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 { .siteLoading { display : none; } } /** =========================================================================== Splash画面 =============================================================================== **/ .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 { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .siteSplashScenes { } .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; text-decoration: none; } .siteSplashSkip a:link, .siteSplashSkip a:visited { color: inherit; } /** for Smart Phone ----------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { } /** for Mobile Phone ---------------------------- **/ @media all and (max-width:767px) { } /** for Print ----------------------------------- **/ @media print { .siteSplash, body.splash .siteSplash { display: none; } } /** =========================================================================== サイト共通ヘッダー =============================================================================== **/ .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; box-sizing: border-box; font-size: larger; font-weight: inherit; text-align: center; z-index: 1010; } .siteHeaderTitle a { color: inherit; text-decoration: none; } .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 Tablet ---------------------------------- **/ @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; } } /** =========================================================================== サイトメインコンテンツ部分 =============================================================================== **/ .siteMain { display: block; position: relative; 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; } .siteMainInner > *:first-child { margin-top: 0; } .siteMainInner > *:last-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 { } /** =========================================================================== サイト共通ブロック =============================================================================== **/ .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; } .siteBlockHeader, .siteBlockMain, .siteBlockFooter { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } /* タイトル */ .siteBlockTitle { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .siteBlockTitle a { text-decoration: none; transition: all 0.3s linear; } .siteBlockTitle a:link, .siteBlockTitle a:visited { color: inherit; } .siteBlockTitle a:hover, .siteBlockTitle a:active { color: var( --text-hover-color ); } /* MOREボタン */ .siteBlockMore { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .siteBlockMore a { display: block; position: relative; margin: 10px; padding: 15px 40px; box-sizing: border-box; font-size: larger; font-weight: 700; text-align: center; text-decoration: none; line-height: 1.2; transition: all 0.3s linear; } .siteBlockMore a:first-child { margin-left: 0; } .siteBlockMore a:last-child { margin-right: 0; } .siteBlockMore a:link, .siteBlockMore a:visited { color: var( --button-text-color ); background-color: var( --button-background-color ); } .siteBlockMore a:hover, .siteBlockMore a:active { color: var( --button-hover-text-color ); background-color: var( --button-hover-background-color ); } .siteBlockHeader > *:first-child { margin-top: 0; } .siteBlockHeader > *:last-child { margin-bottom: 0; } .siteBlockMain > *:first-child { margin-top: 0; } .siteBlockMain > *:last-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 { } /** =========================================================================== コンテンツブロック(削除予定) =============================================================================== **/ .siteContent { display: block; position: relative; width: calc(100% - 100px); max-width: 1200px; margin: 0 auto; padding: 0; } .siteContent::after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .siteContent > *:first-child { margin-top: 0; } .siteContent > *:last-child { margin-bottom: 0; } /** for tablet --------------------------------- **/ @media all and (max-width:1024px) and (min-width:768px) { .siteContent { width: calc(100% - 60px); } } /** for Smart Phone ---------------------------- **/ @media all and (max-width:767px) { .siteContent { width: auto; margin: 0 20px; } } /** for Print ----------------------------------- **/ @media print { } /** =========================================================================== サイト共通フッター =============================================================================== **/ .siteFooter { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .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: var( --text-hover-color ); } .siteFooterInner { display: block; position: relative; margin: 0 auto; padding: 0; box-sizing: border-box; } /* title */ .siteFooterTitle { font-size: inherit; text-align: center; line-height: 1; white-space: nowrap; } .siteFooterTitle img, .siteFooterTitle svg { display: block; margin: 0 auto 5px; vertical-align: bottom; } /* Copyright */ .siteFooterCopyright { display: block; margin: 0; padding: 0; box-sizing: border-box; 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) { } /** for Smart Phone ------------------------------ **/ @media all and (max-width:767px) { /* Copyright */ .siteFooterCopyright span { display: none; } } /** for Print ----------------------------------- **/ @media print { } /** =========================================================================== ハンバーガーメニューアイコン =============================================================================== **/ .siteHumberger { display: block; position: fixed; right: 20px; top: 20px; margin: 0; padding: 0; box-sizing: border-box; z-index: 1100; } .siteHumberger a { cursor: pointer; } .siteHumbergerIcon { display: block; position: relative; width: 30px; height: 30px; margin: 0 auto; padding: 0; box-sizing: border-box; } .siteHumbergerBar { display: block; position: absolute; left: 0; width: 100%; height: 2px; margin: 0; padding: 0; box-sizing: border-box; background-color: var( --text-color ); opacity: 1; transition: all 0.3s; } .siteHumbergerBar.bar01 { top: 20%; transform: none; } .siteHumbergerBar.bar02 { top: 50%; transform: none; } .siteHumbergerBar.bar03 { top: 80%; transform: none; } .siteHumberger a::after { content: "MENU"; display: block; position: relative; margin: 3px 0 0 0; padding: 0; box-sizing: border-box; font-size: 10px; font-weight: 700; color: var( --text-color ); text-align: center; line-height: 1; transition: all 0.3s; } /* hover */ .siteHumberger a:hover .siteHumbergerBar { background-color: var( --text-hover-color ); } .siteHumberger a:hover::after { color: var( --text-hover-color ); } /* メニューのが開いている時 */ body.openHumbergerMenu .siteHumbergerBar.bar01 { top: 50%; opacity: 1; transform: rotate( 45deg); } body.openHumbergerMenu .siteHumbergerBar.bar02 { top: 50%; opacity: 0; transform: rotate( 0deg); } body.openHumbergerMenu .siteHumbergerBar.bar03 { top: 50%; opacity: 1; transform: rotate(-45deg); } body.openHumbergerMenu .siteHumberger a::after { content: "CLOSE"; } /** 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 { .siteHumberger { display: none; } } /** =========================================================================== 開閉メニュー枠 =============================================================================== **/ .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: 1010; transition: all 1s; background-color: inherit; color: inherit; } .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; cursor: pointer; } .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: translateX(-50%) rotate( -45deg ); } .siteMenuClose a::after { transform: translateX(-50%) rotate( 45deg ); } /* マージンを一定間隔にする */ .siteMenuInner > * { margin: 50px 0; } .siteMenuInner > *:first-child { margin-top: 0; } .siteMenuInner > *:first-child { margin-bottom: 0; } /* ハンバーガーで開閉するメニュー */ .siteMenu.humberger { } body.openHumbergerMenu .siteMenu.humberger { 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; } } /** =========================================================================== 共通パーツ : ナビゲーションツリー =============================================================================== **/ .siteNav { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .siteNavInner { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } /* ナビのタイトル */ .siteNavTitle { margin: 0; padding: 0; box-sizing: border-box; } /* 階層 */ .siteNavRow { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; transition: all 0.3s; } .siteNavCols { margin: 0; padding: 0; box-sizing: border-box; list-style-type: none; } .siteNavCol { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; line-height: 1.2em; } .siteNavCol a { display: block; position: relative; margin: 0; padding: 10px; box-sizing: border-box; cursor: pointer; color: var(--text-color); text-decoration: none; } .siteNavCol a::before { content: ""; display: block; display: none; 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 ); transition: all 0.3s; } /* 子要素あり */ .siteNavCol.hasChild {} .siteNavCol.hasChild > a::before { transform: translate( -50% , -50% ) rotate( 90deg ); } .siteNavCol.hasChild > .siteNavRow { /* max-height: 0px; overflow: hidden; */ } /* 子要素を展開している場合 */ .siteNavCol.hasChild.open {} .siteNavCol.hasChild.open > a::before { transform: translate( -50% , -50% ) rotate( -90deg ); } .siteNavCol.hasChild.open > .siteNavRow { /* max-height: 1000px; */ } /* 第2階層以降 */ .siteNavRow .siteNavRow {} .siteNavCols .siteNavCols { padding: 5px 0px 5px 1em; } .siteNavCol .siteNavCol {} /* アイコンがある場合 */ /* .siteNav svg { display: block; width: 30px; height: auto; margin: 0 auto 5px; vertical-align: bottom; } */ /* SNSアイコン */ /* */ /* 中身の間隔調整 */ .siteNavInner > * { margin: 30px 0; } .siteNavInner > *:first-child { margin-top: 0; } .siteNavInner > *:last-child { margin-bottom: 0; } /** SNSナビ ------------------- **/ .siteNav.sns {} .siteNav.sns .siteNavRow {} .siteNav.sns .siteNavCols { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; } .siteNav.sns .siteNavCol { margin: 10px 5px; } .siteNav.sns .siteNavCol::after { font-size: 12px; font-weight: 700; text-align: center; line-height: 1; } .siteNav.sns .siteNavCol.twitter::after { content: "X"; } .siteNav.sns .siteNavCol.facebook::after { content: "facebook"; } .siteNav.sns .siteNavCol.instagram::after { content: "instagram"; } .siteNav.sns .siteNavCol.youtube::after { content: "youtube"; } .siteNav.sns .siteNavCol.line::after { content: "line"; } .siteNav.sns .siteNavCol.note::after { content: "note"; } .siteNav.sns .siteNavCol.voicy::after { content: "voicy"; } .siteNav.sns .siteNavCol a { padding: 0; } .siteNav.sns .siteNavCol svg { display: block; width: 25px; height: auto; margin: 0 auto 2px; vertical-align: bottom; } .siteNav.sns .siteNavCol.twitter svg { fill: #000000; } .siteNav.sns .siteNavCol.facebook svg { fill: #32508E; } .siteNav.sns .siteNavCol.instagram svg { fill: #32508E; } .siteNav.sns .siteNavCol.youtube svg { fill: #FF0000; } .siteNav.sns .siteNavCol.line svg { fill: #00B300; } .siteNav.sns .siteNavCol.note svg { fill: #41C9B4; } .siteNav.sns .siteNavCol.voicy svg { fill: #ff7d32; } /** 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 { } /** =========================================================================== フリーワード検索フォーム =============================================================================== **/ .siteFreeword { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .siteFreewordInner { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-end; width: 250px; margin: 0 auto; padding: 0; box-sizing: border-box; } input[type="search"].siteFreewordInput { display: block; width: calc( 100% - 60px ); max-width: none; margin: 0; padding: 0 0.5em; box-sizing: border-box; color: inherit; font-family: var( --gothic-font-family ); font-size: inherit; line-height: 38px; box-shadow: 0px 0px 0px 0px; background-color: #ffffff; border: 1px solid #888888; border-radius: 0; outline: none; appearance: none; } input[type="search"].siteFreewordInput::placeholder { color:#ccc; } input[type="submit"].siteFreewordSubmit { display: block; width: 60px; max-width: none; margin: 0; padding: 0; box-sizing: border-box; color: var( --button-text-color ); font-family: var( --gothic-font-family ); font-size: inherit; line-height: 38px; text-align: center; box-shadow: 0px 0px 0px 0px; background-color: var( --button-background-color ); border: 1px solid var( --button-background-color ); border-radius: 0; outline: none; appearance: none; cursor: pointer; transition: all 0.3s; } input[type="submit"].siteFreewordSubmit:hover { color : var( --button-hover-text-color ); background-color : var( --button-hover-background-color ); border-color : var( --button-hover-background-color ); } /** 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 { .siteHumberger { display: none; } } /** =========================================================================== ページTOPボタン (z-inde:900) =============================================================================== **/ .sitePageTop { display: block; position: fixed; right: 0; bottom: -100px; margin: 0; padding: 0; box-sizing: border-box; opacity: 0; transition: all 0.5s; z-index: 900; --sitePageTop-text-color: #f0f0f0; --sitePageTop-background-color: rgba(0,0,0,0.6); --sitePageTop-hover-background-color: rgba(0,0,0,0.9); } .sitePageTop a { display: block; position: relative; width: 60px; height: 60px; margin: 0; padding: 0; box-sizing: border-box; cursor: pointer; background-color: var( --sitePageTop-background-color ); transition: all 0.3s; } .sitePageTop a::before { content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 25%; margin: 0; padding: 0 0 25%; box-sizing: border-box; border-top:3px solid var( --sitePageTop-text-color ); border-right:3px solid var( --sitePageTop-text-color ); background-color: transparent; transform: translate(-50% , -50%) rotate(-45deg); transition: all 0.3s; } .sitePageTop a::after { content: "PAGE TOP"; display: block; position: absolute; left: 0; top: 70%; width: 100%; margin: 0; padding: 0; box-sizing: border-box; transition: all 0.3s; color: var( --sitePageTop-text-color ); font-size: 10px; font-weight: 400; line-height: 1; text-align: center; text-decoration: none; } .sitePageTop a:hover { background-color: var( --sitePageTop-hover-background-color ); } /* スクロールで出てくる */ 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; } } /** =========================================================================== パンくずリスト 2022年2月3日追加 [想定タグ]

=============================================================================== **/ .siteBread { display: block; position: relative; width: calc(100% - 100px); margin: 10px auto; padding: 0; font-size: smaller; } .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 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: 10px 20px; } } /** for Print ----------------------------------- **/ @media print { .siteBread { display: none; } } /** =========================================================================== SVGを格納しておくスペース(非表示) =============================================================================== **/ .siteSVG { display:block; position:absolute; visibility:hidden; right:0; bottom:0; width: 0; height: 0 } /** =========================================================================== .siteGDPR パーツ : GDPR確認ダイアログ (z-index:1050) =============================================================================== **/ .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.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; } .siteGDPR .desc { width: auto; padding: 0; } .siteGDPR .buttons { width: auto; margin: 20px 0 0 0; } } /** for print ----------------------------------- **/ @media print { .siteGDPR { display: none; } } /** =========================================================================== モーダルWindow =============================================================================== **/ .siteModal { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 1200; transition: all 0.5s; } .siteModalBg { 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; } .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; 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; } } /** =========================================================================== .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; } } /** for print ----------------------------------- **/ @media print { } /** =========================================================================== 疑似スクロールバー =============================================================================== **/ .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; } /** =========================================================================== wordpress関連 =============================================================================== **/ /** タイトル ------------------------------ **/ .postTitle, .postsTitle, .tileTitle { margin: 0; padding: 0; box-sizing: border-box; font-size: 28px; font-weight: 700; } .tileTitle { font-size: inherit; } .postTitle a, .postsTitle a, .tileTitle a { color: inherit; text-decoration: none; } .postTitle a:link, .postTitle a:visited, .postsTitle a:link, .postsTitle a:visited, .tileTitle a:link, .tileTitle a:visited { color: inherit; } .postTitle a:hover, .postTitle a:active, .postsTitle a:hover, .postsTitle a:active, .tileTitle a:hover, .tileTitle a:active { color: var( --text-hover-color ); } /** カテゴリー一覧 ------------------------- **/ .postCategories, .tileCategories { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; font-size: smaller; } .postCategories a, .tileCategories a { display: inline-block; vertical-align: middle; margin: 0 2px 2px 0; padding: 0 15px; box-sizing: border-box; text-decoration: none; } .postCategories a:link, .postCategories a:visited, .tileCategories a:link, .tileCategories a:visited { background-color: #f0f0f0; color: var( --text-color ); } .postCategories a:hover, .postCategories a:active, .tileCategories a:hover, .tileCategories a:active { background-color: var( --button-hover-background-color ); color: var( --button-hover-text-color ); } /** ハッシュタグ一覧 ---------------------------- **/ .postTags, .tileTags { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; font-size: smaller; } .postTags a, .tileTags a { display: inline-block; margin: 0 1em 0 0; padding: 0; } .postTags a::before, .tileTags a::before { content: "#"; } .postTags a:link, .postTags a:visited, .tileTags a:link, .tileTags a:visited { color: inherit; } .postTags a:hover, .postTags a:active, .tileTags a:hover, .tileTags a:active { color: var(--hover-color); } /** 画像 --------------------------------- **/ .postImage { display: block; position: relative; width: 100%; margin: 0; padding: 0 0 100%; box-sizing: border-box; overflow: hidden; } .postImage img { display: block; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain; vertical-align: bottom; transform: translate( -50%, -50% ); transition: all 0.5s; } /** 本文 -------------------------------- **/ /** 概要文 ------------------------------ **/ .postContent, .postsContent, .tileContent, .postExcerpt, .postsExcerpt, .tileExcerpt { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .postContent > *:first-child, .postsContents > *:first-child, .postExcerpt > *:first-child, .postsExcerpt > *:first-child { margin-top: 0; } .postContent > *:last-child, .postsContent > *:last-child, .postExcerpt > *:last-child, .postsExcerpt > *:last-child { margin-bottom: 0; } .postContent::after, .postsContent::after, .postExcerpt::after, .postsExcerpt::after { content:"."; display:block; width:0; height:0; clear:both; visibility:hidden; overflow:hidden; } /** ページネーション(一覧ページ) --------------- **/ .postsPages { display: block; margin: 0; padding: 0; box-sizing: border-box; } .postsPages .screen-reader-text { display: none; } .postsPages .nav-links { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; margin: 0; padding: 0; box-sizing: border-box; } .postsPages span.page-numbers, .postsPages a.page-numbers { display: block; position: relative; margin: 0 1px 1px 0; padding: 12px 15px; box-sizing: border-box; line-height: 1; color: var(--button-text-color); text-decoration: none; background-color: var(--button-background-color); transition: all 0.3s; } .postsPages span.page-numbers.current { color: var( --text-color ); background-color: transparent; font-weight: 700; } .postsPages a.page-numbers:link, .postsPages a.page-numbers:visited { color: var(--button-text-color); background-color: var(--button-background-color); } .postsPages a.page-numbers:hover, .postsPages a.page-numbers:active { color: var(--button-hover-text-color); background-color: var(--button-hover-background-color); } /** ページネーション(詳細ページ) ----------- **/ .postPages { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; margin: 0; padding: 0; box-sizing: border-box; } .postPages h3 { display: none; } .postPages a.post-page-numbers, .postPages span.post-page-numbers { display: block; position: relative; margin: 0 1px 1px 0; padding: 12px 15px; box-sizing: border-box; line-height: 1; color: var(--button-text-color); text-decoration: none; background-color: var(--button-background-color); transition: all 0.3s; } .postPages span.post-page-numbers.current { color: var( --text-color ); background-color: transparent; font-weight: 700; } .postPages a.post-page-numbers:link, .postPages a.post-page-numbers:visited { color: var(--button-text-color); background-color: var(--button-background-color); } .postPages a.post-page-numbers:hover, .postPages a.post-page-numbers:action { color: var(--button-hover-text-color); background-color: var(--button-hover-background-color); } /** 日付 --------------------------- **/ .postDate, .tileDate { display: block; margin: 0; padding: 0; box-sizing: border-box; font-size: smaller; } /** POST一覧 ------------------------- **/ .postsList { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .postsListInner { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; position: relative; margin: 0; padding: 0; box-sizing: border-box; } /** 詳細ページ、一覧ページ共通 ------------------ **/ .post, .posts { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .posts::after. .post::after { content:"."; display:block; width:0; height:0; clear:both; visibility:hidden; overflow:hidden; } .postInner, .postsInner { display: block; position: relative; margin: 0 auto; padding: 0; box-sizing: border-box; } /* ヘッダー */ /* コンテンツ部分 */ /* フッター部分 */ .postHeader, .postsHeader, .postMain, .postsMain, .postFooter, .postsFooter { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .postHeaderInner, .postsHeaderInner, .postMainInner, .postsMainInner, .postFooterInner, .postsFooterInner { display: block; position: relative; margin: 0 auto; padding: 0; box-sizing: border-box; } .postHeaderInner::after, .postsHeaderInner::after, .postMainInner::after, .postsMainInner::after, .postFooterInner::after, .postsFooterInner::after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .postHeaderInner > *, .postsHeaderInner > *, .postMainInner > *, .postsMainInner > *, .postFooterInner > *, .postsFooterInner > * { /* margin: 20px 0; */ } .postHeaderInner > *:first-child, .postsHeaderInner > *:first-child, .postMainInner > *:first-child, .postsMainInner > *:first-child, .postFooterInner > *:first-child, .postsFooterInner > *:first-child { margin-top: 0; } .postHeaderInner > *:last-child, .postsHeaderInner > *:last-child, .postMainInner > *:last-child, .postsMainInner > *:last-child, .postFooterInner > *:last-child, .postsFooterInner > *:last-child { margin-bottom: 0; } /** 一覧用タイル ------------------------------- **/ .tile { display: block; position: relative; width: calc( 25% - 20px ); margin: 0 10px 50px; padding: 0; box-sizing: border-box; } /* .tile a { text-decoration: none; color: inherit; } .tile a:link, .tile a:visited { color: inherit; } .tile a:hover, .tile a:active { color: var(--hover-color); } */ .tileInner {} .tileRow { display: block; margin: 0; padding: 0; box-sizing: border-box; } .tileRow.image {} .tileImage { display: block; position: relative; width: 100%; margin: 0; padding: 0 0 100%; box-sizing: border-box; text-align: center; overflow: hidden; background-color: rgba(0,0,0,0.1); } .tileImage a {} .tileImage img { display: block; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; object-fit: cover; vertical-align: bottom; transform: translate( -50%, -50% ); transition: all 0.5s; } .tileImage a:hover img { width: 110%; height: 110%; } .tileRow.text { margin: 20px 10px 0; } .tileRow.text > * { margin: 10px 0; } .tileRow.text > *:first-child { margin-top: 0; } .tileRow.text > *:last-child { margin-bottom: 0; } .tileMore { display: block; position: relative; margin: 0; padding: 0; box-sizing: border-box; } .tileMore a {} /* for tablet --------------------------------------------- */ @media all and (max-width:1024px) and (min-width:768px) { /** タイトル --------------------- **/ .postTitle, .postsTitle { font-size: 24px; } /** 一覧用タイル ------------------ **/ .tile { width: calc( 100% / 3 - 20px ); margin: 0 10px 30px; } } /* for Smart Phone ---------------------------------------- */ @media all and (max-width:767px) { /** タイトル --------------------- **/ .postTitle, .postsTitle { font-size: 20px; } /** 一覧用タイル ------------------ **/ .tile { width: 100%; margin: 0 0 30px; } } /** for print ----------------------------------- **/ @media print { } /** =========================================================================== ニュースブロック =============================================================================== **/ .siteBlock.news {} .siteBlock.news .siteBlockInner {} .siteBlock.news .siteBlockHeader {} .siteBlock.news .siteBlockTitle {} .siteBlock.news .siteBlockTitle a {} .siteBlock.news .siteBlockMain {} .siteBlock.news .newsRows {} .siteBlock.news .newsRow {} .siteBlock.news .siteBlockFooter {} .siteBlock.news .siteBlockMore {} .siteBlock.news .siteBlockMore a {} /* ニュース1行 */ .newsRow { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; position: relative; margin: 0; padding: 10px; box-sizing: border-box; } .newsRow a { color: inherit; text-decoration: none; transition: all 0.3s; } .newsRow a:link, .newsRow a:visited { color: inherit; } .newsRow a:hover, .newsRow a:active { color:var( --text-hover-color ); } .newsRowDate { width: 7em; margin: 0; padding: 0 1em 0 0; box-sizing: border-box; font-size: smaller; font-weight: inherit; white-space: nowrap; } .newsRowContent { width: calc( 100% - 7em ); margin: 0; padding: 0; box-sizing: border-box; } a.newRowCategory { display: inline-block; vertical-align: middle; margin: 0 0.5em 0 0; padding: 3px 10px; box-sizing: border-box; background-color: #f0f0f0; font-size: smaller; color: inherit; line-height: 1; text-decoration: none; white-space: nowrap; transition: all 0.3s; transform: translateY(-0.1em); } a.newRowCategory:link, a.newRowCategory:visited { color: inherit; background-color: #f0f0f0; } a.newRowCategory:hover, a.newRowCategory:active { color: var(--button-hover-text-color); background-color: var(--button-hover-background-color); } /** for smart phone **/ @media all and (max-width:767px) { /* ニュース1行 */ .newsRow { display: block; } .newsRowDate { width: auto; padding: 0; } .newsRowContent { width: auto; margin: 5px 0 0 0; } }