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

/*----- フェードイン -----*/
.inviewfadeIn {
    opacity: 0;
    transition: 2.0s;
}

.fadeIn {
    opacity: 1.0;
}

/*----- フェードインしながら上へスライド -----*/
.inviewfadeInUp {
    opacity: 0;
    transform: translate(0, 60px);
    -webkit-transform: translate(0, 60px);
    transition: .8s;
}

.fadeInUp {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

@media screen and (min-width: 768px){
    /* メディアクエリー */

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}


body{
    font-size: 15px/1.5;
    color:#3f3e3e;
    min-width: 1280px;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";

}

header, article, footer, aside, time ,nav ,small ,section{
    display: block;
}
p{
    color:#333;
    margin: 0 0 15px;
}
ul li, ol li{
    list-style-type: none;
}
a img{
    border-style:none;
}
a{
    text-decoration:none;
    display:block;
    color: #6297ce;
}
a:hover{
    opacity: 0.5;
}
img{
    vertical-align:bottom;
}
a:hover img{
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

a{
    text-decoration:none;
    display:block;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

table{
    border-collapse:collapse;
}
table td{
    vertical-align:top;
}
table th{
    text-align: left;
}

.sp {
    display: none;
}


/*************************header*************************/
.header_main {
    width: 100%;
    min-width: 1280px;
    display: flex;
    justify-content: center;
    position: fixed;
    z-index:999;
    height: 80px;
    align-items: center;
    transition: 1s ease;
}

.active{
    background: rgba(255,255,255,0.7);
    transition: 1s ease;
}

.header_main h1 {
    display: block;
    position: fixed;
    left: 2%;
    top: 1%;
}

.header_main img {
  width: 150px;
  height: auto;
}

.header_main .main_nav {
    display: none;
    transition: 1s ease;
}

.active .main_nav {
    display: block;
    position: relative;
    top:-20px;
    transition: 1s ease;
    left: 60px;
}


.header_main .header_nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 45px;
}

.header_main .header_nav li {
    font-size: 15px;
    padding: 0 20px;

}
.header_main .header_nav li a {
    color: #666;
}
.header_main .header_nav li.tel_btn{
	font-weight:bold;
	font-size:16px;
}
.header_main .header_nav li.tel_btn i {
	margin:0 5px 0 0;
}

.head_bg_color .header_nav li a {
    color: #333;
    transition: 1s ease;
}



.sub_menu{
    display: none;
    position: absolute;
    margin-left: 0;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #fff;
    background: rgba(255,255,255,0.7);
}

.sub_menu li{
    width: 100%;
}

.header_main .header_nav li .sub_menu li a{
    padding: 10px 0;
    display: block;
    color: rgba(46,150,72,1);
    border-bottom: 1px dotted #666;
    font-size: 13px;
}
/************************* ハンバーガーメニュー *************************/

.drawer-nav a {
    display: block;
    color: #666;
    padding: 1em;
}
.drawer-nav a:hover {}
/* このクラスを、jQueryで付与・削除する */
.drawer-nav.active {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

.navToggle {
    display: block;
    position: fixed;
    right: 2%;
    top: 2%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 999;
    text-align: center;
    background: #eb5405;
    border-radius: 25px;
}

.navToggle span {
    display: block;
    position: absolute;
    /* .navToggleに対して */
    width: 20px;
    border-bottom: solid 2px #fff;
    -webkit-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 15px;
}

.navToggle span:nth-child(1) {
    top: 15px;
}

.navToggle span:nth-child(2) {
    top: 19px;
}

.navToggle span:nth-child(3) {
    top: 23px;
}

.navToggle span:nth-child(4) {
    border: none;
    color: #fff;
    font-size: 9px;
    top: 26px;
    width: 40px;
    left: 5px;
}

/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 20px;
    left: 15px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 20px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


/************************* slideここから *************************/

/*** ページャー***/
.pagination {
    position: fixed;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
}

.pagination a {
    display: block;
    width: 12px;
    height: 12px;
    margin: 24px 0;
    border-radius: 50%;
    background-color: #fcfcfc;
    transition: transform 0.2s;
}

.pagination a.active {
    transform: scale(1.8);
}


.section {
    scroll-snap-align: start;
    height: 100vh;
}

/*** 1番目 ***/
.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
	left: 45%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 163px;
}

.slider{
	position:relative;
}

.full div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
}
.full div.img01 {
  background-image:url(../images/index/slide_01.jpg);
}
.full div.img02 {
  background-image:url(../images/index/slide_02.jpg);
}
.full .slick-dots {
	bottom: 4%;
	z-index: +1;
}


/*** 2番目、3番目***/
.full02 {
position: relative;
}

.area02 .full02 div.img03 {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
    background-image:url(../images/index/section2_bg.jpg);
    transition: all 0.5s ease-out;
    transform: matrix3d(
        0.9, 0, 0, 0,/*** 縮小***/
        0, 0.9, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    );
}

.area02 .full02 .an6-fadeleft p,.area02 .full02 .an7-fadeleft p{
	color:#fff;
	font-size:140%;
	line-height:2;
}

.area03 .full02 div.img03 {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
    background-image:url(../images/index/section3_bg.jpg);
    transition: all 0.5s ease-out;
    transform: matrix3d(
        0.9, 0, 0, 0,/*** 縮小***/
        0, 0.9, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    );
}

    .area04,.area05,area06,.area07 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.animation .full02 div.img03{
    transform: matrix3d(
        1, 0, 0, 0,/*** 縮小した物を元のサイズに***/
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    );
}

/*** 3番目の左半分***/
.bg_white {
    position: relative;
    top: -100vh;
    width: 50%;
    height: 100vh;
    background: rgba(255,255,255,0.85);
    font-size: 130%;
    font-weight: bold;
}
.bg_white div {

}

.bg_white div.txt01 {
    position:absolute;
    top:35%;
    left:8%;
    animation-name: fadeleft;
    animation-duration: 5s;
    animation-delay:3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

.bg_white div.txt01 {
    position:absolute;
    top:17%;
    left:10%;
}

.bg_white div.txt02 {
    position:absolute;
    top:370px;
    left:10%;
}

.bg_white div.txt03 {
    position:absolute;
    top:595px;
    left:10%;
}

.animation .bg_white div.txt01{
    opacity: 0;/* ここを追加 */
    animation-name: fadeleft_02;
    animation-duration: 5s;
    animation-delay:1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

.animation .bg_white div.txt02{
    opacity: 0;/* ここを追加 */
    animation-name: fadeleft_02;
    animation-duration: 5s;
    animation-delay:2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

.animation .bg_white div.txt03{
    opacity: 0;/* ここを追加 */
    animation-name: fadeleft_02;
    animation-duration: 5s;
    animation-delay:3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

.bg_white p {
    line-height: 3rem;
    margin: 0 0 40px;
}

.bg_white p br {
}


/*top_point*/
.top_point{
  padding: 100px 0 0;
}
.top_point h2{
    background-image: url(../images/index/point_midashi_bk.gif);
    background-position: center ;
    background-repeat: no-repeat;
    font-family: 'nsfjpbo';
    font-size: 200%;
    margin: 0 0 80px;
}
.top_point h2 span{
  width: 650px;
  margin: 0 auto;
  display: block;
  line-height: 2;
}
.top_point h2 span.point_midashi_2{
  text-align: center;
}
.top_point h2 span.point_midashi_3{
  text-align: right;
}

.top_point div.point_box{
  width: 100%;
  overflow: hidden;
  font-family: 'nsfjpbo';
  position: relative;
}
.top_point div.point_box .inner{
  width: 55%;
  float: right;
  position: relative;
}
.top_point div.point_box:nth-child(3) .inner{
  float: left;
  width: 45%;
  margin: 0 0 0 10%;
}

.top_point div.point_box figure{
  width: 40%;
  float: left;
}
.top_point div.point_box:nth-child(3) figure{
  width: 40%;
  float: right;
}

.top_point div.point_box figure img{
  width: 100%;
  height: auto;
}
.top_point div.point_box .inner h3{
  color: #6297ce;
  font-size: 190%;
  margin: 25px 0 30px;
  position: relative;
  z-index: 2;
}
.top_point div.point_box:nth-child(3) .inner h3{
  color: #72bd85;
}
.top_point div.point_box .inner p{
  font-size: 120%;
  line-height: 2;
  position: relative;
  z-index: 2;
}
.top_point div.point_box .inner p.zeb_logo {
  margin: 20px;
}

.top_point div.point_box .inner .more a{
  display: block;
  width: 250px;
  text-align: center;
  padding: 10px;
  color: #fff;
  border-radius: 30px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#72bd85+0,52a672+37,2989d8+66,3985cd+100 */
  background: #72bd85; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #72bd85 0%, #72bd85 37%, #2989d8 66%, #6297ce 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #72bd85 0%,#72bd85 37%,#2989d8 66%,#6297ce 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #72bd85 0%,#72bd85 37%,#2989d8 66%,#6297ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72bd85', endColorstr='#6297ce',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.top_point div.point_box .inner p.hosoku{
  background-color: #6297ce;
  color: #fff;
  display:block;
  width: 170px;
  text-align: center;
  line-height: 1.2;
  border-radius: 50%;
  padding: 47px 0;
  position: absolute;
  top: 0;
  right: 10%;
}
.top_point div.point_box .inner p.hosoku strong{
  font-size: 220%;
}
.top_point div.point_box .inner p.bk{
  font-family: 'VolkB';
  color: #eff6fc;
  font-size: 700%;
  position: absolute;
  top: -105px;
  left: 45%;
  z-index: 1;
}
.top_point div.point_box .inner p.bk span{
  font-size: 150%;
}
.top_point div.point_box:nth-child(3) p.bk{
  left: 25%;
  top: -100px;
  color: #f2f9f4;
}

/*top_news*/
.top_news{
  width: 960px;
  margin: 100px auto;
  font-family: 'nsfjpbo';
}
.top_news h2{
  font-size: 200%;
  text-align: center;
  margin: 0 0 30px;
}
.top_news h2 span{
  font-size: 80%;
  display: block;
  color: #6297ce;
}
.top_news .news_box{
  border-top: 1px solid #ddd;
  padding: 20px;
}
.top_news .news_box .date{
  color: #6297ce;
}
.top_news .news_box .date span{
  background-color: #eff6fc;
  font-size: 90%;
  border-radius: 20px;
  padding: 3px 20px;
  margin: 0 0 0 10px;
}
.top_news .news_box h3{
  color: #3d3d3d;
}
.top_news .more{
  border-top: 1px solid #ddd;
}
.top_news .more a{
  font-size: 120%;
  display: block;
  width: 300px;
  margin: 30px auto;
  text-align: center;
  padding: 15px;
  color: #fff;
  border-radius: 30px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#72bd85+0,52a672+37,2989d8+66,3985cd+100 */
  background: #72bd85; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #72bd85 0%, #72bd85 37%, #2989d8 66%, #6297ce 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #72bd85 0%,#72bd85 37%,#2989d8 66%,#6297ce 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #72bd85 0%,#72bd85 37%,#2989d8 66%,#6297ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72bd85', endColorstr='#6297ce',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


/*top_recruit*/
.top_recruit{
  text-align: center;
  background-image: url(../images/index/top_recruit_bk.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 60px 0;
}
.top_recruit h2{
  font-family: 'VolkB';
  color: #fff;
  font-size: 300%;
}
.top_recruit h3{
  color: #fff;
  font-family: 'nsfjpbo';
  margin: 0 0 50px;
  font-size: 120%;
}
.top_recruit ul li{
  background-color: #fff;
  font-family: 'nsfjpbo';
  display:inline-block;
  font-size: 110%;
  width: 190px;
  border-radius: 50%;
  vertical-align: top;
  margin: 0 30px;
}
.top_recruit ul li a{
  display: block;
}

.top_recruit ul li:first-child{
  padding: 30px 0px;
}
.top_recruit ul li:first-child img{
  margin: 0 0 10px;
}
.top_recruit ul li:last-child{
  padding: 53px 0px;
}
.top_recruit ul li:last-child img{
  margin: 0 0 10px;
}

.f_contact ul{
  overflow: hidden;
  height: 170px;
}
.f_contact ul li{
  width: 50%;
  float: left;
  text-align: center;
}
.f_contact ul li:first-child a{
  display: block;
  background-color:#72bd85;
  color: #fff;
  font-family: 'nsfjpbo';
  font-size: 120%;
  padding: 30px 0;
}
.f_contact ul li:first-child a span{
  display: block;
  font-family: 'VolkB';
  font-size: 220%;
}
.f_contact ul li:first-child a i{
  font-size: 80%;
  margin: 0 5px 0 0;
}

.f_contact ul li p{
  color: #fff;
  margin: 0 0 5px;
  font-size: 120%;
}
.f_contact ul li:last-child a{
  display: block;
  background-color:#6297ce;
  color: #fff;
  font-family: 'nsfjpbo';
  font-size: 120%;
  padding: 36px 0 35px;
}
.f_contact ul li:last-child a i{
  font-size: 150%;
}


/************************* footer *************************/

footer{
  background-image: url(../images/common/footer_bk.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  font-family: 'nsfjpbo';
}
footer .inner{
  width: 1200px;
  margin: 0 auto;
  padding: 65px 0 250px;
  overflow: hidden;
}
footer .inner .f_left{
  width: 470px;
  float: left;
}
footer .inner .f_right{
  width: 700px;
  float: right;
  overflow: hidden;
}
footer .inner .f_left .info{
  overflow: hidden;
  margin: 0 0 30px;
}
footer .inner .f_left .info img{
  width: 180px;
  float: left;
  margin: 0 30px 30px 0;
}
footer .inner .f_left .info p{
  float: left;
  margin: 0 0 5px;
}
footer .inner .f_left .f_txt p{
  font-size: 85%;
  color: #8f8f8f;
}
footer .inner .f_right ul{
  float: left;
  margin: 0 20px 0 0;
}
footer .inner .f_right ul li a{
  padding: 10px 0;
  color: #8f8f8f;
}
footer .inner .f_right ul li ul li{
  font-size: 90%;
}
footer .inner .f_right ul li ul li a:before{
  content: '－';
  margin: 0 5px 0 0;
}
footer #copy{
  font-size: 75%;
  color: #fff;
  text-align: right;
  margin: 0 50px 0 0;
  padding:0 0 20px;
}

/************************* page_common *************************/

.page_title{
  background-image: url(../images/common/title.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.page_title h2{
  font-family: 'nsfjpbo';
  color: #fff;
  text-align: center;
  font-size: 350%;
  padding: 196px 0;
}

#wrapper{
  width: 1200px;
  margin: 0 auto;
}

/************************* faq *************************/

.faq{
  padding: 100px 0;
}
.faq ul {
  text-align: center;
  margin: 0 0 50px;
}
.faq ul li{
  display: inline-block;
  width: 45%;
  margin: 0 22px;
}


.faq ul li a{
  display: block;
  border:1px solid #d0d0d0;
  padding: 20px;
  font-size: 120%;
  color: #3f3e3e;
  overflow: hidden;
}
.faq ul li a i{
  float: right;
  color:#d0d0d0;
  margin: 5px 10px 0 0;
}
.faq section .midashi{
  text-align: center;
  margin: 0 0 50px;
}
.faq section .midashi h3{
  font-size: 250%;
  margin: 0 0 20px;
  font-family: 'nsfjpbo';
}
.faq section table{
  width: 100%;
  margin: 0 0 100px;
}
.faq section table tr th{
  background-color: #6297ce;
  color: #fff;
  padding: 15px;
  font-weight: normal;
  width: 20%;
  border-bottom: 1px solid #fff;
}
.faq section table tr td{
  background-color: #eff6fc;
  padding: 15px;
  border-bottom: 1px solid #fff;
}
.faq section table .table_midashi th{
  background-color: #dcdcdc;
  text-align: center;
  color: #3f3e3e;
  border-right:1px solid #fff;
}
.faq section table .table_midashi td{
  background-color: #dcdcdc;
  text-align: center;
}
.faq .faq_box .q_txt{
  font-weight: bold;
  overflow: hidden;
  border-bottom: 1px solid #6297ce;
  margin: 0 0 20px;
}
.faq .faq_box .q_txt span{
  float: left;
  color: #6297ce;
  font-family: 'VolkB';
  font-size: 150%;
  margin: 0 20px 0 0;
}
.faq .faq_box .q_txt p{
  font-size: 120%;
  color: #6297ce;
}
.faq .faq_box .a_txt{
  margin: 0 0 50px;
}
.faq .faq_box .a_txt span{
  font-family: 'VolkB';
  font-size: 150%;
}

    /************************* company *************************/

    .company{
        padding: 100px 0 0;
    }
    .company .midashi{
        text-align: center;
        font-size: 220%;
        margin: 0 0 50px;
        font-family: 'nsfjpbo';
    }
    .company .midashi::before{
        content: "—";
        color: #276aaf;
    }
    .company table{
        width: 810px;
        margin: 0 auto 80px;
        font-family: 'nsfjpbo';
    }
    .company table tr th{
        padding: 20px;
        border-bottom: 1px solid #276aaf;
    }

    .company table tr td{
        padding: 20px;
        border-bottom: 1px solid #276aaf;
    }
    .company .g_map{
        height: 500px;
    }
    /************************* privacy policy *************************/

    .privacy {
        padding: 100px 0;
        width: 1000px !important;
    }
    .privacy h3{
        font-size: 250%;
        margin: 0 0 20px;
        font-family: 'nsfjpbo';
        text-align: center;
    }
    .privacy .midashi{
        margin: 0 0 50px;
    }
    .privacy h4{
        font-size: 120%;
        color: #6297ce;
        padding: 0 0 10px;
        border-bottom: 1px solid #6297ce;
        margin: 0 0 20px;
    }
    .privacy article{
        margin: 0 0 30px;
    }
    /************************* お見積り・お問合せ *************************/

    .contact_txt {
      margin: 0 0 50px;
    }
    .contact_txt .midashi{
      text-align: center;
      font-size: 220%;
      margin: 0 0 50px;
      font-family: 'nsfjpbo';
    }
    .contact_txt .midashi::before{
      content: "—";
      color: #276aaf;
    }
    .contact_txt p a{
      display: inline;
    }


    .contact{
        width: 1000px !important;
        padding: 100px 0;
    }
    .contact table{
        width: 100%;
    }
    .contact table tr{
    }
    .contact table th{
        width: 28%;
        padding: 20px 15px;
        text-align: left;
        font-size: 18px;
        border-bottom: 3px solid #276aaf;
        text-align: center;
    }
    .contact table th span{
        color: #eb5405;
        font-size: 13px;
        padding: 0 15px;
        margin: 0;
    }
    .contact table td{
        padding: 20px 15px;
        border-bottom: 3px solid #ccc;
    }
    .contact .button{
        text-align: center;
    }
    .contact .button input{
        border: medium none;
        cursor: pointer;
        margin:40px auto 0;
        color:#fff;
        background: none;
        background-color: #276aaf;
        width:300px;
        line-height:20px;
        font-size:20px;
        font-weight: bold;
        padding: 20px 0;

        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .contact .koko1{
        font-size: 14px;
        text-align: center;
    }
    .contact .th_title{
        border-bottom: none;
        text-align: center;
        font-size: 25px;
        padding: 60px 0 10px;
    }
    .contact .th_title2{
        font-size: 22px;
        border-bottom: 5px solid #276aaf;
    }
    .contact .th_title3{
        font-size: 22px;
        border-bottom: 5px solid #276aaf;
        padding: 40px 0 20px;
    }

    .contact .txt h3{
        font-size: 30px;
        margin: 0 0 20px;
    }


    /************************* blog *************************/

    .blog_a{
        margin: 100px auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        font-family: 'nsfjpbo';
    }
    .blog_a .hidari{
        width: 800px;
    }
    .blog_a .news_box{
        border-top: 1px solid #ddd;
        padding: 20px;
    }
    .blog_a .news_box .date{
        color: #6297ce;
    }
    .blog_a .news_box .date span{
        background-color: #eff6fc;
        font-size: 90%;
        border-radius: 20px;
        padding: 3px 20px;
        margin: 0 0 0 10px;
    }

    .blog_a .news_box h3{
        color: #3d3d3d;
    }
    .blog_a .news_box h3{
        color: #3d3d3d;
    }

    .blog_a .blogside{
        width: 240px;
    }
    .blog_a .blogside h2{
        font-size: 33px;
        margin: 0 0 5px;
    }

    .blog_a .blogside .widget_archive{
        margin: 0 0 30px;
    }

    .wp-pagenavi{
        text-align: center;
    }
    .wp-pagenavi .pages{
        margin: 0 15px 0 0;
    }
    .wp-pagenavi a{
        color: #fff;
        background-color: #276aaf;
        display: inline-block;
        padding: 1px 8px;
        font-size: 15px;
        margin: 0 3px;
        height: 26px;
    }
    .wp-pagenavi .current{
        color: #fff;
        background-color: #72bd85;
        display: inline-block;
        padding: 1px 8px;
        font-size: 15px;
        margin: 0 3px;
        height: 26px;
    }


    /**** blogsingle *****/

    .blog_s h3{
        font-size: 25px;
        margin: 0 0 20px;
    }
    .blog_s figure{
        text-align: center;
        margin: 50px 0;
    }
    .blog_s img{
      max-width: 100%;
      height: auto;
    }
    .blog_s .date{
        color: #6297ce;
        margin: 0 0 50px;
    }
    .blog_s .date span{
        background-color: #eff6fc;
        font-size: 90%;
        border-radius: 20px;
        padding: 3px 20px;
        margin: 0 0 0 10px;
    }
    .blog_s .txt{
        font-family: 'nsjpr', sans-serif;
        line-height: 1.8em;
    }
    .blog_s .txt p{
        margin: 0 0 1.8em;
    }

    #b_pager{
        margin: 100px 0 0;
    }
    #b_pager ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /************************* service *************************/

    .service{
      padding: 100px 0;
    }
    .service ul {
      text-align: center;
      margin: 0 0 50px;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      border: 1px solid #d0d0d0;
    }
    .service ul li{
      width: calc(100% / 3);
    }

    .service ul li a{
      display: block;
      border-right: 1px solid #d0d0d0;
      border-bottom: 1px solid #d0d0d0;
      border-collapse: collapse;
      padding: 20px 10px 20px 5px;
      color: #3f3e3e;
      overflow: hidden;
      font-size: 1.1rem;
    }

    .service ul li:nth-child(3n) a{
      border-right: none;
    }

    .service ul li:nth-child(n+4) a{
      border-bottom: none;      
    }
    .service ul li a i{
      color:#d0d0d0;
      margin: 5px 0 0 0;
      float: right;
    }

    .service section .midashi{
      text-align: center;
      font-size: 220%;
      margin: 0 0 50px;
      font-family: 'nsfjpbo';
    }
    .service section .midashi::before{
      content: "—";
      color: #276aaf;
    }
    .service section .midashi p{
    	font-size: 50%;
    }


    .service .service01 ul{
      border: none;
      text-align: center;
      display: flex;
    }
    .service .service01 ul li{
      background-color: #e4f1fe;
      width: calc(100% / 3 - 20px);
      height: 560px;
      padding: 30px;
      margin: 0 10px;
    }
    .service .service01 ul li figure{
      margin: 0 0 20px;
    }
    .service .service01 ul li h4{
      color: #276aaf;
      font-size: 130%;
      margin: 0 0 20px;
      font-family: 'nsfjpbo';
    }
    .service .service01 ul li p{
      text-align: left;
    }
    .service section{
      margin: 0 0 100px;
    }
    .service section .txtl,.service section .txtr{
      overflow: hidden;
      font-size: 120%;
    }
    .service section .txtl figure{
      float: left;
      margin: 0 50px 20px 0;
    }
    .service section .txtr figure{
      float: right;
      margin: 0 0 20px 50px;
    }
    .service section .txtl p,.service section .txtr p{
      line-height: 1.8;
    }
    .service section p a{
      display: inline;
    }
    
    /***実績一覧表示***/
    .result_table table{
        width: 100%;
        font-size:16px;
        border: 1px solid #ccc;

    }
    .result_table th {
        background: #eb5405;
        color: #fff;
        padding: 10px;
        border-bottom: 1px solid #afafaf;
        border-right: 1px solid #afafaf;
    }
    .result_table tbody tr td {
        padding: 10px;
        background: #fff;
        border-bottom: 1px solid #afafaf;
        border-right: 1px solid #afafaf;
    }
    .result_table table tbody tr td:first-of-type {
        border-left: 1px solid #afafaf;
        text-align: left;
        padding: 10px 10px 10px 20px;
    }
    
    


    /************************* flow *************************/

    .flow section .midashi{
      text-align: center;
      font-size: 220%;
      margin: 50px 0 50px;
      font-family: 'nsfjpbo';
    }
    .flow section .midashi::before{
      content: "—";
      color: #276aaf;
    }
    .flow ul {
      text-align: center;
      margin: 0 0px -76px;
    }
    .flow ul li{
      margin: 0 276px 0 0;
      width: 140px;
        border-radius: 50%;
        background-color: #6297ce;
        color: #fff;
        display: inline-block;
        font-size: 160%;
        font-weight: bold;
        padding: 52px 0;
    }
    .flow ul li:last-child{
      background-color: #ec5404;
      margin: 0 0 0 276px;
    }

    .flow_content{
      width: 100%;
      padding: 100px 0 0;
    }
     #flow01{
      background-color: #dcedfd;
    }
    #flow02{
     background-color: #d7eedc;
     margin: -50px 0 0;
     padding: 60px 0 0;
    }

    .flow_box{
      overflow: hidden;
      width: 1200px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      padding: 0 0 100px;
    }
    .flow_box::after{
      content: "";
       display: block;
       width: 1px;
       height: 53px;
       background-color: #6297ce;
       position: absolute;
       top: 80px;
       left: 600px;
       margin: 15px 0;
    }
    #flow02 .flow_box::after{
      background-color: #4da663;
    }
    #flow02 .flow_box:last-child::after{
      display: none;
    }
    #flow02 .hosoku{
      margin: 0 auto 40px;
        width: 1100px;
        text-align: right;
        font-size: 150%;
        font-weight: bold;
        color: #4da663;
    }

    .flow_box h4{
      color: #6297ce;
      font-size: 120%;
      width: 200px;
      margin: 0 auto;
    }
    #flow02 .flow_box h4{
      color: #4da663;
    }


    .flow_box h4 span{
      display: block;
      font-size: 140%;
    }

    .flow_box .flow_l{
      float: left;
      width: 500px;
      vertical-align: top;
      font-size: 150%;
      font-weight: bold;
    }
    .flow_box small{
      font-size: 70%;
      font-weight: normal;
      text-align: left;
      margin: 10px 0 0 80px;
    }

    .flow_box .flow_r{
      float: right;
      width: 500px;
      vertical-align: top;
      font-size: 150%;
      font-weight: bold;
    }

    /************************* 2023.04.26ZEB *************************/

    .zeb {
      width: 1200px;
      margin: 0 auto 100px;
    }
    #zeb_01 {
      padding: 100px 0 0;
    }

    .zeb .midashi{
      text-align: center;
      font-size: 220%;
      margin: 0 0 50px;
      font-family: 'nsfjpbo';
    }
    .zeb .midashi::before{
      content: "—";
      color: #276aaf;
    }

    .zeb .txtl,.zeb .txtr {
      overflow: hidden;
      font-size: 120%;
    }
    .zeb .txtl figure {
      float: left;
      margin: 0 50px 20px 0;
    }
    .zeb .txtr figure {
      float: right;
      margin: 0 0 20px 50px;
    }
    .zeb table {
      width: 100%;
      margin: 0 0 50px;

    }



/* メディアクエリー閉じタグ */
}



