@media ( max-width: 767px ) {
	.wcm {
		padding: 0 .625em;
	}
  .title_h2cmn {
    padding: 0;
  }
  .title_h2cmn span {
    font-size: .7em;
    padding-left: .4em;
    padding-right: .4em;
  }
  .title_h2cmn span::before,
  .title_h2cmn span::after {
    content: none;
  }
  .sec_box .display_content {
    margin: 0 0 1.4em auto;
  }
  .box_period .desc_s,
  .step01_list p,
  .step02_list p {
    font-size: 15px;
    text-align: left;
    max-width: 90%;
    margin: 1em auto 0;
  }
  .step01_list p,
  .step02_list p{
    margin: 0 auto 1em;
  }

  /*--- 改行変更 ---*/
  span.br_show::before {
    content: "";
    white-space: normal;
  }

  /*--- box_period janken_content ---*/
  .sec_box .janken_content{
    margin: 0 auto;
    max-width: 350px;
  }
  .sec_box .janken_content .janken_sub_text{
    margin: 0 auto .25em;
  }
  .sec_box .janken_content .janken_sub_text:last-child{
    margin: 0 auto;
  }
  .sec_box .janken_content .janken_main_title{
    margin: 1em auto .5em;
  }
  .sec_box .janken_content .janken_main{
    margin: 0;
  }
  .sec_box .janken_sub_ttl{
    margin: auto;
    max-width: 195px;
    position: relative;
    top: 20px;
  }

  /*--- display_game ---*/
  .sec_box .display_list{
    background:url(../image/img-gamedisplay-sp.png) no-repeat top center;
    background-size: 329px auto;
    height: 585px;
    display: block;
  }
  .sec_box .display_content{
    display: none;
  }

  /*--- step01_sentence4 ---*/
  .sec_box .step01_content .step01_dtl{
    float: none;
    max-width: 100%;
    margin: 0 0 1em 0;
  }
  .sec_box .step01_content .img_sample {
    margin: 0 auto 1em;
  }
  .sec_box .step01_content:after {
    border-bottom: 1px #B28E5F solid;
    content: "";
    display: block;
    width: 100%;
  }
  .sec_box .step01_content_wide .step01_dtl .title_h3cmn {
    float: none;
  }
  .sec_box .step01_content_wide .img_sample04-1,
  .sec_box .step01_content_wide .img_sample04-2 {
    float: none;
    font-size: 0;
    margin: 0 auto 4%;
  }
  .sec_box .step01_content_wide .img_sample04-2 {
    margin: 0 auto;
  }

  /*--- step02_judge ---*/
  .sec_box .step02_content .hint_box {
    width: 100%;
    margin:0 auto;
  }
  .sec_box .step02_content .step02_dtl {
    max-width: 100%;
  }
  .sec_box .step02_content_wide .step02_dtl .title_h3cmn {
    width: 100%;
    float: none;
  }
  .sec_box .step02_content_wide .img_judge02-1,
  .sec_box .step02_content_wide .img_judge02-4 {
    float: none;
    margin: 0 auto 1.5em;
    max-height: 370px;
  }
  .sec_box .step02_content .step02_dtl {
    float: none;
  }
  .sec_box .step02_content .img_judge01-1,
  .sec_box .step02_content .img_judge01-2,
  .sec_box .step02_content .img_judge01-3{
    float: none;
    margin: 1.5em auto 0;
  }
  .sec_box .step02_content .img_judge01-2{
    max-width: 329px;
    width: 100%;
  }
  .sec_box .step02_content .img_judge01-3{
    display: block;
    margin: 1.5em auto;
  }
  .sec_box .step02_content .img_judge01-3:before {
    background-size: 88px;
    content: "";
    top: -20px;
    transform: rotate(90deg) scale(1, -1);
  }
  .sec_box .step02_content_wide .img_judge02-2,
  .sec_box .step02_content_wide .img_judge02-3{
    display: none;
  }


  /* box__links */
  .wcm .box__links {
    max-width: 100%;
    padding-top: 0;
  }
  .wcm .box__links ul {
    display: block;
  }
  .wcm .box__links ul li {
    margin: 0 auto;
    max-width: 48.8em;
    padding: 1.5em 0 0;
    width: 100%
  }
  .wcm .box__links li:nth-child(1) {
    padding-top: 0;
  }
  .wcm .box__links figcaption {
    margin-top: .3em;
  }
}


/*ポータルサイトバナーモーダル*/

