@charset "UTF-8";
/* css pc ============================================================*/
html, body {
  font-size: 10px;
  height: 100%;
}
a, a:hover {
  text-decoration: none;
  color: #000;
}
a {
  transition: 0.5s;
}
a:hover {
  opacity: 0.3;
}
img {
  height: auto;
  vertical-align: bottom;
}
h1, h2, h3, h4, h5, h6, p {
  padding: 0;
  margin: 0;
}
.contents {
  padding: 0 0 15rem 0;
  position: relative;
  /*.sec01*/
  /*.sec02*/
  /*.sec03*/
}
.contents .pc {
  display: block;
}
.contents .sp {
  display: none;
}
.contents .sec__inner {
  width: 119rem;
  margin: 0 auto;
}
.contents .sec__lead {
  margin: 3rem auto 0;
  font: 400 1.6rem/1.8 "Noto Sans JP", sans-serif;
}

.contents .sec__flow {
  width:90%;
  margin: 3rem auto 0;
}
.contents .sec__txt {
  width:90%;
  margin: 5rem auto 0;
  display: inline-block;
  text-align: left;
}
.contents .sec__txt__title {
  display: block;
  text-align: left;
}
.contents .sec__txt__title strong {
  display: inline-block;
  font: 700 2rem/1 "Noto Sans JP", sans-serif;
  color: #c1ab0a;
  position: relative;
  margin: 0 auto 0 1.2em;
}
.contents .sec__txt__title strong::before {
  font: 700 1em/1 'Material Symbols Outlined';
  content: 'featured_seasonal_and_gifts';
  position: absolute;
  top: 0;
  left: -1.2em;
}

.contents .sec__txt__inner {
  display: flex;
  flex-flow: wrap;
  margin: 1rem 0 0;
}


.contents .sec__txt__column:nth-child(odd) {
  width:20%;
  background: #241754;
  color: #FFF;
  font: 400 1.6rem/1.6 "Noto Sans JP", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contents .sec__txt__column:nth-child(even) {
  width:80%;
  font: 400 1.6rem/1.6 "Noto Sans JP", sans-serif;
  padding:0 0 0 0.5em;
}

.contents .sec__txt__column:nth-child(n+3){
  margin: 0.5em 0 0;
}


.contents .sec__txt p {
  font: 400 1.8rem/2 "Noto Sans JP", sans-serif;
  display: block;
}
.contents .sec__txt p:nth-of-type(1) {
  margin: 0.5em 0 0;
}
.contents .sec__txt p span {
  background: #241754;
  color: #FFF;
  font: 400 1.8rem/2 "Noto Sans JP", sans-serif;
  padding: 0.2em 0.5em;
  margin: 0 0.5em 0 0;
}




.contents .sec__btn {
  width:90%;
  margin: 5rem auto 0;
}
.contents .sec__btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  width: auto;
  height: 10rem;
  margin: 0 auto;
  background: #c1ab0a;
  border-radius: 1rem;
}
.contents .sec__btn a strong {
  display: block;
  font: 500 2.6rem/1 "Noto Sans JP", sans-serif;
  color: #FFF;
}
.contents .tab__content__column .sec__btn a strong {
  position: relative;
  margin: 0 0 0 -1.4em;
}

.contents .tab__content__column .sec__btn a strong::after {
  content: 'open_in_new';
  font-family: 'Material Symbols Outlined';
  font-size: 1em;
  position: absolute;
  top:0;
  right:-1.4em;
}

.contents .sec__btn a span {
  display: block;
  margin: 1rem 0 0;
  font: 400 1.6rem/1 "Noto Sans JP", sans-serif;
  color: #FFF;
}
.contents .sec__txtlink {
  text-decoration: underline;
  font: 400 2rem/1 "Noto Sans JP", sans-serif;
  margin: 1em 0 0;
}
.contents .sec__txtlink a{
  position: relative;
  margin: 0 0 0 -1.4em;
}
.contents .sec__txtlink a::after {
  content: 'open_in_new';
  font-family: 'Material Symbols Outlined';
  font-size:1em;
  position: absolute;
  top:50%;
  right:-1.4em;
  transform: translateY(-50%);
}
.contents .sec01 {
  width: 100%;
  text-align: center;
}
.contents .sec01 img {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
}
.contents .sec02 {
  margin: 10rem auto 0;
  text-align: center;
}

.contents .sec02 .sec__inner {
  width: 100rem;
}

.contents .sec02__btngroup{
  margin: 10rem auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 5rem;
}

.contents .sec02__btngroup__column{
  flex:1;
  text-align: center;
}

