@charset "Shift_JIS";

/* 全体のプロパティー　*/
.container{ margin: 0 auto; 0 auto; max-width: 1000px;}
body{ background: #f5f5f5;}

/* レイアウトのプロパティー　*/
/* 共通のレイアウト */
header{ background-color: none; padding: 2px; border-radius: 7px; margin-bottom: 1%;}
header p.resizeimage img { max-width: 100%; height: auto; display: block;}
article{ background-color: #ffffff; padding: 10px; border-radius: 7px; margin-bottom: 5%;}
aside{ background-color: #ffffff;  border-radius: 7px;}
footer{background-color: none;  padding: 0%; border-radius: 7px; clear: both;}
footer p.resizeimage img{	width: 100%; height: auto;}

/* pc　791px以上(左サイドバー)のレイアウト */
@media screen and (min-width:791px){
article{	width: 71%; float: right; margin: 1%;}
aside{ width: 25%; float: left;}
footer{	clear: both;}

/* PCヘッダー画像のプロパティ */
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc{ display: block !important;}
.sp{ display: none !important;}
}

/* タブレット　790px以下(左サイドバー)のレイアウト */
@media screen and (max-width:790px){ 
article{	width: 65%; float: right; margin: 1%;}
aside{ width: 30%; float: left;}
footer{ clear: both;}

/* タブレットヘッダー画像のプロパティ */
/* タブレットで見たときは"pc"のclassがついた画像が表示される */
.pc{ display: block !important;}
.sp{ display: none !important;}
}

/* スマホ　480px以下のレイアウト */
@media screen and (max-width:480px){ 
article{	width: 90%; float: none;} 
aside{ width: 95%; float: none; margin-top: 2%;} 
footer{	padding: 1%; margin-top: -2%;}
/* スマホヘッダー画像変換のプロパティ */
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
.pc{ display: none !important;}
.sp{ display: block !important;}
}

/* ヘッダーナビのプロパティー　*/
/*PCヘッダーナビのプロパティー　*/
header nav{ margin-top: -1%;}
header nav ul{ list-style: none; overflow: hidden; margin-bottom: 5px; background-position: center;}
header nav li{ width: 16%; text-align: center; float: left; height: 35px; line-height: 35px; margin-right: 1px; argin-bottom: 1px;
background : url(gijyutusi.head-02.gif) 0% 0% / auto auto repeat scroll padding-box border-box transparent;
}
header nav li a{ text-decoration: none; color: #fff; font-weight: bold;  padding: 20px;}

/* タブレットヘッダーナビのプロパティー */
@media screen and (max-width:790px){
header nav li{ width: 16%; background : url(gijyutusi.head-02.gif) }
header nav li a{ font-size: 0.9em; padding: 6px;}
}
/* スマホヘッダーナビのプロパティ */
@media screen and (max-width:480px){ 
header{	margin-top: -5%;}
header nav li{ width: 44%; margin-bottom: 1%;  }
header nav li a{	font-size:0.8em; padding: 2px;}
}

/* パンくずリストのプロパティー　*/
.sample li{ font-size: 0.8em; margin-left:-1%; margin-bottom:-1%;  margin-top:-5%; display: inline-block;　/*横並びにします*/}
.sample li::after{	content:" ＞ ";　/*記号( ＞ )を追加します*/}
.sample li:last-child::after{	content:"";　/*リスト要素の末尾は記号を消します*/}

/* スマホパンくずリストのプロパティー　*/
@media screen and (max-width:480px){ 
.sample li{ font-size: 0.6em; margin-left:-3%;}
}

/* コンテツのプロパティー　*/
article{}/*CSSを働かせるために表示*/
/* PCナビのプロパティ */
article ul{ margin-bottom:0%;}  
/* 見出しのプロパティ */
/*PC コンテツ見出しのプロパティー　*/
article h1{ 
color: white;/*文字色*/
border: solid 3px #00bfff;/*線色*/
padding: 0.5em;/*文字周りの余白*/
border-radius: 0.5em;/*角丸*/
background: #008000;/*背景色*/
font-size: 1.5em;
margin-top: 1%;
}
article h2{
font-size: 1.2em; background-color: #008000; 
color: white; padding: 0.5em; margin-left: 10px; 
margin-right: 10px;
}
article h3{
border-bottom: solid 3px #008000; 
font-size: 1.2em; color: black; margin-left: 10px;
}
article h3 a{
display: block; 
}

/* タブレット見出しのプロパティー　*/
@media screen and (max-width:790px){
article h1{ font-size:1.5em;}
article h2{ font-size:1.3em;}
article h3{ font-size:1.2em;}
article p{ font-size:0.9em;}
}
/* スマホコンテツ見出しのプロパティー　*/
@media screen and (max-width:480px){ 
article h1{ font-size: 1em;}
article h2{ font-size: 1em;}
article h3{ font-size: 1em;}
}

/*コンテツテキストのプロパティー　*/
/* PCコンテツテキストのプロパティー　*/
article p{ font-size :1.1em; line-height: 150% ; margin-left: 3%; margin-right: 3%; font-family: sans-serif;}
article li{ list-style: none; margin-bottom: 1%;}
/* PCコンテツテキストフォント太字と色指定のプロパティー　*/
span.bold-text01{ color:blue; font-weight:bold; font-size: 1em;} 
span.bold-text02{ color:blue; font-weight:bold; font-size: 1.2em;} 
span.bold-text03{ color:blue; font-weight:bold; font-size: 1.5em;}
span.bold-text04{ color:blue; font-weight:bold; font-size: 2em;}
span.bold-text05{ color:blue; font-weight:bold; font-size: 4em; line-height: 150% ;}
span.bold-text06{ color:#800000; font-weight:bold; font-size: 1em;}
span.bold-text07{ color:#800000; font-weight:bold; font-size: 1.2em;}
span.bold-text08{ color:#800000; font-weight:bold; font-size: 1.5em;}
span.bold-text09{ color:#800000; font-weight:bold; font-size: 2em;}
span.bold-text09{ color:#800000; font-weight:bold; font-size: 2em;}
span.bold-text10{ color:#800000; font-weight:bold; font-size: 4em; line-height: 150% ;}
.text-01{ background: green; font-size: 1.5em; font-weight:bold; color: white;}
.text-02{ font-size: 0.7em;}

/* タブレットコンテツテキストのプロパティー　*/
@media screen and (max-width:790px){
article li{ margin-bottom: 2%;}
/*タブレットコンテツテキストフォント太字と色指定のプロパティー　*/
article p{ font-size :1em;}
}


/* スマホコンテツテキストのプロパティー　*/
@media screen and (max-width:480px){ 
article p{ font-size :16px; line-height: 150% ; margin-left: 3%; margin-right: 3%;}
article li{ margin-bottom: 6%; margin-left: -10%;}
article li a{ font-size: 1em;}
/* スマホコンテツテキストフォント太字と色指定のプロパティー　*/
span.bold-text01{ font-size: 1em;} 
span.bold-text02{ font-size: 1.1em;}
span.bold-text03{ font-size: 1.2em;}
span.bold-text04{ font-size: 1.3em;}
span.bold-text05{ font-size: 2.5em;}

span.bold-text06{ font-size: 1em;}
span.bold-text07{ font-size: 1.1em;}
span.bold-text08{ font-size: 1.2em;}
span.bold-text09{ font-size: 1.3em;}
span.bold-text10{ font-size: 2.5em;}
}

/*コンテツ 画像のプロパティー　*/
/*PCコンテツ画像のプロパティ*/
.pc1{ width: 60%; height: auto; margin-left: 20%;}/*PC画像中央表示*/
.pc2{ width: 90%; height: auto; margin-left: 5%;}/*PC画像中央表示*/
.pc3{ width: 40%; height: auto; margin-left: 0%;}
.pc4{ width: 23%; height: auto; margin-left: 0%; }
.pc5{ margin-left: 0%; margin-right: 3%; margin-bottom: 3%; width: 40%; height:auto; float: left; clear: both;}
h2{ clear: both;}
h3{ clear: both;}
h4{ clear: both;}
.pc20{ width: 120%; height: auto; margin-left: 0%; }
video{ width: 60%; height: auto:}
.pc01{ display: block !important;}
.sp01{ display: none !important; }

/*タブレットコンテツ画像のプロパティ*/
@media screen and (max-width:790px){
.pc1{ width:90%; height: auto; margin-left: 5%;}/*タブレット画像中央表示*/
.pc4{ width: 23%; height: auto; margin-left: 0%;}
.pc01{ display: block !important; }
.sp01{ display: none !important; }
}

/*スマホコンテツ画像のプロパティ*/
@media screen and (max-width:480px){
.pc1{ width:90%; margin-left: 5%;}/*スマホ画像中央表示*/
.pc2{ width:90%; margin-left: 5%;}/*スマホ画像中央表示*/
.pc3{ width:45%; margin-left: 0%;}
.pc4{ width:100%; margin-left: 0%;}
.pc5{ width:90%; margin-left: 5%;}
h2{ clear: both;}
h3{ clear: both;}
h4{ clear: both;}
video{ width:90%;}
article p.video_center{ text-align: center;}
.pc01{ display: none !important; width:}
.sp01{ display: block !important; }
}

/* サイドバーのプロパティー　*/
/* PCサイドバーのプロパティー　*/
aside nav ul{ list-style-type: none; overflow: hidden; font-size: 1.2em; line-height: 150%;}
aside nav li{ margin-left: -17%; margin-bottom: 1%; height: 30px;  line-height: 50px; border-radius: 7px;  
background-position: center; background-repeat: no-repeat; /* 繰り返し表示オフ */}
aside nav li a{color: black; text-decoration: none; font-weight: bold; margin-left: 15%; font-size: 0.8em; display:  block;}
aside h3{ margin: 2% 5%; padding: 10px 5px; background-color: #008000; color: #ffffff ; text-align: center; }
aside p{ font-size: 1em; margin-left: 10%;}
aside img{ width: 80%; height: auto; margin-left:10%;}

/*タブレットサイドバーのプロパティー　*/
@media screen and (max-width:790px){
aside nav li{ margin-left: -20%;}
aside nav li a{ font-size: 0.8em; margin-left: 10%;}
}


/*スマホサイドバーのプロパティー　*/
@media screen and (max-width:480px){
aside h3{ margin: 2% 5%; padding: 10px 5px; background-color: #008000; color: #ffffff ; text-align: center; }
aside nav li a{ color: black; font-size: 1em; margin-left: 0%; text-align: center; }
aside{ padding:1%;}
}

/*上部に移動するボタンのプロパティ*/
.pagetop{
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a{
    display: block;
    background-color: #ffa500;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover{
    display: block;
    background-color: #b2d1fb;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}