@charset "utf-8";
/* CSS Document */


/*--------------------------------------------------------------------------
   reset
---------------------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
small,
dl,
dt,
dd,
ol,
ul,
li {
  margin: 0;
  font-size: 100%;
}

ul {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

img {
  vertical-align: top;
}

li {
  list-style-type: none;
  vertical-align: baseline;
}

input, button, textarea, select {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/*--------------------------------------
　Base
---------------------------------------*/

body {
    color: #444444;
    font-family: "メイリオ","MS PGothic",sans-serif;
    font-size: 13px;
    line-height: 1.8em;
}

img { 
  max-width: 100%; 
  height:auto;
}

a {
  color: #666666;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.strong {
  font-weight: bold;
}

.f110 {
  font-size: 110%;
}

.f120 {
  font-size: 120%;
}

.f130 {
  font-size: 130%;
}

.f150 {
  font-size: 150%;
}

.f200 {
  font-size: 200%;
}

.f300 {
  font-size: 300%;
}

/*--------------------------------------
　Header
---------------------------------------*/

header {
}

header .mainArea {
  margin: 0 0 15px;
}  

header .inner {
  width: 1100px;
  margin: 0 auto;
  padding: 35px 0 0;
}

header .boxInner {
  float: right;
}

header .logo {
  float: left;
  width: 250px;
  font-size: 18px;
  font-weight: bold;
}

header .logo a {
  text-decoration: none;
}

/*--------------------------------------
　Global Nav
---------------------------------------*/

header nav {
}

header nav ul {
  margin: 0;
  padding: 0;
}

header nav li {
  float: left;
  margin: 0 40px 0 0;
  padding: 0;
  font-size: 14px;
}

/*--------------------------------------
　Pankuzu
---------------------------------------*/

#pankuzu {
  font-size: 13px;
  margin: 0 auto;
  padding: 30px 6px 0;
  width: 1100px;
}

/*--------------------------------------
　Main Contents
---------------------------------------*/

#contents {
  width: 1100px;
  margin: 50px auto 0;
  padding: 0;
}

#index,
#category,
#page {
  float: left;
  width: 810px;
  margin: 0;
  padding: 0;
  /*background-color: #F9F9F9;*/
}

#side {
  float: right;
  width: 210px;
}

/*--------------------------------------
　Side
---------------------------------------*/

#side .sideBox {
  margin: 0 0 25px;
}

#side .sideBox .sttl {
  font-size: 15px;
  font-weight: bold;
  line-height: 1em;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #F9F9F9;
}

#side .sideBox .sttl a {
  display: block;
  padding: 20px;
}

#side .sideBox ul {
  margin: 15px 15px 0;
  padding: 0;
}

#side .sideBox li a {
  display: block;
  margin: 0 0 10px;
  padding: 0 5px 10px;
  border-bottom: 1px dotted #D5D5D5;
}

/*--------------------------------------
　Footer
---------------------------------------*/

footer {
  margin: 0;
  padding: 0;
  background-color: #E5E5E5;
}

footer .inner {
  position: relative;
  width: 1100px;
  margin: 0 auto;
}

footer p.copy {
  padding: 20px 0;
  font-size: 12px;
  text-align: center;
    color: #474746;
}

footer p.copy a {
  color: #474746;
    text-decoration: none;
}

/*--------------------------------------
　PageTop
---------------------------------------*/
.pagetop {
    font-size: 11px;
    position: fixed;
    right: 3%;
    bottom: 10%;
    width: 5%;
    z-index: 3; 
}

.pagetop a {
  padding: 15px 0;
  display: block;
}
a.pagetop img {
    max-width: 100%;
}

/* ================== */
/*  メインコンテンツ　*/
/* ================== */

#index a, #category a, #page a {
    color: #03C;
    text-decoration: underline;
}
#index a:hover, #category a:hover, #page a:hover {
    color: #09F;
    text-decoration: underline;
}
#index h2, #category h1, #page h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.4;
    padding: 15px 10px 10px;
    margin: 0 0px 20px;
    background: url(img/h2-img.png) no-repeat bottom;
    background-size: cover;
    border: none;
}
#index h3, #category h2, #page h2 {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.4;
    padding: 15px 0px 10px;
    margin: 30px 0px 20px;
    border-bottom: 5px solid #B5D873;
    line-height: 1;
}
#index h4, #category h3, #page h3 {
    font-size: 27px;
    font-weight: bold;
    line-height: 1.5;
    margin: 30px 0px 10px;
    padding: 5px 0px 10px 15px;
    border-left: 5px solid #E95519;
}
#index h5, #category h4, #page h4 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.6;
    padding-bottom: 0;
    margin: 30px 0 10px;
    padding: 8px 10px 0px 10px;
    border-bottom: 2px dashed #B4B4B5;
}
#index h6, #category h5, #page h5 {
    font-size: 16px;
    margin: 30px 0 10px;
    /*border-bottom: 2px solid #666;*/
    padding: 8px 10px;
    line-height: 1.6;
}
#category h6, #page h6 {
    font-size: 15px;
    font-weight: normal;
    margin: 30px 0 10px;
    border-left: 5px solid #666;
    border-bottom: 1px dotted #666;
    padding: 8px 10px;
    line-height: 1.6;
}

