@charset "UTF-8";
@media screen and (min-width: 1080px) {
  p {
    font-size: 1.25vw;
    line-height: 2.6vw;
    font-feature-settings: "pwid";
  }

  main section>p {
    padding: 0 0 3.25vw;
    font-size: 1.04vw;
    line-height: 2.08vw;
    font-weight: 500;
    letter-spacing: 0;
  }

  #mainVPc {
    position: relative;
    z-index: 16;
  }

  .ttlImg.pcOnly {
    display: block;
  }

  .controllScrollOver {
    position: relative;
  }

  .controllScrollButtonWrap {
    right: 9%;
    left: initial;
    top: 27%;
    width: auto;
    display: block;
  }

  .controllScrollButtonWrap .controllScrollButtonNext {
    display: block;
  }

  .controllScrollButtonWrap button {
    display: block;
    background-color: #fff;
    height: 4.32vw;
    width: 4.32vw;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
    border-radius: 50%;
  }

  /* .controllScrollButtonWrap .controllScrollButtonNext svg * {
    fill: #000;
  } */

  .controllScrollButtonWrap .controllScrollButtonNext img {
    width: .8vw;
  }

  .controllScrollButtonPrev {
    display: none;
  }

  .controllScrollButtonNext {
    right: -5vw;
  }

  #intro {
    height: auto;
  }

  #intro div {
    width: 31.77vw;
    margin: -11vw 0 10.5vw 26vw;
  }

  #intro p,
  #intro p:last-of-type {
    width: 31.77vw;
    letter-spacing: .07vw;
  }

  #intro img:last-child {
    position: absolute;
    z-index: 18;
    right: 2vw;
    top: -11vw;
    width: 12.24vw;
    margin: 0 67.5vw 0vw 0;
  }

  #keywordList {
    padding: 0 6.4vw;
    height: auto;
  }
  
  #keywordList .list,
  #keywordList.active .list{
    height: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    padding: 0 3.4%;
  }

  #keywordList h2 {
    width: 100%;
    height: 4.17vw;
    text-align: center;
    margin-bottom: 1vw;
  }

  #keywordList h2 img {
    width: 21.5vw;
    height: auto;
    margin: auto;
  }

  #keywordList a {
    display: flex;
    justify-content: space-between;
    margin: 2.9vw 0 0 0;
    height: 4.15vw;
    font-size: 1.2vw;
    width: auto;
    padding: 0 1.6vw;
    border-radius: 9999px;
  }
  
  #keywordList a:nth-of-type(5){
    margin-left: 7.5%;
  }
  #keywordList a:nth-of-type(7){
    margin-right: 7.5%;
  }
  #keywordList a:nth-of-type(8){
    margin-left: 10.5%;
  }
  #keywordList a:nth-of-type(10){
    margin-right: 10.5%;
  }
  #keywordList a:nth-of-type(11){
    margin-left: 15.5%;
  }
  #keywordList a:nth-of-type(13){
    margin-right: 15.5%;
  }

  #keywordList a img {
    width: 1.2vw;
    height: auto;
    margin: 0 0 0 0.89vw;
  }


  #viewAll {
    display: none;
  }

  h1,
  .greenRead {
    font-size: 2.08vw;
    line-height: 3.13vw;
    padding: 0 0 1.5vw;
    letter-spacing: .15vw;
  }

  .greenBtn {
    margin: 0;
    width: 27.17vw;
    height: 5.31vw;
    padding: 0 2.24vw 0 2.03vw;
    font-size: 1.3vw;
  }

  .greenBtn img {
    width: 2.02vw;
    transition: all .4s;
  }
  .greenBtn:hover img {
    transform: translateX(.4vw);
  }



  main section h1 {
    padding: 0;
    align-items: center;
    margin: 13.02vw 0 3.13vw;
  }

  main section h1 span {
    height: 6.25vw;
    width: 6.25vw;
    margin-right: 3.34vw;
    font-size: 3.3vw;
  }

  .retsu1 {
    height: 2.98vw;
    width: auto;
  }

  .retsu2 {
    height: 7.1vw;
    width: auto;
  }

  .controllScrollWrap .controllScrollItemWrap li {
    margin: 0 2.6vw 0 0;
  }

  .controllScrollWrap .controllScrollItemWrap li:first-child {
    margin: 0 2.6vw 0 0;
  }

  main section h1 img {
    height: 3.1vw;
    width: auto;
  }

  main section h1 span img {
    width: 4.25vw;
  }

  .ttlImg.spOnly {
    display: none;
  }

  .ttlImg {
    /* position: absolute; */
    height: auto;
  }

  #Q01Wrap,
  #Q02Wrap,
  #Q03Wrap,
  #Q04Wrap,
  #Q05Wrap,
  #Q06Wrap,
  #Q07Wrap,
  #Q08Wrap,
  #Q09Wrap,
  #Q10Wrap,
  #Q11Wrap,
  #Q12Wrap,
  #Q13Wrap {
    margin: 0 14.01vw;
  }


  #Q07Wrap li.controllScrollItem,
  #Q08Wrap li.controllScrollItem,
  #Q10Wrap li.controllScrollItem,
  #Q11Wrap li.controllScrollItem,
  #Q12Wrap li.controllScrollItem,
  #Q13Wrap li.controllScrollItem {
    height: 14.49vw;
    width: 17.87vw;
    font-size: 1.04vw;
    margin-bottom: 2.4vw;
    letter-spacing: 0;
    font-weight: 400;
  }

  #Q07Wrap li.controllScrollItem img,
  #Q08Wrap li.controllScrollItem img,
  #Q10Wrap li.controllScrollItem img,
  #Q11Wrap li.controllScrollItem img,
  #Q12Wrap li.controllScrollItem img,
  #Q13Wrap li.controllScrollItem img {
    margin: 0 0 0.86vw;
  }

  .controllScrollWrap .controllScrollItemWrap li h3,
  .controllScrollWrap .controllScrollItemWrap li p {
    font-size: 1.04vw;
    line-height: 2.08vw;
    margin: 0;
  }

  .controllScrollWrap .controllScrollItemWrap li h3 {
    margin: .3vw 0;
    font-size: 1.3vw;
  }

  #Q01Wrap {
    position: relative;
  }

  #Q01Wrap .ttlImg {
    position: absolute;
    right: 0;
    width: 35.99vw;
    margin: 0 0 0 0;
  }

  #Q01Wrap h1 {
    margin: 12.97vw 0 3.46vw;
  }

  #Q01Wrap li.controllScrollItem {
    height: 14.17vw;
    width: 19.95vw;
    margin-bottom: 3.34vw;
  }

  #Q01Wrap p {
    width: 27.14vw;
  }

  #Q01Wrap .controllScrollOver {
    width: 27.14vw;
    margin: 0;
  }

  #Q02Wrap .ttlImg {
    position: absolute;
    right: 7vw;
    width: 39.51vw;
    margin: 0;
  }

  #Q02Wrap h1 {
    margin: 12.97vw 0 3.46vw;
  }

  #Q02Wrap p {
    width: 31.63vw;
  }

  #Q02Wrap .controllScrollOver {
    width: 55.73vw;
    margin: 0;
  }

  #Q02Wrap .controllScrollItemWrap li {
    width: 19.9vw;
    height: 14.11vw;
    font-size: 0.99vw;
    line-height: 2.29vw;
    margin-bottom: 2.81vw;
  }

  #Q02Wrap .controllScrollButtonWrap {
    right: 5%;
  }

  #Q03Wrap .ttlImg {
    position: absolute;
    right: 0;
    top: -1vw;
    width: 31.94vw;
    margin: 0 auto;
  }

  #Q03Wrap .controllScrollItemWrap li img {
    margin-bottom: .5vw;
  }

  #Q03Wrap .controllScrollItemWrap:last-of-type li {
    height: 28.98vw;
    width: 21.04vw;
    margin-bottom: 2vw;
  }

  #Q03Wrap .greenRead {
    padding: 2vw 0 2.5vw;
  }

  #Q03Wrap .controllScrollButtonWrap {
    right: 4%;
    top: 41%;
  }

  #Q03Wrap .controllScrollOver:first-of-type {
    margin-bottom: 1vw;
  }

  #Q03Wrap .controllScrollOver:last-of-type li {
    height: 26.98vw;
  }

  #Q04Wrap .ttlImg {
    position: absolute;
    /* height: 16.3vw; */
    height: auto;
    width: 29.58vw;
    margin: -1vw 0 0;
  }

  #Q04Wrap>p {
    width: 35.99vw;
    margin-left: 35.99vw;
  }

  #Q04Wrap li.controllScrollItem {
    width: 21.04vw;
    height: 27.66vw;
  }

  #Q04Wrap li.controllScrollItem img {
    margin-bottom: .62vw;
  }

  #Q04Wrap .controllScrollOver {
    margin-top: 3vw;
  }

  #Q04Wrap .controllScrollButtonWrap {
    top: 43%;
    right: 4%;
  }

  #Q05Wrap .ttlImg {
    width: 35.99vw;
    margin: 0;
    position: absolute;
    right: 0vw;
  }

  #Q05Wrap>p {
    width: 27.14vw;
  }

  #Q05Wrap>img {
    width: 27.14vw;
    margin-top: -1.81vw;

  }

  #Q05Wrap>a {
    position: relative;
    margin-top: -2.81vw;
    z-index: 3;
  }

  #Q06Wrap li {
    width: 10.05vw;
    height: 10.16vw;
    padding: 1vw 0 0;
    margin: 0 2.19vw 0 0;
  }

  #Q06Wrap li .number {
    font-size: 1.93vw;
  }

  #Q06Wrap li p {
    font-size: 1.09vw;
    line-height: 1.46vw;
    height: 4.66vw;
  }

  #Q06Wrap .ttlImg {
    width: 38.59vw;
    margin: -1vw 0 0 -3vw;
  }

  #Q06Wrap .controllScrollOver li:first-child {
    margin-left: 0;
  }

  #Q06Wrap>p {
    width: 27.14vw;
    margin-left: 44.84vw;
  }

  #Q06Wrap>p:first-of-type {
    margin-top: -20vw;
  }

  #Q06Wrap .controllScrollOver {
    width: 27.14vw;
    margin: 0 0 0 44.84vw;
  }
  #Q06Wrap .controllScrollWrap {
    padding-left: 0;
  }
  #Q06Wrap .controllScrollWrap::before {
    width: 93vw;
  }

  #Q06Wrap a {
    margin: -5vw 0 0 0;

  }

  #Q06Wrap .controllScrollButtonWrap .controllScrollButtonNext {
    top: 0vw;
    right: -8%;
    height: 4.32vw;
    width: 4.32vw;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
  }

  /* #Q06Wrap .controllScrollButtonWrap .controllScrollButtonNext svg *{
    fill: #000;
   } */
  #Q06Wrap .controllScrollButtonWrap .controllScrollButtonNext img {
    width: 0.42vw;
    filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(9%) hue-rotate(66deg) brightness(107%) contrast(100%);
  }

  #Q06Wrap .controllScrollButtonWrap {
    right: -9%;

  }

  #Q07Wrap .ttlImg {
    width: 30.94vw;
    margin: -10vw 0vw -37vw 45vw;
  }

  #Q07Wrap>p {
    width: 27.14vw;
  }

  #Q07Wrap h1>img {
    height: 7.1vw;
  }

  #Q07Wrap .controllScrollOver {
    width: 55.75vw;
    margin: 0;
  }

  #Q07Wrap .controllScrollButtonWrap {
    right: 5%;
  }

  #Q08Wrap .ttlImg {
    width: 37vw;
    margin: 0;
    position: absolute;
    right: -6vw;
    top: 0;
  }

  #Q08Wrap>p {
    width: 27.14vw;
  }

  #Q08Wrap .controllScrollOver {
    position: relative;
    width: 55.46vw;
    margin: 0;

  }

  #Q08Wrap .controllScrollButtonWrap {
    right: 5%;
  }

  #Q09Wrap>p {
    width: 27.14vw;
    margin-left: 44.84vw;
    padding: 0 0 2.25vw;
  }

  #Q09Wrap>img,
  #Q09Wrap>a {
    margin-left: 44.84vw;
    width: 27.14vw;
  }

  #Q09Wrap>img.spOnly {
    display: none;
  }

  #Q09ImgPc {
    margin: 0 0 -6vw;
  }

  #Q09Wrap>p:first-of-type {
    margin-top: -33vw;
  }

  #Q09Wrap .ttlImg {
    width: 38.54vw;
    margin: 0 0 0 -3vw;
  }

  #Q10Wrap .ttlImg {
    position: absolute;
    width: 29.51vw;
    margin: 0;
    right: -2vw;
  }

  #Q10Wrap p {
    width: 35.99vw;
  }

  #Q10Wrap .controllScrollOver {
    width: 40.99vw;
    margin: 0;
  }

  #Q10Wrap li.controllScrollItem {
    width: 16.87vw;
  }

  #Q11Wrap .ttlImg {
    width: 29.69vw;
    margin: -1vw 0 0 -3vw;
  }

  #Q11Wrap>p {
    width: 35.99vw;
    margin-left: 35.99vw;
    padding: 0 0 1.75vw;
  }

  #Q11Wrap>p:first-of-type {
    margin-top: -35.99vw;
  }

  #Q11Wrap .controllScrollOver {
    width: 40.99vw;
    margin: 0 0 0 35.99vw;
  }

  #Q11Wrap li.controllScrollItem {
    width: 16.67vw;
  }

  #Q11Wrap a {
    margin: 0 0 0 35.99vw;

  }

  #Q12Wrap .ttlImg {
    position: absolute;
    width: 30.42vw;
    margin: 1vw -3vw 0 0;
    right: 0;
  }

  #Q12Wrap>p {
    width: 35.99vw;
  }

  #Q12Wrap li.controllScrollItem {
    width: 16.67vw;
  }

  #Q13Wrap .ttlImg {
    position: absolute;
    width: 38.09vw;
    margin: 0;
    right: -7.5vw;
  }

  #Q13Wrap .controllScrollButtonWrap {
    right: 5%;
  }

  #Q13Wrap>p {
    width: 27.14vw;
  }

  #Q13Wrap .controllScrollOver {
    width: 55.79vw;
    margin: 0;
  }

  .detail {
    height: 3.8vw;
    width: 21.04vw;
    font-size: 1.41vw;
    border: 2px solid #02797A;
    transition: all .4s;
  }
  .detail:hover{
    background-color: #fff;
    color: #02797A;
  }
}