@charset "utf-8";
body { position:relative; color: #333; }

.sp { display: none;  }
.pc { display: block; }
img { width:auto; }

#wrap { 
	width:100%;
	min-width:1040px;
  margin-top: 144px;
}

.sidelist { letter-spacing:-.4em; }
.sidelist li {
	letter-spacing: normal;
	display:inline-block;
}

/* =============================== common =============================== */

.sec { padding: 80px 0; }
.sec_t { padding: 80px 0 0; }
.sec30 { padding: 30px 0; }
.sec50 { padding: 50px 0; }
.inbox { width: 1040px; margin-left: auto; margin-right: auto; }
.inbox_in{ width: 980px; margin-left: auto; margin-right: auto; }

.bg01 {
    background: #DEF0F7;
    background: url(../img/bg_03.jpg) no-repeat left bottom;
}
.bg02 { background: #f5f7f7; }

.btn01 a {
  display: inline-block;
  border: 1px solid #1E85B2;
  background: url(../img/icon_arrow_01.png) no-repeat right 20px center #1E85B2;
  color: #fff;
  text-align: center;
  width: 210px;
  line-height: 1;
  padding: 18px 10px 18px 0;
  transition: .3s;
  border-radius: 10px;
}
.btn01 a:hover {
  background: url(../img/icon_arrow_01b.png) no-repeat right 20px center #fff;
  color: #1E85B2;
  transition: .3s;
  text-decoration: none;
}

.ttl01 {
  font-size: 28px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  color: #1E85B2;
  font-weight: bold;
}
.ttl01_sub {
  text-align: center;
}
.ttl01_sub span {
  font-size: 14px;
  display: inline-block;
  padding-top: 10px;
  color: #666;
  border-top:2px solid #99d5ef;
}

.ttl02 {
  font-size: 26px;
  color: #1E85B2;
  padding-bottom: 10px;
  border-bottom: 2px solid #333;
  text-align: left;
  font-weight: normal;
}
.ttl02_sub {
  font-size: 16px;
  margin-left: 10px;
  font-style: normal;
}

.ttl03 {
  font-size: 20px;
  color: #1E85B2;
  font-weight: bold;
  text-align: center;
  padding-bottom: 20px;
  background:url(../img/icon_border_03.png) no-repeat center bottom;
}
.ttl04 {
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  padding: 12px 0 12px 28px;
  background: #eee;
}
.ttl05 {
  text-align: center;
  padding: 18px 0;
  color: #1E85B2;
  font-size: 18px;
  font-weight: bold;
  background: #ededf3;
}
.ttl06 {
  text-align: left;
  border-bottom: 2px solid #1E85B2;
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 14px;
  width: 800px;
  margin: 0 auto;
}

.ico01 { background: url(../img/icon_border_02.png) no-repeat top left; padding-top: 35px;}

.acc dd { display: none; }

/* =============================== header =============================== */
header { width: 100%; background:#fff; position: fixed; top: 0; z-index: 600; }
#header_inner { width: 1040px; margin: 0 auto; position: relative; height: 86px; }
header h1 { position: absolute; left: 0; top: 22px; }
header #h_tel { position: absolute; left: 243px; top: 20px; background: url(../img/h_icon_tel.png) no-repeat left 3px top 3px; padding-left: 30px; }
header #h_tel p { font-size: 26px; display: inline-block; vertical-align: top; line-height: 1; }
header #h_tel span { display: block; font-size: 12px; margin-left: -24px; margin-top: 6px; }
header #h_contact { position: absolute; right: 0; top: 20px; }
header #h_contact .link { text-align: right; margin-bottom: 5px; }
header #h_contact .link a {
  background: url(../img/icon_arrow_04.png) no-repeat left center;
  font-size: 10px;
  padding-left: 10px;
}
header #h_contact .link a:hover {
  text-decoration: none;
}
header #h_contact .btn a {
  display: inline-block;
  background: #1866C9;
  text-align: center;
  width: 190px;
  padding: 12px 10px 12px 0;
  transition: .3s;
  border-radius: 50px;
  border: 1px solid #1866C9;
}
header #h_contact .btn a span {
  background: url(../img/h_icon_mail.png) no-repeat left center;
  color: #fff;
  padding-left: 24px;
  line-height: 1;
  transition: .3s;
}
header #h_contact .btn:nth-of-type(2) a {
  background: #65b1ff;
  border: 1px solid #65b1ff;
}
header #h_contact .btn:nth-of-type(2) a span {
  background: url(../img/h_icon_cart.png) no-repeat left center;
  background-size: 17px;
}
header #h_contact .btn a:hover {
  background: #fff;
  text-decoration: none;
}
header #h_contact .btn a:hover span {
  color: #1E85B2;
  background: url(../img/h_icon_mailb.png) no-repeat left center;
  transition: .3s;
}
header #h_contact .btn:nth-of-type(2) a:hover span {
  color: #65b1ff;
  background: url(../img/h_icon_cartb.png) no-repeat left center;
  background-size: 17px;
}

