/*
Theme Name: synchronicity-tokyo.co.jp
Author: viewrock
*/
body,#wrapper    { display: flex; flex-direction: column; min-height: 100vh;}
 /* 「ヘッダー部分」 */
header        { background-color: #fff; border-bottom: gray 1px solid; }
.header-inner { width: 1024px; margin: 0px auto; padding-top: 20px; } /* ＝＝＝ レスポンシブ該当要素 ＝＝＝ */
.header-logo  { transition: 1s;}
.sitename     { float: right; font-size:1.5rem; margin: -24px 16px 0 0; text-shadow: 1px 1px 3px gray; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; color: #000; transition:1s; } /* ＝＝＝ レスポンシブ該当要素 ＝＝＝ */
.sitename:hover,.header-logo:hover { opacity: 0.5; }
 /* 「ヘッダー内 ナビゲーション部分」 */
nav { margin-top: 30px; }
.menu-item { display: inline-block; line-height: 2rem; width: 24%;  text-align: center;} /* ＝＝＝ レスポンシブ（S）該当要素 ＝＝＝ */
.menu-item a,.menu-item a:link,.menu-item a:visited,
.menu-item a:active { display: block; position: relative; font-size: 14px; letter-spacing: 1px; cursor: pointer; text-decoration: none; outline: none;} /* ＝＝＝ レスポンシブ（S）該当要素 ＝＝＝ */
.menu-item a,.menu-item a:link,.menu-item a:visited,
.menu-item a:active  { color: rgb(0, 0, 0); font-weight: bold; border-left: gray 1px dashed; border-right: gray 1px dashed;}
.menu-item a::before { content: ""; position: absolute; top: 65%; left: 15%; width: 70%; height: 3px; background: rgba(0,0,0,0.6); opacity: 0; -webkit-transform: translate(0, 10px); transform: translate(0, 10px); transition: opacity 0.3s ease, transform 0.3s ease;}
.menu-item a:hover::before { opacity: 1; -webkit-transform: translate(0, 5px); transform: translate(0, 5px);}

 /* 「メインコンテンツ部分」 */
.content        { width: 100%; }
.content-innner { width: 1024px; margin: 16px auto; text-align: center;} /* ＝＝＝ レスポンシブ該当要素 ＝＝＝ */
.content-area   { width: 85%; margin: 16px auto; text-align: left;} /* ＝＝＝ レスポンシブ該当要素 ＝＝＝ */
.content-business { width: 95%; margin:40px auto;}
 /* 「メインコンテンツ内 見出し・骨組み部分」 */
.entry-title   { font-size: 18px; font-weight: bold; border-bottom: 1px dashed gray; margin: 32px auto; padding: 8px; } /* ＝＝＝ レスポンシブ該当要素 ＝＝＝ */
.title-h2      { width: 100%; line-height: 2rem; padding: 4px 20px 0; background: #7a6a56; color: #ffffff; box-shadow: 2px 2px 6px rgb(182, 182, 182); margin: 30px 0; }
.title-h2 span { margin-left: 4px; font-size: 0.8rem; opacity: 0.6;  }
.content-business p { width: 90%; margin: 12px auto; font-size: 1rem; line-height: 1.5rem;}
 /* 「メインコンテンツ内 テーブル部分」 */
.table-col2    { width: 100%; margin: 16px auto 60px; border: rgb(182, 182, 182) 1px solid; font-size: 0.8rem;} /* ＝＝＝ レスポンシブ該当要素 ＝＝＝ */
.table-col2 tr { line-height: 2rem; border-bottom: rgb(182, 182, 182) 1px solid;}
.table-col2 th { width: 35%; padding: 4px 8px; line-height: 1rem; background-color: #ece5da; text-align: center; border-right:  rgb(182, 182, 182) 1px solid; vertical-align: middle;}
.table-col2 td { padding: 4px 8px; }
.table-col2 td input,.table-col2 td textarea { width: 90%; margin: 8px; padding: 8px; }
.submit { text-align: center; }
.title-h3 { border-left: #7a6a56 8px solid; line-height: 1.5rem; margin: 24px 0 0 12px; text-indent: 0.5rem;}
 /* 「メインコンテンツ内 グーグルマップ部分」 */
iframe { width: 100%; height: 500px; border: rgb(182, 182, 182) 1px solid; margin: 16px auto 30px; box-shadow: 3px 3px 8px rgb(182, 182, 182);}
 /* 「メインコンテンツ内 ３D風ページタイトル部分」 */
.content-img { width:100%; height:auto; background-color:#ece5da; text-align:center; padding:40px 8px 24px; margin-bottom:40px; box-shadow:3px 3px 8px rgb(182, 182, 182);}
h4 { color: #202020; text-transform: uppercase;}
h4 span { display: block; margin: 12px 0; font-size: 4rem; color: #f1ebe5; text-shadow: 0 8px 8.896px #c4b59d,0 -2px 1px #fff; }

 /* 「トップページ用 テキストアニメーション部分」 */

.svg-top { width: 85%; margin:32px auto;}
.animetion {
    fill: none;
    stroke-dasharray: 8000;
    stroke-dashoffset: 8000;
    animation: DASH 10s ease-in 1s forwards;
    -webkit-animation: DASH 10s ease-in 1s forwards;
    opacity: 0.6;
    animation-play-state: running;
}
@keyframes DASH {
    0%   { stroke-dashoffset: 8000; fill: rgba(255, 255, 255, 0);}
    50%  { stroke-dashoffset: 2000; fill: rgba(255, 255, 255, 0.2);}
    70%  { stroke-dashoffset: 1000; fill: rgba(255, 255, 255, 0.4);}
    100% { stroke-dashoffset: 0; fill: rgb(255, 251, 251);}
}
@-webkit-keyframes DASH {
    0%   { stroke-dashoffset: 8000; fill: rgba(255, 255, 255, 0);}
    50%  { stroke-dashoffset: 2000; fill: rgba(255, 255, 255, 0.2);}
    70%  { stroke-dashoffset: 1000; fill: rgba(255, 255, 255, 0.4);}
    100% { stroke-dashoffset: 0; fill: rgb(255, 251, 251);}
}


 /* 「トップページ用 背景動画部分」 */
video#bgvid {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
  background-color: #000;
}

 /* 「フッター部分」 */
footer           { width: 100%; margin-top: auto; padding: 12px 8px 16px;}
.footer-inner    { width: 1024px; margin: auto;} /* ＝＝＝ レスポンシブ該当要素 ＝＝＝ */
.site-footer-top { border-top: #fff 1px solid; color: #fff;}
.site-footer     { border-top: gray 1px solid;}
.footer-add      { font-size: 12px; font-weight: bold; float: left; line-height: 18px;}
.footer-add span { font-size: 11px; margin-right: 8px;}
address          { font-size: 12px; text-align: right; overflow: hidden;}

/* =========================================================================================================================================================================*/
/* レスポンシブM（750px～1023px） */
@media screen and (min-width: 750px) and (max-width: 1023px) {

.header-inner   { width: 96%;}
.sitename       { font-size: 1.2rem;} /* 社名テキスト */
.content-innner { width: 96%;}
.content-area   { width: 90%; margin: 12px auto; }
.svg-top { width:100%; margin:32px auto;}
}

/* =========================================================================================================================================================================*/
/* レスポンシブS（～749px） */
@media screen and (max-width: 749px) {

.header-inner { width: 96%;}
.sitename     { display: none;} /* 社名テキスト */
.menu-item    { line-height: 1.5rem; width: 23%;}
.menu-item a,.menu-item a:link,.menu-item a:visited,.menu-item a:active {font-size: 12px;}
.content-innner { width: 96%;}
.content-area   { width: 96%; margin: 10px auto; }

.entry-title   { width: 96%; font-size: 13px; font-weight: bold; border-bottom: 1px dashed gray; margin: 24px auto; padding: 8px; }
.title-h2      { width: 100%; line-height: 1.8rem; padding: 3px 12px 0; margin: 10px 0; font-size: 0.8rem;}
.title-h2 span { margin-left: 4px; font-size: 0.7rem; opacity: 0.6;  }
.title-h3      { border-left: #7a6a56 6px solid; line-height: 1.2rem; margin: 8px 0 0 10px; text-indent: 0.5rem; font-size: 0.9rem;}
.content-business p { width: 96%; margin: 6px auto; font-size: 0.8rem; line-height: 1rem;}
.content-img { width: 96%; padding: 12px 8px; margin: 0 auto 18px;}
h4 span { margin: 12px auto 0; font-size: 2rem; text-shadow: 0 4px 4px #c4b59d,0 -2px 1px #fff;}
.table-col2    { margin: 8px auto 20px;}

.svg-top { width:100%; margin:32px auto;}

.footer-inner { width: 96%;}
.footer-add      { font-size: 9px; line-height: 12px;}
.footer-add span { font-size: 8px; margin-right: 4px;}
address          { font-size: 9px; }

video#bgvid {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
  background-color: #000;
}

}