@charset "utf-8";

/*
	item
-------------------------------------------------------------------- */

#item{
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 0;
	display: flex;
	color: #555;
	
	@media screen and (max-width: 640px) { /* SP */
	flex-flow: column;
	}
}

.item_img_box {
	@media screen and (min-width: 1024px) { /* PC */	
	width: 40%;
	}
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */
	width: 30%;
	}
	@media screen and (max-width: 640px) { /* SP */
	width: 60%;	
 	margin: 0 auto;
	}
}

.item_img_box  img {
	border: 1px solid #CCC;
}

.item_text_box {
	@media screen and (min-width: 1024px) { /* PC */	
	width: 55%;
	margin: 0 0 0 5%;
	}
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */	
	width: 65%;
	margin: 0 0 0 5%;
	}
	@media screen and (max-width: 640px) { /* SP */	
	width: 90%;
	margin: 30px 5% 0;
	}
}

#item h2 {
	color: #000;
	font-size: 30px;
	text-align: left;
	font-weight: bold;
	margin: 20px 0;
	
	@media screen and (max-width: 640px) { /* SP */	
	font-size: 24px;
	}
}

.item_weight {
	margin: 50px 0 20px;
}

/* ボタン行デザイン（必要なら調整） */
.item_show_button{
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 18px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-weight: bold;
  color: #111;

  border-top: 1px solid #e6e6e6;
}
.item_show_button:last-of-type{
  border-bottom: 1px solid #e6e6e6;
}
.item_arrow{
  width: 12px;
  height: 12px;
  border-top: 2px solid #111;
  border-right: 2px solid #111;
  transform: rotate(45deg);
  opacity: .6;
}

/* ===== モーダル背景（JSで付与） ===== */
.item_modal_backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999998;
  opacity: 0;
  transition: opacity .25s ease;
}
.item_modal_backdrop.is-open{ opacity: 1; }

/* ===== パネルをモーダル化 ===== */
.item_showScreen_panel{
  /* もともとHTML内にあるので、初期は非表示 */
  display: none;

  position: fixed;
  left: 50%;
  top: 50%;
  width: 40vw;
  height: 90vh;
	
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */	
	width: 80vw;
	}
	@media screen and (max-width: 640px) { /* SP */	
	width: 90vw;
	}

  transform: translate(-50%, -50%) scale(.98);
  opacity: 0;

  background: #fff;
  border-radius: 15px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  z-index: 999999;

  padding: 60px;
  overflow: auto;

  transition: opacity .25s ease, transform .25s ease;
}

.item_showScreen_panel.is-open{
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 右上× */
.item_show__close{
  position: absolute;
  right: 12px;
  top: 10px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  font-size: 26px;
  line-height: 40px;
  text-align: center;
}
.item_show__close:hover{ background: rgba(0,0,0,.06); }

/* 見出し */
.item_showScreen_panel h3{
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
}
.item_showScreen_panel p{
  line-height: 1.9;
  color: #333;
}

.item_modal_backdrop{
  pointer-events: none;   /* ← 閉じてる時はクリックを通す */
}

.item_modal_backdrop.is-open{
  pointer-events: auto;   /* ← 開いてる時だけクリックを受ける */
}

/* SP微調整 */
@media screen and (max-width: 640px){
  .item_show_button{ padding: 14px 8px; }
}