/* 目次 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
/* 01. 共通 
/* 02. #top 
/* 03. #present プレゼント内容
/* 04. #how-to 応募方法
/* 05. #summary 応募概要
/* 06. #renewal 新機能紹介
/* 07. #bnr-area バナーエリア
/* 08. フッター
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


/* 01. 共通 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

body,
html {
  background: #fff;
  box-sizing: border-box;
  font-family: source-han-serif-japanese, serif;
  font-style: normal;
  scroll-behavior: smooth;
}

ul,
li {
  list-style: none;
}

a {
  color: #333;
  font-family: source-han-serif-japanese, serif;

/* font-size: 1.6rem; */
  font-weight: 600;
}

.h2-title {
  color: #333;
  font-family: source-han-serif-japanese, serif;
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 1em;
  position: relative;
  text-align: center;
}
.h3-title {
  color: #333;
  font-family: source-han-serif-japanese, serif;
  font-size: 1.4rem;
  text-align: center;
}  
.h4-title {
  color: #333;
  font-family: source-han-serif-japanese, serif;
  font-size: 1.2rem;
  text-align: center;
}

p {
  color: #333;
  font-family: source-han-serif-japanese, serif;
  font-size: 16px;
  font-weight: 500;
}

.one-comment {
  color: #333;
  display: block;
  font-family: source-han-serif-japanese, serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.7;
  margin: 2.0rem 5% 3.0rem;
  text-align: center;
}
.bar-red {
  background: #e60012;
  height: 50px;
  margin-bottom: 16px;
  width: 100%;;
}

.bar-red > p {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 2.0;
  text-align: center;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

/*ボタン*/

.btn-primary {
  display: flex;
  margin: 16px auto 16px;
  width: 280px;
}

.btn-primary :hover {
  cursor: pointer;
  opacity: .5;
}


.double-line-frame {
  background: #fff;
  border: 3px solid #e60012;
  border-radius: 6px;
  height: auto;
  margin: 0 auto;
  padding: 30px;
  position: relative;
}

.double-line-frame:before {
  border: 3px solid #cea66a;
  border-radius: 5px;
  bottom: 3px;
  content: "";
  left: 3px;
  position: absolute;
  right: 3px;
  top: 3px;
}

.double-line-frame:after {
  background: #e60012;
}
.padTop-16 {
  padding-top: 16px;
}

@media screen and (min-width:640px) and (max-width:1024px) {
  .one-comment {
    color: #333;
    display: block;
    font-family: source-han-serif-japanese, serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
    margin: 2.0rem 5% 3.0rem;
    text-align: center;
  }

  .h2-title {
    font-family: source-han-serif-japanese, serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
  }
  .bar-red {
    background: #e60012;
    height: 50px;
    margin-bottom: 16px;
    width: 100%;
  }
  .bar-red > p {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 2.3;
    text-align: center;
  }
}

@media screen and (max-width: 640px) {
  .h2-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 16px;
  }

  .h3-title {
    font-size: 20px;
  }

  .h4-title {
    font-size: 19px;
  }

  .bar-red {
    height: auto;
    padding: 12px 0;
  }
  .bar-red > p {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.5;
  }
  .one-comment {
    font-size: 16px;
    margin: 0;
  }

  .double-line-frame {
    background: #fff;
    border: 4px solid #e60012;
    border-radius: 8px;
    height: auto;
    margin: 0 auto;
    padding: 30px;
    position: relative;
  }
  .double-line-frame:before {
    border: 4px solid #cea66a;
    border-radius: 8px;
    bottom: 4px;
    content: "";
    left: 4px;
    position: absolute;
    right: 4px;
    top: 4px;
  }
}

/* pcとspで画像を切り替える */


@media screen and (max-width: 640px) {
  .picture-pc {
    display: none !important;
    margin: 0 auto;
  }
  .picture-sp {
    display: block !important;
    margin: 0 auto;
  }
}

@media screen and (min-width: 640px) {
  .picture-pc {
    display: block !important;
    margin: 0 auto;
  }
  .picture-sp {
    display: none !important;
    margin: 0 auto;
  }
}



/* 改行*/