#index p, #category p, #page p {
    margin: 0px 0px 15px 0px;
}
#index ul, #category ul, #page ul {
    margin: 0px 0px 15px 40px;
    list-style: decimal outside none;
}
#index ul li, #category ul li, #page ul li {
    list-style: disc;
}
#index ol li, #icategory ol li, #page ol li {
    list-style: decimal;
}
/* ================== */
/*  テーブル　　　　　*/
/* ================== */
table {
    border:1px solid #ccc;
    border-collapse:collapse;
    border-spacing:0;
    empty-cells:show;
    font-size: 14px;
    margin: 20px 0px;
}
th {
    background-color:#f5f5f5;
    border:1px solid #ccc;
    text-align:center;
    padding: 10px;
}
td {
    border:1px solid #ccc;
    padding: 10px;
    /*background: #fff;*/
}
/*----------------------------------------------------
    サイトマップ　css
----------------------------------------------------*/
div#page h2 a {
    text-decoration: none;
    color: #000;    
}

/*----------------------------------------------------
    PCサイトcss
----------------------------------------------------*/

@media screen and (min-width: 600px) {
/*/////////////PC用のCSSをここに作成してください。/////////////*/
/*/////////////必ず中括弧の中に作成してください。/////////////*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
body {
    background: url(img/body_back.png) no-repeat center;
    background-size: cover;
}   
img {
    max-width: 100%;
}   
p,li {
    font-size: 15px;
    line-height: 1.7;
}   
#in_box,#in_block {
    max-width: 1000px;
    margin: 0 auto;
}
h1,h2,h3,h4,h5 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    transform: rotate(.03deg);  
}   

#contents {
    max-width: 1000px;
    width: 100% !important;
    padding: 0 5px; 
}   
.inner {
    max-width: 1000px;
    width: 100% !important;
    margin: 0 auto;
}
    
#index, #category, #page {
    width: 71.5%;
    margin: 0;
    padding: 25px 0 !important;
}   
.sp {
    display: none;
}   
/*------------------
ヘッダー    
---------------------*/ 
header {
    padding-bottom: 0;
}   
.globalMenuSp,.navToggle{
    display: none;
}

nav.globalMenuPc li {
    border-right: 2px solid #C7B9AF;
    }   
nav.globalMenuPc li:last-child {
    border-right: none;
}
nav.globalMenuPc li a {
    text-decoration: none;
    padding: 7% 0 9%;
    font-size: 19px;
    display: block;
    font-size: 20px;
}
    
nav.globalMenuPc li a:hover {
    background: url(img/menu-img.png) no-repeat center;
    background-size: contain;
    color: #fff;
    position: relative;
    z-index: 2;
}       
header {
    background: url(img/head_img.png) no-repeat top;
    background-size: cover;
    padding: 10px 0 0;
    }   
header .logo a {
    /*background: url(img/logo.png) no-repeat left;*/
    background-size: 17%;
    padding: 31px 0 30px 59px;
    
}
header .logo {
    width: 100%;
    margin: 55px auto 0;
    float: none;
    text-align: center; 
}
.mainArea.cf {
    clear: both;
}   
h1.sitename {
    float: right;
}
header .mainArea {
    margin: 0 0 60px;
}
nav.globalMenuPc ul {
    display: flex;
    justify-content: center;
}   
nav.globalMenuPc li {
    float: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    text-align: center;
    width: 33.3%;
}   
div#main_img {
    background: url(img/main-v.jpg) no-repeat center;
    background-size: cover;
    padding: 10% 0 22%;
    position: relative;
    margin-top: -16px;
}
.main_text {
    width: 68%;
}
div#main_img p.title {
    font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 15px;
    font-weight: bold;
}
div#main_img p.title span {
    border-bottom: 3px solid #fff;  
}   
div#main_img p {
    font-size: 18px;
    line-height: 1.7;
}
div#main_img p+p {
    background: rgba(255,255,255,0.8);
    padding: 10px;
}   
/*--------------------------------
    サイドカラム
-------------------------------*/
#side {
    width: 22%;
}
#side .side_ban {
    background: url(img/side_ban.png) no-repeat center;
    background-size: cover;
    padding: 10px;
    position: relative;
}
#side .side_in {
    background: #FBF1E4;
    padding: 10px 0 15px;
}
#side .side_in span.side_title {
    font-size: 17px;
    display: inline-block;
    padding: 5px 5px 5px 35px;
    color: #C46718;
    font-weight: 700;
}
#side .side_in p {
    padding: 10px 5px 0;
    font-size: 15px;
}       
#side .side_in p.side_link {
    text-align: center;
}   
#side .side_in p.side_link a {
    display: inline-block;
    border-radius: 28px;
    background: #E64D1A;
    color: #fff;
    padding: 7px 25px;
}
#side .side_parts {
    position: absolute;
    width: 30%;
    left: 0px;
    top: 0px;
}   
#side .sideBox .sttl {
    width: 100%;
    padding: 25px 20px;
    border-bottom: 1px dotted gray;
    background: #F7F7F7 url(img/side_icon.gif) no-repeat left 10px center;
    background-size: 15%;
    text-align: left;
}
#side .sideBox .sttl a {
    padding: 0;
    font-size: 17px;    
}
#side .sideBox ul {
    margin: 0;
    padding: 0;
    width: 100%;
}
#side .sideBox .side_ban img {
max-width: 100%;
}
#side .sideBox {
    margin: 0 0 25px;
    width: 100%;
    margin-top: 50px;   
}   
#side .sideBox .sideBox {
    margin-bottom: 0;
    margin-top: 50px;
    }
