@charset "UTF-8";

/* --------------------------------------------------
  top
-------------------------------------------------- */



/* --------------------------------------------------
  intro
-------------------------------------------------- */
#intro.section {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  min-height: 680px;
  background-color: rgba(167,12,44,0.9);
  opacity: 0;
  transition: opacity 1000ms ease;
}
.ready #intro.section {
  opacity: 1;
}
.intro-end #intro.section {
  opacity: 0;
}
.intro-remove #intro.section {
  z-index: -1;
}
#intro.section .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 980px;
  transform: translate3d(-50%, -45%, 0);
}
#intro.section .box {
  display: flex;
  justify-content: center;
  align-items: center;
}
#intro.section .img {
  width: calc(450 / 980 * 100%);
  max-width: 450px;
  margin-right: calc(55 / 980 * 100%);
}
#intro.section .img img {
  border: 5px solid #ffffff;
}
#intro.section .text_box {
  width: calc(476 / 980 * 100%);
  max-width: 476px;
  text-align: center;
}
#intro.section .text_box .title {
  margin-bottom: 22px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  color: #ffffff;
}
#intro.section .text_box .text {
  margin-bottom: 13px;
  font-size: 18px;
  line-height: 1.67;
  font-weight: 800;
  color: #ffffff;
}
#intro.section .text_box .date {
  margin-top: 33px;
  padding: 13px 10px 15px;
  border: 1px solid rgba(255,255,255,0.5);
}
#intro.section .text_box .date p {
  font-size: 18px;
  line-height: 1.67;
  color: #ffffff;
}
.scroll {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 52px;
  margin-left: -26px;
  cursor: pointer;
}
.scroll_text {
  margin-bottom: 4px;
}
.scroll_arrow {
  width: 13px;
  margin: 0 auto;
  animation: scrollmove 1300ms ease-in-out infinite;
}
@keyframes scrollmove {
  0% {
    opacity: 0;
    transform: translate3d(0,-4px,0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0,4px,0);
  }
}
/*tablet style*/
@media screen and (max-width: 1023px) and (min-width: 768px) {
  #intro.section .text_box .text br {
    display: none;
  }
}
/*sp style*/
@media screen and (max-width: 767px) {
  #intro.section {
    min-height: 320px;
  }
  #intro.section .inner {
    width: calc(710 / 750 * 100%);
    transform: translate3d(-50%, -45%, 0);
  }
  #intro.section .box {
    display: block;
  }
  #intro.section .img {
    width: calc(484 / 710 * 100%);
    max-width: 100%;
    margin: 0 auto calc(28 / 750 * 100vw);
  }
  #intro.section .text_box {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  #intro.section .text_box .title {
    margin-bottom: calc(22 / 750 * 100vw);
    font-size: calc(34 / 750 * 100vw);
    line-height: 1.25;
  }
  #intro.section .text_box .text {
    margin-bottom: calc(16 / 750 * 100vw);
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.5;
  }
  #intro.section .text_box .date {
    width: calc(620 / 710 * 100%);
    margin: calc(26 / 750 * 100vw) auto 0;
    padding: calc(16 / 750 * 100vw) 0 calc(20 / 750 * 100vw);
  }
  #intro.section .text_box .date p {
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.5;
  }
  .scroll {
    bottom: calc(16 / 750 * 100vw);
    width: calc(92 / 750 * 100vw);
    margin-left: calc(-46 / 750 * 100vw);
  }
  .scroll_text {
    margin-bottom: calc(4 / 750 * 100vw);
  }
}
/*sp style*/
@media screen and (max-width: 374px) {
  #intro.section .img {
    width: calc(444 / 710 * 100%);
    margin-bottom: calc(26 / 750 * 100vw);
  }
  #intro.section .text_box .title {
    margin-bottom: calc(20 / 750 * 100vw);
    font-size: calc(33 / 750 * 100vw);
  }
  #intro.section .text_box .text {
    margin-bottom: calc(14 / 750 * 100vw);
    font-size: calc(23 / 750 * 100vw);
  }
  #intro.section .text_box .date {
    margin-top: calc(24 / 750 * 100vw);
    padding: calc(14 / 750 * 100vw) 0 calc(18 / 750 * 100vw);
  }
  #intro.section .text_box .date p {
    font-size: calc(23 / 750 * 100vw);
  }
  .scroll {
    bottom: calc(14 / 750 * 100vw);
    width: calc(72 / 750 * 100vw);
    margin-left: calc(-36 / 750 * 100vw);
  }
}



/* --------------------------------------------------
  hero
-------------------------------------------------- */
#hero.section {
  position: relative;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  padding: 0 20px;
}
#hero.section .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1000ms ease 400ms;
}
.load #hero.section .slide {
  opacity: 1;
}
#hero.section .slide .slick-list,
#hero.section .slide .slick-track,
#hero.section .slide .slick-slide {
  height: 100%;
}
#hero.section .slide .photo {
  width: 100%;
  height: 100%;
  background: transparent center center / cover no-repeat;
}
#hero.section .slide .item1 .photo {
  background-image: url(../img/top/hero_img01.jpg?ver=081);
}
#hero.section .slide .item2 .photo {
  background-image: url(../img/top/hero_img02.jpg?ver=081);
}
#hero.section .slide .item3 .photo {
  background-image: url(../img/top/hero_img03.jpg?ver=081);
}
#hero.section .slide .item4 .photo {
  background-image: url(../img/top/hero_img04.jpg?ver=081);
}
#hero.section .slide .item5 .photo {
  background-image: url(../img/top/hero_img05.jpg?ver=081);
}
#hero.section .slide .slick-slide .photo {
  transform: scale(1);
  transition: transform 6000ms linear;
}
#hero.section .slide .slick-slide.nextSlide:not(.slick-current) .photo {
  transform: scale(1.1);
  transition: transform 0ms linear;
}
#hero.section .slide .slick-dots {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 80px;
  left: 0;
  width: 100%;
}
#hero.section .slide .slick-dots li {
  margin: 0 12px;
}
#hero.section .slide .slick-dots li button {
  display: block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  padding: 0;
  border: none;
  background-color: #ffffff;
  border-radius: 16px;
  text-indent: -99999px;
}
#hero.section .slide .slick-dots li.slick-active button {
  background-color: #bc2c38;
}
/*tablet style*/
@media screen and (max-width: 1023px) and (min-width: 768px) {
}
/*sp style*/
@media screen and (max-width: 767px) {
  #hero.section {
    height: 100vw;
    min-height: 300px;
    padding-right: 0;
    padding-left: 0;
  }
  #hero.section .slide .slick-dots {
    bottom: 19px;
  }
  #hero.section .slide .slick-dots li {
    margin: 0 8px;
  }
  #hero.section .slide .slick-dots li button {
    width: 13px;
    height: 13px;
    border-radius: 13px;
  }
  #hero.section .scroll {
    display: none;
  }
}



