@charset "UTF-8";

/* === 全体にかかる設定 ============================== */

body {
    margin: 0;
    color: #333;
    font-family: arial, sans-serif;
    line-height: 1.8;
}

p {
    margin: 1rem 0;
}

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

/* === ヘッダー =============== */
header {
	overflow: hidden;
	margin-top: 0rem;
}

.site_title {
	    float: left;
		margin-top: 1rem;
}
.site_title img {
	width: 250px;
}

/* === メインメニュー =============== */

    .main_menu {
        display: block;
        text-align: right;
		margin-top: -1rem;
		font-family: 'Noto Sans JP', sans-serif;
font-family: 'Zen Maru Gothic', sans-serif;
    }

    .main_menu ol {
        list-style-type: none;
        margin: 3rem 0 0 0;
        padding: 1rem 0 0 0;
    }

    .main_menu li {
        display: inline-block;
		vertical-align: middle;
		margin: 0.6rem 0 0 1rem;
		font-size: 1.2rem;
    }

    .main_menu li a {
        padding: 20px 0;
		color: #000 !important;
		line-height: 20px;
	position: relative;
	display: inline-block;
}
    .main_menu li a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}
@media (min-width:600px) {
    .main_menu li a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
transform-origin: left top; /*左から右に向かう*/
}
}

    .main_menu li::before {
	content: "/";
		margin-right: 1rem;
		color: #999;
	}
    .main_menu li:first-child::before {
	content: "";
		margin-right: 0;
	}

/* === ヘッダーメニュー =============== */
.header_menu_area {
	position: fixed;
	left:0;
	top: 0;
	width: 100vw;
	height: auto;
	z-index: 9999;
}
.header_menu {
	display: flex;
	justify-content: unset;
	width: 100%;
}

    /* ハンバーガーボタン */
    #hamburger_btn {
      display: block;
      width: 60px;
      height: 60px;
      cursor: pointer;
			z-index: 9999;
			background-color: rgba(255, 255, 255, 0.5);
    }

    #hamburger_btn .menu_icon,
    #hamburger_btn .close_icon {
      margin: 15px auto 8px auto;
      width: 30px;
      z-index: 9999;
    }


    /* メインメニューを非表示に */
    .main_menu {
      display: none;
    }

    /* 「閉じる」アイコンは消しておく */
    #hamburger_btn .close_icon {
      display: none;
    }

		/* ボタンがチェックされたら（「閉じる」アイコンを表示する）*/
		#hamburger_btn.check {
			background-color: rgb(211, 234, 255);
    }
    #hamburger_btn.check .close_icon {
			display: block;
			background-color: rgb(211, 234, 255);
    }

    /* ボタンがチェックされたら（「メニュー」アイコンを消す）*/
    #hamburger_btn.check .menu_icon {
      display: none;
    }

    /* パネル */
    #hamburger_panel {
      position: fixed;
      left: -100vw;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgb(211, 234, 255);
      transition: all 0.5s ease 0s;
      z-index: 999;
    }

    /* パネルにチェックが付いたら */
    #hamburger_panel.check {
      left: 0;
    }

    /* パネル のデザイン */
    #hamburger_panel {
      text-align: center;
      padding-top: 70px;
    }

    #hamburger_panel ol {
			list-style: none;
			padding-left: 0;
      border-top: 1px solid rgba(6, 64, 118, 0.2);
    }

    #hamburger_panel ol li {
      margin-left: 0;
    }

    #hamburger_panel ol li a {
      display: block;
      padding: 1rem;
			font-size: 1.2rem;
			color: #555;
      border-bottom: 1px solid rgba(6, 64, 118, 0.2);
		}
		#hamburger_panel ol li a:hover {
			color: #fff;
			background-color: rgb(6, 64, 118);
    }
		@media (max-width:600px) {
			#hamburger_btn {
				flex: 0 0 60px;
			}
		}
    @media (min-width:600px) {
			.header_menu {
				display: flex;
				justify-content: space-between;
			}
			#hamburger_panel {
				left: -300px;
				width: 300px;
			}
			    /* ハンバーガーボタン */
					#hamburger_btn {
						width: 70px;
						height: 70px;
					}
			
					#hamburger_btn .menu_icon,
					#hamburger_btn .close_icon {
						margin: 15px auto 8px auto;
						width: 38px;
					}
		}

    @media (min-width:850px) {
			.header_menu {
				display: flex;
				justify-content: flex-end;
			}
      /* メインメニューを表示して、ハンバーガーボタンを消す */
      .main_menu {
        display: block;
      }

      #hamburger_btn {
        display: none;
      }
    }

/* === 緊急時の対応ボタン =============== */

    .emergency_btn a {
        display: block;
				padding: 18px 0;
		background: #e60013;
		color: #fff !important;
		line-height: 1.5;
		width: 100%;
		text-align: center;
  -webkit-transition: all .3s;
  transition: all .3s;
		z-index: 9;
	}
    .emergency_btn a:hover {
		background: #b6000f;
	}

	@media (max-width:600px) {
    .emergency_btn {
			flex: 1 1 auto;
		}
	}
	@media (min-width:600px) {
		.emergency_btn a {
			width: 170px;
			padding: 18px 1rem 18px 0.2rem;
}
	.emergency_btn a:hover {
	background: #b6000f;
}
	}

/* === コンテンツ部分 ============================== */

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
    padding: 2rem 0 0 0;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
}


/* === グリッド ============================== */

.list_c2 {
  	display: grid;
  	grid-template-columns: repeat(2, 1fr);
    gap:30px;
    flex-wrap:wrap;
}

.list_c3 {
  	display: grid;
  	grid-template-columns: repeat(3, 1fr);
    gap:30px;
    flex-wrap:wrap;
}

.list_c3 img {
	margin-top: 0.5rem;
}

.item {
    flex:1 1 25%;
      }

.list_c4 {
  	display: grid;
  	grid-template-columns: repeat(4, 1fr);
    gap:30px;
    flex-wrap:wrap;
}

@media (min-width:600px) {
	
.layout_c3-9 {
  display: flex;
  gap: 30px;
}

.layout_c3-9 .text {
	width: 75%;
}

.layout_c3-9 .photo {
	width: 25%;
	text-align: center;
}
	
.layout_c4-8 {
  display: flex;
  gap: 30px;
}

.layout_c4-8 .text {
	width: 66.6666666666%;
}

.layout_c4-8 .photo {
	width: 33.33333333333;
	text-align: center;
}
	
.layout_c5-7 {
  display: flex;
  gap: 30px;
}

.layout_c5-7 .text {
	width: 70%;
}

.layout_c5-7 .photo {
	width: 30%;
}
	
	.photo_r {
		float: right;
		margin-left: 2rem;
		margin-top: -1rem;
	}
	
}

/* === パンくずリスト ============================== */

.pankuzu_area {
	background-color: #f7f5f2;
	padding-top: 1rem;
}
.pankuzu {
	clear:both;
	overflow:hidden;
}
.pankuzu ul {
	font-size:88%;
	clear:both;
	list-style-image:none;
	list-style-type:none;
	padding:0 0 0 0;
	margin:0 0 0 0;
}
.pankuzu ul li {
	float:left;
}
.pankuzu ul li a {
	display:block;
	padding:0 10px 10px 0;
	margin:0 0 5px 0;
	text-decoration:none;
}
.pankuzu ul li a:after {
	content: ">";
	color:#999;
	padding:0 0 0 10px;
}

/* === 検索 ============================== */
.search {
    padding: 15px;
}

.form01 {
    display: flex;
	margin: 1rem auto 2rem auto;
	max-width: 400px;
}

.form01 input[type="text"] {
    flex:1 1 auto;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    font-size: 0.9rem;
    border: 0 solid #ccc;
    border-right: none;
	height: 45px;
}

.form01 input[type="submit"] {
    flex: 0 0 80px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    font-size: 0.9rem;
    border: 0 solid #999;
	background-color: #333;
	color: #fff;
	border-radius: 0;
}

.search th {
    text-align: left;
    display: inline-block;
    padding-right: 1rem;
}

.form02 select {
    display: inline-block;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
}

.search_btn {
    margin-top: 1rem;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.search_area {
    color: #fff;
    background-color: #666;
    text-align: center;
    padding: 15px;
}

.side_menu {
    display: none;
}

.search_area label {
    display: block;
    cursor:pointer
}

#search_toggle_sw:checked ~.side_menu {
    display: block;
}
 /*忍者君*/

.ninjakun {
	position: relative;
}
.ninjakun::after {
  display: block;
  content: "";
  width: 80px;
  height: 80px;
  background-image: url(images/ninjakun.svg);
  background-repeat: no-repeat;
	position: absolute;
	right: -20px;
	top: -90px;
}

@media (min-width:768px) {
	.ninjakun::after {
		width: 90px;
		height: 90px;
		right: -20px;
		top: -100px;
	}
}

@media (min-width:851px) {
	.ninjakun::after {
		width: 110px;
		height: 110px;
		right: -130px;
		top: -47px;
	}
}

/* === 緊急時の対応 ============================== */

