@charset "utf-8";
/* CSS Document */
/*=========================
その他法律相談LP
==========================*/
/*MVまわり*/
#paz_wrapper{
    margin-bottom:0 !important;
}
.toparea{
    background-image: url("../images/customer_contents/etc/mv_pc.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    height:36vw;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center; 
}
h1.etc_title{
    font-size: 3.9vw;
    text-align:center;
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Noto Serif Mincho", "HG明朝E", "ＭＳ 明朝", "ＭＳ Ｐ明朝",'Noto Serif JP',serif;
    color:#fff;
    line-height:1.5;
    text-shadow: 1px 1px 5px #808080;
    margin-top:-50px;
}
h1.etc_title span{
    display: block;
}
.title_sub{
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 1.8vw;
    background: linear-gradient(92.40260946898604deg, rgba(0, 173, 193,1) 20.552083333333332%,rgba(0, 172, 192,1) 20.552083333333332%,rgba(0, 155, 135,1) 80.13541666666667%);
    padding:10px 35px;
    color:#fff;
    text-align:center;
    display: inline-block;
    margin-bottom:30px;
}
ul.etc_toplist{
    display: table;
    border-spacing: 20px 0;
    border-collapse: separate;
    margin: -7% auto 0;
    margin-bottom:5vw;
    max-width:100%;
}
ul.etc_toplist li{
    margin:0 10px;
    display: table-cell;
}
ul.etc_toplist li a:hover{
    opacity: 0.8;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
}
ul.etc_toplist li a .pc{
    width: 100%;
}
ul.etc_toplist li a .sp{
    display:none;
    width: 100%;
}
@media screen and (max-width:768px){
.toparea{
    background-position: 5% 20%;
    height: 110vw;
    background-image: url("../images/customer_contents/etc/mv_sp.jpg");
}
h1.etc_title{
    font-size: 7.5vw;      
    }
.title_sub{
    font-size: 4vw;   
    }
ul.etc_toplist{
    margin: -100px auto 100px   
    }
.title_sub{
    padding: 10px 20px;    
    }
}
@media screen and (max-width:533px){
ul.etc_toplist li a .pc{
    display:none;
}
ul.etc_toplist li a .sp{
    display:flex;
}
ul.etc_toplist{
    margin: -60px auto 50px;   
    }
}
/*ページ内リンク*/
@media screen and (min-width:1024px){
    #performing,#financial,#claim{
    display: block;
    padding-top: 80px;
    margin-top: -80px;  
    }
}
/*CVエリア*/
.etc_cv{
    max-width:1200px;
    border:1px solid #00adc1;
    margin:0 auto;
    background:#fff;
}
.etc_cv.cv_first{
    margin-bottom:30px;
}
.etc_cvarea{
    padding:40px 170px;
}
.etc_cv .title{
    display: flex;
    align-items: center;
    font-size:18px;
    font-weight:bold;
    margin-bottom: -15px;
}
.etc_cv .title:before,.etc_cv .title:after{
    border-top: 1px solid #00adc1;
    content: "";
    flex-grow: 1;
}
.etc_cv .title:before {
    margin-right: 1rem;
}
.etc_cv .title:after {
    margin-left: 1rem;
}
.etc_cv .tel_under{
    margin-top:-10px;
}
.etc_cv ul.tel_under li{
    display:inline;
    border:1px solid #00adc1;
    padding:5px 28px;
    margin-right:10px;
    font-size:16px;
    color: #00adc1;
    font-weight:bold;
} 
.etc_cv .flex{
    display: -webkit-flex;
    display: flex;
}
.etc_cv a.tel{
    font-size:64px;
    color:#ce3c3c;
    font-weight:bold;
    pointer-events: none;
}
.etc_cv a.tel:before{
    content:url("../images/customer_contents/etc/tel.svg");
    display: inline-block;
    width: 30px;
    margin-right:5px;
}
.etc_cv a.tel.para:before{
    display: none;
}
.etc_cv a.mail{
    flex: 1;
    margin: 40px 0 0 20px;
    background: linear-gradient(92.40260946898604deg, rgba(0, 173, 193,1) 20.552083333333332%,rgba(0, 172, 192,1) 20.552083333333332%,rgba(0, 155, 135,1) 80.13541666666667%); 
    height: 80px;    
    line-height: 80px;
    text-align: center;
    color:#fff;
    font-size:20px;
    border:1px solid #00adc1;
}
.etc_cv a.mail:before{
    content:url("../images/customer_contents/etc/mail.svg");
    display: inline-block;
    width: 20px;
    margin-right:10px;
}
.etc_cv a.mail:hover{
    color:#00adc1;
    background:#fff;
    border:1px solid #00adc1;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;
}
.etc_cv a.mail:hover:before{
    content:url("../images/customer_contents/etc/mail_hover.svg");
}
@media screen and (max-width:1200px){
.etc_cv{
        margin:0 10px;
    }
.etc_cvarea{
        padding: 40px 80px;
    }
.etc_cv a.tel{
        font-size: 54px;
    }
.etc_cv a.mail{
        height: 60px;
        line-height: 60px;
    }   
.etc_cv ul.tel_under li{
        padding: 5px 18px;
        margin-right: 7px;
    } 
}
@media screen and (max-width:880px){
.etc_cvarea{
       padding: 30px 70px;     
    }
.etc_cv a.tel{
        font-size: 48px;
    }
.etc_cv ul.tel_under li{
        padding: 5px 13px;
        font-size: 15px;
    }
.etc_cv a.tel:before{
        width: 25px;
    }
.etc_cv a.mail{
        font-size: 15px;
        height: 50px;
        line-height: 50px;
        margin: 30px 0 0 15px; 
    }
.etc_cv a.mail:before{
        width: 18px;
    }
}
@media screen and (max-width:778px){
.etc_cv .title{
        font-size: 16px;
        margin-bottom:-10px;
    }
.etc_cvarea {
        padding: 30px 40px;
}
.etc_cv a.tel{
        font-size: 40px;
    }
.etc_cv ul.tel_under li{
        font-size: 12px;
        padding: 5px 12px
    }
.etc_cv a.tel:before{
        width: 20px;
    }
.etc_cv a.mail:before{
        width: 15px;
    }
}
@media screen and (max-width:630px){
.etc_cvarea{
        padding: 20px 30px;
    }
.etc_cv .flex{
        display:block;
    }
.etc_cv a.tel{
        text-align:center;
        display: block;
        font-size: 40px;
        pointer-events: auto;
    }
    .etc_cv a.tel.para{
        margin: 4% 0 3%;
    }
.etc_cv ul.tel_under{
        display: block;
        text-align:center;
        margin:-10px auto 15px;
}
.etc_cv ul.tel_under li{
        padding: 5px 10px;
        margin-right: 3px;
        font-size: 14px;
    }
.etc_cv a.mail{
        margin:0;
        display:block;
    }
}
@media screen and (max-width:450px){
.etc_cvarea{
        padding:15px;
    }
.etc_cv a.tel{
        font-size: 32px;
    }
.etc_cv ul.tel_under{
        margin-bottom:10px; 
    }
.etc_cv ul.tel_under li{
        padding: 3px 5px;
        font-size: 12px;
    }
.etc_cv a.tel:before{
        width: 15px;
    }
.etc_cv a.mail{
    height: 40px;
    line-height: 40px;
    }
ul.etc_toplist li:after{
    width: 20px;
    bottom: -10px;
    }
}
@media screen and (max-width:375px){
.etc_cv a.tel{
        font-size: 29px;
    }
.etc_cv .title{
        font-size: 14px;
    }
.etc_cv ul.tel_under li{
        font-size: 11px;
        margin-right: 1px;
        padding: 3px;
    }
ul.etc_toplist li:after{
    width: 20px;
    bottom: -15px;
    }
}
@media screen and (max-width:320px){
.etc_cv a.tel{
        font-size: 27px;
    }
.etc_cv a.mail{
        font-size: 13px;
    }
}
/*main*/
h2.etc_subtitle{
    display:block;
    background:#113a59;
    color:#fff;
    text-align:center;
    font-weight:bold;
    font-size:36px;
    padding:50px 0;
    position:relative;
    letter-spacing:2px;
}
h2.etc_subtitle:before{
    content:"Claim for damages";
    font-weight:normal;
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Noto Serif Mincho", "HG明朝E", "ＭＳ 明朝", "ＭＳ Ｐ明朝",'Noto Serif JP' ,serif;
    position:absolute;
    left: 0;
    right: 0;
    margin: 5px auto 0;
    font-size:90px;
    color: rgba(255,255,255,0.1);
    letter-spacing:1px;
}
h2.etc_subtitle.performing:before{
    content:"Performing arts trouble";
}
h2.etc_subtitle.financial:before{
    content:"Financial trouble";
}
/*背景*/
section.etc_content div.main{
    padding-bottom: calc(15vw + 3vw);  
    position: relative;
    overflow: hidden;
    background-color:#f2f8f9;
    min-height:100%;
}
section.etc_content div.main:before {
   content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 15vw solid #fff;
    border-left: 100vw solid transparent;
}
section.etc_content div.main:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 15vw solid #fff;
    border-right: 100vw solid transparent;
}
/*中身*/
section.etc_content div.content{
    max-width:1200px;
    min-height:400px;
    margin:0 auto;
    position:relative;
}
section.etc_content div.box{
    max-width:1200px;
    margin:0 auto;
}
section.etc_content div.content:after{
    content:url("../images/customer_contents/etc/badge.png");
    position: absolute;
    margin:0 auto;
    z-index:1;
    left:35%;
    top:-120px;
    }
