@charset "UTF-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-size: 100%;
  vertical-align: baseline; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

html {
  overflow-y: scroll; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

input,
textarea {
  margin: 0;
  padding: 0; }

ol,
ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption,
th {
  text-align: left; }

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

html {
  font-size: 62.5%; }

* {
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal; }

a {
  text-decoration: none;
  transition: .3s ease-in-out; }

a:focus {
  outline-color: #3b99fc;
  outline-offset: 0px;
  outline-style: auto;
  outline-width: 5px; }

a:hover {
  cursor: pointer;
  opacity: 0.7; }

body {
  line-height: 1.6;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  color: #333;
  font-size: 12px;
  font-size: 1.2rem;
  position: relative;
  -webkit-text-size-adjust: 100%; }
  [lang=en-US] body {
    font-family: "Avenir", "Helvetica Neue", "Helvetica", "Arial"; }
  [lang=zh-TW] body {
    font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", "STXihei", "Microsoft YaHei", "微软雅黑", "SimSun", sans-serif; }

img {
  width: 100%;
  height: auto;
  vertical-align: bottom; }

@media screen and (min-width: 768px) {
  body {
    font-size: 14px;
    font-size: 1.4rem; }
  img {
    width: auto;
    max-width: 100%; } }

/* Slider */
/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
    .slick-prev:hover:before, .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
      opacity: 1; }
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.25; }
  .slick-prev:before,
  .slick-next:before {
    font-family: "slick";
    font-size: 20px;
    line-height: 1;
    color: white;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

.slick-prev {
  left: -25px; }
  [dir="rtl"] .slick-prev {
    left: auto;
    right: -25px; }
  .slick-prev:before {
    content: "←"; }
    [dir="rtl"] .slick-prev:before {
      content: "→"; }

.slick-next {
  right: -25px; }
  [dir="rtl"] .slick-next {
    left: -25px;
    right: auto; }
  .slick-next:before {
    content: "→"; }
    [dir="rtl"] .slick-next:before {
      content: "←"; }

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px; }

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer; }
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer; }
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
        .slick-dots li button:hover:before, .slick-dots li button:focus:before {
          opacity: 1; }
      .slick-dots li button:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 20px;
        height: 20px;
        font-family: "slick";
        font-size: 6px;
        line-height: 20px;
        text-align: center;
        color: black;
        opacity: 0.25;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
    .slick-dots li.slick-active button:before {
      color: black;
      opacity: 0.75; }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

