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

/*アラビア語修正用*/
.arabic-text {
  direction: rtl;
  unicode-bidi: embed;
}


/************************************
** コピーボタン レクタングル
************************************/
.copy-box{
	padding:0.3em;/* ボタンサイズ調整 */
    width: 90%;
    margin:0 auto;
	font-size: 20px;
	text-align: center;
}
.copy-box p:first-child{
    margin-top:0;
}
.copy-box p:last-child{
    margin-bottom:0;
    padding-bottom:0;
}
.copy-box ul{
    border:none;
    margin:0;
    padding:0;
}
.copy-box ul li{
    margin-left:20px; /* 左に隙間があく場合は消してください */
}
.btn-copy {
    display: block;
    margin: 1em auto 2em;
    width: 90%;/* ボタンサイズ調整 */
	height: 25px;/* ボタンサイズ調整 */
    padding: 0.5em 0.3em;
    text-decoration: none;
    background: #888; /* ボタン背景色 */
    color: #fff;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing:1px;
    line-height: 1;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn-copy:hover {
    color:#fff;
}
.btn-copy:before {
    left: -100%;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    content: "OK!";
}
.btn-copy .btn-copy-text {
    display: inline-block;
    -webkit-transition: all 0.3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.3s;
}
.btn-copy-active{
    background:#FFAE00;/* ボタンクリック時 背景色 */
}
.btn-copy-active:before {
    left: 0;
}
.btn-copy-active .btn-copy-text {
    -webkit-transform: translateX(1000%);
    -moz-transform: translateX(1000%);
    -ms-transform: translateX(1000%);
    transform: translateX(1000%);
}
/************************************
** コピーボタン2 レクタングル
************************************/
.copy2-box{
	padding:0.3em;/* ボタンサイズ調整 */
    width: 90%;
    margin:0 auto;
	font-size: 20px;
	text-align: center;
}
.copy2-box p:first-child{
    margin-top:0;
}
.copy2-box p:last-child{
    margin-bottom:0;
    padding-bottom:0;
}
.copy2-box ul{
    border:none;
    margin:0;
    padding:0;
}
.copy2-box ul li{
    margin-left:20px; /* 左に隙間があく場合は消してください */
}
.btn2-copy {
    display: block;
    margin: 1em auto 2em;
    width: 100px;/* ボタンサイズ調整 */
	height: 30px;/* ボタンサイズ調整 */
    padding: 0.5em 0.3em;
    text-decoration: none;
    background: #888; /* ボタン背景色 */
    color: #fff;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing:1px;
    line-height: 1.5;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn2-copy:hover {
    color:#fff;
}
.btn2-copy:before {
    left: -100%;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    content: "OK!";
}
.btn2-copy .btn2-copy-text {
    display: inline-block;
    -webkit-transition: all 0.3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.3s;
}
.btn2-copy-active{
    background:#FFAE00;/* ボタンクリック時 背景色 */
}
.btn2-copy-active:before {
    left: 0;
}
.btn2-copy-active .btn2-copy-text {
    -webkit-transform: translateX(1000%);
    -moz-transform: translateX(1000%);
    -ms-transform: translateX(1000%);
    transform: translateX(1000%);
}


/*見出しリセット*/

.article h2::before {
border-top: none;
}
.article h2::after {
border-bottom: none;
}
.article h2{
border: none;
}
.article h3::before {
border-top: none;
}
.article h3::after {
border-bottom: none;
}
.article h3{
border: none;
}
.article h4::before {
border-top: none;
}
.article h4::after {
border-bottom: none;
}
.article h4{
border: none;
}
.article h5::before {
border-top: none;
}
.article h5::after {
border-bottom: none;
}
.article h5{
border: none;
}
.article h6::before {
border-top: none;
}
.article h6::after {
border-bottom: none;
}
.article h6{
border: none;
}

/*見出し設定*/

.article h2 {
  color: #494949;/*文字色*/
  background-color: #ffffff;
  border-bottom: solid 6px #f2d722;/*（実線 太さ 色）*/
  font-size: 1.5em;
  margin-bottom: 20px !important;
}

.article h3 {
  color: #494949;/*文字色*/
  background-color: #ffffff;
  border-bottom: solid 3px #f2d722;/*（実線 太さ 色）*/
  font-size: 1.3em;
  margin-bottom: 20px;
}

.article h4  {
     position: relative;
	padding-left: 20px;
     font-size: 1.3em;
  margin-bottom: 20px;
}
 
.article h4::after {
     position: absolute;
     top: 50%;
     left:0;
     transform:translateY(-50%);
     content: '';
     width: 10px;
     height: 10px;
     background-color: #f2d722;
}

.article h5 {
  /*線の種類（点線）2px 線色*/
  border-bottom: solid 2px #6594e0;
}

.article h6 {
  /*線の種類（点線）2px 線色*/
  border-bottom: solid 2px #6594e0;
}


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

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

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