/* カテゴリ一覧 */

#ctg {
position:relative;
top:10px;
width: 100%;
margin:0 auto;*	
overflow: hidden;
}

.ctg-img {
margin:0 auto;
width:190px;
}

.ctg-container {
width:1080px;
position:relative;
overflow: hidden;
}

.ctg-container-div {
width: 19%;
display:inline-block;
position:relative;
vertical-align: top;
/*float: left;*/
border:0;
margin-top:5px;
margin-right:2px;
margin-left:2px;
margin-bottom:5px;
}

/* スタイル 個別ページ */

#sty {
position:relative;
margin-top:10px;
margin-bottom:20px;
width: 100%;
margin:0 auto;*	
}

.sty-img {
margin:0 auto;
width:190px;
}

.sty-container {
width:100%;
position:relative;
overflow: hidden;
height: 100%;
margin-top:10px;
margin-bottom:20px;
}

.sty-container-div {
width: 32%;
display:inline-block;
position:relative;
vertical-align: top;
/*float: left;*/
margin-top:5px;
margin-right:2px;
margin-left:2px;
margin-bottom:5px;
}

.sty2-container-div {
width: 48%;
display:inline-block;
position:relative;
vertical-align: top;
/*float: left;*/
margin-top:5px;
margin-right:2px;
margin-left:2px;
margin-bottom:5px;
}

/* ランキング */

#rank {
position:relative;
margin-top:20px;
margin-bottom:50px;
width: 100%;
padding-bottom:30px;
border-bottom: 0.5px solid gray;
}

.rank-img {
margin:0 auto;
width:169px;
}

.rank-container {
width:1080;
position:relative;
margin:0 auto;
overflow: hidden;
}

.rank-container-div {
width: 19%;
display:inline-block;
position:relative;
vertical-align: top;
/*float: left;*/
margin-top:5px;
margin-right:2px;
margin-left:2px;
margin-bottom:5px;
}

#line {
position:relative;
margin-top:40px;
width: 100%;
}

.line-container {
width:1080px;
position:relative;
overflow: hidden;
}

.line-container-div {
width: 49%;
display:inline-block;
position:relative;
vertical-align: top;
text-align: center; 
margin-top:5px;
margin-right:2px;
margin-left:2px;
margin-bottom:5px;
}

#howto {
position:relative;
margin-top:100px;
width: 100%;
}

.howto-container {
width:1080px;
position:relative;
overflow: hidden;
}

.howto-container-div {
width: 48%;
display:inline-block;
position:relative;
vertical-align: top;
margin-top:5px;
margin-right:2px;
margin-left:2px;
margin-bottom:5px;
}


/* 画像　右側にテキストの配置 */
.SideBySide div{
 position:relative;
 display:inline-block;
 vertical-align:top; 
 margin-left:15px;
}

.SideBySide2 div{
 display:inline-block;
 vertical-align:top; 
}

.co_link {
border: 1px dotted black;
padding: 10px;
}

/* カラー　スタイル別　トップ */

#select {
position:relative;
top:10px;
width: 100%;
margin:0 auto;*	
overflow: hidden;
}

.select-container {
width:100%;
position:relative;
overflow: hidden;
}

.select-container-div {
width: 48%;
display:inline-block;
position:relative;
vertical-align: top;
/*float: left;*/
border:0;
margin-top:5px;
margin-right:2px;
margin-left:2px;
margin-bottom:5px;
}

/* インフォメーション */

#information {
position:relative;
top:50px;
width: 100%;
border-top:5px solid #000000;
}

.information-container {
width:1080px;
position:relative;
margin:0 auto;	
overflow: hidden;
}

.information-container-div {
	width: 340px;
	height: 500px;
	float: left;
	margin-top:20px;
	margin-right: 30px;
	margin-bottom: 10px;
	border-bottom: 0.5px solid gray;
	line-height:20px;
}

.information-container-div2 {
	width: 340px;
	height: 380px;
	float: left;
	margin-top:20px;
	margin-right: 30px;
	margin-bottom: 5px;
	line-height:18px;
}

.information-container > div:nth-child(3n) {
	margin-right: 0;
}



.box {
  background-color: #FAF0E6;
  padding: 5px;
  position:relative;
  width: 80%;
}

.box_container {
position: relative;
overflow: hidden;
}

.box-container-div {
width: 49%;
display:inline-block;
position:relative;
vertical-align: top;
float: left;
}

.box-img {
margin:0 auto;
width:100%;
}


.title1 {
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
font-size: 2em;
}

.title2 {
font-family: 'M PLUS Rounded 1c', sans-serif;
}

.title3 {
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
font-size: 1.5em;
}

.txt_3 {
font-family: 'Noto Sans JP', sans-serif;
font-size: 1em;
}


.txt_1 {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: bold;
font-size: 2em;
}

.txt_2 {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 1.1em;
}

.snsbox_container {
display: flex;
margin-left: 50px;
}

