@charset "UTF-8";
.srcmd-toppanel {
    width: 100%;
    background-color: #18B7CD;
    position: relative;
}

.srcmd-toppanel-left {
    width: 34.296875%;
    float: left;
    height: 100%;
}

.srcmd-toppanel-left-buttonlist {
    width: 100%;
}

.srcmd-toppanel-left-buttonlist li {
    width: 100%;
    font-size: 0;
    box-sizing: border-box;
    padding: 0%;
    padding-top: 0;
    position:relative;
}

.srcmd-toppanel-left-buttonlist li .label-container {
	display: block;
    font-size: 16px;
    color: rebeccapurple;
    position: absolute;
    z-index: 5;
    top: 6.1%;
    left: 2%;
    background-color: #1E98B4;
    border-radius: 5px;
    width: 95.5%;
    height: 93.6%;

}

.srcmd-toppanel-left-buttonlist li .label-container .en-label{
	display: block;
    padding-top: 8.9%;
    padding-left: 8%;
    color: #FFFFFF;
		font-size: 1.0vw;
    line-height: 1;
    font-family: 'Lato', sans-serif;
    font-weight: normal;
    letter-spacing: 0.06em;
}

.srcmd-toppanel-left-buttonlist li .label-container .jp-label{
    display: block;
    padding-top: 0;
    padding-left: 7.9%;
    color: #fccf00;
		font-size: 1.5vw;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.srcmd-toppanel-left-buttonlist li:first-child {
    padding-top: 1%;
}

.srcmd-toppanel-left-buttonlist li img {
	position: absolute;
	top: 14%;
    right: 10.4%;
    width: 17.5%;
    z-index: 99;
}

.srcmd-toppanel-left-buttonlist li a, .srcmd-toppanel-left-buttonlist li div.label-wrapper {
    transition: opacity 0.3s linear;
	padding-top: 31.1%;
    display: block;
}

.pc-effect .srcmd-toppanel-left-buttonlist li a:hover {
    opacity: 0.7;
    transition: opacity 0.1s linear;
}

.srcmd-toppanel-right {
    width: 65.703125%;
    position: relative;
    float: left;
}

.srcmd-toppanel-right-buttonlist {
    width: 100%;
    position: relative;
}

.srcmd-toppanel-right-buttonlist {
}

.srcmd-toppanel-right-buttonlist li {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.srcmd-toppanel-right-buttonlist li img {
    width: 100%;
}

.srcmd-bottom {
    clear: both;
}

body {
    position: relative;
}

.bottom-button-container {
}

.botton-button-list {
    display: flex;
    width: 100%;
}

.button-button-panel {
    width: 100%;
    padding: 0 2px;
}

.button-button-panel a {
    display: block;
    font-size: 0;
    transition: opacity 0.3s linear;
}

.pc-effect .button-button-panel a:hover {
    opacity: 0.5;
    transition: opacity 0.1s linear;
}

.button-button-panel a img {
    width: 100%;
}

.support-button-container {
}

.support-button-list {
    display: flex;
    width: 100%;
}

.support-button-list li:first-child {
    margin-left: 0;
}

.support-button-panel {
    width: 100%;
    margin-left: 20px;
}

.support-button-panel a {
    padding: 0;
    margin: 0;
    font-size: 0;
    display: block;
    transition: opacity 0.3s linear;
}

.support-button-panel a:hover {
    opacity: 0.7;
    transition: opacity 0.1s linear;
}

.support-button-panel a img {
    width: 100%;
    padding: 0;
    margin: 0;
    padding-bottom: 16px;
}

.middle-sns {
    /* float: initial; */
    display: block;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}

.middle-sns ul {
    padding: 0;
    /* margin: 0 auto; */
    clear: both;
    float: initial;
    display: flex;
    justify-content: center;
}

.middle-sns .occ-footer-sns li {
    float: left;
    display: inline-block;
    margin-right: 20px;
}

.middle-sns .occ-footer-sns li:last-child {
    margin-right: 0;
}

.middle-sns .occ-footer-sns li img {
    width: 40px;
}

@media screen and (max-width: 1520px) {
	.srcmd-toppanel-left-buttonlist li .label-container .en-label {
		font-size: 1.2vw;
	}
	.srcmd-toppanel-left-buttonlist li .label-container .jp-label {
		font-size: 1.8vw;
	}
}

@media screen and (max-width: 767px) {
	.srcmd-toppanel-left-buttonlist li .label-container .en-label {
		font-size: 4vw;
	    padding-top: 4.4%;
	    padding-left: 5.3%;
	}
	.srcmd-toppanel-left-buttonlist li .label-container .jp-label {
		font-size: 5.2vw;
	    padding-left: 5%;
	    padding-top: 0;
	}

    .srcmd-toppanel-left {
        width: 100%;
        float: left;
        padding-top: 66.63346613545817%;
        padding-bottom: 1.7%;
    }

    .srcmd-toppanel-right {
        width: 100%;
        position: absolute;
        float: left;
    }

	.srcmd-toppanel-left-buttonlist li a, .srcmd-toppanel-left-buttonlist li div.label-wrapper {
	    transition: opacity 0.3s linear;
		padding-top: 21.3%;
	    display: block;
	}

	.srcmd-toppanel-left-buttonlist li .label-container {
		display: block;
	    font-size: 16px;
	    color: rebeccapurple;
	    position: absolute;
	    z-index: 5;
	    top: 6.1%;
	    left: 2%;
	    background-color: #1E98B4;
	    border-radius: 5px;
	    width: 95.5%;
	    height: 93.8%;
	}

	.srcmd-toppanel-left-buttonlist li img {
	    position: absolute;
	    top: -3.6%;
	    right: 5.5%;
	    width: 18.2%;
	    z-index: 99;
	}

    .support-button-list {
        display: block;
        width: 100%;
    }

    .support-button-list li:first-child {
        margin-left: 0;
        margin: 0;
    }

    .support-button-panel {
        width: 100%;
        margin: 0;
    }

    .botton-button-list {
        display: block;
        width: 100%;
    }

    .button-button-panel {
        width: 100%;
        padding: 0;
    }

    .button-button-panel a img {
        width: 100%;
        padding-bottom: 8px;
    }

    .middle-sns .occ-footer-sns li {
        float: left;
        display: inline-block;
        margin-right: 19px;
    }

    .middle-sns .occ-footer-sns li:last-child {
        margin-right: 0;
    }

    .middle-sns .occ-footer-sns li img {
        width: 41px;
    }
}