@charset "utf-8";

/* -----------------------------------------------
body
header
menu
contents
footer
anchor
clear_float 
----------------------------------------------- */

/*body*/

body {
	color: #222;
    padding:0;
    margin: 0;
	}

h1,h2, h3, h4, h5,dl,dt,dd,ul,li{
	margin: 0;
	padding: 0;
	}

ol,ul{
	list-style:none;
	}

p {
	margin: 12px 0;
	}
    
hr {
height: 1px;
background-color: #DDD;
border: none;
color: #DDD;
}

/* -- hidden -- */

.hidden {
	display: none;
	}

@media screen and (min-width: 787px){   
  .sp { display:none; }
  .tb { display:none; }
  .pc { display:block; }
}

@media screen and (min-width: 481px) and (max-width: 786px) {
  .sp { display:none; }
  .tb { display:block; }
  .pc { display:none; }
}
@media screen and (max-width: 480px){   
  .sp { display:block; }
  .tb { display:block; }
  .pc { display:none; }
}

/* -- clear float -- */

.clr {
	clear: both;
	float: none;
	display: inline-block;
	}
	
.clr::after{
	content: "";
	display: block;
	clear: both;
	}

img { width:100%; }
.img80 { width:70%; min-width:315px;}



/*-----------------------------*/
/*header*/

header {
    margin: 0 auto;
	padding: 0;
	width: 100%;
    min-height: 100vh;
    z-index:1;
    text-align:center;
	}

h1{
    white-space: nowrap;
	overflow: hidden;
    margin-top:65px;
    padding: 0;
	}
 
h1::before{
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 100%;
  min-width: 265px;
  height: 200px;
  background:url(../img/qh_logo.png) no-repeat center center ; 
  background-size: auto 200px; 
  white-space: nowrap;
  overflow: hidden;
  }


/*----------------------------*/	 
/*contents*/

#contents,
#footer{
    margin: 0;
	width: 100%;
    text-align:center;
    z-index: 100000;/**/
    background-color:#FFF;
	}

section{
  margin:0 auto ;
}


/*--font-style--*/
    

/* background */
.bgc_brown { background-color:#521e0a; }
.bgc_wine { background-color:#75152a;}
.bgc_white { background-color:#FFF;}
.rad8 {
  border-radius: 10px;
  -webkit-border-radius: 10px; 
  -moz-border-radius: 10px;
}

/* txt */

.fc_white { color: #FFF; }
.fc_black { color: #222; }

.lh { line-height: 2.2;}
.lhm { line-height: 1.2;}

.fs{
-moz-text-shadow: -1px 1px 5px rgba(0, 0, 0, 0.8);
-webkit-text-shadow: -1px 1px 5px rgba(0, 0, 0, 0.8);
-ms-text-shadow: -1px 1px 5px rgba(0, 0, 0, 0.8);
text-shadow: -1px 1px 5px rgba(0, 0, 0, 0.8);
}

.txt_l { text-align: left; }
.txt_c { text-align: center; }
.txt_r { text-align: right;}
.txt_fwb,strong { font-weight:500;}

.pad_5 { padding:2px 5px 5px; }
.pad_20 { padding:0 15px !important; }
.pad_r_5 { padding-right:5px; }
.pad_l_5 { padding-left:5px; }
.pad_t_10 { padding-top:10px; }
.pad_r_10 { padding-right:10px; }
.pad_l_10 { padding-left:10px; }

.mar_20 { margin:20px 0 !important; }
.mar_30 { margin:40px !important; }
.mar_t_30 { margin-top:40px !important; }
.mar_b_30 { margin-bottom:40px !important; }
.mar_t_60 { margin-top:60px !important; }


/*----------------------------*/
/* contents */

#main_copy,
#bizen,
#policy,
#concept,
#utsuwa,
#qh_info,
#kihon,
#about_qh{ 
     width:100%;
     max-width:1080px;
     margin: 0 auto;
     padding:70px 0;
}

#bizen_use{ 
     width:100%;
     max-width:1080px;
     margin: 0 auto;
     padding:70px 0 20px;
}

#base_box{ 
     width:100%;
     max-width:1080px;
     margin: 20px auto 0;
     padding: 0;
}


#qh_copy{
width:100%;
     max-width:1080px;
     margin: 0 auto;
     padding:100px 0;
  }/**/

#main_copy h2{
  margin-top:80px;
  }


/* 備前焼のこと */

.bizen_bg{
  max-height:850px;
  padding-bottom:350px;
  background: url("../img/bizenyaki_main_img.jpg") no-repeat center bottom #C0C0C0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* 4人の陶芸家 */

#about_us {
  position: relative;
  background: url("../img/about_us_img.jpg") no-repeat center bottom;
  min-height:685px;
}

#about_us .about_txt {
  position: absolute;
  top: 60px;
  left: 50%;
  -ms-transform: translate(-50%,0%);
  -webkit-transform: translate(-50%,0%);
  transform: translate(-50%,0%);
  width:80%;
  max-width:980px;
  margin:0 auto;
  padding-top:60px;
  }

