@charset "utf-8";
/* =================================
    Base Styles (必須指定の取り込み)
   ================================= */
body {
  font-family:
    "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Helvetica Neue",
    Arial,
    "Yu Gothic",
    "Yu Gothic Medium",
    Meiryo,
    sans-serif;
  letter-spacing: normal;
  line-height: 1.5;
  margin: 0 auto;
  color: #333; /* デフォルトテキスト色 */
}

a {
  color: #000000;
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: #5957c4;
  text-decoration: underline;
}

a:active {
  color: #5957c4;
  opacity: 0.8;
}

img {
  /* image-rendering: auto;
  image-rendering: smooth;
  image-rendering: -webkit-optimize-contrast;
  width: 100%;
  height: auto;
  display: block; */
  max-width: 100%;
  height: auto;
  vertical-align: bottom; /* 画像の下にできる謎の隙間を消す */
}

/* =================================
root共通設定
================================= */
:root {
  --color-main: #5957c4;
  --color-bg-light: #f8f9ff;
  --color-text: #333;
  --color-white: #fff;

  /* clamp(最小, 推奨, 最大) でレスポンシブな数値を設定 */
  --font-size-h2: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
  --font-size-h3: clamp(1.125rem, 0.9rem + 1vw, 1.5rem);
  --font-size-h4: clamp(1rem, 0.925rem + 0.25vw, 1.125rem);
  --space-m: clamp(1.5rem, 1rem + 2vw, 3rem);
}

*, *::before, *::after {
  box-sizing: border-box;
}

@media screen and (min-width: 481px) {
  .sp-only{
    display: none;
  }
}

/* =================================
レイアウト：2カラム
================================= */
#wrapper{
  background-color: #F5F5FA;
}

.l-2col-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  overflow: hidden;
  margin-bottom: clamp(40px, 6.6vw, 80px) !important;
}

.contents {
  flex: 0 0 100%;
  min-width: 0;
}

/* --- 1200px以上で2カラム化 --- */
@media screen and (min-width: 1200px) {
  .contents {
    flex: 0 0 calc(60% - 20px);
    min-width: 0;
  }

  .form {
    flex: 0 0 calc(40% - 20px);
    position: sticky;
    top: 20px;
  }
}

@media screen and (max-width: 1199px) {
  .form{
    width:100%;
  }
}

/* =================================
ヘッダー
================================= */
#header {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 60;
  box-shadow: 0px 5px 10px #3d40c615;
}

/* #header .headerlogo img {
  width: 120px;
} */

#header .headerin {
	display: flex;
	align-items: center;
	justify-content: space-between;
  padding: 0 min(4%, 58px) !important;
  height: 100px;
	background: #fff;
}
#header .headerlogo {
	margin-right: 10px;
	flex-shrink: 0;
}

@media screen and (max-width: 480px) {
#header .headerin {
  height: 80px;
}

  #header .headerlogo img {
  width: 100px;
}
}

/* =================================
ページヘッダー
================================= */
.pageHeader {
  background: url(../images/bg_top_mv.png) center center / cover no-repeat;
  color: var(--color-white);
  /* padding: 132px 24px 32px 24px; */
  height: fit-content !important;
  padding-block: 152px 65px;
  text-align: center;
}

.pageHeader__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-size: var(--font-size-h2);
}

.pageHeader__title-sub-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.pageHeader__title-sub-text {
  white-space: nowrap;
  line-height: 1.4;
}

.sp-only {
  display: none;
}

@media screen and (max-width: 480px) {
  .sp-only {
    display: block;
  }
  .pageHeader {
    padding-block: 124px 59px;
  }

  .pageHeader__title {
   gap: 5px;
}
}

.pageHeader__title-main {
  display: block;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.pageHeader__title-main-sub {
  font-weight: normal;
}

.pageHeader__title-sub-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-weight: bold;
  font-size: var(--font-size-h2);
}

.pageHeader__tag {
  background: #fff;
  color: #1318b3;
  padding: 0 12px;
  font-size: 0.75em;
  font-weight: bold;
  white-space: nowrap;
}

@media screen and (min-width: 481px) {
  .pageHeader__title-sub-group {
    flex-direction: row;
    align-items: center;
  }
}

.introLead {
  background-color: #F5F5FA;
  padding: clamp(16px, 4vw, 24px) 20px 0;
  text-align: center;
}

.introLead__text {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
  font-weight: 500;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.125rem);
  color: var(--color-text);
  letter-spacing: 0.02em;
  margin-bottom: 32px;
}

@media screen and (max-width: 480px) {
  .introLead__text {
    text-align: left;
  }
}

/* =================================
選ばれる理由
================================= */
.reason--wrapper {
  margin-top: var(--space-m);
}

.reason--wrapper__title {
  background: var(--color-main);
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 50px;
  font-size: var(--font-size-h3);
  font-weight: 700;
}

.reason--wrapper__list {
  display: flex;
  gap: 40px;
  margin-top: 30px;
}

.reason--wrapper__item{
  flex:1;
}

.reason--wrapper__item-title {
  font-size: var(--font-size-h4);
  color: var(--color-main);
  font-weight: bold;
  margin: 15px 0 10px;
}

@media screen and (max-width: 480px) {
  .reason--wrapper__list {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reason--wrapper__item{
  display: flex;
  flex-direction: column;
  align-items: center;
}

}

/* 監修弁護士セクション */
.legalProfile--wrapper {
  margin-top: var(--space-m);
  border: 5px solid #E5E4EF;
  padding: 24px;
  border-radius: 10px;
  background: #ffffff;
}

.legalProfile--wrapper__title {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: var(--font-size-h3);
  position:relative;
}

.legalProfile--wrapper__title::after {
    position: absolute;
    border-bottom: 3px solid #5957c4;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    content: '';
}

.legalProfile--wrapper__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media screen and (max-width: 480px) {
  .legalProfile--wrapper__content {
  align-items: center;
}
.legalProfile--wrapper {
  padding: 16px;
}
}

@media screen and (min-width: 481px) {
  .legalProfile--wrapper__content {
    flex-direction: row;
  }
  .legalProfile--wrapper__img {
    flex: 0 0 200px;
  }
}

.legalProfile--wrapper__name {
  font-weight: bold;
  color: var(--color-main);
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.legalProfile--wrapper__name span {
  font-size: 0.8rem;
}

/* ユーティリティ */
@media screen and (min-width: 481px) {
  .u-sp-only { display: none; }
}

/* =================================
スライド部分
================================= */
.slide--wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 30px;
}

.slide--wrapper .swiper-pagination {
  bottom: 5px !important;
}


.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
  max-width: min(90%, 257px);
  height: auto;
  display: block;
}


.swiper-button-prev,
.swiper-button-next {
  color: #ffffff;
  background: #5957c4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 18px;
  font-weight: bold;
}

.swiper-button-prev:active,
.swiper-button-next:active,
.swiper-pagination-bullet:active {
  opacity: 0.8;
}

.swiper-pagination-bullet-active {
  background: var(--color-main);
}

/* =================================
フォーム
================================= */
.form__inner{
  background: #ffffff;
  border-radius: 10px;
  /* box-shadow: 0px 10px 10px -6px rgba(89, 87, 196, 0.3); */
}

.form--inner__title{
  font-size: var(--font-size-h4);
  padding: 32px 32px 8px 32px;
  text-align: center;
  font-weight: 700;
}

.form--inner__cap{
  font-size: 14px;
  padding: 0 24px;
  margin: 0 auto;
  text-align: center;
}

iframe {
    height: 100% !important;
    min-height: 1050px !important;
}