/* これは作業完了次第消す */
/* * {
    outline: 1px solid red;
} */

/* このファイルは共通のcssのつもりでしたができたら全部書きます */
/* ここからは共通のcss */
*{
    box-sizing: border-box;
}

/* 今のところフォントはゴシック系にしてます変更がある時はここで */
body{
    margin: 0;
    font-family:sans-serif,'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    /* background: linear-gradient(
  180deg,
  #F1CBFF,
  #CBDBFF
); */
background-image: url(../images/neonblack2.jpeg);
color:#f7f6fc;
}

h1{
    font-size: 24px;
    text-align: center;
}
h2{
    text-shadow: 2px 2px 4px rgba(173, 153, 237, 0.5);
    text-align: center;
    margin:24px auto 32px auto;
}

a{
    text-decoration: none;
    color:#fffcfb;
}

button{
    width: 100px;
    height: 32px;
    border-radius: 8px;
}

main{
    background-color: #f7f6f5;
    font-size: 16px;
}

top-image{
    width: 100%;
}
img{
    width:100%;
}

/* ヘッダー */
.header-inner {
    text-align: center;
    width: 100%;
}

.top-image img {
    /* text-align: center; */
    /* width: 100%;
    max-height: 100px;
    object-fit: cover;
    width: auto;
    height: auto; */
    width: 100%;
    height: 100px;
    object-fit: scale-down;
}

/*共通のフッター*/
.footer-text{
    text-align: center;
    margin:16px;
    font-size: 8px;
}


/* postsのデザイン */
.post-card-wrapper{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.post-card{
    display: flex;
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(51,51,51,0.3);
    border-radius: 6px;
    background-color: rgba(255,255,255,0.2);
    box-shadow:0 4px 12px rgba(0,0,0,0.35),
    0 0 12px rgba(124,77,255,0.18);
    backdrop-filter: blur(10px);
    border-top:1px solid rgba(255,255,255,0.5);
    border-left:1px solid rgba(255,255,255,0.4);
    margin-bottom: 32px;
    width: 100%;
    max-width: 354px;
}

.post-main{
    display: flex;
    gap: 12px;
}

.post-left{
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    flex-shrink: 0;
    min-width: 0;
    max-width: 30%;
}

.display-name{
    white-space: nowrap;
    overflow-wrap: break-word;
}
.display-name,
.post-time{
    overflow-wrap: break-word;
}

.post-center{
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex:1;
    /* overflow: hidden; */
}

.training-list{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap: 4px 12px;
    padding: 0;
    margin: 0;
}

.training-list li{
    overflow-wrap: break-word;
    font-size: 12px;
    white-space: nowrap;
    list-style: none;
    word-break: break-word;
}

.training-list ul{
    padding: 0;
}

.post-right {
    position: absolute;
    top: 12px;          /* カードの上の余白（padding）と同じに設定 */
    right: 12px;        /* カードの右の余白（padding）と同じに設定 */
    font-size: 10px;
    text-align: right;
    overflow-wrap: break-word;
}
/* .post-right{
    display: flex;
    flex-direction: column;
    margin-left: auto;
    flex-shrink: 0;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 30%;
    text-align: right;
    font-size: 10px;
    overflow-wrap: break-word;
} */

.post-content{
    margin-top:8px;
    font-size: 14px;
    line-height: 1.5;
}

.post-btn{
    margin: 8px 16px 0 0;
    font-size: 16px;
    vertical-align: middle;
}

.font {
    margin: 0;
    font-size: 14px;
    color:#f7f6fc;
    vertical-align: middle;
}

.count{
    font-size: 12px;
    vertical-align: middle;
}

/* 投稿詳細 */
.page_post_detail{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.detail-card{
    display: flex;
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    margin-bottom: 32px;
    width: 100%;
    max-width: 354px;
    padding: 8px 16px;
    color:#f7f6fc;
    border: 1px solid rgba(51,51,51,0.3);
    background-color: rgba(255,255,255,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35),
    0 0 12px rgba(124,77,255,0.18);
    backdrop-filter: blur(10px);
    border-top:1px solid rgba(255,255,255,0.5);
    border-left:1px solid rgba(255,255,255,0.4);
    border-radius: 8px;
    text-align: center;
}

/* コメント欄の親要素を広げる */
.new-post {
    width: 100%;
}

/* 投稿詳細のコメント欄 */
.new-post-main textarea {
    min-height: 70px;
    width: 100%;
    resize: vertical;
    background: #fdfcff;
    border: 1px solid #e6e0f8;
    border-radius: 12px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    padding: 8px;
}

.reaction-list {
    display: flex;
    align-items: center;
    margin-left: 16px; 
    gap: 16px;
    width: 100%;
}

.reaction,
.reaction-list form.reaction {
    display: flex;
}
span.comment-time{
    font-size: 8px;
    margin-left:20px;
}

.reaction_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    white-space: nowrap;
    padding:0 10px;
    font-size: 13px;

    width: auto;
    margin-top: 8px;
    box-sizing: border-box;
    color:#f7f6fc;
    border: 1px solid rgba(51,51,51,0.3);
    background-color: rgba(255,255,255,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35),
    0 0 12px rgba(124,77,255,0.18);
    backdrop-filter: blur(10px);
    border-top:1px solid rgba(255,255,255,0.5);
    border-left:1px solid rgba(255,255,255,0.4);
    border-radius: 12px;
}

/*フッターっぽいところにあるボタン用のところ*/
.footer-menu{
    text-align: center;
    width: 100%;
    max-width: 354px;
    margin:24px auto;

    display:flex;
    justify-content: space-between;
    align-items: center;
}

.footer-btn {
    display: inline-block;
    padding: 8px 16px;
    color:#f7f6fc;
    border: 1px solid rgba(51,51,51,0.3);
    background-color: rgba(255,255,255,0.2);
    box-shadow:0 4px 12px rgba(0,0,0,0.35),
    0 0 12px rgba(124,77,255,0.18);
    backdrop-filter: blur(10px);
    border-top:1px solid rgba(255,255,255,0.5);
    border-left:1px solid rgba(255,255,255,0.4);
    border-radius: 8px;
    text-align: center;
}

/*できたスタンプ見たいなもの角度とかここで調節。文字変えたい時はhtmlの方で*/
.dekita{
    position:absolute ;
    top:-40px;
    left: -30px;
    transform: rotate(-30deg);
    color: rgb(253, 242, 242);
    opacity: 0.5;
    font-size: 24px;
    font-weight: 400;
    animation: poyo 1.5s infinite;
}
@keyframes poyo {
    0% {
        transform: rotate(-30deg) scale(1);
    }
    50% {
        transform: rotate(-30deg) scale(1.2);
    }
    100% {
        transform: rotate(-30deg) scale(1);
    }
}

/*パンくずリストのところ*/
.breadcrumb{
    font-size: 11px;
}
nav.breadcrumb{
    margin:16px 0 0 32px;
}

.breadcrumb a{
    text-decoration: none;
    color: #f7f6fc;
}

.breadcrumb span{
    margin: 0 4px;
}

/*authのcss*/

.auth-wrapper{
    display: flex;
    flex-direction: column; /* 縦並びに！ */
    align-items: center; /* 左右中央に！ */

    width: 100%;
    max-width: 420px;
    margin: 24px auto;
}

.auth-title, .card-subtitle{
    display: flex;
}

.auth-title{
    margin: 0 0 6px;
    font-size: 20px;
    text-align: center;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  width: 100%;
  margin:32px auto;
}


.auth-form>div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-form label {
  font-size: 14px;
  color: #f7f6fc;
}

.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="email"] {
  border: 1px solid rgba(51,51,51,0.3);
  border-radius: 16px;
  padding: 14px 16px;
  color: #f7f6fc;
  background-color: rgba(255,255,255,0.2);
  box-shadow: inset 10px 5px 5px #efeff8;
}

