@charset "UTF-8";
/* 商品ページCSS Document */

.productBox{
	margin: 30px 0;
	text-align: left;
}
.productBox .flexBox_catalog,
.productBox .flexBox_Right{
	display: flex;
	justify-content: space-between;
    flex-wrap: wrap;
}
.productBox .flexBox_catalog div.catalog_40{
	width:40%;
}
.productBox .flexBox_catalog div.catalog_40 img{
	width:100%;
}
.productBox .flexBox_catalog div.catalog_54{
	width:54%;
}

.productBox .flexBox_catalog div.catalog_54 h2{
	font-size:1.7rem;
	margin-bottom: 20px;
	line-height: 2.8rem;
	color:#363636;
}
.productBox .flexBox_catalog div.catalog_54 h2 span{
	font-size: 1.2rem;
	display: block;
}

.productBox .flexBox_Right div.boxLeft{
	width: 78%;
}
.productBox .flexBox_Right div.imgRight{
	width:18%;
	text-align: right;
}

.productBox .flexBox_Right div.imgRight img{
	width:100%;
	max-width: 100px;
}

.productBox h3.balloon_beige,
.productBox h3.balloon_blue,
.productBox h3.balloon_pink,
.productBox h3.balloon_green,
.productBox h3.balloon_orange{
	position: relative;
  padding: 10px 20px;
	display: inline-block;
	border-radius: 5px;
}
.productBox h3.balloon_beige{
  background: #ECDFCC;	
}
.productBox h3.balloon_blue{
	background: #bce2e8;
}
.productBox h3.balloon_pink{
	background: #f6bfbc;
}
.productBox h3.balloon_green{
	background: #cee4ae;
}
.productBox h3.balloon_orange{
	background: #f9c89b;
}
.productBox h3.balloon_beige:after,
.productBox h3.balloon_blue:after,
.productBox h3.balloon_pink:after,
.productBox h3.balloon_green:after,
.productBox h3.balloon_orange:after{
	position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
}
.productBox h3.balloon_beige:after{
  border-top: 10px solid #ECDFCC;
}
.productBox h3.balloon_blue:after{
  border-top: 10px solid #bce2e8;
}
.productBox h3.balloon_pink:after{
  border-top: 10px solid #f6bfbc;
}
.productBox h3.balloon_green:after{
  border-top: 10px solid #cee4ae;
}
.productBox h3.balloon_orange:after{
  border-top: 10px solid #f9c89b;
}
.productBox h4{
	border-bottom:1px solid #999;
	font-size: 1.3rem;
	padding-bottom:5px;
	margin: 10px 0 5px;
}
.productBox h5{
	background-color: #cee4ae;
	padding: 10px;
	font-size: 1.3rem;
	margin-bottom: 5px;
}
.productBox ul.specification{
	position: relative;
	padding:0 1rem;
}
.productBox ul.specification li{
	line-height: 1.7rem;
  padding: 0.3rem 0.5rem;
  list-style-type: none!important;/*ポチ消す*/
}
.productBox ul.specification li:before{
	content: "\f068";
    font-family: "FontAwesome";
  left : 0; /*左端からのアイコンまで*/
  color: #AB886D; /*アイコン色*/
	position: absolute;
}
.productBox ul.features,
.math_square ul.features-02{
	position: relative;
	padding:1rem;
}
.math_square ul.features-02{
	margin-top: 20px;
}
.productBox ul.features li,
.math_square ul.features-02 li{
	line-height: 1.7rem;
  padding: 0.5rem;
  list-style-type: none!important;/*ポチ消す*/
	text-align: left;
}
.productBox ul.features li:before{
	content: "\f00c";
    font-family: "FontAwesome";
  left : 0; /*左端からのアイコンまで*/
  color: #AB886D; /*アイコン色*/
	position: absolute;
}
.math_square ul.features-02 li:before{
	content: "\f0c8";
    font-family: "FontAwesome";
  left : 0; /*左端からのアイコンまで*/
  color: #AB886D; /*アイコン色*/
	position: absolute;
}
.productBox .price{
	font-size:1.5rem;
	padding:0 0.5rem;
}

