@charset "utf-8";
/* CSS Document */
/*モバイル用が基本のベースとなる*/
html,
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}


body {
	margin-left: auto;/*marginの左右を両方autoにすることで中央揃いになる*/
	margin-right: auto;
        overflow-y: scroll;
	width: 100%;
}

main{margin-bottom: 10px;
}

img {
	width: auto;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	-ms-interpolation-mode: bicubic;
	text-align: right;
}

button {
border:none; /*枠を消す*/
background-color:#ffffff; /*背景色を白に*/
}

ul{
	padding-left: 30px;
}

footer {
	padding: 10px 20px;
	background-color: #D6D6D6;
	text-align: right;
}

section table { width: 100%; }
section th, section td  { padding: 10px; border: 1px solid #ddd; }
section th  { background: #f4f4f4; }

.style-logo {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 398px;
}

.row:before, .row:after {
	content:  "";
	display: table;
}
.row:after{
	 clear:both;
}


h1 {
	font-size: 38px;
	font-weight: 800;/*フォントの太さ*/
	margin-bottom: 70px;
	margin-left:15px;
}

h2 {
	font-size: 20px;
	font-weight: 600;/*フォントの太さ*/
}

h3{
	font-size: 40px;
	font-weight: 200;/*フォントの太さ*/
	margin-bottom: 10px;
}

h4{
	font-size: 20px;
	font-weight: 500;/*フォントの太さ*/
}

h5 {
	font-size: 20px;
	font-weight: 700;/*フォントの太さ*/
	text-align: center;
}

h6 {
	font-size: 36px;
	font-weight: 100;/*フォントの太さ*/
	color: #66B7E7;
}

.text-top {
	font-size: 18px;
	text-align:justify;
	margin-bottom: 20px;
}

.text-main{
	font-size: 15px;
	text-align:justify;
	line-height: 200%;
	letter-spacing:1px;
}

.text-item{
	margin-top: 5px;
}

.text-sub{
	font-size: 12px;
	text-align:justify;
}

.koumoku-number{
	font-size: 18px;
	color: #FF0004;
	font-weight: bold;
}

.koumoku-title{
	font-size: 16px;
	font-weight: bold;
}

.subkoumoku-title{
	font-weight: bold;
}

.subkoumoku-number{
	color: #FF0004;
	font-weight: bold;
}

.sitemap-title{
	font-size: 24px;
	color: #0e5589;
	font-weight: bold;	
}

.sitemap-title2{
	font-size: 20px;
	color: #0e8ab8;
	font-weight: bold;	
}


.sitemap-sub {
  list-style: disc;
  overflow: hidden;
}

.sitemap-sub li {
  margin-right: 40px;
  float: left;
}

.button {
	border: 2px #000000 solid;
	padding:/*上下*/8px /*左右*/20px;
	border-radius:10px;/*角丸*/
	color: #000000;
	text-decoration: none;/*noneでハイパーリンクから下線を外す*/
}

.button2 {
	border: 2px #28282E solid;
	padding:/*上下*/8px /*左右*/20px;
	border-radius: 10px;/*角丸*/
	color: #28282E;
	text-decoration: none;/*noneでハイパーリンクから下線を外す*/
	margin: 20px;
	text-align: center;
}

.top-title{
	background-color:#ffffff;
	color: #0e5589;
	font-size: 50px;
	padding:/*上下*/50px /*左右*/30px;
	margin-bottom: 5px;
	margin-top: 5px;
}

.top-link{
	font-size: 36px;
	font-weight: 100;/*フォントの太さ*/
	color: #0e5589;
	text-decoration:none;
}

.top-link:hover{
	text-decoration:underline;
}

.top-catch-box{
	background-color: #C9C9C9;
	align-items: center;
	padding:/*上下*/10px /*左右*/10px;
}

.top-text-box{
	background-color: white;
	color: #000000;
	padding:/*上下*/20px /*左右*/30px;
}

.top-button-box{
	text-align: center;
}


.text-box{
	background-color: white;
	color: #000000;
	margin-bottom: 30px;
}

.text-box-hr{
	background-color: white;
	color: #000000;
	padding:/*上下*/10px /*左右*/10px;
	text-align: left;
}

.annai-type-title{
	margin-top: 10px;
	margin-left: 20px;
	margin-bottom: 20px;
}

.annai-top-text-box{
		padding: 20px 20px;
	}

.jirei-text-box{
	background-color: #F3A186;
	color: #000000;
	border-radius:10px;/*角丸*/
	padding:/*上下*/20px /*左右*/30px;
	margin-bottom: 20px;
}

.annai-img-box{
	text-align: center;
	margin-top: 15px;
	margin-bottom: 0px;
}

.manual-text-box {
	width:100%;
}

.manual-text-box td {
	padding: 10px 10px;
}

.warning-box {
    border: solid 1px orange;
    padding: 5px;
    width: 95%;
    border-radius: 10px; /* 角を丸くする */
	margin-top: 10px;
	margin-bottom: 10px;
}


ul.os{
display:-webkit-flex;
display:flex;
width:100%;
list-style-type:none;
margin-top:10px; padding:0;
}
ul.os li {
width:33%;
display:block;
margin:2px; padding:10px; font-size:16px;
background-color:#66cc99; color:#ffffff;
text-align:center;
text-decoration:none;
}

/*ナンバリングリスト*/
ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
}
ol li {
  border-bottom: dashed 1px orange;
  position: relative;
  padding: 2em 0.5em 2em 30px;
  line-height: 1.5em;
}
ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: red;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:normal;
  font-size: 14px;
  border-radius: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
ol li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}

