/*// Garan page// */

div.headerImageArea{
  text-align: center;
}

div.headerImageArea img.headerTitle.aboutHeaderTitle{
  max-width:150px;
  position: absolute;
  top: -20%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
div.headerImageArea img.headerTitle.aboutHeaderGaranIndexTitle{
  max-width:150px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

a#list_link{
  width:137px;
  display: inline-block;
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
a#list_link img{
  width:100%;
}
a#list_link img:hover{
  background-color: #000;
}
a#list_link:hover{

}

div.garanListArea{
  width:100%;
  background-color: #D1D5D6;
}

div.garanBox{
  width:33.333%;
  float: left;
  background-color: #fff;
}
div.garanThumbBox{
  width:100%;
  overflow: hidden;
  background-color: #000;
}
div.garanThumbBox img{
  display: block;
  width:100%;
  transition: all .5s;
}
div.garanThumbBox img:hover{transform: scale(1.1);}

div.garanBox a.name{
display: block;
width:100%;
padding:12px 15px 10px 15px;
position: relative;
box-sizing: border-box;
}
div.garanBox a.name:hover{
  opacity: 0.8;
}
div.garanBox a.name.odd{
  background-color: #E6EBE7;
}
div.garanBox a.name span.name{
display: block;
}
div.garanBox a.name span.arrow{
  position: absolute;
  right:10px;
  top:10px;
  color:#A28F2B;
}

@media screen and (max-width: 479px) {
  div.garanBox{width:100%; float: none;}
}/*query*/

@media screen and (min-width: 480px) and (max-width: 880px) {
  div.garanBox{width:50%;}
}/*query*/

@media screen and (min-width: 881px){
}/*query*/



div.areaWrapper.garanPage{
  background:url(../img/common/blue_bg1.png)top center repeat-x;
  background-color: #fff;
  min-height: 200px;
}

div.garanNakapage{
  padding-bottom:0;
}

div.dblWrapper.garanPage{
  width:96%;
  padding-top:50px;
  margin-left:2%;
}
div.left.garanPage{
  width:40%;
  float:left;
  text-align: center;
}
div.right.garanPage{
  width:58%;
  float:right;
}
div.left.garanPage.landscape{
  width:55%;
  float:left;
  text-align: center;
}
div.right.garanPage.landscape{
  width:43%;
  float:right;
}
img.garan_photo{
  width:100%;
}
h2.garan_name{
  padding:0!important;
  margin-top:100px;
  left:20px;
  position: relative;
}
h2.garan_name img{
  width:100%;
}
p.des.medium{
  font-size: 100%;
  color:#80826B;
  margin-bottom:30px;
  line-height: 1.5;
}
h2.kondoh_name{width:72px;}
h2.koudoh_name{width:72px;}
h2.koroh_name{width:72px;}
h2.raidoh_name{width:72px;}
h2.mieidoh_name{width:115px;margin-top:130px;}
h2.kyouzoh_name{width:72px;}
h2.houzoh_name{width:72px;}
h2.shinhouzoh_name{width:115px;margin-top:150px;margin-bottom:30px;}
h2.kaidan_name{width:72px;margin-top:130px;}
h2.kaizan_name{width:155px;margin-top:150px;margin-bottom:30px;}
h2.basho_name{width: 215px;margin-top:150px;margin-bottom:30px;}
h2.nandaimon_name{width:115px;margin-top:150px;margin-bottom:30px;}
h2.cyuukoudoh_name{width:115px;}
h2.kaisandoh_name{width:115px;margin-top:130px;}

@media screen and (max-width: 479px) {
  div.left.garanPage{float:none;width:100%;}
  div.right.garanPage{float:none;width:100%;}
  div.left.garanPage.landscape{float:none;width:100%;}
  div.right.garanPage.landscape{float:none;width:100%;}
  h2.garan_name{margin-top:30px;}
}/*query*/

@media screen and (min-width: 480px) and (max-width: 880px) {
  div.left.garanPage{float:none;width:100%;}
  div.right.garanPage{float:none;width:100%;}
  div.left.garanPage.landscape{float:none;width:100%;}
  div.right.garanPage.landscape{float:none;width:100%;}
  h2.garan_name{margin-top:30px;left:30px;}
}/*query*/

