@charset "utf-8";
@media only screen and (max-width: 767px) {
  /* 喪中はがき2022
------------------------------------------------------------------------------------------------- */
  .mochu_relative {
    width: auto;
  }
  .mochu_wrap {
    font-size: 0.9375rem;
  }
  .mochu_main {
    width: auto;
    height: 300px;
    background-position: 20% 0;
    min-width: inherit;
    &:before {
      position: absolute;
      content: "";
      background-image: url(../../images/mochu/main_deco.webp);
      background-position: bottom right;
      background-size: 200px;
      width: 200px;
      height: 200px;
      bottom: 0;
      right: 0;
    }
  }
  .mochu_main_wrap {
    margin-bottom: 120px;
  }
  .mochu_titlearea {
    text-align: center;
    padding: 0 4%;
    position: static;
    transform: translateY(0%);
    height: 300px;
  }
  .mochu_main h1 {
    font-size: 40px;
    margin-bottom: 5%;
    padding: 0;
    position: absolute;
    top: 70px;
    left: 40%;
    border-bottom: none;
  }
  .mochu_main h2 {
    color: #333;
    font-size: 110%;
    font-weight: 500;
    padding: 320px 0 0 0;
    text-shadow: none;
  }

  /* 見出し */
  h1.mochu_ttl_gold {
    width: auto;
    margin: 0 auto 50px;
    font-size: 1.4rem;
    strong {
      font-size: 0.9375rem;
      margin-top: 5px;
    }
  }
  h1.mochu_ttl_gold:before {
    bottom: -15px;
    left: calc(50% - 100px);
    width: 200px;
  }
  .mochu_fontsize_medium {
    font-size: 0.9333rem;
    width: fit-content;
    margin: 0 auto 20px;
    text-align: center;
    line-height: 1.8;
    font-weight: 400;
  }
  .mochu_bg {
    padding: 40px 4%;
  }
  .mochu_bgonline {
    padding: 40px 0 0;
  }
  .mochu_harfwrap ul {
    margin-bottom: 30px;
    font-size: 100%;
  }
  .mochu_large {
    font-size: 1.0625rem;
    text-align: center;
  }
  h2.mochu_h2 {
    margin: 0 4% 30px;
    font-size: 110%;
    font-weight: 600;
    width: auto;
  }
  h2.mochu_h2:before {
    left: calc(50% - 100px);
    width: 200px;
  }
  ul.mochu_menu {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    margin: 0 auto 0;
    padding: 0;
    gap: 2%;
  }
  ul.mochu_menu li {
    width: 49%;
    margin-bottom: 10px;
  }
  ul.mochu_menu li img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1.4 / 1;
  }
  ul.mochu_menu li:last-child {
    width: 70%;
    margin-bottom: 10px;
  }
  ul.mochu_menu li:last-child img {
    aspect-ratio: 2 / 1;
  }
  ul.mochu_menu li a span.dtl {
    display: block;
    padding: 0 5px 5px 10px;
    font-size: 0.8rem;
  }
  ul.mochu_menu li a span.ttl {
    font-size: 0.8667rem;
    padding: 10px;
    font-weight: 600;
  }
  .mochu_online {
    flex-direction: column;
    width: auto;
    margin: 0 auto 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 96%;
  }
  .mochu_service {
    width: auto;
    margin: 0 auto 50px;
    padding: 4%;
    text-align: left;
  }
  .mochu_online_in {
    width: auto;
    margin-bottom: 50px;
  }
  .mochu_online_in.text {
    padding: 20px 4%;
    margin-bottom: 0;
  }
  .mochu_online_in2 {
    padding: 20px 4%;
    width: auto;
    margin-bottom: 50px;
  }
  .mochu_online h2 {
    font-size: 1.3125rem;
    margin: 10px 0;
    text-align: center;
    strong {
      font-size: 0.9375rem;
      margin-top: 5px;
    }
  }
  .mochu_online_in2 picture {
    margin-bottom: 20px;
    display: block;
  }
  .mochu_online h3 span {
    font-size: 86%;
  }
  .mochu_online p {
    margin-bottom: 20px;
  }
  .mochu_online ul {
    margin-top: 0;
  }
  .mochu_online ul li {
    width: 48%;
    margin-bottom: 4%;
  }
  .mochu_online ul li a {
    padding: 10px;
    font-size: 0.8125rem;
    span {
      font-size: 90%;
    }
  }
  .mochu_online table th.youto {
    width: 100px;
  }
  .mochu_receipt_in {
    padding: 20px 4%;
  }
  .mochu_receipt {
    width: auto;
    margin: 0 auto 50px;
    padding: 0;
  }
  .mochu_receipt h3 {
    font-size: 130%;
    font-weight: 600;
    margin-bottom: 20px;
    color: #b89229;
  }
  .mochu_receipt h3 span {
    font-size: 86%;
  }
  .receipt_want {
    margin-top: 20px;
    padding-top: 20px;
    flex-direction: column;
  }
  .receipt_want h4 {
    font-size: 120%;
    font-weight: 600;
    margin-bottom: 20px;
  }
  .receipt_want div {
    width: auto;
  }
  .receipt_want div img {
    width: 100%;
    height: auto;
    border: solid 10px #fff;
    box-sizing: border-box;
  }
  h4.warn {
    font-size: 110%;
  }
  .mochu_itemwrap {
    width: auto;
    margin: auto;
    padding: 0 4%;
  }
  h2.mochu_ttl {
    font-size: 1.25rem;
    margin-bottom: 30px;
    width: auto;
    background-size: 50px;
    padding-top: 35px;
    strong {
      font-size: 0.875rem;
      margin-top: 5px;
    }
  }
  h2.mochu_subttl {
    font-size: 100%;
    margin-bottom: 30px;
    width: auto;
  }
  .mochu_whitebg {
    width: auto;
    padding: 20px 4% 20px;
    margin: 0 auto 50px;
    text-align: left;
  }
  .niibon_otheritem_wrap {
    flex-direction: column;
    width: auto;
    margin-bottom: 0;
  }
  .mochu_number {
    font-size: 150%;
  }
  .mochu_number:before {
    width: 200px;
  }
  .mochu_number2 {
    font-size: 150%;
  }
  .mochu_limited {
    position: absolute;
    top: -20px;
    right: -2%;
    z-index: 555;
  }
  .mochu_limited img {
    width: 70px;
  }
  .mochu_limited img:last-child {
    width: 55px;
  }
  .mochu_limited2 {
    position: absolute;
    top: -35px;
    left: -2%;
    width: 70px;
    z-index: 555;
  }
  .mochu_limited3 {
    position: absolute;
    top: -30px;
    right: 0;
    width: 70px;
    z-index: 555;
  }
  .mochu_limited3 img {
    margin-bottom: 5px;
  }
  .mochu_limited3 img:nth-child(2) {
    width: 55px;
  }
  .mochu_usagi {
    border: solid 1px #ddd;
    position: relative;
    margin-bottom: 0;
  }
  .mochu_usagi_wrap {
    flex-direction: column;
  }
  .mochu_usagi_in {
    width: auto;
  }
  .mochu_usagi_in:last-child {
    padding: 20px 10px 100px 10px;
    background-image: url("../../images/mochu/usagi_bg.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 50%;
  }
  ul.mochu_point {
    gap: 10px;
  }
  ul.mochu_point li {
    padding: 0px 10px;
    margin-bottom: 15px;
  }
  .mochu_otheritem_in picture img {
    width: 80%;
    height: auto;
  }
  .mochu_otheritem .mochu_dtl {
    text-align: left;
  }
  h3.mochu_item {
    font-size: 130%;
    font-weight: bold;
  }
  h3.mochu_item span {
    font-size: 86%;
  }
  h3.mochu_item_small {
    font-size: 120%;
    font-weight: bold;
  }
  h3.mochu_item_small span {
    font-size: 86%;
  }
  .mochu_substance {
    font-size: 100%;
  }
  .mochu_price {
    font-size: 130%;
  }
  .mochu_price span {
    font-size: 86%;
  }
  .mochu_price_small {
    font-size: 120%;
  }
  .mochu_price_small span {
    font-size: 86%;
  }
  .mochu_btn {
    text-align: center;
  }
  .mochu_btn a {
    font-size: 100%;
  }
  .mochu_otheritem {
    margin: 0 auto 50px;
    padding: 0;
    flex-direction: column;
    width: auto;
    display: block;
  }
  .mochu_otheritem_in {
    width: auto;
    margin: 0 0 50px 0;
    display: block;
  }
  .mochu_limitedwrap {
    width: auto;
  }
  .mochu_otheritem_in.huroshiki {
    width: auto;
    margin: 0 0 50px 0;
  }
  .mochu_otheritem_in.rousoku {
    width: auto;
    margin: 0 0 50px 0;
  }
  .mochu_otheritem_in picture {
    margin: 10px 0 20px;
    display: block;
  }
  ul.mochu_seibun {
    text-align: center;
    margin-bottom: 15px;
  }
  .mochu_otheritem_in ul.mochu_seibun {
    margin-bottom: 15px;
  }

  .mochu_bunmen dt {
    display: block;
    font-weight: bold;
    width: auto;
    padding: 5px 10px;
  }
  .mochu_bunmen dd {
    border-top: solid 1px #999;
    border-left: none;
    display: block;
    width: auto;
  }
  .mochu_online h3 {
    font-size: 100%;
  }
  .mochu_online h3.mochu_greeting {
    font-size: 0.875rem;
    padding: 10px 15px 10px 10px;
    strong {
      margin-left: 5px;
    }
    span {
      font-size: 80%;
    }
    img {
      width: 30px;
    }
  }
  .mochu_guidebtn2 a {
    font-size: 100%;
  }
  .mochu_gold {
    font-size: 0.9375rem;
  }
  .mochu_step {
    margin: 20px 0;
  }
  /*よくある質問*/
  .mochu_qa_wrap {
    width: auto;
    flex-direction: column;
    border: none;
    margin-bottom: 50px;
  }
  .mochu_qa_in {
    width: auto;
  }
  .mochu_qa_in img {
    height: 250px;
  }
  .mochu_qa_in.text {
    padding: 20px 4%;
  }
  .mochu_qa_in ul.qa li {
    margin-bottom: 10px;
    padding-bottom: 7px;
    padding-left: 35px;
  }
  .mochu_qa_in ul.qa li a {
    border: none;
    color: #333;
    text-decoration: none;
    padding: 0;
    height: inherit;
    width: auto;
    text-align: left;
    font-size: 100%;
    display: block;
    min-height: inherit;
  }
  .mochu_qa {
    width: auto;
    margin: 4% 4% 50px 4%;
  }
  .mochu_qa h2 {
    font-size: 130%;
    padding-left: 35px;
  }
  .mochu_qa h1:before {
    top: 0.5em;
    left: 0.2em;
  }
  .mochu_qa h1:after {
    top: 0.6em;
    left: 0.5em;
  }
  .mochu_qa p {
    font-size: 100%;
  }
  .mochu_zoutou {
    width: auto;
    margin: 0 auto 70px;
    padding: 0;
  }
  .mochu_zoutou_in {
    padding: 70px 40px;
    font-size: 110%;
    background-image: url("../../images/mochu/main_smp.jpg");
  }
  .mochu_zoutou_in span {
    font-size: 86%;
  }
  .mochu_zoutou_in a {
    padding: 15px 15px 15px 15px;
  }
  .mochu_zoutou_in a::after {
    content: none;
  }
  .mochu_zoutou_in a::before {
    content: none;
  }
  .mochu_qa ul {
    flex-wrap: wrap;
  }
  .mochu_qa ul li {
    width: 48%;
    margin-bottom: 10px;
  }
  .mochu_qa ul.half li {
    width: 100%;
  }
  .mochu_qa ul.half li a {
    padding-left: 15px;
  }
  .mochu_qa_osusume {
    width: auto;
    margin: 0 auto 70px;
    padding: 0 4%;
    flex-direction: column;
  }
  .mochu_qa_osusume div {
    margin-bottom: 50px;
    width: auto;
  }
  h2.mochu_qa_ttl {
    font-size: 120%;
    font-weight: 600;
    margin-bottom: 20px;
    width: auto;
    background-size: 80px;
    padding-top: 80px;
  }
  /* ロータス */
  .mochu_candle_wrap {
    flex-direction: column;
    padding: 30px 20px 20px;
    margin-bottom: 50px;
  }
  .mochu_candle_in {
    width: auto;
  }
  .mochu_candle_in:last-child {
    padding: 30px 0;
    box-sizing: border-box;
    text-align: left;
  }
  .mochu_candle_in ul.hosoku {
    margin: 10px 0 30px 0;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
  }
  .mochu_candle_in ul.hosoku li {
    margin: 5px 0 5px 20px;
  }
  /* ご注文に迷ったら */
  .mochu_guidebtn a {
    font-size: 100%;
    min-height: 30px;
  }
  .mochu_pointicon {
    margin-bottom: 0 !important;
    text-align: center;
  }
  .mochu_pointicon img {
    width: 45px;
  }
  .mochu_banner {
    width: 100%;
    text-align: center;
    margin: 0 auto 20px;
  }
  .mochu_banner_in {
    padding: 10px 0;
  }
  .mochu_banner_txt {
    font-size: 100%;
    margin: 0 auto 10px;
  }
  .bnr_other {
    width: 92%;
    margin: auto;
    position: relative;
  }
  .bnr_other:before {
    content: "";
    width: 94%;
    height: 110%;
    position: absolute;
    left: 3%;
    top: -5%;
    background-color: #ccc;
    border: solid 1px #ccc;
  }
  .bnr_other a {
    color: #fff;
  }
  .bnr_other dl {
    display: flex;
    border: solid 1px #fff;
    margin-top: 20px;
  }
  .bnr_other dl dt {
    width: 100px;
    overflow: hidden;
  }
  .bnr_other dl dt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .bnr_other dl dd {
    padding: 10px 35px 10px 10px;
    box-sizing: border-box;
    width: calc(100% - 100px);
    margin: 0;
    position: relative;
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .bnr_other dl dd:before {
    right: 10px;
    width: 20px;
    height: 20px;
  }
  .bnr_other dl dd:after {
    right: 18px;
    width: 4px;
    height: 4px;
    border-top: 2px solid #76206c;
    border-right: 2px solid #76206c;
  }
}