/*Theme Name: Crayon FAQ
Theme URI: https://crayon.e-shops.jp/
Author: kowa*/
@charset "UTF-8";

/* **** **** **** **** ▼faqのテーマ **** **** **** **** */

.t-faq {
    margin:0 auto; padding:0;
    width:100%;
    font-size:16px; color:#111; text-align:center;
    font-family:Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    background-color:#f5f1e7;
}
.linkStyle a{color: #0F61B8;}
.linkStyle a:hover{text-decoration: underline;}
/* **** **** **** **** ▼レイアウト **** **** **** **** */

/**** **** **** ページ全体 **** **** ****/
.l-faqPageWrap{
    margin:0 auto;
    position:relative;
    background-color:#fafaf3;
    overflow: hidden;
}/* 904px以上で横幅を固定し、左右に余白を付ける */
@media screen and (min-width: 922px){
    .l-faqPageWrap{
        margin:0 auto; padding: 0;
        width:900px;
        border-style:dashed; border-width:0 2px 0 2px; border-color:#d5c2aa;
}}
/* 1300px以上でページ全体の横幅を伸ばす */
@media screen and (min-width: 1322px){
    .l-faqPageWrap{
        margin:0 auto;padding: 0;
        width:1000px;
        border-style:dashed;
        border-width:0 2px 0 2px;
        border-color:#d5c2aa;
}}
/**** **** **** 2カラム（1カラムに変形する） **** **** ****/
/* 2カラムの大枠 */
.l-faq2colBox{
    margin:0; padding: 0 3% 0 4%;
    font-size: 1rem; line-height: 1.6rem; color: #221;
    overflow: hidden;
    clear:both;
    letter-spacing: -.40rem;
}
.l-faq2colBoxTop{margin:0; padding: 0 4% 0 4%;}

/* 左側 */
.l-faq2colLeft{
    display: inline-block;
    /*width:65%;*/
    width:69%;
    margin:0 0 20px 0;
    letter-spacing: normal;
}
/* TOPページのみ変化 */
.l-faq2colLeftTop{width:65%;}


/* 右側 */
.l-faq2colRight{
    float:right;
    /*width:32%;*/
    width:28%;
    text-align:center;
    vertical-align: top;
    letter-spacing: normal;
    color: #745D47;
}
/* TOPページのみ変化 */
.l-faq2colRightTop{width:32%;}

/* 700px以下で1カラムに変形 */
@media screen and (max-width: 700px){
    .l-faq2colBox{padding: 0 2% 0 2%;}
    .l-faq2colLeft{width:100%;}
    .l-faq2colLeftTop{width:100%;}
    .l-faq2colRight{width:100%;text-align: center;}
    .l-faq2colRightTop{width:100%;}
}


/**** **** **** **** ▼モジュール **** **** **** ****/

/**** **** **** ヘッダー **** **** ****/
/* ロゴの下の文字 */
.subTitle{
    width:300px;
    overflow:visible;
    margin: 0; padding: 0;
    font-size: 1rem; font-weight:bold; color: #745D47;
    position: absolute; top: 50px; left: 4px;
    text-align: left;
}
/* 540px以下でロゴの下にある文字がヘッダーの下に移動する */
@media screen and (max-width: 540px){
    .subTitle{
        width:100%;
        margin:0 0 10px 0; padding:4px 0;
        font-size:0.9rem;
        background-color: #A8907C; color:#f5f1e7;
        border-top:dashed 2px #D7C4Ae;
        border-bottom:dashed 2px #fafaf3;
        position:static;
        text-align:center;
}}
/* 逆に904px以上で文字を大きくする */
@media screen and (min-width: 904px){
    .subTitle{width:600px;font-size:1.1rem;}
}
/**** **** **** パンくずリスト **** **** ****/
/* 2代目パンくずリスト */
.pankz2{
    margin:0; padding: 10px 1% 20px;
    list-style:none;
    font-size:0.7rem;
    letter-spacing: -.40rem; /* 文字間を詰めて隙間を削除 */
    color:#bba;
    line-height:1rem;
}
.pankz2 > li{
    display: inline-block;
    margin:0;padding:0 3px;
    letter-spacing: normal;
}
.pankz2 > li > a{
    margin:0;padding:0;
    text-decoration: none;
}
.pankz2 > li > a:hover{
    text-decoration: underline;
}
/**** **** **** トップページ **** **** ****/
/**** **** 検索BOX **** ****/
/* 大枠 */
.faqSearchBox{
    border-radius: 10px;
    border: solid 2px #E1BDF6;
    box-sizing:border-box;
    text-align:left;
    background-color: #ECD3FA;
    overflow: hidden;
}
/* 検索BOXのタイトル */
.faqSearchTitle{
    margin: 15px 4%; padding: 0;
    font-size: 1.4rem;
}
/* 検索BOXのフォーム（枠） */
.faqSearch{
    display: block;
    margin: 0 4% 15px 4%; padding: 0;
    text-align: left;
    letter-spacing: -.40rem;/* 文字間を詰める */
    vertical-align: middle;
}
/* 検索BOX */
.faqSearch input {
    display: inline-block;
    margin: 0; padding: 0 5px;
    vertical-align: middle;
    box-sizing: border-box;
    height: 40px;
    border: 3px solid #ad85df;
    background-color: #fff;
    letter-spacing: normal;
    width: 80%;
    border-radius: 4px;
}
/* 検索ボタン */
#faqSearchSubmit {
    display: inline-block;
    margin: 0 0 0 1%; padding: 0;
    background: url("images/glass01.png") no-repeat center center;
    background-color: #ad85df;
    width: 18%; height: 40px;
    border: none;
    border-radius: 4px;
}
#faqSearchSubmit:hover { cursor: pointer; }
@media screen and (max-width: 400px){
    .faqSearch{text-align: right;}
    .faqSearch input {width:100%;border-radius: 3px;}
    #faqSearchSubmit {margin:-3px 0 0 0;border-radius: 3px;width:60px;}
}

