@charset "utf-8";
/*
Theme Name: donmelpress
Theme URI: https://web-creators-online.com/
Description: どんメルシステム連動WordPressテーマ
Author: fukumoto Tomoko
Author URI: https://web-creators-online.com/
Version: 2.4.0
*/

/*font-familyにGoogleフォントを使用*/
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p|Roboto&display=swap');
/*==========================================
 body
===========================================*/


body {
    -webkit-text-size-adjust: none;
    width: 100%;
    font-size: 100%;
    font-family: 'Roboto', sans-serif;
    /*Googleフォントの指定*/
    background-color: #fff;
    color: #333;
}





/*==========================================
h1～h6 p aの共通の指定
===========================================*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-weight: 500;
    color: inherit;
}

p {
    margin: 0 0 1em 0;
}

p.no-post{
	    margin: 0 0 1em 16px;
}

@media only screen and (min-width: 1160px) {
    p {
        margin: 0 0 1.8em 0;
    }
}

/*★ここまで*/


/*リンク色*/

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #333;
    text-decoration: underline;
    transition: 0.5s;
}

.mean-container a.meanmenu-reveal{
transition:none;
}

/*画面幅992px以上の場合ここから*/
@media only screen and (min-width: 992px) {
    a:hover {
        color: #888;
        transition: 0.5s;
    }
}



/*==========================================
太字・border・行揃え用クラス・ボタン
===========================================*/

/*太字にする*/
.font-bold {
    font-weight: bold;
}



/*各行揃え用*/

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}


.clear{
	clear:both;
}

/*==========================================
 フルードイメージ
===========================================*/


img {
    max-width: 100%;
    height: auto;
}


/*==========================================
 ヘッダーのスタイル
===========================================*/

header {
    padding: 32px 0 24px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
}

header p{
	margin:0;
}

h1.site-title,
p.site-title{
    font-size: 24px;
    float: none;
}

h1.site-title a,
p.site-title a{
    color: #333;
}

h1.site-title a:hover,
p.site-title a:hover{
    text-decoration: none;
    opacity: 0.8;
}

h1.logo,
p.logo{
    line-height: 0;
    float: none;
}

h1.logo img,
p.logo img{
    max-width: 80%;
}

header .inner {
    position: relative;
}


/*画面幅992px以上の場合ここから*/
@media only screen and (min-width: 992px) {
    .dm-area {
        position: absolute;
        top: 4px;
        right: 0px;
        z-index: 9999999;
    }
}

/*画面幅992px以上の場合ここから*/
@media only screen and (max-width: 991px) {
    .dm-area {
        position: absolute;
        top: -74px;
        left: 0px;
        z-index: 9999999;
    }

}

.dm-area .btn-theme {
    white-space: normal;
    text-decoration: none;
    height: 40px;
    line-height: 40px;
    padding: 8px 24px;
    font-size: 14px;
    color: #fff;
}

.dm-area .btn-theme:focus,
.dm-area .btn-theme:hover {
    opacity: 0.8;
    cursor: pointer;
    text-decoration: none;
}


/*画面幅640px以上の場合ここから*/
@media only screen and (min-width: 640px) {

    h1.logo img,
	p.logo img{
        max-width: 50%;
    }

}

/*画面幅992px以上の場合ここから*/
@media only screen and (min-width: 992px) {

    header {
        padding: 32px 0 28px;
        text-align: left;
        overflow: hidden;
    }

    h1.logo,
    h1.site-title,
	p.logo,
    p.site-title{
        float: left;
    }

    h1.site-title,
	p.site-title{
        margin-top: 8px;
    }

}

/*★メディアクエリここまで*/




/*==========================================
 メインビジュアル
===========================================*/
#main-image {
    background-position: center center;
    background-size: cover;
    height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



/*中央寄せにする*/

.main-image-inner {
    width: 90%;
    margin: 0 auto 0px;
    background: rgba(255, 255, 255, 0.8);
    padding: 24px 16px;
    text-align: center;
    border: 1px solid #fff;
}

/*画面幅1200px以上の場合ここから*/
@media only screen and (min-width: 1160px) {
    .main-image-inner {
        width: 1160px;
        margin: 0 auto;
        padding: 40px;
    }
}

/*★メディアクエリここまで*/

.main-title {
    font-size: 20px;
    margin-bottom: 16px;
    line-height: 1.2;
}


.main-desc {
    line-height: 1.6;
}

/*画面幅992px以上の場合ここから*/
@media only screen and (min-width: 992px) {
    #main-image {
        height: 480px;
    }

    .main-title {
        font-size: 32px;
    }
}




.btn-theme {
    white-space: normal;
    text-decoration: none;
    height: 48px;
    line-height: 48px;
    padding: 16px 48px;
    font-size: 14px;
    color: #fff;
}

.btn-theme:focus,
.btn-theme:hover {
    opacity: 0.8;
    cursor: pointer;
    text-decoration: none;
}


/*==========================================
 トップページのスタイル
===========================================*/

/*テキスト新着*/

.top-text-news-wrap {
    padding: 16px;
    margin: 0 0 40px;
    ;
    border: 1px solid #ddd;
    background: #fff;
    position: relative;
}


h2.top-news-area-title {
    padding: 8px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 24px;
    font-weight: bold;
}

.custom-text {
    color: #fff;
}

.news-all {
    position: absolute;
    top: 28px;
    right: 32px;
    font-size: 14px;
}


.news-all a {
    color: #fff;
}

.news-all a:hover {
    text-decoration: none;
}

dl#newinfo,
dl.news-archive {
    line-height: 1.6;
}