.snsblock {
width: 47%;
/*display:inline-block;
position:relative;
vertical-align: top;
/*float: left;*/
margin-right:2px;
margin-left:2px;
}


/* 会社概要 */

.comTable {
	width: 100%;
	border-collapse: collapse;
	margin-bottom:80px;
	}

.comTable th {
	padding: 20px 5px;
	width: 23%;
	font-weight: normal;
	line-height: 2.2;
	vertical-align: top;
	text-align: left;
	border-bottom:1px solid #cccccc;
}

.comTable td {
	padding: 20px 10px;
	width: 77%;
	line-height: 2.2;
	vertical-align: top;
	text-align: left;
	border-bottom:1px solid #cccccc;
}

.comTable td p {
	margin-bottom: 28px;
}

.comTable td p a {
	text-decoration: none;
}


.comTable td ul {
	list-style: none;
}

.comTable td li {
	
}

.comTable td p.Btn {
    display: inline-block;
    background: none repeat scroll 0 0 #212121;
    padding: 0.6em 3em;
    text-align: center;
    color: #FFF;
    font-size: 12px;
    float: left;
}

/* 施工方法ブロック */

#method {
position:relative;
width: 820px;
margin:0 auto;*	
overflow: hidden;
}

.method-container {
width:820px;
position:relative;
overflow: hidden;
margin-right: auto;
margin-left: auto;
}

.method-container-div {
width: 31%;
display:inline-block;
position:relative;
vertical-align: top;
border:0;
margin-top:5px;
margin-right:5px;
margin-left:10px;
margin-bottom:5px;
}

.sub_title {
background-color:#ffcc99;
text-align:center;
}

/* ドロップダウンメニュー　*/

/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 220px;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 8px 0;
    padding : 20px 20px;
    color: #FFFFFF;
    background: #a58868;
    cursor :pointer;
    transition: all 0.5s;
    border: solid 1px #CCCCCC;
}


/*アイコンを表示*/
.accbox label:before {
    content: "\f0fe";
    font-family: "Font Awesome 5 Free";
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox label:hover {
   /* background :#D3D3D3;*/
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    /*transition: 2s;*/
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #FFFFFF;
    opacity: 1;
}

.accbox .accshow p {
    margin: 5px 0px;
   /* border-bottom: 1px solid #D3D3D3;*/
}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f146';
}

/*ボックス全体 業者用*/
.accboxgyo {
    padding: 0;
    max-width: 220px;/*最大幅*/
}

/*ラベル*/
.accboxgyo label {
    display: block;
    margin: 8px 0;
    padding : 20px 20px;
    color: #FFFFFF;

    background: #3a7593;
    cursor :pointer;
    transition: all 0.5s;
    border: solid 1px #CCCCCC;
}

/*アイコンを表示*/
.accboxgyo label:before {
    content: '\f0fe';
    font-family: 'FontAwesome';
    padding-right: 8px;
}


/*ラベルホバー時*/
.accboxgyo label:hover {
   /* background :#D3D3D3;*/
}

/*チェックは隠す*/
.accboxgyo input {
    display: none;
}

/*中身を非表示にしておく*/
.accboxgyo .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    /*transition: 2s;*/
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #FFFFFF;
    opacity: 1;
}

.accboxgyo .accshow p {
    margin: 5px 0px;
   /* border-bottom: 1px solid #D3D3D3;*/
}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f146';
}


/* アイコン */

.left_ico {
    max-width: 220px;/*最大幅*/
    display: block;
    margin: 20px 0;
    padding : 20px 20px;
    color: #212121;
    background: #f5f5f5;
    cursor :pointer;
    border: solid 1px #CCCCCC;
}

/* カレンダー */

div.cal_wrapper {
	padding: 10px 0px;
}
div.schedule_wrapper {
	padding: 10px 0px;
	width: 310px;
	border: solid 1px #CCC;
	border-radius: 5px;
	box-shadow: 1px 1px 3px #666;
}
div.schedule_wrapper h3 {
	padding: 0px 10px;
	font-weight: normal;
	margin: 0px;
	font-size: 12px;
	color: #666;
}
div.schedule_wrapper div.schedule_list {
	padding: 0px 10px;
	margin: 0px;
}
div.schedule_wrapper div.schedule_list ol {
	padding: 0px;
	margin: 5px auto;
	border-top: solid 1px #CCC;
}
div.schedule_wrapper div.schedule_list ol li {
	padding: 5px 10px 0px 0px;
	margin: 0px 0px 0px 30px;
	font-size: 12px;
	line-height: 1.5em;
}
div.schedule_wrapper div.schedule_list ol li:hover {
	text-decoration: underline;
}
div.cal_wrapper table.cal tr th p {
	float: left;
	padding: 5px;
	margin: 0px;
	color: #666;
	font-size: 12px;
}
div.cal_wrapper table.cal tr th div.cal_ui {
	float: right;
}
div.cal_wrapper table.cal tr th div.cal_ui input {
	border: solid 1px #CCC;
	background-color: #FFF;
	font-size: 12px;
	margin: 0px 1px;
	padding: 1px 5px;
	border-radius: 3px;
}
div.cal_wrapper table.cal tr td {
	border-top: solid 1px #EEE;
}
div.cal_wrapper table.cal tr td {
	font-size: 10px;
	text-align: center;
	padding: 2px
}
div.cal_wrapper table.cal tr.headline td {
	padding: 5px 0px;
	color: #666;
}
div.cal_wrapper table.cal tr.headline {
	background-color: #EEE;
}
div.cal_wrapper table.cal tr td div {
	position: relative;
	padding: 5px 15px;
	font-size: 10px;
	text-align: center;
	background-color: #FFF;
	border-radius: 3px;
}
div.cal_wrapper table.cal tr td div span {
	display: none;
	position: absolute;
	top: 20px;
	left: 0px;
	width: 180px;
	border: solid 1px #EEE;
	background-color: #FFF;
	text-align: left;
	padding: 5px;
	z-index: 10;
	color: #000;
	font-weight: normal;
	line-height: 1.5em;
	box-shadow: 1px 1px 3px #666;
}

