@charset "UTF-8";

html {
  font-size: 62.5%;
}

body{
  font-size: 1.6rem;
  font-family: 'Zen Maru Gothic', sans-serif;
  color: #333;
}

a{
  text-decoration: none;
}

.wrap{
  width: 100%;
  padding: 0px;
  margin: 0 auto;
}

/** 768px以上 **/
@media (min-width: 768px){
  .wrap{
    padding: 0 10px;
    max-width: 750px;
  }
}

/** 1250px以上 **/
@media (min-width: 1250px){
  .wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
}


.link_hoverUnder:hover{
  text-decoration: underline;
}

/* ヘッダー */
.header{
  background: #e7b4cc;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1000;
}

.header_inner{
  align-items: center;
  color: white;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  height: 70px;
  padding: 0 20px;
}

.header_app_inner{
  justify-content: space-between;
}

.header_auth_inner{
  justify-content: center;
}

.header_logo{
  z-index: 1000;
}

.header_auth_logo{
  margin-right: 0;
}

.site_title{
  font-size: 1.7rem;
  font-weight: bold;
  text-decoration: none;
}

.header_userName{
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 7px;
}

.header_userMenu{
  position: relative;
  z-index: 1000;
}

.userMenu_label{
  display: flex;
  align-items: center;
  font-weight: bold;

  & svg{
    height: 30px;
    margin-top: 2px;
    transition: all 150ms linear;
  }
}

.userName{
  display: none;
}

.userMenu_content{
  background: white;
  border-radius: 3px;
  color: #333;
  display: block;
  position: absolute;
  transform: translateY(20px);
  transition: all 200mslinear;
  top: 53px;
  right: -22px;
  font-size: 1.6rem;
  opacity: 0;
  pointer-events: none;
  box-shadow: -3px 4px 5px -4px rgba(0, 0, 0, 0.3);

  & a{
    display: flex;
    align-items: center;
    padding: 13px 30px;
    text-wrap: nowrap;
    white-space: nowrap;
    font-weight: bold;

    & svg{
      height: 1.7rem;
      width: 1.7rem;
      max-inline-size: none;
      margin-right: 10px;
    }
  }

  & a:hover{
    background: #f2f2f2;
  }
}

