@charset "utf-8";
/* CSS Document */
/*Reset*/
*{box-sizing: border-box;}
html{
	font-size:62.5%;
	height:100%;
	width:100%;
}
body{
	background:#fff;
	color:#111;
	font-size:14px;
	font-size:1.4rem;
	font-family: 'Noto Sans Japanese',"Hiragino Kaku Gothic ProN","游ゴシック",Yu Gothc, "メイリオ", sans-serif;
	line-height:1.8;
	width:100%;
	/*max-width:768px;*/
	height:auto;
	margin:0 auto;
	padding:0;
}
h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form {
	border:none;
	border-collapse:collapse;
	font-style:normal;
	font-weight:300;
	font-size:100%;
	margin:0;
	padding:0;
	line-height:100%;
	list-style-type:none;
	text-align:left;
	vertical-align:top;
}

.pc{display:none;}
@media only screen and (min-width : 768px){
.sp{display:none;}
.pc{display:block;}
}


img{
	width:100%;
	height:auto;
}
a{text-decoration:none;}
.bold{
    font-weight:bold;
}
.center{
    text-align:center;
}

/*ヘッダー*/
header{
	background:#fff;
    box-shadow:0 2px 3px rgba(0,0,0,0.1);
	position:fixed;
	top:0;
	left:0;
	width:100%;
    padding:3px 0 5px;
	z-index:3;
}
div.head_inner{
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:100%;
}
h1{
	width:120px;
    padding:7px 0 7px 10px;
}
@media only screen and (max-width:768px){
div.head_inner{
display:block;
}
}
@media only screen and (min-width:768px){
h1{
width:180px;
height:auto;
margin-left:100px;
}
h1:hover{
opacity:0.7;
transition:all 0.5s;
}
header div.wrapper_min{
margin:0 auto;
overflow:hidden;
}
}

/*スマホ　ヘッダーメニュー*/
header nav{
	width:100%;
	position:relative;
}
header nav ul{
	background:#ee7325;
	overflow:hidden;
	width:100%;
	max-height:0;
	position:absolute;
	top:0;
	transition:all 500ms;
}
header nav.open ul{
	max-height:100em;
}
header nav ul li{
	display:block;
	font-size:12px;
	padding:17px 0 17px 15px;
}
header nav ul li+li{
	border-top:1px solid #fff;
}
header nav ul li a{
	color:#fff;
	display:block;
}
/*PC　ヘッダーメニュー*/
@media only screen and (min-width:768px){
header nav{
width:200px;
margin-right:100px;
}
header nav ul{
background:#FFF;
float:right;
display:table;
width:100%;
height:auto;
overflow:hidden;
position:relative;
top:0;
max-height:100em;
}
header nav ul li{
border-style:none;
padding:10px 5px;
font-weight:bold;
display:table-cell;
right:0;
margin-right:0;
text-align:right;
}
header nav ul li+li{
border:none;
}
header nav ul li a{
color:#515151;
font-size:14px;
font-weight:bold;
}
header nav ul li a:hover{
opacity:0.5;
transition:all 0.5s;
}
}

/*スマホ　ヘッダーメニューボタン*/
#buttonmenu{
	position:absolute;
	top:10px;
	right:10px;
	width:30px;
	height:30px;
}
@media only screen and (min-width:768px){
#buttonmenu{
display:none;
}
}
#buttonmenu span{
	height:4px;
	width:30px;
	display:block;
	background:#ee7325;
	position:absolute;
	top:13px;
	left:0;
	transition:all 500ms;
}
#buttonmenu span:before,
#buttonmenu span:after{
	content:"";
	height:4px;
	width:30px;
	display:block;
	background:#ee7325;
	position:absolute;
	transition:all 500ms;
}
#buttonmenu span:before{
	top:-10px;
}
#buttonmenu span:after{
	top:10px;
}
#buttonmenu.open span{
	transform:rotate(-45deg);
}
#buttonmenu.open span:before{
	top:0;
	transform:rotate(90deg);
}
#buttonmenu.open span:after{
	top:0;
	transform:rotate(-90deg);
}


/*all_wrap*/
div.all_wrap{
	overflow:hidden;
    margin:0;
    padding:0;
}


/*article.fv*/
article.fv{
    background:rgba(0,0,0,0.65);
	/*position:relative;*/
    overflow:hidden;
	width:100%;
	padding:0;
    text-align:center;
}
@media only screen and (max-width:768px){
article.fv{
	padding:40px 0;
}
}
article.fv img{
    width:98%;
    max-width:900px;
    margin:0 auto;
}


