
/*190306*/
/*--------------------------------------------------------------------------
PC
---------------------------------------------------------------------------*/
body {
	/*font: 13px/1.231 arial, helvetica, clean, sans-serif;*/ background-color: #fff;
	-webkit-print-color-adjust: exact;
}

@media print{
	#gokujyun_container #gnav.scroll .gnav-wrapper {
		position: static;
		top: inherit;
		left: inherit;
	}
}
img { display: inline; }

/* common
-----------------------------------------------------------------*/
.toolBox01 { background-color: #0091da; }

.function01 {
    margin-top: 6px;
    padding-bottom: 6px;
}

.boxList01 {
    margin-top: 20px;
}
.txt-inline-block,
.text-inline-block{
	display: inline-block;
}



#gokujyun_container {
	
	padding-bottom: 105px;
	overflow: hidden;
	min-width: 940px;
	color: #252525;
}

#gokujyun_container .sp {
	display: none;
}

#gokujyun_container h1 {
	text-align: center;
}
#gokujyun_container p{
	margin-bottom:1em;
}
#gokujyun_container p:last-child{
	margin-bottom:0;
}

#gokujyun_container .list-type01 li {
	background: url(/-/Media/com/hadalabo/promo/gokujyun/170824/bg_listtype01.png) no-repeat 0 0;
	margin-bottom: 1em;
	padding-left: 30px;
	line-height: 140%;
	font-family: "Sawarabi Mincho";
	font-size: 17px;
	font-weight: bold;
	text-align: left;
}
#gokujyun_container .list-type01 li:last-child {
	margin-bottom: 0;
}

.hover {
	opacity: 1;
}
.hover:hover {
	opacity: 0.7;
}

/* .ttl
-----------------------------------------------------------------*/
#gokujyun_container .chuui{
	color: #777777;
	font-size:0.857em;
}

/* .btn
-----------------------------------------------------------------*/
#gokujyun_container .btn-01 a:hover,
#gokujyun_container .btn-02 a:hover{
	opacity: 0.7;
}
#gokujyun_container .btn-01 a{
	background:url(/-/Media/com/hadalabo/promo/gokujyun/200825/ico_btn_01.png) no-repeat left 45px center #eee;
	background-size: 7px;
	color: #333;
	font-size:1.429em;
	text-align: center;
	padding-top: 13px;
	padding-bottom: 15px;
	display: block;
	width: 318px;
	margin: 0 auto;
}
#gokujyun_container .btn-02 a{
	background:url(/-/Media/com/hadalabo/promo/gokujyun/200825/ico_btn_01.png) no-repeat left 45px center #ccc;
	background-size: 7px;
	color: #333;
	font-size:1.429em;
	text-align: center;
	padding-top: 13px;
	padding-bottom: 15px;
	display: block;
	width: 318px;
}

.btn-03 a .open,
.btn-03 a .close {
	display:none;
}
.btn-03 a .open.active,
.btn-03 a .close.active {
	display:block;
}
.btn-03 a .open{
    padding: 0.7em 3em 0.7em 2em;
    text-align: center;
    border: 1px solid #ccc;

    /* display: block; */
    font-size: 1.429em;
    width: 100%;
    box-sizing: border-box;
    color:#000;
    background: url(/-/Media/com/hadalabo/promo/gokujyun/200825/icon_open01.png) no-repeat left 1em center #ccc;
    background-size: 0.75em;
    letter-spacing: -0.03em;
    width: 436px;
    margin: auto;
}
.btn-03 a .close{
	padding: 0.7em 3em 0.7em 2em;
	text-align: center;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;

	/* display: inline-block; */
	font-size: 1.429em;
	width: 100%;
	box-sizing: border-box;
	color:#000;
	background:  url(/-/Media/com/hadalabo/promo/gokujyun/200825/icon_minus01.png) left 1em center no-repeat #ccc;
	background-size: 0.75em;
	letter-spacing: -0.03em;
}

/* #contents-header
-----------------------------------------------------------------*/
#contents-header {
	background-color: #f8fdff;
	background: url(/-/Media/com/hadalabo/promo/gokujyun/200825/vi_bg_gokujyun2020_pc.jpg) no-repeat top center;
}

