@charset "UTF-8";


/***************  medical sub visual *****************/
.medical_page {
    background-image: none!important;
    background-color:#5eaad1 !important;
	position: relative;
	height:200px!important;
}
.hero_sub::before {
	content: '';
	display: inline-block;
    background: rgb(34 130 180 / 40%);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 28px;
}
.hero_sub h2 {
    position: relative;
	}



/***************  medical  *****************/
:root{
  --bg: #dff1f6;
  --card: #ffffff;
  --text: #111827;
  --muted: #4b5563;
  --line: #e6eef2;
  --shadow: 0 10px 24px rgba(17,24,39,.08);
  --shadow-soft: 0 10px 20px rgba(2,132,199,.12);
  --red: #e11d2e;
  --radius: 10px;
}

.card{
  background: var(--card);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 26px 26px;
  display: flex;
  gap: 28px;
  align-items: stretch;
}

.medical .card {
    max-width: 100%;
    aspect-ratio: inherit;
    margin-bottom: 45px;
}

.card__col{
  min-width: 0;
  flex: 1;
}

.card__divider{
  width: 1px;
  background: var(--line);
  align-self: stretch;
}

.lead{
  margin: 0 0 22px;
  line-height: 1.85;
  font-size: 14px;
  color: #1f2937;
}

/* Search */
.search{
  position: relative;
  width: min(520px, 100%);
}

.search__field{
  display: block;
}