/* 以下、クラス指定するときのアレ */

div.cal_wrapper table.cal tr td div.Sat {
	color: #00F;
}
div.cal_wrapper table.cal tr td div.Sun {
	color: #F00;
}
div.cal_wrapper table.cal tr td div.Today {
	font-weight: bolder;
}
div.cal_wrapper table.cal tr td div.Deli {
	background-color: #EFE;
}
div.cal_wrapper table.cal tr td div.Holyday {
	font-weight: bolder;
	color: #F00;
	background-color: #FEE;
}
div.cal_wrapper table.cal tr td div.Birthday {
	font-weight: bolder;
	background-color: #EEF;
	color: #090;
	border-radius: 3px;
}

div.cal_wrapper table.cal tr td div.backward {
	color: #CCC;
	font-weight: normal;
	background-color: #FFF;
	border-radius: 3px;
}
div.cal_wrapper table.cal tr td div.pointer {
	cursor: pointer;
}
div.cal_wrapper table.cal tr td div.pointer:hover {
	background-color: #EEE;
}

blockquote {
    font-size: 18px;
    color: #f1b4a3;
    line-height: 1.8;
    padding: 15px 0 15px 30px;
    position: relative;
    margin: 0 0 40px;
}

blockquote:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: #f1b4a3;
}

/* --YouTubeサイズ調整-- */
.video {
position: relative;
height: 0;
padding: 30px 0 56.25%;
overflow: hidden;
}

.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* 動画全体の横幅を指定するためのdiv */
.video-wrap {
  max-width: 60%;
}

/* --組立簡単BBQ特集ページ-- */
.bbq_lp p{font-size: 16px;line-height: 1.5em;margin: auto;width: 90%;}
.bbq_lp #exclamation{vertical-align: -5px;margin-right: 5px;width:26px;}
.bbq_lp h2{font-size: 24px;margin-top: 3em;margin-bottom: 1.5em;}
.bbq_lp #merit{font-size: 24px;}
.bbq_lp ul{font-size: 16px;background: #f3fbff;border: 2px skyblue dashed;padding-top: 10px;padding-bottom: 10px;padding-left: 30px;line-height: 1.5em;margin: auto;width: 85%;}

.bbq_table {
  margin: 20px auto;font-size: 16px;
}
.bbq_table th {
  background: #e9727e;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
}
.bbq_table td {
　border: solid 1px #ccc;
  padding: 10px;
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
  .bbq_table {
    width: 80%;
  }
  .bbq_table th,
  .bbq_table td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

/* QAアコーディオン */

.qa-list dl {
    position: relative;
    margin: 30px 0 0;
    cursor: pointer;
    border: 1px solid #DDD;
}
.qa-list dl:first-child {
  margin-top: 0;
}
.qa-list dl::after {
    position: absolute;
    top: 27px;
    right: 26px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.qa-list .open::after {
    transform: rotate(-45deg);
}
.qa-list dl dt {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
    font-weight: bold;
    background: #DDD;
}
.qa-list dl dt::before {
    font-size: 22px;
    line-height: 1;
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    content: 'Q.';
    color: #3285bf;
}
.qa-list dl dd::before {
    font-size: 22px;
    line-height: 1;
    position: absolute;
    left: 20px;
    display: block;
    content: 'A.';
    font-weight: bold;
    color: #3285bf;
}
.qa-list dl dd {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}

@media screen and (max-width: 767px) {
 .qa-list dl {
    margin: 10px 0 0;
}
.qa-list dl:after {
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
}
.qa-list dl dt {
    padding: 16px 16px 16px 50px;
    font-size: 14px;
}
.qa-list dl dt::before {
    font-size: 14px;
    top: 20px;
    left: 20px;
}
.qa-list dl dd::before {
    font-size: 14px;
    left: 20px;
    margin-top: 5px;
}
.qa-list dl dd {
    margin: 0;
    padding: 16px 16px 16px 50px;
    font-size: 14px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}
}