@charset "UTF-8";
@font-face {
  src: url(../font/GL-Otomanopee.ttf);
  font-family: my_font;
}

.deco_a a{
  text-decoration: underline;
  color: magenta;
}

.tomodachi_tuika{
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
}

.links_page{
  font-size: 14px;
}

.links_page .heading{
  font-size: 16px;
  font-weight: 700;
}
.white_font{
  color:white;
  text-shadow: 0px 0px 5px magenta;
}

.font_otome{
  font-family: my_font;
}
#bg{
  position: fixed;
  z-index: 0;
}

#bg_half_black{
  width: 50%;
  height: 100%;
  position: absolute;
  top:0;
  right: 0;
  background-color: #444444;
  z-index: -1;
}

#magatama_base{
  width: 20vmin;
  height: 20vmin;

  animation-name: rotate_z_360;
  animation-timing-function:steps(60);
  animation-duration:30s;
  animation-iteration-count: infinite;
/*
  background-image: url(../images/top/kagami.png);
*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;


/*
  background-color: red;
*/
}

.magatama_sq{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /*
  border: solid 1px black;
  */
}

.magatama_obj{
  position: absolute;
  display: inline-block;
  margin: auto;
  left: 0;
  right: 0;
  bottom: -120%;
  width: 100%;
  height: 120%;
  /*
  background-color: blue;
  */
}

.magatama_obj img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;


}


.rotate_0{
  transform: rotateZ(0deg);
}

.rotate_45{
  transform: rotateZ(45deg);
}

.rotate_90{
  transform: rotateZ(90deg);
}

.rotate_135{
  transform: rotateZ(135deg);
}

.rotate_180{
  transform: rotateZ(180deg);
}

.rotate_225{
  transform: rotateZ(225deg);
}

.rotate_270{
  transform: rotateZ(270deg);
}

.rotate_315{
  transform: rotateZ(315deg);
}




/*background object*/

