@charset "utf-8";
/* CSS Document */
#ttlArea {
  width:100%;
  height:460px;
  background-repeat:no-repeat;
  background-image:url(../images/main.jpg);
  background-size:cover;
  background-position:center top;
  top:0px;
  left:0px;
  z-index:10;
}
.ttlBlock {
  width:1000px;
  height:460px;
  margin:0 auto;
  position:relative;
}
.ttlBox {
  position:absolute;
  top:185px;
  width:200px;
  height:200px;
  display:block;
  background-image:url(../../common/images/bg_murasaki.jpg);
  opacity:0.8;
}
.ttlBlock h1 {
  position:absolute;
  top:245px;
  width:200px;
  height:auto;
  text-align:center;
}


#contentsArea {
}


.threeBlock {
  width:1016px;
  height:auto;
  margin:0 auto;
}
.threeBlock h2 {
  text-align:center;
  padding:40px 0 10px;
}
.threeBlock ul {
  display: flex;
  display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.threeBlock li {
  margin:8px;
  background-color: #CCC;
  width:322px;
}
.threeBlock li dl {
  padding:20px;
}
.threeBlock li dd {
  padding:8px 0 0;
}
.threeBlock li dd p {
  color:#000;
  line-height:1.4em;
  padding:8px 0 0;
}
.facTtl {
  display: flex;
  display:-webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
}
.facTtl h3 {
  height: auto;
  width: 60px;
  padding:5px 0;
  border-radius:12px;
  text-align:center;
}
.karyu {
  background-color: #9b505e;
}
.senryu {
  background-color: #3977a6;
}
.facTtl h4 {
  color:#000;
  font-size:131%;
  padding:5px 0;
  line-height: 1.2em;
}

.detailBtn {
  width: 208px;
	height: 26px;
  margin:0 auto;
}
.detailBtn a {
  width: 208px;
	height: 26px;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
	border-radius: 4px;
	background-color: #9c7883;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.detailBtn a:hover {
  text-decoration:none;
  filter: alpha(opacity=70);
  -moz-opacity:0.7;
  opacity: 0.7;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.detailBtn_form {
  width: 400px;
	height: auto;
  margin:10px auto;
  font-size: 123%;
}
.detailBtn_form a {
  width: 400px;
	height: auto;
  padding: 10px;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
	border-radius: 4px;
	background-color: #9c7883;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.detailBtn_form a:hover {
  text-decoration:none;
  filter: alpha(opacity=70);
  -moz-opacity:0.7;
  opacity: 0.7;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}




#kodawarisArea {
  background-image:url(../../common/images/bg_kodawari.jpg);
  padding:40px 0 60px;
}
.kodawariBlock {
  width:1000px;
  height:auto;
  margin:0 auto;
  position:relative;
}
.tokan {
  font-family: "hannari";
	color: #a1914c;
	font-size: 139%;
	font-weight: 400;
	line-height: 1.4em;
  letter-spacing:0.5em;
}
.kodawariBlock h2 {
  font-family: "hannari";
	font-size: 231%;
  height:30px;
  padding:9px 0 8px;
}
.zuBox {
  width:100%;
  text-align:center;
  margin-top:-60px;
}
.pdfBtn {
  position:absolute;
  left:67px;
  bottom:30px
}
.pdfBtn a {
  width: 275px;
	height: 30px;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
	border-radius: 4px;
	background-color: #9c7883;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.pdfBtn a:hover {
  text-decoration:none;
  filter: alpha(opacity=70);
  -moz-opacity:0.7;
  opacity: 0.7;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.wifi_bnr {
  position: absolute;
  left: 67px;
  top:100px;
}

li.tsuikiBox {
  background-color:#000;
  width:660px;
}
li.tsuikiBox p {
  line-height:1.6em;
}
.chitose_read {
    text-align: center;
    line-height: 1.5em;
  }
  .conv_img {

  }
  .conv_img ul {
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    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;
    -webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;
  }
  .conv_img li {
    padding: 30px 0 0;
  }
  .cspec_block{
    padding: 30px 0 0;
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;
  }
  .cspec_img {
    width: 610px;
    height: auto;
  }
  .cspec_img img {
    width: 100%;
    height: auto;
  }
  .cspec_txt {
    width: auto;
    height: auto;
  }
  .cspec_txt p {
    line-height: 2em;
    padding: 0 0 10px 13px;
    text-indent: -13px
  }
  .cspec_txt_ex p {
    line-height: 1.6em;
    padding: 0 0 10px 13px;
    text-indent: -13px;
  }

/* SmartPhone用設定
------------------------------------------------------------------- */
@media screen and (min-width: 320px) and (max-width: 767px) {

  #ttlArea {
    height:200px;
  }
  .ttlBlock {
    width:100%;
    height:200px;
    margin:0 auto;
    position:relative;
  }
  .ttlBox {
    display:none;
  }
  .ttlBlock h1 {
    top:85px;
    width:100%;
  }
  
  
 
  .threeBlock {
    width:auto;
    padding:10px 10px 20px;
  }

  .threeBlock h2 {
    text-align:center;
    padding:10px 0 5px;
  }
  .threeBlock ul {
    display: block;
  }
  .threeBlock li {
    margin:0 0px 10px;
    background-color: #CCC;
    width:100%;
  }
  .threeBlock li dl {
    padding:20px;
  }
  .threeBlock li dt img {
    width:100%;
    height:auto;
  
  }
  .threeBlock li dd {
    padding:8px 0 0;
  }
  .threeBlock li dd h3 {
    background-color: #9b505e;
    height: 20px;
    width: 56px;
    border-radius:10px;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
  }
  
  

  #kodawarisArea {
    background-image:url(../../common/images/bg_kodawari.jpg);
    padding:20px 0 20px;
  }
  .kodawariBlock {
    width:auto;
    height:auto;
    margin:0 10px;
    position:relative;
  }
  .tokan {
    font-family: "hannari";
    color: #a1914c;
    font-size: 139%;
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing:0.5em;
  }
  .kodawariBlock h2 {
    font-family: "hannari";
    font-size: 231%;
    height:30px;
    padding:9px 0 8px;
  }
  .zuBox {
    width:100%;
    text-align:center;
    margin-top:0px;
  }
  .zuBox img {
    width:100%;
    height:auto;
  }
  .pdfBtn {
    width:288px;
    position:relative;
    left:auto;
    bottom:auto;
    margin:20px auto;
  }
  .pdfBtn a {
    width: 288px;
    height: 30px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border-radius: 4px;
    background-color: #9c7883;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  .pdfBtn a:hover {
    text-decoration:none;
    filter: alpha(opacity=70);
    -moz-opacity:0.7;
    opacity: 0.7;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }


  .wifi_bnr {
    position: relative;
    left: auto;
    top:auto;
    text-align: center;
  }
  li.tsuikiBox {
    background-color:#000;
    width:auto;
  }

  


  .chitose_read {
    text-align: center;
    line-height: 1.5em;
  }
  .conv_img {

  }
  .conv_img ul {
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    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;
    -webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;
  }
  .conv_img li {
    padding: 30px 0 0;
  }
  .cspec_block{
    padding: 30px 0 0;
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;
  }
  .cspec_img {
    width: 610px;
    height: auto;
  }
  .cspec_img img {
    width: 100%;
    height: auto;
  }
  .cspec_txt {
    width: auto;
    height: auto;
  }
  .cspec_txt p {
    line-height: 2em;
    padding: 0 0 10px 13px;
    text-indent: -13px
  }
  .cspec_txt_ex p {
    line-height: 1.6em;
    padding: 0 0 10px 13px;
    text-indent: -13px;
  }

  .detailBtn_form {
    width: 80%;
    height: auto;
    margin:10px auto;
    font-size: 123%;
  }
  .detailBtn_form a {
    width: 100%;
    height: auto;
    padding: 10px 0;
    display:block;
    text-align:center;
    vertical-align:middle;
    border-radius: 4px;
    background-color: #9c7883;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
  .detailBtn_form a:hover {
    text-decoration:none;
    filter: alpha(opacity=70);
    -moz-opacity:0.7;
    opacity: 0.7;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
  }
}