@charset "utf-8";

/* スタイルシート
作成者：Hatomi Inc.
作成日：R8.05.21
-------------------------------------------------------------------------------------*/

/*****************************

component

*****************************/

.case__title{
  padding: 1.25rem 1.5rem;
  border-radius: .75rem;
  background:#004A8F;
	 color: #FFF;
  font-size:1rem;
  font-weight:700;
  line-height:1.5;
}

@media screen and (max-width:480px){
  .case__title{
    padding:1rem;
  }
}

.caseIndustry__title{
  background:#004A8F;
}

.caseService__title{
background:#4C81BF;
}

.caseRetail__title{
background:#F7931E;
}

.group_list{
  margin:0 0 2rem;
  padding:0;
  list-style:none;
}


.group_list li{
  position:relative;
  margin-top:.25rem;
  padding-left:1.25rem;
  color:#004A8F;
  font-size:1rem;
  font-weight:700;
  line-height:1.7;
}

.group_list li:first-child{
  margin-top:0;
}


.group_list li::before{
  content:"・";
  position:absolute;
  top:0;
  left:0;
}

.caseIndustry__list li{
  color:#004A8F;
}

.caseService__list li{
  color:#4C81BF;
}

.caseRetail__list li{
  color:#F7931E;
}


/*****************************

caseNav

*****************************/
.caseNav{
  padding: 3rem 0;
}

@media screen and (max-width:480px){
  .caseNav{
    padding: 2rem 0;
  }
}


.caseNav__list{
  display: flex;
  gap: 2rem;
}

@media screen and (max-width:700px){
  .caseNav__list{
    display: block;
  }
}


.caseNav__button{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc((100% - 4rem) / 3);
  height: 4.5rem;
  border-radius: 1rem;
  color: #FFF;
  text-decoration: none;
}

.caseNav__button:hover{
  opacity: .85;
}

@media screen and (max-width:700px){
  .caseNav__button{
    width: 100%;
    margin-top: 1rem;
  }

  .caseNav__button:first-child{
    margin-top: 0;
  }
}

@media screen and (max-width:480px){
  .caseNav__button{
    height: 6rem;
  }
}


