@charset "utf-8";
/* CSS Document */

@charset "utf-8";
@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css");

/* =========================
Theme Colors（色だけ管理）
値を変えると配色が一括で変わる
========================= */
:root {
 --primary: #ff69b4;
/* 見出し/装飾の基調色 */
--primary-contrast: #ffffff;
--accent: #ffe4ec; 
/* 左ボーダー等のアクセント */
  --cta: #ff3366;  
/* CTAボタン（#00bb00/#00b900 両方を統一） */
--note: #ffddee;
/* リストの淡ピンク背景 */
--chip: #ffe6e5;
/* 吹き出しの淡ピンク */
--card: #f4f4f4;
/* グレーカード */
--text: #333333;
/* 文字色 */
--dark: #333355;
/* 送信ボタンなど濃色 */
--ok: #ff85a2;
/* オンライン点灯 */
--danger: #ff0000;
/* 赤バッジ等 */
}

/* =========================
Universal Reset
========================= */
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 100%;
}

h1,
h4,
h5,
h6,
p,
blockquote,
pre,
hr,
div,
object,
ul,
ol,
li,
dl,
dt,
dd,
fieldset,
form,
legend {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
}

ul,
ol {
list-style: none;
}

fieldset {
margin: 0;
padding: 0;
border: 0 none;
}

legend {
display: none;
}

table,
th,
td {
border: 0;
border-spacing: 0;
}

caption,
th {
text-align: left;
}

em,
strong,
caption,
th,
address {
font-style: normal;
font-weight: normal;
}

img {
border: 0 none;
vertical-align: bottom;
_vertical-align: text-bottom;
max-width: 100% !important;
}

input,
select,
textarea {
margin: 0;
padding: 0;
vertical-align: middle;
}

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

input {
-webkit-appearance: none;
appearance: none;
}

input[type="submit"],
input[type="reset"] {
border: none;
border-radius: 0;
}

input[type="radio"] {
-webkit-appearance: radio;
appearance: radio;
}

input[type="checkbox"] {
-webkit-appearance: checkbox;
appearance: checkbox;
}

option {
padding-right: 5px;
}

article,
aside,
dialog,
details,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}

mark {
font-weight: normal;
font-style: normal;
}

blockquote,
q {
quotes: none;
}

a {
vertical-align: baseline;
text-decoration: none;
}

/* 元の指定を保持（レイアウト変えない） */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* =========================
Typography & Components
========================= */
h2 {
text-align: center;
color: var(--primary);
font-size: 30px;
font-weight: bold;
margin-bottom: 5px;
margin-top: 5px;
}

h3 {
text-align: center;
color: var(--primary);
font-size: 22px;
font-weight: bold;
margin-bottom: 5px;
}

.mainimg {
width: 50%;
margin: 10px auto 0 auto;
display: block;
border-radius: 100%;
}

.iine {
width: 60%;
display: block;
margin: 15px auto 10px auto;
padding: 5px;
border: solid 1px var(--primary);
text-align: center;
border-radius: 30px;
}

.iine a {
color: var(--primary);
text-align: center;
text-decoration: none;
font-weight: bold;
}

#iinet p {
color: var(--primary);
width: 94%;
margin: 0 auto;
display: block;
}

/* =========================
Default Style
========================= */
body {
font-size: 13px;
margin: 0 auto;
font-family: 'Twemoji', Verdana, Geneva, "sans-serif";
-webkit-text-size-adjust: 100%;
color: var(--text);
height: 100%;
min-height: 100%;
}

img.emoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}

.right {
text-align: right;
}

.center {
text-align: center;
}

dl.prof {
padding-bottom: 20px;
}

dl.prof dt {
position: relative;
}

dl.prof dt img {
width: 100%;
}

dl.prof dt>p {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 8px;
color: #FFF;
font-weight: bold;
font-size: 1.4em;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(0, 0, 0, 0.31) 99%, rgba(0, 0, 0, 0.31) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(0, 0, 0, 0.31) 99%, rgba(0, 0, 0, 0.31) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(0, 0, 0, 0.31) 99%, rgba(0, 0, 0, 0.31) 100%);
}

dl.prof dt>p span {
display: inline-block;
margin-right: 10px;
}

dl.prof dd {
padding: 1em;
}

dl.prof dd h2 {
text-align: right;
}

dl.prof dd h2:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f111";
color: var(--ok);
margin-right: 5px;
}

dl.prof dd h4 {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 1em;
}

dl.prof dd>p {
margin-bottom: 1em;
}

dl.prof dd.flex {
display: -webkit-flex;
display: flex;
justify-content: flex-start;
align-items: center;
}

dl.prof dd ul.thumbnails li {
margin-right: 0.6em;
width: 31%;
}

dl.prof dd ul.thumbnails li img {
border-radius: 0%;
border: 3px solid #f1f1f1;
}

dl.prof dd ul.thumbnails li img:hover,
dl.prof dd ul.thumbnails li img:active {
border: 3px solid var(--primary);
}

.flex {
display: flex;
justify-content: center;
}

div#inMessage {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #EEE;
display: none;
z-index: 5;
}

