@charset "UTF-8";

:root {
	--color-body: #231815;
	--color-red: #ff2d13;
	--color-blue: #49a2c8;
	--font-family: "Noto Sans JP", sans-serif;
	--font-family-mincho: "Noto Serif JP", sans-serif;
	--font-family-shippori-mincho: "Shippori Mincho", sans-serif;
	--container: 905px;
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--color-body);
	font-family: var(--font-family);
	font-size: 16px;
	line-height: calc(30/16);
}

button:hover,
a:hover {
	opacity: .6;
}

@media(min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

img {
	max-width: 100%;
	height: auto;
}

::after,
::before,
* {
	--font-size: calc((var(--fs)/16) * 1rem);
	font-size: var(--font-size);
}

.container {
	max-width: calc(var(--container) + var(--bs-gutter-x));
}


/*--------- header-nav ---------*/

.header-nav-area {
	position: relative;
	align-items: center;
	display: flex;
	height: 65px;
	padding: 0 15px;
	top: 0;
	transition: transform .8s;
	z-index: 10;
	&.is-deactive {
		transform: translateY(-100px);
	}
}

.header-menu {
	align-items: center;
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 15px;
	.nav-divider {
		border-left: 1px solid var(--color-blue);
		height: 40px;
	}
}

.header-item {
	display: inline-grid;
	font-weight: 500;
	justify-items: center;
	letter-spacing: .05em;
}

.btn-contact{
	position: absolute;
	right: 15px;
	display: inline-block;
	border:  1px solid;
	padding: 3px 15px;
	text-decoration: none;
	border-radius: 7px;
	color: #fff;
}

@media (min-width: 992px) {
  .header-menu {
    font-size: 14px; /* ← 少し小さく */
  }

  .header-menu-item a {
    padding: 7px 25px; /* ← 左右余白を減らす */
    white-space: nowrap; /* ← 折り返し防止 */
  }
}

@media(max-width: 1399px) {
	.header {
		padding: 0 var(--gutter);
	}
}

@media(max-width: 991px) {
	body.noscroll {
		overflow: hidden;
		touch-action: pinch-zoom;
	}
	.header-nav-toggle {
		background: none;
		border: 0;
		display: inline-block;
		padding: 9px;
		margin-right: -9px;
		margin-top: -9px;
		&:hover {
			opacity: 1;
		}
	}
	body.noscroll .header-nav-toggle .bi-list,
	body:not(.noscroll) .header-nav-toggle .bi-x {
		display: none;
	}
	.header-nav {
		background-color: #fff;
		bottom: 0;
		overflow: auto;
		left: 0;
		padding: 20px var(--gutter);
		position: fixed;
		right: 0;
		top: 60px;
		transition: .3s;
		z-index: 99;
	}
	body:not(.noscroll) .header-nav {
		visibility: hidden;
		opacity: 0;
		transition: 0s;
	}
	.header-menu {
		display: grid;
		justify-items: center;
		text-align: center;
	}
	.header-menu-item {
		width: 100%;
		a {
			display: block;
			padding:  20px 15px;
			text-decoration: none;
			color: var(--color-body);
			font-weight: 700;
			font-family: var(--font-family-mincho);
			border-bottom: dotted 2px #ccc;
		}
	}
}




/*--------- header hero ---------*/

.header {
  overflow: hidden;
}

#hero {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0;
}

#hero .hero-img {
  width: 100%;
  height: auto;
  display: block;
}

/* スクロール時にフェードイン */
#hero.wow.animate__fadeIn {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

#hero.wow.animate__animated {
  opacity: 1;
  transform: translateY(0);
}


/*--------- main ---------*/

.main{
	overflow: hidden;
}

.mincho{
	font-family: var(--font-family-mincho);
}

.text-blue{
	color: var(--color-blue);
}

.copy{
	text-align: center;
	margin-top: 110px;
	h2{
		color: var(--color-blue);
		font-size: 27px;
		font-weight: 700;
		line-height: calc(44/27);
		margin-bottom: 35px;
		font-family: var(--font-family-mincho);
	}
	p{
		font-size: 19px;
		margin-bottom: 0px;
		line-height: calc(29/19);
		letter-spacing: .1em;
		font-weight: 500;
		font-family: var(--font-family-shippori-mincho);
	}
	p span{
		font-family: var(--font-family-mincho);
	}
}

.title-border {
    position: relative;
    display: inline-block;
    padding: 0 65px;
    font-family: var(--font-family-mincho);
    font-size: 27px;
    font-weight: 700;
    margin-bottom: 35px;
    z-index: 1;
}

