@charset "utf-8";
/* CSS Document */
/*全体の設定
---------------------------------------------------------------------------*/
html, body {
	font-size: 15px;	/*基準となるフォントサイズの上書き*/
	color:#000;
	line-height:2.0em;
}

/*mainブロックのpタグ*/
main p.comment {
	margin: 0 20px 0px;	/*上、左右、下へ空けるスペース*/
}

.title01{
	width:100%;
	position:relative;
	margin-bottom:60px;
}


/*タイトルロゴ*/
.title-logo{
	width:50%;
	float:left;
	text-align:left;
}
.title-logo img{
	height:50px;
}

/*ユーザーの方はこちら　ボタン*/
.user-btn{
	width:50%;
/*	float:right; */
	margin: auto;
	text-align:right;
}
.user-btn img{
	height:80px;
}

/*パンフレットはこちら　ボタン*/
.flyer-btn{
	text-align:center;
}
.flyer-btn img{
	height:80px;
}

/*パンフレットはこちら　ボタン*/
.svg-btn{
	text-align:center;
}
.svg-btn img{
	height:80px;
}

/*トップイメージ*/
.top-image{
	max-width:85%;
	margin:0 auto 50px;
	padding:40px 0;
	text-align:center;
}

/*赤文字キャプション*/
.caption01{
	width:100%;
	text-align:right;
	color:#c74054;
	padding:10px 20px;
	line-height:1.5em;
}

/*タイトル*/
.type01{
	font-size:20px;
	font-weight: bold;		/*太字に*/
	padding: 10px 20px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #eee;		/*背景色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	letter-spacing: 0.1em;
}

/*三つの機能のイメージ*/
.image-3set{
	margin:0 0 40px;
}