@media screen and (max-width: 640px) {
  .br-pc {
    display: none !important;
  }
  /*SPの時だけ改行*/
  .br-sp {
    display: inline !important;
  }
}

@media screen and (min-width: 640px) {
  /*PCの時だけ改行*/
  .br-pc {
    display: block !important;
  }
  /*SPの時だけ改行*/
  .br-sp {
    display: none!important;
  }
}



/*パディング*/

.pb-0 {
  padding-bottom: 0 !important;
}


/* 背景 */

.bg-color01 {
  background-color: rgba(211, 237, 250, .2);
}

.bg-color02 {
  background-color: rgba(206, 166, 106, .1);
}

.bg-color03 {
  background-color: #f6f4f3;
}


/* 02. #top ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#top {
  background: rgba(206, 166, 106, .1);
  padding: 0;
  text-align: center;
}

#top .nav {
  height: auto;
}

#top .nav .nav-list {
  align-items: center;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
  padding-bottom: 2px;
  width: 60%;
}

#top .nav .nav-list li a {
  color: #333;
  font-size: 20px;
  font-weight: 700;
  line-height: 2.2;
}
#top .nav .nav-list li a :hover {
  text-decoration: #e60012;
}


#top .kv h1 img {
  margin: 0 auto;
  width: 1200px;
}

@media screen and (min-width:640px) and (max-width:1024px) {
  #top .nav .nav-list {
    align-items: center;
    border-top: solid 2px #fff;
    display: flex;
    justify-content: space-evenly;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
  }
  #top .nav .nav-list li a {
    font-size: 17px;
    line-height: 1.8;
  }
}

@media screen and (max-width: 640px) {
  #top .kv h1 img {
    max-width: 100%;
  }
  #top .nav .nav-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  #top .nav .nav-list li {
    border-bottom: 1px solid #e60012;
    width: 50%;
  }
  #top .nav .nav-list li:nth-child(odd) {
    border-right: 1px solid #e60012;
  }

  #top .nav .nav-list li a {
    font-size: 17px;
    font-weight: 800;
    line-height: 2.0;
  }
}

/* 03. #present プレゼント内容 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#present {
  padding: 64px 0;
}
.present-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 800px;
  padding-bottom: 18px;
}

#present .one-comment {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  padding-bottom: 16px;
}

.present-comment {
  font-size: 27px !important;
  /* letter-spacing: 2px; */
}

.present-comment > span {
  color: #e60012;
  font-size: 36px;
}

.present-box-ll {
  height: auto;
  margin: 0 auto 24px;
  max-width: 960px;
  padding: 48px 0;
}

.present-box-ll > .present-item {
  height: auto;
  margin: 0 auto 36px;
  max-width: 800px;
}
.present-box-l {
  height: auto;
  margin: 0 auto 24px;
  max-width: 800px;
}

.present-box-m {
  height: auto;
  max-width: 48%;
}

@media screen and (min-width:640px) and (max-width:1024px) {
  #present {
    padding: 16px 4%;
  }
  #present .one-comment {
    font-size: 19px !important;
    font-weight: 700;
    margin: 0;
    padding-bottom: 16px;
  }
  .present-box-ll {
    height: auto;
    margin: 0 auto 24px;
    max-width: 960px;
    padding: 16px 0 16px;
  }
} 

@media screen and (max-width: 640px) {
  #present {
    padding: 36px 1rem;
  }

  #present .one-comment {
    font-size: 19px !important;
    font-weight: 700;
    margin: 0;
    padding-bottom: 16px;
  }

  #present .one-comment span {
    font-size: 22px;
    font-weight: 800;
  }
  .present-wrapper {
    margin: 0 auto;
    width: 100%;
  }

  .present-box-l {
    height: auto;
    margin: 0 auto 1rem;
    width: 100%;
  }
  .present-box-m {
    height: auto;
    max-width: 100%;
  }

  #present img {
    margin-bottom: 0rem;
    width: 100%;
  }
  .present-box-ll {
    padding: 16px 0 8px ;
  }
  .present-box-ll img {
    margin-bottom: 36px !important;
  }
  .present-box-ll > .present-item {
    height: auto;
    margin: 0 auto;
    max-width: 800px;
  }
}

