/******************************/
/* 法人向けお問い合わせページ  */
/* 20206.03.03              */
/* n.takeda                */
/**************************/









@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

/* --- 1. ヘッダー黄色 --- */
html body #mainImg {
    background-color: #fffb00;
    padding: 3.5rem 0;
    text-align: center;
    margin-bottom: 0;
}


/* --- 2. 枠線とレイアウト（画像右側埋め尽くし） --- */
html body .outer .flow-step section.item-card {
    display: block; 
    background: #ffffff;
    border: 1px solid #dddddd;
    margin-bottom: 2rem;
    padding: 0;
    position: relative; 
    /* テキストが少なくても、ある程度の高さを確保して画像を見せる */
    min-height: 15rem; 
    overflow: hidden; 
}

/* 左側：テキストエリア */
html body .outer .flow-step section.item-card .txt-wrap {
    display: block;
    /* 右余白：画像の幅(340px) + 自由な隙間(40px) = 380px */
    padding: 2rem 23.75rem 2rem 2rem; 
    box-sizing: border-box;
}

/* 右側：画像（絶対配置） */
html body .outer .flow-step section.item-card .txt-wrap img.corp-item-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 340px;    /* 横幅を固定 */
    height: 100%;    /* 高さは親要素（カード）の高さに自動追従 */
    
    /* ★重要：これがあれば、どんな比率の画像が来ても歪まずに枠を埋め尽くします */
    object-fit: cover; 
    /* 画像の中心を基準にトリミングする設定（必要に応じて） */
    object-position: center; 
    
    border-left: 1px solid #eeeeee;
}


/* --- 3. リンクテキスト（右寄せ） --- */
html body .outer .flow-step section.item-card .txt-wrap a.link-text {
    display: flex; 
    justify-content: flex-end; 
    align-items: center;
    color: #333;
    text-decoration: underline;
    font-weight: bold;
    margin-top: 1.25rem;
    transition: all 0.3s;
}


html body .outer .flow-step section.item-card .txt-wrap a.link-text i.bi {
    margin-left: 0.5rem;
    font-size: 1rem;
}



/* --- 4. お問い合わせボタン（ヘッダー風：背景のみ透過） --- */
html body .outer.order .flow-step section.item-card .btn-orange,
html body .outer.order .flow-step section.item-card .btn-blue {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 610px; 
    height: 64px;
    padding: 0;
    text-align: center;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 0.5rem;
    margin-top: 4rem;
    margin-left: auto; 
    margin-right: 0;
    border: none !important;
    outline: none;
    box-shadow: none !important;

    /* 通常時の設定 */
    color: #ffffff !important;
    transition: opacity 0.3s; /* 背景の透け感だけを滑らかに */
}

