/* ヘッダー二段デザイン用カスタマイズ
   2021.09.21 SONY用CSS 他に流用しないでください */

html#SMP_STYLE body h1.header span:first-child{
  display:block;
  max-width:1440px;
  width:100%;
  margin:0 auto;
  background-color:#000;
  line-height:65px;
  padding-left:25px;
  text-align:left;
}

html#SMP_STYLE body h1.header span:last-child{
/*  max-width:900px;
  background: #000; */
  max-width:initial;
  width:100%;
  background:#fff;
  margin:0 auto;
  line-height:34px;
  font-weight:normal;
  display:block;
  font-size:min(20px,2vw);
  padding:0;
}

html#SMP_STYLE body h1.header img{
  max-width:900px;
  height:auto;
  vertical-align:middle;
}

html#SMP_STYLE body h1.header span:last-child img{
  width:100%;
  vertical-align:bottom;
}

footer#footer{
margin-top: 0;
border-top: none;
background: #000;
}
div#footer-global {
padding: 7px 10px 1px 10px;
margin:0 auto;
max-width:1440px;
width:100%;
text-align:left;
}

footer#footer address{
margin-bottom: 20px;
font-style: normal;
line-height: 1.4;
font-size: 10px !important;
color: #adadad !important;
}

@media screen and (max-width: 768px){
  html#SMP_STYLE body h1.header span:first-child{
  line-height:65px;
  }

  html#SMP_STYLE body h1.header span:last-child{
    font-weight:normal;
    display:block;
    font-size:4.8vw;
    line-height:5vw;
    padding:0;
  }
}



/* --------------- color grayscale --------------- */

html#SMP_STYLE body.body div.body_tbl{
  background-color:#f1f1f1;
}

html#SMP_STYLE body h1.header{
  background-color:#000;
}

ul#step li{
  background-color:#8f7c2c;
}

ul#step li:before{
  border-left-color:#f1f1f1;
}

ul#step li:after{
  border-left-color:#8f7c2c;
}

ul#step li.current{
  background-color:#4e2602;
}

ul#step li.current:after{
  border-left-color:#4e2602;
}

html#SMP_STYLE input.submit,
a.btn{
  background:linear-gradient(to right, #3744bb 0%, #9777ff 100%);
}

a.btn.gray{
  background:#333;
  border:2px solid #333;
}

html#SMP_STYLE body.body input.submit[value*="戻る"],
html#SMP_STYLE body.body a.btn.return {
  color:#666;
  background:#eee !important;
  border:2px solid #666;
}

div.footer{
  background-color:#000;
  color:#fff;
}

div.footer a{
  color:#fff;
}





html#SMP_STYLE body.body div.smp_tmpl .sub_text{
padding:2em 10px;
}


/* Fan Sync用 */

html#SMP_STYLE body.body a.youtube{
  display:block;
  color:#2F36D7;
  line-height:2.5em;
  height:2.5em;
  background:#CCF6FF;
  font-size:20px;
  text-decoration:none;
}
html#SMP_STYLE body.body a.youtube:after{
  content:"";
  display:inline-block;
  width:0.6em;
  height:1em;
  background:url("ext.svg") center center no-repeat;
  background-size:contain;
  margin-left:0.5em;
}
html#SMP_STYLE body.body div.smp_tmpl dl.cf dd.data .input[type="text"],
html#SMP_STYLE body.body div.smp_tmpl dl.cf dd.data .input[type="email"],
html#SMP_STYLE body.body div.smp_tmpl dl.cf dd.data textarea{
  border:1px solid #717171;
  background:#fff;
  padding:0.75em;
}

html#SMP_STYLE body.body div.smp_tmpl dl.cf dd.data select{
  border:1px solid #717171;
  background:none;
  background-color:#fff;
  color:#717171;
  height:2.7em;
  border-radius:0.2em;
  padding:0.6em;
  font-size:16px;
}
html#SMP_STYLE body.body div.body_tbl{ background:#fff !important; }
html#SMP_STYLE body.body img{ width:auto; height:auto; max-width:100%; vertical-align:bottom; }
html#SMP_STYLE body.body h2:first-of-type{ margin:0; padding:0; }

