@charset "utf-8";
/* CSS Document */
/*
Font-size list (base: 13px)
 62% =  8px
 70% =  9px
 77% = 10px
 85% = 11px        162% = 21px        239% = 31px
 93% = 12px        170% = 22px        247% = 32px
100% = 13px        177% = 23px        254% = 33px
108% = 14px        185% = 24px        262% = 34px
116% = 15px        193% = 25px        270% = 35px
124% = 16px        200% = 26px        277% = 36px
131% = 17px        208% = 27px        285% = 37px
139% = 18px        216% = 28px        293% = 38px
147% = 19px        224% = 29px        300% = 39px
154% = 20px        231% = 30px        308% = 40px
*/

/* clearfix 設定
 :after { content: ''; display: block; clear: both; }
--------------------------------------------------------------------*/
/* For modern browsers */

.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
/* For IE 6/7 (trigger hasLayout) */

.clearfix {
	zoom: 1;
}




.navBlock {
  display:none;
}
.subttl {
  width:76px;
  height:auto;
  margin:0 0 0 10px;
}
.contactBtn {
  float:right;
  width:130px;
  height:auto;
  margin:10px 10px 10px 0;
}
.contactBtn a {
  display:block;
  border:#BBB solid 1px;
  color:#BBB;
  text-align:center;
  font-size:139%;
  padding:8px 0;
}
.contactBtn a:hover {
  transition: color 0.4s ease 0s,background 0.4s ease 0s;
  color:#5CDDCB;
  background:#D5F8ED;
  text-decoration:none;
}



header {
  background-image:url(../images/top_visual.jpg);
  background-size:cover;
  background-position:center center;
  text-align:center;
}

#logo {
  padding:0 0 16px;
}
header p {
  color:#FFF;
  line-height:2em;
  font-size:108%;
}
header h2 {
  text-indent:-9999px;
  height:0;
  margin:0;
  padding:0px;
  color:#FFF;
}


#day01,#day02,footer {
  position:relative;
  background:#f2f2f2;
}

#day01 h2,#day02 h2 {
  position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 79px;
  text-align:center
}


.contentsBlock:after { content: ''; display: block; clear: both; }
.contentsBlock {
  position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width:1000px;
  height:460px;
}
.contentsFrame {
  position:relative;
  width:1000px;
  height:460px;
}
.imgBox {
  width:690px;
  height:460px;
  float:right;
}
.txtBox {
  position:absolute;
  left:0;
  bottom:0;
  color:#898989;
}
.txtBox h3 {
  font-size:162%;
  padding:0 0 12px;
}
.txtBox p {
  line-height:1.7em;
}

footer h2 {
  text-align:center;
  font-size:170%;
  color:#BBB;
}
footer ul {
  width:100%;
  height:auto;
  display: flex;
  display: -webkit-flex;
  padding:20px 0 0;
}
footer li {
  width:50%;
}
.tel {
  text-align:right;
}
.mail {
  text-align:left;
}
.mail img {
  margin:0 0 0 20px
}
footer h3 {
  text-align:center;
  padding:100px 0 20px;
}
footer p {
  text-align:center;
  line-height:1.7em;
}

a:hover img {
  transition: opacity 0.4s ease 0s;
  filter: alpha(opacity=70);
  -moz-opacity:0.7;
  opacity: 0.7;
  
}

#tnav01 {
  position:absolute;
  top:0px;
  left:0px;
  z-index:995;
  display:block;
  border-bottom:#e5e5e5 solid 1px;
  width:100%;
  height:50px;
  background:rgba(255,255,255,0.7);
}
#tnav01 ul {
  float:right;
  width:430px;
  height:auto;
  display: -webkit-flex;
  display: flex;
  padding:20px 8px 0;
  font-size:92.4%;
  z-index:999;
}
#tnav01 li {
  padding:0 6px;
}
#tnav01 li a {
  color:#666;
}
#tnav01 li a:hover {
  transition: color 0.4s ease 0s,background 0.4s ease 0s;
  color:#5CDDCB;
  text-decoration:none;
}

#day1,#day2 {
  display:none;
  position:absolute;
  top:12px;
  z-index:996;
  width:80px;
  margin:0 auto;
}
#pagetopBtn{
  position:absolute;
  bottom:60px;
  z-index:998;
  width:100%;
  margin:0 auto;
  text-align:right;
}
#pagetop {
  display:block;
  margin:0 45px 0 0;
  color:#666;
  font-size:120%;
  font-weight:bold;
}
#pagetopBtn a:hover {
  transition: color 0.4s ease 0s,background 0.4s ease 0s;
  color:#5CDDCB;
  text-decoration:none;
}



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

#tnav01,#day1,#day2,#pagetopBtn {
  display:none;
}
header {
  padding:50px 10px 30px;
}
header p {
  padding:60px 0 0;
  text-align:left;
  line-height:1.4em;
}
header p span {
  display:none;
}

#day01 h2,#day02 h2 {
  position:relative;
  margin: 0px auto;
  width: 100%;
  height: auto;
  text-align:center;
  padding:20px 0;
}
#day01 h2 img,#day02 h2 img {
  width:auto;
  height:50px;
}
.navBlock:after { content: ''; display: block; clear: both; }
.navBlock {
  display:block;
  width:auto;
  height:auto;
  padding:10px 10px;
  position:relative;
}

.contactBtn a {
  font-size:116%;
  padding:5px
}
.subttl {
  float:left;
  margin:0 0 0 0px;
}
.subttl img {
  height:20px;
  width:auto;
  margin-top:3px;
}
.contactBtn {
  margin:0px 0px 0px 0;
}
#logo img {
  width:90%;
  height:auto;
}


.contentsBlock {
  position:relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 20px 10px;
  width:auto;
  height:auto;
}
.contentsFrame {
  position:relative;
  width:auto;
  height:auto;
}
.imgBox {
  width:auto;
  height:auto;
  float:none;
}
.imgBox img {
  width:100%;
  height:auto;
}
.txtBox {
  position:relative;
  padding:20px 0px;
}
.txtBox h3 {
  font-size:162%;
  padding:0 0 12px;
}
.txtBox p {
  line-height:1.7em;
}


footer {
  padding:20px 0 20px;
}
footer h3 {
  text-align:center;
  padding:30px 0 20px;
}

}