.borderline{
	border: dashed 1px orange;
}↩

.sample-annai-mobile{
	background-image: url(image/sample_annai_mb2.jpg);
	background-size: cover;
	background-position: center;
	padding: 70px 20px 50px 20px;
	text-align: center;
	word-break: break-all;/*英文のみだと文字列が折り返さないことがあるので、このタグでそれを解除する。*/
}

.sample-annai-mobile a {
	text-decoration:none;
	color: #000000;
	font-size: 30px;
}

.sample-annai-pc{
display:none;
}
	
.diagram-mobile{
	display:block;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

.diagram-pc{
display:none;
}

.remote-os-mobile{
    width:100%;
	border:1px;
	cellpadding:5px;
	cellspacing:1px;
	background-color:#ffffff;
}

.remote-os-pc{
	display: none;
}

.footer-link a{
	text-decoration: none;/*noneでハイパーリンクから下線を外す*/
	color: #ffffff;}

.footer-link {
	width: 50%;
	font-size: 14px;
	color: white;
	display: block;
	text-align: center;
	padding: 8px;
	background-color:#69A4D2;
	border:hidden;
    float: left;
}

	.footer-link:hover {
    background-color:#69caff;
}

.footer-text{
	font-size: 11px;
	font-weight: 600;
}

.footer-cell{
        width: 100%;
        margin: 3px auto;
        display: flex;
        align-items: center;
}

.footer-cell-item1{
        display: none;
}

.footer-cell-item2{
        width: 50%;
}

.footer-cell-item3{
        width: 50%;
}


.col-privacymark-footer {
	width: 75px;
	height: 75px;
	margin-left: 15px;
}

.title-contact {
	width: 50%;
	font-size: 14px;
	display: block;
	text-align: center;
	padding: 10px;
	background-color:#69A4D2;
	border: hidden;
	margin-top: 5px;
	margin-bottom: -10px;
    float: left;
}

.col{
	width:100%;
}

.col-corporate{
	width:100%;
}

.col-menu{
	width:90%;
}

.logbox
      {
        border: none;
        width: 100%;
         height: 70px;
         padding: 1em;
         overflow: auto;
		  font-size: 14px;
      }

.col-button{
	width:50%;
	float: left;/*指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。*/
}

.col-about-top{
	width:95%;
	margin-left: auto;
	margin-right: auto;
}

/*メインコンテンツとサイドメニュー*/
  .main{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }
  .side-menu{
    display: none;
	  
  }


/*各ページタイトル用*/

.col-title{
	width:100%;
	padding:5px 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	background-color:#C9C9C9;
	text-align: center;
}

.style-title {
    font-size: 24px;
	font-weight: 600;/*フォントの太さ*/
	color: white;
}


/*テーブル用CSS(ここのみデスクトップファースト　モバイルファーストへの解決策が見つかり次第切り替える*/
.col-head-type1 {
  border-collapse: collapse;
  width: 100%;
}
 
.col-head-type1 th,
.col-head-type1 td {
  border: 1px solid #dbe1e8;  
  padding: 8px;
}
 
.col-head-type1 th {
  background: #f9fafc;
  text-align: left;
  width: 120px;
}


/*MAP用テーブル*/
.col-head-type2 {
  border-collapse: collapse;
  width: 100%;
}
 
.col-head-type2 th,
.col-head-type2 td {
  border: none;  
  padding: 8px;
}
 
.col-head-type2 th {
  background: #f9fafc;
  text-align: left;
  width: 120px;
}

/*お問い合わせページ/製品・サービスページ用テーブル*/
.col-head-type3 {
  border-collapse: collapse;
  width: 85%;
}
 
.col-head-type3 th,
.col-head-type3 td {
  border: none;  
  padding: 5px;
}
 
.col-head-type3 th {
  background: #f9fafc;
  text-align: left;
  width: 200px;
}

/*補足事項用テーブル*/
.col-head-type4 {
  border-collapse: collapse;
  width: 100%;
}
 
.col-head-type4 th,
.col-head-type4 td {
  border: 1px solid #dbe1e8;  
  padding: 8px;
}
 
.col-head-type4 th {
  background: #f9fafc;
  text-align: left;
  width: 450px;
}

/*横長画面用テーブル*/
.col-head-type5 {
  border-collapse: collapse;
  width: 100%;
}
 
.col-head-type5 th,
.col-head-type5 td {
  border: 1px solid #dbe1e8;  
  padding: 10px;
}
 
.col-head-type5 th {
  background: #f9fafc;
  text-align: left;
  width: 50%;
}

.col-head-type5 td {
  text-align: left;
  width: 50%;
}

/*アンカーリンクずれ防止*/
a.jump_point {height: 1px;
display: block;
padding-top: 100px;
margin-top: -100px;
}


/*mapレスポンシブ対応*/
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.about-top {
	background-image: url(image/about_top.jpg);
	background-size: cover;
	background-position: center;
	padding: 100px 20px 50px 20px;
	color: #ffffff;
	text-align: center;
	text-shadow:2px 2px #000,
		        2px 2px 10px #000;
	word-break: break-all;/*英文のみだと文字列が折り返さないことがあるので、このタグでそれを解除する。*/
}

/*フロー用角丸図形*/
.square1 {
   width: 100%;
   height: 100%;
   background:#9AB9FF;
   border-radius: 40px 40px 40px 40px; /*四方角丸40px*/
   padding:10px 10px 10px 10px;
}

.square2 {
   width: 100%;
   height: 100%;
   background:#FFC245;
   border-radius: 40px 40px 40px 40px; /*四方角丸40px*/
   padding:10px 10px 10px 10px;
}

.square3 {
   width: 100%;
   height: 100%;
   background:#F6BDE0;
   border-radius: 40px 40px 40px 40px; /*四方角丸40px*/
   padding:10px 10px 10px 10px;
}

.arrow{
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #565656 #565656;
  transform: rotate(-45deg);
  margin:-20px 0px 0px 0px;
}

/*ポップアップウィンドウ*/
.popup {
    width: 90%;
    margin: auto;
    position: relative;
    background: #fff;
	border-radius: 20px 20px 20px 20px; /*四方角丸20px*/
	padding: 20px;
}

/*ページ内リンクずれ防止*/
a.p0,.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8,.p9,.p10,.p11,.p12,.p13,.p14,.p15,.p16,.p17,.p18,.p19,.p20,.p21,.p22,.p23,.p24,.p25,.p26,.p27,.p28,.p29,.p30,.p31,.p32,.p33,.p34,.p35,.p36,.p37,.p38,.p39,.p40,.p41,.p42,.p43,.p44,.p45,.p46,.p47,.p48,.p49,.p50,.p51,.p52,.p53,.p54,.p55,.p56,.p57,.p58,.p59,.p60,.p61,.p62,.p63,.p64,.p65,.p66,.p67,.p68,.p69,.p70,.p71,.p72,.p73,.p74,.p75,.p76,.p77,.p78,.p79,.p80,.p81,.p82,.p83,.p84,.p85,.p86,.p87,.p88,.p89,.p90,.p91,.p92,.p93,.p94,.p95,.p96,.p97,.p98,.p99,.p100,.p101,.p102,.p103,.p104,.p105,.p106,.p107,.p108,.p109,.p110,.p111,.p112,.p113,.p114,.p115,.p116,.p117,.p118,.p119,.p120,.p121,.p122,.p123,.p124,.p125,.p126,.p127,.p128,.p129,.p130,.p131,.p132,.p133,.p134,.p135,.p136,.p137,.p138,.p139,.p140,.p141,.p142,.p143,.p144,.p145,.p146,.p147,.p148,.p149,.p150,.p151,.p152,.p153,.p154,.p155,.p156,.p157,.p158,.p159,.p160,.p161,.p162,.p163,.p164,.p165,.p166,.p167,.p168,.p169,.p170,.p171,.p172,.p173,.p174,.p175,.p176,.p177,.p178,.p179,.p180,.p181,.p182,.p183,.p184,.p185,.p186,.p187,.p188,.p189,.p190,.p191,.p192,.p193,.p194,.p195,.p196,.p197,.p198,.p199,.p200
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12,.g13,.g14,.g15{
   display: block;
   margin-top:-60px;
   padding-top:60px;
}

/*タブレット用(キャッチ部分のみ）*/
@media (min-width : 480px ){/*元は768px*/
	    h1 {
	    font-size: 40px;
	    margin-bottom: 90px;
		text-align: center;
		margin-left:auto;
    }
		h4{
	font-size: 25px;
}
}
/*タブレット用*/
@media (min-width: 768px){

	body{
		max-width: 100%;
	}
	

	
	.style-logo {
		float: left;
	}
	
	.top {
    height: 500px;
	background-size: 100% 100%;
	padding: 120px 20px 50px 20px;
	}
	
	.br-sp { display:none; }/*トップのキャッチ部分の改行を消す*/
	
	.annai-top-text-box{
		height: 250px;
		padding: 50px 20px;
	}
    
	.annai-top-box{
		height: 220px;
	    padding: 50px 30px 0px 30px;
	}
	
	.annai-type-title{
	margin-bottom: 0px;
	margin-left: 20px;
}
	.annai-img-box{
	text-align: right;
	margin-top: 15px;
	margin-bottom: 0px;
	margin-right: 40px;
}
	
    h1 {
	    font-size: 50px;
	    margin-bottom: 90px;
		text-align: center;
		margin-left:auto;
    }
	
	h2 {
	font-size: 33px;
	font-weight: 600;/*フォントの太さ*/
	margin-bottom: 20px;
		}
	
	h5 {
	font-size: 20px;
	text-align: left;
}

	.col-md-half{
	    width:50%;
    }
	
	.col{
	    float: left;/*指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。*/
		padding: 0px 7px 14px;/*画面をタブレットサイズにした際に各グリッド間に隙間を開けます。*/
	}
	
	.col-corporate{
	    float: left;/*指定した要素を左に寄せます。後に続く内容はその右側に回り込みます。*/
	}
	
	.col-button-lg-qtr{
		width:25%;
		padding: 0px 7px 0px;/*画面をタブレットサイズにした際に各グリッド間に隙間を開けます。*/
	}
	
	.col-title{
    padding:10px 10px;
	text-align: left;
	}
	
	.sample-annai-pc{
	display:block;
	border-bottom-width: 1px;
	border:
	#C6C6C6}
	
	.sample-annai-mobile{
	display:none;
    }
	
	.diagram-mobile{
	display:none;
    }
	
	.diagram-pc{
	display:block;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	}
	
	.remote-os-mobile{
	display: none;
   }
	
	.remote-os-pc{
	display:flex;
    width:100%;
	border:0;
	cellpadding:5px;
	cellspacing:1px;
}
	
	.jirei-text-box{
    margin-bottom: 0px;
    }
	
	.text-box-hr{
	width: 50%;
}
	.footer-text{
	font-size: 14px;
}
}


/*デスクトップ用*/
@media (min-width: 1024px){
	body{
		max-width: 1200px;
	}
		/*ポップアップウィンドウ*/
.popup {
    width: 40%;
    margin: auto;
    position: relative;
    background: #fff;
	border-radius: 20px 20px 20px 20px; /*四方角丸40px*/
	padding: 30px;
}
	.style-logo {
		float: left;
	}
		
	.top {
    height: 559px;
	padding: 150px 20px 50px 20px;
    }
	.annai-top-box{
	padding: 30px 30px 0px 30px;
	}
	
	.annai-type-title{
	margin-top: 20px;
	margin-bottom: 0px;
	margin-left: 270px;
}
	
	h1 {
	font-size: 68px;
	margin-bottom: 90px;
    }
	
	.col-lg-qtr{
		width:25%;
	}
	
	.col-lg-three-fourths{
		width:75%;
		}
	
	
	.col-md-one-thirds{
		width:33%;
	}
	
	.col-md-two-thirds{
		width:66%;
	}
	.top-catch-box{
		height: 190px;
		padding-top: 75px;
		padding-bottom: auto;
	}
	
	
/*メインコンテンツとサイドメニュー*/
  .wrap{
	display: flex;
    flex-direction: row-reverse;
	width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .main{
    /* float: right;に変更 */
    float: right;
    width: 850px;
	margin-left: 20px;
  }
  .side-menu{
    /* float: left;に変更 */
	display: block;
	float: left;
    width: 310px;
	     margin-left: 10px;
	 background-color: #f1f8ff;
  }
	
	/*.footer-link a{
	display: none; 
}
	
	.footer-link{
	display: none;
}*/
	.footer-link {
	width: 14%;
	font-size: 14px;
	display: block;
	text-align: center;
	padding: 10px;
	background-color:#69A4D2;
	border: hidden;
	margin-top: 5px;
	margin-bottom: -10px;
    float: left;
}


.footer-cell-item1{
display: block;
        width: 33%;
}

.footer-cell-item2{
        width: 33%;
}

.footer-cell-item3{
        width: 33%;
}
	
.title-contact {
	width: 20%;
	display: block;
	text-align: center;
	padding: 10px;
	margin-top: 5px;
	margin-bottom: -10px;
    float: left;
}
	
	.col-footer-logo{
	margin-top: 20px;
	}
}


/*ノートPC用テーブル用CSS(ここのみデスクトップファースト　モバイルファーストへの解決策が見つかり次第切り替える*/
@media only screen and (max-width: 1280px) {
	 .col-head-type5 tr,
  .col-head-type5 th,
  .col-head-type5 td {
    display: block;
    width: auto;
  }
  
  .col-head-type5 tr:first-child {
    border-top: 1px solid #dbe1e8;  
  }
  
  .col-head-type5 th,
  .col-head-type5 td {
    border-top: none;
  } 

}

/*テーブル用CSS(ここのみデスクトップファースト　モバイルファーストへの解決策が見つかり次第切り替える*/
@media only screen and (max-width: 768px) {
  .col-head-type1 tr,
  .col-head-type1 th,
  .col-head-type1 td {
    display: block;
    width: auto;
  }
  
  .col-head-type1 tr:first-child {
    border-top: 1px solid #dbe1e8;  
  }
  
  .col-head-type1 th,
  .col-head-type1 td {
    border-top: none;
  }

/*MAP用テーブル*/
  .col-head-type2 tr,
  .col-head-type2 th,
  .col-head-type2 td {
    display: block;
    width: auto;
  }
  
  .col-head-type2 tr:first-child {
    border: none;  
  }
  
  .col-head-type2 th,
  .col-head-type2 td {
    border: none;
  }

/*お問い合わせページ/製品・サービスページ用テーブル*/
  .col-head-type3 tr,
  .col-head-type3 th,
  .col-head-type3 td {
    display: block;
    width: auto;
  }
  
  .col-head-type3 tr:first-child {
    border-top: 1px solid #dbe1e8;  
  }
  
  .col-head-type3 th,
  .col-head-type3 td {
    border-top: none;
  }

/*補足事項用テーブル*/
  .col-head-type4 tr,
  .col-head-type4 th,
  .col-head-type4 td {
    display: block;
    width: auto;
  }
  
  .col-head-type4 tr:first-child {
    border-top: 1px solid #dbe1e8;  
  }
  
  .col-head-type4 th,
  .col-head-type4 td {
    border-top: none;
  }
	
/*横長画面用テーブル*/

  .col-head-type5 tr,
  .col-head-type5 th,
  .col-head-type5 td {
    display: block;
    width: auto;
  }
  
  .col-head-type5 tr:first-child {
    border-top: 1px solid #dbe1e8;  
  }
  
  .col-head-type5 th,
  .col-head-type5 td {
    border-top: none;
  } 
}