@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');

*::after,
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { color: #333; background: #fff; font-size: 13px; font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; }
#wrap { padding: 0 5%; }

@media screen and (max-width: 600px) {
#wrap { padding: 0 5px; }
}

/* ========================================
 * #mini-calendar
 * ========================================*/
#mini-calendar .calendar-year-month { margin: 0 auto; display: block; text-align: center; font-size: 167%; font-weight: bold; }
#mini-calendar table { margin: 0 auto; width: 960px; border-spacing: 0; border-left: 1px solid #ccc; border-top: 1px solid #ccc; line-height: 1.5; border-collapse: separate; }
#mini-calendar th, #mini-calendar td { background: #fff; padding: 7px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }
#mini-calendar th { color: #fff; background: #666; vertical-align: top; padding-top: 7px; padding-bottom: 7px; }

/*
#mini-calendar th.calendar-sun { color: #DF0D2D; background: #F8E4E4; }
#mini-calendar th.calendar-sat { color: #2574D3; background: #E2F3FC; }
*/
#mini-calendar td { width: 14.3%; height: 100px; vertical-align: top; }
#mini-calendar td.calendar-day-off { background: #F4F3F2; color: #555; }
#mini-calendar td.calendar-holiday, #mini-calendar td.calendar-sun { color: #CE2727; background: #FCF3F3; }
#mini-calendar td.calendar-sat { color: #54AFC8; background: #F5FBFE; }
#mini-calendar .calendar-day-number { font-style: normal; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: bold; font-size: 16px; display: block; padding: 0 3px; line-height: 1.2; }
#mini-calendar td.calendar-holiday .day, #mini-calendar td.calendar-sun .day { color: #DF0D2D; }
#mini-calendar td.calendar-sat .day { color: #2574D3; }
#mini-calendar td span { font-size: 11px; line-height: 1.3; display: block; }
#mini-calendar [class*=calender-label] { /*title*/ display: block; margin: 0 auto; padding: 3px; color: #000; font-size: 100%; line-height: 1.3; text-align: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; }
#mini-calendar td span.calender-label-red { background-color: #FCCFD1; border-color: #D28EA6; }
#mini-calendar td span.calender-label-blue { background-color: #CFE4FC; border-color: #8E9BD2; }
#mini-calendar td span.calender-label-green { background-color: #E5FCCF; border-color: #99C170; }
/* 何もない日 */
#mini-calendar td.calendar-none { background: #fff; }
#mini-calendar td.calendar-today { background: #fff; }
.img-thumb { display: block; margin: 0.5em auto; width: 100%; }
.img-off { display: block; margin: 0.5em auto; width: 100%; }
.img-off:hover { cursor: default; }
/* .btn-back-diary { display: block; margin: 10px auto 40px; width: ; } */

@media screen and (max-width: 600px) {
#mini-calendar table { width: 100%; border-spacing: 0; border-left: 1px solid #ccc; border-top: 1px solid #ccc; margin-bottom: 0; line-height: 1.5; border-collapse: separate; }
#mini-calendar thead { display: none; }
#mini-calendar th, #mini-calendar td { display: block; width: 100%; padding: 0; }
#mini-calendar td { height: auto; display: -webkit-flex; display: flex; }
#mini-calendar .calendar-none { display: none }
#mini-calendar .calendar-labels { padding: 5px; }
#mini-calendar [class*=calender-label] { display: inline-block; padding: 5px; margin-top: 0; margin-right: 5px; font-size: 12px; }
/* 日付 */
#mini-calendar td .calendar-day-number { font-weight: normal; padding: 7px; font-size: 18px; display: block; background: #eaeaea; margin-bottom: 0; width: 75px; height: auto; }
#mini-calendar td.calendar-holiday .calendar-day-number, #mini-calendar td.calendar-sun .calendar-day-number { background: #f8c7c7; }
#mini-calendar td.calendar-sat .calendar-day-number { background: #c8ebfe; }
/* モバイル用曜日を追加 */
#mini-calendar td i:after { font-size: 12px; position: relative; left: -5px; }
#mini-calendar td:nth-child(1) i:after { content: "（日）"; }
#mini-calendar td:nth-child(2) i:after { content: "（月）"; }
#mini-calendar td:nth-child(3) i:after { content: "（火）"; }
#mini-calendar td:nth-child(4) i:after { content: "（水）"; }
#mini-calendar td:nth-child(5) i:after { content: "（木）"; }
#mini-calendar td:nth-child(6) i:after { content: "（金）"; }
#mini-calendar td:nth-child(7) i:after { content: "（土）"; }
.btn-back-diary { display: block; margin: 1em auto; width: 40%; }
}

#diary-detail { margin: 70px auto 0; width: 600px; text-align: center; }
#diary-detail .h1-detail { display: block; margin: 0 auto 10px; width: 87%; }
#diary-detail .img-detail { display: block; margin: 0 auto; width: 100%; }
#diary-detail .img-detail-v { display: block; margin: 0 auto; width: 75%; }
#diary-detail .p-comment { color: #000; font-size: 123.1%; text-align: left; }
#diary-detail .p-date { color:#039; font-size: 108%; font-weight: bold; text-align: right; }
#diary-detail .btn-back { margin: 0 auto; padding: 0 0 2em; width: 11%; }

.h1-title {
position: relative;
margin: 30px auto;
padding: 10px;
width: 960px;
color: #fff;
font-family: 'Yusei Magic', sans-serif;
font-size: 138.5%;
font-weight: bold;
letter-spacing: 0.05em;
text-align: left;
background-color: #0099ff;
background-image: 
    /* 1枚目の背景画像のパス */
    url(./images/h1_left.png),
    /* 2枚目の背景画像のパス */
    url(./images/h1_right.png);
background-position:
    /* 1枚目の背景画像の表示位置 */
    left 0px center,
    /* 2枚目の背景画像の表示位置 */
    right 0px center;
background-repeat:
    /* 1枚目の背景画像の設定 */
    no-repeat,
    /* 2枚目の背景画像の設定 */
    no-repeat;
background-size:
    /* 1、2枚目の背景画像の共通サイズ */
    auto 100%;
}
.h1-title:after {
content: "";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
width: 121px;
height: 39px;
background: url(./images/h1_performance.png) no-repeat center center;
background-size: 100% auto;
}
.btn-back-diary {
display: block;
margin: 10px auto 40px;
padding: 10px 0;
width: 180px;
color: #fff;
font-family: 'Yusei Magic', sans-serif;
font-size: 123.1%;
font-weight: normal;
letter-spacing: 0.05em;
text-decoration: none;
text-align: center;
background: url(./images/btn_back_diary.png) no-repeat center center;
background-size: 100% auto;
}
.btn-back-diary:hover {
opacity: 0.7;
}
#diary-detail .h1-title {
width: 600px;
padding: 10px 180px 10px 20px;
}

