body, h1, h2, h3, h4, h5, h6, p, b, strong, a, img, div, span, ul, li, button {
  margin: 0;
}

*, ::after, ::before {
  box-sizing: border-box;
}
/*----------基本事項----------*/
body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-weight: 400;
  color: #212529;
  text-align: left;
  -webkit-print-color-adjust: exact;
}

ul {
  display: block;
  list-style: none;
  padding-left: 0;
}

.hd-logo{
  height:40px;
}
.ft-dark{
  line-height: 2.0;
  text-align: center;
  background-color: rgba(0,50,0,0.3);
}
.ft-light{
  line-height: 2.0;
  text-align: center;
  background-color: rgba(255,255,255,0.4);
}
.footer {
  line-height: 2.0;
  text-align: center;
}

.main {
  flex: 1;
  margin: 0.5rem 1.0rem;
  padding-top: 4.0rem;
  min-height: calc(100vh - 8.0rem);
}

img {
  vertical-align: middle;
  border-style: none;
  margin: 1.0rem;
}

img.pic {
  width: calc(100% - 20px);
  max-width: 400px;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}
img.pic1 {
  width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}
img.pic2 {
  width: calc(100% - 20px);
  max-width: 600px;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}
img.pic3 {
  width: calc(100% - 20px);
  max-width: 200px;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}