.caseNav__button span{
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

@media screen and (max-width:480px){
  .caseNav__button span{
    font-size: 1rem;
  }
}

.caseNav__button::after{
  content:"";
  position:absolute;
  top:50%;
  right:20px;
  width:10px;
  height:10px;
  border-right:2px solid #FFF;
  border-bottom:2px solid #FFF;
  transform:translateY(-65%) rotate(45deg);
}

@media screen and (max-width:480px){
  .caseNav__button::after{
    width:10px;
    height:10px;
  }
}


.caseNav__button--manufacturing{
  background:#004A8F;
}


.caseNav__button--service{
  background:#4C81BF;
}


.caseNav__button--retail{
  background:#F7931E;
}



/*****************************

caseIndustry

*****************************/
.caseIndustry{
}

.caseIndustry__group{
  margin-top:3rem;
  padding-bottom:3rem;
  border-bottom:1px solid #D9D9D9;
}

.caseIndustry__group:last-child{
  border:none;
}

@media screen and (max-width:480px){
  .caseIndustry__group{
    margin-top:2rem;
    padding-bottom:2rem;
  }
}


/*****************************

group_list

*****************************/
.caseIndustry__list{
}


.caseIndustry__list li{
  color:#004A8F;
}


/*****************************

issue button

*****************************/
.caseIssue{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  margin-top:1.5rem;
  padding:1.5rem 2rem 1.5rem 3.7rem;
  border:none;
  border-radius:.75rem;
  background:#F3F0E8;
  text-align:left;
  cursor:pointer;
}

.caseIssue:hover{
  opacity:.85;
}

@media screen and (max-width:480px){
  .caseIssue{
    padding:1rem 1rem 1rem 3.5rem;
  }
}

.caseIssue span{
  font-size:1rem;
  font-weight:700;
  line-height:1.7;
}

.caseIssue::before{
  content:"";
  position:absolute;
  top:50%;
  left:1.5rem;
  width:23px;
  height:23px;
  transform:translateY(-50%);
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 23.3 23.3'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:%23034787;%7D%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M12.3,3.6C11.1,2.4,9.6,1.8,8,1.8c-1.6,0-3.2,0.6-4.4,1.8C2.4,4.8,1.8,6.3,1.8,8c0,1.6,0.6,3.2,1.8,4.4c1.2,1.2,2.7,1.8,4.4,1.8c1.6,0,3.2-0.6,4.4-1.8c1.2-1.2,1.8-2.7,1.8-4.4C14.1,6.3,13.5,4.8,12.3,3.6z M11.8,11.8c-1,1-2.4,1.6-3.9,1.6c-1.5,0-2.8-0.6-3.9-1.6c-1-1-1.6-2.4-1.6-3.9c0-1.5,0.6-2.8,1.6-3.9c1-1,2.4-1.6,3.9-1.6c1.5,0,2.8,0.6,3.9,1.6c1,1,1.6,2.4,1.6,3.9C13.4,9.4,12.9,10.8,11.8,11.8z'/%3E%3Cpath class='st0' d='M22.7,19.6l-5.9-5.9c-0.1-0.1-0.4-0.1-0.5,0l-0.6,0.6l-1.5-1.5c1.1-1.5,1.7-3.3,1.6-5.2c-0.1-2-0.9-3.9-2.3-5.3C12.8,1.6,11.9,1,11,0.6C10,0.2,9,0,8,0c-1,0-2,0.2-3,0.6C4,1,3.1,1.6,2.3,2.3C1.6,3.1,1,4,0.6,5C0.2,5.9,0,6.9,0,8c0,1,0.2,2,0.6,3c0.4,1,1,1.9,1.7,2.6c1.4,1.4,3.3,2.2,5.3,2.3c0.1,0,0.2,0,0.3,0c1.8,0,3.5-0.6,4.8-1.6l1.5,1.5l-0.6,0.6c-0.1,0.1-0.1,0.4,0,0.5l5.9,5.9c0.4,0.4,1,0.6,1.5,0.6c0.6,0,1.1-0.2,1.5-0.6C23.5,21.8,23.5,20.4,22.7,19.6z M7.6,15.2c-1.8-0.1-3.5-0.8-4.8-2.1C1.4,11.7,0.7,9.9,0.7,8c0-1.9,0.8-3.8,2.1-5.1C4.2,1.4,6,0.7,8,0.7c1.9,0,3.8,0.8,5.1,2.1c1.3,1.3,2,3,2.1,4.8c0.1,1.8-0.5,3.6-1.7,5c-0.1,0.2-0.3,0.3-0.5,0.5c-0.2,0.2-0.3,0.3-0.5,0.5C11.2,14.7,9.5,15.3,7.6,15.2z M13.3,13.8c0.1-0.1,0.2-0.2,0.3-0.2c0.1-0.1,0.2-0.2,0.2-0.3l1.4,1.4l-0.5,0.5L13.3,13.8z M22.2,22.2c-0.6,0.6-1.5,0.6-2.1,0l-5.6-5.6L15,16l1-1l0.6-0.6l5.6,5.6c0.3,0.3,0.4,0.7,0.4,1.1C22.6,21.5,22.5,21.9,22.2,22.2z'/%3E%3Cpath class='st0' d='M21.1,20.1c-0.5,0-1,0.4-1,1s0.4,1,1,1c0.5,0,1-0.4,1-1S21.6,20.1,21.1,20.1z'/%3E%3Cpath class='st0' d='M8,10.2c-0.4,0-0.8,0.3-0.8,0.8V11c0,0.4,0.3,0.8,0.8,0.8c0.5,0,0.8-0.3,0.8-0.8v-0.1C8.7,10.5,8.4,10.2,8,10.2z'/%3E%3Cpath class='st0' d='M8.4,4H7.6C7.3,4,7.2,4.2,7.2,4.5L7.6,9c0,0.2,0.2,0.4,0.4,0.4c0.2,0,0.4-0.2,0.4-0.4l0.4-4.5C8.8,4.2,8.6,4,8.4,4z'/%3E%3C/g%3E%3C/svg%3E");
}

@media screen and (max-width:480px){
  .caseIssue::before{
    left:1rem;
    width:20px;
    height:20px;
  }
}



/*****************************

caseModal

*****************************/
.caseModal{
  position:fixed;
  inset:0;
  z-index:9999;

  visibility:hidden;
  opacity:0;

  transition:
  opacity .35s ease,
  visibility .35s ease;
}


.caseModal.is-open{
  visibility:visible;
  opacity:1;
}


.caseModal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);

  opacity:0;

  transition:
  opacity .35s ease;

  cursor:pointer;
}