/**** **** カテゴリー **** ****/
.cateListBox{
    border-radius: 10px;
    border: solid 3px #DAF0C6;
    text-align:left;
    background-color:#fff;
}
.cateListTitle{
    margin: 0 0 5px 0;
    padding: 5px 8px 10px;
    font-size: 1rem;
    background-color: #DAF0C6;
    color:#221;
}
.cateListUl{
    margin:0;
    padding:0;
}
.cateListUl > li{
    margin: 0 10px;
    padding:10px 0;
    list-style: none;
    font-weight: bold;
}
.cateListUl > li > a{
    margin:0 0 10px 0;
}
.cateListUl > li > ul{
    margin:0;
    padding:0;
    letter-spacing: -.40rem;/* 文字間を詰める */
}
.cateListUl > li > ul > li{
    display: inline-block;
    padding: 0 6px 0 0;
    margin: 0 5px 10px 0;
    list-style: none;
    font-weight: normal;
    font-size:0.9rem; 
    border-right: 1px solid #959595;
    letter-spacing: normal;
    line-height: 1;
}
.cateListUl > li > ul > li:last-child {
    border: none;
    margin: 5px 0;
}
.cateListUl a{
    text-decoration: none;
    display: inline-block;
}

/**** **** 広告 **** ****/
.faqAd{margin:0 3px 20px 3px;}
@media screen and (max-width: 700px){
    .faqAd{ display: none;
}}
/**** **** 過去の質問 **** ****/
.questionListBox{
    border-radius: 10px;
    border: solid 3px #F2D8E1;
    text-align:left;
    background-color:#fff;
}
.questionListTitle{
    display: inline-block;
    margin: 10px 0 5px -10px;
    padding: 5px 10px;
    font-size: 1rem;
    background-color: #FFC6EB;
    box-shadow: 1px 1px 2px rgba(164, 117, 147, 0.6);
}
.questionListUl{
    margin:0;
    padding:0;
}
.questionListLi{
    word-break: break-all;
    word-wrap: break-word;
    margin: 0 10px;
    padding:0;
    list-style: none;
}
.questionListLi a{
    display: block;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    text-decoration:none;
}
.questionListLi a:hover{
    text-decoration: none;
    background-color: #fafafa;
}
.questionListMore{
    text-align: right;
    font-size: 0.8rem;
    margin:0;
    padding:10px 10px;
}
.questionListMore a{
    text-decoration:none;
}
/**** **** よくある質問 **** ****/
.rankListBox{
    border-radius: 10px;
    border: solid 3px #F0DAA5;
    text-align:left;
    background-color:#fff;
}
.rankListTitle{
    display: inline-block;
    margin: 10px 0 5px -10px;
    padding: 5px 10px;
    font-size: 1rem;
    background-color: #FFDA45;
    box-shadow: 1px 1px 2px rgba(133, 113, 35, 0.6);
}
.rankListBox .questionListLi:last-child a{border:none;}