.search__input{
  width: 100%;
  height: 62px;
  padding: 0 64px 0 28px;
  border-radius: 999px;
  border: 1px solid #d9e6ee;
  outline: none;
  font-size: 15px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.search__input::placeholder{
  color: #9ca3af;
}

.search__input:focus{
  border-color: #bcd3e0;
  box-shadow: 0 12px 24px rgba(2,132,199,.16);
}

.search__btn{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.search__icon{
  width: 22px;
  height: 22px;
  display: block;
  background-image: url("../img/medical/icon_search.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Right side */
.right__title{
  margin: 0 0 14px;
  font-size: 14px;
  color: #1f2937;
}

.kana{
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
  width: min(520px, 100%);
}
.kana__btn{
  height: 44px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-weight: 600;
  font-size: 16px;
  color: #111827;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	vertical-align: middle;
}

.kana__btn:hover{
  border-color: #bfc7d1;
  box-shadow: 0 6px 14px rgba(17,24,39,.08);
  background: #c7001a;
  color: #fff;
}

.kana__btn:active{
  transform: translateY(1px);
}

.kana__btn.on{
  border: 1px solid #d1d5db;
  background: #c7001a;
  color: #fff;
}

.all__btn{
  margin-top: 16px;
  width: 180px;
  height: 46px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: box-shadow .12s ease, border-color .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}

.all__btn:hover{
  border-color: #bfc7d1;
  box-shadow: 0 6px 14px rgba(17,24,39,.08);
  background: #c7001a;
  color: #fff;
}

.all__btn.on {
    background: #c7001a;
    color: #fff;
}
/* Responsive */
@media (max-width: 1800px){
.medical.cta {
background-size: auto 100%;
    background-size: 100% auto;
	}
}
@media (max-width: 980px){
  .medical .card {
      margin-bottom: 15px;
  }
  .card{
    flex-direction: column;
    gap: 18px;
  }
  .card__divider{
    width: 100%;
    height: 1px;
  }
  .kana{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .all__btn{
    width: 100%;
    max-width: 260px;
  }
.search ,
.kana {
    width: 100%;
	}
.all__btn {
    max-width: 100%;
	}
}

/* a11y */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}









/* リンクエリア */

:root{
  --red: #c7001a;
  --text: #111;
  --bg: #eaf4f8;
}

.links-area{
  padding: 22px 0;
  margin: 30px auto;
}

.links-area__inner{
  width: min(1200px, calc(100% - 5px));
  margin: 0 auto;
  display: flex;
  gap: 28px;
  align-items: stretch;
}

.link-item{
  flex: 1;
  min-width: 0;
  border-bottom: 1px solid var(--red);
}

.link-item:hover{
    background: var(--red);
	color: #fff;
	transition: .3s;
}

.link-item.no_link {
  position: relative;
  pointer-events: none;
  cursor: not-allowed;
}
.link-item.no_link .link-item__text{
    color: #a8a8a8;
}
.link-item.no_link .icon-arrow {
    fill: #a8a8a8;
}

.link-item__link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  padding: 16px 18px;
  min-height: 75px;
}

.link-item__text{
  display: inline-block;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 16px;
  color: var(--text);
}

.link-item:hover .link-item__text {
    color: #fff;
}

.link-item__arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 14px;
  flex: 0 0 auto;
}

.icon-arrow{
  width: 22px;
  height: 22px;
  fill: var(--red);
}

.link-item:hover .icon-arrow{
    fill: #fff;
}

/* 左：赤背景 */
.link-item--primary .link-item__link{
  background: var(--red);
}

.link-item--primary .link-item__text{
  color: #fff;
}

.link-item--primary .icon-arrow{
  fill: #fff;
}


/* 右2つ：下線 */
.link-item--line .link-item__link{
  position: relative;
  background: transparent;
  padding-left: 16px;
  padding-right: 18px;
}

/* hover（雰囲気だけ） */
.link-item__link:hover{
  opacity: 0.9;
}

.link-item__link.on{
    background: var(--red);
	color: #fff;
	transition: .3s;
}
.link-item__link.on span{
	color: #fff;
}
.link-item__link.on .icon-arrow {
    fill: #fff;
}

/* SP */
@media (max-width: 820px){
  .links-area {
	margin-bottom: 15px;
  }
  .links-area__inner{
    flex-direction: column;
    gap: 0;
  }

  .link-item__link{
    min-height: 56px;
  }

  .link-item--line .link-item__link::after{
    bottom: 4px;
  }
}





/* 安全措置情報 */
/* title */
.title-area {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 24px;
}

.title-area__jp {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
}

.title-area__slash {
  color: #e23b3b;
  font-weight: 800;
}

.title-area__en {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #e23b3b;
}

/* list */
.info-list {
  display: grid;
  gap: 15px;
}

.info-list a:hover {
	transform: translateY(-1px);
    box-shadow: 0 8px 14px rgba(0, 0, 0, .06);
}

/* row */
.info-item {
  background: #fff;
  border-radius: 6px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

.info-date {
  min-width: 90px;
  letter-spacing: .02em;
}

.info-text {
  line-height: 1.9;
  letter-spacing: .02em;
  word-break: break-word;
}

/* responsive */
@media (max-width: 768px) {
  .container {
    width: min(1100px, calc(100% - 32px));
  }

  .page {
    padding: 40px 0 56px;
  }

  .title-area {
    flex-wrap: wrap;
    gap: 6px;
  }

  .info-item {
    padding: 18px;
    gap: 14px;
    align-items: flex-start;
  }

  .info-date {
    min-width: 85px;
    font-size: 14px;
  }

  .info-text {
    font-size: 14px;
	line-height: 1.85;
  }
  .title-area__jp {
	font-size: 20px;
  }
}
@media (max-width: 767px) {
.medical_page {
	height:140px!important;
	}
}



/* お知らせ NEWS */
.medical .news{
    margin-top: 65px;
}

/* ===== header row ===== */
.news__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px;
}

.news__title{
  display:flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

.news__title-jp{
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .02em;
}

.news__title-en{
  font-weight: 800;
  font-size: 14px;
  color: var(--red);
  letter-spacing: .06em;
}

/* ===== tabs ===== */
.tabs{
  background-color: #fff;
  border-radius: 999px;
  padding: 8px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  overflow: hidden;
}

.tabs__item{
  border: 0;
  background: transparent;
  color: var(--tab-text);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 14px 18px;
  border-radius: 999px;
  line-height: 1.15;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
  white-space: nowrap;
}

.tabs__item:hover{
  transform: translateY(-1px);
}

.tabs__item.is-active{
  background: var(--red);
  color: #fff;
}

/* ===== panel ===== */
.news__panel{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 34px 22px;
}

.news__list{
  width: 100%;
}

.news__row{
  display: grid;
  grid-template-columns: 95px 135px 1fr;
  align-items: center;
  column-gap: 22px;
  padding: 22px 4px;
  border-bottom: 1px solid rgba(143,208,239,.65);
}

.news__row:last-child{
  border-bottom: 1px solid rgba(143,208,239,.65);
}

.news__date{
  font-weight: 700;
  color: #1a2731;
  letter-spacing: .02em;
}

.news__cat{
  width: 135px;
  text-align:center;
  line-height:1.3;
  background: #626262;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 9px 16px;
  border-radius: 999px;
}

.news__text{
  font-weight: 600;
  color: #1a2731;
  line-height: 1.7;
  letter-spacing: .02em;
}

/* hover feel */
.news__row:hover{
  background: linear-gradient(90deg, rgba(143,208,239,.08), transparent 55%);
}

/* ===== more ===== */
.news__more{
  display: flex;
  justify-content: flex-end;
  padding-top: 18px;
}

.more{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.more__label{
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 12px;
  color: #0f1a22;
}

.more__btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 18px rgba(196,0,24,.24);
  transition: transform .18s ease, box-shadow .18s ease;
}

.more__icon{
  width: 18px;
  height: 18px;
}

.more:hover .more__btn{
  transform: translateX(2px);
  box-shadow: 0 14px 26px rgba(196,0,24,.28);
}

/* ===== responsive ===== */
@media (max-width: 960px){
  .news__head{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .tabs{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabs__item{
    flex: 0 0 auto;
  }

  .news__panel{
    padding: 10px 18px 18px;
  }
}
@media (max-width: 820px){
.medical .news {
    margin-top: 45px;
	}
}
@media (max-width: 640px){
  .page{ padding: 34px 16px 60px; }

.news__row {
    grid-template-columns: auto 1fr;
    row-gap: 6px;
    padding: 18px 2px;
	}
.news__cat {
    font-size: 10px;
    padding: 6px 10px;
    align-self: center;
    margin-left: -12px;
	width: fit-content;
	}
  .news__date{
    font-size: 13px;
  }
.news__text {
    grid-column: 1 / -1;
    font-size: 13px;
	}
}

/* タブ切り替え用 */
.news__list{
  display: none;
}
.news__list.is-show{
  display: block;
}






/* リンクエリア */
.linkgrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  align-items: start;
  margin-top: 65px;
}

.linkunit{
  display:flex;
  flex-direction: column;
  gap: 16px;
}

.linkbox{
  display:block;
}

.thumb{
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
}

.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.thumb:hover .arrowchip{
	background: #fff;
	box-shadow: 0 14px 26px rgba(0,0,0,.12);
	transition:.3s;
}
.thumb:hover .arrowicon {
    color: var(--red);
}


/* 右下の矢印ボタン */
.arrowchip{
  position:absolute;
  right: 0;
  bottom: 0;
  width: 74px;
  height: 74px;
  background: var(--red);
  border-top-left-radius: 18px;
  display:grid;
  place-items:center;
  box-shadow: 0 14px 26px rgba(196,0,24,.22);
  transition: transform .18s ease, filter .18s ease;
}
.arrowicon{
  width: 22px;
  height: 22px;
  color: #fff;
}

/* 右側のカード：白背景＋赤矢印（デザイン再現用） */
.arrowchip.is-white{
  background: #fff;
  box-shadow: 0 14px 26px rgba(0,0,0,.12);
}

.arrowicon.is-red{
  color: var(--red);
}

.linkbox:hover .arrowchip{
  transform: translateX(2px);
  filter: brightness(1.02);
}

.linktext{
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .02em;
}

/* ===== responsive ===== */
@media (max-width: 980px){
  .linkgrid{
    gap: 34px;
  }
}

@media (max-width: 760px){
  .page{
    padding: 36px 16px 50px;
  }
  .linkgrid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .arrowchip{
    width: 64px;
    height: 64px;
  }
  .linktext{
    font-size: 16px;
  }
}




/* 学会関連情報 */
.panel {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 52px 56px 85px;
    border-radius: 35px 35px 0 0;
    margin-bottom: -100px;
    margin-top: 65px;
}

/* 見出し */
.panel__head{
  padding-bottom: 12px;
}

.headline{
  display:flex;
  align-items: baseline;
  gap: 14px;
}

.headline__jp{
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .02em;
}

.headline__en{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--red);
}

/* リスト */
.panel .list{
  margin-top: 10px;
  gap: 0;
}

.row{
  display:grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 10px;
  padding: 25px 0;
  border-bottom: 1px solid #c0e3eb;
}

.row:first-child{
  border-top: none;
}

.row__date{
  font-weight: 700;
  letter-spacing: .02em;
  color: #0f1a22;
}

.row__text{
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .02em;
  color: #1a2731;
}

/* hover */
.row:hover{
  background: linear-gradient(90deg, rgba(143,208,239,.08), transparent 55%);
}

/* 右下 LIST MORE */
.panel__foot{
  display:flex;
  justify-content:flex-end;
  padding-top: 18px;
}

.more{
  display:inline-flex;
  align-items:center;
  gap: 14px;
}

.more__label{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  color: #0f1a22;
}

.more__dot{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--red);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow: 0 12px 22px rgba(196,0,24,.22);
  transition: transform .18s ease, filter .18s ease;
}

.more__icon{
  width: 18px;
  height: 18px;
}

.more:hover .more__dot{
  transform: translateX(2px);
  filter: brightness(1.02);
}

/* responsive */
@media (max-width: 960px){
  .panel{
        padding: 40px 5px 75px;
  }
}

@media (max-width: 767px){
.row__date {
    font-size: 13.75px;
	}
.row__text {
	font-size: 13px;
	}
  .panel{
        padding: 10px 5px 75px;
  }
.panel__head {
    margin: 0 0 10px 0;
    padding-bottom: 8px;
	}
}
@media (max-width: 640px){
  .page{ padding: 34px 16px 60px; }

  .headline{
    flex-direction: column;
    align-items:flex-start;
    gap: 6px;
  }

.row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    padding: 14px 0px 14px;
    border-top: 1px solid var(--line);
	}
}







/* 医療関係者関連のフッターエリア */
.medical.cta{
  position: relative;
  margin-top: 65px;
  padding: 0 36px 90px;
  overflow: hidden;
/*  height: 835px; */
  height: auto;
  margin-bottom: -75px;
/*  background: url(../img/medical/foot_back_medical.jpg) no-repeat; */
  background: #5eaad1 !important;
  background-position: center;
}

.medical.cta::before{
	content: '';
	display: inline-block;
	background: rgba(0,0,0,.1);
	width: 100%;
	height: 100%;;
	position: absolute;
	top: 0;
	left: 0;
}

.medical .cta__inner{
	max-width: 100%;
/*    padding: 100px 0px 0 0; */
    padding: 45px 0px 0 0;
}

/* タイトル */
.medical .cta__title{
	font-size: 18.5px;
    margin: 0;
	}
.medical .contact_en {
    font-size: 65px;
    top: 5%;
	}

/* 注意書き */
.cta__note{
  margin: 22px auto 0;
  width: min(980px, 100%);
  color: #fff;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.cta__note-lead{
  line-height: 1.9;
  opacity: .95;
  text-align: left;
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 15.25px;
}

.cta__note-list{
  padding-left: 1.2em;
  width: fit-content;
  line-height: 1.9;
    font-size: 15.25px;
}

.cta__note-list li{ 
	margin: 2px 0;
    text-align: left;
    font-weight: 600;
}

/* ===== white panel ===== */
.cta__panel {
    margin: 0px auto 0;
    width: min(1080px, 100%);
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 15px 56px;
    position: relative;
    z-index: 2;
}

.cta__cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
}

