@charset "utf-8";

/* スタイルシート構成概要

背景色変更ボタンで、配色用スタイルシートを切り替えるスクリプトを使用しています。
なので、スタイルシートは、配色とその他スタイルとを分割した構成となっています。
内訳は以下のとおり。

【基本スタイルシート】
・style.css  ：　配色以外のスタイル定義したスタイルシート

【配色用スタイルシート】
・default.css：　標準配色をまとめたスタイルシート
・yellow.css ：　黄色背景の配色をまとめたスタイルシート
・blue.css   ：　青色背景の配色をまとめたスタイルシート
・black.css  ：　黒色背景の配色をまとめたスタイルシート

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


/* 背景色変更ボタン関連（スタイルシート切り替え） 
--------------------------------------------------------------------------------------------------------------------------------------------*/

#cssChanger input {
	position: absolute;
	right: 0;
	opacity: 0; /* ラジオボタンを透明に */
}

#cssChanger label {
	display: block;
	margin-right: 5px;
	width: 35px;
	height: 35px;
	font-weight: bold;
	font-size: 15px;
	float: left; /* floatレイアウトで横並びに */
	text-align: center;
	border-radius: 30px;
	line-height: 38px;
}

#cssChanger:after { /* clearfix */
	content: "";
	display: block;
	clear: left;
}


/* フォントサイズ変更ボタン関連
--------------------------------------------------------------------------------------------------------------------------------------------*/
.textsize {
	margin: 10px auto;
}
.textsize ul {
	overflow: hidden;
}
.textsize li {
	float: left;
	margin: 0 5px 0 0;
	display: block;
	width: 35px;
	height: 35px;
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	border-radius: 30px;
	line-height: 38px;

}
.t1 {
	cursor: pointer;
}
.t2 {
	cursor: default;
}

#textS {
	font-size: 15px;
}
#textM {
	font-size: 19px;
}
#textL {
	font-size: 23px;
}

/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
html{
	font-size: 100%;	/*文字サイズ*/
}

body {
	margin: 0px;
	padding: 0px;
	color: #333;	/*全体の文字色*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	line-height: 2;		/*行間*/
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,input,textarea {
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}
ul {
	list-style-type: none;
}

img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

table {
	width: 100%;
	border-collapse:collapse;
	border-spacing: 0;
}
.youtube {
	width: 60%;
	aspect-ratio: 16 / 9;
}
.youtube iframe {
	width: 100%;
	height: 100%;
}

/* YouTubeは読みこみ高速化のため、埋め込みではなく、
 * サムネイル画像表示しています。
---------------------------------------------------------------*/
.youtubesm{
	width: min(38vw,510px);
	height: min(20vw,300px);
	padding: 5px;
	}
	.youtubesm a{
		display:block;
		position:relative
	}
	.youtubesm a:hover{
	opacity:.6
	}
	.youtubesm a::before{
	background:url(../images/youtube.png) center center / 100px 64px no-repeat;content:"";
	display:block;
	width:100%; /*アイコンの幅調整*/
	height:70px; /*アイコンの高さ調整*/
	margin:-32px auto 0;
	position:absolute;
	top:50%;
	left:0;
	right:0;
	z-index:1
	}
	.youtubesm a img{
	width:100%
}

/*IE11 Youtube 表示調整 */
@media all and (-ms-high-contrast:none){
	.youtubesm{
		width: 38vw;
		height: 20vw;
		max-width: 510px;
		max-height: 300px;
		padding: 5px;
	}
  }


/* テキストコントロール
-----------------------------------------*/

.tc {
	text-align: center; /* 中央寄せ */
}

.textSM {
	font-size: 90%; /* フォントサイズ90%　*/
}

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

#blank {
	height: 300px;
}

b {
	font-weight: bold;
}


table {
	border-collapse: collapse;
}
th {
	text-align: left;
	font-weight: bold;
}
th, td {
	padding: 20px;
}

