@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* リスト要素をリセットする ---------------- */
dl,dt,dd,ol,ul,li	{
	list-style-position: outside;
	list-style-type: none;
}
/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}



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

	スタイルの設定

=================================================================== */
html {
	scroll-behavior: smooth;
	font-size:17px;
}
body{
	color:#472C20;
	line-height:1.5;
	margin:0;
	background:#fff;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-weight: 500;
}

#contents {
	box-sizing: border-box;
}
#contents * {
	box-sizing: border-box;
}
img {
	max-width: 100%;
	height: auto;
}



/* ---------------- 上書き ------------- */
strong {font-weight:bold;}
p,li,dl,dt,dd {line-height:1.5;}
.red{	color:#F40027;}
.red2{	color:#DC0000;}
.blue{	color:blue;}
.blue{	color:blue;}
.txt-left {	text-align:left;}
.txt-right {	text-align:right;}


.bg {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: rgba(51,51,51,0.7);
	display: none;
}

/* ===================================================================
	通常のリンク
=================================================================== */
a:link {
	color: #558BC6;
	text-decoration: none;
}
a:visited {
	color: #558BC6;
	text-decoration:none;
}
a:hover {
	color: #7BA8DB;
	text-decoration:none;
	opacity: 0.7;
}
a:active {
	color: #7BA8DB;
	text-decoration:none;
}
/* メインエリアはリンクにアンダーライン */
/*#main a{
	text-decoration:underline;
}*/

/* ===================================================================
	#header
	ヘッダー
=================================================================== */

.slide_list.sp {
	display: none;
}

header {
	position: relative;
	background: #FFF5DE;
}

/* ---------------- mv ------------- */

.mv {
	position: relative;
}

.copy_area {
	position: absolute;
	top: 50%;
	left: 0%;
	right: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	z-index: 10;
}

.balloon_img {
	opacity: 0;
	-webkit-animation: fadein 0.5s ease 0.5s 1 forwards;
	animation: fadein 0.5s ease 0.5s 1 forwards;
	text-align: center;
}

.copy_area h1 {
	margin: -105px auto 75px;
	opacity: 0;
	-webkit-animation: fadein 0.5s ease 1.5s 1 forwards,typing 12s linear;
	animation: fadein 0.5s ease 1.5s 1 forwards,typing 12s linear;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
}

/* ---------------- 遅れて表示 ------------- */

@-webkit-keyframes fadein {
	100% {
		opacity: 1;
	}
}
@keyframes fadein {
	100% {
		opacity: 1;
	}
}

/* ---------------- 1文字ずつ表示 ------------- */

@keyframes typing {
	from {
		width:0%;
	}

	to {
		width:100%;
	}
}

.copy_area h1 span {
	position: relative;
}

.copy_area h1 span::before {
	position: absolute;
	top: 0;
	left: 12px;
	content: '';
	width: 5px;
	height: 5px;
	background: #472C20;
	border-radius: 50%;
}

.mv_logo {
	text-align: center;
}

/* ---------------- スライダー ------------- */

.slick-slide img {
	width: 100%;
}

/* ---------------- ヘッダーメニュー ------------- */

.h_nav_menu {
	position: relative;
	z-index: 1000;
	padding: 15px 25px;
	max-width: 1080px;
	width: 90%;
	margin: -10px auto 0;
	background: #fff;
	border-radius: 44px;
	box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
}

.h_nav_menu ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.h_nav_menu ul li:first-child {
	margin-left: 0;
}

.h_nav_menu ul li a,
.btn_swich {
	margin-left: 30px;
	color: #472C20;
	font-weight: bold;
	font-size: 17px;
	text-align: center;
}

.h_nav_menu ul li a {
	display: block;
	position: relative;
	margin-left: 30px;
	line-height: 1.3;
}

.h_nav_menu ul li a:first-child {
	margin: 0;
}

.h_nav_menu ul li a::after {
	content: "";
	display: inline-block;
	margin: 0 auto;
	position: absolute;
	top: -15px;
	right: 0;
	left: 0;
	width: 59px;
	height: 53px;
	background: url(../img/hover_bg.png) no-repeat top center;
	background-size: contain;
	opacity: 0;
	z-index: -1;
}

.h_nav_menu ul li:first-child a::after {
	background: none;
}

.h_nav_menu ul li a:hover {
	opacity: 0.9;
}

.h_nav_menu ul li a:hover::after {
	opacity: 1;
}

nav.fix {
    position: fixed;
    right: 0;
	left: 0;
    top: 0;
	margin: 0 auto;
}


/* ---------------- 西諸弁ボタン ------------- */

.btn_swich {
	display: flex;
	justify-content: space-between;
	max-width: 110px;
	width: 90%;
	padding: 11px 15px 10px;
	background: url(../img/swich_btn_bg.png)no-repeat center center;
	background-size: 100%;
	border: none;
}



/* ===================================================================
	#footer
	フッター
=================================================================== */
.f_nav_menu ul li a br {
	display: none;
}

footer {
	padding-bottom: 350px;
	background: url(../img/f_bg.png)no-repeat center bottom #FFF5DE;
	background-size: 100%;
}

.f_logo {
	margin-bottom: 20px;
	text-align: center;
}

footer p a {
	color: #313131 !important;
}


/* ---------------- ページトップボタン ------------- */

.btn_page_top {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	width: 90%;
}

.btn_page_top a {
	position: absolute;
	top: -110px;
	right: 0;
	max-width: 66px;
	width: 90%;
	height: 66px;
	padding: 20px 0;
	background: url(../img/page_top_bg.svg)no-repeat center center;
	color: #313131;
	text-align: center;
	font-weight: bold;
}

.f_img {
	max-width: 1320px;
	margin: 0 auto;
	width: 90%;
	position: relative;
}

.f_img::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -60px;
	left: 0;
	width: 132px;
	height: 87px;
	background: url(../img/f_ill_01.png) no-repeat;
	background-size: contain;
}

.f_img::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: -40px;
	right: 0;
	width: 228px;
	height: 53px;
	background: url(../img/f_ill_02.png) no-repeat;
	background-size: contain;
}