.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: 600px;
  padding: 30px 30px 15px;
  border-radius: 2px;
  background: #f7f5f2;
  box-shadow: 0 0 30px rgba(0, 0, 0, .6);
  vertical-align: middle
}

.modal-wrapper .modal-window h2 {
	background: none;
	text-align: center;
	color: #333;
	padding: 0;
}

.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: 55px;
  color: #95979c !important;
  font-size: 30px;
  font-weight: 700;
  line-height: 55px;
  text-align: center;
  text-decoration: none;
  text-indent: 0
}

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

.gasmore_tel {
	background-color: #ffeeee;
}
a.list-group-item.gasmore_tel {
	color: #ff0000 !important;
}

@media (max-width:600px) {

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

.modal-wrapper .modal-window {
  width: 96%;
  padding: 15px;
}
.modal-wrapper .modal-window a.list-group-item {
	display: block;
	padding: 0.4rem;
	font-size: 1rem;
    transition: ease .2s;
	position: relative;
}
}


/* === NEWS ============================== */

dl.news_list {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
	margin: 0 auto 3rem auto;
	
}
dl.news_list dt {
    width: 25%;
	padding: 0.5rem 0;
	color: #666;
}
dl.news_list dd {
     width: 70%;
	padding: 0.5rem 0;
}
dl.news_list dd a {
	color: #333;
}
dl.news_list dd a:hover {
	color: #666;
}
dl.news_list .badge {
	padding: 0 0.5rem;
	background-color: #666;
	color: #fff;
	display: inline-block;
	float: right;
	width: 90px;
	text-align: center;
	font-size: 0.9rem;
}
dl.news_list .badge_news {
	background-color: #f33;
}
dl.news_list .badge_topics {
	background-color: #36f;
}
dl.news_list .badge_campaign {
	background-color: #6c0;
}

/* お知らせ追加 */
dl.news_list .badge_annai {
  background:#339900;
}

dl.news_list .badge_bosyuu {
  background:#ff9933;
}

dl.news_list .badge_cyuui {
  background:#996633;
}

dl.news_list .badge_event {
  background:#9933cc;
}

dl.news_list .badge_koushin {
  background:#666666;
}

dl.news_list .badge_onegai {
  background:#3fcfb9;
}

dl.news_list .badge_otoku {
  background:#ff6699;
}

dl.news_list .badge_propane {
  background:#cc0000;
}

dl.news_list .badge_toshi {
  background:#0066cc;
}

dl.news_list .badge_houkoku {
  background:#ff6600;
}

dl.news_list .badge_kokuchi {
  background:#ff0000;
}

dl.news_list .badge_flamme {
  background:#eec400;
}

dl.news_list .badge_campaign {
  background:#0000ff;
}

dl.news_list .badge_reform {
  background:#339999;
}

dl.news_list .badge_annai_topics {
  background:#339900;
}


/* === サイドバー ============================== */

.emergency_menu {
	border: 1px solid #ff0000;
}
.emergency_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.emergency_menu li a {
	color: #000;
	display: block;
	padding: 0.6rem 1.2rem;
}
.emergency_menu li a:hover {
	color: #ff0000;
}
.emergency_menu h3 {
	background-color: #ff0000;
	margin: 0;
	color: #fff;
	padding: 0.6rem 1.2rem;
}

.sidebtn ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebtn ul li {
	margin: 0 0 1rem 0;
}

.sidebtn ul li a {
	padding: 0.8rem 1.2rem;
	display: block;
	background-color: #666;
	color: #fff;
}
.sidebtn ul li a:hover {
	background-color: #333;
}
.sidebtn ul li .material-icons {
	vertical-align: middle;
	float: right;
}

ul.sidebanner {
	margin: 2rem 0 0 0;
	padding: 0;
	list-style: none;
}

ul.sidebanner li {
	text-align: center;
	margin-bottom: 0.5rem;
}


.sidemenu-denki {
	border: 1px solid #666;
}
.sidemenu-denki ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sidemenu-denki li a {
	color: #000;
	display: block;
	padding: 0.6rem 1.2rem;
}
.sidemenu-denki li a:hover {
	color: #ff0000;
}
.sidemenu-denki h3 {
	background-color: #666;
	margin: 0;
	color: #fff;
	padding: 0.6rem 1.2rem;
}
.sidemenu-denki h3 a {
	color: #fff;
}

.sidemenu-laundry {
	border: 1px solid #666;
}
.sidemenu-laundry ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sidemenu-laundry li a {
	color: #000;
	display: block;
	padding: 0.6rem 1.2rem;
}
.sidemenu-laundry li a:hover {
	color: #ff0000;
}
.sidemenu-laundry h3 {
	background-color: #666;
	margin: 0;
	color: #fff;
	padding: 0.6rem 1.2rem;
}
.sidemenu-laundry h3 a {
	color: #fff;
}


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

footer {
    padding: 2rem 0;
    background-color: #0c5daa;
	text-align: center;
	font-size: 0.9rem;
    margin-top: auto;
	color: #fff;
	
}

footer ol {
    margin: 0 0 3rem 0;
    padding: 0;
    list-style-type: none;
	text-align: center;font-family: 'Noto Sans JP', sans-serif;
font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 1rem;
}
footer ol li {
	display: inline-block;
	margin: 0 1.2rem;
}
footer ol li a {
	color: #fff !important;
}
footer ol li a:hover {
	color: rgba(255, 255, 255, 0.8) !important;
}
footer .footer_btn  {
	margin: 1rem 0;
}
footer .footer_btn a {
	color: #fff !important;
	background-color: #666;
	display: block;
	border-radius: 50px;
	text-align: center;
	padding: 0.5rem;
}
footer .footer_btn a:hover {
	background-color: #333;
}

.footer_name {
	font-size: 1.2rem;
}

.copyright {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.8rem;
}


/* === 内部ページ用============================== */


/* カテゴリ第一階層 */

.cat-list {
	margin: 0 0 2rem 0;
}

.cat-list .list_c2_sp h3 {
	font-weight: normal;
	font-size: 1.2rem;
	margin: 0;
	padding: 0;
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
font-family: 'Zen Maru Gothic', sans-serif;
	position: relative;
	display: inline-block;
}
.cat-list .list_c2_sp h3::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}
.cat-list .list_c2_sp figure {
	float: left;
	width: 40%;
	margin: 0 1.2rem 0 0;
 overflow:hidden;
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;
	isolation: isolate;
}
.cat-list .list_c2_sp figure img {
	vertical-align: bottom;
	width: 100%;
	margin-top: 0;
 transition:1s all;
}
@media (min-width:600px) {
.cat-list .list_c2_sp:hover figure img{
  transform:scale(1.2,1.2);
  transition:1s all;
}
.cat-list .list_c2_sp:hover h3::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
transform-origin: left top; /*左から右に向かう*/
}
}

.cat-list .list_c2_sp p {
	color: #333 !important;
	font-size: 0.9rem;
}

.cat-list .list_c2_sp figure {
	width: 100%;
	margin: 0 0 0.5rem 0;
	padding: 0;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
	border-radius: 1rem;
}
.cat-list .list_c2_sp figure img {
	vertical-align: bottom;
	width: 100%;
	margin-top: 0;
	border-radius: 1rem;
}

/* カテゴリ第一階層（ガス機器） */

.gaskiki-list {
	margin: 0 0 2rem 0;
}

.gaskiki-list .list_c2_sp h3 {
	font-weight: normal;
	font-size: 1.4rem;
	margin: 0 0 -0.5rem 0;
	padding: 0.6rem 0 0 0;
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
font-family: 'Zen Maru Gothic', sans-serif;
	position: relative;
	display: inline-block;
}
.gaskiki-list .list_c2_sp h3::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

@media (min-width:600px) {
.gaskiki-list .list_c2_sp:hover h3::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
transform-origin: left top; /*左から右に向かう*/
}
}
.gaskiki-list .item {
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.15);
	border-radius: 1rem;
	background-color: #fff;
 overflow:hidden;
}

.gaskiki-list .list_c2_sp p {
	color: #666 !important;
	font-size: 0.9rem;
	padding-right: 1rem;
	line-height: 1.4rem !important;
}

.gaskiki-list .list_c2_sp figure {
	float: left;
	width: 40%;
	margin: 0 1.2rem 0 0;
 overflow:hidden;
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;
	isolation: isolate;
}
.gaskiki-list .list_c2_sp figure img {
	vertical-align: bottom;
	width: 100%;
	margin-top: 0;
 transition:1s all;
}

@media (min-width:600px) {
.gaskiki-list .list_c2_sp:hover figure img{
  transform:scale(1.2,1.2);
  transition:1s all;
}

}

