@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    font-size:16px;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
	background-color:#ffffff;}

a{
	
	text-decoration: none;
}

a:hover, .active{
  text-decoration: none;
}

a:active, a:focus,input:active, input:focus{outline:0;}
img{
	vertical-align:top;
}


div span{  display: inline-block;   white-space: nowrap; }

/* ヘッダー
------------------------------------------------------------*/
#header{
	text-align: center;
}

#header h1{
	padding-top: 60px;
}

#mainnav a{
	color: #000;
}

#field{
	overflow:hidden;
	background-color:#faf7f0;}

#mainImg{
	height:auto;

  width: 100%;
  
}

#mainImg img{
	position: absolute;

  width:100%;

}






/*フレックスボックス
-------------------------------------*/


/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#cardlayout-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    margin: 2em auto;
    max-width: 1000px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

/* リンクテキストの下線を非表示 */
a.card-link {
    text-decoration: none;
}

/* カードレイアウト内の画像を幅いっぱいに表示 */
#cardlayout-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.card-figure {
    margin: 0;
    padding: 0;
}

/* カードレイアウトのタイトル部分 */
.card-title {
    margin: 0.6em 0 0;
    color: #333;
    text-align: center;
    font-size: 1.8em;
}

/* カードレイアウトの説明文部分 */
.card-text-tax {
    margin: 0;
    padding: 1em;
    color: #818181;
}


/* カードレイアウトを1カラムで配置 */
.card-list {
    margin: 0.5em auto;
    padding: 0;
  padding-top:50px;
  
}

.card-list a:hover{
	opacity:0.7;}


/* 画面幅768px以上の場合カードレイアウトを2カラムで配置 */
@media all and (min-width: 300px) {
    .card-list {
        margin: 0.5em 0;
        width: calc(100% / 2); /* 100%幅を2で割るという指定 */
    }
}

/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 992px) {
    .card-list {
	width: calc(100% / 3); /* 100%幅を3で割るという指定 */
	padding-bottom: 20px;
    }
    
/* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
    #cardlayout-wrap::after{
        content: "";
        display: block;
        width: calc(100% / 3);
    }
}




.sentence70{
	width:70%;
	margin-right:auto;
	margin-left:auto;}



.sentence85{
	width:85%;
	margin-right:auto;
	margin-left:auto;}
	
	
	
.card-list3 {
	width: calc(100% / 3); /* 100%幅を3で割るという指定 */
	padding-bottom: 20px;
    }

.card-list2 {
	width: calc(100% / 5); /* 100%幅を5で割るという指定 */
	padding-bottom: 20px;
    }

@media only screen and ( max-width : 500px ) {
.card-list2 {
	width: calc(100% / 4); /* 100%幅を4で割るという指定 */
	padding-bottom: 20px;
    }
}
/*headerメニュー
-------------------------------------*/



#header {
 
  z-index: 99;
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  margin-right:10px;
  background-color:#ffffff;
  paddind-top:10px;
  padding-bottom:10px;
}

#gNav{
	padding-right:50px;}

#gNav a:hover {
  color: #333333;
}
nav li a {
  font-size: 15px;
  font-weight:bold;
}

nav li a:hover {
  color:#64c0ed;
 font-size: 17px;
}
nav .sub-menu,.mean-container .mean-nav ul ul {
  background-color:rgba(255,255,255,0.5);
  
 
 
  
}
@media only screen and ( max-width : 768px ) {
  #header {
    padding: 10px 0;
    height: 80px;
  }
  .h_logo {
    width: 150px;
   margin-right:auto;
   margin-left:auto;
	text-align:center;
  }
  #gNav .nav {
    overflow-y: auto;
    height: 100vh;
  }
  .mean-nav .container {
    padding: 0;
  }
  nav li .fa {
    display: none;
  }
}

@media print, screen and ( min-width : 769px ) {
  #header {
    height: 80px;
	padding-left:20px;
	
  }
    .h_logo {
    width: 150px;
    position: absolute;
    top: 18px;
    left: 10px;
    z-index: 100;
	text-align:center;
  }
  .h_logo img {
    width: 200px;
	
  }
  #h_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #gNav ul {
    position: relative;
    display: flex;
  }
  #gNav li {
    position: relative;
    margin-right: 3em;
	
  }
  #gNav li:last-child {
    margin-right: 0;
	
  }
  #gNav li i {
    font-size: 16px;
    margin-left: 5px;
  }
  #gNav li a {
    position: relative;
    display: block;
    text-align: center;
    line-height: 80px;
	color:#333333;
  }
  
  #gNav .sub-menu {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    display: block;
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -200px;
    width: 300px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
		 
  }
  #gNav .sub-menu a {
    padding: 10px;
    display: block;
    border-bottom: none;
    padding: 20px;
    line-height: 1.2em;
  }
  #gNav .sub-menu a:hover:after {
    content: none;
  }
  #gNav .sub-menu li {
    display: block;
    font-size: 16px;
    padding: 0;
    margin: 0;
	border-bottom:solid 2px #64c0ed;
  }
  #gNav .sub-menu li:last-child {
     border-bottom:solid 2px #64c0ed;
  }
  #gNav ul > li:hover {
    -webkit-transition: all .5s;
    transition: all .5s;
  }
  #gNav ul > li:hover a,#gNav .current-menu-item a,#gNav .current-menu-parent a {
    color: #64c0ed;
  }
  #gNav li:hover ul.sub-menu {
    top: 80px;
    visibility: visible;
    opacity: 1;
    z-index: 9999;
  }
  #gNav li ul li:after {
    content: none;
  }
 #gNav li:hover ul.sub-menu a {
    color: #333333;
  }
  #gNav .sub-menu li a:hover {
	  background-color:#ffffff!important;
	 color: #64c0ed!important;
  }
  #gNav .contact_btn a:hover {
    color: #fff;

  }
}


 











a.button-menu {
	display: block;
	width: 90%;
	padding-top:5px!important;
	padding-bottom:5px!important;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	line-height: 20px;
	font-size: 17px;
	text-align: center;
	letter-spacing: .2em;
	text-indent: .2em;
	text-decoration: none;
	background: #dd6537;
	color: #ffffff !important;
	border-radius: 5px;
}


a.button-menu:hover{
	opacity:0.7;
	}




#all{width:100%;
	padding-top:30px;
padding-bottom:10px;
overflow:hidden;}

#phone{width:30%;
float:right;}

@media screen and (max-width:1050px) {
#phone{width:40%;
float:right;}

}

@media screen and (max-width:819px) {
#phone{
	display:none;}

}




#logo{width:30%;
float:left;
padding-left:10px;
text-align:left;
}


#logo img{
	max-width:250px;}


@media screen and (max-width:1000px) {

#logo{width:35%;
float:left;

}


#logo img{
	width:90%;}


}







@media screen and (max-width:780px) {

#logo{width:40%;
float:left;
}


#logo img{
	max-width:100%;}


}



@media screen and (max-width:700px) {

#logo{width:100%;
float:left;
}


#logo img{
	max-width:30%;}



}



/*
Zarigani Design Office Drawer Menu
Copyright 2018 Zarigani Design Office
Customized by minimalgreen

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.drawer_menu a {
	color: inherit;
	text-decoration: none;
}

.drawer_menu a:visited {
	color: inherit;
}


/* PC用ナビゲーション */

.drawer_menu .drawer_nav_wrapper {
	transform: translate(0);
	width: 100%;
	height: 50px;
	
	/* PC用メニュー高さ */
	position: relative;
	top: auto;
	right: auto;
	z-index: 100;
	background-color:rgba(255,255,255,0.5);
	/* PC用メニュー背景色 */
}

.drawer_menu .drawer_nav {
	max-width: 1000px;
	/* コンテンツ幅に合わせる */
	padding: 0;
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	list-style-type: none;
}

.drawer_menu .drawer_nav li {
	font-size: 16px;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 50px;
	/* PC用メニュー高さ */
	line-height: 50px;
	/* PC用メニュー高さ */
	background-color:rgba(255,255,255,0.5);
	/* PC用メニューボタン背景色 */
	text-align: center;
	list-style-type: none;
	
}

.drawer_menu .drawer_nav li:hover {
	background-color:#fff;
	color:#64c0ed;
	/* PC用メニューボタンマウスオーバー背景色 */
}