/* ---------------- フッターメニュー ------------- */

.f_nav_menu {
	padding: 16px 0;
	margin-bottom: 15px;
	background: #fff;
}

.f_nav_menu ul {
	display: flex;
	justify-content: center;
	align-items: center;
}

.f_nav_menu ul li a {
	display: block;
	padding: 0 25px;
	text-align: center;
	font-weight: bold;
	color: #313131;
}

footer p {
	margin-bottom: 5px;
	color: #313131;
	text-align: center;
	font-weight: bold;
	font-size: 13px;
}

address {
    margin: 0;
	color: #313131;
    font-style: normal;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}

/* ===================================================================
	共通CSS
=================================================================== */

.h_nav_menu ul li a br,
#company p br {
	display: none;
}

.about_img_01,
.about_img_02,
.copy_title,
.service_list_title,
.service_img animated,
.service_list_txt,
.company_title,
.company_txt,
.company_list,
#company_info {
	opacity: 0;
}

/* ===================================================================
	自然あふれる西諸で
=================================================================== */

#about {
	position: relative;
	padding: 150px 0 190px;
	background: url(../img/about_bg.png)no-repeat bottom center #FFF5DE;
	background-size: 100%;
}

.about_img_01 {
	position: absolute;
	bottom: -15px;
	left: 0;
}

.about_img_02 {
	position: absolute;
	top: 30px;
	right: 0;
	text-align: right;
}

.about_title {
	position: relative;
	width: fit-content;
	margin: 0 auto;
	z-index: 10;
}
#about h2 {
	color: #678A2A;
	font-size: 36px;
	font-weight: bold;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: 7px;
	line-height: 1.8;
	
}

.copy_title span {
	color: #C95927;
}

/* ---------------- 遅延表示アニメーション ------------- */

.copy_title.center,
.service_img {
	animation-delay: 0.5s;
}

.copy_title.left,
.service_list_txt {
	animation-delay: 1s;
}

.about_img_01 {
	animation-delay: 1.2s;
}

.about_img_02 {
	animation-delay: 2s;
}




/* ===================================================================
	こんなことしています
=================================================================== */

#service {
	padding: 90px 0 70px;
	background: #ECF9C6;
}

/* ---------------- 背景イラスト ------------- */

.service_ill {
	max-width: 1440px;
	margin: 0 auto;
	width: 90%;
	position: relative;
	z-index: 100;
}

.service_ill_left_01 {
	position: absolute;
	top: 70px;
	left: 50px;
}

.service_ill_left_02 {
	position: absolute;
	top: 350px;
	left: 105px;
}

.service_ill_left_03 {
	position: absolute;
	top: 850px;
	left: 40px;
}

.service_ill_right_01 {
	position: absolute;
	top: 0;
	right: 30px;
}

