@charset "UTF-8";
/* 変数宣言 */
/* 変数宣言 */
body {
  /*container*/
}
body #container {
  /*main*/
}
body #container main {
  overflow: hidden;
  /*mv*/
  /*group*/
  /*item*/
  /*flow*/
}
body #container main #mv {
  /*wrap*/
}
body #container main #mv .wrap {
  background-image: url("../../../img/whats_kodate/mv_sp.jpg");
  background-size: cover;
  width: 100vw;
  height: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  /*title*/
}
@media screen and (min-width: 768px) {
  body #container main #mv .wrap {
    background-image: url("../../../img/whats_kodate/mv_pc.jpg");
    height: 42.8571428571vw;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  body #container main #mv .wrap {
    background-image: url("../../../img/whats_kodate/mv_pc@2x.jpg");
  }
}
body #container main #mv .wrap .title {
  /*shell*/
}
body #container main #mv .wrap .title .shell {
  /*main_t*/
  /*sub_t*/
}
body #container main #mv .wrap .title .shell .main_t {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5vw;
  justify-content: center;
  margin-bottom: 3.75vw;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  body #container main #mv .wrap .title .shell .main_t {
    margin-bottom: 2.8571428571vw;
    gap: 0 1.4285714286vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #mv .wrap .title .shell .main_t {
    margin-bottom: 40px;
    gap: 0 20px;
  }
}
body #container main #mv .wrap .title .shell .main_t p {
  font-size: 7.25vw;
  line-height: 1;
  font-family: gill-sans-nova, sans-serif;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  text-shadow: 0.5vw 0.5vw 0.5vw rgb(0, 0, 0);
}
@media screen and (min-width: 768px) {
  body #container main #mv .wrap .title .shell .main_t p {
    font-size: 5.2142857143vw;
    text-shadow: 0.1428571429vw 0.1428571429vw 0.3571428571vw rgb(0, 0, 0), 0.1428571429vw 0.1428571429vw 0.3571428571vw rgb(0, 0, 0);
  }
}
@media screen and (min-width: 1400px) {
  body #container main #mv .wrap .title .shell .main_t p {
    font-size: 73px;
    text-shadow: 2px 2px 5px rgb(0, 0, 0), 2px 2px 5px rgb(0, 0, 0);
  }
}
body #container main #mv .wrap .title .shell .main_t figure {
  width: 42.25vw;
  filter: drop-shadow(0.5vw 0.5vw 0.25vw rgba(0, 0, 0, 0.8)) drop-shadow(0.5vw 0.5vw 0.25vw rgba(0, 0, 0, 0.8));
}
@media screen and (min-width: 768px) {
  body #container main #mv .wrap .title .shell .main_t figure {
    width: 30.3571428571vw;
    filter: drop-shadow(0.1428571429vw 0.1428571429vw 0.0714285714vw rgba(0, 0, 0, 0.6)) drop-shadow(0.1428571429vw 0.1428571429vw 0.0714285714vw rgba(0, 0, 0, 0.6));
  }
}
@media screen and (min-width: 1400px) {
  body #container main #mv .wrap .title .shell .main_t figure {
    width: 425px;
    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.6)) drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.6));
  }
}
body #container main #mv .wrap .title .shell .main_t figure svg {
  width: 100%;
  vertical-align: middle;
  fill: #fff;
}
body #container main #mv .wrap .title .shell .main_t div {
  line-height: 1;
  font-size: 7.25vw;
  color: #FFFFFF;
  text-shadow: 0.5vw 0.5vw 0.5vw rgb(0, 0, 0);
}
@media screen and (min-width: 768px) {
  body #container main #mv .wrap .title .shell .main_t div {
    font-size: 5.2142857143vw;
    text-shadow: 0.1428571429vw 0.1428571429vw 0.3571428571vw rgb(0, 0, 0), 0.1428571429vw 0.1428571429vw 0.3571428571vw rgb(0, 0, 0);
  }
}
@media screen and (min-width: 1400px) {
  body #container main #mv .wrap .title .shell .main_t div {
    font-size: 73px;
    text-shadow: 2px 2px 5px rgb(0, 0, 0), 2px 2px 5px rgb(0, 0, 0);
  }
}
body #container main #mv .wrap .title .shell .sub_t {
  text-align: center;
  line-height: 1;
}
body #container main #mv .wrap .title .shell .sub_t h1 {
  line-height: 1;
  font-size: 3.75vw;
  font-family: toppan-bunkyu-gothic-pr6n, serif;
  position: relative;
  display: inline-block;
  color: #FFFFFF;
  text-shadow: 0.5vw 0.5vw 0.5vw rgb(0, 0, 0);
}
@media screen and (min-width: 768px) {
  body #container main #mv .wrap .title .shell .sub_t h1 {
    font-size: 2.7857142857vw;
    text-shadow: 0.1428571429vw 0.1428571429vw 0.3571428571vw rgb(0, 0, 0), 0.1428571429vw 0.1428571429vw 0.3571428571vw rgb(0, 0, 0);
  }
}
@media screen and (min-width: 1400px) {
  body #container main #mv .wrap .title .shell .sub_t h1 {
    font-size: 39px;
    text-shadow: 2px 2px 5px rgb(0, 0, 0), 2px 2px 5px rgb(0, 0, 0);
  }
}
body #container main #mv .wrap .title .shell .sub_t h1:after {
  content: "";
  display: block;
  height: 0.25vw;
  width: 12.5vw;
  background-color: #FFFFFF;
  position: absolute;
  top: 50%;
  left: calc(100% + 5vw);
  transform: translateY(-50%);
  filter: drop-shadow(0.5vw 0.5vw 0px rgba(0, 0, 0, 0.8));
}
@media screen and (min-width: 768px) {
  body #container main #mv .wrap .title .shell .sub_t h1:after {
    width: 11vw;
    height: 0.0714285714vw;
    left: calc(100% + 3.2142857143vw);
    filter: drop-shadow(0.1428571429vw 0.1428571429vw 0.0714285714vw rgba(0, 0, 0, 0.6)) drop-shadow(0.1428571429vw 0.1428571429vw 0.0714285714vw rgba(0, 0, 0, 0.6));
  }
}
@media screen and (min-width: 1400px) {
  body #container main #mv .wrap .title .shell .sub_t h1:after {
    width: 154px;
    height: 1px;
    left: calc(100% + 45px);
    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.6)) drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.6));
  }
}
body #container main #mv .wrap .title .shell .sub_t h1:before {
  content: "";
  display: block;
  height: 0.25vw;
  width: 12.5vw;
  background-color: #FFFFFF;
  position: absolute;
  top: 50%;
  right: calc(100% + 5vw);
  transform: translateY(-50%);
  filter: drop-shadow(0.5vw 0.5vw 0px rgba(0, 0, 0, 0.8));
}
@media screen and (min-width: 768px) {
  body #container main #mv .wrap .title .shell .sub_t h1:before {
    width: 11vw;
    height: 0.0714285714vw;
    right: calc(100% + 3.2142857143vw);
    filter: drop-shadow(0.1428571429vw 0.1428571429vw 0.0714285714vw rgba(0, 0, 0, 0.6)) drop-shadow(0.1428571429vw 0.1428571429vw 0.0714285714vw rgba(0, 0, 0, 0.6));
  }
}
@media screen and (min-width: 1400px) {
  body #container main #mv .wrap .title .shell .sub_t h1:before {
    width: 154px;
    height: 1px;
    right: calc(100% + 45px);
    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.6)) drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.6));
  }
}
body #container main #group {
  background-color: #FFFFFF;
  position: relative;
  z-index: 2;
  /*wrap*/
}
body #container main #group .wrap {
  /*top*/
  /*bottom*/
}
@media (max-width: 767px) {
  body #container main #group .wrap {
    padding-top: 5vw;
  }
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap {
    padding: 3.2142857143vw 0 6.0714285714vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #group .wrap {
    padding: 45px 0 85px;
  }
}
@media (max-width: 767px) {
  body #container main #group .wrap .top {
    margin-bottom: 12.5vw;
  }
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 83.9285714286vw;
    margin: 0 auto 6.4285714286vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #group .wrap .top {
    width: 1175px;
    margin: 0 auto 90px;
  }
}
body #container main #group .wrap .top .right {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 10vw;
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .top .right {
    margin-bottom: 0;
    width: calc(100% - 31.4285714286vw);
    order: 2;
    justify-content: space-between;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #group .wrap .top .right {
    width: calc(100% - 440px);
  }
}
body #container main #group .wrap .top .right .title {
  width: calc(100% - 65vw);
  display: flex;
  justify-content: center;
  order: 2;
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .top .right .title {
    order: 1;
    width: calc(100% - 31.4285714286vw);
    margin-top: -7.1428571429vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #group .wrap .top .right .title {
    width: calc(100% - 440px);
    margin-top: -100px;
  }
}
body #container main #group .wrap .top .right .title h2 {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-family: toppan-bunkyu-gothic-pr6n, serif;
  font-size: 5.75vw;
  line-height: 1.4;
  margin-right: 2.5vw;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .top .right .title h2 {
    font-size: 4.2142857143vw;
    margin-right: 0;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #group .wrap .top .right .title h2 {
    font-size: 59px;
  }
}
body #container main #group .wrap .top .right .thumb {
  width: 65vw;
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .top .right .thumb {
    width: 31.4285714286vw;
    order: 1;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #group .wrap .top .right .thumb {
    width: 440px;
  }
}
body #container main #group .wrap .top .right .thumb figure {
  width: 55vw;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .top .right .thumb figure {
    width: 100%;
    order: 2;
  }
}
body #container main #group .wrap .top .right .thumb figure img {
  width: 100%;
}
body #container main #group .wrap .top .right .thumb figure:first-of-type {
  margin-bottom: 3.75vw;
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .top .right .thumb figure:first-of-type {
    margin-bottom: 2.1428571429vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #group .wrap .top .right .thumb figure:first-of-type {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .top .left {
    width: 31.4285714286vw;
    order: 1;
    display: flex;
    align-items: center;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #group .wrap .top .left {
    width: 440px;
  }
}
body #container main #group .wrap .top .left .core p {
  width: 65.5vw;
  font-size: 3vw;
  line-height: 1.8;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .top .left .core p {
    font-size: 1vw;
    width: 100%;
    margin: 0 0 0 auto;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #group .wrap .top .left .core p {
    font-size: 14px;
  }
}
body #container main #group .wrap .top .left .core p:not(:last-of-type) {
  margin-bottom: 3.75vw;
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .top .left .core p:not(:last-of-type) {
    margin-bottom: 2.1428571429vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #group .wrap .top .left .core p:not(:last-of-type) {
    margin-bottom: 30px;
  }
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom {
    padding-bottom: 46.75vw;
  }
}
body #container main #group .wrap .bottom .shell {
  position: relative;
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell {
    padding-left: 13.75vw;
  }
}
body #container main #group .wrap .bottom .shell .base_img {
  width: 100%;
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell .base_img {
    width: 62.625vw;
  }
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .bottom .shell .base_img {
    width: 50.2857142857vw;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #group .wrap .bottom .shell .base_img {
    width: 704px;
  }
}
body #container main #group .wrap .bottom .shell .base_img img {
  width: 100%;
}
body #container main #group .wrap .bottom .shell .base_img img.img_pc {
  display: none;
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .bottom .shell .base_img img.img_pc {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  body #container main #group .wrap .bottom .shell .base_img img.img_sp {
    display: none;
  }
}
@media (min-width: 768px) {
  body #container main #group .wrap .bottom .shell .banner-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 65.5714285714vw;
    margin: 0 auto;
  }
}
@media (min-width: 1400px) {
  body #container main #group .wrap .bottom .shell .banner-line {
    width: 918px;
  }
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element {
    width: 31vw;
    position: absolute;
  }
}
@media (min-width: 768px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element {
    width: 15.2857142857vw;
  }
}
@media (min-width: 1400px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element {
    width: 214px;
  }
}
body #container main #group .wrap .bottom .shell .banner-line .banner-element a {
  width: 100%;
  display: block;
  border-style: solid;
  border-color: #231815;
  transition: 0.3s;
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element a {
    border-width: 0.25vw;
    height: 13.25vw;
    margin-bottom: 1.25vw;
  }
}
@media (min-width: 768px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element a {
    border-width: 0.0714285714vw;
    height: 6.5714285714vw;
    margin-bottom: 1.0714285714vw;
  }
}
@media (min-width: 1400px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element a {
    border-width: 1px;
    height: 92px;
    margin-bottom: 15px;
  }
}
body #container main #group .wrap .bottom .shell .banner-line .banner-element a figure {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1400px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element a:hover {
    transform: scale(1.02);
  }
}
body #container main #group .wrap .bottom .shell .banner-line .banner-element p {
  font-family: "gill-sans-nova", sans-serif;
  text-align: center;
  line-height: 1.1;
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element p {
    font-size: 3.5vw;
  }
}
@media (min-width: 768px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element p {
    font-size: 1.8571428571vw;
  }
}
@media (min-width: 1400px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element p {
    font-size: 26px;
  }
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--grandarchi {
    top: 28.125vw;
    left: 17.125vw;
  }
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--grandarchi a figure img {
    width: 25.125vw;
  }
}
@media (min-width: 768px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--grandarchi a figure img {
    width: 12.4285714286vw;
  }
}
@media (min-width: 1400px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--grandarchi a figure img {
    width: 174px;
  }
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--digitalcircus {
    top: 28.125vw;
    left: 51.125vw;
  }
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--digitalcircus a figure img {
    width: 26.875vw;
  }
}
@media (min-width: 768px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--digitalcircus a figure img {
    width: 13.2142857143vw;
  }
}
@media (min-width: 1400px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--digitalcircus a figure img {
    width: 185px;
  }
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--craftart {
    top: 63vw;
    left: 17.125vw;
  }
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--craftart a figure img {
    width: 24.25vw;
  }
}
@media (min-width: 768px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--craftart a figure img {
    width: 12.6428571429vw;
  }
}
@media (min-width: 1400px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--craftart a figure img {
    width: 177px;
  }
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--lib {
    top: 63vw;
    left: 51.5vw;
  }
}
@media (max-width: 767px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--lib a figure img {
    width: 23.75vw;
  }
}
@media (min-width: 768px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--lib a figure img {
    width: 12.3571428571vw;
  }
}
@media (min-width: 1400px) {
  body #container main #group .wrap .bottom .shell .banner-line .banner-element--lib a figure img {
    width: 173px;
  }
}
body #container main #item {
  background-image: url("../../../img/whats_kodate/item_bk_sp.jpg");
  background-size: cover;
  padding-bottom: 6.25vw;
  /*wrap*/
}
@media screen and (min-width: 768px) {
  body #container main #item {
    background-image: url("../../../img/whats_kodate/item_bk_pc.jpg");
    padding-bottom: 2.8571428571vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #item {
    padding-bottom: 40px;
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  body #container main #item {
    background-image: url("../../../img/whats_kodate/item_bk_pc@2x.jpg");
  }
}
body #container main #item .wrap {
  /*element_wrap*/
  /*brand_logo*/
}
body #container main #item .wrap .element_wrap {
  background-color: rgba(255, 255, 255, 0.6);
  width: 87.5vw;
  margin: 0 auto 7.5vw;
  padding: 10vw 0;
}
@media screen and (min-width: 768px) {
  body #container main #item .wrap .element_wrap {
    width: 65.6428571429vw;
    margin-bottom: 3.5714285714vw;
    padding: 5vw 0 7.1428571429vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #item .wrap .element_wrap {
    width: 919px;
    margin-bottom: 50px;
    padding: 70px 0 100px;
  }
}
body #container main #item .wrap .element_wrap .element:not(:last-of-type) {
  margin-bottom: 12.5vw;
}
@media screen and (min-width: 768px) {
  body #container main #item .wrap .element_wrap .element:not(:last-of-type) {
    margin-bottom: 5.3571428571vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #item .wrap .element_wrap .element:not(:last-of-type) {
    margin-bottom: 75px;
  }
}
body #container main #item .wrap .element_wrap .element .index_img {
  width: 12.25vw;
  margin: 0 auto 3.75vw;
}
@media screen and (min-width: 768px) {
  body #container main #item .wrap .element_wrap .element .index_img {
    width: 7vw;
    margin-bottom: 2.1428571429vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #item .wrap .element_wrap .element .index_img {
    width: 98px;
    margin-bottom: 30px;
  }
}
body #container main #item .wrap .element_wrap .element .index_img img {
  width: 100%;
}
body #container main #item .wrap .element_wrap .element h3 {
  line-height: 1;
  margin-bottom: 5vw;
  font-size: 5.25vw;
  font-weight: bold;
  font-family: futura-pt, sans-serif;
  text-align: center;
  letter-spacing: 0.2em;
  color: #231815;
}
@media screen and (min-width: 768px) {
  body #container main #item .wrap .element_wrap .element h3 {
    font-size: 3.0714285714vw;
    margin-bottom: 3.5714285714vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #item .wrap .element_wrap .element h3 {
    font-size: 43px;
    margin-bottom: 50px;
  }
}
body #container main #item .wrap .element_wrap .element .read .core:not(:last-of-type) {
  margin-bottom: 5vw;
}
@media screen and (min-width: 768px) {
  body #container main #item .wrap .element_wrap .element .read .core:not(:last-of-type) {
    margin-bottom: 3.5714285714vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #item .wrap .element_wrap .element .read .core:not(:last-of-type) {
    margin-bottom: 50px;
  }
}
body #container main #item .wrap .element_wrap .element .read .core h4 {
  font-size: 3.5vw;
  line-height: 1;
  margin-bottom: 2.5vw;
  color: #231815;
  text-align: center;
}
@media screen and (min-width: 768px) {
  body #container main #item .wrap .element_wrap .element .read .core h4 {
    font-size: 1.7142857143vw;
    margin-bottom: 1.4285714286vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #item .wrap .element_wrap .element .read .core h4 {
    font-size: 24px;
    margin-bottom: 20px;
  }
}
body #container main #item .wrap .element_wrap .element .read .core p {
  font-size: 3vw;
  line-height: 1.6;
  text-align: center;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  body #container main #item .wrap .element_wrap .element .read .core p {
    font-size: 1.5714285714vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #item .wrap .element_wrap .element .read .core p {
    font-size: 22px;
  }
}
@media screen and (min-width: 768px) {
  body #container main #item .wrap .element_wrap .element .read .core p .br_sp {
    display: none;
  }
}
body #container main #item .wrap .brand_logo {
  width: 29.5vw;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  body #container main #item .wrap .brand_logo {
    width: 16.9285714286vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #item .wrap .brand_logo {
    width: 237px;
  }
}
body #container main #item .wrap .brand_logo img {
  width: 100%;
}
body #container main #flow {
  background-color: #94a1a7;
  /*wrap*/
}
body #container main #flow .wrap {
  padding: 10vw 0;
  /*element_wrap*/
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap {
    padding: 6.4285714286vw 0 5.7142857143vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #flow .wrap {
    padding: 90px 0 80px;
  }
}
body #container main #flow .wrap h2 {
  font-size: 5.75vw;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 7.5vw;
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap h2 {
    font-size: 2.7142857143vw;
    margin-bottom: 4.6428571429vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #flow .wrap h2 {
    font-size: 38px;
    margin-bottom: 65px;
  }
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap h2 .br_sp {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 83.6428571429vw;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #flow .wrap .element_wrap .element {
    width: 1171px;
  }
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element.e_1:not(:last-of-type) {
    margin-bottom: 2.8571428571vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #flow .wrap .element_wrap .element.e_1:not(:last-of-type) {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element.e_1 .read {
    order: 2;
  }
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element.e_1 figure {
    width: 48vw;
    order: 1;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #flow .wrap .element_wrap .element.e_1 figure {
    width: 672px;
    order: 1;
  }
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element.e_2:not(:last-of-type) {
    margin-bottom: 7.1428571429vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #flow .wrap .element_wrap .element.e_2:not(:last-of-type) {
    margin-bottom: 100px;
  }
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element.e_2 figure {
    width: 62.0714285714vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #flow .wrap .element_wrap .element.e_2 figure {
    width: 869px;
  }
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element.e_3 figure {
    width: 48vw;
    order: 1;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #flow .wrap .element_wrap .element.e_3 figure {
    width: 672px;
  }
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element.e_3 .read {
    order: 2;
    margin-top: -5.7142857143vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #flow .wrap .element_wrap .element.e_3 .read {
    margin-top: -80px;
  }
}
body #container main #flow .wrap .element_wrap .element .read {
  width: 65.5vw;
  margin: 0 auto 7.5vw;
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element .read {
    width: 31.2142857143vw;
    margin: 0;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #flow .wrap .element_wrap .element .read {
    width: 437px;
  }
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element .read.read_sp {
    display: none;
  }
}
body #container main #flow .wrap .element_wrap .element .read p {
  font-size: 3vw;
  line-height: 1.6;
  color: #FFFFFF;
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element .read p {
    font-size: 1vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #flow .wrap .element_wrap .element .read p {
    font-size: 14px;
  }
}
body #container main #flow .wrap .element_wrap .element .read p:not(:last-of-type) {
  margin-bottom: 5vw;
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element .read p:not(:last-of-type) {
    margin-bottom: 2.1428571429vw;
  }
}
@media screen and (min-width: 1400px) {
  body #container main #flow .wrap .element_wrap .element .read p:not(:last-of-type) {
    margin-bottom: 30px;
  }
}
body #container main #flow .wrap .element_wrap .element .read p.read_pc {
  display: none;
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element .read p.read_pc {
    display: block;
  }
}
body #container main #flow .wrap .element_wrap .element figure {
  width: 84vw;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element figure {
    margin: 0;
  }
}
body #container main #flow .wrap .element_wrap .element figure img {
  width: 100%;
}
body #container main #flow .wrap .element_wrap .element figure img.img_pc {
  display: none;
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element figure img.img_pc {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element figure img.img_sp {
    display: none;
  }
}
body #container main #flow .wrap .element_wrap .element:not(:last-of-type) {
  margin-bottom: 7.5vw;
}
@media screen and (min-width: 768px) {
  body #container main #flow .wrap .element_wrap .element:not(:last-of-type) {
    margin-bottom: 0;
  }
}

/*body*//*# sourceMappingURL=whats_kodate.css.map */