﻿@charset "utf-8";

body,p,td,li,h6 {
	font-family: "BIZ UDPGothic", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight: 400;
	font-size:1rem;
	line-height:1.8em;
	overflow-x: hidden;

}
h1,h2,h3,h4,.h1,.h2,.h3,.h4,.h5,.h6 {
	font-family: "BIZ UDPGothic", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight:800;
	line-height:1.5em;
	color: #660066;
}

.font-g {
	font-family: "BIZ UDPGothic", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

.font-m {
	font-family: "BIZ UDPMincho", "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",source-han-serif-japanese,"游明朝","Yu Mincho","游明朝体",YuMincho,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
}

.bold {
	font-weight:800;
}

.container {
	max-width: 1164px;
}

p {
	font-size:1.2rem;
	padding: 0px 20px;
}

/* 文字サイズ
==================================================== */
/*h1 { font-size:1.5rem; }

@media (min-width: 576px) {
	h1 { font-size:1.8rem;letter-spacing:2px; }
}
@media (min-width: 768px) {
	h1 { font-size:1.8rem; }
}
@media (min-width: 1200px) {
	h1 { font-size:2rem;letter-spacing:2px; }
}
@media (min-width: 1400px) {
	h1 { font-size:2.2rem;letter-spacing:2px; }
}

@media (min-width: 768px) and (max-width: 1050.98px) {
	.top_square .top_text { font-size:0.8rem; }
}
@media (max-width: 767.98px) {
	.top_text { font-size:1rem; }
}

*/

/* マージン、パディング
==================================================== */
.mt-40 { margin-top:40px; }
.mb-40 { margin-bottom:40px; }
.pt-40 { padding-top:40px; }
.pb-40 { padding-bottom:40px; }
.mt-80 { margin-top:80px; }
.mb-80 { margin-bottom:80px; }
.pt-80 { padding-top:80px; }
.pb-80 { padding-bottom:80px; }
.ps-80 { padding-left:80px; }
.pe-80 { padding-right:80px; }
.mt-110 { margin-top:110px; }
.mb-110 { margin-bottom:110px; }
.pt-110 { padding-top:110px; }
.pb-110 { padding-bottom:110px; }
.ps-110 { padding-left: 110px; }

.my-80 { margin-top:80px; margin-bottom:80px; }
.my-110 { margin-top:110px; margin-bottom:110px; }
.py-80 { padding-top:80px; padding-bottom:80px; }
.px-80 { padding-left:80px; padding-right:80px; }
.py-110 { padding-top:110px; padding-bottom:110px; }

@media (max-width: 767.98px) {
	.mt-40, .mt-80, .mt-110 { margin-top:30px; }
	.mb-40, .mb-80, .mb-110 { margin-bottom:30px; }
	.pt-40, .pt-80, .pt-110 { padding-top:30px; }
	.pb-40, .pb-80, .pb-110 { padding-bottom:30px; }
	.ps-80, .ps-110 { padding-left:30px; }
	.pe-80, .pe-110 { padding-right:30px; }
	.my-80, .my-110 { margin-top:30px; margin-bottom:30px; }
	.py-80, .py-110 { padding-top:30px; padding-bottom:30px; }
	.mx-80 { margin-left:30px; margin-right:30px; }
}

.lh-1 { line-height: 1em; }
.lh-2 { line-height: 2em; }
.lh-3 { line-height: 3em; }




/* リンク
==================================================== */
a {
	color: #666;
}
.nav-link a {
	color: #fff;
	text-decoration:none;
}

.nav-item a {
	color: #fff;
	text-decoration:none;
}

.nav-item a {
	color: #fff;
	text-decoration:none;
}
footer a {
	color: #fff;
	text-decoration:none;
}

.navarea a { 
	color: #fff;
	text-decoration:none;
}

/* ナビバー
==================================================== */
@media (max-width: 767.98px) {
	body { padding-top:50px; }
}
.navbar-brand {
	padding:0;
	margin:0;
	padding-left: 15px;
}

.navbar-toggler { 
	position:relative;
	border:none!important;
	padding-bottom:0;
}

.navbar-light .navbar-toggler .navbar-toggler-icon {
	position:relative;
	margin-top:-0px;
}

.navbar-nav .nav-link {
	padding-left: 15px;
}

.navbar-light .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M6 6L 24 24M24 6L6 24'/%3E%3C/svg%3E");
}

.head-color-item {
	background-color: #fff;
	padding: 3px 15px;
	border-radius: 30px;
	font-weight:bold
}