.logo_main{
  background-image: url(../images/logo/main_logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.logo_name_post{
  background-image: url(../images/logo/name_post.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.logo_name{
  background-image: url(../images/logo/name.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.logo_post{
  background-image: url(../images/logo/post.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}
.logo_copy{
  background-image: url(../images/logo/copy.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}
.logo_cat1{
  background-image: url(../images/logo/cat1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}

.name_block{
  width: 175px;
  height: 100px;
  margin: auto;

}

.rainbow{
  background : linear-gradient(0deg,
                               transparent,
                               #ff7f7f,
                               #ffbf7f,
                               #ffff7f,
                               #7fff7f,
                               #7fffff,
                               #7f7fff,
                               #ff7fff,
                               transparent);
  color: white;
  opacity: 0.9;

}

.shadow_black{
  text-shadow: 2px 2px 5px black;
}

.shine2_bg{
  background-image: url(../images/effects/shine2.png);
  background-repeat:  repeat;
  background-size:contain;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
}

.shine2_bg_style{
  background-image: url(../images/effects/shine2.png);
  background-repeat:  repeat;
  background-size: cover;
  background-position: center;
}


.h2_border{
  border-left: solid 5px black;
    text-shadow: 3px 3px 0px white;
    box-sizing: border-box;
    padding-left: 25px;
    width: auto;
}

.h2_style_1{
  margin: 30px auto;
  text-align: center;

}
.padd_area{
  height:100px;
  width: 100%;
  display: block;
  position: relative;
}


/*effect object*/

#door_frame{
  width: 100vw;
  height: 100vh;
  z-index: 50;
  font-size: 0;
  display: none;
  background-color: white;
}

#left_door{
  position: absolute;
  display: inline-block;
  width: 50%;
  height: 100%;
  left:0;
  top:0;
  background-color:black;
  box-sizing: border-box;
  transform-origin: left center;
}
#right_door{
  position: absolute;
  width: 50%;
  height: 100%;
  right:0;
  top:0;
    background-color:black;
  box-sizing: border-box;
  transform-origin: right center;
}

#shine{
  width: 100vw;
  height: 100vh;
  z-index: 50;
  font-size: 0;
  background-image: url(../images/effects/shine.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: none;
}



/*  icon objects */


.icon_50px{
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
}

.icon_50px img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;

}

.prologue_icon_1{
  position: absolute;
  left: 10px;
  top:10px;
}

.prologue_icon_2{
  position: absolute;
  left: 10px;
  bottom: 10px;
}

.prologue_icon_3{
  position: absolute;
  right: 10px;
  top:10px;
}

.prologue_icon_4{
  position: absolute;
  right: 10px;
  bottom: 10px;
}


.prologue_icon_5{
  position: absolute;
  left: 10px;
  top:33%;
}

.prologue_icon_6{
  position: absolute;
  left: 10px;
  bottom: 33%;
}

.prologue_icon_7{
  position: absolute;
  right: 10px;
  top:33%;
}

.prologue_icon_8{
  position: absolute;
  right: 10px;
  bottom: 33%;
}
/*deco*/

.deco_line{
  width: 100%;
  height: 30px;
  display: block;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 5;
}

.deco_corner_s{
  width: 30%;
  height: 100px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 5;
}

.deco_corner{
  width: 30%;
  height: 200px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 5;

}

.corner1_l_t{
  top:0;
  left: 0;
  background-position:left top;
  background-image: url(../images/deco/corner1_l_t.png);
}
.corner2_l_t{
  top:0;
  left: 0;
  background-position:left top;
  background-image: url(../images/deco/corner2_l_t.gif);
}

.corner2_l_t_gold{
  top:0;
  left: 0;
  background-position:left top;
  background-image: url(../images/deco/corner2_l_t_gold.gif);
}
.corner1_l_b{
  bottom: 0;
  left: 0;
  background-position:left bottom;
  background-image: url(../images/deco/corner1_l_b.png);
}
.corner2_l_b{
  bottom: 0;
  left: 0;
  background-position:left bottom;
  background-image: url(../images/deco/corner2_l_b.gif);
}
.corner2_l_b_gold{
  bottom: 0;
  left: 0;
  background-position:left bottom;
  background-image: url(../images/deco/corner2_l_b_gold.gif);
}

.corner1_r_t{
  top:0;
  right: 0;
  background-position:right top;
  background-image: url(../images/deco/corner1_r_t.png);
}
.corner2_r_t{
  top:0;
  right: 0;
  background-position:right top;
  background-image: url(../images/deco/corner2_r_t.gif);
}
.corner2_r_t_gold{
  top:0;
  right: 0;
  background-position:right top;
  background-image: url(../images/deco/corner2_r_t_gold.gif);
}

.corner1_r_b{
  bottom: 0;
  right: 0;
  background-position:right bottom;
  background-image: url(../images/deco/corner1_r_b.png);
}

.corner2_r_b{
  bottom: 0;
  right: 0;
  background-position:right bottom;
  background-image: url(../images/deco/corner2_r_b.gif);
}


.corner2_r_b_gold{
  bottom: 0;
  right: 0;
  background-position:right bottom;
  background-image: url(../images/deco/corner2_r_b_gold.gif);
}


.line_1{
  background-image: url(../images/deco/line_1.png);
}
.line_1_r{
  background-image: url(../images/deco/line_1_r.png);
}
.line_2{
  background-image: url(../images/deco/line_2.png);
}
.line_2_r{
  background-image: url(../images/deco/line_2_r.png);
}
.line_3{
  background-image: url(../images/deco/line_3.png);
}
.line_3_r{
  background-image: url(../images/deco/line_3_r.png);
}

.line_1_bl{
  background-image: url(../images/deco/black_line_1.png);
}
.line_1_r_bl{
  background-image: url(../images/deco/black_line_1_r.png);
}
.line_2_bl{
  background-image: url(../images/deco/black_line_2.png);
}
.line_2_r_bl{
  background-image: url(../images/deco/black_line_2_r.png);
}
.line_3_bl{
  background-image: url(../images/deco/black_line_3.png);
}
.line_3_r_bl{
  background-image: url(../images/deco/black_line_3_r.png);
}

/*button*/

.btn_sty1{
  position: relative;
  margin: 10px auto;
  width: 280px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  box-sizing: border-box;
  border: solid 3px magenta;
  background-color: white;
  font-weight: 700;
  transition-duration: 0.5s;
  border-radius: 86% 14% 76% 24% / 41% 67% 33% 59% ;
}

.btn_sty1:hover{
  background-color: #efefff;
  color: magenta;
}

.btn_sty2{
  position: relative;
  margin: 10px auto;
  width: 280px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  box-sizing: border-box;
  border: solid 3px pink;
  box-shadow: 5px 5px 0px lightblue;
  background-color: white;
  font-weight: 700;
  transition-duration: 0.5s;
  border-radius: 25% 75% 30% 70% / 57% 18% 82% 43% ;
}
.btn_sty2:hover{
  background-color: lightblue;
  color: white;
}

.btn_sty3{
  position: relative;
  margin: 10px auto;
  width: 280px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  box-sizing: border-box;
  border: solid 3px gold;
  background-color: white;
  font-weight: 700;
  transition-duration: 0.5s;
  border-radius: 52% 48% 76% 24% / 51% 52% 48% 49%  ;
}
.btn_sty3:hover{
  background-color: burlywood;
  color: white;
}

/*hukidasi*/

.hukidasi_1,.hukidasi_2{
  position: relative;
  width: auto;
  height: auto;
  display: inline-block;
  background-color: white;
  box-sizing: border-box;
  padding: 20px 10px;
  border-radius: 93% 7% 95% 5% / 5% 96% 4% 95% ;
  color:#eeeeee;
}

.hukidasi_3,.hukidasi_4{
  position: relative;
  width: auto;
  height: auto;
  display: inline-block;
  background-color: white;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 93% 7% 95% 5% / 5% 96% 4% 95% ;
  color:black;
  border: solid 2px black;
}




.hukidasi_1::after,.hukidasi_3::after{
  content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 0 10px 40px;
      border-color: transparent transparent transparent white;
      position: absolute;
      top: calc(50%-11px);
      right: -30px;
      transform: rotateZ(-15deg);
      z-index: 1;
}
.hukidasi_2::after,.hukidasi_4::after{
  content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 40px 10px 0;
      border-color: transparent white transparent transparent;
      position: absolute;
      top: calc(50%-11px);
      left: -30px;
      transform: rotateZ(-15deg);
      z-index: 1;
}


.text_shadow_white{
  text-shadow: 2px 2px 0px white;
}

.maru{
  display: block;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  margin: auto;
}

.sns_icon{
  width: 75px;
  height: 75px;
  margin: 30px auto;
  display: block;

}
.sns_icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}



.top_maku{
  position: absolute;
  top:0;
  width: 100%;
  height: 150px;
  background-position: center;
  background-image: url(../images/bg/top_maku.gif);
  background-repeat: repeat-x;
  background-size: cover;
}
.bot_maku{
  background-position: bottom center;
  background-image: url(../images/bg/btm_maku.gif);
  background-repeat:no-repeat;
  background-size: cover;
}


.init_obj{
  z-index: 90;
}



/*menu*/

#menu_btn{
  position: fixed;
  top:20px;
  right: 20px;
  width: 100px;
  height: 50px;
  background-image: url(../images/icon/menu_btn.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index:20;
}
#close_btn{
  position: fixed;
  top:20px;
  right: 20px;
  width: 100px;
  height: 50px;
  background-image: url(../images/icon/close_btn.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index:30;
  display: none;
}

.menu_bg_hand{
  position: fixed;
  width: 100vw;
  height: 50vh;
  z-index: 21;
  transition-duration: 1s;
}
.menu_hand_t{
  transform: translateY(-100%);
  top:0;
  background-image: url(../images/menu/hand_t.gif);
  background-position: top;
  background-size: contain;
  background-repeat: repeat-x;

}

.menu_hand_b{
  transform: translateY(100%);
  bottom: 0;
  background-image: url(../images/menu/hand_b.gif);
  background-position: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  background-repeat: repeat-x;
}

#menu_bg{
  z-index: 22;
  background-color:black;
  display: none;

}

#menu_board{
  width: 100%;
  height: 90vh;
  overflow-y: scroll;
  z-index: 25;
  transform: scale(0,0);
  font-family: my_font;
    text-shadow: 2px 2px 0px magenta;
}

.menu_items{
  text-align: center;
  font-size: 35px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  color: white;
}




#menu_board div:nth-child(1){
  transition-delay: 0s;
}
#menu_board div:nth-child(2){
  transition-delay: 0.2s;
}
#menu_board div:nth-child(3){
  transition-delay: 0.4s;
}
#menu_board div:nth-child(4){
  transition-delay: 0.6s;
}
#menu_board div:nth-child(5){
  transition-delay: 0.8s;
}
#menu_board div:nth-child(6){
  transition-delay: 1s;
}