.title-border:before,
.title-border:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 55px;
    height: 2px;
    background-color: var(--color-body);
}

.title-border.text-blue:before,
.title-border.text-blue:after {
    background-color: var(--color-blue);
}

.title-border.text-white:before,
.title-border.text-white:after {
    background-color: white;
}

.title-border:before {
    left: 0;
}

.title-border:after {
    right: 0;
}

.box-white{
	background-color: #fff;
	border-radius: 25px;
	hr{
		border-top: dotted 2px;
		position: relative;
		z-index: -1;
	}
}

#schedule{
	margin-top: 80px;
	background-color: var(--color-blue);
	padding: 85px 0px 75px 0px;
}

#schedule .wrapper{
	position: relative;
}

#schedule .wrapper .box-white{
	position: relative;
	z-index: 1;
	padding: 50px 115px;
}

#schedule .wrapper::before{
	content: "";
	display: block;
	background-image: url(img/bg-circle_v2.png);
	background-repeat: no-repeat;
	background-size: 485px;
	width: 485px;
	height: 693px;
	position: absolute;
	top: -211px;
	left: -356px;
}

#schedule .wrapper::after{
	content: "";
	display: block;
	background-image: url(img/bg-circle_v2.png);
	background-repeat: no-repeat;
	background-size: 413px;
	width: 413px;
	height: 589px;
	position: absolute;
	bottom: -148px;
	right: -297px;
}

#schedule .image-01,
#schedule .image-02,
#schedule .image-03{
	position: relative;
}

#schedule .image-01::after,
#schedule .image-02::after,
#schedule .image-03::after{
	position: absolute;
	content: "";
	display: block;
	background-repeat: no-repeat;
}

#schedule .image-01::after{
	background-image: url(img/schedule-img01@2x.png);
	background-size: 199px;
	width: 199px;
	height: 199px;
	top: 0;
	right: -216px;
	z-index: 2;
}

#schedule .image-02::after{
	background-image: url(img/schedule-img02@2x.png);
	background-size: 129px;
	width: 129px;
	height: 129px;
	top: 10px;
	right: -30px;
	z-index: 2;
}

#schedule .image-03::after{
	background-image: url(img/schedule-img03@2x.png);
	background-size: 178px;
	width: 178px;
	height: 178px;
	top: -235px;
	z-index: 2;
}

#speakers{
	padding: 120px 0px;
}

#live{
	background-color: var(--color-blue);
	padding: 90px 0px 117px 0px;
}

#live .wrapper .box-white{
	position: relative;
	z-index: 1;
	padding: 50px;
}

#contact{
	/*padding: 74px 0px 135px 0px;*/
	padding-top: 74px;
	.tel, .mail{
		font-family: var(--font-family-mincho);
		font-size: 19px;
		margin-bottom: 0px;
		line-height: 1.6;
	}
	.tel a, .mail a{
		text-decoration: none;
		color: var(--color-body);
	}
}

.pdf{
	padding: 85px 0px 135px 0px;
	text-align: center;
}

.btn-pdf{
	background-color: var(--color-blue);
	color: white;
	padding:  10px 25px;
	display: block;
	text-decoration: none;
	border-radius: 7px;
	max-width: 300px;
	margin-inline: auto;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-align: center;
}

@media(min-width: 992px) {
	#live .wrapper{
		position: relative;
	}
	#live .wrapper::before{
		content: "";
		display: block;
		background-image: url(img/bg-circle_v2.png);
		background-repeat: no-repeat;
		background-size: 485px;
		width: 485px;
		height: 693px;
		position: absolute;
		top: -297px;
		left: -356px;
	}
	.text-indent-7em span{
		padding-left: 7em;
	}
}

@media(max-width: 991px) {
	#speakers{
		padding: 80px 0px 40px 0px;
	}
	#schedule .image-02::after{
		background-size: 94px;
		width: 94px;
		height: 94px;
		top: -30px;
		right: -100px;
	}
}

@media(min-width: 768px) {
	.text-indent-9em span{
		padding-left: 9em;
	}
}

@media(max-width: 767px) {
	.copy{
		margin-top: 45px;
	}
	.copy h2 span{
		font-size: 16px;
	}
	.copy p{
		font-size: 17px;
		line-height: calc(27/17);
	}
	#schedule .wrapper .box-white,
	#live .wrapper .box-white{
		padding: 50px 20px;
	}
	#contact{
		.tel, .mail{
			font-size: 17px;
		}
	}
	#schedule .image-01::after{
		background-size: 98px;
		width: 98px;
		height: 98px;
		top: -77px;
		right: 0px;
	}

	#schedule .image-02::after{
		background-size: 80px;
		width: 80px;
		height: 80px;
		top: -35px;
		right: 0px;
	}

	#schedule .image-03::after{
		background-size: 95px;
		width: 95px;
		height: 95px;
		top: 0;
		right: 5px;
	}
}