.cta__subttl{
  min-height: 52px;   /* ← デザインに合わせて調整 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .02em;
  margin-bottom: 5px;
  color: #000;
}

.cta__tel{
  display:flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cta__tel-ico {
    width: 32px;
    height: 20px;
    display: inline-block;
    background: url("../img/medical/icon_free.png") center / contain no-repeat;
    border-radius: 0;
    margin-top: 3px;
}

.cta__tel-num{
  font-weight: 900;
/*  font-size: 42px; */
  font-size: 20px;
  letter-spacing: .02em;
  color: #0b0f14;
  text-decoration: none;
  position: relative;
}
.cta__tel-num::after {
    content: '（フリーダイヤル）';
    display: inline-block;
    position: absolute;
    bottom: -12px;
    right: 0;
    font-size: 10px;
}

.cta__tel-note{
  text-align:center;
  margin-top: 6px;
  font-size: 12px;
  color: #2c3a44;
}

.cta__meta {
    padding-left: 80px;
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.9;
    color: #1c2831;
    text-align: left;
}
.cta__meta-row span{
  font-weight: 800;
}

/* 右カラム説明 */
.cta__desc {
    text-align: center;
    font-size: 15px;
    line-height: 1.9;
    color: #1c2831;
    margin: 8px 0 22px;
    font-weight: 500;
}

