@charset "utf-8";

.permission {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.permission h1 {
	font-size: 2em;
    margin: 5% 5%;
}
.permission p {
	text-align: center;
	font-size: 1.3em;
}
.permission button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
}

/* 点滅 */
.blinking{
  -webkit-animation:blink 0.5s ease-in-out infinite alternate;
  -moz-animation:blink 0.5s ease-in-out infinite alternate;
  animation:blink 0.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}

@keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
.prof dd:nth-of-type(2) {
  background-color: #eee;
  margin: 0 1em;
  border-radius: 10px;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

h2 {
    text-align: center;
    color: #ff69b4;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 5px;
}
h3 {
    text-align: center;
    color: #ff69b4;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 5px;
}

#message-link {
  display: block;
  text-decoration: none;
}

/*
#message-link .send-message {
  width: 60%;
  display: block;
  margin: 15px auto 10px auto;
  padding: 5px;
  border: solid 1px #00a8ff;
  text-align: center;
  border-radius: 30px;
  color: #fff;
  font-weight: bold;
  background: linear-gradient(45deg, #77c8f0, #00a8ff);
}
*/
/* CSS */
#message-link {
  text-align: center; /* 子要素を中央揃え */
  margin-top: 10px;
}

.send-message {
  width: 60%;
  display: inline-block;
  margin-bottom: 20px;
  padding: 0.5em 1.5em;
  font-size: 1.0rem;
  color: #fff;
  background: linear-gradient(135deg, #6f00ff, #9f00ff);
  border: none;
  border-radius: 30px;
  box-shadow: 0 5px 10px rgba(111, 0, 255, 0.4);
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.send-message::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}

.send-message:hover::before {
  left: 125%;
}

.send-message:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 25px rgba(111, 0, 255, 0.5);
}


#message-action p {
  color: #ff69b4;
  width: 94%;
  margin: 0 auto;
  display: block;
}

body {
  font-size:13px;
  margin:0 auto;
  font-family: Verdana, Geneva, "sans-serif";
  -webkit-text-size-adjust:100%;
  color:#282828;
  height:100%;min-height:100%;
}

.centered_div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
}

.centered_div > div {
  width: 100%;
}

.right{text-align: right;}
.center{text-align: center;}

dl.prof{
	padding-bottom: 20px;
  overflow: hidden;
}

dl.prof dt {
  position:relative;
}
dl.prof dt img {
  width:100%;
}
dl.prof dt > p{position:absolute;bottom:0;left:0;width:100%;padding:8px;color:#FFF;font-weight:bold;font-size:1.4em;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(0,0,0,0.31) 99%, rgba(0,0,0,0.31) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(0,0,0,0.31) 99%,rgba(0,0,0,0.31) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(0,0,0,0.31) 99%,rgba(0,0,0,0.31) 100%);}

dl.prof dt > p span {
  display:inline-block;
  margin-right: 10px;
}
dl.prof dd {
  padding:1em;
}

dl.prof dd h2 {
  text-align:right;
}
dl.prof dd h4 {
  font-weight:bold;
  font-size:1.2em;
  margin-bottom:1em;
}
dl.prof dd > p {
  margin-bottom:1em;
}

dl.prof dd.flex {
  display:-webkit-flex;
  display:flex;
  justify-content: flex-start;
  align-items: center;
}

dl.prof dd ul.thumbnails li {
  margin-right:0.6em;
  width: 31%;
}

dl.prof dd ul.thumbnails li img {
	border-radius: 0%;
	border: 3px solid #f1f1f1;
}

dl.prof dd ul.thumbnails li img:hover,
dl.prof dd ul.thumbnails li img:active {
  border:3px solid #ff69b4;
}

.flex {
  display: flex;
  justify-content: center;
}

p#notification{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #ff69b4;
	padding: 5px;
	z-index: 3;
	color: #FFF;
}

p#notification img {
  width: 26px;
  border-radius:50%;
  margin-right: 5px;
}

p#notification span {
  display:inline-block;
  background: #F00;
  color:#FFF;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  margin-left: 5px;
}

/*--------------------  animation --------------------  */

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

.animated {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}


@media (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}