hr {
	border-style: dashed;
	margin-top: 40px;
	margin-bottom: 40px;
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	transition: 0.2s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
a:hover {
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}
/*マウスオン時の画像*/
a:hover img {
	opacity: 0.8;	/*80%色がついた状態*/
}

/*inner共通
---------------------------------------------------------------------------*/
.inner {
	max-width: 1300px;	/*サイトの最大幅*/
	margin: 0 auto;
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	margin: auto;
	width: 100%;		/*ブロックの幅*/
	height: 100px;		/*高さ*/
}
/*ロゴ画像*/
header #logo {
	width: 55%;		/*ロゴ画像の幅*/
	height: 100%;		/*ロゴ画像の幅*/
	float: left;		/*左に回り込み*/
	padding-top: 20px;
	padding-left: 10px;
}

.logo-img {
    background-repeat: no-repeat;/* 画像の繰り返しを指定  */              
	background-size: contain;
    width: 100%; /* 横幅のサイズを指定    */
	height: 100%;
}

#header-flex {
	display: flex;
	align-content: space-between;
	align-items: center;
	align-self: center;
	flex-direction: row;
	font-weight: bold;
	justify-content: flex-end;
	padding-top: 18px;
	height: 60px;
}

#header-flex #space {
	flex-grow: 2;
}

.header-label {
	font-size: 16px;
	margin-right: 0.5vw;
	margin-left: 0.5vw;
}

/*メインメニューのブロック
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar {
	clear: both;
	height: 75px;		/*メニューの高さ。下の「#menubar ul li a」の「height」と「padding-top」の数字を合計した数字に合わせる。*/
	text-align: center;	/*文字を中央に*/
}
/*メニュー１個あたりの設定*/
#menubar li {
	float: left;	/*左に回り込み*/
	width: 25%;	/*メニュー幅（100÷4個=25%）*/
}
#menubar li a {
	text-decoration: none;display: block;
	line-height: 1.6;	/*行間を少し狭く*/
	font-weight: bold;   /*フォントウェイト*/
	font-size: 16px;
	height: 60px;		/*高さ*/
	padding-top: 15px;	/*上に追加する余白*/
}

/*飾り文字*/
#menubar li span {
	display: block;
	font-size: 9px;			/*文字サイズ*/
	font-weight: normal;	/*文字を太字でなく標準に戻す設定*/
	letter-spacing: 0.2em;	/*文字間隔を少しあける設定*/
	opacity: 0.5;			/*透明度50％*/
}
/*マウスオン時と、現在表示中(current)のメニューの設定*/
#menubar li a:hover, #menubar li.current a {

}

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
---------------------------------------------------------------------------*/
/*上部固定メニュー用fixmenu設定*/
body.is-fixed-menu .nav-fix-pos {
	width: 100%;z-index: 100;position: fixed;top: 0;left: 0;
}
body.is-fixed-menu header {
	margin-bottom: 75px;	/*メニューの高さを指定。menubarのborderが1px分ありますが大差ないので75でOKです。*/
}
/*上の設定の「is-fixed-menu」を「is-fixed」に変更したものをそのまま記入します。fixmenuスクリプトを２つ使う為に必要な設定になります。*/
body.is-fixed .nav-fix-pos {
	width: 100%;z-index: 100;position: fixed;top: 0;left: 0;
}
body.is-fixed header {
	margin-bottom: 75px;
}

/*contents
---------------------------------------------------------------------------*/
#contents {
	clear: both;overflow: hidden;
	padding-top: 40px;		/*上に空けるボックス内の余白*/
	padding-bottom: 10%;	/*下に空けるボックス内の余白*/
	min-height: 600px;
}

/*footer-contents
---------------------------------------------------------------------------*/
#footer-contents {
	clear: both;overflow: hidden;
	padding-top: 20px;		/*上に空けるボックス内の余白*/
	padding-bottom: 20px;	/*下に空けるボックス内の余白*/
}

/*contents-in（mainとsubを囲むブロック）
---------------------------------------------------------------------------*/
#contents-in {
	margin: auto;
	width: 80%;		/*ブロックの幅*/
}

