@charset "UTF-8";
/*------------------------------------------

 *

------------------------------------------*/
.breadcrumbs-area {
	margin-bottom:70px;
}

/*------------------------------------------

 themesong

------------------------------------------*/
.themesong {
	width: 960px;
	margin: 0 auto;
	border-radius: 8px;
}
.mv {
	padding-bottom: 150px;
	background: url(/resonya/imgs/song/bg_mv.png) center top no-repeat;
	position: relative;
}
.mv h2 {
	height: 0;
	text-indent: -9000px;
}
.mv p {
	margin: 370px 0 0 120px;
	font-size: 21px;
	line-height: 160%;
}
.mv a {
	margin: 0 0 0 436px;
	display: block;
}
.mv a:hover {
	opacity: 0.7;
}
.mv .resonya1 {
	right: -132px;
	top: -66px;
	position: absolute;
	display: block;
}
.movie {
	width: 960px;
	padding: 0 0 20px 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.movie {
		width: 959px;
	 }
}
.movie span {
	display: block;
	position: relative;
	top: -32px;
}
.movie h4 img {
	margin: 0 auto 15px auto;
	display: block;
}
.movie div {
	width: 784px;
	height:441px;
	margin: 0 auto;
	padding: 37px;
	background: url(/resonya/imgs/song/bg_movie2.png) center top no-repeat;
	position: relative;
}
.movie p {
	z-index: 2;
}
.movie p:hover {
	cursor: pointer;
}
.movie a:hover {
	opacity: 0.7;
}
.movie iframe {
	width:784px;
	height:441px;
	position: absolute;
}
.sns {
	height: 795px;
	background: url(/resonya/imgs/song/bg_sns.png) left -50px no-repeat;
	position: relative;
	top: -50px;
}
.sns #a01 {
	position: absolute;
	top: -210px;
}
.sns h2 {
	position: absolute;
	top: -80px;
	left: 49px;
}
.sns .limit {
	width: 354px;
	height: 56px;
	background: #fff;
	color: #ED6D34;
	font-size: 16px;
	font-weight: bold;
	line-height: 56px;
	text-align: center;
	border: solid 2px #ED6D34;
	border-radius: 56px;
	left: 79px;
	top: 365px;
	position: absolute;
}
.sns .limit span {
	color: #956134;
	font-size: 20px;
}
.sns .resonya2 {
	right: -124px;
	top: -113px;
	position: absolute;
	display: block;
}
.sns ul {
	width:896px;
	display: flex;
	justify-content: space-between;
	left: 32px;
	top: 410px;
	position: absolute;
}
.sns li {
	width: 217px;
}
.sns li h3 {
	height: 249px;
	display: flex;
	align-items: flex-end;
}
.sns li span {
	width: auto;
	padding: 0 4px 8px 4px;
	background: #ED6D34;
	border-radius: 0 0 8px 8px / 0 0 8px 8px;
	display: block;
}
.sns li a {
	width: auto;
	height: 148px;
	padding: 15px 18px;
	background: url(/resonya/imgs/song/ico_arrow1.png) center 150px no-repeat #fff;
	border-radius: 0 0 6px 6px / 0 0 6px 6px;
	color: #333;
	font-size: 16px;
	line-height: 160%;
	text-decoration: none;
	display: block;
}
.sns li a:hover {
	background: url(/resonya/imgs/song/ico_arrow1.png) center 150px no-repeat #FBDCCE;
	cursor: pointer;
}
.challenge {
	margin-bottom: -100px;
	padding-bottom: 10px;
	background: url(/resonya/imgs/song/bg_movie1.png) left top repeat;
	border-radius: 0 0 10px 10px / 0 0 10px 10px;
	position: relative;
	top: -100px;
}
.challenge h2 {
	margin-bottom: 16px;
}
.challenge .practice {
	width: 896px;
	margin: 0 auto 30px auto;
	display: flex;
	justify-content: space-between;
}
.challenge .practice li {
	width: 440px;
}
.challenge .practice li div {
	width: 432px;
	height:312px;
	background: #fff;
	padding: 4px 4px 8px 4px;
	border-radius: 8px;
}
.challenge .practice li div span {
	width: auto;
	height:284px;
	padding: 28px 24px 0 24px;
	background: #FBA24D;
	border-radius: 6px;
	position: relative;
	display: block;
}
.challenge .practice li div span p:hover {
	cursor: pointer;
}
.challenge .practice li div span a {
	width:382px;
	height:215px;
	background: #fff;
	display: block;
}
.challenge .practice li div span a img:hover {
	opacity: 0.7;
}
.challenge iframe {
	width:382px;
	height:215px;
	position: absolute;
	pointer-events: none;
}
.challenge h3 {
	width: 382px;
	margin:0 auto; 

	color: #fff;
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	line-height: 100%;
	bottom: 20px;
	position: absolute;
}
.challenge small {
	padding-top: 10px;
	font-size: 14px;
	text-align: center;
	line-height: 100%;
	display: block;
}
.challenge .doc1 {
	width: 896px;
	margin: 0 auto 12px auto;
	display: flex;
	justify-content: space-between;
}
.challenge .doc1 li {
	width: 441px;
	height: 110px;
}
.challenge .doc1 li a {
	height: 90px;
	color: #956134;
	font-size: 24px;
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	line-height: 82px;
	display: block;
}
@media all and (-ms-high-contrast:none) {
	/*--IEhack--*/
	.challenge .doc1 li a {
		line-height: 90px;
	}
}
.challenge .doc1 a:hover {
	color: #87582E;
}
.challenge .doc1 li a span {
	font-size: 13px;
}
.challenge .doc1 li:nth-child(1) a {
	width: 341px;
	padding: 20px 0 0 100px;
	background: url(/resonya/imgs/song/btn_challenge1.png) left top no-repeat;
}
.challenge .doc1 li:nth-child(1) a:hover {
	background: url(/resonya/imgs/song/btn_challenge1_on.png) left top no-repeat;
}
.challenge .doc1 li:nth-child(2) a {
	width: 361px;
	padding: 20px 0 0 100px;
	background: url(/resonya/imgs/song/btn_challenge2.png) left top no-repeat;
	letter-spacing: -0.5px;
}
.challenge .doc1 li:nth-child(2) a:hover {
	background: url(/resonya/imgs/song/btn_challenge2_on.png) left top no-repeat;
}
.challenge .doc1 li a img {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -2px;
}
.challenge .doc1 li a em {
	padding-left: 4px;
	font-style: normal;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	display: inline-block;
	vertical-align: middle;
}
.challenge .doc2 {
	width: 896px;
	margin: 0 auto 12px auto;
	display: flex;
	justify-content: space-between;
}
.challenge .doc2 li {
	width: 441px;
	height: 110px;
}
.challenge .doc2 li a {
	height: 90px;
	padding: 20px 0 0 40px;
	color: #956134;
	font-size: 24px;
	font-weight: bold;
	text-decoration: none;
	line-height: 82px;
	text-align: center;
	background: url(/resonya/imgs/song/btn_challenge3.png) left top no-repeat;
	display: block;
}
@media all and (-ms-high-contrast:none) {
	/*--IEhack--*/
	.challenge .doc2 li a {
		line-height: 90px;
	}
}
.challenge .doc2 li a:hover {
	color: #87582E;
	background: url(/resonya/imgs/song/btn_challenge3_on.png) left top no-repeat;
}
.lylic {
	margin: 50px 0 40px 0;
}
.lylic img {
	width: 896px;
	margin: 0 auto;
}
.procedure {
	width: 896px;
	margin: 0 auto 20px auto;
}
.procedure h2 {
	margin: 0 auto 58px auto;
	padding: 12px 0;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	line-height: 100%;
	background: #009C53;
}
.procedure ol {
	list-style: none;
}
.procedure ol > li {
	margin-bottom: 70px;
	padding: 4px 4px 8px 4px;
	background: #ED6D34;
	border-radius: 8px;
	position: relative;
}
.procedure ol > li div {
	background: #fff;
	border-radius: 6px;
	position: relative;
}
.procedure ol > li::after {
	content: url(/resonya/imgs/song/ico_arrow2.png);
	position: absolute;
	left: 366px;
	bottom: -56px;
}
.procedure ol > li:nth-child(4)::after {
	display: none;
}
.procedure #a02,
.procedure #a03,
.procedure #a04,
.procedure #a05 {
	position: absolute;
	top: -132px;
}
.procedure ol > li strong {
	width: 144px;
	height: 144px;
	padding: 8px;
	background: #009C53;
	border-radius: 160px;
	top: -40px;
	left: 22px;
	position: absolute;
}
.procedure ol > li:nth-child(4) strong {
	width: 160px;
	height: 160px;
	padding: 0;
	background: none;
	top: -40px;
	left: 22px;
	position: absolute;
	display: block;
}
.procedure ol > li strong span {
	width: 140px;
	height: 140px;
	border: solid 2px #fff;
	border-radius: 140px;
	color: #fff;
	font-size: 52px;
	font-weight: bold;
	text-align: center;
	display: block;
}
.procedure ol > li strong span em {
	margin: 26px 0 8px 0;
	font-size: 26px;
	font-style: normal;
	display: block;
}
@media all and (-ms-high-contrast:none) {
	/*--IEhack--*/
	.procedure ol > li strong span em {
		margin: 28px 0 14px 0;
	}
}
.procedure ol > li h3 {
	height: 120px;
	padding-left: 198px;
	background: #ED6D34;
	color: #fff;
	font-size: 38px;
	font-weight: bold;
	line-height: 120px;
}
.procedure ol > li ul {
	width:784px;
	margin: 0 auto;
}
.procedure ol > li .dot {
	margin: 0 auto 28px auto;
}
.procedure ol > li .dot > li {
	margin: 0 0 10px 16px;
	font-size: 16px;
	line-height: 140%;
	list-style: disc;
}
.procedure ol > li .kome {
	padding: 25px 0 25px 0;
	border-top: solid 2px #ED6D34;
}
.procedure ol > li .kome > li {
	margin: 0 0 10px 1em;
	font-size: 14px;
	line-height: 140%;
	text-indent: -1em;
}
.procedure ol > li:nth-child(1) .resonya3 {
	top: 17px;
	right: 15px;
	position: absolute;
	display: block;
}
.procedure ol > li:nth-child(1) h4 {
	height: 81px;
	margin: 45px 0 45px 67px;
	padding: 20px 0 0 116px;
	color: #ED6D34;
	font-size: 22px;
	line-height: 150%;
	background: url(/resonya/imgs/song/bg_procedure1_1.png) left center no-repeat;
}
.procedure ol > li:nth-child(1) .example {
	margin: 4px auto 25px 126px;
}
.procedure ol > li:nth-child(2) h4 {
	height: 84px;
	margin: 23px 0 34px 22px;
	padding: 28px 0 0 165px;
	color: #ED6D34;
	font-size: 22px;
	line-height: 150%;
	background: url(/resonya/imgs/song/bg_procedure2_1.png) left center no-repeat;
}
.procedure ol > li:nth-child(2) h4 small {
	font-size: 16px;
}
.procedure ol > li:nth-child(2) .example {
	margin: 0 auto 28px 296px;
}
.procedure ol > li:nth-child(3) .resonya4 {
	top: 17px;
	right: 27px;
	position: absolute;
	display: block;
}
.procedure ol > li:nth-child(3) h4 {
	height: 89px;
	margin: 30px 0 40px 42px;
	padding: 56px 0 0 142px;
	color: #ED6D34;
	font-size: 22px;
	line-height: 150%;
	background: url(/resonya/imgs/song/bg_procedure3_1.png) left center no-repeat;
}
.procedure ol > li:nth-child(3) .btn-link {
    font-size: 24px;
    margin: -16px 0 50px 0;
}
.procedure ol > li:nth-child(3) ul + a {
    font-size: 16px;
    margin: 0 0 65px 0;
    font-weight: bold;
    text-align: center;
    line-height: 100%;
    display: block;
}
.procedure ol > li:nth-child(3) .btn-link a {
    background: url(/resonya/imgs/common/arrow_right.png) #ed6d34 96% center no-repeat;
    background-size: auto auto;
    background-size: 10px 13px;
    border-radius: 50px;
    padding: 22px 0 22px 0;
    width: 400px;
    border: 3px solid #ed6d34;
    font-weight: bold;
    line-height: 100%;
}
@media all and (-ms-high-contrast:none) {
	/*--IEhack--*/
	.procedure ol > li:nth-child(3) .btn-link a {
	    padding: 25px 0 19px 0;
	}
}
.procedure ol > li:nth-child(3) .btn-link a:hover {
    background: url(/resonya/imgs/common/arrow_right_mobilenav.png) #fff 96% center no-repeat;
    background-size: auto auto;
    background-size: 10px 13px;
}
.procedure ol > li:nth-child(4) p {
	color: #ED6D34;
	font-weight: bold;
}
.procedure ol > li:nth-child(4) .row1 {
	width: 750px;
	height: 88px;
	margin: 20px auto 34px auto;
	padding: 22px 0 0 34px;
	font-size: 34px;
	text-align: center;
	line-height: 110px;
	background: url(/resonya/imgs/song/bg_procedure4_1.png) left center no-repeat;
}
@media all and (-ms-high-contrast:none) {
	/*--IEhack--*/
	.procedure ol > li:nth-child(4) .row1 {
		line-height: 120px;
	}
}
.procedure ol > li:nth-child(4) .row1 small {
	font-size: 24px;
}
.procedure ol > li:nth-child(4) .row2 {
	width: 190px;
	height: 28px;
	margin: 0 auto 25px auto;
	font-size: 30px;
	text-align: center;
	line-height: 28px;
}
@media all and (-ms-high-contrast:none) {
	/*--IEhack--*/
	.procedure ol > li:nth-child(4) .row2 {
		line-height: 32px;
	}
}
.procedure ol > li:nth-child(4) .row3 {
	width: 714px;
	height: auto;
	margin: 0 auto 33px auto;
	padding: 0 0 10px 70px;
	font-size: 30px;
	text-align: center;
	line-height: 130%;
	background: url(/resonya/imgs/song/bg_procedure4_3.png) left bottom no-repeat;
}
@media all and (-ms-high-contrast:none) {
	/*--IEhack--*/

	.procedure ol > li:nth-child(4) .row3 {
		padding: 0 0 7px 70px;
	}
}
.procedure ol > li:nth-child(4) > div > span > div {
	width: 789px;
	margin: 0 auto 17px auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.procedure ol > li:nth-child(4) > div > span > div img {
	display: block;
}
.procedure ol > li:nth-child(4) > div > small {
	width: 789px;
	margin: 0 auto;
	padding-bottom: 32px;
	text-align: right;
	display: block;
}
.share {
	width: 896px;
	margin: 0 auto 20px auto;
	position: relative;
}
.share #url {
	position: absolute;
	top: -92px;
}
.share h2 {
	margin: 0 auto 30px auto;
	padding: 12px 0;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	line-height: 100%;
	background: #009C53;
}
.share > div {
	margin-bottom: 70px;
	padding: 4px 4px 8px 4px;
	background: #ED6D34;
	border-radius: 8px;
	position: relative;
}
.share > div span {
	background: #fff;
	border-radius: 6px;
	position: relative;
	display: block;
}
.share ul {
	height: 86px;
	display: flex;
	justify-content: space-between;
}
.share ul li {
	width: 100%;
	text-align: center;
	border-bottom: solid 4px #ED6D34;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	line-height: 78px;
}
.share ul li:hover {
	cursor: pointer;
	background: #FBDCCE;
}
.share ul li.current {
	border-bottom: none;
}
.share ul li.current:hover {
	background: #fff;
}
.share ul li:nth-child(2),
.share ul li:nth-child(3),
.share ul li:nth-child(4) {
	border-left: solid 4px #ED6D34;
}
.share ul li img {
	padding-right: 10px;
	vertical-align: middle;
}
.share > div > span > div {
	width: 800px;
	height: 405px;
	margin: 0 auto;
	padding: 40px 0;
	background: url(/resonya/imgs/song/img_share_tw.png) left center no-repeat;
	position: relative;
}
.share > div > span > div p {
	color: #ED6D34;
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	line-height: 140%;
	right: 0;
	top: 175px;
	position: absolute;
}
.nav-local-area {
	margin: 0 30px;
	padding-bottom: 30px;
}
.nav-local-special::after {
	background: url(/resonya/imgs/song/illust_localnav.png) 0 0 no-repeat;
	background-size: 74px 81px;
}
.nav-local-list {
	background: #fff;
}
.bnr-common {
	margin: 0;
}
.pc {
	display: block;
}
.sp {
	display: none;
}


