@charset "UTF-8";

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

/*-----------------------------------------------------*/
/*------------------ページタイトル--------------------*/
/*-----------------------------------------------------*/
.p_title{
background-image: url(../img/page_title_img.webp);
background-size: cover;
}


/*------------------------------------------------*/
/*------------------ケース--------------------*/
/*------------------------------------------------*/
.case{
}
.case .content{
background-color: var(--color-blue-thin);
padding: 50px;
margin-top: 50px;
}
@media screen and (max-width: 768px) {
.case .content{
padding: 20px;
}
}

/*------------------------------------------------*/
/*------------------ケース オープニング--------------------*/
/*------------------------------------------------*/
.case-op{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
}
@media screen and (max-width: 1000px) {
.case-op{
display:block;
}
}


.case-op .title03{
margin-bottom: -10px;
}
.case-op .title04{
margin-bottom: 30px;
}
@media screen and (max-width: 1000px) {
.case-op .title03{
margin-bottom:0;
}
.case-op .title04{
margin-bottom: 20px;
}
}

.case-op .wrap{
display: flex;
flex-wrap: wrap;
}

.case-op .wrap .list_maru{
margin-right: 10px;
}
@media screen and (max-width: 1150px) {
.case-op .wrap .list_maru{
column-count: 2;
column-gap: 1em;
margin-bottom: 10px;
}
}

.case-op .wrap .price-wrap{
display:flex;
  align-items: center;
  height: 100%;
flex-wrap: wrap;
}
@media screen and (max-width: 1000px) {
.case-op .wrap .price-wrap{
margin-bottom: 20px;
}
}

.case-op .wrap .price-wrap .title{
background:var(--color-white);
border: 1px solid var(--color-blue);
font-weight: 600;
font-size: var(--s18);
line-height: 120%;
color:var(--color-blue) ;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
flex-flow: column;
vertical-align: top;
width: 90px;
height: 90px;
}
@media screen and (max-width: 1000px) {
.case-op .wrap .price-wrap .title{
width: 70px;
height: 70px;
font-size: var(--s16);
}
}

.case-op .wrap .price-wrap .price{
font-size: max(3vw, var(--s30));
font-size: clamp(var(--s30), 3vw, var(--s60));
color: var(--color-blue-rich);
margin-left: 20px;
border-bottom: 2px solid;
}
@media screen and (max-width: 1000px) {
.case-op .wrap .price-wrap .price{
font-size: max(3vw, var(--s34));
}
}

.case-op .img{
margin-right: -50px;
}
@media screen and (max-width: 1000px) {
.case-op .img{
margin-right: 0;
}
}



/*------------------------------------------------*/
/*------------------全体の流れ--------------------*/
/*------------------------------------------------*/

.case-flow{
margin-top: 50px;
}
.case-flow .case-flo-list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap:15px 10px;
}


.case-flow .case-flo-list .item{
background-color: var(--color-white);
border-radius: 10px;
text-align: center;
position: relative;
}
.case-flow .case-flo-list .item a{
display: block;
height: 100%;
padding: 10px 10px 40px 10px;
color: var(--color-black);
transition: 0.3s;
}
.case-flow .case-flo-list .item .number{
color: var(--color-blue);
font-size: var(--s30);
}
.case-flow .case-flo-list .item .img{
position: absolute;
width: 40px;
left: 0;
right: 0;
margin: 0 auto;
bottom: -10px;
transition: 0.3s;
}
.case-flow .case-flo-list .item a:hover .img{
bottom: -15px;
}
.case-flow .case-flo-list .item a:hover{
background-color:var(--color-gray-light);
border-radius: 10px;
}



/*------------------------------------------------*/
/*------------------内容--------------------*/
/*------------------------------------------------*/
.case-details{
margin-top: 80px;
}
@media screen and (max-width: 768px) {
.case-details{
margin-top: 50px;
}
}

.case-details .case-details-wrap{
display: grid;
grid-template-columns: 80px 1fr;
column-gap: 30px;
margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
.case-details .case-details-wrap{
display:block;
margin-bottom: 30px;
}
}

.case-details .case-details-wrap .number{
color: var(--color-blue);
font-size: var(--s60);
line-height: 2rem;
}
.case-details .case-details-wrap .number .txt-en{
font-size: var(--s14);
display: block;
}

.case-details .case-details-wrap .details{
background-color: var(--color-white);
padding: 30px;
border-left: 4px solid var(--color-blue);
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
}
@media screen and (max-width: 950px) {
.case-details .case-details-wrap .details{
display:block;
}
}
@media screen and (max-width: 768px) {
.case-details .case-details-wrap .details{
padding: 20px;
}
}

.case-details .case-details-wrap .details p{
margin-bottom: 25px;
}

@media screen and (max-width: 950px) {
.case-details .case-details-wrap .details img{
margin-top: 20px;
}
}