/*
custom-overrides.css
style.css(旧カスタムテーマ)にあった独自カスタマイズだけを抜き出したファイル
*/

/* ==========================================================================
   1. Document Setup
   ========================================================================== */

/* 日本語向けフォントスタックに変更(Inter var可変フォントは使わない) */
body,
legend,
span,
.required,
fieldset {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 背景画像を追加(PC) */
body {
    background: url(../img/3332787_m3_01.png) no-repeat;
    background-position: left top;
    background-size: 100% auto;
}

/* 背景画像(スマホ) */
@media (max-width: 767px) {
    body {
        background: url(../img/3332787_m3_01_sp.jpg) no-repeat;
        background-position: center top;
        background-size: 115% auto;
    }
}

/* 背景位置・サイズ調整(タブレット幅) */
@media (min-width: 768px) and (max-width: 1024px) {
    body {
        background-position: center top;
        background-size: 200% auto;
    }
}

/* 無効化されたボタンの見た目を追加 */
button:disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
}

/* 古いブラウザ向けの clip-path フォールバックを追加 */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
}

.screen-reader-text:focus {
    clip: auto !important;
    -webkit-clip-path: none;
}
.widget_text p, .widget_text ol, .widget_text ul, .widget_text dl, .widget_text dt, .widget-content .rssSummary{
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

}

/* ==========================================================================
   2. Element Base
   ========================================================================== */

/* デフォルトで表jしあれるメニュー横の検索は消す */
.header-toggles{
    display: none;
}

@media (max-width: 767px) {
    h2,
    .heading-size-2 {
        font-size: 2rem;
    }
    h3,
    .heading-size-3 {
        font-size: 2rem;
    }
    h4,
    .heading-size-4 {
        font-size: 2rem;
    }
}

/*
  h5用の指定。元のstyle.cssではセレクタが ".heading-size-2" のままになっており、
  h2用のルールと重複したうえに font-size: 5rem という他の見出しより極端に大きい値が
  入っています(タイポの可能性が高いです)。ここでは元ファイルの内容をそのまま再現して
  いますが、意図した挙動でなければ ".heading-size-5" とサイズ値を修正してください。
*/
@media (max-width: 767px) {
    h5,
    .heading-size-2 {
        font-size: 5rem;
    }
}

/* pre code の font-size:1em 指定を打ち消す(公式テーマ側の指定を無効化) */
pre code {
    font-size: inherit;
}

/* .entry-content > code の display:block 指定を打ち消す(標準のinlineに戻す) */
.entry-content > code {
    display: inline;
}

/* wp-block-file のボタンにフォーカスアウトラインを付けない */
.wp-block-file__button {
    outline: none;
}

/* input[type="number"] だけ右パディングを狭くしていた指定を打ち消す(他のinputと同じ値に) */
input[type="number"] {
    padding-right: 1.8rem;
}


/* ==========================================================================
   3. Helper Classes
   ========================================================================== */

/*
  「センター寄せ画像のキャプションを中央揃えにする」指定を、全画面幅・全要素向けから
  「wp-block-imageの中のaligncenterのみ・PC幅(1000px以上)のみ」に限定するための調整。
  まず元のグローバルな指定を打ち消し、下の17番でPC幅限定の指定を追加しています。
*/
.aligncenter figcaption {
    text-align: inherit;
}


/* ==========================================================================
   4. Site Header
   ========================================================================== */

/* ヘッダー背景を透過に(白背景をやめる) */
#site-header {
    background: transparent;
}

/* サイト説明文を白文字・小さめサイズに */
.site-description {
    color: #FFF !important;
    font-size: 13px;
}

/* ハンバーガーメニューのアイコンを白に */
.header-inner .toggle path {
    fill: #FFF;
}

/* メニュートグルの文字を白に */
.toggle-inner .toggle-text {
    color: #FFF;
}

body:not(.overlay-header) .toggle-inner .toggle-text {
    color: #FFF !important;
}

/* グローバルナビのリンクに背景を追加 */
.primary-menu a {
    background-color: rgba(255, 255, 255, 1);
    padding: 8px 16px;
}

