/*---------------------------------
  1蛻苓｡ｨ遉ｺ繧ｰ繝ｪ繝�ラ蜈ｨ菴捺ｧ矩€�
----------------------------------*/
.grid-wrapper-single {
  display: grid;
  grid-template-columns: 1fr; /* 蟶ｸ縺ｫ1蛻� */
  gap: 15px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

/*---------------------------------
  2蛻苓｡ｨ遉ｺ繧ｰ繝ｪ繝�ラ蜈ｨ菴捺ｧ矩€�縲€max1000px
----------------------------------*/

.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}


/*---------------------------------
 BOX逕ｨ繧ｳ繝ｳ繝�リ
----------------------------------*/
/* 騾壼ｸｸ繧ｰ繝ｪ繝�ラ�亥庄螟会ｼ� */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch; /* 鬮倥＆謠�∴ */
}

/* 2蛻怜崋螳� */
.grid-container-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch; /* 鬮倥＆謠�∴ */
}

/* 3蛻怜崋螳� */
.grid-container-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch; /* 鬮倥＆謠�∴ */
}

/* 4蛻怜崋螳� */
.grid-container-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch; /* 鬮倥＆謠�∴ */
}


/*---------------------------------
繝ｬ繧ｹ繝昴Φ繧ｷ繝�
----------------------------------*/
@media screen and (max-width: 600px) {
  /* 2縲�4蛻怜崋螳壹げ繝ｪ繝�ラ繧抵ｼ大�縺ｫ縺励▽縺､蟾ｦ蜿ｳ菴咏區繧剃ｻ倅ｸ� */
  .grid-container-2col,
  .grid-container-3col,
  .grid-container-4col {
    grid-template-columns: 1fr !important;
    /* 讓ｪ蟷�＞縺｣縺ｱ縺�↓縺ｪ繧峨↑縺�ｈ縺�↓繝代ョ繧｣繝ｳ繧ｰ繧呈欠螳� */
    padding: 0 1rem;
    box-sizing: border-box; /* padding 繧貞性繧√◆險育ｮ励↓ */
  }
}



/*---------------------------------
  繝ｭ繧ｴ�域怙荳企Κ縺ｫ陦ｨ遉ｺ��
----------------------------------*/
.logo-box {
  text-align: center;
  margin-bottom: 0;
  line-height: 0;
}

.logo-box img {
  width: 300px;
  height: auto;
  display: inline-block;
}

/*---------------------------------
  繧ｰ繝ｪ繝�ラ蜷��繝�け繧ｹ
----------------------------------*/

/* 繝吶�繧ｹ�郁レ譎ｯ騾乗�繝ｻ譫�邱壹↑縺暦ｼ� */
.grid-box {
  padding: 1rem;
  border: none; /* 譫�邱壹↑縺� */
  border-radius: 8px;
  box-sizing: border-box;
  background: transparent;
}

/* 閭梧勹繧ｰ繝ｬ繝ｼ�区棧邱� */
.grid-box.bg-gray {
  background: #f9f9f9;
  border: 1px solid #ccc;
}

/* 閭梧勹逋ｽ�区棧邱� */
.grid-box.bg-white {
  background: #ffffff;
  border: 1px solid #ccc;
}

/* 閭梧勹逋ｽ�区棧邱壹↑縺� */
.grid-box.bg-white-noborder {
  background: #ffffff;
  border: none;
}

/* 閭梧勹逋ｽ�区棧邱� */
.grid-box.bg-bk {
  background: #000000;
  border: 1px solid #ccc;
}

/* 閭梧勹鮟抵ｼ区棧邱壹↑縺� */
.grid-box.bg-bk-noborder {
 background-color: #000000;
  border: none;
	color:#ffffff;
}

.grid-box h2 {
  position: relative;
  padding: 0.5em 1em;
  margin: 0 0 1em;
  color: #9f1a88;
  text-align: left;
  background: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.grid-box h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #9f1a88;
}

.grid-box ul {
  padding-left: 1em;
  padding-right: 1em;	
  margin: 0;
}


.grid-box ul li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 1.8em;
  list-style: none;
  line-height: 1.6;
}

.grid-box ul li::before {
  content: '';
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1em;
  height: 1em;
  background-image: url('https://mcgard.jp/hpimages/after/after-icon-01.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}

/*---------------------------------
  繧ｰ繝ｪ繝�ラ隕句�縺暦ｼ井ｸ企Κ��
----------------------------------*/
.grid-wrapper > h2 {
  position: relative;
  display: block;
  padding: 0.75em 1em;
  margin: 0 auto 2em auto;
  color: #fff;
  background-color: #9f1a88;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.grid-wrapper > h2::after {
  content: '';
  display: none;
}

/*---------------------------------
  繝倥ャ繝€繝ｼ繝懊ャ繧ｯ繧ｹ�郁レ譎ｯ縺ｪ縺励�蟾ｦ蜿ｳ菴咏區縺ｪ縺励�蟾ｦ謠�∴��
----------------------------------*/
.grid-header-box {
  grid-column: 1 / -1;
  padding: 1rem 0;
  text-align: left;
  box-sizing: border-box;
}

.grid-header-box img {
  width: 100%;
  display: block;
  margin: 0 0 2em 0;
  box-sizing: border-box;
}

.grid-header-box p {
  text-align: left;
  padding: 0 1em;
  margin: 0;
  box-sizing: border-box;
}

/*---------------------------------
  繧ｰ繝ｪ繝�ラ蜀�Μ繝ｳ繧ｯ繝懊ち繝ｳ
----------------------------------*/

.grid-box .link-button-wrapper {
margin-top: auto;
text-align: center;
}

.grid-box .link-button-wrapper button {
  padding: 0.6em 2em;
  background-color: #9f1a88;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.grid-box .link-button-wrapper button:hover {
  background-color: #7c156c; /* 蟆代＠豼�＞繝槭ぞ繝ｳ繧ｿ縺ｧ繝帙ヰ繝ｼ蜉ｹ譫� */
}

/*---------------------------------
  繝輔ャ繧ｿ繝ｼ繝懊ャ繧ｯ繧ｹ�郁レ譎ｯ縺ｪ縺励�蟾ｦ蜿ｳ菴咏區縺ｪ縺励�蟾ｦ謠�∴��
----------------------------------*/
.grid-footer-box {
  grid-column: 1 / -1;
  padding: 1rem 0;
  text-align: left;
  box-sizing: border-box;
  border-top: 1px solid #000;
  margin-top: 2em;
  padding-top: 2em;
}

.grid-footer-box p {
  font-size: 80%;
  margin: 0;
}