/* カスタマイズ用CSS */



.ec-productRole__category_custom {

margin:0 1.0rem 1.0rem 1.0rem;
font-size:0.8rem;
}

.category_cover {
  position: absolute;
  left: 10px;
  top: 10px;
  padding:20px;
  width:280px;


}

.ec-headerTitle img {

 width:30%;
 height:auto;

}

.main_cover {
  position: relative;
  width:1100px;
  margin:50px auto 50px auto;
}

.main_cover_text {
  color: #fff;
  font-size: 1.7rem;
  position: absolute;
  right: 50px;
  top: 50px;
  writing-mode: vertical-rl;
  line-height:3.0rem;
  text-shadow: 1px 2px 3px #000;
  letter-spacing: 0.5rem;
  font-family: serif;

}

.button001 {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding:20px;
  font-size:0.8rem;
  width:280px;


}


.button001 a {
    text-decoration: none;
    background: #FFF;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 280px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.button001 a:hover {
    background: #313131;
    color: #FFF;
		font-weight: bold;
}
.button001 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button001 a:hover:after {
    border-color: #FFF;
}





.map {
  width: 1100px;
  margin:0 auto;
}


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

.category_cover {

  left: 5px;
  top: 5px;

  width:180px;


}

.ec-headerTitle img {

 width:40%;
 height:auto;

}



.map {
  width: 100%;

}



.main_cover {
  position: relative;
  width:100%;
  margin:50px auto 50px auto;
}


.main_cover_text {
  color: #fff;
  font-size: 1.0rem;
  position: absolute;
  margin: 0 auto;
  writing-mode: vertical-rl;
  line-height:3.0rem;
  text-shadow: 1px 2px 3px #000;
  letter-spacing: 0.2rem;
  font-family: serif;
  right: 50px;
  top: 10px;

}

.button001 {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding:20px;
  font-size:0.8rem;
  width:280px;

}

.button001 a {
    
    text-decoration: none;
    background: #FFF;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 280px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;

}

}



img {
 width : 100%;
}

.box01 {
  width : 80%;
  background-color: #7fbfff;
  margin-right: 0;
  margin-left: auto;
  height:auto;
}
.box02 {
  width : 40%;
  background-color: rgba( 255, 255, 255, 0.9 );
  height:auto;
  position: absolute;
  top: 40px;
  padding:30px;
  
}


.box01r {
  width : 80%;
  background-color: #7fbfff;
  height:auto;
}
.box02r {
  width : 40%;
  background-color: rgba( 255, 255, 255, 0.9 );
  height:auto;
  position: absolute;
  top: 40px;
  right: 0;
  padding:30px;


}
.title {
    margin-bottom: 2.0rem;
    font-size: 2.0rem;
    font-weight: normal;
}

.text {
    margin-bottom: 1.5rem;
    font-size: 1.0rem;
    line-height: 1.6;
}






/* レイアウトのためのCSS */
.container {
  position: relative;
  width:1150px;
  margin-bottom:3.0rem;
}


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

.box01 {
  width :100%;
  height:auto;

}
  
.box02 {
  width :100%;
  height:auto;
  padding:20px;
  position: static;
  box-sizing: border-box;

}

.box01r {
  width :100%;
  height:auto;

}
  
.box02r {
  width :100%;
  height:auto;
  padding:20px;
  position: static;
  box-sizing: border-box;

}


.title {
    margin-bottom: 0rem;
    font-size: 1.5rem;
    font-weight: normal;
}

.text {
    margin-bottom: 0rem;
    font-size: 1.0rem;
    line-height: 1.6;
}

.container {
  width :100%;
  margin-bottom:3.0rem;

}





}


img {
  width: 100%; /* divの幅に対する割合 */
}
.category_cover_text {
  color: #fff;
  font-size: 3.0rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-shadow: 1px 2px 3px #000;
  letter-spacing: 1.2rem;

}

.role_sp {
  margin:2.0rem 0;
}

.top_category_text {
  margin:1.0rem 0;
  font-size: 1.2rem;
  text-align:center;
  font-weight:bold;
}