@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*
    SWELLトップページスライダー調整用CSS
*/
/* PC（画面幅769px以上）向けのスタイル */
@media screen and (min-width: 769px) {
    /* メインビジュアル内のロゴ画像の最大幅を設定 */
    .p-mainVisual__slideTitle img{
        max-width: 8vw;
    }
    /* メインビジュアルのテキスト「TAKARA1」（class: main_sub-text_takara1）のフォントサイズと文字間隔を設定 */
    .p-mainVisual__slideText .main_sub-text_takara1 {
        font-size: 1.6em;
        letter-spacing: 0.2em;
    }
    /* メインビジュアルのテキスト「有限会社宝建設」（class: main_sub-text_company-name）の文字間隔を設定 */
    .p-mainVisual__slideText .main_sub-text_company-name {
        letter-spacing: 0.3em;
    }
}

/* モバイル（画面幅768px以下）向けのスタイル */
@media screen and (max-width: 768px) {
    /* メインビジュアル内のロゴ画像の最大幅を設定 */
    .p-mainVisual__slideTitle img{
        max-width: 16vw;
    }
    /* メインビジュアルのテキスト「TAKARA1」（class: main_sub-text_takara1）のフォントサイズと文字間隔を設定 */
    .p-mainVisual__slideText .main_sub-text_takara1 {
        font-size: 1.4em;
        letter-spacing: 0.2em;
    }
    /* メインビジュアルのテキスト「有限会社宝建設」（class: main_sub-text_company-name）の文字間隔を設定 */
    .p-mainVisual__slideText .main_sub-text_company-name {
        letter-spacing: 0.2em;
    }
}

/* メインビジュアルのテキスト段落全体にフォントファミリーと行間を設定 */
.p-mainVisual__slideText p{
    font-family: '', sans-serif; /* フォントファミリーをLatoに設定 */
    line-height: 0.1; /* 行間を非常に狭く設定 */
}

/*
    トップページ上部縦書き用CSS
*/
/* トップページ上部の縦書きテキスト設定 */
.top-page_top_content .top-page_top_head {
    writing-mode: vertical-rl; /* 縦書き（右から左へ） */
    text-orientation: upright; /* 文字の向きを直立に保つ */
    white-space: nowrap;     /* テキストが自動で改行されないようにする */
    display: inline-block;   /* 縦書き要素をインラインブロックにする */
    margin: 0 10px;          /* 縦書き要素間の横方向の余白 */
    padding: 0;
    font-family: 'Noto Serif JP', serif; /* フォントファミリーをNoto Serif JPに設定 */
}

/* 縦書きにした際に、pタグのデフォルトマージンを削除 */
.top-page_top_content p {
    margin: 0;
    padding: 0;
}

/* トップページ上部の全体の配置調整 */
.top-page_top_content {
    display: flex; /* Flexboxを使って縦書き要素を横並びにする */
    justify-content: center; /* 横方向中央寄せ */
    align-items: flex-start; /* 垂直方向を上揃えにする */
    height: 100%; /* ウィジェットエリアの高さに合わせるなど */

    width: 100%; /* 親要素の幅いっぱいに広げる */
    max-width: 1200px; /* ウィジェットの最大幅を設定（適宜調整） */
    margin-left: auto; /* 左マージンを自動調整 */
    margin-right: auto; /* 右マージンを自動調整 */

    padding: 0;
}

/* 説明文のスタイル（必要に応じて調整） */
.top-page_top_description {
    writing-mode: vertical-rl; /* 縦書き（右から左へ） */
    text-orientation: upright; /* 文字の向きを直立に保つ */
    white-space: normal;     /* 新聞のように自動で改行（縦方向の折り返し）を許可 */
    line-height: 1.6; /* 読みやすい行間 */
    text-align: start; /* 縦書きの場合、行頭（上）揃え */
    margin-top: 10px;
    margin-right: 15px; /* 縦書きになった際の右側の余白（次の縦列との間隔） */
    /* 必要に応じて、widthやheightを調整して縦列の幅や高さを制御 */
    /* width: 2em; */ /* 例: 2文字分の幅に制限して折り返す */
    /* height: 100%; */ /* 親要素の高さに合わせる */
    align-self: flex-start; /* 親Flexコンテナ内で上揃えにする */
    font-family: 'Noto Serif JP', serif; /* フォントファミリーをNoto Serif JPに設定 */
}

