.welcome-form {
    text-align: center;
    padding-left:30px;
    padding-right: 30px;
    background: #f0f3f5;
    border-bottom: 1px solid #d8d8d8;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: Arial, sans-serif;
}

.welcome-content{
    width:1200px;
    margin:0 auto;
    display:block;
    display: flex;
}


.welcome-content ul{
    padding:0;
}
.custom-ul-list {
  column-count: 5;
  column-gap: 0;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
  width:720px;
  justify-content: center;
}

.custom-ul-list li {
  break-inside: avoid;
  color: #fff;
    margin:0;
}
.head-image {
    display: block;
    margin-left:0;
    width: 150px;
    max-width: 100%;
    height: 55px;
    }

    .search-large {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        background-color: #f0f3f5;
        width:260px;
    font-size:12px;
    margin-left:5px;
    }

    .search-bar {
        display: flex;
        align-items: center;
        border: 1px solid #dcdcdc;
        padding: 5px 10px;
        background-color: #fff;
        border-radius: 12px;
        width: 260px;
    }

    .search-icon {
        background: none;
        border: none;
        padding: 0;
        margin-right: 8px;
        cursor: pointer;
    }

    .search-input {
        border: none;
        outline: none;
        width: 100%;
        font-size: 12px;
        color: #333;
    }

    .search-bar:focus-within {
        border-color: #aaa; /* フォーカス時の枠線色 */
    }


.ad-center-large{
    width:750px;
    /*height:50px;*/
    margin: 0 auto;
    /*margin-top:60px;*/

}
.ad-center-large-noAd{
    width:700px;
    margin: 0 auto;
    padding-top:60px;
}

.large-section-top{
    width:1200px;
    /*height:270px;*/
    height:330px;
    margin:0 auto;
    padding-top:60px;
}

.white-orange-underline {
    color:  rgb(0, 0, 0);
    text-decoration: none;
    position: relative;
    font-weight:600;
    padding-top:17px;
    padding-bottom:17px;
    width:100%;
    display: block;
    border-bottom:4px;
}

.white-orange-underline:hover {
    /*color: rgb(163, 163, 163);*/
    /*border-bottom:4px solid #002e8b;*/
    background: #f9fbfd;
}

.white-orange-underline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
   /* width: 0;*/
    width:100%;
    /*height: 4px;*/
    background-color: rgb(0, 81, 255); /* アンダーバーの色 */
    height: 0; /* 初期状態で高さを0に設定 */
    transition: height 0.3s ease; /* アニメーション */
}

.white-orange-underline:hover::after {
height: 4px; /* ホバー時に高さを2pxにすることで、下から上にアンダーバーが表示 */
}

.white-underline {
    color: rgb(0, 0, 0);
    text-decoration: none;
    position: relative;
    font-weight: 500;
    padding-top: 17px;
    padding-bottom: 17px;
    width: 100%;
    display: block;
    border-bottom: 2px solid transparent; /* 初期状態で非表示の下線 */
}
.white-underline:hover {
    background: #e1e1e1;
}

.white-underline:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 3px solid rgb(67, 67, 67); /* ホバー時に表示する下線 */
    /*transition: border-bottom 0.3s ease;*/
}

.white-underline:active {
    color: rgb(67, 67, 67); /* クリック時にテキスト色を変更 */
    background: #fafafa !important;
}

.white-underline:active::after {
    border-bottom-color: rgb(0, 0, 0); /* クリック時に下線を黒く変更 */
}

.white-black-underline {
    color:  rgb(0, 0, 0);
    text-decoration: none;
    position: relative;
    font-weight:500;
    font-size:14px;
    width:100%;
    display: block;
    /*border-top:8px;*/
    margin-top:5px;
    margin-left:10px;
}

.white-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    border-bottom: 1px solid rgb(196, 196, 196);
}
.dropdown {
    position: relative;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
  }

  .dropdown:hover {
    background: #fffefe;
  }

  .dropdown-list {
    display: none;
    cursor: pointer;
    position: absolute;
    background-color: #f9f9f9;
    width: 160px !important;
    text-align: left;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-size: 12px !important;
    font-family: Arial, sans-serif !important;

    right: 0; /* メニューを右揃えにする */
    top: 100%; /* メニューをアイコンの下に表示 */
  }

  .dropdown-list a {
    color: black;
    padding: 6px 10px;
    text-decoration: none;
    display: block;
  }

  .dropdown:hover .dropdown-list {
    display: block;
  }

  .dropdown-item {
    width: 100%;
  }
  .dropdown-toggle{

    /* padding-top:18px;*/
     display: block;
     appearance: none; /* デフォルトの矢印を無効化 */
     -webkit-appearance: none; /* Safari対応 */
     -moz-appearance: none; /* Firefox対応 */
     width: 100%;
     height:100%;
 }

 #dropdownMenuButton::after {
     display: none; /* ブートストラップやブラウザのデフォルトの矢印アイコンを非表示にする */
 }