/* ホバー時は半透明の白背景に(下線表示はやめる) */
.primary-menu a:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.primary-menu a:hover,
.primary-menu a:focus,
.primary-menu .current_page_ancestor,
.primary-menu li.current-menu-item > a,
.primary-menu li.current-menu-item > .link-icon-wrapper > a,
.primary-menu li.current-menu-item > a:hover,
.primary-menu li.current-menu-item > .link-icon-wrapper > a:hover,
.primary-menu li.current-menu-item > a:focus,
.primary-menu li.current-menu-item > .link-icon-wrapper > a:focus {
    text-decoration: none;
}

/* サブメニューを閉じたときにネストされたulを隠す指定を廃止(元の挙動に戻す) */
.primary-menu .closed ul {
    display: block;
}
.footer-widgets-outer-wrapper{
    padding: 4rem 0;

}

/* ==========================================================================
   5. Menu Modal
   ========================================================================== */

/* メニューモーダルの背景を透過に */
.menu-modal {
    background: transparent;
}

.menu-modal-inner {
    background-color: rgba(255, 255, 255, 0.8);
}


/* ==========================================================================
   9. Post: Single
   ========================================================================== */

.singular .entry-header {
    background-color: transparent;
    padding: 2rem 0 4rem 0;
    color: #FFF;
}

@media screen and (max-width: 667px) {
    .singular .entry-header {
        padding: 4rem 0;
    }
}

@media (max-width: 767px) {
    .entry-header-inner p {
        font-size: 18px !important;
        margin-top: 16px;
    }
}

@media (min-width: 1200px) {
    .entry-header-inner p {
        font-size: 20px !important;
        margin-top: 16px;
    }
}

.post-inner {
    background-color: #fff;
}


/* ==========================================================================
   11. Entry Content
   ========================================================================== */

/* 見出し・キャプション類のフォントを日本語向けに変更(可変フォントは使わない) */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content cite,
.entry-content figcaption,
.entry-content table,
.entry-content address,
.entry-content .wp-caption-text,
.entry-content .wp-block-file {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}


/* ==========================================================================
   12. Comments
   ========================================================================== */

/* コメント欄の注意書きリンクの下線表示を調整 */
.comment-respond .comment-notes a,
.comment-respond .logged-in-as a {
    color: inherit;
    text-decoration: none;
}

.comment-respond .comment-notes a:focus,
.comment-respond .comment-notes a:hover,
.comment-respond .logged-in-as a:focus,
.comment-respond .logged-in-as a:hover {
    text-decoration: underline;
}



/* ==========================================================================
   17. Media Queries
   ========================================================================== */

@media (min-width: 700px) {
    h1,
    .heading-size-1 {
        font-size: 4rem;
    }
    h2,
    .heading-size-2 {
        font-size: 3rem;
    }
    h3,
    .heading-size-3 {
        font-size: 3rem;
    }
    h4,
    .heading-size-4 {
        font-size: 3rem;
    }
    section {
        padding: 0;
    }
    .singular .entry-header {
        padding: 8rem 0 11rem 0;
        color: #FFF;
    }
    .powered-by-wordpress {
        display: block;
    }
}

@media (min-width: 1000px) {
    .header-titles-wrapper {
        max-width: 40%;
    }
    .header-navigation-wrapper a {
        color: #000 !important;
        font-size: 16px;
        font-weight: bold;
    }
    /* PC幅では wp-block-image 内の aligncenter キャプションのみ中央揃えに */
    .wp-block-image .aligncenter figcaption {
        text-align: center;
    }
}

@media (min-width: 1220px) {
    h1,
    .heading-size-1 {
        font-size: 4rem;
    }
}

@media (min-width: 1280px) {
    .wp-block-separator.is-style-wide {
        max-width: 120rem;
        width: 120rem;
    }
}

@media (min-width: 1330px) {
    /* 1330px以上ではヘッダータイトル幅を50%に戻す(1000px指定の40%を上書き) */
    .header-titles-wrapper {
        max-width: 50%;
    }
}


/*----任意追加----*/

td.day-box {
    vertical-align: top !important;
}

.calendar-mark {
    padding: 10px 0;
}

.calendar-mark a,
.calendar-mark {
    text-decoration: none;
    font-size: 4rem;
    list-style: 24px;
}