/*画面幅768px以上の場合ここから*/
@media only screen and (min-width: 768px) {
    dl#newinfo {
        margin: 0;
        display: flex;
        flex-wrap: wrap;
    }

}


dl#newinfo dt {
    font-weight: bold;
    padding-top: 1.3em;
    font-size: 12px;
    width: 12%;
}

dl#newinfo dd {
    border-bottom: 1px dotted #ddd;
    font-size: 14px;
    width: 88%;
}


#newinfo dd a {
    display: block;
    padding-top: 0.2em;
    padding-bottom: 1em;
}

/*画面幅768px以上の場合ここから*/
@media only screen and (min-width: 768px) {
	#newinfo dd a {
    padding-top: 1em;
}
}

#newinfo dd a:hover {
    text-decoration: none;
}

/*お知らせ一覧ページ*/

dl.news-archive dt {
    font-weight: bold;
	padding-top:1.2em;
}

dl.news-archive dd {
    border-bottom: 1px dotted #ddd;
}


dl.news-archive dd a{
	display:block;
	padding-top:0.5em;
	padding-bottom:1em;
}
dl.news-archive dd a:hover{
	text-decoration:none;
}

/*==========================================
 コンテンツエリア全体のスタイル
===========================================*/

/*ページの全体を中央寄せにする*/

.inner {
    width: 90%;
    margin: 0 auto 0px;
}

/*スマホ表示 meanmenuになった時の調整*/
.mean-nav .inner {
    width: 100%;
    line-height: 1.6;
}

@media only screen and (min-width: 1160px) {
    .inner {
        width: 90%;
        max-width: 1160px;
        margin: 0 auto;
    }
}

/*★メディアクエリここまで*/



/*2カラムレイアウトの場合*/

#contents {
    width: 90%;
    margin: 0 auto 56px;
    padding-top: 40px;
}

#contents #main-1column,
#contents #main {
    margin: 0 10px 40px;
}


#contents #sub {
    margin: 0 10px 0;
}

/*2カラムレイアウトのサイドバー*/

#contents #sub {
    margin-bottom: 24px;
}


/*画面幅1200px以上の場合ここから*/
@media only screen and (min-width: 1160px) {
    #contents {
        overflow: hidden;
        padding-top: 56px;
        width: 90%;
        max-width: 1160px;
    }

    #contents #main-1column {
        margin: 0 auto 40px;
        width: 90%;
    }

    #contents #main {
        width: 70%;
        float: left;
        margin: 0 0 40px;
    }

    #contents #sub {
        width: 25%;
        float: right;
        margin: 0;
    }
}

/*★メディアクエリここまで*/



/*==========================================
フッター部グリッド
===========================================*/

/*親*/

.footer-container {
    display: block;
    margin-top: 20px;
}

.footer-grid {
    margin-top: 20px;
}

#footer p.logo {
    text-align: center;
    margin-bottom: 40px;
}

#footer p.logo img {
    max-width: 70%;
}

/*画面幅640px以上の場合ここから*/
@media only screen and (min-width: 640px) {

    #footer p.logo img {
        max-width: 70%;
    }

}

/*画面幅640px以上の場合ここから*/
@media screen and (min-width:768px) and (max-width:991px) {

    #footer p.logo img {
        max-width: 50%;
    }

}

/*画面幅640px以上の場合ここから*/
@media only screen and (min-width: 992px) {

    #footer p.logo img {
        max-width: 70%;
    }

}

#footer p.site-title {
    font-size: 1.3em;
    text-align: center;
    margin-bottom: 32px;
}

@media screen and (min-width: 992px) {

    #footer p.logo,
    #footer p.site-title {
        text-align: left;
        margin-bottom: 0;
    }

    .footer-container {
        display: flex;
        margin-left: -32px;
    }

    .footer-grid {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: calc((100% / 3) - 32px);
        margin-left: 32px;
    }
}

/*★メディアクエリここまで*/

/*==========================================
サブページ　パンくずリスト
===========================================*/

.breadcrumb {
    padding: 20px 0 0 0;
}

.breadcrumb li {
    display: inline-block;
    font-size: 12px;
    padding: 4px 4px 4px 0;
    line-height: 1.6;
}


.breadcrumb li a {
    text-decoration: none;
}


/*最初のliにはホームアイコンを表示させる*/
.breadcrumb li:first-child a:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f015';
    padding-right: 4px;
}

.breadcrumb li a:hover {
    text-decoration: none;
}

.breadcrumb li:after {
    content: '\003e';
    /* 「>」を要素間の区切り文字として表示 */
    margin-left: 8px;
    margin-right: 8px;
    color: #888888;
}

.breadcrumb li:last-child:after {
    content: "";
}

/*==========================================
タイトル用クラス
===========================================*/

.headline {
    font-size: 26px;
    margin: 8px 0 16px 0;
    font-weight: 500;
}

/*画面幅768px以上の場合ここから*/
@media only screen and (min-width: 768px) {
    .headline {
        font-size: 32px;
        margin: 16px 0 16px 0;
    }
}

/*★ここまで*/


/*小さ目タイトル*/
.headline-small {
    font-size: 24px;
    margin: 10px 0 5px 0;
    font-weight: bold;
}

/*画面幅768px以上の場合ここから*/
@media only screen and (min-width: 768px) {
    .headline-small {
        margin: 8px 0 8px 0;
    }
}

/*★メディアクエリここまで*/



/*==========================================
tableのスタイル
===========================================*/

.table {
    width: 100%;
    border: 1px solid #e3e3e3;
}

.table td {
    padding: 16px;
    border: 1px solid #e3e3e3;
}

.title-cell {
    background-color: #F3F3F3;
}



/*==========================================
WordPress
===========================================*/

/*==========記事一覧用 サムネイル+タイトルのセット1行並び*/