/* --------------------------------------------------
  topics
-------------------------------------------------- */
#topics.section {
  margin-bottom: 103px;
  padding: 114px 20px 0;
}
#topics.section .inner {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid #eeeeee;
  border-radius: 5px;
}
#topics.section .content_wrap {
  display: flex;
  align-items: center;
}
#topics.section h2 {
  flex: 1;
  width: calc(183 / 980 * 100%);
  max-width: 183px;
  text-align: center;
  font-size: 18px;
  color: #a70c2c;
}
#topics.section .content_box {
  width: calc(797 / 980 * 100%);
  max-width: 797px;
  height: 130px;
  overflow: auto;
  border-left: 1px solid #a70c2c;
}
#topics.section .content_box dl {
  padding-left: calc(38 / 797 * 100%);
}
#topics.section .content_box dl:first-child {
  padding-top: 40px;
}
#topics.section .content_box dt {
  margin-bottom: 17px;
  font-size: 14px;
  line-height: 1;
  font-weight: bold;
  color: #999999;
}
#topics.section .content_box dd {
  margin-bottom: 40px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #333333;
}
#topics.section .content_box dd em {
  font-style: normal;
  color: #a70c2c;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #topics.section {
    margin-bottom: 50px;
    padding: 54px 0 0;
  }
  #topics.section .inner {
    width: calc(710 / 750 * 100%);
    padding-top: 12px;
  }
  #topics.section .content_wrap {
    display: block;
  }
  #topics.section h2 {
    width: auto;
    margin-bottom: 11px;
    max-width: 100%;
    font-size: calc(36 / 750 * 100vw);
  }
  #topics.section .content_box {
    width: auto;
    max-width: 100%;
    height: 86px;
    border-top: 1px solid #a70c2c;
    border-left: 0;
  }
  #topics.section .content_box dl {
    padding-left: calc(32 / 710 * 100%);
  }
  #topics.section .content_box dl:first-child {
    padding-top: 24px;
  }
  #topics.section .content_box dt {
    text-align: left;
    margin-bottom: 9px;
    font-size: calc(24 / 750 * 100vw);
  }
  #topics.section .content_box dd {
    text-align: left;
    margin-bottom: 30px;
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.5;
  }
}



/* --------------------------------------------------
  about
-------------------------------------------------- */
#about.section {
  margin-bottom: 120px;
}
#about.section h2 {
  margin-bottom: 75px;
  padding: 55px 0 58px;
  background-color: #a70c2c;
  text-align: center;
}
#about.section h2 img {
  max-width: 549px;
}
#about.section .inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 20px;
}
#about.section .content_box {
  display: flex;
  align-items: center;
  margin-bottom: 57px;
}
#about.section .content_box .logo {
  width: calc(380 / 980 * 100%);
  text-align: center;
}
#about.section .content_box .logo img {
  width: calc(182 / 380 * 100%);
}
#about.section .content_box .text {
  width: calc(600 / 980 * 100%);
  font-size: 16px;
  line-height: 1.88;
  letter-spacing: 0.1em;
}
#about.section .hs2018 {
  text-align: center;
}
#about.section .hs2018 dt {
  margin-bottom: 34px;
  font-size: 26px;
  font-weight: bold;
  color: #a70c2c;
}
#about.section .hs2018 dd {
  width: calc(600 / 980 * 100%);
  margin: 0 auto;
}
#about.section .hs2018 dd a {
  display: block;
  width: 100%;
  padding: 25px 0;
  background-color: #a70c2c;
  border-radius: 50px;
}
#about.section .hs2018 dd a img {
  width: calc(457 / 600 * 100%);
}
/*sp style*/
@media screen and (max-width: 767px) {
  #about.section {
    margin-bottom: 55px;
  }
  #about.section h2 {
    margin-bottom: 25px;
    padding: 23px 0 20px;
  }
  #about.section h2 img {
    width: calc(616 / 750 * 100%);
  }
  #about.section .inner {
    width: calc(660 / 750 * 100%);
    padding: 0;
  }
  #about.section .content_box {
    display: block;
    margin-bottom: 14px;
  }
  #about.section .content_box .logo {
    width: calc(282 / 660 * 100%);
    margin: 0 auto 20px;
  }
  #about.section .content_box .logo img {
    width: 100%;
  }
  #about.section .content_box .text {
    width: auto;
    text-align: justify;
    font-size: calc(24 / 750 * 100vw);
    line-height: 2;
  }
  #about.section .hs2018 dt {
    margin-bottom: 14px;
    font-size: calc(32 / 750 * 100vw);
  }
  #about.section .hs2018 dd {
    width: 100%;
  }
  #about.section .hs2018 dd a {
    padding: 14px 0;
  }
  #about.section .hs2018 dd a img {
    width: calc(508 / 660 * 100%);
  }
}



/* --------------------------------------------------
  thanks
-------------------------------------------------- */
#thanks.section {
  display: none;
  margin-bottom: 120px;
  padding: 37px 20px 51px;
  background-color: #a70c2c;
}
#thanks.section {
  display: block;
}
#thanks.section .inner {
  max-width: 980px;
  margin: 0 auto;
}
#thanks.section .inner h2 {
  max-width: 640px;
  margin: 0 auto 40px auto;
  text-align: center;
}
#thanks.section .img {
  margin-bottom: 34px;
  border: 5px solid #ffffff;
}
#thanks.section .inner h3,
#thanks.section .inner .text {
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.1em;
}
#thanks.section .inner h3 {
  margin-bottom: 28px;
  font-size: 18px;
  line-height: 1.67;
  color: #d2bb87;
}
#thanks.section .inner .text {
  font-size: 14px;
  line-height: 1.86;
  color: #ffffff;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #thanks.section {
    margin-bottom: 55px;
    padding: 24px 0 34px;
  }
  #thanks.section .inner {
    width: calc(710 / 750 * 100%);
  }
  #thanks.section .inner h2 {
    width: calc(660 / 710 * 100%);
    margin-bottom: 26px;
  }
  #thanks.section .img {
    margin-bottom: 22px;
  }
  #thanks.section .inner h3 {
    margin-bottom: 18px;
    font-size: calc(32 / 750 * 100vw);
  }
  #thanks.section .inner .text {
    font-size: calc(24 / 750 * 100vw);
  }
}



/* --------------------------------------------------
  about_support
-------------------------------------------------- */
#about_support.section {
  max-width: 980px;
  margin: 0 auto 93px;
  padding: 0 20px 110px;
  border-bottom: 4px solid #a70c2c;
}
#about_support.section h2 {
  max-width: 210px;
  margin: 0 auto 55px auto;
  text-align: center;
}
#about_support.section .inner h3 {
  padding-top: 24px;
  padding-bottom: 24px;
  border: 3px solid #a70c2c;
  border-radius: 100px;
  text-align: center;
  font-size: 30px;
  line-height: 1.6;
  color: #a70c2c;
}
#about_support.section .inner .text {
  margin-top: 48px;
  text-align: center;
  font-size: 18px;
  line-height: 1.67;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #about_support.section {
    width: calc(710 / 750 * 100%);
    margin-bottom: 30px;
    padding: 0 0 36px;
  }
  #about_support.section h2 {
    max-width: 240px;
    width: calc(360 / 710 * 100%);
    margin-bottom: 29px;
  }
  #about_support.section .inner h3 {
    padding-top: 20px;
    padding-bottom: 21px;
    border-radius: 10px;
    font-size: calc(36 / 750 * 100vw);
    line-height: 1.67;
  }
  #about_support.section .inner .text {
    margin-top: 41px;
    text-align: justify;
    font-size: calc(28 / 750 * 100vw);
    line-height: 1.71;
  }
}



