@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500&display=swap');

/*---------------------------------------------------------------
Default Layout
---------------------------------------------------------------*/
html {
	overflow-y:scroll;
	font-size:62.5% !important;
}
body {
	width:100%;
	margin:0;
	padding:0;
	color:#474747;
	font-family:'Noto Serif JP',游明朝,"Yu Mincho",YuMincho,"ヒラギノ明朝 Pro W3","Hiragino Mincho ProN","Yu Mincho", "Hiragino Mincho ProN", "serif";
    font-weight: 500;
	line-height:1.8;
	font-size:16px;
	font-size:1.6rem;
    letter-spacing:0.1em;
	word-wrap : break-word;
	overflow-wrap : break-word;
    background: #f2f2f2;
}


/* --- link --- */
a,
a:link,
a:visited {
	color:#3362a0;
	outline:none;
	text-decoration:underline;
}
a:hover,
a:active,
a:focus {
	color:#000;
	text-decoration:underline;
    text-decoration: underline;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
/* --- 下線なし ＋ hoverで色変・下線なし--- */
.tel a,
.tel a:link,
.tel a:visited{
	text-decoration:none;
}
.tel a:hover,
.tel a:active,
.tel a:focus
{
	color:#000;
	text-decoration:none;
}
/* --- ボタン 文字色白・下線なし ＋ hoverで色変・下線なし --- */
a.btn,
a.btn:link,
a.btn:visited{
 	color:#fff!important;
	text-decoration:none!important;   
}
a.btn:hover,
a.btn:active,
a.btn:focus{
 	color:#fff!important;
	text-decoration:none;
    background: #000;
}

footer a.btn,
footer a.btn:link,
footer a.btn:visited{
 	color:#474747!important;
	text-decoration:none; 
    background: #fff;
}
footer a.btn:hover,
footer a.btn:active,
footer a.btn:focus{
 	color:#474747!important;
	text-decoration:none;
    background: #ccc;
}
/* --- header 通常文字色 ＋ hoverで色変なし・下線なし --- */
header a,
header a:link,
header a:visited,
.serviceArea a,
.serviceArea a:link,
.serviceArea a:visited{
	color:#474747;
	outline:none;
	text-decoration:none;
}
header a:hover,
header a:active,
header a:focus,
.serviceArea a:hover,
.serviceArea a:active,
.serviceArea a:focus{
	color:#474747;
	text-decoration:none;
}

.newsArea a,
.newsArea a:link,
.newsArea a:visited,
.worksArea a,
.worksArea a:link,
.worksArea a:visited,
.keyword a,
.keyword a:link,
.keyword a:visited{
	color:#474747;
	outline:none;
	text-decoration:none;
}
.newsArea a:hover,
.newsArea a:active,
.newsArea a:focus,
.worksArea a:hover,
.worksArea a:active,
.worksArea a:focus,
.keyword a:hover,
.keyword a:active,
.keyword a:focus{
	color:#000;
	text-decoration:none;
}

.pageList a,
.pageList a:link,
.pageList a:visited{
	text-decoration:none;
}

/* --- link 白色 ＋ hoverで色変あり・下線なし--- */
footer a,
footer a:link,
footer a:visited{
	color:#fff;
	outline:none;
	text-decoration:none;
}
footer a:hover,
footer a:active,
footer a:focus{
	color:#ccc;
	text-decoration:none;
}
a:hover img:not(.mv01 a:hover img),
a:active img:not(.mv01 a:active img),
a:focus img:not(.mv01 a:focus img) {
	opacity:0.8;
	filter:alpha(opacity=80);
	-o-opacity:0.8;
	-ms-filter:"alpha(opacity=80)";
	-moz-opacity:0.8;
	-webkit-opacity:0.8;
	transition:opacity .3s linear;
	-o-transition:opacity .3s linear;
	-ms-transition:opacity .3s linear;
	-moz-transition:opacity .3s linear;
	-webkit-transition:opacity .3s linear;
}
a img {
	border-style: none;
}
ul,
ol {
	margin:0;
	padding:0;
}
ul li,
ol li {
	list-style: none;
}
img {
	max-width:100%;
	height:auto;
}
/*---------------------------------------------------------------
General Layout
---------------------------------------------------------------*/
/* --- clear fix --- */
.cf {zoom:1;}
.cf:before,.cf:after {content:""; display:table;}
.cf:after {clear:both;}

.clear {clear:both;}

.img-l {
	float:left;
	margin:0 20px 20px 0;
}
.img-r {
	float:right;
	margin:0 0 20px 20px;
}
.txt{
    overflow: hidden;
}
.float-l {
	float: left;
}
.float-r {
	float: right;
}
.layout-l {
	text-align:left !important;
}
.layout-c {
	text-align:center !important;
}
.layout-r {
	text-align:right !important;
}
.layout-cm{
	text-align:center !important;
    margin: 0 auto;
}
.txt-large {
	font-size:20px;
	font-size:2.0rem;
}
.txt-small {
	font-size:12px;
	font-size:1.2rem;
}
.txt-red{
    color:#cf0e19;
}
.txt-read{
    line-height:2.0;
}
.dot{
border-bottom: 1px dotted #222;
}
.mgn_t0 {
	margin-top: 0px !important;
}
.mgn_t5 {
	margin-top: 5px !important;
}
.mgn_t10 {
	margin-top: 10px !important;
}
.mgn_t20 {
	margin-top: 20px !important;
}
.mgn_t30 {
	margin-top: 30px !important;
}
.mgn_t40 {
	margin-top: 40px !important;
}
.mgn_t60 {
	margin-top: 60px !important;
}
.mgn_t-5 {
	margin-top: -5px !important;
}
.mgn_t-10 {
	margin-top: -10px !important;
}
.mgn_t-20 {
	margin-top: -20px !important;
}
.mgn_t-30 {
	margin-top: -30px !important;
}
.mgn_t-40 {
	margin-top: -40px !important;
}
.mgn_t-60 {
	margin-top: -60px !important;
}
.mgn_b-5 {
	margin-bottom: -5px !important;
}
.mgn_b0 {
	margin-bottom: 0px !important;
}
.mgn_b5 {
	margin-bottom: 5px !important;
}
.mgn_b10 {
	margin-bottom: 10px !important;
}
.mgn_b20 {
	margin-bottom: 20px !important;
}
.mgn_b-20 {
	margin-bottom: -20px !important;
}
.mgn_b25 {
	margin-bottom: 25px !important;
}
.mgn_b30 {
	margin-bottom: 30px !important;
}
.mgn_b40 {
	margin-bottom: 40px !important;
}
.mgn_b60 {
	margin-bottom: 60px !important;
}

.mgn_r0 {
	margin-right: 0px !important;
}
.mgn_r5 {
	margin-right: 5px !important;
}
.mgn_r10 {
	margin-right: 10px !important;
}
.mgn_r20 {
	margin-right: 20px !important;
}
.mgn_r30 {
	margin-right: 30px !important;
}
.mgn_r40 {
	margin-right: 40px !important;
}

.mgn_l0 {
	margin-left: 0px !important;
}
.mgn_l5 {
	margin-left: 5px !important;
}
.mgn_l10 {
	margin-left: 10px !important;
}
.mgn_l20 {
	margin-left: 20px !important;
}
.mgn_l30 {
	margin-left: 30px !important;
}
.mgn_l40 {
	margin-left: 40px !important;
}

.pdg_t0 {
	padding-top: 0px !important;
}
.pdg_t5 {
	padding-top: 5px !important;
}
.pdg_t10 {
	padding-top: 10px !important;
}
.pdg_t20 {
	padding-top: 20px !important;
}
.pdg_t30 {
	padding-top: 30px !important;
}
.pdg_t35 {
	padding-top: 35px !important;
}
.pdg_t40 {
	padding-top: 40px !important;
}
.pdg_b0 {
	padding-bottom: 0px !important;
}
.pdg_b5 {
	padding-bottom: 5px !important;
}
.pdg_b10 {
	padding-bottom: 10px !important;
}
.pdg_b20 {
	padding-bottom: 20px !important;
}
.pdg_b30 {
	padding-bottom: 30px !important;
}
.pdg_b40 {
	padding-bottom: 40px !important;
}
.pdg_b60 {
	padding-bottom: 60px !important;
}

.pdg_r0 {
	padding-right: 0px !important;
}
.pdg_r5 {
	padding-right: 5px !important;
}
.pdg_r10 {
	padding-right: 10px !important;
}
.pdg_r20 {
	padding-right: 20px !important;
}
.pdg_r30 {
	padding-right: 30px !important;
}
.pdg_r40 {
	padding-right: 40px !important;
}
.pdg_r100 {
	padding-right: 100px !important;
}
.pdg_l0 {
	padding-left: 0px !important;
}
.pdg_l5 {
	padding-left: 5px !important;
}
.pdg_l10 {
	padding-left: 10px !important;
}
.pdg_l15 {
	padding-left: 10px !important;
}
.pdg_l20 {
	padding-left: 20px !important;
}
.pdg_l30 {

	padding-left: 30px !important;
}
.pdg_l40 {
	padding-left: 40px !important;
}
.pdg_l100 {
	padding-left: 100px !important;
}

.f10 {
	font-size: 10px !important;
}
.f12 {
	font-size: 12px !important;
}
.f14 {
	font-size: 14px !important;
}
.f16 {
	font-size: 16px !important;
}
.f18 {
	font-size: 18px !important;
}
.f20 {
	font-size: 20px !important;
}
.f21 {
	font-size: 21px !important;
}
.f22 {
	font-size: 22px !important;
}
.f24 {
	font-size: 24px !important;
}
.f26 {
	font-size: 26px !important;
}
.f28 {
	font-size: 28px !important;
}
.f30 {
	font-size: 30px !important;
}
.f36 {
	font-size: 36px !important;
}
.f40 {
	font-size: 40px !important;
}
.bold {
	font-weight: bold !important;
}
.fontnormal {
	font-weight:normal !important;
}
.letter-n{
	letter-spacing:normal !important;
}
.letter-w{
	letter-spacing:0.125em !important;
}
.border{
	border:1px solid #ccc;
	padding:1em 1.5em;
    margin: 0 0 1em;
}

.nowrap{
	white-space: nowrap;
}
.br{
	display: inline-block;
}
rt{
    font-size:10px;
    font-size:1.0rem;
    font-weight: normal;
}
.marker{
    background: linear-gradient( transparent 60%, #ffeb7c 60% );
    padding:0 0.2em;
}
.vertical-t{
    vertical-align: top !important;
}
.vertical-m{
    vertical-align: middle !important;
}
.vertical-b{
    vertical-align: bottom !important;
}
/* --- 注釈 --- */
.cmt p{
	padding-left: 1.5em;
	text-indent: -1.5em;
}
.cmt i{
	padding-left: 0;
	text-indent: 0;
}
.cmt p::before {
  content: "※";
  padding-right:0.5em;
}
.bgGray{
	background:#ccc url("../images/bg_gray.jpg") repeat 0 0;
}
.pointBox{
	background:#ccc  url("../images/bg_gray.jpg") repeat 0 0;
	padding:1em 2em 0.5em;
	display: inline-block;
	border-radius: 5px;
}
/*---------------------------------------------------------------
共通要素のレイアウト
---------------------------------------------------------------*/
#page {
	position: relative;
}
h1,h2,h3,h4,h5,h6,strong{
    font-weight: 500;
}
/* ヘッダー
----------------------------------------------------*/
header {
  display: flex;
  width: 100%;
  align-items: center;
  height:110px;
}
header h1,header p.logo {
/* padding:10px 5px 8px;*/
  padding: 10px 20px;
  display: inline-block;
}

header nav ul .meanmenuOnly {
    display: none;
}

/* --- nav ---*/
nav{  
margin-left: auto;
margin-right: 10px;
/* width:calc(100% - 380px);*/
}
nav ul:not(header nav ul.sub-menu){
  display: flex;
  justify-content: flex-end;
 align-items: center;
  flex-wrap:nowrap;
}

nav ul li{
/* width:calc(100%/6);*/
/*    min-width: 170px;*/
    margin:0;
    text-align: center;
	font-size:20px;
	font-size:2.0rem;
    line-height: 1.4;
}
nav ul li a{
  display: block;
  padding:10px 25px;
}

nav ul li+li{
    position: relative;
}
/*nav ul li+li:not(nav ul li ul li+li):before{
    content: "";
    display: block;
    height: 1em;
    border-left: 1px solid #999;
    position: absolute;
    top: 16px;
    left: 0;
    margin: auto;
}*/
/* --- 該当ページ　アンダーバー ---*/
header nav ul li a:after {
	display: block;
	content: "";
	width: 0%;
	height: 1px;
	background: #474747;
	margin: 5px auto 0;
	transition: .25s ease-out;
	-webkit-transition: .25s ease-out;
	-moz-transition: .25s ease-out;
	-o-transition: .25s ease-out;
	-ms-transition: .25s ease-out;
}
header nav ul li a:hover:after,
header nav ul li.current a:after {
	width: 90%;
} 
header nav ul li span.jpn{
	font-size:1.4rem;
}
footer .jpn{
	font-size:1.4rem;
    padding-bottom: 0;
}
/* --- subnav ---*/
header nav ul.sub-menu {
	position: absolute;
	left: 0;
	width: 100%;
	padding-right: 1px;
	z-index: 10000;
	opacity: 0;
	top: 80%;
	visibility: hidden;
	transition: .5s;

}
header nav ul.sub-menu li {
    display:inherit;
	border-right:none;
	width: 160%;
    background: rgba(255,255,255,.9);
	font-size: 18px;
	font-size: 1.8rem;
}
header nav ul.sub-menu li:last-child {
	border-bottom:none;
}
header nav ul li:hover ul.sub-menu {
	display:block;
	top: 100%;
	visibility: visible;
	opacity: 1;
}
header nav ul.sub-menu li a {
	display: block;
	height: auto;
	padding: 10px;
	text-align: left;
	font-weight: normal;
	letter-spacing: 0;
	border-right: none;
	border-bottom:1px solid rgba(0,0,0,.2);
}

header nav ul.sub-menu li a:hover,
header nav ul.sub-menu li a:active,
header nav ul.sub-menu li a:focus {
	color:#d04b4b;
	text-decoration:underline;
}
header nav ul.sub-menu li a:after {
	display: block;
	content: "";
	width: 0%;
	height: 0;
	background-color:none;
	margin:auto;
	transition:0 none;
	-webkit-transition:0 none;
	-moz-transition:0 none;
	-o-transition:0 none;
	-ms-transition:0 none;
} 
header div nav ul .meanmenuOnly {
    display: none;
}



/* メイン
----------------------------------------------------*/
.main {
	clear: both;
	width:100%;	
}
#index section{
	margin-bottom:0;
}
.main section{
    clear: both;
	margin-bottom:40px;
}