.btn, .btn--purple, .btn--head, .btn--news, .btn--next, .btn--prev, .btn--down, .btn--up, .btn--external {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 240px;
  height: 4em;
  text-align: center;
  background: #ddd;
  border: 1px solid #ccc;
  color: #666;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 2em; }
  @media screen and (min-width: 768px) {
    .btn, .btn--purple, .btn--head, .btn--news, .btn--next, .btn--prev, .btn--down, .btn--up, .btn--external {
      font-size: 1.4rem; } }
  .btn a, .btn--purple a, .btn--head a, .btn--news a, .btn--next a, .btn--prev a, .btn--down a, .btn--up a, .btn--external a {
    color: inherit; }
  .btn span, .btn--purple span, .btn--head span, .btn--news span, .btn--next span, .btn--prev span, .btn--down span, .btn--up span, .btn--external span {
    display: inline-block; }
  .btn::after, .btn--purple::after, .btn--head::after, .btn--news::after, .btn--next::after, .btn--prev::after, .btn--down::after, .btn--up::after, .btn--external::after {
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    width: 6px;
    height: 8px;
    content: '';
    transform: translate(0, -50%);
    background: none;
    background-size: cover; }
  .btn.inverted, .inverted.btn--purple, .inverted.btn--head, .inverted.btn--news, .inverted.btn--next, .inverted.btn--prev, .inverted.btn--down, .inverted.btn--up, .inverted.btn--external {
    background-color: #666;
    color: #fff; }
    .btn.inverted::after, .inverted.btn--purple::after, .inverted.btn--head::after, .inverted.btn--news::after, .inverted.btn--next::after, .inverted.btn--prev::after, .inverted.btn--down::after, .inverted.btn--up::after, .inverted.btn--external::after {
      background: none;
      background-size: cover; }

.btn--purple {
  background: #711c79;
  border: 1px solid #fff;
  color: #fff;
  font-weight: bold;
  border-radius: 2em; }
  .btn--purple a {
    color: inherit; }
  .btn--purple span {
    display: inline-block; }
  .btn--purple::after {
    position: absolute;
    top: 50%;
    right: 10px;
    display: block;
    width: 6px;
    height: 8px;
    content: '';
    transform: translate(0, -50%);
    background: none;
    background-size: cover; }
  .btn--purple.inverted {
    background-color: #666;
    color: #fff; }
    .btn--purple.inverted::after {
      background: none;
      background-size: cover; }

.btn--head {
  background: #fff;
  border-color: #711c79;
  color: #711c79;
  font-size: 1.4rem;
  height: 4em;
  width: auto; }
  .btn--head.inverted {
    background-color: #711c79;
    color: #fff; }

@media screen and (min-width: 768px) {
  .btn--head {
    background: #fff;
    border-color: #711c79;
    color: #711c79;
    font-size: 1.2rem;
    height: 2.8em;
    width: 120px; }
    .btn--head.inverted {
      background-color: #711c79; } }

.btn--news {
  border-radius: 0 !important;
  background-color: #CDB469;
  color: #fff;
  font-size: 1rem;
  height: 2.5em;
  border-radius: 1.5em;
  width: 100%;
  margin-top: 0.7em;
  border: none; }
  .btn--news.inverted {
    background-color: #B682BA;
    color: #fff; }

@media screen and (min-width: 768px) {
  .btn--news {
    font-size: 1.2rem;
    height: 2.8em; } }

.btn--next {
  background: #fff;
  border-color: #711c79;
  color: #711c79; }
  .btn--next::after {
    right: 10px;
    width: 6px;
    height: 8px;
    background: url(../images/common/icon_chevron_right.png) no-repeat center center;
    background-size: cover; }
  .btn--next.inverted {
    background-color: #711c79; }
    .btn--next.inverted::after {
      background: url(../images/common/icon_chevron_right_wh.png) no-repeat center center;
      background-size: cover; }

.btn--prev {
  background: #fff;
  border-color: #711c79;
  color: #711c79; }
  .btn--prev::after {
    left: 10px;
    width: 6px;
    height: 8px;
    background: url(../images/common/icon_chevron_left.png) no-repeat center center;
    background-size: cover; }
  .btn--prev.inverted {
    background-color: #711c79; }
    .btn--prev.inverted::after {
      background: url(../images/common/icon_chevron_left_wh.png) no-repeat center center;
      background-size: cover; }

.btn--down {
  background: #fff;
  border-color: #711c79;
  color: #711c79; }
  .btn--down::after {
    right: 10px;
    width: 9px;
    height: 7px;
    background: url(../images/common/icon_chevron_down.png) no-repeat center center;
    background-size: cover; }
  .btn--down.inverted {
    background-color: #711c79; }
    .btn--down.inverted::after {
      background: url(../images/common/icon_chevron_down_wh.png) no-repeat center center;
      background-size: cover; }

.btn--up {
  background: #fff;
  border-color: #711c79;
  color: #711c79; }
  .btn--up::after {
    right: 10px;
    width: 9px;
    height: 7px;
    background: url(../images/common/icon_chevron_up.png) no-repeat center center;
    background-size: cover; }
  .btn--up.inverted {
    background-color: #711c79; }
    .btn--up.inverted::after {
      background: url(../images/common/icon_chevron_up_wh.png) no-repeat center center;
      background-size: cover; }

.btn--external {
  background: #fff;
  border-color: #711c79;
  color: #711c79; }
  .btn--external::after {
    right: 10px;
    width: 14px;
    height: 10px;
    background: url(../images/common/icon_external_link.png) no-repeat center center;
    background-size: cover; }
  .btn--external.inverted {
    background-color: #711c79; }
    .btn--external.inverted::after {
      background: url(../images/common/icon_external_link_wh.png) no-repeat center center;
      background-size: cover; }

.btn_index {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: center;
      align-items: center;
  height: 4em;
  font-size: 1.4rem;
  width: 100%;
  background-color: #fff;
  padding: 1em;
  border: 1px solid #F1F1F1;
  border-left: 3px solid #711c79;
  margin-bottom: 2%; }
  .btn_index:nth-child(odd) {
    margin-right: 2%; }
  .btn_index .btn_index__num {
    font-size: 2rem;
    font-weight: bold;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center;
    border-right: 1px solid;
    padding: 0 0.7em 0 0;
    margin-right: 0.7em;
    font-family: "Helvetica Neue", "Helvetica", "Arial";
    margin-top: 0; }
  .btn_index .btn_index__ttl {
    font-weight: bold;
    line-height: 1.4;
    font-size: 1.2rem; }
  .btn_index:hover {
    opacity: 1;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2); }

@media screen and (min-width: 768px) {
  .btn_index {
    height: 7em;
    width: 100%;
    padding: 2em;
    width: 49%;
    margin-bottom: 2%; }
    .btn_index:nth-child(odd) {
      margin-right: 2%; }
    .btn_index .btn_index__num {
      font-size: 3rem;
      padding: 0 0.7em 0 0;
      margin-right: 0.7em; }
    .btn_index .btn_index__ttl {
      font-size: 1.6rem; }
    .btn_index:hover {
      opacity: 1;
      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2); } }

/*

---
name: Button

category:
  - component
  - component/button
---

## 概要

* 画面遷移、クリック可能であることを示すボタン状のオブジェクトにて使用する
* ```a```タグもしくは```button```タグで使用すること

### デフォルト

```html
<a href="" class="btn"><span>Button</span></a>
```

### デフォルト背景色

```html
<a href="" class="btn--purple"><span>Button</span></a>
```

### ヘッダー用

```html
<a href="" class="btn--head"><span>お問い合わせ</span></a>
<a href="" class="btn--head inverted"><span>アクセス</span></a>
```

### ニュース用

```html
<a href="" class="btn--news inverted"><span>申し込む</span></a>
<a href="" class="btn--news"><span>詳細を見る</span></a>
```

### 次ページへの遷移

```html
<a href="" class="btn--next"><span>詳しく見る</span></a>
<a href="" class="btn--next inverted"><span>詳しく見る</span></a>
```

### 前ページへの遷移

```html
<a href="" class="btn--prev"><span>前のページヘ</span></a>
<a href="" class="btn--prev inverted"><span>前のページヘ</span></a>
```

### ページ下部への遷移

```html
<a href="" class="btn--down"><span>ページの下部へ</span></a>
<a href="" class="btn--down inverted"><span>ページの下部へ</span></a>
```

### 外部ページへの遷移

```html
<a href="" class="btn--external" target="_blank"><span>詳しく見る</span></a>
<a href="" class="btn--external inverted" target="_blank"><span>詳しく見る</span></a>
```

### センター揃え

```html
<div class="center_btn">
  <a href="#" class="btn--purple"><span>フロア図（PDF）</span></a>
</div>
```

### 左揃え

```html
<div class="left_btn">
  <a href="#" class="btn--purple"><span>フロア図（PDF）</span></a>
</div>
```

### インデックスページボタン

```html
<a href="" class="btn_index">
<p class="btn_index__num">01</p>
<p class="btn_index__ttl">ページタイトルページタイトルページタイトル</p>
</a>
<a href="" class="btn_index">
<p class="btn_index__num">02</p>
<p class="btn_index__ttl">ページタイトル</p>
</a>
<a href="" class="btn_index">
<p class="btn_index__num">03</p>
<p class="btn_index__ttl">ページタイトルページタイトルページタイトルページタイトルページタイトルページタイトル</p>
</a>
```


*/
.title_main {
  text-align: center; }
  .title_main .title_main__large {
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1;
    font-family: "Helvetica Neue", "Helvetica", "Arial"; }
  .title_main .title_main__small {
    font-size: 1.2rem;
    margin-top: 5px; }

.title_sub {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  border-bottom: solid 1px #D8D8D8;
  line-height: 1;
  padding-bottom: 0.7em; }
  .title_sub .title_sub__large {
    font-size: 2.4rem;
    font-weight: bold;
    padding-right: 10px;
    line-height: 1;
    font-family: "Helvetica Neue", "Helvetica", "Arial"; }
  .title_sub .title_sub__small {
    font-size: 1.0rem;
    font-weight: bold; }

.title_sub_link {
  text-align: right;
  font-size: 1.2rem;
  margin-left: 12px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
  border-left: solid 1px #D8D8D8;
  padding-left: 20px; }
  .title_sub_link a {
    text-decoration: underline; }

.title_page {
  margin-top: 40px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 30px; }
  .title_page:after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    content: "";
    width: 30px;
    height: 2px;
    background: #711c79; }
  .title_page span {
    font-size: 1rem; }

.title_page_s {
  font-size: 1.4rem;
  position: relative;
  padding-left: 20px;
  font-weight: bold;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 0.5em;
  margin-bottom: 1.5em; }
  .title_page_s:before {
    display: block;
    position: absolute;
    top: 0.75em;
    left: 0;
    margin: auto;
    content: "";
    width: 13px;
    height: 2px;
    background: #711c79; }

.index_ttl {
  background-color: #58115F;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  height: 100px;
  margin-bottom: 40px; }
  .index_ttl .index_ttl__txt {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    text-align: center; }

.title_page_ss {
  font-weight: bold;
  margin-bottom: 0.5em;
  color: #711c79;
  position: relative;
  line-height: 1.2;
  padding-left: 1.2em; }
  .title_page_ss::before {
    content: '';
    display: block;
    position: absolute;
    top: 0.1em;
    left: 0;
    width: 1em;
    height: 1em;
    background-color: #711c79;
    border-radius: 0.5em; }

.title_page_sss {
  font-weight: bold; }

@media screen and (min-width: 768px) {
  .title_main {
    text-align: center; }
    .title_main .title_main__large {
      font-size: 3.5rem;
      font-weight: bold;
      line-height: 1; }
    .title_main .title_main__small {
      font-size: 1.2rem;
      margin-top: 10px; }
  .title_sub {
    margin-bottom: 40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    height: 40px; }
    .title_sub .title_sub__large {
      font-size: 1.8rem;
      font-weight: bold;
      padding-right: 10px; }
    .title_sub .title_sub__small {
      font-size: 1.0rem;
      font-weight: bold; }
  .title_sub_link {
    width: auto;
    text-align: right;
    margin-left: 18px;
    padding-left: 30px;
    padding-top: 0; }
  .title_page {
    margin-top: 80px;
    margin-bottom: 60px;
    font-size: 2.8rem;
    padding-bottom: 30px; }
    .title_page:after {
      width: 50px;
      height: 2px; }
    .title_page span {
      font-size: 1.4rem; }
  .title_page_s {
    font-size: 1.8rem;
    position: relative;
    padding-left: 27px;
    font-weight: bold;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0.5em;
    margin-bottom: 1.5em; }
    .title_page_s:before {
      display: block;
      position: absolute;
      top: 0.7em;
      left: 0;
      margin: auto;
      content: "";
      width: 18px;
      height: 2px;
      background: #711c79; }
  .index_ttl {
    height: 200px;
    margin-bottom: 100px; }
    .index_ttl .index_ttl__txt {
      font-size: 3.2rem;
      font-weight: bold;
      color: #fff;
      text-align: center; } }

/*

---
name: Title

category:
  - component
  - component/title
---


### トップページタイトル（大）
```html
<div class="title_main">
  <h2 class="title_main__large">Title</h2>
  <p class="title_main__small">タイトル</p>
</div>
```

### トップページタイトル（小）
```html
<div class="title_sub">
  <h2 class="title_sub__large">Title</h2>
  <p class="title_sub__small">タイトル</p>
</div>
```

### トップページタイトル（小：リンクあり）
```html
<div class="title_sub">
  <h2 class="title_sub__large">Title</h2>
  <p class="title_sub__small">タイトル</p>
    <div class="title_sub_link">
    <a href="">ダミーリンク</a>
  </div>
</div>
```

### インデックスページタイトル
```html
<div class="index_ttl">
  <h2 class="index_ttl__txt">協会について</h2>
</div>
```

### 下層ページタイトル（大）
```html
  <h2 class="title_page">Title</h2>
```

### 下層ページタイトル（中）
```html
  <h2 class="title_page_s">Title</h2>
```

### 下層ページタイトル（小）
```html
  <h3 class="title_page_ss">京都市長からのごあいさつ</h3>
```
### 下層ページタイトル（極小）
```html
  <p class="title_page_sss">京都市長からのごあいさつ</p>
```

*/
.card_news {
  width: 49.5%;
  background-color: #fff;
  display: block;
  margin-bottom: 6%; }

.card_news__img {
  width: 100%;
  vertical-align: bottom; }

.card_news__body {
  color: #333; }

.card_news__body__head {
  line-height: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center; }

.card_news__body__main {
  padding: 5%; }

.card_news__body__head__date {
  font-size: 1.0rem;
  font-weight: bold;
  padding: 0 5px; }

.card_news__body__main_ttl {
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.4;
  margin-bottom: 0.5em; }

.card_news__body__main_txt {
  font-size: 1.0rem;
  line-height: 1.4; }

.card_news__body__foot {
  border-top: 1px dotted #ccc;
  padding: 5%;
  font-size: 1.0rem;
  line-height: 1.4; }

.card_service {
  width: 100%;
  background-color: #f5f5f5;
  display: block;
  padding: 10%;
  color: #333; }
  .card_service.card_service--even {
    background-color: #F0E8F1; }

.card_service:hover {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
  opacity: 1; }

.card_service__tag {
  font-weight: bold;
  line-height: 1;
  margin-bottom: 20px;
  font-family: "Helvetica Neue", "Helvetica", "Arial"; }
  .card_service__tag .card_service__tag__service {
    font-size: 1.4rem;
    display: inline-block; }
  .card_service__tag .card_service__tag__number {
    font-size: 1.8rem;
    display: inline-block;
    border-left: 1px #ccc solid;
    padding-left: 10px;
    margin-left: 5px; }

.card_service__img {
  padding: 10%; }
  .card_service__img img {
    width: 100%;
    height: auto; }

.card_service__body {
  text-align: center; }

.card_service__body__ttl {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 1.4rem; }

.card_service--even .card_service__body__ttl {
  color: #711c79; }

.card_service__body__txt {
  font-size: 1rem; }

@media screen and (min-width: 768px) {
  .card_news {
    width: 23.8%;
    margin-bottom: 0; }
  .card_news__body__head__date {
    font-size: 1.2rem; }
  .card_news__body__main_ttl {
    font-size: 1.6rem; }
  .card_news__body__main_txt {
    font-size: 1.4rem; }
  .card_news__body__foot {
    font-size: 1.4rem; }
  .card_service {
    width: 23%;
    padding: 2%; }
  .card_service__body .card_service__body__ttl {
    font-size: 1.8rem; }
  .card_service__body .card_service__body__txt {
    font-size: 1.4rem; } }

.news__area {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between; }

/*

---
name: Card

category:
  - component
  - component/card
---

### ニュースカード

```html
<div class="card_news">
  <img src="https://placehold.jp/500x500.png" class="card_news__img">
  <div class="card_news__body">
    <div class="card_news__body__head">
      <span class="label--news">カテゴリー</span>
      <span class="card_news__body__head__date">2018.00.00</span>
    </div>
    <div class="card_news__body__main">
      <p class="card_news__body__main_ttl">ニュースタイトル</p>
      <p class="card_news__body__main_txt">ここにニュースの概要が入ります。ここにニュースの概要が入ります。ここにニュースの概要が入ります。</p>
    </div>
    <div class="card_news__body__foot">
      <p>開催日時：2018年00月00日00時</p>
      <p>対象：○○○○○○○○○○○○</p>
      <p>参加費：○○○○○○○○○○○○</p>
      <p>開催場所：○○○○○○○○○</p>
      <a href="" class="btn--news inverted"><span>申し込む</span></a>
      <a href="" class="btn--news"><span>詳細を見る</span></a>
    </div>
  </div>
</div>

```

### ニュースカード

```html

<a href="" class="card_news">
  <img src="https://placehold.jp/500x500.png" class="card_news__img">
  <div class="card_news__body">
    <div class="card_news__body__head">
      <span class="label--news">カテゴリー</span>
      <span class="card_news__body__head__date">2018.00.00</span>
    </div>
    <div class="card_news__body__main">
      <p class="card_news__body__main_ttl">ニュースタイトル</p>
      <p class="card_news__body__main_txt">ここにニュースの概要が入ります。ここにニュースの概要が入ります。ここにニュースの概要が入ります。</p>
    </div>
    <div class="card_news__body__foot">
      <p>開催日時：2018年00月00日00時</p>
      <p>対象：○○○○○○○○○○○○</p>
      <p>参加費：○○○○○○○○○○○○</p>
      <p>開催場所：○○○○○○○○○</p>
    </div>
    <div class="card_news__body__btn">
      <button href="https://webliker.info/46840/" class="card_news__body__btn_next">申し込みはこちら</button>
      <button href="" class="card_news__body__btn_more">詳細を見る</button>
    </div>
  </div>
</a>

```


### サービスカード

```html
<a href="" class="card_service">
  <div class="card_service__tag">
    <p class="card_service__tag__service">service</p>
    <p class="card_service__tag__number">01</p>
  </div>
  <div class="card_service__img">
    <img src="https://placehold.jp/500x500.png" class="card_service__img">
  </div>
  <div class="card_service__body">
    <p class="card_service__body__ttl">ニュースタイトル</p>
    <p class="card_service__body__txt">ここにニュースの概要が入ります。ここにニュースの概要が入ります。ここにニュースの概要が入ります。</p>
  </div>
</a>

```


*/
.tile {
  display: block;
  position: relative;
  height: 111px;
  overflow: hidden; }
  .tile.column2-3 {
    width: calc(100% / 2); }
  .tile.column2-4 {
    width: calc(100% / 2); }
  .tile.column1-4 {
    width: 100%; }
  .tile > img {
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s; }
  .tile:hover {
    opacity: 1; }
    .tile:hover img {
      transform: translate(-50%, -50%) scale(1.05); }

.tile__mask {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  transition: .3s ease-in-out; }

.tile_sns {
  position: relative;
  height: 111px;
  overflow: hidden;
  width: 100%;
  background-color: red; }
  .tile_sns > img {
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    max-width: 150%;
    height: auto;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%); }

.tile_sns__mask {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  text-align: center;
  color: #fff; }
  .tile_sns__mask .tile_sns__mask__inner p {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 10px; }
  .tile_sns__mask .tile_sns__mask__inner ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center; }
    .tile_sns__mask .tile_sns__mask__inner ul li {
      display: inline-block;
      margin: 0 10px;
      text-align: center; }
      .tile_sns__mask .tile_sns__mask__inner ul li a {
        color: #fff;
        text-decoration: underline;
        display: block; }
      .tile_sns__mask .tile_sns__mask__inner ul li img {
        width: 20px !important;
        display: block;
        margin: 0 auto 3px; }
      .tile_sns__mask .tile_sns__mask__inner ul li span {
        font-weight: bold;
        font-family: "Helvetica Neue", "Helvetica", "Arial";
        font-size: 1rem; }

.tile__mask:hover {
  opacity: 0; }

/*TOPタイル*/
.tile_big {
  width: 100%;
  height: auto;
  text-align: center; }
  .tile_big .tile_big__area {
    width: 90%;
    margin: 0 auto;
    background-color: #711c79;
    color: #fff;
    margin-top: -47px;
    display: inline-block;
    padding: 30px; }
    .tile_big .tile_big__area .tile_big__area__txt {
      text-align: center; }
      .tile_big .tile_big__area .tile_big__area__txt .tile_big__area__txt__ttl {
        font-size: 2.0rem;
        line-height: 1;
        font-weight: bold;
        font-family: "Helvetica Neue", "Helvetica", "Arial"; }
      .tile_big .tile_big__area .tile_big__area__txt .tile_big__area__txt__sub {
        font-size: 1.2rem;
        opacity: 0.5;
        margin-top: 5px; }
      .tile_big .tile_big__area .tile_big__area__txt .tile_big__area__txt__view {
        font-size: 1.2rem;
        line-height: 1.8;
        margin: 20px 0; }
      .tile_big .tile_big__area .tile_big__area__txt .btn--purple {
        margin: 0 auto; }

/*TOPタイル白*/
.tile_other {
  width: 100%;
  height: auto;
  text-align: center; }
  .tile_other .tile_other__area {
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    margin-top: -27px;
    display: inline-block;
    padding: 30px; }
    .tile_other .tile_other__area .tile_other__area__txt {
      text-align: center; }
      .tile_other .tile_other__area .tile_other__area__txt .tile_other__area__txt__ttl {
        font-size: 2.4rem;
        line-height: 1;
        color: #711c79;
        font-weight: bold;
        font-family: "Helvetica Neue", "Helvetica", "Arial"; }
      .tile_other .tile_other__area .tile_other__area__txt .tile_other__area__txt__sub {
        font-size: 1.2rem;
        opacity: 0.7;
        margin-top: 5px;
        color: #711c79; }
      .tile_other .tile_other__area .tile_other__area__txt .tile_other__area__txt__view {
        font-size: 1.2rem;
        line-height: 1.8;
        margin: 20px 0;
        color: #333333; }
      .tile_other .tile_other__area .tile_other__area__txt .btn--purple {
        margin: 0 auto; }

.tile_colum2 .tile_other {
  margin-bottom: 20px; }

.tile_colum2 .tile_other:last-child {
  margin-bottom: 0; }

@media screen and (min-width: 768px) {
  .tile {
    position: relative;
    height: 300px;
    overflow: hidden; }
    .tile.column2-3 {
      width: calc(100% / 3); }
    .tile.column2-4 {
      width: calc(100% / 4); }
    .tile.column1-4 {
      width: calc(100% / 4); }
  .tile__mask {
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    transition: .3s ease-in-out; }
  /*TOPタイル*/
  .tile_big {
    display: -ms-flexbox;
    display: flex; }
    .tile_big .tile_big__img {
      width: 65%;
      font-size: 0;
      line-height: 0; }
      .tile_big .tile_big__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-width: 100%;
        max-height: 100%; }
    .tile_big .tile_big__area {
      width: 35%;
      margin: 0 auto;
      background-color: #711c79;
      color: #fff;
      margin-top: 0px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      padding: 30px; }
      .tile_big .tile_big__area .tile_big__area__txt {
        text-align: left; }
        .tile_big .tile_big__area .tile_big__area__txt .tile_big__area__txt__ttl {
          font-size: 2.4rem; }
        .tile_big .tile_big__area .tile_big__area__txt .tile_big__area__txt__sub {
          font-size: 1.2rem;
          opacity: 0.5;
          margin-top: 15px; }
        .tile_big .tile_big__area .tile_big__area__txt .tile_big__area__txt__view {
          font-size: 1.4rem;
          line-height: 1.8;
          margin: 20px 0; }
        .tile_big .tile_big__area .tile_big__area__txt .btn--purple {
          margin: 0 auto; }
  /*TOPタイル白*/
  .tile_other {
    width: 100%;
    height: auto;
    text-align: center; }
    .tile_other .tile_other__img img {
      width: 100%; }
    .tile_other .tile_other__area .tile_other__area__txt .tile_other__area__txt__ttl {
      font-size: 2.4rem; }
    .tile_other .tile_other__area .tile_other__area__txt .tile_other__area__txt__sub {
      font-size: 1.2rem;
      opacity: 0.5;
      margin-top: 15px; }
    .tile_other .tile_other__area .tile_other__area__txt .tile_other__area__txt__view {
      font-size: 1.4rem;
      line-height: 1.8;
      margin: 20px 0; }
    .tile_other .tile_other__area .tile_other__area__txt .btn--purple {
      margin: 0 auto; }
  .tile_colum2 {
    display: -ms-flexbox;
    display: flex; }
    .tile_colum2 .tile_other {
      width: 50%; }
  .tile_sns {
    height: 300px;
    width: calc(100% / 4); }
  .tile_sns__mask .tile_sns__mask__inner p {
    font-size: 1.6rem;
    margin-bottom: 15px; }
  .tile_sns__mask .tile_sns__mask__inner ul li {
    margin: 0 10px; }
    .tile_sns__mask .tile_sns__mask__inner ul li img {
      margin: 0 auto 5px; }
    .tile_sns__mask .tile_sns__mask__inner ul li span {
      font-size: 1.2rem; } }

/*

---
name: Tile

category:
- component
- component/tile
---

### 2-3列並び
```html
<a href="http://www.kcif.or.jp/kcif_webservice/pages/" target="_blank" class="tile column2-3">
<img src="/web/assets/images/top/tile_study.jpg" class="tile__img" alt="">
<div class="tile__mask">
<p class="link--tile">留学生情報サイト</p>
</div>
</a>}

```

### 2-4列並び
```html
<a href="/web/jp/disasterprevention" target="_blank" class="tile column2-4">
<img src="/web/assets/images/top/tile_disasterprevention.jpg" class="tile__img" alt="">
<div class="tile__mask">
<p class="link--tile">外国人のための防災情報</p>
</div>
</a>

```


### 1-4列並び
```html
<div class="tile_sns">
<img src="/web/assets/images/top/tile_sns.jpg" class="tile__img" alt="">
<div class="tile_sns__mask">
<div class="tile_sns__mask__inner">
<p>SNS</p>
<ul>
<li><a href="https://www.facebook.com/kokokakyoto/" target="_blank"><img src="/web/assets/images/common/icon_facebook.png" alt=""><span>Facebook</span></a></li>
<li><a href="https://twitter.com/kokoka_kyoto?ref_src=twsrc%5Etfw%7Ctwcamp%5Eembeddedtimeline%7Ctwterm%5Eprofile%3Akokoka_kyoto%7Ctwgr%5E363937393b636f6e74726f6c&ref_url=http%3A%2F%2Fwww.kcif.or.jp%2F" target="_blank"><img src="/web/assets/images/common/icon_twitter.png" alt=""><span>Twitter</span></a></li>
<li><a href="https://www.instagram.com/kokokakcif/?hl=ja" target="_blank"><img src="/web/assets/images/common/icon_instagram.png" alt=""><span>Instagram</span></a></li>
<li><a href="http://line.me/ti/p/@gzi3034b" target="_blank"><img src="/web/assets/images/common/icon_line.png" alt=""><span>LINE</span></a></li>
</ul>
</div>
</div>
</div>

```



### TOPタイル
```html
<div class="tile_big">
<div class="tile_big__img">
<img src="/web/assets/images/common/img_top_wk.jpg">
</div>
<div class="tile_big__area">
<div class="tile_big__area__txt">
<p class="tile_big__area__txt__ttl">タイトルが入ります</p>
<p class="tile_big__area__txt__sub">タイトルが入ります</p>
<p class="tile_big__area__txt__view">
ここに概要が入ります。ここに概要が入ります。ここに概要が入ります。ここに概要が入ります。ここに概要が入ります。
</p>
<a href="" class="btn--purple"><span>Button</span></a>
</div>
</div>
</div>

```

### TOPタイル白
```html
<div class="tile_other">
<div class="tile_other__img">
<img src="/web/assets/images/common/img_top_contact.jpg">
</div>
<div class="tile_other__area">
<div class="tile_other__area__txt">
<p class="tile_other__area__txt__ttl">タイトルが入ります</p>
<p class="tile_other__area__txt__sub">タイトルが入ります</p>
<p class="tile_other__area__txt__view">
ここに概要が入ります。ここに概要が入ります。ここに概要が入ります。ここに概要が入ります。ここに概要が入ります。
</p>
<a href="" class="btn--purple"><span>Button</span></a>
</div>
</div>
</div>

```

### TOPタイル白2つ
```html
<div class="tile_colum2">
<div class="tile_other">
<div class="tile_other__img">
<img src="/web/assets/images/common/img_top_wk.jpg">
</div>
<div class="tile_other__area">
<div class="tile_other__area__txt">
<p class="tile_other__area__txt__ttl">タイトルが入ります</p>
<p class="tile_other__area__txt__sub">タイトルが入ります</p>
<p class="tile_other__area__txt__view">
ここに概要が入ります。ここに概要が入ります。ここに概要が入ります。ここに概要が入ります。ここに概要が入ります。
</p>
<a href="" class="btn--purple"><span>Button</span></a>
</div>
</div>
</div>
<div class="tile_other">
<div class="tile_other__img">
<img src="/web/assets/images/common/img_top_wk.jpg">
</div>
<div class="tile_other__area">
<div class="tile_other__area__txt">
<p class="tile_other__area__txt__ttl">タイトルが入ります</p>
<p class="tile_other__area__txt__sub">タイトルが入ります</p>
<p class="tile_other__area__txt__view">
ここに概要が入ります。ここに概要が入ります。ここに概要が入ります。ここに概要が入ります。ここに概要が入ります。
</p>
<a href="" class="btn--purple"><span>Button</span></a>
</div>
</div>
</div>
</div>

```




*/
.table_simple {
  margin-top: 20px;
  margin-bottom: 20px;
  border-top: 1px solid #e5e5e5; }
  .table_simple tr {
    border-bottom: 1px solid #e5e5e5; }
    .table_simple tr th,
    .table_simple tr td {
      padding: 3px;
      font-size: 1rem; }
    .table_simple tr th {
      min-width: 7em; }

@media screen and (min-width: 768px) {
  .table_simple {
    margin-top: 40px;
    margin-bottom: 40px; }
    .table_simple tr th,
    .table_simple tr td {
      padding: 10px 5px;
      font-size: 1.4rem; } }

.table_color {
  margin-top: 20px; }
  .table_color tr th,
  .table_color tr td {
    padding: 3px;
    font-size: 1rem;
    vertical-align: middle; }
  .table_color tr th {
    background-color: #711c79;
    color: #fff;
    text-align: center;
    border: 1px solid #A65CA6; }
  .table_color tr td {
    border: 1px solid #e5e5e5;
    background-color: #f5f5f5; }

@media screen and (min-width: 768px) {
  .table_color {
    margin-top: 0px;
    margin-bottom: 0px; }
    .table_color tr th,
    .table_color tr td {
      padding: 5px;
      font-size: 1.4rem; } }

.table_event {
  margin-top: 20px;
  margin-bottom: 20px;
  border-top: 1px solid #e5e5e5;
  width: 100%; }
  .table_event tr {
    border-bottom: 1px solid #e5e5e5; }
    .table_event tr th,
    .table_event tr td {
      padding: 3px;
      font-size: 1rem; }
    .table_event tr th {
      min-width: 7em;
      background-color: #F0E8F1;
      border: 1px solid #fff; }

@media screen and (min-width: 768px) {
  .table_event {
    margin-top: 40px;
    margin-bottom: 40px; }
    .table_event tr th,
    .table_event tr td {
      padding: 10px 5px;
      font-size: 1.4rem; } }

.event_calender__table {
  width: 100%;
  min-width: 650px; }

.event_calender__table td {
  border: solid 1px #e5e5e5;
  font-size: 0.8rem; }

.event_calender__table th {
  border: 1px solid #A65CA6;
  font-size: 1rem; }

.event_calender__table .event_calender__table__head .event_calender__table__row {
  background-color: #711c79;
  color: #ffffff; }

.event_calender__table .event_calender__table__head .event_calender__table__row th {
  padding: 10px 10px;
  font-weight: normal;
  text-align: center; }

.event_calender__table .event_calender__table__body .event_calender__table__row {
  background-color: #ffffff;
  font-size: 1.4rem; }

.event_calender__table .event_calender__table__body .event_calender__table__row:nth-child(odd) {
  background-color: #F5F5F5; }

.event_calender__table .event_calender__table__body .event_calender__table__row td {
  padding: 5px; }

.event_calender__table__date {
  width: 8em; }

@media screen and (min-width: 768px) {
  .event_calender__table .event_calender__table__ttl th {
    padding: 10px 20px; }
  .event_calender__table .event_calender__table__main td {
    padding: 20px; }
  .event_calender__table td {
    border: solid 1px #e5e5e5;
    font-size: 1.4rem; }
  .event_calender__table th {
    border: 1px solid #A65CA6;
    font-size: 1.4rem; } }

.scroll_table {
  width: 100%;
  max-height: 70vh;
  overflow: scroll;
  border: 1px solid #e5e5e5;
  -webkit-overflow-scrolling: touch;
  background-color: #fafafa; }
  .scroll_table::-webkit-scrollbar {
    background: #f5f5f5;
    width: 5px;
    height: 5px; }
  .scroll_table::-webkit-scrollbar-thumb {
    background: #454545;
    width: 2px;
    height: 2px;
    border-radius: 2px; }
  .scroll_table table {
    width: 100%;
    min-width: 650px; }

@media screen and (min-width: 768px) {
  .scroll_table {
    width: 100%;
    max-height: initial;
    max-height: auto;
    border: 1px solid #e5e5e5; }
    .scroll_table::-webkit-scrollbar {
      background: transparent;
      width: 0px;
      height: 0px; }
    .scroll_table::-webkit-scrollbar-thumb {
      background: transparent;
      width: 0px;
      height: 0px; }
    .scroll_table table {
      width: 100%;
      min-width: auto; } }

/*
---
name: Table

category:
  - component
  - component/table
---

### シンプルテーブル
```html
<table class="table_simple">
  <tbody>
    <tr>
      <th>英語</th><td>火・木 9：00～17：00</td>
    </tr>
    <tr>
      <th>中国語</th><td>水・金 9：00～17：00</td>
    </tr>
    <tr>
      <th>TEL</th><td>075-752-1166</td>
    </tr>
  </tbody>
</table>
```

### 料金表テーブル
```html
<table class="facility_price">
  <thead>
    <tr>
      <th></th>
      <th>午前<br>9:00～12:00</th>
      <th>午後<br>13:00～17:00</th>
      <th>夜間<br>18:00～21:00</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>平日</td>
      <td class="price">17,790円</td>
      <td class="price">26,120円</td>
      <td class="price">24,580円</td>
    </tr>
    <tr>
      <td>土・日・祝日</td>
      <td class="price">21,390円</td>
      <td class="price">31,370円</td>
      <td class="price">29,930円</td>
    </tr>
  </tbody>
</table>
```

### カレンダー

```html
<div class="scroll_table">
  <table class="event_calender__table">
    <thead class="event_calender__table__head">
      <tr class="event_calender__table__row">
        <th>日付</th>
        <th>イベント名</th>
        <th>開催時間</th>
        <th>場所</th>
        <th>主催・連絡先</th>
        <th>対象・備考</th>
      </tr>
    </thead>
    <tbody class="event_calender__table__body">
      <tr class="event_calender__table__row">
        <td>2018.11.08</td>
        <td>ひまわり音楽教室<br>発表会</td>
        <td>第1部9:20<br>第2部11:10<br>第3部14:50<br>第4部17:10<br>*開場時間は<br>それぞれ10分前</td>
        <td>イベントホール</td>
        <td>ひまわり音楽教室<br>075-871-3917</td>
        <td>一般 無料</td>
      </tr>
      <tr class="event_calender__table__row">
        <td>2018.11.07</td>
        <td>ひまわり音楽教室<br>発表会</td>
        <td>第1部9:20<br>第2部11:10<br>第3部14:50<br>第4部17:10<br>*開場時間は<br>それぞれ10分前</td>
        <td>イベントホール</td>
        <td>ひまわり音楽教室<br>075-871-3917</td>
        <td>一般 無料</td>
      </tr>
      <tr class="event_calender__table__row">
        <td>2018.11.06</td>
        <td>ひまわり音楽教室<br>発表会</td>
        <td>第1部9:20<br>第2部11:10<br>第3部14:50<br>第4部17:10<br>*開場時間は<br>それぞれ10分前</td>
        <td>イベントホール</td>
        <td>ひまわり音楽教室<br>075-871-3917</td>
        <td>一般 無料</td>
      </tr>
      <tr class="event_calender__table__row">
        <td>2018.11.05</td>
        <td>ひまわり音楽教室<br>発表会</td>
        <td>第1部9:20<br>第2部11:10<br>第3部14:50<br>第4部17:10<br>*開場時間は<br>それぞれ10分前</td>
        <td>イベントホール</td>
        <td>ひまわり音楽教室<br>075-871-3917</td>
        <td>一般 無料</td>
      </tr>
      <tr class="event_calender__table__row">
        <td>2018.11.04</td>
        <td>ひまわり音楽教室<br>発表会</td>
        <td>第1部9:20<br>第2部11:10<br>第3部14:50<br>第4部17:10<br>*開場時間は<br>それぞれ10分前</td>
        <td>イベントホール</td>
        <td>ひまわり音楽教室<br>075-871-3917</td>
        <td>一般 無料</td>
      </tr>
      <tr class="event_calender__table__row">
        <td>2018.11.03</td>
        <td>ひまわり音楽教室<br>発表会</td>
        <td>第1部9:20<br>第2部11:10<br>第3部14:50<br>第4部17:10<br>*開場時間は<br>それぞれ10分前</td>
        <td>イベントホール</td>
        <td>ひまわり音楽教室<br>075-871-3917</td>
        <td>一般 無料</td>
      </tr>
      <tr class="event_calender__table__row">
        <td>2018.11.02</td>
        <td>ひまわり音楽教室<br>発表会</td>
        <td>第1部9:20<br>第2部11:10<br>第3部14:50<br>第4部17:10<br>*開場時間は<br>それぞれ10分前</td>
        <td>イベントホール</td>
        <td>ひまわり音楽教室<br>075-871-3917</td>
        <td>一般 無料</td>
      </tr>
      <tr class="event_calender__table__row">
        <td>2018.11.01</td>
        <td>ひまわり音楽教室<br>発表会</td>
        <td>第1部9:20<br>第2部11:10<br>第3部14:50<br>第4部17:10<br>*開場時間は<br>それぞれ10分前</td>
        <td>イベントホール</td>
        <td>ひまわり音楽教室<br>075-871-3917</td>
        <td>一般 無料</td>
      </tr>
    </tbody>
  </table>
</div>
```

*/
a {
  color: #711c79;
  opacity: 1;
  transition: all 0.8s ease;
  font-weight: bold; }
  a:hover {
    opacity: 0.6;
    transition: all 0.4s ease; }

.link--tile {
  color: #fff;
  font-weight: bold;
  position: relative;
  padding-right: 25px; }
  @media screen and (min-width: 768px) {
    .link--tile {
      font-size: 1.6rem; } }
  .link--tile::after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    display: inline-block;
    width: 15px;
    height: 15px;
    content: '';
    background: url(../images/common/icon_chevron_right_wh.png) no-repeat 6px center;
    border-radius: 10px;
    background-color: #711c79;
    background-size: 4px; }

.link--icon_menu {
  position: relative;
  font-size: 1.4rem;
  padding-left: 15px; }
  .link--icon_menu::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    display: inline-block;
    width: 11px;
    height: 11px;
    content: '';
    background: url(../images/common/icon_sp_menu.png) no-repeat 3px center;
    border-radius: 10px;
    background-color: #fff;
    background-size: 60%; }

.link--next {
  position: relative;
  padding-right: 10px; }
  .link--next::after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    display: inline-block;
    width: 6px;
    height: 8px;
    content: '';
    background: url(../images/common/icon_chevron_right.png) no-repeat center center;
    background-size: cover; }

.link--circle {
  position: relative;
  padding-right: 20px; }
  .link--circle::after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    display: inline-block;
    width: 15px;
    height: 15px;
    content: '';
    background: url(../images/common/icon_chevron_right_wh.png) no-repeat 6px center;
    border-radius: 10px;
    background-color: #711c79;
    background-size: 4px; }

.link--external {
  position: relative;
  padding-right: 20px; }
  .link--external::after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    display: inline-block;
    width: 14px;
    height: 10px;
    content: '';
    background: url(../images/common/icon_external_link.png) no-repeat center center;
    background-size: cover; }

/*

---
name: Link

category:
  - component
  - component/Link
---

## 概要

* 遷移テキストにて使用する

### アイコンなし
```html
<a href="">詳しく見る</a>
```

### タイルリンク
```html
<a href="" class="link--tile">詳しく見る</a>
```

### タイルリンクSPメニュー
```html
<a href="" class="link--icon_menu">詳しく見る</a>
```

### アイコンあり
```html
<a href="" class="link--next">詳しく見る</a>
```

### 丸アイコンあり
```html
<a href="" class="link--circle">詳しく見る</a>
```

### 外部リンク
```html
<a href="" class="link--external">詳しく見る</a>
```


*/
.label--news {
  text-align: center;
  background-color: #ccc;
  color: #fff;
  font-size: 1.0rem;
  padding: 5px;
  min-width: 6em; }

.wanted {
  background-color: #425A99; }

.information {
  background-color: #739153; }

@media screen and (min-width: 768px) {
  .label--news {
    font-size: 1.2rem; } }

/*

---
name: Label

category:
  - component
  - component/label
---


### ニュースカテゴリラベル

```html
<span class="label--news">カテゴリー</span>
```

```html
<span class="label--news wanted">募集</span>
```

```html
<span class="label--news information">お知らせ</span>
```

*/
.footer_bnr {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
      justify-content: center; }
  .footer_bnr a {
    width: 48%;
    margin: 0 0 2% 0; }
    .footer_bnr a img {
      width: 100%; }
    .footer_bnr a:nth-child(odd) {
      margin-right: 2%; }

@media screen and (min-width: 768px) {
  .footer_bnr {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        align-items: center;
    max-width: 1280px;
    width: 100%; }
    .footer_bnr a {
      width: calc(92% / 5); }
      .footer_bnr a:nth-child(odd) {
        margin-right: 0; }
      .footer_bnr a:nth-child(5) {
        width: 15.5%; }
      .footer_bnr a img {
        width: 100%; } }

/*

---
name: banner

category:
  - component
  - component/banner
---


### バナー4つ

```html
<div class="footer_bnr">
   <a href="" target="blank"><img src="/web/assets/images/top/bnr_kyotookazaki.jpg"></a>
    <a href="" target="blank"><img src="/web/assets/images/top/bnr_kokusaikasuishinshitsu.jpg"></a>
    <a href="" target="blank"><img src="/web/assets/images/top/bnr_hataraku.jpg"></a>
    <a href="" target="blank"><img src="/web/assets/images/top/bnr_housenavi.jpg"></a>
    <a href="" target="blank"><img src="/web/assets/images/top/bnr_foundation.gif"></a>
</div>
```


*/
.breadcrumb {
  background-color: #f5f5f5;
  width: 100%;
  overflow: scroll;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
  padding: 0.6em 0.7em 0.8em; }
  .breadcrumb ul {
    display: inline-block;
    vertical-align: middle; }
    .breadcrumb ul li {
      display: inline-block;
      vertical-align: middle;
      font-size: 1rem; }
      .breadcrumb ul li a {
        font-weight: bold;
        text-decoration: underline; }
      .breadcrumb ul li::after {
        content: '>';
        margin: 0 0.3em 0 1em; }
      .breadcrumb ul li:last-of-type::after {
        content: none; }

@media screen and (min-width: 768px) {
  .breadcrumb {
    overflow: hidden; }
    .breadcrumb ul {
      width: 1280px;
      margin: 0 auto;
      display: block; }
      .breadcrumb ul li {
        font-size: 1.2rem; } }

/*

---
name: Breadcrumb

category:
  - component
  - component/breadcrumb
---

### デフォルト

```html
<div class="breadcrumb">
  <ul>
    <li><a href="#">Top</a></li>
    <li><a href="#">協会について</a></li>
    <li><a href="#">Top</a></li>
    <li><a href="#">協会について</a></li>
    <li>ページタイトル</li>
  </ul>
</div>
```

*/
.video_area {
  max-width: 650px; }

.video_wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/*

---
name: Video

category:
  - component
  - component/Video
---

## 概要

* 動画を埋め込む

```html
<div class="video_area">
  <div class="video_wrap">
    <video src="/web/assets/video/sample.mp4" controls></video>
  </div>
</div>
```



*/
.mainvisual {
  width: 100%;
  margin: 20px auto; }
  .mainvisual img {
    width: 100%;
    height: auto; }

@media screen and (min-width: 768px) {
  .mainvisual {
    width: 750px;
    margin: 40px auto; } }

/*

---
name: visual

category:
  - component
  - component/visual
---


### 下層ページに使用するメインビジュアル
#### 推奨サイズ：750px × 421px

```html
<div class="mainvisual">
  <img src="/web/assets/images/donations/kifu01.jpg" alt="">
</div>


```


*/
/******************************************************************
// 1)spanタグに付与
// .u-wb 常にブロック表示
// .u-wb-sp -> pc時にはインライン、SP時にはブロック
// .u-wb-tb -> pc時にはインライン、SP,TB時にはブロック
// .u-wb-pc -> pc時にはブロック、SP時にはインライン
// 2)brタグに付与
// .u-br-pc -> pc時には改行、SP時には改行なし
// .u-br-sp -> pc時には改行なし、SP時には改行あり
// ******************************************************************/
.u-wb {
  display: block; }

.u-wb-sp {
  display: block; }
  @media (min-width: 1024px) {
    .u-wb-sp {
      display: inline; } }

.u-wb-tb {
  display: block; }
  @media (min-width: 1024px) {
    .u-wb-tb {
      display: inline; } }

.u-wb-pc {
  display: inline; }
  @media (min-width: 1024px) {
    .u-wb-pc {
      display: block; } }

.u-br-pc {
  display: none; }
  @media (min-width: 1024px) {
    .u-br-pc {
      display: inline; } }

.u-br-sp {
  display: inline; }
  @media (min-width: 1024px) {
    .u-br-sp {
      display: none; } }

.iframeWrap {
  margin-top: 20px;
  position: relative;
  height: 0;
  padding-bottom: 56.25%; }
  .iframeWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.l-centering {
  width: 90%;
  margin: 0 auto; }

@media screen and (min-width: 768px) {
  .l-centering {
    max-width: 1280px;
    margin: 0 auto; } }

.l-centering--news {
  width: 94%;
  margin: 0 auto; }

@media screen and (min-width: 768px) {
  .l-centering--news {
    max-width: 1440px;
    min-width: 1240px; } }

.site-header {
  width: 100%;
  min-height: 50px;
  background-color: #fff;
  position: relative; }
  .site-header h1 {
    width: 62.5vw;
    max-width: 250px;
    height: 50px;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding-left: 10px; }
    .site-header h1 img {
      width: 100%;
      height: auto; }
  .site-header .site-header__pc .nav_link {
    display: none; }

.btn_nav {
  position: absolute;
  top: 0;
  right: 0;
  display: -ms-flexbox;
  display: flex;
  width: 100px; }

.btn_lang_sp {
  width: 50px;
  height: 50px;
  padding: 12px;
  background-color: #711c79; }
  .btn_lang_sp img {
    width: 100%;
    height: auto; }

#panel-btn {
  display: block;
  z-index: 9999;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #580E5F; }
  #panel-btn .close {
    background: transparent; }
    #panel-btn .close:before, #panel-btn .close:after {
      margin-top: 0; }
    #panel-btn .close:before {
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg); }
    #panel-btn .close:after {
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg); }

#panel-btn-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  margin: -1px 0 0 -10px;
  background: #fff;
  transition: .2s; }
  #panel-btn-icon:before, #panel-btn-icon:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 2px;
    background: #fff;
    transition: .3s; }
  #panel-btn-icon:before {
    margin-top: -8px; }
  #panel-btn-icon:after {
    margin-top: 7px; }

.menu_lang_sp,
#panel {
  display: none;
  height: calc(100vh - 50px);
  position: fixed;
  width: 100%;
  z-index: 999; }
  .menu_lang_sp ul,
  #panel ul {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 80%;
    position: static; }
    .menu_lang_sp ul li,
    #panel ul li {
      text-align: center;
      padding: 1em 0;
      font-size: 1.8rem;
      font-weight: bold;
      letter-spacing: 0.1em; }

.menu_lang_sp {
  background-color: #711c79; }
  .menu_lang_sp ul {
    margin-top: 6em; }
    .menu_lang_sp ul li {
      font-size: 1.6rem; }
  .menu_lang_sp a {
    color: #fff; }

#panel {
  background-color: #580E5F;
  padding: 50px 0 100px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch; }
  #panel .gnavi {
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 30px; }
    #panel .gnavi .gnavi__list {
      font-size: 1.6rem;
      text-align: left;
      border-bottom: solid 1px rgba(255, 255, 255, 0.2);
      position: relative; }
      #panel .gnavi .gnavi__list a {
        color: #fff;
        display: block; }
      #panel .gnavi .gnavi__list .gnavi__list__sub {
        position: static;
        display: none;
        width: 100%;
        transition: .2s;
        height: auto;
        transition: all 0.3s;
        opacity: 0;
        visibility: hidden; }
        #panel .gnavi .gnavi__list .gnavi__list__sub.active {
          display: block;
          opacity: 1;
          visibility: visible;
          transition: all 0.3s; }
        #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__menu__list {
          position: static;
          width: auto;
          height: auto;
          transition: all 0.3s;
          padding-top: 10px; }
        #panel .gnavi .gnavi__list .gnavi__list__sub .sub_menu_list {
          position: relative; }
          #panel .gnavi .gnavi__list .gnavi__list__sub .sub_menu_list.gnavi__list__sub__item:before {
            content: none; }
          #panel .gnavi .gnavi__list .gnavi__list__sub .sub_menu_list.gnavi__list__sub__item:after {
            content: none; }
        #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__ttl {
          padding: 0;
          font-size: 1.4rem;
          text-align: left;
          color: #ffffff; }
        #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__item {
          font-size: 1.2rem;
          text-align: left;
          padding: 7px 0 7px 15px;
          position: relative;
          transition: all 0.3s; }
          #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__item::before {
            display: block;
            position: absolute;
            top: 19px;
            left: 0;
            content: "";
            width: 7px;
            height: 1px;
            background: #fff; }
          #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__item::after {
            display: block;
            position: absolute;
            top: 12px;
            left: 0;
            content: "";
            width: 1px;
            height: 7px;
            background: #fff; }
      #panel .gnavi .gnavi__list .gnavi__list__icon {
        display: block;
        position: absolute;
        top: 30px;
        right: 5%;
        width: 10px;
        height: 1px;
        margin: -1px 0 0 -10px;
        background: #fff;
        transition: .2s; }
        #panel .gnavi .gnavi__list .gnavi__list__icon::before {
          display: block;
          content: "";
          left: 4.4px;
          width: 10px;
          height: 1px;
          background: #fff;
          transition: .3s;
          transform: rotate(90deg); }
      #panel .gnavi .gnavi__list .gnavi__list__icon__open::before {
        transform: rotate(0deg); }
  #panel .btn--head {
    width: 90%;
    margin: 0 auto; }
  #panel .btn--head + .btn--head {
    margin-top: 1em; }
  #panel .nav_group {
    position: static;
    height: auto;
    border-top: solid 1px rgba(255, 255, 255, 0.2);
    margin-top: 30px;
    padding-top: 30px;
    text-align: center; }
    #panel .nav_group .nav_group__list {
      padding: 0;
      margin: 0 auto;
      display: inline-block;
      margin-right: 0.7em; }
      #panel .nav_group .nav_group__list a {
        color: #fff;
        font-size: 1.2rem; }