/* --------------------------------------------------
  about_story
-------------------------------------------------- */
#about_story.section {
  margin-bottom: 152px;
  padding: 0 20px;
}
#about_story.section .inner {
  max-width: 980px;
  margin: 0 auto;
}
#about_story.section h2 {
  max-width: 787px;
  margin: 0 auto 95px auto;
  text-align: center;
}
#about_story.section .box {
  display: flex;
  justify-content: space-between;
}
#about_story.section .box:not(:last-child) {
  margin-bottom: 95px;
}
#about_story.section .box.img_r {
  flex-direction: row-reverse;
}
#about_story.section .box .img {
  width: calc(450 / 980 * 100%);
}
#about_story.section .box .img img {
  border: 5px solid #a70c2c;
}
#about_story.section .box .text {
  width: calc(450 / 980 * 100%);
  margin-top: -7px;
  text-align: justify;
  font-size: 16px;
  line-height: 1.88;
  font-weight: bold;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #about_story.section {
    margin-bottom: 53px;
    padding: 0;
  }
  #about_story.section .inner {
    width: calc(710 / 750 * 100%);
  }
  #about_story.section h2 {
    width: calc(618 / 710 * 100%);
    margin-bottom: 35px;
  }
  #about_story.section .box {
    display: block;
  }
  #about_story.section .box:not(:last-child) {
    margin-bottom: 28px;
  }
  #about_story.section .box .img {
    width: 100%;
    margin-bottom: 17px;
  }
  #about_story.section .box .text {
    width: 100%;
    margin-top: 0;
    font-size: calc(24 / 750 * 100vw);
    line-height: 2;
  }
}



/* --------------------------------------------------
  howto
-------------------------------------------------- */
#howto.section h2 {
  margin-bottom: 52px;
  padding: 55px 0 58px;
  background-color: #a70c2c;
  text-align: center;
}
#howto.section h2 img {
  max-width: 439px;
}
#howto.section .howtointro_wrap {
  max-width: 1020px;
  margin: 0 auto 94px;
  padding: 0 20px;
}
#howto.section .lead_box {
  margin-bottom: 57px;
  text-align: center;
}
#howto.section .lead_box .text {
  margin-bottom: 37px;
  font-size: 18px;
  line-height: 1.67;
  color: #333333;
}
#howto.section .lead_box .text em {
  font-style: normal;
  font-weight: bold;
  color: #a70c2c;
}
#howto.section .lead_box .note {
  font-size: 14px;
  line-height: 1.71;
  color: #666666;
}
#howto.section .lead_box .note em {
  color: #a70c2c; 
  text-decoration: line-through;
}
#howto.section .hashtag {
  max-width: 406px;
  margin: 0 auto; 
}
#howto.section .hashtag:not(:last-child) {
  margin-bottom: 30px;
}
#howto.section .hashtag span {
  display: block;
  padding-top: 14px;
  padding-bottom: 13px;
  border: 3px solid #a70c2c;
  border-radius: 40px;
  text-align: center;
  font-size: 27px;
  line-height: 1;
  font-weight: bold;
  color: #a70c2c;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #howto.section h2 {
    margin-bottom: 25px;
    padding: 23px 0 20px;
  }
  #howto.section h2 img {
    width: calc(468 / 750 * 100%);
  }
  #howto.section .howtointro_wrap {
    margin-bottom: 70px;
    padding: 0;
  }
  #howto.section .lead_box {
    margin-bottom: 35px;
  }
  #howto.section .lead_box .text {
    margin-bottom: 24px;
    font-size: calc(28 / 750 * 100vw);
    line-height: 1.71;
  }
  #howto.section .lead_box .note {
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.5;
  }
  #howto.section .hashtag {
    width: calc(524 / 750 * 100%);
  }
  #howto.section .hashtag:not(:last-child) {
    margin-bottom: 21px;
  }
  #howto.section .hashtag span {
    padding-top: 8px;
    padding-bottom: 8px;
    border-width: 2px;
    font-size: calc(34 / 750 * 100vw);
  }
}



/* --------------------------------------------------
  howto flow_wrap
-------------------------------------------------- */
#howto.section .flow_wrap {
  max-width: 1020px;
  margin: 0 auto 105px;
  padding: 0 20px;
}
#howto.section .flow_wrap .flow_hd {
  margin-bottom: 51px;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  color: #a70c2c;
}
#howto.section .flow_wrap .flow_lead {
  margin-bottom: 42px;
  text-align: center;
  font-size: 18px;
  line-height: 1.33;
}
#howto.section .flow_wrap .step_list {
  display: flex;
  justify-content: space-between;
}
#howto.section .flow_wrap .step_item {
  position: relative;
  width: calc(280 / 980 * 100%);
  max-width: 280px;
  padding: 26px 0 29px;
  border-top: 1px solid #a70c2c;
  border-bottom: 1px solid #a70c2c;
}
#howto.section .flow_wrap .step_item:not(:last-child):after {
  box-sizing: border-box;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: -14.29%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-right: 2px solid #a70c2c;
  border-bottom: 2px solid #a70c2c;
  transform: rotate(-45deg);
}
#howto.section .flow_wrap .step_item dl {
  text-align: center;
}
#howto.section .flow_wrap .step_item dt {
  margin-bottom: 33px;
  font-size: 24px;
  line-height: 1;
  font-weight: bold;
  letter-spacing: 0;
  color: #a70c2c;
}
#howto.section .flow_wrap .step_item .img {
  display: flex;
  align-items: center;
  height: 79px;
  margin: 0 auto 22px auto;
}
#howto.section .flow_wrap .step_item.step1 .img {
  width: calc(77 / 280 * 100%);
  max-width: 77px;
}
#howto.section .flow_wrap .step_item.step2 .img {
  width: calc(188 / 280 * 100%);
  max-width: 188px;
}
#howto.section .flow_wrap .step_item.step3 .img {
  width: calc(75 / 280 * 100%);
  max-width: 75px;
}
#howto.section .flow_wrap .step_item .text p {
  font-size: 14px;
  line-height: 1.71;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #333333;
}
#howto.section .flow_wrap .step_item .text p em,
#howto.section .flow_wrap .step_item .text p a {
  color: #a70c2c;
}
#howto.section .flow_wrap .step_item .text p em {
  font-style: normal;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #howto.section .flow_wrap {
    width: calc(710 / 750 * 100%);
    margin-bottom: 45px;
    padding: 0;
  }
  #howto.section .flow_wrap .flow_hd {
    margin-bottom: 40px;
    font-size: calc(48 / 750 * 100vw);
  }
  #howto.section .flow_wrap .flow_lead {
    margin-bottom: 18px;
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.71;
    letter-spacing: 0;
  }
  #howto.section .flow_wrap .step_list {
    display: block;
  }
  #howto.section .flow_wrap .step_item {
    width: 100%;
    max-width: 100%;
    padding: 22px 0 20px;
  }
  #howto.section .flow_wrap .step_item:not(:last-child) {
    margin-bottom: 48px;
  }
  #howto.section .flow_wrap .step_item:not(:last-child):after {
    top: auto;
    bottom: -28px;
    right: 50%;
    width: 16px;
    height: 16px;
    margin-top: auto;
    margin-right: -11px;
    transform: rotate(45deg);
  }
  #howto.section .flow_wrap .step_item dt {
    margin-bottom: 12px;
    font-size: calc(42 / 750 * 100vw);
  }
  #howto.section .flow_wrap .step_item dd {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #howto.section .flow_wrap .step_item .img {
    display: block;
    height: auto;
    margin: 0 calc(36 / 710 * 100%) 0;
  }
  #howto.section .flow_wrap .step_item.step1 .img,
  #howto.section .flow_wrap .step_item.step2 .img,
  #howto.section .flow_wrap .step_item.step3 .img {
    max-width: 100%;
  }
  #howto.section .flow_wrap .step_item.step1 .img {
    width: calc(130 / 710 * 100%);
  }
  #howto.section .flow_wrap .step_item.step2 .img {
    width: calc(294 / 710 * 100%);
  }
  #howto.section .flow_wrap .step_item.step3 .img {
    width: calc(118 / 710 * 100%);
  }
  #howto.section .flow_wrap .step_item.step1 .text {
    width: calc(340 / 710 * 100%);
  }
  #howto.section .flow_wrap .step_item.step2 .text {
    width: calc(390 / 710 * 100%);
  }
  #howto.section .flow_wrap .step_item.step3 .text {
    width: calc(290 / 710 * 100%);
  }
  #howto.section .flow_wrap .step_item .text p {
    text-align: left;
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.71;
  }
}