/*service*/
article#service{
    background:#fff;
    padding:65px 0;
}
article#service div.service_waku{
    width:100%;
    /*max-width:768px;*/
    margin:0 auto;
    text-align:center;
}
article#service .center{
    text-align:center;
}
article#service h2{
    margin:0 auto;
	width:60%;
	height:auto;
	padding:0;
}
article#service h3{
    color:#ff4100;
	font-size:26px;
	font-size:2.6rem;
    font-weight:bold;
    line-height:1.4;
    margin:30px auto 0;
    text-align:center;
}
article#service h3.product/*,
article#service h3.up*/{
    margin-top:75px;
}
div.h3_contact{
    background:#111;
    margin-top:75px;
    padding:25px 0;
}
article#service h3.contact{
    color:#fff;
    margin:0 auto;
}
article#service h4{
    /*background:#dadada;*/
    border:1px solid #dadada;
    border-radius:3px;
    color:#ff4100;
	font-size:20px;
	font-size:2.0rem;
    font-weight:bold;
    line-height:1.4;
    margin:50px 20px 0;
    max-width:728px;/*768-(20×2)*/
    padding:10px;
    text-align:center;
}
article#service h4.first{
    margin-top:30px;
}
article#service p{
	font-size:14px;
	font-size:1.4rem;
	line-height:1.8;
    margin:30px 20px 0;
    /*width:100%;*/
    max-width:768px;/*700*/
    padding:0;
	text-align:justify;
}
article#service p.sp.service_m{
    margin:50px 0 0;
}
article#service p.sp.contact{
    margin:0;
}
/*article#service p.sp{
    margin:30px auto 0;
    padding:0 20px;
    width:100%;
}*/
article#service p.big{
	font-size:18px;
	font-size:1.8rem;
    font-weight:bold;
    margin-top:15px;
    text-align:center;
}
article#service p.bt{
    border-top:1px dashed #dadada;
    padding-top:30px;
}
article#service p.bb{
    border-bottom:1px dashed #dadada;
    padding-bottom:30px;
}
article#service p.contact_text{
    margin-top:15px;
}
article#service p.mt0{
    margin-top:0;
}
article#service p.mt15{
    margin-top:15px;
}
article#service p.mt30{
    margin-top:30px;
}

@media only screen and (min-width:768px){
article#service{
padding:100px 0;
}
article#service h2{
width:300px;
}
article#service h3{
	font-size:32px;
	font-size:3.2rem;
    margin-top:50px;
}
article#service h3.product/*,
article#service h3.up*/{
    margin-top:125px;
}
div.h3_contact{
    margin-top:125px;
    padding:50px 0;
}
article#service p{
    margin:30px auto 0;
    padding:0 20px;
}
article#service p.pc{
    max-width:100%;
    padding:0;
}
article#service p.pc.service_m{
    margin:50px 0 0;
}
article#service p.pc.nofull{
    max-width:728px;/*768-(20×2)*/
    padding:0;
}
article#service h4{
	font-size:24px;
	font-size:2.4rem;
    margin:75px auto 0;
}
article#service p.big{
	font-size:22px;
	font-size:2.2rem;
}
article#service p.contact_text{
    margin-top:30px;
}
}
@media only screen and (max-width:370px){
article#service h3{
	font-size:22px;
	font-size:2.2rem;
}
article#service h4{
	font-size:18px;
	font-size:1.8rem;
}
article#service p.big{
	font-size:16px;
	font-size:1.6rem;
}
}










/*merit*/
article#merit{
	background:#f4f4f4;
    padding:15px 0 65px;
}
article#merit ul{
	padding-top:65px;
}
article#merit ul li{
	width:70%;/*65*/
	margin:0 auto;
	text-align:center;
}
article#merit ul li img{
	margin:auto;
    width:80%;
    height:auto;
}
article#merit ul li strong{
	display:block;
	font-size:24px;
	font-size:2.4rem;
	line-height:3;
	text-align:center;
}
article#merit ul li strong:after{
	content:'';
	border:3px solid #ee7325;
	width:40px;
	display:block;
	margin:0 auto;
}
article#merit ul li p{
	font-size:14px;
	font-size:1.4rem;
    font-style:normal;
	line-height:1.8;
	margin:10px 0 0;
	text-align:left;
}
@media only screen and (min-width:768px){
article#merit div{
display:table;
table-layout:fixed;
width:100%;
max-width:850px;/*900*/
margin:0 auto;
}
article#merit div ul{
display:table-cell;
vertical-align:middle;
}
article#merit ul li{
min-height:500px;
}
article#merit ul li img{
width:100%;
height:auto;
}
}


/*bg_img fv&company 固定背景*/
div.bg_img{
    background:url("../images/bg.png") center no-repeat;
    background-position:center center;
    background-size:cover;
    content:"";
    display:block;
    margin:0;
    padding:0;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    z-index:-1;
}
div.bg_waku{
    width:100%;
    max-width:768px;
    margin:0 auto;
    position:relative;
}
div.bg_waku p{
    position:absolute;
    width:0;
    height:0;
    margin-left:0;
    margin-right:0;
}