.auth-form input[type="text"]:focus,
.auth-form input[type="password"]:focus,
.auth-form input[type="email"] {
  border-color: rgba(37, 99, 235, 0.9);
  background: #ffffff;
  color:#222;
  box-shadow: inset 10px 5px 5px #efeff8;
}

.auth-button {
  border: none;
  border-radius: 16px;
  padding: 12px 16px;
  color:#f7f6f5;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-shadow:0 4px 12px rgba(0,0,0,0.35),
    0 0 12px rgba(124,77,255,0.18);
  width: 100%;
  background-color: rgba(255,255,255,0.2);

  margin:24px auto 8px auto;
}


.auth-button:hover {
  background: #f9f7fa;
  color:#222;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35),
    0 0 12px rgba(124,77,255,0.18);
}

.auth-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18);
}
.swith-auth:hover{
    color:#222;
}

/* フラッシュメッセージ */
.flash {
  list-style: none;
  padding: 10px 12px;
  margin: 0 0 3px;
  border-radius: 12px;
  background: rgba(254, 226, 226, 0.9);
  border: 1px solid rgba(248, 113, 113, 0.8);
  font-size: 14px;
}

/*投稿詳細*/
.comment-card{
    padding: 8px 16px;
    color:#f7f6fc;
    border: 1px solid rgba(51,51,51,0.3);
    background-color: rgba(255,255,255,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35),
    0 0 12px rgba(124,77,255,0.18);
    backdrop-filter: blur(10px);
    border-top:1px solid rgba(255,255,255,0.5);
    border-left:1px solid rgba(255,255,255,0.4);
    border-radius: 8px;
    text-align: center;
    margin-bottom:16px;
    /* width: 100%; */
    width: fit-content;
    min-width: 354px;
    margin: 0 auto 16px;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.comment-header{
    display: flex;
}
.comment-body{
    margin:16px auto;
}
.btn{
    border: 1px solid rgba(51,51,51,0.3);
    border-radius: 6px;
    background-color: rgba(255,255,255,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35),
    0 0 12px rgba(124,77,255,0.18);
    backdrop-filter: blur(10px);
    border-top:1px solid rgba(255,255,255,0.5);
    border-left:1px solid rgba(255,255,255,0.4);
    margin: 32px auto;
    cursor: pointer;
}

/* ログアウト画像 */
.logout {
    align-self: flex-end;
    margin: 0;
    width: 100%;
    max-width: 586px;
}

.logout a {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: cover;
}

.logout img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter:drop-shadow(0 0 6px rgba(255,255,255,0.8));
}

.signout {
    display: flex;
    align-self: flex-end;
    width: 100%;
    max-width: 900px;
    justify-content: flex-end;
    box-sizing: border-box;
}

.signout a {
    display: block;
    width: 38px;
    height: 38px;
}

.signout img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}