/*
Theme Name: ColorMag Pro Child Theme
Theme URI: http://themegrill.com/themes/colormag-pro/
Description: ColorMag Pro Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: colormag-pro
Version: 1.0
*/

@import url("../colormag-pro/style.css");

/* =Theme customization starts here
------------------------------------------------------- */


/*記事部分の余白を減らす*/
.article-content{
	padding: 3px 0px!important;
}

#secondary a, #primary a{
 color: #0073aa ; 
}

a.cat-links,a.above-entry-meta{
	color:#ffffff!important;
}

* {
	font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif, FontAwesome;
}

h1, h2, h3, h4, h5, h6 , p, pre, code, kbd, var, samp, tt, blockquote, ul,li{
	font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif, FontAwesome;
}


blockquote p, blockquote p:before {
	font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif, FontAwesome;
}

#site-description {
	font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif, FontAwesome;
}

.search-icon:before {
	font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif, FontAwesome;
}

.search-icon:before {
	font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif, FontAwesome;
}

.main-navigation li {
	font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif, FontAwesome;
}

.main-navigation li li.page_item_has_children > a:after {
	font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif, FontAwesome;
}

.site-header .menu-toggle {
	font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif, FontAwesome;
}

.site-header .menu-toggle:before {
	font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif, FontAwesome;
}

.comments-area article header .comment-edit-link:before{
	font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif, FontAwesome;
}

.comment .comment-reply-link:before {
	font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif, FontAwesome;
}

/*.checkmark {
	background-image: url(/wp-content/uploads/2016/08/h5-1.png);
	background-position: left top;
	background-repeat: no-repeat;
	color: #333333;
	text-shadow: 0 0 1px rgba(51,51,51,.1);
	font-size: 16px;
	line-height: 150%;
	margin: 3px auto;
	padding-left: 28px;
	font-weight : bold;
}*/

.checkmark:before {
	content:"\f046";
	font-family: FontAwesome;
	color:#c6407d;
	margin:0px 5px 0px 5px;
}

