@charset "utf-8";

/*  --------------------------------
　メイン内装飾
  ---------------------------------  */




body {
   -webkit-text-size-adjust : 100%!important ; 
   font-family: 'Open Sans', 'YuGothic_Family', 'YuGothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}


div section { overflow : hidden ; }


 /* 一番大きな括り */ 
 
main {
  width: 100%;
  height: 100%;
  background-color: white;
  margin:0 auto;
  color: #000;
  font-size: 100%;
  line-height: 1.6em;
  letter-spacing: 1px;} 
  

 /* 単元 */

article {
  width:100%;
  margin:0 auto;}

 /* セクション */

section {
  width: 950px;
  display: block;
  margin: 0 auto;
  padding: 0 2%;}


div.intro{
  width: 950px;
  margin: 0 auto;
  padding:3% 0;}


.br:before {
	content: "\A" ;
	white-space: pre ;
}

div.goback { margin: 10% auto;}


 /* link装飾 */
 
div.intro a:link, section.al a:link, div.use01main a:link {color:#33a5cb; font-weight:bold;} /* 未訪問のリンクの色 */
div.intro a:visited, section.al a:visited, div.use01main a:visited {color:#33a5cb;} /* 訪問済みのリンクの色 */
div.intro a:hover, section.al a:hover, div.use01main a:hover {color:#fff; background-color: #33a5cb;} /* カーソルが乗っているリンクの色 */
div.intro a:active, section.al a:active, div.use01main a:active {color:#33a5cb;} /* クリック中のリンクの色 */



 /* ページ内リンクのfix策 */
 
section.al {
    margin-top:-20px;
    padding-top:20px;
	clear: both;
    }
	
aside.al {
    margin-top:-20px;
    padding-top:20px;
	clear: both;
    }


 /* 改行同士の間隔 */
 
p{margin-top:1em;}


 /* 余談 */
aside div.reference{
	background-color: #f8f8f8;
	margin:5%;
    padding: 3% 5%;
    border: 1px dotted #ccc;
    font-size: 86%;
    line-height: 150%;}


 /* 書いた人 */

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

img.pic-s1{ max-width: 130px; height: auto; float: left; margin: 3%;}

div.txt-s1{ clear: both;}

/* 全体 */
div.hidden_box {
	margin: 3% auto;
    padding: 0;
}

/* ボタン装飾 */
.hidden_box label {
	display:block;
	text-align:center;
    margin: 1% auto;
    padding: 2%;
    font-weight: bold;
    font-size: small;
    line-height: 1.5;
    border: solid 2px black;
    cursor :pointer;
}

/* ボタンホバー時 */
.hidden_box label:hover {
    background: #efefef;
}

/* チェックは見えなくする */
.hidden_box input {
    display: none;
}

/* 中身を非表示にしておく */
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/* クリックで中身表示 */
.hidden_box input:checked ~ .hidden_show {
    padding: 5% 0;
    height: auto;
    opacity: 1;
}





 /* 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;
}

div.menu article h2 {
    font-size: 1.8rem;
    font-weight: normal;
    border: none;
	padding: 2% 0;
	
}


article p{
line-height: 1;}

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

article.use00{ background: url("/common/use/img/use00.jpg") center no-repeat;background-size:cover;}
article.use01{ background: url("/common/use/img/use01.jpg") center no-repeat;background-size:cover;} 
article.use02{ background: url("/common/use/img/use02.jpg") center no-repeat;background-size:cover;}
article.use04{ background: url("/common/use/img/use04.jpg") center no-repeat;background-size:cover;}
article.use05{ background: url("/common/use/img/use05.jpg") center no-repeat;background-size:cover;}  




div.link a{
	display: block;
	position:relative;
	width:260px;
	height: 48px;
	line-height: 44px;
	margin: 3% auto;
	padding: 0 8px;
    border-radius: 2px;
    text-align: center;	
	font-size: 16px;
    text-decoration: none;
    transition: 0.3s ease-out;}

div.white a {color: #fff; border: 1px solid #fff;}
div.white a:visited {color: #fff;}
div.white a:hover {opacity: 0.7; /* カーソルが乗っているリンクを薄く */}

div.black a {color: #333; border: 1px solid #555;}
div.black a:visited {color: #333;}
div.black a:hover {opacity: 0.7; /* カーソルが乗っているリンクを薄く */}


a.back-btn {color: #333; border: 1px solid #555;}
a.back-btn:hover {color: #fff; opacity: 0.7; background-color: #000; /* カーソルが乗っているリンクの色 */}

a.back-btn:before{
  font-family: FontAwesome;
  content: '\f104';
  margin-right:10px;
}


/* favlinks */
.favlinks h3{
    margin-bottom:10px;
    border-bottom:2px solid #ddd;
}
.favlinks li{
    padding:0 0 5px;
    font-size:.9em;
}
.favlinks li:last-child{
    padding:0;
}

.favlinks a:after{
    margin: 0 0 0 5px;
    content:"\f08e";
    font-family: FontAwesome;
}
.favlinks .explanation{
    display: block;
    font-size:.9em;
    color:#555;
}






 /* use01.html周り */

main.use01 { background-color: #f0f0f0;}
	
div.use01main {
  -js-display: flex;
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 1000px;
  padding:0;
  margin:0 auto;}

 
article.box{width:320px; height:400px; background: #fff; border-radius:5px; margin-bottom:15px; overflow:hidden;}
article.box img{max-width: 100%; height: auto;}
.post_text{padding:0 25px 25px 25px;}

.post_text h3{font-size:18px; line-height:30px; margin:0; padding: 5% 0;}
.post_text h3 span{color:#aaa;display:block;float:right;font-size:28px;line-height:30px;height:30px;font-weight:100;margin-top:-5px}
span.usep_num:before{content:"\5BB6\5EAD\7528";font-size:12px;}
span.usew_num:before{content:"\4ED5\4E8B\7528";font-size:12px;}
.post_text p{color: #333;font-size:14px;line-height:1.5em;margin:0}





 /* usepw.html周り */
 
/* usepw.html周り */

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


div.index { background: url("/common/use/img/index.jpg") center no-repeat; background-size:cover;}
div.use00 { background: url("/common/use/img/use00.jpg") 0 no-repeat; background-size:cover;}
div.use01 { background: url("/common/use/img/use01.jpg") left 50px no-repeat; background-size:cover;}
div.use02 { background: url("/common/use/img/use02.jpg") center no-repeat; background-size:cover;}
div.use04 { background: url("/common/use/img/use04.jpg") right no-repeat; background-size:cover;}
div.use05 { background: url("/common/use/img/use05.jpg") center no-repeat; background-size:cover;}

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

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




 /* パンくずリスト */

.breadcrumb {
  margin-left:10%;
  padding: 12px 10px;
  font-size: 0.9em;
}

.breadcrumb li{
  display:inline;/* 横に並ぶように */
  list-style: none;
}

.breadcrumb li:after{/*  >を表示 */
  font-family: FontAwesome;
  content: '\f101';
  padding: 0 1px;
  color: #8186a0;
}

.breadcrumb li:last-child:after{
  content: '';
}

.breadcrumb li a {
    text-decoration: none;
    color: #273376;
}

.breadcrumb li:first-child a:before{/* 家アイコンに */
  font-family: FontAwesome;
  content: '\f015';
  font-size: 1.1em;
}






 /* use01アイコン */

ul.icon {
  margin:0 auto;
  display: table;
  border-collapse: separate;
  border-spacing: 10px 0;
  font-size: 90%;
  padding-bottom: 5%;
  
}

ul.icon li { 
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width:100px;
  height:100px;  
  margin-left:5px;
  color: #222;
  border:1px solid #222;
  font-weight:normal;
  line-height: 1.3em;
  text-decoration:none;} 









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

 /* ページタイトル */

h1.title{
  position: absolute;
  color: white;
  font-size: 3rem;
  text-indent: 1em;
  bottom: 5%;
  text-shadow: 0 0 100px #000;
  margin:0;
  padding:0;
}


h1.black{ color: black; text-shadow: 0 0 100px #fff;}

section h2{ font-weight: bold; margin-top:3%; color: #222; font-size: 2rem; line-height: 1.5; text-align:center; padding:10% 0 5% 0; border-top: 1px solid #000; }

section.al h3 { margin-top:5%; font-size: 1.5rem; font-weight: bold; text-indent: 1rem; line-height: 2em; border-bottom: 2px solid #000; clear:both;}

h4 { margin-top:5%; text-indent: 1em; font-size: 1.3rem; font-weight: bold; border-left: 5px solid #000; clear:both;}




 /* iframe装飾 */
 

iframe.item {height:450px; margin:1%; border: none; float:left; display: block;}
iframe.item :after {clear: both;}


 /* img装飾 */
 
img {max-width : 100% ; height : auto ;}
a img:hover {filter:brightness(80%); -webkit-filter: brightness(80%);}

img.title {margin:10px auto; border:1px solid #ccc; padding:1px;}

img.image-s {float:left; margin:0px 30px 10px 10px;}

img.banner {margin:5px; border:1px solid #ccc; padding:0;}

img.pic {display: block; margin:1% auto; border:none;}
img.pic-s {float:left; margin:2% 2% 2% 0;}

img.ic {max-width: 20% ; height : auto ;}


figure{margin:0 auto; padding:2% 0; border:none; text-align:center; display: block; clear: both;}
figure.center{float:none;}
figcaption{color: #666; font-size: 80%;}




 /* リスト系table装飾 */

table.list {background:#ccc; border-spacing: 1px; width:100%; margin:10px auto; font-size:90%; text-align:center;}
table.list th,.list .th{background:#e7e7e7; width:30%; color:#444; font-weight:normal; padding:10px; text-align:center;line-height: 1.5em; vertical-align: middle; }
table.list td{padding:10px;background:#fff;}
table.list caption {color:#666; font-weight:bold; font-size:120%; text-align:center; margin:5% 0 1% 0;}


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

div.spec-long{ width: 100%; overflow-x: auto; overflow-y:hidden; margin:5% 0;}
div.spec-long::-webkit-scrollbar { height: 15px;}
div.spec-long::-webkit-scrollbar-track { border-radius: 5px; background: #eee;}
div.spec-long::-webkit-scrollbar-thumb { border-radius: 5px; background: #666;}


table.spec { border-spacing: 1px; background:#ccc; margin:0 auto; font-size:70%; text-align: center;}
table.spec th{ background:#ccc; color:#444; font-weight:normal; padding:0; text-align:center; vertical-align: middle; padding:1px; }
table.spec td{ background:#fff; padding:1px;text-align:center; vertical-align: middle;}
table.spec caption { color:#666; font-weight:normal; font-size:100%; text-align:center;}
table.spec img{ max-width: 60px; height: auto;}

table.long thead, table.long tbody { display: block; width:100%;}
table.long tbody { overflow-y: scroll; height: 400px;}
table.long th, td {width: 115px;}




 /* 列挙系ul装飾 */

ul.design_list{
  -js-display: flex;
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
  align-items: center;
  width: 100%;
  margin:3%;}

ul.design_list li{margin: 2px;}  
ul.design_list li img{ max-width: 80px; height: auto;}




 /* リスト系ul装飾 */

ul.list{margin: 3% 5%;}
ul.list li {padding:1% 1% 1% 5%; text-indent: -3em; }

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


 /* リスト系dl装飾 */

dl.list {margin:5% 0; padding:0; clear: both;}

dl.list dt{
	padding-left:1%;
	margin:8% 0 1% 0;
	font-size: 1.2rem;
	font-weight:bold;
	border-left: 10px solid #dcdcdc;
    clear: both;}

dl.list dd{margin:0;}


 /* 表系dl装飾 */

dl.tb{
	-js-display: flex;
	display: flex; /*  Flexible Boxを有効化  */
	flex-wrap: wrap; /*  はみ出そうな時の折り返しを有効化  */
	margin:3% 0; padding:0;
	border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; align-items: stretch;
	font-size:80%;
	line-height:1.5;
clear: both;}

dl.tb dt{ flex-basis: 30%; /*  幅を指定  */ padding:2%; text-align:center; background:#eee; border-top: 1px solid #ccc; margin:0; }
	
dl.tb dd{ flex-basis: 70%; /*  幅を指定  */ padding:2%; border-top: 1px solid #ccc; align-self: center;}

dl.tb dd ul{ display:block; margin-bottom:5%;}
dl.tb p.mini{ margin-top:5%;}

.here:after {
	content: '\4ECA\30B3\30B3!';
	font-size: 70%;
	color: #db7093;
    margin-left: 10px;
	}




 /* デメリット装飾 */

p.merit { clear: both;}
span.tup { background: #fecb81; margin-right:0.8em; padding: 2px 5px; font-size:small; color: white;}
span.tdn { background: #9cd0ef; margin-right:0.8em; padding: 2px 5px; font-size:small; color: white;}

span.tup:before {
	font-family: FontAwesome;
	content: '\f087';
	font-size: 1.3em;
	padding-right:5px;
	}
	
span.tdn:before {
	font-family: FontAwesome;
	content: '\f05a';
	font-size: 1.3em;
	padding-right:5px;
	}




 /* 注意書き装飾 */
.mini {color:#666; font-weight:normal; font-size:80%;}

.tips {background-color: #f2ebe0; font-weight:normal; display:block; padding:20px;}
em {background-color: #ddeaff; font-weight:bold;}
span.b {font-weight:bold; display:block; padding:10px;color:#222;}



 /* 引用装飾 */
blockquote {
    position: relative;
	margin:1%;
    padding: 10px 15px 10px 60px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
    clear: both;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 18px;
    left: 15px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: #cfcfcf;
    font-size: 30px;
    line-height: 1;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.5;
}

cite { margin-bottom:3%; display: block; color: #888888; font-size: 80%;line-height: 1.5; text-align: right; }


	
body{counter-reset:number;}



 /* link装飾 */
 
div.outline a:link {color:#666; font-weight:normal;} /* 未訪問のリンクの色 */
div.outline a:hover {color:#fff; background-color: #33a5cb;} /* カーソルが乗っているリンクの色 */




 /* もくじ装飾 */

div.outline { margin:3% auto; color: #666; width:85%; border: 2px solid #dcdcdc; padding-bottom: 1%;}

div.outline p { text-align:center; font-weight:bold; margin:0 auto; color:#000;}

div.outline p:before {
	font-family: FontAwesome;
	content: '\f002';
	font-size: 1.5rem;
	margin-right:1%;}

div.outline ul.outline1 { margin:2% auto; padding-left:15%; font-size:90%}
div.outline ul.outline1 li  { margin-bottom:3%;}
div.outline ul.outline1 li:first-child  { margin-top:3%;}
div.outline ul.outline1 li li:first-child  { margin-top:1%;}
div.outline ul.outline1 li:last-child  { margin-bottom:1%;}

div.outline ul li a:before {
	font-family: FontAwesome;
	content: '\f0da';
	font-size: 1em;
	padding-right: 1em;
	color: #ccc;}

div.outline ul li ul.outline2 li {margin:0 0 1% 5%;}

div.outline ul li ul li a:before {
	font-family: FontAwesome;
	content: '\f105';
	font-size: 0.8em;
	padding-right: 1em;
	color: #ccc;}

	
body{counter-reset:number;}



 /* もくじのlink装飾 */
 
div.outline a:link {color:#666;} /* 未訪問のリンクの色 */
div.outline a:hover {color:#fff; background-color: #33a5cb;} /* カーソルが乗っているリンクの色 */







p.tl { text-align:center; font-weight:bold; padding:0; margin:0 auto;}

 /* 条件について考える */
 
div.think {margin: 1% auto; padding: 1%; color: #4d4d4d; border-radius: 15px;}
	


div.think p.tl:before {
	font-family: FontAwesome;
	content: '\f0eb\A';
	white-space: pre;
	font-size: 3em;}
	
div.think figure{float:none; margin:1%;}

div.think ol {margin-top:5%; text-align:center; font-size:90%;}
div.think ol li {list-style: none;}

div.think ol li span.pt { margin-right:1em; padding: 0.5em; background: white; color: #69a5bb; font-size:small;}
div.think ol li span.pt2 { margin-right:1em; padding: 0.5em; background: #69a5bb; color: #fff; font-size:small;}
div.think ol li span.pt3 { margin-right:1em; padding: 0.5em; background: white; color: #69a5bb; font-size:small;}
div.think ol li span.pt4 { margin-right:1em; padding: 0.3em; border: 1px solid #69a5bb; color: #69a5bb; font-size:small;}

div.think ol li.fc {margin: 0 auto 30px; padding: 5% 1%; border: 1px solid #69a5bb; border-radius: 5px; background-color:#fff; position: relative; line-height:1.5em;}
div.think ol li.lf {text-align:left;}
div.think ol li.rt {text-align:right;}
div.think ol li.tl {background: #69a5bb; color: white; font-size:110%;}
div.think ol li.tl2 {background: #69a5bb; color: white; font-size:110%;}
div.think ol li.fc ul.list {margin-top: 5%; display:block; }


div.think ol li.fc:after,
div.think ol li.fc2 ul li:after 
{   border-top: 20px solid #c4c4c4;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    content: "";
    position: absolute;
    bottom: -25px; /*  三角形の高さ＋ボックスのボーダーをマイナスに  */
    left: 43%;/*  中央寄せに使用  */}


div.think ol li:last-child:after { border: none; /*  最後のボックスだけ三角形を表示しない  */}

div.think ol li.fc2 ul{
  -js-display: flex;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin: 0 auto 30px;
  position: relative;
  font-size:smaller;}
  

div.think ol li.fc2 ul li{flex-basis: 45%; border-radius: 5px; margin: 1% auto; padding:3% 5%; background-color:#fff; line-height:1.5em; border: 1px solid #ddd; }
div.think ol li.fc2 ul li.unfc{flex-basis: 3%; margin: 0 auto; padding:0; border:none;}

.plus{color:#c4c4c4;}




 /* ポイント */ 
 
div.point { margin:4% auto; padding:0; width:90%; border: 1px solid #000;}
div.point p { padding: 1%;}
div.point p.tl { text-align:center; color: #fff; background-color: #000;}
div.point p.tl:before {
	font-family: FontAwesome;
	content: '\f06a\A';
	font-size: 1.7em;}


 /* ちょっとひとこと */

div.hatena { margin:3% auto; padding:2% 5%; color: #666; width:100%; border: 1px solid #33a5cb;}
div.hatena p.tl { text-align:center; color: #33a5cb;}
div.hatena p.tl:before {
	font-family: FontAwesome;
	content: '\f128\A';
	white-space: pre;
	font-size: 2em;}



 
 /* 取り消し線装飾 */
span.del {
  text-decoration: line-through;
}



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

.chat {
    min-height: 130px;
}



.chat p{
    clear: both;
    position: relative;
    min-height: 100px;
    margin:5% 2% 2% 18%;
	width:70%;
    padding: 5%;
    border: 3px solid #dadada;
    border-radius: 25px;
    background: #fff;
	color: #555;
	font-size:95%;
	line-height:1.5;
}

.chat p:before{
    clear: both;
	content: "";
	position: absolute;
	top: 50%;
	left: -24px;
 	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 12px solid #FFF;
 	z-index: 2;
}

.chat p:after{
    clear: both;
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
 	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid #dadada;
 	z-index: 1;
}




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

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



 /* 関連 */
 
.related{
    border: 1px solid #ccc;
    width: 95%;
    margin: 0 auto;
    padding: 0 5px;
    color: #4d4d4d;
}

.related .title

 {
    font-size: 1.1em;
    font-weight: bold;
    color: #4d4d4d;
	padding: 5px;
	margin-top:30px;
}


 /* use01用 */

item { 
margin:5em 1em 2em 2em;
}



 /* アイコンフォントの装飾 */
 

.tw:before {
	font-family: FontAwesome;
	content: '\f099\A';
	white-space: pre;
	font-size: 3em;
	}
	
.fb:before {
	font-family: FontAwesome;
	content: '\f230\A';
	white-space: pre;
	font-size: 3em;
	}
	
.inst:before {
	font-family: FontAwesome;
	content: '\f16d\A';
	white-space: pre;
	font-size: 3em;
	}
	
.bld:before {
	font-family: FontAwesome;
	content: '\f1ad\A';
	white-space: pre;
	font-size: 3em;
	}
	
.mail:before {
	font-family: FontAwesome;
	content: '\f0e0\A';
	white-space: pre;
	font-size: 3em;
	}


.tap:after {
	font-family: FontAwesome;
	content: '\f196';
    margin-left:10px;
}

.gift:before {
	font-family: FontAwesome;
	content: '\f06b';
	font-size: 1.3em;
    margin-right:10px;
	
	}
	
.pc:before {
	font-family: FontAwesome;
	content: '\f109';
	font-size: 1.3em;
    margin-right:5px;
	}

.leaf:before {
	font-family: FontAwesome;
	content: '\f06c';
	font-size: 1.3em;
    margin-right:5px;
	}
.home:before {
	font-family: FontAwesome;
	content: '\f015';
	font-size: 1.3em;
    margin-right:5px;
	}

.eye:before {
	font-family: FontAwesome;
	content: '\f06e';
	font-size: 1.3em;
    margin-right:5px;
	}
	
.phone:before {
	font-family: FontAwesome;
	content: '\f10b';
	font-size: 1.6em;
    margin-right:10px;
	}

.book:before {
	font-family: FontAwesome;
	content: '\f02d';
	font-size: 1.3em;
    margin-right:10px;
	}
.hand:before {
	font-family: FontAwesome;
	font-size: 1.4em;
	content: '\f256';
    margin-right:10px;
	}

.bag:before {
	font-family: FontAwesome;
    margin-right:10px;
	font-size: 1em;
	content: '\f290';
	}
	
.univ:before {
	font-family: FontAwesome;
	content: '\f19c';
	font-size: 1em;
    margin-right:10px;
	}
.leng:before {
	font-family: FontAwesome;
	content: '\f24e';
	font-size: 1.2em;
    margin-right:10px;
	}	
.print:before {
	font-family: FontAwesome;
	content: '\f02f';
	font-size: 1.2em;
    margin-right:10px;
	}	

.clock:before {
	font-family: FontAwesome;
	content: '\f017';
	font-size: 1.2em;
    margin-right:10px;
	}		
.gear:before {
	font-family: FontAwesome;
	content: '\f013';
	font-size: 1.2em;
    margin-right:10px;
	}	
.hosp:before {
	font-family: FontAwesome;
	content: '\f0f1';
	font-size: 1.2em;
    margin-right:10px;
	}	
.dia:before {
	font-family: FontAwesome;
	content: '\f219';
	font-size: 1.2em;
    margin-right:10px;
	}	
.shirt:before {
	font-family: FontAwesome;
	content: '\f214';
	font-size: 1.2em;
    margin-right:10px;
	}	
.cube:before {
	font-family: FontAwesome;
	content: '\f1b2';
	font-size: 1.2em;
    margin-right:10px;
	}	
.paper:before {
	font-family: FontAwesome;
	content: '\f016';
	font-size: 1.2em;
    margin-right:10px;
	}
.clip:before {
	font-family: FontAwesome;
	content: '\f0c6';
	font-size: 1.2em;
    margin-right:10px;
	}
.loupe:before {
	font-family: FontAwesome;
	content: '\f002';
	font-size: 1.2em;
    margin-right:10px;
	}

 .icon_link:after{
	font-family: FontAwesome;
	content: '\f2d2';
	font-size: 1.2em;
    margin-left:3px;
}

 
/* -------------------------------
  USE COPY
--------------------------------- */
.use_headline{
	margin: 30px 20px 0;
    padding: 8px;
    border-bottom: 3px double #ddd;
    border-top: 3px double #ddd;
	font-size: 1.3em;
	}
.use_copy{padding:20px;font-size:1.1em;}

/* -------------------------------
 Item LINK
 --------------------------------- */
.use_item_list {
	margin-bottom:30px;
	padding: 20px;
	
	display: -webkit-flex;
	display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   justify-content:space-between;
   }

.link_item{
	margin:5px;
	border:1px solid #999;
	width:calc(25% - 10px);
	min-width:235px;
	box-sizing:border-box;
	line-height:1.1em;
	font-size:.9em;
	}
.link_item p,.link_item span,.link_item img{
	width:100%;padding:5px;display:block;
}
.link_item img{
	padding:0;
}
.link_item .item_name{height:6.5em;overflow:hidden;}
.link_item .price{text-align:right;color:#F00;}
.link_item .caption{font-size:.8em;border-top:1px dashed #CCC;}
   
     
   
/*  --------------------------------
　header
  ---------------------------------  */

h2.nav-t{display:none;}

img.logo { padding-left:15px; max-width: 70%; height: auto;}


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

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


.use01nav{
  width: 100%;
  text-align: center;
  background-color: #fff;}
	
.dd-menu{
    display: inline-block;

    position: relative;
	width: 300px;
}
 
.dd-menu > ul{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
	color: black;
    background-color: #fff;
    height: 0;
    border: none;
	overflow: auto;
}
 
.dd-menu:hover > ul{
    height: auto;
}
 
.dd-menu a {
    display: block;
	text-align: left;
	margin:0;
    color: black;
    text-decoration: none;
	padding:3% 3% 3% 23%;
}
.dd-menu a:hover {
    color: #fff;
    background-color: rgba(0,0,0,0.6);
}



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


footer {
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  margin: 0 auto;
}


footer div.f-nav{
	margin:0 auto;
	padding:0 5%;}


ul.f-nav1{ color: #fff; margin:0 auto;  padding: 3% 0; border-bottom:1px solid #666;

  -js-display: flex;/* 横に並ぶように */
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-between;}
 
 
ul.f-nav1 li{ padding:1%;}

ul.f-nav1 li a {color: #aaa; text-decoration: none;}
ul.f-nav1 li a:hover{color: #fff; text-decoration: none;}




ul.footer {
  width: 100%;
  text-align: center;
  padding:10px;}

ul.footer li {
  display: inline-block;
  margin: 20px;
  font-size:14px;
  color: #fff;
  border: none;}

ul.footer li a {color: #fff; text-decoration: none;}


div.back a img {width: 200px; display: block; margin:0 auto;}

footer small {
	display:block;
	text-align: center;
	padding:15px;
	color: #fff;}