/* ====================================
   基本設定と変数
   ==================================== */
:root {
    --main-clr: #1e4ba0;
    --sub-clr: #f4f6f9;
    --accent-clr: #F7BB00;
    --gray-clr: #eaeaea;
    --member-clr: #D90000;
    --content-inner: min(100%, 1170px);
    --txt-cmn: var(--size-15-17);
    --txt-cmn-s: var(--size-14-16);
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
	background-color: none;
	figure, img {
		margin: initial;
        background-color: initial;
        border: initial;
	}
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: $text-dark;
    background-color: $bg-light;
	.p-breadcrumb {
		display: none;
	}
}
.l-main {
/* 	background: #f6f6f6; */
}

/* ====================================
   メインコンテンツ (Main Container)
   ==================================== */

.page-title {
	width: min(100%, 1200px);
    text-align: center;
    padding: var(--size-15-30) 0 ;
	margin: 0 auto;
    font-size: var(--size-20-30);
	background: #efefef;
	border-top: 1px solid #ddd;
	span {
		position: relative;
		padding-left: calc(var(--size-30-40) + 6px);
		line-height: 1.5;
		&:before {
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			content: "\e853";
			font-family: var(--google-icon);
			font-size: var(--size-30-40);
		}
		@media (max-width: 767px) {
			padding-left:0;
			&:before {
				display: block;
				height: 25px;
				position: relative;
			}
		}
	}
}

.content_inner {
	p, li, td {
		font-size: var(--szie-15-17);
	}
}

.section-area {
	padding: clamp(40px, 30.909px + 2.424vw, 60px) var(--size-10-15);
	margin: 0 auto;
	width: var(--content-inner);
	    /* 共通セクションタイトル */
    .section-title {
        position: relative;
        /* 		display: inline-block; */
        text-align: center;
        margin: 0 auto var(--size-50-70);
        font-size: var(--size-20-40);
        font-weight: 700;
		line-height: 1.5;

        /* セレクタ展開: .section-title .small-text */
        .small-text {
            display: block;
            font-size: 0.6em;
        }

        &:before {
            content: "";
            width: 100px;
            /* 線の長さ */
            height: 5px;
            /* 線の太さ */
            bottom: -15px;
            /* 線の縦の開始位置 */
            left: 50%;
            border-radius: 50vh;
            transform: translateX(-50%);
            position: absolute;
            background: var(--main-clr);
        }
    }
	&.login-area {
		width: 100%;
		background: var(--main-clr);
		text-align:center;
		.login-inner {
			display: flex;
			flex-direction: column;
			gap: var(--size-10-15);
			width: min(100%, 960px);
			margin: 0 auto;
			padding: var(--size-15-30);
			background: #fff;
			border-radius: var(--size-10-15);
			.login-title {
				font-size: var(--size-20-25);
			}
			.login-lead {
				text-align: left;
			}
		}
		.login-block {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 20px var(--size-20-40);
			margin: 10px auto;
			.login-block_inner {
				display: flex;
				flex-direction: column;
				align-items: anchor-center;
				gap: 15px;
				.card-image {
					width: min(100%, 280px);
					a {
						display: block;
						position: relative;
						&:before {
							position: absolute;
							top: 0;
							right: 0;
							content: "\e8ff";
							font-family: var(--google-icon);
							background: #222;
							border-left: 2px solid #fff;
							border-bottom: 2px solid #fff;
							padding: 2px;
							font-size: 20px;
							color: #fff;
							width: 26px;
							height: 26px;
							:hover {
								background: #666;
							}
						}
						img {
							width: 100%;
						}
					}
				}
			}
		}
	}
}



/* 共通コンテンツボタン */
.button-area {
	text-align: center;
	padding: var(--size-20-30) 0 0;

	.button-con {
		background-color: var(--sub-clr);
		border: 2px solid var(--main-clr);
		color: var(--main-clr);
		font-size: 1.2rem;
		padding: 15px 50px;
		border-radius: 50vh;
		width: fit-content;
		font-weight: bold;

		&:hover {
			opacity: .8;
		}

		a {
			color: var(--main-clr);
		}
	}
}

