@charset "utf-8";
img{
	image-rendering: -webkit-optimize-contrast;
}
.box_contents a{
	text-decoration: none;
	color: #ffffff;
}
.box_contents a:link {
    text-decoration: none;
	color: #ffffff;
}
.box_contents a:visited{
	color: #ffffff;
	text-decoration: none;
}
.box_contents{
width:925px;
margin:10px auto;
position: relative;
line-height: normal;
}

/* common */
.clearfix {*zoom: 1;}
.clearfix:after {
    content:"";
    display:block;
    height:0;
    clear:both;
    overflow: hidden;
}

/* title */
.title_campaign{
	background-image: url(https://www.karadakarute.jp/ec/user_data/packages/silver/cp/bc508_kk12set/images/bg_img.png);
	background-size: cover;
	/*height: 450px;*/
	width: 100%;
	position: relative;
}
.title_campaign img{
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
}
.title_campaign a{
	position: absolute;
}
.link-purchase{
	width: 240px;
	padding: 10px 15px;
	font-weight: bold;
	text-align: center;
	justify-content: center;
	align-items: center;
	display: flex;
	background-color: #FFAF10;
	font-size: 21px;
	color: #ffffff;
	border-radius: 40px;
	text-decoration: none;
	top:354px;
	left: 164px;
	box-shadow: 2px 2px 4px #a9a9a9;
}
.pc-item{
display: block;
}
.sp-item{
	display: none;
}
/* main contents */
/* サービス紹介 */
.contents-wrap{
	background-color: #FFFFE6;
	padding: 30px;
	box-sizing: border-box;
	width: 100%;
}
.contents-wrap-box{
	background-color: #ffffff;
	padding: 20px 25px;
	box-sizing: border-box;
	width: 100%;
}
.contents-wrap-box h3{
	text-align: center;
	font-size:26px;
	margin: 0 0 20px;
}
.contents-wrap-box p{
	font-size: 16px;
	margin: 0;
}
.point-wrap{
	width: 100%;
	padding: 15px 30px;
	box-sizing: border-box;
	background-color: #ffffff;
}
.title-point{
	margin: 15px 0 40px;
	display: flex;
	justify-content: left;
	align-items: center;
}
.title-point h4{
	font-size: 21px;
	color: #ffffff;
	background-color: #17C5BD;
	padding:15px 10px;
	width: 175px;
	box-sizing: border-box;
	margin:0 15px 0 0;
	text-align: center;
}
.title-point h3{
	font-size: 26px;
	font-weight: bold;
}
.mydata-area{
	width: 100%;
	display: flex;
}
.mydata-area p{
	width: 50%;
	font-size: 16px;
	padding-right: 10px;
	box-sizing: border-box;
}
.mydata-area img{
	width: 50%;
}
.point-second-text{
	text-align: center;
	width: 100%;
	font-weight: bold;
	font-size: 18px;
	margin: 0 0 30px;
}
.point-second-list{
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	margin: 10px auto;
	list-style-type: none;
}
.point-second-list li{
	width: calc(50% - 10px);
	height: 75px;
	padding: 10px;
	box-sizing: border-box;
	border: 4px solid #3F67D2;
	color: #3F67D2;
	font-size: 18px;
	font-weight: bold;
	margin:0 20px 20px 0;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.point-second-list li:nth-child(even){
	margin-right: 0;
}
.health-area{
	width: 100%;
	text-align: center;
	margin-top: 25px;
}
.health-area p{
	font-size: 18px;
	margin: 0;
}
.health-area h3{
	font-size: 26px;
	margin: 5px 0 15px;
	font-weight: bold;
}
.health-area img{
	width: 680px;
	margin: 0 auto;
}
.btn-area{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.link-karute{
	width: 450px;
	padding: 20px 15px;
	font-weight: bold;
	margin: 40px 0 60px 0;
	text-align: center;
	justify-content: center;
	align-items: center;
	display: flex;
	background-color: #3F67D2;
	font-size: 21px;
	color: #ffffff;
	border-radius: 40px;
	text-decoration: none;
}
.icon-arow::before{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(https://www.karadakarute.jp/ec/user_data/packages/silver/cp/bc508_kk12set/images/arrow.png) no-repeat;
	margin-left: 10px;
	background-size: cover;
}
.icon-arow-mini::before{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(https://www.karadakarute.jp/ec/user_data/packages/silver/cp/bc508_kk12set/images/arrow.png) no-repeat;
	margin-left: 10px;
	background-size: cover;
}
.icon-arow-large::before{
	content: "";
	display: inline-block;
	width: 34px;
	height: 34px;
	background: url(https://www.karadakarute.jp/ec/user_data/packages/silver/cp/bc508_kk12set/images/arrow.png) no-repeat;
	margin-left: 14px;
	background-size: cover;
}
.merchandise-wrap{
	/*width: 100%;*/
	margin: 0;
	background-color: #ffffff;
}
.merchandise-area{
	display: flex;
	width: 92%;
	margin: 0 auto;
}
.merchandise-wrap > h3{
	margin: 0 0 40px 0;
	text-align: center;
	font-size: 26px;
	font-weight: bold;
}
.merchandise-wrap > h3 > span{
    box-sizing: border-box;
    padding: 0 2px 10px 2px;
    background: -webkit-linear-gradient(transparent 90%, #F8AE56 0%);
    background: linear-gradient(transparent 90%, #F8AE56 0%);
}
.merchandise-area-left{
	width: 40%;
	padding: 0 40px 0 10px;
	box-sizing: border-box;
}
.merchandise-area-left img{
	width: 100%;
	margin-bottom: 20px;
}
.config-btn{
	width: 100%;
	box-sizing: border-box;
	padding: 15px 5px;
	text-align: center;
	font-weight: bold;
	justify-content: center;
	align-items: center;
	display: flex;
	background-color: #B9B9B9;
	font-size: 15px;
	color: #ffffff;
	border-radius: 40px;
	text-decoration: none;
}
.config-btn:hover{
	color: #FFF;
}
.merchandise-area-right{
	width: 60%;
}
.merchandise-area-right ul{
	margin: 0 0 20px 0;
	padding: 0 0 0 25px;
	font-size: 16px;
}
.merchandise-area-right li{
	margin-bottom: 5px;
	list-style-type: disc;
	line-height: 1.8;
}
.merchandise-area-right p{
	font-size: 14px;
	margin: 0 0 5px 0;
}
.merchandise-area-right p:last-of-type{
	margin: 0;
}
.price-box{
	text-align: center;
	margin: 30px 0 20px;
}
.price-box img{
	width: 680px;
}
.campaign-date {
	text-align: center;
	font-weight: bold;
	font-size: 1.6rem;
	margin: 10px 0 20px;
}
.link-price{
	width: 450px;
	padding: 20px 15px;
	font-weight: bold;
	margin: 10px 0 40px 0;
	text-align: center;
	justify-content: center;
	align-items: center;
	display: flex;
	background-color: #FFAF10;
	font-size: 2.1rem;
	color: #ffffff;
	border-radius: 100px;
	text-decoration: none;
	box-shadow: 2px 2px 4px #a9a9a9;
}

.lp-caution {
	font-size: 0.9rem;
	margin: 0 60px 40px;
	padding: 0;
}


@media (max-width: 768px){
	body{
		margin: 0;
	}
	.box_contents{
		display: inline-block;
		width: 100%;
		margin: 10px auto 0;
	}
	.title_campaign{
		display: flex;
		justify-content: center;
		align-items: center;
		background-position: center;
	/*	height: 200px;*/
		padding: 5% 0;
		flex-direction: column;
		position: static;
	}
	.title_campaign img{
		width: 100%;
	/*	max-width: 370px;*/
		padding:0 5px 5px;
	}
	.title_campaign a{
		position: static;
	}
	.link-purchase{
		width: 60%;
		padding: 10px 15px 10px 25px;
		font-weight: bold;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
		background-color: #FFAF10;
		font-size: 18px;
		letter-spacing: .2rem;
		color: #ffffff;
		border-radius: 30px;
		text-decoration: none;
		box-shadow: 2px 2px 4px #a9a9a9;
	}
	.pc-item{
		display: none;
		}
	.sp-item{
		display:block;
	}
	.contents-wrap{
		padding: 20px 15px;
	}
	.contents-wrap-box h3{
		margin-bottom: 15px;
	}
	.title-point{
		flex-direction: column;
		justify-content: center;
		margin-bottom: 20px;
	}
	.title-point h3{
		margin:0;
		text-align: center;
	}
	.title-point h4{
		margin:0 0 10px 0;
		text-align: center;
	}
	.point-wrap{
		padding: 15px;
	}
	.mydata-area{
		display: block;
	}
	.mydata-area p{
		width: 100%;
		padding: 0;
		margin:0;
	}
	.mydata-area img{
		width: 100%;
		margin: 20px 0;
	}
	.point-second-text{
		margin: 0;
	}
	.point-second-list{
		margin: 20px auto 10px auto;
		width: 100%;
		padding: 0;
	}
	.point-second-list li{
		width: calc(50% - 5px);
		margin-right: 10px;
		margin-bottom: 10px;
		height: 92px;
		border: 3px solid #3F67D2;
		font-size: 15px;
	}
	.health-area p{
		font-size: 14px;
	}
	.health-area h3{
		margin-bottom: 10px;
		font-size: 22px;
	}
	.health-area img{
		width: 100%;
	}
	.health-area{
		margin-top: 20px;
	}
	.link-karute{
		width: 100%;
		font-size: 17px;
		margin-top: 30px;
		margin-bottom: 20px;
	}
	.icon-arow-large::before{
		content: "";
		display: inline-block;
		width: 24px;
		height: 24px;
		background: url(https://www.karadakarute.jp/ec/user_data/packages/silver/cp/bc508_kk12set/images/arrow.png) no-repeat;
		margin-left: 10px;
		background-size: cover;
	}
	.merchandise-wrap > h3{
		line-height: 1.8;
		margin-bottom: 20px;
	}
	.merchandise-wrap > h3 > span{
		padding-bottom: 2px;
	}
	.merchandise-area{
		display: block;
	}
	.merchandise-area-left{
		width: 100%;
		padding: 0 15px;
	}
	.merchandise-area-left img{
		padding: 0 12%;
		box-sizing: border-box;
	}
	.merchandise-area-right{
		width: 100%;
		margin: 20px 0;
		padding: 0 15px;
		box-sizing: border-box;
	}
	.price-box{
		margin: 30px 0 0;
	}
	.price-box img{
		width: 100%;
		padding: 0 15px;
		box-sizing: border-box;
	}
	.merchandise-wrap > .btn-area{
		padding: 0 15px;
		box-sizing: border-box;
	}
	.config-btn{
		font-size: 18px;
	}
	.link-price{
		margin-top: 20px;
		margin-bottom: 40px;
	}
	.content_cooperation_heading:before,.content_cooperation_heading:after{
		display: none;
	}
	.lp-caution {
		font-size: 1.4rem;
		margin: 0 0 40px;
		padding: 0 32px;
	}

}


/* 罫線 */
p.line {
   border-bottom: 1px solid #759fad;
	border-width: 15px;
	margin-left: -15px;
}
.content_item_box_right_inner {
	padding: 10px 0;
	border-bottom: 1px dotted #759fad;
}
.content_item_box_right_inner:first-child {padding: 0 0 10px 0;}
.content_product_name {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	color: #000;
}
.product_name {font-size: 20px;}
.content_product_lead {font-size: 15px;}
.label {
	display: inline-block;
	padding: 3px 7px;
	margin-right: 7px;
	font-size: 14px;
	color: #fff;
}
.icon_text {margin-left: 5px;}

.label_iphone {background: #2770f7;}
.label_android {background: #e9a125;}
.label_pasori {background: #db83a0;}
.label_loppi {background: #1493e4;}
.label_wifi {background: #086ca5;}
.label_off {
   -webkit-transform: rotate( -12deg );
   -moz-transform: rotate( -12deg );
   transform: rotate( -12deg );
	background: #ee1534;
	color: #fff;
}
.content_cooperation_heading {
	padding: 40px 0 20px;
	font-size: 30px;
	color: #264b60;
    text-align: center;
}
.content_cooperation_heading:before {
	content: "＼";
	margin-right: 10px;
}
.content_cooperation_heading:after {
	content: "／";
	margin-left: 10px;
}
.heading_large_red {
	font-size: 35px;
	color: #ee1534;
}

/* ボタン2列・3列 */
.list_2col,
.list_3col,
.cooperation_list_btn {
	display: flex;
	justify-content: space-between;
}
.list_2col_item,
.list_3col_item,
.cooperation_list_btn li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	box-sizing: border-box;
    vertical-align: top;
    letter-spacing: normal;
 }
 .list_2col_item:nth-child(odd) {margin: 0 3.4% 30px 0;}
.list_3col_item {width: calc(100% / 3);}
.list_2col_item {
	width: 50%;
	margin: 0 0 30px 0;
}
.list_2col_item > a,
.list_3col_item > a {
	display: block;
	position: relative;	padding: 15px;
	background: #fc892b;
	border-radius: 8px;
    -webkit-box-shadow: 0 4px 0 0 #af6f00;
	-moz-box-shadow: 0 4px 0 0 #af6f00;
	box-shadow: 0 4px 0 0 #af6f00;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}
.list_3col_item > a {
	padding: 15px 5px 15px 10px;
	margin-right: 15px;
}
.list_3col_item:last-child > a {margin: 0;}
.cooperation_list_btn a:hover {
	cursor: pointer;
    opacity:0.7;
    filter:alpha(opacity=70);
}
.list_2col_item > a:hover,
.list_3col_item > a:hover {
    box-shadow: none;
    transform: translate3d(0, 4px, 0);
}
.icon_img {
	display: inline-block;
	background: transparent url(https://www.karadakarute.jp/ec/user_data/packages/silver/cp/ketsuatsu/images/sprite_icon.png) no-repeat 0 0;
}
.icon_img_2col {
	position: absolute;
	top: -10px;
	left: 10px;
	width: 83px;
	height: 53px;
}
.list_2col_item .btn_text {margin-left: 90px;}
.list_3col_item .btn_text {margin-left: 40px;}
.icon_text {margin-left: 5px;}
.icon_white_silver {background-position: -2px -1px;}
.icon_white_black {background-position: -2px -70px;}
.icon_red_silver {background-position: -2px -139px;}
.icon_red_black {background-position: -2px -208px;}
.icon_black_silver {background-position: -2px -275px;}
.icon_black_black {background-position: -2px -345px;}
.icon_wifi {
	width: 17px;
	height: 12px;
	background-position: -104px -123px;
}
.icon_img_3col {
	position: absolute;
	top: 0;
	left: 5px;
	width: 45px;
	height: 26px;
	background-size: 140px auto;
	-webkit-transform: rotate( -45deg );
    -moz-transform: rotate( -45deg );
    transform: rotate( -45deg );
}
.icon_white_white {background-position: -74px 1px;}
.icon_white_pink {background-position: -73px -29px;}
.icon_white_green {background-position: -73px -60px;}
.content_cooperation_box {padding: 0 20px;}
.supplement_box {padding: 0 20px 40px;}
.cooperation_list_item {
	min-height: 400px;
	position: relative;
	background: #fff;
	border-radius: 8px;
	padding: 25px;
	box-sizing: border-box;
	text-align: center;
}
.logo_kk,
.logo_hp {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	height: 53px;
}
.logo_kk {
	background-position: -4px -416px;
	width: 176px;
	margin: 0 auto 15px;
}
.logo_hp {
	background-position: -4px -485px;
	width: 181px;
	margin: 10px 0 0;
}
.cooperation_list_item_box,
.cooperation_list_btn {text-align: left;}
.cooperation_list_item_box {margin-bottom: 20px;}
.content_kk_heading,
.content_hp_heading {
	margin-bottom: 10px;
	font-size: 20px;
}
.content_kk_heading {color: #1073a6;}
.content_hp_heading {color: #607d21;}
.cooperation_list_item_lead {
	font-size: 13px;
	color: #333;
	line-height: 1.6;
}
.cooperation_list_item_thumb {
	float: right;
	margin-left: 10px;
}
.cooperation_list_btn {
	position: absolute;
	bottom: 25px;
	left: 35px;
}
.cooperation_list_btn li {margin-right: 8px;}
.cooperation_list_btn li:last-child {margin: 0;}
.cooperation_list_btn_item {
    display: inline-block;
    position: relative;
    padding: 7px 13px 7px 22px;
    border-radius: 30px;
    font-size: 12px;
    color: #fff!important;
    text-decoration: none!important;
}
.cooperation_list_btn_item:before {
    content: '';
    display: block;
    position: absolute;
    top: 12px;
    left: 13px;
    border-width: 4px 0 4px 4px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    width: 0;
    height: 0;
}
.btn_green {background: #a4bf47;}
.btn_blue {background: #2770f7;}
.btn_orange {background: #e9a125;}

/* 補足 */
.supplement_list_item {
	margin: 3px 0;
	font-size: 10px;
	color: #333;
	line-height: 1.6
}

@media (max-width: 768px){

	.content_cooperation_box{
		padding-top: 10px;
	}
	.list_2col{
		display: block;
	}
	.cooperation_list_item{
		width: 100%;
		padding: 10px;
	}
	.content_cooperation_heading{
		padding: 20px 0 20px;
		font-size: 21px;
		text-align: center;
	}
	.cooperation_list_item_thumb{
		float: none;
		margin:10px 0;
		text-align: center;
	}
	.cooperation_list_item_lead{
		padding:0 5px;
	}
	.cooperation_list_btn{
		position: static;
		flex-wrap: wrap;
		flex-direction: column;
		padding: 5px;
	}
	.cooperation_list_btn_item{
		display: block;
		text-align: center;
		font-size: 16px;
	}
	.cooperation_list_btn_item:before {
		top:15px;
	}
	.cooperation_list_btn li{
		display: block;
		width: 100%;
		margin: 0 0 10px 0;
	}

	.logo_kk {
		margin: 5px auto 0;
	}
	.logo_hp {
		margin: 20px auto 0;
	}
}