@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.7
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/*BOX　CSS　赤*/ 
.box1 {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 3px #dc143c;/*線*/
    border-radius: 8px;/*角の丸み*/
	background: #ffffff;
}

.box1 .sample_box_title{
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
    background: #ffffff;/*タイトル文字背景色*/
    color: #dc143c;/*タイトル文字色*/
    font-weight: bold;
}

.box1 p {
    margin: 0; 
    padding: 0;
}

/*BOX　CSS　緑*/ 
.box2 {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 3px #20b2aa;/*線*/
    border-radius: 8px;/*角の丸み*/
	background: #ffffff;
}

.box2 .sample_box_title{
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
    background: #ffffff;/*タイトル文字背景色*/
    color: #20b2aa;/*タイトル文字色*/
    font-weight: bold;
}

.box2 p {
    margin: 0; 
    padding: 0;
}

.box1, .box2, .box3, .box4, .box5, .box6, .box7 {
    margin: 3em auto!important;
    max-width: 800px;
}





/*アフィリボタン設定　*/ 
/*amazon　設定　*/ 
.button-a {
	display: inline-block;
	width: 320px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 45px;
	outline: none;
}

.button-a::before,
.button-a::after   {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button-a,
.button-a::before,
.button-a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}



/*アフィリボタン楽天　設定　*/ 
.button-r  {
	display: inline-block;
	width: 320px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 45px;
	outline: none;
}

.button-r::before,
.button-r::after   {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}

.button-r,
.button-r::before,
.button-r::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


/*アフィリボタンヤフー　設定　*/ 
.button-y {
	display: inline-block;
	width: 320px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 45px;
	outline: none;
}

.button-y::before,
.button-y::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}

.button-y,
.button-y::before,
.button-y::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/*アフィリボタン ビクトリア　設定　*/ 
.button-vic {
	display: inline-block;
	width: 320px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 45px;
	outline: none;
}

.button-vic::before,
.button-vic::after   {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button-vic,
.button-vic::before,
.button-vic::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/*アフィリボタン GDO　設定　*/ 
.button-gdo {
	display: inline-block;
	width: 320px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 45px;
	outline: none;
}
.button-gdo::before,
.button-gdo::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button-gdo,
.button-gdo::before,
.button-gdo::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


/*アフィリボタン ゴルフドゥ　設定　*/ 
.button-curu {
	display: inline-block;
	width: 320px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 45px;
	outline: none;
}
.button-curu::before,
.button-curu::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button-curu,
.button-curu::before,
.button-curu::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


/*アフィリボタン パートナー　設定　*/ 
.button-gpa {
	display: inline-block;
	width: 320px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 45px;
	outline: none;
}
.button-gpa::before,
.button-gpa::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button-gpa,
.button-gpa::before,
.button-gpa::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/*アフィリボタン パートナー　設定　*/ 
.button-niki {
	display: inline-block;
	width: 320px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	line-height: 45px;
	outline: none;
}
.button-niki::before,
.button-niki::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button-niki,
.button-niki::before,
.button-niki::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}


/*アフィリボタン効果　アマゾン　#ff9900;*/ 
.button-a {
	position: relative;
	z-index: 2;
	background-color: #ff9900;
	border: 2px solid #ff9900;
	color: #fff;
        font-weight:bold;
	line-height: 50px;
	overflow: hidden;
}


.button-a :hover {
     color : #ff9900 !important ;
     
}

.button-a :hover {
	color: #ff9900;
}

.button-a::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.button-a:hover::after {
        color : #ff9900 !important ;
	background: #fff;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.button-a a {
     color : #ffffff!important ;
    
}

.button-a:hover {
      color : #ff9900 !important ;
}


/*アフィリボタン効果　楽天 #dc143c;*/ 
.button-r {
	position: relative;
	z-index: 2;
	background-color: #dc143c;
	border: 2px solid #dc143c;
	color: #fff;
        font-weight:bold;
	line-height: 50px;
	overflow: hidden;
}

.button-r:hover {
	color: #dc143c;
}

.button-r::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.button-r:hover::after {
        color : #dc143c !important ;
	background: #fff;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.button-r a {
     color : #ffffff!important ;
}

.button-r a:hover {
     color : #dc143c !important ;
}


/*アフィリボタン効果　ヤフー #008000;*/ 
.button-y {
	position: relative;
	z-index: 2;
	background-color: #008000;
	border: 2px solid #008000;
	color: #fff;
        font-weight:bold;
	line-height: 50px;
	overflow: hidden;
}


.button-y:hover {
	color: #008000;
}

.button-y::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.button-y:hover::after {
        color : #008000 !important ;
	background: #fff;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.button-y a {
     color : #ffffff!important ;
}


.button-y a:hover {
     color : #008000 !important ;
}



