@charset "utf-8";
/* CSS Document */

#howto img {
  margin: 0px;
  padding: 0px;
  max-width: 100%;
  height: auto;
  width /***/ : auto;
}
/*共通*/
#howto .flex {
  -js-display: flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#howto .small-only {
 display: none;
}
/***-------------------PC first---------------------*/
/*ユーザーエージェント出し分け用*/
.iphone  #howto .android_show, .iphone #howto .pc_show {display:none;}
.android #howto .iphone_show, .android #howto .pc_show {display:none;}
.pc #howto .iphone_show, .pc #howto .android_show {display:none;}
.pc #howto .visible .iphone_show, .pc #howto .visible .android_show {display:block;}
/*ご利用方法*/
#howto {
 padding: 95px 0 80px;
 background: #dedede;
  color: #202730;
font-family: "AxisStd-Light";
}
#howto .howto_inner {
 width: 980px;
 margin: auto;
}
#howto h2 {
 color: #1d242e;
 font-size: 3.2rem;
 text-align: center;
}
#howto .tab-list--gray {
 background: #dedede;
}
#howto .tab .nav-tabs li {
 background-color: #677d9a;
 color: #fff;
}
#howto .tab .nav-tabs li.active {
 background-color: #fff;
}
#howto .tab .tab-content.wrapper {
 padding: 30px 30px 100px;
}
#howto h4 {
 margin-top: 30px;
 color: #677d9a;
font-family: "AxisStd-Medium";
 font-size: 2.4rem;
 text-align: center;
}
#howto .step_flow-1 {
 margin-top: 50px;
 display: flex;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 text-align: center;
}
#howto .step_flow-1 li {
 position: relative;
 width: 23%;
 padding: 60px 10px;
 background: #dce5f1;
 color: #677d9a;
 font-size: 2.2rem;
font-family: "AxisStd-Medium";
 line-height: 140%;
}
#howto .step_flow-1 li p {
 position: relative;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
}
#howto .step_flow-1 li::before {
 position: absolute;
 display: block;
 content: '1';
 top: 0;
 left: 0;
 width: 42px;
 height: 42px;
 padding: 7px 12px;
 background-color: #677d9a;
 color: #fff;
 font-size: 2.4rem;
font-family: "AxisStd-Medium";
}
#howto .step_flow-1 li:nth-of-type(2)::before {
 content: '2';
}
#howto .step_flow-1 li:nth-of-type(3)::before {
 content: '3';
}
#howto .step_flow-1 li:nth-of-type(4)::before {
 content: '4';
}
#howto .step_flow-1 li:nth-of-type(n+2)::after {
 position: absolute;
 display: block;
 content: '〉〉〉';
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 left: -29px;
 width: 25px;
 letter-spacing: -30px;
 color: #677d9a;
 font-size: 3.6rem;
 font-family: "AxisStd-Light";
}
.step_ttl_wrap {
 margin-top: 80px;
 position: relative;
 padding-left: 50px;
}
.number {
 position: absolute;
 padding: 2px 12px;
 display: inline-block;
 background-color: #677d9a;
 font-size: 2.0rem;
font-family: "AxisStd-Medium";
 color: #fff;
 left: 0;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}