/* ====================================
   新着情報 (News Section)
   ==================================== */
.news-content-area {
	display: flex;
	flex-direction: column;
	gap: var(--size-15-20);
	width: min(100%, 960px);
	margin: 0 auto;
	.news-list-container {
		list-style: none;
		padding: 0;
		margin: 0;
		.news-item {
			display: flex;
			align-items: center;
			padding: 10px 0;
			border-bottom: 1px solid #ddd;
			/* 各記事の下線 */
			font-size: var(--size-14-16);
			align-items: stretch;
			br {
				display: none;
			}

			&.last-item {
				border-bottom: none;
				/* 最後の下線は消す */
			}

			.date {
				flex-shrink: 0;
				width: 115px;
				font-weight: 500;
			}

			.tag {
				flex-shrink: 0;
				margin-right: 15px;
				padding: 2px 8px;
				border-radius: 3px;
				color: white;
				font-size: 0.9em;
				font-weight: bold;

				/* タグの色付け */
				&.pickup {
					background-color: red;
				}

				&.seminar {
					background-color: #79a6d0;
				}

				&.meeting {
					background-color: #a4c979;
				}

				&.press {
					background-color: #e5004f;
				}
			}

			.news-text {
				flex-grow: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				/* はみ出しを三点リーダーに */
			}

			/* PICKUPアイテム */
			&.pickup-item {
				padding: 15px 0;
				margin: -10px 0 0 0;
				/* 領域を広げる */
				border-bottom: 2px solid #ddd;
				font-size: 1.1em;
			}
		}
	}
	/* お知らせ一覧ボタン */
	.news-button {
		margin-left: auto;
		background-color: white;
		border: 2px solid #666;
		color: #aaa;
		padding: 8px 30px;
		border-radius: 30px;
		font-weight: 500;
		cursor: pointer;
		&:hover {
			background-color: #eee;
		}
	}

}

/* ====================================
   ログインガイド (Login Guide)
   ==================================== */
.login-guide {
    p {
        margin-bottom: 20px;
        text-align: center;
    }

    .login-content {
        background-color: #f7f7f7;
        border-radius: 8px;
        padding: 30px;
    }

    .login-form-area {
        display: flex;
        gap: 30px;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;

        @media (max-width: 600px) {
            flex-direction: column;
            align-items: center;
        }
    }

    .login-form-box {
        background-color: #eaeaea;
        border: 1px solid #ccc;
        padding: 20px;
        border-radius: 6px;
        flex: 1 1 300px;
        max-width: 400px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        @media (max-width: 600px) {
            width: 100%;
            max-width: none;
        }

        .login-box-title {
            text-align: center;
            font-weight: bold;
            font-size: 1.1em;
            margin-bottom: 15px;
        }
		.card-image {
			display: block;
			
		}

    }
}

/* ====================================
   テーブル共通 (Data Table)
   ==================================== */
.table-container {
    overflow-x: auto;
}

.table-subtitle {
	display: block;
	font-size: var(--size-18-24);
	text-align: center;
	&:before {
		content:"-";
		padding-right:.7rem;
	}
	&:after {
		content:"-";
		padding-left:.7rem;
	}
}

