@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL PLUS
    Theme URI: https://manuon.com/swell_plus/
    Description: SWELLを機能拡張する子テーマ
    Version: 1.3.0
    Author: suya(suyasite)@manuon.com
    Author URI: https://manuon.com/
*/

#swell_plus_floating_button {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 98;
    bottom: -60px;
    transition: bottom .4s;
    margin-bottom: 0.5em;
}

[data-scrolled=true] #swell_plus_floating_button {
    display: block;
    bottom: 0;
}

/*.p-fixBtnWrap {
    bottom: calc(50px + 1.25em);
}*/

/*  ===== フローティングボタン =====  */


/* フローティングボタン全体（右下固定、ページトップボタンの下に配置） */
#floating-buttons {  /* ブログパーツのHTMLアンカーIDに合わせて変更（例: custom-cta-buttons） */
    position: fixed !important;
    bottom: 20px !important;   /* ページトップボタンより下に（通常トップボタンは80px前後なので20pxに） */
    right: 20px !important;
    z-index: 90 !important;    /* トップボタンより下（z-indexが低いと奥になる） */
    display: flex;
    flex-direction: column;    /* 縦並び（カタログ請求と電話を上下に） */
    pointer-events: auto;
}

/* ボタンスタイル（お好みで調整） */
#floating-buttons .swell-block-button__link {
    padding: 14px 28px !important;
    font-size: 15px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* スマホ対応 */
@media (max-width: 959px) {
    #floating-buttons {
        bottom: 15px !important;   /* スマホでも下寄りに */
        right: 15px !important;
    }
    #floating-buttons .swell-block-button__link {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}

#custom-cta-buttons a::after {
	display: none !important;
}

/* SWELLのページトップ戻るボタンはそのまま（必要に応じて微調整） */
.p-fixBtnWrap {
    bottom: 80px !important;   /* トップボタンを上にずらしてスペース確保（調整自由） */
}

/* 追従CTAボタンに白のボーダーを追加 */
.tel-button a {
    border: 1px solid #f2f2f2 !important; /* 2pxの太さの白線 */
    box-sizing: border-box !important; /* 枠線を含めたサイズ調整 */
}


/* width */
.w350{
	width:350px !important;
} /* PCでは600pxで固定する */


/* 1-1. text左寄せのまま中央 */
/* ① 基本（スマホ向け）の設定 */
.center-text-top1 {
    width: 92%; /* スマホでは少し広めに確保 */
    margin: 0 auto;
    text-align: left;
}

/* ② タブレット向け（画面幅600px以上）の設定 */
@media screen and (min-width: 600px) {
    .center-text-top1 {
        width: 80%; /* タブレットでは画面の80%の幅にする */
    }
}

/* ③ PC向け（画面幅960px以上）の設定 */
@media screen and (min-width: 960px) {
    .center-text-top1 {
    }
}

/* 1-2. text左寄せのまま中央 */

/* ① 基本（スマホ向け）の設定 */
.center-text {
    width: 92%; /* スマホでは少し広めに確保 */
    margin: 0 auto;
    text-align: left;
}

/* ② タブレット向け（画面幅600px以上）の設定 */
@media screen and (min-width: 600px) {
    .center-text {
        width: 80%; /* タブレットでは画面の80%の幅にする */
    }
}

/* ③ PC向け（画面幅960px以上）の設定 */
@media screen and (min-width: 960px) {
    .center-text {
        width: 600px; /* PCでは600pxで固定する */
    }
}

/* =====  追加フォント =====  */

/* Adobe Fonts適用するクラス */
.montserrat {
	font-family: "montserrat", sans-serif;
	font-weight: 700!important;
	font-style: normal;
}

.roboto {
	font-family: "roboto", sans-serif;
	font-style: normal;
}

.source-jp {
	font-family: "source-han-serif-jp-subset", sans-serif;
	font-style: normal;
}

/* font-weigh */

.fw700{
	font-weight: 700!important;
}

.fw400{
	font-weight: 400!important;
}

.fw300{
	font-weight: 300!important;
}

.fw100{
	font-weight: 100!important;
}

/* =====  content上下のマージン =====  */
.l-content{
	margin-top:0px;
	margin-bottom:0px;
}