.service_ill_right_02 {
	position: absolute;
	top: 550px;
	right: 110px;
}

.service_ill_right_03 {
	position: absolute;
	top: 750px;
	right: 70px;
}

.service_ill_right_04 {
	position: absolute;
	top: 910px;
	right: 150px;
}

#service h2 {
	position: relative;
	padding-bottom: 15px;
	color: #517415;
	font-size: 36px;
	font-weight: bold;
	text-align: center;
}

#service h2::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 350px;
	height: 7px;
	background: url(../img/line.svg) no-repeat bottom center;
	background-size: 100%;
}

/* ---------------- サービスリスト ------------- */

.service_list {
	max-width: 950px;
	margin: -35px auto 0;
	padding: 50px 95px 5px;
	width: 90%;
	background: #fff;
	border-radius: 90px;
}

.service_list_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 100px;
}

.service_list_box dt {
	width: 45%;
	padding-top: 30px;
}

.service_list_box dd {
	width: 45%;
}

.service_list_title {
	position: relative;
	font-size: 28px;
	font-weight: bold;
	z-index: 100;
	text-align: center;
}

.service_img {
	position: relative;
	margin-top: -50px;
	text-align: center;
	z-index: 10;
}

.service_img img {
	width: 100%;
}

.service_list_box dd p {
	font-size: 18px;
	line-height: 1.3;
}

/* 詳細ボタン */
.service_detail_btn {
	margin-top: 20px;
	text-align: center;
}

.service_detail_btn a img {
	display: inline-block;
	width: 50%;
	height: auto;
	animation: detailBtnPikuPiku 6s ease-in-out infinite;
}

@keyframes detailBtnPikuPiku {
	0%, 75% {
		transform: translateY(0) scale(1);
	}
	78% {
		transform: translateY(-2px) scale(1.03);
	}
	81% {
		transform: translateY(0) scale(1);
	}
	84% {
		transform: translateY(-2px) scale(1.05);
	}
	87%, 100% {
		transform: translateY(0) scale(1);
	}
}

@media (min-width: 961px) {
	/* 画像を右側にしたいボックス用 */
	.service_list_box.service_img_right {
		flex-direction: row-reverse;
	}
}

/* ===================================================================
	会社のこと
=================================================================== */

#company {
	padding: 200px 0 40px;
	background: url(../img/company_bg.png)no-repeat top center;
	background-size: 100%;
}

.company_top {
	max-width: 1080px;
	margin: 0 auto;
	width: 90%;
	position: relative;
}


#company h2 {
	position: absolute;
	top: 0;
    left: 40px;
	color: #C95927;
	font-size: 36px;
	font-weight: bold;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: 9px;
	z-index: 100;
}

#company p {
	margin-bottom: 25px;
	padding-top: 25px;
	text-align: center;
}

.company_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	padding: 45px 35px;
	width: 90%;
	background: #ECF9C6;
	border-radius: 23px;
}

.company_list::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: -40px;
	right: 20px;
	width: 80px;
	height: 61px;
	background: url(../img/cat.png) no-repeat top center;
	background-size: 100%;
}

.company_list li {
	width: 47%;
}

.company_list li a {
	display: block;
	position: relative;
	background: #fff;
	text-align: center;
	border: solid 1px #9DD835;
	border-radius: 7px;
	box-shadow: 0 0 15px 0 rgba(157,216,53,0.37);
}

.company_list li:first-child a {
	padding: 54px 0;
}

.company_list li:last-child a {
	padding: 46px 0;
}

.company_list li a span {
	position: absolute;
	bottom: 15px;
	right: 15px;
}

/* ---------------- 会社概要 ------------- */

#company_info {
	display: block;
	max-width: 550px;
	margin: 0 auto;
	padding-top: 90px;
	width: 90%;
}

#company_info dl {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

#company_info dl dt {
	width: 34%;
	font-weight: bold;
	text-align: left;
}

#company_info dl dd {
	width: 66%;
}

.company_service_list {
	counter-reset: number;
	list-style-type: none!important;
	margin-bottom: 5px;
}

.company_service_list li {
	position: relative;
	padding-left: 25px;
}

.company_service_list li::before {
	position: absolute;
	counter-increment: number;
	content: counter(number);
	display: inline-block;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	color: #472C20;
	font-size: 17px;
	font-weight: 500;
}

.company_service_list li::after {
	position: absolute;
	content: ')';
	top: 0;
	left: 13px;
}


/* ===================================================================
	アクセス
=================================================================== */

