@charset "UTF-8";

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

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

/** 広告のCLS 改善
 * 目的：アンカー広告のレイアウトシフトを改善するためのCSS
 * */

.ad-auto .ad-wrap, .ad-area .ad-wrap{
    min-height:280px;
}
@media screen and (max-width: 480px){
    .ad-auto .ad-wrap, .ad-area .ad-wrap{
        min-height:calc(83vw);
    }
}



/* パソコンで見たときは"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; }
}



/************************************
** カードスタイル
************************************/
.card {
    padding:1px;
    border:solid 1.5px #cccccc;
    border-radius:4px;
    margin-top:30px;
    margin-bottom:30px;
　　text-align: center;
　　width:60%; min-width:150px; max-width:600px;
	box-shadow:1px 1px 5px #ccc;
}

.text_card {
   padding-left: 15px;
}

.text_card2 {
	position: relative;
	top: 48%;
	text-align: center !important;
	}
.text_card3 {
	position: relative;
	top: 48%;
	text-align: center !important;
	}



.card2 {
    padding:1px;
    border:solid 1.5px #cccccc;
    border-radius:4px;
    margin-bottom:30px;
　　text-align: center;
	vertical-align: middle !important;
	width: 280px;
height: 200px;
	box-shadow:1px 1px 5px #ccc;
}




#cardlist li {
	text-align: center;
position: relative;
float: left;
margin: 0 20px 20px 0;
width: 280px;
height: 200px;
list-style: none;
cursor: pointer;
}
.omote {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(1000) rotateY(0deg);
-moz-transform:perspective(1000px) rotateY(0deg);
transform:perspective(1000px) rotateY(0deg);
-webkit-transition:ease-out 0.5s -webkit-transform;
-moz-transition:ease-out 0.5s -moz-transform;
transition:ease-out 0.5s transform;
}
.ura {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(1000) rotateY(90deg);
-moz-transform:perspective(1000px) rotateY(90deg);
transform:perspective(1000px) rotateY(90deg);
-webkit-transition:ease-out 0.5s -webkit-transform;
-moz-transition:ease-out 0.5s -moz-transform;
transition:ease-out 0.5s transform;
}



/*一部の投稿IDで非表示 ID７１の場合*/
.page-id-214 .entry-title {
    display: none;
}
.postid-214 .entry-title {
    display: none;
}



/************************************
** カードスタイル　写真用
************************************/
.card_a {
    padding:1px;
    border:solid 1.5px #cccccc;
    border-radius:4px;
    margin-top:30px;
    margin-bottom:30px;
　　text-align: center;
　　width:60%; min-width:150px; max-width:600px;
	box-shadow:1px 1px 5px #ccc;
}

/* 高さに合わせてリサイズ、はみ出た分をトリミング https://www.tam-tam.co.jp/tipsnote/html_css/post10099.html */
.trim {
  width: 275px;  /* トリミングしたい幅 */
  height: 195px;  /* トリミングしたい高さ */
  overflow: hidden;
  position: relative;
}
.trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}



.text_card_a {
   padding-left: 5px;
}

.text_card2_a {
	position: relative;
	top: 48%;
	text-align: center !important;
	}
.text_card3_a {
	position: relative;
	top: 48%;
	text-align: center !important;
        font-size: 22px;
        font-weight: bold;
	}



.card2_a {
    padding:1px;
    border:solid 1.5px #cccccc;
    border-radius:4px;
    margin-bottom:3px;
　　text-align: center;
	vertical-align: middle !important;
	width: 280px;
height: 200px;
	box-shadow:1px 1px 5px #ccc;
}




#cardlist_a li {
	text-align: center;
position: relative;
float: left;
margin: 20px 20px 20px 0;
width: 280px;
height: 200px;
list-style: none;
cursor: pointer;
}
.omote_a {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(1000) rotateY(0deg);
-moz-transform:perspective(1000px) rotateY(0deg);
transform:perspective(1000px) rotateY(0deg);
-webkit-transition:ease-out 0.5s -webkit-transform;
-moz-transition:ease-out 0.5s -moz-transform;
transition:ease-out 0.5s transform;
}
.ura_a {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(1000) rotateY(90deg);
-moz-transform:perspective(1000px) rotateY(90deg);
transform:perspective(1000px) rotateY(90deg);
-webkit-transition:ease-out 0.5s -webkit-transform;
-moz-transition:ease-out 0.5s -moz-transform;
transition:ease-out 0.5s transform;
}



/*一部の投稿IDで非表示 ID７１の場合*/
.page-id-214 .entry-title {
    display: none;
}
.postid-214 .entry-title {
    display: none;
}





/************************************
** カウントテーブル
************************************/
div.tables {
			counter-reset: ranking;
		}

		table.basic tbody th:before {
			counter-increment: ranking;
			content: counter(ranking);
		}

		table.basic { border: 2px solid #cccccc; border-collapse: collapse; }
		table.basic thead th { border-width: 1px 1px 3px 1px; border-style: solid dotted double dotted; border-color: #cccccc; background-color: #666666; padding: 0.3em; }
		table.basic tbody th, table.basic tbody td { border-width: 1px; border-style: solid dotted; border-color: #cccccc; padding: 0.3em; }
		table.basic tbody tr td:last-child { font-size: smaller; }
		table.basic tbody tr td:nth-of-type(3) { color: blue; }
		table.basic tbody tr:nth-child(2n) { background-color: #f5f5f5; }
		table.basic tbody tr:hover { background-color: #ffff80; }

/* 見出しリセット */
/* 見出し1 */
.article h1{
background: none;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
padding: 0;
font-weight: bold;
}

/* -------見出しカスタマイズ------- */
/* 見出し1 オレンジ */
.article h1 {
  font-size: 26px !important;/*文字のサイズ*/
  background: #fcba03;/*背景色*/
  padding-top: 3em;
  padding-right: 1.5em;
  padding-bottom: 3em;
  padding-left: 1.5em;/*余白*/
  color: #FFF;
  margin-bottom: 15px;
  border-top: none;
  border-bottom: none;
}

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

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

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

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