@charset "utf-8";
/* ========================================================
TABATA Co.,ltd.
Base Style Sheet
First Update 2018-02-08
Last  Update 2018-02-08
Creat by Basic Plus Design Inc.
========================================================= */
/*=========================================================
## Font Setting
==========================================================*/
@font-face { font-family: "Highway Gothic Narrow"; src: url("../font/HWYGNRRW.eot?") format("eot"), url("../font/HWYGNRRW.woff") format("woff"), url("../font/HWYGNRRW.ttf") format("truetype"), url("../font/HWYGNRRW.svg#highwaygothicnarrow") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }
/*---------------------------------------------------------
>>> TABLE OF CONTENTS:
-----------------------------------------------------------
# Base
# Layout
		Header / Main
# Component
		Flexbox / Header / Footer
		Titles / Hero / Select Area / Info Area
		Columns(side menu) / List & Table Set
		Box /	Button / Page Top / Page Bottom Navi
# Project
		Map / Coming Soon
# Utility
		SNS / Display / Size / Layout / Typography
		Background / Filter / Border / Tag
		Effect
-----------------------------------------------------------*/
/* =========================================================
#  Base
========================================================== */
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
html { font-size: 62.5%; margin: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); overflow: auto; -webkit-overflow-scrolling: touch; }
body { color: #463d1d; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 13px; font-size: 1.3rem; font-weight: 500; letter-spacing: .05em; line-height: 1.8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: subpixel-antialiased; }
ul, ol, dl { line-height: 1.6; margin-top: 0; padding-left: 0; }
header, footer, main, .pagetop { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; position: relative; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s }
a, a:link, a:visited { color: #463d1d; text-decoration: none; }
p > a, p > span > a { display: inline-block; }
a:hover, a:active, a:focus, a.active { color: #ffe600; }
h1 { font-size: 330%; line-height: 1.4; }
h2 { font-size: 170%; line-height: 1.5; }
h3 { font-size: 140%; line-height: 1.4; }
h4 { font-size: 130%; margin-bottom: -.6em; }
h5 { font-size: 110%; margin-bottom: -.6em; }
img { max-width: 100%; }
hr { border: 0; border-top: 0.1rem solid #f4f5f6; margin: 3.0rem 0; }
table { border-spacing: 0; width: 100%; }
td, th { border-bottom: 0.1rem solid #e1e1e1; padding: 1.2rem 1.5rem; text-align: left; }
td:first-child, th:first-child { padding-left: 0; }
td:last-child, th:last-child { padding-right: 0; }
input[type='checkbox'], input[type='radio'] { display: inline; }
::-moz-selection { background-color: rgba(56,94,157,.4); }
::selection { background-color: rgba(56,94,157,.4); }

@media screen and (min-width : 1024px) {
h1 { font-size: 330%; line-height: 1.4; }
h2 { font-size: 200%; line-height: 1.55; }
}
/* =========================================================
#  Layout
========================================================== */
/* ---------------------------------------------------------
   Header
---------------------------------------------------------- */
#header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 0; width: 100%; height: 68px; position: fixed; left: 0; top: 0; z-index: 2; }

@media screen and (min-width : 1024px) {
#header { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
}
/* ---------------------------------------------------------
   Main
---------------------------------------------------------- */
.l-container { width: 94%; margin: 0 auto; max-width: 1260px; padding: 30px 0; }
.main { margin-top: 27px; min-height: 1000px; padding-bottom: 80px; }
.main .l-container { max-width: 980px; }
.main p { margin-bottom: 2em; }
.main .l-container p:first-child { margin-top: 0; }

@media screen and (min-width : 1024px) {
.main { margin-top: 0; }
}
/* =========================================================
#  Component
========================================================== */
/* ---------------------------------------------------------
   Flexbox
---------------------------------------------------------- */
.c-flwrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; }
.l-container > .c-flwrap { margin-top: 100px; }
.c-col-odd { margin-bottom: 3em; }
.c-col-odd_img { padding: 0 2em; }
.c-col-odd_txt { padding: 0 2em; }
.c-cell.empty { height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }

@media screen and (min-width : 640px) {
.c-flwrap { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.c-row-2 .c-cell { width: 50%; }
.c-row-3 .c-cell { width: 33.3%; }
.c-row-4 .c-cell { width: 25%; }
.c-row-5 .c-cell { width: 20%; }
}

@media screen and (min-width : 768px) {
.c-col-odd { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.c-col-odd_img { width: 40%; padding-left: 0; }
.c-col-odd_img img { width: 100%; }
.c-col-odd_txt { width: 60%; }
.c-col-odd.reverse { margin-bottom: 0; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
}

@media screen and (min-width : 1024px) {
.c-col-odd_img { width: 38%; }
.c-col-odd_txt { width: 60%; }
}
/* ---------------------------------------------------------
   Header
---------------------------------------------------------- */
#header { background: #463d1d; color: #fff; -webkit-box-shadow: 0 1px 1px 0 rgba(70,61,29,.1); box-shadow: 0 1px 1px 0 rgba(70,61,29,.1); }
#header h1 { display: none; }
.c-header-logo { display: none; width: 20%; max-width: 240px; height: auto; max-height: 39px; margin: 13px 22px; }
/* .c-header-info */
.c-header-info { background: #fff; color: #463d1d; width: 105px; height: 68px; position: fixed; top: 0; right: 0; }
.c-header-item { width: 50px; float: left; }
.c-header-hours, .c-header-info2 { display: none; }
.c-header-tel, .c-header-mail { height: 58px; padding: 5px 3px; position: relative; }
.c-header-tel a, .c-header-mail a { display: block; position: absolute; width: 100%; height: 100%; z-index: 10; text-indent: -9999px; }
.c-header-tel a { background: url(../images/common/ico-htel.svg) no-repeat 45% center/auto 80%; }
.c-header-mail a { background: url(../images/common/ico-hmail.svg) no-repeat left center/auto 80%; border-left: 2px solid #463d1d; }

@media screen and (min-width : 1024px) {
.c-header-logo { display: block; }
.c-header-info { width: 300px; padding-left: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; letter-spacing: 0; z-index: 1000; }
.c-header-info1 { width: 69%; margin-left: 1%; }
.c-header-tel, .c-header-hours { width: 100%; }
.c-header-tel { margin-top: 10px; margin-bottom: -42px; }
.c-header-hours { display: block; text-indent: -9999px; }
.c-header-tel a { background: url(../images/common/phonenumber.svg) no-repeat -2px 3px/100% 18px; }
.c-header-hours { background: url(../images/common/hours.svg) no-repeat 3px 0/95% 18px; }
.c-header-info2 { display: block; width: 20%; height: 70px; margin-top: 3px; margin-left: 3px; }
.c-header-info2 img { width: 100%; height: 100%; }
.c-header-mail { width: 15%; height: 44px; margin-left: 5px; margin-right: 3%; margin-bottom: 8px; }
}

@media screen and (min-width : 1200px) {
.c-header-info { width: 340px; padding-left: 13px; }
.c-header-tel a { background-position: 0 3px; background-size: 95% 20px; }
}
/* ---------------------------------------------------------
   Footer
---------------------------------------------------------- */
#footer { background: #463d1d; color: #fff; font-size: 90%; }
#footer p { -webkit-box-shadow: 0 1px rgba(255,255,255,.8); box-shadow: 0 1px rgba(255,255,255,.8); font-weight: 900; width: 100%; }
.c-footer-nav { margin-bottom: -30px; display: none; }
.c-footer-nav p { padding-bottom: .05em; }
.c-footer-nav .c-cell { min-width: 9em; margin: 20px 0 10px; }
.c-footer-nav li { padding-bottom: .4em; }
.c-footer-nav li a { color: #fff; }
.c-footer-nav li a:hover { color: #ffe600; }
.c-footer-nav li.sns { height: 30px; margin-top: 1em; }
.c-footer-nav li.sns a { display: inline-block; width: 30px; height: 30px; margin-right: 1em; text-indent: -9999px; }
#footer .l-container > .c-footer-link { margin-top: 0; }
.c-footer-link .c-cell { width: 100%; height: 60px; margin: 10px 0; background: #fff; position: relative; }
.c-footer-link .c-cell a { width: 100%; height: 100%; padding: 1em; position: absolute; top: 0; left: 0; text-indent: -9999px; }
.c-footer-link .c-col1 a { background: url(../images/common/bnr-grandillreform.svg) no-repeat center center/auto 40px; }
.c-footer-link .c-col2 a { background: url(../images/common/bnr-grandill.svg) no-repeat center center/auto 40px; }
.c-footer-link .c-col3 a { background: url(../images/common/bnr-stcrew.svg) no-repeat center center/auto 40px; }
.c-footer-link .c-col4 a { background: url(../images/common/bnr-graphicwall.svg) no-repeat center center/auto 40px; }
p.c-footer-copy { font-family: sans-serif; font-size: 90%; font-weight: 400; text-align: center; padding: 1em 0; margin-bottom: -1em; -webkit-box-shadow: 0 -1px rgba(255,255,255,.8)!important; box-shadow: 0 -1px rgba(255,255,255,.8)!important; }
.c-footer-copy span { font-size: 120%; }

@media screen and (min-width : 768px) {
.c-footer-nav { display: -webkit-box; display: -ms-flexbox; display: flex; }
.c-footer-nav .c-cell { height: 12em; width: 23%; }
.c-flwrap.c-footer-link { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.c-footer-link .c-cell { width: 23%; margin: 5px 0; }
.c-footer-link .c-col1 a { background-size: 80% auto; }
.c-footer-link .c-col2 a { background-size: 70% auto; }
.c-footer-link .c-col3 a { background-size: 65% auto; }
.c-footer-link .c-col4 a { background-size: 60% auto; }
}

@media screen and (min-width : 1024px) {
.c-footer-nav .c-cell { width: 20%; }
}
/* ---------------------------------------------------------
   Titles
---------------------------------------------------------- */
/* .c-top-ttl */
.c-top-ttl { font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif; padding: 40px 0; letter-spacing: .1em; text-align: center; }

@media screen and (min-width : 1024px) {
.c-top-ttl { letter-spacing: .2em; }
}
/* .c-brd-ttl */
.c-brd-ttl { font-size: 150%; -webkit-box-shadow: 0 1px rgba(70,61,29,.6); box-shadow: 0 1px rgba(70,61,29,.6); }

@media screen and (min-width : 1024px) {
.c-brd-ttl { font-size: 170%; }
}
/* .c-brown-ttl */
.c-brown-ttl { width: 100%; background: #463d1d; color: #fff; font-weight: 700; padding: .3em; margin-bottom: 1em!important; }
p.c-brown-ttl { font-size: 110%; letter-spacing: .2em; text-align: center; }
h3.c-brown-ttl { font-size: 130%; padding-left: 1em; }

@media screen and (min-width : 1024px) {
h3.c-brown-ttl { font-size: 140%; }
}
/* .c-yellow-ttl */
.c-yellow-ttl { width: 100%; background: #ffe600; color: #463d1d; font-weight: 700; padding: .3em; margin-bottom: 1em!important; }
p.c-yellow-ttl { font-size: 110%; letter-spacing: .2em; text-align: center; }
h3.c-yellow-ttl { font-size: 130%; padding-left: 1em; }

@media screen and (min-width : 1024px) {
h3.c-yellow-ttl { font-size: 140%; }
}
/* ---------------------------------------------------------
   Hero
---------------------------------------------------------- */
.c-hero { width: 100%; height: 140px; margin-bottom: 20px; position: relative; z-index: 1; }
.c-hero-overlay { width: 100%; height: 100%; color: #fff; line-height: 1; text-align: center; }
.c-hero-ttl { font-family: "Highway Gothic Narrow", -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 200%; letter-spacing: .2em; padding-top: 2.5em; }
.c-hero-ttl-sub { margin-top: -1.5em; }

@media screen and (min-width : 768px) {
.c-hero { height: 180px; }
.c-hero-ttl { padding-top: 3em; }
}

@media screen and (min-width : 1024px) {
.c-hero { height: 280px; margin-bottom: 68px; }
.c-hero-ttl { font-size: 260%; padding-top: 4em; }
.c-hero-ttl-sub { font-size: 110%; margin-top: -1.9em; }
}
/* ---------------------------------------------------------
   Select Area
---------------------------------------------------------- */
.c-selectarea { background: #fffded; padding: 40px 0; margin-top: 60px; position: relative; }
.c-selectarea-upper { display: inline-block; width: 86%; height: 40px; font-weight: 900; padding: 4px; position: absolute; top: -20px; right: 0; bottom: 0; left: 0; margin: 0 auto; line-height: 26px; text-align: center; border-top: 2px solid #463d1d; border-bottom: 2px solid #463d1d; background: #fff; z-index: 1; }
.c-selectarea-upper::before { content: ''; width: 28px; height: 28px; background: #fff; border: 0px; border-top: solid 2px #463d1d; border-right: solid 2px #463d1d; -webkit-transform: rotate(225deg); transform: rotate(225deg); position: absolute; top: 4px; left: -14px; }
.c-selectarea-upper::after { content: ''; width: 28px; height: 28px; background: #fff; border: 0px; border-top: solid 2px #463d1d; border-right: solid 2px #463d1d; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 4px; right: -14px; }
.c-selectarea-head { width: 100%; max-width: 1260px; margin: 0 auto; position: relative; }
.c-selectarea-head h3 { font-size: 230%; font-weight: normal!important; }
.c-selectarea-head .c-btn-more.c-topbtn { top: 0; }
.c-sc-staff .c-selectarea-head { width: 98%; }
.c-selectarea .c-flwrap { width: 100%; margin: 0 auto; }

@media screen and (min-width : 640px) {
.c-selectarea-upper { width: 50%; }
}

@media screen and (min-width : 1024px) {
.c-selectarea-upper { width: 30%; }
}
/* ---------------------------------------------------------
   Select Area - Staff
---------------------------------------------------------- */
.c-sc-staff .l-container { max-width: 1380px; }
.c-sc-staff .c-selectarea-head { margin-top: 10px; }
.c-sc-staff .slider { padding: 0 50px; margin: -15px auto 0!important; }
.c-sc-staff .slick-slide { padding: 15px; }
.c-sc-staff .slick-prev { left: -24px; top: 15px; }
.c-sc-staff .slick-next { right: -24px; top: 15px; }
.c-sc-staff .c-cell p { font-size: 90%; }
.c-sc-staff .c-cell span { font-size: 120%; }

@media screen and (min-width: 1024px) {
.c-sc-staff .slick-prev { left: 0; top: 20px; }
.c-sc-staff .slick-next { right: 0; top: 20px; }
}
/* ---------------------------------------------------------
   Select Area - Area
---------------------------------------------------------- */
.c-sc-area .c-cell { margin-bottom: 30px; }
.c-sc-area dl.c-tbl1 { border-width: 1px; }
.c-sc-area .c-tbl1 dd { min-height: 8em; font-size: 90%; }

@media screen and (min-width: 640px) {
.c-sc-area .c-cell { width: 100%; }
}

@media screen and (min-width: 768px) {
.c-sc-area .c-flwrap { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; height: 15em; }
.c-sc-area .c-cell { width: 49%; margin-bottom: 0; background: #fff; position: relative; }
.c-sc-area dl.c-tbl1 { position: absolute; width: 100%; height: 100%; }
}

@media screen and (min-width: 1024px) {
.c-sc-area .c-flwrap { height: 13em; }
}
/* ---------------------------------------------------------
   Select Area - Group
---------------------------------------------------------- */
.c-sc-group .c-cell { width: 100%; font-size: 90%; text-align: center; padding: 3em 20% 2em; border-bottom: 1px dashed #463d1d; }
.c-sc-group .c-cell img { height: 40px; width: auto; }
.c-sc-group .c-item2 { font-size: 110%; font-weight: 900; margin-top: 30px; }

@media screen and (min-width: 768px) {
.c-sc-group .c-cell { width: 25%; padding: .5em 1% 10em; border-bottom: none; border-right: 1px dashed #463d1d; position: relative; }
.c-sc-group .c-item1 { margin-top: 3em; }
.c-sc-group .c-item2 { position: absolute; bottom: 40px; left: 0; width: 98%; }
.c-sc-group .c-btn-more { position: absolute; bottom: 0; left: 0; width: 98%; }
}
/* ---------------------------------------------------------
   Select Area - Partner
---------------------------------------------------------- */
.c-sc-partner .c-item1 .c-cell p { line-height: 1.2; font-weight: 700; padding-left: .5em; border-left: 6px solid #463d1d; }
.c-sc-partner .c-flwrap.c-item2 .c-item1 { font-size: 85%; }
.c-sc-partner .c-flwrap.c-item2 .c-item2 { width: 23em; height: 10em; font-size: 95%; border: 2px solid #463d1d; padding: 1em; margin-top: .5em; }
.c-sc-partner .c-flwrap.c-item2 .c-item2 li:nth-child(1) span { border-left: 1px solid #463d1d; border-right: 1px solid #463d1d; padding: 0 1em; }
.c-sc-partner .c-flwrap.c-item2 .c-item2 li:nth-child(2) { font-size: 250%; padding: .1em 0 0; }

@media screen and (min-width : 640px) {
.c-sc-partner .c-cell { width: 100%; }
}

@media screen and (min-width : 768px) {
.c-sc-partner .c-flwrap.c-item1 .c-cell { width: 33%; }
}

@media screen and (min-width : 1024px) {
.c-sc-partner .c-item1 { margin-bottom: 10px; }
.c-sc-partner .c-item1 .c-cell p { font-size: 120%; }
.c-sc-partner .c-flwrap.c-item2 .c-item1 { width: 70%; }
.c-sc-partner .c-flwrap.c-item2 .c-item2 { width: 23em; }
}
/* ---------------------------------------------------------
   Info Area
---------------------------------------------------------- */
.c-selectarea.c-flwrap.c-info { padding: 40px 0 20px; border-top: 2px solid #463d1d; border-bottom: 2px solid #463d1d; background: transparent!important; }
.c-info .c-selectarea-upper { width: 75%; max-width: 30em; font-size: 80%; line-height: 1.4; }
.c-info .c-cell { width: 100%; font-size: 85%; font-weight: 700; line-height: 1; text-align: center; }
.c-info .c-item1, .c-info .c-item2, .c-info .c-item3 { height: auto; }
.c-info .c-item2 { width: 100%; max-width: 22em; padding: .3em .5em; line-height: 1.4; background: #ffe600; margin: 1em auto 1.5em; }
.c-info .c-item3 { line-height: 1.4; }
.c-info .c-cell p { margin-bottom: 0!important; }
.c-info-tel, .c-info-mail { padding: 0; width: 100%; max-width: 300px; height: 30px; margin: 0 auto; position: relative; }
.c-info-tel a, .c-info-mail a { position: absolute; width: 100%; height: 100%; display: block; text-indent: -9999px; top: 0; left: 0; }
.c-info-tel a { background: url(../images/common/phonenumber.svg) no-repeat center 0/80% auto; }
.c-info-mail a { background: url(../images/common/mailadd.svg) no-repeat center 0/100% auto; }
.c-info-hours { margin-top: 0; }

@media screen and (min-width : 480px) {
.c-info .c-selectarea-upper { line-height: 2; font-size: 100%; }
}

@media screen and (min-width : 768px) {
.c-selectarea.c-flwrap.c-info { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 10px; }
.c-info .c-item1 { width: 38%; }
.c-info .c-item2 { width: 7em; }
.c-info .c-item3 { width: 49%; -webkit-box-shadow: -2px 0 #463d1d; box-shadow: -2px 0 #463d1d; }
.c-info .c-item1, .c-info .c-item3 { height: 50px; }
.c-info .c-item2 { height: 50px; margin-top: 0; }
.c-info-tel, .c-info-mail { height: 40px; }
.c-info-tel a, .c-info-mail a { background-size: auto 24px; background-position: center 6px; }
.c-info-mail a { background-size: auto 29px; background-position: center center; }
.c-info-hours { margin-top: -.5em; }
}

@media screen and (min-width : 865px) {
.c-info-mail { height: 43px; }
.c-info-mail a { background-size: 100% 34px; background-position: 0 4px; }
}

@media screen and (min-width : 1024px) {
.c-info .c-item1, .c-info .c-item3 { letter-spacing: .13em; }
.c-info-tel a { background-size: auto 26px; background-position: center 4px; }
.c-info-mail a { background-size: auto 32px; background-position: center 4px; }
}
/* ---------------------------------------------------------
   Columns(side menu)
---------------------------------------------------------- */
.c-columns { position: relative; width: 100%; height: 100%; margin: 40px auto; }
/* c-comuns-main */
.c-columns-content { width: 100%; max-width: 980px; margin: 0 auto; }
.c-columns .main section { padding: 0 3%; }
.c-columns .main section:first-child { margin-top: 68px; }
.c-columns .main .l-container { width: calc(100% - 150px); max-width: 760px; margin-left: 150px; padding: 30px 0; }
/* side */
.side { width: 150px; height: 100%; background: transparent; position: fixed; top: 0; left: 0; -webkit-box-shadow: 1px 0 rgba(70,61,29,.6); box-shadow: 1px 0 rgba(70,61,29,.6); }
.side ul { width: 110px; position: absolute; top: 100px; right: 20px; }
.side li { width: 110px; height: 30px; line-height: 2.2; margin-bottom: 15px; position: relative; }
.side li a { position: absolute; width: 100%; height: 100%; }
.side li a:hover { text-indent: 0; }

@media screen and (min-width : 1024px) {
.c-columns { margin-top: 68px; }
/* c-comuns-main */
.c-columns-content { padding-left: 30px; }
.c-columns .main .l-container { padding: 60px 0; }
/* side */
.side { width: 130px; left: 50%; top: 40px; margin-left: -480px; }
.side ul { width: 110px; }
.side li { width: 110px; height: 20px; }
.side li a { text-indent: 0; white-space: normal; background-image: none!important; }
.side li a:hover, .side li a.active { font-weight: 900; }
}
/* ---------------------------------------------------------
   List & Table Set
---------------------------------------------------------- */
/* c-list */
dl.c-list { -webkit-box-shadow: 0 -1px rgba(70,61,29,.6); box-shadow: 0 -1px rgba(70,61,29,.6); }
.c-list dt { font-weight: 900; padding: .5em; }
.c-list dt.c-list-narrow, dl.c-list-narrow dt { letter-spacing: .35em; }
.c-list dd { padding: .5em; margin-bottom: 1em; -webkit-box-shadow: 0 1px rgba(70,61,29,.6); box-shadow: 0 1px rgba(70,61,29,.6); }
ul.c-list { -webkit-box-shadow: 0 -1px rgba(70,61,29,.6); box-shadow: 0 -1px rgba(70,61,29,.6); }
.c-list li { padding: .5em; -webkit-box-shadow: 0 1px rgba(70,61,29,.6); box-shadow: 0 1px rgba(70,61,29,.6); }
.c-list dd > ul, .c-list dd > ul > li:last-child { -webkit-box-shadow: none!important; box-shadow: none!important; }
.c-list dd > ul { margin-bottom: 0; }

@media screen and (min-width : 768px) {
dl.c-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; }
.c-list dt { width: 16%; -webkit-box-shadow: 0 1px rgba(70,61,29,.6); box-shadow: 0 1px rgba(70,61,29,.6); letter-spacing: 1em; }
dl.c-list.no-lettersp dt { letter-spacing: .2em; }
.c-list dd { width: 84%; margin-bottom: 0; }
}
/* c-list-bdbrd */
.c-list-bdbrd { border-bottom: 2px solid #463d1d; margin: 40px 0 60px; }
.c-list-bdbrd li { border-top: 2px solid #463d1d; padding: 1.5em 1em; margin-bottom: -1em; }
/* c-tbl1 */
dl.c-tbl1 { -webkit-box-shadow: 0 0 0 2px #463d1d; box-shadow: 0 0 0 2px #463d1d; text-align: center; margin-bottom: 60px; }
.c-tbl1 dt { background: #463d1d; color: #fff; font-weight: 700; padding: .5em 1em; }
.c-tbl1 dd { background: #fff; padding: 1em; word-break: keep-all; }
/* table ------------------------------------------------- */
table { margin-top: 10px; }
table p, table ul { margin-bottom: 0!important; font-size: 90%; }
/* table1 */
.table1 { width: 100%; background: #fff; border: 2px solid #463d1d; border-collapse: collapse; }
.table1 thead th, .table1 tbody th, .table1 tbody td { padding: .5em 1em; }
.table1 thead th { width: auto; text-align: center; border-right: 2px solid #463d1d; border-bottom: 2px solid #463d1d; }
.table1 tbody th { border-bottom: 2px solid #463d1d; vertical-align: middle; }
.table1 tbody tr:last-child th { border-bottom: 2px solid #463d1d; }
.table1 tbody td { border-left: 2px solid #463d1d; border-bottom: 2px solid #463d1d; vertical-align: middle; }
.table1 th.diagonal { width: 148px; height: 150px; background-image: linear-gradient(45deg, transparent 49%, black 49%, black 49.7%, transparent 49.7%, transparent); }
/* table2 */
.c-table2.c-flwrap { background: #463d1d; margin-top: 50px; }
.c-table2 .c-item1 { color: #fff; font-size: 110%; font-weight: 900; padding: 0; }
.c-table2 .c-item1 p { padding-left: 1em; padding-top: 1em; }
.c-table2 dl { background: #fff; border-right: 2px solid #463d1d; border-bottom: 2px solid #463d1d; border-left: 2px solid #463d1d; margin-bottom: 0; }
.c-table2 dt, .c-table2 dd { padding: 1em 1em 0 1em; border-top: 2px solid #463d1d; }
.c-table2 dt { width: 13em; font-weight: 700; float: left; }
.c-table2 dd { margin-left: 13em; padding-bottom: 10px; border-left: 2px solid #463d1d; }
.c-table2 dd:after { content: ''; display: block; clear: both; }
.c-table2 dd > ul { margin-bottom: 0; }

@media screen and (min-width : 640px) {
.c-table2 .c-item1 { width: 30%; }
.c-table2 .c-item2 { width: 70%; }
}
/* ---------------------------------------------------------
   Box
---------------------------------------------------------- */
.c-box { padding: 2em; margin: 40px 0 60px!important; }
/* ---------------------------------------------------------
   Button
---------------------------------------------------------- */
/*** .c-btn-more ***/
.c-btn-more a { width: auto; height: 24px; line-height: 24px; color: #fff; font-family: "Highway Gothic Narrow", sans-serif; padding: 0 2em 0 3em; background: #463d1d url(../images/common/icon-arrow-right-narrow-white.svg) no-repeat 15% center/9px 15px; -webkit-transition: background-position .3s; transition: background-position .3s; text-align: center; }
.c-btn-more.u-en a { font-size: 110%; }
.c-btn-more a:hover { color: #ffe600; background-image: url(../images/common/icon-arrow-right-narrow-yellow.svg); background-position: 17% center; }
.c-btn-more.c-topbtn { position: absolute; top: -.3em; right: 0; }
/*** .c-btn-back ***/
.c-btn-back a { width: auto; height: 24px; line-height: 24px; color: #fff; font-family: "Highway Gothic Narrow", sans-serif; padding: 0 2em 0 3em; background: #463d1d url(../images/common/icon-arrow-left-narrow-white.svg) no-repeat 15% center/9px 15px; -webkit-transition: background-position .3s; transition: background-position .3s; text-align: center; }
.c-btn-back.u-en a { font-size: 110%; }
.c-btn-back a:hover { color: #ffe600; background-image: url(../images/common/icon-arrow-left-narrow-yellow.svg); background-position: 17% center; }
.c-btn-back.c-topbtn { position: absolute; top: -.3em; right: 0; }
/*** .c-btn-link ***/
.c-btn-link a { width: auto; height: 24px; line-height: 24px; color: #463d1d; font-family: "Highway Gothic Narrow", sans-serif; font-weight: 700; padding: 0 2em 0 3em; background: #ffe600 url(../images/common/icon-arrow-right-narrow-brown.svg) no-repeat 15% center/9px 15px; -webkit-transition: background-position .3s; transition: background-position .3s; text-align: center; opacity: 1; }
.c-btn-link a:hover { background-position: 17% center; opacity: .7; }
/* ---------------------------------------------------------
   Page Top
---------------------------------------------------------- */
.c-pagetop { width: 50px; height: 50px; position: absolute; top: -49px; right: 0; }
.c-pagetop a { position: absolute; width: 100%; height: 100%; text-indent: -9999px; background: #463d1d url(../images/common/icon-arrow-top-white.svg) no-repeat center center/45% 45%; }
.c-pagetop a:hover { background-position: center 40%; -webkit-transition: background .3s; transition: background .3s; }
/* ---------------------------------------------------------
  Page Bottom Navi
---------------------------------------------------------- */
.c-bottom-pnav { width: 40em; margin: 100px auto 60px; text-align: center; }
.c-bottom-pnav::before, .c-bottom-pnav::after { content: ""; display: block; clear: both; }
.c-bottom-pnav .c-cell { width: 33%; }
/* =========================================================
#  Project
========================================================== */
/* ---------------------------------------------------------
   Map
---------------------------------------------------------- */
.p-map { display: block; width: 100%; height: 400px; margin-bottom: -2em; background: #ccc; }
.p-map #map_canvas { width: 100%; height: 100%; }
.p-map #map_canvas label { width: auto; display: inline; }
.p-map #map_canvas img { max-width: none; }
.p-map #map_canvas #infoWindow { height: 8em; color: #524523; }
.p-map #map_canvas #infoWindow h3 { font-size: 18px; font-weight: bold; }

@media only screen and (min-width: 768px) {
.p-map { width: 50%; }
}
/* ---------------------------------------------------------
   Coming Soon
---------------------------------------------------------- */
.p-comingsoon { height: 380px; padding-top: 80px; font-family: "Lato", sans-serif; font-size: 150%; color: #ccc; text-align: center; }

@media only screen and (min-width: 480px) {
.p-comingsoon { font-size: 300%; }
}
/* =========================================================
#  Utility
========================================================== */
a.disable { pointer-events: none; }
.u-clearfix:after { content: " "; display: block; clear: both; }
.u-ir { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.u-overlay { width: 100%; height: 100%; }
.u-parent { position: relative; }
.u-rovr { display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; }
span.br::before { content: "\A"; white-space: pre; }
/* ---------------------------------------------------------
   SNS
---------------------------------------------------------- */
.u-blog { background: url(../images/common/ico-blog.svg) no-repeat left center/ 24px 24px; }
.u-blog:hover { opacity: .6; }
.u-fb { background: url(../images/common/ico-fb.svg) no-repeat left center/ 24px 24px; }
/* ---------------------------------------------------------
   Display
---------------------------------------------------------- */
.u-lg { display: none!important; }
.u-sp { display: block!important; }
.u-xs { display: block!important; }
.u-sm { display: none!important; }
.u-md { display: none!important; }
.u-unsp { display: none!important; }
.u-unpc { display: inline-block!important; }

@media screen and (min-width: 480px) {
.u-lg { display: none!important; }
.u-sp { display: block!important; }
.u-xs { display: none!important; }
.u-sm { display: block!important; }
.u-md { display: none!important; }
}

@media screen and (min-width: 768px) {
.u-lg { display: none!important; }
.u-sp { display: block!important; }
.u-xs { display: none!important; }
.u-sm { display: none!important; }
.u-md { display: block!important; }
}

@media screen and (min-width: 1024px) {
.u-lg { display: block!important; }
.u-sp { display: none!important; }
.u-xs { display: none!important; }
.u-sm { display: none!important; }
.u-md { display: none!important; }
.u-unpc { display: none!important; }
.u-unsp { display: inline-block!important; }
}
.u-ir { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.u-bracket { margin-left: -.5em; }
/* ---------------------------------------------------------
   Size
---------------------------------------------------------- */
.u-p-2em { padding: 2em; }
.u-pr-3em { padding-right: 3em; }
.u-m-z { margin: 0!important; }
.u-mt-1em { margin-top: 1em; }
.u-mt-50 { margin-top: 50px; }
.u-mt-60 { margin-top: 60px; }
.u-mt-160 { margin-top: 160px; }
.u-mt-m1em { margin-top: -1em!important; }
.u-mb-60 { margin-bottom: 60px; }
.u-mb-m2em { margin-bottom: -2em; }
.u-lh-1 { line-height: 1!important; }
.u-lh-1d2 { line-height: 1.2em!important; }
.u-lh-1d6 { line-height: 1.6em!important; }
/* ---------------------------------------------------------
   Layout
---------------------------------------------------------- */
.u-fltl { float: left; }
.u-fltr { float: right; }
.u-clear { clear: both; }
.u-layout-center { margin: 0 auto; }
.u-algnl { text-align: left; }
.u-algnc { text-align: center; }
.u-algnr { text-align: right; }
/* ---------------------------------------------------------
   Typography
---------------------------------------------------------- */
.u-en { font-family: "Highway Gothic Narrow", sans-serif; }
.u-mihcho { font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif; }
.u-txt-60 { font-size: 60%; }
.u-txt-70 { font-size: 70%; }
.u-txt-80 { font-size: 80%; }
.u-txt-90 { font-size: 90%; }
.u-txt-110 { font-size: 110%; line-height: 1.65; }
.u-txt-130 { font-size: 130%; line-height: 1.65; }
.u-txt-150 { font-size: 150%; line-height: 1.65; }
.u-txt-230 { font-size: 230%; line-height: 1.55; }
.u-txt-330 { font-size: 330%; line-height: 1.4; }
.u-txt-500 { font-size: 500%; line-height: 1.4; }
.u-bd { font-weight: 700; }
.u-exbd { font-weight: 900; }
.u-lspace-z { letter-spacing: 0!important; }
.u-lspace-1d5 { letter-spacing: 1.5em!important; }
.u-lspace-2d4 { letter-spacing: 2.41em!important; }
.u-txt-yellow { color: #ffe600; }
.u-txt-w { color: #fff; }
.u-txt-red { color: #db543c; }
/* ---------------------------------------------------------
   Background
---------------------------------------------------------- */
.u-bg-white { background: #fff; }
.u-bg-brown { background: #463d1d; }
.u-bg-yellow { background: #ffe600; }
.u-bg-pyellow { background: #fffded; }
.u-round { width: 60px; height: 60px; margin-bottom: 0!important; border-radius: 30px; font-weight: 700; line-height: 60px; text-align: center; }
.u-round-yellow { background: #ffe600; }
/* ---------------------------------------------------------
   Filter
---------------------------------------------------------- */
.u-filter { background: rgba(0,0,0,.6); cursor: pointer; position: relative; z-index: 1; }
.u-filter img { opacity: .5; }
.u-filter:hover img { opacity: 1; }
/* ---------------------------------------------------------
   Border
---------------------------------------------------------- */
.u-brd-none { border: none!important; }
.u-brd-sb1 { -webkit-box-shadow: 0 1px rgba(70,61,29,.6); box-shadow: 0 1px rgba(70,61,29,.6); }
/* ---------------------------------------------------------
   Tag
---------------------------------------------------------- */
.u-tag { height: 20px; padding: .3em 1.5em; margin-right: 1em; color: #fff; text-align: center; }
/* ---------------------------------------------------------
   Effect
---------------------------------------------------------- */
.u-hvr:hover, .u-hvr:hover img { opacity: .6; -webkit-transition: all .3s; transition: all .3s; }
/*** .u-wink ***/
.u-wink:hover { -webkit-animation: ease .2s; animation: ease .2s; -webkit-animation-name: wink; animation-name: wink; }
@-webkit-keyframes wink {
 0% {
 background: rgba(255,255,255,0);
}
 10% {
 background: rgba(255,255,255,.6);
}
 100% {
 background: rgba(255,255,255,0);
}
}
@keyframes wink {
 0% {
 background: rgba(255,255,255,0);
}
 10% {
 background: rgba(255,255,255,.6);
}
 100% {
 background: rgba(255,255,255,0);
}
}
.u-show:hover { -webkit-animation: ease-in .5s; animation: ease-in .5s; -webkit-animation-name: show; animation-name: show; }
@-webkit-keyframes show {
 0% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
 50% {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}
 100% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
}
@keyframes show {
 0% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
 50% {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}
 100% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
}