/* PC（画面幅769px以上）向けのスタイル */
@media screen and (min-width: 769px) {
    #top-page_top_img_pc {
        width: 30vw; /* PCでの画像の固定幅 */
        height: auto; /* 高さは自動調整 */
        margin-right: 30px; /* 縦書きテキストとの間に右マージン */
    }
    #top-page_top_img_smp {
        display: none; /* PCでは画像の非表示 */
    }
    .top-page_top_content .top-page_top_head {
        font-size: 1.8vw; /* PCでの縦書きメインテキストのフォントサイズ */
    }
    .top-page_top_description {
        font-size: 0.8vw; /* PCでの縦書き説明文のフォントサイズ */
    }
}

/* モバイル（画面幅768px以下）向けのスタイル */
@media screen and (max-width: 768px) {
    #top-page_top_img_pc {
        display: none; /* モバイルでは画像の非表示 */
    }
    #top-page_top_img_smp {
        display: block; /* ブロック要素にして中央寄せを有効にする */
        width: 86vw; /* モバイルでの画像の固定幅 */
        height: auto; /* 高さは自動調整 */
        margin: 20px auto 0 auto; /* 上に20pxマージン、左右自動で中央寄せ、下は0 */
    }
    .top-page_top_content .top-page_top_head {
        font-size: 5.0vw; /* モバイルでの縦書きメインテキストのフォントサイズ */
    }
    .top-page_top_description {
        font-size: 3.2vw; /* モバイルでの縦書き説明文のフォントサイズ */
    }
}

/*
    トップページSNS用CSS
*/
.sns-columns {
    max-width: 400px;
    justify-content: center!important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 10px;
}


/*
    フォローボタン用CSS
*/
.follow-banner {
  position: fixed;
  top: 75%;
  right: 0;
  transform: translateY(-50%);
  z-index: 20;
}

.follow-banner a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: #fff;
  background-image: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  font-size: 16px;
  font-weight: 500;
  font-family: Lobster;
  letter-spacing: 0.1em;
  padding: 1.5em 1em;
  border-radius: 10px 0 0 10px;
  transition: opacity 0.25s;
  writing-mode: vertical-rl; !important
  text-orientation: upright;
}

.follow-banner a:hover {
  opacity: 0.7;
}

.follow-banner .swl-inline-icon::after {
  left: 50%;
  transform: translateX(-50%);
}

/* モバイル（画面幅768px以下）向けのスタイル */
@media screen and (max-width: 768px) {
.follow-banner a {
  padding: 1.5em 2.3em 1.5em 0.5em;
}
}

/*
    Popup Maker用CSS
*/
/* 擬似要素::beforeを使って上部にグラデーション要素を作成 */
#popmake-441::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 適用したい「パディング風」の高さ（例: 50px）を設定 */
    height: 50px; 
    
    /* インスタグラム風グラデーションを適用（角度135°、#F09433 -> #BC1888） */
    background: linear-gradient(135deg, #F09433 0%, #BC1888 100%) !important;
    z-index: 0; /* ポップアップコンテンツの上に表示 */
    
    /* 左上と右上の角を10px丸くし、下側の角はそのまま（0）にする */
    border-radius: 10px 10px 0 0 !important; 
}

/* 閉じるボタン (.pum-close) の z-index をグラデーション要素 (z-index: 10) よりも高く設定する */
.pum-close.popmake-close {
    z-index: 1 !important; 
}

/* クラス「popup_titile_instagram」に Flexbox を適用 */
.pop-titile-instagram {
    /* 1. Flexbox を有効にする */
    display: flex !important;
    
    /* 2. 縦方向（クロス軸）の中央に揃える */
    align-items: center !important;
    
    /* 3. 横方向の配置を維持 */
    justify-content: center !important; 
    
    /* 4. Flexアイテム間の隙間を10pxに設定 */
    gap: 10px !important; 
    
    /* Lobster フォントファミリーを設定 */
    font-family: 'Lobster', cursive !important;
}

/* ------------------------------------------- */
/* モバイルデバイス (画面幅 600px 以下) の設定 */
/* ------------------------------------------- */
@media (max-width: 600px) {
    /* ポップアップコンテナの幅をモバイルで 100% に上書き */
    #popmake-441 {
        width: 100% !important;
        /* モバイルで左右の余白（パディング）を少し設ける場合 */
        padding-left: 10px !important;
        padding-right: 10px !important;
        
        /* 画面端に寄せすぎないための max-width の調整（任意） */
        max-width: 90% !important; 
    }
}