.contents-header-clm{
	position: relative;
	z-index: 2;
	padding-bottom: 520px;
	max-width: 1600px;
	margin: 0 auto;
}
#contents-header .cnt-txt-01{
	position:absolute;
	bottom: -131px;
	right: 11.1vw;
}


/* #bnrArea
-----------------------------------------------------------------*/
#gokujyun_container .bnrArea {
	width: 940px;
	margin: 50px auto 0;
	text-align: center;
}

/* #inner
-----------------------------------------------------------------*/

#gokujyun_container .inner{
	max-width: 1120px;
	width: 100%;
	margin: 0 auto;
}
/*#gokujyun_container .inner-01{
	max-width: 1120px;
	width: 100%;
	margin: 0 auto;
}*/
/*TVCM(PC)*/
.hadalabo_wrap .tvcm-section {
    padding-top: 90px;
	padding-bottom: 110px;
}

.hadalabo_wrap .tvcm-section .cnt-img-01 {
    width: 752px;
    margin: auto;
}
.hadalabo_wrap .tvcm-section .cnt-img-01 a:hover {
    opacity: 0.7;
}
.hadalabo_wrap .tvcm-section .cmn-ttl-01 {
    text-align: center;
    margin-bottom: 113px;
	margin-bottom: 0;
}
#gokujyun_container .tvcm-section .txt-tvcm {
    text-align: center;
	margin-bottom: 45px;
	font-size: 1.25em;
    line-height: 1em;
    color: #555;
}

.hadalabo_wrap .tvcm-section{
background-color: #E4EFF7;
}


/* #concept
-----------------------------------------------------------------*/
#gokujyun_container #concept{
	background-color: #f8fdff;
}
#gokujyun_container #concept .inner {
	padding: 178px 0 130px 0;
}

#gokujyun_container #concept .concept-inner {
	font-size: 1.429em;
	color: #333;
	padding-left: 520px;
	position: relative;
	min-height: 703px;
}
#gokujyun_container #concept .concept-inner .catch-01{
	font-size: 2.3em;
	color: #000;
	margin-bottom: 35px;
}
#gokujyun_container #concept .concept-img-01{
	position:absolute;
	top: -131px;
	left: 10px;
}
#gokujyun_container #concept .chuui{
	text-align:right;
}
.hadalabo_wrap .feature-section .cnt-ttl-01{
	font-weight:normal;
    line-height: 1.18em;
}
.hadalabo_wrap .feature-section .cnt-ttl-01 .cnt-sub-02 {
    margin-top: 0.3em;
}
#gokujyun_container .thought-section-02 .cnt-txt-01 {
    margin-bottom: 3.5em;
}

/* .section-01
-----------------------------------------------------------------*/
#gokujyun_container .section-01{
	background: url(/-/Media/com/hadalabo/promo/gokujyun/200825/bg_gokujyun2020_pc_04.png) no-repeat top center #eff8fd;
	padding-top: 83px;
	padding-bottom: 55px;
}
#gokujyun_container .section-01 .cmn-ttl-01{
	text-align: center;
	line-height: 1.25em;
	margin-bottom: 40px;
}
#gokujyun_container .section-01 .cmn-ttl-01 .sub-01{
	font-size: 1.533em;
}
#gokujyun_container .section-01 .cmn-ttl-01 .sub-02{
	font-size: 0.667em;
}
#gokujyun_container .section-01 .cnt-list-01{
	display: flex;
	justify-content: center;
	margin-bottom: 60px;
}
#gokujyun_container .section-01 .cnt-list-01 li{
	width: 224px;
	min-height: 224px;
	display: flex;
	align-items: center;
	margin-left: 9px;
	margin-right: 9px;
	background: url(/-/Media/com/hadalabo/promo/gokujyun/200825/dco_gokujyun2020_sp_01.png) no-repeat center center;
	background-size: 100%;
	font-size: 1.143em;
	text-align: center;
}
#gokujyun_container .section-01 .cnt-list-01 li .superscript{
	font-size:30%;
}
#gokujyun_container .section-01 .cnt-list-01 li .cnt-ttl-01{
	font-size: 1.688em;
	line-height: 1em;
    margin-bottom: 18px;
    display: inline-block;
    vertical-align: middle;
}
#gokujyun_container .section-01 .cnt-list-01 li:first-child .cnt-ttl-01{
	margin-bottom: 25px;
	margin-top: 18px;
}
#gokujyun_container .section-01 .cnt-list-01 li .cnt-txt-01{
	padding: 0 20px;
	display: inline-block;
}