.navarea a.head-color-item {
	color: #660066 !important;

}

.navarea a:hover.head-color-item {
	opacity: 0.8;

}
	
.navbar {
	padding: 0px;	
}
	
	/* 背景を白にする */
.navbar-toggler {
	background-color: #ffffff;
	padding: 10px;
	border-radius: 0px;
}

/* 3本線の色を #660066 に変更 */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23660066' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

	
@media (max-width: 818px) {
	.head-color-item {
	background-color: #fff;
	padding: 3px 10px;
	font-size:12px;
	border-radius: 30px;
	font-weight:bold
	}
}
		
		
/* ボタンのスタイル */
.btn_bokin a {
	position: relative;
	display: block;
	width: 240px;
	padding: 15px 0;
	background-color: #fff;
	border: 2px solid #660066;
	border-radius: 8px;
	color: #660066;
	text-decoration: none;
	text-align: center;
}
		
.btn_bokin a:hover {

	background-color: #660066;
	border: 2px solid #fff;
	border-radius: 8px;
	color: #fff;

}
		
/* アイコンのスタイル */
.btn-arrow-bottom a::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 27px;
	width: 9px;
	height: 9px;
	margin: auto;
	border-top: 2px solid #660066;
	border-right: 2px solid #660066;
	transform: translateY(-2px) rotate(135deg);
	box-sizing: border-box;
}
		

/* ボタンのスタイル */
.btn_shuisho a {
	position: relative;
	display: block;
	width: 280px;
	padding: 15px 0;
	background-color: #660066;
	border-radius: 8px;
	color: #fff;
	text-decoration: none;
	text-align: center;
}
		
.btn_shuisho a:hover {

	background-color: #fff;
	border: 2px solid #660066;
	border-radius: 8px;
	color: #660066;

}

/* アイコンのスタイル */
.btn-arrow-right a::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 27px;
	width: 9px;
	height: 9px;
	margin: auto;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	box-sizing: border-box;
}
		
		
.koumoku_title {
	padding: 0.25em 0.5em;/*上下 左右の余白*/
	color: #494949;/*文字色*/
	background: transparent;/*背景透明に*/
	border-left: solid 5px #660066;/*左線*/
}


.card-body {
	padding: 5px;
}
.card {
	border: 0px;
}
		
.card-title {
	font-weight:bold;
	font-size: 17px;
}
		
		
.card-img, .card-img-top {
border-radius: 5px;
}				

		
		
/* よくあるご質問
==================================================== */		
		
.sectionTitle {
    text-align: center;
}
.sectionTitle__span--en {
    display: block;
    font-size: clamp(0.875rem, 0.569rem + 1.31vw, 1.5rem);
}
.sectionTitle__span--ja {
    display: block;
    font-size: clamp(1.5rem, 1.01rem + 2.09vw, 2.5rem);
}
.h3::before {
    content: '―';
    margin-right: 0.3em;
}

.btn-outline-primary {
    --bs-btn-color:#660066;
    --bs-btn-hover-bg:#660066;
    --bs-btn-border-color:#660066;
    --bs-btn-hover-border-color:#660066;
    --bs-btn-active-bg:#7b187b;
    --bs-btn-active-border-color:#1c669a;
}
.btn-lg {
    --bs-btn-font-size:1.125rem;
    --bs-btn-padding-y:0.7rem;
		}
		
		
.accordion-button:not(.collapsed) {
color: #660066;
background-color: #e8d4ee;
		}
		
		

/* Q&A */
@media (max-width: 575.98px) {
    #accFaq {
        margin-right: calc(var(--bs-gutter-x) * -1.5);
        margin-left: calc(var(--bs-gutter-x) * -1.5);
    }
}
		

/* コピーライト
==================================================== */
#copyright {
	font-size:13px;
	padding-bottom:10px;
}





/* トップへ戻る
==================================================== */
a.page-top {
	position:fixed;
	bottom:60px;
	right:10px;
	opacity:0.5;
	color:#0064f2;
	display:block;
}
a.page-top:hover {
	opacity:0.7;
}
		
		
/* ローディング
==================================================== */		
#loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

/* 扉共通 */
.door {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #660066;
  transition: transform 1.6s cubic-bezier(.4,0,.2,1);
}

/* 左扉：中央から左へ */
.door-left {
  left: 0;
  transform: translateX(0);
}