html#SMP_STYLE body.body .wrapper{ max-width:1440px; width:100%; margin:0 auto; }
html#SMP_STYLE body.body .wrapper.bg{
  background-image:url(card_pc.svg),url("bg.jpg");
  background-repeat:no-repeat,no-repeat;
  background-position:top left, center center;
  background-size:40% auto,100% 100%;
  padding-top:60px;
  padding-bottom:60px;
}
html#SMP_STYLE body.body .headline{ background:linear-gradient(to right, #3744bb 0%, #9777ff 100%); color:#fff; font-weight:bold; line-height:1.2; padding:0.5em; text-align:center; font-size:150%; margin-bottom:0.25em; }

html#SMP_STYLE body.body h2:first-of-type + a + .headline{
  font-size:200%;
  padding:0.75em 0;
}

html#SMP_STYLE body.body .wrapper .step ul,
html#SMP_STYLE body.body .wrapper .step ul li{
  list-style:none outside;
}
html#SMP_STYLE body.body .wrapper .step ul{
  display:flex;
  justify-content:space-between;
  padding:0 0 60px 0;
  width:90%;
  max-width:960px;
  margin :0 auto;
}
html#SMP_STYLE body.body .wrapper .step ul li{
  flex:1.05;
  color:#fff;
  position:relative;
  text-align:center;
  padding-left:7%;
}
html#SMP_STYLE body.body .wrapper .step ul li:before{
  content:"";
  display:block;
  width:10%;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  border-right:min(4px,0.4vw) solid #fff;
  transform: skewX(-20deg);
}

html#SMP_STYLE body.body .wrapper .step ul li:first-of-type{
  flex:0.85;
  padding-left:0;
}
html#SMP_STYLE body.body .wrapper .step ul li:nth-of-type(2){
  flex:1.1;
}
html#SMP_STYLE body.body .wrapper .step ul li:first-of-type:before{
  content:none;
}
html#SMP_STYLE body.body .wrapper .step ul li img{
  width:min(100px,9.6vw);
  height:auto;
  display:block;
  float:left;
  margin-right:min(5px,0.4vw);
}
html#SMP_STYLE body.body .wrapper .step ul li span,
html#SMP_STYLE body.body .wrapper .step ul li strong{
  display:block;
  text-shadow:0 2px 2px #2F36D7;
}
html#SMP_STYLE body.body .wrapper .step ul li span:first-of-type{
  width:min(100px,9.6vw);
  font-size:min(16px,1.6vw);
  font-weight:bold;
}
html#SMP_STYLE body.body .wrapper .step ul li span:last-of-type{
  font-size:min(14px,1.3vw);
}
html#SMP_STYLE body.body .wrapper .step ul li strong{
  font-size:min(20px,2vw);
  font-weight:bold;
  line-height:1.3;
  margin-bottom:0.25em;
}
html#SMP_STYLE body.body .wrapper .step ul li:first-of-type strong,
html#SMP_STYLE body.body .wrapper .step ul li:last-of-type strong{
  margin-top:0.5em;
}

html#SMP_STYLE body.body .wrapper div.form_area{
  background:#fff;
  max-width:1200px;
  width:90%;
  margin:0 auto;
  border-radius:20px;
  padding:50px 0;
  clear:both;
}

html#SMP_STYLE body.body p.header_emesg,
html#SMP_STYLE body.body p.header_rmesg,
html#SMP_STYLE body.body div.smp_tmpl{
  margin-left: auto;
  margin-right:auto;
  max-width: 960px;
  width:90%;
  padding-left:0;
  padding-right:0;
}
html#SMP_STYLE body.body p.txt-l{
  margin-top:4em;
  text-align:left;
  font-size:min(16px,1.6vw);
}

html#SMP_STYLE body.body div.form_area p.header_rmesg span{
  display:block;
  color:#2F36D7;
  font-size:min(20px,1.87vw);
  text-align:center;
}

html#SMP_STYLE body.body div.smp_tmpl dl.cf{
  border:none;
  padding:0;
}

html#SMP_STYLE body.body div.smp_tmpl h3.headline{
  text-align:left;
  padding:0.75em 0 0.65em 0.75em;
  margin:0;
}
html#SMP_STYLE body.body div.smp_tmpl h3.headline.first-head{
  margin-top:2em;
}

