@charset "UTF-8";

main .contents > div:not(.background) {
	max-width: 2242px;
}

main .contents .hellonet_top {
	background-image: url(../../service/images/hellonet/hellonet_title.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*  */
main .contents .hellonet_top .hellonet_title {
    padding: 158px 0px 0px 0px;
    text-align: center;
}

main .contents .hellonet_top .hellonet_menu {
    margin: 120px auto 0px auto;
    width: 1180px;
    text-align: center;
}

.menu_button {
    position: relative;
    display: inline-block;
}

.menu_button img {
    display: block;
}

.menu_button .hover_image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.menu_button:hover .hover_image {
    display: block;
}

.hellonet_bg {
/*
    background-image: url(../../service/images/hellonet/hellonet_bg.svg);
 */
    background-image: url(../../service/images/hellonet/hellonet_bg.png);

    background-position: center;
    background-repeat: no-repeat;
    background-color: #0A111A;
}

main .contents .hellonet_contents {
    margin: auto;
    padding: 0px 10px 20px;
    max-width: 1180px;
    text-align: center;
}

/* HELLO-NET ログイン・登録 */
main .contents .hellonet_contents .hellonet_login {
    display: flex;
    padding: 0px 0px 70px 0px;
}

.hellonet_login .right {
    margin: 0px 0px 0px 88px;
}

.hellonet_login .description {
    width: 570px;
    margin: 86px 0px 0px 0px;
}

.hellonet_login .description .title {
    text-align: left;
    font-size: 38px;
}

main .hellonet_login .description .text p {
    text-align: left;
    font-size: 16px;
    line-height: 18px;
}

.hellonet_login .login {
    width: 570px;
    height: 219px;
    margin: 78px 0px 0px 0px;
}

.hellonet_login .login a .menu_button img {
    margin: -15px -15px -15px -15px;    /*画像のドロップシャドウ分*/
    padding: 20px 0px 0px 0px;
}

.hellonet_login .login .e-service {
    margin: 40px 20px 20px 20px;
}

.hellonet_login .login .e-service .text p{
    width: 270px;
    font-size: 14px;
    line-height: 17px;
    text-align: left;
}

.hellonet_login .login .e-service .menu_button img {
    margin: -15px -15px -15px -15px;    /*画像のドロップシャドウ分*/
    padding: 0px;
}

.hellonet_login .Notes {
    width: 570px;
    margin: 22px 0px 0px 0px;
}
.hellonet_login .hellonet_image {
    margin: 179px 0px 0px 0px;
}

main .contents .hellonet_contents .hellonet_login .login {
    background-color: #00193E;
    color: #FFFFFF;
}

main .contents .hellonet_contents .hellonet_login .login .e-service {
    display: flex;
}

main .contents .hellonet_contents .hellonet_login .Notes {
    text-align: left;
    font-size: 14px;
    line-height: 16px;
}

main .contents .hellonet_contents .hellonet_login .Notes a {
    text-decoration: underline;
}

main .contents .hellonet_contents .hellonet_login .Notes .link:after {
    content: "";
    position: relative;
    display: inline-block;
/*
    width: 1rem;
    height: 1rem;
    top: -3px;
*/
    width: 10px;
    height: 10px;
    top: -2px;

    margin: 0px 8px;
    padding: 0px !important;
    background: url(../images/blank.svg) no-repeat left top;
    background-size: 100%;
    vertical-align: middle;
}

/*動画*/
main .contents .hellonet_contents .youtube_contents {
    display: flex;
    justify-content: center;
    gap: 16px;
	color: #ffffff;
}
main .contents .hellonet_contents .youtube_contents img {
    height: 300px;
    width: auto;
	margin-bottom: 8px;
}
main .contents .hellonet_contents .youtube {
    display: none;
}

/*テレマティクスサービス HELLO-NET Owner’s*/
main .contents .hellonet_contents .hellonet_owners {
    color: #FFFFFF;
}

.hellonet_owners::before {
    padding: 0px 0px 131px 0px;
    content: "";
    display: block;
}

.hellonet_owners .description .title .title1 {
    font-size: 20px;
}

.hellonet_owners .description .title .title2 {
    margin: 20px 0px 0px 0px;
    font-size: 38px;
}

.hellonet_owners .description .title .text p {
    line-height: 2;
}

.hellonet_owners .hellonet_owners_image {
    margin: 38px 0px 0px 0px;
}

.hellonet_owners .anchor {
    margin: 82px 0px 0px 0px;
    display: flex;
    justify-content: space-between;
}


#history {
    margin-top: -30px;
    padding-top: 30px;
}

.hellonet_owners .history {
    margin: 75px 0px 0px 0px;
    font-size: 26px;
}

.hellonet_owners .history ul {
    margin: 36px 0px 0px 0px;
}

.hellonet_owners .history li {
    margin: 0px 0px 60px 0px;
}

#hellonet_data {
    margin-top: -30px;
    padding-top: 30px;
}

