@inqlude mq(learge)　デフォルトmidium tablet
PCから組みたい

@charset "UTF-8";

@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

@mixin mq($breakpoint: medium) {
	@if $breakpoint == small {
		@media screen and (min-width: 375px) {
			@content;
		}
	} @else if $breakpoint == medium {
		@media screen and (min-width: 768px) {
			@content;
		}
	} @else if $breakpoint == large {
		@media screen and (min-width: 1024px) {
			@content;
		}
	} @else if $breakpoint == xlarge {
		@media screen and (min-width: 1440px) {
			@content;
		}
	} @else if $breakpoint == sp {
		@media screen and (max-width: 1023px) {
			@content;
		}
	}
}


/* color */

$color01: #fff;
$color02: #000;
$color03: #D13239;
$color04: #DDDDDD;
$color05: #EBEBEB;
$color06: #F9F4EA;
$color07: #F5F6F8;
$color08: #F9F9F9;


html {
	font-size: 62.5%;
}
a {
	color: #333;
	text-decoration: none;
	@include mq(large) {
	    &:hover {
			text-decoration: underline;
		}
	}
}
sup {
	vertical-align: top;
}

.sp {
	@include mq(large) {
		display: none !important;
	}
}

/* youtube */

.col-movie-wrap {
	width: 90%;
	@include mq {
		width: 660px;
	}
	margin: 0 auto;
}
.movie {
    position: relative;
    padding-top: 56.25%;
    width: 100%;
}
.movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* btn */

.btn {
	display: block;
	height: 100%;
	width: 100%;
	line-height: 1.8;
	text-decoration: none;
	text-align: center;
	.btn_in {
		display: block;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}
}
.pt01 {
	height: 44px;
	margin: 0 auto;
	@include mq {
	    width: 260px;
	    br {
			display: none;
		}
    }
	.btn {
		color: $color01;
		background-color: $color03;
		border: 2px solid $color03;
		border-radius: 4px;
		font-size: 1.4rem;
		font-weight: 600;
	    @include mq(large) {
			transition: all .3s ease-out;
			&:hover {
				color: $color03;
				background-color: $color01;
				text-decoration: none;
			}
	    }
	    span::after {
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			content: "\f105";
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 10px;
		}
	}
}
.plus {
	width: 100px;
	margin: 50px auto 0;
	cursor: pointer;
	font-size: 1.4rem;
	.plus_in {
		position: relative;
		height: 60px;
		text-align: center;
		padding: 45px 0 0;
		span {
			display: block;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background-color: $color03;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			&::before {
				content: '';
				display: block;
				width: 16px;
				height: 2px;
				background-color: $color01;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			&::after {
				content: '';
				display: block;
				width: 2px;
				height: 16px;
				background-color: $color01;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
		}
		&:hover {
			opacity: 0.75;
			text-decoration: none;
		}
	}
}

/* base */

body {
    font-family: 'Noto Serif JP', sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fff;
    color: #333;
}

/* header */

#site_header {
	height: 130px;
	z-index: 90;
	position: relative;

	@include mq(large) {
		height: 200px;
	}
	.logo {
		position: absolute;
		top: 30px;
		left: 50%;
		transform: translateX(-50%);
		width: 90px;
		height: 75px;
		z-index: 101;
		img {
			width: 100%;
			height: auto;
		}
	}
	@include mq(sp) {
		#menu_header.active {
			position: fixed;
			top: 0;
			left: 0;
			background-color: $color01;
			width: 100%;
			height: 130px;
		}
		.menu {
			display: none;
			background-color: rgba(0,0,0,0.9);
			width: 100%;
			height: calc(100% - 130px);
			position: fixed;
			top: 130px;
			left: 0;
			z-index: 100;
			overflow-y: scroll;
			padding: 20px 0 100px;
		}
		.menu.show {
			display: block;
			animation: show .3s ease-out;
		}
		#sp_btn {
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 100;
		}
		#panel-btn {
			display: inline-block;
			position: relative;
			width: 50px;
			height: 50px;
		}
		#panel-btn-icon {
			display: block;
			position: absolute;
			top: 34%;
			left: 50%;
			transform: translateX(-50%);
			width: 30px;
			height: 3px;
			background-color: $color03;
			transition: .2s;
			&:before,
			&:after {
				display: block;
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				width: 30px;
				height: 3px;
				background-color: $color03;
				transition: .3s;
			}
			&:before {
				margin-top: -10px;
			}
			&:after {
				margin-top: 7px;
			}
		}
		#m_text {
			position: absolute;
			bottom: 4px;
			left: 50%;
			transform: translateX(-50%) scale(0.8);
			color: $color03;
			font-size: 1rem;
			width: 50px;
			text-align: center;
			font-family: "YuGothic","Yu Gothic","Meiryo","ヒラギノ角ゴ","sans-serif";
			font-weight: 700;
		}
		#panel-btn-icon.close {
			background: transparent;
			&:before,
			&:after {
				margin-top: 0px;
			}
			&:before {
				transform: rotate(-45deg);
			}
			&:after {
				transform: rotate(-135deg);
			}
		}
		.g_nav {
			width: 90%;
			margin: 0 auto 50px;
			ul {
				font-size: 1.6rem;
			}
			a {
				display: block;
				color: $color01;
				padding: 20px 0;
				border-bottom: 1px solid $color01;
			}
		}
		.h_nav {
			width: 90%;
			margin: 0 auto 20px;
			text-align: center;
			ul {
				font-size: 1.4rem;
				display: flex;
				flex-wrap: wrap;
				li {
					width: calc((100% - 15px) / 2);
					margin: 0 15px 0 0;
					&:first-of-type {
						width: 100%;
						margin: 0 0 15px;
						font-size: 1.6rem;
						font-weight: 700;
					}
					&:last-of-type {
						margin: 0;
					}
				}
			}
			a {
				display: block;
				color: $color03;
				background-color: $color01;
				padding: 20px 0;
				border-radius: 4px;
				position: relative;
				&::after {
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					content: "\f105";
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 10px;
				}
			}
		}
		.renmei {
			font-size: 1.2rem;
			line-height: 1.6;
			text-align: center;
			width: 90%;
			margin: 0 auto;
			a {
				display: block;
				background-image: url(../img/img_renmei.jpg);
				background-repeat: no-repeat;
				background-position: center 10px;
				background-size: 40px 42px;
				padding: 55px 10px 10px;
				border-radius: 4px;
				background-color: #fff;
			}
		}
	}
	@include mq(large) {
		#sp_btn {
			display: none;
		}
		.g_nav {
			position: absolute;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%);
			ul {
				display: flex;
				font-size: 1.6rem;
			}
			li {
				width: 150px;
				height: 50px;
				text-align: center;
				display: table;
				a {
					display: table-cell;
					vertical-align: middle;
					font-weight: 500;
					&:hover {
						text-decoration: none;
						color: $color03;
					}
				}
				span {
					font-size: 1rem;
					display: block;
					margin: 0 0 5px;
				}
			}
		}
		.h_nav {
			position: absolute;
			top: 24px;
			right: 50px;
			ul {
				display: flex;
				font-size: 1.2rem;
			}
			li {
				margin: 0 10px 0 0;
				display: table;
				height: 40px;
				a {
					display: table-cell;
					vertical-align: middle;
				}
			}
		}
		.renmei {
			font-size: 1.4rem;
			position: absolute;
			top: 20px;
			left: 50px;
			height: 45px;
			background-image: url(../img/img_renmei.jpg);
			background-repeat: no-repeat;
			background-size: 40px 42px;
			padding: 15px 0 0 45px;
		}
	}
}

