@charset "utf-8";
@import url("hamburger_menu.css");

*{box-sizing: border-box;
	margin: 0;
	padding: 0;}
body{margin:0 auto;
	height: 100%;
	max-width: 1920px;
	min-width: 750px;
	-webkit-text-size-adjust: 100%; 
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	/*-----
	overflow-x: hidden;
	----*/
}
/*-----
opentype
truetype
----*/

@font-face {
  font-family: "font_M";
  src:url("../fonts/FOTRodinNTLG Pro M.otf") format("opentype");
}
@font-face {
  font-family: "font_B";
  src:url("../fonts/FOTRodinNTLG Pro B.otf") format("opentype");
}
@font-face {
  font-family: "font_T";
  src:url("../fonts/FOTRodinNTLG Pro EB.otf") format("opentype");
}

/*----　初期設定　----*/
a{
	text-decoration:none;
	color: inherit;
	transition:ease-in-out 0.2s;
	font-family: "font_B";
	letter-spacing: 2px;
	white-space: nowrap;
}
a:hover{
	opacity: 0.8;
}
p{	text-align: justify;
	font-size: 25px;
	color:#252525;
	font-family: "font_M";
	letter-spacing: 1px;
	line-height: 37px;
}
.title{
	font-size: 40px;
	margin: 20px 0;
}
/*------レスポンシブ-------*/
@media screen and (max-width: 1000px){
  /*--ここにスマホに適したCSSを記述します*/
	p{
	font-size: 30px;
	line-height: 45px;
}	
	.title{
	font-size: 45px;
}
}

