@charset "utf-8";

/*
============================ 1ANNIVERSARY CSS ============================
*/

/* ローディング画面 */
#loading {
  background: #B292C3;
  width: 100%;
  height: 100%;
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
}
#logo {
  display: block;
  width: 30%;
  height: auto;
  position: fixed;
  top: calc(45% - 50px/2);
  left: calc(50% - 30%/2);
}
#logo img {
  width: 100%;
  height: auto;
}
.loaded {
  opacity: 0;
  visibility: hidden;
}
header,
.header,
article,
footer {
  visibility: hidden;
}


body {
  font-family: 'Sawarabi Gothic', sans-serif;
}

.tama {
  background: url("../img/ball_bk.png") 0 20px repeat;
  background-size: 700px auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.posiR {
  position: relative;
}
.posiRelative {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  z-index: 1000000;
}

#kv {
  display: block;
  background: #B292C3 url("../img/wave01.png") 0 bottom repeat-x;
  padding: 20px 0 0;
  width: 100%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  z-index: 1;
}
#kv > img {
  position: relative;
  z-index: 3;
  width: 1200px;
}

svg {
  display: block;
  height: 170px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
}

#kvTit01 {
  position: absolute;
  width: 484px;
  top: 130px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 3;
}
#kvTit02 {
  position: absolute;
  width: 345px;
  top: 275px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 3;
}
#kvTit03 {
  position: absolute;
  width: 307px;
  top: 350px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 3;
}
.read {
  color: #8C5CA6;
  background: #fff;
  width: 860px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 auto 40px;
  position: relative;
  z-index: 3;
}
.bg01 {
  background: #B292C3 url("../img/wave02.png") 0 bottom repeat-x;
  padding: 0 0 200px;
  position: relative;
  z-index: 1;
}
.bg02 {
  background: #FDE104 url("../img/wave03.png") 0 bottom repeat-x;
  padding: 100px 0 220px;
  position: relative;
  z-index: 1;
}
.bg03 {
  background: #CB1A18 url("../img/wave04.png") 0 bottom repeat-x;
  padding: 120px 0 180px;
  position: relative;
  z-index: 1;
}
.bg04 {
  background: #5DB531 url("../img/wave01.png") 0 bottom repeat-x;
  padding: 140px 0 200px;
  position: relative;
  z-index: 1;
  margin: 0 auto 60px;
}
.bg05 {
  background: #B292C3 url("../img/wave05.png") 0 0 repeat-x;
  padding: 20px 0 0;
  margin: 0 0 60px;
  position: relative;
  z-index: 1;
}
.bg06 {
  background: url("../img/bg01.png") 0 0 repeat;
  padding: 15px;
  margin: 0 auto 60px;
  border: 1px solid #000;
  border-radius: 20px;
  width: 850px;
  position: relative;
  z-index: 3;
}
.bg07 {
  background: url("../img/gift_bg.png") 0 0 repeat;
  padding: 15px;
  margin: 0 auto 60px;
  border: 1px solid #000;
  border-radius: 20px;
  width: 850px;
  position: relative;
  z-index: 3;
}
.bg08 {
  background: url("../img/event_bg02.png") 0 0 repeat-y;
  background-size: 100% auto;
  padding: 10px 80px;
  margin: 0 auto;
  width: 850px;
  position: relative;
  z-index: 3;
}
.boxTop {
  width: 850px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.boxBottom {
  width: 850px;
  margin: 0 auto 60px;
  position: relative;
  z-index: 3;
}
.bgW {
  background: #fff;
  padding: 40px 50px;
  width: 100%;
  border: 1px solid #000;
  border-radius: 20px;
  position: relative;
  z-index: 1;
}
.tit01 {
  width: 731px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit02 {
  width: 721px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit03 {
  width: 682px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit04 {
  width: 666px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit05 {
  width: 700px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit06 {
  width: 674px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit08 {
  width: 547px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit09 {
  width: 498px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit10 {
  width: 522px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit11 {
  width: 814px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit12 {
  width: 517px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit13 {
  width: 646px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit14 {
  width: 590px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit15 {
  width: 525px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit16 {
  width: 522px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit17 {
  width: 567px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit18 {
  width: 660px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.tit19 {
  width: 314px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}
.read02 {
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2;
  margin: 0 auto 40px;
  position: relative;
  z-index: 3;
}
dl.ribon {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 0;
  margin: 0 auto 30px;
  justify-content: flex-start; /* 水平方向の揃え */
  align-items: stretch; /* 垂直方向の揃え */
  position: relative;
  z-index: 3;
}
table.ribon {
  padding: 0;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
  width: auto;
}
#anchor01 .ribon tbody,
#anchor01 .ribon tbody tr {
  display: flex;
  justify-content: space-between; /* 水平方向の揃え */
  align-items: flex-start;
}
#anchor01 .ribon tr:first-child td {
  padding-right: 30px;
}
#anchor04 .ribon {
  margin: 0 0 10px;
}
#anchor04 .ribon dd,
#anchor04 .ribon td {
  width: 260px;
}
.ribon th {
  display: inline-block;
  white-space: nowrap;
}
.ribon dt,
.ribon th {
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  margin: 5px 15px 5px 0;
  position: relative;
  font-size: 1.7rem;
  font-weight: bold;
  letter-spacing: inherit;
  padding: 7px;
}
.ribon dt:before,
.ribon th:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 10px 0 0;
  position: absolute;
  right: -10px;
  top: 0;
}
.ribon dt:after,
.ribon th:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 0 10px;
  position: absolute;
  right: -10px;
  bottom: 0;
}
.ribon.red dt,
.ribon.red th {
  background: #E71A18;
}
.ribon.red dt:before,
.ribon.red th:before {
  border-color: #E71A18 transparent transparent transparent;
}
.ribon.red dt:after,
.ribon.red th:after {
  border-color: transparent transparent transparent #E71A18;
}
#home01 .ribon.blue,
#home02 .ribon.blue,
#anchor03 .ribon.blue {
  margin: 0 0 10px;
}
#gift04 .ribon,
#gift05 .ribon {
  margin: 0 0 10px;
}
#home03 .ribon.blue {
  margin: 0 auto 10px;
}
#home03 .ribon.blue dd:nth-of-type(1),
#home03 .ribon.blue td:nth-of-type(1) {
  margin-right: 10px;
}
.ribon.blue dt,
.ribon.blue th {
  background: #1A68B7;
  display: inline-block;
  height: 32px;
}
.ribon dt.short,
.ribon th.short {
  letter-spacing: .3em;
  padding: 7px 0 7px 7px;
}
.ribon.blue dt:before,
.ribon.blue th:before {
  border-color: #1A68B7 transparent transparent transparent;
}
.ribon.blue dt:after,
.ribon.blue th:after {
  border-color: transparent transparent transparent #1A68B7;
}
.ribon dd,
.ribon td {
  color: #000;
  font-size: 2.0rem;
  line-height: 1.4;
  padding: 6px;
  font-weight: bold;
  text-align: left;
}
#gift04 .ribon dd,
#gift05 .ribon dd,
#gift04 .ribon td,
#gift05 .ribon td {
  width: 200px;
}
.img01 {
  width: 550px;
  margin: 0 auto 100px;
  position: relative;
  z-index: 3;
}
.profileBox {
  display: flex;
  background: url("../img/profile_bg.png") 0 0 repeat-y;
  background-size: 100% auto;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 20px 50px 0;
  margin: 0 auto;
  width: 815px;
  justify-content: space-between; /* 水平方向の揃え */
  align-items: stretch; /* 垂直方向の揃え */
  position: relative;
  z-index: 3;
}
.profileTop,
.profileBottom {
  width: 815px;
  margin: 0 auto;
  line-height: 1;
  font-size: 1;
}
.profileBottom img {
  vertical-align: top;
}

.profileBox div.profileImg {
  width: 160px;
  margin-right: 20px;
}
.profileName {
  width: 530px;
}
.profileName img {
  width: 192px;
  margin: 0 0 10px;
}
#profileTxt {
  color: #fff;
}
.leftCen {
  text-align: left;
  font-size: 1.6rem;
}
.taishoBox {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 0;
  margin: 0 auto 20px;
  width: 590px;
}
.taishoBox .th {
  background: #1A68B7;
  padding: 7px;
  line-height: 1;
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.taishoBox .td {
  display: flex;
  border-right: 1px solid #1A68B7;
  border-bottom: 1px solid #1A68B7;
  border-left: 1px solid #1A68B7;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 10px 20px;
  margin: 0 auto;
  justify-content: flex-start; /* 水平方向の揃え */
  align-items: stretch; /* 垂直方向の揃え */
  align-items: center;
}
.taishoBox .sTh {
  color: #1A68B7;
  background: #C0D5EB;
  padding: 10px;
  margin: 0 5px 5px 0;
  white-space: nowrap;
  width: 80px;
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
}
.taishoBox .sTd {
  padding: 10px;
  margin: 0 0 5px;
  width: 460px;
  font-size: 1.6rem;
  line-height: 1.4;
}
.btnSoon {
  display: block;
  width: 320px;
  color: #fff !important;
	background: #000;
  padding: 8px 20px;
  margin: 0 auto;
  line-height: 1.4;
  text-align: center;
  position: relative;
  font-size: 1.6rem;
  z-index: 1;
}

.coution {
  color: #000;
  font-size: 1.4rem;
  line-height: 1.4;
}

#pop02 {
  position: absolute;
  top: -260px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 570px;
  z-index: 3;
}
#pop03 {
  position: absolute;
  top: -370px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 596px;
  z-index: 3;
}
#pop04 {
  position: absolute;
  top: -200px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 634px;
  z-index: 3;
}
#pop05 {
  position: absolute;
  bottom: -80px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1259px;
  z-index: 3;
}

#pop07 {
  display: none;
}
#pop08 {
  position: absolute;
  top: 600px;
  left: 50px;
  width: 311px;
  z-index: 4;
}
#pop09 {
  position: absolute;
  top: 480px;
  right: 60px;
  width: 287px;
  z-index: 4;
}
#pop10 {
  position: absolute;
  bottom: 480px;
  right: 240px;
  width: 181px;
  z-index: 4;
}
#pop11 {
  position: absolute;
  top: 0px;
  right: -140px;
  width: 83px;
  z-index: 4;
}
#pop12 {
  position: absolute;
  top: 130px;
  left: -200px;
  width: 201px;
  z-index: 4;
  transform: rotate(-45deg);
}
#pop13 {
  position: absolute;
  top: 120px;
  left: -140px;
  width: 132px;
  z-index: 4;
}
#pop14 {
  position: absolute;
  top: 300px;
  right: -140px;
  width: 108px;
  z-index: 4;
}
#pop15 {
  position: absolute;
  top: 80px;
  right: -160px;
  width: 147px;
  z-index: 4;
}
#pop16 {
  position: absolute;
  top: 580px;
  right: -140px;
  width: 90px;
  z-index: 4;
}
#pop17 {
  position: absolute;
  top: 160px;
  left: -200px;
  width: 180px;
  z-index: 4;
}
#pop18 {
  position: absolute;
  top: 280px;
  right: -200px;
  width: 160px;
  z-index: 4;
}
#pop19 {
  position: absolute;
  top: 100px;
  left: -140px;
  width: 108px;
  z-index: 4;
}
#pop20 {
  position: absolute;
  top: 220px;
  right: -160px;
  width: 149px;
  z-index: 4;
}