.data-table {
    width: max(600px, 100%);
    border-collapse: collapse;
    font-size: 0.9em;
	background: #fff;
	border: 1px solid #ddd;

    th, td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: center;
        line-height: 1.5;
		font-size: var(--size-14-16);

        @media (max-width: 600px) {
            padding: 8px;
        }
		&.left {
			text-align: left;
		}
    }
	td {
		.supp_txt {
			display: block;
			font-size: .96em;
			margin-left: 1em;
			text-indent: -1em;
			&:before {
				content:"※";
			}
			&:first-child {
				margin-top: .5em;
			}
		}
	}

    thead th {
        background-color: #aaa;
        color: #fff;
        font-weight: 666;
        white-space: nowrap;
		&.t_service {
			width: 35%;
		}
		&.t_mem {
			width: 15%;
		}
		&.t_non {
			width: 15%;
		}
		&.t_cond {
			width: 35%;
		}
    }
    tbody th {
        background-color: #efefef;
        font-weight: bold;
        white-space: nowrap;
    }

    tfoot {
        .footer-title, .footer-content {
            background-color: #e9ecef;
        }
        .footer-title {
            font-weight: bold;
        }
        .footer-content {
            font-style: italic;
            text-align: left;
            font-size: 0.95em;
        }
    }
}
.table-subtitle + .data-table {
	margin-top: var(--size-15-20);
}
.table-container + .table-container {
	margin-top: var(--size-20-30);
}
.table-supp {
	list-style: none;
	margin-top: var(--size-10-15);
	font-size: var(--size-13-15);
	
}

/*
|--------------------------------------------------------------------------
| Footer-nav
|--------------------------------------------------------------------------
*/
.footer-nav {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 10;
  transition: all 0.3s;

  .nav_inner {
    position: relative;
	  background:rgba(255, 255, 255, .95) !important;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: min(95%, 1160px);
    padding: var(--size-15-20);
    margin: 0 auto;
    transition: 0.3s ease-out;
    .button {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 20px;
      height: 20px;
      border: 1px solid #ccc;
      background-color: rgba(255, 255, 255, .6);
      border-radius: 3px;
      cursor: pointer;
      z-index: 5;

      &:before {
        content: "－";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: var(--size-15-17);
        color: #666;
      }
    }

	  ul {
		  display: grid;
		  grid-template-columns: repeat(3,1fr);
/* 		  display: flex;
		  justify-content: center; */
		  gap: 1vw;
		  width: min(100%, 1000px);
		  margin: 0 auto;
		  list-style: none;
		  padding: 0;

		  li {
			  display: grid;
			  background: #fff;
			  border-radius: 4px;
			  a {
				  display: flex;
				  flex-direction: column;
				  align-items: center;
				  border-radius: 4px;
/* 				  background-color: #fff; */
				  border: 2px solid transparent;
				  transition: 0.3s ease-out;
				  padding: var(--size-10-15) 10px;
				  text-decoration: none;
				  color: #fff;
				  h3 {
					  font-size: var(--size-15-17);
					  font-weight: 600;
					  margin: 0;
					  white-space: nowrap;
					  line-height: 1.4;
					  text-align: center;
				  }

				  .f-nav-txt {
					  margin-top: 6px;
					  font-size: var(--size-12-14);
					  line-height: 1.5;
					  max-height: 100px;
					  opacity: 1;
					  overflow: hidden;
					  transition: all 0.4s ease-out;
				  }
			  }
			  &.member a {
				  background: #4F81F5;
				  border-color: #4F81F5;
				  &:hover {
					  background: rgb(from #4F81F5 r g b / 0.1);
					  color: #4F81F5;
				  }
			  }
			  &.non a {
				  background: #F84141;
				  border-color: #F84141;
				  &:hover {
					  background: rgb(from #F84141 r g b / 0.1);
					  color: #F84141;
				  }
			  }
			  &.buy a {
				  background: #111;
				  border-color: #111;
				  &:hover {
					  background: rgb(from #111 r g b / 0.1);
					  color: #111;
				  }
			  }
			  &:before {
				  background: rgba(255, 255, 255, .1);
				  z-index: 2;
			  }
		  }
	  }
	}

  /* --- 最小化時の挙動 --- */
  &.abb {
    .nav_inner {
      padding-top: 10px;
      padding-bottom: 10px;
      .button:before {
        content: "＋";
      }
      .f-nav-txt {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
      }
    }
  }
}

/* 画像拡大 */
.thumb{
  cursor:pointer;
}

.modal{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.5);
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	pointer-events:none;
	transition:.5s;
	z-index:100;
	a {
		width: 100%;
		height: 100%;
		img{
			width: min(90%, 500px);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
	&:target{
		opacity:1;
		pointer-events:auto;
	}
}