@charset "UTF-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Mrs+Saint+Delafield&family=Kiwi+Maru&display=swap');

@font-face
{
font-family: あいこん;
src: url("https://dl.dropboxusercontent.com/scl/fi/h0jukb9810ez8zcnx3z7s/CONDENSEicon.otf?rlkey=2yyydz10ctqt8c5fdl5gqbdsy&st=48xkpl8z")format("opentype");
}


@font-face
{
font-family: ほうせき;
src: url("https://dl.dropboxusercontent.com/scl/fi/1cwgcnxs31t8c9wjgby89/Diamonds.ttf?rlkey=8qd8s1t4yuvk94bdwbhmzzd4l&st=ckql7k72")format("TrueType");
}

@font-face
{
font-family: てれび;
src: url("https://dl.dropboxusercontent.com/scl/fi/9oy8zuuc2jj4ivdtcs64d/T.V..ttf?rlkey=4saozy6hms7hi7vbirujrzyll&st=sfqodm0i")format("TrueType");
}

/* ページ全体のスタイル */

* {
  font-family: "Kiwi Maru", sans-serif;
  font-size: 10px;
  border-style:none;
}


body {
  width: 100%;
  height: 100%;
  background-size: cover;              /* 背景を画面いっぱいに広げる */
  background-repeat: no-repeat;        /* 繰り返し防止 */
  background-attachment: fixed;        /* スクロールしても固定（好みで） */
  background-image: linear-gradient(155deg, #cfe0ff, #ffcfcf);
  font-family: "Kiwi Maru", sans-serif;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1.5em;
  letter-spacing: 0.1em;
  margin: 0;
  padding: 15px;
  box-sizing: border-box;
}
body a {
  color: #333333;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative; 
}

h1{
  /* 真ん中寄せ */
  text-align: center;
  width: 100%;
  /* フォント設定 */
  font-family: 'Mrs Saint Delafield', cursive;
  font-size: 4rem;
  font-weight: normal;
  color: #fdfdfd;

  /* うすぼんやり白いネオンエフェクト */
  text-shadow:
    0 0 10px #ffffff,      /* 内側の白い光 */
    0 0 20px #ffffff,      /* 広がる白い光 */
    0 0 30px rgba(255, 255, 255, 0.8), /* ぼんやりした白 */
    0 0 5px rgba(0, 0, 0, 0.05);       
}


/* flickerアニメーション */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      -0.2rem -0.2rem 1rem #fff,
      0.2rem 0.2rem 1rem #fff,
      0 0 2rem var(--neon-text-color),
      0 0 4rem var(--neon-text-color),
      0 0 6rem var(--neon-text-color),
      0 0 8rem var(--neon-text-color),
      0 0 10rem var(--neon-text-color);
    box-shadow:
      0 0 .5rem #fff,
      inset 0 0 .5rem #fff,
      0 0 2rem var(--neon-border-color),
      inset 0 0 2rem var(--neon-border-color),
      0 0 4rem var(--neon-border-color),
      inset 0 0 4rem var(--neon-border-color);        
  }
  20%, 24%, 55% {
    text-shadow: none;
    box-shadow: none;
  }
}


