@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

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

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

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

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

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

/*写真枠*/
.photo_waku{
	border: solid 1px #cccccc;
}

/*図の枠*/
.waku{
	padding: 10px;
	border: solid 2px #a69425;
	border-radius: 10px;
	}

/*ランキング*/
.rank_title{
	line-height: 50px;	
	margin-bottom: 10px;
	padding-left: 50px;
	font-size: 23px;
	font-weight: bold;	
	background-repeat: no-repeat;
}

.rank1{	
	background-image: url("https://sakuramotchi.com/wp-content/uploads/2020/09/rank1.png");
}

.rank2{
	background-image: url("https://sakuramotchi.com/wp-content/uploads/2020/09/rank2.png");
}

.rank3{
	background-image: url("https://sakuramotchi.com/wp-content/uploads/2020/09/rank3.png");
}

.rank4{
	background-image: url("https://sakuramotchi.com/wp-content/uploads/2020/09/rank4.png");
}

.rank5{
	background-image: url("https://sakuramotchi.com/wp-content/uploads/2020/09/rank5.png");
}

.rank6{
	background-image: url("https://sakuramotchi.com/wp-content/uploads/2020/09/rank6.png");
}

.rank7{
	background-image: url("https://sakuramotchi.com/wp-content/uploads/2020/09/rank7.png");
}

.rank8{
	background-image: url("https://sakuramotchi.com/wp-content/uploads/2020/09/rank8.png");
}

.rank9{
	background-image: url("https://sakuramotchi.com/wp-content/uploads/2020/09/rank9.png");
}

.rank10{
	background-image: url("https://sakuramotchi.com/wp-content/uploads/2020/09/rank10.png");
}

.rank_honbun{
	font-size: 15px;
}

/*ボタン*/
.button{
	background-color: #20b2aa;
	font-size: 15px;
	color: #ffffff;
	border-radius: 8px;
	margin: 0px;
	padding: 7px;
}

.arrow{
	margin: 0px 0px 0px 40px;
	padding: 0px;
}

/*タグクラウドカスタマイズ*/
.xilitidytagscloud {
  display: flex;
  flex-wrap: wrap;
}
.xilitidytagscloud a {
  border: 1px solid #eee;
  border-radius: 2px;
  color: #555;
  padding: 3px 8px;
  text-decoration: none;
  font-size: 12px;
  margin: 2px;
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  transition: all 0.3s ease-in-out;
}
.xilitidytagscloud a:hover {
  background-color: #f5f8fa;
  transition: all 0.3s ease-in-out;
  color: #333;
}
.xilitidytagscloud a .tag-caption {
  word-break: break-all;
}
.xilitidytagscloud a .tag-link-count {
  margin-left: 8px;
}

/*
 * Cocoon風タブボックス *
 ***********************/
/* タイトル */
.box-title {
	position: absolute;
	top: -1.9em;
	left: -1px;
	font-size: 1em;
	font-weight: bold; 
	display: inline-block;
	padding: 0.2em 1em 0;
	border-radius: 5px 5px 0 0;
	color: #fff;
}
/* BOX */
.title-box {
	position: relative;
	border-radius: 0 5px 5px;
	padding: 1.5em 1em 0.5em;
	margin: 2.5em 0 2em;
	box-shadow: 2px 3px 3px #ddd;
}
/* スマホ以外481px以上 */
@media screen and (min-width: 481px) {
	.title-box {
		margin: 3em 1em 2em; /* 上 左右 下 */
	}
}

/* gray */
.title-gray {
	color: #fff;
	background: #969696;
}
.box-gray {
	border: #ddd 2px solid;
}
/* pink */
.title-pink {
	color: #fff;
	background: #eda0b1;
}
.box-pink {
	border: #ffcbde 2px solid;
}
/* blue */
.title-blue {
	color: #fff;
	background: #83a8eb;
}
.box-blue {
	border: #a0a8ff 2px solid;
}
/* green */
.title-green {
	color: #fff;
	background: #9be2a5;
}
.box-green {
	border: #9dd9a0 2px solid;
}
/* brown */
.title-brown {
	color: #fff;
	background: #d8a967;
}
.box-brown {
	border: #efb072 2px solid;
}

/* ここまでCocoon風 */