@charset "UTF-8";
/*
共通
初めての方へ
　ごあいさつ
　サイトについて
　ご注文の流れ
商品について
　Happinessシリーズについて
　商品の特徴
　素材について
　動画
商品カテゴリー
商品詳細
注文フォーム
カテゴリ

/*共通───────────*/
.page-title {
  margin-left: 3.16%;
  margin-right: 3.16%;
}

.page-title {
  margin-top: 40px;
  font-size: clamp(2rem, 3.8vw, 4rem);
  font-family: "Klee One", cursive;
  text-align: center;
  padding-top: 4%;
  position: relative;
}

.page-title::before {
  content: "";
  width: 1px;
  height: 42%;
  display: block;
  background-color: #B99B73;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

.img-right100 {
  width: 50vw;
  margin-right: calc(50% - 50vw);
}

.img-left100 {
  width: 50vw;
  margin-left: calc(50% - 50vw);
}

@media (max-width: 600px) {
  .img-right100, .img-left100 {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    order: 1;
    margin-bottom: 30px;
  }
}
/*初めての方へ─────────────*/
/*ごあいさつ*/
#beginners-greeting {
  width: min(1085px, 100%);
  margin-left: auto;
  margin-right: auto;
  font-family: "Klee One", cursive;
}

.greeting-img {
  width: 230px;
}

.greeting-txt {
  width: calc( 100% - 300px );
}

.greeting-name {
  text-align: right;
}

.greeting-name span {
  font-size: clamp(1.8rem, 3vw, 3.2rem);
}

/*サイトについて*/
#beginners-about .ttl-style02::before {
  left: 11%;
}

.about-txt {
  width: 48%;
}

.about-img {
  width: 50%;
}

.about-img span {
  display: block;
  width: 50vw;
  margin-right: calc((50vw – 100%) * -1);
}

.about-img span img {
  width: 100%;
}

/*ご注文の流れ*/
#beginners-flow {
  background: url("../images/top-back.jpg") no-repeat;
  background-size: cover;
  margin-top: max(60px, 8%);
  padding-top: max(60px, 8%);
  padding-bottom: max(60px, 8%);
}

.flow-items {
  counter-reset: my-counter;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: max(50px, 7%);
}

.flow-items li {
  width: calc((100% - 60px) / 3);
  background-color: #F9F6EC;
  padding: 3em 1.5em 1.5em;
  border-radius: 10px;
  position: relative;
}

.flow-items li .cl-accent3 {
  font-size: clamp(1.3rem, 1.4vw, 1.4rem);
}

.flow-items li::before {
  counter-increment: my-counter;
  content: counter(my-counter);
  width: 15%;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 99999px;
  background-color: #826F60;
  color: #F9F6EC;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: -2em;
}

.flow-items li:nth-child(1), .flow-items li:nth-child(2), .flow-items li:nth-child(3) {
  margin-bottom: 60px;
}
.en {
  display: block;
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  color: #C09933;
  font-weight: 400;
}

/* loopSlider-- */
.loopSliderWrap {
  top: 0;
  left: 0;
  height: 400px;
  overflow: hidden;
  position: absolute;
}

