@charset "utf-8";

/* ------------------------------------------------------
CSS Information

File name   : layout.css
Created     : 2010-12-01
Last update : 2010-12-01
Style Info  : レイアウト 
------------------------------------------------------ */

#header-title {
  background-color: #000066;
  margin: 0;
  padding: 10px;
}

#header-title span {
  font-size: 40px;
  color: #fff;
}

#header-title a{color: #fff;}
#header-title a:visited{color:#fff;}
#header-title a{text-decoration:none;}
#header-title a:hover{color:#fff;}

#wrap-question {
  font-size: 50px; 
  margin: 20px 0;
}

#wrap-question span {
  color: #ff0000; 
}

#wrap-answer {
/*  border-top: 1px solid #ccc;*/
  width: 730px;
  margin: 0 auto;
  background-color: #ffff99;
  font-size: 50px; 
  padding: 5px;
}

#wrap-result {
  margin-top: 15px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: 50px; 
  padding: 10px 0 5px 0;
}

#wrap-result p {
  margin: 0;
}

#wrap-result p#seikai {
  color: #ff0000;
}

#wrap-result p#seikai2 {
  color: #ff0000;
  font-size: 30px; 
}

p#twitter {
  font-size: 110%;
  margin: 10px 0 0 0;
}

p#twitter img {
  display: inline;
  vertical-align: middle; 
}

p#twitter span {
  font-size: 90%;
  color: #666;
}

#wrap-result span {
  font-size: 20px;
}

p#renzoku {
  font-size: 120%;
  margin-top: 15px;
}

p#renzoku span {
  color: #ff6600;
  font-size: 120%;
  font-weight: bold;
}

/* フォーム */
#answer-form .text input {
  border: #999 1px solid;
  font-size: 130%;
  padding: 2px; 
  width: 500px;
}

#answer-form .submit {
  margin-top: 15px;
  text-align: center;
}

#answer-form .submit input {
  padding: 5px 15px; 
  font-size: 120%;
  margin: 0 20px;
}

input[type="submit"] {
  background: #eee;
  border: solid 1px #999;
}

/* 2025.6.25 django */
#answer-form .submit input,
#answer-form .submit button {
  padding: 5px 15px;
  font-size: 120%;
  margin: 0 20px;
}

input[type="submit"],
button[type="submit"] {
  background: #eee;
  border: solid 1px #999;
}

/* みんなの回答 */
#answer-hist {
  margin: 20px 0 10px 0;
}

#answer-hist table {
  width: 700px;
}

#answer-hist table th,#answer-hist table td {
  padding: 5px 6px; 
  text-align: left;
  vertical-align: top; 
  border: 1px solid #ccc;
  font-weight: normal;
}

#answer-hist table th { 
  background: #eee;
}

#answer-hist #answer-text{
  width: 80%; 
}

/* ------------------------------------------------------
利用規約
------------------------------------------------------ */
#wrap-kiyaku {
  width: 650px;
  margin: 0 auto;
  text-align: left;
}

#wrap-kiyaku h2.title {
  width: 650px;
  font-size: 130%;
  letter-spacing: 1.2pt;
  border-bottom: solid 1px #666;
  margin: 10px 0;
  text-align: left;
}

#wrap-kiyaku h3 {
  margin: 10px 0;
  font-size: 110%;
}

#wrap-kiyaku p {
  /*padding: 0 0 10px 0;*/
  /*border-bottom: solid 1px #ccc;*/
}

/* ------------------------------------------------------
遊び方
------------------------------------------------------ */
#wrap-play {
  width: 950px;
  margin: 0 auto;
  text-align: left;
}

#wrap-play img {
  border: solid 1px #333;
  float: left;
  margin-right: 15px;
}

#wrap-play h1 {
  font-size: 130%;
  text-align: center;
  margin-top: 30px;
}

#wrap-play h2 {
  font-size: 130%;
}

