body {
	background-color:lightcyan;
}
.title {
	font-size:60%;
	text-align: center;
	margin-top:50%;	
}
/* 説明文の幅を可変に */
#joukatu {
	margin-top: 5%;
	margin-bottom:0%;
	margin-left:8%;
	margin-right:8%;
	background-color:khaki;
	padding: 1rem 2rem;
 	border-bottom: 3px solid #dcdcdc;
	border-left: 5px solid #000;
	background: #f4f4f4;
 	border-radius: 3px;
 	box-shadow: 0 0 8px rgba(0,0,0,.4);
 	text-align:center;
 	font-size:150%;
 	font-weight: bold;
}
#nani { 
	position: relative;
    /*background: #fff0cd;*/
    box-shadow: 0px 0px 0px 5px #fff0cd;/*枠外側*/
    border: dashed 2px #ffffff;/*白い点*/
    padding: 0.2em 0.5em;
    /*color: #454545;*/
    /*width: 700px;*/
    font-size: 16px;
    height: auto;
    line-height:40px;
    text-align:center;
    background-color: #fff0cd;
    max-width:550px;
    margin-right:0px;
    margin-left:50px;
}
/*#nani:after {
			 position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}*/
strong {
		text-decoration:underline wavy tomato;
}
#nani p {
		margin: 0%;
		padding: 0%;
}
.marker-gradient {
  background: linear-gradient(transparent 60%, #fff799 60%);
}

	
#image {
	margin-left:30px;
    margin-right:0px;	
	/*width: 500px;
	height; 300px;*/
	/*transform: translateX(0px);*/
}
.hitokoto {
	z-index: 10;
	position: relative;
	display: inline-block;
	height: auto;
	/*color: #000000;*/
	font-size: 16px;
	/*background: #e0edff;*/
	margin-top: 150px;
	transform: translateY(50px);
	flex: 1;
	max-width:320px;
	margin-left:0px;/**/
    margin-right:100px;
}
.hitokoto:before {
	content: "";
	position: absolute;
	top: 40px;	
	left: -30px;
	margin-top: -15px;
	border: 15px solid transparent;
	border-right: 15px solid #e0edff;
}

.hitokoto p {
	width: 110%;/*枠の固定してる部分*/
	margin: 0%;
	padding: 10px;
	font-size: 16px;
	background: #e0edff;
}
.seito {
		text-align:center;
}
#annan p {
		display: flex;
}
#annan2 p {
		display:flex;
}
.waku {
  margin: 1em 0;
  padding: 3em;
  background-color: #b3e5fc;
}

.waku p{
  margin: 15;
  padding: 0;
}

/* 画像と吹き出しの調整 */
.sentence img {
  /*max-width: 100%*/
  width: 350px;　/* 猫サイズ */
  transform: translateY(130px);/* 猫の高さ */
  /*height: auto;*/
}

/* 横並びの基本 */
.sentence {
  display: flex;
  justify-content: center;
  gap: 20px;
    margin-top:50px; /* パディングからマージンに変更 */
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
}

/* PCではスマホ用画像を非表示 */
.character {
    display: none;
}


/* 画面が 770px 以下になったらスマホレイアウトへ変更 */
@media screen and (max-width: 1200px) {

    /* スマホ画像を表示 */
    .character {
        display: block;
        width: 35%;   /* 左側に入れるので少し小さめ */
        height: auto;
       
    }

  .sentence {
    flex-direction: column; /* ←縦並びに変更 */
    align-items: center;
    margin-top:0px;/* パディングからマージンに変更 */
    margin-left:0px;
    margin-right:0px;
    margin-bottom:0px;
  }

  #nani {
    margin-left: 0;
  }

  .hitokoto {
    height: auto;
    margin-left: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    width: 60%;
    font-size: 16px; /* 読みやすいサイズ */
    line-height: 1.5em;
    display: inline-block;
    transform: translateY(30px);
  }

    #image {
    /*display: none;*/
  }
  .sentence img {
  /* width:200px*/
  transform: translateY(0px);
}
.hitokoto:before {
  content: "";
  position: absolute;
  top: -14px;
  left: 47%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #e0edff;
}

}

video.douga1 {
		width:90%;
		/*height:40%;*/
		max-width:520px;
		/*border:50px;*/
		/*position: absolute;
		left:12%;
		top:55%;*/
}

video.douga2 {
		margin-bottom:100px;
		background:#e0edff;/*動画の背景*/
		padding:10px;
		width:110%;
		/*height:40%;*/
		max-width:520px;
		/*border:50px;*/
		/*position: absolute;
		left:12%;
		top:55%;*/
}
.midashi {
  position: relative;
  padding: 1rem .5rem;
  font-size: 40px;
  display: inline-block; /* アニメーションを適用するために必要 */
  left: 30.5%;
}

.midashi::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%; /* 初期状態では幅を0に */
  height: 6px;
  content: '';
  border-radius: 3px;
  background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd));
  background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%);
  background-image: linear-gradient(to left, #2af598 0%, #009efd 100%);
  transition: width 1s ease-out; /* アニメーションの設定 */
}

/* ページ読み込み時にアニメーションを適用 */
.midashi.loaded::after {
  width: 100%; /* アニメーション後、幅が100%に */
}