@charset "utf-8";

.md_pcOnly { display: block; }
.md_spOnly { display: none; }

/*============================
.clearFix
============================*/
.clearFix:after { clear: both; display: block; content: ""; height: 0; line-height: 0; }

/*============================
.md_titleCenter
============================*/
.md_titleCenter { text-align: center; }
.md_titleCenter .titleBlock {}
.md_titleCenter .titleBlock .jpMini { color: #fff; font-weight: bold; }
.md_titleCenter .titleBlock .enBig { display: block; color: #fff; font-family: 'Roboto', sans-serif; font-size: 2.75em; font-weight: bold; letter-spacing: 4px; margin-top: 10px; text-transform: uppercase; }
.md_titleCenter .titleBlock .enBig span { display: inline-block; margin-right: 15px; }
.md_titleCenter .titleBlock .enBig span:first-letter { color: #dca500; }
.md_titleCenter .copy { color: #fff; margin-top: 20px; }

/*============================
#md_titleLeft
============================*/
.md_titleLeft { text-align: left; }
.md_titleLeft .titleBlock {}
.md_titleLeft .titleBlock .jpMini { color: #fff; font-weight: bold; }
.md_titleLeft .titleBlock .enBig { display: block; color: #fff; font-family: 'Roboto', sans-serif; font-size: 2.75em; font-weight: bold; letter-spacing: 4px; margin-top: 10px; text-transform: uppercase; }
.md_titleLeft .titleBlock .enBig span { display: inline-block; margin-right: 15px; }
.md_titleLeft .titleBlock .enBig span:first-letter { color: #dca500; }
.md_titleLeft .copy { color: #fff; line-height: 1.5; margin-top: 20px; }

/*============================
#topPanelArea
============================*/
.md_titleSide {}
.md_titleSide .title { color: #fff; float: left; font-size: 2em; font-weight: bold; letter-spacing: 4px; margin-top: 14px; position: relative; width: 60%; }
.md_titleSide .copy { color: #fff; float: right; font-size: 1.125em; line-height: 1.5; position: relative; width: 40%; }

/*============================
.button.ghostButton
============================*/
.ghostButton { margin: 40px auto 0; text-align: center; position: relative; width: 220px; }
.ghostButton .button { border: solid #fff 2px; color: #fff; display: block; font-size: 0.875em; padding: 16px 0 14px; position: relative; }
/* IE表示用のCSS　*/
_:-ms-input-placeholder, :root .ghostButton .button { padding: 18px 0 12px; }
.ghostButton .button:before { content: "\f105"; font-family: FontAwesome; position: absolute; right: 20px; }
/* IE表示用のCSS　*/
_:-ms-input-placeholder, :root .ghostButton .button:before { top: 15px; }
.ghostButton .button:hover { background-color: #fff; color: #222; }

/*============================
.button.animation
============================*/
.md_30th_button {color:#454545;background:transparent;border-width:2px;border-style: solid;border-color: #454545;position:relative;display:inline-block;padding:0.5em 0.5em 0.4em;transition:all 0.3s ease-in-out;text-align:center;font-weight:bold;}
.md_30th_button:before, .md_30th_button:after {content:'';display:block;position:absolute;border-color:#454545;box-sizing:border-box;border-style:solid;width:1em;height:1em;transition:all 0.3s ease-in-out}
.md_30th_button:before {top:-6px;left:-6px;border-width:2px 0 0 2px;z-index:5;}
.md_30th_button:after {bottom:-6px;right:-6px;border-width:0 2px 2px 0;}
.md_30th_button:hover:before, .md_30th_button:hover:after {width:calc(100% + 12px);
  height:calc(100% + 12px);border-color:#fff}
.md_30th_button:hover {color:#fff;background-color:#dca500;border-color:#dca500}

/*============================
.md_paging
============================*/
.md_paging { margin-top: 60px; text-align: center; }
.md_paging ul {}
.md_paging ul li { display: inline-block; width: 40px; height: 40px; line-height: 40px; margin-left: -1px; border: solid 1px #929292; }
.md_paging ul li a { display:inline-block; width: 40px; height: 40px; line-height: 40px; color: #000; }
.md_paging ul li.active { border: solid 1px #dca500; }
.md_paging ul li.active a { background: #dca500; color: #fff; }