/* --------------------------------------------------
  howto insta_wrap
-------------------------------------------------- */
#howto.section .insta_wrap {
  max-width: 980px;
  margin: 0 auto 100px;
  padding: 40px 0;
  border-top: 4px solid #a70c2c;
  border-bottom: 4px solid #a70c2c;
}
#howto.section .insta_wrap .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(808 / 980 * 100%);
  margin: 0 auto;
}
#howto.section .insta_wrap .icon {
  width: calc(135 / 808 * 100%);
}
#howto.section .insta_wrap .textbox {
  width: calc(637 / 808 * 100%);
  text-align: center;
}
#howto.section .insta_wrap .textbox .hd {
  margin-bottom: 26px;
  font-size: 27px;
  font-weight: 800;
  color: #a70c2c;
}
#howto.section .insta_wrap .textbox .btn a {
  display: block;
  padding: 16px 0;
  background-color: #a70c2c;
  border-radius: 100px;
  font-size: 30px;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #howto.section .insta_wrap {
    width: calc(710 / 750 * 100%);
    margin-bottom: 52px;
    padding: 24px 0;
  }
  #howto.section .insta_wrap .inner {
    display: block;
    width: 100%;
  }
  #howto.section .insta_wrap .icon {
    float: left;
    width: calc(169 / 710 * 100%);
    max-width: 110px;
    padding-left: calc(34 / 710 * 100%);
  }
  #howto.section .insta_wrap .textbox {
    width: 100%;
    text-align: left;
  }
  #howto.section .insta_wrap .textbox .hd {
    margin-bottom: 30px;
    padding-top: calc(20 / 710 * 100%);
    padding-left: calc(205 / 710 * 100%);
    font-size: calc(40 / 750 * 100vw);
    line-height: 1.13;
  }
  #howto.section .insta_wrap .textbox .btn a {
    padding: 10px 0;
    text-align: center;
    font-size: calc(28 / 750 * 100vw);
  }
}



/* --------------------------------------------------
  howto share_wrap
-------------------------------------------------- */
#howto.section .share_wrap {
  max-width: 1020px;
  margin: 0 auto 130px;
  padding: 0 20px;
}
#howto.section .share_wrap h3 {
  margin-bottom: 55px;
  padding: 17px 0;
  border: 3px solid #a70c2c;
  border-radius: 50px;
  text-align: center;
  font-size: 24px;
  color: #a70c2c;
}
#howto.section .share_wrap .box {
  display: flex;
  justify-content: space-between;
  width: calc(890 / 980 * 100%);
  margin: 0 auto;
}
#howto.section .share_wrap .box .img {
  width: calc(250 / 890 * 100%);
}
#howto.section .share_wrap .box .textbox {
  width: calc(580 / 890 * 100%);
}
#howto.section .share_wrap .box .textbox dt {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bold;
  color: #a70c2c;
}
#howto.section .share_wrap .box .textbox .text {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.88;
}
#howto.section .share_wrap .box .textbox .btn {
  width: calc(300 / 580 * 100%);
  font-size: 18px;
  font-weight: 800;
}
#howto.section .share_wrap .box .textbox .btn a {
  display: block;
  padding: 19px 0;
  background-color: #a70c2c;
  border-radius: 50px;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #howto.section .share_wrap {
    margin-bottom: 50px;
    padding: 0;
  }
  #howto.section .share_wrap h3 {
    margin-bottom: 34px;
    padding: 17px 0;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  #howto.section .share_wrap .box {
    display: block;
    width: calc(710 / 750 * 100%);
  }
  #howto.section .share_wrap .box .img {
    width: calc(500 / 710 * 100%);
    margin: 0 auto 27px;
  }
  #howto.section .share_wrap .box .textbox {
    width: 100%;
    text-align: center;
  }
  #howto.section .share_wrap .box .textbox dt {
    margin-bottom: 22px;
    font-size: calc(36 / 750 * 100vw);
  }
  #howto.section .share_wrap .box .textbox .text {
    margin-bottom: 30px;
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.88;
  }
  #howto.section .share_wrap .box .textbox .btn {
    width: calc(450 / 710 * 100%);
    margin: 0 auto;
    font-size: calc(26 / 750 * 100vw);
  }
  #howto.section .share_wrap .box .textbox .btn a {
    padding: 15px 0;
  }
}



/* --------------------------------------------------
  howto date_wrap
-------------------------------------------------- */
#howto.section .date_wrap {
  margin-bottom: 147px;
  padding: 34px 0 35px;
  border-top: 3px solid #a70c2c;
  border-bottom: 3px solid #a70c2c;
  text-align: center;
}
#howto.section .date_wrap h3,
#howto.section .date_wrap .text {
  font-weight: 800;
  color: #a70c2c;
}
#howto.section .date_wrap h3 {
  margin-bottom: 23px;
  font-size: 30px;
}
#howto.section .date_wrap .text {
  font-size: 24px;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #howto.section .date_wrap {
    margin-bottom: 60px;
    padding: 25px 0;
  }
  #howto.section .date_wrap h3 {
    margin-bottom: 13px;
    font-size: calc(28 / 750 * 100vw);
  }
  #howto.section .date_wrap .text {
    font-size: calc(36 / 750 * 100vw);
    line-height: 1.33;
  }
}



