/* CSS Document */
@import url("/service/guide/sdu/css/sdu_index.css");

/*==========(HEADER)===============*/

header {
    position: fixed !important;
    top: 0;
    left: 0;
    width:  100%;
    background-color: #fff;
    border-bottom : 1px solid #CCC;
    z-index: 1;
}

header h1 {
    margin-top: 20px;
}

.m-grid-container {
	max-width: 980px;
	margin: 0 auto;
}


.wm_form_step {
    text-align: right;
    margin-top: 10px;
}
.wm_form_step span {
    display: inline-block;
    padding: 0.1em 2em;
    -webkit-transform: skewX(150deg);
    -moz-transform: skewX(150deg);
    transform: skewX(150deg);
    border-right: 1px solid #CCC;
    /**/border-top : 1px solid #CCC;
    border-bottom : 1px solid #CCC;
    border-left : 1px solid #CCC;
    margin-right:  3px;
    background-color: #dedede;
}
.wm_form_step span:first-child {
}

.wm_form_step span span{
    border:  none !important;
    transform: skewX(-150deg);
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent;
}


.wm_form_step span:last-child {
    
}

body.step1 .wm_form_step span.wm_step1,
body.step2 .wm_form_step span.wm_step2,
body.step3 .wm_form_step span.wm_step3
body.step4 .wm_form_step span.wm_step4 {
    background-color:  #fce8cc !important;
}




@media screen and (max-width: 767px) {
    .wm_form_step span {
        padding:  0.1em 12px;
    }
    
    
}

/*==========(/HEADER)===============*/

/*==========(MAIN)===============*/

span.m-nowrap,
label.m-nowrap {
    display: inline-block;
    white-space: nowrap;
}

table.form-table th {
    position: relative;
}

table.form-table th span.wm_must {
    position: absolute;
    right:  15px;
    top: calc(50% - 15px);
    background-color:  #f00;
    color:  #FFF;
    padding:  5px;
    border-radius: 5px;
    
}


main.l-content {
    margin-top: 59px!important;
    margin-bottom: 50px;
    height: 100%;
}

main h2 {
    background-color: #fff2cc;
    font-size:  18px;
    padding: 0.5em 1em;
    font-weight: bold;
}


.m-hdg-04 > h4.m-hdg {
    font-size:  17px;
}

.wm_max1200 {
    margin-left: auto;
    margin-right: auto;
}

.wm_container01 {
    padding: 0 1em;
}

.wm_container02 {
    padding: 0 2em;
}

.wm_container03 {
    padding: 0 3em;
}



.wm_h4t01 {
    padding:  20px 0 0 75px;
    min-height:  60px;
    font-size:  17px;
    font-weight: 700;
    background-image: url("../images/icon_zaq01.png");
    background-size: 60px;
    background-repeat: no-repeat;
    background-position: 0 50%;
}

.wm_hdg-01 {
    background-color: #dbe0ee;
    padding:  0.2em 0.25em 0.1em;
    font-size:  16px;
    text-align: center;
    /*font-weight: 700;*/
    margin-bottom:  0.5em;
}

h4.m-ico-tv,
h4.m-ico-net {
   font-weight:  700;
    font-size: 16px;

}

h3.m-ico-tv.m-hdg,
h3.m-ico-net.m-hdg {
    font-size:  18px;
}

.m-ico-tv {
    background-image:  url(/resources/images/icon/icon_service_tv.svg);
    background-position: left top;
    background-size:  contain;
    background-repeat: no-repeat;
    padding-left:  2.5em;
    margin: 0.5em 0 1em;
}

.m-ico-net {
    background-image:  url(/resources/images/icon/icon_service_net.svg);
    background-position: left top;
    background-size:  contain;
    background-repeat: no-repeat;
    padding-left:  2.5em;
    margin: 0.5em 0 1em;
}

h3.m-accordion-hdg {
    font-weight: 700;
    background-color:  #f9f9f9;
}

h4.point1 {
    background-image: url("../images/point01.gif");
    background-repeat: no-repeat;
    background-position: 0 0;
background-size: 35px;
padding: 6px 5px 15px 50px;
    font-size:  16px;
    font-weight: 700;
}

h4.point2 {
    background-image: url("../images/point02.gif");
    background-repeat: no-repeat;
    background-position: 0 0;
background-size: 35px;
padding: 6px 5px 15px 50px;
    font-size:  16px;
    font-weight: 700;
}

