@charset "utf-8";

/******************************************************************

   2017 NEW STYLE CSS Document

******************************************************************/

body {
    word-break: break-all;
}

/* flexbox */
#contents01 .container,
#contents02 .container,
#contents03 .container,
#contents04 .container,
#contents05 .container { 
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
#contents01 .container {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
#contents02 .container {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
#contents03 .container {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
#contents04 .container {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    -webkit-box-align:end;
    -webkit-align-items:flex-end;
    -ms-flex-align:end;
    align-items: flex-end;
}

/* CTA */
#contents05 .container .container-inside {
    width: 100%;
}
.cta {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 4% 0 4%;
}
.cta h3 {
    margin: 0;
    width: auto;
    font-weight: 600;
    letter-spacing: .1rem;
    font-size: 330%;
    text-align: center;
}
.cta a {
    margin: 0;
}

/* エリア 高さ指定 */


#contents01 .container {
    min-height: 598px!important;
    position: relative;
}
#contents02 .container,
#contents03 .container,
#contents04 .container {
    min-height: 768px;
    position: relative;
}
#contents05 .container {
    min-height: inherit;
}
#contents04 {
    height: 768px;
}
#contents04 .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}

/* スクロールエリア */
#contents04 {
    position: relative;
}
#contents04 .bgfade04 {
    display: none;
    position: absolute;
    top; 0;
    left: 50%;
    margin-left: -960px;
    z-index: 1;
}
.bgfade04 img {
    webkit-transition: all 0.8s ease-in;
    -moz-transition: all 0.8s ease-in;
    -ms-transition: all 0.8s ease-in;
    -o-transition: all 0.8s ease-in;
    transition: all 0.8s ease-in;
}
.bgfade04 img.fade {
    opacity:0;
}

/* ロゴ */
.arrows-logo {
    position: absolute;
    top: 5%;
    left: 23px;
}
.arrows-logo img {
    width: 60%;
    height: auto;
}

/* 背景画像設定 */
#contents01 {
    background: url(/arrows/tab_wifi/rh/1701/images/1701_rh_01_pc.jpg) no-repeat center;
}
#contents02 {
    background: url(/arrows/tab_wifi/rh/1701/images/1701_rh_02_pc.jpg) no-repeat center;
}
#contents03 {
    background: url(/arrows/tab_wifi/rh/1701/images/1701_rh_03_pc.jpg) no-repeat center;
}
#contents04 {
    background: url(/arrows/tab_wifi/rh/1701/images/1701_rh_04_b_pc.jpg) no-repeat center;
}

/* コンテンツ内　テキストエリア */
.container-inside {
    width: 50%;
    height: 100%;
}
#contents03 .container-inside {
    width: 45%;
    height: 100%;
}
.container-inside.top > div {
    position: absolute;
    top: 23%;
    left: 3%;
    width: 100%;
}
.container-inside.top h2.heading > img {
    width: 40%;
    height: auto;
}
.container-inside.top p > img {
    width: 55%;
    height: auto;
    margin-left: -7%;
}
.container-inside.top p {
    margin: 0;
    width: 100%;
}
#contents02 .container-inside > div,
#contents04 .container-inside > div {
    position: absolute;
    bottom: 0;
}
#contents02 .container-inside > div,
#contents04 .container-inside > div {
    width: 50%;
}
#contents03 .container-inside > div {
    position: absolute;
    top: 28%;
    width: 45%;
}
#contents05 .container .container-inside > img {
    width: 100%;
}

/* 見出し2 */
h2.heading {
    margin: 0 0 18px;
    font-size: 5.4rem;
    font-weight: normal;
    text-align: left;
}

/* 見出し3 */
h3.heading {
    font-size: 3.3rem;
    margin-bottom: 33px;
    font-weight: normal;
}

/* p */
#contents02 p {
    margin-bottom: 8%;
}
#contents03 p {
    margin-bottom: 0;
}
#contents04 p {
    margin-bottom: 5%;
}

