@charset "utf-8";

/* ---------------------------------------------------
   File: common.css
   Version: 1.0.0
   Update: 2022-02-25
   Author: https://flowlab.co.jp

   (c)2007-2022 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */



/* =======================================================================================================================

   WIDE DESKTOP LAYOUT

======================================================================================================================= */
.sp { display: none;}

/* ====================================================
		WEB Font
==================================================== */

.font_zen-kaku-gothic-new-regular {
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.font_zen-kaku-gothic-new-medium {
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.font_zen-kaku-gothic-new-bold {
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.font_century-gothc-pro-regular {
  font-family: "century-gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.font_century-gothc-pro-bold {
  font-family: "century-gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* -------------------------------
		English
------------------------------- */
.en {
  font-weight: 700;
}




/* ====================================================
		Layout
==================================================== */
body {
  color: #4d4d4d;
  font-size: 1.6rem;
  font-family: "century-gothic", "zen-kaku-gothic-new", sans-serif;
  font-weight: 400;
  font-style: normal;
	letter-spacing: 0.04em;
  line-height: 2.4;
}
.row {
  padding: 150px 100px 0;
}

/* -------------------------------
		Blank Icon
------------------------------- */
a[target="_blank"] .blank {
  position: relative;
}
a[target="_blank"] .blank::after {
	content: '';
  width: 10px;
  height: 10px;
  background: url("../img_common/icon_blank-black.png") no-repeat 0 0 / 10px;
  position: absolute;
  top: 0.3em;
  right: -20px;
  display: block;
}

/* -------------------------------
		Selection
------------------------------- */
::selection,
::-moz-selection {
  color: #fff;
  background: #771c20;
}




/* ====================================================
		Splash
==================================================== */
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background: #fff;
}
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
  z-index: 999999;
	width: 100%;
	transform: translate(-50%, -50%);
	color: #fff;
}




/* ====================================================
		Header
==================================================== */
#gHeader {
	width: calc(100% - 170px);
  height: 130px;
	position: relative;
	top: 0;
	left: 0;
  padding: 45px 70px 0 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Scroll Out */
#gHeader.HeightMin {
  height: 80px;
  background: rgb(255, 255, 255, 0.8);
  padding: 10px 70px 0 100px;
  position: fixed;
  z-index: 9999;
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
  	opacity: 0;
  	transform: translateY(-170px);
  }
  to {
  	opacity: 1;
  	transform: translateY(0);
  }
}

/* -------------------------------
		Logo
------------------------------- */
#gHeader #logo {
  width: 20%;
  min-width: 164px;
	position: relative;
	z-index: 9999;
}
#gHeader #logo a,
#gHeader #logo a img {
	display: block;
}
#gHeader #logo a {
  width: 164px;
  padding: 25px 0;
}

/* -------------------------------
		Global Navigation
------------------------------- */
#gNavi {
  width: 70%;
}

/* -------------------------------
		Global Navigation - PC
------------------------------- */
#gNavi .pc {
  display: flex;
  justify-content: flex-end;
}
#gNavi .pc li {
  width: auto;
  position: relative;
}
#gNavi .pc li a {
  color: #4d4d4d;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 25px 24px;
  transition: all .3s;
  display: block;
}
#gNavi .pc li a:hover {
  color: #771c20;
  opacity: 1;
}

/* Has Child Menu */
#gNavi .pc li.has-child ul {
  width: 80%;
  position: absolute;
  background: #fff;
  border: 2px solid #f4f5f5;
  border-radius: 6px;
  visibility: hidden;
  opacity: 0;
  top: 80%;
  left: 50%;
  z-index: 9999;
  transition: all .5s;
  transform: translateX(-50%);
}
#gNavi .pc li.has-child ul::before {
  content: '';
  width: 2px;
  height: 15px;
  background: #f4f5f5;
  position: absolute;
  top: -15px;
  left: 50%;
  display: block;
  transform: translateX(-50%);
}
#gNavi .pc li.has-child:hover > ul,
#gNavi .pc li.has-child ul li:hover > ul,
#gNavi .pc li.has-child:active > ul,
#gNavi .pc li.has-child ul li:active > ul {
  visibility: visible;
  opacity: 1;
  top: 100%;
}
#gNavi .pc li.has-child ul li {
  width: 100%;
}
#gNavi .pc li.has-child ul li:not(:last-child) {
  border-bottom: 2px solid #f4f5f5;
}
#gNavi .pc li.has-child ul li a {
  text-align: center;
  padding: 10px 0;
}

/* Hover */
#gNavi .pc ul li a:hover {
  opacity: 1;
}
#gNavi .pc ul li a:hover::before {
  visibility: visible;
  opacity: 1;
  top: 0;
}

/* Sub Page */
#gNavi .pc ul ul {
  letter-spacing: 0.04em;
  display: block;
  border: 1px solid #efefef;
}
#gNavi .pc ul li li {
  width: 100%;
}
#gNavi .pc ul li li:not(:last-child) {
  border-bottom: 1px solid #efefef;
}
#gNavi .pc ul li li a {
  font-size: 1.5rem;
  font-family: heisei-kaku-gothic-std, sans-serif;
  font-weight: 300;
  font-style: normal;
  padding: 20px 0 15px;
}
#gNavi .pc ul li li:first-child a {
  border-radius: 6px 6px 0 0;
}
#gNavi .pc ul li li:last-child a {
  border-radius: 0 0 6px 6px;
}
#gNavi .pc ul li li a:hover {
  color: #4d4d4d;
  background: rgb(248, 238, 232, 0.4);
  opacity: 1;
}
#gNavi .pc ul li li a:hover::before {
  content: none;
}

