@charset "UTF-8";
ol, ul {padding-left: unset; margin-bottom: unset;}
li {list-style-type: none;}

/*//////////////// 共通 //////////////////*/
main .container {
	max-width: 1140px;
}

.mv-under {
	position: relative;
}

.mv-under .title {
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
	width: 100%;
	display: block;
	letter-spacing: 0.05rem;
}

.mv-under .title h1 {
	color: #222;
	font-family: 'Noto Sans JP', sans-serif;	
	font-size: 1.65rem;
	font-weight: 700;
	letter-spacing: 0;
	text-align: center;
	margin-bottom: 0.25rem;
}

.mv-under .title h2 {
	font-size: 1rem;
	margin-bottom: 0;
	text-align: center;
	color: #222;
	font-family: 'Lato', sans-serif;
	font-weight: 900;	
}

.bg01 {
	background: #56C19A;
}
.bg02 {
	background: #f0f6ff;
}
.bg03 {
	background: #bedddd;
}
.bg04 {
	background: #f4e9f4;
}
.bg05 {
	background:repeating-linear-gradient(
		-45deg,
		#f0f6ff,
		#f0f6ff 4px,
		#fff 0,
		#fff 29px
		);
}
.bg06 {
	background: #29ABE2;
	position: absolute;
	top: 75px;
	left: 0;
	width: 100%;
	height: calc(100% - 50px) ;
	z-index: -1;
}
.bg07 {
	background: #FFFAEC;
}
.bg-white {
	background: #fff;
}
.bg-yellow {
	background: url(/assets/images/yane/bg-yellow.svg) no-repeat bottom center / cover;
	padding-bottom: 100px;
}
.bg-bage {
	background: #E8D4B3;
}
.bg-lightbage {
	background: #FFF5E6;
}
.b-1 {
	border: solid 1px #000;
}
.b-2 {
	border: solid 2px #000;
}
.bb-2 {
	border-bottom: solid 2px #000;
}
.number01 {
    font-family: 'Oswald', sans-serif;
	font-size: 3rem;
	line-height: 4rem;
}
.number02 {
	display: inline-block;
    background: #FF931E;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    line-height: 50px;
    text-align: center;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    vertical-align: sub;
    margin-right: 10px;
}
.catch01 {
	font-size: 1.3rem;
}
.text01 {
	font-size: .8rem;
	line-height: 1.4rem;
}
.text02 {
	font-size: .7rem;
	line-height: 1.2rem;
}
.red {
	color: #E50012;
}
.blue {
	color: #b4e2f5;
}
.green {
	color: #a6d9be;
}
.pink {
	color: #f2c9d8;
}
.orange {
	color: #E76C28;
}
.white {
	color: #fff;
}

.cospa {
	position: absolute;
	top: -25px;
	left: 55%;
	transform: translateX(-50%);
	-webkit- transform: translateX(-50%);
}
.cospa02 {
	padding-top: 50px;
}