/* --------------------------------------------------
  howto_plan
-------------------------------------------------- */
#howto_plan.section {
  max-width: 1020px;
  margin: 0 auto 160px;
  padding: 0 20px;
}
#howto_plan.section h2 {
  max-width: 147px;
  margin: 0 auto 31px;
}
#howto_plan.section .lead_text {
  margin-bottom: 17px;
  text-align: center;
  font-size: 24px;
  line-height: 1.25;
  font-weight: bold;
}
#howto_plan.section .lead_note {
  margin-bottom: 81px;
  text-align: center;
  font-size: 18px;
  line-height: 1.67;
  color: #a60d2c;
}
#howto_plan.section .plan_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: -55px;
}
#howto_plan.section .plan_list li {
  width: calc(450 / 980 * 100%);
  margin-bottom: 55px;
  border: 1px solid #a60d2c;
  border-radius: 5px;
}
#howto_plan.section .plan_list h3 {
  padding: 13px 0;
  background-color: #a60d2c;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
}
#howto_plan.section .plan_list dl {
  padding: 37px 0;
  text-align: center;
}
#howto_plan.section .plan_list dt {
  margin-bottom: 26px;
  font-size: 30px;
  line-height: 1;
  font-weight: 100;
  color: #a60d2c;
}
#howto_plan.section .plan_list dd {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 100;
}
#howto_plan.section .plan_list dd span {
  vertical-align: baseline;
  font-size: calc(14 / 16 * 100%);
}
/*sp style*/
@media screen and (max-width: 767px) {
  #howto_plan.section {
    width: calc(660 / 750 * 100%);
    margin-bottom: 70px;
    padding: 0;
  }
  #howto_plan.section h2 {
    max-width: 194px;
    width: calc(194 / 660 * 100%);
    margin-bottom: 22px;
  }
  #howto_plan.section .lead_text {
    margin-bottom: 18px;
    font-size: calc(32 / 750 * 100vw);
    line-height: 1.11;
  }
  #howto_plan.section .lead_note {
    margin-bottom: 40px;
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.67;
  }
  #howto_plan.section .plan_list {
    display: block;
    margin-bottom: 0;
  }
  #howto_plan.section .plan_list li {
    display: flex;
    width: 100%;
    margin-bottom: 0;
  }
  #howto_plan.section .plan_list li:not(:last-child) {
    margin-bottom: 21px;
  }
  #howto_plan.section .plan_list h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(200 / 660 * 100%);
    padding: 0;
    font-size: calc(28 / 750 * 100vw);
  }
  #howto_plan.section .plan_list dl {
    width: calc(440 / 660 * 100%);
    padding: 16px 0 14px calc(40 / 660 * 100%);
    text-align: left;
  }
  #howto_plan.section .plan_list dt {
    margin-bottom: 7px;
    font-size: calc(32 / 750 * 100vw);
    line-height: 1.38;
    letter-spacing: 0;
  }
  #howto_plan.section .plan_list dd {
    font-size: calc(24 / 750 * 100vw);
  }
  #howto_plan.section .plan_list dd span {
    font-size: 100%;
  }
}


/* --------------------------------------------------
  report
-------------------------------------------------- */
#report.section {
  margin-bottom: 59px;
  padding: 0 20px 100px;
  border-bottom: 2px solid #a60d2c;
}
#report.section .inner {
  max-width: 980px;
  margin: 0 auto;
}
#report.section h2 {
  max-width: 479px;
  margin: 0 auto 42px;
}
#report.section .lead_text {
  margin-bottom: 65px;
  text-align: center;
  font-size: 18px;
  line-height: 1.67;
  color: #333333;
}
#report.section .lead_text em {
  font-style: normal;
  color: #a70c2c;
}
#report.section .btn_list {
  display: flex;
  justify-content: center;
}
/*#report.section .btn_list {
   flex-wrap: wrap;
   justify-content: flex-start;
   width: calc(624 / 710 * 100%);
   margin: 0 auto -40px;
}*/
#report.section .btn_list li {
  width: calc(202 / 980 * 100%);
  max-width: 202px;
  margin-bottom: 45px;
}
#report.section .btn_list li:not(:last-child) {
  margin-right: calc(115 / 980 * 100%);
}
#report.section .btn_list a {
  display: block;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
}
#report.section .btn_list .img {
  margin-bottom: 27px;
}
#report.section .btn_list .caption {
  margin-bottom: 13px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
  color: #a70c2c;
}
#report.section .btn_list .text {
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: 0;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #report.section {
    margin-bottom: 40px;
    padding: 0 0 70px;
  }
  #report.section .inner {
    width: calc(710 / 750 * 100%);
  }
  #report.section h2 {
    width: calc(642 / 710 * 100%);
    max-width: 642px;
    margin-bottom: 15px;
  }
  #report.section .lead_text {
    margin-bottom: 40px;
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.67;
  }
  #report.section .btn_list {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: calc(624 / 710 * 100%);
    margin: 0 auto -3px;
  }
  #report.section .btn_list li {
    width: calc(302 / 624 * 100%);
    max-width: 100%;
    margin-bottom: 36px;
  }
  #report.section .btn_list li:not(:last-child) {
    margin-right: 0;
  }
  #report.section .btn_list li:nth-child(2n+1) {
    margin-right: calc(20 / 624 * 100%);
  }
  #report.section .btn_list li:last-child {
    margin-right: 0;
  }
  #report.section .btn_list .img {
    width: calc(268 / 302 * 100%);
    margin: 0 auto 10px;
  }
  #report.section .btn_list .caption {
    margin-bottom: 20px;
    font-size: calc(32 / 750 * 100vw);
  }
  #report.section .btn_list .text {
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.5;
  }
}


/* --------------------------------------------------
  message
-------------------------------------------------- */
#message.section {
  margin-bottom: 59px;
  padding: 0 20px 100px;
  border-bottom: 2px solid #a60d2c;
}
#message.section .inner {
  max-width: 980px;
  margin: 0 auto;
}
#message.section h2 {
  max-width: 479px;
  margin: 0 auto 42px;
}
#message.section .lead_text {
  margin-bottom: 65px;
  text-align: center;
  font-size: 18px;
  line-height: 1.67;
  color: #333333;
}
#message.section .lead_text em {
  font-style: normal;
  color: #a70c2c;
}
#message.section .btn_list {
  display: flex;
  justify-content: center;
}
#message.section .btn_list li {
  width: calc(202 / 980 * 100%);
  max-width: 202px;
}
#message.section .btn_list li:not(:last-child) {
  margin-right: calc(115 / 980 * 100%);
}
#message.section .btn_list a {
  display: block;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
}
#message.section .btn_list .img {
  margin-bottom: 27px;
}
#message.section .btn_list .caption {
  margin-bottom: 13px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
  color: #a70c2c;
}
#message.section .btn_list .text {
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: 0;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #message.section {
    margin-bottom: 40px;
    padding: 0 0 70px;
  }
  #message.section .inner {
    width: calc(710 / 750 * 100%);
  }
  #message.section h2 {
    width: calc(642 / 710 * 100%);
    max-width: 642px;
    margin-bottom: 15px;
  }
  #message.section .lead_text {
    margin-bottom: 40px;
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.67;
  }
  #message.section .btn_list {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: calc(624 / 710 * 100%);
    margin: 0 auto -40px;
  }
  #message.section .btn_list li {
    width: calc(302 / 624 * 100%);
    max-width: 100%;
    margin-bottom: 36px;
  }
  #message.section .btn_list li:not(:last-child) {
    margin-right: 0;
  }
  #message.section .btn_list li:nth-child(2n+1) {
    margin-right: calc(20 / 624 * 100%);
  }
  #message.section .btn_list li:last-child {
    margin-right: 0;
  }
  #message.section .btn_list .img {
    width: calc(268 / 302 * 100%);
    margin: 0 auto 18px;
  }
  #message.section .btn_list .caption {
    margin-bottom: 10px;
    font-size: calc(32 / 750 * 100vw);
  }
  #message.section .btn_list .text {
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.5;
  }
}



