/*** for PC Browser ***/
@media (min-width:401px)
{
/* 本体フレーム（変更なし） */
div.infobox
{
width: 99%;
max-width: 100%; /* PC表示用最大幅指定 */
box-sizing: border-box;
border: 1px solid #3E77FF;
border-radius: 5px;
padding: 10px;
margin: 10px auto 10px;
background: #D7EFFF;
box-shadow: 2px 4px 8px;
}

/* --- --- --- */

/* タイトル部（変更なし） */
div.infobox h2.infotitle
{
color: #000000 !important;
font-size: 180%;
font-weight: bold;
text-align: center;
margin-bottom: 5px;
}

div.infobox h2.infotitle a
{
color: #000000 !important;
}

div.infobox h2.infotitle a:hover
{
opacity: 0.7;
}

/* --- --- --- */

/* 内部フレーム ★ Flexboxに変更 */
div.infobox div.contentbox
{
box-sizing: border-box;
border: 1px solid #FFFFFF;
border-radius: 5px;
padding: 5px;
margin: 0;
background: #FFFFFF;
text-align: center;

/* ★ 3列表示のための重要修正: Flexboxを導入 */
display: flex; /* Flexコンテナにする */
flex-wrap: wrap; /* 要素を折り返すことを許可する */
justify-content: flex-start; /* 左寄せで配置する */
}

/* --- --- --- */

/* ボタン（Flexアイテムに変更） */
div.infobox div.contentbox a.infobtn
{
/* ★ 3列表示のための幅を確実に設定 */
width: calc(100% / 3 - 10px); /* 全体の1/3からマージンの分を引く */
margin: 5px 5px; /* 上下左右にマージンを設定 */

/* 元のスタイル */
min-height: 40px;
box-sizing: border-box;
padding: 10px;
background: #AFD7FF;
border: 1px solid #3E77FF;
border-radius: 0;
font-weight: normal;
text-decoration: none;
font-size: 100%; /* 1つ目の質問の修正を反映 */
color: #000000 !important;
box-shadow: none;
vertical-align: middle;
text-align: center;

/* Flexbox環境での垂直方向の中央揃え */
display: flex;
align-items: center; /* 垂直方向の中央揃え */
justify-content: center; /* 水平方向の中央揃え（text-align: center; があるので必須ではないが追加） */
}

/* --- --- --- */

/* ボタン（オンマウス）（変更なし） */
div.infobox div.contentbox a.infobtn:hover
{
opacity: 0.8;
box-shadow: none;
}
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
/* 本体フレーム（変更なし） */
div.infobox
{
width: 99%;
max-width: 100%; /* PC表示用最大幅指定 */
box-sizing: border-box;
border: 1px solid #3E77FF;
border-radius: 5px;
padding: 10px;
margin: 10px auto 10px;
background: #D7EFFF;
box-shadow: 2px 4px 8px;
}

/* --- --- --- */

/* タイトル部（変更なし） */
div.infobox h2.infotitle
{
color: #000000 !important;
font-size: 180%;
font-weight: bold;
text-align: center;
margin-bottom: 5px;
}

div.infobox h2.infotitle a
{
color: #000000 !important;
}

div.infobox h2.infotitle a:hover
{
opacity: 0.7;
}

/* --- --- --- */

/* 内部フレーム ★ Flexboxに変更 */
div.infobox div.contentbox
{
box-sizing: border-box;
border: 1px solid #FFFFFF;
border-radius: 5px;
padding: 5px;
margin: 0;
background: #FFFFFF;
text-align: center;

/* ★ 3列表示のための重要修正: Flexboxを導入 */
display: flex; /* Flexコンテナにする */
flex-wrap: wrap; /* 要素を折り返すことを許可する */
justify-content: flex-start; /* 左寄せで配置する */
}

/* --- --- --- */

/* ボタン（Flexアイテムに変更） */
div.infobox div.contentbox a.infobtn
{
/* ★ 3列表示のための幅を確実に設定 */
width: calc(100% / 3 - 10px); /* 全体の1/3からマージンの分を引く */
margin: 5px 5px; /* 上下左右にマージンを設定 */

/* 元のスタイル */
min-height: 40px;
box-sizing: border-box;
padding: 10px;
background: #AFD7FF;
border: 1px solid #3E77FF;
border-radius: 0;
font-weight: normal;
text-decoration: none;
font-size: 100%; /* 1つ目の質問の修正を反映 */
color: #000000 !important;
box-shadow: none;
vertical-align: middle;
text-align: center;

/* Flexbox環境での垂直方向の中央揃え */
display: flex;
align-items: center; /* 垂直方向の中央揃え */
justify-content: center; /* 水平方向の中央揃え（text-align: center; があるので必須ではないが追加） */
}

/* --- --- --- */

/* ボタン（オンマウス）（変更なし） */
div.infobox div.contentbox a.infobtn:hover
{
opacity: 0.8;
box-shadow: none;
}
}