/**** **** 同じカテゴリーの質問 **** ****/
.sameListBox{
    border-radius: 10px;
    border: solid 3px #efe1d0;
    text-align:left;
    background-color:#fff;
}
.sameListTitle{
    display: inline-block;
    margin: 10px 0 5px -10px;
    padding: 5px 10px;
    font-size: 1rem;
    background-color: #efe1d0;
    box-shadow: 1px 1px 2px rgba(142, 109, 70, 0.6);
}
.sameListBox .questionListLi:last-child a{border:none;}

/**** **** タグ **** ****/
.taguListBox{
    border-radius: 10px;
    border: solid 3px #cbdff8;
    text-align:left;
    background-color:#fff;
    padding:0;
}
.taguListTitle{
    margin: 0 0 5px 0;
    padding: 5px 8px 10px;
    font-size: 1rem;
    background-color: #cbdff8;
    color:#221;
}
.taguCloud{margin:0 8px 5px 8px;}
.taguCloud a{display:inline-block;text-decoration:none;margin:0 3px 5px 0;}
.taguCloud a:hover{text-decoration:underline;}



/**** **** **** シングルページ用の検索 **** **** ****/
.faqSearchBoxMini{
    border-radius: 10px;
    box-sizing:border-box;
    text-align:left;
    overflow: hidden;
}
.faqSearchTitleMini{
    margin: 10px 0 3px 0;
    padding: 0;
    font-size: 1rem;
    color:#777;
}
.faqSearchMini{
    display: block;
    margin: 0 0 15px 0;
    padding: 0;
    text-align: right;
    letter-spacing: -.40rem;/* 文字間を詰める */
    vertical-align: middle;
}
.faqSearchMini input {
    display: inline-block;
    margin: 0;
    padding: 0 5px;
    vertical-align: middle;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #9e9e9e;
    background-color: #f6f5f5;
    letter-spacing: normal;
    width: 100%;
    border-radius: 1px;
}
#faqSearchSubmitMini {
    display: inline-block;
    margin: -1px 0 0 0;
    padding: 0;
    background: url("images/glass01.png") no-repeat center center;
    background-color: #9e9e9e;
    width: 60px;
    height: 31px;
    border: none;
    border-radius: 1px;
}
#faqSearchSubmitMini:hover { cursor: pointer; }


/**** **** **** 検索ページ **** **** ****/
.faqSearchTitleAfter{
    margin: 10px 4%;
    padding: 0;
    font-size: 1rem;
}










