.mb-8{
	margin-bottom: 8px;
}

.mb-12{
	margin-bottom: 12px;
}


h2{
	line-height:1.6;
	margin:3em 0 1.5em; 
	padding:1.1em .9em 1em; 
	font-size:22px; 
	font-weight:400; 
	border-top:2px solid #6C9BD2; 
	border-bottom:1px solid #ddd; 
	background:#fafafa; 
	box-shadow:0px 1px 2px #f7f7f7;
}

h3{
	line-height:1.6;
	margin:2.8em 0 1.3em; 
	padding:1.1em .9em 1em; 
	font-size:20px; 
	font-weight:400; 
	border-top:2px solid #6C9BD2; 
	border-bottom:1px solid #ddd; 
	background:#fafafa; 
	box-shadow:0px 1px 2px #f7f7f7;
}

.marker_yellow{
background: linear-gradient(transparent 70%, #ffff66 40%);
}

.marker_water {
background: linear-gradient(transparent 70%, #A9EAF2 40%);
}

.marker_pink {
background: linear-gradient(transparent 80%, #ff66ff 40%);
}


.marker_orange {
background: linear-gradient(transparent 80%, #ffcb72 40%);
}


.code_gray {
background: linear-gradient(transparent 0%, #DCDCDC 30%);
}

.youtube{
	position:relative;
	width:100%;
	padding-top:56.25%;
}

.youtube iframe{
	position:absolute;
	top:0;
	right:0;
	width:100% !important;
	height:100% !important;
}

.mb-8{ margin-bottom: 8px;}


@media (max-width: 480px) {
  .sp-scrollable-table table{
    border-collapse: collapse;
    margin: 2em 0;
    max-width: 100%;
  }

  .sp-scrollable-table th{
    background-color: #eee;
  }

  .sp-scrollable-table th,
  .sp-scrollable-table td{
    border: solid 1px #ccc;
    padding: 3px 5px;
    white-space: nowrap;
  }

  .sp-scrollable-table {
    overflow-x: auto;
    margin-bottom: 1em;
    max-width: 770px;
  }
}

/*--------------------
 吹き出しを作る
--------------------*/
.think_balloon {
margin-bottom: 2em;
position: relative;
}

.think_balloon:before,.think_balloon:after {
clear: both;
content: "";
display: block;
}
.think_balloon figure {
width: 200px;
height: 200px;
}
.balloon-image-left {
float: left;
margin-right: 20px;
}
.balloon-image-right {
float: right;
margin-left: 20px;
}

.think_balloon figure img {
width: 100%;
height: 100%;
margin: 0;
}

.balloon-image-description {
padding: 5px 0 0;
font-size: 10px;
text-align: center;
}
.balloon-text-right,.balloon-text-left {
position: relative;
padding: 10px;
border: 1px solid;
border-radius: 10px;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
}
.balloon-text-right {
border-color: #aaa;
}
.balloon-text-left {
border-color: #aaa;
}
.balloon-text-right {
float: left;
}
.balloon-text-left {
float: right;
}
.think_balloon p {
margin: 0 0 20px;
}
.think_balloon p:last-child {
margin-bottom: 0;
}

/* 三角部分 */
.balloon-text-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #aaa;
top: 15px;
left: -20px;
}
.balloon-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 15px;
left: -19px;
}
.balloon-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #aaa;
top: 15px;
right: -20px;
}
.balloon-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 15px;
right: -19px;
}


/*▽Rinkerのデザイン変更▽*/
@media screen and (min-width: 501px){/*パソコン画面だけボタン文字小さく
    div.yyi-rinker-contents ul.yyi-rinker-links li {
        font-size: .8em;/*文字の大きさ*/
    }
 
@media screen and (max-width: 500px){/*スマホ表示用*/
    /*全体*/
    div.yyi-rinker-contents div.yyi-rinker-box {
        display: block!important;
    }
     
    /*画像*/
    div.yyi-rinker-contents div.yyi-rinker-image {
        width: auto;/*画像を中央表示*/
    }
    /*商品名ボタン*/
    div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom:0px;
        padding-left: 0px;
        margin: auto!important;
        width: 87%;
        text-align: center!important;
    }
    div.yyi-rinker-contents ul.yyi-rinker-links li {
        display: block!important;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
         
    body div.yyi-rinker-contents ul.yyi-rinker-links li a {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom:0px;
        padding-left: 0px!important;
    }
}
/*△Rinkerのデザイン変更△*/

/* お問い合わせボタン*/
.inform_btn {
	display: block;
	cursor: pointer;
	max-width: 250px;
	margin: 1em auto;
	padding: 20px;
	border-radius: 4px;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	text-decoration: inherit;
	background: #20b2aa;
	box-shadow: 0 6px 0 #047c71, 0 12px 0 rgba(0,0,0,.2);
	transition: color .3s, background .3s, box-shadow .3s, transform .3s;
}
.inform_btn:hover {
	background: #96e9e6;
	box-shadow: 0 3px 0 #12978d, 0 6px 0 rgba(0,0,0,.2);
	transform: translateY(3px);
}
.inform_btn:active {
	color: #ddd;
	background: #12978d;
	box-shadow: 0 0 0 #047c71, 0 0 0 rgba(0,0,0,.2);
	transform: translateY(6px);
	transition-duration: .1s;
}

div.horizontal-scroll{
overflow-x: auto;
}