.a-div:focus,
.a-div:hover {
    opacity: 1;
    text-decoration: none;
    display: block;
}

@media screen and (min-width: 768px) {

    .a-div:focus,
    .a-div:hover {
        opacity: 0.6;
    }
}

.archive-list {
    width: 100%;
    display: flex;
    margin-bottom: 16px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 16px;
}

.archive-list-thumbnail {
    width: 160px;
    position: relative;
}

.archive-list-post-category {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 11px;
    text-align: center;
    display: inline-block;
    padding: 4px;
    z-index: 100;
}

.archive-list-post-category a {
    color: #fff;
    text-decoration: none;
}

.archive-list-post {
    padding-left: 16px;
    width: calc(100% - 160px);
}

.archive-list-post-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
}

@media screen and (min-width: 768px) {

    .archive-list-thumbnail {
        width: 240px;
        position: relative;
    }

    .archive-list-post {
        padding-left: 16px;
        width: calc(100% - 240px);
    }

    .archive-list-post-title {
        font-size: 22px;
    }

}

/*==========記事一覧用 2カラム*/


.archive-container {
    display: flex;
    flex-flow: row wrap;
    margin-top: -8px;
    margin-left: -8px;
}


/*記事一つ分のカラムの幅を指定*/

.archive-grid {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: calc((100% / 2) - 8px);
    padding: 8px 8px 16px;
    margin-top: 8px;
    margin-left: 8px;
    border: 1px solid #ddd;
}



@media screen and (min-width: 992px) {


    .archive-container {
        margin-left: -16px;
    }

    .archive-grid {
        flex-basis: calc((100% / 2) - 16px);
        padding: 12px 12px 16px;
        margin-top: 16px;
        margin-left: 16px;
    }

    #index-area {
        margin: 8px 0 32px;
    }

    .archive-grid:nth-child(-n+2) {
        margin-top: 0px;
    }
}

/*IE11向け*/

*::-ms-backdrop,
.archive-container {
    margin-top: -14px;
    margin-left: -14px;
}

*::-ms-backdrop,
.archive-grid {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: calc((90% / 2) - 14px);
    padding: 10px;
    border: 1px solid #ddd;
}


/*アイキャッチ画像*/
.post-thumbnail {
    position: relative;
}

/*アイキャッチ画像に重なるカテゴリ名*/

.post-data-category {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 11px;
    text-align: center;
    display: inline-block;
    padding: 4px;
    z-index: 100;
}

.post-data-category a {
    color: #fff;
    text-decoration: none;
}

.post-title {
    font-size: 16px;
    margin: 8px 0 16px 0;
    line-height: 1.4;
    font-weight: bold;
}

@media screen and (min-width: 992px) {
    .post-title {
        font-size: 18px;
    }
}

.post-title a {
    text-decoration: none;
}

.post-title a:hover,
.post-title a:focus,
.post-title a:active {
    opacity: 0.8
}




/*==================アーカイブタイトル*/

h1.title-archive,
h2.title-archive {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 32px;
    padding: 0 0 16px;
    line-height: 1;
}

/* カテゴリの説明文*/
.category-description {
    margin: 0 auto 4em;
    padding: 1em;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 1px 1px 2px #ccc;
    line-height: 1.7;
}

.category-description p {
    margin: 0;
}

.category-description a {
    text-decoration: underline;
}

/*　カテゴリ名・日付*/

.post-data li {
    margin: 16px 0 0 0;
    display: inline-block;
    font-size: 12px;
}

/*投稿日にアイコンを表示させる*/
.post-data li.date:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f073';
    padding-right: 4px;
}

/*タグにアイコンを表示させる*/
.post-data li.tag:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f02b';
    padding-right: 4px;
}

/*カテゴリ名*/

.post-data li.category {
    color: #fff;
    text-align: center;
    display: inline-block;
    padding: 4px;
}

.post-data li.category a {
    color: #fff;
    text-decoration: none;
}


/*==========================================
WordPress　投稿ページ・固定ページ　
===========================================*/

/*投稿・固定ページタイトル*/

.post-top h1 {
    font-size: 28px;
    margin: 0 0 40px 0;
    line-height: 1.4;
    font-weight: 600;
}

@media screen and (min-width: 992px) {
	.post-top h1 {
    font-size: 32px;
}
}

/*アイキャッチ画像*/

.post-top-img {
    margin: 16px 0 0;
}

.post-body{
	margin-top: 40px;
}

.post-body-ac .post-body{
	margin-top: 0px;
}

/* 段落と見出し */

.post-body p {
    line-height: 2;
    margin: 0 0 1.8em 0;
}

.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
    clear: both;
    line-height: 1.4;
    font-weight: 600;
}

.post-body h2 {
    margin: 3em 0 1.8em;
}

.post-body h3 {
    margin: 3em 0 1.5em;
}

.post-body h4 {
    margin: 2.5em 2px 1.2em;
}

.post-body h5 {
    margin: 2em 0 1em;
}

.post-body h6 {
    margin: 1.5em 0 0.8em;
}

.post-body h1 {
    font-size: 170%;
    padding: 0 0 20px;
}

.post-body h2 {
    font-size: 150%;
    padding: 0 0 20px;
}

.post-body h3 {
    font-size: 140%;
    padding: 8px 0 8px 16px;
}

.post-body h4 {
    font-size: 120%;
    padding: 6px 0 6px 16px;
}

.post-body h5 {
    font-size: 110%;
}

.post-body h6 {
    font-size: 100%;
}


/* リスト */
.post-body li,
.post-body dt,
.post-body dd {
    line-height: 2.2;
}

