@charset "utf-8";
/* CSS Document */
/* ====================================================================================================
	smartphone.css　スマートフォン／タブレット表示用
	※ 959px 以下でスマホレイアウトへ切り替え（PC表示は従来通り 960px 固定）
	※ 必ず reset.css / common.css / 各ページ個別CSS より後ろで読み込むこと
==================================================================================================== */

/* ----------------------------------------------------------------------------------------------------
	PC表示時は非表示にしておく要素
---------------------------------------------------------------------------------------------------- */
.smp_menu_check,
.smp_menu_btn,
.smp_txt,
.smp_only,
.ttl_photo,
#pagetop	{
	display:none;
}

/* スマホ専用の改行（PCでは常に非表示） */
br.sp_only	{
	display:none;
}

/* ----------------------------------------------------------------------------------------------------
	電話番号のタップ発信
	PCではリンクを無効化し、見た目も通常テキスト／画像のままにする
---------------------------------------------------------------------------------------------------- */
a.tel_link	{
	color:inherit;
	text-decoration:none;
	pointer-events:none;
	cursor:default;
}
a.tel_link:hover	{
	opacity:1;
	filter:none;
	-ms-filter:none;
}


@media screen and (max-width:959px) {

/* ----------------------------------------------------------------------------------------------------
	全ページ共有セレクタ
---------------------------------------------------------------------------------------------------- */
html	{
	overflow-y:auto;
}
body	{
	font-size:14px;
	line-height:1.7;
	-webkit-text-size-adjust:100%;
}
#header_top,
#gnav,
#container,
#topicpath,
.container	{
	width:auto;
	max-width:100%;
	padding-left:0;
	padding-right:0;
	margin:0;
}
/* 下層ページの本文ブロックは左右に共通の余白を持たせる */
.container	{
	padding:0 3.5% 1.5em;
}
img	{
	max-width:100%;
	height:auto;
}
iframe	{
	max-width:100%;
}
h1 {font-size:1.5em;}
h2 {font-size:1.25em;}

/* スマホのみ電話番号をタップ発信できるようにする */
a.tel_link	{
	pointer-events:auto;
	cursor:pointer;
	-webkit-tap-highlight-color:rgba(37,171,183,.25);
}

/* PC専用の改行はスマホでは無効化し、文章を自然に折り返させる */
br.pc_only	{
	display:none;
}


/* ----------------------------------------------------------------------------------------------------
	header
---------------------------------------------------------------------------------------------------- */
header	{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	border-top:none;
}
header nav	{
	-webkit-box-ordinal-group:0;
	-ms-flex-order:-1;
	order:-1;
	background:#5fbecb url(../img/bg_header_smp.png) 0 0 no-repeat;
	background-size:100% 100%;
}
#header_top	{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	padding:8px 3.5%;
	border-bottom:4px solid #25ABB7;
}
#header_top .left	{
	margin-top:0;
	width:56%;
}
#header_top .right	{
	margin-top:0;
	margin-right:0;
	width:41%;
	text-align:right;
}
#header_top .left img,
#header_top .right img	{
	width:100%;
	height:auto;
	vertical-align:middle;
}
/* 原寸（logo.gif=287px／btn_tel.gif=244px）より大きく引き伸ばさない */
#header_top .left img	{max-width:350px;}
#header_top .right img	{max-width:244px;}
/* 下層ページヘッダーの「HOME」ボタンはスマホでは非表示（メニュー内に集約） */
#header_top .right .smp_hide	{
	display:none;
}