.hellonet_owners .hellonet_data {
    margin: 80px 0px 0px 0px;
}

.hellonet_owners .hellonet_data .title {
    font-size: 26px;
}

.hellonet_owners .hellonet_data .description {
    background-color: #FFFFFF;
    color: #000000;

    margin: 44px 0px 120px 0px;
}

.hellonet_owners .hellonet_data .description::before {
    padding: 0px 0px 40px 0px;
    content: "";
    display: block;
}

.hellonet_owners .hellonet_data .description p {
    font-size: 16px;
}

.hellonet_owners .hellonet_data .description img {
    margin: 52px 0px 0px 0px;
}

/* HELLO-DATA LINK */
.hellonet_contents .hellonet_data_link {
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;

    margin: 387px 0px 0px 0px;
}

.hellonet_contents .hellonet_data_link .right {
    width: 580px;
}

.hellonet_contents .hellonet_data_link .app_image {
    margin: -27px 0px 0px -31px;
}

.hellonet_contents .hellonet_data_link .title {
    display: flex;

    font-size: 20px;
}

.hellonet_contents .hellonet_data_link .text {
    margin: 0px 0px 0px 0px;
}

.hellonet_contents .hellonet_data_link .title .title1 {
    margin: 25px 0px 0px 0px;
    font-size: 20px;
}

.hellonet_contents .hellonet_data_link .title .title2 {
    font-size: 38px;
    margin: 15px 0px 0px 0px;
}

.hellonet_contents .hellonet_data_link .description {
    text-align: left;
    font-size: 16px;
    margin: 23px 0px 0px 0px;
}

.hellonet_contents .hellonet_data_link .connection_image {
    margin: 42px 0px 0px 0px;
}

.hellonet_contents .hellonet_data_link .app_download {
    background-image: url(../../service/images/hellonet/download_bg.png);
    display: flex;
    text-align: left;
    width: 580px;
    height: 302px;
    margin: 40px 0px 0px 0px;
}

.hellonet_contents .hellonet_data_link .app_download .app_store {
    margin: 220px 0px 0px 74px;
}

.hellonet_contents .hellonet_data_link .app_download .google_play {
    margin: 220px 0px 0px 110px;
}

.hellonet_contents .hellonet_data_link .Notes {
    text-align: left;
    font-size: 10px;
    margin: 10px 0px 0px 0px;
}

#hellonet_data_link {
    margin-top: 250px;
}

/** 追従メニュー */

#pagetop {
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 9999;
}

#pagetop a {
    text-decoration: none;
 
    display: block;
    text-indent: 100%;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background-color: #000;
    transform: rotate(-90deg);
    transition: background-color .3s ease;
}

#pagetop a::before {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% - 3px);
    margin: 0;
    width: 7px;
    height: 12px;
    background: url(../../service/images/hellonet/ic_arrow.svg) center center / 7px 12px no-repeat;
}

