@charset "UTF-8";
html {
  color: #000;
  font-family: "Noto Sans JP", YuGothic, "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 62.5%;
  position: relative;
  background: #fff;
  font-weight: 500;
  transition: .3s;
}

body {
  font-size: 1.7rem;
  transition: .3s;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
  background: #99d5ee url("../img/tool/bg.png") no-repeat center top/100% auto;
  width: 108rem;
  margin: 0 auto;
}
body a {
  color: #000;
  text-decoration: none;
  transition: .3s;
  vertical-align: top;
}
body a:hover {
  text-decoration: none;
}
body a:hover img {
  opacity: .8;
  transition: .3s;
}
body a:focus {
  overflow: hidden;
  outline: none;
}
body .indent {
  padding-left: 1em;
  text-indent: -1em;
}
body dt, body dd, body p, body li, body th, body td, body address {
  line-height: 3.2rem;
  letter-spacing: 1px;
}
body img {
  max-width: 100%;
  width: auto;
  transition: .3s;
}
body strong {
  font-weight: 700;
}
body .red {
  color: #cb2d28;
}
body .pink {
  color: #eb8282;
}
body .green {
  color: #6CBB63;
}
body .blue {
  color: #0068B6;
}
body .right {
  text-align: right;
}
body .left {
  text-align: left;
}
body .center {
  text-align: center;
}
body .b {
  font-weight: bold;
}
body .s {
  font-size: 1.2rem;
}
body .must {
  background: #eb8282;
  padding: 0.2% 2%;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
  border-radius: 3px;
  display: inline-block;
  margin-left: .8rem;
}

/* -----------------------------------------
		common
----------------------------------------- */
.cf {
  display: block;
}
.cf:before {
  content: "";
  display: block;
  clear: both;
}
.cf:after {
  content: "";
  display: block;
  clear: both;
}

.container {
  width: 900px;
  margin: 0 auto;
  padding: 0 3rem;
}

#pagetop {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  cursor: pointer;
}

/* -----------------------------------------
		haeder footer
----------------------------------------- */
header {
  min-height: 47rem;
}
header .summary {
  text-align: center;
  background: #1d2088;
  color: #fff;
  font-size: 1.4rem;
  padding: 0 0 .1rem;
  position: relative;
  z-index: 1;
  height: 3rem;
  width: 1080px;
  margin: 0 auto;
}
header .container {
  width: 1100px;
  position: relative;
  box-sizing: border-box;
}
header .container h1 {
  margin: 0 auto;
  position: absolute;
  width: auto;
  top: 2rem;
  width: 100%;
  text-align: center;
  z-index: 1;
  left: -2rem;
}
header .container .schedule {
  z-index: 2;
  width: 100%;
  text-align: center;
  top: 33rem;
  left: -2rem;
  position: absolute;
}

footer {
  background: #0068B6;
  text-align: center;
  padding: 0;
}
footer small {
  display: block;
  font-style: normal;
  font-size: 1.5rem;
  color: #fff;
  background: #000;
  padding: 1rem 0 1.4rem;
  font-weight: 900;
  font-size: 2.6rem;
}
footer .host img {
  width: auto;
}
footer .message {
  color: #fff;
  font-size: 1.2rem;
  line-height: 2rem;
}
footer .link {
  font-size: 1.4rem;
  font-weight: 300;
}
footer .link a {
  background: url("../img/arrow.png") no-repeat left 0.4rem;
  padding: 0 0 0 1.6rem;
}

