@charset "utf-8";
/* CSS Document */
	body {
font-family:YakuHanJP_Narrow, "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
font-optical-sizing: auto;
font-weight: normal;
font-style: normal;
background-image: url("../img/body_bg.jpg");
background-size: auto;
background-position: top center;
background-repeat: no-repeat;
}

.bg-primary{
background-color: #00c1c2 !important;
}

.bg-success{
background-color: #e9f75f !important;
}

#header{
box-shadow: 0 0 15px gray;
position: sticky;
top: 0;
z-index: 1000;
}
@media (min-width: 801px){
#header .container{
padding: 0px;
}
}

#header .navbar{
padding: 0px;
background-image: url("../img/nav_bg.png");
background-size: contain;
background-repeat: repeat-x;
}

#header .navbar-brand{
width: 160px;
padding: 15px 0px;
font-size: 100%;
}

#header .navbar-brand img{
margin-right: 15px;
vertical-align:middle;
}

#header .navbar-collapse{
background-color: rgba(206,213,221,0.15);
min-height: 85px;
max-width: 540px;
padding: 0px;
}

#header .btn-primary{
padding: 7px 25px;
font-weight: 600;
background-color: #00c1c2;
box-shadow: 0 0 7px rgba(0,216,219,0.5);
border: 0px;
}

#header .nav-item{
padding: 0px 10px;
font-size: 105%;
font-weight: 500;
}

#header .nav-item.bdr{
border-right: 1px solid #999999;
}

#hero h1{
font-weight: 700;
}

#hero h1 span{
color: #00c1c2 !important;
}

#hero a{
display: inline-block;
width: 100%;
max-width: 300px;
background-color: #00c1c2 !important;
border-radius: 40px;
box-shadow: 0 0 7px rgba(0,216,219,0.5);
}
#hero .logos{
width: 60%;
margin: 60px auto 70px;
}

#hero .logos img{
margin-bottom: 60px;
}

#problem{
background-image: url("../img/bg_problem.jpg");
background-size: cover;
background-position: center;
border-radius: 40px 40px 0px 0px;
}

.proble-label{
width: 30%;
min-width: 300px;
border: 5px solid #000;
background-color: #e9f75f;
border-radius: 40px;
text-align: center;
padding: 10px;
margin: auto;
position: relative;
margin-top: -70px;
margin-bottom: 20px;
z-index: 2;
font-weight: 700 !important;
}

.proble-label span{
color: #db5200;
}

#problem .h1{
font-weight: 600 !important;
}

#problem .h1 span{
color: #e9f75f;
}

.problem-box{
border-radius: 20px;
background-color: #fff;
margin-bottom: 30px;
padding: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: left;
}

.problem-box p{
margin-bottom: 0px;
margin-left: 80px;
font-weight: bold;
}

.problem-box p span{
color: #db5200;
}

#feature{
background-image: url("../img/bg_feature.jpg");
background-size: cover;
background-position:top center;
border-radius: 0px 0px 40px 40px;
}

#charm{
background-image: url("../img/bg_charm.jpg");
background-size: cover;
background-position:top center;
}

#service .h1 span{
color: #db5200;

}

.charm-box{
background-color: #fff;
border-radius: 20px;
box-shadow: 0 0 7px rgba(0,216,219,0.5);
}

.charm-box .charm-box-img{
background-color: #e9f75f;
width: 25%;
min-height: 200px;
padding: 15px;
}

.charm-box .charm-box-img.float-start{
border-radius: 20px 0px 0px 20px;
}

.charm-box .charm-box-img.float-end{
border-radius: 0px 20px 20px 0px;
}

.charm-box .charm-box-text{
width: 75%;
padding: 35px;
}

.charm-box .charm-box-text .h3{
color: #13d3d5;
}
#plans .h1,#case .h1,#about .h1{
border-left: 15px solid #13d3d5;
padding-left: 15px;
}
		  
#plans .h1 span{
font-size: 60% !important;
color: #f36d00 !important;
border-bottom: 2px solid #13d3d5;
display: inline-block;
margin: 0px 20px;
padding: 5px 0px;
} 

#case .case-box{
background-color: #fff;
border-radius: 20px;
box-shadow: 0 0 7px rgba(0,216,219,0.5);
overflow: hidden;
}

#case .case-heading{
background-color: #00c1c2;
color: #fff;
padding: 30px 35px;
}

#case .case-company{
font-weight: 700;
font-size: 170%;
line-height: 1.4;
color: #e9f75f;
}

#case .case-lead{
font-size: 115%;
line-height: 1.6;
margin-top: 5px;
}

#case .case-panels{
display: block;
}

#case .case-panel{
width: 100%;
padding: 35px;
}