.userMenu_dropdown:checked,
.userMenu_dropdown:not(:checked),
.sukiPost_menu_dropdown:checked,
.sukiPost_menu_dropdown:not(:checked){
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.userMenu_dropdown:checked + .userMenu_label:before,
.userMenu_dropdown:not(:checked) + .userMenu_label:before,
.sukiPost_menu_dropdown:checked + .sukiPost_menu_label:before,
.sukiPost_menu_dropdown:not(:checked) + .sukiPost_menu_label:before{
  position: fixed;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: auto;
  pointer-events: none;
}

.userMenu_dropdown:checked + .userMenu_label:before,
.sukiPost_menu_dropdown:checked + .sukiPost_menu_label:before{
  pointer-events: auto;
}

.userMenu_dropdown:checked ~ .userMenu_content,
.sukiPost_menu_dropdown:checked ~ .sukiPost_menu_content{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.userMenu_dropdown:checked + .userMenu_label svg{
  transform: rotate(180deg);
}

.header_loginBtn{
  background: #e7b4cc;
  border-radius: 30px;
  display: flex;
  gap: 4px;
  font-size: 1.3rem;
  align-items: center;
  color: white;
  font-weight: bold;
  padding: 10px 19px;
  transition: all 150ms linear;

  & svg{
    height: 20px;
  }

  &:hover{
    background: #e38ab4;
  }
}

@media (min-width: 768px){
  .header_inner{
    padding: 0;
  }

  .site_title{
    font-size: 1.9rem;
  }

  .userName{
    display: block;
  }

  .userMenu_content{
    font-size: 1.4rem;
  }
}

/* フッター */
.footer{
  background: white;  
}

.footer_inner{
  padding-top: 30px;
  padding-bottom: 15px;
}

.footer_nav{
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
  
  & a{
    font-size: 1.3rem;
    text-decoration: none;    
  }

  & a:hover{
    text-decoration: underline;
  }
}

.copyright{
  font-size: 1.4rem;
  text-align: center;
}

/* メイン */
.main{
  background: white;
  margin-top: 70px;
  min-height: 100vh;
  padding-bottom: 50px;
}

.content_container{
  padding-top: 0;
  padding-bottom: 30px;
}

.content_inner{
  background: white;
  border-radius: 3px;
  padding: 40px 20px;
  padding-top: 50px;
  font-size: 1.52rem;

  & h1{
    font-size: 2.6rem;
    margin-bottom: 20px;
  }
}

.content_inner_h2{
  font-size: 2rem;
  margin-top: 40px;
  margin-bottom: 20px;
}

@media (min-width: 768px){
  .main{
    background: #f2f8ef;
    min-height: 1500px;
  }

  .content_container{
    padding-top: 100px;
  }

  .content_inner{
    padding: 40px;
    padding-top: 50px;
  }
}

/** ログインページ */
.auth_inner{
  padding-top: 100px;
  max-width: 650px;
  margin: 0 auto;
}

.authBox{
  background: white;
  border-radius: 3px;
  padding: 20px;
  padding-top: 30px;
  font-size: 1.5rem;
  & h1{
    font-size: 2.6rem;
    text-align: center;
    margin-bottom: 40px;
  }

  & h2{
    font-size: 2.1rem;
    margin-bottom: 20px;
    margin-top: 50px;
  }
}

.login_to_signupBox{
  border-top: 1px solid #a1a1a1;
  margin-top: 70px;
  padding-bottom: 20px;
}

@media (min-width: 768px){
  .authBox{
    padding: 30px 80px;
    padding-top: 45px;

    & h1{
      font-size: 3rem;
    }
  }
}

@media (min-width: 1250px){


}

/** ボタン **/
.btn{
  border: none;
  border-radius: 33px;
  padding: 10px 30px;
  cursor: pointer;
}

.btn_box{
  text-align: center;
  margin-top: 40px;
}

.btn_blue{
  background: #586994;
  color: #FAF3E0;
  &:hover{
    background: #4a5f7d;
  }
}

.btn_pink{
  background: #e7b4cc;
  color: white;
  &:hover{
    background: #e38ab4;
  }
}

.btn_link{
  background: white;
  border-radius: 33px;
  border: 2px solid #006ce0;
  color: #006ce0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 4px 18px;
  min-height: 40px;
  transition: all 150ms linear;

  &:hover{
    color: #002b66;
    border: 2px solid #002b66;
  }

  & svg{
    height: 1.6rem;
  }
}

.btn_cancel{
  color: #006ce0;
  font-weight: bold;
  display: inline-block;
  &:hover{
    color: #002b66;
    background: #f0fbff;
  }
}

.btn_themeItem_more{
  border: 1px solid #ccc;
  border-radius: 3px;
  display: block;
  font-size: 1.2rem;
  padding: 10px 20px;
  text-align: center;
  margin-top: 10px;
  &:hover{
    background: #f0f0f0;
  }
}

.btn_basic {
  padding: 8px 14px;
  border-radius: 3px;
  border:none;
  background: #0ea5e9;
  color: #fff;
  cursor: pointer;
  font-size:1.2rem;
  position: fixed;
  right: 20px;
  bottom: 50px;
  transition: opacity .28s ease, transform .32s ease;
  z-index: 999;
}

.btn_basic:hover { background: #0284c7; }
.btn_basic.is-hidden { opacity: 0; transform: translateY(14px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .btn_basic { transition: none; }
  .btn_basic.is-hidden { transform: none; }
}

.btn_disabled{
  cursor: not-allowed;
}

@media (min-width: 768px){
  .postModal_dialog { margin: 0; }
  .btn_basic {
    position: absolute;
    transform: none;
    right: 30px;
    top: -25px;
    bottom: initial;
  }
}


/** フォーム **/
.form{
  margin-top: 30px;
}

.form_item{
  margin-bottom: 20px;

  & span{
    font-size: 1.4rem;
    display: block;
    margin-bottom: 5px;
  }
}

.form_itemBox{
  margin-bottom: 30px;

  & h2{
    margin-bottom: 10px;
  }
}

.form_item_desc{
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.form_bottom{
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;

  & a{
    color:#0061d5;
    font-size: 1.4rem;
    &:hover{
      text-decoration: underline;
    }
  }
}

.form_warning{
  font-size: 1.4rem;
  margin-bottom: 20px;
  font-weight: bold;
  color: #bd2b2b;
}

/* フラッシュメッセージ */
.flash{
  border-radius: 3px;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 5px 10px;
}

.flash_success{
  background: #b4f7b4;
  border: 1px solid #7ed97e;
  color: #333;
}

.flash_error{
  background: #ff9c9c;
  border: 1px solid #e18585;
  color: #333;
}

/* パスワード */
.form_passwordBox{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
}

.form_passwordBox_item{
  position: relative;
  width: 100%;
  line-height: initial;
}

.passwordEye{
  display: none;
}

.input_passwordEye{
  background: initial;
  border: none;
  position: absolute;
  top: 13px;
  right: 16px;
  & svg{
    height: 2rem;
    color: #717171;
  }
}

.form_password_forgot_linkBox{
  margin-top: 5px;
  text-align: right;
  font-size: 1.3rem;
  & a{
    color: #006ce0;
    text-decoration: none;
  }
  & a:hover{
    text-decoration: underline;
  }
}

.input{
  width: 100%;
  background: white;
  border-radius: 3px;
  border: 1px solid #ccc;
  padding: 10px 15px;
  font-size: 1.55rem;
}

.input_select{
  min-width: 70px;
  width: auto;
  padding-right: 35px;
}

.input_mini{
  width: 50%;
}

.input_flex{
  display: flex;
  gap: 10px;
}

.input_stack{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input_error_word{
  color: red;
  font-weight: bold;
}

.checkTerms{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;

  & input{
    margin-right: 10px;
  }

  & a{
    text-decoration: underline;
  }

  & a:hover{
    text-decoration: none;
  }
}

.selectWrapper {
  position: relative;
  & select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}

.selectWrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #64748b;
  transform: translateY(-50%);
}


/** 設定 **/
.settings_container{
  max-width: 720px;
  margin: 0 auto;
}

.settings_header{
  font-size: 2rem;
  margin-bottom: 13px;
}

.settings_title{
  font-size: 2.6rem;
  margin-bottom: 15px;
}

.settings_main{
  background: white;
  border-radius: 3px;
  padding: 40px 20px;
  padding-top: 50px;
  font-size: 1.52rem;
  line-height: 2.8rem;

  & h3{
    margin-bottom: 12px;
    margin-top: 35px;
  }
}

.settings_main_titleH2{
  font-size: 2rem;
  margin-bottom: 20px;
}

.settings_content{
  padding-top: 50px;
}

.settings_rows{
  margin-top: 30px;
}

.settings_row{
  border-bottom: 1px solid #ccc;
  padding: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings_row_title{
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 3px;
}

.settings_description,
.settings_row_value{
  font-size: 1.3rem;
  color: #666;
}

.settings_row_btn{
  border: 1px solid #ccc;
  border-radius: 33px;
  padding: 8px 19px;
  padding-top: 10px;
  font-size: 1.3rem;

  &:hover{
    background: #f2f2f2;
    text-decoration: none;
  }
}

.settings_listBox{
  margin-bottom: 10px;
  padding-top: 20px;
}

.settings_listBox_logout{
  margin-top: 50px;
  text-align: center;
  padding: 0;
  
  .settings_list_itemTitle{
    font-size: 1.3rem;
  }
}

.settings_listBox_item{
  font-size: 1.4rem;
  padding: 20px 0;
}

.settings_list_itemLink{
  transition: all 60ms linear;
  &:hover{
    color: #e7b4cc;
  }
}

.settings_list_itemTitle{
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.settings_list_itemDescription{
  font-size: 1.3rem;
  color: #666;
}

.settings_accountDeleteBox{
  margin-top: 50px;
  text-align: center;
}

.settings_accountDeleteLink{
  font-size: 1.3rem;
  color: gray;
  font-weight: bold;
  border-bottom: 1px solid gray;

  &:hover{
    border-bottom: none;
  }
}

.settings_accountDeleteDescription{
  font-size: 1.3rem;
  color: #666;
  margin-bottom: 10px;
}

.settings_accountOtherBox{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 35px;
  margin-bottom: 25px;
}

.settings_accountOtherLink{
  font-size: 1.3rem;
  border-bottom: 1px solid #ccc;

  &:hover{
    border-bottom: none;
  }
}

/** 1250px以上 **/
@media (min-width: 1250px){
  .settings_listBox_logout{
    text-align: left;
  }
}

/** 768px以上 **/
@media (min-width: 768px) {
  .settings_main{
    padding: 40px;
    padding-top: 50px;
    position: relative;
  }

  .settings_container{
    padding-top: 100px;
  }
}


/** ステータス **/
.status{
  color: white;
  padding: 5px 8px;
  border-radius: 3px;
  font-size: 1.2rem;
  font-weight: bold;
}

.status_1{
  background: #f9f997;
  color: #333;
}

.status_2,
.letter_status_2{
  background: #18bb18;
}

.status_3,
.status_6,
.letter_status_3,
.letter_status_4{
  background: #5a5a5a;
}

.status_4,
.letter_status_1{
  background: #8484ff;
}

.status_5{
  background: #21c2d3;
}

/** プロフィール **/
.profile_header{
  background: #f2f8ef;
}

.profile_header_inner,
.profile_body_inner{
  padding: 0 20px;
  margin: 0 auto;
}

.profile_header_inner{
  padding-bottom: 10px;
  padding-top: 30px;
}

.profile_body_inner{
  display: flex;
  flex-wrap: wrap;
}

.profile_header_infos{
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
  align-items: center;

  & img{
    height: 85px;
    width: 85px;
  }
}

.profile_header_rightBox{
  text-align: left;
  width: 100%;
}

.profile_header_action{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.profile_header_myProfile{
  font-weight: bold;
  font-size: 1.3rem;
  color: #6b6b6b;
}

.profile_penName{
  font-size: 2.3rem;
}

.profile_actionBox_btn {
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 4px 18px;
  min-height: 40px;
  text-align: center;
  transition: all 150ms linear;
  width: 100%;
  border: 1px solid #e7b4cc;

  & svg {
    height: 1.6rem;
  }
}

.profile_actionBox_btn.favoOn {
  background: #e7b4cc;
  color: white;

  &:hover {
    background: white;
    color: #bd9fb0;
  }
}

.profile_actionBox_btn.favoOff {
  background: white;
  color: #bd9fb0;

  &:hover {
    background: #e7b4cc;
    color: white;
  }
}

.rs_profile_table{
  width: 100%;
  font-size: 1.4rem;
  border-collapse: collapse;
  text-align: left;

  & th{
    background: #f2f8ef;
    width: 150px;
  }

  & td, th{
    border: 1px solid #dee3db;
    padding: 10px 15px;
  }
}

.animal_icon{
  background: white;
  border: 2px solid #ccc;
  border-radius: 100%;
  height: 125px;
  width: 125px;
}

.profile_okurisaki{
  font-size: 1.5rem;
}

.profile_message{
  color: #666;
  font-size: 1.5rem;
  line-height: 2.7rem;
  margin-bottom: 15px;
}

.profile_body{
  background: white;
  min-height: 800px;
}

.profile_container{
  max-width: 720px;
  margin: 0 auto;
}

.profile_body_inner{
  max-width: 720px;
  margin: 0 auto;
}

/** プロフィール タブ **/
.profile_tabBox_inner{
  max-width: 720px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.profile_tabBox{
  width: 100%;
  display: flex;
}

.profile_tabBox_Item{
  width: calc(33.33333%);
  text-align: center;
  & a{
    display: block;
    padding: 15px;
    font-size: 1.3rem;
  }
}

.profile_tabLink{
  background: #f2f2f2;
  opacity: .5;
  border-bottom: 1px solid #ccc;
}

.profile_tabLink_active{
  background: white;
  opacity: 1;
  font-weight: bold;
}

/***************************************/
.profile_body_imgBox{
  margin-bottom: 70px;
  width: 100%;
}

.profile_image{
  border: 1px solid #ccc;
  border-radius: 3px;
}

.profile_body_recommendBox{
  width: 100%;
}

.profile_body_recommend_userList{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

  .riputomo_userItem{
    width: calc(50% - 10px);
  }
}

.profile_body_recommend_title{
  margin-bottom: 30px;
}

.profile_report{
  color: #5f5f5f;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  margin-bottom: 20px;
  justify-content: end;

  & svg{
    height: 1.5rem;
    margin-right: 5px;
  }

  & a:hover{
    text-decoration: underline;
  }
}

.profile_header_word{
  background: #d4efd4;
  border-radius: 3px;
  color: #333;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 15px;
  position: relative;
  &::after{
    content: '';
    position: absolute;
    top: -20px;
    left: 29px;
    border: 10px solid transparent;
    border-bottom: 10px solid #d4efd4;
    width: 0;
    height: 0;
  }
}

.profile_header_badgeList{
  display: flex;
  gap: 10px;
  margin-bottom: 15px;

  & img{
    height: 25px;
  }
}

.profile_h2{
  font-size: 2.2rem;
  margin-top: 50px;
  margin-bottom: 20px;
}

.profile_sukiPostBox{
  margin: 0 auto;
  width: 100%;
}

/*
* ユーザータグ
*/
.profile_userTagBox{
  margin-bottom: 15px;
}

.related_userTagsBox{
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 10px 15px;
}

.related_userTagsBox_title{
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.userTagsBox_lists{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.userTag{
  background: #e7e7e7;
  border-radius: 22px;
  color: gray;
  padding: 5px 16px;
  font-size: 1.2rem;
  display: block;
  &:hover{
    background: #dce2da;
  }
}

@media (min-width: 768px){

  .profile_penName{
    font-size: 2.6rem;
  }

  .profile_okurisaki{
    font-size: 1.5rem;
  }

  .profile_header_inner{
    padding: 50px 0;
    padding-bottom: 20px;
  }

  .profile_body_inner{
    padding: 0;
    padding-bottom: 30px;
  }

  .profile_body_recommendBox{
    padding: 0;
  }
}

/** プロフィール 手紙の履歴**/
.profile_letter_historyBox{
  width: 100%;
}

.profile_letter_history{
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 100%;
  max-height: 700px;
  overflow: auto;
}

.profile_letter_history_warning{
  font-size: 1.2rem;
  color: #333;
  margin-top: 5px;
}

/** アカウント削除画面 **/
.userDelete_list{
  color: red;
  font-weight: bold;
  list-style: decimal;
  margin: 20px 0 20px 20px;
}

/** やることリスト **/
.task_inner{
  background: #d3ffd3;
  border: 2px solid #8ccf8b;
  border-radius: 3px;
  padding: 25px;
  padding-top: 30px;
  margin-bottom: 12px;
  font-size: 1.4rem;

  a{
    color: #006ce0;
    font-weight: bold;
    text-decoration: underline;

    &:hover{
      text-decoration: none;
    }
  }
}

.task_title{
  display: flex;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
  font-size: 1.7rem;
  & svg{
    height: 27px;
    margin-right: 10px;
  }
}

@media (min-width: 768px){
  
}

/** プラン選択 **/
.plan_selectBox{
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 50px;
  margin-bottom: 20px;
}

.plan_card{
  background: white;
  display: flex;
}

.plan_radio{
  display: none;

  &:checked ~ .plan_details{
    border: 2px solid #42d942;
  }
}

.plan_details{
  border: 2px solid #ccc;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  padding: 25px 30px;
}

.plan_price{
  font-size: 2.6rem;
  font-weight: bold;
}

.plan_appeal{
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.5rem;
}

.plan_next{
  text-align: center;
  margin-bottom: 10px;
}

.plan_addendum{
  display: block;
  font-size: 1.3rem;
  text-align: center;
}

/**
* お気に入り
**/
.follow_listBox{
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.follow_userBox{
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  padding: 20px;
  position: relative;
}

.follow_user_img{
  margin-right: 20px;
  border: 1px solid #ccc;
  border-radius: 47px;
  & img{
    width: 65px;
  }
}

.follow_delete_link{
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  position: absolute;
  top: 20px;
  right: 20px;

  & svg{
    height: 20px;
    width: 20px;
    margin-right: 10px;
  }

  &:hover{
    text-decoration: underline;
  }
}

.follow_user_details{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.follow_user_name{
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 0;

  & a:hover{
    text-decoration: underline;
  }
}

.follow_user_okurisaki{
  font-size: 1.5rem;
  font-weight: initial;
}

.follow_user_message{
  font-size: 1.3rem;
}

/*
* 手紙の履歴
*/
.letter_listBox{
  margin-top: 50px;
  border-spacing: 0px;
}

.letter_listTable{
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  border-collapse: collapse;

  & tr th{
    padding: 13px 0;
  }

  & tr{
    box-shadow: inset 0 -1px 0 0 #ebeef1;
  }

  & tbody tr:hover{
    background: #f6f8fa;
  }

  & tr td{
    text-align: center;
    padding: 13px 25px;
    font-size: 1.3rem;

    & a{
      color: #006ce0;
      text-decoration: none;
    }

    & a:hover{
      color: #002f6d;
      text-decoration: underline;
    }
  }
}

@media (min-width: 1250px){
  .letter_listTable{
    display: table;
    width: 100%;
  } 
}

/*
* りぷ友検索
*/
.riputomo_inner{
  background: white;
  border-radius: 3px;
  padding: 20px;
  padding-top: 30px;
  margin-bottom: 12px;
  font-size: 1.52rem;
}

.ripuSearch_title{
  font-size: 2.6rem;
  margin-bottom: 30px;
}

.ripuSearch_box{
  margin-bottom: 35px;
  position: relative;
}

.ripuSearch_boxs{
  margin-bottom: 60px;
}

.ripuSearch_box_title{
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 15px;
  display: block;
}

.ripuSearch_item{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 10px;
  margin-bottom: 10px;
  min-height: 40px;
}

.ripuSearch_item_title{
  font-size: 1.4rem;
  font-weight: bold;
  width: 100%;
  margin-bottom: 5px;
}

.ripuSearch_item_inputs{
  display: flex;
  align-items: center;
  gap: 10px;
}

.ripuSearch_btnBox{
  text-align: center;
}

.ripuSearch_tabs{
  margin-bottom: 50px;
}


.ripuSearch_tabs_label{
  background: #f2f2f2;
  border: 1px solid #cccccc;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  padding: 15px 0;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  display: block;
  float: left;
  text-align: center;
  position: relative;
  width: 50%;
}

.ripuSearch_tabs_radio{
  display: none;

  &:checked + .ripuSearch_tabs_label{
    background: white;
    border-radius: 3px 3px 0 0;
  }

  &:checked + #ripuSearch_tabs_label_userTag{
    border-right: 1px solid #cccccc;
  }

  &:checked + #ripuSearch_tabs_label_keyword{
    border-left: 1px solid #cccccc;
  } 

  &:not(checked) + #ripuSearch_tabs_label_keyword{
    border-left: none;
    &::after{
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 1px;
      background: #cccccc;
    }
  }
}

#ripuSearch_tabs_radio_keyword:checked + #ripuSearch_tabs_label_userTag::after{
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #f2f2f2;
}

#ripuSearch_tabs_radio_keyword:checked + #ripuSearch_tabs_label_keyword::after,
#ripuSearch_tabs_radio_userTag:checked + #ripuSearch_tabs_label_userTag::after{
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: white;
}

#ripuSearch_tabs_radio_userTag:not(:checked) + #ripuSearch_tabs_label_userTag {
  opacity: .5;
}

#ripuSearch_tabs_radio_keyword:not(:checked) + #ripuSearch_tabs_label_keyword {
  opacity: .5;
}

#ripuSearch_tabs_content_keyword{
  border-radius: 3px 0px 3px 3px;
}

#ripuSearch_tabs_content_userTag{
  border-radius: 0px 3px 3px 3px;
}

#ripuSearch_tabs_label_userTag{
  border-right: none;
}

.ripuSearch_tabs_content{
  border: 1px solid #cccccc;
  display: none;
  padding: 20px;
  clear: both;
}

#ripuSearch_tabs_radio_keyword:checked ~ #ripuSearch_tabs_content_keyword,
#ripuSearch_tabs_radio_userTag:checked ~ #ripuSearch_tabs_content_userTag{
  display: block;
}

#userTag_Suggestion_Box{
  display: none;
  position: absolute;
  border: 1px solid #ccc;
  background-color: white;
  width: calc(100% - 2px);
  max-height: 150px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.userTag_Suggestion_Box_item{
  padding: 8px 12px;
  cursor: pointer;
  &:hover{
    background-color: #f0f0f0;
  }
}

@media (min-width: 768px){
  .riputomo_inner{
    padding: 40px;
    padding-bottom: 25px;
  }

  .ripuSearch_item{
    flex-wrap: nowrap;
  }

  .ripuSearch_item_title{
    min-width: 110px;
    width: initial;
    margin-bottom: 0;
  }
}

/** りぷ友検索のユーザーリスト **/
.riputomo_userList{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.riputomo_userItem{
  background: #F2F8EF;
  border-radius: 7px;
  width: 100%;
  border: 3px solid #f2f8ef;
  overflow: hidden;

  &:hover{
    transform: translateY(3px);
  }
}

.riputomo_userItem_header{
  max-height: 160px;
  overflow: hidden;
}

.riputomo_userItem_thumb{
  width: 100%;
}

.riputomo_userItem_details{
  font-size: 1.2rem;
  padding: 10px;
  position: relative;
  padding-top: 48px;
}

.riputomo_userItem_animalIcon{
  background: white;
  border: 3px solid #f2f8ef;
  border-radius: 100%;
  height: 95px;
  width: 95px;
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 888;
}

.riputomo_userItem_penName{
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 18px;
}

.riputomo_userItem_message{
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.riputomo_userItem_badge{
  display: flex;
  & img{
    height: 25px;
  }
}

.riputomo_userItem_word{
  background: #d4efd4;
  color: #333;
  padding: 5px 10px;
  font-weight: bold;
  margin-bottom: 15px;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: -13px;
    left: 50%;
    border: 6px solid transparent;
    border-bottom: 7px solid #d4efd4;
    width: 0;
    height: 0;
  }
}

.riputomo_notFound_btnBox{
  display: flex;
  justify-content: center;
}

@media (min-width: 768px){
  .riputomo_userItem{
    width: calc(50% - 10px);
  }

  .riputomo_userItem_details{
    padding: 20px;
    padding-top: 48px;
  }
}

@media (min-width: 1250px){
  .riputomo_userItem{
    width: calc(33.3333333% - 10px);
  }
}

/**
* ホーム
**/
.home_inner{
  padding-top: 30px;
}

.home_title{
  font-size: 2.6rem;
  margin-bottom: 20px;
}

.home_flex_2{
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 20px;
}

.home_content_2{
  width: 100%;
}

.home_content_title{
  font-size: 2.2rem;
  margin-bottom: 20px;
}

/** 1250px以上 **/
@media (min-width: 1250px){
  .home_content_2{
    width: calc(50% - 30px);
  }
}

/** ホームのタスクボックス **/
.home_taskBox{
  border-radius: 3px;
  padding: 15px 15px;
  font-size: 1.4rem;
  margin-bottom: 10px;
  
  & svg{
    height: 2.5rem;
    margin-bottom: 5px;
  }
}

.taskBox_warning{
  background: #ffb7b7;
  border: 2px solid #ff7878;
  color: #7b0404;
  font-weight: bold;

  & svg{
    color: #7b0404;
  }
}

.status_table{
  width: 100%;
  text-align: left;

  & th, td{
    padding: 12px 10px;
    border-bottom: 1px solid #ccc;
    font-size: 1.4rem;
    min-width: 110px;
  }
}

.useful_list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  & a{
    background: #f2f8ef;
    border-radius: 3px;
    color: #333;
    display: block;
    font-size: 1.2rem;
    padding: 14px 10px;
    transition: all 150mslinear;
    width: calc(33.3333333% - 10px);
    text-align: center;
    font-weight: bold;

    &:hover{
      background: #e6f3e0;
    }
  }
}

@media (min-width: 768px){
  
}

/** 支払い関連 **/
.payments_nowTable{
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  text-align: left;
  border-collapse: collapse;
  margin-bottom: 5px;
  
  & th, td{
    padding: 10px 15px;
    border: 1px solid #ccc;
    font-size: 1.3rem;
  }

  & th{
    background: #f2f2f2;
  }
}

.payment_itemBtn{
  background: white;
  border: none;
  display: block;
  padding: 20px 0;
  width: 100%;
  text-align: left;
  transition: all 60ms linear;
  &:hover{
    color: #e7b4cc;
  }
}

.payment_itemBtn_title{
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
}

.payment_itemBtn_description{
  color: #666;
  font-size: 1.3rem;
}

@media (min-width: 768px){
  .payments_nowTable{
    display: table;
    width: 100%;
  }
}


/** ページャー **/
.pagination_box{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
  width: 100%;
}

.pagination_btn{
  background: #e7b4cc;
  color: white;
  border-radius: 3px;
  padding: 13px 19px;
  font-size: 1.4rem;
  font-weight: bold;
  display: inline-block;
  transition: all 150mslinear;
  width: calc(50% - 10px);
  text-align: center;

  &:hover{
    background: #e38ab4;
    text-decoration: none;
  }
}

.pagination_btn_disabled{
  background: #f2f2f2;
  color: #666;
  cursor: not-allowed;
}

/* 未払い */
.unpaid_box{
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 10px 20px;
  padding-top: 20px;
  margin-top: 18px;
  font-size: 1.3rem;
}

.unpaid_box_header{
  margin-bottom: 30px;
}

.unpaid_box_main{
  margin-bottom: 10px;
}

.unpaid_box_footer{
  color: gray;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
}

.unpaid_linkBtn{
  background: #e1b5ce;
  border-radius: 3px;
  color: white;
  padding: 10px 20px;
  font-size: 1.4rem;
  font-weight: bold;
  display: block;
  text-align: center;
  transition: all 150ms linear;

  &:hover{
    background: #e38ab4;
    text-decoration: none;
  }
}

.unpaid_cancelBtn{
  font-size: 1.1rem;
  border: none;
  background: none;

  &:hover{
    text-decoration: underline;
  }
}

/** 送り先の取得 **/
.okurisaki_selectBox{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/** 手紙 **/
.letter_warningBox{
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 12px 16px;
  font-size: 1.3rem;
  margin-top: 15px;

  & ul{
    list-style-type: disc;
    margin-left: 20px;
  }

  & li{
    margin-bottom: 2px;
  }
}

.letter_lastReceivedDate{
  font-size: 1.3rem;
  margin-top: 10px;
}

/** 切手 **/
.kitte_info_table{
  border-collapse: collapse;
  width: 100%;
  max-width: 500px;
  margin-bottom: 20px;

  & th, td{
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 1.3rem;
  }

  & th{
    background: #f2f2f2;
  }

  & img{
    height: 20px;
    margin: 0 auto;
  }
}


.tooltip {
  position: relative;
  display: flex;
  align-items: center;
}

.tooltip img {
  display: block;
}

.tooltip_text {
  pointer-events: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 6px;
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 999;
}

.tooltip_text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #333;
}

.tooltip:hover .tooltip_text {
  opacity: 1;
  visibility: visible;
}

/* 端に接触した場合の補正用クラス */
.tooltip_text.leftEdge {
  left: 0;
  transform: none;
}

.tooltip_text.rightEdge {
  left: auto;
  right: 0;
  transform: none;
}


/**
* エラーページ
*/
.errorPage_container{
  background: white;
}

.errorPage_inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px;
}

.errorPage_image{
  max-width: 200px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.errorPage_code{
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

@media (min-width: 768px){
  .errorPage_image{
    max-width: 300px;
  }

  .errorPage_code{
    font-size: 4rem;
  }
}

/**
* テーマ
*/
.themeBox_container{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.themeBox_inner{
  width: 100%;
}

.themeBox{
  width: 100%;
  margin-bottom: 50px;
}

.themeBox_title{
  background: #f2f8ef;
  border-radius: 3px;
  font-size: 1.8rem;
  padding: 12px 20px;
  margin-bottom: 20px;
}

.themeLists{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.themeTag{
  background: #f2f8ef;
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 1.2rem;
  font-weight: bold;
}

.themeItem{
  width: 100%;
}

.themeItem_link{
  border-radius: 3px;
  transition: all 150ms linear;
  display: block;
  padding: 10px;
  &:hover{
    background: #f7f4f4;
  }
}

.themeItem_tags{
  margin-bottom: 12px;
}

.themeItem_title{
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.themeItem_date{
  margin-right: 15px;
}

.themeItem_info{
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1.2rem;

  & svg{
    color: #898989;
    height: 1.5rem;
  }
}

.theme_article_header{
  margin-bottom: 30px;
}

.theme_article_title{
  margin-bottom: 10px;
}

.theme_article_info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.theme_article_tags{
  margin-bottom: 5px;
}

.theme_article_description{
  font-size: 1.4rem;
  margin-bottom: 15px;
  line-height: 2.4rem;
}

.theme_article_info_bottom{
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1.3rem;
  & svg{
    color: #898989;
    height: 1.5rem;
  }
}

.theme_ruleBox{
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 15px 20px;
  margin-bottom: 15px;
  font-size: 1.4rem;
  & p{
    margin-bottom: 15px;
  }

  & ul{
    list-style-type: disc;
    margin-left: 20px;
  }
}

/** 1250px以上 **/
@media (min-width: 1250px){
  .themeBox_inner{
    width: calc(33.33333% - 10px);
  }
}

.sukiPost_lists{
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 3px;
  width: 100%;
}

.sukiPost_item{
  border-bottom: 1px solid #ccc;
  padding: 20px 20px;
  padding-top: 13px;
  transition: all 150ms linear;
  &:hover{
    background: #f7f4f4;
  }
}

.sukiPost_header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.sukiPost_header_leftBox{
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 40px);
}

.sukiPost_header_rightBox{
  width: 40px;
}

.sukiPost_body{
  padding: 0;
}

.sukiPost_okurisaki,
.sukiPost_createdAt{
  font-size: 1.4rem;
}

.sukiPost_visibility_icon{
  height: 18px;
}

.sukiPost_image{
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 10px;
}

.sukiPost_title{
  font-size: 1.6rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
  &:hover{
    text-decoration: underline;
  }
}

.sukiPost_content{
  font-size: 1.4rem;
  margin-bottom: 5px;
}

.sukiPost_menu{
  position: relative;
  z-index: 100;
}

.sukiPost_menu_content{
  background: white;
  border-radius: 3px;
  position: absolute;
  transform: translateY(20px);
  top: 45px;
  right: 0;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.sukiPost_menu_content_link{
  display: flex;
  align-items: center;
  background: white;
  border: none;
  border-radius: 3px;
  padding: 10px 25px;
  font-size: 1.5rem;
  transition: all 150ms linear;
  white-space: nowrap;
  &:hover{
    background: #f2f2f2;
    text-decoration: none;
  }
  & svg{
    height: 1.7rem;
    width: 1.7rem;
    max-inline-size: none;
    margin-right: 10px;
  }
}

.sukiPost_menu_label{
  z-index: 2;
  & svg{
    height: 40px;
    cursor: pointer;
    padding: 5px;
    border-radius: 67%;
    transition: all 150ms linear;
  }

  & svg:hover{
    background: #dfe1e1;
  }
}

@media (min-width: 768px){
  .sukiPost_body{
    padding: 0 38px;
    padding-top: 10px;
  }
}

.joined_tags{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.joined_tag{
  background: #f2f8ef;
  border: 1px solid #d5e3ce;
  border-radius: 30px;
  padding: 3px 12px;
  font-size: 1.3rem;
}

#postImageBtn{
  border: 1px solid #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;

  & input[type="file"]{
    display: none;
  }

  & svg{
    color: #ccc;
    height: 80px;
    margin: 0 auto;
  }
}

.postImageBtn_child{
  width: 100%;
}

.postImageBtn_child_title{
  font-weight: bold;
  font-size: 1.6rem;
}

.postImageBtn_child_warning{
  color:red;
  font-size:1.2rem;
}

/** カウンター **/
.counter_box{
  position: relative;
}

.counter_text{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  font-size: 1.2rem; 
  font-weight: bold;
  color: #64748b; 
}

.counter_text.is-nearLimit { 
  color: #d97706; /* 残り少ないとき */
}

.counter_text.is-overLimit { 
  color: #dc2626; /* 超過時 */
}