/* --------------------------------------------------
  entry
-------------------------------------------------- */
#entry.section {
  margin: 0 auto 120px;
}
#entry.section h2 {
  max-width: 423px;
  margin: 0 auto 24px;
}
#entry.section .entry_num {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 22px;
}
#entry.section .entry_num .icon {
  max-width: 75px;
  margin-right: 30px;
}
#entry.section .entry_num .num {
  font-size: 90px;
  line-height: 1;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #a60d2c;
}
#entry.section .lead_note {
  margin-bottom: 59px;
  text-align: center;
  font-size: 16px;
  line-height: 1.88;
  font-weight: 100;
  color: #666666;
}
#entry.section .tab_nav {
  max-width: 980px;
  margin: 0 auto;
}
#entry.section .tab_nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#entry.section .tab_nav li {
  width: calc(243 / 980 * 100%);
  margin: 0 calc(2 / 980 * 100%) 4px;
}
#entry.section .tab_nav li:nth-child(n+4) {
  width: calc(241 / 980 * 100%);
  margin: 0 calc(2 / 980 * 100%) 4px;
}
#entry.section .tab_nav li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2.44em + 24px);
  padding: 10px;
  border: 2px solid #a60d2c;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
  line-height: 1.22;
  font-weight: bold;
  color: #a60d2c;
  text-decoration: none;
  transition: background 400ms ease, color 400ms ease;
}
#entry.section .tab_nav li a.cu {
  background-color: #a60d2c;
  color: #ffffff;
}
#entry.section .tab_contents {
  position: relative;
  padding: 0 20px 71px;
  background-color: #a60d2c;
}
#entry.section .tab_inner {
  max-width: 980px;
  margin: 0 auto;
  padding-top: 49px;
  transition: opacity 1000ms ease;
}
#entry.section .tab_inner.cu {
  z-index: 1;
  opacity: 1;
}
#entry.section .tab_inner:not(.cu) {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: 100%;
  opacity: 0;
  transform: translateX(-50%);
}
#entry.section .tab_title_wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}
#entry.section .tab_title_wrap .illust {
  width: calc(300 / 980 * 100%);
}
#entry.section .tab_title_wrap .text_box {
  position: relative;
  width: calc(645 / 980 * 100%);
  color: #ffffff;
}
#entry.section .tab_title_wrap .text_box .plan_text dt {
  width: 140px;
  margin-bottom: 20px;
  padding: 4px 0;
  background-color: #ffffff;
  border-radius: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #a60d2c;
}
#entry.section .tab_title_wrap .text_box .plan_text dd {
  font-weight: 100;
}
#entry.section .tab_title_wrap .text_box .plan_text dd.item {
  margin-bottom: 15px;
  font-size: 30px;
}
#entry.section .tab_title_wrap .text_box .plan_text dd.caption {
  font-size: 16px;
  line-height: 1.5;
}
#entry.section .tab_title_wrap .text_box .entry_count {
  display: flex;
  align-items: flex-end;
  position: absolute;
  top: -4px;
  right: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #ffffff;
}
#entry.section .tab_title_wrap .text_box .entry_count dt,
#entry.section .tab_title_wrap .text_box .entry_count dd {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
#entry.section .tab_title_wrap .text_box .entry_count dt {
  margin-right: 12px;
}
#entry.section .tab_title_wrap .text_box .entry_count dd {
  vertical-align: baseline;
}
#entry.section .tab_title_wrap .text_box .entry_count dd span {
  vertical-align: baseline;
  font-size: calc(48 / 36 * 100%);
  font-weight: 800;
}
#entry.section .tab_list {
  position: relative;
  width: 100%;
}
#entry.section .tab_list .display_count {
  position: absolute;
  top: -28px;
  right: 0;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}
#entry.section .tab_list ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -20px;
}
#entry.section .tab_list li {
  width: calc(180 / 980 * 100%);
  margin-bottom: 20px;
}
#entry.section .tab_list li:not(:nth-child(5n)) {
  margin-right: calc(20 / 980 * 100%);
}
#entry.section .tab_list li:nth-child(5n+4) {
  margin-right: calc(19 / 980 * 100%);
}
#entry.section .tab_list li a {
  text-decoration: none;
}
#entry.section .tab_list li .img {
  position: relative;
  overflow: hidden;
  padding-top: 100%;
  background-color: #000000;
}
#entry.section .tab_list li img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}
#entry.section .tab_list li .img:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 23px;
  height: 23px;
  background: transparent 0 0 / 100% auto no-repeat;
}
#entry.section .tab_list li.tw .img:after {
  background-image: url(../img/top/entry_twitter_icon.png?ver=081);
}
#entry.section .tab_list li.insta .img:after {
  background-image: url(../img/top/entry_insta_icon.png?ver=081);
}
#entry.section .tab_list li .id {
  padding: 13px 10px;
  border-top: 1px solid #a60d2c;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
#entry.section .tab_list .btn_all {
  max-width: 300px;
  margin: 65px auto 0;
}
#entry.section .tab_list .btn_all a {
  display: block;
  padding: 18px 0;
  border: 2px solid #ffffff;
  border-radius: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-decoration: none;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #entry.section {
    margin-bottom: 52px;
  }
  #entry.section h2 {
    width: calc(564 / 750 * 100%);
    max-width: 564px;
    margin-bottom: 16px;
  }
  #entry.section .entry_num {
    margin-bottom: 17px;
  }
  #entry.section .entry_num .icon {
    width: calc(100 / 750 * 100%);
    max-width: 100px;
    margin-right: calc(38 / 750 * 100%);
  }
  #entry.section .entry_num .num {
    font-size: calc(120 / 750 * 100vw);
  }
  #entry.section .lead_note {
    margin-bottom: 28px;
    font-size: calc(24 / 750 * 100vw);
  }
  #entry.section .tab_nav {
    width: calc(710 / 750 * 100%);
  }
  #entry.section .tab_nav li {
    width: calc(227 / 710 * 100%);
    margin: 0 calc(2 / 710 * 100%) 4px;
  }
  #entry.section .tab_nav li:nth-child(n+4) {
    width: calc(171 / 710 * 100%);
    margin: 0 calc(2 / 710 * 100%) 4px;
  }
  #entry.section .tab_nav li a {
    height: 100%;
    min-height: calc(3.51em + 24px);
    padding: calc(14 / 750 * 100vw);
    font-size: calc(22 / 750 * 100vw);
    line-height: 1.17;
  }
  #entry.section .tab_contents {
    padding: 0 0 30px;
  }
  #entry.section .tab_inner {
    width: calc(710 / 750 * 100%);
    padding-top: 27px;
  }
  #entry.section .tab_title_wrap {
    display: block;
    width: calc(600 / 710 * 100%);
    margin: 0 auto 42px;
  }
  #entry.section .tab_title_wrap .illust,
  #entry.section .tab_title_wrap .text_box {
    width: 100%;
  }
  #entry.section .tab_title_wrap .illust {
    margin-bottom: 29px;
  }
  #entry.section .tab_title_wrap .text_box .plan_text dt {
    width: calc(210 / 600 * 100%);
    margin-bottom: 13px;
    padding: 4px 0;
    font-size: calc(20 / 750 * 100vw);
  }
  #entry.section .tab_title_wrap .text_box .plan_text dd.item {
    margin-bottom: 12px;
    font-size: calc(44 / 750 * 100vw);
  }
  #entry.section .tab_title_wrap .text_box .plan_text dd.caption {
    font-size: calc(24 / 750 * 100vw);
    line-height: 1.5;
  }
  #entry.section .tab_title_wrap .text_box .entry_count dt,
  #entry.section .tab_title_wrap .text_box .entry_count dd {
    font-size: calc(24 / 750 * 100vw);
  }
  #entry.section .tab_title_wrap .text_box .entry_count dd span {
    font-size: calc(32 / 24 * 100%);
  }
  #entry.section .tab_list .display_count {
    top: -26px;
    font-size: calc(20 / 750 * 100vw);
  }
  #entry.section .tab_list ul {
    margin-bottom: -19px;
  }
  #entry.section .tab_list li {
    width: calc(336 / 710 * 100%);
    margin-bottom: 19px;
  }
  #entry.section .tab_list li:not(:nth-child(5n)),
  #entry.section .tab_list li:nth-child(5n+4) {
    margin-right: 0;
  }
  #entry.section .tab_list li:not(:nth-child(2n)) {
    margin-right: calc(38 / 710 * 100%);
  }
  #entry.section .tab_list li .img:after {
    bottom: 8px;
    right: 8px;
    width: 21px;
    height: 21px;
  }
  #entry.section .tab_list li .id {
    padding: 12px 9px;
    font-size: calc(26 / 750 * 100vw);
  }
  #entry.section .tab_list .btn_all {
    width: calc(600 / 710 * 100%);
    max-width: 600px;
    margin-top: 30px;
  }
}