.site-header__menu,
.site-header__group__lng {
  display: none; }

/*

---
name: Header

category:
  - common
  - common/header
---

### ヘッダー

```html
<header class="site-header">
  <div class="site-header__pc">
    <h1><a href="/"><img src="/web/assets/images/common/logo.png" alt="公益財団法人 京都市国際交流協会"></a></h1>
    <div class="nav_link">
      <div class="nav_link__menu">
        <button class="site-header__group__lng">LANGUAGE</button>
        <a href="/web/jp/contact" class="btn--head"><span>お問い合わせ</span></a>
        <a href="/web/jp/access" class="btn--head inverted"><span>アクセス</span></a>
        <div class="menu_lang_pc">
          <ul>
            <li><a href="/">日本語</a></li>
            <li><a href="/en">English</a></li>
            <li><a href="/cn">中国語</a></li>
            <li><a href="/kr">한글</a></li>
            <li><a href="/es">Español</a></li>
          </ul>
        </div>
      </div>
      <ul class="nav_group">
        <li class="nav_group__list"><a href="/web/jp/news" class="link--icon_menu">最新情報</a></li>
        <li class="nav_group__list header__none"><a href="/web/jp/disasterprevention" class="link--icon_menu">外国人のための防災情報</a></li>
        <li class="nav_group__list"><a href="/web/jp/emailnewsletter" class="link--icon_menu">メルマガ登録</a></li>
        <li class="nav_group__list"><a href="/web/jp/advertise" class="link--icon_menu">広告掲載</a></li>
        <li class="nav_group__list"><a href="/web/jp/donations" class="link--icon_menu">寄付のお願い</a></li>
        <li class="nav_group__list"><a href="/web/jp/publications" class="link--icon_menu">広報出版物</a></li>
        <li class="nav_group__list header__none"><a href="/web/jp/privacypolicy" class="link--icon_menu">プライバシーポリシー</a></li>
      </ul>
    </div>
  </div>
  <div class="btn_nav">
    <button class="btn_lang_sp"><img src="/web/assets/images/common/icon_global.png" alt="公益財団法人 京都市国際交流協会"></button>
    <button id="panel-btn"><span id="panel-btn-icon"></span></button>
  </div>
  <div class="menu_lang_sp">
    <ul>
      <li><a href="/">日本語</a></li>
      <li><a href="/en">English</a></li>
      <li><a href="/cn">中国語</a></li>
      <li><a href="/kr">한글</a></li>
      <li><a href="/es">Español</a></li>
    </ul>
  </div>
  <nav id="panel">
    <ul class="gnavi">
      <li class="gnavi__list"><a href="/" class="menu__link menu_active">トップ</a></li>
      <li class="gnavi__list">
        <a href="/web/jp/foundation" class="menu__link">協会について</a>
        <div class="gnavi__list__sub">
          <div class="gnavi__list__sub__wrapping">
            <div class="gnavi__list__sub__menu">
              <ul class="gnavi__list__sub__menu__list">
                <li class="gnavi__list__sub__item"><a href="/web/jp/foundation/about">京都市国際交流協会について</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/foundation/internship">インターン受け入れについて</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/foundation/societytour">社会見学</a></li>
              </ul>
            </div>
          </div>
        </div>
        <span class="gnavi__list__icon"></span>
      </li>
      <li class="gnavi__list">
        <a href="/web/jp/building" class="menu__link">会館案内</a>
        <div class="gnavi__list__sub">
          <div class="gnavi__list__sub__wrapping">
            <div class="gnavi__list__sub__menu">
              <ul class="gnavi__list__sub__menu__list">
                <li class="gnavi__list__sub__item"><a href="/web/jp/building/kokoka">kokoka京都市国際交流会館について</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/building/library">図書・資料室</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/building/exhibitionspace">姉妹都市コーナー・展示室（共催展示スペース）</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/building/restaurant">レストラン・カフェ</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/building/messagespace">メッセージコーナー（有料チラシ設置スペース）</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/building/lobby">交流ロビー（Wi-Fi）</a></li>
              </ul>
            </div>
          </div>
        </div>
        <span class="gnavi__list__icon"></span>
      </li>
      <li class="gnavi__list">
        <a href="/web/jp/facilityrental" class="menu__link">施設貸出</a>
        <div class="gnavi__list__sub">
          <div class="gnavi__list__sub__wrapping">
            <div class="gnavi__list__sub__menu">
              <ul class="gnavi__list__sub__menu__list">
                <li class="gnavi__list__sub__item"><a href="/web/jp/facilityrental/overview">貸出概要</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/facilityrental/facility">貸施設紹介</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/facilityrental/faq">FAQ</a></li>
              </ul>
            </div>
          </div>
        </div>
        <span class="gnavi__list__icon"></span>
      </li>
      <li class="gnavi__list">
        <a href="/web/jp/livingguide" class="menu__link">生活ガイド</a>
        <div class="gnavi__list__sub">
          <div class="gnavi__list__sub__wrapping">
            <div class="gnavi__list__sub__menu">
              <ul class="gnavi__list__sub__menu__list">
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/consultation">困ったときに相談できる場所</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/emergency">緊急・災害のとき</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/residence">在留資格</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/wardoffice">区役所での手続き</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/housing">住まい・引越し</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/work">仕事</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/childcare">出産・育児・教育</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/medical">医療</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/bank_postoffice">銀行・郵便局</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/transport">交通</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/culture">日本の習慣</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/tax_insurance">税金・保険</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/localgovt">行政の窓口</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/sportsfaciltiies">文化・スポーツ施設</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/foreigncountries">外国のものや情報が得られるところ</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/learnjapanese">日本語が学べるところ</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/livingguide/hospitals">外国語が通じる病院・歯科</a></li>
              </ul>
            </div>
          </div>
        </div>
        <span class="gnavi__list__icon"></span>
      </li>
      <li class="gnavi__list">
        <a href="/web/jp/events" class="menu__link">交流・イベント</a>
        <div class="gnavi__list__sub">
          <div class="gnavi__list__sub__wrapping">
            <div class="gnavi__list__sub__menu">
              <ul class="gnavi__list__sub__menu__list">
                <li class="gnavi__list__sub__item"><a href="/web/jp/events/calendar">イベントカレンダー</a></li>
                <li class="gnavi__list__sub__item sub_menu_list">
                  <ul class="gnavi__list__sub__menu__list">
                    <li class="gnavi__list__sub__ttl">一般向け</li>
                    <!-- <li class="gnavi__list__sub__item"><a href="/web/jp/events/">タブサポ（京都市国際文化市民交流促進サポート事業）</a></li> -->
                    <li class="gnavi__list__sub__item"><a href="/web/jp/events/openday">kokokaオープンデイ</a></li>
                    <li class="gnavi__list__sub__item"><a href="/web/jp/events/volunteer">ボランティア活動</a></li>
                  </ul>
                </li>
                <li class="gnavi__list__sub__item sub_menu_list">
                  <ul class="gnavi__list__sub__menu__list">
                    <li class="gnavi__list__sub__ttl">企業・団体向け</li>
                    <li class="gnavi__list__sub__item"><a href="/web/jp/events/collaboration">企業等コラボ事業</a></li>
                    <li class="gnavi__list__sub__item"><a href="/web/jp/events/sponsored">共催事業・名義後援</a></li>
                    <li class="gnavi__list__sub__item"><a href="/web/jp/events/kokokanet">kokoka国際交流団体ねっと</a></li>
                  </ul>
                </li>
                <li class="gnavi__list__sub__item sub_menu_list">
                  <ul class="gnavi__list__sub__menu__list">
                    <li class="gnavi__list__sub__ttl">子ども向け</li>
                    <li class="gnavi__list__sub__item"><a href="/web/jp/events/hotchat">ホッとチャット</a></li>
                    <li class="gnavi__list__sub__item"><a href="/web/jp/events/kokokids">koko kids</a></li>
                  </ul>
                </li>
                <li class="gnavi__list__sub__item sub_menu_list">
                  <ul class="gnavi__list__sub__menu__list">
                    <li class="gnavi__list__sub__ttl">留学生・学校向け</li>
                    <li class="gnavi__list__sub__item"><a href="/web/jp/events/picnik">PICNIK（国際理解プログラム）</a></li>
                    <li class="gnavi__list__sub__item"><a href="/web/jp/events/family">留学生交流ファミリー</a></li>
                    <li class="gnavi__list__sub__item"><a href="/web/jp/events/teachingmaterials">国際理解教材貸出</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <span class="gnavi__list__icon"></span>
      </li>
      <li class="gnavi__list">
        <a href="/web/jp/classes" class="menu__link">講座</a>
        <div class="gnavi__list__sub">
          <div class="gnavi__list__sub__wrapping">
            <div class="gnavi__list__sub__menu">
              <ul class="gnavi__list__sub__menu__list">
                <li class="gnavi__list__sub__item"><a href="/web/jp/classes/japaneseclasses">ボランティアによる日本語クラス</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/classes/easyjapanese">やさしい日本語</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/classes/cityjapaneseclass">市内日本語教室</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/classes/teaceremony">KYOTO・ふれあい講座「茶道」</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/classes/koreansalon">コリアンサロン「めあり」ハングル塾</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/classes/cosmos">文化紹介講座「COSMOS」</a></li>
              </ul>
            </div>
          </div>
        </div>
        <span class="gnavi__list__icon"></span>
      </li>
      <li class="gnavi__list">
        <a href="/web/jp/support" class="menu__link">相談・サポート</a>
        <div class="gnavi__list__sub">
          <div class="gnavi__list__sub__wrapping">
            <div class="gnavi__list__sub__menu">
              <ul class="gnavi__list__sub__menu__list">
                <li class="gnavi__list__sub__item"><a href="/web/jp/support/govtinterpreting">行政通訳・相談</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/support/medicalinterpreting">医療通訳派遣</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/support/counselling">専門家による相談（法律・ビザ・税金・社会保険・年金・労働・メンタルヘルス）</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/support/network">きょうと多文化支援ネットワーク</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/support/scholarship">張鳳俊奨学金</a></li>
                <li class="gnavi__list__sub__item"><a href="/web/jp/support/life_tourism">生活相談・観光情報</a></li>
              </ul>
            </div>
          </div>
        </div>
        <span class="gnavi__list__icon"></span>
      </li>
    </ul>
    <div class="nav_link">
      <div class="nav_link__menu">
        <a href="" class="site-header__group__lng">LANGUAGE</a>
        <a href="/web/jp/contact" class="btn--head"><span>お問い合わせ</span></a>
        <a href="/web/jp/access" class="btn--head inverted"><span>アクセス</span></a>
      </div>
      <ul class="nav_group">
        <li class="nav_group__list"><a href="/web/jp/news" class="link--icon_menu">最新情報</a></li>
        <li class="nav_group__list header__none"><a href="/web/jp/disasterprevention" class="link--icon_menu">外国人のための防災情報</a></li>
        <li class="nav_group__list"><a href="/web/jp/emailnewsletter" class="link--icon_menu">メルマガ登録</a></li>
        <li class="nav_group__list"><a href="/web/jp/advertise" class="link--icon_menu">広告掲載</a></li>
        <li class="nav_group__list"><a href="/web/jp/donations" class="link--icon_menu">寄付のお願い</a></li>
        <li class="nav_group__list"><a href="/web/jp/publications" class="link--icon_menu">広報出版物</a></li>
        <li class="nav_group__list header__none"><a href="/web/jp/privacypolicy" class="link--icon_menu">プライバシーポリシー</a></li>
      </ul>
    </div>
  </nav>
</header>
```
*/
footer .footer_area {
  background-color: #711c79;
  color: #ffffff;
  padding: 30px 0; }