img.picmini {
  max-width: 120px;
  max-height: 120px;
  margin: 0.3rem;
  aspect-ratio: attr(width) / attr(height);
}
@media screen and (max-width: 640px) {/* 640px以下*/
  img.picmini {
    max-width: 70px;
    max-height: 70px;
  }
}
.waku {border: 1px #999999 solid;}
.center {text-align: center;}
.right {text-align: right; margin-right: 0.5rem;}
.nodisp {display: none!important;}

.mg0 {margin: 0px!important;}
.mg5 {margin: 5px!important;}
.mg10 {margin: 10px!important;}
.mg15 {margin: 15px!important;}
.mg20 {margin: 20px!important;}
.mt0 {margin-top: 0px!important;}
.mt5 {margin-top: 5px!important;}
.mt10 {margin-top: 10px!important;}
.mt15 {margin-top: 15px!important;}
.mt20 {margin-top: 20px!important;}
.mb0 {margin-bottom: 0px!important;}
.mb5 {margin-bottom: 5px!important;}
.mb10 {margin-bottom: 10px!important;}
.mb15 {margin-bottom: 15px!important;}
.mb20 {margin-bottom: 20px!important;}
.mr0 {margin-right: 0px!important;}
.mr5 {margin-right: 5px!important;}
.mr10 {margin-right: 10px!important;}
.mr15 {margin-right: 15px!important;}
.mr20 {margin-right: 20px!important;}
.ml0 {margin-left: 0px!important;}
.ml5 {margin-left: 5px!important;}
.ml10 {margin-left: 10px!important;}
.ml15 {margin-left: 15px!important;}
.ml20 {margin-left: 20px!important;}
.mtm5 {margin-top: -5px!important;}
.mtm10 {margin-top: -10px!important;}
.mbm5 {margin-bottom: -5px!important;}
.mbm10 {margin-bottom: -10px!important;}
.mbm20 {margin-bottom: -20px!important;}
.pd0 {padding: 0px!important;}
.pd5 {padding: 5px!important;}
.pd10 {padding: 10px!important;}
.pt0 {padding-top: 0px!important;}
.pb0 {padding-bottom: 0px!important;}
.bold{font-weight:bold;}
.width100,.w100{width:100%;}

.bg-black{background-color:#222222;}
.bg-cream{background-color:#ffffcc;}
.bg-byakuroku{background-color:#ddffdd;}

.oblique{font-style: oblique;}
.p-white{color:#ffffff;}
.p-black{color:#000000;}
.p-yellow{color:#ffff33;}
.p-crimson{color:#770000;}
.p-red{color:#ff3333;}
.p-cream{color:#ffffcc;}
.p-pink{color:#ff33cc;}
.p-lpink{color:#ffccee;}
.p-daidai{color:#ff4000;}
.p-orange{color:#ee7700;}
.p-oribe{color:#006600;}
.p-blue{color:#3333ff;}
.p-lblue{color:#cceeff;}
.p6{font-size: 0.6rem;}
.p8{font-size: 0.8rem;}
.p10{font-size: 1.0rem;}
.p12{font-size: 1.2rem;}
.p14{font-size: 1.4rem;}
.p16{font-size: 1.6rem;}
.p18{font-size: 1.8rem;}
.p20{font-size: 2.0rem;}
.p30{font-size: 3.0rem;}
.p40{font-size: 4.0rem;}
.p50{font-size: 5.0rem;}
span.st{text-decoration: line-through;}
.tweet_btn{height:36px;}
@media screen and (max-width: 640px) {/* 640px以下*/
  .tweet_btn{height:28px;}
}

/* buutstrap関連 */
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, input {
    overflow: visible;
}
button, select {
    text-transform: none;
}
[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
}

/*----------フォント関係----------*/
html{
  font-size: 62.5%;/*10px*/
}
body{
  font-size: 1.6rem;/* 16px*/
  line-height: 1.2;
}
body .sm{
  font-size: 1.2rem;
  line-height: 1.1;
}
@media screen and (max-width: 640px) {/* 640px以下*/
  body{
    line-height: 1.6;
  }
  body .sm{
    line-height: 1.0;
  }
}

section {
  margin-bottom: 1.0rem;
}
p {
  font-family: sans-serif;
  font-size: 1.6rem;/* 16px*/
  line-height: 1.5;
  margin-bottom: 0.9rem;
}
@media screen and (max-width: 640px) {/* 640px以下*/
  p {
    font-size: 1.4rem;/* 14px*/
    line-height: 1.4;
    margin-bottom: 0.8rem;
  }
}
strong {
  font-family: sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
}
b {
  font-family: sans-serif;
  font-size: 1.6rem;
  line-height: 1.3;
  font-weight:bold;
}
a {
  text-decoration: underline;
  cursor: pointer;
}
h1 {
  font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
  line-height: 1.3;
}
h2 {
  font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
  font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
  line-height: 1.3;
}
h3 {font-size: 1.8rem;
  line-height: 1.3;
  font-weight:bold;
}
h4 {
  font-size: 1.6rem;
  line-height: 1.3;
  font-weight:bold;
}
h5 {
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight:bold;
}
@media (min-width: 1200px) {/* 1200px以上*/
  h1 {
      font-size: 3.6rem;/* 36px*/
  }
  h2 {
      font-size: 2.4rem;/* 24px*/
  }
}
dt {
  font-weight: normal;
}

.nazo .tag{
  margin: 0px 3px 1px 0px;
  padding: 1px 5px;
  border-radius: 5px;
  background-color: #ffffd3;
  border: 1px solid #999933;
  color: #999933;
}

.t-reco{
  background-color:#ffe3e3;
  border-color: #ee4444;
  color: #ee4444;
}
.t-stop{
  background-color:#cccccc;
  border-color: #444444;
  color: #444444;
}
.t-level{
  background-color:#cceeff;
  border-color: #0088ff;
  color: #0088ff;
}
.t-genre{
  background-color:#eeffdd;
  border-color: #009900;
  color: #009900;
}
.t-author{
  background-color:#e3d2ff;
  border-color: #7733dd;
  color: #7733dd;  
}

.t-reco::after{content:"おすすめ!"}
.t-stop::after{content:"公開停止中"}
.t-inspi::after{content:"ひらめき"}
.t-puzzle::after{content:"パズル"}
.t-cosmos::after{content:"宇宙謎"}
.t-easy::after{content:"初心者"}
.t-esmd::after{content:"初中級者"}
.t-mdum::after{content:"中級者"}
.t-mddf::after{content:"中上級者"}
.t-dfcl::after{content:"上級者"}
.t-royal::after{content:"王道"}
.t-story::after{content:"物語"}

.sayuu{
  margin: 8px auto;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
a.textlink:link,
a.textlink:visited {
  color: #003300;
  background: #6aff77;
  border: solid #003300 1px;
  border-radius: 5px;
  padding: 5px;
  text-decoration: none;
}

.osusume::after {
  display        : inline-block;       /* インラインボックス定義  */
  content        : "オススメ";              /* 表示する文字            */
  background     : #ff6699;            /* 背景色                  */
  color          : #ffffff;            /* 文字色                  */
  font-weight    : bold;               /* 太字                    */
  font-size      : 12pt;               /* ベースの文字サイズ      */
  letter-spacing : 0px;               /* 文字間隔詰め            */
  line-height    : 1;                  /* 1行の高さ               */
  vertical-align : top;                /* 基準の高さ位置          */
  margin         : 0 3px;                  /* 外余白なし              */
  padding        : 2px;                /* 反転時の内余白          */
  transform      : scale(0.6)          /* 文字サイズ変更          */
                  translateX(-30%)    /* 横位置調整              */
                  translateY(-25%);
}

/*----------イメージ関係----------*/
.s-icon {
  height: 16px;
  width: auto;
}

/*----------flex関係----------*/
.fl-all {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.fl-wrap {
  display: flex;
  flex-wrap: wrap;
}
.fl-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fl-sayuu {
  display: flex;
  justify-content: center;
}
.fl-spacebetween {
  display: flex;
  justify-content: space-between;
}
.fl-jouge {
  display: flex;
  align-items: center;
}

/* スタートボタン */
a.startbtna,
a.startbtna:hover {
  display: block;
  width: 80%;
  max-width: 240px;
  text-decoration: none;
  margin: 0 auto;
}
.startbtn {
  width: 100%;
  height: 4.0rem;
  line-height: 3.5rem;
  margin: 1.0rem auto 2.0rem;
  font-size: 2.4rem;
  border-radius: 1.0rem;
  text-align: center;
  background-color: #e5ffd9;
  border: solid 2px #33aa33;
  box-shadow: 0rem 0.5rem 0 #33aa33;
  color: #33aa33;
}
.startbtn:hover {
  transform: translate3d(0rem, 0.5rem, 0);
  background-color: #f9fff2;
  box-shadow: none;
}

/* 謎フォーム系 */
.nazoform {
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 3.0rem auto;
}
.nazoform form {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nazoform input {
  position: relative;
  display: block;
  outline: none;
  border-radius: 0.5rem;
  border: solid 0.1rem #999999;
}
.nazoform input[type="text"] {
  padding: 0 0 0 0.5rem;
  height: 3.6rem;
  line-height: 3.6rem;
  font-size: 1.8rem;
  background-color: #ffffff;
}
.nazoform input[type="text"]:disabled {
  background-color: rgba(255,255,255,0.9);
}
.nazoform button {
  color: #ffffff;
  background-color:#00b500;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 0.5rem 2.0rem;
  margin-left: 0.5rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
}
@media screen and (max-width: 640px) {
  .nazoform {
    margin: 2.0rem auto;
  }
  .nazoform .result {
    font-size: 1.4rem;
  }
}

/* ツイートボタン */
a.twitter_btn,
a.twitter_btn:link,
a.twitter_btn:hover,
a.twitter_btn:visited {
  background: #1d9bf0;
  border-radius: 50vh;
  color: #fffFFF!important;
  text-decoration: none;
  display: inline-block;
  font-size: 1.4rem;
  margin-left: 1.0rem;
  padding: 0.2rem 1.0rem 0.2rem 0.6rem;
  vertical-align: bottom;
  white-space: nowrap;
}
a.twitter_btn::before {
  background: transparent 0 0 no-repeat;
  background-image: url('/common/img/twitterlogo.png');
  background-size: contain;
  vertical-align: middle;
  content: '';
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  padding-right: 0.3rem;
  position: relative;
  z-index: 10;
}

a.bluesky_btn,
a.bluesky_btn:link,
a.bluesky_btn:hover,
a.bluesky_btn:visited {
  background: #ffffff;
  border-radius: 50vh;
  border: solid 2px #1185fe;
  color: #1185fe!important;
  text-decoration: none;
  display: inline-block;
  font-size: 1.4rem;
  padding: 0.2rem 1.0rem 0.2rem 0.6rem;
  vertical-align: bottom;
  white-space: nowrap;
}
a.bluesky_btn::before {
  background: transparent 0 0 no-repeat;
  background-image: url('/common/img/blueskylogo.png');
  background-size: contain;
  vertical-align: middle;
  content: '';
  display: inline-block;
  width: 2.2rem;
  height: 2.0rem;
  padding-right: 2.6rem;
  position: relative;
  z-index: 10;
}