html#SMP_STYLE body.body div.smp_tmpl dl.cf dt.title{
  width:280px;
  font-size:16px;
  line-height:1.5;
  overflow-wrap:break-word;
  font-weight:normal;
  padding-left:0.5em;
}
html#SMP_STYLE body.body div.smp_tmpl dl.cf dd.data{
  width:calc(100% - 280px);
  font-size:16px;
  overflow-wrap:break-word;
}

html#SMP_STYLE body.body .notice_box{
  padding:1em;
  border:1px solid #E4E4E4;
  font-size:min(16px,1.6vw);
  text-align:left;
  height:11em;
  overflow-y:auto;
}

html#SMP_STYLE body.body .notice_box h2{
  padding:0;
  margin:0;
}
html#SMP_STYLE body.body .notice_box h3{
  padding:0;
  margin:2em 0 0 0;
}
html#SMP_STYLE body.body .notice_box ol{
padding-inline-start: 1.5em;
margin-block-start: 0.5em;
}
html#SMP_STYLE body .notice_box p{
  margin:0.5em 0 0 0;
}
html#SMP_STYLE body .notice_box p.indent{
  padding:0 0 0 1em;
}
html#SMP_STYLE body .notice_box p.indent > span:first-of-type{
  display:inline-block;
  margin-left:-1em;
}
html#SMP_STYLE body.body #button-wrap,
html#SMP_STYLE body.body .end-txt{
  font-size:14px;
}
html#SMP_STYLE body.body .end-txt{
  margin:0;
}
html#SMP_STYLE body.body #button-wrap label span{
  font-size:85%;
}

html#SMP_STYLE body.body label{
  display:block;
}
html#SMP_STYLE body.body label.switch_label{
  border:1px solid #2F36D7;
  text-align:left;
  padding:0.75em 0 0.65em 0.75em;
  color:#2F36D7;
  font-size:150%;
  margin-bottom:2em;
}

html#SMP_STYLE body.body input.switch_check,
html#SMP_STYLE body.body input#check{
  float:left;
  pointer-events:none;
  opacity:0;
  margin-left:-1em;
}

html#SMP_STYLE body.body .box{
  transition:max-height 0.3s ease-in-out;
}
html#SMP_STYLE body.body input.switch_check + label + .box{
  max-height:0;
  overflow:hidden;
}

html#SMP_STYLE body.body input.switch_check + h3 + .box{
  max-height:4em;
  overflow:hidden;
  position:relative;
  margin-bottom:2em;
}
html#SMP_STYLE body.body input.switch_check + h3 + .box:after{
  content:"";
  z-index:999;
  display:block;
  position:absolute;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,100) 100%);
  width:100%;
  top:0;
  left:0;
  bottom:0;
  right:0;
}
html#SMP_STYLE body.body input.switch_check:checked + h3 + .box:after{
  content:none;
}
html#SMP_STYLE body.body input.switch_check:checked + label + .box{
  max-height:300vh;
  overflow:hidden;
  margin-bottom:1em;
}
html#SMP_STYLE body.body input.switch_check:checked + h3 + .box{
  max-height:100vh;
  overflow:hidden;
  margin-bottom:1em;
}

html#SMP_STYLE body.body input.switch_check + label:after,
html#SMP_STYLE body.body input.switch_check + h3 > label:after{
  content:"+";
  display:inline-block;
  float:right;
  margin-right:1em;
}

html#SMP_STYLE body.body input.switch_check:checked + label:after,
html#SMP_STYLE body.body input.switch_check:checked + h3 > label:after{
  content:"-";
}


html#SMP_STYLE body.body input#check + label:before{
  content:"";
  display:inline-block;
  width:0.9em;
  height:0.9em;
  background:#ccc;
  border-radius:0.2em;
  border:1px solid #999;
  vertical-align:middle;
  line-height:1em;
  color:#fff;
}
html#SMP_STYLE body.body input#check:checked + label:before{
  background:#2F36D7;
  border:1px solid #2F36D7;
  content:"\02714";
}

html#SMP_STYLE body.body input + label + input.submit{
  background:#ccc;
  pointer-events:none;
}
html#SMP_STYLE body.body input#check:checked + label + input.submit{
  background:linear-gradient(to right, #3744bb 0%, #9777ff 100%);
  pointer-events:auto;
}