#wrap-play div {
  margin: 45px 0 0 0;
}

#wrap-play p {
  font-size: 110%;
  line-height: 1.8em;
}

#wrap-play ul {
  font-size: 110%;
  list-style-type: disc;
  margin-left: 550px;
}

/* ------------------------------------------------------
応募フォーム
------------------------------------------------------ */
#wrap-entry {
  width: 650px;
  margin: 0 auto;
}

#wrap-entry h2.title {
  width: 650px;
  font-size: 130%;
  letter-spacing: 1.2pt;
  border-bottom: solid 1px #666;
  margin: 10px 0;
  text-align: left;
}

#wrap-entry #subtitle {
  font-size: 130%;
  text-align: left;
  margin: 0 0 5px 2px;
}

#wrap-entry #entry-text {
  font-size: 130%;
  text-align: left;
  margin: 0 0 5px 5px;
  line-height: 1.0;
}

#entry-complete {
  font-size: 50px; 
  margin: 0 0 5px 5px;
}

#wrap-entry .submit {
  margin-top: 15px;
  text-align: center;
}

#wrap-entry .text input {
  border: #999 1px solid;
  font-size: 130%;
  padding: 2px;
  width: 640px;
}

#wrap-entry .submit input {
  padding: 5px 15px; 
  font-size: 120%;
  margin: 5px 15px 0 15px;
}

.form-attention {
  text-align: left;
  margin: 5px 0 0 0;
  color: #ad855c;
  margin: 0 0 5px 5px;
}

.error-message {
  margin: 5px 0 0 0;
  color: #ff0000;
  font-weight: bold;
}


/* ------------------------------------------------------
みんなの回答一覧
------------------------------------------------------ */
#answer-list {
  width: 950px;
  margin: 0 auto;
  text-align: left;
}
#answer-list table { width: 950px;}
#answer-list table th { 
/*  width: 80px;*/ 
  background: #eee;
}

#answer-list table th,td {
  padding: 5px; 
  text-align: left;
  vertical-align: top; 
  border: 1px solid #ccc;
}

#answer-list h1 {
  font-size: 130%; 
  text-align: center;
  margin: 15px;
}

#answer-list-hover td.hover, tr.hover {
  background-color: #ffe5c6;
}

#answer-list-hover td.click, th.click {
  background-color: #ffe5c6;
}

.pager-right {
  width: 950px;
  margin: 0 auto;
  text-align: right;
}

.all-cnt {
  color: #ff6600;
  font-size: 120%;
  font-weight: bold;
}

/* ------------------------------------------------------
みんなの回答詳細
------------------------------------------------------ */
.answer-detail {
  width: 730px;
  margin: 0 auto;
  text-align: left;
}

.answer-detail table {
  width: 730px;
  margin-top: 0;
}

.answer-detail table th { 
/*  width: 80px;*/ 
  background: #eee;
  font-size: 120%;
}

.answer-detail table th,td {
  padding: 5px; 
  text-align: left;
  vertical-align: top; 
  border: 1px solid #ccc;
}

.answer-detail h1 {
  font-size: 30px;
  margin-top: 20px;
}

/* TODO IEだとmargin-topが効いてない */
.answer-detail h2 {
  font-size: 20px;
  margin-top: 20px;
}

.answer-detail h2#answer {
  font-size: 30px;
  padding: 3px 0 3px 6px;
  margin-top: 5px;
  background-color: #ffff99;
}

.answer-detail #newsBar {
  margin-top: 20px;
}

#answer-detail-img li { 
  float: left;
  padding: 0 4px; 
  #white-space: nowrap;/*IE回避用*/
}

#answer-detail-img { 
/*  margin-bottom: 100px;*/
/*padding: 100px;*/
}

/*
#answer-detail-img td { 
  border: none;
}
*/

#answer-detail-movie {
  float: left;
  padding: 0 4px; 
  #white-space: nowrap;/*IE回避用*/
}

