@charset "UTF-8";

/* ************************************************************************************************
   1280px / ラップトップ
   ************************************************************************************************ */
@media screen and (max-width: 1280px) {

  /***** トップページ *****/
  /***** ヘッダー @1280px *****/
  .header-nav {
    display: none;
  }

  #nav-drawer {
    display: block;
  }

  header .container {
    padding: 0px 2rem;
  }

  /***** 製作一覧*インスタギャラリー @1280px *****/
  /* img.GraphImage,
  img.GraphVideo,
  img.GraphSidecar {
    width: 285px;
    height: 285px;
  } */

  /***** お得なポイント @1280px *****/
  .banner {
    background: #fff;
    color: #232120;
    padding: 5rem;
    width: 75%;
    margin: 0 auto;
    text-align: center;
    background: rgb(35 33 32 / 5%);
  }

}


/* ************************************************************************************************
   960px / タブレット横
   ************************************************************************************************ */
@media screen and (max-width: 960px) {

  /***** 共通 @960px *****/
  h2 {
    font-size: 3rem;
  }

  h4 {
    font-size: 2.3rem;
  }

  .btn1,
  .btn2,
  .nav-previous,
  nav-next {
    font-size: 1.5rem;
  }

  .container {
    width: 100%;
    margin: 0 auto;
    padding: 0 2%;
  }

  .index__ttl {
    margin-bottom: 3rem;
  }


  /***** フッター @960px *****/
  .access {
    background-size: cover;
    padding: 8rem 0;
  }

  .access__container {
    width: 80%;
    padding: 4rem;
    margin: 0 auto;
  }

  .access__contents {
    display: block;
  }

  .access__contents iframe {
    width: 100%;
  }

  .access__item {
    width: 100%;
    text-align: center;
    margin: 0;
  }

  .access__ttl {
    margin-bottom: 3rem;
  }

  .access__txt {
    margin-bottom: 2rem;
  }

  .footer__tel {
    text-align: center;
    display: inline-block;
  }


  /***** 下層ページヘッダー @960px *****/
  .header-sub {
    height: 50vh;
    margin-bottom: 5rem;
  }

  .header-sub__item {
    padding-top: 4rem;
  }

  .header-sub__ttl {
    margin-bottom: 1rem;
  }

  /***** トップページ *****/
  /***** メインビジュアル @960px *****/
  .header-main {
    padding: 8rem 0;
  }

  .header-main {
    height: 45vh;
  }

  .header-main__img {
    width: 36%;
    top: 20%;
    right: 6%;
    z-index: 9;
  }


  /***** 最新情報 @960px *****/
  .news__contents {
    display: block;
  }

  .news__item {
    width: 100%;
    margin-bottom: 2rem;
  }

  .banner {
    width: 100%;
  }

  /***** 製作一覧/インスタギャラリー @960px *****/
  /* ul#wis-slides li:nth-last-child(-n+11) {
    display: none;
  } */

  /***** 下層ページ *****/
  /***** 当店について @960px *****/
  .concept01 {
    padding: 4rem 0 8rem;
  }

  .concept02 {
    padding: 8rem 0 4rem;
  }

  .concept__bg {
    height: 60vh;
  }

  .concept02__container {
    width: 100%;
  }

  .concept02__item {
    width: 320px;
    height: 320px;
    padding: 2rem;
    margin: 0 2rem 6rem;
  }

  .concept02__txt {
    margin-top: 2rem;
  }

  .concept02__image img {
    height: 495px;
    width: 100%;
  }

  .concept02 .container {
    display: block;
  }

  .concept02__class--left,
  .concept02__class--right {
    width: 100%;
    margin: 0 auto 3rem;
  }

  /***** 店舗案内 @960px *****/
  .access02__txtbox {
    margin: 0;
  }

  .access02__slogan__ttl {
    margin-bottom: 2rem;
  }

  .access02__slogan__txt {
    width: 100%;
  }

  .access02__imgbox {
    display: block;
  }

  .access02__imgbox img {
    width: 100%;
    max-height: 395px;
    height: 100%;
  }

  .access02__table {
    width: 90%;
    margin: 0 auto 6rem;
    font-size: 1.4rem;
  }

  .access02__table th {
    padding: 1.5rem;
  }

  .access02__table td {
    padding: 1.5rem;
  }

  .access02__footer {
    padding: 0.5rem 0 8rem;
  }

  /***** 下層ページ/info配下 *****/
  /***** 最新情報/archive-news.php　@960px *****/
  .news02 {
    margin: 0 0 5rem;
  }

  .news02 .container {
    display: block;
  }

  .news02__post {
    margin-bottom: 2rem;
    width: 95%;
  }

  .news02__blog_info {
    font-size: 1.2rem;
  }

  /***** 商品一覧/category.php @960px *****/
  .flowers-category__box {
    gap: 30px;
  }

  .flowers-category__box ul li.flowers-category-ttl {
    font-size: 1.25rem;
  }

  ul.page-numbers {
    margin-bottom: 0;
    margin-top: 45px;
  }

  /***** 商品一覧/single.php @960px *****/
  .single02 {
    margin: 0 0 5rem;
  }

  .single .header-sub__item {
    padding-top: 6rem;
  }

  .single02__blog_info {
    font-size: 1.2rem;
  }

  /***** ご注文お問い合わせ/page.php @960px *****/
  .entry {
    margin: 0 0 4rem;
  }

  .order__deal {
    width: 100%;
  }

  div#ui-datepicker-div {
    width: 40%;
  }

}

