@charset "utf-8";

/*======================================
  
  sp.css

======================================*/

/* 全体
=============================================================================*/
html{ font-size: 58%;}
h1{ max-height: 3rem; float: none;}
h1 img {
    width: 80%;
}
.sp_br{ display: block;}
.sp_br_none { display: none;}
.sp_br_none br{ display: none;}
.sp_left{ text-align: left;}
.box1000{ max-width: 100%; padding: 0 2rem; margin: 0 auto;}
.midashi01{ line-height: 3.7rem; font-size: 3rem;}
.catch_text{ font-size: 1.8rem; margin-bottom: 2.6rem;}
.catch_text br{ display: none;}
.catch_text span{ display: inline-block;}

.main_visual {
	height: 31em;
	margin-top: 80px;
	background-image: url(../images/spgg_banner_sp.jpg);
	/* background-size: contain; */
}

.contents_visual {
	height: 19rem;
	margin-bottom: 3rem;
}

/* header
=============================================================================*/
/* ハンバーガーメニュー */
body.fix{
    position: fixed;
    width: 100%;
}

.hamburger{
	position:fixed;
	top: 2.8rem;
	right: 1.8rem;
	z-index: 9999;
}
.hamburger:hover{ cursor:pointer;}
.hamburger .m_text{ line-height:1; font-size: 1.1rem; letter-spacing: 1.5px;}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 4rem;
  height: 3.1rem;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: .6rem;
  background-color: #073957;
}
.hamburger.color_change .menu-trigger span{ background-color: #231815;}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 1.2rem;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
body.fix .menu-trigger span:nth-of-type(1) {
  -webkit-transform: translateY(12px) rotate(-315deg);
  transform: translateY(12px) rotate(-315deg);
	background-color: #fff;
}
body.fix .menu-trigger span:nth-of-type(2) {
  opacity: 0;
}
body.fix .menu-trigger span:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(315deg);
  transform: translateY(-12px) rotate(315deg);
	 background-color: #fff;
}
.menu-section {
	width: 100%;
	/*height: 50%;*/
	background: rgba(7,57,87, 0.8); /*(79,114,98,.8);*/
	position: fixed;
	top: -100%;
	left: 0;
	z-index: 9998;
	transition: .5s;
	overflow-y: auto;
	padding: 7.2rem 0 2.5rem 0;
	}
	body.fix .menu-section {
	top: 0;
	overflow-y: scroll;
	-webkit-overflow-scrolling:touch;
	}