#answer-detail-movie img {
  width: 132px;
  height: 100px;
  border: solid 1px #666;
}

#answer-detail-hr {
  border-top: 1px solid #ccc;
  margin-top: 20px;
}

#comment-list p {
  padding: 3px;
}

#comment-list td {
  border: none;
}

#comment-list td.hover, tr.hover {
  background-color: #eee;
}

#comment-list td.click, th.click {
  background-color: #eee;
}

.social-bt {
  width: 730px;
  margin: 20px auto;
  text-align: left;
}

.social-bt li {
  float: left;
  margin-right: 5px;
}

.complete-social-bt {
  width: 730px;
  margin: 20 auto 0 auto;
  text-align: left;
}

.ad_google li {
  float: left;
  margin-right: 15px;
}

.ad_google {
  margin: 0 auto;
  width: 720px;
}

.ad-img-90 li {
  float: left;
  margin-right: 14px;
}
 
/* ------------------------------------------------------
動画詳細
------------------------------------------------------ */
#movie-detail {
  width: 620px;
  margin: 0 auto;
  text-align: left;
}

#movie-detail h1 {
  font-size: 30px;
  margin-top: 20px;
}

#movie-detail h2 {
  font-size: 30px;
  padding: 3px 0 3px 6px;
  margin-top: 5px;
  background-color: #ffff99;
}

#movie-detail-object {
  margin: 20px;
}

/* ------------------------------------------------------
投稿フォーム
------------------------------------------------------ */
#comment-form textarea {
  border: #999 1px solid;
  margin-top: 15px;
  font-size: 110%;
  padding: 2px; 
}

#comment-form .submit {
  margin-top: 15px;
  text-align: center;
}

#comment-form .submit input {
  padding: 5px 15px; 
  font-size: 110%;
  margin: 0 20px;
}

#comment-form p {
  width: 345px;
  font-size: 80%;
  color: #666;
  text-align: right;
}

/* ------------------------------------------------------
サポート
------------------------------------------------------ */
#wrap-support {
  width: 950px;
  margin: 0 auto;
  text-align: left;
}

#wrap-support h1 {
  font-size: 130%;
  text-align: center;
  margin-top: 30px;
}

#wrap-support h2 {
  font-size: 130%;
  text-align: center;
}

#wrap-support p {
  font-size: 110%;
  line-height: 1.8em;
}

#wrap-support ul {
  font-size: 110%;
  line-height: 1.8em;
  list-style-type: disc;
}

#wrap-support input {
  font-size: 110%;
  width: 250px;
  border: none;
}

/* ------------------------------------------------------
プライバシーポリシー
------------------------------------------------------ */
#wrap-privacypolicy {
  width: 650px;
  margin: 0 auto;
  text-align: left;
}

#wrap-privacypolicy h2.title {
  width: 650px;
  font-size: 130%;
  letter-spacing: 1.2pt;
  border-bottom: solid 1px #666;
  margin: 10px 0;
  text-align: left;
}

#wrap-privacypolicy h3 {
  margin: 10px 0;
  font-size: 110%;
}

#wrap-privacypolicy p { 
  padding: 0 0 10px 0;
}

/*-------------------------------------------
 お問い合わせ
-------------------------------------------*/
section#inquiry {
  max-width: 650px;
  margin: 0 auto;
}

section#inquiry h2.title {
  width: 650px;
  font-size: 130%;
  letter-spacing: 1.2pt;
  border-bottom: solid 1px #666;
  margin: 10px 0;
  text-align: left;
}

section#inquiry h3 {
    margin-top: 30px;
    margin-bottom: 10px;
    text-align: left !important;
}

section#inquiry p {
  font-size: 120%;
  text-align: left;
}

form.inquiry-form input::placeholder {
    color: #999999;
}

form.inquiry-form input {
    width: 95%;
    height: 30px;
    padding: 15px;
    border: 1px solid #999;
    font-size: 18px;
}