hr { border: none; }
a {text-decoration: none;}
b{font-weight:bold;}
.buruburu {
    display: inline-block;
    animation: hurueru .1s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

.darubox{
	border: 2px solid #FFFFFF;	/* 線の太さ・種類・色 */
    background-color: #FFFFFF;
    color: #333333;
	margin: 30px 20px;	/* 外側の余白 上下・左右 */
	padding: 15px 20px;	/* 内側の余白 上下・左右 */
	position: relative;
}
.darubox:before{
    font-family: "ほうせき";
	content: 'a';
	color: #ffffff;	/* 左上の花の色 */
	font-size: 40px;	/* 左上の花のサイズ */
	font-weight: bold; 
	position: absolute;
	top: -5px;
	left: -15px;
    text-shadow:
    0 0 5px #fff,          
    0 0 10px #00d2ff,      /* 内側の光 */
    0 0 20px #0078ff,     
    0 0 40px #0078ff;      
}
.darubox:after {
  font-family: "てれび";
  content: 'j';
  font-size: 50px;
  font-weight: bold; 
  position: absolute;
  bottom: -5px;
  right: -15px;
  color: #fff;
  text-shadow:
    0 0 5px #fff,          
    0 0 10px #00d2ff,      /* 内側の光 */
    0 0 20px #0078ff,     
    0 0 40px #0078ff;      

}


.aribox{
	border: 2px solid #FFFFFF;	/* 線の太さ・種類・色 */
    background-color: #FFFFFF;
    color: #333333;
	margin: 30px 20px;	/* 外側の余白 上下・左右 */
	padding: 15px 20px;	/* 内側の余白 上下・左右 */
	position: relative;
}
.aribox:before{
    font-family: "ほうせき";
	content: 'a';
	color: #ffffff;	/* 左上の花の色 */
	font-size: 40px;	/* 左上の花のサイズ */
	font-weight: bold; 
	position: absolute;
	top: -5px;
	left: -15px;
    text-shadow:
    0 0 5px #fff,        
    0 0 10px #ff0000,    
    0 0 20px #ff0000,    
    0 0 40px #ff4d4d;      
}
.aribox:after{
    font-family: "てれび";
	content: '9';
	color: #fff;	/* 右下の花の色 */
	font-size: 50px;	/* 右下の花のサイズ */
	font-weight: bold; 
	position: absolute;
	bottom: -5px;
	right: -15px;
    text-shadow:
    0 0 5px #fff,        
    0 0 10px #ff0000,    
    0 0 20px #ff0000,    
    0 0 40px #ff4d4d;      
}

.dtl{
        border-top: 2px solid #043c78;
	margin: 5px 5px;	/* 外側の余白 上下・左右 */
	padding: 5px 5px;	/* 内側の余白 上下・左右 */
	position: relative;
}
.dtl:before{
        animation: fuwafuwa 3s ease-in-out infinite alternate;
        font-family: "てれび";
        content: 'j';
	color: #043c78;	
	font-size: 30px;	
	font-weight: bold; 
	position: absolute;
	top: -10px;
	left: -15px;  
}

.dtl tm {
    display: block;      /* ブロック要素にして一行占有させる */
    text-align: right;   /* 右寄せにする */
    font-size: 0.75em;   
    color: #666;      
    margin-top: 5px;     /* 上のコンテンツとの隙間 */
}

.atl{
        border-top: 2px solid #942343;
	margin: 5px 5px;	/* 外側の余白 上下・左右 */
	padding: 5px 5px;	/* 内側の余白 上下・左右 */
	position: relative;
}
.atl:before{
        animation: fuwafuwa 3s ease-in-out infinite alternate;
        font-family: "てれび";
        content: '9';
	color: #942343;	
	font-size: 30px;	
	font-weight: bold; 
	position: absolute;
	top: -10px;
	left: -15px;  
}

.atl tm {
    display: block;      /* ブロック要素にして一行占有させる */
    text-align: right;   /* 右寄せにする */
    font-size: 0.75em;   
    color: #666;      
    margin-top: 5px;     /* 上のコンテンツとの隙間 */
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }}

H2 {
  /* 左寄せ */
  text-align: left;
  font-family: 'Mrs Saint Delafield', cursive;
  font-size: 4rem;
  font-weight: normal;
  color: #ffffff;
  text-shadow:
    0 0 5px #fff,          
    0 0 10px #00d2ff,      /* 内側の光 */
    0 0 20px #0078ff,     
    0 0 40px #0078ff;      

  display: inline-block;
  transform: rotate(-7deg); 
  transform-origin: left top;

  margin-top: -30px;
  margin-left: -15px;
}


