@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){
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.userMenu_dropdown:checked + .userMenu_label:before,
.userMenu_dropdown:not(:checked) + .userMenu_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{
  pointer-events: auto;
}

.userMenu_dropdown:checked ~ .userMenu_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;
  }
}

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

.loginBox{
  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){
  .loginBox{
    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;
  font-size: 1.4rem;
}

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

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

.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;
  }
}

/** フォーム **/
.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_errorBox{
  background: #ff9c9c;
  border-radius: 3px;
  border: 1px solid #e18585;
  padding: 10px;
  margin-top: 10px;
  font-size: 1.4rem;
  font-weight: bold;
}

.form_successBox{
  background: #b4f7b4;
  border-radius: 3px;
  border: 1px solid #7ed97e;
  padding: 10px;
  margin-top: 10px;
  font-size: 1.4rem;
  font-weight: bold;
}

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

/* パスワード */
.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{
  width: auto;
}

.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;
  }
}

/** 設定 **/
.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_main{
    padding: 40px;
    padding-top: 50px;
  }

  .settings_container{
    padding-top: 60px;
  }

  .settings_listBox_logout{
    text-align: left;
  }
}


/** ステータス **/
.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: 50px 20px;
  margin: 0 auto;
}

.profile_header_inner{
  padding-bottom: 10px;
}

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

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

  & 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_container{
  max-width: 720px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.profile_body_tabBox{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  width: 100%;

  & a{
    width: calc(33.33333 - 10px);
    text-align: center;
  }
}

.profile_body_tabLink{
  width: calc(33.33333 - 10px);
  text-align: center;
  &:hover{
    border-bottom: 3px solid #e1b5ce;
  }
}

.profile_body_imgBox{
  margin-bottom: 70px;
}

.profile_body_tabLink_active{
  font-weight: bold;
  border-bottom: 3px solid #e1b5ce;
  padding-bottom: 6px;
}

.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_warning{
  background: #ff7878;
  border-radius: 3px;
  color: white;
  padding: 4px 14px;
  font-size: 1.4rem;
  font-weight: bold;
  margin-top: 35px;
  display: inline-block;
  width: 100%;
}

.profile_header_word{
  background: #d4efd4;
  color: #333;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 15px;
}

.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;
}


@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;
    padding-top: 55px;
  }

  .profile_body_recommendBox{
    padding: 0;
  }

  .profile_body_tabBox{
    & a{
      width: calc(33.33333% - 20px);
    }
  }
}

/** プロフィール 手紙の履歴**/
.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;
}

.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;
}

@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: 20px;
  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;
  margin-bottom: 20px;
  & img{
    height: 25px;
  }
}

.riputomo_userItem_word{
  background: #d4efd4;
  color: #333;
  padding: 5px 10px;
  font-weight: bold;
}

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

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

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

/**
* ダッシュボード
**/
.dashboard_inner{
  padding-top: 30px;
}

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

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

.dashbord_content_2{
  width: 100%;
}

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

/** ダッシュボードのタスクボックス **/
.dashboard_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;
  }
}

.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){
  
}

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

/** 支払い関連 **/
.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;
  }
}

/** 切手 **/
.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;
  }
}