@charset "UTF-8";
/* =============================
   Mixin（共通スタイル）
============================= */
/* =============================
   フォントサイズの Mixin
============================= */
/* =============================
   ロゴサイズ調整 Mixin
============================= */
/* =============================
   フルイドデザイン向け margin 設定
============================= */
/* =============================
   フォント設定（Noto Sans JP を適用）
============================= */
/**
 * 🚀 `font-family` の指定について
 * - `Noto Sans JP` を第一候補に設定
 * - `sans-serif` を fallback として指定
 * - `font-display: swap;` で表示の遅延を回避（Webフォント用）
 */
@font-face {
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
/* =============================
   CSS Reset (normalize.css ベース)
============================= */
html {
  font-size: 100%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
  color: #333;
  text-align: center;
  font-size: 14px;
}
@media (min-width: 400px) {
  body {
    font-size: clamp(14px, 1.0526315789vw, 18px);
  }
}
@media (min-width: 780px) {
  body {
    font-size: 18px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* =============================
   フォントサイズ & 行間設定
============================= */
h2 {
  font-size: 20px;
  margin-top: 16px;
  margin-bottom: 16px;
  color: #0A294C;
}
@media (min-width: 400px) {
  h2 {
    font-size: clamp(20px, 4.2105263158vw, 36px);
  }
}
@media (min-width: 780px) {
  h2 {
    font-size: 36px;
  }
}
@media (min-width: 400px) {
  h2 {
    margin-top: clamp(16px, 2.1052631579vw, 24px);
  }
}
@media (min-width: 780px) {
  h2 {
    margin-top: 24px;
  }
}
@media (min-width: 400px) {
  h2 {
    margin-bottom: clamp(16px, 2.1052631579vw, 24px);
  }
}
@media (min-width: 780px) {
  h2 {
    margin-bottom: 24px;
  }
}

h3 {
  font-size: 11px;
}
@media (min-width: 400px) {
  h3 {
    font-size: clamp(11px, 1.0526315789vw, 15px);
  }
}
@media (min-width: 780px) {
  h3 {
    font-size: 15px;
  }
}

p {
  font-size: 14px;
  line-height: 1.6;
}
@media (min-width: 400px) {
  p {
    font-size: clamp(14px, 1.0526315789vw, 18px);
  }
}
@media (min-width: 780px) {
  p {
    font-size: 18px;
  }
}

.site-inner{
  max-width: inherit;
  padding: 0;
}
.content{
  width: auto;
}

.section-title {
  display: inline-block;
  background-color: #0A294C;
  color: #fff;
  padding: 0.5vw 2em;
}

/* What I Offerエリア */
.service-item h3 {
  margin: 0.5em 0;
  font-size: 16px;
  line-height: 1;
}
@media (min-width: 400px) {
  .service-item h3 {
    font-size: clamp(16px, 1.3157894737vw, 21px);
  }
}
@media (min-width: 780px) {
  .service-item h3 {
    font-size: 21px;
  }
}
.service-item h4 {
  font-size: 14px;
  margin-bottom: 1em;
}
@media (min-width: 400px) {
  .service-item h4 {
    font-size: clamp(14px, 0.5263157895vw, 16px);
  }
}
@media (min-width: 780px) {
  .service-item h4 {
    font-size: 16px;
  }
}
.service-item p {
  font-size: 12px;
}
@media (min-width: 400px) {
  .service-item p {
    font-size: clamp(12px, 0.9210526316vw, 15.5px);
  }
}
@media (min-width: 780px) {
  .service-item p {
    font-size: 15.5px;
  }
}

/* Contactエリア */
.contact label {
  font-size: 15px;
}
@media (min-width: 400px) {
  .contact label {
    font-size: clamp(15px, 0.7894736842vw, 18px);
  }
}
@media (min-width: 780px) {
  .contact label {
    font-size: 18px;
  }
}
.contact .required-text {
  font-size: 12px;
  background-color: #0A294C;
  color: #fff;
  padding: 3px;
}
.contact .info-text {
  font-size: 10px;
}
@media (min-width: 400px) {
  .contact .info-text {
    font-size: clamp(10px, 0.7894736842vw, 13px);
  }
}
@media (min-width: 780px) {
  .contact .info-text {
    font-size: 13px;
  }
}

.wpforms-required-label {
  font-size: 0 !important;
  color: transparent !important;
}

.wpforms-required-label::before {
  content: "必須";
  display: inline-block;
  background-color: #0A294C;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* フッター */
footer p{
  font-size: 12px;
}

.site-footer{
  border: none;
  font-size: 11px;
}


/* =============================
   レスポンシブ対応 (モバイル向け)
============================= */
@media (max-width: 428px) {
  body {
    font-size: 14px;
  }
  h2 {
    font-size: 27px;
  }
  h3 {
    font-size: 12px;
  }
  p {
    font-size: 14px;
  }
  .service-item {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
  .service-item h3 {
    font-size: 15px;
  }
  .service-item h4 {
    font-size: 12px;
  }
  .service-item p {
    font-size: 10px;
  }
  .contact .info-text {
    font-size: 12px;
  }
}
@media (max-width: 428px) and (min-width: 400px) {
  .contact .info-text {
    font-size: clamp(12px, 1.5789473684vw, 18px);
  }
}
@media (max-width: 428px) and (min-width: 780px) {
  .contact .info-text {
    font-size: 18px;
  }
}
@media (max-width: 428px) {
  footer {
    font-size: 10px;
  }
}
.wpforms-container {
  max-width: 100%;
  margin: 0 auto;
  background: #F5F5F5 !important;
  padding: 20px !important;
  border-radius: 8px;
}
.wpforms-container .wpforms-field {
  margin-bottom: 15px;
}
.wpforms-container .form-group label {
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.5em;
}
.wpforms-container .form-group .required {
  display: inline-block;
  background: #0A294C;
  color: #fff;
  font-size: 10px;
  padding: 2px 1em;
  border-radius: 2px;
}
.wpforms-container .form-group input, .wpforms-container .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
}
.wpforms-container .form-group input::placeholder, .wpforms-container .form-group textarea::placeholder {
  color: #999;
}
.wpforms-container .contact-notice, .wpforms-container .privacy-notice {
  font-size: 12px;
  text-align: center;
  color: #333;
  margin-top: 10px;
}
.wpforms-container .submit-btn {
  width: 100%;
  padding: 12px;
  background: #EA0000;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.wpforms-container .submit-btn .icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("../images/send.svg") no-repeat center center;
  background-size: contain;
}
.wpforms-container .submit-btn:hover {
  background: #B00000;
}

/* =============================
   レイアウト (PC優先)
============================= */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
}

main {
  box-sizing: border-box;
}

/* =============================
   ロゴ (CSS 背景画像適用)
============================= */
header {
  margin: 6em 0 3em;
}
header .logo {
  display: block;
  background-image: url("../images/kaneru.svg");
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: -9999px;
  width: 90px;
  height: 160.2px;
  margin: auto;
}
@media (min-width: 429px) {
  header .logo {
    width: clamp(90px, 19.9203187251vw, 140px);
  }
}
@media (min-width: 680px) {
  header .logo {
    width: 140px;
  }
}
@media (min-width: 429px) {
  header .logo {
    height: clamp(160.2px, 35.4581673307vw, 249.2px);
  }
}
@media (min-width: 680px) {
  header .logo {
    height: 249.2px;
  }
}
header .no-svg .logo {
  background-image: url("../images/kaneru@2x.png") !important;
}

/* =============================
   イントロエリア (PC優先)
============================= */
.intro {
  padding: 8vw 10px;
}

/* =============================
   サービス紹介エリア (PC優先)
============================= */
.services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 10vw 10px;
}
.services .services-header {
  width: 100%;
  margin-bottom: 20px;
}
.services .service-item {
  flex: 1 1 calc(33.333% - 20px);
  max-width: calc(33.333% - 20px);
  text-align: center;
  border-radius: 8px;
  position: relative;
}
.services .service-item::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto 1.5em;
}
.services .service-item[data-icon=navigation]::before {
  background-image: url("../images/navigation.svg") !important;
}
.no-svg .services .service-item[data-icon=navigation]::before {
  background-image: url("../images/navigation@2x.png") !important;
}
.services .service-item[data-icon=design]::before {
  background-image: url("../images/design.svg") !important;
}
.no-svg .services .service-item[data-icon=design]::before {
  background-image: url("../images/design@2x.png") !important;
}
.services .service-item[data-icon=content]::before {
  background-image: url("../images/content.svg") !important;
}
.no-svg .services .service-item[data-icon=content]::before {
  background-image: url("../images/content@2x.png") !important;
}
.services .service-item[data-icon=visuals]::before {
  background-image: url("../images/visuals.svg") !important;
}
.no-svg .services .service-item[data-icon=visuals]::before {
  background-image: url("../images/visuals@2x.png") !important;
}
.services .service-item[data-icon=branding]::before {
  background-image: url("../images/branding.svg") !important;
}
.no-svg .services .service-item[data-icon=branding]::before {
  background-image: url("../images/branding@2x.png") !important;
}
.services .service-item[data-icon=blog]::before {
  background-image: url("../images/blog.svg") !important;
}
.no-svg .services .service-item[data-icon=blog]::before {
  background-image: url("../images/blog@2x.png") !important;
}

/* =============================
   フォームエリア (PC優先)
============================= */
.contact {
  max-width: 780px;
  padding: 10vw 0;
}
.contact .contact-header {
  padding: 0 10px;
  margin-bottom: 2em;
}
.contact form {
  display: flex;
  max-width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  gap: 10px;
  padding: 3em 40px;
  background: #F3F3F3;
  text-align: left;
}
.contact input, .contact textarea, .contact button {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 1em;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.contact button {
  padding: 10px 15px;
  background: #1c88c7;
  color: #fff;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

/* =============================
   レスポンシブ対応 (モバイル向け)
============================= */
@media (max-width: 428px) {
  body {
    max-width: 100%;
  }
  .service-item {
    flex: 1 1 calc(50% - 20px) !important;
    max-width: calc(50% - 20px) !important;
  }
  .contact {
    max-width: 100%;
  }
}

/*# sourceMappingURL=main.css.map */