@charset "UTF-8";
/* CSS Document */

/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
#pickup{ position: relative; overflow: hidden; z-index: 1000;}
#pickup a:not(.point){ color: #00123F; font-size: 11px; font-weight: bold;}
#pickup a:not(.point) span{ color: #FF5773; font-size: 13px; }

#pickup .label{ background: #FFFC00; width: 55px; height: 23px; padding: 6px 0 0; position: absolute; top: 0;left: 0; font-size: 9px; font-weight: bold; color: #00123F; line-height: 1; border-radius: 2px; text-align: center;}
#pickup .txt{ display: block; background: #ff5773; min-height: 50px; padding:10px 30px 10px 10px; position: relative; }
#pickup .txt > span{ display: table; margin: 0 auto; padding-left: 84px; position: relative;}

/* links */
#pickup.links{ background: white; padding-left: 0!important; }
#pickup.links > div{ max-width: 1200px; margin: 0 auto; padding:6px 30px 6px 78px; position: relative;}
#pickup.links .label{ top: 6px; left: 10px; }
#pickup.links .border{ display: inline-block; margin: 0 2px; color: #00123F; font-size: 11px; font-weight: bold; }

/* point */
#pickup .point{ display: none; justify-content: space-between; height: 100%; padding-right: 30px; padding-top: 8px; position: absolute; top: 0; right: 0; font-size: 11px; font-weight: bold; color: #FF5773;}
#pickup .point::before{ content: ""; display: block; background: url("/common/img/pickup/ico_arrow.png")no-repeat center /contain; width: 7px; height: 7px; position: absolute; right: 18px; top: 15px;}


/*************************************************************************************************************************
* 980px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:980px) {
	#pickup .txt{ font-size: 15px; transition: background 0.3s ease-in-out 0s;}
	#pickup .txt:hover{ background: #FF6782;}

	/* links */
	#pickup.links a:not(.point):hover,
	#pickup .point:hover{ text-decoration: underline;}
	#pickup .point{ display: block;}
}


/* pickup-area */
#pickup-area{background: #F1F4F8; padding: 10px; color: #00123F; position: relative; z-index: 10; }
#pickup-area .flex{ display: flex; justify-content: center; align-items: center; gap: 20px; }
#pickup-area .tit{ display: flex; align-items: center; gap: 5px; }
#pickup-area .tit p{ font-size: 18px; font-weight: bold;}
#pickup-area .tit > span{ color: #FBB500; font-size: 16px; font-weight: bold; }
#pickup-area .tit > .red{ color: #FF4346;}
#pickup-area .tit > span span{ font-size: 28px; font-weight: 900; line-height: 1;}
#pickup-area .tit .sp{ display: none;}
#pickup-area .tit .pc{ display: block; max-width: 514px;}

#pickup-area .other{ display: flex; gap: 10px;}
#pickup-area .other p{ min-width: 100px; height: 38px; padding: 0 6px; border: #5A7598 1px solid; text-align: center; font-size: 13px; font-weight: bold; line-height: 36px; }
#pickup-area .other p span{ display: inline-block; font-size: 18px; font-weight: 900; }
#pickup-area .other a{ display: block; background: #FFB800; width: 140px; height: 38px; color: white; font-size: 14px; font-weight: bold; line-height: 38px; border-radius: 100px; text-align: center; transition: background 0.3s ease-in-out 0s; }
#pickup-area .other a:hover{ background: #FFB200; }

@media print, screen and (max-width:980px) {
	#pickup-area .tit p{ font-size: 16px; }
}

@media print, screen and (max-width:641px) {
	#pickup-area{ padding: 8px 20px; }
	#pickup-area .flex{ gap: 16px; }
	#pickup-area .tit{ gap: 8px; }
	#pickup-area .tit p{ font-size: 12px; line-height: 1.2; }
	#pickup-area .tit > span span{ font-size: 32px; }
	#pickup-area .tit .sp{ display: block; max-width: 232px;}
	#pickup-area .tit .pc{ display: none;}

	#pickup-area .other{ width: 116px; gap: 4px; flex-wrap: wrap; }
	#pickup-area .other p{ width: 100%; height: auto; border: none; font-size: 11px; line-height: 1; }
	#pickup-area .other p span{ font-size: 15px; line-height: 1;}
	#pickup-area .other a{ width: 100%; height: 24px; font-size: 12px; line-height: 24px;}
}