@charset "UTF-8";
 header {
     position: fixed;
     margin-top: 0;
     background: #1b385c;
     width: 100%;
     color: #ffffff;
     height: 60px;
     z-index: 100;
    /* Toggle Button */
}
 header .logo-box {
     width: 153px;
}
 header .m-head {
     background: #1b385c;
     position: relative;
     z-index: 150;
     height: 60px;
     padding: 10px;
     box-sizing: border-box;
}
 header .m-head .logo{
     background: url("../images/hanabi-logo.svg") no-repeat left center;
     background-size: contain;
     height: 40px;
     padding-top: 40px;
     overflow: hidden;
     box-sizing: border-box;
     width: 223px;
}
 header nav {
     position: absolute;
     top: -500px;
     background: rgba(0, 0, 0, 0.9);
     width: 100%;
     text-align: center;
     padding: 10px 0;
     -webkit-transition: .5s ease-in-out;
     -moz-transition: .5s ease-in-out;
     transition: .5s ease-in-out;
}
 header nav li a {
     display: block;
     width: 100%;
     color: #ffffff;
     text-decoration: none;
     font-size: 16px;
     padding: 10px;
}
 header #nav-toggle {
     position: absolute;
     right: 12px;
     top: 17px;
     width: 34px;
     height: 36px;
     cursor: pointer;
     z-index: 300;
}
 header #nav-toggle div {
     position: relative;
}
 header #nav-toggle span {
     display: block;
     position: absolute;
     height: 4px;
     width: 100%;
     background: #ffffff;
     left: 0;
     -webkit-transition: .35s ease-in-out;
     -moz-transition: .35s ease-in-out;
     transition: .35s ease-in-out;
}
 header #nav-toggle span:nth-child(1) {
     top: 0;
}
 header #nav-toggle span:nth-child(2) {
     top: 11px;
}
 header #nav-toggle span:nth-child(3) {
     top: 22px;
}
 .open #nav-toggle span:nth-child(1) {
     top: 11px;
     -webkit-transform: rotate(315deg);
     -moz-transform: rotate(315deg);
     transform: rotate(315deg);
}
 .open #nav-toggle span:nth-child(2) {
     width: 0;
     left: 50%;
}
 .open #nav-toggle span:nth-child(3) {
     top: 11px;
     -webkit-transform: rotate(-315deg);
     -moz-transform: rotate(-315deg);
     transform: rotate(-315deg);
}
 .open .global-nav {
     -moz-transform: translateY(556px);
     -webkit-transform: translateY(556px);
     transform: translateY(556px);
}
 .content {
     padding-top: 60px;
}
 .main__visual-block {
     padding: 34px 0 40px;
     background: url("../images/sp_bg_main_01.png") no-repeat center center;
     background-size: cover;
}
 .main__visual-block-box {
     box-sizing: border-box;
}
 .main__visual-block-box h1 {
     width: 91%;
     margin: 0 auto 34px;
}
 .main__visual-block-box__text {
     width: 91%;
     margin: 0 auto;
}
 .inquiry-block {
     margin: 0 auto;
     padding: 20px 0;
     background: #000000;
     line-height: 1;
}
 .inquiry-block p {
     width: 79%;
     margin: 0 auto;
}
 .inquiry-block-btn {
     width: 77% !important;
     margin: 7px auto 0 !important;
}
 .feature-block {
     background: url("../images/sp_bg_content_01.png") no-repeat center center;
     background-size: cover;
     padding: 20px 0;
}
 .feature-block h2 {
     width: 51%;
     margin: 0 auto 20px;
     padding-bottom: 12px;
     background: url("../images/bg_head_01.png") repeat-x bottom center;
     background-size: auto 7px;
     text-align: center;
     line-height: 1;
     font-weight: bold;
     font-size: 17px;
}
 .feature-block-box {
     width: 77%;
     margin: 0 auto;
     background: #FFFFFF;
     box-sizing: border-box;
     padding: 14px 10px 10px;
     margin-bottom: 20px;
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
     border-radius: 5px;
}
 .feature-block-box:last-child {
     margin-bottom: 0;
}
 .feature-block-box h3 {
     color: #487c2a;
     font-size: 14px;
     text-align: center;
     border-bottom: 2px solid #487c2a;
     padding-bottom: 12px;
     margin-bottom: 12px;
     line-height: 1;
}
 .feature-block-box h3 span {
     font-size: 10px;
}
 .feature-block-box p {
     color: #333333;
     font-size: 10px;
     font-weight: bold;
     line-height: 1.4;
}
 .feature-block-btn {
     width: 77%;
     margin: 0 auto;
     clear: both;
     border-radius: 7px;
}
 .feature-block-btn p {
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
}
 .performance-block {
     background: url("../images/sp_bg_content_02.png") no-repeat center center;
     background-size: cover;
     padding: 20px 0;
}
 .performance-block h2 {
     width: 51%;
     margin: 0 auto 20px;
     padding-bottom: 12px;
     background: url("../images/bg_head_02.png") repeat-x bottom center;
     background-size: auto 7px;
     text-align: center;
     line-height: 1;
     font-weight: bold;
     font-size: 17px;
}
 .performance-block-box {
     width: 77%;
     margin: 0 auto;
     background: #FFFFFF;
     box-sizing: border-box;
     margin-bottom: 20px;
}
 .performance-block-box:last-child {
     margin-bottom: 0;
}
 .performance-block-box-text {
     padding: 0 4%;
}
 .performance-block-box-text-head {
     border-bottom: 2px solid #052a57;
}
 .performance-block-box-text h3 {
     padding: 12px 0 10px;
     color: #052a57;
     font-size: 14px;
     text-align: center;
     line-height: 1;
}
 .performance-block-box-text h3 span {
     display: block;
     font-size: 12px;
     padding-top: 2px;
     color: #333333;
}
 .performance-block-box-text h3 span.date {
     font-size: 10px;
     padding-top: 5px;
     font-weight: normal;
}
 .performance-block-box-text p {
     font-weight: bold;
     padding: 12px 0;
     line-height: 1.4;
     font-size: 10px;
}
 .duties-block {
     background: url("../images/sp_bg_content_03.png") no-repeat center center;
     background-size: cover;
     box-sizing: border-box;
     padding: 20px 0;
}
 .duties-block h2 {
     width: 51%;
     margin: 0 auto 20px;
     padding-bottom: 12px;
     background: url("../images/bg_head_03.png") repeat-x bottom center;
     background-size: auto 7px;
     text-align: center;
     line-height: 1;
     font-weight: bold;
     font-size: 17px;
}
 .duties-block-box {
     width: 77%;
     margin: 0 auto;
     background: rgba(255, 255, 255, 0.8);
     box-sizing: border-box;
     padding: 11px;
}
 .duties-block-box p {
     font-size: 10px;
     font-weight: bold;
     margin-bottom: 1em;
}
 .duties-block-box p:last-child {
     margin-bottom: 0;
}
 .sns-block {
     padding: 20px 23%;
}
 .sns-block ul {
     display: flex;
     justify-content: space-between;
}
 .sns-block ul li {
     width: 52px;
}
 footer {
     position: relative;
     background: #1b385c;
     color: #FFFFFF;
     line-height: 1;
     padding: 10px 0;
}
 footer .pagetop-btn {
     position: fixed;
     width: 12%;
     bottom: 49px;
     right: 20px;
}
 footer .footerLogo a {
	 text-align: center;
     background: url("../images/hanabi-logo.svg") no-repeat center center;
     background-size: contain;
     height: 40px;
     padding-top: 40px;
     overflow: hidden;
     width: 223px;
     display: block;
     margin: 0 auto;
     box-sizing: border-box;
}
 footer .copyright {
	 text-align: center;
	 margin-top: 1em;
}



 @media (max-width: 767px) {
     .only-pc {
         display: none;
    }
     .only-sp {
         display: block;
    }
     img {
         width: 100%;
    }
     .br-pc {
         display: none;
    }
}
 @media (min-width: 768px) {
     .only-pc {
         display: block;
    }
     .only-sp {
         display: none;
    }
     .br-sp {
         display: none;
    }
     a img:hover {
         opacity: 0.7;
    }
     .content {
         padding-top: 70px;
         box-sizing: border-box;
    }
     header {
         position: fixed;
         margin-top: 0;
         background: #1b385c;
         height: 70px;
         color: #ffffff;
         z-index: 100;
    }
     header .logo-box {
         width: 142px;
    }
     header .wrap-head {
         width: 960px;
         margin: 0 auto;
    }
     header .m-head {
         background: #1b385c;
         position: static;
         float: left;
         height: 70px;
         padding: 15px;
         box-sizing: border-box;
    }
     header .m-head img {
         width: 100%;
    }
     header nav {
         position: static;
         background: none;
         width: 600px;
         float: right;
         text-align: center;
         padding: 25px 0;
    }
     header nav li {
         float: left;
    }
     header nav li a {
         display: inline-block;
         position: relative;
         color: #ffffff;
         text-decoration: none;
         font-size: 13px;
         padding: 0 19px;
         line-height: 1;
    }
     header nav li a:after {
         position: absolute;
         display: block;
         content: "";
         top: 0;
         right: 18px;
         height: 30px;
         margin-top: -8px;
         border-right: 1px solid #ffffff;
    }
     header nav li:last-child a:after {
         display: none;
    }
     header #nav-toggle {
         display: none;
    }
     .main__visual-block {
         padding: 34px 0 40px;
         background: url("../images/bg_main_01.png") no-repeat center center;
         background-size: cover;
    }
     .main__visual-block-box {
         width: 960px;
         margin: 0 auto;
         box-sizing: border-box;
    }
     .main__visual-block-box h1 {
         width: auto;
         margin: 0 0 33px -9px;
    }
     .main__visual-block-box__text {
         width: auto;
         margin: 0 auto;
    }
     .inquiry-block {
         margin: 0 auto;
         padding: 20px 0;
         background: #000000;
         line-height: 1;
    }
     .inquiry-block p {
         width: 753px;
         margin: 0 auto;
    }
     .inquiry-block-btn {
         width: 584px !important;
         margin: 14px auto 0 !important;
    }
     .inquiry-block-btn a img:hover {
         filter: brightness(130%);
         opacity: 1;
    }
     .feature-block {
         background: url("../images/bg_content_01.png") no-repeat center center;
         background-size: cover;
         padding: 40px 0;
         overflow: hidden;
    }
     .feature-block-wrap {
         width: 960px;
         margin: 0 auto;
    }
     .feature-block h2 {
         width: 382px;
         margin: 0 auto 40px;
         padding-bottom: 27px;
         background: url("../images/bg_head_01.png") repeat-x bottom center;
         background-size: auto auto;
         font-size: 32px;
    }
     .feature-block-box {
         width: 450px;
         margin: 0;
         float: left;
         padding: 14px 10px 27px;
         margin-bottom: 30px;
    }
     .feature-block-box:last-child {
         margin-bottom: 0;
    }
     .feature-block-box:nth-last-of-type(2) {
         margin-bottom: 0;
    }
     .feature-block-box:nth-child(2n) {
         float: right;
    }
     .feature-block-box h3 {
         font-size: 23px;
         padding-bottom: 12px;
         margin-bottom: 12px;
         line-height: 1;
    }
     .feature-block-box h3 span {
         font-size: 16px;
    }
     .feature-block-box p {
         font-size: 14px;
         line-height: 1.8;
    }
     .feature-block-btn {
         width: 582px;
         margin: 0 auto;
         padding: 10px 0;
    }
     .feature-block-btn img:hover {
         filter: brightness(150%);
         opacity: 1;
    }
     .performance-block {
         background: url("../images/bg_content_02.png") no-repeat center center;
         background-size: cover;
         padding: 40px 0;
    }
     .performance-block-wrap {
         overflow: hidden;
         width: 960px;
         margin: 0 auto;
    }
     .performance-block h2 {
         width: 382px;
         margin: 0 auto 40px;
         padding-bottom: 27px;
         background: url("../images/bg_head_02.png") repeat-x bottom center;
         background-size: auto auto;
         font-size: 32px;
    }
     .performance-block-box {
         width: 450px;
         margin: 0;
         float: left;
         margin-bottom: 40px;
    }
     .performance-block-box:last-child {
         margin-bottom: 0;
    }
     .performance-block-box:nth-last-of-type(2) {
         margin-bottom: 0;
    }
     .performance-block-box:nth-child(2n) {
         float: right;
    }
     .performance-block-box-text {
         padding: 12px 4%;
    }
     .performance-block-box-text-head {
         display: flex;
         justify-content: center;
         align-items: center;
         border-bottom: 2px solid #052a57;
    }
     .performance-block-box-text h3 {
         padding: 0 0 10px;
         font-size: 23px;
    }
     .performance-block-box-text h3 span {
         font-size: 20px;
         padding-top: 2px;
    }
     .performance-block-box-text h3 span.date {
         font-size: 10px;
         padding-top: 5px;
    }
     .performance-block-box-text p {
         font-weight: bold;
         padding: 12px 0;
         line-height: 1.8;
         font-size: 14px;
    }
     .duties-block {
         background: url("../images/sp_bg_content_03.png") no-repeat center center;
         background-size: cover;
         box-sizing: border-box;
         padding: 40px 0;
    }
     .duties-block h2 {
         width: 382px;
         margin: 0 auto 40px;
         padding-bottom: 27px;
         background: url("../images/bg_head_03.png") repeat-x bottom center;
         background-size: auto auto;
         font-size: 32px;
    }
     .duties-block-box {
         width: 960px;
         padding: 20px 30px;
    }
     .duties-block-box p {
         font-size: 14px;
    }
     .sns-block {
         width: 230px;
         margin: 0 auto;
         padding: 40px 0;
    }
     .sns-block ul {
         display: flex;
         justify-content: space-between;
    }
     .sns-block ul li {
         width: 60px;
    }
     .sns-block ul li img {
         width: 100%;
    }
     footer {
         line-height: 1;
         padding: 17px 0;
    }
     footer .pagetop-btn {
         width: 76px;
         bottom: 62px;
         right: 40px;
    }
     footer .pagetop-btn img {
         width: 100%;
    }
