@charset "UTF-8";
 CSS Document

/*ブランディング施作LP用CSS-----------------------------------------------------------------------------------*/

/*游ゴシック*/
body{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
/*//游ゴシック*/

/*img------------------------*/
img{
	max-width: 100%;
	height: auto;
}
/*link------------------------*/
a{
	color: #000;
    text-decoration: none;
}
a:hover{
	text-decoration: none;
	opacity: 0.7;
	color: #000;
}
.hover_none:hover{
	opacity: 1;
}
/*外部リンクアイコン（commonのサイズ修正）*/
.m-icon_link:after{
	width: 0.7em !important;
}


/*font------------------------*/
section p{
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
section dl{
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
.text_upper{
	text-transform: uppercase;
}
.text_center{
	text-align: center;
}
.text_bold{
	font-weight: bold;
}
.font_small{
	font-size: 12px;
}
.font_big{
	font-size: 26px;
}
.font_red{
	color: #e60012;
}
.font_green{
	color: #14a753;
}

.zouryou{
	font-size: 14px;
}


/*余白調整用---------------------*/
.mgt20{
	margin-top: 20px !important;
}
.mgt30{
	margin-top: 30px !important;
}
.mgt80{
	margin-top: 80px !important;
}
.mgl20{
	margin-left: 20px !important;
}


/*sp-none------------------------*/
.sp_block{
	display: none !important;
}



/*聴くWithTEAキャンペーン---------------------------------------------------------*/
.m-main_img{
	margin-bottom: 80px;
}
.cam_wrapper{
	background-color: #fbfaed;
}
.cam_inner{
	padding: 0 10px 10px;
}
.kikuwt_intro_wrap{
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	text-align: center;
	line-height: 1.6;
	font-size: 20px;
	margin: -40px 20px 40px;
	background-color: #f8ebe5;
	padding: 10px 10px 2px;
	color: #6c0600;
}
.kikuwt_intro_wrap p{
	margin: 0px auto 30px;
}
.kikuwt_intro_text{
	padding-top: 10px;
	font-size: 30px;
	font-family: "yu-mincho-pr6n", sans-serif;
	font-weight: bold;
	font-style: normal;
}
.intro_kazari02{
	transform: rotate(180deg);
}
.cam_req_wrapper{
	margin: 50px 0 0;
	padding: 0 15px;
	font-size: 20px;
	line-height: 1.5;
}

/*インデントつけるテキスト（注釈）-------------------*/
.list_text p{
	padding-left: 1em;
    text-indent: -1em;
    font-size: 14px;
    margin: 0;
}


/*応募要項（応募資格まで）本文サイズ：20px------------------*/

/*h3 応募要項タイトル*/
.kikuwt_cam_req{
    width: 60%;
    margin: 0 auto;
}

/*項目枠*/
.cam_ex_wrap{
	margin: 50px 0 30px;
}

/*見出し・テキスト*/
.cam_ex_tit{
	font-size: 22px;
	color: #e50012;
	font-weight: bold;
	padding: 0 0 5px;
	border-bottom: 4px dotted #e50012;
	margin: 50px 0 20px;
}
.cam_ex_text{
	color: #6c0600;
	margin: 10px 0;
}
.cam_ex_text02{
	color: #6c0600;
	margin: 30px 0 10px;
	font-size: 16px;
	font-weight: bold;
}
.cap{
	padding-top: 5px;
	font-size: 12px;
    color: #6c0600;
    text-align: right;
}
.cam_ex_text .under_line{
	border-bottom: 1px solid #6c0600;
}
.kikuwt_present_wrap{
	display: flex;
	justify-content: space-between;
}
.kikuwt_present_wrap div{
	width: 32%;
	margin-top: 30px;
}
.story_ttl_wrap{
	display: flex;
    align-items: baseline;
    justify-content: center;
    height: 190px;
    background-image: url(img/book_back@2x.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0;
}
.story_ttl_wrap div{
	width: 7%;
}
.kaji_story_ttl{
	font-size: 28px;
    font-family: "yu-mincho-pr6n", sans-serif;
    font-weight: bold;
    font-style: normal;
    color: #e50012;
    padding: 0 5% 0 2%;
}
.story_wrapper{
	display: flex;
	justify-content: space-between;
	margin: 0 0 60px;
}
.book_back_wrap{
   	padding: 30px 0;
	z-index: 3;
}
.backimg01{
	background-image: url("img/bookimg_01@2x.png");
	background-repeat: no-repeat;
	background-size: cover;
}
.backimg02{
	background-image: url("img/bookimg_02@2x.png");
	background-repeat: no-repeat;
	background-size: cover;
}
.backimg03{
	background-image: url("img/bookimg_03@2x.png");
	background-repeat: no-repeat;
	background-size: cover;
}
.backimg04{
	background-image: url("img/bookimg_04@2x.png");
	background-repeat: no-repeat;
	background-size: cover;
}
.book_back_inner{
    margin: 0 auto 0 4%;
}
.story_number{
	width: 60%;
    margin: 0 auto;
}
.st_product_img{
	width: 160px;
    margin: 0 auto 10px;
}
.st_product_link{
	color: #fff;
	border-bottom: 1px solid #fff;
}
.st_product_link:hover{
	color: #fff;
}

.story_text{
	font-size: 22px;
	color: #fff;
	font-family: "yu-mincho-pr6n", sans-serif;
    font-weight: bold;
    font-style: normal;
	text-align: center;
	margin: 0;
}
.story_time_wrap{
	display: flex;
	align-items: baseline;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	margin-top: 15px;
}
.story_time_wrap div{
	width: 6%;
}
.story_time_wrap p{
	padding: 0 5% 0 2%;
}
.story_ex_wrap{
	display: table;
    width: 40%;
    padding: 0 30px;
    font-size: 16px;
    color: #6c0600;
    position: relative;
    top: -15px;
    z-index: 2;
    border: 2px #c0a353 solid;
    background-color: #fef9f9;
	box-shadow: inset 0px 0px 35px 0px rgba(255, 147, 147, 0.3);
}
.story_ex_wrap div{
	display: table-cell;
	vertical-align: middle;
}
.story_ex_wrap p{
	margin-bottom: 
		30px;
}
.shiori_ill{
	width: 17%;
    position: absolute;
    top: -40px;
    right: 0;
}
.book_illust{
	width: 60%;
    transform: scale(-1, 1);
    margin: -156px -25px -60px auto;
}


/*外部リンク（青字・下線）*/
.blue_link{
	color: #0067db;
	border-bottom: #0067db 1px solid;
}
.blue_link:hover{
	color: #0067db;
}


/*ステップ説明-------------------------------*/

.step_wrap{
	background-color: #f8ebe5;
	padding: 15px 20px 40px;
	position: relative;
	margin: 60px 30px;
}

/*下矢印枠*/
.step_wrap:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(255, 255, 255, 0);
    border-top-width:30px;
    border-bottom-width:30px;
    border-left-width:30px;
    border-right-width:30px;
    margin-left: -30px;
    border-top-color:#f8ebe5;
    top:100%;
    left:50%;
}

/*下矢印なし枠*/
.step_wrap02{
	background-color: #f8ebe5;
	padding: 15px 20px 40px;
	position: relative;
	margin: 60px 30px;
}
.step_ttl{
	font-size: 27px;
	font-weight: bold;
    color: #712c02;
    margin: 45px 0 25px 50px;
    position: relative;
}
.step_ttl02{
	font-size: 27px;
	font-weight: bold;
    color: #712c02;
    margin: 45px 0 25px 50px;
    position: relative;
}
.step_ttl span{
	font-size: 24px;
	font-weight: bold;
}
.step_ttl02 span{
	font-size: 24px;
	font-weight: bold;
}
.step_icon{
	width: 80px;
    position: absolute;
    top: -2%;
    left: -5%;
}

.step_inner{
	display: flex;
	align-items: center;
}
.touch_ill{
	width: 15%;
	margin-left: 30px;
}
.post_image{
	width: 90%;
    margin: 0 auto;
    position: relative;
}
.teacup_ill{
	position: absolute;
    width: 18%;
    top: -50px;
    right: 0;
}
.headphone_ill{
	width: 18%;
    margin-left: 30px;
    margin-top: 13px;
}
.present_flex{
	display: flex;
	position: relative;
}
.wchance{
	width: 45%;
    margin: 0px 0 -30px 40px;
}
.present{
	width: 45%;
    margin: -10px 0 -40px 40px;
	position: absolute;
	right: 0;
}


/*リンクボタン-----------------------------*/
.link_btn{
	width: 90%;
    margin: 25px auto 80px;
}

/*//ステップ説明-------------*/



/*応募要項（応募資格以下）本文サイズ：14px------------------*/

.cam_req_wrapper02{
	margin: 50px 0;
	padding: 0 15px;
	font-size: 14px;
	line-height: 1.5;
}

.scroll-box {
	height: 320px;
	overflow-y: scroll;
	background-color: #fff;
}
.scroll-content{
	width: 95%;
	margin: 15px auto;
}

.unknow_wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.unknow_wrap p{
	margin: 0 0 20px;
}
.unknow_image{
	width: 31%;
	position: relative; 
}

.teapot_ill{
	position: absolute;
	width: 52%;
    top: 35%;
    left: -80px;
}
.event_link{
	color: #6c0600;
	border-bottom: 1px solid #6c0600;
}
.event_link:hover{
	color: #6c0600;
}
.contact_link{
	color: #6c0600;
	border-bottom: 1px solid #6c0600;
}
.contact_link:hover{
	color: #6c0600;
}

/*-----------------------------------------------sp*/
@media screen and (max-width: 767px){
	.pc_block{
		display: none !important;
	}
	.sp_block{
		display: block !important;
	}
/*--------------font*/
	
/*インデントつけるテキスト（注釈）-------------------*/
	.list_text p{
		font-size: 14px;
	}
	
/*--------------イントロ*/
	.kikuwt_intro_wrap{
		font-size: 16px;
		margin: 0 0 40px;
        padding: 10px;
	}
	.kikuwt_intro_text{
		font-size: 22px;
	}
	.kikuwt_cam_req{
		width: 100%;
	}
	.sp_text_left{
		text-align: left;
		width: 90%;
	}
	.cam_req{
		font-size: 24px;
		width: 80%;
	}
	.m-main_img{
		margin-bottom: 40px;
	}
	.kaji_story_ttl{
		font-size: 24px;
        text-align: center;
        padding: 0;
        line-height: 0.8;
	}
	.story_ttl_wrap{
		display: flex;
		height: 170px;
		background-size: 80%;
		position: relative;
		margin-top: 50px;
	}
	.story_ttl_wrap div{
		width: 15%;
        position: absolute;
        top: -32%;
        left: 10%;
	}
	.kikuwt_present_wrap{
		display: block;
	}
	.kikuwt_present_wrap div{
		width: 80%;
		margin: 0 auto 5px 13%;
	}
	.story_wrapper{
		display: block;
	}
	.story_ex_wrap{
		width: auto;
    	padding: 20px 15px;
		top: 10px;
	}
	.story_ex_wrap p{
		margin: 20px;
	}
	.book_back_inner{
		margin: 0 auto 0 5%;
	}
	.story_text{
		font-size: 20px;
	}
	.book_illust{
		width: 105%;
		transform: scale(-1, 1);
		margin: -120px 0 0 auto;
	}
	
/*--------------応募要項（応募資格まで）*/
	/*h3 応募要項タイトル*/
	.cam_req_wrapper{
		padding: 0 5px;
		font-size: 18px;
	}
	.cam_ex_tit{
		font-size: 20px;
	}
/*-------------対象商品*/
	.cam_product{
		width: 100%;
	}
/*-------------ステップ*/
	.touch_ill {
		width: 25%;
        margin: 20px auto 0;
	}
	.teacup_ill{
		width: 25%;
        top: -45px;
	}
	.step_wrap{
		margin: 60px 0px;
		padding: 15px 10px 20px;
    }
	.step_wrap02{
		margin: 60px 5px;
		padding: 15px 10px 25px;
	}
	.step_icon{
		width: 70px;
		top: -3%;
		left: 0%;
	}
	.cart{
		width: 130px;
		top: -6%;
		right: 0%;
	}
	.step_ttl{
        font-size: 21px;
        margin: 60px 0 20px 6px;
    }
	.step_ttl02{
        font-size: 21px;
        margin: 0 0 20px 6px;
    }
	.step_ttl span{
		font-size: 18px;
	}
	.step_ttl02 span{
		font-size: 18px;
	}
	.link_btn{
		width: 100%;
	}
	.post_image{
		width: 100%;
		margin-top: 30px;
	}
	.step_inner{
		display: block;
		position: relative;
	}
	.headphone_ill{
		width: 25%;
        margin: 0;
        position: absolute;
        top: -60px;
        right: 0;
	}
	.present_flex{
		display: block;
	}
	.wchance{
		width: 60%;
		margin: -10px 0 0;
	}
	.present{
		width: 85%;
		margin: -3% auto 0 11%;
		position: relative;
	}
	.unknow_wrap{
		display: block;
	}
	.unknow_image{
		width: 90%;
		margin: 30px auto;
	}
	.teapot_ill{
		width: 35%;
        top: -7%;
        left: 67%;
	}
	
	
	
	.step_inner_list01{
		margin: 35px 0 0;
	}
	.step_inner_list02{
		margin: 30px 0 0;
	}
	.step_inner_ttl01{
		margin: 0px 0px -15px;
		padding-bottom: 4px;
	}
	.step_inner_ttl02{
		margin: 0px 0px -15px;
		padding-bottom: 4px;
	}
	.step_inner_text .step_ttl{
		margin:  35px 0 25px 5px;
	}
	.step_ttl_ls{
		letter-spacing: -0.1em;
	}
	
	
	
/*応募要項（応募資格以下）本文サイズ：14px------*/
	.cam_req_wrapper02{
		padding: 0 10px;
	}
	.mgl20{
		margin-left: 10px !important;
	}
}