﻿
#pdDes {
    background: #ffffff;
    margin: 0 2% 4% 2%;
    padding: 2%;
    border:solid 1px #e7e7e7;
    width:96%;
    word-break: break-word;
}


/* trimming */
@media screen and (max-width:480px) {
    .trim {
      width: calc(100vw / 3);  /* トリミングしたい幅 */
      height: calc(100vw / 3);  /* トリミングしたい高さ */
      overflow: hidden;
      position: relative;
    }
}
@media screen and (min-width:480px) and (max-width:768px) {
    .trim {
      width: calc(100vw / 4);  /* トリミングしたい幅 */
      height: calc(100vw / 4);  /* トリミングしたい高さ */
      overflow: hidden;
      position: relative;
    }
}
@media screen and (min-width:768px) and (max-width:1024px) {
    .trim {
      width: calc(100vw / 5);  /* トリミングしたい幅 */
      height: calc(100vw / 5);  /* トリミングしたい高さ */
      overflow: hidden;
      position: relative;
    }
}
@media screen and (min-width:1024px) {
    .trim {
      width: calc(100vw / 6);  /* トリミングしたい幅 */
      height: calc(100vw / 6);  /* トリミングしたい高さ */
      overflow: hidden;
      position: relative;
    }
}

/*
.trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
    */

/* layout */
.trim {
  float: left;
  border: 1px solid #ffffff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size:cover;
  background-position-x: center;
  background-position-y: center;
}

.architrave_image {
    width: 30%;
    background: url(http://p.tl/P1E_) no-repeat center;
    background-size: cover;
}
.architrave_image:after {
    padding-top:100%;
    display: block;
    content: "";
}

.objfitcover {
    height:100%;
    width:100%;
    object-fit:cover;
}

#menubar_b {
    font-size:0;
    position:fixed;
    width:100%;
    height:50px;
    bottom:0px;
    list-style:none;
    padding:0;
    margin:0;
    background: #FFFFFF;
}

.mbimg {
    display:inline-block;
    width:calc(100% / 6);
    height:50px;
    text-align:center;
}
.mbimg img {
    height:100%;
    max-width:100%;

}
#pdImg {
    max-width:96%;
    padding:2%;
}
#pdImg img {
    width:100%;
}
#pdBack {
    width: 100%;
    margin-top: 8px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
}
#pdBack span {
    background: #ff4064;
    margin-left: 66%;
    padding: 8px 6% 8px 6%;
    border-radius: 16px;
    color: #ffffff;
    font-size: 18px;
}

#pgmypage {
    height:100%;
    width:100%;
}
#mpuserImg {
    width:100%;
    height: 110px;
    text-align:center;
}
#mpuserImg img {
    width:76px;
    border-radius:100%;
    background: #ffffff;
}
#mpuserRegistration {
    position: absolute;
    top: 0;
    right: 10px;
    width: 28%;
    height: 110px;
    text-align: center;
}
#mpuserRegistration img {
    width:86px;
    border-radius:100%;
    background: #ffffff;
}
#mpuserRegistration div{
    font-size: 12px;
}
#mpuserName {
    width: 100%;
    text-align: center;
}
#mpPhotosNum{
    font-size: 16px;
    text-align: center;
}
#mpPhotosNumPhotos{
    color:red;
}
#mpPhotosNumPhotosTarget{
    color:red;
}
#mpuserProf {
    width: 100%;
    text-align: center;
}
#mpuserName {
    font-size:18px;
}
#mpuserProf {
    font-size:12px;
}

#psPost {
    width:100%;
    text-align:center;
}
#psPost span {
    width: 40%;
    padding: 2%;
    background: #7755ff;
    border-radius: 10px;
    color: #ffffff;
}
#psFile {
    margin:2% 0 2% 2%;
}
.preview {
    max-height:60vw;
    max-width:60vw;
    padding:2%;
}
.previewImg {
    max-height:60vw;
    max-width:60vw;
}
#psFile {
    display:none;
}
#psFileLabel{
    background:#77aacc;
    color:#ffffff;
}

#pdUserName {
    text-align: center;
    font-size: 18px;
    padding: 18px;
}

/* カレンダー */
#calendar_container{
    width:94%;
    margin:16px 3% 16px 3%;
}
#pgCalendar{
    width:100%;
    text-align:center;
    border:solid 1px #dddddd;
}
#pgCalendar thead{
    border-bottom:solid 1px #999999;
}
#youbi {
    background:#dddddd;
}
#calendar_container td{
    width:calc(100% / 7);
}
.dayNum {
    font-weight:bold;
    font-size:18px;
}
.eventNum {
    font-size:12px;
}
.wd{
    color:#111111;
}
.sd{
    color:#0000ee;
}
.hd{
    color:#ee0000;
}
.wd,.sd,.hd {
    border-bottom:solid 1px #dddddd;
}
#youbi td {
    font-size:12px;
    padding: 2px 0 2px 0;
}
#yearMonth td {
    padding:6px 0 6px 0;
    font-weight:bold;
    font-size:18px;
}

#cListName {
    text-align:center;
    font-size:18px;
    border-bottom: dotted 1px #222222;
    padding:4px 0 4px 0;
}
#cEventList {
    font-size:18px;
    padding:0;
    margin:0;
}
#cEventList li {
    border-bottom: dotted 1px #222222;
    width:100%;
}
#topEventList li {
    border-bottom: dotted 1px #222222;
    width: 100%;
}

#cEventTitle {
    font-weight:bold;
    font-size:18px;
    text-align:center;
    margin:8px 8px 8px 8px;
}
#cEventDes {
    font-size:14px;
    margin:8px;
    padding:4px;
    background:#eeeeee;
}
#cEventLogoImg {
    max-width:80vw;
    max-height:80vw;
    margin:0 10vw 0 10vw;
    text-align: center;
    vertical-align: middle;
}
#cEventLogoImg img {
    max-width:100%;
    max-height:80vw;
}
#cPostBtn {
    height: 50px;
    width: 80%;
    margin: 8px 10% 8px 10%;
    background: #ff5c5c;
    border-radius: 16px;
    color:#ffffff;
    text-align:center;
    padding: 8px;
    font-size: 24px;
    background-image: url(../nanae_cycling/image/cameraIcon_white.png);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 20px 8px;
}

.eListItem {
    display:table;
}
.eListImg {
    display:table-cell;
    width:20vw;
    height:20vw;
    padding:4px 2vw 4px 2vw;
    text-align:center;
    vertical-align:middle;
}
.eListImg img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.eListName{
    display:table-cell;
    width:72vw;
    padding:0 2vw 0 0;
    text-align:center;
    vertical-align:middle;
    font-size:16px;
}