/* title_area */

#title_area {
	background-image: url(../img/bg_title04.jpg);
	background-size: cover;
	background-position: center center;
	position: relative;
	height: 150px;
	@include mq {
		height: 250px;
	}
	&::before {
		display: block;
		content: '';
		width: 100%;
		height: 100%;
		background: rgba(249,244,234,0.7);
		position: absolute;
		top: 0;
		left: 0;
	}
	.title_area_in_01 {
		width: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		h1 {
			font-size: 2rem;
			font-weight: 700;
			@include mq(large) {
				font-size: 3rem;
			}
			line-height: 1.8;
			text-align: center;
			span {
				display: block;
				font-size: 1.1rem;
				@include mq(large) {
					font-size: 1.4rem;
				}
			}
			br {
				display: none;
				@include mq {
					display: block;
				}
			}
		}
	}
}
.home {
	#title_area {
		background-image: url(../img/bg_main.jpg);
		background-size: cover;
		background-position: center center;
		height: 300px;
		@include mq {
			height: 500px;
		}
		&::before {
			display: none;
		}
		.title_area_in_01 {
			width: 90%;
			padding: 20px;
			@include mq(large) {
				width: 800px;
				padding: 50px;
			}

			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			background-color: rgba(255,255,255,0.75);
			h1 {
				color: $color02;
				margin: 0 0 30px;
			}
		}
	}
}
.page-id-82 {
	#title_area {
		background-image: url(../img/bg_title01.jpg);

	}
}
.page-id-87 {
	#title_area {
		background-image: url(../img/bg_title02.jpg);

	}
}
.page-id-45,
.page-id-60 {
	#title_area {
		background-image: url(../img/bg_title03.jpg);

	}
}

/* content */

.col-1 {
	.inner {
		width: 90%;
		@include mq(large) {
			width: 800px;
		}
		margin: 0 auto;
		padding: 80px 0;
		position: relative;
	}
}
.home {
	.inner {
		width: 90%;
		@include mq(large) {
			width: 1000px;
		}
	}
}
.col-2 {
	.col-2_in {
		width: 90%;
		@include mq {
			display: flex;
			justify-content: space-between;
		}
		@include mq(large) {
			width: 1000px;
		}
		margin: 0 auto;
	}
	main {
		@include mq {
			width: 70%;
		}
		@include mq(large) {
			width: 720px;
			min-height: 500px;
		}
	}
	#side {
		background-color: $color06;
		margin: 0 0 50px;
		@include mq {
			width: 25%;
		}
		@include mq {
			margin: 0;
		}
		@include mq(large) {
			width: 250px;
			padding: 0 0 50px;
		}
		h2 {
			font-size: 1.6rem;
			background-color: $color03;
			padding: 25px 15px;
			color: $color01;
			border-bottom: solid 1px $color01;
			position: relative;
			&::after {
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				content: "\f067";
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 15px;
				@include mq {
					display: none;
				}
			}
		}
		.active {
			&::after {
				content: "\f068";
			}
		}
		ul {
			display: none;
			@include mq {
				display: block;
			}
		}
		li {
			font-size: 1.6rem;
		}
		a {
			display: block;
			padding: 20px 15px;
			border-bottom: 1px dotted $color04;
			position: relative;
			&:hover {
				background-color: $color03;
				text-decoration: none;
				color: $color01;
				border-bottom: 1px solid $color03;
			}
			&::after {
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				content: "\f105";
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 15px;
			}
		}
		.current-cat {
			a {
				background-color: $color03;
				color: $color01;
				border-bottom: 1px solid $color03;
			}
		}
	}
}
#slider {
	height: 300px;
	@include mq {
		height: 500px;
	}
}
#slider02 {
	height: 500px;
}
.panlist {
	background-color: $color06;
	display: none;
	@include mq(large) {
		display: block;
	}
	.inner {
		width: 1000px;
		margin: 0 auto;
		padding: 10px 0;
	}
	a {
		color: $color03;
	}
}