.drawer_menu .drawer_nav li a {
	color: #333;
	/* PC用メニューボタン文字色 */
}

.drawer_menu .drawer_nav li a:hover {
	color:#64c0ed;
	/* PC用メニューボタン文字色 */
}



/* PC非表示 */

@media screen and (min-width:820px) {
	.pc-hidden {
		display: none;
		text-align: center;
	}
}

@media screen and (min-width: 820px) {

	/* ドロップダウンメニュー2階層目 */
	.drawer_menu .drawer_nav li ul.second-level {
		visibility: hidden;
		list-style-type: none;
		position: absolute;
		z-index: -1;
		top: 0;
		margin: 0;
		padding-left: 0;
		
	}

	.drawer_menu .drawer_nav li:hover ul.second-level {
		visibility: visible;
		z-index: 1;
		top: 50px;
		/* PC用メニューの高さに合わせる */
		transition: all .3s;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li {
		width: 300px;
		/* ドロップダウンメニューボタン横幅 */
		height: 70px;
		/* Pドロップダウンメニューボタン高さ */
		text-align: center;
		border-bottom:solid 3px #64c0ed;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li a {
		display: block;
		background-color:rgba(255,255,255,0.5);
		/* ドロップダウンメニューの文字の背景色 */
		color: #333;
		/* ドロップダウンメニューの文字色 */
		font-size: 100%;
		text-decoration: none;
		line-height: 70px;
		/* Pドロップダウンメニューボタン高さ */
		text-align: center;
	}

	.drawer_menu .drawer_nav li:hover ul.second-level li a:hover {
		background-color:rgba(255,255,255,0.5);
		/* ドロップダウンメニューマウスホバー背景色 */
		color:#64c0ed;
	}

	.touch-btn {
		color: #fff;
		margin-left: 5px;
	}
}

/*+++ Default Button Color +++*/

.drawer_menu .drawer_button {
	color: #fff;
	/* ハンバーガーメニュー文字色 */
	display: none;
}

.drawer_menu .drawer_button .drawer_bar {
	background-color: #fff;
	/* ハンバーガーメニュー三本線の色 */
}


/* 1000px以下 */

@media screen and (max-width: 819px) {
	.drawer_menu .drawer_bg {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		background-color: rgba(51, 51, 51, 0.5);
		display: none;
		top: 0;
		left: 0;
	}

	.drawer_menu .drawer_button {
		display: block;
		background-color: #64c0ed;
		color: #fff;
		border: none;
		padding: 5px;
		width: 50px;
		letter-spacing: 0.1em;
		cursor: pointer;
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 1001;
		text-align: center;
		outline: none;
	}

	.drawer_menu .drawer_button.active .drawer_bar {
		width: 40px;
	}

	.drawer_menu .drawer_button.active .drawer_bar1 {
		transform: rotate(30deg);
	}

	.drawer_menu .drawer_button.active .drawer_bar2 {
		opacity: 0;
	}

	.drawer_menu .drawer_button.active .drawer_bar3 {
		transform: rotate(-30deg);
	}

	.drawer_menu .drawer_button.active .drawer_menu_text {
		display: none;
	}

	.drawer_menu .drawer_button.active .drawer_close {
		display: block;
	}

	.drawer_menu .drawer_bar {
		display: block;
		height: 2px;
		margin: 8px 2px;
		transition: all 0.2s;
		transform-origin: 0 0;
	}

	.drawer_menu .drawer_text {
		text-align: center;
		font-size: 10px;
	}

	.drawer_menu .drawer_close {
		letter-spacing: 0.08em;
		display: none;
	}

	.drawer_menu .drawer_menu_text {
		display: block;
	}

	.drawer_menu .drawer_nav_wrapper {
		width: 250px;
		height: 100%;
		transition: all 0.2s;
		transform: translate(250px);
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1000;
		background-color: #FFF;
		/* ドロワーメニュー内背景色 */
		overflow-x: hidden;
		overflow-y: auto;
	}

	.drawer_menu .drawer_nav {
		display: block;
		position: relative;
		margin-top: 40px;
	}

	.drawer_menu .drawer_nav li {
		background-color: #fff;
		height: auto;
		line-height: 50px;
		/*  ドロワーメニューリスト項目高さ */
		position: relative;
		border-bottom: 1px solid #eee;
	}

	.drawer_menu .drawer_nav li a {
		background-color: #fff;
		/* ドロワーメニューリスト背景色 */
		color: #555;
		/* ドロワーメニューリスト文字色 */
		display: block;
		text-align: left;
		padding-left: 20px;
	}

	/* スマートフォン2階層目 */
	.drawer_menu .drawer_nav li:hover ul.second-level {
		display: block;
	}

	.drawer_menu .drawer_nav li ul.second-level {
		display: none;
		position: relative;
		padding: 0;
		z-index: 1001;
	}

	.drawer_menu .drawer_nav li ul.second-level li a {
		padding-left: 40px;
	}

	.drawer_menu .drawer_nav_wrapper.open {
		transform: translate(0);
	}

	.drawer_menu.left .drawer_button {
		right: auto;
		left: 32px;
	}

	.drawer_menu.left .drawer_nav_wrapper {
		transform: translate(-250px);
		right: auto;
		left: 0;
	}

	.drawer_menu.left .drawer_nav_wrapper.open {
		transform: translate(0);
	}

	.pc-hidden {
		text-align: center;
	}

	.touch-btn {
		color: #555;
		position: absolute;
		top: .25rem;
		right: 2%;
		display: block;
		z-index: 10;
		width: 50px;
		height: 50px;
		text-align: center;
		vertical-align: middle;
	}
}

/*  ウィジェットタイトル */
.drawer-title {
	text-align: center;
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: #555;
	/* ドロワーメニュー内タイトルライン背景色 */
	color: #fff;
}

/* フォローボタン */

.follow-buttons {
	text-align: center;
	margin-top: 0;
	width: 100%;
}

.follow-buttons a {
	display: inline-block;
	width: 60px;
	text-align: center;
	text-decoration: none;
	margin: 5px;
}

.follow-buttons .inner-text {
	font-size: 10px;
	display: block;
}

.follow-buttons .lg,
.content-inner-follow-buttons .fa {
	padding: 15px;
	border-radius: 5px;
	margin: 2px auto;
}

.follow-buttons .hatena {
	color: #38393C;
	background-color: transparent;
}

.follow-buttons .blogicon-hatenablog {
	background: #38393C;
	color: #ffffff;
}

.follow-buttons .blogicon-hatenablog:hover {
	background: #5F6063;
}

.follow-buttons .facebook {
	color: #305097;
	background-color: transparent;
}

.follow-buttons .blogicon-facebook {
	background: #305097;
	color: #ffffff;
}

.follow-buttons .blogicon-facebook:hover {
	background: #5A77B7;
}

.follow-buttons .twitter {
	color: #55acee;
	background-color: transparent;
}

.follow-buttons .blogicon-twitter {
	background: #55acee;
	color: #ffffff;
}

.follow-buttons .blogicon-twitter:hover {
	background: #89C7F7;
}

.follow-buttons .instagram {
	color: #D93177;
	background-color: transparent;
}

.follow-buttons .blogicon-instagram {
	background: #D93177;
	color: #ffffff;
}

.follow-buttons .blogicon-instagram:hover {
	background: #df528d;
}

.follow-buttons .feedly {
	color: #6cc655;
	background-color: transparent;
}

.follow-buttons .blogicon-rss {
	background: #6cc655;
	color: #ffffff;
}

.pc-hidden .profile-icon {
	float: none;
}


































/* フッター
------------------------------------------------------------*/
#footercontact{
	clear: both;
	margin-top:0px;
	padding-top: 0px;
	padding-bottom:0px;
	font-size: 12px;
	background-color:#ffffff;

}

#footercontact img{padding-left:10px;
    padding-right:20px;}
	
#footercontact img:hover{
	opacity: 0.6;
}

#footer{
	clear: both;
	margin-top:0px;
	padding-top: 50px;
	padding-bottom:0px;
	font-size: 12px;
	background-color:#ffffff;
}

