/* PC、スマホ共通スタイル */
* {
    box-sizing: border-box;
  }
  
  p {
    font-size: 15px;
  }
  
  body {
    background-color: #000000;
    max-width: 1200px;
    margin: 0 auto 0 auto;
    font-family: "Source Sans Pro", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
  }

  /* ヘッダー */

/* メニューのスタイル */
.menu {
  position: fixed;
  top: 0;
  right: -100%; /* 初期状態では画面の外に隠れている */
  width: 300px;
  height: 100%;
  background-color: #000000;
  color: #ffffff;
  transition: right 0.3s ease; /* スライドインのアニメーション */
  padding: 20px;
  box-sizing: border-box;
  z-index: 10;
}

/* メニューが開いているとき */
.menu.open {
  right: 0;
}

/* ボタンのスタイル */
.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  cursor: pointer;
  z-index: 20;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #ffffff;
  margin: 5px 0;
  transition: 0.4s;
}

/* バツ印に変化するスタイル */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* メニューリストのスタイル */
.menu ul {
  list-style-type: none;
  padding: 0;
  margin-top: 80px;
}

.menu li {
  padding: 20px 0;
  border-bottom: 1px solid #ffffff;
}

.menu li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
}


  /* メインビジュアル */
  #main-visual {
    position: relative;
    
  }


  /* 見出し*/
  h1 {
    margin: 40px 0 0 0;
    font-size: 40px;
  }

  /* 注意事項 */
  #precautions {
    margin: 80px auto;
    color: #ffffff;
  }

  /* 赤枠注意　設定 */
  .box-005 {
    max-width: 100%;
    margin: 0 auto;
    border: 2px solid #f06060;
    border-radius: 5px;
    color: #ffffff;
}

.box-005 div {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #ffffff;
    color: #f06060;
    font-weight: 600;
    vertical-align: top;
}

.box-005 div::before {
    width: 22px;
    height: 22px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}

.box-005 p {
    margin: 0;
    padding: 0 1.5em 1em;
}

   /* 料金一覧 */
   #pricelist {
    margin: 80px auto;
    color: #ffffff;
  }

  #pricelist-flex {
    display: flex;
  }

  #pricelist-flex > div {
    width: 50%;
    margin: 20px;
  }

  #price-photo {
    width: 50%;
  }


  /* SAMPLE*/
  #sample {
    margin: 80px auto;
    color: #ffffff;
  }

  #sample-flex {
    display: flex;
  }

  #sample-flex > div {
    width: 50%;
    margin: 20px;
  }

  #sample-photo {
    width: 50%;
  }

  /* 会社概要 */
  #company {
    margin: 80px auto;
    color: #ffffff;
  }

  #company-table {
    width: 100%;
  }

  .tableheader {
    color: #ffffff;
    text-align: left;
    padding: 20px;
    border-bottom-color: #2710d5;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    width: 100px;
  }

  .tableheader-first {
    color: #ffffff;
    border-top-color: #2710d5;
    border-top-width: 1px;
    border-top-style: solid;
  }

  .cell {
    padding: 30px;
    border-bottom-color: #ececec;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    color: #ffffff;
  }

  .cell-first {
    border-top-color: #ececec;
    border-top-width: 1px;
    border-top-style: solid;
    color: #ffffff;
  }

  #company > iframe {
    width: 100%;
    height: 368px;
    margin-top: 40px;
  }

 /* コンタクト */
 #contact {
  color: #ffffff;
 }

  /* フッター */
  footer {
    background-color: #00110b;
    text-align: center;
    padding: 80px 80px 30px 80px;
    color: #ffffff;
  }

  #footer-logo {
    margin-bottom: 30px;
  }

  #footer-link > a {
    text-decoration: none;
    margin: 10px;
    color: #ffffff;
  }

  #footer-link > a:hover {
    text-decoration: underlink;
  }

  #sns-footer {
    display: flex;
    justify-content: space-between;
    text-align: left;
  }

  #sns-footer img {
    width: 50px;
  }

  #sns-footer a {
    margin-right: 30px;
  }

  #copyright {
    color: #ffffff;
    margin: 0;
    padding: 35px 0 0 0;
  }

  /* pricelist.html用スタイル */
/* 料金表のメインビジュアル */
.pricelist-main-inner {
  background-image: url("images/pricelist/pricelist-main.png");
  background-repeat: no-repeat;
  background-position-y: center;
}

