@charset "shift-jis";

/*--------------------------------------------------
	Common
--------------------------------------------------*/

/*-- 表示設定 --*/
.cp_control_hide { display:none; }

/*-- font --*/
.txt_bold { font-weight: bold; }

/*-- breadcrumb --*/
.path { display: none; }
.breadcrumb  { margin: 10px 0; }
.breadcrumb a { text-decoration: none; }
.breadcrumb .fbold { font-size: 1em; font-weight: bold; }


/*-- point  --*/
ol.point { font-family: Verdana; margin-bottom: 10px; }
ol.point em { background: url(/fruit/img/point/point.gif) 0 2px no-repeat; padding: 3px 0 0 16px; font-style: normal; font-size: 11px; }  
ol.point p { vertical-align: middle; display: block; }
ol.point i { font-style: normal; font-family: Verdana; font-size: 20px; }
ol.point u { text-decoration: none; font-weight: bold; color: #d50000; position: relative; top: 3px; font-size: 12px; }
ol.point s { font-weight: bold; }
ol.point .pointup { display: inline-block; *display: inline; *zoom: 1; margin: 2px 0 0 2px; *margin-top: 4px; padding: 0 2px 0 0; position: relative; top: 4px; }
a.pattention { font-size: 10px; }

/* wide */
.item_wide ol.point li { display :inline-block; }

/* modal */
.modal_info ol.point p { display :inline-block; vertical-align: baseline; }

/*-- layout --*/
.contents { width: 100%; max-width: 950px; margin: 0 auto; font-family: Avenir, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, Roboto, '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }


/*-- link --*/
.contents a:hover { text-decoration: none; }


/*-- btn --*/
.btn_set { text-align: center; }
.btn_set .btn { width: 100%; cursor: pointer; border-radius: 50px; box-sizing: border-box; display: inline-block; background: #666; color: #fff; font-size: 16px; font-weight: bold; padding: 10px; margin-bottom: 5px; border-bottom: 5px solid #ddd; }


/*-- head --*/
.head { text-align: center; }
.head h1 img { max-width:100%; height:auto; width /***/:auto; }


/*-- item --*/
#banner_item4 { font-size: 0; }
.item { padding: 10px; box-sizing: border-box; border: 5px solid #ddd; text-align: center; }
.item .item_ttl { font-weight: bold; font-size: 16px; margin: 10px 0 5px 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.item img { max-width: 100%; }

/* wide */
.item_wide { display: block; margin: 10px 0; width: 100%; overflow: hidden; }
.item_wide .item_main { overflow: hidden; display: block; }
.item_wide .item_img img { width:100%; max-width:468px; }
/*
.item_wide .item_detail { float: left; }
*/
.item_wide .btn_set { width: 50%; margin: 5px auto; }

/* normal */
.item_normal { display: inline-block; margin: 10px 5px; width: 100%; max-width: 230px; vertical-align: top; }
.item_normal:first-child { margin-left: 0; }
.item_normal:last-child { margin-right: 0; }
.item_normal .item_img { position: relative; max-width: 200px; min-height: 171px; }
.item_normal .item_img img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: block; }


/*-- click medal --*/
.click_medal { overflow: hidden; margin-bottom: 20px; }
.click_medal .click_medal_main { float: left; width: 640px; padding: 20px 30px; box-sizing: border-box; background: #d20605; color: #fff; }
.click_medal .click_medal_main .click_medal_ttl { width: 280px; display: inline-block; margin-right: 15px; }
.click_medal .click_medal_main h2 { font-size: 20px; line-height: 1.5; margin-bottom: 10px; background: url(/fruit/img/point/campaign/popular_v3/click_medal_mark.png) no-repeat; background-size: 80px; padding-left: 90px; }
.click_medal .click_medal_main .txt_large { font-size: 24px; }
.click_medal .click_medal_main .comment { border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 10px; text-align: center; font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.click_medal .click_medal_main .rule { text-align: center; }
.click_medal .click_medal_main .rule a { color: #fff; }

.click_medal .af { width: 280px; display: inline-block; border-radius: 10px; padding: 10px; background: #fff; box-sizing: border-box; text-align: center; }
.click_medal .af:hover { background:#ffe3e3; }
.click_medal .af h3 { font-size: 14px; margin-bottom: 5px; color: #d20605; }
.click_medal .af a { color: #333; }
.click_medal .af .item_img { width: 234px; height: 60px; margin: 0 auto 8px auto; border: 1px #ccc solid; }
.click_medal .af .item_img img { max-width: 234px; max-height: 60px; }
.click_medal .af .item_ttl { font-weight: bold; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

.click_medal .bnr { float: right; width: 300px; }


/*-- special bnr --*/
.special_bnr { margin-bottom: 20px; }
.special_bnr h3 { font-size: 20px; margin-bottom: 10px; }
.special_bnr li { text-align: center; vertical-align: top; display: inline-block; width: 130px; }
.special_bnr a { display: inline-block; padding: 10px 6px; }
.special_bnr img { margin-bottom: 5px; }


/*-- bnr foot --*/
.bnr_foot { text-align: center; }


/*-- 壁 --*/
#wall_full { display: none; position: fixed; left: 0; top: 0; z-index: 99999; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }


/*-- モーダル --*/
.modal { display: none; position: relative; z-index: 999999; width: 520px; margin: 0 auto; font-family: Avenir, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, Roboto, '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
.modal_inner { position: fixed; top: 50%; left: 50%; z-index: 9999999; width: 500px; margin-top: -200px; margin-left: -259px; padding: 9px 9px 9px 9px; border: 1px solid #ccc; border-radius: 8px; background: #fff; }
.modal_c { position:relative; z-index:999999999; width:500px; }
.modal_c span { position: absolute; right: 5px; top: -25px; cursor: pointer; width: 30px; height: 30px; font-size: 1.8rem; font-weight: bold; color: #fff; line-height: 1; text-align: center; border: 2px solid #fff; border-radius: 50%; background: #333; }
.modal_t { overflow: auto; height: 300px; padding: 10px; box-sizing: border-box; }
.modal_t p { margin-bottom: 10px; font-size: 14px; padding-left: 10px; }
.modal .indent { text-indent: -10px; display: inline-block; margin-bottom: 5px; }

/* news */
.modal_news { display: none; position: relative; z-index: 999999; width: 420px; margin: 0 auto; font-family: Avenir, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Verdana, Roboto, '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }
.modal_news .modal_inner { width: 400px; margin-top: -100px;  }
.modal_news .modal_c { width: 400px; }
.modal_news .modal_t { height: auto; text-align: center; padding-top: 20px; }
.modal_news .txt_bold { font-size: 18px; border-bottom: 3px dotted #bbb; padding-bottom: 5px; }


/*-- information --*/
.info { border: 2px solid #e0e0e0; margin-bottom: 30px; }
.info h3 { background: #e0e0e0; padding: 10px; font-size: 14px; }
.info .inner { padding: 10px; line-height: 2; }


/*-- R.W.D. --*/
@media (max-width: 690px) {

	/*-- base --*/
	table { width: 100%!important; }
	
	/*-- point --*/
	ol.point { margin-bottom: 20px; }
	ol.point li { display :inline-block; vertical-align: bottom; line-height: 1.3; }
	ol.point em { font-size: 20px; background-position: left center; background-size: 20px; padding-left: 25px; }
	ol.point p { display: inline; font-size: 20px; }
	ol.point i { font-size: 30px; }
	ol.point u { font-size: 20px; }

	/*-- item --*/
	.item { max-width: 100%; display: block; margin: 10px 0; }
	.item .item_ttl { margin-bottom: 10px; }
	
	/* wide */
	.item_wide { text-align: center; }
	.item_wide .item_img { width: 100%; }
	.item_wide .item_detail { width: 100%; }
	.item_wide .btn_set { width: 90%; }

	/*-- click medal --*/
	.click_medal { margin-bottom: 0; }
	.click_medal .click_medal_main { width: 100%; }
	.click_medal .click_medal_main .click_medal_ttl { width: 100%; text-align: center; margin-bottom: 20px; }
	.click_medal .click_medal_main h2 { display: inline-block; padding: 20px 0 20px 90px; font-size: 24px; margin 10px 0; }
	.click_medal .click_medal_main h2 br { display: none; }
	.click_medal .af { width: 100%; }
	.click_medal .af h3 { font-size: 18px; }
	.click_medal .bnr { float: left; width: 100%; margin-top: 10px; text-align: center; }
	
	/*-- special bnr --*/
	.special_bnr { margin-top: -80px; }
	.special_bnr ul { font-size: 0; }
	.special_bnr li { width:33%; font-size: 13px; }
	.special_bnr img { width: 100%; }

	/*-- モーダル --*/
	.modal_inner { top: 30%; }
	.modal_t { -webkit-overflow-scrolling: touch; height: 600px; }
	.modal_t p { font-size: 18px; line-height: 1.5; }

}


/*--------------------------------------------------
	Contents Layout and Color
--------------------------------------------------*/

/*-- layout --*/
.head { position: relative; }
.head .click_medal { position: absolute; top: 20px; right: 30px; z-index: 5; width: auto; animation: mark 2s infinite; }

@keyframes mark {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(20deg); }
	100% { transform: rotate(0deg); }
}


/*-- item --*/
.item a { color: #333; }
.item:hover { border-color: #96f0e0; }

/* wide */
.item_wide { border: 5px solid #e92b5e; background: #fddde6; }
.item_wide:hover { background: #e0f5f1; }

/*-- btn --*/
.btn_set .btn { background: #e92b5e; color: #fff; }
.btn_set .btn:hover { background: #96f0e0; color: #34414a; }


/*-- special bnr --*/
.special_bnr a { color: #333; }
.special_bnr a:hover { background: #fff884; }


/*-- R.W.D --*/
@media (max-width: 690px) {
	
	/*-- head --*/
	.head .click_medal { width: 100px; top: 10px; right: 10px; }
	
}