@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
 u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, section,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    font: inherit;
    vertical-align: baseline;
	list-style:none;
	text-decoration:none;
}
header, nav, article, aside, section, footer {
    display:block;
}
img{
	border:none;}
.clear {
	clear:both;
}
.clearfix {zoom:1;}
.clearfix:after {
  content: ""; 
  display: block; 
  clear: both;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    }
html { font-size: 62.5%;
}
body{
	font-family: "游ゴシック体","Yu Gothic", YuGothic, "メイリオ", sans-serif;
  word-wrap:break-word;
/*文字サイズ自動調整OFF*/
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color:#000;

}
body{
	/*chrome fontが大きくなってしまう対策*/
	font-size:18px;
	font-size:1.8rem;

	background:#fff;
}
table{word-break: break-all;}

/* リンク設定
------------------------------------------------------------*/
a {
	margin: 0;
	padding: 0;
	text-decoration: none;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	font-size: 100%;
}
a:link, a:hover, a:active, a:visited {
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	outline: none;
	color: #000;
}

img{
	max-width:100%;
	height: auto;
}

.wrap{
	margin:0 auto;
	padding: 0px;
}
.main{
	background: #eee;
/*	background: url("../images/bg.png") repeat;*/
}

/*---------------ページトップへ戻る---------------*/
#page-top {
	position: fixed;
	z-index: 9999;
	bottom: 5px;
	right: 5px;
	font-size: 12px;
}
#page-top a {
	text-decoration: none;
	background: #fff;
	color: #333;
	width: 60px;
	padding: 5px 0px;
	text-align: center;
	display: block;
	border-radius: 5px;
	border-radius: 2px;
	box-shadow: 3px 3px 2px rgba(0,0,0,0.4);
}
#page-top a:hover {
	text-decoration: none;
/*	background: #fda9a9;*/
	opacity:0.7;
	color: #333;
}

/*---------------ページトップへ戻る---------------*/

.box{
	text-align:center;
	margin:0 auto;
}
.inner{
	max-width:960px;
	margin:0 auto;
}

.box .L,
.box .R{
	display:table-cell;
	vertical-align:top;
}

.box p{
	line-height:1.8;
/*	margin-bottom:10px;*/
}

.box .text{
	padding:20px 30px;
	text-align:left;
}
.box .text .red{
	color:#F00;
	font-size:20px;
	font-weight:bold
}
	
.box img{
	display:block;
	margin:0 auto;
background: #fff;
/*	padding: 20px 10px 10px 10px;*/
}


.footerWrp {
	width: 100%;
	background: #1ba3c4;
}

.footer {
	max-width: 1000px;
	margin: 0px auto 0px auto;
	padding: 10px 10px;
	color: #fff;

}
.copy1 {
	font-size: 14px;
	text-align: center;
	font-weight:bold;
}
.copy2 {
	font-size: 10px;
	text-align: right;
}
.copy3 {
	font-size: 10px;
	text-align: right;
}



.footer .management {
  margin-top: 18px;
  font-size: 12px;
}


.header {
	width: 100%;
	margin: 0px auto;
	padding: 0px 0px;
	background: #f3d900;
}
.headerTitle {
	max-width: 1000px;
	margin: 0px auto;
	position: absolute;
	z-index: 900;
}
.headerTitle img{
	width: 100%;
}



/*----- 追記 -----*/

.TopTitle {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.TopTitle img{
	width: 100%;
}


/*----- top固定メニュー -----*/

#nav {
  list-style: none;
  overflow: hidden;
}
 
#nav li {
  width: 140px;
  text-align: center;
  background-color: #fff;
  float: left;
  height: 50px;
  line-height: 50px;
  margin-right: 2px;
}
 
#nav li a {
  text-decoration: none;
  color: #1ba3c4;
  font-weight: bold;
  padding: 20px;
}
.nav_TopImg {
}
.nav_TopImg a {
padding: 0px 5px !important;
display: block;
}

.nav_TopImg img{
	width: 100%;
	vertical-align: middle !important;
}

.FixedTopBase {
	width: 100%;
/*	background: #fff;*/
	background: rgba(255,255,255,0.9);
	border-bottom: solid 1px #ddd;

	z-index: 999;
	position:fixed;
	top: 0px;
}

.FixedTop {
	MAX-width: 1700px;
	margin: 0px auto;
	padding: 0px 0px 0px 0px;
}


/* ----- navi sp ----- */
/* https://kinocolog.com/css_drawermenu/ */

.header-fixed{
    /* 追従 */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    
    padding: 10px;
    z-index: 100000;
/*    background-color: #00AA13; */
background: rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
}

.header-fixed-in{
    position: relative;
    height: 30px; /* ヘッダーの縦幅を指定 */
}

/* チェックボックスは非表示（ラベルで操作するため） */
#header-hamburger{
    display: none;
}