.step_ttl {
 font-size: 2.4rem;
 color: #677d9a;
font-family: "AxisStd-Regular";
}
.step_tx {
 margin-top: 15px;
 font-size: 1.7rem;
}
.step-1_plan {
 margin-top: 20px;
 padding: 10px 15px 15px;
background-color: #dce5f1;
 font-size: 1.5rem;
}
.step-1_plan dt {
 color: #677d9a;
font-family: "AxisStd-Medium";
}
.step-1_plan dd {
 margin-top: 5px;
 line-height: 120%;
}
.step-1_plan dd span {
 font-family: "AxisStd-Regular";
}
.step-1_btn {
 display: -webkit-flex;
 display: flex;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 max-width: 700px;
 width: 100%;
 margin: 25px auto 0;
}
.step-1_btn li {
 width: 48%;
 text-align: center;
}
.step-1_btn li a {
 display: block;
 padding: 15px 10px;
 border: 2px solid #677d9a;
 font-size: 1.7rem;
 color: #677d9a;
 font-family: "AxisStd-Regular";
}
.threeType {
 flex-wrap: wrap;
 max-width: 90%;
 -webkit-justify-content: space-around;
 justify-content: space-around;
}
.threeType li {
 width: 48%;
}
.threeType li:last-child {
	margin-top: 25px;
}
.plan_box {
 margin-top: 60px;
 padding: 50px 15px 40px;
 background-color: #dedede;
}
.step-1_entry {
 width: 100%;
 margin: 0 auto 0;
 text-align: center;
}
.step-1_entry .tx_1 {
 font-size: 2.4rem;
 color: #677d9a;
 font-family: "AxisStd-Regular";
 line-height: 120%;
}
.step-1_entry .tx_1 span {
 font-size: 1.8rem;
}
.step-1_entry .tx_2 {
 font-size: 4.5rem;
 font-family: "AxisStd-Medium";
 letter-spacing: -1.5px;
}
.step-1_entry .tx_2 .s {
 font-size: 2.2rem;
}
.step-1_entry .tx_2 .m {
 font-size: 2.8rem;
}
.price_campaign {
 margin-top: 20px;
 line-height: 160%;
 text-align: center;
}
.price_campaign a {
 display: block;
 color: #fff;
 background: url("/resources_v2/hikari/all/sp/juicejuice_concert2021_familia/images/bg_live.png") no-repeat bottom right,#bf4d96; 
 padding: 20px 10px;
 font-size: 2.2rem;
 border-radius: 7px;
}
.price_campaign a .cp_ttl {
 font-size: 1.7rem;
 color: #f3c2c2;
}
.price_campaign a .cp_ttl + p {
 margin-top: 5px;
 font-size: 1.7rem;
}
.price_campaign a .cp_m {
 font-size: 1.8rem;
 font-weight: bold;
}
.price_campaign a .cp_s {
 font-size: 1.7rem;
 font-weight: normal;
}
.tx_3 {
 margin-top: 40px;
 font-size: 2.3rem;
 text-align: center;
 font-family: "AxisStd-Regular";
}
.step-1_entry + .price_campaign {
 width: 95%;
 margin: 40px auto 0;
 font-family: "AxisStd-Regular";
}
.btn_entry_plan {
 max-width: 645px;
 width: 90%;
 margin: 20px auto 0;
}
.btn_ticket {
 max-width: 720px;
 margin: 35px auto 0;
}
.btn_entry_plan a,
.btn_ticket a {
 display: block;
 padding: 20px 10px 15px;
 font-size: 1.8rem;
 border-radius: 9px;
 background-color: #00a1e5;
 color: #fff;
  font-family: "AxisStd-Medium";
 text-align: center;
}
.btn_ticket a {
  background-color: #e70012;
}
.link_fortv {
 text-decoration: underline;
 text-align: center;
 margin-top: 10px;
}
.step-1-2 {
 padding-bottom: 25px;
}
.step_flow-2 {
 margin-top: 25px;
 display: -webkit-flex;
 display: flex;
 -webkit-justify-content: space-between;
 justify-content: space-between;
}
.step_flow-2 li {
 position: relative;
 width: 30%;
}
.step_flow-2 li img {
 box-shadow: 0 0 20px #dedede;
}
.step_flow-2 li p {
 margin-top: 10px;
 padding-bottom: 15px;
 letter-spacing: -1px;
 line-height: 135%;
}
.step_flow-2 li:nth-of-type(n+2)::after {
 position: absolute;
 display: block;
 content: '〉〉〉';
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 left: -35px;
 width: 25px;
 letter-spacing: -30px;
 color: #677d9a;
 font-size: 3.6rem;
 font-family: "AxisStd-Light";
}
.device_box {
 margin-top: 50px;
}
.device_box > li:nth-of-type(n+2) {
 margin-top: 80px;
}
.device_ic_wrap {
 position: relative;
 padding-left: 120px;
}
.device_icon {
 position: absolute;
 left: 0;
  top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}
