@charset "UTF-8";
/* CSS Document 




/*common
=========================================================*/
.box {
  /*width: 100vw;*//* ←横スクロールバーがでる */
  width: 100%;
  /*height: 100vh;*/
}

.box_gray {
  padding: 6em 0;
  background-color: #333;
  color: #F4EAD5;
}
.box_pink {
  padding: 6em 0;
  background-color: #D68189;
  color: #F4EAD5;
}

.tit_bottom {
  display: block;
  height: 1px;
  border:none;
  border-top :1px solid #999;
  width: 2em;
  margin: 1em auto 2em;
}





/*Header
----------------------------------------------------*/
.header {
  padding-top: 3rem; 
  background: url(../img/201802.jpg) no-repeat center top;
  background-size: cover;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  min-height: 550px;
}
.header h1,
.header ul {
  text-align: center;
}

.header h1 span {
  display: block;
  margin-bottom: 1.5em;
  font:400 1.1rem/1.6 san-serif;
}
.header h1 span.logo {
  font:200 3.6rem/0.6 'Dosis',san-serif;
  margin-bottom: .8em;
}
.header ul li {
  display: inline-block;
  margin: .5rem .2em;
}
.header ul li img {
width: 50px;
}

.header p,
.header p a {
  font-size: 1.4rem;
  color: #333;
  letter-spacing: 0.05em;
}

/*Footer
----------------------------------------------------*/
.footer {
  padding:2em 1em;
  background-color: #333;
  color: #FFF;
  text-align: right;
}

.box_gray h1 {
  margin-bottom: 1em;
  text-align: center;
  color: #C6A49A;
  font-size: 4rem;
  line-height: 0.8;
}
.box_pink h1 {
  margin-bottom: 1em;
  text-align: center;
  color: #F4EAD5;
  font-size:4rem;
  line-height: 0.8;
}

.box_gray h1 hr,
.box_pink h1 hr {
  display: inline-block;
  width: 30px;
  border-top:1px solid;
}

.box_gray h1 hr {
  border-color: #C6A49A;
}
.box_pink h1 hr {
  border-color: #F4EAD5;
}


/*
#works p {
  text-align: center;
  font-size: 90%;
  color: #C6A49A;
}
*/

#works ul {
  text-align: center;
}
#works ul li a img {
  border-radius: 50%;
  -webkit-filter: grayscale(1); /* Webkit */
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* W3C */
}
#works ul li a:hover img {
  -webkit-filter: none; /* Webkit */
  filter: none; /* IE6-9 */
  filter: none; /* W3C */
}

#works ul li.icol2 {
  width: 40%;
  margin: 5%;
  vertical-align: top;
}

#works ul li.icol2 p {
  color: #FFF;
  font-size: 1.2rem;
  letter-spacing: normal;
}
#works ul li.icol2 p a {
  color: #FFF;
  font-size: 1.2rem;
  letter-spacing: normal;
}

#works ul li.icol2 p.cliant {
  margin: 1.8em 0 1.2em;
  font-weight: 600;
}

#works ul li.icol2 p.cliant a {
  position: relative;
  display: block;
  text-decoration: none;
}

#works ul li.icol2 p.cliant a:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  /*-webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);*/
  transform: scaleX(0);
  background-color: #D4CFBE;
  /*-webkit-transition: all .3s ease;*/
  transition: all .3s ease;
}
#works ul li.icol2 p.cliant a:hover:after {
  /*-webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);*/
  transform: scaleX(1);
}


#works ul li.icol2 .category {
  display: block;
  
}

#works ul li.icol2 .category span {
  display: inline-block;
  padding:.2em 1.5em .3em;
  background-color: #555;
  /*font-size: 40%;*/
  font-weight: 400;
  line-height: 1.0;
  border-radius: .8em;
}

#works .text_link {
  text-align: right;
  cursor: pointer;
  font-size: 1.4rem;
  color:#C6A49A;
}
#works .att {
  display: none;
  margin:2em 0;
  text-align: center;
  color:#C6A49A;
}

#contact p {
  text-align: center;
}

#contact p a {
  padding-left: 1.5em;
  background: url(../img/ico_contact_mail.png) no-repeat 0 50%;
  color: #FFF;
}


#back-top {
  position: fixed;
  bottom: 50px;
  right: 1em;
  /*margin-left: -150px;*/
  opacity: 0.7;
  z-index: 10;
}
/*
#back-top a {
  width: 60px;
  height: 60px;
  padding: 10px;
  display: block;
  background-color: #FFF;
  border-radius: 50%;
  line-height: 1.0;
  text-align: center;
  font: 600 1.3rem/1.0 'Dosis',san-serif;
  letter-spacing: normal;
}
*/

#back-top a {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 70px;
  padding: 25px 10px 10px;
  display: block;
  background-color: #FFF;
  border-radius: 50%;
  line-height: 1.0;
  text-align: center;
  font: 600 1.3rem/1.2 'Dosis',san-serif;
  letter-spacing: normal;
}


#back-top a span {
  position: absolute;
  left:0;
  right:0;
  top:10px;
  /*bottom:0;*/
  margin: auto;
  width: 15px;
  height: 15px;
  border-top:1px solid #333;
  border-right:1px solid #333;
  transform: rotate(-45deg);
}







/*media Queries (481px)
------------------------------------------------------------------------*/
@media only screen and (min-width: 481px) {}/* min481px

/*media Queries (768px)
------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) {


.header {
padding-top: 7rem;
}
.header ul li {
  margin: 1.5rem .2em;
}
.header h1 span.logo {
font-size: 4rem;
}

#works ul li.icol2 {
  width: 15%;
  margin: 5%;
}
#works ul li.icol2 p,
#works ul li.icol2 p a {
  font-size: 1.1rem;
}


}/* min768px


/*media Queries (960px)
------------------------------------------------------------------------*/
@media only screen and (min-width: 960px) {

.header,
.box_pink {
  height: 100vh;
}

.box_gray {
  width: 100%
}
.box_pink h1 {
  margin-bottom: 2em;
}


}/* min960px
 

/*media Queries (1280px)
------------------------------------------------------------------------*/
@media only screen and (min-width: 1280px) {}/* min1280px






/* Flex Box */
.wrap-flex {
  flex-wrap: wrap;
}
.wrap-flex > div {
  display: flex;
  background: #DDD;
  font-size: 2rem;
  text-align: center;
}
.wrap-flex > div:nth-child(even) {
  background: #BBB;
}

.container_2017 {
  
}



@media only screen and (min-width: 481px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 960px) {}
@media only screen and (min-width: 1280px) {}