#sound_back {
	background:#f2f2f2;
	}

#container {
	margin:0 32px;
	padding-bottom:90px;
	}

#sound_use_page #container h2 {
	line-height:1.8;
	text-align:center;
	font-size:2.2rem;
	}
	
#sound_use_page #container h3 {
	line-height:1.8;
	text-align:center;
	margin-top:30px;
	}	
	
#container h4 {
	font-size:2.2rem;
	margin-bottom:15px;
	border-left:5px solid #e60012;
	padding-left:10px;
	}	

#case_page .minBtn {
	background-color:transparent;
	border:1px solid #fff;
	}

.rule1 {
	font-size:1.6rem;
	}

.inquiry_note p {
	margin-bottom:30px;
	}
	
.inquiry_note p:last-child {
	margin-bottom:0;
	}

.sound {
	margin-bottom:72px;	
	}	

.sound:after {
	content:"";
	display:block;
	clear:both;
	}	
	
.sound_top {
	max-width:1136px;
	margin:60px auto 52px;
	position:relative;
	}	
	
.sound_top img {
	width:100%;
	}		
	
.sound ul {
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-ms-flex-wrap : wrap; 
	-webkit-flex-wrap : wrap;
	flex-wrap:wrap;
	margin-top:72px;
	}	

.sound li {
	width: calc((100% - 30px * 3) / 4);
	margin-right:30px;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	}
	
.sound li:last-child {
	margin-right:0;
	}	
	
.sound li a {
	display:block;
	color:#fff;
	background:#ce181e;
	border-radius:2px;
	text-align:center;
	width:100%;
	padding:12px 0;
	border:2px solid transparent;
	box-sizing:border-box;
	transition-duration:.13s;
	}
	
.sound li a:hover {
	border:2px solid #ce181e;
	background:transparent;
	color:#ce181e;
	}		

.sound_note {
	margin-bottom:52px;
	}

.sound_note:last-child {
	margin-bottom:72px;
	}	
		
.sound_note h2 {
	margin-bottom:15px;
	}
	
.sound_note p {
	margin-bottom:30px;
	}	

#flow, #case, #examples, #rules, #faq {
	padding-top:20px;
	} 
	
.lnk a {
	color:#e60012;
	}	
	
.lnk a:hover {
	text-decoration:underline;
	}
/*
.message {
	position:absolute;
	width:65%;
	right:0;
	left:0;
	margin:0 auto;
	top:50%;
	transform:translateY(-50%);
	box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);
	
	background-color:rgba(0,0,0,0.4);
	}	
	
.message h1 {
	padding:3% 3% 0;
	text-align:center;
	font-size:22px;
	color:#fff;
	font-weight:bold;
	line-height:1.8;
	border-bottom:none;
	margin-bottom:0;
	}		
	
.message h2 {
	padding:4% 3% 3%;
	color:#fff;
	text-align:center;
	font-size:16px;
	font-weight:normal;
	line-height:1.8;
	}
	*/
	
/*テスト*/
	
.sound_top img {
	width:100%;
	}	

.message {
	position:absolute;
	width:60%;
	right:0;
	left:0;
	margin:0 auto;
	top:50%;
	transform:translateY(-50%);
	box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);
	
	background-color:rgba(0,0,0,0.4);
	}	
	
.message h1 {
	padding:2% 3% 1%;
	text-align:center;
	font-size:2.2rem;
	color:#fff;
	font-weight:bold;
	line-height:1.4;
	border-bottom:none;
	margin-bottom:0;
	}		
	
.message h2 {
	padding:1% 3% 2%;
	color:#fff;
	text-align:center;
	font-size:1.4rem;
	font-weight:normal;
	line-height:1.8;
	}

/*テストエンド*/	
	
	
	
/*ご利用の流れ*/

.flow {
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-ms-flex-wrap : wrap; 
	-webkit-flex-wrap : wrap;
	flex-wrap:wrap;
	padding:0 65px;
	}
	
.flow dl {
	width:calc((100% - 100px * 1) / 2);
	margin-right:100px;
	border: 3px solid #e6e6e6;
	box-sizing:border-box;
	padding:5px;
	position:relative;
	}	
	
.flow dl:last-child {
	margin-right:0;
	}	
	
.flow dl:nth-child(1):after {
	content:"";
	display:block;
	border-top:30px solid transparent;
	border-bottom:30px solid transparent;
	border-left:40px solid #b4b4b4;
	position:absolute;
	right:-75px;
	top:50%;
	transform:translateY(-50%);
	}		
		
.flow img {
	width:100%;
	}
	
.flow dt {
	position:relative;
	margin-bottom:5px;
	
	padding:10px 0 50px 0;
	background: linear-gradient(90deg, rgba(255,58,111,1) 0%, rgba(127,134,178,1) 30%, rgba(119,197,75,1) 70%, rgba(242,217,99,1) 100%);
	background:#7a97b2;
	}
	
.flow dd {
	padding:0 15px;
	}	
	