/* .section-02
-----------------------------------------------------------------*/
#gokujyun_container .section-02{
	padding-top: 120px;
	/*margin-bottom: 100px;*/
	background: url(/-/Media/com/hadalabo/promo/gokujyun/200825/bg_gokujyun2020_pc_07.png) no-repeat top center;
}
#gokujyun_container .section-02.api{
	background: none;
	padding-top: 0;
}
#gokujyun_container .section-02 .cmn-ttl-01{
	text-align: center;
	margin-bottom: 50px;
}
#gokujyun_container .section-02 .cnt-list-01{
	padding-bottom: 195px;
    display: flex;
    justify-content: center;
}
#gokujyun_container .section-02 .cnt-list-01 li{
	background: linear-gradient(0deg,#f5f9fc 0%,#f5f9fc 94%,#fff 95%,#fff 100%);
	display: flex;
	align-items: center;
	/*width: 496px;*/
	width: 44%;
	float: left;
}
#gokujyun_container .section-02 .cnt-list-01 li:last-child{
	/*margin-left: 40px;*/
	/*margin-top: 82px;*/
	margin-left: 3.5%;
	margin-top: 7.3%;
}
#gokujyun_container .section-02 .cnt-list-01 .cnt-img-01{
	width: 41%;
	margin-bottom: 0;
}
#gokujyun_container .section-02 .cnt-list-01 .cnt-txt-01{
	font-size: 1.286em;
	width: 52%;
	margin-right: 7%;
}
.hadalabo_wrap .voice-section .figure {
    width: 300px;
}
.hadalabo_wrap .voice-section .cmn-ttl-01 {
    margin-bottom: 70px;
}
.sec_04_clm03 {
    margin-bottom: 5.286em;
}
.sec_04_clm03 .chuui {
    font-size: 0.857em;
    margin-bottom: 8.5em;
}
.sec_04_list01 {
    width: 50%;
    margin: 0 auto 3em;
}

.sec_04_list01 li {
    display: flex;
    align-items: center;
    width: 100%;
    float: left;
    margin: 0 5%;
    text-align: center;
    font-size: 1em;
    color: #5b2e10;
	line-height: 1.5em;
}
#gokujyun_container .sec_04_clm03 .slide-clm {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
	background: #fff;
	padding-top: 5%;
    box-sizing: border-box;
    display: none;
}
.sec_04_txt06 {
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    float: left;
    margin-right: 5%;
}

.sec_04_list02 {
    width: 81%;
    margin: 0 auto 0.75em;
}

.sec_04_list02 li {
    width: 48%;
    margin: 0 1% 2%;
    float:left;
    display: flex;
    align-items: center;
}
.sec_04_list02 li img {
    margin-right: 3%;
    float:left;
    width:18%;
}
.sec_04_txt06a {
    color: #555;
    font-size: 1.3em;
}
.sec_04_txt06a .big{
    color: #000;
    display: block;
    margin-bottom: 0.5em;
    font-size: 1.3em;
}
.sec_04_txt08 {
    width:80%;
    font-size: 1em;
    color: #555;
    float:right;
}
.sec_04_txt08 .big{
	font-size: 1.4em;
    display:block;
    color:#000;
}
#gokujyun_container .sec_04_clm03 .sec_04_txt13 {
    width: 53%;
    width: 78%;
    margin: 0 auto 2em;
}
#gokujyun_container .sec_04_clm03{
	margin-bottom: 4.286em;
}
.sec_04_clm03 .sec_04_txt13 span {
    display: inline-block;
    margin-right: 1em;
}
.sec_04_clm03 .sec_04_txt13 span:last-child {
    margin-right: 0;
}
.sec_04_txt14 {
    font-size: 2.286em;
    color: #1682c1;
    margin-bottom: 0.75em;
}
.sec_04_txt15 {
    font-size: 1.9em;
    color: #000;
    margin-bottom: 1em;
}
.sec_04_txt16 {
	color: #555;
    font-size: 1.143em;
}
.sec_04_cnt03 {
    width: 78%;
    background: url(/-/Media/com/hadalabo/promo/gokujyun/200825/bg_gokujyun2020_sp_08.png) no-repeat right top;
    padding-top: 10%;
    margin: 0 auto 10%;

}
.sec_04_cnt03 .chuui {
    margin-bottom: 6em;
}