/* -------------------------------
		Global Navigation - Sitemap
------------------------------- */
#sitemapMenu {
  width: calc(100% - 200px);
  height: calc(100vh - 60px);
  background: #fff;
  position: fixed;
  top: calc(-100vh - 60px);
  left: 0;
  z-index: 99999;
  transition: all 0.6s;
  padding: 40px 100px;
  overflow-y: auto;
}
#sitemapMenu.panelactive {
  top: 0;
}
#gHeader.HeightMin #sitemapMenu {
}

/* Logo */
#sitemapMenu #sitemapLogo a {
  padding: 25px 0;
  display: block;
}
#sitemapMenu #sitemapLogo img {
  max-width: 164px;
}

/* Y Scroll */
#sitemapMenu.panelactive ul {
  /*width: 100%;
  height: 100vh;
  position: fixed;*/
  
  /*z-index: 99999;
  overflow: auto;
  -webkit-overflow-scrolling: touch;*/
}

#sitemapMenu .flex ul {
  width: 46%;
}
#sitemapMenu .flex ul a {
  display: block;
}

/* Layout - Service List */
#sitemapMenu .flex ul:first-child li:not(:last-child) {
  border-bottom: 1px solid #e1e4e6;
}
#sitemapMenu .flex ul:first-child li a {
  padding: 40px 0;
  position: relative;
}
#sitemapMenu .flex ul:first-child li span {
  color: #dbdfe2;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  display: block;
  padding-bottom: 10px;
  
}
#sitemapMenu .flex ul:first-child li strong {
  color: #4d4d4d;
  font-size: 1.5rem;
  font-weight: 500;
  display: block;
  padding-left: 5px;
}

/* Arrow */
#sitemapMenu .flex ul:first-child li a::before,
#sitemapMenu .flex ul:first-child li a::after {
  content: '';
  position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	vertical-align: middle;
  transition: all .3s;
}
#sitemapMenu .flex ul:first-child li a::before {
  width: 11px;
	height: 1px;
  right: 34px;
	background: #4d4d4d;
}
#sitemapMenu .flex ul:first-child li a::after {
  width: 8px;
	height: 8px;
  right: 30px;
	border-top: 1px solid #4d4d4d;
	border-right: 1px solid #4d4d4d;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#sitemapMenu .flex ul:first-child li a:hover::before {
  right: 29px;
}
#sitemapMenu .flex ul:first-child li a:hover::after {
  right: 25px;
}

/* List */
#sitemapMenu .flex ul:last-child {
  width: calc(46% - 80px);
  padding-top: 40px;
  padding-right: 80px;
}
#sitemapMenu .flex ul:last-child li {
  margin-bottom: 10px;
}
#sitemapMenu .flex ul:last-child li a {
  background: #f4f5f5;
  border-radius: 14px;
  padding: 15px 30px;
}
#sitemapMenu .flex ul:last-child li a span {
  font-size: 1.4rem;
}
#sitemapMenu .flex ul:last-child li a[target="_blank"] {
  position: relative;
}
#sitemapMenu .flex ul:last-child li a[target="_blank"]::after {
	content: '';
  width: 10px;
  height: 10px;
  background: url("../img_common/icon_blank-black.png") no-repeat 0 0 / 10px;
  position: absolute;
  top: 50%;
  right: 30px;
  display: block;
  transform: translateY(-50%);
}

/* Copyright */
#sitemapMenu small {
  color: #dbdfe2;
  font-size: 1.1rem;
  display: block;
  padding-top: 80px;
}



/* ====================================================
		Menu Button
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#menuBtn {
  width: 3%;
  min-width: 40px;
  height: 50px;
  position: relative;
  top: 18px;
  right: 0;
  cursor: pointer;
  z-index: 99999;
}

/* -------------------------------
		Icon
------------------------------- */
#menuBtn span {
  width: 5px;
  height: 5px;
  border-radius: 2.5px;
  background: #4d4d4d;
  display: inline-block;
  position: absolute;
  left: 10px;
  transition: all .4s;
}
#menuBtn span:nth-child(1) {
	top: 10px;
}
#menuBtn span:nth-child(2) {
	top: 10px;
  left: 20px;
}
#menuBtn span:nth-child(3) {
	top: 20px;
}
#menuBtn span:nth-child(4) {
	top: 20px;
  left: 20px;
}

/* -------------------------------
		Text
------------------------------- */
#menuBtn span:nth-child(4)::after {
  content: 'Menu';
  color: #4d4d4d;
  font-size: 1rem;
  font-family: "century-gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  position: absolute;
  top: 10px;
  left: calc(50% - 0.5em);
  transform: translateX(-50%);
}

/* -------------------------------
		Close
------------------------------- */
#menuBtn.active span {
  width: 15px;
}
#menuBtn.active span:nth-child(2),
#menuBtn.active span:nth-child(3) {
  display: none;
}
#menuBtn.active span:nth-child(4) {
  left: 10px;
}
#menuBtn.active span:nth-child(4)::after {
  content: 'Close';
  left: 50%;
}