#footerbox{
	
	width:80%;
	margin-right:auto !important;
	margin-left:auto;
	overflow:hidden;
	padding-bottom:20px;
}

#footerboxs{
	background-color:#ffffff;
	width: 70%;
	margin-right:auto;
	margin-left:auto;
	overflow:hidden;
	padding-top:20px;
}


#footerbox1{
	color:#333333;
	width:28.3%;
	float:left;
	
}

#footerbox2{
	color:#333333;
	width:28.3%;
	float:left;
	padding-right:5%;
	padding-left:5%;
}

#footerbox3{
	color:#333333;
	width:33.3%;
	float:left;
}


@media only screen and ( max-width : 820px ) {	
#footerbox1{
	color:#333333;
	width:42%;
	float:left;
	margin-left:auto;
	margin-right:auto;
}

#footerbox2{
	color:#333333;
	width:42%;
	float:right;
	padding-left:5%;
	margin-left:auto;
	margin-right:auto;
}

#footerbox3{
	color:#333333;
	width:42%;
	float:left;
	margin-left:auto;
	margin-right:auto;
}}



@media only screen and ( max-width : 550px ) {	
#footerbox1{
	color:#333333;
	width:90%;
	float:none;
	margin-left:auto;
	margin-right:auto;
}

#footerbox2{
	color:#333333;
	width:90%;
	float:none;
	padding-left:5%;
	margin-left:auto;
	margin-right:auto;
}

#footerbox3{
	color:#333333;
	width:90%;
	float:none;
	margin-left:auto;
	margin-right:auto;
}}









#footerbox1 a{
	color:#33333;
	display:block;
}

#footerbox2 a{
	color:#33333;
	display:block;
}



#footerboxL{
	color:#FFF;
	width:30%;
	float:left;
}

#footerboxR{
	color:#333333;
	width:60%;
	float:right;
	margin-left:50px;
	
}




@media only screen and ( max-width : 820px ) {	

#footerboxL{
	color:#FFF;
	width:50%;
	float:none;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	margin-bottom:10px;
}

#footerboxR{
	color:#333333;
	width:90%;
	float:none;
	margin-left:0px;
	text-align:center;
	
}

}





.copyright{
	background-color:#ffffff;
	padding-top:0px;
	color:#333;
	text-align: center;
	padding-top:20px;
	padding-bottom:10px;}




@media (min-width: 820px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
color:#dd6537 !important;
}
}



/* 共通
------------------------------------------------------------*/

img{
	max-width: 100%;
	height: auto;
}

section{
	clear:both;
	padding-top: 70px;
}

section h2{
	font-family: 'Pacifico', cursive;
	width: 60%;
	margin: 0 auto 40px;
	font-size: 22px;
	font-weight:normal;
	text-align: center;
	background: url(../images/borderBlack.png) repeat-x 0 50%;
	background-size: 1px 1px;
}

section h2 span {
	background: #fff;
	padding: 0 80px;
}

.inner{
	width: 94%;
	margin: 0 auto;
	padding-bottom: 50px;
}

.innerS{
	width: 60%;
	margin: 0 auto;
	padding-bottom: 80px;
}


#main_field{
	background-color:#faf7f0;
}

#main{
	max-width: 1280px;
	margin-right:auto;
	margin-left:auto;
	overflow:hidden;
	padding-top:50px;
	padding-bottom:150px;
	
	}
@media only screen and ( max-width : 1400px ) {	

#main{
	max-width: 1000px;
	margin-right:auto;
	margin-left:auto;
	overflow:hidden;
	padding-top:50px;
	padding-bottom:150px;
	
	}
}

@media only screen and ( max-width : 1100px ) {	


#main{
	width: 80%;
	margin-right:auto;
	margin-left:auto;
	overflow:hidden;
	padding-top:50px;
	padding-bottom:150px;
	
	}


}

@media only screen and ( max-width : 855px ) {	


#main{
	width: 90%;
	margin-right:auto;
	margin-left:auto;
	overflow:hidden;
	padding-top:50px;
	padding-bottom:150px;
	
	}


}

@media only screen and ( max-width : 700px ) {	


#main{
	width: 98%;
	margin-right:auto;
	margin-left:auto;
	overflow:hidden;
	padding-top:50px;
	padding-bottom:150px;
	
	}


}


#main-life{
	max-width: 1800px;
	margin-right:auto;
	margin-left:auto;
	overflow:hidden;
	padding-top:0px;
	padding-bottom:100px;
	
	}

#field{
	background-color:#ffffff;}



h3{
	font-size:25px;
	padding-left: 50px;
	line-height: 30px;
	background: url(../img/top/ping.gif) no-repeat;
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:5px;
	margin-top:30px;
	border-bottom:dotted 2px #333;
}

h10{
	color:#43ac9a;
	font-size:130%;
	font-weight:bold;
	padding-bottom:50px !important;
	text-align:center !important;}

h11{
	font-size:25px;
	color:#333;
	margin-top:20px;
	margin-bottom:10px;
	text-align:center;
	margin-bottom:0px;}


h2{
	font-size:30px;
	color:#dd6537;
	margin-top:70px;
	text-align:center;
	margin-bottom:0px;}
h2:after {
  content: "";
  display: block;
  width: 4rem;
  border-top: 8px dotted #e8d720;
  margin: 1rem auto 0;
  padding-bottom:30px;
}

h4{
	color:#43ac9a;
	font-size:30px;}
@media screen and (max-width: 830px) {
	h4{
	color:#43ac9a;
	font-size:28px;}}
@media screen and (max-width: 810px) {
	h4{
	color:#43ac9a;
	font-size:25px;}}
@media only screen and ( max-width : 500px ) {
h4{
	color:#43ac9a;
	font-size:20px;}}
h5{
	color:#dd6537;
	font-size:20px;
	padding-bottom:10px;
	padding-top:20px;}



h6{
 font-size:25px;
    padding-left: 30px;
    line-height: 30px;
    background: url(../img/top/ping2.png) no-repeat;
	padding-top:5px;
	padding-bottom:10px;
	margin-bottom:10px;
	margin-top:10px;
	color:#333;
	
}
@media only screen and ( max-width : 600px ) {


h6{
 font-size:20px;
    padding-left: 30px;
    line-height: 30px;
    background: url(../img/top/ping2.png) no-repeat;
	padding-top:5px;
	padding-bottom:10px;
	margin-bottom:10px;
	margin-top:10px;
	color:#333;
	
}}

@media only screen and ( max-width : 510px ) {


h6{
 font-size:18px;
    padding-left: 30px;
    line-height: 30px;
    background: url(../img/top/ping2.png) no-repeat;
	padding-top:5px;
	padding-bottom:10px;
	margin-bottom:10px;
	margin-top:10px;
	color:#333;
	
}}


h7{
	color:#dd6537;
	font-size:40px;
	padding-bottom:10px;
	padding-top:20px;
	text-align:center;
	font-weight:bold;}
	
h7 a{
	color:#dd6537;
	font-size:40px;
	padding-bottom:10px;
	padding-top:20px;
	text-align:center;
	font-weight:bold;}
@media only screen and ( max-width : 500px ) {	
h7 a{
	color:#dd6537;
	font-size:30px;
	padding-bottom:10px;
	padding-top:20px;
	text-align:center;
	font-weight:bold;}
}


@media only screen and ( max-width : 371px ) {	
h7 a{
	color:#dd6537;
	font-size:25px;
	padding-bottom:10px;
	padding-top:20px;
	text-align:center;
	font-weight:bold;}
}



h8{
	color:#dd6537;
	font-size:30px;
	text-align:center;}

h9{
	color:#333;
	font-size:18px;
	padding-bottom:5px;
	padding-top:20px;
	font-weight:bold;
}