#side .sideBox .sideBox .sttl {
    border-bottom: 1px dotted gray;
    background: #FDF4F7 url(img/side_icon2.gif) no-repeat left 10px center;
    background-size: 15%;   
}   
#side .sideBox li {
    background-color: #F7F7F7;
}
#side .sideBox li a {
    display: block;
    margin: 0;
    padding: 10px 5px;
    border-bottom: 1px dotted gray;
    background: url(img/side_arrow.gif) no-repeat right 15px center;
    background-size: 4%;
    font-size: 15px;
}
#side .sideBox li:last-child a {
    border: none;
}   
#side .sideBox .sideBox li {
    background-color: #FDF4F7;
}
#side .sideBox .sideBox .sideBox .sttl {
    border-bottom: 1px dotted gray;
    background: #FFEFE3 url(img/side_icon3.gif) no-repeat left 10px center;
    background-size: 15%;   
}   
#side .sideBox .sideBox .sideBox li {
    background-color: #FFEFE3;
}
#side a {
    text-decoration: none;
    }
#side a:hover {
    opacity: 0.7;
    }
/*----------------------------------------------------
    フッター
----------------------------------------------------*/
footer {
    margin: 0;
    padding: 40px 0 0;
    background: url(img/footer_img.png) no-repeat center;
    background-size: cover;
}
footer .copylight {
    background: url(img/copy_img.png) no-repeat center;
    background-size: cover;
}
footer .inner p {
  max-width: 1000px;
    width: 100%;
  margin: 0 auto;
}   
.parts {
    background: url(img/body_b.png) no-repeat bottom;
    background-size: cover;
    padding: 6% 0;
}
.f_nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.f_item {
    width: 30%;
    text-align: left;
    padding-left: 50px;
}
.f_item p.f_title {
    width: 100%;
    font-size: 17px;
    margin-bottom: 20px;    
}
.fttl {
    border-bottom: 1px solid #666666;
    display: inline-block;
    margin-bottom: 19px;
}   
.fttl a {
    text-decoration: none;
    font-size: 17px;
    font-weight: bold;
}
.fttl a:hover {
    opacity: 0.7;
}
.foot_item ul {
    padding-left: 18px;
}   
.foot_item ul li {
    list-style: disc;
    padding-bottom: 14px;
}
.foot_item ul li a {
    text-decoration: none;
    font-size: 15px;
}
.foot_item ul li a:hover {
    opacity: 0.7;
}   
.f_item ul {
    padding-left: 20px;
}
.free_bottom {
    padding: 60px 0 45px;
    margin: 0 auto;
    max-width: 820px;
    width: 100%;
}
.free_bottom p {
    text-align: center;
    width: 100% !important;
    padding-bottom: 15px;
}
aside.footbox {
    margin: 0 auto;
    max-width: 820px;
    width: 100%;
}
.foot_item {
    float: left;
    padding: 0;
    width: 30%;
    margin: 0 0 0 27px;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}   
/*----------------------------------------------------
    パンくず
----------------------------------------------------*/  
#pankuzu {
  max-width: 1000px;
    width: 100%;
}   
/*----------------------------------
    コンテンツcss
------------------------------------*/
.cont_a {
    margin-bottom: 60px;
    }
/*----------------------------------------------------
   　リスト css
----------------------------------------------------*/  
#index ul,#index ol,#category ul,#category ol,#page ul,#page ol {
    margin: 0;
    padding: 0;
}   
#index ul > li,
#category ul > li,
#page ul > li {
    list-style: none !important;
    line-height: 1.7;
    position: relative;
    padding-left: 35px; 
}
#index ul > li:before,
#category ul > li:before,
#page ul > li:before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: #E95519;
    position: absolute;
    left: 0;
    top: 5px;
}
#index ol,#category ol,#page ol{
counter-reset:number; /* 名前を付けたカウンターをリセット */
list-style:none; /* olが数字を付けることをキャンセル */
margin:0;
padding:0;
}
#index ol, #category ol, #page ol {
    counter-reset: li;
}   

#index ol > li,
#category ol > li,
#page ol > li {
    list-style: none;
    position: relative;/*リストの項目の位置を基準に*/
    padding-left: 2.3em; /*li:before分左に余白を。調整可*/
    margin-bottom: 15px;/*リストの数字がくっついてしまう場合*/
}   

#index ol > li:before,
#category ol > li:before,
#page ol > li:before {
    counter-increment: li;
    content: counter(li);
    margin-right: 1em;
    background: #E59A88; /*薄いピンク*/
    color: #ffffff; /*白*/
    border-radius: 50%; /*丸く*/
    text-align: center; /*端に寄ってる数字を真ん中に*/
    width: 1.5em; /*幅を決めるheightと同じ数値に*/
    height: 1.4em; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
    position: absolute; /*リストの基準から移動させる*/
    left: 0em; /*項目の基準、左にあわせる*/
    top: 0px; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
    line-height: 1.35;/*数字の位置あわせで数値を指定*/
    font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    font-size: 1.15em;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    _::-webkit-full-page-media, _:future, :root #in_box .list-style ol > li:before {
        line-height: 1.6;
    }
}   
#index .flex_box {
    display: flex;
    justify-content: space-between;
}
#index .flex_box {
    width: 48%;
}   
#index ol > li,
#category ol > li,
#page ol > li {
    list-style: none;
    position: relative;
    padding-left: 2.3em;
    margin-bottom: 25px;
    padding-bottom: 0;
}
#index li, #category li, #page li {
    list-style: none !important;
    line-height: 1.7;
    padding-bottom: 0;
    padding-left: 0;
    margin-bottom: 25px;
    font-size: 15px;
}
.cont_a .bold {
    color: #E95519;
    font-weight: bold;
}
/*----------------------------------------------------
   　ランキング・オススメ css
----------------------------------------------------*/  
#ranking .title {
background: none;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    color: #B0310B;
    margin: 0;
    font-weight: 500;   
    font-size: 36px;
    line-height: 1.4;
}