@media screen and (max-width: 600px) {
#diary-detail { margin: 3em auto; width: 100%; text-align: center; }
#diary-detail .h1-detail { display: block; margin: 0 auto 1em; width: 87%; }
#diary-detail .img-detail { display: block; margin: 0 auto; width: 100%; }
#diary-detail .img-detail-v { display: block; margin: 0 auto; width: 75%; }
#diary-detail .p-comment { color: #000; font-size: 108%; text-align: left; }
#diary-detail .p-date { color:#039; font-size: 100%; font-weight: bold; text-align: right; }
#diary-detail .btn-back { margin: 1em auto 0; padding: 0 0 2em; width: 20%; }

.h1-title,
#diary-detail .h1-title {
position: relative;
display: flex;
align-items: center;
margin: 3vw auto;
padding: 0 25% 0 5%;
width: 100%;
height: 16vw;
font-size: 100%;
line-height: 1.0;
background-color: #0099ff;
background-image: 
    /* 1枚目の背景画像のパス */
    url(./images/h1_left_sp.png),
    /* 2枚目の背景画像のパス */
    url(./images/h1_right_sp.png);
background-position:
    /* 1枚目の背景画像の表示位置 */
    left 0px top,
    /* 2枚目の背景画像の表示位置 */
    right 0px top;
background-repeat:
    /* 1枚目の背景画像の設定 */
    no-repeat,
    /* 2枚目の背景画像の設定 */
    no-repeat;
background-size:
    /* 1、2枚目の背景画像の共通サイズ */
    auto 100%;
}

.h1-title:after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
width: 24vw;
height: 8vw;
background: url(./images/h1_performance.png) no-repeat center center;
background-size: 80% auto;
}
}

.autoHeight { margin: 0 padding: 0; width: 100%; }