/* RESET
===============================*/
*{ margin:0; padding:0; box-sizing:border-box; font-size:1em;}
html{ height:100%;}
ul,ol{ list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
img{ vertical-align:top; line-height:0; font-size:0; border:none; width:100%; max-width:100%; height:auto;}
body{ height:100%; vertical-align:baseline; line-height:1.5; background:transparent; font-family: "Yu Gothic", YuGothic, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, Roboto, "Lato", sans-serif; font-size:100%; text-rendering:optimizeLegibility; height:100%; color:#2b2b2b;}



/* all theme
===============================*/
.clearfix { zoom:1; }
.clearfix:after { content:'.'; display:block; height:0; clear:both; visibility:hidden;}

a{ color:#2b2b2b; text-decoration:none;}
a:hover{ text-decoration:none;}
a:hover img{opacity:0.8; filter:alpha(opacity=80); -ms-filter: "alpha( opacity=80 )";}

#wrap{ width:100%; min-height:100%; position:relative;}
#content{ width:100%; margin:67px auto 0;}

h2{ color:#fb4616; font-size:3em; text-align:center; font-family:'Roboto', sans-serif; line-height:1.2; padding-top:70px;}
h2 span{ display:block; color:#2b2b2b; font-weight:normal; font-size:35%; font-family: "Yu Gothic", YuGothic, -apple-system, BlinkMacSystemFont;}

.sp-br,header label, header input{ display:none;}



/* header
===============================*/
header{ width:100%; height:67px; position:fixed; top:0; left:0; background:#fff; box-shadow:0px 7px 18px -7px #ccc; z-index:99;}
h1{ width:250px; position:absolute; left:0; top:10px;}
nav{ position:absolute; top:15px; right:2%; display:table; text-align:center;}
nav div{ display:table-cell; font-size:140%; font-weight:600; line-height:1;}
nav div span{ display:block; font-size:55%; font-weight:300;}
nav div a{ display:block; padding-right:25px; color:#fb4616;}
nav div:last-child a{ padding-right:0;}
nav div a:hover{ color:#fb8768;}



/* main img
===============================*/
#main_img{ position:relative; padding-bottom:50px;}
#main_img div{ width:96%; position:absolute; top:42%; left:50%; transform: translate(-50%,-50%); color:#fff; font-size:5.5vw; text-align:center;}
#main_img div span:nth-child(1){animation: fadeIn 2s ease 0s 1 forwards; -webkit-animation: fadeIn 2s ease 0s 1 forwards; opacity:0;}
#main_img div span:nth-child(2){animation: fadeIn 2s ease 2s 1 forwards; -webkit-animation: fadeIn 2s ease 1s 1 forwards; opacity:0;}
#main_img div span:nth-child(3){animation: fadeIn 2s ease 4s 1 forwards; -webkit-animation: fadeIn 2s ease 2s 1 forwards; opacity:0;}
#main_img div span:nth-child(4){animation: fadeIn 2s ease 6s 1 forwards; -webkit-animation: fadeIn 2s ease 3s 1 forwards; opacity:0; display:block; font-size:48%;}
@keyframes fadeIn{100% {opacity: 1}}
@-webkit-keyframes fadeIn{100% {opacity: 1}}


/* section
===============================*/
section{ width:100%; min-width:96%; margin:50px auto 0; padding:0 0 30px;}
section > div{ width:96%; max-width:1100px; margin:auto; padding:0 0 70px;}
section h2{ font-size:4em; opacity:0;}


/*whtite_bg*/
.white_bg p{ width:100%; max-width:610px; text-align:center; margin:70px auto 40px; font-size:1.2em;}


/*orange_bg*/
.orange_bg{ background:#f8d27f;}


/*separate_bg*/
.separate_bg{ background: linear-gradient(to right, #f8e2b2 0%,#f7f0ca 50%,#f8e2b2 50%,#f7f0ca 100%); margin-top:0;}
.separate_bg p{ width:100%; max-width:610px; margin:70px auto 40px; background:#fff; padding:2em; font-size:1.2em;}



/*servise*/
.servise{ margin:100px 0 200px; position:relative;}
.servise:last-of-type{ margin-bottom:100px;}

.servise .img_wrap{ width:100%; max-width:610px; overflow:hidden;}
.servise img{ width:100%; max-width:610px; display:block; transition-duration:0.3s;}
.servise img:hover{ transform: scale(1.1); transition-duration: 0.3s;}
.servise:nth-of-type(even) .img_wrap{ float:right;}

.servise .comment{ width:100%; max-width:550px; background:#fff; padding:1em; position:absolute;}
.servise:nth-of-type(odd) .comment{ top:230px; right:30px;}
.servise:nth-of-type(even) .comment{ top:230px; left:30px;}
.servise .comment h3{ color:#fb4616; font-size:2em; margin-bottom:20px;}
.servise .comment h3 span{ font-size:60%; margin-left:7px;}
.servise .comment ul{ margin-top:10px;}
.servise .comment li{ float:left; background:#fb4616; color:#fff; padding:7px 10px; margin:5px 5px 0 0;}

/*effect*/
.txt_effect{ animation: txtEffect 2s both; -webkit-animation: txtEffect 1s both;}
@keyframes txtEffect{0%{ transform: translateY(-50px);} 100% {opacity:1; transform: translateY(0);}}
@-webkit-keyframes txtEffect{100% {opacity: 1}}



/* company
===============================*/
#company{ width:96%; max-width:900px; margin:auto; padding:90px 0 200px;}
#company ul{ width:100%; max-width:610px; margin:40px auto 40px;}
#company li{ float:left; margin-bottom:20px; border-bottom:1px solid #f2f2f2; padding-bottom:4px;}
#company li:nth-child(odd){ width:20%;}
#company li:nth-child(odd):before{ content:""; border-left:5px solid #fb4616; margin-right:5px;}
#company li:nth-child(even){ width:80%;}
#company iframe{ margin-top:40px;}


/* company
===============================*/
#privacy{ width:96%; max-width:900px; margin:auto; padding:90px 0 100px;}
#privacy h3{ font-size:1.3em; margin-bottom:20px;}
#privacy ul{ counter-reset:number; margin:20px 0 10px;}
#privacy li{ padding:0 0 10px 18px; position:relative;}
#privacy li:before{ counter-increment:number; content:counter(number)"."; position:absolute; left:0;}



/* footer
===============================*/
footer{ width:100%; position:absolute; bottom:0; background:#fb4616;}
footer p{ color:#fff; text-align:center; padding:15px 0;}

#page_top{ display:block; position:fixed; bottom:90px; right:2%;}
#page_top i{ background:#fb4616; opacity:0.8; color:#fff; font-size:2em; padding:0.5vmax 0.9vmax; border-radius:50%;}


@media all and (max-width: 1100px) {
#main_img{ padding-bottom:0}
section h2{ padding-top:40px;}
.white_bg p{ margin:40px auto;}
}

@media all and (max-width: 800px) {

/* all theme
===============================*/
#content{ margin-top:50px;}
.sp-br, header label{ display:block;}



/* header
===============================*/
header{ height:50px;}
h1{ width:180px; left:-17px;}

nav{ position:fixed; top:0; right:-70%; width:70%; height:100%; background:#f8d27f; -webkit-transition-property:all; transition-property:all; -webkit-transition-delay:.3s; transition-delay:.3s; -webkit-transition-duration:.3s; transition-duration:.3s;}
nav div:first-child{ padding-top:80px;}
nav div{ text-align:left; display:block; padding:0 0 20px 20px;}

.check:checked ~ .wrap{ overflow:hidden;}
.check:checked ~ nav{-webkit-transition-delay:0s; transition-delay:0s; -webkit-transform:translateX(-100%); -ms-transform:translateX(-100%);transform: translateX(-100%);box-shadow: 0 0 50px 0 rgba(0,0,0,.8); -webkit-transition-property:all; -webkit-transition-delay:.3s; transition-delay:.3s; -webkit-transition-duration:.5s; transition-duration:.5s; z-index:2;}
.check:checked ~ .close-menu{visibility:visible; opacity:1;	-webkit-transition-duration:1s; transition-duration:1s; -webkit-transition-delay:.2s;transition-delay:.2s; background:rgba(0,0,0,.5);visibility: visible;opacity: 1;}
.check:checked ~ .menu-btn{ position:fixed; top:10px; right:1%;}
.check:checked ~ .menu-btn .bar.top {width:40px; right:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg); height:2px;}
.check:checked ~ .menu-btn .bar.middle {opacity:0;}
.check:checked ~ .menu-btn .bar.bottom { width:40px;top:28px; right:0; -webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg); height:2px;}
.check:checked ~ .close-menu {-webkit-transition-duration: 1s;transition-duration: 1s;-webkit-transition-delay: .3s;transition-delay: .3s;background: rgba(0,0,0,.5);visibility: visible;opacity: 1;}
.check:checked ~ .menu-btn .menuTx{ visibility:hidden; opacity:0;}

.check{ display:none;}
.menu-btn{ display:block; position:relative; top:10px; right:2%; z-index:3;}
.bar {position: absolute; top:0; right:0; display: block; width:32px;height:2px;background:#fb4616;-webkit-transition: all .5s;transition: all .5s;-webkit-transform-origin: left top;-ms-transform-origin: left top;transform-origin: left top;}
.bar.middle {top:14px;opacity:1;}
.bar.bottom {top:27px;-webkit-transform-origin: left bottom;-ms-transform-origin: left bottom;transform-origin: left bottom;}
.close-menu{ position:fixed; top:0; right:70%; width:100%; height:100vh;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: .3s;transition-duration: .3s;-webkit-transition-delay: 0s;transition-delay: 0s;visibility: hidden;opacity: 0;}


/* section
===============================*/
section h2{ font-size:3em;}
.white_bg p{ font-size:1em;}

.servise{ margin:100px 0 100px;}
.servise:nth-of-type(even) .img_wrap{ float:none;}
.servise .comment{ position:static;}
.servise .comment h3{ line-height:1;}


/* company
===============================*/
#company{ padding-top:20px;}
#company ul{ margin-bottom:0;}
#company li:nth-child(odd){ width:30%;}
#company li:nth-child(even){ width:70%;}
}