@charset "UTF-8";
/* CSS Document */
html {
  scroll-behavior: smooth; }

#headerImg {
  margin-bottom: 0; }
  #headerImg .imgContainer {
    background: url("../img/header-business.jpg") no-repeat center center/cover; }

.businessHeader {
  height: 25vw;
  width: 80%;
  margin: 0 auto 6rem auto;
  position: relative; }
  @media screen and (max-width: 767px) {
    .businessHeader {
      width: 100%;
      height: 300px; } }
  .businessHeader .headerTitle {
    position: absolute;
    top: 8%;
    left: 3%; }
    .businessHeader .headerTitle p {
      color: #fff;
      margin-bottom: 0; }
    .businessHeader .headerTitle h4 {
      display: inline-block;
      color: #1b377f;
      font-size: 3rem;
      font-weight: 600;
      background: #fff;
      padding: 5px 10px; }
  .businessHeader .mainWorks {
    position: absolute;
    right: 5%;
    bottom: -50px;
    background: linear-gradient(to right, #ffa64f, #f77f2f);
    color: #fff;
    padding: 1.5rem 2.5rem;
    min-width: 200px; }
    .businessHeader .mainWorks dt {
      font-size: 1.75rem;
      margin-bottom: 0.75rem; }
    .businessHeader .mainWorks li {
      font-weight: 400; }

#gas .businessHeader {
  background: url("../img/business-gas.jpg") no-repeat center center/cover; }

#ss .businessHeader {
  background: url("../img/business-ss.jpg") no-repeat center center/cover; }

#cooking .businessHeader {
  background: url("../img/business-cooking.jpg") no-repeat center center/cover; }

.descRight {
  background: linear-gradient(90deg, #fff 0%, #fff 15%, #fbeee0 15%, #fbeee0 100%);
  margin-bottom: 7rem; }
  @media screen and (max-width: 575px) {
    .descRight {
      background: none; } }
  .descRight dl {
    padding: 5rem 5rem; }
    @media screen and (max-width: 767px) {
      .descRight dl {
        padding: 5rem 5rem 5rem 0rem; } }
    @media screen and (max-width: 575px) {
      .descRight dl {
        padding: 0 2rem; } }

.descLeft {
  background: linear-gradient(270deg, #fff 0%, #fff 15%, #fbeee0 15%, #fbeee0 100%);
  margin-bottom: 7rem; }
  @media screen and (max-width: 575px) {
    .descLeft {
      background: none; } }
  .descLeft dl {
    padding: 5rem 5rem; }
    @media screen and (max-width: 767px) {
      .descLeft dl {
        padding: 5rem 0rem 5rem 5rem; } }
    @media screen and (max-width: 575px) {
      .descLeft dl {
        padding: 0 2rem; } }

.descImg {
  margin-top: -3rem;
  padding-bottom: 3rem; }
  @media screen and (max-width: 575px) {
    .descImg {
      padding-bottom: 1.5rem; } }

#gas {
  padding-top: 15rem; }
  @media screen and (max-width: 575px) {
    #gas {
      padding-top: 5rem; } }
  #gas .pickup {
    margin-top: 3rem;
    margin-bottom: 5rem; }
    #gas .pickup h5 {
      text-align: center;
      font-size: 2.5rem;
      line-height: 2rem;
      margin-bottom: 2rem; }
      #gas .pickup h5 span {
        font-size: 1.25rem;
        font-weight: 400; }
      #gas .pickup h5::before {
        content: '';
        /*何も入れない*/
        display: block;
        /*忘れずに！*/
        height: 10px;
        background: url("../img/deco-18.svg") no-repeat center center/contain;
        margin: 0 auto 15px; }
    #gas .pickup > div {
      padding: 5rem 7rem;
      border-radius: 20px; }
      @media screen and (max-width: 767px) {
        #gas .pickup > div {
          padding: 4rem;
          text-align: center; } }
    #gas .pickup .row dt {
      font-size: 2.25rem;
      margin-bottom: 1.5rem; }
    #gas .pickup .kantakunImg {
      max-width: 200px;
      margin: 0 auto; }
      @media screen and (max-width: 767px) {
        #gas .pickup .kantakunImg {
          margin-bottom: 3rem; } }
  #gas .products {
    margin-bottom: 5rem; }
    #gas .products .row {
      max-width: 85%;
      margin: 0 auto; }
      @media screen and (max-width: 575px) {
        #gas .products .row {
          width: 60%; } }
      #gas .products .row figure {
        margin-bottom: 3rem; }
      #gas .products .row figcaption {
        color: #ef821d;
        font-size: 2rem;
        margin-top: 1.5rem;
        font-weight: 500; }
        @media screen and (max-width: 575px) {
          #gas .products .row figcaption {
            font-size: 1.5rem; } }
    #gas .products dl dt {
      display: flex;
      align-items: center; }
      #gas .products dl dt::before, #gas .products dl dt::after {
        content: "";
        flex-grow: 1;
        border-top: 2px dotted #444;
        display: block; }
      #gas .products dl dt::before {
        margin-right: 1em; }
      #gas .products dl dt::after {
        margin-left: 1em; }
    #gas .products dl ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center; }
      #gas .products dl ul li {
        margin: 4px 20px; }
  #gas .price {
    padding: 5rem 7rem;
    border-radius: 20px;
    margin-bottom: 8rem; }
    @media screen and (max-width: 767px) {
      #gas .price {
        padding: 4rem 4rem; } }

#ss {
  padding-top: 15rem; }
  @media screen and (max-width: 575px) {
    #ss {
      padding-top: 5rem; } }
  #ss .businessHeader {
    margin-bottom: 15rem; }
  #ss .descLeft {
    position: relative; }

#cooking {
  padding-top: 15rem; }
  @media screen and (max-width: 575px) {
    #cooking {
      padding-top: 5rem; } }
  #cooking .course, #cooking .cookingInfo, #cooking .cookingGallery, #cooking .plaza {
    margin-bottom: 10rem; }
  #cooking .row {
    max-width: 100%;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      #cooking .row {
        max-width: 100%; } }
    @media screen and (max-width: 575px) {
      #cooking .row figure {
        padding-right: 5px;
        padding-left: 5px; } }
    #cooking .row figcaption {
      color: #ef821d;
      font-size: 1.8rem;
      margin-top: 1.5rem;
      font-weight: 500; }
  @media screen and (max-width: 575px) {
    #cooking .course .row {
      width: 60%; } }
  #cooking .course .row figure {
    margin-bottom: 4rem; }
  #cooking .blogitem .trim img {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  #cooking .cookingInfo .blogitem {
    background: #f0f0f0;
    margin-bottom: 2rem; }
  #cooking .cookingGallery ul {
    padding-left: 0; }
    #cooking .cookingGallery ul li {
      max-height: 300px;
      margin: 0 30px;
      overflow: hidden; }
      @media screen and (max-width: 767px) {
        #cooking .cookingGallery ul li {
          margin: 0 10px; } }
      #cooking .cookingGallery ul li img {
        object-fit: cover; }
  #cooking .plaza {
    margin-bottom: 17rem; }
  @media screen and (max-width: 575px) {
    #cooking .plaza dt {
      margin-top: 2rem; } }