/* Scss Document */
@charset "utf-8";
@import url(reset.css);

/*=======================================================
    CHIKUSAN css
========================================================*/
/*-------------- ブレークポイント作成 ここから ----------------*/
// min-width ×××× px以上の場合
$breakpoint-up: (
  'xs': 'screen and (min-width: 350px)',
  'sm': 'screen and (min-width: 400px)',
  'md': 'screen and (min-width: 768px)',
  'lg': 'screen and (min-width: 992px)',
  'xl': 'screen and (min-width: 1200px)', 
) !default;

// max-width ×××× px未満の場合
$breakpoint-down: (
  'xs': 'screen and (max-width: 349px)',
  'sm': 'screen and (max-width: 399px)',
  'md': 'screen and (max-width: 767px)',
  'lg': 'screen and (max-width: 991px)',
  'xl': 'screen and (max-width: 1199px)',
) !default;

// @mixinの定義
@mixin mq-up($breakpoint: md) {
  @media #{map-get($breakpoint-up, $breakpoint)} {
    @content;
  }
}
@mixin mq-down($breakpoint: md) {
  @media #{map-get($breakpoint-down, $breakpoint)} {
    @content;
  }
}
/*-------------- ブレークポイント作成 ここまで ----------------*/

//ベースカラー 変数
$mainColor: #3da930;

