@charset "UTF-8";

.emphasis_design28 {
  color: #fff;
  text-shadow: 3px 3px #663300;
}
.emphasis_design36 {
  color: #fff;
  text-shadow: 2px 2px 10px #663300, -2px 2px 10px #663300, 2px -2px 10px #663300, -2px -2px 10px #663300;;
}

h3 {
  font-size: 150%;
}

/* マウスストーカー */
    #stkr{
      position: absolute;
      top: 10px;
      left: 10px;
      width: 25px;
      height: 25px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      transition: 0.2s;
      transition-timing-function: ease-out;
      pointer-events: none;
      z-index: 10;
    }
    /* マウスストーカーの可動範囲 */
    #stkr-area{
      width: 100%;
      height: 300px;
      padding: 10px;
      box-sizing: border-box;
      position: relative;
      background-color: rgb(184, 149, 247, 0.5);
    }
    /* ホバーした時の色 */
    .color1{ background-color: rgb(247, 77, 155, 0.5) !important; }
    .color2{ background-color: rgb(77, 200, 247, 0.6) !important; }
    .color3{ background-color: rgb(77, 247, 82, 0.5) !important; }


img {
  margin: 50px auto 50px;
  display: block;
  width: 100%;
  max-width: 800px;
}

/*
.box1-1 {
  background-color: aqua;
  margin: 0 auto;
  width: 95%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
}
*/
.box1 {
  margin: 0 auto;
  width: 95%;
  height: auto;
  position: relative;
  text-align: center;
}

.shadow_btn01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 500px; /* ボタン幅 */
  height: 5em; /* ボタン高さ */
  background: #fff; /* 背景色 */
  position: relative;
  margin-bottom: 5em;
}

.shadow_btn01 span {
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5.5em;
  background: #fff; /* 背景色 */
  color: #000; /* 文字色 */
  font-weight: bold; /* 文字の太さ */
  letter-spacing: 0.1em;
  text-decoration: none;
  box-shadow: 0px 5px 12px #cad4e2, -6px -6px 12px #fff;
  border-radius: 10px;
  position: absolute;
  top: -5px;
  left: 0;
  transition-duration: 0.2s;
}

/* マウスオーバーした際のデザイン */
.shadow_btn01:hover span {
  background: #FFFFBF;
  left: 0;
  top: 0;
  box-shadow: 0 0 4px #CAD4E2, -2px -2px 4px #FFF;
}

body {
background: left repeat-x repeat-ｙ url("bg.png");
/*cursor: none;*/
}

body a:hover{
/*cursor: none;*/
}

#cursor2{
	position: fixed;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;/*半分引いてカーソル先端に画像中心位置が来るように*/
	z-index: 2;/*一番手前に来るように*/
	pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/
	transition: transform 0.1s;
	opacity: 0;/*開いた瞬間非表示*/
}

#cursor2.active{
	transform: scale(1.8);
}

#cursor{
  position: fixed;     /* 絶対位置になるように指定 */
  z-index: 2;          /* 重なり順を上に指定。他の要素に合わせて数字を大きくしてください。 */
  pointer-events: none;/*【重要】マウス直下に常に画像があるので、全てをクリックできなくなる。noneにして対応*/
  margin: 0 0 0 -20px; /* 表示位置を左に20pxずらす */
  transition: all .2s ease-out;  /* 1コマ1コマ、0.2秒かけて動かすことでふわっと動く */

/* 以下ついてくる要素の見た目のCSS */
width: 30px;
height: 30px;
background: url("pointer.png") no-repeat;
/*background-image: url("/pointer.png");
background: url("pointer.png") 80% 80% no-repeat;
width: 15px;
height: 15px;
border-radius: 50%;
background: #000;*/
}