/* カスタム CSS をここに入力してください */

/*===============================================
テーブルの表示カスタマイズ（PC用）
===============================================*/
.custom-table {
    font-size: 14px;
    font-family: "メイリオ", Meiryo, sans-serif;
}

/*===============================================
テーブルの表示カスタマイズ（スマホのみ横スクロール対応）
===============================================*/
@media screen and (max-width:640px){
.custom-table {
    border-collapse: collapse;
    margin: 0em 0;
    max-width: 100%;
    font-size: 13px;
 }
.custom-table th{
    background-color: #ccc;
 }
.custom-table th,
.custom-table td{
    white-space: nowrap;
    border: solid 1px #ccc;
    padding: 3px 5px;
 }
.custom-table {
    overflow-x: auto;
    margin-bottom: 0em;
 }
}

/*===============================================
スマホ用トップのタイトル文字サイズを大きく
===============================================*/
@media screen and (max-width:767px) {
 .post-list.basicstyle .post-list-item .post-list-inner .post-list-meta .post-list-title {
  font-size: 14px;
  line-height: 1.3;
 }
}
  
/*===============================================
スマホ用インフィード広告高さ調整
===============================================*/
@media (min-width: 350px) {
  .infeed {
    height: 90px;
  }
@media (min-width: 500px) {
  .infeed {
    height: 60px;
  }
}
@media (min-width: 800px) {
  .infeed {
    height: 80px;
  }
}

/*===============================================
ボックスデザインの横幅を100%に広げる
===============================================*/
@media (min-width: 768px) {
.simple-box1,
.simple-box2,
.simple-box3,
.simple-box4,
.simple-box5,
.simple-box6,
.simple-box7,
.simple-box8,
.simple-box9,
.kaisetsu-box1,
.kaisetsu-box2,
.kaisetsu-box3,
.kaisetsu-box4,
.kaisetsu-box5,
.kaisetsu-box6,
.concept-box1,
.concept-box2,
.concept-box3,
.concept-box4,
.concept-box5,
.concept-box6,
.innerlink-box1 {
width: 100%;
}
}
  
/*===============================================
リストスタイル 左寄せ・マークを大きくする
===============================================*/
.cps-post-main ul{
padding-left: 0px; /*左に寄せる*/
}

.cps-post-main ol{
padding-left: 0px; /*左に寄せる*/
}

.cps-post-main ul li {
margin-bottom: 0.7em; /*リストの行間*/
padding: 0em 0px 0em 28px; /*マークと文字のスペース*/
}

.cps-post-main ul:not([class]) li:before, .cps-post-main table ul:not([class]) li:before {
width: 7px; /*マークの大きさ 横*/
height: 7px; /*マークの大きさ 縦*/
}

/*===============================================
ボタンデザイン（green-btn）
===============================================*/
.green-btn a {
 display: block;
 position: relative;
 z-index: 2;
 overflow: hidden;
 width: 100%;
 box-shadow: 1px 1px 5px 0 #a1a1a1;
 border-radius: 5px;
 background-color: #1ebcbc;
 color: #ffffff !important;
 padding: 10px 0;
 text-align: center;
 text-decoration: none;
 transition: .25s linear;
 -webkit-transition: .25s linear;
 -moz-transition: .25s linear;
}
.green-btn {
 display: block;
 width: 100%;
 margin-bottom: 0em;
}
.green-btn a:hover {
 -ms-transform: translateY(4px);
 -webkit-transform: translateY(4px);
 transform: translateY(4px);/*下に動く*/
 border-bottom: none;/*線を消す*/
}
.green-btn a:before {
 display: block;
 position: absolute;
 z-index: -1;
 left: -30%;
 top: -50%;
 content: "";
 width: 30px;
 height: 100px;
}

/* MediaQuery : スマホ対応 */
@media only screen and (max-width: 767px) {
  /* コンバージョンボタン */
  .green-btn a {
    font-size: 1.1em;
    margin: 0 auto 1em;
    width: 100%;
    margin-bottom: 0em;
  }
}

/************************************************************
スマホ用メニューボタン（menu2）
************************************************************/
.menu2 {
margin: 0;
padding: 0;
list-style: none;
font-size: 1.0em;
font-weight: bold;
width:auto; float:none; margin:0px 35px 0px 5px; border:1px solid #FFFFFF;
}
.menu2 li {
display: block;
width: 100%;
height: 50px;
margin: 0;
line-height: 48px;
list-style-type: none; /*リスト消す*/
background: linear-gradient(#fff, #f1f1f1);
border: 1px solid #cfcfcf;
	/*1行ごとのグラデーション*/
    background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		to(#e8e8e8));
    
	-webkit-box-shadow: /*リスト一行ごとにドロップシャドウ。
　　　　　　　　　　　　　　ULにつければ良さそうだが、ULは角丸してないので*/
		0px 3px 3px rgba(000,000,000,0.1);
}
.menu2 li + li {
margin-top: -1px;
margin-bottom: 0px;
}
.menu2 li:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-bottom: 0px;
}
.menu2 li:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.menu2 li a {
display: block;
position: relative;
width: 100%;
height: 100%;
padding: 0 5px 0 3px;
box-sizing: border-box;
text-decoration: none;
color: #666;
}
.menu2 li a::after {
content: url(/wp-content/themes/n1/img/arrow_002.png);
position: absolute;
right: 25px;
margin-top: 0px;
}

/************************************************************
見出し2スタイル変更
************************************************************/
.entry-content h2 {
	font-size: 1.2rem;
  position: relative;
  color: white;
  background: #81d0cb;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 1.8em;
}

.entry-content h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: 900;
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}

/************************************************************
見出し3スタイル変更
************************************************************/	
.entry-content h3 {
  position: relative;
	border-left: none; /*左側の線を消す*/
	color: #48b5ac;
}

.entry-content h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

/************************************************************
見出し4スタイル変更
************************************************************/
.entry-content h4 {
  position: relative;/*相対位置*/
  padding: 0.5em 0.5em 0.5em 1.7em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #ff6a6a;/*文字色*/
  border-top: dotted 1px gray;
  border-bottom: dotted 1px gray;
  background: #fffff4;
}

.entry-content h4:before {
  font-family: "Font Awesome 5 Free";
  content: "\f028";
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0.25em;/*アイコンの位置*/
  top: 0.5em;/*アイコンの位置*/
  color: #ff6a6a; /*アイコン色*/
}

/************************************************************
見出し5スタイル変更
************************************************************/
.entry-content h5 {
  position: relative;
  padding-left: 35px;
	color: #5ab9ff;
}
.entry-content h5:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  background: #5ab9ff;
  color: white;
  font-weight: 900;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.entry-content h5:after {
  /*吹き出しのちょこんと出た部分*/
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  height: 0;
  width: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #5ab9ff;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
	