@charset "utf-8";
/* CSS Document */

@font-face { /* IE用 */
    font-family: 'Sawarabi Gothic';
    src: url('../img/SawarabiGothic-Regular.woff');
}
body,.font_sans-serif{font-family: 'Sawarabi Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;}

.font_ropa{font-family: 'Ropa Sans', 'Sawarabi Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;}

/***　全ページ　***/

*:focus {outline:none;}
html, body{font-size: 14px;}
body{-webkit-text-size-adjust: 100%;}
html.scrollheight{overflow-y: scroll}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

#loader{
	top: 0;
	left: 0;
	z-index: 1001
}
#loader span{
	top: -5px;
	left: -5px;
	width: 60px;
	height: 105px
}

.fadein{
	transform: scale(0.98,0.98);
	opacity: 0;
	transition: 1s;
	transition-property: transform,opacity
}
.under_page{
	transform: translateY(10px);
	opacity: 0;
	transition: 1s;
	transition-property: transform,opacity
}
.fadein.fadetrans{
	transform: none;
	opacity: 1
}
.under_page.fadetrans{
	transform: none;
	opacity: 1
}
.fadeimg,.fadetitle{
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	background-color: #f0f0f0
}

#page-top{
	right: 40px
}
#page-top a{
	width: 60px;
	height: 60px;
	box-sizing: border-box
}
#page-top a::before{
	width: 15px;
	height: 15px;
	border-left: solid 2px #4d4d4d;
	border-top: solid 2px #4d4d4d;
	transform: rotate(45deg);
	top: 20px;
	right: 0;
	left: 0;
	margin: auto
}
#banner_box{
	right: 45px;
	bottom: 100px;
	z-index: 1
}
.linkStyle{transition: 0.5s;color: #98a068}
.linkStyle:hover{opacity: 0.7}
textarea{overflow: auto}

#video::before,.more a::before,.more a::after,#intro h2::before,#top_service .cate_title::before,#top_about::before,#sp_nav .sp_nav_box .txt_color1::before,#top_flow .flow_box::before,#top_flow .flow_wrap::before,#top_flow .flow_n::before,#top_flow h2::before,#page-top a::before,#video #logo::before,#top_service::before,#top_service::after,#page2 .box_title1::before,#page2 .date::before,#pager li.prev a::before,#pager li.next a::before,.cate_title span::before,#cate_list li a::before,#page3 .box_arrow::before,#page4 .cate_box::before,#page4 .cate_item::after,#page5 .box_title1::before,#page5 .box_title1::after, #page8 .checkbox-parts::before, #page8 .checkbox-parts::after, #page8 .select_wrap::before, #page8 .radio-parts::before, #page8 .radio-parts::after{
	display: block;
	position: absolute;
	content: "";
	pointer-events: none
}

#map{height: 300px}
#map iframe{
	height: calc(100% + 62px);
	margin-top: -62px;
}

.hvr_trans{
	transition: 0.5s;
}
.hvr_trans:hover{
	transform: translateY(-5px)
}

/***　ヘッダー　***/

header #fix_header{
	top: -80px;
	left: 0;
	box-sizing: border-box;
	z-index: 100
}
header #fix_header.scrollheader, .scrollheight #fix_header{top: 0}
header .fix_logo{
	top: 20px;
	left: 20px
}
header .menu_stick{
	width: 80px;
	height: 80px;
	z-index: 12;
	top: 0;
	right: 0;
	cursor: pointer;
	box-sizing: border-box
}
header .menu_stick span{
	height: 2px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: 0.5s
}
header .menu_stick span:first-of-type{top: 15px}
header .menu_stick span:last-of-type{bottom: 15px}
header .menu_stick.stick_trans span:first-of-type,header .menu_stick.stick_trans span:last-of-type{
	top: 0;
	bottom: 0;
	margin: auto;
}
header .menu_stick.stick_trans span:not(:first-of-type):not(:last-of-type){background-color: transparent}
header .menu_stick.stick_trans span:first-of-type{transform: rotate(225deg);background-color: #a49885}
header .menu_stick.stick_trans span:last-of-type{transform: rotate(-225deg);background-color: #a49885}
header #sp_nav{
	z-index: 11;
	left: 0;
	top: 0;
	box-sizing: border-box;
}
#sp_nav .sp_nav_box .txt_color1{position: relative}
#sp_nav .sp_nav_box .txt_color1::before{
	width: 30px;
	height: 1px;
	background-color: #a49885;
	left: -50px;
	top: 0;
	bottom: 0;
	margin: auto;
}
header #sp_nav .nav_bg{
	top: 0;
	right: 0;
	left: 0;
	cursor: pointer
}
header #sp_nav.fade_bg_trans .nav_bg{
	right: -300px
}
header #sp_nav sp_nav_box{
	overflow-y: auto;
}
header #sp_nav ul.bg_white{
	top: 0;
	right: -300px;
	box-sizing: border-box;
}
header #sp_nav.fade_bg_trans ul.bg_white{right: 0}