/*むらさき背景　タイトル*/
.type02{
	background: linear-gradient(#fff 33.3%, #8684b5 0, #8684b5 66.6%, #fff 0);
    width:100%;
	color:#fff;
	font-size:24px;
	font-weight:bold;
	letter-spacing: 0.1em;
	margin:40px 0 0;
}

/*むらさき背景　タイトル*/
.type03{
	background: linear-gradient(#fff 33.3%, #6168a0 0, #6168a0 66.6%, #fff 0);
    width:100%;
	color:#fff;
	font-size:24px;
	font-weight:bold;
	letter-spacing: 0.1em;
	margin:40px 0 0;
}

/*むらさき背景　タイトル*/
.type04{
	background: linear-gradient(#fff 33.3%, #393b7f 0, #393b7f 66.6%, #fff 0);
    width:100%;
	color:#fff;
	font-size:24px;
	font-weight:bold;
	letter-spacing: 0.1em;
	margin:40px 0 0;
}

/*シミュレーション機能　タイトルイメージ*/
.simu{
	width:150px;
	margin:0 20px;
}

.image-box{
	margin-bottom:20px;
	text-align:center;
}

/*btnの設定
---------------------------------------------------------------------------*/
p.btn01{margin: 0;}

/*ボタンを囲むブロック*/
.btn01 {
	text-align: center;	/*内容をセンタリング*/
}

/*ボタン*/
.btn-box{
	width:100%;
	text-align:center;
	padding:40px 0;
}
.btn01 {
	display: inline-block;text-decoration: none;border: none;
	font-size: 1em;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
	background: linear-gradient(150deg, #ff0e0e, #770000);/*背景グラデーション。#logoと合わせています。*/
	border-radius:10px;
	letter-spacing: 0.1em;	/*文字間隔を少し広くする指定*/
	color: #fff;			/*文字色*/
	transition: 0.3s;		/*hoverまでにかける時間。0.3秒。*/
	padding: 1em 2em;		/*余白*/
	margin: 0 auto 30px;	/*ボタンの外側に空けるスペース。上、左右、下への順番。*/
}

/*ボタンのマウスオン時*/
.btn01 a:hover {
	cursor: pointer;		/*inputタグを使う場合に「手」のマークになるように。リンクと同じ表示になるようにという事です。*/
	opacity: 0.8;			/*冒頭のリンクテキストのhoverと合わせました*/
	transform: scale(1.02);	/*実寸の102%に拡大*/
}




/*movie*/
.movie{
	text-align:center;
	padding:10px 0;
	margin:10px 0;
}


/*listブロック
---------------------------------------------------------------------------*/
/*listブロック全体を囲むブロック*/
.list-container01 {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap-reverse;	/*折り返す指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}

/*3分割　list3*/

/*１個あたりのボックス設定*/
.list3 {
	flex-direction: column;			/*子要素を縦並びにする*/
	width: 32%;		/*幅。３列になります。*/
	margin:40px 0 0;
}

/*ボックス内のfigure画像*/
.list3 figure {
	width: 100%;
	margin-right: 0;
}

/*ボックス内のtextブロック*/
.list3 .text {
	text-align:center;
	padding:10px 0;
}

/*ボックス内のh4タグ*/
.list3 h4 {
	margin: 10px 0;	/*上下、左右への余白*/
}


/*2分割　list2*/

/*１個あたりのボックス設定*/
.list2 {
	flex-direction: column;			/*子要素を縦並びにする*/
	width: 48%;		/*幅。2列になります。*/
	margin:40px 0 0;
}

/*ボックス内のfigure画像*/
.list2 figure {
	width: 100%;
	margin-right: 0;
}

/*ボックス内のtextブロック*/
.list2 .text {
	padding:10px 0;
	font-size:18px;
}

.comment-s{
	font-size:80%!important;
	line-height:1.5em!important;
	margin:0;
}

/*ボックス内のh4タグ*/
.list2 h4 {
	margin: 10px 0;	/*上下、左右への余白*/
	color:#c74054;
	font-weight:bold;
	font-size:24px;
}


.list2 ul li{
	list-style-type:disc;
	font-size:80%;
}

/*下向き矢印*/
.arrow-down img{
	width:40%;
	margin:0 auto;
}

/*対応ロボット一覧
--------------------------------------------------------------------------*/

/*テーブル外側*/
.table-box{
	width:100%;
	padding-bottom:10px;
	margin-bottom:10px;
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2 caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #eee;		/*背景色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
}

/*ta2テーブルブロック設定*/
.ta2 {
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.ta2 tr {
	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}

/*th（上側見出し）、td（下側項目）の共通設定*/
.ta2 th, .ta2 td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*ta2追加設定*/
.ta2 td ul li{
	list-style-type:disc;
}

/*テーブル下のコメント*/
.table-comment ul{
	width:100%;
	text-align:right;
}
.table-comment ul li{
	float:left;
	list-style-type:none;
	margin-right:20px;
}

/*背景ありテーブル
---------------------------------------------------------------------------*/
.bg-color01{
	background:#8684b5!important;
	color:#fff;
	width:20%;
}

.bg-color02{
	background:#8684b5!important;
	color:#fff;
}

/*動作環境
--------------------------------------------------------------------------*/

/*テーブル外側*/
.table-box01{
	padding-bottom:10px;
	margin-bottom:10px;
}

/*テーブル
---------------------------------------------------------------------------*/
/*ta3テーブルブロック設定*/
.ta3 {
	border-top: 1px solid #ccc;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 30px;		/*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.ta3 tr {
	border-bottom: 1px solid #ccc;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta3 th, .ta3 td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta3 th {
	width: 20%;			/*幅*/
}

/*テーブル下のコメント*/
.table-comment ul{
	width:100%;
	text-align:right;
}
.table-comment ul li{
	float:left;
	list-style-type:none;
	margin-right:20px;
}

/*背景ありテーブル
---------------------------------------------------------------------------*/
.bg-color03{
	background:#eee!important;
	width:20%;
}

/*その他
----------------------------------------------------------------------------*/
.c{text-align:center!important;}
.r{text-align:right; line-height:1.5em;}
.sh{display:none;}
.w15{width:15%;}
.w20{width:20%;}
/*少し大きい文字*/
.text01{
	font-size:120%;
	text-align:center;
}


/*---------------------------------------------------------------------------
ここから下は画面幅1000px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:900px) {

section,
main > article {
	margin: 0 auto;
	max-width: 1300px;	/*最大幅。これ以上広がらない。*/
	padding: 2% 2%;		/*ボックス内の余白*/
}
	
/*3分割　list3*/

/*１個あたりのボックス設定*/
.list3 {
	flex-direction: column;			/*子要素を縦並びにする*/
	width: 30%;		/*幅。３列になります。*/
	margin:40px 0 0;
}
	
/*ボックス内のtextブロック*/
.list3 .text {
	text-align:center;
	padding:10px 0;
	font-size:80%;
}
	
}


/*---------------------------------------------------------------------------
ここから下は画面幅600px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:600px) {
	
/*sectionタグと、詳細ページの共通設定
---------------------------------------------------------------------------*/
	
.title01{
	width:100%;
	position:relative;
	padding-bottom:40px;
}
.title01 img{
	height:50px;
}

/*タイトルロゴ*/
.title-logo{
	width:100%;
	text-align:center;
}

/*ユーザーの方はこちら　ボタン*/
.user-btn{
	float:left; 
	width:100%;
	text-align:center;
}
.user-btn img{
	margin-top:5px;
}
	
section,
main > article {
	margin: 0 auto;
	max-width: 1300px;	/*最大幅。これ以上広がらない。*/
	padding: 2% 2%;		/*ボックス内の余白*/
}
	
/*トップイメージ*/
.top-image{
	max-width:100%;
	margin:0 auto;
	padding:40px 0;
	text-align:center;
}
	
/*タイトル*/
.type01{
	font-size:18px;
	font-weight: bold;		/*太字に*/
	padding: 10px 20px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #eee;		/*背景色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	letter-spacing: 0.1em;
}
	
/*むらさき背景　タイトル*/
.type02{
	background: linear-gradient(#fff 33.3%, #8684b5 0, #8684b5 66.6%, #fff 0);
    width:100%;
	color:#fff;
	font-size:17px;
	font-weight:bold;
	letter-spacing: 0.1em;
	margin:40px 0 0;
}
	
/*むらさき背景　タイトル*/
.type03{
	font-size:17px;
}
	
/*むらさき背景　タイトル*/
.type04{
	font-size:17px;
}

/*シミュレーション機能　タイトルイメージ*/
.simu{
	width:100px;
	margin:0 20px;
}
	
/*3分割　list3*/

/*１個あたりのボックス設定*/
.list3 {
	flex-direction: column;			/*子要素を縦並びにする*/
	width: 100%;		/*幅。３列になります。*/
	margin:10px 0 0;
}	
	
/*2分割　list2*/

/*１個あたりのボックス設定*/
.list2 {
	flex-direction: column;			/*子要素を縦並びにする*/
	width: 100%;		/*幅。３列になります。*/
	margin:10px 0 0;
}

/*ボックス内のtextブロック*/
.list2 .text {
	padding:10px 0;
	line-height:1.5em;
	font-size:15px;
}

.comment-s{
	font-size:80%!important;
	line-height:1.5em!important;
	margin:0;
}

/*ボックス内のh4タグ*/
.list2 h4 {
	margin: 10px 0;	/*上下、左右への余白*/
	color:#c74054;
	font-weight:bold;
	font-size:17px;
}
	
	
/*テーブル*/
.ta2{
	width:100%;
	font-size:80%;
}
/*th（左側）、td（右側）の共通設定*/
.ta2 th, .ta2 td {
	padding: 5px 0px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}
.bg-color01 {
	writing-mode: vertical-rl;
	letter-spacing: 0.1em;
}
	
/*その他
------------------------------------------------------*/
.sh{display:inline;}
.pc{display:none;}
	
}