#ranking .title p {
background: url(img/title_no1.gif) no-repeat left center;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    margin: 0;
    font-weight: 500;   
    font-size: 36px;
    line-height: 1.4;
    background-size: 11%;
    padding-left: 12%;
    padding-bottom: 12px;
    padding-top: 25px;

}
#ranking .title+.title p {
    background: url(img/title_no2.gif) no-repeat left center;
    background-size: 11%;
}
#ranking .title+.title+.title p {
    background: url(img/title_no3.gif) no-repeat left center;
     background-size: 11%;
}
#ranking .title+.title+.title+.title p {
    background: url(img/title_no4.gif) no-repeat left center;
    background-size: 11%;
}
#ranking .title+.title+.title+.title+.title p {
    background: url(img/title_no5.gif) no-repeat left center;
    background-size: 11%;
}
#ranking .title {
    border-bottom: 1px solid #B0310B;
    margin-bottom: 30px;
}
/*----------------------------------------------------
   　table css
----------------------------------------------------*/  
#recommend .title {
    background: #F0AC73;
    margin-bottom: 50px;
}
#recommend .title+.title {
    background: #9CD1DD;    
}
#recommend .title+.title+.title {
    background: #FFB1C2;
}   
#recommend .title p {
    background: url(img/recommend.gif) no-repeat left 10px center;
    background-size: 11%;
    padding-bottom: 22px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    color: #484744;
    padding-left: 14%;
    padding-top: 22px;
    margin-bottom: 0;
    font-weight: 500;
font-size: 36px;
line-height: 1.4;


}
div#recommend .title+.title p {
    background: url(img/recommend2.gif) no-repeat left 10px center;
    background-size: 11%;
}
div#recommend .title+.title+.title p {
    background: url(img/recommend3.gif) no-repeat left 10px center;
    background-size: 11%;
}
/*----------------------------------------------------
   　table css
----------------------------------------------------*/  
table,td,th {
    border: none;
}   
.table-layout th {
    border-left: none;
}   
.table-layout table {
    border-top: 2px solid #CABCB2;
    border-bottom: 2px solid #CABCB2;
    width: 100%;
    color: #5D431E;
    font-size: 15px;
}
.table-layout th {
    border-left: none;
    background: #E2D2C7;
}
.table-layout tr {
    border-bottom: 2px solid #CABCB2;
}
.table-layout td {
    border-left: 2px dashed #CABCB2;
    font-weight: bold;
    text-align: center; 
}
/*----------------------------------------------------
   　引用文付き画像 css
----------------------------------------------------*/
.float-img img,.right_img img {max-width: 100%;}
.float-wrap.clearfix p{
    font-size: 15px;
}   
.float-img.fl {
    width: 350px;
    float: left;
    display: inline-block;
    padding: 0 10px 10px 0;
}   
.flame {
    text-align: center;
    color: gray;
    font-size: 10px;
    line-height: 1.2;   
}
#in_box .flame a {
    color: gray;
}
#in_box .flame a:hover {
    opacity: 0.7;
}
.flame span {
    display: inline-block;
    padding-top: 10px;
}
.flame span a {
    word-break: break-all;
}   
.float-img.fr {
    width: 350px;
    float: right;
    display: inline-block;
    padding: 0 0 5px 5px;
}
.clear {
    clear: both;
    line-height: 0; 
}   
/*----------------------------------------------------
    リンクボタン
----------------------------------------------------*/  
#in_box p.btn-telsp {display: none;}
#in_box p.btn-web, #in_box p.btn-internal {
    margin-bottom: 30px;
}   
p.btn-internal,p.btn-web,p.btn-telsp {text-align: center;}  
#in_box p.btn-web a {
    background: #FF5357 url(img/bottan1.gif) no-repeat right 15px center;
    background-size: 7%;
    color: #fff;
    text-decoration: none;
    padding: 17px 60px 15px 40px;
    border-radius: 7px;
    font-weight: 700;
    display: inline-block;
    box-shadow: 2px 2px 6px 1px grey;   
}
#in_box p.btn-web a:hover {
    background: #FF0057 url(img/bottan1.gif) no-repeat right 15px center;
    background-size: 7%;    
    }   
#in_box p.btn-internal a {
    background: #F29951 url(img/bottan2.gif) no-repeat right 15px center;
    background-size: 7%;
    color: #fff;
    text-decoration: none;
    padding: 17px 60px 15px 40px;
    border-radius: 7px;
    font-weight: 700;
    display: inline-block;
    box-shadow: 2px 2px 6px 1px grey;   
}
#in_box p.btn-internal a:hover {
    background: #FF8100 url(img/bottan2.gif) no-repeat right 15px center;
    background-size: 7%;
    }   
        
