@charset "utf-8";

/****
common title
******/

h2{
    border-bottom: 10px solid #00A0E8;
    border-image: linear-gradient(to right, #ABE0F9 0%,  #00A0E8 100%) 1;
    width: auto;
    margin:18px;
    font-weight:bold;
    font-size:20px;
    color:#707070;
    position: relative;

}
h2 span{
    position: absolute;
    bottom: -4px;
    left: 5px;
}

/****
contact
******/
.history{
    margin-bottom:50px;
    text-align:center;
}


.contact{
    background-color:#d3edfb;
    border:solid 1px #ccc;
    border-radius: 40px;
    padding:20px;
    width:65%;
    margin: 30px 0 50px 100px;
    box-shadow: 3px 3px #ccc;
    position: relative;

}
.contact .mailimg{
    position: absolute;
    top:-20px;
    left: 50px;
}
.contact .address{
    padding:20px 40px 20px 5px;
    font-weight:bold;
    font-size:20px;
    text-align:center;
    
}
.contact .kanji{
    text-align:right;
    margin-right:70px;
    font-weight:bold;
    font-size:20px;
    line-height: 1.5em;
}
.contact .romaji{
    text-align:right;
     margin-right:65px;
}
/****
work
******/

#works ul.top_work li {
    display: flow;
    padding: 25px 20px;
    width: 160px;
    float: left;
    text-align: center;
    font-size:12px;
    line-height:1.5em;
    list-style:none;
}
#works ul.list_work li {
    padding: 25px 5px !important;
    width: 170px  !important;
    margin: 7px;
}

#works .top_books img{
    width:140px;
}
.work_list img{
    width:130px;

}
#works .explain{
    color:#005AAB;
    font-weight:bold;
    margin:5px 0;
}
#works .text_big {
    font-size:14px;
}
.name_small{
    margin-bottom:10px;
}

#works ul.tanto li {
    display: flow;
    padding: 2px;
    width: 44px;
    float: left;
    text-align: center;
    font-size: 11px;
    background: #005AAB;
    color: #fff;
    border: solid #fff 1px;
    list-style:none;

}
#works .top_books ul.tanto li.off,#works ul.tanto_title li.off {
    background: #ccc;

}

#works ul.tanto_title li {
    display: flow;
    padding: 5px;
    width: 70px;
    float: left;
    text-align: center;
    font-size: 16px;
    background: #005AAB;
    color: #fff;
    border: solid #fff 1px;
    list-style:none;

}

.green_border{
  clear:both;
  border-bottom: 5px solid #005AAB;
  margin-bottom:10px; 
}
.yellow_border{
  clear:both;
  border-bottom: 3px solid #FFFCDB;
  margin-bottom:10px; 
}

.list_work li{
    height:310px;
    list-style:none;
}


/* スマホ用のスタイル */
@media (max-width: 768px) {

#header{
    margin-bottom: 20px;
    height: 90px;

}
h2{
    margin:18px 5px;
}
.top_logo {
    position: static;
    text-align: left;
}
.hed_logo{
    text-align: center;
    float: none;
    margin: 0 auto;
}

.topmenu {
    margin-top: 30px;
    float: none;
    text-align: center;
}
.points_wrapper{
    margin-left: 10px;
}
.top_points{
    width:90%;
}

#works ul.tanto li{
     padding:2px !important;

}
.tanto_title{
        width: 300px;
}
.history img{
    width: 380px;
}
.contact {
    margin: 30px 0 50px 10px;
    width: 90%;
    padding: 20px 10px;
    
}
.contact .address {
    padding:20px 0px;
    font-size: 18px;
}
#works ul.top_work li{
    padding: 20px 15px;

}
#works ul.list_work li{{
    height:200px;
}

}

@media (max-width: 380px) {
#works ul.top_work li{
    padding: 20px 12px;
}
#works ul.list_work li{
    width: 160px  !important;
}


}