.magnesium-banner {
  position: relative;
  margin: 0 0 2rem;
  display: grid;
  justify-content: center;
  align-items: center;
}
.magnesium-banner > *{
  grid-area: 1/1;
}

.magnesium-banner img {
  width: 100%;
  grid-area: 1/1;
}

.banner-content {
  grid-area: 1/1;
  text-align: center;
}

.banner-content span {
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #FFFFFF;
}
.banner-content h1 {
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #FFFFFF;
}

.banner-content h2 {
  font-weight: 500;
  font-size: 3rem;
  line-height: 69px;
  letter-spacing: 0.06em;
  color: #FFFFFF;
}
.banner-content p {
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: #FFFFFF;
}

.magnesium-main {
  margin: 2rem 0 0;
}
.whatis-outer {
  margin-block: 0 100px;
}
.whatis-inr {
  margin: 0 0 4rem;
}

.whatis-title {
  text-align: center;
  margin: 0 0 3rem;
}

.whatis-title h3 {
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 52px;
  text-align: center;
  letter-spacing: 0.06em;
  color: #25558C;
  padding: 0 0 0.6rem;
  margin: 0 0 0.6rem;
  position: relative;
}

.whatis-title h3::before {
  content: '';
  display: inline-block;
  border-bottom: 1px solid #25558C;
  width: 50px;
  z-index: 2;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.whatis-title h3::after {
  content: '';
  display: inline-block;
  border-bottom: 1px solid #2FA6CE;
  width: 300px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.whatis-title span {
  font-family: 'Quattrocento';
  font-size: 0.938rem;
  line-height: 19px;
  letter-spacing: 0.06em;
  color: #2FA6CE;
}

.whatis-sub {
  margin: 0 0 2rem;
}

.whatis-sub p {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.06em;
  color: #2FA6CE;
}

.whatis-para p {
  font-weight: 400;
  font-size: 0.938rem;
  line-height: 22px;
  letter-spacing: 0.06em;
  color: #393939;
  margin: 0 0 1.6rem;
  text-align: center;
}

.whatis-para p span{
  display: inline-block;
}

.whatis-para p:last-child {
  margin: 0;
}

.fv-images{
  display: grid;
  grid-template-columns: auto auto;
  margin-inline: auto;
  gap: 40px;
  align-items: baseline;
  justify-content: center;
  margin-block: 0 40px;
}

.fv-images img{
  height: 200px;
  width: auto;
}
@media screen and (max-width: 767px) {
  .fv-images{
    gap: 10px;
    align-items: baseline;
    justify-content: center;
    margin-block: 0 40px;
  }

  .fv-images img{
    height: 150px;
    width: auto;
  }
}

.img-blk {
  margin: 0 0 5rem;
}
.img-blk.blue{
  background: #F4F7FA;
  padding: 4rem;
}

.img-title {
  text-align: center;
  margin: 0 0 3rem;
}

.img-title h3 {
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 52px;
  text-align: center;
  letter-spacing: 0.06em;
  color: #25558C;
  padding: 0 0 0.6rem;
  margin: 0 0 0.6rem;
  position: relative;
}

.img-title h3::before {
  content: '';
  display: inline-block;
  border-bottom: 1px solid #25558C;
  width: 50px;
  z-index: 2;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.img-title h3::after {
  content: '';
  display: inline-block;
  border-bottom: 1px solid #2FA6CE;
  width: 300px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.img-title h3 br {
  display: none;
}

.img-title span {
  font-family: 'Quattrocento';
  font-size: 0.938rem;
  line-height: 19px;
  letter-spacing: 0.06em;
  color: #2FA6CE;
}

.img-para {
  margin: 0 0 3rem;
}

.img-para p {
  font-weight: 400;
  font-size: 0.938rem;
  line-height: 22px;
  letter-spacing: 0.06em;
  color: #393939;
  text-align: center;
}
.img-para p span{
  display: inline-block;
}

.img-image{
  text-align: center;
  margin-inline: auto;
  width: 80%;
}


.img-title, .img-para {padding: 0rem 4rem; }
@media screen and (max-width: 767px) {
  .img-title, .img-para {padding: 0rem 0rem; }
}

/***========Responsive CSS========****/
@media screen and (max-width: 767px) {
  .magnesium-banner {
    margin: 0 0 2.6rem;
  }
  .banner-content span {
    font-size: 3vw;
  }
  .banner-content h2 {
    font-size: 1.25rem;
    line-height: 29px;
  }
  .banner-content h1 {
    font-size: 3vw;
  }	
  .banner-content p {
    font-size: 0.438rem;
    line-height: 10px;
    text-align: center;
  }
  .whatis-inr {
    background: transparent;
    padding: 0rem;
    margin: 0 0 3rem;
  }
  .whatis-title {
    margin: 0 0 1.4rem;
  }
  .whatis-title h3 {
    font-size: 1.25rem;
    line-height: 29px;
    text-align: left;
  }
  .whatis-title h3::before {
    display: none;
  }
  .whatis-title h3::after {
    background: #F4F7FA;
    border: none;
    height: 12px;
    left: 0;
    width: 100%;
    bottom: 5px;
    z-index: -1;
    transform: none;
  }
  .whatis-sub {
    margin: 0 0 1.4rem;
  }
  .whatis-sub p {
    font-size: 1rem;
    line-height: 23px;
    text-align: left;
  }
  .whatis-para p {
    font-size: 0.875rem;
    line-height: 20px;
    margin: 0 0 1.2rem;
  }
  .img-blk {
    margin: 0 0 3rem;
  }
  .img-title {
    margin: 0 0 1.4rem;
    z-index: 1;
    position: relative;
  }
  .img-title h3 {
    font-size: 1.25rem;
    line-height: 29px;
    text-align: left;
  }
  .img-title h3::before {
    display: none;
  }
  .img-title h3::after {
    background: #F4F7FA;
    border: none;
    height: 12px;
    left: 0;
    width: 100%;
    bottom: 5px;
    z-index: -1;
    transform: none;
  }
  .blue .img-title h3::after {
    background: #2F559744;
  }
  .img-title h3 br {
    display: block;
  }
  .img-para {
    margin: 0 0 2.6rem;
  }
  .img-para p {
    font-size: 0.875rem;
    line-height: 20px;
  }
  .img-blk.blue{
    padding-inline: 0;
  }
  .img-image{
    margin-inline: 0;
    width: 100%;
  }
  .img-image img{
  }
}

.mgf-table{
  border: 1px solid #C4C4C4;
  width: 100%;
  table-layout: fixed;
}
.mgf-table.layout-auto{
  table-layout: unset;
}

.mgf-table :where(td,th){
  border: 1px solid #C4C4C4;
  font-size: 1.2rem;
  padding: .5em 1em;
  text-align: center;
  vertical-align: middle;
  line-height: 1.3;
}
@media screen and (max-width: 767px) {
  .mgf-table :where(td,th){
    font-size: 1rem;
  }
}

.mgf-table thead th{
  background-color: #06B0F0;
  color: white;
  font-weight: 700;
}
.mgf-table.dark thead th{
  background-color: #2F5597;
  color: white;
  font-weight: 700;
}
.mgf-table tbody th{
  background-color: #DCEEF3;
  font-weight: 700;
}
.mgf-table tr.accent{
  border: 2px solid red;
}
.mgf-table tr.accent th{
  padding-inline: 0;
}
.mgf-table tr.accent img{
  max-width: 100px;
  margin-inline: auto;
  margin-block: .5em 0;
}

.mgf-table tr.accent td{
  color: red;
}
.mgf-table.dark tbody td{
  padding-inline: 5px;
}
.table-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
}

@media screen and (max-width: 767px) {
  .img-table.scroll{
    overflow-x: auto; /* 横スクロールを有効化 */
    -webkit-overflow-scrolling: touch; /* モバイルでスムーズに */
  }
  .img-table.scroll .mgf-table{
    width: 100%;
    min-width: 850px; /* 必要に応じて最小幅を設定 */
  }
  .table-cols{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
  }
  .table-cols table:not(:first-child){
    position: relative;
    top: -1px;
  }
  .table-cols table:not(:first-child) thead{
    display: none;
  }
}

.text-xs{
  font-size: 70%;
}
.text-s{
  font-size: 80%;
}
.text-m{
  font-size: 1rem;
}
.text-l{
  font-size: 110%;
}
.text-xl{
  font-size: 120%;
}
.text-xxl{
  font-size: 150%;
}
.text-right.text-right.text-right{
  text-align: right;
}
.bold{
  font-weight: bold;
}
.text-red{
  color: red;
}
.text-navy{
  color: #2F5597;
}

p.caution.caution{
  text-align: right;
  font-size: 80%;
  margin-block: 1em;
}
@media screen and (max-width: 767px) {
  p.caution.caution{
    text-align: left;
    font-size: 80%;
  }
}