form.inquiry-form textarea {
    width: 95%;
    padding: 15px;
    border: 1px solid #999;
    font-size: 18px;
}

.icon-required {
    background-color: #ee0101;
    padding: 3px 10px;
    color: #fff;
    font-size: 1.0rem;
    border-radius: 5px;
    display: inline-block;
    margin: 0 0 0 10px;
}

/*ボタン横並び*/
.inquiry-form .btn-flex-container {
    display: flex;
    justify-content: center;
}

.inquiry-form .btn-search {
    margin-right: 30px;
}

/* ------------------------------------------------------
フッター
------------------------------------------------------ */
footer {
  border-top: 1px solid #a9a9a9;
  padding-top: 10px;
  margin: 15px auto 0 auto;
}

footer span {
  font-size: 120%;
}

footer p {
/*  margin-top: 10px;*/
}

#footer #ad_google {
  /*width: 728px;*/
  width: 468px;
  margin: 15px auto;
  /*border: solid 1px #ccc;*/
}

#footer-info {
  border: solid 1px #a9a9a9;
  width: 720px;
  margin: 15px auto;
  text-align: left;
  background: #fcf5e6;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  padding: 10px;
}

#footer #ad_rakuten {
  width: 480px;
  text-align: left;
  float: left;
}

#footer #ad_rakuten p {
  margin-bottom: 5px;
}

#footer-smartphone {
  text-align: center;
  width: 220px; 
  float: left;
}

#footer #ad_infocart {
  width: 708px;
  margin: 15px auto;
  border: solid 1px #ccc;
  text-align: left;
  padding: 10px;
  background-color: #f2fbfb;
}

#footer #ad_infocart a {
  color: #51300f; 
}

/* ------------------------------------------------------
共通
------------------------------------------------------ */
/***********************
ボタン
***********************/
.btn-square-pop, .btn-square-pop:hover, .btn-square-pop:visited {
  position: relative;
  display: inline-block;
  padding: 0.5em 0.8em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;
  border-bottom: solid 2px #d27d00;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  font-size: 1.2rem;
}

.btn-square-pop:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.btn-email-copy, .btn-email-copy:hover, .btn-email-copy:visited {
  position: relative;
  display: inline-block;
  padding: 0.5em 0.8em;
  text-decoration: none;
  color: #FFF;
  background: #668ad8;
  border-bottom: solid 2px #627295;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  font-size: 1.2rem;
  border-top: none;
  border-left: none;
  border-right: none;
}

.btn-email-copy:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