/* **** **** **** シングルページ **** **** **** */
/* 問合せの件名 */
.faqPageTitle{
    margin:10px 0 10px 0;
    padding:0;
    font-size:1.3rem;
    line-height:1.8rem;
}
/* カテゴリーの表示 */
.faqCategory{
    margin:0 0 20px 0;
    padding:0;
    font-size:0.85rem;
    padding-left: 21px;
    background: url(images/folder4.gif) no-repeat left center;
    background-size: 16px 13px;
    color:#bba;
}
.faqCategory > ul{
    display:inline-block;
    margin:0 ;
    padding:0;
}
.faqCategory > ul > li{
    display:inline-block;
    margin:0 ;
    padding:6px;
    list-style:none;
}
.faqCategory a,.faqTags a{text-decoration: none;}
/* タグの表示 */
.faqTags{
    display:table;
    margin:0 0 20px 0;
    padding:0;
    font-size:0.85rem;
}
.single-tagsTitle{
    display:table-cell;
    padding: 5px 0;
    width:70px;
    text-align:center;
    background-color: #EEEDE4;
    vertical-align: middle;
}
.single-tagsDate{display: table-cell;vertical-align: middle;}
.single-tagsDate > div{display: inline-block;margin:2px 5px 2px 10px;}

/**** **** 質問 **** ****/
.questionBox{
    border-radius: 10px;
    border: solid 3px #Fce2D8;
    text-align:left;
    background-color:#fff;
    margin:0 0 20px 0;
}
.questionTitle{
    display: inline-block;
    min-width:100px;
    margin: 10px 0 5px -10px;
    padding: 5px 10px;
    font-size: 1rem;
    background-color: #FFD4C8;
    box-shadow: 1px 1px 2px rgba(173, 137, 127, 0.6);
}
/**** **** 回答 **** ****/
.anserBox{
    border-radius: 10px;
    border: solid 3px #D4F0Fa;
    text-align:left;
    background-color:#fff;
    margin:0 0 40px 0;
}
.anserTitle{
    display: inline-block;
    min-width:100px;
    margin: 10px 0 5px -10px;
    padding: 5px 10px;
    font-size: 1rem;
    background-color: #C9EAF7;
    box-shadow: 1px 1px 2px rgba(140, 157, 164, 0.6);
}
.questionBox2{
    border-radius: 4px;
    /*border: solid 3px #Fce2D8;*/
    text-align:left;
    background-color:#fff;
    margin:0 0 20px 0;
    padding:0;
    -webkit-box-shadow: 1px 1px 4px #CAC9BA;
    -moz-box-shadow: 1px 1px 4px #CAC9BA;
    box-shadow: 1px 1px 4px #CAC9BA;
}
.anserBox2{
    border-radius: 4px;
    /*border: solid 3px #Fce2D8;*/
    text-align:left;
    background-color:#fff;
    margin:0 0 40px 0;
    padding:0;
    -webkit-box-shadow: 1px 1px 4px #CAC9BA;
    -moz-box-shadow: 1px 1px 4px #CAC9BA;
    box-shadow: 1px 1px 4px #CAC9BA;
}

/* メッセージの塊 */
.senderBox{
    margin:0 0 20px;
    text-align:left;
}

