@charset "UTF-8";
/* reset
--------------------------------------------------*/
body {
  margin: 0;
  padding: 0;
  border: none; }

/* img */
img, div, p, blockquote, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, form, fieldset, textarea, address, article, aside, dialog, figure, footer, header, hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  list-style-type: none; }

/* html5 */
article, aside, dialog, figure, footer, header, hgroup, nav, section {
  display: block; }

/* table */
table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0; }

th {
  font-weight: normal;
  text-align: left;
  vertical-align: top; }

caption {
  text-align: left; }

/* a */
a {
  outline: none; }
  a:focus, a:hover, a:active {
    outline: none; }

/* form */
input {
  outline: none; }
  input:focus, input:hover, input:active {
    outline: none; }

textarea {
  outline: none; }
  textarea:focus, textarea:hover, textarea:active {
    outline: none; }

input[type=checkbox] {
  display: none; }

/* img */
img {
  vertical-align: top;
  -webkit-backface-visibility: hidden; }

/* form */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle; }

/* ----------------------------------------------------------------------------------------
    common
  ---------------------------------------------------------------------------------------- */
body {
  color: #303030;
  font-size: 14px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; }

a:link {
  color: #000000;
  text-decoration: none;
  cursor: pointer; }
a:visited {
  color: #000000;
  text-decoration: none; }
a:hover {
  color: #000000;
  text-decoration: none;
  opacity: 0.6; }
a:active {
  color: #000000;
  text-decoration: none; }

.banner a {
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }

.fontS {
  font-size: 12px; }

.mT5 {
  margin-top: 5px; }

.mT30 {
  margin-top: 30px; }

.pT0 {
  padding-top: 0 !important; }

.floorguide {
  width: 55%;
  margin: 0 auto; }

/* clearfix */
.clearfix:before {
  content: "";
  display: table; }
.clearfix:after {
  content: "";
  display: table;
  clear: both; }

.leftSide {
  float: left; }
  .leftSide.no-slide a {
    display: block;
    margin: 15px 0 0 15px;
    position: relative;
    transition: .3s; }
    .leftSide.no-slide a:hover {
      opacity: .7; }
    .leftSide.no-slide a:before {
      position: absolute;
      width: 592px;
      height: 354px;
      content: "";
      top: -15px;
      left: -15px;
      border: 4px solid #eb5d95;
      z-index: 2; }
    .leftSide.no-slide a img {
      width: 597px;
      height: 358px;
      object-fit: cover; }

.rightSide {
  float: right; }

@media screen and (max-width: 860px) {
  body {
    font-size: 12px; }

  .leftSide, .rightSide {
    float: inherit;
    width: 100%; }

  .leftSide.no-slide a {
    margin: 18px 0 0 8px; }
    .leftSide.no-slide a:before {
      width: calc(332/380*100vw);
      height: calc(202/380*100vw);
      top: -8px;
      left: -8px;
      border: 3px solid #eb5d95; }
    .leftSide.no-slide a img {
      width: calc(335/380*100vw);
      height: auto; } }
#wrap {
  position: relative; }

/* ブラウザ指定 */
.pcOnly, .pcTbOnly {
  display: block !important; }

@media all and (min-width: 768px) and (max-width: 1201px) {
  .pcOnly {
    display: none !important; } }
@media all and (max-width: 768px) {
  .pcOnly {
    display: none !important; } }
@media all and (min-width: 768px) and (max-width: 1201px) {
  .pcTbOnly {
    display: block !important; } }
@media all and (max-width: 768px) {
  .pcTbOnly {
    display: none !important; } }
.tbOnly, .tbspOnly, .spOnly {
  display: none !important; }

@media all and (min-width: 768px) and (max-width: 1201px) {
  .tbOnly {
    display: block !important; } }
@media all and (max-width: 768px) {
  .tbOnly {
    display: none !important; } }
@media all and (max-width: 1200px) {
  .tbspOnly {
    display: block !important; } }
@media all and (min-width: 768px) and (max-width: 1201px) {
  .spOnly {
    display: none !important; } }
@media all and (max-width: 768px) {
  .spOnly {
    display: block !important;
    font-size: 0; } }
/* --------------------------------------------
    header
  -------------------------------------------- */
header {
  width: 100%;
  background-color: #ffffff; }
  header .inner {
    max-width: 1000px;
    margin: 0 auto; }
  header .leftSide {
    width: 20%; }
    header .leftSide #logo {
      width: 240px;
      height: 68px;
      padding-top: 38px; }
      header .leftSide #logo a {
        width: 240px;
        height: 68px;
        display: block;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        background: url("../../img/cocokita/logo.png") 0 0 no-repeat; }
        header .leftSide #logo a:hover {
          opacity: 0.8; }
  header .rightSide {
    width: 80%;
    text-align: right; }
    header .rightSide .btnArea {
      font-size: 0; }
      header .rightSide .btnArea li.btn {
        display: inline-block;
        width: 136px;
        padding: 15px;
        font-size: 13px;
        text-align: center; }
      header .rightSide .btnArea li.login {
        background-color: #f0f3f6; }
        header .rightSide .btnArea li.login a {
          display: block;
          color: #303030; }
          header .rightSide .btnArea li.login a:before {
            content: "";
            padding: 0 15px 0 0;
            background: url("../../img/cocokita/ico_arrow_gray01.png") left 50% no-repeat; }
      header .rightSide .btnArea li.member {
        background-color: #58c1db; }
        header .rightSide .btnArea li.member a {
          display: block;
          color: #ffffff; }
          header .rightSide .btnArea li.member a:before {
            content: "";
            padding: 0 15px 0 0;
            background: url("../../img/cocokita/ico_arrow_white01.png") left 50% no-repeat; }

@media screen and (max-width: 1000px) {
  header .inner {
    width: 100%; } }
@media screen and (max-width: 860px) {
  header {
    border-bottom: 1px solid #aaaaaa;
    background: rgba(255, 255, 255, 0.8); }
    header .inner {
      width: 96%;
      margin: 0 2%;
      padding: 0 0 6px;
      position: relative; }
    header .leftSide {
      display: inline-block;
      width: 45%;
      margin-top: 8px;
      vertical-align: top; }
      header .leftSide h1 {
        font-size: 10px;
        margin: 0 0 4px; }
      header .leftSide #logo {
        width: 152px;
        height: 26px;
        padding-top: 0; }
        header .leftSide #logo a {
          width: 116px;
          height: 34px;
          background: url("../../img/cocokita/logo_sp.png") 0 0 no-repeat;
          background-size: 116px 34px; }
    header .rightSide {
      display: inline-block;
      width: 40%;
      vertical-align: top;
      margin-top: 8px; }
      header .rightSide .btnArea li.btn {
        width: auto;
        height: auto;
        padding: 0;
        font-size: 10px;
        letter-spacing: -0.1em;
        text-align: center; }
      header .rightSide .btnArea li.login {
        background-color: #ffffff;
        margin-right: 7%; }
        header .rightSide .btnArea li.login a {
          display: block;
          color: #303030; }
          header .rightSide .btnArea li.login a:before {
            display: block;
            content: "";
            padding: 0 0 2px 50%;
            width: 21px;
            height: 22px;
            text-align: center;
            background: url("../../img/cocokita/ico_login_sp.png") 50% 50% no-repeat;
            background-size: contain; }
      header .rightSide .btnArea li.member {
        background-color: #ffffff; }
        header .rightSide .btnArea li.member a {
          display: block;
          color: #333333; }
          header .rightSide .btnArea li.member a:before {
            display: block;
            content: "";
            padding: 0 0 2px 50%;
            width: 21px;
            height: 22px;
            text-align: center;
            background: url("../../img/cocokita/ico_member_sp.png") 50% 50% no-repeat;
            background-size: 21px 22px; }

  .floorguide {
    width: 55%;
    margin: 0 auto; } }
/* --------------------------------------------
    globalnavi
  -------------------------------------------- */
@media (min-width: 861px) {
  nav {
    margin: 45px 0 0 0; }
    nav ul li {
      display: inline-block;
      font-size: 14px;
      font-weight: bold;
      margin-right: 40px; }
      nav ul li:nth-child(5) {
        margin-right: 0; } }
/* --------------------------------------------
    slide
    ※写真スライドはjquery.bxslider.cssに記述
    ※イベント情報スライドはslick.cssに記述
  -------------------------------------------- */
.bxslider li {
  display: none; }

.bx-viewport .bxslider li {
  display: block !important; }

/* --------------------------------------------
    #content
  -------------------------------------------- */
#container {
  padding: 25px 0 75px;
  position: relative; }
  #container #about {
    max-width: 1018px;
    margin: 0 auto; }
  #container #attention {
    max-width: 1000px;
    margin: 10px auto 50px; }
  #container #eventInfo, #container #howTo, #container #lookFor, #container #faq, #container #accessArea, #container #flow, #container #subArea {
    max-width: 1000px;
    margin: 0 auto; }
  #container article {
    padding: 50px 0 75px; }
    #container article.blue {
      background-color: #f0f3f6; }
    #container article.subPage01 {
      padding: 25px 0 100px; }
  #container #what02 {
    max-width: 1000px;
    margin: 0 auto 25px; }
  #container #cafe {
    max-width: 1000px;
    margin: 50px auto 25px; }
  #container #detail {
    max-width: 1000px;
    margin: 0 auto 25px; }
  #container #reserve01, #container #reserve02, #container #reserve03, #container #reserve04 {
    max-width: 470px;
    margin: 0 auto; }
  #container #reserve01 .inner, #container #reserve02 .inner, #container #reserve03 .inner, #container #reserve04 .inner {
    width: 71%;
    margin: 40px auto 0; }
  #container h2.ttlBlue, #container h2.ttlPink, #container h2.ttlGreen {
    font-size: 38px;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 0.8;
    margin-bottom: 35px;
    font-family: 'Open Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: bold; }
  #container h2.ttlBlue {
    color: #58c1db; }
  #container h2.ttlPink {
    color: #eb5d95; }
  #container h2.ttlGreen {
    color: #23b2a2; }
  #container h2.ttlBlue span, #container h2.ttlPink span, #container h2.ttlGreen span {
    font-size: 16px;
    letter-spacing: 0.1em;
    font-weight: bold; }
  #container h3.ttlSubGreen {
    color: #23b2a2;
    font-size: 19px;
    margin-bottom: 10px;
    font-weight: bold; }
  #container h2.ttlWhite {
    color: #23b2a2;
    background-color: #ffffff;
    font-size: 16px;
    padding: 10px 30px;
    margin-bottom: 25px;
    font-weight: bold; }
  #container h3.ttlSubGreen02 {
    color: #23b2a2;
    font-size: 21px;
    font-family: 'Open Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    margin-bottom: 20px;
    font-weight: bold; }
  #container h2.ttlWhite {
    font-size: 12px;
    padding: 10px 20px; }
  #container #about .btnArea {
    position: relative;
    width: 98%;
    min-height: 62px; }
    #container #about .btnArea .btnBlueBig {
      position: absolute;
      top: 0;
      left: 0;
      width: 95%;
      min-height: 45px;
      border: 3px solid #58c1db;
      background-color: #ffffff;
      text-align: center;
      z-index: 2; }
      #container #about .btnArea .btnBlueBig a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        padding: 15px 0;
        width: 100%;
        height: 100%;
        font-size: 15px;
        font-weight: bold;
        color: #58c1db;
        line-height: 1;
        cursor: pointer;
        z-index: 3; }
        #container #about .btnArea .btnBlueBig a:before {
          content: "";
          padding: 0 15px 0 0;
          background: url("../../img/cocokita/ico_arrow_blue01.png") left 50% no-repeat; }
    #container #about .btnArea:after {
      position: absolute;
      top: 11px;
      left: 11px;
      content: "";
      width: 95%;
      min-height: 45px;
      border: 3px solid #58c1db;
      background-color: #ffffff;
      z-index: 1; }
  #container .btnAreaCenter {
    position: relative;
    width: 26%;
    min-height: 63px;
    margin: 25px auto 0; }
    #container .btnAreaCenter .btnGreen {
      position: absolute;
      top: 0;
      left: 0;
      width: 95%;
      min-height: 46px;
      border: 3px solid #23b2a2;
      background-color: #ffffff;
      text-align: center;
      z-index: 2; }
      #container .btnAreaCenter .btnGreen a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        padding: 15px 0;
        width: 100%;
        height: 100%;
        font-size: 16px;
        font-weight: bold;
        color: #23b2a2;
        line-height: 1;
        cursor: pointer;
        z-index: 3; }
        #container .btnAreaCenter .btnGreen a:before {
          content: "";
          padding: 0 15px 0 0;
          background: url("../../img/cocokita/ico_arrow_green.png") left 50% no-repeat; }
    #container .btnAreaCenter .btnBlue {
      position: absolute;
      top: 0;
      left: 0;
      width: 95%;
      min-height: 46px;
      border: 3px solid #58c1db;
      background-color: #ffffff;
      text-align: center;
      z-index: 2; }
      #container .btnAreaCenter .btnBlue a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        padding: 15px 0;
        width: 100%;
        height: 100%;
        font-size: 16px;
        font-weight: bold;
        color: #58c1db;
        line-height: 1;
        cursor: pointer;
        z-index: 3; }
        #container .btnAreaCenter .btnBlue a:before {
          content: "";
          padding: 0 15px 0 0;
          background: url("../../img/cocokita/ico_arrow_blue01.png") left 50% no-repeat; }
  #container .btnBgGreen:after {
    position: absolute;
    top: 11px;
    left: 11px;
    content: "";
    width: 95%;
    min-height: 46px;
    border: 3px solid #23b2a2;
    background-color: #ffffff;
    z-index: 1; }
  #container .btnBgBlue:after {
    position: absolute;
    top: 11px;
    left: 11px;
    content: "";
    width: 95%;
    min-height: 46px;
    border: 3px solid #58c1db;
    background-color: #ffffff;
    z-index: 1; }
  #container #eventInfo .linkArea {
    margin-top: 100px; }
    #container #eventInfo .linkArea .leftSide, #container #eventInfo .linkArea .rightSide {
      width: 48%; }
  #container #eventInfo .linkArea02 {
    display: flex;
    justify-content: space-between;
    margin-top: 80px; }
  #container .btnAreaPink, #container .btnAreaPpl, #container .btnAreaBlue {
    position: relative;
    width: 100%;
    min-height: 160px; }
  #container .btnAreaPink .btnPink, #container .btnAreaPpl .btnPpl, #container .btnAreaBlue .btnBlue {
    position: absolute;
    top: 12px;
    right: 0;
    width: 97%;
    min-height: 160px;
    background-color: #ffffff;
    text-align: center;
    z-index: 1; }
  #container .btnAreaPink .btnPink p, #container .btnAreaPpl .btnPpl p, #container .btnAreaBlue .btnBlue p {
    display: block;
    position: absolute;
    top: 35%;
    left: 0;
    width: 100%;
    height: 100%;
    letter-spacing: 0.1em;
    font-family: 'Open Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-size: 33px;
    font-weight: bold;
    line-height: 0.7;
    cursor: pointer; }
  #container .btnAreaPink .btnPink p {
    color: #eb5d95; }
  #container .btnAreaPpl .btnPpl p {
    color: #8c81c3; }
  #container .btnAreaPink .btnPink span, #container .btnAreaPpl .btnPpl span, #container .btnAreaBlue .btnBlue span {
    font-size: 14px;
    padding-left: 60px; }
  #container .btnAreaPink .resi p:before {
    content: "";
    padding: 10px 65px 30px 0;
    background: url("../../img/cocokita/ico_resi.png") left center no-repeat; }
  #container .btnAreaPpl .bank p:before {
    content: "";
    padding: 30px 65px 30px 0;
    background: url("../../img/cocokita/ico_bank.png") left 30px no-repeat; }
  #container .btnAreaBlue .btnBlue p:before {
    content: "";
    padding: 10px 105px 30px 0;
    background: url("../../img/cocokita/ico_artistbank.png") left center no-repeat; }
  #container .btnAreaPink:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 97%;
    min-height: 156px;
    border: 4px solid #eb5d95;
    z-index: 2; }
  #container .btnAreaPpl:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 97%;
    min-height: 156px;
    border: 4px solid #8c81c3;
    z-index: 2; }
  #container .linkArea .btnAreaPink .btnPink {
    display: flex;
    align-items: center;
    text-align: left; }
  #container .linkArea .btnAreaBlue .btnBlue {
    display: flex;
    align-items: center;
    text-align: left; }
    #container .linkArea .btnAreaBlue .btnBlue p {
      color: #1cb9f4;
      position: relative;
      padding: 30px 50px 30px 0;
      text-align: center; }
  #container .linkArea .btnAreaPink .btnPink p {
    color: #eb5d95;
    position: relative;
    padding: 30px 50px 30px 0;
    text-align: center; }
  #container .linkArea .btnAreaBlue .btnBlue span {
    padding-left: 100px; }
  #container .btnAreaBlue:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 97%;
    min-height: 156px;
    border: 4px solid #1cb9f4;
    z-index: 2; }
  #container #eventInfo .youtubeBnr {
    max-width: 480px;
    margin: 80px auto 0; }
    #container #eventInfo .youtubeBnr img {
      width: 100%; }

@media screen and (max-width: 860px) {
  #container {
    padding: 0 0 20px; }
    #container article {
      max-width: 1000px;
      width: 100%;
      margin: 0 0 10px;
      padding: 25px 0 25px;
      background-color: #ffffff; }
      #container article.look {
        margin: 0;
        padding: 30px 0 70px 0; }
      #container article.last {
        margin: 0; }
    #container #attention {
      width: 84%;
      margin: 10px auto 10px; }
    #container #about {
      width: 90%; }
    #container #eventInfo, #container #howTo, #container #lookFor, #container #faq, #container #accessArea, #container #flow {
      width: 90%;
      margin: 0 auto; }
    #container #lookFor {
      padding-bottom: 40px; }
    #container article.subPage01 {
      padding: 25px 0 15px; }
    #container #what02 {
      width: 90%;
      margin: 0 auto; }
    #container #cafe {
      width: 100%;
      margin: 0 auto; }
    #container #detail, #container #reserve01, #container #reserve02, #container #reserve03, #container #reserve04 {
      width: 90%;
      margin: 0 auto; }
    #container #reserve01 .inner, #container #reserve02 .inner, #container #reserve03 .inner, #container #reserve04 .inner {
      width: 100%; }
    #container .linkArea .btnAreaPink, #container .linkArea .btnAreaBlue {
      min-height: 80px;
      box-sizing: border-box; }
    #container .linkArea .btnAreaPink .btnPink, #container .linkArea .btnAreaBlue .btnBlue {
      min-height: 80px;
      top: 6px;
      width: 98%;
      text-align: left; }
    #container .linkArea .btnAreaPink:before, #container .linkArea .btnAreaBlue:before {
      min-height: 78px;
      border-width: 2px; }
    #container .linkArea .btnAreaPink .btnPink p, #container .linkArea .btnAreaBlue .btnBlue p {
      font-size: 22px;
      padding: 10px 60px 10px 0;
      box-sizing: border-box; }
    #container .linkArea .btnAreaPink .btnPink span {
      font-size: 11px; }
    #container .linkArea .btnAreaBlue .btnBlue span {
      font-size: 11px;
      padding-left: 50px; }
    #container .linkArea .btnAreaBlue .btnBlue p:before {
      background-size: 38px 38px;
      padding: 5px 50px 10px 0; }
    #container .linkArea .btnAreaPink .resi p:before {
      background: url("../../img/cocokita/ico_resi.png") left center no-repeat;
      background-size: 27px 29px;
      padding: 5px 50px 10px 0; } }
/* タイトル */
@media screen and (max-width: 860px) {
  #container h2.ttlBlue, #container h2.ttlPink, #container h2.ttlGreen {
    font-size: 28px;
    line-height: 0.8;
    margin-bottom: 25px;
    font-family: 'Open Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; }
  #container h2.ttlBlue span, #container h2.ttlPink span, #container h2.ttlGreen span {
    font-size: 13px;
    letter-spacing: 0.1em;
    font-weight: bold; }
  #container h3.ttlSubGreen {
    font-size: 15px;
    text-align: center; }
  #container h3.ttlSubGreen02 {
    font-size: 16px;
    margin-bottom: 10px;
    text-align: center; } }
/* ボタン */
/**TOPページ　初めてご利用される方へ**/
/**中央寄せボタン**/
/**TOPページ　レジデンスアーティスト・アーティストバンク*/
@media screen and (max-width: 860px) {
  #container #eventInfo .linkArea {
    margin-top: 35px; }
    #container #eventInfo .linkArea .leftSide, #container #eventInfo .linkArea .rightSide {
      width: 100%;
      margin-bottom: 40px; }
    #container #eventInfo .linkArea .leftSide {
      margin-bottom: 20px; }
  #container #eventInfo .youtubeBnr {
    margin: 0 auto; }
  #container #eventInfo .linkArea02 {
    display: block;
    margin-top: 0; }
    #container #eventInfo .linkArea02 img {
      width: 100%;
      height: auto;
      margin-bottom: 20px; } }
