/* ========================================
   FeatU - アプリケーションスタイル
   ======================================== */
.beta_info{
    font-size: 11px;
    color: #4c454d;
    border: solid 1px #ccc;
    border-radius: 4px;
    line-height: 1;
    padding: .2em .6em;
    white-space: nowrap;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Google Sans Flex", 'Noto Sans JP', sans-serif;
    color: var(--fontcolor);
    background-color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    hanging-punctuation: allow-end;
    line-break: strict;       /* 行頭の句読点を防ぐ */
    word-break: break-word;   /* 単語の途中で不自然に切れるのを防ぐ */
    text-align: justify;      /* 行末をきれいに揃える（均等割付） */
    scrollbar-gutter: stable; /*全ページスクロール領域を確保*/
    letter-spacing: .02em;
}

/* Alpine.js x-cloak: 初期非表示 */
[x-cloak] {
    display: none !important;
}

a{
    color: var(--fontcolor);
}

:root{
    --maincolor: #d051ea;
    --fontcolor: #1e1420;
    --fontcolor2: #4c454d;
    --fontgray:#817f81;
    --btncolor: #150817;
}

/*ツールチップ*/
.tooltip-btn{
    position: relative;
}
.tooltip-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%; /* ボタンの少し上に配置 */
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 8px;
    background-color: var(--btncolor);
    color: #fff;
    font-size: 11px;
    border-radius: 5px;
    white-space: nowrap; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s, transform 0.1s;
    pointer-events: none;
    z-index: 999;
    line-height: 1;
}
.tooltip-btn::before {
    content: "";
    position: absolute;
    bottom: 85%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--btncolor);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s,transform 0.1s;
    z-index: 999;
}
.tooltip-btn:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0px);
}
.tooltip-btn:hover::after{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/*タイトルの不可視化*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/*スマホ版非表示*/
.sp_hide{
    display: block !important;
}
.pc_hide{
    display: none !important;
}
@media (max-width: 739px){
.sp_hide{
    display: none !important;
}
.pc_hide{
    display: block !important;
}
}

/* ========================================
   header-public (公開ページヘッダ)
   ======================================== */
.header-public {
    width: 100%;
    height: 72px;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
.page-mypage-messages-index .header-public{
    border-bottom: 1px solid #e8e8e8;
}
.header-public__container {
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
}

/* ナビありの場合: 中央揃え + gap調整 */
.header-public__container--with-nav {
    justify-content: space-between;
    grid-template-columns: 1fr 1fr 1fr;
    /* エリア間gap: 980pxで40px、740pxで0px (240pxの変化で40px)
    gap: clamp(0px, calc((100vw - 740px) / 6), 40px); */
}

.header-public__logo {
    flex-shrink: 0;
}

/* ナビありの場合のロゴ幅とgap */
.header-public__container--with-nav .header-public__logo {
    /* ロゴgap分: 980pxで20px、740pxで0px (240pxの変化で20px) */
    margin-right: clamp(0px, calc((100vw - 740px) / 12), 20px);
    display: flex;
    align-items: center;
    gap: 12px;
}
.header-public__logo{
    display: flex;
    align-items: center;
    gap: 12px;  
}
.header-public__logo-link{
    text-decoration: none;
}
.header-public__logo-image {
    height: 34px;
    width: auto;
}

.header-public__nav {
    display: grid;
    align-items: center;
    gap: 0px;
    height: 100%;
    grid-template-columns: 124px 124px 124px 124px;
}

.header-public__nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-decoration: none;
    height: 100%;
    flex-shrink: 0;
    transition: all .2s;
    padding-top: 1px;
}
.header-public__nav-item.is-active {
    box-shadow: inset 0 -2px 0 0 var( --fontcolor);
}
.header-public__nav-item.is-active img,
.header-public__nav-item.is-active span{
    opacity: .5;
}

@media (hover: hover) {
.header-public__nav-item:hover{
    background-color: #f4f4f5;
}
}
.header-public__nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.header-public__nav-text {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.header-public__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 22px;
}


/* 未ログイン時のみgap調整 */
.header-public__container--with-nav .header-public__actions--guest {
    /* アクション内gap: 980pxで0px、740pxで0px (240pxの変化で20px) */
    gap: clamp(0px, calc((100vw - 740px) / 12), 12px);
}

.header-public__login-btn {
    font-family: "Google Sans Flex", 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 0;
    transition: opacity 0.2s;
    color: var(--btncolor);
    background-color: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
}

.header-public__register-btn {
    font-family: "Google Sans Flex", 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    padding: 10px 18px 11px;
    border-radius: 999px;
    transition: all 0.2s;
    color: rgb(255, 255, 255);
    background-color: var(--fontcolor);
    line-height: 1;
    border: solid 1px var( --fontcolor);
    white-space: nowrap;
    letter-spacing: 0;
}

.header-public__login-btn:hover,
.header-public__register-btn:hover {
    background-color: #fff;
    color: var( --fontcolor);
}

/* 通知・ユーザーメニュー（ログイン時） */
.header-public__notification-wrapper {
    position: relative;
    height: 30px;
}

.header-public__notification {
    position: relative;
    color: rgb(168, 168, 168);
    font-size: 28px;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.header-public__notification-icon {
    display: block;
    width: auto;
    height: 32px;
}

.header-public__notification-badge {
    position: absolute;
    top: -2px;
    right: -8px;
    width: 20px;
    height: 20px;
    background-color: var(--maincolor);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    border: solid 1px #fff;
    line-height: 20px;
}

.header-public__user-wrapper {
    position: relative;
}

.header-public__user-icon {
    display: block;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.header-public__user-icon-image {
    width: 32px;
    height: 32px;
    display: block;
}

.header-public__user-icon-image--avatar {
    border-radius: 50%;
    object-fit: cover;
}

.header-public__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(229, 229, 229);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
}

.header-public__dropdown--notification {
    width: 294px;
}

.header-public__dropdown-tabs {
    display: flex;
    border-bottom: 1px solid rgb(219, 219, 219);
    position: relative;
}

.header-public__dropdown-tab {
    flex: 1;
    padding: 16px 0 14px;
    font-family: "Google Sans Flex", 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fontgray);
    transition: color 0.2s;
    line-height: 1;
}
.header-public__dropdown-tab:hover{
    background-color: rgb(247, 247, 247);
}
.header-public__dropdown-tab.header-public__dropdown-tab--active{
    color: var(--fontcolor);
}
.header-public__dropdown-tab.header-public__dropdown-tab--active:hover{
    background-color: transparent;
}
.header-public__dropdown-tab-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 50%;
    height: 3px;
    background-color: var(--btncolor);
    transition: left 0.2s ease;
}