#access {
	padding: 90px 0 70px;
	background: #FFF5DE;
}

#access h2 {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
	width: 90%;
	color: #517415;
	font-size: 46px;
	font-weight: bold;
	z-index: 100;
}

#access h2::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: -170px;
	left: -80px;
	width: 46px;
	height: 90px;
	background: url(../img/cat_02.png) no-repeat top center;
	background-size: 100%;
}

.map {
	max-width: 1080px;
	margin: -35px auto 0;
	width: 90%;
}

.map iframe {
	border-radius: 65px;
	-webkit-border-radius: 65px;
	-moz-border-radius: 65px;
}


/* ===================================================================
	Q&A（よくある質問）
=================================================================== */

#qa {
	padding: 140px 0 90px;
	background: #FFF5DE;
}

#qa h2 {
	position: relative;
	padding-bottom: 15px;
	color: #C95927;
	font-size: 36px;
	font-weight: bold;
	text-align: center;
}

#qa h2::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 350px;
	height: 7px;
	background: url(../img/line.svg) no-repeat bottom center;
	background-size: 100%;
}

.qa_intro {
	margin-top: 20px;
	margin-bottom: 50px;
	text-align: center;
	font-size: 18px;
}

.qa_search_wrap {
	max-width: 950px;
	margin: 0 auto 20px;
	width: 90%;
	text-align: left;
}

.qa_search_label {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: bold;
	color: #C95927;
}

.qa_search_box {
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 30px;
	padding: 8px 14px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.qa_search_box i {
	color: #C95927;
	margin-right: 8px;
}

.qa_search_input {
	border: none;
	background: transparent;
	width: 100%;
	font-size: 15px;
	outline: none;
	color: #472C20;
}

.qa_search_clear {
	margin-left: 10px;
	padding: 4px 10px;
	font-size: 12px;
	border-radius: 999px;
	border: none;
	background: #ECF9C6;
	color: #472C20;
	cursor: pointer;
	white-space: nowrap;
}

.qa_search_clear:hover {
	opacity: 0.8;
}

.qa_tabs {
	max-width: 950px;
	margin: 0 auto 10px;
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.qa_tab_btn {
	flex: 1 1 0;
	min-width: 140px;
	padding: 9px 14px;
	border-radius: 999px;
	border: none;
	background: #fff;
	color: #472C20;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.qa_tab_btn.active {
	background: #ECF9C6;
	color: #517415;
}

.qa_wrap {
	max-width: 950px;
	margin: -10px auto 0;
	padding: 60px 70px 40px;
	width: 90%;
	background: #fff;
	border-radius: 70px;
	box-shadow: 0 3px 6px 0 rgba(0,0,0,0.08);
}

.qa_tab_panel {
	display: none;
}

.qa_tab_panel.active {
	display: block;
}

.qa_list {
	margin: 0;
	padding: 0;
}

.qa_item {
	position: relative;
	margin-bottom: 25px;
	padding: 22px 25px 22px 80px;
	background: #FFF5DE;
	border-radius: 30px;
}

.qa_item:last-child {
	margin-bottom: 0;
}

.qa_item dt {
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 19px;
}

.qa_item dd {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
}

.qa_item::before {
	content: "Q";
	position: absolute;
	top: 22px;
	left: 25px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #F8B6A1;
	color: #472C20;
	font-weight: bold;
	text-align: center;
	line-height: 34px;
}

.qa_item dd::before {
	content: "A";
	display: inline-block;
	margin-right: 8px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #ECF9C6;
	color: #472C20;
	font-size: 14px;
	font-weight: bold;
	vertical-align: middle;
}

.qa_empty {
	margin-top: 20px;
	text-align: center;
	font-size: 15px;
	color: #999;
}


/* ===================================================================
	サービス詳細ページ
=================================================================== */

#service_detail {
	padding: 140px 0 90px;
	background: #FFF5DE;
}

#service_detail h2 {
	position: relative;
	padding-bottom: 15px;
	color: #C95927;
	font-size: 36px;
	font-weight: bold;
	text-align: center;
}

#service_detail h2::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 350px;
	height: 7px;
	background: url(../img/line.svg) no-repeat bottom center;
	background-size: 100%;
}

.service_detail_wrap {
	max-width: 950px;
	margin: -10px auto 0;
	padding: 50px 70px 40px;
	width: 90%;
	background: #fff;
	border-radius: 70px;
	box-shadow: 0 3px 6px 0 rgba(0,0,0,0.08);
}