.marker-title{
	  display: inline-block;   /* ←ここが重要 */
  max-width: 100%;
  font-size: 120%;
  font-weight: 700;
  line-height: 1.6;
  padding: 0 .15em;
  background: linear-gradient(transparent 80%, #e8d720 80%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  
  white-space: normal;     /* 折り返しを許可 */
  word-break: break-word;  /* 英数字・長文対策 */
}
		
	
.btn-sugai{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: .95em 1.4em;
  border-radius: 999px;              /* 角丸（上品） */
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}

/* メイン：ブルー */
.btn-sugai--primary{
  background: #dd6537!important;
  color:#ffffff!important;
  border: 1px solid #dd6537;
  
}
.btn-sugai--primary:hover{
  border: 1px solid #dd6537;
  background: #ffffff!important;
  color:#dd6537!important;
}


#thintittle{
	width:100%;
	background-color:#64c0ed;
	border-radius:10px;
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	margin-bottom:10px;
	margin-top:30px;
	color:#fff;}
#thintittle a{
	color:#fff;}


#bigtittle{
	width:90%;
	background-color:#f0f8ff;
	border-radius:10px;
	padding-top:20px;
	padding-bottom:20px;
	padding-left:5%;
	padding-right: 5%;
}

#right{
	text-align:right;}


#inner{overflow:hidden;
width:80%;
	margin-right:auto;
	margin-left:auto;
	padding-bottom:50px;
}



li a{color:#333;}

li a:hover{color:#64c0ed;}

#box100{width:100%;
overflow:hidden;}


h1{
	font-size:28px;
	text-align:center;
	padding-bottom:50px;
	color:#333333;
	padding-top:100px;}
.head_test-point {
    display:  block;        /* ブロック要素にする */
    font-size:  20px;       /* 文字サイズ指定 */
    margin-top:  0px;      /* 周りの余白指定 */
    position:  relative;    /* 位置調整 */
    width: 140px;           /* 幅指定 */
    color:#64c0ed;
	background-color: transparent !important;
    
}

@media print, screen and ( min-width : 500px ) {

h1{
	font-size:28px;
	text-align:center;
	padding-bottom:50px;
	color:#333333;
	padding-top:100px;}}

.check-mark {
    padding-left: 30px;
    position: relative;
	font-size:120%;
	padding-top:10px;
}

.check-mark::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 10px;
    border-left: 3px solid #000066;
    border-bottom: 3px solid #000066;
    transform: rotate(-45deg);
	padding-top:10px;
}
.stripe-marker {
  background-image: repeating-linear-gradient(-45deg,
    #fcf69f 0, #fcf69f 2px,
    transparent 2px, transparent 4px
  );
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.5em;
}

.marker01{
background:linear-gradient(transparent 10%, #f8cece 90%);
}
.marker02{
	background:linear-gradient(transparent 10%, #ffff00 90%);
margin-left:0.3em;
text-decoration:underline;
}



#main_field-white{
	background-color:#ffffff;	
}
#main_field-bj{
   background-color:#fffef6;}
   
   
.red{
	color:#F00;}

.for-pc { display:block; }
.for-sp { display:none; }

@media only screen and (max-width : 820px){
  .for-pc { display:none; }
  .for-sp { display:block; }
}



/*lpgボタン
-------------------------------------*/
a.button-lpg {
	
	display: block;
	width: 90%;
	padding-top:15px;
	padding-bottom:15px;
	line-height: 50px;
	font-size: 110%;
	text-align: center;
	letter-spacing: .2em;
	text-indent: .2em;
	text-decoration: none;
	background: #CCC;
	color: #fff;
	border-radius: 10px;
	margin-left:auto;
	margin-right:auto;
}


a.button-lpg:hover{
	background:#fff;
	color:#43ac9a;
	border:3px solid #43ac9a;
	}


a.button-lpg2 {
	display: block;
	width: 90%;
	padding-top:15px;
	padding-bottom:15px;
	line-height: 50px;
	font-size: 110%;
	text-align: center;
	letter-spacing: .2em;
	text-indent: .2em;
	text-decoration: none;
	background: #ffffff;
	color:#43ac9a;
	border:3px solid #43ac9a;
	border-radius: 10px;
		margin-left:auto;
	margin-right:auto;
}


#lpg1-3{
width:33%;
float:left;	
}

/*スマホpc表示切替
-------------------------------------*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 1100px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}





/*タイトル大
-------------------------------------*/


.head_test {
    margin:  0;             /* デフォルトCSS打ち消し */
    position:  relative;    /* 位置調整 */
    font-weight:  normal;   /* 文字の太さ調整 */
    margin-bottom: 35px;    /* 周りの余白指定 */
    font-size: 40px;        /* 文字サイズ指定 */
    text-align:  center;    /* 文字位置指定 */
	margin-top:150px;
}
p {
    margin:  0;             /* デフォルトCSS打ち消し */
    line-height: 2;         /* 行間調整 */
	font-size:16px;}

.head_test-point {
    display:  block;        /* ブロック要素にする */
    font-size:  14px;       /* 文字サイズ指定 */
    margin-top:  0px;      /* 周りの余白指定 */
    position:  relative;    /* 位置調整 */
    width: 140px;           /* 幅指定 */
    margin: 10px auto 0;    /* 周りの余白指定 */
    background-color:  #fff;/* 背景色指定 */
	
}


.head_test-point:before {
    content: '';            /* 空の要素を作る */
    height:  1px;           /* 高さ指定 */
    background-color:  #000;/* 背景色指定 */
    position:  absolute;    /* 位置調整 */
    top: 0;                 /* 位置調整 */
    bottom:  0;             /* 位置調整 */
    margin:  auto;          /* 位置調整 */
    z-index: -1;            /* 重なり調整 */
    width: 200px;           /* 幅指定 */
    left:  -30px;           /* 位置調整 */
}

.kiki-tittle-blu{
	font-size:150%;
	font-weight:bold;
	text-align:center;
	color:#64c0ed;
	padding-top:5px;
	padding-bottom:10px;}


.kiki-tittle{
	font-size:150%;
	font-weight:bold;
	text-align:center;
	color:#333;
	padding-top:5px;
	padding-bottom:10px;}

.fukidashi{
	text-align:center;
	}
.fukidashi span{
  position: relative;
}
.fukidashi span::before,
.fukidashi span::after{
  content: "";
  display: inline-block;
  background: #000;
  width: 1px;
  position: absolute;
}
.fukidashi span::before{
  left: 0;
}
.fukidashi span::after{
  right: 0;
}
@media screen and (min-width: 768px){
  .fukidashi span{
    padding: 0 30px;
  }
  .fukidashi span::before,
  .fukidashi span::after{
    height: 30px;
    bottom: 0px;
  }
  .fukidashi span::before{
    transform: rotate(-30deg);
  }
  .fukidashi span::after{
    transform: rotate(30deg);
  }
}
@media screen and (max-width: 767px){
  .fukidashi span{
    display: inline-block;
    padding: 0 20px;
  }
  .fukidashi span::before,
  .fukidashi span::after{
    height: 40px;
    bottom: -2px;
  }
  .fukidashi span::before{
    transform: rotate(-20deg);
  }
  .fukidashi span::after{
    transform: rotate(20deg);
  }
}











.fukidashi2{
	text-align:center;
	font-size:150%;
	font-weight:bold;
	}
.fukidashi2 span{
  position: relative;
}
.fukidashi2 span::before,
.fukidashi2 span::after{
  content: "";
  display: inline-block;
  background: #000;
  width: 1px;
  position: absolute;
}
.fukidashi2 span::before{
  left: 0;
}
.fukidashi2 span::after{
  right: 0;
}
@media screen and (min-width: 768px){
  .fukidashi2 span{
    padding: 0 30px;
  }
  .fukidashi2 span::before,
  .fukidashi2 span::after{
    height: 30px;
    bottom: -10px;
  }
  .fukidashi2 span::before{
    transform: rotate(-30deg);
  }
  .fukidashi2 span::after{
    transform: rotate(30deg);
  }
}
@media screen and (max-width: 767px){
  .fukidashi2 span{
    display: inline-block;
    padding: 0 20px;
  }
  .fukidashi2 span::before,
  .fukidashi2 span::after{
    height: 40px;
    bottom: -2px;
  }
  .fukidashi2 span::before{
    transform: rotate(-20deg);
  }
  .fukidashi2 span::after{
    transform: rotate(20deg);
  }
}













/* TOP
------------------------------------------------------------*/
#service{overflow:hidden;
width:80%;
	margin-right:auto;
	margin-left:auto;
}



@media only screen and ( max-width : 820px ) {	

#service{overflow:hidden;
width:100%;
	margin-right:auto;
	margin-left:auto;
}}