/* ----------------------------------------------------------------------------------------------------
	ハンバーガーメニュー
---------------------------------------------------------------------------------------------------- */
.smp_menu_check	{
	display:block;
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	opacity:0;
}
.smp_menu_btn	{
	display:block;
	position:relative;
	height:46px;
	cursor:pointer;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.smp_menu_btn span	{
	display:block;
	position:absolute;
	right:5%;
	width:28px;
	height:3px;
	background:#fff;
	border-radius:2px;
	-webkit-transition:all .3s;
	transition:all .3s;
}
.smp_menu_btn span:nth-child(1) {top:14px;}
.smp_menu_btn span:nth-child(2) {top:22px;}
.smp_menu_btn span:nth-child(3) {top:30px;}

.smp_menu_check:checked ~ nav .smp_menu_btn span:nth-child(1)	{
	top:22px;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.smp_menu_check:checked ~ nav .smp_menu_btn span:nth-child(2)	{
	opacity:0;
}
.smp_menu_check:checked ~ nav .smp_menu_btn span:nth-child(3)	{
	top:22px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}


/* ----------------------------------------------------------------------------------------------------
	gnav（ドロワー）
---------------------------------------------------------------------------------------------------- */
#gnav	{
	max-height:0;
	overflow:hidden;
	background:#f2fafb;
	-webkit-transition:max-height .35s ease;
	transition:max-height .35s ease;
}
.smp_menu_check:checked ~ nav #gnav	{
	max-height:600px;
}
#gnav li	{
	float:none;
	border-top:1px solid #cfe7ea;
}
#gnav li a	{
	display:block;
	position:relative;
	padding:14px 3.5% 14px 12%;
	color:#333;
	font-size:1.05em;
}
#gnav li a:before	{
	content:"";
	position:absolute;
	left:5.5%;
	top:50%;
	width:9px;
	height:9px;
	margin-top:-5px;
	border-top:2px solid #25ABB7;
	border-right:2px solid #25ABB7;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
#gnav li img	{
	display:none;
}
#gnav li .smp_txt	{
	display:inline;
}
#gnav li.smp_only	{
	display:block;
}
#gnav li a:hover	{
	opacity:1;
}


/* ----------------------------------------------------------------------------------------------------
	#container 共通
---------------------------------------------------------------------------------------------------- */
h1	{
	margin-bottom:0.8em;
	line-height:0;
}
/* 下層ページのタイトル帯（940x90／左55.9%=タイトル文字・右44.1%=写真）は、
   スマホでは「写真」と「タイトル文字」を上下2段に分けてどちらも判読できるようにする。
   写真バンドは元画像の右44.1%(x:525-940)を、テキストバンドは左55.9%(x:0-525)を
   それぞれ拡大して幅いっぱいに表示する。分割位置はサイト内の全タイトル画像で共通。 */
article:not(#container) > h1	{
	display:block;
	height:auto;
	line-height:0;
	border-bottom:3px solid #25ABB7;
}
article:not(#container) > h1 .ttl_photo	{
	display:block;
	width:100%;
	aspect-ratio:415/90;
	background-repeat:no-repeat;
	background-position:right center;
	background-size:226.5% 100%;
}
article:not(#container) > h1 .ttl_text	{
	display:block;
	width:100%;
	overflow:hidden;
	aspect-ratio:525/90;
}
article:not(#container) > h1 .ttl_text img	{
	display:block;
	width:179%;
	max-width:none;
}
/* スマホ限定の改行を表示する */
br.sp_only	{
	display:inline;
}
/* 全角「【」は字面の前に半角「[」より大きな余白を持つフォントが多く、
   【受付時間】の文字の出だしの方が[平日]より右にずれて見えるため、
   改行後の行を右にずらして視覚的な出だし位置を揃える */
.hours_time	{
	margin-left:0.6em;
}
h3	{
	margin:0 0 0.8em;
	padding-left:0.6em;
	border-left:6px solid #25ABB7;
	font-size:1.15em;
	line-height:1.9;
}
#topicpath li	{
	float:none;
	display:inline;
}
.float_l li	{
	width:auto;
	float:none;
}
.pl11	{padding-left:0;}
.mt5	{margin-top:2em;}
.left,
.right	{
	float:none;
	width:auto;
}
#header_top .left,
#header_top .right	{
	float:left;
}
#header_top .right	{
	float:right;
}
ul.arw_g	{
	padding-right:0;
}


