@charset "utf-8";
/* CSS Document */


/* ---------------------------------------------------------
メインビジュアル
--------------------------------------------------------- */
#MV {
	background: url("../images/mv_back.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	padding: 10vw 0px;
}

.mv_inner {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 4rem 10rem;
}

.mv_inner > div .contact_btn {
	max-width: 523px;
	width: 100%;
	margin: 3vw auto 0px;
}




/* ---------------------------------------------------------
屋根貸して事業とは？
--------------------------------------------------------- */
section#about {
	background: #3AB4D8;
	padding: 6vw 0px 0px;
}

section#about::after {
	content: '';
	background: url("../images/icon_leaf.svg");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 17vw;
	height: 14vw;
	right: 8vw;
	bottom: -11vw;
	position: absolute;
}

section#about .sec_ttl_inner > * {
	color: #FDF156;
}

section#about .sec_ttl {
	font-size: clamp(2rem,5vw,6rem);
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
}

section#about .sec_ttl::before,
section#about .sec_ttl::after {
	content: '';
	background: #FDF156;
	display: inline-block;
	width: 70px;
	height: 3px;
}

section#about .sec_ttl:before {
	margin-right: 10px;
}

section#about .sec_ttl::after {
	margin-left: 10px;
}

section#about .sec_ttl_inner > span {
	font-size: clamp(1.6rem,3.2vw,3.2rem);
	margin-top: 10px;
}

section#about .sec_txt {
	color: #FFF;
}

section#about .sec_txt > span {
	color: #FDF156;
}

.about_box {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 30px;
	max-height: 1100px;
	width: 90%;
	margin: 0px auto;
}

.about_box > dl {
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.about_box > dl > * {
	width: 100%;
}

.about_box > dl > dt {
	background: #FFF4E3;
	font-size: clamp(1.8rem,3.6vw,3.6rem);
	font-weight: bold;
	color: #E28200;
	text-align: center;
	flex-grow: 1;
	line-height: 130%;
	padding: 3rem;
}

.about_box > dl > dd {
	background: #FFF;
	font-size: clamp(1.1rem,2.2vw,2.2rem);
	color: #2284A0;
	flex-grow: 20;
	line-height: 180%;
	text-align: justify;
	padding: 3rem 5rem;
}

.about_img {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin-top: 5rem;
}




/* ---------------------------------------------------------
なぜ初期投資・メンテナンス費用0円?
--------------------------------------------------------- */
section#fee {
	padding-top: 10vw;
	padding-bottom: 80px;
}

section#fee .back_txt::after {
	content: 'Why?';
}

section#fee .sec_ttl_inner.back_txt::after {
	color: rgba(58,180,216,0.1);
}

section#fee .sec_ttl_inner > * {
	color: #3AB4D8;
}

section#fee .sec_ttl_inner > span {
	font-size: clamp(2rem,4vw,4rem);
	text-align: center;
	line-height: 140%;
}

section#fee .sec_ttl {
	font-size: clamp(3.3rem,6.6vw,6.6rem);
}

section#fee .sec_ttl > big {
	font-size: clamp(5rem,10vw,10rem);
}

section#fee .ttl_icon::before {
	background: url("../images/midashi_fee.svg");
}

.fee_img {
	max-width: 1000px;
	width: 100%;
	margin: 0px auto;
}




/* ---------------------------------------------------------
なぜ初期投資・メンテナンス費用0円?
--------------------------------------------------------- */
section#merit.trapezoid .sec_ttl_wrap::before,
section#merit {
  background: #FFF9EA;
}

section#merit .back_txt::after {
	content: 'Merit';
	top: 40px;
}

section#merit .sec_ttl_inner.back_txt::after {
	color: rgba(253,193,31,0.15);
}

section#merit .sec_ttl_inner > * {
	color: #FDA81F;
}

section#merit .sec_ttl_inner > span {
	font-size: clamp(1.8rem,3.6vw,3.6rem);
	text-align: center;
	line-height: 140%;
}

section#merit .sec_ttl {
	font-size: clamp(3.3rem,6.6vw,6.6rem);
}

section#merit .ttl_icon::before {
	background: url("../images/midashi_merit.svg");
}

.merit_box {
	counter-reset: count 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6rem 1rem;
	margin-top: 18rem;
	margin-bottom: 30px;
}

.merit_box > dl {
	width: 32%;
	border: 4px solid #FDC11F;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 20px;
	background: #FFF;
}