h4.point3 {
    background-image: url("../images/point03.gif");
    background-repeat: no-repeat;
    background-position: 0 0;
background-size: 35px;
padding: 6px 5px 15px 50px;
    font-size:  16px;
    font-weight: 700;
}

div.m-accordion-hdg {
    background-color:  #f9f9f9;
    text-align:  center;
}

h4.point1 {
    background-image: url("../images/point01.gif");
    background-repeat: no-repeat;
    background-position: 0 0;
background-size: 35px;
padding: 6px 5px 15px 50px;
    font-size:  16px;
    font-weight: 700;
}

h4.point2 {
    background-image: url("../images/point02.gif");
    background-repeat: no-repeat;
    background-position: 0 0;
background-size: 35px;
padding: 6px 5px 15px 50px;
    font-size:  16px;
    font-weight: 700;
}

h4.point3 {
    background-image: url("../images/point03.gif");
    background-repeat: no-repeat;
    background-position: 0 0;
background-size: 35px;
padding: 6px 5px 15px 50px;
    font-size:  16px;
    font-weight: 700;
}


.wm_height100pc {
    height:  100%;
}

img.arrow {

}

    .m-mt-20-pc {
        margin: 0;
    }

.wm_osusume {
    background-color: #fffccc;
    position: relative;
}

.wm_osusume .wm_c-menu {
    position: absolute;
    background-color:#f00;
    display: inline-block;
    color: #FFF;
    font-weight: bold;
    font-size: 12px;
    left: 5px;
    top: 10px;
}

body.step4 #button{
    padding:  1em 3em;
    color:  #FFF;
    background: linear-gradient(to bottom,#eb5d45 0%,#e83416 100%);
    font-size:  16px;
    font-weight: 700;
    border:  0;
    border-radius: 0;
    display: block;
    margin:  0 auto 0px;
    position: relative;
    width:  250px;
}
body.step4 #button::after {
    position: absolute;
    right:  0.25em;
    top: 1em;
    content: "＞";
    color:  #FFF;
    z-index: 1;
    text-align: right;
    font-weight: 700;
}

.wm_s-btn.wm_back{
    position: absolute;
    top: 25px;
    left:  15px;
}
.wm_s-btn.wm_back a{
    position: relative;
    border:  1px solid #DDD;
    background-color: #fff;
    padding: 5px 5px 5px 1.5em;
}

.wm_s-btn.wm_back a::before {
    position: absolute;
    left:  5px;
    top: 5px;
    content: "＜";
    z-index: 1;
    color: #e93817;
}


.wm_underline {
    text-decoration:  underline !important;
}


.wm_xs-visible {
    display: none;
}

.wm_midashi {
    cursor: pointer;
    background: url("/sim_contact/sim_entry_oc/img/icon/icon_open.png") 100% 50% no-repeat;
}

.wm_accordionTitle02{
    margin: 0 0 10px 0px;
    padding: 2px 0 2px 10px;
    font-size: 129%;
    color: #000;
    border-left: 4px solid #f18d00;
    font-weight: bold;
}

.m-grid-container.wm_container {
    width: calc(100% - 30px) !important;
    max-width:  950px;
    margin: auto;
}

.wm_flow_box div.wm1,
.wm_flow_box div.wm2,
.wm_flow_box div.wm3,
.wm_flow_box div.wm4 {
    border:  1px solid #CCC;
    padding:  1em 0em; 
    text-align: center;
    width: calc(100% - 20px);
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
    height: 100%;
    position: relative;
}


.wm_flow_box div.wm1 {
    background-color: #fffccc;
}
.wm_flow_box div.wm2,
.wm_flow_box div.wm3,
.wm_flow_box div.wm4 {
    background:  #ededed;
}

    .wm_flow_box div.wm1::after,
    .wm_flow_box div.wm2::after,
    .wm_flow_box div.wm3::after{
        
    }



.m-inline-block {
    display: inline-block;
}

h4.c-ico__summary {
    padding-left: 50px;
    min-height: 40px;
}

.c-ico__summary::before {
    background: url(https://c.myjcom.jp/shared/common/svg/01.svg) left top no-repeat;
    content: "";
    width: 40px;
    height: 40px;
    top: -9px;
    left: 0;
    display: block;
    position: absolute;
}

.wm_relative {
    position: relative;
}

.wm_txt-box {
    border:  1px solid #ddd;
    padding: 20px 30px;
}

#attention .wm_txt-box {
    border-bottom:  0;

}

