.clearfix:after {
	content: " ";
	display: block;
	clear: both;
}



/*.box{
    background-color:#F6F2FC;
    margin-bottom:0.3em;
    padding:0.2em;
    border:2px dotted #513677;
}*/

.box {
  position: relative;
  background: #FDEAEF;
  border-left:4px dotted rgba(0,0,0,.1);
  border-right:4px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 1em;
  color: #65513f;
  margin:2em 0 1em;
}
.masking-tape{
  position: absolute;
  top: -1em;
  left: 26%;
  width:25%;
  height:30px;
  background-image: linear-gradient(-45deg, rgba(227,155,140,.4) 25%, transparent 25%, transparent 50%, rgba(227,155,140,.4) 50%, rgba(227,155,140,.4) 75%, transparent 75%, transparent 100%);
  background-size: 20px 20px;
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 0.25em 2em;
  color: #65513f;
  transform: rotate(-4deg); 
}
.box p {
  color: #65513f;
  padding: 10px;
}




.pic_box{/*キャラ画像を囲む要素*/
	padding:3px;
	text-align:center;
}
.pic_box>img{ /*画像本体 縦横比を保ったまま，最大1000pxで表示させる*/
	width:auto;
	max-width:80%;
	max-height:650px;
	margin:0 auto;
}

.left{
    width:70%;
    float:left;
}
.right{
    width:30%;
    float:left;
}
.right-menu{
    width:80%;
    padding:0 2em;
    margin:0 auto;
}

/*吹き出しCSS*/
.balloon2-top {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 1em;
	padding: 7px 10px;
	width:90%;
	font-size: 16px;
 	border: solid 3px;
 	box-sizing: border-box;
 	border-radius: 10px
}

.balloon2-top:before{
	content: "";
	position: absolute;
	top: -24px;
	left: 50%;
 	margin-left: -15px;
	border: 12px solid transparent;
	border-bottom: 12px solid ;
 	z-index: 2;
}

.balloon2-top:after{
	content: "";
	position: absolute;
	top: -30px;
	left: 50%;
 	margin-left: -17px;
	border: 14px solid transparent;
	border-bottom: 14px solid;
 	z-index: 1;
}

.balloon2-top p {
	margin: 0;
	padding: 0;
}

.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 1em;
  padding: 7px 10px;
  width:90%;
  font-size: 16px;
  border: solid 3px;
  box-sizing: border-box;
  border-radius: 10px
}

.balloon2:before{
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid;
  z-index: 2;
}

.balloon2:after{
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid;
  z-index: 1;
}

.balloon2 p {
	margin: 0;
	padding: 0;
}
.form{
    text-align:center;
    margin-bottom:1em;
}

.btn{
    display: inline-block;
    padding: 0.3em 1em;
    margin: 0.5em 0 0 0.5em;
    text-decoration: none;
    color: #fff;
    background:#AEA4DB;
    border-radius: 3px;
}

.character-btn{
    display: inline-block;
    padding: 0.3em 5em;
    text-decoration: none;
    color: #fff;
    background:#FC3B7B;
    border-radius: 10px;
    margin:1em auto;
    text-align:center;
}

.text{
    border:1px solid #DED3ED;
}


.conversation_box{
	width:100%;
	margin:5px;
	padding:5px;
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	justify-content: left;
}
.conversation_box>div>input{
	width:100%;
}


.window_save{
    background: var(--balloon_color);
    border:1px solid var(--border_color);
    color: var(--text_color);
}
.window_save>a{
    display:block;
}
.window_save>a>i{
    display:inline;
    padding-top:10px;
}
.window_save>a>span{
    font-size:0.9em;
    padding-top:5px;
    padding-bottom:5px;
}