.header-public__dropdown-tab-indicator--right {
    left: 50%;
}

.header-public__dropdown-content {
    max-height: 350px;
    overflow-y: auto;
}

.header-public__dropdown-item {
    display: flex;
    align-items: flex-start;
    padding: 16px 18px;
    text-decoration: none;
    border-bottom: 1px solid #F3F3F1;
    transition: background-color 0.2s;
}

.header-public__dropdown-item:hover {
    background-color: rgb(247, 247, 247);
}

.header-public__dropdown-item:last-child {
    border-bottom: none;
}

.header-public__dropdown-item-icon,
.header-public__dropdown-item-avatar {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background-color: rgb(168, 168, 168);
    flex-shrink: 0;
    margin-right: 10px;
    background-image: url(../images/user-icon.svg);
}
.header-public__dropdown-item-icon{
    display: none;
}
.header-public__dropdown-item-content {
    flex: 1;
    min-width: 0;
}

.header-public__dropdown-item-text {
    font-size: 13px;
    line-height: 1.35;
    color: var(--fontcolor2);
    margin-bottom: 2px;
    font-weight: 500;
}

.header-public__dropdown-item-time {
    font-size: 11px;
    color: var(--fontgray);
}

.header-public__dropdown-item--unread {
    background-color: rgb(240, 248, 255);
}

.header-public__dropdown-item-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.header-public__dropdown-more {
    display: block;
    padding: 12px 16px;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background-color 0.2s;
    line-height: 1;
}

.header-public__dropdown-more:hover {
    background-color: rgb(247, 247, 247);
}

/* ユーザーメニュー（新デザイン） */
.header-public__user-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: -8px;
    width: 262px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.122);
    z-index: 1001;
    padding-bottom: 16px;
}

.header-public__user-menu-profile {
    display: flex;
    align-items: center;
    padding: 16px 23px 12px;
    gap: 10px;
}

