@charset "utf-8";

body {
  background-image: url(../images/bg.jpg);
  color: #000;
  font: 14px/2 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
  line-height: 150%;
  margin: 0;
  padding: 0;
}


/*----------------------------------------------------------------------------*/
/*----- default -----*/
p{
  margin: 12px 0;
  padding: 0;
}
ul,ol,li,dl,dt,dd,form,figure{
  margin: 0;
  padding: 0;
}
ul{ list-style-type:none; }
img{ width:auto}   /* IE8 */
img{ display: block; margin: 0 auto; border: none; }
input,textarea,select{ font-size: 1em; }
form{ margin: 0; }
table{
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
}

a{ color: #03C; }
a:hover{
  color: #F60;
/*	color: #F33;*/
  text-decoration: none;
}
a:hover img {
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
  opacity: 0.7;
}

*, *:before, *:after{  /*borderをwidth,heightに含める設定*/
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  -o-box-sizing:border-box;
}




/*----------------------------------------------------------------------------*/
/*----- clearfix -----*/
.clearfix:after{
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.clearfix{
  display:inline-table;
  zoom: 1;
}
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */



/*----------------------------------------------------------------------------*/
/*----- ヘッダーブロック -----------------------------------------------------*/
header{
  background: url(../images/header_background.png);
  color: #4D3C72;
}

/*ヘッダーブロックの中*/
header .inner{
  height:84px;
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 8px;
}
header .inner h1{
  color: #FFF;
  font-size: 13px;
  margin:4px 12px 0;
  width:174px;
}
header .inner h1 img{
  margin:0;
  padding:0 0 4px;
  width:90%;
}



/*----------------------------------------------------------------------------*/
/*----- ヘッダーメニューブロック -----*/
#menu {
  background-color:#E0DBEC;
  clear:both;
  margin:0 auto;
}
.dropmenu{
  *zoom: 1;
  list-style-type: none;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
}
.dropmenu:before, .dropmenu:after{
  content: "";
  display: table;
}
.dropmenu:after{
  clear: both;
}
.dropmenu li{
  position: relative;
  width: 14.2%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
.dropmenu li a{
  display: block;
  margin: 0;
  padding: 13px 0 11px;
  background: #E0DBEC;
  color:#000;
  line-height: 1;
  text-decoration: none;
}
.dropmenu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}
.dropmenu li ul li{
  width:164%;
}
.dropmenu li ul li a{
  padding: 13px 15px;
  border-top: 1px solid #7B66AE;
  background: #E0DBEC;
  text-align: left;
}
.dropmenu li:hover > a{
  background: #CAC1DF;
}
.dropmenu li a:hover{
  background: #CAC1DF;
}


/*====================================
スライドしながら伸び縮み
=====================================*/
.dropmenu li ul li{
  overflow: hidden;
  height: 0;
  transition: .2s;
}
.dropmenu li:hover ul li{
  overflow: visible;
  height: 34px;
}




/*----------------------------------------------------------------------------*/
/*----- SlickNav 対応 -----*/
#mainMenu {
  display: none;
}
 
@media screen and (min-width : 801px) {
  #mainMenu {
    display: block;
  }
  .slicknav_menu {
    display: none;
  }
}



/*----------------------------------------------------------------------------*/
/*----- フッター部 -----------------------------------------------------------*/
#footer_contact{
	margin:20px auto 8px;
	padding:0 20px;
}
#footer_contact div{
	background-color: #F5F3FA;
	border: 1px solid #CAC0DF;
	color: #1D125A;
	margin: 0 auto;
	padding: 10px 20px;
	width: 100%;
	max-width: 1000px;
}
#footer_contact img{
  margin:8px 0;
  max-width: 100%;
}

footer{
  background: url(../images/header_background.png);
  color: #4D3C72;
}
footer .inner{
  height:84px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 12px 0;
}

address{
  color:#FFF;
  font-style:normal;
}

#copyright {
  color:#FFF;
  margin:0px;
  padding:10px 0px;
  text-align:center;
}


/*----------------------------------------------------------------------------*/
/*----- メイン構造 -----------------------------------------------------------*/
#container {
  background-color: #FFF;
  margin: 0 auto;
  max-width: 1080px;
  padding: 0 0 1px;
}

#mainContents {
  margin: 0 auto;
  max-width: 1040px;
  padding: 0 20px;
}

