@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*====================
{{スマホを基本設計にする}}
 - 〜479px：SP縦
 - 480px〜599px：SP横
 - 600px〜959px：タブレット
 - 960px〜1279px：小型PC
 - 1280px〜：大型PC
====================*/
html {
	font-size: 62.5%;
}

body {
	font-family: Helvetica, ArialMT,"Noto Sans Japanese","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",メイリオ,sans-serif;
	color: #fdfaeb;
	font-size: 1.4rem;
    line-height: 2.2rem;
	font-weight:400;
}

* {
    box-sizing : border-box;
}

a{color: #FFD737;}

a:hover img{
    opacity:0.8;
    filter:alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
}
.pc {
    display: none;
}
.sp {
    display: block;
}

.music14-request a {
    display: block;
    font-size: 2.0rem;
    color: #fff;
    background-color: #000;
    padding: 20px 0;
    border-radius: 35px;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
}
.music14-request a:hover {
    color: #fe4f00;
}

/* main */
.sns-link {
    position: absolute;
    z-index: 5;
    top: 100px;
    left: calc(50% - 190px);
}
.sns-link a {
    display: block;
}
.sns-link a img{
    width: auto;
}
.sns-link a .sns-facebook{
    height: 30px;
	z-index: 999;
}
.sns-link a .sns-twitter{
    height: 25px;
    margin-top: 20px;
}
.sns-bg {
    text-align: center;
    padding-top: 140px;
    background-color: #fe4f00;
    width: 50px;
    height: 250px;
    border-radius: 50px;
}


.main-bg {
    background:transparent url("../img/bg_main.jpg") repeat;
    background-position: top;
	background-size: 1000px;
}
.main-bg .main-record {
    background-image:url("../img/main_record.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: 580px;
    margin: 0 auto;
    text-align: center;
    padding:20px 0 200px 0;
    z-index: 10;
    position: relative;
    pointer-events: none;
}
.main-bg .main-record img {
    display: block;
    margin: 0 auto;
}
.main-record a {
    pointer-events: auto;
}
.main-record .img-link {
    margin: 10px 0 40px 0;
}
.main-record .img-jfn {
    width: 45px;
    height: auto;
	padding-top: 5px;
    padding-bottom: 35px;
}
.main-record .img-main02 {
    width: 300px;
    height: auto;
}
.main-record .img-main03 {
    width: 40px;
    height: auto;
    margin: 20px 0 80px 0;
}
.main-record a{
    display: inline-block;
}
.main-audio {
    color: #fe4f00;
}
.main-audio h2 {
    font-size: 3.0rem;
}
.main-audio h2 span {
    border-bottom: 3px solid #fe4f00;
}
.main-audio p,
.main-txt p {
    font-size: 1.5rem;
    letter-spacing : 0.05em;
    font-weight: 500;
}
.main-audio p {
    padding: 25px 0 40px 0;
}
.main-txt p {
    color:#000;
}
/* music14 */
.music14-position{
    position: relative;
    width: 100%;
    height: 1000px;
    z-index: 15;
}
.music14 {
    width: 100%;
    background-image:url("../img/14music_bg_sp.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: 480px;
    position: absolute;
    top: -250px;
    padding: 150px 0 160px 0;
}
.music14-title,
.music14-txt {
    padding:0 5% 0 20%;
    letter-spacing : 0.075em;
    font-size: 1.5rem;
    font-weight: 500;
}
.music14-title img {
    width: 160px;
    height: auto;
}
.music14-txt p {
    font-size: 1.3rem;
    padding-bottom: 25px;
}
.music14-txt h3 {
    font-size: 1.5rem;
    font-weight: normal;
}
.music14-txt h3 img {
    width: 240px;
    height: auto;
    padding-bottom: 15px;
}
.music14-txt a img {
    width: 100%;
    height: auto;
    margin: 20px 0;
}
.music14-playlist-position{
    position: relative;
    z-index: 20;
}
.music14-playlist-ab {
    background-color: #76c2c0;
    width: 100%;
    position: absolute;
    top: -220px;
    padding-top: 100px;
    /* 背景を斜めにカット */
    clip-path: polygon(0 0, 100% 100px, 100% 100%, 0% 100%);
}
.music14-playlist-padding {
    padding: 0 5% 0 5%;
}
.music14-playlist {
    background-color: #76c2c0;
    width: 100%;
    padding: 0 5%;
    height: 2500px;
}
.music14-playlist-logo {
    text-align: center;
    padding-bottom: 40px;
}
.music14-playlist-logo img {
    display: block;
    margin: 0 auto;
}
.music14-playlist-logo .img-jfn {
    width: 96px;
    height: auto;
    padding-bottom: 10px;
}
.music14-playlist-logo .img-main02 {
    width: 100%;
    height: auto;
}
/* gest */
.music14-personality-flex {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    padding-bottom: 30px;
}
.music14-personality-img {
    width: 100%;
    text-align: center;
}
.music14-personality-img img{
    width: 60%;
}
.music14-personality {
    width:100%;
}
.music14-personality-name {
    text-align: center;
    padding: 20px 0;
}
.music14-personality-name img {
    width:316px;
    height: auto;
}
.music14-personality-txt p{
    font-size: 1.3rem;
    letter-spacing : 0.075em;
}
.music14-guest {
    padding-bottom: 40px;
}
.music14-guest-name img{
    display: block;
    margin: 0 auto;
}
.guest-logo {
    width: 33%;
    height: auto;
    padding-bottom: 10px;
}
.guest-name {
    width: 76%;
    height: auto;
    padding-bottom: 10px;
}
.guest-img {
    width: 100%;
    height: auto;
}
.music14-guest-txt {
    letter-spacing : 0.075em;
}
.music14-guest-txt h3{
    font-size: 1.6rem;
    font-weight: 500;
    padding: 20px 0;
}
.music14-guest-txt p{
    font-size: 1.3rem;
    font-weight: normal;
}

/* message */
.music14-message-txt {
    width: 100%;
}
.music14-message-img {
    width: 70%;
}
.music14-message-img img{
    vertical-align:top;
}
.music14-message-txt p{
    font-size: 1.3rem;
    font-weight: 500;
    padding: 20px 0;
}
.music14-request {
    text-align: center;
}
.music14-request img {
    width: 80%;
}

.music14-bg-sp {
    position: relative;
}
.music14-abs {
    width: 120%;
    height: 550px;
    position: absolute;
    background:url("../img/cassette_sp.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 60%;
    top: 0;
    right: 0;
    
}

.music14-message-flex-sp {
    padding-top: 30px;
    padding-bottom: 200px;
}
.sp-bg {
    position: relative;
}
.sp-bg-img {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    height: 600px;
    position: absolute;
    background:url("../img/cassette_sp.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 300px;
    overflow: hidden;
    top: 0;
    right: 0;
}
.sp-bg-ab {
    position: absolute;
    background-repeat: no-repeat;
    background-position: right;
    background-size: 400px;
    overflow: hidden;
    top: 0;
    right: 0;
}
.sp-bg-ab p {
    margin-right: 30px;
}
.music14-abs img{
    width: 65%;
}
.music14-message-sp-bg {
    position: absolute;
    width: 120%;
    height: 550px;
    background:url("../img/cassette_sp.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 300px;
    top: 0;
}
.footer-logo-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
footer {
    background-color: #fdfaeb;
    padding: 0 5%;
    position: relative;
    z-index: 30;
}
.footer-flex {
    width: 100%;
    text-align: center;
}
.footer-logo-flex img{
    width: 50%;
    height: auto;
    padding-top: 20px;
}
.footer-logo {
    width: 60%;
	text-align: center;
}
.footer-logo-flex p {
    width: 100%;
	color:#100b74;
	padding-top: 20px;
    padding-bottom: 80px;
    font-size: 1.3rem;
    font-weight: normal;
}

/* 追加作業------------------------------ */
.flex-left img {
	width: 100%;
	padding-right: 20px;
	padding-top: 0px;
}
.flex-right img {
	width: 100%;
	padding-left: 20px;
}

/* 〜375px：SP
------------------------------ */
@media screen and (max-width:375px) {
    .sns-link {
        left: calc(50% - 175px);
    }
    .music14-playlist-position{
        height: 2630px;
    }
    .music14-playlist {
        top: -240px;
        height: 2450px;
    }
    .music14-playlist-ab {
        top: -180px;
    }
    .music14 {
        background-size: 375px;
    }
}
/* 480px〜599px：SP横
------------------------------ */
@media screen and (min-width:480px) and (max-width:599px) {
    .sns-link {
        left: calc(50% - 210px);
    }
    .main-bg .main-record {
        background-size: 650px;
        padding:20px 0 200px 0;
    }
    .main-record .img-jfn {
        width: 86px;
        height: auto;
        padding-top: 10px;
        padding-bottom: 60px;
    }
    .main-record .img-link {
        margin: 30px 0 50px 0;
    }
    .main-record .img-main03 {
        width: 40px;
        height: auto;
    }
    .music14 {
        background-size: 600px;
        top: -250px;
        padding: 230px 0 200px 0;
    }
    .music14-playlist-position{
        height: 2780px;
    }
    .music14-playlist {
        height: 2850px;
        top: -260px;
        padding: 100px 5% 160px 5%;
    }
}

/* 600px〜：タブレット + PC
------------------------------ */
@media screen and (min-width:600px) {
    .music14-request a {
        font-size: 3.0rem;
    }
    .sns-link {
        position: absolute;
        z-index: 5;
        top: 40px;
        left: calc(50% - 280px);
    }
    .sns-bg {
        text-align: center;
        padding-top: 240px;
        background-color: #fe4f00;
        width: 50px;
        height: 350px;
        border-radius: 50px;
    }
    .sns-link a .sns-twitter{
        margin-top: 15px;
    }
    

    .main-record .img-jfn {
        width: 50px;
        padding-top: 20px;
        padding-bottom: 55px;
    }
    .main-record .img-main02 {
        width: 400px;
        height: auto;
    }
    .main-record .img-link {
        margin: 20px 0 60px 0;
    }
    .main-record .img-main03 {
        width: 50px;
        height: auto;
    }
    .main-audio p {
        font-size: 1.3rem;
    }
    .main-txt p {
        font-size: 1.2rem;
    }

    .music14 {
        background-image:url("../img/14music_bg.png");
        background-size: 100%;
        top: -250px;
        padding: 200px 0 1500px 0;
    }
    .music14-title,
    .music14-txt {
        padding:0 20% 0 45%;
        letter-spacing : 0.075em;
        font-size: 1.5rem;
        font-weight: 500;
    }
    .music14-playlist {
        padding-top: 10px;
        height: auto;
    }
    .music14-playlist-ab {
        top: -320px;
        padding-top: 200px;
        /* 背景を斜めにカット */
        clip-path: polygon(0 0, 100% 240px, 100% 100%, 0% 100%);
    }
    .music14-playlist-padding {
        padding: 0 8% 0 8%;
    }
    .music14-playlist-logo .img-jfn {
        width: 126px;
        padding-bottom: 10px;
    }
    .music14-playlist-logo .img-main02 {
        width: 50%;
    }
    .music14-personality-flex {
        padding: 0 7% 30px 7%;
    }
    .music14-personality-img {
        width: 35%;
        text-align: center;
    }
    .music14-personality-img img{
        width: 100%;
    }
    .music14-personality {
        width:65%;
    }
    .music14-personality-name {
        text-align: left;
        padding: 10px 0 10px 0;
    }
    .music14-personality-name img {
        width:250px;
        height: auto;
    }
    .music14-personality-txt p{
        font-size: 1.3rem;
        font-weight: normal;
        padding-right: 20px;
    }
    .music14-guest-txt h3{
        font-size: 2.2rem;
        padding: 20px 0 10px 0;
    }
    .music14-guest-txt p{
        font-size: 1.3rem;
    }
    .guest-logo {
        width: 180px;
        padding-bottom: 10px;
    }
    .guest-name {
        width: 50%;
        padding-bottom: 10px;
    }
    .guest-pc {
        padding: 0 7% 40px 7%;
    }
    .message-pc {
        padding: 0 4% 0 7%;
    }





    .main-bg .main-record {
        background-size: 800px;
        padding:20px 0 200px 0;
    }
    .pc {
        display: block;
    }
    .sp {
        display: none;
    }
    .music14-message-flex {
        display: flex;
        align-items: center;
        padding-top: 50px;
    }
    .music14-message-img {
        width: 45%;
    }
    .music14-message-txt {
        width: 65%;
        padding: 0 9% 0 7%;
    }
    .music14-message-img img{
        width: 100%;
    }
    .music14-message-txt img{
        width: 75%;
        height: auto;
    }
    .music14-message-txt a img{
        width: 100%;
    }

    .footer-logo-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    footer {
        background-color: #fdfaeb;
        padding: 0 5%;
    }
    .footer-flex {
        width: 30%;
        padding: 0 15px;
    }
    .footer-logo-flex img{
        width: 100%;
        padding-top: 40px;
    }
    .footer-logo {
        width: 20%;
        text-align: center;
        padding: 20px 0 10px 0;
    }
    .footer-logo img {
        width: 80%;
        padding-top: 0px;
    }
    .footer-logo-flex p {
		width: 100%;
		text-align: center;
        padding-bottom: 10px;
        font-size: 1.0rem;
    }
    .flex-left {
        text-align: right;
        padding-right: 20px;
    }
    .flex-right {
        padding-left: 20px;
    }
}
/* 600px〜959px：タブレット
------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {
    .music14-request a {
        font-size: 2.0rem;
    }
    .music14 {
        background-image:url("../img/14music_bg.png");
        background-size: 180%;
        top: -300px;
        padding: 200px 0 1500px 0;
        height: 2000px;
    }
    .music14-title,
    .music14-txt {
        padding:0 10% 0 45%;
    }
    .music14-playlist-ab {
        top: -220px;
        padding-top: 200px;
        /* 背景を斜めにカット */
        clip-path: polygon(0 0, 100% 240px, 100% 100%, 0% 100%);
    }
}