.merit_box > dl::before {
	content: '0' counter(count);
	counter-increment: count 1;
	color: #FFF;
	background: #FDC11F;
	font-size: clamp(2rem,4.5vw,4.5rem);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: bold;
	border-radius: 50px;
	top: -50px;
	position: absolute;
	z-index: 1;
	width: 10rem;
	height: 10rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.merit_box > dl > * {
	overflow: hidden;
	padding: 3rem;
	width: 100%;
}

.merit_box > dl > dt {
	background: #FFF8C4;
	color: #E28200;
	text-align: center;
	font-size: clamp(1.4rem,2.2vw,2.2rem);
	font-weight: bold;
	font-feature-settings: 'palt';
	border-radius: 20px 20px 0px 0px;
	padding-top: 7rem;
	flex-grow: 0;
	line-height: 190%;
}

.merit_box > dl > dt > big {
	font-size: clamp(2.5rem,5.3vw,5.3rem);
	line-height: 0.5;
}

.merit_box > dl > dt > small {
	font-size: clamp(1.3rem,2.6vw,2.6rem);
	line-height: 0.8
}

.merit_box > dl > dd {
	flex-grow: 1;
	font-size: clamp(1.1rem,2.2vw,2.2rem);
}




/* ---------------------------------------------------------
屋根貸して事業（PPAモデル）は中途解約可能！
--------------------------------------------------------- */
section#kaiyaku {
}

section#kaiyaku .sec_ttl_wrap {
	background: #3AB4D8;
	color: #FFF;
	padding: 5rem 1rem;
}

section#kaiyaku .sec_ttl_inner {
	display: flex;
}

section#kaiyaku .sec_ttl_inner::before {
	content: '';
	background: url("../images/icon_panel.png");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 14vw;
	height: 14vw;
	left: -16vw;
	bottom: -50px;
	position: absolute;
}

section#kaiyaku .sec_ttl {
	font-size: clamp(2.2rem,5.2vw,5.2rem);
	line-height: 140%;
	text-align: center;
	filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
}

section#kaiyaku .sec_ttl > small {
	font-size: clamp(1.6rem,3.2vw,3.2rem);
}

section#kaiyaku .sec_ttl > span {
	color: #FDF156;
}

.kaiyaku_txt {
	display: flex;
	flex-wrap: wrap;
	gap: 5rem;
}

.kaiyaku_txt > dt {
	max-width: 520px;
	width: 100%;
}

.kaiyaku_txt > dd {
	max-width: 730px;
	width: 100%;
}

.kaiyaku_ttl {
	font-size: clamp(1.7rem,3.2vw,3.2rem);
	font-weight: bold;
	color: #E28200;
	margin-bottom: 3rem;
}

.kaiyaku_txt > dd > p {
	font-size: clamp(1.1rem,2.2vw,2.2rem);
	line-height: 180%;
	text-align: justify;
}

.assignment_wrap {
	max-width: 1250px;
	width: 100%;
	margin: 10rem auto;
	background: #FFF9EA;
}

.assignment_ttl {
	background: #3AB4D8;
	color: #FFF;
	font-size: clamp(2rem,4.1vw,4.1rem);
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2rem 1rem;
}

.assignment_ttl::before {
	content: '';
	background: url("../images/icon_solar.png");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 8.8rem;
	height: 8.8rem;
	left: 0px;
	position: relative;
	margin-right: 20px;
}

.assignment_table_wrap {
	background: #FFF9EA;
}

.assignment_table {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	padding: 5rem;
}

.assignment_table li {
	width: calc(98%/3);
}



/* ---------------------------------------------------------
電力供給開始までの流れ
--------------------------------------------------------- */
section#flow.trapezoid .sec_ttl_wrap::before {
  background: #E8F9FF;
}

section#flow {
  background: url("../images/flow_back.png") #E8F9FF;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
}

section#flow .sec_ttl_wrap {
  padding-top: 0px;
}

section#flow .sec_ttl {
	color: #3AB4D8;
	font-size: clamp(2.5rem,5vw,5rem);
}

.flow_img {
	background: #FFF;
	padding: 5rem;
	max-width: 1200px;
	width: 100%;
	margin: 0px auto;
}

.caution_inner {
	max-width: 1030px;
	width: 90%;
	margin: 5rem auto;
}

.caution_ttl {
	font-size: clamp(1rem,2.2vw,2.2rem);
	display: inline-flex;
	align-items: center;
	border: 1px solid #707070;
	padding: 20px 30px;
}

