@charset "UTF-8";

body,html{ overflow-x: hidden; background:#FFF;}
body{ font-family: Zen Kaku Gothic N R; line-height:2;}
h2,h3{ font-family: Zen Kaku Gothic N R;}
a{ color:#231815;}
.row-eq-height{ display:-webkit-flex; display:flex; flex-wrap:wrap;}
.bg_lgray{ background:#f8f8f8; padding-top:4em; padding-bottom:4em;}
.bg_lgraytop{ background:#f8f8f8; padding-bottom:4em;}
.bg_gray{ background:#666; padding-top:4em; padding-bottom:4em;}
.containerpad{ padding-top:3em; padding-bottom:4em;}
@media (max-width: 767px) {
	.bg_lgray{ padding-top:2em; padding-bottom:2em;}
	.containerpad{ padding-top:2em; padding-bottom:2em;}
	.row.row-eq-height .col-xs-6{ width:49.8%;}
}
@media (min-width: 768px) and (max-width: 991px) {
	.row.row-eq-height .col-sm-3{ width:24.9%;}
	.bg_lgray{ padding-top:2em; padding-bottom:2em;}
	.containerpad{ padding-top:2em; padding-bottom:3em;}
	.row.row-eq-height .col-xs-6{ width:49.9%;}
}



/******************************************************************/
/* HEADER */
/******************************************************************/
header{ margin:1em 0;}
header.topbg{ background:url(../images/top/p-main.jpg) center bottom no-repeat;}
h1{ font-size:77%; white-space:nowrap; margin:0; padding:0.5em 0;}
@media (max-width: 767px) {
	header{ margin:0;}
	header.topbg{ background:url(../images/top/p-main.jpg) center center no-repeat;}
	h1{ padding:0; white-space:normal;}
}
@media (min-width: 768px) and (max-width: 991px) {
	header{ margin:0.5em 0 0 0;}
}


/* NAV */
.navbar-brand { padding:0 10px 0px 0; line-height:1;}
.navbar-brand img{ width:158px; height:auto;}
.navbar-default{ background-color:#FFF; border:none;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color:transparent;}
.navbar-default .navbar-toggle .icon-bar { background-color: #000;}
.navbar-default .navbar-collapse{ border:none;}
.navbar a{ color:#000;}
.navbar-nav{ margin:1em -15px 0 -15px; float:right; font-family:FB Agenda Medium Condensed; font-size:131%;}
.nav > li > a { display:block; border-radius:0px; color:#000;}
.nav > li > a:hover,.nav > li > a:focus { background-color: transparent;}
.nav > li > a.current{ color:#000;}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color:#FFF; border-color: #CCC;}
@media (max-width: 767px) {
	.navbar { margin-bottom:0;}
	.navbar-brand{ padding:5px 0 0 0; margin:0;}
	.nav > li > a { padding:10px 30px;}
	.nav > li > a:hover,.nav > li > a:focus,.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color:#FFF5C4;}
	.navbar-nav{ float:none;}
	.navbar-nav .open .dropdown-menu > li > a { line-height:1.3;}
}
@media (max-width: 991px) {
	.navbar-toggle { margin:25px 0 0 0; border:none;}
	.navbar-toggle .icon-bar { width:30px;}
	.navbar-toggle .icon-bar + .icon-bar{ margin-top:7px;}
	.navbar-default .navbar-toggle ,.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color:transparent;}
}

@media (min-width: 768px) and (max-width: 991px) {
	.navbar-default{ padding:0;}
	.navbar-brand{ padding-left:15px;}
	.nav > li{ margin:0; padding:0;}
	.nav > li > a { margin:0; padding:10px 30px;}
}
@media (min-width: 992px) and (max-width: 1200px) {
	.navbar-nav{ margin:1em -15px 0 -38px;}
}
@media (min-width: 1200px) {
	.nav > li > a { padding:0 15px;}
}
/*
 * Off Canvas
 * --------------------------------------------------
 */
@media (max-width: 991px) {
  .row-offcanvas {
	padding-top:10px;
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }
  .row-offcanvas-right {
    right:0;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
/*     right: -100%; */
   right: -102%;
  }
  .row-offcanvas-right.active {
    right:60%; /* 6 columns */
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 100%; /* 6 columns */
    z-index:999999;
/*    background:#FFF; */
   background:rgba(255,255,255,0.9);
	height:100vh;
	overflow:scroll;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .row-offcanvas-right
  .sidebar-offcanvas {
/*     right: -100%; */
   right: -116%;
  }
}


/* navbar collapse for iPad (bootstrap) */
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-header img{ display:block;}

    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}



/******************************************************************/
/* FOOTER */
/******************************************************************/
footer{ padding:3% 0 1% 0; background:#9a9c99; color:#FFF; font-size:93%;}
footer a{ color:#FFF;}
footer a:hover{ color:#FFF;}
footer ul{ list-style:none; font-size:146.5%; font-family:FB Agenda Medium Condensed;}
footer h2{ font-size:100%; margin:1em 0 0 0;}
.company {background:#000; padding:0.2em 0.5em; margin-top:0.5em;}
.tel{ margin-bottom:0; font-size:161%; font-family:Midashi Go MB31; letter-spacing:0.1em;}
.tel small{ font-size:15px; font-family: Zen Kaku Gothic N R; letter-spacing:0;}
#copyright{ font-size:77%; text-align:center;}
#pagetopbox{ display:none; position:fixed; bottom:20px; right:20px; z-index:999999;}
#pagetopbox a{ display:block;}
@media (max-width: 767px) {
	footer{ padding:5% 0; line-height:1.5;}
	.ft_spmenu{ background:#999; color:#FFF; z-index:9999; padding:10px 1%; font-size:108%; font-weight:bold; font-family:Futo Go B101;}
	.ft_spmenu div{ margin:0; padding:0 5px;}
	.ft_spmenu a{ border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; background:#FFF; display:block; padding:10px 0; text-decoration:none; text-align:center; border:1px solid #999;}
	.ft_spmenu a.call{ color:#00903D;}
	.ft_spmenu a.contact{ color:#0080C7;}
/*
	.tel small{ display:block; font-size:53%;}
*/
	#pagetopbox{ bottom:10px; right:10px;}
}

.grecaptcha-badge {
	bottom: 85px !important;
}

/******************************************************************/
/* COMMON */
/******************************************************************/
.heading span{ margin-left:2em; font-size:53%; color:#999;}
.hd_bggray{ background:#333; color:#FFF; padding:1em;}



/******************************************************************/
/* TOP */
/******************************************************************/
h2.copy{ line-height:1.5; padding:7em 0 5em 0; letter-spacing:0.1em; text-align:center; width:50%; font-family:Gothic MB101 Bold; font-size:237%; text-shadow: 0 0px 6px #FFF;}
h2.copy span{ margin-top:0.5em; color:#E94709; display:block; font-size:56%; font-family:Zen Kaku Gothic N R; letter-spacing:0;}
.photoweb{ margin:1em 0; font-size:197%; text-align:center; letter-spacing:0.1em; font-family:Hiragino Sans Old W8 JIS2004;}
.photoweb small{ font-size:45%; display:block; letter-spacing:0; font-family: Zen Kaku Gothic N R;}
.photoweb span{ color:#e64607; font-family: Zen Kaku Gothic N R;}
.mincenter{ margin-bottom:1em; text-align:center; font-family:Ryumin Medium KL; line-height:2; letter-spacing:0.1em;}
.bg_uservice{ margin-top:1em; padding:4.5em 0 3.5em 0; background: url("../images/top/bg-uservice.png") center center no-repeat;}
.uservoice { height:85%; margin-bottom:15%; position: relative; padding:1.5em 0.5em 0 0.5em; background:#FFF; box-shadow: 0 2px 4px #999; border-radius:10px;}
.uservoice:after{ content:""; display:block; clear:both; height:0px; overflow:hidden;}
.marker_y{ background: linear-gradient(transparent 60%, #ffff66 60%);}
.fontlmarker_y{ background: linear-gradient(transparent 60%, #ffff66 60%); font-size:123.1%; color:#E94709;}
.pointbox{ background:#3F3D3C; color:#FFF; padding:4em 5em;}
.pointbox h2{ margin:0 0 1em 0; font-size:153.9%; font-family:Futo Go B101;}
.pointbox h2 num{ font-family:Kurenaido; font-size:197%; display:block; letter-spacing:0.1em;}
.point01{ background-image: url("../images/top/p-001.png?190611"); background-size:50% auto; background-position: left center; background-repeat: no-repeat;}
.point02{ background-image: url("../images/top/p-002.png?190611"); background-size:50% auto; background-position: right center; background-repeat: no-repeat;}
.point03{ background-image: url("../images/top/p-003.png?190611"); background-size:30% auto; background-position: left 6em center; background-repeat: no-repeat;}
.point04{ background-image: url("../images/top/p-004.png?190611"); background-size:45% auto; background-position: right center; background-repeat: no-repeat;}
@media (max-width: 767px) {
	h2.copy{ width:100%; padding:2em 0;}
	.photoweb small{ font-size:42%;}
	.uservoice { height:90%; margin-bottom:10%; padding:1em 0 2em 0; font-size:93%;}
	.uservoice img{ width:30%;}
	.mincenter{ font-size:116%; text-align:left; margin-bottom:1em;}
	.pointbox{ margin-top:18em; padding:2em 2em;}
	.point01,.point02{ background-size:contain; background-position: center top;}
	.point03{ background-size:70% auto; background-position: center top 1em;}
	.point04{ background-size:80% auto; background-position: center top 1em;}
}

@media (min-width: 768px) and (max-width: 991px) {
	.mincenter{ font-size:138.5%; text-align:left;}
	.pointbox{ padding:1em;}
	.pointbox h2{ margin:0 0 0.5em 0; font-size:131%;}
	.pointbox h2 num{ font-size:167%;}
}
@media (min-width: 992px) and (max-width: 1200px) {
	.point01{ background-size:contain; background-position: left top;}
	.point02,.point04{ background-size:contain; background-position: right top;}
	.point03{ background-size:45% auto; background-position:left top 2em;}

}

/* OWL CAROUSEL */
.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev { position:absolute; top:40%; margin:0; padding:0 15px; font-size:197%;}
.owl-carousel .owl-nav .owl-prev{ left:-45px;}
.owl-carousel .owl-nav .owl-next{ right:-45px;}
@media (max-width: 767px) {
	.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev { top:30%; padding:0 40px;}
	.pgallery{ padding:0 1em;}
}
@media (min-width: 768px) and (max-width: 992px) {
	.pgallery{ padding:0 1em;}
	.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev { top:35%; padding:0 35px;}
}



@media (min-width: 992px) {
	.img_wrap {border:1px solid #ddd; margin:0 auto; overflow:hidden;}
	.img_wrap img {width:100%; transform:scale(1.1); cursor:pointer; filter:grayscale(100%); transition-duration:0.5s;}
	.img_wrap img:hover {filter:grayscale(0); transition-duration:0.5s;}
}


/******************************************************************/
/* 2nd */
/******************************************************************/
.pageheader{ position:relative; top:-5em; margin-bottom:-3em; background:#FFF; text-align:center;}
.pageheader h2{ font-size:197%; padding:0.5em 3em 1em 3em; letter-spacing:0.1em; line-height:1.7; font-family:FB Agenda Medium Condensed;}
.pageheader h2 span{ display:block; font-size:53%; font-family:Ryumin Medium KL;}
@media (max-width: 767px) {
	.pageheader{ top:-3em; margin-bottom:-2em;}
	.pageheader h2{ font-size:167%; padding:0.6em 0em; line-height:1.3;}
}
@media (min-width: 768px) and (max-width: 991px) {
	.pageheader{ top:-4em; margin-bottom:-2em;}
	.pageheader h2{ font-size:167%; padding:0.6em 0em; line-height:1.3;}
}



/******************************************************************/
/* ABOUT */
/******************************************************************/
dl.companytbl dt,dl.companytbl dd{ padding-top:0.2em; padding-bottom:0.2em;}
@media (max-width: 767px) {
	dl.companytbl dd{ padding-bottom:1em; padding-left:1em;}
}
@media (min-width: 768px) and (max-width: 991px) {
	dl.companytbl dt{ width:100px;}
	dl.companytbl dd{ margin-left:120px;}
}



/******************************************************************/
/* PLAN */
/******************************************************************/
ul.planbasicset{ margin:1em 0; padding:0; list-style:none; font-size:116%;}
ul.planbasicset li:before{ font-family: FontAwesome; content:'\f192'; margin-right:0.5em;}
.planbox{ background:#EEE; padding:1.5em 1em; font-size:93%;}
.planbox ul{ margin:0 0 0 2em; padding:0;}
.planbox h3{ margin-top:0;}
dl.planmenu{ border:1px solid #DDD; margin:1em 0 2em 0;}
dl.planmenu dt{ color:#FFF; padding:0.5em 0; font-size:131%; text-align:center;}
dl.planmenu dt span{ position:absolute; top:7%; left: 50%; -webkit-transform: translate(-50%, 7%); transform: translate(-50%, 7%); font-size:61%; background:#00DB9A; color:#FFF; padding:0.2em 1em; border-radius:20px;}
dl.planmenu dd{ padding:1em;}
dl.planmenu dd.topline{ border-top:1px dotted #DDD; font-size:95%;}
dl.planmenu dd strong{ font-size:167%; display:block; font-family:Midashi Go MB31;}
dl.planmenu dd ul{ margin:0.5em 0 0 0; padding:0 1.5em;}
h3.hd_slash{ text-align:center; font-size:116%; margin:0 0 1.5em 0;}
h3.hd_slash strong{ position:relative; display:inline-block; padding:0 40px;}
h3.hd_slash strong:before{ left:0; content:''; position:absolute; top:70%; display:inline-block; width:30px; height:1px; background-color:black; -webkit-transform:rotate(60deg); transform:rotate(60deg);}
h3.hd_slash strong:after{ right:0; content:''; position:absolute; top:70%; display:inline-block; width:30px; height:1px; background-color:black; -webkit-transform:rotate(-60deg); transform:rotate(-60deg);}
@media (max-width: 767px) {
	ul.planbasicset{ font-size:100%;}
	h3.hd_slash strong{ padding:0 30px;}
	dl.planmenu{ margin:1em 0 4em 0;}
}
@media (min-width: 768px) and (max-width: 991px) {
	h3.hd_slash{ font-size:131%; margin:0 0 0.5em 0;}
	h3.hd_slash strong{ padding:0 20px;}
	dl.planmenu dt span{ top:11%;}
}



/******************************************************************/
/* FLOW */
/******************************************************************/
.cd-multi-steps{ margin:2em 0; padding:0;}
.cd-multi-steps:after{ content: ""; display:table; clear:both;}
.cd-multi-steps li{ display:inline-block; position:relative; margin:0 40px 0 0; text-align:center;}
.cd-multi-steps li::after{ display:inline-block; position:absolute; content:''; height:4px; background:#E94709; margin:0;}
.cd-multi-steps li:last-of-type{ margin-right:0;}
.cd-multi-steps li:last-of-type::after{ display:none;}
.cd-multi-steps li > *{ display:inline-block; position:relative; color:#231815; font-size:93%; white-space:nowrap;}
.cd-multi-steps.text-bottom li{ width:10%;}
.cd-multi-steps.text-bottom li::after{ position:absolute; left:50%; width:calc(100% + 50px);}
.cd-multi-steps.text-bottom li > *::before{ content:''; position:absolute; z-index:1; left:50%; right:auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); height:12px; width:12px; border-radius:50%; background:#E94709;}
.cd-multi-steps.text-bottom li::after{ top:3px;}
.cd-multi-steps.text-bottom li > *{ padding-top:20px;}
.cd-multi-steps.text-bottom li > *::before { top:0;}
.cd-multi-steps.count li{ counter-increment:steps;}
.cd-multi-steps.text-bottom.count li > *::before{ content:counter(steps); height:26px; width:26px; line-height:26px; font-size:1.4rem; color:#FFF;}
.cd-multi-steps.text-bottom.count li::after{ top:11px;}
.cd-multi-steps.text-bottom.count li > *{ padding-top:34px;}
@media (min-width: 768px) and (max-width: 991px) {
	.cd-multi-steps li{ margin-bottom:2em;}
	.cd-multi-steps.text-bottom li{ width:20%;}
}
.flowbox{ margin-bottom:2em; padding:1em; border:2px solid #E94709; background:#fef7f2;}
.flowbox dl{}
.flowbox dl dt{ text-align:center;}
.flowbox dl dt i{ display:block; font-size:320%; color:#E94709; margin:0.2em 0 0.5em 0;}
.flowbox dl dt h3{ font-size:131%; margin:1em 0 0.2em 0; color:#E94709;}
.flownum{ font-size:131%;}
.flownum span{ background:#E94709; border-radius:50%; color:#FFF; padding:0.5em 0.7em 0.3em 0.7em;}
@media (max-width: 767px) {
	.flowbox{ padding:1em 1em 0 1em; height:auto; margin-bottom:2em;}
}
@media (min-width: 768px) and (max-width: 991px) {
	.flowbox{ padding:1.5em 1em 5% 1em; height:90%;}
	.flowbox dl dt h3{ font-size:116%;}
}


/******************************************************************/
/* WORKS */
/******************************************************************/
.hd_works{ font-size:100%; margin:1em 0 2em 0;}
.video{ position:relative; width:100%; padding-top:56.25%;}
.video iframe{ position:absolute; top:0; right:0; width:100%; height:100%;}
.worksslider{}


/******************************************************************/
/* CONTACT */
/******************************************************************/
.bg_contactinfo{ padding:4.5em 0 3.5em 0; background: url("../images/contact/bg-contactinfo.png") center center no-repeat;}
.contactinfo{ background:#FFF; box-shadow: 0 2px 4px #999; border-radius:10px; padding:1.5em; text-align:center;}
.contactinfo:after{ content:""; display:block; clear:both; height:0px; overflow:hidden;}
.contactinfo h2{ margin:0 0 0.5em 0; color:#E94709; font-family:Midashi Go MB31;}
@media (max-width: 767px) {
	.contactinfo{ padding:1em 0.5em;}
}