#in_box p.btn-link a {
    font-weight: 700;
    display: inline-block;
    text-decoration: underline;
    background: url(img/arrow.gif) no-repeat left center;
    background-size: 12%;
    padding: 10px 0 7px 40px;
    float: right;
    font-size: 15px;
}
p.btn-telsp {
    clear: both;
}
/*----------------------------------------------------
    2つ・3つ並びbox css
----------------------------------------------------*/
#block.text-box {
    display: flex;
    justify-content: space-between;
}       
#block.text-box .t-item {
    background: #fff;
    padding: 25px 25px 0;
    color: #5B411D;
    width: 49%;
    border: 1px solid #D4D4D5;
}
#block.text-box .t-item span.title {
    text-align: center;
    text-decoration: none;
    margin: 0 0 20px;
    border-bottom: none;
    display: block;
    font-size: 17px;
    font-weight: 700;
}
#block.text-box .t-item span.title.ti_2 {
    border-bottom: 1px solid #D4D4D5;
    padding-bottom: 0.385em;    
}   
#block.text-box .t-item span.title a {
    text-decoration: none;
    color: #5B411D;
}
#block.text-box .t-item span.title a:hover {opacity: 0.7;}  
#in_box p.link-b {
    margin: 25px 0 0;
    text-align: center;
}   
#in_box p.link-b a {
    text-decoration: none;
    color: #fff;
    border-radius: 25px;
    background: #F09751 url(img/arrow.png) no-repeat right 20px center;
    background-size: 11%;
    display: inline-block;
    padding: 11px 60px 10px 50px;
}
#in_box p.link-b.lc a {
    padding: 11px 60px 10px 50px;
    background: #F09751 url(img/arrow.png) no-repeat right 15px center;
    background-size: 11%;
    display: inline-block;
}   
#in_box p.link-b a:hover {opacity: 0.7;}
    
#block.text-box .t-img {
    margin-bottom: 20px;
    width: 12%;
    margin: 0 auto 20px;
}   
#block.text-box .t-img img {
    max-width: 100%;
}
#block.text-box.t-color {
    background: #fff;
    padding: 20px 0;
    border: 1px solid #D4D4D5;
}
#block.text-box .t-item.item {
    padding: 0;
    width: 32%;
    border: none;
}
#block.text-box.t-color .t-img {
    width: 20%;
    margin: 0 auto 30px;
}
#block.text-box .t-item.item {
    padding: 0 10px;
    width: 33%;
    border-right: 1px solid #D4D4D5;
    border-bottom: none;
    border-left: none;
    border-top: none;
}
#block.text-box .t-item.item:last-child {
    border: none;
}   
}



/*----------------------------------------------------
    SPサイトcss
----------------------------------------------------*/

@media screen and (max-width: 599px) {
/*/////////////SP用のCSSをここに作成してください。/////////////*/
/*/////////////必ず中括弧の中に作成してください。/////////////*/
    
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
body {
    background: url(img/body_back.png) no-repeat center;
    background-size: cover;
}   
img {
    max-width: 100%;
}
p, li {
    font-size: 1.23em;
    line-height: 1.7;
}
h1, h2, h3, h4, h5 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    transform: rotate(.03deg);
    line-height: 1.7;
}   
#in_box,#in_block,#main_img{
    max-width: 1000px;
    margin: 0 auto;
}   
#index h2, #category h1, #page h1 {
    font-weight: bold;
    background: url(img/h2-img.png) no-repeat bottom;
    background-size: contain;
    font-size: 2.154em;
    padding: 0;
    margin: 0 0 1.0em;  
    }
#index h3, #category h2, #page h2 {
    font-weight: bold;
    padding: 0px;
    margin: 0 0 1.0em;  
    border-bottom: 5px solid #B5D873;
    font-size: 2.000em;
}   
#index h4, #category h3, #page h3{
    font-size: 1.7em;
    font-weight: bold;
    padding-bottom: 0;
    padding-top: 0;
    margin: 0 0 1.0em;  
    border-left: 5px solid #E95519;
}   
    
#index h5, #category h4, #page h4 {
    font-size: 1.538em;
    font-weight: bold;
    padding: 0;
    margin: 0 0 1.0em;  
    border-bottom: 3px dotted #B4B4B5;
    }   
.cont_a{
    margin-bottom: 4.615em;
    }
#contents {
    max-width: 1000px;
    width: 100% !important;
    padding: 0 5px;
}   
.inner {
    max-width: 1000px;
    width: 100% !important;
    margin: 0 auto;
    padding: 0 !important;
}
#index, #category, #page {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
#index {
    padding: 0 0.769em !important;
}   
.pc {
    display: none;
}       
.sp {
    display: block;
    padding-top: 1.2em;
}
/*--------------------------------
   sp menu
-------------------------------*/   
.slick-dots {
    text-align: center;
}   
.slick-dots li {
    width: 10% !important;
    float: none !important;
    float: none !important;
    padding: 0 !important;  
}
ul.slider.slick-initialized.slick-slider li {
    border: none !important; 
    margin: 0;
    padding: 2.5em 0.5em 0;
    
}
ul.slider.slick-initialized.slick-slider li img {
    max-width: 100%;
    max-height: 100%;
    width: auto\9; /* ie8 */
    margin: 0 auto;
}
    