.flow .title {
	position:absolute;
	color:#fff;
	right:0;
	left:0;
	bottom:0;
	text-align:center;
	margin:0 auto;
	z-index:1;
	display:block;
	margin-bottom:5px;
	border-top:1px solid #fff;
	width:95%;
	}				
	
/*利用例*/

.case ul {
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-ms-flex-wrap : wrap; 
	-webkit-flex-wrap : wrap;
	flex-wrap:wrap;
	position:relative;
	margin-bottom:15px;
	}
	
.case li {
	width:calc((100% - 60px * 2) / 3);
	margin-right:30px;
	margin-bottom:30px;
	background:#fc8e26;
	color:#fff;
	padding:10px;
	text-align:center;
	border-radius:2px;
	}
	
.case li:nth-child(3n) {
	margin-right:0;
	}		

.case ul p {
	position:absolute;
	right:0;
	bottom:-25px;
	}

/*#case_page #container {
	position:relative;
	}*/


/*
.menu ul {
	background:#ce181e;
	width:280px;
	position:absolute;
	right:0;
	}
	
.menu li {
	padding:0 15px;
	}	
	
.menu ul li a {
	display:block;
	color:#fff;
	padding:24px 0;
	border-bottom:1px solid #fff;
	margin:0 auto;
	}
	
.menu ul li:hover {
	background:#e60012;
	}			
	
.menu ul li:last-child a {
	border-bottom:none;
	}	
*/


/*実例集*/

.title {
	font-size:1.8rem;
	line-height:1.8;
	font-weight:bold;
	margin-bottom:15px;
	}


/*事例掲載の場合
#examples_page #container {
	background:#f2f2f2;
	
	margin:0;
	margin-bottom:72px;
	margin-bottom:200px;
	padding:48px 32px 48px 32px;
	}

.example {
	border-left:5px solid #e60012;
	margin-bottom:72px;
	background:#fff;
	padding:15px;
	}

.example:last-child {
	margin-bottom:0;
	}

.example a {
	color:#e60012;
	}
	
.example a:hover {
	text-decoration:underline;
	}	

.example dt {
	width:75px;
	font-weight:bold;
	float:left;
	}	
	
.example dt:nth-child(9) {
	float:none;
	}
*/

/*動画リンクなど掲載の場合*/



.example {
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-ms-flex-wrap : wrap; 
	-webkit-flex-wrap : wrap;
	flex-wrap:wrap;
	margin-bottom:30px;
	}
	
.example dl {
	width: calc((100% - 15px * 3) / 4);
	margin-right:15px;
	}	
	
.example dl a {
	display:block;
	width:100%;
	height:100%;
	transition-duration:.13s;
	}
	
.example dl a:hover {
	box-shadow: 0 5px 28px rgba(0,0,0,0.4);
	}		
	
.example dl:nth-child(4n) {
	margin-right:0;
	}
	
.example dt img {
	width:100%;
	}
	
.example dd {
	margin-top:10px;
	font-weight:bold;
	color:#030303;
	padding:0 10px 10px 10px;
	
	}			

.media {
	margin-top:5px;
	font-weight:normal;
	color:#5e5e5e;

	}

.example p {
	margin-bottom:0;
	}	
	
.example a:hover {
	text-decoration:none;
	}	
	
/*利用規約*/	

#rules_page .title {
	margin-bottom:72px;
	}
		
.rules {
	padding-left:32px;
	}
	
.rules dt {
	margin-bottom:15px;
	font-weight:bold;
	}

.rules dd {
	margin-bottom:72px;
	}
	
.rules li {
	margin-bottom:15px;
	}	
	
/*よくあるご質問*/	
	
.faq {
	margin-bottom:90px;
	}	
	
/*アンケート*/

.attention {
	font-weight:normal;
	}

.how_box {
	font-weight:normal;
	}
	
#sound_form_page #inquiry {
	margin-bottom:72px;
	}	

#sound_form_page #inquiry tr:nth-child(11) th {
	border-bottom:none;
	}
	
#sound_thanks_page #container {
	padding-bottom:300px;
	}
	
.thanks {
	max-width:750px;
	margin:0 auto;
	margin-top:72px;
	}
	
.thanks img {
	width:100%;
	}
	
/*サントラリンク*/

.link_sound_btn a {
	color: #fff;
    background: #e60012;
    display: block;
    text-align: center;
    padding: 10px 5px;
	border:2px solid #e60012;
	box-sizing:border-box;
	max-width:350px;
	margin:0 auto;
	transition-duration:.13s;
	border-radius:2px;
	}		
	
.use_sub {
	text-align:center;
	margin-top:18px;
	margin-bottom:10px;
	}
	
.link_sound_btn a:hover {
	color: #e60012;
    background: #fff;
	}

.link_sound a {
	position:fixed;
	right:20px;
	bottom:-10px;
	color: #fff;
    background: #e60012;
    display: block;
    text-align: center;
    padding: 10px 10px 20px 10px;
	box-sizing:border-box;
	transition:bottom .2s, background .2s, opacity .2s;
	/*width:270px;
	border-radius:15px 15px 0 0 ;*/
	z-index:2;
	/*font-size:13px;
	transform: skewX(-15deg);
	right:-20px;
	padding-right:40px;
	padding-left:20px;*/
	box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.2);
	
	bottom:20px;
	padding:10px;
	background:#fff;
	color:#5e5e5e;
	border:4px solid #e60012;
	box-sizing:border-box;
	}
	