@media screen and (max-width: 768px){
  html#SMP_STYLE body.body .wrapper.bg{
    background-image:url(card_sp.svg),url("bg.jpg");
    background-size:100% auto,100% 100%;
    padding:1em 0 4em 0;
  }
  html#SMP_STYLE body.body .headline,
  html#SMP_STYLE body.body label.switch_label{ font-size:4vw; }
  html#SMP_STYLE body.body h2:first-of-type + a + .headline{
    font-size:3.6vw;
    padding:1em 0;
  }
  
  html#SMP_STYLE body.body .wrapper .step ul,
  html#SMP_STYLE body.body .wrapper .step ul li{
    display:block;
  }
  html#SMP_STYLE body.body .wrapper .step ul{
    padding:2em 0 2.5em 0;
  }
  html#SMP_STYLE body.body .wrapper .step ul:after{
    content:"";
    clear:both;
    height:0;
    display:block;
  }
  html#SMP_STYLE body.body .wrapper .step ul li{
    padding:0;
    clear:both;
    text-align:left;
  }
  html#SMP_STYLE body.body .wrapper .step ul li:before{
    content:none;
  }
  html#SMP_STYLE body.body .wrapper .step ul li img{
    width:25%;
    margin-right:1em;
    margin-bottom:1em;
  }

  html#SMP_STYLE body.body .wrapper .step ul li span{
    text-shadow:0 0.15em 0.1em #2F36D7;
}
  html#SMP_STYLE body.body .wrapper .step ul li strong{
    text-shadow:0 0.1em 0.1em #2F36D7;
}

  html#SMP_STYLE body.body .wrapper .step ul li span:first-of-type,
  html#SMP_STYLE body.body .wrapper .step ul li strong{
    display:inline-block;
    width:auto;
    margin-top:0;
  }
  html#SMP_STYLE body.body .wrapper .step ul li span:first-of-type{
    margin-right:1em;
    font-size:3.5vw;
  }
  html#SMP_STYLE body.body .wrapper .step ul li strong{
    margin-top:0;
    font-size:4.4vw;
  }
  html#SMP_STYLE body.body .wrapper .step ul li:first-of-type strong{
    margin-top:0.75em;
  }
  html#SMP_STYLE body.body .wrapper .step ul li:last-of-type strong{
    margin-top:0;
  }
  html#SMP_STYLE body.body .wrapper .step ul li span:last-of-type{
    margin-top:0.5em;
    font-size:3.5vw;
  }
  html#SMP_STYLE body.body .wrapper div.form_area{
    padding:1em 0 0.1em 0;
    border-radius:5.5vw;
  }
  html#SMP_STYLE body.body div.smp_tmpl dl.cf dt.title,
  html#SMP_STYLE body.body div.smp_tmpl dl.cf dd.data{
    width:100%;
    padding-right:0;
    padding-left:0;
    font-size:4vw;
  }
  html#SMP_STYLE body.body div.smp_tmpl dl.cf dd.data select{
    font-size:4vw;
    width:100%;
  }
  html#SMP_STYLE body.body p.header_emesg,
  html#SMP_STYLE body.body p.header_rmesg,
  html#SMP_STYLE body.body div.smp_tmpl{
    width:92%;
    font-size:4vw;
  }
  html#SMP_STYLE body.body div.form_area p.header_rmesg span{
    font-size:4.5vw;
  }
  html#SMP_STYLE body.body p.txt-l,
  html#SMP_STYLE body.body #button-wrap,
  html#SMP_STYLE body.body .end-txt{
    font-size:3.6vw;
    line-height:1.75;
  }
  html#SMP_STYLE body.body .notice_box{
    font-size:3.3vw;
    line-height:1.75;
  }
  html#SMP_STYLE body.body .notice_box h2{
    font-size:125%;
  }
  html#SMP_STYLE body.body .notice_box h3{
    font-size:113%;
  }
  html#SMP_STYLE body.body .notice_box a{
    word-break:break-all;
  }
  html#SMP_STYLE body.body input.switch_check + h3 + .box{
    max-height:5em;
    margin-bottom:2em;
  }
  html#SMP_STYLE body.body .end-txt{
    margin-top:1em;
  }
}

html#SMP_STYLE body.body .mb0{margin-bottom:0;}
html#SMP_STYLE body.body .mt0{margin-top:0;}