@charset "UTF-8";
/*
========================================

	recruit > work003 > work.css
    
========================================*/	

body {
    margin: 0;
    padding: 0;
    opacity:0;
	animation: fadein 1s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

p,ul,ol,li,dl,dd,div {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  li {
    list-style: none;
  }
  
  main {
    overflow: hidden;
    padding-bottom: 0;
    /*background-color: #e5e5e5;
    filter: hue-rotate(45%);*/
    margin-bottom: 0;
  }

  div.info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
  }

  div.info p {
    font-size: clamp(0.625rem, 0.55rem + 0.38vw, 1rem);
  }

  div.info p.sol {
    margin: 0 16px;
    padding:8px 16px;
    background: rgba(255,255,255,0.8);
    color: #25348e;
    background-blend-mode: multiply;
    border: 3px solid #25348e;
    
    font-weight: 700;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  div.info p.case {
    margin: 0 16px 0 0;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    background: rgba(37, 52, 142,0.8);/*#25348e*/
    color: #fff;
    background-blend-mode: multiply;
    border: 2px solid #25348e;

    font-weight: 700;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
}

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

    div.info p.sol {
        border: 4px solid #25348e;
    }

    div.info {
        display: flex;
        flex-direction: row;
    }
    
}

/*--------------------
    world
--------------------*/

ul.solutionMap {
	width:100%;
	margin:0 auto;
	padding:0;
	/*opacity: 0;*
    background:#4dc4ff;*/
    overflow: hidden;
}

ul.solutionMap img {
	width:100%;
	margin:0 auto;
	padding:0;
	max-width: none;
}

ul.solutionMap li.field {
	padding:0;
    margin: 0;
	position:relative;
	/*box-sizing: border-box;*/
    list-style: none;
    /*cursor:pointer;*/

 /*↓画像の縦横比率*/

    /*aspect-ratio: 160 / 92; iOS14　非対応*/
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 57.5%;
    /* ↑ 160：92を基準に横幅を1としたときの縦幅が0.575のため、57.5% */
}

ul.solutionMap li.field img.block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

ul.solutionMap li.field.f01 {background:url(/business/amenity/img/bg_01.png) no-repeat 0 0; background-size:cover;}
ul.solutionMap li.field.f02 {background:url(/business/amenity/img/bg_02.png) no-repeat 0 0; background-size:cover;}
ul.solutionMap li.field.f03 {background:url(/business/amenity/img/bg_03.png) no-repeat 0 0; background-size:cover;}
ul.solutionMap li.field.f04 {background:url(/business/amenity/img/bg_04.png) no-repeat 0 0; background-size:cover;}


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

ul.solutionMap li.field  {width:100%;}/*----------1列*/
    
}

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

    ul.solutionMap li.field {
        float: left;

     /*↓画像の縦横比率*/

        /*aspect-ratio: 160 / 92; iOS14　非対応*/

        position: relative;
        width:50%;/*----------2列*/
        height: 0;
        padding-top: 28.75%;
        /* ↑160：92を基準に横幅を1としたときの縦幅が0.575のため、57.5%　⇐これの1/2 */

    }

}















/*--------------------
    title
--------------------*/

ul.solutionMap li h4.fldTitle {
	display: block;
	width:100%;
	height:164px;
	padding:48px 0;
	box-sizing: border-box;
	max-width:420px;
	text-align:center;
	color:#25348e;

    text-shadow: 1px 1px 1px #fff,
    -1px 1px 1px #fff,
    1px -1px 1px #fff,
    -1px -1px 1px #fff;
	background:url(/business/amenity/img/cloud.png) no-repeat center center;
	background-size:80%;

    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    opacity: 1;
    
    font-size:calc(0.875rem + .9vw);
    font-weight: bold;
    
    /*border: 1px solid #000;ガイド*/
}

ul.solutionMap li h4.fldTitle span.text {
    display: block;
    /*border: 1px solid #000 ガイド;*/
}

ul.solutionMap li h4.fldTitle.on {
    color:#808cd9;
    transition:all .2s ease;
}

ul.solutionMap li.selected h4.fldTitle {
    width: 100%;
    padding:25% 0 0 0;
    height: 100%;
    max-width: 100%;
    transition:all .2s ease;
    font-size:calc(1.325rem + .9vw);
 }

ul.solutionMap li.selected.f01 h4.fldTitle  {/*color:#1976d2;*/color:#25348e; background: url(/business/amenity/img/cloud_f01.png) no-repeat center center; background-size:86%; animation:none !important;}
ul.solutionMap li.selected.f02 h4.fldTitle  {/*color:#4caf50;*/ color:#25348e; background: url(/business/amenity/img/cloud_f02.png) no-repeat center center; background-size:86%; animation:none !important;}
ul.solutionMap li.selected.f03 h4.fldTitle  {/*color:#e91e63;*/color:#25348e; background: url(/business/amenity/img/cloud_f03.png) no-repeat center center; background-size:86%; animation:none !important;}
ul.solutionMap li.selected.f04 h4.fldTitle  {/*color:#ff9800;*/color:#25348e; background: url(/business/amenity/img/cloud_f04.png) no-repeat center center; background-size:86%; animation:none !important;}


@media only screen and (min-width: 992px) {
    ul.solutionMap li h4.fldTitle {
        height:240px;
        padding:60px 0;
        max-width: 640px;
    }
}