.message-field {
  position: relative;
  display: inline-block;
  margin: 10px 0px 10px 0px;
  padding: 7px 10px;
  width: 90% !important;
  color: #555555;
  font-size: 1.0em;
  border-radius:10px;
    background-color: #ffe6e5;
}


.message-field p {
  text-align:left;
  margin: 0;
  padding: 3px;
font-weight: bold;
}

div#list ul, ol {
  padding: 0;
  position: relative;
}

div#list ul li, ol li {
  color: #555;
  border-left: solid 6px #ff69b4;
  background: #ffddee;
  margin-bottom: 3px;
  line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;
}

div#personal-info ul {
  padding: 0;
  position: relative;
}

div#personal-info ul li {
  color: white;
  background: #8a2be2;
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 2.5em;
  border-bottom: 2px solid white;
  list-style-type: none!important;
  font-weight: bold;
  font-size: 1.2em;
}

div#personal-info ul li:before {
  content: "";
  position: absolute;
  left: 1.0em;
  width: 20px;
  height: 20px;
  background-image: url("../../common/img/icon_prof2.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.photo {
	text-align:center;
	font-size:1.8em;
	color:#cccccc;
	margin-top:-10px;
	margin-bottom:10px;
}

/* LINE ボタン*/
#line_button {
  display: block;
  margin: 0 auto;
  text-align: center;
}

#line_button a,
#line_button2 a {
	background: #00bb00;
  box-shadow:0 5px 0 #219900;
	font-size: 1.2em;
	position: relative;
	display: inline-block;
	padding: 10px;
	color: #fff;
	border-radius: 30px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	width: 90%;
	margin: 10px 0px 10px 0px;
	z-index: 0;
}

#line_button a:hover,
#line_button2 a:hover {
  background:#219900;
  -webkit-transform: translate3d(0px, 5px, 1px);
  -moz-transform: translate3d(0px, 5px, 1px);
  transform: translate3d(0px, 5px, 1px);
  box-shadow:none;
  z-index: 0;
}


/*=======　top画像の点滅文字のスタイル　=======*/
dt.top-image p span.on::before {
  content: "";
  display: inline-block;
  width: 25px;
  height: 18px;
  background-image: url(../img/wi_fi.webp);
  background-size: cover;
  margin-right: 5px;
  margin-bottom: 2px;
  vertical-align: middle;
}

dt.top-image p span.on::after {
  content: "只今オンライン中";
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}

.blinking {
  animation: blinkingText 1.5s infinite;
}

