@charset "UTF-8";

@import url(base.css);

img {
	display: inline-block;
	max-width:100%;
	max-height: 100%;
    vertical-align:top;}

html{ scroll-behavior: smooth;}

p {font-size: 3.6vw;}
.pc {display: none !important;}

.img100 {
	width: 100%;
	height: auto;}
.img90 {
	width: 90%;
	height: auto;}
.img50 {
	width: 50%;
	height: auto;}
.img45 {
	width: 45%;
	height: auto;}

/*-------------------------------------------------
	++ OUTER
-------------------------------------------------*/
#container {
	margin:-50px auto 0 auto;
	text-align: center;
	position:relative;
    width: 100%;
	min-width:100%;
    background: #f2f2f2 url(../img/bg_gold.png) no-repeat center top;
    background-attachment: fixed;
    background-size: cover;}

.cInner {
	display:block;
	clear:both;
	margin:0 auto;
	text-align: left;
	position:relative;
	padding:6vw 2vw;
    margin-inline: auto;}
.cInner2 {
	display:block;
	clear:both;
	margin:0 auto;
	text-align: left;
	position:relative;
	padding:6vw 2vw 3vw 2vw;}

/*-------------------------------------------------
	++ HEADER
-------------------------------------------------*/
#header {
    width: 100%;
    height: 100vw;
    margin: 0 auto;
    background: url(../img/bg01.png) center top no-repeat;
    background-size: cover;
    background-color: #f2f2f2;}
#header .Inner {
    width: 100%;
    padding: 5vw 0 0 0;
    margin: 0 auto;}

#header .logo {
    margin: 0 auto;
    width: 100%;}
#header .logo img {
    width: 100%;}
#header .Bt_awards {
    width: 65%;
    height: 13vw;
    margin: 2vw auto 0 auto;
    background-image: url(../img/bt.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;}
#header .Bt_awards a {
    width: 100%;
    display: block;
    color: #000097;
    font-weight: bold;
    font-size: 4.5vw;
    text-align: center;}

/*-------------------------------------------------
	++ fade
-------------------------------------------------*/
.element {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;}
/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);}

/*-------------------------------------------------
	++ title
-------------------------------------------------*/
.title {
    width: 100%;
    height: 15vw;
    padding: 0;
	margin:0 auto 20px auto;
	text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 5.8vw;
    line-height: 10.1vw;
    background: url(../img/title_bg.png) no-repeat center top;
    background-size: 100%;}


