@charset "utf-8";

:root{
    --color_green:#00a484;
    --color_purple:#6c5ce7;
    --color_green_pale:#dffff9;
    --color_purple_pale:#efedfc;
    --color_blue: #0984e3;
    --color_blue_dark: #064575;
    --color_main:#848e99;
    --color_dark:#4c535b;
    --color_gray:#949494;
    --color_light:#e5e7e9;
    --color_gray_pale:#f0f0f0;
    --color_gradient:linear-gradient(60deg, #00144f, #2143ff 25%, #05C7F2 103.47%);
    --size_gap: 32px;
    --size_gap_half:16px;
    --size_gap_section:128px;
    --size_radius: 10px;
    --size_radius_half: 5px;
}


/* main_visual */
.main_visual{
    padding: var(--size_gap_section) 0;
    background-color: var(--color_gray_pale);
}
.main_visual h1{
    font-size: 3rem;
    line-height: 1.3;
    text-align: center;
    margin-bottom: var(--size_gap);
}
.main_visual .main_text{
    font-size: 1.3rem;
    text-align: center;
    line-height: 1.5;
}
.main_visual .main_img{
    display: flex;
    justify-content: center;
    margin-bottom: var(--size_gap);
}
.plan{
    display: flex;
    justify-content: center;
    gap: var(--size_gap);
}
.plan_item{
    border-radius: var(--size_radius);
    background-color: #fff;
    width: 33%;
}
.plan_item.g{
    border: solid 1px var(--color_green);
}
.plan_item.p{
    border: solid 1px var(--color_purple);
}
.plan_item__title{
    padding: var(--size_gap_half);
}
.plan_item__title.g{
    color: var(--color_green);
}
.plan_item__title.p{
    color: var(--color_purple);
}
.plan_item__title p{
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
}
.plan_item__price{
    text-align: center;
    padding: var(--size_gap);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color_gray_pale);

}
.plan_item__price.g{
    /* color: var(--color_green); */
    background-color: var(--color_green_pale);
}
.plan_item__price.p{
    /* color: var(--color_purple); */
    background-color: var(--color_purple_pale);
}
.plan_item__price__cap{
    font-size: 1.1rem;
}
.plan_item__price__point{
    background-color: #fff;
    border-radius: var(--size_gap_half);
    padding: 5px;
    width: fit-content;
    font-size: 0.8rem;
    padding: 0 10px;
    margin: var(--size_gap_half) 0;
}
.plan_item__price__price{
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
}
.plan_item__price__price.g{
    color: var(--color_green);
}
.plan_item__price__price.p{
    color: var(--color_purple);
}

.plan_item__price__price span{
    font-size: 0.8rem;
}
.plan_item__price__sub{
    font-size: .9rem;
    margin-top: 5px;
}
.plan_item__price__sub.mb{
    margin-bottom: 10px;
}

.plan_item__list{
    padding: var(--size_gap);
}
.plan_item__list li{
    list-style: disc;
    list-style-position: inside;
    padding: 2px;
}
.plan_item__list li span.g{
    color: var(--color_green);
}
.plan_item__list li span.p{
    color: var(--color_purple);
}

.plan_company{
    padding: var(--size_gap);
    width: fit-content;
    margin: 0 auto;
}
.plan_company__item{
    display: flex;
    align-items: center;
    border-radius: var(--size_radius);
    border: solid 1px var(--color_blue);
    padding: var(--size_gap) 0;
    gap: var(--size_gap);
    background-color: #fff;
    flex-direction: column;
}
.plan_company__item_title{
    color: var(--color_blue);
}
.plan_company__item_title p{
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}
.plan_company__item_title span{
    font-size: 0.8rem;
}
.plan_company__item_text{
    /* border-left: solid 1px var(--color_blue); */
    padding: 0 32px;
}
.plan_company__item_text p{
    padding-bottom: var(--size_gap_half);
    font-weight: bold;
    font-size: 1.2rem;
}
.plan_company__item_text .inquiry{
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    background-color: var(--color_blue);
    margin-bottom: var(--size_gap_half);
    transition: all .2s;
}
.plan_company__item_text .inquiry:hover{
    background-color: var(--color_blue_dark);
    transition: all .2s;
}
.dli-check {
  display: inline-block;
  vertical-align: middle;
  color: var(--color_blue);
  line-height: 1;
  width: 1em;
  height: 0.45em;
  border: 0.1em solid currentColor;
  border-top: 0;
  border-right: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(-45deg);
margin-right: 8px;
}