.calendar-caption,
.content-form legend {
    font-size: 2rem !important;
}
.week-title{
	font-size: 1.5rem !important;
}
/*.week-title,
.mix-day {
    
}*/
.mix-day {
/*font-size: 1.5rem !important;*/
    white-space: nowrap;
}

.schedule-note {
    font-size: 1.5rem;
    color: #555;
}
.mix-calendar table,
.day-mix-calendar table,
#booking-form fieldset {
    background-color: #fff;
}
.day-box.disable {
    opacity: 0.3;
}
.monthly-prev,
.monthly-next {
    background-color: #cd2653;
    padding: 10px;
    color: #fff;
}
.monthly-prev span,
.monthly-prev a,
.monthly-next span,
.monthly-next a {
    font-size: 18px;
    color: #fff;
    text-decoration: none;
}
.monthly-prev a:hover,
.monthly-next a:hover {
    opacity: 0.6;
}
.header-titles {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.toggle.search-toggle.mobile-search-toggle,
.header-toggles {
    display: none;
}
.site-title.faux-heading {
    width: 50px;
}
.footer-copyright {
    font-size: 12px;
    color: #555;
    text-align: center;
    display: block;
    width: 100%;
}
.input-number {
    display: flex;
    align-items: center;
}
.content-form select {
    margin: 0 10px !important;
}
label {
    margin: 0;
}
.content-form th,
.content-form td {
    padding: 20px !important;
    vertical-align: middle !important;
}
.content-form td.option-confirm-header {
    margin-top: 40px;
    border-bottom: 0 !important;
}
/*p,*/
fieldset,
.content-form th,
.content-form td,
.content-form select {
    font-size: 15px !important;
    font-weight: normal !important;
}
.content-form select,
.content-form input,
.content-form textarea {
    padding: 15px !important;
    font-size: 15px !important;
}
.booking-form-radio,
.content-radio,
.field-item.check-scl_jyuken {
    text-align: center;
    margin: 0 auto 30px auto;
    padding: 8px;
    display: inline-block;
}
.booking-form-radio input {
    margin-right: 8px;
}
.field-item {
    display: inline-block !important;
}
.option-note.scl_jyuken {
    display: block;
}
.content-form .booking-seimei {
    width: auto !important;
}
.booking-form-people-number-row {
    display: none !important;
}
@media (max-width: 767px) {
    .content-form select,
    /* .content-form input,*/
    
    .content-form textarea {
        display: block;
        width: 100% !important;
    }
    
    .booking-form-radio,
    .content-radio,
    .field-item.check-scl_jyuken {
        width: 100%;
    }
}
.content-form th {
    /* width: 20% !important; */
}
.content-form td {
    /* width: 80% !important; */
}
@media (max-width: 767px) {
    .content-form th {
        width: 100% !important;
        display: block;
        clear: both;
        text-align: center !important;
    }
    
    .content-form td {
        width: 100% !important;
        display: block;
        clear: both;
    }
    .content-form tr:last-child  td{
        border: none !important;

    }
}
.content-form th,
.content-form td {
    border-bottom: none !important;
}
@media (max-width: 767px) {
    .content-form th,
    .content-form td {
        border-bottom: 1px solid #ccc !important;
        border-right: none !important;
        height: auto;
        display: block;
        overflow: hidden;
    }
    
    .booking-form-people-number-row td {
        border-bottom: none !important;
        height: auto;
    }
}
.content-form td {
    border-right: none !important;
}
#action-button button {
    padding: 10px 40px;
}
 .entry-title span{
        display: block;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  padding: 20px 0 0 0;
    }

