/* ----------------------------------------------------------

common

---------------------------------------------------------- */
/*html {visibility:hidden}
html.wf-active {visibility:visible}
*/
/*pc + sp*/
.pc   {display:block}
.sp   {display:none}
@media only screen and (max-width:991px) {
.pc   {display:none}
.sp   {display:block}
}

div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dt,dd  {
padding:0;
margin:0;
line-height:1.8em;
box-sizing:border-box;
outline:none;/*
font-family:sans-serif;
*/
font-family:'Noto Sans JP', sans-serif;
}
h1,h2,h3,h4,h5,h6   {font-weight:normal;padding:0;margin:0}
ul,ul li            {list-style:none;padding:0;margin:0}
ol li  {margin-left:1.35em}
dl,dl dt,dl dd      {padding:0;margin:0}

* html .clearfix,
*+html .clearfix    {zoom:1}
.clearfix:after     {height:0;visibility:hidden;content:".";display:block;clear:both}

.center       {text-align:center}
.left         {text-align:left}
.right        {text-align:right}
.strong       {font-weight:bold}
.large        {font-size:120%}
.red          {color:#C90000}

a             {cursor:pointer}
a:hover       {cursor:pointer}

img           {vertical-align:middle;-ms-interpolation-mode:bicubic;max-width:100%}
.img_border   {border:1px solid #dedede;box-sizing:border-box}
.alignnone,
.alignleft,
.alignright,
.aligncenter  {max-width:100%;margin:0;width:auto}
.alignnone    {margin-bottom:5px} 
.alignleft    {display:inline;float:left;margin-top:5px;margin-right:25px;margin-bottom:25px}
.alignright   {display:inline;float:right;margin-top:5px;margin-left:25px;margin-bottom:25px}
.aligncenter  {clear:both;display:block;margin-left:auto;margin-right:auto;text-align:center}
 @media only screen and (max-width:767px) {
.alignnone,
.alignleft,
.alignright,
.aligncenter  {display:block;float:none;text-align:center;margin:1em auto}
}

/*wefont*/
.tenmincho    {font-family:ten-mincho, serif;font-style:normal;font-weight:300;letter-spacing:-0.01em}
.yumincho     {font-family:"Yu Mincho", "YuMincho", serif}
@font-face    {font-family:"Yu Mincho";src:local("Yu Mincho Demibold");font-weight:500}

/* ----------------------------------------------------------

btn

---------------------------------------------------------- */
.btn {
max-width:100%;
position:relative;
text-align:center;
display:block;
font-size:120%;
font-weight:500!important;
border-radius:200px;
box-sizing:border-box;
text-decoration:none
}
.btn_primary        {background:#afafaf;border:1px solid #afafaf;color:#fff;padding:1em 2.5em;}
.btn_back        	{background:#afafaf;border:1px solid #afafaf;color:#fff;padding:1em 2.5em;}
.btn_secondary      {background:#fff;border:1px solid #212121;color:#212121}
.btn:after,
.btn:before			{position:absolute;font-family:"Font Awesome 5 Free";font-weight:900}
.btn_primary:after  {top:37.5%;right:1em;content:'\f054';color:#fff;font-size:100%;line-height:normal}
.btn_back:before  	{top:37.5%;left:1em;content:'\f104';color:#fff;font-size:100%;line-height:normal}
.btn_secondary .btn:after  {color:#212121}
@media only screen and (max-width:979px) {
.btn {padding:1em 1.5em}
}

/* ----------------------------------------------------------

Base Layout

---------------------------------------------------------- */
body,
div         {position:relative;margin:auto}
.section    {position:relative}
body        {
font-feature-settings:"pkna" 1!important;
line-break:strict!important;
overflow-wrap:break-word!important;
word-wrap:break-word!important;
text-align:justify;
box-sizing:border-box;
width:100%;
color:#321e21;
min-width:1px;
overflow-x:hidden;
}
.container        		{max-width:1024px;margin:auto}
.container_middle 		{max-width:980px;margin:auto}
.container_narrow 		{max-width:880px;margin:auto}
@media only screen and (max-width:991px) {
body              		{-webkit-text-size-adjust:100%;-webkit-overflow-scrolling:touch}
.container				{max-width:100%;padding-left:1em;padding-right:1em;box-sizing:border-box}
.container_middle,
.container_narrow 		{max-width:100%;box-sizing:border-box}
}

/* ----------------------------------------------------------

Header

---------------------------------------------------------- */
/*header*/
.header             	{background:#fff}
.header_container   	{display:block;width:100%}
.header #logo       	{flex-basis:50%;text-align:left;margin:auto;padding:1em 2em;}
.header #logo img   	{width:80px}
.header_img         	{width:100%;padding:0;margin:0;}
.header_img img     	{width:100%}
@media only screen and (max-width:551px) {
.header #logo       	{padding:0em 0.5em 0.5em}
.header #logo img   	{width:68px}
}
@media only screen and (min-width:552px) and (max-width:991px) {
.header #logo       	{padding:0.25em 0.5em 0.5em}
}

/*home_header*/
.home_header     			{width:100%;height:75vh;z-index: 111111111;background:#fff;}
.home_header_container     	{display:flex;flex-wrap:wrap;justify-content:left;align-items:center;height: 100%}
.home_header_title         	{text-align:center;font-size:465%;font-weight:900;line-height: 1.12345678em;}
.home_header_title #text	{line-height:1.23456789em;font-weight:900;margin-bottom:0.5em}
/*.home_header_title .strong	{color: #dc6991}*/
.home_header_description	{display:block;font-size:16pt;font-weight:400;letter-spacing:-0.05em;line-height:normal;margin-bottom:0.25em}
@media only screen and (max-width:551px) {
.home_header_title         	{font-size:400%;}
.home_header_description	{font-size:9pt}
}
@media only screen and (min-width:552px) and (max-width:991px) {
.home_header_title         	{font-size:365%;}
}

/*fat-nav*/
.hamburger              {display:block;top:2.5em;right:2em}
.hamburger .hamburger__icon, 
.hamburger .hamburger__icon:before, 
.hamburger .hamburger__icon:after {background-color:#282828;width:40px}
.nav__wrapper           {text-align:center}
.nav__wrapper a         {cursor:pointer}
.main_menu_list li      {letter-spacing:0.15em;font-size:140%;font-weight:700!important}
.main_menu_list li a    {display:block;padding:1em 0}
@media only screen and (max-width:551px) {
.hamburger              {top:1em;right:1.5em}
}
@media only screen and (min-width:552px) and (max-width:991px) {
.hamburger              {top:1.5em;right:1.5em}
.main_menu_list li      {font-size:120%}
.main_menu_list li a    {display:block;padding:20px 0}
}

/* ----------------------------------------------------------

Content

---------------------------------------------------------- */
/*section*/
.section_header				{display:block;padding:5em 0;}
.section_title,
.section_single_title		{font-weight:600;position:relative;text-align:center;padding-top:0.5em;font-size: 220%}
.section_title:after,
.section_single_title:after	{
content:'';
display:block;
width:80px;
margin:auto;
text-align:center;
margin-top:0.5em
}
.home_about .section_title:after {border-top:2px solid #fff;;}
.home_works .section_title:after {border-top:2px solid #383838;;}
/*
.section_catch      	{flex-basis:72.5%;display:block;font-size:114%;line-height: 1.89em}
.section_single_title	{flex-basis:100%;font-size:220%!important;line-height:1.345678em;font-weight:900;margin:0;padding:0.1254em 0;}
*/
.section_catch,
.section_single_catch	{display:block;font-size:114%;margin:2.5em 0 0;}
.section_body       	{padding-bottom:5em}
@media only screen and (max-width:551px) {
.section_title      	{flex-basis:100%;margin:0 auto 1em;padding:0.1254em 0;text-align:center;}
.section_catch      	{flex-basis:100%;font-size:114%;line-height: 1.89em}
.section_body       	{padding-bottom:2.5em}
}

/*parallax_bg
.home .parallax_bg	{
width: 100%;
height: 500px;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
@media only screen and (max-width:551px) {
.home .parallax_bg	{
width: 100%;
height: 500px;
}
}*/

/*bread*/
.bread			{padding:1em 0;background:#f5f5f5}
.bread p		{font-size:90%}
.bread a		{color:#000}

/* ----------------------------------------------------------

Home

---------------------------------------------------------- */
/*about*/
.home_about 				{background:url(../img/about.jpg) top center no-repeat;background-size:cover}
.home_about .section_title	{text-align:center;color: #fff}
.home_about figure			{text-align:center;margin:2.5em auto;padding:2.5em 0 0}
.home_about figure img		{width: 100%}

/*works*/
.home_works             	{background:#f5f5f5;padding:0 0 5em}
.home_works figure			{margin:0 auto;padding:0}
.home_works figure img		{width: 100%}
.home_works .form_submit	{max-width:256px;margin:3em auto;text-align:center;}

/* ----------------------------------------------------------

Works

---------------------------------------------------------- */
/*works*/
.works             			{background:#f5f5f5;padding-bottom:5em}
.works_nav_list_container   {padding:0 0 1em;margin:-1.5em auto 2.5em} 
.works_nav_list             {display:block;text-align:center;margin:auto:width: 100%}
.works_nav_list li          {display:inline-block;vertical-align: middle;margin:0 0.15em;} 
.works_nav_list li a        {display:block;text-decoration: none}
.works_nav_list li a span   {
background: #afafaf;
padding:0.75em 1.5em;
border-radius:60px;
text-align:center;
font-weight: 600;
color: #fff
}
.works_list_container   	{padding:0}
.works_list             	{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:top;}
.works_list li          	{flex-basis:48%;margin:1% auto;}
.section_single_body figure 		{padding:0;margin:1.5em auto;}
.section_single_body .form_submit	{max-width:200px;margin:5em auto 2.5em;text-align:center;}
@media only screen and (max-width:551px) {
.works_list li          	{flex-basis:100%;margin:0.75em auto;}
.works_nav_list li          {margin:0.5em 0.15em} 
.works_nav_list li a span   {font-size: 80%}
}
@media only screen and (min-width:552px) and (max-width:991px) {
}

/* ----------------------------------------------------------

Page

---------------------------------------------------------- */
/*about*/
.section.about			{background:#fff;padding-bottom:5em}

/*company*/
.section.company    	{background:#f5f5f5;padding-bottom:5em}
.company_list dl    	{
border-bottom: 1px dotted #aaa;
padding:2em 0;
margin:auto;
display:block;
width:100%;
font-size: 106%
}
.company_list dl dt  	{display:inline-block;width:25%;font-weight:600}
.company_list dl dd  	{display:inline-block;flex-basis:74%}
@media only screen and (max-width:551px) {
.company_list dl    	{padding:1em 0;}
.company_list dl dt  	{display:block;width:100%;}
.company_list dl dd  	{display:block;flex-basis:100%}
}
@media only screen and (min-width:552px) and (max-width:991px) {
}

/*privacy*/
.section.privacy		{background:#f5f5f5;padding-bottom:5em}

/*contact*/
.section.contact			{background:#f5f5f5;padding-bottom:5em}
@media only screen and (max-width:551px) {
.contact_container iframe   {width:100%!important;height:110vh;border:none} 
}
@media only screen and (min-width:552px) and (max-width:991px) {
.contact_container iframe   {width:100%!important;} 
}

/* ----------------------------------------------------------

footer

---------------------------------------------------------- */
/*footer*/
.footer                 	{background:#fff;padding:5em 0;margin:auto;}
.footer_logo            	{position:relative;padding:2.5em 0 0;margin:auto;text-align:center;}
.footer_logo_img        	{display:block;}
.footer_logo_img img    	{max-width:128px}
.footer_logo_text       	{display:block;font-size:118%;font-weight:700;padding:1em 0;letter-spacing: -0.05em}
.footer_menu,
.footer_sns,
.footer_copyright       	{padding:1.5em 0 0;margin:auto;text-align:center;}
.footer_menu_list li,
.footer_sns_list li     	{display:inline-block;}
.footer_menu_list li a  	{display:block;font-size:126%;padding:0 0.85em;text-decoration:none;color:#555;font-weight:400}
.footer_sns_list li a   	{display:block;font-size:320%;padding:0 0.21em;text-decoration:none;color:#ccc}
.footer_copyright address 	{font-style:normal;font-size:96%;color:#afafaf}
@media only screen and (max-width:551px) {
.footer                 	{padding:3.5em 0}
.footer_logo_img img    	{max-width:78px}
.footer_logo_text       	{font-size:98%}
.footer_menu_list li a  	{font-size:90%;}
.footer_sns_list li a   	{font-size:240%;}
.footer_copyright address 	{font-size:9pt}
}
@media only screen and (min-width:552px) and (max-width:991px) {
}

/*pagetop
.pagetop    {position:fixed;z-index:10000;right:20px;bottom:20px;margin:0 auto;width:40px;height:40px}
.pagetop a  {font-size:140%;color:#fff;background:#bababa;border-radius:100px;display:block;text-align:center;width:20px;height:20px;padding:12px}
*/


/* ----------------------------------------------------------

loading

---------------------------------------------------------- */
/*loading */
.loader-bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 123456789;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  font-size: 10px;
  margin: auto;
  text-indent: -9999em;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #999 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #999 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader:before {
  width: 50%;
  height: 50%;
  background: #fff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}

.loader:after {
  background: #fff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}