@keyframes blinkingText {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

dt.top-image p span.on{
  font-size: 15px;
}

/*=======　通知のスタイル　=======*/

div.push {
  position: fixed;
  top: 5px;
  left: 2%;
  width: 96%;
  background: rgba(255, 255, 255, .9);
  border-radius: 0.5em;
  z-index: 1;
  padding: 6px;
  box-shadow: 8px 8px 8px -8px;
  font-size: 1.1em;
}

div.push p{
  position:absolute;
  top:-3px;right:-3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F00;
  color:#FFF;
  border-radius:50%;
  text-align: center;
  width: 30px;
  height: 30px;
  font-weight:bold;
  font-family:  Arial, Helvetica, "sans-serif";
  font-size:1.1em;
}

div.push span {
  font-weight:bold;
}
div.push .box_flex {
  display:flex;
  justify-content: space-between; /* 左右に配置 */
  align-items: center; 
}
div.push .box_flex .image {
  width:13%;
  margin-right:2%;
}
div.push .box_flex .image {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

div.push .box_flex .image > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**
div.push .box_flex .text {
  width: 85%;
}
**/

/** 追加 **/
div.push .box_flex .text {
  width: 65%;
}

.box_flex img {
  width: 3.5rem;
}

/** 追加 **/


.slideInDown {
		-webkit-animation-name: slideInDown;
		animation-name: slideInDown;
	}

	@-webkit-keyframes slideInUp {
		from {
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
			visibility: visible;
		}

		to {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes slideInUp {
		from {
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
			visibility: visible;
		}

		to {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	.slideInUp {
		-webkit-animation-name: slideInUp;
		animation-name: slideInUp;
	}

	.animated {
		-webkit-animation-duration: 800ms;
		animation-duration: 800ms;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	@media (prefers-reduced-motion) {
		.animated {
			-webkit-animation: unset !important;
			animation: unset !important;
			-webkit-transition: none !important;
			transition: none !important;
		}
	}
	.animated.infinite {
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	}
	.text u {
		color: #0000ff;
	}

/*=======　switcher style　=======*/

/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
  border-radius: 15px;
  padding: 3px; /* 内側のスペースを確保 */
  background: linear-gradient(45deg, #c234fa, #ff69b4);
  -webkit-background-clip: padding-box; /* 背景をクリップ */
  background-clip: padding-box;
  transition: all 0.5s;
}

/* レイアウトのためのスタイル */

.main-img img {
		height: auto;
		width: 100%;
	}
.sub-img {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		gap: 5px;
		overflow-x:scroll;
	}
.sub-img {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 10px;
  gap: 5px;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 5px;
}

.sub-img li {
  flex: 0 0 auto;
  width: 65px;
  height: 65px;
  overflow: hidden;
  border-radius: 8px;
}

.sub-img img {
  cursor: pointer;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border 0.5s;
}


h1 {
	z-index: 2;
}

/* profのためのスタイル */

.profile-title::before {
  content: "プロフィール";
  display: block;
  font-size: 1.0em;
  font-weight: bold;
  color: #ff69b4;
}

.self-intro {
  width: 90%;
  margin: 5px auto 15px auto;
  display: block;
  text-align: left;
  font-size: 1.0em;
  font-weight: bold;
}

.mask-container {
	position: relative;
	width: 100%;
	padding-top: 127%;
	overflow: hidden;
}

.mask-container .c_image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-frame {
  width: 50%;
  padding-top: 50%;
  border-radius: 15%;
  overflow: hidden;
  position: relative;
  margin: 10px auto 0 auto;
}

.image-frame img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#notification u {
  cursor: pointer;
}

/* ボタンアニメーション */

.btn_anm {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  animation-direction: normal;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


/*=======　モーダルのスタイル　=======*/
div#message-status {position:fixed;
  bottom:0;
  left:0;width:100%;
  height: 100%;
  background:#EEE;
  display:none;
  overflow: hidden;
  z-index: 5;}

div#message-status h3{
	background: #8a2be2;
	color: #FFF;
	text-align: center;
	padding: 8px 5px;
	position: relative;
	font-size: 1.1em;
	font-weight: bold;
}
div#message-status h3 span {
  position: absolute;
  right: 5px;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  color: #999;
  padding: 1px 3px;
  font-size: 0.9em;
  border-radius: 10px;
  width: 20px;
  height: 20px;
}

div#message-status h3 span img {
  max-width: 100%;
  max-height: 100%;
}
div#message-status ul{padding-bottom:90px;}
div#message-status ul li{width:80%;padding:1em 1em 0;}
div#message-status ul li dl {
  display:-webkit-flex;
  display:flex;
  width: 110%;
}
div#message-status ul li dt {
  width:20%;
  margin-right: 10px;
}

div#message-status ul li dt {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

div#message-status ul li dt img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を親要素に収める */
}
div#message-status ul li dd{width:80%;}
div#message-status ul li dd p {
  border-radius:1em;
  background:#FFF;
  position:relative;
  padding:5px;
}
div#message-status ul li dd.image p{padding:0;}
div#message-status ul li dd p > img{border-radius:1em;}
@-webkit-keyframes float {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.05);
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes float {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1.05);
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}

.yureru-h {
  animation: yureru-h 2s infinite;
}
@keyframes yureru-h {
  0% {
      transform: translate(2px, 0px);
  }
  5% {
      transform: translate(-2px, 0px);
  }
  10% {
      transform: translate(2px, 0px);
  }
  15% {
      transform: translate(-2px, 0px);
  }
  20% {
      transform: translate(2px, 0px);
  }
  25% {
      transform: translate(-2px, 0px);
  }
  30% {
      transform: translate(0px, 0px);
  }
}

.btn-hidden {
  display: none !important;
}