.contents .sec02__btngroup__column a{
  width:100%;
  height: 8rem;
  font:400 1.6rem/1.6 'Noto Sans JP', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  border:1px solid #241754;
  border-radius: 1rem;
}

.contents .sec02__btngroup__column:nth-child(3) a{
  position: relative;
}

.contents .sec02__btngroup__column:nth-child(3) a::after{
  content: 'open_in_new';
  font-family: 'Material Symbols Outlined';
  font-size: 1em;
  position: absolute;
  top:50%;
  right: 1em;
  transform: translateY(-50%);
}

.contents .tab__label {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  font:700 1.8rem/1.6 'Noto Sans JP', sans-serif;
  background: #f2f2f2;
  padding:3rem 0 0;
}
.contents .tab__label__column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contents .tab__label__column:nth-child(1) {
  border-right: 1px solid #222;
}

.contents .tab__content{
  display: flex;
  background: #f2f2f2;
  padding:0 0 3rem;
}

.contents .tab__content__column {
  display: block;
  flex:1;
  transition: 0.5s;
}

.contents .tab__content__column:nth-child(1) {
  border-right: 1px solid #222;
}

.contents .tab__content__column.show {
  display: block;
}

.contents .sec03 {
  margin: 15rem 0 0;
}
.contents .sec03 .title_area {
  width: 1190px;
  height: auto;
  margin-bottom: 40px;
  text-align: center;
}
.contents .sec03 .title_area img {
  width: 100%;
}
.contents .sec03 .title_area .logo {
  width: 427px;
  height: auto;
  margin: 0 auto;
}
.contents .sec03 .title_area h2 {
  width: 250px;
  height: auto;
  margin: 0 auto;
}
.contents .sec03 .title_area h2.col2 {
  width: 500px !important;
  height: auto;
  margin: 0 auto;
  letter-spacing: -0.4em;
  text-align: left;
}
.contents .sec03 .title_area h2.col2 p {
  width: 250px;
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
}
.contents .sec03 .title_area .lead {
  color: #111;
  font-size: 14px;
  line-height: 1.8em;
}
.contents .sec03 #brand_stage h3 {
  font-size: 20px;
  font-weight: bold;
  margin-left: 2px;
  padding-bottom: 5px;
}
.contents .sec03 #brand_stage table {
  width: 100%;
  margin-top: 20px;
  border-spacing: 2px;
  border-collapse: separate;
}
.contents .sec03 #brand_stage table tr td {
  border: 1px solid #f0f0f0;
  background: #fff;
  padding: 18px;
  color: #000;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}
.contents .sec03 #brand_stage table tr td:first-child {
  text-align: left;
  background: #ddd;
}
.contents .sec03 .platinum {
  background: #9ea3c2 !important;
  color: #fff !important;
}
.contents .sec03 .gold {
  background: #caad49 !important;
  color: #fff !important;
}
.contents .sec03 .silver {
  background: #b8b8b8 !important;
  color: #fff !important;
}
.contents .sec03 .bronze {
  background: #a28e40 !important;
  color: #fff !important;
}
.contents .sec03 .regular {
  background: #fff !important;
  color: #111 !important;
}
.contents .sec03 #brand_stage {
  background: none;
  padding: 0;
  width: auto;
  margin: 10px auto 10px;
  color: #111;
  text-align: center;
}
.contents .sec03 .note_area {
  font-size: 12px;
  line-height: 1.8em;
  text-align: left;
  color: #111;
  margin: 30px 20px;
}

.contents .sec04{
  margin: 10rem 0 0;
}

.contents .sec04 h3 {
  font-size: 20px;
  font-weight: bold;
  margin-left: 2px;
  padding-bottom: 5px;
  text-align: center;
}

.contents .sec04__stagetable {
  width: 65rem;
  margin: 3rem auto 0;
}

.contents .sec04__note {
  width: 65rem;
  margin: 3rem auto 0;
  font-size: 12px;
  line-height: 1.8em;
  text-align: left;
  color: rgb(17, 17, 17);
}