footer .footer__nav {
  display: none; }

footer .footer__siteaddress {
  text-align: center;
  width: 90%;
  margin: 0 auto; }
  footer .footer__siteaddress img {
    max-width: 240px; }
  footer .footer__siteaddress .footer__siteaddress__address {
    padding-top: 10px;
    font-size: 0.8rem; }

footer .footer__copyright {
  display: block;
  padding: 15px;
  background-color: #46124B;
  text-align: center;
  line-height: 1; }
  footer .footer__copyright small {
    font-size: 0.9rem;
    color: #ffffff; }

footer .btn_top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  display: block;
  background-color: #711c79;
  width: 70px;
  height: 70px;
  border-radius: 35px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  display: none; }
  footer .btn_top::before, footer .btn_top::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 0; }
  footer .btn_top::before {
    top: 30px;
    left: 30px; }
  footer .btn_top::after {
    background-color: #711c79;
    top: 34px;
    left: 30px; }

@media screen and (min-width: 1024px) {
  footer .btn_top {
    bottom: 40px;
    right: 40px; }
  footer .footer_area {
    background-color: #711c79;
    color: #ffffff;
    padding: 60px 0; }
    footer .footer_area a {
      color: #ffffff;
      font-size: 1.2rem; }
    footer .footer_area .footer__nav {
      display: block;
      width: 80%;
      max-width: 1280px;
      margin: 0 auto; }
      footer .footer_area .footer__nav .footer__nav__menu {
        border-top: solid 1px rgba(255, 255, 255, 0.3);
        border-bottom: solid 1px rgba(255, 255, 255, 0.3);
        padding: 20px 20px; }
        footer .footer_area .footer__nav .footer__nav__menu .footernav__menu__group {
          display: -ms-flexbox;
          display: flex;
          -ms-flex-pack: distribute;
              justify-content: space-around; }
          footer .footer_area .footer__nav .footer__nav__menu .footernav__menu__group .footernav__menu__group__list a {
            display: block;
            font-size: 1.2rem; }
      footer .footer_area .footer__nav .footer__nav__link {
        display: -ms-flexbox;
        display: flex;
        padding: 50px 0; }
        footer .footer_area .footer__nav .footer__nav__link .footer__nav__link__column {
          width: 25%; }
          footer .footer_area .footer__nav .footer__nav__link .footer__nav__link__column .footer__nav__link__column__ttl {
            font-size: 1.4rem;
            font-weight: bold;
            display: block;
            padding: 10px 0 10px 15px;
            position: relative; }
            footer .footer_area .footer__nav .footer__nav__link .footer__nav__link__column .footer__nav__link__column__ttl:before {
              display: block;
              position: absolute;
              top: 45%;
              left: 0;
              content: "";
              width: 10px;
              height: 2px;
              background: #fff; }
          footer .footer_area .footer__nav .footer__nav__link .footer__nav__link__column .footer__nav__link__column__list__sub {
            padding-left: 10px; }
          footer .footer_area .footer__nav .footer__nav__link .footer__nav__link__column .footer__nav__link__column__subttl {
            font-size: 1.2rem;
            font-weight: bold;
            display: block;
            padding: 10px 0 10px 10px;
            position: relative; }
            footer .footer_area .footer__nav .footer__nav__link .footer__nav__link__column .footer__nav__link__column__subttl:before {
              display: block;
              position: absolute;
              top: 43%;
              left: 0;
              content: "";
              width: 3px;
              height: 3px;
              border-radius: 50%;
              background: #fff; }
          footer .footer_area .footer__nav .footer__nav__link .footer__nav__link__column .footer__nav__link__column__list {
            padding-left: 10px; }
            footer .footer_area .footer__nav .footer__nav__link .footer__nav__link__column .footer__nav__link__column__list li {
              font-weight: normal;
              font-size: 1.2rem;
              position: relative;
              padding-left: 10px;
              margin-bottom: 3px; }
              footer .footer_area .footer__nav .footer__nav__link .footer__nav__link__column .footer__nav__link__column__list li:before {
                display: block;
                position: absolute;
                top: 7px;
                left: 0;
                content: "";
                width: 5px;
                height: 1px;
                background: #fff; }
              footer .footer_area .footer__nav .footer__nav__link .footer__nav__link__column .footer__nav__link__column__list li:after {
                display: block;
                position: absolute;
                top: 3px;
                left: 0;
                content: "";
                width: 1px;
                height: 5px;
                background: #fff; }
    footer .footer_area .footer__siteaddress {
      text-align: center;
      width: 80%;
      margin: 0 auto; }
      footer .footer_area .footer__siteaddress img {
        max-width: 280px; }
      footer .footer_area .footer__siteaddress .footer__siteaddress__address {
        padding-top: 20px;
        font-size: 1.2rem; } }

/*

---
name: Header

category:
  - common
  - common/footer
---

### デフォルト

```html
<footer>
  <div class="footer_area">
    <div class="footer__nav">
      <div class="footer__nav__menu">
        <ul class="footernav__menu__group">
          <li class="footernav__menu__group__list"><a href="">最新情報</a></li>
          <li class="footernav__menu__group__list"><a href="">外国人のための防災情報</a></li>
          <li class="footernav__menu__group__list"><a href="">メルマガ登録</a></li>
          <li class="footernav__menu__group__list"><a href="">広告掲載</a></li>
          <li class="footernav__menu__group__list"><a href="">寄付のお願い</a></li>
          <li class="footernav__menu__group__list"><a href="">広報出版物</a></li>
          <li class="footernav__menu__group__list"><a href="">プライバシーポリシー</a></li>
        </ul>
      </div>
      <div class="footer__nav__link">
        <div class="footer__nav__link__column">
          <p class="footer__nav__link__column__ttl">トップ</p>
          <p class="footer__nav__link__column__ttl">協会について</p>
          <ul class="footer__nav__link__column__list">
            <li><a href="">京都市国際交流協会について</a></li>
            <li><a href="">インターン受け入れ</a></li>
            <li><a href="">社会見学</a></li>
          </ul>
          <p class="footer__nav__link__column__ttl">会館案内</p>
          <ul class="footer__nav__link__column__list">
            <li><a href="">kokoka京都市国際交流会館について</a></li>
            <li><a href="">図書・資料室</a></li>
            <li><a href="">姉妹都市コーナー・展示室（共催展示スペース）</a></li>
            <li><a href="">レストラン・カフェ</a></li>
            <li><a href="">メッセージコーナー（有料チラシ設置スペース）</a></li>
            <li><a href="">交流ロビー（Wi-Fi）</a></li>
          </ul>
          <p class="footer__nav__link__column__ttl">貸施設</p>
          <ul class="footer__nav__link__column__list">
            <li><a href="">貸出概要</a></li>
            <li><a href="">貸施設紹介</a></li>
            <li><a href="">FAQ</a></li>
          </ul>
        </div>
        <div class="footer__nav__link__column">
          <p class="footer__nav__link__column__ttl">生活ガイド</p>
          <ul class="footer__nav__link__column__list">
            <li><a href="">困ったときに相談できる場所</a></li>
            <li><a href="">緊急・災害のとき</a></li>
            <li><a href="">在留資格</a></li>
            <li><a href="">区役所での手続き</a></li>
            <li><a href="">住まい・引越し</a></li>
            <li><a href="">仕事</a></li>
            <li><a href="">出産・育児・教育</a></li>
            <li><a href="">医療</a></li>
            <li><a href="">銀行・郵便局</a></li>
            <li><a href="">交通</a></li>
            <li><a href="">日本の習慣</a></li>
            <li><a href="">税金・保険</a></li>
            <li><a href="">行政の窓口</a></li>
            <li><a href="">文化・スポーツ施設</a></li>
            <li><a href="">外国のものや情報が得られるところ</a></li>
            <li><a href="">日本語が学べるところ</a></li>
            <li><a href="">外国語が通じる病院・歯科</a></li>
          </ul>
        </div>
        <div class="footer__nav__link__column">
          <p class="footer__nav__link__column__ttl">交流・イベント</p>
          <ul class="footer__nav__link__column__list">
            <li><a href="">イベントカレンダー</a></li>
          </ul>
          <div class="footer__nav__link__column__list__sub">
           <p class="footer__nav__link__column__subttl">一般向け</p>
           <ul class="footer__nav__link__column__list">
            <li><a href="">タブサポ<br>（京都市国際文化市民交流促進サポート事業）</a></li>
            <li><a href="">kokokaオープンデイ</a></li>
            <li><a href="">ボランティア活動</a></li>
          </ul>
          <p class="footer__nav__link__column__subttl">企業・団体向け</p>
          <ul class="footer__nav__link__column__list">
            <li><a href="">企業等コラボ事業</a></li>
            <li><a href="">共催事業・名義後援</a></li>
            <li><a href="">kokoka国際交流団体ねっと</a></li>
          </ul>
          <p class="footer__nav__link__column__subttl">子ども向け</p>
          <ul class="footer__nav__link__column__list">
            <li><a href="">ホッとチャット</a></li>
            <li><a href="">koko kids</a></li>
          </ul>
          <p class="footer__nav__link__column__subttl">留学生・学校向け</p>
          <ul class="footer__nav__link__column__list">
            <li><a href="">PICNIK（国際理解プログラム）</a></li>
            <li><a href="">留学生交流ファミリー</a></li>
            <li><a href="">国際理解教材貸出</a></li>
          </ul>
        </div>
      </div>
      <div class="footer__nav__link__column">
        <p class="footer__nav__link__column__ttl">講座</p>
        <ul class="footer__nav__link__column__list">
          <li><a href="">ボランティアによる日本語クラス</a></li>
          <li><a href="">やさしい日本語</a></li>
          <li><a href="">市内日本語教室</a></li>
          <li><a href="">KYOTO・ふれあい講座「茶道」</a></li>
          <li><a href="">コリアンサロン「めあり」ハングル塾</a></li>
          <li><a href="">文化紹介講座「COSMOS」</a></li>
        </ul>
        <p class="footer__nav__link__column__ttl">相談・サポート</p>
        <ul class="footer__nav__link__column__list">
          <li><a href="">行政通訳・相談</a></li>
          <li><a href="">医療通訳派遣</a></li>
          <li><a href="">専門家による相談（法律・ビザ・税金・社会保険・年金・労働・メンタルヘルス）</a></li>
          <li><a href="">きょうと多文化支援ネットワーク</a></li>
          <li><a href="">張鳳俊奨学金</a></li>
          <li><a href="">生活相談・観光情報</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer__siteaddress">
    <img src="/web/assets/images/common/logo_footer.png">
    <div class="footer__siteaddress__address">
      <p>〒606-8536　京都市左京区粟田口鳥居町2番地の1<br>
        TEL.075-752-3010（代表）／TEL.075-752-3511（事業課）／TEL.075-752-1187（図書・資料室）／TEL.075-752-1166（行政通訳・相談）　FAX.075-752-3510<br>
      開館時間 　9:00am - 9:00pm　休館日／月曜日（ただし月曜日が祝日の場合は、その翌日の平日）、年末年始</p>
    </div>
  </div>
</div>
<p class="footer__copyright"><small>Copyright&copy; KYOTO CITY INTERNATIONAL FOUNDATION All rights reserved</small></p>
</footer>
```
*/
@media screen and (min-width: 768px) {
  #panel-btn,
  .btn_lang_sp,
  .menu_lang_pc {
    display: none; }
  .site-header {
    overflow: visible;
    max-width: 1280px;
    min-width: 1024px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto 20px;
    position: static; }
    .site-header .site-header__pc {
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      padding-top: 20px;
      -ms-flex-align: center;
          align-items: center;
      margin-bottom: 10px; }
      .site-header .site-header__pc h1 {
        width: 350px;
        height: auto;
        line-height: 0;
        top: 0;
        left: 0;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        padding-left: 0;
        max-width: 350px; }
        .site-header .site-header__pc h1 a {
          width: 100%; }
        .site-header .site-header__pc h1 img {
          width: 100%; }
      .site-header .site-header__pc .nav_link {
        display: -ms-flexbox;
        display: flex; }
  .site-header__menu {
    display: block;
    width: 100%; }
    .site-header__menu .site-header__menu__list {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
          justify-content: space-between;
      -ms-flex-align: center;
          align-items: center;
      padding: 30px 5px;
      transition: all 0.3s; }
      .site-header__menu .site-header__menu__list .site-header__menu__list__nav {
        -ms-flex-positive: 1;
            flex-grow: 1;
        text-align: center;
        line-height: 1;
        padding: 10px 0; }
        .site-header__menu .site-header__menu__list .site-header__menu__list__nav a {
          color: #000000;
          font-size: 1.4rem;
          display: block;
          border-left: solid 1px #AEAEAE; }
          .site-header__menu .site-header__menu__list .site-header__menu__list__nav a:last-child {
            border-right: solid 1px #AEAEAE; }
      .site-header__menu .site-header__menu__list .menu_active {
        border-bottom: solid 2px #671B6E;
        transition: all 0.3s; }
  #panel {
    position: static;
    display: block;
    background-color: transparent;
    height: 3em;
    padding: 0;
    overflow: visible;
    margin-top: 0; }
    #panel .gnavi {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      width: 100%;
      height: 100%;
      padding: 0; }
      #panel .gnavi .gnavi__list {
        -ms-flex-positive: 1;
            flex-grow: 1;
        text-align: center;
        padding: 0;
        position: static;
        line-height: 1; }
        #panel .gnavi .gnavi__list.active .menu__link {
          color: #711c79; }
        #panel .gnavi .gnavi__list .menu__link {
          color: #000;
          font-size: 1.4rem;
          position: relative;
          display: block;
          padding: 1em 0; }
          #panel .gnavi .gnavi__list .menu__link:hover {
            color: #711c79;
            opacity: 1; }
          #panel .gnavi .gnavi__list .menu__link:before {
            content: "";
            width: 1px;
            height: 10px;
            background-color: #AEAEAE;
            position: absolute;
            top: 38%;
            left: 0; }
        #panel .gnavi .gnavi__list:last-child .menu__link:after {
          content: "";
          width: 1px;
          height: 10px;
          background-color: #AEAEAE;
          position: absolute;
          top: 38%;
          right: 0; }
        #panel .gnavi .gnavi__list .gnavi__list__icon {
          display: none; }
        #panel .gnavi .gnavi__list .gnavi__list__sub {
          display: none;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
          position: absolute;
          top: 120px;
          left: 0;
          z-index: 3;
          width: 100vw;
          text-align: left;
          background-color: #711c79; }
          #panel .gnavi .gnavi__list .gnavi__list__sub.active {
            display: -ms-flexbox;
            display: flex;
            opacity: 1;
            height: auto; }
          #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__wrapping {
            display: -ms-flexbox;
            display: flex;
            width: 1280px;
            margin: 0 auto;
            padding: 2em 0; }
          #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__menu__list {
            display: -ms-inline-flexbox;
            display: inline-flex;
            flex-wrap: wrap;
            -ms-flex-wrap: wrap; }
          #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__menu {
            display: -ms-flexbox;
            display: flex; }
          #panel .gnavi .gnavi__list .gnavi__list__sub .sub_menu_list {
            position: relative; }
            #panel .gnavi .gnavi__list .gnavi__list__sub .sub_menu_list.gnavi__list__sub__item:before {
              content: none; }
            #panel .gnavi .gnavi__list .gnavi__list__sub .sub_menu_list.gnavi__list__sub__item:after {
              content: none; }
          #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__ttl {
            text-align: left;
            margin-left: 0;
            padding: 0;
            line-height: 1;
            margin-bottom: 1.4em;
            font-size: 1.2rem;
            color: #fff;
            list-style: none;
            opacity: 0.7; }
          #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__item {
            line-height: 1.2;
            border-right: solid 1px rgba(255, 255, 255, 0.3);
            padding: 0 20px;
            margin-bottom: 1em;
            width: auto; }
            #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__item a {
              line-height: 1;
              font-size: 1.4rem;
              color: #ffffff;
              display: block;
              font-weight: normal; }
            #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__item::before {
              content: none; }
            #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__item::after {
              content: none; }
            #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__item .gnavi__list__sub__menu__list {
              display: block; }
              #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__item .gnavi__list__sub__menu__list .gnavi__list__sub__item {
                border: none;
                margin-left: 0;
                margin-right: 0;
                padding-left: 0;
                padding-right: 0; }
    #panel .nav_link {
      display: none; }
  .nav_link {
    width: 80%;
    height: 50px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    padding: 0; }
    .nav_link .nav_link__menu {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-pack: end;
          justify-content: flex-end;
      position: relative; }
      .nav_link .nav_link__menu .btn--head {
        margin: 0; }
      .nav_link .nav_link__menu .site-header__group__lng {
        display: block;
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: underline;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
        margin-right: 15px;
        color: #711c79; }
        .nav_link .nav_link__menu .site-header__group__lng:before {
          content: '';
          width: 14px;
          height: 14px;
          display: inline-block;
          background: url(../images/common/icon_language.png) no-repeat bottom center;
          background-size: contain;
          margin-right: 5px; }
      .nav_link .nav_link__menu .btn--head {
        margin-right: 15px;
        max-height: 30px; }
      .nav_link .nav_link__menu .inverted {
        margin-right: 0; }
    .nav_link .nav_group {
      display: -ms-flexbox;
      display: flex;
      padding: 0;
      margin: 0;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-pack: end;
          justify-content: flex-end; }
      .nav_link .nav_group .nav_group__list {
        font-size: 1.2rem;
        padding-right: 15px; }
        .nav_link .nav_group .nav_group__list .link--icon_menu {
          color: #333333;
          font-size: 1.2rem;
          padding: 0;
          font-weight: bold; }
          .nav_link .nav_group .nav_group__list .link--icon_menu:before {
            content: none; }
        .nav_link .nav_group .nav_group__list.header__none {
          display: none; }
    .nav_link .menu_lang_pc {
      position: absolute;
      top: 40px;
      left: 0;
      z-index: 999; }
      .nav_link .menu_lang_pc ul {
        background-color: #711c79; }
        .nav_link .menu_lang_pc ul li {
          text-align: center;
          font-size: 1.2rem; }
          .nav_link .menu_lang_pc ul li a {
            color: #fff;
            padding: 0.5em 2em;
            display: block; }
          .nav_link .menu_lang_pc ul li + li {
            border-top: 1px solid #9c61a2; }
  footer {
    min-width: 1240px; } }

.hero {
  position: relative; }

.hero__slider {
  position: relative;
  z-index: 1; }

.hero__txt {
  width: 85%;
  margin: 20px auto;
  position: relative; }

.hero__txt__lead {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5em;
  line-height: 1.6; }

.hero__txt__body {
  line-height: 1.8;
  font-size: 1.2rem; }

.hero__lead {
  font-size: 2.4rem;
  font-weight: bold; }

.circle_banner {
  width: 25%;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2; }

.sponsor {
  width: 85%;
  margin: 30px auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: center;
      align-items: center; }
  .sponsor .sponsor_bnr {
    width: 49%;
    display: block;
    margin-bottom: 2%; }
    .sponsor .sponsor_bnr:nth-child(odd) {
      margin-right: 2%; }
  .sponsor .sponsor_txt {
    width: 49%;
    text-align: center; }
    .sponsor .sponsor_txt a {
      display: block; }

.top_news {
  background-color: #f5f5f5;
  padding: 60px 0; }

.top_service {
  background-color: #fff;
  padding: 60px 0; }

.top_service__slider .slick-slide {
  margin: 20px 10px; }

.top_service__slider .card_service {
  display: block; }

.top_service__slider .slick-dots li {
  width: 10px;
  height: 10px; }

.top_service__slider .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  background-color: #ccc;
  border-radius: 5px; }

.top_service__slider .slick-dots li.slick-active button {
  background-color: #711c79; }

.tile_big {
  margin-bottom: 40px; }

.title_sub {
  margin-bottom: 15px; }

.top_service__bottom {
  text-align: center;
  margin-top: 80px; }
  .top_service__bottom p {
    font-weight: bold; }
  .top_service__bottom .btn--purple {
    margin: 20px auto 0; }

.top_access {
  padding: 40px 0;
  max-width: 1280px;
  margin: 0 auto; }
  .top_access .top_access__data {
    text-align: center;
    font-size: 1rem;
    margin-top: 2em; }
  .top_access .top_access__data__ad {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0.6em; }

.top_contents {
  max-width: 1980px;
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.top_bnr {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto; }

main {
  padding: 0 0 40px;
  display: block; }

main.main_index {
  background-color: #f5f5f5; }

.index_area {
  width: 100%; }

.page_introduction {
  line-height: 1.8; }

.page_content {
  border-top: 1px dotted #ccc;
  margin-top: 40px; }

.page_content__inner {
  padding-top: 40px; }
  .page_content__inner p {
    margin-top: 5px; }

.page_content__inner__box {
  margin-top: 10px; }

.page__article__content__wrap ul {
  padding-left: 1em;
  text-indent: -1em; }
  .page__article__content__wrap ul li {
    padding: 5px 0; }

.page_content__li li {
  padding-left: 1em;
  text-indent: -1em; }

.page_content__li li + li {
  margin-top: 10px; }

.center_btn a {
  margin: 20px auto; }

.left_btn a {
  margin: 20px 0; }

.flex_base {
  display: -ms-flexbox;
  display: flex; }

.flex_img {
  width: 64px;
  margin-right: 20px;
  margin-top: 10px;
  -ms-flex-negative: 0;
      flex-shrink: 0; }
  .flex_img img {
    width: 100%;
    height: auto; }

.flex_img_l {
  width: 49%;
  margin-right: 2%;
  margin-top: 10px;
  -ms-flex-negative: 0;
      flex-shrink: 0; }
  .flex_img_l img {
    width: 100%;
    height: auto; }

@media screen and (min-width: 768px) {
  .index_area {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    display: -ms-inline-flexbox;
    display: inline-flex; }
  .page_introduction {
    text-align: center;
    line-height: 1.8; }
  main {
    padding: 0 0 150px; }
  .page_content {
    margin-top: 80px; }
  .page_content__inner {
    margin-top: 80px; }
    .page_content__inner p {
      margin-top: 10px; }
  .page_content__inner__box {
    margin-top: 20px; }
  .center_btn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center; }
    .center_btn a {
      margin: 40px 20px 40px 0; }
      .center_btn a:nth-last-of-type(1) {
        margin-right: 0; }
  .left_btn {
    display: -ms-flexbox;
    display: flex; }
    .left_btn a {
      margin: 40px 20px 40px 0; }
      .left_btn a:nth-last-of-type(1) {
        margin-right: 0; }
  .flex_img {
    width: 130px;
    margin-right: 20px;
    margin-top: 10px; }
  .flex_img_l {
    width: 30%;
    margin-right: 20px; } }

/*


---
name: Common

category:
  - page
  - page/common
---


### ページ構成（大）
* 各ページに1回のみ

```html
<main>
  <div class="l-centering">
    <h2 class="title_page">ページタイトル</h2>
    <p class="page_introduction">市民の国際交流の拠点として1989年にオープンした京都市国際交流会館。<br>人々が出会い、語り合い、交流を深めることをねらいに、今日まで様々な取り組みを進め、 利用者も500万人を超えています。</p>
    <div class="mainvisual">
      <img src="/web/assets/images/donations/kifu01.jpg" alt="">
    </div>
    <div class="page_content">

    </div>
  </div>
</main>
```


### ページ構成（中）
* サブタイトルとコンテンツ追加

```html
<div class="page_content__inner">
  <h2 class="title_page_s">サブタイトル</h2>
  <p>ここにテキストを入れることができます。ここにテキストを入れることができます。ここにテキストを入れることができます。ここにテキストを入れることができます。</p>
</div>
<div class="page_content__inner">
  <h2 class="title_page_s">サブタイトル</h2>
  <p>ここにテキストを入れることができます。ここにテキストを入れることができます。ここにテキストを入れることができます。ここにテキストを入れることができます。</p>
</div>
```

### 下層ページテキスト
```html
<div class="page_content__inner">
  <p>ここにテキストを入れることができます。ここにテキストを入れることができます。ここにテキストを入れることができます。ここにテキストを入れることができます。</p>
  <p>ここにテキストを入れることができます。ここにテキストを入れることができます。ここにテキストを入れることができます。ここにテキストを入れることができます。</p>
</div>
```

### 下層ページリスト
```html
<ul class="page_content__li">
  <li>リスト形式</li>
  <li>リスト形式</li>
  <li>リスト形式</li>
</ul>
```

### レイアウトサンプル
```html
<div class="page_content">
  <div class="page_content__inner">
    <h2 class="title_page_s">タイトル中</h2>
    <div class="page_content__inner__box">
      <h3 class="title_page_ss">タイトル小</h3>
      <p>テキスト</p>
    </div>
    <div class="page_content__inner__box">
      <h3 class="title_page_ss">タイトル小</h3>
      <p>テキスト</p>
    </div>
    <div class="page_content__inner__box">
      <h3 class="title_page_ss">タイトル小</h3>
      <p>テキスト</p>
    </div>
  </div>
  <div class="page_content__inner">
    <h2 class="title_page_s">タイトル中</h2>
    <table class="table_simple">
      <tr><th>テーブル見出し</th><td>テーブル内容</td></tr>
      <tr><th>テーブル見出し</th><td>テーブル内容</td></tr>
      <tr><th>テーブル見出し</th><td>テーブル内容</td></tr>
      <tr><th>テーブル見出し</th><td>テーブル内容</td></tr>
      <tr><th>テーブル見出し</th><td>テーブル内容</td></tr>
    </table>
  </div>
  <div class="page_content__inner">
    <h2 class="title_page_s">タイトル中</h2>
    <div class="page_content__inner__box">
      <h3 class="title_page_ss">タイトル（小）</h3>
      <p>テキスト</p>
      <p>テキスト</p>
    </div>
    <div class="page_content__inner__box">
      <h3 class="title_page_ss">タイトル（小）</h3>
      <p>テキスト</p>
      <p>テキスト</p>
    </div>
  </div>
  <div class="page_content__inner">
    <h2 class="title_page_s">タイトル（中）</h2>
    <p>テキスト</p>
  </div>
  <div class="page_content__inner">
    <h2 class="title_page_s">タイトル（中）</h2>
    <div class="flex_base">
      <div  class="flex_img">
        <img src="/web/assets/images/foundation/shicho.jpg">
      </div>
      <div class="">
        <p class="title_page_sss">京都市長 門川大作</p>
        <p>「全世界のひとびとが，人種，宗教，社会体制の相違を超えて，平和のうちに，ここに自由につどい，自由な文化交流を行う都市」。 京都市が１９７８年に世界文化自由都市宣言で高らかに掲げた，このまちの理想像の実現に向けて，１９８９年，市民レベルの国際交 流の拠点として京都市国際交流会館を開館しました。<br>京都市国際交流会館では，現在，管理運営を担う（公財）京都市国際交流協会により，多言語での情報提供や専門相談，留学生の方や ボランティア活動の支援など，多岐にわたる事業を展開しています。<br>
          京都市には現在，人口の約３％に当たるおよそ４万人もの外国籍の方々が暮らしておられます。また，近年海外からの観光客の方が増え， 加えて今後外国人労働者の方の受入れも増加すると見込まれます。このような中，国際理解を更に深めることの意義はますます大きくなる ものと思います。<br>
        我が国の都として，千年以上の間国内外からたくさんのお客様を迎えてきた京都。そのまちの歴史と伝統を受け継ぎながら，本市として も協会の皆様をはじめ多くの市民，関係者の皆様と共に，国際交流の輪を更に広げる取組に力を尽くしてまいります。皆様の御支援，御協 力をお願い申し上げます。</p>
      </div>
    </div>
    <div class="flex_base">
      <div  class="flex_img_l">
        <img src="/web/assets/images/donations/kifu01.jpg" alt="">
      </div>
      <div class="">
        <p>「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。「この文章はダミーです。</p>
      </div>
    </div>
  </div>
</div>
```

### googleマップ（Youtubeなども使用可）
```html
<div class="iframeWrap">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3267.8354836536255!2d135.78548241524072!3d35.010823180356134!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x600108de2db4d293%3A0x5d95201632b7c49b!2za29rb2th5Lqs6YO95biC5Zu96Zqb5Lqk5rWB5Lya6aSo!5e0!3m2!1sja!2sjp!4v1543824955085" width="600" height="450" style="border:0"></iframe>
</div>
<div class="iframeWrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/NK5XC1lZUxU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
```

*/
#sidemenu {
  margin-bottom: 20px; }
  #sidemenu dd {
    width: 100%; }

.dl_b {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: end;
      align-items: flex-end; }
  .dl_b .dt_b {
    font-size: 1rem;
    line-height: 1; }
    .dl_b .dt_b:nth-child(1) {
      position: relative;
      padding-right: 1.2em; }
      .dl_b .dt_b:nth-child(1)::before {
        content: '>';
        color: #711c79;
        position: absolute;
        right: 0;
        top: 0;
        top: -0.1em;
        font-weight: bold; }
    .dl_b .dt_b:nth-child(2) {
      font-size: 1.4rem;
      margin: 0 15px; }
      .dl_b .dt_b:nth-child(2) a {
        color: #333; }
    .dl_b .dt_b:nth-child(3) {
      position: relative;
      padding-left: 1.2em; }
      .dl_b .dt_b:nth-child(3)::after {
        content: '<';
        color: #711c79;
        position: absolute;
        left: 0;
        top: -0.1em;
        font-weight: bold; }

@media screen and (min-width: 768px) {
  .dl_b .dt_b {
    font-size: 1.4rem; }
    .dl_b .dt_b:nth-child(1) {
      padding-left: 1.4em; }
    .dl_b .dt_b:nth-child(2) {
      font-size: 2.8rem;
      margin: 0 10px; }
    .dl_b .dt_b:nth-child(3) {
      padding-right: 1.4em; } }

.facility_list {
  margin-top: 40px; }
  .facility_list .facility_list__box {
    width: 100%;
    margin-bottom: 10%; }
    .facility_list .facility_list__box img {
      margin-bottom: 1em; }
    .facility_list .facility_list__box .facility_list__box__ttl {
      font-weight: bold;
      font-size: 1.4rem;
      margin-bottom: 0.2em; }
    .facility_list .facility_list__box .facility_list__box__txt {
      font-size: 1rem;
      margin-bottom: 0.5em; }

.facility_price th,
.facility_price td {
  padding: 3px;
  font-size: 1rem;
  vertical-align: middle; }

.facility_price th {
  background-color: #711c79;
  color: #fff;
  border: 1px solid #A65CA6;
  text-align: center; }

.facility_price td {
  background-color: #f5f5f5;
  color: #fff;
  border: 1px solid #e5e5e5;
  color: #333; }
  .facility_price td.price {
    text-align: right; }

.gallery {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .gallery .gallery__box {
    width: 49%;
    margin: 0  2% 2% 0; }
    .gallery .gallery__box:nth-child(2n) {
      margin-right: 0; }

@media screen and (min-width: 768px) {
  .facility_list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: 80px; }
    .facility_list .facility_list__box {
      width: 32%;
      margin: 0  2% 2% 0; }
      .facility_list .facility_list__box:nth-child(3n) {
        margin-right: 0; }
      .facility_list .facility_list__box img {
        margin-bottom: 1em;
        width: 100%;
        height: auto; }
      .facility_list .facility_list__box .facility_list__box__ttl {
        font-size: 1.8rem;
        margin-bottom: 0.2em; }
      .facility_list .facility_list__box .facility_list__box__txt {
        font-size: 1.2rem; }
  .facility_price th,
  .facility_price td {
    padding: 5px 10px;
    font-size: 1.4rem;
    font-weight: normal; }
  .gallery .gallery__box {
    width: 23.5%;
    margin: 0  2% 2% 0; }
    .gallery .gallery__box:nth-child(2n) {
      margin-right: 2%; }
    .gallery .gallery__box:nth-child(4n) {
      margin-right: 0; }
    .gallery .gallery__box img {
      margin-bottom: 1em;
      width: 100%;
      height: auto; } }

/*


---
name: Facility

category:
  - page
  - page/facility
---



### 施設一覧
```html
<div class="facility_list">
  <div class="facility_list__box">
    <img src="/web/assets/images/facility/facility_th01.jpg">
    <h4 class="facility_list__box__ttl">イベントホール</h4>
    <p class="facility_list__box__txt">発表会や各種ステージ、講演会や学会、展示会、パーティなど、幅広い用途にお使いいただけます。<br>（シアター席221席、スクール130席／190㎡）</p>
    <a href="#">詳しく見る</a>
  </div>
  <div class="facility_list__box">
    <img src="/web/assets/images/facility/facility_th01.jpg">
    <h4 class="facility_list__box__ttl">イベントホール</h4>
    <p class="facility_list__box__txt">発表会や各種ステージ、講演会や学会、展示会、パーティなど、幅広い用途にお使いいただけます。<br>（シアター席221席、スクール130席／190㎡）</p>
    <a href="#">詳しく見る</a>
  </div>
  <div class="facility_list__box">
    <img src="/web/assets/images/facility/facility_th01.jpg">
    <h4 class="facility_list__box__ttl">イベントホール</h4>
    <p class="facility_list__box__txt">発表会や各種ステージ、講演会や学会、展示会、パーティなど、幅広い用途にお使いいただけます。<br>（シアター席221席、スクール130席／190㎡）</p>
    <a href="#">詳しく見る</a>
  </div>
</div>
```
*/
.materials__list {
  background-color: #f5f5f5;
  padding: 20px 0px 10px 10px;
  border-radius: 5px;
  border: 1px solid #e5e5e5; }
  .materials__list li {
    display: inline-block;
    border-right: 1px solid #e5e5e5;
    padding: 0 10px;
    line-height: 1;
    margin-bottom: 10px; }

.table_materials {
  margin-bottom: 30px;
  width: 100%; }
  .table_materials tr:nth-child(even) td {
    background-color: #f5f5f5; }
  .table_materials th,
  .table_materials td {
    padding: 2px 3px;
    font-size: 1rem;
    vertical-align: middle; }
  .table_materials th {
    background-color: #711c79;
    color: #fff;
    width: 25%;
    border: 1px solid #A65CA6; }
  .table_materials td {
    border: 1px solid #e5e5e5; }
    .table_materials td:nth-child(3) {
      width: 20%; }

@media screen and (min-width: 768px) {
  .materials__list {
    padding: 30px 15px 20px 20px; }
    .materials__list li {
      padding: 0 15px;
      line-height: 1;
      margin-bottom: 10px; }
  .table_materials {
    margin-bottom: 30px; }
    .table_materials th,
    .table_materials td {
      padding: 4px 7px;
      font-size: 1.4rem; }
    .table_materials th {
      background-color: #711c79;
      color: #fff;
      width: 15%;
      border: 1px solid #A65CA6; }
    .table_materials td {
      border: 1px solid #e5e5e5; }
      .table_materials td:nth-child(3) {
        width: 10%; } }

.symbol_img {
  width: 64px;
  margin-right: 20px;
  margin-top: 10px;
  -ms-flex-negative: 0;
      flex-shrink: 0; }
  .symbol_img img {
    width: 100%;
    height: auto; }

.chara_img {
  width: 64px;
  margin-right: 20px;
  margin-top: 10px;
  -ms-flex-negative: 0;
      flex-shrink: 0; }
  .chara_img img {
    width: 100%;
    height: auto; }

@media screen and (min-width: 768px) {
  .symbol_img {
    width: 130px;
    margin-right: 20px;
    margin-top: 10px; }
  .chara_img {
    width: 130px;
    margin-right: 20px;
    margin-top: 10px; } }

@media screen and (min-width: 768px) {
  .hero {
    width: 100%;
    max-width: 1920px;
    min-width: 1240px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    -ms-flex-align: center;
        align-items: center; }
  .hero__slider {
    width: 70%;
    position: relative; }
    .hero__slider .hero__slider__item {
      width: 100%; }
      .hero__slider .hero__slider__item img {
        width: 100%; }
    .hero__slider:after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      z-index: 4;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); }
  .hero__txt {
    width: 30%;
    margin: 0;
    z-index: 2;
    text-align: right;
    right: -7vw; }
  .hero__txt__lead {
    font-size: 2.2vw;
    text-align: left; } }
  @media screen and (min-width: 768px) and (min-width: 1920px) {
    .hero__txt__lead {
      font-size: 4rem; } }

@media screen and (min-width: 768px) {
  .hero__txt__body {
    line-height: 2.2;
    font-size: 1.4rem;
    text-align: left;
    width: 70%;
    max-width: 340px; }
  .circle_banner {
    width: 250px;
    top: -20px;
    right: 30px;
    z-index: 2; }
    .circle_banner img {
      width: 100%; }
  .sponsor_area {
    width: 100%;
    max-width: 1920px;
    min-width: 1240px;
    margin: 0 auto;
    text-align: right; }
  .sponsor {
    display: inline-block;
    width: 70%;
    text-align: left;
    margin-top: 0px;
    letter-spacing: -.4em;
    padding: 1% 1% 0 0; }
    .sponsor .sponsor_bnr {
      display: inline-block;
      margin-right: 0;
      letter-spacing: normal;
      width: 32.6%;
      margin-left: 1%; }
      .sponsor .sponsor_bnr:nth-child(odd) {
        margin-right: 0; }
      .sponsor .sponsor_bnr:nth-child(1) {
        margin-left: 0; }
      .sponsor .sponsor_bnr img {
        width: 100%; }
    .sponsor .sponsor_txt {
      width: auto;
      text-align: right;
      letter-spacing: normal;
      padding-right: 1%; }
      .sponsor .sponsor_txt a {
        display: inline-block; }
  .top_news {
    background-color: #f5f5f5;
    padding: 120px 0;
    min-width: 1240px; }
  .top_service {
    padding: 120px 0; }
  .top_service__bottom {
    text-align: center;
    margin-top: 30px; }
    .top_service__bottom .btn--purple {
      margin: 30px auto 0; }
  .top_service__slider {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
        justify-content: center;
    max-width: 1440px;
    min-width: 1240px;
    width: 94%;
    margin: 60px auto 0; }
    .top_service__slider .card_service {
      margin-right: 22px;
      margin-bottom: 25px; }
      .top_service__slider .card_service:nth-child(4) {
        margin-right: 0px; }
  .tile_big {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto 60px; }
  .tile_colum2 {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto 40px; }
  .top_contents {
    min-width: 1240px; }
  .top_access {
    padding: 120px 0;
    width: 100%;
    max-width: 1280px; }
    .top_access .iframeWrap {
      margin-top: 60px; }
    .top_access .top_access__data {
      text-align: center;
      font-size: 1.4rem;
      margin-top: 4em; }
    .top_access .top_access__data__ad {
      font-weight: bold;
      font-size: 1.8rem;
      margin-bottom: 0.4em; } }

body.en .menu_lang_sp ul li,
body.en #panel ul li,
body.es .menu_lang_sp ul li,
body.es #panel ul li {
  letter-spacing: normal; }

body.en #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__item a,
body.es #panel .gnavi .gnavi__list .gnavi__list__sub .gnavi__list__sub__item a {
  line-height: 1.2; }