.caution_ttl::before {
	content: '';
	background: url("../images/icon_caution.svg");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 33px;
	height: 29px;
	left: 0px;
	position: relative;
	margin-right: 10px;
}

.caution_txt {
	font-size: clamp(1rem,2.2vw,2.2rem);
	margin-top: 5rem;
}

.caution_info {
	max-width: 1200px;
	width: 100%;
	margin: 0px auto;
	border-radius: 20px;
	overflow: hidden;
	background: #FFF;
}

.caution_info > * {
}

.caution_info > dt {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	background: #3AB4D8;
	padding: 3rem 5rem;
	gap: 2rem;
}

.caution_info > dt::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 50px solid transparent;
	border-top: 40px solid #3AB4D8;
}

.caution_check_list {
	line-height: 1.7;
	width: 79%;
}

.caution_check_list li {
	font-size: clamp(1.6rem,3vw,3.3rem);
	font-weight: bold;
	color: #FFF;
	display: flex;
	padding-left: 4vw;
}

.caution_check_list li::before {
	content: '';
	background: url("../images/icon_check.svg");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 3vw;
	height: 3vw;
	left: 0px;
	top: 7px;
	position: absolute;
}

.caution_img {
	width: 18%;
}

.caution_msg {
	width: 100%;
	font-size: clamp(2rem,5vw,5.5rem);
	font-weight: bold;
	color: #FDF156;
}

.caution_info > dd {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 3rem;
	padding: 5rem;
}

.caution_info > dd > div > p:nth-of-type(1) {
	color: #C65735;
	font-size: clamp(1.4rem,2.8vw,2.8rem);
	font-weight: 600;
	text-align: center;
}

.caution_info > dd .tel_num {
	color: #C65735;
	font-size: clamp(3rem,6vw,6rem);
	font-weight: bold;
}

.caution_info > dd .contact_btn {
	font-size: clamp(1.3rem,2.3vw,2.3rem);
	font-weight: bold;
	border-radius: 16px;
}

.caution_info > dd .contact_btn a {
	padding: 2vw 2vw;
}


/* ---------------------------------------------------------
施工事例・お客様の声
--------------------------------------------------------- */
section#voice {
	padding-bottom: 80px;
}

section#voice .sec_ttl_wrap {
	background: #FDC11F;
	padding: 5rem 1rem;
	margin-top: 10rem;
}

section#voice .sec_ttl {
	color: #FFF;
	font-size: clamp(2.5rem,4vw,5rem);
}

.voice_wrap {
	max-width: 1100px;
	width: 100%;
	margin: 5vw auto;
	display: grid;
	gap: 2rem;
}

.voice_wrap > dl > dt {
	background: #FFF8C4;
	font-size: clamp(1.8rem,2.8vw,2.8rem);
	font-weight: bold;
	padding: 35px 20px;
}

.voice_wrap > dl > dd {
	padding: 3rem;
}

.voice_client {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 0px 4vw 0px 7vw;
}

.voice_client::before {
	content: '';
	background: url("../images/icon_megaphone.svg");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 9rem;
	height: 9.5rem;
	left: 10px;
	position: absolute;
}

.voice_client > span:nth-of-type(1) {
	color: #E28200;
}

.voice_client > span:nth-of-type(2) {
	color: #3AB4D8;
}

.voice_wrap > dl > dd {
	background: #FFF9EA;
	padding: 3rem 3rem 6rem;
	display: grid;
	place-items: center;
	gap: 3rem;
}

.voice_img {
	max-width: 820px;
	width: 80%;
}

.voice_txt {
	width: 90%;
	font-size: clamp(1.1rem,2.2vw,2.2rem);
	font-weight: 600;
	line-height: 160%;
	text-align: justify;
}




/* ---------------------------------------------------------
よくあるご質問
--------------------------------------------------------- */
section#faq.trapezoid .sec_ttl_wrap {
    padding-top: 2vw;
}

section#faq.trapezoid .sec_ttl_wrap::before,
section#faq {
  background: #3AB4D8
}

section#faq {
	background-image: url("../images/faq_back.svg");
	background-repeat: no-repeat;
	background-size: 28vw 33vw;
	background-position: right bottom;
	padding-bottom: 5vw;
}

section#faq .back_txt::after {
	content: 'FAQ';
	top: 10px;
}

section#faq .sec_ttl_inner.back_txt::after {
	color: #51BEDE;
}

section#faq .sec_ttl {
	font-size: clamp(2.4rem,5vw,5.4rem);
	color: #FFF;
}

