@charset "utf-8";
/*===============================================
アクセス(access/)と工房(workshop/)のタブレット・スマートフォン表示。
about-us.css と about-us_smart.css は .MainSetDiv などをパソコン用の固定幅(900〜960px)のまま使っており、
992px 以下では横にはみ出すため、中身を画面の幅に合わせる。
===============================================*/
@media screen and (max-width: 992px) {
  .MainSetDiv,
  .MainSetDiv_MainImgDiv,
  .MainSetDiv_ContentsDiv,
  .MainSetDiv_LeftDiv,
  .MainSetDiv_LeftDiv_WidthDiv,
  .MainSetDiv_LeftDiv_HeightDiv {
    width: auto;
    max-width: 100%;
    height: auto;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  .MainSetDiv {
    padding-left: 16px;
    padding-right: 16px;
  }
  #MainSetDiv_Start {
    margin-top: 20px;
  }
  .MainSetDiv img {
    max-width: 100%;
    height: auto;
  }
  .MainSetDiv_MainImgDiv img,
  .MainSetDiv_LeftDiv_WidthDiv img {
    width: 100%;
  }
  .MainSetDiv iframe {
    width: 100%;
    max-width: 100%;
  }

  /* 2枚並びの写真は、横幅を半分ずつにして並べたままにする */
  .MainSetDiv_LeftDiv_HeightDiv_LeftDiv,
  .MainSetDiv_LeftDiv_HeightDiv_RightDiv,
  .MainSetDiv_LeftDiv2,
  .MainSetDiv_RightDiv2 {
    float: left;
    width: calc(50% - 2px);
    margin: 0;
  }
  .MainSetDiv_LeftDiv_HeightDiv_LeftDiv,
  .MainSetDiv_LeftDiv2 {
    margin-right: 4px;
  }
  /* 半分ずつの枠の中の写真の枠(ギフトラッピングでは 298px などに固定されている) */
  .MainSetDiv_LeftDiv_HeightDiv_LeftDiv_width,
  .MainSetDiv_LeftDiv_HeightDiv_RightDiv_height {
    width: auto;
    max-width: 100%;
    height: auto;
  }
  .MainSetDiv_LeftDiv_HeightDiv_LeftDiv img,
  .MainSetDiv_LeftDiv_HeightDiv_RightDiv img,
  .MainSetDiv_LeftDiv2 img,
  .MainSetDiv_RightDiv2 img {
    width: 100%;
  }

  /* 工房: 縦書きの題字の画像と文章を、写真の下に横並びで置く */
  .MainSetDiv_RightDiv {
    float: none;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 24px 0 0;
  }
  .MainSetDiv_RightDiv_TitleDiv {
    flex: 0 0 auto;
  }
  .MainSetDiv_RightDiv_TitleDiv img {
    width: 80px;
    height: auto;
  }
  .MainSetDiv_RightDiv_SentenceDiv {
    flex: 1 1 auto;
    min-width: 0;
  }
  .MainSetDiv_RightDiv_SentenceDiv br {
    display: none;
  }
}