/* -----------------------------------------
		main
----------------------------------------- */
main {
  background: url("../img/bg02.png") no-repeat center top/108rem auto;
  margin: 0 0 8rem;
  padding: 0;
  font-weight: 400;
}
main .container {
  border: 7px solid #0068B6;
  border-radius: 27px;
  box-sizing: border-box;
  background: #fff;
  padding: 0 4rem 3rem;
  position: relative;
}
main .container .title {
  background: #0068B6;
  color: #fff;
  font-size: 3.8rem;
  font-weight: 600;
  text-align: center;
  margin: 0 -4rem;
  line-height: 6rem;
  padding: 0 0 1rem;
}
main .container .attention {
  background: #FFFACC;
  padding: 2rem;
  margin: 2.7rem 0 4.6rem;
  border-radius: 20px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
main .container .attention dl {
  text-align: center;
}
main .container .attention dl dt {
  font-size: 2.3rem;
  font-weight: 600;
  position: relative;
  display: inline-block;
  padding: 0 4rem;
  margin: 0 0 1rem;
}
main .container .attention dl dt:before, main .container .attention dl dt:after {
  position: absolute;
  content: "";
  background: url("../img/icon-attention.png") no-repeat 0px 0px/100% auto;
  width: 3.1rem;
  height: 2.75rem;
  top: .5rem;
}
main .container .attention dl dt:before {
  left: 0;
}
main .container .attention dl dt:after {
  right: 0;
}
main .container .attention dl dd {
  display: flex;
  justify-content: center;
}
main .container .attention dl dd ul {
  display: inline-block;
}
main .container .attention dl dd ul li {
  font-size: 1.9rem;
  line-height: 3rem;
  text-align: left;
  position: relative;
  padding: 0 0 0 2.6rem;
}
main .container .attention dl dd ul li:before {
  position: absolute;
  left: 0;
  top: .9rem;
  width: 1.6rem;
  height: 1.6rem;
  background: #000;
  border-radius: 50%;
  content: "";
}
main .container .wrap h2 {
  background: #0054a4;
  color: #fff;
  font-weight: 700;
  font-size: 2.2rem;
  text-align: center;
  padding: 1rem 0 1.2rem;
  margin: 0 0 2.2rem;
}
main .container .wrap ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
main .container .wrap ul li {
  width: 32%;
  text-align: center;
  margin: 0 0 5rem;
}
main .container .wrap ul li h3 {
  font-size: 1.6rem;
  color: #000;
  margin: 0 0 1rem;
  line-height: 2.2rem;
}
main .container .wrap ul li .img {
  margin: 0 0 .6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
main .container .wrap ul li .btn {
  text-align: center;
  margin: 0 0 1rem;
}
main .container .wrap ul li .btn a {
  display: inline-block;
  color: #fff;
  font-size: 1.7rem;
  box-sizing: border-box;
  width: 18rem;
  border-radius: 10rem;
  line-height: 2.4rem;
  padding: 0 0 .4rem;
}
main .container .wrap ul li .btn.bg-green a {
  background: #6CBB63;
  border: 2px solid #6CBB63;
}
main .container .wrap ul li .btn.bg-green a:hover {
  background: #fff;
  color: #6CBB63;
}
main .container .wrap ul li .btn.bg-blue a {
  background: #54C2F0;
  border: 2px solid #54C2F0;
}
main .container .wrap ul li .btn.bg-blue a:hover {
  background: #fff;
  color: #54C2F0;
}
main .container .wrap ul li .btn.bg-pink a {
  background: #e30083;
  border: 2px solid #e30083;
}
main .container .wrap ul li .btn.bg-pink a:hover {
  background: #fff;
  color: #e30083;
}
main .container .wrap ul li .btn.bg-red a {
  background: #b52323;
  border: 2px solid #b52323;
}
main .container .wrap ul li .btn.bg-red a:hover {
  background: #fff;
  color: #b52323;
}
main .container .wrap ul li .btn.bg-yellow a {
  background: #F5AB18;
  border: 2px solid #F5AB18;
}
main .container .wrap ul li .btn.bg-yellow a:hover {
  background: #fff;
  color: #F5AB18;
}
main .container .wrap ul li .btn.bg-orange a {
  background: #E95513;
  border: 2px solid #E95513;
}
main .container .wrap ul li .btn.bg-orange a:hover {
  background: #fff;
  color: #E95513;
}
main .container .wrap ul li .btn.bg-purple a {
  background: #910782;
  border: 2px solid #910782;
}
main .container .wrap ul li .btn.bg-purple a:hover {
  background: #fff;
  color: #910782;
}
main .container .wrap ul li:nth-of-type(25) .img, main .container .wrap ul li:nth-of-type(26) .img, main .container .wrap ul li:nth-of-type(27) .img {
  height: 23.9rem;
}
main .container .wrap ul li:nth-of-type(28) .img, main .container .wrap ul li:nth-of-type(29) .img, main .container .wrap ul li:nth-of-type(30) .img {
  height: 18.8rem;
}
main .container .wrap ul li:nth-of-type(34) .img, main .container .wrap ul li:nth-of-type(35) .img, main .container .wrap ul li:nth-of-type(36) .img {
  height: 18.2rem;
}
main .container .wrap ul li:nth-of-type(37) .img, main .container .wrap ul li:nth-of-type(38) .img, main .container .wrap ul li:nth-of-type(39) .img {
  height: 18rem;
}
main .container .wrap ul li:nth-of-type(40) .img, main .container .wrap ul li:nth-of-type(41) .img {
  height: 9.4rem;
}
main .container .wrap ul li:nth-of-type(40) {
  margin-left: 18%;
}
main .container .wrap ul li:nth-of-type(41) {
  margin-right: 18%;
}
main .container:before {
  position: absolute;
  width: 17.6rem;
  height: 23rem;
  background: url("../img/main-illust03.png") no-repeat 0px 0px/100% auto;
  content: "";
  top: -3.2rem;
  left: -3.8rem;
  transform: rotateZ(-9deg);
}

/* -----------------------------------------
		top
----------------------------------------- */
.top header {
  min-height: 51rem;
}
.top header .container h1 {
  text-align: left;
  left: 7.6rem;
  top: 5rem;
}
.top header .container .schedule {
  text-align: left;
  left: 8rem;
  top: 27.3rem;
}
.top header .container .illust {
  position: absolute;
  right: 6.5rem;
  top: 3rem;
}
.top header .container .copy {
  position: absolute;
  top: 38rem;
  left: 8.4rem;
}
.top main .container {
  border: none;
  padding: 0;
  background: none;
}
.top main .container .top-contents {
  margin: 0 0 2rem;
}
.top main .container .top-contents.type02 {
  background: url("../img/top/contents02.png") no-repeat center top/100% auto;
  padding: 14rem 0 0 1rem;
}
.top main .container .top-contents.type02 ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.top main .container .top-contents.type02 ul li {
  width: 46%;
  margin: 0 0 .8%;
}
.top main .container .top-contents.type02 p {
  margin: 2rem 0 0 4rem;
  padding-bottom: 6rem;
}
.top footer .footer-host {
  padding: 3rem 13rem;
}
.top footer .footer-host dl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.top footer .footer-host dl dt, .top footer .footer-host dl dd {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0;
}
.top footer .footer-host dl dt a {
  background: #fff;
  border: 1px solid #000;
  border-radius: 10rem;
  padding: .1rem 0 .3rem;
  min-width: 19rem;
  display: inline-block;
  line-height: 2rem;
  margin-right: 1rem;
}
.top footer .footer-host dl dt a:hover {
  background: #000;
  color: #fff;
}
.top footer .footer-host dl dd {
  padding: 0 0 .6rem;
  color: #fff;
  font-weight: 500;
}

.campaign {
  background: url("../img/campaign/2x/bg.webp") no-repeat center top/100% auto;
}
.campaign header {
  min-height: 51rem;
}
.campaign header .summary {
  background: #000;
}
.campaign header .container h1 {
  text-align: left;
  left: 0;
  top: 6rem;
}
.campaign header .container .schedule {
  right: auto;
  top: 29.3rem;
  width: auto;
  left: 2rem;
}
.campaign header .container .illust {
  position: absolute;
  right: 6.5rem;
  top: 3rem;
}
.campaign header .container .copy {
  position: absolute;
  top: 3rem;
  left: 47.4rem;
  z-index: 1;
}
.campaign header .container .logo {
  position: absolute;
  left: 81rem;
  top: 32rem;
}
.campaign main {
  margin: 0;
}
.campaign main .container {
  border: none;
  padding: 0;
  background: none;
}
.campaign main .container .top-contents {
  margin: 0 0 2rem;
}
.campaign main .container .top-contents.type02 {
  background: url("../img/campaign/contents02-bg.webp") no-repeat center top/100% auto;
  padding: 14rem 0 0 1rem;
}
.campaign main .container .top-contents.type02 ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.campaign main .container .top-contents.type02 ul li {
  width: 42%;
  margin: 0 1.4% .8%;
}
.campaign main .container .top-contents.type02 p {
  margin: 2rem 0 0 4rem;
  padding-bottom: 6rem;
}
.campaign footer {
  background: #1d2088;
}
.campaign footer .footer-host {
  padding: 3rem 13rem;
}
.campaign footer .footer-host dl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.campaign footer .footer-host dl dt, .campaign footer .footer-host dl dd {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0;
}
.campaign footer .footer-host dl dt a {
  background: #fff;
  border: 1px solid #000;
  border-radius: 10rem;
  padding: .1rem 0 .3rem;
  min-width: 19rem;
  display: inline-block;
  line-height: 2rem;
  margin-right: 1rem;
}
.campaign footer .footer-host dl dt a:hover {
  background: #000;
  color: #fff;
}
.campaign footer .footer-host dl dd {
  padding: 0 0 .6rem;
  color: #fff;
  font-weight: 500;
}
.campaign footer small {
  background: #be1e21;
}

.tool2024 {
  background: url("../img/campaign/bg.webp") no-repeat center top/auto 100%;
}
.tool2024 header {
  min-height: 44rem;
}
.tool2024 header .container h1 {
  text-align: left;
  left: 5.6rem;
  top: -2rem;
}
.tool2024 header .container .schedule {
  right: 13rem;
  top: 1.3rem;
  width: auto;
  left: auto;
}
.tool2024 header .container .copy {
  position: absolute;
  top: 37rem;
  left: 11.4rem;
  z-index: 1;
}
.tool2024 main .container {
  border-color: #E60012;
}
.tool2024 main .container .title {
  background: #E60012;
}
.tool2024 main .container .wrap ul li {
  margin: 0 0 5rem;
}
.tool2024 main .container .wrap ul li .img {
  height: auto;
}
.tool2024 main .container .wrap ul li:nth-of-type(37) .img, .tool2024 main .container .wrap ul li:nth-of-type(38) .img, .tool2024 main .container .wrap ul li:nth-of-type(39) .img {
  height: 24rem;
}
.tool2024 main .container .wrap ul li:nth-of-type(40) .img, .tool2024 main .container .wrap ul li:nth-of-type(41) .img {
  height: 16.8rem;
}
.tool2024 main .container .wrap ul li:nth-of-type(40) {
  margin-left: 16%;
}
.tool2024 main .container .wrap ul li:nth-of-type(41) {
  margin-right: 16%;
}
.tool2024 footer small {
  background: #E60012;
}

.tool2025 {
  background: url("../img/tool/2x/bg.webp") no-repeat center top/100% auto;
}
.tool2025 header {
  min-height: 64rem;
}
.tool2025 header .container h1 {
  text-align: left;
  left: 0;
  top: 1rem;
}
.tool2025 header .container .schedule {
  right: auto;
  top: 24.3rem;
  width: auto;
  left: 2rem;
}
.tool2025 header .container .illust {
  position: absolute;
  right: 6.5rem;
  top: -2rem;
}
.tool2025 header .container .copy {
  position: absolute;
  top: -2rem;
  left: 47.4rem;
  z-index: 1;
}
.tool2025 header .container .logo {
  position: absolute;
  left: 81rem;
  top: 27rem;
}
.tool2025 header .container .btn {
  position: absolute;
  left: 7rem;
  top: 43rem;
}
.tool2025 header .container .btn a:hover {
  opacity: 1;
  filter: brightness(1.1);
}
.tool2025 header .container .btn a:hover img {
  opacity: 1;
}
.tool2025 main {
  margin: 0 0 4rem;
}
.tool2025 main .container {
  padding: 0 4rem;
  border-color: #be1e21;
}
.tool2025 main .container .title {
  background: #be1e21;
}
.tool2025 main .container .wrap ul li {
  margin: 0 0 4rem;
}
.tool2025 main .container .wrap ul li .img {
  height: auto;
}
.tool2025 main .container .wrap ul li.w100 {
  width: 100%;
}
.tool2025 main .container .wrap ul li:nth-of-type(14) .img, .tool2025 main .container .wrap ul li:nth-of-type(15) .img, .tool2025 main .container .wrap ul li:nth-of-type(16) .img {
  height: 28.8rem;
}
.tool2025 main .container .wrap ul li:nth-of-type(17) .img, .tool2025 main .container .wrap ul li:nth-of-type(18) .img, .tool2025 main .container .wrap ul li:nth-of-type(19) .img {
  height: 29.7rem;
}
.tool2025 footer small {
  background: #000;
}