.font_size_30{
  font-size: 36px;
}

.ob_img_box{
  width: 100%;
  height: 200px;
  display: block;
}

.ob_img_box img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

footer{
  width: 100%;
  height: auto;
  margin: auto;
  display: block;
  position: relative;
  font-size: 14px;
  text-align: center;
  background-color: black;
  color: white;
  margin-top: 50px;
}





.pfc{
  position: fixed;
  margin: auto;
  left:0;
  right: 0;
  top:0;
  bottom: 0;
}
.pac{
  position:absolute;
  margin: auto;
  left:0;
  right: 0;
  top:0;
  bottom:  0;
}

.vp_block{
  width: 100%;
  height: 100vh;
}

.t_al_c{
  text-align: center;
}
.t_al_r{
  text-align: right;
}
.t_al_l{
  text-align: left;
}


.indent{
  text-indent: 1em;
}


.bold{
  font-weight: 700;
}
.font_ex{
  font-size: 150%;
  font-weight: 700;
}
.font_big{
  font-size: 30px;
  letter-spacing: 30px;
  font-weight: 700;
}

.col_black{
  color: black;
}
.col_red{
  color: red;
}
.col_green{
  color: green;
}
.col_choko{
  color: #d2691e;
}
.col_orange{
  color:orange;
}
.col_blue{
  color: blue;
}
.col_yellow{
  color: yellow;
}
.col_gold{
  color: gold;
}
.col_black{
  color: black;
}
.col_magenta{
  color: magenta;
}
.col_teal{
  color:teal;
}
.col_royalblue{
  color:royalblue;
}
.col_steelblue{
  color: steelblue;
}
.col_pink{
  color:pink;
}
.col_gray{
  color:gray;
}
.col_cyan{
  color:cyan;
}
.big_font{
  font-size: 150%;
}