#serviceL{
	width:40%;
	float:left}

#serviceR{
	width:58%;
	float:right;
	}


#home{width: 48%;
	margin-right:auto;
	margin-left:auto;
	background-color:#e9efe2;
	border-radius: 10px;
	box-shadow: 5px 5px 10px 0 #CCC;
	float:left;
	}

#topkiki{
	width:100%;
	margin-bottom:20px;
	overflow:hidden;}

#service1{
	width: 28%;
	float:left;
	margin-left:2%;
	padding-left:2%;
	padding-right:2%;
}
#service1 a:hover{
	
	opacity:0.6;}
	
#service2 a:hover{
	
	opacity:0.6;}
	
#service3 a:hover{
	
	opacity:0.6;}

#service2{
	width: 28%;
	float:left;
	padding-left:2%;
	padding-right:2%;
}

#service3{
	width: 28%;
	float:left;
	margin-right:2%;
	padding-left:2%;
	padding-right:2%;
}

#service4{
	width: 28%;
	float:none;
	margin-right:2%;
	padding-left:2%;
	padding-right:2%;
}
#service5{
	width: 28%;
	float:left;
	margin-right:2%;
	padding-left:2%;
	padding-right:2%;
}



@media screen and (max-width: 1400px) {
#service1{
	width: 45%;
	float:left;
	
	padding-left:1%;
	padding-right:1%;
}
#service1 a:hover{
	
	opacity:0.6;}
	
#service2 a:hover{
	
	opacity:0.6;}
	
#service3 a:hover{
	
	opacity:0.6;}

#service2{
	width: 45%;
	float:right;
	padding-left:1%;
	padding-right:1%;
}

#service3{
width: 48%;
	float:left;
	padding-top:30px;
	padding-left:1%;
	padding-right:1%;
}
#service4{
	width: 45%;
	float:left;
	
	padding-left:1%;
	padding-right:1%;
}
#service4 a:hover{
	
	opacity:0.6;}

#service5{
	width: 45%;
	float:left;
	
	padding-left:1%;
	padding-right:1%;
}
#service5 a:hover{
	
	opacity:0.6;}

}
@media screen and (max-width: 650px) {
#service1{
	width: 80%;
	margin-left:auto;
	margin-right:auto;
	float:none;
	
}
#service1 a:hover{
	
	opacity:0.6;}
	
#service2 a:hover{
	
	opacity:0.6;}
	
#service3 a:hover{
	
	opacity:0.6;}

#service2{
	width: 80%;
	margin-left:auto;
	margin-right:auto;
	float:none;
	padding-top:60px;
}

#service3{
width: 80%;
	margin-left:auto;
	margin-right:auto;
	float:none;
	padding-top:60px;
}}




#stall{width: 48%;
	margin-right:auto;
	margin-left:auto;
	background-color:#1ea7c9;
	border-radius: 10px;
	box-shadow: 5px 5px 10px 0 #CCC;
	float:right;
	color:#FFF;}

#comment{
	margin-right:20px;
	margin-left:20px;
	padding-bottom:30px;}
#date{width:30%;
float:left;
text-align:right;}

#news{width:68%;
float:right;
padding-top:15px;}

@media screen and (max-width: 545px){
#date{width:100%;
float:none;
text-align:left;
padding-left:20px !important;}

#news{width:100%;
float:none;
padding-top:0px;
padding-left:20px !important;}}

/* 会社概要
------------------------------------------------------------*/
#companybox{
	width:100%;
	overflow:hidden;
	display:flex;
	align-items:flex-end;
	}


#message{
	width:60%;
	margin-right:auto;
	margin-left:auto;
	padding-bottom:20px;}
@media screen and (max-width:1400px) {
	#message{
	width:100%;
	margin-right:auto;
	margin-left:auto;
	padding-bottom:20px;}}
	
#sign{
	width:100%;
	float:left;
	text-align:right;
	margin-top: 30px;
}
	
#photo{
	width:38%;
	float:right;}


#history{
	width:70%;
margin-right:auto;
margin-left:auto;
	padding-bottom:0px;
	margin-bottom: 0px;
}
	
#building{
	width:38%;
	float:left;}
@media screen and (max-width:820px) {

#history{
	width:100%;
margin-right:auto;
margin-left:auto;
	padding-bottom:0px;
	margin-bottom: 0px;}
	
#building{
	width:70%;
	float:none;
	margin-left:auto;
	margin-right:auto;
	padding-top:20px;}}

/* table01 */
#table01{
	width:100%;}

#table01 tr {
  border-bottom: 1px solid #dd6537;
}

#table01 th,
#table01 td {
  padding: 24px 0;
  border: none;
}

#table01 th {
  width: 30%;
  text-align:center;
  color:#dd6537;
}

/* sp */
@media only screen and (max-width: 480px) {
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
  }

  #table01 th {
    width: 100%;
  }

  #table01 td {
    padding-top: 0;
  }
}







/* table05 */
#table05{
	width:60%;}

#table05 tr {
  border-bottom: 1px solid #43ac9a;
}

#table05 th,
#table05 td {
  padding: 24px 0;
  border: none;
}

#table05 th {
  width: 30%;
  text-align:center;
  color:#43ac9a;
}

/* sp */

@media only screen and (max-width: 800px) {
  #table05  {
    width: 75%;
    
  }

  
}



@media only screen and (max-width: 480px) {
  #table05  {
    width: 90%;
    
  }

  
}


/* イベント用ガス */

#mass1{
	width:15%;
	float:left;}

#mass2{width:70%;
	float:left;}

#mass3{width:15%;
	float:right;}
@media only screen and (max-width: 1100px) {
#mass1{
	display:none;}

#mass2{width:100%;
	float:left;}

#mass3{
	display:none;
	}}







#mass{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;
	display:flex;
	align-items:flex-end;}




/*お客様サポート
-------------------------------------*/
#support{
	width:100%;
	overflow:hidden;}
	
#priceL{
	width:60%;
	float:left;}
#priceR{
	width:38%;
	float:right;}

#supportL{
	width:56% !important;
	float:left;
	padding-right:2%;}
	
#supportR{
	width:42% !important;
	float:right;}

@media only screen and (max-width: 820px) {
#supportL{
	width:100% !important;
	float:none;
	padding-right:0%;
	padding-bottom:20px;}
	
#supportR{
	width:70% !important;
	float:none;
	margin-left:auto;
	margin-right:auto;}
#priceL{
	width:100%;
	float:none;}
#priceR{
	width:70%;
	float:none;
	margin-left:auto;
	margin-right:auto;}}

/* コインランドリー */

.little{
	font-size:80%;}

#laundry{
width:80%;
margin-left:auto;
margin-right:auto;
overflow:hidden;	
}

#laundryshop{
	width:100%;
	padding-bottom:20px;
	text-align:center;
}

#laundryL{
	width:50%;
	float:left;
	
	}


#laundryR{
	width:50%;
	float:right;}

#laundry100{
width:100%;
margin-left:auto;
margin-right:auto;
overflow:hidden;
padding-top:30px;
padding-bottom:20px;	
}


#laundryL40{
	width:35%;
	float:left;
	margin-right:5px;}

#laundryR60{
	width:60%;
	float:right;}
	
#laundryR60-2{
	width:60%;
	float:right;}
@media only screen and (max-width: 1040px) {

#laundryL40{
	width:35%;
	float:left;
	margin-right:5px;}

#laundryR60{
	width:60%;
	float:right;}
	
#laundryR60-2{
	width:100%;
	float:left;}}
	
	
	
@media only screen and (max-width: 820px) {

#laundryL40{
	width:80%;
	float:none;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;}

#laundryR60{
	width:100%;
	float:none;
	margin-bottom:20px;
	}
	
#laundryR60-2{
	width:100%;
	float:left;}
	
	
	
#laundryL{
	width:100%;
	float:none;
	margin-bottom:50px;
	
	}


#laundryR{
	width:100%;
	float:none;}	
	
	
	
	}
	
#shopinfo{
	
	width:80%;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	padding: 5px 0;
	background-color:#ffffff;
	border:solid 3px #e8d720;
	text-align:center;
	font-weight:bold;}



/* table03 */
#table03{
	width:100%;
	}

