/*=================================================
　　　　　　　　　うちの子日誌
==================================================*/

.mydiary .mypage-petcard-detail {
    width:100%;
    filter: inherit;
    margin:0 auto;
    padding:0 1rem
}
.second_contents .mydiary h2 {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: inherit;
    text-align: center;
    line-height: 1.6;
    color: #807970;
    margin: 0.5rem 0 0 0;
    border-bottom: none;
}
.mydiary ul li{
    flex-wrap: nowrap;
}
.mydiary ul li:last-child{
    border-bottom:none;
}
.mydiary ul li > div{
    position: relative;
    width:70%;
}
.mydiary ul li > div span{
    display: inline-block;
    white-space:nowrap;
}
.mydiary ul li label{
    width:190px;
}
.mydiary ul li textarea{
    width:100%;
}
.mydiary ul li textarea.medicine{
    height: 2rem;
}
.mydiary ul li textarea.memo{
    height: 10rem;
}
.mydiary .mydiary-datebox{
    width: 100%;
    padding:2rem 1rem;
    background-color: antiquewhite;
    text-align: center;
}
.mydiary .mydiary-datebox h4{
    font-size:clamp(1.2rem, 3vw, 1.5rem);
    margin-bottom:1rem;
    font-weight: lighter;
    text-align: center;
}
.btn_today_diary{
    margin:0.5rem auto 1rem;
    width:clamp(16rem, 3vw, 20rem);
}
.btn_today_diary button{
    width:100%;
    margin:0.5rem;
}

.mydiary-btn {
    display: flex;
    flex: 1;
    justify-content: center;
}
.mydiary-btn button{
    padding:0.5rem 2.5rem;
}
.mydiary .mydiary-datebox select{
    width:85px;
}
.mydiary .mydiary-datebox button{
    padding:0.2rem 0.5rem;
    border-radius:5px;
}

ul.diary-list{
    border-spacing: 0;
    width: 98%;
    margin:1% auto;
}
ul.diary-list li{
    border-bottom:dotted #ddd thin;
    align-items: center;
    padding:0.5rem;
    display: flex;
    font-size:0.9rem;
}
ul.diary-list li.is-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
    padding:0
}
.more{
    width:360px;
    margin:1rem auto;
}
.more button{
    width:100%;
}
ul.diary-list li > div{
    text-align: center;
    padding:0.5rem;
}
ul.diary-list li.thead{
    background-color: antiquewhite;
    padding:0;
}
ul.diary-list li .ss_txt{
    font-size:clamp(0.6rem, 2.5vw, 0.8rem);
    display: block;
}
ul.diary-list li.btn_diary_detail{
    text-align: center;
}
ul.diary-list li.btn_diary_detail i{
    font-size: 1.5rem;
}
li.condition_detail{
    line-height: 1.6
}
.condition_detail span{
    display: inline-block;
    margin-right:0.5rem;
    font-size: 0.9rem;
}
.condition_detail span i{
    color:#666;
}
.mydiary ul li > div.h_detail{
    width:85px;
    text-align: center;
}
.mydiary ul li > div.h_weight{
    width:85px;
    text-align: center;
}
.mydiary ul li > div.h_condition{
    text-align: left;
}