@media (max-width:1150px) {
.gaskiki-list.list_c3 {
  	grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width:600px) {
	
.gaskiki-list.list_c2 {
  	grid-template-columns: repeat(2, 1fr);
}
.gaskiki-list .list_c2_sp figure {
	float: none;
	width: 100%;
}
.gaskiki-list .list_c2_sp figure {
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 0;
	border-top-right-radius: 1rem;
	}

.gaskiki-list .list_c2_sp h3 {
	font-weight: normal;
	font-size: 1.2rem;
	margin: 0 0 -0.5rem 0;
	padding: 0.5rem 1rem 0 1rem;
}
.gaskiki-list .list_c2_sp p {
	margin: 1rem;
	padding-right: 0;
	font-size: 0.8rem;
}
}

/* 小カテゴリ */

.list-group {
	
}
a.list-group-item {
	display: block;
	padding: 1rem;
	font-size: 1.2rem;
	color: #333 !important;
    transition: ease .2s;
	position: relative;
}
.item a.list-group-item {
	margin-bottom: 0rem;
}
a.list-group-item:hover {
	background-color: #433b3b;
	color: #fff !important;
}

a.list-group-item:hover::after{
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
a.list-group-item::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top:42%;
    right: 20px;
    /*矢印の形状*/
    width: 8px;
    height: 8px;
    border-top: 2px solid #433b3b;
    border-right: 2px solid #433b3b;
    transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

a.list-group-item:hover::after{
    right: 16px;
}

/* ガスのご案内 */

.gas-list-box {
    background-color: #e1ebf2;
	padding: 1rem 1.5rem 1rem 1.5rem;
	margin-top: 0.5rem;
}

.gas-list-box h2 {
	margin: 2.5rem 0 !important;
}

@media (min-width:900px) {
.list-group.gas-list {
	min-height: 465px;
  border-bottom: 0 solid #ddd;
}

.gas-list-box {
	margin-top: 2.5rem;
}
}


@media (max-width:600px) {
a.list-group-item {
	padding: 0.6rem 2rem 0.6rem 0.6rem;
	font-size: 1rem;
}
}

/* お客様サポート */

.bg_white .cat-list-border {
	background-color: #faf8f6;
}

.list_c2.list_support {
  	display: grid;
  	grid-template-columns: repeat(2, 1fr);
    gap:30px;
    flex-wrap:wrap;
}
.list_c2.list_support .item {
	margin-bottom: 0 !important;
	overflow: hidden;
	display: block;
	padding: 0 0 1rem 0;
	margin-bottom: 2rem;
	padding-bottom: 0;
	background-color: #fff;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
	border-radius: 1rem;
	isolation: isolate;
}
.cat-list-border h3 {
	margin: 0.6rem 0;
	font-weight: normal;
	font-family: 'Noto Sans JP', sans-serif;
font-family: 'Zen Maru Gothic', sans-serif;
	color: #000;
	position: relative;
	display: inline-block;
}
.cat-list-border h3::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

.panel-info .tel .text_l {
	font-size: 1.6rem;
	font-weight: normal;
}

@media (min-width:600px) {
.list_c2.list_support {
  	display: grid;
  	grid-template-columns: repeat(1, 1fr);
    gap:30px;
    flex-wrap:wrap;
}
.cat-list-border:hover h3::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
transform-origin: left top; /*左から右に向かう*/
}

.cat-list-border figure {
	max-width: 180px;
	margin: 0 1.6rem 0 0 ;
}
.cat-list-border:hover figure img{
  transform:scale(1.2,1.2);
  transition:1s all;
}
}

@media (min-width:600px) {
.list_c2.list_support {
  	display: grid;
  	grid-template-columns: repeat(1, 1fr);
    gap:30px;
    flex-wrap:wrap;
}
.panel-info .tel .text_l {
	font-size: 2.6rem;
	font-weight: normal;
}
}
@media (max-width:600px) {
.cat-list-border h3 {
	margin: 1rem;
	font-size: 1.1rem !important;
	line-height: 1.4 !important;
}
.cat-list-border p {
	margin: 0 1rem 1rem 1rem !important;
	font-size: 0.8rem !important;
}
.cat-list-border figure {
	width: 100%;
	float: none;
	margin: 0;
}
}
.cat-list-border figure {
	padding: 0;
	float: left;
	overflow: hidden;
}
.cat-list-border img {
	vertical-align: bottom;
	overflow: hidden;
}
.cat-list-border p {
	color: #777;
	font-size: 0.9rem;
	margin-bottom: 0;
	margin-top: 0;
}
.list-group-item {
	display: block;
	padding: 1rem;
	font-size: 1.2rem;
	margin-bottom: 1.5rem;
	background-color: #fff;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
	border-radius: 0.6rem;
}

.cat-list.cat-support {
	margin-top: 2rem;
}
@media (min-width:900px) {
.cat-list.cat-support {
	margin-top: 3rem;
}
}

/* パネル */

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
}
.panel-body {
  padding: 20px;
}
.panel-heading {
  padding: 15px 25px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
  color: inherit;
}
.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel-default {
  border-color: #ddd;
}
.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ddd;
}
.panel-default > .panel-heading .badge {
  color: #f5f5f5;
  background-color: #333;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #ddd;
}
.panel-primary {
  border-color: #337ab7;
}
.panel-primary > .panel-heading {
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #337ab7;
}
.panel-primary > .panel-heading .badge {
  color: #337ab7;
  background-color: #fff;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #337ab7;
}
.panel-success {
  border-color: #d6e9c6;
}
.panel-success > .panel-heading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.panel-success > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #d6e9c6;
}
.panel-success > .panel-heading .badge {
  color: #dff0d8;
  background-color: #3c763d;
}
.panel-success > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #d6e9c6;
}
.panel-warning {
  border-color: #faebcc;
}
.panel-warning > .panel-heading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.panel-warning > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #faebcc;
}
.panel-warning > .panel-heading .badge {
  color: #fcf8e3;
  background-color: #8a6d3b;
}
.panel-warning > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #faebcc;
}
.panel-danger {
	border-radius: 1rem;
  border-color: #ebccd1;
}
.panel-danger > .panel-heading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #fff !important;
	border-top-left-radius: 1rem !important;
	border-top-right-radius: 1rem !important;
}
.panel-danger > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #fff !important;
}
.panel-danger > .panel-heading .badge {
  color: #f2dede;
  background-color: #a94442;
}
.panel-danger > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #ebccd1;
}

/* pagination */

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 3;
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}

/* セクション背景 */

