@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
*/

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

body {
    font-family: 'Josefin Sans', -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	
	font-feature-settings: "palt";
    letter-spacing: 3.52px;
}
.ff-yu-gothic {
    font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
}
b, strong, .bold{
	font-family: 'Josefin Sans', -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;
}

.container {
	padding:0;
}

/*******************************************************************************
**  ヘッダー
*******************************************************************************/

#header-container {
  align-items: center;
  background-color: transparent;
  display: flex;
  justify-content: center;
  height: 7.5em;
}

/* グローバルメニュー */

#navi {
  background-color: transparent;
}

/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after {
  background: #ededed;/*線の色*/
  bottom: 1px;/*線の位置*/
  content: "";/*文字はなし*/
  height: 1px;/*線の高さ*/
  left: 0px;/*線の位置*/
  position: absolute;/*線の位置を絶対配置に*/
  transform: scale(0, 1);/*マウスオーバーの前は線を消す*/
  transition: 0.3s;/*線が0→100%になるまでの秒数*/
  width: 100%;/*幅いっぱいに線を引く*/
}
#navi .navi-in a:hover {
  background-color: transparent;
}
#navi .navi-in a:hover:after {
  transform: scale(1);/*マウスオーバー後、線を100%出す*/
}
/*選択中のカテゴリーにアンダーライン*/
.body.not(.front-top-page) #navi .navi-in .current-menu-item:after {
  position: absolute;
  content: "";
  left: 0px;
  bottom: 1px;
  height: 1.5px;
  width: 100%;
  background: #1e1e1e;
}

/* フロントページ */

.front-top-page .header-container, .front-top-page .navi {
  background-color: transparent;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.front-top-page #navi .navi-in a {
  color: #ededed;
  font-size: 13px;
}

.front-top-page .logo {
  background: url("https://yururitolabo.online/wp-content/uploads/2022/11/header_logo-top-only.png") no-repeat;
  background-size: contain;
  background-position: center;
}

.front-top-page .site-logo-image {
  visibility: hidden;
}

/*******************************************************************************
**  インデックス
*******************************************************************************/

/* カテゴリーラベルを非表示 */
.cat-label {
  display: none;
}

/*******************************************************************************
**  投稿
*******************************************************************************/

.eye-catch {
  margin: 2em 0;
}
.entry-content {
  margin: 4em 0;
}

/*関連記事/次の記事/前の記事/ブログカード ホバー時に浮かす/影を付ける*/
.a-wrap {
  transition-duration: 0.6s;
}
.a-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
}

/* フロントページ */

/*z-indexが負の数値でもscrollボタンを押せるようにするための処置*/
.front-top-page .container {
	position: relative;
    z-index: 0;
}

.front-top-page .content {
  margin-top: 0;
}

.front-top-page .article-header {
  display: none;
}

/* カード */

.front-top-page .column-2 {
  gap: 50px;
}

.column-wrap>div {
  position: relative;
}

.front-top-page .title {
  font-size: 2em;
  line-height: 3;
  text-align: center;
}

.front-top-page .card-large-image .a-wrap {
  max-width: 100%;
}

/* 見出し */

