@charset "utf-8";

.sp_none{
    display: block;
}
.pc_none{
    display: none;
}
main{
    width: 100%;
    margin: 0 auto;
}

.mainvisual{
    max-width: 1200px;
    width: 100%;
    height: 40rem;
    margin: 0 auto 50px;
    position: relative;
    background: url(/sllu/trouble_tv/img/main.png) no-repeat center bottom;
}
.mainvisual .teokure{
    width: 19%;
    position: absolute;
    top: 29px;
    right: 38px;
}
.mainvisual h1{
    /**width: 270px;**/
    width: 400px;
    position: absolute;
    bottom: 17px;
    left: 26px;
}
/**h2{
    margin: 2em auto 1em;
    padding: 0 0 0 1em;
    width: 97%;
    font-family: 新ゴ M;
    font-size: 2.5rem;
    border-left: solid 4px #000;
    line-height: 1em;
}**/

/** sec01 lead **/
.sec01{
	max-width: 1200px;
	margin: 0 auto 80px;
}
.sec01 ul{
    font-family: ヒラギノ角ゴ W4 JIS2004;
	margin: 0 auto 50px;
	max-width: 1200px;
	width: 100%;
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.sec01 ul li:first-child{
	font-size: 18px;
	line-height: 1.7em;
	text-align: left;
}
.sec01 ul li:last-child{
	display: block;
	width: 25%;
    margin-left: 5%;
}
.sec01 ul li img{
	max-width: 428px;
	width: 100%;
	box-shadow: 15px 15px 0px rgb(233, 233, 233); 
}
.sec01 ul li p{
	margin-bottom: 1em
}
/** sec01 lead ここまで **/



ul.menu{
    margin: 0 auto 1em;
    line-height: 1.5em;
    width: 85%;
    border: solid 2px #4CA3D4;
    padding: 2rem 3rem;
    border-radius: 10px;
    font-family: 新ゴ R;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
ul.menu li{
    font-size: 1.5rem;
    margin: 0 0 1rem 0;
    border-bottom: dashed 1px #CFCFCF;
    padding: 0 0 1.3rem 1em;
    width: 48%;
}
ul.menu li::before{
    content: "・";
    margin-left: -1em;
}
/**ul.menu li a{
    display: block;
}**/
ul.menu li:nth-child(1){
    color: #4CA3D4;
    border-bottom: solid 1px #4CA3D4;
    padding: 0 0 1rem 1.5em;
    margin-bottom: 2rem;
    font-family: 新ゴ DB;
    font-size: 1.1em;
    width: 100%;
}
ul.menu li:nth-child(1)::before{
    content: "■";
    padding-right: 0.5em;
}
/**ul.menu li:last-child{
    border-bottom: none;
    padding-bottom: 0;
}**/
.notes{
    width: 85%;
    font-size: 1.3rem;
    font-family: 新ゴ R;
    margin: 0 auto 4em;
    line-height: 1.5em;
    padding-left: 1em;
}
.notes::before{
    content: "※";
    margin-left: -1em;
}


/** sec01 **/
.sec02{
	max-width: 1200px;
	margin: 0 auto 95px;
}
.trouble{
    margin: 0 auto;
    padding: 5rem;
    background-color: #fff;
}
.trouble:nth-child(2n){
    background-color: #f4f4f4;
}
.trouble h2{
    width: 100%;
    font-family: 新ゴ M;
    font-size: 1.8rem;
    margin: 0 0 2rem;
}
.trouble .worries{
    font-family: 新ゴ M;
    padding: 1rem 0 1rem 1em;
    background-color:#4E4E4E;
    color: #fff;
}
.trouble .worries p{
    font-family: 新ゴ R;
    font-size: 1.2rem;
    padding: 0;
    margin: 0 0 0 2em;
    display: inline-block;
}
.accordion{
    font-family: 新ゴ R;
    border-bottom: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #999;
    background-color: #FFF;
    display: flex;
    flex-direction: column;
}
.accordion dl{
    display: none;
    width: 95%;
    margin-left: 5%;
    border-left: solid 1px #999;
}
.accordion dl.q2{
    border-left: none;
}
.accordion dt,
.accordion span{
    width: 100%;
    padding: 1rem 0 1rem 1em;
}
.accordion span {
    cursor: pointer;
    display: block;
    position: relative;
    border-top: solid 1px #999;
}
.accordion span:hover,
.accordion span:active,
.content-entry.open .accordion span {
  background-color: #CDDAFD;
  color: black;
}
.accordion span:hover i:before,
.accordion span:hover i:active,
.content-entry.open i {
  color: black;
}
.accordion span{
  position: relative;
}
.accordion span:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 10px;
  height: 10px;
  border-top: solid 2px #777;
  border-right: solid 2px #777;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.accordion span.open:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 45%;
    border-top: solid 2px #FF8E00;
    border-right: solid 2px #FF8E00;
}
.accordion dt.worries{
    border-left: solid 1px #4E4E4E;
}
.accordion dd{
    width: 100%;
    border-top: solid 1px #999;
}
.accordion dl.q2 dd{
    border-top: none;
    padding: 1rem 1em 0;
}
.accordion dl.q2 dd.m_double{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.accordion dl dd span{
    border-top: none;
}
.accordion dl dd.textb{
    padding-bottom: 2rem;
}
.accordion dd dl,
.accordion dd dl dd{
    border: none;
}
.accordion dd dl dd{
    margin: 0 auto;
    padding: 1rem 1em 0 0;
}
.accordion dd .movieSpace{
    font-size: 1.3rem;
    text-align: right;
    max-width: 470px;
    width: 35vw;
    display: block;
    margin: 0 auto 2rem;
}


/** sec01 ここまで **/

/** induction 店舗ボタン **/
.induction{
	max-width: 700px;
	margin: 0 auto 70px;
}
.induction p:nth-of-type(1){
    padding-left: 60px!important;
}
/** induction 店舗ボタン ここまで **/

/** support サポート紹介ボタン **/
.support{
	max-width: 700px;
	width: 100%;
	margin: 0 auto 120px;
    padding: 0 20px 0;
}
/** support サポート紹介ボタン ここまで **/



/* ～900px */
@media screen and (max-width: 900px){
/**h1{
	margin: 0 auto 60px;
	height: 40rem;
}**/
.sec01{
	margin: 0 auto 50px;
}
}
/* ～900px ここまで */


/* ～750px */
@media screen and (max-width: 750px){
.sp_none{
    display: none;
}
.pc_none{
    display: block;
}
.mainvisual{
    height: 42vw;
    margin: 0 auto 40px;
    position: relative;
    background: url(/sllu/trouble_tv/img/main.png) no-repeat center bottom;
    background-size: cover;
}
.mainvisual .teokure{
    width: 21%;
    top: 13px;
    right: 9px;
}
.mainvisual h1{
    /**width: 30%;**/
    width: 40%;
    bottom: 10px;
    left: 14px;
}

.sec01 ul{
	margin: 0 auto 20px;
}
.sec01 ul li:first-child{
	font-size: 1.4rem;
}
.sec01 ul li img{
    box-shadow: 10px 10px 0px rgb(233, 233, 233);        
}


ul.menu{
    margin: 0 auto 2em;
    line-height: 1.5em;
    width: 95%;
    padding: 0 1rem;
    border: none;
}
ul.menu li{
    padding-bottom: 1rem;
    font-size: 1.3rem;
}
.notes{
    width: 90%;
    margin: 0 auto;
}
.trouble h2{
    font-size: 1.5rem;
    margin: 0 0 1rem;
}
.trouble .worries p{
    margin: 0 0 0 1em;
}

.induction{
	margin: 0 auto 50px;
}
.induction p:nth-of-type(1){
	text-align: center;
    padding-left: 0!important;
}
.support{
	margin: 0 auto 60px;
}
}
/* ～750px ここまで */


/* ～700px */
@media screen and (max-width: 700px) {

}
/* ～700px ここまで */


/* ～600px */
@media screen and (max-width: 600px) {
/**h1{
	height: 30rem;
}**/
}
/* ～600px ここまで */




/* ～480px */
@media screen and (max-width: 480px) {
/**h1{
    height: 21rem;
    margin: 0 auto 30px;
}**/
.mainvisual{
    height: 21rem;
    margin: 0 auto 25px;
}
.mainvisual .teokure{
    width: 25%;
    top: 10px;
    right: 7px;
}
.mainvisual h1{
    /**width: 34%;**/
    width: 50%;
    /**bottom: 6px;**/
    bottom: 9px;
    left: 15px;
}
ul.menu{
    margin: 0 auto 2em;
}
ul.menu li{
    font-size: 1.1rem;
    padding: 1rem 0 1rem 1em;
    width: 47%;
    margin: 0;
}
ul.menu li:nth-child(1) {
    padding: 0 0 0.5rem 1.5em;
    margin-bottom: 1rem;
}
.notes{
    width: 90%;
    margin: 0 auto 3em;
    font-size: 1.1rem;
}
.sec01 ul{
    font-family: ヒラギノ角ゴ W5 JIS2004;
}
.sec01 ul li:first-child{
	font-size: 1.5rem;
	line-height: 1.5em;
	text-align: center;
	}

.sec01 ul li:last-child{
	display: none;
}
.sec01 ul li p{
	margin-bottom: 1em;
}
.trouble{
    padding: 2.5rem 2rem;
}
.trouble h2{
    font-size: 1.3rem;
}
.trouble .worries{
    padding: 1rem 0 1rem 1rem;
}
.trouble .worries,
.accordion{
    font-family: 新ゴ R;
}
.accordion dl dd.textb{
    padding-bottom: 1rem;
}

.accordion dd .movieSpace{
    font-size: 1.1rem;
    line-height: 1.6em;
    width: 60%;
    margin: 0 auto 1rem;
}
.accordion dd dl dd{
    margin: 0 auto;
    padding: 1rem 1em 0 0;
}
.accordion dl.q2 dd{
    padding: 1rem 1em 0;
}
.accordion dl.q2 dd.textb{
    padding: 1rem 1em;
}
.accordion dl.q2 dd.m_double{
    display: flex;
    flex-wrap: wrap;
}
.trouble .worries p{
    font-size: 1.1rem;
}

}
/* ～480px ここまで */


@media print{
}