@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/



/*ヘッダーロゴ*/
#logo, #logo img, .desktop-nav li a, #drawer__open {
    height: 40px;/*スマホ用サイズ*/
    line-height: 40px;/*スマホ用サイズ*/
}

@media only screen and (min-width: 768px) {
    #logo, #logo img, .desktop-nav li a {
       height: 31px;/*768px?で見たとき用サイズ*/
       line-height: 31px;/*768px?で見たとき用サイズ*/
    }
}


/*サイト全体のフォントを変える*/


/*初期設定でQuicksandが使われている部分を変える*/
.dfont {
   font-family: 'Prata',YuGothic,"Yu Gothic","Hiragino Sans","ヒラギノ角ゴシック","メイリオ", Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}


/*ボタン幅*/
#inner-content .wd100 {
    width: 100%;
    text-align: center;
}

#inner-content .wd80 {
    width: 80%;
    text-align: center;
}

#inner-content .wd50 {
    width: 50%;
    text-align: center;
}

#inner-content .wd40 {
    width: 40%;
    text-align: center;
}

#inner-content .wd35 {
    width: 35%;
    text-align: center;
}

#inner-content .wd30 {
    width: 30%;
    text-align: center;
}

#inner-content .wd25 {
    width: 25%;
    text-align: center;
}



/*白黒ボタン*/
.flat2 {
    border-color: #000;/*線色*/
    color: #000;/*文字色*/
}
/*ホバー時*/
.flat2:hover {
    background: #000;/*背景色*/
    color: white;/*文字色*/
}


/*テストボタン*/
.raised main-bc {
    border-color: #000;/*線色*/
    color: #000;/*文字色*/
}
/*ホバー時*/
.raised main-bc:hover {
    background: #000;/*背景色*/
    color: white;/*文字色*/
}



/*白赤ボタン1*/
.flat1 {
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: white;
    background: #e50000;
    border: solid 2px #e50000;
    border-radius: 3px;
    transition: .4s;
}

.flat1:hover {
    background: white;
    color: #e50000;
}





/*タイトル下線消し*/
.nothumb .entry-meta:after, .nothumb .page-title:after {
    content: none;
}


/* 記事タイトル下の余白を小さく*/
#main .entry-content {
    padding-top: 10px;
}
#main .article-header {
    margin-bottom: 10px;
}


/*記事ページの幅*/
@media only screen and (min-width: 768px) {
.single .one-column #main {
    max-width: 1180px;/*最大幅*/
  }
}


/*記事一覧ページ*/
@media only screen and (min-width: 768px) {
.wrap {
  width: 1180px;
}
.d-5of7 {
  width: 100%;/*メインコンテンツ幅（デフォルト69%）*/
}
.d-2of7 {
  width: 0%;/*サイドバー幅（デフォルト31%）*/
}
}


/*記事ページのパンくずリストの高さを上げる*/
@media only screen and (min-width: 768px) {
  #content:not(.one-column) .article-header {
    margin-top: 0!important;
  }
}


/*--------------------------------------
  デフォルトの見出しデザインをリセットh3
--------------------------------------*/
.entry-content h3 {
font-size: 1.4em;
border-left: none;
padding-left: 0;
}

/*--------------------------------------
  デフォルトの見出しデザインをリセットh4
--------------------------------------*/
.entry-content h4 {
  margin: 0em;
  font-size: 1em;
}


/*ホーム名変更*/
#breadcrumb li:first-child a span {
    display: none;
}
#breadcrumb li:first-child a:after {
    content: 'ライブガール';
}



/*--------------------------------------
目次（記事内）　デザイン変更
--------------------------------------*/
/*-----目次全体-----*/
#toc_container {
    border: none;/*枠線を削除*/
    background: #f5f5f5;/*背景の色*/
    box-shadow: none;/*影を削除*/
    border-radius: 3px;/*丸み*/
}
/*-----目次のタイトル-----*/
#toc_container .toc_title {
    margin-left: 55px;/*左の余白（外側）*/
    color: #595959;/*文字の色*/
}
/*-----アイコン（タイトル前）-----*/
.toc_title:before {
    background: none!important;/*背景を削除*/
    color: #595959!important;/*アイコンの色*/
    top: .25em!important;/*上からの位置*/
    font-size: 27px!important;/*アイコンの大きさ*/
    line-height: 40px!important;/*アイコンの高さ*/
    content: "\f00b"!important;/*アイコンの種類*/
}
/*-----ひらく・しまう部分-----*/
.toc_toggle {
    width: auto;/*幅を自動調整*/
    margin-left: 3em;/*左の余白（外側）*/
    margin-bottom: .4em;/*下の余白追加*/
    border-radius: 4px;/*丸み*/
    background: #595959;/*背景色*/
    font-size: 13px;/*文字の大きさ*/
    letter-spacing: .25em;/*字間をちょい広め*/
    color: #ff00;/*文字を透明（[]）*/
}
/*-----目次の箇条書き部分-----*/
#toc_container .toc_list {
    margin-bottom: 20px;/*一番下の余白追加*/
    margin-left: 2.7em;/*左側の余白追加*/
}
/*-----PC表示のときシュッとさせる-----*/
@media only screen and (min-width: 500px){/*ブレイクポイント500px*/
#toc_container {
    padding: 10px 25px;/*余白（内側）　上下　左右*/
}}



/*--------------------------------------
  トップページ用固定ページのコンテンツ幅
--------------------------------------*/
.page-forfront #inner-content {
    max-width: 750px;
}



.stepBar {
  position: relative;
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  text-align: center;
  width: 100%;
  overflow: hidden;
  *zoom: 1;
}
.stepBar .step {
  position: relative;
  float: left;
  display: inline-block;
  line-height: 40px;
  padding: 0 40px 0 20px;
  background-color: #eee;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.stepBar .step:before, .stepBar .step:after {
  position: absolute;
  left: -15px;
  display: block;
  content: '';
  background-color: #eee;
  border-left: 4px solid #FFF;
  width: 20px;
  height: 20px;
}
.stepBar .step:after {
  top: 0;
  -moz-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
.stepBar .step:before {
  bottom: 0;
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
}
.stepBar .step:first-child {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.stepBar .step:first-child:before, .stepBar .step:first-child:after {
  content: none;
}
.stepBar .step:last-child {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.stepBar .step.current {
  color: #FFF;
  background-color: #26bfa1;
}
.stepBar .step.current:before, .stepBar .step.current:after {
  background-color: #26bfa1;
}
.stepBar.step2 .step {
  width: 50%;
}
.stepBar.step3 .step {
  width: 33.333%;
}
.stepBar.step4 .step {
  width: 25%;
}
.stepBar.step5 .step {
  width: 20%;
}