.concept_bg{
  background-color:#521e0a;
  color:#FFF;
}

.concept_tlt {
  background: url("../img/concept_bg.jpg") no-repeat center bottom;
  background-size:  1080px auto;
  padding-top:60px;
  padding-bottom:350px;
  /*width:100%;min-height:550px;*/
  margin-bottom: 50px;  
}


#qh_info{ 
     margin-bottom: 500px !important;
     padding:50px 0;
     color:#FFF;
}


.utsuwa_bg{
  background: url("../img/utsuwa_bg.jpg") no-repeat center bottom fixed #C0C0C0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color:#FFF;
}



.flex_box{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content:space-around;
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.flex_box > div{
 margin:10px 5px;
 padding:0;
 float: left;
 text-align:left;
 width:50%;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.flex_box img, table img{
    max-width: 100%;
    margin:0;
    padding:0;
    vertical-align: bottom;
	}


.kihon_txt{
 width:86%;
 text-align:left;
 margin:15px auto ;
 border:0px solid #c0c;
 padding:0;}
 

h4.no1::before {
   content: '1.\A';
   white-space: pre;
   padding-bottom:10px;
   color:#5b061c;
   display:block;
   }
   
h4.no2::before {
   content: '2.\A';
   white-space: pre;
   padding-bottom:10px;
   color:#5b061c;
   display:block;
   }

h4.no3::before {
   content: '3.\A';
   white-space: pre;
   padding-bottom:10px;
   color:#5b061c;
   display:block;
   }

h4.no4::before {
   content: '4.\A';
   white-space: pre;
   padding-bottom:10px;
   color:#5b061c;
   display:block;
   }


.qh_bg{
  background: url("../img/qh_info_bg.jpg") no-repeat center bottom #C0C0C0;
  /*padding-bottom:800px;*/
  background-size: auto 1080px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


blockquote {
    position: relative;
    padding:10px 15px;
    box-sizing: border-box;
    font-style: italic;
    line-height: 2.0;
    letter-spacing: 0.1em;
    color:#5c071d;
    max-width:700px;
    margin:20px auto;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 20px;
    content: "\f10d";
    font-family: FontAwesome;
}

blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 20px;
    text-align: center;
    content: "\f10e";
    font-family: FontAwesome;
}

#about_qh h4{ 
  padding-bottom:6px;
  border-bottom:1px solid #222;
  }


/*---------------------------------*/
/*instagram*/

#insta{
   max-width: 1080px; /* 最大幅 */
   margin:20px auto;
   display: flex;
   flex-wrap: wrap;
}

#insta ul{
  display: flex;
  flex-wrap: wrap;
}
#insta li{
  position: relative;
  width: 25%;
}
#insta li:before{
  content: "";
  display: block;
  padding-top: 100%;
}
#insta img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}

/* クワイエットハウス用　ここまで */

.bx-wrapper {
  position: relative;
  margin:10px auto 20px !important;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.banner-list__unit{
width:100%;
max-width: 100%;
height: auto;
}

.banner-list__unit .car-cap p {
  margin:0;
  padding:5px;
  text-align:left;
  font-size:1.2rem;
  line-height: 1.4em;
  }

.car-cap img {
  width: 100%;
  }


/* クワイエットハウス用　ここまで */

dl{
  margin:10px auto;
  max-width:880px;
  text-align:left;
}

dt{ float: left; }

dd{ margin-left: 90px; }

table {
  max-width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  background-color: transparent;
    white-space: nowrap;
  overflow: hidden;
}

.icon{
  text-align:right !important;
}

.icon li {
  display: inline-block;
  padding-right:5px;
  padding-top:10px;
}

address { font-style: normal; }



/*----------------------------*/
/*btn_area*/

.btn_area{ 
  width:100%;
  max-width:980px;
  margin: 0 auto;
  padding:40px 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-sizing: border-box;  /* Chrome  */
  -moz-box-sizing: border-box;     /* Firefox */
  box-sizing: border-box;

}

.btn_area > div { 
  width:45%;
  margin: 10px 20px;
  padding:25px 0 5px;
  text-align: center;
  border:2px solid #FFF;
}

.btn_area > div a { 
  display:block;
  color:#FFF;
}

.btn_area > div a:hover{ 
  color:#FFFECE;
}


.copyrights{
	width:100%;
    padding:20px 0;
    text-align:center;
	font-size:11px;
	font-size:1.1rem;
    letter-spacing: 0.08em;
	}
	 

/* Pagetop-btn*/

#page_top{
  width: 160px;
  position: fixed;
  right: 10px;
  bottom: 50px;
  z-index: 10001;
}

#page_top li a{
  position: relative;
  display: block;
  width: 160px;
  height: 160px;
  margin:5px 0;
}