/***　フッター　***/



/***　index　***/

#video::before{
	width: 210px;
	height: 400px;
	right: 80px;
	bottom: -280px;
	background-image: url(../img/bg_img1.png);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1
}
#video #logo{
	left: 10%;
	top: 100px
}
#video #logo::before{
	width: 100%;
	height: 10px;
	background-image: url(../img/border.png);
	left: 0;
	bottom: -40px
}

.more a::before,.more a::after{
	width: 20px;
	height: 20px;
	transition: 0.5s;
	box-sizing: border-box
}
.more a::before{
	border-top: solid 1px #4d4d4d;
	border-left: solid 1px #4d4d4d;
	top: 0;
	left: 0
}
.more a::after{
	border-bottom: solid 1px #4d4d4d;
	border-right: solid 1px #4d4d4d;
	bottom: 0;
	right: 0
}
.more a:hover::before,.more a:hover::after{
	width: 100%;
	height: 100%;
}

#intro h2::before{
	width: 40px;
	height: 1px;
	top: 0;
	left: 0;
	background-color: #a49885
}

#top_contents1 .top_con1_img1{
	height: 400px;
	background-position: 50% 80%
}

#top_service::before,#top_service::after{
	width: 100%;
	height: 10px;
	background-image: url(../img/border.png);
	left: 0
}
#top_service::before{top: 0}
#top_service::after{bottom: 0}
#top_service .top_cate a:hover{box-shadow: 10px 10px 0 #f7f7f7}
#top_service .cate_title::before{
	width: 60px;
	height: 1px;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #e6e6e6
}

#top_about::before{
	width: 100%;
	top: 50px;
	bottom: 0;
	left: 0;
	background-color: #f9f7f4
}

#top_flow{
	background-repeat: no-repeat;
	background-image: url(../img/bg_img2.png);
	background-size: 500px;
	background-position: top 50px right 0
}
#top_flow h2::before{
	width: 100%;
	height: 10px;
	background-image: url(../img/border.png);
	left: 0;
	bottom: 0
}
.contact_bt a{box-shadow: 5px 5px 0 #f7f7f7}
.contact_bt a:hover{box-shadow: 10px 10px 0 #f7f7f7}
#top_flow .flow_wrap{padding-left: 10%}
#top_flow .flow_box::before{
	width: 50px;
	height: 100%;
	bottom: 0;
	left: 35px;
	border-left: dashed 1px #4d4d4d;
	border-bottom: dashed 1px #4d4d4d;
	z-index: -1
}
#top_flow .flow_box:first-child::before,#top_flow .flow_box:nth-child(5)::before{height: 50%}
#top_flow .flow_box:nth-child(5)::before{top: 0;bottom: auto;border-bottom: none}
#top_flow .flow_box:nth-child(2){width: calc(100% - 50px);margin-left: 50px}
#top_flow .flow_box:nth-child(3){width: calc(100% - 100px);margin-left: 100px}
#top_flow .flow_box:nth-child(4){width: calc(100% - 150px);margin-left: 150px}
#top_flow .flow_box:nth-child(5){width: calc(100% - 200px);margin-left: 200px}

#top_flow .flow_n{bottom: 10px}
#top_flow .flow_n::before{
	width: 1px;
	height: 45px;
	background-color: #4d4d4d;
	transform: rotate(45deg);
	right: -15px;
	top: 0
}

/***　page_title /  cate_title / cate_list /  pager　***/

#page_title{height: 300px}
#page_title h2{font-size: 40px}

.cate_title span::before{
	width: 100%;
	height: 10px;
	background-image: url(../img/border2.png);
	left: 0;
	bottom: 0
}

#cate_list li a::before{
	width: 0;
	height: 0;
	border-right: solid 9px transparent;
	border-top: solid 9px #98a068;
	border-left: solid 9px transparent;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	opacity: 0;
	transition: 0.3s
}
#cate_list li.cate_select a::before{opacity: 1;bottom: -8px;}
#cate_list li.cate_select a{
	color: #fff;
	border-color: #98a068;
	background-color: #98a068;
}