nav.globalMenu li a {
    text-decoration: none;
    padding: 1.2em 2em 2.1em;
    background: url(img/menu-img.png) no-repeat center;
    background-size: cover;
    color: #fff;
    display: block;
}
    
nav.globalMenu li a:hover {
    opacity: 0.7;
}
nav.globalMenu ul {
    display: flex;
    justify-content: space-between;
}   
nav.globalMenu li {
    float: none;
    margin: 0;
    font-size: 1em;
    width: 33%;
    text-align: center;
}


/*--------------------------------
    g_nav
-------------------------------*/
.globalMenuPc{
    display: none;
}
.globalMenuSp,.navToggle{
    display: block;
}       
nav.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background: #fff;
    color: #000;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
}
 
nav.globalMenuSp ul {
    background: #B4DFEF;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
 
nav.globalMenuSp ul li {
    font-size: 1.1em;
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px dashed #333;
}
 
/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
nav.globalMenuSp ul li a {
    display: block;
    color: #B0310B;
    padding: 1em 0;
    background: #B4DFEF;
    text-decoration: none;
} 
    
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0%);
    background: #B4DFEF;
}
.navToggle {
    display: block;
    position: fixed;
    right: 10px;
    top: 4px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 3;
    background: url(img/togle_img.png) no-repeat center;
    background-size: cover;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 2px 6px 0px #b0b0b0;
}
 
.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 30px;
    border-bottom: solid 3px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
}
 
.navToggle span:nth-child(1) {
    top: 9px;
}
 
.navToggle span:nth-child(2) {
    top: 18px;
}
 
.navToggle span:nth-child(3) {
    top: 27px;
}
 
.navToggle span:nth-child(4) {
    border: none;
    color: #eee;
    font-size: 9px;
    font-weight: bold;
    top: 34px;
}
/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
header {
    background: url(img/head_img.png) no-repeat top;
    background-size: cover;
    padding: 0.1em 0 0;
}
header .logo a {
    /*background: url(img/logo.png) no-repeat left;*/
    background-size: 15%;
    padding: 31px 0 30px 45px;
}
header .logo {
    width: 100%;
    margin: 1.5em auto 0 0;
    padding-left: 0.5em;
    float: none;
    text-align: left;
}
h1.sitename {
    font-size: 0.2em;
    padding-left: 10px;
}
div#main_img {
    background: url(img/sp_main-v.jpg) no-repeat center;
    background-size: cover;
    padding: 2% 0 20%;
}
.main_text {
    width: 65%;
    margin-top: 1em;    
}
div#main_img p.title {
    font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
    font-size: 1.8em;
    line-height: 1.2;
    margin-bottom: 15px;
    font-weight: bold;
}
div#main_img p.title span {
    border-bottom: 3px solid #fff;  
}   
div#main_img p {
    font-size: 18px;
    line-height: 1.7;
}
div#main_img p+p {
    background: rgba(255,255,255,0.8);
    padding: 10px;
}
/*----------------------------------------------------
    パンくず
----------------------------------------------------*/  
/* フリックできるパンくずリスト */
#pankuzu {
padding: 15px;
overflow-x: scroll;
white-space: nowrap;
width: 100%;    
}
#pankuzu div {
display: inline-block;
padding: 5px 1em;
}
/* スクロールバーの装飾 */
#pankuzu::-webkit-scrollbar {
height: 10px;
}
/*----------------------------------------------------
    フッター
----------------------------------------------------*/
footer .inner p {
    width: 100%;
}
.pagetop {
    width: 15%;
}
footer .inner {
    padding: 0;
}   
footer {
    margin: 0;
    padding: 0;
    background: url(img/footer_img.png) no-repeat center;
    background-size: cover;
}   
footer .copylight {
    background: url(img/copy_img.png) no-repeat center;
    background-size: cover;
}
.parts {
    background: url(img/body_b.png) no-repeat bottom;
    background-size: cover;
    padding: 1em 0;
}
.free_bottom p {
    text-align: center;
    width: 100% !important;
    padding-bottom: 1em;
}
.free_bottom {
    padding: 2em 0;
    width: 80%;
    margin: 0 auto;
}
.f_nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.f_item {
    width: 100%;
    text-align: left;
    padding-left: 0;
}
.fttl {
    width: 100%;
    font-size: 17px;
    text-align: left;
    background-color: rgba(0,0,0,0.1);
}
.fttl a {
    text-decoration: none;
    display: block;
    padding: 0.5em 0 0.5em 0.5em;
}
.fttl a:hover {
    opacity: 0.7;
}   
.foot_item ul {
    padding-left: 0;
}
.foot_item ul > li {
    list-style: none !important;
    line-height: 1.7;
    position: relative;
    border-bottom: 1px dashed gray;
}
.foot_item ul > li:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: gray;
    position: absolute;
    left: 9px;
    top: 18px;
}   
/*.f_item li {
    padding: 0.5em 0 0.5em 1em;
    border-bottom: 1px dashed gray;
    list-style: none;
}*/
.foot_item li:last-child {
    border-bottom: none;
}
/*.footbox .footbox .footbox .foot_item li:last-child {
    border-bottom: 1px dashed gray;
    }*/
