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



@media(max-width:1360px) {
.item .function{width: 70%;}
.item .function p{font-size: 10px;}
}




@media(max-width:1120px) {

.professional .proHeader .shoulder{font-size: 9px;}

.professional .proHeader h2{width: 44vw;}
.professional .proHeader .text{font-size: 1.12em;/*18px*/}
.professional .proHeader .profile p{font-size: 11px;}
.professional .proHeader .profile .photo{width: 12vw;}

/*-----*/

.item .itemHeader h2{width: 29.1vw;}
.item .itemHeader .text{font-size: 1.12em;/*18px*/}

.item .function{width: 80%;}
.item .function p{line-height: 1.6;}
.slick-dots li button{width:8px;height:8px;}

.item .itemBox{width: 70%;}
.item .itemBox h2{font-size: 1.8em;}
.item .itemBox .copy{font-size: 1em;/*15px*/}
.item .itemBox .spec .buy a{font-size: 12px;}
.item .itemBox .spec .soon{font-size: 12px;}
.item .itemBox .spec h4{font-size: 10px;}
.item .itemBox .text{font-size: 11px;}
.item .itemBox .itemWide .operation p{font-size: 10px;}

/*-----*/

.cocoheli .cocoBox{width: 70%;}
.cocoheli .cocoBox .infoTop .textBox h2{width: 16vw;}
.cocoheli .cocoBox .infoTop .textBox h3{font-size: 1.12em;/*18px*/}
.cocoheli .cocoBox .infoTop .textBox p{font-size: 1em;/*15px*/}
.cocoheli .cocoBox .infoTop .textBox .url a{font-size: 11px;}

.cocoheli .cocoBox .infoBottom h4{font-size: 1.18em;}
.cocoheli .cocoBox .infoBottom h5{font-size: 1em;}

.cocoheli .cocoBox .infoBottom .num{font-size: 11px;}
.cocoheli .cocoBox .infoBottom .attention{font-size: 9px;line-height: 1.3;}
}


@media(max-width:930px) {

.professional .proHeader .text{font-size: 1.17em;/*18px*/}

.professional .proHeader .shoulder{font-size: 8px;}
.professional .proHeader .profile p{font-size: 10px;}

.professional .interview{width: 92%;}
.professional .column{font-size: 1.08em;}

/*----*/

.item .itemHeader .text{font-size: 1.17em;}
.item .function{width: 88%;}
.item .function h3{font-size: 1.15em;}
.item .function p{font-size: 9px;}

.item .itemBox{width: 80%;}
.item .itemBox h2{font-size: 2.0em;}
.item .itemBox .copy{font-size: 1.1em;}

/*-----*/

.cocoheli .cocoBox{width: 80%;}
.cocoheli .cocoBox .infoTop .textBox h2{width: 18vw;}
.cocoheli .cocoBox .infoTop .textBox h3{font-size: 1.2em;}
.cocoheli .cocoBox .infoTop .textBox p{font-size: 1.08em;}
.cocoheli .cocoBox .infoBottom h4{font-size: 1.28em;}
.cocoheli .cocoBox .infoBottom h5{font-size: 1.08em;}
.cocoheli .cocoBox .infoBottom .num{font-size: 10px;}

}



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++*/



