@charset "UTF-8";

/*common*/
body{
font-family: 'Noto Sans JP', sans-serif;
}
.pc {
display: none;
}
.sp {
display: block;
}
body {
overflow: hidden;
line-height:1.6;
font-size: 16px;
}
img {
width: 100%;
}
.hover-opacity {
transition-property: opacity;
transition-duration: 0.5s;
}
.hover-opacity:hover {
opacity: 0.7; 
}
.sp-btn-none {
display: none;
}
.outfit-font {
font-family: "Outfit", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}
.outfit-font-bold {
font-family: "Outfit", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
}


/*header*/
header{
width: 100%;
height: 50px;
background: #fff;
}
header .logo img {
width: 250px;
margin: 12px auto auto auto;
display: block;
}
.tel-btn a{
width:270px;
height:52px;
margin-right: 10px;
border-radius:30px;
display: block;
text-align: center;
border: #FA6225 2px solid;
padding-top: 1px;
background: #fff;
}
.conv-btn a{
width:270px;
height:52px;
margin-right: 10px;
border-radius:30px;
display: block;
text-align: center;
background: #FA6225;
padding-top: 8px;
}
.tel-btn img{
width: 182px;
}
.conv-btn img{
width: 213px;
}


/*MV*/
.mv-box{
max-width: 1440px;
margin: auto;
position: relative;
}
.mv-tel-btn a{
width:100%;
height:64px;
margin-right: 10px;
border-radius:35px;
display: block;
text-align: center;
border: #FA6225 2px solid;
padding-top: 6px;
background: #fff;
}
.mv-conv-btn a{
width:100%;
height:64px;
margin-right: 10px;
border-radius:35px;
display: block;
text-align: center;
background: #FA6225;
padding-top: 13px;
margin-bottom: 10px;
}
.mv-tel-btn img{
width: 182px;
}
.mv-conv-btn img{
width: 213px;
}
.sec-fv_front{
width: 90%;
margin: auto;
margin-bottom: 20px;
margin-top: -150px;
}

/*problem*/
.problem {
background: #F8F8F8;
padding: 30px 5%;
}
.problem .box {
max-width: 1100px;
margin: auto;
}
.problem .fukidashi-box{
background: #fff;
width: 100%;
border-radius:20px;
padding: 15px;
}
.problem .box .icon{
width: 90px;
margin: auto;
margin-bottom: 30px;
}
.problem h2{
max-width: 616px;
margin: auto;
margin-bottom: 30px;
}
.problem .fukidashi-box h3{
color: #045CD3;
text-align: center;
font-size: 18px;
margin-bottom: 10px;
}
.problem h3 span{
font-size: 23px;
}
.balloon-left {
position: relative;
margin-left: 30px;
padding: 10px 15px;
border: 1px solid #045cd3;
border-radius: 8px;
background-color: #ffffff;
}
.balloon-left:before {
content: "";
position: absolute;
top: 50%;
left: 0;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: transparent #045cd3 transparent transparent;
translate: -100% -50%;
}
.balloon-left:after {
content: "";
position: absolute;
top: 50%;
left: 0;
border-style: solid;
border-width: 17.6px 17.6px 0 0;
border-color: transparent #ffffff transparent transparent;
translate: -100% calc(-50% + 0.2px);
}
.flex-problem{
display: flex;
}
.flex-problem .problem-icon{
display: flex;
align-items: flex-start;
width: 60px;
max-width: 90px;
}
.flex-problem .balloon-left{
width: calc(100% - 60px);
display: flex;
}
.fukidashi-box{
margin-bottom: 15px;
}
.arrow{
width: 25px;
margin: auto;
margin-top: 50px;
margin-bottom: 30px;
}
.negative{
max-width: 815px;
margin: auto auto 40px auto;
}