/* ハンバーガーアイコンの位置を指定（左） */
.header-hamburger-icon{
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
/* ハンバーガーアイコンの三本線をCSSで書く（上下の線） */
.header-hamburger-icon span{
    display: block;
    position: relative;
    width: 30px;
    height: 20px;
    border-top: solid 4px #1ba3c4;
    border-bottom: solid 4px #1ba3c4;
    box-sizing: border-box;
    cursor: pointer;
}
/* ハンバーガーアイコンの三本線をCSSで書く（中央の線） */
.header-hamburger-icon span:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 4px;
    top: 4px;
    background-color: #1ba3c4;
}
/* 中央にサイトロゴを表示 */
.header-site-icon{
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
.header-site-icon img{
    width: auto;
    height: 100%;
}

/* 背景を暗くする（デフォルトは非表示） */
#header-close{
    display: none;
    position: fixed;
    z-index: 150000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
}

/*スライドで表示させるコンテンツ*/
#header-content{
    z-index: 200000;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 60%;
    max-width: 300px;
    box-sizing: border-box;
    padding: 5px;
    transition: .3s;
    background: #FFF;
    /* デフォルト非表示（左側の見えないところに位置させる） */
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

/*チェックが入ったらコンテンツを表示*/
#header-hamburger:checked ~ #header-content{
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

/*チェックが入ったらコンテンツ外を暗くする*/
#header-hamburger:checked ~ #header-close{
    display: block;
    opacity: .7;
}




#header-content ul.cp_list {
	padding:0.5em;
	list-style-type:none;
}
#header-content ul.cp_list li a{
	position:relative;
	padding: 0em 0.3em 0.3em 1.3em;
	border-bottom: solid 1px #bbb;
	display: block;
}
#header-content ul.cp_list li a:before {
	position:absolute;
	content:'';
	top: 0.5em;
	left: 0.2em;
	height:0;
	width:0;
	border-style: solid;
	border-width: 6px 0 6px 9px;
	border-color: transparent transparent transparent #1ba3c4;
}

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


.FixedTop img{
vertical-align: bottom;
}
.FixedTop a:hover{
	opacity:0.6;
	cursor:pointer;
}

.HeaderImg01 {
	width: 100px;
	float: left;
	margin-left: 5px;
}

.HeaderImg02 {
	width: 180px;
	float: right;
	background: #2db73e;
	margin: 0px 5px 5px 0px;
	padding: 3px 10px;
	border-radius: 4px;
}
.HeaderImg01 img{
	padding: 0px;
/*	vertical-align: middle;*/
}
.HeaderImg02 img{
	padding: 0px;
	vertical-align: middle;
}
/*----- top固定メニュー -----*/

.ShadowBox {
/*	max-width: 1700px;*/
	max-width: 1500px;
	margin: 0px auto;
	padding: 0px 10px;
	background: rgba(255,255,255,0.5);

}
.ShadowBox img {
	vertical-align: bottom;
}
.ShadowBox_top {
	width: 100%;
	margin: 0px auto 0px auto;
	padding: 0px;
/*	background: url("../images/TopBK.jpg") no-repeat center;
	overflow: hidden;*/
	background: #ccc;
}

.ShadowBox_top .inner{
	margin: 0px auto;
	max-width: 1700px;
	padding: 0px 0px;
	position: relative;
}



.ShadowBox_top .inner .TitleImg {
	display: inline-block;
	position: absolute;
	bottom: 45%;
	left: 5%;
	width: 48%;
}

.ShadowBox_top .inner img{
	vertical-align: bottom;
}


.FormLinkArea {
	position: relative;
}

.FormLinkBtn {
	margin: 20px auto;
}
.FormLinkBtn img{
	display: block;
	margin: 0px auto;
	max-width: 80%;
}
.FormLinkBtn a:hover {
	opacity:0.7;
	cursor:pointer;
}


.Area_W {
	width: 100%;
	margin: 0px auto 0px auto;
	padding: 0px;
	background: #FFF;
	overflow: hidden;
}


.Area01 {
	width: 100%;
	margin: 0px auto 0px auto;
	padding: 0px;
	background: url("../images/AreaBKhukan.jpg") center;
	overflow: hidden;
	background-attachment: fixed /* 背景固定 */
}
.Area02 {
	width: 100%;
	margin: 0px auto 0px auto;
	padding: 0px;
	background: url("../images/w_map.jpg") center;
	overflow: hidden;
	background-attachment: fixed /* 背景固定 */
}
.Area03 {
	width: 100%;
	margin: 0px auto 0px auto;
	padding: 0px;
	background: url("../images/AreaBKwright.jpg") center;
/*	overflow: hidden;
	background-attachment: fixed /* 背景固定 */
	background-size: 100%;
}
.Area04 {
	width: 100%;
	margin: 0px auto 0px auto;
	padding: 0px;
/*
background-image: linear-gradient( -45deg,
 #9ddcda 25%,
 #91d8d5 25%,
 #91d8d5 50%,
 #9ddcda 50%,
 #9ddcda 75%,
 #91d8d5 75%,
 #91d8d5 );
background-size: 20px 20px;
background-attachment: fixed;
*/

}

.Area05 {
	width: 100%;
	margin: 0px auto 0px auto;
	padding: 0px;
	background: url("../images/AreaBKrace01.jpg") center;
	overflow: hidden;
	background-attachment: fixed /* 背景固定 */
}