/*top-linksコンテンツ（中央のブロック）
---------------------------------------------------------------------------*/
#top-links {
	margin: auto;
	margin-bottom: 20px;
}

#top-links a img{
	width: 49%;
	position: relative;
}
#img2{
	float: right;
}

#pre-title {
	font-size: 120%;
	font-weight: bold;
	/*font-style:oblique;*/
}

/*system-linksコンテンツ（各システムリンク・関連ページ）
---------------------------------------------------------------------------*/
#system-links{
	width: 100%;
	background-size: cover;
	background-position: center;
}

#system-links .top-links{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#system-links .top-links2{
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#system-links .link-pair {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 240px;
}

#system-links .top-links a{
	width: 240px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.2s;
}

#system-links .top-links a .link-innerTop{
	height: 190px;
	width: 240px;
	padding: 10px 0px;
	border-radius: 5px 5px 5px 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.2s;
	position: relative; 
}
	
#system-links .top-links a .link-innerTop span{
	display: block;
	text-align: center;
	line-height: 1.3;
	font-size: 1.5rem;
	font-weight: bold;
	padding: 0 25px 0 20px;
	margin: 5px auto 10px auto;
}

#system-links .top-links a .link-innerTop p{
	font-size:1.0rem;
	display:table;
	margin: 0 auto;
}

#system-links .top-links a .link-innerTop .badge {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-size: 0.75rem;
	border: none;
	padding: 0px 10px;
	border-radius: 9999px; /* pill形状 */
	font-weight: bold;
	text-shadow: 0 0 0;
	transition: background-color 0.3s, color 0.3s;
}

#system-links .top-links a .link-innerTop .badge2 {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-size: 0.75rem;
	border: none;
	padding: 0px 10px;
	border-radius: 9999px; /* pill形状 */
	text-shadow: 0 0 0;
	transition: background-color 0.3s, color 0.3s;
}

#system-links .top-links .link-innerBottom{
	text-align: center;
	padding: 10px 0;
}

#system-links .top-links .link-innerBottom .time{
	width: 240px;
	font-size:1.4rem;
	font-weight: bold;
}

#system-links .top-links .link-innerBottom .aks {
	font-style: normal;
	font-weight: normal;
	line-height: 1.5;
	display: inline-block;
}


/*mainコンテンツ（中央のブロック）
---------------------------------------------------------------------------*/
#main {
	margin: auto;
}
/*mainコンテンツのh2タグ設定*/
#main h2 {
	padding-top: 8%;	/*上下、左右への余白*/
	padding-bottom: 3%;	/*上下、左右への余白*/
	font-weight: bold;
	text-align: center;
}
/*h2タグの１文字目への追加設定*/
#main h2::first-letter {
	padding-left: 15px;				/*線とテキストとの余白*/
}
/*mainコンテンツのh3タグ設定*/
#main h3 {
	clear: both;
	padding-top: 3%;	/*上下、左右への余白*/
	padding-bottom: 3%;
	font-weight: bold;

}
/*mainコンテンツの段落タグ設定*/
#main p {
	padding: 0px 20px 20px;	/*上、左右、下への余白*/
}
/*他。微調整。*/
#main p + p {
	margin-top: -5px;
}
#main h2 + p,
#main h3 + p {
	margin-top: -10px;
}
#main section + section {
	margin-top: 30px;
}

/*お知らせ（notice）
　flexコンテナ構成
---------------------------------------------------------------------------*/

#notice{
	display: flex;
	align-items: center;
}
#notice-title{
	display: flex;
}
#notice-separator{
	display: flex;
}
#notice-list{
	display: flex;
	flex-direction: column;
	flex-grow: 2;
}
#notice-all{
	padding-top: 20px;
	display: flex;
	justify-content: flex-end
}

