/*即席BATONホームページ用CSS*/
body {
    font-family:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", sans-serif;
  color:#333333;
}
.baton_flame {
	width: 100%;
}
.baton_flame h1 {
	font-size: 30px;
}
.baton_flame h2 {
	font-size: 25px;
	margin-top: 3em;    /* 上に大きくスペースを空ける（数値はお好みで） */
	margin-bottom: 1.5em; /* 下の余白 */
}
.baton_flame h3 {
	font-size: 18px;
}
.top_logo {
    width: 100%;
    height: 100vh;          /* 画面の高さ100% */
    background: #fff;       /* ★ここを「白」にする（画面全体の背景色） */
    display: flex;          /* 中央配置のための設定 */
    justify-content: center; /* 左右中央 */
    align-items: center;    /* 上下中央 */
    margin: 0;              /* 余計なマージンをリセット */
    padding: 0;
}
/* ロゴ画像とその周りの黒枠 */
    .top_logo img {
        width: 250px;
        height: auto;
        background: #333333;
        padding: 30px;
        display: block;
  }
.main_block {
	max-width: 600px;
	margin: 0 auto;
}
.main_inner {
	
}
.main_block p {
	font-size: 16px;
	line-height: 1.7;
	text-align: justify;
	margin-bottom: 3em;
}
.main_block h2 {
    text-align: center;
}
.main_block img {
	width: 100%;
}
.keisen {
	
}
.flex_box {
	display: block;
	justify-content: space-between;
	flex-wrap: wrap;
    margin-bottom: 60px;

}
.flex_box_inner {
	width: 100%;
	margin: 15px 0;
}
.flex_box_inner img {
	width: 100%;
}
p.contact {
	text-align: center;
}
.footer {
	margin-top: 30px;
	padding: 20px 0;
}
.footer p {
	text-align: center;
	font-size: 11px;
}

@media screen and (max-width: 640px) {
	.baton_flame {
	width: 100%;
}
.baton_flame h1 {
	font-size: 30px;
}
.baton_flame h2 {
	font-size: 25px;
	margin-top: 2em;    /* スマホで見ても広すぎない程度に調整 */
	margin-bottom: 1.5em;
}
.baton_flame h3 {
	font-size: 18px;
}
    .top_logo {
        width: 100%;            /* 120pxから100%に変更 */
        height: 100vh;          /* autoから100vhに変更 */
        margin: 0;              /* 余計な余白を消す */
        background: #fff;       /* 全体の背景は白 */
        display: flex;          /* 中央寄せを復活 */
        justify-content: center;
        align-items: center;
    }
    .top_logo img {
        width: 200px;           /* ロゴ自体の大きさ */
        height: auto;
        background: #333333;    /* ロゴの周りだけグレー（6桁に修正） */
        padding: 25px;
        margin-bottom: 170px;
    }
.main_block {
	max-width: 90%;
	margin: 0 auto;
}
.main_inner {
	
}
.main_block p {
	font-size: 16px;
	line-height: 1.7;
	text-align: justify;
}
.main_block img {
	width: 100%;
}
.keisen {
	
}
.flex_box_inner img {
	width: 100%;
}
p.contact {
	text-align: center;
}
.footer {
	margin-top: 30px;
	padding: 20px 0;
}
.footer p {
	text-align: center;
	font-size: 11px;
}	
}
.main_block  .caption {
    font-size: 15px;
    color: #333333;
    margin-top: 5px;    /* 画像との隙間 */
    text-align: left; /* 文字を真ん中に寄せる */
    letter-spacing: 0.1em; /* 字間を少し広げる */
}
.main_block .caption .brand-name {
    font-size: 20px;
    font-weight: bold;
    display: block;      /* ブロック要素にすることで一行を専有させる */
    text-align: center;  /* テキストを中央寄せにする */
    width: 100%;        /* 親要素の幅いっぱいに広げる */
    margin-top: 10px;    /* 上の画像や文字との隙間 */
    margin-bottom: 10px; /* 下の文字（キャプションなど）との隙間 */
}