.main#index .inner{
	width:100%;
	max-width:1366px;
	margin:0 auto;
	padding:40px 0;
}
.main .inner{
	width:100%;
	max-width:1366px;
	margin:0 auto 60px;
	padding:0;
}


footer .inner{
	width:100%;
	max-width:1366px;
	margin:0 auto;
	padding:20px 0;
}
/* フッター
----------------------------------------------------*/
footer {
	clear:both;
    text-align: center;
    background:#474747 url("../images/bg_darkgray.jpg") repeat 0 0;
    color:#fff;
}
footer h2{
	margin:0 0 10px;
	font-size:3.0rem;
	padding:0;
    line-height: normal;
}

/* --- フッターリンク ページリンク--- */

.ftLink ul{
  display: flex;
  flex-wrap:wrap;
/*  justify-content:space-between;*/
  margin:1em 0;
    font-size:1.4rem;
}
.ftLink ul li{
width:calc(100%/8);
margin:0.5em 0;
letter-spacing: normal;
}
.ftLink ul li+li{
    position: relative;
}
.ftLink ul li+li::before{
    content: "";
    display: block;
    height: 1em;
    border-left: 1px solid rgba(255,255,255,.3);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
footer .copyright {
	font-size:1.4rem;
    line-height: 2.0;
    color:#fff;
}
/* --- pagetop --- */
.pagetop{
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 9999;
    margin: 0;
/*   background: rgba(0,0,0,.3);*/
	background: #000;
	opacity: 0.6;
    width:60px;
    height:60px;
/*    border-radius: 100%;*/
}
 .pagetop a{
   display: inline-block;
  width: 20px;
  height: 20px;
  border-top: 4px solid #fff;
  border-left: 4px solid #fff;
  transform: rotate(45deg);
  position:absolute;
  top:22px;
  right:20px;
}

.floating {
	position: fixed;
	right: 0px;
	bottom: 61px;
	display: none;
    z-index: 9999;
    writing-mode: vertical-rl;
}
.floating a {
	display: block;
	color: #fff;
	background: #000;
	padding:40px 15px;
	text-decoration: none;
	opacity: 0.6;
    width: 60px;
}
.floating a:hover, .pagetop:hover {
	opacity: 1;
}

/* --- パンくず --- */
.main .path {
    padding: 10px 0 0;
    font-size: 14px;
}

.main .path li {
    display: inline-block;
    list-style: none;
    padding: 0;
}
.main .path li:after {
    content: "＞";
    padding-left: 5px;
}
.main .path li:last-child:after {
    content: "";
}
/* 見出し
----------------------------------------------------*/
.pageTitle [class*=grid-], .pageTitle [class*=grid_], .pageTitle [class~=grid]{margin:0 0rem!important;}
.pageTitle{
    position: relative;
    margin-top: 5em;
    padding-bottom:3em;
    background-size:contain!important;
}
.pageTitle h1{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding:1em;
    text-shadow:0px 0px 5px rgb(255 255 255), 0px 0px 5px rgb(255 255 255), 0px 0px 5px rgb(255 255 255);
}
.main#concept .pageTitle{
background: #fff url("../images/pt_all.jpg") no-repeat left bottom;
}
.main#works .pageTitle{
background: #fff url("../images/pt_all.jpg") no-repeat left bottom;
}
.main#flow .pageTitle{
background: #fff url("../images/pt_all.jpg") no-repeat left bottom;
}
.main#contact .pageTitle,.main#thanks .pageTitle{
background: #fff url("../images/pt_all.jpg") no-repeat left bottom;
}
.main#news .pageTitle{
background: #fff url("../images/pt_all.jpg") no-repeat left bottom;
}
.main#privacy .pageTitle{
background: #fff url("../images/pt_all.jpg") no-repeat left bottom;
}
.main .titlePhoto{
    margin-top: -4em;
    text-align: center;
}

