@charset "Shift-JIS";
/* トップページ
=====================================================================*/

.spantitle {
    float: left;
    color: #0f2b7e;
    position: relative;
    text-shadow: 1px 1px 0 #ffffff;
    top: 24px;
    left: 20px;
    font-size: 8pt;
}

.spantitled {
    float: left;
    color: #0f2b7e;
    position: relative;
    text-shadow: 1px 1px 0 #fff;
    top: 18px;
    left: 375px;
    font-size: 12pt;
}

.spandetail {
    float: left;
    position: relative;
    top: 466px;
    left: 230px;
    font-size: 10pt;
    padding: 2px 15px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
}

.spandetail_side {
    float: left;
    width: 170px;
    height: 42px;
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 11pt;
    text-decoration: none;
    padding: 8px 15px 2px 15px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    text-shadow: 1px 1px 0 #ffffff;
    background: linear-gradient(top, #fbfbfb 10%, #e4eefb 90%);
    background: -webkit-linear-gradient(top, #fbfbfb 10%, #e4eefb 90%);
    background: -moz-linear-gradient(top, #fbfbfb 10%, #e4eefb 90%);
    background: -o-linear-gradient(top, #fbfbfb 10%, #e4eefb 90%);
    background: -ms-linear-gradient(top, #fbfbfb 10%, #e4eefb 90%);
    box-sizing: border-box;
    box-shadow: 0px 0px 1px #555 inset;
    -moz-box-shadow: 0px 0px 1px #555 inset;
    -webkit-box-shadow: 0px 0px 1px #555 inset;
    -o-box-shadow: 0px 0px 1px #555 inset;
    -ms-box-shadow: 0px 0px 1px #555 inset;
}


.spandetail_side:hover {
    float: left;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    box-shadow: 2px 2px 5px 0px #444;
    -moz-box-shadow: 2px 2px 5px 0px #444;
    -webkit-box-shadow: 2px 2px 5px 0px #444;
    -o-box-shadow: 2px 2px 5px 0px #444;
    -ms-box-shadow: 2px 2px 5px 0px #444;
}
#top .top_recallline{
    width: auto;
    text-align: center;
    margin: -10px 0px 10px 0px;
    letter-spacing: 2px;
    padding: 3px 25px;
    color: #ffff80;
    font-size: 120%;
    font-weight: bold;
    background-color: #E60000;
}

#top_product_category .spandetail:hover {
    float: left;
    text-decoration: none;
    font-weight: bold;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    box-shadow: 2px 2px 5px 0px #444;
    -moz-box-shadow: 2px 2px 5px 0px #444;
    -webkit-box-shadow: 2px 2px 5px 0px #444;
    -o-box-shadow: 2px 2px 5px 0px #444;
    -ms-box-shadow: 2px 2px 5px 0px #444;
}

.recall_yellow {
    text-indent: 25px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    color: rgb(15, 43, 126);
    text-shadow: rgb(255, 255, 255) 1px 1px 0px;
    background-color: rgb(254, 220, 0);
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    font-size: 12pt;
    border-style: solid;
    border-color: white;
    padding: 5px;
}

.recall_kataban {
    color: #7a7272;
    position: relative;
    padding-top: 10px;
}

.spanyear {
    padding-left: 10px;
    height: 60px;
}

.spanyearleft {
    float: left;
    position: relative;
    width: 72px;
    border-style: ridge;
    border-color: #fafafa;
    ;
    padding: 2px;
    top: 10px;
    font-size: 7pt;
}

.spanyearmid {
    float: left;
    width: 25px;
    padding: 14px 5px 5px 5px;
    font-size: 7pt;
}

.recalldet {
    margin: 10px;
    padding: 5px;
    text-align: left;
    border-radius: 8px;
    text-shadow: 1px 1px 0 #fff;
    background-color: #f7f6f1;
    font-size: 9pt;
}

.hakka {
    color: #c10000;
    font-size: 10pt;
    font-weight: bold;
}

.toppyoutube{
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-top: 20px;
    box-shadow: 0 0 5px #666;
    -moz-box-shadow: 0 0 5px #666;
    -webkit-box-shadow: 0 0 5px #666;
    -o-box-shadow: 0 0 5px #666;
    -ms-box-shadow: 0 0 5px #666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
}

.recallbtn {
    border-style: solid;
    border-color: white;
    font-weight: bold;
    color: #0f2b7e;
    text-shadow: 1px 1px 0 #fff;
    font-size: 11pt;
    padding: 8px 15px;
    border-radius: 16px;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    -o-border-radius: 16px;
    -ms-border-radius: 16px;
    box-shadow: inset 0px 0px 10px 0px #777;
    -moz-box-shadow: inset 0px 0px 10px 0px #777;
    -webkit-box-shadow: inset 0px 0px 10px 0px #777;
    -o-box-shadow: inset 0px 0px 10px 0px #777;
    -ms-box-shadow: inset 0px 0px 10px 0px #777;
    background: #fedc00;
}

/* トップページ左側ボタン
=====================================================================*/
#topbtnleft {
	width: 100%;
	padding-top: 20px;
	display: flex;
    flex-direction: column;
}

.top_recallitems{
	display: flex;
}
#topbtnleft .topbtnleftimg {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: inset 0px 0px 3px 0px #aaa;
	-webkit-box-shadow: inset 0px 0px 3px 0px #aaa;
	margin-bottom: 10px;
	background: #f9f9f9;
}

#topbtnleft .topbtnleftimg:hover {
	box-shadow: 0 5px 4px -4px #444;
	-webkit-box-shadow: 0 5px 4px -4px #444;
	-webkit-transform: scale(1.03);
	transform: scale(1.03);
}