.service_detail_lead {
	margin-bottom: 30px;
	text-align: center;
	font-size: 18px;
}

.service_detail_block {
	margin-bottom: 25px;
	padding: 22px 25px;
	background: #FFF5DE;
	border-radius: 30px;
}

.service_detail_block h3 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: bold;
}

.service_detail_block p,
.service_detail_block li {
	font-size: 16px;
	line-height: 1.7;
}

.service_detail_block ul,
.service_detail_block ol {
	margin: 0;
	padding-left: 1.2em;
}

.service_detail_block li {
	margin-bottom: 6px;
}

.service_detail_note {
	margin-top: 10px;
	font-size: 14px;
}

.service_detail_ill_dummy {
	border: 2px dashed #F8B6A1;
	background: #FFF9EB;
}

.service_detail_contact {
	margin-top: 25px;
	margin-bottom: 10px;
	text-align: center;
	font-size: 17px;
}

.service_detail_back {
	text-align: center;
	margin-top: 15px;
}

.service_detail_back a {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	background: #ECF9C6;
	color: #472C20;
	font-weight: bold;
	font-size: 15px;
}

.service_detail_back a:hover {
	opacity: 0.85;
}

@media screen and (max-width: 600px) {
	.service_detail_wrap {
		padding: 35px 22px 30px;
		border-radius: 40px;
	}

	.service_detail_block {
		padding: 18px 18px;
	}

	.service_detail_block h3 {
		font-size: 18px;
	}

	.service_detail_block p,
	.service_detail_block li {
		font-size: 15px;
	}

	.service_detail_lead {
		font-size: 17px;
	}
}

@media screen and (max-width: 600px) {
	.qa_wrap {
		padding: 40px 20px 30px;
		border-radius: 40px;
	}

	.qa_item {
		padding: 18px 18px 18px 70px;
	}

	.qa_item dt {
		font-size: 17px;
	}

	.qa_item dd {
		font-size: 15px;
	}

	.qa_item::before {
		left: 18px;
	}

	.qa_tabs {
		gap: 6px;
	}

	.qa_tab_btn {
		font-size: 14px;
		padding: 7px 10px;
	}
}



/* ===================================================================
	レスポンシブ対応用
=================================================================== */

@media ( max-width : 1700px ){
	
	/* ===================================================================
	自然あふれる西諸で
=================================================================== */
	
	.about_img_01,
	.about_img_02 {
		width: 500px;
	}

/* ===================================================================
	footer
=================================================================== */
	
	footer {
		padding-bottom: 300px;
	}
}

@media ( max-width : 1500px ){

/* ===================================================================
	footer
=================================================================== */
	
	footer {
		padding-bottom: 250px;
	}
}

@media ( max-width : 1400px ){
	
	/* ===================================================================
	自然あふれる西諸で
=================================================================== */
	
	.about_img_01,
	.about_img_02 {
		width: 350px;
	}
	
	/* ===================================================================
	こんなことしています
=================================================================== */
	
	.service_ill_left_01,
	.service_ill_left_02 {
		left: -10px;
	}
	
	.service_ill_right_01,
	.service_ill_right_02 {
		right: -20px;
	}
	
	.service_ill_right_02 {
		top: 450px;
	}
	
	.service_ill_right_01 {
		width: 150px;
	}

	.service_ill_right_03 {
		top: 600px;
		right: 0;
	}
	
	.service_ill_left_03 {
		top: 750px;
		left: -30px;
	}
	
	.service_ill_right_04 {
		top: 816px;
		right: -40px;
	}
	
	/* ===================================================================
	アクセス
=================================================================== */
	
	#access h2::after {
		left: -20px;
	}
	
}

@media ( max-width : 1200px ){
	
	/* ===================================================================
	header
=================================================================== */
	
	/* ---------------- コピー ------------- */
	
	.copy_area {
		top: 47%;
	}
	
	/* ---------------- ヘッダーメニュー ------------- */
	
	.h_nav_menu {
		padding: 15px;
	}
	
	.h_nav_menu ul li a.h_logo img {
		width: 150px;
	}
	
	.h_nav_menu ul li a,
	.btn_swich {
		margin-left: 10px;
		font-size: 16px;
	}
	
	.btn_swich {
		padding: 10px;
	}
	
	.btn_swich span {
		margin-right: 5px;
	}
	
	/* ===================================================================
	会社のこと
=================================================================== */
	
	#company h2 {
		left: 0;
	}
	
	.company_list {
		width: 83%;
	}
	
	/* ===================================================================
	footer
=================================================================== */
	
	footer {
		padding-bottom: 200px;
	}
}

