@charset "UTF-8";
/*
Template: arkhe
Theme Name: Arkhe Child
Theme URI: https://arkhe-theme.com/ja/
Description: Arkhe用子テーマ
Version: 1.0.0
Text Domain: arkhe
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/
/* ずらし＆重ねボックス */
.cstm-box-offset {
  margin: 2em auto;  /* 外側余白 */
  padding: 2em;  /* 内側余白 */
  background: none;  /* 元のボックス背景色なし */
  border: 1px solid #ccc;  /* 枠線 */
  position: relative;  /* 配置の基準 */
  max-width: 800px;  /* 最大幅 */
}

.cstm-box-offset::after {
  background-color: #e2f2f2;  /* ずらした背景色 */
  border: none;  /* 枠線なし */
  content: '';  /* 擬似要素 */
  position: absolute;  /* 位置指定 */
  top: 7px;  /* 上にずらす */
  left: 7px;  /* 左にずらす */
  width: 100%;  /* 幅100% */
  height: 100%;  /* 高さ100% */
  z-index: -1;  /* 背面表示 */
}

/* ボックス内の段落 */
.cstm-box-offset p {
  margin: 0;
}
/******** PC SP 表示制限 ********/
/* PCでのみ表示（スマホでは非表示） */
.pc-only {
  display: block;          /* 通常時は表示 */
}

/* スマホでのみ表示（PCでは非表示） */
.sp-only {
  display: none;           /* 通常時は非表示 */
}
/* スマホサイズ（768px未満）の設定 */
@media (max-width: 767px) {
  .pc-only {
    display: none;        /* スマホサイズでは非表示 */
  }
  
  .sp-only {
    display: block;       /* スマホサイズでは表示 */
  }
}
/******** h3デザイン ********/
/* 先頭に四角のアクセント */
h2 {
  position: relative; /* 擬似要素の基準 */
  background: none; /* 背景なし */
  padding: 0 0 .3em 2em; /* 余白 */
  color: #333; /* 文字色 */
  line-height: 1.8; /* 行高 */
}
/* 四角アクセント（共通） */
h2::before,
h2::after {
  content: '';
  position: absolute;
  opacity: .5;
}
/* 大きい四角 */
h2::before {
  top: .3em;
  left: .2em;
  width: .8em;
  height: .8em;
  background: #E3674B;
  z-index: 2;
}
/* 小さい四角 */
h2::after {
  top: .8em;
  left: .8em;
  width: .8em;
  height: .8em;
  background: #14B5BD;
}
/******** コンタクトフォーム ********/
/* フォーム全体のスタイル */
.wpcf7 {
background-color: #f0f0f0; /* ライトグレー */
padding: 20px;
border-radius: 10px;
max-width: 800px;
margin: auto;
}
/* ラベルのスタイル */
.wpcf7-form label {
display: block;
margin-bottom: 10px;
font-size: 16px;
color: #333333; /* ダークグレー */
}
/* 必須フィールドのラベルスタイル */
.wpcf7-form .required {
background-color: #ff0000; /* レッド */
color: white;
padding: 2px 6px;
border-radius: 3px;
margin-left: 2px;
font-size: 12px;
}
/* 必須フィールドのラベルスタイル2 */
.wpcf7-form .required2 {
color: #ff0000;
margin-left: 6px;
font-size: 12px;
}
/* インプットフィールドのスタイル */
.wpcf7-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #cccccc; /* ライトグレー */
border-radius: 5px;
margin-bottom: 20px;
font-size: 16px;
background-color: #ffffff; /* 白 */
}
/* テキストエリアのスタイル */
.wpcf7-form textarea {
height: 150px;
resize: vertical;
}
/* 送信ボタンのスタイル */
/*デフォルトのスタイルを無効化する*/
input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
span.wpcf7-spinner {
  display: none;
}
input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 20px;
  font-weight: bold;
  width: 200px;
  padding: 10px;
  border-radius: 10px;
  background-color: #5299ba;
  border: none;
  color: #fff;
  cursor: pointer;
}
span.wpcf7-spinner {
  display: none;
}
.submit-btn-wrapper {
  text-align: center;
}
/* エラーメッセージと成功メッセージのスタイル */
.wpcf7-form .wpcf7-not-valid-tip {
color: red;
font-size: 14px;
}
.wpcf7-form .wpcf7-mail-sent-ok {
color: green;
font-size: 16px;
margin-bottom: 20px;
}
/* 横幅 */
.wpcf7 input[type="email"],
.wpcf7 input[type="text"],
.wpcf7 textarea
 {
  max-width: 100%;
  box-sizing:border-box;
}