@charset "UTF-8";

/* Simplified Reset / Normalize */
* { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; }
ul, ol { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
button, input, select, textarea { font: inherit; }
/* End simplified reset */

a {
    text-decoration: none;
    color: var(--color-link);
}

:root {
    --color-text: #333;
    --color-border: #D8D8D8;
    --color-bg-dark: #333;
    --color-link: #333;
    --color-accent: #e60020;
    --space-container-x: 20px;
    --space-gap: 10px;
}

a:hover {
    text-decoration: underline;
}


/*
structure
--------------------------------------------------------------------------------------*/
body {
    padding: 0;
    margin: 0; 
    font-family:  "BIZ UDPGothic", "Noto Sans JP", Meiryo, "Yu Gothic", sans-serif; 
    font-size: 18px; 
    color: var(--color-text);
}

header {
    background: #fff;
    padding-top: 10px;
    margin: 0 auto;
    max-width: 900px;
}

div.spHeader {
    display: none;
}

.head {
    text-align: center;
}

#wrapper {
    margin: 0 auto;
    background-image: url(./images/back.png);
    background-repeat: repeat;
}

.contents {
    overflow: hidden;
    color: var(--color-text);
    line-height: 1.6;
}

.column {
    width: 900px;
    margin: 20px auto;
    padding: 20px var(--space-container-x) 0;
    background: #ffffff;
}

/* header
--------------------------------------------------------------------------------------*/
h1 {
    margin: 0;
    padding: 0
}

h1 img.pwlogo {
    width: 200px;
    height: auto;
    vertical-align: middle;
    margin: 10px auto;
}

/* footer
------------------*/

div#PCfooter {
    display: block;
    margin: 0 auto 30px;
    padding-top: 10px;
    text-align: center;
    font-size: 14px;
}

div#PCfooter .footer-copyright {
    font-size: 11px;
}

div#SPfooter {
    display: none;
}

/* section
--------------------------------------------*/
section {
    overflow: hidden;
    margin: 1vw auto 2.5vw;
}

h2.subTitle {
    position: relative;
    padding-left: 25px;
    color: var(--color-accent);
    margin: 1.8vw 0;
    line-height: 1.4;
}

h2.subTitle:before {
      position: absolute;
      content: '';
      bottom: -3px;
      left: 0;
      width: 0;
      height: 0;
      border: none;
      border-left: solid 15px transparent;
      border-bottom: solid 15px var(--color-accent);
}
h2.subTitle:after {
      position: absolute;
      content: '';
      bottom: -3px;
      left: 10px;
      width: 100%;
      border-bottom: solid 3px var(--color-accent);
}

section p {
    margin: 10px;
}

section p.place {
    font-weight: bold;
    font-size: 20px;
}

section .left {
    float: left;
    margin-right: 10px;
}

section .right {
    float: right;
    margin-top: 10px;
    margin-right:10px;
    width: 35%;
}

section div.part {
    position: relative;
    margin-bottom: 50px;
}

section div.part::after {
  position: absolute;
  content: "";
  background-color: #333333;
  width: 80%;
  height: 1px;
  bottom: -30px;
  left: 50%;  /*線のヨコ位置*/
  transform: translateX(-50%); /*線のヨコ位置*/
}

section ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-gap);
}

section ul.guest li {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% / 2) - 10.666px);     
}

section ul.lastYear li {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% / 3) - 10.666px);     
}

li .Photo img { 
    display: block; 
    width: 100%; 
    height: auto; 
    border-radius: 4px;
}

li p.name { 
    font-weight: bold;
    font-size: 22px;
    margin-bottom:20px;
}

li p.detail { 
    margin: 0 10px 5px;
}

p span.big {
    font-weight: bold;
    font-size: 22px;
}

p span.small {
    font-size:85%;
}

p.map {
    text-align: center;
    font-size: 80%;
}

section#timeTable p {
    text-align: center;
    font-size: 80%;
}
section#timeTable p a img {
    width: 80%;
}

div.sales {
  width: 100%;
  max-width: 1000px; 
  margin: 0 auto; 
  text-align: center; 
}

div.sales p.txt {
  text-align: left; 
}

div.sales p.photo {
  width: 700px;
  margin: 0 auto; 
}

div.sales p.photo img {
  width: 100%;
  height: auto;
  display: block;
}

p.organizer {
    text-align: center;
    margin: 20px 0;
}

/*
scroll
--------------------------------------------*/
.scrollTop {
    transition: all 0.4s ease-in-out 0s;
    opacity: 0.7;
    color: #fff;
    font-size: 14px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    text-align: center;
    z-index: 100 !important;
}

.scrollTop a {
    color: #fff;
    background: #666666;
    padding: 15px 8px;
    border-radius: 50%;
    height: 50px;
    line-height: 50px;
    width: 50px;
    text-decoration: none;
}
.scrollTop a:focus { outline: 2px solid #fff; outline-offset: 2px; }

.scrollTop a:hover {
    background: #999999;
}

/*  -----------------------------
for smart phone
-------------------------- */

@media screen and (max-width: 768px) {
    body {
        padding-top: 0;
    }

    header {
        display: none;
    }

    div.spHeader { 
        display: block; 
        background: #fff;
        padding-top: 10px;
        margin: 0 auto;
    }

    div.spHeader .spTop {
        text-align: center;
    }

    div.spHeader img.pwlogo {
        width: 35%;
        height: auto;
        vertical-align: middle;
        margin: 5vw auto 2.5vw;
    }

    #wrapper { 
        width: 100%; padding: 0; 
    }

    .contents { 
        margin: 3vw; padding: 3vw 0; 
    }

       h2.subTitle {
        margin: 6vw 0;
    }

    section .left {
        float: none;
    }

    section .right {
        float: none;
        width: 100%;
    }
    
    section ul.guest li,
    section ul.lastYear li {
       flex: 0 0 100%;    
    }

    .column {
        width: auto;
        margin: 0;
        padding: 2vw;
    }
    
    section#timeTable p a img {
    width: auto;
    }
    
    div.sales {
    max-width: 100%;
    }

    div.sales p.photo {
    width: 100%; 
    }

    div#PCfooter {
    display: none;
    }

    div#SPfooter {
        display: block;
    }

    footer.sp {
        padding: 10px 0;
        text-align: center;
        display: block;
        line-height: 1.2;
        font-size: 10px;
    }

    .scrollTop a {
    padding: 15px;
}

}