.header-public__user-menu-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.header-public__user-menu-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.header-public__user-menu-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.header-public__user-menu-nickname {
    font-family: "Google Sans Flex", 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var( --fontcolor);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-public__user-menu-job {
    font-family: "Google Sans Flex", 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    font-size: 10px;
    color: var( --fontcolor);
    line-height: 1.4;
}

.header-public__user-menu-profile-btn {
    display: block;
    margin: 0 23px 8px;
    padding: 9px 0;
    text-align: center;
    text-decoration: none;
    border: 1px solid #363636;
    border-radius: 18px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: var( --fontcolor);
    background-color: #fff;
    transition: background-color 0.2s;
}

.header-public__user-menu-profile-btn:hover {
    background-color: #f7f7f7;
}

.header-public__user-menu-divider {
    height: 1px;
    background-color: #e8e8e8;
    margin: 12px 0;
}

.header-public__user-menu-section {
    display: flex;
    flex-direction: column;
}

.header-public__user-menu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 23px 8px 32px;
    text-decoration: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var( --fontcolor);
    transition: background-color 0.2s;
}

.header-public__user-menu-link:hover {
    background-color: #f7f7f7;
}

.header-public__user-menu-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var( --fontcolor);
}

.header-public__user-menu-section--bottom .header-public__user-menu-link {
    padding-left: 32px;
}

.header-public__user-menu-link--plain {
    font-weight: 400;
}

.header-public__user-menu-link--button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.header-public__unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgb(239, 68, 68);
    margin-left: 4px;
    flex-shrink: 0;
}

.header-public__user-menu-footer {
    border-top: 1px solid #e8e8e8;
    padding-top: 12px;
    margin-top: 8px;
}

.header-public__user-menu-footer-link {
    display: block;
        font-family: "Google Sans Flex", 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #8d8d8d;
    text-decoration: none;
    padding: 8px 32px;
    transition: color 0.2s;
    line-height: 1;
}
.header-public__user-menu-footer-link .material-symbols-outlined{
    font-size: 15px;
    vertical-align: middle;
}
.header-public__user-menu-footer-link:hover {
    color: #555;
}
@media (max-width: 939px) {
    .header-public__container{
        grid-template-columns: 1fr 2fr 1fr;
    }
    .header-public__nav{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr ;
    }
    .header-public__nav-item{
        max-width: 96px;
        width: auto;
    }
}

@media (max-width: 840px){
    .header-public__nav{
        gap: 12px;
    }
    .header-public__nav-text{
        font-size: 13px;
    }
}

@media (max-width: 739px) {
    .header-public__nav{
        display: flex;
    }
    .header-public__nav-item:hover,
    .header-public__nav-item.is-active{
        box-shadow: none;
    }
    .header-public{
        height: 48px;
        border-bottom: solid 1px #dcdedf;
    }
    .header-public__container,
    .header-public__container--with-nav {
        justify-content: space-between;
        gap: 0;
        padding: 0 16px;
        grid-template-columns: 1fr 1fr;
    }

    .header-public__logo,
    .header-public__container--with-nav .header-public__logo {
        width: 146px;
        margin-right: 0;
    }
    .header-public__logo-image {
        height: auto;
        width: 100%;
    }
    .header-public__nav {
        position: fixed;
        bottom: 0px;
        left: 0;
        right: 0;
        background-color: #fff;
        justify-content: center;
        gap: 4px;
        padding:16px 0 20px;
        box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        height: auto;
    }
    .header-public__nav-text{
        font-size: 10px;
        line-height: 1;
        display: inline-block;
        font-weight: 400;
    }

    .header-public__nav-item {
        flex: 1;
        width: auto;
        margin-top: 0;
        gap: 9px;
    }

    .header-public__actions {
        width: auto;
        gap: 18px;
    }
    .header-public__notification-icon{
        height: 30px;     
        margin-bottom: 0;   
    }
    .header-public__notification-badge{
        right: -8px;
    }
    .header-public__user-icon-image{
        width: 28px;
        height: 28px;
    }
    .header-public__nav-icon {
        display: block;
        width: 22px;
        height: 22px;
    }
    .header-public__container--with-nav .header-public__actions--guest{
        gap: 12px;
    }
    .header-public__login-btn{
        padding: 0;
        font-size: 12px;
    }
    .header-public__register-btn{
        font-size: 12px;
        padding: 9px 12px 10px;
    }
}

/* ========================================
   メインコンテンツ
   ======================================== */
.main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 72px;
    padding: 12px 24px;
    position: relative;
}
.group-designers.page-designers-show .main-content {
    padding: 0 0 24px;
}