@media (max-width: 767px) {
   
    h1.entry-title {
        font-size: 20px !important;
    }
     .entry-title span{
  font-size: 12px;
    }
    
    h2.entry-title {
        font-size: 18px !important;
    }
    
    h3.entry-title {
        font-size: 18px !important;
    }
}
@media (min-width: 768px) {
    .pcnone {
        display: none;
    }
}
.content-text.small-medium {
    display: inline-block;
}
a.linkbtn {
    padding: 20px;
    text-align: center;
    background-color: #C75870;
    margin: 20px auto;
    color: #fff;
    text-decoration: none;
    display: block;
    border-radius: 10px;
}
.page-id-30 .subscription-title {
    vertical-align: middle;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
}
.page-id-30 .option-confirm-label {
    white-space: nowrap
}
.modallink {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .modallink {
        width: 100%;
    }
    
    .spscroll {
        overflow-y: scroll;
    }
    
    th.mix-day.header-time,
    .mix-daycol {
        white-space: nowrap;
    }
    
    .day-mix-calendar th:first-child,
    .day-mix-calendar th:first-child+td.mix-day {
        background-color: #EBF0FE;
    }
    
    .day-mix-calendar th:nth-child(2),
    .day-mix-calendar th:nth-of-type(2),
    .day-mix-calendar th:nth-of-type(2)+td.mix-day {
        background-color: #F7EEF4;
    }
    
    .day-mix-calendar th:nth-of-type(3),
    .day-mix-calendar th:nth-of-type(3)+td.mix-day {
        background-color: #FBF4CD;
    }
    
    .day-mix-calendar th:nth-of-type(4),
    .day-mix-calendar th:nth-of-type(4)+td.mix-day {
        background-color: rgba(142, 192, 78, 0.3)
    }
}
.remodal p {
    text-align: left;
}
.remodal-confirm {
    padding: 20px;
    border-radius: 10px;
}
.remodal-confirm,
.remodal-cancel {
    width: 80%;
    max-width: 700px;
    display: block;
    margin: 20px auto 0 auto;
}
.remodal-confirm:hover,
.remodal-cancel:hover {
    text-decoration: none;
}
.note_title {
    display: flex;
    align-items: center;
}
.note_title {
    margin: 0;
   
}
@media (max-width: 767px) {
    .note_title {
        flex-direction: column;
    }

}
.note_title span:last-child {
    padding: 20px;
    font-size: 15px;
    font-weight: normal;
}
.box.red {
    display: block;
    padding: 32px 32px 16px 32px;
    border: 1px solid #BC3855
}
.box.red h3 {
    margin: 0 0 16px 0;
    font-size: 20px;
    background-color: #FFF;
    /*color: #BC3855;*/
}
.box.red p,
.box.red ul li {
    font-size: 16px;
}
@media (max-width: 767px) {
    .box.red p,
    .box.red ul li {
        font-size: 14px;
    }
    .box.red ul li {
        font-size: 13px;
    }
}
.box.red ul.bold li {
    font-weight: bold;
}
.box.red ul {
    margin: 16px 0;
}
span.red {
    font-size: 18px;
    color: #BC3855;
}
span.green {
    font-size: 18px;
    color: #00BB00;
}
span.olange {
    font-size: 18px;
    color: #FB9800;
}
.mix-day.article-name span {
    display: block;
    color: #333;
    font-weight: normal;
    padding: 8px 0 0 0;
    white-space: nowrap;
}
.option-confirm-note {
    display: none;
}
#booking-confirm-fieldset th {
    font-weight: bold !important;
    white-space: nowrap;
}
.option-confirm-header {
    background-color: #f5f3ed;
}
#booking-confirm-fieldset tr:first-child td span {
    display: block;
}
@media (max-width: 767px) {
    .box.red {
        padding: 24px;
    }
    
    /*.box.red p,
    .box.red ul li {
        font-size: 15px !important;
    }*/
    
    .box.red ul li {
        padding: 3px;
    }
    
    
    #booking-confirm-fieldset th {
        white-space: normal
    }
    
    .mix-day.article-name span {
        font-size: 11px;
        white-space: normal
    }
    
    #client-tel,
    .content-text.small-medium {
        width: 100% !important;
        display: block !important;
    }
    /* .booking-form-radio input,
    .field-item input {
        width: 30px;
        display: inline-block !important;
        vertical-align: middle !important;
    }*/
}
#booking-reservation-fieldset td span {
    display: block;
    font-size: 80%;
    padding: 8px 0 0 0;
}
#booking-reservation-fieldset #mdl_01,
#booking-reservation-fieldset #mdl_02,
#booking-reservation-fieldset #mdl_03,
#booking-reservation-fieldset #mdl_04,
#booking-reservation-fieldset #mdl_05,
#booking-form #mdl_01,
#booking-form #mdl_02,
#booking-form #mdl_03,
#booking-form #mdl_04,
#booking-form #mdl_05 {
    display: inline-block;
    width: 200px;
    margin: 0 0 0 20px;
}
@media (max-width: 767px) {
    #booking-reservation-fieldset #mdl_01,
    #booking-reservation-fieldset #mdl_02,
    #booking-reservation-fieldset #mdl_03,
    #booking-reservation-fieldset #mdl_04,
    #booking-reservation-fieldset #mdl_05,
    #booking-form #mdl_01,
    #booking-form #mdl_02,
    #booking-form #mdl_03,
    #booking-form #mdl_04,
    #booking-form #mdl_05 {
        width: 120px;
    }
}
#action-button {
    width: 100% !important;
}