.category {
    margin: 56px 0px 0px 5px;
    min-height: 453px;
}

.category ul {
    min-height: 370px;
    text-align: left;
}

#top_product_category li {
    width: 220px;
    height: 27px;
    float: left;
    margin: 3px 2px 3px 55px;
    padding: 2px 2px 2px 15px;
    text-shadow: 1px 1px 0 #ffffff;
    background: linear-gradient(top, #fbfbfb 10%, #e4eefb 90%);
    background: -webkit-linear-gradient(top, #fbfbfb 10%, #e4eefb 90%);
    background: -moz-linear-gradient(top, #fbfbfb 10%, #e4eefb 90%);
    background: -o-linear-gradient(top, #fbfbfb 10%, #e4eefb 90%);
    background: -ms-linear-gradient(top, #fbfbfb 10%, #e4eefb 90%);
    text-decoration: none;
    box-sizing: border-box;
    box-shadow: 0px 0px 1px #ccc inset;
    -moz-box-shadow: 0px 0px 1px #ccc inset;
    -webkit-box-shadow: 0px 0px 1px #ccc inset;
    -o-box-shadow: 0px 0px 1px #ccc inset;
    -ms-box-shadow: 0px 0px 1px #ccc inset;
    font-size: 11pt;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
}

#top_product_category a:link {
    color: #333;
    text-decoration: none;
}

#top_product_category a:visited {
    color: #333;
    text-decoration: underline;
}

#top_product_category a:hover {
    color: #ff9900;
    font-weight: bold;
    text-decoration: none;
}

#top_product_category li:hover {
    width: 220px;
    float: left;
    margin: 3px 2px 3px 55px;
    padding: 2px 2px 2px 15px;
    text-shadow: 1px 1px 0 #ffffff;
    text-decoration: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    box-shadow: 1px 1px 1px 1px #444;
    -moz-box-shadow: 1px 1px 1px 1px #444;
    -webkit-box-shadow: 1px 1px 1px 1px #444;
    -o-box-shadow: 1px 1px 1px 1px #444;
    -ms-box-shadow: 1px 1px 1px 1px #444;
}

#top_side a:link {
    color: #666;
    text-decoration: none;
}

#top_side a:visited {
    color: #666;
    text-decoration: none;
    font-weight: bold;
}

#top_side a:hover {
    color: #FF9900;
    text-decoration: none;
    font-weight: bold;
}

#top_side img:hover {
    box-shadow: 0 5px 4px -4px #444;
    -moz-box-shadow: 0 5px 4px -4px #444;
    -webkit-box-shadow: 0 5px 4px -4px #444;
    -o-box-shadow: 0 5px 4px -4px #444;
    -ms-box-shadow: 0 5px 4px -4px #444;
    background: #eee;
    -webkit-transform: scale(0.99);
    -moz-transform: scale(0.99);
    -ms-transform: scale(0.99);
    -o-transform: scale(0.99);
    transform: scale(0.99);
}

/*topinfolistnew*/
#topinfolistnew {
	margin: 0 auto;
}

#topinfolistnew .divdisnew{
    float: left;
    display: block;
    width: 95%;
    margin: 20px 10px;
}

#topinfolistnew dl {
    display: block;
}

#topinfolistnew dt {
    float: left;
    margin-left: 40px;
    min-height: 24px;
    line-height: 24px;
}

#topinfolistnew dd {
	text-indent: 10px;
	line-height: 40px;
    min-height: 40px;
    margin-left: 170px;
}

#topinfolistnew .slugspan{
	width: 140px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    font-size: 85%;
    display: inline-block;
    border: 2px solid #ffffff;
    margin-top: 8px;
}

#topinfolistnew .slugspan:hover{
	color: #e38d13;
	background: #eee;
    border: 2px solid #e38d13;
}

#topinfolistnew .timespan{
    margin-left: 20px;
    margin-right: 20px;
    color: #888;
    display: inline-block;
}

#topinfolistnew .titspan{
    display: inline-block;
    text-indent: 25px;
    border-bottom: 1px dotted #999;
	background: url(../img/common/parts/icon_02.jpg) left center no-repeat;
}