.faq_list {
	max-width: 1000px;
	width: 90%;
	margin: 0px auto;
	display: grid;
	gap: 3rem;
}

.faq_list > dl {
	border-radius: 20px;
	overflow: hidden;
}

.faq_list > dl > dt {
	background: #FFF9EA;
	font-size: clamp(1.5rem,3vw,3rem);
	font-weight: bold;
	color: #E28200;
}

.faq_list > dl > dt > p {
	display: flex;
	align-items: center;
	line-height: 160%;
}

.faq_list > dl > dd {
	background: #FFF;
	font-size: clamp(1.1rem,2.2vw,2.2rem);
	font-weight: 600;
}

.faq_list > dl > * {
	padding: 2.6rem 3rem;
}

.faq_list > dl > * > p::before {
	font-family: "FOT-筑紫B丸ゴシックStd", sans-serif;
	font-size: clamp(3rem,5vw,5.8rem);
	display: inline-block;
	margin-right: 3vw;
	position: relative;
}

.faq_list > dl > dt > p::before {
	content: 'Q';
}

.faq_list > dl > dd > p::before {
	content: 'A';
	color: #3AB4D8;
	left: 5px;
}

.faq_content {
	display: flex;/* 子要素を横並びにし、縦位置を制御可能にする */
	align-items: center;/* デフォルトは縦中央 */
	position: relative;  
	line-height: 1.6;
}

/* 3行以上の場合は上部揃え */
.faq_content.long {
	align-items: flex-start;
}

.faq_content.long::before {
	top: -20px;
}


/* ---------------------------------------------------------
会社情報
--------------------------------------------------------- */
section#company {
	padding-top: 10vw;
	background: url("../images/company_back.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top -10%;
}

section#company .sec_ttl {
	color: #E28200;
	font-size: clamp(2.5rem,5vw,5rem);
}

.company_midashi {
	font-size: clamp(1.8rem,3vw,3rem);
	color: #3AB4D8;
	margin-bottom: 5rem;
}

.company_midashi > span {
	color: #E28200;
}

.company_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 3rem;
}

.info_area {
	width: 62%;
}

.img_area {
	width: 29%;
}

.info_inner:nth-of-type(2) {
	margin-top: 6rem;
}

.company_info_ttl {
	color: #FDC11F;
	font-size: clamp(1.3rem,2.6vw,2.6rem);
	font-weight: bold;
	padding: 2rem 3rem;
}

.company_table {
	width: 100%;
}

.company_table tr > * {
	font-size: clamp(1.1rem,2.2vw,2.2rem);
	padding: 2rem 3rem;
}

.company_table tr > th {
	border-bottom: 2px solid #FDC11F;
	text-align: left;
	word-break: keep-all;
}

.company_table tr:nth-of-type(1) > th {
	border-top: 2px solid #FDC11F;
}

.company_table tr > td {
	border-bottom: 1px solid #AFAFAF;
}

.company_table tr:nth-of-type(1) > td {
	border-top: 1px solid #AFAFAF;
}

.img_area > dl {
	max-width: 378px;
}

.img_area > dl:nth-of-type(n+2) {
	margin-top: 30px;
}

.img_area > dl > dd {
	font-size: clamp(1rem,2vw,2rem);
	margin-top: 10px;
	display: flex;
	justify-content: center;
}


/* ---------------------------------------------------------
連絡先
--------------------------------------------------------- */
section#info {
	padding: 5vw 0px 0px;
	background: #FFF9EA;
}

section#info .inner_wrap {
	max-width: 950px;
}

section#info .sec_txt {
	color: #E28200;
	margin-top: 0px;
}

.info_ttl {
	color: #C65735;
	font-size: clamp(2.3rem,4.6vw,4.6rem);
	border: 1px solid #C65735;
	padding: 10px;
	text-align: center;
}

.tel_area {
	margin-top: 3rem;
	color: #C65735;
	font-weight: 600;
	text-align: center;
}

.tel_txt_01 {
	color: #C65735;
	font-size: clamp(1.3rem,2.6vw,2.6rem);
}

.tel_txt_02 {
	color: #E28200;
	font-size: clamp(1.1rem,2.2vw,2.2rem);
}

section#info .sec_bottom_img > p {
	max-width: 266px;
	width: 70%;
}


/* ---------------------------------------------------------
お問い合わせフォーム
--------------------------------------------------------- */
section#contact {
	padding: 5vw 0px env(safe-area-inset-bottom);
	background: #FDC11F;
}