/* アコーディオン */
.acMenu { margin-left: 3.5rem; color: #fff; font-size: 2rem;}

.acMenu > li{ position: relative; color: #fff; border-top: 1px solid #fff;}
.acMenu > li:first-child{ border-top: none;}
.acMenu > li:last-child{ border-bottom: 1px solid #fff;}
.acMenu2{ margin-left: 1em;}
.acMenu2 > li,
.acMenu3 > li{ position: relative; border-top: 1px dotted #fff;}
.acMenu3{ margin-left: 2em; font-size: 1.8rem;}
.acMenu a{ display: block; width: 80%; line-height: 4rem; color: #fff;}
.acMenu a.long{ display: block; width: 100%; line-height: 4rem; color: #fff;}
.acMenu .arrow {
    background: url("../images/arrow_white.svg") no-repeat center center;
	background-size: 100% auto;
	width: 2.3rem;
	height: 4rem;
	position: absolute;
	top: 0;
	right: 2.5rem;
	-webkit-transition: all 0.1s linear 0s;
	transition: all 0.1s linear 0s;
	z-index: 999;
}
 
.acMenu .arrow.open,
.acMenu2 .arrow.open02{
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.Menu {
    margin-left: 3.5rem;
    color: #fff;
    font-size: 2rem;
}
.Menu > li {
    position: relative;
    color: #fff;
    border-bottom: 1px solid #fff;
}
.Menu > li:last-child {
    border-bottom: 1px solid #fff;
}
.Menu a {
    display: block;
    width: 80%;
    line-height: 4rem;
    color: #fff;
}
.Menu2 {
    margin-left: 1em;
}
.Menu2 > li {
    position: relative;
    border-top: 1px dotted #fff;
}

.Menu .Menu2 p {
	color: #fff;
	font-size: 1.8rem;
	line-height: 2.8rem;
	text-align: left;
	padding: 1.5rem 0 1.5rem 0;
	border-top: 1px dotted #fff;
}
.Menu2 p a {
	display: inline;
	line-height: 2.8rem;
}

/*サブメニュー*/
.sub_menu{ margin-left: 3.5rem; font-size: 1.6rem; color: #fff; margin-top: 2rem;}
.sub_menu a{ display: block; width: 100%; line-height: 3.6rem; color: #fff;}

/* --------------　fix　------------------ */
.header_fix{ top: auto; bottom: 5%; padding: 2rem 0;}
.header_fix > div{ padding: 0 1rem;}
.header_fix.slide_in{ left: 0;}
.header_fix >div a::before { width: 3rem; height: 3rem;}
/* header
=============================================================================*/
header{ height: 9rem;}
.header_inner{ max-width: 100%; padding: 0 1.4rem;}

/*スライドバナー*/
.banner_slidimg {
	width: 87%;
	height: auto;
	top: 26rem;
	left: 1rem;
}
/* .banner_slidimg {
	width: 80%;
	height: auto;
	top: 3rem;
	left: 5rem;
} */
.banner_slidimg::after{ right: 1.4rem;}

/*スクロールバナーアニメーション*/
.animation {
	width: 3.2rem;
	right: 5px;
}
@keyframes anim_po {
  0% {
    top: 40.7rem;
  }
  100% {
    top: 44.7rem;
  }
}
@keyframes anim_po1 {
  0% {
    top: 10.9rem;
  }
  100% {
    top: 12.9rem;
  }
}

/* RSS
======================================================*/
.rss_wp ul li{ font-size: 1.4rem; display: table; width: 100%; padding: 1.6rem 0;}
.rss_wp span{ display: table-cell; vertical-align: middle;}
.rss_wp .rss_data{ width: 19%; min-width: 8rem;}
.rss_title{ line-height: 1.8; padding-right: 7.6rem;}
.rss_more{ padding: 0 2rem 0 .8rem;}

/* footer
=============================================================================*/
/*採用情報*/
.recruit_wp{ padding: 6rem 2rem;}
.recruit_wp .white_box{ padding: 3rem 5rem;}
.recruit_wp ul li{ width: 100%; float: none;}
.recruit_wp ul li:first-child{ margin-right: 0; margin-bottom: 1rem;}
/*リンク*/
footer .main_inner{ padding: 3rem 2rem 3rem 2rem;}
footer .main_inner section{ width: 100%; float: none; margin-right: 0; margin-bottom: 3rem;}
footer .main_inner section:last-child{ margin-bottom: 0;}
.footer_sub{ padding: 2rem 2rem 1.8rem 2rem; text-align: center;}
.footer_sub ul{ float: none; margin-bottom: 1rem;}
.footer_sub ul li:first-child{ margin-left: 0;}
.copy{ float: none;}
/* ============================================
	#index
=============================================== */
#index .slick-slide img{
	width: 100%;
	/* height: 50vh; */
	object-fit: cover;
}
#index .contents01 { padding: 0 2rem 4rem 2rem;}

#index .contents01_b { padding: 0 2rem 0 2rem;}
#index .contents01_b p { text-align: left;}
#index .contents01_b h2{ font-size: 2.2rem; margin-bottom: 0.5rem;}
#index .contents01_b h3{ font-size: 1.6rem; line-height: 3.2rem;}

#index .contents02{ padding: 1rem 2rem; background:#f2e5c2;}
#index .contents02 h2 img{ max-width: 100%;}
#index .contents03 { padding: 4rem 4rem 2rem 4rem;}
#index .contents03 section{ width: 100%; max-width: 100%; margin-bottom: 2rem;}
#index .contents04, #index .contents05, #index .contents06{ margin-bottom: 3rem;}
#index .contents06 p{ width: 100%; margin-bottom: 1rem;}

#index .contents01 p {
	text-align: left;
}
#index .contents01 h2 {
	line-height: 2.9rem;
	/*margin-bottom: 2rem;*/
}
#index .contents01 .lead_txt {
	font-size: 120%;
	margin: 15px 0 40px 0;
}
#index .contents01 .qa_box { padding: 0 0 40px 0; }
#index .contents01 .qa_ttl, #index .contents01 .qa_txt {
	font-size: 120%;
}
#index .contents02 h2 {
	margin-top: 1.5rem;
	line-height: 3.8rem;
	display: block;
}
#index .contents_cont {
	width: 90%;
	padding-bottom: 0;
}
#index .contents_footer_cont_inner {
	width: 90%;
	padding-bottom: 0;
}

.contentsBan {
	width: 90%;
}
.banner_outer {
    width: 100%;
}

.service_outer {
	flex-wrap: wrap;
	margin-top: 25px;
}
.service_inner_l {
	width: 100%;
    position: relative;
	padding-bottom: 20px;
}
.service_inner_r {
	width: 100%;
    position: relative;
    padding-left: 0;
	padding-bottom: 20px;
}
.service_inner {
	justify-content: space-between;
}
.service_inner_item {
	width: 33%;
	padding: 5px;
}
.btn-green {
	margin: 0 0 20px 0;
}

.contents_merit {
	padding: 3rem 0 0 0;
}
.contents_merit h3 {
    font-size: 1.6rem;
    line-height: 3.2rem;
}

.merit_outer h3 {
	font-size: 1.5em;
	line-height: 3.1rem;
}
.merit_outer img {
	width: 100%;
}
.merit_flex {
    justify-content: center;
    margin-top:20px;
}
.merit_flex_item {
	padding: 15px;
    width: 48%;
    position: relative;
}

.design_outer {
	padding-top: 20px;
}
.design_inner {
    padding: 5px;
    width: 50%;
}

/* ============================================
	WHAT'S NEW
=============================================== */
.whatsnew-list-item {
    line-height: 2.2rem;
    padding-left: 6.0em;
    text-indent: -6.0em;
}
.whatsnew-list-item-date {
	padding-left: 6.0em;
	width: 0;
}
#index .contents01 .wnew_wrapper {
	margin-top: 6rem;
}