.stripe-marker {
  background-image: repeating-linear-gradient(-45deg, #fff035 0, #fff035 2px, transparent 2px, transparent 4px);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
}

/* ボタン */

.front-top-page .button-block {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/*******************************************************************************
**  ボタン
*******************************************************************************/

div#go-to-top {
  bottom: 48px;
  right: 40px;
}

.go-to-top-button {
	width: 120px;
	height: auto;
	justify-content: right;
}
.go-to-top-button img:hover {
	opacity: 0.5;
}

.grecaptcha-badge { visibility: hidden; }/*reCAPTCHAの保護マーク*/
/*******************************************************************************
**  本文
*******************************************************************************/

/* 囲みボックス */

.title-box {
  border: solid 1px #9DB7BE;
  border-radius: 1px;
  margin: 0 0 4em;
  padding: 0.8em 2.5em 0.24em 2em;
  position: relative;
}

.title-box .title-box-title {
  background: #9DB7BE;
  color: #fff;
  display: inline-block;
  font-size: 13.6px;
  font-weight: 500;
  left: 12px;
  line-height: 1;
  padding: 8px 10px;
  position: absolute;
  top: -13px;
}

.title-box p {
  margin: 0;
  padding: 0;
}

.title-box ul {
  margin-bottom: 2em;
}

/*タブ見出しボックス*/

.tab-caption-box-label {
  border-radius: 4px 4px 0px 0px;
  font-size: 16px;
  font-weight: bold;
  padding: 6px 16px;
}

.tab-caption-box-content {
  border: 2px solid;
  border-radius: 4px;
  margin-top: 1px;
  padding: 48px 24px;
  position: relative;
}

/*マイクロバルーン*/

.micro-balloon {
  border-radius: 2px;
}

.micro-balloon::before, .micro-balloon::after {
  left: 10%;
  top: 100%;
}

.micro-balloon-content {
  display: inline-block;
  padding: 8px 20px;
}

/* 見出し */

.article h2 {
  background: #1e1e1e;
  border-top: 6px double #FFF;
  border-bottom: 6px double #FFF;
  color: #FFF;
  font-size: clamp(1.2em, 2vw, 1.4em);
  letter-spacing: .05em;
  line-height: 1.2;
  margin: 4em 0 2em;
  padding: 0.95em 1em 0.75em;
}
.article h3 {
  border: 0;
  border-bottom: solid 2px #EDECED;
  font-size: clamp(1.1em, 2vw, 1.3em);
  padding: 0.5em;
  position: relative;
}

.article h3:before {
  background: #1e1e1e;
  bottom: -2px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 29.3%;
}

/* macブラウザ  */
.mac-windowin {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

.mac-window {
  box-shadow: 0 12px 24px -2px rgb(0 0 0 / 25%);
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
  margin: 0 0.5rem;
  border: solid 6px #3c3c3c;
  border-top: none; 
}
.window__head {
  padding: 0.75rem 0.7rem 0.7rem 0.3em;
}
.window__head {
  background: #3c3c3c;
}
.window__body {
  display: block;
  width: 100%;
  height: auto;
}

.window__body video {
  display: block;
  width: 100%;
}

.buttons__wrap {
  display: flex;
}
.buttons__item {
  width: 9px;
  height: 9px;
  background: #2d3436;
  border-radius: 50%;
  margin-right: 6px;
}

.button_red {
  background: #EC6A5E;
}

.button_yellow {
  background: #F5BF51;
}

.button_blue {
  background: #61C555;
}

.mac-browser {
  margin: 0;
}

/* スマートフォン風スタイル  */
.is-style-smartphone {
  --frame-color:#ced1d5;
  --frame-width:6px;
  --smartphone-width:0;
  --border-rd:0;
  --camera-width:0;
  --camera-height:0
}

.-s-14pro {
  --frame-color:#3c3c3c
}

.-c-gray {
  --frame-color:#ced1d5
}

.-c-black {
  --frame-color:#3c3c3c
}

.is-style-smartphone {
  border:solid calc(var(--smartphone-width)* .015) var(--frame-color);
  width:fit-content;
  border-radius:calc(var(--border-rd) * .8);
  background:var(--frame-color);
  position:relative;
  box-shadow:0 12px 24px -2px rgb(0 0 0 / 25%);
  margin:0 auto 3em
}

.is-style-smartphone img, .is-style-smartphone video {
  box-shadow:0 2px 24px -2px rgb(0 0 0 / 25%);
  clip-path:inset(2px round calc(var(--border-rd) * .7))
}

.is-style-smartphone.-s-14pro {
  border-radius:var(--border-rd)
}

.is-style-smartphone.-s-14pro img,.is-style-smartphone.-s-14pro video {
  clip-path:inset(2px round calc(var(--border-rd) * .85))
}

.is-style-smartphone p {
  width:var(--camera-width);
  height:var(--camera-height);
  position:absolute;
  top:1.5px;left:calc(var(--smartphone-width) / 2);transform:translate(-50%,0);
  -webkit-transform:translate(-50%,0);
  background:var(--frame-color);
  mask-image:url(data:image/svg+xml;
  charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22b%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2020%22%3E%3Cg%20id%3D%22c%22%3E%3Cpath%20d%3D%22M85.26%2C20c4.02%2C0%2C10.58-3.46%2C10.58-12.76v-1.16C95.69%2C2%2C97.16%2C0%2C100%2C0H0c2.84%2C0%2C4.31%2C2%2C4.16%2C6.08v1.16c0%2C9.3%2C6.56%2C12.76%2C10.58%2C12.76H85.26Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
  -webkit-mask-image:url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22b%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2020%22%3E%3Cg%20id%3D%22c%22%3E%3Cpath%20d%3D%22M85.26%2C20c4.02%2C0%2C10.58-3.46%2C10.58-12.76v-1.16C95.69%2C2%2C97.16%2C0%2C100%2C0H0c2.84%2C0%2C4.31%2C2%2C4.16%2C6.08v1.16c0%2C9.3%2C6.56%2C12.76%2C10.58%2C12.76H85.26Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
  mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat
}

.is-style-smartphone.-s-14pro p {
  width:calc(var(--camera-width) * .8);
  top:calc(var(--border-rd) * .5);
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  border-radius:calc(var(--camera-width) / 3.4);
  mask-image:none;
  -webkit-mask-image:none
}


.is-style-smartphone.-no-camera p {
  display:none
}

.is-style-smartphone figure {
  margin-bottom:0 !important
}

.is-style-smartphone video {
  margin-bottom:calc(var(--smartphone-width)* -0.014)
}

@media(max-width:599px) {
  .is-style-smartphone video {
    margin-bottom:calc(var(--smartphone-width)* -0.035)
  }
}
video {
  object-fit: cover;
}

/*******************************************************************************
**  コメント欄(参考ブログ：https://jamijami.net/blogenv/wordpress-cocoon-comment-customize/)
*******************************************************************************/
.comment-notes { display: none; }
.comment-form .required { display: none; }

#reply-title { margin-bottom: 1em; }
#comment { margin-bottom: 1em; }
#author { margin-bottom: 1em; }
.comment-form .submit { margin-top: 5em; }

/*******************************************************************************
**  SNSシエア/フォロー
*******************************************************************************/

.sns-share-message {
  letter-spacing: .15em;
  margin-bottom: 0.75em;
}

.sns-share-buttons a .button-caption {
  display: none;
}

/*******************************************************************************
**  toggle
*******************************************************************************/

.toggle-checkbox:checked ~ .toggle-content {
  padding: 0;
  border: 0;
}


/*******************************************************************************
**  コード
*******************************************************************************/

/*ソースコードタグ*/

.entry-content pre {
  letter-spacing: .05em;
  line-height: 1.6;
  padding: 40px;
  position: relative;
}

.entry-content pre:before {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  right: 0;
  padding: 2px 8px;
  position: absolute;
  top: 0;
  background-color: black;
}

.entry-content pre.html::before {
  content: "HTML";
}

.entry-content pre.css::before {
  content: "CSS";
}

.entry-content pre.javascript::before {
  content: "JavaScript";
}

.entry-content pre.php::before {
  content: "PHP";
}

/*コメント*/
.hljs-comment {
	font-style: initial;
}


/*******************************************************************************
**  アピールエリア
*******************************************************************************/

.appeal {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  position: relative;
}

.appeal-content {
  background-color: transparent;
  padding: 0;
}

.appeal-message {
  color: #ededed;
  margin: 0;
}

/*ボタン*/

.appeal-button {
  background-color: transparent!important;
  color: #ededed;
  font-weight: normal;
  font-size: 0.75em;
  position: absolute;
  bottom: 2em;
  left: 50%;
  transform: translateX(-50%);
}

/* 矢印 */

.appeal-button:before {
  animation: move 2s infinite alternate ease-in-out;
  content: url(https://yururitolabo.online/wp-content/uploads/2022/11/arrows-button5.png);
  display: block;
}
@keyframes move {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}
/*スムーズにスクロール*/
html {scroll-behavior: smooth;}

/*******************************************************************************
**  トップページ本文アニメーション
*******************************************************************************/
.play-container {
  display: flex;
  width: 100%;
  height: auto;
  font-family: serif;
  font-weight: bold;
}

.itemA .slide, .itemC .yo, .itemC .u, .itemC .ko, .itemC .so, .itemC .kigou {
  margin-bottom: initial;
  position: relative;
}

.chara, .itemB {
  visibility: hidden;
}
.ready {
  visibility: visible;
}

.itemA {
  width: 25%;
}
.slide {
  writing-mode: vertical-rl;/*縦書き*/
  text-orientation: upright;/*英数字も縦書き*/
  width: 90%;/*右寄せ*/
  font-size: 34px;
  transform-origin:right;/*transformさせる位置・場所*/
  opacity: 0;
}
.start_anime03 {
  animation: crash 1s linear forwards, fade .7s both;
}
@keyframes crash {
  from {
    transform:translate(-100%) scale(1);
  }
  50% {
    transform:translate(15%) scale(1);
  }
  65% {
    transform:translate(15%) scale(0.8,1.6);
  }
  80% {
    transform:translate(15%) scale(1);
  }
  to {
  transform:translate(15%) scaleX(1);
  }
}
@keyframes fade {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.itemB {
  display: flex;
  align-items: start;
  justify-content: center;
  width: 50%;
}
.start_anime01 {
  animation: shake 0.3s 9;
}
.start_anime02 {
  animation: crescendo 2.7s both;
}
@keyframes shake {
    0% {transform: translate(0px, 0px) rotateZ(0deg);}
    25% {transform: translate(3px, 3px) rotateZ(10deg);}
    50% {transform: translate(0px, 3px) rotateZ(0deg);}
    75% {transform: translate(3px, 0px) rotateZ(-10deg);}
    100% {transform: translate(0px, 0px) rotateZ(0deg);}
}
@keyframes crescendo {
  0% {transform:scale(0);}
  70% {transform:scale(1);}
  80% {transform:scale(1.5);}
  100% {transform:scale(1);}
}

.itemC {
  width: 25%;
}
.yo {
  font-size: 50px;
  transform: rotate(20deg);
  top: 0;
}
.u {
  font-size: 46px;
  padding-left: 10%;
  transform: rotate(-20deg);
  bottom: 20%;
}
.ko {
  font-size: 29px;
  padding-left: 30%; 
  transform: rotate(-10deg);
  bottom: 15%;
}
.so {
  font-size: 50px;
  padding-left: 50%;
  bottom: 10%;
}
.kigou {
  font-size: 56px;
  padding-left: 70%;
  transform: rotate(15deg);
  bottom: 20%;
}
.start_anime04 {
  animation: demo01 0.3s linear 0s 1;
}
@keyframes demo01 {
    0% {
        transform: scale(1.0, 1.0);
    }
    50% {
        transform: scale(1.5, 1.5);
    }
    100% {
        transform: scale(1.0, 1.0);
    }
}

/*******************************************************************************
**  モバイル
*******************************************************************************/

.mobile-header-menu-buttons {
  height: 86px;
}

.mobile-menu-buttons {
  align-items: center;
}

.mobile-menu-buttons>li {
  padding: 0;
}

.mobile-menu-buttons .menu-icon {
  line-height: 0;
}

.mobile-menu-buttons .menu-caption {
  display: none;
}

/* フロントページ */

.front-top-page .mblt-header-mobile-buttons {
  margin-top: 0;
}

.front-top-page .mobile-header-menu-buttons {
  background-color: transparent;
  box-shadow: none;
}

.front-top-page .menu-button {
  color: #ededed;
}

.front-top-page .logo-menu-button {
  background: url("https://yururitolabo.online/wp-content/uploads/2022/11/header_logo-top-only.png") no-repeat;
  background-position: center;
  background-size: auto 44px;
}


/*******************************************************************************
**  ウィジェット
*******************************************************************************/

.sidebar h3 {
  background: none;
  border-bottom: solid 1px #EDECED;
  font-size: 1em;
  letter-spacing: 2px;
  padding-bottom: .5em;
  position: relative;
}

.sidebar h3::after {
  background-color: #1e1e1e;
  bottom: -1px;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  width: 40%;
  z-index: 4;
}

/* 検索 */

.search-box .search-edit {
  background: #fff;/*入力部分の背景色*/
  border-radius: 0;
  font-size: 15px;
  outline: 0;
  padding: 14px 10px 9px;
  width: 85%;/*入力部分の長さ*/
}

.search-submit {
  background: #1e1e1e;
  color: #fff;/*アイコンの色*/
  cursor: pointer;
  font-size: 20px;/*アイコンの大きさ*/
  line-height: 40px;/*検索窓の高さ*/
  padding: 0;
  right: 1px;
  top: 0;
  width: 15%;/*ボタン部分の長さ*/
}

.search-box input::placeholder {
  color: #bbb;
}

/* カテゴリー */

.widget_categories ul li a, .widget_archive ul li a {
  border-bottom: solid 1px #EDECED;/*下線の太さ、種類、色*/
  letter-spacing: 2px;
}
.widget_categories ul li a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f07b";
  font-weight: 900;
  padding-right: 10px;
  pointer-events: none;
}
.widget_categories ul li a:hover {
  padding-left: 0.5em;
  transition: 0.5s;
}

/* 新着記事 */

.widget-entry-cards figure {
  width: 40%;
}
.new-entry-card-title {
  font-size: 16px;
  font-weight: bold;
}

/* 目次(スクロール追従) */
#toc-4 .toc-title {
	display: none;
}

/* タグ */
.tagcloud a {
    background: none;/*背景を消す*/
    border: 1px solid #ccc;
    font-size: 13px;
}
.tagcloud a .tag-caption::before {
    content: "#"; /*アイコンの変更*/
}
.tagcloud a:hover { /*マウスホバー時*/
    background: #1e1e1e;
    border: 1px solid #1e1e1e;
    color: #fff;
    transition: 0.5s; /*アニメーションの時間*/
}
.tag-caption .fa-tag {
    display: none;
}
.archive-title .fa-tags::before { 
  content: "#";
}

/*******************************************************************************
**  アピール効果
*******************************************************************************/

/*
Copyright (c) 2023 by Zed Dash 
Released under the MIT license
https://codepen.io/z-/pen/oPOVOL
*/
.draw {
  display: inline-block;
  position: relative;
  padding: 3px 20px;
  margin: 2px 0;
  font-size: 24px;
  color: transparent;
}

.draw.-small {
  display: inline-block;
  padding: 2px 10px;
  font-size: 16px;
}

.draw:before {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0%;
  right: 100%;
  background-color: black;
  content: "";
}

.draw.-do {
  animation: show 2.5s forwards;
}

.draw.-do:before {
  animation: intro 2.5s ease-in-out;
}

.draw.-wave:nth-child(1), .draw.-wave:nth-child(1)::before {
  animation-delay: 0.75s;
}

.draw.-wave:nth-child(2), .draw.-wave:nth-child(2)::before {
  animation-delay: 1s;
}

.draw.-wave:nth-child(3), .draw.-wave:nth-child(3)::before {
  animation-delay: 1.25s;
}

.draw.-wave:nth-child(4), .draw.-wave:nth-child(4)::before {
  animation-delay: 1.5s;
}

.draw.-wave:nth-child(5), .draw.-wave:nth-child(5)::before {
  animation-delay: 1.75s;
}

.draw.-wave:nth-child(6), .draw.-wave:nth-child(6)::before {
  animation-delay: 2s;
}

.draw.-wave:nth-child(7), .draw.-wave:nth-child(7)::before {
  animation-delay: 2.25s;
}

.draw.-wave:nth-child(8), .draw.-wave:nth-child(8)::before {
  animation-delay: 2.5s;
}

.draw[delay="0.1"], .draw[delay="0.1"]::before {
  animation-delay: 0.6s;
}

.draw[delay="0.2"], .draw[delay="0.2"]::before {
  animation-delay: 0.7s;
}

.draw[delay="0.3"], .draw[delay="0.3"]::before {
  animation-delay: 0.8s;
}

.draw[delay="0.4"], .draw[delay="0.4"]::before {
  animation-delay: 0.9s;
}

.draw[delay="0.5"], .draw[delay="0.5"]::before {
  animation-delay: 1s;
}

.draw[delay="0.6"], .draw[delay="0.6"]::before {
  animation-delay: 1.1s;
}

.draw[delay="0.7"], .draw[delay="0.7"]::before {
  animation-delay: 1.2s;
}

.draw[delay="0.8"], .draw[delay="0.8"]::before {
  animation-delay: 1.3s;
}

.draw[delay="0.9"], .draw[delay="0.9"]::before {
  animation-delay: 1.4s;
}

.draw[delay="1"], .draw[delay="1"]::before {
  animation-delay: 1.5s;
}

.draw[delay="1.1"], .draw[delay="1.1"]::before {
  animation-delay: 1.6s;
}

.draw[delay="1.2"], .draw[delay="1.2"]::before {
  animation-delay: 1.7s;
}

.draw[delay="1.3"], .draw[delay="1.3"]::before {
  animation-delay: 1.8s;
}

.draw[delay="1.4"], .draw[delay="1.4"]::before {
  animation-delay: 1.9s;
}

.draw[delay="1.5"], .draw[delay="1.5"]::before {
  animation-delay: 2s;
}

.draw[delay="1.6"], .draw[delay="1.6"]::before {
  animation-delay: 2.1s;
}

.draw[delay="1.7"], .draw[delay="1.7"]::before {
  animation-delay: 2.2s;
}

.draw[delay="1.8"], .draw[delay="1.8"]::before {
  animation-delay: 2.3s;
}

.draw[delay="1.9"], .draw[delay="1.9"]::before {
  animation-delay: 2.4s;
}

.draw[delay="2"], .draw[delay="2"]::before {
  animation-delay: 2.5s;
}

.draw[delay="2.1"], .draw[delay="2.1"]::before {
  animation-delay: 2.6s;
}

.draw[delay="2.2"], .draw[delay="2.2"]::before {
  animation-delay: 2.7s;
}

.draw[delay="2.3"], .draw[delay="2.3"]::before {
  animation-delay: 2.8s;
}

.draw[delay="2.4"], .draw[delay="2.4"]::before {
  animation-delay: 2.9s;
}

.draw[delay="2.5"], .draw[delay="2.5"]::before {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.draw[delay="2.6"], .draw[delay="2.6"]::before {
  animation-delay: 3.1s;
}

.draw[delay="2.7"], .draw[delay="2.7"]::before {
  animation-delay: 3.2s;
}

.draw[delay="2.8"], .draw[delay="2.8"]::before {
  animation-delay: 3.3s;
}

.draw[delay="2.9"], .draw[delay="2.9"]::before {
  animation-delay: 3.4s;
}

.draw[delay="3"], .draw[delay="3"]::before {
  animation-delay: 3.5s;
}

@keyframes intro {
  0% {
    left: 0%;
    right: 100%;
  }
  50% {
    left: 0%;
    right: 0%;
  }
  100% {
    left: 100%;
    right: 0%;
  }
}

@keyframes show {
  0%, 50% {
    color: transparent;
  }
  50.00001%, 100% {
    color: #ededed;
  }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  #header-container {
    height: 40px;
  }
  .mblt-header-mobile-buttons {
    margin-top: 0;
  }
  .appeal {
    height: 100vh;
    background-image: url("https://yururitolabo.online/wp-content/uploads/2022/10/appeal-mobile7.png");
  }
}

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

/*540px以下*/
@media screen and (max-width: 540px){
  /*必要ならばここにコードを書く*/
	.article h2 {
        font-size: 1.2em;
		font-weight: 600;
	}
	.article h3 {
		font-size: 1.1em;
	}
	
	.appeal-content {
        margin-top: 1em;
    }
	
	.slide {
      font-size: 20px;
      width: 75%;
    }
	.yo {
      font-size: 30px;
      top: 0;
    }
	.u {
      font-size: 16px;
      padding-left: 10%;
      bottom: 15%;
    }
	.ko {
      font-size: 29px;
      padding-left: 20%;
      bottom: 15%;
    }
	.so {
      font-size: 30px;
      padding-left: 40%;
	  bottom: 12%;
    }
	.kigou {
      font-size: 31px;
      padding-left: 60%;
      bottom: 16%;
    }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.appeal-content {
        margin-top: -3em!important;/*下の.appeal-buttonは効いているのになぜこちらは効かない…*/
    }
    .appeal-button {
        bottom:  10em;
    }
}
@media screen and (max-width: 480px){/*なのにこちらでは効く謎*/
.appeal-content {
    margin-top: -3em;
}
}