.banner_normal_plan{
    padding: var(--size_gap);
    display: flex;
    justify-content: center;
}
.banner_normal_plan a{
    padding: var(--size_gap);
    border:solid 1px #00aee6;
    color: #00aee6;
    font-size: 2rem;
    width: 100%;
    text-align: center;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:var(--size_gap_half);
    transition: 0.2s;
}
.banner_normal_plan span{
    font-size: 1.8rem;
}
.banner_normal_plan a:hover{
    background-color:#d9f3fc;
    transition: 0.2s;
}

.inquiry{
    padding: var(--size_gap);
    display: flex;
    justify-content: center;
}
.btn_inquiry{
    background-color: var(--color_blue);
    color: #fff;
    font-size: 1.6rem;
    padding: var(--size_gap) var(--size_gap_section);
    border-radius: 50px;
    transition: 0.2s;
    cursor: pointer;
}
.btn_inquiry a{
    color: #fff;
}
.btn_inquiry:hover{
    background-color: var(--color_blue_dark);
    transition: 0.2s;
}

@media only screen and (max-width:600px) {
.main_visual h1{
    font-size: 2rem;
}
.main_visual .main_text{
    margin-bottom: var(--size_gap_half);
}
.main_visual .main_img img{
    width: 100%;
}
.plan{
    flex-direction: column;
}
.plan_company__item{
    flex-direction: column;
}
.plan_company__item_text {
    border-left: none;
    padding-left: 0;
}
.btn_inquiry{
    padding: var(--size_gap);
}
.banner_normal_plan a{
    flex-direction: column;
}
.banner_normal_plan a p{
    line-height: 1;
    font-size: 1.4rem;
}
.banner_normal_plan a p span{
    font-size: 1.4rem;
}
}
@media only screen and (max-width:1024px) {
}




/* reasonable */
.reasonable{
    padding: var(--size_gap_section) 0;
}
.reasonable h1{
    font-size: 2.4rem;
    line-height: 1.3;
    text-align: center;
    margin-bottom: var(--size_gap);
    font-weight: normal;
    margin-bottom: var(--size_gap);
}
.reasonable .main_text{
    font-size: 1.2rem;
    text-align: center;
    line-height: 1.5;
    margin-bottom: var(--size_gap);
}
.reasonable .main_img{
    display: flex;
    justify-content: center;
    margin-bottom: var(--size_gap);
}
@media only screen and (max-width:600px) {
.reasonable h1{
    font-size: 2rem;
}
.reasonable .main_img img{
    width: 100%;
}
}

/* various */
.various{
    padding: var(--size_gap_section) 0;
    background-color: var(--color_gray_pale);
}
.various h1{
    font-size: 2.4rem;
    line-height: 1.3;
    text-align: center;
    margin-bottom: var(--size_gap);
    font-weight: normal;
}
.various .main_text{
    font-size: 1.2rem;
    text-align: center;
    line-height: 1.5;
    margin-bottom: var(--size_gap);
}

.various_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px var(--size_gap);
    margin-bottom: var(--size_gap);
}
.various_list_item{
    width: 31%;
    text-align: center;
}
.various_list_item > img{
    width: 100%;
    border-radius: var(--size_radius);
    margin-bottom: var(--size_gap_half);
}
.various_list_item__head{
    font-size: 1.5rem;
    margin-bottom: 10px;
}

@media only screen and (max-width:600px) {
.various h1{
    font-size: 2rem;
}
.reasonable .main_img img{
    width: 100%;
}
.various_list{
    flex-direction: column;
}
.various_list_item{
    width: 100%;
}

}


@media only screen and (max-width:600px) {
.header_wrapper .inlineBlock{
    display: flex;
}
.f_tel{
    padding-left: 132px;
    padding-top: 17px;
}
.f_contact{
    padding-left: 132px;
    padding-top: 17px;
}
}