.kousiki {
	border: 2px double #0a8a57;
	background-color: #1aba67;
	background-image: -webkit-linear-gradient(top, #1aba67, #1fde7a);
	background-image: linear-gradient(to bottom, #1aba67, #1fde7a);
	border-bottom: solid 8px #649562;
	border-radius: 5px;
	color: #fff!important;
	line-height: 50px;
	height: auto;
	-webkit-transition: none;
	transition: none;
	font-size:20px!important;
	font-weight:bold!important;
	vertical-align: middle!important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    width:90%; /*ボタンの中央配置 */
    /*max-width: 400px;  ボタンの横幅 */
    text-align: center;  /*ボタン内の文字中央寄せ */
    padding: 10px!important;  /*ボタン内文字の余白 */
	margin-bottom:10px!important;
}
.kousiki:hover {
	border:2px double #1aba67;
	background-color: #1aba67;
	background-image: -webkit-linear-gradient(top, #10b057, #1aba67);
	background-image: linear-gradient(to bottom, #10b057, #1aba67);
	border-bottom: solid 8px #649562;
}
.kousiki:active {
	background: #1aba67;
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
	color: #1679a1;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}
.kousiki a {
 text-decoration: none !important;  /*ボタン内テキストリンク下線無し */
 color: #ffffff !important;  /*ボタン内の文字色 */
 display: block;
    font-size: 130%; 
}

.kousiki2 {
	border: 1px solid #15aeec;
	background-color: #49c0f0;
	background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3);
	background-image: linear-gradient(to bottom, #49c0f0, #2cafe3);
	border-radius: 4px;
	color: #fff!important;
	line-height: 50px;
	-webkit-transition: none;
	transition: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    width:90%; /*ボタンの中央配置 */
    /*max-width: 400px;  ボタンの横幅 */
    text-align: center;  /*ボタン内の文字中央寄せ */
    padding: 10px;  /*ボタン内文字の余白 */

}
.kousiki2:hover {
	border:1px solid #1090c3;
	background-color: #1ab0ec;
	background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
	background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
}
.kousiki2:active {
	background: #1a92c2;
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
	color: #1679a1;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}
.kousiki2 a {
 text-decoration: none !important;  /*ボタン内テキストリンク下線無し */
 color: #ffffff !important;  /*ボタン内の文字色 */
 display: block;
    font-size: 130%; 
}

/*記事タイトル*/
.entry-title {
	font-size: 26px!important;
	font-weight: bold; 
}
/*トップ固定ページのタイトル*/
H2.entry-title{
	font-size: 20px!important;
	font-weight: bold;
	margin-top:-5px!important;
	padding:0px!important;
}

.entry-title a{
	font-size: 17px!important;
	font-weight: normal; 
}

/*記事中の見出しタグの指定*/
div.entry-content h2 {
	font-size: 24px;
	font-weight: bold; 
	padding: .25em 0 .25em .75em !important;/*1ヶ目（上）と3ヶ目（左）で左ボーダーの高さが変わる*/
	margin: 25px 0px 25px 0px !important;
	border-left: 6px solid #c92f78 !important;
	border-bottom: 1px solid #c92f78 !important;
}
div.entry-content h3 {
	font-size: 21px;
	font-weight: bold; 
	padding: .2em 0 .2em .75em !important;
	margin: 35px 0px 25px 4px !important;
	border-left: 5px solid #c92f78 !important;
}
div.entry-content h4 {
	font-size: 18px;
	padding: .1em 0 .1em .75em !important;
	margin: 0px 0px 15px 5px !important;
	border-left: 4px solid #c92f78 !important;
}
div.entry-content h5 {
	font-size: 17px;
	padding: 0 0 0 .75em !important;
	margin: 0px 0px 15px 6px !important;
	border-left: 3px solid #c92f78 !important;
}

/*記事中の本文をインデント*/
div.entry-content div, p {
	margin: 5px 0px 15px 7px !important;
	padding: 0px 0px 0px 0px !important;
}
div, p ,li{
	font-size: 17px !important;
}

/*記事中トップの画像を消す*/
.single .featured-image {
display: none;
}

blockquote{
	color: #ccc; 
	background-color: #F5F5F5!important;
	padding: 25px 1px 0px 1px; 
	margin: 10px 1px 10px 1px;
	border:5px solid #DBDBDB;
	border-radius: 0 20px 0 20px;         
	-webkit-border-radius: 0 20px 0 20px;  
	-moz-border-radius:  0 20px 0 20px;  

    }
 
blockquote p{
	color:#3D80B6;
	line-height: 1.8em;
	padding: 1px 1px 1px 50px; 
}

blockquote p:before{
	color: #248db8;
	text-indent: 25px;
}

/* 折り返す */
div.flexbox-container {
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    margin:0 0 0px;
}

/*スペック表*/
table.type05 {
	border-collapse: separate;
	border-spacing: 1px;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #c6e8f4;
}
table.type05 th {
	/*width:200px;*/
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #c6e8f4;
	background: #c6e8f4;
}
table.type05 td {
	/*width:400px;*/
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #c6e8f4;
}

/*ランキング
http://coliss.com/articles/build-websites/operation/css/flexbox-responsive-layout-without-media-queries.html
*/
.ranking1, .ranking2, .ranking3, .ranking4, .ranking5, .ranking6, .ranking7, .ranking8, .ranking9, .ranking10{
  border-style: solid;
  border-width: 1px;
  border-color:#c92f78;
  padding:5px 5px 0px 5px!important;
  margin:0px 0px 20px 0px!important;
}

/*商品画像とスペック表*/
.container100{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  margin:0px 0px 0px 0px!important;
  padding:0px 0px 0px 0px!important;
}

/*固定側　左側の商品画像*/
.fixedUnlessOnOwnRow1{
  flex-grow:1; /* もう一方と比較して小さい数字*/
  flex-shrink:1;
  flex-basis:250px; /*最小幅*/
 border-style: solid;
 border-width: 1px;
 border-color: #c92f78;
  /*画像中央揃え*/
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
 
/*可変側　右側のスペック表*/
.fluidWidthDownToAPoint1{
  flex-grow:999999; /* もう一方と比較して大きい数字（大きすぎるとIEは計算し損ねる）*/
  flex-shrink:1;
  flex-basis:250px; /*最小幅*/
 border-style: solid;
 border-width: 1px;
 border-color: #c92f78;
}

/*レーダーチャートと説明文*/

/*固定側　左側のレーダーチャート*/
.fixedUnlessOnOwnRow{
  flex-grow:1; /* もう一方と比較して小さい数字*/
  flex-shrink:1;
  flex-basis:250px; /*最小幅*/
 border-style: solid;
 border-width: 1px;
 border-color: #c92f78;
  /*画像中央揃え*/
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

/*可変側　右側の説明文*/
.fluidWidthDownToAPoint{
  flex-grow:999999; /* もう一方と比較して大きい数字（大きすぎるとIEは計算し損ねる）*/
  flex-shrink:1;
  flex-basis:250px; /*最小幅*/
 border-style: solid;
 border-width: 1px;
 border-color: #c92f78;
}

/*リンクボタン*/

/*固定側　左側の詳細ボタン*/
.fixedUnlessOnOwnRow2{
  flex-grow:1; /* もう一方と比較して小さい数字*/
  flex-shrink:1;
  flex-basis:250px; /*最小幅*/
}

/*可変側　右側の説明文*/
.fluidWidthDownToAPoint2{
  flex-grow:999999; /* もう一方と比較して大きい数字（大きすぎるとIEは計算し損ねる）*/
  flex-shrink:1;
  flex-basis:250px; /*最小幅*/
}
 
/*サイドバーの全体枠*/
.sidelank{
	font-size:14px!important;
	font-weight: bold;
	border-style: solid;
	border-width: 2px;
	border-color:#f5f5f5;
	padding:3px;
	margin:2px;
	overflow: auto;
	height:100px;
	overflow:visible;
}
/*サイドバーの画像*/
.boxicon {
	font-size:14px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	float:left; 
	margin-right:7px;
	width: 100px;
	height: 100px;
}
/*サイドバーのラベル*/
.ranklabel{
	font-size:14px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	float:left; 
	margin-right:7px;
	width: 20px;
	height: 100px;
	color:red;
	background:#ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*サイドバーのコピー赤*/
.sidecopy{
	color:red;
	font-size:14px!important;
}

/*サイドバーコピー黒*/
.sidecopyb{
	color:#555555;
	font-size:14px!important;
}

.absolute {
    position: absolute;
    bottom: 80px;
    color: #fff;
    background: rgba(0,0,0,.6);
    width: 100%;
    max-width: 600px;
    padding: 1em 0;
}
.absolute p {
    margin: 0;
    padding: 0 0.8em;
    font-size: 150%;
    text-align: center;
}

#site-title {
	padding-left: 0!important;
	padding-right: 0!important;
	margin-left: 0!important;
	margin-right: 0!important;
	font-size:26px!important;
}
#site-title a {
	padding-left: 0!important;
	padding-right: 0!important;
	margin-left: 0!important;
	margin-right: 0!important;
	font-size:26px!important;
}


.red{
	color : red;
	font-weight : bold;
	font-style:normal; 
}

.yellow{
	background-color : yellow;
	font-weight : bold;
	font-style:normal; 
}

.x-large{
	font-size : x-large;
	font-weight : bold;
	font-style:normal; 
}

.large{
	font-size : 110%;
	font-weight : bold;
	font-style:normal; 
}

.small{
	font-size : small;
	font-style:normal; 
}


/*チェックマーク*/
.checkmark:before {
	content: " \f046";
	font-family: FontAwesome;
	color: #cc289d; 
	font-size:20px;
	font-weight : bold;
	margin-right:10px;
	font-style:normal!important; 
}

/*画像つきボックス 画像左*/
.profbox {
box-sizing: border-box;
width: 100%;
display: block;
margin-left:0px ;
padding:10px;
border: solid 5px #dddddd;
overflow: auto;
}
.profbox p,i{
font-size: 16px;
font-style:normal;
}
.profbox img{
text-align:left;
float:left;
margin: 0 5px 0 0;
clear: both;
}

/*画像つきボックス　画像右*/
.profboxr {
box-sizing: border-box;
width: 100%;
display: block;
margin:30px 0;
padding:10px 20px 10px 30px!important;
border: solid 5px #dddddd;
overflow: auto;
}
.profboxr p,i{
font-size: 16px;
}
.profboxr img{
text-align:left;
float:right;
margin: 0 15px 0 0;
clear: both;
}

/*カラーボックス pink*/
.pinkbox{
	border-style: solid;
	border-width: 5px;
	border-color:#dddddd;
	background-color:#efc6d8;
	margin: 10px 20px 10px 30px!important;
}

/*無地四角枠*/
.shikakuwaku{
	border-style: solid;
	border-width: 5px;
	border-color:#dddddd;
	background-color:#ffffff;
	margin:30px 20px 20px 20px;
	padding:10px 20px 10px 30px!important;
}