.f08 {font-size: 0.8rem;}
.f09 {font-size: 0.9rem;}
.f11 {font-size: 1.1rem;}
.f12 {font-size: 1.2rem;}
.f13 {font-size: 1.3rem;}
.f14 {font-size: 1.4rem;}
.text03 {
	font-size: 1.3rem;
	color: #EF6E26;
}
.text04 {
	font-size: 1.3rem;
	color: #FFFF00;
}
.text05 {
	font-size: 1.3rem;
	color: #184389;
}
.text06 {
	border-bottom: dotted 1px #666;
}
.text07 {
	font-size: 1.1rem;
	color: #184389;
	background:linear-gradient(transparent 60%, #ff6 60%);
}
.text08{
	color: #29ABE2;
}
.text09{
	color: #009245;
	font-size: 1.1rem;
	font-weight: bold;
}
.triangle{
	width: 0;
	height: 0;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 30px solid #f2f2f2;
    margin: 0 auto;
  }
.triangle02 {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #56c19a;
    margin: 0 auto;
}
table {width: 100%;}
.pt-100 {
	padding-top: 100px;
}



@media (min-width: 576px) {
	.mv-under .title h1 {
		font-size: 2.0rem;
		margin-bottom: 0.5rem;
	}
}
.border {
    border: 1px solid #999 !important;
}



@media (min-width: 768px) {	
	.mv-under .title h1 {
		font-size: 2.4rem;
	}
	.cospa02 {
		padding-top: 150px;
	}
	.bg06 {
		top: 150px;
		height: calc(100% - 100px) ;
	}
}

@media (min-width: 992px) {
	.mv-under .title h1 {
		font-size: 2.6rem;
	}
}

@media (min-width: 1200px) {
	.mv-under .title h1 {
		font-size: 2.8rem;
	}
	
	.mv-under .title h2 {
		font-size: 1rem;
	}
}

@media (min-width: 1400px) {
	.mv-under .title h1 {
		font-size: 3.2rem;
	}
	
	.mv-under .title h2 {
		font-size: 1.1rem;
	}
}

main .sup {
	font-size: 0.85rem;
	line-height: 1.5em;
	letter-spacing: 0;
}


/*//////////////// セクション1 //////////////////*/
.sec1 {
	padding-top: 0.5rem !important;
	padding-bottom: 40px;
}

.sec1 .title {
	width: 100%;
	text-align: center;
}

.sec1 .icon1 {
	width: 55px;
	display: inline-block;
	margin-right: 5px;
	vertical-align: -1.2rem;
	margin-left: -12%;
}

.sec1 .title h1 {
	width: auto;
	display: inline;
}

.sec1 .icon2 {
	width: 40%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.sec1 p {
	letter-spacing: 0;
}


@media (min-width: 576px) {	
	.sec1 {
		padding-bottom: 80px;
	}
	
	.sec1 .icon1 {
		margin-left: -8%;
	}
	
	.sec1 .icon2 {
		width: 35%;
	}
	
	.sec1 .note {
		margin-top: 0.75rem;
	}	
}


@media (min-width: 768px) {	
	.sec1 {

		padding-bottom: 110px;
	}

	.sec1 .icon1 {
		width: 65px;
		margin-right: 10px;
		margin-left: -7%;
	}

	.sec1 .title h1 {
		font-size: 1.7rem;
	}

	.sec1 .icon2 {
		width: 180px;
	}

	.sec1 p {
		font-size: 1.15rem;
		line-height: 1.6em;
		font-weight: 600;
		text-shadow:0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff,0 0 4px #fff;		
	}
	
	.sec1 .note {
		font-weight: 400;
		margin-top: 1rem;
		color: #222;
	}
}


@media (min-width: 992px) {	
	.sec1 {
		padding-bottom: 140px;
	}
	
	.sec1 .icon1 {
		width: 75px;
		margin-left: -7%;
	}

	.sec1 .title h1 {
		font-size: 1.8rem !important;
	}

	.sec1 .icon2 {
		width: 190px;
	}
	
	.sec1 p {
		line-height: 1.8em;	
	}
}


@media (min-width: 1200px) {	
	.sec1 {
		padding-bottom: 140px;
	}

	.sec1 .title h1 {
		font-size: 2rem !important;
	}
	
	.sec1 .icon2 {
		width: 220px;
	}
}

@media (min-width: 1400px) {	
	.sec1 {
		background-size: cover;
		padding-bottom: 160px;
	}
}


/*//////////////// タブ //////////////////*/

/*tabの形状*/
.tab{
	/*	display: flex;
		flex-wrap: wrap;*/
	}
	.tab li a{
		display: block;
		transition: all 0.6s ease 0s;
	}
	.tab li a:hover{
		display: block;
		transition: all 0.6s ease 0s;
	}
	/*liにactiveクラスがない時の形状*/
	.tab li #c01{
		opacity: 50%;
	}
	.tab li #c02{
		opacity: 50%;
	}
	/*liにactiveクラスがついた時の形状*/
	.tab li.tab-active #c01{
		opacity: 100%;
	}
	.tab li.tab-active #c02{
		opacity: 100%;
	}

	/*エリアの表示非表示と形状*/
	.area {
		display: none;/*はじめは非表示*/
		opacity: 0;/*透過0*/
		background: #fff;
	}
	
	/*areaにis-activeというクラスがついた時の形状*/
	.area.is-active {
		display: block;/*表示*/
		animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}
	
	@keyframes displayAnime{
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}


/*//////////////// アコーディオン //////////////////*/

.toggle {
	display: none;
}
.Label {		/*タイトル*/
    display: block;
    /* color: #fff; */
    /* background: #f5f2e9;
    border-top: solid 1px #666; */
	padding: 1.2em 35px 1.2em 60px;
    font-weight: 600;
    position:relative;
}
.Label span {
	position: absolute;
    top: calc(50% - 19px);
    left: 19.25%;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #fff;
}
.Label::after{		/*タイトル横の矢印*/
	content: "";
    /* width: 6px; */
    /* height: 6px; */
    /* border-top: 2px solid #666; */
    /* border-bottom: 2px solid #666; */
    /* border-right: 2px solid #666; */
    /* -webkit-transform: rotate(45deg); */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #666;
    position: absolute;
    top: calc( 50% - 3px );
    left: 20%;
    transform: rotate(180deg);
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {		/*本文*/
	height: 0;
	padding:0 20px;
	overflow: hidden;
}
.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding:0 20px 20px 20px;
	transition: all .3s;
}
.toggle:checked + .Label::after {
	transform: rotate(0deg) !important;
}
.atext {
    border-top: dotted 1px #666;
    padding-top: 20px;
}

@media (max-width: 768px) {	

	.Label span {
		left: 3%;
	}
	.Label::after{		/*タイトル横の矢印*/
		left: 6%;
	}
}



/*//////////////// 追加 //////////////////*/
/* 足場+屋根　見積もり */
.heading-1 p {
	font-weight: 500;
}

.heading-1 p span {
	color: #3fa9f5;
	font-size: 1.2em;
	font-weight: 700;
}

.heading-1 img {
	width: 40px !important;
}

@media (min-width: 576px) {	
	.heading-1 p {
		font-size: 1.4rem;
	}	
	
}

@media (min-width: 992px) {	
	.heading-1 p {
		font-size: 1.5rem;
	}		
}

@media (min-width: 1200px) {	
	.heading-1 p {
		font-size: 1.7rem;
	}		
}