/**フッター　MAPボタン**/
.btnMap {
  font-family: 'Open Sans',sans-serif;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  padding: 4px 20px;
  letter-spacing: 0.1em;
  background-color: #23b2a2;
  border-radius: 20px; }
  .btnMap a {
    color: #fff; }

@media screen and (max-width: 860px) {
  /**TOPページ　初めてご利用される方へ**/
  #container #about .btnArea {
    width: 100%;
    margin: 0 auto; }
    #container #about .btnArea:after {
      position: absolute;
      top: 11px;
      right: 0;
      content: "";
      width: 95%;
      min-height: 45px;
      border: 3px solid #58c1db;
      background-color: #ffffff;
      z-index: 1; }
  #container .btnAreaCenter {
    position: relative;
    width: 100%;
    min-height: 63px;
    margin: 25px auto 0; }

  /**中央寄せボタン**/
  /**フッター　MAPボタン**/
  .btnMap {
    display: block;
    width: 100%;
    padding: 4px 0;
    font-size: 14px; } }
/**予約ページボタン**/
#container #reserve01 .btnAreaCenter, #container #reserve02 .btnAreaCenter, #container #reserve03 .btnAreaCenter {
  width: 50%;
  margin: 25px auto 0; }
#container #reserve04 .btnAreaCenter {
  width: 65%;
  margin: 25px auto 0; }
#container #reserve01 .btnAreaCenter .btnGreen span, #container #reserve02 .btnAreaCenter .btnGreen span, #container #reserve03 .btnAreaCenter .btnGreen span, #container #reserve04 .btnAreaCenter .btnGreen span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 0 9px;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Open Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  color: #23b2a2;
  line-height: 1;
  cursor: pointer;
  z-index: 3; }
#container #reserve01 .btnAreaCenter .btnGreen span:before, #container #reserve02 .btnAreaCenter .btnGreen span:before, #container #reserve03 .btnAreaCenter .btnGreen span:before, #container #reserve04 .btnAreaCenter .btnGreen span:before {
  content: "";
  padding: 0 15px 0 0;
  background: url("../../img/cocokita/ico_arrow_green.png") left 50% no-repeat; }
#container #about .leftSide {
  width: 60%; }
#container #about .rightSide {
  width: 37%; }
#container #about .searchArea {
  float: right;
  display: table;
  width: 36.2%;
  font-size: 0;
  margin-bottom: 25px;
  margin-right: 0.8%;
  border-top: 3px solid #c8d1db;
  border-bottom: 3px solid #c8d1db;
  border-right: 3px solid #c8d1db;
  background-color: #c8d1db; }
  #container #about .searchArea form {
    width: 100%; }
  #container #about .searchArea .cp_ipselect {
    display: table-cell;
    font-size: 14px;
    overflow: hidden;
    text-align: center;
    width: 30%; }
    #container #about .searchArea .cp_ipselect:nth-child(1) {
      width: 40%; }

@media screen and (max-width: 860px) {
  #container #reserve01 .btnAreaCenter .btnGreen span, #container #reserve02 .btnAreaCenter .btnGreen span, #container #reserve03 .btnAreaCenter .btnGreen span, #container #reserve04 .btnAreaCenter .btnGreen span {
    font-size: 14px; } }
/* --------------------------------------------
    トップページ
  -------------------------------------------- */
/**  #about  **/
.cp_ipselect select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }
.cp_ipselect.cp_sl01 {
  position: relative;
  border-left: 3px solid #c8d1db;
  background: #ffffff; }
  .cp_ipselect.cp_sl01::before {
    position: absolute;
    top: 1em;
    right: 0.6em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 9px solid #666666;
    pointer-events: none; }
  .cp_ipselect.cp_sl01 select {
    padding: 8px 28px 8px 6px;
    color: #666666; }

#container #about .searchArea .btnSearch {
  display: table-cell;
  min-width: 36px;
  text-align: center;
  vertical-align: middle; }
  #container #about .searchArea .btnSearch .input {
    display: block;
    background: url("../../img/cocokita/btn_search.gif") 0 0 no-repeat;
    border: 0 none;
    background-size: contain;
    padding: 100% 0 0 0;
    width: 100%;
    text-align: center; }
    #container #about .searchArea .btnSearch .input button {
      width: 100%; }
#container #about .dataAreaSp {
  display: none; }
#container #about .dataArea {
  padding-top: 70%;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 10px; }
  #container #about .dataArea h2 {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 148px;
    height: 148px;
    z-index: 2; }
  #container #about .dataArea .inner {
    position: absolute;
    top: 14px;
    left: 0;
    width: 86%;
    height: auto;
    padding: 20px;
    border: 3px solid #23b2a2;
    color: #23b2a2;
    z-index: 1; }
  #container #about .dataArea dl {
    border-bottom: 1px dotted #23b2a2;
    padding-bottom: 10px;
    margin-bottom: 10px; }
  #container #about .dataArea .w55 {
    width: 55%; }
  #container #about .dataArea dl dt {
    font-size: 14px; }
  #container #about .dataArea dl dd {
    font-size: 15px;
    line-height: 1.2; }
  #container #about .dataArea dl.contact {
    font-size: 0;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0; }
    #container #about .dataArea dl.contact dt, #container #about .dataArea dl.contact dd {
      display: inline-block; }
    #container #about .dataArea dl.contact dt {
      padding-right: 5px; }
    #container #about .dataArea dl.contact dd span {
      padding-left: 3px; }
#container #attention {
  border: 3px solid #eb5d95; }
  #container #attention p {
    float: left; }
  #container #attention .ic {
    width: 7%;
    height: auto;
    background-color: #eb5d95;
    padding: 2.5% 0;
    text-align: center; }
  #container #attention .txt {
    width: 81%;
    padding: 2%; }
#container #howTo ul {
  font-size: 0;
  text-align: center; }
  #container #howTo ul li {
    display: inline-block;
    width: 31%;
    margin-right: 3.5%; }
    #container #howTo ul li img {
      width: 100%; }
    #container #howTo ul li:nth-child(3n) {
      margin: 0 0 40px 0; }
    #container #howTo ul li:nth-child(1) img {
      padding-top: 40px; }
    #container #howTo ul li:nth-child(2) img {
      padding-top: 95px;
      margin-bottom: 40px; }
    #container #howTo ul li:nth-child(5) img {
      padding-top: 20px; }
#container #faq .linkArea .faqLink {
  position: relative;
  width: 100%;
  min-height: 60px;
  margin-bottom: 30px;
  background-color: #f0f3f6;
  font-size: 0; }
  #container #faq .linkArea .faqLink p {
    display: inline-block; }
    #container #faq .linkArea .faqLink p.ic {
      position: absolute;
      top: 0;
      left: 0;
      width: 7%;
      height: 100%;
      background-color: #58c1db;
      color: #ffffff;
      font-size: 35px;
      font-family: 'Open Sans', sans-serif;
      text-align: center;
      vertical-align: middle; }
      #container #faq .linkArea .faqLink p.ic span {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 12%;
        left: 0; }
    #container #faq .linkArea .faqLink p.txt {
      font-size: 18px;
      width: 85%;
      padding: 20px 10px 20px 8%; }
  #container #faq .linkArea .faqLink:after {
    position: absolute;
    top: 35%;
    right: 20px;
    content: "";
    width: 16px;
    height: 22px;
    background: url("../../img/cocokita/ico_arrow_blue02.png") 0 0 no-repeat;
    z-index: 2; }
#container #lookFor .linkArea {
  font-size: 0;
  margin-bottom: 35px; }
  #container #lookFor .linkArea .link {
    display: inline-block;
    width: 30%;
    margin-right: 5%;
    font-size: 16px;
    vertical-align: top;
    margin-bottom: 40px; }
  #container #lookFor .linkArea a:nth-child(3n) .link {
    margin: 0 0 40px 0; }
  #container #lookFor .linkArea .img {
    width: 100%;
    vertical-align: top; }
  #container #lookFor .linkArea .link .img img {
    width: 100%; }
  #container #lookFor .linkArea .link .txt {
    position: relative;
    width: 100%;
    height: 100%;
    color: #ffffff;
    vertical-align: middle; }
    #container #lookFor .linkArea .link .txt dl {
      position: relative;
      width: 90%;
      height: 100%;
      padding: 5%; }
      #container #lookFor .linkArea .link .txt dl:after {
        position: absolute;
        top: 35%;
        right: 5%;
        content: "";
        width: 14px;
        height: 18px;
        background: url("../../img/cocokita/ico_arrow_white02.png") 0 0 no-repeat; }
    #container #lookFor .linkArea .link .txt dt {
      font-weight: bold;
      width: 85%; }
    #container #lookFor .linkArea .link .txt dd {
      width: 85%; }
#container #lookFor .green {
  background-color: #23b2a2; }
#container #lookFor .pink {
  background-color: #eb5d95; }
#container #lookFor .ppl {
  background-color: #8c81c3; }
#container #lookFor .yellow {
  background-color: #ffbf00; }
#container #lookFor .blue {
  background-color: #58c1db; }
#container #map02, #container #map03 {
  width: 100%;
  height: 360px;
  background-color: #eeeeee; }
#container #mapIframe {
  position: relative;
  height: 360px;
  overflow: hidden; }
  #container #mapIframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important; }
#container #what .mainImgArea {
  position: relative;
  width: 100%;
  z-index: 1; }
  #container #what .mainImgArea .img img {
    width: 100%; }
  #container #what .mainImgArea .txt {
    position: absolute;
    bottom: -395px;
    right: 7%;
    width: 460px;
    min-height: 460px;
    z-index: 2; }
    #container #what .mainImgArea .txt .inner {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 345px;
      min-height: 325px;
      background-color: #ffffff;
      padding: 60px 50px;
      z-index: 3;
      font-size: 15px; }
    #container #what .mainImgArea .txt:before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      border: 4px solid #23b2a2;
      width: 441px;
      height: 441px;
      z-index: 4; }
#container #what .imgSp {
  display: none; }
#container #what .imgPc {
  max-width: 1000px;
  margin: 76px auto 15px; }
  #container #what .imgPc p {
    width: 46%; }
    #container #what .imgPc p img {
      width: 100%;
      max-width: 460px; }
#container #what02 .nameArea {
  width: 100%; }
  #container #what02 .nameArea .leftSide {
    width: 46%; }
    #container #what02 .nameArea .leftSide h3, #container #what02 .nameArea .leftSide p {
      max-width: 460px; }
  #container #what02 .nameArea .rightSide {
    width: 44%; }
    #container #what02 .nameArea .rightSide .imgPc {
      margin-top: 20px;
      width: 100%;
      max-width: 446px; }
    #container #what02 .nameArea .rightSide .imgSp {
      display: none; }
#container #what02 .nameArea02 {
  position: relative;
  width: 93%;
  min-height: 76px;
  border: 1.5px solid #505050;
  margin-top: 65px;
  padding: 40px 3%;
  z-index: 1; }
  #container #what02 .nameArea02 h3 {
    width: 18%;
    min-height: 19px;
    position: absolute;
    top: -15px;
    left: 41%;
    font-size: 19px;
    font-weight: bold;
    background-color: #ffffff;
    text-align: center;
    z-index: 2; }
  #container #what02 .nameArea02 .leftSide {
    width: 55%; }
    #container #what02 .nameArea02 .leftSide .imgPc {
      padding-top: 15px;
      width: 100%;
      max-width: 548px; }
    #container #what02 .nameArea02 .leftSide .imgSp {
      display: none; }
  #container #what02 .nameArea02 .rightSide {
    width: 36%; }
    #container #what02 .nameArea02 .rightSide p {
      max-width: 360px;
      font-size: 15px; }
#container #what02 .logoArea {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 52%;
  margin-top: 130px; }
  #container #what02 .logoArea .txt {
    position: absolute;
    top: 0;
    right: 0;
    width: 43%;
    min-height: 78px;
    z-index: 2; }
  #container #what02 .logoArea .imgPc {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    max-height: 500px;
    z-index: 1; }
    #container #what02 .logoArea .imgPc img {
      width: 100%;
      max-width: 1000px; }
  #container #what02 .logoArea .txtSp01, #container #what02 .logoArea .txtSp02 {
    display: none; }
#container #cafe .cafeImgArea {
  min-height: 290px;
  margin-bottom: 50px; }
  #container #cafe .cafeImgArea .leftSide {
    position: relative;
    width: 48%;
    min-height: 290px;
    z-index: 1; }
    #container #cafe .cafeImgArea .leftSide p.txt {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 77%;
      height: 226px;
      background-color: #ffffff;
      padding: 35px 10% 15px;
      z-index: 3;
      font-size: 15px;
      vertical-align: middle; }
    #container #cafe .cafeImgArea .leftSide:before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      border: 4px solid #eb5d95;
      width: 96%;
      min-height: 270px;
      z-index: 4; }
  #container #cafe .cafeImgArea .rightSide {
    width: 48%; }
    #container #cafe .cafeImgArea .rightSide img {
      width: 100%;
      max-width: 480px; }
#container #cafe .cafeDataArea .tableWhite {
  width: 100%;
  border-top: 1px solid #afafaf; }
  #container #cafe .cafeDataArea .tableWhite th {
    width: 13%;
    border-right: 1px solid #afafaf;
    background-color: #ffffff;
    text-align: center;
    border-bottom: 1px solid #afafaf;
    padding: 30px 20px; }
    #container #cafe .cafeDataArea .tableWhite th span {
      letter-spacing: 0.2em; }
  #container #cafe .cafeDataArea .tableWhite td {
    border-bottom: 1px solid #afafaf;
    padding: 30px 20px; }
#container #detail .imgArea .leftSide {
  width: 60%; }
  #container #detail .imgArea .leftSide #picbox {
    position: relative;
    max-width: 586px;
    margin: 15px 0 0 15px; }
    #container #detail .imgArea .leftSide #picbox img {
      width: 100%;
      height: auto;
      z-index: 1; }
    #container #detail .imgArea .leftSide #picbox:before {
      position: absolute;
      width: 100%;
      height: 100%;
      content: "";
      top: -15px;
      left: -15px;
      border: 3px solid #23b2a2;
      z-index: 2; }
#container #detail .imgArea .rightSide {
  width: 36%; }
  #container #detail .imgArea .rightSide ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 15px -6% 0 0; }
    #container #detail .imgArea .rightSide ul li {
      max-width: 165px;
      width: 48%;
      margin: 0 6% 24px 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      position: relative; }
      #container #detail .imgArea .rightSide ul li img {
        width: 100%; }
      #container #detail .imgArea .rightSide ul li a.over:before {
        position: absolute;
        width: 98%;
        height: 98%;
        content: "";
        top: -10px;
        left: -10px;
        border: 3px solid #23b2a2;
        z-index: 2; }
#container #detail .infoArea {
  width: 100%;
  margin-bottom: 40px; }
  #container #detail .infoArea .inner {
    background-color: #ffffff;
    padding: 30px 35px; }
#container #detail .dataArea, #container #detail .calendarArea {
  width: 48%; }
#container #detail .dataArea .inner, #container #detail .calendarArea .inner {
  background-color: #ffffff;
  padding: 30px 35px; }
#container #detail .dataArea .inner .tableGray {
  width: 100%;
  border-top: 1px solid #afafaf; }
  #container #detail .dataArea .inner .tableGray th {
    width: 22%;
    border-right: 1px solid #afafaf;
    background-color: #f0f3f6;
    text-align: center;
    border-bottom: 1px solid #afafaf;
    padding: 20px 15px; }
  #container #detail .dataArea .inner .tableGray td {
    border-bottom: 1px solid #afafaf;
    padding: 20px 15px; }
  #container #detail .dataArea .inner .tableGray .blueLink li {
    display: inline-block;
    margin-right: 30px; }
    #container #detail .dataArea .inner .tableGray .blueLink li:last-child {
      margin-right: 0; }
  #container #detail .dataArea .inner .tableGray .blueLink a {
    color: #58c1db;
    text-decoration: underline; }
#container #detail .calendarArea .btnAreaCenter {
  position: relative;
  width: 92% !important;
  min-height: 63px;
  margin: 25px auto 0; }
#container #detail .calendarArea .calendar {
  width: 100%; }
  #container #detail .calendarArea .calendar .control {
    width: 100%;
    height: 60px;
    position: relative;
    margin-bottom: 10px; }
  #container #detail .calendarArea .calendar .prev {
    float: left;
    padding-top: 10px; }
    #container #detail .calendarArea .calendar .prev:before {
      content: "";
      padding: 0 15px 0 0;
      background: url("../../img/cocokita/detail/ico_arrow02_prev.png") left 50% no-repeat; }
  #container #detail .calendarArea .calendar .next {
    float: right;
    padding-top: 10px; }
  #container #detail .calendarArea .calendar .prev a {
    color: #23b2a2;
    font-size: 15px; }
  #container #detail .calendarArea .calendar .next a {
    color: #23b2a2;
    font-size: 15px; }
  #container #detail .calendarArea .calendar .next:after {
    content: "";
    padding: 0 0 0 12px;
    background: url("../../img/cocokita/detail/ico_arrow02_next.png") right 50% no-repeat; }
  #container #detail .calendarArea .calendar h4 {
    position: absolute;
    top: 0;
    left: 45%;
    width: 10%;
    text-align: center;
    font-size: 46px;
    line-height: 1; }
  #container #detail .calendarArea .calendar .tableCalendar {
    width: 100%;
    color: #505050; }
    #container #detail .calendarArea .calendar .tableCalendar th {
      font-size: 9px;
      text-align: center; }
    #container #detail .calendarArea .calendar .tableCalendar td {
      border: 1px solid #c0c4c9;
      padding: 6px 8px 3px;
      vertical-align: top; }
      #container #detail .calendarArea .calendar .tableCalendar td .date {
        font-size: 12px;
        line-height: 1; }
        #container #detail .calendarArea .calendar .tableCalendar td .date span {
          color: #cccccc; }
      #container #detail .calendarArea .calendar .tableCalendar td .btn {
        text-align: center;
        font-size: 20px; }
      #container #detail .calendarArea .calendar .tableCalendar td .x01 {
        text-align: center;
        color: #dbdbdb;
        font-size: 25px;
        line-height: 1.5; }
      #container #detail .calendarArea .calendar .tableCalendar td .btn a {
        color: #58c1db;
        text-decoration: underline; }
#container #detail .calendarArea .iconList {
  text-align: center;
  font-size: 0;
  vertical-align: middle;
  margin-top: 15px; }
  #container #detail .calendarArea .iconList li {
    display: inline-block;
    font-size: 13px;
    margin-left: 27px;
    color: #505050; }
    #container #detail .calendarArea .iconList li:first-child {
      margin-left: 0; }
    #container #detail .calendarArea .iconList li span {
      color: #ababab;
      font-size: 18px; }
      #container #detail .calendarArea .iconList li span.x {
        font-size: 24px;
        vertical-align: middle; }

@media all and (min-width: 860px) and (max-width: 980px) {
  #container #about .dataArea dl dt {
    font-size: 11px; }
  #container #about .dataArea dl dd {
    font-size: 12px;
    line-height: 1.2; }
  #container #about .searchArea .cp_ipselect {
    font-size: 10px; }
    #container #about .searchArea .cp_ipselect select {
      font-size: 13px;
      padding-right: 0.5em; } }
@media screen and (max-width: 860px) {
  #container #about .leftSide {
    width: 100%;
    margin: 0 auto 10px; }
  #container #about .rightSide {
    width: 100%;
    margin: 0 auto; }
  #container #about .searchArea {
    float: none;
    display: table;
    width: 100%;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 10px; }
    #container #about .searchArea .cp_ipselect {
      font-size: 10px; }
      #container #about .searchArea .cp_ipselect select {
        font-size: 13px;
        padding-right: 0.5em; }

  .cp_ipselect.cp_sl01::before {
    position: absolute;
    top: 1.3em;
    right: 0.6em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 8px solid #666666;
    pointer-events: none; }

  #container #about .searchArea .btnSearch {
    min-width: 30px; }
  #container #about .dataAreaSp {
    display: block;
    margin-top: 10px; }
    #container #about .dataAreaSp img {
      width: 100%; }
  #container #about .dataArea {
    display: none; } }
/**  #attention  **/
/**  #howTo  **/
/**  #faq  **/
/**  #lookFor  **/
/*
  #container #lookFor .linkArea a:last-child .link,
  #container #lookFor .linkArea a:nth-last-child(2n) .link,
  #container #lookFor .linkArea a:nth-last-child(3n) .link {
    margin-bottom: 0;
  }
  */
/**  #map02  **/
/**  #map03  **/
/**  #map iframe  **/
@media screen and (min-width: 860px) {
  #container #lookFor .linkArea .link .img img {
    height: 200.25px; } }