.post-body ul,
.post-body ol,
.post-body dl {
    margin: 1em 0 1.8em 0;
}

.post-body ol {
    list-style: decimal;
    margin-left: 1em;
}

.post-body ul {
    list-style: disc;
    margin-left: 1.3em;
}

.post-body ul li {
    padding-left: 0;
}

.post-body li > ul,
.post-body li > ol {
    margin: 0;
}


.post-body ul.check {
    list-style: none;
    margin-left: 0;
}

.post-body ul.check li {
    position: relative;
    padding-left: 1.5em;
}

.post-body ul.check li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f14a';
    color: #f15a24;
    position: absolute;
    left: 0;
    top: -0.2em;
    font-size: 20px;
}



.post-body dt {
    font-weight: bold;
}

.post-body dd {
    margin-bottom: 1em;
}

/* block quote */
.post-body blockquote {
    margin: 0 0 40px 0;
    padding: 1em 8px;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 0px 0px #f3f3f3;
}

blockquote p:last-child,
.post-body .post-waku p {
    margin-bottom: 0;
}


.post-body .waku {
    margin: 0 0 40px 0;
    padding: 1em 8px;
    border: 3px solid #ddd;
    box-shadow: 0px 4px 0px 0px #f3f3f3;
}

/*画面幅767px以上の場合ここから*/
@media only screen and (min-width: 767px) {

    .post-body blockquote,
    .post-body .waku {
        padding: 1em 32px;
    }
}

/*★ここまで*/
/*ボタン*/
a.post-btn {
    white-space: normal;
    text-decoration: none;
    height: 48px;
    line-height: 48px;
    padding: 16px 48px;
    font-size: 14px;
    color: #fff;
    background-color: #f15a24;
    border-radius: 8px;
}

a.post-btn:focus,
a.post-btn:hover {
    opacity: 0.8;
    cursor: pointer;
    text-decoration: none;
}


/*マーカー*/
.marker {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(transparent 60%, #ffff66 0);
}



/* テキストリンク */

.post-body a {
    text-decoration: underline;
}

.post-body a:hover {
    opacity: 0.5;
}


/* WordPress Native Styles */
/* img */

.aligncenter {
    display: block;
    margin: 0 auto;
}

.alignright {
    float: right;
}

.alignleft {
    float: left;
}

img[class*="wp-image-"],
img[class*="attachment-"] {
    height: auto;
    max-width: 100%;
}



.wp-block-button {
    margin-top: 40px;
}


/* ボタン*/
.post-body .wp-block-button a {
    text-decoration: none;
}

/*tableのスタイル*/

.post-body .wp-block-table table {
    width: 100%;
    border: 1px solid #e3e3e3;
    margin: 40px 0;
}

.post-body table th,
.post-body table td {
    padding: 16px;
    border: 1px solid #e3e3e3;
	line-height:1.5;
}


/* ブロックエディタ==============*/

/* メディアと文章枠*/
.wp-block-media-text {
    margin-bottom: 40px;
}

/* メディアと文章 文章*/
.wp-block-media-text__content {
    margin-top: 16px;
}

/*メディアと文章の間の余白調整*/
.post-body .wp-block-media-text .wp-block-media-text__content {
    padding: 0 8% 0 4%;
}


.post-body .wp-block-cover__inner-container p {
    line-height: 1.5;
}


.post-body .wp-block-cover {
    margin-bottom: 40px;
}

.post-body .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}

.post-body .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}



/* Block Font Sizes -------------------------- */

.entry-content .has-small-font-size {
    font-size: 0.75em;
}

.entry-content .has-normal-font-size,
.entry-content .has-regular-font-size {
    font-size: 0.9em;
}

/* ウィジェット テキスト=========*/
.textwidget {
    line-height: 1.6;
    font-size: 14px;
}

.textwidget p {
    margin-bottom: 24px;
}

.textwidget a {
    text-decoration: underline;
}

/* ウィジェット 画像=========*/

/* カスタムCSSで中央寄せ*/
.side-widget img.text-center {
    display: block;
    margin: auto;
}

/* ウィジェット ドロップダウン=========*/

/* カテゴリーセレクトボックスのスタイル */
.wp-block-categories-dropdown select,
.wp-block-archives-dropdown select{
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    max-width: 300px; /* レスポンシブ対応 */
    box-sizing: border-box;
    appearance: none; /* デフォルトのスタイルを無効化 */
    -webkit-appearance: none; /* Safari対応 */
    -moz-appearance: none; /* Firefox対応 */
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23828282"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); /* ドロップダウンアイコン */
    background-repeat: no-repeat;
    background-position: right 8px center; /* アイコンの位置調整 */
    padding-right: 30px; /* アイコン分の余白 */
    cursor: pointer;
}

/* フォーカス時のスタイル */
.wp-block-categories-dropdown select:focus,
.wp-block-archives-dropdown select:focus{
    outline: none;
    border-color: #ccc;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* 選択した項目のスタイル */
.wp-block-categories-dropdown select option[selected],
.wp-block-archives-dropdown select option[selected] {
    font-weight: bold;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .wp-block-categories-dropdown select,
	.wp-block-archives-dropdown select{
        max-width: none; /* レスポンシブ時は幅を100%に */
    }
}


/*iflameをレスポンシブにする*/

.video position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
/*アスペクト比16:9の場合9/16*100=56.25*/
overflow: hidden;
}

.video iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

/*ウィジェットのiflameをレスポンシブにする*/

.wp-block-embed__wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
/*アスペクト比16:9の場合9/16*100=56.25*/
overflow: hidden;
	border:1px solid #eee;
}
.wp-block-embed__wrapper iframe{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.wp-block-embed__wrapper:before {
    content: "";
    display: block;
    padding-top: 50%;
}



/* 目次=========*/

.post-body #ez-toc-container {
    background: #f9f9f9;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    display: table;
    margin-bottom: 1em;
    padding: 16px;
    position: relative;
    width: 100%;
}


