@charset "utf-8";

body{font-family: 'Noto Sans JP', sans-serif;}
a{transition: 0.8s ease; color: #333;}
p{font-size: 14px; line-height: 1.8; color: #535557;}
img{vertical-align: bottom;}
p,a,figcaption{letter-spacing: 1px;}
small{font-size: 70%;}
figure{position: relative;}
figcaption{position: absolute; bottom: 0; right: 0; font-size: 10px; color: #fff; background: rgba(0,0,0,0.5); padding: 3px 5px;}

.pc_only{}
.sp_only{display: none;}

@media screen and (max-width:640px){
    .pc_only{display: none;}
    .sp_only{display: block;}
}

/*====================
header
====================*/
#header{position: fixed; width: 100%; z-index: 999; background: #fff;}
#header .header_inner{/*max-width: 1220px; margin: 0 auto; */height: 98px; padding: 0 50px;
    display: flex; flex-wrap: wrap; justify-content: space-between;align-items: center;}
#header .companyLogo{width: 200px;}
#header .companyLogo a{display: block;}
#header .companyLogo .logo_03 {width: 100%;}

#header .h_contents_right {display: flex;flex-wrap: wrap;align-items: center;}

#header .houjinservice{display: inline-block; vertical-align: middle; border: 1px solid #0a2c86; 
    margin-left: 25px; font-size: 13px; font-weight: bold; padding: 7px 14px; color: #0a2c86;}

#header .h_contact{}
#header .h_contact a{display: block; background: #B087BC; color: #fff; padding: 16px 28px; font-size: 14px; position: relative;}
#header .h_contact a span{position: relative; z-index: 2;}
#header .h_contact a::before{content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: rgba(255, 255, 255, 0.3); transition: all .25s ease-out;}
#header .h_contact a:hover::before{width: 100%;}
#header .h_logo02 {margin-left: 20px;}
#header .h_logo02 a {pointer-events: none;}
#header .h_logo02 img {max-width: 230px;width: 100%;}


#header .h_nav{background: #282828;}
.toggle_contents nav{max-width: 1220px; margin: 0 auto; background: #282828;}
.toggle_contents nav ul{display: flex; justify-content: center; flex-wrap: wrap;}
.toggle_contents nav ul li{}
.toggle_contents nav ul li a{display: block; color: #fff; font-size: 14px; letter-spacing: 1px; padding: 23px 30px; position: relative; text-align: center;}
.toggle_contents nav ul li a:hover{background: #494949;}
.toggle_contents nav ul li a::before{content: ""; display: block; width: 1px; height: 15px; background: #494949;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.toggle_contents nav ul li:nth-child(1) a::before{display: none;}
.toggle_contents nav ul li.nav_contact{display: none;}
.toggle_contents nav ul li.nav_logo02{display: none;}

.toggle_switch{display: none;}


.toggle_contents nav ul li a:after{content: ""; display: block; width: 100%; height: 2px; background: #B087BC;
    position: absolute; left: 0; bottom: 0; opacity: 0;}

.toggle_contents nav ul > li{position: relative;}
.toggle_contents nav ul > li > .navList_subNav{transform: scaleY(0); transform-origin: top; transition:0.2s ease; position: absolute; z-index: 99999; width: 100%; top:60px;}
.toggle_contents nav ul > li:hover > .navList_subNav{transform: scaleY(1);}
.toggle_contents nav ul .navList_subNav > li{border-left: none; border-right: none; border-top: 1px solid #494949; width: 100%; background: #282828;}
.toggle_contents nav ul .navList_subNav > li > a{padding: 23px 0;}
.toggle_contents nav ul .navList_subNav > li > a:after{display: none;}
.toggle_contents nav ul .navList_subNav li a{display: block; border-top: 1px solid #494949;}
.toggle_contents nav ul .navList_subNav li a::before{content: none;}
.toggle_contents nav ul .navList_subNav li:last-child{border-bottom: none;}




body#top .toggle_contents nav ul li.top a:after,
body#about .toggle_contents nav ul li.about a:after,
body#service .toggle_contents nav ul li.service a:after,
body#advantage .toggle_contents nav ul li.advantage a:after,
body#casestudy .toggle_contents nav ul li.casestudy a:after,
body#office .toggle_contents nav ul li.office a:after,
body#report .toggle_contents nav ul li.report a:after{opacity: 1;}


@media screen and (max-width:1220px){
    .toggle_contents nav ul li{}
    .toggle_contents nav ul li a{padding: 23px 20px;}
}
@media screen and (max-width:1080px){
    .toggle_contents nav ul li{}
    .toggle_contents nav ul li a{padding: 23px 13px;}
}

@media screen and (max-width:960px){
    #header .header_inner{height: 100%; padding: 0;}
    #header .h_contact{display: none;}
		#header .h_logo02 {display: none;}
    #header .companyLogo{width: 110px; padding-left: 12px;}
		

    #header .h_nav{background: none;}
    .toggle_contents nav{background: #535557; height: 100dvh;overflow-y: scroll;}
		.toggle_contents nav ul:not(.navList_subNav) {padding-bottom: 140px;}
    .toggle_contents nav ul li{width: 100%; border-bottom:1px solid #878889;}
    .toggle_contents nav ul li.advantage{bottom: none;}
    .toggle_contents nav ul li.advantage > a{border-bottom:1px solid #878889;}
    .toggle_contents nav ul li a{padding: 20px 30px; text-align: left;}
    .toggle_contents nav ul li.nav_contact{display: block;}
    .toggle_contents nav ul li.nav_contact a{background: #671e75;}
		.toggle_contents nav ul li.nav_logo02 {display: block;}
		.toggle_contents nav ul li.nav_logo02 a{background: #fff;text-align: center;}
		.toggle_contents nav ul li.nav_logo02 img {max-width: 180px;width: 100%;}
    .toggle_contents nav ul li a::before{display: none;}
    .toggle_contents nav ul > li > .navList_subNav{position: relative; transform:scaleY(1); top:auto;}
    .toggle_contents nav ul .navList_subNav > li{border-top: none;}
    .toggle_contents nav ul .navList_subNav li a{padding: 20px 30px 20px 50px; background: #535557;}

    .toggle_contents{display: none; position: absolute; width: 100%;/* height: 70vh; overflow-y: scroll;*/ left: 0px; right: 0px; top: 50px;}
    .toggle_switch{display: block; width: 50px; height: 50px; background: #fff; position: absolute; right: 0; top: 0; border-left: 1px solid #d7dadc;}
    .toggle_switch span{transition:0.5s; display: block; width: 18px; height: 2px; background: #535557; position: absolute; left: 17px; margin: auto;}
    .toggle_switch span:nth-child(1){top: -17px; bottom: 0;}
    .toggle_switch span:nth-child(2){top: 0; bottom: 0;}
    .toggle_switch span:nth-child(3){top: 17px; bottom: 0;}
    .toggle_switch.open span:nth-child(1){transform:translateY(7px) translateX(0)  rotate(45deg);}
    .toggle_switch.open span:nth-child(2){opacity: 0;}
    .toggle_switch.open span:nth-child(3){transform:translateY(-10px) translateX(0)  rotate(-45deg);}
	
	/*.toggle_contents nav ul > li:hover >.navList_subNav{display: none;}*/
}
@media screen and (max-width: 960px){
	#header {height: 50px;}
}
@media screen and (max-width:640px){
    #header h1{max-width: 48vw;}
    #header .houjinservice{
        margin-left: 3px;
        font-size: 10px;
        padding: 4px 3px;
        letter-spacing: 0;
    }
}
@media screen and (max-width:320px){
    .toggle_contents nav ul li a{padding-top: 15px; padding-bottom: 15px;}
}

/*====================
footer
====================*/
footer{text-align: center;}
footer .f_nav{background: #545559;}
footer .f_nav ul{display: flex; flex-wrap: wrap; justify-content: center;}
footer .f_nav ul li{}
footer .f_nav ul li a{display: block; color: #fff; font-size: 11px; letter-spacing: 1px; position: relative; padding: 16px 20px;}
footer .f_nav ul li a:hover{background: #b8b9bd;}
footer .f_nav ul li a::before{content: ""; display: block; width: 1px; height: 10px; background: #b8b9bd;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
footer .f_nav ul li:nth-child(1) a::before{display: none;}

footer .f_content{padding: 30px 15px 40px;}
footer .f_nav_other{margin-bottom: 25px;}
footer .f_nav_other ul{display: flex; flex-wrap: wrap; justify-content: center;}
footer .f_nav_other ul li{}
footer .f_nav_other ul li a{display: block; font-size: 11px; position: relative; padding: 0 20px;}
footer .f_nav_other ul li a:hover{opacity: 0.7;}
footer .f_nav_other ul li a::before{content: ""; display: block; width: 1px; height: 10px; background: #b8b9bd;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
footer .f_nav_other ul li:nth-child(1) a::before{display: none;}

footer .f_logo{margin-bottom: 25px;}

footer .copy{font-size: 10px; letter-spacing: 1px;}


@media screen and (max-width:960px){
    footer .f_nav ul li a{padding: 16px 10px;}
}

@media screen and (max-width:640px){
    footer .f_nav ul:after{content: ""; display: block; width: 50%;}
    footer .f_nav ul li{width: 50%;}
    footer .f_nav ul li{border-bottom: 1px solid #b8b9bd;}
    footer .f_nav ul li:nth-child(odd){border-right: 1px solid #b8b9bd;}
    footer .f_nav ul li a::before{display: none;}

    footer .f_content {padding: 20px 15px 20px;}
    footer .f_nav_other ul li{margin-bottom: 8px;}
    footer .f_nav_other ul li a{font-size: 10px; padding: 0 6px;}

    footer .f_logo{max-width: 250px; margin: 0 auto 10px;}
}


/*====================
main
====================*/
main{padding-top: 157px; display:block; overflow: hidden;}

.inner{max-width: 1280px; margin: 0 auto; padding: 0 25px;}

/* タイトル ----------------*/
.h-titleArea{}
.h-titleArea .h-title_en{height: 150px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
    background: url(../../img/elements/head-title.jpg) no-repeat center center; background-size: cover;}
.h-titleArea .h-title_en h2{font-family: 'Lato'; font-size: 68px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: 2px; margin-bottom: -9px;}
.h-titleArea .h-title_jp{text-align: center; padding: 22px 0 105px;
    background: #fffeff;
    background: -moz-linear-gradient(top,  #fffeff 0%, #eff0f2 100%);
    background: -webkit-linear-gradient(top,  #fffeff 0%,#eff0f2 100%);
    background: linear-gradient(to bottom,  #fffeff 0%,#eff0f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffeff', endColorstr='#eff0f2',GradientType=0 );
		border-top: 6px solid #e87722;
}
.h-titleArea .h-title_jp h2{font-size: 18px; color: #671e75; letter-spacing: 3px; line-height: 1;}

.title_ber,
.h-titleArea .h-title_en h2{
    position: relative;
	display: inline-block;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.title_ber:before,
.h-titleArea .h-title_en h2:before{
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #fff;
}
.title_ber:before,
.h-titleArea .h-title_jp h2:before{background: #671e75;}

.title_ber span,
.h-titleArea .h-title_en h2 span{
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.p-titleSecondary.show .title_ber:before,
.h-titleArea .h-title_en.ber h2:before{
	-webkit-animation: passing-bar 1s ease 0.5s 1 normal forwards;
	animation: passing-bar 1s ease 0.5s 1 normal forwards;
}
.p-titleSecondary.show .title_ber span,
.h-titleArea .h-title_en.ber h2 span{
	-webkit-animation: passing-txt 0s ease 1s 1 normal forwards;
	animation:passing-txt 0s ease 1s 1 normal forwards;
}

@keyframes passing-bar{
	0%{left: 0; width: 0;}
	50%{left: 0; width: 100%;}
	51%{left: 0; width: 100%;}
	100%{left: 100%; width: 0;}
}
@keyframes passing-txt{
	0%{opacity:0;}
	50%{opacity:0;}
	100%{opacity:1;}
}

.p-titleSecondary{text-align: center;}
.p-titleSecondary h3{font-size: 28px; letter-spacing: 7px; line-height: 1.8; color: #671e75; text-align: center;}

.annotation{background: #e6eaf3; padding: 60px 0;}
.annotation .inner{max-width: 1100px;}
.annotation p{font-size: 10px;}

.btn_link{max-width: 500px; width: 100%; margin: 50px auto 0;}
.btn_link a{display: block; border: 1px solid #834B93; color: #834B93; text-align: center;
	font-size: 18px; font-weight: bold; letter-spacing: 4px; padding: 20px 5px; position: relative; transition: all .3s ease-out;}
.btn_link a::before{content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: #834B93; transition: all .3s ease-out;}
.btn_link a span{position: relative; z-index: 2;}
.btn_link a:hover{color: #fff;}
.btn_link a:hover:before{width: 100%;}

@media screen and (max-width:960px){
    main{padding-top: 50px;}
    .h-titleArea .h-title_en h2{text-align: center;}
}

@media screen and (max-width:640px){
    /* タイトル ----------------*/
    .h-titleArea .h-title_en{height: 70px;}
    .h-titleArea .h-title_en h2{font-size: 32px; margin-bottom: -4px; text-align: center;}
    .h-titleArea .h-title_jp{font-size: 16px; padding: 12px 0 40px;}

    .p-titleSecondary h3{font-size: 20px; letter-spacing: 3px;}

    .annotation{padding: 25px 0;}

    .btn_link a{font-size: 16px; letter-spacing: 3px;}
}

/* 動作 */
.scrollIn_Y{opacity: 0; transform: translateY(20px); transition: 0.5s ease-in;}
.scrollIn_Y.show{opacity: 1; transform: translateY(0);}
.scrollIn_X{opacity: 0; transform: translateX(-20px); transition: 0.5s ease-in;}
.scrollIn_X.show{opacity: 1; transform: translateX(0);}