@media screen and (max-width: 860px) {
  /**  #attention  **/
  #container #attention {
    border: 3px solid #eb5d95;
    padding: 2%;
    font-size: 12px; }
    #container #attention p {
      float: left; }
    #container #attention .ic {
      width: 10%;
      height: auto;
      background-color: #eb5d95;
      padding: 2%;
      text-align: center; }
      #container #attention .ic img {
        width: 100%; }
    #container #attention .txt {
      width: 83%;
      padding: 0 0 0 2%; }
  #container #lookFor .linkArea {
    margin-bottom: 0; }
    #container #lookFor .linkArea .link {
      display: block;
      width: 100%;
      margin-right: 0;
      font-size: 12px;
      vertical-align: top;
      display: table;
      margin-bottom: 20px; }
    #container #lookFor .linkArea a:nth-child(3n) .link {
      margin: 0 0 20px 0; }
    #container #lookFor .linkArea a:last-child .link {
      margin: 0 0 0 0; }
    #container #lookFor .linkArea a:nth-last-child(2n) .link, #container #lookFor .linkArea a:nth-last-child(3n) .link {
      margin-bottom: 20px; }
    #container #lookFor .linkArea .img {
      width: 30%;
      vertical-align: top;
      display: table-cell; }
    #container #lookFor .linkArea .link .txt {
      position: relative;
      width: 95%;
      height: 100%;
      padding: 10px 8px;
      width: 70%;
      color: #ffffff;
      display: table-cell;
      vertical-align: middle; }
      #container #lookFor .linkArea .link .txt dl {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0; }
        #container #lookFor .linkArea .link .txt dl:after {
          position: absolute;
          top: 35%;
          right: 0;
          content: "";
          width: 11px;
          height: 12px;
          background: url("../../img/cocokita/ico_arrow_white_02_sp.png") 0 0 no-repeat;
          background-size: 11px 12px; }
      #container #lookFor .linkArea .link .txt dt {
        font-weight: bold;
        width: 92%; }
      #container #lookFor .linkArea .link .txt dd {
        width: 92%; }
  #container #faq .linkArea {
    margin-top: 45px; }
    #container #faq .linkArea .faqLink {
      display: block;
      position: relative;
      width: 100%;
      height: auto;
      margin-bottom: 40px;
      padding: 35px 0 0;
      background-color: #f0f3f6;
      font-size: 0; }
    #container #faq .linkArea a:last-child .faqLink {
      margin-bottom: 0; }
    #container #faq .linkArea .faqLink p {
      display: block; }
      #container #faq .linkArea .faqLink p.ic {
        position: absolute;
        top: -20px;
        left: 45%;
        width: 10%;
        height: auto;
        min-width: 40px;
        min-height: 40px;
        background-color: #58c1db;
        padding: 0;
        color: #ffffff;
        font-size: 18px;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
        vertical-align: middle; }
        #container #faq .linkArea .faqLink p.ic span {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 12%;
          left: 0; }
      #container #faq .linkArea .faqLink p.txt {
        font-size: 12px;
        width: 89%;
        padding: 0 0 20px 0;
        margin: 0 auto; }
    #container #faq .linkArea .faqLink:after {
      position: static;
      display: block;
      top: 0;
      left: 0;
      content: "";
      width: 100%;
      height: 22px;
      background: url("../../img/cocokita/ico_arrow_white_sp.png") center no-repeat;
      background-size: 11px 11px;
      background-color: #58c1db;
      z-index: 0; }
  #container #map01, #container #map02 {
    width: 100%;
    height: 180px;
    background-color: #eeeeee; }
  #container #mapIframe {
    position: relative;
    height: 180px;
    overflow: hidden; }

  /**  lookFor  **/
  /**  #faq  **/
  /**  #map01 **/
  /**  #map iframe  **/ }
@media screen and (max-width: 768px) {
  /**  #howTo **/
  #container #howTo ul {
    font-size: 0;
    text-align: center; }
    #container #howTo ul li {
      display: block;
      width: 100%;
      margin: 0 0 20px 0; }
      #container #howTo ul li img {
        width: 100%; }
      #container #howTo ul li:nth-child(3n) {
        margin: 0 0 20px 0; }
      #container #howTo ul li:nth-child(5) {
        margin: 0; }
      #container #howTo ul li:nth-child(1) img {
        padding-top: 0; }
      #container #howTo ul li:nth-child(2) img {
        padding-top: 0;
        margin-bottom: 0; }
      #container #howTo ul li:nth-child(5) img {
        padding-top: 0; } }
/* --------------------------------------------
    下層ページ
  -------------------------------------------- */
/**  #what  **/
@media screen and (max-width: 860px) {
  #container #what .mainImgArea {
    position: static;
    width: 100%;
    z-index: 1; }
    #container #what .mainImgArea .img img {
      width: 100%; }
    #container #what .mainImgArea .txt {
      position: static;
      bottom: 0;
      right: 0;
      width: 90%;
      min-height: auto;
      margin: 21px auto 0;
      padding-left: 11px; }
      #container #what .mainImgArea .txt:before {
        display: none; }
      #container #what .mainImgArea .txt .inner {
        position: relative;
        top: 0;
        right: 0;
        width: auto;
        height: auto;
        background-color: #ffffff;
        padding: 25px 10% 45px;
        z-index: 3;
        font-size: 12px; }
        #container #what .mainImgArea .txt .inner:before {
          position: absolute;
          top: -11px;
          left: -11px;
          content: "";
          border: 3px solid #23b2a2;
          width: 98%;
          height: 98%;
          z-index: 4; }
    #container #what .mainImgArea .imgSp {
      display: block;
      width: 100%;
      text-align: center;
      padding-top: 10px; }
      #container #what .mainImgArea .imgSp img {
        width: 100%;
        max-width: 438px; }
  #container #what .imgPc {
    display: none; } }
/**  #what02  **/
@media screen and (max-width: 860px) {
  #container #what02 .nameArea .leftSide {
    width: 100%; }
    #container #what02 .nameArea .leftSide h3, #container #what02 .nameArea .leftSide p {
      max-width: 100%; }
  #container #what02 .nameArea .rightSide {
    width: 100%;
    text-align: center;
    margin-bottom: 30px; }
    #container #what02 .nameArea .rightSide .imgSp {
      display: block;
      margin-top: 20px;
      width: 72%;
      max-width: 460px;
      margin: 0 auto; }
    #container #what02 .nameArea .rightSide .imgPc {
      display: none; }
  #container #what02 .nameArea02 {
    position: relative;
    width: 92%;
    min-height: 76px;
    border: 1px solid #505050;
    margin-top: 25px;
    padding: 30px 4% 20px;
    z-index: 1; }
    #container #what02 .nameArea02 h3 {
      width: 40%;
      min-height: 14px;
      position: absolute;
      top: -15px;
      left: 30%;
      font-size: 15px;
      background-color: #ffffff;
      text-align: center;
      z-index: 2; }
    #container #what02 .nameArea02 .leftSide {
      width: 100%;
      text-align: center; }
      #container #what02 .nameArea02 .leftSide .imgSp {
        display: inline-block;
        width: 58%;
        max-width: 342px; }
      #container #what02 .nameArea02 .leftSide .imgPc {
        display: none; }
    #container #what02 .nameArea02 .rightSide {
      width: 100%;
      margin-top: 30px; }
      #container #what02 .nameArea02 .rightSide p {
        max-width: 100%;
        font-size: 12px; }
  #container #what02 .logoArea {
    position: static;
    width: 100%;
    height: auto;
    padding-top: 0;
    margin-top: 30px; }
    #container #what02 .logoArea .txt {
      position: static;
      top: 0;
      right: 0;
      width: 100%;
      min-height: auto;
      z-index: 2; }
    #container #what02 .logoArea .imgPc {
      display: none; }
    #container #what02 .logoArea .imgSp {
      width: 100%;
      text-align: center;
      margin: 10px 0; }
      #container #what02 .logoArea .imgSp img {
        width: 100%;
        max-width: 596px; }
    #container #what02 .logoArea .txtSp01 {
      display: block;
      margin-bottom: 30px; }
      #container #what02 .logoArea .txtSp01 .inner01 {
        position: relative;
        display: inline-block;
        margin: 30px 0 15px;
        padding: 22px 18px;
        min-width: 120px;
        max-width: 100%;
        color: #555;
        font-size: 12px;
        background: #FFF;
        border: solid 1px #505050;
        border-radius: 5px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
        #container #what02 .logoArea .txtSp01 .inner01:before {
          content: "";
          position: absolute;
          bottom: -33px;
          left: 50%;
          margin-left: -5px;
          border-bottom: 15px solid transparent;
          border-right: 5px solid transparent;
          border-left: 5px solid transparent;
          border-top: 18px solid #FFF;
          z-index: 2; }
        #container #what02 .logoArea .txtSp01 .inner01:after {
          content: "";
          position: absolute;
          bottom: -37px;
          left: 50%;
          margin-left: -6px;
          border-right: 6px solid transparent;
          border-left: 6px solid transparent;
          border-bottom: 18px solid transparent;
          border-top: 19px solid #505050;
          z-index: 1; }
        #container #what02 .logoArea .txtSp01 .inner01 p {
          margin: 0;
          padding: 0; }
      #container #what02 .logoArea .txtSp01 .inner02 {
        position: relative;
        display: inline-block;
        margin: 20px 0 0;
        padding: 22px 18px;
        min-width: 120px;
        max-width: 100%;
        color: #555;
        font-size: 12px;
        background: #FFF;
        border: solid 1px #505050;
        border-radius: 5px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
        #container #what02 .logoArea .txtSp01 .inner02:before {
          content: "";
          position: absolute;
          top: -33px;
          left: 50%;
          margin-left: -5px;
          border-top: 15px solid transparent;
          border-right: 5px solid transparent;
          border-left: 5px solid transparent;
          border-bottom: 18px solid #FFF;
          z-index: 2; }
        #container #what02 .logoArea .txtSp01 .inner02:after {
          content: "";
          position: absolute;
          top: -37px;
          left: 50%;
          margin-left: -6px;
          border-right: 6px solid transparent;
          border-left: 6px solid transparent;
          border-top: 18px solid transparent;
          border-bottom: 19px solid #505050;
          z-index: 1; }
        #container #what02 .logoArea .txtSp01 .inner02 p {
          margin: 0;
          padding: 0; }
    #container #what02 .logoArea .txtSp02 {
      display: block; }
      #container #what02 .logoArea .txtSp02 h4 {
        width: 100%;
        font-size: 12px;
        padding: 4px 0;
        margin-bottom: 8px;
        text-align: center;
        font-weight: normal;
        color: #ffffff; }
      #container #what02 .logoArea .txtSp02 p {
        margin-bottom: 20px; }
        #container #what02 .logoArea .txtSp02 p:last-child {
          margin-bottom: 0; }
      #container #what02 .logoArea .txtSp02 h4.pink {
        background-color: #e94a76; }
      #container #what02 .logoArea .txtSp02 h4.green {
        background-color: #8eaf2a; }
      #container #what02 .logoArea .txtSp02 h4.blue {
        background-color: #0375a2; } }
/**  #cafe  **/
@media screen and (max-width: 860px) {
  #container #cafe .cafeImgArea {
    min-height: auto;
    margin-bottom: 25px; }
    #container #cafe .cafeImgArea .leftSide {
      position: static;
      width: 90%;
      min-height: auto;
      z-index: 1;
      margin: 36px auto 0;
      padding-left: 11px; }
      #container #cafe .cafeImgArea .leftSide p.txt {
        position: relative;
        bottom: 0;
        right: 0;
        width: 77%;
        height: auto;
        background-color: #ffffff;
        padding: 25px 10% 45px;
        z-index: 3;
        font-size: 12px;
        vertical-align: middle; }
      #container #cafe .cafeImgArea .leftSide:before {
        display: none; }
      #container #cafe .cafeImgArea .leftSide p.txt:before {
        position: absolute;
        top: -11px;
        left: -11px;
        content: "";
        border: 3px solid #eb5d95;
        width: 98%;
        height: 98%;
        z-index: 4; }
    #container #cafe .cafeImgArea .rightSide {
      width: 100%;
      text-align: center; }
      #container #cafe .cafeImgArea .rightSide img {
        width: 100%;
        max-width: 480px; }
  #container #cafe .cafeDataArea .tableWhite {
    width: 90%;
    margin: 0 auto 15px;
    border-top: 1px solid #afafaf;
    font-size: 12px; }
    #container #cafe .cafeDataArea .tableWhite th {
      width: 32%;
      border-right: 1px solid #afafaf;
      background-color: #ffffff;
      text-align: center;
      border-bottom: 1px solid #afafaf;
      padding: 20px 18px; }
      #container #cafe .cafeDataArea .tableWhite th span {
        letter-spacing: 0.2em; }
    #container #cafe .cafeDataArea .tableWhite td {
      border-bottom: 1px solid #afafaf;
      padding: 20px 18px; } }
/**  #detail  **/
@media screen and (max-width: 1000px) {
  #container #detail .imgArea .rightSide ul li {
    width: 40%; } }
@media screen and (max-width: 860px) {
  #container #detail .imgArea .leftSide {
    width: 100%;
    margin-bottom: 20px; }
    #container #detail .imgArea .leftSide #picbox {
      max-width: 586px;
      text-align: center;
      margin: 15px 0 0 15px; }
  #container #detail .imgArea .rightSide {
    width: 100%; }
    #container #detail .imgArea .rightSide ul {
      width: 80%;
      margin: 15px auto 0; }
      #container #detail .imgArea .rightSide ul li {
        width: 43%;
        float: left;
        margin: 0 3% 15px; }
        #container #detail .imgArea .rightSide ul li img {
          width: 94%;
          padding: 2px 0 0 0;
          float: right; }
        #container #detail .imgArea .rightSide ul li a.over:before {
          position: absolute;
          width: 92%;
          height: 96%;
          content: "";
          top: -5px;
          left: -2px;
          border: 2px solid #23b2a2;
          z-index: 2; }
  #container #detail .infoArea {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 25px; }
    #container #detail .infoArea .inner {
      background-color: #ffffff;
      padding: 20px; }
  #container #detail .dataArea, #container #detail .calendarArea {
    width: 100%;
    margin-bottom: 25px; }
  #container #detail .dataArea .inner, #container #detail .calendarArea .inner {
    background-color: #ffffff;
    padding: 20px; }
  #container #detail .dataArea .inner .tableGray {
    width: 100%;
    border-top: none; }
    #container #detail .dataArea .inner .tableGray th {
      width: 34%;
      border-right: none;
      background-color: #ffffff;
      text-align: left;
      border-bottom: none;
      padding: 0 0 20px; }
      #container #detail .dataArea .inner .tableGray th:before {
        content: "【"; }
      #container #detail .dataArea .inner .tableGray th:after {
        content: "】"; }
    #container #detail .dataArea .inner .tableGray td {
      border-bottom: none;
      padding: 0 0 20px; }
    #container #detail .dataArea .inner .tableGray .blueLink li {
      margin-right: 15px;
      margin-bottom: 15px; }
      #container #detail .dataArea .inner .tableGray .blueLink li:last-child {
        margin-right: 0;
        margin-bottom: 0; }
  #container #detail .calendarArea .btnAreaCenter {
    position: relative;
    width: 100% !important;
    min-height: 63px;
    margin: 25px auto 0; }
    #container #detail .calendarArea .btnAreaCenter .btnGreen a {
      font-size: 12px; }
  #container #detail .calendarArea .calendar {
    width: 100%; }
    #container #detail .calendarArea .calendar .control {
      width: 100%;
      height: 35px;
      position: relative;
      margin-bottom: 5px; }
    #container #detail .calendarArea .calendar .prev {
      float: left;
      padding-top: 5px; }
      #container #detail .calendarArea .calendar .prev:before {
        content: "";
        padding: 0 15px 0 0;
        background: url("../../img/cocokita/detail/ico_arrow02_prev.png") left 50% no-repeat; }
    #container #detail .calendarArea .calendar .next {
      float: right;
      padding-top: 5px; }
    #container #detail .calendarArea .calendar .prev a {
      color: #23b2a2;
      font-size: 11px; }
    #container #detail .calendarArea .calendar .next a {
      color: #23b2a2;
      font-size: 11px; }
    #container #detail .calendarArea .calendar .next:after {
      content: "";
      padding: 0 0 0 12px;
      background: url("../../img/cocokita/detail/ico_arrow02_next.png") right 50% no-repeat; }
    #container #detail .calendarArea .calendar h4 {
      position: absolute;
      top: 0;
      left: 45%;
      width: 10%;
      text-align: center;
      font-size: 28px;
      line-height: 1; }
    #container #detail .calendarArea .calendar .tableCalendar {
      width: 100%;
      color: #505050; }
      #container #detail .calendarArea .calendar .tableCalendar th {
        font-size: 7px;
        text-align: center; }
      #container #detail .calendarArea .calendar .tableCalendar td {
        border: 1px solid #c0c4c9;
        padding: 3px 4px 3px;
        vertical-align: top; }
        #container #detail .calendarArea .calendar .tableCalendar td .date {
          font-size: 8px;
          line-height: 1; }
          #container #detail .calendarArea .calendar .tableCalendar td .date span {
            color: #cccccc; }
        #container #detail .calendarArea .calendar .tableCalendar td .btn {
          text-align: center;
          font-size: 11px; }
        #container #detail .calendarArea .calendar .tableCalendar td .x01 {
          text-align: center;
          color: #dbdbdb;
          font-size: 15px;
          line-height: 1.5; }
        #container #detail .calendarArea .calendar .tableCalendar td .btn a {
          color: #58c1db;
          text-decoration: underline; }
  #container #detail .calendarArea .iconList {
    text-align: center;
    font-size: 0;
    vertical-align: middle;
    margin-top: 15px; }
    #container #detail .calendarArea .iconList li {
      display: inline-block;
      font-size: 10px;
      margin-left: 17px;
      color: #505050; }
      #container #detail .calendarArea .iconList li:first-child {
        margin-left: 0; }
      #container #detail .calendarArea .iconList li span {
        color: #ababab;
        font-size: 12px; }
        #container #detail .calendarArea .iconList li span.x {
          font-size: 15px;
          vertical-align: middle; }

  /*
  #container #detail .dataArea .inner .tableGray tr:last-child{
    display: none;
  }
  */ }
/* --------------------------------------------
    予約ページ
    ※ライトボックスはcolorbox.cssに記述
  -------------------------------------------- */
/**  #reserve01,02共通　チェックボックス  **/
.check_css {
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  padding: 0 0 0 23px;
  vertical-align: middle;
  cursor: pointer; }
  .check_css:after {
    -webkit-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear;
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    margin-top: -10px;
    width: 16px;
    height: 16px;
    border: 1px solid #505050;
    content: ''; }
  .check_css:before {
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    position: absolute;
    top: 46%;
    left: 5px;
    display: block;
    margin-top: -7px;
    width: 5px;
    height: 9px;
    border-right: 3px solid #0171bd;
    border-bottom: 3px solid #0171bd;
    content: '';
    opacity: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }

input[type=checkbox]:checked ~ .check_css:before {
  opacity: 1; }

.all-ck label {
  cursor: pointer; }

.check_css_off {
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  padding: 0 0 0 23px;
  vertical-align: middle; }
  .check_css_off:after {
    -webkit-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear;
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    margin-top: -10px;
    width: 16px;
    height: 16px;
    border: 1px solid #dbdbdb;
    background-color: #dbdbdb;
    content: ''; }

/**  #reserve01  **/
#container #reserve01 .control {
  width: 100%;
  height: 30px;
  position: relative;
  margin-bottom: 10px; }
  #container #reserve01 .control .prev {
    float: left; }
    #container #reserve01 .control .prev:before {
      content: "";
      padding: 0 15px 0 0;
      background: url("../../img/cocokita/detail/ico_arrow02_prev.png") left 50% no-repeat; }
  #container #reserve01 .control .next {
    float: right; }
  #container #reserve01 .control .prev a {
    color: #23b2a2;
    font-size: 15px; }
  #container #reserve01 .control .next a {
    color: #23b2a2;
    font-size: 15px; }
  #container #reserve01 .control .next:after {
    content: "";
    padding: 0 0 0 12px;
    background: url("../../img/cocokita/detail/ico_arrow02_next.png") right 50% no-repeat; }
  #container #reserve01 .control h1 {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    text-align: center;
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.1em; }
#container #reserve01 h2 {
  color: #ffffff;
  background-color: #23b2a2;
  font-size: 14px;
  padding: 8px;
  margin-bottom: 20px;
  text-align: center; }
#container #reserve01 .all {
  text-align: center;
  font-size: 15px;
  margin-bottom: 20px; }
#container #reserve01 ul li {
  margin-bottom: 15px;
  font-size: 15px; }
  #container #reserve01 ul li:nth-child(7) {
    margin-bottom: 0; }
  #container #reserve01 ul li span {
    color: #dbdbdb; }
