@charset "utf-8";

@media (max-width: 720px) {
  body {
    padding-top: 0;
    min-width: 320px;
  }

  .wpcf7-form-control.wpcf7-radio .wpcf7-list-item {
    display: block;
    margin-bottom: 8px;
  }

}

@media (max-width: 720px) {

/* layout */

.header-container {
  display: block;
}

.header-logo {
  padding: 10px 20px;
  text-align: center;
}

.header-logo img {
  width: 100px;
}

.header-contact {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.header-contact ul {
  flex-wrap: wrap;
  background: #fff;
}

.header-contact a {
  flex-direction: row;
}

.header-contact-tel {
  flex-basis: 100%;
}

.header-contact-tel a {
  display: flex;
  align-items: center;
  padding: 10px;
  height: auto;
  line-height: 1.4;
}

.header-contact-tel-no {
  flex-basis: 58%;
}

.header-contact-tel-no img {
  display: block;
  width: 100%;
  max-width: 200px;
  margin-bottom: 0;
}

.header-contact-tel-time {
  flex-basis: 42%;
  font-size: 12px;
}

.header-contact-tel-time span {
  display: block;
  padding: 0;
  border-right: none;
}

.header-contact-mail,
.header-contact-estimate {
  flex-basis: 50%;
}

.header-contact-mail a,
.header-contact-estimate a {
  display: flex;
  align-items: center;
  padding: 7px;
}

.header-contact-mail i {
  margin: 0 10px 0 0;
  width: 22.2px;
  height: 15px;
}

.header-contact-estimate i {
  margin: 0 10px 0 0;
  width: 15.6px;
  height: 15.6px;
}

.header-navigation-open {
  position: fixed;
  top: 12px;
  right: 12px;
  display: block;
  width: 48px;
  z-index: 30;
}

.header-navigation-open a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 17px;
  text-align: center;
  height: 52px;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  background: #3BADBD;
}

.header-navigation-open a span.icon {
  display: block;
  transition: all .4s;
  position: relative;
  margin: 0 0 15px 0;
  width: 30px;
  height: 3px;
  background: #fff;
}

.header-navigation-open a span.icon:before,
.header-navigation-open a span.icon:after {
  content: '';
  display: block;
  transition: all .4s;
  position: absolute;
  left: 0;
  top: 9px;
  width: 30px;
  height: 3px;
  background: #fff;
}

.header-navigation-open a span.icon:after {
  top: -9px;
}

.header-navigation-open a.active { background: none; }
.header-navigation-open a.active span.text { display: none; }
.header-navigation-open a.active span.icon { background: transparent; }

.header-navigation-open a.active span.icon:before,
.header-navigation-open a.active span.icon:after {
  top: 6px;
  background: #fff;
  transform: translateY(-6px) rotate(-45deg);
}
.header-navigation-open a.active span.icon:after { transform: translateY(-6px) rotate(45deg); }

.header-navigation {
  position: fixed;
  top: 0;
  left: -100vw;
  margin-top: 0;
  padding: 64px 20px 20px 20px;
  width: 100vw;
  height: 100vh;
  background: rgba(59, 162, 190, 0.94);
  backdrop-filter: blur(4px);
  overflow-y: scroll;
  z-index: 20;
  transition: 0.2s;
}

body.active-nav {
  overflow-y: hidden;
}

.header-navigation.active { left: 0; }

.header-navigation > ul {
  display: block;
  padding: 0;
  border-top: solid 1px #fff;
}

.header-navigation > ul > li {
  padding: 4px 0;
  border-bottom: solid 1px #fff;
}

.header-navigation > ul > li:last-child {
  padding-bottom: 100px;
  border-bottom: none;
}

.header-navigation > ul > li > a,
.header-navigation > ul > li > a:hover {
  padding: 4px 8px;
  color: #fff;
  font-size: 17px;
}

.header-navigation > ul > li > ul {
  display: block;
  padding: 0 0 10px 20px;
}

.header-navigation > ul > li > ul > li a {
  display: block;
  padding: 0 4px;
  font-size: 17px;
  color: #fff;
}

.header-navigation > ul > li > ul > li > ul {
  margin-bottom: 6px;
  padding-left: 1.2em;
}

.header-navigation > ul > li > ul > li > ul a {
  font-size: 15px;
}

.section-contact-list > li {
  padding: 15px 30px;
  line-height: 1.6;
}

.section-contact-list > li .icon {
  margin-bottom: 12px;
  margin-right: auto;
  margin-left: auto;
  width: 30px;
  height: 20px;
}

.section-contact-list > li .icon img {
  max-width: 30px;
  max-height: 26px;
}

.section-contact-list > li p {
  margin-bottom: 10px;
}

.footer-navigation h4 {
  margin-bottom: 10px;
  padding-bottom: 6px;
  font-size: 18px;
  font-weight: 500;
  border-bottom: solid 1px #000000;
}

.footer-navigation > ul > li > ul > li {
  margin-bottom: 0;
}

.footer-navigation > ul > li > ul > li > a {
  font-size: 16px;
}

.footer-navigation > ul > li > ul > li > ul {
  padding-top: 0;
  padding-left: 1.2em;
  padding-bottom: 4px;
}

.footer-navigation > ul > li > ul > li > ul > li > a {
  font-size: 14px;
}

.footer-copyright {
  padding-bottom: 90px;
  font-size: 12px;
}

/* common */

.card-image {
  display: block;
}

.card-image .image {
  text-align: center;
}

.table-line th,
.table-line td {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
}

.table-line th {
  padding-right: 0;
  font-size: 18px;
  border-bottom: solid 2px #3C3E3E;
}

.table-line th:after {
  display: none;
}

.table-line td {
  padding-left: 0;
  padding-bottom: 10px;
  font-size: inherit;
  line-height: inherit;
}

.table-price th,
.table-price td {
  padding: 8px 4px;
  font-size: 13px;
  line-height: 1.4;
}

.table-price.sp-break th,
.table-price.sp-break td {
  margin-bottom: -1px;
}

.table-fill th,
.table-fill td {
  padding: 10px;
  line-height: 1.4;
}

.table-fill td {
  padding: 16px 10px;
}

.link-more:after,
.link-more.mod-s:after {
  margin-left: 12px;
  width: 32px;
  height: 32px;
  background-size: 8px;
}

.list-works {
  display: block;
}

.list-works li {
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 30px;
  max-width: 70%;
}

.list-works li a .list-content h5 {
  display: block;
  min-height: 0;
  font-size: 16px;
}

/* home */

.main-image {
  padding-top: 120px;
  background: #2A92B5;
}

.main-image-content {
  top: 0;
  left: 0;
  padding: 20px;
  width: 100%;
  transform: translateY(0%);
}

.main-image-content-inner {
  padding: 0;
  margin-inline: auto;
}

.main-image-content h2 {
  margin-bottom: 20px;
  padding: 5px;
}

.main-image-copy {
  margin-bottom: 20px;
  max-width: 100%;
  text-align: center;
  color: #fff;
  font-size: 22px !important;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.main-image-copy:after {
  bottom: -20px;
  right: 0;
  width: 177px;
  height: 53px;
}

.main-image-copy span {
  margin: 0 5px;
  text-shadow:
     2px  2px 1px #fff,
    -2px  2px 1px #fff,
     2px -2px 1px #fff,
    -2px -2px 1px #fff,
     2px  0px 1px #fff,
     0px  2px 1px #fff,
    -2px  0px 1px #fff,
     0px -2px 1px #fff,
     0 0 8px rgba(0, 0, 0, 0.5);
}

.main-image-agency {
  margin-right: auto;
  margin-left: auto;
  max-width: 85%;
}

.main-image-agency img {
  width: auto;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

.home-achievement h3:before,
.home-achievement h3:after {
  display: none;
}

.home-about {
  margin-top: 0;
  padding-top: 20px;
  background: #F4FAFB;
}

.home-about h2:before {
  font-size: 20px;
}

.home-about-card {
  display: block;
}

.home-about-card .image {
  max-width: 100%;
  padding-top: 10px;
}

.home-about-list > li {
  padding: 20px 15px;
  background: #fff;
  border: none;
}

.home-about-agency h4 {
  margin-right: 0;
  margin-left: 0;
  background-size: auto 100%;
}

.home-about-feature ul {
  margin-right: auto;
  margin-left: auto;
  max-width: 420px;
}

.home-about-feature ul > li {
  letter-spacing: -0.05em;
}

.home-service {
  background: linear-gradient(to bottom, #3BA2BE 0 calc(90px + 25vw), #ffffff calc(90px + 25vw) 100%);
}

.home-service-list li.half {
  flex-basis: 100% !important;
}

.home-works {
  background: #F4FAFB;
}

.home-works-list > li {
  max-height: 60vw;
  min-height: 0;
}

.home-works-list > li a .image {
  max-height: 60vw;
  overflow: hidden;
}

.home-works-list > li a .text {
  padding: 10px;
  align-items: center;
  text-align: center;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.home-works-more > *:first-child { order: 1; }
.home-works-more > *:last-child { order: 2; }

/**/

.sub-image {
  height: 100px;
  font-size: 21px;
}

.page-content {
  background-size: 200%;
  background-image: url(../images/bg_band.svg);
  background-repeat: repeat-y;
}

.website-plan-point > li {
  position: relative;
  margin-top: 20px;
  padding: 30px 15px;
  background: #fff;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

.website-plan-point > li:before {
  font-size: 32px;
}

.ads-agency-list li {
  padding: 5px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

.ads-point-list {
  margin-top: 40px;
}

.ads-point-list > li {
  position: relative;
  margin-bottom: 60px;
  padding: 40px 10px 20px 10px;
  background: #fff;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.16);
}

.ads-point-list > li:before {
  top: -26px;
  font-size: 24px;
}

.ads-h-agency {
  padding: 6px 35px;
}

.ads-h-att {
  padding: 10px;
}

.ads-invitation-step > li {
  margin-bottom: 32px;
  padding: 15px;
  min-height: 0;
}

.ads-invitation-step > li:after {
  bottom: -27px;
  width: 28px;
  height: 22px;
  background-size: contain;
}

.ads-differentiation-list h5 {
  display: table;
  padding: 6px 24px;
  max-width: 100%;
}

.renewal-point-list > li {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  padding: 60px 0 20px 0;
  background-size: 160px;
}

.renewal-point-list > li .head { order: 1; }
.renewal-point-list > li .image { order: 2; }
.renewal-point-list > li .text { order: 3; }

.renewal-merit-list > li {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 40px 10px 10px 10px;
  border-radius: 10px;
}

.renewal-merit-list > li:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 63px;
  height: 73px;
  background-size: 100%;
  transform: translate(-50%, -60%);
}

.renewal-merit-list > li h4 {
  text-align: center;
}

.renewal-merit-list > li .image {
  text-align: center;
}

.renewal-merit-list > li .image img {
  margin-top: 0;
  margin-inline: 0;
  max-width: 40%;
}

.renewal-plan-list li {
  margin-bottom: 20px;
}

.renewal-plan-list li .text {
  margin-bottom: 20px;
}

.renewal-reason-list > li {
  margin-bottom: 50px;
  padding: 60px 0 30px 0;
  min-height: 0;
}

.renewal-reason-list > li .list-inner {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  padding-inline: 20px;
}

.renewal-reason-list > li h4 {
  text-align: center;
}

.renewal-reason-list > li h4:before {
  top: -82px;
  left: 50%;
  width: 140px;
  background-size: 100%;
  transform: translateX(-50%);
}

.renewal-reason-list > li .image img {
  position: static;
}

.renewal-step-list {
  margin-top: 50px;
}

.renewal-step-list > li {
  position: relative;
  margin-bottom: 60px;
  padding: 40px 15px 30px 15px;
  background: #fff;
  border: solid 2px #3A3A3A;
}

.renewal-step-list > li:before {
  left: 50%;
  display: block;
  width: 100px;
  color: #fff;
  font-size: 18px !important;
  transform: translate(-50%, -50%);
}

.renewal-step-list > li:after {
  bottom: -36px;
  border-width: 16px 32px 0 32px;
}

.renewal-faq-list > li {
  margin-bottom: 20px;
  padding: 0 10px;
}

.renewal-faq-list > li .faq-q {
  padding: 12px 30px 12px 40px;
  font-size: 16px !important;
  background-position: top 10px left 0;
  background-size: 30px;
}

.renewal-faq-list > li .faq-q:after {
  content: '＋';
  position: absolute;
  right: 0px;
  top: 15px;
  display: block;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

.renewal-faq-list > li .faq-a {
  padding: 12px 0px 30px 40px;
  font-size: 14px !important;
  background-position: top 14px left 0;
  background-size: 30px;
}

.dtp-list li h4 {
  display: block;
  min-height: 0;
}


}