body {
  margin: 0; /*一応*/
  background-image: url("../images/bg/bg.jpg");
  background-size: 128px 128px;
  background-color: rgba(255,255,255,0.75);
  background-blend-mode: lighten;
}

.left-column {
  width: 100%;
  max-width: 756px; /*pc版実質値*/ 
  margin: 0 auto;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

.left-column .section {
  width: 100%;
  text-align: center;
  padding: 15px 0px 48px 0px;
}

.section .section-title {
  display: flex;
  justify-content: center;
}

.section .section-title .title-block {
  display: flex;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.left-column .section h2{
  color: #ffffff;/*文字色*/
  border-bottom: dashed 1.5px #ffffff;
  padding: 2px 10px;
}

.content {
  display: block;
  width: 80%;
  margin: 0 auto;
}

#main-visual {
  width: 100%;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 0px;
}

#main-visual img {
  width: 100%;
}

#catchcopy {
  padding: 64px 0px;
  background: #5ecdef;
  text-align: center;
}

#catchcopy img{
  width: 90%;
}

#catchcopy .section-title .title-block h2{
  color: #1d2087;  
  border-bottom: dashed 1.5px #1d2087;
} 

@media screen and (max-width:767px) {
  #catchcopy p {
    width: 84%;
    margin: 0 auto;
    margin-top: 45px;
    font-weight: bold;
    color: #1d2087;
    text-align: center;

    line-height: 1.8em;
    font-size: 12.5px;
  }

  #catchcopy p strong {
    
    font-size: 17px;
  }
}

@media screen and (min-width:768px) {
  #catchcopy p {
    width: 84%;
    margin: 0 auto;
    margin-top: 45px;
    font-weight: bold;
    color: #1d2087;
    text-align: center;

    line-height: 1.9em;
    font-size: 16px;
  }

  #catchcopy p strong {
    
    font-size: 22px;
  }
}

#how-to-play {
  background: #1d2087;
  color: white;
}

#how-to-play a{
  color: white;
}

#howto-images {
  margin: 20px 0px;
}

#howto-images img {
  width: 22%;
}

#howto-images2 .allow {
  font-size: 18px;
}

@media screen and (max-width:767px) {
  #howto-images2 .step {
    background-color: #205db5;
    padding: 5px 7px 2px 7px;
  }

  #howto-images2 img {
    width: 40%;
    padding-bottom: 8px;
    display: inline-block;
    vertical-align: middle;
  }
}

@media screen and (min-width:768px) {
  #howto-images2 .step {
    background-color: #205db5;
    padding: 8px 15px 4px 15px;
  }

  #howto-images2 img {
    width: 40%;
    padding-bottom: 16px;
    display: inline-block;
    vertical-align: middle;
  }
}

#howto-images2 p {
  width: 55%;
  display: inline-block;
  padding-left: 7.5px;
  text-align: left;
  vertical-align: middle;
}

#howto-text {
  text-align: left;
  font-size: 14px;
  line-height: 1.6em;
}

#introduction {
  background: #205db5;
  /*color: #1d2087; ラフ版*/
  color: white;
}

/*ラフ版*/
/*#introduction .section-title .title-block h2{*/
/*  color: #1d2087;  */
/*  border-bottom: dashed 1.5px #1d2087;*/
/*} */

#intro-images {
  /*margin: 12px 0px 20px 0px;*/
  width: 90%;
  margin: 0 auto;
}


@media screen and (max-width:767px) {
  #intro-images ul{
    width: 100%;
	  text-align: center;
  	padding-left: 0;
  	padding-bottom: 16px;
	  margin: 2px 0px;
  }

  #intro-images ul li {
    list-style: none;
	  display: inline;
	  margin: 0px 2.5px;
  }
}

@media screen and (min-width:768px) {
  #intro-images ul {
    width: 100%;
	  text-align: center;
  	padding-left: 0;
  	padding-bottom: 24px;
	  margin: 8px 0px;
  }

  #intro-images ul li {
    list-style: none;
	  display: inline;
	  margin: 0px 10px;
  }
}

