@charset "UTF-8";

/************************************************** reset */

*{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}

html{ 
	font-size: 62.5%;
}
body{
	font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	/*  */
	font-size: 10px; /* IE8対応 */
	font-size: 1.0rem;  
	line-height: 1.7rem;
	/* スマホの縦横回転時用 */
	-webkit-text-size-adjust: 100%;
}


/************************************************** main */

html,body{
	margin: 0;
	padding: 0;
}

#checkform{
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 690px;
	border-radius: 10px; 
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	/* ▼設定 */
	background: #fdf9f6;
	border: 1px #ff3334 solid; /* 赤 */
}

/* タイトル */
#header .a{
	padding: 20px 5px;
	color: #fff;
	font-size: 3.5rem;
	text-align: center;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
	/* ▼設定 */
	background: #b4965f; /* 赤 */
}
/* ご案内 */
#header .b{
	padding: 10px;
	line-height: 1.9rem;
	font-size: 1.4rem;
}
#header .b span{
	color: #b4965f;
}

/* メイン */
#main table{
	margin: 0 auto;
}
/* td：左 */
#main table td.a{
	font-size: 1.2rem;
}
	/* 下段（セレクト部分） */
	#main table td.a .b{
		padding: 10px 0 0 10px;
	}
	#main table td.a select{
		margin-bottom: 10px;
		width: 180px;
	}
	/* 確認用型番 */
	#check-item-id{
		color: #f5f5f5;
	}
/* td：中 */
#main table td.b{
	padding: 0 20px;
	text-align: center;
	vertical-align: middle;
}
	/* 三角アイコン */
	#sankaku{
		height: 100px;
		width: 80px;
		background: url(./img/anser_1_1.png) no-repeat;
	}
/* td：右 */
#main table td.c{
}
	/* 検索結果アイコン */
	#result{
		min-width: 320px;
		font-size: 1.2rem;
		text-align: center;
	}
	/* 検索結果説明 */
	#result p{
		margin: 0 auto;
		width: 250px;
		text-align: left;
	}
.d{
    padding: 0px 10px;
    margin: 0px 0px 10px;
    line-height: 1.9rem;
    font-size: 1.1rem; /* !important を外します */
    color: #ff3334;
}



/************************************************** スマホ対応 */

@media screen and (max-width:620px){
	/* タイトル */
	#header .a{
		padding: 10px 5px;
		font-size: 1.9rem;
	}
	/* ご案内 */
	#header .b{
		padding: 5px 10px;
		line-height: 1.7rem;
		font-size: 1.2rem;
	}
	/* メイン（td解除） */
	#main table td{
		display: block;
	}
	/* td：左 */
	#main table td.a{
		margin: 0 auto;
		width: 270px;
	}
		#main table td.a select{
			width: 250px!important;
			font-size: 1.5rem;
		}
	/* td：中 */
	#main table td.b{
		padding: 0 0 10px 0;
		width: 100%;
		text-align: center;
	}
		/* 三角アイコン */
		#sankaku{
			display: none;
			height: 30px;
			width: 50px;
			background: url(./img/anser_1_2.png) no-repeat;
            background-size: 50px 30px;
		}
	/* td：右 */
	#main table td.c{
		min-height: 120px;
	}
		/* 検索結果 */
		#result{
			width: 100%;
			min-width: 300px;
		}
}

/* ==============================================
   追加：PC用レイアウト（横3カラム - available2.html対応）
   ============================================== */
#main_responsive {
    display: flex; /* Flexboxを使用してカラムを作成 */
    max-width: 700px; /* PCでの最大幅を仮に700pxに設定 */
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}
#main_responsive .column {
    padding: 0 5px; /* カラム間の余白 */
    box-sizing: border-box;
}

/* フォームエリア (td.a相当) */
#form_area_a {
    flex-basis: 40%; /* フォームに幅を多めに割り当て */
}
#form_area_a .select_group {
    margin-bottom: 10px;
}
#form_area_a select {
    width: 100%; /* セレクトボックスを親divに合わせる */
    box-sizing: border-box;
}
/* アイコンエリア (td.b相当) */
#form_area_b {
    flex-basis: 10%; 
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 結果エリア (td.c相当) */
#form_area_c {
    flex-basis: 50%;
}


/* ==============================================
   追加：レスポンシブ対応（スマートフォン向け）
   ============================================== */
@media screen and (max-width: 767px) {
    /* メインエリアを縦一列にする */
    #main_responsive {
        flex-direction: column; 
        width: 100%;
        padding: 0;
    }

    #main_responsive .column {
        width: 100%;
        padding: 10px;
        /* 境界線を復活させたい場合はコメントアウトを外す */
        /* border-bottom: 1px dashed #ccc; */
        box-sizing: border-box;
    }
    
    /* フォームエリアの修正 */
    #form_area_a {
        order: 1; /* 最初に表示 */
    }
    /* プルダウンのグループを縦に並べる */
    #form_area_a .select_group {
        width: 100%;
        margin-bottom: 15px; /* 各プルダウン間にスペースを追加 */
    }
    
    /* アイコンエリア (アイコンと結果の間に移動) */
    #form_area_b {
        order: 2; /* 2番目に表示 */
        height: 50px; /* 縦幅を縮小 */
    }
    /* アイコンを画面全体で縮小する */
    #sankaku {
        background-size: contain;
        background-position: center;
        height: 100%;
        width: 100%;
    }

    /* 結果エリアを最後に表示 */
    #form_area_c {
        order: 3; /* 3番目に表示 */
    }

    
    /* 結果表示エリアの画像（Xや〇）のサイズを小さくする */
    #result img {
        width: 80px; /* 画像の最大幅を小さくする */
        height: auto;
        margin: 5px auto 5px; /* 上下の余白を詰める */
        display: block;
    }

    /* 結果メッセージ（pタグ）のフォントサイズと行間を調整 */
    #result p {
        font-size: 0.95rem; /* フォントサイズをわずかに小さくする */
        line-height: 1.4; /* 行間を狭くする */
        padding: 0 10px;
        margin-top: 5px;
    }

    /* 下部の注意書き（.dクラス）のフォントサイズも小さくしてスペースを詰める */
    .d {
        font-size: 0.9rem; /* 0.9remに縮小し、文字切れを解消 */
        line-height: 1.5rem; /* 行間を詰める */
        margin: 0 0 5px; /* 上下の余白を減らす */
        padding: 0 10px;
    }
    
    /* フォームと結果エリアの縦積み時の間隔を詰める */
    #main_responsive .column {
        margin-bottom: 5px; /* 縦積み時の要素間の下余白を減らす */
        padding-bottom: 5px;
    }
}