@charset "utf-8";

*{}

@media screen and (min-width: 768px) {
#main{  }
#main .title{ padding:10px 0 20px; text-align:center; }
#information{ margin:0 auto; margin-bottom:100px; }
#information-inr{ width:1440px; margin: 0 auto; }
#information .index-box{ height:420px; }
#information .image{ position:absolute; z-index:1; height:420px; width:1440px; overflow:hidden; }
#information .index-box .image img{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transition:4.0s; -moz-transition:4.0s; -ms-transition:4.0s; transition:4.0s; }
#information .index-box:hover .image img{ -webkit-transform:scale(1.05); -moz-transform:scale(1.05); -ms-transform:scale(1.05); transform:scale(1.05); }
#information .element{ position:relative; margin:0 auto; padding-top:72px; height:276px; width:276px; z-index:2; }
#information .element .circle{ position:absolute; height:276px; width:276px; z-index:1; background:url(../img/bg_circle.png) center center no-repeat; font-size:.1em; line-height:0; text-indent:-9999px; filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; }
#information .element-inr{ position:relative; text-align:center; z-index:2; }
#n001 .element-inr{ padding-top:25px; }
#n001 .name{ margin-bottom:25px; }
#n002 .element-inr{ padding-top:25px; }
#n002 .name{ margin-bottom:25px; }
#n003 .element-inr{ padding-top:25px; }
#n003 .name{ margin-bottom:25px; }
}

@media screen and (max-width: 768px) {
#main{ padding:10px 0 20px; }
#main .title{ margin:0 auto; width:166px; font-size:.1em; line-height:0; }
#information{ margin-bottom:45px; }
#information .index-box{ position:relative; padding-bottom:calc(100%*380/640); background-position:center top; background-repeat:no-repeat; }
#information .element{ display:none; }
#information .image img{ display:none; }
#n001{ background-image:url(../img/001_bg_sp.jpg); }
#n002{ background-image:url(../img/002_bg_sp.jpg); }
#n003{ background-image:url(../img/003_bg_sp.jpg); }
}