@charset "utf-8";
/* CSS Document */
body {
	margin: 0 auto;
	padding: 0; 
	color: #333;
	max-width: 1200px;
}
html {
	font-family: 'Roboto Slab','游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
}
h3 {
	font-size: 24px;
}
/*ヘッダーここから*/ 
header {
	height: 130px;
}
ul.header_catch {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	list-style: none;
	padding-left: 50px;
	font-weight: 700;
}
.header_text{
	font-size: 30px;
  font-weight: bold;
	text-align: center;
	margin-top: 10px;
  padding-bottom: 10px;
	padding-left: 50px;
	border-bottom: 1px solid #cdcdcd;
}
.red{
  color:#9B0305;
}
.padding_l{
  padding-left: 3px;
  letter-spacing: 2;
}
/*ナビゲーションここから*/

.nav{
  display: flex;
  justify-content: center;
	margin-top: 5px;
	padding-left: 0;
}
.nav li+ li {
  border-left: 1px solid #cdcdcd;
}
.nav li{
	margin-top: -5px;
	padding: 0 10px;
}
.nav a {
	font-size: 20px;
	text-decoration: none;
	color: #333;
}
.nav1{
  display: inline-block;
 	width: 150px;
  height: 50px;
  line-height: 50px;
  color: #333;
  text-decoration: none;
  text-align: center;
  transition-property: color, background-color;
  transition-duration: 1.2s;
  transition-timing-function: ease-out;
}
.nav1:hover{
  color: #fff;
  background-color: #9B0305;
}
.nav1 a{
  display: block;
}
.nav1 a:hover{
  color: #fff;
}
/*ナビゲーションここまで*/



/*ヒーローイメージ*/
.h2_center{
  text-align: center;
  padding-top: 30px;
  color: #fff;
}

/*ヒーローイメージここまで*/

/* 工房挨拶文ここから */
.top_center{
  width: auto;
  height: auto;
  margin: 30px 100px;
}
.top_center p{
  margin: 20px auto 0 auto;
}
.top_borderyellow{
	border-left: solid 8px #333;
	display: inline-block;
	color: #000;
	padding-left: 20px;
		/*12月２４日に変更*/
}

/* 工房挨拶文ここから */

/*　コンテンツここから　*/
.con_A{
	margin-top: 50px;
}
.con_A .container{
	display: flex;
  max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
}
.con_A .photo1{
	max-width: 100%;
	height: auto;
}
.con_A .text{
	flex: 1;
	padding: 20px 50px;
}
.con_A h3{
	margin-bottom: 20px;
	flex: 2;
}
.photo_a{
	flex: 3;
}
.photo1{
  max-width: 100%;
}

.con_B{
	margin-top: 50px;
}
.con_B .container{
	display: flex;
  max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	flex-direction: row-reverse;
}
.con_B .photo1{
	max-width: 100%;
	height: auto;
}
.con_B .text{
	flex: 1;
	padding: 50px;
}
.photo2{
  max-width: 100%;
}
.con_B h3 {
	margin-bottom: 20px;
	flex: 2;
}
.photo_b {
	flex: 3;
}
.con_C {
	margin-top: 50px;
}
.con_C .container {
	display: flex;
  max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
}
.con_C .photo1 {
	max-width: 100%;
	height: auto;
}
.con_C .text {
	flex: 1;
	padding: 50px;
}
.con_C h3 {
	margin-bottom: 20px;
	flex: 2;
}
.photo_c {
	flex: 3;
}
.photo3{
  max-width: 100%;
}
.button_red{
	background-color: #9B0305;
	border-radius: 5px;
	text-align: center;
	margin-top: 30px;
	font-weight: bold;
	padding-top: 5px;
	padding-bottom: 10px;
	color: #fff;
  transition: background-color 0.5s;
}
.button_red:hover {
  background-color: #333;
  transition: background-color 0.5s;
}
.button_red span{
	font-size: 14px;
}
/*　コンテンツここまで　*/

/*　インフォメーション左側ここから　*/
.infobox{
	display: flex;
	height: auto;
	margin: 0 auto;
	max-width: 1000px;
}
.leftside{
	flex: 0 0 30%;
 	margin-top: 80px;
}
.far{
    font-weight: 400;
    margin-right: -50px;
    font-size: 49px;
    margin-top: -1px;
}
.leftside p{
	color: #fff;
  margin-top: -3px;
}
.faq, .contact, .campany{
	background-color: #9B0305;
	border-radius: 8px;
	margin-bottom: 10px;
	padding: 15px;
	display: block;
	text-align: center;
  cursor:pointer;
}
.faq:hover{
	opacity: 0.7;
}
.contact:hover{
	opacity: 0.7;
}
.campany:hover{
	opacity: 0.7;
}
.fa-question-circle, .fa-envelope, .fa-building{
	float: left;
  font-size: 40px;
  color: #fff;
  margin-top: 5px;
}
.faq	p{
	padding-top: 5px;
	font-size: 15px;
	overflow: hidden;
}
.contact img{
	float: left;
	padding-top: 5px;
}
.contact p{
	margin-top: 5px;
	font-size: 15px;
	overflow: hidden;
}
.campany img{
	float: left;
}
.campany p{
	margin-top: 5px;
	font-size: 15px;
	overflow: hidden;
}
/* インフォメーション　左側ここまで*/

