@charset 'UTF-8';
/*-----------------------------------------------
メイン画像
------------------------------------------------*/

.brand_mainimg {
	background: url(../../../../_images/brand/thermos/main_back_img.webp) no-repeat center bottom;
	height: auto;
}

.brand_main_h {
	padding: 7px 10px;
	font-size: 26px;
	position: absolute;
	top: 240px;
	right: 15px;
}

.main_thermos {
	position: absolute;
	top: 50px;
	right: 15px;
}


/*-----------------------------------------------
動画
------------------------------------------------*/
.movie_main {
	background: #edf7fa url(../../../../_images/brand/thermos/movie_back.webp) repeat-x;
	background-position: bottom;
	margin-bottom: 40px;
	padding-top: 45px;
}

.movie_icon {
	margin-bottom: -18px;
	text-align: center;
}

.movie_main .movie_cont {
	width: 880px;
	margin: 0 auto;
	padding-bottom: 40px;
}

.movie_logo {
	margin-bottom: 35px;
	text-align: center;
}

.movie_main .movie_cont .movie_h {
	color: #ea101d;
	margin-bottom: 65px;
	font-weight: 700;
	font-size: 30px;
	letter-spacing: .08em;
	text-align: center;
	position: relative;
}

.movie_main .movie_cont .movie_h:after {
	content: "";
	display: block;
	width: 75px;
	height: 4px;
	background: #ea101d;
	-webkit-transform: translate(-50%,0);
	-moz-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	transform: translate(-50%,0);
	position: absolute;
	left: 50%;
	top: 50px;
}

.movie_main .movie_cont .movie_thermos { margin-bottom: 20px; }

.movie_main .movie_cont .movie_text { 
	font-weight: 700;
}

.movie_main .movie_cont .movie_text dt { margin-bottom: 20px; }
.movie_main .movie_cont .movie_text dt span {
	color: #535353;
	background: #FFF;
	font-size: 26px;
	padding: 5px 10px;
	box-sizing: border-box;
}

.movie_main .movie_cont .movie_text dd {
	background: #FFF;
	padding: 10px;
	line-height: 1.8em;
	box-sizing: border-box;
}

/*-----------------------------------------------
保温・保冷
------------------------------------------------*/
.cool_hot {
	background: url(../../../../_images/brand/thermos/item_thermos_back.webp) center top no-repeat;
	min-height: 900px;
}
.cool_hot .cool_hot_cont {
	width: 530px;
	margin: 0 auto;
	padding-top: 40px;
}

.cool_hot .cool_hot_cont .cool_hot_h {
	color: #ea101d;
	margin-bottom: 40px;
	font-size: 39px;
	font-weight: 700;
	text-align: center;
}

.cool_hot .cool_hot_cont .cool_hot_h span {
	padding-bottom: 8px;
	border-bottom: solid 6px #ea101d;
	line-height: 2.2em;
}

.cool_hot .cool_hot_cont .cool_hot_li { margin-bottom: 35px; }
.cool_hot .cool_hot_cont .cool_hot_li li {
	float: left;
}
.cool_hot .cool_hot_cont .cool_hot_li li:first-child { margin-right: 20px; }

.cool_hot .cool_hot_cont .kouzou {
	width: 530px;
	background: #FFF;
	border: 7px solid #89eff5;
	box-sizing: border-box;
}

.cool_hot .cool_hot_cont .kouzou .kouzou_l { float: left; }
.cool_hot .cool_hot_cont .kouzou .kouzou_r { 
	width: 240px;
	padding: 20px 30px;
	font-size: 19px;
	font-weight: 700;
	line-height: 2em;
	box-sizing: border-box;
	float: left;
}
.cool_hot .cool_hot_cont .kouzou .kouzou_r span {
	background: #fff222;
}


/*------一覧を見る-------*/
.item_down_button {
	width: 700px;
	margin:0 auto 50px auto;
	font-size: 32px;
	font-weight: 700;
	line-height: 98px;
	text-align: center;
	box-shadow: 0px 10px 9px 0px rgba(6, 0, 1, 0.16);
}
.item_down_button a {
	display: block;
	height: 105px;
	color: #FFF;
	background: url(../../../../_images/type/_common/item_down_button.gif) no-repeat center;
	padding: 0 100px 0 40px;
	box-sizing: border-box;
	position: relative;
}

/*-----------------------------------------------
厳選お薦め
------------------------------------------------*/
 .h_red_stripe {
    background: url(../../../../_images/brand/_common/red_stripe.gif) repeat-x bottom;
}

.item_rank{
	background: url(../../../../_images/brand/thermos/rank_h.webp) no-repeat;
}


/*------リンクボタン-------*/
.blue_btn{
	width: 80%;
	display: block;
    background-color: #53c3de;
    background-image: linear-gradient(to bottom, #65cae1 0%, #3dafd4 100%);
    color: #FFF;
    margin: 30px auto 0;
    padding: 0 80px 0 25px;
    font-weight: bold;
    font-size: 24px;
    line-height: 100px;
    text-align: center;
    letter-spacing: .07em;
    border-radius: 10px;
    box-shadow: 0 10px 0 #297b95;
    transition: all 0.3s ease;
    position: relative;
	
}
.blue_btn::after{
	content: "";
    display: block;
    width: 40px;
    height: 40px;
	background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
	background-image: url(../../../../_images/type/_common/blue-arrow-under.gif);
	transform: rotate(-90deg);
	
}
.blue_btn:hover{
	box-shadow: none;
	transform: translateY(10px);
	opacity: .7;
}