@charset "UTF-8";

/*  index.html CSS  */

/* ===========
:: PC 960px〜
============ */
/* -------------- 
    slick
 ---------------- */
/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}
/*左右の矢印の位置を変える*/
#topImgBox .slick-next {
    right: 20px;
    z-index: 99;
}
#topImgBox .slick-prev {
  left: 15px;
  z-index: 100;
}
/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
color: #fff;
}
/*スライド画像の横幅可変*/
#topImgBox .slider img {
width: 100%;
height: auto;
border-left:1px solid #fff;
border-right:1px solid #fff;
}

/* -------------- 
    main
 ---------------- */
.newList {
padding: 5rem 0;
}
/* -------------- 
    NEW施工事例 / 画像付き一覧
 ---------------- */
.newList ul.list {
margin: 3rem 0;
text-align:center;
}
.newList ul.list li {
width: 30%;
display: inline-block;
vertical-align:top;
margin: 2rem 1% 2rem;
font-size: 1.4rem;
}
.newList ul.list li dl {
}
.newList ul.list li dt.img {
}
.newList ul.list li dt.img a.coverImg {
width: 100%;
height: 180px;
}
.newList ul.list li dd {
margin: 1rem 0;
}
.newList ul.list li dd.date {
font-family: Arial, Helvetica, sans-serif;
}
.newList ul.list li dd.date span{
color: #f90;
margin: 0 0 0 1rem;
}
.newList ul.list li dd.title a{
color: #669900;
border-bottom: 1px dotted #999;
}
.newList ul.list li dd.category{
}
.newList ul.list li dd.category ul{
}
.newList ul.list li dd.category ul li{
text-align:center;
font-size: 1rem;
display: inline-block;
background: #ccc;
margin: 0.5rem 1.5% 0;
border-radius: 10px;		/* CSS3草案 */
-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
-moz-border-radius: 10px;	/* Firefox用 */
}
.newList ul.list li dd.category ul li a{
color:#333;
}
/* -------------- 
   アトリエカンナ概要
---------------- */
#aboutBox {
padding: 5rem 0;
margin: 3rem auto;
background: rgba(255,204,204,0.30);	
}
#aboutBox h2{
width: 65%;
float: left;
}
#aboutBox .contact{
width: 290px;
height: 130px;
background: #fff;
border-radius: 10px;		/* CSS3草案 */
-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
-moz-border-radius: 10px;	/* Firefox用 */
box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
-moz-box-shadow:rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
float: right;
margin-top: -7rem;
margin-bottom: 1rem;
padding: 1rem;
}
#aboutBox .contact h3{
color: #999;
text-align:center;
font-size: 1.2rem;
}
#aboutBox .contact ul{
margin: 0.5rem 0;
}
#aboutBox .contact li.tel{
font-family: Arial, Helvetica, sans-serif;
font-size: 3.4rem;
letter-spacing: 0.2rem;
text-align: center;
}
#aboutBox .contact li.tel a{
color: #333;
}
#aboutBox .contact li.tel i{
color:#99cc00;
margin: 0 0.5rem 0 0;
}
#aboutBox .contact li.date{
font-size: 1.2rem;
text-align: right;
}
#aboutBox .contact li.mail{
margin: 0.5rem 0 0 0;
text-align: center;
font-size: 1.25rem;
}
#aboutBox .contact li.mail i{
margin: 0 0.5rem 0 0;
font-size: 1.6rem;
}
#aboutBox .contact li.mail a{
color: #333;
background: #e0f0d1;
}
#aboutBox .lineup h3{
color: #ccc;
margin: -1.5rem 0 2rem 0;
}
#aboutBox .lineup ul{
text-align: center;
margin: 1rem 0 0 0;
}
#aboutBox .lineup li{
display: inline-block;
margin: 0 1.5%;
}
/* -------------- 
   NEWおしらせ / テキストのみ一覧
 ---------------- */
ul.txtList{
margin: 3rem 0;
}
ul.txtList li{
margin: 2rem 0;
}
ul.txtList li span.date{
display: block;
float: left;
width: 16rem;
font-family:Arial, Helvetica, sans-serif;
}
ul.txtList li span.date span{
color: #f90;
margin: 0 0 0 1rem;
}
ul.txtList li span.infoCat{
display: block;
float: left;
width: 8em;
text-align: center;
border-radius: 10px;		/* CSS3草案 */
-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
-moz-border-radius: 10px;	/* Firefox用 */
font-size: 1.2rem;
margin: 0 2rem 0 0;
}
ul.txtList li span.news {
background: #66ccff;
}
ul.txtList li span.event {
background: #ff9999;
}
ul.txtList li span.blog {
background: #99cc00;
}
ul.txtList li span.voice{
background: #ff9900;
}
ul.txtList li span.infoCat a{
border: none;
}
ul.txtList li span.infoCat a.infoTitle{
display: block;
float: left;
}
ul.txtList li a{
color: #333;
border-bottom: 1px dotted #999;
}
ul.txtList li a hover{
border-bottom: none;
}

/* ===========
:: PC 769px〜960px
============ */
@media screen and (max-width: 960px) {
}

/* ===========
:: TB 481px〜768px
============ */
@media screen and (max-width: 768px) {
/* -------------- 
    NEW施工事例 / 画像付き一覧
 ---------------- */
ul.txtList li span.date{
}
ul.txtList li span.infoCat{
float: none;
margin: 0 0 0 15rem;
}
ul.txtList li span.infoCat a.infoTitle{
float: none;
}
/* -------------- 
   アトリエカンナ概要
---------------- */
#aboutBox h2{
width: 100%;
float: none;
text-align: center;
}
#aboutBox .contact{
float: none;
margin: 2rem auto 0;
}
#aboutBox .lineup li{
margin: 1rem 2%;
}
/* -------------- 
   NEWおしらせ / テキストのみ一覧
 ---------------- */
.newList ul.txtList li span.date{
display: block;
float: left;
}
.newList ul.txtList li span.infoCat{
display: block;
margin: 0 2rem 0 15rem;
}
}

/* ===========
:: SP 〜480px
============ */
@media screen and (max-width: 480px) {
.newList ul.list li {
width: 100%;
margin: 1rem 0;
}
.newList ul.list li dd.category ul li{
width: 30%;
}
}