#pop21 {
  position: absolute;
  top: 140px;
  left: -180px;
  width: 190px;
  z-index: 4;
}
#pop22 {
  position: absolute;
  bottom: 20px;
  right: -190px;
  width: 164px;
  z-index: 4;
  transform: rotate(-25deg);
}

#pop23 {
  position: absolute;
  top: 30px;
  left: -180px;
  width: 180px;
  z-index: 4;
}
#pop24 {
  position: absolute;
  top: 250px;
  right: -180px;
  width: 167px;
  z-index: 4;
}

#pop25 {
  position: absolute;
  top: 40px;
  left: -160px;
  width: 150px;
  z-index: 4;
}
#pop26 {
  position: absolute;
  top: 360px;
  right: -200px;
  width: 185px;
  z-index: 4;
}

#pop27 {
  position: absolute;
  top: 160px;
  left: -140px;
  width: 128px;
  z-index: 4;
}
#pop28 {
  position: absolute;
  top: 400px;
  right: -140px;
  width: 165px;
  z-index: 4;
}

#pop29 {
  position: absolute;
  top: 140px;
  left: -140px;
  width: 131px;
  z-index: 4;
}
#pop30 {
  position: absolute;
  top: 390px;
  right: -140px;
  width: 104px;
  z-index: 4;
}
#pop31 {
  display: none;
}
#pop32 {
  position: absolute;
  top: -20px;
  right: -180px;
  width: 137px;
  z-index: 4;
}

/* IE11 */
@media all and (-ms-high-contrast: none) {
  svg {
    display: none;
  }
  body.fixed {
    width: 100%;
    height: 100%;
    margin: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }
}