/*----- 事例詳細 -----*/
#example{
}
#example span img{
	max-width:100%;
}
#example ul{
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	margin:8px 0;
	padding:0;
}
#example li{
	margin:4px;
	width:12.5%;
}
#example li img{
	width:100%;
}
#example li img:hover{
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	cursor:pointer;
}
#example p{
	font-size:1.1em;
	margin:8px 14px;
}

/*----------------------------------------------------------------------------*/
/*----- 見出し -----*/
h1{
  color: #FFF;
  font-size: 14px;
  margin:4px 12px 0;
}
h1 img{
  margin:0;
  max-width:174px;
  padding:0 0 4px;
}


#page_image{	/*ページ見出し上のメイン画像*/
  max-width: 1080px;
  width: 100%;
}
h2{
  background-color: #33284D;
  color: #FFF;
  font-size: 2.6em;
  max-width: 1080px;
  margin: 0 auto;
  padding:18px 24px 14px;
  text-align: right;
}


h3{
  border-bottom:2px solid #4D3C72;
  color: #4D3C72; 
  font-size: 2em;
  line-height:120%;
  margin:94px 0 6px;
  padding:0 0 4px;
}
.h3_first_margin{
  /*スマホのみ縮小*/
}
.h3_no_line{
  border: none;
}


h4{
  border-bottom: 2px solid #BFD2E5;
  color: #666699;
  margin-top: 48px;
  padding: 4px 8px 2px 8px;
  font-size: 1.2em;
}





/*----------------------------------------------------------------------------*/
/*----- ブロック構造 ---------------------------------------------------------*/
#Breadcrumb{clear:both;width:100%;margin:10px auto;padding:0;color:#777;} #Breadcrumb li{float:left;list-style:none;margin-right:2px;} #Breadcrumb li:after{content:' > ';} #Breadcrumb li:last-child:after{content:'';} #Breadcrumb a{color:#777;text-decoration:none;} #Breadcrumb a:hover{color:#F60;}

#sns_link{
  margin: 8px auto 0;
  padding: 0 20px;
  max-width: 1040px;
}
#sns_link img{
  display: inline;
}


.box_border_1{
  background-color: #FFF6F6;
  border: 1px solid #CCC;
  margin: 20px 0;
  padding: 8px 20px;
}

/*-----トップページ事例ピックアップ -----*/
#pickup h4{
  background-color:#6C6ABB;
  border: none;
  color:#FFF;
  margin:18px 0 0;
  padding:6px 12px;
}
#pickup ul{
  border:1px solid #CCC;
  margin:8px 0;
  padding:0;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
#pickup li{
  float:left;
  list-style:none;
  margin:8px 1%;
  padding:0;
  text-align:center;
  width:31%;
}
#pickup li img{
  max-width:120px;
  width:100%;
}



/*-----Google Map -----*/
#gampFrame{
  border:none;
  height:400px;
  width:100%;
}

/*-----伊藤和裁までの道順 Mapページ下部 -----*/
#map_guide p{
  clear: both;
  margin-bottom:1em !important;
}
#map_guide img{
  float: left;
  max-width: 100%;
  padding-right:1em;
}


/*-----お客様の声 -----*/
.box_voice{
  margin: 12px 0px;
  padding: 12px;
  border: 1px solid #CAC0DF;
}
.box_voice img{
  float: right;
  margin-bottom: 8px;
  margin-left: 28px;
  max-width: 100%;
}
.box_voice img.emoji{
  display:inline;
  float: none !important;
  margin: 0 !important;
}
.box_voice span{ /*---- お客様名 ----*/
  color: #CC6633;
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 1em;
}



/*----- 共通余白指定 ---------------------------------------------------------*/
.margin_t42{
  margin-top: 42px;
}



/*----------------------------------------------------------------------------*/
/*----- Image -----*/
.img_max{
  max-width: 100%;
}
.img_max_inline{
  display: inline;
  max-width: 100%;
}

.icon{
  display: inline;
  vertical-align: middle;
}

/*----------------------------------------------------------------------------*/
/*----- Paragraph -----*/
.p_right{
  text-align: right;
}

.pJireiNext{
  margin: 60px 40px 20px;
  text-align: right;
}