.link_sound p {
	/*transform: skewX(15deg);*/
	}	
	
.link_sound a:hover {
	bottom:0;
	
	bottom:30px;
	}	

.link_sound a::after {
	content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: -15px;
    top: 50%;
	transform:translateY(-50%);
    border-left: 15px solid #e60012;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
	}

.use {
	font-weight: bold;
	margin-top:5px;
	color:#5e5e5e;
	background:#fff;
	padding:3px 10px 3px 3px;
	
	color:#fff;
	background:#e60012;
	font-weight:lighter;
	}
	
.use i {
  	position:relative;
  	display: inline-block;
  	vertical-align: middle;
  	line-height: 1;
  	position: relative;
  	width: 1em;
  	height: 0.1em;
}

.use i::before,
.use i::after {
	content:"";
	display:block;
	-webkit-transform:skewX(45deg);
	transform:skewX(45deg);
	position:absolute;
	right:-3px;
	bottom:-2px;
	}
	
.use i::before{
	width:12px;
	height:3px;
	background:#e60012;
	
	background:#fff;
}

.use i::after{
	width:4px;
	height:8px;
	background:#e60012;
	
	background:#fff;
}

	
	
	
@media screen and (min-width: 769px) and (max-width: 1136px) {	

.message h1 {
	font-size:1.93vw;
	}		
	
.message h2 {
	font-size:1.23vw;
	}
	
.title {
	font-size:1.5vw;
	}	
	
}

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

#container {
	margin:0 14px;
	}

#sound_use_page #container h2 {
	font-size:1.8rem;
	}

.sound_top {
	margin-top:40px;
	margin-bottom:50px;
	}
	
.sound li {
	width: 100%;
	margin-bottom:20px;
	margin-right:0;
	}		

.sound li a:hover {
	border:2px solid transparent;
	background:#ce181e;
	color:#fff;
	}

#container h4 {
	font-size:1.8rem;
	}

.rules {
	padding-left:14px;
	}
	
.title {
	font-size:1.6rem;
	}	
	
.copy {
	font-size:1.3rem;
	}	
	
.message {
	width:90%;
	}
	
.message h1 {
	padding:10% 3.5% 0;
	font-size:4vw;
	line-height:1.6;
	}	
	
.message h2 {
	padding:4% 3.5% 10%;
	font-size:3.73vw;
	}			
	
/*ご利用の流れ*/
	
.flow {
	padding:0;
	}	
	
.flow dl {
	width:100%;
	margin-right:0;
	margin-bottom:50px;
	}
	
.flow dl:last-child {
	margin-bottom:0;
	}						
	
.flow dl:nth-child(1):after {
	content:"";
	width:0px;
	display:block;
	border-top:30px solid #b4b4b4;
	border-right:30px solid transparent;
	border-left:30px solid transparent;
	position:absolute;
	right:0;
	left:0;
	top:calc(100% + 15px);
	margin:0 auto;
	transform:none;
	}				

.flow .title {
	font-size:1.6rem;
	}

/*利用例*/
	
.case ul {
	margin-bottom:20px;
	}	
	
.case li {
	width:100%;
	margin-right:0;
	margin-bottom:15px;
	}
	
.case ul p {
	bottom:-40px;
	}	
	
/*事例掲載の場合	
#examples_page #container {
	padding:48px 14px 48px 14px;
	}	

.example {
	margin-bottom:50px;
	}*/

/* 動画リンク掲載の場合*/
.example dl {
	width: calc((100% - 15px * 1) / 2);
	}

.example dl:nth-child(1),
.example dl:nth-child(2) {
	margin-bottom:50px;
	}

.example dl:nth-child(even) {
	margin-right:0;
	}

.example dl a:hover {
	box-shadow:none;
	}
	
/*サントラリンク*/	
	
.link_sound_btn a:hover {
	background:#e60012;
	color:#fff;
	}
	
.link_sound a {
	position:fixed;
	width:95%;
	padding-bottom:10px;
	bottom:0;
	/*right:0;
	left:0;
	margin:0 auto;
	transform: skewX(0deg);
	padding-right:10px;
	padding-left:10px;
	border-radius:15px 15px 0 0;*/
	
	/*width:98%;
	transform: skewX(-15deg);
	padding-right:25px;
	padding-left:15px;
	right:-18px;*/
	
	width:100%;
	right:0;
	left:0;
	margin:0 auto;
	/*transform: skewX(0deg);
	padding-right:10px;
	padding-left:10px;*/
	border-right:none;
	border-left:none;
	
	border-bottom:none;
	}
	
.link_sound p {
	/*transform: skewX(0deg);
	transform: skewX(15deg);*/
	}	
	
.link_sound a:hover {
	bottom:0;
	}	
	
.use span {
	margin-left:5px;
	}	
		
}