/* post_common */

.post_area {
	.inner {
		padding: 50px 0;
		@include mq {
			padding: 80px 0;
		}
	}
	.bg01 {
		background-color: $color08;
	}
	h2 {
		font-size: 1.6rem;
		@include mq(small) {
			font-size: 2rem;
		}
		@include mq {
			font-size: 2.6rem;
		}
		line-height: 1.6;
		margin: 60px 0 40px;
		&:first-child {
			margin: 0 0 40px;
		}
		span {
			font-size: 1rem;
			display: block;
		}
	}
	h3 {
		font-size: 1.6rem;
		@include mq {
			font-size: 2rem;
		}
		line-height: 1.6;
		margin: 60px 0 30px;
		&:first-child {
			margin: 0 0 30px;
		}
	}
	p {
		font-size: 1.4rem;
		@include mq {
			font-size: 1.6rem;
		}
		line-height: 2;
		margin: 0 0 15px;
		br {
			display: none;
			@include mq {
				display: block;
			}
		}
	}
	ul{
		font-size: 1.4rem;
		@include mq {
			font-size: 1.6rem;
		}
		line-height: 1.6;
		margin: 0 0 20px;
		&:last-child {
			margin-bottom: 0;
		}
		li {
			padding: 0 0 0 20px;
			margin: 0 0 5px;
			position: relative;
			&::before {
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				content: "\f111";
				position: absolute;
				top: 5px;
				left: 0;
				font-size: 1rem;
				color: $color03;
			}
		}
	}
	a {
		img {
			&:hover {
				opacity: 0.75;
			}
		}
	}
	img {
		width: 100%;
		height: auto;
	}
	@media (min-width: 1024px){
		img {
			width: auto;
		}
		.alignright {
			width: auto;
			float: right;
			margin: 0 30px 30px 50px;
		}
		.alignleft {
			width: auto;
			float: left;
			margin: 0 50px 30px 30px;
		}
		.aligncenter {
			display: block;
			margin: 50px auto;
		}
	}
	ol {
		margin: 0 0 40px 30px;
		font-size: 1.6em;
		line-height: 1.4;
		li {
			list-style-type: decimal;
			margin: 0 0 15px 0;
		}
	}
	blockquote {
		background: #f0f8f8;
		border: #add0d0 1px solid;
		padding: 30px;
	}
	table {
		font-size: 1.4em;
		@include mq {
			font-size: 1.6em;
		}
		border-collapse: separate;
		border-spacing: 1px;
		line-height: 1.6;
		width: 100%;
		th {
			background-color: #394A53;
			padding: 10px 15px 11px;
			color: #fff;
			@include mq {
				width: 260px;
				padding: 16px 30px 17px;
				vertical-align: middle;
			}
			a {
				color: #FFF;
			}
		}
		.left {
			text-align: left;
		}
		td {
			background-color: #F5F5F5;
			padding: 17px 15px 18px;
			@include mq {
				padding: 16px 30px 17px;
			}
		}
	}
	.ty {
		tr {
			&:first-of-type {
				th,td {
					text-align: center;
				}
			}
		}
	}
	.tt {
		th,td {
			display: block;
			@include mq {
				display: table-cell;
			}
		}
	}
	strong {
		font-weight: bold;
	}
	em {
		font-style: italic;
	}
	.acf-map {
		width: 100%;
		height: 400px;
		margin-bottom: 30px;
	}
	.col_2 {
		margin: 0 auto 80px;
	}
	.col_2_in {
		@include mq {
			display: flex;
			justify-content: space-between;
		}
		margin: 0 0 50px;
		&:last-of-type {
			margin: 0;
		}
		&:nth-of-type(odd) {
			flex-direction: row-reverse;
		}
		figure {
			width: 260px;
			margin: 0 auto 15px;
			@include mq {
				margin: 0;
			}
			img {
				width: 100%;
				height: auto;
				border-radius: 50%;
				margin: 0 0 15px;
			}
		}
		.col_2__in {
			@include mq {
				width: 520px;
			}
			h2 {
				margin: 0 0 20px;
			}
		}
	}
	.col_3 {
		@include mq {
			display: flex;
			justify-content: space-between;
			margin: 50px 0 0;
		}
		.col_3_in {
			@include mq {
				width: 250px;
			}
			img {
				width: 100%;
				height: auto;
				margin: 0 0 15px;
			}
		}
		p {
			font-size: 1.4rem;
		}
	}
	.col_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 auto;
		.col_list_in {
			margin: 0 5px;
			text-align: center;
		}
		figure {
			width: 250px;
			margin: 0 auto;
			@include mq {
				margin: 0;
			}
			img {
				width: 100%;
				height: auto;
				margin: 0 0 15px;
			}
		}
	}
	.pt01 {
		margin: 50px auto 0;
	}
	.btn_2 {
		.pt01 {
			margin: 0;
		}
		ul {
			@include mq {
			display: flex;
			justify-content: space-between;
			width: 560px;
			}
			margin: 50px auto 0;
		}
		li {
			padding: 0;
			&::before {
				display: none;
			}
			&:first-of-type {
				margin: 0 0 20px;
			}
		}
	}
	.tel {
		font-size: 3.8rem;
		margin: 0 auto 25px;
		padding: 0 0 0 50px;
		position: relative;
		font-weight: 600;
		width: 290px;
		span {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 40px;
			height: 40px;
			img {
				width: 100%;
				height: auto;
			}
		}
	}
}

