@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=M+PLUS+1p:800";
/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.7
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 色の指定 */
/* ヘッダーの色 */
/* top画像の指定 */
#main_visual { text-align: center; height: 89vh; background: url(/img/background2.jpg) center/cover; }
#main_visual .wrapsvg { width: 1200px; margin: 0 auto; padding-top: 94px; animation-delay: 2s; }

/* svgTopアニメ */
.animetion { fill: none; stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: DASH 4s ease-in 1s forwards; -webkit-animation: DASH 4s ease-in 1s forwards; }

@keyframes DASH { 0% { stroke-dashoffset: 3000; fill: rgba(0, 0, 0, 0); }
  50% { stroke-dashoffset: 2000; fill: rgba(0, 0, 0, 0.2); }
  70% { stroke-dashoffset: 1000; fill: rgba(0, 0, 0, 0.4); }
  100% { stroke-dashoffset: 0; fill: black; } }
@-webkit-keyframes DASH { 0% { stroke-dashoffset: 3000; fill: rgba(0, 0, 0, 0); }
  50% { stroke-dashoffset: 2000; fill: rgba(0, 0, 0, 0.2); }
  70% { stroke-dashoffset: 1000; fill: rgba(0, 0, 0, 0.4); }
  100% { stroke-dashoffset: 0; fill: black; } }
/* トップの縦を合わせる div#header-container, .header-container-in.hlt-top-menu { max-height: 20vh; height: 20vh;
} */
.headtext01, .headtext02, .headtext03 { font-family: 'M PLUS 1p', sans-serif; padding: 0px 8px; align-items: center; justify-content: center; text-align: center; color: #fbf6ec; animation-name: textin; animation-fill-mode: backwards; }

.svgImg { animation-duration: 4s; }

.headtext01 { animation-duration: 7s; animation-delay: 550ms; animation-iteration-count: 1; font-size: 6vw; text-shadow: 2px 2px 1px #4d615c, -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black; }

.headtext02 { animation-duration: 11s; animation-delay: 550ms; animation-iteration-count: 1; text-shadow: 1px 1px 1px #403f3f; font-family: serif; font-size: 25px; }

.headtext03 { animation-duration: 15s; animation-delay: 550ms; animation-iteration-count: 1; text-shadow: 1px 1px 1px #403f3f; font-family: serif; font-size: 25px; }

@keyframes textin { from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); } }
/* ヘッダーナビの色 */
#navi .navi-in a { color: #ffffff; background: #07c0e1; border-left: 1px solid #2b353e; box-sizing: border-box; }

#navi .navi-in a:hover { background: rgba(7, 192, 225, 0.47); }

/*特定ページのシェア・フォローボタン非表示*/
.page-id-1090 .sns-share, .page-id-1090 .sns-follow { display: none; }

/* ローディング画面 */
/* がたつきを防ぐ */
body { overflow-y: scroll; }

#loader-bg { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #fff; z-index: 2; }
#loader-bg #loader { position: fixed; top: 46%; left: 60%; width: 300px; margin-left: -150px; text-align: center; color: #17607d; z-index: 3; }

/* 
======================= Circle Preloader
=======================
*/
.second-wrapper { background-color: #fff; }

.circle-loader { position: relative; }

.circle { border-radius: 50% 50% 50% 50%; position: absolute; border-top: 2px solid rgba(107, 207, 253, 0.7); border-bottom: 2px solid transparent; border-left: 2px solid #6bcffd; border-right: 2px solid transparent; animation: animate 2s infinite; }

.circle_one { left: 75px; top: 0; width: 50px; height: 50px; }

.circle_two { left: 65px; top: -10px; width: 70px; height: 70px; animation-delay: 0.2s; }

.circle_three { left: 55px; top: -20px; width: 90px; height: 90px; animation-delay: 0.4s; }

.circle_four { left: 45px; top: -30px; width: 110px; height: 110px; animation-delay: 0.6s; }

@keyframes animate { 50% { transform: rotate(360deg) scale(0.8); } }
/* dl dt dd */
.article .dl-section dt { font-weight: 700; }
.article .dl-section dd { margin-left: 1em; }
.article .dl-section dl dl { display: flex; margin: 0em 1em; }
.article .dl-section dl dl dt:after { content: '：'; color: gray; }
.article .dl-section dl dl dd { margin-left: 0; }

.dl-section dl dl dt:after { content: '：'; color: gray; }

/* トップへ戻る */
div#go-to-top { bottom: 100px; /* 画面下から100pxの位置に変更 */ }

.go-to-top-button { background-color: rgba(210, 210, 210, 0.2588235294); /* 半透明に変更 */ font-size: 36px; }

/* Docker コード */
#post-1500 h4 { margin: 0; font-size: 12px; border: none; font-weight: normal; background: rgba(243, 244, 245, 0.75); border-radius: 2px; display: inline; }
#post-1500 pre { margin-top: 0; }

/* 見出しの指定 */
.article h2, .article h3 { font-weight: inherit; position: relative; padding-bottom: 0.4em; }
.article h2::after, .article h3::after { position: absolute; content: " "; display: block; left: 0; }
.article h2::first-letter, .article h3::first-letter { font-size: 1.4em; color: #000000; }
.article h2 { font-size: 22px; background: none; border-bottom: #ccc 3px solid; }
.article h2::after { border-bottom: solid 3px #e4ff00; bottom: -3px; width: 20%; }
.article h3 { font-size: 20px; border-left: none; border-right: none; border-top: none; }
.article h3::after { border-bottom: solid 1px #e4ff00; bottom: -1px; width: 10%; }

/* アイキャッチの大きさ */
.eye-catch-wrap { margin-left: -30px; margin-right: -30px; }

.eye-catch img { object-fit: cover; height: 284px; width: 100vw; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px) { /*必要ならばここにコードを書く*/
  #main_visual .wrapsvg { width: auto; margin: 0 36px; } }
/*1030px以下*/
@media screen and (max-width: 1030px) { /*必要ならばここにコードを書く*/ }
@media screen and (max-width: 834px) { /*必要ならばここにコードを書く*/
  /* アイキャッチの大きさ */
  .eye-catch-wrap { margin-left: -16px; margin-right: -16px; }
  /* スマホメニュー */
  .slicknav_menu { float: right; background: #2b353e; }
  .slicknav_menu .slicknav_btn { background-color: inherit; }
  .slicknav_menu .slicknav_menutxt { display: none; }
  .slicknav_menu .slicknav_icon-bar { background-color: #07c0e1; }
  .slicknav_menu .slicknav_nav a { text-decoration: none; }
  .slicknav_menu .slicknav_nav a:hover { border-radius: 2px; background: #f9f7f7; }
  .header-container-in.hlt-top-menu.hlt-tm-small .site-name-text-link { padding: 10px 0; } }
/*768px以下*/
@media screen and (max-width: 768px) { /*必要ならばここにコードを書く*/
  svg#sori { width: 100%; height: auto; } }
/*480px以下*/
@media screen and (max-width: 480px) { /*必要ならばここにコードを書く*/
  /* アイキャッチ */
  .eye-catch img { object-fit: cover; height: 160px; }
  /* Topの高さ */
  #main_visual { height: 94vh; }
  .article h2, .article h3 { padding: 0.6em 0; } }
@media screen and (min-width: 481px) { /*必要ならばここにコードを書く*/
  .entry-content p { padding: 1em 4em; } }
/*1030px以上*/
@media screen and (min-width: 1030px) { /*必要ならばここにコードを書く*/
  .headtext01 { font-size: 60px; } }