@charset "utf-8";
/* ================================================
■ コンテナ
================================================ */
body.home .site-content {
	margin-bottom: 0;
}
.site-content {
	margin-bottom: 0;
}
div.container-onecolumn section {
  padding: 8rem 0;
}
body.page div#page { padding-top: 0; }
div#page { padding-top: 3rem; }

section{
	padding: 8rem 0;
}
body.single section{
	padding: 8rem 0 0;
}
/* コンテンツ内は横幅100%が出来ないので、ネガティブマージンで実装 */
section.width_100p{
  margin: 0 calc(50% - 50vw);
	padding: 8rem 0;
}
section.bg { background-color: #fbfced; }



/* ================================================
■ grid-layout
================================================ */
.box-wrapper {
  display: grid;
  grid-row-gap: 3rem;
  grid-column-gap: 2rem;
  margin: auto;
}

/* 1～5カラム */
.box-wrapper.one { grid-template-columns: 1fr; }
.box-wrapper.two { grid-template-columns: 1fr 1fr; }
.box-wrapper.three { grid-template-columns: 1fr 1fr 1fr; }
.box-wrapper.four { grid-template-columns: 1fr 1fr 1fr 1fr; }
.box-wrapper.five { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

/* 2カラム 3:2 */
.box-wrapper.two_3to2 {
  grid-template-columns: .75fr 1fr;
  column-gap: 5rem;
  margin-bottom: 5rem;
}
.box-wrapper.two_3to2:last-of-type { margin-bottom: 0; }
.two_3to2:nth-of-type(odd) {}/* 奇数 */
.two_3to2:nth-of-type(even) { grid-template-columns: 1fr .75fr; }/* 偶数の比率 */
.two_3to2:nth-of-type(even)>.box:nth-of-type(1) { order: 1; }/* 偶数box並び変え */

/* 2カラム　4:3 */
.box-wrapper.two_4to3 {
  grid-template-columns: 2fr 1.5fr;
  column-gap: 5rem;
  margin-bottom: 5rem;
}
.box-wrapper.two_4to3:last-of-type { margin-bottom: 0; }
.two_4to3:nth-of-type(odd) {}/* 奇数 */
.two_4to3:nth-of-type(even) { grid-template-columns: 1.5fr 2fr; }/* 偶数の比率 */
.two_4to3:nth-of-type(even)>.box:nth-of-type(1) { order: 1; }/* 偶数box並び変え */

.box img {
	display: block;
	margin-bottom: 1rem;
	width: 100%;
	height: auto;
}
body.archive .box img {
  margin-bottom: 0;
}


/*==============================================================================
スマホ＋ipadまで(0~768px)
==============================================================================*/
@media screen and (max-width: 768px) {
  /* ------------------------------------------------------
  ■ コンテナ
  ------------------------------------------------------ */
	.site-content {
		margin-bottom: 0;
	}
	section,
	div.container-onecolumn section {
	  padding: 2rem 0;
	}
	section.width_100p,
	div.container-onecolumn section.width_100p {
		padding: 2rem 3rem;
	}
	div#page {
	    padding-top: 0rem;
	}
  /*---------------------
  ■ grid-layout
  ---------------------*/
	.box-wrapper.two_3to2 {
	    column-gap: 1rem;
	}
	.box-wrapper {
	    grid-row-gap: 1rem;
	}

	/* 【1列】段落ち */
	.box-wrapper.two.stepdown ,
  .box-wrapper.two_3to2 ,
  .box-wrapper.two_4to3 ,
  .box-wrapper.three ,
  .box-wrapper.four ,
  .box-wrapper.five {
    grid-template-columns: 1fr;
  }
	/* 【2列】段落ち */
	.box-wrapper.three.col2 ,
  .box-wrapper.four.col2 ,
  .box-wrapper.five.col2 {
    grid-template-columns: 1fr 1fr;
  }
  .two_3to2:nth-of-type(even)>.box:nth-of-type(1), /* 偶数box並び変え */
  .two_4to3:nth-of-type(even)>.box:nth-of-type(1)
   {
     order: initial;
   }
}