/* 改行 */
.sp-inline {
  display: none;
} 

/* PC用画像 */
.pc-bg {
  display: block;
}
/* スマホ用画像 */
.sp-bg {
  display: none;
}

/* SNS */
#sns {
    display: block;
    min-height: 40px;
    margin: 4% 0 4%;
}
#sns .flex-box {
    float: right;
}

/******************************************************************

  レスポンシブデザイン

******************************************************************/

@media screen and (max-width: 750px) {

section>div {
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ロゴ */
.arrows-logo {
    left: 22px;
    width: 38%;
}
.arrows-logo img {
    width: 100%;
}

.bgfade04 {
    display: none!important;
}

/* 背景画像設定 */
#contents01,
#contents02,
#contents03,
#contents04 { background: none; }


#contents01 .container { background: url(/arrows/tab_wifi/rh/1701/images/1701_rh_01_sp.jpg) no-repeat left top; }
#contents02 .container { background: url(/arrows/tab_wifi/rh/1701/images/1701_rh_02_sp.jpg) no-repeat left top; }
#contents03 .container { background: none; }
#contents04 .container { background: none; }
#contents05 .container { background: none; }
#contents03 { background: none; }
#contents04 { background: none; background-color: #F9F9F9; }

#contents01 .container,
#contents03 .container,
#contents04 .container,
#contents05 .container { min-height: 368px!important; }

#contents02 .container {
    min-height: 550px!important;
    background-position: bottom;
    background-color: #F2F2F2;
}

#contents01 .container,
#contents02 .container {
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: 0;
    -webkit-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    min-height: auto!important;
}

#contents01 .container:before,
#contents02 .container:before {
    content: "";
    display: block;
    padding-top: 132.8%;
}

/* 画像 */
#contents03 img,
#contents04 img,
#contents05 img {
    width: 100%;
}

/* コンテンツ内　テキストエリア */
#contents03, #contents04 {
    height: auto;
}
.container-inside {
    width: 100%;
    position: absolute;
    top: 0;    
}
#contents01 .container-inside {
    position: initial;
}
.container-inside.top > div {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    margin: auto;
    width: 70%;
}
.container-inside.top h2.heading > img,
.container-inside.top p > img {
    width: 100%;
    height: auto;
    margin-left: 0;
}

#contents02 .container-inside > div {
    width: 100%;
    position: absolute;
    top: 0;
    padding-top: 10%;
}

#contents03 .container,
#contents04 .container,
#contents05 .container {
    min-height: auto;
    position: static;
}

#contents03 .container .container-inside,
#contents04 .container .container-inside,
#contents05 .container .container-inside {
    position: static;
    width: 100%
}
#contents05 .container .container-inside {
    padding: 10% 0 10%;
}

#contents03 .container-inside > div,
#contents04 .container-inside > div {
    width: 100%;
    padding-top: 10%;
    padding-bottom: 10%;
    position: static;
}
#contents04 .container-inside > div {
    padding-bottom: 0;
}

#contents03 .container-inside > div > p,
#contents04 .container-inside > div > p {
    margin-bottom: 10%;
}

/* CTA */
.cta {
    display: block;
    margin: 0;
}
.cta h3 {
    font-weight: 900;
    width: 96%;
    text-align: center;
    font-size: 6.4vw;
    margin-top: 0;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.15;
    padding-left: 4%;
}
.cta a {
    margin: 2rem auto;
}

/* 見出し2 */
h2.heading {
    text-align: center;
    font-size: 12vw;
    margin-bottom: 5%;
}
/* 見出し3 */
h3.heading {
    font-size: 6.4vw;
    margin-bottom: 7%;
}
/* p */
#contents02 p,
#contents03 p,
#contents04 p {
    font-size: 4.2vw;
}

/* 改行 */
.sp-inline {
    display: block;
}
/* SNS */
#sns {
    display: none;
}
/* PC用画像 */
.pc-bg {
  display: none;
}
/* スマホ用画像 */
.sp-bg {
  display: block;
}

}