/*** アニメーション関連***/

/*右からフェードイン*/
.an4-fadeleft {
    position:absolute;
    top:35%;
    left:4%;
    animation-name: fadeleft;
    animation-duration: 5s;
	   animation-delay:3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
@keyframes fadeleft {
0%  {
    opacity: 0;
     transform: translateX(150px);
}
100% {
    opacity: 1;
    transform: translateX(0);
}
}

/*右からフェードイン*/
.an4-fadeleft_02 {
  opacity: 0;/* ここを追加 */
  position:absolute;
	top:48%;
	left:25%;
  animation-name: fadeleft_02;
  animation-duration: 5s;
	animation-delay:7.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

    /*右からフェードイン*/
.an5-fadeleft{
    position:absolute;
    top:17%;
    left:10%;
    font-size: 180%;
    color: #fff;
}
.animation .an5-fadeleft{
    opacity: 0;/* ここを追加 */
        animation-name: fadeleft_02;
        animation-duration: 5s;
        animation-delay:1s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-fill-mode: forwards;
    }

.an6-fadeleft{
    opacity: 1;/* ここを追加 */
    position:absolute;
    top:33%;
    left:10%;
}
.animation .an6-fadeleft{
    opacity: 0;/* ここを追加 */
    position:absolute;
    top:32%;
    left:10%;
    animation-name: fadeleft_02;
    animation-duration: 5s;
    animation-delay:3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

.an7-fadeleft{
    opacity: 1;/* ここを追加 */
    position:absolute;
    top:55%;
    left:10%;
}
.animation .an7-fadeleft{
    opacity: 0;/* ここを追加 */
    position:absolute;
    top:52%;
    left:10%;
    animation-name: fadeleft_02;
    animation-duration: 5s;
    animation-delay:6s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}
    @keyframes fadeleft_02{
        0% {
            opacity: 0;
            transform: translateX(150px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
}

@media (orientation: portrait)and (max-width: 1280px){
    .section {
      height: 960px;
    }
  .full div{
      height: 960px;
    }
    .area02 .full02 div.img03 {
      height: 960px;
    }
    .area03 .full02 div.img03{
      height: 960px;
    }
    .bg_white{
      height: 960px;
      top: -960px;
    }
    .service ul li a{
      padding: 20px 10px 20px 5px;
      font-size: 80%;
    }


}