.LongAreaContact {
	width: 100%;
	margin: 0px auto;
	padding: 60px 0px;
	background: url("../images/AreaBKcontact.jpg") center;
/*	overflow: hidden;
	background-attachment: fixed /* 背景固定 */
}
.LongAreaContact .contentBox {
	max-width: 1000px;
	margin: 0px auto;
	padding: 0px;
}
.LongAreaContact img {
    vertical-align: bottom;
    margin: 0px auto;
    display: block;
}

.LongArea {
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	background: #1ba3c4;
}
.LongArea h2 {
	max-width: 1700px;
	margin: 0px auto;
	padding: 20px 0px;
	text-align: center;
	font-size: 28px;
	line-height: 30px;
	font-weight: bold;
	color: #fff;

}
.LongArea img{
	vertical-align: bottom;
	margin: 0px auto;
	display: block;
}

.LongArea2 {
	width: 100%;
	margin: 0px auto;
	padding: 0px 20px;
	background: #c52c13;
}
.LongArea2 .contentBox {
	max-width: 900px;
	margin: 0px auto;
	padding: 0px;
}
.LongArea2 img{
	vertical-align: bottom;
	margin: 0px auto;
	display: block;
}

.ThreePointArea {
	margin: 0px auto;
	padding: 10px;
}

ol.ThreePoint{
	margin: 10px auto;
	font-size: 14px;
	line-height: 1.6px;
}
  
ol.ThreePoint li {
	margin: 0px auto 0px auto;
	text-align: left;
	font-size: 1.5em;
	line-height: 1.7em;
	padding: 10px 20px;
	color: #008080;
	font-weight: bold;
	border-left: 10px solid #008080;
	background: #fff;
}

.ThreePointArea p {
	margin: 10px 10px 30px 10px;
	text-align: left;
	font-size: 1.3em;
	line-height: 1.5em;
	padding: 10px 20px;
	color: #333;
	text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;
}



.QandA {
	margin: 0px auto;
	padding: 20px 0px;
}
.QandA img{
	padding: 0px 10px 10px 10px;
	vertical-align: bottom;
}
.Article {
	margin: 0px auto;
}
.Article img{
	padding: 0px;
	vertical-align: bottom;
}
.Commentary {
	margin: 0px auto;
	max-width: 900px;
	padding: 0px;
	background:#fff;
}

/* --- font color --- */
.bold_font{
	font-weight:bold;
}

.red_font{
	color:red;
	font-weight:bold;
	
}
.blue_font{
	color:#3175ff;
	font-weight:bold;
	
}

.pink_font{
	color:#ff006c;
	font-weight:bold;
	
}

/* --- font color --- */



.Commentary img{
	width: 100%;
	padding: 0px 0px 0px 0px;
	vertical-align: bottom;
}
.Commentary_txtSP {
	margin: 0px auto;
	max-width: 900px;
	padding:10px 20px;
	font-size: 14px;
	line-height: 18px;
}


.VoiceArea {
	margin: 0px auto;
	padding: 0px 10px 10px 10px;
	background: #ff9841;
	display: inline-table;

}
.VoiceImg {
	width: 48%;
	margin-left: 2%;
	margin-top: 10px;
	box-shadow: 0px 0px 5px #777;
	float:left;
}
.VoiceImg img{
	width: 100%;
	vertical-align: bottom;
}