/* タブレット */
@media ( max-width : 960px ){ 
	
	/* ===================================================================
	header
=================================================================== */
	
	/* ---------------- ヘッダーメニュー ------------- */
	
	.h_nav_menu {
		border-radius: 55px;
	}
	
	.h_nav_menu ul {
		justify-content: center;
	}
	
	.h_nav_menu ul li a.h_logo {
		margin-bottom: 15px;
		text-align: right;
	}
	
	.h_nav_menu ul li:first-child,
	.h_nav_menu ul li:last-child {
		width: 50%;
	}
	
	.h_nav_menu ul li:first-child {
		order: -2;
	}
	
	.h_nav_menu ul li:last-child {
		order: -1;
	}
	
	.h_nav_menu ul li:nth-child(2),
	.h_nav_menu ul li:nth-child(3),
	.h_nav_menu ul li:nth-child(4),
	.h_nav_menu ul li:nth-child(5) {
		width: 25%;
	}
	
	.h_nav_menu ul li a br {
		display: block;
	}
	
	.h_nav_menu ul li a,
	.btn_swich {
		margin-left: 0;
	}
	
	.btn_swich {
		max-width: 95px;
		margin-left: 10px;
		padding: 7px 10px;
		font-size: 17px;
	}
	
	.h_nav_menu ul li a::after {
		top: -12px;
		width: 50px;
	}
	
	.h_nav_menu ul li:nth-child(2) a::after,
	.h_nav_menu ul li:nth-child(3) a::after {
		top: -2px;
	}

	
	/* ---------------- mv ------------- */
	
	.balloon_img img {
		width: 400px;
	}
	
	.copy_area h1 {
		margin: -75px auto 50px;
		font-size: 20px;;
	}
	
	.copy_area h1 span::before {
		left: 9px;
		width: 4px;
		height: 4px;
	}
	
	.mv_logo img {
		width: 100px;
	}

	/* ===================================================================
	自然あふれる西諸で
=================================================================== */
	
	#about {
		padding: 400px 0 350px;
	}
	
	#about h2 {
		font-size: 33px;
		line-height: 1.5;
	}
	
	.about_img_02 {
		top: 20px;
	}

	
	/* ===================================================================
	こんなことしています
=================================================================== */
	
	#service {
		padding: 140px 0 70px;
	}
	
	.service_list {
		padding: 90px 40px 40px;
		border-radius: 50px;
	}
	
	#service h2 {
		padding-bottom: 10px;
	}
	
	.service_list_box dt,
	.service_list_box dd {
		width: 100%;
	}
	
	.service_list_box:first-child dt {
		order: 0;
	}
	
	.service_list_box dt {
		padding-top: 0;
	}
	
	.service_img {
		width: 300px;
		margin: -50px auto 20px;
	}
	
	.service_list_box {
		margin-bottom: 50px;
	}
	
	.service_list_box:last-child {
		margin-bottom: 0;
	}
	
	/* ---------------- イラスト ------------- */
	
	.service_ill_left_02,
	.service_ill_left_03,
	.service_ill_right_02 {
		width: 100px;
	}
	
	.service_ill_left_02 {
		top: 340px;
	}
	
	.service_ill_left_03 {
		top: 705px;
		left: -19px;
	}
	
	.service_ill_right_01 {
		top: 32px;
		width: 100px;
	}
	
	.service_ill_right_02 {
		top: 340px;
	}
	
	.service_ill_right_04 {
		top: 880px;
		right: -25px;
	}
	
	/* ===================================================================
	会社のこと
=================================================================== */
	
	#company {
		padding: 150px 0 70px;
	}
	
	#company::after {
		bottom: -41px;
		left: -15px;
		width: 26px;
	}
	
	.company_top {
		width: 87%;
		margin: 0 0 0 auto;
	}
	
	#company h2 {
		left: -52px;
		top: -20px;
	}
	
	#company p {
		font-size: 16px;
	}
	
	.company_list {
		width: 90%;
		padding: 30px;
	}
	
	.company_list::after {
		top: -24px;
		right: 0;
		width: 65px;
	}
	
	.company_list li {
		width: 100%;
		margin-bottom: 15px;
	}
	
	.company_list li:last-child {
		margin-bottom: 0;
	}
	
	.company_list li:first-child a {
		padding: 27px 0;
	}
	
	.company_list li:last-child a {
		padding: 20px 0;
	}
	
	#company_info {
		padding-top: 50px;
	}
	
	/* ===================================================================
	アクセス
=================================================================== */
	
	#access {
		padding: 130px 0 70px;
	}
	
	#access h2 {
		font-size: 41px;
	}
	
	#access h2::after {
		top: -210px;
	}
	
	.map iframe {
		border-radius: 50px;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
	}
	
	/* ===================================================================
	footer
=================================================================== */
	
	footer {
		padding-bottom: 150px;
	}
	
	.f_nav_menu ul li a {
		padding: 0 9px;
		font-size: 15px;
	}
	
	.f_img::before {
		top: -53px;
		left: -15px;
		width: 100px;
	}
	
	.f_img::after {
		top: -26px;
		right: -16px;
		width: 150px;
	}
}