.loopSlider {
  margin: 0 auto;
  width: 100%;
  height: 400px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.loopSlider ul {
  height: 400px;
  float: left;
  overflow: hidden;
}

.loopSlider ul li {
  width: 400px;
  height: 400px;
  float: left;
  display: inline;
  overflow: hidden;
}

.loop-item li {
  margin-bottom: 20px;
  margin-right: .5%;
  padding: 10px;
  background-color: #fff;
  color: #999;
}

.loop-item li:nth-child(odd) {
  margin-top: 30px;
}

.loop-item li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  .greeting-txt {
    width: 100%;
    margin-top: 40px;
  }

  .greeting-img {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
  }

  .about-txt {
    width: 100%;
  }

  .about-img {
    margin-top: 30px;
    width: 100%;
  }

  .about-img span {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  .flow-items li {
    width: 100%;
  }

  .flow-items li:nth-child(4), .flow-items li:nth-child(5) {
    margin-bottom: 60px;
  }

  .loopSliderWrap {
    height: 200px;
  }

  .loopSlider {
    height: 200px;
  }

  .loopSlider ul {
    height: 300px;
  }

  .loopSlider ul li {
    width: 200px;
    height: 200px;
  }
}
/*商品について────────────────*/
/*Happinessシリーズについて*/
.ttl-number {
  font-size: clamp(2rem, 3vw, 3.2rem);
}

.ttl-number span {
  display: block;
  width: fit-content;
  border-bottom: solid 2px #C09933;
  margin-bottom: .5em;
}

.series-txt {
  width: 47%;
  order: 2;
}

.series-img {
  width: min(440px, 47%);
  order: 1;
  margin-right: 6%;
}

/*商品の特徴 素材について*/
.features-txt,
.material-txt {
  width: 46%;
}

@media (max-width: 600px) {
  .series-txt {
    margin-top: 30px;
    width: 100%;
  }

  .series-img {
    margin-right: auto;
    margin-left: auto;
  }

  .features-txt {
    width: 100%;
    order: 2;
  }

  #about-material .material-txt {
    width: 100%;
    order: 1;
    margin-bottom: 30px;
  }

  #about-material .img-right100 {
    order: 2;
  }
}
/*動画*/
#about-video {
  margin-top: max(60px, 8%);
  padding-top: max(40px, 6%);
  padding-bottom: max(40px, 6%);
  background: url("../images/top-back.jpg") no-repeat;
  background-size: cover;
}

#about-video .video-inner {
  width: min(840px, 100%);
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16 / 9;
}
#about-video .video-inner iframe {
  width: 100%;
  height: 100%;
}

/*商品一覧ボタン*/
.product-list .cat-item {
  width: calc((100% - 20px) / 3);
  margin-bottom: 10px;
}

.product-list .cat-item a {
  display: block;
  width: 100%;
  padding: 1.5em;
  text-align: center;
  background-color: #C09933;
  font-size: clamp(1.6rem, 1.8vw, 2rem);
  font-weight: 700;
  color: #fff;
  border-radius: 10px;
}

.product-list .cat-item a::after {
  content: url("../images/ic-arrow.png");
  margin-left: 10px;
}

@media (max-width: 600px) {
  .product-list .cat-item {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }

  .product-list .cat-item a {
    padding: 1.3em;
  }
}
/*商品カテゴリー──────────*/
#product-top {
  padding-top: max(120px, 14%);
  margin-top: max(120px, 14%);
  padding-bottom: max(30px, 5%);
  background: url("../images/top-back.jpg") no-repeat;
  background-size: cover;
  position: relative;
}

#product-top .item-name {
  writing-mode: vertical-rl;
  text-orientation: upright;
  position: absolute;
  top: -6em;
  left: 5em;
}

#product-top .item-name span {
  display: block;
  padding: .5em .1em;
  background-color: #F9F6EC;
  font-family: "Klee One", cursive;
  letter-spacing: .2em;
  height: fit-content;
}

#product-top .item-name span.name01 {
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  margin-left: .5em;
}

#product-top .item-name span.name02 {
  font-size: clamp(2rem, 3.5vw, 3.6rem);
  font-weight: 600;
  margin-top: 2em;
}

#product-top .cat-description {
  text-align: center;
}

#product-top .product-img {
  display: flex;
  justify-content: center;
  position: absolute;
  top: -6em;
  left: 50%;
  transform: translate(-50%);
}

#product-top .product-img img {
  margin-left: 10px;
  margin-right: 10px;
}

#product-top .ttl-product {
  text-align: center;
  font-size: clamp(2rem, 3.5vw, 3.6rem);
}

#product-top .column4 {
  display: flex;
  flex-wrap: wrap;
}

#product-top .column4 li {
  width: calc((100% - 30px) / 4);
  margin-bottom: 20px;
  text-align: center;
}

.ttl-product-items {
  font-size: clamp(2rem, 3.5vw, 3.6rem);
  padding-bottom: 10px;
  border-bottom: solid 1px #5A4535;
}

.product-items .column4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-items .column4 li {
  width: calc((100% - 45px) / 4);
  margin-bottom: 40px;
  text-align: center;
}

.product-items .column4 li figure {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 10px;
}

