@charset "utf-8";

/*============================
md-layout
============================*/
.md-area { min-width: 1200px; }
.md-pad { width: 1200px; padding: 0 50px; margin: 0 auto; box-sizing: border-box; }
.md-inner { padding: 0 40px; }
.md-sp-only { display: none; }
.md-mt0 { margin-top: 0!important; }

/*============================
utility
============================*/
.u-mb-xsmall { margin-bottom: 10px; }
.u-mb-small { margin-bottom: 20px; }
.u-mb-middle { margin-bottom: 40px; }
.u-mb-large { margin-bottom: 60px; }
.u-mb-xlarge { margin-bottom: 80px; }

.u-fl-none { float: none!important; }

/*============================
md-font
============================*/
.md-f-en { font-family: 'Roboto', sans-serif; font-weight: 700; }
.md-f-sub { font-family: 'Yellowtail', cursive; }
.md-c-red { color: #a01d48; }
.md-f-it { font-style: italic; }
.md-bold { font-weight: bold; }

/*============================
md-text
============================*/
.md-catch { font-size: 1.4rem; font-weight: bold; line-height: 1.5; }

/*============================
md-top-titleBox
============================*/
.md-top-titleBox { display: inline-block; }
.md-top-titleBox .subTitle { position: relative; padding-left: 25px; text-align: left; }
.md-top-titleBox .subTitle::before { position: absolute; top: 3px; left: 0; content: ""; background: url("../../imageFile/global/subTitle-deco.png")no-repeat center; background-size: contain; width: 26px; height: 23px; }
.md-top-titleBox .subTitle .md-f-sub { font-size: 2rem; }
.md-top-titleBox .subTitle .sub-jp { display: inline; position: relative; padding-left: 35px; font-weight: bold; }
.md-top-titleBox .subTitle .sub-jp::before { position: absolute; top: 8px; left: 5px; content: ""; background: #222; width: 18px; height: 1px; }
.md-top-titleBox .mainTitle { font-size: 3.6rem; letter-spacing: .05em; font-style: italic; }
.md-top-titleBox .mainTitle span {}

/*============================
md-subPageMain
============================*/
.md-subPageMain { height: 210px; }
.md-subPageMain .titleBox { height: 210px; box-sizing: border-box; padding-top: 75px; padding-left: 100px; background: url("../../imageFile/global/subPage-panel-deco.png")no-repeat left; }
.md-subPageMain .titleBox .title.md-f-en { color: #fff; font-size: 3rem; font-style: italic; letter-spacing: .05em; }
.md-subPageMain .titleBox .subTitle { margin-top: 10px; font-size: 1.2rem; color: #fff; font-weight: bold; }

/*============================
md-subPage-titleBox
============================*/
.md-subPage-titleBox { padding-bottom: 12px; border-bottom: 1px solid #a01d48; }
.md-subPage-titleBox .subtitle { position: relative; padding-left: 18px; font-family: 'Yellowtail', cursive; color: #a01d48; font-size: 1.4rem; }
.md-subPage-titleBox .subtitle::before { position: absolute; content: ""; top: 0; left: 0; width: 20px; height: 20px; background: url("../../imageFile/global/title-ico-red.png")no-repeat center; background-size: contain; }
.md-subPage-titleBox .mainTitle { padding-top: 10px; font-size: 2rem; font-weight: bold; }

/*============================
md-subPage-miniTitleBox
============================*/
.md-subPage-miniTitleBox { position: relative; font-size: 1.4rem; font-weight: bold; padding-left: 15px; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px dotted #dedede; }
.md-subPage-miniTitleBox::before { position: absolute; content: ""; top: 0; left: 0; width: 5px; height: 24px; background: #a01d48; }

/*============================
md-btn
============================*/
.md-btn { width: 240px; margin: 0 auto; }
.md-btn a { position: relative; display: block; background: #222; width: 240px; box-sizing: border-box; padding: 20px 0; text-align: center; color: #fff; }
.md-btn a::after { position: absolute; top: 38%; right: 20px; content: ""; background: url("../../imageFile/global/btn-ico.png")no-repeat center; background-size: contain; width: 16px; height: 12px; }
.md-btn a:hover { opacity: 1!important; background: #a01d48; }
.md-btn a:hover::after { animation: md-btn-key 1.6s infinite; }

/*============================
md-underBtn
============================*/
/* .md-underBtn::before { position: absolute; z-index: 1; bottom: 7px; right: 7px; content: ""; width: 14px; height: 9px; background: url("../../imageFile/global/btn-ico.png")no-repeat center; background-size: contain; } */
.md-underBtn:hover::before { animation: md-underBtn-key 1.2s infinite; }
.md-underBtn::after { position: absolute; bottom: -28px; right: -28px; content: ""; width: 56px; height: 56px; background: #a01d48; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*============================
md-news-btn
============================*/
.md-news-btn { width: 240px; margin: 0 auto; }
.md-news-btn a { position: relative; display: block; background: #f2f2f2; width: 240px; box-sizing: border-box; padding: 20px 0 20px 20px; text-align: left; color: #222; }
.md-news-btn a::after { position: absolute; top: 21px; right: 20px; content: ""; background: url("../../imageFile/global/news-btn-ico.png")no-repeat center; background-size: contain; width: 16px; height: 12px; }
.md-news-btn a:hover { opacity: 1!important; background: #a01d48!important; color: #fff!important; transition: .2s; }
.md-news-btn a:hover::after { animation: md-btn-key 1.6s infinite; background: url("../../imageFile/global/btn-ico.png")no-repeat center; background-size: contain; width: 16px; height: 12px; }

/*============================
md-bk-btn
============================*/
.md-bk-btn { text-align: center; }
.md-bk-btn a { position: relative; display: block; width: 260px; padding: 20px 0 20px 10px; background: #f2f2f2; }
.md-bk-btn a::before { position: absolute; content: ""; top: 15px; left: 30px; background: url("../../imageFile/global/bk-ico.png")no-repeat center; background-size: contain; width: 20px; height: 20px; }

/*============================
md-contact-btn
============================*/
.md-contact-btn { text-align: center; }
.md-contact-btn input { position: relative; display: block; width: 260px; padding: 20px 0 20px 10px; background: #222; color: #fff; border: none; margin: 40px auto 0;  }
.md-contact-btn.second button { position: relative; display: block; width: 260px; padding: 20px 0 20px 10px; border: none; margin: 40px auto 0; background: #f2f2f2; color: #222; }
/*============================
md-opacity0
============================*/
.md-opacity0 { opacity: 0; }

/*============================
md-bg-gray
============================*/
.md-bg-gray { background: #f8f8f8; }

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

/*============================
br
============================*/
.sp-only-br { display: none; }
.pc-only-br { display: block; }

/*============================
md-btn-key
============================*/
@keyframes md-btn-key {
  50% {
    right: .6em;
    opacity: 1;
  }
  100% {
    right: -.4em;
    opacity: 0;
  }
}
/*============================
md-underBtn-key
============================*/
@keyframes md-underBtn-key {
  50% {
    right: .1em;
    opacity: 1;
  }
  100% {
    right: -.4em;
    opacity: 0;
  }
}