.content-container {
    margin: 0 auto;
    width: 100%;
    flex: 0 0 auto;
}
.page-pages-about .content-container{
    z-index: 99;
}

/* トップページ専用 */
.page-home .main-content {
    padding: 0;
}

.page-home .content-container {
    max-width: none;
}

/* ========================================
   ログインダイアログ
   ======================================== */

/* dialog要素本体 */
.login-dialog {
    width: 420px;
    max-width: calc(100vw - 24px);
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 8px;
    padding: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

/* dialog::backdrop - モーダル背景 */
.login-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.68);
}

/* ダイアログ内コンテンツ */
.login-dialog__content {
    padding: 32px 40px 36px;
}

/* タイトル */
.login-dialog__title {
    font-family: 'Noto Sans JP', 'YuGothic', sans-serif;
    font-size: 24px;
    font-weight: 600;
    
    text-align: center;
    margin-top: 4px;
    margin-bottom: 32px;
}
.login-dialog__title span{
    font-size: 14px;
    margin: 0 6px;
    vertical-align: middle;
}

/* Googleログインボタン */
.login-dialog__google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 45px;
    margin: 0 auto 20px auto;
    background-color: #f2f2f2;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s;
}

.login-dialog__google-btn:hover {
    background-color: #e3e0e0;
}

.login-dialog__google-icon {
    width: 20px;
    height: 20px;
}

.login-dialog__google-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var( --fontcolor);
    line-height: 1;
    padding-bottom: 2px;
}

/* フォームラベル */
.login-dialog__label {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 8px;
}


/* フィールドグループ */
.login-dialog__field {
    margin-bottom: 16px;
}

/* アカウント登録セクション */
.login-dialog__register-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex-direction: column;
    border-top: solid 1px #e8e8e8;
    padding-top: 20px;
    margin-top: 24px;
}

.login-dialog__register-text {
    font-size: 13px;
    color: var(--fontcolor);
    display: none;
}

.login-dialog__register-btn {
    display: inline-block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var( --fontcolor);
    text-decoration: none;
    text-align: center;
    transition: opacity 0.2s;
}

.login-dialog__register-btn:hover {
    text-decoration: underline;
}

.login-dialog__forgot-password {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: var( --fontcolor);
    text-decoration: none;
    text-align: center;
}

.login-dialog__forgot-password:hover {
    text-decoration: underline;
}
.login-dialog__input {
    border-radius: 7px;
    border: solid 1px #d0c9cc;
}
.login-dialog__input::placeholder {
    color: #a6a6a6;
    font-weight: 100;
}
.login-dialog__logo {
    text-align: center;
    margin-bottom: 12px;
    display: none;
}
.login-dialog__logo-img {
    height: 32px;
}

@media (max-width: 768px){
    .login-dialog{
        max-width: 360px;
    }
    .login-dialog__content {
        padding: 32px;
    }
    .login-dialog__title{
        margin-bottom: 20px;
        font-size: 20px;
    }
}


/* ========================================
   パスワードリセットダイアログ
   ======================================== */
.password-reset-dialog {
    width: 396px;
    max-width: calc(100vw - 40px);
    padding: 0;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.password-reset-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.68);
}

.password-reset-dialog__content {
    position: relative;
    padding: 24px;
}