.bg_gray {
	background-color: #f7f5f2;
	padding: 40px 0 50px 0;
}
.bg_gray h1 {
	margin: 0 0 4rem 0;
}
.bg_gray .panel-warning {
	border: 0 solid;
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .05);
          box-shadow: 0 0 0 rgba(0, 0, 0, .05);
}
.bg_gray .panel-warning > .panel-body {
  border-color: #ff6666 !important;
  background: none !important;
}
.bg_blue .panel-primary {
	border: 0 solid;
	-moz-border-radius: 5px !important;
	-webkit-border-radius: 5px !important;
	border-radius: 5px !important;
}
.bg_blue .panel-primary > .panel-body {
  border-color: #ff6666 !important;
  background: none !important;
}
.bg_blue .well {
	margin-top:20px;
	padding:10px 20px;margin-bottom:20px;background-color:#fff;border:0 solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 0 0 rgba(0,0,0,.05);box-shadow:inset 0 0 0 rgba(0,0,0,.05)}

.bg_gray .kakomi,
.bg_blue .kakomi {
  border-color: #f1f1f1 !important;
  background: #fff !important;
	border: 0 solid;
}
.bg_white {
	background-color: #fff;
	padding: 40px 0 50px 0;
}
.bg_blue {
	background-color: #d2e9f8;
	padding: 40px 0 50px 0;
}
.bg_blue .item {
	background-color: #fff;
	padding: 1rem;
}
.bg_blue .cat-list-border {
  border-bottom: 0 solid #ddd;
	margin: 0;
}
.bg_blue .cat-list-border p {
	margin: 1rem 0 -2rem 0;
}
.bg_blue .cat-list-border figure {
	margin: 0.5rem 2rem -0.5rem 0.5rem ;
}
.bg_blue h2.makimono {
	background-image: url("img/makimono.svg");
	background-position: top;
	background-size: 280px;
	background-repeat: no-repeat;
	text-align: center;
	background-color: transparent;
	color: #333;
	padding: 108px 0 50px 0;
	margin-top: -100px;
	font-size: 1.8rem;
}

@media (max-width:900px) {
.bg_gray,
.bg_white,
.bg_blue {
	padding: 10px 0 20px 0;
}
.bg_blue h2.makimono {
	font-size: 1.4rem;
	background-size: 240px;
	padding: 95px 0 50px 0;
	margin-top: -40px;
}
}

/* セクション背景 */

.img_b_w {
	background-color: #fff;
	padding: 2rem;
	border-radius: 0.5rem;
}

/* === 内部ページ用（旧デザインからコピー）============================== */

/*ガス機器*/


.gaskiki-detail {
	padding:30px;
	background-color: #fff;
	margin-top: 30px;
	margin-bottom: 30px;
}

@media (min-width:600px) {
.gaskiki-detail .layout {
  display: grid;
  gap: 30px;
}

.gaskiki-detail .text {
  grid-column: 2/12;
  grid-row: 1/2;
}

.gaskiki-detail .photo {
  grid-column: 1/1;
  grid-row: 1/2;
	text-align: center;
}
}

.gaskiki-detail .photo {
	text-align: center;
}

.gaskiki-detail dl {
	padding-top:20px;
}

.gaskiki-detail dl dt {  
	padding: 20px;
	clear: left;
	float: left;
	width: 130px;
	margin:0 0 0 0;
	border-bottom: 1px dotted #ccc;

}  
.gaskiki-detail dl dd {  
	overflow:hidden;
	margin:0 0 0 130px;  
	padding:20px;
	background:#fff;
	border-bottom: 1px dotted #ccc;
}  

	
/*次世代エネルギーの活用*/

.energy-kakomi {
	border:2px solid #66cc33;
	padding:0 20px 20px 20px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	overflow:hidden;
}

.energy-kakomi .box {
	background:#dff7ff;
	border:0 solid;
	overflow:hidden;
	padding-bottom:0px;
	margin-bottom:0px;
}

.energy-kakomi .box h4 {
	background:#fff;
	border:0 solid;
	color:#339900;
	margin-top:0px;
	margin-bottom:0px;
	padding:7px 10px;
	text-align:center;
}
.energy-kakomi .box a.btn-default {
	border:0 solid;
	color:#fff;
	background:#ff9900;
}
.energy-kakomi .box a.btn-default span {
	float:left;
	color:#fff;
}
.energy-kakomi .box a.btn-default:hover {
	background:#ffcc66;
}

h3.energy-tit {
	background:#66cc33;
	color:#fff;
	border-left:0 solid;
}
.energy-point {
	font-weight:bold;
	color:#ff6600;
	margin-top:20px;
}
h4.energy-subtit {
	color:#339900;
	border-top:2px dotted #66cc33;
	padding-top:10px;
	margin-top:5px;
	font-size:128%;
}

/*サポート*/

a.btn-ryoukin:link,
a.btn-ryoukin:visited {
	background:#fff;
	border:0 solid;
	border:1px solid #ccc;
	padding:15px 10px;
	text-align:center;
}
a.btn-ryoukin:hover {
	color:#ff0000;
	background:#fff;
	text-decoration:none;
}

/*リフォーム*/

h2.reformp-tit {  
	padding:15px 20px;
	background:#669966;
	border:0 solid;
	color:#fff;
	margin-bottom:0;
}  
.reform-box {  
	padding:10px 20px;
	background:#fff7dc;
}  
.reform-box img.photo {  
	border:5px solid #fff;
}  
.reform-box h3 {  
	padding:10px 15px;
	background:#fff;
	color:#cc9966;
	font-size:105%;
	border-left:3px solid #f4e3c5;
}  
.reform-box .pack-tit {  
	font-weight:bold;
	font-size:100%;
	color:#663300;
}  

.reform-box .col-xs-8 h3 {  
	margin-top:20px;
	line-height:1.5;	
}  
.reform-omakase {  
	padding:10px 30px;
	background:#ffcc33;
}  

h2.flamme-tit {  
	background:#ff9933;
	padding:15px 10px;
	color:#fff;
	border:0 solid;
	font-size:132%;
}  
h2.loan-tit {  
	background:#99cc33;
	padding:15px 10px;
	color:#fff;
	border:0 solid;
	font-size:132%;
}  

.reform-qa-list {  
	border:10px solid #edead1;	
	padding:10px 20px 10px 20px;
	margin:20px 0 0 0;
}  
.reform-qa-list ul {  
	padding:0;
	margin:0;
	list-style-type:none;
	list-style-image:none;
}  
.reform-qa-list ul li {  
	padding:5px;
}  
.reform-qa-list ul span {  
	color:#339900;
	font-weight:bold;
}  
.reform-qa-list ul li+li {  
	border-top:1px dashed #ccc;
}  

.reform-qa {  
	padding:20px 20px 10px 20px;
	margin:20px 0 0 0;
	background: #fff;
}  
.reform-qa hr {  
	margin:10px 0 0 0;
	border-color:#ccc;
	border-style:dashed;
}  

.reform-qa h3 {  
	padding:0;
	margin:0;
	line-height:1.5;	
	font-size:115%;
	background:none;
	border:0 solid;
}  

.qa-q {  
	border:0 solid;
	line-height:1.5;	
	padding:0;
	margin:0;
	color:#339900;
	font-size:28px;
	font-weight:bold;
}  
.qa-a {  
	color:#ff9900;
	font-size:18px;
	font-weight:bold;
}  
.qa-arrow span {  
	color:#999;
	font-size:22px;
}  
h4.qa-midashi {  
	color:#ff6600;
	line-height:1.5;	
	padding:10px;
	background:#fdf0d6;
}  

h2.sekourei-tit {  
	padding:10px 15px;
	background:#cc3333;
	border:0 solid;
	color:#fff;
}  
.sekourei-box {  
	padding:20px 20px 10px 20px;
	background:#f8f5e7;
	margin-bottom:20px;
}  
.sekourei-box .col-sm-9 {  
	margin-left:0;
	padding-left:0px;
}  
.sekourei-box .photo {  
	padding-left:-0px;
}  

.sekourei-box p.concept {  
	margin:0;
	padding:5px 10px 5px 20px;
	border-left:10px solid #ffcc00;
	font-size:100%;
	font-weight:bold;
}  
.sekourei-box p.catch {  
	margin:0;
	padding:5px 10px;
	color:#660000;
	font-size:120%;
}  
.sekourei-box .voice {  
	margin:15px 0 10px 0;
	padding:10px 20px;
	background:#fff;	
}  
.sekourei-box .voice-tit {  
	margin:0;
	padding:5px 0;
	border-bottom:1px solid #ddd;
	font-size:108%;
	font-weight:bold;
}

.letsreform-list {
	list-style-type: none !important;
	margin: 10px 0 0 0;
	background-color: #f6edbe;
	padding: 5px 15px;
}
.letsreform-list ul {
	list-style-type: none !important;
	margin: 10px 0 0 0;
	padding: 0;
}

.letsreform-list ul li {
	margin: 0;
	padding: 0;
	color: #404040;
	border-left: 6px solid #339933;
	border-bottom: 2px solid #ddd;
	background-color: #fff;
	margin-bottom: 10px;
	line-height: 1.5;
	padding: 0.7em;
	display:block;
}


/* 会社案内 */

.profile {
	margin:20px 0 0 0;
	background-color:#0c5daa;
	color:#fff;
	padding:10px 30px 30px 30px;
	line-height:2.4em;
}


.profile h2 {
	background-image:none;
	padding-left:0;
}

.access-setumei ul {
	margin:0 0 0 0;
}


/* 業務・工業用のお客様 */

.suzu-midashi {
	overflow:hidden;
}

.suzu-midashi span {
	float:left;
	margin:10px 20px 0 0 ;
}

.suzu-midashi div {
	float:left;
	margin:10px 20px 0 0;
	max-width: 10%
}

.suzu-midashi h4 {
	float:left;
	max-width: 90%
}

/* ガス保安のお話 */

.keihouki p {
	margin:0 0 5px 0;
}

.keihouki .row .midashi {
	text-align:right;
}

/* 料理教室 */


.ryouri-kakomi {
	 background-color:#fadf74;
	padding:50px 20px 40px 20px;
}

.ryouri-kakomi .box {
	border:0px solid #ccc;
	padding:10px 10px;
	margin-top:0px;
	margin-bottom:10px;
	background-color:#fffae5;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.ryouri-kakomi .box p {
	font-size:88%;
}

.ryouri-kakomi .box h3 {
	border-left:0px solid #ccc;
	border-top:0px solid #ccc;
	border-right:0px solid #ccc;
	border-bottom:0px solid #ccc;
	padding:0px;
	margin:0;
}
.ryouri-kakomi .box h3 a {
	border-left:8px solid #ff6633;
	border-top:0px solid #ccc;
	border-right:0px solid #ccc;
	border-bottom:0px solid #ccc;
	padding:10px;
	margin:0;
	background-color:#edd7af;
	display:block;
	color:#660000;
}
.ryouri-kakomi .box h3 a:hover {
	filter: alpha(opacity=80);
	opacity: 0.8;
}

.ryouri-kakomi table {
	margin-bottom:10px;
	border:0px solid !important;
}

.ryouri-kakomi .table-bordered {
	background-color:#fff;
}
.ryouri-kakomi .table-bordered tr {
	border-bottom:2px solid #e4ad5e !important;
	background-color:#fffae5;
}
.ryouri-kakomi .table-bordered th {
	background-color:#e4ad5e;
	border:0px solid !important;
	font-size:86%;
	color:#fff;
}
.ryouri-kakomi .table-bordered th.border-r {
	border-right:1px solid #cc9966 !important;
}
.ryouri-kakomi .table-bordered td {
	background-color:#fffae5;
	border:0px solid #cc9966 !important;
	letter-spacing:0em;
	padding:8px !important;
}
.point-icon {
	font-size:80%;
	letter-spacing:0;
	color:#fff;
	padding:2px 7px;
	line-height:2;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
.takeout {
	background-color:#3366ff;
}
.sun {
	background-color:#66cc00;
}
.tokubetu {
	background-color:#cc3333;
}
.ryouri-kakomi .table-bordered td.photo {
	border-right:1px dashed #cc9966 !important;
	width:10%;
	padding:3px !important;
	position:relative;
	overflow:hidden;
	background:none;
}
.ryouri-kakomi .table-bordered td.photo img {
	width:100%;
}
.ryouri-kakomi .table-bordered td.photo span {
	position:absolute;
	top:3px;
	right:3px;
	font-size:86%;
	padding:0 3px;
	font-weight:bold;
	background-color:#993300;
	color:#fff;
}
.ryouri-kakomi .table-bordered td.tit {
	border-right:1px dashed #cc9966 !important;
}
.ryouri-kakomi .table-bordered td.tit em {
	color:#660000;
}
.ryouri-kakomi .table-bordered td.tit .k-number {
	background-color:#993300;
	color:#fff;
	padding:2px 5px;
}
.ryouri-kakomi .table-bordered td.nittei {
	border-right:1px dashed #cc9966 !important;
	width:16%;
	font-size:86%;
}
.ryouri-kakomi .table-bordered td.jikan {
	border-right:1px dashed #cc9966 !important;
	width:18%;
	font-size:86%;
}
.ryouri-kakomi .table-bordered td.more {
	width:8%;
	display: block;
	vertical-align: middle;
}
.ryouri-kakomi .table-bordered td.more .btn-default {
	background:#ff6600;
	border:1px solid #ff6600;
	color:#fff;
	font-weight:bold;
	padding:5px 12px 5px 3px;
	display: block;
	width: 80px;
	text-align: center;
}
.ryouri-kakomi .table-bordered td.more .btn-default:hover {
	background:#fff;
	border:1 solid #ff6600;
	color:#ff6600;
	font-weight:bold;
}
.ryouri-kakomi .table-bordered td.more .btn-default:hover::after{
    border-top: 2px solid #f19e41;
    border-right: 2px solid #f19e41;
}
.ryouri-kakomi .boxlink {
}
.ryouri-kakomi .boxlink:hover {
	cursor:pointer;
	filter: alpha(opacity=100);
	opacity: 1;
}

.ryouri-main {
	background-image:url("img/flamme/ryouri_main_bg.jpg");
	padding:40px 0;
	margin-bottom:20px;
}
.ryouri-main-kakomi {
	background-color:#fff;
	padding:50px;
}
.ryouri-main-kakomi .layout_c5-7 .text {
  grid-column: 1/8;
  grid-row: 1/2;
	text-align:center;
}

.ryouri-main-kakomi .layout_c5-7 .photo {
  grid-column: 8/12;
  grid-row: 1/2;
	text-align: center;
}
.ryouri-main-kakomi h1 {
	color:#ff6600;
	font-size:180%;
	margin:0 0 10px 0;
	line-height:1.5;
}
.ryouri-main-kakomi h1::before {
  height: 0;
  background: #fff !important;
}
.ryouri-main-kakomi p {
	margin:10px 0 10px 0;
}
.ryouri-main-kakomi p.kouza-no {
	font-size:100%;
	font-weight:bold;
	margin-top:10px;
}
.ryouri-main-kakomi p.kouza-no span {
	font-size:143%;
	font-weight:normal;
	margin-right:5px;
}
.ryouri-main-kakomi .table {
	margin-top:20px;
}
.ryouri-main-kakomi .table {
	border-bottom:1px dotted #cc9a67 !important;
}
.ryouri-main-kakomi .table td {
	border-top:1px dotted #cc9a67 ;
}
.ryouri-main-kakomi .table td.midashi {
	width:20%;
}
h2.ryouri-tit {
	background:none;
	padding:0 !important;
	margin:30px 0 20px 0;
	color:#660000;
}

.ryouri-table .table-bordered td {
	border:1px solid #cc9a67 !important;
}
.ryouri-table .table-bordered td.midashi {
	border:1px solid #cc9a67 !important;
	background:#fff1d5 !important;
	color:#8b4f14;
	width:15%;
}

.ryouri-kakomi .kouza-kakomi {
	 background-color:#fffae5;
	padding:10px 20px 30px 20px;
	margin-bottom:10px;
}
.ryouri-kakomi .kouza-kakomi .row {
	border-bottom:2px dotted #e5ad5e;
	margin-left:0px;
	margin-right:0px;
	padding-bottom:10px;
	padding-top:20px;
}
.ryouri-kakomi .kouza-kakomi p.photo {
	margin:0 0 10px 0;
	border:1px solid #ccc;
	padding:4px;
	background:#fff;
}
.ryouri-kakomi .kouza-kakomi h2 {
	background:none;
	padding:0 !important;
	margin:0px;
	color:#660000;
}

.ryouri-photo {
	width:240px;
	margin:0 auto;
	position:relative;
}
.ryouri-photo span {
	position:absolute;
	top:0px;
	right:0px;
	font-size:100%;
	padding:0 5px;
	font-weight:bold;
	background-color:#993300;
	color:#fff;
}

.ryouri-subphoto ul {
	margin:0 0 10px 0;
	padding:0;
	list-style-type:none;
	list-style-image:none;
	text-align:center;
}
.ryouri-subphoto ul li {
	display: inline-block;
	width:240px;
	position:relative;
	overflow:hidden;
	margin:10px 10px;
}
.ryouri-subphoto ul li img {
	width:240px;
}
.ryouri-subphoto ul li span {
	position:absolute;
	top:0px;
	right:0px;
	font-size:100%;
	padding:0 5px;
	font-weight:bold;
	background-color:#993300;
	color:#fff;
}
.content p.ryourinavi-btn a {
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	background:#fff;	
	display:block;
	color:#660000;
	padding:0 20px;
	line-height:40px;
}

.content p.ryourinavi-btn a span {
	float:right;
	color:#ff6633;
	line-height:40px;
}
.content p.ryourinavi-btn a:hover {
	filter: alpha(opacity=80);
	opacity: 0.8;
}
.content h2.ryourinavi-tit {
	background:#f9de7b;
	padding:20px;
	margin-bottom:0;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   -webkit-border-top-left-radius: 10px;
   -webkit-border-top-right-radius: 10px;
   -moz-border-radius-topleft: 10px;
   -moz-border-radius-topright: 10px;
	color: #330000;
}
.ryourinavi-kakomi {
	margin:0 0 1em 0;
	padding: 20px;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	border-left: 1px solid #CCC;
   -webkit-border-bottom-left-radius: 10px;
   -webkit-border-bottom-right-radius: 10px;
   -moz-border-radius-bottomleft: 10px;
   -moz-border-radius-bottomright: 10px;
}
.ryourinavi-kakomi .ryourinavi-point {
	overflow: hidden;
}
.ryourinavi-kakomi .photo {
	float: left;
	width: 10%;
	text-align: center;
}
.ryourinavi-kakomi .text {
	float: right;
	width: 88%;
}
.ryourinavi-kakomi ul {
	margin:0 0 1em 0;
}
.ryourinavi-kakomi p {
	margin:0 0 1em 0;
}
.content .ryourinavi-kakomi h3 {
	background:#fff;
	color:#660000;
	padding:10px 0;
	margin:0 0 20px 0;
	border-left:0 solid;
	border-bottom:2px dotted #cc9966;
}
.content .ryourinavi-kakomi .photo {
	margin:0 0 0 0;
	border:1px solid #ccc;
	padding:4px;
	background:#fff;
}

.content .ryourinavi-kakomi .qa-arrow span {  
	color:#ff6633;
	font-size:22px;
}

/* 2019/01/30 追加 */ 

a.btn-ryouriform {
	background:#f19e41;
	border:1px solid #f19e41;
	color:#fff;
	font-weight:bold;
	padding: 10px;
	margin-top: 8px;
	margin-bottom: 8px;
	border-radius: 50px;
}
a.btn-ryouriform:link {
	color:#fff;
}
a.btn-ryouriform:visited {
	color:#fff;
}
a.btn-ryouriform:hover {
	background:#fff;
	border:1 solid #f19e41;
	color:#f19e41;
	font-weight:bold;
}

a.btn-ryouriform:hover::after{
    border-top: 2px solid #f19e41;
    border-right: 2px solid #f19e41;
}
/* HAPPY ガス de クッキング */ 

.cooking-kakomi {
	padding:0 20px 20px 20px;
	background:#ffcccc;
}
.cooking-kakomi .aka {
	color:#e9020f;
}
.cooking-kakomi .kakomi {
	padding:20px 20px 5px 20px;
	background:#fff;
	border:0 solid;
	margin:20px 0 0 0;
}
.cooking-kakomi .kakomi h2 {
	margin:0 0 20px 0;
	background-image: url("img/icon_h2_cooking.png");
	background-repeat: no-repeat;
	background-position: center left;
	background-size: 30px;
	padding-left: 2.8rem;
	color: #000;
	background-color: transparent;
}
.cooking-kakomi .kakomi h3 {
	font-size: 113%;
	font-weight: bold;
	color: #000;
	padding: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
	border-left:8px solid #ff9999;
	background:#fdf2e6;
}

.recipe-kakomi {
	background-color:#fdf7e5;
	margin-top: 2rem;
	padding:50px 0 40px 0;
}

.recipe-kakomi .box {
	border:0px solid #ccc;
	padding:20px 20px;
	margin-top:0px;
	margin-bottom:20px;
	background:#fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	font-size: 90%;
}
.recipe-kakomi .box p.photo {
	margin-top:5px;
	margin-bottom:0px;
}
.recipe-kakomi .box p {
	margin-top:0px;
	margin-bottom:10px;
}
.recipe-kakomi .box h3 {
	background-color:#ffd9b0;
	color:#660000;
	margin-top:0px;
	margin-bottom:10px;
	padding: 10px;
	border-bottom:0 solid;
	border-left:5px solid #ff6633;
	line-height:1.6;
}
.recipe-kakomi .box .photo img {
	border:1px solid #ccc;
	padding:4px;
}
.recipe-kakomi .btn-default,
.recipe-kakomi a.btn-default:link,
.recipe-kakomi a.btn-default:visited {
	color:#ff2513;
	background:#fff;
	border:1px solid #ff2513;
	padding:5px 10px;
	text-align:center;
}
.recipe-kakomi .btn-default span {
	color:#ff2513 !important;
}
.recipe-kakomi .btn-default:hover,
.recipe-kakomi a.btn-default:hover {
	background:#ffebe9;
	text-decoration:none;
}

.page-nb .pagination .active a {
	color:#fff;
	background-color:#0c5daa;
	border-color:#0c5daa;
}
.page-nb .pagination .active a:hover {
	color:#fff;
}
.page-nb .pagination a {
	color:#0c5daa;
}
.page-nb .pagination a:hover {
	color:#0c5daa;
}

a.btn-recipe {
	color:#339933 !important;
	background:#fff;
	padding:10px 10px;
	border:2px solid #99cc66;
	text-align:center;
	font-size:113%;
	-moz-border-radius: 50px !important;
	-webkit-border-radius: 50px !important;
	border-radius: 50px !important;
}
a.btn-recipe:hover {
	background:#dff1cd;
	text-decoration:none;
}


/* 共通 */ 

.tables-borderless td, .tables-borderless th {
    border: none !important;
}

.text-middle {
	vertical-align: middle !important;
}

sup,
sub {
	font-size: 80%
}

.googlemap {
margin-top:20px;
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.googlemap iframe,
.googlemap object,
.googlemap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.googlemap.flamme_map {
margin-top:20px;
position: relative;
padding-bottom: 38.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.googlemap iframe,
.googlemap object,
.googlemap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.videoarea {
  position: relative;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  padding-top: 69px;
  padding-bottom: 50%;
  overflow: hidden;
}
.videoarea iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.well {
	margin-top:20px;
	padding:10px 20px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,.15)}.well-lg{padding:24px;border-radius:6px}

.content a span.glyphicon {
	color:#1fb9fd;
}

.panel-default > .panel-heading {
  background-color: #fff;
font-size:105%;
}
.panel-default > .panel-heading a {
display:block;
}
.panel-default > .panel-heading a:hover {
display:block;
}
.panel-default > .panel-body {
  background-color: #f6f6f6;
}

.panel-info {
  border-color: #ff6666 !important;
	border-top-left-radius: 0.6rem !important;
	border-top-right-radius: 0.6rem !important;
	border-bottom-left-radius: 0.6rem !important;
	border-bottom-right-radius: 0.6rem !important;
}
.panel-info > .panel-heading  {
font-size:105%;
}
.panel-info > .panel-heading a {
display:block;
color:#fff;
}
.panel-info > .panel-heading a span {
color:#fff;
}
.panel-info > .panel-heading a:hover {
color:#ffdddd;
}
.panel-info > .panel-heading {
	border-top-left-radius: 0.6rem !important;
	border-top-right-radius: 0.6rem !important;
  color: #fff;
  background-color: #ff6666;
  border-color: #fff;
}
.panel-info > .panel-body {
  border-color: #ff6666 !important;
  background-color: #ffeeee;
	border-radius: 0.6rem !important;
}

.panel-warning {
	border: 1px solid #ebdd97 !important;
	border-radius: 0.6rem;
}
.panel-warning > .panel-heading {
  background-color: #fffde1;
  border-color: #fff;
	border-top-left-radius: 0.6rem;
	border-top-right-radius: 0.6rem;
}
.panel-warning > .panel-body {
  border-color: #ebdd97 !important;
}

.panel-body .table {
	margin:10px 0 0 0;
	font-size:90%;
	border-bottom:0 solid !important;
	border-top:1px solid #ddd !important;
}


/*PDFファイルのアイコン*/
a[href $='.pdf'] {   
    padding-right: 30px;
    background: transparent url("img/pdficon_small.png") no-repeat right top;
	padding-top:5px;
	padding-bottom:5px;
}

/* フォーム */

.form-control {
  display: block;
  width: 95%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border-radius: 0.2rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form_line {
	border-top: 5px solid #ccc;
}

.aka {
	color: #ff0000;
}

.navbar-bg {
	background-position: center bottom;
}

.content-form {
	max-width: 1200px;
	margin: 0 auto;
}

.table-borderbottom {
	border-bottom: 1px solid #ddd;
}

.table-middle td {
	vertical-align : middle !important;
}

.dl-form dt {
	padding:5px 10px 5px 10px;
	margin-top:20px;
	margin-bottom:20px;
	border-bottom: 1px solid #dedede;
}

.dl-form dd {
	padding:5px 10px 5px 10px;
}

.dl-form dd .form-check-list label {
	margin-bottom: 10px;
}

.content-form .inline {
	display: inline;
}

.content-form form .wide {
	max-width: 500px;
}

.content-form form .middle {
	max-width: 300px;
}

.content-form form .narrow {
	max-width: 120px;
}

.content-form form .mini {
	max-width: 50px;
}

.content-form .error {
	margin-top: 6px;
}

.btn-form {
	margin-bottom: 20px;
}

.content-form a.btn-form {
	color: #fff;
}


.btn-info,
a.btn-info:link,
a.btn-info:visited {
	-moz-border-radius: 50px !important;
	-webkit-border-radius: 50px !important;
	border-radius: 50px !important;
	color:#fff;
	background:#ff6600;
	padding:20px 35px;
	text-align:center;
	font-size:124% !important;
	box-shadow: 0px 0px 0px 5px #ff6600;
	border: 2px dotted #fff;
	font-weight:bold;
}
.btn-info span {
	color:#fff !important;
}
.btn-info:hover,
a.btn-info:hover {
	color:#fff;
	background:#ff7700;
	box-shadow: 0px 0px 0px 5px #ff7700;
	text-decoration:none;
}

/*NEWS */

.top-news {
	clear:both;
	background-color:#3399ff;
	color:#fff;
	overflow:hidden;
}

.news-ichiran {
	background-color: #fff;
	color: #333;
}

 .top-news .container {
	padding:0;
}
 .top-news a {
	color:#fff;
}
 .top-news h2 {
	font-weight:bold;
	margin:20px 0;
}
 .top-news .grio {
	float:left;
	width:290px;
}
 .top-news .newsarea {
	float:left;
	width:670px;
}
 .top-news a:hover {
	color:#ccffff;
	text-decoration:none;
}

.news-ichiran a:hover {
	color: #ff0000;
	text-decoration:none;
}

 .top-news .table td {
	border-color:#71b8ff !important;
}

.news-ichiran .table td {
	border-color: #ccc !important;
}

.top-news .table td .icon-annai {
	background:#339900;
	float:left;
	color:#fff;
	font-size:75%;
	margin-top:3px;
	margin-right:20px;
	text-align:center;
	width:60px;
	line-height:15px;
}

.top-news .table td .icon-bosyuu {
	background:#ff9933;
	float:left;
	color:#fff;
	font-size:75%;
	margin-top:3px;
	margin-right:20px;
	text-align:center;
	width:60px;
	line-height:15px;
}

.top-news .table td .icon-cyuui {
	background:#996633;
	float:left;
	color:#fff;
	font-size:75%;
	margin-top:3px;
	margin-right:20px;
	text-align:center;
	width:60px;
	line-height:15px;
}

.top-news .table td .icon-event {
	background:#9933cc;
	float:left;
	color:#fff;
	font-size:75%;
	margin-top:3px;
	margin-right:20px;
	text-align:center;
	width:60px;
	line-height:15px;
}

.top-news .table td .icon-koushin {
	background:#666666;
	float:left;
	color:#fff;
	font-size:75%;
	margin-top:3px;
	margin-right:20px;
	text-align:center;
	width:60px;
	line-height:15px;
}

.top-news .table td .icon-onegai {
	background:#3fcfb9;
	float:left;
	color:#fff;
	font-size:75%;
	margin-top:3px;
	margin-right:20px;
	text-align:center;
	width:60px;
	line-height:15px;
}

.top-news .table td .icon-otoku {
	background:#ff6699;
	float:left;
	color:#fff;
	font-size:75%;
	margin-top:3px;
	margin-right:20px;
	text-align:center;
	width:60px;
	line-height:15px;
}

.top-news .table td .icon-propane {
	background:#cc0000;
	float:left;
	color:#fff;
	font-size:75%;
	margin-top:3px;
	margin-right:20px;
	text-align:center;
	width:60px;
	line-height:15px;
}

.top-news .table td .icon-toshi {
	background:#0066cc;
	float:left;
	color:#fff;
	font-size:75%;
	margin-top:3px;
	margin-right:20px;
	text-align:center;
	width:60px;
	line-height:15px;
}

 .top-news .table td.date {
	font-size:75%;
	width:15%;
	padding-top:10px;
}
 .top-news .table {
	border-bottom:1px solid #ccc !important;
	margin-bottom:0;
}
 .top-news .table td {
	line-height:1.6 !important;
}

 .top-news .btn-default,
 .top-news a.btn-default:link,
 .top-news a.btn-default:visited {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color:#fff;
	background:#0066cc;
	border:0 solid;
	padding:15px;
}
 .top-news .btn-default:hover,
 .top-news a.btn-default:hover {
	color:#0066cc;
	background:#fff;
	text-decoration:none;
}

/*トピックス*/

.topics .box {
	overflow:hidden;
	border: 1px solid #ccc;
	padding: 1rem;
	margin-bottom: 1rem;
	background-color: #fff;
}

.topics img {
	width:200px;
}

.topics h2 {
	margin:40px 0;
	padding:0;
	border:0 solid;
	font-size:150%;
	background:none;
}
.topics h3 {
	margin:10px 0 -15px 0;
	padding:0 0 1rem 0;
	border:0 solid !important;
	font-size:150%;
	line-height:1.8;
}
.topics h3 a {
	color:#000 !important;
}
.topics .text-right {
	margin:10px 0 0 0;
}
.topics p {
	margin:5px 0 0 0;
}
.topics p.pull-left {
	margin:0 20px 0 0;
}
.topics h3 a:hover {
	color:#ff0000 !important;
}

/* イベント報告 */
.cat-houkoku {
	color:#fff;
	background:#ff6600;
	font-size:88%;
	padding:5px;
	font-weight:bold;
}

/* イベント告知 */
.cat-kokuchi {
	color:#fff;
	background:#ff0000;
	font-size:88%;
	padding:5px;
	font-weight:bold;
}

/* フラムからのお知らせ */
.cat-flamme {
	color:#fff;
	background:#eec400;
	font-size:88%;
	padding:5px;
	font-weight:bold;
}

/* キャンペーンのお知らせ */
.cat-campaign {
	color:#fff;
	background:#0000ff;
	font-size:88%;
	padding:5px;
	font-weight:bold;
}

/* まかせ富吉 */
.cat-reform {
	color:#fff;
	background:#339999;
	font-size:88%;
	padding:5px;
	font-weight:bold;
} 

/* 告知 */
.cat-annai_topics {
	color:#fff;
	background:#339900;
	font-size:88%;
	padding:5px;
	font-weight:bold;
}

.topics .small {
	font-size:75%;
}
.topics .btn-default,
.topics a.btn-default:link,
.topics a.btn-default:visited {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color:#fff;
	background:#888;
	border:0 solid;
	padding:15px;
}
.topics .btn-default:hover,
.topics a.btn-default:hover {
	color:#fff;
	background:#aaa;
	text-decoration:none;
}

/* 料金 */

.ryoukin-btn a {
	background-color:#fff;
	display:block;
	color:#433b3b !important;
	padding:15px 30px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 50px;
	border: 1px solid #433b3b;
}
.ryoukin-btn a:hover {
	background-color:#433b3b;
	color:#fff !important;
}
.ryoukin-btn a[href $='.pdf'] {   
    padding-right: 30px;
    background-image: url("img/pdficon_small.png") !important;
    background-position: 96% 48% !important;
}
.ryoukin-btn.list_c2 .item {   
	margin: -1.5rem 0 0 0 !important;
}
a.toshigas-btn[href $='.pdf'] {   
    padding-right: 40px;
    background: #fff url("img/pdficon_small.png") no-repeat 95% center;
}
a.btn.toshigas-btn[href $='.pdf']::after{
    border-top: 0 solid #fff;
    border-right: 0 solid #fff;
}
a.btn.toshigas-btn[href $='.pdf']:hover::after{
    border-top: 0 solid #fff !important;
    border-right: 0 solid #fff !important;
}
/* Wordpress メディア */

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.pull-right,
.alignright {
	padding-left: 20px;
	float: right !important;
}
.pull-left,
.alignleft {
	padding-right: 20px;
	float: left !important;
}

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

img.alignright {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
 
img.alignleft {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.alignright {
	padding-left: 0;
	float: none !important;
}
.alignleft {
	padding-right: 0;
	float: none !important;
}

}

/* ガスのある暮らし */

.kurashi_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.kurashi_box .column {
  width: 50%;
	text-align: center;
  position: relative;
}
.kurashi_box h2.mds_c {
	margin: 2rem 0;
}

	@media only screen and (min-width : 800px){
.kurashi_box .inner {
	width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
	padding: 6rem 0;
}
.kurashi_box .inner {
	background-size: 20% !important;
}
		
.kurashi_box h2 {
	margin-top: 0 !important;
}
		
}

.kurashi_box .column .kurashi_btn {
	margin-top: 2rem;
}

	@media only screen and (max-width : 800px){
.kurashi_box {
display: flex;
flex-direction: column;
}
.kurashi_box .column {
width: 100%;
}

.kurashi_box img {
width: 100%;
object-fit: contain;
}

.kurashi_box:nth-child(even) {
flex-direction: column-reverse;
}
.kurashi_box .column .kurashi_btn {
	margin-bottom: 4rem;
}
}

/* ショールーム */

.showroom_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.showroom_box .column {
  width: 50%;
  position: relative;
	background-image: url("images/showroom/flamme_logo.svg");
	background-position: top left;
	background-repeat: no-repeat;
	background-size:90%;
}
.showroom_box .text {
	margin: 5rem;
}

a.showroom-btn {
	margin: 2rem 0;
	color: #333 !important;
}
a.showroom-btn h3 {
	font-weight: normal;
font-family: 'Zen Maru Gothic', sans-serif;
	position: relative;
	margin-bottom: 1rem;
	display: inline-block;
}
a.showroom-btn h3::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #000000;
bottom: -1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}
@media (min-width:600px) {
a.showroom-btn:hover h3::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
transform-origin: left top; /*左から右に向かう*/
}
a.showroom-btn:hover img {
  transform:scale(1.2,1.2);
  transition:1s all;
}
}

a.showroom-btn:hover {
	margin: 2rem 0;
	color: #333 !important;
}

.showroom-btn figure {
	border-radius: 50%;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	isolation: isolate;
	margin: 2rem 1rem 0 1rem;
	padding: 0;
}
.showroom-btn img {
	overflow: hidden;
	isolation: isolate;
	margin: 0;
	padding: 0;
}
.showroom-btn p {
	color: #777;
}

@media (max-width:600px) {
a.showroom-btn.item {
	margin: 0 0 0 0;
}
.showroom-btn figure {
	margin: 0 auto;
	max-width: 250px;
}
	.showroom-list {
		margin: 2rem 0 0 0;
	}
	.showroom-list p {
		font-size: 0.8rem;
	}
}

	@media only screen and (max-width : 1000px){
.showroom_box {
display: flex;
flex-direction: column;
}
.showroom_box .column {
width: 100%;
}
		.showroom_box .text {
	margin: 2rem;
}

}


/* 地震のとき */

ol.n_list {
  counter-reset:list;
  list-style-type:none;
  padding:0 0 0 1rem;
}
ol.n_list li {
  position:relative;
  padding: 0 0 0 30px;
  margin: 7px 0 15px 0px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
ol.n_list li:before {
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -10px;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height:30px;
  background: #ff6600;
  border-radius: 50%;
  top: 15px;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	font-weight: bold;
}


/* 追加 */

.margin_200_0 {
	margin: 200px 0 ;
}

span.glyphicon {
	width: 1.1em;
}

/* 上書き */
.checkbox-inline + .checkbox-inline {
	margin-left: 0px;
	margin-right: 10px;
}

/* 追加 */
.checkbox-inline:first-child {
	margin-right: 10px;
}

/* Pagination */

ul.pagination li.active a {
	color: #fff;
}

/* 追加 */

span.glyphicon {
	width: 1.1em;
}

/* Edit Link */

.edit-link {
  display: block;
  padding: 40px;
  clear: both;
  text-align: right;
}
.edit-link a {
  display: inline-block;
  padding: 10px 16px;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.3333333;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: #337ab7;
  border-color: #2e6da4;
}
.edit-link a:link,
.edit-link a:visited {
  color: #fff;
}
.edit-link a:hover {
  color: #fff;
  text-decoration: none;
  background-color: #286090;
  border-color: #204d74;
}

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

a.btn-landry {
	font-size: 1.6rem;
	background-color: #f18101;
	border-radius: 50px;
	margin: 4rem 0;
	color: #fff !important;
	padding: 1.5rem 5rem 1.5rem 4rem !important;
	position: relative;
}
a.btn-landry:hover {
	background-color: #eb5800;
}

td.List_Run{
	background-color: #ffbc46;
}

td.List_Err{
	background-color: #ff0000;
	color: #fff;
}

td.List_Stop{
}

td.List_Check{
	background-color: yellow;
}


  .table-laundry th,
  .table-laundry td {
    border: 1px solid #0e9ce7 !important;
	padding:10px !important;
	vertical-align:middle;
	line-height:1.6 !important;
  }
  .table-laundry th {
	background:#0c5daa;
	color:#fff;
    text-align:center;
  }
  .table-laundry {
    border: 1px solid #0e9ce7 !important;
  }
  
/* カード */
.card {
  margin: 1.5rem 0;
  border:2px solid #dedede;
  background-color: #fff;
}

.card_body {
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

.card_title {
  font-size:120%;
  font-weight:bold;
  color:#000;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.card_body p {
  margin-top: 0;
  margin-bottom: 0;
}
	
/* PC非表示 */
	
	.visible-xs {
		display: none;
	}
  

@media (max-width:1400px) {

	header {
		margin-top: 1rem;
	}
	header .container {
		padding: 0;
	}
.site_title {
	    float: none;
	text-align: center;
	margin-bottom: 1rem;
}
    .main_menu {
	    float: none;
		text-align: center;
    }

    .main_menu ol {
		overflow: hidden;
		margin: 0;
		padding: 0;
    }


    .main_menu li a {
    }

    .main_menu li.emergency a {
        display: block;
        padding: 15px 0 25px 0;
		color: #fff !important;
		width: 100%;
		line-height: 1.5;
		border-radius: 0%;
		margin-left: 0;
	}
    .main_menu li.emergency a:hover {
		background-color: #cc0000;
	}
	.container {
		padding: 0 1rem;
	}
	
.content_area {
  	grid-template-columns: 1fr;
}
}

@media (max-width:850px) {
	

.site_title {
	float: none;
	text-align: center;
	margin-top: 70px;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	width: 60vw;
}

    .main_menu li {
		margin-bottom: -3rem;
		line-height: 1;
    }
	
    .main_menu li a {
		line-height: 1.5;
		height: 50px;
    }
	
	.pankuzu_area ul {
		line-height: 1.5;
	}
	
	dl.news_list {
  display: inline-block;
	
}
dl.news_list dt {
    width: 100%;
	padding: 0.5rem 0 0 0;
	flex-wrap: nowrap;
}
dl.news_list dd {
    width: 100%;
	margin: 0;
}

dl.news_list .badge {
	float: none;
	margin-left: 10px;
}
	
footer {
	padding: 1.5rem;
		
	}		
footer a {
	color: #fff !important;
}
	
footer .list_c2 {
  	grid-template-columns: 1fr;
		
	}	
	
footer ol li {
	display: block;
	margin: 0 0.5rem 0.5rem 0.5rem;
	text-align: center;
}	

.cat-list.list_c3 {
  	grid-template-columns: repeat(2, 1fr);
}
	
	/* スマホ表示 */
	
	.visible-xs {
		display: inline;
	}
	
	/* スマホ非表示 */
	
	.hidden-xs {
		display: none;
	}
	
	/* テーブルスクロール */
	
.table-responsive table{
width:100%;
}
.table-responsive{
overflow-x: scroll;
white-space: nowrap;
}

.gaskiki-detail {
	border-bottom:1px dotted #ccc;
	padding:10px;
}

.gaskiki-detail dl {
	padding-top:0px;
}

.gaskiki-detail dl dt {  
	padding: 10px 10px 0 10px;
	clear: left;
	float: none;
	width: auto;
	margin:0 0 10px 0;
	border-bottom: 0 solid;

}  
.gaskiki-detail dl dd {  
	padding: 0 10px 15px 10px;
	overflow:hidden;
	margin:0 0 0 0;  
}  
 
.qa-q {  
	font-size:18px;
}  
.qa-a {  
	color:#ff9900;
	font-size:18px;
}  
.sekourei-box {  
	padding:20px 20px 10px 20px;
	background:#f8f5e7;
	margin-bottom:20px;
}  
.sekourei-box .col-sm-9 {  
	margin-left:0;
	padding-left:0px;
}  

.sekourei-box p.concept {  
	margin:0;
	padding:5px 10px 5px 20px;
	border-left:10px solid #ffcc00;
	font-size:115%;
	font-weight:bold;
}  
.sekourei-box p.catch {  
	font-size:115%;
}  
.sekourei-box .photo {  
	margin:auto;
	padding:0 10px;
}  
.list-group-item {
font-size:100%;
}
.access-setumei ul {
	margin:0 0 20px 0;
}

.keihouki .row .midashi {
	text-align:center;
}

/* 料理教室 */


.ryouri-kakomi {
	border: 10px solid #fadf74;
	padding:10px 0 0 0;
	background: #fffae5;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 0;
}

.ryouri-kakomi table {
	border:0px solid !important;
	display: block;
	margin:0 auto;
	width: 96%;
}

.ryouri-kakomi .table-bordered {
	display: block;
	background-color:#fffae5;
}
.ryouri-kakomi .table-bordered tr {
	display: block;
	width:93% !important;
}
.ryouri-kakomi .table-bordered th {
	display: none;
}
.ryouri-kakomi .table-bordered th.border-r {
	border-right:0px solid !important;
}
.ryouri-kakomi .table-bordered td {
	display: list-item;
	border: none;
	list-style-type:none;
	margin:0 !important;
	padding:5px 10px !important;
	width:100% !important;
}
.ryouri-kakomi .table-bordered td.photo {
	border-right:0px dashed !important;
	width:auto;
}
.ryouri-kakomi .table-bordered td.tit {
	border-right:0px dashed !important;
	width:auto;
}
.ryouri-kakomi .table-bordered td.nittei {
	border-right:0px dashed !important;
	width:auto;
	font-size:86%;
}
.ryouri-kakomi .table-bordered td.nittei br {
	display:none;
}
.ryouri-kakomi .table-bordered td.jikan {
	border-right:0px dashed !important;
	width:auto;
	font-size:86%;
}
.ryouri-kakomi .table-bordered td.more {
	width:auto;
	padding:10px !important;
}
.ryouri-kakomi .table-bordered td.more .btn-default {
	display:block;
	width:92%;
}
.ryouri-kakomi .table-bordered td:nth-of-type(2):before { content: "[講座名] " ;}
.ryouri-kakomi .table-bordered td:nth-of-type(3):before { content: "[日時] "; }
.ryouri-kakomi .table-bordered td:nth-of-type(4):before { content: "[時間] "; }

.ryouri-main {
	padding:20px 0;
}
.ryouri-main-kakomi {
	padding:20px;
}
.ryouri-main-kakomi .table {
	font-size:90%;
	margin-top:0px;
}
.ryouri-main-kakomi .table td.midashi {
	width:25%;
}
h2.ryouri-tit {
	background:none;
	padding:0 !important;
	margin:30px 0 20px 0;
	color:#660000;
}

.ryouri-table .table-bordered td {
	font-size:90%;
}
.ryouri-table .table-bordered td.midashi {
	border:1px solid #cc9a67 !important;
	background:#fff1d5 !important;
	color:#8b4f14;
	width:25%;
}

.ryouri-photo {
	width:auto;
	margin:10px auto 20px auto;
	position:relative;
}
.ryouri-subphoto ul li {
	width:auto;
	margin:10px auto;
}
.ryouri-subphoto ul li img {
	width:auto;
}
.ryouri-subphoto ul li span {
	position:absolute;
	top:0px;
	right:0px;
	font-size:100%;
	padding:0 5px;
	font-weight:bold;
	background-color:#993300;
	color:#fff;
}

.ryourinavi-kakomi .photo {
	float: none;
	width: 100%;
}
.ryourinavi-kakomi .text {
	float: none;
	width: 100%;
}
.box a[href $='.pdf'] {   
    padding-right: 30px;
    background: transparent url("img/pdficon_small.png") no-repeat right 0px;
	padding-top:0px;
	padding-bottom:10px;
}

.btn-info,
a.btn-info:link,
a.btn-info:visited {
	-moz-border-radius: 10px !important;
	-webkit-border-radius: 10px !important;
	border-radius: 10px !important;
	color:#fff;
	background:#ff6600;
	padding:10px 20px;
	text-align:center;
	font-size:124% !important;
	box-shadow: 0px 0px 0px 5px #ff6600;
	border: 2px dotted #fff;
	font-weight:bold;
	display:block;
}
.list_c2 ,
.list_c3 {
  	display: grid;
  	grid-template-columns: 1fr;
    gap:30px;
    flex-wrap:wrap;
}
	}
 
	/* Custom, iPhone Retina */
	@media only screen and (max-width : 320px){
 
#site-title a {
	margin:6px -40px -10px -15px;
	display:block;
	width:115px;
	text-indent:-9999px;
	outline:none;
	background-image:url("img/tit_sp1810.png");
	background-repeat:no-repeat;
	background-position: top; 
	background-size:contain; 
	border-bottom:none;
	height:50px;
	line-height:1;
	float:left;
}

.recipe-kakomi .btn-default,
.recipe-kakomi a.btn-default:link,
.recipe-kakomi a.btn-default:visited {
	color:#ff2513;
	background:#fff;
	border:1px solid #ff2513;
	padding:5px 5px;
	text-align:center;
	font-size:90%;
}

	}

.kanren-link .btn-showroomyoyaku {
	color: #fff !important;
	background-color: #996633 !important;
}

.kanren-link .btn-showroomyoyaku:hover {
	background-color: #cc9933 !important;
}