.caseModal.is-open
.caseModal__overlay{
  opacity:1;
}


/*****************************

inner

*****************************/
.caseModal__inner{
  position:relative;

  width:min(90%,900px);
  max-height:90vh;

  margin:5vh auto;
  padding:2rem;

  overflow-y:auto;

  border-radius:.5rem;

  background:#F3F0E8;

  opacity:0;

  transform:
  translateY(30px)
  scale(.98);

  transition:
  opacity .35s ease,
  transform .35s ease;
}

.caseModal.is-open
.caseModal__inner{

  opacity:1;

  transform:
  translateY(0)
  scale(1);

}


@media screen and (max-width:480px){
  .caseModal__inner{
    width:92%;
    padding:1rem;
  }
}

/*****************************

scrollbar

*****************************/

.caseModal__inner{
  scrollbar-width:thin;
  scrollbar-color:
  rgba(0,0,0,.15)
  transparent;
}


.caseModal__inner::-webkit-scrollbar{
  width:6px;
}


.caseModal__inner::-webkit-scrollbar-track{
  background:transparent;
}


.caseModal__inner::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:
  rgba(0,0,0,.15);
}


.caseModal__inner::-webkit-scrollbar-thumb:hover{
  background:
  rgba(0,0,0,.25);
}


.caseModal__close{
  position:absolute;
  top:1rem;
  right:1rem;
  width:40px;
  height:40px;
  border:none;
  background:none;
  cursor:pointer;
}

.caseModal__close span{
  position:absolute;
  top:50%;
  left:50%;
  width:22px;
  height:2px;
  background:#333;
}

.caseModal__close span:first-child{
  transform:
  translate(-50%,-50%)
  rotate(45deg);
}

.caseModal__close span:last-child{
  transform:
  translate(-50%,-50%)
  rotate(-45deg);
}


.caseModal__industry{
  padding-bottom:1rem;
  border-bottom:1px solid #999;
  font-size:1rem;
  font-weight:700;
  line-height:1.7;
}


.caseModal__heading{
  margin-top:2rem;
  padding:1rem;
  border-radius:.75rem;
  background:#004A8F;
  color:#FFF;
  font-size:1rem;
  font-weight:700;
  text-align:center;
}


.caseModal__text{
  margin-top:2rem;
  font-size:1rem;
  line-height:2;
}


.caseModal__subTitle{
  margin:2rem 0;
  color:#004A8F;
  font-size:1rem;
  font-weight:700;
}


.caseModal__cta{
  margin-top:3rem;
  text-align:center;
}


.caseModal__cta a{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:min(100%,500px);
  height:4rem;
  border-radius:999px;
  background:
  linear-gradient(
  90deg,
  #FF9A00,
  #FE5100
  );
  color:#FFF;
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
}



/*****************************

card

*****************************/
.toolArchiveList{
  display: grid;
}