/* スマホ（横） */
@media screen and (max-width: 600px) {
	
	.slide_list.pc {
		display: none;
	}
	
	/* ===================================================================
	header
=================================================================== */
	
	/* ---------------- mv ------------- */
	
	.copy_area {
		top: 50%;
	}
	
	.balloon_img img {
		width: 430px;
	}
	
	.copy_area h1 {
		margin: -79px auto 55px;
		font-size: 22px;
	}
	
	.mv_logo img {
		width: auto;
	}
	
	/* ---------------- スライダー ------------- */
	
	.slide_list.sp {
		display: block;
	}
	
	.slick-slide {
		width: 100%;
	}
	
	/* ---------------- ヘッダーメニュー ------------- */
	
	.h_nav_menu {
		border-radius: 45px;
	}
	
	.h_nav_menu ul li a {
		font-size: 15px;
	}
	
	/* ===================================================================
	自然あふれる西諸で
=================================================================== */
	
	#about {
		padding: 430px 0 320px;
	}
	
	.about_img_02 {
		top: 130px;
}
	
	.about_img_01,
	.about_img_02 {
		width: 300px;
	}

	.about_img_01 {
		bottom: 9px;
	}
	
	/* ===================================================================
	こんなことしています
=================================================================== */
	
	#service {
		background-position: bottom;
	}
	
	#service h2 {
		font-size: 31px;
	}
	
	#service h2::after {
		width: 300px;
	}
	
	.service_list {
		padding: 90px 25px 35px;
	}
	
	.service_list_title {
		font-size: 24px;
	}
	
	.service_img {
		width: 250px;
		margin: -40px auto 20px;
	}
	
	/* ---------------- イラスト ------------- */
	
	.service_ill_left_01 {
		width: 70px;
	}
	
	.service_ill_left_02 {
		top: 263px;
	}
	
	.service_ill_left_03 {
		top: 617px;
		left: -15px;
	}
	
	.service_ill_right_01 {
		top: 50px;
	}
	
	.service_ill_right_02 {
		top: 275px;
		right: -14px;
	}
	
	.service_ill_right_03 {
		width: 50px;
		top: 578px;

	}
	
	.service_ill_right_04 {
		right: -10px;
		top: 850px;
		width: 200px;
	}
	
	/* ===================================================================
	会社のこと
=================================================================== */
	
	#company h2 {
		left: -36px;
		line-height: 1;
	}
	
	#company p {
		margin-bottom: 15px;
	}
	
	#company p br {
		display: block;	
	}
	
	.company_list {
		padding: 20px;
	}
	
	.company_list::after {
		top: -42px;
		right: -3px;
	}
	
	#company_info dl dt,
	#company_info dl dd {
		font-size: 16px;
	}
	
	/* ===================================================================
	アクセス
=================================================================== */
	
	#access h2::after {
		left: -5px;
	}
	
	.map iframe {
		height: 350px;
	}
	
	/* ===================================================================
	footer
=================================================================== */
	
	footer {
		padding-bottom: 100px;
	}
	
	.f_logo img {
		width: 90px;
	}
	
	.f_nav_menu ul li {
		line-height: 1.2;
	}
	
	.f_nav_menu ul li a br {
		display: block;
	}
	
	.f_nav_menu ul li a {
		font-size: 17px;
	}
}