#container #reserve01 ul.left {
  float: left;
  width: 50%;
  border-right: 1px solid #505050; }
#container #reserve01 ul.right {
  float: right;
  text-align: right; }
#container #reserve02 .control {
  width: 100%;
  height: 30px;
  position: relative;
  margin-bottom: 10px; }
  #container #reserve02 .control .prev {
    float: left; }
    #container #reserve02 .control .prev:before {
      content: "";
      padding: 0 15px 0 0;
      background: url("../../img/cocokita/detail/ico_arrow02_prev.png") left 50% no-repeat; }
  #container #reserve02 .control .next {
    float: right; }
  #container #reserve02 .control .prev a {
    color: #23b2a2;
    font-size: 15px; }
  #container #reserve02 .control .next a {
    color: #23b2a2;
    font-size: 15px; }
  #container #reserve02 .control .next:after {
    content: "";
    padding: 0 0 0 12px;
    background: url("../../img/cocokita/detail/ico_arrow02_next.png") right 50% no-repeat; }
  #container #reserve02 .control h1 {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    text-align: center;
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.1em; }
#container #reserve02 h2 {
  color: #ffffff;
  background-color: #23b2a2;
  font-size: 14px;
  padding: 8px;
  margin-bottom: 20px;
  text-align: center; }
#container #reserve02 ul li {
  font-size: 0;
  margin-bottom: 15px;
  margin-right: 1%;
  display: inline-block;
  font-size: 14px;
  width: 18%; }
  #container #reserve02 ul li:nth-child(5n) {
    margin-right: 0; }
  #container #reserve02 ul li:nth-last-child(-n+5) {
    margin-bottom: 0; }
  #container #reserve02 ul li span {
    color: #dbdbdb; }
#container #reserve03 h1, #container #reserve04 h1 {
  width: 100%;
  text-align: center;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -0.1em;
  margin-bottom: 25px; }
#container #reserve03 h2, #container #reserve04 h2 {
  color: #ffffff;
  background-color: #23b2a2;
  font-size: 14px;
  padding: 8px;
  margin-bottom: 25px;
  text-align: center; }
#container #reserve03 .tableGray, #container #reserve04 .tableGray {
  width: 100%;
  border-top: 1px solid #afafaf;
  font-size: 15px; }
#container #reserve03 .tableGray th, #container #reserve04 .tableGray th {
  width: 30%;
  border-right: 1px solid #afafaf;
  background-color: #f0f3f6; }
#container #reserve03 .tableGray th, #container #reserve03 .tableGray td {
  border-bottom: 1px solid #afafaf;
  padding: 15px 10px; }
#container #reserve04 .tableGray th, #container #reserve04 .tableGray td {
  border-bottom: 1px solid #afafaf;
  padding: 15px 10px; }
#container #reserve03 .attention, #container #reserve04 .attention {
  margin-top: 25px; }
#container #reserve03 .attention li, #container #reserve04 .attention li {
  color: #eb5d95;
  font-size: 14px;
  margin-bottom: 3px;
  margin-left: 1em;
  text-indent: -1em; }
#container #reserve03 .attention li:before, #container #reserve04 .attention li:before {
  content: "※"; }
#container #reserve03 .attention li:last-child, #container #reserve04 .attention li:last-child {
  margin-bottom: 0; }

@media screen and (max-width: 469px) {
  #container #reserve01 .control {
    height: 20px; }
    #container #reserve01 .control h1 {
      position: absolute;
      top: 0;
      left: 10%;
      width: 80%;
      text-align: center;
      font-size: 18px;
      line-height: 1;
      letter-spacing: -0.1em; }
    #container #reserve01 .control .prev a, #container #reserve01 .control .next a {
      font-size: 12px; }
  #container #reserve01 h2 {
    font-size: 12px;
    padding: 8px;
    margin-bottom: 15px; }
  #container #reserve01 .all {
    text-align: center;
    font-size: 13px;
    margin-bottom: 15px; }
  #container #reserve01 ul li {
    margin-bottom: 15px;
    font-size: 13px; } }
/**  #reserve02  **/
@media screen and (max-width: 469px) {
  #container #reserve02 .control {
    height: 20px;
    margin-bottom: 15px; }
    #container #reserve02 .control h1 {
      position: absolute;
      top: 0;
      left: 10%;
      width: 80%;
      text-align: center;
      font-size: 18px;
      line-height: 1;
      letter-spacing: -0.1em; }
    #container #reserve02 .control .prev a, #container #reserve02 .control .next a {
      font-size: 12px; }
  #container #reserve02 h2 {
    font-size: 12px;
    padding: 8px;
    margin-bottom: 15px; }
  #container #reserve02 ul li {
    margin-bottom: 15px;
    font-size: 13px; } }
/**  #reserve03,04  **/
/* パンくずリスト */
.breadcrumbArea {
  color: #505050;
  font-size: 0;
  max-width: 1000px;
  margin: 0 auto 70px; }

.subPage02 .breadcrumbArea {
  margin: 0 auto;
  padding-bottom: 70px; }

.breadcrumbArea ul li {
  color: #505050;
  display: inline-block;
  text-align: left;
  overflow: hidden;
  font-size: 12px;
  padding-right: 10px; }
  .breadcrumbArea ul li a {
    color: #505050;
    text-decoration: underline; }
  .breadcrumbArea ul li span {
    display: inline-block;
    position: relative; }
  .breadcrumbArea ul li a span:after {
    content: ">";
    width: 17px; }
  .breadcrumbArea ul li span:after {
    margin-left: 10px; }

@media screen and (max-width: 860px) {
  .breadcrumbArea {
    display: none; } }
/* --------------------------------------------
    footer
  -------------------------------------------- */
footer .inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 0 55px;
  font-size: 17px; }
footer .leftSide {
  width: 50%; }
  footer .leftSide #logo {
    width: 240px;
    height: 68px; }
  footer .leftSide #logo02 a {
    width: 240px;
    height: 68px;
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url("../../img/cocokita/logo.png") 0 0 no-repeat; }
    footer .leftSide #logo02 a:hover {
      opacity: 0.8; }
  footer .leftSide .address {
    margin: 30px 0 10px; }
  footer .leftSide table {
    margin: 15px 0 35px; }
    footer .leftSide table th, footer .leftSide table td {
      padding-top: 10px;
      padding-bottom: 10px;
      line-height: 1.2; }
    footer .leftSide table tr:nth-child(1) th, footer .leftSide table tr:nth-child(1) td {
      padding-top: 0; }
    footer .leftSide table tr:last-child th, footer .leftSide table tr:last-child td {
      padding-bottom: 0; }
    footer .leftSide table th {
      border-right: 1px solid #303030;
      padding-right: 5px; }
      footer .leftSide table th span {
        letter-spacing: 0.5em; }
    footer .leftSide table td {
      padding-left: 10px; }
      footer .leftSide table td span {
        font-size: 14px; }
footer .bannerArea {
  float: left; }
  footer .bannerArea li {
    width: 47%;
    display: inline-block;
    margin: 0 1% 0 0;
    border: 1px solid #dcdee1;
    text-align: center; }
    footer .bannerArea li:last-child {
      margin: 0; }
    footer .bannerArea li img {
      width: 100%;
      max-width: 226px; }
footer .rightSide {
  width: 45%; }
footer .twitterAreaPc {
  border: 1px solid #eee;
  width: 100%;
  height: 420px; }
footer .twitterAreaSp {
  display: none; }
footer p.copyright {
  background-color: #23b2a2;
  color: #ffffff;
  font-size: 11px;
  text-align: center;
  padding: 10px 0;
  margin-top: 10px; }

@media screen and (max-width: 860px) {
  footer .inner {
    width: 90%;
    padding: 20px 0;
    font-size: 12px; }
  footer .leftSide {
    width: 100%; }
    footer .leftSide #logo02 {
      margin: 0 auto;
      width: 185px; }
      footer .leftSide #logo02 a {
        width: 185px;
        height: 55px;
        display: block;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        background: url("../../img/cocokita/logo_f_sp.png") 0 0 no-repeat;
        background-size: 185px 55px; }
    footer .leftSide table {
      margin: 15px 0 20px; }
      footer .leftSide table th {
        width: 22%;
        padding-bottom: 5px; }
      footer .leftSide table td {
        padding-bottom: 5px; }
        footer .leftSide table td span {
          font-size: 11px; }
  footer .bannerArea {
    width: 100%;
    font-size: 0;
    margin-top: 20px; }
    footer .bannerArea li {
      width: 48%;
      float: left;
      margin: 0; }
      footer .bannerArea li img {
        width: 100%;
        max-width: 278px; }
      footer .bannerArea li:nth-child(2) {
        float: right; }
      footer .bannerArea li img {
        width: 100%; }
  footer .rightSide {
    width: 100%; }
  footer .twitterAreaSp {
    display: block;
    border: 1px solid #eee;
    width: 100%;
    height: 295px;
    margin-top: 20px; }
  footer .twitterAreaPc {
    display: none; }
  footer p.copyright {
    background-color: #ffffff;
    color: #23b2a2;
    font-size: 10px;
    text-align: center;
    padding: 10px 0;
    margin-top: 0; }
  footer #menu {
    background-color: #23b2a2;
    color: #ffffff;
    font-size: 12px; }
    footer #menu li {
      position: relative;
      width: 100%;
      height: auto;
      border-bottom: 1px solid #eee;
      padding: 8px 0; }
      footer #menu li a {
        display: block;
        color: #ffffff;
        padding-left: 10px; }
      footer #menu li:after {
        position: absolute;
        top: 35%;
        right: 10px;
        content: "";
        width: 11px;
        height: 12px;
        background: url("../../img/cocokita/ico_arrow_white_02_sp.png") 0 0 no-repeat;
        background-size: 11px 12px; } }
/* Artist Bank / Residence Artist
  -------------------------------------------- */
#container article.subPage02 {
  padding: 25px 0 0; }
#container h2.subPage02ttl {
  font-size: 38px;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 0.8;
  margin-bottom: 35px;
  font-family: 'Open Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: bold; }
  #container h2.subPage02ttl span.sub {
    font-size: 16px;
    letter-spacing: 0.1em;
    font-weight: bold; }
  #container h2.subPage02ttl > span {
    position: relative;
    padding-left: 45px; }
  #container h2.subPage02ttl.residenceArtist > span {
    position: relative;
    padding-left: 55px; }
  #container h2.subPage02ttl.icNone > span {
    padding-left: 0; }
    #container h2.subPage02ttl.icNone > span:before {
      display: none; }
  #container h2.subPage02ttl.artistBank > span:before {
    content: "";
    width: 30px;
    height: 45px;
    position: absolute;
    left: 0;
    top: 6px;
    background: url("../../img/cocokita/artistbank/ico_ttl.png") left center no-repeat;
    background-size: cover; }
  #container h2.subPage02ttl.residenceArtist > span:before {
    content: "";
    width: 42px;
    height: 45px;
    position: absolute;
    left: 0;
    top: 6px;
    background: url("../../img/cocokita/residenceartist/ico_ttl.png") left center no-repeat;
    background-size: cover; }
  #container h2.subPage02ttl.artistBank {
    color: #8c81c3; }
  #container h2.subPage02ttl.residenceArtist {
    color: #eb5d95; }
#container #what.subPage02 .mainImgArea {
  position: relative; }
  #container #what.subPage02 .mainImgArea .bg {
    width: 1200px;
    margin: 0 auto;
    position: absolute;
    top: -60px;
    left: 0;
    right: 0; }
  #container #what.subPage02 .mainImgArea .txt {
    position: absolute;
    bottom: 20%;
    right: 7%;
    width: 458px;
    min-height: 280px;
    z-index: 2; }
    #container #what.subPage02 .mainImgArea .txt .inner {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 345px;
      min-height: 175px;
      background-color: #ffffff;
      padding: 40px 50px 50px;
      z-index: 3;
      font-size: 15px; }
    #container #what.subPage02 .mainImgArea .txt:before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: 441px;
      height: 260px;
      z-index: 4; }
    #container #what.subPage02 .mainImgArea .txt h3 {
      font-size: 19px;
      margin-bottom: 10px; }
#container #what.subPage02.artistBank .mainImgArea .txt h3 {
  color: #8c81c3; }
#container #what.subPage02.residenceArtist .mainImgArea .txt h3 {
  color: #eb5d95; }
#container #what.subPage02.artistBank .mainImgArea .txt:before {
  border: 4px solid #8c81c3; }
#container #what.subPage02.residenceArtist .mainImgArea .txt:before {
  border: 4px solid #eb5d95; }

#artistBank01 {
  max-width: 1000px;
  margin: 0 auto; }
  #artistBank01 .txtArea {
    max-width: 1000px;
    min-height: 265px;
    position: relative; }
    #artistBank01 .txtArea .bg {
      max-width: 1000px;
      position: absolute;
      top: -80px;
      z-index: 10; }
    #artistBank01 .txtArea p {
      font-size: 17px;
      text-align: center;
      margin-bottom: 35px; }
  #artistBank01 .nameArea02 {
    position: relative;
    width: 93%;
    min-height: 76px;
    border: 1.5px solid #505050;
    margin: 65px auto 0;
    padding: 55px 4% 40px 7%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1; }
    #artistBank01 .nameArea02 h3 {
      width: 58%;
      min-height: 19px;
      position: absolute;
      top: -15px;
      left: 22%;
      font-size: 19px;
      font-weight: bold;
      background-color: #f0f3f6;
      text-align: center;
      z-index: 2; }
    #artistBank01 .nameArea02 p {
      font-size: 17px; }
      #artistBank01 .nameArea02 p a {
        color: #8c81c3; }

@media screen and (max-width: 768px) {
  #artistBank01 center {
    padding: 0 1rem; } }
@media screen and (max-width: 768px) {
  #artistBank01 center img {
    width: 100%; } }
.ttlLine {
  font-size: 24px;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 0.8;
  margin-bottom: 65px;
  font-family: 'Open Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: bold; }
  .ttlLine span {
    padding-bottom: 20px;
    position: relative; }
    .ttlLine span:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 28px;
      margin-left: -14px; }
  .ttlLine.purple {
    color: #8c81c3; }
    .ttlLine.purple span:after {
      border-bottom: 3px solid #8c81c3; }

#artistList {
  max-width: 980px;
  margin: 0 auto; }
  #artistList .box {
    margin-bottom: 100px; }
    #artistList .box .leftSide p {
      width: 160px;
      height: 160px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      text-align: center;
      background-color: #8c81c3; }
    #artistList .box .rightSide {
      max-width: 760px;
      width: 100%;
      border-top: 1px #afafaf solid; }
      #artistList .box .rightSide li {
        font-size: 17px;
        text-indent: -17px;
        padding: 25px 10px 25px 24px;
        border-bottom: 1px #afafaf solid; }
        #artistList .box .rightSide li:before {
          content: ">";
          padding-right: 10px; }

#detaBoxArea {
  max-width: 1000px;
  margin: 0 auto; }
  #detaBoxArea .txt {
    position: static;
    bottom: 0;
    right: 0;
    width: 100%;
    min-height: auto;
    z-index: 2; }
    #detaBoxArea .txt .inner {
      min-height: 100px;
      position: relative;
      top: 0;
      right: 0;
      width: auto;
      height: auto;
      background-color: #ffffff;
      padding: 40px 50px 50px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      z-index: 3;
      font-size: 15px; }
      #detaBoxArea .txt .inner:before {
        position: absolute;
        top: -11px;
        left: -11px;
        content: "";
        width: 100%;
        height: 100%;
        z-index: 4; }
    #detaBoxArea .txt.artistBank .inner:before {
      border: 4px solid #8c81c3; }
    #detaBoxArea .txt.residenceArtist .inner:before {
      border: 4px solid #eb5d95; }
    #detaBoxArea .txt h3 {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 40px; }
      #detaBoxArea .txt h3 span {
        color: #ffffff;
        font-size: 14px;
        font-weight: normal;
        padding: 4px 20px;
        margin-right: 20px;
        vertical-align: 2px;
        background-color: #8c81c3; }
    #detaBoxArea .txt .leftSide {
      max-width: 300px; }
      #detaBoxArea .txt .leftSide img {
        width: 100%; }
    #detaBoxArea .txt .rightSide {
      width: 61%;
      font-size: 15px;
      line-height: 1.8; }
      #detaBoxArea .txt .rightSide a {
        position: relative;
        z-index: 10; }
      #detaBoxArea .txt .rightSide span {
        float: right;
        width: 260px;
        text-align: center;
        background-color: #a098cd;
        margin-top: 40px; }
        #detaBoxArea .txt .rightSide span a {
          display: block;
          width: 100%;
          height: 50px;
          line-height: 50px;
          color: #fff;
          position: relative;
          z-index: 10; }
          #detaBoxArea .txt .rightSide span a:before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 40px;
            margin: auto;
            content: "";
            vertical-align: middle;
            position: absolute;
            width: 7px;
            height: 7px;
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg); }
    #detaBoxArea .txt table {
      margin-top: 40px; }
      #detaBoxArea .txt table th {
        width: 12%;
        padding: 45px 0;
        vertical-align: middle;
        text-align: center;
        color: #ffffff;
        background-color: #b9b4da;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
      #detaBoxArea .txt table td {
        max-width: 760px;
        width: 80%;
        color: #ffffff;
        padding: 20px 25px;
        background-color: #a098cd;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }

#container .subPage02btn .btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 95%;
  min-height: 46px;
  background-color: #ffffff;
  text-align: center;
  z-index: 2; }
#container .subPage02btn .btnPurple {
  border: 3px solid #8c81c3; }
#container .subPage02btn .btnPink {
  border: 3px solid #eb5d95; }
#container .subPage02btn .btn a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  z-index: 3; }
#container .subPage02btn .btnPurple a {
  color: #8c81c3; }
#container .subPage02btn .btnPink a {
  color: #eb5d95; }
#container .subPage02btn .btnPurple a:before {
  content: "";
  padding: 0 15px 0 0;
  background: url("../../img/cocokita/ico_arrow_purple01.png") left 50% no-repeat; }
#container .subPage02btn .btnPink a:before {
  content: "";
  padding: 0 15px 0 0;
  background: url("../../img/cocokita/ico_arrow_pink02.png") left 50% no-repeat; }
#container .subPage02btn:after {
  position: absolute;
  top: 11px;
  left: 11px;
  content: "";
  width: 95%;
  min-height: 46px;
  background-color: #ffffff;
  z-index: 1; }
#container .subPage02btn.btnBgPurple:after {
  border: 3px solid #8c81c3; }
#container .subPage02btn.btnBgPink:after {
  border: 3px solid #eb5d95; }

.mb0 {
  margin-bottom: 0 !important; }

#residenceArtist01 {
  max-width: 1000px;
  margin: 0 auto; }
  #residenceArtist01 .box {
    max-width: 1000px;
    min-height: 265px;
    position: relative; }
    #residenceArtist01 .box .bg {
      max-width: 1000px;
      position: absolute;
      top: -85px;
      z-index: 10; }
    #residenceArtist01 .box ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding-top: 60px; }
      #residenceArtist01 .box ul li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        max-width: 470px;
        padding: 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-color: #ffffff;
        position: relative; }
        #residenceArtist01 .box ul li:before {
          position: absolute;
          top: -10px;
          left: -10px;
          width: 99%;
          height: 98%;
          content: "";
          border: 4px solid #eb5d95; }
        #residenceArtist01 .box ul li .leftSide {
          margin-right: 20px; }
        #residenceArtist01 .box ul li .rightSide {
          position: relative; }
          #residenceArtist01 .box ul li .rightSide .name {
            color: #eb5d95;
            font-size: 16px;
            line-height: 1.4;
            margin-bottom: 15px; }
          #residenceArtist01 .box ul li .rightSide .txt {
            font-size: 14px; }
          #residenceArtist01 .box ul li .rightSide .link {
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0; }