.display_tel{
	display: none;
}
.display_tel_950{
	display: none;
}
.display_tel_1000{
	display: none;
}
.display_tel_1100{
	display: none;
}
/*------- 幅 ------*/
.haba{
	max-width:1300px;
	width: 95%;
	margin: auto;
}
.haba_1150{
	max-width: 1150px;
	width: 95%;
	margin: auto;
}
.haba_1000{
	max-width: 1000px;
	width: 95%;
	margin: auto;
}
.haba_900{
	max-width: 900px;
	width: 95%;
	margin: auto;
}
.flex_wrap{
	display: flex;
	flex-flow: wrap;
	align-items: center;
	justify-content: center;
}
.flex_top_wrap{
	display: flex;
	align-items:flex-start;
	justify-content: center;
	flex-flow: wrap;
}
.flex_bottom_wrap{
	display: flex;
	align-items:flex-end;
	justify-content: center;
	flex-flow: wrap;
}
.flex_left_wrap{
	display: flex;
	align-items:center;
	justify-content: flex-start;
	flex-flow: wrap;
}
.flex{
	display: flex;
	align-items: center;
	justify-content: center;
}
.flex_top{
	display: flex;
	align-items:flex-start;
	justify-content: center;
}
.flex_bottom{
	display: flex;
	align-items:flex-end;
	justify-content: center;
}
.flex_center_top{
	display: flex;
	align-items:flex-start;
	justify-content: center;
}
.flex_left{
	display: flex;
	align-items:center;
	justify-content: flex-start;
}
.flex_right{
	display: flex;
	align-items:center;
	justify-content: flex-end;
}
.flex_between{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flex_between_top{
	display: flex;
	align-items:flex-start;
	justify-content: space-between;
}
.flex_between_bottom{
	display: flex;
	align-items:flex-end;
	justify-content: space-between;
}
.flex_column{
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;	
}
.flex_column_top{
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;	
}
.flex_column_left{
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: flex-start;
}
/*------レスポンシブ-------*/
/*----　可変FLEX　----*/
.kahen_flex,.kahen_flex_r{
	display: flex;
	align-items: center;
	justify-content: center;
}
.flex_r{
	display: flex;
	align-items: center;
	justify-content: center;
}
.kahen_flex_left,.kahen_flex_left2{
	display: flex;
	align-items:center;
	justify-content: flex-start;
}
.kahen_flex_top,.kahen_flex_top_r{
	display: flex;
	align-items:flex-start;
	justify-content: center;
}
.kahen_flex_bottom{
	display: flex;
	align-items:flex-end;
	justify-content: center;
}
.kahen_between_bottom,.kahen_between_bottom{
	display: flex;
	align-items:flex-end;
	justify-content: center;
}
.kahen_flex_center_top{
	display: flex;
	align-items:flex-start;
	justify-content: center;
}
.kahen_flex_between,.kahen_flex_between_r{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.kahen_flex_between_top,.kahen_flex_between_top_r{
	display: flex;
	align-items:flex-start;
	justify-content: space-between;
}
.kahen_flex_between_bottom{
	display: flex;
	align-items:flex-end;
	justify-content: space-between;
}
.kahen_flex_column{
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}
.kahen_flex_column_left{
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
}
@media screen and (max-width: 1000px){
  /*--ここにスマホに適したCSSを記述します*/
	.kahen_flex,.kahen_flex_left,
	.kahen_flex_top,.kahen_flex_bottom,
	.kahen_flex_between_bottom,
	.kahen_flex_between_top,
	.kahen_flex_between,
	.kahen_flex_column_left,
	.kahen_flex_center_top,
	.kahen_between_bottom{
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}
	.kahen_flex_r,.kahen_flex_top_r,
	.kahen_flex_between_r,
	.kahen_flex_between_top_r,
	.kahen_between_bottom_r{
	display: flex;
	flex-flow:column-reverse;
	align-items: center;
	justify-content: center;	
}
	.flex_r{
	display: flex;
	align-items: center;
	justify-content:center;
	flex-flow: row-reverse;	
}
	.kahen_flex_left2{
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	justify-content:flex-start;
}
	.kahen_flex_column{
	display: flex;
	flex-flow:nowrap;
	justify-content: center;
	align-items: center;
}
}
/*----　可変FLEX　----*/

.tate{
	-ms-writing-mode: tb-rl;
 	writing-mode: vertical-rl;
}
.siro{
	color: #fff;
}

ol li,ul li{
	list-style-position: inside;
}
body{
	
}
.img{
	background-position: center;
	background-size:cover;
	background-repeat: no-repeat;
}
h1{
	font-size: 13px;
	color:#A6A6A6;
	font-family: "font_M";
	font-weight: normal;
	line-height: 20px;
	width: 94%;
	max-width: 1300px;
	margin: auto;
	margin-bottom: -13px;
	text-align: left;
}
.h1{
	font-size: 23px;
	color:#009E3C;
	font-family: "font_B";
	font-weight: normal;
	margin-left: 5px;
	margin-bottom: -5px;
}
h2{
	font-size: 45px;
	font-family: "font_T";
	font-weight: normal;
	line-height: 45px;
	color:#252525;
	letter-spacing: -1px;
}
h3{
	font-size: 45px;
	font-family: "font_B";
	font-weight: normal;
	line-height: 55px;
	color:#252525;
	letter-spacing: -1px;
}
h4{
	font-size: 45px;
	font-family: "font_B";
	font-weight: normal;
	line-height: 55px;
	color:#252525;
	letter-spacing: -1px;
	background: linear-gradient(transparent 60%, #FFD900 30%);
    display: inline-block;
	text-align: center;
}
.red{
	color: #FF1D25;
}
.green{
	color: #00B101;
}
.bold{
	font-family: "font_B";
}
.BG_yellow2{
	background-color: #FFD900;
}

/*------レスポンシブ-------*/
@media screen and (max-width: 1100px){
  /*--ここにスマホに適したCSSを記述します*/
	h1{
	margin:10px 0 5px 12px;
	font-size: 20px;
		
}
	.h1{
	font-size: 30px;
	margin-bottom: -2px;
}
	h2{
	font-size: 60px;
}	
}
/*----　トップへ戻るボタン　----*/
#page_top{
  width: 100px;
  height: 60px;
  position: fixed;
  right: 30px;
  bottom: -100px;
  background: #009E3C;
  opacity: 0.6;
  border-radius: 15px;
	z-index: 9999;
}
#page_top a{
  position: relative;
  display: block;
  width: 100px;
  height: 60px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*----　ヘッダー　----*/
header{
	width: 100%;
	padding: 0;	
	border-bottom: #009E3C 5px solid;
}
header .header{
	padding-bottom: 10px;
}
header .rogo{
	
}
.header_tel{
	padding: 5px 10px 2px 10px;
}
.header_mail{
	background-image: url("../images/header_meil.png");
	width: 200px;
	height: 75px;
	background-position: center;
	background-size:cover;
	background-repeat: no-repeat;
	filter: drop-shadow(5px 5px 5px #aaa);
}
.header_mail:hover{
	background-image: url("../images/header_meil_H.png");
	filter: drop-shadow(1px 1px 1px #aaa);
}
.header_LINE{
	background-image: url("../images/header_LINE.png");
	width: 200px;
	height: 75px;
	background-position: center;
	background-size:cover;
	background-repeat: no-repeat;
	filter: drop-shadow(5px 5px 5px #aaa);
}
.header_LINE:hover{
	background-image: url("../images/header_LINE_H.png");
	filter: drop-shadow(1px 1px 1px #aaa);
}
/*------レスポンシブ-------*/
@media screen and (max-width: 1100px){
  /*--ここにスマホに適したCSSを記述します*/
	header .header{
	padding-bottom: 20px;
}
	.header_tel img{
		margin-top: -5px;
	}
}
/*------レスポンシブ-------*/
@media screen and (max-width: 1000px){
  /*--ここにスマホに適したCSSを記述します*/
	header .rogo{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -10px;
}
}
/*----　ナビ　----*/
.header_nav a{
	font-size: 17px;
	padding: 5px 10px;
	color: #252525;
}
.header_nav a:hover{
	color:#009E3C;
	opacity: 1;
}
.header_nav hr{
	height: 45px;
	border: solid 1px #009E3C; 
	margin: 0 7px;
	color:#00ced1;
	border-left: none;
	border-top: none;
	border-bottom: none;
}
/*------レスポンシブ-------*/
@media screen and (max-width: 1200px){
  /*--ここにスマホに適したCSSを記述します*/
.header_mail{
	width: 120px;
	height: 43px;
}

.header_LINE{
	width: 120px;
	height: 43px;
}	
}
/*-------- スマホのボトムリンク -------*/
.tel_bottom{
	position: fixed;
	bottom: 0;
	border: solid #009E3C 2px;
	width: 100%;
	min-width: 750px;
	height: 160px;
	z-index: 9999;
}
.BG_yellow{
	background-color: #FFFF00;
	width: 60%;
	height: 100%;
}
.BG_green{
	background-color: #06BF55;
	width: 20%;
	height: 100%;
}
.BG_blue{
	background-color: #008BFF;
	width: 20%;
	height: 100%;
}

/*--- トップイメージ ---*/
.top_img{
	margin-top: -2px;
}

/*--- 大荷物回収 ---*/
.oonimotu{
	margin: 50px auto;
}
.oonimotu img{
	max-width: 1000px;
}

/*--- パックの料金 ---*/
.top_pack{
	background-color:#FFD900; 
}
.top_pack img{
	max-width: 1000px;
}
.hukidasi_1{
	margin-top: -50px;
}

/*--- 一ヶ所からお家一軒まで ---*/
.top_text{
	max-width: 1000px;
	margin: 50px auto;
}

/*--- サービスメニュー ---*/
.top_service{
	background-color: #E6F6EC;
	padding: 50px 0;
}
.top_service .icon{
	max-width: 1020px;
	width: 100%;
	margin: auto;
	display: flex;
	align-items:center;
	justify-content: flex-start;
	flex-flow: wrap;
}
/*------レスポンシブ-------*/
@media screen and (max-width: 1031px){
  /*--ここにスマホに適したCSSを記述します*/
	.top_service .icon{
	justify-content: center;
}	
}
/*------お問合わせ枠-------*/
.top_contact{
	background-image: url("../images/contact_waku.png");
	width: 1038px;
	height: 355px;
	background-size: contain;
	background-repeat: no-repeat;
	margin: auto;
	position: relative;
}
.top_contact .contact_tel{
	background-image: url("../images/contact_tel.png");
	width: 854px;
	height: 93px;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	top: 100px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.top_contact .contact_tel:hover{
	background-image: url("../images/contact_tel_H.png");
	width: 854px;
	height: 93px;
	background-size: cover;
	background-repeat: no-repeat;
	margin: auto;
	position: absolute;
	top: 100px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.top_contact .kahen_flex{
	position: absolute;
	top: 200px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.top_contact .contact_LINE{
	background-image: url("../images/contact_tel_LINE.png");
	width: 423px;
	height: 108px;
	background-size: cover;
	background-repeat: no-repeat;
	filter: drop-shadow(5px 5px 5px #aaa);	
}
.top_contact .contact_LINE:hover{
	filter: drop-shadow(1px 1px 1px #aaa);
	opacity: 1;
}
.top_contact .contact_mail{
	background-image: url("../images/contact_tel_mail.png");
	width: 423px;
	height: 108px;
	background-size: cover;
	background-repeat: no-repeat;
	filter: drop-shadow(5px 5px 5px #aaa);
}
.top_contact .contact_mail:hover{
	filter: drop-shadow(1px 1px 1px #aaa);
	opacity: 1;
}
/*------レスポンシブ-------*/
@media screen and (max-width: 1100px){
  /*--ここにスマホに適したCSSを記述します*/
/*------お問合わせ枠-------*/
.top_contact{
	background-image: url("../images/contact_waku_tel.png");
	width: 653px;
	height: 388px;
}
.top_contact .contact_tel{
	background-image: url("../images/contact_tel_tel.png");
	width: 531px;
	height: 85px;
	top: 60px;
}
.top_contact .contact_tel:hover{
	background-image: url("../images/contact_tel_tel_H.png");
	width: 531px;
	height: 85px;
	top: 60px;
}
.top_contact .kahen_flex{
	top: 150px;
}
}

/*------ナナハチに任せられる３つの理由-------*/
.riyuu .flex_column{
	width: 300px;
	margin: 20px;
}

/*------レスポンシブ-------*/
@media screen and (max-width: 1000px){
  /*--ここにスマホに適したCSSを記述します*/
	.riyuu .flex_column{
	width: 650px;
	margin: 50px 0;
}	
	.riyuu .flex_column img{
		width: 60%;
	}
}

/*------こんなお悩みございませんか-------*/
.onayami{
	background-image: url("../images/top_onayami.png");
	width: 100%;
	height: 1156px;
	background-position: center;
	background-size:cover;
	background-repeat: no-repeat;
	
}
.onayami img{
	margin-top: -60px;
}
/*------レスポンシブ-------*/
@media screen and (max-width: 1000px){
  /*--ここにスマホに適したCSSを記述します*/
	.onayami{
	background-image: url("../images/top_onayami_tel.png");
	width: 100%;
	height: 1199px;	
}
}

/*------見積もり出張費キャンセル料-------*/
.muryou{
	background-color: #E78000;
	padding: 20px 0;
}

/*------footer-------*/
.footer_tel{
	background-color: #009E3C;
	padding: 20px 0;
	margin-top: -10px;
}
footer h2{
	margin: 50px auto;
}
footer .company{
	border-top: #000 solid 5px;
	border-bottom: #000 solid 5px;
	padding: 30px;
	margin: 10px auto;
}
footer p{
	white-space:nowrap;
}
footer .p1{
	font-family: "font_B";
	font-size: 18px;
	line-height: 22px;
}
footer .p2{
	font-family: "font_B";
	font-size: 30px;
	line-height: 30px;
	margin-left: 5px;
}
footer .p3{
	font-size: 13px;
	line-height: 20px;
}

/*------レスポンシブ-------*/
@media screen and (max-width: 1000px){
  /*--ここにスマホに適したCSSを記述します*/
	footer .flex{
	margin-bottom: 20px;
}	
}

/*------ コピーライト ------*/
.Copywriter{
	margin-top: 50px;
	height: 40px;
	font-size: 12px;
	background-color:#85D759;
	width: 100%;
	color: #fff;
	padding: 12px 0;
	text-align: center;
	line-height: 15px
}


/*------他ページ-------*/
.top_img_hanyou{
	background-color: #009E3C;
	padding: 40px 0 50px 0;	
}
.top_img_hanyou h3{
	color: #fff;
	text-align: center;
}
/*- ふきだし -*/
.arrow_box{
    position:relative;
    width:500px;
    height:70px;
    background:#00B101;
    text-align:center;
    border:5px solid #00B101;
    color:#FFFFFF;
    font-size:28px;
    border-radius:40px;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
	font-family: "font_B";
}
.arrow_box:after,.arrow_box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    top:100%;
    left:50%;
}
.arrow_box:after{
    border-color: rgba(0, 206, 209, 0);
    border-top-width:13px;
    border-bottom-width:13px;
    border-left-width:7px;
    border-right-width:7px;
    margin-left: -7px;
    border-top-color:#00B101;
}
.arrow_box:before{
    border-color: rgba(0, 206, 209, 0);
    border-top-width:22px;
    border-bottom-width:22px;
    border-left-width:12px;
    border-right-width:12px;
    margin-left: -12px;
    margin-top: 5px;
    border-top-color:#00B101;
}


/*------レスポンシブ-------*/
@media screen and (max-width: 1100px){
  /*--ここにスマホに適したCSSを記述します*/
		
}
/*------一番下に-------*/
/*------レスポンシブ-------*/
@media screen and (max-width: 900px){
  /*--ここにスマホに適したCSSを記述します*/
	.display_pc{
		display: none;
	}
	.display_tel{
	display: block;
	}
}
@media screen and (max-width: 950px){
  /*--ここにスマホに適したCSSを記述します*/
	.display_pc_950{
		display: none;
	}
	.display_tel_950{
	display: block;
	}
}
@media screen and (max-width: 1000px){
  /*--ここにスマホに適したCSSを記述します*/
	.display_tel_1000{
	display: block;
}
	.display_pc_1000{
	display: none;
	}
}
@media screen and (max-width: 1100px){
  /*--ここにスマホに適したCSSを記述します*/
	.display_tel_1100{
	display: block;
}
	.display_pc_1100{
	display: none;
}
}
@media screen and (max-width: 1100px){
  /*--ここにスマホに適したCSSを記述します*/
	h1,h2,h3,h4,h5,h6,th,p,a{
	font-weight: normal;	
}	
	.haikei_kotei,.haikei_kotei_1,
	.haikei_kotei2{
	background-attachment: inherit;
}
}
/*------レスポンシブ-------*/