@charset "utf-8";

/*
========== CSS of CONTENTS ==========

Created:
Modified:

1:base
2:header
3:contents
4:footer
5:others

========== /CSS of CONTENTS ==========
*/

/* 1:base
   -------------------------------------- */
html {
 font-size: 62.5%
}
body {
  margin: 0;
  background: #fff;
  text-align: left;
  font-size: 1.4rem;
  font-family:ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
  color: #484848;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,section,div,p,ul,li,dl,dt,dd {
  margin: 0;
  padding: 0;
}
ul, li {
  list-style-type: none;
}
a {
  color: #0080c6;
}
img {
  width: 100%;
  vertical-align: middle;
}
.taC {
  text-align: center;
}
.with_indent{
  padding-left: 1em;
  text-indent: -1em;
  list-style-position: inside;
}
.is-sp { display: block; }
.is-pc { display: none; }

@media (min-width: 768px) {
  .modImgOver:hover {
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    zoom: 1;
  }
  img {
    width: auto;
    vertical-align: top;
  }
  .is-sp { display: none; }
  .is-pc { display: block; }
}

/* 2:header
   -------------------------------------- */

/* .head
   ------------------------------ */
.head {
  position: relative;
}
.head_tsk_logo {
  position: absolute;
  top: calc(50% - (3.33vw/2));
  left: 5.33vw;
  width: 13.6vw;
  height: 3.33vw;
}
@media (min-width: 768px) {
  .head {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1000px;
    margin: 0 auto;
    height: 76px;
  }
  .head_tsk_logo {
    position: absolute;
    top: 36px;
    left: 0;
    width: auto;
    height: auto;
  }
}

/* 3:contents
   -------------------------------------- */

/* .welcome
   ------------------------------ */
.welcome {
  margin-bottom: 1.6vw;
}
@media (min-width: 768px) {
  .welcome {
    min-width: 1000px;
    height: 496px;
    margin: 0 auto 30px;
    background-image: url(../images/pc/welcome_bg.png);
    background-repeat: no-repeat;
    background-size: 1280px 496px;
    background-position: center top;
  }
  .welcome_img {
    width: 1000px;
    margin: 0 auto;
    padding-top: 268px;
    text-align: center;
  }
}

/* .sec
   ------------------------------ */
.sec {
  padding-bottom: 1vw;
}
.sec.sec08 {
  padding-bottom: 3vw;
}
@media (min-width: 768px) {
  .sec {
    padding-bottom: 0;
  }
  .sec.sec08 {
    padding-bottom: 0;
  }
}

/* .sec_head
   ---------------------- */
.sec_head {
  width: 89.33vw;
  margin: 0 auto 15.33vw;
}
.sec_img {
  margin-bottom: 9.33vw;
}
.sec_ttl {
  margin-bottom: 6.67vw;
}
.sec_txt {
  margin-bottom: 9.33vw;
}
.sec_purchase_btn > a:hover {
  opacity: .7;
}
@media (min-width: 768px) {
  .sec_head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 1000px;
    margin: 0 auto 55px;
  }
  .sec02 .sec_head,
  .sec04 .sec_head,
  .sec06 .sec_head,
  .sec08 .sec_head {
    flex-direction: row-reverse;
  }
  .sec_img {
    margin-left: 10px;
    margin-bottom: 0;
  }
  .sec_desc {
    width: 484px;
    margin-top: 20px;
  }
  .sec_ttl {
    margin-bottom: 25px;
  }
  .sec_txt {
    margin-bottom: 30px;
  }
  .sec_purchase_btn > a:hover {
    opacity: .7;
  }
}

/* .sec_report
   ---------------------- */