@media screen and (max-width: 860px) {
  #container h2.subPage02ttl {
    font-size: 32px; }
    #container h2.subPage02ttl span.sub {
      font-size: 14px; }
  #container article.subPage02 {
    padding: 25px 0 15px;
    margin: 0; }
  #container #what.subPage02 .mainImgArea {
    position: static;
    width: 100%;
    z-index: 1; }
    #container #what.subPage02 .mainImgArea .img img {
      width: 100%; }
    #container #what.subPage02 .mainImgArea .txt {
      position: static;
      bottom: 0;
      right: 0;
      width: 90%;
      min-height: auto;
      margin: 21px auto 0;
      padding-left: 11px; }
      #container #what.subPage02 .mainImgArea .txt:before {
        display: none; }
      #container #what.subPage02 .mainImgArea .txt .inner {
        min-height: 100px;
        position: relative;
        top: 0;
        right: 0;
        width: auto;
        height: auto;
        background-color: #ffffff;
        padding: 25px 10% 45px;
        z-index: 3;
        font-size: 12px; }
        #container #what.subPage02 .mainImgArea .txt .inner:before {
          position: absolute;
          top: -11px;
          left: -11px;
          content: "";
          width: 98%;
          height: 98%;
          z-index: 4; }
  #container #what.subPage02.artistBank .mainImgArea .txt .inner:before {
    border: 3px solid #8c81c3; }
  #container #what.subPage02.residenceArtist .mainImgArea .txt .inner:before {
    border: 3px solid #eb5d95; }

  #artistBank01 .nameArea02 {
    text-align: center;
    position: relative;
    width: 92%;
    min-height: 76px;
    border: 1px solid #505050;
    margin: 0 auto;
    padding: 50px 4% 30px;
    z-index: 1; }
    #artistBank01 .nameArea02 h3 {
      width: 80%;
      min-height: 14px;
      position: absolute;
      top: -15px;
      left: 10%;
      font-size: 15px; }
    #artistBank01 .nameArea02 p {
      font-size: 12px;
      margin-bottom: 10px; }
  #artistBank01 .txtArea {
    width: 90%;
    max-width: inherit;
    min-height: inherit;
    margin: 20px auto 40px; }
    #artistBank01 .txtArea p {
      font-size: 14px;
      margin-bottom: 20px; }
    #artistBank01 .txtArea .bg {
      display: none; }

  #artistList .box {
    width: 90%;
    margin: 0 auto 60px; }
    #artistList .box .leftSide p {
      width: 120px;
      height: 120px;
      margin-bottom: 20px; }
    #artistList .box .rightSide li {
      font-size: 12px;
      padding: 20px 10px 20px 24px; }

  #detaBoxArea {
    width: 100%;
    margin: 0 auto; }
    #detaBoxArea .txt {
      position: static;
      bottom: 0;
      right: 0;
      width: 90%;
      min-height: auto;
      margin: 21px auto 0;
      padding-left: 11px; }
      #detaBoxArea .txt .inner {
        min-height: 100px;
        position: relative;
        top: 0;
        right: 0;
        width: auto;
        height: auto;
        background-color: #ffffff;
        padding: 25px 10% 45px 6%;
        z-index: 3;
        font-size: 12px; }
        #detaBoxArea .txt .inner:before {
          position: absolute;
          top: -11px;
          left: -11px;
          content: "";
          border: 3px solid #8c81c3;
          width: 98%;
          height: 98%;
          z-index: 4; }
      #detaBoxArea .txt h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px; }
      #detaBoxArea .txt .leftSide {
        width: 100%;
        text-align: center;
        margin: 0 auto 20px; }
      #detaBoxArea .txt .rightSide {
        width: 100%;
        font-size: 12px;
        line-height: 1.6; }
    #detaBoxArea .subPage02btn {
      width: 90%; }

  #residenceArtist01 .box ul {
    width: 96%;
    display: block;
    margin: 0 2%;
    padding-top: 0; }
    #residenceArtist01 .box ul li {
      width: 98%;
      padding: 10px;
      margin: 0 auto 20px; }
      #residenceArtist01 .box ul li .leftSide {
        padding-bottom: 5px; }
        #residenceArtist01 .box ul li .leftSide img {
          width: 100%; }
      #residenceArtist01 .box ul li .rightSide .name {
        font-size: 14px; }
      #residenceArtist01 .box ul li .rightSide .txt {
        font-size: 12px; }
      #residenceArtist01 .box ul li .rightSide .link {
        bottom: -6px; } }
/* My page
  -------------------------------------------- */
#container.subPage02 {
  padding: 25px 0 0 !important; }
  #container.subPage02 .blue.subPage02 {
    padding: 25px 0 100px !important; }

#mypage {
  max-width: 1000px;
  margin: 0 auto; }
  #mypage .box {
    padding: 60px 80px;
    margin-bottom: 60px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffffff; }
    #mypage .box:last-child {
      margin-bottom: 0; }
    #mypage .box .ttl {
      color: #ffffff;
      font-size: 19px;
      text-align: center;
      padding: 10px 0;
      margin-bottom: 35px;
      background-color: #58c1db; }
    #mypage .box .table01, #mypage .box .table02 {
      width: 100%;
      border-top: 1px solid #afafaf; }
    #mypage .box .table01 th {
      width: 20%;
      border-right: 1px solid #afafaf;
      background-color: #f0f3f6;
      font-size: 17px;
      border-bottom: 1px solid #afafaf;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 30px 20px; }
      #mypage .box .table01 th span {
        letter-spacing: 0.2em; }
    #mypage .box .table01 td {
      font-size: 17px;
      border-bottom: 1px solid #afafaf;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 30px 20px; }
    #mypage .box .table02 th, #mypage .box .table02 td {
      font-size: 17px;
      border-bottom: 1px solid #afafaf;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 30px 20px; }
    #mypage .box .table02 th {
      width: 20%; }
    #mypage .box table table th {
      width: 25% !important;
      border-right: none !important;
      background-color: inherit !important;
      border-bottom: none !important;
      padding: 5px 10px !important; }
    #mypage .box table table td {
      border-bottom: none !important;
      padding: 5px 10px !important;
      width: 60%; }
    #mypage .box .txt01 {
      text-align: center;
      margin: 40px 0 30px; }
    #mypage .box .link {
      text-align: right;
      margin: 5px 0 60px; }
      #mypage .box .link.last {
        margin: 5px 0 0; }
      #mypage .box .link a {
        color: #58c1db; }
        #mypage .box .link a:after {
          content: "";
          padding: 0 15px 0 0;
          background: url("../../img/cocokita/ico_arrow_blue01.png") right 50% no-repeat; }
    #mypage .box .btnArea {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center; }
      #mypage .box .btnArea .btnAreaCenter {
        width: 30%;
        margin: 40px 25px 0; }

input[type="text"], input[type="password"] {
  width: 80%;
  border: 1px solid #c9c9c9;
  padding: 0.6em 1em; }
input[type="text"].gray, input[type="password"].gray {
  background-color: #ddd; }

@media screen and (max-width: 860px) {
  #container.subPage02 {
    padding: 0 !important; }

  #mypage .box {
    width: 96%;
    padding: 20px;
    margin: 0 2% 60px;
    background-color: #ffffff; }
    #mypage .box .table01, #mypage .box .table02 {
      width: 100%;
      margin: 0 auto 15px;
      border-top: 1px solid #afafaf;
      font-size: 12px; }
    #mypage .box .table01 th, #mypage .box .table02 th {
      display: block;
      width: 100%;
      font-size: 12px;
      text-align: center;
      padding: 15px 0;
      border-right: none;
      background-color: #f0f3f6; }
    #mypage .box .table01 td, #mypage .box .table02 td {
      display: block;
      font-size: 12px;
      width: 100%;
      padding: 20px; }
    #mypage .box table table th {
      width: 100% !important; }
    #mypage .box .btnArea {
      display: block; }
      #mypage .box .btnArea .btnAreaCenter {
        width: 100%;
        margin: 20px 0 0; } }
#container .eventList {
  max-width: 900px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  #container .eventList a {
    display: block;
    margin: 0 auto 40px; }
#container .listArea {
  font-size: 15px;
  text-align: left;
  height: 100%;
  min-height: 1px; }
  #container .listArea .img {
    position: relative;
    width: 258px;
    height: 258px; }
    #container .listArea .img img {
      position: absolute;
      top: 11px;
      right: 0;
      content: "";
      width: 245px;
      height: 245px;
      z-index: 1; }
    #container .listArea .img:before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: 240px;
      height: 240px;
      border: 3px solid #58c1db;
      z-index: 2; }
  #container .listArea .date {
    margin-top: 15px;
    width: 258px; }
  #container .listArea .txt {
    width: 258px; }
#container #accessArea .box {
  max-width: 800px;
  font-size: 16px;
  border: 3px solid #23b2a2;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 40px; }
  #container #accessArea .box .sub {
    font-size: 14px; }
    #container #accessArea .box .sub a {
      text-decoration: underline; }
#container article.flowAreaArticle {
  padding: 50px 0 0; }
#container article.pdfAreaArticle {
  padding: 50px 0 25px; }

@media screen and (max-width: 890px) {
  #container .listArea p {
    margin: 0 auto; } }
@media screen and (max-width: 860px) {
  #container #accessArea .box {
    font-size: 16px;
    margin: 0 auto 80px;
    padding: 20px; } }
/**  #flow  **/
#flowTtl .txt {
  font-size: 15px;
  text-align: center; }

#flowArea {
  max-width: 1000px;
  margin: 0 auto;
  padding: 70px 75px;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

#pdfArea {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 5px;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

#terms {
  padding: 70px 0;
  background-color: #fff; }

#toMedia {
  padding: 70px 0; }

.ttlFlow {
  color: #ffffff;
  font-size: 19px;
  text-align: center;
  padding: 15px 0;
  margin-bottom: 35px;
  background-color: #58c1db;
  letter-spacing: 0.1em;
  line-height: 0.8;
  font-family: 'Open Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: bold; }

#flowArea .ttlLine02 {
  max-width: 440px;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #58c1db;
  font-size: 19px;
  text-align: center;
  padding: 15px 0;
  margin: 0 auto 35px;
  letter-spacing: 0.1em;
  line-height: 0.8;
  font-family: 'Open Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: bold; }
  #flowArea .ttlLine02:before, #flowArea .ttlLine02:after {
    content: "";
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 3px;
    background: #58c1db;
    display: block; }
  #flowArea .ttlLine02:before {
    margin-right: .4em; }
  #flowArea .ttlLine02:after {
    margin-left: .4em; }
#flowArea .box ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-bottom: 50px;
  margin-bottom: 50px;
  border-bottom: 1px #58c1db dotted; }
#flowArea .box.bottom ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-bottom: 35px;
  margin-bottom: 0;
  border-bottom: none; }
#flowArea .box ul li {
  width: 256px;
  padding: 24px 15px 17px;
  border: 2px #58c1db solid;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative; }
#flowArea .box.bottom ul li {
  margin: 0 20px; }
#flowArea .box.top ul li:before {
  content: '';
  width: 20px;
  height: 23px;
  position: absolute;
  right: -34px;
  top: 45%;
  background: url("../images/flow/ico_arrow03.png") right 50% no-repeat; }
#flowArea .box.top ul li:nth-child(3):before {
  display: none; }
#flowArea .box ul li .ico {
  text-align: center; }
#flowArea .box.top ul li:nth-child(1) .ico {
  padding: 40px 0 40px; }
#flowArea .box.top ul li:nth-child(2) .ico {
  padding: 40px 0 25px; }
#flowArea .box.top ul li:nth-child(3) .ico {
  padding: 10px 0 20px; }
#flowArea .box.bottom ul li:nth-child(1) .ico {
  padding: 30px 0 30px; }
#flowArea .box.bottom ul li:nth-child(2) .ico {
  padding: 5px 0 20px; }
#flowArea .box ul li .txt {
  line-height: 1.8; }
#flowArea .txt02 {
  color: #58c1db;
  font-size: 16px;
  font-weight: bold;
  text-align: center; }

#pdfArea ul {
  display: flex;
  justify-content: space-between; }
  #pdfArea ul li {
    width: 33%;
    padding: 0 30px;
    border-right: 1px #58c1db dotted;
    box-sizing: border-box; }
    #pdfArea ul li:last-child {
      border-right: none; }
    #pdfArea ul li .icoArea {
      display: flex;
      justify-content: center;
      padding: 15px 0 30px; }
    #pdfArea ul li .ico {
      text-align: center;
      margin: 0 15px; }
      #pdfArea ul li .ico span {
        display: block;
        font-size: 16px;
        margin-top: 10px; }

.flowbox {
  max-width: 1000px;
  width: 100%;
  margin: 2em auto;
  padding: 0; }
  .flowbox label {
    display: block;
    margin: 1.5px 0;
    padding: 25px 25px 25px 110px;
    margin-bottom: 50px;
    font-weight: bold;
    color: #58c1db;
    font-size: 18px;
    background: #f0f3f6;
    transition: all 0.2s;
    position: relative;
    cursor: pointer; }
    .flowbox label a {
      font-weight: bold;
      color: #58c1db;
      font-size: 18px;
      cursor: pointer;
      -webkit-transition: all 0.2s; }
      .flowbox label a:hover {
        opacity: 0.6; }
    .flowbox label.terms {
      padding: 0;
      width: 100%;
      height: 80px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: unset; }
      .flowbox label.terms:hover {
        opacity: 0.6; }
      .flowbox label.terms span {
        width: 80px;
        padding: 0;
        height: inherit;
        display: flex;
        align-items: center;
        justify-content: center; }
      .flowbox label.terms a {
        display: flex;
        align-items: center;
        width: 100%;
        height: inherit;
        margin: 0;
        padding-left: 110px; }
        .flowbox label.terms a:hover {
          opacity: 1; }
      @media screen and (max-width: 860px) {
        .flowbox label.terms {
          height: 56px; }
          .flowbox label.terms span {
            width: 56px; }
          .flowbox label.terms a {
            padding-left: 70px; } }

#toMedia .flowbox label {
  background: #ffffff; }

.flowbox label span {
  display: block;
  padding: 16px 30px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #58c1db;
  color: #ffffff;
  font-size: 35px;
  font-family: 'Open Sans', sans-serif;
  text-align: center; }
.flowbox label:after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  right: 15px;
  top: 40%;
  background: url("../images/flow/ico_arrow01.png") right 50% no-repeat; }
.flowbox input {
  display: none; }
.flowbox .accshow {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0; }

.cssacc:checked + label + .accshow {
  height: auto;
  padding: 35px;
  margin: -43px 0 60px;
  color: #505050;
  font-size: 15px;
  line-height: 1.8;
  background: #f0f3f6;
  opacity: 1; }

#toMedia .cssacc:checked + label + .accshow {
  background: #ffffff; }

.flowbox .accshow p {
  margin: 15px 10px; }

.cssacc:checked + label:after {
  content: '';
  background: url("../images/flow/ico_arrow02.png") right 50% no-repeat; }

.kiyaku .con_waku ul {
  padding: 10px 0; }
  .kiyaku .con_waku ul ul li {
    padding-left: 30px; }

#cInformation {
  max-width: 1000px;
  margin: 0 auto;
  padding: 70px 75px 30px;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  #cInformation .ttlFlow {
    color: #ffffff;
    font-size: 19px;
    text-align: center;
    padding: 15px 0;
    margin-bottom: 35px;
    background-color: #23b2a2;
    letter-spacing: 0.1em;
    line-height: 0.8;
    font-family: 'Open Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: bold; }
  #cInformation .ttlLine02 {
    max-width: 630px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #23b2a2;
    font-size: 19px;
    text-align: center;
    padding: 15px 0;
    margin: 0 auto 15px;
    letter-spacing: 0.1em;
    line-height: 0.8;
    font-family: 'Open Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: bold; }
    #cInformation .ttlLine02:before, #cInformation .ttlLine02:after {
      content: "";
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      height: 3px;
      background: #23b2a2;
      display: block; }
    #cInformation .ttlLine02:before {
      margin-right: .4em; }
    #cInformation .ttlLine02:after {
      margin-left: .4em; }
  #cInformation .txt {
    font-size: 16px;
    text-align: center;
    margin-bottom: 35px; }
    #cInformation .txt a {
      color: #23b2a2;
      text-decoration: underline; }
  #cInformation .box {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 30px; }
  #cInformation .noteArea {
    width: 100%;
    padding: 20px 30px;
    border: 2px #23b2a2 solid; }
    #cInformation .noteArea h4 {
      color: #23b2a2;
      font-size: 19px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px; }
    #cInformation .noteArea li {
      line-height: 1.8;
      padding-left: 1em;
      text-indent: -1em; }
      #cInformation .noteArea li:before {
        content: "●";
        color: #23b2a2;
        padding-right: 2px; }
      #cInformation .noteArea li.li02 {
        color: #23b2a2; }
        #cInformation .noteArea li.li02:before {
          content: "※"; }
      #cInformation .noteArea li.li03:before {
        content: "□"; }
  #cInformation .pdfArea {
    width: 267px; }
  #cInformation .icoArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px 0 30px; }
    #cInformation .icoArea .ico {
      text-align: center;
      margin: 0 15px; }
      #cInformation .icoArea .ico span {
        display: block;
        font-size: 16px;
        margin-top: 10px; }

@media screen and (max-width: 860px) {
  #container article.flowAreaArticle, #container article.pdfAreaArticle, #container article.cInformationArticle {
    width: 90%;
    margin: 0 auto 30px;
    padding: 0; }

  #flowTtl .txt {
    width: 90%;
    margin: 0 auto 20px;
    font-size: 12px;
    text-align: left; }

  #flowArea {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0; }

  #pdfArea {
    padding: 20px 0; }

  #terms {
    padding: 40px 0;
    background-color: #fff; }

  #toMedia {
    padding: 40px 0; }

  #cInformation {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0; }

  .ttlFlow {
    font-size: 14px;
    padding: 15px 0;
    margin-bottom: 15px; }

  #flowArea .ttlLine02 {
    font-size: 13px;
    margin-bottom: 10px; }
  #flowArea .box ul, #flowArea .box.bottom ul {
    display: block;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none; }
  #flowArea .box.top ul li, #flowArea .box.bottom ul li {
    width: auto;
    padding: 10px 15px;
    margin: 0 0 25px;
    position: relative; }
  #flowArea .box.top ul li:before {
    content: '';
    width: 16px;
    height: 15px;
    position: absolute;
    right: 50%;
    bottom: -23px;
    top: auto;
    background: url("../images/flow/ico_arrow03_sp.png") center bottom no-repeat; }
  #flowArea .box ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 140px; }
    #flowArea .box ul li .ico {
      max-width: 140px;
      width: 40%;
      text-align: center;
      padding-right: 15px; }
    #flowArea .box ul li .txt {
      width: 60%;
      text-align: left;
      padding-right: 0; }
    #flowArea .box ul li .ico img {
      width: 90%; }
    #flowArea .box ul li:nth-child(3):before {
      display: none; }
    #flowArea .box ul li .ico {
      text-align: center; }
  #flowArea .box.top ul li:nth-child(1) .ico, #flowArea .box.top ul li:nth-child(2) .ico, #flowArea .box.top ul li:nth-child(3) .ico {
    padding: 0 15px 0 0; }
  #flowArea .box.bottom ul li:nth-child(1) .ico, #flowArea .box.bottom ul li:nth-child(2) .ico {
    padding: 0 15px 0 0; }
  #flowArea .box.top ul li:nth-child(1) .ico img, #flowArea .box.top ul li:nth-child(2) .ico img {
    width: 90%; }
  #flowArea .box.top ul li:nth-child(3) .ico img {
    width: 70%; }
  #flowArea .box.bottom ul li:nth-child(1) .ico img, #flowArea .box.bottom ul li:nth-child(2) .ico img {
    width: 70%; }

  #pdfArea ul {
    display: block;
    width: 90%;
    margin: 0 auto; }
    #pdfArea ul li {
      width: 100%;
      padding: 0;
      margin-bottom: 30px;
      border-right: none;
      border-bottom: 1px #58c1db dotted; }
      #pdfArea ul li:last-child {
        border-bottom: none;
        margin-bottom: 0; }
      #pdfArea ul li .icoArea {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 15px 0 30px; }
      #pdfArea ul li .ico {
        text-align: center;
        margin: 0 15px; }
        #pdfArea ul li .ico span {
          display: block;
          font-size: 16px;
          margin-top: 10px; }

  .flowbox {
    max-width: 1000px;
    width: 90%;
    margin: 2em 5%;
    padding: 0; }
    .flowbox label {
      margin: 0 0 10px;
      padding: 14px 25px 14.5px 70px;
      margin-bottom: 10px;
      font-size: 12px; }

  #toMedia .flowbox label {
    background: #ffffff; }

  .flowbox label {
    font-size: 18px;
    background: #f0f3f6; }
    .flowbox label span {
      padding: 16px 23px;
      font-size: 18px; }
    .flowbox label:after {
      right: 15px;
      top: 30%; }

  .cssacc:checked + label + .accshow {
    padding: 10px 15px;
    margin: -3px 0 20px;
    font-size: 12px;
    line-height: 1.6;
    opacity: 1; }

  .kiyaku .con_waku ul {
    padding: 10px 0; }
    .kiyaku .con_waku ul ul li {
      padding-left: 10px; }
  .kiyaku .con_waku table {
    width: 100%; }

  #cInformation .ttlFlow {
    font-size: 14px;
    padding: 15px 0;
    margin-bottom: 15px; }
  #cInformation .ttlLine02 {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 0; }
  #cInformation .txt {
    font-size: 12px;
    margin-bottom: 15px; }
  #cInformation .box {
    display: block;
    margin-bottom: 15px; }
  #cInformation .noteArea {
    width: 100%;
    padding: 15px 10px;
    margin-bottom: 20px;
    border: 1px #23b2a2 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    #cInformation .noteArea h4 {
      font-size: 13px;
      margin-bottom: 5px; }
  #cInformation .pdfArea {
    width: 100%; }
  #cInformation .icoArea {
    padding: 15px 0 0; } }