.ez-toc-list li a{
	display:block;
	padding:8px 0;
}

/*画面幅992px以上の場合ここから*/
@media only screen and (min-width: 992px) {
.ez-toc-section {
margin-top: -80px;
padding-top: 80px;
}
}



/*==========================================
お知らせ投稿ページ前後の記事へのリンク
===========================================*/


.prev-next-wrap {
    margin: 80px 0 48px 0;
    /*	padding:20px 0;*/
    overflow: hidden;
    font-size: 14px;
    background: #ddd;
}

.prev-next-wrap a {
    display: block;
    padding: 20px;
    text-decoration: none;
}

.prev-post a {
    padding-left: 40px;
}

.next-post a {
    padding-right: 40px;
}


.prev-post a:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f104';
    position: absolute;
    top: 33%;
    left: 16px;
    text-align: left;
}

.next-post a:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f105';
    position: absolute;
    top: 33%;
    right: 16px;
    text-align: right;
}



.prev-post {
    float: none;
    position: relative;
}

.next-post {
    float: none;
    position: relative;
    margin-top: 8px;
}

/*画面幅767px以上の場合ここから*/
@media only screen and (min-width: 767px) {
    .prev-post {
        float: left;
        width: 49%;
    }

    .next-post {
        float: right;
        width: 49%;
        margin-top: 0;
    }
}

/*★ここまで*/





/*==========================================
投稿ページ前後の記事へのリンク
===========================================*/

.prev_next {
    display: flex;
    margin: 48px 0;
}

.prev_next .next,
.prev_next .prev {
    width: 50%;
}

.prev_next a {
    display: flex;
}

.prev_next .prev a {
    flex-direction: row-reverse;
}

.prev_next a {
    color: inherit;
    text-decoration: none;
    opacity: 1;
}

.prev_next a:hover {
    opacity: 0.6;
}

a .prev_next_arrow {
    background: #999;
}

.prev_next .next,
.prev_next .prev {
    height: 110px;
}

.prev_next_arrow {
    width: 40px;
    height: 110px;
    font-size: 150%;
    text-align: center;
    line-height: 110px;
    flex-shrink: 0;
    position: relative;
}

.prev_next_inner {
    width: 100%;
    height: 110px;
    box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
}


.prev.no_post .no_post_inner {
	flex-direction: row-reverse;
}

.prev .prev_next_inner {
	flex-direction: row-reverse;
}




.prev_next .thumb {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}

.prev_next .title {
    font-size: 0.875rem;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem;
}

.next_arrow::before,
.prev_arrow::before {
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border: 2px;
    border-style: solid;
    border-color: transparent;
    position: absolute;
    top: 47px;
}

.next_arrow::before {
    border-top-color: #fff;
    border-left-color: #fff;
    transform: rotate(-45deg);
    left: 16px;
}

.prev_arrow::before {
    border-top-color: #fff;
    border-right-color: #fff;
    transform: rotate(45deg);
    right: 16px;
}

.no_post .no_post_inner {
    display: flex;
}

.prev .no_post .no_post_inner {
    flex-direction: row-reverse;
}

.no_post .prev_next_arrow {
    background: #e2e2e2;
}

@media (min-width: 961px) {

    .prev_next_inner {
        border-top: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
    }

    .prev .prev_next_inner {
        border-left: 1px solid #e2e2e2;
    }

}

@media (max-width: 960px) {

    .prev_next {
        display: block;
        margin-bottom: 40px;
    }

    .prev_next .next,
    .prev_next .prev {
        width: 100%;
        margin-bottom: 10px;
    }

    .prev_next_inner {
        border-top: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
    }

    .next .prev_next_inner {
        border-right: 1px solid #e2e2e2;
    }

    .prev .prev_next_inner {
        border-left: 1px solid #e2e2e2;
    }

    .prev_next .title {
        font-size: 0.875rem;
    }

    .prev_next .prev .title {
        text-align: right;
    }

    .prev_next .no_post {
        display: none !important;
    }

}

@media (max-width: 560px) {

    .prev_next {
        margin-bottom: 30px;
    }

    .prev_next .next,
    .prev_next .prev {
        width: 100%;
        margin-bottom: 10px;
    }

    .prev_next_inner {
        border-top: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
    }

    .next .prev_next_inner {
        border-right: 1px solid #e2e2e2;
    }

    .prev .prev_next_inner {
        border-left: 1px solid #e2e2e2;
    }

    .prev_next .title {
        font-size: 0.75rem;
    }

}

/*==========================================
投稿ページ関連記事へのリンク　3カラム
===========================================*/

.related-post {
    margin-top: 56px;
}

.related-post h2 {
    font-size: 20px;
    border-bottom: solid 1px #666;
    margin-bottom: 16px;
    padding: 0 0 16px;
    font-weight: bold;
}

.related-post ul {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1% 16px;
}

.related-post li {
    font-size: 13px;
    flex: 0 1 48%;
    margin: 0 1% 16px;
}

.related-post li p {
    margin-bottom: 0;
    line-height: 1.6;
}

.related-post li img {
    margin-bottom: 4px;
}

.related-post li a {
    text-decoration: none;
}





/*画面幅640px以上の場合ここから*/
@media only screen and (min-width: 640px) {


    .related-post li {
        flex: 0 1 23%;
    }


}

/*★ここまで*/



/*==========================================
 ページネーションのスタイル
===========================================*/

