@charset "UTF-8";

/**************************************************************
    太陽光発電の復旧工事 - restoration - 
***************************************************************/

/* Custom page CSS
-------------------------------------------------- */
/* ========================================
BootStrap5 - Breakpoint - Mobile-First
@media (min-width: 576px)  {   }
@media (min-width: 768px)  {   }
@media (min-width: 992px)  {   }
@media (min-width: 1200px) {   }
@media (min-width: 1400px) {   }
======================================== */
/* ========================================
BootStrap5 - Breakpoint - Desktop-First
@media (max-width: 1399.98px) {  } // `xxl` applies to x-large devices (large desktops, less than 1400px)}
@media (max-width: 1199.98px) {  } // `xl` applies to large devices (desktops, less than 1200px)}
@media (max-width: 991.98px)  {  } // `lg` applies to medium devices (tablets, less than 992px)}
@media (max-width: 767.98px)  {  } // `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 575.98px)  {  } // `sm` applies to x-small devices (portrait phones, less than 576px)}
======================================== */



:root {
	--beige-color: #f3f1e8;
	--blue-color: #004e97;
	--dark-blue-color: #052444;
	--light-blue-color: rgb(71, 170, 216);
	--yellow-color: #ffdd00;
	--green-color: #029405;
	--note-color: #9a9064;
	--gray-color: #dddddd;
	--dark-gray-color: #a1a1a1;
	--gray-square-size: 60px;
	--options-title-height: 50px;
	--bs-border-color: #999;
}

.navbar {
	--bs-navbar-toggler-padding-y: 0.125rem;
	--bs-navbar-toggler-padding-x: 0.5rem;
	--bs-navbar-brand-margin-end: 0.25rem;
}
.navbar-toggler-icon {
	width: 1.125em;
	height: 1.25em;
}


/********************************
    DISPLAY DEVICE
*********************************/
.pc { display:block !important;}
.sp { display:none !important;}

@media screen and (max-width: 575.98px) {
	.pc { display:none !important;}
	.sp { display:block !important;}
}


/********************************
    BASE
*********************************/
html, body {
	/* font-family: "Josefin Sans","Open Sans", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif; */
	font-family: "Noto Sans JP",Arial,sans-serif;
	font-size: 18px;
	line-height: 1.8em;
	font-weight: 400;
	color: var(--bs-black);
}
body {
	position: relative;
	width: 100%;
	overflow-x: hidden;
}
main > .container-fluid { padding: 60px 15px;}

header { line-height: 1.0;}
header .navbar { padding: 0;}
header .nav-link { font-weight: bold; line-height: 1.5;}
header .navbar-brand img { height: 50px;}
header .offcanvas-title img { width:90%;}