/* ------------------------------------------------------
 mobile
------------------------------------------------------ */
@media screen and (max-width: 767px) {
    #header-title span {
        font-size: 20px;
        font-weight: bold;
    }

    /* question */
    #wrap-question {
        width: 95%;
        font-size: 20px;
        font-weight: bold;
    }

    #answer-form .text input {
        font-size: 20px;
        width: 295px;
    }

    #answer-form .submit {
      margin-top: 15px;
      text-align: center;
    }

    #answer-form .submit input {
      width: 300px;
      height: 40px;
      padding: 7px 0;
      background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
      border: 1px #999 solid;
      color: #000;
      -webkit-appearance: none;
      -webkit-border-radius: 5px;
      -webkit-box-shadow: 0 2px 2px #CCC;
      /*text-shadow: 1px 2px 3px #C45C00;*/
      margin: 10px 0 20px 0;
    }

    #answer-form .submit button {
      width: 300px;
      height: 40px;
      padding: 7px 0;
      background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
      border: 1px #999 solid;
      color: #000;
      -webkit-appearance: none;
      -webkit-border-radius: 5px;
      -webkit-box-shadow: 0 2px 2px #CCC;
      /*text-shadow: 1px 2px 3px #C45C00;*/
      margin: 10px 0 20px 0;
    }

    #wrap-answer {
      width: 95%;
      margin: 0 auto;
      background-color: #ffff99;
      font-size: 20px;
      padding: 5px;
    }

    #wrap-result {
      width: 95%;
      margin-top: 15px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      font-size: 20px;
      padding: 10px 0 5px 0;
    }

    #wrap-result p {
      margin: 0;
    }

    #wrap-result p#seikai {
      color: #ff0000;
    }

    #wrap-result p#seikai2 {
      color: #ff0000;
      font-size: 20px;
    }

    .answer-detail {
      width: 95%;
      margin: 0 auto;
      text-align: left;
    }

    .answer-detail table {
      width: 100%;
      margin-top: 0;
    }

    .answer-detail table th {
      font-size: 100%;
    }

    .answer-detail h1 {
      font-size: 20px;
      margin-top: 20px;
    }

    /* TODO IEだとmargin-topが効いてない */
    .answer-detail h2 {
      font-size: 20px;
      margin-top: 20px;
    }

    .answer-detail h2#answer {
      font-size: 20px;
      padding: 3px 0 3px 6px;
      margin-top: 5px;
      background-color: #ffff99;
    }

    /* answer-list */
    #answer-list {
      width: 100%;
      margin: 0 auto;
      text-align: left;
    }
    #answer-list table {
     width: 100%;
    }

    #answer-list h1 {
      font-size: 20px;
      text-align: center;
      margin: 15px;
    }

    .pager-right {
      width: 95%;
      margin: 0 auto;
      text-align: right;
    }

    /* support */
    #wrap-support {
      width: 95%;
      margin: 0 auto;
      text-align: left;
    }

    #wrap-support h1 {
      font-size: 20px;
      text-align: center;
      margin-top: 15px;
    }

    #wrap-support h2 {
      font-size: 20px;
      text-align: center;
    }

    #wrap-support p {
      font-size: 100%;
      line-height: 1.8em;
    }

    #wrap-support ul {
      font-size: 100%;
      line-height: 1.8em;
      list-style-type: disc;
    }

    #wrap-support input {
      font-size: 100%;
      width: 250px;
      border: none;
    }

    /* inquiry */
    section#inquiry {
      width: 95%;
    }

    section#inquiry h2.title {
      width: 100%;
    }

    section#inquiry h3 {
      margin-left: 15px;
    }

    form.inquiry-form input {
        width: 80%;
    }

    form.inquiry-form textarea {
        width: 80%;
    }

    /* privacypolicy */
    #wrap-privacypolicy {
        width: 95%;
    }

    /* kiyaku */
    #wrap-kiyaku {
      width: 95%;
    }

    /* footer */
    footer {
        border-top: 1px solid #a9a9a9;
        margin-top: 0px;
        padding-top: 0px;
    }

    footer span {
      font-size: 100%;
    }

    .footer-list {
        text-align: left;
    }

    .footer-list a {
        padding: 8px;
        border-bottom: 1px solid #a9a9a9;
        text-decoration :none;
        color: #000;
        -webkit-tap-highlight-color: rgba(0,0,102,0.25) !important;
    }

    .footer-list a.icon-link {
        display: block;
        padding: 10px 24px 10px 8px !important;
        background: url("/static/images/common/bg_menu.png") right center no-repeat;
        background-size: 14px 12px;
        -moz-background-size: 14px 12px;
        -webkit-background-size: 14px 12px;
        -o-background-size: 14px 12px;
        -ms-background-size: 14px 12px;
        text-decoration: none;
        -webkit-tap-highlight-color: rgba(0,0,102,0.25) !important;
    }

    .footer-etc {
        padding: 15px;
    }

    footer #copyright {
        background-color: #dcdcdc;
        padding: 5px 0;
        margin-top: 10px;
    }

    footer #copyright a{color: #000;}
    footer #copyright a:visited{color:#000;}
    footer #copyright a{text-decoration:none;}
    footer #copyright a:hover{color:#000;}

}