/* ====================================================
		Page Path
==================================================== */
#pagePath {
  padding: 0 75px 0 0;
}
#pagePath ul {
	display: flex;
	flex-wrap: wrap;
  justify-content: flex-end;
}
#pagePath ul li {
  font-size: 1rem;
	position: relative;
}
#pagePath ul li a {
  color: #dbdfe2;
  font-size: 1rem;
  padding: 0 20px 0 0;
  margin-right: 10px;
  position: relative;
}
#pagePath ul li a::after {
  content: '';
  width: 10px;
  height: 1px;
  background: #dbdfe2;
  position: absolute;
  top: 50%;
  right: 0;
}

/* Hover */
#pagePath ul li a:hover {
  opacity: 1;
}




/* ====================================================
		Title
==================================================== */
/* -------------------------------
		Title - Reset
------------------------------- */
h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
}

/* -------------------------------
		Page Title
------------------------------- */
#main h1 {
  width: calc(70% - 100px);
  font-family: 'Noto Sans JP',sans-serif;
  font-weight: 400;
  line-height: 1;
  padding: 120px 0 100px 100px;
}

/* Japanese */
#main h1 strong {
  font-size: 5rem;
}

/* English */
#main h1 span {
  color: #dbdfe2;
  font-size: 2rem;
  font-family: "century-gothic", sans-serif;
  font-weight: 700;
  letter-spacing: 0.07em;
  display: block;
  padding-top: 40px;
}

/* -------------------------------
		Contents Title
------------------------------- */
#main h2 {
  line-height: 2;
  padding-bottom: 80px;
}

/* English */
#main h2 span {
  color: #dbdfe2;
  font-size: 4.2rem;
  line-height: 1.2;
  display: block;
  padding-bottom: 30px;
}

/* Japanese */
#main h2 strong {
  font-size: 1.5rem;
  font-weight: 500;
  display: block;
  position: relative;
  padding-left: 40px;
}
#main h2 strong::before {
  content: '';
  width: 30px;
  height: 1px;
  background: #e1e4e6;
  position: absolute;
  top: 1em;
  left: 0;
  display: block;
}

/* Catch copy */
#main h3 {
  font-size: 3.2rem;
  line-height: 1.8;
}




/* ====================================================
		Contents
==================================================== */
/* -------------------------------
		Lead Text
------------------------------- */
#main .lead {
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0 100px 180px;
}

/* Attention */
#main .lead small {
  font-size: 1.3rem;
  font-weight: 400;
  display: block;
  padding-top: 30px;
}

/* Link */
#main .lead a {
  color: #771c20;
  border-bottom: 1px solid #771c20;
  transition: all .3s;
}
#main .lead a:hover {
  border-bottom: 1px solid #fff;
  opacity: 1;
}
#main .lead small a {
  font-size: 1.3rem;
}

/* -------------------------------
		Button - Normal
------------------------------- */
#main .btn_normal {
  text-align: right;
}
#main .btn_normal li.link {
  
}
#main .btn_normal li.link a {
  line-height: 1.4;
  background: #dbdfe2;
  border-radius: 200px;
  padding: 30px 100px;
  position: relative;
  display: inline-block;
}

/* Arrow */
#main .btn_normal li.link a::before,
#main .btn_normal li.link a::after {
  content: '';
  position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	vertical-align: middle;
  transition: all .3s;
}
#main .btn_normal li.link a::before {
  width: 11px;
	height: 1px;
  right: 34px;
	background: #4d4d4d;
}
#main .btn_normal li.link a::after {
  width: 8px;
	height: 8px;
  right: 30px;
	border-top: 1px solid #4d4d4d;
	border-right: 1px solid #4d4d4d;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Hover */
#main .btn_normal li.link a:hover::before {
  right: 29px;
}
#main .btn_normal li.link a:hover::after {
  right: 25px;
}

/* -------------------------------
		Contact List
------------------------------- */
ul.contactList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul.contactList li {
  width: 48%;
  line-height: 1.4;
  background: #fff;
  border-radius: 14px;
}
ul.contactList li a {
  height: 100%;
  display: block;
  padding: 70px 0 65px;
}
ul.contactList li a div {
  
}

/* Japanese / Time */
ul.contactList li a div span {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  display: block;
}

/* English / TEL */
ul.contactList li a div strong {
  font-size: 4rem;
  letter-spacing: 0.11em;
  padding-bottom: 10px;
  display: block;
}
ul.contactList li a div strong span {
  font-size: 2rem;
  display: inline-block;
  margin-right: 10px;
}

/* -------------------------------
		Sticky Container
------------------------------- */
.stickyContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.stickyContainer div.stickyBox {
  width: 70%;
  order: 2;
}
.stickyContainer div.stickyBox article {
  padding-bottom: 200px;
}
.stickyContainer aside {
  width: 25%;
  padding-bottom: 100px;
  order: 1;
}
.stickyContainer aside ul {
  position: -webkit-sticky;
	position: sticky;
  top: 200px;
  left: 0;
}
.stickyContainer aside ul li a {
  color: #c8cbce;
  font-size: 1.5rem;
  font-weight: 700;
  position: relative;
  padding-left: 18px;
}
.stickyContainer aside ul li a::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #c8cbce;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  transition: all .3s;
}

/* Current */
.stickyContainer aside ul li.current a,
.stickyContainer aside ul li a:hover {
  color: #771c20;
}
.stickyContainer aside ul li.current a::before,
.stickyContainer aside ul li a:hover::before {
  background: #771c20;
}