#pager li{
	margin: 0 5px
}
#pager a{
	width: 50px;
	height: 50px;
	line-height: 50px;
	background-color: #f9f7f4;
	transition: 0.5s;
	display: block;
	position: relative;
}
#pager li.prev a,#pager li.next a{
	background-color: transparent
}
#pager a:hover{
	background-color: #98a068;
	color: #fff
}
#pager li.prev a:hover,#pager li.next a:hover{color: #98a068}
#pager li.page-selection a{
	background-color: #98a068;
	color: #fff
}
#pager li.prev a::before,#pager li.next a::before{
	width: 10px;
	height: 10px;
	border-top: solid 1px;
	border-right: solid 1px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 5px;
	margin: auto;
	transform: rotate(45deg);
}
#pager li.prev a::before{
	right: 0;
	left: 5px;
	transform: rotate(-135deg);
}

/***　page2　***/

#page2 .cate_box{padding-top: 1px;box-shadow: 10px 10px 0 #f7f7f7}
#page2 .date{margin-top: -1px}
#page2 .date::before{
	width: 20px;
	height: 20px;
	background-color: #fff;
	right: -10px;
	bottom: -10px;
	transform: rotate(45deg)
}
#page2 .box_title1::before{
	width: 100%;
	height: 10px;
	background-image: url(../img/border.png);
	left: 0;
	bottom: 0
}

/***　page3　***/

#page3 .box_arrow{
	width: 10%;
	height: 1px;
	top: 0;
	bottom: 0;
	margin: auto;
	left: -10%
}
#page3 .box_arrow::before{
	width: 5px;
	height: 5px;
	display: block;
	top: -1px;
	right: -2px;
	border-radius: 10px;
	background-color: #4d4d4d
}

/***　page4　***/

#page4 .cate_item{cursor: pointer}
#page4 .cate_item:hover{box-shadow: 10px 10px 0 #f7f7f7}
#page4 .cate_pop{
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0.9);
	z-index: 100
}
#page4 .pop_box{
	top: 45%;
	max-height: 80%;
	height: 100%;
	overflow-y: auto;
}
#page4 .close_bt{
	right: 0;
	left: 0;
	margin: auto;
	bottom: 5%;
	cursor: pointer
}
#page4 .pop_box .pd_50px{padding-bottom: 1px}
#page4 .cate_box::before{
	width: 100%;
	left: 0;
	top: 15px;
	bottom: 0;
	border: solid 1px #98a068
}
#page4 .cate_item::after{
	width: 1px;
	height: 20px;
	right: 0;
	left: 0;
	margin: auto;
	bottom: 0;
	background-color: #4d4d4d
}
#page4 .clip{
	top: -25px;
	right: 20px
}

/***　page5　***/

#page5 .cate_box{counter-increment: num}
#page5 .box_title1::before{
	content: "0" counter(num);
	font-size: 34px;
	top: 0;
	left: 0;
	font-family: 'Ropa Sans', 'Sawarabi Gothic', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
}
#page5 .box_title1::after{
	width: 40px;
	height: 1px;
	background-color: #4d4d4d;
	bottom: -1px;
	left: 0
}

/***　page8　***/

#page8 #form_box input[type="text"],#page8 #form_box textarea{background-color: #f7f7f7}
#page8 #form_box input[type="text"]{border-bottom: solid 1px #f7f7f7}
#page8 #form_box textarea{border: solid 1px #f7f7f7}
#page8 #form_box input[type="text"]:focus{background-color: transparent;border-bottom: solid 1px #a49885}
#page8 #form_box textarea:focus{background-color: transparent;border: solid 1px #a49885}
#page8 input[type="submit"]{cursor: pointer}
#page8 .checkbox-parts, #page8 .radio-parts{cursor: pointer}
#page8 .checkbox-parts::before{
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: #eee
}
#page8 .checkbox-parts::after{
	top: -2px;
	left: 5px;
	width: 8px;
	height: 14px;
	transform: rotate(40deg);
	border-bottom: 3px solid transparent;
	border-right: 3px solid transparent;
	transition: 0.3s
}
#page8 .checkbox-input:checked + .checkbox-parts{
	color: #98a068;
}
#page8 .checkbox-input:checked + .checkbox-parts::after{
	border-color: #98a068
}
#page8 select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer
}
#page8 select:focus{
	border-color: #a49885
}
::-ms-expand{
	display: none;
}
#page8 .select_wrap::before{
	top: 0;
	bottom: 5px;
	right: 20px;
	margin: auto;
	width: 6px;
	height: 6px;
	border-right: solid 1px #aaa;
	border-bottom: solid 1px #aaa;
	transform: rotate(45deg);
}
#page8 .radio-parts::before{
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: #eee;
	border-radius: 50%;
}
#page8 .radio-parts::after{
	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	background: transparent;
	border-radius: 50%;
	transition: 0.3s
}
#page8 .radio-input:checked + .radio-parts{
	color: #98a068;
}
#page8 .radio-input:checked + .radio-parts::after{
	background: #98a068;
	transform: scale(1.5,1.5)
}