/* page */

#page_link {
	ul {
		display: flex;
		justify-content: space-between;
		@include mq {
			justify-content: center;
		}
	}
	li {
		padding: 0;
		margin: 0;
		font-size: 1.4rem;
		width: calc((100% - 3px) / 4);
		text-align: center;
		@include mq {
			width: auto;
			text-align: left;
			font-size: 2rem;
		}
		&::before {
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			content: "\f107";
			position: absolute;
			top: auto;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			font-size: 1rem;
			color: $color01;
			@include mq {
				color: $color03;
			}
		}
	}
	a {
		display: block;
		padding: 5px 5px 10px;
		background: $color03;
		color: $color01;
		@include mq {
			padding: 20px 20px 10px;
			background: none;
			color: #333;
		}
		&:hover {
			@include mq(large) {
				text-decoration: none;
				color: $color03;
			}
		}
	}
}
#page_link.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	@include mq {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
	}
}
.concept_01 {
	background-image: url(../img/bg_concept.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	height: 300px;
	@include mq {
		height: 500px;
	}
	position: relative;
	p {
		font-size: 2rem;
		color: $color01;
		text-align: center;
		margin: 0;
		position: absolute;
		width: 90%;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		@include mq {
			font-size: 2.6rem;
			width: auto;
		}
	}
	.overlay {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.6);
	}
}
.service_01 {
	background-color: #333;
	height: 500px;
	position: relative;
	.overlay {
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.6);
		position: absolute;
		top: 0;
		left: 0;
	}
	.inner {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		color: $color01;
	}
}
.service_02 {
	background-color: $color08;
	.inner {
		@include mq {
			width: 800px;
		}
		margin: 0 auto;
	}
	dl {
		&:first-of-type {
			margin: 50px 0;
		}
		dt {
			font-size: 1.6rem;
			line-height: 1.8;
			margin: 0 0 10px;
		}
		dd {
			background: $color01;
			padding: 30px;
			font-size: 1.6rem;
			line-height: 1.8;
			.aligncenter {
				margin: 0 auto;
			}
		}
	}
}
.kokoro_01 {
	.inner {
		padding-top: 0;
	}
	position: relative;
	@include mq {
		height: 420px;
	}
	.kokoro_01_in {
		margin: 0 auto 15px;
		width: 200px;
		@include mq {
			position: absolute;
			top: -30px;
			right: 0;
			margin: 0;
			width: 250px;
		}
		@include mq(large) {
			width: 320px;
		}
		img {
			width: 100%;
			height: auto;
		}
	}
	p {
		@include mq {
			width: 400px;
		}
		@include mq(large) {
			width: 450px;
		}
	}
}
.soudan_01 {
	ul {
		@include mq {
			width: 500px;
		}
		margin: 0 auto;
	}
}
.soudan_02 {
	dl {
		margin: 50px 0 0;
		dt {
			text-align: center;
			font-size: 1.6rem;
			margin: 0 0 30px;
			font-weight: 700;
		}
		.tel {
			margin: 0 auto 50px;
		}
		.pt01 {
			margin-top: 0;
		}
	}
}
.exigent_01 {
	.tel {
		font-size: 3rem;
		width: 250px;
		padding: 0 0 0 40px;
		@include mq {
			font-size: 8rem;
			width: 580px;
			padding: 0 0 0 80px;
		}

		span {
			width: 30px;
			width: 30px;
			@include mq {
				width: 60px;
				width: 60px;
			}
			top: 50%;
			transform: translateY(-50%);
		}
	}
}
.exigent_02 {
	.flow {
		padding: 25px 15px 25px 100px;
		margin: 0 0 30px;
		min-height: 250px;
		background-repeat: no-repeat;
		background-position: left top;
		position: relative;
		background-size: 100px 200px;
		background-color: $color01;
		h3 {
			margin: 0 0 15px;
		}
		p {
			font-size: 1.4rem;
			margin-bottom: 10px;
			line-height: 1.6;
		}
		dl {
			margin: 20px 0;
			&:last-of-type {
					margin: 0;
				}
			dt {
				font-size: 1.2rem;
				font-weight: 700;
				border-radius: 4px;
				background-color: $color03;
				color: $color01;
				padding: 5px 0;
				width: 170px;
				text-align: center;
				margin: 0 0 5px;
			}
			dd {
				font-size: 1.4rem;
				line-height: 1.8;

			}
		}
		figure {
			margin: 0 0 20px;
			@include mq {
				position: absolute;
				top: 50px;
				right: 30px;
				width: 150px;
				margin: 0;
			}
			img {
				width: 100%;
				height: auto;
			}
		}
		.tel {
			width: auto;
			font-size: 2.4rem;
			padding: 0 0 0 25px;
			margin: 25px 0;
			@include mq {
				font-size: 3.8rem;
				padding: 0 0 0 50px;
			}
			span {
				width: 20px;
				height: 20px;
				@include mq {
					width: 40px;
					height: 40px;
				}
			}
		}
	}
	.flow_in.flow_img {
		@include mq {
			width: 500px;
		}
	}
	.no01 {
		background-image: url(../img/img_flow01.png);
	}
	.no02 {
		background-image: url(../img/img_flow02.png);
	}
	.no03 {
		background-image: url(../img/img_flow03.png);
	}
	.no04 {
		background-image: url(../img/img_flow04.png);
	}
	.no05 {
		background-image: url(../img/img_flow05.png);
	}
	.no06 {
		background-image: url(../img/img_flow06.png);
	}
	.no07 {
		background-image: url(../img/img_flow07.png);
	}
	.no08 {
		background-image: url(../img/img_flow08.png);
	}
	.no09 {
		background-image: url(../img/img_flow09.png);
	}
	.no10 {
		background-image: url(../img/img_flow10.png);
	}
}
.butsugu_01 {
	.inner {
		padding: 0 0 80px;
	}
	.butsugu_01_in {
		@include mq {
			display: flex;
			justify-content: space-between;
		}
		margin: 0 0 50px;
		figure {
			margin: 0 0 20px;
			@include mq {
				width: 300px;
				margin: 0;
			}
			img {
				width: 100%;
				height: auto;
			}
		}
		dl {
			@include mq {
				width: 460px;
			}
			dt {
				font-size: 2rem;
				line-height: 1.6;
				font-weight: 700;
				margin: 0 0 10px;
			}
			dd {
				font-size: 1.6rem;
				line-height: 2;
			}
		}
	}
}
.print_map {
	h3 {
		margin: 30px 15px !important;
	}
	.pt01 {
		.btn {
			cursor: pointer;
		}
		span {
			&::after {
				display: none;
			}
		}
	}
	@media print {
		.btn_2 {
			display: none;
		}
	}
}
.sogi_01 {
	.flow {
		padding: 25px 15px 25px 100px;
		margin: 0 0 30px;
		min-height: 250px;
		background-repeat: no-repeat;
		background-position: left top;
		position: relative;
		background-size: 100px 200px;
		&:nth-of-type(odd) {
			background-color: $color07;
		}
		h3 {
			margin: 0 0 15px;
		}
		p {
			font-size: 1.4rem;
			margin-bottom: 10px;
			line-height: 1.6;
		}
		dl {
			margin: 20px 0;
			&:last-of-type {
					margin: 0;
				}
			dt {
				font-size: 1.2rem;
				font-weight: 700;
				border-radius: 4px;
				background-color: $color03;
				color: $color01;
				padding: 5px 0;
				width: 120px;
				text-align: center;
				margin: 0 0 5px;
			}
			dd {
				font-size: 1.4rem;
				line-height: 1.8;

			}
		}
		figure {
			margin: 0 0 20px;
			@include mq {
				position: absolute;
				top: 50px;
				right: 30px;
				width: 150px;
				margin: 0;
			}
			img {
				width: 100%;
				height: auto;
			}
		}
		.tel {
			width: auto;
			font-size: 2.4rem;
			padding: 0 0 0 25px;
			margin: 25px 0;
			@include mq {
				font-size: 3.8rem;
				padding: 0 0 0 50px;
			}
			span {
				width: 20px;
				height: 20px;
				@include mq {
					width: 40px;
					height: 40px;
				}
			}
		}
	}
	.flow_in.flow_img {
		@include mq {
			width: 500px;
		}
	}
	.no01 {
		background-image: url(../img/img_flow01.png);
	}
	.no02 {
		background-image: url(../img/img_flow02.png);
	}
	.no03 {
		background-image: url(../img/img_flow03.png);
	}
	.no04 {
		background-image: url(../img/img_flow04.png);
	}
	.no05 {
		background-image: url(../img/img_flow05.png);
	}
	.no06 {
		background-image: url(../img/img_flow06.png);
	}
	.no07 {
		background-image: url(../img/img_flow07.png);
	}
	.no08 {
		background-image: url(../img/img_flow08.png);
	}
	.no09 {
		background-image: url(../img/img_flow09.png);
	}
	.no10 {
		background-image: url(../img/img_flow10.png);
	}
}
.column_01 {
	border: 1px solid $color05;
	padding: 30px;
	@include mq {
		display: flex;
	}
	.thumb {
		margin: 0 0 20px;
		@include mq {
			width: 200px;
			margin: 0 30px 0 0;
		}
		img {
			width: 100%;
			height: auto;
		}
	}
	.column_01_in {
		.posi,
		.name {
			font-size: 1.3rem;
			margin: 0 0 15px;
			span {
				color: $color03;
				margin: 0 15px 0 0;
			}
		}
		.msg {
			font-size: 1.3rem;
			line-height: 1.6;
			span {
				color: $color03;
				display: block;
				margin: 0 0 5px;
				line-height: 1;
			}
		}
	}
}
.column_02 {
	display: flex;
	flex-wrap: wrap;
	a {
		display: block;
		width: calc((100% - 20px) / 2);
		margin: 0 20px 0 0;
		&:nth-of-type(2n) {
			margin: 0;
		}
		img {
			width: 100%;
			height: auto;
			margin: 0 0 10px;
		}
		&:hover {
			text-decoration: none;
			opacity: 0.75;
		}
	}
}
.yarpp-related {
	h2 {
		margin: 60px 0 40px !important;
	}
}
.news_01 {
	@include mq {
		display: flex;
	}
	.day {
		margin: 0 0 10px;
		@include mq {
			margin: 0 20px 0 0;
		}
	}
}
.company_01 {
	.company_01_in {
		@include mq {
			display: flex;
		}
		figure {
			margin: 0 auto 20px;
			width: 50%;
			@include mq {
				width: 300px;
				margin: 0 30px 0 0;
			}
			img {
				width: 100%;
				height: auto;
			}
		}
		.company_01__in {
			@include mq {
				width: 470px;
			}
		}
	}
}