/*.contents*/
/*css sp============================================================*/
@media screen and (max-width: 768px) {
  .contents {
    padding: 0 0 calc(100 * (100vw / 375)) 0;
    /*.sec01*/
    /*.sec02*/
    /*.sec03*/
  }
  .contents .pc {
    display: none;
  }
  .contents .sp {
    display: block;
  }
  .contents .sec__inner {
    width: 100%;
    margin: 0 auto;
  }
  .contents .sec__flow {
    
  }
  .contents .sec__txt {
    width: calc(100% - 30px);
    margin: 2rem auto 0;
    display: block;
    text-align: center;
  }
  
  .contents .sec__txt__column:nth-child(odd) {
    width:15%;
    background: #241754;
    color: #FFF;
    font: 400 1.4rem/1.4 "Noto Sans JP", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contents .sec__txt__column:nth-child(even) {
    width:85%;
    font: 400 1.4rem/1.4 "Noto Sans JP", sans-serif;
    padding:0 0 0 0.5em;
    text-align: left;
  }
  
  .contents .sec__txt__title {
    display: block;
  }
  .contents .sec__txt__title strong {
    display: inline-block;
    font: 700 1.8rem/1 "Noto Sans JP", sans-serif;
    text-align: center;
    color: #c1ab0a;
    position: relative;
    margin: 0 0 0 1.2em;
  }
  .contents .sec__txt__title strong::before {
    font: 700 1em/1 'Material Symbols Outlined';
    content: 'featured_seasonal_and_gifts';
    position: absolute;
    top: 50%;
    left: -1.2em;
    transform: translateY(-50%);
  }
  .contents .sec__txt p {
    font: 400 1.4rem/1.4 "Noto Sans JP", sans-serif;
  }
  .contents .sec__txt p:nth-of-type(1) {
    margin: 0.5em 0 0;
  }
  .contents .sec__txt p span {
    background: #241754;
    color: #FFF;
    font: 400 1.4rem/2 "Noto Sans JP", sans-serif;
    padding: 0.2em 0.5em;
    margin: 0 0.5em 0 0;
  }
  .contents .sec__btn {
    margin: 3rem calc(15 * (100vw / 375)) 0;
  }
  .contents .sec__btn a {
    width: 100%;
    height: 10rem;
    border-radius: 1rem;
  }
  .contents .sec__btn a strong {
    font: 500 2rem/1 "Noto Sans JP", sans-serif;
  }
  .contents .sec__btn a span {
    font: 400 1.4rem/1.4 "Noto Sans JP", sans-serif;
  }
  .contents .sec__txtlink {
    text-align: center;
    font: 400 1.6rem/1 "Noto Sans JP", sans-serif;
  }
  .contents .sec01 {
    width: 100%;
    position: relative;
    z-index: 5;
  }
  .contents .sec01 img {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  .contents .sec02 {
    margin: 3rem 0 0;
    text-align: left;
    font: 700 1.4rem/2 "Noto Sans JP", sans-serif;
  }
  
  .contents .sec02 .sec__inner {
    width:100%;
  }
  
  .contents .sec02__btngroup{
    width:100%;
    margin: 5rem auto 0;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    column-gap: 0;
  }

  .contents .sec02__btngroup__column{
    width:100%;
    flex:1;
    text-align: center;
  }
  
  .contents .sec02__btngroup__column:nth-child(n+2){
    margin: 1rem 0 0;
  }

  .contents .sec02__btngroup__column a{
    width:calc(100% - 30px);
    height: auto;
    font:400 1.6rem/1.6 'Noto Sans JP', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid #241754;
    border-radius: 1rem;
    margin: 0 auto;
    padding:1em 0;
  }

  .contents .sec02__btngroup__column:nth-child(3) a{
    position: relative;
  }

  .contents .sec02__btngroup__column:nth-child(3) a::after{
    content: 'open_in_new';
    font-family: 'Material Symbols Outlined';
    font-size: 1em;
    position: absolute;
    top:50%;
    right: 1em;
    transform: translateY(-50%);
  }
  
  .contents .sec02 .sec__lead {
    display: block;
    margin: 3rem 0 0;
  }
  
  .contents .tab__label {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    font:700 1.2rem/1.6 'Noto Sans JP', sans-serif;
    background: none;
    padding:0;
  }
  .contents .tab__label__column {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .contents .tab__label__column.active {
    background: #f2f2f2;
  }

  .contents .tab__label__column:nth-child(1) {
    border-right: none;
    padding:3em 0;
  }

  .contents .tab__content{
    display: flex;
    background: none;
    padding:0;
    
  }

  .contents .tab__content__column {
    display: none;
    flex:1;
    
    padding:0 0 3rem;
  }

  .contents .tab__content__column:nth-child(1) {
    border-right: none;
  }

  .contents .tab__content__column.show {
    display: block;
    background: #f2f2f2;
  }
  
  
  
  
  
  
  
  
  .contents .sec03 {
    margin: 10rem 0 0;
    /* table common */
    /* /table common */
  }
  .contents .sec03 .title_area {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    text-align: center;
  }
  .contents .sec03 .title_area img {
    width: 100%;
  }
  .contents .sec03 .title_area .logo {
    width: 70%;
    height: auto;
    margin: 20px auto 0;
  }
  .contents .sec03 .title_area h2 {
    width: 75%;
    height: auto;
    margin: -10px auto -5px;
  }
  .contents .sec03 .title_area h2.col2 {
    width: 100%;
    height: auto;
    margin: 0 auto;
    letter-spacing: -0.4em;
    text-align: left;
  }
  .contents .sec03 .title_area h2.col2 p {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
  }
  .contents .sec03 .title_area .lead {
    color: #111;
    font-size: 12px;
    line-height: 1.8em;
    padding: 0 30px;
  }
  .contents .sec03 .section_stage {
    margin: 0;
    padding: 30px 15px;
    background-color: #f2f2f2;
  }
  .contents .sec03 .section_stage .ttl_stage {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 5px 0;
    line-height: 1;
    font-size: 15px;
  }
  .contents .sec03 table {
    padding: 0px;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    background: #fff;
    border-left: #ccc 1px solid;
    border-top: #ccc 1px solid;
    border-right: #ccc 1px solid;
  }
  .contents .sec03 table:last-of-type {
    margin-bottom: 0;
  }
  .contents .sec03 table th {
    padding: 8px;
    text-align: center;
    vertical-align: middle;
    /*border-top: solid 1px #ddd;*/
    border-bottom: solid 1px #ccc;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 12px;
    color: #111;
    font-weight: normal;
    font-weight: bold;
  }
  .contents .sec03 table td span {
    font-size: 9px;
  }
  .contents .sec03 table td.label {
    padding: 7px 5px;
    text-align: center;
    vertical-align: middle;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    width: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 11px;
    color: #111;
    background: #e9e9e9;
    font-weight: normal;
  }
  .contents .sec03 table td.detail {
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    border-top: solid 1px #dddddd;
    border-bottom: solid 1px #dddddd;
    width: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 11px;
    color: #111;
    font-weight: normal;
  }
  .contents .sec03 table.table_bronze th {
    color: #fff;
    background: #a28e40;
  }
  .contents .sec03 table.table_silver th {
    color: #fff;
    background: #b8b8b8;
  }
  .contents .sec03 table.table_gold th {
    color: #fff;
    background: #caad49;
  }
  .contents .sec03 table.table_platinum th {
    color: #fff;
    background: #9ea3c2;
  }
  .contents .sec03 .note_area {
    font-size: 11px;
    line-height: 1.8em;
    text-align: left;
    color: #111;
    margin: 0 auto;
    padding: 0 15px 30px;
    background-color: #f2f2f2;
  }
  
  .contents .sec04{
    margin: 5rem 0 0;
  }
  
  .contents .sec04 h3 {
    text-align: center;
    font-weight: bold;
    line-height: 1;
    font-size: 15px;
  }

  .contents .sec04__stagetable {
    width: calc(100% - 30px);
    margin: 3rem auto 0;
  }

  .contents .sec04__note {
    width: calc(100% - 30px);
    margin: 3rem auto 0;
    font-size: 11px;
    line-height: 1.8em;
    text-align: left;
    color: rgb(17, 17, 17);
  }
  
  /*.contents*/
}
/*アニメーション============================================================*/
.fadeIn {
  opacity: 0;
  transform: translate(0, 2.5rem);
  transition: all 1s ease-out;
}
.fadeIn.is-show {
  opacity: 1;
  transform: translate(0, 0);
}
.fadeView {
  opacity: 0;
  transition: 2s;
}
.fadeView.is-show {
  opacity: 1;
}
.switch1 img {
  width: 450px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}
.switch2 img {
  width: 450px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: ani__switch2 10s infinite;
}
.switch2 img:nth-child(1) {
  animation-delay: 0s;
}
.switch2 img:nth-child(2) {
  animation-delay: 5s;
}
@keyframes ani__switch2 {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.switch3 img {
  width: 450px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: ani__switch3 15s infinite;
}
.switch3 img:nth-child(1) {
  animation-delay: 0s;
}
.switch3 img:nth-child(2) {
  animation-delay: 5s;
}
.switch3 img:nth-child(3) {
  animation-delay: 10s;
}
@keyframes ani__switch3 {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  38% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.switch4 img {
  width: 450px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: ani__switch4 20s infinite;
}
.switch4 img:nth-child(1) {
  animation-delay: 0s;
}
.switch4 img:nth-child(2) {
  animation-delay: 5s;
}
.switch4 img:nth-child(3) {
  animation-delay: 10s;
}
.switch4 img:nth-child(4) {
  animation-delay: 15s;
}
@keyframes ani__switch4 {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}