/**
Theme Name: 長谷川石材工業用CSS
Author: Hitoshi Sasaki
Version: 1.00
**/

.slicknav_menu { display: none; }

img { border:0; }
html,body  { margin: 0; padding: 0; font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; overflow-x:hidden;}
header,footer,#contents { width:980px; margin:0 auto; }

/* header */
#hframe { display:flex; justify-content: space-between; padding:6px 0;  }
h1 { font-size:10px; margin:0; padding:0; }
#hframe ul { display:flex; justify-content: right; margin:0; padding:0; }
#hframe li { list-style-type:none; text-align:right; margin:0 0 0 8px;}
#hframe li div { font-size:10px; }
a.hIcBtn { display:block; text-align:center; background-color:#395CA3; color:#FFF; text-decoration:none; font-size:10px; border-radius:6px; width:42px; height:42px; box-sizing:border-box; padding:4px 0;}
a.hIcBtn img { vertical-align:bottom; }
#menu { display:flex; justify-content: space-between; border-top:1px solid #000; border-bottom:1px solid #000; margin:0; padding:0 24px;  }
#menu li { list-style-type:none; text-align:center; margin:0; padding:0; }
#menu li a { display:block; text-decoration:none; color:#000; font-size:14px; padding:6px 12px 3px; }
#menu li a.on { border-bottom:3px solid #395CA3; }
#menu li.spOnly { display:none; }
/* footer */
footer { background:url("images/ft_bk.png") no-repeat 0 0;  display:flex; justify-content: space-between; height:97px; box-sizing:border-box; padding:24px 32px; }
#ftCompany { display:flex; }
#ftLogo { font-size:10px; font-weight:bold; }
#ftAdr { font-size:10px; font-weight:bold; padding:14px ; }


#ftSub ul { display:flex; justify-content: flex-end; margin: 14px 0 0 0; padding:0; font-size:12px; }
#ftSub li { list-style-type:none; margin:0 0 0 8px; padding:0 0 0 8px; border-left:1px solid #395CA3;  }
#ftSub li:first-child { border:0; }
#ftSub li a { color:#395CA3; text-decoration:none; font-weight:bold;}
#copyright { font-size:10px; }


/* */
#contents { padding:24px 0; }
.flexBox { display:flex; justify-content: space-between; }

/* top */
#tpMain { background:url("images/tp_main.jpg") no-repeat 0 0; width:100%; height:420px; box-sizing:border-box; padding:50px 32px; }
#tpMain h2 { font-size:32px; font-weight:normal; margin:0 0 18px 0; padding:0; }

#sidebar { width:310px; margin:24px 24px 0 0; }
#sidebarMenu { margin:0; padding:0; }
#sidebarMenu li { list-style-type:none; border:1px solid #000; border-left:4px solid #395CA3; position:relative; width:300px; height:138px; box-sizing:border-box; padding:8px 12px; margin-bottom:18px; }
#sidebarMenu li a { display:block; position:absolute; top:0; left:0; width:100%; height:100%; text-decoration:none; }
#sidebarMenu li img { position:absolute; top:4px; right:4px; }
#sidebarMenu li div { position:absolute; bottom:8px; left:12px; color:#395CA3; font-weight:bold; font-size:24px; }

#mainFrame { width:660px; }
/* */
section { margin:0 ; padding:32px 0; border-bottom:1px dotted #808080; }
section:first-child { margin-top:32px; padding-top:0; }
#conceptBox h3 { color:#395CA3; font-size:24px; margin:0; padding:0; }
#conceptBox div { font-size:12px; margin:6px 16px 14px 0; }
ul#conceptUL { margin:14px 0 0 0; padding:0; }
ul#conceptUL li { list-style-type:none; color:#395CA3; font-size:16px; }

h3 { margin:0; padding:0; }
h3.h3bk { background:url("images/h3_bk.jpg") no-repeat 0 0; line-height:40px; color:#FFF; text-indent:0.5em; }

.tpItmList { width:272px; position:relative; }
.tpItmList h5 { font-size:32px; margin:0; padding:0; border-bottom:1px solid #000; }
#wagata h5:first-letter { color:#76A32D; }
#yougata h5:first-letter { color:#CF7B0E; }
#desingers h5:first-letter { color:#A76283; }

.itmNotes { font-size:12px; }
.itmNotes div { font-size:10px; }

.tpItmList ul { margin:0; padding:0; display:flex; justify-content: space-between; width:250px; flex-wrap:wrap; position:absolute; bottom:0; left:0; }
.tpItmList li { list-style-type:none; margin:6px 0 0 0; padding:0; position:relative;  }
.tpItmList li div { font-size:8px; display:none; }
.tpItmList li img,.itmImg img  { vertical-align:bottom; }
.tpItmList li img { cursor:pointer; }
.tpItmList li img:hover { }

.itmImg { border:1px solid #000; padding:4px; position:relative; }
.itmImg div { position:absolute; bottom:0; left:0; background-color:rgba(0,0,0,0.6); font-size:11px; color:#FFF; width:370px; text-align:center; margin:4px; padding:4px 0;}

#warranty { font-size:14px;  }
#warranty h3 { font-size:24px; margin-bottom:14px;  }
#warImg { text-align:center; margin-left:16px; padding-top:24px; }

#tpFact  h3,#tpTenji h3 { font-size:24px; margin-bottom:14px;  }

#tpTenji iframe { margin:24px 0; }

/* page */
div.page h4 { font-size:20px; margin:12px 0;  }
div.page p { margin-top:0; font-size:13px; }
.imgR { margin-left:18px; }

section.pointBox { display:flex; justify-content: space-between; border-bottom:0; }
section.pointBox h3 { font-size:22px; border-left:6px solid #628E4C; padding-left:6px; margin-top:32px; }
section.pointBox h3:first-child { margin-top:0; }
.LBox { width:320px; }
.RBox { width:300px; }

section.pointBox strong { color:#628E4C; }
section.pointBox .LBox ul { margin:6px 0; padding:0; font-size:14px; color:#628E4C; }
section.pointBox .LBox li { list-style-type:none; margin:0; padding:0;  }

#flowBox h4 { margin:0; padding:0; color:#628E4C; font-size:18px; }
#flowBox ul { margin:0; padding:0; font-size:13px; }
#flowBox li { margin:0 0 32px 0; padding:8px; list-style-type:none; background-color:#EDF2C5; display:flex; border-radius:12px; position:relative; }
#flowBox li:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #EDF2C5 transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}
#flowBox li:last-child:after { border:0; 
}
#flowBox li div:first-child { margin-right:8px; }

section#FeatureBox { padding-top:0; }
section#FeatureBox div { padding:6px; background-color:#395CA3; margin-bottom:32px; }
section#FeatureBox h4 { margin:0; padding:0; text-align:center; color:#FFF67F; font-size:28px; font-weight:normal; }
section#FeatureBox ul { margin:0 8px 12px; padding:6px 8px; background-color:#FFF; color:#395CA3;  border-radius:12px; }
section#FeatureBox li { list-style-type:none; }

a.hrefContact { text-decoration:none; display:block; color:#FFF; background-color:#CF7B0E; text-decoration:none; padding:6px; font-size:18px; text-align:center; }

/* secMoving */
#secMoving p { margin:16px 0; }
#moving h4 { margin:0; padding:0; color:#CF7B0E; font-size:18px; }
#moving ul { margin:0; padding:0; font-size:13px; }
#moving li { margin:0 0 32px 0; padding:8px; list-style-type:none; background-color:#FEEBBE; display:flex; border-radius:12px; position:relative; }
#moving li:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #FEEBBE transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}
#moving li:last-child { margin-bottom:8px; }
#moving li:last-child:after { border:0;  }
#moving li div:first-child { margin-right:8px; }

#moving div { font-size:12px;}

/* tidyingup */
#secTidyingup h5 { color:#395CA3; font-size:18px; margin:0; padding:0; }
#secTidyingup dl { margin:0 0 24px 0; padding:0; }
#secTidyingup dt { margin:0; padding:0; font-size:18px; }
#secTidyingup dt:first-letter { color:#395CA3;  }
#secTidyingup dd { margin:0 0 0 1em; padding:0; }

#mvMemo { color:#395CA3; margin-bottom:24px; }
.babox { margin-bottom:24px; }
.babox div { position:relative; }
.babox div img { position:absolute; top:calc(50% - 20px); left:-10px; }

/* secRepair */
#secRepair .RBox h5 { color:#395CA3; font-size:18px; margin:0; padding:0; }
#secRepair .RBox ul { margin:0; padding:0; }
#secRepair .RBox li { list-style-type:none;  margin:0 0 6px 0; padding:0; }
#secRepair .RBox li span { display:inline-block; background-color:#395CA3; color:#FFF; width:24px; text-align:center; border-radius:12px; margin-right:8px;  }
#repFlow { margin-bottom:24px; }

#repCost { background-color:#CF7B0E; color:#FFF; font-size:20px;  text-indent:0.5em; }
#repCost span { font-size:12px; }

#repDetail { position:relative; margin:24px 0; text-align:center; }
#repDetail a { text-decoration:none; color:#000; }
#repDetail a img { vertical-align:middle; margin:0 4px; }
#repMainImg { position:relative; z-index:1; }
#repTxt01 { font-size:13px; position:absolute; top:-12px; left:0; z-index:10; text-align:left; }
#repTxt02 { font-size:13px; position:absolute; top:80px; left:0; z-index:10; text-align:left; }
#repTxt03 { font-size:13px; position:absolute; top:140px; left:0; z-index:10; text-align:left; }

#href01 { font-size:13px; position:absolute; top:235px; left:0; z-index:10; text-align:left; }
#href02 { font-size:13px; position:absolute; bottom:0; left:0; z-index:10; text-align:left; }
#href03 { font-size:13px; position:absolute; top:-12px; right:0; z-index:10; text-align:left; }
#href04 { font-size:13px; position:absolute; top:35px; right:0; z-index:10; text-align:left; }
#href05 { font-size:13px; position:absolute; top:80px; right:0; z-index:10; text-align:left; }
#href06 { font-size:13px; position:absolute; top:120px; right:0; z-index:10; text-align:left; }
#href07 { font-size:13px; position:absolute; top:160px; right:0; z-index:10; text-align:left; }
#href08 { font-size:13px; position:absolute; top:210px; right:0; z-index:10; text-align:left; }
#href09 { font-size:13px; position:absolute; bottom:0; right:0; z-index:10; text-align:left; }

#repDetailSP { display:none; }

#accBox { background-color:#FFFBC7; padding:16px; margin:24px 0; font-size:13px; }
#accBox h6 { color:#CF7B0E; font-size:20px; margin:0; padding:0; }

/* epsode */
.epTitle { font-size:16px; border-top:1px solid #AAA; border-bottom:1px solid #999; padding:4px 0; margin:4px 0; }

#secEpisode p { font-size:13px; }
#secEpisode p strong { font-size:14px; color:#395CA3; }

/* */
#greeting h2 { color:#395CA3; }


dl.flexBox { flex-wrap: wrap; font-size:13px; }
dl.flexBox dt { width:10%; margin:0; padding:0; }
dl.flexBox dd { width:90%; margin:0; padding:0; }

dl#enkaku dt { width:20%;}
dl#enkaku dd { width:80%; }

#secAccess div { margin:8px 0; }
#secAccess iframe:first-child { margin-bottom:24px; }

/* contact */
#secContact h2,#secDocReq h2 { text-align:center; background-color:#727171; padding:4px 0; color:#FFF; font-size:20px; margin:0 0 0 0; }
.btnBox { text-align:right; }
.btnBox button { background-color:#727171; border:0; color:#FFF; font-size:20px; padding:0 24px; }

#secContact dt,#secContact dd { margin:0; padding:0; }
#secContact dl.flexBox dt ,#secDocReq dl.flexBox dt { width:20%; padding:4px 0;  }
#secContact dl.flexBox dd ,#secDocReq dl.flexBox dd { width:80%; padding:4px 0; }
#secContact dl.flexBox dd input ,#secDocReq dl.flexBox dd input { width:100%; box-sizing:border-box; padding:4px; }
#secContact dl.flexBox dd textarea ,#secDocReq dl.flexBox dd textarea{ width:100%; height:150px; box-sizing:border-box; padding:4px;  }

dd.flexBox { flex-wrap: wrap; justify-content: start; }
dd.flexBox div { width:40%; }

#dlQue dd { margin:6px 0 12px 0.5em; }

#secDocReq h2 { margin-bottom:14px;  }

#secPolicy h2 { font-size:16px; background-color:#CCC; text-indent:0.5em; }
#secPolicy dl { font-size:13px; }
#secPolicy dt { margin:0; padding:0; }
#secPolicy dd { margin:0 0 18px 28px; padding:0; }

a#btnTop { position:fixed; bottom:24px; right:24px; text-decoration:none; display:block; width:48px; height:48px; line-height:48px; background-color:#395CA3; color:#FFF; text-align:center; border-radius:24px; }

.err { background-color: #FF0000; color:#FFF;  padding:4px; text-align:center; }
.success { background-color: #0000FF; color:#FFF;  padding:4px; text-align:center; }

@media screen and ( max-width:980px ) {
  /* index or common */
  header,footer,#contents { width:100%; overflow:hidden; }
  h1 { padding:8px; }

  #hframe ul { display:none; }

  #sidebar { display:none; }
  #menu    { display:none; }
  #menu li.spOnly { display:block; }

  #tpMain { height:auto; padding:14px; background-size: cover;}
  #tpMain h2 { font-size:3.2vw; margin:0; padding:0; }
  #tpMain div { font-size:2.4vw; }

  #mainFrame { width:90%; margin: auto; }
  .flexBox { display:block; }

  #conceptImg { text-align:center;  }
  #conceptImg img { width:100%; height:auto; max-width:304px; }
  #conceptBox div { font-size:3.2vw; margin:6px 16px 14px 0; }
  ul#conceptUL li { font-size:3.2vw; padding-left:1em; text-indent:-1em; }
  

  h3.h3bk { line-height:40px; font-size:3.0vw; }

  .tpItmList { width:100%; }
  .tpItmList h5 { font-size:5.2vw; }

  .tpItmList ul { width:100%; justify-content: center; position:static; margin-bottom:8px;  }

  .itmImg img { width:100%; height:auto; }
  .itmImg div { width:calc(100% - 8px); }

  #tpFact  h3 { font-size:3.6vw; }
  #tpTenji h3 { font-size:3.4vw; }
  #warranty { font-size:3.0vw;  }
  #warranty h3 { font-size:3.4vw; }

  #tpFact div img { width:100%; height:auto; }
  #tpFact div.spFlex img { width:49%; height:auto; }

  #tpTenji div { font-size:2.6vw; }
  #tpTenji div img { width:100%; height:auto; }
    div.spFlex { display:flex; justify-content: space-between; }
    div.spFlex br { display:none; }
    #tpTenji div.spFlex img { width:49%; height:auto; }

/* footer */
  footer { display:block; height:auto; padding:24px 32px; background:url("images/ft_bk_sp.png") no-repeat 0 0; 　}
  #ftCompany { display:block; }
  #ftLogo { font-size:10px; font-weight:bold; }
  #ftAdr { font-size:2.6vw; font-weight:bold; padding:14px 0 ; }


  #ftSub ul { display:flex; justify-content: flex-end; margin: 0 0 0 0; padding:0; font-size:2.6vw; }
  #ftSub li { list-style-type:none; margin:0 0 0 8px; padding:0 0 0 8px; border-left:1px solid #395CA3;  }
  #ftSub li:first-child { border:0; }
  #ftSub li a { color:#395CA3; text-decoration:none; font-weight:bold;}
  #copyright { font-size:2.4vw; }


  a#btnTop {display:none; }

  .slicknav_menu { display: block; position:fixed; top:0; left:0; width:100%; z-index:9999; background-color:rgba(255,255,255,0) !important; }
  .slicknav_nav li { background-color:#333 !important; } 

  /* page */
  div.page h4 { font-size:4.2vw; }
  div.page h4 br { display:none; }
  .imgR { margin-left:0; text-align:center; }
  .imgR img { width:100%; height:auto; max-width:304px; }

  section.pointBox { display:block; }
  section.pointBox h3 { font-size:4.2vw; }
  .LBox { width:100%; }
  .RBox { width:100%; margin-top:24px; }


  #FeatureBox h4 { font-size:4.2vw; }
  #FeatureBox ul { font-size:3.6vw; }
  #FeatureBox li { padding-left:1em; }
  #FeatureBox li { text-indent:-1em; }

  a.hrefContact { font-size:3.6vw;  }

  #flowBox h4 { font-size:4.2vw; }
  #flowBox ul { margin:0; padding:0; font-size:3.2vw; }


  #secTidyingup h5 { font-size:4.2vw;  }
  #secTidyingup dt { font-size:3.8vw; }
  #secTidyingup dd { font-size:3.6vw; }

  .babox { margin-bottom:24px; text-align:center; }
  .babox div {text-align:center;  }
  .babox div img { position:static; transform: rotate(90deg); }



/* secRepair */
  #secRepair .RBox h5 { font-size:4.2vw; }

  #repCost { font-size:4.2vw; margin-bottom:6px; }
  #repCost span { font-size:3.2vw; display:block; }

  #repDetail { display:none; }
  #repDetailSP { display:block; }
  #repDetailSP div { border:1px solid #999; margin:0 0 4px 0; padding:2px 8px; }
	       div#hakaImg { text-align:center; border:0; }
		div#hakaImg img { width:100%; max-width:464px; height:auto; }

  #repDetailSP a { display:block; text-decoration:none; color:#000; border:1px solid #999; margin:0 0 4px 0;  }
  #repDetailSP a img { vertical-align:middle; margin:2px 8px; }

  #accBox { font-size:3.6vw; }
  #accBox h6 {font-size:4.0vw; margin:0; padding:0; }


  /* company */
  #company h2 { font-size:4.6vw; }
  dl.flexBox { display: block; font-size:3.6vw; }
  dl.flexBox dt { width:100%; margin:0; padding:0; border:1px solid #999; padding:4px; }
  dl.flexBox dd { width:100%; margin:0 0 18px 0; padding:0; }

  dl#enkaku dt { width:100%;}
  dl#enkaku dd { width:100%; }

  /* contact */
  #secContact h2,#secDocReq h2 { font-size:4.2vw; }
  .btnBox button { font-size:4.2vw; }

  #secContact dl.flexBox dt ,#secDocReq dl.flexBox dt { width:100%; padding:4px 0; border:0; }
  #secContact dl.flexBox dd ,#secDocReq dl.flexBox dd { width:100%; padding:4px 0; margin-bottom:14px; }
  #secContact dl.flexBox dd input ,#secDocReq dl.flexBox dd input { width:100%; }
 
dd.flexBox { flex-wrap: block; }
dd.flexBox div { width:100%; }

#dlQue { font-size:3.2vw; }


#secDocReq h2 { margin-bottom:14px; }


}