/* ボタンの背景色 */
html body .outer.order .flow-step section.item-card .btn-orange { background-color: #f27b13; }
html body .outer.order .flow-step section.item-card .btn-blue { background-color: #0081b3; }

/* ホバー時：ボタン全体を少し透けさせる（背景が白なので白っぽくなる） */
html body .outer.order .flow-step section.item-card .btn-orange:hover,
html body .outer.order .flow-step section.item-card .btn-blue:hover {
    opacity: 0.8 !important; /* ここで「全体が少し白くなる」演出を再現 */
}

/* ★最重要：ボタンが透けても、中の文字とアイコンの「白」は透けさせない（1.0固定） */
html body .outer.order .flow-step section.item-card .btn-orange:hover *,
html body .outer.order .flow-step section.item-card .btn-blue:hover * {
    color: #ffffff !important;
    opacity: 1 !important; /* 文字自体の不透明度は100%を維持 */
    text-decoration: none !important;
}




/* --- 5. h3見出しの設定 --- */
html body .outer .flow-step section.item-card .txt-wrap h3 {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin: 1rem 0 0;
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    border: none;
    background: transparent;
}

/* アイコン自体の色と、右側（文字）との距離 */
html body .outer .flow-step section.item-card .txt-wrap h3 span.bi-square-fill {
    color: #f7392b;           /* ★ここでお好きな色に変更 */
    margin-right: 0.5rem;         /* ★ここでアイコンと文字の間の幅を調整 */
    
    /* 以下はアイコンを綺麗に並べるための基本設定 */
    font-size: 1rem;           /* アイコンの大きさ */
    display: inline-block;
    vertical-align: middle;     /* 文字との高さを合わせる */
}


/* --- 5.5 カード内の本文テキストの余白調整 --- */
html body .outer .flow-step section.item-card .txt-wrap p {
    /* 見出し(h3)との間隔を適切にする */
    margin-top: 0.5rem; 
    margin-bottom: 0;
    line-height: 1.6; /* 読みやすい行間に整える（お好みで） */
}


/* --- 6. スマホ対応（画像全幅 ＆ padding指定版） --- */
@media screen and (max-width: 768px) {

    /* 1. カード全体の余白を 16px 24px に指定 */
    html body .outer .flow-step section.item-card .txt-wrap {
        padding: 1rem 1.5rem; 
        display: flex;
        flex-direction: column;
        overflow: hidden; 
    }

    /* 2. 画像：左右16pxの余白を打ち消して端まで広げる */
    html body .outer .flow-step section.item-card .txt-wrap img.corp-item-img {
        position: relative;
        /* 左右16px×2 = 32px分を広げる */
        width: calc(100% + 2rem) !important; 
        max-width: none !important; 
        /* 上に24px、左右に16px飛び出させてピッタリ埋める */
        margin: -1.5rem -1rem 0 -1rem !important; 
        
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        order: -1; /* 一番上へ */
        border-radius: 0;
        border-bottom: 1px solid #eeeeee;
    }

    /* 3. 見出し：画像との間隔 */
    html body .outer .flow-step section.item-card .txt-wrap h3 {
        margin-top: 1.5rem !important; 
    }

    /* 4. お問い合わせボタン：文字突き抜けと余白の解消 */
    html body .outer.order .flow-step section.item-card .btn-orange,
    html body .outer.order .flow-step section.item-card .btn-blue {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 100%;
        
        /* ボタン自体の高さ（中身に余裕を持たせる） */
        height: 4rem; 
        
        /* ★ ボタンの中のアイコンと文字の間隔をあける */
        gap: 1rem; 
        
        box-sizing: border-box; 
        font-size: 1rem;
        letter-spacing: -0.5px;
        white-space: nowrap;
        padding: 1rem 1.5rem; /* 左右の最低限のクッション */
    }

    /* ボタン内のアイコン設定をリセット（gapで管理するため） */
    html body .outer.order .flow-step section.item-card .btn-orange span,
    html body .outer.order .flow-step section.item-card .btn-blue span {
        font-size: 1.2em;
        margin: 0 !important; /* 余計なマージンを消して中央に揃える */
        position: static;
    }
}


/* --- 7. 見出し(h2)の下に余白を作る --- */
html body .outer .flow-step h2 {
    margin-bottom: 48px; /* ★ここでお好みの広さに調整してください */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
    border: none;
    background: transparent;
}


/* --- Bootstrap風の表示切り替えを自作する --- */

/* d-block: 常に表示する（ブロック要素にする） */
.d-block {
    display: block !important;
}

/* d-lg-none: 画面が 992px 以上の時は消す */
@media (min-width: 992px) {
    .d-lg-none {
        display: none !important;
    }
}




/* --- 8. Bootstrap専用アイコン調整 --- */
html body .outer .flow-step section.item-card .txt-wrap a.link-text span.bi {
    font-size: 1.2rem;   /* ★アイコンを少し大きく（標準は1rem程度） */
    margin-left: 0.5rem;   /* ★テキストとの間の左余白 */
    display: inline-block;
    vertical-align: middle; /* テキストとの上下位置を揃える */
}

/*  お問い合わせボタン内のアイコン調整  */
/* 左側のアイコン（封筒・カメラ） */
html body .outer.order .flow-step section.item-card .btn-orange span.bi:first-child,
html body .outer.order .flow-step section.item-card .btn-blue span.bi:first-child {
    font-size: 2rem;     /* ★ボタン内のアイコンを強調 */
    margin-right: 1.5rem;  /* ★右側のテキストとの間隔 */
}

/* 右側のアイコン（矢印 > ） */
html body .outer.order .flow-step section.item-card .btn-orange span.bi:last-child,
html body .outer.order .flow-step section.item-card .btn-blue span.bi:last-child {
    font-size: 1.2rem;    /* 矢印は少し控えめに */
    margin-left: 1rem;   /* 左側のテキストとの間隔 */
}




/**************************************************************/

/* ビルボ */
#mainImg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    background-image: url(../img/contents/flow-bil-bg-l.png), url(../img/contents/flow-bil-bg-r.png);
    background-position: left bottom, right bottom;
    background-repeat: no-repeat;
}
#mainImg:before {
    content: "";
    position: absolute;
    height: 80%;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 0;
    right: 0;
}

#mainImg h1 {
    margin-bottom: 0;
}

@media screen and (min-width: 48em) {
    #mainImg {
        height: 200px;
        background-size: 45%;
    }
}







/**************************************************************/

/* 767px 未満 */
@media screen and (max-width: 767px) {
    /* ビルボ */
    #mainImg {
        height: 100px;
        background-size: auto 20%;
    }
    #mainImg:before {
        width: 100px;
    }
    .line #mainImg:before {
        background-position: right bottom;
    }
}


/* 幅 1072px 以上 */
@media screen and (min-width: 67em) {
    
    #mainImg:before {
        right: calc((100vw - 1000px) / 2);
    }
}


/* 幅 1264px 以上 */
@media screen and (min-width: 79em) {
    #mainImg {
        background-size: auto;
    }

}

/**************************************************************/

/* p(mb-5)下のマージンを行う */
.mb-5 {
    margin-bottom: 3rem !important; /* 十分な余白を確保 */
}

/* または、Twenty Seventeen のスタイルに合わせるなら */
.box.maker > p.txt-c:last-of-type {
    margin-bottom: 6.25rem; /* 最後の段落の下に余白を追加 */
}


/**************************************************************/

/* --- 共通設定（説明文・注記） --- */
.description h3 {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: center;
}

.note {
    font-size: 0.9rem;
    line-height: 1.8;
    text-align: center;
    margin-top: 3rem;
    display: block !important;
}

/* --- 外枠 --- */
.item-container {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 0;
    padding: 3rem 1.5rem;
    margin: 0 auto 1.5rem !important;
    width: 100%;
    max-width: 1000px !important; 
    box-sizing: border-box;
    display: block;
}

/* --- リスト（4列） --- */
.text-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr); 
    gap: 2.5rem 0.5rem;
    width: 100%;
}

/* --- 各品目（点の完全消去） --- */
.text-list li {
    font-size: 1rem;
    font-weight: normal !important;
    line-height: 1.3;
    text-align: center;
    display: block !important;
}

/* テーマ独自の点を強制的に消すための記述 */
.text-list li::before,
.text-list li::after {
    content: none !important;
    display: none !important;
}

/* --- スマホ向け --- */
@media screen and (max-width: 767px) {
    .item-container {
        padding: 2rem 1rem;
    }
    .text-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 0.5rem;
    }
    .text-list li {
        font-size: 0.9rem;
    }
}