#attention .m-accordion {
    margin-top: -1px;
    border-top: 0;
}

#attention .m-accordion-hdg a {
    padding: 12px 20px 12px 20px;
    background-position: calc(50% - 80px) 50%;
}

#attention .m-accordion-hdg-wrap {
    border-top: 1px solid #ddd;
}

#attention .m-accordion-contents {
   border-top: 0;
   padding: 0px 30px 20px;    
}

span#wm_open,
a.is-active span#wm_close { display: inline;}

span#wm_close,
a.is-active span#wm_open { display: none;}

/*STEP3.HTML*/

.net_ttl{
   background-color:  #0085cd !important;
   color: #FFF !important;
   padding: 0.5em;
   text-align: center;
}
.tv_ttl {
   background-color:  #e40077 !important;
   color: #FFF !important;
   padding: 0.5em;
   text-align: center;
}
.ele_ttl {
   background-color:  #f18d00 !important;
   color: #FFF !important;
   padding: 0.5em;
   text-align: center;
}

.tv_txt,
.net_txt,
.ele_txt{
padding: 0.5em;
text-align: center;
}
.net_txt p,
.tv_txt p,
.ele_txt p,
.net_txt div,
.tv_txt div,
.ele_txt div{
   margin: 0;
}


.net_txt div.wm_arrow_down_st03,
.tv_txt div.wm_arrow_down_st03,
.ele_txt div.wm_arrow_down_st03{
   /*max-width: 50%;*/
   display: block;
   margin: 0 auto;
}

.m-lh-1 {
   line-height: 1.2;
}


@media screen and (max-width: 400px) {
        .wm_osusume .wm_c-menu {
            line-height: 1.0;
            margin: 0;
            padding: 5px;
            display: block;
            font-size: 10px;
            top: 7px;
        }
      
       main.l-content {
          margin-top: 77px!important;
   }
      
}

@media screen and (min-width: 401px) and (max-width: 480px) {
        .wm_osusume .wm_c-menu {
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 12px;
            border-radius: 50%;
        }
    }

@media screen and (max-width: 480px) {
        .m-fs-ttl {
            font-size: 12px;
        }
        
        .wm_xs-visible {
            display: block;
        }
    }

@media screen and (min-width: 481px)  {
        .wm_osusume .wm_c-menu {
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 12px;
            border-radius: 50%;
        }
    }

@media screen and (max-width: 767px) {
    
    .wm_flow_box { 
        padding-bottom: 0 ;
    }
    
    .wm_flow_box div {
        position: relative !important;
    }
    
    .wm_flow_box div.wm1::after,
    .wm_flow_box div.wm2::after,
    .wm_flow_box div.wm3::after {
        content: " ";
        position: absolute;
        z-index: 2;
        width: 15px;
        height: 15px;
        border-left:  1px solid #CCC;
        border-bottom:  1px solid #CCC;
        margin:  auto;
        left: calc(50% - 9px);
        bottom:  -9px;
        transform: rotate(-45deg);
      }
    
    .wm_flow_box div.wm1::after {
        background-color: #fffccc;

    }
    .wm_flow_box div.wm2::after,
    .wm_flow_box div.wm3::after,
    .wm_flow_box div.wm4::after {
        background:  #ededed;
    }
    
    .wm_flow_box div.wm2,
    .wm_flow_box div.wm3,
    .wm_flow_box div.wm4 {
        border-top: 0;
    }
    
    .wm_flow_box div.wm1 {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        
    }
    
     .wm_flow_box div.wm4 {
            border-top: 0;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
    }
    
    .wm_h4t01 {
        max-width: 568px;
        margin: auto;
    }
    .wm_flow_box div.wm1,
    .wm_flow_box div.wm2,
    .wm_flow_box div.wm3,
    .wm_flow_box div.wm4{
        max-width: 360px;
        margin: auto;
    }
    
    
.wm_s-btn.wm_back{
    position: relative;
    top:0;
    left: 0;
}
.wm_s-btn.wm_back a {
        width: 50px;
        margin:  0 auto; 
        text-align: center;
        display: block;
 }
    
    body.step4 #button {
        margin-bottom: 10px;
    }
    
    .m-headerLogo {
    width: 78px;
    height: 15px;
    margin: -7px 0 0 -50px;
    }
    
    main.l-content {
        margin-top:  0;
    }

    .m-ac-sp {
        text-align: center;
    }
    .m-mt-sp-t1 {
        margin: 0;
    }
    
    img.arrow {
         transform: rotate( 90deg );
    }
    
    .m-mb-10-sp {
        margin-bottom: 10px;
    }
    
    .wm_osusume .wm_c-menu {
        left:  10px;
    }
    
    .wm_container03 {
            padding: 0 1.0em;
        }
    
}