/*----------------------------------------------------------------------------*/
/*----- Lists -----*/
.list_2line{		/* ２列　枠線なし */
  margin:8px 0;
  padding:0;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.list_2line li{
  float:left;
  list-style:none;
  margin:8px 1%;
  max-width:520px;
  padding:0;
  width:48%;
}
.list_2line li img{
  width:100%;
}

.list_2line_border{		/* ２列　枠線あり */
  margin:8px 0;
  padding:0;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.list_2line_border li{
  border: 1px solid #CCC;
  float:left;
  list-style:none;
  margin:8px 1%;
  max-width:520px;
  padding:0;
  width:48%;
}
.list_2line_border li img{
  width:100%;
}
.list_2line_border li p{
  padding-left: 12px;
  padding-right: 12px;
}


/*標準●付きリスト*/
.ul_normal li{
  list-style-type: disc;
  margin-left:1.6em;
}


/*-----------------------------------------------------*/
/*-----事例一覧リンク用-----*/
.jirei_page_list{
  margin: 20px 0 0;
  padding: 0;
}
.jirei_page_list li{
  float: left;
  list-style: none;
  margin: 0 3px;
  padding: 2px 6px;
  border: 1px solid #ccc;

}

/*-----事例一覧表示-----*/
#jirei_list{
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
#jirei_list li{
  float: left;
  font-size: 84%;
  margin:4px;
  text-align: center;
}
#jirei_list li img{
  width: 117px;
}


/*-----------------------------------------------------*/



/*QA*/
.QA_Q dt{
  background-color: #FFE0E0;
  background-image: url(../service/images/qa_q.gif);
  background-position: left center;
  background-repeat: no-repeat;
  margin-top: 42px;
  padding: 6px 8px 6px 25px;
}
.QA_Q dd{
	margin:6px 8px 6px 25px;

}

/*----------------------------------------------------------------------------*/
/*----- Tables -----*/
/*　変化なし  */
.tblType0{
  margin: 0;
  padding: 0;
  width: 100%;
}
.tblType0 th{
  border: 1px solid #CCCCCC;
  font-weight: normal;
  margin: 0;
  padding: 8px;
  text-align: left;
  white-space: nowrap;
  width: 1%;
}
.tblType0 td{
  border: 1px solid #CCCCCC;
  margin: 0;
  padding: 8px;
}


/*　スマホ改行  */
.tblType1{
  margin:0px;
  padding:0px;
  width:100%;
}
.tblType1 th{
  background-color:#F0EEF7;
  border:1px dotted #B3A6D0;
  font-weight:normal;
  margin:0px;
  padding:8px 18px;
  text-align:left;
  white-space:nowrap;
  width:1%;
}
.tblType1 td{
  border:1px dotted #B3A6D0;
  margin:0px;
  padding:8px;
}

/* 料金表 メディア共通 */
.tbl_ryokin{
  margin:20px 0 0;
  padding:0;
  width:100%;
  max-width: 760px;
}
.tbl_ryokin th{
  background-color:#F0EEF7;
  border-bottom:1px dotted #B3A6D0;
  border-top:1px dotted #B3A6D0;
  border-left: none;
  border-right: none;
  font-weight: normal;
  margin: 0;
  padding: 6px 16px;
  text-align: left;
  width:70%;
}
.tbl_ryokin td{
  border-bottom: 1px dotted #B3A6D0;
  border-top: 1px dotted #B3A6D0;
  margin: 0;
  padding: 6px 16px;
  text-align: right;
  width:30%;
}
.tbl_ryokin tr:first-child th{
  border-top: none;
}
.tbl_ryokin tr:first-child td{
  border-top: none;
  font-size:0.875em;
  text-align: center;
}





/*----------------------------------------------------------------------------*/
/*----- Fonts -----*/
/* 0.625=10px 0.75em=12px 0.875=14px */
.colorFF0000 { color: #FF0000; }
.colorCC6633Bold{
  color: #CC6633;
  font-weight: bold;
  font-size: 1.2em;
}
.colorCC0000Bold{
  color:  #C00;
  font-weight: bold;
  font-size: 1.2em;
}
.font_tel_number{	/* 電話番号専用 */
  color: #CC0000;
  font-weight: bold;
  font-size: 1.6em;
  line-height: 1.2em;
  margin: 20px 0;
}
.font_tel_number{
  text-decoration: none;
}



/*----------------------------------------------------------------------------*/
/*----- ＦＯＲＭ -----*/
.formS{ width:16%; }
.formM{ width:50%; }
.formL{ width:100%; }




/*----------------------------------------------------------------------------*/
/*----- ページトップに戻るボタン -----*/
/* PAGE TOP */
#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
#pageTop i {
  padding-top: 6px
}
#pageTop a {
  display: block;
  z-index: 999;
  padding: 16px 0 0 1px;
  border-radius: 30px;
  width: 52px;
  height: 52px;
  background-color: #C977F0;
  color: #fff;
  font-size:24px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}






