@charset "UTF-8";

/*/////////////////////////////////////////////////////////////////////

	top css

----------------------------------------------------------------

	- main image
	- attention box
	- main column
	- side column

/////////////////////////////////////////////////////////////////////*/

/*--------------------------------------------------------------
	main image
--------------------------------------------------------------*/
#imgMain { margin-bottom: 20px; }

/*--------------------------------------------------------------
    attention box
--------------------------------------------------------------*/
#boxAttention {
    border: 2px solid #cc0000; /* 赤い線で囲む */
    padding: 15px; /* 枠線からの余白を設定 */
    margin-bottom: 20px; /* 赤い枠の下に20pxの間隔をあける */
}

#boxAttention h2 {
    margin-bottom: 5px; /* h2の下の余白を設定 */
    padding-top: 0px; /* h2の上の余白を設定 */
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; /* h2のフォントを設定 */
    font-size: 24px; /* h2の文字サイズを24pxに設定 */
    color: #cc0000; /* h2の文字色を設定 */
    text-align: center; /* h2のテキストを中央揃えにする */
}

#boxAttention p {
    font-size: 16px; /* テキストの文字サイズを16pxに設定 */
    text-align: left; /* テキストを左揃えにする */
}

/*--------------------------------------------------------------
    Responsive design for mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    /* boxAttention */
    #boxAttention h2 {
        font-size: 18px; /* スマホ用にh2の文字サイズを調整 */
    }

    #boxAttention p {
        font-size: 14px; /* スマホ用にテキストの文字サイズを調整 */
    }

    /* boxFssc */
    #boxFssc {
        -webkit-text-size-adjust: 100%; /* iPhone Safariの勝手な文字拡大を防止 */
    }

    #boxFssc article .boxText {
        margin: 5px;        /* 外側の余白を小さめに保持 */
        line-height: 1.5;   /* 行間を少し詰めて読みやすく（パソコンは1.8） */
    }

    #boxFssc article .boxText p {
        font-size: 14px;    /* スマホ本文は14pxで固定 */
        margin-bottom: 8px; /* 段落下の余白もスマホ用に調整 */
    }
}


/*--------------------------------------------------------------
    Responsive design for tablet devices
--------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #boxAttention h2 {
        font-size: 22px; /* タブレット用にh2の文字サイズを調整 */
    }

    #boxAttention p {
        font-size: 15px; /* タブレット用にテキストの文字サイズを調整 */
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    #boxFssc article .boxText p {
        font-size: 13px; /* PCと同等で安定 */
    }
}

/*--------------------------------------------------------------
	main column
--------------------------------------------------------------*/
#colMain { width: 540px; float: left; }
.boxTopMain { margin-bottom: 20px; padding: 15px; box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.1); }
.ie9 .boxTopMain { box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.1); }
.ie6 .boxTopMain,
.ie7 .boxTopMain,
.ie8 .boxTopMain { border: 1px solid #ccc; }
.boxTopMain .ttlTopMain { margin-bottom: 15px; }
.boxTopMain .link { padding-top: 7px; font-size: 12px; text-align: right; }
.boxTopMain .link a { padding-left: 11px; background: url(../img/common/icn_arrow_s.gif) no-repeat left center; }

/* fssc box 
--------------------------------------------------------------*/ 
/* このセクション（#boxFssc）だけ、下の余白を詰める */
#boxFssc.boxTopMain {
    padding: 12px;
    background-color: #F6F6F9;
}

#boxFssc article .boxText {
    margin: 0;
    line-height: 1.8;
}

#boxFssc .highlight {
    color: #434D80;
    font-weight: 600;
}

/* info box
--------------------------------------------------------------*/
#boxTopInfo article { margin-bottom: 5px; clear: left; font-size: 13px; }
#boxTopInfo article time { float: left; }
#boxTopInfo article h1 { margin-left: 85px; }