//フォントサイズ　基準16px
@mixin fontSize($fontSize, $baseFontSize:16){
	font-size: percentage($fontSize / $baseFontSize);
}
//トランジッション 0.5s
@mixin transition($duration:0.5s){
    -webkit-transition:$duration ease-out;
    -moz-transition:$duration ease-out;
    -ms-transition:$duration ease-out;
    -o-transition:$duration ease-out;
    transition:$duration ease-out;
}
//トランスフォーム
@mixin transform($transforms:50%) {
	-moz-transform: $transforms;
	-o-transform: $transforms;
	-ms-transform: $transforms;
	-webkit-transform: $transforms;
	transform: $transforms;
}
body{ 
	color: #000;
	margin: 0;
}
a{
	text-decoration: none;
	&:hover{
		opacity: 0.7;
		cursor: pointer;
		@include transition();
	}
	&:visited,
	&:link{
		color: #000;
	}
}
img{
	width: 100%;
}
.wrapper{
	overflow: hidden;
	h1,h2,h3,h4,h5,h6,dt,dd,p,a{
	}
}
.clearfix {
  *zoom: 1;
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

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

     header

========================================================*/
header{
	height: 80px;
	position: relative;
	.header_logo{
		width: 228px;
		position: absolute;
		left: 90px;
		top: 50%;
		-webkit-transform: translateY(-50%); /* Safari用 */
		transform: translateY(-50%);
	}
	nav{
		width: 41.41%;
		position: absolute;
		right: 90px;
		top: 50%;
		-webkit-transform: translateY(-50%); /* Safari用 */
		transform: translateY(-50%);
		ul{
			display: flex;
			justify-content: space-between;
			li{
				a{
					@include fontSize(14);
					font-weight: bold;
					letter-spacing: 0.05em;
					@include mq-down(lg){
						@include fontSize(12);
					}
				}
			}
		}
	}
	@include mq-up(md){
		.sp_menuBtn{
			display: none;
		}
	}
	@include mq-down(md){
		height: 45px;
		.header_logo{
			width: 114px;
			left: 5%;
		}
		nav{
			display: none;
			z-index: 1000;
			transform: none;
			top: 45px;
			right: 0;
			width: 100%;
			ul{
				display: block;
				li{
					border-bottom: 1px solid #05ff87;
					&:last-of-type{
						border: none;
					}
					a{
						display: block;
						padding: 15px;
						color: #fff;
						background-color: $mainColor;
						position: relative;
						&:hover{
							opacity: 1;
						}
						&:link,&:visited{
							color: #fff;
						}
						&::after{
							font-family: FontAwesome;
							content: '\f078';
							position: absolute;
							right: 15px;
							top: 50%;
							-webkit-transform: translateY(-50%); /* Safari用 */
							transform: translateY(-50%);
						}
					}
				}
			}
		}
	}
	.sp_menuBtn{
		position: absolute;
		right: 5%;
		top: 50%;
		-webkit-transform: translateY(-50%); /* Safari用 */
		transform: translateY(-50%);
		&::after{
			font-family: FontAwesome;
			content: '\f0c9';
			@include fontSize(26);
			color: $mainColor;
		}
	}
	.close{
		&::after{
			content: '\f00d';
		}
	}
}

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

     footer

========================================================*/
footer{
	position: relative;
	.footer_contact{
		height: 100px;
		text-align: center;
		@include mq-down(md){
			height: 80px;
		}
		a{
			box-sizing: border-box;
			display: block;
			width: 100%;
			height: 100px;
			@include fontSize(18);
			background-color: $mainColor;
			color: #fff;
			font-weight: bold;
			letter-spacing: 0.05em;
			padding-top: 60px;
			position: relative;
			&::before{
				font-family: FontAwesome;
				content: '\f0e0';
				position: absolute;
				top: 25px;
				left: 0;
				right: 0;
				margin: 0 auto;
				font-size: 28px;
				font-weight: normal;
			}
			@include mq-down(md){
				height: 80px;
				padding-top: 50px;
				@include fontSize(16);
				&::before{
					font-size: 20px;
					top: 15px;
				}
			}
		}
	}
	.footer_copy{
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-weight: bold;
		@include fontSize(12);
		letter-spacing: 0.05em;
		color: #fff;
		background-color: #000;
		@include mq-up(md){
			br{
				display: none;
			}
		}
		@include mq-down(md){
			box-sizing: border-box;
			line-height: 1.7;
			padding-top: 10px;
			@include fontSize(10);
		}
	}
	.footer_btn{
		position: absolute;
		right: 90px;
		top: -31px;
		a{
			line-height: 0;
			display: block;
			img{
				width: 31px;
				height: 31px;
			}
		}
		@include mq-down(md){
			right: 5%;
		}
	}
}

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

     top_page

========================================================*/
#top_page{
	.mainimage{
		background: url(../img/top/bg_mainimage_01.jpg) no-repeat center center;
		background-size: cover;
		a{
			position: relative;
			display: block;
			height: 100vh;
		}
		h1{
			width: 608px;
			height: 204px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			text-align: center;
			padding-right: 14px;
		}
		p{
			position: absolute;
			bottom: 50px;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 179px;
			img{
				width: 179px;
			}
		}
		@include mq-down(md){
			a{
				h1{
					width: 304px;
					height: 102px;
					padding-right: 7px;
				}
				p{
					text-align: center;
					img{
						width: 90px;
					}
				}
			}
		}
	}//.mainimage
	.cont{
		padding: 80px 90px;
		h2{
			margin-bottom: 30px;
		}
		@include mq-down(md){
			padding: 15px 5%;
			h2{
				margin-bottom: 15px;
			}
		}
	}
	.greeting{
		.greeting_inner{
			background: url(../img/top/bg_greeting_01.png) no-repeat right top;
			@include mq-down(md){
				background-size: 30%;
			}
		}
		background-color: $mainColor;
		//position: relative;
		h2{
			img{
				width: 363px;
				@include mq-down(md){
					width: 181.5px;
				}
			}
		}
		.greeting_cont{
			p{
				padding: 0 70px;
				letter-spacing: 0.05em;
				line-height: 2.25;
				color: #fff;
				@include mq-down(md){
					@include fontSize(12);
					padding: 0;
				}
			}
		}
	}//.greeting
	.business{
		background: url(../img/top/bg_business_01.png) no-repeat right top;
		h2{
			img{
				width: 308px;
				@include mq-down(md){
					width: 154px;
				}
			}
		}
		@include mq-down(md){
			background-size: 50%;
		}
		.business_cont{
			.business_contInner{
				dl{
					width: 23.5%;
					margin: 0 2% 30px 0;
					border: 2px solid $mainColor;
					box-sizing: border-box;
					float: left;
					@include mq-down(md){
						width: 100%;
						margin: 0 0 15px;;
					}
					&:nth-of-type(4n){
						margin-right: 0;
					}
					dt,dd{
						text-align: center;
						letter-spacing: 0.05em;
					}
					dt{
						display: block;
						@include fontSize(18);
						color: $mainColor;
						font-weight: bold;
						
						padding: 20.5px 35px;
						width: 100%;
						box-sizing: border-box;
						background-color: #fff;
						position: relative;
						line-height: 1.2;
						&::before{
							margin-right: 5px;
							font-weight: normal;
						}
						&::after{
							font-family: FontAwesome;
							content: '\f078';
							position: absolute;
							right: 15px;
							top: 50%;
							-webkit-transform: translateY(-50%); /* Safari用 */
							transform: translateY(-50%);
						}
						&:hover{
							cursor: pointer;
						}
						&.active{
							&::after{
								content: '\f00d';
							}
						}
						@include mq-down(lg){
							@include fontSize(14);
						}
					}
					dd{
						display: none;
						background-color: #fff;
						padding-bottom: 20px;
						p{
							padding: 5px 0;
						}
						@include mq-down(lg){
							@include fontSize(12);
						}
					}
					&.business_cont-01{
						dt{
							&::before{
								font-family: FontAwesome;
								content: '\f0d6';
							}
						}
					}
					&.business_cont-02{
						dt{
							&::before{
								font-family: FontAwesome;
								content: '\f015';
							}
						}
					}
					&.business_cont-03{
						dt{
							&::before{
								font-family: FontAwesome;
								content: '\f0f2';
							}
						}
					}
					&.business_cont-04{
						dt{
							&::before{
								font-family: FontAwesome;
								content: '\f29d';
							}
						}
					}
					&.business_cont-05{
						dt{
							&::before{
								font-family: FontAwesome;
								content: '\f0c0';
							}
						}
					}
					&.business_cont-06{
						dt{
							&::before{
								font-family: FontAwesome;
								content: '\f19c';
							}
							&::after{
								content: none;
							}
						}
					}
					&.business_cont-07{
						dt{
							&::before{
								font-family: FontAwesome;
								content: '\f02d';
							}
							&::after{
								content: none;
							}
						}
					}
				}
			}
			p.business_cont-txt{
				@include fontSize(14);
				letter-spacing: 0.05em;
			}
		}
	}//.business
	.lawyer{
		background-color: #ffffe3;
		h2{
			img{
				width: 182px;
				@include mq-down(md){
					width: 91px;
				}
			}
		}
		.lawyer_cont{
			display: flex;
			justify-content: space-between;
			@include mq-down(md){
				flex-wrap: wrap;
				p{
					@include fontSize(12);
				}
			}
		}
		.lawyer_cont-left,
		.lawyer_cont-right{
			width: 45.45%;
			@include mq-down(md){
				width: 100%;
			}
			.cont-pic{
				
			}
			.cont-name{
				margin: 30px 0 25px;
				@include mq-down(md){
					margin: 15px 0 12.5px;
				}
			}
			.cont-txt{
				line-height: 1.75;
			}
			.cont-txt01{
				margin-bottom: 40px;
				span{
					display: block;
					margin-top: 10px;
				}
				@include mq-down(md){
					margin-bottom: 20px;
				}
			}
			.cont-txt02{
				margin-bottom: 15px;
			}
			#cont-txtTop{
				&.active{
					display: none;
				}
			}
			#contentWrap{
				display: none;
				p{
					margin-top: 30px;
					&:first-of-type{
						margin-top: 0;
					}
					@include mq-down(md){
						margin-top: 15px;
					}
				}
			}
			.cont-btn{
				border: 1px solid $mainColor;
				color: $mainColor;
				text-align: center;
				@include fontSize(18);
				font-weight: bold;
				letter-spacing: 0.05em;
				padding: 15px 0;
				margin-bottom: 20px;
				position: relative;
				&:hover{
					cursor: pointer;
					opacity: 0.7;
				}
				&::after{
					font-family: FontAwesome;
					content: '\f078';
					position: absolute;
					right: 15px;
					top: 50%;
					-webkit-transform: translateY(-50%); /* Safari用 */
					transform: translateY(-50%);
				}
				&.close{
					display: none;
				}
				@include mq-down(md){
					@include fontSize(14);
					padding: 12.5px 0;
				}
			}
			.cont-sign{
				text-align: right;
				float: right;
				img{
					max-width: 265px;
				}
			}
		}
		.lawyer_cont-left{
			.cont-name{
				width: 53.2%;
				img{
					max-width: 268px;
				}
			}
			.cont-txt02{
				&.active{
					margin-bottom: 0;
				}
			}
			.cont-sign{
				width: 63%;
			}
			@include mq-down(md){
				margin-bottom: 15px;
			}
		}
		.lawyer_cont-right{
			.cont-name{
				width: 70%;
				img{
					max-width: 340px;
				}
			}
			.cont-sign{
				width: 60%;
			}
		}
	}//.lawyer
	.forest{
		height: 200px;
		.forest_inner{
			height: 100vh;
			background: url(../img/top/bg_forest_01.jpg) no-repeat center bottom;
			background-attachment: fixed;
		}
		@include mq-down(md){
			height: 100px;
		}
	}//forest_inner
	.office{
		background-color: #fff;
		@include mq-down(md){
			padding-bottom: 40px;
		}
		h2{
			img{
				width: 533px;
				@include mq-down(md){
					width: 266.5px;
				}
			}
		}
		.office_cont{
			display: flex;
			justify-content: space-between;
			@include mq-down(md){
				flex-wrap: wrap;
			}
			.mapWrap{
				width: 68.18%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				@include mq-down(md){
					width: 100%;
				}
				.office_left{
					width: 45.1%;
					@include mq-down(md){
						width: 100%;
						margin-bottom: 30px;
						p{
							max-width: 340px;
							margin: 0 auto;
						}
					}
				}
				.office_center{
					width: 51.3%;
					@include mq-down(md){
						width: 100%;
					}
					table{
						width: 100%;
						margin-bottom: 25px;
						tbody{
							border-top: 1px solid #000;
							border-bottom: 1px solid #000;
							tr{
								border-bottom: 1px dotted #000;
								th,td{
									padding: 15px 0;
									letter-spacing: 0.05em;
									line-height: 1.75;
									@include mq-down(xl){
										padding: 10px 0;
									}
									@include mq-down(lg){
										padding: 5px 0;
									}
								}
								th{
									width: 60px;
									text-align: left;
									padding-left: 10px;
								}
								td{
									font-weight: bold;
									@include mq-down(xl){
										@include fontSize(14);
									}
									@include mq-down(lg){
										@include fontSize(12);
									}
								}
							}
						}
					}
					p{
						padding-right: 23.38%;
						img{
							max-width: 296px;
						}
						@include mq-down(md){
							padding: 0;
							text-align: center;
						}
					}
				}
				.map_btn{
					width: 100%;
					text-align: center;
					margin-top: 45px;
					a{
						box-sizing: border-box;
						display: block;
						width: 100%;
						color: $mainColor;
						@include fontSize(18);
						font-weight: bold;
						padding: 12px 0;
						border: 1px solid $mainColor;
						position: relative;
						&::after{
							font-family: FontAwesome;
							content: '\f08e';
							position: absolute;
							right: 15px;
							top: 50%;
							-webkit-transform: translateY(-50%); /* Safari用 */
							transform: translateY(-50%);
						}
					}
					@include mq-down(md){
						@include fontSize(14);
						a{
							padding: 12.5px 0;
						}
					}
				}
			}
			.office_right{
				width: 27.27%;
				@include mq-down(md){
					width: 100%;
					margin-top: 30px;
					p{
						max-width: 300px;
						margin: 0 auto;
					}
				}
			}
		}
	}//.office
}