/* CSS Document */
html{
	max-width: 100%;
	font-size: 100%;
	scroll-behavior: smooth;
}
.sp{
	display: none;
}
.link-sp{
	display: none;
}
.sp-about{
	display: none;
}
.sp-img{
	display: none;
}
body {
  	font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
	max-width: 100%;
	color: #666;
}
header{
	width: 100%;
	height: 60px;
	position: fixed;
	padding: 30px 50px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}
.icon{
	width: 40px;
	height: 40px;
	border: 1px solid #fff;
	background-color: #fff;
	border-radius: 3px;
	text-align: center;
	color: #CA8C91;
}
.icon:hover{
	background-color: #F3E6E6;
}
.nav ul{
	list-style-type: none;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.nav ul li{
	float: right;
	margin-left: 30px;
}
.nav ul li a{
	text-decoration: none;
	color: #CA8C91;
	display: block;
	font-size: 100%;
	font-weight: bold;
}
header h1 a{
	text-decoration: none;
	color: #fff;
	display: flex;
	font-size: 80%;
	font-weight: normal;
}
.nav ul{
	display: flex;
	align-items: center;
}
.btn01 {
	padding: 10px 20px;
	display: inline-block;
	text-decoration :none;
	text-align: center;
	background: #fff;
	transition: .4s;
	
	/*--水平方向 垂直方向 影のぼかし 色--*/
	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);  
	
	/*--角丸指定--*/
	border-radius: 100vh;
}

.btn01:hover {

	/*--水平方向 垂直方向 色--*/
	box-shadow: 0 0 10px rgba(0,0,0,0);
}
/*後ろから丸たち*/
#home, .hello {
  position: relative;
  max-width: 100%;
  height: 100vh;
	overflow: hidden;
}

#title {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 3em;
  font-weight: bolder;
  z-index: 1;
}

#background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  background-image: url("../img/main.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.area {
  scroll-snap-align: start;
  height: 100vh;
}

.hello{
	background-color: #996e74;
}

.circle {
  position: absolute;
  right: -250px;
  bottom: -250px;
  width: 500px;
  height: 500px;
  background: #8A90B6;
  border-radius: 50%;
  animation: wobbling_x 0.8s ease-in-out infinite alternate,
    wobbling_y 1.1s ease-in-out infinite alternate;
}

@keyframes wobbling_x {
  0% {
    margin-right: 8px;
  }

  100% {
    margin-right: 0px;
  }
}

@keyframes wobbling_y {
  0% {
    margin-bottom: 0px;
  }

  100% {
    margin-bottom: 8px;
  }
}
.circle2 {
  position: absolute;
  left: -500px;
  bottom: -400px;
  width: 800px;
  height: 800px;
  background: #A56FC0;
  border-radius: 50%;
  animation: wobbling_x 0.8s ease-in-out infinite alternate,
    wobbling_y 1.1s ease-in-out infinite alternate;
}
.circle3 {
  position: absolute;
  top: -150px;
  right: -150px;
  width: 300px;
  height: 300px;
  background: #C7C2A2;
  border-radius: 50%;
  animation: wobbling_x 0.8s ease-in-out infinite alternate,
    wobbling_y 1.1s ease-in-out infinite alternate;
}