.product-items .column4 li figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-items .column4::after {
  content: "";
  display: block;
  width: calc((100% - 45px) / 4);
}

.product-items .column4::before {
  order:1;
  content: "";
  display: block;
  width: calc((100% - 45px) / 4);
}

@media (max-width: 600px) {
  #product-top .item-name {
    position: absolute;
    top: -3em;
    left: .5em;
  }

  #product-top .product-img {
    transform: translate(-38%);
    width: 90%;
    top: -3em;
  }

  #product-top .product-img img {
    width: 40%;
    margin-left: 2px;
    margin-right: 2px;
  }

  #product-top .column4 li,
  .product-items .column4 li {
    width: calc((100% - 10px) / 2);
  }
}
/*商品詳細──────────*/
.details-price,
.details-images {
  width: 48%;
}

.details-price {
  margin-top: 40px;
}

.main-img {
  width: 100%;
  aspect-ratio: 595 / 429;
}

.main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sum-img li {
  width: calc((100% - 20px ) / 5);
  aspect-ratio: 1;
}

.sum-img li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sum-img li:not(:last-child) {
  margin-right: 5px;
}

.product-name {
  font-size: clamp(2rem, 3.2vw, 3.6rem);
  font-family: "Klee One", cursive;
}

.product-name .product-number {
  display: inline-block;
  margin-right: 20px;
  font-size: clamp(1.6rem, 1.8vw, 2rem);
}

.price-table tr {
  background-color: #F9F6EC;
}

.price-table tr th, .price-table tr td {
  border-bottom: solid 10px #fff;
}

.price-table tr th {
  text-align: left;
}

.price-table tr td {
  text-align: right;
}

.price-table tr .price-txt {
  color: #AC0003;
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  font-weight: 700;
}

.post table tr:nth-child(odd) {
  background-color: #F9F6EC;
}

.post table th {
  text-align: left;
}

@media (max-width: 600px) {
  .details-price,
  .details-images {
    width: 100%;
  }

  .post table td {
    width: 100%;
    display: block;
  }

  .post table td:nth-child(odd) {
    background-color: #F9F6EC;
  }

  .post table tr:nth-child(odd) {
    background-color: #fff;
  }
}
/*注文フォーム───────────*/
.ttl-order {
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-family: "Klee One", cursive;
}

.ttl-order span {
  font-size: clamp(1.6rem, 2vw, 2rem);
  display: inline-block;
  margin-left: 1em;
  color: #C09933;
}

/*タブ切り替え全体のスタイル*/
/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  padding: .5em;
  border-bottom: 3px solid #C09933;
  background-color: #F9F6EC;
  border-radius: 10px 10px 0 0;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  text-align: center;
  display: block;
  float: left;
  text-align: center;
  transition: all 0.2s ease;
}

.tab_item span {
  display: inline-block;
  margin-left: .5em;
  font-size: clamp(1.4rem, 1.7vw, 1.8rem);
  color: #C7BAB0;
}

@media (max-width: 600px) {
  .tab_item span {
    display: block;
    margin-right: 0;
  }
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#standard:checked ~ #standard_content,
#mini:checked ~ #mini_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #C09933;
  color: #fff;
  border: solid 1.5px #C09933;
}

.tabs input:checked + .tab_item span {
  color: #E4D3BD;
}

.product-area {
  padding: 4%;
  background-color: #fff;
  border: solid 1px #C09933;
}

.product-name_price {
  padding-bottom: .5em;
  border-bottom: solid 1px #B7B7B7;
}

.product-name_price span {
  float: right;
}

/*商品*/
.product-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 5% 1%;
  border-bottom: solid 1px #B7B7B7;
}