.pagination {
    clear: both;
    padding: 20px 0;
    position: relative;
    font-size: 14px;
    line-height: 13px;
    margin-bottom: 56px;
}

.pagination span,
.pagination a {
    display: block;
    float: left;
    margin: 4px 4px 4px 0;
    padding: 12px 16px;
    text-decoration: none;
    width: auto;
    background: #ddd;
}

.pagination a:hover {
    color: #fff;
    opacity: 0.5;
}

.pagination .current {
    padding: 12px 16px;
    color: #fff;
}




/* コンタクトフォーム 　送信メッセージの色*/

.wpcf7 .wpcf7-response-output {
    padding: 15px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-response-output {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.wpcf7 .wpcf7-mail-sent-ok {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.req {
    font-size: 11px;
    font-weight: normal;
}



/*==========================================
 サイドバーのスタイル
===========================================*/


/*サイドバーの各ウィジェットを囲むdiv*/

.side-widget, 
.side-widget-contents{
    margin: 0 0 32px 0;
}

/*画面幅992px以上の場合ここから*/
@media only screen and (min-width: 992px) {
.side-widget, 
.side-widget-contents{
        margin: 0 0 50px;
    }
}

/*サイドバーのタイトル*/

.side-title,
.side-widget h3{
    /*font-size: 15px;*/
    margin: 0 0 16px 0;
    padding: 0 0 16px;
    font-weight: bold;
}

.side-widget li {
    font-size: 14px;
    border-bottom: 1px solid #eee;
    padding-left: 1em;
    /*1文字分、左に寄せる*/
    line-height: 1.2;
}

.side-widget li a:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    padding-right: 0.5em;
    color: #ddd;
    margin-left: -1em;
    /*1文字分、左に寄せる*/
}

/*最初のli要素の調整*/
.side-widget li:first-child {
    padding-top: 0;
}

.side-widget li:last-child {
    border: none;
}

.side-widget li a {
    display: block;
    text-decoration: none;
    padding: 14px 0;
}

.side-widget li a .post-count,
.widget_archive ul li a .post-count {
    display: block;
    float: right;
    color: #fff;
    background-color: #dddddd;
    padding: 2px 6px 1px;
}


.side-widget ul li ul.children {
    padding-left: 1.5em;
    list-style: none;
}

.side-widget ul li ul.children li {
    font-size: 12px;
    border: none;
}

.side-widget ul li ul.children li a {
    padding: 10px 0;
}

.side-widget li:last-child {
    border: none;
}

/*アコーディオンメニュー*/
.accordion-toggle {
  display: none;
}

.accordion-button {
  background-color: #f4f4f4;
  border: none;
  padding: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between; /* テキストとアイコンの間にスペースを追加 */
	position:relative;
}

.accordion-button .arrow {
position: absolute;
  content: "";
	top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #555;
margin-top: -3px;/*アイコンサイズの半分の高さのネガティヴマージンを付与*/
  transition: transform 0.3s ease; /* アイコンの回転にスムーズなトランジションを追加 */
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease; /* スムーズな開閉動作を追加 */
  padding-left: 0;
}

.accordion-toggle:checked + .accordion-button .arrow {
	margin-top: -8px;
  transform: rotate(180deg); /* チェックされた状態でアイコンを反転 */
}

.accordion-toggle:checked + .accordion-button + .accordion-content {
  max-height: 1500px; /* コンテンツの最大高さに合わせて調整 */
	overflow-y:scroll;
}

.accordion-content li {
	font-size: 14px;
    border-bottom: 1px solid #eee;
    padding: 0.5em 1em 0.5em 1em;
  background-color: #fff; /* 開いたメニューの背景色を指定 */
  transition: background-color 0.3s ease; /* 背景色変化にスムーズなトランジションを追加 */
}

.accordion-content li a {
  display: block; /* リンク全体をブロック要素に変更 */
	padding: 14px 0;
}

.accordion-content li a:hover {
text-decoration:none;
}

.accordion-content li a:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    padding-right: 0.5em;
    color: #ddd;
    margin-left: -1em;
    /*1文字分、左に寄せる*/
}

.accordion-content li:hover {
  background-color: #f0f0f0; /* マウスオーバー時の背景色を指定 */
}

@media (max-width: 767px) {
  .accordion {
    margin-bottom: 10px;
  }
}

/*検索フォーム*/

#searchform {
    position: relative;
}

#s {
    font-size: 14px;
    width: 100%;
    margin: 0;
    padding: 8px;
    border: solid 1px #bbb;
    border-radius: 4px;
    background-color: #f1f1f1;
}

#searchsubmit {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1em;
    position: absolute;
    top: -16%;
    right: 8%;
    margin-top: 16px;
    padding: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #ccc;
}

#searchsubmit:hover {
    opacity: .6;
}

/*tag*/

.tagcloud a {
    font-size: 14px !important;
    line-height: 1em;
    background: #cccccc;
    color: #fff;
    display: inline-block;
    white-space: nowrap;
    padding: 8px 8px;
    margin-top: 4px;
    border-radius: 4px;
    text-decoration: none;
}

.tagcloud a:hover {
    background: #ddd;
    color: #6ba5d2 !important;
}

/* アイコンを入れる「Font Awesome」*/

.tagcloud a:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f02b";
    padding-right: 4px;
}


/*==========================================
フッターSNS
===========================================*/


.foot-sns {
    border-top: 1px solid #ddd;
    padding: 32px 0;
    text-align: center;
}

.foot-sns li {
    display: inline-block;
    margin-left: 40px;
}

.foot-sns a {
    display: inline-block;
    font-size: 40px;
}

.fb {
    color: #1877f2;
}

.foot-sns a.fb:hover {
    opacity: 0.8;
    color: #1877f2;
}

