@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');
@import url("https://use.typekit.net/jls7vzu.css");
@import url('https://fonts.googleapis.com/css2?family=Graduate&family=M+PLUS+1+Code:wght@400;500&family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap');


html { scroll-behavior: smooth; }
body { font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

p { font-size: 18px; letter-spacing: 0.05em; }
p.bg01 { background: linear-gradient(to right, #005151 0%, #003d3b 30%, #003d3b 70%, #005151 100%); }
p.bg02 { background: linear-gradient(to right, #fff 0%, #005151 30%, #005151 70%, #fff 100%); }

.ruby { font-family: objektiv-mk2, sans-serif; font-size: 28px; font-weight: 700; color: #bdad75; letter-spacing: 0.15em; margin: 0; padding: 0; }

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }

.white { color: white; }
.black { color: #333; }
.green { color: #1e6664; }
.red { color: #DC0451; }
.gold { color: #bdad75; }
.gold02 { color: #e8e0aa; }
.point { color: red; font-size: 120%; font-weight: 600; }

.square {
  display: inline-block;
  padding: 0 8px;
  background:#bdad75;
}

.f10 {font-size: 10px;}
.f11 {font-size: 11px;}
.f12 {font-size: 12px;}
.f14 {font-size: 14px;}
.f16 {font-size: 16px;}
.f18 {font-size: 18px;}
.f20 {font-size: 20px;}
.f22 {font-size: 22px;}
.f24 {font-size: 24px;}
.f26 {font-size: 26px;}
.f28 {font-size: 28px;}
.f30 {font-size: 30px;}
.f32 {font-size: 32px;}
.f34 {font-size: 34px;}
.f36 {font-size: 36px;}
.f38 {font-size: 38px;}
.f40 {font-size: 40px;}
.f44 {font-size: 44px;}
.f46 {font-size: 46px;}

.p0 {padding: 0;}
.p10 {padding: 5px 0;}
.p20 {padding: 10px 0;}
.p30 {padding: 15px 0;}
.p40 {padding: 20px 0;}
.p50 {padding: 25px 0;}
.p60 {padding: 30px 0;}
.p70 {padding: 35px 0;}
.p80 {padding: 40px 0;}
.p100 {padding: 50px 0;}

.m0 {margin: 0;}
.m20 {margin: 0 20px;}
.m30 {margin: 0 30px;}
.m40 {margin: 0 40px;}
.m50 {margin: 0 50px;}
.m60 {margin: 0 60px;}
.m70 {margin: 0 70px;}
.m80 {margin: 0 80px;}
.m90 {margin: 0 90px;}
.m100 {margin: 0 100px;}
.m120 {margin: 0 120px;}
.m140 {margin: 0 140px;}
.m160 {margin: 0 160px;}
.m180 {margin: 0 180px;}
.m200 {margin: 0 200px;}
.m220 {margin: 0 220px;}
.m240 {margin: 0 240px;}

.w100 {font-weight: 100}
.w200 {font-weight: 200}
.w300 {font-weight: 300}
.w400 {font-weight: 400}
.w500 {font-weight: 500}
.w600 {font-weight: 600}
.w700 {font-weight: 700}
.w800 {font-weight: 800}
.w900 {font-weight: 800}

.lh10 {line-height: 1.0;}
.lh11 {line-height: 1.1;}
.lh12 {line-height: 1.2;}
.lh13 {line-height: 1.3;}
.lh14 {line-height: 1.4;}
.lh15 {line-height: 1.5;}
.lh16 {line-height: 1.6;}
.lh17 {line-height: 1.7;}
.lh18 {line-height: 1.8;}
.lh19 {line-height: 1.9;}
.lh20 {line-height: 2.0;}



a.website {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
a.website::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #06c;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
a.website:link {
    color: #06c;
    letter-spacing: inherit;
}
a.website:hover{
  text-decoration: none;
}

a.website:hover::after {
  color: #06c;
  transform: scale(1, 1);
}

main { background: url(../img/supporter/uni2026/background_pattern.png) repeat; }

main section { padding: 50px 0; }

main section div.contents {

}

#mainvisual img {

}

#about { 
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #000;
    border-left: 8px solid #988a5a;
    border-right: 8px solid #988a5a; 
}

#select {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
    border-left: 8px solid #988a5a;
    border-right: 8px solid #988a5a; 
}
#select ul {
    display: flex;
}
#select ul li {
    list-style: none;   
}
#select ul li img {
    width: 100%;
    border: solid;
    border-width: 6px 3px 6px 3px;  
    border-color: #b9ad75;
}

#fp1st {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
    background: #005252;
    color: #ccc;
    position: relative;
    z-index: 0;
    border-left: 8px solid #988a5a;
    border-right: 8px solid #988a5a; 
}
    
#fp2nd {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
    background-color: #fff;
    color: #ccc;
    position: relative;
    z-index: 0;
    border-left: 8px solid #988a5a;
    border-right: 8px solid #988a5a; 
}

#gk1st {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
    background: #ef3977;
    color: #ccc;
    position: relative;
    z-index: 0;
    border-left: 8px solid #988a5a;
    border-right: 8px solid #988a5a; 
}

#gk2nd {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
    background: #413D85;
    color: #ccc;
    position: relative;
    z-index: 0;
    border-left: 8px solid #988a5a;
    border-right: 8px solid #988a5a; 
}
    
#sponsor {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0 0 40px 0;
    background: #000;
    color: #ccc;
    position: relative;
    z-index: 0;
    border-left: 8px solid #988a5a;
    border-right: 8px solid #988a5a; 
}