.sty_black{
  background-color: black;
  color: white;
}

.sty_black a{
  color: white;
}

.sty_white{
  background-color: white;
  color: black;
}

.sty_white a{
  color: black;
}

.sty_pink{
  background-color: pink;
  color: white;
}
.sty_pink a{
  color: white;
}
.triangle{
  border-style: solid;
  border-width: 20px 20px 0 20px;
  border-color: #999999 transparent transparent transparent;
}
.border_black{
  border: solid 1px black;
}
.border_white{
  border: solid 1px white;
}

.bg_444444{
  background-color: #444444;
}
.bg_white{
  background-color: white;
}

blockquote p::before,blockquote p::after{
  content: " ” ";
  font-size: 150%;
  color: gray;
}
blockquote{
  font-size: 90%;
}


.border_gold{
  box-sizing: border-box;
  border: solid 3px gold;
}

.border_magenta{
  box-sizing: border-box;
  border: solid 3px magenta;
}

.border_lightblue{
  box-sizing: border-box;
  border: solid 3px lightblue;
}

.border_orange{
  box-sizing: border-box;
  border: solid 3px orange;
}
.border_palegreen{
  box-sizing: border-box;
  border: solid 3px palegreen;
}



/*bg_col*/
.bg_col_pink{
  background-color:pink;
}
.bg_col_top{
  background-color:#ffdceb;
}
.bg_col_blue{
  background-color: #ebfeff;
}
.bg_col_lightyellow{
  background-color:lightyellow;
}
.bg_col_deepmagenta{
  background-color: #ff7aee;
}
.bg_col_magenta{
  background-color: magenta;
}
.bg_col_darkmagenta{
  background-color: darkmagenta;
}
.bg_col_white{
  background-color:white;
}
.bg_col_black{
  background-color: black;
}
.bg_col_gainsboro{
  background-color: gainsboro;
}
.bg_col_darkblue{
  background-color: darkblue;
}
.bg_col_plum{
  background-color: plum;
}
.bg_col_mistyrose{
  background-color: mistyrose;
}

.bg_col_aquamarine{
  background-color: aquamarine;
}
.bg_col_gold{
  background-color: gold;
}
.bg_col_floralwhite{
  background-color: floralwhite;
}
.bg_col_deeppink{
  background-color: deeppink;
}
.bg_col_snow{
  background-color: snow;
}

.bg_col_lightcyan{
  background-color: lightcyan;
}
.bg_col_azure{
  background-color: azure;
}
.bg_col_aliceblue{
  background-color: aliceblue;
}
.bg_col_papayawhip{
  background-color: papayawhip;
}
.bg_col_darkolivegreen{
  background-color: darkolivegreen;
}

.bg_col_crimson{
  background-color: crimson;
}
.bg_col_darkslateblue{
  background-color: darkslateblue;
}
.bg_col_bisque{
  background-color: bisque;
}
.bg_col_darlblue{
  background-color: darkblue;
}

.bg_col_goldenrod{
  background-color: goldenrod;
}
.bg_col_darkgoldenrod{
background-color: darkgoldenrod;
}
.bg_col_saddlebrown{
background-color: saddlebrown;
}
.bg_col_745d00{
background-color: #745d00;
}
.bg_col_darkslategray{
background-color: darkslategray;
} 


.bg_col_crimson{
  background-color: crimson;
}
.bg_col_444444{
  background-color: #444444;
}
.bg_col_midnightblue{
  background-color: midnightblue;
}
.bg_col_darkred{
  background-color: darkred;
}
.bg_col_violet{
  background-color: violet;
}
.bg_col_mediumvioletred{
  background-color: mediumvioletred;
}
.bg_col_hotpink{
  background-color: hotpink;
}
.bg_col_shinku{
  background-color: #a22041;
}
.bg_col_f4b3c2{
background-color: #f4b3c2;
}

.bg_col_fff5f9{
background-color: #fff5f9;
}





.bg_col_kurobeni{
  background-color: #302833;
}
.bg_col_whitesmoke{
  background-color: whitesmoke;
}
.bg_col_gainsboro{
  background-color: gainsboro;
}
.bg_col_sandybrown{
  background-color: sandybrown;
}
.bg_col_sienna{
  background-color: sienna;
}
.bg_col_maroon{
  background-color: maroon;
}
.bg_col_gray{
background-color: gray;
}
.bg_col_orange{
background-color: orange;
}

.bg_col_whitepink{
background-color:#fff4ff;
}
.bg_col_f9ffff{
background-color: #f9ffff;
}
.bg_col_f0f0f0{
background-color: #f0f0f0;
}

/*font_col*/
.font_col_white{
  color: white;
}

.font_col_deeppink{
  color: deeppink;
}

.font_col_chocolate{
  color:chocolate;
}
.font_col_blue{
  color:blue;
}
.font_col_gray{
  color: gray;
}
.font_col_orange{
  color: orange;
}
.font_col_gold{
  color: gold;
}
.font_col_aquamarine{
  color: aquamarine;
}
.font_col_antiquewhite{
  color: antiquewhite;
}
.font_col_violet{
  color: violet;
}
.font_col_yellow{
  color: yellow;
}
.font_col_red{
  color: red;
}
.font_col_darkred{
  color: darkred;
}
.font_col_darkblue{
  color: darkblue;
}
.font_col_lightskyblue{
  color: lightskyblue;
}
.font_col_ccc{
  color: #cccccc;
}
.font_col_pink{
color: pink;
}
.font_col_lightyellow{
color:lightyellow;
}

.font_col_darkmagenta{
color:darkmagenta;
}
.font_col_black{
color: black;
}
.font_col_darkviolet{
color: darkviolet;
}
.font_col_magenta{
color: magenta;
}
.font_col_green{
color:green;
}

/*ボーダーカラー*/
.border_blue{
border-color: blue;
}
.border_darkred{
border-color: darkred;
}


/*テキスト装飾*/
.text_shadow_gray{
text-shadow: 5px 5px 0px gray;
}
.text_shadow_darkred{
text-shadow: 5px 5px 0px darkred;
}

.text_shadow_pink{
text-shadow: 5px 5px 0px pink;
}


.text_shadow_black{
text-shadow: 5px 5px 0px black;
}

.text_shadow_white{
text-shadow: 5px 5px 0px white;
}
.text_shadow_lavenderblush{
text-shadow: 5px 5px 0px lavenderblush;
}

.text_shadow_lightpink{
text-shadow: 5px 5px 0px lightpink;
}


.text_shadow_palevioletred{
text-shadow: 5px 5px 0px palevioletred;
}