@charset "UTF-8";

@import url(base.css);

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:-50px auto 0 auto;
	text-align: center;
	position:relative;
    width: 100%;
	min-width:1200px;
    background: #f2f2f2 url(../img/bg_gold.png) no-repeat center top;
    background-attachment: fixed;
    background-size: cover;}

.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/bg01.png) center top no-repeat;
    background-size: cover;
    background-color: #f2f2f2;}
#header .Inner {
    width: 1000px;
    padding: 3% 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/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: #000097;
    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/title_bg.png) no-repeat center top;}

/*-------------------------------------------------
	++ others
-------------------------------------------------*/
.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/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: 140%;
    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/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/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: 180%
}

.ExcellentPlace {
    font-size: 120%
}

.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: #000080;
    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: 40px auto 0 auto;
    justify-content: center;
    width: 800px;
}

.comment-char-area {
    flex-shrink: 0;
    margin-right: 25px;
    width: 116px; 
    text-align: center;
}

.comment-char {
    padding: 5px;
    border: 3px solid #000080;
    border-radius: 50%;
    background-color: #9acff1;
    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: #00003d;
}

.comment-bubble {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 650px;
    border: 2px solid #000080;
    min-height: 120px;
}

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

.comment-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    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/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/bg02.png) center top no-repeat;
    background-size: cover;
    background-color: #f2f2f2;
    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;
}

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