/* common */

.col_common_01 {
	background-color: $color07;
	background-image: url(../img/logo_common_01.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 395px 413px;
	.inner {
		width: 90%;
		margin: 0 auto;
		padding: 80px 0;
		@include mq {
			width: 600px;
			padding: 105px 0;
		}
	}
	h2 {
		font-size: 2.4rem;
		margin: 0 0 60px;
		color: $color03;
		text-align: center;
		line-height: 1.6;
		br {
			@include mq {
				display: none;
			}
		}
	}
	h3 {
		font-size: 1.8rem;
		margin: 0 0 25px;
		font-weight: 700;
	}
	.tel {
		font-size: 3.8rem;
		margin: 0 auto 25px;
		padding: 0 0 0 40px;
		position: relative;
		font-weight: 600;
		width: 280px;
		span {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 40px;
			height: 40px;
			img {
				width: 100%;
				height: auto;
			}
		}
	}
	.time {
		font-size: 1.4rem;
	}
	.cm_01_in_01 {
		@include mq {
			display: flex;
			justify-content: space-between;
		}
		.cm_01_in_01_01 {
			text-align: center;
			margin: 0 0 30px;
			@include mq {
				margin: 0;
			}
		}
		.cm_01_in_01_02 {
			.pt01 {
				&:first-of-type {
					margin: 0 0 10px;
					@include mq {
						margin: 0 0 30px;
					}
				}
			}
		}
	}
}
.col_common_02 {
	background-color: $color08;
	h2 {
		font-size: 2rem;
		@include mq {
			font-size: 2.4rem;
		}
		margin: 0 0 60px;
		text-align: center;
		line-height: 1.6;
	}
	dl {
		background-color: $color01;
		line-height: 1.8;
		margin: 0 0 20px;
		&:last-of-type {
			margin: 0;
		}
		dt {
			font-size: 1.6rem;
			@include mq {
				font-size: 2rem;
			}
			padding: 15px 50px 15px 15px;
			position: relative;
			cursor: pointer;
			color: $color03;
			font-weight: 700;
			span {
				display: block;
				width: 36px;
				height: 36px;
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				&::before {
					content: '';
					display: block;
					width: 16px;
					height: 4px;
					background-color: $color03;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
				&::after {
					content: '';
					display: block;
					width: 4px;
					height: 16px;
					background-color: $color03;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
			}
		}
		dd {
			font-size: 1.4rem;
			padding: 0 15px 15px;
			@include mq {
				font-size: 1.6rem;
			}
		}
	}
}
.page-id-82 {
	.col_common_03 {
		.inner {
			padding-bottom: 0;
		}
	}
}
.col_common_03 {
	h2 {
		font-size: 2.4rem;
		margin: 0 0 60px;
		text-align: center;
		line-height: 1.6;
	}
	ul {
		@include mq {
			width: 600px;
		}
		margin: 0 auto;
	}
	li {
		font-size: 1.6rem;
		line-height: 1.8;
		padding: 0 0 0 20px;
		margin: 0 0 20px;
		position: relative;
		&::before {
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			content: "\f111";
			position: absolute;
			top: 5px;
			left: 0;
			font-size: 1rem;
			color: $color03;
		}
	}
	a {
		display: block;
	}
	.concept_block {
		margin: 80px auto 0;
	}
}
.single-column {
	.col_common_04 {
		.inner {
			padding: 80px 0 0;
		}
	}
}
.concept_block {
	background-color: $color06;
	padding: 5%;
	@include mq {
		padding: 50px;
		width: 700px;
	}
	margin: 0 auto;
	h2 {
		font-size: 2rem;
		@include mq {
			font-size: 2.4rem;
		}
		margin: 0 0 20px;
		text-align: center;
		line-height: 1.6;
		br {
			@include mq {
				display: none;
			}
		}
	}
	p {
		font-size: 1.6rem;
		line-height: 1.8;
		text-align: center;
		br {
			display: none;
			@include mq {
				display: block;
			}
		}
	}
	.pt01 {
		margin: 50px auto 0;
	}
}
#estimate {
	#estimate_wrap {
		font-size: 1.4rem;
		border-collapse: separate;
		border-spacing: 1px;
		line-height: 1.6;
		width: 100%;
		@include mq {
			display: table;
			font-size: 1.6rem;
		}
		dl {
			&:first-of-type {
				display: none;
			}
			@include mq {
				display: table-row;
				&:first-of-type {
					display: table-row;
					dt,dd {
						vertical-align: middle;
						text-align: center;
					}
				}
			}
			dt {
				background-color: #394A53;
				padding: 10px 15px;
				color: #fff;
				@include mq {
					display: table-cell;
					width: 260px;
					padding: 15px 30px;
					vertical-align: middle;
				}
			}
			dd {
				background-color: #F5F5F5;
				padding: 10px 15px;
				&:nth-of-type(2) {
					vertical-align: bottom;
					&::before {
						content: '一般価格：';
					}
				}
				&:nth-of-type(3) {
					vertical-align: bottom;
					&::before {
						content: '会員価格：';
					}
				}
				@include mq {
					display: table-cell;
					padding: 15px 30px;
					&:nth-of-type(2) {
						&::before {
							display: none;
						}
					}
					&:nth-of-type(3) {
						&::before {
							display: none;
						}
					}
				}
			}
			.ans01k,
			.ans19k,
			.ans20k,
			.ans18k {
				color: $color03;
				font-weight: 700;
			}
		}
		.gk {
			dt {
				background-color: $color03;
				font-weight: 700;
			}
		}
	}


	.q_in {
		span {
			margin: 0 0 0 10px;
			font-size: 1.2rem;
		}
	}
	select + .q_in {
		padding: 15px 0 0;
	}
}

/* footer */

#site_footer {
	.wrap {
		background-color: $color02;
	}
	.inner {
		@include mq {
			width: 650px;
		}
		@include mq(large) {
			width: 750px;
		}
		padding: 50px 0;
		margin: 0 auto;
	}
	.logo {
		width: 90px;
		height: 92px;
		margin: 0 auto;
		@include mq {
			margin: 0 auto 50px;
		}
		img {
			width: 100%;
			height: auto;
		}
	}
	.f_nav {
		display: none;
		@include mq {
			display: flex;
			justify-content: space-between;
			font-size: 1.4rem;
		}
		@include mq(large) {
			font-size: 1.6rem;
		}
		a {
			display: inline-block;
			padding: 10px 0;
			color: $color01;


		}
		li {
			position: relative;
			padding: 0 0 0 15px;
			&::after {
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				content: "\f105";
				position: absolute;
				top: 12px;
				left: 0;
				color: $color01;
			}
		}
		.sub {
			li {
				padding: 0 0 0 35px;
				&::after {
					left: 20px;
				}
			}
			a {
				padding: 10px 0;

			}
		}
	}
	.copy {
		text-align: center;
		font-size: 1.4rem;
		padding: 15px 0;
		@media print {
			display: none;
		}
	}
	#pageup{
		display: none;
	    position: fixed;
	    bottom: 50px;
	    right: 5%;
		a{
		    display: block;
		    background: rgba(0, 0, 0, 0.25);
		    border-radius: 1px;
		    width: 48px;
		    height: 48px;
		    color: #d6d6d6;
		    text-indent: -9999px;
			&::before {
			    content: "";
			    display: block;
			    position: absolute;
			    left: 0;
			    right: 0;
			    top: 8px;
			    bottom: 0;
			    margin: auto;
			    width: 14px;
			    height: 14px;
			    margin: auto;
			    border-right: 3px solid #fff;
			    border-top: 3px solid #fff;
			    -webkit-transform: rotate(-45deg);
			    transform: rotate(-45deg);
			    z-index: 5;
			    opacity: 0.85;
			}
		}
	}
}