/* 04. how-to 応募方法 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
#how-to {
  padding: 36px 1rem 48px;
}

/* #how-to .one-comment {
  margin-bottom: 3.0rem;
} */

#how-to .double-line-frame {
  max-width: 800px;
}
#how-to h2,
h3,
p {
  text-align: center;
}    
#how-to a {
  color: #e60012 !important;
  position: relative;
  text-decoration: underline!important;
  z-index: 1;
}

#how-to .btn-primary:hover {
  cursor: pointer;
  opacity: .5;
}

.how-to-wrapper-l {
  margin: 24px auto 36px;
}

.how-to-wrapper-m {
  margin: 16px auto 4px;
  padding: 24px 20px 16px;
}

.how-to-box {
  display: block;
}

.how-to-item {
  margin-bottom: 20px;
  padding: 20px;
  text-align: center;
  width: auto;
  z-index: 1;
}
@media screen and (min-width:640px) and (max-width:1024px) {
  #how-to {
    padding: 64px 4% 80px!important;
  }
}

@media screen and (min-width: 640px) {
  #how-to {
    padding: 72px 1rem 80px !important;
  }
  .how-to-box {
    display: flex;
    gap: 20px;
  }

  .how-to-item {
    width: 48%;
  }
  #how-to .one-comment {
    margin: 0;
  }
}

/* 05. summary 応募概要 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#summary > .bar-red {
  margin-bottom: 64px;
}

/*アコーディオン*/

#summary .accordion .Label h3 {
  color: #333;
  font-family: source-han-serif-japanese, serif;
  font-size: 1.4rem !important;
  line-height: 1.0 !important;
  margin: 0 auto;
  padding: 0!important;
  text-align: center;
}

#summary .accordion-item h4 {
  font-family: source-han-serif-japanese, serif;
  font-size: 1.2rem;
  font-weight: 600;
}

/*ベース*/

#summary .accordion {
  margin: 0 auto 72px;
  width: 60%;
}

#summary .toggle {
  display: none;
}

#summary .Label {
  background: #fff;
  border-bottom: 1px solid #777;
  border-radius: 5px;
  display: block;

/*タイトル*/
  padding: 1em;
}

#summary .Label:hover {
  cursor: pointer;
}

#summary .Label::before {
  border-right: 2px solid #333;
  border-top: 2px solid #333;

/*タイトル横の矢印*/
  content: "";
  height: 6px;
  position: absolute;
  right: 20px;
  top: calc( 50% - 3px);
  transform: rotate(135deg);
  width: 6px;
}

#summary .Label,
#summary .content {
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all .3s;
}

#summary .accordion-item {
  height: 0;
  margin-bottom: 10px;
  overflow: hidden;
  padding: 0 20px;
  text-align: left;
}

#summary .accordion-item h4 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2.0;
  text-align: left;
}

#summary .accordion-item p {
  font-size: 16px;
  padding-bottom: 1.6rem;
  padding-left: 1.5rem;
  text-align: left;
}

#summary .accordion-item a {
  color: #e60012 !important;
  font-size: 16px;
  text-decoration: underline!important;
}

#summary .accordion-item a :hover {
  cursor: pointer;
  opacity: .5;
}

#summary .accordion-item .detailed-regulations p {
  padding-left: 0;
}

#summary .accordion-item .detailed-regulations p:last-child {
  padding-bottom: 0;
}

#summary .toggle:checked + .Label + .accordion-item {
  /*開閉時*/
  height: auto;
  padding: 20px;
  transition: all .3s;
}

#summary .toggle:checked + .Label::before {
  transform: rotate(-45deg) !important;
}

.detailed-regulations {
  background: #f3f2ed;
  border-radius: 5px;
  height: auto;
  margin: 3rem auto 2rem;
  overflow: auto;
  padding: 1.5rem 2rem;
  width: 90%;
}