/* ボタン（赤・横長・右矢印） */
.cta__actions{
  display:flex;
  justify-content: center;
}

.cta__btn {
    font-size: 15px;
    width: min(320px, 100%);
    height: 50px;
    background: var(--red);
    color: #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-weight: 900;
    letter-spacing: .04em;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(196,0,24,.28);
    transition: transform .18s ease, filter .18s ease;
}

.cta__btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.cta__btn-svg{
  width: 18px;
  height: 18px;
  color: #fff;
}
/* ===== responsive ===== */
@media (max-width: 960px){
/*
  .cta{ padding: 56px 16px 72px; }
*/
  .cta__title{ font-size: 24px; }
  .cta__panel{ padding: 28px 18px; border-radius: 26px; }
  .cta__cols{ grid-template-columns: 1fr; gap: 26px; }
  .cta__tel-num{ font-size: 36px; }
.medical.cta {
/*    height: 965px; */
    background: url(../img/medical/foot_back_medical_sp.jpg) no-repeat;
    background-size: cover;
    margin-top: 65px;
	}
.medical .cta__inner {
    padding: 70px 0px 0 0;
	}
/*
.contact_en {
    top: 3%;
	}
*/
}

@media (max-width: 767px){
.medical .cta__title {
    font-size: 16.5px;
	}
.medical .cta__inner {
    padding: 35px 0px 0 0;
	}
.medical.cta {
    margin-top: 0px;
	}
.cta__panel {
    padding: 8px 15px 20px;
    border-radius: 15px;
	}
.cta__subttl {
    min-height: 45px;
    font-size: 16px;
    margin-bottom: 0px;
	}
.cta__tel-num {
    font-size: 18px;
	}
.cta__tel-ico {
    width: 28px;
    height: 18px;
	}
.cta__tel-num::after {
    font-size: 9.5px;
	}
.cta__desc {
    font-size: 14px;
    line-height: 1.4;
	}
.cta__btn {
    font-size: 14.5px;
	}
.cta__btn-svg {
    position: relative;
    top: 3px;
	}
}

