@charset "utf-8";

/* ----------------------------------------
	共通 css
---------------------------------------- */

/* fonts */
@font-face {
  font-family: "ZenKakuGothicNew";
  src: url("../fonts/ZenKakuGothicNew-Light.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "ZenKakuGothicNew";
  src: url("../fonts/ZenKakuGothicNew-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "ZenKakuGothicNew";
  src: url("../fonts/ZenKakuGothicNew-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "ZenKakuGothicNew";
  src: url("../fonts/ZenKakuGothicNew-Bold.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "ZenKakuGothicNew";
  src: url("../fonts/ZenKakuGothicNew-Black.ttf") format("truetype");
  font-weight: 900;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
}

/* Font Awesome */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fontawesome/webfonts/fa-solid-900.woff2") format("woff2");
}

p {
  color: #091429;
  font-family: "ZenKakuGothicNew", sans-serif;
  letter-spacing: 0.12em;
  line-height: 1.8em;
}

figcaption {
  color: #091429;
  font-family: "ZenKakuGothicNew", sans-serif;
  letter-spacing: 0.12em;
  line-height: 1.8em;
}

/* h1-h4 */
h1,
h2,
h3,
h4 {
  font-family: "ZenKakuGothicNew", sans-serif;
  color: #091429;
  letter-spacing: 0.12em;
}

/* 画像サイズ */
img {
  max-width: 100%;
}

/* リンク */
a {
  color: #091429;
  font-family: "ZenKakuGothicNew", sans-serif;
  letter-spacing: 0.12rem;
}

/* リスト */
ul,
li {
  color: #091429;
  font-family: "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.12em;
}

/* table */
table th,
table td {
  color: #091429;
  ffont-family: "ZenKakuGothicNew", sans-serif;
  letter-spacing: 0.12em;
  line-height: 1.8em;
}

dl dt,
dl dd {
  color: #091429;
  font-family: "ZenKakuGothicNew", sans-serif;
  letter-spacing: 0.12em;
  line-height: 1.8em;
}

address {
  color: #091429;
  font-family: "ZenKakuGothicNew", sans-serif;
  letter-spacing: 0.12em;
  line-height: 1.8em;
}

label {
  font-family: "ZenKakuGothicNew", sans-serif;
  letter-spacing: 0.12em;
  line-height: 1.5em;
}

/* bottom */
.btn {
  max-width: 280px;
  margin: 0 auto;
  padding: 1rem;
  background-color: #eaf0fa;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn {
  color: #3067d1;
  font-weight: 700;
}

.btn:hover .fa-arrow-right {
  transform: scale(1.1);
}

.btn-box p {
  color: #3067d1;
  font-weight: 700;
  transition: transform 0.3s ease;
}

.fa-arrow-right {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #3067d1;
  color: #fff;
  text-align:center;
  line-height: 30px;
  transition: transform 0.3s ease;
}

.btn-box:hover p {
  transform: scale(1.1);
}

.btn-box:hover i {
  transform: scale(1.1);
}

/* .fa-arrow-right {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #3067d1;
  color: #fff;
  text-align: center;
  line-height: 30px;
  transition: transform 0.3s ease;
} */

/* パンくずリスト */
.breadcrumb-area {
  position: absolute;
  top: 3.5%;
  left: 52%;
  color: #bac7cc;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

/* h1 */
.h1-wrapper {
	position: relative;
	padding-top: 3rem;
	margin-bottom: 8rem;
}

.h1-ttl-container {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background-color: #EAF0FA;
	width: 50%;
	height: 90%;
	border-radius: 0 20px 20px 0;
}

.h1-ttl {
	position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.h1-ttl::before {
	position: absolute;
    content: '';
    width: 40px;
    left: 0;
    top: -1rem;
    border-bottom: 5px solid #f9454e;
}

.h1-ttl::after {
	position: absolute;
    content: '';
    width: 40px;
    left: 40px;
    top: -1rem;
    border-bottom: 5px solid #3067d1;
}

.h1-wrapper p {
	color: #bac7cc;
	font-weight: 700;
}

h1 {
	font-size: 2rem;
	font-weight: 700;
}

.h1-img {
  text-align: right;
  overflow: hidden;
}

.h1-img img {
  width: 65vw;
  height: auto;
  max-width: none;
  border-radius: 20px 0 0 20px;
}

/* h2 */
h2 {
  position: relative;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.5em 0.7em;
  border-left: 5px solid #3067d1;
  margin-bottom: 1rem;
}

h2::after {
  content: attr(data-en);
  position: absolute;
  top: 0;
  right: 0;
  color: #eaf0fa;
  font-family: "Montserrat", sans-serif;
  font-size: 2.5rem;
}

.h2-line {
  border-bottom: 1px solid #bac7cc;
  margin-bottom: 4rem;
}

/* 画面幅1180px以下 */
@media screen and (max-width: 1180px) {
  /* h1 */
  .h1-wrapper {
    padding-top: 2.5rem;
  }

  h1 {
    font-size: 1.7rem;
  }

  .h1-wrapper p {
    font-size: 0.85rem;
  }

  .h1-wrapper::before {
    font-size: 12rem;
    top: 31%;
  }

  .contact-form-wrapper {
    margin: 8rem 15%;
  }

  .wpcf7 {
    margin: 0 8% 8rem 8%;
  }
}

/* 画面幅1024px以下 */
@media screen and (max-width: 1024px) {
  /* h1 */
  h1 {
    font-size: 1.5rem;
  }
}

/* パソコン・スマホ表示切り替え */
.for-pc { display:block; }
.for-sp { display:none; }

@media only screen and (max-width:767px) {
  .for-pc { display:none; }
  .for-sp { display:block; }
}

/* 画面幅767px以下：スマホ対応 */
@media screen and (max-width: 767px) {
  /* h1 */
  .h1-wrapper {
    padding-top: 2rem;
    margin-bottom: 4rem;
  }

  .h1-ttl-container {
    border-radius: 0 15px 15px 0;
  }

  .h1-ttl {
    left: 6%;
  }

  h1 {
    font-size: 1.3rem;
  }

  .h1-img img {
    border-radius: 15px 0 0 15px;
  }

  .h1-wrapper::before {
    font-size: 11rem;
    top: 28%;
  }

  .h1-content {
    height: 30vh;
  }

  /* .h1-ttl {
    margin: 0 10% 2rem 10%;
  } */

  .btn-circle-wrapper {
    margin-top: 4rem;
  }

  h2 {
    font-size: 1.1rem;
  }

  h2::after {
    font-size: 2rem;
  }

  .wpcf7 {
    margin: 0 8% 4rem 8%;
  }

  #contact-form dl {
    display: block;
  }

  #contact-form dt {
    width: 100%;
    margin-bottom: 1rem;
  }

  #contact-form dd {
    width: 100%;
  }
}

/* 画面幅575px以下：スマホ対応 */
@media screen and (max-width: 575px) {
  .h1-wrapper {
    /* padding-top: 2rem; */
  }

  .h1-wrapper::before {
    font-size: 9rem;
    top: 33%;
  }

  .h1-content {
    height: 25vh;
  }

  .h1-ttl {
    left: 1rem;
  }

  h1 {
    font-size: 1rem;
  }

  /* .h1-ttl {
    margin: 0 1rem 2rem 1rem;
  } */

  .h1-ttl h1 {
    font-size: 1.2rem;
  }

  .h1-content-ttl {
    font-size: 1.2rem;
    text-align: left;
    margin-bottom: 1rem;
  }

  .h1-img img {
    width: 60vw;
  }

  /* h2 {
    margin: 4rem 1rem 4rem 1rem;
  } */

  h2::after {
    top: 15%;
    font-size: 1.2rem;
    line-height: 1.5;
  }

  .wpcf7 {
    margin: 0 1rem 4rem 1rem;
  }
}

/* * {
  outline: 2px solid blue;
} */