@charset "utf-8";

html {
 font-family: sans-serif;
}
img {
  max-width:100%;
  height:auto;
}
h2 {
 color:#aaa;
 font-size:3rem;
 text-align:center;
}
ul {
 list-style:none;
}
a {
 transition:.2s;
}
a:hover {
 opacity:0.5;
}

/* top */
.top-image {
 background: url(../image/okayamazantei.png);
 min-height: 100vh;
 background-size: cover;
 background-repeat:no-repeat;
 min-width:100%;
 padding-top:100px;
}
.side-bar {
display:flex;
justify-content:flex-end;
align-items:center;
flex-direction:column;
}
.side-bar img {
width:60px;
}

/*ヘッダー*/
.header {
 width:100vw;
 background:rgba(255,255,255,0.5);
 position:absolute;
 height:100px;
 display:flex;
 padding:10px 100px;
 justify-content:space-between;
 align-items:center;
 box-sizing: border-box;
}

/*チケット*/
.tickets-button1 {
position:fixed;
bottom:20px;
left:60px;
}

.tickets-button2 {
position:fixed;
bottom:20px;
left:480px;
}

/*
.tickets-button1, .tickets-button2 {
background: rgba(255,255,255,0.5);
border-radius:10px;
}
*/

.tickets-button1 img, .tickets-button2 img {
width:400px;
display:block;
}

/* navigation */
.nav-menu {
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  list-style: none;
  text-decoration: none;
}

.nav-menu a {
  color: #000; /* カスタマイズしてください */
  display: block;
  margin:0 15px;
  text-decoration: none;
}

.nav-menu a:hover {
  transition: .2s;
  filter: opacity(0.6); /* カスタマイズしてください */
}

.nav-span {
display:inline-block;
padding:30px 80px;
border-radius:38px;
background:rgba(255,255,255,1);
font-size:16px;
line-height:1;
font-weight:bold;
}

.funding {
padding-top:100px;
padding-right:60px;
}

.p1-outline {
max-width:90%;
margin:0 auto;
padding-right:30px;
}
.p2-outline {
padding:2rem 30px 2rem 0;
}
.p1 {
display:flex;
margin:1rem auto 2rem;
justify-content:space-between;
}
.p1-p {
width:26%;
margin: 0 10px;
}
.p1-d {
width:48%;
}
.p1-h {
font-size:2rem;
color:brown;
font-weight:bold;
margin-bottom:2rem;
}
.p1-l {
font-size:1.4rem;
margin-bottom:1.6rem;
}
.p1 img {
width:100%;
}
.p1 div {
padding:0 2rem;
}
.p2-p {
width:40%;
}
.p3 div {
width:70%;
}
.p5 {
background:#fff0f5;
max-width:80%;
margin:0 auto;
padding:2rem;
padding-bottom:1rem;
border-radius:20px;
margin-bottom:2rem;
}
.p6-p {
width:40%;
}
.p6-d {
width:60%;
}
.p6-button {
width:60%;
margin:0 auto;
}
.p6-outline {
max-width:80%;
margin:0 auto;
}
.fund-flex {
max-width:90%;
display:flex;
margin:0 auto;
}
.fund-flex-content {
width:calc(25% - 10px);
background:#eee;
margin:5px;
padding:1rem;
border-radius:10px;
display:flex;
flex-direction:column;
justify-content:space-between;
}

/* PCでは非表示にしておく */
.nav_toggle {
  display: none;
}

.tickets2 {
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}
.is-hidden {
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}


.social-list {
  display:flex;
  justify-content:center;
}
.social-list li {
  margin:1rem 1rem;
}
.social-list img {
  width:40px;
}
.social-manami {
  justify-content:left;
}
footer {
  color:#555;
}
footer a {
  text-decoration:none;
  color:#555;
  transition: .2s;
}