.foot_item li a {
    text-decoration: none;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1.5em;
    display: block; 
}
.site_map { 
    list-style: none !important;
    line-height: 1.7;
    position: relative;
    border-bottom: 1px dashed gray;
    padding: 0; 
    }
.site_map:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: gray;
    position: absolute;
    left: 9px;
    top: 18px;
}       
.site_map a {
    text-decoration: none;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1.5em;
    display: block;
}   
.free_bottom .inner {
    padding: 0 10px;
}
    
/*----------------------------------
    コンテンツcss
------------------------------------*/
.cont_a {
    margin-bottom: 60px;
    }
/*----------------------------------------------------
   　リスト css
----------------------------------------------------*/  
#index ul,#index .list-style ol {
    margin: 0;
    padding: 0;
}   
#index li {
    list-style: none !important;
    line-height: 1.7;
    padding-bottom: 1em;
}
#index ul > li {
    list-style: none !important;
    line-height: 1.7;
    padding-bottom: 0;
    position: relative;
    padding-left: 1.25em;
}
#index ul > li:before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: #E95519;
    position: absolute;
    left: 0;
    top: 5px;
}
#index ol{
counter-reset:number; /* 名前を付けたカウンターをリセット */
list-style:none; /* olが数字を付けることをキャンセル */
margin:0;
padding:0;
}
#index ol {
    counter-reset: li;
}   
#index ol > li {
    list-style: none;
    position: relative;/*リストの項目の位置を基準に*/
    padding-left: 2.3em; /*li:before分左に余白を。調整可*/
    margin-bottom: 25px;/*リストの数字がくっついてしまう場合*/
    padding-bottom: 0;
}   
#index ol > li:before {
    counter-increment: li;
    content: counter(li);
    margin-right: 1em;
    background: #E59A88; /*薄いピンク*/
    color: #ffffff; /*白*/
    border-radius: 50%; /*丸く*/
    text-align: center; /*端に寄ってる数字を真ん中に*/
    width: 2em; /*幅を決めるheightと同じ数値に*/
    height: 2em; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/
    position: absolute; /*リストの基準から移動させる*/
    left: 0em; /*項目の基準、左にあわせる*/
    top: -2px; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/
    line-height: 2;/*数字の位置あわせで数値を指定*/
    font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    font-size: 0.9em;
}
#index .flex_box {
    display: flex;
    flex-direction: column;
}   
#index li {
    list-style: none !important;
    line-height: 1.7;
    padding-bottom: 0;
    padding-left: 0;
    margin-bottom: 25px;
}
.cont_a .bold {
    color: #E95519;
    font-weight: bold;
}
/*----------------------------------------------------
   　ランキング・オススメ css
----------------------------------------------------*/  
#ranking .title {
    background-size: 13%;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    color: #B0310B;
    padding-bottom: 0;
    margin-bottom: 0.54em;
    font-weight: 500;
    font-size: 1.538em;
}


#ranking .title p {
    background: url(img/title_no1.gif) no-repeat left center;
    background-size: 13%;
    padding-left: 2em;   
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    color: #B0310B;
    padding-bottom: 0;
    margin-bottom: 0.54em;
    line-height: 1.4;
}
#ranking .title+.title p {
    background: url(img/title_no2.gif) no-repeat left center;
    background-size: 13%;   
}
#ranking .title+.title+.title p {
    background: url(img/title_no3.gif) no-repeat left center;
    background-size: 13%;
}
#ranking .title+.title+.title+.title p {
    background: url(img/title_no4.gif) no-repeat left center;
    background-size: 13%;
}
#ranking .title+.title+.title+.title+.title p {
    background: url(img/title_no5.gif) no-repeat left center;
    background-size: 13%;
}
#ranking .title {
    border-bottom: 1px solid #B0310B;
    margin-bottom: 2.3em;
}
/*----------------------------------------------------
   　table css
----------------------------------------------------*/  
#recommend .title {
    background: #F0AC73;
    margin-bottom: 2.3em;
    font-weight: 500;
    font-size: 1.538em;
line-height: 1.4;
margin: 0 0 1.0em;
}
#recommend .title+.title {
    background: #9CD1DD;    
}
#recommend .title+.title+.title {
    background: #FFB1C2;
}   
#recommend .title p {
    background: url(img/recommend.gif) no-repeat left 10px center;
    background-size: 13%;
    padding-bottom: 0.36em;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    color: #484744;
    padding-left: 2.3em;
    padding-right: 0.18em;  
    padding-top: 0.36em;
    margin-bottom: 0;
    font-weight: 500;
}
#recommend .title+.title p {
    background: url(img/recommend2.gif) no-repeat left 10px center;
    background-size: 13%;
}
#recommend .title+.title+.title p {
    background: url(img/recommend3.gif) no-repeat left 10px center;
    background-size: 13%;
}
/*----------------------------------------------------
   　table css
----------------------------------------------------*/  
table,td,th {
    border: none;
}       
.table-layout table {
    border-top: 2px solid #CABCB2;
    border-bottom: 2px solid #CABCB2;
    width: 100%;
    color: #5D431E;
}
.table-layout th {
    border-right: 2px dashed #CABCB2;
    border-left: 2px dashed #CABCB2;
    border-bottom: 2px solid #CABCB2;   
    background: #E2D2C7;
    display: block;
}   
.table-layout tr {
    border-bottom: 2px solid #CABCB2;
}
.table-layout td {
    border-right: 2px dashed #CABCB2;
    border-left: 2px dashed #CABCB2;
    border-bottom: 2px dashed #CABCB2;  
    font-weight: bold;
    text-align: center;
    display: block;
    width: 100%;
}
.table-layout td:last-child {
    border-bottom: none;
}   
    