#table03 tr {
  border-bottom: 0px solid #43ac9a;
}

#table03 th,
#table03 td {
  padding: 5px 0;
  border: none;
}

#table03 th {
  width: 30%;
  text-align:center;
  color:#dd6537;
}

/* sp */
@media only screen and (max-width: 480px) {
  #table03 th,
  #table03 td {
    width: 100%;
    display: block;
  }

  #table03 th {
    width: 100%;
  }

  #table03 td {
    padding-top: 0;
  }
}



/* LIFE */










#life{
	width:100%;
	overflow:hidden;
	padding-bottom:50px;}
	
#kiki{
	width:50%;
	float:left;}

#sentence{
	width:45%;
	float:right;
	margin-right:3%;
	margin-bottom:30px;}

#sentenceU{
	width:65%;
	float:right;}

#photoU{
	width:30%;
	float:left;
	}
	

@media screen and (max-width:1000px) {
#kiki{
	width:100%!important;
	float:none;}

#sentence{
	width:100%!important;
	float:none;
	
	margin-top:30px;}

#sentenceU{
	width:100%;
	float:none;
	margin-top:30px;}

#photoU{
	width:100%;
	float:none;
	}}
	

#life-tittle{
	width:70%;
	float:left;
	}

#life-R{
	width:30%;
	float:right;
	}

@media screen and (max-width: 820px) {


#life-tittle{
	width:100%;
	float:none;
	}

#life-R{
	width:80%;
	float:none;
	padding-top:20px;
	padding-left:10px;
	
	}
}



.st3:hover {
	fill:#dd6537 !important;
      }

/* ポップアップ　LIFE */

.modal-wrapper {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 10px;
  text-align: center
}

.modal-wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.modal-wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}

.modal-wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -.05em;
  vertical-align: middle;
  content: ""
}

.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 70%;
  max-width: 80%;
  padding: 30px 30px 15px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle
}

.modal-wrapper .modal-window .modal-content {
  max-height: 80vh;
  overflow-y: auto;
  text-align: left
}

.modal-overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .8)
}

.modal-wrapper .modal-close {
  z-index: 20;
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  color: #95979c !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  text-align: center;
  text-decoration: none;
  text-indent: 0
}

.modal-wrapper .modal-close:hover {
  color: #2b2e38 !important
}

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */

.modal-wrapper .modal-window {
  box-sizing: border-box;
  display: inline-block;
  z-index: 20;
  position: relative;
  width: 95%;
  max-width: 100%;
  padding: 5px 5px 10px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle
}
}





/*施工事例
------------------------------------------------------------*/

.bath{width:70%;
margin-right:auto;
margin-left:auto;
background-color:#3CF;
color:#fff;
padding-top:7px;
padding-bottom:7px;
margin-top:5px;
margin-bottom:-15px !important;
}

.laundry{width:70%;
margin-right:auto;
margin-left:auto;
background-color:#F63;
color:#fff;
padding-top:7px;
padding-bottom:7px;
margin-top:5px;
margin-bottom:-15px !important;

}


.reform{width:70%;
margin-right:auto;
margin-left:auto;
background-color:#396;
color:#fff;
padding-top:7px;
padding-bottom:7px;
margin-top:5px;
margin-bottom:-15px !important;

}


.new{width:70%;
margin-right:auto;
margin-left:auto;
background-color:#96C;
color:#fff;
padding-top:7px;
padding-bottom:7px;
margin-top:2px;
margin-bottom:-15px !important;

}


.kitchen{width:70%;
margin-right:auto;
margin-left:auto;
background-color:#F69;
color:#fff;
padding-top:7px;
padding-bottom:7px;
margin-top:5px;
margin-bottom:-15px !important;

}


/*採用
------------------------------------------------------------*/

#recruit{width:100%;
overflow:hidden;}



#recruitL{width:70%;
float:left;}

#recruitR{
	width:30%;
	float:right;
	padding-top: 20px;
}

@media only screen and ( max-width : 820px ) {	


#recruitL{width:100%;
float:none;}

#recruitR{width:80%;
float:none;
margin-left:auto;
margin-right:auto;
padding-top:20px;}
}

/* LPガスをご利用のお客様
------------------------------------------------------------*/
#personal{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	margin-bottom:10px;}

#personalL{width: 48%;
	
	float:left;
	}


#personalR{width: 48%;
	float:right;
	
	
	}
	

/* 問合せボタン */
a.btn_1 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 70%;
	margin: auto;
	padding: 2rem 4rem;
	font-weight: bold;
	border: 2px solid #75c3b6;
	background: #75c3b6;
	border-radius: 100vh;
	transition: 0.5s;
	color:#ffffff;
	font-size:16px;
	
}
a.btn_1:hover {
	color: #fff;
	background: #43ac9a;
}







/* 問合せボタン2 */


.btn_2 {
    text-align: center;
	padding-top:30px;
	
	
}
.btn_2 p {
    margin-bottom: 5px;
    font-weight: 600;
    color: #333333;
    letter-spacing: 0.04rem;
    display: inline-block;
    position: relative;
}
.btn_2 p:before, .btn_2 p:after {
    display: inline-block;
    position: absolute;
    top: 45%;
    width: 20px;
    height: 3px;
    border-radius: 5px;
    background-color: #333333;
    content: "";
}
.btn_2 p:before {
    left: -30px;
    -webkit-transform: rotate( 50deg );
    transform: rotate( 50deg );
}
.btn_2 p:after {
    right: -30px;
    -webkit-transform: rotate( -50deg );
    transform: rotate( -50deg );
}
.btn_2 a {
    display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 50%;
	margin: auto;
	padding: 2rem 4rem;
	font-weight: bold;
	border: 2px solid #dd6537;
	background: #dd6537;
	border-radius: 100vh;
	transition: 0.5s;
	color:#ffffff;
	font-size:16px;
}
.btn_2 a:hover {
   color: #fff;
	background: #db4936;
}




/* 緊急時
------------------------------------------------------------*/

.box_em {
	border: 1px solid #999;
	padding-top:70px;
	padding-bottom:70px;
	padding-left:150px;
	padding-right:150px;
	font-size:150%;
	width: fit-content;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	}

@media screen and (max-width: 959px) {

.box_em {
	border: 1px solid #999;
	padding-top:40px;
	padding-bottom:40px;
	padding-left:100px;
	padding-right:100px;
	font-size:150%;
	width: fit-content;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	}}
	
@media screen and (max-width: 656px) {

.box_em {
	border: 1px solid #999;
	padding-top:40px;
	padding-bottom:40px;
	padding-left:30px !important;
	padding-right:30px !important;
	font-size:130%;
	width: 70%!important;
	margin-left:auto;
	margin-right:auto;
	text-align:center !important;
	}}
	
@media screen and (max-width: 480px) {

.box_em {
	border: 1px solid #999;
	padding-top:40px;
	padding-bottom:40px;
	padding-left:10px !important;
	padding-right:10px !important;
	font-size:110%;
	width: 90%!important;
	margin-left:auto;
	margin-right:auto;
	text-align:center !important;
	}}


.box_em tittle{
	background-color:#d16455;
	padding-left:15px;
	padding-right:15px;
	padding-top:7px;
	padding-bottom:7px;
	color:#ffffff;
	margin-bottom: 200px
	}
.box_em tel{
	font-size:200%;
	color:#333333;
	
	}
@media screen and (max-width: 959px) {
.box_em tel{
	font-size:150%;
	color:#333333;
	
	}}
	
@media screen and (max-width: 460px) {
.box_em tel{
	font-size:130%;
	color:#333333;
	
	}}
		
	
	
.em {
	padding-left:30px;
	
	}
	
#embox{
	width:100%;
	overflow:hidden;}

#emboxL{
	width:65%;
	float:left;}
	
#emboxC{
	width:15%;
	float:left}

#emboxR{
	width:20%;
	float:right;}
#emboxLbig{
	width:80%;
	float:right;}
@media screen and (max-width: 795px) {
	
#emboxL{
	width:80%;
	float:left;}
#emboxC{
	width:20%;
	float:left}
	
#emboxR{
	width:50%;
	float:none;
	margin-right:auto;
	margin-left:auto;
	padding-top:20px;}}


