/*PCでは無効（改行しない）*/
.sma{
    display: none;
}

.width_80{
    width: 80%;
    margin: 0 auto;
}

.PC_width_60{
    width: 60%;
}

.PC_width_50{
    width: 40%;
}

.PC_width_40{
    width: 40%;
    margin: 0 auto;
}


#header nav{
    position: fixed;
    top:0;

    width: 86%;
    left: 50%;
  transform: translateX(-50%);
    background-color: white;
    z-index: 100;
    margin: 0 auto;
    padding-left:  7%;
    padding-right: 7%;
    box-shadow: 0 .5rem .75rem #9ea3bd4d;
}

#header_contents{
    max-width: var(--width-content);
    margin: 140px auto 0 auto;

}


#Available_on{
    width-content:initital;
}

#Available_on{
/*    background-color: #6643b5;*/
    background: linear-gradient(140deg, #00d2ff 0%, #3a47d5 100%);
    padding-top: 2rem;
    padding-bottom: 4rem;
}

#Available_on h2{
    color: #fff;
}

.btn_link_podcast{
    width: 9.7%;
    margin:0 2.5%;
    display: inline-grid;
}

.btn_link_Apple, .btn_link_google{
    width: 9%;
    margin:0 2.5%;
    display: inline-grid;
}

.btn_link_listen{
    width: 11%;
    margin:0 2.5%;
    display: inline-grid;
}

.btn_link_youtube {
    width: 10%;
    margin:0 2.5%;
    display: inline-grid;
    position: relative;
    top: -13%;
}

#Available_on img:hover {
    opacity: 90%;
}

.btn_link_podcast img{
    width: 100%;
    display: inline-grid;
}

#Follow_us{
/*    padding:5%;*/
    background: linear-gradient(140deg, #00d2ff 0%, #3a47d5 100%);
    color: #fff;
}

.btn_link_sns{
    width: 10%;
    margin:0 3%;
    display: inline-grid;
}

.logo_x{
    width: 8%
}

.btn_link_sns:hover{
    opacity: 90%;
}

.btn_link_sns img{
    width: 100%;
    display: inline-grid;
}

#feedback{
    margin: 5% 0;
}

#feedback p{
 margin: 0 auto;
 width: auto;
}

#footer_contents{
    margin-bottom: 3rem;
}

#Follow_us p a {
    color: #fff;
    font-weight: normal;
}

.non_bold{
    font-weight: normal;
}

.padding_top_10{
    padding-top: 10px;
}

.padding_5{
    padding: 5px;
}

@media (max-width: 840px) {
   /* 横幅が840px以下の場合に適用するスタイル */
    main{
        padding-top: 0rem;
    }

    h2{
        font-size: 1.3em;
    }

    p{
        font-size: 0.95em;
    }

    li, dl {
        font-size: 0.95em;
    }

    #header_contents{
    max-width: var(--width-content);
    margin: 140px auto 0 auto;

}

    /*スマートフォンでは有効（改行する）*/
    .sma{
        display: block;
    }

    #Available_on .btn_link_podcast{
        width:20.7%;
        margin:0 5%;
    }

    #Available_on .btn_link_Apple, #Available_on .btn_link_google{
        width: 21%;
        margin:0 5%;
    }

    #Available_on .btn_link_listen{
        width: 23%;
        margin:0 5%;
    }

    #Available_on .btn_link_youtube {
        width: 23%;
        margin:auto 5%;
    }

    #Available_on .btn_link_youtube {
        position: relative;
        top: -0%;
    }

    #Available_on img{
        margin-top: 2rem;
    }

    #Available_on header{
        padding-bottom: 1rem;
    }

    #Follow_us .btn_link_sns{
        width: 20%;
        margin: 0 4.5%;
    }

    #Follow_us .logo_x{
        width: 17%;
    }

    #Follow_us .sp_line2{
        margin-top: 2.5rem;
    }

    #Follow_us{
        padding-bottom:9%;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */