@charset "UTF-8";

/* ========================================
Reset & Base
======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  vertical-align: top;
}

html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
a, img, ul, ol, li,
table, tr, th, td,
article, aside, footer, header, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
}

article, aside, footer, header, nav, section {
  display: block;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: #000;
  cursor: pointer;
  transition: opacity .6s;
}

a:hover {
  opacity: .6;
}

input, button, textarea, select {
  border: none;
  outline: none;
  background: none;
  appearance: none;
}

/* ========================================
Utility
======================================== */
.sp-hide { display: block !important; }
.pc-hide { display: none !important; }

.float-left { float: left; }
.float-right { float: right; }

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

.weight-bold { font-weight: bold; }

/* ========================================
Layout
======================================== */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
  'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  color: #000;
}

.wrapper {
  width: clamp(1028px, 100%, 1280px);
  margin: 0 auto;
  overflow: hidden;
}

.inner-block {
  width: 1028px;
  margin: 0 auto;
  position: relative;
}

/* ========================================
Flex 共通
======================================== */
.logo-list,
.logo-list-wide,
.prayer-list,
.team-list,
.table-block,
.kit-block,
.venue-block,
.btn-list,
.guest-list {
  display: flex;
  flex-wrap: wrap;
}

/* ========================================
Animation
======================================== */
.fade {
  transform: translateY(30px);
  opacity: 0;
  transition: opacity 1s, transform 1s;
  transition-delay: .5s;
}

.fade.is-show {
  transform: translateY(0);
  opacity: 1;
}
header .header-logo,
.main-visual > .main-text,
.section-1 .sponsor-logo,
.section-4 .section-title,
.section-4 .guest-list > .guest-item.-comingsoon > .guest-label,
.section-4 .guest-list > .guest-item.-adjust > .guest-label,
.section-4 .prayer-list > .prayer-item.-comingsoon > .prayer-label,
.section-4 .prayer-list > .prayer-item.-adjust > .prayer-label,
.section-5 .section-title,
.section-6 .section-title,
.section-7 .section-title,
.section-7 .event-budge,
.section-7 .event-budge-sub,
.section-7 .section-7-1 .section-title-sub,
.section-7 .section-7-1 .section-event-sub,
.section-7 .section-7-1 .section-summary-bold,
.section-7 .section-7-1 .kit-block > .kit-item > .kit-item-photo > .kit-item-photo-caption,
.section-7 .section-7-2 .section-title-sub,
.section-7 .section-7-2 .section-text,
.section-8 .section-title,
.section-9 .section-title,
.section-12 .section-title,
.section-15 .section-title,
.section-10 .section-title,
.section-13 .section-title,
.section-14 .section-title,
.section-14 .tournament-block,
.footer-logo,
#gallery .section-title {
font: 0/0 a;
color: transparent;
}
header .header-pdfLink.-arw:before,
.section-2:before,
.section-2:after,
.section-4 .guest-list > .guest-item > .guest-item-description > .guest-name:before,
.section-4 .prayer-list > .prayer-item > .prayer-item-description > .prayer-name:before,
.section-6 .schedule-prize:before,
.section-7:before,
.section-7:after,
.section-7 .section-7-1 .btn-gray:before,
.section-8 > .venue-block > .venue-body > .btn-list > .btn-item > .btn-item-link.-arw:before {
position: absolute;
display: block;
content: '';
}

/* ========================================
Header
======================================== */
header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: #fff;
}
header #global-nav ul li.cup_youko {
padding: 0;
margin-left: 15px;
font-size: 22px;
font-weight: 500;
line-height: 1.766667;
position: relative;
display: block;
padding: 4px 10px 4px 10px;
text-align: center;
letter-spacing: .12em;
color: #100680;
background: #fff;
}
#global-nav ul li a {
padding: 0 15px;
vertical-align: middle;
color: #100680;
font-size: 22px;
font-weight: 500;
vertical-align: middle;
}
#global-nav ul li a.link-none{
pointer-events:none;
}
#global-nav ul li a.header-pdfLink {
font-size: 22px;
font-weight: 500;
line-height: 1.766667;
position: relative;
display: block;
padding: 4px 40px 4px 10px;
text-align: center;
letter-spacing: .12em;
color: #100680;
background: #fff;
}

header .header-pdfLink.-arw:before {
background: url(../images/youko_ico.svg) center center/contain no-repeat;
top: 50%;
right: 0;
display: block;
width: 25px;
height: 25px;
-webkit-transform: translate(-10px, -50%);
-ms-transform: translate(-10px, -50%);
transform: translate(-10px, -50%);
}

.header-logo {
position: absolute;
top: 24px;
left: 30px;
width: 183px;
height: 66px;
background: url(../images/img_cmn_logo.svg) center/contain no-repeat;
}

#top-head {
position: fixed;
width: clamp(1028px, 100%, 1280px);
height: 116px;
z-index: 999;
}

#top-head .inner {
width: 100%;
height: 116px;
display: flex;
position: relative;
background: #c83037;
}

#mobile-head {
position: absolute;
background: #fff;
width: 280px;
height: 116px;
}

#global-nav {
position: absolute;
top: 30px;
right: 30px;
}

#global-nav ul {
display: flex;
}
#global-nav ul li{
padding-top: 16px;
}
#global-nav ul li a {
padding: 0 15px;
font-size: 22px;
color: #fff;
}

/* ========================================
Nav Toggle
======================================== */
#nav-toggle {
  display: none;
  position: absolute;
  right: 12px;
  top: 5.5vw;
  width: 34px;
  height: 36px;
  z-index: 101;
}
#nav-toggle div {
position: relative;
}

#nav-toggle span {
position: absolute;
width: 100%;
height: 4px;
background: #fff;
transition: .35s;
}

#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 11px; }
#nav-toggle span:nth-child(3) { top: 22px; }

/* open animation */
.open #nav-toggle span:nth-child(1) {
transform: rotate(315deg);
top: 11px;
}
.open #nav-toggle span:nth-child(2) {
width: 0;
}
.open #nav-toggle span:nth-child(3) {
transform: rotate(-315deg);
top: 11px;
}




/* ========================================
Page Top
======================================== */
#page_top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 60px;
  height: 60px;
  background: #100680;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page_top__arrow {
  width: 10px;
  height: 10px;
  border-top: 3px solid #f0c81e;
  border-right: 3px solid #f0c81e;
  transform: rotate(-45deg);
}

/* ========================================
Contact
======================================== */
.sec-contact {
  background: #10069d;
}

.sec-contact .inner-block {
  padding: 50px 0;
}

.contact-title-block {
  background: #f8df00;
  padding: 20px;
  text-align: center;
}

.contact-title {
  font-size: 33px;
  color: #10069d;
}

.contact-link {
  display: block;
  margin-top: 20px;
  font-size: 54px;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
.sec-contact .inner-block{
    padding: 7.4850299401vw 0;
}
.contact-link{
    font-size: 4.1916167665vw;
    margin-top: 2.994011976vw;
}
}

/* ========================================
Footer
======================================== */
.footer-block .inner-block {
  padding: 50px 0;
  background: #fff;
}

.footer-logo {
  display: block;
  width: 342px;
  height: 125px;
  margin: 0 auto;
  background: url(../images/img_cmn_logo.svg) center center / contain no-repeat;
}

.footer-logo-note {
  margin-top: 50px;
  text-align: center;
  font-size: 13px;
}
@media screen and (max-width: 768px) {
.footer-block .inner-block{
    padding: 7.4850299401vw 0;
}
.footer-logo-note{
    font-size:2.994011976vw;
    margin-top: 4.4910179641vw;
}
.footer-logo {
    width: 78vw;
    height: 24vw;
}
}

/* ========================================
Fancybox
======================================== */
.fancybox-slide--image {
  padding: 4vw;
}

.fancybox-button {
  width: 88px;
  height: 88px;
}

.fancybox-close-small {
  top: -78px;
  right: -22px;
}

/* ========================================
Responsive
======================================== */
@media screen and (max-width: 768px) {

  .sp-hide { display: none !important; }
  .pc-hide { display: block !important; }

  .wrapper { width: 100%; }
  .inner-block { width: 88vw; }
  header .logo-area{
    margin-left: 2vw;
    display: table;
}
header .logo-area .b-main{
    display: contents;
}

header .header-logo {
    display: table-cell;
    width: 35.9281vw;
    height: 11.976vw;
    top: 0px;
    left: 0px;
    position: relative;
    margin: 0px auto 0px 0px;
}

header .header-pdfLink{
    font-size: 3.8vw;
    line-height: 2.366667;
    padding: 3.5vw 7vw 3.5vw 3vw;
    position: relative;
    text-align: center;
    letter-spacing: .12em;
    color: #100680;
    background: #fff;
}

header .header-pdfLink.-arw:before{
    width: 4vw;
    height: 4vw;
    -webkit-transform: translate(-2vw, -50%);
    -ms-transform: translate(-2vw, -50%);
    transform: translate(-2vw, -50%);
}
header .cup_youko {
    padding-top: 1.5vw;
    padding-left: 20vw;
    display: table-cell !important;

}
header #global-nav ul li.cup_youko{
    display: none !important;
}
#top-head {
    width: 100%;
    height: auto;
    background: #fff;
}

#top-head .inner {
    height: auto;
}

#mobile-head {
    width: 100%;
    height: auto;
    background: linear-gradient(to right, #fff 43%, #c83037 43%);
    padding: 3% 0;
    z-index: 999;
    top: 0;
    left: 0;
    position: relative;
}

#global-nav {
    position: absolute;
    top: -500px;
    right: 0;
    width: 100%;
    text-align: center;
    background: rgba(35, 24, 21, 0.8);
    padding: 10px 0px;
    transition: 0.5s ease-in-out;
}

.open #global-nav {
    transform: translateY(556px);
}

#global-nav ul {
    position: static;
    right: 0px;
    bottom: 0px;
    font-size: 14px;
    list-style: none;
    display: block;
}
#global-nav ul li{
    padding: 16px 0px 0px;
}

#global-nav ul li a {
    display: block;
    padding: 18px 0;
    line-height: 1;
}

#nav-toggle {
    display: block;
}

.contact-title { font-size: 4.2vw; }
.contact-link { font-size: 4.2vw; }


}