@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20151225
*/

/* Simplicity子テーマ用のスタイルを書く */
/************************************
** テーブル（Table）
************************************/
.article table{
  border-collapse: collapse;
  margin: 15px 0;
}
.article th{
  border: solid 1px #ccc;
  background-color: #000;
  color: #fff
}
.article td{
  border: solid 1px #ccc;
}
.article th, .article td{
  padding: 3px 5px;
}

/* ********************************** */
/* リストボックス */
/* ********************************** */
.article ul.checklist{
margin: 0 0 1.5em;
padding: 1em;
padding-bottom: 0;
border: 1px solid #BEBEBE;
background: #FCFCFC;
}

.article ul.checklist li{
margin-bottom: 0.7em;
padding-top: 5px;
padding-left: 14px;
list-style-type: none;
}

.article ul.checklist li:before {
content: "\f058";
font-family: FontAwesome;
padding-right: 0.4em;
}

.article ol,
.article ul,
.article dl{
  line-height:150%;
}

.article > ol,
.article > ul,
.article > dl{
  margin:30px 0;
}

.article > ol ol,
.article > ul ul,
.article > dl dl{
  margin:0;
}


.article ul.l1{
position:relative;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1) inset;

margin: 0 0 1.5em;
padding: 1em;
padding-bottom: 0.5em;
border: 1px solid #BEBEBE;
background: #FCFCFC;
}

.article ul.l1 li{
margin-bottom: 0.7em;
padding-top: 5px;
padding-left: 14px;
list-style-type: none;
}

.article ul.l1 li:before {
content: "\f058";
font-family: FontAwesome;
padding-right: 0.4em;
}

.article ol.o1{
position:relative;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1) inset;

counter-reset:number;
list-style:none;

margin: 0 0 1.5em;
padding: 1em 1em 1em;
padding-bottom: 0.5em;
border: 1px solid #BEBEBE;
background: #FCFCFC;
}

.article ol.o1:before, ol.o1:after, ul.l1:before, ul.l1:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    box-shadow:0 0 20px rgba(0,0,0,0.4);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    border-radius:100px / 10px;
} 

.article ol.o1:after, ul.l1:after
{
    right:10px; 
    left:auto; 
    transform:skew(8deg) rotate(3deg);
}

.article ol.o1 li{
margin-bottom: 0.7em;
padding-top: 5px;
padding-left: 10px;
}
ol.o1 li:before{
counter-increment: number;
content: counter(number);

margin-top: 2px;
margin-right: 0.5em;

float: left;
background: #000000;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
color: #fff;

font-size: 70%;
font-weight: bold;
text-align: center;
line-height: 1.3em;
}

.box ol.o1{
}
.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}

/* ********************************** */
/* 注意　　　　　　　　　　　　　　　　 */
/* ********************************** */
p.attention {
padding: 0.5em;
margin: 0.5em 0.2em;
color: rgb(255, 0, 0);
}

p.attention:before {
content: "\f06a";
font-family: FontAwesome;
margin-right: 0.4em;
}

/* ********************************** */
/* 公式　　　　　　　　　　　　　　　　 */
/* ********************************** */
i.fa {
padding: 0 5px 0 7px;
}
 
span.fa-linkicon {
margin-right:0.8em;color:#2098A8;
}

/* ********************************** */
/* QA　　　　　　　　　　　　　　　　 */
/* ********************************** */
/* --- リストエリア --- */
.article ul.qa {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 80%;
}

/* --- リスト項目の内容 --- */
.article ul.qa dl {
margin: 0;
background: #f9f9f9 url("http://rymandoujou.tokyo/wp/wp-content/uploads/2016/04/qa_back.gif") repeat-x top; /* リスト項目の背景 */
}

/* --- Questionエリア --- */
.article ul.qa dt {
margin: 0;
padding: 8px 6px 6px 35px; /* Questionエリアのパディング（上右下左） */
background: url("http://rymandoujou.tokyo/wp/wp-content/uploads/2016/04/icon_qa.gif") no-repeat 4px 5px; /* Questionエリアの背景 */
border: 1px #c0c0c0 solid; /* Questionエリアの境界線 */
font-weight: bold;
line-height: 120%;
}

/* --- Answerエリア --- */
.article ul.qa dd {
margin: 0;
padding: 11px 6px 25px 35px; /* Answerエリアのパディング（上右下左） */
background: #ffffff url("http://rymandoujou.tokyo/wp/wp-content/uploads/2016/04/icon_asw.gif") no-repeat 4px 8px; /* Answerエリアの背景 */
line-height: 150%;
}

/* --- サイドバーを左側表示（子テーマで実現） --- */
#main {
  float: right;
}

@media screen and (max-width: 30em) {
  #main {
    float: none;
  }
}