@charset "utf-8";
/* CSS Document */

/*!Style
-------------------------------------*/

*{box-sizing:border-box;}
html{font-size:16px;color:#000;font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-weight: 500;letter-spacing: 0.1em}
body{margin:0;padding:0;position: relative;min-height: 100vh;}
ul,li,dl,dd,dt{margin:0;padding:0;list-style:none}
a{text-decoration:none;color:#ccc}
a:hover{text-decoration:none;color:#fff}
a:hover img{opacity:.7}
h1,h2{margin:0;padding:0;}
img{vertical-align: middle;}

/*!全体
-------------------------------------*/
#stage{margin:0 auto;padding:0;text-align: center;width:100%;position: relative;}

/*!header
-------------------------------------*/
header{margin:0 auto;padding:1em 0;text-align: center;width:100%;background: rgba(0,0,0,0.6);position: absolute;top:0;}
header div#nav{margin: 0 auto;max-width: 1000px;width:100%;display: flex;}
header h1{margin-right: 1em;}
header h1 img{max-width: 238px;width:60%;}
header ul{display: flex;align-items: center;font-size: 1.1em;font-weight: bold;}
header ul li a{padding: 0 1em}

@media (max-width:999px){
header{padding:0.5em 0;position: static;}
header div#nav{flex-wrap: wrap;justify-content: center;}
header h1{margin-right: 0;}
header ul{margin: 0.5em 0 0;font-size: 0.9em;}
}


/*!mv
-------------------------------------*/
#mv{margin:0 auto;padding:0;text-align: center;width:100%;position: relative;z-index: -1;}
/*#mv h2{position: absolute;top: 57%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%);color:#fff;text-shadow: 0px 0px 5px #2f7782;}*/
#mv h2{display: none;}
#mv img,#mv video{width:100%;}
#mv #blue{position: absolute;bottom:-3em;left:50%;color:#1ebdff;text-align: left;font-size:2em;font-weight: bold;}
#mv #blue img{width:100%;max-width: 930px;}

@media (max-width:999px){
#mv h2{display: none;}
#mv #blue{width:90%;font-size:1.4em;bottom:-2em;}
}

/*!main
-------------------------------------*/

/*!事業案内
-------------------------------------*/
#business{margin: 0 auto;max-width: 1000px;width:90%;text-align: center;}
#business p{margin: 8em 0 3em}
#business h3{margin-bottom: 2em;}
#business ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
#business ul li{width:32%;}
#business ul li img{width:50%;}
#business ul li p{margin: auto !important;text-align: left;font-size: 0.9em;}
#business h4{margin: 0.5em 0;color:#1ebdff;font-size: 1.2em;}

@media (max-width:999px){
#business p{margin: 6em 0 3em}
#business h3 img{width:100%;}
#business ul li{width:100%;margin-bottom: 2em;}
}

/*!SEOテキスト
-------------------------------------*/
#seo_text{margin: 5em auto;padding: 2em;width:100%;text-align: center;background: #f5f5f5;font-size: 0.9em;}
#seo_text p{margin: auto;text-align: left;width: 1000px;}

@media (max-width:999px){
#seo_text p{width:90%;}
}

/*!サービス
-------------------------------------*/
#service{margin: 0 auto;max-width: 1000px;width:90%;text-align: left;}
#service h3{font-weight: 500;font-size: 1em;margin: 1em 0 2em} 
#service ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
#service ul li{margin:0 0 2em;width:48%;}
#service h4{margin: 0;padding: 0.3em 0 0.2em;text-align: center;background: #000;color: #fff;}
#service p{font-size: 0.9em;}


@media (max-width:999px){
#service h3 img{width:80%;} 
#service ul li{width:100%;}
#service ul li img{width:100%;}
}

/*!お問い合わせ・会社概要
-------------------------------------*/
#contact{margin: 0 auto;max-width: 1000px;width:90%;text-align: center;}
#contact h3{margin: 0;padding: 0 0.8em;font-size: 1.6em;border-left:10px solid #1ebdff;color: #1ebdff;display: flex;align-items: center;}
#contact h3 span{font-weight: 500;color:#000;}
#contact ul{margin: 1em 0;padding: 0;display: flex;justify-content: space-between;}
#contact ul li a{width:100%;display: block;color:#fff;font-size: 1.4em;padding: 0.6em 0 0.5em;}
#contact ul li a:hover{opacity:.7}
#contact i{margin-right:0.5em;}
#contact ul li{width:32%;}
#contact ul li:nth-child(1) a{background: #00b900;}
#contact ul li:nth-child(2) a{background: #1ebdff;}
#contact ul li:nth-child(3) a{background: #ffba00;}

@media (max-width:999px){
#contact h3 span,#contact ul{display: none;}
}

/*!会社概要
-------------------------------------*/
#about{margin: 3em auto 5em;max-width: 800px;width:90%;text-align: center;display: flex;align-items: center;}
#about ul{margin: 0 0 0 4em;display: flex;flex-wrap: wrap;}
#about ul li:nth-child(odd){padding: 0.8em;width:20%;}
#about ul li:nth-child(even){padding: 0.8em;width:80%;text-align: left;}
#about ul li.gray{background: #f5f5f5}

@media (max-width:999px){
#about{margin: 0 auto 3em;flex-wrap: wrap;justify-content: center;}
#about ul{margin: 0;font-size: 0.9em;}
#about ul li:nth-child(odd){width:30%;}
#about ul li:nth-child(even){width:70%;}
}

/*!footer
-------------------------------------*/
footer{margin:0 auto;padding:0;text-align: center;width:100%;color:#fff;background: #000;overflow: hidden;}
footer p img{width:8%;}
footer p#copyright{margin: 0 0 0.5em;}

@media (max-width:999px){
footer p img{width:40%;max-width: 238px;}
footer p#copyright{font-size: 0.9em}
}

/*!sp_menu
-------------------------------------*/
#sp_menu{display: none;}

@media (max-width:999px){
#sp_menu a {padding: 0.9em 0 0.6em;text-decoration: none;display: block;color: #fff;width: 100%;text-align: center;font-weight: bold;font-size: 0.9em;}
#sp_menu{position: sticky;bottom: 0;margin: 0;padding: 0;display: flex !important;}
#sp_menu li{width: 25%;list-style: none;}
#sp_menu li:nth-child(1) a{background: #00b900;}
#sp_menu li:nth-child(2) a{background: #1ebdff;}
#sp_menu li:nth-child(3) a{background: #ffba00;}
#sp_menu li:nth-child(4) a{background: #0e6d94;}
#sp_menu img{vertical-align: bottom;}
#sp_menu i{font-size: 2em;display: block;}
}

/*!アニメーション
-------------------------------------*/
.ani{opacity: 0;visibility: hidden;transition: 0.8s;transform: translate(-50%, 50px);}
.active{opacity: 1;visibility: visible;transform: translate(-50%, 0);}
.ani2{opacity: 0;visibility: hidden;transition: 0.8s;transform: translate(0, 50px);}
.active2{opacity: 1;visibility: visible;transform: translate(0, 0);}