@charset "UTF-8";

/* ========================================
  @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px), print {

main{padding: 0px 0px 60px 0px;}
#column .column-logo{ text-align: center;  width: 300px; margin: -4rem auto 2rem;}
#column .column-logo img{width: 100%;}

.p-main__ttl-wrap {
	background: url(../images/column/header_fv.jpg) no-repeat top center/cover;
	margin-block: -6.25rem 0;
	margin-inline: auto;
	max-width: 1920px;
	padding-block: 13.5rem 2rem;
	width: 100%;
}

.p-main__ttl-wrap h1 {
	color: #ffffff;
	font-size: 36px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4166666667;
	margin-bottom: 0.5rem;
	text-align: center;
}

.p-main__ttl-wrap p {
	color: #ffffff;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.4;
	text-align: center;
}

#column .system-list {
  display: grid;
  gap: 4.4375rem 1.875rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
  z-index: 10;
}

#column .system-list li {
  display: grid;
  grid-row: span 4;
  grid-template-rows: auto auto 1fr auto;
}

#column .system-list li a {
  display: inherit;
  grid-row: inherit;
  grid-template-rows: inherit;
}

#column .system-pic {
  margin-bottom: 1.875rem;
}

#column .system-pic img {
  height: 16.25rem;
}

#column .system-ttl02{ width: 1200px;margin: 0 auto 4rem;
        padding: 0 0 2rem 0;}

#column .system-ttl {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.9;
  margin-bottom: 2.4375rem;
}

#column .system-day {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 2.625;
}

#column .system-category {
  margin-bottom: 1rem;
  display: flex;
  gap: 0 8px;
  flex-wrap: wrap;
}

#column .system-category span {
  font-size: 14px;
  line-height: 2;
  color: #fff;
  background: #00388D;
  width: fit-content;
  padding: 0.2rem 1rem;
  text-align: center;
}

#column .cate-wrap a {
  font-size: 14px;
  line-height: 2;
  color: #fff;
  background: #00388D;
  width: fit-content;
  padding: 0.2rem 1rem;
  text-align: center;
}

#column .wysiwyg{
  width: 1100px;
  margin: 0 auto;
}

}



@media screen and (min-width:768px) and (max-width:1380px) {

.system-i-pic img {
    height: auto !important;
    width: auto;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    object-position: top;
}
  
#column .wysiwyg { width: 84vw; margin: 0 auto; }
}



/* ========================================
  @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
  .p-main__ttl-wrap {
	background: url(../images/column/header_fv_sp.jpg) no-repeat top center/cover;
	margin-block: -16vw 0;
	padding-block: 27.889vw 12.319vw;
	width: 100%;
}

#column .column-logo{ text-align: center;  width: 40vw; margin:-2rem auto 1rem;}
#column .column-logo img{width: 100%;}


#column .system-ttl02{
  font-size: 4vw;
  line-height: 1.6;
  text-align: left;
}

.p-main__ttl-wrap h1 {
	color: #ffffff;
	font-size: 7.246vw;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	margin-bottom: 3.763vw;
	text-align: center;
}

.p-main__ttl-wrap p {
	color: #ffffff;
	font-size: 4.831vw;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.4;
	text-align: center;
}

#column .system-list {
}

#column .system-pic {
  margin-bottom: 3.623vw;
}

#column .system-pic img {
  height: 32vw;
}

#column .system-ttl {
  font-size: 3.865vw;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.6666666667;
  margin-bottom: 4.386vw;
}

#column .system-day {
  font-size: 3.382vw;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 2.625;
}

#column .system-category {
  margin-bottom: 1rem;
  display: flex;
  gap: 0 8px;
  flex-wrap: wrap;
}

#column .system-category span {
  font-size: 3.382vw;
  line-height: 2;
  color: #fff;
  background: #00388D;
  width: fit-content;
  padding: 0 2vw;
  text-align: center;
}

#column .cate-wrap a {
  font-size: 3.382vw;
  line-height: 2;
  color: #fff;
  background: #00388D;
  width: fit-content;
  padding: 0 2vw;
  text-align: center;
}

.system-i-pic img{}
.wysiwyg p { min-height: 3vw; min-width: 3vw; line-height: 1.6;margin-bottom: 2vw;}
#column .system-contents{  width: min(95%, 90vw);}

}