@charset "utf-8";
.sma{
    display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:500px) {
    .sma{
        display: block;
    }
}



.newsletter{
	margin-top:0 !important;
}
.slick-dotted.slick-slider{
	margin-bottom:0 !important;
}
.slick-dots li button:before{
	font-size:0 !important;
	position: relative !important;
	border:none !important;
}

.fs-c-breadcrumb .fs-c-breadcrumb__list{
	margin-bottom:0 !important;
}
.fs-c-breadcrumb.freepage_bl {
	position: static !important;
	width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
	margin: 0 auto !important;
	top:214px !important;
}

@media screen and (max-width: 1200px) {
.fs-c-breadcrumb.freepage_bl {
		position: static !important;
		width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
	margin: 0 auto !important;
	top:194px !important;
}
}

@media screen and (max-width: 500px) {
.fs-c-breadcrumb.freepage_bl {
		position: static !important;
		width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
	margin: 0 auto !important;
	top:63px !important;
}
}

aside.fs-p-drawer.fs-l-sideArea {
    display: none !important;
}

.fs-c-heading--page {
	display:none !important;
}

.fs-p-drawer{
	background:none !important;
	padding-bottom:11px;
}


@media screen and (max-width: 1000px) {
    .modaal-inner-wrapper {
        padding-top: 120px !important;
        padding-bottom: 60px;
    }
}
@media screen and (max-width: 500px) {
.modaal-close {
    top: 70px !important;
    }
}
.modaal-container{
	height:100% !important;
}
/*==================================================
スライダーのためのcss
===================================*/
.dl_slider {
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.dl_slider-item01 {
    background:url(https://fsdl.itembox.design/item/images/202408/top-img_01.jpg);
}

.dl_slider-item02 {
    background:url(https://fsdl.itembox.design/item/images/202408/top-img_02.jpg);
}

.dl_slider-item03 {
    background:url(https://fsdl.itembox.design/item/images/202408/top-img_03.jpg);
}
.dl_slider-item04 {
    background:url(https://fsdl.itembox.design/item/images/202408/top-img_04.jpg);
}
.dl_slider-item05 {
    background:url(https://fsdl.itembox.design/item/images/202408/top-img_05.jpg);
}
.dl_slider-item06 {
    background:url(https://fsdl.itembox.design/item/images/202408/top-img_06.jpg);
}

.dl_slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

.dl_slick-prev, 
.dl_slick-next {
    position: absolute;
	z-index: 3;
    top: 50%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.dl_slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.dl_slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative !important;
	z-index: 3 !important;
    text-align:center !important;
	margin:-100px 0 0 0 !important;/*ドットの位置*/
}
@media screen and (max-width: 500px) {
.slick-dots {
	margin:0 0 0 0 !important;/*ドットの位置*/
}
}
.slick-dots li {
    display:inline-block !important;
	margin:0 5px !important;
}

.slick-dots button {
    color: transparent !important;
    outline: none !important;
    width:8px !important;/*ドットボタンのサイズ*/
    height:8px !important;/*ドットボタンのサイズ*/
    display:block !important;
    border-radius:50% !important;
    background:#fff !important;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#9e98af !important;/*ドットボタンの現在地表示の色*/
}

/*========= レイアウトのためのCSS ===============*/

.dl_wrapper{
	position:relative;
}
.dl_wrapper h1{
	position: absolute;
	z-index: 2;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size:16px;
	letter-spacing: 0.1em;
	color: #fff;
	margin: 50px 0 0 0;
}
.dl_container h2{
	font-size:24px;
	letter-spacing: 0.1em;
	color: #ffffff;
	text-align:center;
	margin:0;
}
.dl_container .topread{
	text-align: center;
	font-size:14px;
	letter-spacing: 0.1em;
	color: #ffffff;
	margin: 10px 0 60px 0;
	font-weight:bold;
}
.top_text{
	text-align: center;
	font-size:12px;
	letter-spacing: 0.1em;
	color: #000;
	margin:20px 0 0 0;
	line-height:2;
	font-weight:bold;
}

@media only screen and (min-width: 768px) {
    .top_text {
        font-size: 14px;
    }
}	
.dl_container{
	position: relative;
}

.container{
	background:#fff;
}

.container p{
	padding: 300px 0;	
	text-align: center;
	color: #fff;
}
#dl_cont01{
	background:#a5b5b5;
	padding:10% 9%;
	  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
@media screen and (max-width: 500px) {
#dl_cont01{
	padding:15% 4%;
}
}

/*========= カテゴリ ===============*/
#dl_cont02{
	padding:8% 7% 12% 7%;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
.block-grid {
    position: relative;
    width: 100%;
		justify-content: center;
		margin:0 auto;
		text-align:center;
}
.block-grid:before {
    content: '';
    display: block;
}
.block-grid li {
display: inline-block;
	margin: 0 2%;
	padding: 0;
		width: 30%;
		height:30%;
}
.block-grid li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
		border-radius: 50%;
}
.cat-title {
  text-decoration: none;
		font-size: 1em;
		font-weight:bold;
	color:#000000;
	text-align:center;
		margin:10px 0 0 0;
	letter-spacing:.05em;
}
@media screen and (max-width: 500px) {
.cat-title {
		font-size: 1.5em;
    }
}

@media screen and (max-width: 480px) {
.block-grid li {
display: inline-block;
	margin: 0 2%;
	padding: 0;
		width: 45%;
		height:45%;
		}
	}

	.all-link{
		text-align:center;
		margin:0 auto;
		font-weight:bold;
	font-size: 1em;
	margin:20px 0 0 0;
	letter-spacing:.05em;
	}
	.all-link a{
		color:#807b8e;
		text-decoration: underline;
		text-underline-offset: 10px;
		text-decoration-thickness: 4px;
		text-decoration-color: #807b8e;
	}

	.category{
		text-align:center;
		margin:0 auto;
		font-weight:bold;
	font-size: 2em;
	margin:0 0 20px 0;
	color:#99abab;
	letter-spacing:.05em;
	}	
	
/*========= new item ===============*/
#dl_cont03{
	padding:8% 7%;
	border-top:solid 1px #eeeeee;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

.block-grid-item {
 width: auto;
  overflow: hidden;
  list-style: none;
  margin: 0 auto;
  padding: 6%;
  font-size: 0;
}
.block-grid-item li {
  display: inline-block;
  vertical-align: top;
  margin: 0 1% 30px;
  font-size: 18px;
}
.block-grid-item li img {
  width:100%;
}
.block-grid-item a {
  text-decoration: none;
}

@media (min-width: 320px){
.block-grid-item {
  padding: 0;
	}
	.block-grid-item-1-2-3 li {
    width: 48%;
  padding: 10px;
  }
}
@media (min-width: 600px){
	.block-grid-item-1-2-3 li {
    width: 48%;
  }
}
@media (min-width: 800px){
.block-grid-item {
  padding: 0 10%;
	}
	.block-grid-item-1-2-3 li {
    width: 31.3333%;
  }
}
.newitem-text{
	color:#000000;
	font-size:0.8em;
	font-weight:bold;
	text-align:center;
	margin:5px 0 0 0;
	letter-spacing:.05em;
}
@media screen and (max-width: 500px) {
.newitem-text {
		font-size: 0.6em;
		line-height:1.6;
    }
}

.newitem-price{
	color:#7d7d7d;
	font-size:0.7em;
	font-weight:bold;
	text-align:center;
		letter-spacing:.05em;
}


/*========= 制作過程 ===============*/
#dl_cont04{
	padding:4% 2% 6% 2%;
	background:#c2becd;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

.block-grid-about {
 width: auto;
  overflow: hidden;
  list-style: none;
  margin: 0 auto;
	font-size: 0;
padding: 5% 6% 0% 5%;
}
.block-grid-about li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1% 30px;
  font-size: 14px;
  padding: 0;
}
.block-grid-about li img {
  width:100%;
}
.block-grid-about a {
  text-decoration: none;
}
	.block-grid-about-1-2-3 li {
  padding: 0;
  }
@media (min-width: 320px){
	.block-grid-about-1-2-3 li {
    width: 100%;
  }
	.katei-title{
	font-size: 1.2em;
	}	
}
@media (min-width: 600px){
	.block-grid-about-1-2-3 li {
    width: 100%;
  }
}
@media (min-width: 800px){
	.block-grid-about-1-2-3 li {
    width: 48%;
  }
}
	.katei-title{
		text-align:center;
		margin:0 auto;
		font-weight:bold;
	font-size: 1.6em;
	margin:0 0 50px 0;
	color:#ffffff;
	letter-spacing:.05em;
	}	
	.block-grid-about li p{
		text-align:center;
		margin:0 auto;
		font-weight:bold;
	font-size: 1em;
	margin:15px 0 0 0;
	color:#ffffff;
	letter-spacing:.05em;
	line-height:2;
	}	
/*========= ボタン ===============*/

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

#topbtn{
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  bottom: 10%;
	z-index:10;
}
.btn,
a.btn,
button.btn {
	font-size: 0.8em;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 0.5rem 2rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
@media screen and (max-width: 500px) {
.btn,
a.btn,
button.btn {
	font-size: 1em;
	}
	#topbtn{
  bottom: 5%;
}
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #9e98af;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #807b8e;
}

a.btn--radius {
  border-radius: 100vh;
}


/*========= Instagram ===============*/
#dl_cont05{
	padding:10%;
}
.insta{
      display: inline-block;
      width:100px;
 	vertical-align: middle;
   }
.instaaca img{
	width:80px;
	height:80px;
	vertical-align: middle;
}
.insta .instaname{
	width:150px;
}
.instaname{
	width:200px;
	vertical-align: middle;
	font-size:1.2em !important;
	font-weight:bold;
}
.instaname a{
	color:#000000;
}
.instagramtext{
font-size:0.8em;
	font-weight:normal;
}
#tableinsta{
	border:none;
}
#tableinsta img{
	vertical-align: bottom;
}
#tableinsta th{
	background:none;
	border-bottom:none;
	padding:1px;
}