@charset "UTF-8";
@import url("https://bee-custom.site/template/beginnt/beginnt_ver1_3/css/nav-jst.min.css");
@import url("https://bee-custom.site/template/common/ver1_2/contents/contents_ver1_2.min.css");
@import url("https://bee-custom.site/template/common/ver1_2/customize-parts/custom-parts_ver1_2.min.css");
@import url("https://bee-custom.site/template/beginnt/beginnt_ver1_3/css/template.min.css");
/*サンプルコンテンツ表示用*/
@import url("https://bee-custom.site/template/sample/sample-contents.min.css");
/*--------------------------------------------------------
ユーザースタイル
--------------------------------------------------------*/
/* =======================================
早期レイアウトコントロール
（早い段階で読み込まなければレイアウトが崩れてしまうあるいは表示に影響するスタイルをここで指定）
======================================= */
/*----------- フォトギャラリーを設置するシングルカラムのページ -----------*/
/*すべてのページに適用の場合*/
/*
main {
margin: 0 auto;
max-width: 100%;
width: 100%;
}
*/
/*------ オリジナルサイドバー ------*/
/*FlowSide＆FixedSide(Preview&Edit)*/
#global-footer #cc-m-7690441811.j-hgrid, #cc-m-all-content-7690441811, #global-footer #cc-m-7690442311.j-hgrid, #cc-m-all-content-7690442311 {
max-width: 280px;
width: 100%;
}
/*----------- ウィジェット注釈（編集画面のみ） -----------*/
/*ウィジェット枠を表示*/
.cc-page.cc-pagemode-default .widget-comment {
display: none;
}
.widget-comment {
border: 5px dashed red;
margin: 5rem 2rem 2rem;
padding: 2rem;
text-align: center !important;
}
.widget-comment p {
color: red !important;
font-size: 2rem !important;
}
/*プレビューでのウィジェットコンテンツ非表示*/
.cc-page.cc-pagemode-default .custom-toolbox.hide-box {
display: none !important;
}
/* =======================================
画像の設定
======================================= */
/*------ 上に戻るボタンの画像 ------*/
.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span {
background-image: url(https://u.jimcdn.com/cms/o/s1c44aa84a9e82e5f/userlayout/img/up-icon.png?t=1632727212) !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* =======================================
基本フォントのスタイル
======================================= */
/*------- 共通フォント -------*/
body, p, table, td {
color: #666 !important;
font-family: "Noto Sans JP", sans-serif !important;
font-size: 1.4rem !important;
line-height: 1.95 !important;
}
/*------- ヘッダー＆トップナビ -------*/
#top-nav .j-nav-variant-nested.desktop > ul > li > a, #top-nav a:link, #top-nav a:visited {
color: #666;
}
/*------- メインエリア -------*/
/*リンク*/
main a, main a:link, main a:visited {
color: #D41A57 !important;
}
/*------- フッターエリア -------*/
/*通常フォント*/
footer, footer p, footer table, footer td {
color: #666 !important;
}
/*リンク*/
footer a, footer a:link, footer a:visited {
color: #FFF !important;
}
#footer-bottom {
color: #FFF !important;
}
#footer-bottom a {
color: #FFF !important;
}
/* =======================================
見出しのスタイル
======================================= */
/*------- メインエリア見出し -------*/
/*メインエリア見出し共通*/
main h1, main h2, main h3 {
font-weight: normal;
line-height: 1.35;
font-family: 'Noto Serif JP', serif !important;
color: #666;
}
/*カラム内見出し*/
.j-hgrid h1, .j-hgrid h2, .j-hgrid h3 {
padding-top: 0 !important;
margin-top: 0 !important;
}
.j-hgrid h1 {
padding-bottom: 0 !important;
}
/*メインエリア大見出し*/
main h1 {
font-size: 3.6rem;
letter-spacing: .4rem;
text-align: left;
margin: 0;
padding: 0 0 5rem;
}
/*メインエリア中見出し*/
main h2 {
font-size: 2.6rem;
letter-spacing: .1rem;
text-align: left;
padding: 5rem 0 !important;
margin: 0;
}
/*メインエリア小見出し*/
main h3 {
font-size: 2.1rem;
letter-spacing: .1rem;
border-left: 2px solid #D41A57;
padding: .4rem 0 .4rem 1rem;
margin: 5rem 0 2rem;
}
@media screen and (max-width: 480px) {
main h1 {
font-size: 2.6rem;
letter-spacing: .1rem;
justify-content: flex-start;
}
main h2 {
border-left: none;
font-size: 1.9rem;
letter-spacing: .1rem;
text-align: left;
padding: 5rem 0 2rem !important;
}
main h3 {
font-size: 1.7rem;
letter-spacing: 0;
text-align: left;
}
}
/*------- フッターエリア見出し -------*/
/*フッターエリア見出し共通*/
footer h1, footer h2, footer h3 {
color: #666;
font-family: "Noto Sans JP", sans-serif;
line-height: 1.5;
text-align: left;
}
/*フッターエリア大見出し*/
footer h1 {
font-size: 2.4rem;
}
/*フッターエリア中見出し*/
footer h2 {
font-size: 2rem;
}
/*フッターエリア小見出し*/
footer h3 {
font-size: 1.7rem;
}
/*フッター会社情報*/
.footer-company h2 {
color: #D41A57;
text-align: center;
font-family: 'Noto Serif JP', serif;
font-weight: 400;
font-size: 1.8rem;
margin-top: 2rem;
}
.footer-company-info {
margin: 3rem 0 8rem;
}
.footer-company p {
text-align: center;
font-size: 1.2rem !important;
font-family: 'Noto Serif JP', serif !important;
}
/*コピーライト*/
p.footer-copy {
text-align: center;
font-size: 1rem !important;
color: #AAA !important;
}
/*フッターボトム*/
#contentfooter {
color: #FFF;
}
/* =======================================
ボタンのスタイル（メイン＆サイドバー）
======================================= */
/*------- ボタン共通 -------*/
/*リンク*/
main a.j-calltoaction-link, main a:link.j-calltoaction-link, main a:visited.j-calltoaction-link, footer a.j-calltoaction-link, footer a:link.j-calltoaction-link, footer a:visited.j-calltoaction-link {
text-decoration: none !important;
}
a.j-calltoaction-link.j-calltoaction-link-style-1:after, a.j-calltoaction-link.j-calltoaction-link-style-2:after, a.j-calltoaction-link.j-calltoaction-link-style-3:after {
transition: all .5s !important;
}
/*------- ボタン１ -------*/
a.j-calltoaction-link.j-calltoaction-link-style-1 {
background: #D41A57;
border: 2px solid #D41A57;
color: #FFF !important;
font-size: 1.8rem;
border-radius: 50rem;
}
a.j-calltoaction-link.j-calltoaction-link-style-1:hover {
background-color: transparent;
color: #D41A57 !important;
}
/*ボタン１の矢印（通常時）*/
a.j-calltoaction-link.j-calltoaction-link-style-1:after {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*ボタン１の矢印（マウスオン時）*/
a.j-calltoaction-link.j-calltoaction-link-style-1:hover::after {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*------- ボタン２ -------*/
a.j-calltoaction-link.j-calltoaction-link-style-2 {
background: transparent;
border: 2px solid #D41A57;
color: #D41A57 !important;
font-size: 1.5rem;
}
a.j-calltoaction-link.j-calltoaction-link-style-2:hover {
background: #D41A57;
color: #FFF !important;
}
/*ボタン２の矢印（通常時）*/
a.j-calltoaction-link.j-calltoaction-link-style-2:after {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*ボタン２の矢印（マウスオン時）*/
a.j-calltoaction-link.j-calltoaction-link-style-2:hover::after {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*------- ボタン３ -------*/
a.j-calltoaction-link.j-calltoaction-link-style-3 {
color: #D41A57 !important;
font-size: 1.4rem;
font-family: 'Noto Serif JP', serif !important;
}
a.j-calltoaction-link.j-calltoaction-link-style-3:hover {
opacity: .5;
}
/*ボタン３の矢印（通常時）*/
a.j-calltoaction-link.j-calltoaction-link-style-3:after {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/* =======================================
ボタンスタイル（フッターエリア）
======================================= */
/*------- フッターボタン１ -------*/
footer a.j-calltoaction-link.j-calltoaction-link-style-1:hover {
background: transparent;
border: 2px solid #D41A57;
color: #D41A57 !important;
}
/*フッターボタン１の矢印（マウスオン時）*/
footer a.j-calltoaction-link.j-calltoaction-link-style-1:hover::after {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*------- フッターボタン２ -------*/
footer a.j-calltoaction-link.j-calltoaction-link-style-2 {
background: transparent;
border: 2px solid #D41A57;
color: #D41A57 !important;
}
footer a.j-calltoaction-link.j-calltoaction-link-style-2:hover {
background: #D41A57;
color: #FFF !important;
}
/*フッターボタン２の矢印（通常時）*/
footer a.j-calltoaction-link.j-calltoaction-link-style-2:after {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*フッターボタン２の矢印（マウスオン時）*/
footer a.j-calltoaction-link.j-calltoaction-link-style-2:hover::after {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*------- フッターボタン３ -------*/
footer a.j-calltoaction-link.j-calltoaction-link-style-3 {
color: #D41A57 !important;
}
/*フッターボタン３の矢印（通常時）*/
footer a.j-calltoaction-link.j-calltoaction-link-style-3:after {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*------- フッターエリアのボタンスタイル（マウスオン時） -------*/
footer a.j-calltoaction-link.j-calltoaction-link-style-1:hover, footer a.j-calltoaction-link.j-calltoaction-link-style-2:hover, footer a.j-calltoaction-link.j-calltoaction-link-style-3:hover {
opacity: .7;
}
/* =======================================
ヘッダーエリアのレイアウト
======================================= */
/*------- PC表示 -------*/
/*ヘッダー背景色*/
#global-header {
background: #FFF;
transition: 0.8s;
border-bottom: 2px solid #D41A57;
}
.cc-indexpage #global-header {
border-bottom: none;
}
#global-header {
box-sizing: border-box;
}
/*ヘッダーのリンク色*/
#top-nav a, #top-nav a:link, #top-nav a:visited {
color: #666;
}
#global-header.fixed {
box-shadow: rgb(0,0,0,.1) 1px 1px 7px;
position: fixed;
width: 100%;
background: rgba(255,255,255,.8);
animation-name: fixed-contact;
animation-duration: 1s;
animation-fill-mode: forwards;
border-bottom: none;
}
@keyframes fixed-contact {
0% {
opacity: 0;
transform: translateY(-10rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/*モバイル時*/
#top-nav .j-nav-variant-nested.mobile {
box-shadow: rgb(0,0,0,.1) 1px 1px 7px;
padding: 0;
}
/*------- ロゴ -------*/
#global-header-logo {
width: 230px;
}
@media screen and (max-width: 768px) {
#global-header-logo {
width: 20vw;
}
#global-header-logo img {
margin-top: 0;
}
}
@media screen and (max-width: 480px) {
#global-header-logo {
width: 120px;
}
}
/* =======================================
メインビジュアルのスタイル
======================================= */
.main-visual-inner {
display: none;
}
.cc-indexpage .main-visual-inner {
display: block;
}
.cc-indexpage .main-visual-inner {
display: flex;
justify-content: space-between;
}
.cc-indexpage .main-visual-inner .inner-left {
background-color: #FFF;
display: flex;
flex-direction: column;
height: calc(100vh - 90px);
justify-content: space-between;
width: 280px;
}
.cc-indexpage .main-visual-inner .inner-right {
width: calc(100% - 280px);
}
.cc-indexpage #main-visual .main-visual-inner .inner-right {
background: url(https://u.jimcdn.com/cms/o/s1c44aa84a9e82e5f/userlayout/img/main-visual.jpg?t=1632727289) no-repeat center;
background-size: 100vh;
animation: animationZoom 10s ease-in-out forwards;
}
@keyframes animationZoom {
100% {
background-size: 150vh;
}
}
@media screen and (min-width: 769px) {
.cc-indexpage .main-visual-inner .inner-right {
margin-right: 4vw;
}
}
@media screen and (max-width: 768px) {
.cc-indexpage .main-visual-inner .inner-left {
width: 22vw;
}
.cc-indexpage .main-visual-inner .inner-right {
width: 78vw;
}
}
@media screen and (max-width: 480px) {
.cc-indexpage .main-visual-inner .inner-left {
width: 0;
}
.cc-indexpage .main-visual-inner .inner-right {
width: 100vw;
}
}
/* テキストエリア */
.cc-indexpage .main-visual-inner .inner-left .inner-text {
margin-top: 10vh;
padding: 2rem 0 2rem 3vw;
position: relative;
width: 360px;
z-index: 10;
}
.cc-indexpage .main-visual-inner .inner-left .inner-text h1 {
display: flex;
flex-direction: column;
font-family: "Playfair Display", serif;
font-style: italic;
font-weight: 100;
line-height: 1.25;
margin-bottom: 4rem;
}
.cc-indexpage .main-visual-inner .inner-left .inner-text h1 span {
color: #767676;
font-size: 7vw;
}
.cc-indexpage .main-visual-inner .inner-left .inner-text h1 span.color {
color: #D41A57;
}
.cc-indexpage .main-visual-inner .inner-text p {
font-family: 'Noto Serif JP', serif !important;
color: #999 !important;
}
@media screen and (max-width: 768px) {
.cc-indexpage .main-visual-inner .inner-left .inner-text h1 span {
font-size: 13vw;
}
}
@media screen and (max-width: 480px) {
.cc-indexpage .main-visual-inner .inner-left .inner-text h1 span {
font-size: 7rem;
}
}
/* サブ情報エリア */
.cc-indexpage .sub-info {
align-items: center;
bottom: 0;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
padding: 0 0 1vh 3vw;
position: relative;
width: 100vw;
}
.cc-indexpage .sns-area {
display: flex;
margin-right: 1.5rem;
}
.cc-indexpage .sns-area img {
padding-right: 5px;
width: 30px;
}
.cc-indexpage .site-info-text p {
font-size: 1.3rem !important;
font-family: 'Noto Serif JP', serif !important;
}
/*------ スクロールダウンボタン ------*/
.cc-indexpage .scroll-btn {
display: block;
}
.cc-indexpage .scroll-btn {
display: none;
position: absolute;
bottom: 0;
left: auto;
right: 0;
}
.cc-indexpage .scroll-btn a {
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
padding: 10px 0 210px;
overflow: hidden;
text-decoration: none !important;
line-height: 1;
letter-spacing: .2em;
text-transform: uppercase;
text-decoration: none;
}
.cc-indexpage .scroll-btn a span {
transform: rotate(90deg) !important;
position: relative;
display: inline-block;
margin: 4rem 0 2rem .5rem;
color: #666;
font-size: 1.1rem;
}
.cc-indexpage .scroll-btn a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 1px;
height: 200px;
background: #666;
animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
0% {
transform: scale(1, 0);
transform-origin: 0 0;
}
50% {
transform: scale(1, 1);
transform-origin: 0 0;
}
50.1% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
100% {
transform: scale(1, 0);
transform-origin: 0 100%;
}
}
@media screen and (max-width: 768px) {
.cc-indexpage .scroll-btn {
right: -10px;
}
}
@media screen and (max-width:480px) {
.cc-indexpage .scroll-btn {
display: none;
}
}
/*------ メインビジュアル調整 ------*/
#main-visual {
height: 30vw;
max-height: 50rem;
min-height: 30rem;
overflow: hidden;
background: url(https://u.jimcdn.com/cms/o/s1c44aa84a9e82e5f/userlayout/img/sub-main-visual.jpg?t=1632880621) no-repeat center;
background-size: cover;
}
.cc-page.cc-pagemode-default #main-visual {
background: url(https://u.jimcdn.com/cms/o/s1c44aa84a9e82e5f/userlayout/img/sub-main-visual.jpg?t=1632880621) no-repeat center;
background-size: cover;
}
.cc-indexpage #main-visual,
.cc-page.cc-indexpage.cc-pagemode-default #main-visual {
height: auto;
max-height: 100%;
min-height: 100%;
background: #FFF;
}
.non-header #main-visual {
display: none;
}
/*サブページ差し込み*/
@media screen and (min-width: 481px) {
#main-visual .page-mainvisual img {
height: 35vw;
max-height: 550px;
min-height: 400px;
object-fit: cover;
object-position: 50% 50%;
width: 100%;
/*位置 横：0%→左 縦：0%→上にフィット*/
}
}
@media screen and (max-width: 480px) {
#main-visual .page-mainvisual img {
height: 45vh;
min-height: 30rem;
object-fit: cover;
object-position: 50% 50%;
width: 100%;
/*位置 横：0%→左 縦：0%→上にフィット*/
}
}
/* =======================================
コンテンツエリアのレイアウト
======================================= */
/*------ コンテンツエリア大枠 ------*/
/*コンテンツエリアの背景色（全ページ共通：編集画面）*/
.cc-page #content, #content-inner {
background: #FFF;
}
#content-inner {
padding: .2rem 2rem 4rem;
}
.cc-indexpage #content-inner {
padding: .2rem 2rem 2rem;
}
.design-page #content-inner {
padding-bottom: 0;
}
/*コンテンツエリアの背景色（全ページ共通：プレビューのみ）*/
.cc-page.cc-pagemode-default #content {
background: #FFF;
}
.cc-page.cc-pagemode-default #content-inner {
background: transparent;
}
/* =======================================
メインエリアのレイアウト
======================================= */
/*------ メインエリア枠 ------*/
/*メインエリアの背景色（全ページ共通）*/
main {
background: #FFF;
max-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}
/*メインエリアの背景色（トップページのみ）*/
.cc-indexpage main {
background: #FFF;
padding-top: 10rem;
}
/*メインエリアの背景色（サブページの1カラムレイアウトページ）*/
.single-column main {
background: #FFF;
}
@media screen and (max-width: 768px) {
.cc-indexpage main {
padding-top: 5rem;
}
.non-header main {
padding-top: 9rem;
}
}
/* =======================================
フッターエリア
======================================= */
/*------- フッターコンテンツエリアの背景色（全ページ共通） -------*/
footer #global-footer {
padding: 2rem 2rem 1rem;
}
#footer-inner {
background: #FAFAFA;
padding-bottom: 0;
}
/*------- フッターボトムエリアの背景色（全ページ共通） -------*/
footer #footer-bottom {
background: #D41A57;
}
/* =======================================
ブログのスタイル
======================================= */
/*------ ブログ記事ページ ------*/
/*メインビジュアル背景色*/
body.cc-page-blog #main-visual {
background: #000;
}
/*ブログ記事ページのメインビジュアル透過率*/
.cc-page-blog #main-visual .j-imageSubtitle img {
opacity: .5;
}
/*テーマ・日付の文字の色、サイズ*/
.cc-page-blog .n.j-blog-meta.j-blog-post--header .j-text.j-module.n, .cc-page-blog .n.j-blog-meta.j-blog-post--header .j-text.j-module.n a.j-blog-post--category {
color: #555 !important;
font-size: 1.1rem;
}
/*ブログタイトルの字間*/
.cc-page-blog h1.j-blog-header.j-blog-headline.j-blog-post--headline {
letter-spacing: .15rem;
}
/*カテゴリエリアの仕切り線*/
.j-module.n.j-text.j-blog-post--tags-wrapper {
border-top: 1px solid #BBB;
}
/*カテゴリの文字色*/
.j-module.n.j-text.j-blog-post--tags-wrapper span {
color: #555 !important;
}
/*カテゴリのリンク色*/
.j-module.n.j-text.j-blog-post--tags-wrapper span a.j-blog-post--tag {
color: #FFF !important;
}
/*カテゴリの背景色*/
.j-module.n.j-text.j-blog-post--tags-wrapper span a.j-blog-post--tag {
background: #333 !important;
}
/*カテゴリの背景色（マウスオン時）*/
main .j-blog-post--tags-list a.j-blog-post--tag:hover {
opacity: .7;
}
/*SNS アイコン*/
.cc-page-blog .cc-sharebuttons-element.cc-sharebuttons-style-black a::before {
color: #333 !important;
}
.cc-page-blog div.cc-sharebuttons-size-32 a {
height: 32px;
width: 32px;
}
.cc-page-blog div.cc-sharebuttons-size-32 a::before {
font-size: 22px !important;
}
.cc-page-blog div.cc-sharebuttons-size-32 a::after {
font-size: 12px !important;
z-index: 2;
}
/*コメント欄の「コメントをお書きください」*/
main .skiptoform a {
background: #333;
color: #FFF !important;
font-size: 1.2rem !important;
}
/*コメント欄の「コメントをお書きください」（マウスオン時）*/
main .skiptoform a:hover {
opacity: .7;
}
@media screen and (max-width: 480px) {
/*ブログタイトルの文字サイズ、行間*/
h1.j-blog-header.j-blog-headline.j-blog-post--headline {
font-size: 2.1rem;
line-height: 1.3;
}
}
/*------ ブログ一覧ページメインエリア表示（レイアウト：「横並び」設定時） ------*/
/*ページの大見出し（テーマのタイトル：h1）行間*/
.j-blog.n.clearover.j-blogarticle h1 {
letter-spacing: .1rem;
}
/*ブログ一覧ページの見出し（h2）の文字色*/
.j-blog-meta h2 {
color: #333;
font-size: 1.8rem !important;
text-align: left !important;
}
/*ブログ一覧ページの見出し（h2：マウスオン時）*/
main .j-blog-meta a h2.j-blog-headline.j-blog-post--headline:hover {
opacity: .7;
}
/*テーマの文字色*/
main a.j-blog-page--tag, main a:link.j-blog-page--tag, main a:visited.j-blog-page--tag {
color: #555 !important;
text-decoration: none !important;
}
/*日付の文字色*/
.j-blog.n.clearover.j-blogarticle .cc-m-hgrid-column.last #cc-m-1:nth-of-type(1), .j-blog.n.clearover.j-blogarticle #cc-matrix- #cc-m-1:nth-of-type(1).j-text {
color: #555;
font-size: 1.2rem;
}
/*概要文の文字色、サイズ、行間*/
.j-blog.n.clearover.j-blogarticle .cc-m-hgrid-column.last #cc-m-1:nth-of-type(3), .j-blog.n.clearover.j-blogarticle #cc-matrix- #cc-m-1:nth-of-type(3) {
color: #888;
font-size: 1.2rem;
line-height: 1.3;
}
/*「続きを読む」の文字色、サイズ、行間*/
.j-blog.n.clearover.j-blogarticle .cc-m-hgrid-column.last #cc-m-1:nth-of-type(4) p a, .j-blog.n.clearover.j-blogarticle #cc-matrix- #cc-m-1:nth-of-type(4) p a {
color: #555 !important;
font-size: 1.2rem;
line-height: 1.3;
}
/*「さらに表示する」ボタン（ブログ10件以上で表示）*/
#load-more-blog-posts-content a {
background: #333;
color: #FFF !important;
}
/*「さらに表示する」ボタン（マウスオン時）*/
#load-more-blog-posts-content a:hover {
opacity: .7;
}
@media screen and (max-width: 480px) {
/*ブログ一覧の見出し（h2：スマホ時） */
.j-blog-meta h2 {
font-size: 1.6rem !important;
}
}
/*------ ブログ一覧ページサイドバーエリア表示（レイアウト：「横並び」設定時、ブログ記事ページで表示される） ------*/
/*「New Post」見出し（h1）のボーダー、文字色、サイズなど*/
section.Jimdo-blog-feed-sidearea h1 {
border-bottom: 1px solid #AAA;
border-top: 1px solid #AAA;
color: #888;
font-size: 1.4rem;
letter-spacing: 0;
text-align: center;
}
/*ブログタイトル（h2）の文字サイズ*/
section.Jimdo-blog-feed-sidearea .j-blog-meta h2 {
font-size: 1.4rem !important;
}
/* =======================================
表のスタイル
======================================= */
/*強制的に線を重ねる*/
table {
border-collapse: collapse;
}
/*枠組みの線*/
table tr td {
border: 1px solid #666;
}
/* =======================================
画像/画像つき文章
======================================= */
/*キャプションの文字サイズ*/
figcaption {
font-size: 1.2rem !important;
}
/* =======================================
水平線のスタイル
======================================= */
/*水平線の色、線種、太さ*/
.hr {
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-color: #666 !important;
}
.cc-m-all-content.j-module.j-hr {
padding: .2rem 0;
}
.cc-page.cc-pagemode-default .j-module.n.j-hr {
padding: 0 !important;
}
/* =======================================
フォームのスタイル
======================================= */
/*送信ボタンのボーダー、背景色、文字色（通常時）*/
button.button, input[type=button], input[type=submit], .zend_form input[type=submit] {
background: #d41a57 !important;
border: 2px solid #d41a57 !important;
color: #FFF !important;
}
/*送信ボタンのボーダー、背景色、文字色（マウスオン時）*/
button.button:hover, input[type=button]:hover, input[type=submit]:hover, zend_form input[type=submit]:hover {
background: #FFF !important;
color: #d41a57 !important;
}
/*フォームの枠色*/
input[type=text], input[type=email], input[type=date], select, textarea {
border: 1px solid #DDD;
}
/*フォームテキストエリアの枠*/
.cc-m-form-view-input-wrapper textarea {
border: 1px solid #DDD;
}
/*ゲストブックテキストエリアの枠*/
textarea[name=comment] {
border: 1px solid #DDD !important;
}
/* =======================================
ファイルダウンロードのスタイル
======================================= */
/*------ 「ダウンロード」ボタンのボーダー、背景色、文字色（通常時）------*/
.cc-m-download-file-link a.cc-m-download-link {
background: #d41a57;
border: 2px solid #d41a57;
color: #FFF !important;
}
/*------ 「ダウンロード」ボタンのボーダー、背景色、文字色（マウスオン時） ------*/
.cc-m-download-file-link a.cc-m-download-link:hover {
background: transparent;
color: #d41a57 !important;
}
/* =======================================
ショップ（メインエリア）のスタイル
======================================= */
/*------ 商品コンテンツ ------*/
/*商品名*/
.cc-shop-product-desc span.fn {
font-size: 2rem;
}
/*「カートに追加」ボタンのボーダー、背景色（通常時）*/
a.cc-shop-addtocard, a.cc-shop-addtocard:visited, input.cc-checkout-btn {
background: #D41A57 !important;
border: 2px solid #D41A57 !important;
border-radius: 6px !important;
}
/*「カートに追加」ボタンの文字色（通常時）*/
main a:link.cc-shop-addtocard, main a.cc-shop-addtocard:visited {
color: #FFF !important;
font-size: 1.4rem !important;
}
/*「カートに追加」ボタンの背景色（マウスオン時）*/
a.cc-shop-addtocard:hover {
background: #FFF !important;
}
/*「カートに追加」ボタンの文字色（マウスオン時）*/
main a.cc-shop-addtocard:hover {
color: #D41A57 !important;
font-size: 1.4rem !important;
}
.cc-shop-product-price-item {
padding: 10px 30px 0 0 !important;
}
/*セレクトボックス*/
select.cc-product-variant-selectbox.j-product__variants {
font-size: 1.2rem !important;
}
/*商品価格の文字の色、サイズ*/
.cc-shop-price {
color: #666 !important;
font-size: 3rem !important;
}
/*注釈*/
p.cc-product-tax-and-shipping-info, ul.cc-shop-product-availability.j-product-details {
font-size: 1.2rem !important;
}
@media screen and (max-width: 480px) {
/*概要エリアの背景色*/
.cc-shop-product-desc .description {
background: #EFEFEF;
}
/*概要エリアの文字サイズ、行間*/
.cc-shop-product-desc .description p {
font-size: 1.4rem !important;
line-height: 1.75 !important;
}
}
/*------ 商品カタログコンテンツ ------*/
/*-- カタログ共通の文字色 --*/
main a.j-catalog-product-title-link, main a:link.j-catalog-product-title-link, main a:visited.j-catalog-product-title-link {
color: #666 !important;
}
/*価格*/
div.cc-catalog-galleryview div.cc-webview-product-price strong, div.cc-catalog-listview div.cc-webview-product-price strong, div.cc-catalog-sliderview div.cc-webview-product-price strong {
color: #666 !important;
}
/*スタイル3共通の背景色*/
.cc-catalog-st-3 .cc-webview-product.hlisting.j-catalog-product {
background: #EEE !important;
}
/*スタイル4共通の背景色*/
.cc-catalog-st-4 .cc-webview-product.hlisting.j-catalog-product {
background: #111 !important;
}
/*スタイル4共通の文字色（メインエリア）*/
main .cc-catalog-st-4 a.j-catalog-product-title-link, main .cc-catalog-st-4 a:link.j-catalog-product-title-link, main .cc-catalog-st-4 a:visited.j-catalog-product-title-link, .cc-catalog-st-4 strong.cc-price.price.j-catalog-price {
color: #FFF !important;
}
/*-- 並べて表示 --*/
/*スタイル6のリンク色*/
main .cc-catalog-galleryview.cc-catalog-st-6 a.j-catalog-product-title-link, main .cc-catalog-galleryview.cc-catalog-st-6 a:link.j-catalog-product-title-link, main .cc-catalog-galleryview.cc-catalog-st-6 a:visited.j-catalog-product-title-link, .cc-catalog-st-6 strong.cc-price.price.j-catalog-price {
color: #FFF !important;
}
/*スタイル6の背景色*/
.cc-catalog-container-new .cc-catalog-galleryview.cc-catalog-st-6 .cc-product-details, .cc-catalog-container-new .cc-catalog-sliderview.cc-catalog-st-6 .cc-product-details {
background-color: rgba(0, 0, 0, .6) !important;
}
/*-- リスト表示 --*/
/*リスト表示共通の商品名の文字色*/
.cc-catalog-container-new .cc-catalog-listview .cc-product-title {
line-height: 1.5;
}
/*リスト表示のリンク*/
main .cc-catalog-listview a.j-catalog-product-title-link {
font-size: 1.8rem;
text-decoration: none !important;
}
/*リスト表示共通の概要文の文字色*/
.cc-catalog-listview .cc-product-description.description.j-catalog-product-description {
color: #777;
font-size: 1.4rem;
line-height: 1.5;
}
/*リスト表示スタイル2の背景色*/
.cc-catalog-container.j-catalog-container.cc-catalog-listview.cc-catalog-st-2 .cc-webview-product-price.j-catalog-product-price {
background: #EEE;
}
/*リスト表示スタイル4の文字色*/
.cc-catalog-container.j-catalog-container.cc-catalog-listview.cc-catalog-st-4.cc-catalog-size-3 .cc-product-description.description.j-catalog-product-description {
color: #999;
}
/*リスト表示スタイル4のリンク色*/
.cc-catalog-container.j-catalog-container.cc-catalog-listview.cc-catalog-st-4 .cc-product-description.description.j-catalog-product-description a {
color: #FFF !important;
}
/*リスト表示スタイル5の商品価格文字サイズ、行間*/
.cc-catalog-container-new .cc-catalog-listview.cc-catalog-st-5 .cc-webview-product-price strong {
font-size: 1.5rem !important;
line-height: 1.5;
}
/*リスト表示スタイル6の文字色*/
.cc-catalog-listview.cc-catalog-st-6 .cc-webview-product-price.j-catalog-product-price strong.cc-price.price.j-catalog-price {
color: #222 !important;
font-size: 1.6rem;
}
/*-- スライダー表示 --*/
/*スライダー表示スタイル4の枠線*/
.cc-catalog-container-new .cc-catalog-sliderview.cc-catalog-st-4 {
border: 2px solid #AAA !important;
}
/*スライダー表示スタイル6のリンク色*/
.cc-catalog-container-new .cc-catalog-sliderview.cc-catalog-st-6 span.cc-product-title.item.j-catalog-product-title a.j-catalog-product-title-link {
color: #FFF !important;
}
/* =======================================
カートアイコンのスタイル（カートに商品が入った時に表示される）
======================================= */
/*アイコン表示位置*/
.j-cart {
right: .5rem !important;
top: 6rem !important;
}
/*カートアイコン色*/
.j-cart--hover-popup, .j-cart-icon {
background-color: #000 !important;
}
/* =======================================
トップナビゲーション（メインナビ）のスタイル
======================================= */
/*------- PC表示 -------*/
@media screen and (min-width: 769px) {
#top-nav .j-nav-variant-nested ul.cc-nav-level-0.j-nav-level-0 {
padding: 0 3rem 0 0;
}
#top-nav .j-nav-variant-nested>ul>li>a {
font-size: 1.3rem;
}
}
/*フォント*/
#top-nav .j-nav-variant-nested li a {
font-family: 'Noto Serif JP', serif;
}
/*２階層目メニューの文字色（通常時）*/
#top-nav .j-nav-variant-nested li li a {
color: #FFF;
}
/*２階層目以下メニューのボーダー、背景色（通常時）*/
#top-nav .j-nav-variant-nested li li {
background: #D41A57;
border-bottom: 1px solid #FFF;
}
/*２階層目以下メニューのボーダー、背景色（マウスオン時）*/
#top-nav .j-nav-variant-nested li li:hover {
background: #a71545;
}
/*矢印アイコン（サブメニュー右展開の場合）*/
#top-nav .j-nav-variant-nested li.has-sub > a:after {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*矢印アイコン（サブメニュー左展開の場合）*/
#top-nav .j-nav-variant-nested li.drop-left li.has-sub > a:before {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*問い合わせを目立たせる*/
@media screen and (min-width: 769px) {
header li#cc-nav-view-2185020792>a {
background: #D41A57;
color: #FFF !important;
}
}
/*------- スマホ表示 -------*/
/*スマホメニュー文字色*/
#top-nav .j-nav-variant-nested.mobile li a {
color: #FFF;
}
/*スマホメニュー全体背景*/
#top-nav .j-nav-variant-nested.mobile {
backdrop-filter: contrast(1) blur(3px);
background: transparent;
}
/*ハンバーガーメニュー*/
i.fa.fa-bars:before {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*ハンバーメニューエリアの背景色*/
#top-nav .j-nav-variant-nested.mobile a.menu-toggle.full {
background: rgba(255,255,255,.8);
}
/*スマホメニュー１階層目の背景*/
#top-nav .j-nav-variant-nested.mobile li {
background: rgba(212,0,87,.85);
}
/*スマホメニュー2階層目の背景*/
#top-nav .j-nav-variant-nested.mobile li li {
background: rgba(0, 0, 0, .2);
}
/*スマホメニュー３階層の背景*/
#top-nav .j-nav-variant-nested.mobile li li li {
background: rgba(0, 0, 0, .4);
}
/*スマホメニューの仕切りライン*/
#top-nav .j-nav-variant-nested.mobile ul li a {
border-bottom: 1px solid rgba(255, 255, 255, .5);
}
/*Closeボタンの色*/
#top-nav .j-nav-variant-nested .call-btn-mobile, #top-nav .j-nav-variant-nested .location-btn-mobile, #top-nav .j-nav-variant-nested .menu-toggle {
color: #D41A57;
}
#top-nav .j-nav-variant-nested .close-menu {
color: #FFF;
}
/*Closeメニューの背景*/
#top-nav .j-nav-variant-nested.mobile > ul > li:last-child {
background: #400217;
}
/*スマホメニューのCloseアイコン*/
.j-nav-variant-nested.mobile .fa-remove:before, .j-nav-variant-nested.mobile .fa-close:before, .j-nav-variant-nested.mobile .fa-times:before {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*スマホメニューのプラスアイコン*/
.j-nav-variant-nested.mobile i.fa.fa-plus:before {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
@media screen and (min-width: 769px) {
nav#footer-nav ul {
flex-wrap: wrap;
}
}
/* =======================================
パンくずリストのスタイル
======================================= */
main .j-nav-variant-breadcrumb ol li a, main a:link.bread-top, main a:visited.bread-top, main a.bread-blog, main a:link.bread-blog, main a:visited.bread-blog, main .j-nav-variant-breadcrumb a.j-blog-post--category {
color: #999 !important;
font-size: 1.1rem;
}
.j-nav-variant-breadcrumb ol {
padding: 0 0 6rem;
}
main .j-nav-variant-breadcrumb h1.j-blog-header.j-blog-headline.j-blog-post--headline {
color: #444 !important;
font-size: 1.1rem;
font-weight: normal;
letter-spacing: 0;
}
main a.bread-top:hover, main .j-nav-variant-breadcrumb ol li a:hover, main .j-nav-variant-breadcrumb ol li.cc-nav-current.j-nav-current a, nav#bread-nav a.bread-blog:hover, nav#bread-nav a.j-blog-post--category:hover {
color: #D41A57 !important;
}
/* =======================================
サイドバーナビ
======================================= */
/*------- サイドバーナビの背景色 -------*/
body.bottom-side nav#side-nav ul {
background: #000;
}
/*------- サイドバーナビのタイトル「Contents Menu」背景色、文字色 -------*/
#side ul.mainNav2:before {
background: #000;
color: #888;
content: "Contents Menu";
content: "Contents Menu";
font-size: 1.2rem;
font-style: italic;
text-align: center;
text-align: center;
}
/*------- サイドバーナビメニュー -------*/
nav#side-nav ul li a {
background: #000 !important;
border-bottom: 1px solid #DDD;
color: #FFF !important;
}
/*マウスオン、メニュー選択時*/
nav#side-nav ul li a:hover, nav#side-nav ul li a.current {
background: #333 !important;
color: #DDD !important;
}
/* =======================================
フッターナビ
======================================= */
/*------- フッターナビの文字色 -------*/
@media screen and (min-width: 769px) {
nav#footer-nav ul li a {
color: #888 !important;
text-decoration: none !important;
font-family: 'Noto Serif JP', serif !important;
}
nav#footer-nav ul li a:hover {
opacity: .5;
}
}
/* =======================================
上に戻るボタンのスタイル
======================================= */
.cc-FloatingButtonBarContainer .cc-FloatingButtonBarContainer-button-scroll span {
background-color: #D41A57 !important;
}
ul.cc-FloatingButtonBarContainer li a:hover {
opacity: .7;
}
@media screen and (min-width: 769px) {
.cc-FloatingButtonBarContainer.cc-FloatingButtonBarContainer-right {
right: 3rem!important;
bottom: 4rem!important;
}
}
/* =======================================
オリジナルコンテンツパーツのスタイル
======================================= */
/*------ フルサイズコンテンツ ------*/
/*フルサイズコンテンツの背景デフォルト色*/
.fullsize, .fullsize-edit {
background: #EEE;
}
/*------ 固定コンタクトボタン ------*/
/*固定コンタクトボタンの色（通常時）*/
#fixed-contact-btn a {
background: rgba(255, 0, 83, .95);
color: #FFF;
}
/*固定コンタクトボタンの色（マウスオン時）*/
#fixed-contact-btn a:hover {
background: rgba(255, 0, 83, .8);
}
/*固定コンタクトボタンのメールアイコン*/
#fixed-contact-btn a::before {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/* =======================================
編集画面のスタイル
======================================= */
/*------ フッターの「コンテンツを追加」パネル ------*/
.cc-m-map-close > a::after {
color: #FFF;
}
span.icon.icon-ellipsis-horizontal {
color: #FFF !important;
}
span.cc-m-map-toggle-text {
color: #FFF !important;
}
.cc-m-map .cc-m-map-additionalToggle {
text-decoration: none !important;
}
/* =======================================
カスタマイズパーツ調整
======================================= */
/*スペースカラムウィジェット*/
@media screen and (max-width: 480px) {
.cc-page.cc-pagemode-default .j-hgrid.space-column.column2,
.cc-page.cc-pagemode-default .j-hgrid.space-column.column2.reverse-column {
margin: 0 -3.5rem;
}
.cc-page.cc-pagemode-default .j-hgrid.space-column.reverse-column {
flex-direction: column-reverse;
margin: 0;
}
}
/*サブページメインビジュアル画像差し込みエリア解除*/
/*main .cc-matrix.ui-sortable.cc-matrix-content>div.cc-m-imagesubtitle:nth-of-type(2)::before,
main .cc-matrix.ui-sortable.cc-matrix-content>div.cc-m-imagesubtitle:nth-of-type(3)::before {
content: none;
}
main .cc-matrix.ui-sortable.cc-matrix-content > div.cc-m-imagesubtitle:nth-of-type(2),
main .cc-matrix.ui-sortable.cc-matrix-content > div.cc-m-imagesubtitle:nth-of-type(3) {
background: none;
}*/
/*------ センタリングタイトル部 ------*/
.j-hgrid.centering-head-area.main-header {
padding: 7rem 0 10rem !important;
}
/*見出し*/
.centering-head-area h1,
.centering-head-area h2,
.centering-head-area h3 {
text-align: center;
padding: 0 !important;
margin: 0 !important;
}
/*サブタイトル*/
p.en-title {
font-family: 'Noto Serif JP', serif !important;
font-size: 1.6rem !important;
color: #ACACAC !important;
text-align: center;
}
/*文章*/
.centering-head-area p,
.centering-head-area li,
.centering-head-area {
text-align: center;
}
/*------ 中見出しスタイル2 ------*/
main .j-header.heading2-style2 h2,
main .j-hgrid .j-header.heading2-style2 h2 {
position: relative;
text-align: left;
}
main .j-hgrid .j-header.heading2-style2 h2 {
padding: revert !important;
}
main .j-header.heading2-style2 span,
main .j-hgrid .j-header.heading2-style2 span {
position: relative;
z-index: 2;
display: inline-block;
margin: 0;
padding: 0 2rem 0 0;
background-color: #fff;
text-align: left;
}
main .j-header.heading2-style2 h2::before,
main .j-hgrid .j-header.heading2-style2 h2::before {
position: absolute;
top: 50%;
z-index: 1;
content: '';
display: block;
width: 100%;
height: 1px;
background-color: #666;
}
/*------ 調整余白 ------*/
@media screen and (max-width: 480px) {
.j-spacing.control-space {
display: none;
}
}
/*------ タイトルバックケース ------*/
/*ブライトミューズアロマページ*/
.cc-page.cc-pagemode-default main .j-textWithImage.title-back {
margin-top: 7rem;
margin-bottom: 7rem;
}
/*共通*/
.clear {
background: #333;
text-align: center;
}
.cc-page.cc-pagemode-default .clear {
background: transparent;
}
.cc-page.cc-pagemode-default main .j-textWithImage.title-back .cc-m-textwithimage-inline-rte,
.cc-page.cc-pagemode-default main .j-textWithImage.title-back figure.cc-imagewrapper img {
height: 40rem; /*基準の高さ*/
min-height: 300px; /*最低高さ*/
}
.cc-page.cc-pagemode-default main .j-textWithImage.title-back figure.cc-imagewrapper img {
object-position: 50% 50%; /*横・縦位置*/
}
main .j-textWithImage.title-back h2 {
color: #FFF;
text-shadow: rgba(0,0,0,.5) 1px 1px 3px;
padding-top: 2rem !important;
text-align: center !important;
}
main .j-textWithImage.title-back h2:before {
content: '';
display: block;
width: 62px;
height: 77px;
background: url(https://u.jimcdn.com/cms/o/s1c44aa84a9e82e5f/userlayout/img/brake-image-logo.png?t=1632892593) no-repeat 0 center;
background-size: contain;
vertical-align: middle;
margin: 0 auto 1rem;
}
main .j-textWithImage.title-back p.en-title {
color: #FFF !important;
text-shadow: rgba(0,0,0,.5) 1px 1px 3px;
}
/*------ 狭い幅のカラム ------*/
.fullsize .j-hgrid.narrow {
max-width: 580px;
}
/* =======================================
インサートページのスタイル
======================================= */
/*------ サービスメニューエリア読み込み（更新用） ------*/
/*背景*/
#bm-menu-area.fullsize {
background: #D41A57;
}
.cc-indexpage #bm-menu-area.fullsize {
margin-bottom: 10rem;
}
@media screen and (max-width: 768px) {
.cc-indexpage #bm-menu-area.fullsize {
margin-bottom: 6rem;
}
}
/*見出し・文章*/
main #bm-menu-area h1, main #bm-menu-area h2, main #bm-menu-area h3 {
color: #FFF;
text-align: center;
}
main #bm-menu-area h2 {
padding-top: 2rem !important;
}
main #bm-menu-area h3 {
padding: 3rem 0 !important;
border: none;
}
/*ボタン*/
/*------- ボタン３ -------*/
#bm-menu-area a.j-calltoaction-link.j-calltoaction-link-style-3 {
color: #FFF !important;
font-weight: normal;
}
/*ボタン３の矢印（通常時）*/
#bm-menu-area a.j-calltoaction-link.j-calltoaction-link-style-3:after {
background: url("data:image/svg+xml;utf-8,") no-repeat;
}
/*------ お問い合わせエリア読み込み（更新用） ------*/
#bm-contact-area.fullsize {
background: #FFF;
}
@media screen and (min-width: 481px) {
/*モバイル用非表示*/
#cc-m-14077983592.j-imageSubtitle {
display: none;
}
}
@media screen and (max-width: 480px) {
/*PC用非表示*/
#cc-m-14077983292.j-imageSubtitle {
display: none;
}
}
/*------ ブランディングメニューエリア読み込み（更新用） ------*/
#bm-branding-area.fullsize {
background: #464646;
}
main #bm-branding-area.fullsize h3 {
color: #FFF;
text-align: center;
border: none;
padding: 3rem 0 0 !important;
}
main #bm-branding-area.fullsize a.j-calltoaction-link.j-calltoaction-link-style-3 {
color: #FFF !important;
font-weight: normal;
}
main #bm-branding-area.fullsize a.j-calltoaction-link.j-calltoaction-link-style-3:after {
background: url("data:image/svg+xml;utf-8,