@media(min-width: 768px) {
	#schedule .image-03::after{
		left: -207px;
	}
}


/*--------- footer ---------*/

.footer h3{
	max-width: 237px;
	border:  1px solid var(--color-body);
	border-radius: 25px;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	padding: 6px;
	margin-inline: auto;
	margin-bottom: 25px;
	font-weight: 700;
}

.footer .banner {
  display: flex;                 /* 横並びにする */
  flex-wrap: wrap;              /* 横幅が足りない時に折り返す */
  justify-content: center;      /* 画像を中央寄せ */
  gap: 20px;                    /* 画像の間隔 */
  width: 100%;                  /* 全幅いっぱい */
  max-width: none;              /* 制限を解除 */
  margin: 0 auto;
}

.footer .banner div {
  flex: 1 1 200px;              /* 各バナーを均等に広げる（最小幅200px） */
  display: flex;
  justify-content: center;      /* バナー画像を中央配置 */
}

.footer .banner img {
  height: auto;
  max-width: 100%;
}

.copyright{
	margin-top: 30px;
	padding: 40px 15px;
	background-color: var(--color-blue);
	color: #fff;
	font-size: 11px;
}

@media(max-width: 767px) {
	.footer .banner{
		gap:  20px;
	}
}

@media(max-width: 575px) {
	.footer .banner{
		grid-template-columns: 1fr;
	}
}


/*--------- アニメーション ---------*/

.wow:not(.animate__animated) {
    animation-name: none;
    visibility: hidden;
}
.animation-delay {
	animation-delay: 0.2s;
}


/*--------- 登壇者 ---------*/



#speakers .container{
	max-width: 1100px;
}

.title-bg-blue{
	background-color: var(--color-blue);
	color: white;
	font-family: var(--font-family-mincho);
	font-weight: 700;
	font-size: 22px;
	padding:  5px 15px;
	margin-bottom: 15px;
}

.title-blue{
	font-family: var(--font-family-mincho);
	color: var(--color-blue);
	font-weight: 700;
	font-size: 21px;
	margin-bottom: 25px;
	line-height: 1.5;
	small{
		font-size: 0.8em;
	}
}

.profile{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.profile .area{
	display: grid;
	grid-template-columns: 30% 1fr;
	gap: 20px;
	margin-bottom: 30px;
}

.profile-2{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.profile-2 .area{
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 10px;
	margin-bottom: 30px;
}

.profile .img,
.profile-2 .img{
	text-align: center;
}

.profile .img img,
.profile-2 .img img{
	max-width: 200px;
	width: 100%;
}

.profile .title,
.profile-2 .title{
	color: var(--color-blue);
	font-family: var(--font-family-mincho);
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 0px;
	margin-top: 7px;
	line-height: 1.5;
}

.profile .name,
.profile-2 .name{
	font-size: 18px;
	margin-bottom: 0px;
	line-height: 1.5;
	margin-bottom: 8px;
	small{
		font-size: 14px;
		margin-left: 5px;
	}
}

.profile .career,
.profile-2 .career{
	font-family: var(--font-family-mincho);
	font-size: 13px;
	line-height: 1.5;
	font-weight: 500;
}

.profile-2 .career{
	margin-bottom: 0px;
	font-size: 12px;
}

.profile .comment{
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 0px;
}

@media(max-width: 991px) {
	.profile .area{
		grid-template-columns: 1fr;
		gap:10px;
	}

	.profile-2 .area{
		grid-template-columns: 1fr;
		gap: 10px;
	}
}


.profile-0 {
  display: block; /* 全体は1カラム（＝縦に1人ずつ） */
}

.profile-0 .area {
  display: grid;                        /* 各ブロック内を横2分割 */
  grid-template-columns: 30% 1fr;       /* 左30%が画像、右がテキスト */
  gap: 20px;                            /* 画像とテキストの間隔 */
  align-items: start;                   /* 上揃え */
  margin-bottom: 30px;                  /* ブロック間の余白 */
}

.profile-0 .img {
  text-align: center;                   /* 画像を中央寄せ */
}

  max-width: 50px; /* PC時のサイズ */
  width: 100%;
}

@media (max-width: 767px) {
  .profile-0 .img img {
    max-width: 30px; /* スマホ時は少し小さく */
  }
}

.profile-0 .text {
  text-align: left;                     /* テキスト左寄せ */
}

@media(max-width: 767px) {
	.title-bg-blue{
		font-size: 20px;
	}

	.title-blue{
		font-size: 18px;
	}

	.profile{
		grid-template-columns: 1fr;
	}

	.profile-2{
		grid-template-columns: 1fr 1fr;
	}

}

/* 登壇者セクションのPDFボタンを横並びに */
.pdf-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;            /* ボタンの間隔 */
  flex-wrap: wrap;      /* スマホでは自動で折り返し */
}

