/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready


/* Add your custom styles here */
/** ボデーはみ出たの隠す **/
body{
	overflow-x:hidden;
}
body.single,body.post-type-archive{
	background:#91C3E0;
}
.border-radius{
	border-radius:30px;
}

/** テキスト **/
strong{
	color:#DF3C34;
}

/*カスタムテーブル*/
.custum-table table{
	width:100%;
	border-collapse:collapse;
}

.custum-table th{
	display:none;
}

.custum-table td:first-child{
	width:25%;
	white-space:nowrap;
}

.custum-table td{
	padding:16px 20px;
	border-bottom:1px solid #ddd;
	text-align:left;
	vertical-align:top;
}

/* SP */
@media (max-width:767px){

	.custum-table table,
	.custum-table tbody,
	.custum-table tr{
		display:block;
		width:100%;
	}

	.custum-table tr{
		margin-bottom:5px;
	}

	.custum-table td,
	.custum-table td:first-child{
		display:block;
		width:100%;
		box-sizing:border-box;
		padding:10px;
		border-bottom:1px solid #ddd;
		white-space:normal;
	}
}

/* top-slider用 */
/* ========================================
   TOP SLIDER
   画像比率：1856 × 832
======================================== */

html body #top-slider,
html body .elementor #top-slider,
html body .elementor #top-slider.e-con,
html body .elementor .elementor-element#top-slider {
	position: relative !important;

	width: 100% !important;

	/* Elementorの高さ設定を上書き */
	height: auto !important;
	min-height: 0 !important;

	/* 元画像の比率を固定 */
	aspect-ratio: 1856 / 832 !important;

	/* 背景画像 */
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;

	/* 中央配置 */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	overflow: hidden !important;
}


/* ========================================
   Elementor内部
======================================== */

html body #top-slider > .e-con-inner {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}


/* ショートコードウィジェット */
#top-slider .elementor-widget-shortcode {
	width: 100% !important;
}


/* ========================================
   テキスト
   PC：1025px以上
======================================== */

#top-slider-text {
	position: relative;
	z-index: 2;

	width: 100%;
	max-width: 1200px;

	margin: 0 auto;
	padding: 0 40px;

	box-sizing: border-box;

	/* 中央揃え */
	text-align: center !important;

	/* 文字 */
	font-size: clamp(28px, 2.6vw, 46px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;

	color: #fff;

	/* 写真の上でも読みやすく */
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.35),
		0 0 12px rgba(0, 0, 0, 0.15);

	/* 切替アニメーション */
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}


/* ACFテキストから生成されるp */
#top-slider-text p {
	margin: 0 !important;
	padding: 0 !important;

	font: inherit;
	color: inherit;

	text-align: center !important;
}


/* 複数行の場合 */
#top-slider-text p + p {
	margin-top: 0.25em !important;
}


/* ========================================
   切替アニメーション
======================================== */

#top-slider-text.is-changing {
	opacity: 0;
	transform: translateY(8px);
}


/* ========================================
   TABLET
   768px ～ 1024px
======================================== */

@media screen and (max-width: 1024px) {

	#top-slider-text {
		max-width: 900px;

		padding-left: 30px;
		padding-right: 30px;

		font-size: clamp(22px, 3.2vw, 34px);
		line-height: 1.5;
		letter-spacing: 0.06em;
	}

}


/* ========================================
   SMARTPHONE
   767px以下
======================================== */

@media screen and (max-width: 767px) {

	#top-slider-text {
		max-width: 100%;

		padding-left: 15px;
		padding-right: 15px;

		/* スマホは小さめ */
		font-size: clamp(13px, 3.8vw, 18px);
		line-height: 1.5;
		letter-spacing: 0.04em;
	}

}

/* =========================================================
 * 資料添付フォーム / Contact Form 7
 * シンプル・モダン版
 * ========================================================= */

.nf-contact-form {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}


/* =========================================================
 * 各項目
 * ========================================================= */

.nf-contact-form .nf-form-row {
  display: block;
  width: 100%;
  margin: 0 0 34px;
}


/* =========================================================
 * ラベル
 * ========================================================= */

.nf-contact-form .nf-form-label {
  display: block;

  width: 100%;

  margin: 0 0 10px;
  padding: 0;

  background: none;

  color: #0f2f50;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}


/* =========================================================
 * 入力エリア
 * ========================================================= */

.nf-contact-form .nf-form-field,
.nf-contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}


/* =========================================================
 * テキスト / メール
 * ========================================================= */