/* home */

.col_top {
	h2 {
		font-size: 2rem;
		@include mq {
			font-size: 2.4rem;
		}
		line-height: 1.6;
		padding: 0 0 20px;
		margin: 0 0 30px;
		text-align: center;
		position: relative;
		&::after {
			content: '';
			display: block;
			width: 30px;
			height: 2px;
			background-color: $color03;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		span {
			font-size: 1rem;
			display: block;
		}
	}
	p {
		font-size: 1.4rem;
		@include mq {
			font-size: 1.6rem;
		}
		line-height: 2;
		margin: 0 0 15px;
	}
	.pt01 {
		margin: 50px auto 0;
		@include mq {
			margin: 80px auto 0;
		}
	}
}
.top_01 {
	background-image: url(../img/logo_top_01.png);
	background-position: 100% 0;
	background-repeat: no-repeat;
	background-size: 326px 378px;
	.inner {
		@include mq {
			display: flex;
			justify-content: space-between;
		}
	}
	a {
		display: block;
		margin: 0 0 20px;
		@include mq {
			width: 220px;
			margin: 0;
		}
		@include mq(large) {
			width: 300px;
		}
		border: 1px solid $color04;
		background-color: $color01;
		padding: 19px;
		&:hover {
			opacity: 0.75;
		}
		&:last-of-type {
			margin: 0;
		}
		img {
			width: 100%;
			height: auto;
			margin: 0 0 10px;
		}
		p {
			font-weight: 600;
			text-align: center;
			margin: 0;
			font-size: 2rem;
			span {
				position: relative;
				display: inline-block;
				padding: 0 25px 0 0;
				&::after {
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					content: "\f105";
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 0;
					color: $color03;
				}
			}
		}
	}
}
.top_02 {
	background-image: url(../img/bg_top_02.jpg);
	background-size: 917px 499px;
	background-repeat: no-repeat;
	background-position: 0;
	position: relative;
	&::before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(249,244,234,0.7);
		@include mq(large) {
			display: none;
		}
	}
	.inner {
		height: 500px;
	}
	.top_02_in_01 {
		p {
			text-align: center;
			br {
				display: none;
				@include mq {
					display: block;
				}
			}
		}
	}
}
.top_03 {
	.inner {
		@include mq(large) {
			width: 800px !important;
		}
	}
	.top_03_in_01 {
		@include mq {
			display: flex;
			justify-content: space-between;
		}
		margin: 0 0 50px;
		&:first-of-type {
			flex-direction: row-reverse;
		}
		figure {
			width: 280px;
			height: 280px;
			margin: 0 auto 20px;
			@include mq {
				margin: 0;
			}
			img {
				width: 100%;
				height: auto;
				border-radius: 50%;
			}
		}
		p {
			@include mq {
				padding: 30px 0 0;
				width: 500px;
			}
		}
	}
}
.top_04 {
	background-color: $color06;
	background-image: url(../img/logo_top_04.png);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 300px 374px;
	#tab_menu {
		margin: 0 0 1px;
		@include mq {
			margin: 0;
		}
		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.menu_btn {
			width: calc((100% - 1px) / 2);
			text-align: center;
			height: 70px;
			display: table;
			background-color: $color05;
			font-size: 1.4rem;
			margin: 0 0 1px;
			cursor: pointer;
			@include mq {
				width: calc((100% - 2px) / 3);
				font-size: 1.6rem;
				margin: 0;
			}
			&:hover {
				background-color: $color01;
			}
			&:last-of-type {
				width: 100%;
				margin: 0;
				@include mq {
					width: calc((100% - 2px) / 3);
				}
			}
			span {
				display: table-cell;
				vertical-align: middle;
			}
		}
		.menu_btn.active {
			border-top: 5px solid $color03;
			background-color: $color01;
		}
	}
	#tab_content {
		background-color: $color01;
		padding: 20px;
		@include mq {
			padding: 40px 50px;
		}
		.content_block {
			font-size: 1.6rem;
			li {
				&:last-of-type {
					a {
						padding: 12px 0 0;
					}
				}
			}
			a {
				display: inline-block;
				padding: 12px 0 30px;
				@include mq {
					padding: 12px 0;
				}
			}
			span {
				display: block;
				@include mq {
					margin: 0 20px 0 0;
					display: inline;
				}
			}
		}
	}
}
.top_05 {
	.inner {
		@include mq {
			display: flex;
			justify-content: space-between;
			width: 700px;
		}
		@include mq(large) {
			width: 800px;
		}
	}
	.top_05_in_01 {
		font-size: 1.4rem;
		@include mq {
			width: 45%;
		}
		@include mq(large) {
			width: 350px;
		}
		li {
			border-bottom: 1px dotted #ccc;
			line-height: 1.8;
			a {
				display: block;
				padding: 20px 0;
			}
		}
		&:first-of-type {
			margin: 0 0 50px;
			@include mq {
				margin: 0;
			}
		}
	}
	h2 {
		font-size: 2rem;
	}
	#column h2 {
		background-image: url(../img/icon_book.png);
		background-repeat: no-repeat;
		background-position: 50% 0;
		background-size: 30px 25px;
		padding: 40px 0 20px;
	}
	#voice h2 {
		background-image: url(../img/icon_comment.png);
		background-repeat: no-repeat;
		background-position: 50% 0;
		background-size: 30px 25px;
		padding: 40px 0 20px;
	}
}
.top_07 {
	p {
		text-align: center;
		br {
			display: none;
			@include mq {
				display: block;
			}
		}
	}
}
/* MWform */