/*about*/
.hello h2{
	color: #fff;
	line-height: 3rem;
	font-size: 100%;
}
.hello-wrap{
	max-width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.about{
	max-width: 100%;
	height: 100vh;
	background-color: #f4e7e8;
}
.about h2{
	text-align: center;
	padding-top: 50px;
	font-size: 300%;
}
.img-center{
	height: 100vh;
	padding-bottom: 250px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.about-wrap{
	height: 100vh;
	max-width: 100%;
	display: flex;
	justify-content: space-between;
	padding-bottom: 250px;
	padding: 0 50px;
}
.about-wrap article{
	padding-bottom: 20px;
}
.img-center{
	width: 30%;
}
.text{
	text-align: center;
	font-size: 95%;
	position: relative;
}
.left , .right{
	width: 40%;
	padding-bottom: 200px;
}
.left{
	padding-left: 250px;
	text-align: right;
}
.right{
	padding-right: 250px;
}
.small{
	font-size: 75%;
}
.css-fukidashi {
      padding: 0;
      margin: 0;
    }

    .fukidashi {
      display: none;
      width: 300px;
      position: absolute;
		top:217%;
		left: 40%;
      padding: 8px;
      border-radius: 3px;
      background: #B99CA0;
      color: #fff;
	text-align: center;
		font-size: 98%;
    }

    .text:hover + .fukidashi {
      display: block;
    }
.text:hover{
	color: #B99CA0;
}

.buruburu-hover:hover {
    animation: hurueru .5s  infinite;
	height: 100vh;
	padding-bottom: 250px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
/*works*/
.works{
	max-width: 100%;
	height: auto;
	background-color: #f4e7e8;
}
.works h2{
	text-align: center;
	padding-top: 50px;
	font-size: 300%;
}
.works-wrap{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;/*コンテナの右端で折り返す*/
	margin: 0 auto;
	max-width: 75%;
	padding: 40px;
}
.content img{
	width: 100%;
	overflow: hidden;
}


.content img{
	width: 100%;
	padding: 20px;
	overflow: hidden;
}

.img-box{
	max-width: 100%;
	height: 220px;
	overflow: hidden;
text-align: center;
}
.img-box img{
	width: 80%;
}
.works-box{
	height: 350px;
	border: 1px solid #000;
	margin-top: 50px;
	border-radius: 5px;
}
.text-box{
		max-width: 100%;
	display: flex;
	align-items: center;
	text-align: left;
	padding: 10px 10px;
	box-sizing: border-box;
}
.text-box p{
		line-height: 2;
	color: #666;
}

.place{
	font-size: 90%;
}

.btn-solid {
  color: #fff;
  border-top: 2px solid #fff2f3;
  border-right: 2px solid #999192;
  border-bottom: 2px solid #ccc2c3;
  border-left: 2px solid #E7D8D9;
  border-radius: 5px;
  background: #f4e7e8;
}

.btn-solid:hover {
  color: #fff;
  border-top: 2px solid #ccc2c3;
  border-right: 2px solid #fff2f3;
  border-bottom: 2px solid #fff2f3;
  border-left: 2px solid #999192;
}

.modal__content{

	text-align: center;	
	position: relative;
}

.close{
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	margin: 20px;
}
.center{
	max-width: 100%;
	display: flex;
	justify-content: center;
}
h4{
	font-weight: bold;
	font-size: 120%;
}
.design{
	font-weight: normal;
	display: inline-block;
	border-bottom: 1px solid #000;
	font-size: 60%;
}
dl {
	margin: 30px 0;
	border-top: 0;
	line-height: 1.5;

overflow: hidden;
}
dt {
width: 24%;
float: left;
padding: 20px 0;
font-weight: bold;
color: #666;
}
dd {
	width: 75%;
	padding: 20px 0;
	text-align: left;
	float: right;
margin-top: -67px;
margin-left: 150px;
}
dd a{
	color: #996e74;
}
.flex{
	width: 30%;
}

a{
	text-decoration: none;
}
.content{
	margin: 0 auto;
	padding: 10px;
}
.modal{
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
	overflow: scroll;
}
.modal__bg{
	background: rgba(0,0,0,0.8);
	height: 100vh;
	position: fixed;
	width: 100%;
}
.modal__content{
	background: #fff;
	left: 50%;
	padding: 40px;
	position: absolute;
	top: 130%;
	transform: translate(-50%,-50%);
	width: 60%;
}
.top{
	top: 100% !important;
}
.banner{
	width: 80%;
}
.reflet{
	width: 80%;
}
.banner-wrap{
	top: 90% !important;
}
		/*==================================================
スライダーのためのcss
===================================*/
.slider {
	width: 100%;
	height: 500px;
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
}
.margin{
	width: 100%;
	display: flex;
	justify-content: center;
}
/*　背景画像設定　*/

.slider-item01 {
   background:url("../img/moe-1.png");
}

.slider-item02 {
    background:url("../img/moe-2.png");
}

.slider-item03 {
    background:url("../img/moe-3.png");
}
.slider-item04 {
    background:url("../img/moe-4.png");
}
.slider-item05 {
    background:url("../img/moe-5.png");
}
.slider-item06 {
    background:url("../img/moe-6.png");
}
.slider-item07 {
    background:url("../img/moe-7.png");
}
.slider-item08 {
    background:url("../img/moe-8.png");
}
.slider-item09 {
    background:url("../img/moe-9.png");
}
.slider-item10 {
    background:url("../img/moe-10.png");
}
.slider-item11 {
    background:url("../img/mroon1.png");
}
.slider-item12 {
    background:url("../img/mroon2.png");
}
.slider-item13 {
    background:url("../img/mroon3.png");
}
.slider-item14 {
    background:url("../img/mroon4.png");
}
.slider-item15 {
    background:url("../img/mroon5.png");
}
.slider-item16 {
    background:url("../img/store1.png");
}
.slider-item17 {
    background:url("../img/store2.png");
}
.slider-item18 {
    background:url("../img/store3.png");
}
.slider-item19 {
    background:url("../img/store4.png");
}
.slider-item20 {
    background:url("../img/store5.png");
}
.slider-item21 {
    background:url("../img/store6.png");
}
.slider-item22 {
    background:url("../img/store7.png");
}
.slider-item23 {
    background:url("../img/store8.png");
}
.slider-item24 {
    background:url("../img/store9.png");
}
.slider-item25 {
    background:url("../img/store10.png");
}
.slider-item26 {
    background:url("../img/store11.png");
}
.slider-item27 {
    background:url("../img/store12.png");
}
.slider-item28 {
    background:url("../img/store2-2.png");
}
.slider-item29 {
    background:url("../img/store2-1.png");
}
.slider-item30 {
    background:url("../img/third-1.png");
}
.slider-item31 {
    background:url("../img/third-2.png");
}
.slider-item32 {
    background:url("../img/third-3.png");
}
.slider-item33 {
    background:url("../img/third-4.png");
}

.slider-item34 {
    background:url("../img/second-1.png");
}
.slider-item35 {
    background:url("../img/second-2.png");
}
.slider-item36 {
    background:url("../img/second-3.png");
}
.slider-item37 {
    background:url("../img/second-4.png");
}
.slider-item38 {
    background:url("../img/second-5.png");
}

.slider-item39 {
    background:url("../img/first-1.png");
}
.slider-item40 {
    background:url("../img/first-2.png");
}
.slider-item41 {
    background:url("../img/first-3.png");
}
.slider-item42 {
    background:url("../img/first-4.png");
}
.slider-item43 {
    background:url("../img/first-5.png");
}
.slider-item44 {
    background:url("../img/p-1.png");
}
.slider-item45 {
    background:url("../img/p-2.png");
}
.slider-item46 {
    background:url("../img/p-3.png");
}
.slider-item47 {
    background:url("../img/p-4.png");
}
.slider-item48 {
    background:url("../img/p-5.png");
}
.slider-item49 {
    background:url("../img/p-6.png");
}
.slider-item50 {
    background:url("../img/pallet1.png");
}
.slider-item51 {
    background:url("../img/pallet2.png");
}
.slider-item52 {
    background:url("../img/pallet3.png");
}
.slider-item53 {
    background:url("../img/pallet4.png");
}
.slider-item54 {
    background:url("../img/pallet5.png");
}
.slider-item55 {
    background:url("../img/pallet6.png");
}
.slider-item56 {
    background:url("../img/pallet7.png");
}
.slider-item57 {
    background:url("../img/pallet8.png");
}
.slider-item58 {
    background:url("../img/zakka67.png");
}
.slider-item59 {
    background:url("../img/zakka-products.jpg");
}
.slider-item60 {
    background:url("../img/zakka-shop.jpeg");
}

.slider-item61 {
    background:url("../img/lim01.png");
}
.slider-item62 {
    background:url("../img/lim02.png");
}
.slider-item63 {
    background:url("../img/lim03.png");
}
.slider-item64 {
    background:url("../img/lim04.png");
}
.slider-item65 {
    background:url("../img/lim05.png");
}
.slider-item66 {
    background:url("../img/lim06.png");
}
.slider-item67 {
    background:url("../img/lim07.png");
}
.slider-item68 {
    background:url("../img/lim08.png");
}

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

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

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

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

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

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin: 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

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

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}
.btm-wrap{
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}
.button{
	width: 180px;
	height: 50px;
	text-align: center;
}
.button a{
	width: 180px;
	height: 50px;
	background-color: #f4e7e8;
	color: #996e74;
	display: flex;
align-items: center;
justify-content: center;
	border-radius: 3px;
}
.button a:hover{
	background-color: #996e74;
	color: #f4e7e8;
}

/*skill*/
.skill{
	max-width: 100%;
	height: auto;
	background-color: #f4e7e8;
}
.skill h2{
	text-align: center;
	padding-top: 50px;
	font-size: 300%;
}
.btn-solid-2 {
  color: #666;
  border-top: 2px solid #fff2f3;
  border-right: 2px solid #999192;
  border-bottom: 2px solid #ccc2c3;
  border-left: 2px solid #E7D8D9;
  border-radius: 5px;
  background: #f4e7e8;	
width: 47%;
	margin-top: 10px;
	padding: 10px 10px 10px 0;
}
.skill-wrap{
	margin: 0 auto;
	max-width: 75%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 40px;
}
.skill-img-wrap{
	float: left;
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80px;
}
.skill-img-wrap img{
	width: auto;
	height: 40px;
}
.skill figcaption{
	float: right;
	width: 80%;
}

/*======== コンタクトフォーム======= */
#contact{
	background-color: #f4e7e8;
	padding-bottom: 50px;
}
#contact h2{
	text-align: center;
	padding-top: 50px;
	font-size: 300%;
}
form table{
	margin: 0 auto;
	max-width: 75%;
	border-collapse: collapse;
}