.sec_box .display_game .modal_content,
.sec_box .display_game input,
.sec_box .display_game .modalPopup2 { 
  /* ラジオボックス非表示 及び 初期設定 ポップアップ非表示 */
  display: none;
}
.sec_box .display_game input:nth-child(1) + label { 
  cursor: pointer;
}
.sec_box .display_game input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 {
  /* ラジオ１ チェックでポップアップ表示 */
  display: block;
  z-index: 998;
  max-width: 320px;
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  overflow: hidden;
  width: 100%;
}
.sec_box .display_game input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 .display_content {
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  display: inline-block;
  margin: 0 0 0 auto;
  max-width: 368px;
  width: 100%;
}
.sec_box .display_game input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 .close_area {
  background: url(../image/btn_red_after.svg) no-repeat right center, url(../image/btn_red.svg) no-repeat left center;
  background-color: #C92121;
  background-size: auto 100%;
  color: #fff;
  font-size: 16px;
  text-align: center;
  margin: 2% 0 0;
  min-width: 321px;
  padding: 5%;
}
.sec_box .display_game input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 div iframe {
  width: 100%;
  height:100%;
  border:none;
  display:block;
}
.sec_box .display_game input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 div img {/* ポップアップの中の要素 */
  max-width: 100%;
}
.sec_box .display_game input:nth-child(1) + label ~ label {
  /* ラジオ1 以外のラベルを初期は非表示 */
  display: none;   
}
.sec_box .display_game input:nth-child(1):checked + label + input:nth-child(3) + label {
  width: 100%;
  height: 100%;
  background: #000;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 997;
  text-indent: -999999px;
  overflow: hidden;
}
.sec_box .display_game input:nth-child(1) + label + input:nth-child(3):checked + label + input:nth-child(5) + label + .modalPopup2,
.sec_box .display_game input:nth-child(1) + label + input:nth-child(3) + label + input:nth-child(5):checked + label + .modalPopup2 { 
  /* ラジオ2と3 どっちかチェックでポップアップ非表示 */
  display: none;
}
.modalPopup2 {
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
.sec_box .display_game .modalTitle {
  padding-bottom: .5em;
  margin: .5em 0;
  border-bottom:1px solid #ccc;
  font-weight: 600;
}
.sec_box .display_game .modalMain {
  color:#222;
  text-align: left;
  font-size: 14px;
  line-height: 1.8em;
}

@media ( max-width: 767px ) {
  /*ゲーム画面の選択領域*/
  .sec_box .display_game .modal_content{
    display:block;
    max-width:310px;
    margin: 0 auto;
    overflow: auto;
  }
  .sec_box .display_game .modal_content .modal_arrow{
/*    animation: slide 3s ease-out 0s infinite alternate;
    -webkit-animation: slide 3s ease-out 0s infinite alternate;*/
    margin: 5.25% 0;
    max-width: 70px;
    width: 100%;
    position: absolute;
  }
  @keyframes slide {
    0% {transform:rotate(-5deg)}
    50% {transform:rotate(5deg)}
    100% {transform:rotate(-5deg)}
  }
  @-webkit-keyframes slide {
    0% {transform:rotate(-5deg)}
    50% {transform:rotate(5deg)}
    100% {transform:rotate(-5deg)}
  }
  .sec_box .display_game .popupModal1{
    height:40px;
    margin: 2% auto 0;
    width: 100%;
  }
  .sec_box .display_game .popupModal2-1{
    height: 226px;
    margin: 9% auto 0;
    width: 100%;
  }
  .sec_box .display_game .popupModal2-2{
    float: left;
    height: 106px;
    margin: 0 auto 2%;
    max-width: 235px;
    width: 100%;
  }
  .sec_box .display_game .popupModal3{
    height: 153px;
    float: right;
    margin: 2.75% auto 2%;
    max-width: 65px;
    width: 100%;
  }
  .sec_box .display_game .popupModal4{
    height: 78px;
    float: left;
    margin: 26.75% auto 2%;
    max-width: 45px;
    width: 100%;
  }
  .sec_box .display_game .popupModal5{
    height: 156px;
    float: left;
    margin: 1.5% 0 0 9.5%;
    max-width: 159px;
    width: 100%;
  }
  .sec_box .display_game .popupModal6{
    height: 88px;
    float: left;
    margin: 5.25% 0 2% 5.5%;
    max-width: 59px;
    width: 100%;
  }
  .sec_box .display_game .click_area{
    height:100%;
    width: 100%;
  }
}

@media ( max-width: 350px ) {
  .title_h3cmn{
    font-size: 19px;
  }
  .sec_box .display_list{
    background: url(../image/img-gamedisplay-sp.png) no-repeat top center;
    background-size: 290px auto;
    height: 516px;
  }
  .title_h3cmn > span {
    padding: 0 25px 3px;
  }
  .sec_box .display_content{
    padding: .75em .6em;
  }
  .sec_box .display_game .popupModal1{
    height: 35px;
    margin: 2.25% auto 0;
    width: 92%;
  }
  .sec_box .display_game .popupModal2-1{
    height: 198px;
    margin: 8% auto 0;
    width: 92%;
  }
  .sec_box .display_game .popupModal2-2{
    float: left;
    height: 94px;
    margin: 0 auto 2% 4%;
    max-width: 207px;
  }
  .sec_box .display_game .popupModal3{
    height: 134px;
    float: right;
    margin: 2.75% 5% 2% auto;
    max-width: 56px;
  }
  .sec_box .display_game .popupModal4{
    height: 68px;
    float: left;
    margin: 24.75% auto 2% 4%;
    max-width: 40px;
  }
  .sec_box .display_game .popupModal5{
    height: 136px;
    float: left;
    margin: 1.25% 0 0 9.5%;
    max-width: 139px;
  }
  .sec_box .display_game .popupModal6{
    height: 78px;
    float: left;
    margin: 5% 0 0 4.5%;
    max-width: 52px;
  }
  .sec_box .display_game input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2{
    padding: 12.5%;
  }
  .sec_box .display_game input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .modalPopup2 .close_area{
    min-width: 240px;
  }
  .sec_box .step01_content_wide .step01_dtl .title_h3cmn{
    width:299px;
  }
  .sec_box .step02_content .img_judge01-3:before {
    right: 37px;
  }
}