/* --------------------------------------------------
  wish
-------------------------------------------------- */
#wish.section {
  margin-bottom: 83px;
  padding: 0 20px;
}
#wish.section .inner {
  max-width: 980px;
  margin: 0 auto;
}
#wish.section h2 {
  max-width: 560px;
  margin: 0 auto 90px auto;
}
#wish.section .content_box {
  display: flex;
  justify-content: space-between;
}
#wish.section .img {
  width: 40.1%;
  max-width: 393px;
  margin-top: -15px;
  margin-left: 5.92%;
}
#wish.section .text_box {
  width: 45.51%;
  max-width: 446px;
  margin-left: 5px;
}
#wish.section .text_box .text {
  text-align: justify;
  font-size: 16px;
  line-height: 1.88;
}
#wish.section .text_box .text:not(:last-child) {
  margin-bottom: 10px;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #wish.section {
    margin-bottom: 52px;
    padding: 0;
  }
  #wish.section .inner {
    width: calc(710 / 750 * 100%);
  }
  #wish.section h2 {
    width: calc(528 / 710 * 100%);
    margin-bottom: 41px;
  }
  #wish.section .content_box {
    display: block;
  }
  #wish.section .img {
    max-width: 100%;
    width: calc(491 / 710 * 100%);
    margin: 0 auto 44px;
  }
  #wish.section .text_box {
    width: auto;
    max-width: 100%;
    margin-left: auto;
  }
  #wish.section .text_box .text {
    font-size: calc(24 / 750 * 100vw);
    line-height: 2;
  }
}




/* --------------------------------------------------
  faq
-------------------------------------------------- */
#faq.section {
  margin-bottom: 113px;
  padding: 0 20px;
}
#faq.section .inner {
  max-width: 980px;
  margin: 0 auto;
}
#faq.section h2 {
  max-width: 207px;
  margin: 0 auto 85px auto;
}
#faq.section li:not(:last-child) {
  margin-bottom: 29px;
}
#faq.section li dl {
  overflow: hidden;
  transition: height 400ms ease;
}
#faq.section .icon {
  display: block;
  width: 35px;
  height: 35px;
  margin-right: 18px;
  border-radius: 100%;
  text-align: center;
  font-size: 20px;
  line-height: 35px;
  font-weight: bold;
}
#faq.section dt a {
  display: flex;
  text-decoration: none;
  border-bottom: 1px solid #dddddd;
  padding: 0 11px 17px;
}
#faq.section dt .icon {
  background-color: #a70c2c;
  color: #ffffff;
}
#faq.section dt .text {
  width: calc(100% - 35px - 18px - 21px - 10px);
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0;
}
#faq.section dt .btn {
  position: relative;
  width: 21px;
  height: 21px;
  margin-top: 8px;
  margin-left: 10px;
}
#faq.section dt .btn:before,
#faq.section dt .btn:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background-color: #a70c2c;
  transition: transform 200ms ease;
}
#faq.section li:not(.cu) dt .btn:before {
  transform: rotate(90deg);
}
#faq.section dd .answer_inner {
  display: flex;
  padding: 15px 11px 0;
}
#faq.section dd .icon {
  background-color: #eeeeee;
  color: #941b2f;
}
#faq.section dd .text {
  width: calc(100% - 35px - 18px);
  padding: 3px 0 25px;
  font-size: 14px;
  line-height: 2.14;
  font-weight: bold;
  letter-spacing: 0.1em;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #faq.section {
    margin-bottom: 49px;
    padding: 0;
  }
  #faq.section .inner {
    width: calc(710 / 750 * 100%);
  }
  #faq.section h2 {
    width: calc(356 / 710 * 100%);
    margin-bottom: 45px;
  }
  #faq.section li:not(:last-child) {
    margin-bottom: 26px;
    transition: margin 400ms ease;
  }
  #faq.section li:not(:last-child).cu {
    margin-bottom: 8px;
  }
  #faq.section li:not(.cu) dl {
    height: 45px;
  }
  #faq.section .icon {
    width: 30px;
    height: 30px;
    margin-right: 15px;
    font-size: calc(34 / 750 * 100vw);
    line-height: 30px;
  }
  #faq.section dt a {
    padding-bottom: 14px;
  }
  #faq.section dt .text {
    width: calc(100% - 30px - 15px - 19px - 10px);
    font-size: calc(30 / 750 * 100vw);
  }
  #faq.section dt .btn {
    width: 19px;
    height: 19px;
    margin-top: 6px;
  }
  #faq.section dd .answer_inner {
    padding-top: 15px;
  }
  #faq.section dd .text {
    width: calc(100% - 30px - 15px);
    padding-bottom: 0;
    font-size: calc(24 / 750 * 100vw);
    line-height: 2.17;
  }
}



/* --------------------------------------------------
  partner
-------------------------------------------------- */
#partner.section {
  margin-bottom: 125px;
  padding: 0 20px;
}
#partner.section .inner {
  max-width: 980px;
  margin: 0 auto;
}
#partner.section h2 {
  width: 31.22%;
  max-width: 306px;
  margin: 0 auto 74px auto;
}
#partner.section .bnr_list {
  display: flex;
  justify-content: space-between;
}
#partner.section .bnr_list li {
  width: 31.63%;
  max-width: 310px;
}
/*sp style*/
@media screen and (max-width: 767px) {
  #partner.section {
    margin-bottom: 50px;
    padding: 0;
  }
  #partner.section .inner {
    width: calc(710 / 750 * 100%);
  }
  #partner.section h2 {
    width: calc(526 / 710 * 100%);
    max-width: 100%;
    margin-bottom: 45px;
  }
  #partner.section .bnr_list {
    display: block;
  }
  #partner.section .bnr_list li {
    width: calc(532 / 710 * 100%);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  #partner.section .bnr_list li:not(:last-child) {
    margin-bottom: 15px;
  }
}