@media screen and (min-width: 768px) {
   div.net_txt.h250,
   div.tv_txt.h250,
   div.ele_txt.h250{
      min-height: 258px;
      overflow: hidden;
   }

   
   .net_txt div.m-m-adj-st3-01{
      margin: 29px 0 30px/*42px*/;
   }
    .m-ml-5-pc {
        margin-left: 5px;
    } 
    .wm_service_flow {
        max-width:  80%;
        margin: auto;
    }
    .wm_flow_box div.wm1,
    .wm_flow_box div.wm2,
    .wm_flow_box div.wm3,
    .wm_flow_box div.wm4 {
        border-radius:  0.5em;
        margin:  5px;
        font-size:  13px;
        
    }
    .wm_flow_box div.wm1::after,
    .wm_flow_box div.wm2::after,
    .wm_flow_box div.wm3::after{
        position: absolute;
        right:-20px;
        content: "＞";
        font-weight: bold;
        
    }
    
    .wm_flow_box div.wm3::before{
        content: "";
        display: none;
    }

    
    @media screen and (max-width:920px) {
        .wm_osusume .wm_c-menu {
            width: auto;
            height: auto !important;
            line-height: 1;
            font-size: 11px;
            padding: 5px;
             border-radius:  0 !important;
            top: 5px;
        }
    }
    @media screen and (min-width: 921px) {
         .wm_osusume .wm_c-menu {
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 12px;
             border-radius: 50%;
        }
    }

    .m-ac-sp {
        text-align: center;
    }
      .m-mt-sp-t1 {
        margin: 0;
    }
    
 
   
     .m-ar-pc {
        text-align: right;
    }
    .m-mt-sp-t1 {
        margin: 24px 0 0 0;
    }
    .m-mt-sp-t2 {
        margin: -5px 0 0 0;
    }
    .m-pb-0-pc {
        margin-bottom: 0px !important;
    }
    .m-mt-20-pc {
        margin: 20px 0 0 0;
    }
    
     .m-grid-col.m-p-10[data-col="2"] {
    flex: 0 0 calc(16.666666% - 10px);
    max-width:  calc(16.666666% - 10px);
    margin: 5px;
    }
    
    .m-grid-col.m-p-10[data-col="3"] {
    flex: 0 0 calc(25% - 10px);
    max-width:  calc(25% - 10px);
    margin: 5px;
    }
    
   .m-grid-col.m-p-10[data-col="4"] {
    flex: 0 0 calc(33.333333% - 10px);
    max-width:  calc(33.333333% - 10px);
    margin: 5px;
    }
    
    .m-grid-col.m-p-10[data-col="4.5"] {
    flex: 0 0 calc(37.5% - 10px);
    max-width:  calc(37.5% - 10px);
    margin: 5px;
    }
    
    .m-grid-col.m-p-10[data-col="5"] {
    flex: 0 0 calc(41.666666% - 10px);
    max-width:  calc(41.666666% - 10px);
    margin: 5px;
    }
    
    .m-grid-col.m-p-10[data-col="6"] {
    flex: 0 0 calc(50% - 10px);
    max-width:  calc(50% - 10px);
    margin: 5px;
    }


    
    
    
}

/*==========(/MAIN)===============*/


/*==========(FOTTER)===============*/

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width:  100%;
    background-color: #e93817;
    color:  #fff;
    border-bottom : 1px solid #CCC;
    z-index: 1;
}

footer a.wm_back,
footer a.wm_next{
    display: block;
    color:  #FFF;
    text-align: center;
} 

footer a.wm_back:hover,
footer a.wm_next:hover{
    text-decoration: none !important;
    background-color: #d81f26 !important;
}


footer a.wm_back {
    border-right:  1px solid #FFF;
    padding: 1em 1em;
}

body.step4 footer a.wm_back {
    border-right: 0;
}


footer a.wm_next{
    font-size: 18px;
    padding: 1.0em 1em 0.8em;
}

footer a.wm_back::before {
    content: "<";
    margin-right:  1em;
   font-size: 18px;
    
}

footer a.wm_next::after {
    content: ">";
    margin-left: 1em;
    font-size: 18px;
    
}


/*==========(/FOTTER)===============*/