/* @override https://bros1992.jp/cms/wp-content/themes/CBFBROS-PC/style.css */

@charset "utf-8";
/*
Theme Name: スマホ@CBFBROS
Description: ブロスのスマホ用テンプレート（レスポンシブ統合版）
Version: 1.0.2
Author: CrushPOW
Author URI: http://crushpow.com/
*/

*{margin:0;padding:0;}

body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	background-color: #eaeaea;
}

a{text-decoration:none;
	color: #000;
}
a:hover{
	color: #919191;
}
a:active, a:focus {outline: 0;}
img{border:0;}
.clear{clear:both;}
a:hover img {
	opacity: 0.5;
}
.oswald {
	font-family: Oswald;
}

/*共通*/
#wrapper{
	max-width: 2500px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 0;
	overflow: hidden;
	height: 100%;
}
.wrapper-con {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
}
.wrapper-con p {
	margin-bottom: 0.75em;
}
.right {
	float: right;
}
.left {
	float: left;
}
.both {
	clear: both;
}
.block {
	display: block;
}
.center-text {
	text-align: center!important;
}
.facebook-space {
	border: 1px solid #1abc9c;
	margin-bottom: 20px;
}
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fb_iframe_widget span{
	width: 100% !important;
}
#date {
	overflow: hidden;
	border-bottom-style: dotted;
	border-bottom-width: 1px;
}
.ssba {
	overflow: hidden;
}
.archive-top-space {
	margin-top: 24px;
}

/*ヘッダー*/
header {
	color: #ffffff;
	position: fixed;
	right: 0;
	left: 0;
	z-index: 10;
	background-color: rgba(0,90,60,0.95);
	top: 0;
	box-shadow: 0 3px 6px 3px rgba(0,0,0,0.4);
	border-bottom: 2px solid #fff;
}
.header-wrap {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
}
.top-h1 {
	margin: 0;
	padding: 0;
	float: left;
}
.top-h1 img {
	vertical-align: bottom;
	margin-top: 4px;
	margin-bottom: 4px;
}
.bread-list {
	width: 96%;
	margin: 5px auto;
	font-size: 14px;
}
.bread-list a {
	text-decoration: underline;
}
.top-em {
	font-weight: normal;
	font-style: normal;
	font-size: 75%;
	float: left;
	line-height: 50px;
	margin-left: 20px;
}
.grandmenu {
	float: right;
}
.grandmenu ul {
	padding: 0;
	margin: 0 -1em 0 0;
	overflow: hidden;
}
.grandmenu li {
	margin-right: 1em;
	border-right: 1px solid #3c6503;
	padding-right: 1em;
	float: left;
	list-style-type: none;
	line-height: 48px;
}
.grandmenu li a {
	color: #fff;
}
.grandmenu li a:hover {
	color: #fcc500;
}
li.current-menu-item a,.current-page-ancestor a {
	color: #ffb300 !important;
	font-weight: bold;
}
.page-h1 {
	color: #fafef0;
	height: 50px;
	line-height: 56px;
	text-shadow: 0.1em 0.1em 3px #000;
	background-color: #212121;
	padding-left: 20px;
	margin-top: 50px;
	font-size: 1.45em;
}

/*トップページ*/
.top-cat-link {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
}
.top-cat-link ul {
	display: flex;
	justify-content: center!important;
}
.top-cat-link ul li {
	list-style-type: none;
	text-align: center;
	position: relative;
	display: block;
	width: 16em;
}
.top-cat-link ul li::after {
	content: "▶";
	margin-left: .5em;
	position: absolute;
	right: 0;
	top: .5em;
	color: #fff;
}
.top-cat-link ul li:nth-child(2) {
	margin-right: 2em;
	margin-left: 2em;
}
.top-cat-link ul li a {
	width: 16em!important;
	display: inline-block;
	padding: .5em;
	background-color: rgba(0,90,60,0.95);
	color: #fff;
	border-radius: 10px;
	box-shadow: 0px 2px 3px rgba(0,0,0,.4);
	border: 1px solid #fff;
}

#fullwidth {
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sec-title-wide {
	width: 55%;
}
.sec-title-narrow {
	width: 45%;
	height: 100%;
	position: relative;
}

.item_bnr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.item_bnr div {
	width: 25%;
}
.item_bnr div img {
	width: 100%;
}

.link-btn ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.link-btn li {
	list-style-type: none;
	width: 48%;
}

.top-section {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}
.top-section h2 {
	background: url(images/separator.svg) no-repeat center 0;
	padding-top: 72px;
	margin: 100px auto 10px;
	font-size: 2em;
	text-align: center;
}