.hadalabo_wrap .product-section .cnt-img-01.prd-a img{
    width: 128px;
}
.hadalabo_wrap .product-section .cnt-img-01.prd-b img{
    width: 128px;
}
.hadalabo_wrap .product-section .cnt-img-01.prd-c img{
    width: 170px;
}
.hadalabo_wrap .product-section .cnt-img-01.prd-d img{
    width: 128px;
}
.hadalabo_wrap .product-section .cnt-img-01.prd-e img{
    width: 210px;
}






/* .btn-brandtop
-----------------------------------------------------------------*/
#gokujyun_container .btn-brandtop {
	margin: 0 auto;
	text-align: center;
	width: 378px;
	font-size: 0;
}

#gokujyun_container .btn-brandtop a {
	display: block;
	border: 1px solid #bfcdd6;
	padding: 13px 0;
}

#gokujyun_container .btn-brandtop a img {
	width: 324px;
}

.hadalabo_wrap .api-section {
    padding-top: 80px;
}

#gokujyun_container .api-section .wrap-ttl-01{
    padding: 0;
}

#gokujyun_container .api-section a{
    color: #252525;
    padding: 8px 0;
    border-radius: 30px;
    display: block;
}
#gokujyun_container .api-section a span{
    font-size: 60%;
    vertical-align: middle;
}
#gokujyun_container .api-section a:visited{
    color: #252525;
}
#gokujyun_container .api-section a:hover{
    opacity: 0.3;
}

/*--------------------------------------------------------------------------
TABLET
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
.hadalabo_wrap .api-section {
    padding-top: 16%;
}
.hadalabo_wrap .api-section .wrap-list-01 li {
    font-size: 3.65vw;
}

#gokujyun_container .api-section .wrap-ttl-01{
    padding: 0;
    font-size: 4.77vw;
}

#gokujyun_container .api-section a{
    padding: 8px 0;
    border-radius: 30px;
    display: block;
}

	#gokujyun_container{
		min-width:100%;
		width: 100%;
	}
	#gokujyun_container .inner,
	#gokujyun_container .inner-01{
		width: 90%;
	}

	#gokujyun_container .pc{
		display:none;
	}
	#gokujyun_container .sp{
		display:inline-block;
	}
	#gokujyun_container .chuui{
		font-size:2.60vw;
	}

/* #btn(tablet)
-----------------------------------------------------------------*/
	#gokujyun_container .btn-01 a,
	#gokujyun_container .btn-02 a{
		width: 71%;
		margin: 0 auto;
		font-size: 4.17vw;
		background-size: 2.25%;
	}
.btn-03 a .open {
    width: 100%;
    font-size: 4.17vw;
}
.btn-03 a .close {
    font-size: 4.17vw;
}

/* #txt
-----------------------------------------------------------------*/

/* #contents-header
-----------------------------------------------------------------*/
	#contents-header{
		margin-bottom: -6.4%;
		background: none;
	}
	.contents-header-clm{
		padding-bottom: 0;
	}
	#contents-header .cnt-txt-01{
		position: relative;
		right: 0;
		bottom: 0;
		width: 100%;
	}
