/* 共通CSS */

body {
    /* font-family: 'Arial', sans-serif; 標準のフォント */
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 16px; /* 基本の文字サイズ */
    line-height: 1.5; /* 行間 */
    margin: 0;
    padding: 0;
    overflow-y: auto;
    min-width: auto;
    letter-spacing: 0;

}

@media (max-width: 768px) {

    html,
    body{
        overflow-x: hidden;
    }

}

@media (max-width: 1024px) {

    html,
    body{
        overflow-x: hidden;
    }

}

ul,li{
    list-style-type: none; /* リストのデフォルトの箇条書きを削除 */
    margin: 0;
    padding: 0;
}

p,dd{
    margin: 0;
    padding: 0;
}

table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}


hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
    border-top-width: 1px;
    margin: 0;
    clear: both;
    color: inherit;
}

/* レスポンシブデザイン スマホ*/
@media only screen and (max-width: 768px) {
    body {
    min-width: inherit;
    margin: 0;
    padding: 0;
    }
}

a {
    text-decoration: none; /* 下線なし */
    color: #0066cc; /* リンクの色 */
}

a:hover {
    color: rgba(55, 109, 160, 0.836); /* ホバー時の色 */
}

/* 余白 */
.m-0 {
    margin: 0;
}

.m-a-0{
    margin: 0 auto;
}

.m-td-10{
    margin: 10px 0;  /* 上下に20px、左右は0pxの余白 */
}

.m-td-20{
    margin: 20px 0;  /* 上下に20px、左右は0pxの余白 */
}

.m-td-30{
    margin: 30px 0;
}

.m-td-40{
    margin: 40px 0;
}

.m-td-50{
    margin: 50px 0;
}

.m-td-60{
    margin: 50px 0;
}

.m-td-70{
    margin: 70px 0;
}

.m-td-80{
    margin: 80px 0;
}

.m-td-90{
    margin: 90px 0;
}

.m-td-100{
    margin: 100px 0;
}

.m-t-10{
    margin-top: 10px;
}

.m-t-20{
    margin-top: 20px;
}

.m-t-80{
    margin-top: 80px;
}

.m-t-100{
    margin-top: 100px;
}

.m-b-20{
    margin-bottom: 20px;
}

.m-b-30{
    margin-bottom: 20px;
}

.m-b-50{
    margin-bottom: 50px;
}
  
.p-0 {
    padding: 0;
}

/* テキスト位置 */
  
.text-center {
    text-align: center;
}


.bg-light {
    background-color: #f8f9fa;
}
  
.d-flex {
    display: flex;
}

.f-w-b{
    font-weight: bold;
}


/* 位置調整 */

.item-center{
    align-items: center;
}

.container {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}

@media only screen and (max-width: 768px) {
    .container {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    }
}

.wc-block-cart__submit-container {
    background-color: #f0f0f0; /* お好きな灰色に変更 */
    padding: 10px;             /* 任意で内側余白を追加 */
    border-radius: 4px;        /* 任意で角丸 */
}

.wp-block-woocommerce-cart{
    margin-top: 50px;
}


/* ===== コンテナ ===== */
.content {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* ===== フォーム全体 ===== */
.wpcf7 form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== ラベル ===== */
.wpcf7 label {
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  color: #333;
}

/* ===== 入力欄 ===== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 80%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  background: #fafafa;
  transition: all 0.2s ease;
}

/* フォーカス時 */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: #4a90e2;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,144,226,0.15);
}

/* ===== テキストエリア ===== */
.wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}

/* ===== 送信ボタン ===== */
.wpcf7 input[type="submit"] {
  background: #4a90e2;
  color: #fff;
  border: none;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.wpcf7 input[type="submit"]:hover {
  background: #357ab8;
}

/* ===== エラーメッセージ ===== */
.wpcf7 .wpcf7-not-valid-tip {
  color: #e74c3c;
  font-size: 13px;
  margin-top: 4px;
}

.wpcf7-response-output {
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
}