h3 {
  text-align: left;
  font-family: 'Mrs Saint Delafield', cursive;
  font-size: 4rem;
  font-weight: normal;
  color: #ffffff; /* 文字色は白 */

  /* 赤色のネオンエフェクト */
  text-shadow:
    0 0 5px #fff,          /* 文字の輪郭 */
    0 0 10px #ff0000,      /* 内側の赤い光 */
    0 0 20px #ff0000,      /* メインの赤い光 */
    0 0 40px #ff4d4d;      /* 外側に広がる少し明るい赤 */

  /* 右上がりに回転 */
  display: inline-block;
  transform: rotate(-7deg); 
  transform-origin: left top;

  /* 位置の調整（h2と同じ設定） */
  margin-top: -30px;
  margin-left: -15px;
}


h4 {
	position: relative;
	border-bottom: 5px solid #942343;
	padding: 10px 0;
	}
h4:before {
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 50%;
	height: 5px;
	content: '';
	background: #043c78;
	}


.box{
	border: 2px solid #FFFFFF;	/* 線の太さ・種類・色 */
        background-color: #FFFFFF;
        color: #333333;
	margin: 30px 20px;	/* 外側の余白 上下・左右 */
	padding: 15px 20px;	/* 内側の余白 上下・左右 */
	position: relative;
}
.box:before{
        font-family: "ほうせき";
	content: '0';
	color: #043c78;	/* 左上の花の色 */
	font-size: 50px;	/* 左上の花のサイズ */
	font-weight: bold; 
	position: absolute;
	top: -5px;
	left: -20px;
	text-shadow:  0 0 8px #FFFFFF, 0 0 6px #FFFFFF, 0 0 4px #FFFFFF, 0 0 2px #FFFFFF, 0 0 0.5px #FFFFFF;	/* 左上の花の縁取りの色 */
}
.box:after{
        font-family: "ほうせき";
	content: '0';
	color: #942343;	/* 右上の花の色 */
	font-size: 50px;	/* 右上の花のサイズ */
	font-weight: bold; 
	position: absolute;
	top: -5px;
	right: -20px;
	text-shadow:  0 0 8px #FFFFFF, 0 0 6px #FFFFFF, 0 0 4px #FFFFFF, 0 0 2px #FFFFFF, 0 0 0.5px #FFFFFF;	/* 左上の花の縁取りの色 */
}

.box a,
.box a:visited,
.box a:hover,
.box a:active {
  color: #555555; /* リンク色 */
}



.fusen-d {
    display: inline-block;
    position: relative;
    padding: .5em 1em;
    border-right: 27px solid #0d5a91;
    background-color: #f5f5f5;
    color: #333333;
}

.fusen-d::before {
    position: absolute;
    bottom: 2px;
    right: -20px;
    z-index: -1;
    transform: rotate(5deg);
    width: 100%;
    height: 50%;
    background-color: #d0d0d0;
    content: "";
    filter: blur(4px);
}


.fusen-a {
    display: inline-block;
    position: relative;
    padding: .5em 1em;
    border-right: 27px solid #af1818;
    background-color: #f5f5f5;
    color: #333333;
}

.fusen-a::before {
    position: absolute;
    bottom: 2px;
    right: -20px;
    z-index: -1;
    transform: rotate(5deg);
    width: 100%;
    height: 50%;
    background-color: #d0d0d0;
    content: "";
    filter: blur(4px);
}