/*商品画像*/
.product-item-img {
  width: 47%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-item-img img {
  width: 49%;
}

/*注文内容*/
.product-item-info {
  width: 50%;
}

.item-name,
.item-price {
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  font-weight: 700;
}

.product-item-price span {
  display: inline-block;
}

.item-name, .eg {
  margin-left: .5em;
}

.eg {
  color: #C09933;
}

.item-price {
  float: right;
  color: #AC0003;
}

.order {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.order .order-details {
  width: fit-content;
}

.order .order-details select[name=frame-color] {
  width: 180px;
  padding: .7em;
}

.order .order-pieces {
  text-align: right;
  width: fit-content;
}

.order .order-pieces input[type=number] {
  width: 4em;
  padding: .7em;
}

.float-right {
  float: right;
}

@media (max-width: 840px) {
  .order {
    display: block;
  }

  .order .order-details {
    width: 100%;
  }

  .order .order-pieces {
    width: 100%;
    margin-top: 10px;
    text-align: left;
  }
}
@media (max-width: 600px) {
  .product-name_price {
    display: none;
  }

  .product-item-img {
    width: 100%;
  }

  .product-item-info {
    margin-top: 20px;
    width: 100%;
  }
}
/*注文ボタン周り*/
.place-an-order {
  //width: min(740px, 100%);
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.order-quantity {
  margin-top: 20px;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  font-weight: 700;
}
.order-quantity .size24 {
  display: inline-block;
  margin-left: .5em;
}

.total-pieces {
  display: inline-block;
  margin-left: 2em;
}

.total-box {
  padding-top: 1em;
  padding-bottom: 2.5em;
  background-color: #F9F6EC;
}

.total {
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  font-weight: 700;
  border-bottom: solid 1px #5A4535;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.total-price {
  display: inline-block;
  margin-left: 2em;
}

.customer-id {
  margin-top: 2em;
  font-size: clamp(1.8rem, 2.3vw, 2.4rem);
  line-height: 1;
}
.customer-id input {
  padding: 12px;
  border: solid 1px #5A4535;
  width: 18em;
}

.order-btn input, .order-btn button {
  width: min(360px, 80%);
  margin-left: auto;
  margin-right: auto;
  padding: .7em;
  background-color: #5A4535;
  color: #fff;
  font-size: clamp(1.8rem, 2.3vw, 2.4rem);
  font-weight: 700;
  border-radius: 10px;
}

@media (max-width: 600px) {
  .customer-id input {
    margin-top: 10px;
  }
}
/*お問い合わせ──────────────*/
#contact-form-area {
  width: min(800px, 100%);
  margin-left: auto;
  margin-right: auto;
}
#contact-form-area dt {
  margin-top: 1.5em;
  margin-bottom: .1em;
  font-weight: 700;
}
#contact-form-area input[type=text], #contact-form-area textarea, #contact-form-area input[type=tel], #contact-form-area input[type=email] {
  padding: 15px;
  border: 1px solid #ccc;
  width: 100%;
}
#contact-form-area input[type=submit] {
  margin-top: max(60px, 8%);
}

.his {
  font-size: 1.2rem;
  color: #AC0003;
  display: inline-block;
  margin-left: .2em;
}

/*お知らせ────────────────*/
.post p, .post figure, .post table, .post ul, .post ul {
  margin-top: 25px;
}

.post strong {
  font-weight: 700;
}

.post h2, .post h3, .post h4, .post h5 {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  font-weight: 700px;
  margin-bottom: 10px;
}

.oldpage, .newpage a {
  font-size: 1.4rem;
}

.oldpage {
  width: 50%;
  border-right: solid 1px #ccc;
}

.post-btn a {
  display: block;
  color: #666;
  background-color: #EFEFEF;
  padding: 5px 20px;
  text-align: center;
  margin: auto;
  border-radius: 10px;
  width: fit-content;
  font-size: 1.4rem;
}

.post-list {
  width: min(800px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.post-list dt {
  float: left;
  clear: both;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

.post-list dd {
  padding-left: 7em;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: solid 1px #B5B5B4;
}

.post-list dd a {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) {
  .post-list dt {
    float: none;
    padding-top: 1.5em;
    padding-bottom: 0;
  }

  .post-list dd {
    padding-left: 0;
    padding-top: .3em;
  }
}
/*ページャ───────────────*/
.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.page-numbers li {
  margin-left: 5px;
  margin-right: 5px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #EBEBEB;
}

.page-numbers li .current {
  color: #fff;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.page-numbers li a {
  display: block;
}
/*追加───────────────*/
.wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th {
	border: none;
	padding: 15px;
}
}