@charset "UTF-8";
/* CSS TOP */
#top main{
margin-bottom:80px;
}
/************************************

mainimage

************************************/
#mainimage{
background:#06EDED;
position: relative;
height:440px;
padding:10px 0;
box-sizing: border-box;
margin:0 0 40px;
}
#mainimage:before{
background: #1A274D;
position:absolute;
width:100%;
height:140px;
top:0;
bottom:0;
left:0;
margin:auto;
content:"";
}
#mainimage .wrapper{
position: relative;
}
#mainimage .slick.pc{
position: relative;

background: #fff;
}
#mainimage .slick.sp{
display:none !important;
}

#mainimage h2{
position:absolute;
top:0;
bottom:0;
margin:auto;
left:0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
text-decoration: none;
background-image:url(../images/copy.png);
background-repeat: no-repeat;
background-position: left top;
background-size:contain;
display: block;
height: 140px;
width: 529px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#mainimage h2{
   background-image:url(../images/copy@2x.png);
  }
}
/* Dots */

.slick-dots
{
position: absolute;
bottom: 20px;
right:20px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: right;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 160px;
height: auto;
margin: 0 5px;
padding: 0;
border:5px solid #fff;
cursor: pointer;
}
@media only screen and (max-width:768px){
#mainimage{
height:auto;
padding: 0;
margin:0 0 30px;
}
#mainimage .slick.pc{
display: none !important;
}
#mainimage .slick.sp{
display:block !important;
}
.slick-dotted.slick-slider {
    margin-bottom: 0px;
}
#mainimage h2{
position:relative;
top:auto;
bottom:auto;
left:auto;
text-indent:inherit;
white-space: normal;
background-image:none;
display: block;
height: auto;
width: auto;
background: #1A274D;
color:#fff;
font-size:100%;
text-align: left;
padding:5%;
}
.slick-dots{
display:none !important;
}
}
/************************************

#toko

************************************/
#toko{
margin:0 0 40px;
text-align: left;
}
#toko:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
} 
#toko article{
float:left;
width:47%;
margin:0 6% 0 0;
position: relative;
}
#toko article:last-child{
margin:0;
}
@media only screen and (max-width:768px){
#toko article{
float:none;
width:84%;
margin:0 auto 30px;
}
#toko article:last-child{
margin:0 auto;
}
}
#toko article h2 {
color:#1A274D;
font-size:130%;
display:inline-block;
padding:0 5px 5px;
margin:0 0 20px;
border-bottom:3px solid #0E68AB;
}
#toko article dl {
border-bottom:1px solid #E0E1E2;
padding:15px 5px 15px 15px;
position: relative;
}
#toko article dl::before{
position: absolute;
top: 17px;
left: 2px;
color: #0E68AB;
font-size: 12px;
font-family: 'FontAwesome';
content: "\f0da";
}
#toko article dt{
font-size:80%;
}
#toko article dd{
font-size:90%;
}
#toko article .bt a {
position: absolute;
right:0;
top:5px;
background: #0E68AB;
color:#fff;
display:inline-block;
padding:5px 20px 5px 35px;
font-size:80%;
border-radius: 2em; 
-webkit-border-radius: 2em; 
-moz-border-radius: 2em; 
transition:.5s;
}
#toko article .bt a::before{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
left: 10px;
color: #fff;
font-size: 14px;
font-family: 'FontAwesome';
content: "\f138";
}
@media only screen and (max-width:768px){
#toko article .bt{
text-align: center;
padding:20px 0 0;
}
#toko article .bt a {
position: relative;
right:auto;
top:auto;
padding:10px 30px 10px 45px;
font-size:90%;
}
}
/************************************

#rinen

************************************/
#rinen{
background: #F7F7EE;
padding:40px 30px;
margin:0 0 40px;
text-align: left;
}
#rinen .text {
float:left;
width:50%;
background: url(../images/rinen_logo@2x.png) no-repeat center;
background-size: 290px;
}
#rinen h2{
color:#1A274D;
font-size:110%;
margin:0 0 20px;
}
#rinen p {
font-size:95%;
line-height: 1.8;
}
#rinen .image {
float:right;
width:45%;
}
@media only screen and (max-width:480px){
#rinen{
padding:8%;
margin:0 0 30px;
}
#rinen .text {
float:none;
width:100%;
background-size: 80%;
}
#rinen p {
margin-bottom: 20px;
}
#rinen .image {
float:none;
width:100%;
}
}
/************************************

#about

************************************/
#about:after {  
    visibility: hidden;  
    display: block;  
    font-size: 0;  
    content: " ";  
    clear: both;  
    height: 0;  
} 
#about li {
float:left;
width:47%;
margin:0 6% 0 0;
}
#about li:last-child{
margin:0;
}
#about li a{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: left top;
	background-size:contain;
	display: block;
	height: 0;
	width: 100%;
	padding-top:22.5%;
	transition:.5s;
}
#about li#about_company a{
background-image:url(../images/bn_company@2x.jpg)
}
#about li#about_business a{
background-image:url(../images/bt_business@2x.jpg)
}

@media only screen and (max-width:768px){
#about {
margin:0 5% 30px;
}
#about li {
float:left;
width:49%;
margin:0 2% 0 0;
}
}
@media only screen and (max-width:480px){
#about li {
float:none;
width:100%;
margin:0 0 10px 0;
}
}