@charset "UTF-8";

/*----------------------------------
	レコメンド関連の設定
-----------------------------------*/
/*カートに入れるボタン*/
.recommend_btn {
	text-align: center;
	background-color:#54AFC5;
	color:white;
	font-size:100%;
	cursor:pointer;
	height:30px;
	border: none;
	-webkit-appearance: none;
	border-radius:5px;
	outline: none;
	width:150px;
}

.recommend_btn:hover {
	background-color:#003BB0;
}

/*予約購入ボタン*/
.recommend_yoyaku_btn {
	text-align: center;
	background-color:#17375e;
	color:white;
	font-size:100%;
	cursor:pointer;
	height:30px;
	border: none;
	-webkit-appearance: none;
	border-radius:2px;
	outline: none;
	width:150px;
}
.recommend_yoyaku_btn:hover {
	background-color:#003BB0;
}

/*購入済みボタン*/
.disable_recommend_btn {
	text-align: center;
	background-color:#c2c2c2;
	color:white;
	font-size:100%;
	cursor:default;
	height:30px;
	width:100px;
	border: none;
	-webkit-appearance: none;
	border-radius:2px;
	outline: none;
	width:150px;
}

/*レコメンド設定した問題集名*/
.recommend_book_name {
	font-weight:bold;
	font-size:90%;
	display: -webkit-box;
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.2em;
	height: calc(1.2em * 2);
	align-items: center;
}