footer   { font-size: 13px;}
footer a { color: #FFF;}

@media screen and (max-width: 767px) {
	html, body { font-size: 15px; line-height: 1.5;}
	header .offcanvas-body .navbar-nav { margin-bottom: 1.5em;}
}

@media screen and (max-width: 767px) {
	header .nav-link { font-size: 1.5rem; font-weight: 400; color: #000;}
	header .navbar-brand img { height: 28px;}
	.hd_tel_wrap { text-align: center;}
	.hd_tel,
	.hd_uke { display: block;}
	.hd_tel {
		font-size: 1.25rem;
		font-weight: 600;
		font-family: "Times New Roman", Times, serif;
		color: #036;
	}
	.hd_tel::before {
		content: "";
		display: inline-block;
		width: 22px;
		height: 15px;
		background: url(_imgs_saigai/icon_freedial.png) no-repeat;
		background-size: contain;
		margin-right: 3px;
		margin-bottom: -2px;
	}
	.hd_uke { font-size: 11px; color: #036;}
}

/********************************
    COMMON
*********************************/
h1, .h1, h2, .h2, h3, .h3 { margin-bottom: 0; line-height: 1.5;}
rt { font-size: 15px; font-weight: normal;} /* ルビ */

a { text-decoration: none;}

.memo      { font-size: 0.75em;}

small      { font-size: 0.75rem;}
.xlarge    { font-size: 1.75em;}
.larger    { font-size: 1.5em;}
.large     { font-size: 1.25em;}
.small     { font-size: 0.85em;}
.smaller   { font-size: 0.7em;}
.xsmall    { font-size: 0.5rem;}

.fw_bold   { font-weight: bold;}
.fw_normal { font-weight: normal;}

.text-yellow { color: yellow;}
.text-orange { color: #FF5F00;}

.underline     { text-decoration: underline;}
.underline_yl  { border-bottom: 2px solid #FCD021;}
.emphasis_yl   { color: #FCD021}
.emphasis_maru { text-emphasis: circle #FF3030;}

.marker { background: linear-gradient(transparent 65%, #FDD23C 65%); margin-right:4px; margin-left:4px;}
.inline-block { display: inline-block;}
.rt-center { text-align: center; letter-spacing: 0;} /* ルビのセンタリング */

ul.kome            { list-style: none; padding-left: 0;}
ul.kome li         { position: relative; padding-left: 1.125em; line-height: 1.3;}
ul.kome li::before { content: '\0203B'; position: absolute; left: 0;}

.float-right { float: right !important;}
.float-left  { float: left !important;}


/********************************
    CONTACT BUTTONS
*********************************/
.button_wrap   { font-size: 15px; line-height: 1.1;}
.button_wrap a { display:block;}

a.btn-c { margin: 0.25em 0.75em; padding: 0.5rem 0.5rem; border-radius: 0; font-size: 28px;}

a.btn--orange,
a.btn--blue,
a.btn--green,
a.btn--white {}

a.btn--orange        { background: #eb6100; color: #fff; font-weight: 400;}
a.btn--orange:hover,
a.btn--orange:active { background: #D00; color: #fff;}
a.btn--blue          { background: #004E97; color: #fff; font-weight: 400;}
a.btn--blue:hover,
a.btn--blue:active   { background: #134469; color: #fff;}
a.btn--green         { background: #06C755; color: #fff; font-weight: 400;}
a.btn--green:hover,
a.btn--green:active  { background: #00814A; color: #fff;}
a.btn--white         { background: #fff; color: #036; font-weight: 400;}
a.btn--white:hover,
a.btn--white:active  { background: #003366; color: #fff;}

a.btn--line          { background: #fff; color: #06C755; font-weight: 400; border: 3px solid #06C755;}
a.btn--line:hover,
a.btn--line:active   { background: #00814A; color: #fff;}

.line { font-size: 30px; font-weight: 600;}
.line::before {
	content: "";
	display: inline-block;
	width: 54px;
	height: 60px;
	background: url("_imgs_saigai/icon_line.png") no-repeat;
	background-size: contain;
	background-position: center 8px;
	margin-right: 8px;
	margin-bottom: -17px;
}
.email { font-size: 30px; font-weight: 600;}
.email::before {
	content: "";
	display: inline-block;
	width: 54px;
	height: 32px;
	background: url("_imgs_saigai/icon_email.png") no-repeat;
	background-size: contain;
	margin-right: 3px;
	margin-bottom: -5px;
}
.freedial { font-size: 42px; font-weight: 600; font-family: "Times New Roman", Times, serif;}
.freedial::before {
	content: "";
	display: inline-block;
	width: 60px;
	height: 32px;
	background: url("_imgs_saigai/icon_freedial.png") no-repeat;
	background-size: contain;
	margin-right: 3px;
	margin-bottom: -2px;
}
.uketsuke { font-size: 16px;}

.btn--line     { line-height:2.10; max-height: 88px;}
.btn--email    { line-height:2.35; max-height: 88px;}
.btn--freedial { line-height:1.25; max-height: 88px;}

@media screen and (max-width: 1025px) {
	a.btn-c { margin: 0.5em 0; padding: 0.5rem 1.5rem;}

	.line     { font-size: 24px;}
	.email    { font-size: 24px;}
	.freedial { font-size: 36px;}
	.uketsuke { font-size: 14px;}

	.email::before    { width: 40px; height: 26px;}
	.freedial::before { width: 50px; height: 28px;}
	.line::before     { width: 40px; height: 60px; margin-bottom: -25px;}

	.btn-email    { line-height:2.35; max-height: 80px;}
	.btn-freedial { line-height:1.25; max-height: 80px;}
	.btn--line    { line-height:2.0 ; max-height: 80px;}
}
@media screen and (max-width: 768px) {
	a.btn-c { margin: 0.5em; padding: 0.5rem 1.125rem; font-size: 24px;}

	.line     { font-size: 22px;}
	.email    { font-size: 22px;}
	.freedial { font-size: 32px;}
	.uketsuke { font-size: 12px;}

	.btn-email    { line-height:2.35; max-height: 70px;}
	.btn-freedial { line-height:1.25; max-height: 70px;}
	.btn--line    { line-height:2.0 ; max-height: 70px;}
}
@media screen and (max-width: 480px) {
	.button_wrap { font-size: 15px;}
	.btn-email { line-height: 1.75;}
}


/********************************
    OFFCANVAS
*********************************/
.offcanvas { max-width: 90%;}
header .nav-link:hover,
header .nav-link:active { color: #00f;}


/********************************
    CTA
*********************************/
#cta { position: relative; padding: 30px 0;}
#cta .cta_lead_text  { line-height: 1.5; font-size: 1.5em; font-weight: bold;}
#cta .cta_button_box { margin-top: 0.5em; margin-bottom: 0.5em;}
#cta .cta_image      { position: absolute; right: 20%; top: -50px; width: 320px;}

@media screen and (max-width: 1980px) {
	#cta .cta_image     { right: 10%; top: -60px; width: 300px;}
}
@media screen and (max-width: 1400px) {
	#cta .cta_image     { right: 5%; top: -60px; width: 280px;}
}
@media screen and (max-width: 1025px) {
	#cta .cta_image     { right: 0; top: -100px; width: 240px;}
}
@media screen and (max-width: 768px) {
    #cta .cta_image     { right: 0; top: -80px; width: 210px;}
	#cta .cta_lead_text { font-size: 1.5em;}
}
@media screen and (max-width: 480px) {
	#cta .cta_image     { right: 10%; top: -8vh; width: 36%;}
	#cta .cta_lead_text { font-size: 1.35em;}
}


/********************************
    SECTIONs
*********************************/
section { padding: 80px 0 80px;}

@media screen and (max-width: 480px) {
	section { padding: 30px 0 30px;}
}

/* ------------------------
#intro       イントロ
#examples    トラブルの実例
#reason      選ばれる理由
#trouble     トラブル防止策
#voice       お客様の声
#contact     お問い合わせ
------------------------ */

/********************************
    INTRO
*********************************/
.intro {
	margin-top: 60px;
	padding: 0;
	background-image: url(./_imgs_restoration/hero_pc_bg.jpg);
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #B3C3E5;
}
.intro h1 {
	margin: 0;
	padding: 0;
	text-indent: -99999px;
	height: 0;
}
.hero_image { width: 100%;}

@media (max-width: 1399.98px) {
	.intro { min-height: auto;}
}
@media (max-width: 1199.98px) {
	.intro { min-height: auto;}
}
@media (max-width: 991.98px) {
	.intro { min-height: auto;}
}
@media (max-width: 767.98px) {
	.intro { min-height: auto;}
}
@media (max-width: 575.98px) {
	.intro {
		margin-top: 38px;
		min-height: auto;
	}
}


/********************************
    EXAMPLES - トラブルの実例
*********************************/
.examples {
	background-image: url('_imgs_restoration/bg_uneune.jpg');
	background-color: rgba(255,255,255,0.6);
	background-blend-mode: lighten;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.examples h2 {
	margin-bottom: 1.0em;
	text-align: center;
}
.bar_heading {
	font-weight: bold;
	padding: 0 2.5em;
	width: fit-content;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
.bar_heading::before,
.bar_heading::after {
	content: '';
	background: #006a9c;
	width: 2em;
	height: 2px;
	position: absolute;
	top: 55%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
.bar_heading::before { left: 0;}
.bar_heading::after  { right: 0;}

.examples .exa_box {
	margin: 8px;
	padding: 25px 25px 15px;
	height: 100%;
	background: #fff;
	border-radius: 10px;
	box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
}
.examples .exa_box img { width: 100%;}
.examples .exa_box h5  { margin: 0.75em 0 0.5em; text-align: center;}
.examples .exa_box p   { margin: 0;}

@media (max-width: 991.98px) {
	.examples .exa_box {
		margin: 2px;
		padding: 15px 10px 10px;
	}
	.examples .exa_box p {
		line-height: 1.5;
	}
}

@media screen and (max-width: 599px) {
	.examples { padding-bottom: 0;}
	.examples h2 { margin-bottom: 0.75em;}
	.examples .exa_box_sp { background: unset; margin: 0; padding: 5px; box-shadow: unset;}
	.examples .subimg { width: 100%;}
	.examples h5 { margin: 0.5em 0 0.25em; font-size: 1.1em; text-align: center;}
	.sugu_taiou { padding: 1.5em 0; background: #fff;}
	.btn_box_sp { color: #000; font-size: 1.75rem; font-weight: 600; line-height: 1.8; text-align: center;}
	.btn_subtxt { display: block; font-size: 1.25rem;}
}

/* ---- BTN-BOX ---- */
.btn_box {
	display: block;
	max-width: 680px;
	height: 100px;
	margin: 2.5em auto 0;
	padding-top: 10px;
	border: 3px solid #2187CA;
	background: #fff;
	overflow: hidden;
	border-radius: 100px;
	color: #000;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-align: center;
}
.btn_subtxt { display: block; font-size: 1.0rem;}


/********************************
    REASON - 選ばれる理由
*********************************/
.reason { background: #086FB2; background: linear-gradient(180deg, rgba(8, 111, 178, 1) 80%, rgba(133, 178, 224, 1) 80%);}
.reason .title_reason { margin-bottom: 1.0em; color: #fff; text-align: center;}

.reason .reason_inner { height: 100%; margin: 0; padding: 2.0em; background: #fff; border-radius: 10px; overflow: hidden;}
.reason .reason_inner_in { margin: 0 3em 0 3em; z-index: 2;}
.reason .reason_inner_in p { text-align: justify;}
.reason { counter-reset: h3;}
.reason h3 { display: flex; font-size: 1.35rem; font-weight: 600; line-height: 2.5rem; margin-bottom: 0.25em;}
.reason h3:before {
	counter-increment: h3;
	content: counter(h3);
	width: 3rem;
	height: 3rem;
	margin-right: 0.8rem;
	background-color: #fff;
	border: 5px solid #FCD021;
	border-radius: 50%;
	color: #000;
	font-size: 2.0rem;
	font-weight: 600;
	line-height: 2.25rem;
	flex-shrink: 0;
	text-align: center;
}
.reason .reason-table { width: 100%; margin: 0 auto; background: #EEF0F2; border-collapse: collapse; border-top: 1px solid #086FB2; border-left: 1px solid #086FB2; }
.reason .reason-table th,
.reason .reason-table td { padding: 0.5em; border-right: 1px solid #086FB2; border-bottom: 1px solid #086FB2; text-align: center; box-sizing: border-box; display: block;}
.reason .reason-table th { background: #086FB2; color: #fff;}
.reason .reason-table .reason_data { font-size: 1.5rem; font-weight: 600;}
.reason .flow_graph_text { text-align: right; font-size: 0.75rem;}

@media screen and (max-width: 599px) {
	.reason .title_reason { margin-bottom: 0.125em;}
	.reason .reason_inner { height: auto; margin: 1.0em; padding: 1.0em 1.5em;}
	.reason h3 { font-size: 1.2rem;}
	.reason h3:before { width: 2.5rem; height: 2.5rem; margin-right: 0.5rem; font-size: 1.5rem; line-height: 1.75rem;}
	
	.reason .reason-table { width: 100%;}
	.reason .flow_graph_text { text-align: left;}
	.reason .reason_inner_in { margin: 0.75em 0 0;}
}

.img_saihatsu_boushi { width: 70%; float: right; margin: 3.5em -5.0em -3.0em -4em;}
.img_hoken_taiou     { width: 65%; float: left; margin: 3.0em 1.0em 0 -6em;}

@media screen and (max-width: 599px) {
	.img_saihatsu_boushi { width: 60%; float: right; margin: 1em -2.5em 0em -3em;}
	.img_hoken_taiou     { width: 65%; float: left; margin: 5em -2em 0 -2.5em;}
}

/* ---- CTA small version ---- */
.cta_sm { margin: 0;}
.cta_head_text { padding: 0.75em 0; color: #004E97; font-size: 1.25rem; font-weight: 600; text-align: center;}
.cta_btn_wrap { display: flex; width: 100%; justify-content: center; align-items: center; gap: 24px;}
.custom-btn {
	width: 400px;
	height: 60px;
	color: #fff;
	border-radius: 5px;
	line-height: 60px;
	font-weight: 600;
	text-align: center;
	background: transparent;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	display: inline-block;
	outline: none;
}
.btn-kirari {
	border: 2px solid #77B7EC;
	background: rgb(251,33,117);
	background: linear-gradient(90deg, rgba(18,94,145,1) 0%, rgba(38,150,222,1) 100%);
	color: #fff;
	overflow: hidden;
}
.btn-kirari:hover {
	text-decoration: none;
	color: #fff;
}
.btn-kirari:before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: #fff;
	animation: shiny-btn 4s ease-in-out infinite;
}
.btn-kirari:hover{
	opacity: 0.7;
}
.btn-kirari:active{
	box-shadow: 4px 4px 6px 0 rgba(255,255,255,0.3),
	-4px -4px 6px 0 rgba(116,125,136,0.2), 
	inset -4px -4px 6px 0 rgba(255,255,255,0.2),
	inset 4px 4px 6px 0 rgba(0,0,0,0.2);
}
@-webkit-keyframes shiny-btn {
	0%   { -webkit-transform: scale(0) rotate(45deg); opacity: 0;}
	80%  { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5;}
	81%  { -webkit-transform: scale(4) rotate(45deg); opacity: 1;}
	100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0;}
}
.cta_tel_and_line {
	display: flex;
	gap: 24px;
}
.cta_btn_tel,
.cta_btn_line {
	display: inline-block;
	width: 200px;
	text-align: center;
	text-decoration: none;
	line-height: 60px;
	font-weight: 600;
	outline: none;
	color: #1B85FB;
	background-color: #fff;
	position: relative;
	border-radius: 5px;
	border: 2px solid #51A2F3;
	transition: color 0.5s ease;
}
.cta_btn_tel:hover,
.cta_btn_line:hover {
	color: #fff;
}
.cta_btn_tel:hover::before,
.cta_btn_line:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}
.cta_btn_tel::before,
.cta_btn_line::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #1B85FB;
	transform: scaleX(0);
	transform-origin: right;
	transition: all 0.5s ease;
	transition-property: transform;
}
.cta_btn_text {
  position: relative;
}
@media screen and (max-width: 599px) {
	.cta_head_text { padding: 0.75em 0; font-size: 1.125rem; line-height: 1.3;}
	.cta_sm { margin: 0 30px;}
	.cta_btn_wrap { flex-direction: column; width: 100%; center; gap: 15px; font-size: 1.1rem;}
	.custom-btn { width: 100%; height: 50px; line-height: 46px;}
	.cta_tel_and_line { width: 100%; gap: 15px;}
	.cta_btn_tel,
	.cta_btn_line { width: 50%; line-height: 40px;}
}


/********************************
    TROUBLE - トラブル防止策
*********************************/
.trouble { padding-top: 0; background: #EEF0F2;}
.trouble .trouble_wrap { padding-top: 3.5em; padding-bottom: 1.5em; background: #fff;}
.trouble .h2sub { color: #004E97; font-weight: 600;}
.trouble h3 { margin: 1.5em 0 1.0em; font-size: 1.5rem;}
.head-border { display: flex; align-items: center;}
.head-border:before,
.head-border:after  { content: ""; height: 1px; flex-grow: 1; background-color: #666;}
.head-border:before { margin-right: 1rem;}
.head-border:after  { margin-left: 1rem;}
.higai_data p { line-height: 1.6; text-align: justify; color: #222;}
.higai_headbox { margin-bottom: 2.5em; padding: 1.0em 0.75em 0.75em; background: #fff; text-align: center;}
.higai_gaku { font-weight: 600; font-size: 20px;}
.higai_gaku .higai_price { padding-left: 0.5em; font-size: 32px;}
.higai_desc { font-weight: 600;}
.higai_pics { display: flex; flex-direction: column; gap: 20px; padding: 0 20px;}
.higai_img { width: 100%; margin: 0 auto; border-radius: 10px;}
.taisaku_box { margin-bottom: 30px; padding: 30px; border-radius: 20px; background: #fff;}
.taisaku_box h4 { margin-bottom: 1.5em; font-size: 1.35em; line-height: 1;}
.taisaku_box h4 span { font-weight: normal;}
.taisaku_box h5 { font-size: 1.15em;}
.taisaku_box .img_flex { display: flex; flex-direction: column; gap: 20px;}
.taisaku_box .badge { font-size: 1.0rem; line-height: 1.2;}
.link_solamiru { text-align: center;}
.background_btn03 {
	position: relative;
	width: 100%;
	max-width: 350px;
	color: #fff;
	font-weight: 600;
	background: #00C2FA;
	background: linear-gradient(90deg, rgba(0, 194, 250, 1) 0%, rgba(1, 141, 242, 1) 50%, rgba(0, 93, 234, 1) 100%);
	transition: all 0.5s;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	padding: 1em 1.5em;
	border-radius: 5px;
	border: 2px solid #fff;
}
.background_btn03::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all 0.4s;
	border: 2px solid #B058D6;
	transform: scale(1.5,1.5);
	opacity: 0;
	z-index: 1;
}
.background_btn03:hover { background: #fff; color: #086FB2;}
.background_btn03:hover::after { opacity: 1; transform: scale(1,1);}

@media (max-width: 991.98px) {
	.higai_pics { display: flex; flex-direction: row; gap: 20px; padding: 0 20px;}
	.higai_img { width: 50%;}
	.higai_headbox { margin: 1.5em 0;}
	.taisaku_box .img_flex { margin-top: 1.5em; display: flex; flex-direction: row; gap: 20px;}
	.taisaku_box img { width: 50%;}
}

@media screen and (max-width: 599px) {
	.trouble { background: #fff;}
	.trouble_bg_sp { background: #fff;}
	.trouble_bg_inner { margin-bottom: 20px; padding: 10px 15px 0; background: #EEF0F2; border-radius: 10px;}
	.trouble .trouble_wrap { padding-top: 2.0em; padding-bottom: 2.0em;}
	.trouble h2 { font-size: 1.5rem; line-height: 1.3;}
	.trouble .h2sub { font-size: 1.125em;}
	.trouble h3 { margin: 0.75em 0 0.5em; text-align: center; font-size: 1.4rem; line-height: 1.3;}
	.higai_data p { line-height: 1.5;}
	.higai_headbox { margin: 1em 0; padding: 0.35em 0.75em 0.5em;}
	.higai_pics { display: flex; flex-direction: row; gap: 10px; padding: 0;}
	.higai_img { width: calc(50% - 4px); border-radius: 5px;}
	.white_wrap_sp { margin: 2.5em 5px 1.5em; padding: 1px 0 10px; background: #fff; border-radius: 10px;}
	.taisaku_box { margin: 0 10px; padding: 10px; border-radius: 0;}
	.taisaku_box h4 { margin-bottom: 0.5em; line-height: 1.3;}
	.taisaku_box h5 { margin-top: 1.0em; font-size: 1.125em;}
	.taisaku_box img { margin-top: 1em; border-radius: 5px;}
	.taisaku_box .img_full { width: 100%; border-radius: 0;}
	.taisaku_box .img_flex { margin-top: 1.0em; gap: 15px;}
	.dot_border_top { border-top: 2px dotted #ccc;}
	.background_btn03 { width: 100%; max-width: 300px;}
	.background_btn03::after { content: none;}
	.background_btn03:hover { border: 2px solid #B058D6;}
	.taisaku_box .badge { font-size: 1.0rem;}
}

/* ---- READMORE - 続きを読む ----*/
.readmore-check { display:none;}

@media screen and (max-width: 599px) {
	.readmore{
		position: relative;
		box-sizing: border-box;
		padding: 0 10px;
		border: 0px solid #CCC;
	}
	.readmore-content{
		position: relative;
		overflow: hidden;
		height: 100px;
	}
	.readmore-content::before {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		content: "";
		height: 50px;
		background: -webkit-linear-gradient(top, rgba(238,240,242,0) 0%, rgba(238,240,242,0.8) 50%, rgba(238,240,242,0.8) 50%, #EEF0F2 100%);
		background: linear-gradient(top, rgba(238,240,242,0) 0%, rgba(238,240,242,0.8) 50%, rgba(238,240,242,0.8) 50%, #EEF0F2 100%);
	}
	.readmore-label{
		display: table;
		bottom: 5px;
		position: absolute;
		bottom: 5px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		margin: 0 auto;
		z-index: 2;
		padding: 0 15px 2px;
		background-color: #999;
		border-radius: 20px;
		color: #FFF;
	}
	.readmore-label:before{
		content: '続きを読む';
	}
	.readmore-check{
		display: none;
	}
	.readmore-check:checked ~ .readmore-label{
		position: static;
		transform: translateX(0);
		-webkit-transform: translateX(0);
		/* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの１行だけにする */
		/* display: none; */
	}
	.readmore-check:checked ~ .readmore-label:before{
		content: '閉じる';
	}
	.readmore-check:checked ~ .readmore-content{
		height: auto;
	}
	.readmore-check:checked ~ .readmore-content::before {
		display: none;
	}
}


/********************************
    VOICE - お客様の声
*********************************/
.voice { background: #086FB2;}
.voice h2 { margin: 0.25em 0 1em; color: #fff; text-align: center;}
.voice .h2sub {
	width: 16em;
	margin: 0 auto;
	padding: 0.125em 1.0em;
	color: #086FB2;
	font-size: 1.1em;
	font-weight: 600;
	text-align: center;
	background: #fff;
	border: 1px solid #fff;
	border-radius: 100px;
}
.voice .user_box  { margin: 1.5em 0; background: #fff; border-radius: 10px;}
.voice .user_name { padding: 0.75em 2.0em; font-weight: 600; background: #D9D9D9; border-radius: 10px 10px 0 0;}
.voice .user_text { padding: 1.5em 2.0em;}
@media screen and (max-width: 599px) {
	.voice h2 { margin: 0.25em 0 0.5em;}
	.voice .user_box  { margin: 1.0em;}
	.voice .user_name { padding: 0.75em 1.5em;}
	.voice .user_text { padding: 1.0em 1.5em; text-align: justify;}
}


/********************************
    CONTACT
*********************************/
#contact {
	background: var(--blue-color);
	color: white;
	line-height: 1.4;
	text-align: center;
}
#contact .container {
	position: relative;
}
#contact .contact_text_01 {
	font-size: 1.75em;
	font-weight: bold;
}
#contact .contact_text_02 {
	font-size: 1.125em;
	margin: 10px 0;
}
#contact .sub_text {
	font-size: 1.75em;
}
#contact .logo_area {
	width: 400px;
	margin: 20px auto;
}

@media screen and (max-width: 767px) {
	#contact .contact_text_01 { font-size: 1.5em;}
	#contact .contact_text_02 { font-size: 0.9em;}
	#contact .logo_area { width: 90%; text-align: center;}
}
@media screen and (max-width: 480px) {
	#contact { padding-top: 30px; padding-bottom: 30px;}
	#contact .contact_text_01 { font-size: 1.125em; font-weight: 400;}
}

.contact .cta_head_text { color: #fff;}


/********************************
    Footer Btn
*********************************/
.foot_fix_btn {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
@media screen and (max-width: 1024px) {
	.foot_fix_btn { display: block;}
}
.foot_fix_btn.js_hide {
	transform: translateY(100%);
}
.foot_fix_btn ul {
	width: 100%;
	text-align: center;
	font-size: 0;
	margin: 0 !important;
	padding: 0 !important;
}
.foot_fix_btn ul li {
	display: inline-block;
	width: 50%;
	margin: 0 !important;
	padding: 0 !important;
}
.foot_fix_btn ul li img {
	width: 100%;
	max-width: 200px;
	vertical-align: bottom;
}
.foot_fix_btn ul li:first-child {
	background-color: #004E97;
}
.foot_fix_btn ul li:last-child {
	/* background-color: #EB6100;  MAIL */
	background-color: #06C755 /* LINE */
}
.foot_fix_btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	z-index: 999;
}
.foot_fix_btn.js_hide {
	transform: translateY(100%);
}