/*anchor*/
a:link { color: #333333; text-decoration:none; }
a:visited { color: #333333; text-decoration:none; }
a:hover { color: #75152a;  text-decoration:none; }
a:active { color: #333333;  text-decoration:none; }


/*image_alpha*/
a:hover img {
	-moz-opacity:0.75;
	opacity:0.75;/*mozilla*/
	filter: alpha(opacity=75);/*IE*/
	-ms-filter: alpha(opacity=75);
    }


@media screen and (min-width: 481px) and (max-width:1024px) {


.bizen_bg{
  max-height:700px;
  padding-bottom:250px;
  background: url("../img/bizenyaki_main_img.jpg") no-repeat center bottom #C0C0C0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#about_us {
  width:90%;
  margin:0 auto;
  position:  relative;
  background: url("../img/about_us_img.jpg") no-repeat center bottom;
  min-height:650px;
}
}



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

h1{
    white-space: nowrap;
	overflow: hidden;
    margin-top:75px;
    padding: 0;
	}
 
h1::before{
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 100%;
  min-width: 265px;
  height: 180px;
  background:url(../img/qh_logo.png) no-repeat center center ; 
  background-size: auto 180px; 
  white-space: nowrap;
  overflow: hidden;
  }



.qh_bg{
  background: url("../img/qh_info_bg_sp.jpg") no-repeat center center #0e1728;
  background-size:700px auto ;
}


#qh_info{ 
     margin-bottom: 240px !important;
     padding:50px 0;
     color:#FFF;
}

/*---------------------------------*/
/*instagram*/
#insta{
   max-width: 90%; /* 最大幅 */
   margin:20px auto;
}

#insta li{
  position: relative;
  width: 25%;
}

}

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

h1{
    white-space: nowrap;
	overflow: hidden;
    margin-top:65px;
    padding: 0;
	}
 
h1::before{
  content: '';
  display: inline-block;
  vertical-align: top;
  width: 100%;
  min-width: 265px;
  height: 140px;
  background:url(../img/qh_logo.png) no-repeat center center ; 
  background-size: auto 140px; 
  white-space: nowrap;
  overflow: hidden;
  }


#main_copy,
#bizen,
#utsuwa,
#policy,
#concept,
#qh_info,
#kihon,
#about_qh{ 
     width:100%;
     margin: 0 auto;
     padding:45px 0;
}

#main_copy{
  line-height: 2.0;
  z-index: 3;/**/
  height:100vh;
  max-height: 590px;
  padding:15px 0 !important;
  }
  
#bizen_use{ 
     width:100%;
     max-width:1080px;
     margin: 0 auto;
     padding:45px 0 10px;
}

#base_box{ 
     width:100%;
     max-width:1080px;
     margin: 20px auto 0;
     padding: 0;
}


.bizen_bg{
  max-height:600px;
  padding-bottom:200px;
  background: url("../img/bizenyaki_main_img.jpg") no-repeat center bottom #C0C0C0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.utsuwa_bg{
  background: url("../img/utsuwa_bg.jpg") no-repeat center bottom #C0C0C0;
  background-size: auto 800px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#bizen .bizen_txt {
  position: absolute;
  top: 40px;
  left: 50%;
  -ms-transform: translate(-50%,0%);
  -webkit-transform: translate(-50%,0%);
  transform: translate(-50%,0%);
  width:90%;
  text-align:left;
  margin:0 auto;
  padding-top:30px;
  letter-spacing: 0.03em!important;
  }
  
#about_us {
  width:90%;
  margin:0 auto;
  position:  relative;
  background: url("../img/about_us_sp_img.jpg") no-repeat center bottom;
  background-size: auto 520px;
  min-height:450px;
}

#about_us .about_txt {
  position: absolute;
  top: 40px;
  left: 50%;
  -ms-transform: translate(-50%,0%);
  -webkit-transform: translate(-50%,0%);
  transform: translate(-50%,0%);
  width:98%;
  margin:0 auto;
  padding-top:30px;
  }
  
.concept_tlt {
  width:100%;
  background: url("../img/concept_bg.jpg") no-repeat center bottom;
  background-size: auto 420px;
  padding-top:30px;
  padding-bottom:220px;
  margin:20px auto 40px;
}

.qh_bg{
  background: url("../img/qh_info_bg_sp.jpg") no-repeat center center #0e1728;
  background-size:450px auto ;
}

#qh_info{ 
     margin-bottom: 180px !important;
     padding:50px 0;
     color:#FFF;
}

/*instagram*/

#insta{
   max-width: 80%; /* 最大幅 */
   margin:20px auto;
}

#insta li{
  position: relative;
  width: 50%;
}
}


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

.icon{  text-align:left !important;}
.flex_box,.btn_area {  flex-direction: column;  }

.flex_box >div { 
  width:90%;
  margin: 5px auto;
}

dl{
  margin:10px auto;
  width:85%;
  text-align:left;
}

dt{ float: none; }
dd{ margin: 0 0 15px; }


.btn_area > div { 
  width:85%;
  padding:15px 0 5px;
  text-align: center;
  font-size:1.4rem;
  border:2px solid #FFF;
}
}

/*---IE only---*/
@media all and (-ms-high-contrast: none) {