@charset "UTF-8";
/*
base-color
*/
/*
yocchi-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; }

.txt_green {
  color: #008F47; }

.txt_darkgreen {
  color: #015F30; }

.txt_orange {
  color: #F49911; }

/*
topimage_yocchi
*/
.topimage_yocchi {
  position: relative;
  width: 100%;
  height: 43.9vw;
  min-height: 600px;
  background-image: url("../img/yocchi_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_yocchi {
      background-image: url("../img/yocchi_topimage_sp.png");
      background-position: center bottom;
      height: 140vw;
      min-height: 525px;
      margin-bottom: 45px; } }
  .topimage_yocchi h1 {
    position: relative;
    width: 100%;
    margin-bottom: 70px;
    z-index: 1; }
    @media screen and (max-width: 768px) {
      .topimage_yocchi h1 {
        width: 88.8%;
        margin-bottom: 10px; } }
    .topimage_yocchi h1 img {
      width: 100%; }

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

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

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

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

.yocchi_title {
  text-align: center;
  margin-bottom: 35px; }
  @media screen and (max-width: 768px) {
    .yocchi_title {
      margin-bottom: 40px; } }
  .yocchi_title h3 {
    position: relative;
    display: inline-block;
    color: #008F47;
    font-size: 21px;
    font-weight: bold;
    letter-spacing: 0.03em;
    line-height: 1;
    margin: 0;
    padding: 0 15px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 16px;
    text-decoration-color: #FCEE42;
    text-decoration-skip-ink: none;
    text-underline-offset: -9px;
    /*&::after {
    	position: absolute;
    	left: 50%;
    	bottom: -5px;
    	transform: translateX(-50%);
    	width: calc(100% + 30px);
    	height: 16px;
    	content: "";
    	background-color: $yocchi-color2;
    	z-index: -1;
    	@include max-screen($breakpoint-tablet) {
    		height: 12px;
    		width: calc(100% + 20px);
    	}
    }*/ }
    @media screen and (max-width: 768px) {
      .yocchi_title h3 {
        font-size: 18px;
        line-height: 1.5; } }

.read_yocchi {
  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_yocchi {
      font-size: 20px;
      margin: 0 auto 40px; } }