/* スマホ用（縦） */
@media screen and (max-width: 480px) {
	
	/* ===================================================================
	header
=================================================================== */
	
	/* ---------------- mv ------------- */
	
	.balloon_img img {
		width: 330px;
	}
	
	.copy_area h1 {
		margin: -62px auto 45px;
		font-size: 17px;
	}
	
	/* ---------------- ヘッダーメニュー ------------- */
	
	.h_nav_menu {
		padding: 10px;
		width: 95%;
		border-radius: 40px;
	}
	
	.h_nav_menu ul li:first-child {
		width: 60%;
	}
	
	.h_nav_menu ul li:last-child {
		width: 40%;
	}
	
	.h_nav_menu ul li a.h_logo {
		margin-bottom: 9px;
		text-align: center;
	}	
	
	.btn_swich {
		padding: 8px;
		font-size: 16px;
	}
	
	.h_nav_menu ul li:nth-child(2),
	.h_nav_menu ul li:nth-child(3),
	.h_nav_menu ul li:nth-child(4),
	.h_nav_menu ul li:nth-child(5) {
		width: auto;
	}
	
	.h_nav_menu ul li a {
		font-size: 13px;
	}
	
	.h_nav_menu ul li:nth-child(2) a,
	.h_nav_menu ul li:nth-child(3) a,
	.h_nav_menu ul li:nth-child(4) a {
		margin-right: 9px;
	}
	
	.h_nav_menu ul li a::after {
		width: 40px;
	}
	
	.h_nav_menu ul li:last-child {
		margin-bottom: 10px;
	}
	
	/* ===================================================================
	自然あふれる西諸で
=================================================================== */
	
	#about {
		padding: 400px 0 350px;
	}
	
	#about h2 {
		font-size: 26px;
	}
	
	.about_img_02 {
		top: 80px;
	}
	
	/* ===================================================================
	こんなことしています
=================================================================== */
	
	#service {
		padding: 120px 0 70px;
	}
	
	#service h2 {
		padding-bottom: 5px;
		font-size: 26px;
	}
	
	#service h2::after {
		width: 250px;
	}
	
	.service_list_title {
		font-size: 22px;
	}
	
	.service_img {
		width: 200px;
		margin: -34px auto 15px;
	}
	
	.service_list_box dd p {
		font-size: 17px;
	}
	
	.service_list {
		margin: -25px auto 0;
		padding: 50px 25px 30px;
		border-radius: 35px;
	}
	
	.service_ill_left_01 {
		width: 55px;
	}
	
	.service_ill_left_02 {
		top: 212px;
		width: 75px;
	}
	
	.service_ill_left_03 {
		top: 497px;
	}
	
	.service_ill_left_03,
	.service_ill_right_02 {
		width: 80px;
	}
	
	.service_ill_right_01 {
		top: -43px;
		right: -12px;
		width: 85px;
	}
	
	.service_ill_right_02 {
		top: 214px;
		right: -14px;
	}
	
	.service_ill_right_03 {
		width: 40px;
		top: 461px
	}
	
	.service_ill_right_04 {
		top: 740px;
		width: 150px;
	}
	
	/* ===================================================================
	会社のこと
=================================================================== */
	
	#company h2 {
		font-size: 32px;
	}
	
	.company_list::after {
		width: 60px;
	}
	
	#company p {
		margin-bottom: 45px;
	}
	
	.company_list {
		padding: 15px;
	}
	
	.company_list li {
		margin-bottom: 10px;
	}
	
	.company_list li:first-child a,
	.company_list li:last-child a {
		padding: 20px 0;
	}
	
	.company_list li a img {
		width: 200px;
	}
	
	.company_list li a span img {
		width: 17px;
	}
	
	.company_list li a span {
		bottom: 7px;
		right: 7px;
	}
	
	/* ---------------- テーブル ------------- */
	
	#company_info {
		width: 85%;
	}
	
	#company_info dl {
		margin-bottom: 15px;
	}
	
	#company_info dl dt,
	#company_info dl dd {
		width: 100%;
	}
	
	/* ===================================================================
	アクセス
=================================================================== */
	
	#access {
		padding: 30px 0;
	}
	
	#access h2 {
		font-size: 37px;
	}
	
	#access h2::after {
		width: 36px;
		top: -90px;
		left: 0px;
	}
	
	.map iframe {
		height: 300px;
	}
	
	/* ===================================================================
	footer
=================================================================== */
	
	footer {
		padding-bottom: 70px;
	}
	
	.f_logo img {
		width: 80px;
	}
	
	.f_nav_menu ul {
		justify-content: space-around;
	}
	
	.f_nav_menu ul li a {
		padding: 0;
		font-size: 15px;
	}
	
	footer p {
		width: 90%;
		margin: 0 auto;
	}
	
	address {
		font-size: 12px;
	}
	
	
	

	
	
	

}