div#inMessage h3 {
background: var(--primary);
color: #FFF;
text-align: center;
padding: 8px 5px;
position: relative;
font-size: 1.1em;
font-weight: bold;
}

div#inMessage h3 span {
position: absolute;
right: 5px;
top: 5px;
display: inline-block;
background: #FFF;
color: #999;
padding: 2px 6px;
font-size: 0.9em;
border-radius: 10px;
}

div#inMessage ul {
padding-bottom: 90px;
}

div#inMessage ul li {
width: 80%;
padding: 1em 1em 0;
}

div#inMessage ul li dl {
display: -webkit-flex;
display: flex;
width: 100%;
}

div#inMessage ul li dt {
width: 20%;
margin-right: 10px;
}

div#inMessage ul li dt img {
border-radius: 50%;
width: 60px !important;
}

div#inMessage ul li dd {
width: 80%;
}

div#inMessage ul li dd p {
border-radius: 1em;
background: #FFF;
position: relative;
padding: 5px;
}

div#inMessage ul li dd.image p {
padding: 0;
}

div#inMessage ul li dd p>img {
border-radius: 1em;
}

div#inMessage ul li dd p a {
background: var(--cta);
color: #FFF;
border-radius: 30px;
display: inline-block;
padding: 3px 10px;
width: 90%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

div#inMessage ul li>p {
font-size: 0.8em;
text-align: right;
margin-top: 5px;
}

div#inMessage ul li.d1,
div#inMessage ul li.d2,
div#inMessage dd.d3,
div#inMessage dd.d4 {
display: none;
}

#fountainG {
position: relative;
height: 25px;
}

.fountainG {
position: absolute;
top: 0;
color: #ADADAD;
background-color: rgb(255, 255, 255);
width: 10px;
height: 10px;
animation-name: bounce_fountainG;
-o-animation-name: bounce_fountainG;
-ms-animation-name: bounce_fountainG;
-webkit-animation-name: bounce_fountainG;
-moz-animation-name: bounce_fountainG;
animation-duration: 2.1s;
-o-animation-duration: 2.1s;
-ms-animation-duration: 2.1s;
-webkit-animation-duration: 2.1s;
-moz-animation-duration: 2.1s;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-direction: normal;
-o-animation-direction: normal;
-ms-animation-direction: normal;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
transform: scale(.2);
-o-transform: scale(.2);
-ms-transform: scale(.2);
-webkit-transform: scale(.2);
-moz-transform: scale(.2);
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

#fountainG_1 {
top: 7px;
left: 16px;
animation-delay: 0.91s;
-o-animation-delay: 0.91s;
-ms-animation-delay: 0.91s;
-webkit-animation-delay: 0.91s;
-moz-animation-delay: 0.91s;
}

#fountainG_2 {
top: 7px;
left: 33px;
animation-delay: 1.14s;
-o-animation-delay: 1.14s;
-ms-animation-delay: 1.14s;
-webkit-animation-delay: 1.14s;
-moz-animation-delay: 1.14s;
}

#fountainG_3 {
top: 7px;
left: 49px;
animation-delay: 1.37s;
-o-animation-delay: 1.37s;
-ms-animation-delay: 1.37s;
-webkit-animation-delay: 1.37s;
-moz-animation-delay: 1.37s;
}

#fountainG_4 {
top: 7px;
left: 66px;
animation-delay: 1.59s;
-o-animation-delay: 1.59s;
-ms-animation-delay: 1.59s;
-webkit-animation-delay: 1.59s;
-moz-animation-delay: 1.59s;
}

#fountainG_5 {
top: 7px;
left: 82px;
animation-delay: 1.82s;
-o-animation-delay: 1.82s;
-ms-animation-delay: 1.82s;
-webkit-animation-delay: 1.82s;
-moz-animation-delay: 1.82s;
}

@keyframes bounce_fountainG {
0% {
transform: scale(1);
background-color: rgb(173, 173, 173);
}

100% {
transform: scale(.2);
background-color: rgb(255, 255, 255);
}
}

@-o-keyframes bounce_fountainG {
0% {
-o-transform: scale(1);
background-color: rgb(173, 173, 173);
}

100% {
-o-transform: scale(.2);
background-color: rgb(255, 255, 255);
}
}

@-ms-keyframes bounce_fountainG {
0% {
-ms-transform: scale(1);
background-color: rgb(173, 173, 173);
}

100% {
-ms-transform: scale(.2);
background-color: rgb(255, 255, 255);
}
}

@-webkit-keyframes bounce_fountainG {
0% {
-webkit-transform: scale(1);
background-color: rgb(173, 173, 173);
}

100% {
-webkit-transform: scale(.2);
background-color: rgb(255, 255, 255);
}
}

@-moz-keyframes bounce_fountainG {
0% {
-moz-transform: scale(1);
background-color: rgb(173, 173, 173);
}

100% {
-moz-transform: scale(.2);
background-color: rgb(255, 255, 255);
}
}

p#notification {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--primary);
padding: 5px;
z-index: 3;
color: #FFF;
}

p#notification img {
width: 26px;
border-radius: 50%;
margin-right: 5px;
}