/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
}

/* 文字間隔 */
/* default 1px */
.letter_0{letter-spacing: 0;}
.letter_1{letter-spacing: 0.1em;}
.letter_2{letter-spacing: 0.2em;}
.letter_3{letter-spacing: 0.3em;}
.letter_4{letter-spacing: 0.4em;}
.letter_5{letter-spacing: 0.5em;}
.letter_6{letter-spacing: 0.6em;}
.letter_7{letter-spacing: 0.7em;}
.letter_8{letter-spacing: 0.8em;}
.letter_9{letter-spacing: 0.9em;}
.letter_10{letter-spacing: 1em;}

.float_right{
	float: right
}
.float_left{
	float: left
}
.float_clear{
	float: none
}
.clearfix::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
#page-top{right: 20px}
#map{padding-bottom: 48px}
#banner_box{display: none!important}
#banner_box_tb{
	left: 0;
	bottom: 0;
	z-index: 1
}
#video::before{
	width: 140px;
	height: 266px;
	left: auto;
	right: -20px;
	bottom: -160px;
}
#video #logo{
	left: 20px;
	top: 35px
}
#video #logo::before{display: none}
.more a::before,.more a::after,#top_flow .flow_box::before{display: none}
#intro.fadein{
	transform: none;
	opacity: 1
}
#top_contents1 .top_con1_img1{height: 30vw}
#top_service .top_cate a{box-shadow: none!important;border: solid 1px #e6e6e6}
#top_flow{background-position: top 180px right -150px}
#top_flow .flow_wrap{padding-left: 0}
#top_flow .flow_box{width: 100%!important;margin: 0!important}
#top_flow .flow_wrap::before{
	width: 1px;
	left: 35px;
	top: 100px;
	bottom: 100px;
	border-left: dashed 1px #4d4d4d
}
.contact_bt a:hover{box-shadow: 5px 5px 0 #f7f7f7}
.hvr_trans:hover{transform: none}
#page4 .cate_item{box-shadow: 10px 10px 0 #f7f7f7}

/* 文字間隔 */
/* default 1px */
.letter_0_tb{letter-spacing: 0;}
.letter_1_tb{letter-spacing: 0.1em;}
.letter_2_tb{letter-spacing: 0.2em;}
.letter_3_tb{letter-spacing: 0.3em;}
.letter_4_tb{letter-spacing: 0.4em;}
.letter_5_tb{letter-spacing: 0.5em;}
.letter_6_tb{letter-spacing: 0.6em;}
.letter_7_tb{letter-spacing: 0.7em;}
.letter_8_tb{letter-spacing: 0.8em;}
.letter_9_tb{letter-spacing: 0.9em;}
.letter_10_tb{letter-spacing: 1em;}

.float_right_tb{
	float: right
}
.float_left_tb{
	float: left
}
.float_clear_tb{
	float: none
}
.clearfix_tb::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}

/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
#top_flow{background-image: url()}
#top_flow .flow_wrap::before{
	left: 33px;
	top: 10px;
	bottom: 150px;
}
#top_contents1 .top_con1_right{height: 50vw}
#page_title{height: 200px}
#page_title h2{font-size: 30px}
	
#pager li.prev a,#pager li.next a{
	background-color: #f9f7f4
}
#pager li:not(.prev):not(.next){
	display: none;
}
#page3 .box_arrow{
	width: 1px;
	height: 40px;
	top: -40px;
	bottom: auto;
	left: 0;
	right: 0;
}
#page3 .box_arrow::before{
	top: auto;
	bottom: -2px;
	right: -1px;
}
#page4 .pop_box{
	max-width: calc(100% - 40px);
	width: calc(100% - 40px);
}

/* 文字間隔 */
/* default 1px */
.letter_0_sp{letter-spacing: 0;}
.letter_1_sp{letter-spacing: 0.1em;}
.letter_2_sp{letter-spacing: 0.2em;}
.letter_3_sp{letter-spacing: 0.3em;}
.letter_4_sp{letter-spacing: 0.4em;}
.letter_5_sp{letter-spacing: 0.5em;}
.letter_6_sp{letter-spacing: 0.6em;}
.letter_7_sp{letter-spacing: 0.7em;}
.letter_8_sp{letter-spacing: 0.8em;}
.letter_9_sp{letter-spacing: 0.9em;}
.letter_10_sp{letter-spacing: 1em;}

.float_right_sp{
	float: right
}
.float_left_sp{
	float: left
}
.float_clear_sp{
	float: none
}
.clearfix_sp::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}