@charset "UTF-8";
/*
base-color
*/
/*
pinot-color
*/
/*
txt-color
*/
/*
brakepoint
*/
/*
main
*/
#main.common_content {
  padding-top: 75px; }
  @media screen and (max-width: 1060px) {
    #main.common_content {
      padding-top: 60px; } }

#content table th {
  width: 25%; }
  @media screen and (max-width: 768px) {
    #content table th {
      width: 100%;
      padding-bottom: 0; } }
@media screen and (max-width: 768px) {
  #content table td {
    border-bottom: 1px solid #ccc; } }

button,
input,
textarea {
  border: 1px solid #9CCBEA; }

input[type="text"],
input[type="tel"] {
  width: 95%; }

input#your-yosan {
  ime-mode: disabled; }

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: block;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  width: 260px;
  padding: 10px 0;
  background: #009CE5;
  border: 1px solid #009CE5;
  border-radius: 10px;
  margin: 0 auto 20px; }
  button:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover,
  input[type="reset"]:hover {
    color: #fff;
    background: #009CE5; }
  button:active,
  input[type="submit"]:active,
  input[type="button"]:active,
  input[type="reset"]:active {
    background: #009CE5; }

/*
topimage_pinot
*/
.topimage_pinot {
  position: relative;
  width: 100%;
  height: 43.9vw;
  min-height: 600px;
  background-image: url("../img/pinot_topimage.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  margin-bottom: 10px; }
  @media screen and (max-width: 768px) {
    .topimage_pinot {
      background-image: url("../img/pinot_topimage_sp.png");
      background-position: center bottom;
      height: 140vw;
      min-height: 525px;
      margin-bottom: 45px; } }
  .topimage_pinot h1 {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
    z-index: 1; }
    @media screen and (max-width: 768px) {
      .topimage_pinot h1 {
        width: 80.1%;
        min-width: 302px;
        margin-bottom: 15px; } }

.topimage_pinot_shosai {
  position: absolute;
  left: 8.4%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2; }
  @media screen and (max-width: 768px) {
    .topimage_pinot_shosai {
      width: 100%;
      top: clamp(25px, 8vw, 8vw);
      transform: none; } }

.read_pinot_top {
  position: relative;
  color: #fff;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.17em;
  margin: 0;
  text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
  z-index: 1; }
  @media screen and (max-width: 768px) {
    .read_pinot_top {
      font-size: 18px;
      line-height: 1.7; } }

h2 {
  margin-bottom: 95px; }
  @media screen and (max-width: 768px) {
    h2 {
      font-size: 20px;
      margin-bottom: 80px; } }
  h2::after {
    background: #006A88; }

.pinot01 {
  padding-bottom: 130px; }
  @media screen and (max-width: 768px) {
    .pinot01 {
      padding-bottom: 100px; } }

.pinot_title {
  text-align: center;
  margin-bottom: 35px; }
  @media screen and (max-width: 768px) {
    .pinot_title {
      margin-bottom: 40px; } }
  .pinot_title h3 {
    position: relative;
    display: inline-block;
    color: #006A88;
    font-size: 21px;
    font-weight: bold;
    letter-spacing: 0.03em;
    line-height: 1;
    margin: 0;
    padding: 0; }
    @media screen and (max-width: 768px) {
      .pinot_title h3 {
        font-size: 18px; } }
    .pinot_title h3::after {
      position: absolute;
      left: 50%;
      bottom: -5px;
      transform: translateX(-50%);
      width: calc(100% + 30px);
      height: 16px;
      content: "";
      background-color: #BEFC69;
      z-index: -1; }
      @media screen and (max-width: 768px) {
        .pinot_title h3::after {
          height: 12px;
          width: calc(100% + 20px); } }

.read_pinot {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: center;
  margin: 0 auto 60px; }
  @media screen and (max-width: 768px) {
    .read_pinot {
      font-size: 20px;
      margin: 0 auto 40px; } }

.pinot_iotlist {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 120px; }
  @media screen and (max-width: 768px) {
    .pinot_iotlist {
      padding-bottom: 60px; } }
  .pinot_iotlist li {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-gap: 10px 10px;
    width: 32.7%;
    height: 175px;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    overflow: hidden;
    text-decoration: none; }
    @media screen and (max-width: 768px) {
      .pinot_iotlist li {
        width: 49%;
        height: auto;
        font-size: clamp(12px, 2.5vw, 16px);
        padding: 25px 10px; } }
    .pinot_iotlist li:nth-child(1) {
      background-color: #006a88; }
    .pinot_iotlist li:nth-child(2) {
      background-color: rgba(0, 106, 136, 0.8); }
    .pinot_iotlist li:nth-child(3) {
      background-color: #006a88; }
      @media screen and (max-width: 768px) {
        .pinot_iotlist li:nth-child(3) {
          background-color: rgba(0, 106, 136, 0.8); } }
    .pinot_iotlist li:nth-child(4) {
      background-color: rgba(0, 106, 136, 0.8); }
      @media screen and (max-width: 768px) {
        .pinot_iotlist li:nth-child(4) {
          background-color: #006a88; } }
    .pinot_iotlist li:nth-child(5) {
      background-color: #006a88; }
    .pinot_iotlist li:nth-child(6) {
      background-color: rgba(0, 106, 136, 0.8); }

.pinot_title_iot {
  text-align: left;
  margin: 0 0 0 7%; }
  @media screen and (max-width: 768px) {
    .pinot_title_iot {
      margin: 0 0 30px;
      text-align: center; } }

.pinot_iot_img {
  width: 100%;
  max-width: 1064px;
  margin: 0; }
  @media screen and (max-width: 768px) {
    .pinot_iot_img {
      width: calc(95% + 40px);
      margin-left: -20px; } }

/*
pinot02
*/
.pinot02 {
  position: relative;
  background-color: #3EA3B8;
  padding: 190px 0 0; }
  @media screen and (max-width: 768px) {
    .pinot02 {
      padding: 120px 0 0; } }
  .pinot02::before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    border-color: rgba(255, 255, 255, 0);
    border-top-width: 46px;
    border-bottom-width: 46px;
    border-left-width: 56px;
    border-right-width: 56px;
    border-top-color: #fff; }
    @media screen and (max-width: 768px) {
      .pinot02::before {
        border-top-width: 26px;
        border-bottom-width: 26px;
        border-left-width: 36px;
        border-right-width: 36px; } }

.goteian_title {
  position: relative;
  display: inline-block;
  color: #fff;
  margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .goteian_title {
      display: block;
      margin-bottom: 40px; } }
  .goteian_title.goteian_title02 {
    display: block; }

.fukidashi {
  text-align: center;
  padding: 0 90px; }
  @media screen and (max-width: 768px) {
    .fukidashi {
      padding: 0; } }

.f_chigau {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  position: absolute;
  left: -80px;
  top: -120px;
  width: 145px;
  height: 145px;
  color: #006A88;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  content: "";
  border-radius: 50%;
  background-color: #BEFC69;
  text-align: center;
  letter-spacing: 0; }
  @media screen and (max-width: 768px) {
    .f_chigau {
      left: 0px;
      top: -90px;
      width: 80px;
      height: 80px;
      font-size: 13px; } }
  .f_chigau::before {
    position: absolute;
    top: 80%;
    left: 66%;
    width: 28px;
    height: 35px;
    content: "";
    background-image: url("../img/bg_chigau_lightgreen.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover; }
    @media screen and (max-width: 768px) {
      .f_chigau::before {
        top: 57%;
        left: 55%;
        z-index: -1; } }

.pinot_goteian {
  width: 100%;
  background-color: #fff;
  padding: 45px 40px;
  margin-bottom: 40px; }
  @media screen and (max-width: 768px) {
    .pinot_goteian {
      padding: 25px 20px; } }

.pinot_goteian_img {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 55px; }
  @media screen and (max-width: 768px) {
    .pinot_goteian_img {
      margin: 0 auto 25px; } }
  @media screen and (max-width: 768px) {
    .pinot_goteian_img img {
      width: 100%; } }
  .pinot_goteian_img.pinot_goteian_img02 {
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      .pinot_goteian_img.pinot_goteian_img02 {
        width: 37%; } }

.cap_goteian {
  font-size: 16px;
  line-height: 2;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .cap_goteian {
      text-align: left;
      font-size: 14px; } }
  .cap_goteian.cap_goteian02 {
    margin-bottom: 35px; }

.sarani {
  width: 100%;
  text-align: center;
  margin: 0 auto 45px; }
  @media screen and (max-width: 768px) {
    .sarani {
      margin: 0 auto 25px; } }
  .sarani figure {
    width: 100%;
    margin: 0 auto 25px; }
    @media screen and (max-width: 768px) {
      .sarani figure {
        margin: 0 auto 15px; } }
  .sarani p {
    color: #BEFC69;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.03em; }
    @media screen and (max-width: 768px) {
      .sarani p {
        font-size: 18px; } }

.logo_pinot_area {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 665px;
  text-align: center;
  background-image: url("../img/bg_logo_pinot.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 0 auto;
  padding: 0 20px; }
  @media screen and (max-width: 768px) {
    .logo_pinot_area {
      height: 400px; } }
  .logo_pinot_area::before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    border-color: rgba(62, 163, 184, 0);
    border-top-width: 46px;
    border-bottom-width: 46px;
    border-left-width: 56px;
    border-right-width: 56px;
    border-top-color: #3EA3B8; }
    @media screen and (max-width: 768px) {
      .logo_pinot_area::before {
        border-top-width: 26px;
        border-bottom-width: 26px;
        border-left-width: 36px;
        border-right-width: 36px; } }
  .logo_pinot_area .logo_pinot {
    margin: 0 auto 60px; }
    @media screen and (max-width: 768px) {
      .logo_pinot_area .logo_pinot {
        margin: 0 auto 30px; } }
  .logo_pinot_area p {
    display: block;
    width: 100%;
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-align: center;
    margin: 0; }
    @media screen and (max-width: 768px) {
      .logo_pinot_area p {
        font-size: 24px; } }

.pinot_img {
  background-color: #E5F9FD;
  padding: 65px;
  margin: 0 auto 40px; }
  @media screen and (max-width: 768px) {
    .pinot_img {
      padding: 25px;
      margin: 0 auto 25px; } }

/*
pinot_contact
*/
.pinot_contact {
  width: 100%;
  padding: 80px 20px;
  text-align: center;
  background-color: rgba(255, 233, 0, 0.5); }
  @media screen and (max-width: 768px) {
    .pinot_contact {
      padding: 50px 20px; } }

.read_pinot_contact01 {
  color: #E93600;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin: 0 auto 30px; }
  @media screen and (max-width: 768px) {
    .read_pinot_contact01 {
      font-size: 16px; } }
  .read_pinot_contact01 span {
    position: relative;
    display: inline-block;
    padding: 0 35px; }
    @media screen and (max-width: 768px) {
      .read_pinot_contact01 span {
        padding: 0 25px; } }
    .read_pinot_contact01 span::before, .read_pinot_contact01 span::after {
      position: absolute;
      top: 50%;
      width: 37px;
      height: 3px;
      background-color: #F39815;
      content: "";
      border-radius: 10px; }
      @media screen and (max-width: 768px) {
        .read_pinot_contact01 span::before, .read_pinot_contact01 span::after {
          width: 30px; } }
    .read_pinot_contact01 span::before {
      left: 0;
      transform: translateY(50%) rotate(60deg); }
    .read_pinot_contact01 span::after {
      right: 0;
      transform: translateY(50%) rotate(-60deg); }

.btn_pinot_contact {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 30px;
  border-radius: 40px; }
  @media screen and (max-width: 768px) {
    .btn_pinot_contact {
      border-radius: 33px; } }

.btn_pinot_contact::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #e93600 0%, #751b00 100%);
  content: "";
  z-index: 0;
  border-radius: 40px; }
  @media screen and (max-width: 768px) {
    .btn_pinot_contact::before {
      border-radius: 33px; } }

.btn_pinot_contact a {
  position: relative;
  display: block;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  padding: 20px;
  border-radius: 40px;
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.16);
  z-index: 2; }
  @media screen and (max-width: 768px) {
    .btn_pinot_contact a {
      font-size: 18px;
      border-radius: 33px; } }

.pinot_contact_tel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0 auto; }

.pinot_tel {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 29px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0 15px; }
  @media screen and (max-width: 768px) {
    .pinot_tel {
      font-size: 22px;
      padding: 2px 0;
      display: block;
      width: 100%; } }
  .pinot_tel small {
    display: inline-block;
    padding-bottom: 5px;
    font-size: 24px;
    letter-spacing: 0.04em; }
    @media screen and (max-width: 768px) {
      .pinot_tel small {
        font-size: 18px;
        padding-bottom: 0; } }

/*
pinot03
*/
.pinot03 {
  padding: 90px 0 0; }
  @media screen and (max-width: 768px) {
    .pinot03 {
      padding: 45px 0 0; } }

.read_phase {
  margin-bottom: 85px; }
  @media screen and (max-width: 768px) {
    .read_phase {
      margin-bottom: 40px; } }

#content .pp_shosai table {
  margin-bottom: 30px; }
  #content .pp_shosai table thead th {
    font-weight: 700;
    color: #2e8de0;
    background-color: rgba(46, 141, 224, 0.3);
    border-right: 1px solid #fff; }
    #content .pp_shosai table thead th:last-child {
      border-right: none; }
  #content .pp_shosai table th,
  #content .pp_shosai table td {
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    padding: 12px 10px; }
    @media screen and (max-width: 768px) {
      #content .pp_shosai table th,
      #content .pp_shosai table td {
        display: table-cell;
        width: auto;
        font-size: 12px;
        padding: 5px;
        vertical-align: middle; } }
  #content .pp_shosai table tbody tr:nth-child(even) td {
    background-color: #ECF1F5; }
  #content .pp_shosai table tbody td {
    border-right: 1px solid #DAE3EB; }
    #content .pp_shosai table tbody td:last-child {
      border-right: none; }
#content .pp {
  padding-bottom: 120px; }
  @media screen and (max-width: 768px) {
    #content .pp {
      padding-bottom: 60px; } }
  #content .pp.pp01 .pp_title {
    background-color: #2e8de0; }
  #content .pp.pp01 .read_pp {
    background-color: #d5e8f6; }
    #content .pp.pp01 .read_pp::before {
      border-color: rgba(213, 232, 246, 0);
      border-top-color: #d5e8f6; }
    #content .pp.pp01 .read_pp p.cap_pp {
      color: #2e8de0; }
  #content .pp.pp01 .pp_shosai {
    border: 3px solid #2e8de0; }
    #content .pp.pp01 .pp_shosai h5 {
      color: #2e8de0; }
  #content .pp.pp01 .pp_price {
    background-color: #2e8de0; }
  #content .pp.pp01 table thead th {
    color: #2e8de0;
    background-color: rgba(46, 141, 224, 0.3); }
  #content .pp.pp02 .pp_title {
    background-color: #2f95a6; }
  #content .pp.pp02 .read_pp {
    background-color: #d5eaed; }
    #content .pp.pp02 .read_pp::before {
      border-color: rgba(213, 234, 237, 0);
      border-top-color: #d5eaed; }
    #content .pp.pp02 .read_pp p.cap_pp {
      color: #2f95a6; }
  #content .pp.pp02 .pp_shosai {
    border: 3px solid #2f95a6; }
    #content .pp.pp02 .pp_shosai h5 {
      color: #2f95a6; }
  #content .pp.pp02 .pp_price {
    background-color: #2f95a6; }
  #content .pp.pp02 table thead th {
    color: #2f95a6;
    background-color: rgba(47, 149, 166, 0.3); }
  #content .pp.pp03 .pp_title {
    background-color: #8cb80e; }
  #content .pp.pp03 .read_pp {
    background-color: #e8f1ce; }
    #content .pp.pp03 .read_pp::before {
      border-color: rgba(232, 241, 206, 0);
      border-top-color: #e8f1ce; }
    #content .pp.pp03 .read_pp p.cap_pp {
      color: #8cb80e; }
  #content .pp.pp03 .pp_shosai {
    border: 3px solid #8cb80e; }
    #content .pp.pp03 .pp_shosai h5 {
      color: #8cb80e; }
  #content .pp.pp03 .pp_price {
    background-color: #8cb80e; }
  #content .pp.pp03 table thead th {
    color: #8cb80e;
    background-color: rgba(140, 184, 14, 0.3); }
  #content .pp.pp04 .pp_title {
    background-color: #f49911; }
  #content .pp.pp04 .read_pp {
    background-color: #fcebcf; }
    #content .pp.pp04 .read_pp::before {
      border-color: rgba(252, 235, 207, 0);
      border-top-color: #fcebcf; }
    #content .pp.pp04 .read_pp p.cap_pp {
      color: #f49911; }
  #content .pp.pp04 .pp_shosai {
    border: 3px solid #f49911; }
    #content .pp.pp04 .pp_shosai h5 {
      color: #f49911; }
  #content .pp.pp04 .pp_price {
    background-color: #f49911; }
  #content .pp.pp04 table thead th {
    color: #f49911;
    background-color: rgba(244, 153, 17, 0.3); }

.pp_title,
.pcs_title {
  width: 100%;
  padding: 25px 20px; }
  .pp_title h4,
  .pcs_title h4 {
    display: flex;
    align-items: center;
    color: #fff;
    width: 100%;
    max-width: 860px;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      .pp_title h4,
      .pcs_title h4 {
        display: block; } }

.pcs_title {
  width: calc(100% + 90px);
  transform: translateX(-45px);
  background-color: #006a88;
  padding: 20px;
  margin-bottom: 45px; }
  @media screen and (max-width: 768px) {
    .pcs_title {
      width: calc(100% + 40px);
      transform: translateX(-20px);
      margin-bottom: 30px; } }
  .pcs_title h4 {
    padding-left: 40px; }
    @media screen and (max-width: 768px) {
      .pcs_title h4 {
        padding: 0 20px;
        transform: translateX(-20px); } }
    .pcs_title h4 .pp_title_txt {
      font-size: 24px; }

.pp_no {
  position: relative;
  display: inline-block;
  width: 115px;
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.02em; }
  @media screen and (max-width: 768px) {
    .pp_no {
      display: block;
      width: 100%;
      font-size: 20px;
      margin-bottom: 10px;
      padding-bottom: 10px; } }
  @media screen and (max-width: 768px) {
    .pp_no::after {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 35px;
      height: 1px;
      content: "";
      background-color: #fff; } }

.pp_title_txt {
  display: inline-block;
  width: calc(100% - 115px);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.5;
  border-left: 1px solid #fff;
  letter-spacing: 0.06em;
  padding-left: 45px; }
  @media screen and (max-width: 768px) {
    .pp_title_txt {
      display: block;
      width: 100%;
      border-left: none;
      font-size: 22px;
      padding: 0; } }

.read_pp {
  position: relative;
  width: 100%;
  background-color: #D5E8F9;
  padding: 45px 0;
  margin-bottom: 50px; }
  @media screen and (max-width: 768px) {
    .read_pp {
      padding: 35px 0; } }
  .read_pp::before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    border-top-width: 30px;
    border-bottom-width: 30px;
    border-left-width: 32px;
    border-right-width: 32px; }
    @media screen and (max-width: 768px) {
      .read_pp::before {
        border-top-width: 26px;
        border-bottom-width: 26px;
        border-left-width: 36px;
        border-right-width: 36px; } }
  .read_pp .cbox {
    display: flex; }
    @media screen and (max-width: 768px) {
      .read_pp .cbox {
        display: block; } }

.icon_pp {
  width: 115px; }
  @media screen and (max-width: 768px) {
    .icon_pp {
      width: auto;
      margin: 0 auto 25px;
      text-align: center; } }

.r_read_pp {
  width: calc(100% - 115px);
  padding-left: 45px; }
  @media screen and (max-width: 768px) {
    .r_read_pp {
      width: 100%;
      padding-left: 0; } }
  .r_read_pp p {
    font-size: 16px;
    letter-spacing: 0.06em;
    margin: 0; }
    @media screen and (max-width: 768px) {
      .r_read_pp p {
        font-size: 14px; } }
    .r_read_pp p.cap_pp {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.5;
      margin-bottom: 20px; }
      @media screen and (max-width: 768px) {
        .r_read_pp p.cap_pp {
          font-size: 18px;
          margin-bottom: 10px; } }

.pp_shosai {
  width: 100%;
  padding: 50px 35px; }
  @media screen and (max-width: 768px) {
    .pp_shosai {
      padding: 25px 20px; } }
  .pp_shosai h5 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.6;
    margin-bottom: 15px; }
    @media screen and (max-width: 768px) {
      .pp_shosai h5 {
        font-size: 16px;
        margin-bottom: 10px; } }
  .pp_shosai ul {
    margin-bottom: 30px;
    padding: 0; }
    .pp_shosai ul li {
      font-size: 16px;
      line-height: 2;
      margin: 0;
      padding: 0;
      letter-spacing: 0.06em;
      padding-left: 1em;
      text-indent: -1em; }
      @media screen and (max-width: 768px) {
        .pp_shosai ul li {
          font-size: 14px; } }
      .pp_shosai ul li::before {
        content: "・"; }

.pp_img {
  display: flex;
  justify-content: center;
  margin: 0 auto 50px;
  padding-top: 15px; }

.pp_price {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 10px;
  margin: 0 auto 35px; }
  @media screen and (max-width: 768px) {
    .pp_price {
      font-size: 14px;
      margin: 0 auto 20px; } }

.pp_price_txt {
  display: inline-block;
  font-size: 24px;
  margin-left: 15px; }
  @media screen and (max-width: 768px) {
    .pp_price_txt {
      font-size: 18px;
      margin-left: 10px; } }

/*
pinot04
*/
.pinot04 {
  padding: 105px 0 60px;
  background-color: rgba(0, 106, 136, 0.3); }
  @media screen and (max-width: 768px) {
    .pinot04 {
      padding: 50px 0; } }

.pcs {
  width: 100%;
  padding: 0 45px 45px;
  margin-bottom: 60px;
  background-color: #fff; }
  @media screen and (max-width: 768px) {
    .pcs {
      padding: 0 20px 45px; } }
  .pcs ul {
    widows: 100%;
    margin: 0 0 40px;
    padding: 0; }
    @media screen and (max-width: 768px) {
      .pcs ul {
        margin: 0 0 25px; } }
    .pcs ul li {
      font-size: 16px;
      line-height: 2;
      margin: 0;
      padding: 0 0 0 1em;
      letter-spacing: 0.06em;
      text-indent: -1em; }
      @media screen and (max-width: 768px) {
        .pcs ul li {
          font-size: 14px; } }
      .pcs ul li::before {
        content: "・"; }
    .pcs ul.pcs_half {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      @media screen and (max-width: 768px) {
        .pcs ul.pcs_half {
          display: block; } }
      .pcs ul.pcs_half li {
        width: 49%; }
        @media screen and (max-width: 768px) {
          .pcs ul.pcs_half li {
            width: 100%; } }

.cap_pcs {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: 30px;
  color: #006a88; }
  @media screen and (max-width: 768px) {
    .cap_pcs {
      font-size: 16px;
      text-align: left;
      margin-bottom: 25px; } }

.pcs_system {
  width: 100%;
  background-color: rgba(236, 241, 245, 0.6);
  padding: 25px 45px 35px; }
  @media screen and (max-width: 768px) {
    .pcs_system {
      padding: 30px 20px; } }
  .pcs_system h5 {
    color: #006a88;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.6;
    margin-bottom: 35px; }
    @media screen and (max-width: 768px) {
      .pcs_system h5 {
        text-align: center; } }

.pcs_img {
  display: flex;
  justify-content: center;
  margin: 0 auto; }

.cap_pcs_system {
  font-size: 12px;
  letter-spacing: 0.03em;
  margin: 45px 0 0; }

.pinot05 {
  background-color: #3EA3B8;
  padding: 85px 0 75px; }
  @media screen and (max-width: 768px) {
    .pinot05 {
      padding: 50px 0; } }
  .pinot05 h2 {
    color: #fff;
    margin-bottom: 60px; }
    @media screen and (max-width: 768px) {
      .pinot05 h2 {
        margin-bottom: 80px; } }
    .pinot05 h2::after {
      background-color: #BEFC69; }

.roadmap {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 30px 0; }
  @media screen and (max-width: 768px) {
    .roadmap {
      display: block;
      padding: 30px 20px; } }

.roadmap_img {
  width: 29%;
  margin: 0;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .roadmap_img {
      width: 100%;
      margin: 0 auto 25px; } }

.r_roadmap {
  width: 67.4%; }
  @media screen and (max-width: 768px) {
    .r_roadmap {
      width: 100%; } }
  .r_roadmap h3 {
    color: #006a88;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin-bottom: 15px; }
    @media screen and (max-width: 768px) {
      .r_roadmap h3 {
        font-size: 18px; } }
  .r_roadmap p {
    font-size: 14px;
    letter-spacing: 0.04em;
    margin-bottom: 0; }
  .r_roadmap ul {
    padding: 0 0 0 1.2em;
    margin: 0;
    list-style-type: disc; }
    .r_roadmap ul li {
      position: relative;
      font-size: 14px;
      line-height: 2;
      letter-spacing: 0.04em;
      margin-bottom: 0; }

.roadmap_flow {
  position: relative;
  width: 100%;
  max-width: 580px;
  padding: 25px 0;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    .roadmap_flow {
      padding: 20px 10px;
      max-width: 300px; } }
  .roadmap_flow::before, .roadmap_flow::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 25px;
    content: "";
    background-color: #fff; }
    @media screen and (max-width: 768px) {
      .roadmap_flow::before, .roadmap_flow::after {
        height: 20px; } }
  .roadmap_flow::before {
    top: 0; }
  .roadmap_flow::after {
    bottom: 0; }
  .roadmap_flow.last::after {
    display: none; }
  .roadmap_flow p {
    color: #006a88;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.02em;
    line-height: 1.7;
    text-align: center;
    background-color: #9CDEF0;
    margin: 0;
    padding: 6px 0; }
    @media screen and (max-width: 768px) {
      .roadmap_flow p {
        font-size: 18px; } }

/*
pinot_form
*/
#pinot_form {
  background: rgba(135, 215, 245, 0.6);
  padding: 85px 0; }
  @media screen and (max-width: 768px) {
    #pinot_form {
      padding: 35px 0; } }
  #pinot_form h2 {
    margin-bottom: 70px; }
  #pinot_form #present {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 55px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    background: #FEAA00;
    text-align: center;
    padding: 5px;
    border-radius: 20px;
    -ms-box-sizing: border-box;
    box-sizing: border-box; }
    @media screen and (max-width: 768px) {
      #pinot_form #present {
        max-width: none;
        padding: 8px;
        border-radius: 10px;
        margin: 0 auto 30px; } }

.form_tel {
  display: flex;
  justify-content: center;
  margin-bottom: 20px; }
  @media screen and (max-width: 768px) {
    .form_tel {
      display: block;
      margin-bottom: 30px; } }
  .form_tel .l_form_tel {
    width: 210px;
    margin-right: 25px; }
    @media screen and (max-width: 768px) {
      .form_tel .l_form_tel {
        margin: 0 auto 15px;
        text-align: center; } }
    .form_tel .l_form_tel h3 {
      width: 100%;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      background: #009CE5;
      margin: 0;
      padding: 15px 10px;
      -ms-box-sizing: border-box;
      box-sizing: border-box; }
  @media screen and (max-width: 768px) {
    .form_tel .r_form_tel {
      text-align: center; } }
  .form_tel .r_form_tel .r_tel {
    font-family: 'Oswald', sans-serif;
    font-size: 38px;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1; }
    @media screen and (max-width: 768px) {
      .form_tel .r_form_tel .r_tel {
        font-size: 30px; } }
    .form_tel .r_form_tel .r_tel span {
      display: inline-block;
      font-size: 24px;
      margin-right: 5px; }
      @media screen and (max-width: 768px) {
        .form_tel .r_form_tel .r_tel span {
          font-size: 20px; } }
  .form_tel .r_form_tel .r_time {
    font-size: 12px;
    margin: 0;
    text-align: center; }

#footer_contact {
  display: none; }