/* 右扉：中央から右へ */
.door-right {
  right: 0;
  transform: translateX(0);
}

/* 開く */
#loading.open .door-left {
  transform: translateX(-100%);
}

#loading.open .door-right {
  transform: translateX(100%);
}

/* テキスト */
.loading-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;   /* ← これが必要 */
  align-items: center;
  justify-content: center;

  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: .12em;
			text-align: center;
			line-height: 150%;

  transition: opacity .5s ease;
}

#loading.open .loading-text {
  opacity: 0;
}

/* 共通：1行ずつ・左から表示 */
.loading-text span {
  display: block;
  opacity: 0;
  transform: translateX(-24px);
  animation: fadeInLeft 0.8s ease forwards;
  animation-fill-mode: both;
}

/* メイン行：サイズ統一 */
.loading-text .line1,
.loading-text .line2,
.loading-text .line3 {
  font-size: 2.2rem;      /* ← 全部同じ */
  letter-spacing: .15em;
}

/* 行ごとの表示タイミング */
.loading-text .line1 { animation-delay: 0.2s; }
.loading-text .line2 { animation-delay: 0.6s; }
.loading-text .line3 { animation-delay: 1.0s; }

/* サブ行：小さめ */
.loading-text .sub1 {
  animation-delay: 1.4s;
  font-size: 0.9rem;
  letter-spacing: .05em;
  margin-top: .5em;
}
/* 扉が開くときに一緒に消える */
#loading.open .loading-text span {
  opacity: 0;
  transition: opacity .4s ease;
}

/* 左 → 右 */
@keyframes fadeInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
		
		
/* スライド調整
==================================================== */
/* ==============================
   ズームイン・スライド
================================ */

/* スライドは常に表示（フェード無効） */
.carousel-item {
  opacity: 1;
}

/* 初期状態：少し縮小 */
.carousel-item img {
  transform: scale(1);
  transition: transform 6s ease;
}

/* 表示中：ゆっくりズームイン */
.carousel-item.active img {
  transform: scale(1.15);
}

/* Bootstrap の横移動を抑制 */
.carousel-item-next,
.carousel-item-prev {
  transform: translateX(0);
}
		
		
		img, .carousel-inner, .carousel-item img, .card-img-top {
  max-width: 100%;
  height: auto;
}
.carousel-wrap, .carousel-inner, .carousel-item {
  width: 100%;
}


/* ==============================
   スライド＋キャッチ全体
================================ */
.carousel-wrap {
  position: relative;
  padding-bottom: 180px; /* 紫帯の高さ分 */
}

/* ==============================
   キャッチエリア
================================ */
.hero-catch {
  position: absolute;
  bottom: 0;         /* スライド下端に合わせる */
  left: 10%;
  width: 80%;

  background: #660066;
  color: #fff;
  text-align: center;

  padding: 2.2rem 1.5rem;
  z-index: 10;

  /* 上方向に10%被せる */
  transform: translateY(-10%);
}

.hero-catch::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow:
    -28px 0 44px rgba(0, 0, 0, 0.18),
     28px 0 44px rgba(0, 0, 0, 0.18);
  z-index: -1;
  pointer-events: none;
}

/* メインコピー */
.catch-main {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: .6rem;
}

/* サブコピー */
.catch-sub {
  font-size: 1rem;
  letter-spacing: .08em;
  opacity: .9;
}

/* ==============================
   下のコンテンツとの間隔
================================ */
.after-hero {
  margin-top: 0px; /* 常に80pxの間隔 */
}

/* ==============================
   レスポンシブ調整
================================ */
@media (max-width: 768px) {
  .hero-catch {
    left: 5%;
				width: 90%;
				bottom: 30px;
    padding: 1.5rem 1rem;
    transform: translateY(-10%);
  }

  .catch-main {
    font-size: 1.2rem;
  }

  .catch-sub {
    font-size: 0.85rem;
  }

  .after-hero {
    margin-top: 0px; /* 行間は固定 */
  }
}

@media (max-width: 480px) {
  .hero-catch {
    left: 5%;
    width: 90%;
    padding: 1.2rem 0.8rem;
    transform: translateY(-10%);
  }

  .catch-main {
    font-size: 1rem;
  }

  .catch-sub {
    font-size: 0.75rem;
  }

  .after-hero {
    margin-top: 80px; /* 行間は固定 */
  }
}

		
/* メディアクエリ
==================================================== */
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {}

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {}

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) {}


// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {}

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) {}

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) {}

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) {}