.step_device_ttl {
 font-size: 2.0rem;
 color: #677d9a;
 font-family: "AxisStd-Regular";
}
.device_inner {
 padding-left: 120px;
}
.step_device_ttl + .step_tx {
 margin-top: 0;
}
.device_notes {
 margin-top: 15px;
}
.device_notes dt {
 color: #be0e20;
 font-size: 1.6rem; font-family: "AxisStd-Regular";
}
.device_notes dd {
 font-size: 1.4rem;
}
.dl_apps {
 max-width: 750px;
 margin: 50px auto 0;
 padding: 45px 15px 15px;
 background-color: #f2f2f2;
 text-align: center;
}
.dl_apps dt {
 font-size: 2.0rem;
 font-family: "AxisStd-Regular";
}
.app_ic {
 margin-top: 10px;
}
.badge {
 margin-top: 20px;
 
}
.badge li {
 width: 49%;
 padding: 5px;
 background: #fff;
 border-radius: 4px;
 display: -webkit-flex;
 display: flex;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 text-align: left;
 -webkit-align-items: center;
 align-items: center;
}
.badge li p {
 padding-left: 7px;
 font-size: 1.8rem;
 font-family: "AxisStd-Regular";
 line-height: 110%;
}
.badge li p span {
 font-size: 1.4rem;
 font-family: "AxisStd-Light";
}
.app_badge {
 width: 200px;
}
.app_notes {
 margin-top: 20px;
 font-size: 1.25rem;
}
.device_tx {
 font-size: 1.5rem;
 margin-top: 35px;
}
.btn_service {
 width: 340px;
 margin-top: 20px;
 background-color: #fff;
}
.btn_service a {
 display: block;
 padding: 8px;
 color: #fff;
 background: #677d9a;
 font-size: 1.6rem;
 font-family: "AxisStd-Regular";
 text-align: center;
}
/**==========================================================================
●style.css 画面の横幅が769px以上---PCのみ
============================================================================*/
@media screen and (min-width: 769px){
img {
height: auto;
width: auto;
}
#howto img{
height: auto;
max-width:100%;
}
#howto {
  font-weight: normal;
 }
 #howto .sp-only {
  display: none;
 }
}/*メディアクエリ～768▼PCのみ*/
/*============================================================================
●tablet.css 画面の横幅が768pxまで---SPのみ
============================================================================*/
@media screen and (max-width: 768px){
 #howto .inner {
  padding: 0;
 }
 #howto img{
  max-width: 100%;
  height: auto;
  width /***/: auto;
}
 #howto {
  line-height: 1.6;
 }
 #howto .sp-only {
  display: block;
 }
/* ご利用方法*/
 #howto .howto_inner {
  width: 100%;
 }
 #howto .tab .tab-content.wrapper {
  padding-left: 15px;
  padding-right: 15px;
 }
 #howto .step_flow-1 {
  margin-top: 35px;
 }
 #howto .step_flow-1 li {
  width: 22.5%;
  padding: 45px 10px;
  font-size: 1.8rem;
 }
 #howto .step_flow-1 li:nth-of-type(n+2)::after {
  font-size: 2.0rem;
  letter-spacing: -24px;
  left: -17%;
 }
 .step_flow-2 li:nth-of-type(n+2)::after {
  font-size: 1.5rem;
  letter-spacing: -19px;
  top: 40%;
  left: -5%;
 }
 .step_flow-2 li {
  width: 31%;
 }
 .step_flow-2 li p {
  font-size: 1.3rem;
 }
 li  {
  font-size: 1.6rem;
 }
 .badge li p span {
  font-size: 1.2rem;
 }
 .app_notes {
  text-align: left;
 }
 .app_badge {
  width: 130px;
 }
 .button_ticket {
  width: 90%;
 }
}
/*============================================================================
●style.css 画面の横幅が600pxまでsmalのみ
============================================================================*/
@media screen and (max-width: 600px){
  #howto .small-none {
  display: none;
 }
  #howto .small-only {
  display: block;
 }