/* 質問なのか回答なのかの表示 */
.senderName{
    margin:0 0 4px 0;
}
/* 本文 */
.senderText{
    margin:0 0 2px 0;
    padding:8px 2% 20px;
    border-radius: 6px;
    text-align:left;
    line-height:1.7rem;
    color:#111;
}
/* 文字色 */
.c-toiawaseRed{color: #DA5019;}
.c-toiawaseBlue{color:#00729F;}
/* 背景色 */
.bg-toiawaseRed{border: solid 2px #Fce2D8;background-color: #fff;}
.bg-toiawaseBlue{border:solid 2px #D4F0Fa;background-color: #fff;}




/**** **** **** シングルページのカテゴリー **** **** ****/
.single-cateListBox{
    text-align:left;
}
.single-cateListTitle{
    margin: 10px 0 3px 0;
    padding: 0;
    font-size: 1rem;
    color:#777;
    border-bottom:solid 1px #aaa;
}
.single-cateListUl{
    margin:0;
    padding:0;
}
.single-cateListUl > li{
    margin: 0;
    padding:10px 0;
    list-style: none;
    font-weight: bold;
}
.single-cateListUl > li > a{
    margin:0 0 10px 0;
}
.single-cateListUl > li > ul{
    margin:0;
    padding:0;
    letter-spacing: -.40rem;/* 文字間を詰める */
}
.single-cateListUl > li > ul > li{
    display: inline-block;
    padding: 0 6px 0 0;
    margin: 0 5px 10px 0;
    list-style: none;
    font-weight: normal;
    font-size:0.9rem;
    border-right: 1px solid #959595;
    letter-spacing: normal;
    line-height: 1;
}
.single-cateListUl > li > ul > li:last-child {
    border: none;
    margin: 5px 0;
}

.single-cateListUl a{
    text-decoration: none;
    display: inline-block;
}

/**** **** タグ（シングルページ） **** ****/
.single-taguListBox{
    text-align:left;
    padding:0;
    margin:0 0 20px 0;
}
.single-taguListTitle{
    margin: 10px 0 10px 0;
    padding: 0;
    font-size: 1rem;
    color:#777;
    border-bottom:solid 1px #aaa;
}
.single-taguCloud{margin:0;}
.single-taguCloud a{display:inline-block;text-decoration:none;margin:0 3px 5px 0;}
.single-taguCloud a:hover{text-decoration:underline;}



/**** **** シングルページ広告 **** ****/
.single-faqAd{
    margin:0;
}
@media screen and (max-width: 700px){
    .single-faqAd{ display: none;
}}



/* 質問一覧ページ */
.allFaqHead{
    margin: 10px 0 10px 0;
    padding: 0;
    font-size: 0.9rem;
    color: #676363;
/*    border-bottom: solid 1px #F5C1E4;
    background-color: #FFF3F3;*/
}
.allFaqTitle{
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    padding: 0 0 0 0;
    font-weight:normal;
}
.allFaqTitle a{
    text-decoration:none;
}
.allFaqExcerpt{
    margin: 0 0 5px 0;
    padding: 0 0 0 0;
    font-size:0.9rem;
    line-height:1.5rem;
}
.allFaqCategory{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-size:0.7rem;
    color:#aaa;
}
.allFaqCategory a{text-decoration:none;color:#928C7D;}
.allFaqBox{
    border-radius: 4px;
    padding: 10px 2%;
    margin-bottom: 15px;
    background-color: white;
    /*border: solid 1px #DAD9CA;*/
    -webkit-box-shadow: 1px 1px 4px #CAC9BA;
    -moz-box-shadow: 1px 1px 4px #CAC9BA;
    box-shadow: 1px 1px 4px #CAC9BA;
}

.allFaqPager{
    margin:0;padding:15px 0;
    letter-spacing: -.40rem;
    text-align: center;
}
.allFaqPager > .page-numbers{
    text-align: center;
    min-width: 20px;
    letter-spacing: normal;
    text-decoration: none;
    margin: 0 10px 10px 0;
    padding: 3px 5px;
    color: #232323;
    border: solid 1px #808080;
    background-color: white;
    display: inline-block;
}
.allFaqPager > .page-numbers:hover,
.allFaqPager > .page-numbers:active,
.allFaqPager > .page-numbers:focus{
    background-color: #E2E2D8;
    color: #80806D;
}
.allFaqPager > .current{
    background-color: #B6AAA1;
    color:#fff;
}
.allFaqPager > .current:hover{
    background-color: #B6AAA1;
    color:#fff;
}
.allFaqPager > .prev{}
.allFaqPager > .next{margin:0;}
.allFaqPager > .dots{
    min-width: 10px;
    padding: 0;
    border: none;
    background-color: transparent;
}