#notice-index div{
	margin-left: 10px;
	margin-bottom: 10px;
	float: left;
	line-height: 1.5;
}
#notice-index a,
#notice-all a {
	text-decoration: underline;
	/*font-weight: bold;*/
}
#notice-index a:hover,
#notice-all a:hover {
	text-decoration: underline;
}
#notice-index .important {
	font-weight: bold;
	color: #E16464;
}
#notice-separator div{
	height: 100px;
	width: 1px;
	margin-left: 30px;
	margin-right: 30px;
}
#notice-all img{
	width: 20px;
	height: 20px;
	margin-right: 10px;
}

.notice-date{
	font-weight: bold;
}

.notice-contents {
	padding: 20px;
}

.notice-contents div{
	margin-left: 20px;
}
/*ご利用開始までの流れ(step）
　flexコンテナ構成

--- step（横） -----------------------------------------------------

｜ step-item ｜ step-item | step-item | step-item | step-item |

----------------------------------------------------------------
---------------------------------------------------------------------------*/
#step{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 20px;
	font-weight: bold;
	line-height: 100%;
	flex-wrap: wrap;
}

.step-item{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.step-item a {
	text-decoration: none;
	text-align: center;
}

.step-circle{
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	text-align: center;
	line-height: 10rem;
	margin-bottom: 20px;
}
.step-circle img {
	width: 70%;
}

.step-triangle {
	margin-top: 4rem;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

/*　お困りですか？(help）
　flexコンテナ構成

--- help（横） -------------------------------------------------

｜ help-item ｜ help-item | help-item |

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

#help{
	display: flex;
	margin-bottom: 20px;
	font-size: 150%;
	font-weight: bold;
	line-height: 100%;
	width: 100%;
}

.help-item{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin: 5px;
}
.help-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 5%;
}
.help-circle{
	width: 9rem;
	height: 9rem;
	border-radius: 50%;
	text-align: center;
	line-height: 9.4rem;
	margin: 10%;
}
.help-circle img{
	width: 70%;
}
.help-title{
	padding-top: 10%;
}

.help-description{
	width: 75%;
	font-size: 70%;
	padding: 10%;
}

/*　参加団体一覧(group）
　flexコンテナ構成

--- group（横） -------------------------------------------------

｜ group-item ｜ group-item | group-item | ・・・（wrap）

----------------------------------------------------------------
---------------------------------------------------------------------------*/
#group{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 20px;
	font-weight: bold;
	line-height: 100%;
}

#group div {
	text-align: center;
	border-radius: 6px;
	width: 7%;
	margin: 3px;
	padding: 2% 4%;
}

#group a {
	text-align: center;
	border-radius: 6px;
	width: 15.8%;
	height: 50px;
	margin: 3px;
	line-height: 50px;
	text-decoration: none;
}

#group a:hover {
	text-decoration: underline;
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
}
.operator-img {
    background-repeat: no-repeat;/* 画像の繰り返しを指定  */              
	background-size: contain;
    width: 10%; /* 横幅のサイズを指定    */
	height: 100%;

}

#callcenter-header {
	width: 100%;
	font-weight: bold;
	text-align: center;
}

#callcenter-contents {
	justify-content: center;
	height: 120px;
	padding-top: 0.5rem;
}

#operator{
	width: 10%;
}

.flex-row {
	display: flex;
	flex-direction: row;
}
.flex-column {
	display: flex;
	flex-direction: column;
}
.f-c {
	align-items: center;
}
.f-sb {
	justify-content: space-between;
}

#open{
	line-height: 30px;
	justify-content: space-between;
}

#date{
	align-items: flex-end;
	width: 130px;
	margin: 0 20px 0 0
}

#callcenter-title{
	font-weight: bold;	
	line-height: 120%;
}
#bold-200{
	font-weight: bold;
	line-height: 100%;
}
#bold-500{
	font-size: 283%;
	font-weight: bold;
	line-height: 140%;
}

#callcenter-footer {
	width: 100%;
	font-weight: bold;
	text-align: center;
}

/* intro.html
---------------------------------------------------------------------------*/
#required-env th{
	width: 25%;
}

#system-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 150%;
}

