@charset 'UTF-8';
/*
COLORS
================================================ */
:root{
    
    --black: #000;
    --white: #FFF;
    --text-blue: #0755D5;
    --body-blue:#F2F7FF;
    --text-gray:#8E8E8E;
    --box-gray:#BABABA;
    --box-blue:#0076FF;
    --line-gray:#d6d6d6;
  }

  /*
Common
================================================ */

:root{
    --login-area:32rem;
    --mypage-area:34.375rem;
}

main{
    min-height: calc(100vh - 270px);
   
}
ul{padding-left:0}
li{list-style:none}

.white-box{
    height:auto;
    width:var(--mypage-area);
    margin:auto;
    margin-top: 4.625rem;
    margin-bottom: 65px;
    background-color: var(--white);
    box-shadow: 6px 6px 6px rgba(48,92,213,.16);

}
@media screen and (max-width: 820px) {
  .white-box{
   width:345px;
} 
}

.profile-hr{
    border-top: 1px solid var(--line-gray);
    margin:0;
}

.profile-item-title{
   
    font-size:.875rem;
    font-weight: bold;
    height:3.125rem;
    line-height: 3.125rem;
    text-align: center;
    position:relative;
    z-index: 0;
    margin:0;
}

.arrow-left {
    position:absolute;
    left:3.5rem;
    top:40%;
    width: 0.66rem;
    height: 0.66rem;
    border-top: 2px solid var(--box-blue);
    border-left: 2px solid var(--box-blue);
    transform: rotate(-45deg);
    z-index:0;
  }

.arrow-right {
    display: inline-block;
    width: 0.66rem;
    height: 0.66rem;
    border-top: 2px solid var(--box-blue);
    border-right: 2px solid var(--box-blue);
    transform: rotate(45deg);
}

 /*
Header
================================================ */

  .nav-icon-text{
    color:var(--text-gray);
 }

.nav-icon-text.current{
   color:var(--text-blue);
}

header.login-header{
height:3.625rem;
background-color: var(--white);
position:fixed;
width:100%;
top:0;
left:0;
box-shadow: 6px 6px 6px rgba(48,92,213,.16);
z-index: 10;
}

nav.nav-bar{
    height:inherit;
    display:flex;
    align-items: center;
   
}

ul.nav-botton{
    list-style: none;
    width:var(--login-area);
    margin:auto;
    display:flex;
    justify-content:space-between; 
    align-items: center; 
    padding:0;
}

a.navbar-btn{
    display:flex;
    flex-direction: column;
    /* align-content:center; 
    align-items: center;  */
}

.nav-botton li{
  width:4rem ;
}

.nav-icon{
height:1.25rem;
margin:auto;
}

.nav-icon-text{
font-size: 0.75rem;
margin:auto;
}

.mypage header nav li:first-of-type a {
    background-image: none;
  }
  .mypage header nav li:nth-child(2) a {
    background-image: none;
  }
  .mypage header nav li:nth-child(3) a {
    background-image: none;
  }
  .mypage header nav li:last-of-type a {
    background-image: none;
}


  /*
Footer
================================================ */
footer{
    width:100%;


}