@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&display=swap");

@charset "UTF-8";

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
.lp_footer,
.lp_header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 40px;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  color: #222;
}

li {
  list-style: none;
}

img {
  width: auto;
  height: auto;
  max-width: 100%;
  vertical-align: top;
}

a {
  transition: 0.3s;
  text-decoration: none;
}

a:hover {
  transition: 0.3s;
  opacity: 0.8;
}

.lp_header {
  padding: 22px;
  text-align: center;
}

.sp_view {
  display: none;
}

@media screen and (max-width: 767px) {
  .lp_header {
    padding: 15px;
  }

  .lp_header a {
    width: 70%;
    display: block;
    margin: 0 auto;
  }

  .pc_view {
    display: none;
  }

  .sp_view {
    display: block;
  }
}

/***mv***/

.mv {
  padding: 40px;
  background: url(../img/mv_back.png)no-repeat;
  background-size: cover;
  background-position-x: center;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .mv {
    padding: 0;
    background: url(../img/mv_back_sp.png)no-repeat;
    background-size: cover;
    background-position-x: center;
  }
}

/***item-link***/

.item-link {
  padding: 75px 40px;
  text-align: center;
}

.item-link .item-link_title {
  position: relative;
  max-width: fit-content;
  margin: 0 auto 40px;
}

.item-link h2 {
  font-size: 28px;
  font-weight: 700;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
}

.item-link ul {
  max-width: 852px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.item-link .price_list {
  margin-bottom: 75px;
}

.item-link .price_list li {
  width: calc(25% - 25px * 3 / 4);
}

.item-link .problem_list li {
  width: calc(33.33% - 25px * 2 / 3);
}


@media screen and (max-width: 767px) {
  .item-link {
    padding: 50px 20px;
  }

  .item-link ul {
    gap: 20px;
  }

  .item-link .price_list li,
  .item-link .problem_list li {
    width: calc(50% - 20px * 1 / 2);
  }
}


/***item***/

.item {
  background: url(../img/item_back.jpg) repeat-y;
  background-size: contain;
  padding: 82px 40px;
}

.item .item_wrap {
  max-width: 800px;
  margin: 82px auto 0;
  background: #ffffff;
  border-radius: 50px 50px 28px 28px;
  padding-bottom: 38px;
}

.item .item_wrap:first-child {
  margin: 0 auto;
}

.item .item_box {
  display: flex;
  justify-content: center;
  gap: 17px;
  padding: 38px;
}

.item .twoitem::after,
.item .twoitem::before {
  content: '';
  width: 50%;
}

.item .item_more {
  color: #FC204E;
  font-weight: 800;
  text-align: center;
  margin: 0 auto;
  padding: 12px;
  border: 4px solid #FC204E;
  border-radius: 100px;
  max-width: 324px;
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.item .item_more span {
  position: relative;
}

.item .item_more span::after {
  content: url(../img/arrow_icon.png);
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 3px;
  padding-left: 10px;
}

@media screen and (max-width: 767px) {
  .item {
    padding: 70px 20px;
  }

  .item .item_wrap {
    margin: 50px auto 0;
  }

  .item .item_box {
    flex-flow: column;
    padding: 38px 28px;
  }

  .item .item_more {
    max-width: 80%;
  }
}


/***.lp_footer***/
.lp_footer .bnr {
  margin: 50px auto 0;
  max-width: 800px;
  padding: 0 40px;
  box-sizing: content-box;
}

.lp_footer .bnr li {
  margin-bottom: 20px;
  text-align: center;
}

.lp_footer .bnrArea {
  max-width: 800px;
  margin: 100px auto 0;
  padding: 0 40px;
  box-sizing: content-box;
}

.lp_footer .footerBottom {
  margin-top: 50px;
  padding-bottom: 25px;
  border-top: 1px solid #222;
}

.lp_footer .footerBottom small {
  font-size: 14px;
  display: block;
  margin-top: 20px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .lp_footer .bnr {
    padding: 0;
  }

  .lp_footer .bnr li img {
    width: 90%;
  }

  .lp_footer .bnrArea {
    width: 90%;
    margin: 4vh auto 0;
    padding: 0;
  }

  .lp_footer .footerBottom {
    margin-top: 3vh;
    padding-bottom: 2vh;
  }

  .lp_footer .footerBottom small {
    font-size: 0.75rem;
    margin-top: 2vh;
  }
}