@charset "UTF-8";

@import url(base.css);

body {
    font-family:"メイリオ", sans-serif;
    background: #ece8db url(../img/grand/bg_gold.png) no-repeat center top;
    background-attachment: fixed;
    background-size: cover;}

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:-70px auto 0 auto;
	text-align: center;
	position:relative;
    width: 100%;
	min-width:100%;}

.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: 90vw;
    margin: 0 auto;
    background: url(../img/grand/bg01.png) center top no-repeat;
    background-size: cover;}
#header .Inner {
    width: 100%;
    padding: 7vw 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/grand/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: #9b3a00;
    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: 4.5vw;
    line-height: 10.1vw;
    background: url(../img/grand/title_bg.png) no-repeat center top;
    background-size: 100%;}


/*-------------------------------------------------
	++ others
-------------------------------------------------*/
.mainTtl {
    text-align: center;
    margin: 0 auto 2em auto;}
.mainTxt {
    text-align: center;
    margin: 0 auto;
    font-size: 4.5vw;
    font-weight: bold;
    line-height: 1.7em;
    font-style:italic;}

.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/grand/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: 200%;}
.MVPplace {font-size: 125%;}
.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/grand/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/grand/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: 175%;}
.ExcellentPlace {font-size: 125%;}
.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: #b28a1f;
    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: 0 auto 0 auto;
    padding: 0 2vw;}

.comment-section.mvp {
    margin: 2.5rem auto 0 auto;}

.comment-section.alternative {
    margin: 0 auto 7.5rem auto;}

.comment-char-area {
    flex-shrink: 0;
    margin-right: 4vw;
    width: 24vw;
    text-align: center;}
.comment-char {
    padding: 1vw;
    border: 2px solid #b28a1f;
    border-radius: 50%;
    background-color: #e8e2c5;
    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: #b28a1f;}
.comment-bubble {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 4vw;
    width: 100%;
    border: 2px solid #b28a1f;
    min-height: 30vw;}
.comment-bubble::before {
    content: '';
    position: absolute;
    top: 12vw;
    left: -4.4vw;
    transform: translateY(-50%);
    border: 2.2vw solid transparent;
    border-right-color: #b28a1f;}
.comment-bubble::after {
    content: '';
    position: absolute;
    top: 12vw;
    left: -3.7vw;
    transform: translateY(-50%);
    border: 2.2vw 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/grand/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/grand/bg02.png) center top no-repeat;
    background-size: cover;
    background-color: #ece8db;
    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;}

/*-------------------------------------------------
	++ MonthlyMVPBox
-------------------------------------------------*/
.MonthlyMVPBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 5% auto;
    width: 100%;}
.MonthlyMVPItem {
    width: 49%;
    border-radius: 15px;
    padding-bottom: 10px;
    background-color: #fff;
    margin-bottom: 10px;}
.MonthlyMVPItem h3 {
    color: #fff;
    text-align: center;
    margin: 0 auto;
    font-size: 4.5vw;
    font-weight: bold;
    line-height: 2em;
    background-color: #b79230;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;}
.MonthlyMVPImg {
    width: 150px;
    height: 150px;
    margin: 15px auto;
    text-align: center;
    background-image: url(../img/grand/m_MVP.png);
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    display: flex; /*追記*/
    align-items: flex-end; /*追記*/
    justify-content: center;/*追記*/}
.MonthlyMVPImg img {
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: circle(40%);}
.MonthlyExcellentImg {
    width: 150px;
    height: 150px;
    margin: 15px auto;
    text-align: center;
    background-image: url(../img/grand/m_Excellent.png);
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    display: flex; /*追記*/
    align-items: flex-end; /*追記*/
    justify-content: center;/*追記*/}
.MonthlyExcellentImg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: circle(45%);}
.MonthlyMVPItem p {
    padding: 0 15px;
    font-size: 165%;
    font-weight: bold;
    text-align: center;}
.MonthlyMVPItem p small {
    font-size: 75%;}    

/*-------------------------------------------------
	++ 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;}