/*case*/
.case {
max-width: 1100px;
margin: auto;
}
.case-box{
background: #E7E7E7;
width: 100%;
border-radius: 20px;
padding: 15px;
margin-bottom: 15px;
}
.case .img img {
margin-bottom: 15px;
}
.case .point {
width: 24px;
margin-right: 10px;
vertical-align: middle;
}
.case h3 {
font-size: 20px;
margin-bottom: 15px;
}
.case .txt span {
background:linear-gradient(transparent 70%, #FFED84 0%);
font-weight: 600;
}
.case .num{
margin-bottom: 5px;
}

/*solution*/
.solution{
background-image: url("../images/Rectangle.png");
background-repeat: repeat;
padding: 30px;
display: flex;
justify-content: center;
}
.solution img{
margin-left: 35px;
}



/*merit*/
.merit h2{
font-size: 20px;
text-align: center;
font-weight: 600;
margin-bottom: 30px;
}
.merit h2 span{
font-size: 25px;
color:#045cd3;
}
.merit-bg{
background: #E6F1FF;
padding: 30px 5%;
}
.merit {
max-width: 1100px;
margin: auto;
}
.merit .s-ora{
font-size: 18px!important;
color: #FA6225 !important;
}
.merit .lead{
text-align: center;
margin-bottom: 30px;
}
.merit .catch{
text-align: center;
font-weight: bold;
font-size: 20px;
margin-bottom: 30px;
}
.merit .l-blue{
font-size: 28px;
color:#045cd3;
}
.merit .l-orange{
font-size: 26px;
color:#FA6225;
}
.merit .m-orange{
color:#FA6225;
}
.arrow-merit{
width: 25px;
margin: auto;
margin-top: 25px;
margin-bottom: 25px;
}
table.kikoe-table, .kikoe-table td, .kikoe-table th {
border: 1px solid #ccc;
border-collapse: collapse;
font-size: 14px;
text-align: center;
background: #fff;
font-weight: bold;
padding: 10px;
}
table.kikoe-table {
width: 100%;
min-width: 1000px;
}
table.kikoe-table th {
background: #F4F4F5;
}

/*guarantee*/
.guarantee{
padding: 15px;
max-width: 910px;
margin: auto;
display: flex;
justify-content: center;
}

/*health-box*/
.health-box{
max-width: 1100px;
margin: auto;
padding: 15px;
}
.health-cont-box h3 {
color: #fff;
font-weight: bold;
text-align: center;
font-size: 18px;
display: block;
border-radius:50px;
padding: 8px;
margin-bottom: 10px;
}
.ora-tit{
background: #FA6225;
}
.gre-tit{
background: #19C230;
}
.blue-tit{
background: #045CD3;
}
.d-box{
padding: 10px;
border-radius:10px;
margin-bottom: 10px;
}
.orange .d-box{
background: #FFF9F2;
}
.green .d-box{
background-color: rgb(25 194 48 / 0.1);
}
.blue .d-box{
background: #ECF9FF;
}
.health-cont-box h4 {
text-align: center;
margin: 10px auto;
font-weight: bold;
font-size: 18px;
}
.orange h4 {
color: #FA6225;
}
.green h4 {
color: #19C230;
}
.blue h4 {
color: #045CD3;
}
.health-cont-box p {
font-weight: bold;
text-align: center;
padding: 1px 10px;
}

/*conv*/
.cont-conv{
background-image: url("../images/background.png");
background-size: cover;
padding: 30px;
}
.cont-conv-box {
max-width: 914px;
margin: auto;
}
.cont-conv-box .tit{
margin-bottom: 15px;
}
.cont-conv-box .bnr{
margin-left: 5%;
margin-bottom: 15px;
}
.cont-conv-btn a{
border: #FA6225 2px solid;
height: 52px;
border-radius:30px;
display: block;
text-align: center;
padding-top: 4px;
background: #fff;
box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.4);
width: 100%;
}
.cont-conv-btn .tel-btn a{
background: #FA6225;
height: 52px;
border-radius:30px;
display: block;
text-align: center;
padding-top: 10px;
margin-bottom: 15px;
box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.4);
width: 100%;
}
.cont-conv-btn .tel-btn img,.cont-conv-btn .conv-btn img{
width: 220px;
}


/*trial*/
.trial{
max-width: 1100px;
margin: auto;
padding: 25px 15px;
}
.trial h2 {
max-width: 645px;
margin: auto;
margin-bottom: 15px;
}
.trial .trial-box{
border-radius:20px;
border: 2px solid #045cd3;
padding: 10px;
background-image: url("../images/trial-dot.png");
background-repeat: repeat;
box-shadow: 7px 7px 0px 0px rgba(4, 92, 211, 1.0);
margin-bottom: 23px;
}
.trial h3 {
margin-bottom: 10px;
margin-top: 10px;
font-size: 18px;
text-align: center;
color: #045CD3;
}
.trial h3 span {
font-size: 24px;
color: #FA6225;
}

/*oticon*/
.oticon{
max-width: 1100px;
margin: auto;
padding: 25px 15px;
}
.oticon h2 {
font-size: 20px;
text-align: center;
margin-bottom: 10px;
}
.table-area {
width: 100%;
overflow-x: scroll;
}
table.oticon_table, .oticon_table td, .oticon_table th {
border: 1px solid #ccc;
border-collapse: collapse;
font-size: 14px;
}
table.oticon_table {
width: 100%;
min-width: 1000px;
}
.oticon_table .left {
text-align: left;
}
.oticon_table .center {
text-align: center;
}
.oticon_table th {
font-weight: bold;
background: none;
}
.oticon_table td, .oticon_table th {
/*width: 14.2%;*/
width: 12.5%;
padding: 1%;
vertical-align: middle;
}
.oticon_table tr:nth-of-type(1) th {
vertical-align: top;
}
.oticon_table tr th img {
margin-bottom: 5px;
}
.oticon .txt{
margin-top: 20px;
font-size: 14px;
}