.main#index{
	margin:0;
}

.main#index h2,.main h1{
	font-size: 3.8rem;
    margin-bottom:0.5em;
}

.main#index h2 span,.main h1 span {
	display: flex;
	align-items: center;
	color: #474747;
	font-size: 16px;
	text-transform: uppercase;
}

.main#index h2 span::before,.main h1 span::before  {
	content: '';
	display: inline-block;
	margin:20px 10px;
	width: 20px;
	height: 1px;
	background-color: #474747;
}

footer h3{
    font-size:2.0rem;
}

.main h2:not(.main#index h2){
    clear: both;
	font-size:2.6rem;
	margin:40px -5px 15px;
	padding:0.5em 0.2em;
    border-bottom:2px solid #474747;
}
.main h2:not(.main#index h2):first-child{
	margin:30px -5px 15px;
}
.main h2.worksTitle{
	margin:0px -5px 15px!important;
	padding:0em 0.2em!important;
}
.main h3:not(.worksArea h3){
    clear: both;
	font-size:2.2rem;
	padding:0.5em 1em;
	margin:1em 0 0.5em;
	background: #fff url("../images/bg_gray.jpg") repeat left bottom;
    border-radius: 5px;
}
.worksArea h3{
	font-size:1.8rem;
	margin:0 0 0.5em;
}
.main .stArea h3 {
  position: relative;
  padding: 1em 1em;
  margin-bottom: 1.0em;
  text-align: center;
  background: none;
}