/** 600px以下 */
@media screen and (max-width: 600px) {
    img {
        display: inline;
    }

    .menu_button:hover .hover_image {
        display: none;
    }

    main .contents > div:not(.background) {
        padding: 40px 0px 180px;
    }
    .sp main .contents > div:not(.background) {
        padding: 40px 0px 180px;
    }

    main .contents .hellonet_top {
        background-image: url(../../service/images/hellonet/hellonet_title_sp.jpg);
    }

    main .contents .hellonet_top .hellonet_title {
        padding: 200px 0px 0px 0px;
    }

    main .contents .hellonet_top .hellonet_title img {
        content: url('../../service/images/hellonet/hellonet_title_sp.png');
    }

    main .contents .hellonet_top .hellonet_menu {
        display: grid;
        margin: 80px auto 0px auto;
        width: 100%;
    }

    main .contents .hellonet_top .menu_button{
        width: 100%;
    }

    main .contents .hellonet_top .menu_button a {
        margin-top: -20px;
    }

    main .contents .hellonet_top .menu_button img {
        width: 100%;
    }

    main .contents .hellonet_top .login .menu_button .default_image {
        content: url('../../service/images/hellonet/hellonet_menu01_01_sp.png');
    }
    main .contents .hellonet_top .login .menu_button .hover_image {
        content: url('../../service/images/hellonet/hellonet_menu01_01_sp.png');
    }
    main .contents .hellonet_top .owners .menu_button .default_image {
        content: url('../../service/images/hellonet/hellonet_menu02_01_sp.png');
    }
    main .contents .hellonet_top .owners .menu_button .hover_image {
        content: url('../../service/images/hellonet/hellonet_menu02_01_sp.png');
    }
    main .contents .hellonet_top .data_link .menu_button .default_image {
        content: url('../../service/images/hellonet/hellonet_menu03_01_sp.png');
    }
    main .contents .hellonet_top .data_link .menu_button .hover_image {
        content: url('../../service/images/hellonet/hellonet_menu03_01_sp.png');
    }
    

    main .contents .hellonet_contents {
        width: 100%;
        max-width: 370px;
    }

    .hellonet_bg {
        background-image: url(../../service/images/hellonet/hellonet_bg_sp.png);
        background-size: cover;

        background-position: center top;
        background-repeat: no-repeat;
        
        width: 100%;
        height: auto;
    }
    
    /** HELLO-NETとは */
    main .contents .hellonet_contents .hellonet_login {
        display: flex;
        flex-direction: column;
        padding: 0px 0px 0px 0px;
    }
    
    main .contents .hellonet_contents .hellonet_login .left {
        display: contents; /*スマホサイズではボックスを生成しない*/
    }
    
    main .contents .hellonet_contents .hellonet_login .right {
        display: contents; /*スマホサイズではボックスを生成しない*/
    }
    
    main .contents .hellonet_contents .description {
        order: 1;
        width: 100%;
        margin: 43px 0px 0px 0px;
    }
    main .contents .hellonet_contents .description .title {
        font-size: 26px;
        text-align: center;
    }
    main .contents .hellonet_contents .description .text {
        font-size: 14px;
        margin: 45px 0px 0px 0px;
        line-height: 17.6px;
        text-align: center;
        padding: 10px;
    }
    
    main .contents .hellonet_contents .login {
        order: 3;
        margin: 20px 0px 0px 0px;
        width: 100%;
    }

    main .contents .hellonet_contents .hellonet_login .login {
        padding-bottom: 20px;
        width: 100%;
        height: auto;
    }
    
    .hellonet_login .Notes {
        margin: 20px 0px 0px 0px;
        width: 100%;
    }
    
    main .contents .hellonet_contents .Notes {
        order: 4;
    }
    
    main .contents .hellonet_contents .hellonet_image {
        order: 2;
        margin: 60px 0px 0px 0px;
    }
    
    main .contents .hellonet_contents .hellonet_login .login .e-service {
        display: block;
    }

    /* HELLO-NET ログイン・登録 */
    .hellonet_login .login .e-service{
        margin: 40px 20px 0px 20px;
    }
    
    main .contents .hellonet_contents .hellonet_login .Notes {
        text-align: left;
        font-size: 12px;
        line-height: 14px;    
    }

    .hellonet_login .login .e-service .text p {
        width: 100%;
    }

    .hellonet_login .login .e-service .account {
        margin: 14px 0px 0px 0px;
    }

    .hellonet_login .login .menu_button .default_image {
        content: url('../../service/images/hellonet/btn_login_sp.png');
        margin: 0px;

        width: 100%;
        max-width: fit-content;
    }
    .hellonet_login .login .menu_button .hover_image {
        content: url('../../service/images/hellonet/btn_login_sp.png');
    }


    .hellonet_login .login .e-service .menu_button .default_image {
        content: url('../../service/images/hellonet/e_service01_sp.png');
        margin: 0px;
        max-width: fit-content;
    }
    .hellonet_login .login .e-service .menu_button .hover_image {
        content: url('../../service/images/hellonet/e_service01_sp.png');
    }

    .hellonet_login .hellonet_image img {
        content: url('../../service/images/hellonet/hellonet_image_sp.png');
        width: 100%;
        max-width: 341px;
    }

    main .contents .hellonet_contents .youtube_contents {
        margin-top: 32px;
        flex-direction: column;
		color: #000000;
    }
    main .contents .hellonet_contents .youtube_contents img {
        height: auto;
        width: 100%;
    }

    /** テレマティクスサービス HELLO-NET Owner’s */
    .hellonet_owners .description .title .title1 {
        font-size: 16px;
    }
    
    .hellonet_owners .description .title .title2 {
        margin: 18px 0px 0px 0px;
        font-size: 26px;
    }

    main .contents .hellonet_contents .description .text p {
        font-size: 14px;
        line-height: 16px;
    }

    main .contents .hellonet_contents .description .text .pc {
        display: none;
    }

    .hellonet_owners .hellonet_owners_image img {
        content: url('../../service/images/hellonet/hellonet_owners_image_sp.png');
        max-width: fit-content;
    }

    .hellonet_owners .anchor {
        margin: 60px 0px 0px 0px;
    }
   
    .hellonet_owners .anchor .anchor_history .menu_button img {
        content: url('../../service/images/hellonet/anchor_menu01_01_sp.png');
    }

    .hellonet_owners .anchor .anchor_dellonet_data .menu_button img {
        content: url('../../service/images/hellonet/anchor_menu02_01_sp.png');
    }

    /* 稼働履歴 */
    #history {
        margin-top: -15px;
        padding-top: 15px;
    }   

    .hellonet_owners .history {
        margin: 40px 0px 0px 0px;
        font-size: 20px;
    }

    .hellonet_owners img {
        width: 100%;
        max-width: fit-content;
    }
    
    .hellonet_owners .history ul {
        margin: 17px 0px 0px 0px;
    }
    
    .hellonet_owners .history li {
        margin: 0px 0px 30px 0px;
    }

    .hellonet_owners .history .history01 {
        content: url('../../service/images/hellonet/history01_sp.png');
    }
    .hellonet_owners .history .history02 {
        content: url('../../service/images/hellonet/history02_sp.png');
    }
    .hellonet_owners .history .history03 {
        content: url('../../service/images/hellonet/history03_sp.png');
    }
    .hellonet_owners .history .history04 {
        content: url('../../service/images/hellonet/history04_sp.png');
    }
  
    /* HELLO-NETデータを活用 */
    #hellonet_data {
        margin-top: -15px;
        padding-top: 15px;
    }   

    .hellonet_owners .hellonet_data {
        margin: 36px 0px 0px 0px;
    }
    
    .hellonet_data .title {
        font-size: 20px;
    }

    main .contents .hellonet_owners .hellonet_data .description {
        margin: 21px 0px 0px 0px;
        padding: 0px 10px;
    }

    .hellonet_owners .hellonet_data .description::before {
        padding: 0px 0px 20px 0px;
    }    

    .hellonet_owners .hellonet_data .description p {
        font-size: 14px;
        line-height: 20px;
        text-align: left;
    }

    .hellonet_data .description .data_image {
        content: url('../../service/images/hellonet/hellonet_data_sp.png');
    }

    /* HELLO-NETデータを活用 */
    .hellonet_contents .hellonet_data_link_bg {
        background-color: #0A111A;
        margin: 0px -200px;
        padding: 0px 200px;
    }   

    .hellonet_contents .hellonet_data_link {
        display: grid;
        margin: 40px 0px 0px 0px;
        padding-bottom: 40px;
        color: #FFFFFF;
        width: 100%;
        grid-auto-flow: row;
        grid-auto-columns: 100%;
    }

    .hellonet_contents .hellonet_data_link::after {
        padding: 0px 0px 0px 0px;
        content: "";
        display: block;

    }

    .hellonet_contents .hellonet_data_link .left {
        display: contents;
    }

    .hellonet_contents .hellonet_data_link .right {
        display: contents;
    }

    .hellonet_contents .hellonet_data_link .left .app_image {
        order: 4;
        content: url('../../service/images/hellonet/app_img_sp.png');
        margin: 30px auto 0px auto;
        width: 100%;
        max-width: fit-content;
    }

    .hellonet_contents .hellonet_data_link .right .title {
        order: 1;
        margin: 40px auto 0px auto;
    }

    .hellonet_contents .hellonet_data_link .right .title img {
        content: url('../../service/images/hellonet/icon_app_sp.png');
        width: 100%;
        max-width: fit-content;
    }

    .hellonet_contents .hellonet_data_link .right .title .text {
        margin-top: 0px;
    }

    .hellonet_contents .hellonet_data_link .right .title .title1 {
        font-size: 14px;
    }

    .hellonet_contents .hellonet_data_link .right .title .title2 {
        font-size: 26px;
        margin-top: 12px;
    }


    .hellonet_contents .hellonet_data_link .right .description {
        order: 2;
        margin-top: 20px;
        font-size: 14px;
        line-height: 17px;
        padding: 10px;
    }

    .hellonet_contents .hellonet_data_link .right .connection_image {
        order: 3;
        content: url('../../service/images/hellonet/connection_image_sp.png');
        margin: 65px auto 0px auto;
        width: 100%;
        max-width: fit-content;
    }

    .hellonet_contents .hellonet_data_link .right .app_download {
        order: 5;
        background-image: url(../../service/images/hellonet/download_bg_sp.png);
        height: auto;
        width: 100%;

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;

        margin: 20px auto 0px auto;
        padding: 58px 10px 0px 10px;
    }


    .hellonet_contents .hellonet_data_link .app_download a {
        flex: 1;
        width: 100%;
        margin-right: 10px; /* 画像の間隔を調整 */
    }
    .container img:last-child {
        margin-right: 0; /* 最後の画像には右側の余白をなくす */
    }
    .hellonet_contents .hellonet_data_link .app_download .app_store {
        content: url('../../service/images/hellonet/dl_app_store_sp.png');
        margin: 0px 0px 0px 0px;
        width: 100%;
    }
    
    .hellonet_contents .hellonet_data_link .app_download .google_play {
        content: url('../../service/images/hellonet/dl_google_play_sp.png');
        margin: 0px 0px 0px 0px;
        width: 100%;
    }
    
    .hellonet_contents .hellonet_data_link .right .Notes {
        order: 6;
        padding: 0px 10px;
    }

    /** 追従メニュー */
    #pagetop {
        right: 20px;
        bottom: 20px;
    }


    }/**600px以下*/