.password-reset-dialog__close {
    position: absolute;
    top: 20px;
    right: 27px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.password-reset-dialog__close:hover {
    opacity: 0.7;
}

.password-reset-dialog__title {
    font-family: 'Noto Sans JP', 'YuGothic', sans-serif;
    font-size: 18px;
    font-weight: 600;
    
    margin: 0 0 20px 0;
}

.password-reset-dialog__divider {
    width: 100%;
    height: 1px;
    background-color: #dddddd;
    margin-bottom: 24px;
}

.password-reset-dialog__description {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    color: var(--fontcolor2);
    margin: 0 0 18px 0;
}

/* フィールドグループ */
.password-reset-dialog__field {
    margin-bottom: 20px;
}

/*
   フッタ - 完全版
   ======================================== */
.footer-full {
    width: 100%;
    background-color: #ffffff;
}
.page-mypage-messages-index .footer-full{
    display: none;
}
.footer-full__bottom {
    padding: 24px;
    text-align: center;
    display: flex;
    justify-content: space-between;
}

.footer-full__copyright {
    font-family: "Google Sans Flex", sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #b7b7b7;
}

/* ========================================
   フッタ - シンプル版
   ======================================== */
.footer-simple {
    text-align: center;
}
.footer-simple-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    max-width: 940px;
    margin: auto;
}
.footer-simple__container-pc {
    width: 100%;
    padding: 24px 15px 16px;
}
.footer-simple__links{
    padding: 0;
    display: grid;
    grid-template-columns:  auto auto auto auto auto auto auto auto auto;
    grid-template-areas: 
    "about---featu service---featu help---featu  infomation---featu company---featu  terms---featu privacy---featu Cookie---featu legal---featu"
    ;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.about---featu{
    grid-area: about---featu;
}
.service---featu{
    grid-area: service---featu;
}
.help---featu{
    grid-area: help---featu;
}
.company---featu{
    grid-area: company---featu;
}
.infomation---featu{
    grid-area: infomation---featu;
}
.terms---featu{
    grid-area: terms---featu;
}
.privacy---featu{
    grid-area: privacy---featu;
}
.Cookie---featu{
    grid-area: Cookie---featu;
}
.legal---featu{
    grid-area: legal---featu;
}



.footer-simple__links a{
    color: var(--fontgray);
    font-size: 12px;
    text-decoration: none;
    margin:0;
    padding: 0;
    white-space: nowrap;
    line-height: 1;
    text-align: left;
}
.footer-simple__links a:hover{
    text-decoration: underline;
}

.f-catch---copyright{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.footer-simple__copyright {
    font-family: "Google Sans Flex", sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: var(--fontgray);
    flex-shrink: 0;
}
.footer--catch{
    font-size: 11px;
    color: var(--maincolor);
    display: flex;
    align-items: center;
}
.footer--catch .material-symbols-outlined{
    font-size: 14px;
    font-variation-settings: 'FILL' 1;
}

/*フッター上リンク集*/
.for__snslinksWrap{
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 24px 0 12px;
}
.snslinksWrap_title {
    font-size: 13px;
  position: relative;
  display: inline-block;        /* 文字の長さに合わせる */
  padding: 5px 12px;          /* 内側の余白 */
  border: 1px solid var(--fontgray);     /* 黒い点線の太さと色 */
  border-radius: 10px;         /* 角を少し丸くする */
  background-color: #fff;      /* 背景色（後ろを隠すため） */
}

/* 吹き出しの「しっぽ」部分 */
.snslinksWrap_title::before,
.snslinksWrap_title::after {
    content: "";
    position: absolute;
    top: 100%;                   /* 枠線の真下に配置 */
    left: 50%;                   /* 中央に配置 */
    border: transparent solid;   /* 一度透明にする */
    border-width: 5px 5px 0;     /* 三角形のサイズ */
}

.snslinksWrap_title::before,
.snslinksWrap_title::after {
    top: 50%;               /* 縦方向の中央 */
    left: 100%;             /* 右端の外側 */
    margin-left: 0;         /* スマホ用のマージンをリセット */
}

/* 右向きの三角（点線色） */
.snslinksWrap_title::before {
    border-width: 5px 0 5px 5px;
    border-color: transparent transparent transparent var(--fontgray);
    margin-top: -5px;       /* 自身の高さの半分戻す */
}

/* 右向きの三角（白のくり抜き） */
.snslinksWrap_title::after {
    border-width: 4px 0 4px 4px; /* 1px小さく（8px → 7px） */
    border-color: transparent transparent transparent #fff;
    margin-top: -4px;
    left: calc(100% - 0.5px); /* 枠線1px分食い込ませる */
}

@media (max-width: 768px) {
/* ==========================================
     ▼ スマホ用の設定（下側にしっぽ）
    ========================================== */
.snslinksWrap_title::before,
.snslinksWrap_title::after {
    top: 100%;
    left: 50%;
    margin-top: 0;       /* PC用のmargin-topをリセット */
}

/* 外側の三角（下向きにリセット） */
.snslinksWrap_title::before {
    border-width: 5px 5px 0;
    /* 全方向を一度透明にしてから、上だけ色をつける（これで下向きの三角になります） */
    border-color: var(--fontgray) transparent transparent transparent; 
    margin-left: -5px;
}

/* 内側の三角（下向きにリセットして1px小さく） */
.snslinksWrap_title::after {
    border-width: 4px 4px 0;    
    /* 上だけ白、他は透明 */
    border-color: #fff transparent transparent transparent; 
    margin-left: -4px;
    left: 50%;                  /* PC用のleft:100%を50%にリセット */
    top: calc(100% - 1px);       
}

}


.primary-companylinks{
    display: flex;
    justify-content: center;
    list-style: none;
    align-items: center;
    gap: 38px;
}
.primary-companylinks a{
    display: block;
    font-size: 13px;
    text-decoration: none;
    transition: color .2s;
    color: var(--fontcolor2);
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.primary-companylinks a:hover{
    color: var(--maincolor);
}
.primary-companylinks a.f-ownedmedia{
    width: 117px;
    background-image: url(../images/logos/logo_ownedmedia.png);
}
.primary-companylinks a.f-TikTok{
    width: 56px;
    background-image: url(../images/logos/logo_TikTok.svg);
}
.primary-companylinks a.f-X{
    width: 15px;
    background-image: url(../images/logos/logo_X.svg);
}
.primary-companylinks a.f-note{
    width: 43px;
    background-image: url(../images/logos/logo_note.svg);
}
.primary-companylinks a.f-Wantedly{
    width: 74px;
    background-image: url(../images/logos/logo_wantedly.png);
}

@media (max-width: 840px){
    .footer-simple-inner{
        flex-direction: column;
        justify-content: center;
        row-gap: 16px;
    }
    .footer-simple__links{
        row-gap: 12px;
    }

}

@media (max-width: 739px) {
    /* フッター下部余白（ナビゲーション表示時） */
    .footer-simple--has-nav,
    .footer-full--has-nav {
        padding-bottom: 78px;
    }
    .footer-simple__links{
        grid-template-areas: 
        "about---featu company---featu terms---featu"
        "service---featu infomation---featu privacy---featu"
        "help---featu . Cookie---featu"
        ". . legal---featu"
        ;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr 1fr 1fr 1fr ;
    }
    .f-catch---copyright{
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}



/* ========================================
   スマートフォン対応 (739px以下)
   ======================================== */
@media (max-width: 739px) {
    /* メインコンテンツ */
    .main-content {
        margin-top: 48px;
        padding-top: 0;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ========================================
   スマートフォン対応 (768px以下)
   ======================================== */
@media (max-width: 768px) {
    /* メインコンテンツ */
    .main-content {
    }

    /* トップページ専用 (SP版) */
    .page-home .main-content {
        margin-top: 72px;
        padding: 0;
    }

    .footer-full__bottom {
        padding: 12px 15px;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .footer-full__copyright {
        font-size: 12px;
    }
    .for__snslinksWrap{
        flex-direction: column;
        padding: 0 15px;
        gap: 8px;
        align-items: self-start;
    }
    .primary-companylinks{
        flex-wrap: wrap;
        gap: 16px;
        justify-content: space-between;
        width: 100%;
    }
}

/* ========================================
   会員登録 - 初期画面
   ======================================== */
.register-index {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 20px;
}

.register-index__card {
    text-align: center;
    width: 100%;
}

.register-index__welcome {
    font-size: 38px;
    font-weight: 100;
    color: var(--fontcolor);
    margin-bottom: 12px;
}

.register-index__title {
    font-size: 14px;
    font-weight: normal;
    color: var(--fontgray);
    margin-bottom: 40px;
}

.register-index__buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.register-index__google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    background-color: var(--fontcolor);
    border: 1px solid var(--fontcolor);
    border-radius: 26px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.register-index__google-btn:hover {
    opacity: 0.8;
}

.register-index__google-icon {
    width: 21px;
    height: 21px;
}

.register-index__google-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: rgb(255, 255, 255);
}

.register-index__email-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    background-color: rgb(255, 255, 255);
    background-color: var(--maincolor);
    border: solid 1px var(--maincolor);;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color 0.2s;
    margin: auto;
    padding: 0 32px;
}
.register-index__email-btn .material-symbols-outlined{
    color: #fff;
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
}
.register-index__email-btn:hover {
    background-color: #fff;
}
.register-index__email-btn:hover .register-index__email-text,
.register-index__email-btn:hover .material-symbols-outlined{
    color: var(--maincolor);
}
.register-index__email-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #fff;
    line-height: 1;
}

/* ========================================
   会員登録 - メール入力画面
   ======================================== */
.register-email {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 0;
}

.register-email__card {
    max-width: 500px;
}

.register-email__title {
    font-family: 'Noto Sans JP', 'YuGothic', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--fontcolor);
    text-align: center;
    margin-bottom: 30px;
}

.register-email__description {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: var(--fontcolor2);
    line-height: 1.8;
    margin-bottom: 30px;
}

.register-email__form {
    display: flex;
    flex-direction: column;
}

.register-email__label {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: var(--fontcolor);
    margin-bottom: 8px;
}

.register-email__submit-btn {
    margin: 24px auto 0;
}

.register-email__login-link {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: var(--fontcolor2);
    text-align: center;
    margin-top: 30px;
}

.register-email__login-anchor {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--fontcolor);
    text-decoration: underline;
    cursor: pointer;
}

/* ========================================
   会員登録 - メール送信完了画面
   ======================================== */
.register-email-sent {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 0px;
}

.register-email-sent__card {
    max-width: 500px;
}

.register-email-sent__title {
    font-family: 'Alata', 'Noto Sans JP', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--fontcolor);
    text-align: center;
    margin-bottom: 30px;
}

.register-email-sent__message {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: var(--fontcolor2);
    line-height: 1.8;
    margin-bottom: 20px;
}

.register-email-sent__notes {
    background-color: rgb(247, 247, 247);
    border-radius: 4px;
    padding: 20px;
}

.register-email-sent__note {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: var(--fontcolor2);
    line-height: 1.6;
}

.register-email-sent__note:last-child {
    margin-bottom: 0;
}

.register-email-sent__resend-link {
    color: var(--fontcolor);
    text-decoration: underline;
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
.register-email-sent__resend-link:hover{
    text-decoration: none;
}

/* ========================================
   パスワードリセット - メール送信完了画面
   ======================================== */
.password-sent {
    max-width: 840px;
    margin: 36px auto;
    padding: 0 20px;
}

.password-sent__card {
    border: 1px solid #dddddd;
    padding: 24px;
    border-radius: 4px;
}

.password-sent__message p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.password-sent__back-link {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    color: rgb(68, 68, 68);
    text-decoration: underline;
}

.password-sent__back-link:hover {
    opacity: 0.7;
}

/* ========================================
   パスワードリセット - 新パスワード入力画面
   ======================================== */
.password-reset {
    max-width: 840px;
    margin: 36px auto;
    padding: 0 20px;
}

.password-reset__card {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    padding: 40px 27px;
}

.password-reset__title {
    font-family: 'Noto Sans JP', 'YuGothic', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #444444;
    margin: 0 0 20px 0;
}

.password-reset__divider {
    width: 100%;
    height: 1px;
    background-color: #dddddd;
    margin-bottom: 24px;
}

.password-reset__description {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    color: rgb(68, 68, 68);
    text-align: center;
    margin: 0 0 24px 0;
}

.password-reset__form {
    max-width: 650px;
    margin: 0 auto;
}

.password-reset__field {
    margin-bottom: 16px;
}

.password-reset__label {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgb(68, 68, 68);
    margin-bottom: 8px;
}


/* ========================================
   パスワードリセット - 完了画面
   ======================================== */
.password-complete {
    max-width: 840px;
    margin: 36px auto;
    padding: 0 20px;
}

.password-complete__card {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    padding: 40px 27px;
}

.password-complete__title {
    font-family: 'Noto Sans JP', 'YuGothic', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #444444;
    margin: 0 0 20px 0;
}

.password-complete__divider {
    width: 100%;
    height: 1px;
    background-color: #dddddd;
    margin-bottom: 24px;
}

.password-complete__message {
    margin-bottom: 20px;
}

.password-complete__message p {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    color: rgb(68, 68, 68);
    line-height: 1.6;
    margin: 0;
}

.password-complete__back-link {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    color: rgb(68, 68, 68);
    text-decoration: underline;
}

.password-complete__back-link:hover {
    opacity: 0.7;
}

/* ========================================
   会員登録 - プロフィール入力画面
   ======================================== */
.register-profile {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 20px;
}

.register-profile__card {
    background-color: #ffffff;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
}

.register-profile__title {
    font-family: 'Noto Sans JP', 'YuGothic', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--fontcolor);
    text-align: center;
    margin-bottom: 30px;
}

.register-profile__form {
    display: flex;
    flex-direction: column;
}

.register-profile__field {
    margin-bottom: 20px;
}

.register-profile__label {
    font-size: 14px;
    color: var(--fontcolor);
    display: block;
    margin-bottom: 8px;
}

.register-profile__hint {
    font-size: 12px;
    color: var(--fontgray);
    margin: 6px 0 0;
}

.register-profile__submit-btn {
    margin: 20px auto 0 auto;
}

/* ========================================
   会員登録 - お知らせ受信オプトイン・同意文
   ======================================== */
.register-profile__opt-in {
    margin: 24px 0;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
}

.register-profile__opt-in-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 4px;
}
.register-profile__opt-in-label span{
    font-size: 16px;
}
.register-profile__opt-in-note {
    margin-bottom: 2px;
    font-size: 12px;
    color: var(--fontgray);
}