/*flow*/
.flow{
background: #F4F4F5;
padding: 25px 15px;
}
.flow-box{
max-width: 1100px;
margin: auto;
}
.flow h2{
font-size: 20px;
text-align: center;
margin-bottom: 10px;
}
.flow h2 span{
color: #045cd3;
}
.flow-cont .tit-img img{
height: 60px;
width: auto;
margin: auto;
display: block;
margin-bottom: 10px;
}
.flow h3{
font-size: 20px;
text-align: center;
}
.flow-cont-box {
background: #fff;
margin-top: 15px;
border-radius:20px;
padding: 15px;
}
.step-box {
display: flex;
align-items: start;
gap: 8px;
margin-top: 10px;
}
.step-box .step-icon {
width: 40px;
}
.step-box a {
text-decoration: underline;
}
.step-box a:hover {
text-decoration: none;
}

/*freeflow*/
.freeflow{
background-image: url("../images/Rectangle.png");
background-repeat: repeat;
padding: 25px 15px;
}
.freeflow-box{
max-width: 1100px;
margin: auto;
}
.freeflow h2{
font-size: 20px;
text-align: center;
margin-bottom: 10px;
}
.freeflow h2 span{
color: #045cd3;
}
.freeflow-cont-box{
border-radius:20px;
border: 2px solid #045cd3;
background: #fff;
padding: 15px;
margin-top: 15px;
}
.freeflow-cont-box .step-icon {
width: 70%;
margin: auto;
display: block;
}
.freeflow-cont-box h3 {
color: #045cd3;
font-size: 20px;
text-align: center;
margin-top: 10px;
}

/*form*/
.form{
background-image: url("../images/background-contact.png");
background-size: cover;
padding: 25px 15px;
}
.form-box{
max-width: 830px;
margin: auto;
}
.form h2{
font-size: 20px;
text-align: center;
margin-bottom: 10px;
color: #fff;
}
.form-cont-box{
background: #fff;
margin-top: 15px;
border-radius:20px;
padding: 15px;
}

/*faq*/
.faq{
background: #F4F4F5;
padding: 25px 15px;
}
.faq-box{
max-width: 1100px;
margin: auto;
}
.faq h2{
font-size: 20px;
text-align: center;
margin-bottom: 10px;
}
.fukidashi-faq {
position: relative;
display: block;
margin: auto;
padding: 15px 10px;
width: 70%;
max-width: 500px;
color: #555;
font-size: 16px;
background: #045CD3;
border-radius:10px;
}
.fukidashi-faq:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #045CD3;
}
.fukidashi-faq p {
color: #fff;
font-weight: bold;
text-align: center;
margin: 0;
padding: 0;
}

.qa-list dl {
margin-top: 10px;
position: relative;
padding: 10px;
cursor: pointer;
background: #fff;
border-radius:10px;
}

.qa-list dl::before {
position: absolute;
top: 15px;
right: 15px;
display: block;
width: 7px;
height: 7px;
margin: auto;
content: '';
transform: rotate(135deg);
border-top: 2px solid #045CD3;
border-right: 2px solid #045CD3;
}
.qa-list .open::before {
transform: rotate(-45deg);
}

.qa-list dl dt {
position: relative;
margin: 0;
padding: 0 20px 0 30px;
font-weight: bold;
}
.qa-list dl dt::before {
font-size: 22px;
line-height: 1;
position: absolute;
/*top: 3px;*/
left: 0;
display: block;
content: 'Q.';
color: #045CD3;
font-family: "Outfit", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
}
.qa-list dl dd::before {
font-size: 22px;
line-height: 1;
position: absolute;
top: 3px;
left: 2px;
display: block;
content: ' ';
font-weight: bold;
color: #045CD3;
}
.qa-list dl dd {
position: relative;
display: none;
height: auto;
margin: 10px 0 0;
padding: 0 20px 0 30px;
}
.qa-list dl dd p {
margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
margin-top: 0;
}
.qa-list{
margin-top: 30px;
}
.faq-box .mt{
margin-top: 25px;
}


/*footer*/
footer{
padding: 20px 15px 30px 15px;
}
footer img{
max-width: 350px;
width: 70%;
display: block;
margin: auto;
}