@charset "UTF-8";
/* --------------------------------------------------
    COMMON
-------------------------------------------------- */
html { overflow-x: hidden; }
body, p { line-height: 1.8rem !important;   overflow-x: hidden;}
.border { border-width: 2px !important; }
.bg-lightblue {	background: #EAF2F4; }

/* 半円背景各種
-------------------------------------------------- */
/* 半月（背景白） */
.half-white:after { background-color: #fff; }
/* 半月（背景薄青） */
.half-lightblue:after { background: #EAF2F4; }
/* 半月（背景緑） */
.half-info:after { background: #09945a; }
/* 共通 */
.half {
    width: 120%;
    height: 150px;
    border-top-left-radius: 50% 120px;
    border-top-right-radius: 50% 120px;
    position: absolute;
    top: 0;
    left: -10%;   
}
.half:after {
	content: ' ';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;    
}
/* 上書き設定 */
.bg-info {
	--bs-bg-opacity: 1;
	--bs-info-rgb: 9, 153, 90;
	background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}

.bg-info2 {
	--bs-bg-opacity: 1;
	--bs-info-rgb: 255, 255, 255;
	background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}
/* 半月（背景緑） */
.half-info2:after { background: #ffffff; }

a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
	opacity: 0.5;
}
  /* 見出し青丸
-------------------------------------------------- */
.dot {
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}
.dot:before, .dot:after {
	font-family: "Font Awesome 5 Free";/*忘れずに*/
	content: "\f111";/*アイコンのユニコード*/
	font-size: 1.2rem;/*サイズ*/
	color: #a1ceff;
	padding: 0 10px;
	vertical-align: middle;
}
/* --------------------------------------------------
    header
-------------------------------------------------- */
header .container-fluid {
	height: 100vh;
	width: 100%;
	background: url(../img/tx_1400x700_3.png);
	background-attachment: fixed;
	background-size: cover;
	background-position: 50% 100%;
}
/*    グローバルナビ
-------------------------------------------------- */
.breadcrumb {
	background: transparent;
}
.breadcrumb-item + .breadcrumb-item::before {
	content: '>';
	color: #fff;
}
/* --------------------------------------------------
    トップページ
-------------------------------------------------- */
.balloon {
	width: 130px;
	height: 130px;
	top: -50px;
	z-index: 10;
	left: -20px;
	font-size: 15px;
	background: #09945a;
}
.balloon-s {
	width: 110px;
	height: 110px;
	top: -20px;
	z-index: 10;
	left: -20px;
	font-size: 14px;
	background: #09945a;
}
.balloon:before, .balloon-s:before {
	content: "";
	position: absolute;
	bottom: -5px;
	right: -5px;
	margin-top: -15px;
	border: 10px solid transparent;
	border-left: 30px solid #0b9935;
	z-index: 0;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

table tr:last-child {
	border-bottom: 1px solid #dee2e6;
}
table tr:nth-child(even) {
	background-color: #F9F9F9;
}
table tr:nth-child(odd) {
	background-color: #E4E9EF;
}
/* --------------------------------------------------
    サンプルページ
-------------------------------------------------- */
.season {
	width: 70px;
	height: 70px;
	left: 10px;
	padding: 0.34em;
}
.season div {
	display: block;
	width: 100%;
	height: 100%;
	border: 2.4px dotted #fff;
}
.title {
	border-bottom: 2px solid #0f9e5b;
}
.stripe {
	background: repeating-linear-gradient(90deg, #fff 0, #fff 40%, #17a2b8 40%, #17a2b8 60%, #fff 60%, #fff 70%);
}

/* -- 追加分 -- */
.pagetop
    {
    position: fixed;
    bottom: 16px;
    right: 16px;
    }
 
.pagetop a
    {
    display: block;
    text-decoration: none;
    }
 
.pagetop:hover
{
    opacity: 0.85 ;
}

/* table caption */
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	border: 3px solid #df7003;	/*枠線の幅、線種、色*/
	color: #df7003;			/*文字色*/
	background: #fff8d5;	/*背景色*/
	font-size: 1.2em;		/*文字サイズ。親要素の1.2倍。*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/* table block */
.ta1 {
	border-top: 1px solid #ccc;
	width: 100%;
	margin: 0 auto 30px;
}

/* tr row */
.ta1 tr {
	border-bottom: 1px solid #ccc;
}

/* th left, td right */
.ta1 th, .ta1 td {
	padding: 10px 5px;
	word-break: break-all;
}

/* th left only */
.ta1 th {
	width: 30%;
	text-align: left;
}


/* フェードインテキスト */
/* 共通スタイル */
.fade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: white;
  text-align: center;
}

.trigger-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.trigger-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.trigger-btn:active {
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .fade-title {
    font-size: 2.2rem;
  }
  
  .fade-description {
    font-size: 2.2rem;
  }
}

/* 固有のスタイル */
.fade-text {
  margin-bottom: 30px;
}

.fade-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

.fade-description {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

/* フェードイン状態 */
.fade-title.fade-in,
.fade-description.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 2);
}

.fade-description.fade-in {
  transition-delay: 1.2s;
}