#pricelist-title {
  width: 368px;
  color: #ffffff;
  height: 496px;
  position: relative;
}

#pricelist-title h1 {
  position: absolute;
  top: 0;
  left: 100px;
  font-size: 80px;
  line-height: 1;
}

#pricelist-title h1 span {
  font-size: 26px;
}

#pricelist-title > p {
  position: absolute;
  top: 350px;
  left: 100px;
  font-size: 20px;
}

/* サイズ一覧 */
.pricelist-size {
  display: flex;
  padding: 20px 20px 0;
}

.pricelist-size .pricelist-size-img {
  width: 450px;
}

/* 左が画像のサイズ */
.pricelist-size-left .pricelist-size-img img {
  width: 100%;
  padding: 0 30px 30px 0;
}

.pricelist-size-left .pricelist-read {
  width: 50%;
  flex-grow: 1;
}

.pricelist-size-left .pricelist-read p {
  margin-bottom: 0;
}

/* 右が画像のカテゴリー */
.pricelist-size-right {
  justify-content: space-between;
}

.pricelist-size-right .pricelist-size-img img {
  width: 100%;
  padding: 0 30px 30px 0;
}

.pricelist-size-right .pricelist-read {
  width: 50%;
  flex-grow: 1;
}

.pricelist-h2 {
  font-size: 40px;
  margin: 0;
}

.pricelist-h3 {
  font-size: 40px;
  margin: 0;
}

.pricelist-read {
  color: #ffffff;
}

.pricelist-read p {
  font-size: 20px;
}

/* sample.html用スタイル */
/* サンプルページ */
.sample-main-inner {
  background-image: url("images/sample/sample-main.png");
  background-repeat: no-repeat;
  background-position-y: center;
}

#sample-title {
  width: 368px;
  color: #ffffff;
  height: 496px;
  position: relative;
}

#sample-title h1 {
  position: absolute;
  top: 0;
  left: 100px;
  font-size: 80px;
  line-height: 1;
}

#sample-title h1 span {
  font-size: 26px;
}

#sample-title > p {
  position: absolute;
  top: 350px;
  left: 100px;
  font-size: 20px;
}

/* カテゴリー */
.sample-category {
  display: flex;
  padding: 20px 20px 0;
}

.sample-category .sample-category-img {
  width: 450px;
}

/* 左が画像のカテゴリー */
.sample-category-left .sample-category-img img {
  width: 100%;
  padding: 0 30px 30px 0;
}

.sample-category-left .sample-read {
  width: 50%;
  flex-grow: 1;
}

.sample-category-left .sample-read p {
  margin-bottom: 0;
}

/* 右が画像のカテゴリー */
.sample-category-right {
  justify-content: space-between;
}

.sample-category-right .sample-category-img img {
  width: 100%;
  padding: 0 30px 30px 0;
}

.sample-category-right .sample-read {
  width: 50%;
  flex-grow: 1;
}

.sample-h2 {
  font-size: 40px;
  margin: 0;
}

.sample-h3 {
  font-size: 40px;
  margin: 0;
}

.sample-read {
  color: #ffffff;
}

.sample-read p {
  font-size: 20px;
}

/* westernstyle/html用スタイル */
.sample-western {
  display: flex;
  margin-top: 50px;
  margin-bottom: 50px;
}

.western {
  justify-content: space-around;
}

.western img {
  padding-right: 30px;
  padding-bottom: 30px;
}

/* organism.html用スタイル */
.sample-organism {
  display: flex;
  margin-top: 50px;
  margin-bottom: 50px;
}

.organism {
  justify-content: space-around;
}

.organism img {
  padding-right: 30px;
  padding-bottom: 30px;
}

/* japanese.html用スタイル */
.sample-japanese {
  display: flex;
  margin-top: 50px;
  margin-bottom: 50px;
}

.japanese {
  justify-content: space-around;
}

.japanese img {
  padding-right: 30px;
  padding-bottom: 30px;
}

/* flower.html用スタイル */
.sample-flower {
  display: flex;
  margin-top: 50px;
  margin-bottom: 50px;
}

.flower {
  justify-content: space-around;
}

