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

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




/**********************************************
** 固定ページの新着記事一覧(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)を
** 2カラム表示にする終わり
**********************************************/



/**********************************************
* アピールエリア *
**********************************************/
#appeal {
    height: calc(100vw * calc(650 / 1600));
}

/**********************************************
* アピールエリア 終わり*
**********************************************/




/************************************
** ページをフェードイン表示する
************************************/

.body {
	animation: fadein 3s forwards; /*アニメーション指定*/
}

@keyframes fadein {
	0% {opacity: 0} /*アニメーション開始時*/
	100% {opacity: 1} /*アニメーション終了時*/
}

.logo{
	animation-name:fdin;
	animation-duration:3s;
}
@keyframes fdin{
from {
	opacity:0;
	transform: translateY(10px);
}
to {
	opacity:1;
	transform: translateY(0);
}
}

.fadein {
    opacity : 0;
    transform : translate(0, 10px);
    transition : all 3s;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.fadeinn {
    opacity : 0;
    transform : translate(0, 10px);
    transition : all 3s;
}
.fadeinn.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.fadeinnn {
    opacity : 0;
    transform : translate(0, 10px);
    transition : all 2s;
}
.fadeinnn.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

/************************************
** ページをフェードイン表示する　終わり
************************************/



/************************************
** パソコンで見たときは"pc"のclassがついた画像が表示される
************************************/
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}
/************************************
** パソコンで見たときは"pc"のclassがついた画像が表示される　終わり
************************************/



/************************************
** 3カラム
************************************/
*, *:before, *:after {
	box-sizing: border-box;
}
.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
text-align: center; /* 内容は中央配置 */
}
.col_3 > div{
	width: 33.33333%;
	padding: 10px;
}

@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 100%;
	}
}
/************************************
** 3カラム　終わり
************************************/



/************************************
** リンク設定
************************************/
a {
  color: black;
}
a:hover {
  color: #405391;
}

.example {
  box-shadow: 2px 2px 4px;
}

p a:hover{ 
	opacity:0.5;
	transition:0.3s;
}
/************************************
** リンク設定　終わり
************************************/



/************************************
** ヘッダーの文字と背景の色を変える
************************************/
.search-menu-button.menu-button,
.home-menu-button.menu-button,
.sidebar-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #fff282;
	color: #444444;
}

.logo-menu-button.menu-button{
	background-color: #fff282;
}
/************************************
** ヘッダーの文字と背景の色を変える
************************************/



/************************************
** モバイルメニュー色々
************************************/
.mobile-menu-buttons {
    background-color: #fff282; /* 背景色 */
}
/************************************
** モバイルメニュー色々　終わり
************************************/


/************************************
** 見出し
************************************/
/* 見出しリセット */
/* 見出し2 */
.article h2{
background:none;
padding: 0;
}

/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

/* 見出し4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* 見出し5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* 見出し6 */
.article h6{
border-bottom:none;
padding: 0;
}

.sidebar h3 {
    padding-bottom: .5em;
  border-bottom: 3px double #ccc;
	font-size: 1em;
	  background-color: #fff;/* 背景色 */
	  color: #615d60; 
}

.article h2  {
	border-bottom: 1px solid #A3A3A3;
	padding: 0.2em 0.5em;
	border-left: solid 5px #b1b8fa;
	}


.article h3  {
	padding-bottom: .5em;
  border-bottom: 3px double #ccc;
	  background-color: #fff;/* 背景色 */
	}



/************************************
** 見出し終わり
************************************/


/************************************
サイドバー検索 
************************************/
.sidebar .search-box, .search-menu-content .search-box {
  width: 100%;
  margin: 1em 0 2em;
  position: relative;
  display: flex;
  box-shadow:0px 4px 6px 0px #c4c4c4; /*全体を囲むボックスのシャドウ*/
}
.search-menu-content .search-box {
  box-shadow:0px 4px 6px 0px #333; /*スライドイン表示でのシャドウ*/
}
.sidebar .search-edit, .search-menu-content .search-edit {
  width: 80%; /*入力部分の長さ*/
  background: #fff; /*入力部分の背景色*/
  padding: 0 10px;
  border: none; /*ボーダーを消す*/
  font-size: 16px;
}
.search-submit {
  width: 20%; /*ボタン部分の長さ*/
  background: #f2edf0; /*ボタン部分の背景色*/
  color: #aab3b9; /*アイコンの色*/
  position: static;
  right: auto;
  top: auto;
  font-size: 20px; /*アイコンの大きさ*/
  cursor: pointer;
  line-height: 40px; /*検索窓の高さ*/
  border: none;
  padding: 0;
}
.search-box input::placeholder {
  color: #bbb; /*プレースホルダーの色*/
}
.search-box input:focus, .search-box button:focus {
  outline: 0; /*フォーカス時の枠線を消す*/
align-content
	}

/************************************
 サイドバー検索終わり 
************************************/



