@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
*/
header,footer{display:none;}
#main {
 padding:0;
 margin:0 auto;
 max-width:700px;
}

/*固定フッター*/
.btn-footer {
    bottom: 0;
    left: 0;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 10;
}

/*第1~3話のボタン*/
.story-numbers {
 width:calc(100% - 20px);
 margin: 0 10px 10px;
 display:flex;
}
.story-number {
display:inline-block;
width:calc((100% - 10px) / 3);
margin:0 5px 0 0;
}
.story-number:nth-child(3) {
 margin-right:0;
}

/*画像：左右にmargin合計20px*/
.img-margin20px {
 width: calc(100% - 20px);
 margin: 0 10px 0;
}

/*本文：左右にmargin*/
.content-margin {
 width: calc(100% - 50px);
 margin: 0 25px 0;
 font-size: 1.0rem;
}

/*h3見出し*/
.article h3 {
 border-left: 8px solid #BE9BF4;
 border-right: none;
 border-top: none;
 border-bottom: none;
 font-size: 1.4rem;
 padding: 0.4em 1em;
    background-color: #ddd;
    background: linear-gradient(to right,#BE9BF4 50%,#fff 100%);
}

/*CTAボタン*/

a.btn--green {
 width:calc(100% - 20px);
 display: inline-block;
 margin: 0 10px 0;
  color: #fff;
  background-color: #1ABE49;
}

a.btn--green:active {
  color: #fff;
  background: #00a349;
}

a.btn--green.btn--cubic {
  border-bottom: 5px solid #00662d;
}

a.btn--green.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #00662d;
}

a.btn-c {
  font-size: 1.3rem;
  position: relative;
  padding: 1rem 1.5rem 1rem 1.5rem;
}

a.btn-c i.fa {
  margin-right: 1rem;
}


/*youtube動画埋め込み*/
.youtube-iframe-container {
 width: calc(100% - 20px);
 margin: 0 10px 0;
}
.youtube-iframe {
width: 100%;
}

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

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

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

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