/* ====================================================
		Footer
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#gFooter {
}

/* -------------------------------
		Footer Navigation / 3column
------------------------------- */
#gFooter ul:first-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-top: 1px solid #e1e4e6;
}
#gFooter ul:first-child li {
  width: 33.33%;
}
#gFooter ul:first-child li:not(:last-child) {
  width: calc(33.33% - 1px);
  border-right: 1px solid #e1e4e6;
}
#gFooter ul:first-child li a {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.11em;
  padding: 90px 0 80px;
  display: block;
}

/* English */
#gFooter ul:first-child li a span {
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  display: block;
}



/* ====================================================
		Footer - Contact
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#footer_contact {
  text-align: center;
  letter-spacing: 0.11em;
  background: #e1e4e6;
  padding: 150px 100px;
}

/* -------------------------------
		Title
------------------------------- */
#footer_contact h3 {
  font-size: 3rem;
}

/* -------------------------------
		Text
------------------------------- */
#footer_contact p {
  padding: 20px 0 80px;
}




/* ====================================================
		Footer - Service Menu
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#footer_serviceMenu {
  font-family: "zen-kaku-gothic-new", sans-serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#footer_serviceMenu li {
  
}
#footer_serviceMenu li a {
  font-size: 2.6rem;
  font-weight: 700;
  padding: 100px 100px 40px;
  display: block;
}

/* -------------------------------
		Branding
------------------------------- */
#footer_serviceMenu #footer_branding {
  width: 100%;
}
#footer_serviceMenu #footer_branding a {
  padding-bottom: 100px;
  position: relative;
}

/* Arrow */
#footer_serviceMenu #footer_branding a::before,
#footer_serviceMenu #footer_branding a::after {
  content: '';
  position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	vertical-align: middle;
  transition: all .3s;
}
#footer_serviceMenu #footer_branding a::before {
  width: 11px;
	height: 1px;
  right: 104px;
	background: #4d4d4d;
}
#footer_serviceMenu #footer_branding a::after {
  width: 8px;
	height: 8px;
  right: 100px;
	border-top: 1px solid #4d4d4d;
	border-right: 1px solid #4d4d4d;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Hover */
#footer_serviceMenu #footer_branding a:hover::before {
  right: 97px;
}
#footer_serviceMenu #footer_branding a:hover::after {
  right: 93px;
}

/* -------------------------------
		Creative / Promotion
------------------------------- */
#footer_serviceMenu #footer_creative,
#footer_serviceMenu #footer_promotion {
  width: 50%;
  border-top: 1px solid #e1e4e6;
  border-bottom: 1px solid #e1e4e6;
  padding-bottom: 100px;
}
#footer_serviceMenu ul {
  padding: 0 100px;
}
#footer_serviceMenu ul a {
  font-size: 1.6rem;
  padding: 15px 0;
}
#footer_serviceMenu ul ul {
  padding: 0 0 20px;
}

/* Detail Menu */
#footer_serviceMenu ul ul li {
  font-size: 1.3rem;
  line-height: 1.6;
  position: relative;
  padding: 3px 0 3px 16px;
  margin-left: 40px;
}
#footer_serviceMenu ul ul li::before {
  content: '';
  width: 8px;
  height: 1px;
  background: #e1e4e6;
  position: absolute;
  top: calc(3px + 0.7em);
  left: 0;
  display: block;
}

/* Creative */
#footer_serviceMenu #footer_creative {
  width: calc(50% - 1px);
  border-right: 1px solid #e1e4e6;
}

/* Promotion */





/* ====================================================
		Footer - Service Site
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#footer_serviceSite {
  padding: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#footer_serviceSite section {
  width: 32%;
}
#footer_serviceSite section:not(:last-child) {
  margin-right: 2%;
}
#footer_serviceSite section a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#footer_serviceSite section div {
  width: 65%;
}

/* -------------------------------
		Image
------------------------------- */
#footer_serviceSite section .image {
  width: 30%;
}
#footer_serviceSite section .image img {
  border-radius: 14px;
}

/* -------------------------------
		Title
------------------------------- */
#footer_serviceSite section h3 {
  font-size: 1.6rem;
  line-height: 1.4;
  padding-bottom: 5px;
  display: inline-block;
  position: relative;
}
#footer_serviceSite a[target="_blank"]  h2.blank {
  display: inline;
}
#footer_serviceSite a[target="_blank"]  h2.blank::after {
  top: 0.4em;
  right: -16px;
}

/* -------------------------------
		Text
------------------------------- */
#footer_serviceSite section p {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
}



/* ====================================================
		Footer - Sitemap
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#gFooter #footer_sitemap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 1px solid #e1e4e6;
  border-bottom: 1px solid #e1e4e6;
  margin-bottom: 250px;
}
#gFooter #footer_sitemap ul li a {
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: left;
  padding: 8px 0;
}

/* -------------------------------
		Menu
------------------------------- */
#footer_menu {
  width: calc(70% - 200px);
  padding: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#gFooter #footer_menu ul,
#gFooter #footer_menu ul li {
  border: none;
}
#gFooter #footer_menu ul {
  width: 30%;
}
#gFooter #footer_menu ul li {
  width: 100%;
  font-weight: 700;
}
#gFooter #footer_menu ul li a {
  display: block;
}
#gFooter #footer_menu ul li a span {
  font-size: 1.4rem;
  display: inline-block;
}

/* -------------------------------
		Project
------------------------------- */
#footer_project {
  width: calc(30% - 101px);
  border-left: 1px solid #e1e4e6;
  padding: 100px 0 100px 100px;
}