/**  #eventDetail  **/
#eventDetailArea {
  max-width: 1000px;
  margin: 0 auto;
  padding: 70px 75px;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  #eventDetailArea .date {
    font-size: 16px;
    margin-bottom: 20px; }
  #eventDetailArea .eventDetailTtl {
    font-size: 19px;
    margin: 0 0 40px;
    letter-spacing: 0.1em;
    line-height: 1.4;
    font-family: 'Open Sans',"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight: bold; }
  #eventDetailArea .imgArea {
    text-align: center;
    margin-bottom: 30px; }
    #eventDetailArea .imgArea figure {
      margin-bottom: 20px; }
  #eventDetailArea .txtArea p {
    margin-bottom: 20px; }

@media screen and (max-width: 860px) {
  #container article.eventDetailArticle {
    width: 90%;
    margin: 0 auto 30px;
    padding: 0; }

  #eventDetailArea {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0; }
    #eventDetailArea .date {
      font-size: 12px;
      margin-bottom: 10px; }
    #eventDetailArea .eventDetailTtl {
      font-size: 14px;
      margin-bottom: 20px; }
    #eventDetailArea .imgArea {
      margin-bottom: 20px; }
      #eventDetailArea .imgArea figure img {
        width: 100%; } }
/**  .eventInfomation  **/
#container .eventInfomation {
  max-width: 1000px;
  margin: 0 auto 25px; }
  #container .eventInfomation h2.ttlWhite {
    font-size: 20px;
    margin-bottom: 110px; }

.eventInfomation .ttlPast {
  color: #505050;
  font-size: 20px;
  margin: 65px 0; }
.eventInfomation .eventInfomationList {
  border-top: 1px #afafaf solid; }
  .eventInfomation .eventInfomationList a {
    display: block; }
  .eventInfomation .eventInfomationList li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 40px 0;
    border-bottom: 1px #afafaf solid; }
    .eventInfomation .eventInfomationList li .imgArea {
      width: 245px;
      height: 245px;
      text-align: center; }
      .eventInfomation .eventInfomationList li .imgArea img {
        max-width: 245px;
        max-height: 245px;
        margin: 0 auto; }
    .eventInfomation .eventInfomationList li .txtArea {
      max-width: 675px;
      width: 100%;
      color: #505050;
      padding: 0 40px; }
      .eventInfomation .eventInfomationList li .txtArea .category {
        font-size: 17px;
        margin: 12px 0 10px; }
      .eventInfomation .eventInfomationList li .txtArea .ttl {
        font-size: 24px;
        margin-bottom: 20px; }
      .eventInfomation .eventInfomationList li .txtArea .box {
        padding: 20px;
        background-color: #f0f3f6; }

.blue .eventInfomation .eventInfomationList li .txtArea .box {
  padding: 15px 20px;
  background-color: #d6dee5; }

.eventInfomation .eventInfomationList li .txtArea .box p {
  font-size: 15px;
  line-height: 1.8; }
.eventInfomation .eventInfomationList02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -65px; }
  .eventInfomation .eventInfomationList02 li {
    max-width: 200px;
    margin-right: 65px;
    margin-bottom: 30px; }
    .eventInfomation .eventInfomationList02 li .imgArea {
      width: 200px;
      height: 200px;
      text-align: center;
      margin-bottom: 15px; }
      .eventInfomation .eventInfomationList02 li .imgArea img {
        max-width: 200px;
        max-height: 200px;
        margin: 0 auto; }
.eventInfomation .ttlCategory {
  font-size: 18px;
  margin: 0 20px 20px; }
.eventInfomation .ttlDetail {
  color: #505050;
  background-color: #eff2f6;
  font-size: 24px;
  padding: 10px 20px;
  margin-bottom: 55px;
  font-weight: bold; }
.eventInfomation .btnGreen, .eventInfomation .btnBgGreen:after {
  border: 3px solid #59bfda !important; }
.eventInfomation .btnGreen a {
  color: #59bfda !important; }

#container .eventInfomation .btnGreen.blank a:before {
  content: "";
  padding: 0 35px 0 0;
  background: url("../images/event_infomation/ico_blank.png") left 50% no-repeat; }

.eventInfomation .txtDetailArea h3, .eventInfomation .txtDetailArea .ttl {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px; }
.eventInfomation .txtDetailArea .subTtl {
  font-size: 18px;
  font-weight: bold; }
.eventInfomation .txtDetailArea .red {
  color: #ff0000; }
.eventInfomation .txtDetailArea p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 40px; }
.eventInfomation .txtDetailArea .scroll {
  overflow: auto;
  white-space: nowrap;
  margin-bottom: 60px; }
.eventInfomation .txtDetailArea table {
  max-width: 800px;
  margin: 0 auto 20px;
  border-top: 1px #afafaf solid; }
  .eventInfomation .txtDetailArea table th, .eventInfomation .txtDetailArea table td {
    font-size: 14px;
    border: 1px #afafaf solid;
    padding: 10px; }
  .eventInfomation .txtDetailArea table th {
    text-align: center; }
.eventInfomation .imgDetailArea {
  text-align: center;
  margin: 70px 0; }
  .eventInfomation .imgDetailArea li {
    margin-bottom: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .eventInfomation .imgDetailArea li img {
      max-width: 400px;
      max-height: 400px;
      width: auto;
      height: auto; }
    .eventInfomation .imgDetailArea li a {
      display: inline-block;
      position: relative; }
    .eventInfomation .imgDetailArea li .ico {
      position: absolute;
      bottom: 0;
      right: 0; }
.eventInfomation .dataArea {
  margin: 60px 0 80px; }
  .eventInfomation .dataArea table {
    max-width: 800px;
    margin: 0 auto 80px;
    border-top: 1px #afafaf solid; }
    .eventInfomation .dataArea table th, .eventInfomation .dataArea table td {
      font-size: 18px;
      border-bottom: 1px #afafaf solid; }
    .eventInfomation .dataArea table th {
      width: 20%;
      padding: 20px;
      background-color: #f0f3f6; }
    .eventInfomation .dataArea table td {
      width: 80%;
      padding: 20px 30px; }
  .eventInfomation .dataArea .ttl {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px; }
.eventInfomation .linkArea {
  margin: 100px auto 50px; }
  .eventInfomation .linkArea a {
    font-size: 18px;
    text-decoration: underline;
    margin-bottom: 10px; }
.eventInfomation #cboxContent {
  padding: 20px;
  background-color: inherit; }
.eventInfomation .dataArea02 {
  margin: 80px 0 0; }
  .eventInfomation .dataArea02 h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px; }
  .eventInfomation .dataArea02 p {
    font-size: 18px;
    margin-bottom: 10px; }
  .eventInfomation .dataArea02 .itemArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 40px -20px 20px 0; }
    .eventInfomation .dataArea02 .itemArea .item {
      width: 320px;
      margin: 0 20px 50px 0; }
      .eventInfomation .dataArea02 .itemArea .item figure {
        margin-bottom: 15px; }
      .eventInfomation .dataArea02 .itemArea .item p.txt01 {
        font-size: 14px;
        margin-bottom: 10px; }
  .eventInfomation .dataArea02 .tableArea {
    margin: 40px 0 50px; }
  .eventInfomation .dataArea02 table.table01 {
    width: 680px;
    margin: 0 auto 30px; }
    .eventInfomation .dataArea02 table.table01 th, .eventInfomation .dataArea02 table.table01 td {
      font-size: 18px;
      padding: 5px 20px;
      border: 1px #afafaf solid; }
    .eventInfomation .dataArea02 table.table01 th {
      background-color: #f0f3f6; }
  .eventInfomation .dataArea02 .txtArea dt {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px; }
  .eventInfomation .dataArea02 .txtArea dd {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 30px; }
  .eventInfomation .dataArea02 .box {
    padding: 50px 20px;
    background-color: #f0f3f6; }
    .eventInfomation .dataArea02 .box p {
      line-height: 1.8;
      margin-bottom: 35px; }

@media screen and (max-width: 860px) {
  #container .eventInfomation {
    width: 90%;
    margin: 0 auto; }
    #container .eventInfomation h2.ttlWhite {
      font-size: 12px;
      margin-bottom: 35px; }

  .eventInfomation .ttlPast {
    font-size: 12px;
    margin: 0 0 20px; }
  .eventInfomation .eventInfomationList li {
    display: block;
    padding: 15px 0; }
    .eventInfomation .eventInfomationList li .imgArea {
      max-width: 584px;
      max-height: 584px;
      width: auto;
      height: auto;
      margin: 0 auto; }
      .eventInfomation .eventInfomationList li .imgArea img {
        max-width: 292px;
        max-height: 292px;
        width: auto;
        height: auto; }
    .eventInfomation .eventInfomationList li .txtArea {
      padding: 0; }
      .eventInfomation .eventInfomationList li .txtArea .category {
        font-size: 12px;
        margin: 20px 0 10px; }
      .eventInfomation .eventInfomationList li .txtArea .ttl {
        font-size: 14px;
        margin-bottom: 15px; }
      .eventInfomation .eventInfomationList li .txtArea .box p {
        font-size: 12px; }
  .eventInfomation .eventInfomationList02 {
    display: block;
    margin-right: 0; }
    .eventInfomation .eventInfomationList02 li {
      max-width: inherit;
      margin-right: 0;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px #afafaf solid; }
      .eventInfomation .eventInfomationList02 li .imgArea {
        max-width: 584px;
        max-height: 584px;
        width: auto;
        height: auto;
        margin: 0 auto;
        margin-bottom: 15px; }
        .eventInfomation .eventInfomationList02 li .imgArea img {
          max-width: 292px;
          max-height: 292px;
          width: auto;
          height: auto; }
  .eventInfomation .ttlCategory {
    font-size: 12px;
    margin: 0 10px 10px; }
  .eventInfomation .ttlDetail {
    font-size: 12px;
    padding: 10px 10px;
    margin-bottom: 20px; }
  .eventInfomation .txtDetailArea h3, .eventInfomation .txtDetailArea .ttl {
    font-size: 12px;
    margin-bottom: 10px; }
  .eventInfomation .txtDetailArea .subTtl {
    font-size: 12px; }
  .eventInfomation .txtDetailArea p {
    font-size: 12px;
    margin-bottom: 20px; }
  .eventInfomation .txtDetailArea .scroll {
    margin-bottom: 20px; }
  .eventInfomation .txtDetailArea table th, .eventInfomation .txtDetailArea table td {
    font-size: 12px; }
  .eventInfomation .dataArea {
    margin: 30px 0; }
  .eventInfomation .imgDetailArea {
    margin: 30px 0; }
    .eventInfomation .imgDetailArea li {
      margin-bottom: 20px; }
      .eventInfomation .imgDetailArea li img {
        max-width: 292px;
        max-height: 292px;
        width: auto;
        height: auto; }
  .eventInfomation .dataArea table {
    margin: 0 auto 40px; }
    .eventInfomation .dataArea table th, .eventInfomation .dataArea table td {
      font-size: 12px; }
    .eventInfomation .dataArea table th {
      width: 32%;
      padding: 20px 0;
      text-align: center; }
    .eventInfomation .dataArea table td {
      width: 68%;
      padding: 20px 15px; }
  .eventInfomation .linkArea {
    margin: 40px auto 20px; }
    .eventInfomation .linkArea a {
      font-size: 12px;
      margin-bottom: 10px; }
  .eventInfomation .dataArea .ttl {
    font-size: 12px;
    margin-bottom: 10px; } }
@media screen and (max-width: 860px) {
  .txtDetailArea img {
    width: 100%; }

  .eventInfomation .dataArea02 {
    margin: 60px 0 0; }
    .eventInfomation .dataArea02 h3 {
      font-size: 14px;
      margin-bottom: 5px; }
    .eventInfomation .dataArea02 p {
      font-size: 12px;
      margin-bottom: 10px; }
    .eventInfomation .dataArea02 .itemArea {
      display: block;
      margin: 40px 0; }
      .eventInfomation .dataArea02 .itemArea .item {
        width: 100%;
        margin: 0 0 40px; }
        .eventInfomation .dataArea02 .itemArea .item figure {
          margin: 0 auto 15px; }
          .eventInfomation .dataArea02 .itemArea .item figure img {
            width: 100%; }
        .eventInfomation .dataArea02 .itemArea .item p.txt01 {
          font-size: 12px;
          margin-bottom: 10px; }
        .eventInfomation .dataArea02 .itemArea .item p.txt02 {
          font-size: 14px; }
    .eventInfomation .dataArea02 .tableArea {
      margin: 20px 0 40px; }
    .eventInfomation .dataArea02 table.table01 {
      width: 100%;
      margin: 0 auto 20px; }
      .eventInfomation .dataArea02 table.table01 th, .eventInfomation .dataArea02 table.table01 td {
        font-size: 12px;
        padding: 5px 10px; }
    .eventInfomation .dataArea02 .txtArea dt {
      font-size: 14px;
      margin-bottom: 5px; }
    .eventInfomation .dataArea02 .txtArea dd {
      font-size: 12px;
      line-height: 1.8;
      margin-bottom: 20px; }
    .eventInfomation .dataArea02 .box {
      padding: 20px 10px 10px; }
      .eventInfomation .dataArea02 .box p {
        line-height: 1.8;
        margin-bottom: 20px; } }
.del {
  color: #f00;
  text-decoration: line-through; }
  .del span {
    color: #000; }

/*# sourceMappingURL=style.css.map */
/*  アーティストバンク リニューアル
-------------------------------------------- */
#container #artistBankWrap .blue {
  background-color: #1cb9f4 !important; }
#container #artistBankWrap .breadcrumbArea ul li, #container #artistBankWrap .breadcrumbArea a {
  color: #fff; }
#container #artistBankWrap .ttlLine {
  color: #303030; }
  #container #artistBankWrap .ttlLine span:after {
    border-bottom: 3px solid #303030; }
#container #artistBankWrap .subPage02ttl.artistBank {
  color: #fff !important;
  margin-bottom: 40px; }
  #container #artistBankWrap .subPage02ttl.artistBank span {
    padding-left: 110px; }
    #container #artistBankWrap .subPage02ttl.artistBank span:before {
      content: "";
      width: 87px;
      height: 84px;
      position: absolute;
      left: 0;
      top: 0;
      background: url("../../img/cocokita/artistbank/ico_search.png") left center no-repeat;
      background-size: cover; }
#container #artistBankWrap #what.subPage02.artistBank .mainImgArea .txt h3 {
  color: #1cb9f4; }
#container #artistBankWrap #what.subPage02.artistBank .mainImgArea .txt p {
  color: #303030; }
#container #artistBankWrap #what.subPage02.artistBank .mainImgArea .txt:before {
  border-color: #1cb9f4; }
#container #artistBankWrap #artistBank03 {
  padding: 60px 0 0;
  background: linear-gradient(180deg, #1cb9f4 0%, #1cb9f4 86%, #f0f3f6 86%, #f0f3f6 100%); }
  #container #artistBankWrap #artistBank03 .ttlArea {
    margin: 60px auto;
    text-align: center; }
    #container #artistBankWrap #artistBank03 .ttlArea .ttl {
      margin-bottom: 40px; }
    #container #artistBankWrap #artistBank03 .ttlArea .txt {
      color: #fff;
      font-size: 17px; }
  #container #artistBankWrap #artistBank03 .btnArea {
    max-width: 840px;
    margin: 0 auto;
    justify-content: space-between; }
    #container #artistBankWrap #artistBank03 .btnArea .btn {
      width: 45%;
      margin: 0; }
  #container #artistBankWrap #artistBank03 .box {
    max-width: 1120px;
    margin: 0 auto;
    padding: 50px 60px;
    background-color: #fff; }
    #container #artistBankWrap #artistBank03 .box .ttl {
      font-size: 24px;
      text-align: center;
      margin-bottom: 25px; }
    #container #artistBankWrap #artistBank03 .box .btnArea {
      margin: 0 auto 60px; }
      #container #artistBankWrap #artistBank03 .box .btnArea .btn {
        width: 250px;
        margin: 0; }
    #container #artistBankWrap #artistBank03 .box table {
      width: 100%;
      border-top: 1px #afafaf solid; }
      #container #artistBankWrap #artistBank03 .box table th, #container #artistBankWrap #artistBank03 .box table td {
        vertical-align: top;
        box-sizing: border-box;
        border-bottom: 1px #afafaf solid; }
      #container #artistBankWrap #artistBank03 .box table th {
        width: 210px;
        font-size: 22px;
        font-weight: bold;
        padding: 35px 10px; }
      #container #artistBankWrap #artistBank03 .box table td {
        font-size: 17px;
        padding: 35px 20px; }
#container #artistBankWrap #artistBank04 {
  padding: 100px 0;
  background-color: #f0f3f6; }
  #container #artistBankWrap #artistBank04 .inner {
    max-width: 1000px;
    margin: 0 auto; }
  #container #artistBankWrap #artistBank04 .item {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 60px; }
    #container #artistBankWrap #artistBank04 .item:before {
      content: "";
      width: 46px;
      height: 20px;
      position: absolute;
      left: 50%;
      bottom: -40px;
      transform: translate(-50%, 0);
      background: url("../../img/cocokita/artistbank/ico_arrow.png") 0 0 no-repeat;
      background-size: cover; }
    #container #artistBankWrap #artistBank04 .item:last-child:before {
      background: none; }
    #container #artistBankWrap #artistBank04 .item .icoArea {
      width: 130px;
      padding-top: 10px; }
      #container #artistBankWrap #artistBank04 .item .icoArea figure {
        width: 100px;
        text-align: center; }
        #container #artistBankWrap #artistBank04 .item .icoArea figure figcaption {
          font-size: 14px;
          font-weight: bold;
          margin-top: 5px; }
    #container #artistBankWrap #artistBank04 .item .box {
      width: calc(100% - 130px);
      padding: 35px;
      background-color: #fff; }
      #container #artistBankWrap #artistBank04 .item .box .ttl {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 5px; }
      #container #artistBankWrap #artistBank04 .item .box .txt {
        font-size: 17px; }
        #container #artistBankWrap #artistBank04 .item .box .txt span {
          font-weight: bold; }
#container #artistBankWrap #artistBank05 {
  margin-top: -50px;
  padding-top: 150px;
  background: url("../../img/cocokita/artistbank/bg01.png") center top no-repeat; }
  #container #artistBankWrap #artistBank05 .ttlArea {
    text-align: center;
    margin-bottom: 120px; }
    #container #artistBankWrap #artistBank05 .ttlArea .ttl {
      margin-bottom: 40px; }
    #container #artistBankWrap #artistBank05 .ttlArea .txt {
      font-size: 17px; }
  #container #artistBankWrap #artistBank05 #artistList .btnArea {
    max-width: 840px;
    margin: 0 auto 40px; }
  #container #artistBankWrap #artistBank05 #artistList .box .leftSide p {
    color: #fff;
    font-size: 19px;
    background-color: #1cb9f4;
    flex-direction: column;
    line-height: 1.2; }
    #container #artistBankWrap #artistBank05 #artistList .box .leftSide p span {
      display: block;
      font-size: 14px; }
#container #artistBankWrap .btnArea {
  display: flex; }
#container #artistBankWrap .btn {
  position: relative;
  width: 38%;
  min-height: 63px;
  margin: 25px auto 0; }
  #container #artistBankWrap .btn p {
    position: absolute;
    top: 0;
    left: 0;
    width: 95%;
    min-height: 45px;
    border: 3px solid #58c1db;
    background-color: #ffffff;
    text-align: center;
    z-index: 2; }
    #container #artistBankWrap .btn p a {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      padding: 15px 0;
      width: 100%;
      font-size: 15px;
      font-weight: bold;
      color: #58c1db;
      line-height: 1;
      cursor: pointer;
      z-index: 3; }
      #container #artistBankWrap .btn p a:before {
        content: "";
        padding: 0 15px 0 0;
        background: url("../../img/cocokita/artistbank/ico_arrow_blue.png") left 50% no-repeat; }
  #container #artistBankWrap .btn:after {
    position: absolute;
    top: 11px;
    left: 11px;
    content: "";
    width: 95%;
    min-height: 45px;
    border: 3px solid #58c1db;
    background-color: #ffffff;
    z-index: 1; }
  #container #artistBankWrap .btn.white p {
    background-color: #1cb9f4;
    border: 3px solid #fff; }
    #container #artistBankWrap .btn.white p a {
      color: #fff;
      background-color: #1cb9f4; }
      #container #artistBankWrap .btn.white p a:before {
        content: "";
        padding: 0 15px 0 0;
        background: url("../../img/cocokita/artistbank/ico_arrow_white.png") left 50% no-repeat; }
  #container #artistBankWrap .btn.white:after {
    background-color: #1cb9f4;
    border: 3px solid #fff; }