form table th{
	width: 25%;
	font-weight: normal;
	text-align: left;
	text-indent: 1em;
}
form table td{
	width: 75%;
}
form table th, form table td{
	padding: 20px 0;
}

input[type="text"]{
	width: 50%;
	border: 1px solid #AAA;
	background-color: rgba(255,255,255,0.8);
}
input[type="email"]{
	width: 80%;
	border: 1px solid #AAA;
	background-color: rgba(255,255,255,0.8);
}
textarea{
	width: 90%;
	height: 8em;
	border: 1px solid #AAA;
	resize: none;/*テキストエリアの大きさ固定*/
	background-color: rgba(255,255,255,0.8);
}
input[type="submit"]{
	padding: 5px  40px;
	border: 1px solid #AAA;
	border-radius: 5px;/*角丸の設定*/
	background-image: linear-gradient(#eee, #aaa);/*背景色グラデーション*/
}
form p{
	margin-top: 30px;
	text-align: center;
}


footer{
	max-width: 100%;
	height: 50px;
	background-color: #D4A1A5;
	text-align: center;
	color: #FFF;
	padding: 10px;
}

/*右下のアイコン*/
.link{
	width: 50px;
	height: 120px;
	position: fixed;
	bottom: 115px;
	right: 20px;
	display: flex;
	flex-flow: column;
	align-items: center;
	font-size: 1rem;
}
.link img{
	width: 30px;
	height: 30px;
}
.link a{
	margin: 10px;
}
.circle-link{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #CA8C91;
	position: relative;
		
}
.dli-chevron-up {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  width: 0.8em;
  height: 0.8em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(25%) rotate(-45deg);
	position: absolute;
	bottom: 19px;
	right: 13px;
}
.dli-chevron-up-2 {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  width: 0.8em;
  height: 0.8em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(25%) rotate(-45deg);
	position: absolute;
	bottom: 9px;
	right: 13px;
}

#stalker {
    pointer-events: none;
    position: fixed;
    top: -13px;     /*座標調節（カーソル位置と円の中心を合わせる）*/
    left: -13px;    /*座標調節（カーソル位置と円の中心を合わせる）*/
    width: 26px;   /*//マウスストーカーの直径*/
    height: 26px;  /*//マウスストーカーの直径*/
    background: rgba(244,138 ,152,0.5);
    border-radius: 50%;
    transition: transform 0.2s, top, 0.5s, left 0.5s, width .5s, height .5s, background-color .5s;
    transition-timing-function: ease-out;
    z-index: 999;
}
#stalker.hov_{
      top: -32px;     
      left: -32px;    
      width: 64px;
      height: 64px;
      transition: .5s;
      background: rgba(140 , 245 , 231, 0.4);
    }
