@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
*/


/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

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


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

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

div[id^="tradingview_"] {
  height: 320px;
}
/************************************
** プロフィール欄
************************************/
.nwa .author-box {
max-width:none;
padding: 0;
}
aside#author_box-2.widget.widget-sidebar.widget-sidebar-standard.widget_author_box{
padding: 0!important;
border-radius: 10px;
}
@media (max-width: 1023px){
aside {
padding: 0 .5em;
}
}
.nwa .author-box .author-thumb {
width: 100%;
height:9em;
margin:0 0 5em 0;
border-radius: 10px 10px 0 0;
}
.author-box figure.author-thumb{
float: none;
text-align: center;
background: url(https://zero-toushi.com/wp-content/uploads/2022/03/anthony-cantin-ig-lw0Dtz34-unsplash-scaled.jpg) center no-repeat;/*背景画像*/
background-size: cover;
position: relative;
z-index: 0;
}
.author-box img.avatar.photo{
border-radius: 0%;/*プロフィール画像を四角形にする場合のみ記入*/
background-image: none;
padding: 0!important;
box-shadow:none;
}
.author-box figure.author-thumb img{
width: 40%;
max-width:180px;
margin-top:5em;
}
@media (min-width:1023px){/*サイドバー表示時はMAX120pxで*/
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:120px;
}}
@media (max-width:480px){/*モバイル表示*/
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:130px;
}}
.author-box .author-name {
margin: 0 0 2em 0;
}
.author-box .author-content .author-name a{/*名前*/
text-decoration: none;
font-size:1.2em;
color:#545454;
}
.nwa .author-box .author-description {
margin-bottom:1.5em
}
.author-box .author-content .author-description p{
font-size:14px;
color:#7b7b7b;
line-height:1.6em!important;
margin:1em;
}
#author_box-2 p{/*自己紹介文の周囲の空白幅*/
margin:1em 2.5em;
}
div.author-follows{
padding-bottom:2em;
}
.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }
.author-box .author-content .author-follows .sns-buttons a.follow-button{
border-radius: 50%;
border: none;
width: 40px;
height: 40px;
color: #fff!important;
margin:0 3px;
}
a.follow-button.website-button.website-follow-button-sq{background-color: #6eb6fd!important;}
a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #7dcdf7!important;}
a.follow-button.facebook-button.facebook-follow-button-sq{background-color: #7c9dec!important;}
a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color: #2c6ebd!important;}
a.follow-button.instagram-button.instagram-follow-button-sq{background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;}
a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color: #bd081c!important;}
a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}
a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color: #0A66C2!important;}
a.follow-button.note-button.note-follow-button-sq{background-color: #41C9B4!important;}
a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color: #FF5500!important;}
a.follow-button.flickr-button.flickr-follow-button-sq{background-color: #111!important;}
a.follow-button.line-button.line-follow-button-sq{background-color: #00c300!important;}
a.follow-button.amazon-button.amazon-follow-button-sq{background-color: #ff9900!important;}
a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color: #C61E79!important;}
a.follow-button.slack-button.slack-follow-button-sq{background-color: #4A154B!important;}
a.follow-button.github-button.github-follow-button-sq{background-color: #4078c0!important;}
a.follow-button.codepen-button.codepen-follow-button-sq{background-color: #47CF73!important;}
a.follow-button.feedly-button.feedly-follow-button-sq{background-color: #2bb24c!important;}
a.follow-button.rss-button.rss-follow-button-sq{background-color: #f26522!important;}
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }
@media (max-width:1023px){
.nwa .author-box .author-thumb {
height:11em;
margin:0 0 7em 0;
}
.author-name{
font-size:16px!important;
}
.author-description{
line-height: 1.5 !important;
text-align:center;
margin:0 auto;
}
}
@media screen and (max-width: 1023px){/*モバイル時非表示*/
div.sidebar {
display: none;
}
}
/************************************
** プロフィール欄 終わり
************************************/
a.follow-button.feedly-button.feedly-follow-button-sq{
display:none;
}
/*a.follow-button.rss-button.rss-follow-button-sq{
display:none;
}*/

/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: rgba(75,90,169,0.5);
	transform: translateX(101%);
}

.menu-drawer a{
	font-size: 1.1em;/*文字の大きさ*/
	color: #fff;/*文字の色*/
	height: 3em;/*行の高さ*/
}

.menu-drawer a:hover{
	color: rgba(255,255,255,0.7);
	background-color: rgba(75,90,169,0);
}

/*モバイルヘッダーの色と高さを変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	/*background-color: #1e7cd1;*/
	/*color: #FFFFFF;*/
	height: 50px;
	padding-top: 5px;
}

.logo-menu-button.menu-button{
	/*background-color: #1e7cd1;*/
	height: 50px;
}

/*768px以下でロゴの大きさ変更*/
@media screen and (max-width: 768px){
img.site-logo-image{
	padding-top: 8px;
}
}
/*スライドインメニューをカスタマイズ終わり*/

/************************************
****　おすすめカード
************************************/
div#recommended-in.recommended-in.wrap.cf{
margin-top: 20px;
max-height:220px;
}
@media screen and (min-width: 1024px){
div#recommended-in.recommended-in.wrap.cf{
padding:0 2em;
}}
div#content.content.cf{
margin-top:0;
}
.widget-entry-cards .a-wrap{
transition: all .2s;
}
.widget-entry-cards .a-wrap:hover {
transform: translateY(-1px);
transition: all .2s;
}
figure.navi-entry-card-thumb.widget-entry-card-thumb.card-thumb{
opacity:.8;
}
.recommended.rcs-center-white-title .a-wrap:hover .card-content {
transition: all .1s;
opacity: 1;
}
.widget-entry-cards.large-thumb-on .card-content{
background: rgba(151, 151, 151, 0);
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
border-radius:10px!important;
margin:1em .5em;
background-color:#E8EAF6;/*Cocoon設定「全体」の「サイト背景色」に合わせてください*/
}
div.navi-entry-card-title.widget-entry-card-title.card-title{
color:#333333;
font-weight:bold;
font-size:.8em;
background-color: rgba(255, 255, 255, 0.8);
padding: .6em .5em;
border-radius:30px;
}
@media (max-width:834px){
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
margin:.3em 0em;
}
div.navi-entry-card.widget-entry-card.e-card.cf{
border-radius:10px!important;
overflow:hidden;
max-height:100px;
margin:0 .3em 0;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1)!important;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
box-shadow:none;
}
}
@media (max-width:834px){
div.navi-entry-card-title.widget-entry-card-title.card-title{
font-size:.6em;
padding: .5em;
}
div#recommended-in.recommended-in.wrap.cf{
margin: .7em .2em .3em;
}
.widget-entry-cards.large-thumb-on .card-content{
background: rgba(151, 151, 151, 0.2);
}
}
main#main.main{
margin:0;
}
.body .navi-entry-cards{
margin-bottom: 0;
}
/************************************
****　おすすめカードカスタム終わり
************************************/
/************************************
** アプリ―チ
************************************/

