.quiz_moon p{
    font-weight: bold;
    color: #000;
    margin: 0;
}
/***********************************************************************
  「★PC版 CSS★」ブラウザの幅が751px以上ならここの記述が有効になる
  **********************************************************************/
@media all and (min-width: 751px) {

/* トラベルタイトル */
#travel {
    width: 1920px;
    height: 1340px;
    background: #CEF771;
    background-size: 100%;
}
.tra_bg {
    width: 1920px;
    height: 1120px;
    background: url(../images/tra_bg_clo.png) center;
    background-size: 100%;
}
.tra_tit_wrap {
    padding: 40px 0 10px;
}
.tra_tit {
    width: 420px;
    height: 242px;
    position: relative;
    margin: 0px auto;
    background: url(../images/tra_tit.svg) no-repeat center;
    background-size: 100%;
}
.tra_subtit {
    width: 450px;
    height: 47px;
    margin: 20px auto;
    background: url(../images/tra_subtit.svg) no-repeat center;
    background-size: 100%;
    position: relative;
}
.tra_lead p{
    text-align: center;
    font-size: 18px;
    width: 830px;
    height: auto;
    margin: 0 auto;
    font-weight: bold;
}

/* トラベルクイズ */
.travel_quiz {
    width: 1920px;
    height: 1049px;
    background: url(../images/tra_back_pc.png) no-repeat top;
    background-size: 100%;
    position: relative;
}
/* 浮いてるものたち */
.quiz_back_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
}
.quiz_clock {
    width: 750px;
    height: 797px;
    background: url(../images/tra_quiz_clock.svg) no-repeat center;
    background-size: 100%;
    opacity: 0.2;
    left: -210px;
    top: -162px;
    position: absolute;
}
.mask-bottom-half {
  -webkit-mask-image: linear-gradient(to top, black 50%, transparent 50%);
  mask-image: linear-gradient(to top, black 68%, transparent 50%);
}
.quiz_clock:nth-child(2) {
    width: 750px;
    height: 797px;
    background: url(../images/tra_quiz_clock.svg) no-repeat center;
    background-size: 100%;
    opacity: 0.2;
    left: 1495px;
    top: 480px;
    position: absolute;
}
.quiz_clock::before {
    content: "";
    position: absolute;
    top: 155px;
    left: 155px;
    width: 60%;
    height: 60%;
    background: url(../images/tra_quiz_hari.svg) no-repeat center center;
    background-size: contain;
    opacity: 1;
    animation: rotate-center 20s linear infinite;
    transform-origin: center center;
    pointer-events: none;
}
.quiz_dragon {
    width: 770px;
    height: 491px;
    background: url(../images/tra_quiz_dragon.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    left: -270px;
    top: 170px;
    filter: drop-shadow(0px 0px 15px #0A2667);
}
.quiz_music {
    width: 185px;
    height: 236px;
    background: url(../images/tra_quiz_music.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    right: 434px;
    top: -16px;
    filter: drop-shadow(0px 0px 15px #0A2667);
}
.quiz_sime {
    width: 266px;
    height: 152px;
    background: url(../images/tra_quiz_sime.svg) no-repeat center;
    background-size: 100%;
    position: absolute;
    right: 160px;
    top: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.quiz_juice {
    width: 217px;
    height: 227px;
    background: url(../images/tra_quiz_juice.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    right: 190px;
    top: 336px;
    filter: drop-shadow(0px 0px 15px #0A2667);
}
/* クイズ締め切り日 */
.quiz_sime p:nth-child(1) {
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    margin: 38px 0 0;
    text-align: center;
}
.quiz_sime p:nth-child(2) {
    font-size: 36px;
    color: #000;
    font-weight: bold;
    margin: -8px 0;
    padding: 0;
    font-family: 'Roboto';
} 
.quiz_sime p:nth-child(1) span{
    font-size: 27px;
    color: #FAFF75;
    font-weight: bold;
    font-family: 'Roboto';
    margin-right: 10px;
}
.quiz_sime span:nth-child(1) {
    font-size: 30px;
    color: #000;
    font-weight: bold;  
}
.quiz_sime span:nth-child(2) {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    background: #ff0000;
    padding: 3px 6px;
    border-radius: 50%;
    position: relative;
    bottom: 3px;
}
.quiz_sime span:nth-child(3) {
    font-size: 20px;
    color: #000;
    font-weight: bold;
    display: inline-block;
    transform: translateY(-1px);
}
.quiz_sime span:nth-child(4) {
    font-size: 20px;
    color: #000;
    font-weight: bold;  
}
/* クイズ手前 */
.quiz_wrap {
    position: absolute;
    width: 100%;
    height: 100%;    
}
.quiz_pic {
    width: 582px;
    height: 488px;
    background: url(../images/tra_quiz_pic.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: -4px;
    left: 667px;
    z-index: 1;
    filter: drop-shadow(0px 0px 8px #0A2667);
}
/* クイズ月の中 */
.quiz_moon {
    width: 1920px;
    height: 601px;
    background: url(../images/tra_quiz_moon_pc.png) no-repeat top;
    background-size: 100%;
    position: absolute;
    bottom: -9px;
    left: 0;
    filter: drop-shadow(0px -6px 15px #0A2667);
}
.quiz_q {
    width: 506px;
    height: 75px;
    background: url(../images/tra_quiz_q_pc.svg) no-repeat center;
    background-size: 100%;
    margin: 30px auto 17px;
}
.quiz_moon_p p{
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
    font-weight: bold;
    color: #000;
}
.quiz_moon_p_span p{
    font-size: 14px;
    text-align: center;
    margin: 0 auto;
    color: #00007C;
}
/* クイズボタン */
.quiz_ans {
    display: flex;
    width: 520px;
    /* height: 271px; */
    margin: 14px auto 36px;
    position: relative;
    justify-content: space-between;
}
.quiz_ans_a,
.quiz_ans_b,
.quiz_ans_c {
    width: 144px;
    height: 144px;
    background: #fff;
    margin: 0;
    border-radius: 50%;
    border: 11px solid #00007C;
    filter: drop-shadow(0px 13px 0px #00007C);
    position: relative;
    transition: filter 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    text-decoration: none;
}
/* 共通テキスト部分 */
.quiz_ans_a p,
.quiz_ans_b p,
.quiz_ans_c p {
    font-size: 36px;
    font-family: 'roboto';
    margin: 49px auto 0;
    width: 143px;
    display: flex;
    align-items: center;
    position: relative;
    right: -17px;
}
.quiz_ans_a span,
.quiz_ans_b span,
.quiz_ans_c span {
    font-size: 25px !important;
    color: #000 !important;
    margin-left: 2px;
}
/* クイズA,B,Cの薄文字 */
.quiz_ans_a::before,
.quiz_ans_b::before,
.quiz_ans_c::before {
    content: "";
    position: absolute;
    top: 23%;
    left: 50%;
    width: 35px;
    height: 35px;
    transform: translate(-50%, -50%);
    background: no-repeat center center;
    background-size: contain;
    pointer-events: none;
}
.quiz_ans_a::before {
    background-image: url(../images/tra_quiz_a.svg);
}
.quiz_ans_b::before {
    background-image: url(../images/tra_quiz_b.svg);
}
.quiz_ans_c::before {
    background-image: url(../images/tra_quiz_c.svg);
}
/* 矢印 */
.quiz_ans_a::after,
.quiz_ans_b::after,
.quiz_ans_c::after {
    content: "→";
    font-size: 18px;
    font-family: 'roboto', sans-serif;
    position: absolute;
    bottom: 0px;
    right: -20px;
    font-weight: bold;
    color: #000;
    padding: 0px 31px;
    border: 5px solid #00007C;
    border-radius: 30px;
    background: linear-gradient(to right, #FF7541 50%, #fff 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: background-position 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
    z-index: 1;
}
/* クイズホバー時 */
.quiz_ans_a:hover,
.quiz_ans_b:hover,
.quiz_ans_c:hover {
    border-color: #FF7541;
    filter: none;
    transform: translateY(15px);
}
.quiz_ans_a:hover::before {
    background-image: url(../images/tra_quiz_a_hover.svg);
    width: 83px;
    height: 43px;
}
.quiz_ans_b:hover::before {
    background-image: url(../images/tra_quiz_b_hover.svg);
    width: 83px;
    height: 43px;
}
.quiz_ans_c:hover::before {
    background-image: url(../images/tra_quiz_c_hover.svg);
    width: 83px;
    height: 43px;
}
.quiz_ans_a:hover::after,
.quiz_ans_b:hover::after,
.quiz_ans_c:hover::after {
    background-position: left bottom;
    color: #fff;
    border-color: #FF7541;
}
.quiz_rp_cam {
    width: 310px;
    height: 310px;
    position: absolute;
    background: url(../images/tra_quiz_rp_pc.svg) no-repeat center;
    background-size: 100%;
    top: -20px;
    left: 327px;
    filter: drop-shadow(-2px 0px 17px rgba(0, 0, 0, 0.4));
}
.quiz_rp_cam:hover {
    opacity: 0.8;
}
.quiz_hint {
    width: 340px;
    height: 284px;
    position: absolute;
    background: url(../images/tra_quiz_hint_pc.svg) no-repeat center;
    background-size: 100%;
    top: 24px;
    right: 380px;
}
.quiz_hint.line4 {
    width: 340px;
    height: 284px;
    position: absolute;
    background: url(../images/tra_quiz_hint_pc_4.svg) no-repeat center;
    background-size: 100%;
    top: 24px;
    right: 380px;
}
.quiz_hint p{
    font-size: 20px;
    color: #000;
    line-height: 26px;
    font-weight: 900;
    width: 169px;
    margin: 126px auto 0;
    position: relative;
    left: 17px;
    transform: rotate(-5deg);
    text-align: center;
}
.quiz_hint.line4 p{
    line-height: 29px;
    margin: 104px auto 0;
}
.quiz_hint p span{
    color: #FF7541;
    font-size: 20px;
    font-weight: 900;
}
}


/***********************************************************************
  「★SP版 CSS★」ブラウザの幅が750px以下ならここの記述が有効になる
  **********************************************************************/
@media only all and (max-width: 750px) {

    /* トラベルタイトル */
#travel {
    width: 750px;
    height: 2700px;
    background: #CEF771;
    background-size: 100%;
}
.tra_bg {
    width: 750px;
    height: 1120px;
    background: url(../images/tra_bg_clo.png) top;
    background-size: 100%;
}
.tra_tit_wrap {
    padding: 40px 0 20px;
}
.tra_tit {
    width: 480px;
    height: 270px;
    position: relative;
    margin: 0px auto;
    background: url(../images/tra_tit.svg) no-repeat center;
    background-size: 100%;
}
.tra_subtit {
    width: 680px;
    height: 70px;
    margin: 20px auto;
    background: url(../images/tra_subtit.svg) no-repeat center;
    background-size: 100%;
    position: relative;
}
.tra_lead p{
    text-align: center;
    font-size: 28px;
    width: 680px;
    height: auto;
    margin: 0 auto;
    font-weight: bold;
    line-height: 48px;
}

/* トラベルクイズ */
.travel_quiz {
    width: 750px;
    height: 932px;
    background: url(../images/tra_back_sp.png) no-repeat center;
    background-size: 100%;
    position: relative;
}
/* 浮いてるものたち */
.quiz_back_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
}
.quiz_clock {
    width: 680px;
    height: 680px;
    background: url(../images/tra_quiz_clock.svg) no-repeat center;
    background-size: 100%;
    opacity: 0.5;
    top: -62px;
    left: 35px;
    position: absolute;
}
.mask-bottom-half {
  -webkit-mask-image: linear-gradient(to top, black 50%, transparent 50%);
  mask-image: linear-gradient(to top, black 81%, transparent 50%);
}
.quiz_clock::before {
    content: "";
    position: absolute;
    top: 125px;
    left: 135px;
    width: 60%;
    height: 60%;
    background: url(../images/tra_quiz_hari.svg) no-repeat center center;
    background-size: contain;
    opacity: 1;
    animation: rotate-center 20s linear infinite;
    transform-origin: center center;
    pointer-events: none;
}
.quiz_dragon {
    width: 700px;
    height: 430px;
    background: url(../images/tra_quiz_dragon.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    left: -390px;
    top: 26px;
    filter: drop-shadow(0px 0px 15px #0A2667);
}
.quiz_sime {
    width: 346px;
    height: 196px;
    background: url(../images/tra_quiz_sime.svg) no-repeat center;
    background-size: 100%;
    position: absolute;
    right: 200px;
    top: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.quiz_juice {
    width: 207px;
    height: 217px;
    background: url(../images/tra_quiz_juice.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    right: 23px;
    top: 213px;
    filter: drop-shadow(0px 0px 15px #0A2667);
}
/* クイズ締め切り日 */
.quiz_sime p:nth-child(1) {
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    margin: 53px 0 0;
    text-align: center;
}
.quiz_sime p:nth-child(2) {
    font-size: 54px;
    color: #000;
    font-weight: bold;
    margin: -11px 0;
    padding: 0;
    font-family: 'Roboto';
} 
.quiz_sime p:nth-child(1) span{
    font-size: 34px;
    color: #FAFF75;
    font-weight: bold;
    font-family: 'Roboto';
    margin-right: 10px;
}
.quiz_sime span:nth-child(1) {
    font-size: 30px;
    color: #000;
    font-weight: bold;  
}
.quiz_sime span:nth-child(2) {
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    background: #ff0000;
    padding: 6px 9px;
    border-radius: 50%;
    position: relative;
    bottom: 9px;
}
.quiz_sime span:nth-child(3) {
    font-size: 28px;
    color: #000;
    font-weight: bold;
    display: inline-block;
    transform: translateY(-2px);
}
.quiz_sime span:nth-child(4) {
    font-size: 20px;
    color: #000;
    font-weight: bold;  
}
/* クイズ手前 */
.quiz_wrap {
    position: absolute;
    width: 100%;
    height: 205%;    
}
.quiz_pic {
    width: 680px;
    height: 544px;
    background: url(../images/tra_quiz_pic.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 355px;
    left: 40px;
    z-index: 1;
}
/* クイズ月の中 */
.quiz_moon {
    width: 750px;
    height: 1197px;
    background: url(../images/tra_quiz_moon_sp.png) no-repeat center;
    background-size: 100%;
    position: absolute;
    bottom: -156px;
    left: 0;
    filter: drop-shadow(0px -6px 15px #0A2667);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.quiz_q {
    width: 636px;
    height: 131px;
    background: url(../images/tra_quiz_q_sp.svg) no-repeat center;
    background-size: 100%;
    margin: 33px auto 24px;
}
.quiz_moon_p p{
    font-size: 28px;
    text-align: center;
    margin: 0 auto;
    font-weight: bold;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.quiz_moon_p_span p{
    font-size: 28px;
    text-align: center;
    margin: 0 auto;
    color: #00007C;
}
/* クイズボタン */
.quiz_ans {
    display: flex;
    width: 670px;
    margin: 30px auto 0;
    position: relative;
    justify-content: space-between;
    z-index: 1;
}
.quiz_ans_a,
.quiz_ans_b,
.quiz_ans_c {
    width: 194px;
    height: 194px;
    background: #fff;
    margin: 0;
    border-radius: 50%;
    border: 11px solid #00007C;
    filter: drop-shadow(0px 13px 0px #00007C);
    position: relative;
    transition: filter 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    text-decoration: none;
}
/* 共通テキスト部分 */
.quiz_ans_a p,
.quiz_ans_b p,
.quiz_ans_c p {
    font-size: 45px;
    font-family: 'roboto';
    margin: 76px auto 0;
    width: 143px;
    display: flex;
    align-items: center;
    position: relative;
    right: 3px;
}
.quiz_ans_a span,
.quiz_ans_b span,
.quiz_ans_c span {
    font-size: 40px !important;
    color: #000 !important;
}
/* クイズA,B,Cの薄文字 */
.quiz_ans_a::before,
.quiz_ans_b::before,
.quiz_ans_c::before {
    content: "";
    position: absolute;
    top: 23%;
    left: 50%;
    width: 55px;
    height: 55px;
    transform: translate(-50%, -50%);
    background: no-repeat center center;
    background-size: contain;
    pointer-events: none;
}
.quiz_ans_a::before {
    background-image: url(../images/tra_quiz_a.svg);
}
.quiz_ans_b::before {
    background-image: url(../images/tra_quiz_b.svg);
}
.quiz_ans_c::before {
    background-image: url(../images/tra_quiz_c.svg);
}
/* 矢印 */
.quiz_ans_a::after,
.quiz_ans_b::after,
.quiz_ans_c::after {
    content: "→";
    font-size: 24px;
    font-family: 'roboto', sans-serif;
    position: absolute;
    bottom: 0px;
    right: -20px;
    font-weight: bold;
    color: #000;
    padding: 0px 33px;
    border: 5px solid #00007C;
    border-radius: 30px;
    background: linear-gradient(to right, #FF7541 50%, #fff 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: background-position 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
    z-index: 1;
}
/* クイズホバー時 */
.quiz_ans_a:hover,
.quiz_ans_b:hover,
.quiz_ans_c:hover {
    border-color: #FF7541;
    filter: none;
    transform: translateY(15px);
}
.quiz_ans_a:hover::before {
    background-image: url(../images/tra_quiz_a_hover.svg);
    width: 128px;
    height: 75px;
}
.quiz_ans_b:hover::before {
    background-image: url(../images/tra_quiz_b_hover.svg);
    width: 128px;
    height: 75px;
}
.quiz_ans_c:hover::before {
    background-image: url(../images/tra_quiz_c_hover.svg);
    width: 128px;
    height: 75px;
}
.quiz_ans_a:hover::after,
.quiz_ans_b:hover::after,
.quiz_ans_c:hover::after {
    background-position: left bottom;
    color: #fff;
    border-color: #FF7541;
}
.quiz_rp_cam {
    width: 600px;
    height: 136px;
    position: relative;
    background: url(../images/tra_quiz_rp_sp.svg) no-repeat center;
    background-size: 100%;
    top: -38px;
    filter: drop-shadow(-2px 0px 17px rgba(0, 0, 0, 0.4));
}
.quiz_rp_cam:hover {
    opacity: 0.8;
}
.quiz_hint {
    width: 680px;
    height: 314px;
    position: relative;
    background: url(../images/tra_quiz_hint_sp.svg) no-repeat center;
    background-size: 100%;
    top: -21px;
}
.quiz_hint p{
    font-size: 28px;
    color: #000;
    line-height: 37px;
    font-weight: 900;
    width: 402px;
    margin: 120px auto 0;
    position: relative;
    left: 125px;
}
.quiz_hint p span{
    color: #FF7541;
    font-size: 30px;
    font-weight: 900;
}
.quiz_hint {
  order: 1;
}
.quiz_rp_cam {
  order: 2;
}
.quiz_moon_p_span {
  order: 3;
}
}