section#contact .inner_wrap {
	max-width: 1100px;
	background: #FFF;
}

.contact_ttl {
	background: #E28200;
	color: #FFF;
	font-size: clamp(1.6rem,3.2vw,3.2rem);
	padding: 2rem 1rem;
	text-align: center;
}

.form_wrap {
	padding: 0px 5rem 5rem;
}

.form_table {
	width: 100%;
	margin: 0px;
}

.form_table tr {
	border-bottom: 1px solid #707070;
	padding: 3rem;
	display: flex;
	align-items: center;
}

.form_table tr:last-of-type {
	align-items: flex-start;
}

.form_table tr > * {
	font-size: clamp(1rem,2vw,2rem);
}

.form_table tr > th {
	width: 30%;
	text-align: left;
	padding: 1rem 0px;
	display: flex;
	align-items: center;
}

.form_table tr > th.must::before {
	content: '必須';
	background: #D51313;
	color: #FFF;
	border-radius: 2px;
	font-size: clamp(1rem,1.6vw,1.6rem);
	font-weight: bold;
	padding: 2px 5px;
	margin-right: 1em;
	word-break: keep-all;
}

.form_table tr > td {
	width: 70%;
	display: grid;
	gap: 5px;
}

.form_table tr > td > label {
	display: flex;
	align-items: center;
}

.form_table tr > td > label > input {
	margin-right: 5px;
}

.form_table tr > td > label > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none; /* Safari・Chrome用 */
  -moz-appearance: none;    /* Firefox用 */
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  position: relative;
  outline: none;
  top: 2px;
  background: #EDEDED;
}


/* チェックマークの作成 */
.form_table tr > td > label > input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 4px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* チェック時のスタイル */
.form_table tr > td > label > input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

.form_table tr > td > label > input[type="checkbox"]:checked::after {
  opacity: 1;
}


.form_table tr > td > input,
.form_table tr > td > textarea {
	width: 80% !important;
	padding: 10px;
	background-color: #FFF !important;
}

.form_table tr > td > textarea {
	height: 250px !important;
	padding: 10px;
}

.form_table tr:last-of-type {
	flex-wrap: wrap;
}

.privacy_policy {
	width: 70%;
	height: 250px;
	overflow: scroll;
	border: 1px solid #BAB9B9;
	margin: 3rem auto;
	padding: 3rem;
}

.policy_list {
	display: grid;
	gap: 2rem;
}

.policy_list li {
	font-size: clamp(1rem,1.6vw,1.6rem);
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	line-height: 160%;
	color: #212121;
}

.policy_check {
	font-size: clamp(1.3rem,1.6vw,1.6rem);
	text-align: center;
}

.mfp_buttons {
	display: flex;
}

.mfp_buttons > button {
	background: #FF9800;
	color: #FFF;
	font-size: 1.6rem;
	border-radius: 4px;
	border: 0px;
	max-width: 266px;
	width: 70%;
	padding: 20px 0px;
	margin: 3rem auto 0px;
}

#mfp_hidden {
	display: none;
}

/* ベースのスタイル（モバイルでは非表示） */
.fixed-side-btn {
  display: none; /* デフォルトで非表示 */
}

/* PCサイズ（画面幅768px以上）のみ適用されるスタイル */
@media screen and (min-width: 768px) {
  .fixed-side-btn {
    display: block;        /* 表示する */
    position: fixed;       /* 画面に固定 */
    right: 0;              /* 右端に配置（少し隙間を開けるなら 10px など） */
    top: 50%;              /* 上から50%の位置 */
    transform: translateY(-50%); /* ボタンの高さの半分だけ上にずらして完全な中央にする */
    z-index: 9999;         /* 他の要素より手前に表示 */
    transition: opacity 0.3s; /* ホバー時のアニメーション設定 */
  }

  /* リンクの画像に対するスタイル */
  .fixed-side-btn img {
    display: block;        /* 画像の下に隙間ができるのを防ぐ */
    max-width: 100%;       /* 画像サイズ調整 */
    height: auto;
  }

  /* ホバー時の挙動（マウスを乗せたとき） */
  .fixed-side-btn:hover {
    opacity: 0.8;          /* 少し透明にしてクリックできる感を出す */
  }
}

.estimate p {
	text-align: center;
}

#simulation {
	background-color: #FFF9EA;
	text-align: center;
}
#simulation img {
	margin: auto;
}