/* ************************************************************************************************
   768px / タブレット縦
   ************************************************************************************************ */
@media screen and (max-width: 768px) {

  /***** トップページ *****/
  /***** 最新情報 @768px *****/
  .news .container {
    display: block;
  }

  /***** 製作一覧/インスタギャラリー @768px *****/
  /* ul#wis-slides li:nth-last-child(-n+12) {
    display: none;
  } */

  /***** オーダー @768px *****/
  .order {
    margin-top: 0;
  }

  /***** コンセプトとケア @768px *****/
  .main__contents1,
  .main__contents2 {
    display: block;
  }

  .main__image,
  .main__item {
    width: 100%;
    margin: 0;
  }

  .main__item {
    padding: 4rem 40px 0;
  }

  /***** フェイスブック @768px *****/
  .facebook_box {
    padding: 4rem 0;
  }

  .facebook__wrap {
    padding: 0 1rem;
    width: 100%;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .fb-page {
    text-align: center !important;
    margin: 0 auto !important;
  }

  /***** 下層ページ *****/
  /***** 当店について @768px *****/
  .concept02__image {
    display: block;
  }

  .concept02__image img {
    width: 90%;
    height: 595px;
    margin: 0 auto;
    display: block;
  }

  /***** お花の管理方法 @768px *****/
  .recruit02__box {
    display: block;
  }

  .recruit02__item {
    width: 100%;
    margin-bottom: 2rem;
  }

  .recruit02__img {
    display: block;
    margin: 0 auto;
  }

  /***** 下層ページ/info配下 *****/
  /***** 最新情報/archive-news.php　@768px *****/
  .--bcnews02 {
    margin-left: 2rem;
    margin-bottom: 4rem;
  }

  .news02 .container {
    display: block;
  }

  .news02__post {
    width: 95%;
    margin: 0 auto 2.5rem;
  }

  /***** 商品一覧/category.php @768px *****/
  .widget-area {
    width: 50%;
  }

  /***** 商品一覧/single.php @768px *****/
  .flowers-single__detail__unit.flex {
    display: block;
    margin: 5rem 0 5rem;
  }

  .flowers-single__thumb,
  .flowers-single__coher {
    width: 100%;
  }

  .flowers-single__thumb img {
    display: block;
    margin: 0 auto 2rem;
  }

  table.flowers-single__table {
    width: 100%;
  }

  /***** ご注文・お問い合わせ/page.php @768px *****/
  .order__payment {
    width: 85%;
  }

  .order-form {
    width: 100%;
  }

  table.order-form tr th,
  table.order-form tr td {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  table.order-form tr th {
    padding-bottom: 0;
    text-align: left;
  }

}


/* ************************************************************************************************
  560px / スマホ 大
************************************************************************************************ */
@media screen and (max-width: 560px) {

  /***** 共通 @560px*****/
  h2 {
    font-size: 2.2rem;
  }

  h3 {
    font-size: 1.9rem;
  }

  h4 {
    font-size: 1.8rem;
  }

  h5 {
    font-size: 1.6rem;
  }

  p {
    font-size: 1.2rem;
  }

  a {
    font-size: 1.2rem;
  }

  img {
    max-width: 100%;
  }

  .sp--br {
    display: block;
  }

  .sub__line {
    margin: 1rem auto 2rem;
  }

  /* ボタン */
  .btn1,
  .btn2,
  .nav-previous,
  .nav-next {
    font-size: 1.3rem;
    width: 171px;
    height: 45px;
    line-height: 45px;
  }

  /* ページトップボタン */
  #page_top,
  #page_top a {
    width: 50px;
    height: 50px;
  }

  .index__ttl {
    margin-bottom: 4rem;
  }

  /***** ヘッダー @560px*****/
  header,
  header .container {
    height: 60px;
  }

  .header__ttl img {
    width: 85%;
  }

  #nav-content {
    width: 50% !important;
  }

  .header-sp__list {
    margin-bottom: 3rem !important;
  }

  .header-sp__item {
    font-size: 1.2rem;
  }


  /***** 下層ページヘッダー @560px*****/
  .header-sub__item {
    padding-top: 4rem;
  }


  /***** フッター @560px *****/
  .access {
    padding: 5rem 0;
  }

  .access__container {
    width: 100%;
    padding: 4rem 2rem;
  }

  .access__contents iframe {
    width: 100%;
    height: 45vh;
  }

  .access__item {
    margin-top: 3rem;
  }

  .access__ttl {
    margin-bottom: 2rem;
  }

  .access__txt {
    margin-bottom: 2rem;
  }

  .access__tel {
    margin-top: 3rem;
  }

  small {
    font-size: 1.1rem;
  }


  /***** トップページ *****/
  /***** メインビジュアル @560px *****/
  .js-slick .header-main {
    background-position: center center;
    background-size: cover;
    height: 100vh;
    position: relative;
    width: 100%;
  }

  .js-slick .slider-items01 {
    background-image: url(images/sp/index_sp-slide_bg01.jpg.webp);
  }
  .no-webp .js-slick .slider-items01 {
    background-image: url(images/sp/index_sp-slide_bg01.jpg);
  }

  /***** 最新情報 @560px *****/
  .news__item {
    display: block;
    margin-bottom: 2rem;
    padding: 2rem;
  }

  .news__thumbnail img {
    margin-bottom: 1.5rem;
  }

  .news__ttl a {
    font-size: 1.25rem;
  }

  .news__date {
    font-size: 1.1rem;
  }

  /***** 製作一覧/インスタギャラリー @560px *****/
  /* img.GraphImage,
  img.GraphVideo,
  img.GraphSidecar {
    width: 165px;
    height: 165px;
  } */

  /***** コンセプトとケア @560px *****/
  .main,
  .care {
    padding: 4rem 0 0;
  }

  .main__contents1,
  .main__contents2 {
    display: block;
    margin-bottom: 5rem;
  }

  .main__item {
    width: 100%;
    margin-bottom: 2rem;
  }

  .main__img {
    width: 100%;
  }

  .main__contents1 {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
  }

  .main__contents1 .main__item {
    order: 1;
  }

  .main__contents1 .main__img {
    order: 2;
  }

  /***** 下層ページ *****/
  /***** 当店について @560px *****/
  .concept01 {
    padding: 3rem 0 5rem;
  }

  .concept02 {
    padding: 5rem 0 3rem;
  }

  .concept01__txt {
    text-align: left;
    margin-top: 2rem;
  }

  .concept__bg {
    height: 45vh;
  }

  .concept02__item {
    padding: 4rem 2rem;
    margin: 0 0 4rem;
  }

  .concept02__txt {
    margin-top: 3rem;
  }

  /***** 店舗案内 @560px *****/
  .access02__table {
    width: 90%;
    margin: 0 auto 5rem;
    font-size: 1.2rem;
  }

  .access02__table th {
    padding: 1.5rem 0 0;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
  }

  .access02__table td {
    display: block;
    text-align: center;
    width: 100%;
  }

  .access02 iframe {
    height: 50vh;
  }

  .access02__footer {
    padding: 0.5rem 0 5rem;
  }

  .concept02__ttl--all {
    margin-bottom: 2rem;
  }

  /***** お花の管理方法 @560px *****/
  .recruit01,
  .recruit02 {
    padding: 0 0 4rem;
  }

  .recruit02__box {
    margin: 0 auto 2rem;
    padding: 2rem 1rem;
  }

  .recruit02__txt {
    margin-top: 2rem;
  }

  /***** 下層ページ/info配下 *****/
  /***** 最新情報/archive-news.php @560px *****/
  .news02 {
    margin: 0 0 3rem;
  }

  .news02__post {
    display: block;
    padding: 2rem;
    margin: 0 auto 2rem;
    width: 100%;
  }

  .news02__thumbnail img {
    margin-bottom: 1.5rem;
  }

  .news02__blog_info {
    font-size: 1.1rem;
  }

  .category__ttl a {
    font-size: 2.6rem;
  }

  /***** 最新情報/single-news.php @560px *****/
  .breadcrumb li a {
    padding: 0;
  }

  /***** 商品一覧/category.php @560px *****/
  .single02 {
    margin: 0 0 3rem;
  }

  .single02__contents {
    width: 100%;
    margin: 2rem auto 4rem;
  }

  .single__line {
    margin: 4rem auto 3rem;
  }

  .footer__widget {
    display: block;
  }

  .widget-area {
    width: 100%;
    margin-bottom: 3rem;
  }

  .footer__widget h5 {
    font-weight: bold;
  }

  .footer__widget li {
    font-size: 1.2rem;
  }

  /***** 商品一覧/single.php @560px *****/
  .flowers {
    padding: 0 20px;
  }

  .order__soldout {
    font-size: 1.5rem;
  }

  /***** 製作一覧/page-gallery.php @560px *****/
  .page-gallery {
    padding: 4rem 0px;
  }

  .gallery_btn--bg {
    height: 250px;
  }

  /***** ご注文・お問い合わせ/page.php @560px *****/
  .order__ttl {
    font-size: 1.75rem;
    padding-bottom: 16px;
    margin-bottom: 2rem;
    width: 100%;
  }

  .order__txt {
    font-size: 1.3rem;
  }

  .order-form tr td.check-box.--flex {
    display: block;
    line-height: 1.4;
  }

  .order-form tr th,
  .order-form tr td {
    padding: 1rem 0;
  }

  input[type="text"],
  input[type="email"],
  input[type="file"] {
    width: 100%;
  }

  textarea {
    width: 100%;
    height: 200px;
  }

  .order__deal {
    padding: 3rem 1rem;
    margin: 5rem auto;
  }

  div#ui-datepicker-div {
    width: 55%;
  }

  .order-form tr th.section_ttl {
    font-size: 15px;
  }

  .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output, .wpcf7 form .wpcf7-response-output {
    width: 100%;
  }
}