.pdf-links .btn-pdf {
  display: inline-block; /* block → inline-block に変更 */
  margin-inline: 0;      /* 中央寄せ不要 */
  max-width: 260px;      /* 幅調整 */
}

/*--------- スケジュール ---------*/

.text-area {
    .number {
	    margin-bottom: 0px;
	}
}
@media(min-width: 768px) {
	.text-area {
	    display: flex;
	    align-items: flex-start;
	    p{
	    	margin-bottom: 0px;
	    }
	    .number {
		    white-space: nowrap;
		    margin-right: 20px;
		    width: 5rem;
		}
		.text {
		    white-space: normal;
		}
	}
}

/*--------- modal ---------*/

#about{
	padding-top: 120px;
}

.btn-modal{
	background-color: var(--color-blue);
	color: white;
	margin-bottom: 15px;
	padding: 10px 25px;
	font-weight: 700;
	letter-spacing: .1em;
}

.btn-modal:hover{
	background-color: var(--color-blue);
	color: white;
	opacity: .7;
}


/*--------- news ---------*/

#news{
	padding-top: 100px;
}

#news .wrapper{
	border: 1px solid #ccc;
	padding: 40px 30px;
	border-radius: 12px;
}

#news h2{
	/*color: var(--color-blue);*/
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

@media(max-width: 767px) {
	#news{
		padding-top: 60px;
		padding-bottom: 30px;
	}
	#news .wrapper{
		padding: 25px 0px;
	}
}

@media(max-width: 575px) {
	#news h2{
		font-size: 16px;
	}
}

.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube iframe {
	width: 100%;
	height: 100%;
}

#news hr {
  border-top: dotted 2px var(--color-body);
  border-bottom: none;
  border-left: none;
  border-right: none;
  margin: 1.5rem 0; /* 上下の余白調整（任意） */
}

/* NEWSの罫線を点線で前面に表示 */
#news .box-white hr {
  border-top: dotted 2px var(--color-body); /* スケジュールと同じ太さ&色 */
  position: relative;                       /* z-indexを有効化 */
  z-index: 0;                               /* -1を打ち消す（前面に） */
  border-right: none;
  border-bottom: none;
  border-left: none;
  margin: 1.5rem 0;                         /* 余白はお好みで */
}


/* スピーカー内のPDFボタンを実幅で広げる（PCでは最大500px、モバイルは親幅で縮む） */
#speakers .pdf-links .btn-pdf {
  width: clamp(280px, 32vw, 500px); /* 実幅を与える：280〜500pxの範囲で可変 */
  max-width: none;                  /* 途中の 260px 上限を打ち消す */
  display: inline-block;            /* 現状のままでOK */
}

/* もし確実に優先したければ（!important 版） */
#speakers .pdf-links .btn-pdf {
  width: clamp(280px, 32vw, 500px) !important;
  max-width: none !important;
}

/*------------------------------------
  参加者の方へ(#info)・演題登録(#abstract)
  → 背景を全幅で青色にする
------------------------------------*/
#info,
#abstract {
  background-color: var(--color-blue); /* 青の背景（全幅） */
  padding: 85px 0 75px;                /* 上下余白（開催概要と揃える） */
}

/* 白いボックスを中央固定幅で表示 */
#info .wrapper .box-white,
#abstract .wrapper .box-white {
  background-color: #fff;
  border-radius: 25px;
  padding: 50px 115px;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

/* スマホ用の内側余白調整 */
@media (max-width: 767px) {
  #info .wrapper .box-white,
  #abstract .wrapper .box-white {
    padding: 50px 20px;
  }
}

/*------------------------------------
  参加登録(#reg)
  → NEWSと同じbox枠デザインを適用
------------------------------------*/
#reg {
  padding-top: 100px; /* 上の余白：NEWSと合わせる */
  padding-bottom: 60px;
}

#reg .wrapper {
  border: 1px solid #ccc;
  padding: 40px 30px;
  border-radius: 12px;
}

#reg h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

