/*======================================

	林建設工業
	保有船舶CSS

=======================================*/

/*======================================
	保有船舶 共通
=======================================*/
#about_ship h3.title{
	font-size: 170%;
	font-weight: bold;
	background: #e6e6e6;
	padding: 5px 15px;
	border-top: solid 1px #231815;
	border-bottom: solid 1px #231815;
	margin-bottom: 50px;
}

.line_title{
	font-weight: bold;
}

.content_wrap{
	position: relative;
}
#info_wrap{
	max-width: 800px;
	width: calc(100% - 250px);
}


/*======================================
	ship_detail
=======================================*/
#ship_info .title{
	float: left;
	max-width: 255px;
	width: 31.7%;
	margin-right: 5%;
	text-align: left;
}
#ship_info .info{
	position: relative;
	float: right;
	max-width: 485px;
	width: 60.6%;
	background: url(../img/about_ship/bk_list.png);
	background-repeat: repeat-y;
	border-top: solid 1px #000;
}
#ship_info .title > span{
	font-weight: bold;
	margin-bottom: 10px;
	display: block;
}

#ship_info .info dt{
	font-weight: bold;
	position: absolute;
	left: 0;
	padding-top: 10px;
	padding-left: 20px;
}
#ship_info .info dd{
	padding-left: 90px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: solid 1px #000;
}

#ship_info .img{
	margin-top: 30px;
}

#ship_detail .info_list{
	margin-top: 50px;
	margin-bottom: 100px;
}
#ship_detail .info_list h4{
	font-size: 120%;
	color: #38a1db;
	border-bottom: solid 1px #000;
}

#ship_detail .info_list li{
	margin-bottom: 30px;
}
#ship_detail .info_list dl{
	position: relative;
	padding-top: 10px;
}
#ship_detail .info_list dt{
	position: absolute;
	left: 0;
	padding-top: 2px;
}
#ship_detail .info_list dd{
	padding-left: 7em;
	padding-top: 2px;
	padding-bottom: 2px;
}

/* --------------------------------------
   リスト内の位置合わせ用
--------------------------------------- */

/* 装備セクション用 */
.indent_block {
    margin-top: 5px;
}
.indent_row {
    display: flex;
    line-height: 1.6;
}
.indent_row .label {
    width: 7.5em; /* 「操船ウインチ」の幅を確保 */
    flex-shrink: 0;
}

.indent_row .label2 {
    width: 11.5em; /* 「操船ウインチ」の幅を確保（）無しの行 */
    flex-shrink: 0;
}

.indent_row .val {
    flex: 1;
}

/* その他セクション用（バケット） */
.bucket_table {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bucket_row {
    display: flex;
    align-items: flex-start;
}
.b_name {
    width: 14em;    /* バケット名の幅を固定 */
    flex-shrink: 0;
}

.b_name2 {
    width: 14.5em;    /* バケット名の幅を固定 右数字一桁の場合 */
    flex-shrink: 0;
}

.b_cap {
    width: 4em;     /* 「10m³」などの幅 */
    flex-shrink: 0;
}
.b_cap2 {
    width: 3.5em;     /* 「10m³」などの幅 左数字一桁の場合*/
    flex-shrink: 0;
}
.b_weight {
    width: 3em;     /* 「30t」などの幅 */
    flex-shrink: 0;
}
.b_note {
    font-size: 0.95em;
}


@media screen and (max-width: 900px) {
    /* 操船ウインチの部分を縦に積む設定 */
    .indent_row {
        display: flex;
        flex-direction: column; 
        margin-bottom: 6px;
    }

    /* ラベルの幅を解除して100%にする */
    .indent_row .label,
    .indent_row .label2 {
        width: 100% !important;
        font-weight: normal;
        margin-bottom: 2px;
    }

    /* 空のラベルだけを隠す */
    .indent_row .label:empty,
    .indent_row .label2:empty {
        display: none;
    }

    .indent_row .val {
        padding-left: 0;
        display: block;
        width: 100%; /* 幅を広げて確実に改行させる */
    }


    .indent_row.group_top {
        margin-top: 20px;
    }
}

@media screen and (max-width: 800px) {
    #info_wrap {
        width: 100%;
    }

}

/* 2. その他（バケット）セクションの調整 */
@media screen and (max-width: 600px) {
    /* 共通：詳細部分の回り込み解除 */
    #ship_info .title,
    #ship_info .info {
        float: none;
        max-width: 100%;
        width: 100%;
    }
    #ship_info .title { margin-bottom: 20px; }
    #ship_info .info { background: none; border-top: solid 1px #000; }
    #ship_info .info dt {
        position: relative;
        padding: 10px;
        background: #e6e6e6;
        width: 100%;
        box-sizing: border-box;
    }
    #ship_info .info dd { padding: 10px; }

    /* バケット部分の調整 */
    .bucket_row {
        display: block; /* 「名前」と「スペック」で2段にする */
        border-bottom: 1px dotted #ccc; /* 区切り線 */
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    .b_name, .b_name2 {
        display: block;
        width: 100% !important;
        font-weight: normal; /* 太字にしない */
        margin-bottom: 5px;
    }

    /* スペック（10m³、30t）は横並びにする */
    .b_cap, .b_cap2, .b_weight {
        display: inline-block;
        width: auto !important;
        margin-right: 15px;
        font-weight: normal; /* 太字にしない */
    }

    .b_note {
        display: inline-block; /* 備考も横並び、あるいは次の行へ */
        font-size: 0.95em;
    }
}

/* さらに小さい画面（400px以下）の微調整 */
@media screen and (max-width: 400px) {
    #ship_detail .info_list dt {
        position: relative;
        left: 0;
        font-weight: bold;
        display: block;
        width: 100%;
        background: #f0f0f0;
        padding: 5px;
        margin-bottom: 5px;
    }
    #ship_detail .info_list dd {
        padding-left: 0;
        padding-bottom: 15px;
        margin-bottom: 10px;
    }
}