/* ************************************************************************************************
  375px / スマホ 中
************************************************************************************************ */
@media screen and (max-width: 375px) {

  /***** トップページ *****/
  .index__ttl {
    margin-bottom: 2rem;
  }

  .header-main,
  .menu,
  .news {
    padding: 4rem 0;
  }

  .flowersart {
    margin-top: 0;
  }

  .order {
    padding: 10rem 0;
    margin: 0 auto 4rem;
  }

  .main__contents1,
  .main__contents2 {
    margin-bottom: 0;
  }

  .banner__txt {
    font-size: 14px;
  }

  /* img.GraphImage,
  img.GraphVideo,
  img.GraphSidecar {
    width: 155px;
    height: 155px;
  } */

  /***** 下層ページ *****/
  /**** 当店について @375px *****/
  .concept02__image img {
    height: 325px;
  }

  /***** 下層ページ/info配下 *****/
  /**** 商品一覧/single.php @375px *****/
  .breadcrumb {
    margin-bottom: 3rem;
  }

  /**** ご注文・お問い合わせ/page.php @375px *****/
  .order__payment {
    width: 100%;
  }
}


/* ************************************************************************************************
   320px / スマホ 小
   ************************************************************************************************ */
@media screen and (max-width: 320px) {

  /***** 共通 @320px*****/
  h2 {
    font-size: 2.4rem;
  }

  h3 {
    font-size: 2.1rem;
  }

  h4 {
    font-size: 1.8rem;
  }

  h5 {
    font-size: 1.5rem;
  }

  p {
    font-size: 1.2rem;
  }


  /**** フッター @320px *****/
  .access__contents iframe {
    height: 40vh;
  }

  .access__tel {
    font-size: 2.2rem;
  }

}