.tw {
    color: #1daaf2;
}

.foot-sns a.tw:hover {
    opacity: 0.8;
    color: #1daaf2;
}

.yt {
    color: #dd4b39;
}

.foot-sns a.yt:hover {
    opacity: 0.8;
    color: #dd4b39;
}

.in {
    color: #d93177;
}

.foot-sns a.in:hover {
    opacity: 0.8;
    color: #d93177;
}


.foot-sns li:first-child {
    margin-left: 0px;
}

/*画面幅992px以上の場合ここから*/
@media only screen and (min-width: 992px) {

    .foot-sns a {
        font-size: 40px;
    }
}

/*★ここまで*/



.foot-sns a:hover {
    opacity: 0.8;
}

/*==========================================
ページトップへのボタンの指定　common.jsと連動
===========================================*/

#page-top {
    position: fixed;
    bottom: 8px;
    right: 16px;
    z-index: 9999;
}

#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 48px;
    padding: 16px 0;
    text-align: center;
    display: block;
    opacity: 0.8;
}

#page-top a:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, .8);
}


/*==========================================
 フッターのスタイル
===========================================*/
#footer {
    padding: 16px 0 0;
    border-top: 1px solid #e3e3e3;
    font-size: 14px;
}


#footer p {
    margin: 0;
    padding: 0 0 4px;
}


#footer small {
    font-size: 11px;
    padding-top: 16px;
}



/*フッターメニューのタイトル*/

.foot-title {
    font-weight: bold;
    margin-bottom: 16px;
    font-size: 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid #ccc;
}

/*フッターメニュー*/

.foot-menu {}

.foot-menu li {
    border-bottom: 1px solid #eee;
}



.foot-menu li:last-child {
    border: none;
}

.foot-menu li a {
    display: block;
    padding: 16px 0;
    text-decoration: none;
    color: #333;
}

.foot-menu li:first-child a {
    padding: 0 0 16px;
    /*上のpaddingを0にする*/
}

.foot-menu li a:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    padding-right: 1em;
    color: #ddd;
}

.foot-menu li a:hover {
    text-decoration: none;
}

.foot-menu ul.sub-menu {
    padding-left: 1.5em;
    list-style: none;
}

.foot-menu ul.sub-menu li {
    border: none;
}

.foot-menu ul.sub-menu li a {
    padding: 10px 0;
}

.foot-menu li:last-child {
    border: none;
}

/*フッターSNSアイコン*/

#footer .sns {
    font-size: 20px;
}

#footer .sns a {
    display: inline-block;
    color: #333;
    font-size: 20px;
    margin-right: 8px;
}

#footer .sns a:hover {
    color: #d0475e;
    opacity: 0.5;
}


/*フッター最下部 コピーライト表記部分*/
.foot-outer {
    margin-top: 56px;
    text-align: center;
    padding: 16px 0;
    color: #fff;
}

.foot-outer a {
    color: #fff;
}

.foot-outer a:hover {
    text-decoration: none;
}

.clone-nav {
    display: none;
}


@media only screen and (min-width: 992px) {
    .global-nav {
        background: #fff;
    }

    .global-menu {
        font-size: 0;
        position: relative;
        z-index: 1000;
    }

    .global-menu li {
        width: 16.666%;
        display: inline-block;
        position: relative;
        text-align: center;
    }

    /*孫メニューに影響しない記述法*/
    .global-menu > li {
        border-right: 1px solid #ddd;
    }

    .global-menu > li:first-child {
        border-left: 1px solid #ddd;
    }

    .global-menu li a {
        display: block;
        margin: 0;
        padding: 17px 0;
        font-size: 14px;
        line-height: 1.2;
        /*=14px*/
        text-decoration: none;
    }



/*子以下のメニュー=======================*/
	
.global-menu li ul {
  position: absolute;
  z-index: 100;
top: 100%;/*子メニュー　親要素を基準に絶対値で配置　下に展開*/
  left: 0;
  width: 100%;
}
.global-menu li ul li {
  overflow: hidden;
  width: 100%;
  height: 0;/*ここでは表示させずマウスを乗せたときに高さを持たせることで表示させる。*/
  color: #fff;
  transition: .2s;
}
	
/*開いた状態の子メニュー*/
	
.global-menu li ul li a {
padding: 17px 16px 16px;
  background: #e9e9e9;
  text-align: left;
	border-bottom:1px solid #fff;
}
	
/*マウスをのせた時*/
/*親*/	
.global-menu > li:hover > a { 
	background:rgba(250, 250, 250, 0.5);
	}
	
/*子*/
.global-menu > li:hover li:hover > a { 
	background: #f4f4f4; 
	}
	
.global-menu li:hover > ul > li {
overflow: visible;/*これで表示*/	
 height:48px;/*これで表示*/
	transition: .2s;
}
	
.global-menu li ul li ul {
  top: 0;
  left: 100%;/*孫、ひ孫メニュー用に横に現れるように*/	
}
	
.global-menu li:last-child ul li ul {
left: -100%;/*一番右のメニューがディスプレイからはみ出さないように*/	
  width: 100%;
}
	
.global-menu li ul li ul li a {  
	background: #f4f4f4;
	}
	
.global-menu li:hover ul li ul li:hover > a { 
	background:#f4f4f4;
	}
	


/*下の階層にメニューがあることを示す矢印をつける*/	
	
.global-menu > li.menu-item-has-children:after {
position: absolute;
  content: "";
	top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #555;
margin-top: -3px;/*アイコンサイズの半分の高さのネガティヴマージンを付与*/
}
.global-menu li ul li ul:before {
  position: absolute;
  content: "";
  top: 18px;
  left: -20px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: #454e08;
}
.global-menu li:last-child ul li ul:before {
  position: absolute;
  content: "";
  top: 18px;
  left: 200%;
  margin-left: -20px;
  border: 5px solid transparent;
  border-right-color: #454e08;
}



/* スクロールされたら表示させるナビゲーション common.jsにて指定*/

/*固定表示用のアニメーション指定*/
 .clone-nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        transition: .3s;
        transform: translateY(-100%);
        opacity: 0.9;
    }