/* ま～か～ */
midori {
    background-color: #00533f;
    color: #FFFFFF;}

aka {
    background-color: #942343;
    color: #FFFFFF;}

ao {
    background-color: #043c78;
    color: #FFFFFF;}

orange{
    background-color: #e45e32;
    color: #FFFFFF;}

murasaki {
    background-color: #6b395f;
    color: #FFFFFF;}

pink {
    background-color: #c97586;
    color: #FFFFFF;}


dicon {
  font-family: "ほうせき";
  font-size: 25px;
  display: block;          /* 横幅を持たせる */
  text-align: center;      /* 横方向中央 */
  background: linear-gradient(0deg, #0000ff 20%, #ff0000 89%);
  background: -webkit-linear-gradient(90deg, #0000ff 20%, #ff0000 89%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
dicon::before {
  content: "9";
}

aicon {
  font-family: "ほうせき";
  font-size: 25px;
  display: block;          /* 横幅を持たせる */
  text-align: center;      /* 横方向中央 */
  background: linear-gradient(0deg, #ff0000 20%, #0000ff 89%);
  background: -webkit-linear-gradient(90deg, #ff0000 20%, #0000ff 89%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
aicon::before {
  content: "9";
}


/*===================
iPhoneのメッセージ風
=====================*/
/*フレームとフォント*/
.kaiwa.imessage {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px 0;
    border: 1px white solid;
    background: white;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Helvetica Neue", "Lucida Sans Unicode", "Arial";
    font-size: 16px;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
}
/*フキダシ共通*/
.kaiwa.imessage .fukidasi {
    position: relative;
    display: inline-block;
    max-width: 192px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    box-sizing: content-box;/*はてな用*/
}
/*しっぽをつけないとき*/
.kaiwa.imessage .fukidasi.notail {
    margin-bottom: 0;
}
/*フキダシ左*/
.kaiwa.imessage .fukidasi.left {
    float: left;
    background: #e9e9ed;
}
/*フキダシ右*/
.kaiwa.imessage .fukidasi.right {
    float: right;
    background: #2793fa;
    color: white;
}
/*しっぽ共通*/
.kaiwa.imessage .fukidasi::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}
/*しっぽ左*/
.kaiwa.imessage .fukidasi.left::after {
    left: -6px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #e9e9ed inset; 
}
/*しっぽ右*/
.kaiwa.imessage .fukidasi.right::after {
    right: -6px;
    border-radius: 0px 0  0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #2793fa inset; 
}
/*しっぽをつけないとき*/
.kaiwa.imessage .fukidasi.notail::after {
    content: none;
}




/* 中央寄せ用ラッパー */
.chat-container {
  display: flex;
  justify-content: center; /* 水平方向の中央寄せ */
  padding: 30px 0;         /* 上下の余白 */
  background: #f0f0f0;     /* 背景色は好みで */
}

/* ボックス */
.chat-box {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 0;
  border: 1px white solid;
  background: #ffffff;
  border-radius: 12px;
  font-family: sans-serif;
}

/* 吹き出し本体 */
.balloon {
  position: relative;
  margin: 10px 0;
  padding: 10px 14px;
  background: #ffffff;   /* 吹き出しは白 */
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  max-width: 80%;
  line-height: 1.4;
  color: #555555;        /* 文字色を灰色 */
}

/* 左右配置 */
.balloon.right {
  margin-left: auto;
}

/* 絵文字を上に重ねる */
.balloon::before {
  content: attr(data-emoji);
  position: absolute;
  top: -10px;
  left: -10px;
  font-size: 20px;
  font-family: "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

}

/* 右寄せバージョンは位置を変える */
.balloon.right::before {
  left: auto;
  right: -10px;
}



summary {
  cursor: none;
  padding: 6px 10px;
  color: #000;
}
summary::-webkit-details-marker {
  display: none;
}

/* アイコンの切り替え */
summary:before {
  font-family: 'あいこん';
  font-size: 20px;
  content: 'n';
  margin-right: 6px;
}
details[open] summary:before {
  content: 'o';
}

/* アニメーション対象の中身 */
details .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease; /* ←ここで滑らかに */
}

/* 開いたとき */
details[open] .content {
  max-height: 1000px; 
}

/* 　　　削除のところ　　 */
a[href*="/dm"]{
  font-size: 0;}
a[href*="/dm"]::after{
  font-size: 10px;
  font-family: "あいこん";
  content:"ò";}

/*　　 編集のところ 　　*/
a[href*="/um"]{
  font-size: 0;}
a[href*="/um"]::after{
  font-size: 10px;
  font-family: "あいこん";
  content:"D";}

/* 　　コピーのところ　　 */
a[href*="/cp"]{
  font-size: 0;}
a[href*="/cp"]::after{
  font-size: 10px;
  font-family: "あいこん";
  content:"H";}

.snow {
  /*雪の色*/
  color: snow;
  font-family: ほうせき;
  /*雪の大きさ*/
  font-size: 10px;
  /*初期位置*/
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  /*雪アニメーション1*/
  animation: roll 5s linear infinite;
}
  /*2つめの雪アニメーション*/
.snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}