.main .stArea h3:before,
.main .stArea h3:after {
  position: absolute;
  content: '';
}

.main .stArea h3:after {
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}

.main .stArea h3:before {
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}



.main h4 {
	font-size:2.0rem;
	padding:0.5em 0.2em;
	margin-bottom:0.5em;
    border-bottom: 1px dotted #474747;
	}
.main h5{
	font-size:1.8rem;
	padding: 0.2em 0.2em 0;
	margin-bottom:0.5em;
    display: inline;
    background: linear-gradient( transparent 60%, #e7e7e7 60% );
}

.main p,footer p{
	padding-bottom:1em;
}
/* リスト
----------------------------------------------------*/
.main ul {
	margin-bottom: 1em;
}
.main ul li:not(.flowArea ul li, ul.path li,.main .pageIndex ul li) {
	position: relative;
	margin-bottom: 4px;
	padding-left: 20px;
}
.main ul li:not(.flowArea ul li, ul.path li,.main .pageIndex ul li):before {
	content: " ";
	position: absolute;
	left: 0.2em;
	top: 0.7em;
	width: 8px;
	height: 8px;
	background:#474747;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;	
	border-radius: 4px;
}
.main .mfp ul li:before{
	content:inherit;
	position:inherit;
	left: 0;
	top:0;
	width:0;
	height:0;
	background: none;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	-o-border-radius:0;
	-ms-border-radius:0;	
	border-radius:0;
}

.main ol {
	margin-bottom: 10px;
	padding-left: 1.7em;
}
.main ol li:not(.main ol li ul li){
	margin-bottom: 5px;
	list-style-type: decimal;
	list-style-position: outside;
}
.main ul.path li:before {
	width: 0;
	height: 0;
}
/* リンク 矢印
----------------------------------------------------*/
.link{
	width: fit-content;
	display: inline-block;
	position: relative;
	font-weight: 500;
	color: #222;
    padding:0 50px 0 0;
    margin: 0 15px 0 10px;
    text-align: left;
}
.link.more{
    margin: 20px 15px 20px 10px;
}
.link::before{
	content: '';
	width: 42px;
	height: 1px;
	position: absolute;
	background-color: #222;
	right: 0;
	bottom: 11px;
	transition: all .3s;
}
.link::after{
	content: '';
	width: 12px;
	height: 1px;
	position: absolute;
	background: #222;
	bottom: 15px;
	right: 0;
	transform: rotate(40deg);
	transition: all .3s;
}
.link:hover::before{ transform: translateX(10px);background:#000;}
.link:hover::after{ transform: translateX(10px) rotate(40deg);background:#000; }
footer .link::before,footer .link::after{background: #fff;}
footer .link:hover::before,footer .link:hover::after{background:#eee;}

/* リンクボタン
----------------------------------------------------*/
.btn{
	width: fit-content;
/*    line-height: 60px;
    height:60px;*/
	display: inline-block;
   background: #474747;
	position: relative;
	font-weight: 500;
	color: #fff;
    padding:15px 120px 15px 70px;
    margin: 20px;
      -webkit-transition: all .3s;
    transition: all .3s;
}
.btn::before{
	content: '';
	width: 42px;
	height: 1px;
	position: absolute;
	background-color: #fff;
	right: 20px;
	bottom: 26px;
	transition: all .3s;
}
.btn::after{
	content: '';
	width: 12px;
	height: 1px;
	position: absolute;
	background: #fff;
	bottom: 30px;
	right: 20px;
	transform: rotate(40deg);
	transition: all .3s;
}
.btn:hover::before{ transform: translateX(10px);}
.btn:hover::after{ transform: translateX(10px) rotate(40deg); }
.btnLong{
    width:80%;
    padding:20px 70px 20px 20px;
}
footer .btn::before{
	content: '';
	width: 42px;
	height: 1px;
	position: absolute;
	background-color: #474747;
	right: 20px;
	bottom: 30px;
	transition: all .3s;
}
footer .btn::after{
	content: '';
	width: 12px;
	height: 1px;
	position: absolute;
	background: #474747;
	bottom: 34px;
	right: 20px;
	transform: rotate(40deg);
	transition: all .3s;
}

/* --- PDF --- */
a[href$=".pdf"]:after {
    content: " ";
    display: inline-block;
    width: 27px;
    height: 24px;
     background: url(../images/pdf.png) no-repeat 3px bottom; 
}
.arrow a[href$=".pdf"]:after,
.thum a[href$=".pdf"]:after,
.download a[href$=".pdf"]:after,
.linkbtArea a[href$=".pdf"]:after{
    content: inherit;
    display: inherit;
    width: 0;
    height: 0;
    background: none;
}
/* --- テーブル --- */
.main table:not(.stylishTable) {
	width: 100%;
    margin-bottom: 20px;
}
.main table:not(.stylishTable) th,
.main table:not(.stylishTable) td {
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
    border-right: 1px solid #f2f2f2;
}
.main table:not(.stylishTable) th {
	text-align: center;
    font-weight: 500;
	white-space: nowrap;
	vertical-align: middle;
     background: url("../images/bg_gray.jpg") repeat 0 0; 

}
.main table:not(.stylishTable) td {
	vertical-align: top;
    background:#fff;
}
.vm{
	vertical-align: middle !important;
}
/* --- テーブル-stylishTable --- */
.main table.stylishTable {
	width: 100%;
    margin-bottom: 20px;
}
.main .stylishTable th,
.main .stylishTable td{
    padding: 10px;
}
.main .stylishTable th {
    border-bottom: solid 1px #474747;
	white-space: nowrap;
    font-weight: 500;
}
.main .stylishTable td {
    padding-left: 1em;
	border-bottom: solid 1px #ccc;
}

/* --- テーブル-横幅調整 --- */
.w20{width:20%!important;}
.w30{width:30%!important;}
.w40{width:40%!important;}
.w50{width:50%!important;}
.w60{width:60%!important;}
.w70{width:70%!important;}
.w80{width:80%!important;}
.w90{width:90%!important;}
.wCenter{margin: 0 auto;}


.tb{display:none!important;}
.sp{display:none!important;}
/*---------------------------------------------------------------
トップ
/* conceptArea
----------------------------------------------------*/
.conceptArea{
    background: url(../images/rainbow.png) no-repeat 0 40px;
    background-size: cover;
}
/* worksArea
----------------------------------------------------*/
.main#index .worksArea{
    background: url(../images/bg_gray.jpg) repeat 0 0;
}
.main .worksArea [class*=col-],.main .worksArea [class*=col_],.main .worksArea  [class~=col]{
	padding:0 1rem 3rem;
}
.main#index .worksArea [class*=col-],.main#index .worksArea [class*=col_],.main#index .worksArea  [class~=col]{
	padding:0 1rem 0rem;
}
.main .worksArea figure{
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
    position: relative;
    background: #f2f2f2;
}
.main .worksArea figure img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.main .worksArea .col p{
	padding-bottom:0.5em ;

}
.place{
padding:0.5em 0 0;
font-size:1.4rem;
}
.place span{
	background: #474747;
	color:#fff;
	padding:0 1em 0.1em;
}

.keyword span{
	font-size:1.3rem;
	border-bottom: 1px dotted #474747;
	margin-right: 1em;
	letter-spacing: normal;
}
.worksContents {
	max-width:800px;
	margin: 0 auto;
}
/* instaArea
----------------------------------------------------*/
.instaArea figure{
      width: 100%; 
}
.instaArea figure img,.instaArea figure video{
  width: 100%; 
  height: auto;
  aspect-ratio: 4 / 5; 
  object-fit: cover;
  display: block;
}

/* newsArea
----------------------------------------------------*/
#index .newsArea{
    width: 100%;
    background: url(../images/bg_gray.jpg) repeat 0 0;
}
#index .newsArea dl{
	margin: 0 auto 1.5em;
	overflow: hidden;
}
.newsArea dl dt{
	clear: both;
	float: left;
    padding:1em 0 0;
}
.newsArea dl dd {
	padding: 1em 0 1em 8em;
    text-align: left;
}
time{

}


/*---------------------------------------------------------------
下層ページ
---------------------------------------------------------------*/
/* コンセプト
----------------------------------------------------*/
.stArea{
	
}
.stArea [class*=col-], .stArea [class*=col_],.stArea [class~=col]{
	padding:0 2.5rem 2.5rem;
}

/* 工事の流れ
----------------------------------------------------*/
.flowArea {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flowBox {
  padding-left: 0;
  border-bottom: solid 1px #d2d2d2;
width: 100%;
}

.flowBox > li {
  list-style-type: none;
  display: flex;
  padding: 20px 0;
  border-top: solid 1px #d2d2d2;
}
.flowBox > li:first-child {
  list-style-type: none;
  display: flex;
  padding: 20px 0;
  border-top: none;
}
.flowBox > li dl dt {
  font-size: 1.2em;
  line-height: 2;
  font-weight: bold;
  margin-bottom: 10px;
}

.flowBox > li .flowIcon {
  line-height: 1;
  font-size: 2em;
  font-weight: bold;
  color: #E26B5D;
  text-align: center;
  width: 70px;
  position: relative;
  margin-top: 0;
}

.flowBox > li .flowIcon::before {
  content: 'STEP';
  font-size: 0.3em;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 1px;
}

.flowBox > li .flowIcon::after {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 60px);
  background-color: #999;
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  margin: auto;
}

.flowBox > li dl dd {
  margin: 0;
}

.flowBox > li dl {
  width: calc(100% - 70px);
  margin-top: 0.8em;
}

.prTxt{
    text-align: left!important;
}
.prTxt th{
    text-align: center;
}
.hosyou{
    text-align: center;
}

.contactArea [class*=col-],.contactArea [class*=col_],.contactArea [class~=col]{
    padding:0 2rem 1rem;
}

/* pageList
----------------------------------------------------*/
.pageList {
    text-align: center;
    margin: 2em 0;
    clear: both;
}

/* PREV */
.pageList .prev {
    display: inline-block;
    margin: 7px 15px 0 0;
}
.pageList .prev a {
    margin: 0em auto;
    position: relative;
    padding-left:20px;
    color:#3362a0 !important;

}
.pageList .prev a:hover,
.pageList .prev a:active,
.pageList .prev a:focus
 {
     color:#000 !important;
}
/* 矢印が右に移動 */
.pageList .prev a::after,
.pageList .prev a:link::after,
.pageList .prev a:visited::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top:42%;
    left: 10px;
    /*矢印の形状*/
    width: 7px;
    height: 7px;
    border-top: 2px solid #3362a0;
    border-right: 2px solid #3362a0;
    transform: rotate(-135deg);
    /*アニメーションの指定*/
    transition: all .3s;
}
/*hoverした際の移動*/
.pageList .prev a:hover::after,
.pageList .prev a:active::after,
.pageList .prev a:focus::after{
    left: 5px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
/* NEXT */
.pageList .next {
    display: inline-block;
    margin: 7px 0 0 15px;
}
.pageList .next a {
    margin: 0em auto;
    position: relative;
    padding-right:20px;
    color:#3362a0 !important;

}
.pageList .next a:hover,
.pageList .next a:active,
.pageList .next a:focus
 {
     color:#000 !important;
}
/* 矢印が右に移動 */
.pageList .next a::after,
.pageList .next a:link::after,
.pageList .next a:visited::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top:42%;
    right: 10px;
    /*矢印の形状*/
    width: 7px;
    height: 7px;
    border-top: 2px solid #3362a0;
    border-right: 2px solid #3362a0;
    transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: all .3s;
}
/*hoverした際の移動*/
.pageList .next a:hover::after,
.pageList .next a:active::after,
.pageList .next a:focus::after{
    right: 5px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}

