@charset "UTF-8";

@import url(base.css);

body {
    background: #ece8db url(../img/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;}

.sp {display: none !important;}
p {
    font-size: 100%;
    line-height: 1.4em;
    padding: 0;}

/*-------------------------------------------------
	++ container
-------------------------------------------------*/
#container {
	margin:-100px auto 0 auto;
	text-align: center;
	position:relative;
    width: 100%;
	min-width:1200px;}

.cInner {
	display:block;
	clear:both;
	width:1000px;
    padding: 40px 0;
	margin:0 auto;
	text-align: left;
    margin-inline: auto;}

/*-------------------------------------------------
	++ HEADER
-------------------------------------------------*/
#header {
    width: 100%;
    height: 750px;
    margin: 0 auto;
    background: url(../img/grand/bg01.png) center top no-repeat;
    background-size: cover;}
#header .Inner {
    width: 1000px;
    padding: 4% 0 0 0;
    margin: 0 auto;}
#header .logo {
    margin: 0 auto;
    width: 843px;}
#header .logo img {
    width: 100%;}
#header .Bt_awards {
    float: right;
    width: 260px;
    height: 50px;
    margin-top: 10px;
    background-image: url(../img/grand/bt.png);
    background-position: right 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: 120%;
    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: 621px;
    height: 97px;
    padding: 0;
	margin:0 auto 20px auto;
	text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 180%;
    line-height: 64px;
    background: url(../img/grand/title_bg.png) no-repeat center top;}

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

.MVPBox {
    width: 700px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;}
.MVPCrown {width: 120px;}
.MVPPlayerBox {width: 385px;}
.MVPPlayer {
    width: 385px;
    height: 364px;
    background-image: url(../img/grand/MVP.png);
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;}
.MVPPlayer img {
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: circle(40%);}

.MVPnameBOX, .MVPrecordBOX {
    width: 385px;
    font-size: 200%;
    font-weight: bold;
    text-align: center;
    margin: 10px auto;}

.MVPname {font-size: 160%;}
.MVPplace {font-size: 100%;}
.MVPrecordBOX {
    text-decoration:underline;
    text-decoration-color:#000080;}
.MVPrecordDefinition {font-size: 100%;}
.MVPrecordResult {
    font-size: 160%;
    font-style: italic;
    color: #000080;}

.ExcellentBox {
    width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;}
.ExcellentPlayerBox {
    width: 265px;
    margin: 25.5px;}
.ExcellentPlayer {
    width: 265px;
    height: 265px;
    background-image: url(../img/grand/Excellent.png);
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    display: flex; /*追記*/
    align-items: flex-end; /*追記*/
    justify-content: center;/*追記*/}
.ExcellentPlayer img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: circle(45%);}

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

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

.ExcellentName {font-size: 230%}
.ExcellentPlace {font-size: 170%}
.ExcellentRecordBOX {
    text-decoration: underline;
    text-decoration-color: #000080;}
.ExcellentRecord {font-size: 120%;}
.ExcellentResult {
    font-size: 180%;
    font-style: italic;
    color: #000080;}

.OthersBox {
    width: 800px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;}
.OthersItemB {
    width: 450px;
    background-color: #b28a1f;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #fff;
    font-size: 110%;
    padding: 10px 20px;
    min-height: 70px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;}
        
.OthersItemW {
    width: 350px;
    background-color: #fff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 110%;
    padding: 10px 20px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    font-weight: bold;}
.recipient_yosoya {font-size: 120%;}
.recipient_place {font-size: 75%;}
.recipient_record {
    font-style:italic;
    font-weight:bold;
    font-size: 140%;
    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;
    justify-content: center;
    width: 800px;}

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

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

.comment-char-area {
    flex-shrink: 0;
    margin-right: 25px;
    width: 116px; 
    text-align: center;}
.comment-char {
    padding: 5px;
    border: 3px solid #b28a1f;
    border-radius: 50%;
    background-color: #e8e2c5;
    display: inline-block;}
.comment-char img {
    width: 100px;
    height: 100px;
    clip-path: circle(55%);
    object-fit: contain;
    display: block;}
.char-name {
    margin-top: 8px;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.3;
    color: #b28a1f;}
.comment-bubble {
    position: relative;
    font-size: 130%;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 650px;
    border: 2px solid #b28a1f;
    min-height: 120px;}
.comment-bubble::before {
    content: '';
    position: absolute;
    top: 60px;
    left: -22px;
    transform: translateY(-50%);
    border: 11px solid transparent;
    border-right-color: #b28a1f;}
.comment-bubble::after {
    content: '';
    position: absolute;
    top: 60px;
    left: -17px;
    transform: translateY(-50%);
    border: 9px solid transparent;
    border-right-color: #fff;}
.comment-bubble p {
    margin: 0;
    font-size: 110%;
    line-height: 1.6;
    color: #333;}

/*-------------------------------------------------
	++ backno
-------------------------------------------------*/
.BackNoBox {
    display: flex;
    justify-content: center;
    align-items: center;}
.BackNoTtl {
    font-size: 110%;
    margin-right: 1em;}
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("../img/grand/arrowB.png");
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-position: right 12px center;}

/*-------------------------------------------------
	++ WhatBox
-------------------------------------------------*/
.WhatBox {
    width: 100%;
    margin: 0 auto;
    background: url(../img/grand/bg02.png) center top no-repeat;
    background-size: cover;
    background-color: #ece8db;
    padding-bottom: 85px;}
.WhatBox .Inner, .aInner{
    width: 1000px;
    padding: 15% 0 0 0;
    margin: 0 auto;}
.aInner{text-align: justify;}
.WhatBox .logo {
    margin: 0 auto;
    width: 83px;}
.WhatBox .logo img {
    width: 100%;}
.WhatBox .Ttl {
    font-size: 180%;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 15px auto 50px auto;}
.WhatBox p {
    color: #fff;
    text-align: left;
    font-size: 120%;
    line-height: 1.8em;}
.aInner p {
    margin-block: 25.5px;
    font-size: 155%;}
.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 20px auto;
    width: 90%;}
.MonthlyMVPItem {
    width: 280px;
    border-radius: 15px;
    padding-bottom: 10px;
    background-color: #fff;
    margin-bottom: 20px;}
.MonthlyMVPItem h3 {
    color: #fff;
    text-align: center;
    margin: 0 auto;
    font-size: 130%;
    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: 85%;}

/*-------------------------------------------------
	++ FOOTER
-------------------------------------------------*/
#footer {
    background-color: #00003d;
    color: #FFF;
    padding: 40px 0;
    text-align: center;}
#footer .logo {
    margin: 0px auto 20px auto;
    text-align: center;}
#footer .copy {
    margin: 0px;}

#pageTop {
	position: fixed;
	bottom:48px;
	right:48px;
	width:100px;
	height:100px;}
#pageTop img {
	display:block;}