@charset "utf-8";
/*ヘッダー*/
.h1_bg {
  width: 100%;
  padding: 0.5% 0;
  background: #211677;
  color: #fff;
  font-size: 40%;
  line-height: 1;
}
.h1_bg h1 {
  max-width: 1200px;
  margin: auto;
}
#main_header {
  width: 100%;
}
#main_header .inner {
  padding: 1% 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#main_header .inner .logo {
  width: 20%;
}
#main_header .inner .gloval-nav {
  width: 75%;
}
/*メインナビゲーション*/
#main_header .inner .gloval-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  font-size: 90%;
  line-height: 0;
  /*background: #ccc;*/
}
#main_header .inner .gloval-nav ul li {
  width: calc(12% - 1%);
  margin: 0 1.5% 0 0;
  background: url(../img/common/bg_nav.jpg) no-repeat center center / cover;
  border-radius: 5px;
}
#main_header .inner .gloval-nav ul li a {
  padding: 20% 0;
  display: block;
  color: #fff;
}
#main_header .inner .gloval-nav ul li a:hover {
  filter: alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}
#main_header .inner .gloval-nav ul li:last-child {
  width: 25%;
  margin: 0;
}
#main_header .inner .gloval-nav ul li:last-child a {
  padding: 10% 0 10% 10%;
  background: #f1ce42 url(../img/common/contact_btn.png) no-repeat 30px center;
  color: #000;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .h1_bg {
    padding: 2% 0;
    line-height: 1.2;
  }
  .h1_bg h1 {
    max-width: 90%;
  }
  #main_header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
  }
  #main_header .inner {
    padding: 2%;
  }
  #main_header .inner .logo {
    width: 50%;
  }
  #main_header .inner .gloval-nav {
    width: 100%;
    height: 100vh;
    transition: all 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    background: #211677 url("../img/common/menu-back.png") no-repeat center top / auto 100%;
    visibility: hidden;
    opacity: 0;
  }
  #main_header .inner .gloval-nav ul {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 110%;
  }
  #main_header .inner .gloval-nav ul li {
    width: 100%;
    margin: 0 auto;
    background: none;
    border-radius: 0;
  }
  #main_header .inner .gloval-nav ul li a {
    padding: 5% 0;
  }
  #main_header .inner .gloval-nav ul li:last-child {
    width: 80%;
    margin: 3% auto 0;
    padding: 0 0 0 3%;
    background: #f1ce42 url(../img/common/contact_btn.png) no-repeat 30px center;
  }
  #main_header .inner .gloval-nav ul li:last-child a {
    padding: 8% 0;
  }
  .navBtn {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 3%;
    top: 25%;
    cursor: pointer;
  }
  .navBtn > p {
    position: relative;
  }
  .navBtn > p::after {
    content: "MENU";
    position: absolute;
		left: 3px;
    top: 26px;
    font-size: 70%;
    color: #211677;
		letter-spacing: 0.15em;
  }
  .navBtn span {
    width: 100%;
    height: 2px;
    position: absolute;
    background: #211677;
    transition: top .5s ease, -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out, top .5s ease;
    transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
  }
  .navBtn span:nth-child(1) {
    top: 0;
  }
  .navBtn span:nth-child(2) {
    top: 10px;
  }
  .navBtn span:nth-child(3) {
    top: 20px;
  }
  .open .navBtn span {
    background: #fff;
  }
  .open .navBtn > p::after {
    color: #fff;
  }
  .open .navBtn span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .open .navBtn span:nth-child(2) {
    width: 0;
  }
  .open .navBtn span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .open #main_header .inner .gloval-nav {
    visibility: visible;
    opacity: 1;
  }
}
#main_footer {
  width: 100%;
  text-align: center;
  background-color: rgba(215, 203, 184, 0.3);
}
#main_footer .footer_nav {
  width: 100%;
  padding: 1% 0;
  background: #211677;
}
#main_footer .footer_nav ul {
  max-width: 1000px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#main_footer .footer_nav ul li {
  padding: 0 2%;
  border-left: solid 1px #fff;
}
#main_footer .footer_nav ul li:last-child {
  border-right: solid 1px #fff;
}
#main_footer .footer_nav ul li a {
  display: block;
  color: #fff;
}
#main_footer .copy_right {
  width: 100%;
  padding: 0.5% 0;
  border-top: solid 1px #211677;
  font-size: 80%;
}
#main_footer .info {
  padding: 2%;
}
#main_footer .info a {
  margin: 1% auto 0;
  padding: 1% 2% 1% 4%;
  display: table;
  background: #f1ce42 url(../img/common/contact_btn.png) no-repeat 30px center;
  color: #000;
  font-weight: 700;
}
@media only screen and (max-width: 1280px) {
  #main_footer .info a {
    padding: 2% 5% 2% 8%;
  }
}
@media only screen and (max-width: 767px) {
  #main_footer .footer_nav {
    padding: 2% 0;
  }
  #main_footer .footer_nav ul {
    max-width: 100%;
  }
  #main_footer .footer_nav ul li {
    width: calc(100%/3);
    padding: 0;
    font-size: 80%;
  }
  #main_footer .footer_nav ul li:first-child, #main_footer .footer_nav ul li:nth-child(4) {
    border-left: 0 none;
  }
  #main_footer .footer_nav ul li:last-child {
    border-right: 0 none;
  }
  #main_footer .footer_nav ul li a {
    display: block;
    color: #fff;
  }
  #main_footer .info {
    padding: 5%;
    font-size: 80%;
  }
  #main_footer .copy_right {
    width: 100%;
    padding: 0.5% 0;
    border-top: solid 1px #211677;
    font-size: 80%;
  }
  #main_footer .info a {
    margin: 3% auto 0;
    padding: 3% 7% 3% 18%;
  }
}
/*パンくず*/
.bread {
  padding: 0.5% 0;
  background: rgba(215, 203, 184, 0.3);
  font-size: 80%;
  line-height: 1;
}
.bread ul li {
  display: inline;
}
.bread ul li:after {
  content: " > ";
}
.bread ul li:last-child:after {
  content: none;
}
@media only screen and (max-width: 767px) {
  .bread {
    padding: 2% 0;
  }
}
/*見出し設定*/
#page_head {
  width: 100%;
  padding: 2.5% 0;
  text-align: center;
  background: #211677;
  line-height: 0;
}
@media only screen and (max-width: 767px) {
  #page_head {
    padding: 5% 0;
  }
  #page_head img {
    height: 40px;
  }
}
/*共通設定*/
#page_head {}
#page_head h2 {
  color: #fff;
  font-family: 'Yuji Syuku', serif;
  font-size: 200%;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