.yocchi_iotlist {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
  padding: 0; }
  .yocchi_iotlist li {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    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) {
      .yocchi_iotlist li {
        width: 49%;
        height: auto;
        font-size: clamp(12px, 2.5vw, 16px);
        padding: 25px 10px; } }
    .yocchi_iotlist li:nth-child(1) {
      background-color: #008F47; }
    .yocchi_iotlist li:nth-child(2) {
      background-color: rgba(0, 143, 71, 0.8); }
    .yocchi_iotlist li:nth-child(3) {
      background-color: #008F47; }
      @media screen and (max-width: 768px) {
        .yocchi_iotlist li:nth-child(3) {
          background-color: rgba(0, 143, 71, 0.8); } }
    .yocchi_iotlist li:nth-child(4) {
      background-color: rgba(0, 143, 71, 0.8); }
      @media screen and (max-width: 768px) {
        .yocchi_iotlist li:nth-child(4) {
          background-color: #008F47; } }
    .yocchi_iotlist li:nth-child(5) {
      background-color: #008F47; }
    .yocchi_iotlist li:nth-child(6) {
      background-color: rgba(0, 143, 71, 0.8); }

.icon_yocchi {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 73px;
  text-align: center; }

/*
yocchi02
*/
.yocchi02 {
  position: relative; }

.fukidashi {
  position: relative;
  width: 100%;
  color: #fff;
  text-align: center;
  background-color: #82BA2E;
  padding: 40px 20px 25px;
  margin-bottom: 115px; }
  @media screen and (max-width: 768px) {
    .fukidashi {
      margin-bottom: 75px; } }
  .fukidashi::after {
    position: absolute;
    top: 99.9%;
    left: 50%;
    transform: translateX(-50%);
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    border-color: rgba(130, 186, 46, 0);
    border-top-width: 46px;
    border-bottom-width: 46px;
    border-left-width: 56px;
    border-right-width: 56px;
    border-top-color: #82BA2E; }
    @media screen and (max-width: 768px) {
      .fukidashi::after {
        border-top-width: 26px;
        border-bottom-width: 26px;
        border-left-width: 36px;
        border-right-width: 36px; } }
  .fukidashi p {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin-bottom: 0; }
    @media screen and (max-width: 768px) {
      .fukidashi p {
        font-size: 18px;
        margin-bottom: 5px; } }
    .fukidashi p.read_yocchi_merit02 {
      display: flex;
      align-items: center;
      align-content: center;
      flex-wrap: wrap;
      justify-content: center;
      font-size: 40px; }
      @media screen and (max-width: 768px) {
        .fukidashi p.read_yocchi_merit02 {
          display: block;
          font-size: 24px; } }

.yocchi_zero {
  display: inline-block;
  padding: 0 10px;
  margin: 5px 0 15px; }
  @media screen and (max-width: 768px) {
    .yocchi_zero {
      display: block;
      margin: 5px auto 15px; } }

.merit_yocchi {
  width: 100%;
  margin-bottom: 40px;
  background-color: rgba(130, 186, 46, 0.2); }
  @media screen and (max-width: 768px) {
    .merit_yocchi {
      margin-bottom: 25px; } }
  .merit_yocchi h4 {
    width: 100%;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.06em;
    background-color: #82BA2E;
    margin-bottom: 0;
    padding: 0; }
    @media screen and (max-width: 768px) {
      .merit_yocchi h4 {
        font-size: 16px; } }
  .merit_yocchi ul {
    margin: 0;
    padding: 30px 30px 35px 45px; }
    @media screen and (max-width: 768px) {
      .merit_yocchi ul {
        padding: 20px; } }
    .merit_yocchi ul li {
      position: relative;
      font-size: 16px;
      font-weight: 700;
      line-height: 2;
      margin-bottom: 0;
      padding: 0 0 0 1em;
      text-indent: -1em;
      letter-spacing: 0.03em; }
      @media screen and (max-width: 768px) {
        .merit_yocchi ul li {
          font-size: 14px; } }
      .merit_yocchi ul li::before {
        position: relative;
        content: "・"; }
  .merit_yocchi p {
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
    margin: 0;
    padding: 30px 30px 35px 45px; }
    @media screen and (max-width: 768px) {
      .merit_yocchi p {
        font-size: 14px;
        padding: 20px; } }

.merit_yocchi_no {
  display: inline-block;
  width: 165px;
  height: 100%;
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.02em;
  background-color: #333;
  padding: 30px 10px;
  margin-right: 30px;
  clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 88% 100%); }
  @media screen and (max-width: 768px) {
    .merit_yocchi_no {
      width: 85px;
      font-size: 16px;
      padding: 20px 10px 20px 0;
      margin-right: 10px; } }

.merit_yocchi_title {
  display: inline-block;
  width: calc(100% - 195px);
  height: 100%; }
  @media screen and (max-width: 768px) {
    .merit_yocchi_title {
      width: calc(100% - 95px); } }

.logo_yocchi_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_yocchi.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 60px auto 0;
  padding: 0 20px; }
  @media screen and (max-width: 768px) {
    .logo_yocchi_area {
      height: 400px; } }
  .logo_yocchi_area::before {
    position: absolute;
    top: -0.5%;
    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) {
      .logo_yocchi_area::before {
        border-top-width: 26px;
        border-bottom-width: 26px;
        border-left-width: 36px;
        border-right-width: 36px; } }
  .logo_yocchi_area .logo_yocchi {
    margin: 0 auto 60px; }
    @media screen and (max-width: 768px) {
      .logo_yocchi_area .logo_yocchi {
        margin: 0 auto 30px; } }
  .logo_yocchi_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_yocchi_area p {
        font-size: 24px; } }

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

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

.read_yocchi_contact02 {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
  margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .read_yocchi_contact02 {
      font-size: 18px; } }

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

.btn_yocchi_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_yocchi_contact::before {
      border-radius: 33px; } }

.btn_yocchi_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_yocchi_contact a {
      font-size: 18px;
      border-radius: 33px; } }

.yocchi_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; }