#intro-images ul li img {
  width: 29%;
  max-width: 160px;
}

#intro-text {
  text-align: left;
  font-size: 14px;
  line-height: 1.6em;
  margin: 12px 0px 40px 0px;
}

#intro-text strong {
  font-size: 16px;
  line-height: 1.9em;
}

#intro-text strong ul {
  font-size: 14px;
  line-height:1.6em;
  margin: 12px 0px 30px 0px;
}

#intro-text a{
  color: white;
  /*color: #1b2087; ラフ版*/
}

#input-window {
  background: #ffe100;
}

#input-window .section-title .title-block h2 {
  font-size: 36px;
  color: #1d2087;  
  border-bottom: dashed 1.5px #1d2087;
} 

#input-window #hint-discription {
  text-align: left;
  font-size: 17px;
  line-height: 1.6em;
  width: 80%;
  margin: 0 auto;
  color: #1b2087;
}

#input-window #answer2 {
  width: 56%;
  max-width: 300px;
  height: 56px;
  border-color: #1d2087;
  border: solid 4px #1d2087;
  border-radius: 8px;
  padding: 0px;
  box-sizing: border-box;
  letter-spacing: 0.1em;
  vertical-align: top;
  font-size: 21px;
  text-align: center;
}

#input-window #submit {
  width: 19%;
  min-width: 80px;
  max-width: 108px;
  height: 56px;
  background: #1d2087;
  color: white;
  border-color: #1d2087;
  border: solid 0px #1d2087;
  border-radius: 8px;
  padding: 0px;
  font-weight: bold;
  font-size: 28px;
  letter-spacing: 0.1em;
  vertical-align: middle;
  line-height: 56px;
  transition: .3s;
  text-align: center;
  display: inline-block;
}

#submit:hover {
  color: #1d2087;
  background: #ffffff;
}

.hint-label-new {
    display: block;
    margin: 1.5px 0;
    color :#1d2087;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.hint-label {
    display: block;
    margin: 1.5px 0;
    color :#1d2087;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.hint-text {
  height: auto;
  display: none;
  padding: 8px 24px;
  opacity: 1;
  color :#1d2087;
}

.inner-hint {
  text-align: left;
  margin-left: 0;
  width: 100%;
}

.inner-hint .hint-text {
  text-align: left;
  padding: 0;
  width: 100%;
}

.accbox {
    padding: 20px 0px;
    text-align: left;
}

.accbox label {
    display: block;
    margin: 1.5px 0;
    color :#1d2087;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.accbox input {
    display: none;
}

.accbox .accshow {
    height: 0;
    padding: 0 ;
    overflow: hidden;
    opacity: 0;
    transition: 0.4s;
}

.cssacc:checked + .accshow {
    height: auto;
    padding: 8px 24px;
    opacity: 1;
    color :#1d2087;
}

.accbox label {
    content: '▶︎ ヒントを見る';
}

.cssacc:checked {
    content: '▼ ヒントを隠す';
}

#attention {
  background: #1d2087;
  color: white;
}

#attention-text {
  text-align: left;
  font-size: 14px;
  line-height: 1.6em;
}

#attention-text strong {
  font-size: 16px;
}


.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .8s;
  display: none;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  padding: 50px;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}

.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.75);
  z-index: 1;
  cursor: pointer;
}

#js-black-bg3{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #EB5C4Bbb;
  z-index: 1;
  cursor: pointer;
}

.result {
  text-align: center;
  display: flex;
}

#js-popup-correct {
  color: #aa0000;
}

#js-popup-correct a:link, a:visited, a:hover, a:active {
  color: #aa0000;
}

#js-popup-correct .result h2 {
  margin: 0 auto;
  display: inline-block;
  font-size: 42px;
  border-bottom: dashed 1.5px #aa0000;
}

#js-popup-correct .popup-inner {
  max-width: 600px;
  background-color: #fff;
}

#js-popup-correct .discription {
  margin: 36px 0px;
  font-size: 16px;
  text-align: center;
}

