@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: 0.3s;
}
.leftSide.no-slide a:hover {
  opacity: 0.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;
  -o-object-fit: cover;
     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: 87.3684210526vw;
    height: 53.1578947368vw;
    top: -8px;
    left: -8px;
    border: 3px solid #eb5d95;
  }
  .leftSide.no-slide a img {
    width: 88.1578947368vw;
    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;
  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: flex;
  flex-wrap: wrap;
  margin: 15px -6% 0 0;
}
#container #detail .imgArea .rightSide ul li {
  max-width: 165px;
  width: 48%;
  margin: 0 6% 24px 0;
  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;
    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;
    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 {
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  padding: 0 0 0 23px;
  vertical-align: middle;
  cursor: pointer;
}
.check_css:after {
  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 {
  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;
  transform: rotate(45deg);
}

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

.all-ck label {
  cursor: pointer;
}

.check_css_off {
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  padding: 0 0 0 23px;
  vertical-align: middle;
}
.check_css_off:after {
  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%;
  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: flex;
  align-items: 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;
  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;
  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;
  box-sizing: border-box;
}
#detaBoxArea .txt table td {
  max-width: 760px;
  width: 80%;
  color: #ffffff;
  padding: 20px 25px;
  background-color: #a098cd;
  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: flex;
  justify-content: space-between;
  padding-top: 60px;
}
#residenceArtist01 .box ul li {
  display: flex;
  justify-content: space-between;
  max-width: 470px;
  padding: 30px;
  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;
  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;
  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;
  box-sizing: border-box;
  padding: 30px 20px;
}
#mypage .box .table02 th, #mypage .box .table02 td {
  font-size: 17px;
  border-bottom: 1px solid #afafaf;
  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: flex;
  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;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  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;
  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;
  box-sizing: border-box;
}

#pdfArea {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 5px;
  background-color: #fff;
  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;
  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: "";
  flex-grow: 1;
  height: 3px;
  background: #58c1db;
  display: block;
}
#flowArea .ttlLine02:before {
  margin-right: 0.4em;
}
#flowArea .ttlLine02:after {
  margin-left: 0.4em;
}
#flowArea .box ul {
  display: flex;
  justify-content: space-between;
  padding-bottom: 50px;
  margin-bottom: 50px;
  border-bottom: 1px #58c1db dotted;
}
#flowArea .box.bottom ul {
  display: flex;
  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;
  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;
  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: flex;
  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: "";
  flex-grow: 1;
  height: 3px;
  background: #23b2a2;
  display: block;
}
#cInformation .ttlLine02:before {
  margin-right: 0.4em;
}
#cInformation .ttlLine02:after {
  margin-left: 0.4em;
}
#cInformation .txt {
  font-size: 16px;
  text-align: center;
  margin-bottom: 35px;
}
#cInformation .txt a {
  color: #23b2a2;
  text-decoration: underline;
}
#cInformation .box {
  display: flex;
  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: flex;
  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: flex;
    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: 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: 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;
    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;
  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: 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: flex;
  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: flex;
  align-items: 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: flex;
  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;
}


/*  アーティストバンク リニューアル
-------------------------------------------- */
#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: 90%;
    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.5vw;
  }
}
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.5vw;
  }
}
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: 0.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;
    -o-object-fit: cover;
       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.5vw + 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.5vw;
    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%;
  -o-object-fit: contain;
     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;
  -o-object-fit: contain;
     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;
    -o-object-fit: cover;
       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 */