@charset "UTF-8";

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

/*メモ帳*/
/*サイトのテーマの色ffcce2*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
** プロフィール-サイドバー
************************************/
/*自分用メモ：
.sidebarなどのもろもろのコマンドは親テーマのほうに記述されていると思われるので、それをここでcssでいい感じに編集すればいいと思います。
例えば下のは.sidebarとwidget_author_boxとふたつを同時にcssで指定しているということになっている。
サイドバーをカスタムしたいときには.sidebarを最初につけるひつようがある
あと場合によっては.mainとかそういうやつね、忘れないように。
*/

.sidebar .widget_author_box {
  /*author boxのデザイン*/
  /*プロフィールの枠線とか不要なので消しました*/
  background: #fff;
  /*padding-top: 1.2em;*/
/*  border-radius: 3px 3px 0 0;*/
  max-width: 360px;
  margin: 0 auto;
/*  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);*/
}
.sidebar .author-box {
  /*paddingは上、右、下、左の順番
  3つ指定すると、上、左右、下の順番*/
  padding: 120px 0 0;
  border: none;
  position: relative;
  margin: 0 0 0;
  margin-bottom: -40px;
  max-width: 100%;
  overflow:hidden;
}
.sidebar .author-content {
  /*background: -webkit-linear-gradient(0deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  background: linear-gradient(90deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);

  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
*/
  color: #fff;
  padding: 20px;
  width:110%;
  margin-left:-5% !important;
}
.sidebar .author-box .author-name a {
  color: #757575;/*名前の表示色*/
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 18px;
}
.sidebar .author-box .author-description {
  /*author-descriptionの色*/
  color: #000000;
  padding: 45px 25px 50px;
  text-align: justify;
  text-justify: inter-ideograph;
  position: relative;
  top: 55px;
}
/*pはたぐ、author-box内の<p></p>の領域に命令を出している(たぶん)*/
.sidebar .author-box p {
  line-height: 1.8;
  font-size: 14px;
}
.sidebar .author-box .author-thumb {
/*これは画像サイズですが、これを変更した場合にはしたauthor-nameの位置も変更してください*/
  width: 240px;
  margin: 0 auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.sidebar .author-box .author-name {
  font-size: 1.1em;
  font-weight: bold;
  position: absolute;
  margin-bottom: 0.4em;
  top: 210px;
  bottom: 0;
  right: 0;
  left: 0;
}
/*
.sidebar .author-box .author-widget-name {
  position: absolute;
  top: 3px;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 0.7em;
  color: #bbb;
}
*/


/*******************/
/*サイドバーの見出し*/
/*******************/

.sidebar h3{
  background: none;
  border-bottom: solid;
  border-color: #ffcce2;
  border-width: 2px;
}


/*****************/
/*検索ボタンを変更*/
/*****************/

.sidebar .search-edit{
  border: none;
  border-bottom: 2px solid #ffcce2;
}

.sidebar .search-submit {
  font-size:18px;
  color: #ffcce2;
}


/******************************************/
/*記事一覧(indexリスト)のところをカスタマイズ*/
/******************************************/

/*記事ごとにピンクの線で囲った*/
.main .entry-card-wrap{
border-color: #ffcce2;
}

/******************************************/
/*20240927記事内で.entry-card-wrapを使う時用*/
/******************************************/

.entry-card-wrap {
  border: 1px solid #ffcce2;
}

/*********/
/*フッター*/
/*********/

/*デフォで入ってるフッターの縦線を消した。*/
#navi-footer li{
  border: none;
}



/*****************************/
/*snsシェアボタンのデザイン変更*/
/*****************************/


.main .sns-buttons a{
  color:#ffffff;
  background-color:#ffcce2;
}







/*********/
/*ヘッダー*/
/*********/
/*logoはロゴの範囲、site-name-textはテキストを指定する要素であることに注意。*/
/*ヘッダーロゴのフォント*/
.header .logo{
 font-family: 'aquafont';
}
/*ヘッダーロゴのフォントサイズ指定*/
.header .site-name-text{
  font-size: 120px;
  /*color:#000000;*/
  color:#ffffff;
  text-shadow: 3px 3px 3.5px #000000;
  /*
  text-shadow:1px 1px 0 #000000, -1px -1px 0 #000000,
             -1px 1px 0 #000000, 1px -1px 0 #000000,
             0px 1px 0 #000000,  0-1px 0 #000000,
             -1px 0 0 #000000, 1px 0 0 #000000;
             */
}



/*ヘッダーのロゴに、マウスを載せた時に線を表示するようなカスタム
参考(https://saruwakakun.com/html-css/reference/border-length)
あと下の線がにゅっと出る感じにするのは参考(https://www.nxworld.net/tips/css-hover-underline-animation-examples-and-sass-mixin.html)
ただし、ipad以下のサイズではオフにしてあります。
*/

