@charset "UTF-8";
html { overflow-y: scroll; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

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

fieldset, img { border: 0; }

img { vertical-align: bottom; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

li { list-style: none; }

caption, th { text-align: left; }

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

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

abbr, acronym { border: 0; font-variant: normal; }

input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }

/*to enable resizing for IE*/
input, textarea, select { *font-size: 100%; }

/*because legend doesn't inherit in IE */
legend { color: #000; }

del, ins { text-decoration: none; }

.btn_style { max-width: 175px; margin: auto; }
.btn_style a { display: block; text-decoration: none; text-align: center; color: #004898; height: 32px; width: 100%; position: relative; font-size: 11px; transition: all 0.4s; }
.btn_style a span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.btn_style a::before, .btn_style a::after { content: ""; position: absolute; top: 0; left: 0; width: 175px; height: 32px; box-sizing: border-box; border: 1px solid #004898; transition: all 0.4s; }
.btn_style a::before { transform: translate(-2px, -2px); }
.btn_style a::after { transform: translate(2px, 2px); }
.btn_style a:hover { background-color: #004898; color: #fff; }
.btn_style a:hover::before, .btn_style a:hover::after { transform: translate(0px, 0px); }

/*------------------------------
main
-------------------------------*/
.main { background: #000; position: relative; width: 100%; height: 100vh; max-height: 1000px; }
.main .txt { position: absolute; width: 100%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; z-index: 5; }
.main .txt .name { color: #fff; }
@media screen and (max-width: 768px) { .main .txt img { height: 43px; width: auto; } }
@media screen and (max-width: 480px) { .main .txt img { height: 30px; width: auto; } }
@media screen and (max-width: 360px) { .main .txt img { height: 22px; width: auto; } }

.main { box-sizing: border-box; overflow: hidden; position: relative; }
.main::before { border: 10px solid #fff; content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 5; }
.main .slide01 { margin-bottom: 0 !important; }
.main .slide01 .my-dots01 { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 7; }
.main .slide01 .my-dots01 li { display: inline-block; text-indent: -9999px; width: 12px; height: 12px; background: #fff; cursor: pointer; margin: 5px 8px; line-height: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.4); }
.main .slide01 .my-dots01 li.slick-active { background: white; }
.main .slide01 .s-img { width: 100%; height: 100vh; position: relative; }
.main .slide01 .s-img.main01 { background: url("../images/top/main01.jpg") center center; background-size: cover; }
.main .slide01 .s-img.main02 { background: url("../images/top/main02.jpg") center center; background-size: cover; }
.main .slide01 .s-img.main03 { background: url("../images/top/main03.jpg") center center; background-size: cover; }
.main .slide01 .s-img.main04 { background: url("../images/top/main04.jpg") center center; background-size: cover; }
.main .slide01 .s-img.main05 { background: url("../images/top/main05.jpg") center center; background-size: cover; }
@media screen and (max-width: 1000px) { .main { height: 0; padding-bottom: 56.25%; }
  .main .slide01 .s-img { height: 580px; } }
@media screen and (max-width: 500px) { .main .slide01 .s-img { height: 400px; } }
.main .txt .name { font-size: 28px; line-height: 100%; margin-bottom: 20px; }
.main .txt .name span { display: block; }
.main .txt .name .kana { font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; font-weight: 300; transform: rotate(0.001deg); font-size: 16px; }
.main .txt .name img { max-width: 600px; }
.main .txt .ttl { font-size: 36px; }
@media screen and (max-width: 600px) { .main .txt .name { font-size: 18px; }
  .main .txt .ttl { font-size: 26px; } }
.main .txt .name { animation-name: fadetxt1; animation-duration: 1s; }
@keyframes fadetxt1 { 0% { opacity: 0; transform: translate3d(0, -50%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0px, 0); } }
.main .txt .ttl { animation-name: fadetxt2; animation-duration: 1s; }
@keyframes fadetxt2 { 0% { opacity: 0; transform: translate3d(0, 50%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0px, 0); } }
.main .txt .ttl .aw { white-space: nowrap; }

#yt_container { width: 100%; height: 100%; position: relative; overflow: hidden; background-color: #000; }
@media screen and (max-width: 1000px) { #yt_container { position: absolute; top: 0; left: 0; } }
#yt_container iframe { box-sizing: border-box; min-height: 100%; min-width: 100%; width: 177.777777777%; height: 56.25vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#yt_container #player_container { opacity: 1; }
#yt_container #player_container.fadeOut { opacity: 0; }
#yt_container #main_cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0; }
#yt_container #main_cover .main_cover_bg { width: 100%; height: 100%; background-image: url("../images/top/main01.jpg"); background-position: center; background-size: cover; opacity: 0; }
#yt_container #main_cover.fadeIn { opacity: 1; }
#yt_container #main_cover.fadeIn .main_cover_bg { animation: main_cover_motion 1s ease 0s forwards; }
@keyframes main_cover_motion { 0% { opacity: 0; }
  100% { opacity: 1; } }
#intro { background-color: #e9e9e9; text-align: center; padding-top: 5rem; }
#intro .logo_l { margin-bottom: 2rem; }
#intro h3, #intro p { font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; font-weight: 300; transform: rotate(0.001deg); letter-spacing: 0.3rem; }
#intro h3 { margin-bottom: 1rem; font-size: 1.8rem; }
@media screen and (max-width: 768px) { #intro .logo_l img { height: 100px; width: auto; }
  #intro h3 { padding-left: 1.5rem; }
  #intro p { width: 90%; margin: auto; } }

#lld { text-align: center; width: 90%; margin: auto; }
#lld h3 { margin: 2rem auto 1rem; max-width: 411px; }
#lld h3 img { width: 100%; height: auto; }
#lld .copy1 { letter-spacing: 0.2rem; font-size: 0.9rem; }
#lld .copy2 { letter-spacing: 0.1rem; font-size: 0.6rem; margin-bottom: 2rem; }
#lld .copy3 { letter-spacing: 0.2rem; font-size: 0.9rem; margin-bottom: 2rem; }

.contents_link_bg { background: #e9e9e9; padding: 4rem 0; }

.contents_link { position: relative; padding-top: 0 !important; overflow: hidden; /*
.label { font-size: 0.8rem; position: absolute; left: 79%; top: 20px; transform: rotate(90deg); span { display: inline-block; background: $c_gray; padding-left:10px; } @media screen and (max-width: 768px){ color: #fff; }
}
.arrow { position: absolute; top: 36%; left: 82%; transform: rotate(90deg); height: 10px; &::before, &::after { content: ""; position: absolute; top: 6px; bottom: 0; margin: auto; transition: .3s; } &::before { right: 17.5px; width: 120px; height: 1px; background: #000; } &::after { right: 19px; width: 10px; height: 10px; border-top: 1px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); } @media screen and (max-width: 768px){ &::before { background: #fff; } &::after { border-top: 1px solid #fff; } }
}
*/ }
@media screen and (max-width: 768px) { .contents_link { padding-bottom: 3rem !important; } }
.contents_link .bg { overflow: hidden; position: relative; }
.contents_link .bg::before { content: ""; display: block; background: url("../images/top/bg_material.jpg") center center no-repeat; background-size: cover; height: 550px; width: 80%; float: left; }
@media screen and (max-width: 768px) { .contents_link .bg::before { height: 400px; width: 100%; } }
@media screen and (max-width: 480px) { .contents_link .bg::before { height: 270px; } }
.contents_link .label { float: left; margin-left: -100px; margin-top: 115px; }
.contents_link .label .label_base { font-size: 0.8rem; position: relative; width: 240px; transform: rotate(90deg); }
.contents_link .label .label_base::before, .contents_link .label .label_base::after { content: ""; position: absolute; top: 6px; bottom: 0; margin: auto; transition: .3s; }
.contents_link .label .label_base::before { right: 17.5px; width: 120px; height: 1px; background: #000; }
.contents_link .label .label_base::after { right: 19px; width: 10px; height: 10px; border-top: 1px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
@media screen and (max-width: 768px) { .contents_link .label { position: absolute; top: 125px; right: 0px; margin-left: 0; margin-top: 0; margin-right: -100px; }
  .contents_link .label .label_base { color: #fff; }
  .contents_link .label .label_base::before { background: #fff; }
  .contents_link .label .label_base::after { border-top: 1px solid #fff; } }
.contents_link .txtBox { background: #fff; width: 550px; float: right; position: relative; margin-top: -18rem; }
.contents_link .txtBox .inner { padding: 3rem 4.5rem; }
.contents_link .txtBox h5 { color: #aaaaaa; font-size: 1rem; margin-bottom: 0.5rem; }
.contents_link .txtBox h4 { font-size: 1.3rem; margin-bottom: 1rem; }
.contents_link .txtBox p { font-size: 0.9rem; margin-bottom: 1.5rem; }
@media screen and (max-width: 768px) { .contents_link .txtBox { width: 100%; margin-top: 0 !important; } }
@media screen and (max-width: 480px) { .contents_link .txtBox .inner { padding: 3rem 2rem; } }
.contents_link#design .bg::before { background-image: url("../images/top/bg_design.jpg"); float: right; }
.contents_link#design .label { float: right; margin-right: -100px; }
@media screen and (max-width: 768px) { .contents_link#design .label { left: 0px; margin-right: 0; margin-top: 0; margin-left: -100px; } }
.contents_link#design .txtBox { float: left; margin-top: -16rem; }
.contents_link#quality .bg::before { background-image: url("../images/top/bg_quality.jpg"); }
.contents_link#quality .txtBox { margin-top: -16rem; }

#top .slidemain .photo .inner.p01 { background: url("../images/top/slide01.jpg") center center; }
#top .slidemain .photo .inner.p02 { background: url("../images/top/slide02.jpg") center center; }
#top .slidemain .photo .inner.p03 { background: url("../images/top/slide03.jpg") center center; }
#top .slidemain .photo .inner.p04 { background: url("../images/top/slide04.jpg") center center; }
#top .slidemain .photo .inner.p05 { background: url("../images/top/slide05.jpg") center center; }

.contents { padding-top: 50px; /**padding-bottom: 50px;**/ padding-bottom: 80px; overflow: hidden; }
.contents .ttl-en { text-align: center; }

@media screen and (max-width: 600px) { #Service { padding-top: 0; } }
#Service .contents-list { font-size: 0; }
@media screen and (max-width: 600px) { #Service .contents-list { text-align: center; } }
#Service .contents-list li { display: inline-block; vertical-align: top; width: 47.5%; margin-right: 5%; margin-top: 40px; }
#Service .contents-list li:nth-child(2n) { margin-right: 0; }
@media screen and (max-width: 600px) { #Service .contents-list li { width: 100%; margin-right: 0; max-width: 400px; } }
#Service .contents-list li a, #Service .contents-list li .soon { display: block; position: relative; overflow: hidden; border: 1px solid; border-radius: 15px; }
#Service .contents-list li a img, #Service .contents-list li .soon img { width: 100%; height: auto; }
#Service .contents-list li a .photo, #Service .contents-list li .soon .photo { width: 50%; }
#Service .contents-list li a .txt, #Service .contents-list li .soon .txt { position: absolute; top: 0; right: 0; width: 50%; box-sizing: border-box; background: #fff; -webkit-transition: all 0.4s ease; transition: all 0.4s  ease; }
#Service .contents-list li a::after, #Service .contents-list li .soon::after { content: ""; width: 20px; height: 20px; border-bottom: 2px solid; border-right: 2px solid; top: 50%; right: 17%; transform: translateX(-50%) translateY(-50%) rotate(-45deg); position: absolute; z-index: 11; -webkit-transition: all 0.4s ease; transition: all 0.4s  ease; opacity: 0; }
#Service .contents-list li a:hover .photo img, #Service .contents-list li .soon:hover .photo img { opacity: 0.7; }
#Service .contents-list li a:hover .txt, #Service .contents-list li .soon:hover .txt { width: 70%; padding-right: 20%; }
#Service .contents-list li a:hover::after, #Service .contents-list li .soon:hover::after { right: 7%; opacity: 1; }
#Service .contents-list li .soon { opacity: 0.4; }
#Service .contents-list li .soon .photo { background: #000; }
#Service .contents-list li .soon .photo img { opacity: 0.3; }
#Service .contents-list li .soon .soon-txt { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); width: 30%; text-align: center; color: #fff; font-size: 1.5rem; line-height: 150%; }
#Service .contents-list li .soon:hover .photo img { opacity: 0.3; }
#Service .contents-list li .soon:hover .txt { width: 50%; padding-right: 0%; }
#Service .contents-list li .soon:hover::after { opacity: 0; }
#Service .contents-list li.beauty a { border-color: #01a35f; }
#Service .contents-list li.beauty a::after { border-color: #01a35f; }
#Service .contents-list li.beauty a:hover .txt { background: #e8fff5; }
#Service .contents-list li.cafe a { border-color: #3d2b21; }
#Service .contents-list li.cafe a::after { border-color: #3d2b21; }
#Service .contents-list li.cafe a:hover .txt { background: #e8e2de; }
#Service .contents-list li.rental a { border-color: #c2ab7a; }
#Service .contents-list li.rental a::after { border-color: #c2ab7a; }
#Service .contents-list li.rental a:hover .txt { background: #f5f1e9; }
#Service .contents-list li.kominka a { border-color: #ef91a1; }
#Service .contents-list li.kominka a::after { border-color: #ef91a1; }
#Service .contents-list li.kominka a:hover .txt { background: #f9e9ec; }
#Service .contents-list li.kominka .soon { border-color: #ef91a1; }
#Service .contents-list li.kominka .soon::after { border-color: #ef91a1; }
#Service .contents-list li.relax a { border-color: #ff6032; }
#Service .contents-list li.relax a::after { border-color: #ff6032; }
#Service .contents-list li.relax a:hover .txt { background: #ffefea; }

#link::after { content: ''; display: block; clear: both; }
#link #topics { float: left; box-sizing: border-box; border-right: 1px solid #d87831; width: 75%; padding-right: 30px; padding-top: 25px; }
#link #topics ul { margin-top: 25px; font-size: 0; }
#link #topics ul li { display: inline-block; vertical-align: top; width: 31%; margin-right: 3.5%; margin-bottom: 30px; position: relative; overflow: hidden; border-radius: 15px; box-sizing: border-box; border: 1px solid #d87831; }
#link #topics ul li a { text-decoration: none; display: block; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; }
#link #topics ul li a:hover { background: #fff0e5; }
#link #topics ul li:nth-child(3n) { margin-right: 0; }
#link #topics ul li .blg_photo { margin-bottom: 15px; }
#link #topics ul li .blg_photo img { width: 100%; height: auto; }
#link #topics ul li .blg_ttl { text-align: center; font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; font-weight: 300; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; transform: rotate(0.001deg); font-size: 16px; color: #222; font-weight: bold; }
#link #topics ul li .blg_txt { font-size: 13px; font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; font-weight: 300; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; transform: rotate(0.001deg); width: 90%; padding: 10px 5%; color: #444; }
#link #topics .more-btn { margin-top: 30px; margin-bottom: 30px; }
@media screen and (max-width: 600px) { #link #topics ul li { width: 48%; margin-right: 4%; }
  #link #topics ul li:nth-child(3n) { margin-right: 4%; }
  #link #topics ul li:nth-child(2n) { margin-right: 0; }
  #link #topics ul li .blg_ttl { font-size: 14px; }
  #link #topics ul li .blg_txt { font-size: 12px; } }
#link #bana { float: right; box-sizing: border-box; width: 25%; padding-left: 30px; padding-top: 25px; }
#link #bana ul { margin-top: 25px; }
@media screen and (max-width: 768px) { #link #bana, #link #topics { float: none; width: 100%; }
  #link #topics { padding-right: 0; border-bottom: 1px solid #d87831; border-right: none; padding-bottom: 30px; margin-bottom: 30px; margin-top: 0; }
  #link #bana { padding-left: 0; } }

#showroom { background: #fff; }
#showroom.conteiner { padding: 80px 0 80px; background: #e9e9e9; }
@media screen and (max-width: 768px) { #showroom.conteiner { padding: 60px 0 60px; } }
#showroom.conteiner.w { background: #fff; }
#showroom .cont-body { max-width: 1000px; margin: auto; width: 90%; }
#showroom .cont-body .cont-ttl { text-align: center; }
#showroom .cont-body .cont-ttl h3 { font-size: 10px; }
#showroom .cont-body .cont-ttl h3 .en { font-size: 20px; display: block; }
#showroom .cont-body .btn_style { margin-top: 60px; }
#showroom .show-table th, #showroom .show-table td { text-align: left; vertical-align: top; }
#showroom .show-table th { padding-right: 50px; }
#showroom .show-table td { padding-left: 50px; border-left: 1px solid #aaa; font-size: 13px; line-height: 300%; }
#showroom .show-table td b { font-weight: bold; font-size: 15px; display: block; }
@media screen and (max-width: 500px) { #showroom .show-table { width: 100%; }
  #showroom .show-table th, #showroom .show-table td { display: block; }
  #showroom .show-table th { padding-right: 0px; padding-bottom: 25px; }
  #showroom .show-table td { padding-top: 25px; padding-left: 0px; border-left: none; border-top: 1px solid #aaa; } }
#showroom .body::after { content: ''; display: block; clear: both; }
#showroom .body .right, #showroom .body .left { width: 48%; margin-top: 50px; }
#showroom .body .right img, #showroom .body .left img { width: 100%; height: auto; }
#showroom .body .left { float: left; }
#showroom .body .right { float: right; }
@media screen and (max-width: 600px) { #showroom .body .right, #showroom .body .left { float: none; width: 100%; margin-top: 50px; } }

.cont-body { max-width: 1000px; margin: auto; width: 90%; }
.cont-body .cont-ttl { text-align: center; }
.cont-body .cont-ttl h3 { font-size: 10px; }
.cont-body .cont-ttl h3 .en { font-size: 20px; display: block; color: #004898; }
.cont-body .btn_style { margin-top: 60px; }

#info-event2 { background: #e9e9e9; }
#info-event2.conteiner { padding: 80px 0 80px; }
@media screen and (max-width: 768px) { #info-event2.conteiner { padding: 60px 0 60px; } }
#info-event2 .cont-body { width: 90%; max-width: 1000px; }
#info-event2 .cont-body::after { content: ''; display: block; clear: both; }
#info-event2 .cont-body #information { float: left; width: 47%; }
#info-event2 .cont-body #event { float: right; width: 47%; }
#info-event2 .cont-body #information .cont-ttl, #info-event2 .cont-body #event .cont-ttl { text-align: left; }
@media screen and (max-width: 600px) { #info-event2 .cont-body #information { float: none; width: 100%; }
  #info-event2 .cont-body #event { margin-top: 50px; float: none; width: 100%; } }
#info-event2 .ineve-list { max-width: 700px; margin: auto; margin-top: 30px; max-height: 300px; overflow-y: scroll; }
@media screen and (max-width: 600px) { #info-event2 .ineve-list { margin-top: 10px; } }
#info-event2 .ineve-list ul { padding-right: 15px; }
#info-event2 .ineve-list ul li { margin: 30px 0; box-sizing: border-box; border-top: 1px solid #ccc; position: relative; line-height: 160%; font-size: 14px; }
#info-event2 .ineve-list ul li a { color: #222; text-decoration: none; }
#info-event2 .ineve-list ul li a:hover { text-decoration: underline; }
#info-event2 .ineve-list ul li .s-date { font-size: 10px; color: #777; padding-right: 20px; background: #e9e9e9; display: inline-block; line-height: 100%; transform: translateY(-10px); }
#info-event2 .ineve-list ul li .s-copy { line-height: 160%; }
#info-event2 .ineve-list .event-item { padding-right: 25px; position: relative; display: block; }
#info-event2 .ineve-list .event-item::before { content: ""; position: absolute; right: 0; top: 10px; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ccc; }
#info-event2 .ineve-list .event-item::after { content: ""; position: absolute; right: 8px; top: 17px; width: 5px; height: 5px; border-right: 1px solid #777; border-top: 1px solid #777; z-index: 3; transform: rotate(45deg); }
#info-event2 .ineve-list .event-item:hover::before { border: 1px solid #ccc; background: #000; }
#info-event2 .ineve-list .event-item:hover::after { border-right: 1px solid #fff; border-top: 1px solid #fff; }
#info-event2 .ineve-list .event-item .s-img { position: relative; padding: 5px 15px 5px 5px; box-sizing: border-box; }
#info-event2 .ineve-list .event-item .s-img img { width: 90px; height: auto; position: relative; z-index: 0; }
#info-event2 .ineve-list .event-item .s-img .obi { position: absolute; z-index: 1; top: 0px; left: 0px; }
#info-event2 .ineve-list .event-item .s-img .obi img { width: 49px; height: auto; }
#info-event2 .ineve-list .event-item .s-txt .copy01, #info-event2 .ineve-list .event-item .s-txt .copy02 { position: relative; padding-left: 55px; }
#info-event2 .ineve-list .event-item .s-txt .copy01 .ttl, #info-event2 .ineve-list .event-item .s-txt .copy02 .ttl { position: absolute; color: #fff; font-size: 11px; text-align: center; background: #777777; left: 0; top: 0; line-height: 100%; padding: 5px 0; width: 45px; }
#info-event2 .ineve-list .event-item .s-txt .copy01 { font-weight: bold; }
#info-event2 .ineve-list .event-item .s-txt .copy02 { margin-top: 5px; font-size: 12px; }
#info-event2 .ineve-list .event-item .s-txt .copy03 { margin-top: 5px; font-size: 11px; }
@media screen and (max-width: 600px) { #info-event2 .ineve-list .event-item .s-img img { width: 60px; }
  #info-event2 .ineve-list .event-item .s-txt .copy01, #info-event2 .ineve-list .event-item .s-txt .copy02 { padding-left: 45px; }
  #info-event2 .ineve-list .event-item .s-txt .copy01 .ttl, #info-event2 .ineve-list .event-item .s-txt .copy02 .ttl { font-size: 10px; padding: 5px 0; width: 35px; }
  #info-event2 .ineve-list .event-item .s-txt .copy01 { font-size: 12px; }
  #info-event2 .ineve-list .event-item .s-txt .copy02 { font-size: 10px; }
  #info-event2 .ineve-list .event-item .s-txt .copy03 { font-size: 9px; } }
#info-event2 .ineve-list::-webkit-scrollbar { width: 15px; }
#info-event2 .ineve-list::-webkit-scrollbar-track { background: #fff; border: none; border-radius: 15px; box-shadow: inset 0 0 2px #777; }
#info-event2 .ineve-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 15px; box-shadow: none; }
@media screen and (max-width: 600px) { #info-event2 .ineve-list ul li { font-size: 13px; }
  #info-event2 .ineve-list ul li::before { top: 5px; } }

.gmap { position: relative; padding-bottom: 66.66%; height: 0; overflow: hidden; }
.gmap iframe, .gmap object, .gmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#works { background: #e9e9e9; }
#works.conteiner { padding: 80px 0 80px; }
@media screen and (max-width: 768px) { #works.conteiner { padding: 60px 0 60px; } }
#works .works-list { margin: auto; }
#works .works-list ul { font-size: 0; text-align: left; }
#works .works-list ul li { display: inline-block; vertical-align: top; width: 30%; margin-right: 5%; margin-top: 50px; }
#works .works-list ul li:nth-child(3n) { margin-right: 0; }
@media screen and (max-width: 768px) { #works .works-list ul li { width: 47%; margin-right: 6%; }
  #works .works-list ul li:nth-child(3n) { margin-right: 6%; }
  #works .works-list ul li:nth-child(2n) { margin-right: 0; } }
@media screen and (max-width: 550px) { #works .works-list ul li { width: 100%; margin-right: 0%; margin-top: 30px; border-bottom: 1px solid #ddd; padding-bottom: 25px; }
  #works .works-list ul li:nth-child(3n) { margin-right: 0%; } }
#works .works-Box { display: block; text-decoration: none; color: #000; }
#works .works-Box:hover { text-decoration: underline; }
#works .works-Box:hover .works-img img { transform: scale(1.1); }
#works .works-Box:hover .works-img::before { border-top: 45px solid transparent; border-right: 45px solid #000; border-bottom: 45px solid #000; border-left: 45px solid transparent; }
#works .works-Box:hover .works-img::after { right: 22px; bottom: 20px; }
#works .works-img { position: relative; overflow: hidden; }
#works .works-img img { width: 100%; height: auto; position: relative; z-index: 0; -webkit-transition: all 0.3s; transition: all 0.3s; }
#works .works-img::before { content: ""; position: absolute; z-index: 1; width: 0px; height: 0px; right: 0; bottom: 0; border-top: 25px solid transparent; border-right: 25px solid #000; border-bottom: 25px solid #000; border-left: 25px solid transparent; -webkit-transition: all 0.3s; transition: all 0.3s; }
#works .works-img::after { content: ""; position: absolute; z-index: 2; width: 8px; height: 8px; right: 12px; bottom: 10px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(-45deg); -webkit-transition: all 0.3s; transition: all 0.3s; }
#works .works-txt { text-align: left; }
#works .works-txt .ttl { font-size: 14px; line-height: 140%; font-weight: bold; margin-top: 20px; }
#works .works-txt .read { font-size: 11px; line-height: 160%; margin-top: 10px; }

#staff.conteiner { padding: 80px 0 80px; }
@media screen and (max-width: 768px) { #staff.conteiner { padding: 60px 0 60px; } }
#staff .blog-list ul { font-size: 0; padding-top: 20px; }
#staff .blog-list ul li { width: 48%; display: inline-block; vertical-align: top; margin-top: 30px; margin-right: 4%; }
#staff .blog-list ul li:nth-child(2n) { margin-right: 0; }
@media screen and (max-width: 768px) { #staff .blog-list ul li { width: 100%; margin-right: 0%; } }
#staff .blog-Box { display: block; text-decoration: none; color: #000; background: #fff; position: relative; overflow: hidden; border-radius: 10px; min-height: 140px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.15); }
@media screen and (max-width: 600px) { #staff .blog-Box { min-height: inherit; } }
#staff .blog-Box .img-p { position: absolute; top: 50%; transform: translateY(-50%); left: 0; bottom: 0; right: 60%; width: 40%; height: 100%; overflow: hidden; display: table-cell; vertical-align: middle; }
#staff .blog-Box .img-p img { width: 100%; height: auto; }
#staff .blog-Box .blogtxt { box-sizing: border-box; padding: 20px 20px; width: 60%; margin-left: 40%; }
#staff .blog-Box .blogtxt .date { font-weight: bold; font-size: 10px; color: #666; }
#staff .blog-Box .blogtxt .ttl { font-weight: bold; font-size: 16px; margin-top: 10px; }
#staff .blog-Box .blogtxt .name { font-size: 10px; margin-top: 10px; }
@media screen and (max-width: 600px) { #staff .blog-Box .blogtxt { padding: 10px 20px; }
  #staff .blog-Box .blogtxt .date { font-size: 8px; }
  #staff .blog-Box .blogtxt .ttl { font-size: 12px; margin-top: 5px; }
  #staff .blog-Box .blogtxt .name { font-size: 8px; margin-top: 5px; } }