header #sp_menu { display:none; }

#header_inner h1 img {
    width: 222px;
}
#h_contact ul {
    display: flex;
    justify-content: space-evenly;
    width: 425px;
}

/* =============================== gnav =============================== */

#gnav { width: 100%; background:#EEF7F8; position: fixed; top: 86px; z-index: 600; }
#gnav ul { width: 1040px; margin: 0 auto; text-align: center; }
#gnav li a {
  display:  block;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 15px 26px;
  color: #333;
  border-bottom: 4px solid #def0f7;
  transition: .3s;
}
#gnav li a:hover {
  text-decoration: none;
  transition: .3s;
  border-bottom: 4px solid #1E85B2;
}

#gnav > ul > li:hover .menu {
  max-height: 9999px;
  opacity: 1;
}
#gnav > ul > li > a {
  transition: all .2s ease-in;
}
#gnav > ul .menu {
  transition: all .2s ease-in;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  left: 0;
  text-align: center;
  position: absolute;
  background-color: #1E85B2;
  z-index: 1000;
}
#gnav > ul .menu .innav {
  width: 1040px;
  margin: 0 auto;
  padding: 40px 0;
}
#gnav > ul .menu p.f_l {
  text-align: left;
  width: 275px;
  font-size: 26px;
  color: #fff;
  line-height: 110%;
}
#gnav > ul .menu p.f_l span {
  font-size: 14px;
  font-style:normal;
  color: #fff;
}
#gnav > ul .menu .menu_inner {
  width: 450px;
  float: left;
  text-align: left;
}
#gnav > ul .menu li {
  width: 200px;
  margin: 0 40px 20px 0;
}
#gnav > ul .menu li:nth-child(2n) { margin-right: 0; }
#gnav > ul .menu a {
  color: #fff;
  width: 200px;
  letter-spacing: normal;
  padding: 0;
  border-bottom: none;
  text-align: left;
}
#gnav > ul .menu a p {
  margin-top: 5px;
  padding-left: 15px;
  background: url(../img/icon_arrow_gnav.png) no-repeat left center;
  color: #fff;
}
#gnav > ul .menu a:hover {
  opacity: .6;
  transition: .3s;
}


/* =============================== footer =============================== */

footer #fnav {
  background: #1E85B2;
}
footer #fnav ul { width: 1040px; margin: 0 auto 30px;}
footer #fnav li a {
  color: #fff;
  display: block;
  padding: 24px 28px;
}
footer #fnav li a:hover {
  text-decoration: none;
  background: rgba(255,255,255,.4);
  transition: .3s;
}