.SiteDataBox {
	width: 98%;
	margin: 10px auto 0px auto;
	padding: 10px;
	background: #fff;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

.SiteName {
	margin: 0px auto 10px auto;
	padding: 10px 0px;
	text-align: center;
	color: #009cff;
	font-size: 1.5em;
	line-height: 1.8em;
	font-weight: bold;
	border-bottom: solid 2px #009cff;
	text-shadow: 0px 0px 5px #fff;
background-image: linear-gradient( -45deg,
 #e6e6e6 25%,
 #efefef 25%,
 #efefef 50%,
 #e6e6e6 50%,
 #e6e6e6 75%,
 #efefef 75%,
 #efefef );
background-size: 5px 5px;
background-attachment: fixed;
}

.SiteEvaluation1 {
	width: 100%;
	margin: 5px 0px;
	display: inline-block;
}
.SiteEvaluation1 .Item {
	width: 30%;
	height: 40px;
	margin-left: 2%;
	padding: 0px 10px;
	text-align: left;
	font-size: 16px;
	line-height: 40px;
	background: #c5e3fc;
	border: solid 1px #009cff;
	overflow: hidden;
	border-radius: 2px;
	position: relative;
	float: left;
}

.SiteEvaluation1 .Number {
	width: 36%;
	margin: 0px 0px;
	padding: 5px 10px;
	background: #fff;
	display: inline-block;
	text-align: center;
	line-height: 30px;
	border-radius: 0px 2px 2px 0px;
	position: absolute;
	top: 0;
	right: 0;
}

.SiteEvaluation2 {
	width: 98%;
}
.SiteEvaluation2 .SiteImg {
	width: 35%;
	margin: 0px 0px 0px 10px;
	border: solid 1px #009cff;
	float: left;
}
.SiteEvaluation2 .SiteImg img{
	width: 100%;
	vertical-align: bottom;
}
.SiteEvaluation2 .SiteInfo {
	margin-left: 38%;
	padding: 10px;
	font-size: 16px;
	line-height: 20px;
	color: #444;
	border: solid 1px #009cff;
}

.SiteEvaluation2 .Emphasis {
	margin: 0px 0px 10px 0px;
	padding: 0px 5px 5px 5px;
	font-size: 1.2em;
	font-weight: bold;
	color: #009cff;
	border-bottom: solid 1px #009cff;
}


/* ----- 202104 ------ */

.TopViewLogo {
	position: absolute;
	bottom:20px;
	left:20px;
	width: 300px;
	opacity: 0.8;
	background: rgba(0,0,0,0.6);
	padding: 10px;

color: #fff;
font-size: 20px;
font-weight: bold;
}

.BusinessInfoBox {
	padding: 10px 10px;
	box-shadow: -5px 5px 0px rgba(0,0,0,0.3);
	float: left;
	width: 29%;
	margin-top: 20px;
	margin-right: 2%;
	margin-left: 2%;
	background: #1a1a1a;
}

.BusinessInfoBox .ImgBox {
position: relative;
}
.BusinessInfoBox .ImgBox img{
	width: 100%;
}

.BusinessInfoBox .InfoTitle {
font-weight: bold;
position: absolute;
bottom: 5px;
font-size: 18px;
background: rgba(0, 0, 0, 0.6);
width: 100%;
padding: 5px;
color: #fff;
}
.BusinessInfoBox .assist{
font-size: 12px;
}
.BusinessInfoBox .InfoText {
	margin: 10px 0px 0px 0px;
}
.BusinessInfoBox .InfoText p{
font-size: 15px;
line-height: 18px;
color: #fff;
}

.TopGaiyou {
	margin-left: 0px;
	background: #2b43bf;
	min-height: 100px;
/*	width: 45%;	*/
	padding: 10px;
}
.TopToiawase {
	margin-right: 0px;
	background: #2b43bf;
	min-height: 100px;
/*	width: 45%;
	float: right;	*/
	padding: 10px;
}

/* ----- 斜め背景 ------ */

.DiagonalBlock1 {
  color: #1a1a1a;
}
.DiagonalBlock1 p {
  width: 60%;
  margin: 0 auto;
  padding: 30px 0;
  text-align: right;
  font-size: 1.1em;
line-height: 1.5em;
font-weight: bold;
}
.DiagonalBlock2 p {
 /* width: 60%;*/
  margin: 0 auto;
  padding: 30px 0;
}

.DiagonalBlock2 {
  /*レイアウト用のCSS*/
  padding: 0 0 40px 0;
  background-color: #2b3f8e;
  color: #ccc;
}
.DiagonalBlock1 {
  position: relative;
  padding: 20px 0 40px 0;
background: #2b3f8e; 
color: #fff;
}
.DiagonalBlock2 {
  position: relative;
  z-index: 0;
}
.DiagonalBlock2::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
 
  /*四角形を傾けます*/
  transform: skewY(2deg);
  transform-origin: top right;
 
  z-index: -1;
  width:100%;
  height:100%;
  background:#fbfbfb;
}



.pie1 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: auto;
	margin-left: auto;
	width: 300px;
	height: 300px;
	font-size: 26px;
	font-weight: 700;
	text-align: center;
	background-image: radial-gradient(#f2f2f2 30%, transparent 31%), conic-gradient(#d5525f 0% 78%, #d9d9d9 78% 100%);
	border-radius: 50%;
	border:solid 1px #fff;
	color: #666;
}

.pie2 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: auto;
	margin-left: auto;
	width: 300px;
	height: 300px;
	font-size: 26px;
	font-weight: 700;
	text-align: center;
	background-image: radial-gradient(#f2f2f2 30%, transparent 31%), conic-gradient(#52d566  0% 80%, #d9d9d9 80% 100%);
	border-radius: 50%;
	border:solid 1px #fff;
	color: #666;
}

.top_company_Shadow {
/*	max-width: 1700px;*/
	margin: 0px auto;
	padding: 50px 10px 100px 10px;
	background: url("../images/top_company_ShadowBK.jpg") no-repeat center;
	overflow: hidden;
	background-attachment: fixed /* 背景固定 */

}


.top_company_L {
	width: 45%;
	float:left;
}

.pieBox {
	float:left;
/*	margin-right: 20px;
/*	background: rgba(255,255,255,0.5); */
	padding: 10px;
}

.top_company_R {
	width: 47%;
	background: rgba(255,255,255,0.8);
	padding: 20px;
	border: solid 1px #fff;
	display: inline-block;
	margin-left: 52%;
	max-width: 660px;
}
.top_company_R p{
/*	font-size: 1.1em;
	line-height: 1.5em; */
	color: #333;
/*	font-weight: bold;*/
	margin: 0px 0px;
}
.top_company_R .right{
	text-align: right;
}
.top_company_R .sign {
	width: 200px;
	margin: 10px 0 0 auto;
	padding: 0;
}
.top_company_R .sign img{
	width: 100%;
}

/* ----- 縦文字 ------ */

.vertical_title {
	padding: 20px 30px;
	writing-mode: vertical-rl;
	color: #197fd1;
	font-size: 20px;
	line-height: 30px;
	position: absolute;
/*	top: 80px;*/
	top: 15%;
	right: 10%;
	background: rgba(255, 255, 255, 0.8);
	z-index: 990;

}
.vertical_title p{
	border-right: solid 1px #fa841c;
}
.vertical_title span{
	border-right: solid 1px #fa841c;
}

.vertical_title2 {
	padding: 20px 30px;
	writing-mode: vertical-rl;
	color: #197fd1;
	font-size: 20px;
	line-height: 30px;
	position: absolute;
	top: 15%;
	right: 10%;
	background: rgba(255, 255, 255, 0.8);
	z-index: 990;

}
.vertical_title2 p{
	border-right: solid 1px #fa841c;
}
.vertical_title2 span{
	border-right: solid 1px #fa841c;
}




/* ----- ani ------ */

.kyuXkyu {

	animation:kyuXkyuAni 2s;
	-webkit-animation:kyuXkyuAni 2s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}
	@keyframes kyuXkyuAni
	{
	0%   {transform: scale(1);}
	40%   {transform: scale(1);}
	50%   {transform: scale(0.9);}
	60%   {transform: scale(1);}
	100%   {transform: scale(1);}
	}
	@-webkit-keyframes kyuXkyuAni
	{
	0%   {transform: scale(1);}
	40%   {transform: scale(1);}
	50%   {transform: scale(0.9);}
	60%   {transform: scale(1);}
	100%   {transform: scale(1);}
	}


.TopViewBox {
	position: relative;
	max-height: 800px;
	overflow: hidden;
}


.TopViewBox .ViewImage01{
/*
	animation:ViewImageAni01 15s;
	-webkit-animation:ViewImageAni01 15s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;	*/
}

	@keyframes ViewImageAni01
	{
		0% { opacity: 1; }
		30% { opacity: 1; }
		35% { opacity: 0; }
		100% { opacity: 0; }
	}
	@-webkit-keyframes ViewImageAni01
	{
		0% { opacity: 1; }
		30% { opacity: 1; }
		35% { opacity: 0; }
		100% { opacity: 0; }
	}

.TopViewBox .ViewImage02{
	position: absolute;
	top: 0;
	animation:ViewImageAni02 15s;
	-webkit-animation:ViewImageAni02 15s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

	@keyframes ViewImageAni02
	{
		0% { opacity: 0; }
		30% { opacity: 0; }
		35% { opacity: 1; }
		60% { opacity: 1; }
		65% { opacity: 1; }
		100% { opacity: 0; }
	}
	@-webkit-keyframes ViewImageAni02
	{
		0% { opacity: 0; }
		30% { opacity: 0; }
		35% { opacity: 1; }
		60% { opacity: 1; }
		65% { opacity: 1; }
		100% { opacity: 0; }
	}

.TopViewBox .ViewImage03{
	position: absolute;
	top: 0;
	animation:ViewImageAni03 15s;
	-webkit-animation:ViewImageAni03 15s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

	@keyframes ViewImageAni03
	{
		0% { opacity: 0; }
		30% { opacity: 0; }
		35% { opacity: 0; }
		60% { opacity: 0; }
		65% { opacity: 0; }
		70% { opacity: 1; }
		95% { opacity: 1; }
		100% { opacity: 0; }
	}
	@-webkit-keyframes ViewImageAni03
	{
		0% { opacity: 0; }
		30% { opacity: 0; }
		35% { opacity: 0; }
		60% { opacity: 0; }
		65% { opacity: 0; }
		70% { opacity: 1; }
		95% { opacity: 1; }
		100% { opacity: 0; }
	}


.SubViewBox {
	position: relative;
	max-height: 800px;
	overflow: hidden;
	margin: 0px 0px 0px 0px;
}
.SubViewBox img{
	width: 100%;
}


.Origin_FadeInUp1 {
	width: 100%;
	margin: 0px auto;
	padding: 0px;

	animation-fill-mode: forwards;	/* forwards=終了位置で止まる */
	-webkit-animation-fill-mode: forwards;	/* forwards=終了位置で止まる */
}



.Origin_FadeInUp2 {
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	animation-delay: 2s;
	animation-fill-mode: forwards;	/* forwards=終了位置で止まる */
	-webkit-animation-fill-mode: forwards;	/* forwards=終了位置で止まる */
}	




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


.TopBusinessInfo {
	width: 100%;
	padding:40px 0px 10px 0px;
	overflow: hidden;
}

.TopBusinessInfoTable {
	width: 100%;
}

.TopBusinessInfoTable tr{
}

.TopBusinessInfoTable th{
	width: 50%;
	vertical-align: middle;
	display: table-cell;
}

.TopBusinessInfoTable td{
}

.TopBusinessInfoTable th .InfoText {
	margin: 0px 10px 30px 0px;
	padding: 10px;
	text-align: left;
	background: rgba(255,255,255,0.8);
}




.TopBusinessInfoL {
	width: 50%;
	float: left;
}
.TopBusinessInfoL .TextBox{
	padding: 20px 0px;
vertical-align: middle;
}
.TopBusinessInfoR {
	width: 50%;
	float: right;
	overflow: hidden;
}

.BusinessInfoBox2 {
	padding: 10px 10px;
	box-shadow: -5px 5px 0px rgba(0,0,0,0.3);
/*	float: left;
	width: 29%;
	margin-top: 20px;
	margin-right: 2%;
	margin-left: 2%;*/
	background: #1a1a1a;
}

.BusinessInfoBox2 .ImgBox {
position: relative;
}
.BusinessInfoBox2 .ImgBox img{
	width: 100%;
}

.BusinessInfoBox2 .InfoTitle {
font-weight: bold;
position: absolute;
bottom: 5px;
font-size: 18px;
background: rgba(0, 0, 0, 0.6);
width: 100%;
padding: 5px;
color: #fff;
}
.BusinessInfoBox2 .assist{
font-size: 12px;
}
.BusinessInfoBox2 .InfoText {
	margin: 10px 0px 0px 0px;
}
.BusinessInfoBox2 .InfoText p{
font-size: 15px;
line-height: 18px;
color: #fff;
}


.TopBusinessWindow {
/*	width: 100%; */
width: 500%;
	margin: 5px auto;
	padding: 0%;
	overflow: hidden;
	position:relative;
}

.TopBusinessWindow .Item5piece {
/*	width: 200%;	*/
	display: inline-block;
	background: #fff;

	position:inherit;
	animation: Item5pieceMove 15s;
	animation-iteration-count: infinite;
	-webkit-animation:Item5pieceMove 15s; /*Safari and Chrome */
	-webkit-animation-iteration-count: infinite;
}

	@keyframes Item5pieceMove {
		from {left: -0%;}
		16% {left: -0%;}
		18% {left: -20%;}
		33% {left: -20%;}
		35% {left: -40%;}
		50% {left: -40%;}
		52% {left: -60%;}
		66% {left: -60%;}
		68% {left: -80%;}
		82% {left: -80%;}
/*		84% {left: -99%;}	*/
/*		99% {left: -99%;}*/
		to {left: -0px;}
	}
	@-webkit-keyframes Item5pieceMove {
		from {left: -0%;}
		16% {left: -0%;}
		18% {left: -20%;}
		33% {left: -20%;}
		35% {left: -40%;}
		50% {left: -40%;}
		52% {left: -60%;}
		66% {left: -60%;}
		68% {left: -80%;}
		82% {left: -80%;}
/*		84% {left: -99%;}	*/
/*		99% {left: -99%;}*/
		to {left: -0px;}
	}

.TopBusinessWindow .Item5piece .OnePiece {
/*	width: 19.5%;*/
	width: 19%;
	margin: 0.5%;
	padding: 0px;
	float: left;
	background: #ff0000;
}

/* -----  ------ */
.to_service {
  display: block;
  width: 300px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #1ba3c4;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
}
.to_service span{
  color: #FFF;
  position: relative;
  padding-left: 30px;
}
.to_service span::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin-top: -5px;
}



.logo_shake_box{
  animation: logo_shake .1s linear infinite;
  width:180px;
/*  height:50px;
  background:#0091EA;*/
	margin:20px;
	background: #595959;
	margin: 20px auto;
	padding: 10px;
}

/* ----- 会社概要 ------ */

.t_about {
	width: 500px;
	border-spacing: 0;
	margin: 50px auto;
}
.t_about tr{
}

.t_about th{
	border-bottom: solid 2px #fb5144;
	padding: 20px 0;
}

.t_about td{
	border-bottom: solid 2px #ddd;
	text-align: center;
	padding: 20px 0;
}

/* ----- Service ------ */


.Area_Service {
	width: 100%;
	margin: 0px auto 0px auto;
	padding: 0px;
	background: url("../images/Area_ServiceBK.jpg") repeat;
}
.ShadowBox_Service {
	max-width: 1000px;
	margin: 0px auto;
	padding: 30px 10px;
}
.Area_Service h2{
}
.Area_Service h3{
	text-align: center;
	font-size: 1.8em;
	font-weight: bold;
	color: #333;
}
.Area_Service h3 span.subtxt {
	display: block;
	font-size: 0.7em;
	line-height: 1em;
	font-weight: normal;
	color: #fff;
}

.Area_Service .contentTop {
	width: 100%;
	padding:40px 0px 10px 0px;
}

.Area_Service .content {
	width: 100%;
	background:#fff;
}
.Servicetable {
	width: 100%;
}

.Servicetable tr{
}

.Servicetable th{
	width: 40%;
}
.Servicetable th img{
	width: 100%;
	vertical-align: bottom;
	border: solid 2px #efd7fd;
}

.Servicetable td{
	vertical-align: middle;
	display: table-cell;
}
.Servicetable td p{
	background: #e6e6e6;
	text-align: left;
	font-size: 1em;
	line-height: 1.2em;
	margin: 0px 20px;
	padding: 20px;
}



.ServiceMiniTable {
	margin: 50px auto;
	padding: 20px 0px;
	background: #fdecec;
}

.ServiceMiniTable tr {
}
.ServiceMiniTable th {
	width: 33.3%;
}
.ServiceMiniTable th p{
margin: 0px 20px;
padding: 20px;
text-align: center;
font-weight: bold;
font-size: 1.2em;
line-height: 1.5em;
}
.ServiceMiniTable td {
/*	width: 33.3%;*/
	font-size: 1em;
	line-height: 1.2em;
border-top: solid 1px #999;
padding: 10px 20px;
}
.ServiceMiniTable td p{
}

.ServiceMiniTableIcon {
	margin: 0 auto;
	padding: 10px;
	width: 250px;
	height: 250px;
	background: #fff;
	border-radius: 50%;
	border: solid 5px #bdbdbd;
}
.ServiceMiniTableIcon img{
	width: 100%;
}

/* ----- */

.ServiceMiniTable_sp {
	margin: 20px 10px;
	padding: 10px 0px;
	background: #fdecec;
}
.ServiceMiniTable_sp tr {
border-bottom: solid 1px #999;
display:block;
}
.ServiceMiniTable_sp th {

	width: 40%;
}

.ServiceMiniTable_sp th p{
margin: 0px auto;
padding: 10px;
text-align: center;
font-weight: bold;
font-size: 1.2em;
line-height: 1.5em;
}

.ServiceMiniTable_sp td {
	font-size: 1.0em;
	line-height: 1.2em;
	padding: 10px;
	vertical-align: middle;
}

.ServiceMiniTable_sp td p{
}

.ServiceMiniTable_spIcon {
	margin: 10px auto;
	padding: 10px;
	background: #fff;
	border-radius: 50%;
	border: solid 2px #bdbdbd;
	width:150px;
	height:150px;
}

.ServiceMiniTable_spIcon img{
	width: 100%;
}


/* 申込の流れ */


.Area_Service_Request{
	width: 100%;
	margin: 0px auto 0px auto;
	padding: 0px;
	background: url("../images/Service_RequestBK.jpg") no-repeat center;
	overflow: hidden;

}

.ShadowBox_SRequest{
	max-width: 1000px;
	margin: 0px auto;
	padding: 30px 10px;
	background: #fff;
}


.SRequestList {
}
.SRequestList p{
	margin: 10px 20px;
}


.SRequestList {
  counter-reset: chapter;
}

.SRequestList li:before {
  content: counter(chapter) "";
  counter-increment: chapter;
  width: 50px;
  height: 50px;
  margin: 0 10px 0 0;
  padding:5px 10px;
  border-radius: 3px;
  background: #6f6f6f;
  color: #fff;
  text-align: center;
  z-index: 1;
}
.SRequestList li {
	padding: 10px;
	margin-top: 20px;
	background: #ddd;
	color: #333;
	font-weight: bold;
}

.SRequestList li:nth-child(even) {
  background: #eee;
}

.RequestLinkBtn {
}
.RequestLinkBtn a{
	width: 88%;
	margin: 50px auto 20px auto;
	padding: 30px 0px;
	background: #1ba3c4;
	border-radius: 10px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	display: block;
}

.RequestLinkBtn a:hover{
  opacity: 0.7;
}

/* ----- contact ------ */

.contactArea {
	max-width: 800px;
	margin: 10px auto;
	padding: 50px 10px;
	border-bottom: solid 1px #c1c1c1;
}

.contactArea h2{
	margin: 10px auto;
	font-size: 2.0em;
	text-align: center;
	font-weight: bold;
}

.contactArea p{
	font-size: 1em;
	line-height: 2em;
	color: #333;
}

.MapArea {
	width:100%;
	margin: 10px auto;
}
.gMap {
	width:100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}
.gMap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}


/* フォーム */

/* ------ */
.formBox {
	MAX-width: 600px;
	margin: 0 auto;
	padding:10px;
	background: rgba(255,255,255,0.5);
	text-align:left;
}

.formBox .ItemBox{
	width: 100%;
	background: rgba(255,255,255,0.8);
	padding: 10px;
}

.ItemBox .Item01{
	font-size: 12px;
	color:#333;
	padding: 0px 0px 0px 10px;
	border-bottom: solid 1px #ff2525;
}
.ItemBox .Item02{
	font-size: 14px;
}



.ItemBox input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

.ItemBox textarea {
  resize: vertical;
}

.ItemBox input[type='checkbox'],
input[type='radio'] {
  display: none;
}

.ItemBox input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
}

