@charset "utf-8";
/* ################################################################################
   Layout
   ################################################################################ */


/* ======================================================================
   Layout_Common（レイアウト_共通指定）
   ====================================================================== */


/* サイトを構成する要素へのCSS指定のうち、「変更する頻度が低い固定化された記述」をまとめています。 */
/* 指定を変更する必要性がある場合は、"Configuration_Individual designation（サイト構成_個別指定）"に記述し、指定を上書きする形で変更を加えます。 */


/* サイト構成の基本要素
   ================================================================= */


/* ------------------------------------------------------------
   Whole
   ------------------------------------------------------------ */

.l-body, 
.l-container {
  width: 100%;
  margin: 0;
  padding: 0;
}



/* ------------------------------------------------------------
   Header, Main, Footer
   ------------------------------------------------------------ */

.l-header, .l-main, .l-footer {
  width: 100%;
  margin: 0;
  padding: 0;
}


/* Contents
   ------------------------------------------------------- */

.l-header-contents, .l-main-contents, .l-footer-contents {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}





/* ======================================================================
   Layout_Individual（レイアウト_個別指定）
   ====================================================================== */

/* レイアウトの各要素に、共通化できない、個別の指定を加える際に使います。 */
/* プロジェクトに応じたサイト構成（カラム、幅etc.）、トンマナ（背景色etc.）にする際に、こちらに指定を加えてください。 */

/* カラムについて */
/* ページコンテンツに合わせ、カラムを変化させる。Homeでは２カラム、記事ページでは１カラムなど。 */
/* ヘッダーの背景色は青、コンテンツの背景色は白など。 */
/* サイトレイアウトの指定に、Flexboxをメインに使用しています。 */

/* 下記サイトを参考に、Flexboxを用いています。 */
/* Refernce URL: https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html#h213 */
/* Refernce URL: https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet */


/* Container
   ================================================================= */

.l-container {
  background: var(--bgcolor-container);
}




/* Header
   ================================================================= */

.l-header {
  background: var(--bgcolor-header);
}



/* ------------------------------------------------------------
   Header_Contents
   ------------------------------------------------------------ */

.l-header-contents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: var(--layout-width-basic);
  padding: 0 var(--layout-site-bothends-padding);
}

.l-header-contents--article-ad {
  justify-content: center;
  max-width: var(--layout-width-main-primary);
	padding-left: 0;
	padding-right: 0;
}




/* Main
   ================================================================= */

.l-main {
  background: var(--bgcolor-main);
}



/* ------------------------------------------------------------
   Main_Contents
   ------------------------------------------------------------ */

.l-main-contents {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  max-width: var(--layout-width-basic);
}

.l-main-contents--article-ad {
  flex-wrap: wrap;
  max-width: var(--layout-width-main-primary);
}



/* ------------------------------------------------------------
   Main Contents_Primary
   ------------------------------------------------------------ */

.l-main-contents__primary {
  order: 0;
  flex-basis: var(--layout-width-main-primary);
  max-width: 100%;
  min-width: var(--layout-width-main-primary);
  margin: var(--space-100-basic) auto var(--layout-content-margin-bottom);
  padding: 0;
}

.l-main-contents__primary--home {
}

.l-main-contents__primary--single {
}

.l-main-contents__primary--page {
}

.l-main-contents__primary--archive {
}

.l-main-contents__primary--article-ad {
	margin-top: 0;
}



/* ------------------------------------------------------------
   Main Contents_Secondary
   ------------------------------------------------------------ */

.l-main-contents__secondary {
  order: 1;
  flex-basis: var(--layout-width-main-secondary);
  max-width: 100%;
  min-width: var(--layout-width-main-secondary);
  margin: 0 auto var(--layout-content-margin-bottom);
  padding: 0;
}

.l-main-contents__secondary--home {
}

.l-main-contents__secondary--single {
}

.l-main-contents__secondary--page {
}

.l-main-contents__secondary--archive {
}

.l-main-contents__secondary--article-ad {
}




/* Footer
   ================================================================= */

.l-footer {
  background: var(--bgcolor-footer);
}



/* ------------------------------------------------------------
   Footer_Contents
   ------------------------------------------------------------ */

/* Footer内の「サイトアドレス、コピーライトなどの様々な要素」を格納するボックスです。 */


.l-footer-contents {
  max-width: 100%;
}

.l-footer-contents--article-ad {
  max-width: var(--layout-width-main-primary);
}





/* ======================================================================
   Section
   ====================================================================== */

/* Project（Webサイト）固有の様々なコンテンツを、格納するために用います。 */
/* セクションを分別する場合、「装飾 」という形で、指定する。 */
/* 例： .l-section--xxxxx */


/* [Foundation]
   ================================================================= */

.l-section {
  max-width: 100%;
  margin: 0 auto var(--layout-content-margin-bottom);
  padding: 0;
  background: var(--bgcolor-content);
}
.l-section:before, 
.l-section:after {
  content: "";
  display: table;
}
.l-section:after {
  clear: both;
}
.l-section:last-child {
  margin-bottom: 0;
}



/* --------------------------------------------------------
   Section_Inner
   -------------------------------------------------------- */

/* Section内に、「横幅を指定したブロック」が必要な際などに、使用します。 */


.l-section__inner {
}
.l-section__inner:before, 
.l-section__inner:after {
  content: "";
  display: table;
}
.l-section__inner:after {
  clear: both;
}




/* [Decoration]Site Visual
   ================================================================= */

.l-section--site-visual {
	background-color: inherit;
}




/* [Decoration]Recommended Articles
   ================================================================= */

.l-section--recommended-articles {
  padding: 0 var(--layout-site-bothends-padding);
}




/* [Decoration]Article List
   ================================================================= */

.l-section--article-list {
  padding: 0 var(--layout-site-bothends-padding);
}




/* [Decoration]Notice List
   ================================================================= */

.l-section--notice-list {
  padding: 0 var(--layout-site-bothends-padding);
}




/* [Decoration]Product List
   ================================================================= */

.l-section--product-list {
  padding: 0 var(--layout-site-bothends-padding);
}




/* [Decoration]Detailed Search
   ================================================================= */

.l-section--detailed-search {
	margin: 0 auto var(--space-050-basic);
  padding: 0;
}




/* [Decoration]Widget Main
   ================================================================= */

.l-section--widget-main {
  padding: 0 var(--layout-site-bothends-padding);
}




/* [Decoration]Article Comments
   ================================================================= */

.l-section--article-comments {
  padding: 0 var(--layout-site-bothends-padding);
}




/* [Decoration]Article Attachment
   ================================================================= */

.l-section--article-attachment {
  padding: 0 var(--layout-site-bothends-padding);
}




/* [Decoration]Page Export
   ================================================================= */

.l-section--page-export {
  padding: 0 var(--layout-site-bothends-padding);
}