@media (max-width: 520px){
.cta__title {
    line-height: 1.35;
    font-size: 20px;}
}

@media (max-width: 520px){
.cta__btn{ height: 58px; }
.cta__meta {
    padding-left: 35px;
	}
.medical.cta {
/*    height: 865px; */
    height: auto;
    }
.cta__note-lead ,
.cta__note-list li {
    font-size: 12.5px;
	}
.cta__panel {
    margin: 0 auto 0;
	}
}

@media (max-width: 400px){
.cta__meta {
    padding-left: 0px;
	}
.medical.cta {
    padding: 0 20px 90px;
	}
}




/***************  製品詳細  *****************/
.prodDetail .content {
	margin-bottom: 65px;
}
.prodDetail__inner{
  margin: 0 auto;
  display:flex;
  gap: 34px;
  align-items:flex-start;
}

.prodDetail__left{
  flex: 1 1 56%;
  min-width: 0;
}

.prodDetail__right{
  flex: 0 0 340px;
}

/* ---- tables ---- */
.prodTable{
  width:100%;
  border-collapse:collapse;
  border:1px solid #9a9a9a;
  background:#fff;
}

.prodTable--mt{
  margin-top: 18px;
}

.prodTable th,
.prodTable td{
  border:1px solid #9a9a9a;
  padding:10px 14px;
  font-size:14px;
  line-height:1.5;
}

