@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
body {
	font-family: 'Noto Sans JP', sans-serif;
}
html{
	overflow-x:hidden;
  scroll-behavior: smooth;
}
.supportcase{
	background-image:url('../images/service_mv.jpg');
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    margin: 0 0 0 auto;
    padding: 22% 0 0 0;
	margin-top: 38px;
    /* margin-top: 70px; */
    position: relative;
}
.font-en {
    font-family: "Cormorant Garamond";
    color: #0d364c;
}

.font-1 {
    font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
}

.font-2 {
    font-size: 20px;
	font-family: 'Noto Sans JP', sans-serif;
}

.font-3 {
	font-family: 'Noto Sans JP', sans-serif;
}

.nmt-5 {
    margin-top: -2rem;
}

/* .container-fluid {
    padding-right: 0!important;
    padding-left: 0!important;
} */

.row {
    z-index: 3;
    position: relative;
}

.bg {
    position: relative;
}

.bg2 {
    position: absolute;
    background:-webkit-linear-gradient(left, #fff 0%, #fff 35%, #f0eae5 35%, #f0eae5 100%);
    background:-moz-linear-gradient(left, #fff 0%, #fff 35%, #f0eae5 35%, #f0eae5 100%);
    background:-o-linear-gradient(left, #fff 0%, #fff 35%, #f0eae5 35%, #f0eae5 100%);
    background:linear-gradient(to right, #fff 0%, #fff 35%, #f0eae5 35%, #f0eae5 100%);
    top: 80px;
    width: 100%;
    height: 100%;
}

.background {
    background:-webkit-linear-gradient(left, #fff 0%, #fff 35%, #f0eae5 35%, #f0eae5 100%);
    background:-moz-linear-gradient(left, #fff 0%, #fff 35%, #f0eae5 35%, #f0eae5 100%);
    background:-o-linear-gradient(left, #fff 0%, #fff 35%, #f0eae5 35%, #f0eae5 100%);
    background:linear-gradient(to right, #fff 0%, #fff 35%, #f0eae5 35%, #f0eae5 100%);
    /*background-color: #f0eae5;*/
    /*position: absolute;*/
    /*top: 80px;*/
    /*width: 65%;*/
    /*height: 100%;*/
}
#box-strengths .col-sm-4{
	padding:0;
	padding-left:20px;
	padding-bottom:25px;
}
.bg-color {
    background:#f0eae5;
    position: relative;
}

.bg-white {
    position: absolute;
    right: 0;
    width: 15px;
    height: 100%;
}

.bg-white2 {
    position: absolute;
    background-color: #fff;
    top: 0;
    width: 100%;
    height: 80px;
    z-index: 2;
}

.top-block {
    background:-webkit-linear-gradient(left, #f0eae5 0%, #f0eae5 50%, #fff 50%, #fff 100%);
    background:-moz-linear-gradient(left, #f0eae5 0%, #f0eae5 50%, #fff 50%, #fff 100%);
    background:-o-linear-gradient(left, #f0eae5 0%, #f0eae5 50%, #fff 50%, #fff 100%);
    background:linear-gradient(to right, #f0eae5 0%, #f0eae5 50%, #fff 50%, #fff 100%);
}

.col-6 {
    padding-left: 0!important;
    padding-right: 0!important;
}

h2 {
    font-size: 80px!important;
    line-height: 40px!important;
    font-weight: bold!important;
}

.descript_strengths{
    margin: 40px auto;
	font-family: 'Noto Sans JP', sans-serif;
}
h2.title_main{
	line-height:57px !important;
}
/* .support_case_general img{
	width:100%;
} */
.support_case_left .pl-sm-5{
	padding-left:5rem !important;
}
#support_case_general{
	position:relative;
	margin:50px 0 103px;
	padding-bottom: 50px;
}
.support_case_left::before{
    content: '';
    background-color: #F0EAE5;
    height: 91%;
    width: 64%;
    position: absolute;
    right: 0;
    bottom: 0;
}
.support_case_right::before{
	content: '';
    background-color: #F0EAE5;
    height: 95%;
    width: 64%;
    position: absolute;
    left: 0;
    bottom: 0;
}
.list_suportcase {
    list-style: none;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
	margin:0 auto;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.content_tab_case{
	margin-bottom:90px;
}
#img_margin{
	margin-bottom:100px;
}
.list_suportcase li {
	background: #0d364c;
    color: #fff;
    margin: 0 10px;
    width:31.5%;
    line-height: 23px;
	margin-bottom:20px;
	transition:all 0.4s ease;
}

.list_suportcase li a{
	color:#fff;
	transition:all 0.4s ease;
    padding: 15px 30px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center; 
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
}
.list_suportcase li:hover a{
	opacity:0.5;
	text-decoration:none;
}
.cat-block1 {
    position: relative;
    display: inline-block;
    width: 55%;
}

.cat-block2 {
    display: inline-block;
    width: 25%;
    padding-left: 2%;
    position: relative;
}

.cat-block2 p {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
	line-height:2;
	font-family: 'Noto Sans JP', sans-serif;
}
.fontsize .font-1{
	line-height:2;
}
.cat-img {
    width:100%;
    height: 15vw;
    object-fit: cover;
}

.cat-ttl {
    position: absolute;
    top: 10%;
    right: 5%;
    font-size: 33px;
    color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

.str_block {
    position: relative;
}

.str_block img {
    width: 100%;
    height: auto;
}

.str_no {
    position: absolute;
    background: #D8BB46;
    color: #fff;
    font-size: 40px;
    width: 60px;
    height: 50px;
    line-height: 40px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-style: italic;
    font-weight: 600;
    text-align: center;
}

.str_ttl1 {
    font-size: 18px;
    color: #fff;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
	font-family: 'Noto Sans JP', sans-serif;

}

.str_ttl2 {
    font-size: 15px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
	font-family: 'Noto Sans JP', sans-serif;

}

.ttl-case {
    font-size: 24px;
    margin-bottom: 0;
    color: #0d364c;
    margin-left: 30px;
    position: relative;
	font-family: 'Noto Sans JP', sans-serif;
}

.ttl-case:before {
    font-size: 24px;
    color: #0d364c;
    position: absolute;
    content: "━";
    left: -40px;
}

.ttl-case-sub {
    color: #0d364c;
    margin-bottom: 0;
    margin-left: 30px;
	font-family: 'Noto Sans JP', sans-serif;
}

.ttl-sub {
    display: inline-block;
    padding: 0 15px;
    font-size: 22px;
    font-style: italic;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-top: 61px;
	margin-bottom: 31px;
}

.img-block {
    display: inline-block;
    width: 50%;
}

.text-block {
    display: inline-block;
    width: 50%;
}

.sp {
    display: none;
}
.top-block{
	margin:100px 0 40px 0;
}
.support_case_right .pr-sm-5{
	padding-left:5rem;
}

.img_small {
	width: 540px;
	height: 406px;
	object-fit: cover;
}

.img_large {
	width: 1110px;
	height: 481px;
	object-fit: cover;
}
@media only screen and (max-width: 1600px) and (min-width: 1000px){
	.support_case_general img{
		width:100%;
	}
	.support_case_right .pr-sm-5{
	padding-left:15px;
}
	.support_case_left .pl-sm-5{
		padding-left:15px !important;
	}
    .list_suportcase {
        margin-bottom: 0;
    }
	.list_suportcase li{
		 margin: 0px 15px 20px 15px;
    	width: 29.5%;
	}
	.cat-img{
		height:40vh;
	}
	.str_ttl1{
		font-size:16px;
	}
	.str_ttl2, #box-strengths .font-1{
		font-size:14px;
	}
	.cat-block1{
		margin-top:2rem;
	}
	.cat-block2 {
		display: inline-block;
		width: 30%;
		padding-left: 2%;
		position: relative;
		margin-top: 2rem;
	}

}
@media only screen and (max-width: 1200px) and (min-width: 1000px){
/* 	.list_suportcase{
		justify-content:center;
	} */
}
@media only screen and (max-width: 999px) and (min-width: 901px){
	.list_suportcase{
		margin-bottom:0;
		width:100%;
	}
	.list_suportcase{
		justify-content:flex-start;
	}
		.support_case_general img{
		width:100%;
	}

	.support_case_left .pl-sm-5, .support_case_right .pr-sm-5{
	padding-left:15px !important;
}
	
	.str_ttl2, #box-strengths .font-1{
		font-size: 10.5px;
	}
	.str_ttl1{
		font-size:12px;
		top:35%;
	}
	.list_suportcase li{
		margin: 0px 10px 20px 10px;
   	 	width: 30%;
	}

	.cat-block1{
		margin-top:2rem;
	}
	.cat-block2 {
		display: inline-block;
		width: 40%;
		padding-left: 2%;
		position: relative;
		margin-top: 2rem;
	}
	.cat-img{
		height:auto;
	}
	#support_case_general img{
		height:430px;
		object-fit:cover;
	}
}
@media only screen and (max-width: 900px) and (min-width: 751px){
	.list_suportcase{
		margin-bottom:0;
	}
	.supportcase{
		margin-top: 25px;
	}
	.support_case_general img{
		width:100%;
	}
	.support_case_left .pl-sm-5, .support_case_right .pr-sm-5{
	padding-left:15px !important;
}
	.top-block{
		margin-top:130px;
	}
	#support_case_general img{
		height:350px;
		object-fit:cover;
	}
	/* .descript_strengths{
		width:100%;
	} */
	#box-strengths, #box_main_supportcase .row{
		flex-direction:column;
	}
	.cat-block2 p{
		padding:0 20px;
	}
	#box-strengths .col-sm-4, 
	#box_main_supportcase .cat-block1,
	#box_main_supportcase .cat-block2, 
	#support_case_general .col-sm-6{
		max-width:100%;
		width:100%;
	}
	.list_suportcase li{
		margin: 10px 6px;
		width: 95%;
		line-height: normal;
	}
	.list_suportcase li a{
		font-size:15px;
	}
	.cat-img{
		height:auto;
	}
	.cat-block2 p{
		position:relative;
		transform:translateY(0%);
		margin-top:15px;
	}
	.cat-block1{
		margin-top:3.5rem;
	}
	.cat-ttl{
		font-size:24px;
	}
}
@media only screen and (max-width: 750px) and (min-width: 300px){
	.supportcase{
		background-size: cover;
		margin-top: 5px;
	}
	.list_suportcase{
		margin-bottom:0;
			width:100%;
	}
	.support_case_general img{
		width:100%;
	}
	.support_case_left .pl-sm-5, .support_case_right .pr-sm-5{
	padding-left:15px !important;
}
	#box-strengths .col-sm-4{
		padding:0 15px 10px 15px;
	}
	#support_case_general img{
		height:240px;
		object-fit:cover;
	}
	.descript_strengths{
		/* width:100%; */
		padding:0 15px;
        margin: 30px auto;
	}
    .str_block {
        margin-top: 1rem;
    }
	#box-strengths, #box_main_supportcase .row{
		flex-direction:column;
	}
	#box-strengths .col-sm-4, 
	#box_main_supportcase .cat-block1,
	#box_main_supportcase .cat-block2, 
	#support_case_general .col-sm-6{
		max-width:100%;
		width:100%;
	}
    h2.title_main{
        margin: auto;
    }    
	.list_suportcase{
	    flex-direction: column;
	}
	.list_suportcase li{
		margin: 10px 6px;
		width: 95%;
		line-height: normal;
	}
	.list_suportcase li a{
	    height: 70px;
		font-size:14px;
	}
	.cat-img{
		height:auto;
	}
	.cat-block2 p{
		position:relative;
		transform:translateY(0%);
		margin-top:15px;
	}
	.cat-block2{
		padding-left:30px;
		padding-right:30px;
	}
	.cat-ttl{
		font-size:24px;
		top: 50%;
		left: 50%;
		right: auto;
		transform: translate(-50%,-50%);
	}
	.cat-block1{
		margin-top: 58px;
    	margin-bottom: 15px;
	}
}
@media screen and (max-width:575px) { 
    h2 {
        font-size: 60px!important;
    }

    .ttl-case {
        line-height: normal;
    }
    
    .ttl-case:before {
        left: -30px;
    }
    
    .ttl-case-sub {
        margin-bottom: 1rem;
    }

    .produce_block {
        padding-top: 2.5rem;
    }
    .support_case_left::before{
        height: 101%;
    }
    .support_case_right::before{
        height: 101%;
    }
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }
}