/* ==========================================================================
   テーマの基本色
   ========================================================================== */

.entry-content > h2 { border-top-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }
.entry-content > h5 { border-left-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

/* Smooth
   ========================================================================== */

.smooth .global-navi,
.smooth .form-button,
.smooth .global-navi-inner li ul li,
.smooth .global-navi-inner li ul li ul li,
.smooth .button { background-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.smooth .entry-content > h2 { border-top-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

/* Cure
   ========================================================================== */

.cure .global-navi,
.cure .global-navi-inner li ul li,
.cure .global-navi-inner li ul li ul li,
.cure .subheader--small,
.cure .box--large > .box__title,
.cure .box--large > .box__title--small,
.cure .box--medium > .box__title,
.cure .box--medium > .box__title--small,
.cure .box--medium > .box__title span,
.cure .bgcolor--large,
.cure .bgcolor--medium,
.cure .table--large th,
.cure .form-button,
.cure .button { background-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.cure .frame,
.cure .hentry,
.cure .main > .widget,
.cure .entry-title,
.cure .main > .widget .widget-title,
.cure .sub .widget,
.cure .sub .widget-title,
.cure .subheader--medium,
.cure .box--large,
.cure .box--medium,
.cure .box--medium > .box__title,
.cure .box--medium > .box__title--small,
.cure .bgcolor--large { border-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.cure .site-title a,
.cure .sub .widget-title,
.cure .site-description,
.cure .subheader--large,
.cure .order__h1,
.cure .voice .voice__head { color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.cure .box--large { background: [color(2)] }

/* Merry
   ========================================================================== */

.merry .global-navi,
.merry .global-navi-inner li ul li,
.merry .global-navi-inner li ul li ul li,
.merry .entry-title,
.merry a.entry-title:hover,
.merry .main > .widget .widget-title,
.merry .sub .widget-title,
.merry .subheader--small,
.merry .box--large > .box__title,
.merry .box--large > .box__title--small,
.merry .box--medium > .box__title,
.merry .box--medium > .box__title--small,
.merry .box--medium > .box__title span,
.merry .bgcolor--large,
.merry .bgcolor--medium,
.merry .table--large th,
.merry .form-button,
.merry .button { background-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.merry .hentry,
.merry .widget,
.merry .box--large,
.merry .box--medium,
.merry .box--medium > .box__title,
.merry .box--medium > .box__title--small,
.merry .bgcolor--large { border-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.merry .subheader--large,
.merry .subheader--medium,
.merry .order__h1,
.merry .voice .voice__head { color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.merry .box--large { background: [color(2)] }
.merry .subheader--medium {
    background: -webkit-linear-gradient     (left, rgba(255,255,255,0), [color(2)], rgba(255,255,255,0));
    background:         linear-gradient( to right, rgba(255,255,255,0), [color(2)], rgba(255,255,255,0));
}

/* Brisk
   ========================================================================== */

.brisk .global-navi,
.brisk .global-navi-inner li ul li,
.brisk .global-navi-inner li ul li ul li,
.brisk .box--medium > .box__title span,
.brisk .bgcolor--medium,
.brisk .table--large th,
.brisk .form-button { background-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.brisk .sub .widget,
.brisk .subheader--medium,
.brisk .subheader--small .inner,
.brisk .box--large,
.brisk .box--medium > .box__title,
.brisk .box--medium > .box__title--small,
.brisk .bgcolor--medium { border-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.brisk .voice .voice__head { color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

/* Loud
   ========================================================================== */

.loud .global-navi,
.loud .global-navi-inner li ul li,
.loud .global-navi-inner li ul li ul li,
.loud .box--medium > .box__title span,
.loud .bgcolor--medium,
.loud .table--large th,
.loud .form-button { background-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.loud .sub .widget,
.loud .subheader--large,
.loud .subheader--small .inner,
.loud .box--large,
.loud .box--medium > .box__title,
.loud .box--medium > .box__title--small { border-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.loud .order__h1,
.loud .voice .voice__head { color: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.loud .frame,
.loud .hentry,
.loud .main > .widget,
.loud .hentry { box-shadow: 0 0 40px 4px <?php $options = get_option('myd_theme_options'); if (!empty($options[base_color])) { echo esc_html($options[base_color]); } else { echo 'rgb(204,0,0)'; } ?> }
.loud .subheader--small { box-shadow: 0 0 13px 1px <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?> }

.loud .subheader--medium {
    background: <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?>;
    background: -webkit-linear-gradient     (left, transparent, <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?>, <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?>, transparent);
    background:         linear-gradient( to right, transparent, <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?>, <?php $options = get_option('myd_theme_options');echo esc_html($options['base_color']);?>, transparent);
}


/* ==========================================================================
   色
   ========================================================================== */

/* ページ背景色 */
body { background-color: <?php $options = get_option('myd_theme_options');echo esc_html($options['background_color']);?> }

/* ページ背景画像 */
body {
  /* background-image: url( ); */
  background-position: ;
  background-repeat: ;
  background-attachment: ;
  background-size: ;
}

/* リンク */
a { color: <?php $options = get_option('myd_theme_options');echo esc_html($options['link_color']);?> }
a:hover { color: <?php $options = get_option('myd_theme_options');echo esc_html($options['link_color']);?> }

/* サイトタイトル */
.site-title,
.site-title a { color:  }
.site-title a:hover { color:  }
.site-description { color:  }

/* ヘッダーナビ */
.header-navi li a { color:  }
.header-navi li a:hover,
.header-navi li a.active { color:  }

/* グローバルナビ */
.global-navi-inner,
.global-navi-inner-w,
.global-navi-inner li ul li,
.global-navi-inner li ul li ul li { background-color:  }
.global-navi-inner li a { color: ; text-shadow:  }

/* コンテンツエリアの背景色 */
.l-container { background-color: }

/* ページの先頭への三角 url(img/pagetop-blk.png) か url(img/pagetop-wht.png) */
.pagetop a { background-image:  }

/* フッター */
.l-footer address,
.l-footer p { color:  }
.l-footer a { color:  }


/* ==========================================================================
   大きさ
   ========================================================================== */

/* ページ全体の幅 */
.c1  .l-header-inner, .c1  .global-navi, .c1  .global-navi-inner, .c1  .l-container, .c1  .l-footer-inner { max-width: <?php $options = get_option('myd_theme_options');echo esc_html($options['page_width']);?>px }
.c2l .l-header-inner, .c2l .global-navi, .c2l .global-navi-inner, .c2l .l-container, .c2l .l-footer-inner { max-width: <?php $options = get_option('myd_theme_options');echo esc_html($options['page_width']);?>px }
.c2r .l-header-inner, .c2r .global-navi, .c2r .global-navi-inner, .c2r .l-container, .c2r .l-footer-inner { max-width: <?php $options = get_option('myd_theme_options');echo esc_html($options['page_width']);?>px }
.c3  .l-header-inner, .c3  .global-navi, .c3  .global-navi-inner, .c3  .l-container, .c3  .l-footer-inner { max-width: <?php $options = get_option('myd_theme_options');echo esc_html($options['page_width']);?>px }
.c3r .l-header-inner, .c3r .global-navi, .c3r .global-navi-inner, .c3r .l-container, .c3r .l-footer-inner { max-width: <?php $options = get_option('myd_theme_options');echo esc_html($options['page_width']);?>px }

/* メイン・サブの幅 (%) */
.l-main { width:  }
.l-sub  { width:  }

/* c2l */
.c2l .l-main { width:  }
.c2l .l-sub  { width:  }

/* メイン・サブ間の間隔 (px) */
/* c2r */
.c2r .l-main { padding-right:  }
.c2r .l-sub  { padding-left:   }

/* c2l */
.c2l .l-main { padding-left:   }
.c2l .l-sub  { padding-right:  }

/* サイトタイトル */
.site-title { font-size:  }
.site-title { font-weight:  }

/* サイトの説明 */
.site-description { font-size:  }
.site-description { width:  }

/* ヘッダーナビ */
.header-navi li { font-size:  }

/* グローバルナビ */
.global-navi-inner li { font-size:  }

/* コンテンツエリア内側の余白 [N]には同じ数字が入る */
.l-container, .c2l .l-container, .c2r .l-container { padding: [N]px }
*[class*="bgcolor--"], .c2l *[class*="bgcolor--"], .c2r *[class*="bgcolor--"] { margin-left:  -[N]px }
*[class*="bgcolor--"], .c2l *[class*="bgcolor--"], .c2r *[class*="bgcolor--"] { margin-right: -[N]px }

/* ボックス内側の余白 [Nm],[Ns]には同じ数字が入る */
*[class*="box--"] { padding: [Nm]px }
*[class*="box--"] > *[class*="box__title"],
*[class*="box--"] > .box__title--small { margin: -[Nm]px -[Nm]px [Nm]px }

.sub *[class*="box--"] { padding: [Ns]px }
.sub *[class*="box--"] > *[class*="box__title"],
.sub *[class*="box--"] > .box__title--small { margin: -[Ns]px -[Ns]px [Ns]px }

/* 背景色の余白 */
*[class*="bgcolor--"] { padding:  }

/* フッター */
.l-footer address,
.l-footer p { font-size:  }


/* ==========================================================================
   形
   ========================================================================== */

/* コンテンツエリアの角 */
.l-container { border-radius:  }

/* コンテンツエリアの影 */
.l-container { box-shadow:  }


/* ==========================================================================
   Background coler
   ========================================================================== */

/* background--light */

.background--light .header-navi li a { color: #555 }
.background--light .header-navi li a:hover { color: #333 }

.background--light .breadcrumb ol li { color: #888 }
.background--light .breadcrumb ol li a { color: #666 }
.background--light .breadcrumb ol li a:hover { color: #333 }
.background--light .breadcrumb ol li a:after { color: #ccc }

.background--light .page-title { color: #333 }

.background--light .l-footer address,
.background--light .l-footer p,
.background--light .l-footer small,
.background--light .l-footer .footer-navi li { color: #666 }
.background--light .l-footer a { color: #555 }
.background--light .l-footer a:hover { color: #333 }

/* background--dark */

.background--dark .header-navi li a { color: #eee }
.background--dark .header-navi li a:hover { color: #fff }

.background--dark .breadcrumb ol li { color: #eee }
.background--dark .breadcrumb ol li a { color: #eee }
.background--dark .breadcrumb ol li a:hover { color: #fff }
.background--dark .breadcrumb ol li a:after { color: #999 }

.background--dark .page-title { color: #eee }

.background--dark .l-footer address,
.background--dark .l-footer p,
.background--dark .l-footer small,
.background--dark .l-footer .footer-navi li { color: #fff }
.background--dark .l-footer a { color: #eee }
.background--dark .l-footer a:hover { color: #fff }