.flower img {
  padding-right: 30px;
  padding-bottom: 30px;
}

  /*====================
  スマートフォン用のスタイル
 =====================*/
 @media screen and (max-width: 770px) {

   /* メインビジュアル */
   #main-visual {
    position: relative;
    height: 470px;
  }

  #main-visual > div {
    text-align: center;
    height: 280px;
  }

  #main-visual > div > p {
    margin: 0;
    font-size: 15px;
  }

  #main-visual > img {
    width: 100%;
    border-radius: 476px 0 0 0;
    top: auto;
    bottom: 0;
  }

  /*見出し*/
  h2 {
    margin: 15px 0 15px 0;
  }
  
  h3 {
    font-size: 24px;
    margin: 10px 0 0 0;
  }

/*  注意事項 */
#precautions {
  margin: 80px 20px 80px 20px;
}

#precautions > div {
  flex-direction: column;
}

.culture-table th {
  font-size: 16px;
}

.culture-table {
  margin-right: 0;
  padding-right: 20px;
  order: 2;
}

.culture-img {
  width: 100%;
  order: 1;
}

.culture-img2 {
  margin-top: 0;
}

.culture-num {
  padding: 0;
}

.culture-description {
  margin: 0;
}

/* 料金表 */
#pricelist {
  margin: 20px 0 20px 0;
  padding: 0 20px 0 20px;
}

#pricelist-flex {
  flex-direction: column;
}

#pricelist-flex > div {
  width: 100%;
  margin: 0;
}

/* SAMPLE */
#sample {
  margin: 20px 0 20px 0;
  padding: 0 20px 0 20px;
}

#sample-flex {
  flex-direction: column;
}

#sample-flex > div {
  width: 100%;
  margin: 0;
}

/*会社概要*/
#company {
  margin: 0 20px 0 20px;
}

#company > h3 {
  margin-bottom: 20px;
}

.tableheader {
  width: 50px;
}

.cell {
  padding: 20px;
}

#company > iframe {
  height: 240px;
}

/* お問い合わせ */
#contact {
  margin: 80px 0 80px 0;
}

#contact > h3 {
  margin-bottom: 20px;
}

 /* フッター */
 footer {
  padding: 30px 20px 50px 20px;
  text-align: left;
}

#footer-link > a {
  margin: 0 20px 30px 0;
  display: block;
  background-image: url("images/arrow.png");
  background-repeat: no-repeat;
  background-position: right top;
}

#footer-link > a:hover {
  text-decoration: underline;
}

#sns-footer {
  flex-direction: column;
  justify-content: flex-start;
}

#copyright {
  font-size: 12px;
  margin-top: 30px;
}

/*  pricelist.html用スタイル */
/*  料金表のメインビジュアル */
#pricelist-main {
  height: 256px;
  margin-top: 4%;
  position: relative;
}

.pricelist-main-inner {
  height: 55%;
  background-size: cover;
}

#pricelist-title {
  width: 136px;
  height: 256px;
  position: absolute;
  top: -10%;
}

#pricelist-title h1 {
  left: 20px;
  font-size: 30px;
}

#pricelist-title h1 span {
  font-size: 18px;
}

#pricelist-title > p {
  top: 100px;
  left: 20px;
  font-size: 13px;
}

/* 料金表ページ　*/
.pricelist-size {
  flex-direction: column;
}


.pricelist-size .pricelist-size-img {
  width: 100%;
}

.pricelist-size .pricelist-size-img img {
  width: 100%;
  padding: 0;
}


.pricelist-size-left .pricelist-read {
  width: 100%;
  flex-grow: 1;
}

.pricelist-size-right .pricelist-read {
  width: 100%;
  flex-grow: 1;
}
/* sample.html用スタイル
/* サンプルページ */
#sample-main {
  height: 256px;
  margin-top: 4%;
  position: relative;
}

.sample-main-inner {
  height: 55%;
  background-size: cover;
}

#sample-title {
  width: 136px;
  height: 256px;
  position: absolute;
  top: -10%;
}

#sample-title h1 {
  left: 20px;
  font-size: 30px;
}

#sample-title h1 span {
  font-size: 18px;
}

#sample-title > p {
  top: 100px;
  left: 20px;
  font-size: 13px;
}

/* カテゴリー */
.sample-category {
  flex-direction: column;
}

.sample-category .sample-category-img {
  width: 100%;
}

.sample-category .sample-category-img img {
  width: 100%;
  padding: 0;
}

.sample-category-left .sample-read {
  width: 100%;
  flex-grow: 1;
}


.sample-category-right .sample-read {
  order: 2;
  width: 100%;
}
  }