@charset "utf-8";

/*== common =========================================================================*/
a { color:#457ed3; text-decoration:none; }
a:hover { color:#ac1212; }
a:hover img { opacity:0.7; }
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }

/*== template =========================================================================*/
html{
	font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',Verdana,sans-serif;
	font-size:13px;
}
body{
	width:100%; height:auto;
	line-height:1.6;
	color:#35476f;
	background:#fff;
}
.wrap {
  width:100%;
  max-width:960px;
  margin:0 auto;
}

@media screen and (min-width: 768px) {
  .sp-br {
    display:none;
  }
}

/*--header--------------------------------*/
.header {
  margin-bottom:30px;
  width:100%;
}
.header-h1 {
  margin-bottom:20px;
  width:100%;
}
.header-h1 img {
  display:block;
  width:100%;
  height:auto;
}
.header-h2 {
  padding:5px 10px;
  color:#fff;
  font-size:100%;
  font-weight:bold;
  text-align:center;
  background-color:#71c7c8;
}

@media screen and (min-width: 768px) {
  .header-h2 {
    font-size:140%;
  }
}

/*--main--------------------------------*/
.main {
  margin-bottom:30px;
  width:100%;
}
.main-wrap {
  padding:0 15px;
}
.head-text {
  margin-bottom:10px;
  color:#e76567;
  font-size:100%;
  font-weight:bold;
}
.head-sentense {
  margin-bottom:5px;
  font-size:100%;
}
.image-grid {
  display:grid;
  grid-template-columns:repeat(1, 1fr);
  gap:15px;
  margin:30px 0;
}
.image-grid-item label {
  display:block;
  padding:5px 10px;
  color:#fff;
  font-size:100%;
  font-weight:bold;
  background-color:#71c7c8b3;
}
.image-grid-item label.active {
  background-color:#71c7c8;
}
.image-grid-item label span {
  font-size:120%;
}
.image-grid-main {
  display:block;
  position:relative;
  padding-top:66.66%;
  width:100%;
  height:0;
  overflow:hidden;
}
.image-grid-main img {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.submit-block {
  text-align:center;
}
.foot-sentense {
  margin-bottom:5px;
  font-size:100%;
}
.foot-sentense span {
  color:#f00;
  font-weight:bold;
}
.submit-block div {
  padding-top:5px;
}
.submit-block div:last-of-type {
  padding-top:10px;
}

@media screen and (min-width: 768px) {
  .head-text {
    font-size:120%;
    text-align:center;
  }
  .head-sentense {
    font-size:110%;
    text-align:center;
  }
  .image-grid {
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
  }
  .foot-sentense {
    font-size:110%;
  }
  .submit-block div {
    font-size:110%;
  }
}

/*--footer--------------------------------*/
.footer {
	border-top:1px solid #9e797b;
	color:#9e797b;
	margin-top:20px;
	padding:20px 0;
	font-size:90%;
	text-align:center;
}

/*--footer--------------------------------*/
#image-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
#image-modal .modal-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
/* ===== デフォルト：スマホ ===== */
#image-modal .modal-content {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#image-modal img {
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: contain;
}

/* ===== PCのみ中央寄せ ===== */
@media screen and (min-width: 768px) {
  #image-modal .modal-content {
    position: absolute;
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: 90vw;
    max-height: 90vh;
  }

  #image-modal img {
    width: auto;
    max-width: 90vw;
    max-height: 90vh;
  }
}