@charset "utf-8";

/* ---------------------------------------------------
   File: company.css
   Version: 1.0.0
   Update: 2021-10-25
   Author: https://flowlab.co.jp

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



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

   WIDE DESKTOP LAYOUT

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

/* ====================================================
		common
==================================================== */

/* -------------------------------
		Main
------------------------------- */
#main {
	background-color: #f6f6f6;
}

/* -------------------------------
		Main Visual
------------------------------- */
#main #mainVisual .photo {
  background: url("../company/images/bg_header.jpg") no-repeat center center;
	background-size: cover;
}

/* -------------------------------
		Page Path
------------------------------- */
#pagePath {
	margin-bottom: -1px;
}





/* ====================================================
		greeting
==================================================== */

#main #greeting {
}

/* -------------------------------
		Layout
------------------------------- */
#main #greeting .comBox {
	max-width: 850px;
}

/* -------------------------------
		Title
------------------------------- */
#main #greeting .title {
	margin: 0 0 45px -5px;
	line-height: 1;
	font-weight: normal;
}
#main #greeting .title .inner {
	margin-bottom: 4px;
	padding: 30px 5px;
	color: #fff;
	font-size: 2.6rem;
	font-family: "Zen Old Mincho",sans-serif;
	display: block;
	position: relative;
}
#main #greeting .title .inner:last-child {
	margin-bottom: 0;
}
#main #greeting .title .inner span {
	position: relative;
	z-index: 10;
}
#main #greeting .title .inner::after {
	width: 120vw;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #ba0006;
	content: "";
}
#main #greeting .title .txt01 {
	margin-right: 98px;
}
#main #greeting .headLine05 {
	margin-bottom: 100px;
}

/* -------------------------------
		Name
------------------------------- */
#main #greeting .nameTxt {
	margin-top: 31px;
	text-align: right;
}
#main #greeting .nameTxt span {
	margin: -8px 0 0 9px;
	font-size: 2.6rem;
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	font-family: "Zen Old Mincho",sans-serif;
}

@media all and (max-width: 374px) {
	#main #greeting .title .inner {
		padding: 15px 18px 15px 0;
		font-size: 1.6rem;
	}
}





/* ====================================================
		philosophy
==================================================== */
#main #philosophy {
	color: #fff;
	background-color: #262827;
  padding-bottom: 50px;
}

/* -------------------------------
		Layout
------------------------------- */
#main #philosophy .comBox {
	max-width: 1060px;
}

/* -------------------------------
		Catch copy
------------------------------- */
#main #philosophy .textImg {
	margin-bottom: 150px;
	text-align: center;
}

/* -------------------------------
		Title
------------------------------- */
#main #philosophy .headLine05 {
}
#main #philosophy .textBox .headLine05 {
	margin-bottom: 57px;
	text-align: left;
	position: static;
}
#main #philosophy .textBox .headLine05 .small {
	padding: 10px 27px 6px;
	font-size: 1.6rem;
}
#main #philosophy .textBox .headLine05 .txt {
	margin-top: 23px;
	font-weight: normal;
	letter-spacing: 0.01em;
}
#main #philosophy .textBox .headLine05 .enTxt {
	top: -59px;
	text-stroke: 2px #fff;
	-webkit-text-stroke: 2px #fff;
	opacity: 0.03;
	text-align: center;
}

/* -------------------------------
		Text
------------------------------- */
#main #philosophy .textBox {
	margin-bottom: 120px;
	position: relative;
}
#main #philosophy .textBox::before {
	width: 110vw;
	height: 1px;
	position: absolute;
	top: 98px;
	right: calc(100% + 20px);
	background-color: #fff;
	content: "";
	z-index: 10;
}
#main #philosophy .textBox .inner {
	max-width: 900px;
}
#main #philosophy .textBox02 {
	margin: 0 -20px 120px 0;
}
#main #philosophy .textBox02 .inner {
	margin-left: auto;
}
#main #philosophy .textBox02 .headLine05 {
	margin-left: 83px;
}
#main #philosophy .textBox02::before {
	left: calc(100% + 20px);
	right: auto;
}
#main #philosophy .bgTxt {
	padding: 80px 100px;
	color: #262827;
	letter-spacing: 0.05em;
	background-color: #fff;
}
@media all and (max-width: 374px) {
	#main #philosophy .textBox .headLine05 .txt {
		font-size: 2.1rem;
	}
}