/*　インフォメーション　中央ここから*/
.info_center{
	flex: 0 0 30%;
	margin-top: 80px;
}
.info_center a:hover{
	opacity: 0.7;
}
.info_center p{
  font-weight: bold;
  font-size: 14px;
}
/*　インフォメーション　中央ここまで*/


/* インフォメーション　右側ここから*/
.rightside{
	flex: 0 0 30%;
	color: #333;
	margin-top: 80px;

}
.smalltext{
	font-size: 14px;
	color: #333;
}

.tel a{
	font-size: 26px;
	font-weight: bold;
	text-align: center;
}
.open_close p{
	color: #333;
}
.leftside{
	flex: 0 0 30%;
}
.rightside{
	flex: 0 0 70%;
}
.rightside{
	margin-left: 50px;
	margin-right: 50px;
}
.leftside{
	margin-right: 50px;
}
.sns_icon a{
	margin-top: 25px;
  margin-right: 10px;
	font-size: 24px;
}
.fa-facebook-square{
  color: #305097;
}
.fa-twitter{
  color: #00acee;
}
.fa-instagram{
  color: #262626;
}
.br{
  display: block;
}

.access{
	margin-top: 20px;
  padding: 10px 10px;
	background-color: #333;
	color: #fff;
}
.access h3{
	text-align: center;
	margin-right: 30px;
}
.mini{
	margin-left: 120px;
	font-size: 16px;
}
/* 地図ここから　*/
.map{
  width: 1000px;
  height: auto
}
.ifreme{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*　地図ここまで */

/*フッター:ナビゲーション*/
footer {
	height: 200px;
	background-color: #333;
	margin-top: -8px;
} 
.footer_navi {
	text-align: center;
}
.footer_navi ul {
 	display: inline-flex;
  justify-content: center;
	margin-top: 5px;
	padding-left: 0;
}
.footer_navi li+ li {
  	border-left: 1px solid #cdcdcd;
}
.footer_navi li{
	margin-top: 20px;
	padding: 0 20px 0 20px;
}
.footer_navi a {
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
  transition-property: color, background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.footer_navi a:hover {
	color: #999;
}
/* フッター */
.footer_info {
	text-align: center;
}
.footer_info h3 {
	color: #fff;
	font-size: 24px;
	margin-top: 20px;
}
.footer_info p {
	color: #fff;
	font-size: 16px;
	margin-top: -5px;
}
.footer_info h4 {
	color: #fff;
	font-size: 28px;
	margin-top: -5px;
}
.copyright {
	color: #fff;
	text-align: center;
}
/*スマホ版*/
/*ナビゲーションメニュー：トグルボタン*/
@media(min-width:750px){
.hum_nemu{
	display: none;
}
header .nav{
	display: flex!important;		
	}
}

/*ここから　＠media タブレット   max-width: 980px*/
/*タブレット*/
@media (max-width: 980px) {
	body {
		max-width: 100%;
	}
}
/*スマホ版*/
/*フッター、トグルボタン*/

@media (max-width: 980px) {	
	.footer_navi li {
		padding: 0 0.5rem;
	}
	.footer_navi a {
		font-size: 14px;		
	}
}
/*タブレット*/
/*980px*/
@media (max-width:980px){
body {
  max-width: 100%;
}

.hero_top {
  position: relative;
  z-index: -1;
}
.hero_top h1{
  color: #333;
  font-size: 30px;
  z-index: 100;
  position: absolute;
  text-align: left;
  width: 100%;
  left: 0; 
  top: 5%;
  height: 100%;
  padding-left: 50px;
  line-height: 70px;
  font-weight: bold;
  text-shadow:2px 2px 3px #fff;
}
.hero_jq{
  height: 300px;
  width: 600px;
  max-width: 100%;
}
.squareA {
  top: 0;
}
.hero_top h2 {
  height: 50px;
  font-size: 24px;
  padding-bottom: 10px;
  text-align: center;
  color: #000;
}
.top_center{
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
.top_center h3{
  margin-left: 10px;
  padding-left: 20px;
	font-size: 15px;
}
.top_center p{
  margin: 30px auto 0 auto;
}
.top_center .br{
  display: inline;
}
/* 工房概要ここまで */
	
.con_A .container{
	display: block;
	max-width: 95%;
  height: auto;
	margin: 20px auto;
}
.con_A .text {
  flex: 1;
  padding: 50px;
}
.con_A .con_B .con_C h3 {
  flex: 2;
  text-align: center;
  font-size: 18px;
  }
.con_B .container{
	display: block;
	max-width: 95%;
	margin: 0px auto 70px auto;
  height: auto;
}
.con_B{
  margin-top: -50px;
}
.con_B text{
  flex: 1;
  padding: 50px;
}
.con_C .container{
	display: block;
	max-width: 95%;
  height: auto;
	margin: 0 auto;
}
.con_C{
  margin-top: -90px;
}  
.con_C text{
  flex: 1;
  padding: 50px;
}
.photo1{
  flex: 0 0 50%;
  margin: 0 auto -30px auto;
  max-width: 100%;
}
.photo2{
  flex: 0 0 50%;
  margin: 0 auto -30px auto;
  max-width: 100%;
}
.photo3{
  flex: 0 0 50%;
  margin: 0 auto -30px auto;
  max-width: 100%;
}
.button_red{
  width: 200px;
  max-width: 100%;
  height: auto;
  margin: 40px auto 0 auto;
  padding-top: 10px;
  margin-bottom: 40px;
}  
.infobox{
  display: block;
  margin-top: -50px;
}
.leftside{
  margin: 30px auto 0 auto;
  max-width: 60%;
}
.info_center{
  text-align: center;
  margin: 40 auto;
}
.info_center p{
  font-size: 14px;
  font-weight: bold;
}
.rightside{
  margin: 40px auto;
  display: table;
}
.zipcode{
  margin-top: 10px;
}
.tel{
  margin-top: 10px;
}
.open_close{
  margin-top: 10px;
}
.access{
  display: block;
	margin-top: 20px auto;
  padding: 10px 10px;
	background-color: #333;
	color: #fff;
}
.mini {
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
}
/* 地図ここから　*/
.map{
  max-width: 100%;
  height: auto;
	display: block;
}
.iframe{
  max-width: 100%;
  height: auto;
}

}
/*ミニタブレット　スマホ版*/
@media (max-width: 750px) {
header .con_middle{
	display: flex;
	align-items: center;
	justify-content: space-between;
	}	
header {
 	height: 90px;
	}
header .header_catch {
	font-size: 14px;	
	padding-left: 10px;
	}
header .header_text {
	font-size: 24px;
	padding-left: 10px;	
	}
.nav li {
	width: 100%;
	}
.heroB {
	position: relative;
	z-index: -1;
	}
.heroB img {
	width: 100%;
	height: 100%;
	z-index: -1;
}
.heroB h1 {
	font-size: 30px;
	top: 0;
	height: 50px;
	padding: 10px;
}
.heroB p {
	top: 50px;
	height: 20px;
	font-size: 16px;
	padding: 10px;
}
.squareB {
	top: 0;
}
.heroB h2 {
	height: 50px;
	font-size: 16px;
	padding: 10px;
}
.br2{
  display: block;
}
.mini{
  display: block;
}
  .foot-414{
    margin-top: -45px;
  }
.footer_navi {
	display: none;
	}
.footer_info {
	padding-top: 30px;
	}
.footer_info h3 {
	margin-bottom: 10px;
}
.mo_f_info {
	display: block;	
	}
/*トグルボタン*/
.hum_nemu{
  margin-right: 10px;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  font-size: 30px;
  opacity: 0.5;
  cursor: pointer;
  color: #111;
}
.hum_nemu:hover{
  opacity: 0.3;
}
header .nav{
  display: none;
}
.header_text{
border-bottom: none;
}

/*トグルボタン投下したとき*/
.nav{
  position: relative;
  z-index: 1000;
  background-color: #9B0305;
}
.nav li{
  width: 100%;
}
}
	
/*トップへ戻るボタン*/
.pagetop {
  display: none;
  position: fixed;
	right: 50px;
	bottom: 50px;
}
.pagetop a {
	display: block;
  text-align: center;
  color: #9B0305;
  font-size: 70px;
  text-decoration: none;
  filter:alpha(opacity=50);
  -moz-opacity: 0.7;
  opacity: 0.7;
}
.pagetop a:hover {
  display: block;
  text-align: center;
  color: #600001;
  text-decoration: none;
  filter:alpha(opacity=50);
  -moz-opacity: 0.8;
  opacity: 0.8;
}



/*トップへ戻るボタン:幅600px以下の画面：隠す*/	
@media(max-width:600px){	

	.pagetop a{
		visibility: hidden;
	}
}