@charset "utf-8";

/* ==========================================================================
   Media Queries
   ========================================================================== */   



main{ width:100%; color:#333; font-size: 120%; }
section {width: 98%; margin: 0 auto; padding:0;}
div.intro{width: 95%; margin: 0 auto; }
ul.list{width: 100% ; margin: 0; padding:0;}
table {width: 100% ;}
iframe { width : 100% ; }
br { display : none ; }
img { float : none ; clear: both;}
p { font-size : 80% ; line-height : 1.5 ; }
figure{float:none; display: block; clear: both; margin:5% 0;}
figcaption{line-height : 1.2; font-size: 75%;}


.mini { font-size:75%;}




div.index { background: url("../img/index.jpg") center no-repeat; background-size:cover;}
div.use00 { background: url("../img/use00.jpg") center no-repeat; background-size:cover;}
div.use01 { background: url("../img/use01.jpg") 40% 20px no-repeat; background-size:cover;}
div.use02 { background: url("../img/use02.jpg") 50% 40px no-repeat; background-size:cover;}
div.use04 { background: url("../img/use04.jpg") 50% 40px no-repeat; background-size:cover;}
div.use05 { background: url("../img/use05.jpg") center no-repeat; background-size:cover;}

div.usep01{ background: url("../img/usep01.jpg") center no-repeat; background-size:cover;}
div.usep02{ background: url("../img/usep02.jpg") 0 no-repeat; background-size:cover;}
div.usep03{ background: url("../img/usep03.jpg") center no-repeat; background-size:cover;}
div.usep04{ background: url("../img/usep04.jpg") 0 no-repeat; background-size:cover;}
div.usep05{ background: url("../img/usep05.jpg") 0 no-repeat; background-size:cover;}
div.usep06{ background: url("../img/usep06.jpg") 0 no-repeat; background-size:cover;}
div.usep07{ background: url("../img/usep07.jpg") center no-repeat; background-size:cover;}
div.usep08{ background: url("../img/usep08.jpg") center no-repeat; background-size:cover;}
div.usep09{ background: url("../img/usep09.jpg") center no-repeat; background-size:cover;}

div.usew01{ background: url("../img/usew01.jpg") center no-repeat; background-size:cover;}
div.usew02{ background: url("../img/usew02.jpg") center no-repeat; background-size:cover;}
div.usew03{ background: url("../img/usew03.jpg") 0 no-repeat; background-size:cover;}
div.usew04{ background: url("../img/usew04.png") 0 no-repeat; background-size:cover;}
div.usew05{ background: url("../img/usew05.jpg") 0 no-repeat; background-size:cover;}
div.usew06{ background: url("../img/usew06.jpg") 0 no-repeat; background-size:cover;}
div.usew07{ background: url("../img/usew07.jpg") 0 no-repeat; background-size:cover;}
div.usew08{ background: url("../img/usew08.jpg") 0 no-repeat; background-size:cover;}



 /*index.html周り*/
 
div.menu article {
  width:100%;
  min-height: 350px;
  height: 25vw;
  margin:0 auto;
  padding-top:1%;
  padding:5% 5% 5% 10%;
  color: #000;
  text-shadow: 0 0 50px #fff;
}


article p{line-height: 1.5;}

article div.info{ width:95%; background-color: rgba(255,255,255,0.6); padding: 5%;}

/*usepw.html周り*/

div.menu article h2 {
    font-weight: normal;
    border: none;
	padding: 1% 0;
	margin-top:3%;
	
}


div.bgi{
  width:100%;
  min-height: 250px;
  height: 20vw;
  position: relative;
  }


div.use01main {
  width: 100%;
  padding:0;
  margin:0 auto;}



 /*書いた人*/

div.author,div.favlinks{
    width:95%;
	margin:10% auto;
	padding:5%;
    font-size: 95%;
    line-height: 140%;
	border: 1px solid #ccc;}

/* --------------------------------
　タイトル系
  --------------------------------- */

 /*ページタイトル*/

h1.title{ font-size: 1.7rem; text-indent: 1em; bottom: 5%; letter-spacing: -1px;}

section h2{ color: #222; font-size: 1.3rem; letter-spacing: -1px;}

section.al h3 { font-size: 1.2rem; letter-spacing: -1px;}

h4 { font-size: 1.1rem; letter-spacing: -1px;}



 /*パンくずリスト*/

.breadcrumb { margin: 0; padding: 0; font-size: 0.6em; text-indent: 1em;}


 /*use01アイコン*/

ul.icon { font-size: 60%;}



 /*スペック系table装飾*/

div.spec-long{ font-size:65%;}

table.list {font-size:60%;line-height : 1.5;}


dl.tb{
	font-size:60%;
	line-height:1.5;}


 /*リスト系ul装飾*/

ul.list{margin:1%; font-size:80%;}
ul.list li {text-indent: -1em; margin:3% 1%; line-height : 1.5;}

ul.list li:before {
	font-family: FontAwesome;
	content: '\f0da';
	font-size: 1em;
	margin-left:5%;
	padding-right: 5px;
	color: #ccc;}




 /*もくじ装飾*/

div.outline { margin:3% auto; color: #666; width:95%; border: 1px solid #dcdcdc; font-size:90%; line-height: 1.5;}
div.outline ul.outline1 { margin:0 auto; padding-left:5%; font-size:80%;}



 /*考え方*/

div.think {font-size:80%;}
div.think ol li span.pt2 { padding: 0.1em 1em; }

 /*ポイント*/
 
div.point { margin:3% auto; width:100%;}
div.point p.tl { text-align:center; font-weight:bold;}



/*チャット形式部分*/

.chat p{ width:80%; font-size:70%;}



/*出典*/

cite {
    font-size: 60%;
}




/* --------------------------------
　最後の戻るボタン
  --------------------------------- */
  
div.goback {  margin: 20% auto;}



/* --------------------------------
　header >nav2
  --------------------------------- */

div.nav2{
  width: 100%;
  background-color: #fff;}


.use01nav{display:none;}
	

/* --------------------------------
　footer
  --------------------------------- */



ul.footer li {
  display: inline-block;
  margin: 1%;
  font-size:70%;
  color: #fff;
  border: none;}


/* --------------------------------
　キャラの大きさ
  --------------------------------- */
.chat p{
    clear: both;
    position: relative;
    min-height: 100px;
    margin:5% 2% 2% 21%;
	width:75%;
    padding: 5%;
}

.c_s1{ background: url(../img-main/c_s1.gif) left center no-repeat; background-size:20% auto;}
.c_s2{ background: url(../img-main/c_s2.gif) left center no-repeat; background-size:20% auto;}
.c_s3{ background: url(../img-main/c_s3.gif) left center no-repeat; background-size:20% auto;}
.c_s4{ background: url(../img-main/c_s4.gif) left center no-repeat; background-size:20% auto;}
.c_s5{ background: url(../img-main/c_s5.gif) left center no-repeat; background-size:20% auto;}

.c_c1{ background: url(../img-main/c_c1.gif) left center no-repeat; background-size:20% auto;}
.c_c2{ background: url(../img-main/c_c2.gif) left center no-repeat; background-size:20% auto;}
.c_c3{ background: url(../img-main/c_c3.gif) left center no-repeat; background-size:20% auto;}
.c_c4{ background: url(../img-main/c_c4.gif) left center no-repeat; background-size:20% auto;}
.c_c5{ background: url(../img-main/c_c5.gif) left center no-repeat; background-size:20% auto;}
.c_c6{ background: url(../img-main/c_c6.gif) left center no-repeat; background-size:20% auto;}
.c_c7{ background: url(../img-main/c_c7.gif) left center no-repeat; background-size:20% auto;}
.c_c8{ background: url(../img-main/c_c8.gif) left center no-repeat; background-size:20% auto;}
.c_c9{ background: url(../img-main/c_c9.gif) left center no-repeat; background-size:20% auto;}
.c_c10{ background: url(../img-main/c_c10.gif) left center no-repeat; background-size:20% auto;}
.c_c11{ background: url(../img-main/c_c11.gif) left center no-repeat; background-size:20% auto;}
.c_c12{ background: url(../img-main/c_c12.gif) left center no-repeat; background-size:20% auto;}
.c_c13{ background: url(../img-main/c_c13.gif) left center no-repeat; background-size:20% auto;}
.c_c14{ background: url(../img-main/c_c14.gif) left center no-repeat; background-size:20% auto;}
.c_c15{ background: url(../img-main/c_c15.gif) left center no-repeat; background-size:20% auto;}
.c_c16{ background: url(../img-main/c_c16.gif) left center no-repeat; background-size:20% auto;}
.c_c17{ background: url(../img-main/c_c17.gif) left center no-repeat; background-size:20% auto;}
.c_c18{ background: url(../img-main/c_c18.gif) left center no-repeat; background-size:20% auto;}
.c_c19{ background: url(../img-main/c_c19.gif) left center no-repeat; background-size:20% auto;}
.c_c20{ background: url(../img-main/c_c20.gif) left center no-repeat; background-size:20% auto;}