.ItemBox select::-ms-expand {
  display: none;
}


/*追加スタイル*/


.ItemBox form {
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
  padding: 30px 30px 0;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.ItemBox input,
button,
select,
textarea {
  font-size: 0.8em;
}

.ItemBox input,textarea {
  border: 1px solid #979797;
  border-radius: 5px;
}

.ItemBox input {
  margin: 10px;
  padding: 10px;  
}

.ItemBox .radio label {
  position: relative;
  padding-left: 1.25em;
  margin-right: 1em;
}

.ItemBox .radio label::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #eee;
}

.ItemBox .radio input:checked + label::after {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  background: #A66970;
  border-radius: 50%;
}

.ItemBox select {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  background: #eee;
}

.ItemBox textarea {
  margin: 10px 0 0;
  padding: 5px;  
  width: 100%;
  height: 8em;
}

.ItemBox .button {
  text-align: center;
}

.ItemBox .button input {
  background: #A66970;
  padding: 15px 30px;
  color: #fff;
  border: none;
  font-size: 16px;
}

.ItemBox .button input:hover {
  opacity: 0.7;
  cursor: pointer;
}




/* old */
/*
#form{
	max-width:960px;
	margin:0 auto;
	padding:10px 0px;
	background: #bfddfc;

}
#form h2{

	margin: 0px auto 0px auto;
	padding:10px;

	font-size: 120%;
	line-height: 140%;
	text-align: center;
	color: #171a88;
	font-weight:bold;


}
#form h3{
	margin-bottom:20px;
	padding-bottom:10px;
	font-size:24px;
	border-bottom:solid 4px #3765D9;
}

#formWrap {
    max-width: 700px;
    margin: 0 auto;
    color: #555;
    line-height: 120%;
    font-size: 90%;
    padding-top: 30px;
	}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #9c9c9c;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#bfddfc;
	text-align:center;
	vertical-align:middle;
}
table.formTable td{
	text-align:left;
	background:#fff;
}

table.formTable input{
	max-width:500px;
		width:100%;
		height:30px;

}
table.formTable textarea{
	width:100%;
	height:100px;
}
	
table.formTable input[type="radio"],
table.formTable input[type="checkbox"]{
	height:auto;
	width:auto;
}

table.formTable .zipcode input{
	width:60px;
}

table.formTable .red{
	font-size:12px;
	color:red;
}



#formWrap h3{
	text-align:center;
	padding:30px 0;
	font-weight:bold;
	font-size:18px;
}
#form input[type="submit"],
#form input[type="reset"],
#formWrap input[type="submit"],
#formWrap input[type="button"]{
	margin:30px 0;
	height:40px;
	width:120px;
	
	
}


#form h2 {
    font-size: 18px;
}
#form h3{
    font-size: 22px;
	padding: 10px 5px 10px 5px;
}
table.formTable th,
	table.formTable td{
	display:block;
	width:100%;
}

*/

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


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

