@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; }
}

/* リスト余白 10 */

ul.m-bottom li {
margin-bottom: 20px;
}
ol.m-bottom li {
margin-bottom: 20px;
}

ul.mm-bottom li {
margin-bottom: 40px;
}
ol.mm-bottom li {
margin-bottom: 40px;
}

ul.mmm-bottom li {
margin-bottom: 60px;
}
ol.mmm-bottom li {
margin-bottom: 60px;
}

/* テーブル余白 10 */

.tablesp10 td,
.tablesp10 tr {
  padding: 10px;
}

/* テーブル余白 15 */

.tablesp15 td,
.tablesp15 tr {
  padding: 15px;
}

/* テーブル余白 20 */

.tablesp20 td,
.tablesp20 tr {
  padding: 20px;
}

/* テーブル余白 30 */

.tablesp30 td,
.tablesp30 tr {
  padding: 30px;
}


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


 /*----- AdSense広告フォント -----*/
.ad-label {
font-size: 0.7em;
color: #888;
}


/* テーブル枠線なし */

.delline td,
.delline tr {
  border: none;
  padding: 15px;
}

/* テーブル余白 10 */

.tablesp10 td,
.tablesp10 tr {
  padding: 10px;
}

/* テーブル余白 15 */

.tablesp15 td,
.tablesp15 tr {
  padding: 15px;
}

/* テーブル余白 20 */

.tablesp20 td,
.tablesp20 tr {
  padding: 20px;
}

/************************************
** カードスタイル
************************************/
.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;
}

/* 高さに合わせてリサイズ、はみ出た分をトリミング */
.trim {
  width: 280px;  /* トリミングしたい幅 */
  height: 200px;  /* トリミングしたい高さ */
  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;
}

/*見出しリセット*/

.article h2,
.article h3,
.article h4,
.article h5,
.article h6{ /*見出し初期化*/
padding: 0;
margin: 0;
font-size: medium;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}

/*見出し設定*/

.article h2 {
  padding: 0.4em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background-color: #ffffff;
  border-bottom: solid 6px #f2d722;/*（実線 太さ 色）*/
  font-size: 1.4em;
  margin-bottom : 30px;
}

.article h3 {
  padding: 0.4em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background-color: #ffffff;
  border-bottom: solid 3px #f2d722;/*（実線 太さ 色）*/
  font-size: 1.4em;
  margin-bottom : 30px;
}

.article h4  {
     position: relative;
  padding: 0.5em;/*文字周りの余白*/
	padding-left: 20px;
     font-size: 1.4em;
     margin-bottom : 30px;
}
 
.article h4::after {
     position: absolute;
     top: 50%;
     left:0;
     transform:translateY(-50%);
     content: '';
     width: 10px;
     height: 10px;
     background-color: #f2d722;
}

.article h5 {
  padding: 0.5em 0em 0.5em 1.0em;/*文字周りの余白*/
  /*線の種類（点線）2px 線色*/
  border-bottom: solid 2px #6594e0;
  font-size: 1.3em;
  margin-bottom : 30px;
}

.article h6 {
  padding: 0.5em 0em 0.5em 1.0em;/*文字周りの余白*/
  /*線の種類（点線）2px 線色*/
  border-bottom: solid 2px #6594e0;
  font-size: 1.3em;
  margin-bottom : 30px;
}

/* 見出しリセット */
/* 見出し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: #4169e1;/*背景色*/
  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;
}

/************************************
** カウントテーブル
************************************/
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 {  }
		table.basic tbody tr td:nth-of-type(3) { }
		table.basic tbody tr:nth-child(2n) { background-color: #f5f5f5; }
		table.basic tbody tr:hover { background-color: #ffff80; }


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}