@media all and (max-width: 767px) {
/*----------------------------------------------------------------------------------------------

 * smartphone

------------------------------------------------------------------------------------------------*/

.breadcrumbs-area {
	margin:0;
	top:82px;
	right: 0;
	position:absolute;
	z-index: 10;
}
.main-wrapper {
	width: 100%;
	padding-top: 10vw;
}
.themesong {
	width: auto;
	margin: 0 3vw;
	background: #AED26A;
	border-radius: 0 0 2vw 2vw;
}
.mv {
	width: auto;
	height: 70vw;
	margin: 0 3vw -33.3vw 3vw;
	padding-bottom: 0;
	background: url(/resonya/imgs/song/bg_mv_sp.png) left top repeat;
	background-size: 65px 35px;
	top: 90vw;
	position: relative;
}
h2.ttl_mv {
	width: 100%;
	height: auto;
	top: -36.7vw;
	position: relative;
}
.mv .resonya1 {
	display: none;
}
.mv p {
	margin: 0;
	padding: 35vw 7vw 4vw 7vw;
	font-size: 4.5vw;
	line-height: 160%;
}
.mv p br {
	display: none;
}
.mv a {
	margin: 0 5vw;
}
.movie {
	width: auto;
	padding: 0 0 0 0;
	top: -74vw;
}
.movie h2 {
	width: auto;
	padding: 0 2vw 1vw 2vw;
}
.movie h2 img {
	margin: 0 auto;
	display: block;
}
.movie div {
	width: 81vw;
	height: 45.4vw;
	margin: 0 2vw;
	padding: 4.6vw;
	background: url(/resonya/imgs/song/bg_movie2_sp.png) center top no-repeat;
	background-size: cover;
	position: relative;
}
.movie iframe {
	width: 81vw;
	height: 45.4vw;
	margin: 0;
	padding: 0 0 45.4vw 0;
}
.sns {
	height: auto;
	margin-bottom: -86vw;
	background: none;
	top: -86vw;
}
.sns #a01 {
	position: static;
}
.sns h2 {
	position: static;
}
.sns .limit {
	width: auto;
	height: 10vw;
	margin: 6vw 4vw;
	font-size: 4vw;
	line-height: 10vw;
	border-radius: 10vw;
	position: static;
}
.sns .limit span {
	font-size: 5vw;
}
.sns ul {
	width:86.6vw;
	margin: 0 auto;
	position: static;
}
.sns li {
	width: 27vw;
}
.sns li h3 {
	height: auto;
	display: block;
}
.sns li a {
	width: auto;
	height: auto;
	padding: 0;
	background: none;
	border-radius: 0;
	line-height: 100%;
}
.sns li a:hover {
	background: none;
}
.sns ul + img {
	width: 40vw;
	margin: 3vw auto;
	display: block;
}
.sns .anchor4 {
	width:86.6vw;
	margin: 0 auto;
}
.sns ul + div h3 a img {
	width:100%;
}
.challenge {
	margin-bottom: 0;
	top: 0;
}
.challenge h2 {
	margin-bottom: 4vw;
}
.challenge .practice {
	width:86.6vw;
	margin: 0 auto 6vw auto;
	display: block;
}
.challenge .practice li {
	width: auto;
	margin-bottom: 5vw;
}
.challenge .practice li div {
	width: auto;
	height:auto;
	padding: 1vw 1vw 1.6vw 1vw;
	border-radius: 2vw;
}
.challenge .practice li div span {
	width: auto;
	height:auto;
	padding: 4vw 4vw 0 4vw;
	background: #FBA24D;
	border-radius: 1.2vw;
}
.challenge .practice li div span a {
	width: auto;
	height:auto;
}
.challenge .practice li div span a img {
	width: 100%;
	height:auto;
}
.challenge h3 {
	width: 100%;
	padding: 2.5vw 0;
	font-size: 5vw;
	position: static;
}
.challenge h4 {
	width: auto;
	padding: 0 2vw;
}
.challenge small {
	padding-top: 2vw;
	font-size: 3vw;
}
.challenge .doc3 {
	width:86.6vw;
	height: auto;
	margin: 0 auto 3vw auto;
	display: flex;
	justify-content: space-between;
}
.challenge .doc3 li {
	width: 41.6vw;
	height: auto;
}
.challenge .doc3 li a {
	width: 41.6vw;
	color: #956134;
	font-size: 5vw;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	line-height: 130%;
	display: block;
}
.challenge .doc3 li a span {
	font-size: 3.5vw;
	line-height: 130%;
}
.challenge .doc3 li:nth-child(1) a {
	height: auto;
	padding: 20vw 0 10.2vw 0;
	background: url(/resonya/imgs/song/btn_challenge1_sp.png) left top no-repeat;
	background-size: cover;
}
.challenge .doc3 li:nth-child(2) a {
	height: auto;
	padding: 20vw 0 10.2vw 0;
	background: url(/resonya/imgs/song/btn_challenge2_sp.png) left top no-repeat;
	background-size: cover;
}
.challenge .doc3 li a img {
	width: 6vw;
}
.challenge .doc3 li a em {
	margin-top: -1vw;
	font-style: normal;
	font-size: 3vw;
	font-weight: normal;
	display: block;
}
.challenge .doc4 {
	width:86.6vw;
	height: auto;
	margin: 0 auto 10vw auto;
	display: flex;
	justify-content: space-between;
}
.challenge .doc4 li {
	width: 41.6vw;
	height: auto;
}
.challenge .doc4 li a {
	width: 41.6vw;
	color: #956134;
	font-size: 5vw;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	line-height: 130%;
	display: block;
}
.challenge .doc4 li a span {
	font-size: 3.5vw;
}
.challenge .doc4 li:nth-child(1) a {
	height: auto;
	padding: 18vw 0 14vw 0;
	background: url(/resonya/imgs/song/btn_challenge3_sp.png) left top no-repeat;
	background-size: cover;
}
.challenge .doc4 li:nth-child(2) a {
	height: auto;
	padding: 18vw 0 14vw 0;
	background: url(/resonya/imgs/song/btn_challenge3_sp.png) left top no-repeat;
	background-size: cover;
}
.lylic {
	margin: 0 0 7vw 0;
}
.lylic img {
	width:86.6vw;
}
.procedure {
	width:86.6vw;
	margin: 0 auto;
}
.procedure h2 {
	margin: 0 auto 20vw auto;
	padding: 2.5vw 0;
	font-size: 7.6vw;
}
.procedure ol > li {
	margin-bottom: 28vw;
	padding: 1vw 1vw 2vw 1vw;
	border-radius: 2vw;
}
.procedure ol > li:nth-child(3) {
	margin-bottom: 29.6vw;
}
.procedure ol > li:nth-child(4) {
	margin-bottom: 10vw;
}
.procedure ol > li div {
	border-radius: 1.5vw;
}
.procedure ol > li::after {
	content: '';
	width: 18vw;
	height: 7.6vw;
	background: url(/resonya/imgs/song/ico_arrow2_sp.png);
	background-size: contain;
	position: absolute;
	left: 34.3vw;
	bottom: -7.6vw;
	display: inline-block;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.procedure ol > li::after {
		width: 17.6vw;
		height: 7.2vw;
		bottom: -7.2vw;
	}
}
.procedure #a02,
.procedure #a03,
.procedure #a04,
.procedure #a05 {
	top: -20vw;
}
.procedure ol > li strong {
	width: 30vw;
	height: 30vw;
	padding: 2vw;
	border-radius: 30vw;
	top: -18vw;
	left: 25.3vw;
}
.procedure ol > li:nth-child(4) strong {
	width: 38vw;
	height: 38vw;
	padding: 0;
	top: -19.6vw;
	left: 23.2vw;
}
.procedure ol > li strong span {
	width: 28vw;
	height: 28vw;
	border: solid 1vw #fff;
	border-radius: 28vw;
	font-size: 10vw;
}
.procedure ol > li strong span em {
	margin: 7vw 0 1.5vw 0;
	font-size: 5vw;
	font-style: normal;
}
.procedure ol > li h3 {
	height: 12vw;
	padding: 20vw 0 0 0;
	font-size: 6.5vw;
	text-align: center;
	line-height: 100%;
}
.procedure ol > li:nth-child(4)  h3 {
	height: 12vw;
	padding: 18vw 0 0 0;
	margin-bottom: 7vw;
}
.procedure ol > li:nth-child(1) h4 {
	height: auto;
	margin: 0;
	padding: 3vw 4vw;
	font-size: 4.25vw;
	text-align: center;
	line-height: 160%;
	background: none;
}
.procedure ol > li:nth-child(1) .resonya3 {
	width: 70vw;
	margin: 0 auto;
	position: static;
}
.procedure ol > li:nth-child(1) .example {
	width: 74.6vw;
	margin: 0 auto 5vw auto;
	display: block;
}
.procedure ol > li:nth-child(2) h4 {
	height: auto;
	margin: 0;
	padding: 3vw 4vw;
	font-size: 5vw;
	text-align: center;
	line-height: 140%;
	background: none;
}
.procedure ol > li:nth-child(2) h4 small {
	font-size: 2.9vw;
}
.procedure ol > li:nth-child(2) .example {
	width: 74.6vw;
	margin: 0 auto 5vw auto;
	display: block;
}
.procedure ol > li:nth-child(3) .resonya4 {
	width: 70vw;
	margin: 0 auto;
	position: static;
}
.procedure ol > li:nth-child(3) h4 {
	height: auto;
	margin: 0;
	padding: 3vw 4vw;
	font-size: 5vw;
	text-align: center;
	line-height: 140%;
	background: none;
}
.procedure ol > li .dot {
	width: 74.6vw;
	margin: 3vw 4vw 4vw 6vw;
}
.procedure ol > li .dot > li {
	margin: 0 0 1vw 2vw;
	font-size: 4vw;
	line-height: 140%;
}
.procedure ol > li .kome {
	width: 74.6vw;
	padding: 4vw 0;
	margin: 3vw 4vw 0 6vw;
	border-top: solid 1vw #ED6D34;
}
.procedure ol > li .kome > li {
	margin: 0 0 2vw 1em;
	font-size: 4vw;
	line-height: 140%;
	text-indent: -1em;
}
.procedure ol > li:nth-child(3) .btn-link {
	width: 74.6vw;
   margin: 0 auto 7vw auto;
   font-size: 5.5vw;
}
.procedure ol > li:nth-child(3) ul + a {
	font-size: 4vw;
	margin: 0 auto 7vw auto;
	text-align: center;
	display: block;
}
.procedure ol > li:nth-child(3) .btn-link a {
	background: url(/resonya/imgs/common/arrow_right.png) #ed6d34 96% center no-repeat;
	background-size: 3vw 3.9vw;
	border-radius: 15vw;
	padding: 5vw 0 5vw 0;
	width: 72.6vw;
	border: 1vw solid #ed6d34;
}
.procedure ol > li:nth-child(3) .btn-link a:hover {
	color: #ed6d34;
	background-size: 3vw 3.9vw;
}
.procedure ol > li:nth-child(4) .row1 {
	width: 54.6vw;
	height: 20.6vw;
	margin: 0 auto;
	padding: 4.7vw 0 0 20vw;
	font-size: 5.8vw;
	text-align: left;
	line-height: 120%;
	background: url(/resonya/imgs/song/bg_procedure4_1_sp.png) center center no-repeat;
	background-size: contain;
}
.procedure ol > li:nth-child(4) .row1 small {
	font-size: 4vw;
}
.procedure ol > li:nth-child(4) .row2 {
	width: 74.6vw;
	height: 17.28vw;
	margin: 0 auto;
	padding: 7vw 0 0 0;
	font-size: 7vw;
	text-align: center;
	line-height: 140%;
	background: url(/resonya/imgs/song/bg_procedure4_2_sp.png) center center no-repeat;
	background-size: contain;
}
.procedure ol > li:nth-child(4) .row3 {
	width: 74.6vw;
	height: 26.64vw;
	margin: 0 auto;
	padding: 4vw 0 0 0;
	font-size: 5.5vw;
	text-align: center;
	line-height: 140%;
	background: url(/resonya/imgs/song/bg_procedure4_3_sp.png) center center no-repeat;
	background-size: contain;
}
.procedure ol > li:nth-child(4) > div > span > div {
	width: auto;
	margin: 0 auto 17px auto;
	display: block;
}
.procedure ol > li:nth-child(4) > div > span > div img {
	display: block;
}
.procedure ol > li:nth-child(4) > div > span > div img:nth-child(1) {
	width: 54vw;
	margin: 6vw auto 7vw auto;
}
.procedure ol > li:nth-child(4) > div > span > div img:nth-child(2) {
	width: 10vw;
	margin: 0 auto 7vw auto;
}
.procedure ol > li:nth-child(4) > div > span > div img:nth-child(3) {
	width: 74vw;
	margin: 0 auto 6vw auto;
}
.procedure ol > li:nth-child(4) > div > small {
	width: 74.6vw;
	margin: 0 auto;
	padding-bottom: 6vw;
	font-size: 4vw;
	text-align: left;
}
.share {
	width:86.6vw;
	margin: 0 auto;
}
.share #url {
	top: 0;
}
.share h2 {
	margin: 0 auto 4vw auto;
	padding: 2.5vw 0;
	font-size: 7.6vw;
}
.share > div {
	margin-bottom: 10vw;
	padding: 1vw 1vw 2vw 1vw;
	border-radius: 2vw;
}
.share > div span {
	border-radius: 1.5vw;
}
.share ul {
	height: 20vw;
}
.share ul li {
	border-bottom: solid 1vw #ED6D34;
	line-height: 18vw;
}
.share ul li:nth-child(2),
.share ul li:nth-child(3),
.share ul li:nth-child(4) {
	border-left: solid 4px #ED6D34;
}
.share ul li img {
	width: 10vw;
	padding: 0;
}
.share > div > span > div {
	width: auto;
	height: auto;
	padding: 0 0 7vw 0;
	background: url(/resonya/imgs/song/img_share_tw_sp.png) center 7vw no-repeat;
	background-size: 50vw auto;
}
.share > div > span > div p {
	padding-top: 240vw;
	font-size: 6vw;
	line-height: 140%;
	text-align: center;
	position: static;
}
.nav-local-area::before {
	content: "<div>-----</div>";
	width: auto;
	margin: 0 5vw;
	padding-bottom: 17vw;
	background-image: -webkit-linear-gradient(left, #009e50, #009e50 2px, transparent 2px, transparent 2px);
	background-image: linear-gradient(to right, #009e50, #009e50 2px, transparent 2px, transparent 2px);
	background-size: 1vw 0.5vw;
	background-position: top;
	background-repeat: repeat-x;
	font-weight: bold;
	text-indent: -9000px;
	display: block;
}
.nav-local-special::after {
	background-size: 52px 57px;
}
.nav-local-area {
	width:auto;
	margin: 0;
	padding: 6vw 0 5vw 0;
	background: none;
}
.nav-local {
	width: auto;
	margin: 0 5vw;
}
.pc {
	display: none;
}
.sp {
	display: block;
}

}