#summary { 
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #005252;
    border-left: 8px solid #988a5a;
    border-right: 8px solid #988a5a; 
}

#summary01 { 
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #001D1C;
    border-top: 2px solid #bdad75;
    border-bottom: 2px solid #bdad75;
    border-left: 8px solid #988a5a;
    border-right: 8px solid #988a5a; 
}

#authentic {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #000;
    border-left: 8px solid #988a5a;
    border-right: 8px solid #988a5a; 
}
   
#replica {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    padding: 0 0 40px 0;
    background:#fff;
    border-left: 8px solid #988a5a;
    border-right: 8px solid #988a5a; 
}
    

img { width: 100%; }
img.player { width: 440px; margin: 10px 10px;}
img.design { width: 960px; margin: 40px 0; }
img.uniform { width: 440px; margin: 10px 10px;}
img.torso { width: 360px; margin: 20px 0;}
img.authen { width: 680px; margin: 10px 20px;}
img.replica { width: 580px; margin: 10px 20px;}
img.size { width: 40vw; }
img.sponsor { width: 540px; margin: 10px 0;}

p.sponsor { margin: 0; padding: 0; }



.button a {
    font-family: Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
    font-size: 32px;
    border-radius: 3px;
    display: table;
    margin: 0 auto;
    padding: 1em 2em;
    width: 90%;
    min-width: 150px;
    color: white;
    font-weight: 800;
    text-align: center;
    background: #bdad75; 
}

.button a:hover {
  text-decoration: none;
  background-color: #e4dcc2;
}

.button01 a {
    font-size:12px;
    border-radius: 40px;
    border: 2px solid var(--SCS-ProudGold-02-Main, #B9AD75);
    background: var(--SCS-ProudSilver-05-Black, #000);
}

.button01 a:hover {
  text-decoration: none;
  background-color: #B9AD75;
}

.button02 {
    width: 480px;
}
.button02 a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background: #005151;
  padding: 14px 24px;
  border: 2px solid #fff;
  border-radius: 6px;
  position: relative;
  z-index: 1;
  transition: .3s;
}
.button02 a::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #008383;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease .3s;
} 
.button02 a:hover {
  color: #fff;
}
.button02 a:hover::before{
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
.footer-shopbutton {
    position: fixed;
    bottom: 1%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 1100;
}

/* TABLET */
@media screen and (max-width: 1024px) {

}



/* SP */
@media screen and (max-width: 749px) {

    h1 { text-align: center; font-size: 40px;  }
    h2 { text-align: center; font-size: 30px; font-weight: 800; }
    p { font-size: 16px; letter-spacing: 0.05em; margin: 0; padding: 0; line-height: 1.5; }

    .ruby { font-size: 16px; font-weight: 700; letter-spacing: 0.08em; }

    #mainvisual01 img {
        width: 100%;
        max-width: 540px;
        height: 540px;
        object-fit: cover;
    }


#about { 
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #000;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
}

#select {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
}
#select ul {
    display: flex;
}
#select ul li {
    list-style: none;   
}
#select ul li img {
    width: 100%;
    border: solid;
    border-width: 6px 3px 6px 3px;  
    border-color: #b9ad75;
}

#fp1st {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    padding: 40px 0 0 0;
    background: #005151;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
}
    
#fp2nd {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0 0 0 0;
    background-color: #fff;
    color: #ccc;
    position: relative;
    z-index: 0;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
}

#gk1st {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0 0 0 0;
    background: #f03a77;
    color: #ccc;
    position: relative;
    z-index: 0;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
}

#gk2nd {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0 0 0 0;
    background: #413e85;
    color: #ccc;
    position: relative;
    z-index: 0;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
}

#sponsor {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 0 0 40px 0;
    background-color: #000;
    color: #ccc;
    position: relative;
    z-index: 0;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff; 
}

#summary { 
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #005151;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
}

#summary01 { 
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #001D1C;
    border-top: 2px solid #bdad75;
    border-bottom: 2px solid #bdad75;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
}
    
#authentic {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background: #000;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
}
   
#replica {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    padding: 0 0 40px 0;
    background:#fff;
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
}

header .head_box h1 img {
    position: relative;
    right: 51px;
    z-index: 20;
}

.button02 {
    width: 300px;
}
    
.button02 a {
  color: #fff;
  font-size: 12px;
}


}