.productBox .flexBox_three div img,
.productBox .flexBox_half div img,
.productBox .flexBox_half-link div img{
	width: 100%;
	margin: 5px auto;
}
.productBox .flexBox_three div a{
	text-decoration: none;
}
.productBox .flexBox_three div p:hover{
	color:#708090;
}
.productBox .flexBox_half div a:hover img{
	filter: brightness(70%);
}
.flexBox_half-link{
	display: flex;
	justify-content: space-between;
    flex-wrap: wrap;	
}
.productBox .flexBox_half-link div{
	width: 48%;
	margin: 10px 0;
}
.productBox .flexBox_half-link div a:hover img{
	filter: brightness(70%);
}

.productBox .flexBox_half div .float_right{
	float: right;
	display: inline-block;
}

.productBox .flexBox_half div .float_right img{
	width:200px;
	margin-left: 20px;
}
.productBox .magnetBox{
	border:1px solid #999;
	padding:10px 10px 0 10px;
}
.productBox .magnetBox ul li{
	line-height: 1.5;
  padding: 0.5rem;
  list-style-type: none!important;/*ポチ消す*/
}
.productBox .magnetBox ul li:before{
	content: "\f00c";
    font-family: "FontAwesome";
  left : 0; /*左端からのアイコンまで*/
  color: #228b22; /*アイコン色*/
	position: absolute;
}
.productBox .magnetBox .flexBox_half div img{
	margin: 0;
}
.productBox .magnetBox .flexBox_half div img:hover{
	filter: brightness(70%);
}
.new-icon{
	display: inline-block;
	align-items: center;
	background-color: #e60033;
	color:#fff;
	border-radius: 3px;
	padding:0 10px;
	margin-right: 5px;
	margin-bottom: 2px;
	font-size: 0.9rem;
}

.break_line{
	border-top: 2px solid #ECDFCC;
}
.no-wrap{
	white-space:nowrap;
}
/*数学の広場*/
.math_square{
	width:80%;
	text-align: center;
	margin: 0 auto;
}
.math_square img.math_square_title{
	width:100%;
	max-width: 800px;
	margin: 20px auto;
}
.math_square img.math_square_ill{
	width:100%;
	max-width: 600px;
	margin: 20px auto;
}
/*表*/
table.download-01 {
    border-collapse:  collapse; /* セルの線を重ねる */
	text-align: center;
	margin: 20px auto 50px;
	width: 100%;
}
table.download-01 th,
table.download-01 td{
    border: solid 1px #999;  /* 枠線指定 */
    padding: 8px;      /* 余白指定 */
}
table.download-01 th{
	background-color: #ECDFCC;
}
table.download-01 td a:before {
    content: "\f1c1";
    font-family: "FontAwesome";
    margin-right: 10px;
}
.productBox table.download-01 td a{
	color:#1e90ff;
	text-decoration: none;
}
.productBox table.download-01 td a:hover{
	color:#f08080;
}
a.btn02 {
    display: inline-block;
    text-decoration: none;
    color: #946243;
    cursor: pointer;
    padding: 5px 10px;
    margin: 10px auto;
    text-align: center;
    letter-spacing: 0.1em;
    border: solid 2px #946243;
    font-size: 1em;
    font-weight: bold;
}
a.btn02:hover{
	background-color: #946243;
	color:#fff;
}
a.btn02:after {
    content: "\f054";
    font-family: "FontAwesome";
    margin-left: 10px;
}

/*スマホ設定*/
@media screen and (max-width:767px) {
	.productBox .flexBox_catalog{
		display: block;
	}
	.productBox .flexBox_catalog div.catalog_40{
		width:100%;
		text-align: center;
	}
	.productBox .flexBox_catalog div.catalog_40 img{
		width:70%;
	}
	.productBox .flexBox_catalog div.catalog_54{
		width:100%;
		margin-bottom:20px;
	}
	.productBox .flexBox_catalog div.catalog_54 h2{
		font-size:1.6rem;
		margin-bottom: 10px;
		line-height: 2.2rem;
	}
	.productBox .flexBox_catalog div.catalog_54 h2 span{
		font-size: 1.1rem;
	}
	.math_square{
		width:96%;
	}
}