/*ナビゲーションが表示するタイミング*/
.is-show {
        transform: translateY(0);
    }

}

/*form関連*/

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
    border-radius: 0;
    -webkit-box-sizing: content-box;
    -webkit-appearance: button;
    appearance: button;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
    display: none;
}

input[type="submit"]::focus,
input[type="button"]::focus {
    outline-offset: -2px;
}

/* ここまで */

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 8px 4px;
    margin: 0 auto;
    color: #666;
    font-size: 16px;
    line-height: 16px;
    border: solid 1px #ccc;
    background: #fff;
    -webkit-box-shadow: 2px 3px 5px -2px #ddd inset;
    -moz-box-shadow: 2px 3px 5px -2px #ddd inset;
    box-shadow: 2px 3px 5px -2px #ddd inset;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}



.wpcf7-form-control-wrap select {
    width: 100%;
    padding: 8px 4px;
    margin: 0 auto 1em;
    color: #666;
    font-size: 16px;
    line-height: 16px;
    border: solid 1px #ccc;
    background: #fff;
    -webkit-box-shadow: 2px 3px 5px -2px #ddd inset;
    -moz-box-shadow: 2px 3px 5px -2px #ddd inset;
    box-shadow: 2px 3px 5px -2px #ddd inset;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

@media only screen and (min-width: 992px) {
    .wpcf7-form-control-wrap select {
        width: 40%;
    }
}

label {
    line-height: 1.6;
}

/*チェックボックス、ラジオボタンの改行*/
span.wpcf7-list-item {
    display: block !important;
}

/*送信・リセットボタンの体裁を指定（[type="○○"]で属性の値でセレクト）*/

.wpcf7-submit {
    width: 100%;
    padding: 8px 0px;
    margin: 0;
    border: 0;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    color: #fff;
}


.wpcf7-submit:hover {
    opacity: 0.8;
    cursor: pointer;
    /*←これでカーソルを指先型に変化させる*/
    transition: 0.5s;
    /*プロパティに変更があった際、一定時間でプロパティを変化させる機能。*/
}


/*カテゴリ・アーカイブウィジェット ドロップダウンにした場合ラベル表示無し*/
label.screen-reader-text {
    display: none;
}


/*-------------------------
  ブログカード
-------------------------*/
.blog-card {
    background: #fbfaf8;
    border: 1px solid #ddd;
    word-wrap: break-word;
    max-width: 100%;
    border-radius: 5px;
    margin: 24px;
}


@media only screen and (min-width: 992px) {
	
	.blog-card {
    margin: 32px;
}
	
}


.blog-card:hover {
    background: #fee;
}

.blog-card a {
    text-decoration: none;
}

.blog-card-title {
    color: #337ab7;
    display: block;
}

.blog-card-thumbnail {
    float: left;
    padding: 10px;
}

.blog-card-thumbnail img {
    display: block;
    padding: 0;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.blog-card-content {
    line-height: 120%;
}

.blog-card-title {
    padding: 10px 10px 10px 0;
    font-size: 120%;
    font-weight: bold;
    line-height: 1.5em;
}

.blog-card-excerpt {
    color: #333;
    margin: 0 10px 10px;
    line-height: 1.5em;
}

.blog-card .clear {
    clear: both;
}



/*カレンダー*/
#sidebar .widget_calendar {
    margin-bottom: 40px;
}

table#wp-calendar {
    table-layout: fixed;
    width: 100%;
    margin: 5px auto 0 auto;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px;
}

table#wp-calendar caption {
    margin: 10px 0 0 0;
    padding: 2px;
    width: auto;
    text-align: center;
    font-weight: bold;
    background-color: #fff;
    border: thin solid #ccc;
    border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
}

table#wp-calendar #today {
    display: block;
    font-weight: bold;
    background-color: #ddd;
    border: thin solid #ccc;
    z-index: 1;
}

table#wp-calendar .pad {
    font-weight: bold;
    background-color: #fff9f9;
}

table#wp-calendar th,
table#wp-calendar td {
    vertical-align: middle;
    text-align: center;
    padding: 8px;
}

table#wp-calendar td {
    line-height: 1.8;
    border: thin solid #ccc;
    background-color: #fff;
}

table#wp-calendar th {
    font-style: normal;
    font-weight: bold;
    color: #fff;
    border-left: thin solid #ccc;
    border-right: thin solid #ccc;
    background-color: #333;
}

table#wp-calendar a {
    font-size: 12px;
    color: #00a0dd;
    padding: 0;
    text-decoration: underline;
}

#wp-calendar,
.wp-calendar-nav {
    display: table;
    table-layout: fixed;
    line-height: 2;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1.2rem;
}

#wp-calendar td,
.wp-calendar-nav span {
    display: table-cell;
    border: thin solid #ccc;
}

.wp-calendar-nav span.pad {
    width: 0;
}

.wp-calendar-nav span {
    border-top: 0;
}

#wp-calendar td,
.wp-calendar-nav span {
    display: table-cell;
    border: thin solid #ccc;
}

#wp-calendar th,
#wp-calendar td,
.wp-calendar-nav span {
    line-height: 2;
    vertical-align: middle;
    text-align: center;
    font-size: 12px;
}