/* ギャラリーCSS */
	.lightbox-overlay {
  /* 初期状態では非表示 */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s; /* フェードイン・アウトのアニメーション */

  /* オーバーレイの基本スタイル */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* 半透明の背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* :target擬似クラスで表示状態を切り替える */
.lightbox-overlay:target {
  visibility: visible;
  opacity: 1;
}

.lightbox-content {
  max-width: 90%;
  max-height: 90%;
  overflow: auto; /* 画像がはみ出す場合にスクロール */
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transform: scale(0.8); /* ポップアップ時の初期サイズ */
  transition: transform 0.3s ease-out;
}

.lightbox-overlay:target .lightbox-content {
  transform: scale(1); /* ポップアップ時に元のサイズに */
}

.lightbox-content img {
  display: block; /* 余白をなくす */
  max-width: 100%;
  height: auto;
}

.lightbox-close {
  position: absolute;
  top: 15px;
  right: 25px;
  color: #b18cfe;
  font-size: 40px;
  text-decoration: none;
  line-height: 1;
  z-index: 1001; /* 画像より手前に表示 */
}

.lightbox-close:hover {
  color: #ccc;
  transition:0.5s all;
}

/* オーバーレイクリックで閉じるための設定 (HTMLのa href="#_") */
.lightbox-overlay .lightbox-close-area { /* オーバーレイ全体をクリックで閉じるための要素を別途用意する場合 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

/* CSSは上記の基本サンプルに加えて以下を追加・変更 */
.lightbox-caption {
  color: #333;
  text-align: center;
  margin-top: 10px;
  font-size: 0.9em;
}

.gallery a{
    display:inline-block;
}

.gallery img{
    width:200px;
    height:200px;
    object-fit: cover;
    margin:0.5em;
    box-shadow: 5px 5px 5px lightgray;
}

.gallery img:hover{
  transform:scale(1.2,1.2);
  transition:1s all;
}

/* ギャラリーCSSここまで */


/* カルーセルCSS */

/* ----------------------*
 * コンテナー
 * ----------------------*/
.item{
    inline:block;
}
.carouselbox {
  --item-width: 480px;
  --item-height: 700px;
  width: var(--item-width);
  position: relative;
  margin:0 auto 40px ;
  /* 各パーツ配置をグリッドでレイアウト */
  display: grid;
  grid-template-areas: "item item item" "left markers right";
  grid-template-columns: 1fr 2fr 1fr;
  row-gap: 16px;
}

/* ----------------------*
 * カルーセル
 * ----------------------*/
.carousel {
  width: 100%;
  display: grid;
  /* アイテムを横並びにする */
  grid-auto-flow: column;
  grid-area: item;
  /* 次のスライドとの間隔 */
  gap: 120px;
  overflow-x: auto;
  /* X方向にスナップ */
  scroll-snap-type: x mandatory;
  /* 1度に1枚ずつ移動 */
  scroll-snap-stop: always;
  /* スムーズにスクロールさせる */
  scroll-behavior: smooth;
  /* インジケーターの表示 */
  scroll-marker-group: after;
  /* スクロールバー非表示 */
  scrollbar-width: none;


  /* 前へ・次へボタン */
  &::scroll-button(*) {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: #fff;
    padding: 0;
    color: #b18cfe;
    border: 1px solid #b18cfe;
    transition: background-color 0.2s, color 0.2s;
  }

  /* ホバー時スタイル */
  @media (any-hover: hover) {
    &::scroll-button(*):not(:disabled):hover {
      background-color: #b18cfe;
      color: #fff;
      cursor: pointer;
    }
  }


  /* 非活性時スタイル */
  &::scroll-button(*):disabled {
    color: darkgray;
    border: 1px solid lightgray;
  }

  /* 前へボタン */
  &::scroll-button(left) {
    /* コンテンツ / 代替テキスト */
    content: "◀" / "前へ";
    grid-area: left;
    justify-self: end;
  }

  /* 次へボタン */
  &::scroll-button(right) {
    /* コンテンツ / 代替テキスト */
    content: "▶" / "次へ";
    grid-area: right;
  }

  /* インジケーター（コンテナー） */
  &::scroll-marker-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    grid-area: markers;
    align-items: center;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
}

/* ----------------------*
 * カルーセルの画像アイテム
 * ----------------------*/
.item {
  width: var(--item-width);
  min-width: var(--item-width);
  height: var(--item-height);
  scroll-snap-align: center;


  /* インジケーター */
  &::scroll-marker {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: lightgray;
    border-radius: 50%;
    transition: background-color 0.2s;
    flex-shrink: 0;
  }

  /* インジケーターのカレントスタイル */
  &::scroll-marker:target-current {
    background-color: #b18cfe;
  }

  img {
    display: block;
    width: auto;
    height: 700px;
    object-fit: cover;
  }
}


@media (width > 600px) {
  .message {
    display:none;
  }
}


/* カルーセルCSSここまで */