/* argument */
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
.ffRb { font-family: 'Roboto', sans-serif; }

/* font style */
/* site style */
/* [ opacity ]
-------------------------------------------------*/
/* [ display style ]
-------------------------------------------------*/
/* [ background-image ]
-------------------------------------------------*/
/* [ writing-mode ]
-------------------------------------------------*/
/* [ illustrator & photoshop letter spacing ]
-------------------------------------------------*/
/* [ easy breakpoint ]
-------------------------------------------------*/
/* [ easy transform ]
-------------------------------------------------*/
.box-txtdes { max-width: 880px; margin: auto; font-size: 16px; font-size: 1.6rem; line-height: 30px; font-weight: 500; margin-top: 24px; margin-bottom: 35px; padding: 0 20px; }

@media (max-width: 767px) { .box-txtdes { margin-top: -12px; margin-bottom: 23px; } }

.box-gray { background: #F7F7F7; padding: 19px 0 41px; }

@media (max-width: 767px) { .box-gray { background: none; padding: 0; }
  .box-gray .box-sp { display: none; background: #F7F7F7; padding: 12px 19px 26px; }
  .box-gray .btn-open { background: #00439B; color: #fff; text-align: center; display: block; font-size: 17px; font-size: 1.7rem; line-height: 25px; letter-spacing: 0.06em; font-weight: bold; padding: 15px; position: relative; }
  .box-gray .btn-open:before { content: ""; width: 19px; height: 18px; background-image: url(../../img/casestudy/icon_down.png); background-size: 100% 100%; background-position: center; position: absolute; top: 0; bottom: 0; right: 15px; margin: auto; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
  .box-gray .btn-open.active:before { transform: rotate(180deg); } }

.box-gray .list-cat .item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px solid #CECECE; padding: 14px 0; }

.box-gray .list-cat .item__title { width: 92px; display: inline-block; font-size: 16px; font-size: 1.6rem; line-height: 30px; font-weight: bold; }

@media (max-width: 767px) { .box-gray .list-cat .item__title { width: 85px; } }

.box-gray .list-cat .item__ul { width: calc(100% - 92px); }

@media (max-width: 767px) { .box-gray .list-cat .item__ul { width: calc(100% - 85px); } }

.box-gray .list-cat .item__ul li { display: inline-block; margin-right: 20px; font-size: 15px; font-size: 1.5rem; line-height: 30px; }

@media (max-width: 767px) { .box-gray .list-cat .item__ul li { margin-right: 15px; } }

@media only screen and (max-width: 767px) and (max-width: 350px) { .box-gray .list-cat .item__ul li { font-size: 13px; font-size: 1.3rem; line-height: 25px; } }

.box-gray .list-cat .item__ul li label { position: relative; padding-left: 20px; display: inline-block; }

.box-gray .list-cat .item__ul li label input { position: absolute; opacity: 0; }

.box-gray .list-cat .item__ul li label span { width: 15px; height: 15px; display: block; position: absolute; left: 0; top: 7px; border: 1px solid #000; }

@media only screen and (max-width: 350px) { .box-gray .list-cat .item__ul li label span { top: 7px; } }

.box-gray .list-cat .item__ul li label span:before { content: ''; width: 12px; height: 10px; display: block; background: url("../../img/casestudy/ico_check.svg") bottom center no-repeat; position: absolute; top: 0; right: 0; margin: auto; opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.box-gray .list-cat .item__ul li label input:checked ~ span:before { opacity: 1; }

.box-gray .list-btn { text-align: center; font-size: 0; margin-top: 25px; }

.box-gray .list-btn .btn_cm { font-weight: bold; }

@media only screen and (max-width: 350px) { .box-gray .list-btn .btn_cm { font-size: 11px; font-size: 1.1rem; } }

@media (max-width: 767px) { .box-gray .list-btn { margin-top: 18px; }
  .box-gray .list-btn:before, .box-gray .list-btn:after { content: " "; display: table; }
  .box-gray .list-btn:after { clear: both; }
  .box-gray .list-btn .btn_cm--black { width: calc(100% * 164/292); float: left; } }

.box-gray .list-btn .btn_cm--gray { width: 154px; margin-left: 16px; background: #B9B9B9; color: #fff !important; border: 0; }

@media (max-width: 767px) { .box-gray .list-btn .btn_cm--gray { width: calc(100% * 120/292); float: right; margin-left: 0; padding-left: 0; padding-right: 0; } }

.box-list { padding-top: 95px; }

@media (max-width: 767px) { .box-list { padding-top: 68px; }
  .box-list .container { padding: 0; } }

.box-list .box-flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 63px; }

.box-list .box-flex .item { width: calc(50% - 30px); margin-right: 60px; margin-bottom: 37px; }

@media (min-width: 768px) { .box-list .box-flex .item:nth-child(2n) { margin-right: 0; } }

@media (max-width: 767px) { .box-list .box-flex .item { width: 100%; margin-right: 0; margin-bottom: 44px; }
  .box-list .box-flex .item:last-child { margin-bottom: 27px; } }

.box-list .box-flex .item__img { display: block; overflow: hidden; }

@media (max-width: 767px) { .box-list .box-flex .item__img { margin-right: 20px; } }

.box-list .box-flex .item__img span { display: block; transition: all 0.4s; transition-duration: 4s; }

.box-list .box-flex .item__img span:before { content: ""; display: block; padding-top: calc(100% * 337/520); }

@media (max-width: 767px) { .box-list .box-flex .item__img span:before { padding-top: calc(100% * 230/355); } }

.box-list .box-flex .item .txt-cat { font-size: 0; margin-bottom: 17px; }

@media (max-width: 767px) { .box-list .box-flex .item .txt-cat { margin-bottom: 4px; } }

.box-list .box-flex .item .txt-cat span { border: 1px dotted #7030a0; min-width: 120px; text-align: center; color: #7030a0; font-size: 11px; font-size: 1.1rem; line-height: 23px; letter-spacing: 0.05em; font-weight: bold; padding: 1px 23px; margin-right: 10px; display: inline-block; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .box-list .box-flex .item .txt-cat span { padding-top: 5px; } }

@media (max-width: 767px) { .box-list .box-flex .item .txt-cat span { min-width: 66px; line-height: 21px; padding: 1px 11px; margin-right: 5px; font-size: 12px; font-size: 1.2rem; line-height: 18px; } }

.box-list .box-flex .item .item-des { margin-left: 28px; margin-top: -54px; background: #fff; padding: 33px; padding-right: 20px; position: relative; z-index: 1; }

@media (max-width: 767px) { .box-list .box-flex .item .item-des { margin-top: -57px; margin-left: 21px; background: #F7F7F7; padding: 20px; padding-bottom: 30px; position: relative; }
  .box-list .box-flex .item .item-des:after { content: ""; width: 51px; height: 11px; background-image: url(../../img/casestudy/icon_next.png); background-size: 100% 100%; background-position: center; display: block; margin-left: auto; margin-right: -4px; margin-top: 2px; } }

.box-list .box-flex .item .item-des .txt-title { font-size: 23px; font-size: 2.3rem; line-height: 33px; font-weight: bold; margin-bottom: 3px; }

@media (max-width: 767px) { .box-list .box-flex .item .item-des .txt-title { font-size: 18px; font-size: 1.8rem; line-height: 26px; margin-bottom: 6px; } }

.box-list .box-flex .item .item-des .txt-subtitle { font-size: 13px; font-size: 1.3rem; line-height: 1.5; font-weight: 500; }

@media (max-width: 767px) { .box-list .box-flex .item .item-des .txt-subtitle { font-size: 13px; font-size: 1.3rem; line-height: 23px; } }

.box-list .box-flex .item.new .item__img { position: relative; }

.box-list .box-flex .item.new .item__img:before { content: "NEW"; width: 46px; height: 46px; background: #00BFC9; color: #fff; text-align: center; position: absolute; z-index: 1; top: 0; left: 0; font-size: 12px; font-size: 1.2rem; line-height: 46px; letter-spacing: 0.02em; font-weight: 500; font-family: "Roboto", sans-serif; }

@media (max-width: 767px) { .box-list .box-flex .item.new .item__img:before { font-size: 10px; font-size: 1rem; line-height: 30px; width: 30px; height: 30px; } }

@media only screen and (min-width: 1025px) { .box-list .box-flex .item:hover .item__img span { transform: scale(1.1); } }

/*# sourceMappingURL=maps/casestudy.min.css.map */