#case .case-panel-after{
background-color: rgba(233,247,95,0.15);
border-top: 1px solid rgba(0,193,194,0.25);
}

#case .case-label{
display: inline-block;
min-width: 110px;
background-color: #e9f75f;

border-radius: 40px;
padding: 6px 18px;
text-align: center;
font-weight: 700;
font-size: 120%;
margin-bottom: 20px;
}

#case .case-label-before{
background-color: #666;
color: #fff;
}

#case .case-label-after{
background-color: coral;
color: #fff;
}

#case .case-primary-text{
color: #00c1c2;
}

#case ul{
padding-left: 1.3em;
margin-bottom: 0px;
}

#case li{
font-size: 115%;
line-height: 1.8;
margin-bottom: 12px;
}

#case .case-panel-after strong{
display: inline-block;
background-color: #e9f75f;
padding: 3px;
margin-left: 5px;
}

#case .case-result{
background-color: #f5f5f5;
padding: 25px 35px;
font-size: 130%;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
text-align: left;
}

#case .case-result span{
color: #0d0d0d;
font-size: 150%;
line-height: 1.4;
margin-right: 0px;
}

#case .case-result-arrow{
width: 78px;
min-width: 78px;
height: auto;
fill: #f36d00;
}

#footer{
	background-color: #f1f1f1;
	padding: 20px 0px;
	font-size: 70%;
	text-align: center;
	color: #0d0d0d;margin-top: 30px;
}

#footer img{
	width: 60%;
	max-width: 200px;
	margin-bottom: 10px;
}

@media (max-width: 1400px){
#problem{
background-image: url("../img/bg_problem.jpg");
background-size: cover;
background-position: center;
border-radius:0px;
font-size: 90% !important;
}

#problem .h4{
font-size: 130% !important;
} 
#problem .h1{
font-size: 160% !important;
} 

#problem .row{
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}  

#problem .fs-4{
font-size: 130% !important;
} 

#feature{
border-radius: 0px ;
}

.problem-box{
min-height: 120px;
}	  

.problem-box p{
margin-left: 60px;
}	  

.problem-box p br{
display: none;
}
}

@media (max-width: 800px){



#header .navbar-brand{
font-size: 0px;
}
#hero .row{
padding: 0px;
}

#hero .container{
margin: 0px !important;
}

#hero .row .col-12.col-lg-7{
margin: 0px 0px 50px;
padding: 0px;
}

#hero h1{
font-size: 140%;

}

#hero .logos{
font-size: 140%;
margin-top: 40px;
margin-bottom: 0px;
padding: 0px;
width: 80%;
}

#hero .logos img{
margin-bottom: 50px;
}
#hero .logos .p-2{
margin-top: 0px !important;
}

#problem{
background-image: url("../img/bg_problem.jpg");
background-size: cover;
background-position: center;
border-radius:0px;
font-size: 90% !important;
}

#problem .h4{
font-size: 130% !important;
} 
#problem .h1{
font-size: 160% !important;
} 

#problem .row{
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}  

#problem .fs-4{
font-size: 130% !important;
} 

#feature{
border-radius: 0px ;
}

.problem-box{
min-height: 120px;
}	  

.problem-box p{
margin-left: 60px;
}	  

.problem-box p br{
display: none;
}
#service .h1{
font-size: 150%;

}

#case .h1{
font-size: 150%;
}

#case .case-company{
font-size: 130%;
}

#case .case-panels{
display: block;
}

#case .case-panel{
width: 100%;
padding: 25px;
}

#case .case-label{
font-size: 110%;
margin-bottom: 15px;
}

#case li{
font-size: 100%;
line-height: 1.7;
}

#case .case-result{
padding: 25px;
font-size: 110%;
line-height: 1.7;
justify-content: flex-start;
gap: 15px;
}

#case .case-result span{
margin-right: 0px;
font-size: 125%;
}

#case .case-result-arrow{
width: 52px;
min-width: 52px;
}

#service .py-5{
padding-top: 10px !important;
padding-bottom: 10px !important;
}

#service .fs-4{
font-size: 100% !important;
}
#charm .h1{
font-size: 150% !important;
}

#charm .h3{
font-size: 130% !important;
}  

#charm .h3{
font-size: 130% !important;
}   
#charm .fs-4{
font-size: 100% !important;
} 

.charm-box .float-end ,.charm-box .float-start{
float: none !important;
} 
.charm-box .charm-box-img{
width: 60%;
border-radius: 20px !important;
min-height: 100px;
position: relative;
top: -20px;
margin-left: auto;
margin-right: auto;
}

.charm-box .charm-box-text{
width: 100%;
} 



}