/* ----------------------------------------------------------------------------------------------------
	TOPページ
---------------------------------------------------------------------------------------------------- */
#container #main	{
	width:auto;
	margin:0;
	padding:0 0 1em;
	border-radius:0;
	-webkit-box-shadow:none;
	box-shadow:none;
}
#container #main h2	{
	margin:0 3.5% 1.2em;
	line-height:0;
}
#container #main h2 img	{
	width:100%;
	max-width:540px;/*ttl_smp.png 原寸*/
}
#container .l_side	{
	float:none;
	width:auto;
	margin:0;
}
#container .l_side ul li	{
	padding:0 3.5% 1.8em;
}
#container .l_side ul > li+li+li	{
	padding-bottom:1.8em;
}
#container .l_side ul li p	{
	padding:0;
}
#container .l_side ul li h4	{
	margin-bottom:0.9em;
	line-height:0;
}
#container .l_side ul li h4 img	{
	width:100%;
	max-width:420px;/*eigyo_ttl0X.jpg 原寸*/
}
#container .r_side	{
	float:none;
	width:auto;
	margin:0;
	padding:0.5em 3.5% 0;
	border-left:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}
#container .r_side h4	{
	margin-bottom:1em;
	padding-left:32px;
	padding-bottom:6px;
	background:url(../../img/icon_gs.gif) 0 50% no-repeat;
	font-size:1.3em;
	text-align:left;
}
#container .r_side h4 span	{
	padding-left:0;
}
/* PC版は display:table-row だが、スマホでは行間を取りたいのでブロックに戻す */
#container .r_side address,
#container .r_side p	{
	display:block;
	position:relative;
	margin-bottom:1em;
	padding-left:20px;
}
#container .r_side address:before,
#container .r_side p:before	{
	display:block;
	position:absolute;
	left:0;
	top:0.35em;
	padding:0;
	line-height:1;
	content:url(../img/arw_g.gif);
}
#container .r_side address:after,
#container .r_side p:after	{
	content:none;
}
#container .r_side #map	{
	margin-top:1.4em;
	padding-top:1.4em;
}
#container .r_side #map iframe	{
	width:100%;
	height:64vw;
	max-height:320px;
}


/* ----------------------------------------------------------------------------------------------------
	下層ページ　共通
---------------------------------------------------------------------------------------------------- */
.container p,
.container div,
.container figure	{
	max-width:100%;
}
.container figure	{
	text-align:center;
}
.container figure img	{
	margin:0 auto;
}
.container iframe	{
	width:100% !important;
	height:60vw !important;
	max-height:300px;
}


/* company */
table.company	{
	width:auto;
	margin:0;
	display:block;
	border-radius:6px;
	overflow:hidden;
}
table.company tbody,
table.company tr,
table.company th,
table.company td	{
	display:block;
	width:auto;
	border-right:none;
}
table.company th	{
	padding:8px 1em;
	border-radius:0 !important;
}
table.company td	{
	padding:12px 1em;
	border-radius:0 !important;
}
table.company tr:last-child td	{
	border-bottom:none;
}
table.company td > div	{
	margin-top:0.8em;
}


/* greeting */
.greeting	{
	margin:0 3.5%;
	border-radius:6px;
}
.greeting .left,
.greeting .right	{
	float:none;
	width:auto;
}
.greeting .right img	{
	display:block;
	margin:1em auto 0;
}
.greeting > div	{
	padding:1em 1.2em !important;
}
.greeting p	{
	margin:0 0 1em;
}
.greeting p:first-child	{
	margin-top:0;
}
.greeting .signature span	{
	font-size:1.2em;
}


/* office / area / solar / recruit */
#office .container p,
#area .container p	{
	margin:0 0 1em;
}
#office .container div.clearfix	{
	width:auto;
	margin:0 0 1em;
}
#office .container div div,
#solar .container div div,
#privacy .container div div	{
	width:auto;
	margin:0;
}
#office .container figure	{
	margin:1em 0 0;
	text-align:center;
}
/* 画像幅合わせ：写真ごとに原寸が異なるため、幅をすべて揃えて表示する */
#office .container figure img	{
	display:block;
	width:100%;
}
#office .container > div[style]	{
	margin:1em 0 !important;
	order:3;/*写真2枚の下・マップの上に表示する*/
}
/* 写真2は div(margin付き) > figure > img の二重構造になっており、
   内側のfigureにも上の#office .container figureルールが効いて
   余白が二重にかかってしまうため、内側のfigureは0にリセットする */
#office .container > div[style] figure	{
	margin:0;
}
/* 表示順を「住所→写真1→写真2→マップ」に並び替える
   （マップを持つ市川営業所・市川給油所の2セクションのみが対象。横浜営業所は対象外） */