@media screen and (max-width: 700px) {
	
#emboxL{
	width:100%;
	float:none;}
#emboxC{
	width:30%;
	float:left;
	padding-top:20px;}
	
#emboxR{
	width:60%;
	float:right;
	padding-top:20px;
	}}
	
	
	
	
#mcR{
	width:30%;
	float:right;}
#mcL{
	width:70%;
	float:left;}


	
@media screen and (max-width: 820px) {
#mcR{
	width:80%;
	float:none;
	align:center;
	padding-top:40px;}
	
#mcL{
	width:100%;
	float:none;}}


#embox60{
	width:50%;
	float:right;
	}
#embox40{
	width:45%;
	float:left;
	padding-right:5%;
	padding-top:20px;
	}
	
@media screen and (max-width: 750px) {
#embox60{
	width:80%;
	float:none;
	 margin-right:auto;
	margin-left:auto;
	padding-top:20px;}
#embox40{
	width:100%;
	float:none;
	
	
   }}

/* LPガス
------------------------------------------------------------*/
#lpg{
	width:100%;
	overflow:hidden;

	padding-bottom:50px;
	}
#lpgL{
	width:60%;
	float:left;
	vertical-align:top;}
#lpgR{
	width:37%;
	float:right;
	padding-left:3%;}
@media screen and (max-width: 1100px) {
	#lpgL{
	width:100%;
	float:none;
	vertical-align:top;}
#lpgR{
	width:80%;
	margin-right:auto;
	margin-left:auto;
	float:none;
	padding-left:0%;
	padding-top:20px;}
	
}


#lpgGL{
	width:67%;
	float:left;
	vertical-align:top;}
#lpgGR{
	width:30%;
	float:right;
	padding-left:3%;}

@media screen and (max-width: 570px) {

#lpgGL{
	width:100%;
	float:none;
	vertical-align:top;}
#lpgGR{
	width:70%;
	margin-left:auto;
	margin-right:auto;
	float:none;
	padding-left:0%;}
}
	
	
#lpgL2{
	width:70%;
	float:left;}
#lpgR2{
	width:30%;
	float:right;}
#lpg2{
	max-width:800px;
	margin-right:auto;
	margin-left:auto;
	overflow:hidden;
	background-color:#faf7f0;
	padding-bottom:40px;
	padding-right:40px;
	padding-left:40px;
	border-radius:20px;
	border: solid 2px #963;
	margin-top:25px;
	}
	
@media screen and (max-width: 857px) {	
#lpg2{
	width:90%;
	margin-right:auto;
	margin-left:auto;
	overflow:hidden;
	background-color:#faf7f0;
	padding-bottom:40px;
	padding-right:20px;
	padding-left:20px;
	border-radius:20px;
	border: solid 2px #963;
	margin-top:25px;
	}
}
@media screen and (max-width: 500px) {	
#lpg2{
	width:90%;
	margin-right:auto;
	margin-left:auto;
	overflow:hidden;
	background-color:#faf7f0;
	padding-bottom:20px;
	padding-right:10px;
	padding-left:10px;
	border-radius:20px;
	border: solid 2px #963;
	margin-top:15px;
	}
}

#lpg3{
	width:70%;
	overflow:hidden;
	display: flex;
	align-items: flex-end;
	padding-bottom:20px;
	padding-top:50px;
	margin-left:auto;
	margin-right:auto;
	}

#lpg4{
	width:70%;
	overflow:hidden;
	display: flex;
	align-items: flex-end;
	padding-bottom:50px;
	
	margin-left:auto;
	margin-right:auto;
	}


#lpgL3{
	width:50%;
	float:left;
	}
#lpgR3{
	width:50%;
	float:right;
	}
#lpg1-3b{
	width:30%;
	float:left;
	margin-left:3%;
	margin-right:0%;
	}

#lpg1-3{
	width:30%;
	float:left;
	margin-left:3%;
	margin-right:0%;
	}
#lpg1-3-2{
	width:30%;
	float:left;
	margin-left:2% !important;
	margin-right:2% !important;}
#lpg1-3-3{
	width:30%;
	float:left;
	margin-left:0% !important;
	margin-right:3% !important;}
@media screen and (max-width: 850px) {
#lpg1-3{
	width:45%;
	float:left;
	margin-left:3%;
	margin-right:0%;
	
	}
#lpg1-3-2{
	width:45%;
	float:left;
	margin-left:1% !important;
	margin-right:1% !important;
	}
#lpg1-3-3{
	width:45%;
	float:left;
	margin-left:3% !important;
	margin-right:0% !important;
	padding-top:30px!important;}}
	
	
@media screen and (max-width: 450px) {
#lpg1-3{
	width:100%;
	float:none;
	margin-left:0%;
	margin-right:0%;
	}
#lpg1-3-2{
	width:100%;
	float:none;
	margin-left:0% !important;
	margin-right:0% !important;
	padding-top:30px!important;}
#lpg1-3-3{
	width:100%;
	float:none;
	margin-left:0% !important;
	margin-right:0% !important;
	padding-top:30px!important;}}
	
	
#lpg1-3-80{
	width:90%;
	margin-left:auto;
	margin-right:auto;}
	

/* 灯油販売
------------------------------------------------------------*/


#kerosene{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	margin-top:50px;
	margin-bottom:20px;}

#keroseneservice1{
	width: 30%;
	float:left;
	margin-left:1%;
	margin-right:4%;
}

#keroseneservice2{
	width: 30%;
	float:left;
}

#keroseneservice3{
	width: 30%;
	float:left;
	margin-right:1%;
	margin-left:4%;
}

#kerosene2{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	margin-bottom:50px;}
	
#keroseneL{
	width:40%;
	float:left;}

#keroseneR{
	width:57%;
	float:right;
	padding-left:3%;}
@media screen and (max-width: 820px) {	
#keroseneL{
	width:70%;
	margin-right:auto;
	margin-left:auto;
	float:none;}

#keroseneR{
	width:100%;
	float:none;
	padding-top:30px;
	display:flex;
	align-items:flex-end;}}

#kerosene3{
	width:70%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	margin-bottom:50px;}
	
@media screen and (max-width: 1400px) {	
	
#kerosene3{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	margin-bottom:50px;}}

	
	
#keroseneL3{
	width:48%;
	float:left;}

#keroseneR-3{
	width:48%;
	float:right;}




@media screen and (max-width: 800px) {	
#keroseneL3{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	float:none;}

#keroseneR-3{
	width:80%;
		margin-left:auto;
	margin-right:auto;
	padding-top:30px;
	float:none;}}

#kerosene60{
	width:60%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	margin-bottom:50px;}

@media screen and (max-width: 1400px) {	

  #kerosene60{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	margin-bottom:50px;} }       
#keroseneR2{
	width:100%;
	float:none;
	
	padding-bottom:50px;}
#keroseneR3{
	width:100%;
	float:none;
	}



@media screen and (max-width: 800px) {	
#keroseneR2{
	width:40%;
	float:left;
	
	padding-bottom:0px;}
#keroseneR3{
	width:58%;
	float:right;
	padding-left:2%;
	}}


@media screen and (max-width: 550px) {	
#keroseneR2{
	width:80%;
	float:none;
	margin-right:auto;
	margin-left:auto;
	padding-bottom:20px;}
#keroseneR3{
	width:80%;
	float:none;
	padding-left:0%;
	margin-right:auto;
	margin-left:auto;
	}}



/* table02 */
#table02{
	width:70%;
	margin-left:auto;
	margin-right:auto;
	
	}

#table02 tr {
  border-bottom: none;
}
#table02 tr:nth-child(odd) td {
	background: #fff;}
#table02 td {
	background: #eee;
}
#table02 th,
#table02 td {
  padding: 24px 0;
  border:solid 1px #64c0ed;
}

#table02 th {

  text-align:center;
  color:#dd6537;
}

#table02  thead th {
	background-color: #64c0ed;
	color: #fff;
	font-weight: bold;
	text-align: center;
	border:solid 2px #fff;
}
@media screen and (max-width: 1100px) {	
#table02{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	
	}}

/* 電気
------------------------------------------------------------*/
#el4-1{
	width:25%;
	float:left;}

#el4-1:hover{
	opacity:0.7;}
	
	
#el4-2{
	width:25%;
	float:left;}