/* PC */
@media screen and (min-width: 701px){
  .toolArchiveList{
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

/* TB */
@media screen and (min-width: 481px) and (max-width: 700px){
  .toolArchiveList{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* SP */
@media screen and (max-width: 480px){
  .toolArchiveList{
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}


/*****************************

card

*****************************/
.toolCard{
}

.toolCard.is-clickable{
  cursor:pointer;
}

.toolCard__inner{
  display: flex;
  flex-direction: column;

  height: 100%;

  background: #FFFFFF;
  border: 3px solid #F3F0E8;
  border-radius: .7rem;
}

/* PC */
@media screen and (min-width: 701px){
  .toolCard__inner{
    padding: 2rem;
  }
}

/* TB */
@media screen and (min-width: 481px) and (max-width: 700px){
  .toolCard__inner{
    padding: 1.8rem;
  }
}

/* SP */
@media screen and (max-width: 480px){
  .toolCard__inner{
    padding: 1.5rem;
  }
}

/*****************************

hover

*****************************/
.toolCard__inner{
  transition:transform .25s ease,box-shadow .25s ease,
  border-color .25s ease;
}
.toolCard.is-clickable:hover .toolCard__inner{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  border-color:#D8D1C7;
}
.toolCard.is-clickable:hover .toolCard__link{
  background:#004A8F;
}
.toolCard.is-clickable:hover .toolCard__link::before{
  background:#FFF;
}
.toolCard.is-clickable:hover .toolCard__link::after{
  border-top-color:#FFF;
  border-right-color:#FFF;
}


/*****************************

logo

*****************************/
.toolCard__logo{
  text-align: center;
  border-bottom: 3px solid #ECE6DE;
}

/* PC */
@media screen and (min-width: 701px){
  .toolCard__logo{
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

/* TB */
@media screen and (min-width: 481px) and (max-width: 700px){
  .toolCard__logo{
    padding-bottom: 1.3rem;
    margin-bottom: 1.3rem;
  }
}

/* SP */
@media screen and (max-width: 480px){
  .toolCard__logo{
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
}


.toolCard__logo img{
  width: auto;
  max-width: 80%;
}


/*****************************

text

*****************************/
.toolCard__text{
  flex-grow: 1;
}

/* PC */
@media screen and (min-width: 701px){
  .toolCard__text{
    /*min-height: 15rem;*/
				min-height: auto;
  }
}

/* TB */
@media screen and (min-width: 481px) and (max-width: 700px){
  .toolCard__text{
    min-height: auto;
  }
}

/* SP */
@media screen and (max-width: 480px){
  .toolCard__text{
    min-height: auto;
  }
}


.toolCard__text p{
  line-height: 2;
}

/* PC */
@media screen and (min-width: 701px){
  .toolCard__text p{
    font-size: 1rem;
  }
}

/* TB */
@media screen and (min-width: 481px) and (max-width: 700px){
  .toolCard__text p{
    font-size: 0.95rem;
  }
}

/* SP */
@media screen and (max-width: 480px){
  .toolCard__text p{
    font-size: 0.9rem;
  }
}


/*****************************

bottom

*****************************/
.toolCard__bottom{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  margin-top: auto;
}

/* PC */
@media screen and (min-width: 701px){
  .toolCard__bottom{
    padding-top: 2rem;
  }
}

/* TB */
@media screen and (min-width: 481px) and (max-width: 700px){
  .toolCard__bottom{
    padding-top: 1.8rem;
  }
}

/* SP */
@media screen and (max-width: 480px){
  .toolCard__bottom{
    padding-top: 1.5rem;
  }
}


/*****************************

company

*****************************/
.toolCard__company{
  position: relative;
  font-weight: 700;
  line-height: 1.5;
}

/* PC */
@media screen and (min-width: 701px){
  .toolCard__company{
    padding-left: 2rem;
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
}

/* TB */
@media screen and (min-width: 481px) and (max-width: 700px){
  .toolCard__company{
    padding-left: 1.8rem;
    font-size: 1rem;
    margin-bottom: 0.8rem;
  }
}

/* SP */
@media screen and (max-width: 480px){
  .toolCard__company{
    padding-left: 1.6rem;
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
  }
}


.toolCard__company::before{
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;

  /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.9 21.9"><circle fill="%234a7bb4" cx="10.9" cy="10.9" r="10.9"/><polygon fill="%23fff" points="11.2 4.2 16.3 4.9 16.3 17.1 11.2 17.6 11.2 4.2"/><path fill="%23fff" d="M10.7,17.7l-1.4-.2v-2.1h-2.7c0-.1,0,1.7,0,1.7l-1.1-.2V6s5.1-1.8,5.1-1.8v13.5ZM10,6.1l-.9.3v1.1l.9-.2v-1.2ZM8.3,6.6l-.9.2v1.1c.3,0,.6,0,.9-.2v-1ZM6.1,8.2c.2,0,.6,0,.8-.2v-1l-.8.3v1ZM10,9.5v-1.3l-.9.2v1.2h.9ZM8.3,8.6c-.3,0-.6,0-.9.2v1h.9v-1.3ZM6.8,8.9h-.8v1.2h.8v-1.2ZM10,10.4h-.9v1.3h.9v-1.3ZM8.3,10.7h-.9v1.1c.3,0,.6,0,.9,0v-1.1ZM6.8,10.9h-.8v1.1h.8v-1.1Z"/></svg>');*/
	 background-image: url(../images/common/icon-company.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* PC */
@media screen and (min-width: 701px){
  .toolCard__company::before{
    width: 1.3rem;
    height: 1.3rem;
  }
}

/* TB */
@media screen and (min-width: 481px) and (max-width: 700px){
  .toolCard__company::before{
    width: 1.2rem;
    height: 1.2rem;
  }
}

/* SP */
@media screen and (max-width: 480px){
  .toolCard__company::before{
    width: 1.1rem;
    height: 1.1rem;
  }
}


/*****************************

category

*****************************/
.toolCard__category{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


.toolCard__category li{
  background: #F3F0E8;
  border-radius: 9999px;
  font-weight: 700;
  line-height: 1;
}

/* PC */
@media screen and (min-width: 701px){
  .toolCard__category li{
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
  }
}

/* TB */
@media screen and (min-width: 481px) and (max-width: 700px){
  .toolCard__category li{
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
  }
}

/* SP */
@media screen and (max-width: 480px){
  .toolCard__category li{
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
  }
}


/*****************************

button

*****************************/
.toolCard__link{
  position: relative;
  display: block;

  border: 2px solid #004A8F;
  border-radius: 50%;

  transition: opacity 0.3s;
}

/* PC */
@media screen and (min-width: 701px){
  .toolCard__link{
    width: 3rem;
    height: 3rem;
  }
}

/* TB */
@media screen and (min-width: 481px) and (max-width: 700px){
  .toolCard__link{
    width: 3rem;
    height: 3rem;
  }
}

/* SP */
@media screen and (max-width: 480px){
  .toolCard__link{
    width: 3rem;
    height: 3rem;
  }
}


/* line */
.toolCard__link::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  background: #004A8F;

  transform: translate(-58%, -50%);
}

/* PC */
@media screen and (min-width: 701px){
  .toolCard__link::before{
    width: 1.5rem;
    height: 0.2rem;
    border-radius: 9999px;
  }
}

/* TB */
@media screen and (min-width: 481px) and (max-width: 700px){
  .toolCard__link::before{
    width: 1.5rem;
    height: 0.2rem;
    border-radius: 9999px;
  }
}

/* SP */
@media screen and (max-width: 480px){
  .toolCard__link::before{
    width: 1.5rem;
    height: 0.2rem;
    border-radius: 9999px;
  }
}


/* arrow */
.toolCard__link::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 45%;

  border-top: 0.2rem solid #004A8F;
  border-right: 0.2rem solid #004A8F;

  transform: translate(-10%, -50%) rotate(45deg);
}

/* PC */
@media screen and (min-width: 701px){
  .toolCard__link::after{
    width: 0.9rem;
    height: 0.9rem;
  }
}

/* TB */
@media screen and (min-width: 481px) and (max-width: 700px){
  .toolCard__link::after{
    width: 0.85rem;
    height: 0.85rem;
  }
}

/* SP */
@media screen and (max-width: 480px){
  .toolCard__link::after{
    width: 0.8rem;
    height: 0.8rem;
  }
}


.toolCard__link:hover{
  opacity: 0.7;
}