#fnav > ul > li:hover .menu {
  max-height: 9999px;
  opacity: 1;
}
#fnav > ul > li > a {
  transition: all .2s ease-in;
}
#fnav > ul .menu {
  transition: all .2s ease-in;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  left: 0;
  text-align: center;
  position: absolute;
  background: rgba(0,104,183,.9);
  z-index: 1000;
}
#fnav > ul .menu .innav {
  width: 1040px;
  margin: 0 auto;
  padding: 10px 0;
}
#fnav > ul .menu .menu_inner {
  text-align: left;
  margin-bottom: 0;
}
#fnav > ul .menu li {
  margin: 0 15px 0 10px;
}
#fnav > ul .menu a {
  color: #fff;
  letter-spacing: normal;
  padding: 10px;
  border-bottom: none;
  text-align: left;
  background: url(../img/icon_arrow_gnav.png) no-repeat left center;
  padding-left: 15px;
}
#fnav > ul .menu a:hover {
  background: url(../img/icon_arrow_gnav.png) no-repeat left center;
  opacity: .7;
  transition: .3s;
}
#f_logo img {
    width: 150px;
}

#copyright { font-size: 14px; text-align: center; padding: 25px 0 50px; }


/* =============================== contents =============================== */

#contents { margin-bottom: 0px; }
#contents.sub { margin-bottom: 80px; }

/* =============================== mainslider =============================== */

#mainslide { position: relative; }
#mainslide .maincopy {
  position: absolute;
  right: 0;
  top: 26%;
  color: #fff;
  font-size: 28px;
  line-height: 160%;
  display: inline-block;
  background: #1E85B2;
  letter-spacing: .1em;
  z-index: 100;
  border-radius: 15px 0 0 15px;
}
#mainslide .maincopy a {
  color: #fff;
  padding: 10px 80px;
  display: block;
}

#mainslide .maincopy {
	font-weight: bold;
          background: linear-gradient(45deg, #54C4F8, #32C6E4);
          background-size: 400% 400%;
          animation: GradientBackground 10s ease infinite;
        }

        @keyframes GradientBackground {
          0% {
            background-position: 0% 50%;
          }

          50% {
            background-position: 100% 50%;
          }

          100% {
            background-position: 0% 50%;
          }
        };
            
.mainslider-for ,
.mainslider-for img { width: 100%; min-width: 1040px; }

.mainslider_navbox {
  min-width: 1040px;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: rgba(0,0,0,.5);
}
.mainslider-nav { width: 740px; margin: 0 auto; }
.mainslider-nav .navbox {
  margin: 15px 10px;
  cursor: pointer;
}
.mainslider-nav .navbox:hover { opacity: .7; transition: .3s; }
.mainslider-nav .navbox img {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #fff;
}

/* =============================== content =============================== */

#top_about p { font-size: 18px; line-height: 225%; }


#top_business .bs_slidebox { width: 100%; }
#top_business .bs_slidebox .box {
  width: 400px;
  box-sizing: border-box;
  padding: 10px 10px 25px 10px;
  margin: 18px 16px;
  background: #fff;
  box-shadow:0px 0px 18px 2px rgb(0 0 0 / 20%);
  border-radius: 10px;
}
#top_business .bs_slidebox .box a:hover {
  text-decoration: none;
}
#top_business .bs_slidebox .box p {
  margin-top: 25px;
  background: url(../img/icon_arrow_02.png) no-repeat left 8px center;
  padding-left: 40px;
  transition: .3s;
}
#top_business .bs_slidebox .box a:hover img {
  opacity: .7;
  transition: .3s;
}
#top_business .bs_slidebox .box a:hover p {
  background: url(../img/icon_arrow_02b.png) no-repeat left 8px center;
  opacity: .7;
  text-decoration: none;
  transition: .3s;
}
#top_business .slick-prev ,
#top_business .slick-next {
  display: block;
  border: none;
  outline: none;
  text-indent: -9999px;
  width:15px;
  height: 27px;
  cursor: pointer;
  position: absolute;
  top: 160px;
  left: 0; right: 0;
  margin: auto;
  z-index: 500;
}
#top_business .slick-prev:hover ,
#top_business .slick-next:hover {
  opacity: .5;
  transition: .3s;
} 
#top_business .slick-prev {
  background: url(../../img/top/icon_slide_prev.png) no-repeat center center;
  right: 434px;
}
#top_business .slick-next {
  background: url(../../img/top/icon_slide_next.png) no-repeat center center;
  left: 434px;
}


