/*
Theme Name: i-systems.jp
Theme URI: http://i-systems.jp/
Description: i-systems corporate is architecture company in Sapporo.
Author: webha
Author URI: http://webha.biz/
Version: 1.0
*/

/* CSS Document */
@charset "UTF-8";

@import "css/html5reset-1.6.1.css";
@import "css/fontello.css";
@import "css/font-awesome.css";
@import "css/noto-sans.css";

/* ---------------------------------
 basic setting
--------------------------------- */
html { font-size: 0.95em; font-family: "Noto Sans Japanese", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-weight: 300; height: 100%; margin: 0; padding: 0; }
body {  -webkit-animation-duration: 1.2s; -ms-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-name: fadeIn; animation-name: fadeIn; visibility: visible !important; -webkit-text-size-adjust: 100%; background: url(images/bk_grey.png) repeat; color: #333; height: 100%; line-height: 160%; }

/* reset */
a { color: #0033cc; text-decoration: none; }
a:hover { -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
a:hover img { filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
ul { margin-bottom: 24px; }
ul,li { list-style-type: none; }
ol { margin-bottom: 24px; }
ol,li { list-style-type: none; }
ol.decimal li { list-style-type: decimal; margin-left: 1.4em; }
img { height: auto; max-width: 100%; vertical-align: middle; }
i { margin-right: 6px; }
small { font-size: 0.9em; }
hr.end { border: none; margin-bottom: 24px; }
hr.border-dot { border: none; border-top: 1px dotted #ccc; }
.clear { clear: both; }

/* responsive-web-design */
@viewport { width: extend-to-zoom 100%; zoom: 1.0; }

/* common */
.wrapper { margin: 0 auto; width: 90%; }
#home { padding: 36px 0; }
.container { padding: 0 0 36px; }

@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }
@-webkit-keyframes fadeIn-x { 0% { opacity: 0; -webkit-transform: translateX(-10px); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@keyframes fadeIn-x { 0% { opacity: 0; -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(0px); } 100% { opacity: 1; -webkit-transform: translateY(0); } }
@-webkit-keyframes fadeIn-y { 0% { opacity: 0; -webkit-transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes fadeIn-y { 0% { opacity: 0; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(0px); } 100% { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes fadeInDown-x { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@keyframes fadeInDown-x { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }
@-webkit-keyframes fadeInDown-y { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes fadeInDown-y { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } }

@media screen and (min-width: 480px) {
  /* 480px〜767pxのcssを記述 */
}
@media screen and (min-width: 768px) {
  /* 768px〜1023pxのcssを記述 */
}
@media screen and (min-width: 1024px) {
  /* 1024px以上のcssを記述 */
  .wrapper { width: 1024px; }
}


/* ---------------------------------
 header
--------------------------------- */
header { -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1.2s; -ms-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-name: fadeIn-y; animation-name: fadeIn-y; visibility: visible !important; padding: 8px 0 0; }
.header-logo { text-align: center; }
.header-logo img { display: block; margin: 0 auto; max-height: 42px; width: auto; }
.header-logo .header-description { font-size: 12px; }
.header-contact { margin: 0.5em 0; text-align: center; }
.header-contact .contact-des { font-size: 12px; }
.header-contact .contact-phone { font-size: 30px; }
.header-contact .contact-time { font-size: 12px; }
/* navigation */
.menu-toggle { background: #ffc0cb; color: #fff; display: block; font-size: 16px; font-weight: lighter; letter-spacing: 2px; margin: 0; padding: 8px 0; text-align: center; }
.menu-toggle:hover { -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
.menu-toggle i { color: #fff; font-size: 18px; margin: 0 6px 0 0; }
.global-nav { -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1.2s; -ms-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-name: fadeIn-y; animation-name: fadeIn-y; visibility: visible !important; display: none; z-index: 3; }
.global-nav ul { margin-bottom: 0; }
.global-nav ul:before, .global-nav ul:after { clear: both; content: ""; display: table; }
.global-nav ul li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; width: 100%; }
.global-nav ul li a { border-bottom: 1px dotted #ffc0cb; color: #333; display: block; letter-spacing: 1px; padding: 6px 8px; text-align: left; }
.global-nav ul li a:hover { color: #ffc0cb; }
.global-nav ul li a:before { content: "\f0da"; font-family: 'FontAwesome'; margin-right: 6px; }
.global-nav ul li.nav1 a:before, .global-nav ul li.nav1 a:hover { color: #f0c26c; }
.global-nav ul li.nav2 a:before, .global-nav ul li.nav2 a:hover { color: #dcf06c; }
.global-nav ul li.nav3 a:before, .global-nav ul li.nav3 a:hover { color: #6cdcf0; }
.global-nav ul li.nav4 a:before, .global-nav ul li.nav4 a:hover { color: #6c9af0; }
.global-nav ul li.nav5 a:before, .global-nav ul li.nav5 a:hover { color: #f06cdc; }
.global-nav ul li.nav6 a:before, .global-nav ul li.nav6 a:hover { color: #ffc0cb; }
.global-nav ul li a span { font-size: 8px; display: inline-block; float: right; letter-spacing: 0; }
@media screen and (min-width: 480px) {
  /* 480px〜767pxのcssを記述 */
  .header-logo { float: left; text-align: left; }
  .header-logo img { margin: 0 auto 0 0; }
  .header-contact { float: right; margin: 0; text-align: right; }
}
@media screen and (min-width: 768px) {
  /* 768px〜1023pxのcssを記述 */
  .menu-toggle { display: none; }
  .global-nav { display: block; }
  .global-nav ul li { float: left; width: 16.6%; }
  .global-nav ul li a { border-top: none; display: block; font-size: 16px; font-weight: 300; margin: 0; padding: 8px 0; text-align: center; }
  .global-nav ul li a:hover { }
  .global-nav ul li a:before { content: none; margin-right: 0; }
  .global-nav ul li:last-child a { border-bottom: none; }
  .global-nav ul li.nav1 a { border-bottom: 4px solid #f0c26c; }
  .global-nav ul li.nav2 a { border-bottom: 4px solid #dcf06c; }
  .global-nav ul li.nav3 a { border-bottom: 4px solid #6cdcf0; }
  .global-nav ul li.nav4 a { border-bottom: 4px solid #6c9af0; }
  .global-nav ul li.nav5 a { border-bottom: 4px solid #f06cdc; }
  .global-nav ul li.nav6 a { border-bottom: 4px solid #ffc0cb; }
  .global-nav ul li a span { display: block; float: none; line-height: 120%; }
}
@media screen and (min-width: 1024px) {
  /* 1024px以上のcssを記述 */
}


/* ---------------------------------
 footer
--------------------------------- */
footer { background: #efefe9; color: #666; padding: 24px 0; position: relative; }
footer .wrapper { position: relative; }
footer .footer-company { text-align: center; }
footer .footer-company img { margin-bottom: 4px; max-height: 36px; width: auto; }
footer .footer-nav ul { margin: 24px 0; }
footer .footer-nav ul li { display: inline-block; margin: 0 1em; }
footer .footer-nav ul li a { color: #666; }
footer .footer-nav ul li a:before { content: "\f0da"; font-family: 'FontAwesome'; margin-right: 6px; }
footer .footer-nav ul li a:hover { color: #ffc0cb; text-decoration: underline; }
footer .copyright { font-size: 0.9em; text-align: center; }
footer .copyright a { color: #666; }
footer .copyright a:hover { text-decoration: underline; }
/* page-top */
.return-top { bottom: 28px; margin: 0; position: fixed; right: 2%; z-index: 999; }
.return-top a { background: #fff; border: 2px solid #ffc0cb; border-radius: 50%; color: #ffc0cb; display: block; height: 54px; position: relative; width: 54px; }
.return-top a:hover { background: #ffc0cb; color: #fff; }
.return-top i { font-size: 48px; left: 11px; position: absolute; top: 0px; }
@media screen and (min-width: 480px) {
  /* 480px〜767pxのcssを記述 */
}
@media screen and (min-width: 768px) {
  /* 768px〜1023pxのcssを記述 */
  footer .footer-company { float: left; text-align: left; }
  footer .footer-nav { float: right; text-align: center; }
  footer .footer-nav ul { margin: 0; }
  footer .footer-nav ul li { display: inline-block; margin: 0 0 0 1em; }
  footer .footer-nav ul li:first-child { display: inline-block; margin: 0 0 0 0; }
  footer .footer-nav ul li a:before { content: none; margin-right: 0; }
  footer .copyright { bottom: 0; position: absolute; right: 0; }
}
@media screen and (min-width: 1024px) {
  /* 1024px以上のcssを記述 */
}


/* ---------------------------------
 content
--------------------------------- */
.content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 48px; }
.content h2 { border-bottom: 1px solid #ccc; font-size: 130%; font-weight: normal; line-height: 140%; margin-bottom: 8px; padding-bottom: 2px; }
.content h3 { border-left: 4px solid #ccc; font-size: 120%; font-weight: normal; line-height: 140%; margin-bottom: 8px; padding-left: 4px; }
.content p { margin-bottom: 24px; }
.content img { height: auto; margin-bottom: 24px; width: 100%; }

/* page-title */
.page-title { -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1.2s; -ms-animation-duration: 1.2s; animation-duration: 1.2s; -webkit-animation-name: fadeIn-x; animation-name: fadeIn-x; visibility: visible !important; border: 1px double #ccc; margin-bottom: 12px; padding: 1px; }
.page-title h1 { border: 1px double #ccc; font-size: 130%; font-weight: normal; line-height: 140%; padding: 6px 8px; }

/* page-image */
.page-image .wrapper img { height: auto; width: 100%; }
.page-image .wrapper img { -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1.6s; -ms-animation-duration: 1.6s; animation-duration: 1.6s; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; visibility: visible !important; }

/* breadcrumb */
.breadcrumb { font-size: 12px; padding: 6px 0; }
.breadcrumb li { color: #666; display: inline-block; margin-right: 1em; }
.breadcrumb li:after { margin-left: 1em; content: '/'; }
.breadcrumb li:last-child:after { margin: 0; content: ''; }
.breadcrumb li a { color: #666; }
.breadcrumb li a:hover { color: #ffc0cb; }

/* search form */
#searchform input { background: #fff; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 0.95em; height: 32px; max-width: 400px; outline: none; padding: 0.5em; vertical-align: top; width: 88%; }
#searchform button { background: #6f6f6f; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 0.95em; height: 32px; vertical-align: top; width: 12%; }
#searchform button i { color: #fff; }

/* button */
.contact-btn { color: #fff; font-size: 0.9em; max-width: 100%; padding: 10px 20px; }
.btn-solar { background: #f0c26c; }
.btn-solar:hover { background: #f3ce89; }
.btn-energy { background: #dcf06c; }
.btn-energy:hover { background: #b0c056; }
.btn-electrical { background: #6cdcf0; }
.btn-electrical:hover { background: #56b0c0; }

@media screen and (min-width: 480px) {
  /* 480px〜767pxのcssを記述 */
  .contact-btn { font-size: 1em; padding: 10px 40px; }
}
@media screen and (min-width: 768px) {
  /* 768px〜1023pxのcssを記述 */
  .content { float: right; margin: 0; width: 64%; }
}
@media screen and (min-width: 1024px) {
  /* 1024px以上のcssを記述 */
  .content { width: 676px; }
}

/* ---------------------------------
 home
--------------------------------- */
.top-image { background: #efefe9; padding: 36px 0; }
.top-image img { -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1.6s; -ms-animation-duration: 1.6s; animation-duration: 1.6s; -webkit-animation-name: fadeInDown-x; animation-name: fadeInDown-x; visibility: visible !important; }
.top-service { margin-bottom: 24px; }
.top-service article { float: left; margin-right: 2%; width: 32%; }
.top-service article:last-child { margin-right: 0; }
.top-service article img { margin: 0; }
.content-works { height: 140px; margin-bottom: 24px; }
.content-works ul li { list-style: none; margin: 0; padding: 0; position: relative; }
.content-works ul li img { height: 140px; margin: 0; width: 186px; }
.content-works ul li p { background: rgba(0,0,0,0.8); bottom: 0; color: #fff; font-size: 14px; margin: 0; padding: 8px 0; position: absolute; text-align: center; width: 100%; }
.content-results { background: #fff; margin: 0 auto 24px; width: 100%; }
.content-results th, .content-results td { border: 1px solid #ccc; font-size: 14px; padding: 6px 8px; }
.content-results th { background: #efefe9; }
.content-results td:last-child { text-align: right; }

@media screen and (min-width: 480px) {
  /* 480px〜767pxのcssを記述 */
}
@media screen and (min-width: 768px) {
  /* 768px〜1023pxのcssを記述 */
}
@media screen and (min-width: 1024px) {
  /* 1024px以上のcssを記述 */
}

/* ---------------------------------
 Fixed-page
--------------------------------- */
/* about */
.img_l { float: left; margin: 0 12px 12px 0; width: 32% !important; }
.img_r { float: right; margin: 0 0 12px 12px; width: 32% !important; }

/* solar-power */
.solar-category { background: -webkit-gradient(linear, left top, right bottom, from(#f0c26c), color-stop(0.25, #f0c26c), color-stop(0.25, white), color-stop(0.5, white), color-stop(0.5, #f0c26c), color-stop(0.75, #f0c26c), color-stop(0.75, white), to(white)); background: -moz-linear-gradient(-45deg, #f0c26c 25%, white 25%, white 50%, #f0c26c 50%, #f0c26c 75%, white 75%, white); background: linear-gradient(-45deg, #f0c26c 25%, white 25%, white 50%, #f0c26c 50%, #f0c26c 75%, white 75%, white); background-size: 4px 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 auto 24px; padding: 8px; width: 100%; }
.solar-category a { background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #333; display: block; margin-bottom: 8px; padding: 6px 0; text-align: center; }
.solar-category a:last-child { margin-bottom: 0; }
.solar-category a:hover { color: #f0c26c; }
.solar-pic { margin: 0 auto 24px; }
.solar-pic div { float: left; margin-right: 2%; width: 49%; }
.solar-pic div:nth-child(2n) { margin-right: 0; }
.solar-pic div img { height: auto; margin: 0; width: 100%; }
.solar-pic div p { font-size: 12px; margin: 0; }
.solar-content img { float: right; margin: 0 0 2% 2%; width: 49%; }

/* energy-saving */
.energy-intro { margin: 0 auto 24px; }
.energy-intro img { margin: 0 auto 12px; }
.energy-intro p { margin: 0; }
.energy-content { margin: 0 auto 24px; }
.energy-content article { background: #efefe9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; margin: 0 2% 2% 0; padding: 8px 8px 0 8px; width: 49%; }
.energy-content article:nth-child(2n) { margin: 0 0 2% 0; }
.energy-content article img { margin: 0; }
.energy-content article p { font-size: 14px; margin: 0; text-align: center; }

/* electrical construction */
.electrical-content { margin: 0 auto 24px; }
.electrical-content article { background: #efefe9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; margin: 0 2% 2% 0; padding: 8px 8px 0 8px; width: 49%; }
.electrical-content article:nth-child(2n) { margin: 0 0 2% 0; }
.electrical-content article img { margin: 0; }
.electrical-content article p { font-size: 14px; margin: 0; text-align: center; }
.electrical-table { background: #fff; margin: 0 auto 24px; width: 100%; }
.electrical-table th, .electrical-table td { border: 1px solid #ccc; font-size: 14px; padding: 6px 8px; }
.electrical-table th { background: #efefe9; }
.electrical-table td:last-child { text-align: right; }

/* company */
.company-intro { margin: 0 auto 24px; width: 100%; }
.company-intro th, .company-intro td { border-top: 1px dotted #ccc; display: block; padding: 6px 8px; }
.company-intro tr:last-child th, .company-intro tr:last-child td { border-bottom: 1px dotted #ccc; }
.company-intro th { background: #efefe9; }
#gmap1 { height: 0; overflow: hidden; padding-top: 0px; padding-bottom: 60%; position: relative; width: 100%; }
#gmap1 iframe, #gmap1 object, #gmap1 embed { height: 100%; left: 0; position: absolute; top: 24px; width: 100%; }
#gmap2 { height: 0; overflow: hidden; padding-top: 0px; padding-bottom: 60%; position: relative; width: 100%; }
#gmap2 iframe, #gmap2 object, #gmap2 embed { height: 100%; left: 0; position: absolute; top: 24px; width: 100%; }

@media screen and (min-width: 480px) {
  /* 480px〜767pxのcssを記述 */
  /* solar-power */
  .solar-content img { width: 42%; }
  .solar-list li { float: left; margin: 0 2% 0 0; width: 49%; }
  .solar-list li:nth-child(2n) { margin: 0 0 0 0; }
  /* energy saving */
  .energy-intro img { float: right; margin: 0 0 0 2%; width: 48%; }
    /* electrical construction */
  .electrical-content article { margin: 0 2% 2% 0; width: 32%; }
  .electrical-content article:nth-child(2n) { margin: 0 2% 2% 0; }
  .electrical-content article:nth-child(3n) { margin: 0 0 2% 0; }
  /* company */
  .company-intro th, .company-intro td { display: table-cell; }
  .company-intro th { width: 24%; }
  .company-list div { float: left; margin: 0 2% 0 0; width: 49%; }
  .company-list div:last-child { margin: 0 0 0 0; }
  #gmap1 { float: left; padding-bottom: 40%; width: 48%; }
  #gmap2 { float: right; padding-bottom: 40%; width: 48%; }
}
@media screen and (min-width: 768px) {
  /* 768px〜1023pxのcssを記述 */
}
@media screen and (min-width: 1024px) {
  /* 1024px以上のcssを記述 */
  /* solar-power */
  .solar-category a { float: left; margin-right: 2%; margin-bottom: 0; padding: 8px 0; width: 32%; }
  .solar-category a:last-child { margin-right: 0; margin-bottom: 0; }
  .solar-pic div { width: 32%; }
  .solar-pic div:nth-child(2n) { margin-right: 2%; }
  .solar-pic div:last-child { margin-right: 0; }
  .solar-content img { width: 32%; }
  .solar-list li { width: 32%; }
  .solar-list li:nth-child(2n) { margin: 0 2% 0 0; }
  .solar-list li:nth-child(3n) { margin: 0 0 0 0; }
  /* energy saving */
  .energy-intro img { width: 32%; }
  .energy-content article { width: 32%; }
  .energy-content article:nth-child(2n) { margin: 0 2% 2% 0; }
  .energy-content article:nth-child(3n) { margin: 0 0 2% 0; }
}

/* ---------------------------------
 contact
--------------------------------- */
.mw_wp_form table { margin: 0 auto 24px; width: 100%; }
.mw_wp_form table th, .mw_wp_form table td { border-bottom: 1px dotted #ccc; display: block; padding: 8px 4px; }
.mw_wp_form table th { background: #f1f1f1; text-align: left; }
.mw_wp_form table tr:first-child th { border-top: 1px dotted #ccc; }
.mw_wp_form table th span { color: #dc121a; display: inline-block; font-size: 12px; font-weight: lighter; margin: 0; padding: 0 4px; vertical-align: top; }
.mw_wp_form table td.lh24 { line-height: 240%; }
.mw_wp_form table td input, .mw_wp_form table td textarea { border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #333; font: inherit; font-size: 1em; line-height: 100%; padding: 6px; width: 100%; }
.mw_wp_form table td span.mwform-zip-field input { width: 18%; }
.mw_wp_form table td span.mwform-tel-field input { width: 24%; }
.mw_wp_form table td.w15 input { width: 15%; }
.mw_wp_form table td.w60 input { width: 60%; }
.mw_wp_form table td.w95 input,.mw_wp_form table td.w95 textarea { width: 100%; }
.mw_wp_form table td.w95 input[type="radio"] { width: auto; }
.mw_wp_form table td.address input:first-child { margin-bottom: 12px; }
.mw_wp_form table td aside { display: inline; text-align: right; }

/* button */
.mwform_button { text-align: center; }
.mw_wp_form input.submit-btn { background: #d82bb8; border: 2px solid #d82bb8; color: #fff; display: block; font-size: 1em; margin: 0 auto 24px; padding: 10px 40px; }
.mw_wp_form input.submit-btn:hover { background: #fff; color: #d82bb8; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
.mw_wp_form input.back-btn { background: #ccc; border: 2px solid #ccc; color: #fff; display: inline-block; font-size: 1em; margin: 0 auto; padding: 10px 40px; }
.mw_wp_form input.back-btn:hover { background: #fff; color: #ccc; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }

@media screen and (min-width: 480px) {
  /* 480px〜767pxのcssを記述 */
}
@media screen and (min-width: 768px) {
  /* 768px〜1023pxのcssを記述 */
  .mw_wp_form table th, .mw_wp_form table td { display: table-cell; padding: 6px 8px; }
  .mw_wp_form table tr:first-child th { border-top: none; }
  .mw_wp_form table tr:last-child th, .mw_wp_form table tr:last-child td { border-bottom: none; }
  .mw_wp_form table th { background: none; vertical-align: middle; width: 32%; }
  .mw_wp_form input.submit-btn { display: inline-block; margin: 0 0 0 1em; }
}
@media screen and (min-width: 1024px) {
  /* 1024px以上のcssを記述 */
}

/* ---------------------------------
 single
--------------------------------- */

/* ---------------------------------
 side
--------------------------------- */
.side { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.side h3 { border-left: 4px solid #ccc; font-size: 120%; font-weight: normal; margin-bottom: 8px; padding-left: 4px; }
.side p { margin-bottom: 24px; }
.side-navi { margin-bottom: 24px; }
.side-navi dd { background: url(images/bk_black.png) repeat; border-bottom: 1px dotted #ccc; padding: 6px 8px; }
.side-navi dd:last-child { border-bottom: none; }
.side-navi dd:hover { background: url(images/bk_beige.png) repeat; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
.side-navi dd.s-nav1 { border-left: 4px solid #f0c26c; }
.side-navi dd.s-nav2 { border-left: 4px solid #dcf06c; }
.side-navi dd.s-nav3 { border-left: 4px solid #6cdcf0; }
.side-navi dd.s-nav4 { border-left: 4px solid #6c9af0; }
.side-navi dd.s-nav5 { border-left: 4px solid #f06cdc; }
.side-navi dd.s-nav6 { border-left: 4px solid #ffc0cb; }
.side-navi dd img { border-radius: 50%; display: inline-block; height: 48px; margin-right: 8px; vertical-align: top; width: 48px; }
.side-navi dd a { color: #f1f1f1; display: block; }
.side-navi dd a:hover { color: #333; }
.side-navi dd aside { display: inline-block; line-height: 140%; margin-top: 4px; }
.side-navi dd aside span { display: block; font-size: 8px; }
.side-address { background: #fff; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 24px; padding: 1em; }
.side-area { background: #fff; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 24px; padding: 1em; }
/* widget */
.side .widget ul { margin-bottom: 36px; }
.side .widget ul li { clear: both; }
.side .widget ul li a { border-bottom: 1px dotted #ccc; color: #333; display: block; padding: 6px 4px; }
.side .widget ul li a:after { content: "\f105"; float: right; font-family: "FontAwesome"; font-size: 90%; margin: 0 6px; }
.side .widget ul li a:hover { background: #f1f1f1; color: #00788f; }
/* widgettitle */
.side .widgettitle { border-bottom: 1px solid #00788f; font-size: 110%; font-weight: normal; margin-bottom: 12px; padding-bottom: 3px; }
.side .widgettitle:before { color: #00788f; font-family: "FontAwesome"; font-size: 90%; margin: 2px 6px; }
.side #recent-posts-2 .widgettitle:before { content: "\f040"; }
.side #categories-2 .widgettitle:before { content: "\f02c"; }
.side #archives-2 .widgettitle:before { content: "\f073"; }

@media screen and (min-width: 480px) {
  /* 480px〜767pxのcssを記述 */
}
@media screen and (min-width: 768px) {
  /* 768px〜1023pxのcssを記述 */
  .side { float: left; width: 32%; }
}
@media screen and (min-width: 1024px) {
  /* 1024px以上のcssを記述 */
  .side { width: 300px; }
}

/* ---------------------------------
 option
--------------------------------- */
.red { color: #dc121a; }
.left { float: left; }
.right { float: right; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.valign-top { vertical-align: top !important; }

/* clearfix */
.clearfix:before,
.clearfix:after { content: " ";display: table; }
.clearfix:after { clear: both;}
.clearfix { *zoom: 1;}

/* ---------------------------------
margin setting
--------------------------------- */
.m0 { margin: 0 !important; }
.mt0 { margin-top: 0 !important; }
.mr0 { margin-right: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.ml0 { margin-left: 0 !important; }

.m5 { margin: 5px !important; }
.mt5 { margin-top: 5px !important; }
.mr5 { margin-right: 5px !important; }
.mb5 { margin-bottom: 5px !important; }
.ml5 { margin-left: 5px !important; }

.m10 { margin: 10px !important; }
.mt10 { margin-top: 10px !important; }
.mr10 { margin-right: 10px !important; }
.mb10 { margin-bottom: 10px !important; }
.ml10 { margin-left: 10px !important; }

.m15 { margin: 15px !important; }
.mt15 { margin-top: 15px !important; }
.mr15 { margin-right: 15px !important; }
.mb15 { margin-bottom: 15px !important; }
.ml15 { margin-left: 15px !important; }

.m20 { margin: 20px !important; }
.mt20 { margin-top: 20px !important; }
.mr20 { margin-right: 20px !important; }
.mb20 { margin-bottom: 20px !important; }
.ml20 { margin-left: 20px !important; }

.m25 { margin: 25px !important; }
.mt25 { margin-top: 25px !important; }
.mr25 { margin-right: 25px !important; }
.mb25 { margin-bottom: 25px !important; }
.ml25 { margin-left: 25px !important; }

.m30 { margin: 30px !important; }
.mt30 { margin-top: 30px !important; }
.mr30 { margin-right: 30px !important; }
.mb30 { margin-bottom: 30px !important; }
.ml30 { margin-left: 30px !important; }

.m35 { margin: 35px !important; }
.mt35 { margin-top: 35px !important; }
.mr35 { margin-right: 35px !important; }
.mb35 { margin-bottom: 35px !important; }
.ml35 { margin-left: 35px !important; }

.m40 { margin: 40px !important; }
.mt40 { margin-top: 40px !important; }
.mr40 { margin-right: 40px !important; }
.mb40 { margin-bottom: 40px !important; }
.ml40 { margin-left: 40px !important; }

.m45 { margin: 45px !important; }
.mt45 { margin-top: 45px !important; }
.mr45 { margin-right: 45px !important; }
.mb45 { margin-bottom: 45px !important; }
.ml45 { margin-left: 45px !important; }

.m50 { margin: 50px !important; }
.mt50 { margin-top: 50px !important; }
.mr50 { margin-right: 50px !important; }
.mb50 { margin-bottom: 50px !important; }
.ml50 { margin-left: 50px !important; }

.m55 { margin: 55px !important; }
.mt55 { margin-top: 55px !important; }
.mr55 { margin-right: 55px !important; }
.mb55 { margin-bottom: 55px !important; }

.ml55 { margin-left: 55px !important; }
.m60 { margin: 60px !important; }
.mt60 { margin-top: 60px !important; }
.mr60 { margin-right: 60px !important; }
.mb60 { margin-bottom: 60px !important; }
.ml60 { margin-left: 60px !important; }

.m65 { margin: 65px !important; }
.mt65 { margin-top: 65px !important; }
.mr65 { margin-right: 65px !important; }
.mb65 { margin-bottom: 65px !important; }
.ml65 { margin-left: 65px !important; }

.m70 { margin: 70px !important; }
.mr70 { margin-right: 70px !important; }
.mb70 { margin-bottom: 70px !important; }
.ml70 { margin-left: 70px !important; }

.m75 { margin: 75px !important; }
.mt75 { margin-top: 75px !important; }
.mr75 { margin-right: 75px !important; }
.mb75 { margin-bottom: 75px !important; }
.ml75 { margin-left: 75px !important; }

.m80 { margin: 80px !important; }
.mt80 { margin-top: 80px !important; }
.mr80 { margin-right: 80px !important; }
.mb80 { margin-bottom: 80px !important; }
.ml80 { margin-left: 80px !important; }

.mauto { margin: 0 auto !important; }
.mb12 { margin-bottom: 12px !important; }
.mb24 { margin-bottom: 24px !important; }
.mb36 { margin-bottom: 36px !important; }
/* ---------------------------------
padding setting
*--------------------------------- */
.p0 { padding: 0 !important; }
.pt0 { padding-top: 0 !important; }
.pr0 { padding-right: 0 !important; }
.pb0 { padding-bottom: 0 !important; }
.pl0 { padding-left: 0 !important; }

.p5 { padding: 5px !important; }
.pt5 { padding-top: 5px !important; }
.pr5 { padding-right: 5px !important; }
.pb5 { padding-bottom: 5px !important; }
.pl5 { padding-left: 5px !important; }

.p10 { padding: 10px !important; }
.pt10 { padding-top: 10px !important; }
.pr10 { padding-right: 10px !important; }
.pb10 { padding-bottom: 10px !important; }
.pl10 { padding-left: 10px !important; }