/*アフィリボタン効果　GDO */ 
.button-gdo {
	position: relative;
	z-index: 2;
	background-color: #4169e1;
	border: 2px solid #4169e1;
	color: #fff;
        font-weight:bold;
	line-height: 50px;
	overflow: hidden;
}
.button-gdo:hover {
	color: #4169e1;
}
.button-gdo::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}
.button-gdo:hover::after {
        color : #4169e1 !important ;
	background: #fff;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.button-gdo a {
     color : #4169e1  !important ;
}

.button-gdo a:hover {
     color : #fff !important ;
}


/*アフィリボタン効果　curu */ 
.button-curu {
	position: relative;
	z-index: 2;
	background-color:#ff4500;
	border: 2px solid #ff4500;
	color: #fff;
        font-weight:bold;
	line-height: 50px;
	overflow: hidden;
}
.button-curu:hover {
	color: #ff4500;
}
.button-curu::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}
.button-curu:hover::after {
        color : #ff4500 !important ;
	background: #fff;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.button-curu a {
     color : #fff !important ;
}

.button-curu a:hover {
     color : #ff4500 !important ;
}


/*アフィリボタン効果　ビクトリア　#2e8b57*/
.button-vic {
	position: relative;
	z-index: 2;
	background-color: #2e8b57;
	border: 2px solid #2e8b57;
	color: #fff;
        font-weight:bold;
	line-height: 50px;
	overflow: hidden;
}


.button-vic :hover {
     color : #fff !important ;
     
}

.button-vic :hover {
	color: #fff;
}

.button-vic::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.button-vic:hover::after {
        color : #000 !important ;
	background: #fff;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.button-vic a {
     color : #fff　!important ;
    
}

.button-vic:hover {
      color : #2e8b57 !important ;
}


/*アフィリボタン効果　ゴルフパートナーgpa　#fff;*/ 
.button-gpa {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #8b0000;
	color: #8b0000;
        font-weight:bold;
	line-height: 50px;
	overflow: hidden;
}


.button-gpa :hover {
     color : #fff !important ;
     
}

.button-gpa :hover {
	color: #fff;
}

.button-gpa::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.button-gpa:hover::after {
        color : #fff !important ;
	background: #8b0000;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.button-gpa a {
     color : #ffffff!important ;
    
}

.button-gpa:hover {
      color : #fff !important ;
}

/*アフィリボタン効果　二木　#b22222*/
.button-niki {
	position: relative;
	z-index: 2;
	background-color: #fff;
	border: 2px solid #b22222;
	color: #b22222;
        font-weight:bold;
	line-height: 50px;
	overflow: hidden;
}


.button-niki :hover {
     color : #b22222 !important ;
     
}

.button-niki :hover {
	color: #b22222;
}

.button-niki::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.button-niki:hover::after {
        color : #000 !important ;
	background: #b22222;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.button-niki a {
     color : #b22222　!important ;
    
}

.button-niki:hover {
      color : #fff !important ;
}


/*アフィリボタン 文字リンク*/
.moji  a {
     color : #fff !important ;
}

.moji  a:hover {
     color : #4169e1 !important ;
     text-decoration: underline;
}

/*--------------------------------------
  　　テーブルスマホでの表示
--------------------------------------*/
.res-table{
	width:95%;
        margin:2em auto;     	
}

.res-table th{
    padding:3px;
	display:block;
}
 
 
.res-table td{
	padding:5px;
	display:block;
	text-align:center;
}
 
 /*table線の色*/
table th, table td {
    border: 1px solid #00a0e9;
}

 /*tableのthの色*/
table th {
    background-color: #f5f5f5;  /* 背景色指定 */
}


/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 700px) {
 
/*--------------------------------------
  PCでの表示
--------------------------------------*/
 
.res-table{
	width:100%
    margin : 5px 0px;
	font-size:90%;  
}
	
.res-table tr{
    
}
	
.res-table tr:last-child{
	border:none
 }
	
.res-table th{
	width:40%;   
    padding:5px 5px;
	display:table-cell;
	
	text-align: left;
}
 
.res-table td{
	width:0%;   
    padding:5px 5px;
	display:table-cell;
	text-align: left;
}
 
}

/*--------------------------------------
  　　テーブルスマホでの表示
--------------------------------------*/

/*テーブル　ストライプの色*/ 
table tr:nth-child(odd) {
	background-color: #fff;
}



/************************************
** テーブルプレス スクロール
************************************/

.tablepress-scroll-wrapper {
	-webkit-overflow-scrolling: touch;
}

.tablepress td,
.tablepress th {
	overflow-x: auto;
	white-space: nowrap;
}

/************************************
** テーブル横スクロール
************************************/