/*=======================================================================================================================*/

/*--- タブレット用（481px～800px）環境の設定 ---*/

/*=======================================================================================================================*/
@media screen and (min-width:481px) and (max-width:800px){

/*----------------------------------------------------------------------------*/
/*----- フッター部 -----------------------------------------------------------*/
#footer_contact{
	margin: 20px 2% 8px;
	padding: 0;
}
#footer_contact div{
	margin: 0;
}


/*----------------------------------------------------------------------------*/
/*----- メイン構造 -----------------------------------------------------------*/
#mainContents {
  margin: 0 2%;
  padding: 0;
}

/*----- 事例詳細 -----*/
#example li{
	margin:3px;
	width:25%;
}
#example p{
	margin:4px;
}



/*----------------------------------------------------------------------------*/
/*----- 見出し -----*/
h2{
  font-size:1.8em;
  padding:14px 14px 10px;
}

h3{
  font-size: 2em;
  margin:64px 0 6px;
}
.h3_first_margin{
  /*スマホのみ縮小*/
}


/*----------------------------------------------------------------------------*/
/*----- ブロック構造 ---------------------------------------------------------*/
#Breadcrumb{font-size:96%;}

#sns_link{
  margin: 8px 2% 0;
  padding: 0;
}



/*----------------------------------------------------------------------------*/
/*----- Paragraph -----*/
.pJireiNext{
  margin: 40px 10px 20px;
  text-align: right;
}



/*----------------------------------------------------------------------------*/
/*----- Lists -----*/
.list_2line li{
  margin:6px 1%;
}

/*-----------------------------------------------------*/
/*-----事例一覧表示-----*/
#jirei_list li img{
	width: 114px;
}





/*----------------------------------------------------------------------------*/
/*----- ＦＯＲＭ -----*/
.formS{ width:25%; }
.formM{ width:80%; }




}




/*=======================================================================================================================*/

/*--- スマートフォン用（480px以下）環境の設定 ---*/

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

/*----------------------------------------------------------------------------*/
/*----- フッター部 -----------------------------------------------------------*/
#footer_contact{
	margin: 20px 2% 8px;
	padding: 0;
}
#footer_contact div{
	margin: 0;
}


/*----------------------------------------------------------------------------*/
/*----- メイン構造 -----------------------------------------------------------*/
#mainContents {
	margin: 0 2%;
	padding: 0;
}

/*----- 事例詳細 -----*/
#example li{
	margin:3px 2px;
	width:25%;
}
#example p{
	margin:4px;
}




/*----------------------------------------------------------------------------*/
/*----- 見出し -----*/
h2{
  font-size:1.8em;
  padding:10px 14px 8px;
}

h3{
  margin:64px 0 6px;
}
.h3_first_margin{
  margin-top:42px;
}



/*----------------------------------------------------------------------------*/
/*----- ブロック構造 ---------------------------------------------------------*/
#Breadcrumb{font-size:92%;}

#sns_link{
  margin: 8px 2% 0;
  padding: 0;
}

/*-----お客様の声 -----*/
.box_voice img{
  float: none !important;
  margin: 8px auto;
}


/*----------------------------------------------------------------------------*/
/*----- Paragraph -----*/
.pJireiNext{
  margin: 40px 0 20px;
  text-align: center;
}



/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----- Lists -----*/
.list_2line li{
  float:none;
  margin:6px 0;
  width:100%;
}

.list_2line_border li{
  float:none;
  margin:6px 0;
  width:100%;
}

.list_top_jirei li{
  font-size:11px;
}


/*-----------------------------------------------------*/
/*-----事例一覧表示-----*/
#jirei_list li{
  font-size: 78%;
  width: 30%;
}
#jirei_list li img{
  width: 100%;
  max-width:120px;
}



/*----------------------------------------------------------------------------*/
/*----- Tables -----*/

/*　スマホ改行  */
.tblType1 th{
  border:none;
  display:block;
  font-weight:bold;
  margin:0;
  padding:4px 12px;
  width:100%;
}
.tblType1 td{
  border:none;
  display:block;
  margin:0px;
  padding:8px 12px;
  width:100%;
}



/*----------------------------------------------------------------------------*/
/*----- ＦＯＲＭ -----*/
.formS{ width:30%; }
.formM{ width:100%; }







}