@charset "utf-8";

/*--cover--*/

.cover:after {
  	content: "";
	position: absolute;
	top: 0;
  	bottom: 0;
  	right: 0;
  	left: 0;
	width: 100%;
  	height: 100%;
  	margin: auto;
  	background: url(/system_panel/uploads/images/cover_wagara.png) no-repeat center;
  	background-size: cover;
  	z-index: 1;
}

.cover:before {
  	content: "";
	position: absolute;
	top: 0;
  	bottom: 0;
  	right: 0;
  	left: 0;
	width: 100%;
  	height: 100%;
  	margin: auto;
  	background: url(/system_panel/uploads/images/cover_cloud.png) no-repeat center;
  	background-size: cover;
  	z-index: 2;
}

.coverBgDecoLeft, .coverBgDecoRight {
  	z-index: 3;
}

.coverFrame {
  	z-index: 20;
}

.coverSliderMainMaskBg {
    mask-image: url(/system_panel/uploads/images/top_fv_mask.svg);
    -webkit-mask-image: url(/system_panel/uploads/images/top_fv_mask.svg);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.coverSliderL, .coverSliderR {
	position: relative;
}

.coverSliderL:after, .coverSliderR:after {
  	content: "";
	position: absolute;
  	max-width: 680px;
	width: 100%;
  	height: 100%;
  	background: url(/system_panel/uploads/images/top_fv_img_border.svg) no-repeat center;
  	background-size: contain;
  	z-index: -1;
}

.coverSliderL:after {
    top: -2%;
    right: -3%;
}

.coverSliderR:after {
    top: -2%;
    left: -3%;
}

.coverTxtBlock {
    margin: -16% auto 0 auto !important;
}

.coverTit {
	font-size: 23px;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
}

.coverEnMsg, .coverMsg {
  	font-size: 14px;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
}

.coverLDeco, .coverRDeco {
	z-index: 10;
}

.coverLDeco {
    top: -7% !important;
    left: -4% !important;
}

.coverRDeco {
    right: -3%;
    bottom: 21%;
}

/*--Message--*/

.topMessage {
	margin: -2% 0 0;
}

.topMessageDeco01, .topMessageDeco02 {
  	z-index: 10;
}

.topMessageBgDeco01, .topMessageBgDeco02 {
	opacity: .7;
  	z-index: 0;
}

/*.topMessageWave {
     --mask: radial-gradient(72px at 50% 72px,#000 99%,#0000 101%) calc(50% - 60px) 0/122px 50% repeat-x,
        radial-gradient(51.61px at 50% -42px,#0000 99%,#000 101%) 50% 30px/120px calc(50% - 30px) repeat-x,
        radial-gradient(51.61px at 50% calc(100% - 72px),#000 99%,#0000 101%) calc(0% - 0px) 100%/0px 0% repeat-x,
        radial-gradient(0px at 50% calc(100% + 0px),#0000 99%,#000 101%) 50% calc(100% - 0px)/120px calc(50% - 0px) repeat-x;
     -webkit-mask: var(--mask);
     mask: var(
     --mask);
}*/

/*.topMessageWave {
    -webkit-mask: var(--mask);
    mask: var(--mask);
     --mask: radial-gradient(90px at 50% 90px,#000 99%,#0000 101%) calc(50% - 45px) 0/90px 50% repeat-x,
        radial-gradient(51.61px at 50% -42px,#0000 99%,#000 101%) 50% 30px/120px calc(50% - 30px) repeat-x,
        radial-gradient(51.61px at 50% calc(100% - 72px),#000 99%,#0000 101%) calc(0% - 0px) 100%/0px 0% repeat-x,
        radial-gradient(0px at 50% calc(100% + 0px),#0000 99%,#000 101%) 50% calc(100% - 0px)/120px calc(50% - 0px) repeat-x;
}*/
.topMessageWave {
  --mask:
    radial-gradient(90px at 50% 90px, #000 99%, #0000 101%) calc(50% - 45px) 0/90px 90px,
    radial-gradient(90px at 50% -72px, #0000 99%, #000 101%) 50% 30px/120px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
/*.topMessageContents {
	min-height: 300px;
}*/

.topMessageMask:after {
	content:"";
  	position: absolute;
  	top: 0;
  	bottom: 0;
  	right: 0;
  	left: 0;
  	margin: auto;
  	width: 100%;
  	height: 100%;
  	background: url(/system_panel/uploads/images/top_message_bg.jpg) no-repeat center;
  	background-size: cover;
  	z-index: 1;
  	opacity: .35;
}

.topMessageFrame {
  	z-index: 2;
}

.topMessageBlock p br{
	display: block;

}

.topMessageContents:before {
	content:"";
  	position: absolute;
  	top: -20px;
  	right: 0;
  	left: 0;
  	margin: auto;
  	max-width: 877px;
  	width: 97.44%;
  	height: 34px;
  	background: url(/system_panel/uploads/images/top_message_deco01.svg) no-repeat center;
  	background-size: contain;
  	z-index: 3;
}

.topMessageContents:after {
	content:"";
  	position: absolute;
  	bottom: -20px;
  	right: 0;
  	left: 0;
  	margin: auto;
  	max-width: 877px;
  	width: 97.44%;
  	height: 34px;
  	background: url(/system_panel/uploads/images/top_message_deco02.svg) no-repeat center;
  	background-size: contain;
  	z-index: 3;
}

.topMessageContentsIn .txt01 {
  	line-height: 2.5em;
	text-align: left;
}

.topMessageContentsIn .txt01 br {
	display: none;
}

/*--Service--*/

.topService {
    position: relative;
    z-index: 2;
    mask-image: url(/system_panel/uploads/images/test_mask.png);
    -webkit-mask-image: url(/system_panel/uploads/images/test_mask.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center bottom;
    -webkit-mask-position: center bottom;
}

.topServiseLeft img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	object-position: right;
}

.topServiseRight .jpTit01 {
	font-weight: 700;
}

.topServiceBtnRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
	flex-direction: column;
}

.topAsiamServiceBtn {
	margin: 30px 0 0;  
}

/*--Company--*/

.companyWr {
    position: relative;
    /* z-index: 1; */
    margin-top: 0;
}

.topCompanyDeco01 {
	mask-image: url("/system_panel/uploads/images/test_mask2.png");
	-webkit-mask-image: url("/system_panel/uploads/images/test_mask2.png");
	mask-size: cover;
	-webkit-mask-size: cover;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center bottom;
	-webkit-mask-position: center bottom;
	z-index: 3;
	margin-top: -11.6% !important;
	position: relative;
}

.topCompanyFrame {
	/* mask-image: url("/system_panel/uploads/images/test_mask3.png"); */
	/* -webkit-mask-image: url("/system_panel/uploads/images/test_mask3.png"); */
	mask-size: cover;
	-webkit-mask-size: cover;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center top;
	-webkit-mask-position: center top;
	/* background-color: #ccc; */
	margin-top: -16%;
	overflow: hidden;
}

.topCompanyContents:after {
	content:"";
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	margin: auto;
  	width: 100%;
  	max-height: 656px;
  	height: 60%;
  	background: #EBE6F2;
  	border-radius: 10px;
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  	z-index: 0;
}

.topCompanyContentsDeco01 {
	top: -9%;
    left: -4%;
	z-index: 30;
}

.topCompanyMask {
    mask-image: url("/system_panel/uploads/images/top_company_mask.svg");
    -webkit-mask-image: url("/system_panel/uploads/images/top_company_mask.svg");
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
}

.asIam .topCompanyMask {
    mask-image: url("/system_panel/uploads/images/top_company_reverse_mask.svg");
    -webkit-mask-image: url("/system_panel/uploads/images/top_company_reverse_mask.svg");
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
}

.topCompanyTitDeco01:before {
	content:"";
  	position: absolute;
  	top: 0;
  	right: 0;
  	width: 74.32%;
  	height: 1px;
  	background: #655757;
  	z-index: 1;
}

.topCompanyTitDeco01:after {
	content:"";
  	position: absolute;
  	top: 0;
  	right: 0;
  	width: 1px;
  	height: 30px;
  	background: #655757;
  	z-index: 1;
}

.topCompanyTitDeco02:before {
	content:"";
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	width: 74.32%;
  	height: 1px;
  	background: #655757;
  	z-index: 1;
}

.topCompanyTitDeco02:after {
	content:"";
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	width: 1px;
  	height: 30px;
  	background: #655757;
  	z-index: 1;
}

.topCompanyDecoRight, .topCompanyDecoLeft {
	z-index: 1;
}

.topCompanyMsg {
	font-size: 16px;
}

.topCompanyBtn:after {
	content:"";
  	position: absolute;
  	top: 0;
  	bottom: 0;
  	right: 20px;
  	margin: auto;
  	width: 12.5%;
  	height: 42px;
  	background: url(/system_panel/uploads/images/top_company_arrow.svg) no-repeat center;
  	background-size: contain;
  	z-index: 1;
  	transition: all .3s;
}

.topCompanyBtn:hover::after {
  	right: 0;
  	transition: all .3s;
}

/*--Recruit--*/

.topRecruitMask {
    mask-image: url("/system_panel/uploads/images/top_recruit_mask.svg");
    -webkit-mask-image: url("/system_panel/uploads/images/top_recruit_mask.svg");
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
}

/*--News--*/

.topNewsSpace {
    padding: 15px 15px 45px;
}

.topNewsBgMask01 .topNewsIn {
    position: static;
}

.topNewsDeco01, .topNewsDeco02 {
	width: 30%;
  	z-index: 0;
}

.topNewsTxtBox .txt01 br {
	display: none;  
} 

.topNewsBg {
	position: relative;
	clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 10% 100%, 0 90%);
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
}

.topNewsBg.asiam {
	clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 0 100%, 0% 50%);
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 414px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
/*--cover--*/
  
.coverTit {
	font-size: 26px;
}

.coverEnMsg, .coverMsg {
    font-size: 15px;
}
  
.topMessageDeco02 {
    bottom: -8% !important;
}
  
/*--News--*/

.topNewsDeco01, .topNewsDeco02 {
	width: 30%;  
}
  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 414px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 576px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
/*--cover--*/
  
.coverTit {
	font-size: 35px;
}

.coverEnMsg, .coverMsg {
    font-size: 22px;
}
  
.topMessageContentsIn .txt01 {
	text-align: center;
}

.topMessageContentsIn .txt01 br {
	display: block;
}
  
.topMessageDeco02 {
    bottom: -10% !important;
}
  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 576px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 768px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
/*--cover--*/
  
/*.topMessageWave {
    -webkit-mask: var(--mask);
    mask: var(--mask);
     --mask: radial-gradient(180px at 50% 180px,#000 99%,#0000 101%) calc(50% - 90px) 0/180px 50% repeat-x,
        radial-gradient(51.61px at 50% -42px,#0000 99%,#000 101%) 50% 30px/120px calc(50% - 30px) repeat-x,
        radial-gradient(51.61px at 50% calc(100% - 72px),#000 99%,#0000 101%) calc(0% - 0px) 100%/0px 0% repeat-x,
        radial-gradient(0px at 50% calc(100% + 0px),#0000 99%,#000 101%) 50% calc(100% - 0px)/120px calc(50% - 0px) repeat-x;
}*/
  
.topMessageWave {
  --mask:
    radial-gradient(180px at 50% 180px, #000 99%, #0000 101%) calc(50% - 90px) 0/180px 180px,
    radial-gradient(180px at 50% -72px, #0000 99%, #000 101%) 50% 30px/120px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
  
.coverTit {
	font-size: 24px;
  	padding: 0 3% !important;
}

.coverEnMsg, .coverMsg {
    font-size: 13px;
}
  
/*--service--*/

.topMessageDeco02 {
    bottom: -12% !important;
}

.topServiceBtnRow {
    align-items: flex-start;
}
  
/*--News--*/
  
.topNewsCompanyTit {
    font-size: 25px;
}

.topNewsDeco01, .topNewsDeco02 {
	width: 50%;  
}
  
.topNewsTxtBox .txt01 br {
	display: block;  
}   
  
.topNewsBgMask01 {
    mask-image: url("/system_panel/uploads/images/top_news_mask.svg");
    -webkit-mask-image: url("/system_panel/uploads/images/top_news_mask.svg");
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
	background-position: left bottom;
}

.topNewsSpace {
	padding: 15px;
}
  
/*.topNewsBgMask01 .topNewsIn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto auto auto auto;
}*/

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 768px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 1024px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
/*--cover--*/
  
.coverSliderL:after {
    top: -4%;
    right: -6%;
}

.coverSliderR:after {
    top: -4%;
    left: -6%;
}
  
.coverTit {
	font-size: 28px;
}
  
.coverEnMsg, .coverMsg {
    font-size: 18px;
}
  
/*--service--*/
  
.topMessageDeco01 {
    top: -6% !important;
}

.topMessageDeco02 {
    bottom: -19% !important;
}
  
.topMessageBlock p br{
	display: none;

}
  
.topNewsCompanyTit {
    font-size: 25px;
}

  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1024px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 1250px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
/*--cover--*/
  
.topMessageWave {
  /* -webkit-mask: var(--mask);
  mask: var(--mask);
  --mask: radial-gradient(240px at 50% 240px,#000 99%,#0000 101%) calc(50% - 120px) 0/240px 240px repeat-x,
          radial-gradient(51.61px at 50% -42px,#0000 99%,#000 101%) 50% 30px/120px calc(50% - 30px) repeat-x,
          radial-gradient(51.61px at 50% calc(100% - 72px),#000 99%,#0000 101%) calc(0% - 0px) 100%/0px 0% repeat-x; */
      /*
              radial-gradient(0px at 50% calc(100% + 0px),#0000 99%,#000 101%) 50% calc(100% - 0px)/120px calc(50% - 0px) repeat-x;
      */
	
  --mask:
    radial-gradient(240px at 50% 240px, #000 99%, #0000 101%) calc(50% - 120px) 0/240px 240px,
    radial-gradient(240px at 50% -42px, #0000 99%, #000 101%) 50% 30px/80px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}
  
.coverTit {
	font-size: 34px;
}
  
.coverEnMsg, .coverMsg {
    font-size: 22px;
}
  
/*--service--*/
  
.topMessageDeco01 {
    top: -6% !important;
    left: 6% !important;
}

.topMessageDeco02 {
    bottom: -17% !important;
}

.topServiceBtnRow {
	flex-direction: row;
	justify-content: space-between;
}

.topCocoaServiceBtn, .topAsiamServiceBtn {
	width: 46%;  
}
  
.topAsiamServiceBtn {
	margin: 0 0 0;  
}
  
/*--company--*/

.topCompanyBtn {
	font-size: 20px;  
}
  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1250px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 1440px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
/*--cover--*/
  
.coverTit {
	font-size: 42px;
  	padding: 0 4% !important;
}
  
.asiamCoverTit {
  	padding: 0 7% !important;
} 
  
.coverEnMsg, .coverMsg {
    font-size: 25px;
}
  
/*--service--*/
  
.topMessageDeco01 {
    top: 3% !important;
    left: 6% !important;
}
  
/*--company--*/
  
.topCompanyTit {
	font-size: 40px !important;  
}
  
.topCompanyMsg {
	font-size: 25px;
}

/*--News--*/

.topNewsDeco01 {
	width: 71.41%;  
}
  
.topNewsDeco02 {
	width: 72.4%;  
}

.topNewsSpace {
	padding: 37px 15px;
}
  
.topNewsCompanyTit {
	font-size: 33px;  
}
  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1440px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 1700px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
/*--service--*/
  
.topMessageDeco01 {
    top: 7% !important;
    left: 9% !important;
}
  
.topServiceTxtContents {
	margin: 0 auto 0 7% !important;  
}
  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1700px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */