.serif {
    font-family: "Yu Mincho", serif;
}

.sans-serif {
    font-family: Meiryo, sans-serif;
}

.monospace {
    font-family: "MS Gothic", monospace;
}

.button-simple {
    position: relative;
    font-weight: bold;
    padding: 5px 15px;
    margin: 0px 5px;
    border-radius: 30px;/*角の丸み*/
    font-size: 18px;/*文字サイズ*/
    background-color: #00a41a;/*背景色*/
    color: #fff;/*文字色*/
    display: inline-block;
    text-shadow: 1px 1px 0px rgb(0, 0, 0, 0.3);
    box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
.button-simple:before {
    font-family: 'Font Awesome 6 Free';
    content: '\e539';/*好きなアイコン*/
    color: #eeee22;/*アイコンの色*/
    margin-right: 3px;
}
a:hover .button-simple {
    background-color: #cc0000;/*触れたときの背景色*/
    color: #fff;/*触れたときの文字色*/
    box-shadow: 0 0px 0 rgb(0, 0, 0, 0.3);
    animation-play-state: paused;
    top: 3px;
}

.purupuru {
    animation: purupuru 0.1s infinite;
}
@keyframes purupuru {
    0% {
        transform: translate(0px, 0px)
    }
    50% {
        transform: translate(0px, 1px) rotateZ(1deg)
    }
}

.main-logo img {
  width: 250px !important;
}

/*デザイン*/

.info-doc  h2 {
  position: relative;
  font-size: 30px !important;
  font-weight: bold;
  padding: 30px 0px 20px 0px;
  margin-bottom: 1em;
}
.info-doc  h2::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100px;
  height: 10px;
  background: #FA1E0E;
  z-index: 1;
}
.info-doc  h2::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: rgb(230, 230, 230);
}
.info-doc  h3 {
  font-size: 25px !important;
  font-weight: bold !important;
  padding: 10px 20px;
  margin-top: 60px !important;
  margin-bottom: 1em;
  border-radius: 10px;
  border: 3px solid #FA1E0E;
}
.info-doc  h4 {
  display: inline-block;
  font-size: 20px !important;
  font-weight: bold !important;
  padding: 10px 20px;
  margin-left: 10px;
  margin-bottom: 1em;
  border-bottom: 1px solid #FA1E0E;
}
.info-doc  h5{
  font-size: 18px !important;
  font-weight: bold !important;
  padding: 20px 30px;
  border-left: 4px dotted  #FA1E0E;
}
.info-doc  h6 {
  font-size: 15px !important;
  font-weight: bold !important;
  padding: 10px 20px;
  margin-bottom: 1em;
  border-bottom: 3px dotted #FA1E0E;
}
.info-doc  h7 {
  font-size: 15px !important;
  font-weight: bold !important;
  padding: 5px 20px;
  margin-bottom: 1em;
  border-left: 8px solid #FA1E0E;
}



.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
div.tatescript  {
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center bottom;
  color: rgb(50, 32, 32);
  border-radius: 19px;
  -moz-border-radius: 19px;
  -webkit-border-radius: 19px;
  -o-border-radius: 19px;
  -ms-border-radius: 19px;
  box-shadow: 30px 18px 18px 0px rgb(148, 164, 123);

  padding-top:10px;
  padding-right:10px;
  margin-bottom: 30px;

  background: #ccc;
  width: 75%;
  aspect-ratio: 5 / 7;
  text-orientation: upright !important;
  margin-top: 0px !important;
  font-size: 250%;
  line-height: 1.2;
  letter-spacing: 0.5em;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}
.tatescript *  {
  font-family: 'New Tegomin', serif !important;
  -webkit-font-feature-settings: 'pkna';
          font-feature-settings: 'pkna';

}
p.tate-f {
  background: #ec4646;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  color: #fff;
  font-weight: bold;
  font-size: 52px;
  text-align: center;
  line-height: 80px;
  padding-top: 8px;
}
p.tate-p {
  padding-right: 15px;
  padding-top: 15px;

    color: #CCC;
    text-shadow:
            3px 3px 3px #000, -3px -3px 3px #000,
           -3px 3px 3px #000,  3px -3px 3px #000,
            3px 0px 3px #000, -3px -0px 3px #000,
            0px 3px 3px #000,  0px -3px 3px #000;
    margin: 0;
}


/*side nav */
.side-nav-frame {/*blog-listは階層メニュー*/
  border: solid 2px #ff938b ;
  background: #fffaf1 ;
  margin-top:10px;
  padding: 10px ;
  position: relative ;
}
.side-nav-menu {
  border-top: solid 2px #ff938b ;
  margin-top: 20px;
}
.nav-card-frame {
  background: #dddddd;
  padding: 5px ;
  margin-bottom: 10px;
  border-radius: 5%;
}
.nav-label {
  padding-left: 5px;
}
.nav-image {
  padding: 0px 10px 10px 10px;
}


.pixta-frame {
  border: solid 2px #8bc7ff ;
  background: #ecfeff ;
  margin-top:40px;
  padding: 10px ;
  position: relative ;
}

.kakugen-box{
    position: relative;
    background: #efede9;
    margin: 50px 0px 30px 0px;
    box-shadow: 0px 0px 0px 5px #efede9;
    border: dashed 3px #A7A297;
    padding: 0.2em 0.5em;
    color: #454545;
}
.kakugen-box .kakugen p {
    font-size: 3em;
    line-height: 1.5em;
}

.kakugen {
    marigin-top: 3px;
}
.sosaku {
    font-weight: 700;
    font-size: 150%;
    margin-top: 20px;
}
.kakugen-box:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 55px 55px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.kakugen-box p {
    margin: 0;
    padding: 0;
}
.setsumei {
    margin-top: 0px;
}
.art,.ito,.create-setsumei-naiyo {
  padding-left:0.5em !important;
}
.aki {
  margin-top: 20px;
}
/*createで使用*/
.create-subnail, .create-thumbnail {
    margin-top: 20px;
}
.create-setsumei {
  font-weight: bold;
}
.create-setsumei {
  margin-top: 20px;
}
.create-setsumei-naiyo {
  padding-left:1em;
}

/*SNS Link*/
.follow-me {
  list-style: none;
  margin: 0 0 -8px;
  overflow: hidden;
  padding: 0;
}
.follow-me li {
  float: left;
  margin: 0 8px 8px 0;
  padding: 0;
}
.follow-me li a::before {
  border-style: solid;
  border-width: 1px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 16px;
  height: 42px; /* Button height */
  line-height: 42px; /* Button height */
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  text-align: center;
  width: 42px; /* Button width */
}
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before         { border-color: #ff9900; background-color: #ff9900; content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before         { border-color: #000000; background-color: #000000; content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before      { border-color: #3399ff; background-color: #3399ff; content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before     { border-color: #05cc47; background-color: #05cc47; content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before           { border-color: #000000; background-color: #000000; content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before        { border-color: #000000; background-color: #ea4c89; content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before        { border-color: #007ee5; background-color: #007ee5; content: "\f16b"; }
.follow-me li a[href*="facebook.com"]::before       { border-color: #3b5998; background-color: #3b5998; content: "\f09a"; }
.follow-me li a[href*="feedly.com"]::before         { border-color: #6cc655; background-color: #6cc655; content: "\f09e"; }
.follow-me li a[href*="flickr.com"]::before         { border-color: #0063cc; background-color: #0063dc; content: "\f16e"; }
.follow-me li a[href*="foursquare.com"]::before     { border-color: #f94877; background-color: #f94877; content: "\f180"; }
.follow-me li a[href*="github.com"]::before         { border-color: #181717; background-color: #181717; content: "\f09b"; }
.follow-me li a[href*="plus.google.com"]::before    { border-color: #dc4e41; background-color: #dc4e41; content: "\f0d5"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before     { border-color: #008fde; background-color: #008fde; content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before      { border-color: #125688; background-color: #125688; content: "\f16d"; }
.follow-me li a[href*="last.fm"]::before            { border-color: #d51007; background-color: #d51007; content: "\f202"; }
.follow-me li a[href*="linkedin.com"]::before       { border-color: #0077b5; background-color: #0077b5; content: "\f0e1"; }
.follow-me li a[href*="nicovideo.jp"]::before       { border-color: #eaeaea; background-color: #eaeaea; content: "\f047"; font-family: blogicon; }
.follow-me li a[href*="pinterest.com"]::before      { border-color: #bd081c; background-color: #bd081c; content: "\f0d2"; }
.follow-me li a[href*="getpocket.com"]::before      { border-color: #ef3f56; background-color: #ef3f56; content: "\f265"; }
.follow-me li a[href*="reddit.com"]::before         { border-color: #ff4500; background-color: #ff4500; content: "\f1a1"; }
.follow-me li a[href*="skype.com"]::before,
.follow-me li a[href*="skype:"]::before             { border-color: #00aff0; background-color: #00aff0; content: "\f17e"; }
.follow-me li a[href*="slideshare.net"]::before     { border-color: #2d2d2d; background-color: #2d2d2d; content: "\f1e7"; }
.follow-me li a[href*="spotify.com"]::before        { border-color: #84bd00; background-color: #84bd00; content: "\f1bc"; }
.follow-me li a[href*="steamcommunity.com"]::before { border-color: #171a21; background-color: #171a21; content: "\f1b6"; }
.follow-me li a[href*="stumbleupon.com"]::before    { border-color: #eb4929; background-color: #eb4929; content: "\f1a4"; }
.follow-me li a[href*="tumblr.com"]::before         { border-color: #36465d; background-color: #36465d; content: "\f173"; }
.follow-me li a[href*="twitch.tv"]::before          { border-color: #6441a5; background-color: #6441a5; content: "\f1e8"; }
.follow-me li a[href*="twitter.com"]::before        { border-color: #55acee; background-color: #55acee; content: "\f099"; }
.follow-me li a[href*="vimeo.com"]::before          { border-color: #1ab7ea; background-color: #1ab7ea; content: "\f27d"; }
.follow-me li a[href*="vine.co"]::before            { border-color: #11b58a; background-color: #11b58a; content: "\f1ca"; }
.follow-me li a[href*="weibo.com"]::before          { border-color: #e6162d; background-color: #e6162d; content: "\f18a"; }
.follow-me li a[href*="whatsapp.com"]::before       { border-color: #64d548; background-color: #64d548; content: "\f232"; }
.follow-me li a[href*="wordpress.com"]::before,
.follow-me li a[href*="wordpress.org"]::before      { border-color: #21759b; background-color: #21759b; content: "\f19a"; }
.follow-me li a[href*="youtube.com"]::before        { border-color: #cd201f; background-color: #cd201f; content: "\f16a"; }
.follow-me li a[href$="/feed"]::before              { border-color: #ffa500; background-color: #ffa500; content: "\f09e"; }
.follow-me li a[href$="/subscribe"]::before         { border-color: #363636; background-color: #363636; content: "\f000"; font-family: blogicon; }
.follow-me li a:hover::before {
  background-color: #fff;
}
.follow-me li a[href*="amazon.co.jp"]:hover::before,
.follow-me li a[href*="amazon.com"]:hover::before         { color: #ff9900; }
.follow-me li a[href*="codepen.io"]:hover::before         { color: #000000; }
.follow-me li a[href*="delicious.com"]:hover::before      { color: #3399ff; }
.follow-me li a[href*="deviantart.com"]:hover::before     { color: #05cc47; }
.follow-me li a[href*="digg.com"]:hover::before           { color: #000000; }
.follow-me li a[href*="dribble.com"]:hover::before        { color: #ea4c89; }
.follow-me li a[href*="dropbox.com"]:hover::before        { color: #007ee5; }
.follow-me li a[href*="facebook.com"]:hover::before       { color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before         { color: #6cc655; }
.follow-me li a[href*="flickr.com"]:hover::before         { color: #0063dc; }
.follow-me li a[href*="foursquare.com"]:hover::before     { color: #f94877; }
.follow-me li a[href*="github.com"]:hover::before         { color: #181717; }
.follow-me li a[href*="plus.google.com"]:hover::before    { color: #dc4e41; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before     { color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before      { color: #125688; }
.follow-me li a[href*="last.fm"]:hover::before            { color: #d51007; }
.follow-me li a[href*="linkedin.com"]:hover::before       { color: #0077b5; }
.follow-me li a[href*="nicovideo.jp"]:hover::before       { color: #eaeaea; }
.follow-me li a[href*="pinterest.com"]:hover::before      { color: #bd081c; }
.follow-me li a[href*="getpocket.com"]:hover::before      { color: #ef3f56; }
.follow-me li a[href*="reddit.com"]:hover::before         { color: #ff4500; }
.follow-me li a[href*="skype.com"]:hover::before,
.follow-me li a[href*="skype:"]:hover::before             { color: #00aff0; }
.follow-me li a[href*="slideshare.net"]:hover::before     { color: #2d2d2d; }
.follow-me li a[href*="spotify.com"]:hover::before        { color: #84bd00; }
.follow-me li a[href*="steamcommunity.com"]:hover::before { color: #171a21; }
.follow-me li a[href*="stumbleupon.com"]:hover::before    { color: #eb4929; }
.follow-me li a[href*="tumblr.com"]:hover::before         { color: #36465d; }
.follow-me li a[href*="twitch.tv"]:hover::before          { color: #6441a5; }
.follow-me li a[href*="twitter.com"]:hover::before        { color: #55acee; }
.follow-me li a[href*="vimeo.com"]:hover::before          { color: #1ab7ea; }
.follow-me li a[href*="vine.co"]:hover::before            { color: #11b58a; }
.follow-me li a[href*="weibo.com"]:hover::before          { color: #e6162d; }
.follow-me li a[href*="whatsapp.com"]:hover::before       { color: #64d548; }
.follow-me li a[href*="wordpress.com"]:hover::before,
.follow-me li a[href*="wordpress.org"]:hover::before      { color: #21759b; }
.follow-me li a[href*="youtube.com"]:hover::before        { color: #cd201f; }
.follow-me li a[href$="/feed"]:hover::before              { color: #ffa500; }
.follow-me li a[href$="/subscribe"]:hover::before         { color: #363636; }