.expart {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.expart-block {
	list-style-type: none;
	background-color: #000;
	width: calc(25% - 1px);
	display: inline-block;
}

.top-3 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* PC版の設定（769px以上） */
@media screen and (min-width: 769px) {
    .top-3 li {
        list-style-type: none;
        width: calc(20% - 10px);
        border: 1px solid #cacaca;
        background-color: #fff;
        box-shadow: 0px 2px 3px rgba(0,0,0,.4);
        padding-bottom: 1em;
    }
}

/* スマホ版の設定（768px以下）を追記 */
@media screen and (max-width: 768px) {
    .top-3 li {
        width: calc(50% - 10px) !important; /* ここで2列に強制変更 */
        margin-bottom: 10px;
    }
}
/* ================================================== 
   📱 スマホ表示：画像の歪み・文字サイズ 最終修正
================================================== */
@media screen and (max-width: 768px) {
   /* 1. 画像が細長く伸びるのを防ぐ（NEW画像は除外） */
    img:not([src*="new"]), 
    .brand-img img, 
    .fac-img img, 
    .service-img-wrap img, 
    .item-flow-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important; /* containよりcoverの方が隙間なく綺麗です */
    }

 /* --- NEW画像の歪みを完全に消し去る --- */
    img[src*="new"], 
    .vk_post_badge img, 
    .new-label img {
        width: 40px !important;    /* 横幅を固定 */
        height: 40px !important;   /* 【重要】高さを横幅と同じにして正方形（比率維持）を強制 */
        object-fit: contain !important; /* 画像が欠けないように枠内に収める */
        display: block !important;
        float: right !important;   /* 右端に寄せる */
        position: relative !important;
        top: 5px;
        right: 5px;
        z-index: 20 !important;
        min-width: 40px !important; /* これ以上小さくさせない */
        min-height: 40px !important; /* これ以上細長くさせない */
    }

    /* バッジの外枠設定 */
    .vk_post_badge, .new-label {
        width: 100% !important;    /* 枠自体は横いっぱいに広げておく（floatを機能させるため） */
        height: 0 !important;      /* 枠が縦に場所を取らないようにする */
        position: relative !important;
        display: block !important;
        background: none !important;
        border: none !important;
    }

    /* 2. PC用の固定された「高さ」を解除して中身に合わせる */
    .brand-img, .fac-img, .service-img-wrap, .item-flow-image, 
    .hero-section, .all-menu-wrap, #fullwidth, .main-image {
        height: auto !important;
        min-height: 0 !important;
    }

    /* 3. 文字が小さすぎ・大きすぎ・醜いのを修正 */
    body {
        font-size: 15px !important; /* 標準的な読みやすいサイズ */
        line-height: 1.6 !important;
    }
    h2, h3, .ja, .about-txt h3 {
        font-size: 1.3rem !important; /* 見出しをスマホサイズに */
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }
    p, .about-txt p, .brand-txt p {
        font-size: 14px !important;
        line-height: 1.8 !important;
        text-align: left !important; /* 読みやすく左寄せ */
    }

    /* 4. 重なっているロゴや文字を完全に独立させる */
    .top-main-rogo, .all-menu-center, .hero-content {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        padding: 20px 0 !important;
        width: 100% !important;
        opacity: 1 !important; /* 消えている場合があるので表示 */
    }

    /* 5. 余白がなくてギュウギュウなのを直す */
    .wrapper-con, .cbf-inner, .section-in {
        width: 92% !important;
        padding: 0 4% !important;
    }
}
    /* --- カードが横揺れしたりはみ出したりするのを防ぐ --- */
    #bros-home-wrap .cbf-force-5col .vk_post_imgOuter,
    #bros-home-wrap .cbf-force-5col .card-img-top,
    #bros-home-wrap .cbf-force-5col .vk_post_body {
        width: 100% !important;
    }

    /* --- 写真の比率を整える --- */
    #bros-home-wrap .cbf-force-5col img {
        width: 100% !important;
        height: 120px !important; /* スマホでちょうど良い高さに固定 */
        object-fit: cover !important;
    }

    /* --- ヘッダー・メニュー（現在の設定を維持） --- */
    header { position: fixed !important; top: 0; left: 0; width: 100%; height: 50px; background: rgba(0, 70, 45, 0.98) !important; z-index: 9999; display: flex; align-items: center; justify-content: center; }
    .top-h1 img { max-width: 110px !important; height: auto !important; }
    .grandmenu { display: block !important; position: fixed !important; bottom: 0; left: 0; width: 100%; height: 50px; z-index: 10001; background: #002b1c !important; overflow-x: auto; border-top: 1px solid #c5a059; }
    .grandmenu ul { display: flex !important; width: max-content !important; padding: 0 20px !important; }
    .grandmenu li a { line-height: 48px !important; color: #fff !important; font-size: 12px; white-space: nowrap; padding: 0 15px; display: block; }
    
    /* 余白 */
    body { padding-top: 50px !important; padding-bottom: 55px !important; }
}