/* ご利用方法*/
 #howto h2 {
  font-size: 2.5rem;
 }
 .tab .nav-tabs--2 .nav-tabs .tab-piece {
  font-size: 1.4rem;
 }
 #howto h4 {
  font-size: 2.0rem;
 }
 #howto .tab .tab-content.wrapper {
  padding-left: 10px;
  padding-right: 10px;
 }
 #howto .step_flow-1 {
  -webkit-flex-direction: column;
  flex-direction: column;
 }
 #howto .step_flow-1 li {
  width: 100%;
  padding: 20px 10px 20px;
 }
 #howto .step_flow-1 li:nth-of-type(n+2) {
  margin-top: 15px;
 }
 #howto .step_flow-1 li p {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
 }
 #howto .step_flow-1 li p br {
  display: none;
 }
 #howto .step_flow-1 li:nth-of-type(n+2)::after {
  display: none;
 }
 .step_ttl_wrap {
  padding-left: 45px;
 }
 .step_ttl {
  font-size: 1.8rem;
 }
 .step_tx {
  font-size: 1.3rem;
 }
 .step-1_plan {
  font-size: 1.3rem;
 }
 .step-1_plan dd {
  line-height: 140%;
 }
 #howto .step_flow-1 li::before {
  width: 40px;
  height: 40px;
  font-size: 1.6rem;
 }
 .step-1_btn li a {
  font-size: 1.4rem;
 }
 .step-1_btn {
  -webkit-flex-direction: column;
  flex-direction: column;
 }
 .step-1_btn li {
  width: 100%;
 }
 .step-1_btn li:nth-of-type(n+2) {
  margin-top: 10px;
 }
 .step-1_entry .tx_1 {
  font-size: 1.8rem;
 }
 .step-1_entry .tx_1 span {
  font-size: 1.6rem;
 }
 .step-1_entry .tx_2 .s {
  font-size: 1.6rem;
 }
 .step-1_entry .tx_2 .m {
  font-size: 2.0rem;
 }
 .step-1_entry .tx_2 {
  font-size: 3.5rem;
 }
 .step-1_campaign dt {
  font-size: 1.5rem;
 }
 .step-1_campaign dd {
  margin-top: 5px;
  font-size: 1.6rem;
  line-height: 140%;
 }
 .step-1_campaign {
  padding-bottom: 20px;
 }
 .btn_entry_plan a, .btn_ticket a {
  font-size: 1.6rem;
 }
 .step_flow-2 {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
 }
 .step_flow-2 li {
  width: 100%;
 }
 .step_flow-2 li:nth-of-type(n+2) {
  margin-top: 20px;
 }
 .step_flow-2 li:nth-of-type(n+2)::after {
  display: none;
 }
 .device_icon {
  width: 50px;
 }
 .device_ic_wrap {
  padding-left: 55px;
 }
 .step_device_ttl {
  font-size: 1.45rem;
  line-height: 120%;
 }
 .step_device_ttl + .step_tx {
  margin-top: 5px;
  line-height: 135%;
 }
 .device_inner {
  padding-left: 0;
 }
 .badge.flex {
  -webkit-flex-direction: column;
  flex-direction: column;
 }
 .badge li {
  width: 100%;
 }
 .badge li:nth-of-type(n+2) {
  margin-top: 10px;
 }
 .dl_apps dt {
  font-size: 1.6rem;
 }
 .app_ic {
  width: 70px;
  margin: 20px auto 0;
 }
 .badge li p {
  font-size: 1.6rem;
 }
 .app_notes {
  font-size: 1.2rem;
 }
 .device_tx {
  font-size: 1.3rem;
 }
 .btn_service {
  width: 100%;
  font-size: 1.4rem;
 }
 .price_campaign a .cp_ttl {
  font-size: 1.4rem;
 }
 .price_campaign a .cp_m {
  font-size: 1.4rem;
 }
 .price_campaign a .cp_s {
  font-size: 1.2rem;
 }
 .price_campaign a .cp_ttl + p {
  margin-top: 5px;
  line-height: 100%;
 }
 .price_campaign a {
  background: url("/resources_v2/hikari/all/sp/juicejuice_concert2021_familia/images/bg_live.png") no-repeat bottom right/72px,#bf4d96;
  font-size: 1.8rem;
 }
 .contents_ttl span {
  font-size: 1.5rem;
 }
 .step-1_entry + .price_campaign {
  width: 100%;
 }
 .plan_box {
  padding-left: 5px;
  padding-right: 5px;
 }
 .tx_3 {
  font-size: 1.8rem;
 }
 .btn_entry_plan, .btn_ticket {
  width: 95%;
 }
 .device_notes dd {
  font-size: 1.3rem;
 }
}
@media screen and (max-width: 360px){
 .price_campaign a .cp_s {
  font-size: 1.0rem;
 }
 .price_campaign a .cp_ttl {
  font-size: 1.2rem;
 }
}