@charset "utf-8";

.mybox{
   border: 2px dotted #ff1493;	/* 線の太さ・種類・色 */
   border-radius:8px;
   padding: 10px 10px;	        /* 内側の余白 上下・左右 */
   position: relative;
   font-size:32px;
   font-weight:bold;
   width:500px;
   z-index:120;margin:25px auto;
   text-align:center;color:#fff;
   text-shadow:  1px 1px 8px #ff1493;
}
.mybox:before{
   content: '＊';
   color: #fff;	        /* 左上の花の色 */
   font-size: 50px;	/* 左上の花のサイズ */
   font-weight: bold; 
   position: absolute;
   top: -38px;
   left: -25px;
     transform: rotate(20deg);
     -moz-transform: rotate(20deg);
     -webkit-transform: rotate(20deg); 
     -o-transform: rotate(20deg);
     text-shadow:  0 0 8px #ff1493, 0 0 6px #ff1493, 0 0 4px #ff1493, 0 0 2px #ff1493, 0 0 0.5px #ff1493;	/* 左上の花の縁取りの色 */
}
.mybox:after{
   content: '*';
   color: #fff;	        /* 右下の花の色 */
   font-size: 50px;	/* 右下の花のサイズ */
   font-weight: bold; 
   position: absolute;
   bottom: -45px;
   right: -15px;
   transform: rotate(20deg);
     -moz-transform: rotate(20deg);
     -webkit-transform: rotate(20deg); 
     -o-transform: rotate(20deg);
     text-shadow:  0 0 8px #ff1493, 0 0 6px #ff1493, 0 0 4px #ff1493, 0 0 2px #ff1493, 0 0 0.5px #ff1493;	/* 右下の花の縁取りの色 */
}
/* フッター */
footer {
  display:none;
}
/* スペーサー */
.spacer{
   height:0.1px;
}
/* フワフワ */
.fuwafuwa {
  animation: fuwafuwa 2s infinite ease-in-out .8s alternate;
  transition: 1.5s ease-in-out;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-4deg);
  }
  50% {
    transform:translate(0, 0px) rotate(1deg);
  }
  100% {
    transform:translate(0, 0) rotate(4deg);
  }
}
/* ナビゲーション */
bigin{
   position:absolute;
   z-index:2;
   top:200px;
/* posituon-ajust */
   left:30px;
}
/* 見出し */
.midashi{
  position: relative;
  margin:0em 0;
  padding: 0.3em 0.5em 0.1em 0.5em;
  background: #f29c9f;
  height: 5vh;
}
.midashi::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  top: 100%;
  z-index: 10;
  display: block;
  height: 19px;
  background-size: 12px 100%;
  background-image: linear-gradient(135deg, #f29c9f 25%, transparent 25%), linear-gradient(225deg, #f29c9f 25%, transparent 25%);
  background-position: 0%;
}
#looks {
  color:#f29c9f;
  font-size:1.4em;
}
/* HOMEボタン */
.back a {
  position: relative;
  display: flex;   
  align-items: center;
  margin: 0px auto 20px auto;
  max-width: 145px;
  padding: 10px 0px 10px 30px;
  color: #FFF;
  transition: 0.3s ease-in-out;
  background: #ff1493;
  filter: drop-shadow(0px 2px 4px #ccc);
  border-radius: 3px;
  border-radius: 50px;
}
.back a:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}
#looks2{
  color:#fff;
  font-size:1.7em;
}
.cafe01{
   background: url(../img/haikei.png);
   background-size: cover ;
   min-height:100vh;
}
.cafe02{
   width:880px;
   border-collapse: collapse;
   margin:140px auto 30px;
}
.cafe03{
   width:600px;
}
.cafe031{
   width:600px;
   margin:140px auto 30px;
}
.cafe04{
   border:dotted 3px orange;
   border-radius:8px;
   vertical-align:top;
   padding:0 10px 10px;
   background-color:rgba(255,255,255,0.8);
}
.cafe05{
   width:250px;
   vertical-align:top;
}
.cafe051{
   margin-left:20px;
   height:260px;
   border-radius:8px;
   background:skyblue;
   margin-bottom:20px;
   position:relative;
}
.cafe052{
   border:dashed 3px #fff;
   top:18px;
   left:11px;
   width:210px;
   height:220px;
   position:absolute;
   border-radius:8px;
}
.cafe053{
   margin:30px auto;
   width:100px;
   height:154px;
}
.cafe054{
   font-weight:bold;
   font-size:1.8em;
   position:absolute;
   bottom:5px;
   right:15px;
   color:pink;
   text-shadow:3px 3px 2px #000;
}
.cafe06{
   border:dotted 3px orange;
   border-radius:8px;
   padding:10px;
   margin-left:20px;
   background-color:rgba(255,255,255,0.8);
}
.cafe09{
   display:none;
}
.cafe11{
      display:none;
}
.cafe12{
   border:2px solid #f29c9f;
   border-radius:.75rem;
   background-color:#ffffff;
   width:138px;
   padding:8px 0;
   color:#f29c9f;
   font-weight:bold;
   text-align:center;
   overflow:hidden;
}
.cafe13{
   margin-left:20px;
   font-size:1.2em;
   font-weight:600;
   color:#fff;
}
.back{
   display:none;
}

/*  携帯サイト  */

@media screen and (max-width: 750px) {

.mybox{
   font-size:1.2em;
   width:280px;
   padding: 10px 10px;
}
#scrollArea{
   height:97px;
}
bigin{
   display:none;
}
.cafe02{
   width:93%;
   margin:110px auto 10px;
}
.cafe03{
   width:100%;
}
.cafe031{
   width:93%;
}
.cafe05{
   display:none;
}
.cafe07{
   width:100%;
   padding-top:15px;
}
.cafe08{
   border:dotted 3px orange;
   border-radius:8px;
   padding:10px;
}
.cafe09{
   display:inline;
}
.cafe10{
   display:none;
}
.cafe11{
   display:inline !important;
}
.back{
   display:inline;
}   
 }