#page_head h2 small {
  display: block;
  color: #f1ce42;
  font-size: 50%;
}
.inner {
  max-width: 1200px;
  margin: 0 auto;
}
.home .main_contents {
  margin: 0 auto;
}
.page .main_contents .inner {
  max-width: 1000px;
  margin: 0 auto;
}
.page .main_contents {
  margin: 3% auto;
}
.main_contents section {
  padding: 5% 0;
}
.common_h3 {
  margin: 0 0 3%;
  padding: 0 0 1% 2%;
  border-left: solid 5px #211677;
  border-bottom: solid 1px #211677;
}
.to_contact {
  max-width: 800px;
  margin: 2% auto 0;
  display: block;
}
@media only screen and (max-width: 1280px) {
  .home .main_contents .inner, .page .main_contents .inner {
    max-width: 95%;
  }
  .to_contact {
    max-width: 100%;
    margin: 10% auto 0;
  }
}
@media only screen and (max-width: 767px) {
  .home .main_contents {
    margin: 5% auto 0;
  }
  .page .main_contents {
    margin: 5% auto 8%;
  }
  .home .main_contents .inner, .page .main_contents .inner {
    max-width: 90%;
  }
  .common_h3 img {
    height: 20px;
  }
}
/*松輝建装のこだわり*/
.main_contents .concept {
  padding: 5% 0 2%;
}
.main_contents .concept h2 {
  max-width: 650px;
  margin: 0 auto 2%;
  position: relative;
  text-align: center;
}
.main_contents .concept h2 span {
  position: absolute;
  left: 0;
  top: 0;
}
.main_contents .concept .q_copy {
  margin: 0 0 2%;
  position: relative;
  text-align: center;
  font-weight: 700;
}
.main_contents .concept dl {
  width: calc(33.333333% - 2%);
  margin: 0 3% 0 0;
  padding: 5% 2% 2%;
  border: solid 1px #211677;
}
.main_contents .concept dl dt {
  margin: 0 0 5%;
  text-align: center;
}
.main_contents .concept dl:nth-child(1) {
  background: #fff url(../img/top/concept_no1.png) no-repeat left top;
}
.main_contents .concept dl:nth-child(2) {
  background: #fff url(../img/top/concept_no2.png) no-repeat left top;
}
.main_contents .concept dl:nth-child(3) {
  margin: 0;
  background: #fff url(../img/top/concept_no3.png) no-repeat left top;
}
.main_contents .concept .check_icon {
  background: url(../img/top/check_icon.png) no-repeat left 2px;
  padding-left: 20px;
  font-weight: 700;
}
.main_contents .concept ul.f-box {
  margin: 3% auto 0;
}
.main_contents .concept ul.f-box li {
  width: calc(25% - 1.5%);
  margin: 0 2% 0 0;
}
.main_contents .concept ul.f-box li:nth-child(4n) {
  margin: 0;
}
.main_contents .concept ul.f-box li img {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .main_contents .concept {
    padding: 8% 0 0;
  }
  .main_contents .concept h2 {
    margin: 0 auto 5%;
  }
  .main_contents .concept h2 img {
    height: 40px;
  }
  .main_contents .concept h2 span {
    top: -20px;
  }
  .main_contents .concept dl {
    width: 100%;
    margin: 0 auto 5%;
    padding: 5% 3% 2%;
  }
  .main_contents .concept dl:nth-child(1) {
    background: #fff url(../img/top/concept_no1.png) no-repeat left top / 20% auto;
  }
  .main_contents .concept dl:nth-child(2) {
    background: #fff url(../img/top/concept_no2.png) no-repeat left top / 20% auto;
  }
  .main_contents .concept dl:nth-child(3) {
    background: #fff url(../img/top/concept_no3.png) no-repeat left top / 20% auto;
  }
  .main_contents .concept dl dt img {
    height: 18px;
  }
  .main_contents .concept dl dd {
    font-size: 85%;
  }
  .main_contents .concept ul.f-box li {
    width: calc(50% - 1.2%);
    margin: 0 2% 2% 0;
    font-size: 80%;
  }
  .main_contents .concept ul.f-box li:nth-child(4n), .main_contents .concept ul.f-box li:nth-child(even) {
    margin: 0 0 2%;
  }
}
/*インスタ*/
.insta {
  margin: 0 auto;
}
.insta iframe {
  width: 100%;
  height: 600px;
}
@media only screen and (max-width: 767px) {
  .insta iframe {
    height: 180px;
  }
}
/*施工事例*/
.main_contents .case {
  background-color: rgba(215, 203, 184, 0.3);
}
.main_contents .case h2 {
  margin: 0 auto 2%;
  text-align: center;
}
.main_contents .case .case_list {}
.main_contents .case .case_list li {
  width: calc(25% - 1.5%);
  margin: 0 2% 0 0;
  padding: 2% 2% 5%;
  position: relative;
  background: #fff;
}
.main_contents .case .case_list li:nth-child(4n) {
  margin: 0;
}
.main_contents .case .case_list li img {
  width: 100%;
}
.main_contents .case .case_list .tit a {
  color: #211677;
  text-decoration: underline;
}
.main_contents .case .case_list .scope {
  font-size: 90%;
}
.main_contents .case .case_list .more_btn {
  width: 90%;
  position: absolute;
  top: 90%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.main_contents .case .case_list .more_btn a {
  width: 100%;
  padding: 2% 0;
  display: block;
  text-align: center;
  background: #211677 url(../img/common/more_arrow.png) no-repeat 60px center;
  border-radius: 15px;
  color: #fff;
}
.main_contents .case .case_list .more_btn a:hover {
  filter: alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}
.tolist a {
  display: block;
  max-width: 300px;
  margin: 5% auto 0;
  padding: 2% 5%;
  text-align: center;
  background: #f1ce42;
  font-family: 'Yuji Syuku', serif;
}
.tolist a:hover {
  opacity: 0.8;
}
@media only screen and (max-width: 767px) {
  .main_contents .case h2 {
    margin: 0 auto 5%;
  }
  .main_contents .case h2 img {
    height: 40px;
  }
  .main_contents .case .case_list li {
    width: calc(50% - 1.2%);
    margin: 0 2% 4% 0;
    padding: 2% 2% 15%;
  }
  .main_contents .case .case_list li:nth-child(4n), .main_contents .case .case_list li:nth-child(even) {
    margin: 0 0 4%;
  }
  .main_contents .case .case_list .more_btn a {
    background: #211677 url(../img/common/more_arrow.png) no-repeat 10px center;
  }
}
/*バナー*/
.banner {
  max-width: 700px;
  margin: 0 auto;
  padding: 3% 0;
}
.banner p {
  margin: 0 2%;
  display: inline-block;
}
@media only screen and (max-width: 767px) {
  .banner {
    max-width: 70%;
    margin: 0 auto;
    padding: 8% 0;
  }
  .banner p {
    margin: 0 auto 2%;
  }
  .banner img {
    width: 100%;
  }
}
/*会社概要*/
.greeting {}
.greeting ul.f-box {
  justify-content: space-between;
}
.greeting ul.f-box li:nth-child(1) {
  width: 30%;
}
.greeting ul.f-box li:nth-child(2) {
  width: 68%;
}
.greeting ul li ul li:before {
  content: "■";
  color: #211677;
}
.greeting ul li ul li:nth-child(1), .greeting ul li ul li:nth-child(2) {
  width: 100% !important;
}
.greeting table {
  width: 100%;
  background: #fff;
  border-collapse: collapse;
  border: 1px solid #8ca2ca;
}
.greeting table tr th {
  padding: 1% 2%;
  background: #f1f6fe;
  vertical-align: middle;
  border-bottom: 1px solid #8ca2ca;
}
.greeting table tr td {
  padding: 1% 2%;
  vertical-align: middle;
  border-bottom: 1px solid #8ca2ca;
}
.g_map iframe {
  width: 100%;
  height: 500px;
  border: solid 5px #fff;
}
@media only screen and (max-width: 767px) {
  .greeting ul.f-box li:nth-child(1) {
    width: 100%;
  }
  .greeting ul.f-box li:nth-child(1) img {
    width: 100%;
  }
  .greeting ul.f-box li:nth-child(2) {
    width: 100%;
  }
  .greeting ul li ul {
    font-size: 85%;
  }
  .greeting table {
    font-size: 90%;
  }
  .greeting table tr th {
    width: 30%;
    text-align: left;
  }
  .g_map iframe {
    height: 300px;
  }
}
/*お見積り例*/
.estimate_key ul.f-box {
  justify-content: space-between;
}
.estimate_key ul.f-box li:nth-child(1) {
  width: 30%;
}
.estimate_key ul.f-box li:nth-child(2) {
  width: 68%;
}
@media only screen and (max-width: 767px) {
  .estimate_key ul.f-box li:nth-child(1) {
    width: 100%;
  }
  .estimate_key ul.f-box li:nth-child(1) img {
    width: 100%;
  }
  .estimate_key ul.f-box li:nth-child(2) {
    width: 100%;
  }
} /*施工の流れ*/
.main_contents .flow_list > li {
  margin: 0 auto 8%;
  padding: 3%;
  position: relative;
  background: #fff;
  box-shadow: 2px 2px 2px 1px #ccc;
}
.main_contents .flow_list > li.bnr {
  padding: 0;
  background: none;
  box-shadow: inherit;
}
.main_contents .flow_list > li.step3 {
  margin: 0 auto 4%;
}
.main_contents .flow_list li:last-child {
  margin: 0;
}
.main_contents .flow_list li .arrow {
  position: absolute;
  bottom: -70px;
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
}
.main_contents .flow_list li h3 {
  margin: 0 auto 3%;
}
.main_contents .flow_list li .fl-left {
  width: 55%;
}
.main_contents .flow_list li .fl-right img {
  width: 100%;
}
.main_contents .flow_list ul.step1_sub {
  margin: 3% auto 0;
  padding: 2% 2% 0;
  background: #f1f6fe;
}
.main_contents .flow_list ul.step1_sub li {
  width: calc(33.333333% - 1%);
  margin: 0 1.5% 2% 0;
}
.main_contents .flow_list ul.step1_sub li:nth-child(3n) {
  margin: 0 0 2%;
}
.main_contents .flow_list ul.step1_sub li img {
  width: 100%;
}
.main_contents .flow_list ul.step1_sub li span {
  display: block;
  text-align: center;
  color: #211677;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .main_contents .flow_list > li {
    margin: 0 auto 18%;
  }
  .main_contents .flow_list > li.step3 {
    margin: 0 auto 6%;
  }
  .main_contents .flow_list li .arrow {
    bottom: -60px;
  }
  .main_contents .flow_list li .fl-left {
    width: 100%;
    margin: 0 auto 3%;
  }
  .main_contents .flow_list li .fl-right {
    width: 100%;
  }
  .main_contents .flow_list ul.step1_sub {
    margin: 7% auto 0;
    padding: 5% 5% 0;
  }
  .main_contents .flow_list ul.step1_sub li {
    width: calc(50% - 2%);
    margin: 0 4% 2% 0;
  }
  .main_contents .flow_list ul.step1_sub li:nth-child(3n) {
    margin: 0 4% 2% 0;
  }
  .main_contents .flow_list ul.step1_sub li:nth-child(even) {
    margin: 0 0 2%;
  }
  .main_contents .flow_list ul.step1_sub li span {
    font-size: 75%;
  }
}
/*塗料紹介*/
.paint h3 {
  margin: 0 auto 3%;
  padding: 1.5% 0;
  text-align: center;
  background-color: rgba(215, 203, 184, 0.3);
  border-top: solid 3px #211677;
  font-family: 'Yuji Syuku', serif;
  font-size: 160%;
}
.paint .flex {
  margin: 0 auto 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.paint .flex .cont {
  width: 82%;
}
.paint .flex figure {
  width: 16%;
  text-align: center;
}
.paint .flex figure img {
  width: 100%;
}
.paint .flex.ls .cont {
  width: 68%;
}
.paint .flex.ls figure {
  width: 30%;
}
.paint p.years {
  margin: 3% 0 0;
  padding: 2.5% 3%;
  display: table;
  background-color: #f1f6fe;
  border: solid 1px #211677;
  color: #211677;
  font-weight: 700;
  line-height: 0;
}
.recommend h3 {
  width: 100%;
  margin: 0 0 5%;
  padding: 2% 0;
  position: relative;
  text-align: center;
  background: #211677;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #fff;
  font-family: 'Yuji Syuku', serif;
  font-size: 160%;
  letter-spacing: 0.05em;
}
.recommend h3::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #211677;
}
.recommend h4, .example h4 {
  margin: 0 0 3%;
  padding: 1% 0 1% 4%;
  background: url(../img/paint/recommend_arrow.png) no-repeat left center;
  border-bottom: solid 1px #211677;
  font-size: 140%;
  font-weight: 700;
}
.recommend ul.f-box {
  justify-content: space-between;
}
.recommend ul.f-box li:nth-child(1) {
  width: 65%;
}
.recommend ul.f-box li:nth-child(2) {
  width: 30%;
}
.recommend ul.f-box li:nth-child(2) img {
  width: 100%;
}
.recommend p a {
  text-decoration: underline;
}
.recommend dl {
  margin: 3% auto 0;
  padding: 3%;
  background: #f1f6fe;
  border: dotted 2px #211677;
}
.recommend dl dt {
  color: #211677;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .paint h3 {
    font-size: 130%;
  }
  .paint .flex .cont, .paint .flex.ls .cont {
    width: 100%;
  }
  .paint .flex figure {
    width: 50%;
    margin: 0 auto 3%;
  }
  .paint .flex.ls figure {
    width: 80%;
    margin: 0 auto 3%;
  }
  .paint p.years {
    margin: 5% auto 0;
    padding: 5% 10%;
    text-align: center;
  }
  .recommend h3 {
    margin: 0 0 8%;
    font-size: 140%;
  }
  .recommend h4, .example h4 {
    margin: 5% 0 3%;
    padding: 1% 0 1% 10%;
    background: url(../img/paint/recommend_arrow.png) no-repeat left center / 25px auto;
    font-size: 120%;
  }
  .recommend ul.f-box {
    margin: 0 auto 8%;
    flex-direction: column-reverse;
  }
  .recommend ul.f-box li:nth-child(1) {
    width: 100%;
  }
  .recommend ul.f-box li:nth-child(2) {
    width: 50%;
    margin: 0 auto 3%;
  }
}
/*インスタグラム*/
.insta figure {
  text-align: center;
}
/*お問い合わせフォーム*/
.mfp_achroma, .mfp_colored {
  background-color: inherit;
}
form#mailformpro {
  padding: 0;
}
dl.mailform {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
form#mailformpro dl dt {
  width: 30%;
  padding: 1% 0;
  float: none;
  text-align: left;
  border: none;
  font-size: 100%;
  font-weight: 700;
}
form#mailformpro dl dd {
  width: 65%;
  padding: 0;
  border: none;
  font-size: 100%;
}
form#mailformpro dl dd ol li {
  margin: 0 auto 2%;
}
form#mailformpro dl dd textarea {
  width: 100% !important;
  height: 200px !important;
}
.must {
  display: inline;
  float: none;
}
.mfp_element_submit, .mfp_element_reset, .mfp_element_button {
  display: inline-block;
  text-shadow: none;
  max-width: 180px;
  text-align: center;
  text-decoration: none;
  outline: none;
  border-radius: 0;
  color: #fff;
  font-size: 100%;
  font-weight: 700;
}
.mfp_element_reset, .mfp_element_reset:hover {
  background: #333;
  border: 2px solid #333;
}
.mfp_element_submit, .mfp_element_submit:hover {
  background: #211677;
  border: 2px solid #211677;
}
.mfp_element_reset:hover, .mfp_element_submit:hover {
  filter: alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}
.mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea, .mfp_element_date {
  margin: 0;
  padding: 1% 2%;
  border: solid 1px #ccc;
  border-radius: 0;
  box-shadow: none;
}
.mfp_element_all {
  max-width: 100%;
}
@media only screen and (max-width: 767px) {
  dl.mailform {
    max-width: 100%;
  }
  form#mailformpro dl dt {
    width: 100%;
    padding: 0;
  }
  form#mailformpro dl dd {
    width: 100%;
    margin: 0 0 5%;
  }
  .mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea, .mfp_element_date {
    width: 100%;
    padding: 1% 2%;
  }
}
.drone h3 {
  margin: 0 auto 5%;
  text-align: center;
  display: table;
  background-image: linear-gradient(0deg, #ffd800 0.3em, transparent 0.3em);
  font-size: 200%;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0px 0px 1px #000;
  -webkit-text-stroke: 1px #000;
}
.drone h3 em {
  color: #bb322a;
  font-size: 120%;
  font-weight: 700;
  font-style: italic;
  text-shadow: 0px 0px 1px #bb322a;
  -webkit-text-stroke: 1px #bb322a;
}
.drone ul.intro.f-box {
  margin: 0 auto 5%;
  justify-content: space-between;
}
.drone ul.intro.f-box li:nth-child(1) {
  width: 55%;
}
.drone ul.intro.f-box li:nth-child(2) {
  width: 40%;
}
.drone ul.intro.f-box li:nth-child(1) dl {
  margin: 3% auto 0;
  border: 1px solid #31268f;
}
.drone ul.intro.f-box li:nth-child(1) dl dt {
  width: 100%;
  padding: 3% 0;
  text-align: center;
  background: #f1f6fe;
  color: #31268f;
  font-size: 110%;
  font-weight: 700;
  line-height: 1;
}
.drone ul.intro.f-box li:nth-child(1) dl dd {
  width: 100%;
  padding: 2% 8%;
  background: #fff;
  font-weight: 700;
}
.drone ul.intro.f-box li:nth-child(2) video {
  width: 100%;
  height: 20vw;
}
.drone h4 {
  width: 100%;
  margin: 0 auto 5%;
  padding: 1% 0;
  text-align: center;
  background: #211677;
  color: #fff;
  font-size: 150%;
  font-weight: 700;
}
.drone .merit {
  width: 100%;
  margin: 0 auto 5%;
  padding: 0 0 3%;
  background: #fff;
  box-shadow: 2px 2px 2px 1px #ccc;
}
.drone .merit h5 {
  margin: 0 0 3%;
}
.drone .merit h5 img {
  height: 80px;
}
.drone .merit ul.f-box {
  width: 90%;
  margin: 0 auto 5%;
  justify-content: space-between;
}
.drone .merit ul.f-box li:nth-child(1) {
  width: 55%;
}
.drone .merit ul.f-box li:nth-child(2) {
  width: 40%;
}
.drone .merit .example {
  width: 90%;
  margin: 0 auto 5%;
  padding: 3% 2% 2%;
  background: #f1f6fe;
}
.drone .merit .example h6 {
  margin: 0 auto 2%;
  text-align: center;
  font-size: 160%;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0px 0px 1px #000;
  -webkit-text-stroke: 1px #000;
}
.drone .merit .example h6 em {
  color: #bb322a;
  font-size: 110%;
  font-weight: 700;
  font-style: italic;
  text-shadow: 0px 0px 1px #bb322a;
  -webkit-text-stroke: 1px #bb322a;
}
.drone .merit .example p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.drone .merit .example p span {
  width: 50%;
}
.drone .merit .m-b {
  width: 90%;
  margin: 0 auto 5%;
}
.drone .merit .m-b h5 + p {
  margin: 0 auto 5%;
}
.drone .system {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 3%;
  background: #fff;
  box-shadow: 2px 2px 2px 1px #ccc;
}
.drone .system dl {
  width: 90%;
  margin: 0 auto 3%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background: #f1f6fe;
  border: 3px solid #31268f;
  border-radius: 15px;
}
.drone .system dl dt {
  width: 40%;
  padding: 0 0 0 2%;
}
.drone .system dl dt img {
  height: 80px;
}
.drone .system dl:first-of-type dt img {
  height: 110px;
}
.drone .system dl dd {
  width: 58%;
  padding: 2% 5% 2% 0;
}
.drone figure.inst {
  margin: 50px auto 0;
  display: block;
  text-align: center;
}
.drone figure.inst p {
  color: #31268f;
  font-size: 150%;
  font-weight: 700;
}
.drone figure.inst p::before {
  content: "＼";
}
.drone figure.inst p::after {
  content: "／";
}
@media only screen and (max-width: 767px) {
  .drone h3 {
    margin: 0 auto 8%;
    font-size: 150%;
  }
  .drone h3 em {
    font-size: 120%;
  }
  .drone ul.intro.f-box {
    margin: 0 auto 8%;
    flex-direction: column-reverse;
  }
  .drone ul.intro.f-box li:nth-child(1) {
    width: 100%;
  }
  .drone ul.intro.f-box li:nth-child(2) {
    width: 80%;
    margin: 0 auto 3%;
  }
  .drone ul.intro.f-box li:nth-child(2) video {
    height: 60vw;
  }
  .drone h4 {
    margin: 0 auto 5%;
    font-size: 130%;
  }
  .drone .merit h5 img {
    height: 45px;
  }
  .drone .merit ul.f-box li:nth-child(1) {
    width: 100%;
    margin: 0 auto 5%;
  }
  .drone .merit ul.f-box li:nth-child(2) {
    width: 100%;
  }
  .drone .merit .example h6 {
    font-size: 130%;
  }
  .drone .merit .example p span {
    width: 100%;
  }
  .drone .system dl {
    margin: 0 auto 5%;
  }
  .drone .system dl dt {
    width: 100%;
    padding: 5% 0 5% 5%;
  }
  .drone .system dl dt img {
    height: 65px;
  }
  .drone .system dl:first-of-type dt img {
    height: 90px;
  }
  .drone .system dl dd {
    width: 100%;
    padding: 0 5% 5%;
  }
  .drone figure.inst {
    margin: 20px auto 0;
  }
}
.fix-bnr {
  max-width: 250px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 3;
}
@media only screen and (max-width: 767px) {
  .fix-bnr {
    max-width: 100%;
    right: 0;
    bottom: 0;
  }
  .fix-bnr img {
    width: 100%;
  }
  #main_footer {
    padding: 0 0 22%;
  }
}