@media screen and (min-width: 881px){
}/*query*/



div.houmotsuArea{
  margin-top:30px;
  background-color: #F2F1F0;
  min-height: 200px;
}
div.houmotsu{
  padding:4% 3%;
  border-bottom: #ccc dotted 1px;
}
div.houmotsu.last{
  border-bottom: none;
}
div.houmotsu p.des{
  font-size: 90%;
}
div.houmotsu p.des.medium{
  font-size: 90%;
}
div.houmotsu div.left{
  float: left;
  width:40%;
  min-height: 30px;
}
div.houmotsuImgArea{
  width:96%;
  text-align: center;
   background-color: #000;
   margin:0 auto 20px auto;
}
div.houmotsuImgArea img{
  width:100%;
  display: block;
}
div.houmotsu div.right{
  float: right;
  width:56%;
}
h3.houmotsu{
  position: relative;
  left:23px;
}
h3.houmotsu img{
  width:100%;
}
h3.kondoh01{width:160px;}
h3.kondoh02{width:175px;}
h3.kondoh03{width:215px;}
h3.kondoh04{width:190px;}
h3.kondoh05{width:145px;}
h3.kondoh06{width:175px;}
h3.kondoh07{width:162px;}
h3.kondoh08{width:145px;}
h3.kondoh09{width:270px;}

h3.koudoh01{width:160px;}
h3.koudoh02{width:145px;}
h3.koudoh03{width:175px;}

h3.koroh01{width:105px;}
h3.koroh02{width:130px;}
h3.koroh03{width:160px;}
h3.koroh04{width:160px;}

h3.raidoh01{width:160px;}
h3.raidoh02{width:130px;}

h3.mieidoh01{width:160px;}
h3.mieidoh02{width:90%;max-width:360px;}

h3.kyouzoh01{width:160px;}

h3.shinhouzoh01{width:175px;}
h3.shinhouzoh02{width:185px;}
h3.shinhouzoh03{width:210px;}
h3.shinhouzoh04{width:220px;}
h3.shinhouzoh05{width:165px;}
h3.shinhouzoh06{width:130px;}
h3.shinhouzoh07{width:70px;}

h3.cyuukoudoh01{width:180px;}

div.processArea{
  box-sizing: border-box;
  width:90%;
  padding:40px 15px;
  text-align: left;
  margin:0 auto;
}
div.processArea h3{

}
div.processArea h3 img{
  max-width:430px;
  width:85%;
}
div.processArea p.processLead{
  margin-top:20px;
  font-size: 130%;
  color:#333;
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}
div.processArea p.processNumber{
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
  color:#80826B;
  font-size: 115%;
  border-bottom:#ccc dotted 1px;
  margin-top:30px;
  padding-bottom:10px;
  letter-spacing: 2px;
}
div.processArea p.processNumber span{
  font-size: 80%;
  color:#80826B;
  font-family: inherit;
}
div.processBoxArea{
  width:100%;
}
div.processBox{
  width:33.333%;
  float: left;

}
div.processBoxInner{
  width:96%;
  margin:25px auto;
}
div.processBoxInner img{
  width:100%;
}
div.processBoxInner p.caption{
  box-sizing: border-box;
  width:100%;
  line-height: 1.6;
  font-size: 78%;
  padding:0 5%;
}
p.process_copyright{
  text-align: right;
  color:#333;
  font-size: 82%;
}

@media screen and (max-width: 479px) {
  div.houmotsu{padding-top:30px;}
 div.houmotsu div.left{float:none;width:100%;}
 div.houmotsu div.right{float:none;width:100%;}
 div.processBox{width:50%;}
 div.clear2box{clear:both;}
}/*query*/

@media screen and (min-width: 480px) and (max-width: 560px) {
div.houmotsu div.left{float:none;width:100%;}
 div.houmotsu div.right{float:none;width:100%;}
 div.clear3box{clear:both;}
}/*query*/

@media screen and (min-width: 561px){
  div.clear3box{clear:both;}
}/*query*/