#top_works .copy01, #top_sns .copy01 { font-size: 20px; color: #1E85B2; }
#top_works li { vertical-align: top; position: relative; margin-right: 31px; }
#top_works li a:hover { text-decoration: none; }
#top_works li:last-child { margin-right: 0; }
#top_works .on {
  position: absolute;
  background: rgba(0,104,183,.9);
  width: 160px;
  height: 20px;
  padding: 20px 10px;
  top: 50%;
  left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
  transition: .1s;
  display: inline-block;
}
#top_works .on h3 { color: #fff; font-size: 20px; line-height: 1; }
#top_works .on p { display: none; transition: 1s; }
#top_works li:hover .on {
  width: auto;
  min-width: 250px;
  padding: 30px 20px;
  height: auto;
  transition: .1s;
	will-change: transform;
}
#top_works li:hover .on h3 {
  margin-bottom: 10px;
  padding-bottom: 15px;
  background: url(../img/icon_border_01.png) no-repeat center bottom;
}
@keyframes show{
    from{ opacity: 0; }
    to  { opacity: 1; }
}
@-webkit-keyframes show{
    from{ opacity: 0; }
    to  { opacity: 1; }
}
#top_works li:hover .on p { display: block; animation: show 1.5s linear 0s; color: #fff; }


#top_topics .ttl02_sub { font-size: 14px; }
#top_topics h2 .ttl02_link { float: right; margin-top: 15px; }
#top_topics h2 .ttl02_link a {
  background: url(../img/icon_arrow_03.png) no-repeat left center;
  padding-left: 28px;
  font-style: normal;
  transition: .3s;
}
#top_topics h2 .ttl02_link a:hover {
  background: url(../img/icon_arrow_03b.png) no-repeat left center;
  text-decoration: none;
  transition: .3s;
}
#top_topics ul {
    width: 800px;
    margin: 0 auto;
}
#top_topics li { border-bottom: 1px solid #ddd; }
#top_topics li a { transition: .3s; display: block; padding: 30px 0; }
#top_topics li a:hover { text-decoration: none; opacity: .7; transition: .3s; }
#top_topics li:last-child { border-bottom: none; }
#top_topics li .ph ,
#top_topics li .txt { display: inline-block; vertical-align: top; }
#top_topics li .ph img { width: 100%; max-width: 160px; height: auto; }
#top_topics li .txt { width: 500px; margin-left: 20px; }
#top_topics li .date { margin-bottom: 10px; }
#top_topics li .tag { 
  color: #fff;
  display: inline-block;
  padding: 5px 15px;
  line-height: 1;
  font-size: 14px;
  margin-left: 10px;
}
#top_topics li .tag { background:#378dcf; }
#top_topics li .ttl_txt { font-size: 16px; }


#top_recruit { width: 420px; }
#top_recruit .ttl02_sub { font-size: 14px; }
#top_recruit p { font-size: 16px; line-height: 160%; }
#top_recruit .copy01 { font-size: 20px; color: #1E85B2; }
#top_recruit .btn01 a { width: 350px; }

#top_sns_box {
	display: flex;
	justify-content: space-evenly;
	width: 1050px;
	margin: 0 auto;
}


/* =============================== header =============================== */

/*hover caption kaiten*/
figure {
  position: relative;
  overflow: hidden;
}
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  -webkit-transition: .5s;
  transition: .5s;
  opacity: 0;
}
figure:hover figcaption {
  opacity: 1;
}
figcaption h3 ,
figcaption p { color: #fff; text-align: center; }


#top_business figcaption {
  background: rgba(0,104,183,.6);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
#top_business figure:hover figcaption {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}
#top_business figcaption h3 {
  position: absolute;
  top: 50%;
  left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
  border: 1px solid #fff;
  padding: 15px 54px;
  background: url(../img/icon_arrow_01.png) no-repeat right 15px center;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  font-weight: normal;
}




/*上下中央*/
.nakami {
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/*縦だけ
.nakami {
	position:absolute;
	top:50%;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
*/

#top_about video {
    width: 560px;
}