.yocchi_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) {
    .yocchi_tel {
      font-size: 22px;
      padding: 2px 0;
      display: block;
      width: 100%; } }
  .yocchi_tel small {
    display: inline-block;
    padding-bottom: 5px;
    font-size: 24px;
    letter-spacing: 0.04em; }
    @media screen and (max-width: 768px) {
      .yocchi_tel small {
        font-size: 18px;
        padding-bottom: 0; } }

/*
yocchi03
*/
.yocchi03 {
  padding: 110px 0 80px; }
  @media screen and (max-width: 768px) {
    .yocchi03 {
      padding: 45px 0; } }
  .yocchi03 h3 {
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    margin-bottom: 25px; }
    @media screen and (max-width: 768px) {
      .yocchi03 h3 {
        font-size: 16px;
        margin-bottom: 15px; } }

.keisan {
  background-color: #ECF1F5;
  margin-bottom: 50px;
  padding: 30px 40px; }
  @media screen and (max-width: 768px) {
    .keisan {
      padding: 20px;
      margin-bottom: 25px; } }
  .keisan h4 {
    color: #82BA2E;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
    padding: 0; }
    @media screen and (max-width: 768px) {
      .keisan h4 {
        font-size: 16px;
        margin-bottom: 10px; } }
  .keisan dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    margin: 0;
    padding: 0; }
    .keisan dl dt,
    .keisan dl dd {
      font-size: 14px;
      line-height: 2;
      letter-spacing: 0.03em;
      margin: 0;
      padding: 0; }
    .keisan dl dt {
      position: relative;
      width: 90px;
      font-weight: 700; }
      .keisan dl dt::after {
        position: absolute;
        right: 0;
        top: 0;
        content: "：";
        font-weight: 400; }
    .keisan dl dd {
      width: calc(100% - 90px); }

.stopbox {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 45px; }
  @media screen and (max-width: 768px) {
    .stopbox {
      display: block;
      margin-bottom: 25px; } }

.stop {
  width: 30.2%;
  background-color: #ECF1F5;
  padding-bottom: 25px; }
  @media screen and (max-width: 768px) {
    .stop {
      width: 100%;
      margin-bottom: 25px; } }
  .stop dl {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 15px;
    padding: 0 20px; }
    .stop dl dt,
    .stop dl dd {
      font-size: 14px;
      letter-spacing: 0.03em;
      line-height: 2;
      margin: 0;
      padding: 0; }
    .stop dl dt {
      width: 90px;
      font-weight: 700; }
    .stop dl dd {
      width: calc(100% - 90px);
      text-align: right; }

.stop_title {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 130px;
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  background-color: #82BA2E;
  margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .stop_title {
      height: 80px;
      font-size: 14px;
      margin-bottom: 15px; } }

.stop_txt {
  display: block;
  width: 100%;
  font-size: 28px;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .stop_txt {
      font-size: 20px; } }

.stop_price {
  display: block;
  color: #E93600;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
  margin-bottom: 25px;
  padding: 0 20px; }
  @media screen and (max-width: 768px) {
    .stop_price {
      font-size: 14px;
      margin-bottom: 15px; } }

.stop_yen {
  font-size: 28px;
  font-weight: 900; }
  @media screen and (max-width: 768px) {
    .stop_yen {
      font-size: 20px; } }

.stop_case {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin-bottom: 25px;
  padding: 0 20px; }
  @media screen and (max-width: 768px) {
    .stop_case {
      text-align: center; } }