/************************************
** フッター
************************************/
.footer {
  margin-top: 40px; /*フッターとコンテンツの間に余白追加*/
  background: #fff282; /*フッター背景色*/
  border-top: 4px solid #ffa384; /*上部にボーダー追加*/
}
.footer-bottom {
  margin-top: 14px; /*フッター内上部の余白を詰める*/
}
.footer-bottom-logo { /*ロゴの位置調整*/
  float: none;
  bottom: auto;
  position: static;
  margin-bottom: 10px;
}
.footer-bottom-logo .logo-image {
  padding: 0;
  max-width: 250px; /*ロゴ画像を少し大きく*/
  margin: 0 auto;
}
.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
  float: none;
  text-align: center;
}
.navi-footer-in > .menu-footer { /*メニューの位置調整*/
  justify-content: center;
  margin-bottom: 1em;
}
.navi-footer-in a {
  color: #575357; /*メニューの文字色*/
}
.navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
  color: #aab3b9; /*文字色を通常時と同じに*/
  background: none; /*背景色をなしに*/
  text-decoration: underline; /*アンダーラインを追加*/
}
.footer-bottom.fnm-text-width .menu-footer li {
  line-height: 1; /*メニューの区切りボーダーの高さを1文字分にする*/
}
.copyright {
  color: #575357; /*クレジットの文字色*/
}
@media screen and (max-width: 834px) {
  .navi-footer-in > .menu-footer li.menu-item {
    border: none; /*モバイルでメニューのボーダーを消す*/
  }
}
@media screen and (max-width: 460px) {
  .navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
    width: 100%;
    display: block;
    flex: auto;
    padding: 0.3em 0;
  }
}

/************************************
** フッター終わり
************************************/



/************************************
** プロフィール欄
************************************/
.nwa .author-box {
max-width:none;
padding: 2px;
margin:30px 0 0 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://maasauranaishi0706.com/wp-content/uploads/2022/09/marek-piwnicki-aLDx53k3ZIY-unsplash.jpg) center no-repeat;
background-size: cover;
position: relative;
z-index: 0;
}
.author-box img.avatar.photo{
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){
.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;
}
div.author-follows a.follow-button.website-button.website-follow-button-sq{background-color: #6eb6fd!important;}
div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #7dcdf7!important;}
div.author-follows a.follow-button.facebook-button.facebook-follow-button-sq{background-color: #7c9dec!important;}
div.author-follows a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color: #2c6ebd!important;}
div.author-follows a.follow-button.instagram-button.instagram-follow-button-sq{background: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat !important;}
div.author-follows a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color: #bd081c!important;}
div.author-follows a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}
div.author-follows a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color: #0A66C2!important;}
div.author-follows a.follow-button.note-button.note-follow-button-sq{background-color: #41C9B4!important;}
div.author-follows a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color: #FF5500!important;}
div.author-follows a.follow-button.flickr-button.flickr-follow-button-sq{background-color: #111!important;}
div.author-follows a.follow-button.line-button.line-follow-button-sq{background-color: #00c300!important;}
div.author-follows a.follow-button.amazon-button.amazon-follow-button-sq{background-color: #ff9900!important;}
div.author-follows a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color: #C61E79!important;}
div.author-follows a.follow-button.slack-button.slack-follow-button-sq{background-color: #4A154B!important;}
div.author-follows a.follow-button.github-button.github-follow-button-sq{background-color: #4078c0!important;}
div.author-follows a.follow-button.codepen-button.codepen-follow-button-sq{background-color: #47CF73!important;}
div.author-follows a.follow-button.feedly-button.feedly-follow-button-sq{background-color: #2bb24c!important;}
div.author-follows 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;
}

/************************************
** プロフィール欄
************************************/


/************************************
** フォーム
************************************/
/*全体の文字の大きさ*/
.CF7_table{
font-size:1.1em;
}

/*「必須」文字デザイン*/
.CF7_req{
font-size:.9em;
padding: 5px;
background: #F57500;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/*「任意」文字デザイン*/
.CF7_unreq{
font-size:.9em;
padding: 5px;
background: #bdbdbd;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/*タイトル列（左列）デザイン*/
.CF7_table{
margin:0 50px;}

/* 背景グレー・
* PCサイズ横幅35% */
@media screen and (min-width: 768px){
.CF7_table th{
width:30%;
background-color:#ebedf5!important;
}
}

/* スマホ・タブレットは
横幅100% */
@media screen and (max-width: 900px){
.CF7_table tbody,
.CF7_table tr, .CF7_table td{
display: block;
width: 100%;
}
.CF7_table th{
width:100%;
display:block;
margin: 0 auto;
border:none;
background-color:#ebedf5!important;
}
}

/* 「送信する」ボタンデザイン */
.wpcf7 input.wpcf7-submit { 
background-color:#e1edf2;
border:0;
color:#575357;
font-size:1.2em;
font-weight:bold;
margin:0 auto;
}

/* 中央に合わせる */
.CF7_btn{
text-align:center;
margin-top:20px;
}

/*境界線の打ち消しと書き直し */
table tbody tr td,table{
border:0;
}

table tr{
border-top: 2px solid #e5e5e5;
}

/************************************
** フォーム終わり
************************************/


/*ステップフローのCSS*/
ul.stepflow {
	border: none;
	margin: 1em 0.5em;
	padding: 0;
	list-style: none;
}
ul.stepflow > li:before, ol.stepflow > li:before {
	background-color:#baced9!important;
}
.stepflow li {
    position: relative;
    padding: 0 0 1.5em 1.8em;
}
.stepflow>li:before {
	content: "";
	width: 3px;
	background: #baced9;
	display: block;
	position: absolute;
	top: 28px;
	bottom: 0;
	left: 5px;
}
.stepflow-white {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: solid 3px #baced9;
}
.stepflow-black {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: solid 3px #baced9;
	background-color: #baced9;
}
.stepflow_label {
	padding: 3px 0px 8px 0px;
	margin-bottom:8px;
	color: #baced9;
	font-size: .99em;
	font-weight: bold;
}
.stepflow_title {
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom:15px;
}
.stepflow_content {
	font-size: .9em;
	line-height: 1.5;
	margin-top: .5em;
	padding: 0 0 1.5em;
	border-bottom: dashed 1px #cccccc;
}
/*ステップフローのCSSここまで*/






/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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