p#notification span {
display: inline-block;
background: var(--danger);
color: #FFF;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
margin-left: 5px;
}

div#chat {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #FFF;
padding: 0.5em;
}

div#chat input[type="text"] {
border: 1px solid #ebe5e5;
padding: 0.5em;
width: 85%;
font-size: initial;
}

div#chat input[type="submit"] {
background: var(--dark);
color: #FFF;
text-align: center;
padding: 0.3em;
width: 13%;
border-radius: 0.5em;
font-size: 1.2em;
}

p#icon_mail {
position: fixed;
top: 10px;
left: 10px;
color: #FFF;
border-radius: 5%;
display: none;
z-index: 3;
}

p#icon_mail span {
position: absolute;
top: -5px;
left: -5px;
background: var(--danger);
display: inline-block;
border-radius: 30px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
z-index: 4;
}

#appDlbox {
z-index: 1;
border: 2px solid #000;
background: rgba(233, 233, 233, .9);
padding: 1em;
width: 80%;
position: fixed;
left: 10%;
top: 10%;
border-radius: 10px;
z-index: 10;
display: none;
}

#appDlbox>p {
font-size: 1.1em;
margin-bottom: 0.5em;
}

#appDlbox>p span {
color: var(--danger);
font-weight: bold;
}

#appDlbox>p.fd {
background: #FFF;
padding: 1em;
position: relative;
border-radius: 10px;
margin-bottom: 1em;
}

#appDlbox>p.fd:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #FFF;
}

#appDlbox dl dt {
display: -webkit-flex;
display: flex;
}

#appDlbox dl dt img {
width: 50px;
}

#appDlbox dl dt p:first-child {
padding-right: 10px;
}

#appDlbox dl dd a {
display: block;
background: var(--cta);
color: #FFF;
width: 80%;
padding: 5px;
text-align: center;
margin: 1em auto;
border-radius: 30px;
font-weight: bold;
font-size: 1.3em;
}

#appDlbox dl dd a.cancel {
background: #ABABAB;
font-weight: lighter;
font-size: 0.7em;
}

/* ANIMATION（元のまま） */
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}

@media (prefers-reduced-motion) {
.animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}

@-webkit-keyframes bounceInDown {

from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}

60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}

75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}

90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}

to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@keyframes bounceInDown {

from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}

60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}

75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}

90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}

to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}

/* カード/吹き出し/リスト（色だけ差し替え） */
.profile {
width: 90%;
margin: 0px auto;
padding: 0.4em 0.5em;
color: #494949;
background: var(--card);
border-left: solid 6px var(--accent);
/* 下線の元コメントはそのまま残す（// はブラウザ無視だが元コード維持） */
}

.balloon-wrap {
 text-align: center;     /* 子のblockを中央寄せ（margin: auto と合わせ技） */
 overflow-x: hidden;     /* 念のための保険 */
}

.balloon1-top {
 position: relative;
 display: block;
 margin: 10px auto;
 padding: 7px 10px;
 box-sizing: border-box;
 width: 100%;
 max-width: 680px;
 color: #555555;
 font-size: 1.0em;
 border-radius: 10px;
 background-color: var(--chip);
 overflow-wrap: anywhere;    /* 現行ブラウザ */
 word-break: break-word;     /* 互換用 */
}

.balloon1-top p {
text-align: left;
margin: 0;
padding: 3px;
font-weight: bold;
 white-space: normal;
}

div#list ul,
ol {
padding: 0;
position: relative;
}

div#list ul li,
ol li {
color: #555;
border-left: solid 6px var(--primary);
background: var(--note);
margin-bottom: 3px;
line-height: 1.5;
padding: 0.5em;
list-style-type: none !important;
}

div#list2 ul {
padding: 0;
position: relative;
}

div#list2 ul li {
color: white;
background: var(--primary);
line-height: 1.5;
padding: 0.5em 0.5em 0.5em 2.5em;
border-bottom: 2px solid white;
list-style-type: none !important;
font-weight: bold;
font-size: 1.2em;
}

div#list2 ul li:before {
font-family: "Font Awesome 5 Free";
content: "\f2bb";
position: absolute;
left: 1.0em;
color: white;
}

.photo {
text-align: center;
font-size: 1.8em;
color: #cccccc;
margin-top: -10px;
margin-bottom: 10px;
}

/* LINE@ 友だちボタン（色だけ変数） */
#line_atto a {
background: var(--cta);
/* 元コメントは保持 */
//    box-shadow:0 5px 0 #219900;
font-size: 1.2em;
position: relative;
display: block;
padding: 10px;
color: #fff;
border-radius: 30px;
text-align: center;
text-decoration: none;
font-weight: bold;
width: 90%;
margin: 10px 0px 10px 0px;
z-index: 0;
}

/* 元のhoverコメントはそのまま保持（位置・動作に影響を与えない） */
//#line_atto a:hover {
//    background:#219900;
//    -webkit-transform: translate3d(0px, 5px, 1px);
//    -moz-transform: translate3d(0px, 5px, 1px);
//    transform: translate3d(0px, 5px, 1px);
//    box-shadow:none;
//    z-index: 0;
//}