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


/* ======================================================================
   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 */


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


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

.l-header-contents {
  max-width: var(--layout-width-basic);
  padding: 0 1.0em;
}



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


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

.l-main-contents {
  max-width: var(--layout-width-basic);
}



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

.l-main-contents__primary {
  flex-basis: var(--layout-width-basic);
  min-width: var(--layout-width-basic);
	margin-top: 0;
}



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

.l-main-contents__secondary {
  flex-basis: var(--layout-width-basic);
  min-width: var(--layout-width-basic);
}




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

.l-footer {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}



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

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


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





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

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


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


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

.l-section__inner {
	max-width: var(--layout-width-main-primary);
	margin: 0 auto;
}

.l-section__content {
}

@media screen and (max-width:959px) {
.l-section__content {
	margin-left: 2.0em;
	margin-right: 2.0em;
}
}

@media screen and (max-width:559px) {
.l-section__content {
	margin-left: 1.0em;
	margin-right: 1.0em;
}
}


.l-section__content--about-us {
  position: relative;
	padding: 2em;
	background: #fff;
	border-radius: 1.25em;
}
.l-section__content--about-us:after {
	content: "";
	position: absolute;
	top: -3.0em;
	left: calc(50% - 1.5em);
	border: 1.5em solid transparent;
	border-bottom: 1.5em solid #fff;
}

@media screen and (max-width:959px) {
.l-section__content--about-us {
	padding: 2em;
	border-radius: 1.25em;
}
}

@media screen and (max-width:559px) {
.l-section__content--about-us {
	padding: 1em;
	border-radius: 0.75em;
}
}



.l-section__content--option-service-pc {
	display: block;
}

@media screen and (max-width:959px) {
.l-section__content--option-service-pc {
	display: block;
}
}

@media screen and (max-width:559px) {
.l-section__content--option-service-pc {
	display: none;
}
}



.l-section__content--option-service-sp {
	display: none;
}

@media screen and (max-width:959px) {
.l-section__content--option-service-sp {
	display: none;
}
}

@media screen and (max-width:559px) {
.l-section__content--option-service-sp {
	display: block;
}
}





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

.l-section--site-visual {
	margin-bottom: 0;
}




/* [Decoration]Notice List（ニュース）
   ================================================================= */

.l-section--notice-list {
	margin-bottom: 0;
	padding: 2.0em 0 3.0em;
}




/* [Decoration]About Us（カルガモでんきって？）
   ================================================================= */

.l-section--about-us {
	margin-bottom: 0;
	padding: 1.5em 0 3.0em;
	background-color: #e1f1f8;
}




/* [Decoration]Area Price（エリアごとの料金表）
   ================================================================= */

.l-section--area-price {
	margin-bottom: 0;
	padding: 1.5em 0 2.0em;
}




/* [Decoration]Option Service（お申込みオプションサービスについて）
   ================================================================= */

.l-section--option-service {
	margin-bottom: 0;
	padding: 1.5em 0 3.5em;
	background-color: #e1f1f8;
}

@media screen and (max-width:959px) {
.l-section--option-service {
}
}

@media screen and (max-width:559px) {
.l-section--option-service {
	padding-bottom: 1.5em;
}
}




/* [Decoration]Overrall Flow（お申込みから供給開始までの流れ）
   ================================================================= */

.l-section--overall-flow {
	margin-bottom: 0;
	
	/* padding: 1.5em 0 3.5em; */
	
}




/* [Decoration]Supply Agreement（電気受給約款）
   ================================================================= */

.l-section--supply-agreement {
	margin-bottom: 0;
	padding: 1.5em 0 3.0em;
	background-color: #e1f1f8;
}




/* [Decoration]Company Profile（会社概要）
   ================================================================= */

.l-section--company-profile {
	margin-bottom: 0;
	padding: 1.5em 0 3.5em;
}




/* [Decoration]Contact Form（お問合わせ）
   ================================================================= */

.l-section--contact-form {
	margin-bottom: 0;
	padding: 1.5em 0 3.5em;
	background-color: #e1f1f8;
}