@charset "UTF-8";



/*==================================================================

SECTION_01

==================================================================*/
.section1 .index_area{
width:100%;
text-align:center;
}
.section1 .index_area h1{
width:60%;
height:auto;
}
.section1 .index_area h1 img{
width:100%;
height:auto;
}
#section1-right h1{
left:-50%;
}
#section1-left{
background:#FFF;
background-image:url(../../images/index02.jpg);
background-repeat:no-repeat;
background-position:50%;
text-align:center;
}
#section1-left h1{
left: 50%;
}
#section1-right{
background-color:#FFF;
background-image:url(../../images/index01.jpg);
background-repeat:no-repeat;
background-position:50%;
text-align:center;
}
#section1-right.hideOverflow{
overflow:hidden;
}
.section1 .index_area{
position:absolute;
top:50%;
transform:translateY(-50%);
}
#section1-left .index_area{
left:50%;
}
#section1-right .index_area{
right:50%
}
#section1-left h1,
#section1-right h1{
width:100%;
z-index:999;
text-align:center;
display:block;
margin:0;
padding:0;
}








/*==================================================================

SECTION_02

==================================================================*/
#section2-left{
background:#FFF;
text-align:center;
}
#section2-left div{
width:90%;
height:auto;
margin:0 auto;
}
#section2-left div img{
width:100%;
height:auto;
}
#section2-right{
background:#EEE;
color:#666;
text-align:justify;
padding:2.0em 3.0em;
}
#section2-right .index_area{
}
#section2-right .index_area:last-child{
padding:0;
}
#section2-right h2{
font-size:4.0vm;
position:relative;
display:inline-block;
padding:0 120px 0 0;
letter-spacing:0.1em;
margin-bottom:0em;
color:#000;
}
#section2-right h2:after{
content:'';
position:absolute;
top:50%;
display:inline-block;
width:100px;
height:1px;
background-color:#000;
}
#section2-right h2:after{
right:0;
}
#section2-right h3{
font-size:15px;
/*margin-top:2.0em;*/
margin-bottom:1.0em;
color:#000;
}
#section2-right h4{
}
#section2-right p{
margin-top:2.0em;
text-align:justify;
}
#section2-right a:link{
color:#444;
}
#section2-right a:hover{
color:#000;
}
#section2-right a:visited{
color:#444;
}








/*==================================================================

SECTION_03

==================================================================*/
#section3-left{
background-color:#27474E;
background-image:url('../../images/index03.jpg');
background-repeat:no-repeat;
background-position:50%;
}
#section3-right{
background-color:#FFF;
text-align:center;
color:#000;
}
#section3-right h3{
font-family:TsukuMinPr6-L;
font-size:1.1vw;
text-align:center;
/*width:10em;*/
margin:0 auto;
letter-spacing:0.15em;
text-indent:0.15em;
}








/*==================================================================

SECTION_04

==================================================================*/
#section4-left{
background-color:#27474E;
background-image:url('../../images/index05.jpg');
background-repeat:no-repeat;
background-position:50%;
}
#section4-right{
background:#000;
text-align:center;
color:#FFF;
}
#section4-right h3{
font-family:TsukuMinPr6-L;
text-align:center;
font-size:1.1vw;
/*width:10em;*/
margin:0 auto;
letter-spacing:0.15em;
text-indent:0.15em;
}




								
								
								
								
								
								
								
								
								
								
        
        
        
        
        
        
.ms-responsive #section1-left .index_area{
left:0;
}
.ms-responsive #section1-right .index_area{
display: none;
}




a.button{
display:inline-block;
font-size:15px;
text-decoration:none;
color:rgba(0,0,0,1.0);
brackground-color:transparent;
border:1px solid rgba(0,0,0,1.0);
padding:0.3em 1.2em;
background-size: 200% 100%; 
background-image: linear-gradient(to right, transparent 50%, rgba(0,0,0,1.0) 50%);
transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}
a.button:hover{
color:rgba(255, 255, 255, 1);
background-color:rgba(0,0,0,1.0);
background-position: -100% 100%;
}
a.button2{
display:inline-block;
font-size:15px;
text-decoration:none;
color:rgba(255,255,255,1.0);
brackground-color:transparent;
border:1px solid rgba(255,255,255,1.0);
padding:0.3em 1.2em;
background-size: 200% 100%; 
background-image: linear-gradient(to right, transparent 50%, rgba(255,255,255,1.0) 50%);
transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}
a.button2:hover{
color:rgba(0,0,0,1.0);
background-color:rgba(255,255,255,1.0);
background-position: -100% 100%;
}




        /*
        * Improving design in small resolutions
        */
        /*@media all and (max-width:700px){
            #section1-left h1,
            #section1-right h1{
                font-size: 5em;
            }
        }
        @media all and (max-width:550px){
            #section1-left h1,
            #section1-right h1{
                font-size: 4em;
            }
        }
        @media all and (max-width:400px){
            #section1-left h1,
            #section1-right h1{
                font-size: 3em;
            }
            .section1 .index_area p{
                font-size: 1em;
            }
        }
*/