.ui-button-blue {
    transition-property: background,color;
    transition-duration: .1s;
    transition-timing-function: linear;
    font-weight: 500;
    display: inline-block;
    line-height: 1.5;
    padding:8px 10px;
    margin-top:10px;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
    border: 1px solid #222;
    font-size: 14px;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    background-color: #008d05;
    border-color:#002e18;
    color: #ffffff;
}
.ui-button-blue:hover {
    background: #86d0ff;
    border-color: #f1fbff;
    color: #eef;
}

.form-control {
    width: 100%;
}
.ad-section-top{
width:320px;
margin: 0 auto;
padding-top:90px;
padding-bottom:15px;
height: 100px;
}
.ad-section-top-noAd{
width:320px;
margin: 0 auto;
padding-top:90px;
padding-bottom:15px;
height: 20px;
}
.logo{
    width: 150px;
    height: 55px;
}
.slogan{
    width: 150px;
    height: 25.5px;
}
/*small*/

.welcome-form-small {
    text-align: center;
    background: #ffffff;
    display: flex;
    width: 100%;
    position: fixed;
    color: rgb(71, 166, 255);
    z-index: 1000;
  top: 0;
  left: 0;
  height: 89.7px;

}
.welcome-form-small nav{
    flex:1 0 100%;
    width:100%;
}
.env-top{
    display: flex;
    border-bottom:1px solid #ccc;
    width:100%;
}
.env{
    margin-left:30px;
    /*margin-top:3px;*/
    margin-bottom:3px;
    margin-right:20px;
}
.dropdown-small {
    position: relative;
    display: inline-block;
  }


  .dropdown-small-menu {
    display: none;
    cursor: pointer;
    position: absolute;
    background-color: #f9f9f9;

    width:200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1005;
    font-size:12px !important;
    top: 100%;
    right: 0;
    margin-top:2px;
  }

  .dropdown-small-menu a {
    color: black;
    padding: 6px 10px;
    text-decoration: none;
    display: block;
  }

  .dropdown-small:hover .dropdown-small-menu {
    display: block;
  }
  .dropdown-small-item{
        width:100%;
  }


.user-top{
    display: flex;
    padding-top: 6px;
    padding-bottom:6px;
}
.ui-button-blue-small {
    transition-property: background,color;
    transition-duration: .1s;
    transition-timing-function: linear;
    font-weight: 500;
    /*display: inline-block;*/
    display: block;
    /*line-height: 1.5;*/
    padding: 5px 6px;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
    border: 1px solid #222;
    font-size: 12px;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    background: #4eafe7;
    border-color: #0f9ad5;
    color: #fff;
}
.ui-button-blue-small:hover {
    background: #86d0ff;
    border-color: #f1fbff;
    color: #eef;
}
.paren-open {
    margin: 0 0 0 -0.25em;
}
.paren-close-last {
    margin: 0 -0.5em 0 0;
}
.svg-icon {
    width: 18px;
    height: 18px;
}
.svg-icon-small {
    width: 22px;
    height: 22px;
    margin:0 auto;
    display: block;
}
.svg-icon-dropdown {
    width: 22px;
    height: 22px;
    margin:0 auto;
}
.svg-icon-header{
    width:18px;
    height:18px;
    margin-right: 5px;

}
.flex-show{
    display: flex;
    border-bottom:1px solid#ccc;
}
.custom-ul-list-small {
    column-count: 4;
    column-gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
    width:300px !important;
    display: block;
    margin-top:5px;
    margin-right:15px;
    margin-left:15px;
  }
  .custom-ul-list-small li {
    break-inside: avoid;
    padding: 0;

    color: #fff;
    width: 100%;
    margin:0 auto;
  }
.header-text{
   /* width:40px;*/
    font-size:11px !important;
    margin:0 auto ;
    word-wrap: none;
    color:#000000;
    display:block;
}