/*TVCM(tablet)*/
.hadalabo_wrap .tvcm-section {
    padding-top: 12%;
    padding-bottom: 15%;
}
.hadalabo_wrap .tvcm-section .cnt-img-01 {
    width: 94%;
}
.hadalabo_wrap .tvcm-section .cmn-ttl-01 {
    margin-bottom: 8%;
}
#gokujyun_container .tvcm-section .txt-tvcm {
    font-size: 3.65vw;
    margin-bottom: 9.7188vw;
}
.hadalabo_wrap .tvcm-section .cmn-ttl-01{
margin-bottom: 0;
}
#gokujyun_container .tvcm-section .txt-tvcm{
margin-bottom: 8%;
}
.hadalabo_wrap .cmn-ttl-01{
    letter-spacing: 0;
}
#gokujyun_container .section-01 .cmn-ttl-01{
    letter-spacing: -4px;
}

/* #concept
-----------------------------------------------------------------*/
	#gokujyun_container #concept{
		background: url(/-/Media/com/hadalabo/promo/gokujyun/200825/bg_gokujyun2020_sp_01.png) #f6fdff no-repeat 0 0;
		background-size: cover;
	}
	#gokujyun_container #concept .inner{
		padding: 19% 0 17% 0;
	}
	#gokujyun_container #concept .concept-inner{
		min-height: auto;
		padding-left: 0;
	}
	#gokujyun_container #concept .concept-txt-01{
		position: relative;
		z-index: 1;
		margin-bottom: -50%;
	}
	#gokujyun_container #concept .concept-txt-01 p{
		font-size: 3.65vw;
	}
	#gokujyun_container #concept .concept-img-01{
		position: static;
		margin: 0 -6% 6.5%;
	}
	#gokujyun_container #concept .concept-inner .catch-01{
		text-align: center;
		margin-bottom: 13%;
		font-size: 8.07vw;
	}
	#gokujyun_container #concept .chuui{
		font-size: 3.13vw;
		text-align: left;
	}
.hadalabo_wrap .thought-section-02 {
    padding-top: 19%;
}
.hadalabo_wrap .thought-section-02 .cmn-ttl-01 {
    margin-bottom: 11%;
    line-height: 1.5em;
	letter-spacing:-1px;
}
	.hadalabo_wrap .thought-section-01 {
    padding-top: 16%;
    padding-bottom: 5%;
}
	
/* .section-01(tablet)
-----------------------------------------------------------------*/
	#gokujyun_container .section-01{
		background: url(/-/Media/com/hadalabo/promo/gokujyun/200825/bg_gokujyun2020_sp_04.jpg) no-repeat top center #eef8fc;
		background-size: 100%;
		padding-top: 12%;
		padding-bottom: 0.5%;
	}
	#gokujyun_container .section-01 .cmn-ttl-01{
		margin-bottom: 12%;
	}
	#gokujyun_container .section-01 .cnt-list-01{
		flex-wrap: wrap;
		margin-bottom: 8%;
	}
	#gokujyun_container .section-01 .cnt-list-01 li{
		width:40%;
		min-height: 36.4vw;
		margin-left: 1.5%;
		margin-right: 1.5%;
	}
	#gokujyun_container .section-01 .cnt-list-01 li:last-child{
		margin-top: -3%;
	}
	#gokujyun_container .section-01 .cnt-list-01 li .cnt-ttl-01{
		font-size: 4.43vw;
		margin-bottom: 6%;
	}
	#gokujyun_container .section-01 .cnt-list-01 li:first-child .cnt-ttl-01{
		margin-top: 7%;
		margin-bottom: 9%;
	}
	#gokujyun_container .section-01 .cnt-list-01 li .cnt-txt-01{
		font-size: 2.60vw;
	}

/* .section-02(tablet)
-----------------------------------------------------------------*/
	#gokujyun_container .section-02{
		background: url(/-/Media/com/hadalabo/promo/gokujyun/200825/bg_gokujyun2020_sp_07.jpg) no-repeat center bottom -32%;
		background-size: 100%;
		padding-top: 17%;