.header .site-name-text{
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.header .site-name-text::after {
  position: absolute;
  bottom: 30px;
  left: 0;
  content: '';
  width: 100%;
  height: 5px;
  /*下線の色*/
  background: #ffffff;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}

.header .site-name-text:hover::after {
  transform: scale(1, 1);
}

@media screen and (max-width: 834px){
.header .site-name-text:hover::after {
  transform: scale(0, 0);
}
}
/*@media screen and (min-width: 480px)というのは、メディアのサイズ(つまり画面のサイズ)が480px以下だったら以下の命令を適応するという意味。スマホ版と設定を変えたいときにはこれを使えばいい
いまはスマホ版では線を引きたくないので、これを使うことにした。*/



/*ヘッダーサイズの微調整。paddingでやれば、ロゴを中央においたまま、ヘッダーのサイズを変えられます。*/
.logo-header {
  padding: 80px 0 140px;
}
#header {
  height: 380px;
}

@media screen and (max-width: 1800px){
  .logo-header {
    padding: 50px 0 30px;
  }
  #header {
    height: 355px;
  }
}



@media screen and (max-width: 1700px){
  .logo-header {
    padding: 30px 0 30px;
  }
  #header {
    height: 340px;
  }
}

@media screen and (max-width: 1500px){
  .logo-header {
    padding: 30px 0 30px;
  }
  #header {
    height: 300px;
  }
}

@media screen and (max-width: 1300px){
  .logo-header {
    padding: 30px 0 30px;
  }
  #header {
    height: 260px;
  }
  #header .site-name-text{
    font-size: 100px;
    }
}

@media screen and (max-width: 1200px){
  .logo-header {
    padding: 30px 0 30px;
  }
  #header {
    height: 240px;
  }
  #header .site-name-text{
    font-size: 100px;
    }
}

@media screen and (max-width: 1100px){
  .logo-header {
    padding: 30px 0 30px;
  }
  #header {
    height: 220px;
  }
  #header .site-name-text{
    font-size: 90px;
    }
}

@media screen and (max-width: 1000px){
  .logo-header {
    padding: 30px 0 30px;
  }
  #header {
    height: 210px;
  }
  #header .site-name-text{
    font-size: 80px;
    }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .logo-header {
    padding: 30px 0 30px;
  }
  #header .site-name-text{
font-size: 56px;
}
#header {
  height: 170px;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  .logo-header {
    padding: 30px 0 40px;
  }
  #header .site-name-text{
font-size: 40px;
}
#header {
  height: 130px;
}
}







/*****************/
/*コメントの見出し*/
/*****************/

.comment-title{
  font-size:12pt;
  padding: 0.2em 0.3em 0.2em;
  margin-top: 40px;
  border-bottom: 3px solid #ffcce2;
}



/***************/
/*コメント入力蘭*/
/***************/

.comment-btn {
  margin: 0 auto;  /*これは中央揃えのために必要なコマンド*/
  width: 200pt;
  font-size: 12pt;
  background-color: #ffcce2;
  color:#ffffff;
  border: none;
  border-bottom: 2px;
  transition: 0.5s;
}

.comment-btn:hover{
  font-size: 12pt;
  background-color: #ffffff;/*ホバーすると指定色よりも少し濃いピンクに変化する*/
  color:#ffcce2;
  border: 2px solid #ffcce2;
  transition: 0.5s;
}



/**********************/
/*記事の見出しのカスタム*/
/**********************/

/*参考(https://web-ashibi.net/archives/1899)*/
/*ここから*/
.article h2 {
    padding: 0;
    background: none;
}
.article h3 {
    border: none;
    padding: 0;
}
.article h4 {
    border: none;
    padding: 0;
}
.article h5 {
    border: none;
    padding: 0;
}
.article h6 {
    border: none;
    padding: 0;
}
/*ここまでは親テーマの記述リセットのため*/

/*以下で見出しのデザインを選択します。ただしここで変えても過去記事のデザインは変わりません。かわるのは新しく投稿する記事のデザインになります*/
.article h2 {
/* color: #757575;*/
  padding: 1em 0 1em;
  margin-top: 40px;
  border-top: 3px solid #ffcce2;
  border-bottom: 3px solid #ffcce2;
}
.article h3 {
/*    color: #757575;*/
    padding: 0.2em 0.3em 0.2em;
    margin-top: 40px;
    border-left: 3px solid #ffcce2;
}
/*必要なら以下のh4以下も編集するといいと思います。*/
/*
.article h4 {
    color: #444d53;
    padding: .2em 1em;
    margin-top: 40px;
    border-bottom: 6px solid #444d53;
}

.article h5 {
    color: #444d53;
    margin-top: 40px;
    border-bottom: solid 2px #444d53;
}

.article h6 {
    color: #444d53;
    margin-top: 40px;
    border-bottom: solid 1px #444d53;
}
*/


