@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@media screen and (min-width:871px){
    body {
        margin:0;
        padding:0;
        font-size:15px;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight:600;
        line-height:1.8;
    }

    #header{
        position:relative;
        background-image:url("../images/bg_page_top_yellow_pc.jpg");
        background-repeat: no-repeat;
        background-size:100% 336px;
        width:100%;
        height:336px;
        margin:auto;
    }

    #logo_original{
        height:70px;
        position:absolute;
        top:10%;
        left:3%;
    }

    #header_navi{
        position:absolute;
        top:20%;
        left:50%;
        transform: translate(-50%,-50%);
        width:620px;
        height:70px;
        text-align:center;
        background-color:white;
        border-radius:50px;
        line-height:70px;
        box-shadow: 0px 0px 5px 0px rgb(186, 182, 182);
    }

    #header_navi ul{
        /* list-style:none; */
        padding:0;
        margin:0 auto;
        height:70px;
    }

    #header_navi li{
        display:inline;
        height:50px;
        margin:0 27px;
        display:inline-block;
        border-radius:50px;
        width:15%;
        line-height:50px;
    }

    #header_navi li a#header_navi_rinen{
        color:#FED700;
    }

    #shindan{
        background-color:#FED700;
        border-radius:50px;
    }
    
    #header_navi a{
        color:black;
        text-decoration:none;
    }

    #philosophy{
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        color:white;
        font-size:72px;
        font-family: 'Helvetica Neue',sans-serif;
    }

    #header_rinen{
        position:absolute;
        top:87%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size:22px;
    }

    #philosophy_man1{
        height:200px;
        position:absolute;
        top:45%;
        left:69%;
    }

    #rinen_text{
        text-align:center;
        margin:50px auto;
    }

    .rinen_text_comma{
        color:#888686;
    }

    #rinen_text h1{
        margin-bottom:40px;
    }

    #text_kodoku{
        font-size:22px;
        text-decoration:underline;
        text-decoration-color:#FED700;
        font-weight: 800;
    }

    #keireki{
        width:80%;
        margin:70px auto;
        position:relative;
    }
    
    #keireki_midashi{
        text-align:center;
        margin-bottom:30px;
    }
    
    #keireki_midashi h1{
        margin:auto;
    }

    #keireki_midashi h1 div{
        width:160px;
        margin:auto;
        text-align:center;
        border-bottom:#FED700 dotted;
        text-decoration-color:#FED700;
    }
    
    #keireki_area{
        background-color:#F8F8F8;
        height:800px;
        width: 110%;
        max-width:950px;
        margin:auto;
        position:relative;
    }
    
    #philosophy_man2{
        width:190px;
        position:absolute;
        top:-11%;
        left:75%;
    }
    
    #keireki_text{
        width:80%;
        padding-top:60px;
        padding-left:60px;
        list-style:none;
    }

    #keireki_text li{
        display:flex;
        margin-bottom:35px;
    }

    #keireki_text li p{
        margin:0;
    }

    .date{
        width:15%
    }

    .content{
        width:85%
    }

    #character_area{
        display:flex;
        justify-content: center;
        width: 110%;
        max-width:950px;
        height:300px;
        margin:auto;
        margin-top:30px;
        position:relative;
    }

    #philosophy_man3{
        width:35%;
    }

    #character_contents{
        width:55%;
        height:160px;
        display:table;
        border:solid;
        border-color:#FED700;
        border-radius:100px;
        border-width:10px;
        text-align:center;
        margin-top:auto;
        margin-bottom:auto;
    }

    #character_contents_title{
        position:absolute;
        top:-5%;
        left:30%;
        font-size:20px;
        transform:rotate(-15deg);
    }

    #character_contents_title span{
        font-size:25px;
    }

    #character_contents_content{
        display: table-cell;
        vertical-align:middle;
        line-height:35px;
        text-align:left;
        padding-left:50px;
    }

    #character_contents_content_smp{
        display:none;
    }

}