#js-popup-correct2 {
  color: #220000;
}

#js-popup-correct2 .result h2 {
  margin: 0 auto;
  display: inline-block;
  font-size: 42px;
  color: #aa0000;
  border-bottom: dashed 3.5px #cc9999;
}

#js-popup-correct2 .popup-inner {
  max-width: 84%;
  max-height: 84%;
  background-color: rgba(255,255,255,.92);
  overflow-y: scroll;
}

#js-popup-correct2 .discription {
  margin: 36px 0px;
  font-size: 16px;
}

@media screen and (max-width:767px) {
  #epilogue {
    width: 84%;
    margin: 0 auto;
    margin-top: 45px;
    color: #111111;

    line-height: 1.3em;
    font-size: 13.5px;
  }

  #epilogue p .strg {
    font-size: 17px;
  }

  .paragraph {
    padding: 5px 0px;
  }

  #staffrole .section-group .section {
    padding: 10px 0px;
    font-size: 13.5px;
  }
}

@media screen and (min-width:768px) {
  #epilogue {
    width: 84%;
    margin: 0 auto;
    margin-top: 45px;
    color: #111111;

    line-height: 1.4em;
    font-size: 16.5px;
  }

  #epilogue p {
    margin: 0.7em 0em;
  }

  #epilogue p .strg {
    font-size: 22px;
  }

  .paragraph {
    padding: 5px 0px;
  }

  #staffrole .section-group .section {
    padding: 10px 0px;
    font-size: 16.5px;
  }

}

.discription-part {
  padding: 20px 0px 20px 0px;
}

#staffrole {
  text-align: center;
  padding: 100px 0px;
}

#staffrole h1 {
  font-size: 36px;
}

#staffrole .section-group {
  padding: 15px 0px;
}

#staffrole .section-group .section .role {
  font-weight: bold;
  line-height: 2em;

}

#staffrole .section-group .section .name {
  /*font-weight: bold;*/
  line-height: 1.7em;
}

#prize {
  text-align: center;
}

#prize #prize-text {
  font-weight: bold;
  color: #EB5C4B;
  font-size: 24px;
  padding: 24px 0px;
}


@media screen and (max-width:767px) {
  #prize .SNSbutton {
    display: inline-block;
    width: 15%;
    padding: 4px 10px;
  }

  #prize #clearImg {
    width: 84%;
  }
}

@media screen and (min-width:768px) {
  #prize .SNSbutton {
    display: inline-block;
    width: 5%;
    padding: 7px 30px;
  }

  #prize #clearImg {
    width: 64%;
  }
}

/*ここまで正解テキスト*/

#js-popup-wrong .result h2 {
  margin: 0 auto;
  display: inline-block;
  font-size: 42px;
  border-bottom: dashed 1.5px #0000aa;
}

#js-popup-wrong {
  color: #0000aa;
}

#js-popup-wrong .popup-inner {
  max-width: 600px;
  background-color: #fff;
}

#js-popup-wrong .discription {
  margin: 36px 0px;
  font-size: 18px;
  text-align: center;
  line-height: 2em;
}

.close-btn {
  text-align: center;
  cursor: pointer;
  font-weight: bold;
}

#js-close-btn1 {
  font-size: 24px;
  border: solid 0px #aa0000;
  display: flex;
}

#js-close-btn3 {
  font-size: 24px;
  border: solid 0px #aa0000;
  display: flex;
}

#js-close-btn2 {
  font-size: 24px;
  border: solid 0px #0000aa;
  display: flex;
}

.close-btn p{
  border: solid 2.5px;
  text-align: center;
  margin: 0 auto;
  padding: 6px 9px;
  border-radius: 8px;
}

#ToMitsubishi {
  background: #dddddd;
  display: flex;
  text-align: center;
}

.banners {
  width: 56%;
  padding: 12px 10px 8px 10px;
  margin: 0 auto;
  text-align: center;
  display: flex;
}

.banners a {
  padding: 4%;
}

.banners img {
  width: 95%;
  margin: 0 auto;
}