.system-info-item {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin: 3%;
}
.system-info-item:nth-child(2n) {
	width: 100%;
}
.system-info-circle {
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	text-align: center;
	line-height: 10rem;
	margin-bottom: 20px;
}
.system-info-circle img{
	width: 70%;
}

#setting a {
	text-align: center;
	border-radius: 6px;
	font-weight: bold;
	padding-top: 1vw;
	padding-bottom: 1vw;
	margin-top: 0.5vw;
	text-decoration: none;
}
#setting a:hover {
	text-decoration: underline;
}

.setting-item {
	width: 100%;
	padding: 20px;
	margin: 20px;
	border-radius: 5px;
}
.setting-triangle {
	margin-top: 10rem;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

/* movie.html
　flexコンテナ構成
---------------------------------------------------------------------------*/
#movie{
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
	margin-bottom: 20px;
	font-weight: bold;
	line-height: 100%;
	flex-wrap: wrap;
}

.movie-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20px;
}
.movie-item a {
	text-decoration: none;
	text-align: center;
}

.movie-circle{
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	text-align: center;
	line-height: 8rem;
	margin-bottom: 20px;
	margin-left: 20px;
}
.movie-circle img{
	width: 5rem;
}
/* manual.html
　flexコンテナ構成
---------------------------------------------------------------------------*/
#manual-list div {
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 5px;
}
#manual-list div span{
	font-size: 120%;
	font-weight: bold;
}

.pdf:after {
	content: " ";
	display: inline-block;
	background: url("../images/pdf.png") ;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	vertical-align: middle;
}

.zip:after {
	content: " ";
	display: inline-block;
	background: url("../images/zip.png") ;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	vertical-align: middle;
}


#manual-list li{
	margin-left: 20px;
	margin-bottom: 0px;
}
/* link.html
---------------------------------------------------------------------------*/
#map {
	width: 70%;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

#map a {
	position: absolute;
	font-weight: bold; /*太字に*/
	font-size: min(1.7vw,20px);/*サイズ2倍*/
	text-decoration: none;
}
#map a:hover {
	/* default.css記載 */
}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu {
	overflow: hidden;
}
/*コピーライト
---------------------------------------------------------------------------*/
#copyright {
	clear: both;
	text-align: center;
}
#copyright a {text-decoration: none;}


/*btn（inputタグ用）
---------------------------------------------------------------------------*/
#main input[type="submit"].btn,
#main input[type="button"].btn,
#main input[type="reset"].btn {
	padding: 5px 10px;		/*上下、左右へのボタン内の余白*/
	border-radius: 3px;		/*角丸のサイズ*/
}
/*マウスオン時の設定*/
#main input[type="submit"].btn:hover,
#main input[type="button"].btn:hover,
#main input[type="reset"].btn:hover {

}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*アニメーションのキーフレーム設定（変更不要）*/
@keyframes scroll {
0% {opacity: 0;}
100% {opacity: 1;}
}
/*デフォルトでは非表示に*/
body .nav-fix-pos-pagetop a {display: none;}
/*ボタンの設定*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 100;position: fixed;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	bottom: 50px;		/*下から50pxの場所に配置*/
	right: 3%;			/*右から3%の場所に配置*/
	animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {

}



/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	list-style: disc;
	padding: 0 20px 20px 45px;
}
ol {
	padding: 0 20px 20px 47px;
}

/*その他
---------------------------------------------------------------------------*/
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb30 {margin-bottom: 30px !important;}
.clear {clear: both;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr {float: right;margin-left: 10px;margin-bottom: 10px;}
img.fl {float: left;margin-right: 10px;margin-bottom: 10px;}
.big1 {font-size: 24px;letter-spacing: 0.2em;}
.mini1 {font-size: 11px;}
.sh {display: none;}
.ofx {overflow-x: hidden;}
.panorama-img {width: 600px !important;height: 400px !important;}



/*画面幅1301px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1301px){

/*inner共通
---------------------------------------------------------------------------*/
.inner {
	width: 1301px;	
}

/*メインメニューとドロップダウンメニューの設定変更。
メニュー数が4個なので、1301÷4=325pxになります。
---------------------------------------------------------------------------*/
#menubar li, #menubar ul.ddmenu {
	width: 325px;
}