@media screen and (max-width:870px){
    body {
        margin:0;
        padding:0;
        font-size:13px;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight:600;
        line-height:1.8;
    }

    #header{
        position:relative;
        background-image:url("../images/bg_page_top_yellow_sp.jpg");
        background-repeat: no-repeat;
        background-size:100% 336px;
        width:100%;
        height:336px;
        margin:auto;
    }

    #logo_original{
        height:60px;
        position:absolute;
        top:13%;
        left:5%;
    }

    #header_navi{
        display:none;
    }

    #header_navi_smp ul{
        list-style:none;
        padding:0;
        margin:0 auto;
        padding-top:80px;
        height:700px;
    }
    
    #header_navi_smp li{
        height:90px;
        margin:0 auto;
        line-height:45px;
        text-align:center;
    }
    
    #header_navi_smp a:not(#header_navi_smp_top){
        font-size:18px;
        text-decoration:none;
        color:black;
    }
    
    #header_navi_smp_top{
        font-size:18px;
        text-decoration:none;
        color:white;
    }

    #header_navi_smp_shindan{
        border-radius:50px;
        display:inline-block;
        background-color:white;
        width:120px;
        height:50px;
    }

    #philosophy{
        position:absolute;
        top:60%;
        left:50%;
        transform: translate(-50%,-50%);
        color:white;
        font-size:45px;
        font-family: 'Helvetica Neue',sans-serif;
    }

    #header_rinen{
        position:absolute;
        top:90%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size:25px;
    }

    #philosophy_man1{
        display:none;
    }

    #rinen_text{
        width:350px;
        margin:50px auto;
    }

    #rinen_text h1{
        text-align:center;
        font-weight:800;
        margin-bottom:40px;
    }

    .rinen_text_comma{
        color:#888686;
    }

    #text_kodoku{
        font-size:17px;
        text-decoration:underline;
        text-decoration-color:#FED700;
        font-weight: 750;
    }

    #keireki{
        width:350px;
        margin:70px auto;
        position:relative;
    }
    
    #keireki_midashi{
        text-align:center;
        margin-bottom:30px;
    }
    
    #keireki_midashi h1{
        margin:auto;
    }

    #keireki_midashi h1 div{
        width:150px;
        margin:auto;
        text-align:center;
        border-bottom:#FED700 dotted;
        text-decoration-color:#FED700;
    }
    
    #keireki_area{
        background-color:#F8F8F8;
        border-radius:2%;
        width:350px;
        height:1050px;
        margin:auto;
    }
    
    #philosophy_man2{
        display:none;
    }
    
    #keireki_text{
        width:90%;
        margin:auto;
        padding:30px 0px 30px 0px;
        list-style:none;
    }

    #keireki_text li{
        display:flex;
        justify-content:space-between;
        margin-bottom:35px;
    }

    #keireki_text li p{
        margin:0;
    }

    .date{
        width:19%
    }

    .content{
        width:77%
    }

    .date, .content_title{
        font-size:15px;
        font-weight:700;
    }

    #character_area{
        width:350px;
        /* height:300px; */
        /* margin-right:0px; */
        margin:150px 20px 50px 20px;
        position:relative;
    }

    #philosophy_man3{
        width:180px;
        position:absolute;
        top:-60%;
        left:-10%;
    }

    #character_contents{
        width:330px;
        height:160px;
        border:solid;
        border-color:#FED700;
        border-radius:100px;
        border-width:10px;
        background-color:white;
        text-align:center;
        position:relative;
        right:20px;
    }

    #character_contents_title{
        position:absolute;
        top:-50%;
        right:7%;
        transform:rotate(3deg);
    }

    #character_contents_title span{
        font-size:20px;
    }

    #character_contents_content{
        display: none;
    }

    #character_contents_content_smp{
        width:260px;
        margin:18px auto;
        text-align:left;
    }

}