/* Title */
#footer_project h3 {
  font-size: 1.8rem;
  display: block;
  padding: 0 0 30px;
}

/* List */
#gFooter #footer_sitemap #footer_project ul {
  width: 100%;
  padding: 0;
  display: block;
}
#gFooter #footer_sitemap #footer_project ul li {
  width: 100%;
}
#gFooter #footer_sitemap #footer_project ul li a {
  display: block;
  padding: 6px 0;
}
#gFooter #footer_sitemap #footer_project ul li a  span {
  font-size: 1.3rem;
  font-weight: 500;
}

/* ====================================================
		Footer - Company
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#footer_company {
  padding-left: 100px;
}

/* -------------------------------
		Logo
------------------------------- */
#flogo {
  width: 180px;
}
#flogo a {
  display: block;
  padding: 15px 0;
}

/* -------------------------------
		Address
------------------------------- */
#footer_company address,
#footer_company address a,
#footer_company address span {
  font-size: 1.2rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.06em;
  line-height: 1.8;
}

/* Tel */
#footer_company address a {
  margin-right: 1em;
}

/* Google map */
#footer_company .link_googlemap {
  margin-left: 1em;
}
#footer_company .link_googlemap a {
  border-bottom: 1px solid #4d4d4d;
}
#footer_company .link_googlemap a:hover {
  border-bottom: 1px solid #fff;
}



/* ====================================================
		Footer - Last Contents
==================================================== */
/* -------------------------------
		Layout
------------------------------- */
#footer_lastContents {
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 0 100px 30px 0;
}
#footer_lastContents ul:first-child li a,
#footer_lastContents #copyright {
  font-size: 1.2rem;
  font-weight: 400;
}

/* -------------------------------
		Privacy/Site Policy
------------------------------- */
#footer_lastContents ul:first-child {
  border: none;
}
#footer_lastContents ul:first-child li {
  width: 100%;
}
#footer_lastContents ul:first-child li a {
  padding: 0;
}

/* -------------------------------
		Copyright
------------------------------- */
#footer_lastContents #copyright {
	display: block;
  padding-left: 30px;
}



/* ====================================================
		Page Top
==================================================== */
#gFooter #pageTop {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 999;
	display: none;
}
#gFooter #pageTop a {
	display: block;
  padding: 40px 40px 50px;
}

/* Arrow */
#gFooter #pageTop span::before,
#gFooter #pageTop span::after {
  content: '';
  position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	vertical-align: middle;
  transition: all .3s;
}
#gFooter #pageTop span::before {
  width: 1px;
	height: 11px;
  top: 9px;
  right: 39px;
	background: #4d4d4d;
}
#gFooter #pageTop span::after {
  width: 8px;
	height: 8px;
  right: 35px;
	border-top: 1px solid #4d4d4d;
	border-right: 1px solid #4d4d4d;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* Hover */
#gFooter #pageTop a:hover span::before {
  height: 18px;
  top: 1px;
}
#gFooter #pageTop a:hover span::after {
  top: -15px;
}