@media screen and (max-width: 860px) {
  #container #artistBankWrap .ttlLine {
    font-size: 18px;
    margin-bottom: 45px; }
    #container #artistBankWrap .ttlLine span:after {
      width: 15px;
      border-bottom: 2px solid #303030; }
  #container #artistBankWrap .subPage02ttl.artistBank {
    margin-bottom: 25px; }
    #container #artistBankWrap .subPage02ttl.artistBank span {
      padding-left: 60px; }
      #container #artistBankWrap .subPage02ttl.artistBank span:before {
        width: 44px;
        height: 42px;
        top: 10px; }
  #container #artistBankWrap #what.subPage02.artistBank .mainImgArea {
    padding: 0 0 15px;
    background-color: #f0f3f6; }
    #container #artistBankWrap #what.subPage02.artistBank .mainImgArea .txt {
      margin-top: 25px; }
      #container #artistBankWrap #what.subPage02.artistBank .mainImgArea .txt .inner:before {
        border-color: #1cb9f4; }
  #container #artistBankWrap #artistBank03 {
    width: calc(100% - 10%);
    padding: 0 5%;
    margin-bottom: 0;
    background: linear-gradient(180deg, #1cb9f4 0%, #1cb9f4 86%, #f0f3f6 86%, #f0f3f6 100%); }
    #container #artistBankWrap #artistBank03 .ttlArea {
      margin: 0 auto 30px;
      text-align: center; }
      #container #artistBankWrap #artistBank03 .ttlArea .ttl {
        margin-bottom: 15px; }
        #container #artistBankWrap #artistBank03 .ttlArea .ttl img {
          width: 100%;
          margin: 0 auto; }
      #container #artistBankWrap #artistBank03 .ttlArea .txt {
        font-size: 13px; }
    #container #artistBankWrap #artistBank03 .btnArea {
      display: block;
      margin: 0 auto 30px; }
      #container #artistBankWrap #artistBank03 .btnArea .btn {
        width: 100%;
        margin: 0 0 15px; }
    #container #artistBankWrap #artistBank03 .box {
      padding: 25px 0 0; }
      #container #artistBankWrap #artistBank03 .box .ttl {
        font-size: 18px;
        margin-bottom: 25px; }
      #container #artistBankWrap #artistBank03 .box .btnArea {
        padding: 0 25px; }
        #container #artistBankWrap #artistBank03 .box .btnArea .btn {
          width: 100%;
          margin: 0 auto 15px; }
      #container #artistBankWrap #artistBank03 .box table th, #container #artistBankWrap #artistBank03 .box table td {
        display: block;
        width: 100%; }
      #container #artistBankWrap #artistBank03 .box table th {
        font-size: 14px;
        padding: 15px 15px 5px;
        border-bottom: none; }
      #container #artistBankWrap #artistBank03 .box table td {
        font-size: 13px;
        padding: 0 15px 15px; }
        #container #artistBankWrap #artistBank03 .box table td li {
          padding-left: 1em;
          text-indent: -1em; }
  #container #artistBankWrap #artistBank04 {
    padding: 30px 0 40px; }
    #container #artistBankWrap #artistBank04 .inner {
      width: 90%;
      margin: 0 auto; }
    #container #artistBankWrap #artistBank04 .item {
      margin-bottom: 40px; }
      #container #artistBankWrap #artistBank04 .item:before {
        width: 23px;
        height: 10px;
        bottom: -25px; }
      #container #artistBankWrap #artistBank04 .item:last-child {
        margin-bottom: 0; }
        #container #artistBankWrap #artistBank04 .item:last-child:before {
          background: none; }
      #container #artistBankWrap #artistBank04 .item .icoArea {
        width: 100px;
        padding-top: 0; }
        #container #artistBankWrap #artistBank04 .item .icoArea figure {
          width: 80px; }
          #container #artistBankWrap #artistBank04 .item .icoArea figure img {
            width: 100%; }
          #container #artistBankWrap #artistBank04 .item .icoArea figure figcaption {
            font-size: 13px;
            margin-top: 5px; }
      #container #artistBankWrap #artistBank04 .item .box {
        width: calc(100% - 100px);
        padding: 15px; }
        #container #artistBankWrap #artistBank04 .item .box .ttl {
          font-size: 14px;
          margin-bottom: 5px; }
        #container #artistBankWrap #artistBank04 .item .box .txt {
          font-size: 13px; }
  #container #artistBankWrap #artistBank05 {
    width: 90%;
    margin: -20px auto 0;
    padding-top: 75px;
    background: url("../../img/cocokita/artistbank/bg01_sp.png") center top no-repeat;
    background-size: 100%; }
    #container #artistBankWrap #artistBank05 .ttlArea {
      margin-bottom: 30px; }
      #container #artistBankWrap #artistBank05 .ttlArea .ttl {
        margin-bottom: 10px; }
        #container #artistBankWrap #artistBank05 .ttlArea .ttl img {
          max-width: 235px; }
      #container #artistBankWrap #artistBank05 .ttlArea .txt {
        font-size: 13px; }
    #container #artistBankWrap #artistBank05 #artistList .btnArea {
      width: 84%;
      display: block;
      margin: 0 auto 30px; }
      #container #artistBankWrap #artistBank05 #artistList .btnArea .btn {
        width: 100%;
        margin: 0 auto 15px; }
    #container #artistBankWrap #artistBank05 #artistList .box {
      width: 100%;
      margin: 0 auto; }
      #container #artistBankWrap #artistBank05 #artistList .box .leftSide p {
        width: 100%;
        height: 50px;
        font-size: 19px;
        flex-direction: row;
        line-height: 50px; }
        #container #artistBankWrap #artistBank05 #artistList .box .leftSide p span {
          margin-left: 8px; }
  #container #artistBankWrap .btnArea {
    display: flex; }
  #container #artistBankWrap .btn {
    position: relative;
    width: 38%;
    min-height: 63px;
    margin: 25px auto 0; }
    #container #artistBankWrap .btn p {
      position: absolute;
      top: 0;
      left: 0;
      width: 95%;
      min-height: 45px;
      border: 3px solid #58c1db;
      background-color: #ffffff;
      text-align: center;
      z-index: 2; }
      #container #artistBankWrap .btn p a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        padding: 15px 0;
        width: 100%;
        font-size: 15px;
        font-weight: bold;
        color: #58c1db;
        line-height: 1;
        cursor: pointer;
        z-index: 3; }
        #container #artistBankWrap .btn p a:before {
          content: "";
          padding: 0 15px 0 0;
          background: url("../../img/cocokita/artistbank/ico_arrow_blue.png") left 50% no-repeat; }
    #container #artistBankWrap .btn:after {
      position: absolute;
      top: 11px;
      left: 11px;
      content: "";
      width: 95%;
      min-height: 45px;
      border: 3px solid #58c1db;
      background-color: #ffffff;
      z-index: 1; }
    #container #artistBankWrap .btn.white p {
      background-color: #1cb9f4;
      border: 3px solid #fff; }
      #container #artistBankWrap .btn.white p a {
        color: #fff;
        background-color: #1cb9f4; }
        #container #artistBankWrap .btn.white p a:before {
          content: "";
          padding: 0 15px 0 0;
          background: url("../../img/cocokita/artistbank/ico_arrow_white.png") left 50% no-repeat; }
    #container #artistBankWrap .btn.white:after {
      background-color: #1cb9f4;
      border: 3px solid #fff; } }
/*----------------------------------
2021-08-03 アーティストバンク詳細ページ改修
----------------------------------*/
body #container .txt.artistBank .inner .clearfix .rightSide .music_list {
  margin: 40px auto 0;
  margin-right: 0;
  display: block;
  max-width: 300px;
  width: 100%;
  float: none;
  background-color: unset; }
  @media screen and (max-width: 860px) {
    body #container .txt.artistBank .inner .clearfix .rightSide .music_list {
      max-width: unset;
      width: 100%;
      margin-top: 20px; } }
  body #container .txt.artistBank .inner .clearfix .rightSide .music_list a {
    background-color: #a098cd;
    margin-bottom: 40px; }
    @media screen and (max-width: 860px) {
      body #container .txt.artistBank .inner .clearfix .rightSide .music_list a {
        margin-bottom: 20px; } }
    body #container .txt.artistBank .inner .clearfix .rightSide .music_list a:last-child {
      margin-bottom: 0; }

/*----------------------------------
2021-08-10 アーティストバンク改修
----------------------------------*/
@media screen and (max-width: 860px) {
  body #container #artistBankWrap .btn:after {
    border: 3px solid #1cb9f4; }
  body #container #artistBankWrap .btn p {
    border: 3px solid #1cb9f4; }
    body #container #artistBankWrap .btn p a {
      color: #1cb9f4; } }
@media screen and (max-width: 860px) {
  body #container #artistBankWrap article.blue.subPage02.artistBank {
    padding: 25px 0 30px; } }
body #container #artistBankWrap #artistBank03 .btnArea {
  flex-wrap: wrap; }
  body #container #artistBankWrap #artistBank03 .btnArea .btn {
    margin: 0 0 30px; }
    @media screen and (max-width: 860px) {
      body #container #artistBankWrap #artistBank03 .btnArea .btn {
        margin: 0 0 6.88vw;
        position: relative; }
        body #container #artistBankWrap #artistBank03 .btnArea .btn:before {
          content: '';
          position: absolute;
          background: url(../../img/cocokita/artistbank/arrow.png) no-repeat;
          left: 3.13vw;
          top: calc(50% - 7px);
          transform: translateY(-50%);
          z-index: 999;
          width: 2.66vw;
          height: 3.44vw;
          background-size: cover; }
        body #container #artistBankWrap #artistBank03 .btnArea .btn.white p a:before {
          content: "";
          padding: 0 15px 0 0;
          background: unset; } }
    body #container #artistBankWrap #artistBank03 .btnArea .btn span {
      color: #E74A74; }
body #container #artistBankWrap #artistBank03 .ttlArea {
  margin: 40px auto; }
  body #container #artistBankWrap #artistBank03 .ttlArea .txt {
    font-size: 15px;
    line-height: 1.846;
    font-weight: bold; }
  body #container #artistBankWrap #artistBank03 .ttlArea .box .ttl {
    font-size: 21.1125px;
    font-weight: bold; }
  body #container #artistBankWrap #artistBank03 .ttlArea#a01 .attention {
    max-width: 400px;
    width: 100%;
    margin: 0 auto 20px;
    height: 40px;
    background: #009ed9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff; }
    @media screen and (max-width: 860px) {
      body #container #artistBankWrap #artistBank03 .ttlArea#a01 .attention {
        max-width: 62.50vw; } }
body #container #artistBankWrap #artistBank04 {
  padding: 100px 0 10px; }
  @media screen and (max-width: 860px) {
    body #container #artistBankWrap #artistBank04 {
      margin: 0;
      padding: 9.38vw 0 0; }
      body #container #artistBankWrap #artistBank04 .boxArea {
        padding-bottom: 9.38vw; } }
body #container #artistBankWrap #artistBank05 {
  margin-top: -120px;
  padding-top: 275px; }
  @media screen and (max-width: 860px) {
    body #container #artistBankWrap #artistBank05 {
      margin-top: -10vw;
      padding-top: 20vw; }
      body #container #artistBankWrap #artistBank05 .ttlArea .txt {
        font-size: 15px;
        letter-spacing: -0.2px; }
      body #container #artistBankWrap #artistBank05 .ttlArea .ttl img {
        max-width: 73.44vw; } }
body #container #artistBankWrap #how_to {
  background: #f0f3f6;
  padding: 0 0 100px; }
  @media screen and (max-width: 860px) {
    body #container #artistBankWrap #how_to {
      padding: 0 0 16.41vw; } }
  body #container #artistBankWrap #how_to .inner {
    max-width: 1000px;
    margin: 0 auto;
    border-top: #CACAC9 solid 1px;
    padding-top: 60px; }
    @media screen and (max-width: 860px) {
      body #container #artistBankWrap #how_to .inner {
        padding-top: 9.38vw; } }
    body #container #artistBankWrap #how_to .inner p {
      text-align: center;
      font-size: 17px;
      line-height: 1.647; }
      @media screen and (max-width: 860px) {
        body #container #artistBankWrap #how_to .inner p {
          font-size: 15px; } }
    body #container #artistBankWrap #how_to .inner .flex {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      margin: 40px 0 20px; }
      @media screen and (max-width: 860px) {
        body #container #artistBankWrap #how_to .inner .flex {
          margin: 5.81vw ​0 20px;
          padding: 0 4.69vw 7.81vw;
          box-sizing: border-box; } }
      body #container #artistBankWrap #how_to .inner .flex a.mail {
        color: #2263C1; }
      @media screen and (max-width: 768px) {
        body #container #artistBankWrap #how_to .inner .flex .small {
          font-size: 13px;
          display: block;
          line-height: 1; } }
      body #container #artistBankWrap #how_to .inner .flex .num {
        position: relative;
        background: #1cb9f4;
        border-radius: 10px;
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; }
        @media screen and (max-width: 860px) {
          body #container #artistBankWrap #how_to .inner .flex .num {
            width: 15.63vw;
            height: 15.63vw; } }
        body #container #artistBankWrap #how_to .inner .flex .num:before {
          position: absolute;
          content: '';
          background: #1cb9f4;
          width: 3px;
          height: 150px;
          bottom: -130px;
          left: 50%;
          transform: translateX(-50%); }
          @media screen and (max-width: 860px) {
            body #container #artistBankWrap #how_to .inner .flex .num:before {
              height: 30vw;
              bottom: -27vw; } }
        body #container #artistBankWrap #how_to .inner .flex .num.num_10:before {
          height: 360px;
          top: 0; }
          @media screen and (max-width: 860px) {
            body #container #artistBankWrap #how_to .inner .flex .num.num_10:before {
              height: 140vw;
              bottom: unset;
              top: 0; } }
        body #container #artistBankWrap #how_to .inner .flex .num.num_50 + .txt {
          margin-bottom: 0; }
        body #container #artistBankWrap #how_to .inner .flex .num.num_50:before {
          background: unset;
          position: unset;
          width: 0;
          height: 0; }
        body #container #artistBankWrap #how_to .inner .flex .num span {
          color: #fff;
          line-height: 1;
          display: block; }
          body #container #artistBankWrap #how_to .inner .flex .num span.step {
            font-size: 14px; }
            @media screen and (max-width: 860px) {
              body #container #artistBankWrap #how_to .inner .flex .num span.step {
                font-size: 3.75vw; } }
          body #container #artistBankWrap #how_to .inner .flex .num span.number {
            font-size: 26px; }
            @media screen and (max-width: 860px) {
              body #container #artistBankWrap #how_to .inner .flex .num span.number {
                font-size: 7.50vw; } }
      body #container #artistBankWrap #how_to .inner .flex .txt {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 785px;
        min-height: 40px;
        margin-bottom: 40px;
        padding: 25px 40px;
        background: #fff; }
        @media screen and (max-width: 860px) {
          body #container #artistBankWrap #how_to .inner .flex .txt {
            padding: 3.59vw 6.09vw 3.13vw 4.84vw;
            max-width: 60.21vw; } }
        body #container #artistBankWrap #how_to .inner .flex .txt p {
          color: #303030;
          font-size: 17px;
          text-align: left; }
          @media screen and (max-width: 860px) {
            body #container #artistBankWrap #how_to .inner .flex .txt p {
              font-size: 15px;
              line-height: 1.846;
              word-break: break-all; } }
    body #container #artistBankWrap #how_to .inner .caution_box {
      background: #e7eaed;
      padding: 60px 51px;
      padding-right: 54px; }
      @media screen and (max-width: 860px) {
        body #container #artistBankWrap #how_to .inner .caution_box {
          padding: 5.31vw 4.84vw;
          padding-right: 4.84vw;
          margin: 0 4.69vw; } }
      body #container #artistBankWrap #how_to .inner .caution_box p {
        text-align: left; }
        body #container #artistBankWrap #how_to .inner .caution_box p span {
          font-size: 22px; }
          @media screen and (max-width: 860px) {
            body #container #artistBankWrap #how_to .inner .caution_box p span {
              line-height: 1.846;
              font-size: 15px; } }
          body #container #artistBankWrap #how_to .inner .caution_box p span span {
            font-weight: bold; }
      body #container #artistBankWrap #how_to .inner .caution_box ul li {
        line-height: 1.647;
        font-size: 17px; }
        @media screen and (max-width: 860px) {
          body #container #artistBankWrap #how_to .inner .caution_box ul li {
            font-size: 15px;
            line-height: 1.846; } }

/*----------------------------------
2021-08-17 トップ バナー改修
----------------------------------*/
body #container .clearfix.linkArea .rightSide .btnBlue.bank {
  flex-wrap: wrap;
  min-height: 145px;
  padding-top: 15px; }
  @media screen and (max-width: 860px) {
    body #container .clearfix.linkArea .rightSide .btnBlue.bank {
      min-height: 80px;
      padding-top: 0; } }
  body #container .clearfix.linkArea .rightSide .btnBlue.bank p {
    padding: 0px 50px 40px 0; }
    @media screen and (max-width: 860px) {
      body #container .clearfix.linkArea .rightSide .btnBlue.bank p {
        padding: 5px 40px 20px 0; } }
    body #container .clearfix.linkArea .rightSide .btnBlue.bank p.new_icon {
      width: 100%;
      padding: 0;
      text-align: center; }
      @media screen and (max-width: 860px) {
        body #container .clearfix.linkArea .rightSide .btnBlue.bank p.new_icon {
          margin-top: 10px; } }
      body #container .clearfix.linkArea .rightSide .btnBlue.bank p.new_icon:before {
        display: none; }
      body #container .clearfix.linkArea .rightSide .btnBlue.bank p.new_icon span {
        padding: 0;
        display: block;
        background: #1cb9f4;
        width: 110px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffff08;
        margin: 0 auto;
        letter-spacing: 0.11em;
        font-size: 18px;
        font-weight: normal;
        font-family: Gill Sans,sans-serif; }
        @media screen and (max-width: 860px) {
          body #container .clearfix.linkArea .rightSide .btnBlue.bank p.new_icon span {
            width: 64.45px;
            height: 11.73px;
            font-size: 10px;
            line-height: 1; } }

/*----------------------------------
2021-08-10 SHOW CASE LIVE2021
----------------------------------*/
@media screen and (min-width: 861px) {
  body .sp {
    display: none !important; } }
@media screen and (max-width: 860px) {
  body .sp {
    display: block !important; } }
@media screen and (max-width: 860px) {
  body .pc {
    display: none !important; } }
@media screen and (min-width: 861px) {
  body .pc {
    display: block !important; } }
