@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
* {
  padding: 0;
  margin: 0;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
.relative {
  position: relative;
}
html{
  font-size: 16px;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  background: #000610;
  line-height: 1.6;
  color: #fff;
}
img {
  width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}
.wrapper {
  display: block;
  position: relative;
  width: 100%;
  max-width: 1366px;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
}
.container {
  width: 100%;padding-left: 15px;padding-right: 15px;
}
@media (min-width: 769px) {
  .container {
    max-width: 880px;
    margin: 0 auto;
  }
}
header {
  position: relative;
  background: url(../img/header_bg.jpg)no-repeat top center / cover;
  width: 100%;
}
header .container {
  background: url("../img/header_tokito.png")no-repeat top center / 460px auto;
}
@media (min-width: 769px) {
  header .container {
    background: url("../img/header_tokito.png") no-repeat top center / auto 745px;
  }
}
header h1 {
  opacity: 0
}
header .img-box {
  display: flex;
  flex-direction: column;
  text-align: center;
}
header .badge img {
  width: clamp(6.25rem, 1.607rem + 23.21vw, 14.375rem);
  height: auto;
  float: right;
  margin-right: 10px;
}
header .img-box .header-copy {
  margin-bottom: 15px
}
header .img-box .header-logo {}
header .img-box img.header-campaign {
  margin: 0 15px 30px;
  width: calc(100% - 30px);
}
@media (min-width: 769px) {
  header .img-box img.header-campaign {
    margin-bottom: 50px
  }
}
section .img-box {}
/*sec01--------------------------*/
section.sec-01 {
  background-image: url("../img/sec01_bg_top01.png"), url("../img/sec01_bg_bottom01.png"), url("../img/sec-01_bg.png");
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: top center, bottom center, top center;
  background-size: contain, contain, 56px 56px;
}
section.sec-01 .container {
  padding: clamp(6.25rem, -0.893rem + 35.71vw, 18.75rem) 15px;
}
section.sec-01 .box {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 50px;
}
@media (min-width: 769px) {
  section.sec-01 .box {
    margin-bottom: 100px;
  }
}
section.sec-01 .box:last-child {
  margin-bottom: 0px
}
section.sec-01 .box h2 img, section.sec-01 .box h3 img, section.sec-01 .box h4 img, section.sec-01 .box .img-box img {
  margin: 0 auto 50px;
}
@media (min-width: 769px) {
  section.sec-01 .box h2 img {
    max-width: 777px;
  }
  section.sec-01 .box h3 img {
    max-width: 721px;
  }
}
.text-box {
  margin: 6px;
  position: relative;
  padding: 20px;
  border: solid 1px #00CCFF;
  background-color: linear-gradient(74.9309169029184deg, rgba(0, 44, 64,0.5) 20.352511838813438%,rgba(0, 43, 63,0.5) 20.352511838813438%,rgba(0, 6, 16,0.5) 85.92725272516081%);
}
.text-box:before, .text-box:after, .text-box span:before, .text-box span:after {
  content: '';
  position: absolute;
  background: url("../img/cross.svg")no-repeat;
  background-size: 12px 12px;
  width: 12px;
  height: 12px;
}
.text-box:after {
  top: -6px;
  left: -6px;
}
.text-box:before {
  top: -6px;
  right: -6px;
}
.text-box span:after {
  bottom: -6px;
  left: -6px;
}
.text-box span:before {
  bottom: -6px;
  right: -6px;
}
.text-box p {
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: left;
}
/*sec02--------------------------*/
section.sec-02 {
  background-image: url("../img/sec-02_bg.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-color: #232088;
}
section.sec-02 .container {
  padding: clamp(6.25rem, -0.893rem + 35.71vw, 18.75rem) 15px 0;
}
section.sec-02 h2 img {
  margin: 0 auto 50px;
}
section.sec-02 h3 img {
  margin: 0 auto 0px;
}
@media (min-width: 769px) {
  section.sec-02 .box h2 img {
    max-width: 777px;
  }
  section.sec-02 .box h3 img {
    max-width: 721px;
  }
}
section.sec-02 .img-box img {
  margin: 0 auto 50px;
}
section.sec-02 .box {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 50px;
}
@media (min-width: 769px) {
  section.sec-02 .box {
    margin-bottom: 100px;
  }
}
section.sec-02 .box:last-child {
  margin-bottom: 0px
}
section.sec-02 .box:last-child .img-box img {
  margin: 0 auto;
}
/*sec03--------------------------*/
section.sec-03 {
  background-image: url("../img/sec-03_bg.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-color: #232088;
}
section.sec-03 .container {
  padding: 50px 15px 0
}
section.sec-03 h2 img {
  margin: 0 auto 50px;
}
section.sec-03 h2, section.sec-03 h3 {
  text-align: center
}
section.sec-03 h3 img {
  margin: 0 auto 50px;
}
@media (min-width: 769px) {
  section.sec-03 .box h2 img {
    max-width: 777px;
  }
  section.sec-03 .box h3 img {
    max-width: 721px;
  }
}
section.sec-03 .img-box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
section.sec-03 .img-box img {
  width: 49%;
  margin: 0 auto 50px;
}
section.sec-03 .box {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 50px;
}
@media (min-width: 769px) {
  section.sec-03 .box {
    margin-bottom: 100px;
  }
}
section.sec-03 .box:last-child {
  margin-bottom: 0px
}
/*sec04--------------------------*/
section.sec-04 {
  background-image: url("../img/sec04_bg_top_sp.svg"), url("../img/sec05_bg_top.svg"), linear-gradient(180deg, rgba(0, 6, 16, 1), rgba(0, 44, 64, 1));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: top center, bottom center, top center;
  background-size: contain, contain, 100% 100%;
}
section.sec-04 .container {
  padding: 0px 15px
}
section.sec-04 .container02 {
  padding: 0 0 100px;
}
section.sec-04 .box {
  margin-bottom: 0;
}
section.sec-04 .container02 {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 100px;
  background-image: url("../img/merit_bg03.png"), url("../img/merit_bg02.png"), url("../img/merit_bg01.png");
  background-repeat: no-repeat;
  background-position: 0% 80%, 100% 50%, top left;
  background-size: 100% auto, 96% auto, 96% auto;
}
section.sec-04 .img-box_mutual {
  display: flex;
  flex-direction: column;
  z-index: 10;
  padding-top: 150px
}
section.sec-04 .img-box_mutual img {
  margin: 0 auto;
}
@media (min-width: 769px) {
  section.sec-04 {
    background-image: url("../img/sec04_bg_top.svg"), url("../img/sec05_bg_top.svg"), linear-gradient(180deg, rgba(0, 6, 16, 1), rgba(0, 44, 64, 1));
  }
  section.sec-04 .box {
    margin-bottom: 100px;
  }
  section.sec-04 .container02 {
    width: 880px;
    margin: 0 auto;
    padding: 0px 0px 135px;
    background-image: url("../img/merit_bg03.png"), url("../img/merit_bg02.png"), url("../img/merit_bg01.png");
    background-repeat: no-repeat;
    background-position: 0% 80%, 100% 38%, top left;
    background-size: 85% auto, 70% auto, 70% auto;
  }
	
	@media (min-width: 1024px) {
	  section.sec-04 .container02 {
		  width: 1050px;	}
	}
  section.sec-04 .img-box_mutual {
    width: 880px;
    margin: 0 auto;
  }
  section.sec-04 .img-box_mutual img {
    width: 72%;
    margin-top: 0;
    margin-bottom: 0px;
  }
  section.sec-04 .img-box_mutual img:nth-child(2), section.sec-04 .img-box_mutual img:nth-child(4) {
    float: left;
    margin-left: 0
  }
  section.sec-04 .img-box_mutual img:nth-child(1), section.sec-04 .img-box_mutual img:nth-child(3), section.sec-04 .img-box_mutual img:nth-child(5), section.sec-04 .img-box_mutual img:nth-child(6) {
    float: right;
    margin-right: 0
  }
  section.sec-04 .bg-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: 1
  }
}
section.sec-04 h2 img {
  margin: 0 auto 50px;
}
section.sec-04 h2, section.sec-04 h3 {
  text-align: center
}
section.sec-04 h3 img {
  margin: 0 auto 0px;
}
@media (min-width: 769px) {
  section.sec-04 .box h2 img {
    max-width: 777px;
  }
  section.sec-04 .box h3 img {
    max-width: 721px;
  }
}
/*sec05--------------------------*/
section.sec-05 {
  background-color: #09D8F8;margin-top: -1px;
}
section.sec-05 .container {
  padding: 0px 15px;
  max-width: 880px;
  margin: 0 auto;
}
section.sec-05 h3 {
  text-align: center
}
section.sec-05 h3 img {
  margin: 0 auto 0px;
}
section.sec-05 .img-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50px
}
section.sec-05 .img-box img {
  margin: 0 auto 15px;
  max-width: 760px;
}
@media (min-width: 769px) {
  section.sec-05 .box h3 img {
    max-width: 721px;
  }
}
/*sec06--------------------------*/
section.sec-06 {
  background-image: url("../img/sec06_bg_top.svg"), linear-gradient(180deg, rgba(0, 6, 16, 1), rgba(0, 44, 64, 1));
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top center;
  background-size: contain, 100% 100%;
}
section.sec-06 .container02 {
  padding: 100px 15px 50px
}
section.sec-06 h3 {
  text-align: center
}
section.sec-06 h3 img {
  margin: 0 auto 0px;
  max-width: 721px;
}
.sec-06 ul {
  display: flex;
  flex-direction: column;
}
.sec-06 ul li {
  padding-top: 65%
}
.sec-06 ul li:nth-child(1) {
  background: url("../img/enjoy_bg01_sp.png")no-repeat top center / contain;
}
.sec-06 ul li:nth-child(2) {
  background: url("../img/enjoy_bg02.png")no-repeat top center / contain;
}
.sec-06 ul li:nth-child(3) {
  background: url("../img/enjoy_bg03_sp.png")no-repeat top center / contain;
}
.sec-06 ul li:nth-child(4) {
  background: url("../img/enjoy_bg04_sp.png")no-repeat top center / contain;
}
.sec-06 ul li img {}
@media (min-width: 769px) {
  section.sec-06 .container02 {
    padding: 200px 15px 0
  }
  .sec-06 ul {
    width: 880px;
    margin: 0 auto;
    position: relative
  }
	@media (min-width: 1024px) {
		 .sec-06 ul {
    width: 1050px;
    margin: 0 auto;
    position: relative
  }
	}
	
  /*.sec-06 ul li .img-box{padding: 65px}*/
  .sec-06 ul li:nth-child(1) {
    background: url("../img/enjoy_bg01_sp.png")no-repeat top right / 530px auto;
    padding: 100px 90px;
  }
  .sec-06 ul li:nth-child(2) {
    background: url("../img/enjoy_bg02.png")no-repeat top left/ 630px auto;
    padding: 125px 90px;
    margin-top: -100px
  }
  .sec-06 ul li:nth-child(3) {
    background: url("../img/enjoy_bg03_sp.png")no-repeat top right / 630px auto;
    padding: 165px 90px 250px;
    margin-top: -165px
  }
  .sec-06 ul li:nth-child(4) {
    background: url("../img/enjoy_bg04.png")no-repeat top left / 590px auto;
    padding: 180px 90px 200px;
    margin-top: -265px
  }
  .sec-06 ul li:nth-child(odd) img {
    float: left;
    width: 480px;
  }
  .sec-06 ul li:nth-child(even) img {
    float: right;
    width: 480px;
  }
}
/*sec07--------------------------*/
section.sec-07 {
  background:linear-gradient(180deg, rgba(0, 44, 64, 1), rgba(0, 6, 16, 1));;

}
section.sec-07 .container {
  position: relative;
}
section.sec-07 .container .img-box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
section.sec-07 .container .img-box img {
  width: 49%;
  margin: 0 auto 15px;
}
section.sec-07 .container .box {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 50px;
}
@media (min-width: 769px) {
  section.sec-07 .container .box {
    margin-top: -50px;
    margin-bottom: 100px;
  }
  section.sec-07 .container .img-box img {
    margin: 0 auto 25px;
  }
}
section.sec-07 .box:last-child {
  margin-bottom: 0px
}
footer {padding: 100px 0}
footer .container {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin: 0 auto;
	letter-spacing: 0.025em;
}
.footer-logo{width: 90%; margin: 0 auto}
ul.sns {
  display: flex;
  justify-content: center;
  align-items: center;
	margin: 30px auto;
}
ul.sns li {
  margin: 0 10px;width: 50px;
}
@media (min-width: 769px) {
	ul.sns li {margin: 0 15px;width: 70px;}	
}
.copy{font-size:14px}
.contact_btn_wrap{background: #000610;width: 100%;    max-width: 1366px;position: fixed;bottom: 0;margin: 0 auto;text-align:center}
.contact_btn{ display: flex;
  justify-content: center;
  align-items: center;
	width: 100%;
    max-width: 769px;
margin: 5px auto;}
.contact_btn a {height:35px;margin: 0 5px}
.contact_btn a img{width:auto;height:35px}
@media (min-width: 769px) {
	.contact_btn a {height:50px;margin: 0 15px}
	.contact_btn a img{width:auto;height:50px}
}