.header-content{
    display: block;
    /*width:40px;*/
    white-space: nowrap;
    z-index: 1002;
    padding-bottom:3px;
}
.top-large-ad{
    padding-top:60px;
}
.active-nav .header-text { color:#0066ff; font-weight:600; }

.active-nav .svg-icon-small{
    filter: invert(26%) sepia(95%) saturate(3095%) hue-rotate(204deg) brightness(96%) contrast(102%);
}
    .home-top {
        width: 728px;
        height: 90px;
        /*padding-top:50px;*/
    }
        .home-top-small-noAd{
        height:50px;
    }
@media screen and (min-width: 481px) {
.welcome-form-small{
    display:none;
}
.ad-section-top,.home-top-small-noAd{
    display: none;
}
.ad-section-top-noAd{
    display: none;
}
}
@media screen and (max-width: 480px) {
    .ad-center-large-noAd{
        display: none;
    }
.large-section-top{
    /*width:390px;*/
    width: 100%;
    height:105px;
    margin:0 auto;
}
.head-image {
    width: 100px;
    height: 37px;
    }
    .logo{
        width: 100px;
    height: 36.7px;
    margin-top:2px;
    margin-left:0;
margin-right:0;
padding-right:0;
}
.slogan{
    width: 60px;
    height: 11px;
    margin-left:0;
    margin-right:0;
padding-right:0;
    /*margin: auto 0 auto 0;*/
}
.svg-icon {
    width: 20px;
    height: 20px;
}
.welcome-form{
    display:none;

}

.ad-center-large{
    display: none;
}

}
.notif {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  margin-left: 12px;
}

.notif-toggle {
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
}

.notif-toggle:hover { background: #e9e9e9; }
.notif-toggle:focus-visible { outline: 2px solid #fb923c; outline-offset: 2px; }


.notif-icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
}
.notif-icon-small {
  position: relative;
  display: inline-block;

}
.svg-icon-notif-small {
    width: 20px;
    height: 20px;
    margin:0 auto;
    display: block;
}

.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: #e3342f;
  box-shadow: 0 0 0 2px #fff;
  display: none;
  pointer-events: none;
}

.notif-menu {
  position: absolute;
  right: 0;
  top: calc(100%);
  width: 360px;
  max-height: 480px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 8px 0;
  display: none;
  z-index: 3000;
}

.notif-menu.open {
  display: block !important;
}

.notif-head{
    font-size:12px;
    font-weight: 600;
    border-bottom:1px solid #000;
    padding:2px 0 ;
}
.notif-loading { padding: 12px 16px; font-size: 14px; color: #6b7280; }
.notif-list { list-style: none; margin: 0; padding: 0; }

.notif-item .notif-label { font-size: 12px; color: #6b7280; margin-right: 6px; }
.notif-item .notif-text { font-size: 14px; color: #111827; display: inline; }
.notif-item .notif-time { display: block; font-size: 12px; color: #9ca3af; margin-top: 4px; }
.notif-footer { padding: 8px 16px; text-align: right; }


.notif-item { padding: 10px 12px; border-bottom: 1px solid #cacaca; }
.notif-item:last-child { border-bottom: none; }

.notif-item a.notif-link { display: block; color: inherit; text-decoration: none; }

.notif-menu.closing,
.notif-menu.closing * {
  transition: none !important;
  animation: none !important;
}

.message-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.message-label {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: #f3f4f6;
    flex:0 0 auto;
}
.message-from {
  font-size: 12px;
  font-weight: 500;
  color: #111827;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.message-date {
  font-size: 12px;
  color: #9ca3af;
  flex: 0 0 auto;
}

.message-body { margin-top: 6px; }



/* ラベルの色（type 別） */
.message-label.is-comment      { color:#d02d2d; background:#fdeaea; border-color:#f7c8c8; }
.message-label.is-commentReply { color:#d02d2d; background:#fdeaea; border-color:#f7c8c8; }
.message-label.is-review       { color:#1e7cff; background:#eaf2ff; border-color:#c9dcff; }
.message-label.is-followTitle  { color:#00c96b; background:#e8fbf3; border-color:#bff3dc; }
.message-label.is-followUser   { color:#ea9a05; background:#fff3dd; border-color:#ffd889; }
.message-label.is-announcement { color:#ff007b; background:#ffe6f1; border-color:#ffc4dd; }


.message-title { font-size: 13px; font-weight: 600; color:#111827; margin-bottom: 4px; }
.message-work  { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color:#111827; }
.work-title    { color:#111827; }
.work-subtitle { color:#374151; }

.message-text  {
    font-size: 13px;
    color:#111827;
    font-weight: 600;
}
.notif-small {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
}

.notif-small .notif-toggle {
  height: 44px;                 /* タップしやすい高さ */
  min-width: 44px;
  padding: 0 8px;
}

/* ヘッダ */
.notif-menu .notif-head {
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}

/* 閉じる時にトランジションを殺す（既存） */
.notif-menu.closing,
.notif-menu.closing * {
  transition: none !important;
  animation: none !important;
}

.notif-close {
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background:#f7f7f7;
}

.notif-close:hover { background: #f3f4f6; }
.notif-close:active { background: #e5e7eb; }

.notif-menu.notif-menu-small {
  position: fixed;
  left: 0;
  right: 0;
  top: 120px;
  width: 100vw;                  /* 横幅いっぱい */
  max-height: calc(100vh - 120px);
  -webkit-overflow-scrolling: touch;
  z-index: 4000;
  padding-bottom:15px;
}

.notif-menu .notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
}
.notif-title {
  font-size: 14px;
  font-weight: 700;
}


.notif-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: none;
  z-index: 3500;
}

.notif-menu.open + .notif-backdrop { display: block; }

.notif-menu.closing,
.notif-menu.closing * {
  transition: none !important;
  animation: none !important;
}
.pink-link{
    border:1px solid #c04600;
    background: #f7e4f7;
}
.pink-link:hover{
    border:1px solid #c04600;
    background: #e4c0e4;
}
.main-link{
    border:1px solid #204af0;
    background: #e4ebf7;
}
.main-link:hover{
    border:1px solid #204af0;
    background: #abbad3;
}
@media screen and (max-width: 480px) {
    .notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #e3342f;
  box-shadow: 0 0 0 2px #fff;
  display: none;
  pointer-events: none;
}
}