@charset "utf-8";
/* ========================================================
基本設定
=========================================================== */
html{
  scroll-behavior: smooth;
  font-size: 16px;
}

body{
  -webkit-text-size-adjust: none;
  color: var(--color-dark-gray);
  line-height: 1.7;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  font-family: 'Zen Maru Gothic','ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,YuGothic,'Yu Gothic',sans-serif;
  font-weight: 400;
  position: relative;
  margin: 0;
}

/*フォントサイズ*/
@media screen and (max-width: 640px){
  .bg{
    font-size: 87%;
  }
}

/*リンク*/
a{
  text-decoration: none;
}

/*段落*/
p{
  cursor: default;
  margin: 0;
}

/*太字*/
strong{
  font-weight: 700;
}

/*補足*/
small{
  display: block;
  font-size: 90%;
}

/*文節区切り*/
span{
  display: inline-block;
}

/*見出し*/
h1,h2,h3{
  font-size: 100%;
  line-height: 1;
  margin: 0;
}

/*定義リスト*/
dd{
  margin: 0;
}

/*SVG*/
svg{
  fill: currentColor;
}

/*スクロールバー*/
::-webkit-scrollbar{
  width: 10px;
}
::-webkit-scrollbar-track{
  background: var(--color-light-gray);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb{
  background: var(--color-primary);
  border-radius: 5px;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"],
button{
  font-family: 'Zen Maru Gothic','ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,YuGothic,'Yu Gothic',sans-serif;
  font-size: 16px;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  -webkit-box-sizing: content-box;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration,
button::-webkit-search-decoration{
  display: none;
}
input[type="submit"]:focus,
input[type="button"]:focus,
button:focus{
  outline-offset: -2px;
}


/* ========================================================
背景
=========================================================== */
/*デフォルト背景色を設定*/
.bg{
  background-color: var(--color-defaut-bg);
  min-height: 100vh;
}
.bg::before{
  position: fixed;
  content: '';
  display: block;
  width: 100%;
  height: 100vh;
  background: url('../img/bg.jpg') center top / cover no-repeat;
}

/*@media screen and (min-width: 1200px){
  .bg::before{
    background:
      url('../img/bg-vertical.png') left -40px top / auto 100% no-repeat,
      url('../img/bg-vertical.png') right -40px top / auto 100% no-repeat,
      url('../img/bg-horizontal.png') left top -100px repeat-x,
      url('../img/bg-horizontal.png') left bottom -100px repeat-x;
  }
}
@media screen and (max-width: 1199px){
  .bg::before{
    background:
      url('../img/bg-vertical.png') left -100px top / auto 100% no-repeat,
      url('../img/bg-vertical.png') right -100px top / auto 100% no-repeat,
      url('../img/bg-horizontal.png') left top -130px repeat-x,
      url('../img/bg-horizontal.png') left bottom -130px repeat-x;
  }
}*/


/*大枠
----------------------------------------------------------- */
.wrapper{
  position: relative;
  z-index: 2;
  max-width: 100%;
  width: 40rem;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ========================================================
共通要素
=========================================================== */

/*ヘッダー
----------------------------------------------------------- */
header{
  display: grid;
  row-gap: 1em;
  padding-top: 2em;
  padding-bottom: 2em;
}
@media screen and (max-width: 320px){
  header{
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }
}

/*リンクボタン
----------------------------------------------------------- */
a.btn{
  display: block;
  background-color: var(--color-primary);
  color: var(--color-white);
  max-width: 40rem;
  font-weight: 700;
  text-align: center;
  border-radius: 5px;
}
a.btn:hover,
a.btn:focus{
  background-color: var(--color-accent);
  color: var(--color-primary);
  transition: .2s;
}
a.btn svg{
  fill: var(--color-white);
  display: inline-block;
  margin-left: .5em;
}
a.btn:hover svg,
a.btn:focus svg{
  fill: var(--color-primary);
}

/*配信誘導*/
section.link.link-stream a{
  font-size: 100%;
  line-height: 2.6;
}
/*応募誘導*/
section.link.link-entry a{
  font-size: 125%;
  line-height: 3;
}
section.link.link-entry p{
  text-align: center;
  margin-top: .5em;
}

/*フッター
----------------------------------------------------------- */
footer{
  width: 100%;
  color: var(--color-black);
  font-size: 0.8rem;
  text-align: center;
  padding-top: 5em;
  padding-bottom: 10em;
}

/* ========================================================
画像設定
=========================================================== */

/*注意マーク画像*/
img.alert{
  width: 1.4em;
  vertical-align: middle;
  margin-right: .2em;
}

/*レスポンシブ画像*/
img.img-responsive{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/*白フチ付きカード画像*/
img.img-card{
  width: 100%;
  max-width: 500px;
  height: auto;
  border: 10px solid var(--color-white);
  box-shadow: 0 0 10px var(--color-box-shadow);
  box-sizing: border-box;
}
img.img-card + p{
  margin-top: 1em;
}

/*朝の変態への扉*/
/*.gate .anime-door{
  position: relative;
  top: -30px;
}*/
.gate img{
  max-width: 400px;
  animation: wiggle .5s infinite;
}
@keyframes wiggle{
  0%{transform: translate(0px, 0px) rotateZ(0deg)}
  25%{transform: translate(2px, 2px) rotateZ(1deg)}
  50%{transform: translate(0px, 2px) rotateZ(0deg)}
  75%{transform: translate(2px, 0px) rotateZ(-1deg)}
  100%{transform: translate(0px, 0px) rotateZ(0deg)}
}
/*画像非表示*/
img.img-hide{ display: none !important; }


/* ========================================================
.front
=========================================================== */

/*ヘッダー
----------------------------------------------------------- */
/*テキスト*/
p.lead{
  color: var(--color-black);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: 1em;
}

/*コンテンツ
----------------------------------------------------------- */
/*コンテンツ間の余白*/
.front article.contents,
.front main{
  display: grid;
  row-gap: 2em;
}

/*全体*/
article.contents section div{
  background-color: var(--color-content-bg);
  border: 1px solid var(--color-light-gray);
  border-radius: 5px;
  padding-bottom: 1em;
}

/*見出し*/
article.contents h2{
  background-color: var(--color-accent);
  color: var(--color-base);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 1.5em;
}
article.contents h3{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  border: 2px solid var(--color-light-gray);
  margin: 2em 1.5em 1em;
  padding: 1em;
}
article.contents h3 img{
  margin-right: .3em;
}

/*本文（段落）*/
article.contents div p{
  margin: 1em 1.5em;
}
article.contents div p:first-of-type{
  margin-top: 1.5em;
}
article.contents div p:last-of-type{
  margin-top: 2em;
  margin-bottom: 1.5em;
}
article.contents div p.note {
  text-indent: -1em;
  padding-left: 1em;
}
article.contents div p.note::before{
  content: '\203B';
}

/*リンク*/
article.contents a,
article.contents a:link,
article.contents a:visited,
article.contents a:active{
  color: var(--color-dark-gray);
  text-decoration: underline;
}
article.contents a:hover,
article.contents a:focus{
  color: var(--color-dark-gray);
  text-decoration: none;
}

/*本文（リスト）*/
article.contents ol,
article.contents ul{
  font-family: 'Zen Maru Gothic','ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,YuGothic,'Yu Gothic',sans-serif;
  margin: 1.5em;
  padding-left: 1.5em;
}
article.contents li{
  margin-bottom: .75em;
}
article.contents li ul{
  margin: .75em 0 1em;
}
article.contents li ul.notes{
  list-style: none;
  padding-left: 1em;
  text-indent: -1em;
}
article.contents li ul.notes li:before{
  content: '※';
}

/*応募終了*/
article.contents p.end{
  display: block;
  color: var(--color-primary);
  font-weight: 700;
}

/* ========================================================
.other
=========================================================== */

/*ページタイトル*/
.other h1 {
  color: var(--color-primary);
  font-size: 150%;
  text-align: center;
  text-shadow: 2px 2px 0px var(--color-text-shadow);
}
.other h1 a.logo{
  display: block;
  max-width: 280px;
  margin: 0 auto;
}
.other h1 span{
  display: inline-block;
  cursor: default;
  margin-bottom: .25em;
}
.other h1 span:first-of-type{
  margin-top: 2rem;
}

/*説明文*/
.description{
  color: var(--color-black);
  margin-bottom: 2em;
}
.description p:not(:last-of-type){
  margin-bottom: 1em;
}

/*段落*/
.other main p{
  text-align: center;
}

/*エントリーページ*/
.entry-base{
  background-color: rgba(255,255,255,.7);
  padding: 20px;
  border-radius: 20px;
}

/*応募OK*/
.entry-base button,
.entry-base a{
  display: block;
  font-size: 100%;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  border-radius: 3em;
  margin-top: 15px;
  padding: 1em;
}
.entry-base button{
  width: 100%;
  background-color: var(--color-primary);
  color: var(--color-white);
}
.entry-base button.copied,
.entry-base button:hover,
.entry-base button:focus{
  background-color: var(--color-accent);
  color: var(--color-primary);
  transition: .2s;
}
.entry-base a{
  background-color: var(--color-black);
  color: var(--color-white);
}
.entry-base a:hover,
.entry-base a:focus{
  background-color: var(--color-light-gray);
  color: var(--color-black);
  transition: .2s;
}
.entry-base a svg{
  fill: var(--color-white);
  display: inline-block;
  margin-left: .5em;
}
.entry-base a:hover svg,
.entry-base a:focus svg{
  fill: var(--color-black);
  transition: .2s;
}

/*メッセージ*/
@font-face {
  font-family: 'JF-Dot-MPlus10';
  src: url('../font/JF-Dot-MPlus10.woff') format('woff');
}

.msg{
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 12px;
  border: 5px double var(--color-white);
  border-radius: 5px;
}
.msg p{
  font-family:'JF-Dot-MPlus10',sans-serif;
  line-height: 1.5;
  margin: 12px 0;
}
.msg p.msg-keyword{
  color: var(--color-primary);
  max-width: 100%;
}

/*戻るボタン*/
a.back{
  display: block;
  width: 10em;
  color: var(--color-primary);
  font-weight: 700;
  text-align: center;
  margin: 2em auto 0;
}
a.back:after{
  display: block;
  content: '';
  width: 0px;
  height: 2px;
  background-color: var(--color-primary);
}
a.back:hover:after,
a.back:focus:after{
  width: 100%;
  transition: .2s;
}

/*不正アクセス時の表示
----------------------------------------------------------- */
main.forbidden h1{
  padding-bottom: 1em;
}
main.forbidden p{
  text-align: left;
  padding-bottom: 1em;
}


/* ========================================================
フォーム基本設定
=========================================================== */

/*テキスト・ボタン共通設定*/
input.form-text,
input.form-submit{
  display: block;
  font-size: 16px;
  border: none;
  padding: 0;
}

/*テキストボックス*/
input.form-text{
  background: var(--color-white);
  color: var(--color-dark-gray);
  height: 4em;
  line-height: 3;
  border-radius: 5px;
}

/*送信ボタン*/
input.form-submit{
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 125%;
  font-weight: 700;
  line-height: 3;
  border-radius: 3em;
}
input.form-submit:hover,
input.form-submit:focus{
  background-color: var(--color-accent);
  color: var(--color-primary);
  transition: .2s;
}

/* キーワード入力フォーム
----------------------------------------------------------- */
/*定義リスト全体*/
form#letterForm dl{
  margin-bottom: 4rem;
}
form#letterForm dl.days{
  position: relative;
  left: -10px;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr 3fr;
  row-gap: 2rem;
  grid-row-gap: 2rem;
  column-gap:.5rem;
  grid-column-gap:.5rem;
}
@media screen and (max-width: 767px){
  form#letterForm dl.days{
    max-width: 280px;
    grid-template-columns: 1fr 3fr;
    margin-left: auto;
    margin-right: auto;
  }
}

/*項目名・ラベル*/
form#letterForm dt,
form#letterForm dt label{
  display: flex;
  align-items: center;
  color: var(--color-black);
  font-weight: 700;
  text-shadow: 2px 2px 0px var(--color-text-shadow);
}
@media screen and (min-width: 320px){
  form#letterForm dt,
  form#letterForm dt label{
    font-size: 112%;
  }
}
form#letterForm dl.days dt,
form#letterForm dl.days dt label{
  justify-content: flex-end;
}
form#letterForm .additional dl dt{
  justify-content: center;
}

/*三角矢印*/
form#letterForm dt label:after{
  display: inline-block;
  content: '';
  width: 0;
  height: 0;
}
form#letterForm dl.days dt label:after{/*右向き*/
  border-left: .6em solid var(--color-accent);
  border-right: .6em solid transparent;
  border-top: .4em solid transparent;
  border-bottom: .4em solid transparent;
  margin-left: .3em;
  margin-right: -.6em;
}
form#letterForm .additional dl dt label:after{/*下向き*/
  border-left: .4em solid transparent;
  border-right: .4em solid transparent;
  border-top: .6em solid var(--color-accent);
  margin-left: .2em;
}

/*テキストボックス*/
form#letterForm input.form-text{
  font-size: 16px;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
form#letterForm dl.days input.form-text{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-black);
}
form#letterForm .additional dl input.form-text{
  width: 80%;
  box-sizing: border-box;
  text-align: center;
  margin: 0 auto 2em auto;
}
form#letterForm input.form-text:focus{
  background: var(--color-input-focus);
}

/*送信ボタン*/
form#letterForm input.form-submit{
  width: 60%;
  margin: 0 auto;
}