body {
margin: 0;
padding: 0;
font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
background: #ffffff;
}


/* コンテナ（最大幅1280px） */
.container {
max-width: 1280px;
margin: 0 auto;
scroll-behavior: smooth;
}


/* コンテンツ間 */
.spacer {
max-width: 1000px;
height: 30px;
}


.content {
margin: 0px auto 40px auto;
background: rgba(255, 255, 255, 0.7);
padding: 0px 40px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


.jirei-content {
margin-top: 1px;
box-shadow: none;
}


.jirei-box {
margin: 0 auto;
width: var(--yt-box-width, 100%);
padding: 15px;
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
}


.jirei-title {
margin-bottom: -2%;
line-height: 1.2;
font-size: 34px;
color: #777;
box-shadow: none;
}


.jirei-syamei {
font-size: 22px;
color: #222;
box-shadow: none;
}


.jirei-lead {
margin-top: 2%;
white-space: pre-line;
font-size: 20px;
color: #333;
box-shadow: none;
}


/* --- PC表示のベースレイアウト --- */
/* 左側（写真とメッセージ）の幅を写真の幅（約47%）に合わせる */
.jirei-main-layout {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
margin: 2% 0;
}


/* 左側：写真とテキストの塊 */
.jirei-content-group {
width: 47%; /* PCでの写真の幅に合わせる */
flex-shrink: 0;
}


.jirei-photo1 {
width: 100%;
height: auto;
}


.jirei-photo1 img{
width: 100%; /* 親要素(47%)に対して100% */
height: auto;
display: block
}


.jirei-syacho {
width: 100%;
margin-top: 15px;
font-size: 20px;
font-weight: 600;
line-height: 1.4;
}


.jirei-syachomei {
width: 100%;
margin: 10px 0 5% 0;
font-size: 17px; 
}


/* 左上見出し（yt-headingを継承） */
.jirei-heading {
display: flex;
align-items: center;
position: absolute;
font-size: 23px; /* ← 動画サムネとバランスを取る文字サイズ */
top: 10px;
left: 1px; /* ← 左上配置 */
font-weight: 500;
}


.jirei-heading .bar {
width: 6px;
height: 1.2em;
background-color: orange;
margin-right: 6px;
border-radius: 2px;
}


.jirei-heading .title {
color: #333;
}


.jirei-honbun {
margin-top: 2%;
white-space: pre-line;
line-height: 1.7;
font-size: 17px;
color: #444;
box-shadow: none;
}


.jirei-honbun img {
width: 90%;
height: auto;
}


/* -------会社概要------- */
/* 右側（会社情報）の幅 */
.company-info-container {
width: 48%; /* 右側の幅 */
margin: -3% 0 0 13%;
}

/* ヘッダー部分 */
.company-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.logo-placeholder {
padding: 0;
margin-top: 11%;    
margin-right: -3%;
text-align: left;
min-width: 10%;
}

.logo-placeholder img {
width: 70%;
height: auto;
}

.group-name {
font-size: 24px;
font-weight: normal;
margin-top: 15%; 
}

/* テーブル形式のレイアウト */
.info-table {
display: flex;
flex-direction: column;
}

.info-row {
display: flex;
margin-bottom: 20px;
}

.info-label {
width: 100px;
font-size: 18px;
font-weight: bold;
flex-shrink: 0;
}

.info-value {
font-size: 18px;
flex-grow: 1;
}

.info-value a {
color: #00a0e9;
text-decoration: none;
}

.info-value a:hover {
text-decoration: underline;
}


.merit-container {
margin-top: 1%;    
display: flex;
gap: 20px;
align-items: flex-start;
}


/* 左右のボックス比率設定 */
.text-box {
flex: 0 0 65%;   /* 60% 固定 */
}


/* ボックスの基本 */
.box {
flex: 1;
}


/* 右画像ボックス：画像を右寄せ */
.image-box {
flex: 0 0 35%;   /* 40% 固定 */
display: flex;
justify-content: flex-end; /* ← 右寄せ */
}


.image-box img {
width: auto;       /* 必要に応じて調整 */
max-width: 100%;   /* はみ出さないように */
height: auto;
display: block;
}


/* クローズボタン */
.b-center {
text-align: center;
}

.close-btn {
display: inline-block;   /* これが重要！横幅が伸びるのを防ぐ */
padding: 7px 11px;
margin-bottom: 5%;
background-color: #6495ed;
color: white;
border-radius: 3px;
cursor: pointer;
border: none;
font-size: 18px;
width: fit-content;      /* 必要以上に横に広がらない */
text-align: center;
}

.close-btn:hover {
background-color: #0a66c2;
}


/* フッター（横幅いっぱいの青い帯・白文字） */
footer.site-footer {
background: #0a66c2;
color: #fff;
margin: 0;
text-align: center;
padding: 14px 12px;
font-size: 14px;
width: 100%;           /* 横幅いっぱい */
box-sizing: border-box;
}


/******************* スマホ対応（800px以下）*******************/
@media (max-width: 800px) {
.pc-only-br {
display: none;
}    
    
.spacer {
height: 20px;
}
    
.jirei-main-layout {
display: block; /* Flexを解除して単純な縦並びにする */
}

.jirei-content-group {
width: 100%; /* 横幅いっぱい */
display: block;
}
     
.company-info-container {
width: 100%; /* 横幅いっぱい */
display: block;
margin: 3% 0 10%;
}
        
.jirei-box {
margin-bottom: 15%;
}
    
.jirei-heading {
font-size: 20px; /* ← 動画サムネとバランスを取る文字サイズ */
font-weight: 600;
}    

.jirei-title {
line-height: 1.2;
font-size: 30px;
}
    
    
.jirei-syamei {
font-size: 20px;
margin-top: 3%;
}


.jirei-photo1 img{
width: 100%; /* 画面幅に合わせてリサイズ */
height: auto; /* 縦横比維持 */
margin-top: 5%;
}
    
    
.jirei-photo1 { 
width: 100%; 
margin-bottom: 20px;
}
    
.jirei-syacho {
font-size: 20px;
margin-top: 15px
}    
        
.jirei-syachomei {
margin-bottom: 30px; /* 会社情報との間に余白 */
}

    
.jirei-honbun {
margin-top: 3%;
text-wrap: wrap;
}   
  
 
/* 会社情報の見た目微調整 */
.company-header {
flex-direction: row; /* ロゴと社名は横並びを維持 */
margin-bottom: 3%;
align-items: center;
}
    
.logo-placeholder {
width: 30%;
margin-top: 0;
margin-right: -7%;
}    
        
.group-name {
margin-top: 15px;
font-size: 18px;
font-weight: 600;
}

    
.info-row {
flex-direction: column; /* 縦並びに変更 */
}

    
.info-label {
width: 100%;
margin-bottom: 5px;
}

    
.info-value {
font-size: 16px;
padding-left: 0;
}    
    
    
.merit-container {
gap: 0px;
flex-direction: column; /* 下から上へ縦並び */
margin-top: -12%;
}

    
.box {
width: 100%;
}
    
    
.image-box img {
width: 100%;
}
    
    
.jirei-honbun img {
width: 100%;
height: auto;
}    
}