@charset "UTF-8";
/* ========================================
style.css
製品・サービス
------------------------------------------
※ IE10以上
※ wide:1206px（30px + 1146px + 30px）
※ font-sizeは基本を10pxで設定（1rem = 10px）
======================================== */

/* ---------------------------------------- 
 - 共通wrapper
---------------------------------------- */
#Content .wrapper {
	width: 100%;
	max-width: 1200px;
	padding: 0;
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width: 1200px) {
	#Content .wrapper {
		width: 100%;
		max-width: none;
		padding: 0 30px;
	}
}
@media screen and (max-width: 768px) {
	#Content .wrapper {
		width: 100%;
		max-width: none;
		padding: 0 3.9vw;
	}
}


/* ---------------------------------------- 
 - #Content
---------------------------------------- */
#Content {
  padding-bottom: 8rem;
}
#Content .section {
    padding: 8rem 0 0;
    background-color: #fff;
}
@media screen and (max-width: 768px) {
    #Content {
      padding-bottom: 16vw;
    }
    #Content .section {
        padding: 3.7rem 0 0;
    }
    #Content #Branches4.section {
        padding: 3.7rem 0;
    }
}


/* #Main
---------------------------------------- */
#Content #Main {
    background: url("../images/main_bg_pc.jpg") top center no-repeat;
}
#Content #Main h2 {
    position: relative;
    padding:  0 0 6.8rem;
    font-size: 4.8rem;
    font-weight: 600;
    text-align: center;
}
#Content #Main h2:after {
    content: "";
    position: absolute;
    bottom: 5rem; left: calc(50% - 116px);
    width: 232px;
    border-bottom: #d70c19 solid 5px;
}
@media screen and (max-width: 768px) {
    #Content #Main {
        background: url("../images/main_bg_sp.jpg") top center no-repeat;
        background-size: contain;
    }
    #Content #Main h2 {
        position: relative;
        padding: 6rem 0 6rem;
        font-size: 2.6rem;
    }
    #Content #Main h2:after {
        width: 116px;
        left: calc(50% - 58px);
    }
}


/* ---------------------------------------- 
 - h3
---------------------------------------- */
h3.ttl {
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 35px;
  padding-top: 35px;
  position: relative;
}
h3.ttl::before {
  background: linear-gradient(90deg, #d70c19 28.77%, #dcdddd 28.77%);
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
@media screen and (max-width: 1000px) {
h3.ttl {
  margin-bottom: 22px;
  padding-top: 18px;
  font-size: 1.8rem;
}
}


/* ---------------------------------------- 
 - .branches .branchesBox
---------------------------------------- */
.branches .branchesBox {
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}
.branches .branchesBox .branchesBoxInner {
  margin-right: 1.66%;
  margin-bottom: 42px;
  width: 23.75%;
}
.branches .branchesBox .branchesBoxInner:nth-child(4n) {
  margin-right: 0;
}
.branches .branchesBox .branchesBoxInner p.img {
  border: solid 1px #b8b9ba;
}
.branches .branchesBox .branchesBoxInner p.img img {
  width: 100%;
}
.branches .branchesBox .branchesBoxInner p.address {
  border: solid 1px #b8b9ba;
  padding: 15px;
}
.branches .branchesBox .branchesBoxInner p.address:not(.fukue) {
  border-top: none;
}
.branches .branchesBox .branchesBoxInner p span.name {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.branches .branchesBox .branchesBoxInner p a {
  color: #d70c19;
  font-weight: 600;
}
@media screen and (max-width: 786px) {
.branches .branchesBox .branchesBoxInner {
  margin-right: 1.66%;
  margin-bottom: 42px;
  width: 48.54%;
}
.branches .branchesBox .branchesBoxInner:nth-child(4n) {
  margin-right: auto;
}
.branches .branchesBox .branchesBoxInner:nth-child(2n) {
  margin-right: 0;
}
.branches .branchesBox .branchesBoxInner p.address {
  font-size: 1.4rem;
  padding: 10px;
}
.branches .branchesBox .branchesBoxInner p span.name {
  font-size: 1.6rem;
  margin-bottom: 8px;
}
}


/* ---------------------------------------- 
 - #Branches2 #Branches3 #Branches4
---------------------------------------- */
/*#Branches2 .branchesBox,
#Branches3 .branchesBox,
#Branches4 .branchesBox {
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}
#Branches2 .branchesBox p.address,
#Branches3 .branchesBox p.address,
#Branches4 .branchesBox p.address {
  border: solid 1px #b8b9ba;
  margin-right: 1.66%;
  margin-bottom: 20px;
  padding: 15px;
  width: 23.75%;
}
#Branches2 .branchesBox p:nth-child(4n),
#Branches3 .branchesBox p:nth-child(4n),
#Branches4 .branchesBox p:nth-child(4n) {
  margin-right: 0;
}
#Branches2 .branchesBox p span.name,
#Branches3 .branchesBox p span.name,
#Branches4 .branchesBox p span.name {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 8px;
}
#Branches2 .branchesBox p a,
#Branches3 .branchesBox p a,
#Branches4 .branchesBox p a {
  color: #d70c19;
  font-weight: 600;
}
@media screen and (max-width: 786px) {
#Branches2 .branchesBox p.address,
#Branches3 .branchesBox p.address,
#Branches4 .branchesBox p.address {
  margin-right: 1.66%;
  margin-bottom: 6px;
  width: 48.54%;
  font-size: 1.4rem;
}
#Branches2 .branchesBox p:nth-child(4n),
#Branches3 .branchesBox p:nth-child(4n),
#Branches4 .branchesBox p:nth-child(4n) {
  margin-right: auto;
}
#Branches2 .branchesBox p:nth-child(2n),
#Branches3 .branchesBox p:nth-child(2n),
#Branches4 .branchesBox p:nth-child(2n) {
  margin-right: 0;
}
#Branches2 .branchesBox p span.name,
#Branches3 .branchesBox p span.name,
#Branches4 .branchesBox p span.name {
  font-size: 1.6rem;
}
}*/





/* ---------------------------------------- 
 - #footer
---------------------------------------- */
footer {
    margin: 0 auto;
}