@media(max-width:768px) {

body{font-size: 2vw;}

.wide{display: none;}

article br.res{display: block;}
article br.resDel{display: none;}


.bkImage{background-image: url("../images/bkimg_sub_sp.webp");}
.bkImage span{background-image: url("../images/bkimg_main_sp.webp");}


/*-----*/

.header{width: 76.5%;padding-bottom: 20vw;display: block;}
.header .element{width:100%;padding-top: 11.3vw;}
.header .element .titleBox{height: auto;display: block;}

.header .element .titleBox .logo{width: 22.4%;}
.header .element .titleBox h1{width: 100%;margin-top: 11%;}
.header .element .titleBox h2{width: 34%;margin-top: 7.7%;}

.header .element .titleBox h3{width: 65%;margin: 8% 0 0 -6.5%;opacity: 1;}

.header .element .titleBox h3.pc{display: none;}
.header .element .titleBox h3.sp{display: block;}
.header .element .titleBox h3.sp #svgAnime04,
.header .element .titleBox h3.sp #svgAnime05{opacity:0;}
.header .element .titleBox h3.sp #svgAnime04.play,
.header .element .titleBox h3.sp #svgAnime05.play{opacity:1;}

.header .hdImage{display: none;}
.header .hdImageSP{
	display: block;
	position: relative;
	width: 100%;
	margin-top: 13vw;
	opacity: 0;
	-webkit-transition:opacity 1.8s 1.5s;
	transition: opacity 1.8s 1.5s;
}
.header.start .hdImageSP{opacity: 1;}

.header .hdImageSP figure{
	width: 100%;
	padding-top: 124%;
	background: #000;
	overflow: hidden;
	position: relative;
}
.header .hdImageSP figure div{position: absolute;top: 0;left: 0;width: 235%;}


.header .lead{padding-top: 22vw;/*26.5vw*/}
.header .lead h3{font-size: 1.5em;/*1.85em*/}
.header .lead h2{
	width: 54vw;/*64vw*/
	left: -6.0vw;/*-7.2vw*/
	margin-top: 2em;
}
.header .lead h2 .pcView{display: none;}
.header .lead h2 .spView{display: block;}
#svgAnime06{opacity: 0;}
#svgAnime06.view{opacity: 1;}
#svgAnime07{opacity: 0;}
#svgAnime07.view{opacity: 1;}
#svgAnime08{opacity: 0;}
#svgAnime08.view{opacity: 1;}

.header .lead h2 .maskST{stroke-width:90;}
.header .lead .copy{font-size: 1.6em;/*2.1em*/margin-top: 15vw;/*18vw*/}



/*-----------------------------*/


.professional .proHeader .shoulder{font-size: 0.9em;padding: 9vw 0 8.6vw;}
.professional .proHeader .proImage{width: 100%;}

.professional .proHeader h2{width: 58vw;/*76vw*/margin-top: 20vw;}
.professional .proHeader h2::before{left: 12%;right: 12%;height: 7.2vw;}
.professional .proHeader h2 picture{position: relative;}
.professional .proHeader h2 picture::after{
	content: '';
	position: absolute;
	z-index: 10;
	top: 7.3vw;
	left: 30%;
	right: 30%;
	height: 7.6vw;
	background:#177CA7;
	-webkit-transition: left 0.5s cubic-bezier(0.45, 0, 0.55, 1) 0.5s;
	transition: left 0.5s cubic-bezier(0.45, 0, 0.55, 1)  0.5s;
}
.professional .proHeader h2::after{
	height: 7.2vw;
	-webkit-transition: left 1.0s cubic-bezier(0.45, 0, 0.55, 1) 1.0s;
	transition: left 1.0s cubic-bezier(0.45, 0, 0.55, 1)  1.0s;
}
.professional .proHeader h2.view::before{left:88%;}
.professional .proHeader h2.view picture::after{left:70%;}
.professional .proHeader h2.view::after{left:100%;}

.professional .proHeader .text{font-size: 1.3em;}

.professional .proHeader .profile{margin:0;}
.professional .proHeader .profile .photo{margin-top: 13vw;width:24vw;/*30vw*/}
.professional .proHeader .profile p{font-size: 1em;}

/*-----*/

.professional .interview{width: 80%;}
.professional .interview.top{margin-top: 15vw;}
.professional .space{height: 18vw;}

.professional .interview.rest .triggerTarget{margin-top: -6vw;}

.professional .column{width: 92.5%;display: block;}
.professional .column figure{width: 87%;margin: 0 auto;}


.professional .column.c02 figure img:nth-child(2){margin-top: 1.6vw;}
.professional .column.c02 .textBox{padding-top: 0;}

.professional .column.c03{margin-top: 14vw;}
.professional .column.c03 .textBox{padding-top: 0;}
.professional .column.c03 figure div{display: flex;justify-content: space-between;margin-bottom: 1.6vw}
.professional .column.c03 figure div img{width: 48.8%;}

.professional .column.c04{margin-top: 14vw;}
.professional .column.c04 figure img:nth-child(2){margin-top: 1.6vw;}
.professional .column.c04 .textBox{padding-top:0;}

.professional .column.c05{margin-top: 10.6vw;}

.professional .column.c06{margin-top: 14vw;}
.professional .column.c06 figure{margin-top: 0;}

.professional .column .textBox{width: 93.5%;}
.professional .column.rev .textBox{margin-left: 0;}

.professional .column .textBox h3 i.res{display:inline-block;}
.professional .column .textBox h3 i.resDel{display: none;}


.professional .column .textBox .question{font-size: 1.3em;margin-top: 3.3em;}
.professional .column .textBox .answer{font-size: 1.3em;}

.professional .interview .moreTrigger{
	width: calc(100% - 5vw);
	padding: 1em 0;
	font-size: 1.1em;
	margin: 10vw 0 0 5vw;
}


/*-----------------------------*/


.item{padding-bottom: 20vw;}

.item .itemHeader{margin-top: 18vw;}
.item .itemHeader h2{width: 54vw;}
.item .itemHeader h2::before{height: 7.3vw;}
.item .itemHeader h2::after{height: 7.3vw;}
.item .itemHeader .text{font-size: 1.3em;}

/*-----*/

.item .function{width: 80%;margin-top: 12vw;}
.item .function h3{font-size: 1.3em;}
.item .function .iconSlide{margin-top: 4vw;}
.item .function .iconSlide .list{margin: 0 1.2vw;}
.item .function p{font-size: 0.85em;}

.slick-prev,
.slick-next {width: 5.4vw;height: 5.4vw;margin-top: -2.7vw;}
.slick-prev{left:-7.2vw;}
.slick-next{right:-7.2vw;}

/*-----*/

.item .itemBox{width: 63%;margin-top: 12vw;}


.item .itemBox .itemBoxHeader{border-top: 1px solid #FFF;padding-top: 14vw;}
.item .itemBox.i01 .itemBoxHeader{border:none;padding-top: 10vw;}

.item .itemBox h2{font-size: 2.2em;padding-bottom: 1.1em;line-height: 1.5;}
.item .itemBox h2::before{top: 100%;width: 2.5em;margin: 0 auto;}
.item .itemBox .copy{font-size: 1.2em;margin-top: 2.5em;}


.item .itemBox .itemList{display: block;margin-top: 0;}
.item .itemBox .itemList .listIn{width: 100%;margin-top: 10vw;}





.item .itemBox .itemList figure{border-radius: 2.8vw;}
.item .itemBox .spec h3{font-size: 0.9em;line-height: 1.4;}
.item .itemBox .spec h3 em{font-size: 2.5em;line-height: 1.1;padding-bottom: 0.2em;}
.item .itemBox .spec .buy a{font-size: 1.16em;margin-top: 0.2em;}
.item .itemBox .spec .soon{font-size: 1.16em;margin-top: 0.2em;}
.item .itemBox .spec h4{font-size: 0.9em;}
.item .itemBox .icon{width: 64%;}
.item .itemBox .text{font-size: 1.0em;}


.item .itemBox .itemWide figure{margin-top: 10vw;}
.item .itemBox .itemWide figure a{display: block;}
.item .itemBox .itemWide figure .main{
	width: 100%;
	border-top-left-radius: 2.8vw;
	border-top-right-radius: 2.8vw;
	border-bottom-left-radius:0;
}
.item .itemBox .itemWide figure .sub{
	width: 100%;
	border-left:  1px solid #FFF;
	border-top: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 2.8vw;
	border-bottom-left-radius: 2.8vw;
}

.item .itemBox .itemWide .detail{display: block;}
.item .itemBox .itemWide .detail .name{width: 100%;}
.item .itemBox .itemWide .detail .text{width: 100%;}
.item .itemBox .itemWide .detail .icon{;width: 64%;}


.item .itemBox .itemWide .operation{margin-top: 4vw;}
.item .itemBox .itemWide .operation ul{flex-wrap: wrap;}

.item .itemBox .itemWide .operation ul li{width: 48%;}
.item .itemBox .itemWide .operation ul li:last-child{width: 100%;margin-top: 5%;}
.item .itemBox .itemWide .operation p{font-size: 0.85em;}


/*-----*/

.cocoheli{padding: 20vw 0;}
.cocoheli .cocoBox{width: 76%;border: none;padding: 0;opacity: 1;}

.cocoheli .cocoBox .infoTop{
	display: block;
	opacity: 0;
	-webkit-transition:opacity 1.4s;
	transition: opacity 1.4s;
}
.cocoheli .cocoBox .infoTop.view{opacity: 1;}
.cocoheli .cocoBox .infoBottom{
	opacity: 0;
	-webkit-transition:opacity 1.4s;
	transition: opacity 1.4s;
}
.cocoheli .cocoBox .infoBottom.view{opacity: 1;}

.cocoheli .cocoBox .infoTop .textBox{width: 100%;}
.cocoheli .cocoBox .infoTop .imgBox{display: none;}

.cocoheli .cocoBox .infoTop .textBox h2{width: 36vw;position: relative;}


.cocoheli .cocoBox .infoTop .textBox h2::before{
	content: '';
	position: absolute;
	z-index: 10;
	top: -2px;
	left: -2px;
	right: -2px;
	height: 10vw;
	background:#177CA7;
	-webkit-transition: left 0.7s;
	transition: left 0.7s;
}
.cocoheli .cocoBox .infoTop .textBox h2::after{
	content: '';
	position: absolute;
	z-index: 10;
	bottom: -2px;
	left:-2px;
	right: 52%;
	height: 6.5vw;
	background:#177CA7;
	-webkit-transition: left 0.6s cubic-bezier(0.45, 0, 0.55, 1) 0.5s;
	transition: left 0.6s cubic-bezier(0.45, 0, 0.55, 1)  0.5s;
}

.cocoheli .cocoBox .infoTop .textBox h2.view::before{left:100%;}
.cocoheli .cocoBox .infoTop .textBox h2.view::after{left:50%;}


.cocoheli .cocoBox .infoTop .textBox h3{font-size: 1.35em;margin-top: 3em;}
.cocoheli .cocoBox .infoTop .textBox p{font-size: 1.1em;margin-top: 2.5em;}
.cocoheli .cocoBox .infoTop .textBox p span{
	display: inline-block;
	width: 35%;
	float: left;
	padding: 0.3em 1.3em 0 0;
}


.cocoheli .cocoBox .infoBottom h4{font-size: 1.35em;}
.cocoheli .cocoBox .infoBottom h5{font-size: 1.1em;}



.cocoheli .cocoBox .infoTop .textBox .url{display: none;}

.cocoheli .cocoBox .infoTop .textBox .logoSP{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	width: 17vw;
}
.cocoheli .cocoBox .infoTop .textBox .logoSP a{
	border-radius: 2.4vw;
	overflow: hidden;
	display: block;
	background: #052741;
}
.cocoheli .cocoBox .infoBottom{margin-top: 6vw;padding-top: 6vw;}
.cocoheli .cocoBox .infoBottom h4{font-size: 1.35em;}
.cocoheli .cocoBox .infoBottom h4 br{display: none;}

.cocoheli .cocoBox .infoBottom .num{margin-top: 3em;display: block;font-size: 0.98em;}
.cocoheli .cocoBox .infoBottom .num .set01,
.cocoheli .cocoBox .infoBottom .num .set02{width: 100%;}
.cocoheli .cocoBox .infoBottom .num p{margin-bottom: 0.3em;}
.cocoheli .cocoBox .infoBottom .attention{font-size: 0.86em;line-height: 1.5;margin-top: 2em;}

.cocoheli .cocoBox .infoBottom .urlSP{display: block;margin-top: 10vw;}
.cocoheli .cocoBox .infoBottom .urlSP a{
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-size: 1.4em;
	color: #FFF;
	border: 1px solid #FFF;
	border-radius: 2em;
	padding: 0.8em 0;
	display: block;
	width: 100%;
	text-align: center;
}


/*----------------------*/

.footer{padding: 21vw 0;}
.footer h3{width: 24vw;/*28*/}
.footer .copyright{bottom: 4vw;font-size: 1.0em;}


}




@media(max-width:620px) {

.header .lead{padding-top: 26.5vw;}
.header .lead h3{font-size: 1.85em;}
.header .lead h2{width: 64vw;left: -7.2vw;}
.header .lead .copy{font-size: 2.12em;margin-top: 18vw;}
.header .lead .copy br.res{display: block;}
.header .lead .copy br.resDel{display: none;}

/*-----------------------------*/

.professional .proHeader .shoulder{font-size: 1.16em;}

.professional .proHeader h2{width: 76vw;}
.professional .proHeader h2::before{height: 9.5vw;}
.professional .proHeader h2 picture::after{top: 9.4vw;height: 9.4vw;}
.professional .proHeader h2::after{height: 9.3vw;}
.professional .proHeader .text{font-size: 1.8em;}

.professional .proHeader .profile .photo{width:30vw;}
.professional .proHeader .profile p{font-size:1.4em;}

.professional .interview{width: 95%;}
.professional .space{height: 20vw;}

.professional .column{width: 94%;}
.professional .column figure{width: 85%;}
.professional .column .textBox .question{font-size: 1.9em;}
.professional .column .textBox .answer{font-size: 1.8em;}

.professional .interview .moreTrigger{width: calc(100% - 7.5vw);font-size: 1.5em;margin-left:7vw;}

/*-----------------------------*/

.item .itemHeader{margin-top: 20vw;}
.item .itemHeader h2{width: 69vw;}
.item .itemHeader h2::before{height: 9.4vw;}
.item .itemHeader h2::after{height: 9.4vw;}
.item .itemHeader .text{font-size: 1.8em;}

.item .itemBox .itemBoxHeader{padding-top: 18vw;}

/*-----*/

.item .function{width: 77%;margin-top: 18vw;padding-bottom: 8vw;}
.item .function h3{font-size: 1.8em;}
.item .function .iconSlide{margin-top: 6vw;}
.item .function .iconSlide .list{margin: 0 1.8vw;}
.item .function figure{width: 92%;padding: 4% 0;}
.item .function p{font-size: 1.4em;}
.slick-dots{bottom:-8vw;}

/*-----*/

.item .itemBox{width: 76%;}
.item .itemBox h2{font-size: 2.8em;padding-bottom: 1em;}
.item .itemBox .copy{
	font-size: 1.65em;
	margin-top: 2.3em;
	width: 110%;
	position: relative;
	left: -5%;
}

.item .itemBox .itemList .listIn{margin-top: 13vw;}

.item .itemBox .spec{margin-top: 3em;}
.item .itemBox .spec h3{font-size: 1.3em;}
.item .itemBox .spec h3 em{font-size: 2.4em;}

.item .itemBox .spec .buy a{font-size: 1.5em;padding: 0.36em 1.4em;}
.item .itemBox .spec .soon{font-size: 1.5em;padding: 0.36em 0;}
.item .itemBox.i02 .spec .soon{padding: 0.0em 0;}
.item .itemBox .spec .soon br{display: block;}





.item .itemBox .spec h4{font-size: 1.2em;margin-top: 0.8em;}
.item .itemBox .icon{width: 75%;margin-top: 1.5em;}
.item .itemBox .text{font-size: 1.6em;}

.item .itemBox .itemWide .detail .icon{width: 75%;}
.item .itemBox .itemWide .operation p{font-size: 1.14em;}
.item .itemBox .itemWide .operation ul li:last-child{margin-top: 7%;}

/*-----*/

.cocoheli .cocoBox{width: 77%;}
.cocoheli .cocoBox .infoTop .textBox h2{width: 42vw;}
.cocoheli .cocoBox .infoTop .textBox h2::before{height: 12vw;}
.cocoheli .cocoBox .infoTop .textBox h2::after{height: 8vw;}

.cocoheli .cocoBox .infoTop .textBox h3{font-size: 1.9em;margin-top: 2.2em;}
.cocoheli .cocoBox .infoTop .textBox p{font-size: 1.7em;margin-top: 3.2em;}


.cocoheli .cocoBox .infoTop .textBox .logoSP{width: 18.6vw;}
.cocoheli .cocoBox .infoBottom{margin-top: 8vw;padding-top: 8vw;}
.cocoheli .cocoBox .infoBottom h4{font-size: 2.0em;letter-spacing: 0.05em;}
.cocoheli .cocoBox .infoBottom h5{font-size: 1.7em;line-height: 1.8;}





.cocoheli .cocoBox .infoBottom .num{margin-top: 2.5em;font-size: 1.4em;}
.cocoheli .cocoBox .infoBottom .attention{font-size: 1.2em;}
.cocoheli .cocoBox .infoBottom .urlSP a{font-size: 2.0em;}
.footer h3{width: 28vw;}
.footer .copyright{font-size: 1.2em;}


}