/*----------------------------------------------------
   　引用文付き画像 css
----------------------------------------------------*/
.float-img img,.right_img img {max-width: 100%;}    
.float-img.fl {
    width: 100%;
    float: none;
    display: inline-block;
    margin-bottom: 1.16em;  
}
.float-wrap.clearfix p {
    float: none;
    width: 100%;
    padding-left: 0;
    display: inline-block;
}   
.flame {
    text-align: center;
    color: gray;
    font-size: 10px;
    line-height: 1.2;   
}
#in_box .flame a {
    color: gray;
}
#in_box .flame a:hover {
    opacity: 0.7;
}
.flame span {
    display: inline-block;
    padding-top: 10px;  
}
.flame span a {
    word-break: break-all;
}   
    
.float-img.fr {
    width: 100%;
    float: none;
    display: inline-block;
    margin-bottom: 1.16em;  
    order: 1;
}
.clear {clear: both;}   
.float-wrap.clearfix+.float-wrap.clearfix p {
    padding-left: 0;
    padding-right: 0;
    order: 2;
}
/*----------------------------------------------------
    リンクボタン
----------------------------------------------------*/  
#in_box p.btn-telsp {display: block;}
#in_box p.btn-telsp a {
    background: #4572B7 url(img/sp_tel.gif) no-repeat left 15px center;
    background-size: 13%;
    color: #fff;
    text-decoration: none;
    padding: 17px 70px 15px;
    border-radius: 7px;
    font-weight: 700;
    display: block;
    box-shadow: 2px 2px 6px 1px grey;
    width: 85%;
    margin: 0 auto;
}   
#in_box p.btn-internal,#in_box p.btn-web,#in_box p.btn-link,#in_box p.btn-telsp {
    text-align: center;
    margin-bottom: 1.87em;
    }   
#in_box p.btn-web a {
    background: #FF5357 url(img/bottan1.gif) no-repeat right 15px center;
    background-size: 7%;
    color: #fff;
    text-decoration: none;
    padding: 17px 40px 15px 10px;
    border-radius: 7px;
    font-weight: 700;
    display: block;
    box-shadow: 2px 2px 6px 1px grey;   
    width: 85%;
    margin: 0 auto;
}
#in_box p.btn-web a:hover {
    background: #FF0057 url(img/bottan1.gif) no-repeat right 15px center;
    background-size: 7%;    
    }   
#in_box p.btn-internal a {
    background: #F29951 url(img/bottan2.gif) no-repeat right 15px center;
    background-size: 7%;
    color: #fff;
    text-decoration: none;
    padding: 17px 40px 15px 10px;
    border-radius: 7px;
    font-weight: 700;
    display: block;
    box-shadow: 2px 2px 6px 1px grey;
    width: 85%;
    margin: 0 auto;
}
#in_box p.btn-internal a:hover {
    background: #FF8100 url(img/bottan2.gif) no-repeat right 15px center;
    background-size: 7%;
    }   
        
#in_box p.btn-link a {
    background: #fff url(img/bottan3.gif) no-repeat right 15px center;
    background-size: 7%;
    color: #3960A4;
    text-decoration: none;
    padding: 17px 40px 15px 10px;
    border-radius: 7px;
    font-weight: 700;
    display: block;
    box-shadow: 2px 2px 6px 1px grey;
    width: 85%;
    margin: 0 auto;
}
/*----------------------------------------------------
    2つ並びbox css
----------------------------------------------------*/  
#block.text-box .t-item {
    background: #fff;
    padding: 25px 25px 0;
    color: #5B411D;
    width: 100%;
    border: 1px solid #D4D4D5;
    margin-bottom: 20px;    
}
#block.text-box .t-item span.title {
    text-align: center;
    text-decoration: none;
    margin: 0 0 20px;
    border-bottom: none;
    display: block;
    font-size: 1.385em;
    font-weight: 700;
}
#block.text-box .t-item span.title.ti_2 {
    border-bottom: 1px solid #D4D4D5;
    padding-bottom: 0.385em;    
}
#block.text-box .t-item span.title a {
    text-decoration: none;
    color: #5B411D;
}
#block.text-box .t-item span.title a:hover {opacity: 0.7;}  
#in_box p.link-b {
    margin: 25px 0 0;
    text-align: center;
}   
#in_box p.link-b a {
    text-decoration: none;
    color: #fff;
    border-radius: 25px;
    background: #F09751 url(img/arrow.png) no-repeat right 20px center;
    background-size: 11%;
    display: inline-block;
    padding: 11px 64px 11px 50px;
}
#in_box p.link-b a:hover {opacity: 0.7;}    
#block.text-box .t-img {
    width: 11%;
    margin: 0 auto 30px;
}
#block.text-box .t-img img {
    max-width: 100%;
}
#block.text-box.t-color {
    padding: 20px 0;
}
#block.text-box.t-color .t-img {
    width: 15%;
    margin: 0 auto 30px;
}
#item.item {
    padding: 25px 25px 0;
    width: 100%;
    border: 3px solid #D4D4D5;
}

    
}