@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*ワンカラムのページ幅*/
.no-sidebar .wrap {
width: 900px;
}

/*幅899以下の時は自動調整*/
@media screen and (max-width: 899px){
.no-sidebar .wrap{
width: auto;
}
}
.article .column-2{/*2コラム記事のマージン下だけ10に*/
	margin:0px 0 10px 0;
	padding:0px;
}

/*サムネのカテゴリを非表示に*/
.cat-label {
 display: none;
 }
.b-back{border: none; display: flex; justify-content: center; background-color: #f1f1f1; margin: 50px 0 20px 0;}
.area2s{box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border: solid 1px #c9c9c9; margin: 10px 0 15px 0;}
.area2{border: solid 1px #c9c9c9;}
.rank-title{position:relative; padding:0 0 0 10px; font-size:30px; font:#383838; font-weight:normal;}
.rank-name{position:relative; padding:0 0 0 15px; font-size:30px; font:#383838; font-weight:normal;}
.rank-license{position:relative; padding:0 0 0 10px; font-size:14px; font:#383838; font-weight:normal;}
.rank-tm{position:relative; margin-left:auto;}
.rank-point{display:flex;align-items:center;}
.rankstar{position:relative;margin-left:auto;}
.kasen1{background: linear-gradient(transparent 90%, #66cc66 90%);}
/* ボタンa */
.button_a {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 300px;/*幅*/
height: 40px;/*高さ*/
padding:0px;
text-align: center;
vertical-align: middle;
text-decoration:none;
line-height: 30px;
outline: none;
background-color: #62A1CB;/*平常時のボタン背景色*/
color: #fff;/*平常時の文字色*/
font-size:18px;
/*border: solid 1px #00cc00;*//*平常時の輪郭ボーダー色*/
border-radius:2px;
}
.button_a:hover{filter:opacity(60%);}
/* ボタンB */
.button_b {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 300px;
height: 60px;
padding:0px 5;
text-align:center;
vertical-align:middle;
text-decoration:none;
line-height: 30px;
outline: none;
background-color: #62A1CB;/*平常時のボタン背景色*/
color: #fff;/*平常時の文字色*/
font-size:18px;
/*border: solid 1px #00cc00;*//*平常時の輪郭ボーダー色*/
border-radius:2px;
}
.button_b:hover{filter:opacity(60%);}
.pic1:hover{filter:opacity(60%);}
/*文頭を下げて印をつける*/
.pcheck{
text-indent: -1em;
margin-left: 1em;}
.pcheck:before {
content: '';
display: inline-block;
width: .7em;
height: .3em;
margin-right: 4px;
border-left: 3px solid #62A1CB;
border-bottom: 3px solid #62A1CB;
transform: rotate(-45deg);
vertical-align: 2px;
}
.phanamaru{
text-indent: -1em;
margin-left: 1em;
}
.phanamaru:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 4px;
    margin-left: 4px;
    border: transparent solid 5px;
    border-left-color: #62A1CB;
    vertical-align: 3px;
}

h5.ppt{
	position:relative;
	padding:2px 48px;
	border-bottom:1px solid #62A1CB;
	font-weight:lighter;
	font-size:28px;
}
h5.ppt:first-letter{color:#62A1CB;}
h5.ppt:before, h5.ppt:after{
	content:"";
	display:block;
	position:absolute;
}
h5.ppt:before{
	width:32px;height:32px;
	border-radius:50%;
	border:1px solid #ddd;
	bottom:-16px;
	left:11px;
}
h5.ppt:after{
	height:64px;
	border-left:1px solid #ddd;
	bottom:-32px;
	left:28px;
}
h6.ranh2{
	position: relative;
	overflow: hidden;
	padding: 0 .3em;
	font-size:24px;
	font-weight:normal;
}
h6.ranh2::before,
h6.ranh2::after{
	content: "";
	position: absolute;
	bottom: 0;
}
h6.ranh2:before{
	border-bottom: 3px solid  #62A1CB;
	width: 100%;
}
h6.ranh2:after{
	border-bottom: 3px solid #B5CEDD;
	width: 100%;
}
.ranh2jp{	/*日本語部分にspan*/
    font-size:15px;        /* 文字サイズ指定 */
	font-weight:normal;
    margin-left:10px;     /* 周りの余白指定 */
}

.contena{
display:flex;
}
.inner{
padding:10px 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.inner2{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
padding:10px 0;
}
.3boxline{
display: inline-block;
width:30%;
height:auto;
padding:10px;
margin:0px;
}
#sarea .spbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
margin: 15px 0px;
	padding: 15px 0px 15px 0px;
  background: #fff;
}
#sarea .items {
  background: #fff;
  padding: 15px;
  width: 32%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
}
#sarea .items p {
  margin: 15px 0 0;
}
#sarea .spbtn {
  margin-top: auto;
}
#sarea .spbtn span {
  display: block;
  background: #62A1CB;
  color: #fff;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 15px 0 0;
}
#sarea .spbtn:hover{
	filter:opacity(60%);
}

#narrow-tab.spbtn {
  margin-top: auto;
}
#narrow-tab .spbtn span {
  display: block;
  background: #62A1CB;
  color: #fff;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 15px 0 0;
}
#narrow-tab .spbtn:hover{
	filter:opacity(60%);
}
.ranking-items .ranking-item-detail a { /*左・上のボタン*/
background-color: #62A1CB;
}
.ranking-items .ranking-item-link a { /*右・下のボタン*/
background-color: #339933;
}

/************************************
** SNS ボタンをまとめて丸くする
************************************/

/*シェア・フォローボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons,
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: center; /*中央に寄せる*/
	flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 4px; /*右側の余白*/
	margin-left: 4px; /*左側の余白*/
	border-radius: 50%; /*丸み*/
}

/*プロフィールウィジェットのリンク*/
.sns-follow.sf-profile .sns-buttons a {
	border-radius: 50%; /*丸み*/
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 18px; /*アイコンの大きさ*/
}

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
	font-size: 24px; /*アイコンの大きさ*/
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
	right: -2px; /*右側からの距離*/
	bottom: -2px; /*下側からの距離*/
	padding: 2px; /*内側の余白*/
	font-size: 10px; /*文字の大きさ*/
	border: solid 1px; /*線*/
	border-radius: 3px; /*丸み*/
	background-color: inherit; /*背景色*/
}

/*シェア数の表示が必要ないシェア・フォローボタン*/
.sns-share.ss-top .sns-buttons a .share-count:empty,
.sns-share.ss-bottom .sns-buttons a .share-count:empty,
.sns-follow.sf-bottom .sns-buttons a .follow-count:empty,
.sns-follow.sf-widget .sns-buttons a .follow-count:empty {
	padding: 0; /*内側の余白*/
	border: 0; /*線*/
}

/* 画像の枠線 */
.wakusen {
border: solid 1px #d4d4d4; /* 枠線のスタイル 太さ 色 */
}
.skyblue{
	color:#62A1CB;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}