/* --------------------------------------------------
  product
-------------------------------------------------- */
#product.section {
  padding: 0 20px;
  background-color: #a70c2c;
}
#product.section .inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 47px 0 73px;
}
#product.section h2 {
  max-width: 866px;
  margin: 0 auto 4px auto;
}
#product.section .note {
  margin-bottom: 29px;
  text-align: center;
  font-size: 14px;
  font-weight: 100;
  color: #ffffff;
}
#product.section .contents_box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 67px;
}
#product.section .contents_box ul {
  display: flex;
  flex-wrap: wrap;
  width: calc(457 / 980 * 100%);
  margin-bottom: -23px;
}
#product.section .contents_box li {
  width: calc(212 / 457 * 100%);
  margin-bottom: 23px;
}
#product.section .contents_box li:not(:nth-child(2n)) {
  margin-right: calc(33 / 457 * 100%);
}
#product.section .contents_box li .img {
  margin-bottom: 8px;
}
#product.section .contents_box li .caption {
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffffff;
}
#product.section .contents_box .text_box {
  width: calc(451 / 980 * 100%);
}
#product.section .contents_box .text_box .text {
  margin: -6px 0 33px;
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 800;
  color: #ffffff;
}
#product.section .contents_box .text_box .photo {
  margin-bottom: 45px;
  border: 5px solid #ffffff;
}
#product.section .contents_box .text_box .btn,
#product.section .bnr {
  margin: 0 auto;
}
#product.section .contents_box .text_box .btn {
  width: calc(380 / 451 * 100%);
}
#product.section .bnr {
  width: calc(654 / 980 * 100%);
}
/*sp style*/
@media screen and (max-width: 767px) {
  #product.section {
    padding: 0;
  }
  #product.section .inner {
    width: calc(710 / 750 * 100%);
    padding: 27px 0 31px;
  }
  #product.section h2 {
    max-width: 660px;
    width: calc(660 / 710 * 100%);
    margin-bottom: 24px;
  }
  #product.section .note {
    margin-bottom: 29px;
    font-size: calc(24 / 750 * 100vw);
  }
  #product.section .contents_box {
    flex-direction: column-reverse;
    justify-content: flex-start;
    margin-bottom: 32px;
  }
  #product.section .contents_box ul {
    display: flex;
    flex-wrap: wrap;
    width: calc(684 / 710 * 100%);
    margin: 0 auto -17px;
  }
  #product.section .contents_box li {
    width: calc(320 / 684 * 100%);
    margin-bottom: 17px;
  }
  #product.section .contents_box li:not(:nth-child(2n)) {
    margin-right: calc(40 / 684 * 100%);
  }
  #product.section .contents_box li .img {
    margin-bottom: 3px;
  }
  #product.section .contents_box li .caption {
    font-size: calc(22 / 750 * 100vw);
  }
  #product.section .contents_box .text_box {
    width: 100%;
    margin-bottom: 33px;
  }
  #product.section .contents_box .text_box .text {
    margin: 0 0 30px;
    font-size: calc(28 / 750 * 100vw);
    line-height: 1.57;
  }
  #product.section .contents_box .text_box .photo {
    width: calc(660 / 710 * 100%);
    margin: 0 auto 32px;
  }
  #product.section .contents_box .text_box .btn {
    width: calc(562 / 710 * 100%);
  }
  #product.section .bnr {
    width: calc(660 / 710 * 100%);
  }
}



/* --------------------------------------------------
  company
-------------------------------------------------- */
#company.section {
  padding: 0 20px;
}
#company.section .inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 96px 0 94px;
}
#company.section h3 {
  max-width: 304px;
  margin: 0 auto 30px;
}
#company.section .btn {
  text-align: center;
}
#company.section .btn a {
  position: relative;
  display: inline-block;
  padding-left: 15px;
  font-size: 18px;
  line-height: 1;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: #022591;
}
#company.section .btn a:after {
  box-sizing: border-box;
  content: "";
  display: inline-block;
  position: relative;
  top: -2px;
  width: 11px;
  height: 11px;
  margin-left: 2px;
  border-right: 3px solid #022591;
  border-bottom: 3px solid #022591;
  transform: rotate(-45deg);
}
/*sp style*/
@media screen and (max-width: 767px) {
  #company.section {
    padding: 0;
  }
  #company.section .inner {
    width: calc(710 / 750 * 100%);
    padding-top: 63px;
    padding-bottom: 47px;
  }
  #company.section h3 {
    max-width: 100%;
    width: calc(470 / 710 * 100%);
    margin-bottom: 24px;
  }
  #company.section .btn a {
    padding-left: 15px;
    font-size: calc(28 / 750 * 100vw);
  }
  #company.section .btn a:after {
    top: -1px;
    width: 9px;
    height: 9px;
    margin-left: 3px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }
}



/* --------------------------------------------------
  modal
-------------------------------------------------- */
.modaal-wrapper {
  z-index: 999999;
}
.modaal-overlay {
  z-index: 99900;
}
.modaal-close:focus,
.modaal-close:hover {
  outline: 0;
  background: transparent;
}
.modaal-close:after, .modaal-close:before {
  top: 6px;
  left: 24px;
  width: 2px;
  height: 40px;
  border-radius: 0;
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background-color: #ffffff;
}
.modaal-video-wrap {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 1400px){
  .modaal-video-container {
     padding-bottom: 56.25%; 
     height: 0; 
  }
}



/* --------------------------------------------------
  768px〜 hover pc + tablet style
  touchデバイスでhoverを使うと2回クリックしないと
  いけないくなるので、.notouchを先頭につけてください
-------------------------------------------------- */
@media screen and (min-width: 768px) {

  .notouch .back_intro a,
  .notouch #hero.section .slide .slick-dots li:not(.slick-active) button,
  .notouch #about.section .hs2018 dd a,
  .notouch #howto.section .flow_wrap .step_item .text p a,
  .notouch #howto.section .insta_wrap .textbox .btn a,
  .notouch #howto.section .share_wrap .box .textbox .btn a,
  .notouch #howto_plan.section .lead_note a,
  .notouch #message.section .btn_list a,
  .notouch #entry.section .tab_list li a p,
  .notouch #entry.section .tab_list .btn_all a,
  .notouch #company.section .btn a,
  .notouch #product.section .inner a,
  .notouch #partner.section .bnr_list li a,
  .notouch #faq.section dt a {
    transition: opacity 400ms ease;
  }
  .notouch .back_intro a:hover,
  .notouch #hero.section .slide .slick-dots li:not(.slick-active) button:hover,
  .notouch #about.section .hs2018 dd a:hover,
  .notouch #howto.section .flow_wrap .step_item .text p a:hover,
  .notouch #howto.section .insta_wrap .textbox .btn a:hover,
  .notouch #howto.section .share_wrap .box .textbox .btn a:hover,
  .notouch #howto_plan.section .lead_note a:hover,
  .notouch #message.section .btn_list a:hover,
  .notouch #entry.section .tab_list li a:hover p,
  .notouch #entry.section .tab_list .btn_all a:hover,
  .notouch #company.section .btn a:hover,
  .notouch #product.section .inner a:hover,
  .notouch #partner.section .bnr_list li a:hover,
  .notouch #faq.section dt a:hover {
    opacity: 0.7;
  }

  .notouch #entry.section .tab_nav li a:hover {
    background-color: #a60d2c;
    color: #ffffff;
  }

}