@media only screen and (max-width:768px){
div.bg_waku p.bravo{
    top:90vh;
    left:50%;
    transition:all 0.9s;
}
div.bg_waku.see p.bravo{
    top:22vh;
    left:50%;
    animation:bravo 0.3s linear 0.6s 1 forwards;
}

div.bg_waku p.bravo01{
    top:52vh;
    left:34%;
    transition:all 0.8s;
}
div.bg_waku.see p.bravo01{
    top:42vh;
    left:34%;
    animation:bravo01 0.3s linear 0.5s 1 forwards;
}

div.bg_waku p.bravo02{
    top:58vh;
    right:34%;
    transition:all 0.7s;
}
div.bg_waku.see p.bravo02{
    top:48vh;
    right:34%;
    animation:bravo02 0.3s linear 0.4s 1 forwards;
}

div.bg_waku p.bravo03{
    top:64vh;
    left:24%;
    transition:all 0.6s;
}
div.bg_waku.see p.bravo03{
    top:54vh;
    left:24%;
    animation:bravo03 0.3s linear 0.3s 1 forwards;
}

div.bg_waku p.bravo04{
    top:70vh;
    right:24%;
    transition:all 0.5s;
}
div.bg_waku.see p.bravo04{
    top:60vh;
    right:24%;
    animation:bravo04 0.3s linear 0.2s 1 forwards;
}

div.bg_waku p.bravo05{
    top:76vh;
    left:34%;
    transition:all 0.4s;
}
div.bg_waku.see p.bravo05{
    top:66vh;
    left:34%;
    animation:bravo05 0.3s linear 0.1s 1 forwards;
}

div.bg_waku p.bravo06{
    top:83vh;
    right:34%;
    transition:all 0.3s;
}
div.bg_waku.see p.bravo06{
    top:73vh;
    right:34%;
    animation:bravo06 0.3s linear 0s 1 forwards;
}
}
@keyframes bravo{
	0%{width:0; height:0; margin-left:0;}
	80%{width:190px; height:117px; margin-left:-95px;}
	100%{width:170px; height:97px; margin-left:-85px;}
}
@keyframes bravo01{
	0%{width:0; height:0; margin-left:0;}
	80%{width:120px; height:79px; margin-left:-60px;}
	100%{width:100px; height:59px; margin-left:-50px;}
}
@keyframes bravo02{
	0%{width:0; height:0; margin-right:0;}
	80%{width:120px; height:79px; margin-right:-60px;}
	100%{width:100px; height:59px; margin-right:-50px;}
}
@keyframes bravo03{
	0%{width:0; height:0; margin-left:0;}
	80%{width:120px; height:79px; margin-left:-60px;}
	100%{width:100px; height:59px; margin-left:-50px;}
}
@keyframes bravo04{
	0%{width:0; height:0; margin-right:0;}
	80%{width:120px; height:79px; margin-right:-60px;}
	100%{width:100px; height:59px; margin-right:-50px;}
}
@keyframes bravo05{
	0%{width:0; height:0; margin-left:0;}
	80%{width:120px; height:79px; margin-left:-60px;}
	100%{width:100px; height:59px; margin-left:-50px;}
}
@keyframes bravo06{
	0%{width:0; height:0; margin-right:0;}
	80%{width:120px; height:79px; margin-right:-60px;}
	100%{width:100px; height:59px; margin-right:-50px;}
}