#el4-2:hover{
	opacity:0.7;}

#el4-3{
	width:25%;
	float:left;}

#el4-3:hover{
	opacity:0.7;}
	
#el4-4{
	width:25%;
	float:left;}

#el4-4:hover{
	opacity:0.7;}


	
@media screen and (max-width: 820px) {
#el4-1{
	width:45%;
	float:left;
	padding-left:5%;}

#el4-1:hover{
	opacity:0.7;}
	
	
#el4-2{
	width:45%;
	float:right;
	padding-right:5%;}

#el4-2:hover{
	opacity:0.7;}

#el4-3{
	width:45%;
	float:left;
	padding-left:5%;
	padding-top:20px;}

#el4-3:hover{
	opacity:0.7;}
	
#el4-4{
	width:45%;
	float:right;
	padding-right:5%;
	padding-top:20px;}

#el4-4:hover{
	opacity:0.7;}
}

/* SEC02 Gallery
------------------------------------------------------------*/
#sec02{
	padding: 0 !important;
}

#sec02 header{
	display: none;
}

#gallery li{
	float: left;
	width: calc(100%/3);
	line-height: 0;
}

#gallery img{
	width: 100%;
	height: auto;
}


/* SEC03 PROJECT
------------------------------------------------------------*/
#sec03 img{
	width: 100%;
	margin-bottom: 30px;
}


/* SEC04 BRAND
------------------------------------------------------------*/
.col3 img{
	display: block;
	margin: 0 auto 5px;
}

.col3 li{
	line-height: 2.0;
}

.col3 .img{
	padding: 80px 50px;
	margin-bottom: 40px;
	line-height: 0 !important;
	background: #f6f6f6;
}

#sec04_02{
	background: url(../images/bgSec04.jpg) no-repeat 100% 100% fixed;
	background-size: cover;
	-webkit-background-size: cover;
	text-align: center;
	padding: 220px 20px;
}

#sec04_02 img{
	width: auto;
}


/* SEC05 COMPANY
------------------------------------------------------------*/
#sec05 p{
	margin-bottom: 5px;
}

.col2 li{
	display: inline-block;
	width: 100%;
	margin: 20px 0;
}

#sns img{
	padding: 35px 10px 5px 0;
}

#sns a:hover img{
	opacity: .8;
}

#map{
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
	z-index: 0;
}

#map iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}



/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width: 1200px){
	.inner{
		width: 1024px;
	}
}

@media only screen and (min-width: 800px){
	body{
		font-size:14px;
	}
	
  a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
	}

	#mainnav li{
		display: inline-block;
		padding: 50px 25px;
		font-size: 15px;
	}
	
	
	/* SEC03 PROJECT
	-----------------*/
	.col3{
		text-align: center;
	}

	.col3 li{
		display: inline-block;
		width: 28%;
		padding: 0 2.5% 50px;
		margin-bottom: 0;
		vertical-align: top;
		text-align: left;
	}
	
  #footer{
		padding: 30px 10px 70px 0;
	}
}


@media only screen and (min-width: 641px){
	.col2 li{
		width: 60%;
		vertical-align: top;
	}
	.col2 li:first-child{
		width: 35%;
		padding-right: 4%;
	}
}

@media only screen and (max-width: 640px){
	.innerS{
		width: 94%;
		padding-bottom: 70px;
	}
	.col3 li{
		line-height: 1.7;
	}
	.col3 img{
		margin: 0 auto;
	}
	.col3 .img{
		padding: 30px;
		margin-bottom: 20px;
	}
	#gallery li{
		float: none;
		width: 100%;
	}
	#map iframe{
		width: 96% !important;
		left: 2%;
	}
	#sec04_02{
		padding: 50px 20px;
	}
}

@media only screen and (max-width: 799px){
	#header{
		position: fixed;
		width: 100%;
		z-index: 500;
	}
	
	#headerWrap{
		position: relative;
		width: 100%;
		height: 70px;
		background: #fff;
		border-bottom: 1px solid #ccc;
	}
	
	#header h1{
		padding-top: 10px;
	}
	
	#header h1 img{
		margin-top: 3px;
		max-height: 45px;
		width: auto !important;
	}
	

  a#menu{
  	display: inline-block;
  	position: relative;
  	width: 40px;
  	height: 40px;
  	margin: 10px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 60%;
  	left: 50%;
  	width: 18px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #000;
  	transition: .2s;
	}

	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #000;
  	transition: .3s;
	}

	#menuBtn:before{
  	margin-top: -7px;
	}

	#menuBtn:after{
  	margin-top: 5px;
	}

	a#menu .close{
  	background: transparent;
	}

	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: 0;
		z-index: 100;
	}

	#mainnav{
		position: absolute;
		top: 0;
		width: 100%;
		text-align: right;
		z-index:500;
	}

	#mainnav ul{
		border-bottom: 1px solid #ccc;
		background: #fff;
		text-align: left;
	}

	#mainnav li a{
		position: relative;
		display:block;
		padding:15px 25px;
		border-bottom: 1px solid #ccc;
		color: #000;
		font-weight: 400;
	}

	#mainnav li a:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #000;
		border-right: solid 2px #000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#mainImg{
		padding-top: 60px;
		z-index: -100;
	}
	.col3 li{
		margin: 50px auto 0 auto;
		display: block;
	}
	section{
		padding-top: 50px;
	}
	section h2{
		margin: 0 auto 20px;
	}
	section h2 span {
		padding: 0 30px;
	}
}


/* メモ　クリップ　Ａ */
.clip-box-a {
 position: relative;
 margin: 2em auto;
 margin-bottom:60px;
 padding: 15px 35px 15px 25px;
 width: 90%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #555555; /* 文章色 */
 border: 1px solid #ccc; /* 枠線 */
 box-shadow: 1px 1px 1px #acacac; /* 影の色 */
}
.clip-box-a::before {
 position: absolute;
 content: '';
 top: -15px;
 right: 10px;
 height: 55px;
 width: 15px;
 border: 3px solid #555555; /*クリップ色 */
 background-color: none;
 border-radius: 12px;
 box-shadow: 1px 1px 2px #999;
 transform: rotate(10deg);
 z-index: 1;
}
.clip-box-a::after {
 position: absolute;
 content: '';
 top: 0px;
 width: 10px; 
 right: 20px;
 border: solid 5px #fff; /*背景色と同じ色にする*/
 z-index: 2;
}
@media only screen and (max-width: 815px){
	.clip-box-a {
 position: relative;
 margin: 2em auto;
 margin-bottom:60px;
 padding: 15px 35px 15px 25px;
 width: 80%; /* ボックス幅 */
 background-color: #fff; /* ボックス背景色 */
 color: #555555; /* 文章色 */
 border: 1px solid #ccc; /* 枠線 */
 box-shadow: 1px 1px 1px #acacac; /* 影の色 */
}}








/* メニュープルダウン内 注意書き */
/* ガスるっく全体 */
.gaslook-link {
  display: block;
  text-align: center;
  padding: 12px 0 8px;
  color: #2fa4e7;           /* 既存の水色に合わせる */
  text-decoration: none;
  border-bottom: 0px solid #2fa4e7;
}

/* 注意書き */
.gaslook-note {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: #333;
  opacity: 0.85;
}
/* ガスるっく：2行分の高さを確保して重なり防止 */
.second-level a.gaslook-link{
  display:block;
  height:auto !important;
  min-height: 56px;          /* ←足りなければ 64px などに */
  line-height:1;
  padding:12px 12px 10px;
  overflow: visible !important;  /* はみ出しで切れないように */
  text-align:center;
}

/* 注意文 */
.second-level a.gaslook-link .gaslook-note{
  display:block;
  margin-top:6px;
  font-size:11px;
  line-height:1.2;
  white-space: normal;       /* 折り返しOK */
}

.second-level li{
  height:auto !important;
}
/* 注意文：ガスるっくとの間を詰める */
.gaslook-note{
  margin-top: 1px;   /* ← 6px → 2px に */
  line-height: 1; /* 文字の上下も詰める */
}
.gaslook-link{
  padding-top: 3px;   /* 上の余白を少し減らす */
  padding-bottom: 8px; /* 下はそのまま or 微調整 */
}