.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}


/************************************
** アプリ―チ　END
************************************/

/************************************
** コピーボタン
************************************/
.copy-box{
    background:#EFF2F6;
    padding:6px;
    width: 300px;
    margin:0 auto;
    font-size:0.9em;
	border-top-color: #D8DADD;
	border-top-width: 3px;
	border-left-color: #D8DADD;
	border-left-width: 3px;
	border-right-color: #E8EAEE;
	border-bottom-color: #E8EAEE;
	border-style: solid;
}
.copy-box p:first-child{
    margin-top:0;
}
.copy-box p:last-child{
    margin-bottom:0;
    padding-bottom:0;
}
.copy-box ul{
    border:none;
    margin:0;
    padding:0;
}
.copy-box ul li{
    margin-left:20px; /* 左に隙間があく場合は消してください */
}
.btn-copy {
    display: block;
    margin: 1em auto 2em;
    width: 120px;
    padding: 0.3em 1em;
    text-decoration: none;
    background: #EA5506; /* ボタン背景色 */
    color: #fff;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing:1px;
    line-height: 1.8;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn-copy:hover {
    color:#fff;
}
.btn-copy:before {
    left: -100%;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    content: "コピー完了";
}
.btn-copy .btn-copy-text {
    display: inline-block;
    -webkit-transition: all 0.3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.3s;
}
.btn-copy-active{
    background:#EA5506;/* ボタンクリック時 背景色 */
}
.btn-copy-active:before {
    left: 0;
}
.btn-copy-active .btn-copy-text {
    -webkit-transform: translateX(250%);
    -moz-transform: translateX(250%);
    -ms-transform: translateX(250%);
    transform: translateX(250%);
}

/************************************
** コピーボタン 実装終わり
************************************/


/************************************
** アイコンボックス
************************************/
/* 
 * 全ボックス共通CSS 
 * 1つでもコピーすれば他のボックスではコピーする必要なし。
 */
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}
@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}
/*
 * 個別ボックスCSS
 */
