/* 共通 */

body {
  margin: 0;
  font-family: "Shimanami JIS2004", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

.page-fadein {
  animation: fadein 3s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

h1, h2, h3, h4 {
  margin: 0%;
}

h3 {
  font-weight: normal;
  font-size: 16px;
}

h4 {
  font-weight: normal;
  font-size: 14px;
}

p {
  margin: 0;
}

img {
  vertical-align: bottom;
}

.container {
  /* outline: 1px solid red; */
  margin: 0 16px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity .3s;
}

a:hover {
  opacity: .7;
}

#anchor {
  padding-top: 100px;
  margin-top: -100px;
}


/* 矢印ボタン */

.moreLinkText {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
  font-family: 'Josefin Slab', "Shimanami JIS2004",serif;
  font-size: 15px;
  letter-spacing: 0.1em;
}

.lineArrow {
  width: 140px;
  height: 10px;
  border-bottom: 1px solid red;
  border-right: 1px solid red;
   /*傾きを調節*/
  transform: skew(45deg);
  /*下線矢印をテキストに合わせてうまい具合にはめる*/
  margin: -2px auto 0
}



/* ヘッダー */

header {
  padding: 12px 0;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo img {
  width: 80px;
}



/* ハンバーガー */

/* ハンバーガー クリック前 */

.nav_toggle {
  display: block;
  position: relative;
  width: 1.75rem;
  height: 1rem;
  cursor: pointer;
  margin-left: auto;
}
.nav_toggle i {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #333;
  position: absolute;
  transition: transform .5s, opacity .5s;
}
.nav_toggle i:nth-child(1) {
  top: 0;
}
.nav_toggle i:nth-child(2) {
  top: 0;
  bottom: 0;
  margin: auto;
}
.nav_toggle i:nth-child(3) {
  bottom: 0;
}

/* ハンバーガー クリック後 */

.nav_toggle.show i:nth-child(1) {
  transform: translateY(6.5px) rotate(-45deg);
}
.nav_toggle.show i:nth-child(2) {
  opacity: 0;
}
.nav_toggle.show i:nth-child(3) {
  transform: translateY(-8.5px) rotate(45deg);
}



/* メニューリスト オーバーレイ */

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.95);
  text-align: center;
  padding: 12px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s;
  z-index: 99;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.overlay #close {
  cursor: pointer;
}

.overlay nav {
  margin-bottom: 64px;
  max-height: calc(100vh - 100px);
  overflow-y: scroll;
}

.overlay ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.overlay li {
  margin-top: 48px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s;
}

.overlay li > ul > li {
  font-size: 14px;
  margin-top: 24px;
}

.overlay.show li {
  opacity: 1;
  transform: none;
}

.overlay.show li:nth-child(1) {
  transition-delay: .1s;
}

.overlay.show li:nth-child(2) {
  transition-delay: .2s;
}

.overlay.show li:nth-child(3) {
  transition-delay: .3s;
}

.overlay.show li:nth-child(4) {
  transition-delay: .4s;
}

.overlay.show li:nth-child(5) {
  transition-delay: .5s;
}

.overlay.show li:nth-child(6) {
  transition-delay: .6s;
}

.overlay.show li > ul > li:nth-child(1) {
  transition-delay: .4s;
}

.overlay.show li > ul > li:nth-child(2) {
  transition-delay: .5s;
}

.overlay.show li > ul > li:nth-child(3) {
  transition-delay: .6s;
}

.overlay.show li > ul > li:nth-child(4) {
  transition-delay: .7s;
}

.overlay.show li > ul > li:nth-child(5) {
  transition-delay: .8s;
}



/* トップページ */

.hero {
  margin-top: 65px;
}

/* スライダー */

/*------ スライダー 横幅 ------*/
.slider{
  width:100%;
  margin:0 auto;
  line-height: 0;
}

/*------ スライダー 画像 ------*/
.slider img{
	width:100%;
  height: 560px;
  object-fit: cover;
}

/*-------- スライダー 高さ調整 ----------*/
.slider .slick-slide{
	height:auto!important;
}

/*---------- スライダー 矢印 ----------*/
.slick-arrow {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 20px;
  height: 38px;
  color: transparent;
  z-index: 1;
  transition: opacity 0.5s;
  z-index: 1;
}
.slick-arrow:hover {
  opacity: 0.7;
}

/* スライダー 矢印 共通設定 */