.prodTable th{
  width: 22%;
  background:#8e7d2e;
  color: #fff;
  font-weight:700;
  text-align:left;
  vertical-align:middle;
}

.prodTable th.center{
  text-align:center;
}

.prodTable td{
  background:#fff;
  vertical-align:middle;
}

.prodTable__head{
  background:#6d5f1e;
  text-align:center;
  font-weight:700;
}

/* ---- gallery ---- */
.gallery{
  margin: 0 auto;
}

.gallery__main{
  width:100%;
  aspect-ratio:1/1;
/*  background:#888; */
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  padding: 10px;
}

.gallery__mainImg{
  width:100%;
  height:100%;
  object-fit:contain;
}

.gallery__thumbs{
  margin-top:12px;
  display:flex;
  gap:10px;
}

.prodDetail .thumb{
  width:70px;
  height:70px;
  border-radius:10px;
  object-fit: contain;
  cursor:pointer;
    padding: 5px;
    background: #ffffff;
}

.prodDetail .thumb.is-active{
  outline:2px solid #111;
}

/* ---- responsive ---- */
@media (max-width: 900px){
  .prodDetail__inner{
    flex-direction: column;  /* 横 → 縦 */
    gap: 24px;
  }
  .prodDetail__left,
  .prodDetail__right{
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
.prodTable th {
    width: 36%;
	}
.prodTable th, .prodTable td {
    padding: 10px 10px;
    font-size: 13px;
	}
}
.prodDetail .content {
	margin-bottom: 65px;
}
@media (max-width: 767px){
.prodDetail .content {
    margin-bottom: 40px;
	}
}
@media (max-width: 480px){
  .gallery__thumbBtn{
    width: 64px;
    height: 64px;
  }
}

/* ---- 開栓方法 ---- */
.open_image_area {
	margin-top: 20px;
}
.open_image_area img {
	max-width: 480px;
}
@media (max-width: 900px) {
.open_image_area {
	margin-top: 15px;
	}
}
@media (max-width: 480px){
.open_image_area img {
	max-width: 100%;
	}
}


/* ---- 製品情報エリア ---- */
/* ===== レイアウト ===== */
.wrapper {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

.info-container {
    display: flex;
    gap: 40px;
    margin-top: 20px;
    align-items: stretch; /* ← 高さを揃える */
}

/* カラム */
.column {
    flex: 1;
    display: flex; /* ← 中のtableを高さ100%にするため */
}

.column .info-table {
    width: 100%;
}

/* ===== 900px以下 ===== */
/* ===== テーブル ===== */
.info-table {
    border-collapse: collapse;
    background-color: #ffffff;
    border: 1px solid #cfcfcf;
}

.info-table th,
.info-table td {
    border: 1px solid #cfcfcf;
    padding: 14px 16px;
    font-size: 15px;
    vertical-align: middle;
}

.info-table th {
    width: 40%;
    background: #8e7d2e;
    color: #fff;
    font-weight: 500;
    text-align: left;
}

.info-table td {
    background-color: #ffffff;
}
@media (max-width: 900px) {
.info-container {
	flex-direction: column;
	gap: 0; /* ← gapをなくす */
    margin-top: 15px;
    }
.info-table {
    border-collapse: collapse;
    background-color: #ffffff;
    border: 0;
	}
.info-table th,
.info-table td {
    border: 0;
    border-bottom: 1px solid #cfcfcf;
    font-size: 14px;
    padding: 14px 10px;
	}
}


/* ---- 各種コードエリア ---- */
.med-codeTables .code-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;       /* 横スクロール無し */
  border:1px solid #777;
  background:#fff;
  margin:0 0 18px;
}

.med-codeTables .code-table th,
.med-codeTables .code-table td{
  border:1px solid #777;
  text-align:center;
  vertical-align:middle;
  padding:10px 8px;
  font-size:12px;
  line-height:1.2;
}

.med-codeTables .code-table th{
  border:1px solid #fff;
  background:#8e7d2e;
  color: #fff;
  font-weight:700;
}

.med-codeTables .code-table td{
  font-weight:500;
  word-break: break-all;
}

/* GS1 barcode */
.med-codeTables .code-table__barcode{
  display:block;
  width:72%;
  max-width:240px;
  height:auto;
  margin:0 auto 8px;
}

.med-codeTables .code-table__barcode img{
	margin-left:auto;
	margin-right:auto;}

.med-codeTables .code-table__barcode--narrow{
  width:58%;
  max-width:200px;
}
.med-codeTables .code-table__code{
  font-size:15px;
  line-height:1.1;
  word-break: break-all;
}

/* GS1だけ高さ */
.med-codeTables .code-table--gs1 td{
  padding-top:14px;
  padding-bottom:12px;
}

/* =========================
   767px以下：th→td縦並び
   ========================= */
@media (max-width: 767px){
.med-codeTables .code-table{
  border:0;
}

  .med-codeTables .code-table thead{
    display:none;
  }

.med-codeTables .code-table th,
.med-codeTables .code-table td{
  border:0;
}

  .med-codeTables .code-table,
  .med-codeTables .code-table tbody,
  .med-codeTables .code-table tr,
  .med-codeTables .code-table td{
    display:block;
    width:100%;
  }

  .med-codeTables .code-table tr{
    background:#fff;
    padding:0;
  }

  .med-codeTables .code-table td{
    border:none;
    text-align:center;
    padding:12px 10px;
  }

  .med-codeTables .code-table td:last-child{
    border-bottom:none;
    margin-bottom:0;
  }

  /* ? 擬似th（=見出し）を確実に表示 */
  .med-codeTables .code-table td::before{
    content: attr(data-th);
    display:block;
    background:#8e7d2e;
    color: #fff;
    font-weight:700;
    padding:10px;
    margin:-12px -10px 10px;
    line-height:1.2;

    /* ? 1行表示にする（必要なら） */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ? data-th が空のときは見出し枠ごと出さない（事故防止） */
  .med-codeTables .code-table td:not([data-th])::before,
  .med-codeTables .code-table td[data-th=""]::before{
    display:none;
  }

  .med-codeTables .code-table__barcode{
    width:70%;
  }
  .med-codeTables .code-table__barcode--narrow{
    width:56%;
  }

.cta__note-lead {
    line-height: 1.55;
	}
}


.medical_hidden {
	display:none;}


/* ---- 各種資料エリア ---- */
.mpDocs__menu{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:16px;
  margin-bottom:14px;
}

/* =========================
   button（aタグ）
========================= */
.mpDocs__btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:190px;
  min-height:44px;
  padding:10px 14px;
  background:#2e354a;
  color:#fff;
  text-decoration:none;
  border:1px solid #777;
  border-radius:4px;

  /* ★はみ出し防止 */
  overflow:hidden;
  box-sizing:border-box;
}
.mpDocs__btn:hover{
	opacity: .8;
	transition:.3s;
}

/* =========================
   テキスト（左寄せ）
========================= */
.mpDocs__label{
  flex:1;                  /* 残り幅を使用 */
  text-align:left;         /* 左寄せ維持 */
  font-size:13px;
  font-weight:700;
  line-height:1.1;

  /* ★はみ出し防止（省略表示） */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   PDFアイコン
========================= */
.mpDocs__icon{
  flex:0 0 auto;           /* サイズ固定 */
  width:22px;
  height:22px;
  margin-left:8px;         /* テキストとの間隔 */
  display:block;
}



/* ---- 本製品に関するお知らせエリア ---- */
.medical .prodDetail .news {
    margin-top: 20px;
}



/* ---- 本製品に関するよくあるご質問エリア ---- */
.faq{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* item shell */
.qa-item{
  background-color: #fff;
  border:1px solid var(--line);
  border-radius:15px;
  overflow:hidden;
}

/* question row */
.qa-q{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 14px;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
}

.qa-q:focus-visible{
  outline:3px solid rgba(27,134,200,.35);
  outline-offset:2px;
  border-radius:18px;
}

/* left circle Q/A */
.qa-ico{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:999px;
  background:#2e354a;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:16px;
  letter-spacing:.02em;
}
.qa-ahead .qa-ico{
  color:var(--red);
}

/* Q text */
.qa-qtext{
  flex:1 1 auto;
  font-size:14.25px;
  line-height:1.5;
  font-weight:700;
}

/* right arrow circle */
.qa-arrow{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:2px solid var(--blue);
  display:grid;
  place-items:center;
  background:#fff;
}

.qa-arrow-ico{
  width:18px;
  height:18px;
  fill:var(--blue);
  transform: rotate(180deg); /* closed: down */
  transition: transform .25s ease;
}

/* answer area */
.qa-a{
  padding:0 14px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition: max-height .35s ease, opacity .25s ease;
}

.qa-item.is-open .qa-a{
  opacity:1;
  padding-bottom:14px;
}

.qa-ainner{
  border-radius:14px;
  padding:10px 0 0;
}

.qa-ahead {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-top: 2px solid #e4e4e4;
    padding-top: 5px;
}

.qa-ico-a{
  background:#fff;
  color:var(--blue);
  border:2px solid var(--blue);
}

.qa-atext{
  font-size:13.85px;
  line-height:1.8;
  font-weight:500;
  padding-top:4px;
}
.qa-atext a{
	text-decoration: underline;
}
.qa-atext a:hover{
	text-decoration: none;
}

/* open state */
.qa-item.is-open .qa-arrow-ico{
  transform: rotate(0deg); /* open: up */
}

.other_pic_area {
	display:inline-block;}

.other_pic_area p {
	text-align:center;
	margin-top:10px;}

.other_pic_area+.other_pic_area {
	margin-left:20px;}

.other_pic_area img {
    background-color: #ffffff;
    max-height: 260px;
    width: 250px;
    height: 250px;
    object-fit: contain;
}

section.medical .tablebox table.docTable {
  width: 100%;
  min-width: 100%; /* スマホで横スクロールさせるため */
  border-collapse: separate;
  border-spacing: 0;
}

section.medical .tablebox table.docTable th {
	position:sticky;
	top:70px;
	z-index:1;
}
@media screen and (max-width:767px){
.other_pic_area {
    display: block;
	margin-bottom: 18px;
	}
.other_pic_area p {
    margin-top: 6px;
	}
.other_pic_area img {
    margin-left: auto;
    margin-right: auto;
	}
.other_pic_area+.other_pic_area {
    margin-left: 0;
	}
}
@media screen and (max-width:600px){
section.medical .tablebox table.docTable th,
section.medical .tablebox table.docTable td {
	padding:0;}
}

/*20260320*/
/* ===== 画像ポップアップ ===== */
.imgModal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.imgModal.is-show{
  display: block;
}

.imgModal__bg{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
}

.imgModal__box{
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: calc(100vw - 40px);
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 初期状態 */
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
}

/* 表示時 */
.imgModal.is-show .imgModal__box{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  animation: imgModalPop 0.35s ease;
}

.imgModal__img{
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  background: #fff;
}

/* 閉じるボタン */
.imgModal__close{
  position: absolute;
  top: -30px;
  right: -30px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  font-size: 20px;
  cursor: pointer;
}

/* ぽよん */
@keyframes imgModalPop {
  0% {
    transform: translate(-50%, -50%) scale(0.85);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@media screen and (max-width:768px){
.imgModal__box{
	width: 100%;
	}
.imgModal__close {
    top: -45px;
    right: 0px;
	}
}