/*モバイル用メニューを非表示にする*/
#menubar-s {display: none;}

}



/*画面幅1300px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1300px){

/*contents（３カラムを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	margin: 0 1%;	/*上下、左右へのコンテンツの外側へ空けるスペース*/
}

/*モバイル用メニューを非表示にする*/
#menubar-s {display: none;}

}
/*画面幅1177px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1177px){
	#menubar li a {
		font-size: 82%;
	}
	#group a {
		width: 15.5%;
	}
}
/*画面幅950px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:950px){

header {
	height: 150px;
}
/*ロゴ画像*/
header #logo {
	flex-grow: 2;
	width: 80%;
	height: 42%;
	padding-top: 0px;
}

#header-flex #space {
	width: 20%;
}

#header-flex {
	height: 120px;
	flex-wrap:wrap;
	/*justify-content:center;*/
}

}

/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){

/*ログイン（ヘッダー右側のログイン）
---------------------------------------------------------------------------*/
header .login a {
	float: left;			/*ロゴの右に来るように再指定*/
	margin-left: 20px;		/*ロゴとの間にとるスペース*/
	background-image: none;	/*ブラウザ幅が狭くなるので、鍵マークを消す*/
	padding: 5px 30px;		/*上下、左右へのボタン内の余白*/
}

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
---------------------------------------------------------------------------*/
/*fixmenuから折りたたみメニューになるのでリセット。*/
body.is-fixed-menu header,body.is-fixed header {margin-bottom: 0px;}

/*メインメニュー
---------------------------------------------------------------------------*/
/*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。透明(0%)から色を100%出すアニメーション指定。*/
@keyframes menu1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*スマホ用メニューブロック*/
#menubar-s {
	display: block;overflow: hidden;z-index: 10;
	/*
	position: absolute;
	top: 100px;*/	/*上から100pxの場所に配置*/
	width: 100%;
	animation-name: menu1;		/*上のkeyframesの名前*/
	animation-duration: 0.5S;	/*アニメーションの実行時間。0.5秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}
/*メニュー１個あたりの設定*/
#menubar-s li a {
	display: block;text-decoration: none;
	padding: 5px 10px 5px 20px;	/*上、右、下、左へのメニュー内の余白*/
	font-size: 16px;		/*文字サイズ*/
	font-weight: bold;
	border-bottom: 1px solid #333;
}

/*英語表記（飾り文字）*/
#menubar-s li a span {
	display: block;
	font-size: 12px;	/*文字サイズ*/
}
/*PC用メニューを非表示にする*/
#menubar {display: none;}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;position: absolute;
	top: 15px;	/*上から24pxの場所に配置*/
	right: 3%;	/*右から3%の場所に配置*/
	border: 1px solid;	/*枠線の幅、線種*/
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 50px;		/*幅*/
	height: 50px;		/*高さ*/
	border-radius: 50%;	/*円形にする。この行削除すれば正方形になります。*/
}


/*contents（３カラムを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	padding: 0px 2% 20px;	/*上下、左右へのボックス内の余白*/
}

/*main,sub,side,contents-in
---------------------------------------------------------------------------*/
#main, #sub, #side, #contents-in {
	float: none;
	width: auto;
	overflow: hidden;
}

/*その他
---------------------------------------------------------------------------*/
body.s-n #sub,body.s-n #side {display: none;}
.sh {display:block;}
.pc {display:none;}

#group a {
	width: 15.2%;
}

#bold-500{
	font-size: 183%;
}

}


/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	text-align: center;
	height: 120px;
}

/*ヘッダー上のテキストサイズを小さく*/
.header-label {
	font-size: 9px;
}

#header-flex {
	height: 110px;
	flex-wrap:wrap;
	/*justify-content:center;*/
}

