html{scroll-behavior: smooth;}
body{overflow-x: hidden;}

:root{--namae:0 1.5px 3px  rgba(0,0,0,.75);}

/*-------------------------------------------------------*/
/*　　　　背景設定　　　　*/

#profile-block-1,
#profile-block-3{
background-size: 100%;
object-fit:cover; background-position: top;
background-attachment: fixed;
animation: back-2 30s linear infinite;}

#profile-block-1::before,
#profile-block-3::before{
content: "";position: absolute;
background-image: url(https://tallgirl.fun/common/img/ten.png);
width:100%; height:100%;
opacity: .15; z-index: -1;
top:0; left:0;
}

#profile-block-1::before,
#profile-block-3::before{
animation: dot 5s linear infinite;}
@keyframes dot {
from {background-position: 0 0; }
to {background-position: 4px 4px; }}

/*-------------------------------------------------------*/

#content{
animation: gradient 15s ease infinite;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) fixed;
background-size: 400% 400%;}

@keyframes gradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
}


/*-  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -*/


/*　#profile-block　全体設定　*/
#profile-block{
background:#FFF;
width:100%;min-height:100vh;
box-sizing: border-box;
padding:40px 20px;
position: relative;
z-index: 1;}

/*-  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -*/

/*　#profile-block　要素表示範囲内　*/
.introduction{
display: flex; flex-wrap: wrap;
justify-content: space-between;
width:90%; margin-left:calc( ( 100% - 90% ) / 2);}

/*-  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -*/

/*　名前　文章解説　コメントリンクスペース　*/
.introduction .element-1{
width:calc(65% - 20px);
box-sizing: border-box;
padding:1em 20px;
border-right: solid 1px #AAA;
display: inline-block;}

.introduction .element-2{
width:35%;
box-sizing: border-box;
padding:1em;
display: inline-block;}

/*…   …   …   …   …   …   …   …   …   …   …   …   */

.element-1 .icon{
width:100%; height:150px;
display: flex;
border-bottom:solid 1px #AAA;
padding-bottom:1rem;}

.element-1 .icon img{height: 100%;}

.icon .name
{display:flex; align-items: center;}

.icon .name h2,
.icon .name h3{margin:0; width: 100%;}
.icon .name h2{font-size: 2rem;}
.icon .name h3{font-size: 1rem;}

/*………………………………………………………………*/

#chat
{width:90%;
margin-bottom:0em;
margin-top:2em;
display: block;
margin-left:5%;}

.chat-box{
white-space:nowrap;
text-overflow: ellipsis;
overflow:hidden;
width:calc(90%);
margin-top:10px;
display: block;
height:3rem; line-height: 3rem;
box-sizing: border-box; padding:0 1.5rem;
border-bottom:solid 1px #999;}

.chat-box::before{
content: "";
background:#FD5858;
width:5px; height:1.5rem;
position: relative;
display: inline-block;
margin-right:1em
}



/*ーーーーーーーーーーーーーーーーーーーーーーーー*/



/*身体情報*/
.status
{margin:20px 5%; width:90%; }

.status .height, .status .weight{
display: flex; position: relative;
margin-top:30px;
line-height: 1.2rem; font-size:1.2rem;
left: 50%; transform:translateX(-50%);
}

.status .height::before,
.status .weight::before
{height:1.2em; text-align: left;
display: block; min-width: 100px;
color:#FF8000; font-weight: bold;
padding-right:0 50px 0 0;
border-right:solid 3px #FF8000;
margin-right:50px;}

.status .height::before{content: "Height";}
.status .weight::before{content: "Weight";}

.status .height > span,
.status .weight > span
{min-width:100px;}

.height .cm::after{content: "cm";}
.height .ft::after{content: "ft";}
.height .in::after{content: "in";}
.weight .kg::after{content: "kg";}
.weight .lb::after{content: "lb";}

/*-  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -*/

.growth{
width: 100%; margin:2rem 0;
border-collapse:collapse;}

.growth tbody.header
{color:#FF8000;}

.growth tbody td{
width:50%; text-align: center;
border-bottom:solid 1px #DDD;
padding-top:0.25rem;
font-size:0.9rem;}

/*-  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -*/

.data{
width:90%; margin-left:5%;
margin:0 0 2rem 0;}

.data ul{
display:flex; flex-wrap: wrap;
justify-content: space-between;
padding:0;}

.data li{
list-style: none;
width:100%;
font-size: .9rem;
display: flex;}

.data li:nth-child(n + 2)
{margin-top:15px;}

.data li a
{display: block; color:#0174df}

.data ul li::before{
margin-right: 2rem;
color:#0174DF; font-weight: bold;
border-right:solid 2px #0174DF;
min-width: 6em;
box-sizing: border-box;
text-align: center;
display: inline-block;
height:1.25rem;}

.data ul .born::before{content: "Born"}
.data ul .from::before{content: "From"}
.data ul .sport::before{content: "Sport"}
.data ul .school::before{content: "School"}

.data ul .school span h4{
margin: 0 0 0.5em 0;
font-weight: normal;}

/*-  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -*/

.rink{
width:100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin:50px 0 0 0;
padding:20px 10%;
box-sizing: border-box;
}

.rink a{transition: .25s;}
.rink a:hover{opacity: 0.5;}

.rink a::before{
content: "";
background-size: 30px;
background-repeat: no-repeat;
display: inline-block;
width:30px; height:30px;
margin:0 10px;}

.rink .twitter::before{background-image: url(https://tallgirl.fun/common/img/link/twitter.png)}
.rink .facebook::before{background-image: url(https://tallgirl.fun/common/img/link/facebook.png)}
.rink .instagram::before{background-image: url(https://tallgirl.fun/common/img/link/instagram.png)}
.rink .tiktok::before{background-image: url(https://tallgirl.fun/common/img/link/tiktok.png)}

/*　ドメイン名リンク　*/
.rink .other{
background:#DDD; color:#333;
box-sizing: border-box;
font-size: 0.75rem; padding-right:1em;
border-radius: 5px;
min-width:100px; height:32.55px;
display: flex; align-items: center;
}
/*　ドメイン名リンク　アイコン設定　*/
.rink .other::before{
background-size: 15px;
background-position: 7.5px;
width:30px; height:30px;}

/*　ドメイン名リンク　アイコンリンク　*/
.rink .other::before{background-image: url(https://tallgirl.fun/common/img/link/other.png)}

/*ーーーーーーーーーーーーーーーーーーーーーーーー*/




/*-  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -*/



#collection{
width:90%; margin-left:5%;
margin-top:20px; 
position: relative; z-index: 2;}

#collection .pix{
width:calc(100% / 6 - 5px);
height: auto; cursor: pointer;
padding:2.5px;
box-sizing: border-box;}

#collection .pix img
{width: 100%; }

#collection button{
    border:none;
    background:none; 
}


#viewer{
    background-color: #FFF;
    padding-bottom:100px;
}