.recommend_text {
	margin-top:20px;
	margin-left:8px;
	background: linear-gradient(transparent 50%, #FFFFB2 50%);
	width:310px;
}

.recode_info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/*レコメンドに指定した問題集をカートに入っている問題集の直下へ*/
.disp_recommend {
	display:flex;
}

/*先頭の問題集*/
.recommend_list_first {
	margin-bottom:10px;
}

/*2番目の問題集*/
.recommend_list_second {
	margin-left:30px;
	margin-bottom:10px;
}

/*3番目の問題集*/
.recommend_list_third {
	margin-left:30px;
	margin-bottom:10px;
}

/* 320pxまでの幅の場合に適応される  */
@media (max-width: 320px) {
	body{
		width:320px;
	}

	.description {
		font-size:90%;
		margin-bottom:15px;
	}

	.status_txt, .status_siken_nm {
		font-size:90%;
	}
	
	.book_name {
		font-size:110%;
		width: calc(100% - 150px);
	}
	
	.book_tanka {
		float:right;
		padding-right:10px;
	}
	
	.book_button {
		float:right;
	}
	
	.recommend_btn {
		width:95%;
	}
	
	.disable_recommend_btn {
		width:95%;
	}
	
	.recommend_list_first {
		font-size:80%;
	}
	
	.recommend_list {
		font-size:80%;
	}
	
	.recommend_text {
		font-size:80%;
	}
}

/* 449pxまでの幅の場合に適応される */
@media (max-width: 449px) {

	.coupon_disp_word {
		margin-left:0 !important;
		font-size:12px !important;
	}
	
	.coupon_subject {
		margin-left:0 !important;
	}
	
	.coupon_text {
		width:(100% - 280px);
	}
	
	.buy_limit {
		text-align:center;
	}
}

/* 555pxまでの幅の場合に適応される */
@media (max-width: 555px) {
	
	/* クーポン適応に関する文言欄 */
	.coupon_subject {
		width:calc(100% - 50px) !important;
	}
}

/* 321～699pxまでの幅の場合に適応される */
@media (max-width: 699px) {
	body{
		width:100%;
	}

	.description {
		font-size:90%;
		margin-bottom:15px;
	}

	.status_txt, .status_siken_nm {
		font-size:90%;
	}
	
	.book_name {
		font-size:110%;
		width: calc(100% - 150px);
	}
	
	.book_tanka {
		float:right;
		padding-right:10px;
	}
	
	.book_button {
		float:right;
	}
	
	.book_div {
		margin-left:0px;
	}
	
	.coupon_text {
		width:auto;
	}
	
	.coupon_disp_word {
		font-size:13px !important;
	}
	
	.title_text br {
    display:none;
		font-size:110%;
  }
	
	.coupon_subject { 
		width:calc(100% - 135px);
	}
	
	.coupon_check {
		margin-top:15px;
	}
	
	.recode_info {
		width:calc(100% / 3);
	}

	.recommend_list_first {
		font-size:80%;
	}
	
	.recommend_list_second {
		font-size:80%;
		margin-left:10px;
	}
	
	.recommend_list_third {
		font-size:80%;
		margin-left:10px;
	}
	
	.recommend_btn {
		width:90%;
	}
	
	.recommend_yoyaku_btn {
		width:90%;
	}
	
	.disable_recommend_btn {
		width:90%;
	}
	
	.recommend_text {
		font-size:80%;
		margin-top:20px;
		margin-left:8px;
		background: linear-gradient(transparent 50%, #FFFFB2 50%);
		width:250px;
	}
	
	.disp_tanka {
		display:block;
	}
}

/* 700～1024pxまでの幅の場合に適応される */
@media (min-width: 700px) {

	.description {
		font-size:95%;
		margin-bottom:15px;
	}

	.status_txt, .status_siken_nm {
		font-size:110%;
	}
	
	.book_name {
		font-size:110%;
		width: calc(100% - 280px);
	}
	
	.book_tanka {
		float:left;
	}
	
	.book_button {
		float:left;
	}
	
	.book_div {
		margin-left:0px;
	}
	
	.coupon_subject { 
		width:calc(100% - 135px);
	}
	
	.coupon_text {
		width:auto;
	}
	
	.coupon_check {
		margin-top:30px;
	}
	
	/*クーポンコード入力欄*/
	.coupon_text {
		margin-left:10px;
	}
}

/* 1025px～の幅の場合に適応される */
@media (min-width: 1025px) {

	.description {
		font-size:95%;
		margin-bottom:15px;
	}

	.status_txt, .status_siken_nm {
		font-size:110%;
	}

	.status_siken_txt {
		font-size:95%;
	}
	
	.book_name {
		font-size:110%;
		width:calc(100% - 280px)
	}
	
	.book_tanka {
		float:left;
	}
	
	.book_button {
		float:left;
	}
	
	.book_div {
		margin-left:0px;
	}
	
	.coupon_text {
		width:300px;
	}
	
	.coupon_check {
		margin-top:30px;
	}
	
	/*クーポンコード入力欄*/
	.coupon_text {
		margin-left:10px;
	}
}

.menu_title {
	width:160px;
}

.procedure_btn {
	text-align: center;
	background-color:#17375e;
	color:white;
	font-size:95%;
	cursor:pointer;
	height:48px;
	width:120px;
	border: none;
	-webkit-appearance: none;
	border-radius:2px;
	outline: none;
}

.procedure_btn:hover {
	background-color:#003BB0;
}

.delete_btn {
	text-align: center;
	background-color:#fff;
	color:black;
	font-size:95%;
	cursor:pointer;
	height:32px;
	width:96%;
	border: 1px solid black;
	-webkit-appearance: none;
	border-radius:2px;
	outline: none;
}

.cart_header {
	margin-top:20px;
	display:flex;
  font-weight:bold;
}

.disp_cart_info {
	margin-top:10px;
	min-height:70px;
	border:1px solid #D9D9D9;
}

.book_div{
 margin-top:10px;
 display:flex;
 align-items:center;
}

.book_name {
	margin-left:20px;
	font-weight:bold;
	height:30px;
}

.coupon_disp_word {
	font-size:16px;
	font-weight:bold;
	margin-left:10px;
}

.coupon_btn {
	margin-left:10px;
	width:80px;
	background-color:white;
	border-radius:5px;
	border:1px solid #dcdcdc;
}

/*クーポン適応に関する文言欄*/
.coupon_subject {
	margin-left:10px;
  margin-top:20px;
	font-size:80%;
}

/*割引金額*/
.disp_waribiki {
	margin-top:10px;
	text-align:center;
}

/*商品合計欄*/
.total_info {
	margin-top:10px;
	margin-right:30px;
	text-align:center;
}

/*表示テキスト*/
.info_text {
	font-weight:bold;
	font-size:14px;
}

/*商品合計点数*/
.total_suryo {
	margin-left:10px;
	font-weight:bold;
	font-size:18px;
}

/*単価合計*/
.total_tanka {
	margin-left:25px;
	font-weight:bold;
	font-size:18px;
}

/*購入へ進むボタン*/
.buy_next_btn {
	width:35%;
	margin-right:30px;
	height:40px;
	border-radius:20px;
	border:none;
	background-color:#54AFC5;
	color:white;
	font-size:16px;
}

.buy_next_btn:hover {
	cursor:pointer;
	background-color:#B4F3FF;
}

/*買い物を続けるボタン*/
.continue_btn {
	height:35px;
	margin-right:30px;
	border-radius:8px;
	border:1px solid #E8E8E8;
	background-color:white;
}
.continue_btn:hover {
	cursor:pointer;
	background-color:#f5f5f5;
}

.new_procedure_btn {
	height:35px;
	margin-right:30px;
	border-radius:8px;
	border:1px solid #E8E8E8;
	background-color:white;
}

.book_img{
	width:70px;
	height:70px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.book_img img{
	max-width:70px;
	max-height:70px;
}

.buy_limit {
	border-top:1px solid gray; 
	width:90%; 
	margin-top:10px; 
	padding:10px;
}

/*クーポンコードを表示・非表示するボタン*/
.fa-plus {
	cursor:pointer;
	transform:translateY(-1px);
}
.fa-minus {
	cursor:pointer;
	transform:translateY(-1px);
}

/*クーポンコード入力欄、文言*/
.coupon_cd_input_area {
	margin-left:11px;
}