/* LIST */
.pageList .list {
    display: inline-block;
    vertical-align: middle;
}
.pageList .list a,
.pageList .list span {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding-top: 5px;
    color: #474747;
    text-align: center;
    vertical-align: top;
    background: #fcfcfc;
/*    border: 1px solid #474747;*/
    border-radius: 40px;
}
.pageList .list a:hover {
    color: #fff;
    background: #474747;
    vertical-align: top;
/*    border: 1px solid #474747;*/
}
.pageList .list span.current_page {
    color: #fff;
    background: #474747;
}

/* pageIndex
----------------------------------------------------*/
.main .pageIndex {
    text-align: center;
    margin-bottom: 30px;
}

.main .pageIndex ul li {
    display: inline-block;
    padding: 0  0 0 20px;
	position: relative;
}

.main .pageIndex ul li:before {
    content: "│";
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    background: none;
    color: #ccc;
}
.main .pageIndex ul li:first-child:before {
    content: "";
}
/* 地図
----------------------------------------------------*/
/* グーグルマップ・レスポンシブレイアウト */
.gmap{
    position : relative;
    height : 0;
    padding-bottom : 100%; /* 縦横比の指定 */
    overflow : hidden;
}

.gmap iframe,
.gmap object,
.gmap embed{
    position : absolute;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
}
.gcal{
    text-align: center;
}
.gcal iframe {
  width: 100%;
  height: 400px;
}