/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#f4e7e8;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}





@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


@media screen and ( max-width:479px )
{	html{
	font-size: 90%;
	}
		.sp{
		display: block;
	}
	header{
		max-width: 100%;
	}
	#stalker{
		display: none;
	}
	#home section{
		display: none;
	}
	.link{
		display: none;
	}
	#home{
		width: 100%;
		height: 100vh;
		background-image: url("../img/main.jpg");
		background-size: cover;

	}
	.sp-img{
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;;
	}
	.hello-wrap h2{
		z-index: 30;
	}
	.about-wrap{
		flex-flow: column;
	}
	.left{
		padding: 0;
	}
	.about-wrap{
		display: none;
	}
	.sp-about{
		display: block;
	}
	.about{
		height: auto;
		text-align: center;
	}
	.img-center{
		width: 100%;
		height: auto;
		align-items: flex-start;
		padding: 70px 0 0 0;
	}
	.sp-about article{
		padding-top: 10px;
	}
	.works-wrap{
		max-width: 100%;
		flex-flow: column;
		padding: 0 40px;
	}
	.flex{
		width: 100%;
	}
	.skill-wrap{
		flex-flow: column;
		max-width: 100%;
	}
	.btn-solid-2{
		width: 100%;
	}
	.icon{
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 80%;
	}
	header{
		padding: 10px;
	}
	.nav ul li a{
		font-size: 70%;
	}
	.btn01{
		padding: 5px 10px;
	}
	.nav ul li{
		margin-left: 0;
		margin-right: 10px;
	}
	.link-sp{
		display: block;
		text-align: right;
	}
	.link-sp img {
  width: 30px;
  height: 30px;
	margin: 10px;
}
	#contact{
		padding-bottom: 0;
	}
	form p{
		margin-top: 0;
	}
	form table th {
  width: 40%;
}

	form table{
		max-width: 90%;
	}
	.modal__content img{
		width: 100%;
	}
	.modal__content{
		width: 85%;
		padding: 10px;
		font-size: 80%;
		top: 100%;
	}
	.close{
		width: 30px !important;
		height: 30px !important;
	}
	.top {
  top: 100% !important;
}
	.slick-prev {/*戻る矢印の位置と形状*/
   display: none !important;
}

.slick-next {/*次へ矢印の位置と形状*/
    display: none !important;
}
	dl{
		margin: 10px;
	}
	dt{
		width: 35%;
	}
	dd{
		padding: 30px;
	}
	.button a{
		width: 100px;
		height: 30px;
		border-radius: 3px;
	}
	.button{
		display: flex;
		justify-content: center;
	}
.buruburu-hover:hover {
	height: auto;
	padding-bottom: 0;
}
.text{
      pointer-events: none;
    }
	.fukidashi{
		display: block;
		position: static;
		background: none;
		color: #666;
		font-size: 70%;
		width: 100%;
	}
	.css-fukidashi{
      width: auto;
	}
	.works-box{
		margin-top: 10px;
	}
	label{
		white-space: nowrap;
	}
}