#topinfolistnew .titspan:hover {
    background: #eee;
}

#topinfolistnew .infospan{
	padding: 7px 50px;
    margin-top: -20px;
    letter-spacing: 0.2em;
    float: right;
    line-height: 1;
    color: #fff;
    border-radius: 0 0 10px 10px;
    background: #0f2b7b;
}

#topinfolistnew .bgnews{
    background-color: #97938c;
}

#topinfolistnew .bgproducts{
    background-color: #0067e1;
}

#topinfolistnew .bgimportant{
    background-color: #b70202;
}
#topinfolistnew .bgsite{
    background-color: #008000;
    font-size: 80% !important;
}
#topinfolistnew .bgpressrelease{
    background-color: #e38d13;
}


/*-------------stageスライド */
#stage {
	position: relative;
	max-width: 995px;
	min-height: 300px;
	overflow: hidden;
}

/*全ての写真を水平一列に格納したdiv、#photosに,スライドショーの animation を設定*/
#photos {
	position:absolute;
	top:0;
	width:100%;
	animation: imgPassToLeft0 30s infinite;
	-webkit-animation: imgPassToLeft0 30s infinite;
}

/*各写真の並び位置を設定
#photo1, #photo2, #photo3, #photo4, #photo5 */
#photo0 { left:  0%; }
#photo1 { left:100%; } 
#photo2 { left:200%; }
#photo3 { left:300%; }
#photo4 { left:400%; }
#photo5 { left:500%; }
#photo6 { left:600%; }
.pic { position:absolute;top:0;width:100%; }

/*写真サイズを可変に*/
.pic img { width:100%; }

/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
	display: none;
}

/*送りボタン文字（＜、＞）の設定*/
.b_left span, .b_right span {
	position: absolute;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 40px;
	font-weight: bold;
	opacity:0;
	top: 40%;
	color:#EEE;
}

.b_left span {
	left: 1%;;	
}

.b_right span {
	left: 95%;
}

/*ボタン文字hover時の設定*/
.pic:hover > label div span {
	opacity:1;
	color:#EEE;
}

.pic label div span:hover {
	color:#f00;
	cursor:pointer;
}

/* 各送りボタンクリック時のanimation設定 */
#next1:checked ~ #photos {
	animation: imgPassToLeft1 30s infinite;	
	animation-delay: -4.8s;
	-webkit-animation: imgPassToLeft1 30s infinite;	
	-webkit-animation-delay: -4.8s;
}

#next2:checked ~ #photos {
		animation: imgPassToLeft2 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToLeft2 30s infinite;
	-webkit-animation-delay: -10.8s;
}

#next3:checked ~ #photos {
	animation: imgPassToLeft3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToLeft3 30s infinite;
	-webkit-animation-delay: -16.8s;
}

#next4:checked ~ #photos {
	animation: imgPassToLeft4 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToLeft4 30s infinite;
	-webkit-animation-delay: -22.8s;
}

#next5:checked ~ #photos {
	animation: imgPassToLeft5 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToLeft5 30s infinite;
	-webkit-animation-delay: -28.8s;
}

#back1:checked ~ #photos {
	animation: imgPassToRight1 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToRight1 30s infinite;
	-webkit-animation-delay: -28.8s;
}

#back2:checked ~ #photos {
	animation: imgPassToRight2 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToRight2 30s infinite;
	-webkit-animation-delay: -22.8s;
}

#back3:checked ~ #photos {
	animation: imgPassToRight3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToRight3 30s infinite;
	-webkit-animation-delay: -16.8s;
}
#back4:checked ~ #photos {
	animation: imgPassToRight4 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToRight4 30s infinite;
	-webkit-animation-delay: -10.8s;
}

#back5:checked ~ #photos {
	animation: imgPassToRight5 30s infinite;
	animation-delay: -4.8s;
	-webkit-animation: imgPassToRight5 30s infinite;
	-webkit-animation-delay: -4.8s;
}

/* animation設定 */
@keyframes imgPassToLeft0 {
	0%  { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}

@keyframes imgPassToLeft1 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}

@keyframes imgPassToLeft2 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}

@keyframes imgPassToLeft3 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}

@keyframes imgPassToLeft4 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}

@keyframes imgPassToLeft5 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}

@keyframes imgPassToRight1 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}

@keyframes imgPassToRight2 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}

@keyframes imgPassToRight3 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}

@keyframes imgPassToRight4 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}

@keyframes imgPassToRight5 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}

@-webkit-keyframes imgPassToLeft0 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft1 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft2 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft3 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft4 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft5 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToRight1 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@-webkit-keyframes imgPassToRight2 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@-webkit-keyframes imgPassToRight3 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}

@-webkit-keyframes imgPassToRight4 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}

@-webkit-keyframes imgPassToRight5 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}