.stop_caseprice {
  font-size: 20px;
  font-weight: 900; }
  @media screen and (max-width: 768px) {
    .stop_caseprice {
      font-size: 18px; } }

.stop_caseyear {
  font-size: 14px; }
  @media screen and (max-width: 768px) {
    .stop_caseyear {
      font-size: 12px; } }

.icon_stop {
  width: 100%;
  height: 129px;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media screen and (max-width: 768px) {
    .icon_stop {
      height: auto; } }

.calculation h5 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin-bottom: 20px; }
  @media screen and (max-width: 768px) {
    .calculation h5 {
      margin-bottom: 10px; } }
.calculation p {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  margin: 0; }

/*
yocchi04
*/
.yocchi04 {
  position: relative;
  padding: 85px 0 130px;
  background-color: #ECF1F5;
  z-index: 2; }
  @media screen and (max-width: 768px) {
    .yocchi04 {
      padding: 45px 0; } }
  .yocchi04::after {
    position: absolute;
    top: 99%;
    left: 50%;
    transform: translateX(-50%);
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    border-color: rgba(236, 241, 245, 0);
    border-top-width: 46px;
    border-bottom-width: 46px;
    border-left-width: 56px;
    border-right-width: 56px;
    border-top-color: #ECF1F5; }
    @media screen and (max-width: 768px) {
      .yocchi04::after {
        border-top-width: 26px;
        border-bottom-width: 26px;
        border-left-width: 36px;
        border-right-width: 36px; } }

.koshou {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
  background-color: #008F47;
  padding: 25px 20px;
  margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .koshou {
      font-size: 20px;
      padding: 15px 20px; } }

.plus_black {
  text-align: center;
  margin: 0 auto 10px; }

.sarani {
  color: #008F47;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-align: center;
  margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .sarani {
      font-size: 16px;
      margin-bottom: 25px; } }

.risklist {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 0 65px;
  padding: 0; }
  @media screen and (max-width: 768px) {
    .risklist {
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 30px; } }
  .risklist li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18%;
    height: 100px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    margin: 0;
    padding: 0 5px; }
    @media screen and (max-width: 768px) {
      .risklist li {
        width: 32%;
        height: 50px;
        font-size: 15px;
        margin: 0 2% 10px 0; } }
    .risklist li:nth-child(odd) {
      background-color: #82BA2E; }
    .risklist li:nth-child(even) {
      background-color: rgba(130, 186, 46, 0.7); }
    @media screen and (max-width: 768px) {
      .risklist li:nth-child(3n) {
        margin: 0 0 10px; } }

.teokure {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  margin-bottom: 0px; }
  @media screen and (max-width: 768px) {
    .teokure {
      font-size: 16px; } }

.read_risk01 {
  margin-bottom: 35px; }
  @media screen and (max-width: 768px) {
    .read_risk01 {
      margin-bottom: 25px; } }

.riskzero {
  text-align: center;
  margin: 0 auto; }

.yocchi05 {
  position: relative;
  background-color: rgba(130, 186, 46, 0.3);
  padding: 130px 0 80px;
  z-index: 1; }
  @media screen and (max-width: 768px) {
    .yocchi05 {
      padding: 75px 0 45px; } }

.read_about_yocchi01 {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  margin-bottom: 10px; }
  @media screen and (max-width: 768px) {
    .read_about_yocchi01 {
      font-size: 18px; } }

.read_about_yocchi02 {
  font-size: 34px; }
  @media screen and (max-width: 768px) {
    .read_about_yocchi02 {
      font-size: 22px; } }

.about_yocchi_img {
  width: 100%;
  max-width: 914px; }
  @media screen and (max-width: 768px) {
    .about_yocchi_img {
      max-width: inherit;
      width: 83.5%;
      margin: 0 auto; } }
  .about_yocchi_img img {
    width: 100%; }

.yocchi06 {
  padding: 90px 0 30px; }
  @media screen and (max-width: 768px) {
    .yocchi06 {
      padding: 45px 0 20px; } }

.yocchi_step {
  width: 100%;
  margin-bottom: 40px; }
  @media screen and (max-width: 768px) {
    .yocchi_step {
      margin-bottom: 25px; } }
  .yocchi_step h4 {
    width: 100%;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.03em;
    background-color: #82BA2E;
    margin-bottom: 0;
    padding: 0; }
    @media screen and (max-width: 768px) {
      .yocchi_step h4 {
        font-size: 16px; } }
  .yocchi_step ul {
    margin: 0;
    padding: 30px 30px 35px 45px; }
    @media screen and (max-width: 768px) {
      .yocchi_step ul {
        padding: 20px; } }
    .yocchi_step ul.nm {
      padding: 30px 30px 0 45px; }
      @media screen and (max-width: 768px) {
        .yocchi_step ul.nm {
          padding: 20px 20px 0; } }
    .yocchi_step ul li {
      position: relative;
      font-size: 16px;
      line-height: 2;
      margin-bottom: 0;
      padding: 0 0 0 1em;
      text-indent: -1em;
      letter-spacing: 0.03em; }
      @media screen and (max-width: 768px) {
        .yocchi_step ul li {
          font-size: 14px; } }
      .yocchi_step ul li::before {
        position: relative;
        content: "・"; }
      .yocchi_step ul li .txt_green {
        font-weight: 700; }
      .yocchi_step ul li small {
        display: block;
        font-size: 14px;
        padding-left: 1em; }
        @media screen and (max-width: 768px) {
          .yocchi_step ul li small {
            font-size: 12px; } }
  .yocchi_step p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    padding: 15px 30px 35px 50px; }
    @media screen and (max-width: 768px) {
      .yocchi_step p {
        font-size: 12px;
        padding: 10px 20px 20px 25px; } }