.usage_guide{
    display: inline-block;
    font-size:0.8rem;
    text-align: right;
    line-height: 1.6;
    color:#666;
    border:dotted #ddd thin;
    padding:0.3rem;
    margin-right:1%;
    margin-bottom:1rem;
    float:right;
}
.usage_guide:after{
    clear: both;
}
.usage_guide span{
    margin-right:0.5rem;
    display: inline-block;
}
.day_select{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.month_tab{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom:thin solid #f29600;
}
.month_tab > div{
    flex:2;
    border-top:1px solid #807970;
    padding:0.5rem 0;
    text-align: center;
    background-color:#efefef;
}
.month_tab > div.kongetu{
    background-color: #fff;
    border-top:3px solid #f29600;
    border-left: 1px solid #807970;
    border-right: 1px solid #807970;
    padding-top:1rem;
    flex:3;
}
.month_tab > div.before:hover, .month_tab > div.next:hover{
    background-color: #ffffee;
    cursor: pointer
}

/*ギャラリー*/
.mydiary ul.gallery-list{
    border-spacing: 0;
    width: 96%;
    margin:1% auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
.mydiary ul.gallery-list li.gallery-list-item{
    font-size:0.9rem;
    padding:0.2rem;
    margin:0.5rem;
    border:thin solid #efefef;
}
.mydiary ul.gallery-list li.gallery-list-item img{
    object-fit: cover;
    width:150px;
    height:150px;
}
.paging{
    display: flex;
    align-items: center;
    justify-content: center;
    margin:1rem auto;
}
.paging i{
    margin:0 1rem;
}

/*モーダル*/
.diary_detail_modal{
    
}
.modal-wrapper {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 60px 10px;
  text-align: center
}

.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.modal-wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em;
  vertical-align: middle;
  content: ""
}

.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 90%;
  max-width: 750px;
  padding: 10px 10px 15px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle
}

.modal-wrapper .modal-window .modal-content {
  max-height: 70vh;
  overflow-y: auto;
}

.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8)
}

.modal-wrapper .modal-close {
  z-index: 20;
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  color: #95979c !important;
  font-size: 28px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  text-indent: 0
}

.modal-wrapper .modal-close:hover {
  color: #2b2e38 !important
}

/*モーダルコンテンツの詳細*/
.diary-petcard-control{
    display: flex;
    justify-content: space-between;
    padding-right:40px;
    padding-bottom:0.5rem;
    border-bottom: #807970 thin solid;
}
.diary-petcard-detail{
    width:100%;
    background-color:#fff;
    padding:clamp(1rem, 2.5vw, 1.4rem);
    margin:0 auto;
    display: flex;
}
.diary-petcard-detailimg{
    width:33%;
    padding:clamp(1rem, 2.5vw, 1.2rem);
    flex-grow: 1;
    order: 2;
}
.diary-petcard-detailinfo{
    width:60%;
    flex-grow: 2;
    padding:0;
    order: 1;
}
.diary-petcard-detailinfo ul li{
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding:0.3rem 0.5rem;
    border-bottom: #807970 1px dashed;
    font-size: 0.9rem;
}

.diary-petcard-detailinfo ul li span{
    display: inline-block;
}


.diary-petcard-detailinfo ul li label{
    display: block;
    width:33%;
    background-color:#f6eadb;
    padding:0.3rem;
}
.diary-petcard-detailinfo ul li div{
    display: block;
    padding:0.3rem;
    text-align: justify;
    width:66%;
}

@media (max-width: 540px){
    .diary-petcard-control{
    padding-right:0px;
    padding-top:30px;
}
    .diary-petcard-detail{
        display: inherit;
    }
    
    .diary-petcard-detail-container{
    display: inherit;
    margin-bottom:1rem;
    padding-bottom: 1rem;
}
    .diary-petcard-detailimg{
    width:100%;
        order:1;
}
    .diary-petcard-detailinfo{
    width:100%;
        order:2;
}
    .diary-petcard-detailinfo ul li label{
    display: block;
    width:100%;
    min-width:inherit;
}
    .diary-petcard-detailinfo ul li.birthday select{
    padding:0.3rem 0;
    width:25%;
}
    

}

@media (max-width: 540px){
    .mydiary ul li{
    display: inherit;
}
    .mydiary ul li.thead, .mydiary ul li.diary-list-item{
        display: flex;
    }
    .mydiary ul li > div{
    position: relative;
    width:100%;
}
    .mydiary ul li > div.h_detail{
        min-width:50px;
        padding:0;
}
    .mydiary ul li > div.h_weight{
        min-width:60px;
        padding:0;
}
    .mydiary ul.gallery-list li.gallery-list-item{
    font-size:0.8rem;
    margin:0.2rem;
}
    .mydiary ul.gallery-list li.gallery-list-item img{
    object-fit: cover;
    width:100px;
    height:100px;
}
    
}