div#message-status ul li dd p .received-message {
  background: #00bb00 url(../../common/img/btn_arrow.webp) no-repeat 90% 50%;
  color: #FFF;
  font-size: 1.2rem;
  border-radius: 50px;
  display: block;
  padding: 15px 10px;
  width: 120%;
  text-align: center;
  position: absolute;
  top: 40%;
  left:-10%;
  text-decoration: none;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}


div#message-status ul li > p{font-size:0.8em;text-align:right;margin-top:5px;}
div#message-status ul li.status1,
div#message-status dd.status2,
div#message-status dd.status3 {
  display:none;
}

div#message-status dt {
  display: flex;
}

a.design-part-link {
  display: flex;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

#spinner{
  position:relative;
  height: 25px;
  width: 220px;
}

.spinner{
	position:absolute;
	top:0;
	color:#ADADAD;
	background-color:rgb(255,255,255);
	width:10px;
	height:10px;
  animation-name:bounce_spinner;
    -o-animation-name:bounce_spinner;
    -ms-animation-name:bounce_spinner;
    -webkit-animation-name:bounce_spinner;
    -moz-animation-name:bounce_spinner;
  animation-duration:2.1s;
    -o-animation-duration:2.1s;
    -ms-animation-duration:2.1s;
    -webkit-animation-duration:2.1s;
    -moz-animation-duration:2.1s;
  animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
  animation-direction:normal;
    -o-animation-direction:normal;
    -ms-animation-direction:normal;
    -webkit-animation-direction:normal;
    -moz-animation-direction:normal;
  transform:scale(.2);
    -o-transform:scale(.2);
    -ms-transform:scale(.2);
    -webkit-transform:scale(.2);
    -moz-transform:scale(.2);
  border-radius:10px;
    -o-border-radius:10px;
    -ms-border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}

#spinner_1 {
  top: 7px;
  left: 16px;
  animation-delay: 0.91s;
  -o-animation-delay: 0.91s;
  -ms-animation-delay: 0.91s;
  -webkit-animation-delay: 0.91s;
  -moz-animation-delay: 0.91s;
}

#spinner_2 {
  top: 7px;
  left: 33px;
  animation-delay: 1.14s;
  -o-animation-delay: 1.14s;
  -ms-animation-delay: 1.14s;
  -webkit-animation-delay: 1.14s;
  -moz-animation-delay: 1.14s;
}

#spinner_3 {
  top: 7px;
  left: 49px;
  animation-delay: 1.37s;
  -o-animation-delay: 1.37s;
  -ms-animation-delay: 1.37s;
  -webkit-animation-delay: 1.37s;
  -moz-animation-delay: 1.37s;
}

#spinner_4 {
  top: 7px;
  left: 66px;
  animation-delay: 1.59s;
  -o-animation-delay: 1.59s;
  -ms-animation-delay: 1.59s;
  -webkit-animation-delay: 1.59s;
  -moz-animation-delay: 1.59s;
}

#spinner_5 {
  top: 7px;
  left: 82px;
  animation-delay: 1.82s;
  -o-animation-delay: 1.82s;
  -ms-animation-delay: 1.82s;
  -webkit-animation-delay: 1.82s;
  -moz-animation-delay: 1.82s;
}


@keyframes bounce_spinner{
	0%{
	transform:scale(1);
		background-color:rgb(173,173,173);
	}

	100%{
	transform:scale(.2);
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes bounce_spinner{
	0%{
	-o-transform:scale(1);
		background-color:rgb(173,173,173);
	}

	100%{
	-o-transform:scale(.2);
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes bounce_spinner{
	0%{
	-ms-transform:scale(1);
		background-color:rgb(173,173,173);
	}

	100%{
	-ms-transform:scale(.2);
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes bounce_spinner{
	0%{
	-webkit-transform:scale(1);
		background-color:rgb(173,173,173);
	}

	100%{
	-webkit-transform:scale(.2);
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes bounce_spinner{
	0%{
	-moz-transform:scale(1);
		background-color:rgb(173,173,173);
	}

	100%{
	-moz-transform:scale(.2);
		background-color:rgb(255,255,255);
	}
}

.design-part {
  width: 100%;
  height: 100vh;
  cursor: pointer;
}