.register-profile__agreement {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--fontgray);
    line-height: 1.7;
    text-align: center;
}

.register-profile__agreement-link {
    color: var(--fontcolor);
    text-decoration: underline;
}

/* ========================================
   会員登録 - レスポンシブ対応
   ======================================== */
@media (max-width: 768px) {
    .register-index__card {
        padding: 40px 30px;
    }

    .register-index__welcome {
        font-size: 24px;
    }

    .register-index__title {
        font-size: 16px;
    }
.register-email{
    padding: 32px 0;
}
    .register-email__title,
    .register-email-sent__title,
    .register-profile__title {
        font-size: 22px;
    }

}

/* ========================================
   共通パンくずリスト (breadcrumb-top)
   ======================================== */
.page-breadcrumb {
    margin-bottom: 20px;
}

.page-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #555;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

.page-breadcrumb__link:hover {
    color: var( --fontcolor);
}

.page-breadcrumb__icon {
    font-size: 12px;
}

/* ========================================
   共通検索コンポーネント
   ======================================== */

/* ヘッダー用検索ボックス */
.header-search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 369px;
    height: 39px;
}


/* ページ用検索ボックス */
.page-search {
    position: sticky;
    top: 72px;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 12px 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari対策 */
}
.page-search__form {
    margin: 0;
}