@media (min-width: 1200px) {
    .mix-day.article-name span {
        font-size: 12px !important;
    }
    .day-mix-calendar .article-name{
        font-size: 14px;
    }
}
@media (max-width: 767px) {
    .home .mix-day {
        white-space: auto !important;
        font-size: 11px !important;
    }
}

/*^---------- massagearea --------*/
.post-inner.message {
    background-color: #EBEAE4;
    padding: 8rem 0;
}
.innner {
    width: calc(100% - 8rem);
    max-width: 120rem;
    margin: 0 auto;
}
.innner>h2 {
    margin: 0 auto 3rem;
}
.post-inner.message .innner h2,
.post-inner.message .innner h3,
.post-inner.message .innner p {
    text-align: center;
}
.post-inner.message .innner p {
    line-height: 32px;
    margin: 0 auto;
}


.post-inner.message .innner h3 {
    font-size: 20px
}
.gold {
    color: #AE9E6A;
}
span.goldborder {
    border-bottom: 2px solid #AE9E6A;
}
.green {
    color: #334718
}
.olange {
    color: #df922e
}
.navy {
    color: #3653ab
}
span.greenborder {
    border-bottom: 2px solid #334718;
}
.reds {
    color: #C04560
}
.green {
    color: #1eaa64
}
.blue{
    color: #1b66b1
}
/*span.redsborder {
    border-bottom: 2px solid #C04560
}*/
.redsborder {
    font-style: normal;
    border-bottom: 2px solid #C04560
}
@media (max-width: 767px) {
    .post-inner.message .innner h2 {
        font-size: 2.5rem !important;
    }
    
    .post-inner.message {
        padding: 4rem 0;
    }
}
.widget-title {
    font-size: 20px;
    letter-spacing: 2px;
}
#site-footer .section-inner {
    display: block
}
.footer-widgets {
    width: 100% !important;
    margin-left: 0;
    margin-left: 0;
    display: flex;
    justify-content: space-between;
}
.footer-widgets .widget:first-child,
.footer-widgets .widget {
    width: 30%;
    margin-top: 0;
    border: 1px solid #ccc;
    padding: 16px;
}
@media (max-width: 767px) {
    .footer-widgets {
        width: 90% !important;
        margin-left: auto;
        margin-right: auto;
        flex-direction: column;
    }
    
    .footer-widgets .widget:first-child,
    .footer-widgets .widget {
        width: 100%;
        margin: 4px auto;
    }
}
.footer-copyright {
    display: block;
    padding: 80px 0 0 0;
}
.footer-top-hidden #site-footer {
    margin-bottom: 0;
}
#mdl_01,
#mdl_02,
#mdl_03,
#mdl_04,
#mdl_05 {
    width: 80%;
    min-width: 80px;
    display: block;
    height: 30px;
    margin: 4px auto 0 auto;
    cursor: pointer;
    border-radius: 5px;
    background-color: #BDC49A;
    font-size: 14px;
    color: #000;
    text-align: center;
    padding: 6px 0;
    position: relative;
}
#mdl_02:after,
#mdl_03:after,
#mdl_04:after,
#mdl_05:after {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    content: '進学先確認';
}
@media (max-width: 767px) {
    #mdl_01,
    #mdl_02,
    #mdl_03,
    #mdl_04,
    #mdl_05 {
        font-size: 12px;
    }
}
#mdl_01 span,
#mdl_02 span,
#mdl_03 span,
#mdl_04 span,
#mdl_05 span {
    display: inline-block !important;
    color: red !important;
    padding: 0 !important;
}
@media (max-width: 767px) {
    #mdl_01 span,
    #mdl_02 span,
    #mdl_03 span,
    #mdl_04 span,
    #mdl_05 span {
        font-size: 10px;
    }
}
.schollmodal,
.schollmodal01,
.schollmodal02,
.schollmodal03,
.schollmodal04,
.schollmodal05 {
    display: none;
}
.schollmodal .btm,
.schollmodal01 .btm,
.schollmodal02 .btm,
.schollmodal03 .btm,
.schollmodal04 .btm,
.schollmodal05 .btm {
    margin: 30px auto 0 auto;
    display: block;
}
.schollmodal.opens,
.schollmodal01.opens,
.schollmodal02.opens,
.schollmodal03.opens,
.schollmodal04.opens,
.schollmodal05.opens {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
}
.schollmodal .inner,
.schollmodal01 .inner,
.schollmodal02 .inner,
.schollmodal03 .inner,
.schollmodal04 .inner,
.schollmodal05 .inner {
    width: 80%;
    height: auto;
    padding: 24px;
    background-color: #fff;
}
.sc-table {
    width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid #eee;
}
.sc-table th {
    width: 20%;
    text-align: center;
    font-size: 14px;
    padding: 8px !important;
    vertical-align: middle;
}
.sc-table td {
    width: 80%;
    text-align: left;
    font-size: 14px;
    padding: 8px !important;
    vertical-align: middle;
}
.sc-table td ul {
    margin: 0 !important;
}
.sc-table td ul li {
    display: inline-block;
    margin: 8px 0;
    padding: 0 16px;
    border-right: 1px solid #eee;
    font-size: 14px !important;
}
@media (max-width: 767px) {
    .sc-table th,
    .sc-table td {
        width: 100%;
        display: block;
        float: none;
    }
    .sc-table td ul li{
        margin: 0;
        display: block;
        border-right:none;
        padding: 3px 0;
        font-size: 13px !important;
    }
}
dl.list {
    width: 100%;
    border: 1px solid #DCD7CA;
    padding: 16px;
    margin: 8px auto;
}
dl.list dt {
    font-size: 16px;
    text-align: left;
}
dl.list dd {
    font-size: 14px;
    text-align: left;
}
dl.list dd ul {
    margin: 0 !important;
}
dl.list dd li {
    display: inline-block;
    margin: 8px 0;
    padding: 0 16px;
    border-right: 1px solid #DCD7CA;
    font-size: 14px !important;
}
.page-id-34 .post-inner {
    min-height: 300px;
}
.error404-content {
    color: #fff;
}
.footer-widgets-wrapper {
    margin: 0 auto !important;
}
.footer-widgets-wrapper {
    margin: 0 auto !important;
    width: 100% !important;
    /*margin-left: -6rem;
    width: calc(100% + 6rem);*/
}
.flex{
    display: flex;
    justify-content: space-between;
    padding: 0 0 30px 0;
}
.flex .left,
.flex .right
{
    width: 48%;
    padding: 24px 30px;
}.flex .left h3,
.flex .right h3{
    margin: 20px auto;
}

@media (max-width: 767px) {
    .flex{
        flex-direction: column;
    }
    .flex .left,
    .flex .right
    {
        width: 100%;
        padding: 20px;
        margin-bottom: 20px;
    }
  
        .post-inner.message .innner p {
            line-height: 24px;
            font-size: 14px;
          
        }
        dl.list dd li{
        display: block;
  margin: 0;
  border-right:none;
  font-size: 13px !important;
    }
    
    
   
}
.border{
    border:1px solid #9e8c68
}
.border-red{
    border: 1px solid #be8592;
}
.box.red .calendar-title{
    font-size: 22px;
    text-align: center;
    margin: 0 auto;
  padding: 20px;
  background: #EBEAE4;
}
.box h4{
    font-size: 18px;
}

.note {
    width: 100%;
    margin: 30px auto 0 auto;
    display: block;
    padding: 24px 24px 10px 24px;
    border: 1px solid #A62516;
    letter-spacing: 1px;
}
.note strong {
    display: block;
    text-align: center;
}

.textwidget{
    font-size: 15px;
}