/*背景色変更ボタンを小さく*/
#cssChanger label {
	width: 22px;
	height: 22px;
	line-height: 25px;
}

/*文字サイズ変更ボタンを小さく*/
.textsize {
	margin: 10px 10px;
}
.textsize ul {
	overflow: hidden;
}
.textsize li {
	width: 22px;
	height: 22px;
	line-height: 25px;
}
#textS {
	font-size: 10px;
}
#textM {
	font-size: 14px;
}
#textL {
	font-size: 18px;
}

/*ロゴ画像*/
header #logo {
	float: none;
	margin: 0 auto;
	padding: 8px 0;
	width: 60%;
	height: 100%;
}
#header-flex #space {
	width: 80px;
}
/*ログイン（ヘッダー右側のログイン）
---------------------------------------------------------------------------*/
header .login a {
	float: none;
	margin: 0;
}
#top-links a img {
	width: 100%;
}

#img2 {
	padding-top: 1rem;
	float: none;
}

#help{
	font-size: 100%;
}
#step{
	font-size: 70%;
}
.step-circle{
	width:4rem;
	height: 4rem;
	line-height: 4.2rem;	
}

.step-triangle {
	margin-top: 1rem;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

.help-circle {
	width: 6rem;
	height: 6rem;
	line-height: 6.4rem;
}

#bold-200{
	font-weight: bold;
	line-height: 100%;
}
#bold-500{
	font-size: 150%;
	font-weight: bold;
	line-height: 150%;
}

.half-fontsize{
	font-size: 80%;
	line-height: 20px;
}

#callcenter-contents {
	justify-content: center;
	height: 80px;
	padding-top: 0.2rem;
}

#date{
	width: 90px;
	margin: 0 10px 0 0
}

/*その他
---------------------------------------------------------------------------*/
.panorama-img {width: 450px !important;height: 300px !important;}

#group a {
	width: 14%;
	font-size: 80%;
}


}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 12px;	/*文字サイズ*/
}

/*contents（３カラムを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	line-height: 1.5;	/*行間*/
}

/*mainコンテンツ
---------------------------------------------------------------------------*/
#main h2, #main h3 {
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 10px;
}
/*段落タグ設定*/
#main p {
	padding: 0px 10px 10px;
}

#top-links a img {
	width: 100%;
}

#img2 {
	padding-top: 1rem;
	float: none;
}

#help{
	font-size: 90%;
}
#step{
	font-size: 50%;
}
.step-circle{
	width:4rem;
	height: 4rem;
	line-height: 4.2rem;	
}

.step-triangle {
	margin-top: 1rem;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

.help-circle {
	width: 6rem;
	height: 6rem;
	line-height: 6.4rem;
}

/*submenu（sub,sideのメニュー）
---------------------------------------------------------------------------*/
/*メニュー１個ごとの設定*/
#sub .submenu li a,
#side .submenu li a {
	padding: 10px;	/*ボックス内の余白*/
}

/*フッターメニュー
ウィンドウ幅が狭くなって見づらくなるので、１列にレイアウト変更。
---------------------------------------------------------------------------*/
#footermenu ul {
	float: none;
	width: auto;
}

#bold-200{
	font-weight: bold;
	line-height: 100%;
}
#bold-500{
	font-size: 150%;
	font-weight: bold;
	line-height: 140%;
}

.half-fontsize{
	font-size: 60%;
	line-height: 15px;
}

#callcenter-contents {
	justify-content: center;
	height: 60px;
	padding-top: 0.2rem;
}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	list-style: disc;
	padding: 0 20px 20px 30px;
}
ol {
	padding: 0 20px 20px 30px;
}

/*その他
---------------------------------------------------------------------------*/
img.fr,img.fl {float: none;margin: 0;width: 100%;}

/*ロゴ画像*/
header #logo {
	padding-top: 7px;
	height: 35%;
}
#header-flex #space {
	width: 60px;
}

#group a {
	width: 14%;
	font-size: 65%;
}

}


#required-env .important {
	margin-left: 16px;
	font-weight: bold;
}