.yocchi_step_shosai {
  background-color: rgba(130, 186, 46, 0.2); }

.yocchi_step_no {
  display: inline-block;
  width: 105px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.03em;
  background-color: #333;
  padding: 20px 10px 20px 0;
  margin-right: 20px;
  clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 81% 100%); }
  @media screen and (max-width: 768px) {
    .yocchi_step_no {
      width: 85px;
      font-size: 14px;
      margin-right: 10px; } }

.yocchi_step_title {
  display: inline-block;
  width: calc(100% - 125px);
  height: 100%; }
  @media screen and (max-width: 768px) {
    .yocchi_step_title {
      width: calc(100% - 95px); } }

.ytbox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  @media screen and (max-width: 768px) {
    .ytbox {
      display: block; } }
  .ytbox ul {
    width: 73%;
    padding: 30px 0px 35px 45px; }
    @media screen and (max-width: 768px) {
      .ytbox ul {
        width: 100%;
        padding: 20px; } }

.yocchi_photo01 {
  width: 22.7%;
  margin-right: 15px; }
  @media screen and (max-width: 768px) {
    .yocchi_photo01 {
      width: 100%;
      margin: 0;
      padding: 0 20px 20px; } }
  .yocchi_photo01 img {
    width: 100%; }

.yocchi07 {
  padding: 105px 0 65px;
  background-color: #ECF1F5; }
  @media screen and (max-width: 768px) {
    .yocchi07 {
      padding: 45px 0 25px; } }
  .yocchi07 h4 {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    line-height: 1.5;
    margin-bottom: 50px; }
    @media screen and (max-width: 768px) {
      .yocchi07 h4 {
        font-size: 22px;
        margin-bottom: 20px; } }

.read_yocchi_case {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.06em;
  margin-bottom: 40px; }
  @media screen and (max-width: 768px) {
    .read_yocchi_case {
      font-size: 18px; } }

.yocchi_case {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 40px;
  margin-bottom: 35px; }
  @media screen and (max-width: 768px) {
    .yocchi_case {
      display: block;
      padding: 20px;
      margin-bottom: 25px; } }

.l_yocchi_case {
  width: 62.8%; }
  @media screen and (max-width: 768px) {
    .l_yocchi_case {
      width: 100%;
      margin-bottom: 20px; } }
  .l_yocchi_case h5 {
    color: #009CE5;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin-bottom: 15px; }
    @media screen and (max-width: 768px) {
      .l_yocchi_case h5 {
        font-size: 16px;
        margin-bottom: 0px; } }
  .l_yocchi_case p {
    font-size: 14px;
    letter-spacing: 0.04em;
    margin-bottom: 0; }
    .l_yocchi_case p.yocchi_case_job {
      font-weight: 700;
      margin-bottom: 25px; }
      @media screen and (max-width: 768px) {
        .l_yocchi_case p.yocchi_case_job {
          font-size: 13px;
          margin-bottom: 10px; } }

.yocchi_case_photo {
  width: 34.2%; }
  @media screen and (max-width: 768px) {
    .yocchi_case_photo {
      width: 100%; } }
  .yocchi_case_photo img {
    width: 100%; }

.yocchi08 {
  padding: 105px 0; }
  @media screen and (max-width: 768px) {
    .yocchi08 {
      padding: 45px 0; } }

.workslist {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 1px solid #C9C9C9;
  margin: 0 0 80px;
  padding: 0 0 20px; }
  @media screen and (max-width: 768px) {
    .workslist {
      margin-bottom: 60px;
      justify-content: space-between; } }
  .workslist li {
    width: 31%;
    margin: 0 3.5% 30px 0; }
    @media screen and (max-width: 768px) {
      .workslist li {
        width: 48%;
        margin: 0 0 25px; } }
    .workslist li:nth-child(3n) {
      margin: 0 0 30px; }
      @media screen and (max-width: 768px) {
        .workslist li:nth-child(3n) {
          margin-bottom: 25px; } }
    .workslist li img {
      width: 100%; }

.read_works {
  margin-bottom: 35px; }

.cap_works {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 50px; }
  @media screen and (max-width: 768px) {
    .cap_works {
      text-align: left;
      margin-bottom: 30px; } }

.industrylist {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
  margin: 0;
  padding: 0; }
  .industrylist li {
    width: 23.3%;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.02em;
    background-color: #82BA2E;
    line-height: 1.6;
    text-align: center;
    padding: 15px 0;
    margin: 0 0 20px; }
    @media screen and (max-width: 768px) {
      .industrylist li {
        width: 48%;
        font-size: 15px;
        margin-bottom: 15px; } }
    .industrylist li:nth-child(2), .industrylist li:nth-child(4), .industrylist li:nth-child(5), .industrylist li:nth-child(7), .industrylist li:nth-child(10), .industrylist li:nth-child(12), .industrylist li:nth-child(13), .industrylist li:nth-child(15) {
      background-color: rgba(130, 186, 46, 0.7); }
    @media screen and (max-width: 768px) {
      .industrylist li:nth-child(3), .industrylist li:nth-child(6), .industrylist li:nth-child(11), .industrylist li:nth-child(14) {
        background-color: rgba(130, 186, 46, 0.7); } }
    @media screen and (max-width: 768px) {
      .industrylist li:nth-child(4), .industrylist li:nth-child(5), .industrylist li:nth-child(12), .industrylist li:nth-child(13) {
        background-color: #82BA2E; } }
    .industrylist li.possibility {
      background: none;
      color: #008F47;
      font-size: 26px;
      line-height: 1; }
      @media screen and (max-width: 768px) {
        .industrylist li.possibility {
          font-size: 18px; } }

/*
yocchi_form
*/
#yocchi_form {
  background: rgba(135, 215, 245, 0.6);
  padding: 85px 0; }
  @media screen and (max-width: 768px) {
    #yocchi_form {
      padding: 35px 0; } }
  #yocchi_form h2 {
    margin-bottom: 70px; }
    #yocchi_form h2::after {
      background-color: #006A88; }
  #yocchi_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) {
      #yocchi_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; }