/* スマホサイズで見た場合のスタイル */
@media screen and (max-width: 880px) {
.header {
 padding:10px 20px;
 position:fixed;
}
.nav-span {
padding:15px;
border-radius:10px;
background-color: rgba(255,255,255,0.2);
}
/* ハンバーガーのマーク */
  .nav_toggle {
cursor: pointer;
    display: block;
    position: relative;
    width: 1.75rem;
    height: 1.5rem;
    z-index: 2;
  }
  .nav_toggle i {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    transition: transform 0.5s, opacity 0.5s;
  }
  .nav_toggle i:nth-child(1) {
    top: 0;
  }
  .nav_toggle i:nth-child(2) {
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .nav_toggle i:nth-child(3) {
    bottom: 0;
  }

  /* クリックされた後のハンバーガーのマーク */
  .nav_toggle.show i:nth-child(1) {
    background-color: #333;
    transform: translateY(10px) rotate(-45deg);
  }
  .nav_toggle.show i:nth-child(2) {
    background-color: #333;
    opacity: 0;
  }
  .nav_toggle.show i:nth-child(3) {
    background-color: #333;
    transform: translateY(-12px) rotate(45deg);
  }

  /* クリックで表示されるメニュー：クリックされる前 */
  .nav {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s;
    /*transition: opacity 0.5s, visibility 0.5s;*/
    background-color: #fff;
    z-index: 1;
  }
  .nav_menu_li {
    margin-bottom: 30px;
  }
  .nav_menu_li a {
    color: #ee6557;
    text-decoration: none;
  }

  /* クリックで表示されるメニュー：クリックされた後 */
  .nav-menu {
    flex-direction:column;
  }
  .nav-menu li {
    text-align:center;
    padding: 2rem 0;
  }
  .nav.show {
    opacity: 1;
    visibility: visible;
  }
  .tickets {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    display:flex;
  }
  .tickets-button1, .tickets-button2 {
    position:static;
    width:50%;
    bottom:auto;
    left:auto;
    padding:5px;
background: none;
  }
  .tickets-button1 img, .tickets-button2 img {
    width:100%;
  }
  .side-bar {
  display:none;
  }
.tickets2 {
  visibility: visible;
  opacity: 1;
}
.is-hidden {
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}
.funding {
padding-top:60px;
padding-right:0;
}
}


/*スマホデザイン*/
@media screen and (max-width: 768px) {

h1 {
  font-size:1.2rem;
}
h2 {
  font-size:1.6rem;
}
.header {
height:60px;
}
.top-image {
 background: url(../image/okayamazantei2.png);
 background-position: center center;
 background-size:cover;
 padding-top:60px;
}
.wrapper {
margin:0 auto;
padding-right:0;
padding-top:1rem;
}
.top-sent1 {
width:100%;
padding:20px;
}
.top-sent2 {
width:100%;
font-size:1rem;
margin-top:10px;
}
.top-sent3 {
font-size:1rem;
}
.p1 {
width:100%;
flex-wrap:wrap;
justify-content:center;
}
.p1-p {
min-width: calc(50% - 30px);
}
.p1-h {
font-size:1.5rem;
}
.p1-l {
font-size: 1rem;
}
.p1 div {
min-width:100%;
margin:30px;
}
.p3 img {
width:100%;
}
.social-manami {
  justify-content:center;
}
.p1-outline {
  max-width:100%;
  padding:0;
}
.p2-outline {
padding:2rem 0;
}
.p2 {
flex-direction:column-reverse;
}
.p2 div, .p4 div {
margin:0;
}
.p2-p {
width:100%;
padding:0 1rem;
margin-bottom:1rem;
}
.p1-d {
width:100%;
}
.p5 {
max-width:90%;
padding:1rem;
}
.p5-h {
margin-top:1rem;
}
.p6-p, .p6-button {
width:100%;
margin:0;
}
.p6-p {
padding:2rem;
padding-top:0;
}
.p6-d {
width:100%;
}
.p6-outline {
max-width:100%;
}
.p6-d div {
margin:0;
}
.fund-flex {
flex-direction:column;
max-width:95%;
}
.fund-flex-content {
width:100%;
}
}