body article.show-case-live.live2021 .inner {
  max-width: 1000px;
  margin: 0 auto; }
  body article.show-case-live.live2021 .inner h2.ttlLine {
    position: relative; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 .inner h2.ttlLine {
        font-size: 21px; } }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 .inner h2.ttlLine span {
        padding-bottom: 10px; } }
    body article.show-case-live.live2021 .inner h2.ttlLine span:after {
      transform: translateX(-50%);
      width: 40px;
      margin-left: 0;
      height: 3px;
      background: #505050; }
      @media screen and (max-width: 860px) {
        body article.show-case-live.live2021 .inner h2.ttlLine span:after {
          height: 2px;
          width: 25px; } }
  @media screen and (min-width: 861px) {
    body article.show-case-live.live2021 .inner a {
      transition: .3s; } }
  body article.show-case-live.live2021 .inner a.button {
    position: relative;
    max-width: 364px;
    width: 100%;
    display: block;
    margin: 0 auto;
    min-height: 63px; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 .inner a.button {
        max-width: 71.25vw;
        min-height: 12.34vw; } }
    body article.show-case-live.live2021 .inner a.button span:not(.txt) {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid #000;
      height: 46px;
      width: 100%;
      max-width: 364px;
      background: #fff; }
      @media screen and (max-width: 860px) {
        body article.show-case-live.live2021 .inner a.button span:not(.txt) {
          height: 10.16vw;
          border: 2px solid #000; } }
      body article.show-case-live.live2021 .inner a.button span:not(.txt).button_txt {
        position: absolute;
        z-index: 15;
        font-size: 16px;
        font-weight: bold;
        color: #505050; }
        @media screen and (max-width: 860px) {
          body article.show-case-live.live2021 .inner a.button span:not(.txt).button_txt {
            font-size: 14px; } }
        body article.show-case-live.live2021 .inner a.button span:not(.txt).button_txt:before {
          position: absolute;
          right: 30px;
          top: 50%;
          transform: translateY(-50%);
          content: '';
          width: 9px;
          height: 11px;
          background-size: cover;
          background: url(../../img/cocokita/ico_arrow_gray01.png) no-repeat; }
      body article.show-case-live.live2021 .inner a.button span:not(.txt).button_bg {
        position: absolute;
        z-index: 10;
        content: '';
        left: 11px;
        top: 11px;
        width: 100%; }
    body article.show-case-live.live2021 .inner a.button.bottom span.button_txt:before {
      background: unset;
      position: unset; }
    body article.show-case-live.live2021 .inner a.button.bottom span.button_txt .txt {
      position: relative; }
      body article.show-case-live.live2021 .inner a.button.bottom span.button_txt .txt:before {
        left: -1rem;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        content: '';
        background-size: cover;
        background: url(../../img/cocokita/ico_arrow_gray01.png) no-repeat;
        position: absolute;
        width: 9px;
        height: 11px; }
    body article.show-case-live.live2021 .inner a.button.bottom.pink .button_bg {
      border: 3px solid #e74a74; }
    body article.show-case-live.live2021 .inner a.button.bottom.green .button_bg {
      border: 3px solid #00759f; }
  body article.show-case-live.live2021 .inner small {
    text-align: center;
    display: block;
    font-size: 16px;
    -webkit-font-smoothing: antialiased; }
    body article.show-case-live.live2021 .inner small .pc {
      display: contents !important; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 .inner small {
        font-size: 14px; }
        body article.show-case-live.live2021 .inner small .pc {
          display: none !important; } }
body article.show-case-live.live2021 section.gray {
  background: #f0f3f6;
  padding: 60px 0; }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.gray {
      padding: 10.94vw 0; } }
body article.show-case-live.live2021 section.sec10 {
  padding-bottom: 100px; }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.sec10 {
      padding-bottom: 10vw; } }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.sec10 h2 {
      margin: 0 15px 15px;
      box-sizing: border-box; } }
  body article.show-case-live.live2021 section.sec10 h2 span {
    display: block;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 28px;
    padding-left: 17px;
    color: #505050; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec10 h2 span {
        margin-bottom: 10px;
        padding-left: 0;
        font-size: 15px; } }
    body article.show-case-live.live2021 section.sec10 h2 span.ribbon {
      display: flex;
      width: 100%;
      height: 60px;
      align-items: center;
      background: #eff2f6;
      font-size: 24px;
      font-weight: bold; }
      @media screen and (max-width: 860px) {
        body article.show-case-live.live2021 section.sec10 h2 span.ribbon {
          font-size: 20px;
          height: 12.5vw;
          padding-left: 10px;
          box-sizing: border-box; } }
  body article.show-case-live.live2021 section.sec10 .mv_img {
    width: 100%;
    margin-bottom: 60px; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec10 .mv_img {
        margin-bottom: 7.34vw; } }
  body article.show-case-live.live2021 section.sec10 p {
    font-size: 20px;
    line-height: 1.846;
    text-align: center; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec10 p {
        font-size: 15px; } }
body article.show-case-live.live2021 section.sec20 .imgArea {
  display: flex;
  justify-content: space-between;
  max-width: 550px;
  margin: 0 auto 30px; }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.sec20 .imgArea {
      padding: 0 7.03vw;
      box-sizing: border-box; }
      body article.show-case-live.live2021 section.sec20 .imgArea img {
        width: 40.63vw;
        height: 57.34vw;
        object-fit: cover; } }
body article.show-case-live.live2021 section.sec30 .btnArea {
  display: flex;
  max-width: 820px;
  margin: 70px auto 80px; }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.sec30 .btnArea {
      margin: 10.94vw auto calc(12.50vw + 11px);
      flex-direction: column; }
      body article.show-case-live.live2021 section.sec30 .btnArea a:first-child {
        margin: 0 auto 6.88vw; } }
@media screen and (max-width: 860px) {
  body article.show-case-live.live2021 section.sec30 .ttlLine {
    margin-bottom: 10.25vw; } }
body article.show-case-live.live2021 section.sec30 .ttlLine span:after {
  background: #e74a74; }
body article.show-case-live.live2021 section.sec30 .ttlLine + small {
  font-size: 15px; }
  @media screen and (max-width: 768px) {
    body article.show-case-live.live2021 section.sec30 .ttlLine + small {
      font-size: 14px; } }
body article.show-case-live.live2021 section.sec30 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 40px; }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.sec30 ul {
      margin: 6.25vw auto;
      max-width: 90.63vw;
      width: 100%; } }
  body article.show-case-live.live2021 section.sec30 ul li {
    max-width: 320px;
    margin-bottom: 35px; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec30 ul li {
        max-width: 42.97vw;
        margin-bottom: 4.69vw; } }
    body article.show-case-live.live2021 section.sec30 ul li a {
      display: block;
      width: 100%; }
      body article.show-case-live.live2021 section.sec30 ul li a img {
        margin-bottom: 15px; }
        @media screen and (max-width: 860px) {
          body article.show-case-live.live2021 section.sec30 ul li a img {
            margin-bottom: 10px;
            width: 100%; } }
      body article.show-case-live.live2021 section.sec30 ul li a .artist_name {
        color: #505050;
        font-size: 18px;
        text-align: center;
        line-height: 1.777;
        font-weight: bold;
        -webkit-font-smoothing: antialiased; }
        @media screen and (max-width: 860px) {
          body article.show-case-live.live2021 section.sec30 ul li a .artist_name {
            font-size: 14px;
            line-height: 1.5; }
            body article.show-case-live.live2021 section.sec30 ul li a .artist_name.small {
              font-size: 13px; } }
@media screen and (max-width: 860px) {
  body article.show-case-live.live2021 section.sec40 {
    padding: 10.94vw 0 3.72vw; } }
@media screen and (max-width: 860px) {
  body article.show-case-live.live2021 section.sec40 .inner {
    padding: 0 15px; } }
@media screen and (max-width: 860px) {
  body article.show-case-live.live2021 section.sec40 .inner .ttlLine {
    margin-bottom: 11.09vw; } }
body article.show-case-live.live2021 section.sec40 .inner .ttlLine span:after {
  background: #00759f; }
body article.show-case-live.live2021 section.sec40 .inner img {
  margin: 0 auto 42px;
  display: block; }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.sec40 .inner img {
      margin: 0 auto 6.09vw;
      max-width: 75.16vw; } }
body article.show-case-live.live2021 section.sec40 .inner p {
  font-size: 20px;
  line-height: 1.9;
  color: #505050;
  text-align: center; }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.sec40 .inner p {
      font-size: 15px;
      line-height: 1.846;
      text-align: left; } }
body article.show-case-live.live2021 section.sec40 .inner .caution {
  text-align: center;
  font-size: 16px;
  line-height: 1.625; }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.sec40 .inner .caution {
      font-size: 14px;
      text-align: left;
      line-height: 2;
      color: #505050; } }
body article.show-case-live.live2021 section.sec40 .inner .program_Area {
  margin: 33px auto 40px;
  max-width: 740px;
  width: 100%; }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.sec40 .inner .program_Area {
      margin: 5.47vw auto;
      font-size: 21px; }
      body article.show-case-live.live2021 section.sec40 .inner .program_Area + small {
        text-align: left; } }
  body article.show-case-live.live2021 section.sec40 .inner .program_Area > * {
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    color: #505050;
    text-align: center; }
  body article.show-case-live.live2021 section.sec40 .inner .program_Area h3 {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 15px; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec40 .inner .program_Area h3 {
        margin-bottom: 10px; } }
  body article.show-case-live.live2021 section.sec40 .inner .program_Area p {
    font-size: 20px; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec40 .inner .program_Area p {
        font-size: 15px; } }
  body article.show-case-live.live2021 section.sec40 .inner .program_Area + .button {
    margin: 0 auto 40px !important; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec40 .inner .program_Area + .button {
        margin: 0 auto 30px !important; } }
body article.show-case-live.live2021 section.sec40 .inner .white_box {
  background: #fff;
  width: 100%;
  position: relative;
  padding: 75px 0 75px;
  margin: 50px auto 80px; }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.sec40 .inner .white_box {
      padding: 11.72vw 15px 8.59vw;
      margin: 11.72vw auto 12.50vw;
      box-sizing: border-box; } }
  body article.show-case-live.live2021 section.sec40 .inner .white_box:before, body article.show-case-live.live2021 section.sec40 .inner .white_box:after {
    content: '';
    max-width: 980px;
    width: 100%;
    height: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: url("/system/wp-content/uploads/show-case-live/2021/line_10.png") no-repeat;
    background-size: cover;
    position: absolute; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec40 .inner .white_box:before, body article.show-case-live.live2021 section.sec40 .inner .white_box:after {
        width: 89.53vw;
        height: 0.78vw; } }
  body article.show-case-live.live2021 section.sec40 .inner .white_box:before {
    top: 10px; }
  body article.show-case-live.live2021 section.sec40 .inner .white_box:after {
    bottom: 10px; }
  body article.show-case-live.live2021 section.sec40 .inner .white_box h3 {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    color: #505050;
    line-height: 1;
    margin-bottom: 30px; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec40 .inner .white_box h3 {
        font-size: 21px;
        margin-bottom: 4.69vw; } }
  body article.show-case-live.live2021 section.sec40 .inner .white_box p {
    font-size: 17px;
    line-height: 1.647; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec40 .inner .white_box p {
        font-size: 15px;
        line-height: 1.846;
        text-align: center; } }
  body article.show-case-live.live2021 section.sec40 .inner .white_box .flex {
    display: flex;
    justify-content: space-between;
    max-width: 940px;
    margin: 30px auto;
    width: 100%; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec40 .inner .white_box .flex {
        margin: 5.47vw auto 4.69vw;
        flex-direction: column; } }
    body article.show-case-live.live2021 section.sec40 .inner .white_box .flex .letter_sample {
      border: solid 3px #f0f3f6;
      max-width: 389px;
      min-height: 272px;
      width: 100%;
      padding: 30px 33px; }
      @media screen and (max-width: 860px) {
        body article.show-case-live.live2021 section.sec40 .inner .white_box .flex .letter_sample {
          min-height: unset;
          box-sizing: border-box;
          margin-bottom: 4.69vw;
          padding: 5.47vw 4.69vw; }
          body article.show-case-live.live2021 section.sec40 .inner .white_box .flex .letter_sample:last-child {
            margin-bottom: 0; } }
      body article.show-case-live.live2021 section.sec40 .inner .white_box .flex .letter_sample b {
        font-size: 17px;
        margin-bottom: 15px;
        display: block; }
        @media screen and (max-width: 860px) {
          body article.show-case-live.live2021 section.sec40 .inner .white_box .flex .letter_sample b {
            font-size: 18px;
            margin-bottom: 10px; } }
      body article.show-case-live.live2021 section.sec40 .inner .white_box .flex .letter_sample ul li {
        font-size: 17px;
        line-height: 1.647; }
        @media screen and (max-width: 860px) {
          body article.show-case-live.live2021 section.sec40 .inner .white_box .flex .letter_sample ul li {
            font-size: 15px;
            line-height: 1.846; } }
      body article.show-case-live.live2021 section.sec40 .inner .white_box .flex .letter_sample small {
        text-align: left;
        font-size: 14px;
        line-height: 1.571; }
        @media screen and (max-width: 860px) {
          body article.show-case-live.live2021 section.sec40 .inner .white_box .flex .letter_sample small {
            font-size: 15px;
            line-height: 1.846; } }
  body article.show-case-live.live2021 section.sec40 .inner .white_box .zips {
    background: #e2edf8 url("/system/wp-content/uploads/show-case-live/2021/ziparea_bg.png") center no-repeat;
    background-size: auto;
    max-width: 940px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
    -webkit-font-smoothing: antialiased; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec40 .inner .white_box .zips {
        padding: 4.69vw 15px 5.16vw;
        box-sizing: border-box;
        background: #e2edf8; } }
    body article.show-case-live.live2021 section.sec40 .inner .white_box .zips span {
      font-size: 20px;
      font-weight: bold;
      line-height: 1.9; }
      @media screen and (max-width: 860px) {
        body article.show-case-live.live2021 section.sec40 .inner .white_box .zips span:not(.bg_white) {
          text-align: left;
          display: block;
          font-size: 15px;
          line-height: 1.846; } }
      body article.show-case-live.live2021 section.sec40 .inner .white_box .zips span.bg_white {
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        letter-spacing: 0.09em;
        width: 217px;
        height: 24px;
        margin: 0 auto 15px;
        line-height: 1; }
        @media screen and (max-width: 860px) {
          body article.show-case-live.live2021 section.sec40 .inner .white_box .zips span.bg_white {
            width: 100%;
            height: 6.25vw; } }
        body article.show-case-live.live2021 section.sec40 .inner .white_box .zips span.bg_white + span:not(.bg_white) + .bg_white {
          margin-top: 40px; }
          @media screen and (max-width: 860px) {
            body article.show-case-live.live2021 section.sec40 .inner .white_box .zips span.bg_white + span:not(.bg_white) + .bg_white {
              margin-top: 5.31vw; } }
      body article.show-case-live.live2021 section.sec40 .inner .white_box .zips span.blue {
        color: #00759f;
        line-height: 1; }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.sec40 .inner .white_box + .ttlLine {
      line-height: 1.333; } }
  body article.show-case-live.live2021 section.sec40 .inner .white_box + .ttlLine span:after {
    background: #505050; }
body article.show-case-live.live2021 section.sec40 .inner .infection_control {
  max-width: 630px;
  width: 100%;
  margin: 0 auto; }
  body article.show-case-live.live2021 section.sec40 .inner .infection_control > * {
    font-size: 17px;
    color: #303030;
    line-height: 1.647;
    -webkit-font-smoothing: antialiased; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec40 .inner .infection_control > * {
        font-size: 15px;
        line-height: 1.846; } }
  body article.show-case-live.live2021 section.sec40 .inner .infection_control ul {
    margin-bottom: 30px; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec40 .inner .infection_control ul {
        margin-bottom: 8vw; } }
body article.show-case-live.live2021 section.sec50 {
  background: #e74a74;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  @media screen and (max-width: 860px) {
    body article.show-case-live.live2021 section.sec50 {
      height: 47.97vw; } }
  body article.show-case-live.live2021 section.sec50 h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 25px; }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec50 h2 {
        font-size: 21px;
        margin-bottom: 5.47vw; } }
  body article.show-case-live.live2021 section.sec50 a {
    color: #fff; }
  body article.show-case-live.live2021 section.sec50 p {
    font-size: 17px; }
    @media screen and (min-width: 861px) {
      body article.show-case-live.live2021 section.sec50 p .pc {
        display: contents !important; } }
    @media screen and (max-width: 860px) {
      body article.show-case-live.live2021 section.sec50 p {
        font-size: 15px;
        line-height: 1.846; } }

/*----------------------------------
2021-11-05 フッター改修
----------------------------------*/
body footer .inner {
  padding: 0 0 20px;
  border-bottom: 1px solid #dcdee1;
  margin-bottom: 20px; }
  @media screen and (max-width: 860px) {
    body footer .inner {
      padding: 20px 0; } }
  body footer .inner .bannerArea {
    max-width: 500px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    body footer .inner .bannerArea.clearfix:before, body footer .inner .bannerArea.clearfix:after {
      display: none; }
    body footer .inner .bannerArea li {
      margin: 0; }
      body footer .inner .bannerArea li.fuli_size {
        margin: 20px 0 0;
        width: 100%; }
        @media screen and (max-width: 768px) {
          body footer .inner .bannerArea li.fuli_size {
            margin: 10px 0 0; } }
        body footer .inner .bannerArea li.fuli_size a {
          display: block;
          width: 100%; }
          body footer .inner .bannerArea li.fuli_size a img {
            width: 100%;
            max-width: 100%; }
      body footer .inner .bannerArea li.clearfix:after {
        display: none; }
body footer .big_bnr_Area {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 0 55px; }
  @media screen and (max-width: 768px) {
    body footer .big_bnr_Area {
      padding: 0 20px 30px; } }
  body footer .big_bnr_Area .big_bnr {
    max-width: 456px;
    width: 100%;
    margin: 0 auto;
    margin-left: 0; }
    body footer .big_bnr_Area .big_bnr li {
      border: 1px solid #dcdee1;
      max-width: 47%;
      padding: 9px 0; }
      @media screen and (max-width: 768px) {
        body footer .big_bnr_Area .big_bnr li {
          max-width: 48%;
          padding: 6.5px 0; } }
      body footer .big_bnr_Area .big_bnr li a {
        display: block; }
        body footer .big_bnr_Area .big_bnr li a img {
          width: 100%; }

/*----------------------------------
2022-07-19 レジデンスアーティスト調整
----------------------------------*/
body #wrap #container article #residenceArtist01 .box .clearfix ul {
  flex-wrap: wrap; }
  body #wrap #container article #residenceArtist01 .box .clearfix ul li {
    flex-direction: column;
    position: relative;
    margin-bottom: 60px; }
    body #wrap #container article #residenceArtist01 .box .clearfix ul li:after {
      position: absolute;
      content: '';
      width: 21px;
      height: 7px;
      background: url(../../img/cocokita/residenceartist/ico_arrow.png) no-repeat;
      background-size: contain;
      bottom: 25px;
      right: 30px; }
    body #wrap #container article #residenceArtist01 .box .clearfix ul li .leftSide {
      float: unset;
      width: 400px;
      margin: 0 0 20px; }
      body #wrap #container article #residenceArtist01 .box .clearfix ul li .leftSide img {
        width: 100%;
        object-fit: contain;
        height: 190px; }
    body #wrap #container article #residenceArtist01 .box .clearfix ul li .rightSide .name {
      font-size: 18px;
      line-height: normal;
      margin-bottom: 0;
      min-height: 55px;
      display: flex;
      align-items: center; }
  @media screen and (max-width: 767px) {
    body #wrap #container article #residenceArtist01 .box .clearfix ul {
      width: 100%;
      margin: 0;
      padding: 0 10px 0 23px;
      box-sizing: border-box; }
      body #wrap #container article #residenceArtist01 .box .clearfix ul li {
        width: 100%;
        padding: 10px 10px 20px;
        margin-bottom: 30px; }
        body #wrap #container article #residenceArtist01 .box .clearfix ul li .leftSide {
          width: 100%;
          margin: 0 0 5px; }
          body #wrap #container article #residenceArtist01 .box .clearfix ul li .leftSide img {
            width: calc(100% - 20px);
            height: 38.93vw; }
        body #wrap #container article #residenceArtist01 .box .clearfix ul li:before {
          top: -10px;
          left: -10px;
          width: 96.5%;
          height: 98%;
          border: 3px solid #eb5d95; }
        body #wrap #container article #residenceArtist01 .box .clearfix ul li .rightSide .name {
          font-size: 16px;
          min-height: auto;
          padding-right: 15px; } }
body #wrap #container article #eventInfo .clearfix.linkArea a .btnAreaPink .new_icon span {
  font-size: 15px;
  line-height: 1;
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif;
  font-weight: bold; }
  @media screen and (max-width: 767px) {
    body #wrap #container article #eventInfo .clearfix.linkArea a .btnAreaPink .new_icon span {
      height: 11px;
      font-size: 10px;
      padding: 2px 0; } }
body #wrap #container article.blue.last #detaBoxArea .residenceArtist .inner .clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  body #wrap #container article.blue.last #detaBoxArea .residenceArtist .inner .clearfix .leftSide {
    width: 300px;
    margin-right: 30px; }
    body #wrap #container article.blue.last #detaBoxArea .residenceArtist .inner .clearfix .leftSide img {
      height: 250px;
      object-fit: contain; }
@media screen and (max-width: 767px) {
  body #wrap #container article.blue.last #detaBoxArea .residenceArtist .inner h3 {
    font-size: 16px;
    margin-bottom: 15px; }
  body #wrap #container article.blue.last #detaBoxArea .residenceArtist .inner .clearfix {
    flex-direction: column; }
    body #wrap #container article.blue.last #detaBoxArea .residenceArtist .inner .clearfix .leftSide {
      width: 100%; }
      body #wrap #container article.blue.last #detaBoxArea .residenceArtist .inner .clearfix .leftSide img {
        height: 67.2vw;
        object-fit: cover; }
    body #wrap #container article.blue.last #detaBoxArea .residenceArtist .inner .clearfix .rightSide {
      font-size: 14px;
      letter-spacing: 0.075em;
      line-height: 2; } }

/*----------------------------------
2023-02-06 改修
----------------------------------*/
body #container article.blue #residenceArtist01 .box ul li .rightSide .name {
  justify-content: center;
  text-align: center; }

#container #detail .calendarArea {
  padding-top: 48px; }
  #container #detail .calendarArea a {
    background-color: #58c1db;
    color: #fff;
    display: inline-block;
    width: 100%;
    padding: 35px;
    font-size: 20px;
    text-align: center;
    box-sizing: border-box; }
    #container #detail .calendarArea a:before {
      content: "";
      padding: 0 15px 0 0;
      background: url(../../img/cocokita/ico_arrow_white01.png) left 50% no-repeat; }
  @media screen and (max-width: 767px) {
    #container #detail .calendarArea {
      padding-top: 0; }
      #container #detail .calendarArea a {
        padding: 20px;
        font-size: 16px; } }

/*# sourceMappingURL=style.css.map */