/* -------------------------------
		Forever foundmental spirits
------------------------------- */
#main #philosophy #forever-foundmental-spirits .inner {
  max-width: 100%;
}
#main #philosophy #forever-foundmental-spirits .bgTxt {
  width: 700px;
}



/* ====================================================
		Information
==================================================== */

/* -------------------------------
		Google Map
------------------------------- */
#googleMap {
  margin-top: 80px;
}
#googleMap iframe {
  width: 100%;
  height: 500px;
}







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

   TABLET - LARGE

============================================================================================================================================= */
@media all and (min-width: 897px) and (max-width: 1299px) {
  
  /* ====================================================
      greeting
  ==================================================== */
  /* -------------------------------
      Layout
  ------------------------------- */
  #main #greeting .comBox {
    max-width: 1100px;
    margin: 0 10%;
  }

  
  
  /* ====================================================
      philosophy
  ==================================================== */
  /* -------------------------------
      Text
  ------------------------------- */
  #main #philosophy .bgTxt {
    padding: 40px 60px;
  }
  #main #philosophy .textBox02 {
    margin: 0 0 120px 0;
  }
  
  /* -------------------------------
      Forever foundmental spirits
  ------------------------------- */
  #main #philosophy #forever-foundmental-spirits .bgTxt {
    width: auto;
  }
  
  
  
}





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

   MOBILE

============================================================================================================================================= */
@media all and (max-width: 896px) {
  
  
  
  /* ====================================================
      greeting
  ==================================================== */

  /* -------------------------------
      Title
  ------------------------------- */
  #main #greeting .headLine05 {
    margin-bottom: 60px;
  }
	#main #greeting .title .inner {
		padding: 15px 30px 15px 0;
		font-size: 1.8rem;
	}
	#main #greeting .title {
		line-height: 1.3;
	}
	#main #greeting .title {
		margin: 0 0 25px -5px;
	}
	#main #greeting .title .txt01 {
		margin-right: 24px;
	}
  
  /* -------------------------------
      Name
  ------------------------------- */
	#main #greeting .nameTxt span {
		font-size: 2rem;
	}
	#main #greeting .nameTxt {
		margin-top: 30px;
	}
  
  
  
  /* ====================================================
      philosophy
  ==================================================== */

	#main #philosophy {

  }
  
  /* -------------------------------
      Catch copy
  ------------------------------- */
  #main #philosophy .textImg {
    margin-bottom: 80px;
  }
	#main #philosophy .textImg img {
		width: 100%;
		max-width: 400px;
	}
  
  /* -------------------------------
      Title
  ------------------------------- */
	#main #philosophy .textBox .headLine05 {
		position: relative;
    margin-bottom: 30px;
	}
	#main #philosophy .textBox .headLine05 .small {
		padding: 6px 24px 4px;
		font-size: 1.4rem;
	}
	#main #philosophy .textBox .headLine05 .txt {
		margin: 14px 0 0;
		letter-spacing: 0;
	}
	#main #philosophy .bgTxt {
		padding: 20px;
		letter-spacing: 0;
	}
  
  /* -------------------------------
      Text
  ------------------------------- */
	#main #philosophy .textBox {
		margin-bottom: 50px;
	}
	#main #philosophy .textBox02 .headLine05 {
		margin-left: 0;
	}
	#main #philosophy .textBox02 {
		margin: 0;
    margin-bottom: 50px;
	}
	#main #philosophy .textBox .inner {
		max-width: 900px;
	}
  
  /* -------------------------------
      Forever foundmental spirits
  ------------------------------- */
  #main #philosophy #forever-foundmental-spirits .bgTxt {
    width: auto;
  }

  
  
}