#office .container	{
	display:flex;
	flex-direction:column;
}
#office .container > div.clearfix:has(> .right)	{
	display:contents;
}
#office .container > div.clearfix:has(> .right) > .left	{
	display:contents;
}
/* .right（マップのiframeを内包）自体は通常のボックスのまま残す。
   iframeの祖先にdisplay:contentsを直接かけると、クロスオリジンiframeの
   描画が抜け落ちる不具合があるため、orderは.right自身に付与する */
#office .container > div.clearfix:has(> .right) > .right	{
	order:4;
}
#office .container > div.clearfix:has(> .right) .office_addr	{
	order:1;
}
#office .container > div.clearfix:has(> .right) figure	{
	order:2;
}
#solar .container div,
#solar .container figure.left	{
	margin:0 0 1em;
}
#area figure	{
	width:auto !important;
	margin:0;
}


/* privacy */
#privacy ul li p	{
	margin-left:0;
	margin-right:0;
}
#privacy ul li div	{
	margin-left:0;
}
#privacy ul.disc	{
	margin-left:1.5em;
}


/* contact */
#contact .container .tel_large	{
	font-size:1.6em;
}
/* 「電話でのお問い合わせ」と「ご依頼の流れ」の2カラムは、スマホでは縦積みにする。
   汎用の .left/.right 解除より詳細度が高いため、ここで個別に解除している */
#contact .contact_cols .left,
#contact .contact_cols .right	{
	float:none;
	width:auto;
}
#contact .contact_cols .right	{
	margin-top:2em;
}
#contact .contact_cols figure	{
	margin-top:1.5em;
}
/* 電話番号のタップ領域を指で押しやすい高さ(44px以上)まで広げる */
#contact .contact_cols .tel_large a.tel_link	{
	display:inline-block;
	padding:0.45em 0;
}
/* 本文中の電話番号はインラインのまま上下paddingで当たり判定だけ広げる。
   インライン要素の上下paddingは行の高さに影響しないため、文章のレイアウトは崩れない */
#contact .contact_cols .right a.tel_link	{
	padding:1em 0;
}


/* ----------------------------------------------------------------------------------------------------
	footer
---------------------------------------------------------------------------------------------------- */
footer	{
	position:relative;
	margin:2em auto 0;
	padding-top:1em;
	border-top:3px solid #25ABB7;
}
footer nav ul	{
	position:static;
	left:auto;
	float:none;
	margin:0;
	padding:0 3.5%;
}
footer nav li	{
	position:static;
	left:auto;
	float:none;
	font-size:1.05em;
	border-bottom:1px solid #ddd;
}
footer nav li:first-child	{
	border-top:1px solid #ddd;
}
footer nav li + li:before	{
	content:none;
	margin:0;
}
footer nav li a	{
	display:block;
	position:relative;
	padding:15px 8px 15px 34px;
}
footer nav li a:before	{
	content:"";
	position:absolute;
	left:8px;
	top:50%;
	width:10px;
	height:10px;
	margin-top:-6px;
	border-top:2px solid #444;
	border-right:2px solid #444;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}


/* ページトップへ戻る */
#pagetop	{
	display:block;
	position:relative;
	height:0;
	margin:1.4em 0 0;
}
#pagetop a	{
	display:block;
	position:absolute;
	right:4%;
	bottom:-22px;
	width:44px;
	height:44px;
	background:#4cb3bd;
	border-radius:10px;
}
#pagetop a:before	{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:12px;
	height:12px;
	margin:-3px 0 0 -6px;
	border-top:3px solid #fff;
	border-left:3px solid #fff;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}

#copyright	{
	margin-top:1.4em;
	padding:14px 3.5% 16px;
	border-top:5px solid #4cb3bd;
	background:#f7f7f7;
	font-size:0.8em;
}

}/*/@media*/


/* ----------------------------------------------------------------------------------------------------
	極小画面（〜359px）
---------------------------------------------------------------------------------------------------- */
@media screen and (max-width:359px) {
	body {font-size:13px;}
	#header_top .left  {width:54%;}
	#header_top .right {width:44%;}
	footer nav li a {padding:13px 8px 13px 30px;}
}