/*-------------------------------------------------
	++ others
-------------------------------------------------*/
.MVPBox {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;}
.MVPCrown {width: 13vw;}
.MVPPlayerBox {width: 68vw;}
.MVPPlayer {
    width: 68vw;
    height: 68vw;
    background-image: url(../img/MVP.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;}
.MVPPlayer img {
    position: absolute;
    top: -1.5vw;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: circle(40%);}

.MVPnameBOX, .MVPrecordBOX {
    width: 100%;
    font-size: 5vw;
    font-weight: bold;
    text-align: center;
    margin: 5px auto;}

.MVPname {
    font-size: 7.5vw;
}
    
.MVPplace {
    font-size: 5vw;
}
    
.MVPrecordBOX {
    text-decoration:underline;
    text-decoration-color:#000080;
}
    
.MVPrecordDefinition {
    font-size: 5vw;
}
    
.MVPrecordResult {
    font-size: 7.5vw;
    font-style: italic;
    color: #000080;
}

.ExcellentBox {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;}
.ExcellentPlayerBox {width: 50vw;}
.ExcellentPlayer {
    width: 50vw;
    height: 50vw;
    background-image: url(../img/Excellent.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;}
.ExcellentPlayer img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: circle(45%);}

.ExcellentPlayer2 {
    width: 50vw;
    height: 50vw;
    background-image: url(../img/Excellent.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;}
.ExcellentPlayer2 span {
    display: block;
    background-size: 150%;
    background-position: 50% 30%;
    height: 50vw;
    clip-path: circle(45%);}

.ExcellentNameBOX, .ExcellentRecordBOX  {
    width: 100%;
    font-size: 4vw;
    font-weight: bold;
    text-align: center;
    margin: 10px auto;}

.ExcellentName {
    font-size: 6.5vw;
}

.ExcellentPlace {
    font-size: 4vw;
}

.ExcellentRecordBOX {
    text-decoration: underline;
    text-decoration-color: #000080;
}

.ExcellentRecord {
    font-size: 4vw;
}

.ExcellentResult {
    font-size: 6.5vw;
    font-style: italic;
    color: #000080;
}

.OthersBox {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;}
.OthersItemB {
    width: 50%;
    background-color: #000080;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #fff;
    font-size: 3.8vw;
    padding: 10px;
    min-height: 70px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;}

    .ItemB_s_prize {
        font-size: 80%;
    }

    .ItemB_s_explanation {
        font-size: 55%;
    }

.OthersItemW {
    width: 50%;
    background-color: #fff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 3.8vw;
    padding: 10px;
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-weight: bold;}
.recipient_yosoya {
    /*font-size: 90%;*/
    font-size: 100%;
}
.recipient_place {
    /*font-size: 75%;*/
    font-size: 80%;
}
.recipient_record {
    font-style:italic;
    font-weight:bold;
    /*font-size: 90%;*/
    font-size: 100%;
    color:#000080;
    /*opacity: 70%;*/
    text-decoration:underline;
    margin-inline: 7.5px;
}

/*-------------------------------------------------
	++ comment
-------------------------------------------------*/
.comment-section {
    display: flex;
    align-items: flex-start;
    margin-top: 8vw;
    padding: 0 2vw;
}

.comment-char-area {
    flex-shrink: 0;
    margin-right: 4vw;
    width: 24vw;
    text-align: center;
}

.comment-char {
    padding: 1vw;
    border: 2px solid #000080;
    border-radius: 50%;
    background-color: #9acff1;
    display: inline-block;
}

.comment-char img {
    width: 20vw;
    height: 20vw;
    clip-path: circle(50%);
    object-fit: contain;
    display: block;
}

.char-name {
    margin-top: 2vw;
    font-weight: bold;
    font-size: 3.2vw;
    line-height: 1.3;
    color: #00003d;
}

.comment-bubble {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 4vw;
    width: 100%;
    border: 2px solid #000080;
    min-height: 30vw;
}

.comment-bubble::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -4.4vw;
    transform: translateY(-50%);
    border: 2.2vw solid transparent;
    border-right-color: #000080;
}

.comment-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -3.7vw;
    transform: translateY(-50%);
    border: 1.9vw solid transparent;
    border-right-color: #fff;
}

.comment-bubble p {
    margin: 0;
    font-size: 3.8vw;
    line-height: 1.6;
    color: #333;
}

/*-------------------------------------------------
	++ backno
-------------------------------------------------*/
.BackNoBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;}
.BackNoTtl {
    width: 100%;
    font-size: 5vw;
    margin-right: 0;
    text-align: center;
    margin-bottom: 0.5em;}
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("../img/arrowB.png");
    background-repeat: no-repeat;
    background-size: 24px auto;
    background-position: right 12px center;}

/*-------------------------------------------------
	++ WhatBox
-------------------------------------------------*/
.WhatBox {
    width: 100%;
    margin: -10vw auto 0 auto;
    background: url(../img/bg02.png) center top no-repeat;
    background-size: cover;
    background-color: #f2f2f2;
    padding-bottom: 100px;}
.WhatBox .Inner, .aInner{
    width: 100%;
    padding: 50vw 4vw 0 6vw;
    margin: 0 auto;}
.aInner{
    text-align: justify;
}
.WhatBox .logo {
    margin: 0 auto;
    width: 83px;}
.WhatBox .logo img {
    width: 100%;}
.WhatBox .Ttl {
    font-size: 6vw;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 15px auto 50px auto;}
.WhatBox p {
    color: #fff;
    text-align: left;
    font-size: 3.8vw;
    line-height: 1.8em;}
.aInner p{
    margin-block: 1.2rem;
    font-size: 110%;
}
.aInner p a {
    color: inherit;
    font-weight: bold;
    text-decoration: underline;
}

/*-------------------------------------------------
	++ FOOTER
-------------------------------------------------*/
#footer {
    background-color: #00003d;
    color: #FFF;
    padding: 5vw 0;
    text-align: center;}
#footer .logo {
    margin: 0px auto 20px auto;
    text-align: center;}
#footer .logo img {width: 50%;}
#footer .copy {
    margin: 0px;
    font-size: 2.5vw;}

#pageTop {
    position: fixed;
    bottom: 30vw;
    right: 3vw;
    width: 18vw;
    height: 18vw;}
#pageTop img {
	display:block;}