.ImgSwitching { display: block !important; }
.ImgSwitching_sp { display: none !important;}
@media screen and (max-width:750px) { 
	.ImgSwitching { display: none !important; }
	.ImgSwitching_sp { position: relative; display: block !important; }
}

@media only screen and (max-width: 750px) {	/* スマホ */

	.TopViewBox {
	margin-top: 50px;
	}


	.vertical_title {
		padding: 10px 12px;
		font-size: 15px;
		line-height: 18px;

		right: 6%;
		top: 10px;
	}

	.vertical_title2 {
		padding: 10px 12px 0px 12px;
		font-size: 15px;
		line-height: 18px;

		right: 6%;
		top: 0px;
	}
	.TopViewLogo {
		width: 35%;
		padding: 5px;
		bottom: 10px;
		left: 10px;
	}


	.TopBusinessInfoTable th{
		width: 100%;
		display: block;
	}
	.TopBusinessInfoTable td{
		width: 100%;
		display: block;
		margin: 20px 0px;
	}
	.TopBusinessInfoTable th .InfoText {
		margin: 0px 0px 20px 0px;
		padding: 10px;
	}

	.top_company_L {
		width: 100%;
		float:none;
	}

	.pieBox {
		padding: 5px;
	}

	.top_company_R {
		width: 100%;
		padding: 20px;
		margin-left: 0;
	}


	.contact {
		width: 80%;
		margin: 0 auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 21%;
	}
	.VoiceImg {
		width: 31%;
		margin-left: 2%;
		margin-top: 10px;
		box-shadow: 0px 0px 5px #777;
		float:left;
	}

	.TopBusinessInfoL {
		width: 100%;
		float: none;
	}

	.TopBusinessInfoR {
		width: 100%;
		float: none;
	}

	.LongArea h2 {
		padding: 10px 0px;
		font-size: 18px;
	}

	.SubViewBox {
		margin: 50px 0px 0px 0px;
	}


	.t_about {
		width: 80%;
		border-spacing: 0;
		margin: 30px auto;
	}
	.t_about tr{
	}

	.t_about th{
		border-bottom: solid 2px #fb5144;
		padding: 10px 0;
		background: #ffe9e8;
		font-size: 0.8em;
		width: 100%;
		display: block;
	}

	.t_about td{
		border-bottom: none;
		padding: 10px 0px 20px 0px;
		font-size: 0.9em;
		color: #333;
		width: 100%;
		display: block;
	}

	.contactArea {
		margin: 10px auto;
		padding: 30px 10px;
	}

	.contactArea h2{
		margin-top: 10px;
		font-size: 1.3em;
	}

	.contactArea p{
		font-size: 0.8em;
		line-height: 1.5em;
	}

	/* ----- Service ------ */

	.Area_Service h3{
		font-size: 1.2em;
	}
	.Area_Service h3 span.subtxt {
		font-size: 0.8em;
		line-height: 1em;
	}

	.Area_Service .contentTop {
		width: 100%;
		padding:20px 0px 20px 0px;
	}

	.Servicetable th{
		width: 100%;
		display: block;
	}
	.Servicetable td{
		width: 100%;
		display: block;
	}

	.Servicetable td p{
		margin: 10px 10px;
		padding: 10px;
	}

	.SRequestList p{
		font-size: 15px;
		line-height: 19px;
	}

	.SRequestList li {
		font-size: 16px;
	}


}
@media screen and (max-width:480px) { 


}