.sec_report {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 89.33vw;
  margin: 0 auto;
}
.sec_report_ttl {
  width: 6vw;
}
.sec_report_list {
  position: relative;
  width: 78.8vw;
  z-index: 998;
}
.sec_report_list::before {
  position: absolute;
  top: -2.67vw;
  right: -2.67vw;
  content: "";
  display: block;
  width: 21.33vw;
  height: 21.33vw;
  background-image: url(../images/sp/sec_report_pattern_s.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 999;
}
.sec_report_list > li > a:hover,
.sec_report_list > li > ul > li > a:hover {
  opacity: .7;
}
.sec_report_list > li:not(:first-child) {
  margin-top: -2.67vw;
}
.sec01 .sec_report_list > li > ul > li:not(:first-child) {
  margin-top: -2.67vw;
}
.sec07 .sec_report_list::before,
.sec08 .sec_report_list::before {
  top: 1.6vw;
}
@media (min-width: 768px) {
  .sec > div {
    width: 1000px;
    margin: 0 auto;
  }
  .sec_report {
    width: 1000px;
    margin: 0 auto;
  }
  .sec02 .sec_report,
  .sec04 .sec_report,
  .sec06 .sec_report,
  .sec08 .sec_report {
    flex-direction: row-reverse;
  }
  .sec_report_ttl {
    width: 52px;
    margin-left: 20px;
  }
  .sec02 .sec_report_ttl,
  .sec04 .sec_report_ttl,
  .sec06 .sec_report_ttl,
  .sec08 .sec_report_ttl {
    margin-left: 0;
    margin-right: 20px;
  }
  .sec_report_list {
    width: 820px;
    margin-right: 58px;
  }
  .sec02 .sec_report_list,
  .sec04 .sec_report_list,
  .sec06 .sec_report_list,
  .sec08 .sec_report_list {
    margin-left: 58px;
    margin-right: 0;
  }
  .sec07 .sec_report_list,
  .sec08 .sec_report_list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .sec07 .sec_report_list > li:not(:first-child),
  .sec08 .sec_report_list > li:not(:first-child) {
      margin-top: 0;
  }
  .sec07 .sec_report_list > li:nth-child(n + 3) {
      margin-top: 25px;
  }
  .sec_report_list::before {
    position: absolute;
    top: auto;
    bottom: -12px;
    right: -34px;
    content: "";
    display: block;
    width: 112px;
    height: 112px;
    background-image: url(../images/pc/sec_report_pattern_right.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 999;
  }
  .sec01 .sec_report_list::before {
    bottom: 270px;
  }
  .sec02 .sec_report_list::before,
  .sec04 .sec_report_list::before,
  .sec06 .sec_report_list::before,
  .sec08 .sec_report_list::before {
    right: auto;
    left: -34px;
    bottom: 20px;
    background-image: url(../images/pc/sec_report_pattern_left.png);
  }
  .sec_report_list > li:not(:first-child) {
    margin-top: 25px;
  }
  .sec01 .sec_report_list > li > ul > li:not(:first-child) {
    margin-top: 0;
  }
  .sec01 .sec_report_list > li > ul {
    width: 820px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .sec_report_list > li > a:hover,
  .sec_report_list > li > ul > li > a:hover {
    opacity: .7;
  }
  .sec07 .sec_report_list::before {
    top: auto;
    bottom: 48px;
  }
  .sec08 .sec_report_list::before {
    top: auto;
    bottom: -28px;
  }
}

/* .sec01 〜 .sec08
   ------------------------------ */
.sec02,
.sec04,
.sec06,
.sec08 {
  position: relative;
  padding-top: 16.5vw;
  background-color: #f8ebd5;
  background-image: url(../images/sp/main_bg_01_s.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.sec03,
.sec07 {
  position: relative;
  padding-top: 16.5vw;
  background-color: #fff;
  background-image: url(../images/sp/main_bg_02_s.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.sec05 {
  position: relative;
  margin-top: 6vw;
  padding-top: 2vw;
  background-color: #fff;
}
@media (min-width: 768px) {
  .sec02,
  .sec04,
  .sec06,
  .sec08 {
    max-width: 1280px;
    min-width: 1000px;
    margin: 0 auto;
    margin-top: -10px;
    padding-top: 150px;
    background-color: #f8ebd5;
    background-image: url(../images/pc/main_bg_01.png);
    background-repeat: no-repeat;
    background-size: 1280px 110px;
    background-position: center top;
  }
  /*.sec02::before,
  .sec04::before,
  .sec06::before,
  .sec08::before {
    content: "";
    display: block;
    width: 1280px;
    height: 110px;
    position: absolute;
    top: 0;
    left: calc(50% - (1280px/2));
    background-image: url(../images/pc/main_bg_01.png);
    background-repeat: no-repeat;
    background-size: 1280px 110px;
    background-position: center top;
  }*/
  .sec03,
  .sec07 {
    position: relative;
    margin-top: -20px;
    padding-top: 130px;
    background-color: #fff;
    background-image: url(../images/pc/main_bg_02.png);
    background-repeat: no-repeat;
    background-size: 1280px 110px;
    background-position: center top;
  }
  .sec05 {
    position: relative;
    margin-top: 0;
    padding-top: 60px;
    background-color: #fff;
  }
  /*.sec03::before,
  .sec07::before {
    content: "";
    display: block;
    width: 1280px;
    height: 110px;
    position: absolute;
    top: 0;
    left: calc(50% - (1280px/2));
    background-image: url(../images/pc/main_bg_02.png);
    background-repeat: no-repeat;
    background-size: 1280px 110px;
    background-position: center top;
  }*/
}

/* .tskonlineshop
   ------------------------------ */
.tskonlineshop {
  position: relative;
  width: 100vw;
  height: 107.47vw;
  padding-top: 1.33vw;
  background-image: url(../images/sp/tskonlineshop_bg_s.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.tskonlineshop_block {
  width: 96.53vw;
  margin: 0 auto;
}
.tskonlineshop_bnr {
  position: absolute;
  top: 54vw;
  left: calc(50% - (89.2vw/2));
  width: 89.2vw;
}
.tskonlineshop_btn {
  position: absolute;
  top: 74.4vw;
  left: calc(50% - (90.12vw/2));
  width: 90.13vw;
}
.tskonlineshop_bnr > a:hover,
.tskonlineshop_btn > a:hover {
  opacity: .7;
}
@media (min-width: 768px) {
  .tskonlineshop {
    min-width: 1000px;
    height: 566px;
    margin: 0 auto;
    background-image: url(../images/pc/tskonlineshop_bg.png);
    background-repeat: no-repeat;
    background-size: 1280px 566px;
    background-position: center top;
  }
  .tskonlineshop_block {
    width: 1014px;
    margin: 30px auto 0;
  }
  .tskonlineshop_bnr {
    position: absolute;
    top: 230px;
    left: calc(50% - (812px/2));
    width: 812px;
  }
  .tskonlineshop_btn {
    position: absolute;
    top: 408px;
    left: calc(50% - (484px/2));
    width: 484px;
  }
  .tskonlineshop_bnr > a:hover,
  .tskonlineshop_btn > a:hover {
    opacity: .7;
  }
}