#reg .box-white hr {
  border-top: dotted 2px var(--color-body);
  border-bottom: none;
  border-left: none;
  border-right: none;
  margin: 1.5rem 0;
  position: relative;
  z-index: 0;
}

/* スマホ対応（NEWSと揃える） */
@media (max-width: 767px) {
  #reg {
    padding-top: 60px;
    padding-bottom: 30px;
  }
  #reg .wrapper {
    padding: 25px 0;
  }
  #reg h3 {
    font-size: 16px;
  }
}

/* グレーダウンした非アクティブPDFボタン */
.btn-pdf.disabled {
  background-color: #ccc !important; /* 灰色に */
  color: #666 !important;            /* 文字も淡く */
  cursor: not-allowed;               /* 禁止カーソル */
  opacity: 0.7;
  pointer-events: none;              /* リンク無効化 */
  text-decoration: none;
}


/*------------------------------------
  PC表示時のヘッダーメニュー調整
  （文字サイズ・余白・折り返し防止＋下線削除＋黒文字）
------------------------------------*/
@media (min-width: 992px) {
  .header-menu-item a {
    padding: 7px 25px;
    white-space: nowrap;
    color: #000 !important;               /* 通常時：黒 */
    text-decoration: none !important;
    transition: color 0.3s, background-color 0.3s; /* スムーズに変化 */
  }

  .header-menu-item a:hover {
    color: #fff !important;               /* 文字色をブルーに変更 */
    background-color: var(--color-blue);  /* 背景を青に変更 */
    border-radius: 5px;                   /* 丸みをつけてもOK（任意） */
    opacity: 1;                           /* hover時の透明度を戻す */
  }
}

  /* hover 時の色を変えたい場合（任意） */
  .header-menu-item a:hover {
    color: var(--color-blue); /* ホバー時に青に変化 */
    opacity: 1;               /* hover 時に半透明にならないようにする */
  }
}

/*------------------------------------
  赤文字（強調用）
------------------------------------*/
.text-red {
  color: var(--color-red) !important; /* 変数で指定された赤 (#ff2d13) */
}

/*------------------------------------
  トップへ戻るボタン（サイズ調整版）
------------------------------------*/
.back-to-top-fixed {
  position: fixed;
  right: 1.2rem;
  bottom: 1.5rem;
  z-index: 999;
  background: #49a2c8;
  color: #fff;
  border-radius: 50%;
  padding: 0.4em 0.45em; /* ← 小さく */
  font-size: 1.2rem;     /* ← アイコン自体を小さく */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s, background-color 0.3s;
  text-decoration: none;
}

.back-to-top-fixed:hover {
  transform: translateY(-3px);
  background-color: #003399;
  color: #fff;
}

.back-to-top-fixed i {
  pointer-events: none;
}


/* NEWS：本文ブロックをフレックス領域いっぱいに広げる */
@media (min-width: 768px) {
  #news .text-area { display: flex; align-items: flex-start; } /* 念のため */
  #news .text-area .text { flex: 1 1 auto; } /* ← 右端まで領域を確保 */
}

/* NEWS：ボタン/画像だけ右端に寄せる（テキストは左のまま） */
#news .text .btn-pdf,
#news .text img {
  float: right;                 /* ← 右寄せを強制 */
  margin-left: 12px;            /* テキストとの間隔 */
  display: block;
}

/* .btn-pdf の全体共通の中央寄せ（block + margin:auto）を打ち消す */
#news .text .btn-pdf {
  margin-inline: 0 !important;
}

/* float の回り込みを段落内で解消 */
#news .text::after {
  content: "";
  display: block;
  clear: both;
}

/* speakersセクション内の<hr>をNEWSと同じ点線に統一 */
#speakers hr {
  border-top: dotted 2px var(--color-body);
  border-bottom: none;
  border-left: none;
  border-right: none;
  margin: 1.5rem 0;
  position: relative;
  z-index: 0; /* NEWSと同様に前面に表示 */
}

/* 特別講演・教育研修会の画像のみ右寄せ */
#speakers .mb-5:nth-of-type(1) > img,
#speakers .mb-5:nth-of-type(2) > img {
  display: block;
  margin-left: auto;
  margin-right: 0;
  max-width: 300px; /* 任意：サイズ調整したい場合 */
}

/* profile-0 の画像サイズを確実に上書き */
.profile-0 .img img {
  max-width: 150px;   /* PCでの見た目に合わせて調整値 */
  width: 100%;
}

@media (max-width: 767px) {
  .profile-0 .img img {
    max-width: 100px; /* スマホ時は少し小さく */
  }
}