.page-search__input-wrapper {
    position: relative;
    margin: 0 auto;
}


.page-search__button {
    position: absolute;
    right: 7px;
    top: 48%;
    transform: translateY(-47%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #fff;
    background-color: var(--maincolor);
    border-radius: 999px;
    width: 38px;
    height: 38px;
}

/* レスポンシブ対応 */
@media (max-width: 739px) {
    .header-search {
        display: none;
    }
    .page-search{
        top: 48px;
    }
    .page-search__button
    {
        right: 6px;
    }
}

/* ========================================
   共通ページネーション
   ======================================== */
.pagination {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans JP', 'YuGothic', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--fontgray);
    text-decoration: none;
    transition: color 0.2s;
}

.pagination__item:hover:not(.pagination__item--active):not(.pagination__item--disabled) {
    color: #444;
}

.pagination__item--active {
    color: var( --fontcolor);
}

.pagination__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans JP', 'YuGothic', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--fontgray);
}

.pagination__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--fontgray);
    text-decoration: none;
    transition: color 0.2s;
}

.pagination__arrow:hover {
    color: #444;
}

.pagination__arrow--disabled {
    color: #ccc;
    cursor: not-allowed;
}

/* ========================================
   ダイアログ表示時の背景スクロール防止
   ======================================== */
html:has(dialog[open]) {
  scrollbar-gutter: stable;
}
body:has(dialog[open]) {
    overflow: hidden;
}

@media (max-width: 768px){
    .sp-hide{
        display: none;
    }
}

/* ========================================
   FABボタン（投稿ボタン）共通
   ======================================== */
.fab-post-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 28px 14px 26px;
    color: #fff;
    background-color: var(--btncolor);
    border: solid 1px var(--btncolor);
    border-radius: 999px;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.1s ease;
    gap: 6px;
}
.fab-post-btn::before{
    content: "";
    display: inline-block;
    width: 28px;
    height: 18px;
    background-image: url(../images/icons/story_write.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 auto;
}
.fab-post-btn:hover {
    color: var(--fontcolor);
    background-color: #fff;
}
.fab-post-btn:hover::before{
    background-image: url(../images/icons/story_write_BK.svg);
}
.fab-post-btn__text {
    color: inherit;
    font-size: 15px;
    font-family: "Noto Sans JP", sans-serif;
    white-space: nowrap;
    transition: opacity 0.2s ease 0.1s;
    font-weight: 600;
}