.nf-contact-form input[type="text"],
.nf-contact-form input[type="email"] {
  display: block;

  width: 100% !important;
  max-width: none !important;

  height: 60px;

  margin: 0;
  padding: 0 20px;

  border: 1px solid #cfd5db;
  border-radius: 0;

  background: #fff;

  color: #222;

  font-size: 16px;
  line-height: 1.5;

  outline: none;

  box-sizing: border-box;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.nf-contact-form input[type="text"]:focus,
.nf-contact-form input[type="email"]:focus,
.nf-contact-form textarea:focus {
  border-color: #0f2f50;

  box-shadow: 0 0 0 2px rgba(15, 47, 80, 0.08);
}


/* =========================================================
 * ファイル選択
 * ========================================================= */

.nf-contact-form input[type="file"] {
  display: block;

  width: 100%;

  padding: 15px 18px;

  border: 1px solid #cfd5db;

  background: #fff;

  color: #555;

  font-size: 15px;

  box-sizing: border-box;
}


.nf-contact-form input[type="file"]::file-selector-button {
  margin-right: 16px;
  padding: 10px 18px;

  border: 0;

  background: #eef1f4;

  color: #0f2f50;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
}


.nf-contact-form input[type="file"]::file-selector-button:hover {
  background: #e1e6ea;
}

.nf-form-note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}
/* =========================================================
 * テキストエリア
 * ========================================================= */

.nf-contact-form textarea {
  display: block;

  width: 100% !important;

  height: 220px;
  min-height: 220px;

  margin: 0;
  padding: 18px 20px;

  border: 1px solid #cfd5db;
  border-radius: 0;

  background: #fff;

  color: #222;

  font-size: 16px;
  line-height: 1.8;

  outline: none;

  resize: vertical;

  box-sizing: border-box;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


/* =========================================================
 * 確認
 * ========================================================= */

.nf-contact-form .nf-confirm {
  width: 100%;

  margin: 42px 0 24px;

  padding: 0;

  color: #555;

  font-size: 14px;
  line-height: 1.6;

  text-align: center;
}


.nf-contact-form .nf-confirm label {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  cursor: pointer;
}


.nf-contact-form .nf-confirm input[type="checkbox"] {
  width: 18px;
  height: 18px;

  margin: 0;

  accent-color: #0f2f50;
}


/* =========================================================
 * 送信
 * ========================================================= */

.nf-contact-form .nf-submit {
  width: 100%;

  margin-top: 0;

  text-align: center;
}


.nf-contact-form input[type="submit"] {
  display: block;

  width: 100%;
  max-width: 520px;

  height: 62px;

  margin: 0 auto;
  padding: 0 30px;

  border: 0;

  background: #0f2f50;

  color: #fff;

  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;

  cursor: pointer;

  box-sizing: border-box;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.nf-contact-form input[type="submit"]:hover {
  background: #C1A190;

  transform: translateY(-1px);
}


/* =========================================================
 * エラー
 * ========================================================= */

.nf-contact-form .wpcf7-not-valid-tip {
  margin-top: 7px;

  color: #b44;

  font-size: 13px;
}


.nf-contact-form .wpcf7-response-output {
  margin: 25px 0 0 !important;
}


/* =========================================================
 * タブレット
 * ========================================================= */

@media screen and (max-width: 1024px) {

  .nf-contact-form {
    max-width: 100%;
  }

  .nf-contact-form .nf-form-row {
    margin-bottom: 30px;
  }

  .nf-contact-form input[type="text"],
  .nf-contact-form input[type="email"] {
    height: 56px;
  }

  .nf-contact-form textarea {
    height: 200px;
    min-height: 200px;
  }

}


/* =========================================================
 * スマホ
 * ========================================================= */

@media screen and (max-width: 767px) {

  .nf-contact-form .nf-form-row {
    margin-bottom: 24px;
  }


  .nf-contact-form .nf-form-label {
    margin-bottom: 8px;

    font-size: 14px;
  }


  .nf-contact-form input[type="text"],
  .nf-contact-form input[type="email"] {
    height: 52px;

    padding: 0 14px;

    font-size: 16px;
  }


  .nf-contact-form textarea {
    height: 160px;
    min-height: 160px;

    padding: 14px;

    font-size: 16px;
  }


  .nf-contact-form input[type="file"] {
    padding: 12px;

    font-size: 13px;
  }


  .nf-contact-form input[type="file"]::file-selector-button {
    padding: 9px 12px;

    font-size: 12px;
  }


  .nf-contact-form .nf-confirm {
    margin-top: 30px;

    font-size: 13px;

    text-align: left;
  }


  .nf-contact-form input[type="submit"] {
    height: 56px;

    max-width: none;

    font-size: 14px;
  }

}