/* テーブルを横スクロール */
table {
 width: 100%;
}

/*tableをスクロールさせる*/
/*tableのセル内にある文字の折り返しを禁止*/
.scroll {
 overflow: auto;
 white-space: nowrap;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar {
 height: 8px;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-track {
 background: #F1F1F1;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-thumb {
 background: #00bfff;
}






/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/*新アフィリボタン設定　*/
.af-box{
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border: 1px solid #008000;
    padding: 10px;
    margin: 30px 8px;
}

.af-textbox{
    width: 100%;
}

.af-title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.af-imgbox{
    width: 200px;
    margin-right: 20px;
    float: left;
    text-align: center;
}

.af-kobox{
    width: 65%;
    margin: 5px 5px 5px 5px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    float: left;
    text-align: center;
}

.af-kobox a.aflink{
    display: block;
    padding: 5px 0 5px 0;
    text-decoration: none;
}

/*アフィリボタン GDO　設定　*/ 
.af-gdo {
    background-color: #1995DF;
    border: 2px solid #1995DF;
    color: #fff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.af-gdo:hover {
    background-color: transparent;
    border: 2px solid #1995DF;
    color: #1995DF !important;
    border-radius: 30px;
    transform: translateY(2px);
}

.af-gdo a{
    color: #fff;
    display: block;
    text-decoration: none;
}

.af-gdo a:hover{
    color: #1995DF !important;

}


/*amazon　設定　*/ 
.af-amazon {
    background-color: #F3A847;
    border: 2px solid #F3A847;
    color: #fff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.af-amazon:hover {
    background-color: transparent;
    border: 2px solid #F3A847;
    color: #1995DF !important;
    border-radius: 30px;
    transform: translateY(2px);
}

.af-amazon a{
    color: #fff;
    display: block;
    text-decoration: none;
}

.af-amazon a:hover{
    color: #F3A847 !important;
}


/*楽天　設定　*/ 
.af-rakuten {
    background-color: #BF0000;
    border: 2px solid #BF0000;
    color: #fff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.af-rakuten:hover {
    background-color: transparent;
    border: 2px solid #BF0000;
    color: #1995DF !important;
    border-radius: 30px;
    transform: translateY(2px);
}

.af-rakuten a{
    color: #fff;
    display: block;
    text-decoration: none;
}

.af-rakuten a:hover{
    color: #BF0000 !important;
}

/*ヤフー　設定　*/ 
.af-yahoo {
    background-color: #008000;
    border: 2px solid #008000;
    color: #fff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.af-yahoo:hover {
    background-color: transparent;
    border: 2px solid #008000;
    color: #008000 !important;
    border-radius: 30px;
    transform: translateY(2px);
}

.af-yahoo a{
    color: #fff;
    display: block;
    text-decoration: none;
}

.af-yahoo a:hover{
    color: #008000 !important;
}

/*ヴィクトリアゴルフ　設定　*/ 
.af-vic {
    background-color: #fff;
    border: 2px solid #00643D;
    color: #00643D !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.af-vic:hover {
    background-color: transparent;
    border: 2px solid #00643D;
    color: #00643D !important;
    border-radius: 30px;
    transform: translateY(2px);
}

.af-vic a{
    color: #00643D;
    display: block;
    text-decoration: none;
}

.af-vic a:hover{
    color: #00643D !important;
}

/*二木ゴルフ　設定　*/ 
.af-niki {
    background-color: #fff;
    border: 2px solid #dc143c;
    color: #dc143c !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.af-niki:hover {
    background-color: transparent;
    border: 2px solid #dc143c;
    color: #dc143c !important;
    border-radius: 30px;
    transform: translateY(2px);
}

.af-niki a{
    color: #dc143c;
    display: block;
    text-decoration: none;
}

.af-niki a:hover{
    color: #dc143c !important;
}


/*curucuru　設定　*/ 
.af-curu {
    background-color: #deb887;
    border: 2px solid #deb887;
    color: #fff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.af-curu:hover {
    background-color: transparent;
    border: 2px solid #deb887;
    color: #f5deb3 !important;
    border-radius: 30px;
    transform: translateY(2px);
}

.af-curu a{
    color: #fff;
    display: block;
    text-decoration: none;
}

.af-curu a:hover{
    color: #deb887 !important;
}

/*ゴルフパートナー　設定　*/ 
.af-gpa {
    background-color: #ffff00;
    border: 2px solid #ffff00;
    color: #000 !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.af-gpa:hover {
    background-color: transparent;
    border: 2px solid #ffff00;
    color: #000 !important;
    border-radius: 30px;
    transform: translateY(2px);
}

.af-gpa a{
    color: #000;
    display: block;
    text-decoration: none;
}

.af-gpa a:hover{
    color: #000 !important;
}

/*黒ー　設定　*/ 
.af-black {
    background-color: #000000;
    border: 2px solid #000000;
    color: #fff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.af-black:hover {
    background-color: transparent;
    border: 2px solid #000000;
    color: #000000 !important;
    border-radius: 30px;
    transform: translateY(2px);
}

.af-black a{
    color: #ffffff;
    display: block;
    text-decoration: none;
}

.af-black a:hover{
    color: #000 !important;
}

.clear{clear:both;}

html {
  overflow-x: hidden;
}

@media screen and (max-width: 800px) {
    .af-imgbox{
        width: 200px;
        margin: 0 auto;
        text-align: center;
        float: none;
    }

     .af-kobox{
        width: 90%;
        margin: 10px 5px 5px 25px;
        font-size: 14px;
        font-weight: bold;
        border-radius: 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        float: left;
        text-align: center;
}   

}

@media screen and (max-width: 430px) {

.af-imgbox{
        width: 200px;
        margin: 0 auto;
        text-align: center;
        float: none;
    }

.af-kobox{
    width: 90%;
    margin: 10px 5px 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    float: left;
    text-align: center;
}   

}


/*サイドバー　おすすめ記事設定*/
.wpp-list {
 counter-reset: posts-rank;
}

.wpp-list li {
 position: relative;
 padding:12px 0 12px 5px; 
}

.wpp-list li:before {
 content: counter(posts-rank);
 counter-increment: posts-rank;
 position: absolute;
 z-index: 1;
 background: rgba(220,20,60,1); 
opacity: 0.8;
 color: #fff; 
 font-size: 14px;
 line-height: 1;
 padding: 5.4px 8px;
 left: 0; 
 top: 0;  
}


.wpp-meta, .post-stats {
    display: block;
    font-style:italic;
    font-size: .9em;
    font-weight: bold;
}



/*画像　ぼやけない設定*/
img{
-webkit-backface-visibility: hidden;
}

/*トップに戻るボタン　下から*/
.go-to-top {
	bottom: 70px;
}

/*文字　太字*/
.bold{
  font-weight: bold;
}


/*マイクロバルーンの背景色*/
.micro-balloon {
  background-color:#ff8c00;
  color:#fff;	 
 }

.micro-balloon:after {
 border-top-color:#ff8c00;
 }	
/*マイクロバルーンの背景色*/

/*白文字　設定　*/ 
/*白の指定*/
.w {color : #ffffff ;
}

/*オレンジの指定*/
.or {color : #FF837B ;
}

.article h2 {
    margin-top: 0.7em;
}

/*タブ見出しピンク*/
.tab-caption-box.has-pink-border-color .box-content {
    margin-bottom: 1.4em;
} 


/************************************
** 評価グラフ
************************************/
.ub-bar-graph{
  margin:0 auto 2rem !important;
  padding:2em !important;
  background:#fafafa;
  box-shadow: 0 3px 5px rgba(0,0,0,.07);
  color: #333;
}
.ub-bar-graph__title{
  letter-spacing: 1.5px !important;
  line-height:1.8 !important;
  font-size: 1em  !important;
  margin: 0 auto 2.5em !important;
  padding: 5px 0 !important;
  border-bottom: 1px dashed #aaa;
  text-align:center;
  font-weight:600 !important;
}
.ub-bar-graph dl > div{
  margin: 0 auto 2.5em !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 30px;
  font-size: 0.9rem;
  position:relative;
  box-shadow: 0 3px 5px rgba(0,0,0,.03);
}
.ub-bar-graph dl > div:last-child{
  margin: 0 !important;
}
.ub-bar-graph dl > div dt{
  background:#fbd366;
  border-right: 2px solid #fff;
}
.ub-bar-graph dl > div .ub-bar-graph__em{
  background:#6cd2d8;
}
.ub-bar-graph dl > div dd{
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex:1;
  margin:0 !important;
  font-size:1em;
  background:#dfe6e8;
}
.ub-bar-graph dl > div dt > span,.ub-bar-graph dl > div dd > span{
  position:absolute;
  z-index: 1;
  color:#333;
  font-size: 1em;
  line-height: 1.5;
}
.ub-bar-graph dl > div dt > .ub-bar-graph__content{
  left:0px;
  top:-20px;
}
.ub-bar-graph dl > div dd >  .ub-bar-graph__value{
  right:5px;
  top:5px;
}
@media screen and (max-width: 560px) {
  .ub-bar-graph{
    padding:2em 1em !important;
  }
  .ub-bar-graph dl > div{
    margin: 0 auto 2em !important;
  }
}

/************************************
** 揺れ防止　CSS
************************************/
@media screen and (max-width : 767px){
 html,
 body {
 overflow-x: hidden!important;
 }
}