.mw_wp_form {
	input[type="text"],
	textarea {
		border: 1px solid #CCC;
		padding: 5px;
		-webkit-appearance: none;
		border-radius: 0;
		font-size: 1.6rem;
		width: 100%;
	}
	.btn_area {
		text-align: center;
		margin: 50px 0 0;
	}
	.add_box {
		margin: 0 0 10px;
		&:last-of-type {
			margin: 0;
		}
		.title {
			display: block;
			margin: 0 0 5px;
		}
	}
	.submit {
		border: none;
		background: #31424e;
		color: #FFF;
		font-size: 1.2em;
		font-weight: bold;
		padding: 15px 30px;
		cursor: pointer;
		border-radius: 4px;
	    font-size: 1.4em;
	    min-width: 150px;
	    &:hover {
			background: $color03;
		}
	}
	.return {
		border: none;
		background: #CCC;
		font-size: 1.2em;
		font-weight: bold;
		padding: 15px 30px;
		cursor: pointer;
		border-radius: 4px;
	    font-size: 1.4em;
	    margin: 0 20px 0 0;
	    min-width: 150px;
	}
	.must {
		color: $color03;
	}
	.error {
		padding: 10px 0 0;
	}
}

/* mw_wp_form_ */

.mw_wp_form_confirm {
	.add_box {
		.title {
			display: none;
		}
	}
}
/* wp-pagenavi */

