@charset "utf-8";
/* CSS Document for usage */
/* 20180329 created t.aoki */

    .btn_usage {
		height: 70px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
    }

    .btn_usage_blue {
		color: #FFFFFF;
		background-color: #5B99C8;
		border: none;
		height: 40px;
		width: 90%;
		text-align: center;
		padding-top: 10px;
        border-radius: 5px;
    }
    .btn_usage_pink {
		color: #FFFFFF;
		background-color: #ED7969;
		border: none;
		height: 40px;
		width: 90%;
		text-align: center;
		padding-top: 10px;
        border-radius: 5px;

    }

    .btn_usage_blue_rev {
		color: #5B99C8;
		background-color: #FFFFFF;
		border: #5B99C8 solid 1px;
		height: 40px;
		width: 90%;
		text-align: center;
		padding-top: 10px;
        border-radius: 5px;
    }
    .btn_usage_pink_rev {
		color: #ED7969;
		background-color: #FFFFFF;
		border: #ED7969 solid 1px;
		height: 40px;
		width: 90%;
		text-align: center;
		padding-top: 10px;
        border-radius: 5px;

    }

    .ul_h2_blue {
		color: #5B99C8;
		border-bottom: 1px solid #5B99C8;
		padding: 2px 20px;
		display: inline-block;
		text-align: center;
	}
    .h2_blue {
		color: #5B99C8;
		/*border-bottom: 1px solid #5B99C8;*/
		padding: 2px 20px;
		display: inline-block;
		text-align: center;
	}
    .ul_h2_pink {
		color: #ED7969;
		border-bottom: 1px solid #ED7969;
		padding: 2px 20px;
		display: inline-block;
		text-align: center;
	}
    .h2_pink {
		color: #ED7969;
		/*border-bottom: 1px solid #ED7969;*/
		padding: 2px 20px;
		display: inline-block;
		text-align: center;
	}

    .orange_box {
		color: #F6921E;
		background-color: #FFFFFF;
		border: #F6921E solid 1px;
		width: 100%;
		text-align: left;
		padding: 15px;
    }
    .blue_box {
		color: #0071BB;
		background-color: #FFFFFF;
		border: #0071BB solid 1px;
		width: 100%;
		text-align: left;
		padding: 15px;
    }

    @media (max-width: 768px) {
        .jumbotron-usage {
            padding-top: 30px;
            padding-bottom: 30px;
            background-image: url(../usage/img/bg_usage_btn_sp.png);
            background-position: center center;
            background-repeat: no-repeat;
            color: #FFFFFF;
            margin-bottom: -4px;
        }
    }
    @media only screen and (min-width: 768px){
        .jumbotron-usage {
            padding-top: 30px;
            padding-bottom: 30px;
            background-image: url(../usage/img/bg_usage_btn.png);
            background-position: center center;
            background-repeat: no-repeat;
            color: #FFFFFF;
            margin-bottom: -4px;
        }
	}

    .btn_wrap {
        margin: auto;
        text-align: center;
        transition: 0.2s all ease 0s;
    }
    .btn_scene {
        padding: 10px;
    }
    .btn_wrap:hover {
        /*padding-top: 10px;*/
        transform: translate3d(2px, 5px, 0px);
    }
    .btn_wrap:hover .btn_scene {
        box-shadow: none;
    }

    .btn_scene > a > img {
        opacity: 1.0;
    }

    .font-10 {
        font-size: 10px;
    }

    .btn_usage2 {
        width: 100%;
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid #5E3C29;
        border-top-color: rgb(94, 60, 41);
        border-right-color: rgb(94, 60, 41);
        border-bottom-color: rgb(94, 60, 41);
        border-left-color: rgb(94, 60, 41);
    }
    .btn-default:hover {
        color: #FFFFFF;
        background-color: #5E3C29;
        border-color: #5E3C29;
    }

    img_resp {
		display: block;
		text-align: center;
		max-width: 100%;
		height: auto;
    }
/*
    .btn_usage_blue:hover {
		color: #FFFFFF;
		background-color: #5E3C29;
		border-color: #5E3C29;
		background-image: url(../yof-shop/img/marklink_on.png);
		background-repeat: no-repeat;
		background-position: 98%;
    }
    */

	.btn-default_home {
		color: #FFFFFF;
		background-color: #5E3C29;
		border-color: #5E3C29;
	}
	.btn-default_home:hover {
		color: #FFFFFF;
		background-color: #5E3C29;
		border-color: #5E3C29;
	}
	.ul_h3 {
		border-bottom: 1px solid #eee;
		padding: 2px 20px;
		display: inline-block;
	}
	h3 {
		font-size: 18px;
		line-height: 1.2em;
		font-weight: bold;
	}
    @media (max-width: 768px) {
		h3 {
			font-size: 13px;
			line-height: 1.2em;
			font-weight: bold;
		}
		p {
			font-size: small;
		}
    }
    @media (max-width: 434px) {
    }