section.etc_content p.main_word{
    background:rgba(255,255,255,0.95);
    padding:60px 40px;
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Noto Serif Mincho", "HG明朝E", "ＭＳ 明朝", "ＭＳ Ｐ明朝",'Noto Serif JP', serif;
    font-size:22px;
    font-weight:bold;
    max-width:100%;  
    text-align:center;
    line-height:2.3;
    letter-spacing:1px;
    position:absolute;
    z-index:3;
    top:150px;
}
section.etc_content p.main_word .ib{
    display:block;
}
section.etc_content .main_img{
    position:absolute;
    right:0;
    top:70px;
    z-index:2;
}
section.etc_content .main_img.financial{
    left:0; 
}
section.etc_content p.main_word.financial{
    right:0;
}
section.etc_content p.main_word span.red{
    color:#ce3c3c !important;
}
section.etc_content h3{
    display:block;
    font-size:32px;
    font-weight:bold;
    background:#00607c;
    padding: 20px 10px;
    text-align:center;
    color:#fff;
    margin:80px 0;
    letter-spacing:1.2px;
}
section.etc_content h3:first-child{
    margin-top: 0;
}
@media screen and (max-width:1200px){
section.etc_content div.content{
    margin: 0 20px;
    }
}
@media screen and (max-width:1024px){
section.etc_content h3{
    font-size: 26px;     
}
section.etc_content p.main_word{
    font-size: 20px;
    padding: 40px 20px;
    top: 200px;
    }    
section.etc_content .main_img{
    width:70%;
    }
section.etc_content div.content:after{
    left:30%;
    }
}
@media screen and (max-width:778px){
h2.etc_subtitle{
    font-size: 30px;
    padding: 35px 0;
    }
h2.etc_subtitle:before{
    font-size: 60px;
    margin: 15px auto 0;
}
section.etc_content h3{
    font-size: 20px;     
}
section.etc_content div.content{
    min-height: 380px;    
    }
section.etc_content .main_img{
    top: 30px;
    }
section.etc_content p.main_word{
    font-size: 17px;
    padding: 30px 15px;
    top: 150px;
    }
section.etc_content div.content:after{
    left:23%;
    }
}
@media screen and (max-width:630px){
h2.etc_subtitle{
    font-size: 24px;
    padding: 30px 0;
    }
h2.etc_subtitle:before{
    font-size: 50px;
    margin: 10px auto 0;
}
section.etc_content h3{
    font-size: 20px;
    margin:40px 0;
}
section.etc_content .main_img{
    width:100%;
    top:0;
    }
section.etc_content p.main_word{
    font-size: 4vw;
    padding: 5% 8%;
    left:0;
    margin:15% 20px 0;
    right:0;
    line-height: 2;
    text-align: left;
    }
section.etc_content p.main_word span.ib{
    display: inline;
    }
section.etc_content div.content {
    min-height: 85vw;
    margin:0;
}
section.etc_content div.content:after{
    display:none;
    }
}
@media screen and (max-width:414px){
h2.etc_subtitle{
    font-size: 22px;
    padding: 25px 0;
    }
h2.etc_subtitle:before{
    font-size: 40px;
    margin: 1% 10px 0;
}
section.etc_content h3{
    font-size: 16px;     
}
section.etc_content p.main_word{
    margin: 5% 10px 0;
    }
}
@media screen and (max-width:375px){
h2.etc_subtitle{
    font-size: 20px;
    padding: 20px 0;
    }
h2.etc_subtitle:before{
    font-size: 32px;
}  
}
/*main cv*/
section.etc_content .main_cv{
    background:#00607c;
    padding:80px 0;
    background-image:url("../images/customer_contents/etc/main_cv01.jpg");
    background-size:cover;
    margin-top:150px;
}
section.etc_content .main_cv.financial{
    background-image:url("../images/customer_contents/etc/main_cv02.jpg");
}
section.etc_content .main_cv.performing{
    background-image:url("../images/customer_contents/etc/main_cv03.jpg");
}
section.etc_content .main_cv .cv_word{
    text-align:center;
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Noto Serif Mincho", "HG明朝E", "ＭＳ 明朝", "ＭＳ Ｐ明朝",'Noto Serif JP', serif;
    line-height:1.6;
    margin-bottom:50px;
    color:#fff;
    font-size:38px;
    letter-spacing:1.2px;
    font-weight:bold;
}
section.etc_content .main_cv .cv_word span{
    display:block;
}
@media screen and (max-width:1024px){
section.etc_content .main_cv .cv_word{
    font-size: 30px;   
}
section.etc_content .main_cv{
    padding: 60px 0;   
    }
}
@media screen and (max-width:768px){
section.etc_content .main_cv .cv_word{
    font-size: 26px;   
}
section.etc_content .main_cv{
    padding: 50px 0;   
    }
}
@media screen and (max-width:630px){
section.etc_content .main_cv .cv_word{
    font-size: 4.2vw; 
}
section.etc_content .main_cv{
    margin-top:60px;  
    }
}
@media screen and (max-width:414px){
section.etc_content .main_cv .cv_word{
    font-size: 4.5vw;
    margin-bottom: 25px;
}
section.etc_content .main_cv .cv_word span{
    display:inline;
    }
section.etc_content .main_cv{
    padding: 30px 0;   
    }
}
@media screen and (max-width:320px){
section.etc_content .main_cv{
    padding: 25px 0;   
    }
}
/*損害賠償請求が発生する場合のケース*/
ul.case{
    display:flex;
    justify-content: center;
    margin:0 auto;
}
ul.case li{
    margin:0 20px;
}
ul.case li img{
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 630px){
ul.case li {
    margin: 0 10px;
}
}
/*損害賠償に関するお悩み*/
div.claim{
    margin:0 100px;
}
ul.case02 li{
    background: #f2f8f9;
    padding:35px 20px;
    margin-bottom:70px;
    font-size:28px;
    text-align:center;
    position:relative;
    line-height: 1.5;
}ul.case02 li:last-child{
    margin-bottom:20px;
}
ul.case02 li .red{
    color:#ce3c3c !important;
    font-weight:bold;
}
ul.case02 li:before{
    content: '';
    display: inline-block;
    width: 70px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    position:absolute;
    left:0;
    right:0;
    margin:-70px auto;
}
ul.case02 li:nth-child(1):before{
    background-image:url("../images/customer_contents/etc/number_01.svg");
}
ul.case02 li:nth-child(2):before{
    background-image:url("../images/customer_contents/etc/number_02.svg");
}
ul.case02 li:nth-child(3):before{
    background-image:url("../images/customer_contents/etc/number_03.svg");
}
.claim_bottom{
    text-align: right;
    font-size:24px;
    color: #00607c;
}
@media screen and (max-width: 1200px){
div.claim{
    margin: 0 20px;
}
}
@media screen and (max-width: 768px){
ul.case02 li{
    font-size:3.5vw;
    padding:25px 10px;
    margin-bottom:60px;
    }    
ul.case02 li:before{
    width: 9.5vw;
    height: 9.5vw;
    margin:-12% auto;
}
.claim_bottom{
    font-size: 3vw;    
    }
}
@media screen and (max-width: 630px){
ul.case02 li:nth-child(1){
    margin-top: 12vw;    
    } 
}
@media screen and (max-width: 470px){
ul.case02 li{
    margin-bottom: 30px;
    font-size:4.3vw;
    }
ul.case02 li:last-child {
    margin-bottom: 5px;
}
ul.case02 li span.ib{
    display:inline-block;
    }
}
/*金銭に関するトラブル例*/
ul.trouble{
    margin:0 auto;
    display: flex;
    justify-content: center;
}
ul.trouble li{
    margin:0 1vw;
}
ul.trouble li img{
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 768px){
    ul.trouble{
    flex-wrap: wrap;
    justify-content: center;
    }
ul.trouble li{
    margin:1vw;
}
ul.trouble li img{
    width: 44vw;
}
}
/*芸能活動でおこりうるトラブル例*/
.performing_flex{
    display: flex;
    background: #f2f8f9;
    margin-bottom:60px;
    position:relative;
    margin:0 7vw 60px;
}
.performing_flex img{
    width:45%;
    height: auto;
    object-fit: cover;
}
.performing_flex:nth-child(odd){
    flex-direction: row-reverse;
}
.performing_flex:before{
    position: absolute;
    content: '';
    display: inline-block;
    width: 55px;
    height: 55px;
    background-size: contain;
    top:-30px;
    left:-10px;
}
.performing_flex:nth-child(4):before{
    background-image: url("../images/customer_contents/etc/trouble03.svg");
}
.performing_flex:nth-child(2):before{
    background-image:  url("../images/customer_contents/etc/trouble01.svg");
}
.performing_flex:nth-child(3):before{
    background-image:  url("../images/customer_contents/etc/trouble02.svg");
}
.performing_box{
    padding:40px 10px;   
}
h4{
    font-weight: bold;
    font-size:26px;
    margin-bottom:20px;
    text-align:center;
}
ul.performing li{
    font-size:20px;
    padding: 0 2vw;
}
ul.performing li:before{
    background-image: url("../images/customer_contents/etc/performing_list.svg");
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-size: contain; 
    margin:10px 5px 0;
}
ul.performing li .red{
    color: #ce3c3c !important;
    font-weight:bold;
}
@media screen and (max-width: 768px){
.performing_flex{
    display:block;
    margin: 30px 20px 40px;
    }
.performing_flex img{
    width: 100%;
    max-width: 100%;
    height: 40vw;
    } 
.performing_box{
    padding: 20px 10px 40px;    
    }
h4{ 
    font-size: 3.2vw;
    margin-bottom: 2.8vw;
    }
ul.performing li{
    font-size:2.8vw;
    padding: 0 3vw;
    }  
}
@media screen and (max-width: 414px){
h4{ 
    font-size: 4.6vw;
    margin-bottom: 2vw;
    }
ul.performing li{
    font-size:4.3vw;
    padding: 0 2vw;
    }
ul.performing li:before{
    width: 10px;
    height: 10px;    
    }
}