.slick-next::before,
.slick-next::after,
.slick-prev::before,
.slick-prev::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.slick-next::after,
.slick-prev::after {
  width: 16px;
  height: 16px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

/* スライダー 矢印 next */

.slick-next {
  right: 16px;
}
.slick-next::after {
  right: 4px;
  transform: rotate(45deg);
}

/* スライダー 矢印 prev */

.slick-prev {
  left: 16px;
}
.slick-prev::after {
  left: 4px;
  transform: rotate(-135deg);
}

/*---------- スライダー 矢印 ここまで ----------*/


/* スライダー PC隠す */

.pc-slider {
  display: none;
}



/* トップ コンセプト */

.concept {
  background-color: #F7F4E9;
  position: relative;
}

.concept .container {
  padding: 120px 0;
  text-align: center;
}

.concept-logo img {
  height: 136px;
}

.concept h2 {
  font-size: 18px;
  font-weight: normal;
  margin: 36px 0;
}

.concept p {
  font-size: 12px;
  line-height: 2;
}

.sakura {
  width: 90px;
  position: absolute;
  top: 5%;
  left: 12%;
}

.kikyo {
  width: 80px;
  position: absolute;
  bottom: 3%;
  right: 2%;
  rotate: 15deg;
}

.kiku {
  width: 40px;
  position: absolute;
  bottom: 2%;
  right: 22%;
}


/* 麻バナー */

.banner-space {
  background-color: #F7F4E9;
  padding: 56px 0;
}

.banner {
  display: block;
  position: relative;
  padding-top: 56px;
  margin: 0px auto;
  width: 50%;
  height: 80px;
  background-image: url(../img/lecie_221122485_banner.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  border-radius: 8px;
}

.banner::before {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.2);
  content: "";
}

.banner:hover::before {
  background-color: rgba(0, 0, 0, 0);
}

.banner > p {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  padding: 0px;
  margin: 0px;
  width: 100%;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

.banner > p > span {
  display: block;
  font-size: 16px;
}






/* トップ ページセレクト */

.page-select-area {
  background-color: #464646;
}

.page-select ul {
  display: flex;
  flex-wrap: wrap;
}

.page-select li {
  width: calc(100% / 4);
  position: relative;
}

.page-select li img {
  width: 100%;
  height: 668px;
  object-fit: cover;
}

.page-select li img:hover {
  opacity: .8;
}

.page-select a:hover {
  opacity: 1;
}

.page-select li h2 {
  font-size: 18px;
  font-weight: normal;
  color: #fff;
  writing-mode: vertical-rl;
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
}

.page-select li a {
  display: block;
}



/* トップ お知らせ */

.news {
  background-color: #F7F4E9;
}

.news .container {
  padding: 56px 0;
  text-align: center;
}

.news h1 {
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 16px;
}

.news ul {
  display: inline-block;
  width: 80%;
  margin-bottom: 40px;
}

.news li {
  display: flex;
  border-bottom: 1px solid lightgray;
  padding: 12px 6px;
  margin-bottom: 6px;
  align-items: center;
}

.news li > p {
  font-size: 14px;
  width: 64px;
  text-align: left;
}

.news a {
  font-size: 13px;
  margin-left: 16px;
}

.news a > p {
  text-align: left;
}







/* トップ 動画 */

/* 動画を囲うdiv */
.video {
  position: relative;
  width:100%; /* 横幅は100%にしておく(ここを変えたい場合は実装コード2の方法を確認してください) */
  height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
  padding-top: 56.25%; /* 高さを指定(16:9) */
}

/* YouTube埋め込み用のiframe */
.video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* フッター */

footer {
  background: #464646;
  color: #eee
}

footer .container {
  display: flex;
  flex-direction: column;
}

.footer-logo-navi {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  text-align: center;
  padding: 48px 0;
}

.footer-logo img {
  width: 104px;
}

.footer-navi ul {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.footer-navi li {
  font-size: 12px;
}

.footer-navi li + li {
  margin-top: 12px;
}

.sns-icon ul {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.sns-icon li {
  font-size: 20px;
}

.sns-icon li + li {
  margin-left: 24px;
}

footer small {
  font-size: 11px;
  margin: 40px 0 24px 0;
  text-align: center;
}

/* トップ ここまで */



/* 第2階層 共通 ヒーロー */

.second-hero {
  margin-top: 65px;
}

.second-hero-wrapper {
  position: relative;
}

.second-hero-head {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  text-align: center;
  color: white;
}

.second-hero-head h1 {
  font-family: 'Josefin Slab', serif;
  font-weight: normal;
  font-size: 40px;
}

.second-hero-head p {
  font-size: 14px;
}

.sp-second-hero-img {
  width: 100%;
  height: 560px;
  object-fit: cover;
}

.pc-second-hero-img {
  display: none;
}



/* ストーリー */

/* パララックス */

.front_content{
  padding: 72px 0;
  background-color: #F7F4E9;
  text-align: center;
}

.front_content h2 {
  font-weight: normal;
  font-size: 18px;
  margin-bottom: 24px;
}

.front_content p {
  font-size: 13px;
  line-height: 2;
}

.parallax_content{
  height: 700px;
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.parallax_content.img_bg_01{
  background-image: url('../img/parallax_1_SP.jpg');
}
.parallax_content.img_bg_02{
  background-image: url('../img/parallax_2_SP.jpg');
}
.parallax_content.img_bg_03{
  background-image: url('../img/parallax_4_SP.jpg');
}
.parallax_content.img_bg_04{
  background-image: url('../img/parallax_3_SP.jpg');
}
.parallax_content.img_bg_05{
  background-image: url('../img/parallax_5_SP.jpg');
}


/* 麻について */
/* ストーリーのパララックスfrontを流用 */

.hemp-parallax {
  height: 700px;
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.hemp-parallax.img_bg_01 {
  background-image: url('../img/hemp_2_SP.jpg');
}
.hemp-parallax.img_bg_02 {
  background-image: url('../img/hemp_3_SP.jpg');
}
.hemp-parallax.img_bg_03 {
  background-image: url('../img/hemp_4_SP.jpg');
}
.hemp-parallax.img_bg_04 {
  background-image: url('../img/hemp_5_SP.jpg');
}

.hemp-desc {
  width: 80%;
  text-align: left;
  display: inline-block;
  padding: 0;
  text-indent: 12px;
}


/* 苧麻から麻織布ができるまで */

.maori {
  box-sizing: border-box;
  width: 80%;
  padding: 36px;
  /* text-align: center; */
  background-color: #E8E1DB;
  margin: 32px auto;
}

.maori h3 {
  font-size: 15px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid black;
  width: 220px;
  padding-bottom: 4px;
  display: block;
}

.maori-desc {
  margin-bottom: 24px;
  text-align: left;
  display: inline-block;
  padding: 0;
}

.maori-pic-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 460px;
  margin: 0 auto;
}

.maori-pic-wrapper li {
  width: calc((100% - 8px) / 2);
}

.maori-pic {
  width: 100%
}



/* 新しい「細タペ」 */

.new-products-intro {
  padding: 56px 0;
  text-align: center;
}

.new-products-intro p {
  font-size: 12px;
  line-height: 2;
}

.new-products-navi {
  height: 56px;
  background-color: #f2eeeb;
  opacity: .9;
}

.new-products-navi ul {
  display: flex;
  padding: 0;
}

.new-products-navi li {
  width: 100%;
  font-size: 11px;
  display: flex;
  margin: 0;
}

.new-products-navi a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 19px 0;
}

.new-products-navi li+li{
  position: relative;
}

.new-products-navi li+li::before{
  content: "";
  display: block;
  height: 2em;
  border-left: 1px solid #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}


/* 新しい「細タペ」 ナビ固定 */

#fixed-nav {
  position: -webkit-sticky;
  position:         sticky;
  top: 65px;
  z-index: 100;
}


.new-product-hero-wrapper {
  position: relative;
}

.new-product-hero-head {
  position: absolute;
  /* transform: translateY(-50%) translateX(-50%); */
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
}


/* 新しい「細タペ」 メインキャッチ ヘッド位置調整 */

.head-kumihimo {
  top: 50%;
  left: 35%;
}
.head-hotaru {
  top: 45%;
  left: 15%;
}
.head-oko {
  top: 45%;
  left: 15%;
}
.head-kinhaku {
  top: 45%;
  left: 15%;
}
.head-hanami {
  top: 65%;
  left: 10%;
}

.new-product-hero-head h1 {
  font-weight: normal;
  font-size: 24px;
  /* writing-mode: vertical-rl; */
  text-align: left;
}

.new-product-hero-head p {
  font-size: 20px;
  /* writing-mode: vertical-rl; */
  text-align: left;
}

.new-product-hero-head p span {
  font-style: italic;
  vertical-align: 2px;
  font-size: 50%;
}

.sp-new-product-hero-img {
  width: 100%;
  height: 560px;
  object-fit: cover;
}

.pc-new-product-hero-img {
  display: none;
}

.new-product {
  background-color: #F7F4E9;
}

.new-product .container {
  padding: 56px 0;
  text-align: center;
}

.new-product-img-wrapper {
  text-align: center;
}

.new-product-img-wrapper ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 32px;
}

.new-product-img-wrapper li {
  width: calc(100% - 32px);
  margin: 0 auto;
}

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

.new-product-img-hanami {
  width: 85%;
}

.new-product-title {
  margin-top: 56px;
  margin-bottom: 56px;
}

.new-product-title h1 {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 32px;
}

.new-product-title p {
  font-size: 12px;
  line-height: 2;
}

.new-product-introduction {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.new-product-pic-desc-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.new-product-pic-wrapper {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}

.new-product-pic-zoomout, .new-product-pic-zoomin {
  height: 600px;
}

.new-product-desc {
  width: 240px;
  text-align: left;
  font-family: "Sawarabi Gothic", Arial, Helvetica, sans-serif;
}

.new-product-desc h1 {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: bold;
}

.new-product-desc p {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 20px;
  font-weight: normal;
}

.new-product-desc p + p {
  margin-top: 8px;
}

.new-product-desc .moreLinkText {
  font-size: 12px;
  letter-spacing: 0em;
  text-align: center;
}

/* .new-product-desc a {
  pointer-events: none;
} */


/* 新しい「細タペ」 コラボ先 */

.collaboration {
  background-color: #E8E1DB;
  padding: 56px 0;
  text-align: center;
}

.collaboration h1 {
  font-size: 18px;
  font-weight: normal;
  border-bottom: 1px solid #fff;
  width: 116px;
  padding-bottom: 8px;
  margin-bottom: 48px;
  display: inline-block;
}

.collabo-img {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.collabo-logo-showen {
  width: 152px;
  margin: 56px 0 40px 0;
}

.collabo-logo-tenkohdou {
  height: 152px;
  margin: 56px 0 40px 0;
}

.collabo-logo-hakuichi {
  width: 152px;
  margin: 56px 0 40px 0;
}

.collaboration p {
  font-size: 12px;
  line-height: 2;
  margin-bottom: 56px;
}

.collabo-pic-wrapper {
  text-align: center;
}

.collabo-pic-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 56px;
}

.collabo-pic-wrapper li {
  width: calc((100% - 8px) / 2);
}

.collabo-pic-wrapper img {
  width: 100%;
}

.collabo-pic-wrapper .moreLinkText {
  font-size: 13px;
}

.collabo-pic-wrapper .lineArrow {
  width: 200px;
}


/* 新しい「細タペ」 手描き友禅 工房 */

.kobo {
  background-color: #E8E1DB;
  padding: 56px 0;
  text-align: center;
}

.kobo-motif-pic-wrapper ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 96px;
}

.kobo-motif-pic {
  width: 100%;
}

.kobo-motif-desc-wrapper {
  width: 70%;
  text-align: center;
  margin-bottom: 16px;
  display: inline-block;
}

.kobo-motif-desc-wrapper h1 {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 24px;
  border-bottom: 1px solid black;
  width: 144px;
  padding-bottom: 4px;
  display: inline-block;
}

.kobo-motif-desc-wrapper p {
  font-size: 12px;
  line-height: 2;
  margin-bottom: 56px;
  text-align: left;
}

.kobo-giho-pic-wrapper ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 96px;
}

.kobo-giho-pic {
  width: 100%;
}

.kobo-giho-desc-wrapper {
  width: 70%;
  text-align: center;
  margin-bottom: 16px;
  display: inline-block;
}

.kobo-giho-desc-wrapper h1 {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 24px;
  border-bottom: 1px solid black;
  width: 144px;
  padding-bottom: 4px;
  display: inline-block;
}

.kobo-giho-desc-wrapper h2 {
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 16px;
}

.kobo-giho-desc-wrapper h2 span {
  color: rgb(199, 0, 0);
}

.kobo-giho-desc-wrapper p {
  font-size: 12px;
  line-height: 2;
  margin-bottom: 56px;
  text-align: left;
}

.kobo-sakka-wrapper {
  width: 70%;
  text-align: center;
  margin-bottom: 16px;
  display: inline-block;
}

.kobo-sakka-wrapper h1 {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 24px;
  border-bottom: 1px solid black;
  width: 144px;
  padding-bottom: 4px;
  display: inline-block;
}

.kobo-sakka-wrapper h2 {
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 16px;
}

.kobo-sakka-wrapper p span {
  font-size: 13px;
}

.kobo-sakka-wrapper p {
  font-size: 12px;
  line-height: 2;
  text-align: left;
}

.kobo-sakka-wrapper p.indentback{
  text-indent: -4em;
  padding-left: 4em;
}


/* 新しい「細タペ」 インスタフィード */

.instagram-feed {
  padding: 56px 0;
  text-align: center;
}

.instagram-feed h1 {
  font-family: 'Josefin Slab', serif;
  font-size: 28px;
  letter-spacing: 0.1em;
  font-weight: lighter;
  margin-bottom: 48px;
}

.insta-dummy {
  width: 300px;
  height: 460px;
  background-color: lightgray;
  margin: 0 auto;
}

.instagram-feed .moreLinkText {
  font-size: 13px;
  margin-top: 48px;
}

.instagram-feed .lineArrow {
  width: 88px;
}

.instagram {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto;
}

.instagram img {
  width: 145px;
  height: 145px;
}



/* 組み合わせを楽しむ */

.coordination-intro {
  padding: 56px 0;
  text-align: center;
}

.coordination-intro p {
  font-size: 12px;
  line-height: 2;
}

.number-select {
  height: 56px;
  background-color: #e4ddd7;
}

.number-select .container {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.number-select p {
  font-size: 13px;
}

.select-navi {
  height: 112px;
  background-color: #b5a99f;
  opacity: .9;
  font-family: "Sawarabi Gothic", Arial, Helvetica, sans-serif;
}

.select-navi ul {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.select-navi li {
  width: 100%;
}

.indices {
  font-size: 13.5px;
  margin-right: 2px;
  font-weight: bold;
  color: #333;
}

.select-navi a {
  font-size: 12.5px;
  color: #f8f6ef;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 18px 0;
}

.select-navi li+li{
  position: relative;
}

.select-navi li+li::before{
  content: "";
  display: block;
  width: 100%;
  border-top: 1px solid #7f7974;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: -10;
}

.coordination-main {
  background-color: #F7F4E9;
}

.coordination-main .container {
  /* outline: solid 1px red; */
  padding: 56px 0;
  text-align: center;
}

.coordination-pic-wrapper {
  display: flex;
  gap: 36px;
  justify-content: center;
}

.cart {
  width: 24px;
  opacity: .5;
  display: block;
  margin-left: 16px;
  margin-top: 0;
  position: relative;
  top: 56px;
}

.cart-gray {
  opacity: .2;
}

.coordination-pic {
  height: 584px;
}

.select-btn {
  background-color: #464646;
  border: none;
  cursor: pointer;
  outline: none;
  width: 56px;
  padding: 4px 0;
  appearance: none;
  margin-top: 0;
  margin-bottom: 24px;
  font-family: "Sawarabi Gothic", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #f8f6ef;
  letter-spacing: .1em;
  position: relative;
  top: -8px;
}

.select-btn:hover {
  opacity: .7;
}

.close-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  font-family: 'Josefin Slab', serif;
  font-size: 13px;
  letter-spacing: .1em;
  border-bottom: 1px solid red;
  padding-bottom: 4px;
  margin-top: 32px;
  margin-bottom: 80px;
}

.coordination-select-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 12px 0;
  opacity: 1;
  transition: opacity .6s;
  z-index: 100;
}

.coordination-select-wrapper .container {
  max-height: calc(100vh - 100px);
  overflow-y: scroll;
  margin-top: 32px;
}

.coordination-select-wrapper li {
  cursor: pointer;
}

.coordination-select-wrapper p {
  font-family: "Sawarabi Gothic", Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin-top: 8px;
  width: 72px;
}

.thumbnail-wrapper-1, .thumbnail-wrapper-2, .thumbnail-wrapper-3 {
  display: flex;
  flex-direction: column;
  gap: 20px ;
}

.thumbnail-wrapper-pc-1, .thumbnail-wrapper-pc-2 {
  display: flex;
  flex-direction: column;
  gap: 20px ;
  justify-content: center;
}

.thumbnail-wrapper-d1, .thumbnail-wrapper-d2, .thumbnail-wrapper-d3, .thumbnail-wrapper-d4 {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.coordination-select-wrapper img {
  width: 48px;
}

.item-1-01, .item-1-02, .item-1-03, .item-1-04, .item-1-05, .item-1-06, .item-1-07, .item-1-08, .item-1-09, .item-1-10, .item-1-11, .item-1-12, .item-1-13, .item-1-14, .item-1-15, .item-1-16 {
  display: none;
}

.item-2-01, .item-2-02, .item-2-03, .item-2-04, .item-2-05, .item-2-06, .item-2-07, .item-2-08, .item-2-09, .item-2-10, .item-2-11, .item-2-12, .item-2-13, .item-2-14, .item-2-15, .item-2-16 {
  display: none;
}

.item-3-01, .item-3-02, .item-3-03, .item-3-04, .item-3-05, .item-3-06, .item-3-07, .item-3-08, .item-3-09, .item-3-10, .item-3-11, .item-3-12, .item-3-13, .item-3-14, .item-3-15, .item-3-16 {
  display: none;
}

.s-hidden {
  display: none;
}

.thumb-pe-none {
  pointer-events: none;
}


/* オンラインショップ */

.induction {
  background-color: #F7F4E9;
}

.induction .container {
  padding: 120px 0;
  text-align: center;
}

.sp_onlineshop_img {
  width: calc(100% - 72px);
  margin-bottom: 56px;
}

.pc_onlineshop_img {
  width: calc(100% - 32px);
  margin-bottom: 56px;
  display: none;
}

.induction p {
  font-size: 12px;
  line-height: 2;
  margin-bottom: 48px;
}



/* お知らせ 一覧 */

.news-list {
  margin-top: 65px;
  padding-top: 40px;
}

.news-list ul {
  margin-bottom: 48px;
}




/* お知らせ ページャ */

/* .pager .pagination {
  text-align: center;
  margin-bottom: 0;
}

.pager .pagination li {
  display: inline;
  margin: 0 2px;
  padding: 0;
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  position: relative;
  border-radius: 10px;
  border-bottom: none;
}

.pager .pagination li a{
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display:table;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}

.pager .pagination li a span{
  display:table-cell;
  vertical-align:middle;
}

.pager .pagination li a:hover,
.pager .pagination li a.active{
  color: red;
} */

/* @media only screen and (max-width: 767px){
  .pager .pagination li{
    display: none;
  }

  .pager .pagination li.pre,
  .pager .pagination li.next{
    display: inline-block;
    width: 40%;
    height: 50px;
    text-align: center;
  }

  .pager .pagination li.pre a,
  .pager .pagination li.next a{
    width: 100%;
    text-align: center;
  }

  .pager .pagination li.pre span::after{
    content: "　前の10件へ";
  }

  .pager .pagination li.next span::before{
    content: "次の10件へ　";
  }

} */



/* お知らせ 記事 */

.news-article {
  margin-top: 65px;
  padding-top: 40px;
}

.news-article img {
  width: 80%;
  margin: 56px 0;
}

.news-article-text-wrapper {
  text-align: center;
  width: 80%;
  display: inline-block;
  margin-bottom: 56px;
}

.news-article-text-wrapper p {
  text-align: left;
  font-size: 13px;
  line-height: 2;
  margin-bottom: 8px;
}

.news-article-text-wrapper h2 {
  text-align: left;
  font-size: 15px;
  margin-bottom: 16px;
  font-weight: normal;
}
.news-article-text-wrapper h3 {
  text-align: left;
  font-size: 15px;
  margin-bottom: 16px;
  font-weight: normal;
}
.news-article-text-wrapper h4 {
  text-align: left;
  font-size: 14px;
  margin-bottom: 16px;
  font-weight: normal;
}

.news-article-text-wrapper p a {
  border-bottom: 1px solid red;
}


/* すぐ使えるCMS部分 */

.sugu-pager {
  background-color: #F7F4E9;
  margin-top: 0;
  padding-top: 0;
}

.sugu-pager .container {
  text-align: center;
}

.sugu-news-list-short {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.sugu-file {
  width: 80%;
  display: inline-block;
}





/* PC用 */

/* medium + large screen */

@media (min-width: 920px) {

  /* common */

  .container {
    width: calc(100% - 32px);
    margin: 0 auto;
    max-width: 1000px;
  }

  .br-sp {
    display: none;
  }

  
  /* PC用 ヘッダー */

  .header-logo img {
    width: 104px;
  }


  /* PC用 トップ */

  /* PC用 ヒーロー スライダー */

  .hero {
    margin-top: 77px;
  }

  .slider img{
    height: 900px;
  }

  .slick-next::after,
  .slick-prev::after {
  width: 24px;
  height: 24px;
  }

  .slick-next {
    right: 32px;
  }

  .slick-prev {
    left: 32px;
  }

  .sp-slider {
    display: none;
  }

  .pc-slider {
    display: block;
  }


  /* PC用 コンセプト */

  .concept .container {
    padding: 200px 0;
  }
  
  .concept-logo img {
    height: 184px;
  }
  
  .concept h2 {
    font-size: 21px;
    margin: 80px 0;
  }
  
  .concept p {
    font-size: 14px;
    line-height: 2;
  }

  .sakura {
    width: 144px;
    position: absolute;
    top: 5%;
    left: 25%;
  }
  .kikyo {
    width: 124px;
    position: absolute;
    bottom: 7%;
    right: 20%;
    rotate: 15deg;
  }
  .kiku {
    width: 72px;
    position: absolute;
    bottom: 5%;
    right: 30%;
  }


  /* PC用 麻バナー */

  .banner {
    padding-top: 72px;
    width: 33%;
    background-image: url(../img/lecie_221122485_banner.jpg);
    margin-bottom: 24px;
  }

  .banner > p > span {
    font-size: 18px;
  }
    


  /* PC用 ページセレクト */

  .page-select {
    background-color: hsl(28, 22%, 76%);
    text-align: center;
  }

  .page-select-area {
    width: 66%;
    display: inline-block;
  }

  .page-select li img {
    height: 1080px;
  }

  .page-select li h2 {
    font-size: 21px;
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
  }


  /* PC用 フッター */

  .footer-logo-navi {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .footer-logo img {
    width: 112px;
  }
  
  .footer-navi ul {
    flex-direction: row;
    vertical-align: middle;
  }
  
  .footer-navi li + li {
    margin-top: 0;
    margin-left: 24px;
  }
  
  .sns-icon ul {
    margin-top: 0px;
  }



  /* PC用 第2階層 共通 ヒーロー */

  .second-hero {
    margin-top: 77px;
  }

  .second-hero-head h1 {
    font-size: 50px;
  }
  
  .second-hero-head p {
    font-size: 16px;
  }

  .pc-second-hero-img {
    width: 100%;
    object-fit: cover;
    display: block;
  }
  
  .sp-second-hero-img {
    display: none;
  }



  /* PC用 ストーリー */

  /* PC用 パララックス */

  .front_content{
    padding: 96px 0;
  }

  .front_content h2 {
    font-size: 21px;
    margin-bottom: 32px;
  }
  
  .front_content p {
    font-size: 14px;
  }

  .parallax_content{
    height: 800px;
  }

  .parallax_content.img_bg_01{
    background-image: url('../img/parallax_1_PC.jpg');
  }
  .parallax_content.img_bg_02{
    background-image: url('../img/parallax_2_PC.jpg');
  }
  .parallax_content.img_bg_03{
    background-image: url('../img/parallax_4_PC.jpg');
  }
  .parallax_content.img_bg_04{
    background-image: url('../img/parallax_3_PC.jpg');
  }
  .parallax_content.img_bg_05{
    background-image: url('../img/parallax_5_PC.jpg');
  }


  /* PC用 麻について */
  /* ストーリーのパララックスを流用 */

  .hemp-parallax {
    height: 800px;
  }

  .hemp-parallax.img_bg_01 {
    background-image: url('../img/hemp_2_PC.jpg');
  }
  .hemp-parallax.img_bg_02 {
    background-image: url('../img/hemp_3_PC.jpg');
  }
  .hemp-parallax.img_bg_03 {
    background-image: url('../img/hemp_4_PC.jpg');
  }
  .hemp-parallax.img_bg_04 {
    background-image: url('../img/hemp_5_PC.jpg');
  }

  .hemp-desc {
    width: 56%;
    text-indent: 13px;
  }

  .maori {
    width: 560px;
    padding: 48px;
  }


  /* PC用 新しい「細タペ」 */

  .new-products-intro {
    padding: 96px 0;
  }
  
  .new-products-intro p {
    font-size: 13px;
    line-height: 2;
  }

  .new-products nav {
    height: 64px;
  }

  .new-products-navi li {
    font-size: 13px;
  }

  .new-products-navi a {
    padding: 23px 0;
  }


  /* PC用 新商品ナビ固定 */

  #fixed-nav {
    top: 76px;
  }

  .new-product-hero-head h1 {
    font-size: 32px;
  }
  
  /* .new-product-hero-head p {
    font-size: 28px;
  } */


  /* PC用 ヘッド位置調整 */

  .head-kumihimo {
    top: 50%;
    left: 50%;
  }
  .head-hotaru {
    top: 45%;
    left: 25%;
  }
  .head-oko {
    top: 45%;
    left: 25%;
  }
  .head-kinhaku {
    top: 45%;
    left: 25%;
  }
  .head-hanami {
    top: 65%;
    left: 20%;
  }


  .pc-new-product-hero-img {
    width: 100%;
    height: 800px;
    object-fit: cover;
    display: block;
  }
  
  .sp-new-product-hero-img {
    display: none;
  }

  .new-product .container {
    padding: 96px 0;
  }

  .new-product-img-wrapper ul {
    flex-direction: row;
    gap: 16px;
  }
  
  .new-product-img-wrapper li {
    width: calc((100% - 16px) / 2);
  }

  .new-product-title {
    margin-top: 96px;
    margin-bottom: 96px;
  }

  .new-product-title h1 {
    font-size: 21px;
  }
  
  .new-product-title p {
    font-size: 13px;
  }

  .new-product-introduction {
    flex-direction: row;
    justify-content: center;
    gap: 56px;
  }

  .new-product-pic-zoomout, .new-product-pic-zoomin {
    height: 900px;
  }

  .build-to-order {
    background-color: white;
    padding: 0 4px;
    margin: 0;
    display: inline-block;
  }

  .collaboration {
    padding: 96px 0;
  }

  .collaboration h1 {
    font-size: 21px;
    width: 136px;
    margin-bottom: 72px;
  }
  
  .collabo-img {
    width: 66%;
  }
  
  .collabo-logo-showen {
    width: 170px;
    margin: 72px 0 56px 0;
  }

  .collaboration p {
    font-size: 13px;
    margin-bottom: 72px;
  }

  .collabo-pic-wrapper ul {
    gap: 16px;
    margin-bottom: 72px;
  }

  .collabo-pic-wrapper li {
    width: calc((100% - 16px) / 2);
  }
  
  .collabo-pic-wrapper img {
    width: 100%;
  }


  /* PC用 工房 手描き友禅 */

  .kobo {
    padding: 96px 0;
  }

  .kobo-motif-pic-wrapper ul {
    flex-direction: row;
  }

  .kobo-giho-pic-wrapper ul {
    flex-direction: row;
  }



  /* PC用 インスタ */

  .instagram-feed {
    padding: 96px 0;
  }
  
  .instagram-feed h1 {
    font-size: 32px;
    margin-bottom: 72px;
  }
  
  .insta-dummy {
    width: 720px;
    height: 720px;
  }

  .instagram-feed .moreLinkText {
    margin-top: 72px;
  }

  .instagram {
    width: 640px;
    gap: 20px;
  }
  
  .instagram img {
    width: 200px;
    height: 200px;
  }


  /* PC用 組み合わせを楽しむ */

  .number-select p {
    font-size: 14px;
  }

  .select-navi {
    height: 56px;
    background-color: #b5a99f;
    opacity: .9;
    font-family: "Sawarabi Gothic", Arial, Helvetica, sans-serif;
  }

  .select-navi ul {
    display: flex;
    flex-direction: row;
    padding: 0;
  }

  .select-navi li {
    width: 100%;
  }

  .indices {
    font-size: 14.5px;
    margin-right: 2px;
    font-weight: bold;
    color: #333;
  }

  .select-navi a {
    font-size: 13.5px;
    letter-spacing: normal;
    color: #f8f6ef;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 18px 0;
  }

  .select-navi li+li{
    position: relative;
  }

  .select-navi li+li::before{
    content: "";
    display: block;
    height: 2em;
    width: 0;
    border-left: 1px solid #7f7974;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .thumbnail-wrapper-1, .thumbnail-wrapper-2, .thumbnail-wrapper-3 {
    flex-direction: column;
    gap: 32px;
  }

  .thumbnail-wrapper-pc-1, .thumbnail-wrapper-pc-2 {
    flex-direction: row;
    gap: 10px;
  }

  .coordination-select-wrapper .container {
    margin-top: 80px;
  }

  .coordination-main {
    background-image: url("../img/home_background_PC.png");
    background-position:center bottom;  
    background-size: cover;
    width: 100%;
    background-color: #F7F4E9;
  }


  /* PC用 オンラインショップ */

  .induction .container {
    padding: 200px 0;
  }

  .sp_onlineshop_img {
    display: none;
  }

  .pc_onlineshop_img {
    display: inline-block;
  }

  .induction p {
    font-size: 14px;
    line-height: 2;
  }


  /* PC用 すぐ使えるCMS部分 */

  .sugu-container {
    width: calc(100% - 32px);
    margin: 0 auto;
    max-width: 1000px;
  }


}