/*
     footer small {
         width: 170px;
         text-align: center;
    }
     footer small img {
         width: 100%;
    }
*/


}
 @media screen and (min-width: 768px) and (max-width: 960px) {
     body, .content {
         width: 960px;
    }
     .feature-block-wrap {
         box-sizing: border-box;
         padding-left: 20px;
         padding-right: 20px;
    }
     .performance-block-wrap {
         box-sizing: border-box;
         padding-left: 20px;
         padding-right: 20px;
    }
     .main__visual-block-box {
         width: 90%;
         margin: 0 auto;
         box-sizing: border-box;
    }
     .main__visual-block-box h1 {
         width: auto;
         margin: 0 0 33px -9px;
    }
     .main__visual-block-box h1 img {
         width: 100%;
    }
     .main__visual-block-box__text {
         width: auto;
         margin: 0 auto;
    }
     .main__visual-block-box__text img {
         width: 100%;
    }
     footer {
         width: 960px;
    }
}

/* 2018.10追加 */
 .specialist-block {
     background: url("../images/sp_bg_content_04.png") no-repeat center center;
     background-size: cover;
     padding: 20px 0;
}
 .specialist-block h2 {
     width: 51%;
     margin: 0 auto 20px;
     padding-bottom: 12px;
     background: url("../images/bg_head_04.png") repeat-x bottom center;
     background-size: auto 7px;
     text-align: center;
     line-height: 1;
     font-weight: bold;
     font-size: 17px;
}
 .specialist-block-wrap {
	 
}
 .specialist-block-box {
     width: 77%;
     margin: 0 auto;
     background: #FFFFFF;
     box-sizing: border-box;
     padding: 15px;
     margin-bottom: 20px;
}
 .specialist-block-box .profile {
	 display: flex;
	 justify-content: flex-start;
	 margin-bottom: 10px;
}
 .specialist-block-box .profile .photo {
	 width: 45%;
}
 .specialist-block-box .profile .photo img {
	 vertical-align: bottom;
}
 .specialist-block-box .profile .name {
	 margin-left: 15px;
}
 .specialist-block-box .profile .name h3 {
	 border-left: 4px solid #333;
	 padding-left: 8px;
	 font-size: 16px;
	 margin-bottom: 20px;
}
 .specialist-block-box .profile .name h3 span {
	 display: block;
	 font-size: 10px;
}
 .specialist-block-box .profile .name p {
	 font-size: 12px;
	 font-weight: bold;
}
 .specialist-block-box .intro {
	 font-size: 10px;
	 margin-bottom: 24px;
	 text-align: justify;
}
 .specialist-block-box .link {
	 margin-bottom: 10px;
}
 .specialist-block-box .link a {
	 width: 80%;
	 display: block;
	 margin: 0 auto;
	 line-height: 40px;
 	 background: #E6E6E6;
	 font-size: 12px;
	 font-weight: bold;
	 text-align: center;
	 color: #333;
	 text-decoration: none;
}
 @media (min-width: 768px) {
     .specialist-block {
         background: url("../images/bg_content_04.png") no-repeat center center;
         background-size: cover;
         padding: 40px 0;
    }
     .specialist-block-wrap {
         overflow: hidden;
         width: 960px;
         margin: 0 auto;
         display: flex;
         justify-content: space-between;
    }
     .specialist-block h2 {
         width: 382px;
         margin: 0 auto 40px;
         padding-bottom: 27px;
         background: url("../images/bg_head_04.png") repeat-x bottom center;
         background-size: auto auto;
         font-size: 32px;
    }
     .specialist-block-box {
         width: 310px;
    }
	.specialist-block-box .profile {
		 margin-bottom: 20px;
	}
	.specialist-block-box .profile .name h3 {
		 font-size: 20px;
		 margin-bottom: 20px;
	}
	.specialist-block-box .profile .name h3 span {
		 font-size: 12px;
	}
	.specialist-block-box .profile .name p {
		 font-size: 14px;
	}
	.specialist-block-box .profile .photo {
	 	 width: 130px;
	}
	.specialist-block-box .profile .photo img {
	 	 width: 100%;
	 	 height: auto;
	}
	.specialist-block-box .intro {
		 font-size: 14px;
	}
	.specialist-block-box .link {
		 margin-bottom: 24px;
	}
	.specialist-block-box .link a {
		 width: 200px;
		 line-height: 50px;
		 font-size: 14px;

	}
}