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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/*=================================================================================
	カエレバ・ヨメレバ・トマレバ
=================================================================================*/

.cstmreba {
	width:98%;
	height:auto;
	margin:36px auto;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
	line-height: 1.5;
	word-wrap: break-word;
	box-sizing: border-box;
	display: block;
}
/* WordPressで自動挿入されるPタグの余白を対処 */
.cstmreba p {
	margin: 0;
	padding: 0;
}
.cstmreba a {
	transition: 0.8s ;
	color:#000; /* テキストリンクカラー */
}
.cstmreba a:hover {
	color:#50bbed; /* テキストリンクカラー(マウスオーバー時) */
	text-decoration:none;
}
.cstmreba .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box {
	width: 100%;
	background-color: #fafafa; /* 全体の背景カラー */
	overflow: hidden;
	border-radius: 0px;
	box-sizing: border-box;
	padding: 12px 8px;
	box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
/* サムネイル画像ボックス */
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
	width:150px;
	float:left;
	margin:0 14px 0 0;
	text-align: center;
	background: #fff;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
	width:100%;
	display:block;
}
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img,
.cstmreba .tomarebalink-image a img {
	margin:0 ;
	padding: 0;
	text-align:center;
	background: #fff;
}
.cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info {
	overflow:hidden;
	line-height:170%;
	color: #333;
}
/* infoボックス内リンク下線非表示 */
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a {
	text-decoration: none;
}
/* 作品・商品・ホテル名 リンク */
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
	border-bottom: none ;
	font-size:16px;
}
/* powered by */
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
	font-size:10px;
	line-height:150%;
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a,
.cstmreba .tomarebalink-powered-date a {
	color:#333;
	border-bottom: none ;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover,
.cstmreba .tomarebalink-powered-date a:hover {
	color:#333;
	border-bottom: 1px solid #333 ;
}
/* 著者・住所 */
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address {
	font-size:12px;
}
.cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img {
	display:none !important;
}
.cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 {
	display: inline-block;
	width: 100%;
	margin-top: 5px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
	float:left;
	width:24%;
	min-width:128px;
	margin:0.5%;
}
/***** ボタンデザインここから ******/
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
	width: 100%;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	margin: 1px 0;
	padding:3% 0.5%;
	border-radius: 8px;
	font-size: 13px;
	font-weight: bold;
	line-height: 180%;
	color: #fff;
	box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #76ae25; border: 2px solid #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #ff7a15; border: 2px solid #ff7a15;}/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #c81528; border: 2px solid #c81528;}/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a { background: #0b499d; border: 2px solid #0b499d;}/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #bf9500; border: 2px solid #bf9500;}/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #000066; border: 2px solid #000066;}/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #ff0033; border: 2px solid #ff0033;}/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkhis a { background: #004bb0; border: 2px solid #004bb0;}/*** HIS ***/
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border:2px solid #ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;}	/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;} /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkwowma a { background:#ea5404; border: 2px solid #ea5404;} /* Wowma */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;} /* 楽天kobo */
.cstmreba .booklink-link2  .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;} /* honto */
.cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;} /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;} /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinkebj a { background:#f8485e; border: 2px solid #f8485e;} /* ebookjapan */
.cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;} /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
	background:#FF9901;
	border: 2px solid #ff9901;
} /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a,
.cstmreba .booklink-link2 .shoplinkrakuten a {
	background: #bf0000;
	border: 2px solid #bf0000;
} /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a {
	background:#225496;
	border: 2px solid #225496;
} /* 7net */
/****** ボタンカラー ここまで *****/