/* =======================================================================================================================

   TABLET

======================================================================================================================= */
@media screen and (min-width: 897px) and (max-width: 1299px) {
  .sp { display: none;}
  
  /* ====================================================
      Layout
  ==================================================== */
  body {
    font-size: 1.5rem;
  }
  .row {
    padding: 100px 50px 0;
  }
  
  
  
  
  /* ====================================================
      Header
  ==================================================== */
  #gHeader {
    width: calc(100% - 100px);
    height: 100px;
    padding: 30px 50px 0;
  }
  
  /* Scroll Out */
  #gHeader.HeightMin {
    height: 70px;
    background: none;
    padding: 10px 50px 0;
  }
  
  /* -------------------------------
      Global Navigation - PC
  ------------------------------- */
  #gNavi .pc {
    display: none;
  }
  
  /* -------------------------------
      Global Navigation - Sitemap
  ------------------------------- */
  #sitemapMenu {
    width: calc(100% - 100px);
    padding: 40px 50px;
  }
  
  #sitemapMenu .flex ul {
    width: 50%;
  }
  
  /* Layout - Service List */
  #sitemapMenu .flex ul:first-child li a {
    padding: 30px 0;
  }
  #sitemapMenu .flex ul:first-child li span {
    font-size: 4rem;
  }
  #sitemapMenu .flex ul:first-child li strong {
    font-size: 1.4rem;
  }
  
  /* List */
  #sitemapMenu .flex ul:last-child {
    width: 44%;
    padding-right: 0;
  }
  #sitemapMenu .flex ul:last-child li a {
    padding: 10px 30px;
  }
  #sitemapMenu .flex ul:last-child li a span {
    font-size: 1.3rem;
  }

  
  
  
  /* ====================================================
      Page Path
  ==================================================== */
  #pagePath {
    padding: 0 55px 0 0;
  }
  
  
  
  
  /* ====================================================
      Title
  ==================================================== */
  /* -------------------------------
      Page Title
  ------------------------------- */
  #main h1 {
    width: calc(70% - 50px);
    padding: 80px 0 100px 50px;
  }

  /* Japanese */
  #main h1 strong {
    font-size: 4rem;
  }
  
  /* English */
  #main h1 span {
    font-size: 1.8rem;
    padding-top: 30px;
  }
  
  /* -------------------------------
      Contents Title
  ------------------------------- */
  /* English */
  #main h2 span {
    font-size: 3.8rem;
  }
  
  /* Catch copy */
  #main h3 {
    font-size: 2.6rem;
  }
  
  
  
  
  /* ====================================================
      Contents
  ==================================================== */
  /* -------------------------------
      Lead Text
  ------------------------------- */
  #main .lead {
    padding: 0 50px 100px;
  }
  
  /* -------------------------------
      Button - Normal
  ------------------------------- */
  #main .btn_normal li.link a {
    padding: 20px 80px;
  }
  
  /* -------------------------------
      Contact List
  ------------------------------- */
  /* English / TEL */
  ul.contactList li a div strong {
    font-size: 3rem;
  }
  
  
  
  /* ====================================================
      Footer - Contact
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #footer_contact {
    padding: 100px 50px;
  }
  
  /* -------------------------------
      Title
  ------------------------------- */
  #footer_contact h3 {
    font-size: 2.6rem;
  }
  
  /* -------------------------------
      Text
  ------------------------------- */
  #footer_contact p {
    padding: 20px 0 60px;
  }
  
  
  
  
  /* ====================================================
      Footer - Service Menu
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #footer_serviceMenu li a {
    font-size: 2.2rem;
    padding: 80px 50px 40px;
  }
  
  /* -------------------------------
      Branding
  ------------------------------- */
  #footer_serviceMenu #footer_branding a {
    padding-bottom: 80px;
  }
  
  /* Arrow */
  #footer_serviceMenu #footer_branding a::before {
    right: 54px;
  }
  #footer_serviceMenu #footer_branding a::after {
    right: 50px;
  }
  
  /* Hover */
  #footer_serviceMenu #footer_branding a:hover::before {
    right: 47px;
  }
  #footer_serviceMenu #footer_branding a:hover::after {
    right: 43px;
  }
  
  /* -------------------------------
      Creative / Promotion
  ------------------------------- */
  #footer_serviceMenu #footer_creative,
  #footer_serviceMenu #footer_promotion {
    padding-bottom: 80px;
  }
  #footer_serviceMenu ul {
    padding: 0 50px;
  }
  #footer_serviceMenu ul a {
    font-size: 1.6rem;
    padding: 15px 0;
  }
  #footer_serviceMenu ul ul {
    padding: 0 0 20px;
  }
  
  /* Detail Menu */
  #footer_serviceMenu ul ul li {
    padding: 3px 0 3px 16px;
    margin-left: 20px;
  }
  
  
  
  
  /* ====================================================
      Footer - Service Site
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #footer_serviceSite {
    padding: 50px 50px 30px;
    justify-content: space-between;
  }
  #footer_serviceSite section {
    width: 48%;
    margin-bottom: 20px;
  }
  #footer_serviceSite section:not(:last-child) {
    margin-right: 0;
  }
  #footer_serviceSite section div {
    width: 75%;
  }
  
  /* -------------------------------
      Image
  ------------------------------- */
  #footer_serviceSite section .image {
    width: 20%;
  }
  
  /* -------------------------------
      Title
  ------------------------------- */
  #footer_serviceSite section h3 {
    font-size: 1.5rem;
  }
  
  
  
  
  /* ====================================================
      Footer - Sitemap
  ==================================================== */
  /* -------------------------------
      Menu
  ------------------------------- */
  #footer_menu {
    width: calc(70% - 101px);
    border-right: 1px solid #e1e4e6;
    padding: 50px;
  }
  #gFooter #footer_menu ul {
    width: 100%;
  }
  
  /* -------------------------------
      Project
  ------------------------------- */
  #footer_project {
    width: calc(30% - 50px);
    border-left: none;
    padding: 50px 0 100px 50px;
  }
  
  
  
  
  /* ====================================================
      Footer - Company
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #footer_company {
    padding-left: 50px;
  }
  
  
  
  
  
  
}













/* =======================================================================================================================

   MOBILE

======================================================================================================================= */
@media screen and (max-width: 896px) {
  .sp { display: block;}
  .pc { display: none;}
  
  /* ====================================================
      Layout
  ==================================================== */
  body,
  p {
    font-size: 1.3rem;
  }
  .row {
    padding: 120px 20px 0;
  }
  #container {
    padding-top: 10px;
  }
  
  /* -------------------------------
      Blank Icon
  ------------------------------- */
  a[target="_blank"] .blank::after {
    width: 8px;
    height: 8px;
    background-size: 8px;
    right: -14px;
  }
  
  
  
  
  /* ====================================================
      Header
  ==================================================== */
  #gHeader {
    width: calc(100% - 40px);
    height: 60px;
    padding: 0 20px;
  }
  
  /* Scroll Out */
  #gHeader.HeightMin {
    height: 60px;
    background: none;
    padding: 0 20px;
  }

  /* -------------------------------
      Logo
  ------------------------------- */
  #gHeader #logo {
    min-width: 120px;
  }
  #gHeader #logo a {
    width: 120px;
    padding: 25px 0;
  }
  
  /* -------------------------------
      Global Navigation
  ------------------------------- */
  #gNavi {
    width: auto;
  }
  
  /* -------------------------------
      Global Navigation - Sitemap
  ------------------------------- */
  #sitemapMenu {
    width: calc(100% - 40px);
    height: 100vh;
    padding: 0 20px;
}
  
  /* Logo */
  #sitemapMenu #sitemapLogo a {
    padding: 25px 0;
  }
  #sitemapMenu #sitemapLogo img {
    max-width: 120px;
  }
  
  #sitemapMenu .flex ul {
    width: 100%;
  }
  
  /* Layout - Service List */
  #sitemapMenu .flex ul:first-child li a {
    padding: 20px 0 15px;
  }
  #sitemapMenu .flex ul:first-child li span {
    font-size: 2.2rem;
    padding-left: 5px;
    padding-bottom: 5px;
  }
  #sitemapMenu .flex ul:first-child li strong {
    font-size: 1.2rem;
    padding-left: 5px;
  }
  
  /* Arrow */
  #sitemapMenu .flex ul:first-child li a::before {
    width: 7px;
    right: 14px;
  }
  #sitemapMenu .flex ul:first-child li a::after {
    width: 4px;
    height: 4px;
    right: 10px;
  }
  #sitemapMenu .flex ul:first-child li a:hover::before {
    right: 14px;
  }
  #sitemapMenu .flex ul:first-child li a:hover::after {
    right: 10px;
  }
  
  /* List */
  #sitemapMenu .flex ul:last-child {
    width: 100%;
    padding-right: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    padding-top: 20px;
  }
  #sitemapMenu .flex ul:last-child li {
    width: 49%;
    margin-bottom: 6px;
  }
  #sitemapMenu .flex ul:last-child li a {
    height: calc(100% - 20px);
    border-radius: 6px;
    padding: 10px 15px;
    display: block;
  }
  #sitemapMenu .flex ul:last-child li a span {
    font-size: 1.25rem;
    line-height: 1.5;
    display: block;
  }
  #sitemapMenu .flex ul:last-child li a[target="_blank"]::after {
    width: 8px;
    height: 8px;
    background-size: 8px;
    right: 15px;
  }
  
  /* Copyright */
  #sitemapMenu small {
    padding-top: 40px;
  }
  
  
  
  
  /* ====================================================
      Menu Button
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #menuBtn {
    top: 16px;
    right: 8px;
    position: fixed;
  }
  
  /* -------------------------------
      Text
  ------------------------------- */
  #menuBtn span:nth-child(4)::after {
    top: 5px;
  }
  

  
  /* ====================================================
      Page Path
  ==================================================== */
  #pagePath {
    display: none;
  }
  
  
  
  
  /* ====================================================
      Title
  ==================================================== */
  /* -------------------------------
      Page Title
  ------------------------------- */
  #main h1 {
    width: calc(100% - 40px);
    line-height: 1.6;
    padding: 80px 20px 100px;
  }

  /* Japanese */
  #main h1 strong {
    font-size: 2.2rem;
  }
  
  /* English */
  #main h1 span {
    font-size: 1.2rem;
    padding-top: 15px;
  }
  
  /* -------------------------------
      Contents Title
  ------------------------------- */
  #main h2 {
    padding-bottom: 50px;
  }
  
  /* English */
  #main h2 span {
    font-size: 2.4rem;
    padding-bottom: 10px;
  }
  
  /* Japanese */
  #main h2 strong {
    font-size: 1.2rem;
    padding-left: 30px;
  }
  #main h2 strong::before {
    width: 20px;
  }
  
  /* Catch copy */
  #main h3 {
    font-size: 1.5rem;
  }
  
  
  
  
  /* ====================================================
      Contents
  ==================================================== */
  /* -------------------------------
      Lead Text
  ------------------------------- */
  #main .lead {
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    padding: 0 20px 80px;
  }

  /* Attention */
  #main .lead small {
    font-size: 1rem;
    padding-top: 20px;
  }

  /* Link */
  #main .lead a {
    font-size: 1.3rem;
  }
  #main .lead small a {
    font-size: 1rem;
  }
  
  /* -------------------------------
      Button - Normal
  ------------------------------- */
  #main .btn_normal li.link a {
    font-size: 1.3rem;
    padding: 20px 60px;
  }
  
  /* Arrow */
  #main .btn_normal li.link a::before {
    width: 7px;
  }
  #main .btn_normal li.link a::after {
    width: 4px;
    height: 4px;
  }
  
  /* -------------------------------
      Contact List
  ------------------------------- */
  ul.contactList {
    display: block;
  }
  ul.contactList li {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 10px;
  }
  ul.contactList li a {
    padding: 20px 0 18px;
  }
  
  /* Japanese / Time */
  ul.contactList li a div span {
    font-size: 1rem;
  }
  
  /* English / TEL */
  ul.contactList li a div strong {
    font-size: 2rem;
    padding-bottom: 0;
  }
  ul.contactList li a div strong span {
    font-size: 1.4rem;
    margin-right: 8px;
  }
  
  /* -------------------------------
      Sticky Container
  ------------------------------- */
  .stickyContainer div.stickyBox {
    width: 100%;
  }
  .stickyContainer div.stickyBox article {
    padding-bottom: 120px;
  }
  .stickyContainer aside {
    display: none;
  }
  
  
  /* ====================================================
      Footer
  ==================================================== */
  /* -------------------------------
      Footer Navigation / 3column
  ------------------------------- */
  #gFooter ul:first-child li {
    width: 100%;
  }
  #gFooter ul:first-child li:not(:last-child) {
    width: 100%;
    border-bottom: 1px solid #e1e4e6;
    border-right: none;
  }
  #gFooter ul:first-child li a {
    text-align: left;
    padding: 15px 20px;
  }
  #gFooter ul:first-child li a strong {
    font-size: 1.4rem;
    line-height: 1.4;
    letter-spacing: 0.04em;
    display: inline-block;
  }
  
  /* Recruit */
  #gFooter ul:first-child li:last-child a strong {
    margin-right: 20px;
  }
  #gFooter ul:first-child li:last-child a strong::after {
    top: 0.4em;
    right: -14px;
  }
  
  /* English */
  #gFooter ul:first-child li a span {
    font-size: 0.9rem;
    font-weight: 400;
    display: inline;
    margin-left: 10px;
  }
  
  
  
  
  /* ====================================================
      Footer - Contact
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #footer_contact {
    padding: 80px 20px 60px;
  }
  
  /* -------------------------------
      Title
  ------------------------------- */
  #footer_contact h3 {
    font-size: 1.8rem;
    line-height: 1.8;
  }
  
  /* -------------------------------
      Text
  ------------------------------- */
  #footer_contact p {
    font-size: 1.3rem;
    padding: 10px 0 40px;
  }

  
  
  
  /* ====================================================
      Footer - Service Menu
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #footer_serviceMenu li a {
    font-size: 1.5rem;
    padding: 40px 20px 10px;
  }
  
  /* -------------------------------
      Branding
  ------------------------------- */
  #footer_serviceMenu #footer_branding a {
    padding-bottom: 40px;
  }
  
  /* Arrow */
  #footer_serviceMenu #footer_branding a::before {
    width: 7px;
    right: 24px;
  }
  #footer_serviceMenu #footer_branding a::after {
    width: 4px;
  	height: 4px;
    right: 20px;
  }
  
  /* Hover */
  #footer_serviceMenu #footer_branding a:hover::before {
    right: 24px;
  }
  #footer_serviceMenu #footer_branding a:hover::after {
    right: 20px;
  }
  
  /* -------------------------------
      Creative / Promotion
  ------------------------------- */
  #footer_serviceMenu #footer_creative,
  #footer_serviceMenu #footer_promotion {
    width: 100%!important;
    padding-bottom: 30px;
  }
  #footer_serviceMenu ul {
    padding: 0 20px;
  }
  #footer_serviceMenu ul a {
    font-size: 1.3rem;
    padding: 10px 0;
  }
  #footer_serviceMenu ul ul {
    padding: 0 0 10px;
  }
  
  /* Detail Menu */
  #footer_serviceMenu ul ul li {
    font-size: 1.2rem;
    padding: 3px 0 3px 16px;
    margin-left: 20px;
  }
  
  /* Creative */
  #footer_serviceMenu #footer_creative {
    border-right: none;
    border-bottom: none;
  }
  
  
  
  
  /* ====================================================
      Footer - Service Site
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #footer_serviceSite {
    padding: 50px 20px 30px;
    display: block;
  }
  #footer_serviceSite section {
    width: 100%;
    margin-bottom: 20px;
  }
  #footer_serviceSite section:not(:last-child) {
    margin-right: 0;
  }
  #footer_serviceSite section div {
    width: 75%;
  }
  
  /* -------------------------------
      Image
  ------------------------------- */
  #footer_serviceSite section .image {
    width: 20%;
  }
  #footer_serviceSite section .image img {
    border-radius: 6px;
  }
  
  /* -------------------------------
      Title
  ------------------------------- */
  #footer_serviceSite section h3 {
    font-size: 1.3rem;
    padding-bottom: 0;
  }
  
  /* -------------------------------
      Text
  ------------------------------- */
  #footer_serviceSite section p {
    font-size: 1rem;
    font-weight: 400;
  }
  
  
  
  
  /* ====================================================
      Footer - Sitemap
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #gFooter #footer_sitemap ul li a {
    font-size: 1.3rem;
    letter-spacing: 0.04em;
  }
  
  /* -------------------------------
      Menu
  ------------------------------- */
  #footer_menu {
    width: calc(50% - 20px);
    padding: 40px 0 30px 20px;
  }
  #gFooter #footer_menu ul {
    width: 100%;
  }
  #gFooter #footer_menu ul li a span {
    font-size: 1.3rem;
  }
  
  /* -------------------------------
      Project
  ------------------------------- */
  #footer_project {
    width: calc(50% - 40px);
    border-left: none;
    padding: 40px 20px;
  }
  
  /* Title */
  #footer_project h3 {
    font-size: 1.5rem;
    padding: 0 0 15px;
  }

  /* List */
  #gFooter #footer_sitemap #footer_project ul li a span {
    font-size: 1.2rem;
  }
  
  
  
  /* ====================================================
      Footer - Company
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #footer_company {
    padding-left: 20px;
  }
  
  /* -------------------------------
      Logo
  ------------------------------- */
  #flogo {
    width: 140px;
  }
  
  
  
  
  /* ====================================================
      Footer - Last Contents
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #footer_lastContents {
    padding: 50px 20px 20px;
    display: block;
  }
  
  /* -------------------------------
      Privacy/Site Policy
  ------------------------------- */
  #footer_lastContents ul:first-child li a {
    padding: 0;
  }
  
  
  /* -------------------------------
      Copyright
  ------------------------------- */
  #footer_lastContents #copyright {
    font-size: 1rem;
    padding: 10px 0 0;
  }
  
  
  
  
  /* ====================================================
      Page Top
  ==================================================== */
  #gFooter #pageTop a {
    padding: 20px 20px 30px;
  }
  
  /* Arrow */
  #gFooter #pageTop span::before {
    right: 22px;
  }
  #gFooter #pageTop span::after {
    right: 18px;
  }
  
  
  
  

}