.wp-pagenavi {
	clear: both;
	font-size: 1.4em;
	text-align: center;
	padding: 0 0 80px;
	a {
		padding: 11px 15px;
		@include mq(large) {
			padding: 3px 8px;
		}
		margin: 0 3px;
		border-radius: 4px;
		color: $color03;
		&:hover {
			text-decoration: none;
			color: $color01;
			background: $color03;
		}
	}
	.nextpostslink,
	.previouspostslink {
		color: $color03;
	}
	span {
		padding: 11px 15px;
		@include mq(large) {
			padding: 3px 8px;
		}
		margin: 0 3px;
	}
	.current {
		color: $color01;
		background: $color03;
		border-radius: 4px;
	}
}


.staff_all {
	@include mq(medium) {
		display: flex;
		flex-wrap: wrap;
	}
	.staff_in {
		width: 100%;
		margin: 0 auto 20px;
		@include mq(small) {
			width: 80%;
		}
		@include mq(medium) {
			width: calc((100% - 20px) / 2);
			margin: 0 20px 20px 0;
		}
		@include mq(large) {
			width: 260px;
			margin: 0 10px 20px 0;
		}

		img {
			width: 100%;
			height: auto;
			margin: 0 0 20px;
		}
		@include mq(medium) {
			&:nth-of-type(2n) {
				margin: 0 0 20px;
			}
		}
		@include mq(large) {
			&:nth-of-type(2n) {
				margin: 0 10px 20px 0;
			}
			&:nth-of-type(3n) {
				margin: 0 0 20px;
			}
		}
		.name {
			font-size: 1.6rem;
			margin: 0 0 10px;
			span {
				font-size: 1.2rem;
				display: block;
				margin: 0 0 5px;
				line-height: 1.6;
			}
		}
		.msg {
			font-size: 1.4rem;
			line-height: 1.8;
		}
	}
}