/***** ボタンデザイン　マウスオーバー時ここから *****/
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover {
	background: #fff;
}
/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a:hover { color: #76ae25; }/* 楽天トラベル */
.cstmreba .tomarebalink-link1 .shoplinkjalan a:hover { color: #ff7a15; }/* じゃらん */
.cstmreba .tomarebalink-link1 .shoplinkjtb a:hover { color: #c81528; }/* JTB */
.cstmreba .tomarebalink-link1 .shoplinkknt a:hover { color: #0b499d; }/* KNT */
.cstmreba .tomarebalink-link1 .shoplinkikyu a:hover { color: #bf9500; }/* 一休 */
.cstmreba .tomarebalink-link1 .shoplinkrurubu a:hover { color: #000066; }/* るるぶ */
.cstmreba .tomarebalink-link1 .shoplinkyahoo a:hover { color: #ff0033; }/* Yahoo!トラベル */
.cstmreba .tomarebalink-link1 .shoplinkhis a:hover { color: #004bb0; }/*** HIS ***/
/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;} /* Yahoo!ショッピング */
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; }	/* ベルメゾン */
.cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; } /* セシール */
.cstmreba .kaerebalink-link1 .shoplinkwowma a:hover { color:#ea5404; } /* Wowma */
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;} /* 価格コム */
/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd;} /* Kindle */
.cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; } /* 楽天kobo */
.cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; } /* honto */
.cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; } /* ehon */
.cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; } /* 紀伊國屋書店 */
.cstmreba .booklink-link2 .shoplinkebj a:hover { color:#f8485e; } /* ebookjapan */
.cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a:hover,
.cstmreba .booklink-link2 .shoplinkamazon a:hover {
	color:#FF9901; } /* Amazon */
.cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover,
.cstmreba .booklink-link2 .shoplinkrakuten a:hover {
	color: #bf0000; } /* 楽天 */
.cstmreba .kaerebalink-link1 .shoplinkseven a:hover,
.cstmreba .booklink-link2 .shoplinkseven a:hover {
	color:#225496;} /* 7net */
/***** ボタンデザイン　マウスオーバー時ここまで *****/
.cstmreba .booklink-footer {
	clear:both;
}

/*****  解像度768px以下のスタイル *****/
@media screen and (max-width:768px){
	.cstmreba .booklink-image,
	.cstmreba .kaerebalink-image,
	.cstmreba .tomarebalink-image {
		width:100%;
		float:none;
	}
	.cstmreba .booklink-link2>div,
	.cstmreba .kaerebalink-link1>div,
	.cstmreba .tomarebalink-link1>div {
		width: 32.33%;
		margin: 0.5%;
	}
	.cstmreba .booklink-info,
	.cstmreba .kaerebalink-info,
	.cstmreba .tomarebalink-info {
	  text-align:center;
	  padding-bottom: 1px;
	}
}

/*****  解像度480px以下のスタイル *****/
@media screen and (max-width:480px){
	.cstmreba .booklink-link2>div,
	.cstmreba .kaerebalink-link1>div,
	.cstmreba .tomarebalink-link1>div {
		width: 49%;
		margin: 0.5%;
	}
}
/* カテゴリーカスタマイズ */
.widget_categories ul li a { /*親カテゴリ用のコード*/
	color: #333;
	text-decoration: none;
	padding: 6px 0;
	display: block;
	padding-right: 4px;
	padding-left: 4px;
	border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
	font-size: 16px;
}
.widget_categories ul li a::before { /*親カテゴリのアイコン*/
	font-family: FontAwesome;
	content: "\f0da";
	padding-right: 10px;
}
.widget_categories > ul > li > a:first-child { 
	border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_categories > ul > li > a:last-child {
	border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
}
.widget_categories ul li a .post-count { /*記事数用のコード*/
	display: block;
	float: right;
	background: #ededed;
	padding: 0 1em;
	font-size: 14px;
	margin-top: .2em;
	border-radius: 4px;
}
.widget_categories ul li a:hover { /*親子共通マウスホバー時*/
	background: none;
	transition: 0.5s;
	color: #50bbed;
}
.widget_categories ul li a:hover .post-count { /*記事数のマウスホバー時*/
	background: #50bbed;
	color: #fff;
	transition: 0.5s;
}
.widget_categories ul li ul { /*子カテゴリのボックス*/
	border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a { /*子カテゴリ用のコード*/
	color: #333;
	text-decoration: none;
	padding: 0 4px 4px 4px;
	display: block;
	border: none;
}
.widget_categories ul li ul li a::before { /*子カテゴリのアイコン*/
	font-family: FontAwesome;
	content: "・";
	padding: 0;
}
/* コメント */
.st-comment-content p{
	font-size: 14px;
	margin: 1em 0;
  line-height: 1.5em; /* コメント本文のサイズ・行間調整 */
}

.st-comment-meta .avatar{
	float: left !important;
	border-radius: 27.5px; /* アイコンを丸く切り抜く */
	margin-right: 0.5em;
}
.st-comment-meta::after{
	content: '';
	display: block;
	clear: left; /* アイコンの回り込み解除 */
}

.bypostauthor .avatar{
	float: left !important; /* 管理人のアイコンは右寄せ */
}

.comment-author{
	font-style: normal; /* 斜体の解除 */
}

.commets-list .children{
	margin-left: 10px;
	padding-left: 6px !important;
	border-left: 2px solid #eee; /* 入れ子コメントの左側に線を表示 */
} 

.commets-list .comment-body, .commets-list .st-comment-body{
	margin-bottom: .5em; /* コメントの間隔を狭める */
}
.fn {
	font-style:normal;
	font-size:14px;
}
.st-comment-meta{
	font-size:14px;
}
.st-comment-content {
	background: #e2e2e2;
	padding: 2px 10px;
	margin: 20px 0 6px 0;
	border-radius: 10px;
	position: relative;
}
.st-comment-content::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 50px;
	border-style: solid;
	border-color: transparent transparent #e2e2e2 transparent;
	border-width: 0 20px 20px 0;
}
.reply{
	margin:1em;
	font-size:14px;
}
/* 動画を中央表示する */
.video-container {
	margin: 0px auto;
}
/* タグクラウドカスタマイズ */
.tagcloud a {
	background: none; /*背景を消す*/
	border: 1px solid #ccc; 
	border-radius: 20px; /*角の丸み*/
	color: #555; /*文字色*/
	display: inline-block;
	padding: 3px 10px;
	text-decoration: none;
	font-size: 13px;
	margin: 2px;
	flex: 1 1 auto;
	display: flex;
	justify-content: space-between;
}
.tagcloud a:hover { /*マウスホバー時*/
	background: #50bbed;
	border: 1px solid #50bbed;
	color: #fff;
	transition: 0.5s; /*アニメーションの時間*/
}
/* プロフィールカスタマイズ */
/* リンクアイコンのデザインを丸くする */
.author-box .sns-follow .sns-follow-buttons a.follow-button {
	font-size: 26px;
	width: 36px;
	height: 36px;
	margin-bottom: 10px;
	margin-right: 10px;
	color: #fff;
	border: none;
	border-radius: 50%;
	box-shadow: 0 0 5px 0 rgba(0,0,0,.1),0 3px 5px 0 rgba(0,0,0,.2);
}

/* アイコンをセンタリングする */
.author-box .sns-follow-buttons a.follow-button span::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
}

/* リンクアイコンの背景色にSNSのブランドカラーを設定する */
.author-box .sns-follow-buttons a.twitter-button {
	background-color: #1da1f2 !important;
}

.author-box .sns-follow-buttons a.youtube-button {
	background-color: #FF0000 !important;
}

.author-box .sns-follow-buttons a.feedly-button {
	background-color: #6cc655 !important;
}

.author-box .sns-follow-buttons a.rss-button {
	background-color: #f26522 !important;
}
.author-box .sns-follow-buttons a.website-button {
	background-color: #000000 !important;
}
.author-box .author-content .author-name a{
	text-decoration: none;
	color:#50bbed;
}
/* ブログカードカスタマイズ */
.blogcard-wrap.external-blogcard-wrap.a-wrap.cf,
.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf { /*ブログカード装飾無し*/
	text-decoration: none!important;
	color:#000;
}
/************************************
****　記事本文　ブログカード
************************************/
.blogcard {
padding-bottom:.8%;
border: 0px solid whitesmoke;
border-radius:4px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf{
transition: all 200ms;
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf:hover{
background-color: #fafafa;
box-shadow:none;
transform: none;
}
.blogcard-footer {
padding-top: 2%;
}
.blogcard:before {
display:none;
}
.internal-blogcard::after,
.external-blogcard::after{
content: "続きを読む ≫"; 
position: absolute;
bottom: 0.7em;
right: 1em;
font-size: 0.7em;
background-color: #50bbed;/*続きを読むの背景色変更はこちら*/
padding: .4em 3em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}
.blogcard-content{
max-height: none;
}
.blogcard-date{
display:none;
}
.blogcard-title {
font-size:1em;
padding:.2em .2em 0;
line-height:1.4em;
text-align: justify;
}
.blogcard-snippet {
padding:0em .5em;
color:#7b7b7b;
text-align: justify;
}
@media screen and (max-width: 1023px){
.blogcard-title {
padding:.3em .3em 0em .2em;
line-height:1.5em;
}
.blogcard-snippet {
font-size:.9em;
margin-top:.3em;
}
}
@media screen and (max-width: 960px){
.blogcard-title {
padding:.3em .3em .2em .2em;
line-height:1.5em;
}
.blogcard-snippet{
font-size:.8em;
max-height:15em;
}
}
@media screen and (max-width: 834px){
.blogcard-title {
font-size:1.1em;
padding:.2em .3em .5em .2em;
}
.blogcard-snippet {
font-size:.9em;
}
}
@media screen and (max-width: 740px){
.blogcard-title {
padding:.3em;
}
}
@media screen and (max-width: 673px){
.blogcard-title {
padding:.3em .5em 1em .2em;
line-height:1.8em;
}
.blogcard-snippet {
display:none;
}
}
@media screen and (max-width: 480px){
.blogcard {
padding-bottom: 2%;
}
.blogcard-title {
padding:.1em .4em 0em .1em;
line-height:1.5em;
}
.blogcard-footer {
padding-top: 5%;
}
}
@media screen and (max-width: 410px){
.blogcard-domain{
max-width: 11em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}}
@media screen and (max-width: 375px){
.blogcard-domain{
max-width: 9em;
}}
/* h4を吹き出しにする */
.post h4 {
	position: relative;
	color: #ffffff;
	background: #000000;
	font-size: 16pt ;
	border: 5px solid #0a0a0a;
	margin: 1.75em 2px;
	padding: 10px 5px 10px 10px;
	border-radius: 3px;
	box-shadow:1px 1px 5px 0px  #666666 ;
}
.post h4:after, .post h4:before {
	content: "";
	position: absolute;
	top: 100%;
	height: 0;
	width: 0;
}
.post h4:after {
	left: 40px;
	border: 10px solid transparent;
	border-top: 10px solid #000000;
}
.post h4:before {
	left: 35px; 
	border: 15px solid transparent;
	border-top: 15px solid #0a0a0a;
}
.entry-content a{
	text-decoration:none;
}
.entry-content a:hover{
	color:#efacc8;
	text-decoration:underline;
}
.btn a:hover{
		text-decoration:none;
		color:#fff;
}
.wp-block-cocoon-blocks-button-1 a:hover{
	text-decoration:none;
	color:#fff;
}
/* 目次 */
.toc {
    border: 1px solid #50bbed; /*全体の枠線の色*/
    font-size: 0.9em;
    line-height: 1.5;
    padding: 0;
    margin-bottom: 1em;
    display: block; /*横幅いっぱいに広げる*/
}
.toc-title {
    background: #50bbed; /*目次タイトルの背景色*/
    color: #fff; /*目次タイトルの文字色*/
    font-size: 1.1em;
    text-align: center;
    padding: 6px 16px;
}
.toc-title::before {
    font-family: FontAwesome;
    content: '\f0ca'; /*目次タイトルのアイコン*/
    margin-right: 0.5em;
}
.toc-content {
    padding: 8px;
}
.toc{
 width:90%;
}
/* h2見出しの前 */
.toc-list>li>a::before {
font-family: "FontAwesome";
content: "\f1b0";/* Font Awesomeで変更可能 */
font-weight: 900;
padding-right: 5px;
color:#000 ;/* アイコンの色 */
}
/* arcive */
#sidebar select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  border: 1px solid #333; /* ボーダーの指定 */
  border-radius: 40px; /* 角丸の指定 */
  padding: 6px 14px; /* 余白の指定 */
  font-size: 14px; /* 文字サイズ */
  color: #333; /* 文字色 */
}
#sidebar select::-ms-expand {
  display: none;
}
#sidebar .widget_archive {
  position: relative;
}
#sidebar .widget_archive::after {
  font-family: FontAwesome;
  content: '\f0d7'; /* アイコンの指定 */
  position: absolute;
  bottom: 0px; /* アイコンの位置 */
  right: 12px; /* アイコンの位置 */
  color: #333; /* アイコンの色 */
}
/* 検索窓 */
.sidebar .search-box, .search-menu-content .search-box {
  width: 100%;
  margin: 1em 0 2em;
  position: relative;
  display: flex;
  border-radius: 50px; /*全体を囲むボックスの角丸*/
  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; /*ボーダーを消す*/
  border-radius: 50px 0 0 50px; /*左上、左下のみ角丸*/
  font-size: 16px;
}
.search-submit {
  width: 20%; /*ボタン部分の長さ*/
  background: #444d53; /*ボタン部分の背景色*/
  color: #fff; /*アイコンの色*/
  position: static;
  right: auto;
  top: auto;
  font-size: 20px; /*アイコンの大きさ*/
  cursor: pointer;
  line-height: 40px; /*検索窓の高さ*/
  border: none;
  border-radius: 0 50px 50px 0; /*右上、右下のみ角丸*/
  padding: 0;
}
.search-box input::placeholder {
  color: #bbb; /*プレースホルダーの色*/
}
.search-box input:focus, .search-box button:focus {
  outline: 0; /*フォーカス時の枠線を消す*/
}