/*タイトル(h1)のデザイン*/
/*ちなみにh1はブログタイトルのタグにも使われているので、.articleを付けないとそっちにまで影響を及ぼす。*/
.article h1{
  border-bottom: solid 3px #ffcce2;
  padding: 0 0 0.4em;
}






/*****/
/*目次*/
/*****/

/*cocoonが自動で生成してくれる目次のデザイン*/
.article .toc{
  border: 1px solid #ffcce2;/*枠線をピンクに*/
}


/****************/
/*カテゴリーボタン*/
/****************/
.cat-link {
 background-color: #ffffff;
 color: #757575;
}

.cat-link:hover {
 background-color: #ffffff;
 color: #ffcce2;
}



/*****************************/
/*インスタグラムのフォローボタン*/
/*****************************/
/*参考(https://saruwakakun.com/html-css/reference/instagram)*/


.insta_btn2{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 20px;/*高さ*/
  width: 150px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 15px;/*文字のサイズ*/
  line-height: 20px;/*高さと合わせる*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション?*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn2:before{/*グラデーション?*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn2 .fa-instagram{/*アイコン*/
  font-size: 20px;/*アイコンサイズ*/
  position: relative;
  top: 0;/*アイコン位置の微調整*/
}

.insta_btn2 span {/*テキスト*/
  top: -0.2em;/*テキスト位置の微調整*/
  display:inline-block;
  position: relative;
  transition: .5s
}

.insta_btn2:hover span{/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}



/********************/
/*読書メーターのボタン*/
/********************/
.bookmeter_btn{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 4px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 20px;/*高さ*/
  width: 140px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 15px;/*文字のサイズ*/
  line-height: 20px;/*高さと合わせる*/
  background-color: #549800;
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.bookmeter_btn .icon2-signal_cellular_alt {/*アイコン*/
  font-size: 20px;/*アイコンサイズ*/
  position: relative;
  top: 0;/*アイコン位置の微調整*/
}

.bookmeter_btn span {/*テキスト*/
  top: -0.2em;/*テキスト位置の微調整*/
  position: relative;
}


/********************/
/*twitterのボタン*/
/********************/
.twitter_btn{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 12px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 20px;/*高さ*/
  width: 220px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 12px;/*文字のサイズ*/
  line-height: 20px;/*高さと合わせる*/
  background-color: #1D9BF0;
  text-decoration:none;/*下線は消す*/
}

.twitter_btn .fa-twitter {/*アイコン*/
  font-size: 12px;/*アイコンサイズ*/
  position: relative;
  right: 2px;
}

.twitter_btn span {
  position: relative;
}

.twitter_btn:hover{
  color: #FFF;
  background-color: #0C7ABF;
}






/**********************/
/*icomoonのフォント追加*/
/**********************/
@font-face {
  font-family: 'icomoon3';
  src:  url('fonts/icomoon3.eot?trpzr4');
  src:  url('fonts/icomoon3.eot?trpzr4#iefix') format('embedded-opentype'),
    url('fonts/icomoon3.ttf?trpzr4') format('truetype'),
    url('fonts/icomoon3.woff?trpzr4') format('woff'),
    url('fonts/icomoon3.svg?trpzr4#icomoon3') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^="icon2-"], [class*=" icon2-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon3' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon2-signal_cellular_alt:before {
  content: "\e900";
}
.icon2-music:before {
  content: "\e911";
}
.icon2-connection:before {
  content: "\e91b";
}
.icon2-feed:before {
  content: "\e91d";
}
.icon2-twitter:before {
  content: "\ea96";
}
.icon2-youtube2:before {
  content: "\ea9e";
}
.icon2-dribbble:before {
  content: "\eaa7";
}
.icon2-appleinc:before {
  content: "\eabe";
}
.icon2-android:before {
  content: "\eac0";
}
.icon2-chrome:before {
  content: "\ead9";
}
.icon2-firefox:before {
  content: "\eada";
}
.icon2-IE:before {
  content: "\eadb";
}
.icon2-edge:before {
  content: "\eadc";
}
.icon2-safari:before {
  content: "\eadd";
}
.icon2-opera:before {
  content: "\eade";
}


/*aquafont*/
@font-face {
  font-family: "aquafont";
  src: url("fonts/aquafont.woff") format("woff"),
       url("fonts/aquafont.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "mikachanP";
  src: url("fonts/mikachanP.ttf") format("truetype");
  font-display: swap;
}










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

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

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