@media only screen and (min-width:768px){
div.bg_waku p.bravo{
    top:90vh;
    left:50%;
    transition:all 0.9s;
}
div.bg_waku.see p.bravo{
    top:20vh;
    left:50%;
    animation:bravo_pc 0.3s linear 0.6s 1 forwards;
}
    
div.bg_waku p.bravo01{
    top:48vh;
    left:36%;
    transition:all 0.8s;
}
div.bg_waku.see p.bravo01{
    top:38vh;
    left:36%;
    animation:bravo01_pc 0.3s linear 0.5s 1 forwards;
}
    
div.bg_waku p.bravo02{
    top:54vh;
    right:36%;
    transition:all 0.7s;
}
div.bg_waku.see p.bravo02{
    top:44vh;
    right:36%;
    animation:bravo02_pc 0.3s linear 0.4s 1 forwards;
}
    
div.bg_waku p.bravo03{
    top:60vh;
    left:26%;
    transition:all 0.6s;
}
div.bg_waku.see p.bravo03{
    top:50vh;
    left:26%;
    animation:bravo03_pc 0.3s linear 0.3s 1 forwards;
}
    
div.bg_waku p.bravo04{
    top:66vh;
    right:26%;
    transition:all 0.5s;
}
div.bg_waku.see p.bravo04{
    top:56vh;
    right:26%;
    animation:bravo04_pc 0.3s linear 0.2s 1 forwards;
}
    
div.bg_waku p.bravo05{
    top:72vh;
    left:36%;
    transition:all 0.4s;
}
div.bg_waku.see p.bravo05{
    top:62vh;
    left:36%;
    animation:bravo05_pc 0.3s linear 0.1s 1 forwards;
}
    
div.bg_waku p.bravo06{
    top:78vh;
    right:36%;
    transition:all 0.3s;
}
div.bg_waku.see p.bravo06{
    top:68vh;
    right:36%;
    animation:bravo06_pc 0.3s linear 0s 1 forwards;
}
}
@keyframes bravo_pc{
	0%{width:0; height:0; margin-left:0;}
	80%{width:320px; height:186px; margin-left:-160px;}
	100%{width:290px; height:166px; margin-left:-145px;}
}
@keyframes bravo01_pc{
	0%{width:0; height:0; margin-left:0;}
	80%{width:190px; height:120px; margin-left:-95px;}
	100%{width:170px; height:100px; margin-left:-85px;}
}
@keyframes bravo02_pc{
	0%{width:0; height:0; margin-right:0;}
	80%{width:190px; height:120px; margin-right:-95px;}
	100%{width:170px; height:100px; margin-right:-85px;}
}
@keyframes bravo03_pc{
	0%{width:0; height:0; margin-left:0;}
	80%{width:190px; height:120px; margin-left:-95px;}
	100%{width:170px; height:100px; margin-left:-85px;}
}
@keyframes bravo04_pc{
	0%{width:0; height:0; margin-right:0;}
	80%{width:190px; height:120px; margin-right:-95px;}
	100%{width:170px; height:100px; margin-right:-85px;}
}
@keyframes bravo05_pc{
	0%{width:0; height:0; margin-left:0;}
	80%{width:190px; height:120px; margin-left:-95px;}
	100%{width:170px; height:100px; margin-left:-85px;}
}
@keyframes bravo06_pc{
	0%{width:0; height:0; margin-right:0;}
	80%{width:190px; height:120px; margin-right:-95px;}
	100%{width:170px; height:100px; margin-right:-85px;}
}


/*company*/
article#company{
    padding:0;
}
div.bg{
    height:600px;
}
@media only screen and (min-width:768px){
div.bg{
    height:1000px;
}
}

div.profile{
    background:#fff;
    padding:65px 20px;
    text-align:center;
}
div.profile h2{
    width:60%;
    margin:0 auto;
}
@media only screen and (min-width:768px){
div.profile h2{
    width:300px;
}
}

*{flex-shrink:0;}
div.profile dl{
    display:flex;
    flex-wrap:wrap;
    margin:50px auto 0;
    width:100%;
    max-width:768px;
}
div.profile dt,
div.profile dd{
    font-size:14px;
    line-height:1.5;
    margin-top:10px;
}
div.profile dt{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    font-weight:bold;
    padding:5px;
    width:35%;
}
div.profile dd{
    display:flex;
    align-items:center;
    padding:5px 5px 5px 10px;
    width:65%;
}
@media only screen and (min-width:768px){
div.profile dt{
    width:40%;
}
div.profile dd{
    width:60%;
}
}
@media only screen and (max-width:370px){
div.profile dt,
div.profile dd{
    font-size:12px;
}
}


/*トップへ移動*/
div#pagetop{
    background:#fff;
	text-align:center;
}
div#pagetop p{
    line-height:1;
}
div#pagetop a{
	background:#2c2c2c;
	display:block;
	margin:0 auto;
	padding:40px 0;
	text-align:center;
	height:auto;
}
div#pagetop a img{
    width:100px;
    height:auto;
}
div#pagetop a:hover{
	opacity:0.8;
	transition:0.3s linear;
}


/*footer*/
footer{
	background:#000;
    display:block;
	margin:0;
	padding:40px 0 50px;
	width:100%;
}
footer ul{
	text-align:center;
	width:100%;
}
footer ul li,
footer ul li address,
footer ul li a{
	color:#fff;
    font-size:13px;
	line-height:1.8;
	text-align:center;
}
footer ul li{
	padding:0 10px;
}
footer ul li a:hover{
	text-decoration:underline;
}
@media only screen and (min-width:768px){
footer{
width:100%;
height:auto;
}
footer ul li{
border-right:1px solid #fff;
display:inline-block;
vertical-align:middle;
}
footer ul li:last-child{
border-right:none;
}
}
@media only screen and (max-width:370px){
footer ul li,
footer ul li address,
footer ul li a{
    font-size:12px;
}
}


/*?*/
@media only screen and (min-width : 768px){
.br_sp:before{
display: none;
}
.br_pc:before{
content: "\A" ;
white-space: pre ;
}
}