.s_memo {
	margin-bottom: 1.5em;
	padding: 1em;
	background: #fff9e5;
	color: #545454;
}
.s_memo_ttl {
	margin-bottom: 5px;
	color: #ffb36b;
	font-size: 1.2em;
	font-weight: bold;
}
.s_memo_ttl:before {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin: 0 8px 4px 0;
	border-radius: 50%;
	color: #fff;
	font-family: "Font Awesome 5 Free" !important;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}
.s_memo .s_memo_ttl:before {
	background-color: #ffb36b;
	content: "\f303";
	font-size: 17px;
}
/* memo
 * 個別ボックスCSS
 */
.s_memo {
    margin-bottom: 1.5em;
    padding: 1em;
    background: #fff9e5; /* 背景色を変える場合はここを変更 */
    color: #545454;
}
.s_memo_ttl {
    margin-bottom: 5px;
    color: #ffb36b; /* タイトルの色を変える場合はここを変更 */
    font-weight: bold;
}
.s_memo_ttl:before {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin: 0 8px 4px 0;
	border-radius: 50%;
	color: #fff;
	font-family: "Font Awesome 5 Free" !important;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}
.s_memo .s_memo_ttl:before {
	background-color: #ffb36b;
	content: "\f0eb";
	font-size: 17px;
}

/* cyuui
 * 個別ボックスCSS
 */
.s_memo.s_alert {
	background: #ffebeb;
}
.s_memo.s_alert .s_memo_ttl {
	color: #ff8376;
}
.s_memo.s_alert .s_memo_ttl:before {
	background: #ff8376;
	content: "\f12a";
}
/* chek
 * 個別ボックスCSS
 */
.s_memo.s_alerta {
	background: #E8FAEB;
}
.s_memo.s_alerta .s_memo_ttl {
	color: #2DAE7F;
}
.s_memo.s_alerta .s_memo_ttl:before {
	background: #2DAE7F;
	content: "\f303";
}
 /* ok
 * 個別ボックスCSS
 */
.s_memo.s_alertb {
	background: #E9F8FA;
}
.s_memo.s_alertb .s_memo_ttl {
	color: #3CB2CC;
}
.s_memo.s_alertb .s_memo_ttl:before {
	background: #3CB2CC;
	content: "\f164";
}
 /* file
 * 個別ボックスCSS
 */
.s_memo.s_alertc {
	background: #EFEFEF;
}
.s_memo.s_alertc .s_memo_ttl {
	color: #969696;
}
.s_memo.s_alertc .s_memo_ttl:before {
	background: #969696;
	content: "\f15c";
}
/************************************
** アイコンボックス 実装終わり
************************************/
/************************************
** 吹き出し押しボタン
************************************/

.button_solid015 {
    text-align: center;
}
.button_solid015 p {
    margin-bottom: 5px;
    font-weight: 600;
    color: #6bb6ff;
    letter-spacing: 0.04rem;
    display: inline-block;
    position: relative;
}
.button_solid015 p:before, .button_solid015 p:after {
    display: inline-block;
    position: absolute;
    top: 45%;
    width: 20px;
    height: 3px;
    border-radius: 5px;
    background-color: #6bb6ff;
    content: "";
}
.button_solid015 p:before {
    left: -30px;
    -webkit-transform: rotate( 50deg );
    transform: rotate( 50deg );
}
.button_solid015 p:after {
    right: -30px;
    -webkit-transform: rotate( -50deg );
    transform: rotate( -50deg );
}
.button_solid015 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #6bb6ff;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 50px;
	text-decoration: none
}
.button_solid015 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}
.button_solid015 a:after {
    position: absolute;
    top: 50%;
    right: 20px;
    transition: 0.2s ease-in-out;
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transform: translateY(-54%);
}
/************************************
** 吹き出し押しボタン　END
************************************/
/************************************
** ボタン
************************************/

/* solid002 */
.button_solid002 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #6bb6ff;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
    border-radius: 50px;
	text-decoration: none
}
.button_solid002 a:after {
    position: absolute;
    top: 50%;
    right: 20px;
    transition: 0.2s ease-in-out;
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transform: translateY(-50%);
}
.button_solid002 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}

/************************************
** ボタン　END
************************************/


/************************************
** リキャプチャーの非表示
************************************/
/*基本的には非表示にする*/
.grecaptcha-badge {
	visibility: hidden;
}


/*お問い合わせページには表示させる*/
.page-id-1549 .grecaptcha-badge { //33
visibility: visible;
}


/************************************
** リキャプチャーの非表示　END
************************************/

/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 2カラム表示にする
**********************************************/
.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
    width: 49.5%;
}

/**********************************************
** 固定ページの新着記事一覧(new_list) END
**********************************************/