/*		margin-bottom: 22%;*/
		margin-bottom: 0;
	}
	#gokujyun_container .section-02.api{
		background: none;
	}
	#gokujyun_container .section-02 .cnt-list-01{
		padding-bottom: 47%;
	}
	#gokujyun_container .section-02 .cnt-list-01 li{
		display: block;
		width: 46%;
		background: none;
	}
	#gokujyun_container .section-02 .cnt-list-01 .cnt-img-01{
		width: 100%;
		margin-bottom: 5.3%;
	}
	#gokujyun_container .section-02 .cnt-list-01 li:last-child{
		margin-left: 8%;
		margin-top: 31%;
	}
	#gokujyun_container .section-02 .cnt-list-01 .cnt-txt-01{
		width: 100%;
		margin-right: 0;
		font-size: 3.65vw;
	}
	#gokujyun_container .section-02 .cmn-ttl-01{
		margin-bottom:18%;
	}
/*働き*/
.sec_04_cnt03 .slide-clm {
    padding-top: 4.8vw;
}
#gokujyun_container .sec_04_clm03 .slide-clm {
    padding-top: 11.06vw;
}

.sec_04_list01 {
    width: 74.21vw;
    margin-bottom: 8.3vw;
}

.sec_04_list01 li {
    width: 94%;
    text-align: left;
}
.sec_04_list02 {
	width: 75.52vw;
	margin-bottom: 1.95vw;
}

.sec_04_list02 li {
    width: 100%;
    margin-bottom: 5.73vw;
}
.sec_04_list02 li img {
    margin-right: 4%;
    width: 15%;
}
.sec_04_cnt03 {
    width: 100%;
    background: url(/-/Media/com/hadalabo/promo/g-premium/200822/bg_sec04_03_pc.png) no-repeat center top;
    background-size: cover;
    padding-top: 23.96vw;
    margin-bottom: 13vw;
}
.sec_04_cnt03_inner {
    width: 88.36%;
    margin: 0 auto;
}
.sec_04_txt06 {
    width: 14.97vw;
}
.sec_04_txt06a {
    font-size: 3.39vw;
}
.sec_04_txt06a .big {
	font-size: 4.43vw;
	margin-bottom: 0.25em;
}
.sec_04_txt08 {
    font-size: 2.6vw;
    line-height: 1.75em;
}

.sec_04_cnt03 .sec_04_txt13 {
    width: 94%;
    margin-bottom: 2.99vw;
}
.sec_04_txt14 {
    font-size: 5.47vw;
    margin-bottom: 1.95vw;
}
.sec_04_txt15 {
    font-size: 4.69vw;
    margin-bottom: 4.3vw;
}
.sec_04_txt16 {
    font-size: 3.39vw;
    line-height: 1.75em;
}

#gokujyun_container .thought-section-02 .cnt-txt-01 {
    margin-bottom: 3vw;
}
	

/*開発者の声(tablet)*/
.hadalabo_wrap .voice-section {
    padding-top: 16%;
}
.hadalabo_wrap .voice-section .cmn-ttl-01{
    margin-bottom: 7%;
}
	
/*商品ライナップ(tablet)*/
.hadalabo_wrap .product-section .cmn-ttl-01 {
    margin-bottom: 7vw;
}	
.hadalabo_wrap .product-section .cnt-img-01.prd-a img {
    width: 23%;
}
.hadalabo_wrap .product-section .cnt-img-01.prd-b img {
    width: 23%;
}
.hadalabo_wrap .product-section .cnt-img-01.prd-c img {
    width: 32%;
}
.hadalabo_wrap .product-section .cnt-img-01.prd-d img {
    width: 23%;
}
.hadalabo_wrap .product-section .cnt-img-01.prd-e img {
    width: 38%;
}



/* .btn-brandtop
	-----------------------------------------------------------------*/
	#gokujyun_container .btn-brandtop {
		margin: 0 auto;
		text-align: center;
		width: 72%;
	}

	#gokujyun_container .btn-brandtop a {
		display: block;
		border: 1px solid #bfcdd6;
		padding: 13px;
	}

	#gokujyun_container .btn-brandtop a img {
		width: 100%;
	}

	#gokujyun_container.hadalabo_wrap .thought-section-01 .inner{
		width: 100%;
	}









}



/*--------------------------------------------------------------------------
SP
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

}