.bg_img {
	margin-top: 0;
}



/* ===施工例=== */
.designexam_inner {
    padding: 5px;
    width: 20%;
}

.cont_outer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.cont_inner {
    width: 100%;
    position: relative;
    padding: 5px 0;
}
.copy_contact {
    font-size: 1.50rem;
    line-height: 1.90rem;
}
.copy_name {
    font-family: 'Shippori Mincho', serif;
    font-size: 2.3rem;
    text-align: center;
    font-weight: 400;
    margin-top: 15px;
}
.copy_tel {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.90rem;
    text-align: center;
    font-weight: 400;
}

.box_box { width: 100%; padding: 0;}

/* ============================================
	#company
=============================================== */

.flexbox_co {
    display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
}
.flexbox_co_l {
    width: 100%;
}
.flexbox_co_r {
    padding-top: 10px;
    width: 100%;
}
.flexbox_item {
    display: flex;
    justify-content: space-between;
}
.l_item {
    width: 35%;
    padding-right: 20px;
}
.r_item {
    width: 65%;
    padding-right: 0;
}

.l_p_item {
    width: 30%;
    padding-right: 20px;
}
.r_p_item {
    width: 70%;
    padding-right: 20px;
}

.company_cont_l {
	width: 25%;
}
.company_cont_r {
	width: 75%;
}
.shop_cont_l {
	width: 100%;
}
.shop_cont_r {
	width: 100%;
}
.shop_add_wp_inner_l {
	width: 100%;
}
.shop_add_wp_inner_r {
	width: 100%;
}

/* ===工事経歴=== */
.flexbox_career_item {
	display: flex;
	flex-wrap: wrap;
}
.career_l_item {
	width: 100%;
}
.career_r_item {
	width: 100%;
	border-top: none;
}
.flexbox_career_item p {
    letter-spacing: 0.05vw;
    line-height: 4.5vw;
    padding: 5px;
    text-align: left;
}
.privacy_outer p {
    margin-top: 0;
}

/* ============================================
	.subpage
=============================================== */
.subpage .box1000{ max-width: 100%; padding: 0 3rem; margin: 0 auto;}
.subpage .main_visual {
	height: 11rem;
	margin-top: 6.8rem;
	margin-bottom: 3.6rem;
}
/*採用情報バナー*/
.subpage .recruit_outline{ top: -8rem;}

/* ============================================
	店舗案内
=============================================== */
.shop_info_wrapper {
	flex-wrap: wrap;
}
.shop_info_l {
	width: 100%;
    margin-right: 0;
}
.shop_info_r {
	width: 100%;
}
.shop_cont_r p {
    line-height: 1.7;
    margin-bottom: 8px;
}
.shop_info_r span {
    line-height: 1.5;
    display: inline-block;
    margin-bottom: 8px;
}
.shop_add {
    padding: 0 0 1.5rem;
}
.traffic_info_wrapper {
	justify-content: space-between;
}
.traffic_info_l {
	width: 15%;
}
.traffic_info_r {
	width: 80%;
}
.traffic_info_l img {
	margin-top: 0;
}
.sns_icon {
	width: 100%;
	float: none;
	flex-wrap: wrap;
	justify-content: center;
}
.sns_icon_ttl {
	width: 100%;
	margin: 20px 0 0;
	text-align: center;
}
.sns_icon_l {
	width: 15%;
}
.sns_icon_m {
	width: 15%;
}
.sns_icon_r {
	width: 15%;
}