.detailed-regulations > p {
  margin-bottom: 0;
}
@media screen and (min-width:640px) and (max-width:1024px) {
  #summary .accordion {
    max-width: 600px;
  }

  #summary .accordion .Label h3 {
    color: #333;
    font-family: source-han-serif-japanese, serif;
    font-size: 20px !important;
    line-height: 1.0 !important;
    margin: 0 auto;
    padding: 0!important;
    text-align: center;
  }
  #summary .accordion-item h4 {
    font-size: 18px;
  }
  #summary .accordion-item p {
    font-size: 15px;
    /* padding-bottom: 1.6rem;
    padding-left: 1.5rem;
    text-align: left;*/
  }
  #summary .accordion-item a {
    font-size: 16px;
  }
}

@media screen and (max-width: 640px) {
  #summary {
    padding-bottom: 36px;
  }
  #summary > .bar-red {
    margin-bottom: 16px;
  }
  #summary .h2-title {
    padding-top: 24px;
  }

  #summary .one-comment {
    margin: 0 1.5rem 16px;
  }

  #summary .accordion {
    margin: 0 auto;
    padding: 16px 1.5rem;
    width: 100%;
  }
  #summary .accordion .Label h3 {
    font-family: source-han-serif-japanese, serif;
    font-size: 1.2rem !important;
    font-weight: bold;
  }
  #summary .accordion-item h4 {
    font-family: source-han-serif-japanese, serif;
    font-size: 1.1rem !important;
    font-weight: bold;
  }
  #summary .accordion-item p {
    font-family: source-han-serif-japanese, serif;
    font-size: 1rem;
    line-height: 1.5;
    padding-bottom: 1.6rem;
    padding-left: 1.0rem;
    text-align: left;
  }
  #summary .accordion-item small {
    font-family: source-han-serif-japanese, serif;
    font-size: 1rem;
  }
  #summary .accordion-item a {
    color: #e60012 !important;
    font-size: 1rem;
    text-decoration: underline!important;
  }
  #summary .accordion-item a :hover {
    opacity: .5;
  }
  #summary .toggle:checked + .Label + .accordion-item {
    height: auto;
    padding: 1rem;
    transition: all .3s;
  }
  #summary .detailed-regulations {
    background: #f3f2ed;
    border-radius: 5px;
    height: auto;
    margin: 1rem auto;
    overflow: auto;
    padding: 1rem;
    width: 90%;
  }
}

/* 06. #renewal 新機能紹介 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
　#renewal {
  margin-bottom: 48px;
  padding-bottom: 64px;
}

　#renewal .bar-red {
  margin-bottom: 48px;
  margin-top: 64px;
}
.renewal-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 0 auto;
  max-width: 900px;
  padding: 32px 4% 64px !important;
}

#renewal img {
  border-radius: 4px;
}

#renewal a:hover {
  cursor: pointer;
  opacity: .5;
}

#renewal .btn-wrapper {
  margin: 1rem auto;
}

#renewal button {
  width: 100%;
}

@media screen and (min-width:640px) and (max-width:1024px) {
  .renewal-wrapper {
    gap: 20px;
    margin: 36px auto 0;
    max-width: 800px;
    padding: 0 4% 16px;
  }
}

@media screen and (max-width: 640px) {
  .renewal-wrapper {
    padding: 20px 1rem 36px !important;
  }

  #renewal img {
    width: 100%;
  }

  #renewal .btn-wrapper {
    background: rgba(206, 166, 106, .1);
    display: flex;
    justify-content: center;
    margin: 0;
    text-align: center;
  }
}

/* 07. #bnr-area バナーエリア ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.bnr-list-ul {
  padding: 1rem;
}

.bnr-list-ul {
  list-style-type: none;
}

.bnr-list-li:last-child {
  list-style: none;
  margin-bottom: inherit;
}

.bnr-list-li img {
  margin: 0 auto;
}

.bnr-list-li img:hover {
  cursor: pointer;
  opacity: .5;
}

.btn-apply-for {
  margin: 0 auto;
}


@media screen and (min-width:640px) and (max-width:1024px) {
  .bnr-list-ul {
    padding: 1rem;
  }
}

@media screen and (max-width:640px) {
  .bnr-list-ul {
    padding: 0 1rem 30px;
  }
  .bnr-list-li img {
    margin: 0 auto;
    width: 100%;
  }
}

/* 08.  フッター ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.s5-allProducts a {
  font-size: 12px;
  font-weight: 400;
}

.s5-pageFooter a {
  font-size: 12px;
  font-weight: 400;
}