/* topics box
--------------------------------------------------------------*/
#boxTopics article { padding: 10px 0; border-top: 1px solid #ccc; } 
#boxTopics .ttlTopMain+article { border-top: none; } 
#boxTopics article .photo { float: left; } 
#boxTopics article .boxText { width: 290px; float: right; } 
#boxTopics article .boxText .cat { margin: 5px 0; font-size: 12px; color: #cc3399; }
#boxTopics article .boxText h1 { margin-bottom: 5px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; font-size: 18px; }
#boxTopics article .boxText h1 a { font-weight: bold }

/*--------------------------------------------------------------
	side column
--------------------------------------------------------------*/
#colSide { width: 360px; float: right; }

/* SNS box
--------------------------------------------------------------*/
#SNS { width: 340px; margin-bottom: 20px; display:table; text-align: left;} 
#SNS h1 { width: 340px; padding: 15px 10px 0 15px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; font-size: 13px; color: #663300; float: left; }
#SNS .INSTAphoto { margin: 5px 5px 0 10px; font-size: 10px; float: left; }
#SNS .INSTAboxText { width: 80px; padding: 13px 30px 0 0; font-size: 13px; float: left; }
#SNS .FBphoto  { margin: 5px 5px 0 0px; float: left; }
#SNS .FBboxText { width: 80px; padding-top: 13px; font-size: 13px; float: left; }

/* season box
--------------------------------------------------------------*/
#boxSeason { margin-bottom: 20px; padding: 10px; background-color: #E4CFA6; background: -webkit-linear-gradient(top, #efe2bf, #d8ba8b); background: -moz-linear-gradient(top, #efe2bf, #d8ba8b); background: linear-gradient(to bottom, #efe2bf, #d8ba8b); }
#boxSeason .inner { background:url(../img/top/bg_season.png) no-repeat right bottom; }
#boxSeason .photo { float: left; }
#boxSeason .boxText { width: 190px; float: left; }
#boxSeason .boxText h1 { margin: 10px 0 10px 0; padding: 0 0 5px 15px; border-bottom: 1px solid #663300; }
#boxSeason .boxText h2 { margin: 0 0 5px 15px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; font-size: 16px; }
#boxSeason .boxText h2 a { font-weight: bold }
#boxSeason .boxText .text { margin: 0 0 5px 15px; font-size: 12px; }
#boxSeason .boxText .link { float: right; font-size: 10px; }
#boxSeason .boxText .link a { padding: 2px 8px; display: block; background-color: #663300; color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

/* ranking box
--------------------------------------------------------------*/
#boxRanking { margin-bottom: 20px; padding: 8px 10px 10px 10px; background-color: #fae8f5; background: -webkit-linear-gradient(left, #fae6f6, #fad0f6); background: -moz-linear-gradient(left, #fae6f6, #fad0f6); background: linear-gradient(to right, #fae6f6, #fad0f6); }
#boxRanking header h1 { margin-bottom: 10px; text-align: center; }
#boxRanking .boxRankingItem { margin-top: 10px; padding: 10px 10px 10px 0; background-color: #fff; }
#boxRanking .boxRankingItem .photo { float: left; }
#boxRanking .boxRankingItem .boxText { width: 175px; float: right; }
#boxRanking .boxRankingItem .boxText .order { margin-bottom: 15px; float: left; }
#boxRanking .boxRankingItem .boxText h1 { margin: 5px 0 15px 55px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif; font-size: 18px; line-height: 1.2; }
#boxRanking .boxRankingItem .boxText h1 a { font-weight: bold }
#boxRanking .boxRankingItem .boxText .text01 { margin-bottom: 5px; clear: both; }
#boxRanking .boxRankingItem .boxText .text02 { margin-bottom: 5px; color: #cc0000; }

/* facebook banner
--------------------------------------------------------------*/
#fbBanner { width: 360px; margin-bottom: 20px; float: right; }